:root {
  --space: oklch(0.17 0.035 268);
  --space-glow: oklch(0.26 0.06 268);
  --glass: oklch(0.17 0.02 60);
  --glow: oklch(0.94 0.1 85);
  --glow-dim: oklch(0.72 0.12 75);
  --plate-shade: oklch(0.8 0.035 75);
  --button: oklch(0.96 0.03 90);
  --button-deep: oklch(0.8 0.04 80);
  --ink: oklch(0.94 0.01 268);
  --ink-muted: oklch(0.7 0.03 268);
  --sheet: oklch(0.23 0.035 268);
  --sheet-line: oklch(0.33 0.035 268);
  --accent: oklch(0.72 0.135 38);
  --accent-tint: oklch(0.36 0.07 38);
  --ease-ui: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
  --dur-feedback: 110ms;
  --dur-state: 160ms;
  --dur-reveal: 300ms;
  --font-screen: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background:
    radial-gradient(60% 45% at 50% 46%, var(--space-glow), transparent 70%),
    radial-gradient(1px 1px at 12% 18%, oklch(0.9 0.02 268 / 0.7), transparent),
    radial-gradient(1px 1px at 82% 12%, oklch(0.9 0.02 268 / 0.6), transparent),
    radial-gradient(1.5px 1.5px at 90% 64%, oklch(0.9 0.02 268 / 0.5), transparent),
    radial-gradient(1px 1px at 8% 76%, oklch(0.9 0.02 268 / 0.6), transparent),
    radial-gradient(1px 1px at 30% 92%, oklch(0.9 0.02 268 / 0.4), transparent),
    radial-gradient(1.5px 1.5px at 68% 90%, oklch(0.9 0.02 268 / 0.5), transparent),
    radial-gradient(1px 1px at 52% 5%, oklch(0.9 0.02 268 / 0.5), transparent),
    var(--space);
  color: var(--ink);
  font-family: system-ui, -apple-system, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  overscroll-behavior: none;
}

button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
button:focus { outline: none; }
button:focus-visible { outline: 2px solid oklch(0.94 0.1 85 / 0.45); outline-offset: 0; }

.stage {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: max(env(safe-area-inset-top), 12px) 12px max(env(safe-area-inset-bottom), 12px);
}

/* The device is drawn in a 400 x 650 box; everything on it is placed in % of that box. */
.device {
  position: relative;
  container-type: inline-size;
  width: min(94vw, 430px, calc((100dvh - max(env(safe-area-inset-top), 12px) - max(env(safe-area-inset-bottom), 12px) - 48px) * 400 / 650));
  aspect-ratio: 400 / 650;
  filter: drop-shadow(0 18px 40px oklch(0.08 0.03 268 / 0.7));
}
.shell { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.engrave {
  font: 800 13px var(--font-screen);
  letter-spacing: 4px;
  fill: var(--plate-shade);
}
.probe-led { fill: oklch(0.42 0.13 27); }
.device[data-state="testing"] .probe-led { animation: blink 0.5s steps(2, jump-none) infinite; }
.device[data-state="good"] .probe-led { fill: oklch(0.78 0.16 145); }
.device[data-state="bad"] .probe-led { fill: oklch(0.66 0.21 28); }
@keyframes blink { from { fill: oklch(0.42 0.13 27); } to { fill: oklch(0.72 0.2 30); } }

/* Cream buttons on the shoulders. 50px on a 400px device, so always a real thumb target. */
.knob {
  position: absolute;
  top: 23.23%;
  width: 12.5%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, oklch(0.995 0.01 90), var(--button) 45%, var(--button-deep));
  box-shadow:
    0 0.6cqw 0 oklch(0.66 0.05 70),
    0 1.2cqw 2.4cqw oklch(0.3 0.06 40 / 0.45),
    inset 0 -0.6cqw 1cqw oklch(0.82 0.04 80);
  transition: transform var(--dur-feedback) var(--ease-ui), box-shadow var(--dur-feedback) var(--ease-ui);
}
.knob::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; }
.knob:active { transform: translateY(0.5cqw) scale(0.97); box-shadow: 0 0.1cqw 0 oklch(0.66 0.05 70), 0 0.4cqw 1cqw oklch(0.3 0.06 40 / 0.4), inset 0 -0.3cqw 0.8cqw oklch(0.82 0.04 80); }
.knob-photo { left: 17.75%; }
.knob-test { left: 69.75%; }
.knob-label {
  position: absolute;
  top: 26.2%;
  font: 800 2.7cqw/1 var(--font-screen);
  letter-spacing: 0.35cqw;
  color: var(--plate-shade);
  pointer-events: none;
}
.knob-label-photo { left: 32.5%; }
.knob-label-test { right: 32.5%; }

