/* Tokens: the NodeVSP brand (nodevsp-branding DESIGN.md) -- a near-black ground
   in three tonal steps, hairlines, and one orange family: node orange fills,
   rust connects, ember is the readable orange for text. Dark is the default,
   :root.light overrides.
   Type in three voices: Archivo Expanded announces, Inter explains, Plex Mono
   measures (one-line values only). Self-hosted copies of nodevsp-branding's
   site/assets/fonts; cached a year, so replace a file only under a new name. */
@font-face { font-family: 'Archivo'; src: url(/public/fonts/archivo-latin.woff2) format('woff2'); font-weight: 600 800; font-stretch: 100% 125%; font-display: swap; }
@font-face { font-family: 'Inter'; src: url(/public/fonts/inter-latin.woff2) format('woff2'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/public/fonts/plexmono-400-latin.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'IBM Plex Mono'; src: url(/public/fonts/plexmono-500-latin.woff2) format('woff2'); font-weight: 500; font-display: swap; }
:root {
  --color-primary: #151515;     /* ground */
  --color-secondary: #1a1a1a;   /* raised */
  --color-tertiary: #212121;    /* step */
  --color-text-main: #ececec;
  --color-text-sub: #a3a3a3;
  --color-text-dim: #858585;    /* AA on ground and raised; keep it off step */
  --color-border-main: #3a3a3a;
  --color-border-sub: #2e2e2e;
  --color-accent: #E8501F;
  --color-accent-hover: #f2622f;
  --color-accent-alt: #B8391A;  /* connectors only, never text or fills */
  --color-link: #f0916c;
  --color-success: #5FB87A;
  --color-warning: #C9A227;
  --color-error: #E0616F;
  --ink-on-accent: #151515;
  --font-display: 'Archivo', 'Inter', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 14px;
  --gutter: clamp(16px, 4vw, 48px);
  --arm: var(--color-accent);
  color-scheme: dark;
}
:root.light {
  --color-primary: #fafafa;
  --color-secondary: #ffffff;
  --color-tertiary: #f0f0f0;
  --color-text-main: #151515;
  --color-text-sub: #4b4b4b;
  --color-text-dim: #6b6b6b;
  --color-border-main: #d4d4d4;
  --color-border-sub: #e5e5e5;
  --color-accent: #C43D14;
  --color-accent-hover: #a93410;
  --color-accent-alt: #8f2d10;
  --color-link: #C43D14;
  --color-success: #1f8a4c;
  --color-error: #B8394B;
  --ink-on-accent: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scrollbar-color: var(--color-border-main) var(--color-primary); }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-primary);
  color: var(--color-text-main);
  font: 400 17px/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--color-accent); color: var(--ink-on-accent); }
a { color: var(--color-link); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--color-text-main); }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; border-radius: 4px; }
input, textarea { caret-color: var(--color-accent); }
/* Headings: Archivo, always expanded; sizes run ~12% under the old Inter ones.
   h2 keeps line-height 1.15: the spine centers its nodes on .575em. */
h1, h2, h3 { font-family: var(--font-display); font-weight: 700; font-stretch: 112%; text-wrap: balance; }
h1, h2 { margin: 0 0 .5em; }
h1 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); font-weight: 800; font-stretch: 118%; line-height: 1.06; letter-spacing: -.02em; }
h2 { font-size: clamp(1.15rem, 1.95vw, 1.5rem); line-height: 1.15; letter-spacing: -.015em; }
h3 { letter-spacing: -.01em; }
/* Data voice: one-line values -- codes, counters, timings, captions. */
.code code, .progress, .badge, .meta, .intro-meta, .option .letter, .lab-grid-time {
  font-family: var(--font-mono); font-weight: 500; letter-spacing: .02em; font-variant-numeric: tabular-nums;
}
p { margin: 0 0 1em; }
[hidden] { display: none !important; }

/* Page frame */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 10px var(--gutter);
  border-bottom: 1px solid var(--color-border-sub);
  background: color-mix(in srgb, var(--color-primary) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--color-text-main); text-decoration: none; }
