/* CREATE site: one line, one dot, and Bop. Colours, type and motion come from tokens.css (brand/tokens.json).
   Rules (brand/README.md): Sketchbook + Line Black + ONE Marker Pink moment per view; pink text on light is Marker Pink
   Deep; Bop's supporting colours (Blush, Butter, Sticker White) only around him and his stickers; square corners, no
   gradients, glows, soft shadows or glass. The off-register pink block (a hard, unblurred offset) is the brand's
   colour-fill motif, not a shadow. Motion: transform, opacity and stroke-dashoffset only; 24 fps, drawings on twos. */

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--sketchbook); color: var(--line-black); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 84px; }
body { margin: 0; font: 400 16px/1.5 var(--font-body); font-stretch: 100%; background: var(--sketchbook); color: var(--line-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip; }
@media (min-width: 900px) { body { font-size: 17px; } }
img, svg, canvas, video, iframe { max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--marker-pink-deep); }
.inverse a:hover { color: var(--marker-pink); }
button, input, textarea, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--marker-pink); outline-offset: 2px; }
::selection { background: var(--marker-pink); color: var(--line-black); }
h1, h2, h3, h4 { margin: 0; font-weight: 900; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ol, ul { margin: 0; padding: 0; }
figure, blockquote, dl, dd { margin: 0; }
hr { border: 0; border-top: 2px solid var(--line-black); margin: 0; }
code, pre, kbd { font-family: var(--font-mono); }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--line-black); color: var(--sketchbook); padding: 10px 14px; font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--sketchbook); }
.hide, [hidden] { display: none !important; }
.muted { color: var(--graphite); }
.inverse .muted { color: var(--pencil); }
.nowrap { white-space: nowrap; }
.mt-0 { margin-top: 0 !important; }
.stack-sm { display: grid; gap: 8px; align-content: start; min-width: 0; }
.stack-xs { display: grid; gap: 4px; min-width: 0; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--line-black); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: 16px; }
@media (min-width: 700px) { .container { padding-inline: 32px; } }
@media (min-width: 1200px) { .container { padding-inline: 48px; } }

/* ---------------------------------------------------------------- type */
.display, .h1, .h2, .h3, .h4 { font-family: var(--font-display); font-weight: 900; font-variation-settings: 'SOFT' 100, 'WONK' 0; font-optical-sizing: auto; letter-spacing: -0.02em; line-height: 0.98; text-wrap: balance; }
.display em, .h1 em, .h2 em, .h3 em, .h4 em { font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.display { font-size: clamp(52px, 8.4vw, 120px); }
.h1 { font-size: clamp(44px, 6.4vw, 88px); }
.h2 { font-size: clamp(34px, 4.6vw, 56px); line-height: 1.02; }
.h3 { font-size: clamp(26px, 2.6vw, 36px); line-height: 1.05; }
.h4 { font-size: 24px; line-height: 1.1; }
.lead { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.45; max-width: 36em; text-wrap: pretty; }
.label { font: 500 11px/1.45 var(--font-mono); letter-spacing: 0; color: var(--graphite); }
@media (min-width: 900px) { .label { font-size: 12px; } }
.inverse .label { color: var(--pencil); }
.mono { font-family: var(--font-mono); font-size: 0.86em; }
.kicker { display: inline-flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font: 500 12px/1.4 var(--font-mono); color: var(--marker-pink-deep); }
.inverse .kicker { color: var(--marker-pink); }
.addr { font-family: var(--font-mono); font-size: 0.8em; overflow-wrap: anywhere; word-break: break-all; }
.num { font-variant-numeric: tabular-nums; }

/* placeholder: a value that is not decided yet */
.placeholder { display: inline-block; font: 600 11px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; color: var(--graphite); border: 1.5px dashed var(--graphite); padding: 3px 7px; vertical-align: 0.1em; white-space: normal; }
.inverse .placeholder { color: var(--pencil); border-color: var(--pencil); }

/* status tag: live / building / planned / proposed / active */
.status { display: inline-flex; align-items: center; gap: 6px; font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; padding: 5px 7px 4px; border: 1.5px solid currentColor; color: var(--line-black); white-space: nowrap; vertical-align: 0.15em; }
.status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.status[data-status='live']::before, .status[data-status='active']::before { background: var(--marker-pink); border-color: var(--marker-pink); }
.status[data-status='building']::before { background: currentColor; }
.status[data-status='proposed']::before { border-style: dashed; }
.inverse .status { color: var(--sketchbook); }

/* ---------------------------------------------------------------- buttons (square: never a pill) */
.btn { --off: 0px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 2px solid var(--line-black); background: var(--sketchbook); color: var(--line-black); font: 500 16px/1.1 var(--font-body); text-decoration: none; cursor: pointer; border-radius: 0; box-shadow: var(--off) var(--off) 0 0 var(--marker-pink); transition: transform var(--hover-ms) steps(2, end); -webkit-tap-highlight-color: transparent; }
.btn:hover { color: var(--line-black); --off: 4px; transform: translate(-2px, -2px); }
.btn:active { --off: 1px; transform: translate(1px, 1px); }
.btn-primary { background: var(--line-black); color: var(--sketchbook); --off: 5px; }
.btn-primary:hover { color: var(--sketchbook); --off: 7px; }
.btn-primary:active { --off: 2px; }
.inverse .btn { border-color: var(--sketchbook); background: var(--line-black); color: var(--sketchbook); }
.inverse .btn:hover { color: var(--sketchbook); }
.inverse .btn-primary { background: var(--sketchbook); color: var(--line-black); }
.inverse .btn-primary:hover { color: var(--line-black); }
.btn-sm { min-height: 38px; padding: 8px 13px; font-size: 14px; gap: 8px; }
.btn-sm.btn-primary { --off: 4px; }
.btn-block { width: 100%; }
/* the big calls to action: chunkier, same square corners, the pink block further out */
.btn-xl { min-height: 60px; padding: 16px 26px; border-width: 3px; font: 600 18px/1.1 var(--font-body); --off: 5px; gap: 12px; }
.btn-xl:hover { --off: 8px; }
.btn-xl.btn-primary { --off: 7px; }
.btn-xl.btn-primary:hover { --off: 10px; }
@media (max-width: 480px) { .btn-xl { min-height: 56px; padding: 14px 20px; font-size: 17px; } }
.btn[disabled], .btn[aria-disabled='true'] { cursor: not-allowed; opacity: 1; background: var(--sketchbook); color: var(--graphite); border-color: var(--pencil); border-style: dashed; --off: 0px; transform: none; }
.inverse .btn[disabled] { background: var(--line-black); color: var(--pencil); border-color: var(--graphite); }
.btn .arrow { font-family: var(--font-mono); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 16px; align-items: center; }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 2px solid var(--line-black); background: transparent; cursor: pointer; }
.icon-btn svg { width: 16px; height: 16px; }
.text-link { font-weight: 600; text-decoration: underline; }
.ext::after { content: ' ↗'; font-family: var(--font-mono); font-size: 0.8em; }