/* Round screen */
.eye {
  position: absolute;
  left: 20.5%;
  top: 30.769%;
  width: 59%;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, oklch(0.24 0.03 65), var(--glass) 70%);
  box-shadow: inset 0 0 3cqw oklch(0.05 0.01 60 / 0.9);
  isolation: isolate;
}
.eye::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    repeating-linear-gradient(0deg, oklch(0.1 0.02 60 / 0.22) 0 1px, transparent 1px 3px),
    radial-gradient(circle at 32% 24%, oklch(1 0 0 / 0.12), transparent 38%);
  pointer-events: none;
  z-index: 5;
}
.eye video, .eye img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity var(--dur-state) var(--ease-ui);
}
.device[data-state="live"] .eye video { opacity: 1; }
.device[data-state="testing"] .eye img { opacity: 0.55; filter: sepia(0.9) saturate(1.4) hue-rotate(-8deg) brightness(0.9); }

.reticle, .nocam, .face { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; }
.reticle path, .nocam * {
  fill: none;
  stroke: var(--glow);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 1.5px var(--glow-dim));
}
.reticle, .nocam { opacity: 0; transition: opacity var(--dur-state) var(--ease-ui); }
.device[data-state="live"] .reticle { opacity: 0.9; }
.device[data-state="nocam"] .nocam { opacity: 0.85; }

/* Testing sweep: a glowing bar slides down the frozen frame. */
.scan {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(180deg, transparent 0 44%, oklch(0.94 0.1 85 / 0.55) 50%, transparent 56%);
  background-size: 100% 220%;
}
.device[data-state="testing"] .scan { opacity: 1; animation: sweep 0.9s linear infinite; }
@keyframes sweep { from { background-position: 0 100%; } to { background-position: 0 0%; } }