.brand:hover { color: var(--color-text-main); }
.mark { display: block; width: 100%; height: 100%; overflow: visible; }
.top .brand .mark { width: 26px; height: 26px; }
.wordmark { font: 800 .8rem/1 var(--font-display); font-stretch: 125%; letter-spacing: .1em; }
.top nav { display: flex; align-items: center; gap: 10px; }
.nav-links { display: flex; gap: 22px; margin-right: 8px; }
.nav-links a { color: var(--color-text-sub); text-decoration: none; font-size: .92rem; }
.nav-links a:hover { color: var(--color-text-main); }
/* Header controls: outlined pills and discs, 44px so a thumb can hit them. */
.pill, .disc {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px;
  border: 1px solid var(--color-border-main); border-radius: 999px;
  background: transparent; color: var(--color-text-sub);
  font: 600 .82rem/1 var(--font-body); letter-spacing: .04em; text-decoration: none;
  cursor: pointer;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.pill { padding: 0 14px; }
.disc { width: 44px; padding: 0; }
.disc svg { width: 18px; height: 18px; }
.pill:hover, .disc:hover { color: var(--color-text-main); border-color: var(--color-text-dim); }
@media (max-width: 640px) { .nav-links { display: none; } }
@media (max-width: 400px) { .top .wordmark { display: none; } }
.qr-dialog {
  border: 1px solid var(--color-border-main);
  border-radius: var(--radius);
  background: var(--color-secondary);
  color: var(--color-text-main);
  padding: 24px;
  text-align: center;
}
.qr-dialog::backdrop { background: rgba(0, 0, 0, .6); }
.qr-dialog img { display: block; margin: 0 auto 16px; border-radius: 8px; background: #fff; padding: 8px; }
/* min-height keeps the footer below the first screen, so copy and data that
   arrive after first paint don't shove it around (layout shift). */
main { flex: 1; width: 100%; max-width: 1120px; min-height: calc(100svh - 64px); margin: 0 auto; padding: 40px var(--gutter) 64px; }
/* Every string is set by chrome.js init(), which fills the header in the same
   task. Until then, don't paint an empty page that the copy would shove around. */
.top:empty ~ main { visibility: hidden; }
.foot {
  padding: 32px var(--gutter) 40px;
  border-top: 1px solid var(--color-border-sub);
  color: var(--color-text-dim);
  font-size: .85rem;
}
.foot p { max-width: 70ch; margin: 0 auto 8px; }
.lead { color: var(--color-text-sub); max-width: 60ch; font-size: 1.08rem; }
.note { color: var(--color-text-dim); font-size: .85rem; margin: 8px 0 0; }

/* Panels and buttons */
.card {
  background: var(--color-secondary);
  border: 1px solid var(--color-border-main);
  border-radius: var(--radius);
  padding: 24px 26px;
}
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 0 22px;
  border-radius: 999px; border: 1px solid var(--color-border-main);
  background: transparent; color: var(--color-text-main); text-decoration: none;
  font: 600 .98rem/1.2 var(--font-body); cursor: pointer;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover:not(:disabled) { border-color: var(--color-text-dim); color: var(--color-text-main); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary { background: var(--color-accent); border-color: var(--color-accent); color: var(--ink-on-accent); }
.btn.primary:hover:not(:disabled) { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--ink-on-accent); }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }

/* Home: one line of context, then the spine -- consent, then the task picker.
   The pitch lives on the landing page; this page gets people started. */
main.home { max-width: none; padding: 0; }
.home .wrap { max-width: 880px; margin: 0 auto; padding: 0 var(--gutter); }
.intro {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; justify-content: flex-end;
  min-height: clamp(420px, 62vh, 680px);
  padding: clamp(48px, 10vh, 112px) 0 clamp(96px, 12vh, 128px);
}
/* NodeVSP at work behind the intro: centered, faded into the ground at both
   sides and at the bottom, dimmed enough for the heading to sit on it, with the
   brand glow falling from the top edge over it. */
.intro-video { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.intro-video video {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
  opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.intro-video::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 900px 440px at 50% -20%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 65%),
    linear-gradient(180deg, transparent 55%, var(--color-primary) 100%),
    color-mix(in srgb, var(--color-primary) 45%, transparent);
}
/* The recordings are dark app screens: kept true (no inversion), just faint in light. */
:root.light .intro-video video { opacity: .2; }
@media (max-width: 900px) {
  .intro-video video { opacity: .35; -webkit-mask-image: none; mask-image: none; }
}
.intro-meta {
  position: absolute; right: var(--gutter); bottom: 20px; margin: 0;
  display: flex; align-items: center; gap: 12px;
  font-size: .75rem; color: var(--color-text-dim); text-align: right;
}
.intro-meta b { color: var(--color-text-sub); font-weight: 500; }
.intro-meta .disc { flex: none; background: var(--color-tertiary); }
.intro-meta svg { width: 14px; height: 14px; }
#bg-toggle .i-play, #bg-toggle.is-paused .i-pause { display: none; }
#bg-toggle.is-paused .i-play { display: block; }
.intro h1 { font-size: clamp(2.2rem, 5.3vw, 3.7rem); line-height: 1.04; margin: 0; }
/* The headline announces, the subline speaks. */
.intro h1 .quiet { display: block; margin-top: .3em; font: 400 .6em/1.25 var(--font-body); letter-spacing: -.01em; color: var(--color-text-sub); }
.intro .lead { margin: 24px 0 0; font-size: 1.1rem; max-width: 52ch; }
.intro .lead a { white-space: nowrap; }

/* The spine: a rust connector with a node on each step's heading. An outlined
   node is pending, a filled one is done or open. Until consent the connector is
   dashed (pending); consent draws it solid down to the tasks. */
.steps {
  --node: 25px;
  --indent: 64px;
  --h2: 1.4rem;
  --gap: clamp(48px, 7vh, 80px);
  list-style: none;
  margin: 0;
  padding: 0 0 clamp(64px, 10vh, 112px) var(--indent);
  display: grid;
  gap: var(--gap);
}
@media (max-width: 640px) { .steps { --node: 21px; --indent: 44px; --h2: 1.25rem; } }
.step { position: relative; }
.step > h2 { position: relative; z-index: 1; font-size: var(--h2); margin: 0 0 20px; }
.step > h2::before {
  content: ""; position: absolute;
  left: calc(-1 * var(--indent)); top: calc(.575em - var(--node) / 2);
  width: var(--node); height: var(--node); border-radius: 50%;
  border: 3px solid var(--color-accent);
  background: var(--color-primary);
  box-shadow: 0 0 0 6px var(--color-primary);
  transition: background .35s var(--ease) .25s;
}
.step.is-on > h2::before { background: var(--color-accent); }
.step:not(:last-child)::before, .step:not(:last-child)::after {
  content: ""; position: absolute;
  left: calc(-1 * var(--indent) + var(--node) / 2 - 1.5px);
  top: calc(var(--h2) * .575);
  width: 3px; height: calc(100% + var(--gap));
}
.step:not(:last-child)::before { background: repeating-linear-gradient(var(--color-border-main) 0 6px, transparent 6px 12px); }
.step:not(:last-child)::after {
  background: var(--color-accent-alt);
  transform: scaleY(0); transform-origin: top;
  transition: transform .7s var(--ease);
}
.step.is-on:not(:last-child)::after { transform: scaleY(1); }

.terms { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 10px; max-width: 62ch; color: var(--color-text-sub); }
.terms li { position: relative; padding-left: 22px; }
.terms li::before {
  content: ""; position: absolute; left: 2px; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-dim);
}
.check {
  display: flex; align-items: center; gap: 14px;
  min-height: 60px; padding: 14px 20px; max-width: 62ch;
  background: var(--color-secondary);
  border: 1px solid var(--color-border-main); border-radius: var(--radius);
  font-weight: 600; cursor: pointer;
  transition: border-color .25s var(--ease);
}
.check:hover { border-color: var(--color-text-dim); }
.check:has(input:checked) { border-color: var(--color-accent); }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--color-accent); cursor: pointer; }
.code { margin: 14px 0 0; color: var(--color-text-dim); font-size: .88rem; }
.code code { font-size: .95rem; letter-spacing: .04em; color: var(--color-text-sub); }

