/* Self-hosted fonts (SIL OFL 1.1, licences in /assets/fonts/). Latin subsets, variable axes. */
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/BricolageGrotesque-latin.woff2) format("woff2"); font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url(/assets/fonts/InstrumentSans-latin.woff2) format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; }
@font-face { font-family: "Martian Mono"; src: url(/assets/fonts/MartianMono-latin.woff2) format("woff2"); font-weight: 100 800; font-stretch: 75% 112.5%; font-display: swap; }

/* it is a vibe, site v2.
   Layout: a launch poster that loops. Full-bleed colour fields (pink for the idea, yellow for joining in),
   oversized condensed type that runs edge to edge, and one live object, the Loop Machine, as the hero.
   Dark-first: dark values on bare :root, light "lilac paper" under prefers-color-scheme / data-theme. */
:root {
  --ground: #100c1c; --ground-2: #181229; --ground-3: #221a38;
  --fg: #f6f1ff; --fg-2: #c9bfe3; --fg-3: #9a8fba; --line: rgba(246,241,255,.13);
  --field: #ff4f9a; --on-field: #17081a; --field-2: #ff86b9; --accent-ink: #ff4f9a; --on-sky: #0b1020; --live: #d4143f;
  --volt: #ffe14d; --on-volt: #1a1400;
  --done: #6ff0b0; --mostly: #ffd166; --nearly: #ff8f75; --undone: #9a8fba; --sky: #8fb2ff;
  --paper: #fffdf6; --paper-ink: #22180f; --screen: #0d1020; --on-screen: #eef1ff; --on-screen-2: #aab3d8;
  --display: "Bricolage Grotesque", "Arial Narrow", "Helvetica Neue", sans-serif;
  --body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "Martian Mono", ui-monospace, "DejaVu Sans Mono", monospace;
  --gut: clamp(16px, 4.5vw, 56px); --max: 1320px; --ease: cubic-bezier(.2,.8,.2,1); --snap: cubic-bezier(.5,1.8,.4,.8);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --ground: #f3eefb; --ground-2: #e9e1f7; --ground-3: #ddd2f0;
    --fg: #170f27; --fg-2: #463a63; --fg-3: #5a4f7a; --line: rgba(23,15,39,.15);
    --done: #0a6b41; --mostly: #8a5800; --nearly: #a8341c; --undone: #5a4f7a; --sky: #2b5fcc; --accent-ink: #b0105a; --on-sky: #ffffff;
    color-scheme: light;
  }
}
:root[data-theme="light"] {
  --ground: #f3eefb; --ground-2: #e9e1f7; --ground-3: #ddd2f0;
  --fg: #170f27; --fg-2: #463a63; --fg-3: #5a4f7a; --line: rgba(23,15,39,.15);
  --done: #0a6b41; --mostly: #8a5800; --nearly: #a8341c; --undone: #5a4f7a; --sky: #2b5fcc; --accent-ink: #b0105a; --on-sky: #ffffff;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--fg); font: 400 17px/1.55 var(--body); overflow-x: hidden; }
img { max-width: 100%; display: block; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--volt); outline-offset: 3px; border-radius: 4px; }
.wrap { max-width: var(--max); margin: 0 auto; padding-inline: var(--gut); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--volt); color: var(--on-volt); padding: 8px 12px; }
.skip:focus { left: 8px; }
h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 800; text-wrap: balance; }
p { margin: 0; }
.mono { font-family: var(--mono); }
.tag { font: 600 11.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; }
.key { font: 700 .9em/1 var(--mono); background: var(--volt); color: var(--on-volt); padding: .3em .45em; border-radius: 4px; white-space: nowrap; }

/* ---------- Header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 40; background: var(--ground); border-bottom: 1px solid var(--line); }
.top.on-field { background: var(--field); color: var(--on-field); border-color: rgba(23,8,26,.18); }
.top .wrap { display: flex; align-items: center; gap: 24px; height: 62px; }
.mark { display: flex; align-items: baseline; gap: 5px; text-decoration: none; font: 600 15px/1 var(--body); white-space: nowrap; }
.mark b { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.01em; }
.top:not(.on-field) .mark b { color: var(--accent-ink); }
.eq { display: inline-flex; gap: 2.5px; align-items: center; height: 20px; align-self: center; margin-left: 3px; }
.eq i { width: 3.5px; border-radius: 1px; background: currentColor; }
.top:not(.on-field) .eq i { background: var(--field); }
.eq i:nth-child(1) { height: 8px; } .eq i:nth-child(2) { height: 18px; } .eq i:nth-child(3) { height: 11px; } .eq i:nth-child(4) { height: 20px; } .eq i:nth-child(5) { height: 9px; }
.nav { display: flex; gap: 2px; }
.nav a { text-decoration: none; font: 600 14.5px/1 var(--body); padding: 9px 11px; border-radius: 999px; white-space: nowrap; opacity: .82; }
.nav a:hover, .nav a[aria-current] { opacity: 1; background: color-mix(in srgb, currentColor 10%, transparent); }
.top .end { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.theme { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; color: inherit; cursor: pointer; font: 16px/1 system-ui, sans-serif; opacity: .75; }
.watch { display: inline-flex; gap: 9px; align-items: center; text-decoration: none; font: 700 14.5px/1 var(--body); padding: 11px 16px; border-radius: 999px; background: var(--on-field); color: var(--field); white-space: nowrap; }
.top:not(.on-field) .watch { background: var(--field); color: var(--on-field); }
.live { width: 9px; height: 9px; border-radius: 50%; background: #ff3355; flex: none; animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: .3; } }

/* ---------- Hero: the pink field ---------- */
.hero { background: var(--field); color: var(--on-field); position: relative; overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; padding-block: clamp(32px, 5vw, 72px) clamp(40px, 6vw, 88px); }
.hero .eyebrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.hero .eyebrow .tag { padding: 7px 10px; border: 1.5px solid currentColor; border-radius: 999px; }
.shout { font-family: var(--display); font-weight: 800; font-variation-settings: "wdth" 75, "opsz" 96; text-transform: uppercase;
         font-size: clamp(54px, 10.4vw, 168px); line-height: .84; letter-spacing: -.012em; margin: 22px 0 26px; }
.shout span { display: block; }
.shout .out { color: var(--paper); }
.shout .hi { color: var(--on-field); display: inline-block; background: var(--volt); padding: 0 .06em; margin-top: .06em; transform: rotate(-2deg); }
.hero .lede { font-size: clamp(17px, 1.45vw, 20px); line-height: 1.5; max-width: 33em; font-weight: 500; }
.hero .ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 26px; }
.btn { display: inline-flex; gap: 10px; align-items: center; text-decoration: none; font: 700 16px/1 var(--body); padding: 15px 22px; border-radius: 999px; border: 0; cursor: pointer; white-space: nowrap; }
.btn.ink { background: var(--on-field); color: var(--field); }
.btn.outline { background: transparent; color: inherit; box-shadow: inset 0 0 0 2px currentColor; }
.btn.main { background: var(--field); color: var(--on-field); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--fg-3); }
.status { margin-top: 22px; display: flex; gap: 10px; align-items: center; font: 600 12.5px/1.4 var(--mono); }
.status b { background: var(--on-field); color: var(--volt); padding: 5px 8px; border-radius: 4px; font-weight: 700; letter-spacing: .08em; }