/* ---------------------------------------------------------------- header */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--sketchbook); border-bottom: 2px solid var(--line-black); }
.header-row { display: flex; align-items: center; gap: 16px; min-height: 64px; }
.brand { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; margin-right: auto; padding: 4px 0; }
.brand img { height: 26px; width: auto; }
@media (min-width: 900px) { .brand img { height: 30px; } .header-row { min-height: 72px; } }
.site-nav { display: none; }
.site-nav a { font: 500 15px/1 var(--font-body); text-decoration: none; padding: 10px 4px; border-bottom: 2px solid transparent; }
.site-nav a[aria-current='page'] { border-bottom-color: var(--line-black); }
.site-nav a:hover { color: var(--marker-pink-deep); }
.header-cta { flex: none; }
.menu-btn { display: inline-grid; }
@media (min-width: 900px) {
  .site-nav { display: flex; gap: 22px; align-items: center; margin-right: 8px; }
  .menu-btn { display: none; }
}
.menu-sheet { position: fixed; inset: 66px 0 auto 0; z-index: 49; background: var(--sketchbook); border-bottom: 2px solid var(--line-black); padding: 8px 16px 20px; display: grid; }
.menu-sheet a { font: 900 30px/1.2 var(--font-display); font-variation-settings: 'SOFT' 100; text-decoration: none; padding: 8px 0; border-bottom: 1.5px solid var(--pencil); }
.menu-sheet a:last-child { border-bottom: 0; }
@media (min-width: 900px) { .menu-sheet { display: none !important; } }

/* ---------------------------------------------------------------- sections */
.section { padding-block: clamp(72px, 10vw, 144px); position: relative; }
.section-tight { padding-block: clamp(48px, 6vw, 88px); }
.inverse { background: var(--line-black); color: var(--sketchbook); }
.section-head { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 860px; }
.section-head .lead { margin: 0; }
.rule-top { border-top: 2px solid var(--line-black); }
.inverse.rule-top { border-top: 0; }
.page-head { padding-block: clamp(48px, 7vw, 96px) clamp(36px, 5vw, 56px); display: grid; gap: 20px; }
.page-head .lead { margin: 0; }
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tag-pair { display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; margin-right: 8px; }

/* ---------------------------------------------------------------- Bop (composed states, scripts/lib/bop-build.mjs)
   Every state is one SVG file on the rig's viewBox (1280 × 1260, ground at 93.65%), so stacked layers line up exactly.
   Only the outline (stroke-dashoffset) and the landing features are inline. */
.bop-img { display: block; width: 100%; height: auto; }
.bop-frame { position: relative; aspect-ratio: 1280 / 1260; }
.bop-mover { position: absolute; inset: 0; }
.bop-svg, .bop-state { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.bop-state { opacity: 0; max-width: none; }
.bop-svg .bd { stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.bop-svg .bg { fill: none; stroke: var(--pencil); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1 2; stroke-dashoffset: 0; }
.bop-feat { opacity: 0; }
.bop-ground { position: absolute; top: 93.65%; left: -14%; right: -10%; height: 4px; margin-top: -2px; background: var(--line-black); transform-origin: 0 50%; }
@media (max-width: 899px) { .hero-frame .bop-ground { left: -60vw; right: -60vw; } }
.bop-says, .bop-says-static { display: inline-block; font: italic 900 clamp(34px, 4vw, 52px)/1 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -0.02em; padding: 10px 18px 12px; background: var(--sticker-white); border: 3px solid var(--line-black); box-shadow: 6px 5px 0 0 var(--marker-pink); margin: 0; }
.bop-says-static { font-size: clamp(24px, 2.6vw, 32px); padding: 6px 14px 8px; }

/* ---------------------------------------------------------------- stats pill (top of home: real counts, zeros before launch) */
.stats-pill { display: inline-grid; grid-template-columns: auto; gap: 8px; justify-self: start; max-width: 100%; padding: 10px 14px; border: 2px solid var(--line-black); background: var(--sticker-white); color: var(--line-black); font: 500 12px/1.3 var(--font-mono); text-decoration: none; box-shadow: 4px 4px 0 0 var(--line-black); transition: transform var(--hover-ms) steps(2, end); }
.stats-pill:hover { color: var(--line-black); transform: translate(-2px, -2px); box-shadow: 6px 6px 0 0 var(--marker-pink); }
.pill-head { display: inline-flex; gap: 8px; align-items: center; }
.live-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pencil); border: 1.5px solid var(--line-black); flex: none; }
.stats-pill:not([data-prelaunch]) .live-dot { background: var(--marker-pink); }
.stat-note { font: 600 10.5px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.pill-stats { display: grid; grid-template-columns: repeat(2, minmax(0, auto)); gap: 4px 18px; }
.stat { white-space: nowrap; }
.stat strong { font: 700 14px/1 var(--font-mono); margin-right: 2px; }
@media (min-width: 1100px) {
  .stats-pill { grid-template-columns: auto auto; align-items: center; gap: 14px; }
  .pill-stats { display: flex; flex-wrap: wrap; gap: 4px 14px; }
  .pill-head { padding-right: 14px; border-right: 1.5px solid var(--pencil); }
}

/* ---------------------------------------------------------------- hero (home) */
.hero { position: relative; overflow: hidden; border-bottom: 2px solid var(--line-black); background: var(--sketchbook); }
.hero-top { padding-top: 20px; }
@media (min-width: 900px) { .hero-top { padding-top: 24px; } }
.hero-grid { display: grid; gap: 22px; padding-block: 22px 0; }
.hero-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-content: start; position: relative; z-index: 2; min-width: 0; }
.hero .display { font-size: clamp(50px, 13.2vw, 120px); }
/* desktop: the headline also scales with the viewport height, so the hero (and Bop) fit a laptop's first screen */
@media (min-width: 900px) { .hero .display { font-size: clamp(60px, min(7.4vw, 10.6svh), 108px); } }
.hero .display .line { display: block; }
.hero .display .w { display: inline-block; will-change: transform; }
.hero-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; }
.hero-stage { position: relative; height: clamp(270px, 76vw, 380px); margin-inline: -16px; cursor: pointer; overflow: hidden; -webkit-tap-highlight-color: transparent; }
/* Bop skates in from the stage's own left edge (clipped), never across the headline */
.hero-stage:focus-visible { outline-offset: -3px; }
.hero-frame { position: absolute; left: 50%; bottom: 0; height: 100%; max-width: 100%; transform: translateX(-50%); }
.hero-stage .bop-says { position: absolute; right: 8%; top: 10%; z-index: 3; opacity: 0; transform-origin: 0 100%; }
.crop { position: absolute; width: 18px; height: 18px; border: 0 solid var(--pencil); }
.crop.tl { top: 10px; left: 16px; border-top-width: 1.5px; border-left-width: 1.5px; }
.crop.tr { top: 10px; right: 16px; border-top-width: 1.5px; border-right-width: 1.5px; }
.stage-note { position: absolute; right: 44px; top: 12px; text-align: right; }
.hero-hint { position: absolute; left: 44px; top: 12px; max-width: 12em; }
/* phones: Bop skates in between the headline and the lead, inside the first screen */
@media (max-width: 899px) {
  .hero-grid { padding-bottom: 32px; }
  .hero-copy { display: contents; }
  .hero-copy > .kicker { order: 1; }
  .hero-copy > .display { order: 2; }
  .hero-grid > .hero-stage { order: 3; margin-block: -4px 2px; }
  .hero-copy > .lead { order: 4; }
  .hero-copy > .cta-row { order: 5; }
  .hero-copy > .hero-meta { order: 6; }
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; padding-block: 12px 0; min-height: min(700px, calc(100svh - 72px - 68px)); }
  .hero-copy { gap: 18px; padding-bottom: 40px; align-self: center; }
  .hero-stage { height: auto; margin-inline: 0; min-height: 460px; }
  .hero-frame { height: min(86%, 600px); }
  .stage-note { right: 30px; }
  .hero-hint { left: 30px; }
  .crop.tl { left: 0; }
  .crop.tr { right: 0; }
}
/* JS draws the hero on; until it starts, the finished frame shows (no JS, reduced motion, or a failed script). */
.hero-frame [data-bop-state='board-settle'] { opacity: 1; }
.hero-frame .bop-svg { opacity: 0; }
.js-motion .hero-frame .bop-state { opacity: 0; }
.js-motion .hero-frame .bop-svg { opacity: 1; }
.js-motion .hero-frame .bd { stroke-dashoffset: 1; }
.js-motion .hero-frame .bop-mover { transform: translateX(-130%); }
.js-motion .hero-frame .bop-ground { transform: scaleX(0); }
.js-motion .hero-hint { opacity: 0; }
.js-motion .hero .display .w { opacity: 0; }
.hero-done .hero-frame [data-bop-state='board-settle'] { opacity: 1 !important; }
.hero-done .hero-frame .bop-svg { opacity: 0 !important; }
.hero-done .hero-frame .bop-mover, .hero-done .hero-frame .bop-ground { transform: none !important; }
.hero-done .hero .display .w, .hero-done .hero-hint { opacity: 1 !important; }
/* reduced motion: four finished frames instead of the animation */
.hero-panels { display: none; }
@media (prefers-reduced-motion: reduce) {
  .hero-frame, .hero-hint, .hero-stage .bop-says { display: none; }
  .hero-stage, .hero-grid > .hero-stage { height: auto; min-height: 0; margin-inline: 0; margin-block: 0; padding: 0 0 32px; cursor: default; }
  .hero-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .crop, .stage-note { display: none; }
}
.hero-panel { margin: 0; border: 2px solid var(--line-black); background: var(--sticker-white); padding: 10px; display: grid; gap: 6px; }
.hero-panel img { width: 100%; aspect-ratio: 1; object-fit: contain; }
@media (min-width: 900px) and (prefers-reduced-motion: reduce) { .hero-stage { align-self: center; padding: 0; } }

