.release32-device-tool {
  --r32-device-ink: var(--text, #17212b);
  --r32-device-muted: var(--muted, #637083);
  --r32-device-line: color-mix(in srgb, currentColor 18%, transparent);
  --r32-device-accent: var(--accent, #0f766e);
  --r32-device-soft: color-mix(in srgb, var(--r32-device-accent) 9%, transparent);
  color: var(--r32-device-ink);
  display: grid;
  gap: 14px;
  min-width: 0;
}

.release32-device__header {
  display: grid;
  gap: 7px;
}

.release32-device__header h2,
.release32-device__header p,
.release32-device__status,
.release32-device__meta,
.release32-device__capability {
  margin: 0;
}

.release32-device__header h2 {
  font-size: clamp(1.45rem, 3vw, 2.1rem);
  letter-spacing: -.035em;
}

.release32-device__header p,
.release32-device__capability,
.release32-device__meta {
  color: var(--r32-device-muted);
  line-height: 1.65;
}

.release32-device__kicker {
  color: var(--r32-device-accent);
  font: 800 .72rem/1.1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: .12em;
}

.release32-device__capability,
.release32-device__status {
  border-left: 3px solid var(--r32-device-accent);
  padding: 8px 12px;
}

.release32-device__status[data-tone="error"] {
  border-color: #b42318;
  color: #b42318;
}

.release32-device__status[data-tone="success"] {
  border-color: #13795b;
  color: #13795b;
}

.release32-device__actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

.release32-device__actions button {
  min-height: 40px;
}

.release32-device__zone {
  background: linear-gradient(135deg, var(--r32-device-soft), transparent 70%);
  border: 1px dashed var(--r32-device-accent);
  border-radius: 16px;
  height: 300px;
  min-height: 220px;
  overflow: hidden;
  position: relative;
  touch-action: none;
  user-select: none;
}

.release32-device__zone > span {
  color: var(--r32-device-muted);
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.release32-device__dot {
  background: #ef4444;
  border: 3px solid #fff;
  border-radius: 50%;
  box-shadow: 0 3px 12px #0004;
  height: 16px;
  left: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translate(-50%, -50%);
  width: 16px;
}

.release32-device__output {
  background: color-mix(in srgb, var(--surface-strong, #0f172a) 94%, transparent);
  border-radius: 12px;
  color: var(--surface-text, #e2e8f0);
  margin: 0;
  max-height: 260px;
  min-height: 86px;
  overflow: auto;
  padding: 13px 15px;
  white-space: pre-wrap;
  word-break: break-word;
}

.release32-device__preview {
  align-items: center;
  background: repeating-conic-gradient(#e2e8f0 0 25%, #f8fafc 0 50%) 50% / 18px 18px;
  border: 1px solid var(--r32-device-line);
  border-radius: 14px;
  display: flex;
  justify-content: center;
  min-height: 220px;
  overflow: auto;
  padding: 12px;
}

.release32-device__preview img {
  display: block;
  max-height: 560px;
  max-width: 100%;
  object-fit: contain;
}

.release32-device__form-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.release32-device__form-grid label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.release32-device__form-grid input {
  box-sizing: border-box;
  min-height: 40px;
  min-width: 0;
  width: 100%;
}

.release32-device__ruler-wrap {
  border: 1px solid var(--r32-device-line);
  border-radius: 12px;
  max-width: 100%;
  overflow-x: auto;
  padding: 18px 18px 28px;
}

.release32-device__ruler {
  height: 54px;
  min-width: 100px;
  position: relative;
}

.release32-device__tick {
  bottom: 0;
  height: 16px;
  position: absolute;
  transform: translateX(-50%);
  width: 1px;
}

.release32-device__tick i {
  background: currentColor;
  bottom: 0;
  display: block;
  height: 8px;
  left: 0;
  position: absolute;
  width: 1px;
}

.release32-device__tick.is-major {
  height: 28px;
}

.release32-device__tick.is-major i {
  height: 20px;
  width: 2px;
}

.release32-device__tick b {
  bottom: 24px;
  font-size: .7rem;
  left: 0;
  position: absolute;
  transform: translateX(-50%);
  white-space: nowrap;
}

.release32-device-tool :where(button, input):focus-visible,
.release32-device__zone:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--r32-device-accent) 42%, transparent);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .release32-device__actions > button {
    flex: 1 1 140px;
  }

  .release32-device__form-grid {
    grid-template-columns: 1fr;
  }

  .release32-device__zone {
    height: 240px;
  }

  .release32-device__zone > span {
    font-size: .85rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .release32-device-tool *,
  .release32-device-tool *::before,
  .release32-device-tool *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
}