.locked-note { margin: -8px 0 16px; }
.tasks {
  list-style: none; margin: 0; padding: 0;
  border-top: 1px solid var(--color-border-main);
  transition: opacity .5s var(--ease) .2s;
}
.tasks[inert] { opacity: .4; }
.task {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--color-border-main);
  color: var(--color-text-main); text-decoration: none;
}
.task:hover { color: var(--color-text-main); }
.task b { display: block; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.task span { display: block; margin-top: 4px; max-width: 52ch; color: var(--color-text-sub); font-size: .97rem; }
/* Task icons, drawn in the mark's grammar: sub-text strokes, orange node dots. */
.task-icon {
  display: grid; place-items: center;
  width: 64px; height: 64px; border-radius: var(--radius);
  background: var(--color-secondary); border: 1px solid var(--color-border-main);
  transition: border-color .25s var(--ease);
}
.task-icon svg { width: 40px; height: 40px; overflow: visible; }
.task-icon .ln { fill: color-mix(in srgb, var(--color-accent) 7%, transparent); stroke: var(--color-text-sub); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; }
.task-icon .nd { fill: var(--color-accent); }
.task:hover .task-icon { border-color: var(--color-text-dim); }
@media (max-width: 640px) {
  .task { gap: 16px; }
  .task-icon { width: 52px; height: 52px; }
  .task-icon svg { width: 32px; height: 32px; }
  .task { grid-template-columns: auto minmax(0, 1fr); }
  .task .task-go { display: none; } /* the whole row is the link; the text needs the width */
}
.task-go {
  display: grid; place-items: center;
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--color-border-main);
  transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease), transform .25s var(--ease);
}
.task-go svg { width: 18px; height: 18px; }
.task:hover .task-go, .task:focus-visible .task-go {
  background: var(--color-accent); border-color: var(--color-accent); color: var(--ink-on-accent);
  transform: translateX(3px);
}