/* Faces */
.face { opacity: 0; }
.face .f { display: none; }
.face .ring, .face .line, .face .tongue {
  fill: none;
  stroke: var(--glow);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.face .dot { fill: var(--glow); }
.face { filter: drop-shadow(0 0 1.2px var(--glow)) drop-shadow(0 0 5px var(--glow-dim)); }
.device[data-state="good"] .face,
.device[data-state="bad"] .face,
.device[data-state="hmm"] .face,
.device[data-state="error"] .face { opacity: 1; animation: power-on var(--dur-reveal) var(--ease-ui); }
.device[data-state="good"] .f-good,
.device[data-state="bad"] .f-bad,
.device[data-state="hmm"] .f-hmm,
.device[data-state="error"] .f-hmm { display: inline; }
.device[data-face] .face .ring,
.device[data-face] .face .line,
.device[data-face] .face .tongue { stroke-dasharray: 1; animation: draw 420ms var(--ease-ui) both; }
.device[data-face] .face .line { animation-delay: 90ms; }
.device[data-face] .face .tongue { animation-delay: 220ms; }
.device[data-face] .face .dot { animation: pop 260ms var(--ease-ui) 120ms both; transform-box: fill-box; transform-origin: center; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes power-on { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }

/* Rectangular readout */
.panel {
  position: absolute;
  left: 22.5%;
  top: 74.154%;
  width: 55%;
  height: 14.154%;
  border-radius: 2.6cqw;
  background:
    repeating-linear-gradient(0deg, oklch(0.1 0.02 60 / 0.25) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, oklch(0.22 0.03 65), var(--glass));
  box-shadow: inset 0 0 2cqw oklch(0.05 0.01 60 / 0.9);
  color: var(--glow);
  font-family: var(--font-screen);
  text-transform: uppercase;
  text-shadow: 0 0 0.4cqw var(--glow-dim), 0 0 1.8cqw oklch(0.72 0.12 75 / 0.55);
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 1.6cqw 2.6cqw 1.5cqw;
  overflow: hidden;
}
.panel-top {
  display: flex;
  justify-content: space-between;
  gap: 2cqw;
  font: 700 2.5cqw/1.15 var(--font-screen);
  letter-spacing: 0.15cqw;
  color: var(--glow-dim);
  border-bottom: 1px solid oklch(0.72 0.12 75 / 0.35);
  padding-bottom: 0.8cqw;
  min-height: 3.8cqw;
}
.panel-top span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.time { font-variant-numeric: tabular-nums; flex: none; }
.panel-big {
  align-self: center;
  justify-self: center;
  font-weight: 900;
  font-size: 9cqw;
  line-height: 1;
  letter-spacing: 0.3cqw;
  white-space: nowrap;
}
.panel-big[data-long] { font-size: 7cqw; }
.device[data-face] .panel-big { animation: power-on var(--dur-reveal) var(--ease-ui); }
.panel-sub {
  font: 700 2.5cqw/1.2 var(--font-screen);
  letter-spacing: 0.12cqw;
  text-align: center;
  color: var(--glow-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-height: 3cqw;
}

.rules-link {
  font-size: 14px;
  color: var(--ink-muted);
  padding: 8px 14px;
  border-radius: 7px;
  transition: color var(--dur-state) var(--ease-ui);
}
@media (hover: hover) and (pointer: fine) { .rules-link:hover { color: var(--ink); } }

/* Rules sheet */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  background: oklch(0.08 0.02 268 / 0.55);
  z-index: 10;
  opacity: 0;
  transition: opacity 260ms var(--ease-ui);
}
.sheet-backdrop.open { opacity: 1; }
.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  width: min(100%, 480px);
  z-index: 11;
  background: var(--sheet);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px max(env(safe-area-inset-bottom), 16px);
  transform: translate(-50%, 100%);
  transition: transform 300ms var(--ease-drawer);
  box-shadow: 0 -10px 30px oklch(0.08 0.02 268 / 0.5);
}
.sheet.open { transform: translate(-50%, 0); transition-duration: 420ms; }
.sheet h2 { margin: 0 0 6px; font-size: 17px; font-weight: 650; }
.rule {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--sheet-line);
}
.rule-name { font-size: 15px; font-weight: 600; }
.rule-hint { font-size: 13px; color: var(--ink-muted); margin-top: 3px; line-height: 1.35; }
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--sheet-line);
  border-radius: 7px;
  overflow: hidden;
}
.seg button {
  padding: 0 10px;
  height: 34px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-muted);
  white-space: nowrap;
  transition: background-color var(--dur-state) var(--ease-ui), color var(--dur-state) var(--ease-ui);
}
.seg button + button { border-left: 1px solid var(--sheet-line); }
.seg button[aria-checked="true"] { background: var(--accent-tint); color: oklch(0.9 0.07 45); }
.seg button:active { transform: scale(0.98); }
.sheet-done {
  margin-top: 16px;
  width: 100%;
  height: 40px;
  border-radius: 8px;
  background: var(--accent);
  color: oklch(0.2 0.04 38);
  font-weight: 700;
  font-size: 15px;
  transition: transform var(--dur-feedback) var(--ease-ui), background-color var(--dur-state) var(--ease-ui);
}
.sheet-done:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .sheet-done:hover { background: oklch(0.66 0.14 36); } }

@media (max-width: 360px) {
  .rule { grid-template-columns: 1fr; gap: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .device[data-face] .face .ring,
  .device[data-face] .face .line,
  .device[data-face] .face .tongue,
  .device[data-face] .face .dot { animation: none; stroke-dashoffset: 0; }
  .device[data-state] .face,
  .device[data-face] .panel-big { animation: fade 200ms linear; }
  .device[data-state="testing"] .scan { animation: none; opacity: 0.4; }
  .sheet, .sheet.open { transition: none; }
  @keyframes fade { from { opacity: 0; } to { opacity: 1; } }
}