/* ---------------------------------------------------------------- marquee: what you can make */
.marquee { border-bottom: 2px solid var(--line-black); background: var(--butter); overflow: hidden; padding-block: 14px; }
.marquee-track { display: flex; width: max-content; animation: marquee 40s steps(960, end) infinite; }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-row { display: flex; align-items: center; gap: 26px; padding-right: 26px; }
.mq-item { font: italic 900 clamp(26px, 3.4vw, 44px)/1 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -0.01em; white-space: nowrap; }
.mq-star { font: 600 clamp(18px, 2vw, 26px)/1 var(--font-mono); color: var(--line-black); }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none !important; } }

/* ---------------------------------------------------------------- scroll story: sketch → ink + colour → moves → remixes */
.story { border-bottom: 2px solid var(--line-black); }
.story-track { height: 440vh; position: relative; }
.story-stage { position: sticky; top: 66px; height: calc(100svh - 66px); display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; }
@media (min-width: 900px) { .story-stage { top: 74px; height: calc(100svh - 74px); grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-rows: none; align-items: center; } }
.story-art { position: relative; height: 100%; min-height: 0; display: grid; place-items: center; }
.story-frame { width: min(84%, 500px, 52svh); }
@media (min-width: 900px) { .story-art { order: 2; } .story-frame { width: min(84%, 560px, 70svh); } }
.story-frame .bop-feat { opacity: 0; }
.js-motion .story-frame .bd { stroke-dashoffset: 1; }
.story-copy { position: relative; display: grid; grid-template-rows: auto auto; gap: 14px; padding: 0 0 22px; align-content: start; }
@media (min-width: 900px) { .story-copy { padding: 0 48px 0 0; max-width: 560px; } }
/* the four chapters share one grid cell (stacked), so the block is as tall as the longest and nothing overlaps */
.chapter { grid-row: 2; grid-column: 1; display: grid; gap: 12px; align-content: start; opacity: 0; transform: translateY(8px); pointer-events: none; }
.chapter.is-on { opacity: 1; transform: none; pointer-events: auto; }
.chapter .h2 { font-size: clamp(32px, 4.2vw, 56px); }
.chapter p { max-width: 30em; margin: 0; }
.story-ticks { grid-row: 1; display: flex; gap: 6px; margin: 0; }
.story-ticks li { list-style: none; font: 500 11px/1 var(--font-mono); color: var(--graphite); padding: 6px 0; border-top: 2px solid var(--pencil); flex: 1; }
.story-ticks li.is-on { color: var(--line-black); border-top-color: var(--line-black); }
.story-ticks li.is-now { border-top-color: var(--marker-pink); }
/* chapter 4: Bop multiplies into his eight stickers */
.sticker-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; align-content: center; padding: 8px; pointer-events: none; }
@media (min-width: 900px) { .sticker-grid { gap: 12px; padding: 6% 4%; } }
.sticker { margin: 0; opacity: 0; transform: scale(1.15); }
.sticker img { width: 124%; max-width: none; height: auto; display: block; margin-left: -12%; }
.sticker:nth-child(3n + 1) { rotate: -5deg; }
.sticker:nth-child(3n + 2) { rotate: 4deg; }
/* reduced motion or no JS: four finished panels, no sticky scrolling */
.story-static { display: none; }
@media (prefers-reduced-motion: reduce) {
  .story-track { display: none; }
  .story-static { display: block; }
}
.no-js .story-track { display: none; }
.no-js .story-static { display: block; }
.story-panels { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 900px) { .story-panels { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.story-panel { border: 2px solid var(--line-black); padding: 12px; display: grid; gap: 8px; align-content: start; background: var(--sticker-white); }
@media (min-width: 900px) { .story-panel { padding: 16px; gap: 10px; } }
.story-panel .art { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; }
.story-panel .art > img { width: 92%; }
.mini-stickers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: 100%; }
.mini-stickers img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- three steps (inverse) */
.step-cards { list-style: none; display: grid; gap: 44px 20px; margin-top: 12px; }
@media (min-width: 900px) { .step-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.step-card { position: relative; border: 2px solid var(--sketchbook); padding: 22px 22px 24px; display: grid; gap: 12px; align-content: start; background: var(--line-black); }
.step-card .step-bop { position: absolute; right: -6px; top: -58px; width: 132px; }
.step-card .step-num { font: italic 900 56px/0.9 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--marker-pink); }
.step-card .h3 { padding-right: 96px; }
.step-card p { color: var(--pencil); margin: 0; }
.steps-next { margin-top: 28px; }

/* ---------------------------------------------------------------- doors */
.doors { display: grid; gap: 44px; }
@media (min-width: 900px) { .doors { grid-template-columns: 1fr 1fr; gap: 28px; } }
.door { position: relative; border: 2px solid var(--line-black); padding: clamp(22px, 3vw, 36px); display: grid; gap: 16px; align-content: start; background: var(--sticker-white); box-shadow: 0 0 0 0 var(--marker-pink); transition: transform var(--hover-ms) steps(2, end); }
.door:hover, .door:focus-within { box-shadow: 8px 7px 0 0 var(--marker-pink); transform: translate(-2px, -2px); }
.door .door-bop { position: absolute; right: 6px; top: -46px; width: 128px; }
@media (min-width: 900px) { .door .door-bop { width: 156px; top: -60px; } }
.door .h3 { padding-right: 110px; min-height: 2.2em; }
@media (min-width: 900px) { .door .h3 { padding-right: 140px; } }
.door-form { display: grid; gap: 10px; margin-top: 4px; }
.door-form .row { display: flex; gap: 10px; flex-wrap: wrap; }
.door-form input { flex: 1 1 200px; }

/* ---------------------------------------------------------------- Explore: "Made on CREATE" */
.section-head-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 20px 32px; max-width: none; }
.section-head-row > div:first-child { display: grid; gap: 18px; max-width: 760px; }
.filter-row { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--line-black); background: var(--sticker-white); }
.filter-row label { position: relative; cursor: pointer; }
.filter-row input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.filter-row span { display: block; padding: 12px 16px; font: 600 13px/1 var(--font-mono); border-right: 2px solid var(--line-black); }
.filter-row label:last-child span { border-right: 0; }
.filter-row input:checked + span { background: var(--line-black); color: var(--sketchbook); }
.filter-row input:focus-visible + span { outline: 3px solid var(--marker-pink); outline-offset: -3px; }
.explore-grid { list-style: none; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); }
.coin-card > a { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px 14px; align-items: center; padding: 14px; border: 2px solid var(--line-black); background: var(--sticker-white); text-decoration: none; color: var(--line-black); transition: transform var(--hover-ms) steps(2, end); }
.coin-card > a:hover, .coin-card > a:focus-visible { box-shadow: 6px 5px 0 0 var(--marker-pink); transform: translate(-2px, -2px); color: var(--line-black); }
.coin-img img, .coin-ph { width: 64px; height: 64px; border: 2px solid var(--line-black); object-fit: cover; display: grid; place-items: center; background: var(--butter); font: 900 30px var(--font-display); }
.coin-who { display: grid; gap: 2px; min-width: 0; }
.coin-who strong { font: 900 22px/1.1 var(--font-display); font-variation-settings: 'SOFT' 100; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.coin-stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; padding-top: 10px; border-top: 1.5px solid var(--pencil); margin: 0; }
.coin-stats dt { font: 500 10.5px/1.2 var(--font-mono); color: var(--graphite); }
.coin-stats dd { margin: 0; font: 900 22px/1.1 var(--font-display); }
.coin-meta { grid-column: 1 / -1; }
.empty-bop { display: grid; gap: 18px 28px; align-items: center; border: 2px dashed var(--line-black); padding: 22px; }
@media (min-width: 700px) { .empty-bop { grid-template-columns: 200px minmax(0, 1fr); padding: 28px 32px; } }
.empty-bop .empty-art { width: 180px; max-width: 100%; justify-self: center; }
.empty-line { font: italic 900 clamp(26px, 3vw, 40px)/1.1 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; letter-spacing: -0.01em; margin: 0 0 10px; max-width: 18em; }