/* The lab: its step on the home spine, and where it is (home and lab page). */
.step-text { max-width: 60ch; color: var(--color-text-sub); }
.where { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 24px; max-width: 60ch; font-weight: 600; }
.where svg { flex: none; width: 22px; height: 22px; margin-top: 1px; }
.where .ln { fill: color-mix(in srgb, var(--color-accent) 7%, transparent); stroke: var(--color-text-sub); stroke-width: 1.6; stroke-linejoin: round; }
.where .nd { fill: var(--color-accent); }
.btn svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.btn:hover svg { transform: translateX(3px); }

/* Lab page: the lab build's landing, then the request form (posted to /api/lab). */
.about {
  position: relative;
  overflow: hidden;
  padding: 36px 32px 32px;
  margin-bottom: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border-main);
  background:
    radial-gradient(ellipse 720px 380px at 82% -12%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 68%),
    var(--color-secondary);
}
.about-inner { display: grid; gap: 28px; align-items: center; }
@media (min-width: 900px) {
  .about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; }
}
.about-points { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; max-width: 72ch; color: var(--color-text-sub); }
.about-points li { position: relative; padding-left: 26px; }
.about-points li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 11px; height: 11px; border-radius: 50%; background: var(--color-accent);
}
.lab-h { font-size: clamp(1.75rem, 3.9vw, 2.8rem); line-height: 1.04; margin: 0 0 16px; }
.lab-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.lab-hero li {
  border: 1px solid var(--color-border-main); border-radius: 12px; overflow: hidden; background: var(--color-primary);
  animation: labRise .6s var(--ease) backwards;
}
.lab-hero li:nth-child(even) { position: relative; top: 20px; }
.lab-hero li:nth-child(2) { animation-delay: .08s; }
.lab-hero li:nth-child(3) { animation-delay: .16s; }
.lab-hero li:nth-child(4) { animation-delay: .24s; }
.lab-hero img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
@keyframes labRise { from { opacity: 0; transform: translateY(14px); } }
.lab-section { margin-bottom: 48px; }
.lab-text p { max-width: 72ch; color: var(--color-text-sub); }
.lab-text h3 { margin: 28px 0 10px; font-size: 1.05rem; }
.lab-links { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 6px; }
.lab-mods { margin: 0 0 14px; padding-left: 20px; display: grid; gap: 4px; color: var(--color-text-sub); font-size: .92rem; }
.lab-details { margin-top: 12px; }
.lab-details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.lab-pre { white-space: pre-line; font-size: .85rem; }
.lab-form {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px;
  padding: 20px;
  background: var(--color-secondary); border: 1px solid var(--color-border-main); border-radius: var(--radius);
  text-align: left;
}
.lab-form .note { grid-column: 1 / -1; margin: 0; }
.lab-form label { display: grid; gap: 6px; font-weight: 600; color: var(--color-text-main); }
.lab-wide { grid-column: 1 / -1; }
.lab-when { margin: 8px 0 0; font-size: .9rem; color: var(--color-text-sub); }
.lab-when strong { display: block; color: var(--color-text-main); font-size: 1rem; }
.lab-form input, .lab-form select {
  width: 100%; min-height: 44px; padding: 0 12px;
  background: var(--color-primary); color: var(--color-text-main);
  border: 1px solid var(--color-border-main); border-radius: 10px; font: inherit;
}
.lab-form :is(input, select):focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.lab-form .lab-trap { position: absolute; left: -9999px; width: 1px; height: 1px; }
.lab-status:empty { display: none; }
@media (max-width: 480px) { .lab-form { grid-template-columns: 1fr; } }
.lab-grid-inner { display: grid; grid-template-columns: auto repeat(5, 1fr); gap: 2px; user-select: none; }
.lab-grid-day { font-size: .78rem; font-weight: 600; color: var(--color-text-sub); text-align: center; padding-bottom: 4px; }
.lab-grid-time { font-size: .72rem; color: var(--color-text-sub); display: flex; align-items: center; padding-right: 6px; white-space: nowrap; }
/* 24px: WCAG 2.5.8 minimum target size (axe target-size). */
.lab-cell { height: 24px; padding: 0; border: 1px solid var(--color-border-sub); border-radius: 3px; background: var(--color-tertiary); cursor: pointer; touch-action: none; }
.lab-cell.selected { background: var(--color-accent); border-color: var(--color-accent); }
.lab-cell:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 1px; }
.lab-admin { max-width: 900px; margin: 40px auto; padding: 0 var(--gutter) 40px; }
.lab-best:not(:empty) { margin: 16px 0; padding: 10px 14px; font-weight: 600; color: var(--color-text-main); background: color-mix(in srgb, var(--color-accent) 15%, transparent); border-radius: 8px; }
.lab-heat-cell { height: 20px; padding: 0; border: 1px solid var(--color-border-sub); border-radius: 3px; background: var(--color-tertiary); cursor: pointer; }
.lab-admin-detail { margin-top: 8px; }
.lab-admin-list { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 8px; }
.lab-admin-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--color-border-sub); border-radius: 8px; }