/* ---------- The Loop Machine ---------- */
.machine { position: relative; background: var(--screen); color: var(--on-screen); border-radius: 18px; padding: 14px; transform: rotate(1.2deg);
           box-shadow: 0 2px 0 2px var(--on-field), 14px 16px 0 0 var(--on-field); }
.track { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-bottom: 12px; }
.track button { all: unset; cursor: pointer; display: grid; gap: 7px; justify-items: start; font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--on-screen-2); padding: 4px 2px; min-width: 0; }
.track button i { display: block; width: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,.12); overflow: hidden; position: relative; }
.track button i::after { content: ""; position: absolute; inset: 0; background: var(--field); transform: scaleX(0); transform-origin: left; }
.track button.past i::after { transform: scaleX(1); }
.track button.now { color: #fff; }
.track button.now i::after { animation: fill var(--dur, 2.2s) linear forwards; }
.machine.paused .track button.now i::after { animation: none; transform: scaleX(1); }
@keyframes fill { to { transform: scaleX(1); } }
.track button:focus-visible { outline: 2px solid var(--volt); outline-offset: 2px; }
.panes { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; background: #0a0d1a; }
.pane { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; opacity: 0; visibility: hidden; transition: opacity .45s var(--ease), visibility 0s .45s; }
.pane.on { opacity: 1; visibility: visible; transition: opacity .45s var(--ease); }
.cap { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; margin-top: 12px; min-height: 2.9em; }
.cap p { font: 500 14.5px/1.4 var(--body); color: var(--on-screen); min-width: 0; }
.cap span { font: 600 11px/1 var(--mono); color: var(--on-screen-2); white-space: nowrap; letter-spacing: .06em; }

/* pane: chat */
.chat { width: 100%; display: grid; gap: 9px; align-content: end; height: 100%; font: 500 15px/1.4 var(--body); }
.chat div { background: rgba(255,255,255,.06); border-radius: 8px; padding: 9px 12px; }
.chat .u1 { color: #c7a6ff; font-weight: 700; } .chat .u2 { color: var(--field-2); font-weight: 700; } .chat .u3 { color: #8fb2ff; font-weight: 700; }
.chat .typed { font-family: var(--mono); font-size: 14px; }
.chat .typed .k { color: var(--volt); }
.chat .typed::after { content: "▌"; color: var(--volt); margin-left: 1px; animation: blink 1s steps(1) infinite; }
.chat .typed.done::after { content: none; }
.chat .bot { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease); }
.chat .bot.show { opacity: 1; transform: none; }
.chat .dim { opacity: .55; }
/* pane: screen */
.checks { width: min(100%, 360px); display: grid; gap: 10px; }
.checks div { display: flex; justify-content: space-between; gap: 12px; font: 600 13px/1 var(--mono); padding: 14px; border-radius: 8px; background: rgba(255,255,255,.05); }
.checks div b { color: #6ff0b0; }
.on .checks div { animation: pop-in .35s var(--ease) both; }
.on .checks div:nth-child(2) { animation-delay: .35s; } .on .checks div:nth-child(3) { animation-delay: .7s; }
@keyframes pop-in { from { opacity: 0; transform: translateY(8px); } }
/* pane: sketch */
.sheet { width: 100%; height: 100%; background: var(--paper); color: var(--paper-ink); border-radius: 6px; display: grid; grid-template-columns: 1fr 108px; gap: 6px; padding: 12px; transform: rotate(-1.5deg); }
.sheet .title { grid-column: 1 / -1; font: 700 15px/1.2 var(--body); }
.sheet .title em { font-style: normal; color: #d0226b; }
.sheet svg { width: 100%; height: 100%; }
.sheet svg [data-p] { opacity: 0; transform-box: fill-box; transform-origin: center; }
.on .sheet svg [data-p] { animation: draw .4s var(--snap) both; animation-delay: calc(var(--i) * .2s); }
@keyframes draw { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }
.sheet ul { list-style: none; margin: 0; padding: 0; display: grid; align-content: center; gap: 4px; font: 600 10.5px/1.2 var(--mono); }
.sheet li { opacity: .25; }
.on .sheet li { animation: tick .3s both; animation-delay: calc(var(--i) * .2s + .2s); }
@keyframes tick { to { opacity: 1; } }
.sheet li::before { content: "✓ "; color: #0d7a4b; }
/* pane: build */
.bench { position: relative; width: 100%; height: 100%; display: grid; place-items: center; background: radial-gradient(60% 60% at 50% 55%, #1b2142, #0a0d1a 75%); border-radius: 8px; }
.bench img { width: 92%; transform: scale(1.5); }
.on .bench img { animation: rise .9s var(--ease) both; }
@keyframes rise { from { opacity: 0; transform: scale(1.1) translateY(20px); } to { opacity: 1; transform: scale(1.5); } }
.bench .lbl, .scan .lbl { position: absolute; left: 10px; top: 10px; font: 600 10.5px/1 var(--mono); letter-spacing: .1em; background: rgba(0,0,0,.55); padding: 6px 8px; border-radius: 4px; color: var(--on-screen-2); }
.code { position: absolute; right: 10px; bottom: 10px; left: 10px; font: 500 10.5px/1.5 var(--mono); color: #aab3d8; background: rgba(0,0,0,.55); padding: 8px 10px; border-radius: 6px; white-space: pre; overflow: hidden; }
.code b { color: var(--field-2); font-weight: 600; }
/* pane: check */
.scan { position: relative; width: 100%; height: 100%; border-radius: 8px; overflow: hidden; }
.scan img { width: 100%; height: 100%; object-fit: cover; transform: scale(2.3); transform-origin: 43% 71%; }
.scan .box { position: absolute; left: 38%; top: 52%; width: 20%; height: 26%; border: 2px solid var(--volt); border-radius: 4px; }
.on .scan .box { animation: lock .6s var(--ease) both .3s; }
@keyframes lock { from { opacity: 0; transform: scale(2); } }
.scan .chips { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; gap: 6px; flex-wrap: wrap; }
.scan .chips span { font: 600 10.5px/1 var(--mono); background: rgba(0,0,0,.7); padding: 7px 8px; border-radius: 4px; }
.scan .chips .ok { color: #6ff0b0; } .scan .chips .meh { color: #ffd166; }
/* pane: judge */
.verdict { display: grid; gap: 18px; justify-items: center; text-align: center; }
.stamp { display: inline-block; font: 800 clamp(30px, 4vw, 52px)/1 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; letter-spacing: .02em;
         color: var(--c); border: 5px solid var(--c); border-radius: 10px; padding: 8px 16px 6px; transform: rotate(-9deg); }
.on .verdict .stamp { animation: slam .55s var(--snap) both .15s; }
@keyframes slam { from { opacity: 0; transform: rotate(-9deg) scale(2.4); } to { opacity: 1; transform: rotate(-9deg) scale(1); } }
.verdict p { font: 500 14px/1.45 var(--body); color: var(--on-screen-2); max-width: 30ch; }
.v-done { --c: #6ff0b0; } .v-mostly { --c: #ffd166; } .v-nearly { --c: #ff8f75; } .v-undone { --c: #9a8fba; }
/* pane: record */
.ledger-mini { width: 100%; display: grid; gap: 6px; font: 500 12px/1.3 var(--mono); }
.ledger-mini div { display: grid; grid-template-columns: 44px 1fr auto; gap: 10px; padding: 10px; border-radius: 6px; background: rgba(255,255,255,.04); color: var(--on-screen-2); }
.ledger-mini div.new { background: var(--field); color: var(--on-field); font-weight: 700; }
.on .ledger-mini div.new { animation: slide .6s var(--ease) both .2s; }
@keyframes slide { from { opacity: 0; transform: translateY(-16px); } }

/* ---------- Sections ---------- */
.sec { padding-block: clamp(64px, 9vw, 128px); }
.kicker { display: flex; gap: 14px; align-items: center; color: var(--fg-3); margin-bottom: 18px; }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.big { font-size: clamp(40px, 6.4vw, 96px); line-height: .92; letter-spacing: -.02em; font-variation-settings: "wdth" 80; }
.big em { font-style: normal; color: var(--accent-ink); }
.sub { margin-top: 20px; color: var(--fg-2); font-size: clamp(17px, 1.4vw, 19px); max-width: 40em; }

/* the loop line */
.line { list-style: none; margin: clamp(40px, 6vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); position: relative; }
.line::before { content: ""; position: absolute; left: 0; right: 0; top: 22px; height: 6px; border-radius: 3px; background: var(--field); }
.line li { position: relative; padding-right: 14px; min-width: 0; }
.line .stop { width: 50px; height: 50px; border-radius: 50%; background: var(--ground); border: 6px solid var(--field); display: grid; place-items: center; font: 700 13px/1 var(--mono); position: relative; }
.line h3 { font-size: 26px; line-height: 1; margin: 18px 0 8px; font-variation-settings: "wdth" 80; }
.line p { color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.line .back { position: absolute; left: calc(100% * 4 / 7); width: calc(100% * 3 / 7); top: 52px; height: 0; }
.spur { margin-top: 34px; display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: center; max-width: 760px; margin-left: auto; }
.spur .hook { width: 64px; height: 44px; border-left: 6px solid var(--nearly); border-bottom: 6px solid var(--nearly); border-bottom-left-radius: 22px; }
.spur p { color: var(--fg-2); font-size: 15px; }
.spur b { color: var(--nearly); }

/* projects */
.band { background: var(--ground-2); }
.projects { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; margin-top: 44px; }
.proj { position: relative; border-radius: 22px; overflow: hidden; text-decoration: none; display: flex; flex-direction: column; min-width: 0; }
.proj.now { grid-row: span 2; background: var(--screen); color: var(--on-screen); }
.proj.now .pic { position: relative; flex: 1; min-height: 300px; overflow: hidden; }
.proj.now .pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.45); transition: transform .8s var(--ease); }
.proj.now:hover .pic img { transform: scale(1.55); }
.proj .body { padding: clamp(20px, 2.6vw, 32px); display: grid; gap: 12px; }
.proj .no { font: 800 clamp(64px, 8vw, 120px)/.8 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.02em; }
.proj.now .no { position: absolute; left: 22px; top: 18px; color: var(--paper); }
.proj h3 { font-size: clamp(28px, 3vw, 42px); line-height: 1; font-variation-settings: "wdth" 85; }
.proj p { color: inherit; opacity: .82; font-size: 16px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 600 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 7px 9px; border-radius: 999px; border: 1.5px solid currentColor; white-space: nowrap; }
.chip.lv { background: var(--live); border-color: var(--live); color: #fff; display: inline-flex; gap: 6px; align-items: center; }
.chip.lv::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.proj .stats { display: flex; gap: 22px; flex-wrap: wrap; font: 600 12.5px/1.3 var(--mono); color: var(--on-screen-2); }
.proj .stats b { display: block; font: 800 34px/1 var(--display); font-variation-settings: "wdth" 80; color: var(--on-screen); }
.proj.next { background: var(--ground-3); color: var(--fg); border: 2px dashed var(--fg-3); }

.proj.later { background: transparent; color: var(--fg); border: 1.5px solid var(--line); }
.ladder { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font: 600 12px/1 var(--mono); color: var(--fg-2); }
.ladder span { padding: 7px 9px; border-radius: 4px; background: var(--ground-3); }
.ladder i { font-style: normal; color: var(--fg-3); }
.pixels { display: grid; grid-template-columns: repeat(16, 1fr); gap: 3px; padding: 0 clamp(20px, 2.6vw, 32px); opacity: .9; }
.pixels i { aspect-ratio: 1; border-radius: 2px; background: var(--ground-2); }
.pixels i.a { background: var(--field); } .pixels i.b { background: var(--volt); } .pixels i.c { background: var(--sky); } .pixels i.d { background: var(--fg-3); }

/* the record: ledger */
.ledger { margin-top: 40px; border-top: 2px solid var(--fg); }
.ledger a { display: grid; grid-template-columns: 90px minmax(0, 1fr) 170px 150px 70px; gap: 18px; align-items: baseline; padding: 16px 4px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .2s, padding .25s var(--ease); }
.ledger a:hover { background: var(--ground-2); padding-left: 14px; }
.ledger .n { font: 800 30px/1 var(--display); font-variation-settings: "wdth" 75; color: var(--accent-ink); font-variant-numeric: tabular-nums; }
.ledger .idea { font: 600 clamp(17px, 1.5vw, 20px)/1.3 var(--body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .who { font: 500 13px/1.2 var(--mono); color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ledger .t { font: 500 13px/1 var(--mono); color: var(--fg-3); text-align: right; font-variant-numeric: tabular-nums; }
.vw { font: 700 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--c); white-space: nowrap; }
.vw::before { content: "■ "; }
.c-done { --c: var(--done); } .c-mostly { --c: var(--mostly); } .c-nearly { --c: var(--nearly); } .c-undone { --c: var(--undone); }
.ledger a.undone .idea { text-decoration: line-through; color: var(--fg-3); }
.tally { display: flex; gap: clamp(20px, 4vw, 56px); flex-wrap: wrap; margin-top: 30px; }
.tally div { font: 600 13px/1.3 var(--mono); color: var(--fg-2); }
.tally b { display: block; font: 800 clamp(48px, 6vw, 84px)/.9 var(--display); font-variation-settings: "wdth" 75; color: var(--fg); font-variant-numeric: tabular-nums; }
.tally .d b { color: var(--done); } .tally .n b { color: var(--nearly); }

/* under the hood */
.hood { background: var(--screen); color: var(--on-screen); }
.hood .kicker { color: var(--on-screen-2); }
.hood .kicker::after { background: rgba(255,255,255,.14); }
.hood .sub { color: var(--on-screen-2); }
.hood-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: 44px; }
.spec { margin: 0; display: grid; gap: 0; border-top: 1px solid rgba(255,255,255,.16); }
.spec div { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 18px; padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,.1); }
.spec dt { font: 600 11.5px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--field-2); }
.spec dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--on-screen); }
.term { background: #070912; border: 1px solid rgba(255,255,255,.1); border-radius: 12px; overflow: hidden; align-self: start; }
.term .bar { display: flex; justify-content: space-between; padding: 10px 14px; font: 600 11px/1 var(--mono); color: var(--on-screen-2); border-bottom: 1px solid rgba(255,255,255,.08); letter-spacing: .06em; }
.term pre { margin: 0; padding: 16px; font: 500 12.5px/1.65 var(--mono); color: #cfd5f5; overflow-x: auto; }
.term .k { color: var(--field-2); } .term .s { color: #ffd166; } .term .c { color: #8089ad; } .term .g { color: #6ff0b0; }

/* join: the yellow field */
.join { background: var(--volt); color: var(--on-volt); }
.join .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.giant-key { font: 800 clamp(84px, 15vw, 230px)/.8 var(--mono); letter-spacing: -.06em; font-variation-settings: "wdth" 75; }
.giant-key small { display: block; font: 700 clamp(18px, 2vw, 26px)/1.2 var(--body); letter-spacing: 0; margin-top: 18px; }
.cmds { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--on-volt); }
.cmds li { display: grid; grid-template-columns: 130px 1fr; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(26,20,0,.2); font-size: 16px; }
.cmds code { font: 700 15px/1.3 var(--mono); }

/* faq */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 4vw, 64px); }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 2px solid var(--fg); }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 20px 0; font: 700 clamp(19px, 1.7vw, 22px)/1.3 var(--body); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font: 800 26px/1 var(--display); color: var(--accent-ink); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding-bottom: 20px; color: var(--fg-2); max-width: 60ch; }

footer { padding-block: 40px 56px; border-top: 1px solid var(--line); overflow: hidden; }
.sign { font: 800 clamp(80px, 21vw, 340px)/.78 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.03em; white-space: nowrap; margin: 0 0 28px; }
.sign b { color: var(--accent-ink); }
footer .row { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; color: var(--fg-3); font-size: 14px; }
footer .row a { color: var(--fg-2); }

/* ---------- Inner pages ---------- */
.crumbs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; font: 600 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding-top: 28px; color: var(--fg-3); }
.crumbs a { text-decoration: none; color: var(--fg-2); } .crumbs a:hover { color: var(--fg); text-decoration: underline; }
.crumbs i { font-style: normal; opacity: .5; }

/* project header */
.phead { padding-block: 26px clamp(36px, 5vw, 64px); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items: end; }
.phead .no { font: 800 clamp(120px, 20vw, 300px)/.74 var(--display); font-variation-settings: "wdth" 75; color: var(--accent-ink); letter-spacing: -.04em; }
.phead h1 { font-size: clamp(40px, 6vw, 88px); line-height: .92; font-variation-settings: "wdth" 80; }
.phead p { margin-top: 16px; color: var(--fg-2); max-width: 46ch; font-size: 18px; }
.phead .chips { margin-bottom: 18px; }

.loop-here { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0; border-top: 2px solid var(--fg); }
.loop-here div { padding: 18px 14px 20px 0; border-right: 1px solid var(--line); min-width: 0; }
.loop-here div + div { padding-left: 14px; }
.loop-here div:last-child { border-right: 0; }
.loop-here b { display: block; font: 800 22px/1 var(--display); font-variation-settings: "wdth" 80; margin-bottom: 8px; }
.loop-here span { font-size: 14.5px; color: var(--fg-2); line-height: 1.45; }

/* scene scrubber */
.scene { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: 36px; align-items: start; }
.viewer { background: var(--screen); border-radius: 18px; overflow: hidden; position: relative; aspect-ratio: 16 / 10; }
.viewer img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; transform: scale(1.55); }
.viewer .hud { position: absolute; left: 14px; right: 14px; top: 14px; display: flex; justify-content: space-between; gap: 10px; color: var(--on-screen); }
.viewer .hud .big-n { font: 800 clamp(44px, 6vw, 84px)/.8 var(--display); font-variation-settings: "wdth" 75; color: var(--paper); font-variant-numeric: tabular-nums; }
.viewer .hud .vw { align-self: start; background: rgba(0,0,0,.6); padding: 7px 9px; border-radius: 4px; }
.viewer .said { position: absolute; left: 14px; right: 14px; bottom: 14px; color: var(--on-screen); font: 600 clamp(15px, 1.5vw, 19px)/1.35 var(--body); background: rgba(8,10,20,.72); padding: 12px 14px; border-radius: 10px; }
.viewer .said span { display: block; font: 500 12px/1.3 var(--mono); color: var(--on-screen-2); margin-top: 4px; }
.scrub { margin-top: 16px; }
.ticks { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; height: 34px; align-items: end; }
.ticks i { display: block; height: 60%; border-radius: 1px; background: var(--c); opacity: .75; }
.ticks i.done { --c: var(--done); height: 100%; } .ticks i.mostly { --c: var(--mostly); height: 80%; } .ticks i.nearly { --c: var(--nearly); height: 45%; } .ticks i.undone { --c: var(--undone); height: 30%; }
.ticks i.at { opacity: 1; outline: 2px solid var(--fg); outline-offset: 1px; }
.scrub input { width: 100%; margin: 10px 0 0; accent-color: var(--field); }
.scrub .row { display: flex; justify-content: space-between; gap: 10px; font: 600 12px/1.3 var(--mono); color: var(--fg-3); margin-top: 6px; flex-wrap: wrap; }
.scrub .row button { all: unset; cursor: pointer; font: 700 12px/1 var(--mono); padding: 9px 12px; border-radius: 999px; background: var(--fg); color: var(--ground); }
.scrub .row button:focus-visible { outline: 3px solid var(--volt); }
.side { display: grid; gap: 16px; }
.side h2 { font-size: clamp(32px, 3.4vw, 50px); line-height: .95; font-variation-settings: "wdth" 80; }
.side p { color: var(--fg-2); }
.mini-tally { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.mini-tally div { background: var(--ground); padding: 14px; font: 600 12px/1.3 var(--mono); color: var(--fg-2); }
.mini-tally b { display: block; font: 800 38px/1 var(--display); font-variation-settings: "wdth" 75; color: var(--fg); }
.ghost-scene { border: 2px dashed var(--line); border-radius: 18px; padding: 22px; color: var(--fg-3); display: flex; gap: 16px; align-items: center; margin-top: 22px; }
.ghost-scene b { font: 800 44px/1 var(--display); font-variation-settings: "wdth" 75; color: var(--fg-3); }
.filters { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 28px; }
.filters button { font: 700 13px/1 var(--body); padding: 10px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: transparent; color: var(--fg-2); cursor: pointer; }
.filters button[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--ground); }

/* change page */
.chg-head { padding-block: 22px 40px; }
.chg-head .no { font: 800 clamp(110px, 19vw, 280px)/.74 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.04em; color: var(--accent-ink); }
.chg-head .row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: end; margin-top: 10px; }
.chg-head h1 { font-size: clamp(48px, 8vw, 128px); line-height: .88; font-variation-settings: "wdth" 80; }
.chg-head h1 q { quotes: "\201C" "\201D"; }
.chg-head .by { margin-top: 18px; display: flex; gap: 10px 18px; flex-wrap: wrap; font: 600 13px/1.3 var(--mono); color: var(--fg-2); }
.chg-head .by b { color: var(--fg); }

.trace { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.trace > li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); padding-block: 30px; border-bottom: 1px solid var(--line); }
.st { position: relative; display: grid; align-content: start; gap: 8px; }
.st .k { font: 700 12px/1 var(--mono); letter-spacing: .12em; color: var(--accent-ink); }
.st h2 { font-size: 40px; line-height: .9; font-variation-settings: "wdth" 80; }
.st p { font-size: 14px; color: var(--fg-3); line-height: 1.45; }
.art { min-width: 0; }
.bubble { display: inline-grid; gap: 4px; background: var(--ground-2); border-radius: 4px 18px 18px 18px; padding: 14px 18px; font-size: 18px; }
.bubble .u { font: 700 12px/1 var(--mono); color: var(--accent-ink); }
.bubble code { font: 600 17px/1.3 var(--mono); } .bubble code b { color: var(--accent-ink); }
.reply { margin-top: 10px; font: 500 14px/1.4 var(--mono); color: var(--fg-2); }
.passes { display: flex; gap: 8px; flex-wrap: wrap; }
.passes span { font: 600 12.5px/1 var(--mono); padding: 10px 12px; border-radius: 6px; background: var(--ground-2); }
.passes span b { color: var(--done); margin-right: 6px; }
.plan { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.plan div { background: var(--ground); padding: 14px; }
.plan dt { font: 600 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg-3); }
.plan dd { margin: 8px 0 0; font: 700 20px/1.1 var(--body); }
.paper { background: var(--paper); color: var(--paper-ink); border-radius: 4px; padding: 20px 22px; max-width: 560px; transform: rotate(-1deg); box-shadow: 10px 12px 0 0 var(--ground-3); position: relative; }
.paper::before { content: ""; position: absolute; top: -12px; left: 40%; width: 120px; height: 26px; background: rgba(255,225,77,.85); transform: rotate(2deg); }
.paper .t { font: 700 20px/1.2 var(--body); } .paper .t em { font-style: normal; color: #d0226b; }
.paper img { mix-blend-mode: multiply; margin: 8px auto 0; width: 100%; max-width: 440px; }
.paper .g { font: 500 13px/1.4 var(--mono); color: #5a4f3c; margin-top: 8px; }
.parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.parts span { font: 600 11.5px/1 var(--mono); padding: 7px 9px; border-radius: 999px; background: #efe8d4; color: #0a6b41; }
.parts span.x { color: #8a5800; background: #f8eccb; }
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.shot { position: relative; background: var(--screen); border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 10; }
.shot img { width: 100%; height: 100%; object-fit: cover; }
.shot .l { position: absolute; left: 12px; top: 12px; font: 600 11px/1 var(--mono); letter-spacing: .1em; background: rgba(0,0,0,.6); color: var(--on-screen-2); padding: 7px 8px; border-radius: 4px; z-index: 2; }
.shot canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; cursor: grab; touch-action: none; }
.shot .go { position: absolute; right: 12px; bottom: 12px; z-index: 2; }
.compare { --x: 30%; }
.compare img { position: absolute; inset: 0; transform: scale(2.3); transform-origin: 43% 71%; }
.compare .after { clip-path: inset(0 0 0 var(--x)); }
.compare .edge { position: absolute; top: 0; bottom: 0; left: var(--x); width: 3px; margin-left: -1.5px; background: var(--field); pointer-events: none; z-index: 2; }
.compare input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: ew-resize; z-index: 3; }
.compare .l.r { left: auto; right: 12px; color: var(--field-2); }
.compare input:focus-visible ~ .edge { box-shadow: 0 0 0 3px var(--volt); }
.judge-q { font: 700 clamp(20px, 2vw, 26px)/1.35 var(--body); max-width: 40ch; }
.fine { font-size: 13.5px; color: var(--fg-3); margin-top: 12px; max-width: 60ch; }
.commit { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; font-family: var(--mono); }
.commit div { background: var(--ground); padding: 14px; font-size: 12px; color: var(--fg-3); letter-spacing: .06em; text-transform: uppercase; }
.commit b { display: block; margin-top: 8px; font: 700 16px/1.2 var(--mono); color: var(--fg); text-transform: none; letter-spacing: 0; }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); margin-top: 48px; border-block: 2px solid var(--fg); }
.pn a { background: var(--ground); padding: 22px 6px; text-decoration: none; display: grid; gap: 6px; }
.pn a.nx { text-align: right; }
.pn small { font: 600 12px/1 var(--mono); color: var(--fg-3); letter-spacing: .1em; }
.pn b { font: 800 clamp(24px, 3vw, 40px)/1 var(--display); font-variation-settings: "wdth" 80; }
.pn a:hover b { color: var(--accent-ink); }

/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
  .hero .wrap, .join .wrap, .hood-grid, .faq, .scene { grid-template-columns: 1fr; }
  .machine { max-width: 620px; transform: rotate(.8deg); }
  .line { grid-template-columns: 1fr; gap: 26px; padding-left: 4px; }
  .line::before { left: 22px; right: auto; top: 0; bottom: 0; width: 6px; height: auto; }
  .line li { display: grid; grid-template-columns: 50px 1fr; gap: 0 18px; padding-right: 0; }
  .line li h3 { margin: 4px 0 6px; } .line li p { grid-column: 2; }
  .line .stop { grid-row: span 2; }
  .spur { margin-left: 0; }
  .projects { grid-template-columns: 1fr; }
  .proj.now { grid-row: auto; }
  .loop-here { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .loop-here div { border-bottom: 1px solid var(--line); padding-left: 14px; }
  .loop-here div:nth-child(1) { padding-left: 14px; }
}
@media (max-width: 760px) {
  .nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; justify-content: space-around; background: var(--ground); color: var(--fg); border-top: 1px solid var(--line); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); }
  .nav a { font-size: 12.5px; padding: 10px 8px; }
  body { padding-bottom: 60px; }
  .top .wrap { gap: 12px; }
  .ledger a { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 4px 12px; }
  .ledger .n { font-size: 24px; grid-row: span 2; }
  .ledger .idea { white-space: normal; grid-column: 2 / 4; }
  .ledger .who { grid-column: 2; } .ledger .vw { grid-column: 3; justify-self: end; } .ledger .t { display: none; }
  .spec div { grid-template-columns: 1fr; gap: 6px; }
  .cmds li { grid-template-columns: 1fr; gap: 4px; }
  .phead { grid-template-columns: 1fr; }
  .chg-head .row { grid-template-columns: 1fr; }
  .chg-head .stamp { justify-self: start; }
  .trace > li { grid-template-columns: 1fr; gap: 16px; }
  .two { grid-template-columns: 1fr; }
  .pn { grid-template-columns: 1fr; }
  .pn a.nx { text-align: left; }
  .track button { font-size: 0; gap: 0; }
  .cap p { font-size: 14px; }
  .sheet { grid-template-columns: 1fr 84px; } .sheet ul { font-size: 9px; }
}
@media (max-width: 420px) {
  .shout { font-size: 15vw; }
  .watch .long { display: none; }
  .loop-here { grid-template-columns: 1fr; }
  .machine { padding: 10px; box-shadow: 0 2px 0 2px var(--on-field), 8px 9px 0 0 var(--on-field); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .live { animation: none; }
}

/* machine footer + build inset + honest planned cards + roadmap */
.mfoot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.1); }
.mfoot .tag { color: var(--on-screen-2); }
.machine .play { all: unset; white-space: nowrap; cursor: pointer; font: 700 11.5px/1 var(--mono); letter-spacing: .06em; padding: 9px 12px; border-radius: 999px; background: rgba(255,255,255,.1); color: var(--on-screen); }
.machine .play:focus-visible { outline: 2px solid var(--volt); }
.scan .inset { position: absolute; right: 10px; top: 10px; width: 34%; aspect-ratio: 16/9; border: 2px solid var(--field); border-radius: 6px; overflow: hidden; background: #0a0d1a; }
.scan .inset img { transform: scale(1.6); transform-origin: 50% 60%; }
.on .scan .inset { animation: pop-in .5s var(--ease) both; }
.proj .when { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.proj .when li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; color: var(--fg-2); }
.proj .when li::before { content: ""; width: 14px; height: 14px; margin-top: 4px; border: 2px solid var(--fg-3); border-radius: 3px; }
.proj .when li.y::before { background: var(--done); border-color: var(--done); }
.proj .k2 { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.st-word { font: 700 11.5px/1 var(--mono); letter-spacing: .12em; padding: 7px 9px; border-radius: 4px; white-space: nowrap; }
.st-live { background: var(--live); color: #fff; } .st-tested { background: var(--sky); color: var(--on-sky); } .st-planned { box-shadow: inset 0 0 0 1.5px currentColor; } .st-idea { border: 1.5px dashed currentColor; padding: 5.5px 7.5px; }
.st-word { display: inline-block; white-space: nowrap; max-width: 100%; }
.road { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; border-top: 2px solid var(--fg); }
.road li { display: grid; grid-template-columns: 130px minmax(0, 1fr) minmax(0, 1.2fr); gap: 24px; align-items: baseline; padding: 24px 0; border-bottom: 1px solid var(--line); }
.road .w { font: 800 clamp(30px, 3.4vw, 48px)/1 var(--display); font-variation-settings: "wdth" 75; text-transform: uppercase; }
.road li:first-child .w { color: var(--accent-ink); }
.road li:not(:first-child) .w { color: var(--fg-3); }
.road h3 { font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; font-variation-settings: "wdth" 85; }
.road p { color: var(--fg-2); font-size: 16px; }
.hoodcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.12); border-radius: 14px; overflow: hidden; }
.hoodcards div { background: var(--screen); padding: 22px; display: grid; gap: 8px; align-content: start; }
.hoodcards h3 { font-size: 24px; line-height: 1.05; font-variation-settings: "wdth" 85; color: var(--on-screen); }
.hoodcards p { color: var(--on-screen-2); font-size: 15px; line-height: 1.5; }
.hoodcards .tag { color: var(--field-2); }
.cold { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 16px; align-items: center; background: var(--field); color: var(--on-field); border-radius: 14px; padding: 14px 18px; margin-top: 18px; }
.cold b { font: 800 22px/1 var(--display); font-variation-settings: "wdth" 80; }
.cold p { font-size: 15px; font-weight: 500; }
.cold a { font: 700 14px/1 var(--body); white-space: nowrap; }
@media (max-width: 1080px) { .hoodcards { grid-template-columns: 1fr; } .road li { grid-template-columns: 1fr; gap: 8px; } .cold { grid-template-columns: 1fr; } }

/* ---------- v3: the season line-up (a festival programme, not a card grid) ---------- */
.prog { margin-top: 44px; border-top: 3px solid var(--fg); }
.prog-head { display: grid; grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1fr) 130px; gap: 24px; padding: 12px 0; border-bottom: 1px solid var(--line);
             font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.slot { display: grid; grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1fr) 130px; gap: 12px 24px; padding: 26px 0; border-bottom: 1px solid var(--line); align-items: start; }
