:root {
    --ground: #EEEBE1; --raised: #E6E2D5; --ink: #0E1410; --ink-2: #2B342D; --muted: #5A645B; --line: #D6D0BF;
    --confirmed: #4C6B57; --estimated: #855607; --missing: #A13E2A; --stage: #0A0A0A;
    --sans: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Geist Mono", ui-monospace, Consolas, monospace;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) { --ground: #0A0A0A; --raised: #161616; --ink: #EDEDEA; --ink-2: #C9C9C4; --muted: #9A9A95; --line: #222222;
      --confirmed: #7C9A86; --estimated: #E0A43A; --missing: #E8735F; --stage: #050505; color-scheme: dark; }
  }
  :root[data-theme="dark"] { --ground: #0A0A0A; --raised: #161616; --ink: #EDEDEA; --ink-2: #C9C9C4; --muted: #9A9A95; --line: #222222;
    --confirmed: #7C9A86; --estimated: #E0A43A; --missing: #E8735F; --stage: #050505; color-scheme: dark; }
  html, body { background: var(--ground); color: var(--ink); }
  body { font-family: var(--sans); font-size: 15px; line-height: 1.6; padding-inline: clamp(16px, 4vw, 40px); padding-block: 0 80px; -webkit-font-smoothing: antialiased; }
  .wrap { max-width: 1180px; margin: 0 auto; }
  header { padding-block: 44px 36px; display: grid; gap: 14px; max-width: 760px; }
  .lock { display: flex; align-items: center; gap: 9px; }
  .lock .word { font-family: "Young Serif", Georgia, serif; font-size: 19px; }
  .lock .data { font-family: var(--mono); font-size: 9px; letter-spacing: .38em; color: var(--confirmed); }
  .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
  h1 { font-weight: 500; font-size: clamp(28px, 3.6vw, 42px); line-height: 1.08; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
  .lede { color: var(--muted); font-size: 16px; margin: 0; max-width: 64ch; }
  .rules { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 4px 0 0; padding: 0; }
  .rules li { font-family: var(--mono); font-size: 11px; color: var(--ink-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 11px; }
  .note { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; }
  .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 32px; }
  @media (max-width: 880px) { .grid { grid-template-columns: 1fr; } }
  .form { display: grid; gap: 14px; align-content: start; min-width: 0; }
  .stage { position: relative; background: var(--stage); border-radius: 16px; overflow: hidden; }
  .stage canvas { display: block; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; touch-action: pan-y; cursor: grab; }
  .stage canvas:active { cursor: grabbing; }
  .stage .hint { position: absolute; left: 14px; bottom: 12px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; color: #8A8A85; pointer-events: none; }
  .stage button { position: absolute; right: 12px; bottom: 10px; font-family: var(--mono); font-size: 11px; color: #EDEDEA; background: rgba(255,255,255,.06); border: 1px solid #2A2A2A; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
  .stage button:hover { background: rgba(255,255,255,.12); }
  .stage button:focus-visible { outline: 2px solid #7C9A86; outline-offset: 2px; }
  .stage .nogl { position: absolute; inset: 0; display: grid; place-items: center; color: #9A9A95; font-family: var(--mono); font-size: 12px; padding: 20px; text-align: center; }
  .head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
  h2 { font-weight: 500; font-size: 18px; letter-spacing: -.015em; margin: 0; }
  .chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; }
  .chip svg { width: 13px; height: 13px; }
  .chip.c { color: var(--confirmed); } .chip.e { color: var(--estimated); } .chip.m { color: var(--missing); }
  .chip svg path { fill: currentColor; }
  .shows { margin: 0; color: var(--ink-2); max-width: 62ch; }
  dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); margin: 0; border-top: 1px solid var(--line); }
  dt, dd { margin: 0; padding-block: 7px; border-bottom: 1px solid var(--line); }
  dt { font-family: var(--mono); font-size: 11px; color: var(--muted); padding-right: 18px; }
  dd { font-size: 13.5px; color: var(--ink-2); min-width: 0; }
  .src { font-family: var(--mono); font-size: 11px; color: var(--muted); margin: 0; }
  footer { margin-top: 64px; border-top: 1px solid var(--line); padding-top: 18px; }