/* Brief task */
.badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; margin-bottom: 14px;
  background: var(--color-tertiary); border-radius: 999px;
  color: var(--color-text-sub); font-size: .8rem;
}
.badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-accent); }
.task-grid { display: grid; gap: 24px; margin-top: 28px; }
@media (min-width: 900px) {
  .task-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); align-items: start; }
  .task-grid form { position: sticky; top: 88px; }
}
.sils, .pics { display: grid; gap: 12px; }
#stills { grid-template-columns: 1fr 1fr; }
figure { margin: 0; }
.sils figure, .pics figure {
  background: var(--color-secondary); border: 1px solid var(--color-border-main); border-radius: var(--radius); overflow: hidden;
}
figure img { display: block; width: 100%; height: auto; }
/* Photo sizes are unknown until they load: reserve a 3:2 box (contain, never crop). */
.pics img { aspect-ratio: 3 / 2; object-fit: contain; }
figcaption { padding: 4px 12px 8px; color: var(--color-text-dim); font-size: .8rem; }
#viewer {
  width: 100%; aspect-ratio: 4 / 3; max-height: 70vh;
  background: var(--color-secondary); border: 1px solid var(--color-border-main); border-radius: var(--radius);
  overflow: hidden; cursor: grab;
}
#viewer canvas { display: block; }
.empty { padding: 20px; border: 1px dashed var(--color-border-main); border-radius: var(--radius); color: var(--color-text-sub); }
label.field { display: block; font-weight: 600; margin-bottom: 8px; }
textarea {
  width: 100%; min-height: 12rem; resize: vertical; padding: 14px;
  background: var(--color-primary); color: var(--color-text-main);
  border: 1px solid var(--color-border-main); border-radius: 12px;
  font: inherit; line-height: 1.55;
}
textarea::placeholder { color: var(--color-text-dim); }
textarea:focus-visible { border-color: var(--color-accent); outline: 2px solid var(--color-accent); outline-offset: 2px; }
.meta { margin-top: 6px; color: var(--color-text-dim); font-size: .8rem; }
.hints { margin-top: 10px; font-size: .9rem; }
.hints p { margin: 0 0 6px; color: var(--color-text-dim); }
.hints ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.hints li { position: relative; padding: 8px 12px 8px 30px; background: var(--color-tertiary); border-radius: 10px; color: var(--color-text-main); }
.hints li::before { content: ""; position: absolute; left: 12px; top: 1.05em; width: 8px; height: 8px; border-radius: 50%; background: var(--color-warning); }
.err { margin: 12px 0 0; color: var(--color-error); }
.done h2 { color: var(--color-success); }

