/* Typeset — one dark stage, the canvas across it, the words in the empty water. */
@font-face { font-family: "IBM Plex Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-weight: 500; font-style: normal; font-display: swap; src: url("../assets/fonts/IBMPlexMono-500.woff2") format("woff2"); }
:root {
  color-scheme: dark;
  --deep: #06070b; --ink: #eef1f4; --ink-soft: #8f9aa6; --glow: #72e6e0;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; --sans: Onest, system-ui, sans-serif;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--deep); }
html, body { overflow-x: clip; }
body { min-height: 100svh; color: var(--ink); font: 300 17px/1.6 var(--sans); background: var(--deep); }
button { font: inherit; color: inherit; }
.eyebrow { margin: 0 0 8px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--glow); }
.corner { position: fixed; z-index: 9; top: 12px; left: 12px; padding: 4px 8px; background: var(--deep); font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-soft); text-decoration: none; }
.corner:hover, .corner:focus-visible { color: var(--ink); outline: none; }

.stage { position: relative; height: 100svh; min-height: 560px; overflow: hidden; background: var(--deep); touch-action: pan-y; }
.stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; }
/* the words sit in the dark water to the right, where the picture is empty */
.title { position: absolute; right: clamp(18px, 4vw, 48px); top: 50%; z-index: 2; width: min(400px, 34vw); transform: translateY(-50%); display: grid; gap: 12px; pointer-events: none; }
.title > * { pointer-events: auto; }
.title h1 { font: 300 clamp(40px, 5vw, 72px)/.95 var(--sans); letter-spacing: -.035em; }
.lede { color: #c3cbd3; font-size: 16px; text-wrap: pretty; }
.count { font: 500 12px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.again { width: max-content; margin-top: 4px; padding: 11px 16px; border: 1px solid #3a4652; border-radius: 999px; background: rgba(6,7,11,.6); color: var(--ink); font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.again:hover, .again:focus-visible { border-color: var(--glow); outline: none; }
.colophon { width: min(100%, 1180px); margin: 0 auto; padding: 36px clamp(18px, 4vw, 48px) 60px; }
.colophon p { max-width: 760px; font: 400 12px/1.6 var(--mono); color: var(--ink-soft); }

@media (max-width: 860px) {
  .title { right: auto; left: clamp(18px, 4vw, 48px); top: auto; bottom: clamp(20px, 4vh, 40px); width: min(100% - 36px, 440px); transform: none; padding: 14px 16px 16px; background: rgba(6,7,11,.72); backdrop-filter: blur(6px); border-radius: 8px; }
  .lede { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .again { display: none; }
}