/* ---------------------------------------------------------------- the board */
.board-grid { display: grid; gap: 20px; }
@media (min-width: 900px) { .board-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.board-col { border: 2px solid var(--line-black); background: var(--sticker-white); padding: 20px; display: grid; gap: 14px; align-content: start; }
.board-list { list-style: none; display: grid; gap: 0; }
.board-list li { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 10px; align-items: baseline; padding: 10px 0; border-bottom: 1.5px solid var(--pencil); }
.board-list li > :nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .rank { font: 600 12px/1 var(--font-mono); color: var(--marker-pink-deep); }
.board-list .status { font-size: 9.5px; }
.board-empty { font: italic 900 22px/1.2 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; margin: 0; }
.board-empty .status { font-style: normal; }

/* ---------------------------------------------------------------- forms */
.field { display: grid; gap: 7px; }
.field > label, .field > .label-row { font: 600 13px/1.3 var(--font-body); }
.field-hint { font: 500 11px/1.4 var(--font-mono); color: var(--graphite); }
.input, input[type='text'], input[type='url'], input[type='number'], input:not([type]), textarea, select { width: 100%; min-height: 48px; padding: 11px 13px; border: 2px solid var(--line-black); border-radius: 0; background: var(--sketchbook); color: var(--line-black); font: 400 16px/1.35 var(--font-body); -webkit-appearance: none; appearance: none; }
textarea { min-height: 120px; resize: vertical; }
.mono-input { font-family: var(--font-mono) !important; font-size: 14px !important; }
input::placeholder, textarea::placeholder { color: var(--graphite); opacity: 1; }
input[aria-invalid='true'], textarea[aria-invalid='true'] { border-color: var(--marker-pink-deep); box-shadow: 4px 3px 0 0 var(--marker-pink); }
.seg { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--line-black); }
.seg label { position: relative; cursor: pointer; }
.seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.seg span { display: block; padding: 9px 13px; font: 600 13px/1 var(--font-mono); border-right: 2px solid var(--line-black); }
.seg label:last-child span { border-right: 0; }
.seg input:checked + span { background: var(--line-black); color: var(--sketchbook); }
.seg input:focus-visible + span { outline: 3px solid var(--marker-pink); outline-offset: -3px; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 7px; font: 600 13px/1.3 var(--font-body); }
.check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; }
.check input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--line-black); flex: none; }

/* alerts and step logs */
.alert:empty { display: none; }
.alert { border: 2px solid var(--line-black); padding: 12px 14px; display: grid; gap: 10px; font-size: 15px; background: var(--sketchbook); }
.alert[data-kind='error'] { box-shadow: 5px 4px 0 0 var(--marker-pink); }
.alert[data-kind='info'] { border-style: dashed; }
.status-line { font-size: 14px; color: var(--graphite); margin: 0; }
.inverse .status-line { color: var(--pencil); }
.steps-log { list-style: none; display: grid; gap: 6px; font: 500 12px/1.4 var(--font-mono); color: var(--graphite); }
.steps-log li { display: flex; gap: 10px; align-items: center; }
.steps-log li::before { content: ''; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--pencil); flex: none; }
.steps-log li[data-s='active'] { color: var(--line-black); }
.steps-log li[data-s='active']::before { border-color: var(--line-black); animation: tick 0.5s steps(2, end) infinite; }
.steps-log li[data-s='done'] { color: var(--line-black); }
.steps-log li[data-s='done']::before { background: var(--line-black); border-color: var(--line-black); }
.steps-log li[data-s='error'] { color: var(--marker-pink-deep); }
.steps-log li[data-s='error']::before { background: var(--marker-pink); border-color: var(--marker-pink); }
@keyframes tick { 50% { background: var(--line-black); } }

