/* play.zaiphr.ai, on the vendored tokens: css/tokens.css (core) and
   css/tokens-play.css (the play block). Doctrine: zaiphr-brand
   components/play-surface.md. The frame is Zaiphr (ink, slate, paper, Jost,
   hairlines, flame only for "this one, now"); the game object may be colourful.
   No glow, no gradients, no glass, no Field. Motion is transform and opacity.

   Two scales live here. Host UI is CSS px. Everything inside .stage is in
   STAGE px on a fixed stage (wide 1920x1080, square 1080x1080, tall
   1080x1560) that wheel.js zooms to fit, so P6 §4's projector sizes hold. */

@font-face { font-family: 'Jost'; font-weight: 400; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 500; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-Medium.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 600; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-SemiBold.woff2) format('woff2'); }
@font-face { font-family: 'Jost'; font-weight: 700; font-style: normal; font-display: swap; src: url(/css/fonts/Jost-Bold.woff2) format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url(/css/fonts/JetBrainsMono-latin.woff2) format('woff2'); }

@layer reset, base, layout, components, stage, utilities;

/* Depth (play-surface §6): --z-play-shadow-raised on stage panels and the
   reveal card only, never animated; a single inset top hairline on Dark raised
   surfaces only. Controls get press feedback, never a shadow. */
:root { --play-edge-top: inset 0 1px 0 var(--z-border-strong); --topbar-h: 61px; }
/* Jost, heavier on the stage (Matt, 2026-10-17): wheel names 600, the Spin cap 700 */
:root { --w-label: 600; --w-display: 700; --track-display: -0.015em; }

/* the in-app Reduce motion switch sets what play.css collapses for the OS setting */
.reduce-motion, .reduce-motion [data-theme] {
  --z-play-dur-spin: 0.001ms; --z-play-dur-celebrate: 0.001ms;
  --z-dur-micro: 0.001ms; --z-dur-std: 0.001ms; --z-dur-enter: 0.001ms;
}

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ol, ul, figure, fieldset { margin: 0; }
  ol, ul[role='list'] { padding: 0; list-style: none; }
  fieldset { border: 0; padding: 0; min-width: 0; }
  svg, img { display: block; }
  button, input, textarea { font: inherit; color: inherit; }
}