.when-col { display: grid; gap: 6px; }
.slot-k { font: 700 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.slot-no { font: 800 64px/.8 var(--display); font-variation-settings: "wdth" 75; letter-spacing: -.02em; }
.s-now .slot-no, .s-now .slot-k { color: var(--accent-ink); }
.s-next .slot-no { color: var(--fg-3); }
.slot-main { display: grid; gap: 8px; min-width: 0; justify-items: start; }
.slot h3 { font-size: clamp(30px, 3.6vw, 56px); line-height: .92; font-variation-settings: "wdth" 80; }
.s-short h3 { font-size: clamp(24px, 2.4vw, 34px); }
.slot-tool { font: 600 12.5px/1.3 var(--mono); color: var(--fg-3); }
.slot-main > p:not(.slot-tool) { color: var(--fg-2); max-width: 52ch; }
.slot-stats { display: flex; gap: 18px; flex-wrap: wrap; font: 600 12.5px/1 var(--mono); color: var(--fg-2); margin: 4px 0 6px; }
.slot-stats b { font: 800 26px/1 var(--display); font-variation-settings: "wdth" 80; color: var(--fg); margin-right: 3px; }
.slot-check { font: 500 15px/1.45 var(--mono); color: var(--fg); border-left: 3px solid var(--volt); padding-left: 14px; }
.slot-check span { display: block; font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.slot-st { display: grid; gap: 8px; justify-items: start; }
.slot-note { font: 600 12px/1 var(--mono); color: var(--fg-3); }
.slot-pic { grid-column: 2 / -1; display: block; border-radius: 16px; overflow: hidden; background: var(--screen); aspect-ratio: 3 / 1; }
.slot-pic img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; transform: scale(1.6); }
.s-next .slot-main, .s-next .slot-check, .s-next .slot-st { padding-top: 4px; }
.rube { grid-column: 2 / 4; margin: 6px 0 0; position: relative; border: 2px dashed var(--fg-3); border-radius: 16px; padding: 30px 14px 10px; background: var(--ground); }
.rube svg { width: 100%; height: auto; display: block; overflow: visible; }
.rube .lab { font: 600 12px var(--mono); fill: var(--fg-2); }
.rube .lab.end { fill: var(--done); font-weight: 700; } .rube .lab.nearly { fill: var(--nearly); }
.illu { position: absolute; left: 14px; top: 10px; font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); }
.rube .ball { offset-path: path("M30 60 L104 100 C130 112 150 112 186 112 C196 60 230 40 262 108 L404 104 C420 100 440 84 500 84 C520 84 560 112 600 112 L600 250 C560 252 480 254 420 252 C390 250 360 248 335 252"); animation: roll 6s cubic-bezier(.5,0,.6,1) infinite; }
@keyframes roll { 0% { offset-distance: 0%; } 85%, 100% { offset-distance: 100%; } }
.slot-when { grid-column: 4; align-self: center; }
.slot-when .when { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.slot-when .when li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; color: var(--fg-2); }
.slot-when .when li::before { content: ""; width: 12px; height: 12px; margin-top: 4px; border: 2px solid var(--fg-3); border-radius: 3px; }
.shorts-head { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 30px 0 4px; align-items: baseline; }
.shorts-head .slot-k { color: var(--fg); }
.shorts-head p { color: var(--fg-2); }
.s-short { padding: 18px 0; }
.later { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 24px; padding: 22px 0; align-items: center; }
.traits { margin-top: 48px; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; align-items: start; background: var(--volt); color: var(--on-volt); border-radius: 16px; padding: 22px 24px; }
.traits h3 { font-size: 30px; line-height: .95; font-variation-settings: "wdth" 80; }
.traits ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; }
.traits li { font-size: 14px; line-height: 1.35; border-top: 2px solid var(--on-volt); padding-top: 10px; }
.traits b { display: block; font: 800 19px/1.05 var(--display); font-variation-settings: "wdth" 85; margin-bottom: 4px; }
@media (max-width: 1080px) {
  .prog-head { display: none; }
  .slot, .s-short { grid-template-columns: minmax(0, 1fr) auto; }
  .when-col { grid-column: 1; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 12px; }
  .slot-st { grid-column: 2; grid-row: 1; }
  .slot-main, .slot-check, .slot-pic, .rube, .slot-when { grid-column: 1 / -1; }
  .slot-no { font-size: 44px; }
  .shorts-head, .later { grid-template-columns: 1fr; gap: 8px; }
  .traits { grid-template-columns: 1fr; }
  .traits ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .traits ul { grid-template-columns: 1fr; } .slot-pic { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .rube .ball { animation: none; offset-distance: 62%; } }
.still .rube .ball { animation: none; offset-distance: 62%; }

.k2 { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.rube .slotbox rect, .rube rect.slotbox { fill: none; stroke: var(--fg-3); stroke-width: 1.5; stroke-dasharray: 5 5; }
.rube rect.slotbox.next { stroke: var(--volt); stroke-width: 2.5; }
.rube .lab.add { fill: var(--fg); font-weight: 700; }
.rube .piece { stroke: var(--fg); stroke-width: 5; stroke-linecap: round; fill: none; } .rube .piece.thin { stroke-width: 2.5; }
.rube .strip { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.rube .strip span { font: 600 11px/1 var(--mono); padding: 7px 9px; border-radius: 4px; background: var(--ground-3); color: var(--fg-2); }
.rube .strip .on { background: var(--field); color: var(--on-field); } .rube .strip .nx { box-shadow: inset 0 0 0 1.5px var(--volt); background: transparent; color: var(--fg); } .rube .strip .gl { background: var(--done); color: #06210f; }
.seasoncheck { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; background: var(--ground-2); border-radius: 12px; padding: 16px; }
.seasoncheck .result { font: 500 15px/1.45 var(--mono); color: var(--fg-2); }
.seasoncheck .result span { display: block; font: 700 10.5px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-3); margin-bottom: 8px; }
.seasoncheck .result b { color: var(--done); }
@media (max-width: 760px) { .seasoncheck { grid-template-columns: 1fr; } }

/* ---------- v4 QA fixes ---------- */
/* Verdict words on always-dark screens keep the dark-theme colours. */
.viewer .c-done { --c: #6ff0b0; } .viewer .c-mostly { --c: #ffd166; } .viewer .c-nearly { --c: #ff8f75; } .viewer .c-undone { --c: #b3a9d1; }
/* Focus ring: yellow vanishes on pink and yellow fields, so use ink there. */
.hero :focus-visible, .top.on-field :focus-visible, .join :focus-visible, .cold :focus-visible { outline-color: var(--on-field); }
/* Compact Label Overflow: the status column holds labels without spilling past the content edge. */
.slot-st { min-width: 0; }
@media (min-width: 1081px) {
  .slot, .prog-head { grid-template-columns: 120px minmax(0, 1.3fr) minmax(0, 1fr) 176px; }
}
/* Touch targets: 44 px minimum for controls (WCAG 2.2 asks 24; the brief asks 44). */
.nav a, .watch, .btn, .filters button, .machine .play, .scrub .row button, .skip { min-height: 44px; display: inline-flex; align-items: center; }
.theme { width: 44px; height: 44px; }
.track button { min-height: 44px; align-content: center; }
footer .row a { display: inline-block; padding-block: 13px; }
.crumbs a { display: inline-block; padding-block: 16px; margin-block: -16px; }
.scrub input { height: 44px; margin-top: 0; }
.cold a { display: inline-block; padding-block: 13px; }
@media (max-width: 760px) { .nav a { min-height: 48px; } body { padding-bottom: 66px; } .track button { font-size: 0; } }
.machine.held .track button.now i::after { animation-play-state: paused; }
.mark, .cold a { min-height: 44px; display: inline-flex; align-items: center; }
.cold a { display: inline-flex; padding-block: 0; }
.theme svg { width: 18px; height: 18px; display: block; margin: auto; }
.skip:focus-visible { outline-color: var(--on-field); }

/* ---------- real site additions ---------- */
.status { flex-wrap: wrap; }
.status[data-state="stale"] b { color: var(--paper); }
.sheet.raster { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
.sheet.raster .art { display: grid; place-items: center; min-height: 0; overflow: hidden; }
.sheet.raster .art { position: relative; }
.sheet.raster img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.on .sheet.raster img { animation: reveal 1.6s steps(12) both .2s; }
@keyframes reveal { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.sheet.raster .guess { font: 600 11px/1.3 var(--mono); color: #5a4f3c; }
.bench img.thing { width: 100%; height: 100%; object-fit: cover; transform: none; }
.prose { max-width: 68ch; }
.prose h2 { font-size: clamp(30px, 3.4vw, 46px); line-height: .95; font-variation-settings: "wdth" 80; margin: 56px 0 14px; }
.prose h3 { font-size: 24px; line-height: 1.1; font-variation-settings: "wdth" 85; margin: 28px 0 8px; }
.prose p, .prose li { color: var(--fg-2); font-size: 17px; line-height: 1.6; }
.prose p + p { margin-top: 12px; }
.prose ul { padding-left: 20px; display: grid; gap: 8px; }
.prose a { color: var(--accent-ink); }
.page-head { padding-block: 26px clamp(30px, 5vw, 56px); }
.page-head h1 { font-size: clamp(48px, 8vw, 120px); line-height: .88; font-variation-settings: "wdth" 78; }
.page-head p { margin-top: 18px; color: var(--fg-2); max-width: 52ch; font-size: clamp(17px, 1.5vw, 20px); }
.steps-detail { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--fg); }
.steps-detail > li { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: clamp(18px, 3vw, 48px); padding-block: 28px; border-bottom: 1px solid var(--line); }
@media (max-width: 760px) { .steps-detail > li { grid-template-columns: 1fr; gap: 12px; } }
.stub { padding-block: clamp(60px, 12vw, 160px); }
.stub h1 { font-size: clamp(44px, 7vw, 96px); line-height: .9; font-variation-settings: "wdth" 80; }
.stub p { margin-top: 18px; color: var(--fg-2); max-width: 52ch; }
.stub .ctas { margin-top: 26px; display: flex; gap: 12px; flex-wrap: wrap; }
.ledger a[hidden] { display: none; }
.empty { color: var(--fg-3); padding: 18px 0; }
.glbnote { font: 600 12px/1.4 var(--mono); color: var(--fg-3); margin-top: 8px; }
.shot .go[disabled] { opacity: .8; cursor: progress; }
.bake { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 20px; }
.bake div { background: var(--ground); padding: 18px; font: 600 12.5px/1.4 var(--mono); color: var(--fg-2); }
.bake b { display: block; font: 800 40px/1 var(--display); font-variation-settings: "wdth" 75; color: var(--fg); margin-bottom: 6px; }
@media (max-width: 760px) { .bake { grid-template-columns: 1fr; } }
.seasoncheck .result b.c-nearly { color: var(--nearly); } .seasoncheck .result b.c-mostly { color: var(--mostly); }
.v-unsure { --c: #8fb2ff; } .c-unsure { --c: var(--sky); }
.viewer .c-unsure { --c: #8fb2ff; }
.ticks i.unsure { --c: var(--sky); height: 70%; }
.scenecard { display: block; text-decoration: none; max-width: 980px; }
.scenecard:hover .said { background: rgba(8,10,20,.9); }
.pn b { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot h3 a { color: inherit; text-decoration: none; } .slot h3 a:hover { text-decoration: underline; text-decoration-thickness: 3px; }
/* Stamps on the page ground take the theme's verdict colours (machine stamps sit on an always-dark screen). */
.chg-head .stamp.v-done, .prose .stamp.v-done { --c: var(--done); }
.chg-head .stamp.v-mostly, .prose .stamp.v-mostly { --c: var(--mostly); }
.chg-head .stamp.v-unsure, .prose .stamp.v-unsure { --c: var(--sky); }
.chg-head .stamp.v-nearly, .prose .stamp.v-nearly { --c: var(--nearly); }
.chg-head .stamp.v-undone, .prose .stamp.v-undone { --c: var(--undone); }
.prose .paper p, .prose .paper .t { color: var(--paper-ink); }
.hud .chip { flex: none; }
.slot h3 a { display: inline-flex; align-items: center; min-height: 44px; }
.hud .chip { align-self: flex-start; }

/* Keep pane: long requests clamp to two lines so the list fits the frame on phones */
.ledger-mini div span:nth-child(2) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.top { transition: background-color .25s var(--ease), color .25s var(--ease); }
@media (max-width: 480px) { .sheet.raster .guess { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 10px; } }

/* ---------- data-gap fixes: idea rows with tries, judge checklist, tries list, scene seed + examples ---------- */
.ledger .lrow { border-bottom: 1px solid var(--line); }
.ledger .lrow > a.main { border-bottom: 0; }
.ledger .lrow.undone .idea { text-decoration: line-through; color: var(--fg-3); }
.ledger .tries { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin: -6px 0 0; padding: 0 4px 12px 108px; font: 600 12px/1 var(--mono); color: var(--fg-3); }
.ledger .tries > span { margin-right: 4px; letter-spacing: .04em; }
.ledger .tries a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; border-bottom: 1px solid var(--line); color: var(--fg-2); text-decoration: none; font: 600 12px/1 var(--mono); grid-template-columns: none; transition: none; }
.ledger .tries a:hover { padding-left: 10px; background: var(--ground-2); color: var(--fg); }
.ledger .tries .dot, .tries-list .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.tryk { font: 600 11px/1 var(--mono); color: var(--fg-3); letter-spacing: .04em; white-space: nowrap; }
.missed { margin-top: 18px; }
.missed ul { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; max-width: 64ch; }
.missed li { display: grid; grid-template-columns: 38px 1fr; gap: 10px; align-items: start; color: var(--fg-2); font-size: 15px; line-height: 1.45; }
.missed li i { font: 800 11px/1 var(--mono); font-style: normal; text-transform: uppercase; text-align: center; padding: 6px 0; border-radius: 6px; color: var(--nearly); background: color-mix(in srgb, var(--nearly) 16%, transparent); }
.tries-list ol { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.tries-list a { display: grid; gap: 4px; min-width: 104px; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--fg); }
.tries-list a:hover { background: var(--ground-2); }
.tries-list li[aria-current] a { border-color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-ink); }
.tries-list .tk { font: 600 11px/1 var(--mono); color: var(--fg-3); }
.tries-list b { font: 800 22px/1 var(--display); font-variation-settings: "wdth" 80; }
.seed { margin-top: 14px; color: var(--fg-2); max-width: 60ch; }
.seed .k2 { display: block; margin-bottom: 6px; }
.examples { margin-top: 18px; }
.examples ul { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.examples code { display: inline-block; font: 600 13px/1 var(--mono); background: var(--ground-2); color: var(--fg); padding: 9px 11px; border-radius: 6px; }
.said .desc { color: var(--on-screen-2); font: 500 13px/1.4 var(--body); }
@media (max-width: 760px) { .ledger .tries { padding-left: 70px; } }
.ledger .tries .w { color: var(--fg-3); font-weight: 500; }
.page-head p.k2, .phead p.k2 { font: 600 11.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); margin-top: 0; }