/* ---------------------------------------------------------------- $CREATE split (inverse section) */
.split-wrap { display: grid; gap: 36px; }
.split-svg { width: 100%; height: auto; overflow: visible; display: block; }
.split-trunk, .split-branch { fill: none; stroke: var(--sketchbook); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.split-branch.b1 { stroke: var(--marker-pink); }
.split-dot { fill: var(--marker-pink); transform-box: fill-box; transform-origin: center; }
.split-pct { fill: var(--sketchbook); font: 900 34px var(--font-display); font-variation-settings: 'SOFT' 100; letter-spacing: -0.01em; }
.split-label { fill: var(--pencil); font: 500 16px var(--font-mono); }
.split-in-label { fill: var(--pencil); font: 500 16px var(--font-mono); }
.split-svg .b1 .split-pct { fill: var(--marker-pink); }
.split-mobile { display: grid; gap: 0; }
.split-desktop { display: none; }
@media (min-width: 760px) { .split-mobile { display: none; } .split-desktop { display: block; } }
.buckets { list-style: none; display: grid; gap: 14px; }
@media (min-width: 900px) { .buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.bucket { border: 2px solid var(--sketchbook); padding: 20px; display: grid; gap: 10px; align-content: start; }
.bucket-pct { font: 900 44px/1 var(--font-display); font-variation-settings: 'SOFT' 100; letter-spacing: -0.02em; }
.bucket.b1 .bucket-pct { color: var(--marker-pink); }
.bucket-name { font: 600 17px/1.2 var(--font-body); }
.bucket p { color: var(--pencil); font-size: 15px; margin: 0; }
.bucket-wallet { font-size: 13px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
/* mobile split: the same line, vertical */
.vsplit { position: relative; padding-left: 46px; display: grid; gap: 26px; }
.vsplit-line { position: absolute; left: 8px; top: 6px; bottom: 6px; width: 4px; background: var(--sketchbook); transform-origin: 50% 0; }
.vsplit-head { font: 500 13px/1.4 var(--font-mono); color: var(--pencil); }
.vsplit-item { position: relative; display: grid; gap: 2px; }
.vsplit-branch { position: absolute; left: -38px; top: 14px; width: 22px; height: 4px; background: var(--sketchbook); transform-origin: 0 50%; }
.vsplit-dot { position: absolute; left: -22px; top: 8px; width: 16px; height: 16px; border-radius: 50%; background: var(--marker-pink); }
.vsplit-item strong { font: 900 34px/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.vsplit-item:first-of-type strong { color: var(--marker-pink); }
.facts { display: grid; gap: 0; border-top: 2px solid currentColor; }
.facts > div { display: grid; gap: 4px 24px; padding: 14px 0; border-bottom: 1.5px solid var(--pencil); }
.inverse .facts > div { border-bottom-color: var(--graphite); }
@media (min-width: 760px) { .facts > div { grid-template-columns: 220px minmax(0, 1fr); align-items: baseline; } }
.facts dt { font: 500 12px/1.4 var(--font-mono); color: var(--graphite); }
.inverse .facts dt { color: var(--pencil); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts-2 { display: grid; gap: 0 40px; }
@media (min-width: 1000px) { .facts-2 { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------------------- CAST tiles */
.cast-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .cast-row { gap: 16px 18px; } }
.cast-tile { margin: 0; display: grid; gap: 8px; align-content: start; }
.cast-tile img { width: 100%; aspect-ratio: 1; border: 2px solid var(--line-black); background: var(--sketchbook); }
.cast-tile figcaption { display: grid; gap: 4px; }
.cast-note { margin: 16px 0 0; }
.faq-more { margin-top: 28px; }
.sample-tag { display: inline-block; justify-self: start; font: 600 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; padding: 4px 6px; background: var(--line-black); color: var(--sketchbook); }
.teaser-grid { display: grid; gap: 28px; }
@media (min-width: 1000px) { .teaser-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 56px; align-items: center; } }

/* ---------------------------------------------------------------- ledger teaser + ledger page */
.ledger-teaser { display: grid; gap: 0; border-top: 2px solid var(--line-black); }
.lt-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 0; border-bottom: 1.5px solid var(--pencil); align-items: baseline; }
.lt-row .v { font: 900 21px/1 var(--font-display); font-variation-settings: 'SOFT' 100; text-align: right; }
@media (min-width: 600px) { .lt-row .v { font-size: 26px; } }
.lt-empty { padding: 16px 0 0; }

/* ---------------------------------------------------------------- FAQ */
.faq { display: grid; border-top: 2px solid var(--line-black); }
.faq details { border-bottom: 1.5px solid var(--line-black); }
.faq summary { list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font: 900 clamp(21px, 2.2vw, 28px)/1.15 var(--font-display); font-variation-settings: 'SOFT' 100; letter-spacing: -0.01em; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 16px; font: 500 26px/1 var(--font-mono); }
.faq details[open] summary::after { content: '–'; }
.faq summary:hover { color: var(--marker-pink-deep); }
.faq .answer { padding: 0 0 22px; max-width: 46em; display: grid; gap: 12px; }
.faq .answer p { margin: 0; }
.faq-groups { display: grid; gap: 56px; }
.faq-group h2 { margin-bottom: 18px; }

/* ---------------------------------------------------------------- footer: links, then the short disclaimer and the © line only */
.site-footer { background: var(--line-black); color: var(--sketchbook); padding: 48px 0 32px; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px 48px; }
.footer-brand img { height: 34px; width: auto; }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 10px 22px; font-size: 15px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 36px 0 0; padding-top: 16px; border-top: 1.5px solid var(--graphite); font: 500 12px/1.6 var(--font-mono); color: var(--pencil); }

/* ---------------------------------------------------------------- Studio */
.studio-steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.step { border-top: 2px solid var(--line-black); padding-block: clamp(40px, 6vw, 72px); }
.step-head { display: grid; gap: 12px; margin-bottom: 28px; }
@media (min-width: 1000px) { .step-head { grid-template-columns: 200px minmax(0, 1fr); align-items: start; gap: 0 36px; } .step-head .step-body { grid-column: 2; } }
.step-num { font: 600 12px/1.6 var(--font-mono); color: var(--marker-pink-deep); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.step-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1000px) { .step-grid { grid-template-columns: 200px minmax(0, 1fr); gap: 0 36px; } .step-grid > .step-main { grid-column: 2; } }
.panel { border: 2px solid var(--line-black); background: var(--sketchbook); }
.panel-sec { padding: 18px; display: grid; gap: 14px; }
.panel-sec + .panel-sec { border-top: 1.5px solid var(--pencil); }
@media (min-width: 700px) { .panel-sec { padding: 22px 24px; } }
.tabs { display: flex; border: 2px solid var(--line-black); border-bottom: 0; }
.tabs button { flex: 1; min-height: 52px; background: var(--sketchbook); border: 0; border-right: 2px solid var(--line-black); font: 600 15px/1.2 var(--font-body); cursor: pointer; padding: 10px 12px; display: grid; gap: 4px; justify-items: center; }
.tabs button:last-child { border-right: 0; }
.tabs button[aria-selected='true'] { background: var(--line-black); color: var(--sketchbook); }
.tabs button .label { color: inherit; opacity: 0.8; }
.tab-panel { border: 2px solid var(--line-black); padding: 18px; display: grid; gap: 18px; }
@media (min-width: 700px) { .tab-panel { padding: 24px; } }
.two-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1000px) { .two-col { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; } }
.token-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: start; border: 2px solid var(--line-black); padding: 16px; }
@media (min-width: 700px) { .token-card { grid-template-columns: 120px minmax(0, 1fr); } }
.token-img { width: 100%; aspect-ratio: 1; border: 2px solid var(--line-black); background: var(--pencil); object-fit: cover; display: grid; place-items: center; font: 900 40px var(--font-display); }
.token-card h3 { font-size: 26px; }
.token-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.token-links { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 14px; }
.launch-panel { border: 2px dashed var(--line-black); padding: 18px; display: grid; gap: 14px; }
.checklist { list-style: none; display: grid; gap: 0; counter-reset: c; }
.checklist li { counter-increment: c; display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px 10px; padding: 10px 0; border-bottom: 1.5px solid var(--pencil); font-size: 15px; }
.checklist li::before { content: counter(c, decimal-leading-zero); font: 600 12px/1.6 var(--font-mono); color: var(--graphite); grid-row: span 2; }
.checklist strong { font-weight: 600; }
.checklist .muted { font-size: 14px; grid-column: 2; }
.project-bar { position: sticky; top: 64px; z-index: 30; background: var(--sketchbook); border-bottom: 2px solid var(--line-black); }
@media (min-width: 900px) { .project-bar { top: 72px; } }
.project-row { display: flex; gap: 12px; align-items: center; min-height: 56px; }
.project-row img, .project-row .ph-img { width: 36px; height: 36px; border: 2px solid var(--line-black); object-fit: cover; background: var(--pencil); flex: none; }
.project-row .who { display: grid; line-height: 1.2; min-width: 0; }
.project-row .who strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-row .jump { margin-left: auto; display: none; gap: 14px; }
@media (min-width: 900px) { .project-row .jump { display: flex; } }
.project-row .jump a { font: 500 12px/1 var(--font-mono); text-decoration: none; }
.swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
.swatch { position: relative; border: 2px solid var(--line-black); display: grid; grid-template-rows: 86px auto; }
.swatch:focus-within { outline: 3px solid var(--marker-pink); outline-offset: 2px; }
.swatch .fill { display: grid; align-content: end; padding: 8px 10px; font: 900 26px/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.swatch .meta { padding: 8px; display: grid; gap: 8px; border-top: 2px solid var(--line-black); font: 500 11px/1.35 var(--font-mono); }
.swatch-info { display: grid; gap: 2px; min-width: 0; overflow-wrap: anywhere; }
.swatch-info strong { font: 600 13px/1.25 var(--font-body); }
.swatch .swatch-pick { position: absolute; inset: 0 0 auto 0; width: 100%; height: 86px; opacity: 0; border: 0; padding: 0; cursor: pointer; }
.type-specimen { border: 2px solid var(--line-black); padding: 18px; display: grid; gap: 10px; overflow: hidden; }
.type-specimen .big { font-size: clamp(36px, 5vw, 60px); line-height: 1; overflow-wrap: anywhere; }
.captions { list-style: none; display: grid; gap: 8px; counter-reset: cap; }
.captions li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: center; counter-increment: cap; }
.captions li::before { content: counter(cap); font: 600 12px var(--font-mono); color: var(--graphite); text-align: right; }
.captions input { min-height: 42px; padding: 8px 11px; }
.kit-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; margin-top: 22px; }
@media (min-width: 1000px) { .kit-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 28px; } }
.kit-note { border-left: 4px solid var(--line-black); padding-left: 12px; margin: 0; }
ul.kit-note { list-style: none; display: grid; gap: 6px; }
.meme-picker { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .meme-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1100px) { .meme-picker { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.meme-choice { position: relative; border: 2px solid var(--line-black); background: var(--sketchbook); padding: 0; cursor: pointer; display: grid; text-align: left; }
.meme-choice canvas { width: 100%; aspect-ratio: 1; display: block; }
.meme-choice .meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 6px; padding: 7px 8px; border-top: 2px solid var(--line-black); font: 500 11px/1.2 var(--font-mono); }
.meme-choice .meta > .muted { white-space: nowrap; }
.meme-choice[aria-pressed='true'] { box-shadow: 6px 5px 0 0 var(--marker-pink); transform: translate(-2px, -2px); }
.meme-choice .picked { display: none; position: absolute; top: 6px; right: 6px; background: var(--sketchbook); }
.meme-choice.in-kit .picked { display: inline-block; }
.meme-editor { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; margin-top: 26px; }
@media (min-width: 1000px) { .meme-editor { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: 32px; align-items: start; } }
.meme-canvas-wrap { border: 2px solid var(--line-black); background: var(--pencil); }
.meme-canvas-wrap canvas { display: block; width: 100%; height: auto; }
.format-note { font-size: 13px; }
.stage-frame { border: 2px solid var(--line-black); background: var(--line-black); }
.viewfinder { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--line-black); overflow: hidden; }
.viewfinder.vf-square { aspect-ratio: 1; }
.viewfinder.vf-tall { aspect-ratio: 9 / 16; max-height: 78svh; margin-inline: auto; width: auto; }
.player-frame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.stage-meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 14px; padding: 12px 0 0; }
.stage-title { font: 600 16px/1.3 var(--font-body); }
.transport { display: flex; gap: 10px; align-items: center; padding: 10px 0; }
.transport input[type='range'] { flex: 1; accent-color: var(--line-black); min-height: 44px; padding: 0; border: 0; }
.tc { font: 500 12px/1 var(--font-mono); white-space: nowrap; }
.transport .icon-btn { flex: none; }
.stage-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.rec-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--marker-pink); display: inline-block; }
video.take { width: 100%; margin-top: 12px; border: 2px solid var(--line-black); background: var(--line-black); }
.code-view summary { cursor: pointer; padding: 10px 0; }
pre.code { margin: 0; padding: 16px; background: var(--line-black); color: var(--sketchbook); font-size: 12px; line-height: 1.55; overflow: auto; max-height: 420px; white-space: pre; }
.clip-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1100px) { .clip-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 32px; align-items: start; } }
.wallet-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.wallet-list { display: grid; gap: 8px; }
.wallet-list .btn { justify-content: space-between; }
.wname { display: inline-flex; gap: 10px; align-items: center; }
.wname img { width: 20px; height: 20px; }
.chip { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--line-black); padding: 6px 10px; font: 500 13px/1.2 var(--font-mono); }
.chip .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--pencil); }
.chip[data-state='live'] .dot { background: var(--marker-pink); }
.price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.price-row strong { font: 900 26px/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.kit-summary { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.kit-summary .sw { width: 22px; height: 22px; border: 2px solid var(--line-black); }
.callout-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
@media (min-width: 1000px) { .callout-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; } }
.kit-files { list-style: none; display: grid; gap: 0; border-top: 2px solid var(--line-black); font: 500 13px/1.4 var(--font-mono); }
.kit-files li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 14px; padding: 9px 0; border-bottom: 1.5px solid var(--pencil); }
.kit-files li > :first-child { overflow-wrap: anywhere; }
.kit-files li > :last-child { white-space: nowrap; text-align: right; }
@media (max-width: 480px) { .kit-files li { grid-template-columns: minmax(0, 1fr); } .kit-files li > :last-child { text-align: left; } }
.kit-files li.off { color: var(--graphite); }
.kit-files li.off > :first-child { text-decoration: line-through; }
textarea.posts { min-height: 280px; font: 400 14px/1.5 var(--font-mono); }
.reel { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.reel-card { border: 2px solid var(--line-black); background: var(--sketchbook); padding: 0; text-align: left; cursor: pointer; display: grid; transition: transform var(--hover-ms) steps(2, end); }
.reel-card:hover, .reel-card[aria-pressed='true'] { box-shadow: 6px 5px 0 0 var(--marker-pink); transform: translate(-2px, -2px); }
/* every poster whole, in its own aspect, in the same black gate (16:9 fills it; 1:1 and 9:16 sit centred) */
.reel-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: contain; display: block; background: var(--line-black); }
.reel-card .meta { display: grid; gap: 4px; padding: 12px 14px; border-top: 2px solid var(--line-black); }
.reel-card .name { font: 900 21px/1.1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.planned-list { list-style: none; display: grid; gap: 12px; }
@media (min-width: 900px) { .planned-list { grid-template-columns: repeat(4, minmax(0, 1fr)); } .planned-list strong { min-height: 2.2em; } }
.planned-list li { border: 2px dashed var(--line-black); padding: 16px; display: grid; gap: 8px; align-content: start; }
.planned-list .status { justify-self: start; }
.planned-list strong { font: 900 22px/1.1 var(--font-display); font-variation-settings: 'SOFT' 100; }

/* ---------------------------------------------------------------- ledger page */
.flow { display: grid; gap: 0; }
.flow-in { border: 2px solid var(--sketchbook); padding: 20px; display: grid; gap: 8px; }
.flow-in .big { font: 900 clamp(34px, 4vw, 52px)/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.flow-cols { display: grid; gap: 16px; margin-top: 0; }
@media (min-width: 1000px) { .flow-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } }
.flow-col { border: 2px solid var(--sketchbook); display: grid; align-content: start; }
.flow-col header { padding: 16px 18px; display: grid; gap: 6px; border-bottom: 2px solid var(--sketchbook); }
.flow-col header .pct { font: 900 38px/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.flow-col.b1 header .pct { color: var(--marker-pink); }
.flow-stat { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 12px 18px; border-bottom: 1.5px solid var(--graphite); align-items: baseline; }
.flow-stat:last-child { border-bottom: 0; }
.flow-note { margin-top: 14px; }
.flow-stat .v { font: 600 17px/1.2 var(--font-mono); text-align: right; }
.flow-connector { display: block; width: 100%; height: 56px; overflow: visible; }
.flow-connector path { fill: none; stroke: var(--sketchbook); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
.flow-connector .p1 { stroke: var(--marker-pink); }
.flow-connector-m { display: block; margin-left: 18px; width: 4px; height: 26px; background: var(--sketchbook); }
@media (min-width: 1000px) { .flow-connector-m { display: none; } }
@media (max-width: 999px) { .flow-connector { display: none; } }
.activity { list-style: none; display: grid; border-top: 2px solid var(--line-black); }
.activity li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px 16px; padding: 14px 0; border-bottom: 1.5px solid var(--pencil); }
@media (min-width: 800px) { .activity li { grid-template-columns: 170px minmax(0, 1fr) auto; align-items: start; } }
.activity .kind { display: grid; gap: 2px; align-content: start; font: 600 11px/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: 0.04em; }
.activity .kind .when { font-weight: 500; color: var(--graphite); text-transform: none; letter-spacing: 0; }
.activity .amt { font: 600 15px/1.3 var(--font-mono); text-align: left; }
@media (min-width: 800px) { .activity .amt { text-align: right; } }
.empty-state { border: 2px dashed var(--line-black); padding: 24px; display: grid; gap: 12px; justify-items: start; }
.empty-state .h4 { font-size: 26px; }
.table-wrap { overflow-x: auto; }
table.plain { width: 100%; border-collapse: collapse; font-size: 14px; }
table.plain th, table.plain td { text-align: left; padding: 10px 8px; border-bottom: 1.5px solid var(--pencil); vertical-align: top; }
table.plain th { font: 500 11px/1.4 var(--font-mono); color: var(--graphite); }

/* ---------------------------------------------------------------- CAST page */
.cast-top { display: grid; gap: 28px; }
@media (min-width: 1000px) {
  .cast-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px; align-items: start; }
  /* The sheet stays in view while the (taller) mint panel scrolls past it. */
  .cast-top > figure { position: sticky; top: 96px; }
}
.cast-hero { position: relative; border: 2px solid var(--line-black); background: var(--sketchbook); margin: 0; }
.cast-hero img { display: block; width: 100%; }
.cast-hero .sample-tag { position: absolute; top: 10px; left: 10px; }
.cast-proposed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.cast-proposed-grid img { width: 100%; border-right: 1.5px solid var(--pencil); border-bottom: 1.5px solid var(--pencil); }
.cast-hero-cap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; margin-top: 10px; }
.mint-price-line { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; margin: 0; }
.mint-price-line strong { font: 900 30px/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.mint-clock { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.mint-count { display: grid; gap: 8px; }
.mint-count-num { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.mint-count-num strong { font: 900 30px/1 var(--font-display); }
.mint-count-bar { width: 100%; height: 6px; }
.tbar-bg { fill: var(--pencil); }
.tbar-fg { fill: var(--line-black); }
.mint-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0; }
.mint-facts dt { font: 500 11px/1.4 var(--font-mono); color: var(--graphite); }
.mint-facts dd { margin: 2px 0 0; font-size: 15px; }
.result-grid { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
.result-frame { aspect-ratio: 1; }
/* the engine's SVG, drawn in an <img> (no canvas, no pixel scaling) */
.cast-frame { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--sketchbook); }
.lab-stage .cast-frame { cursor: pointer; }
.lab-tag { position: absolute; left: 8px; bottom: 8px; background: var(--line-black); color: var(--sketchbook); padding: 4px 6px; font-size: 10px; }
.seed-steps { list-style: none; display: grid; gap: 16px; }
@media (min-width: 900px) { .seed-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }
.seed-steps li { border-top: 2px solid var(--line-black); padding-top: 14px; display: grid; gap: 8px; align-content: start; }
.seed-steps strong { font: 900 22px/1.15 var(--font-display); font-variation-settings: 'SOFT' 100; }
.seed-details { margin-top: 28px; border: 2px solid var(--line-black); padding: 0 18px; }
.seed-details summary { cursor: pointer; padding: 14px 0; font-weight: 600; }
.formula { background: var(--line-black); color: var(--sketchbook); padding: 14px; font-size: 12px; margin: 0 0 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lab { display: grid; gap: 24px; }
@media (min-width: 1000px) { .lab { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 36px; align-items: start; } .lab-head { grid-column: 1 / -1; } .lab-stage { grid-row: span 2; } .lab .lab-traits { grid-column: 2; } }
.lab > * { min-width: 0; }
.lab-seed { overflow-wrap: anywhere; word-break: break-all; font-family: var(--font-mono); font-size: 12px; }
.lab-stage .viewfinder { background: var(--sketchbook); border: 2px solid var(--line-black); }
.lab-transport { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.lab-form { display: grid; gap: 8px; align-content: start; }
.lab-row { display: grid; grid-template-columns: 1fr 120px; gap: 12px; }
.lab-traits { grid-column: 1 / -1; }
.facts.lab-traits > div { grid-template-columns: 112px minmax(0, 1fr); align-items: baseline; padding: 10px 0; }
.lab-off { border: 2px dashed var(--line-black); padding: 20px; display: grid; gap: 10px; grid-column: 1 / -1; }
.verify-grid { display: grid; gap: 24px; }
@media (min-width: 1000px) { .verify-grid { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.7fr); gap: 32px; align-items: start; } }
.verify-input { display: flex; gap: 10px; }
.verify-input input { flex: 1; min-width: 0; }
.verify-frame { background: var(--sketchbook); border: 2px solid var(--line-black); }
.check-list { list-style: none; display: grid; gap: 10px; font-size: 14px; padding: 0; }
.check-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; }
.check-list .check-mark { font-weight: 700; line-height: 1.45; }
.check-list li[data-ok='no'] .check-mark { color: var(--marker-pink-deep); }
.check-list li[data-ok='skip'] .check-mark { color: var(--graphite); }
.check-list .check-text { min-width: 0; line-height: 1.45; }
.check-list .check-text strong { display: block; font-weight: 600; }
.check-list .check-detail { display: block; font: 12px/1.5 var(--font-mono); color: var(--graphite); overflow-wrap: anywhere; }
.check-list li[data-ok='no'] .check-detail { color: var(--marker-pink-deep); }
.trait-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.trait-card { border: 2px solid var(--line-black); padding: 14px; }
.trait-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.trait-list { list-style: none; display: grid; gap: 4px; font-size: 13px; }
.trait-list li { display: grid; grid-template-columns: minmax(0, 1fr) 70px 52px; gap: 8px; align-items: center; }
.tbar { width: 100%; height: 4px; }
.tp { font: 500 11px var(--font-mono); text-align: right; }
.key-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; padding: 0; }
@media (min-width: 560px) { .key-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.key-tile strong { font: 900 16px/1.15 var(--font-display); font-variation-settings: 'SOFT' 100; }
.ones-note { margin: 22px 0 0; }
.key-tile { display: grid; gap: 6px; }
.key-tile img, .key-ph { width: 100%; aspect-ratio: 1; border: 2px solid var(--line-black); }
.key-ph { border-style: dashed; background: var(--sketchbook); }
.key-tile img { background: var(--sketchbook); }
.key-tile[data-picked] img { box-shadow: 7px 6px 0 0 var(--marker-pink); }

/* ---------------------------------------------------------------- 404 */
.nf { display: grid; gap: 28px; align-items: center; padding-block: clamp(48px, 8vw, 120px); }
@media (min-width: 900px) { .nf { grid-template-columns: minmax(0, 1fr) 380px; } }
.nf-art { width: min(340px, 80%); justify-self: center; display: grid; justify-items: center; gap: 4px; }
.nf-art .bop-says-static { margin-top: -12px; rotate: -3deg; }

/* ---------------------------------------------------------------- page heads with Bop (Studio, ledger empty states) */
.page-head-row { display: grid; gap: 20px; align-items: end; }
@media (min-width: 900px) { .page-head-row { grid-template-columns: minmax(0, 1fr) 250px; gap: 40px; } }
.page-head-row > div { display: grid; gap: 20px; }
.page-bop { display: none; }
@media (min-width: 900px) { .page-bop { display: grid; justify-items: center; gap: 0; } .page-bop .bop-says-static { margin-top: -10px; rotate: 3deg; font-size: 20px; } }
.empty-state.has-bop { grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 700px) { .empty-state.has-bop { grid-template-columns: 150px minmax(0, 1fr); gap: 12px 28px; } }
.empty-state .empty-art { width: 150px; }
.empty-state.has-bop > div { display: grid; gap: 12px; }

/* ---------------------------------------------------------------- /timeline (optional feature; off while timeline.json has no posts)
   A strip of film: Line Black with sketchbook sprocket holes down both edges, one frame per take. Filtering works
   without JavaScript (radio inputs + :has). */
.tl-row { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.tl-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 560px; border: 2px solid var(--line-black); margin: 8px 0 0; }
.tl-stats > div { display: grid; gap: 6px; padding: 14px 16px; }
.tl-stats > div + div { border-left: 2px solid var(--line-black); }
.tl-stats dd { margin: 0; order: -1; font: 900 clamp(34px, 6vw, 52px)/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.tl-prompt { padding-top: 0; }
.script-card { border: 2px solid var(--line-black); padding: clamp(18px, 3vw, 30px); display: grid; gap: 14px; }
.script-slate { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; }
.script-text { margin: 0; padding: 16px 18px; background: var(--line-black); color: var(--sketchbook); font: 400 clamp(14px, 1.8vw, 16px)/1.65 var(--font-mono); overflow-wrap: anywhere; }
.script-text::before { content: '> '; color: var(--marker-pink); }
.tl-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 18px; padding: 0; border: 0; min-width: 0; }
.tl-radio { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.tl-chip { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; border: 2px solid var(--line-black); font: 600 12px/1 var(--font-mono); cursor: pointer; user-select: none; }
.tl-radio:checked + .tl-chip { background: var(--line-black); color: var(--sketchbook); }
.tl-radio:focus-visible + .tl-chip { outline: 3px solid var(--marker-pink); outline-offset: 2px; }
.tl-status { flex: 1 1 100%; }
.tl:has(#tl-showreel:checked) .strip .take:not([data-prompt='showreel']) { display: none; }
.strip { position: relative; list-style: none; display: grid; gap: 12px; margin: 0; padding: 14px 34px; background: var(--line-black); }
.strip::before, .strip::after { content: ''; position: absolute; top: 14px; bottom: 14px; border-left: 10px dashed var(--sketchbook); }
.strip::before { left: 12px; }
.strip::after { right: 12px; }
@media (max-width: 480px) { .strip { padding-inline: 26px; } .strip::before { left: 8px; } .strip::after { right: 8px; } .strip::before, .strip::after { border-left-width: 8px; } }
.strip .take { padding: 0; }
.take-card { position: relative; display: grid; gap: 12px; padding: clamp(16px, 3vw, 24px); background: var(--sketchbook); min-width: 0; transition: transform var(--hover-ms) steps(2, end); }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .take-card:hover, .take-card:focus-within { transform: translate(-3px, -3px); box-shadow: 7px 6px 0 0 var(--marker-pink); }
}
.take-slate { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; }
.take-no { color: var(--marker-pink-deep); }
.take-time { display: inline-flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; }
.take-tc { font: 600 clamp(15px, 2.2vw, 19px)/1 var(--font-mono); font-variant-numeric: tabular-nums; }
.take-who { margin: 0; font: 600 16px/1.35 var(--font-body); overflow-wrap: anywhere; }
.take-handle { font: 400 13px/1.35 var(--font-mono); color: var(--graphite); }
.take-quote { margin: 0; padding-left: 14px; border-left: 4px solid var(--line-black); }
.take-quote p { margin: 0; font-size: clamp(15px, 2vw, 17px); line-height: 1.6; overflow-wrap: anywhere; }
.take-foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.take-chips { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.take-chip, .take-tag { display: inline-block; padding: 4px 7px 3px; font: 600 10.5px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.05em; border: 1.5px solid var(--line-black); }
.take-chip { background: var(--line-black); color: var(--sketchbook); }
.take-link { font: 600 12px/1 var(--font-mono); min-height: 36px; display: inline-flex; align-items: center; }
.tl-note { margin-top: 24px; max-width: 72ch; }

/* ---------------------------------------------------------------- reduced motion everywhere */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0ms !important; scroll-behavior: auto !important; }
}

/* ---------------------------------------------------------------- home: the live room teaser (built while /live is on) */
.live-teaser-art { margin: 0; display: grid; gap: 0; }
.live-teaser-screen { display: grid; gap: 6px; padding: clamp(18px, 3vw, 32px); background: var(--line-black); color: var(--sketchbook); border: 2px solid var(--line-black); box-shadow: 6px 6px 0 0 var(--marker-pink); }
.live-teaser-tag { justify-self: start; font: 600 12px/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; background: var(--marker-pink); color: var(--line-black); padding: 5px 7px; }
.live-teaser-title { font: 900 clamp(34px, 5vw, 56px)/1 var(--font-display); font-variation-settings: 'SOFT' 100; }
.live-teaser-title em { color: var(--marker-pink); font-style: normal; }
.live-teaser-note { font: 400 12px/1.4 var(--font-mono); color: var(--pencil); }
.live-teaser-floor { display: flex; justify-content: center; align-items: flex-end; gap: 0; margin-top: -8px; padding: 0 8px; border-bottom: 2px solid var(--line-black); }
.live-teaser-floor img { width: min(30%, 170px); height: auto; margin-inline: -2%; transform: translateY(6.3%); } /* feet on the line (sprite ground row) */