@layer base {
  html { background: var(--z-night); }
  body {
    background: var(--z-night); color: var(--z-fg);
    font-family: var(--z-font-ui); font-size: 15px; line-height: 1.5;
    min-height: 100vh; display: flex; flex-direction: column;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, .kicker, .btn, .tab, .tool, .brand-tag { font-family: var(--z-font-display); }
  a { color: var(--z-accent-text); text-underline-offset: 0.18em; }
  :focus-visible { outline: 2px solid var(--z-accent-text); outline-offset: 3px; }
  ::selection { background: var(--z-accent-soft); }
  * { scrollbar-width: thin; scrollbar-color: var(--z-border-control) transparent; }
}

@layer layout {
  /* top bar: the Zaiphr logo, a Play tag, the page title and its actions */
  .topbar {
    position: sticky; top: 0; z-index: 40; min-height: 60px;
    display: flex; align-items: center; gap: 14px; padding: 10px 20px;
    background: var(--z-night); border-bottom: 1px solid var(--z-border);
  }
  .topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
  .credit-link { margin-left: auto; }
  .topbar-actions ~ .credit-link { margin-left: 6px; }

  .app { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 14px; padding: 14px; height: calc(100dvh - var(--topbar-h)); min-height: 540px; }
  /* the panel itself is hidden by wheel.js (the hidden attribute), only on wide screens */
  @media (min-width: 900px) { .app[data-panel='closed'] { grid-template-columns: minmax(0, 1fr); } }
  .stage-area { position: relative; min-width: 0; min-height: 0; }

  .site-foot { width: 100%; max-width: 1240px; margin: 0 auto; padding: 28px 24px 36px; color: var(--z-fg-muted); font-size: 13px; display: grid; gap: 6px; border-top: 1px solid var(--z-border); }
  .app-body .site-foot { max-width: none; padding-inline: 20px; }
  .home, .prose { width: 100%; max-width: 1240px; margin: 0 auto; padding: 56px 24px 72px; flex: 1; }
  .prose { max-width: 760px; }

  @media (max-width: 899px) {
    .app { display: block; height: auto; min-height: 0; padding: 12px; }
    .panel { margin-top: 12px; }
  }
  @media (max-width: 760px) {
    .topbar { flex-wrap: wrap; padding: 10px 14px; gap: 10px; position: static; }
    .topbar-title::before { display: none; }
    .topbar-actions { order: 3; width: 100%; margin-left: 0; }
    .topbar-actions .segmented { margin-left: auto; }
    .credit-link { display: none; }
    .home, .prose { padding: 36px 16px 56px; }
  }
}

@layer components {
  .skip-link { position: absolute; left: 16px; top: -100px; background: var(--z-surface-1); color: var(--z-fg); padding: 10px 14px; border-radius: var(--z-radius-sm); z-index: 200; }
  .skip-link:focus { top: 12px; }

  /* lockup */
  .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; border-radius: 8px; }
  .brand-logo { height: 24px; width: auto; }
  .brand-tag { font-size: 11px; font-weight: 600; line-height: 1; letter-spacing: var(--z-track-label); text-transform: uppercase; color: var(--z-fg); padding: 5px 7px 4px; border: 1px solid var(--z-border-strong); border-radius: 6px; transition: border-color var(--z-dur-std) ease; }
  .brand:hover .brand-tag { border-color: var(--z-fg-muted); }
  .topbar-title { display: flex; align-items: center; gap: 14px; min-width: 0; }
  .topbar-title::before { content: ''; width: 1px; height: 22px; background: var(--z-border-strong); }
  .topbar-title h1 { font-size: 15px; font-weight: 500; color: var(--z-fg-muted); white-space: nowrap; }
  .credit-link { display: inline-flex; align-items: center; gap: 4px; color: var(--z-fg-muted); font-size: 13px; text-decoration: none; white-space: nowrap; padding: 6px 8px; border-radius: 8px; transition: color var(--z-dur-micro) ease, background-color var(--z-dur-micro) ease; }
  .credit-link:hover { color: var(--z-fg); background: var(--z-surface-1); }
  @media (max-width: 1180px) { .app-body .credit-link { display: none; } }
  .foot-brand { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .foot-brand img { width: 20px; height: auto; }
  .site-foot a { color: var(--z-fg-muted); }
  .site-foot a:hover { color: var(--z-fg); }

  .icon { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .icon-sm { width: 15px; height: 15px; }
  .icon-lg { width: 30px; height: 30px; stroke-width: 1.3; }

  /* buttons: press feedback, never a shadow (§6) */
  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 38px; padding: 0 14px; border-radius: var(--z-radius-md);
    border: 1px solid var(--z-border-control); background: transparent; color: var(--z-fg);
    font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none; text-decoration: none;
    transition: background-color var(--z-dur-micro) ease, border-color var(--z-dur-micro) ease, color var(--z-dur-micro) ease, transform var(--z-dur-micro) ease;
  }
  .btn:hover { background: var(--z-surface-1); }
  .btn:active:not(:disabled):not([aria-disabled='true']) { transform: scale(0.97); }
  .btn:disabled, .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; }
  .btn-quiet { border-color: var(--z-border-strong); }
  .btn-sm { height: 32px; padding: 0 12px; font-size: 13px; }
  .btn-lg { height: 50px; padding: 0 22px; font-size: 16px; border-radius: 12px; }
  .btn[aria-pressed='true'] { background: var(--z-surface-2); border-color: var(--z-fg-muted); }
  .btn-primary { background: var(--z-accent); border-color: transparent; color: var(--z-on-accent); font-weight: 600; }
  .btn-primary:hover, .btn-primary:active { background: var(--z-accent-deep); }
  .btn-primary .icon { transition: transform var(--z-dur-std) var(--z-spring); }
  .btn-primary:hover .icon { transform: translateX(3px); }
  .icon-btn { display: grid; place-items: center; width: 38px; height: 38px; border-radius: var(--z-radius-md); border: 1px solid var(--z-border-strong); background: transparent; color: var(--z-fg-muted); cursor: pointer; transition: background-color var(--z-dur-micro) ease, color var(--z-dur-micro) ease, transform var(--z-dur-micro) ease; }
  .icon-btn:hover { background: var(--z-surface-1); color: var(--z-fg); }
  .icon-btn:active { transform: scale(0.94); }
  .icon-btn[aria-expanded='true'] { color: var(--z-fg); background: var(--z-surface-1); }
  @media (max-width: 899px) { #panel-toggle { display: none; } } /* phones: the panel sits below the wheel */
  /* narrow: the label stays in the accessible name, only the icon shows */
  @media (max-width: 1000px) { #projector span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } #projector { width: 38px; padding: 0; } }

  /* segmented control: two radios and a sliding thumb */
  .segmented { position: relative; display: grid; grid-template-columns: 1fr 1fr; padding: 3px; border-radius: var(--z-radius-md); background: var(--z-ground); border: 1px solid var(--z-border-strong); }
  .segmented input { position: absolute; opacity: 0; width: 1px; height: 1px; }
  .segmented label { position: relative; z-index: 1; grid-row: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 5px 12px; font-family: var(--z-font-display); font-size: 13px; font-weight: 500; color: var(--z-fg-muted); cursor: pointer; border-radius: 7px; transition: color var(--z-dur-micro) ease; }
  .segmented label:hover { color: var(--z-fg); }
  .segmented input:checked + label { color: var(--z-fg); }
  .segmented input:focus-visible + label { outline: 2px solid var(--z-accent-text); outline-offset: 1px; }
  .segmented-thumb { position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc(50% - 3px); border-radius: 7px; background: var(--z-surface-2); border: 1px solid var(--z-border-strong); transition: transform var(--z-dur-std) var(--z-spring); }
  #theme-dark:checked ~ .segmented-thumb { transform: translateX(100%); }

  /* the side panel: tabs over three panes */
  .panel { display: flex; flex-direction: column; min-height: 0; background: var(--z-ground); border: 1px solid var(--z-border); border-radius: 20px; box-shadow: var(--play-edge-top); overflow: hidden; }
  .tabs { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 6px; border-bottom: 1px solid var(--z-border); }
  .tab { position: relative; z-index: 1; height: 36px; border: 0; border-radius: 10px; background: none; color: var(--z-fg-muted); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; transition: color var(--z-dur-micro) ease; }
  .tab:hover, .tab[aria-selected='true'] { color: var(--z-fg); }
  .tab:focus-visible { outline-offset: -2px; }
  .tabs-ink { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 16px) / 3); border-radius: 10px; background: var(--z-surface-2); border: 1px solid var(--z-border-strong); transform: translateX(calc(var(--tab-i, 0) * (100% + 2px))); transition: transform var(--z-dur-std) var(--z-spring); }
  .pane { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 16px; display: flex; flex-direction: column; }
  .pane:not([hidden]) { animation: pane-in var(--z-dur-std) var(--z-ease); }
  @keyframes pane-in { from { opacity: 0; transform: translateY(4px); } }
  .pane-lede { color: var(--z-fg-muted); font-size: 13px; margin-bottom: 4px; }
  .count { font-size: 11.5px; font-weight: 500; font-variant-numeric: tabular-nums; line-height: 1; color: var(--z-fg-muted); background: var(--z-night); border: 1px solid var(--z-border-strong); border-radius: var(--z-radius-pill); padding: 3px 7px; transition: color var(--z-dur-micro) ease; }
  .tab[aria-selected='true'] .count { color: var(--z-fg); }

  .field-label { display: block; margin: 14px 0 6px; font-size: 13px; color: var(--z-fg-muted); }
  .pane > .field-label:first-of-type { margin-top: 2px; }
  .pane > .restore:not([hidden]) + .field-label { margin-top: 14px; }
  .opt { color: var(--z-fg-subtle); font-size: 12px; margin-left: 4px; }
  .input { width: 100%; padding: 9px 12px; border-radius: var(--z-radius-md); background: var(--z-night); border: 1px solid var(--z-border-control); color: var(--z-fg); transition: border-color var(--z-dur-micro) ease, background-color var(--z-dur-micro) ease; }
  .input::placeholder { color: var(--z-fg-subtle); }
  .input:hover { border-color: var(--z-fg-subtle); }
  .input:focus-visible { border-color: var(--z-accent-text); outline-offset: 1px; }
  .input[readonly] { opacity: 0.6; }
  .entries { flex: 1; min-height: 180px; resize: none; line-height: 1.6; display: block; }
  .input-num { width: 84px; text-align: center; font-variant-numeric: tabular-nums; }
  .file-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
  .file-input:focus-visible + label { outline: 2px solid var(--z-accent-text); outline-offset: 2px; }
  .hint { color: var(--z-fg-muted); font-size: 12.5px; margin-top: 8px; }
  .hint:empty { display: none; }
  .hint-warn { color: var(--z-warning-text); }

  .toolrow { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
  .tool { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 9px 4px 8px; border-radius: 10px; border: 1px solid var(--z-border); background: transparent; color: var(--z-fg-muted); font-size: 12px; font-weight: 500; cursor: pointer; transition: color var(--z-dur-micro) ease, background-color var(--z-dur-micro) ease, border-color var(--z-dur-micro) ease, transform var(--z-dur-std) var(--z-spring); }
  .tool:hover:not(:disabled) { color: var(--z-fg); background: var(--z-surface-1); border-color: var(--z-border-strong); transform: translateY(-1px); }
  .tool:active:not(:disabled) { transform: scale(0.96); }
  .tool:disabled { opacity: 0.4; cursor: not-allowed; }

  .restore { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 10px 9px 12px; margin-bottom: 2px; border-radius: 12px; background: var(--z-surface-1); border: 1px solid var(--z-border-strong); font-size: 13px; animation: pane-in var(--z-dur-enter) var(--z-ease); }
  .note-card { margin-top: auto; padding: 12px 14px; border-radius: 12px; background: var(--z-night); border: 1px solid var(--z-border); font-size: 12.5px; color: var(--z-fg-muted); }
  .note-card strong { color: var(--z-fg); font-weight: 500; }
  .field-inline { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 6px 0 18px; padding-top: 12px; border-top: 1px solid var(--z-border); }
  .field-inline .field-label { margin: 0; }
  .field-inline .opt { display: block; margin: 0; }

  /* switch: a checkbox with role=switch; the real input covers the row */
  .switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 11px 0; font-size: 14px; cursor: pointer; }
  .switch + .switch { border-top: 1px solid var(--z-border); }
  .switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
  .switch-track { position: relative; flex: none; width: 38px; height: 22px; border-radius: var(--z-radius-pill); background: var(--z-surface-2); border: 1px solid var(--z-border-control); transition: background-color var(--z-dur-std) ease, border-color var(--z-dur-std) ease; }
  .switch-track::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--z-fg-muted); transition: transform var(--z-dur-std) var(--z-spring), background-color var(--z-dur-std) ease; }
  .switch:hover .switch-track { border-color: var(--z-fg-subtle); }
  .switch input:checked + .switch-track { background: var(--z-fg); border-color: var(--z-fg); }
  .switch input:checked + .switch-track::after { transform: translateX(16px); background: var(--z-night); }
  .switch input:focus-visible + .switch-track { outline: 2px solid var(--z-accent-text); outline-offset: 3px; }
  .switch .opt { display: block; margin: 1px 0 0; }

  /* draw record: FACT -> SOURCE for a door prize */
  .record { display: grid; }
  .record li { display: grid; grid-template-columns: 30px 1fr; gap: 1px 8px; padding: 10px 8px; margin: 0 -8px; border-radius: 10px; transition: background-color var(--z-dur-micro) ease; }
  .record li + li { box-shadow: 0 -1px 0 var(--z-border); }
  .record li:hover { background: var(--z-surface-1); }
  .record .n { grid-row: span 2; font-size: 12px; color: var(--z-fg-subtle); font-variant-numeric: tabular-nums; padding-top: 2px; }
  .record .who { font-weight: 500; overflow-wrap: anywhere; }
  .record .meta { font-size: 12px; color: var(--z-fg-muted); }
  .record time { font-family: var(--z-font-mono); font-size: 11.5px; }
  .record li.is-new { animation: record-in var(--z-dur-enter) var(--z-spring); }
  @keyframes record-in { from { opacity: 0; transform: translateY(-6px); } }
  .pane-foot { margin-top: auto; display: flex; gap: 8px; padding-top: 14px; }
  .record:not(:empty) ~ .pane-foot { border-top: 1px solid var(--z-border); }
  .empty { display: grid; justify-items: center; gap: 10px; text-align: center; color: var(--z-fg-muted); font-size: 13px; padding: 28px 12px; margin: auto 0; }
  .empty .icon { color: var(--z-fg-subtle); }

  /* the fair-draw chip on the stage (page view only) */
  .fair { position: absolute; top: 14px; right: 14px; z-index: 6; font-size: 12.5px; }
  .fair summary { list-style: none; display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px 6px 9px; border-radius: var(--z-radius-pill); background: var(--z-surface-1); border: 1px solid var(--z-border-strong); color: var(--z-fg-muted); font-family: var(--z-font-display); font-weight: 500; cursor: pointer; user-select: none; transition: color var(--z-dur-micro) ease, border-color var(--z-dur-micro) ease; }
  .fair summary::-webkit-details-marker { display: none; }
  .fair summary:hover, .fair[open] summary { color: var(--z-fg); border-color: var(--z-border-control); }
  .fair-pop { position: absolute; right: 0; top: calc(100% + 8px); width: min(300px, 80vw); padding: 14px 16px; border-radius: 14px; background: var(--z-surface-1); border: 1px solid var(--z-border-control); color: var(--z-fg-muted); font-size: 13px; line-height: 1.5; display: grid; gap: 8px; animation: pop-in var(--z-dur-std) var(--z-spring); transform-origin: top right; }
  .fair-pop strong { color: var(--z-fg); font-weight: 600; }
  @keyframes pop-in { from { opacity: 0; transform: scale(0.96) translateY(-4px); } }

  /* home */
  .hero { display: grid; gap: 48px; align-items: center; }
  @media (min-width: 960px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 56px; } }
  .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; text-transform: uppercase; letter-spacing: var(--z-track-label); color: var(--z-fg-muted); }
  .kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--z-accent); }
  .home h1 { margin-top: 16px; font-size: clamp(38px, 5.4vw, 64px); font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; max-width: 13ch; }
  .lede { margin-top: 18px; color: var(--z-fg-muted); font-size: 18px; max-width: 52ch; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
  .facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 28px; }
  .facts li { display: inline-flex; align-items: center; gap: 8px; color: var(--z-fg-muted); font-size: 14px; }
  .facts .icon { color: var(--z-fg); }

  .hero-stage { position: relative; display: block; aspect-ratio: 16 / 11; border-radius: 24px; overflow: hidden; background: var(--z-paper); border: 1px solid var(--z-border-strong); box-shadow: var(--z-play-shadow-raised); color: var(--z-fg); text-decoration: none; }
  .hero-wheel { position: absolute; left: 5%; top: 50%; width: 58%; translate: 0 -50%; overflow: visible; }
  .hero-rotor { transform-box: fill-box; transform-origin: center; transition: transform 1100ms var(--z-spring); animation: hero-spin calc(var(--z-dur-enter) * 3.5) var(--z-ease) both; }
  @keyframes hero-spin { from { transform: rotate(-150deg); } }
  .hero-stage:hover .hero-rotor, .hero-stage:focus-visible .hero-rotor { transform: rotate(67.5deg); }
  .hero-wheel path[class^='c'] { stroke: var(--z-paper); stroke-width: 0.5; }
  .hero-wheel .c1 { fill: var(--z-play-cat-1); } .hero-wheel .c2 { fill: var(--z-play-cat-2); }
  .hero-wheel .c3 { fill: var(--z-play-cat-3); } .hero-wheel .c4 { fill: var(--z-play-cat-4); }
  .hero-wheel .c5 { fill: var(--z-play-cat-5); } .hero-wheel .c6 { fill: var(--z-play-cat-6); }
  .hero-wheel .c7 { fill: var(--z-play-cat-7); } .hero-wheel .c8 { fill: var(--z-play-cat-8); }
  .hero-wheel .rim { fill: none; stroke: var(--z-ink); stroke-width: 0.8; }
  .hero-wheel .hero-hub { fill: var(--z-accent); stroke: var(--z-ink); stroke-width: 0.9; }
  .hero-wheel .hub-text { font-family: var(--z-font-display); font-weight: 600; font-size: 5.6px; fill: var(--z-on-accent); }
  .hero-wheel .pin { fill: var(--z-accent-deep); stroke: var(--z-ink); stroke-width: 0.6; stroke-linejoin: round; }
  .hero-card { position: absolute; right: 5%; bottom: 13%; width: 40%; padding: 4.2% 4.4%; border-radius: 16px; background: var(--z-surface-1); border: 1.5px solid var(--z-border-strong); box-shadow: var(--z-play-shadow-raised), var(--play-edge-top); display: grid; gap: 2px; transition: transform var(--z-dur-enter) var(--z-spring); }
  .hero-stage:hover .hero-card { transform: translateY(-4px); }
  .hero-rail { width: 36px; height: 4px; border-radius: 2px; background: var(--z-accent); margin-bottom: 8px; }
  .hero-kicker { font-family: var(--z-font-display); font-size: clamp(9px, 1vw, 12px); font-weight: 600; letter-spacing: var(--z-track-label); text-transform: uppercase; color: var(--z-accent-text); }
  .hero-name { font-family: var(--z-font-display); font-size: clamp(17px, 2.3vw, 30px); font-weight: 600; line-height: 1.1; color: var(--z-fg); margin: 4px 0; }
  .hero-note { font-family: var(--z-font-display); font-size: clamp(10px, 1.1vw, 13.5px); color: var(--z-fg-muted); }
  .hero-credit { position: absolute; right: 5%; bottom: 4.5%; display: inline-flex; align-items: center; gap: 6px; font-family: var(--z-font-display); font-size: 12px; color: var(--z-fg-muted); }
  .hero-credit img { width: 12px; height: auto; }

  .how { margin-top: 72px; }
  .steps { display: grid; gap: 14px; }
  @media (min-width: 800px) { .steps { grid-template-columns: repeat(3, 1fr); } }
  .step { padding: 22px 22px 24px; border-radius: 18px; background: var(--z-ground); border: 1px solid var(--z-border); box-shadow: var(--play-edge-top); transition: border-color var(--z-dur-std) ease, transform var(--z-dur-std) var(--z-ease); }
  .step:hover { border-color: var(--z-border-strong); transform: translateY(-2px); }
  .step-n { font-family: var(--z-font-display); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--z-accent-text); font-variant-numeric: tabular-nums; }
  .step h3 { margin-top: 12px; font-size: 18px; font-weight: 600; }
  .step p { margin-top: 6px; color: var(--z-fg-muted); font-size: 14.5px; }

  /* prose (privacy) */
  .prose h1 { margin-top: 12px; font-size: clamp(30px, 4vw, 42px); font-weight: 600; line-height: 1.1; }
  .prose h2 { font-size: 20px; font-weight: 600; margin-top: 32px; }
  .prose p { color: var(--z-fg-muted); margin-top: 10px; max-width: 68ch; }
}