/* Discrimination game */
.game-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.progress { color: var(--color-text-sub); font-size: .9rem; }
.bar { height: 3px; margin: 8px 0 28px; background: var(--color-tertiary); border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--color-accent); transform: scaleX(var(--p, 0)); transform-origin: left; transition: transform .4s var(--ease); }
.brief-text {
  margin: 0 0 8px; padding: 18px 22px; max-height: 15rem; overflow: auto; white-space: pre-wrap;
  background: var(--color-secondary); border: 1px solid var(--color-border-main);
  border-radius: var(--radius); color: var(--color-text-main);
}
.options { display: grid; gap: 16px; margin: 24px 0; }
@media (min-width: 900px) { .options { grid-template-columns: 1fr 1fr; } }
.option {
  display: flex; flex-direction: column; justify-content: flex-start; width: 100%; padding: 12px; text-align: left; cursor: pointer; font: inherit; color: inherit;
  background: var(--color-secondary); border: 1px solid var(--color-border-main); border-radius: var(--radius);
  transition: border-color .25s var(--ease);
}
.option:hover:not(:disabled) { border-color: var(--color-accent); }
.option:disabled { cursor: default; }
.option .letter { display: block; margin-bottom: 8px; font-size: .85rem; color: var(--color-text-sub); }
.option .sils { grid-template-columns: 1fr 1fr; gap: 8px; }
.option .sils figure { background: var(--color-primary); border-color: transparent; border-radius: 8px; }
.option.is-correct { border-color: var(--color-success); outline: 2px solid var(--color-success); outline-offset: 2px; }
.option.is-wrong { border-color: var(--color-error); }
.verdict { font-weight: 600; min-height: 1.6em; margin: 0 0 12px; }
.verdict.ok { color: var(--color-success); }
.verdict.no { color: var(--color-error); }
.comment { margin: 0 0 12px; }
.comment textarea { min-height: 5rem; }
.score { font: 800 2.1rem/1.1 var(--font-display); font-stretch: 118%; letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 12px 0 20px; }

/* Credits */
.names { columns: 220px; column-gap: 24px; padding: 0; margin: 28px 0 0; list-style: none; color: var(--color-text-sub); }
.names li { break-inside: avoid; padding: 3px 0; }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}