@layer stage {
  /* the frame: a paper or night stage panel; the stage is centred and zoomed in it */
  .stage-frame { --stage-ground: var(--z-paper); position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border-radius: 20px; background: var(--stage-ground); border: 1px solid var(--z-border-strong); box-shadow: var(--z-play-shadow-raised); transition: background-color var(--z-dur-std) ease; }
  .stage-frame[data-theme='dark'] { --stage-ground: var(--z-night); }
  @media (max-width: 899px) { .stage-frame { position: relative; inset: auto; } }
  .js .stage-frame:not(.is-ready) .stage { visibility: hidden; }

  .stage {
    position: relative; overflow: visible; zoom: var(--stage-zoom, 0.4); /* the frame clips, so slips can reach its edges */
    width: 1920px; height: 1080px; padding: 72px;
    display: grid; grid-template-columns: 880px 1fr; grid-template-rows: 56px 880px; column-gap: 64px;
    grid-template-areas: 'title title' 'wheel side';
    color: var(--z-fg); font-family: var(--z-font-display);
  }
  .stage[data-shape='square'] { width: 1080px; height: 1080px; padding: 64px 100px; grid-template-columns: 880px; grid-template-rows: 56px 880px; grid-template-areas: 'title' 'wheel'; }
  .stage[data-shape='tall'] { width: 1080px; height: 1560px; padding: 64px 100px; grid-template-columns: 880px; grid-template-rows: 56px 880px 32px 1fr 40px; grid-template-areas: 'title' 'wheel' '.' 'side' 'credit'; }
  .stage-title { grid-area: title; margin: 0; font-size: var(--z-play-fs-meta); font-weight: 500; line-height: 56px; color: var(--z-fg-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  .stage-wheel { grid-area: wheel; position: relative; width: 880px; height: 880px; }
  .is-ready .stage-wheel { animation: wheel-in calc(var(--z-dur-enter) * 2.2) var(--z-spring) backwards; }
  .stage-wheel { transition: transform var(--z-dur-enter) var(--z-ease); transform-origin: 50% 0; }
  /* square: while the card is docked, the wheel lifts and scales so the card sits under the bezel */
  .stage[data-shape='square'].is-revealing .stage-wheel { transform: scale(0.68); } /* from its top edge: clears the card, keeps the title */
  @keyframes wheel-in { from { opacity: 0; transform: rotate(-28deg) scale(0.92); } }
  .wheel-rotor { position: absolute; inset: 0; will-change: transform; }
  .has-names .wheel-rotor { cursor: pointer; }
  #wheel { width: 100%; height: 100%; overflow: visible; }
  .wheel-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  /* the wheel as an object (Matt, 2026-10-17: "not flat"; overrides P6's no-shading and
     no-wheel-shadow rules). Plates carry volume from their own colour; light is a fixed
     layer above the rotor, so it stays put while the wheel turns. */
  .wheel-shadow { position: absolute; inset: 16px; border-radius: 50%; box-shadow: 0 36px 70px -24px color-mix(in oklab, var(--z-ink) 55%, transparent), 0 12px 24px -10px color-mix(in oklab, var(--z-ink) 35%, transparent); }
  .stage-frame[data-theme='dark'] .wheel-shadow { box-shadow: 0 40px 80px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(255, 255, 255, 0.04); }
  .wheel-light { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  /* names on their own composited layer: fading them while the wheel is fast costs no repaint */
  .label-rotor { pointer-events: none; }
  .label-layer { position: absolute; inset: 0; pointer-events: none; will-change: opacity; }
  #wheel-labels { width: 100%; height: 100%; overflow: visible; }
  .slice .seg { transition: fill var(--z-dur-enter) ease; }
  .grooves { transition: opacity var(--z-dur-enter) ease; }
  /* after a draw the other plates fade toward a light neutral, so their ink names keep
     9:1 in both themes (contrast, hard; tested): paper on Light, fg-muted on Dark */
  .stage-frame { --dim-to: var(--z-paper); }
  .stage-frame[data-theme='dark'] { --dim-to: var(--z-fg-muted); }
  .is-reveal .slice:not(.is-win) .seg { fill: color-mix(in oklab, var(--plate) 50%, var(--dim-to)); }
  .is-reveal .grooves { opacity: 0.45; }
  .slice.is-win .seg { stroke: rgba(255, 255, 255, 0.95); stroke-width: 5; paint-order: stroke; }
  .seg { stroke: none; }
  .seg-label { font-family: var(--z-font-display); font-weight: var(--w-label, 600); fill: var(--z-play-on-cat); }
  /* the dark channel separates equal-luminance plates at 3:1+ (WCAG 1.4.11, hard; tested) */
  .groove-d { fill: none; stroke: color-mix(in oklab, var(--z-ink) 62%, transparent); stroke-width: 5; stroke-linecap: round; }
  .groove-l { fill: none; stroke: rgba(255, 255, 255, 0.78); stroke-width: 1.5; stroke-linecap: round; }
  .ghost-a { fill: var(--z-surface-1); }
  .ghost-b { fill: var(--z-surface-2); }
  .stage-frame[data-theme='dark'] .ghost-b { fill: var(--z-ground); }
  .bezel { fill: none; stroke: var(--z-ink); stroke-width: 28; }
  .stage-frame[data-theme='dark'] .bezel { stroke: var(--z-surface-2); }
  .stud { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1; }
  .stud-lo { stop-color: var(--z-fg-subtle); }
  .bezel-light { fill: none; stroke: url(#lt-bezel); stroke-width: 28; }
  .bezel-lip { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 1.5; }
  .bezel-edge { fill: none; stroke: rgba(0, 0, 0, 0.35); stroke-width: 1.5; }
  .stage-frame[data-theme='dark'] .bezel-edge { stroke: var(--z-border-strong); }
  .collar { fill: url(#lt-collar); }
  .collar-edge { fill: none; stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
  .collar-hi { stop-color: color-mix(in oklab, var(--z-ink) 70%, white); }
  .collar-lo { stop-color: var(--z-ink); }

  /* the Spin cap: the one flame button on the stage, ink text (D13), sculpted, never glowing */
  .hub {
    position: absolute; left: 50%; top: 50%; width: 140px; height: 140px; margin: -70px 0 0 -70px; z-index: 2;
    border-radius: 50%; border: 0; color: var(--z-on-accent);
    background: radial-gradient(circle at 38% 30%, color-mix(in oklab, var(--z-accent) 58%, white) 0, var(--z-accent) 44%, var(--z-accent-deep) 100%);
    box-shadow: inset 0 -7px 14px color-mix(in oklab, var(--z-ink) 30%, transparent), inset 0 5px 8px rgba(255, 255, 255, 0.4), 0 8px 16px -6px rgba(0, 0, 0, 0.55);
    font-family: var(--z-font-display); font-size: var(--z-play-fs-meta); font-weight: var(--w-display, 700); letter-spacing: var(--track-display, -0.01em); cursor: pointer;
    transition: transform var(--z-dur-std) var(--z-spring), filter var(--z-dur-micro) ease;
  }
  .hub:hover:not(:disabled) { transform: scale(1.05); filter: brightness(1.05); }
  .hub:active:not(:disabled):not([aria-disabled='true']) { transform: scale(0.94); box-shadow: inset 0 6px 12px color-mix(in oklab, var(--z-ink) 35%, transparent), 0 2px 6px -2px rgba(0, 0, 0, 0.5); }
  .hub[aria-disabled='true'] { cursor: progress; transform: scale(0.96); }
  .hub:disabled { background: var(--z-surface-2); color: var(--z-fg-subtle); box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.25); cursor: default; }
  .hub:focus-visible { outline: 6px solid var(--z-accent-text); outline-offset: 8px; }

  /* signal graphics: a sculpted flame pointer on an ink pivot, and the winner arc (P6 §2) */
  .wheel-pointer { fill: url(#ptr-fill); stroke: var(--z-ink); stroke-width: 3; stroke-linejoin: round; transform-box: fill-box; transform-origin: 100% 50%; filter: drop-shadow(0 5px 5px color-mix(in oklab, var(--z-ink) 45%, transparent)); }
  .ptr-hi { stop-color: color-mix(in oklab, var(--z-accent) 72%, white); }
  .ptr-lo { stop-color: var(--z-accent-deep); }
  .pointer-pin { fill: var(--z-ink); stroke: rgba(255, 255, 255, 0.55); stroke-width: 2; }
  .winner-arc { fill: none; stroke: var(--z-accent); stroke-width: 10; stroke-linecap: round; opacity: 0; transition: opacity var(--z-dur-enter) ease; }
  .winner-arc.is-on { opacity: 1; }
  .stage-frame[data-theme='light'] .winner-arc { stroke: var(--z-accent-deep); }

  .stage-side { grid-area: side; position: relative; z-index: 3; display: grid; align-content: center; min-width: 0; }
  /* square: the card runs along the bottom, below the Spin hub and clear of the
     winner at 3 o'clock; the slices it covers are the dimmed ones */
  .stage[data-shape='square'] .stage-side { position: absolute; left: 100px; right: 100px; bottom: 40px; }
  .stage[data-shape='square'].has-names .stage-idle { display: none; }
  .stage[data-shape='square'] .stage-idle { padding: 40px 44px; border-radius: 28px; background: var(--z-surface-1); border: 2px solid var(--z-border-strong); }
  .idle-figure { font-size: var(--z-play-fs-figure); font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
  .idle-figure:empty { display: none; }
  .idle-text { margin-top: 18px; font-size: var(--z-play-fs-meta); line-height: 1.25; color: var(--z-fg-muted); max-width: 760px; }
  .idle-figure:empty + .idle-text { margin-top: 0; }
  .idle-hint { margin-top: 36px; font-size: var(--z-play-fs-credit); color: var(--z-fg-muted); }
  .stage:not(.has-names) .idle-hint, .is-projector .idle-hint { display: none; }

  /* the winner card: a Dark island that takes on the winner's plate colour (--win, set per
     draw on .stage-side). Designer's licence (P7): the plate colour leaves the wheel (colour
     meaning), material gradients, and a soft coloured glow behind the card. */
  .reveal-glow { position: absolute; inset: -12% -7%; z-index: 0; pointer-events: none; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in oklab, var(--win, var(--z-accent)) 30%, transparent), transparent); }
  .reveal {
    position: relative; z-index: 1; overflow: hidden; color: var(--z-fg);
    display: grid; grid-template-columns: 128px minmax(0, 1fr); grid-template-areas: 'medal meta' 'name name' 'note note'; column-gap: 36px; align-items: center;
    border: 2px solid transparent; border-radius: 32px; padding: 52px 56px 60px;
    background:
      linear-gradient(180deg, color-mix(in oklab, var(--z-surface-1) 90%, white), var(--z-surface-1) 38%, color-mix(in oklab, var(--z-surface-1) 80%, black)) padding-box,
      linear-gradient(140deg, var(--win, var(--z-accent)), color-mix(in oklab, var(--win, var(--z-accent)) 35%, var(--z-border-strong)) 32%, var(--z-border-strong) 64%) border-box;
    box-shadow: var(--z-play-shadow-raised), var(--play-edge-top);
    transform-origin: 20% 60%;
  }
  .reveal::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; pointer-events: none; background: var(--win, var(--z-accent)); }
  .reveal::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: 0; width: 40%; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.13) 50%, transparent); transform: translateX(-130%) skewX(-14deg); }
  .reveal.is-in::after { animation: sweep calc(var(--z-dur-enter) * 2.8) var(--z-ease) calc(var(--z-dur-enter) * 0.8) both; }
  @keyframes sweep { to { transform: translateX(330%) skewX(-14deg); } }
  .reveal > * { position: relative; z-index: 1; }
  .medal {
    grid-area: medal; width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center;
    font-size: 52px; font-weight: 700; letter-spacing: 0.02em; color: var(--z-play-on-cat);
    background: var(--win, var(--z-accent));
    box-shadow: 0 0 0 3px var(--z-ink), 0 0 0 5px color-mix(in oklab, var(--win, var(--z-accent)) 40%, transparent);
  }
  .reveal-meta { grid-area: meta; display: grid; gap: 14px; min-width: 0; }
  .reveal-kicker { font-size: var(--z-play-fs-meta); font-weight: 600; line-height: 1.1; text-transform: uppercase; letter-spacing: var(--z-track-label); color: var(--z-accent-text); }
  .reveal-stamp { display: flex; align-items: center; gap: 12px; font-size: var(--z-play-fs-credit); line-height: 1; color: var(--z-fg-muted); }
  .reveal-stamp time { font-family: var(--z-font-mono); font-size: 0.9em; }
  .reveal-stamp time::before { content: '·'; font-family: var(--z-font-display); margin-right: 12px; }
  .stamp-icon { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
  .reveal-name { grid-area: name; margin: 36px 0 22px; font-size: var(--z-play-fs-display); font-weight: var(--w-display, 700); line-height: 1.02; letter-spacing: -0.02em; overflow-wrap: anywhere; }
  .reveal-name.is-step { font-size: var(--z-play-fs-figure); }
  .reveal-note { grid-area: note; font-size: var(--z-play-fs-meta); line-height: 1.25; color: var(--z-fg-muted); }
  /* compact (square: along the bottom, below the hub; tall: under the wheel) */
  .stage[data-shape='square'] .reveal, .stage[data-shape='tall'] .reveal { grid-template-columns: 112px minmax(0, 1fr); grid-template-areas: 'medal meta' 'medal name' 'medal note'; column-gap: 32px; padding: 32px 40px 36px; border-radius: 28px; }
  .stage[data-shape='square'] .medal, .stage[data-shape='tall'] .medal { width: 112px; height: 112px; font-size: 46px; }
  .stage[data-shape='square'] .reveal-meta, .stage[data-shape='tall'] .reveal-meta { display: block; }
  .stage[data-shape='square'] .reveal-kicker, .stage[data-shape='tall'] .reveal-kicker { white-space: nowrap; }
  .stage[data-shape='square'] .reveal-stamp, .stage[data-shape='tall'] .reveal-stamp { display: none; } /* the time is in the record */
  .stage[data-shape='square'] .reveal-name, .stage[data-shape='tall'] .reveal-name { margin: 10px 0 8px; font-size: var(--z-play-fs-figure); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .stage[data-shape='square'] .reveal-name.is-step, .stage[data-shape='tall'] .reveal-name.is-step { font-size: var(--z-play-fs-board); }
  .stage[data-shape='square'] .reveal-glow, .stage[data-shape='tall'] .reveal-glow { inset: -18% -4%; }
  .stage-frame[data-theme='dark'] .reveal-glow { display: none; }

  .slips { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
  .slip { position: absolute; left: 0; top: 0; width: 22px; height: 44px; border-radius: 3px; }

  .stage-credit { position: absolute; right: 72px; bottom: 64px; margin: 0; display: flex; align-items: center; gap: 12px; font-size: var(--z-play-fs-credit); line-height: 1; color: var(--z-fg-muted); }
  .stage-credit img { width: 28px; height: auto; }
  /* square: the reveal card owns the bottom, so the credit sits level with the title */
  .stage[data-shape='square'] .stage-credit { right: 100px; bottom: 40px; transition: opacity var(--z-dur-std) ease; }
  .stage[data-shape='square'].is-revealing .stage-credit { opacity: 0; }
  /* projector: the credit is always on (P6 decision 7), so on a 4:3 screen it sits level with the title */
  .is-projector .stage[data-shape='square'] .stage-credit { top: 64px; bottom: auto; height: 56px; opacity: 1; }
  .stage[data-shape='tall'] .stage-credit { position: static; grid-area: credit; justify-self: end; align-self: end; }
  /* wide: under the side column, beside the credit, clear of the wheel (72 + 880 + 64) */
  .stage-hint { position: absolute; left: 1016px; bottom: 64px; margin: 0; font-size: var(--z-play-fs-credit); line-height: 1; color: var(--z-fg-muted); opacity: 0; transition: opacity 600ms ease; }
  .stage[data-shape='square'] .stage-hint { left: 100px; bottom: 40px; }
  .stage[data-shape='tall'] .stage-hint { position: static; grid-area: credit; justify-self: start; align-self: end; }
  .stage-hint.is-shown { opacity: 1; }
  .stage-hint .for-touch { display: none; }
  @media (pointer: coarse) { .stage-hint .for-keys { display: none; } .stage-hint .for-touch { display: inline; } }

  /* projector mode: the stage alone, letterboxed on its own ground */
  .is-projector body { overflow: hidden; }
  .is-projector .stage-frame { position: fixed; inset: 0; z-index: 100; border: 0; border-radius: 0; box-shadow: none; }
  .is-projector .fair { display: none; }
  .stage-frame::backdrop { background: var(--z-night); }
  .stage-exit { display: none; }
  .is-projector .stage-exit {
    display: grid; place-items: center; position: absolute; top: 16px; right: 16px; z-index: 7;
    width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
    background: var(--z-surface-1); color: var(--z-fg); border: 1px solid var(--z-border-strong);
    transition: opacity var(--z-dur-std) ease, transform var(--z-dur-micro) ease;
  }
  .is-projector .stage-exit:hover { transform: scale(1.06); }
  .stage-frame.is-idle, .stage-frame.is-idle .wheel-rotor, .stage-frame.is-idle .hub { cursor: none; }
  .stage-frame.is-idle .stage-exit { opacity: 0; pointer-events: none; }

  /* entrances, once per load */
  .js .panel { animation: rise calc(var(--z-dur-enter) * 1.2) var(--z-ease) 60ms both; }
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } }
}

@layer utilities {
  [hidden] { display: none !important; }
  .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}