/* Periferal Arcade: the commercials' pixel brand (commercials/brand/README.md) as a web page.
   Night background, navy panels, ink outlines, hard pixel shadows, stepped gradients only. */

/* Periferal Pixel: the logo's letters drawn out to a full alphabet (scripts/periferal-pixel.py). */
@font-face { font-family: "Periferal Pixel"; src: url("../assets/fonts/periferal-pixel.woff?v=2") format("woff"); font-display: swap; }

:root {
  /* Darks and UI */
  --ink: #05060d; --night: #0b1024; --navy: #151d3b; --slate: #28325a; --steel: #4c5784;
  --fog: #8a94bf; --cloud: #cdd4ef; --white: #f5f7ff;
  /* Logo */
  --tangerine: #ff8a4c; --soot: #16120f;
  /* Pastels and neons (the sweep) */
  --ice: #a6f2fc; --frost: #98cdf7; --lavender: #d4c4f7; --blush: #fcc6e0; --rose: #f7a0b0; --peach: #ffc3a8;
  --cyan: #2ecff4; --sky: #5fb2f7; --peri: #7d93ee; --violet: #9a80ee; --mauve: #c27abb; --pink: #f58bc8; --coral: #ff8e78;
  /* Deep shades */
  --cyanDk: #1386c0; --blueDk: #3550c4; --violetDk: #5b3bb5; --pinkDk: #b8408c; --red: #e0435a;
  --teal: #0d556e; --aqua: #2db9c7; --plum: #45244f;
  /* Arcade accents */
  --gold: #ffd166; --amber: #e88a2a; --mint: #5ef0a8; --green: #1f9a6c; --clay: #d97757;

  /* The Periferal sweep, in hard steps. */
  --sweep: linear-gradient(90deg,
    var(--cyan) 0 14.3%, var(--sky) 14.3% 28.6%, var(--peri) 28.6% 42.9%, var(--violet) 42.9% 57.1%,
    var(--mauve) 57.1% 71.4%, var(--pink) 71.4% 85.7%, var(--coral) 85.7% 100%);

  --px: 4px;
  --head: "Periferal Pixel", "Press Start 2P", "Silkscreen", ui-monospace, monospace;
  --label: "Silkscreen", "Press Start 2P", ui-monospace, monospace;
  --body: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
/* Scrollbars, in the cabinet's style: a dark well edged in slate, a square tangerine block for the thumb with a hard
   ink edge and a pixel shadow, gold under the pointer. Firefox, which has no such parts, gets the two colours. */
::-webkit-scrollbar { width: 14px; height: 14px; }
::-webkit-scrollbar-track { background: var(--ink); box-shadow: inset 2px 0 0 var(--slate); }
::-webkit-scrollbar-track:horizontal { box-shadow: inset 0 2px 0 var(--slate); }
::-webkit-scrollbar-thumb { background: var(--tangerine); border: 2px solid var(--ink); box-shadow: inset -2px -2px 0 rgba(5, 6, 13, .35), inset 2px 2px 0 rgba(255, 255, 255, .25); }
::-webkit-scrollbar-thumb:hover { background: var(--gold); }
::-webkit-scrollbar-thumb:active { background: var(--amber); }
::-webkit-scrollbar-corner { background: var(--ink); }
@supports not selector(::-webkit-scrollbar) { html { scrollbar-color: var(--tangerine) var(--ink); } }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  margin: 0;
  background: var(--night);
  color: var(--cloud);
  font: 400 16px/1.65 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; }
.px { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: inherit; }
b, strong { color: var(--white); font-weight: 600; }
p { margin: 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; background: var(--gold); color: var(--ink); padding: 10px 14px; font-family: var(--label); text-decoration: none; }
.skip:focus { top: 12px; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

/* CRT scanlines: hard 1px stripes, very faint. */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 90;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(5, 6, 13, .14) 2px 3px);
  mix-blend-mode: multiply;
}

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 24px; }
section { position: relative; padding: 112px 0; }

/* ---------- Type ---------- */
h1, h2, h3 { font-family: var(--head); font-weight: 400; color: var(--white); margin: 0; letter-spacing: 0; }
h1 { font-size: clamp(24px, 3.5vw, 44px); line-height: 1.36; }
h1 .line { display: inline-block; }
h2 { font-size: clamp(18px, 2.6vw, 32px); line-height: 1.45; margin-top: 22px; }
h3 { font-size: clamp(13px, 1.25vw, 16px); line-height: 1.6; }
.lead { font-size: 17px; color: var(--cloud); max-width: 640px; margin-top: 20px; }

/* Highlighted words: the pitch version's yellow-to-orange gradient, in hard steps. */
.sweep-text {
  background: linear-gradient(90deg, #ffc46b 0 20%, #ffad5e 20% 40%, var(--tangerine) 40% 60%, #f77a52 60% 80%, #ef6a5a 80% 100%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  filter: drop-shadow(3px 3px 0 #7a2c1a);
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--label); font-size: 14px; text-transform: uppercase; color: var(--fog); letter-spacing: .04em;
}
.lv {
  display: inline-grid; place-items: center; min-width: 30px; height: 26px; padding: 0 6px;
  background: var(--tangerine); color: var(--soot); font-family: var(--head); font-size: 10px;
  box-shadow: 0 0 0 2px var(--ink), 3px 3px 0 2px var(--ink); text-transform: none;
}
.lbl { font-family: var(--label); text-transform: uppercase; color: var(--fog); font-size: 13px; letter-spacing: .04em; }
.head { max-width: 860px; }
.head.center { margin: 0 auto; text-align: center; }
.head.center .lead { margin-left: auto; margin-right: auto; }
/* On phones a centred eyebrow stays on one line beside its level, a size smaller. */
@media (max-width: 640px) { .head.center .eyebrow { font-size: 12px; letter-spacing: .02em; } }

/* ---------- Pixel boxes and buttons ---------- */
.panel {
  background: var(--navy);
  border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--slate), 6px 6px 0 0 var(--ink);
}
.btn {
  --bg: var(--slate); --hi: var(--steel); --lo: var(--ink); --fg: var(--white);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 18px; min-height: 48px;
  font: 400 12px/1.2 var(--head); text-transform: uppercase; text-decoration: none; letter-spacing: .02em;
  color: var(--fg); background: var(--bg); border: 2px solid var(--ink); cursor: pointer;
  box-shadow: inset 3px 3px 0 0 var(--hi), inset -3px -3px 0 0 rgba(5, 6, 13, .45), 4px 4px 0 0 var(--ink);
  transition: transform 60ms steps(1), box-shadow 60ms steps(1);
}
.btn:hover { --bg: var(--steel); --hi: var(--fog); }
.btn:active { transform: translate(4px, 4px); box-shadow: inset 3px 3px 0 0 var(--hi), inset -3px -3px 0 0 rgba(5, 6, 13, .45), 0 0 0 0 var(--ink); }
.btn-go { --bg: var(--tangerine); --hi: #ffc19c; --fg: var(--ink); }
.btn-go:hover { --bg: #ffa06b; --hi: #ffe0cc; }
.btn-ghost { --bg: var(--navy); --hi: var(--slate); }
.btn-big { font-size: 14px; padding: 18px 24px; }
.btn[disabled] { opacity: .6; cursor: wait; }

.blink { animation: blink 1.1s steps(1) infinite; }
.btn .blink { animation: none; }
.btn .tri { animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.chip, .pill, .tag {
  display: inline-block; font-family: var(--label); font-size: 13px; text-transform: uppercase; line-height: 1;
  padding: 7px 9px 6px; border: 2px solid var(--ink); box-shadow: 0 0 0 2px var(--slate);
  color: var(--c, var(--cloud)); background: var(--night); white-space: nowrap;
}
.pill.red { color: var(--white); background: var(--red); box-shadow: 3px 3px 0 0 var(--ink); }
.tag { font-size: 12px; box-shadow: none; background: var(--ink); }
.tag.agent { color: var(--clay); }

/* ---------- HUD header ---------- */
.hud {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink);
  border-bottom: 4px solid var(--slate);
}
.hud::after { /* stepped sweep line under the HUD */
  content: ""; position: absolute; left: 0; right: 0; bottom: -8px; height: 4px; background: var(--sweep);
}
.hud .wrap { display: flex; align-items: center; gap: 18px; height: 64px; }
.lockup { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.lockup .word { height: 22px; width: auto; }
.links { display: flex; gap: 4px; margin-left: auto; }
.links a { font-family: var(--label); text-transform: uppercase; font-size: 14px; color: var(--fog); text-decoration: none; padding: 8px 10px; }
.links a:hover { color: var(--white); background: var(--navy); }
/* The score: the coin and "SCORE" on top, the number under them. */
.score { display: grid; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 4px 6px; font-family: var(--head); font-size: 10px; color: var(--fog); }
.score b { grid-column: 1 / -1; }
/* A small dotted divider between the score and the Join button: square pixel dots. */
/* The score sits at the far right of the HUD, after "Join waitlist", a dotted divider on its left. */
.score { padding-left: 18px; background: repeating-linear-gradient(180deg, var(--steel) 0 2px, transparent 2px 6px) left center / 2px 100% no-repeat; }
.score b { color: var(--gold); font-weight: 400; min-width: 6ch; }
.score img { width: 12px; height: 12px; }
.score.bump img { animation: coin-spin .4s steps(4); }
@keyframes coin-spin { 25% { transform: scaleX(.5); } 50% { transform: scaleX(.1); } 75% { transform: scaleX(.5); } }
.hud .btn { min-height: 40px; padding: 10px 14px; font-size: 10px; }
/* The menu button (phones and tablets): a pixel fast-forward arrow pointing down; open, it snaps into a
   pixel ×. The menu drops below the HUD. */
.menu-btn { display: none; position: relative; flex: none; width: 40px; height: 40px; padding: 0; cursor: pointer; border: 0;
  background: url(../assets/arcade/ff-down-white.svg) center / 18px auto no-repeat; image-rendering: pixelated; }
.menu-btn[aria-expanded="true"] { background-image: none; }
.menu-btn[aria-expanded="true"]::after { content: "×"; position: absolute; inset: 0; display: grid; place-items: center; font: 400 16px/1 var(--head); color: var(--white); }
.mobile-menu { position: absolute; left: 0; right: 0; top: calc(100% + 8px); display: grid; padding: 8px 24px 20px; background: var(--ink); border-bottom: 4px solid var(--slate); box-shadow: 0 10px 0 0 rgba(5, 6, 13, .5); animation: menu-drop .2s steps(3); }
@keyframes menu-drop { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
.mobile-menu[hidden] { display: none; }
.mobile-menu a:not(.btn) { padding: 14px 4px 12px; font: 400 16px/1 var(--label); text-transform: uppercase; color: var(--cloud); text-decoration: none; border-bottom: 2px dashed var(--slate); }
.mobile-menu a:not(.btn):hover, .mobile-menu a:not(.btn):focus-visible { color: var(--gold); outline: none; }
.mobile-menu a:last-child { border-bottom: 0; }
.mobile-menu a:not(.btn):hover::before, .mobile-menu a:not(.btn):focus-visible::before { content: "▶ "; }

.logo-build { position: relative; width: 100%; aspect-ratio: 1; }
.logo-build img { position: absolute; inset: 0; width: 100%; height: 100%; }
.logo-build i {
  position: absolute; display: block;
  left: calc(var(--x) / 40 * 100%); top: calc(var(--y) / 40 * 100%);
  width: calc(var(--w) / 40 * 100%); height: calc(6 / 40 * 100%);
  background: var(--soot);
}

/* ---------- Hero ---------- */
.hero { padding: 88px 0 0; overflow-x: clip; } /* the demo below sits as far under the button as the button under the text */
.stars {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(var(--steel) 1px, transparent 0), radial-gradient(var(--slate) 1px, transparent 0);
  background-size: 64px 64px, 40px 40px; background-position: 8px 12px, 28px 30px;
  image-rendering: pixelated; opacity: .7;
}
.hero .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "go"; gap: 48px; align-items: center; }
.hero-copy { grid-area: copy; justify-self: center; text-align: center; } /* centred, over the button, as on the classic page */
.hero-copy .lead { margin-inline: auto; }
.hero .lead .say { justify-content: center; }
.hero-go { grid-area: go; }
.hero-go .actions { margin-top: 0; }
/* Under the text, room for a line (1.65em, and .35em above it) before the button's own 36px (padding, so it doesn't
   merge with that margin). */
.hero .lead { font-size: 18px; margin-top: 28px; padding-bottom: 2em; }
/* The greeting on its own line, then the pitch. */
.hero .lead .hello { display: flex; gap: .45em; align-items: baseline; width: fit-content; margin-bottom: 14px; padding-bottom: 12px; color: var(--white); }
/* Periferal's own emoji, in pixels: the logo's tile with a glyph drawn in its rounded bars. The hand waves, the question mark's dot pulses, the arrow nudges. */
.emo { display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -.2em; }
.emo { shape-rendering: crispEdges; }
.emo rect { rx: 0; }
.emo .bg { fill: var(--tangerine); }
.emo .g { fill: var(--soot); }
.emo.wave .g { transform-origin: 32px 52px; animation: emo-wave 2.4s steps(1) infinite; }
.emo.point .g { animation: emo-nudge 1.6s steps(1) infinite; }
.emo.ask .dot { transform-origin: 32px 48px; animation: emo-pulse 1.8s steps(1) infinite; }
@keyframes emo-wave { 0%, 60%, 100% { rotate: 0deg; } 10%, 30% { rotate: 14deg; } 20%, 40% { rotate: -8deg; } }
@keyframes emo-nudge { 50% { translate: 4px 0; } }
@keyframes emo-pulse { 0%, 50%, 100% { scale: .7; } 25%, 75% { scale: 1.25; } }
@media (prefers-reduced-motion: reduce) { .emo .g, .emo .dot { animation: none; } }
/* Each line hangs after its emoji. */
.hero .lead .say { display: flex; gap: .45em; align-items: baseline; }
.hero .lead .say .emo, .hero .lead .hello .emo { translate: 0 .2em; }
.hero .lead .say + .say { margin-top: .35em; }
/* The first line, the one that says what it is, bright; the one after it, grey. */
.hero .lead .say:first-child { color: var(--white); }
.hero .lead .say + .say { color: var(--fog); }
/* The name: the logo's own pixel wordmark, at the height of the text's capitals. */
.lead .word { display: inline-block; width: auto; height: .72em; vertical-align: 0; }
.band .lead .word { filter: brightness(0); opacity: .85; } /* in the band's ink, on the orange */
.actions { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 36px; }
/* A dashed pixel rule through "Press start", at its middle, across the button's row: stepping in from both ends. */
.hero { isolation: isolate; }
.hero .actions { position: relative; }
.hero .actions::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(50% - 1px); height: 2px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--slate) 0 6px, transparent 6px 10px); opacity: .6;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 54px, rgba(0, 0, 0, .33) 54px 107px, rgba(0, 0, 0, .66) 107px 160px, #000 160px calc(100% - 160px), rgba(0, 0, 0, .66) calc(100% - 160px) calc(100% - 107px), rgba(0, 0, 0, .33) calc(100% - 107px) calc(100% - 54px), transparent calc(100% - 54px));
  mask-image: linear-gradient(90deg, transparent 0 54px, rgba(0, 0, 0, .33) 54px 107px, rgba(0, 0, 0, .66) 107px 160px, #000 160px calc(100% - 160px), rgba(0, 0, 0, .66) calc(100% - 160px) calc(100% - 107px), rgba(0, 0, 0, .33) calc(100% - 107px) calc(100% - 54px), transparent calc(100% - 54px));
}
/* Builders (a 🧑‍💻, in pixels) flying along the rule into the button from both ends of its row (--from-r, --from-l,
   set by main.js), in steps, dimmed, gone behind the button. Now and then one carries a flag over their screen. */
.hero .dock { position: relative; display: inline-flex; }
.hero .dock .btn { position: relative; z-index: 1; }
.flyer { position: absolute; top: 50%; width: 24px; height: 24px; margin-top: -12px; opacity: 0; pointer-events: none; animation: fly-r 3.2s steps(32) both; }
.flyer.r { left: 100%; }
.flyer .coder { display: block; width: 100%; height: 100%; overflow: visible; }
.flyer .coder .fill { fill: var(--tangerine); }
.flyer .coder .pc { fill: var(--ink); }
/* Now and then a bus, a whole team, rolls in along the same rule: wider, in the same pixels, its lamp gold. */
.flyer.bus { width: 34px; height: 22px; margin-top: -11px; }
.flyer .coder .lamp { fill: var(--gold); }
.flyer .coder .cloth { animation: flag-wave .6s steps(1) infinite; }
@keyframes fly-r { from { translate: var(--from-r, 200px) 0; opacity: 0; } 30%, 80% { opacity: .45; } to { translate: 0 0; opacity: 0; } }
/* From the left: mirrored, so they face the button too. */
.flyer.l { right: 100%; animation-name: fly-l; }
.flyer.l .coder { scale: -1 1; }
@keyframes fly-l { from { translate: calc(-1 * var(--from-l, 200px)) 0; opacity: 0; } 30%, 80% { opacity: .45; } to { translate: 0 0; opacity: 0; } }
/* "Press start" stands in the middle of its row, the rule running through it from both sides; the line under it too. */
.hero .actions { justify-content: center; }
.hero .insert { text-align: center; }
@keyframes flag-wave { 50% { translate: 0 1px; } }
@media (prefers-reduced-motion: reduce) { .flyers { display: none; } }
.insert { margin-top: 22px; font-family: var(--label); font-size: 13px; color: var(--gold); text-transform: uppercase; }

.arena { position: relative; aspect-ratio: 1; max-width: 520px; width: 100%; justify-self: center; }
.links-px { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.dash path { fill: none; stroke-width: 1; stroke-dasharray: 2.4 1.6; }
.links-px .dash path:nth-child(1) { stroke: var(--cyan); }
.links-px .dash path:nth-child(2) { stroke: var(--violet); }
.links-px .dash path:nth-child(3) { stroke: var(--sky); }
.links-px .dash path:nth-child(4) { stroke: var(--coral); }
.links-px .dash path { animation: march 1.2s steps(5) infinite; }
@keyframes march { to { stroke-dashoffset: -5; } }
.who { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 10px; }
.who.r { left: auto; right: var(--x); text-align: right; }
.who.b { top: auto; bottom: var(--y); }
.who > span { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.who.r > span { align-items: flex-end; }
.who b { font-family: var(--head); font-size: 10px; font-weight: 400; }
.who .tag { font-style: normal; }
.ava { width: 56px; height: 56px; flex: none; background: var(--navy); border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); }
img.ava { padding: 2px; }
.core { position: absolute; left: 50%; top: 50%; width: 42%; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.logo-build { filter: drop-shadow(6px 6px 0 var(--ink)); }
.ready { font-family: var(--head); font-size: 10px; color: var(--gold); white-space: nowrap; animation: blink 1.1s steps(1) infinite; }

/* The logo builds itself: the tile dissolves in, then the 9 pieces drop top to bottom, white until they land. */
.js .logo-build img { animation: tile-in .5s steps(4) both; }
.js .logo-build i { animation: drop .36s steps(3) backwards; animation-delay: calc(.45s + var(--k) * .16s); }
@keyframes tile-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes drop {
  0% { transform: translateY(-80%); background: var(--white); opacity: 0; }
  1% { opacity: 1; }
  70% { transform: translateY(0); background: var(--white); }
  100% { transform: translateY(0); background: var(--soot); }
}

/* The bubbles: what else flows into the plan. */
.who.bubble { translate: -50% -50%; }
.who.bubble .tag { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; padding: 5px 6px 4px; }
.who.bubble .ic { font: 400 13px/1 var(--body); }

/* The core opens into the block editor and folds back, on a loop (.editor, set by main.js): the logo's
   pieces blink out, the editor's window opens in four steps, and its rows drop in one by one, like the
   logo's pieces do. */
.core { transition: top .5s steps(5); }
.px-editor {
  position: absolute; left: 50%; top: 50%; width: 150%; translate: -50% -50%; z-index: 2;
  display: grid; gap: 6px; padding: 0 10px 10px; background: var(--navy); border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--slate), 6px 6px 0 0 var(--ink); visibility: hidden;
}
.pe-head { margin: 0 -10px 4px; padding: 6px 10px 5px; background: var(--slate); border-bottom: 2px solid var(--ink); font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--cloud); }
.pe-row { position: relative; display: flex; align-items: center; gap: 7px; padding: 6px 7px; background: var(--ink); border: 2px solid var(--slate); font: 500 11px/1.2 var(--body); color: var(--cloud); white-space: nowrap; overflow: hidden; }
.pe-row.push { margin-left: 8%; }
.pe-row b { font: 400 8px/1 var(--head); color: var(--amber); flex: none; }
.pe-row .t { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pe-row em { margin-left: auto; flex: none; font: normal 400 10px/1 var(--label); text-transform: uppercase; color: var(--ink); background: var(--st); padding: 3px 4px 2px; }
.pe-row .gain { display: none; margin-left: auto; flex: none; font: normal 400 10px/1 var(--label); text-transform: uppercase; color: var(--gold); }
.pe-row.gained .gain { display: inline; } .pe-row.gained em { display: none; }
.pe-row.hit { background: var(--white); color: var(--ink); }
.pe-row.stub { width: 62%; border-style: dashed; background: transparent; color: var(--fog); }
.core.editor .logo-build, .core.editor .ready { visibility: hidden; transition: visibility 0s .15s; }
.core.editor .px-editor { visibility: visible; animation: pe-open .32s steps(4) both; }
.core.editor .pe-row { animation: drop .36s steps(3) backwards; animation-delay: calc(.3s + var(--k) * .14s); }
@keyframes pe-open { from { clip-path: inset(40% 40%); } to { clip-path: inset(0); } }

/* Connected (a "Works with" chip pressed): the players dim, the editor drops to the lower part, and the
   app's window drops in above it, joined by a wire that data packets fall down. --c is the app's colour. */
.arena.connected .who, .arena.connected .links-px { opacity: .12; }
.arena.connected .core { top: 70%; }
.app-card {
  position: absolute; z-index: 3; left: 50%; top: 0; width: min(88%, 380px); translate: -50% 0;
  background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--c, var(--gold)), 6px 6px 0 0 var(--ink);
  font: 500 12px/1.35 var(--body); visibility: hidden; pointer-events: none; overflow: hidden;
}
.arena.connected .app-card { visibility: visible; animation: card-drop .4s steps(4) .3s backwards; }
@keyframes card-drop { from { transform: translateY(-40%); opacity: 0; } 1% { opacity: 1; } }
.app-card .top { display: flex; align-items: center; gap: 8px; padding: 7px 10px 6px; background: var(--ink); border-bottom: 2px solid var(--slate); font: 400 10px/1 var(--head); color: var(--white); white-space: nowrap; }
.app-card .top .ic { width: 18px; height: 18px; display: grid; place-items: center; background: var(--c); color: var(--ink); font: 700 11px/1 var(--body); flex: none; }
.app-card .top small { font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--fog); overflow: hidden; text-overflow: ellipsis; }
.app-card .body { padding: 8px 10px; display: grid; gap: 4px; color: var(--cloud); }
.app-card .body .ln { display: flex; gap: 7px; align-items: baseline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-card .body .ln b { color: var(--white); }
.app-card .body .k { color: var(--c); } .app-card .body .ok { color: var(--mint); } .app-card .body .dim { color: var(--fog); }
.wire { position: absolute; z-index: 1; left: 50%; top: 26%; height: 24%; width: 4px; translate: -2px 0; visibility: hidden;
  background: repeating-linear-gradient(180deg, var(--c, var(--gold)) 0 4px, transparent 4px 8px); }
.arena.connected .wire { visibility: visible; }
.packet { position: absolute; left: 50%; top: 0; translate: -50% -50%; font: 400 10px/1 var(--label); text-transform: uppercase; white-space: nowrap;
  color: var(--ink); background: var(--c, var(--gold)); padding: 4px 5px 3px; box-shadow: 2px 2px 0 0 var(--ink); animation: packet-fall 1s steps(8) forwards; }
@keyframes packet-fall { to { top: 100%; } }
/* Phones: the "Works with" row is a dropdown under the arena. */
.connect-select { display: none; }

/* ---------- Sweep wipe between sections ---------- */
.wipe { height: 12px; background: linear-gradient(90deg, #ffc46b 0 20%, #ffad5e 20% 40%, var(--tangerine) 40% 60%, #f77a52 60% 80%, #ef6a5a 80% 100%); position: relative; }
.js .wipe { transform: scaleX(0); transform-origin: left; transition: transform .7s steps(7); }
.js .wipe.in { transform: none; }

/* ---------- Problem: power bars ---------- */
.numbers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
#why .numbers { margin-top: 20px; } /* as far from the lead as the lead is from the title */
.stat { padding: 26px 24px 24px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 6px 6px 0 0 var(--ink); }
.stat .label { font-family: var(--label); text-transform: uppercase; font-size: 13px; color: var(--fog); }
.stat .via { font: 400 9px/1 var(--head); text-transform: uppercase; color: var(--gold); margin-bottom: 14px; }
/* The arrow between two cards: two pixel chevrons (››) behind both cards, from 82% of this card to a fifth
   into the next, so they show in the gap; the far one blinks, like an arcade "go" sign. Stacked cards
   get the arrow turned down. */
.stat { position: relative; }
.stat .ff { position: absolute; z-index: -1; left: 82%; top: 50%; width: calc(35% + 28px); aspect-ratio: 17 / 12; translate: 0 -50%;
  background: url(../assets/arcade/ff-right.svg) center / contain no-repeat; image-rendering: pixelated; visibility: hidden; }
.stat.in .ff { visibility: visible; animation: ff-blink 1.1s steps(1) infinite; animation-delay: .9s; }
@keyframes ff-blink { 50% { filter: brightness(1.5) drop-shadow(0 0 0 var(--gold)); opacity: .55; } }
.stat .big { font-family: var(--head); font-size: clamp(26px, 3.4vw, 40px); color: var(--white); margin: 18px 0 22px; line-height: 1.2; }
.stat.low .big { color: var(--coral); }
.power { height: 28px; border: 2px solid var(--ink); background: var(--ink); box-shadow: 0 0 0 2px var(--slate); padding: 3px; }
.power span {
  display: block; height: 100%; width: calc(var(--w) * 100%); min-width: 12px;
  background: repeating-linear-gradient(90deg, var(--mint) 0 10px, transparent 10px 13px);
}
.stat:nth-child(2) .power span { background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 13px); }
.stat.low .power span { background: repeating-linear-gradient(90deg, var(--red) 0 10px, transparent 10px 13px); }
.js .stat .power span { width: 0; transition: width 1s steps(10); }
.js .stat.in .power span { width: calc(var(--w) * 100%); }
/* A funnel: each step splits in two. The 10× spans both rows; what goes on (2–3×, then even less) takes the top row,
   joined by the arrows, and what's left behind at each step (the rest) sits in the card under it. */
.numbers { grid-template-rows: auto auto; row-gap: 22px; }
.numbers .stat:nth-child(1) { grid-row: 1 / span 2; display: flex; flex-direction: column; justify-content: center; }
.numbers .stat:nth-child(1) .big { font-size: clamp(44px, 6vw, 76px); }
/* The arrow from the 10× into the 2–3× hangs from the 2–3× card, so it lines up with the arrow after it. */
.stat .ff.from-prev { left: calc(-18% - 28px); }
.stat .ff.stacked-only { display: none; }
/* What each step leaves behind: a faint red wash. */
.stat.waste { background: linear-gradient(160deg, rgba(224, 67, 90, .14), rgba(224, 67, 90, .03) 60%), var(--navy); box-shadow: inset 0 0 0 2px #4a2e48, 6px 6px 0 0 var(--ink); }
.stat.waste .via { color: var(--coral); }
.rest { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.rest .pill { display: inline-flex; align-items: center; gap: 8px; }
.rest .pill svg { width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; shape-rendering: crispEdges; }

/* ---------- Displaced: human ↔ agent lanes ---------- */
/* The heading centred; under it the two kinds of work set against each other (VS.); under them the lanes, centred. */
.displaced .wrap { display: grid; justify-items: center; }
.displaced .head { margin-bottom: 44px; }
.versus { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 36px; width: min(100%, 920px); margin-bottom: 56px; }
.vs-side { display: grid; gap: 12px; justify-items: end; text-align: right; }
.vs-side:last-child { justify-items: start; text-align: left; }
.vs-side p { margin: 0; max-width: 34ch; font-size: 16px; line-height: 1.6; color: var(--cloud); }
/* VS as on a fighting game's versus screen: big pixel letters, gold, with a red and an ink drop shadow stepped behind. */
.vs { align-self: center; display: grid; place-items: center; padding: 4px 8px; font: 400 clamp(56px, 6vw, 80px)/1 var(--head); color: var(--gold); text-shadow: .075em .075em 0 var(--red), .15em .15em 0 var(--ink); animation: vs-flash 1.2s steps(1) infinite; }
.vs { -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0 14%, rgba(0, 0, 0, .35) 14% 30%, rgba(0, 0, 0, .7) 30% 42%, #000 42% 58%, rgba(0, 0, 0, .7) 58% 70%, rgba(0, 0, 0, .35) 70% 86%, rgba(0, 0, 0, .12) 86%); mask-image: linear-gradient(90deg, rgba(0, 0, 0, .12) 0 14%, rgba(0, 0, 0, .35) 14% 30%, rgba(0, 0, 0, .7) 30% 42%, #000 42% 58%, rgba(0, 0, 0, .7) 58% 70%, rgba(0, 0, 0, .35) 70% 86%, rgba(0, 0, 0, .12) 86%); } /* fading out a little at the sides, in steps */
@keyframes vs-flash { 50% { color: var(--white); } }
@media (prefers-reduced-motion: reduce) { .vs { animation: none; } }
.displaced .lanes { width: min(100%, 560px); }
/* Desktops: the verdict beside the lanes, in the same panel; the people's places (--px, a share of the lanes' width)
   count across the lanes' column only (--u). */
@media (min-width: 981px) {
  .displaced .lanes { width: min(100%, 900px); grid-template-columns: minmax(0, 1fr) 260px; column-gap: 24px; --u: calc((100cqi - 284px) / 100); }
  .displaced .lanes > :not(.verdict) { grid-column: 1; }
  .displaced .lanes .verdict { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; }
}
@media (max-width: 760px) {
  .versus { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 18px; }
  .vs-side, .vs-side:last-child { justify-items: center; text-align: center; }
}
.versus .pt-tag { white-space: nowrap; font: 400 11px/1 var(--label); text-transform: uppercase; padding: 5px 6px 4px; border: 2px solid var(--ink); } /* as in the lanes' head */
.versus .pt-tag.single { color: var(--white); background: var(--red); }
.versus .pt-tag.together { color: var(--ink); background: var(--mint); }
/* Three lanes, each one player and their agent, walled off by dashed pixel borders; work hops along each. */
.lanes { position: relative; container-type: inline-size; display: grid; gap: 14px; padding: 20px; }
.lanes-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12px/1 var(--label); text-transform: uppercase; color: var(--fog); }
.lanes-head .mode, .lanes-head .tags { display: grid; } .lanes-head .mode > *, .lanes-head .tags > * { grid-area: 1 / 1; }
.lanes-head .tags > * { justify-self: end; padding: 5px 6px 4px; border: 2px solid var(--ink); }
.lanes-head .single { color: var(--white); background: var(--red); }
.lanes-head .together-tag { color: var(--ink); background: var(--mint); }
.lanes-head .m-before, .lanes-head .together-tag { visibility: hidden; }
.lanes.together .m-before, .lanes.together .together-tag { visibility: visible; }
.lanes.together .m-now, .lanes.together .single { visibility: hidden; }
.lane { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: 12px; padding: 12px; border: 2px dashed var(--steel); }
.lane .ava { width: 48px; height: 48px; box-shadow: 3px 3px 0 0 var(--ink); }
.lane .bot { border-color: var(--c); }
/* The labels slide along the track by transform (100cqi is the track's width), not by left: no layout each frame. */
.lane .track { position: relative; height: 28px; container-type: inline-size; }
.lane .track::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 4px; translate: 0 -50%;
  background: repeating-linear-gradient(90deg, var(--c) 0 6px, transparent 6px 12px); opacity: .6; }
.lane .go, .lane .back { position: absolute; top: 50%; translate: 0 -50%; white-space: nowrap; font: 400 11px/1 var(--label); text-transform: uppercase;
  color: var(--ink); background: var(--c); border: 2px solid var(--ink); padding: 4px 5px 3px; opacity: 0;
  animation: lane-go 4.8s steps(16) infinite; animation-delay: var(--d); }
.lane .back { animation-name: lane-back; animation-delay: calc(var(--d) + 2.4s); }
@keyframes lane-go { 0% { transform: translateX(0); opacity: 1; } 50% { transform: translateX(calc(100cqi - 100%)); opacity: 1; } 50.1%, 100% { transform: translateX(calc(100cqi - 100%)); opacity: 0; } }
@keyframes lane-back { 0% { transform: translateX(calc(100cqi - 100%)); opacity: 1; } 50% { transform: translateX(0); opacity: 1; } 50.1%, 100% { transform: translateX(0); opacity: 0; } }
.lanes .verdict { margin-top: 4px; flex-direction: column; gap: 10px; } /* "Game over?" on top of the text */
/* Before: human ↔ human (.together). The players gather in the middle (--px: where each one's centre goes,
   in % of the panel), linked by marching pixel lines with what passes between them; walls, agents and
   traffic are gone. Moves happen in steps: the players hop, then the walls and agents blink in. */
.lane .person { position: relative; z-index: 2; transition: transform .6s steps(6); }
.lane { transition: border-color 0s .6s; }
.lane .bot, .lane .track { transition: visibility 0s .6s; }
.lanes.together .lane { border-color: transparent; transition-delay: 0s; }
.lanes.together .lane .bot, .lanes.together .lane .track { visibility: hidden; transition-delay: 0s; }
/* Each of them keeps their agent, beside them (--bx, --by), linked (main.js): it hops along with its person. */
.lane .bot.paired { position: relative; z-index: 2; transition: visibility 0s .6s, transform .6s steps(6); }
.lanes.together .lane .bot.paired { visibility: visible; transform: translate(calc(var(--px) * var(--u, 1cqi) - 56px - var(--span, 0px) + var(--bx)), var(--by)) scale(.8); transition-delay: 0s, .2s; }
.lanes .lane-links line.ag { stroke: var(--steel); stroke-dasharray: 3 5; }
.lanes .lane-links line.aa { stroke: var(--steel); stroke-width: 2; stroke-dasharray: 2 6; opacity: .7; } /* agent ↔ agent: in sync too */
.lanes.together .lane .person { transform: translateX(calc(var(--px) * var(--u, 1cqi) - 56px)); transition-delay: .2s; }
.lanes .lane-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; visibility: hidden; }
.lanes .lane-links.show { visibility: visible; }
.lanes .lane-links line { stroke: var(--gold); stroke-width: 3; stroke-dasharray: 6 6; animation: march-6 .6s steps(3) infinite; }
@keyframes march-6 { to { stroke-dashoffset: -12; } }
.lanes .link-label { position: absolute; z-index: 3; translate: -50% -50%; font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--ink); background: var(--gold);
  border: 2px solid var(--ink); padding: 4px 5px 3px; white-space: nowrap; visibility: hidden; }
.lanes .link-label.show { visibility: visible; animation: pop .24s steps(3); }
@keyframes pop { from { transform: scale(.4); } }
.verdict {
  grid-column: 1 / -1; display: flex; gap: 18px; align-items: flex-start; padding: 20px 22px;
  border: 2px dashed var(--coral); background: var(--ink);
}
.over { font-family: var(--head); font-size: 12px; color: var(--red); white-space: nowrap; padding-top: 4px; text-transform: uppercase; }

/* ---------- Mission band ---------- */
.band { background: var(--tangerine); color: var(--soot); overflow: hidden; border-top: 4px solid var(--ink); border-bottom: 4px solid var(--ink); }
.band .wrap { position: relative; }
.band h2 { color: var(--soot); max-width: 820px; }
.band .lead { color: var(--soot); max-width: 720px; font-weight: 500; }
.band h2 .soft { color: rgba(22, 18, 15, .55); }
.band .lead .para { display: block; margin: .5em 0; }
.band .eyebrow { color: var(--soot); }
.band .lv { background: var(--soot); color: var(--tangerine); box-shadow: 3px 3px 0 0 rgba(22, 18, 15, .35); }
/* The chain along the bottom of the band, in pixels: people side by side, hands joined and raised, their agents
   among them, a flag of the logo's blocks over the last pair. The people hop together and the flag flutters, in
   whole pixels. Ink on the orange, faint, behind the words, edge to edge: lined up on the right
   (preserveAspectRatio), it runs on past the left edge, and past the right edge after the flag. --run is that last
   part, after the flag: 924 of the drawing's units (2448 wide before it), at whichever scale the slice takes. The
   chain is that much wider than the width that puts the flag where it is. The drawing is 350 units high: the people
   in its lower 290, which take 196px, and the top 60 for the flag. At every width it stands along the bottom. */
.band { position: relative; isolation: isolate; padding-bottom: 250px; }
/* Where the flag stands beside the text (main.js), at any width, the text only ends a little above the raised hands. */
.band.flag-side { padding-bottom: calc(var(--chain-h, 196px) * 164 / 290 + 64px); }
.band .chain { --w: calc(100% + 6vw - min(38vw, 480px) - 40px); --run: max(var(--w) * 924 / 2448, 196px * 924 / 290); position: absolute; z-index: -1; left: 0; bottom: -4px; width: calc(var(--w) + var(--run)); max-width: none; height: calc(196px * 350 / 290); color: var(--soot); opacity: .13; pointer-events: none; overflow: visible; }
.band .chain .p, .band .chain .flag, .band .chain .b { fill: currentColor; }
.band .chain .sway { animation: band-sway 2.4s steps(1) infinite; }
.band .chain .cloth { animation: band-wave 1.2s steps(1) infinite; }
@keyframes band-sway { 50% { transform: translateY(-6px); } }
@keyframes band-wave { 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .band .chain .sway, .band .chain .cloth { animation: none; } }
/* The flag grows from the foot of its pole. Where there is room right of the text, main.js moves it to the raised hands
   where it can stand biggest without reaching over the text or past the page's edge, and scales it to fit, in whole
   pixels. */
.band .chain .flag { transform-box: fill-box; transform-origin: 0% 100%; }
/* As the chain comes into view, it appears from left to right, the way the logo's blocks used to drop in: an orange
   cover over its strip steps off to the right, in the band's own frame (so at any width it runs across what shows). */
.js .band::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: calc(196px * 350 / 290 + 4px); background: var(--tangerine); pointer-events: none; }
.js .band:has(.chain.in)::after { animation: band-chain-in 1.4s steps(14) .1s forwards; }
@keyframes band-chain-in { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .js .band::after { display: none; } }
@media (max-width: 980px) {
  /* The chain is lined up a fifth of the width in from the right, so the flag stands well inside the screen; scaled
     so the people span the band; the text ends above it. */
  .band { --chain-h: max(170px, (100vw - 12px) * 290 / 1260); padding-bottom: calc(var(--chain-h) * 350 / 290 + 24px); }
  .js .band::after { height: calc(var(--chain-h) * 350 / 290 + 4px); }
  .band .chain { --run: max(1500px * 924 / 2448, var(--chain-h) * 924 / 290); left: auto; right: calc(22vw - var(--run)); width: calc(1500px + var(--run)); height: calc(var(--chain-h) * 350 / 290); opacity: .1; }
}
@media (max-width: 600px) { .band h2, .band .lead { max-width: none; } } /* phones: the text takes the width, the flag stands under it */
@media (max-width: 600px) {
  .band { --chain-h: max(130px, (100vw - 12px) * 290 / 1260); }
  .band .chain { --run: max(1100px * 924 / 2448, var(--chain-h) * 924 / 290); width: calc(1100px + var(--run)); }
}


/* ---------- Pillars ---------- */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin-top: 56px; }
.pillar { padding: 26px 24px; display: flex; flex-direction: column; gap: 14px; }
.pu { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; font-family: var(--head); font-size: 9px; text-transform: uppercase; color: var(--ink); background: var(--tangerine); padding: 4px 8px 4px 4px; box-shadow: 3px 3px 0 0 var(--ink); }
/* The pillar's number as the tile: one block, two, then the whole logo. */
.pu-tile { display: grid; align-content: start; gap: 2px; width: 21px; height: 21px; padding: 3px 4px; background: var(--soot); border: 2px solid var(--soot); }
.pu-tile i { display: block; height: 2px; width: 10px; background: var(--tangerine); }
@media (max-width: 640px) { .pu-tile { width: 18px; height: 18px; padding: 2px 3px; } }
.pu-tile i:nth-child(even) { margin-left: 2px; } .pu-tile i:nth-child(4) { width: 5px; }
.pillar p { font-size: 15px; }
.art { margin-top: 4px; background: var(--night); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate); padding: 16px; min-height: 210px; font-size: 14px; position: relative; }
.rid { font-family: var(--head); font-size: 10px; color: var(--amber); }
.req-head { display: flex; flex-direction: column; gap: 8px; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 12px; }
.tabs button {
  font: 400 12px/1 var(--label); text-transform: uppercase; color: var(--fog); background: var(--navy);
  border: 2px solid var(--ink); padding: 6px 7px 5px; cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); background: var(--cyan); }
.tp { display: flex; flex-direction: column; gap: 6px; border-left: 4px solid var(--violet); padding-left: 10px; }
/* All panels share one spot, so the box keeps the height of the tallest while they cycle. */
.tabpanels { display: grid; }
.tp { grid-area: 1 / 1; }
.tp[hidden] { display: flex; visibility: hidden; }
.tp .k { font-family: var(--label); text-transform: uppercase; font-size: 12px; color: var(--amber); }
.meta { color: var(--fog); font-size: 12px; }

/* The block, and under it on a dashed rail the entries synced into it, newest on top: each one drops in from above,
   the rest step down a row and age, the fifth blinks out (main.js sets --at, the row's place). In whole steps. */
.ledger { min-height: 230px; display: flex; flex-direction: column; gap: 12px; }
.lg-block { display: flex; align-items: center; gap: 8px; padding: 7px 9px; background: var(--navy); border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); font-size: 12px; color: var(--white); white-space: nowrap; min-width: 0; }
.lg-block img { flex: none; width: 18px; height: 18px; }
.lg-block > b { font: 400 9px/1 var(--head); color: var(--amber); }
/* The name gives way (with an ellipsis) on narrow cards, rather than widening the card past the screen. */
.lg-block > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.pillar { min-width: 0; }
.lg-block em { margin-left: auto; font: 400 10px/1 var(--label); font-style: normal; text-transform: uppercase; color: var(--fog); }
.lg-block .lg-count { display: inline-block; font-weight: 400; color: var(--gold); }
.lg-block .lg-count.bump { animation: lg-bump .4s steps(2); }
@keyframes lg-bump { 50% { transform: translateY(-3px); } }
.lg-feed { position: relative; height: 136px; margin-left: 16px; border-left: 2px dashed var(--slate); }
.lg-row {
  position: absolute; left: 0; right: 0; top: 2px; height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 14px;
  font-size: 12px; white-space: nowrap; transform: translateY(calc(var(--at, 0) * 34px));
  transition: transform .4s steps(4), opacity .4s steps(2), background-color .4s steps(2);
}
.lg-row.gone { opacity: 0; }
.lg-row.enter { transition: none; transform: translateY(-34px); opacity: 0; }
.lg-row.new { background-color: color-mix(in srgb, var(--c) 14%, transparent); }
.lg-row i { position: absolute; left: -6px; width: 10px; height: 10px; background: var(--c); box-shadow: 0 0 0 2px var(--ink); }
.lg-row b { font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--c); }
.lg-row span { color: var(--cloud); overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.lg-row time { margin-left: auto; font: 400 10px/1 var(--label); text-transform: uppercase; color: var(--fog); }

.live { line-height: 2.5; }
.art.live { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
/* With R-03 shown too (main.js), the ids sit inline and the lines close up a little, to fit both. */
.art.live.both { line-height: 2.15; }
.art.live.both .rid { display: inline; margin: 0 6px 0 0; }
.live .rid { display: block; margin-bottom: 6px; }
.hl { background: color-mix(in srgb, var(--c) 28%, transparent); border-bottom: 2px solid var(--c); padding: 0 2px; }
.cursor { position: relative; display: inline-block; width: 3px; height: 1.1em; vertical-align: -2px; background: var(--c); margin: 0 2px; animation: caret 1.1s steps(1) infinite; }
@keyframes caret { 50% { background: transparent; } }
.cursor::after {
  content: attr(data-who); position: absolute; right: 0; bottom: 100%; font: 400 10px/1 var(--label); text-transform: uppercase;
  color: var(--ink); background: var(--c); padding: 3px 4px 2px; white-space: nowrap;
}

/* ---------- How it works: the levels beside a plan going through them ---------- */
#how .head { max-width: none; }
.howto { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 8px; }
@media (min-width: 981px) { .howto .plan-anim { order: -1; } } /* the plan on the left, the levels on the right; text first when stacked */
@media (min-width: 981px) { .howto { grid-template-columns: minmax(0, 560px) auto; justify-content: center; } } /* the plan and the list sized to their content and centred as one group, no empty space after the list */
.pulse-list { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; font-size: 16px; }
.pulse-list li { display: flex; align-items: center; gap: 14px; color: var(--fog); }
.pulse-list li::before { content: ""; flex: none; width: 12px; height: 12px; background: var(--slate); box-shadow: 2px 2px 0 0 var(--ink); }
.pulse-list li.on { color: var(--white); }
.pulse-list li.on::before { background: var(--gold); animation: blink .55s steps(1) infinite; }
/* Stacked, with the plan under it: one level at a time, in a pixel band (.shown, main.js). The next one rises into
   place from below, in steps, as the one before rises and goes; the others wait out of sight below. */
@media (max-width: 980px) {
  /* Its pixel lines, top and bottom, and its fill fade out to the left and right, in hard steps. */
  .pulse-list { --edge: linear-gradient(90deg, transparent 0 22%, color-mix(in srgb, var(--slate) 33%, transparent) 22% 30%, color-mix(in srgb, var(--slate) 66%, transparent) 30% 38%, var(--slate) 38% 62%, color-mix(in srgb, var(--slate) 66%, transparent) 62% 70%, color-mix(in srgb, var(--slate) 33%, transparent) 70% 78%, transparent 78%); overflow: hidden; padding: 14px 20px;
    background: var(--edge) top / 100% 2px no-repeat, var(--edge) bottom / 100% 2px no-repeat, linear-gradient(90deg, transparent 0 22%, color-mix(in srgb, var(--navy) 33%, transparent) 22% 30%, color-mix(in srgb, var(--navy) 66%, transparent) 30% 38%, var(--navy) 38% 62%, color-mix(in srgb, var(--navy) 66%, transparent) 62% 70%, color-mix(in srgb, var(--navy) 33%, transparent) 70% 78%, transparent 78%); }
  .pulse-list li { grid-area: 1 / 1; opacity: 0; transform: translateY(150%); transition: transform .3s steps(3), opacity .3s steps(3); }
  .pulse-list li.shown { opacity: 1; transform: none; color: var(--white); }
  .pulse-list li.out { transform: translateY(-150%); }
  .pulse-list li { justify-self: center; } /* each level, square and words, centred in the band */
}
.plan-anim { font: 500 12px/1.2 var(--body); background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 8px 8px 0 0 var(--ink); padding-bottom: 12px; }
.pa-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 7px; margin-bottom: 10px; background: var(--slate); border-bottom: 2px solid var(--ink); font: 400 12px/1 var(--label); text-transform: uppercase; color: var(--cloud); }
.pa-stage { margin-left: auto; color: var(--gold); }
.pa-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 10px; margin: 0 12px 6px; padding: 7px 9px; background: var(--ink); border: 2px solid var(--slate); visibility: hidden; }
.pa-row.push { margin-left: 28px; }
.plan-anim.s0 .pa-row { visibility: visible; animation: drop .36s steps(3) backwards; animation-delay: calc(var(--i) * .12s); }
.pa-row b { font: 400 9px/1 var(--head); color: var(--amber); }
.pa-row .line { height: 6px; max-width: 100%; background: repeating-linear-gradient(90deg, var(--steel) 0 6px, transparent 6px 8px); }
/* As wide as the widest row's pills (three agents), so the statuses line up down the rows. */
.pa-row .pills { display: flex; gap: 4px; min-width: 128px; }
.plan-anim .pill { display: inline-flex; align-items: center; padding: 3px 4px 2px; font: 400 10px/1 var(--label); color: var(--cloud); background: var(--navy); border: 2px solid var(--ink); box-shadow: none; visibility: hidden; }
.plan-anim .pill.ctx { color: var(--gold); } .plan-anim .pill.talk { color: var(--pink); }
.plan-anim .pill.bot { padding: 1px 2px; } .plan-anim .pill.bot img { width: 14px; height: 14px; }
/* Several agents on a block, each in its own colour: Claude Code (the image's own), Codex grey, Cursor blue. */
.plan-anim .pill.bot.many { gap: 2px; }
.plan-anim .pill.bot .ag-codex { filter: grayscale(1) brightness(1.5); }
.plan-anim .pill.bot .ag-cursor { filter: hue-rotate(185deg) saturate(1.3); }
.plan-anim .pill.bot .n { display: none; padding: 0 2px; font: 400 10px/1 var(--label); color: var(--cloud); }
@media (max-width: 600px) { .pa-row .pills { min-width: 0; } }
/* On the narrowest phones a pill with several agents shows the first and how many. */
@media (max-width: 400px) {
  .plan-anim .pill.bot.many img + img { display: none; }
  .plan-anim .pill.bot.many .n { display: inline; }
}
.plan-anim.s1 .ctx, .plan-anim.s2 .talk, .plan-anim.s3 .bot { visibility: visible; animation: pop .24s steps(3) backwards; animation-delay: calc(var(--i) * .1s); }
.pa-row .st { display: grid; } .pa-row .st > span { grid-area: 1 / 1; padding: 3px 5px 2px; font: 400 10px/1 var(--label); text-transform: uppercase; text-align: center; color: var(--ink); visibility: hidden; }
.st .draft { background: var(--slate); color: var(--cloud) !important; } .st .review { background: var(--gold); } .st .dev { background: var(--sky); } .st .built { background: var(--mint); }
.pa-row[data-st="draft"] .draft, .pa-row[data-st="review"] .review, .pa-row[data-st="dev"] .dev, .pa-row[data-st="built"] .built { visibility: visible; }
/* Progress: five segments, one per level. */
.pa-track { margin: 10px 12px 0; height: 10px; padding: 2px; background: var(--ink); border: 2px solid var(--slate); }
.pa-track { position: relative; }
.pa-track span { display: block; height: 100%; width: calc(var(--p, 0) * 20%); background: var(--cyan); }
/* "Shaped together": the team on the blocks (main.js picks them), dropping in one block after another, gone at the
   next stage. */
.pa-row { position: relative; }
.pa-who { position: absolute; top: 50%; display: flex; gap: 2px; translate: 0 -50%; pointer-events: none; }
.pa-who img { width: 20px; height: 20px; box-shadow: 0 0 0 2px var(--ink); visibility: hidden; }
.plan-anim.s0:not(.s1) .pa-who img { visibility: visible; animation: md-in .3s steps(3) backwards; animation-delay: calc(.15s + var(--i) * .2s + var(--k) * .08s); }
/* The plan as it starts (.md, main.js): a Markdown spec where the blocks will be, its lines dropping in; they go as the
   blocks come in. */
.pa-md { position: absolute; left: 12px; right: 12px; display: grid; gap: 6px; padding: 4px 9px; font: 400 13px/1.6 var(--body); color: var(--cloud); pointer-events: none; }
.pa-md span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; visibility: hidden; }
.pa-md em { margin-right: 9px; font-style: normal; color: var(--tangerine); }
.plan-anim { position: relative; }
.plan-anim.md .pa-md span { visibility: visible; animation: md-in .36s steps(3) backwards; animation-delay: calc(var(--i) * .12s); }
/* One by one, each block drops in where its bullet was. */
.plan-anim.md .pa-row.on { visibility: visible; animation: drop .36s steps(3) backwards; }
/* Where the bullets became them, the blocks stand at once, without dropping in. */
.plan-anim.morphed.s0 .pa-row { animation: none; }
@keyframes md-in { from { opacity: 0; } }
/* Before the blocks come in, their statuses wait unseen with them. */
.plan-anim:not(.s0) .pa-row .st > span { visibility: hidden; }
.pa-track::after { content: ""; position: absolute; inset: 2px; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 2px), var(--ink) calc(20% - 2px) 20%); }

/* ---------- Stages / levels ---------- */
/* Between the plan and the levels: a dashed pixel line like the other separators', fading out to both sides in steps. */
.fade-rule { height: 4px; margin-top: 32px; /* a separator within the section: half the space either side */ background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px);
  -webkit-mask: linear-gradient(90deg, transparent 0 16%, rgba(0, 0, 0, .33) 16% 26%, rgba(0, 0, 0, .66) 26% 36%, #000 36% 64%, rgba(0, 0, 0, .66) 64% 74%, rgba(0, 0, 0, .33) 74% 84%, transparent 84%);
  mask: linear-gradient(90deg, transparent 0 16%, rgba(0, 0, 0, .33) 16% 26%, rgba(0, 0, 0, .66) 26% 36%, #000 36% 64%, rgba(0, 0, 0, .66) 64% 74%, rgba(0, 0, 0, .33) 74% 84%, transparent 84%); }
.stages { display: flex; flex-direction: column; gap: 88px; margin-top: 64px; }
.stage { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: 48px; align-items: center; }
.stage:nth-child(even) .stage-copy { order: 2; }
.stage h3 { margin-top: 22px; font-size: clamp(14px, 1.4vw, 18px); }
.stage p { margin-top: 16px; }
.stage ul { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 10px; font-size: 15px; }
.stage li { display: flex; gap: 12px; }
.stage li::before { content: ""; flex: none; width: 10px; height: 10px; margin-top: 8px; background: var(--mint); box-shadow: 2px 2px 0 0 var(--green); }
.lvl-card {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 16px;
  background: var(--ink); border: 2px solid var(--slate); box-shadow: 4px 4px 0 0 var(--ink);
}
.lvl { font-family: var(--head); font-size: 10px; color: var(--gold); text-transform: uppercase; }
.lvl-name { font-family: var(--head); font-size: 16px; text-transform: uppercase; color: var(--tangerine); }
.lvl-bars { display: inline-flex; gap: 3px; }
.lvl-bars i { width: 12px; height: 12px; background: var(--slate); }
/* The level's progress: as many orange bars as its number. */
.stage[style*="--lvl:1"] .lvl-bars i:nth-child(-n+1),
.stage[style*="--lvl:2"] .lvl-bars i:nth-child(-n+2),
.stage[style*="--lvl:3"] .lvl-bars i:nth-child(-n+3),
.stage[style*="--lvl:4"] .lvl-bars i:nth-child(-n+4),
.stage[style*="--lvl:5"] .lvl-bars i:nth-child(-n+5),
.stage[style*="--lvl:6"] .lvl-bars i { background: var(--tangerine); }
.lvl-card.ship { border-color: var(--tangerine); }

.shot, .term {
  margin: 0; background: var(--ink); border: 2px solid var(--ink);
  box-shadow: 0 0 0 3px var(--slate), 8px 8px 0 3px var(--ink);
  min-width: 0;
}
.shot .bar, .term .bar {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px 7px; background: var(--slate);
  font-family: var(--label); font-size: 12px; color: var(--cloud); text-transform: uppercase;
  border-bottom: 2px solid var(--ink); min-width: 0;
}
.shot .bar span, .term .bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shot .bar::before, .term .bar:not(:has(img))::before { content: ""; flex: none; width: 10px; height: 10px; background: var(--tangerine); box-shadow: 14px 0 0 var(--gold), 28px 0 0 var(--mint); margin-right: 28px; }
.shot img { display: block; width: 100%; height: auto; }
/* Structure: a Markdown spec beside the same spec as blocks, in pixels; each bullet lights in turn with its block. */
.md2blocks .mb { display: grid; grid-template-columns: minmax(0, 1.25fr) 26px minmax(0, 1fr); align-items: center; gap: 14px; padding: 24px 20px; background: var(--navy); }
.mb-md { display: grid; gap: 8px; padding: 12px 14px; background: var(--ink); border: 2px solid var(--slate); font: 400 12px/1.4 var(--body); color: var(--cloud); }
.mb-md span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 1px 4px; margin: 0 -4px; }
.mb-md em { font-style: normal; margin-right: 8px; color: var(--tangerine); }
.mb-md .h { color: var(--white); }
.mb-arrow { height: 26px; background: url(../assets/arcade/ff-right.svg) center / contain no-repeat; image-rendering: pixelated; opacity: .7; }
.mb-blocks { display: grid; gap: 6px; }
.mb-blocks .g { font: 400 11px var(--label); text-transform: uppercase; color: var(--white); margin-bottom: 2px; }
.mb-blocks .blk { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--ink); border: 2px solid var(--slate); }
.mb-blocks .blk:nth-child(odd) { margin-left: 12px; }
.mb-blocks b { flex: none; white-space: nowrap; font: 400 8px/1 var(--head); color: var(--amber); }
.mb-blocks s { flex: 1 1 auto; min-width: 12px; height: 6px; background: repeating-linear-gradient(90deg, var(--steel) 0 6px, transparent 6px 8px); }
.mb-blocks .blk em { flex: none; white-space: nowrap; font: normal 400 9px/1 var(--label); text-transform: uppercase; color: var(--ink); background: var(--st); padding: 3px 5px 2px; }
.stage.in .mb-md span[style] { animation: mb-on 6s steps(1) infinite; animation-delay: calc(var(--i) * 1.5s); }
.stage.in .mb-blocks .blk { animation: mb-blk 6s steps(1) infinite; animation-delay: calc(var(--i) * 1.5s); }
@keyframes mb-on { 0%, 22%, 100% { background: transparent; color: inherit; } 3%, 19% { background: var(--tangerine); color: var(--ink); } }
@keyframes mb-blk { 0%, 22%, 100% { border-color: var(--slate); } 3%, 19% { border-color: var(--tangerine); box-shadow: 3px 3px 0 0 var(--tangerine); } }
.stage.in .mb-md span[style] em { animation: inherit; animation-name: mb-em; }
@keyframes mb-em { 0%, 22%, 100% { color: var(--tangerine); } 3%, 19% { color: var(--ink); } }
@media (prefers-reduced-motion: reduce) { .stage.in .mb-md span[style], .stage.in .mb-blocks .blk, .stage.in .mb-md span[style] em { animation: none; } }
@media (max-width: 640px) { .md2blocks .mb { grid-template-columns: minmax(0, 1fr); padding: 16px 12px; } .mb-arrow { justify-self: center; width: 26px; background-image: url(../assets/arcade/ff-down.svg); } }
/* A pixel frame blinking over one card of a screenshot, placed in percentages of the image. */
.shot .pic { position: relative; }
/* Mia's caret in the plan shot (it has none of its own: scripts/capture-screens.mjs), blinking as she types. */
.shot .caret { position: absolute; width: .28%; background: var(--c); pointer-events: none; animation: caret-blink 1.1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .shot .caret { animation: none; } }
.blink-card { position: absolute; border: 3px solid var(--gold); box-shadow: 0 0 0 3px var(--ink), inset 0 0 0 2px var(--ink); animation: blink 1.1s steps(1) infinite; pointer-events: none; }
.term pre {
  margin: 0; padding: 18px; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 13px/1.75 var(--body); color: var(--cloud); background: var(--ink);
}
.term .bar { background: var(--navy); }
.you { color: var(--white); font-weight: 600; }
.tool { color: var(--clay); font-weight: 600; }
.dim { color: var(--fog); }
.ok { color: var(--mint); }
.sky { color: var(--sky); }
.mcp { color: var(--sky); font-weight: 600; }
/* The context stage's terminal plays out (main.js): the prompt is typed in behind a block cursor, then the MCP fetch
   and each Periferal call appear with their results, in turn. Everything keeps its place while hidden, so the card
   never changes size. */
.term pre[data-play] .typed > span { position: relative; visibility: hidden; }
.term pre[data-play] .typed > span.on { visibility: visible; }
.term pre[data-play] .typed > span.at::after { content: ""; position: absolute; left: 100%; top: .1em; bottom: .1em; width: .6em; background: var(--gold); }
.term pre[data-play] .typed > span.at.before::after { left: 0; }
.term pre[data-play] .typed > span.at.idle::after { animation: caret-blink 1s steps(1) infinite; }
.term pre[data-play] .ln { visibility: hidden; }
.term pre[data-play] .ln.on { visibility: visible; }
.term pre[data-play] .ln.res.on .ok { display: inline-block; animation: term-ok .3s steps(3); }
@keyframes term-ok { from { transform: scale(0); } }
/* A dashed rule between what the MCPs fetched and what goes into Periferal. */
.term pre .ln.sep { display: block; height: 0; margin: .5em 0; border-top: 2px dashed var(--slate); }
/* A line with what it saved, the saving on the right. */
.term .saved { display: flex; justify-content: space-between; gap: 16px; }
.term .saved > :first-child { padding-left: 2ch; }
.term .save { flex: none; color: var(--mint); }
.notice { display: inline-block; color: var(--ink); background: var(--gold); padding: 0 6px; margin: 4px 0; }

/* ---------- Agents ---------- */
.agents { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.points { display: grid; gap: 12px; margin-top: 36px; }
.point { display: flex; gap: 16px; align-items: flex-start; } .point > .ico { translate: 0 calc(15px - 50%); } /* level with the first line (17px × 1.65), however many it wraps to */ .point b { font-size: 17px; font-weight: 400; color: color-mix(in srgb, var(--cloud) 50%, transparent); } /* set as the lead above it, at half its colour */
.ico {
  flex: none; display: grid; place-items: center; width: 21px; height: 21px; margin-top: 2px;
  background: var(--tangerine); color: var(--soot); box-shadow: 2px 2px 0 0 var(--ink);
}
/* Drawn like the hero's emojis, in blocks, at their size. */
@media (max-width: 640px) { .ico { width: 18px; height: 18px; } }
.ico svg { width: 100%; height: 100%; fill: var(--soot); shape-rendering: crispEdges; }
.ico .o { fill: var(--tangerine); }
.point p { color: var(--fog); font-size: 15px; margin-top: 4px; }
.terms { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
/* The plugin hub: the Periferal plugin in a marketplace on the left, served to each agent on the right
   along marching pixel wires; each agent's "Installed" lights up in turn. */
.hub-body { display: grid; grid-template-columns: auto minmax(28px, 64px) minmax(0, 1fr); padding: 18px; background: var(--ink); }
.market { align-self: center; display: grid; gap: 8px; width: 168px; padding: 10px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate); }
.mk-head { padding: 5px 8px 4px; background: var(--ink); border: 2px solid var(--slate); font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--fog); }
.mk-skel { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 2px solid var(--slate); opacity: .6; }
.mk-skel i { width: 16px; height: 16px; background: var(--slate); }
.mk-skel b { height: 6px; width: 60%; background: repeating-linear-gradient(90deg, var(--slate) 0 6px, transparent 6px 8px); }
.mk-item { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 10px; text-align: center; background: var(--ink); border: 2px solid var(--gold); }
.mk-item img { width: 40px; height: 40px; margin-bottom: 2px; filter: drop-shadow(3px 3px 0 var(--slate)); }
.mk-item b { font: 400 10px/1.4 var(--head); }
.mk-item small { font-size: 11px; color: var(--fog); white-space: nowrap; }
.mk-btn { margin-top: 6px; padding: 5px 10px 4px; font: 400 9px/1 var(--head); text-transform: uppercase; color: var(--ink); background: var(--gold); border: 2px solid var(--ink); box-shadow: 2px 2px 0 0 var(--ink); animation: blink 1.1s steps(1) infinite; }
.hub-lines { width: 100%; height: 0; min-height: 100%; overflow: visible; }
.hub-lines path { fill: none; stroke: var(--gold); stroke-width: 3; vector-effect: non-scaling-stroke; stroke-dasharray: 6 6; animation: march-6 .6s steps(3) infinite; }
.hub-agents { list-style: none; margin: 0; padding: 0; display: grid; }
.hub-agents { container-type: inline-size; }
.hub-agents li { padding: 4px 0; min-width: 0; }
@container (max-width: 250px) { .hub-agents em .w { display: none; } }
.hub-agents .card { min-width: 0; overflow: hidden; display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate); }
.hub-agents .ag { width: 26px; height: 26px; flex: none; display: grid; place-items: center; background: var(--c); color: var(--ink); font: 700 11px/1 var(--body); border: 2px solid var(--ink); }
.hub-agents b { font: 400 9px/1.3 var(--head); white-space: nowrap; }
.hub-agents em { margin-left: auto; font: normal 400 11px/1 var(--label); text-transform: uppercase; color: var(--mint); white-space: nowrap; animation: install 6s steps(1) infinite; animation-delay: calc(var(--i) * .4s); }
@keyframes install { 0%, 6% { visibility: hidden; } 7%, 100% { visibility: visible; } }
/* The fast-forward arrow down to the tokens: the first section's pixel chevrons, turned down, centred
   under the marketplace (the window's border, its 18px padding, half the 168px marketplace, less half the arrow). */
.plug-hub, .tokens { position: relative; z-index: 1; }
.ff-down { display: block; width: 72px; aspect-ratio: 12 / 17; margin: -22px 0 -22px 66px; background: url(../assets/arcade/ff-down.svg) center / contain no-repeat; image-rendering: pixelated; animation: ff-blink 1.1s steps(1) infinite; }
.tokens {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; padding: 16px 18px;
  background: var(--ink); border: 2px dashed var(--gold);
}
.tokens .hs { font-family: var(--head); font-size: 10px; color: var(--fog); text-transform: uppercase; width: 100%; }
.tokens .n { display: inline-flex; align-items: center; gap: 12px; font-family: var(--head); font-size: clamp(16px, 2vw, 22px); color: var(--gold); }
.tokens .n img { width: 24px; height: 24px; }
.tokens s { font-family: var(--head); font-size: 12px; color: var(--red); text-decoration-thickness: 2px; }

/* ---------- Demo cabinet ---------- */
.cabinet {
  max-width: 1000px; margin: 56px auto 0; background: var(--slate); padding: 22px;
  border: 2px solid var(--ink); box-shadow: inset 4px 0 0 var(--steel), inset -4px 0 0 var(--navy), 10px 10px 0 0 var(--ink);
}
.player-wrap { position: relative; }
/* The label: in the screen's top-left corner (--cx, --cy, set by main.js); while the video plays it hops
   up above the cabinet and the heading appears beside it. */
.demo-label { position: absolute; z-index: 4; left: var(--cx, 30px); top: var(--cy, 100px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; pointer-events: none; transition: top .36s steps(6), left .36s steps(6); }
.playing .demo-label { left: 0; top: -44px; }
.demo-title { font: 400 11px/1.4 var(--head); color: var(--white); visibility: hidden; }
.playing .demo-title { visibility: visible; animation: type-in .5s steps(10) .36s backwards; }
@keyframes type-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.demo-close { position: absolute; z-index: 3; top: 10px; right: 10px; width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer;
  font: 400 14px/1 var(--head); color: var(--white); background: var(--red); border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); }
.demo-close:hover { background: var(--gold); color: var(--ink); }
.demo-close:active { transform: translate(3px, 3px); box-shadow: none; }
.demo-close[hidden], .poster[hidden] { display: none; }
.screen { position: relative; aspect-ratio: 16 / 9; background: var(--ink); border: 4px solid var(--ink); box-shadow: 0 0 0 3px var(--steel); }
.screen video { display: block; width: 100%; height: 100%; background: var(--ink); }
.poster {
  position: absolute; inset: 0; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  border: 0; cursor: pointer; color: var(--white); font: inherit;
  background:
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(5, 6, 13, .55) 3px 4px),
    radial-gradient(var(--slate) 1px, transparent 0) 0 0 / 24px 24px,
    var(--night);
}
/* Two short sentences, one to a line where they fit. */
.poster-title { margin: 0; padding: 0 24px; max-width: 44em; text-align: center; font-family: var(--head); font-size: clamp(12px, 1.8vw, 24px); line-height: 1.6; }
.poster-play { border: 0; background: none; cursor: pointer; padding: 8px; display: inline-flex; align-items: center; gap: 12px; font-family: var(--head); font-size: clamp(10px, 1.4vw, 14px); color: var(--gold); text-transform: uppercase; }
.btn .tri { border-left-color: var(--ink); border-left-width: 10px; border-top-width: 7px; border-bottom-width: 7px; }
.tri { flex: none; width: 0; height: 0; border-left: 14px solid var(--gold); border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
/* "Press start" on the tangerine band: soot black, its label and triangle in tangerine. */
.btn-soot { --bg: var(--soot); --hi: #3d322b; --fg: var(--tangerine); }
.btn-soot:hover { --bg: #2b231e; --hi: #5a4a3f; }
.btn-soot .tri { border-left-color: var(--tangerine); }
.poster-meta { font-family: var(--label); font-size: 13px; color: var(--fog); text-transform: uppercase; }
.poster:hover .poster-play { color: var(--white); }
.poster-play:focus-visible { outline-offset: 2px; }
/* The section's own padding, as in the one before, is the room the label hops up into when the video plays. */
.demo-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; }
.demo-row .cabinet { margin: 0; max-width: none; }
.demo-row .transcript { grid-column: 1; margin-top: 6px; }
.chapters { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.chapters .lbl { margin-bottom: 4px; }
.chapters button {
  display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px 9px; cursor: pointer;
  font: 400 12px/1 var(--head); text-transform: uppercase; color: var(--white); background: var(--navy);
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink);
}
.chapters button b { color: var(--ink); background: var(--gold); padding: 3px 5px 2px; font-weight: 400; }
.chapters button:hover, .chapters button.on { box-shadow: inset 0 0 0 2px var(--cyan), 4px 4px 0 0 var(--ink); }
.chapters button:active { transform: translate(4px, 4px); box-shadow: inset 0 0 0 2px var(--cyan); }

/* ---------- Waitlist ---------- */
.waitlist { text-align: center; background: var(--ink); border-top: 4px solid var(--slate); }
.coin-line { margin-top: 0; font-family: var(--head); font-size: 14px; color: var(--gold); text-transform: uppercase; }
.coin-line { display: inline-flex; align-items: center; gap: 12px; } /* its number, then the blinking line */
.waitlist h2 { margin-top: 14px; }
.waitlist .lead { margin: 18px auto 0; }
/* The form as the logo: an orange pixel tile (stepped corners) holding four ink blocks, every other one
   pushed right, the last a short stub that is the button. The blocks keep the mark's proportions (in cqi of
   the stack): long blocks 90.9% wide, the push 9.1%, the stub 42.4%, a third less tall than the mark's. */
.form { max-width: 420px; margin: 40px auto 0; text-align: left; }
.tile-form { padding: 40px 40px 26px; background: var(--tangerine);
  clip-path: polygon(0 12px, 4px 12px, 4px 4px, 12px 4px, 12px 0, calc(100% - 12px) 0, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 12px, 100% 12px,
    100% calc(100% - 12px), calc(100% - 4px) calc(100% - 12px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) 100%,
    12px 100%, 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 12px), 0 calc(100% - 12px)); }
.logo-form { container-type: inline-size; display: grid; max-width: 300px; margin-inline: auto; width: 100%; }
.logo-form .block ~ .block { margin-top: 3.94cqi; }
.logo-form .block {
  display: block; width: 90.9cqi; aspect-ratio: 27.62 / 6.14; height: auto; margin: 0; border: 0; border-radius: 0; padding: 0 6cqi;
  font: 500 clamp(13px, 5cqi, 15px) var(--body); color: var(--white); background-color: rgba(22, 18, 15, .55); outline: none; appearance: none;
}
.logo-form .push { margin-left: 9.1cqi; }
.logo-form .block:not(.stub):hover { background-color: rgba(22, 18, 15, .65); }
.logo-form .block:not(.stub):focus { background-color: rgba(22, 18, 15, .82); }
.logo-form .block::placeholder { color: rgba(255, 236, 224, .75); }
.logo-form .block:focus-visible { box-shadow: 0 0 0 3px var(--soot), 0 0 0 6px var(--white); }
.logo-form select { cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255, 236, 224, .85) 50%), linear-gradient(-45deg, transparent 50%, rgba(255, 236, 224, .85) 50%);
  background-position: calc(100% - 6cqi - 6px) 50%, calc(100% - 6cqi) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.logo-form select:has(option[value=""]:checked) { color: rgba(255, 236, 224, .75); }
.logo-form option { color: var(--white); background: var(--soot); }
.logo-form .stub {
  width: 42.4cqi; aspect-ratio: 12.89 / 6.14; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer;
  background-color: var(--soot); color: var(--tangerine); font: 400 clamp(10px, 3.6cqi, 12px)/1 var(--head); text-transform: uppercase; white-space: nowrap;
  box-shadow: 4px 4px 0 0 rgba(22, 18, 15, .4);
}
.logo-form .stub:hover { background-color: #2a201a; transform: translateX(4px); }
.logo-form .stub:active { transform: translate(4px, 4px); box-shadow: none; }
.logo-form .stub:disabled { opacity: .6; cursor: progress; }
.logo-form .stub span:last-child { animation: blink 1.1s steps(1) infinite; }
.tile-form .msg { color: var(--soot); font-weight: 600; text-align: center; }
.tile-form .fine { color: rgba(22, 18, 15, .75); text-align: center; }
.tile-form.done { clip-path: none; background: none; padding: 0; }
.tile-form .thanks { padding: 26px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 6px 6px 0 0 var(--ink); }
.msg { min-height: 1.6em; margin-top: 14px; color: var(--coral); font-size: 14px; }
.fine { color: var(--fog); font-size: 13px; }
.thanks { display: none; text-align: center; padding: 10px 0; }
.thanks img { width: 48px; height: 48px; display: block; margin: 0 auto 14px; }
.thanks b { font-family: var(--head); font-weight: 400; font-size: 16px; color: var(--mint); }
.thanks p { margin-top: 12px; color: var(--cloud); }
.form.done .fields { display: none; }
.form.done .thanks { display: block; }
/* Wide screens: the form on the left, the text on its right, left aligned. */
@media (min-width: 1100px) {
  .waitlist .wrap { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 72px; align-items: center; text-align: left; }
  .waitlist .wl-text { grid-column: 2; grid-row: 1; }
  .waitlist .form { grid-column: 1; grid-row: 1; margin: 0; }
  .waitlist .lead { margin-left: 0; }
}

/* ---------- Footer ---------- */
footer { background: var(--ink); border-top: 2px solid var(--slate); padding: 28px 0 36px; font-size: 13px; color: var(--fog); }
footer .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
/* The mark on the footer's left: the logo building itself, opening into the block editor and folding back (main.js),
   at its full design, scaled down by half (its editor's rows have fixed sizes). */
.foot-mark { display: block; flex: none; }
.foot-mark .arena { width: 300px; max-width: none; margin: -48px 0; zoom: .5; }
footer .alt { font-family: var(--label); text-transform: uppercase; font-size: 14px; color: var(--gold); }
/* The line, Privacy and the way to the classic page, as on the classic page: in the footer's row on desktops; stacked
   beside the mark, aligned left, on tablets; under a bigger mark, centred, on phones. */
.foot-info { display: contents; }
@media (max-width: 1119px) { /* up to where the row fits in pixel type */
  footer .wrap { flex-wrap: nowrap; justify-content: flex-start; gap: 36px; }
  .foot-info { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 600px) {
  footer .wrap { flex-direction: column; gap: 28px; }
  .foot-info { align-items: center; text-align: center; }
  .foot-mark .arena { margin: -40px 0; zoom: .7; }
}

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(16px); transition: opacity .3s steps(3), transform .3s steps(3); }
.js .reveal[data-d="1"] { transition-delay: .1s; }
.js .reveal[data-d="2"] { transition-delay: .2s; }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .links { display: none; }
  .menu-btn { display: block; }
  .hud .btn-go { margin-left: auto; }
}
@media (max-width: 980px) {
  section { padding: 84px 0; }
  .arena { max-width: 460px; }
  .numbers, .pillars { grid-template-columns: 1fr; }
  .howto { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .numbers { gap: 48px; }
  .stat .ff { left: 24px; top: calc(100% - 14px); width: 72px; aspect-ratio: 12 / 17; translate: none; background-image: url(../assets/arcade/ff-down.svg); }
  .stat .ff.stacked-only { display: block; }
  .stat .ff.from-prev { display: none; }
  /* Stacked: the 10× across the top, then each step on the left with what it leaves behind on its right. */
  .numbers { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); column-gap: 16px; }
  .numbers .stat:nth-child(1) { grid-column: 1 / -1; grid-row: 1; }
  .numbers .stat:nth-child(2) { grid-column: 1; grid-row: 2; }
  .numbers .stat:nth-child(3) { grid-column: 1; grid-row: 3; }
  .numbers .stat:nth-child(4) { grid-column: 2; grid-row: 2; }
  .numbers .stat:nth-child(5) { grid-column: 2; grid-row: 3; }
  .stat.waste .rest { flex-direction: column; align-items: flex-start; gap: 10px; }
  .stage, .agents { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .stage:nth-child(even) .stage-copy { order: 0; }
  .band h2, .band .lead { max-width: 62%; } /* room on the right for the flag beside the text, as on the classic page */
}
@media (max-width: 640px) {
  .wrap { padding: 0 16px; }
  section { padding: 68px 0; }
  .hero { padding: 48px 0 0; }
  .hud .wrap { gap: 10px; height: 56px; }
  .mobile-menu { padding: 6px 16px 18px; }
  .hud .lockup .word, .score span { display: none; }
  .hide-s { display: none; }
  .connect-select { display: block; position: relative; z-index: 4; width: min(100%, 320px); margin-top: 6px; }
  .connect-select select { width: 100%; min-height: 48px; padding: 12px 36px 12px 14px; font: 400 9px/1.2 var(--head); text-transform: uppercase; color: var(--white); background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink); border-radius: 0; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(-45deg, transparent 50%, var(--gold) 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
  .connect-select select.on { box-shadow: inset 0 0 0 2px var(--c, var(--gold)), 4px 4px 0 0 var(--ink); color: var(--gold); }
  .who.bubble .nm { display: none; }
  .px-editor { width: 180%; }
  .market { width: 120px; padding: 8px; } .mk-item small { white-space: normal; } .mk-item img { width: 30px; height: 30px; }
  .ff-down { margin-left: 32px; width: 56px; }
  .hub-body { padding: 14px; } .hub-agents em { display: none; }
  .demo-title { font-size: 9px; }
  /* No room for the heading above the cabinet here: the label goes up alone. */
  .playing .demo-title { display: none; }
  .screen:has(.poster:not([hidden])) { aspect-ratio: auto; min-height: 280px; }
  .poster { padding-top: 40px; }
  .verdict { flex-direction: column; gap: 10px; }
  .tile-form { padding: 32px 22px 20px; }
  .lead, .hero .lead { font-size: 16px; }
  .ava { width: 44px; height: 44px; }
  .who b { font-size: 9px; }
  .who .tag { font-size: 10px; padding: 5px 6px 4px; }
  .core { width: 38%; }
  .ready { font-size: 8px; }
  .cabinet { padding: 10px; }
  .demo-row { gap: 10px; } .chapters { gap: 6px; } .chapters .lbl { font-size: 9px; } .chapters button { padding: 6px 7px 5px; font-size: 9px; gap: 6px; box-shadow: inset 0 0 0 2px var(--slate), 2px 2px 0 0 var(--ink); } .chapters button b { padding: 2px 3px 1px; }
  .poster { gap: 10px; }
  .poster-meta { font-size: 11px; }
  .art { padding: 12px; }
  .stages { gap: 64px; }
  .term pre { font-size: 12px; padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body::after { display: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .reveal, .js .wipe { opacity: 1; transform: none; }
  .js .stat .power span { width: calc(var(--w) * 100%); }
  .pa-row, .plan-anim .pill, .stat .ff { visibility: visible; }
}

/* ---------- Screenshots: responsive sizes ---------- */
.shot picture { display: block; }

/* ---------- Where the numbers come from ---------- */
/* ---------- The numbers as the app's graph view, in pixels ---------- */
/* A dotted canvas in a pixel frame; graph cards, each with its label over it (like "REQUIREMENT" in the app); and from
   each step a pixel wire, from one point, splitting to the two cards it leads to (main.js). No chevrons. */
.numbers.graph { position: relative; padding: 52px 36px 36px; row-gap: 52px; background: radial-gradient(var(--slate) 1px, transparent 1.4px) 0 0 / 16px 16px, var(--night);
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 8px 8px 0 0 var(--ink); }
.numbers.graph .stat .ff { display: none !important; }
.numbers.graph .stat { z-index: 1; padding: 20px 20px 18px; }
.numbers.graph .stat .via { position: absolute; left: 2px; bottom: calc(100% + 10px); margin: 0; display: flex; align-items: center; gap: 7px; font-size: 8px; color: var(--fog); }
.numbers.graph .stat .via::before { content: ""; width: 8px; height: 8px; box-shadow: inset 0 0 0 2px currentColor; }
/* Each label's line icon, as in the classic page: a rocket at the start, a team, a dartboard with a dart that missed
   the bull's eye, and a sad face for what's left behind. */
.numbers.graph .stat .via.start::before { width: 14px; height: 14px; box-shadow: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E") center / contain no-repeat; }
.numbers.graph .stat .via.team::before { width: 14px; height: 14px; box-shadow: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E") center / contain no-repeat; }
.numbers.graph .stat .via.goal::before { width: 16px; height: 16px; box-shadow: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='15.5' r='8'/%3E%3Ccircle cx='8.5' cy='15.5' r='4'/%3E%3Ccircle cx='8.5' cy='15.5' r='1'/%3E%3Cpath d='M14 10 22.5 1.5M22.5 1.5h2.5M22.5 1.5V-1M20.5 3.5h3M20.5 3.5V0.5'/%3E%3Cpath d='M14 10 17.5 6.5' stroke-width='3.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-1 -1 26 26' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='15.5' r='8'/%3E%3Ccircle cx='8.5' cy='15.5' r='4'/%3E%3Ccircle cx='8.5' cy='15.5' r='1'/%3E%3Cpath d='M14 10 22.5 1.5M22.5 1.5h2.5M22.5 1.5V-1M20.5 3.5h3M20.5 3.5V0.5'/%3E%3Cpath d='M14 10 17.5 6.5' stroke-width='3.6'/%3E%3C/svg%3E") center / contain no-repeat; }
.numbers.graph .stat.waste .via::before { width: 14px; height: 14px; box-shadow: none; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M16 16s-1.5-2-4-2-4 2-4 2'/%3E%3Cline x1='9' y1='9' x2='9.01' y2='9'/%3E%3Cline x1='15' y1='9' x2='15.01' y2='9'/%3E%3C/svg%3E") center / contain no-repeat; }
.numbers.graph .stat.waste { align-self: start; } /* what's left behind: as tall as its pills */
.numbers.graph .stat.waste .via { color: var(--coral); }
.numbers.graph .stat .big { font-size: clamp(22px, 2.6vw, 30px); margin: 12px 0 16px; }
.numbers.graph .stat:nth-child(1) .big { font-size: clamp(36px, 4.6vw, 56px); }
.numbers.graph .rest { gap: 10px; }
.numbers.graph .pill { font-size: 11px; }
@media (min-width: 981px) {
  .numbers.graph { grid-template-columns: auto auto auto; justify-content: space-between; column-gap: 0; }
  .numbers.graph .stat { justify-self: start; }
  .numbers.graph .stat:nth-child(1) { align-self: center; } /* as tall as its content, in the middle of the two rows */
  .numbers.graph .stat:nth-child(1) { width: 230px; }
  .numbers.graph .stat:nth-child(2), .numbers.graph .stat:nth-child(4) { width: 270px; }
  .numbers.graph .stat:nth-child(3), .numbers.graph .stat:nth-child(5) { width: 250px; }
}
@media (max-width: 980px) { .numbers.graph { padding: 46px 16px 22px; row-gap: 108px; } } /* room for the wires to split above the labels */
.g-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.g-links g > path { fill: none; stroke-width: 4; stroke-linecap: butt; }
.g-links g > path.on { stroke: var(--gold); stroke-dasharray: 8 8; animation: g-march .5s steps(4) infinite; }
.g-links g > path.lost { stroke: var(--red); stroke-dasharray: 4 6; }
.g-links rect { fill: var(--gold); } /* where a step splits */
/* The graph builds up from the first card (main.js): each wire runs out of its card, in steps (a mask over it, drawn
   out along it), and the card it leads to steps in, in place, where it lands. */
.js .numbers.graph .stat.reveal { transform: none; transition: opacity .3s steps(3); transition-delay: 0s; }
.g-links mask path { fill: none; stroke: #fff; stroke-width: 20; stroke-linecap: square; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.g-links mask path.drawn { stroke-dashoffset: 0; transition: stroke-dashoffset .6s steps(10); }
.numbers.graph .g-links > rect { opacity: 0; transition: opacity .2s steps(2); }
.numbers.graph .g-links > rect.lit { opacity: 1; }
@keyframes g-march { to { stroke-dashoffset: -16; } }
@media (prefers-reduced-motion: reduce) { .g-links g > path.on { animation: none; } }

.tokens .source { font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--fog); }

/* ---------- The demo's transcript ---------- */
.transcript { margin-top: 34px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 6px 6px 0 0 var(--ink); }
.transcript summary { cursor: pointer; padding: 14px 18px 12px; font: 400 10px/1.4 var(--head); text-transform: uppercase; color: var(--cloud); list-style: none; }
.transcript summary::-webkit-details-marker { display: none; }
.transcript summary::before { content: "▶ "; color: var(--tangerine); }
.transcript[open] summary::before { content: "▼ "; }
.transcript-body { padding: 0 18px 18px; max-width: 760px; }
.transcript-body h3 { margin: 18px 0 8px; font: 400 10px/1.4 var(--head); text-transform: uppercase; color: var(--tangerine); }
.transcript-body p { margin: 0 0 10px; font-size: 15px; }

/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 14px; max-width: 860px; margin-top: 40px; }
.qa { background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink); }
/* Stepped like the logo's blocks, loosely: each tile starts a few 12px steps further in or not, unevenly, and all of
   them end on the same right edge. Narrower on phones. */
.qa { margin-left: min(var(--in, 0px), 6vw); }
.qa:nth-child(2) { --in: 36px; } .qa:nth-child(3) { --in: 12px; } .qa:nth-child(4) { --in: 48px; }
.qa:nth-child(6) { --in: 24px; } .qa:nth-child(7) { --in: 12px; }
.qa summary { cursor: pointer; display: flex; align-items: center; gap: 14px; padding: 16px 18px; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary h3 { font-size: clamp(11px, 1.1vw, 13px); }
.qa summary::after { content: "+"; margin-left: auto; font: 400 14px/1 var(--head); color: var(--tangerine); }
.qa[open] summary::after { content: "−"; }
.qa[open] { box-shadow: inset 0 0 0 2px var(--tangerine), 4px 4px 0 0 var(--ink); }
.qa p { padding: 0 18px 18px; font-size: 15px; max-width: 720px; }
.tile-form .fine a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
footer .priv { font-family: var(--label); text-transform: uppercase; font-size: 14px; color: var(--fog); }

/* ---------- Free play: the live app (../app/) ---------- */
.try .head { margin-bottom: 44px; }
.app-window { position: relative; background: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--steel), 10px 10px 0 3px var(--ink); }
.app-chrome { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px; background: var(--ink); border-bottom: 4px solid transparent; border-image: var(--sweep) 1; font: 400 12px var(--label); text-transform: uppercase; color: var(--fog); }
.app-chrome i { width: 10px; height: 10px; background: var(--slate); }
.app-chrome i:first-child { background: var(--coral); }
.app-chrome span { flex: 1; text-align: center; margin-right: 52px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.try { padding-top: 144px; }
/* Three live views, stacked: the desktop window behind sits lower right, smaller, its right edge peeking out; the
   phone stands at the left, its left edge peeking out. Views behind are dimmed. A click on one, or the switch,
   brings it to the front (../showcase.js). */
.try-stack { --peek: 170px; --ppeek: 120px; --drop: 28px; width: min(1360px, 100vw - 48px); margin-left: 50%; translate: -50% 0; }
/* The phone stands on the same line as the graph window behind: that one is dropped by --drop and scaled to .95 about
   its middle, so its bottom is --drop, less 2.5% of its height (the screen, 65vh, and its 48px frame), below the stack's.
   Behind, the phone is never taller than the document window: its scale follows that window's height (--ps-back,
   showcase.js), up to .7. */
.try-stack { --win-h: calc(clamp(454px, 65vh, 632px) + 48px); --ps: var(--ps-back, .7); }
.try-windows { position: relative; display: grid; }
.try-windows .try-window { grid-area: 1 / 1; z-index: 2; width: calc(100% - var(--peek) - var(--ppeek)); transform: translateX(var(--ppeek)); transform-origin: right center; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
.try-stack[data-desk="page"] [data-view="graph"], .try-stack[data-desk="graph"] [data-view="page"] { z-index: 1; transform: translate(calc(var(--ppeek) + var(--peek)), var(--drop)) scale(.95); }
.try-phone { position: absolute; left: 0; bottom: calc(.025 * var(--win-h) - var(--drop)); z-index: 1; width: calc(426px * var(--ps)); height: calc(898px * var(--ps)); transition: transform .7s cubic-bezier(.16, 1, .3, 1), width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1); }
/* In front, the phone grows to full size, so its text is as big as the desktop window's; it grows upward from
   its bottom edge. */
.try-stack[data-front="phone"] { --ps: 1; }
.try-stack[data-front="phone"] .try-phone { z-index: 3; transform: translate(32px, calc(var(--drop) * -.5)); }
.phone { width: 426px; height: 898px; padding: 12px; border-radius: 68px; transform: scale(var(--ps)); transform-origin: 0 0; transition: transform .7s cubic-bezier(.16, 1, .3, 1); }
/* The phone in pixels: stepped corners instead of round ones, a chunky two-tone bezel, a hard drop shadow. */
.try-phone { filter: drop-shadow(12px 12px 0 var(--ink)); }
.phone { position: relative; border-radius: 0; background: var(--steel); clip-path: polygon(0px 64px, 0px 56px, 0px 48px, 8px 48px, 8px 40px, 8px 32px, 16px 32px, 16px 24px, 24px 24px, 24px 16px, 32px 16px, 32px 8px, 64px 8px, 64px 0px, calc(100% - 64px) 0px, calc(100% - 64px) 8px, calc(100% - 32px) 8px, calc(100% - 32px) 16px, calc(100% - 24px) 16px, calc(100% - 24px) 24px, calc(100% - 16px) 24px, calc(100% - 16px) 32px, calc(100% - 8px) 32px, calc(100% - 8px) 40px, calc(100% - 8px) 48px, calc(100% - 0px) 48px, calc(100% - 0px) 56px, calc(100% - 0px) 64px, calc(100% - 0px) calc(100% - 64px), calc(100% - 0px) calc(100% - 56px), calc(100% - 0px) calc(100% - 48px), calc(100% - 8px) calc(100% - 48px), calc(100% - 8px) calc(100% - 40px), calc(100% - 8px) calc(100% - 32px), calc(100% - 16px) calc(100% - 32px), calc(100% - 16px) calc(100% - 24px), calc(100% - 24px) calc(100% - 24px), calc(100% - 24px) calc(100% - 16px), calc(100% - 32px) calc(100% - 16px), calc(100% - 32px) calc(100% - 8px), calc(100% - 64px) calc(100% - 8px), calc(100% - 64px) calc(100% - 0px), 64px calc(100% - 0px), 64px calc(100% - 8px), 32px calc(100% - 8px), 32px calc(100% - 16px), 24px calc(100% - 16px), 24px calc(100% - 24px), 16px calc(100% - 24px), 16px calc(100% - 32px), 8px calc(100% - 32px), 8px calc(100% - 40px), 8px calc(100% - 48px), 0px calc(100% - 48px), 0px calc(100% - 56px), 0px calc(100% - 64px)); }
.phone::before { content: ""; position: absolute; inset: 4px; background: var(--slate); clip-path: polygon(0px 60px, 0px 52px, 0px 44px, 8px 44px, 8px 36px, 8px 28px, 16px 28px, 16px 20px, 24px 20px, 24px 12px, 40px 12px, 40px 4px, 60px 4px, 60px 0px, calc(100% - 60px) 0px, calc(100% - 60px) 4px, calc(100% - 40px) 4px, calc(100% - 40px) 12px, calc(100% - 24px) 12px, calc(100% - 24px) 20px, calc(100% - 16px) 20px, calc(100% - 16px) 28px, calc(100% - 8px) 28px, calc(100% - 8px) 36px, calc(100% - 8px) 44px, calc(100% - 0px) 44px, calc(100% - 0px) 52px, calc(100% - 0px) 60px, calc(100% - 0px) calc(100% - 60px), calc(100% - 0px) calc(100% - 52px), calc(100% - 0px) calc(100% - 44px), calc(100% - 8px) calc(100% - 44px), calc(100% - 8px) calc(100% - 36px), calc(100% - 8px) calc(100% - 28px), calc(100% - 16px) calc(100% - 28px), calc(100% - 16px) calc(100% - 20px), calc(100% - 24px) calc(100% - 20px), calc(100% - 24px) calc(100% - 12px), calc(100% - 40px) calc(100% - 12px), calc(100% - 40px) calc(100% - 4px), calc(100% - 60px) calc(100% - 4px), calc(100% - 60px) calc(100% - 0px), 60px calc(100% - 0px), 60px calc(100% - 4px), 40px calc(100% - 4px), 40px calc(100% - 12px), 24px calc(100% - 12px), 24px calc(100% - 20px), 16px calc(100% - 20px), 16px calc(100% - 28px), 8px calc(100% - 28px), 8px calc(100% - 36px), 8px calc(100% - 44px), 0px calc(100% - 44px), 0px calc(100% - 52px), 0px calc(100% - 60px)); }
.phone::after { content: ""; position: absolute; left: 6px; top: 96px; width: 4px; height: 140px; background: var(--fog); opacity: .5; }
.phone-screen { position: relative; width: 402px; height: 874px; border-radius: 0; overflow: hidden; background: #121116; clip-path: polygon(0px 52px, 0px 44px, 0px 36px, 8px 36px, 8px 28px, 8px 20px, 16px 20px, 16px 12px, 32px 12px, 32px 4px, 52px 4px, 52px 0px, calc(100% - 52px) 0px, calc(100% - 52px) 4px, calc(100% - 32px) 4px, calc(100% - 32px) 12px, calc(100% - 16px) 12px, calc(100% - 16px) 20px, calc(100% - 8px) 20px, calc(100% - 8px) 28px, calc(100% - 8px) 36px, calc(100% - 0px) 36px, calc(100% - 0px) 44px, calc(100% - 0px) 52px, calc(100% - 0px) calc(100% - 52px), calc(100% - 0px) calc(100% - 44px), calc(100% - 0px) calc(100% - 36px), calc(100% - 8px) calc(100% - 36px), calc(100% - 8px) calc(100% - 28px), calc(100% - 8px) calc(100% - 20px), calc(100% - 16px) calc(100% - 20px), calc(100% - 16px) calc(100% - 12px), calc(100% - 32px) calc(100% - 12px), calc(100% - 32px) calc(100% - 4px), calc(100% - 52px) calc(100% - 4px), calc(100% - 52px) calc(100% - 0px), 52px calc(100% - 0px), 52px calc(100% - 4px), 32px calc(100% - 4px), 32px calc(100% - 12px), 16px calc(100% - 12px), 16px calc(100% - 20px), 8px calc(100% - 20px), 8px calc(100% - 28px), 8px calc(100% - 36px), 0px calc(100% - 36px), 0px calc(100% - 44px), 0px calc(100% - 52px)); }
.phone-status b { font: 400 13px/1 var(--head); }
.phone-status .island { border-radius: 0; clip-path: polygon(0px 12px, 0px 8px, 4px 8px, 4px 4px, 12px 4px, 12px 0px, calc(100% - 12px) 0px, calc(100% - 12px) 4px, calc(100% - 4px) 4px, calc(100% - 4px) 8px, calc(100% - 0px) 8px, calc(100% - 0px) 12px, calc(100% - 0px) calc(100% - 12px), calc(100% - 0px) calc(100% - 8px), calc(100% - 4px) calc(100% - 8px), calc(100% - 4px) calc(100% - 4px), calc(100% - 12px) calc(100% - 4px), calc(100% - 12px) calc(100% - 0px), 12px calc(100% - 0px), 12px calc(100% - 4px), 4px calc(100% - 4px), 4px calc(100% - 8px), 0px calc(100% - 8px), 0px calc(100% - 12px)); }
.phone-status .battery { border-radius: 0; border-width: 2px; }
/* The app runs edge to edge, under the status bar, which sits on a dark blur that fades out downward, so the time
   and battery stay readable over anything. */
.phone-status { position: absolute; z-index: 1; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 54px; padding: 0 34px 0 46px; pointer-events: none; font: 600 16px/1 -apple-system, var(--sans, system-ui), sans-serif; color: #f1f0f4; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }
.phone-status::before { content: ""; position: absolute; z-index: -1; inset: 0 0 -18px; background: linear-gradient(rgba(0, 0, 0, .7), rgba(0, 0, 0, 0)); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(#000 50%, transparent); mask-image: linear-gradient(#000 50%, transparent); }
.phone-status .island { position: absolute; left: 50%; top: 11px; width: 126px; height: 37px; margin-left: -63px; border-radius: 20px; background: #000; }
.phone-status .battery { width: 26px; height: 12px; padding: 1.5px; border: 1.5px solid rgba(241, 240, 244, .6); border-radius: 4px; background: #f1f0f4 content-box; }
.phone-screen .try-live { position: absolute; left: 0; top: 0; width: 402px; height: 874px; }
/* A view behind the front window is a screenshot until a visitor reaches for it; then its live app loads under
   the screenshot and takes its place once it has drawn (.live, ../showcase.js). */
.try-live { position: absolute; inset: 0; overflow: hidden; }
.try-live img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left top; }
.try-live iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; visibility: hidden; }
.try-live.live iframe { visibility: inherit; } /* hidden with its view, when the phone shows the other one */
.try-live.live img { display: none; }
/* Reached for before its app is ready: a light sweeps over the screenshot until it is. */
.try-live.loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(46, 207, 244, .3) 50%, transparent 70%) 0 0 / 250% 100%;
  animation: try-load 1.1s linear infinite;
}
/* A view that is loading shows at full brightness, so the light reads. */
.try-windows [data-view]:has(.try-live.loading) > :not(.try-back) { filter: none; }
@keyframes try-load { from { background-position: 125% 0; } to { background-position: -125% 0; } }
@media (prefers-reduced-motion: reduce) { .try-live.loading::after { animation-duration: 3s; } }
/* The phone shows the view of the desktop window in front. */
.try-stack:not([data-desk="page"]) [data-phone="page"], .try-stack:not([data-desk="graph"]) [data-phone="graph"] { visibility: hidden; }
/* Dimmed: every view but the one in front. */
.try-windows [data-view] > :not(.try-back) { transition: filter .5s; }
.try-stack:not([data-front="page"]) [data-view="page"] > :not(.try-back),
.try-stack:not([data-front="graph"]) [data-view="graph"] > :not(.try-back),
.try-stack:not([data-front="phone"]) [data-view="phone"] > :not(.try-back) { filter: brightness(.4) saturate(.6); }
.try-stack:not([data-front="page"]) [data-view="page"]:hover > :not(.try-back),
.try-stack:not([data-front="graph"]) [data-view="graph"]:hover > :not(.try-back),
.try-stack:not([data-front="phone"]) [data-view="phone"]:hover > :not(.try-back) { filter: brightness(.6) saturate(.8); }
.try-back { display: none; position: absolute; inset: 0; z-index: 2; padding: 0; border: 0; background: transparent; cursor: pointer; }
.try-stack:not([data-front="page"]) [data-view="page"] .try-back,
.try-stack:not([data-front="graph"]) [data-view="graph"] .try-back,
.try-stack:not([data-front="phone"]) [data-view="phone"] .try-back { display: block; }
/* A view's name, upright in the strip that peeks out: on the right for a window, on the left for the phone. While
   the phone is in front, the desktop window under it shows no name. */
.try-back span { position: absolute; right: calc(var(--peek) / 2 - 14px); top: 50%; writing-mode: vertical-rl; transform: translateY(-50%); white-space: nowrap; }
/* On the right edge the label reads top to bottom; on the phone, at the left edge, bottom to top. */
.try-phone .try-back span { right: auto; left: calc(var(--ppeek) / 2 - 14px); transform: translateY(-50%) rotate(180deg); }
.try-stack[data-front="phone"][data-desk="page"] [data-view="page"] .try-back span,
.try-stack[data-front="phone"][data-desk="graph"] [data-view="graph"] .try-back span { display: none; }
.try-back span { padding: 12px 6px 10px; font: 400 10px var(--head); text-transform: uppercase; color: var(--gold); background: var(--ink); border: 2px solid var(--slate); }
.try-back:hover span { color: var(--ink); background: var(--gold); border-color: var(--ink); }
.try-switches { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 28px; margin-bottom: 26px; }
/* Above phones the views are picked from their edges (the side tabs); the switches show on phones only, where the
   views behind don't peek out. */
@media (min-width: 641px) { .try-switches { display: none; } }
/* With the phone in front, which rises over the left of the section, the switches move to the right, in line
   with the right edge of the desktop window. */
.try-stack[data-front="phone"] .try-switches { justify-content: flex-end; padding-right: var(--peek); }
.try-switch { display: flex; gap: 12px; }
.try-device button { display: inline-flex; align-items: center; gap: 8px; }
.try-device svg { width: 15px; height: 15px; margin-top: -2px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: square; }
.try-switch button {
  padding: 10px 14px 9px; cursor: pointer; font: 400 13px/1 var(--label); text-transform: uppercase; color: var(--fog); background: var(--navy);
  border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink);
}
.try-switch button:hover { color: var(--white); }
.try-switch button[aria-pressed="true"] { color: var(--white); box-shadow: inset 0 0 0 2px var(--cyan), 4px 4px 0 0 var(--ink); }
.try-screen { position: relative; height: clamp(454px, 65vh, 632px); background: #111013; }
.try-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* The picture of the document view, over the app until it has drawn (showcase.js). */
.try-shot { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: left top; pointer-events: none; transition: opacity .4s; }
.try-screen.live .try-shot { opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
/* The demos under the windows: each plays in the document view, and fills as it plays (../showcase.js). */
.try-demos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; max-width: 1120px; margin: 32px auto 0; }
.try-demos button {
  position: relative; display: flex; gap: 10px; align-items: center; padding: 15px 13px 14px; text-align: left; cursor: pointer; color: var(--cloud);
  background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink); transition: opacity .3s;
}
.try-demos button:hover { box-shadow: inset 0 0 0 2px var(--steel), 4px 4px 0 0 var(--ink); }
.try-demos b { flex: none; color: var(--ink); background: var(--steel); padding: 4px 6px 3px; font: 400 10px/1 var(--head); }
.try-demos span { display: grid; gap: 4px; }
.try-demos strong { font: 400 13px/1.3 var(--label); text-transform: uppercase; color: var(--white); }
.try-demos .playing { box-shadow: inset 0 0 0 2px var(--cyan), 4px 4px 0 0 var(--ink); }
.try-demos .playing b { background: var(--gold); }
/* The demo playing fills its card from left to right, in the yellow-to-orange steps of the highlighted words,
   dimmed under white text. It grows at one speed over the demo's whole length, in 32 even steps (--p, set by
   ../showcase.js; --p-steps). */
.try-demos button { --p-steps: 32; }
.try-demos button::after {
  content: ""; position: absolute; inset: 4px; z-index: 0; pointer-events: none; opacity: .3;
  background: linear-gradient(90deg, #ffc46b 0 20%, #ffad5e 20% 40%, var(--tangerine) 40% 60%, #f77a52 60% 80%, #ef6a5a 80% 100%);
  clip-path: inset(0 calc(100% - var(--p, 0) * 100%) 0 0);
}
.try-demos button > * { position: relative; z-index: 1; }
.try-demos button:not(.playing)::after { opacity: 0; transition: none; }
/* With the graph or the phone in front, the demos wait. */
/* Stacked in two columns or one: each card as tall as its own content, so the closed ones stay one line high. */
@media (max-width: 980px) { .try-deck, .try-demos { align-items: start; } }
/* Side by side (desktops), a closed card is always two title lines tall, whichever is open, and so is the arrow
   beside them: a switch only changes the open card. Stacked, each card is as tall as its own content. */
/* Stacked, only the first three cards of the wheel show: the one playing and the next two (../showcase.js); before
   the wheel first turns, the first three. */
@media (max-width: 980px) {
  .try-demos button[data-far] { display: none; }
  .try-demos:not(:has(button[data-far])) button:nth-of-type(n + 4) { display: none; }
}
.try-more:disabled { opacity: .35; cursor: default; pointer-events: none; } /* waits with the demos */
/* With another view in front the demos wait, dimmed; pointed at, they light up again (a click brings the document view back). */
.try-demos button.waiting { opacity: .35; transition: opacity .25s; }
.try-deck:hover .try-demos button.waiting { opacity: 1; }
.try-demos button:disabled { opacity: .35; cursor: default; pointer-events: none; }
@media (max-width: 980px) { .try-demos { grid-template-columns: 1fr; align-content: start; } } /* the cards one under the other, as close as side by side */
/* The spec-creation demo's Claude Code terminals, drawn over the document window (showcase.js): one, large, then four
   in a grid. In the cabinet's style: ink, slate edges, a pixel shadow, text appearing in steps. */
.demo-terms { position: absolute; inset: 0; z-index: 3; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; padding: 6% 7%; align-content: center; pointer-events: none; opacity: 0; transition: opacity .4s steps(4); background: rgba(5, 6, 13, .5); }
.demo-terms.on { opacity: 1; }
.demo-term { min-width: 0; background: var(--ink); border: 2px solid var(--slate); box-shadow: 6px 6px 0 0 rgba(5, 6, 13, .8); font: 400 12.5px/1.7 var(--body); color: var(--cloud); }
.demo-term.solo { grid-column: 1 / -1; font-size: 14px; }
.dt-bar { display: flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; background: var(--navy); border-bottom: 2px solid var(--slate); color: var(--fog); font: 400 10px var(--label); text-transform: uppercase; letter-spacing: .06em; }
.dt-bar i { width: 8px; height: 8px; background: var(--slate); }
.dt-bar i:first-child { background: var(--coral); }
.dt-bar span { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dt-body { min-height: 120px; padding: 14px 16px 16px; }
.demo-term.solo .dt-body { min-height: 200px; }
.dt-you { color: var(--white); }
.dt-line { white-space: pre-wrap; animation: dt-in .3s steps(3) both; }
.dt-dim { color: var(--fog); }
.dt-tool { color: var(--tangerine); }
.dt-ok { color: var(--mint); }
@keyframes dt-in { from { opacity: 0; } }
/* Closing the terminals. A lone one closes from its first square, as a window does: it goes red while the pointer is
   on the window, and shows its × under the pointer. Four, while the pointer is on the window, move apart toward the
   corners, and "Close all" comes in in their middle. */
.demo-term.closable { pointer-events: auto; }
.dt-close { flex: none; width: 8px; height: 8px; display: grid; place-items: center; padding: 0; border: 0; background: var(--coral); color: transparent; font: 400 7px/1 var(--head); cursor: pointer; }
.dt-close::before { content: "×"; }
.demo-term:hover .dt-close { background: var(--red); }
.dt-close:hover { width: 12px; height: 12px; margin: -2px; color: var(--ink); }
.demo-terms { transition: opacity .4s steps(4), gap .4s steps(5); }
.try-screen:hover .demo-terms.four { gap: 64px 140px; }
.dt-close-all { position: absolute; left: 50%; top: 50%; translate: -50% -50%; padding: 9px 14px 8px; border: 2px solid var(--slate); background: var(--ink); color: var(--cloud); font: 400 10px/1 var(--label); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap; box-shadow: 4px 4px 0 0 rgba(5, 6, 13, .8); cursor: pointer; pointer-events: none; opacity: 0; transition: opacity .3s steps(3); }
.try-screen:hover .dt-close-all { opacity: 1; pointer-events: auto; transition-delay: .2s; }
.dt-close-all:hover { color: var(--ink); background: var(--tangerine); border-color: var(--tangerine); }
/* A narrow window (the document view is under 600px wide from tablets down): the terminals stack, the four with
   their "Close all" above them, as wide as they are, shown while the pointer is on the window; a browser opens under
   its terminal. */
.try-screen { container-type: inline-size; }
@container (max-width: 599px) {
  .demo-terms, .demo-terms.pair { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 12px; align-content: safe center; }
  .demo-term, .demo-term.solo { font-size: 11px; }
  .dt-bar { height: 26px; }
  .dt-body, .demo-term.solo .dt-body { min-height: 0; padding: 8px 12px 10px; }
  .try-screen:hover .demo-terms.four { gap: 8px; }
  .dt-close-all { position: static; translate: none; order: -1; width: 100%; max-height: 0; padding-block: 0; border-width: 0; overflow: hidden; scale: 1;
    transition: color .2s, border-color .2s, opacity .3s, max-height .3s, padding .3s; }
  .try-screen:hover .dt-close-all { max-height: 40px; padding: 9px 14px 8px; border-width: 2px; }
  .db-view { height: 170px; }
}
/* The cards and, beside them, the button that turns to the other set (showcase.js): as tall as a card, 50px wide, in
   the cards' style with a dashed slate edge, tangerine when hovered. It sits on the right with the first set, on the
   left with the second, its arrow pointing back. Below the desktop layout it's a bar under the cards. */
.try-deck { display: grid; grid-template-columns: minmax(0, 1fr) 50px; gap: 14px; max-width: 1120px; margin: 32px auto 0; }
.try-deck .try-demos { max-width: none; margin: 0; }
.try-deck.p2 { grid-template-columns: 50px minmax(0, 1fr); }
.try-deck.p2 .try-more { order: -1; }
.try-demos button[hidden] { display: none; }
/* A demo's title, in its card for search engines and screen readers; showcase.js shows it over the window. */
.try-demos .vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.try-more { display: grid; place-items: center; padding: 0; border: 2px dashed var(--slate); background: var(--navy); color: var(--steel); box-shadow: 4px 4px 0 0 var(--ink); cursor: pointer; transition: border-color .2s steps(2), color .2s steps(2); }
.try-more:hover { border-color: var(--tangerine); color: var(--tangerine); }
.try-more:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.try-more svg { width: 16px; height: 14px; fill: currentColor; transition: scale .3s steps(2); }
.try-deck.p2 .try-more svg { scale: -1 1; }
/* Below desktops, one column: the cards in their own list, which turns like a wheel (their order changes), and a slim
   row for the button under them. */
@media (max-width: 980px) {
  .try-deck, .try-deck.p2 { grid-template-columns: minmax(0, 1fr); }
  .try-deck.p2 .try-more { order: 0; }
  .try-deck .try-demos { display: grid; }
  .try-more { height: 44px; }
}

/* The keys a demo presses, as pixel keycaps over the document window. */
.demo-keys { position: absolute; left: 0; right: 0; bottom: 72px; display: flex; justify-content: center; gap: 10px; pointer-events: none; }
.demo-keys kbd {
  display: grid; place-items: center; min-width: 46px; height: 46px; padding: 0 12px;
  font: 700 19px/1 var(--body); color: var(--gold); background: var(--navy); border: 2px solid var(--ink);
  box-shadow: inset 0 0 0 2px var(--slate), inset 0 -5px 0 0 var(--slate), 4px 4px 0 0 var(--ink);
  animation: key-in .18s steps(3), key-out .3s steps(3) 1.15s forwards;
}
@keyframes key-in { from { transform: translateY(8px); opacity: 0; } }
@keyframes key-out { to { opacity: 0; } }
@media (max-width: 600px) {
  .app-chrome span { margin-right: 0; }
  .try-screen { height: 518px; }
  .try-switches { flex-wrap: nowrap; gap: 8px; }
  .try-switch { gap: 6px; }
  .try-switch button { padding: 9px 8px 8px; font-size: 11px; }
  .try-device span { display: none; }
  .try-stack[data-front="phone"] .try-switches { justify-content: center; padding-right: 0; }
  .try-demos { grid-template-columns: 1fr; }
  /* No room to peek on a phone: the switch alone picks the view. */
  .try-stack, .try-stack[data-front="phone"] { --peek: 0px; --ppeek: 0px; --drop: 0px; --ps: .8; width: auto; margin-left: 0; translate: none; }
  .try-stack:not([data-front="page"]) [data-view="page"], .try-stack:not([data-front="graph"]) [data-view="graph"], .try-stack:not([data-front="phone"]) [data-view="phone"] { display: none; }
  .try-windows .try-window { transform: none; width: 100%; }
  .try-phone { position: relative; justify-self: center; transform: none !important; }
}

/* ---------- Separator under "Free play": a pixel branch of the graph view, links drawn and cards lit in turn ---------- */
.graphline { display: flex; align-items: center; gap: 18px; padding: 32px 0 50px; }
.graphline::before, .graphline::after { content: ""; flex: 1; height: 4px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.graphline svg { flex: none; overflow: visible; }
/* Kept in the background: the whole separator is dimmed. */
.graphline svg, .graphline .graph-keys { opacity: .6; }
.graphline .edges path { fill: none; stroke: var(--slate); stroke-width: 2; }
.graphline .flows path { fill: none; stroke: #1f6f88; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.graphline .cards rect { fill: var(--navy); stroke: var(--slate); stroke-width: 2; }
.graphline .cards .plan { stroke: #8a5236; }
.graphline .lines path { fill: none; stroke: var(--steel); stroke-width: 2; }
.graphline.in .flows path { animation: graph-link 5s steps(6) infinite; }
.graphline.in .cards rect:not(.plan) { animation: graph-card 5s steps(1) infinite; animation-delay: .35s; }
/* Each link draws in turn, and the card at its end lights up just after. */
.graphline.in .flows path:nth-child(2) { animation-delay: .5s; }
.graphline.in .flows path:nth-child(3) { animation-delay: 1s; }
.graphline.in .flows path:nth-child(4) { animation-delay: 1.5s; }
.graphline.in .cards rect:nth-child(3) { animation-delay: .85s; }
.graphline.in .cards rect:nth-child(4) { animation-delay: 1.35s; }
.graphline.in .cards rect:nth-child(5) { animation-delay: 1.85s; }
@keyframes graph-link { 0% { stroke-dashoffset: 1; opacity: 1; } 8%, 22% { stroke-dashoffset: 0; opacity: 1; } 30%, 100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes graph-card { 0%, 34%, 100% { stroke: var(--slate); fill: var(--navy); } 10% { stroke: #6e5a35; fill: #2a2a3a; } }
@media (prefers-reduced-motion: reduce) { .graphline.in .flows path, .graphline.in .cards rect { animation: none; } }

/* ---------- Separator under "Local and cloud": a block's panel buttons in pixels, opened in turn ---------- */
.panelline { display: flex; align-items: center; gap: 18px; padding-block: 16px; }
.panelline::before, .panelline::after { content: ""; flex: 1; height: 4px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.panelline .tools { display: flex; align-items: center; gap: 6px; padding: 6px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink); }
/* Kept in the background: dimmed like the other separators. */
.panelline .tools { opacity: .4; }
.panelline span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 8px 6px; font: 400 10px/1 var(--head); color: var(--fog); }
.panelline svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: square; stroke-linejoin: miter; }
.panelline i { width: 2px; height: 18px; margin-inline: 3px; background: var(--slate); }
.panelline.in .tools span { animation: panel-on 6s steps(1) infinite; }
.panelline.in .tools span:nth-of-type(2) { animation-delay: 0.7s; }
.panelline.in .tools span:nth-of-type(3) { animation-delay: 1.4s; }
.panelline.in .tools span:nth-of-type(4) { animation-delay: 2.1s; }
.panelline.in .tools span:nth-of-type(5) { animation-delay: 2.8s; }
.panelline.in .tools span:nth-of-type(6) { animation-delay: 3.5s; }
@keyframes panel-on { 0%, 10%, 100% { color: var(--fog); background: transparent; } 1% { color: var(--ink); background: var(--gold); } }
@media (prefers-reduced-motion: reduce) { .panelline.in .tools span { animation: none; } }


/* ---------- Local and cloud: the app's sidebar in both modes ---------- */
.sides { padding: 56px 0 80px; }
.sides .head { margin-bottom: 36px; }
.sides-row { display: flex; justify-content: center; align-items: flex-start; gap: 36px; }
.side { margin: 0; width: 316px; }
.side-shot { height: 400px; overflow: hidden; }
.side-shot img { display: block; width: 316px; height: auto; -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
/* The app's own colours and type, for the replay (as in pitch): it shows the app, not the arcade. */
.sbd { --text: #f1f0f4; --text-2: #b4b3bc; --muted: #807f89; --faint: #55545d; --line: #222128; --line-strong: #2e2d35;
  --raised: #151419; --orange: #ff8a4c; --sky: #7cc4f5; --ink: #16120f; --sans: Geist, -apple-system, system-ui, sans-serif;
  --mono: "Geist Mono", ui-monospace, monospace; background: #0e0d11; }
.sbd .tile { width: var(--s); height: var(--s); flex: none; } .sbd .tile .bg { fill: var(--orange); } .sbd .tile .b { fill: var(--ink); }
/* The Local side: a replay of the app's sidebar (main.js plays it). Rows come in as the replay opens them; the state
   is a class on .sbd-in: folder (opened), open (expanded), rtc (a plan expanded), hover, menu, pick, moved, toast. */
.sbd-in { position: relative; height: 100%; font: 400 13px var(--sans); color: var(--text-2); user-select: none;
  -webkit-mask-image: linear-gradient(#000 86%, transparent); mask-image: linear-gradient(#000 86%, transparent); }
.sbd .ic { flex: none; width: 15px; height: 15px; } .sbd .ic.sm { width: 13px; height: 13px; }
.sbd-head { display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 14px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; }
.sbd-head .tile { --s: 16px; } .sbd-head > .ic { color: var(--muted); }
.sbd-r { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.sbd-seg { display: grid; grid-template-columns: 1fr 1fr; margin: 10px 10px 8px; padding: 3px; border: 1px solid var(--line-strong); border-radius: 9px; background: #0b0a0e; }
.sbd-seg span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 26px; border-radius: 6px; color: var(--muted); }
.sbd-seg .on { background: var(--raised); color: var(--text); }
.sbd-row { position: relative; display: flex; align-items: center; gap: 8px; height: 26px; margin: 0 8px; padding: 0 8px; border-radius: 7px; white-space: nowrap; transition: background-color .15s; }
.sbd-row > .ic { color: var(--muted); }
.sbd kbd { padding: 1px 5px; border: 1px solid var(--line-strong); border-radius: 5px; font: 500 10px var(--mono); color: var(--muted); }
.sbd-count i { width: 5px; height: 5px; border-radius: 50%; background: var(--orange); margin-right: 6px; }
.sbd-label { margin: 18px 16px 6px; font: 500 10.5px var(--mono); letter-spacing: .1em; color: var(--faint); }
.sbd-mono { font: 400 11.5px var(--mono); color: var(--muted); }
.sbd-chev { display: inline-flex; color: var(--faint); }
.sbd-chev .ic { rotate: -90deg; transition: rotate .2s; }
.sbd-in.open .sbd-folder .sbd-chev .ic, .sbd-in.rtc [data-at="rtc"] .ic { rotate: 0deg; }
.sbd-file { padding-left: 22px; } .sbd-ver { padding-left: 36px; gap: 7px; }
.sbd-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--d); }
.sbd-badge { height: 20px; padding: 0 6px; border: 1px solid var(--line-strong); border-radius: 6px; font-size: 11.5px; color: var(--text-2); }
.sbd-plain { color: var(--faint); } .sbd-add { color: var(--muted); }
/* Rows the replay hasn't opened yet; they come in with a short fade and slide when it does. */
.sbd-folder, .sbd-in [data-in], .sbd-new, .sbd-more { display: none; }
.sbd-in.folder .sbd-folder, .sbd-in.open [data-in="1"], .sbd-in.rtc [data-in="2"] { display: flex; animation: sbd-in .3s ease-out backwards; }
.sbd-in.open [data-in="1"] { animation-delay: calc(var(--n, 0) * 45ms); }
@keyframes sbd-in { from { opacity: 0; transform: translateY(-4px); } }
.sbd-in.hover .sbd-cr { background: var(--raised); color: var(--text); }
.sbd-in.hover:not(.moved) .sbd-cr .sbd-more { display: inline-flex; }
.sbd-in.moved .sbd-new { display: inline-flex; animation: sbd-pop .35s cubic-bezier(.2, 1.5, .4, 1); }
@keyframes sbd-pop { from { opacity: 0; transform: scale(.6); } }
.sbd-row.press, .sbd-mi.press, .sbd-pr.press { background: rgba(255, 255, 255, .1); }
/* The file's menu, by the pointer, and the project picker, over the sidebar. */
.sbd-menu { position: absolute; z-index: 3; display: none; padding: 4px; min-width: 176px; border: 1px solid var(--line-strong); border-radius: 10px; background: #151419; box-shadow: 0 16px 40px -10px rgba(0, 0, 0, .8); }
.sbd-in.menu .sbd-menu { display: grid; animation: sbd-in .18s ease-out; }
.sbd-mi { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 10px; border-radius: 6px; font-size: 12.5px; white-space: nowrap; }
.sbd-mi > .ic { color: var(--muted); }
.sbd-mi.hi { background: rgba(255, 255, 255, .06); color: var(--text); }
.sbd-pick { position: absolute; z-index: 3; left: 18px; right: 18px; top: 112px; display: none; gap: 6px; padding: 12px; border: 1px solid var(--line-strong); border-radius: 12px; background: #151419; box-shadow: 0 0 0 999px rgba(5, 4, 6, .5), 0 20px 50px -10px rgba(0, 0, 0, .8); }
.sbd-in.pick .sbd-pick { display: grid; animation: sbd-in .2s ease-out; }
.sbd-pick b { display: flex; align-items: center; gap: 7px; color: var(--text); font-weight: 600; }
.sbd-pick small { margin-bottom: 4px; font-size: 11.5px; color: var(--muted); }
.sbd-pr { display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 12.5px; }
.sbd-pr > .ic { color: var(--muted); }
.sbd-pr em { margin-left: auto; font: 400 10.5px var(--mono); font-style: normal; color: var(--faint); }
.sbd-pr.hi { border-color: rgba(255, 138, 76, .5); background: rgba(255, 138, 76, .08); color: var(--text); }
/* The toast, as the app's but in Periferal's colours: the move's icon on an orange tile, what happened, and a button
   to dismiss it; a line along its foot counts down until it would go by itself. It rises from the sidebar's foot. */
.sbd { position: relative; }
.sbd-toast { position: absolute; z-index: 5; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; gap: 10px; padding: 9px 8px 9px 10px;
  border: 1px solid var(--line-strong); border-radius: 12px; background: #151419; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .9); overflow: hidden;
  font: 400 12px var(--sans); color: var(--text-2); opacity: 0; translate: 0 14px; transition: opacity .25s, translate .3s cubic-bezier(.2, .9, .3, 1); pointer-events: none; }
.sbd-in.toast ~ .sbd-toast { opacity: 1; translate: 0 0; }
.sbd-t-ic { display: grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(255, 138, 76, .14); color: var(--orange); }
.sbd-t-tx { display: grid; gap: 1px; min-width: 0; }
.sbd-t-tx b { font-weight: 600; font-size: 12.5px; color: var(--text); }
.sbd-t-tx small { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sbd-t-x { display: grid; place-items: center; flex: none; width: 24px; height: 24px; margin-left: auto; border-radius: 6px; color: var(--muted); transition: background-color .15s, color .15s; }
.sbd-t-x.press { background: rgba(255, 255, 255, .1); color: var(--text); }
.sbd-toast::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--orange); opacity: .7; transform-origin: left; transform: scaleX(0); }
.sbd-in.toast ~ .sbd-toast::after { animation: sbd-countdown 3s linear both; }
@keyframes sbd-countdown { from { transform: scaleX(1); } to { transform: scaleX(0); } }
/* The Cloud side's replay: the open plan is highlighted, with its author's avatar, its sections listing their counts.
   Comment reactions comes in when it moves to the cloud (.cr) and takes the highlight; .crx opens it. */
.sbd-on, .sbd-cplan { background: var(--raised); color: var(--text); }
.sbd-in.cr .sbd-on { background: transparent; color: var(--text-2); }
.sbd-cplan { display: none; }
.sbd-in.cr .sbd-cplan, .sbd-in.crx [data-in="3"] { display: flex; animation: sbd-in .3s ease-out backwards; }
.sbd-in.crx [data-at="crx"] .ic { rotate: 0deg; }
.sbd-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.sbd-av { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: #f7a072; color: #16120f; font: 700 8px var(--sans); }
.sbd-n { font: 400 11px var(--mono); color: var(--faint); }
/* Comment reactions flying over from the Local sidebar to its place in the Cloud one (main.js): a chip that lifts off,
   arcs across and lands, then the row lights up and settles. In the app's colours, outside both sidebars. */
.sides-row { position: relative; }
.sbd-fly { position: absolute; left: 0; top: 0; z-index: 10; display: flex; align-items: center; gap: 7px; padding: 5px 11px 5px 8px; pointer-events: none;
  border: 1px solid rgba(255, 138, 76, .6); border-radius: 9px; background: #1b1714; color: #f1f0f4; font: 500 12.5px Geist, -apple-system, system-ui, sans-serif; white-space: nowrap;
  box-shadow: 0 0 0 4px rgba(255, 138, 76, .12), 0 14px 34px -8px rgba(255, 138, 76, .45); }
.sbd-fly svg { width: 14px; height: 14px; color: #ff8a4c; }
.sbd-in.landing .sbd-cplan { visibility: hidden; animation: none; }
.sbd-in.cr .sbd-cplan.flash { animation: sbd-land 1.1s ease-out; }
@keyframes sbd-land { 0% { background-color: rgba(255, 138, 76, .3); box-shadow: inset 0 0 0 1px rgba(255, 138, 76, .8); } 100% { background-color: var(--raised); box-shadow: inset 0 0 0 1px transparent; } }
/* Teammates join the new plan: their avatars pop up next to Mia's, one by one (.av1–.av3), overlapping a little.
   Then the plan fades (.leaving) as the first plan opens again. */
.sbd-avs { gap: 0; }
.sbd-avs .sbd-av + .sbd-av { margin-left: -5px; }
.sbd-avs .sbd-av { box-shadow: 0 0 0 2px var(--raised); }
.sbd-avs .a1, .sbd-avs .a2, .sbd-avs .a3 { display: none; }
.sbd-in.av1 .sbd-avs .a1, .sbd-in.av2 .sbd-avs .a2, .sbd-in.av3 .sbd-avs .a3 { display: grid; animation: sbd-pop .35s cubic-bezier(.2, 1.6, .4, 1); }
.sbd-in.leaving .sbd-cplan, .sbd-in.leaving [data-in="3"] { opacity: 0; transition: opacity .5s; }
/* In arcade, the plan flies over as a pixel chip (square, the label font, a hard shadow) with two fading copies trailing
   it, and the row it lands on blinks gold in steps. */
.sbd-fly { gap: 6px; padding: 5px 9px 4px 7px; border: 2px solid var(--tangerine); border-radius: 0; background: var(--ink); color: var(--gold);
  font: 400 11px/1 var(--label); text-transform: uppercase; box-shadow: 3px 3px 0 0 var(--tangerine); }
.sbd-fly svg { width: 7px; height: 7px; fill: var(--tangerine); color: var(--tangerine); }
.sbd-fly.trail { box-shadow: none; }
.sbd-in.cr .sbd-cplan.flash { animation: sbd-land-px 1s steps(1); }
@keyframes sbd-land-px { 0%, 40% { box-shadow: inset 0 0 0 2px var(--gold-px, #ffd166); } 20%, 60%, 100% { box-shadow: inset 0 0 0 2px transparent; } 80% { box-shadow: inset 0 0 0 2px var(--gold-px, #ffd166); } }
/* The pointer: an arrow that glides between the rows it acts on, and dips as it clicks. */
.sbd-ptr { position: absolute; z-index: 6; left: 0; top: 0; width: 18px; height: 18px; fill: #fff; stroke: #0b0a0e; stroke-width: 1.4; stroke-linejoin: round;
  transition: translate .7s cubic-bezier(.5, 0, .2, 1), scale .12s; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.sbd-ptr.down { scale: .85; }
.side figcaption { display: grid; gap: 6px; margin-top: 18px; }
.side figcaption b { display: inline-flex; align-items: center; gap: 8px; }
.side figcaption svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* Over each side, who it's for and what they do: two lines, centred, in the pixel heading font. Wider than its side on
   desktops so each line stays whole; inside it, a size smaller, on narrower screens; wrapping when the sides stack. */
.side-h { --fs: 17px; margin: 0 -70px 20px; text-align: center; font-size: var(--fs); line-height: 1.5; white-space: nowrap; }
.side-move { display: grid; justify-items: center; gap: 8px; margin-top: calc(170px + 2 * 1.5 * 17px + 20px); } /* level with the shots' middles, under the headings */
@media (max-width: 999px) { .side-h { margin-inline: 0; font-size: 13px; } .side-move { margin-top: calc(170px + 2 * 1.5 * 13px + 20px); } }
@media (max-width: 760px) { .side-h { font-size: 17px; white-space: normal; } }
.side-move svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* The arrow passes towards the Cloud side like a race car: in from the left, stretched by its speed, through the
   middle and gone on the right in half a second; then the road is empty for a while. Down where the two stack. */
.side-move svg { animation: pass-by 2.2s steps(14) infinite; }
@keyframes pass-by {
  0% { translate: -90px 0; scale: 1.9 1; opacity: 0; }
  6% { opacity: 1; }
  18% { opacity: 1; }
  24%, 100% { translate: 90px 0; scale: 1.9 1; opacity: 0; }
}
@keyframes pass-down {
  0% { translate: 0 -60px; scale: 1.9 1; opacity: 0; }
  6% { opacity: 1; }
  18% { opacity: 1; }
  24%, 100% { translate: 0 60px; scale: 1.9 1; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .side-move svg { animation: none; } }
@media (max-width: 760px) {
  .sides-row { flex-direction: column; align-items: center; gap: 22px; }
  .side-move { margin-top: 0; }
  .side-move svg { transform: rotate(90deg); animation-name: pass-down; }
}
.side-shot { background: var(--ink); border: 2px solid var(--ink); box-shadow: 0 0 0 3px var(--steel), 8px 8px 0 3px var(--ink); }
.side figcaption b { font: 400 13px var(--head); text-transform: uppercase; color: var(--white); }
.side figcaption { font-size: 14px; line-height: 1.55; color: var(--cloud); }
.side-move { color: var(--fog); font: 400 12px var(--label); text-transform: uppercase; letter-spacing: .04em; }
.side-move span { text-align: center; line-height: 1.6; }
.side-move svg { color: var(--gold); stroke-width: 2.4; stroke-linecap: square; stroke-linejoin: miter; }

/* The title of the demo about to play, centered over the document window on a dark blur. */
.demo-name {
  position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 24px 12%; pointer-events: none; opacity: 0; text-wrap: balance;
  background: rgba(5, 6, 13, .6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  font: 400 clamp(18px, 2.2vw, 28px)/1.4 var(--head); text-transform: uppercase; color: var(--gold); text-align: center; text-shadow: 3px 3px 0 var(--ink);
  transition: opacity .3s steps(3);
}
.demo-name.on { opacity: 1; }


/* ---------- Separator above "How it works": a plan's lifecycle in pixels, its statuses lit in turn ---------- */
.lifeline { display: flex; align-items: center; gap: 16px; padding-block: 16px; }
.lifeline::before, .lifeline::after { content: ""; flex: 1; height: 4px; min-width: 24px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.lifeline .life-steps { display: flex; align-items: center; opacity: .5; } /* dimmed by half, in the background like the other separators */
.lifeline span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 9px 6px; font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--fog); background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 3px 3px 0 0 var(--ink); white-space: nowrap; }
.lifeline span::before { content: ""; width: 6px; height: 6px; background: var(--c); opacity: .5; }
.lifeline i { width: 12px; height: 2px; background: var(--slate); }
.lifeline.in .life-steps span { animation: life-on 5.4s steps(1) infinite; }
.lifeline.in .life-steps span:nth-of-type(2) { animation-delay: 0.9s; }
.lifeline.in .life-steps span:nth-of-type(3) { animation-delay: 1.8s; }
.lifeline.in .life-steps span:nth-of-type(4) { animation-delay: 2.7s; }
.lifeline.in .life-steps span:nth-of-type(5) { animation-delay: 3.6s; }
.lifeline.in .life-steps span:nth-of-type(6) { animation-delay: 4.5s; }
@keyframes life-on {
  0%, 15%, 100% { color: var(--fog); box-shadow: inset 0 0 0 2px var(--slate), 3px 3px 0 0 var(--ink); }
  1% { color: var(--white); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c) 45%, var(--slate)), 3px 3px 0 0 var(--ink); }
}
@media (max-width: 900px) { .lifeline::before, .lifeline::after { min-width: 12px; } .lifeline { justify-content: center; } .lifeline span:not(:first-child):not(:last-child) { display: none; } .lifeline i:not(:first-of-type) { display: none; } .lifeline i { width: 40px; } }
@media (prefers-reduced-motion: reduce) { .lifeline.in .life-steps span { animation: none; } }

/* ---------- Separator above the agents: the supported agents, a slow strip from right to left ---------- */
/* Faded out at both ends, in steps like the other pixel fades, and dimmed like the other separators. One set's width
   per loop (the two sets are alike), so it never jumps. */
/* The dashed pixel lines either side, like the other separators; between them, a window half the width, where the
   strip glides, faded out at both ends in steps and dimmed. */
.agentline { display: flex; align-items: center; gap: 16px; padding-block: 16px; }
.agentline::before, .agentline::after { content: ""; flex: 1; height: 4px; min-width: 24px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.ag-window { flex: none; width: 50%; overflow: hidden; opacity: .28;
  -webkit-mask: linear-gradient(90deg, transparent 0 4%, rgba(0, 0, 0, .33) 4% 12%, rgba(0, 0, 0, .66) 12% 20%, #000 20% 80%, rgba(0, 0, 0, .66) 80% 88%, rgba(0, 0, 0, .33) 88% 96%, transparent 96%);
  mask: linear-gradient(90deg, transparent 0 4%, rgba(0, 0, 0, .33) 4% 12%, rgba(0, 0, 0, .66) 12% 20%, #000 20% 80%, rgba(0, 0, 0, .66) 80% 88%, rgba(0, 0, 0, .33) 88% 96%, transparent 96%); }
@media (max-width: 760px) { .ag-window { width: 70%; } .agentline::before, .agentline::after { min-width: 12px; } }
.ag-track { display: flex; width: max-content; }
.agentline.in .ag-track { animation: ag-slide 48s linear infinite; }
@keyframes ag-slide { to { transform: translateX(-50%); } }
.ag-set { display: flex; gap: 40px; padding-right: 40px; }
.ag-item { display: inline-flex; align-items: center; gap: 10px; font: 400 12px/1 var(--label); text-transform: uppercase; color: var(--fog); white-space: nowrap; }
.ag-chip { display: grid; place-items: center; width: 28px; height: 28px; font: 700 11px/1 var(--body); text-transform: none; color: var(--ink); background: var(--c); border: 2px solid var(--ink); box-shadow: 3px 3px 0 0 var(--ink); }
@media (prefers-reduced-motion: reduce) { .agentline.in .ag-track { animation: none; } }

/* ---------- Separator above the FAQ: integrations sending context into the plan, in pixels ---------- */
.syncline { display: flex; align-items: center; gap: 16px; padding-block: 16px; }
.syncline::before, .syncline::after { content: ""; flex: 1; height: 4px; min-width: 24px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.sync-row { display: flex; align-items: center; gap: 8px; opacity: .49; }
.syncline i { position: relative; width: 64px; height: 1px; overflow: visible; }
.syncline i::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; opacity: 0; }
.syncline.in i::after { animation: sync-dot 2.4s ease-in infinite; }
.syncline.in i.in-left::after { animation-name: sync-dot-left; animation-delay: 1.2s; }
@keyframes sync-dot { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0; } }
@keyframes sync-dot-left { 0% { left: calc(100% - 6px); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: 0; opacity: 0; } }
.sync-hub { --s: 30px; width: 30px; height: 30px; flex: none; opacity: .7; }
@media (max-width: 760px) { .syncline::before, .syncline::after { min-width: 12px; } .syncline { justify-content: center; } .syncline i { width: 32px; } }
@media (prefers-reduced-motion: reduce) { .syncline.in i::after { animation: none; } }
.sync-row span { padding: 7px 9px 6px; font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--fog); background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 3px 3px 0 0 var(--ink); }
.syncline i { height: 2px; background: var(--slate); }
.syncline i::after { border-radius: 0; background: #8a7340; }
.syncline.in i::after { animation-timing-function: steps(8); }
.sync-row .sync-app { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; color: var(--cloud); }
.sync-app svg { width: 16px; height: 16px; }
/* Loom and Granola, dimmed at each end: more apps beyond them. */
.sync-app.far { opacity: .3; }
/* A step down toward each end: the logo between the nearest one and the faded end is a little dimmer. */
.sync-app:nth-child(2), .sync-app:nth-last-child(2) { opacity: .65; }

/* The graph separator's keys: each press draws the link that lights next (the graph's 5s loop). */
.graph-keys { display: flex; gap: 6px; margin-right: 4px; }
.graph-keys kbd { display: grid; place-items: center; width: 26px; height: 26px; font: 700 13px/1 var(--body); color: var(--fog); background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), inset 0 -3px 0 0 var(--slate), 2px 2px 0 0 var(--ink); }
.graphline.in .graph-keys kbd { animation: gkey 5s steps(1) infinite; }
.graphline.in .graph-keys kbd:nth-child(2) { animation-delay: 0.5s; }
.graphline.in .graph-keys kbd:nth-child(3) { animation-delay: 1.0s; }
.graphline.in .graph-keys kbd:nth-child(4) { animation-delay: 1.5s; }
@keyframes gkey { 0%, 6%, 100% { color: var(--fog); transform: none; } 1% { color: #8a7a52; transform: translate(1px, 1px); } }
@media (max-width: 760px) { .graph-keys { display: none; } }
@media (prefers-reduced-motion: reduce) { .graphline.in .graph-keys kbd { animation: none; } }

/* The cable from a chip on the "Works with" bar up to the animation (main.js), in pixel steps: faint while the
   chip is hovered, flowing in the app's colour while it is connected. */

/* Phones: the separators keep their fading side lines; their middles get a little narrower to leave them room. */
@media (max-width: 600px) {
  .sync-app.far { display: none; }
  /* Two logos a side: the outer one is the dimmer. */
  .sync-app:nth-child(2), .sync-app:nth-last-child(2) { opacity: .45; }
  .syncline, .lifeline { gap: 10px; }
}

/* Phones: the funnel's smaller cards get more compact, so two fit side by side. */
@media (max-width: 600px) {
  .numbers .stat:not(:nth-child(1)) { padding: 20px 14px; }
  .numbers .stat:nth-child(2) .big, .numbers .stat:nth-child(3) .big { font-size: 17px; }
  .numbers .stat .label { font-size: 11px; }
  .stat.waste .pill { font-size: 10px; padding: 5px 6px 4px; gap: 6px; white-space: normal; text-align: left; line-height: 1.3; }
  .stat.waste .pill svg { width: 12px; height: 12px; }
}

/* ---------- Separator after the numbers: what teams lose, drifting past from left to right, in pixels ---------- */
.driftline { display: flex; align-items: center; gap: 16px; padding-block: 16px; }
.driftline::before, .driftline::after { content: ""; flex: 1; height: 4px; min-width: 12px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.drift { position: relative; flex: none; width: min(460px, 70vw); height: 52px; opacity: .4;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.drift i { position: absolute; left: 0; display: grid; place-items: center; width: 30px; height: 30px; color: var(--coral); opacity: 0;
  background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px #4a2e48, 3px 3px 0 0 var(--ink); }
.drift svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: square; stroke-linejoin: miter; shape-rendering: crispEdges; }
.driftline.in .drift i { opacity: 1; animation: drift 10s steps(40) infinite; }
.driftline.in .drift i:nth-child(1) { animation-delay: 0s; top: 6px; }
.driftline.in .drift i:nth-child(2) { animation-delay: -2s; top: 20px; }
.driftline.in .drift i:nth-child(3) { animation-delay: -4s; top: 2px; }
.driftline.in .drift i:nth-child(4) { animation-delay: -6s; top: 16px; }
.driftline.in .drift i:nth-child(5) { animation-delay: -8s; top: 9px; }
@keyframes drift {
  from { transform: translateX(-30px); }
  50% { transform: translateX(calc(min(460px, 70vw) / 2 - 15px)) translateY(-4px); }
  to { transform: translateX(min(460px, 70vw)); }
}
@media (prefers-reduced-motion: reduce) { .drift { display: flex; align-items: center; justify-content: space-evenly; } .driftline.in .drift i { position: static; animation: none; } }

/* The live plan's statuses, drawn over the shot (it has none of its own) and walked up to Built one requirement at a
   time (../showcase.js). Sized like the app's pills, in units of the shot's width (720 CSS pixels in the app). */
.status-run { container-type: inline-size; }
.status-run .st {
  position: absolute; translate: 0 -50%; height: calc(18 / 720 * 100cqw); padding: 0 calc(6 / 720 * 100cqw) 0 calc(8 / 720 * 100cqw);
  border-radius: calc(9 / 720 * 100cqw); background: var(--c, #807f89); color: #0b0b0e; pointer-events: none;
  font: 500 calc(11 / 720 * 100cqw) / calc(18 / 720 * 100cqw) "Geist Mono", ui-monospace, monospace; letter-spacing: .04em; white-space: nowrap;
  transition: background .35s;
}
.status-run .st.bump { animation: st-bump .45s cubic-bezier(.2, 1.4, .4, 1); }
@keyframes st-bump { 40% { scale: 1.18; } }
@media (prefers-reduced-motion: reduce) { .status-run .st.bump { animation: none; } }

/* Out of view (main.js), a block's animations pause, and carry on when it scrolls back in. */
.offscreen, .offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }
/* A browser window beside a terminal in the demos: the same frame, the page drawn behind a cover that clears. */
.demo-terms.pair { grid-template-columns: 1fr 1.15fr; padding-inline: 4%; align-items: start; }
@container (max-width: 599px) { .demo-terms.pair { grid-template-columns: minmax(0, 1fr); padding-inline: 12px; } } /* narrow: the browser under its terminal */
.demo-browser { animation: db-in .4s steps(4) both; }
.db-url { flex: 1; margin-left: 12px !important; padding: 3px 10px 2px; background: var(--ink); color: var(--fog); text-align: center; }
.db-view { position: relative; height: 290px; background: #f6f5f2; }
.db-view iframe, .db-view canvas { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.db-view iframe { pointer-events: none; }
@keyframes db-in { from { opacity: 0; transform: translateX(24px); } }

/* The header's button, while the hero's own is in view (main.js): out of the way, the menu's links moved right into its
   place. Once that one has gone, the links move back and it fades in from the right, a beat after them; going, it fades
   out at once. */
header .btn-go { transition: opacity .35s steps(4) .2s, translate .5s steps(6) .1s, visibility 0s .1s; }
header { overflow-x: clip; } /* the away button, moved off to the right, never widens the page */
header .btn-go.away { opacity: 0; visibility: hidden; translate: 24px 0; transition: opacity .15s steps(2), translate .15s, visibility 0s .15s; }
.hud .links { transition: translate .5s steps(6); }
.hud .wrap:has(.btn.away) .links { translate: var(--cta-shift, 0px) 0; }

/* ---------- The manifesto: a dialog like the app's search modal, in pixels ---------- */
/* Under the band's text, its two buttons side by side: press start, and a quieter one to read the manifesto. */
.band-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.btn-line { --bg: rgba(22, 18, 15, .1); --hi: rgba(255, 255, 255, .18); --fg: var(--soot); }
.btn-line:hover { --bg: rgba(22, 18, 15, .2); --hi: rgba(255, 255, 255, .25); }
/* As in the app, in this page's pixels: dimmed behind, a navy box with an ink frame and a hard shadow, a header row
   with the icon, title and Esc, and the text scrolling below it. In the middle of the screen. */
.manifesto { width: min(680px, calc(100vw - 32px)); max-height: min(80vh, 760px); padding: 0; overflow: hidden; color: var(--cloud);
  background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 8px 8px 0 0 var(--ink); }
.manifesto[open] { display: flex; flex-direction: column; animation: mf-in .3s steps(3); }
.manifesto::backdrop { background: rgba(5, 6, 13, .7); }
@keyframes mf-in { from { opacity: 0; transform: translateY(12px); } }
.mf-head { flex: none; display: flex; align-items: center; gap: 12px; height: 56px; padding: 0 12px 0 18px; border-bottom: 2px solid var(--slate); }
.mf-ic { width: 20px; height: 20px; }
.mf-head b { flex: 1; font: 400 14px/1 var(--head); text-transform: uppercase; color: var(--white); }
.mf-head kbd { font: 400 10px/1 var(--label); text-transform: uppercase; color: var(--fog); padding: 4px 6px 3px; border: 2px solid var(--slate); }
.mf-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; color: var(--fog); cursor: pointer; }
.mf-close:hover { background: var(--slate); color: var(--white); }
.mf-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: square; }
.mf-body { overflow: auto; padding: 22px 28px 30px; font: 400 15px/1.75 var(--body); overscroll-behavior: contain; }
.mf-body h3 { margin: 26px 0 10px; font: 400 15px/1.3 var(--head); text-transform: uppercase; color: var(--gold); }
.mf-body h3:first-child { margin-top: 0; }
.mf-body p { margin: 0 0 14px; }
html:has(.manifesto[open]) { overflow: hidden; } /* the page stays put behind it */
@media (prefers-reduced-motion: reduce) { .manifesto[open] { animation: none; } }

/* ---------- "How it works" as a carousel (../showcase.js) ---------- */
/* One level at a time, the track sliding left to the next, in steps; pixel dots under it. The alternating sides don't
   apply. */
/* A pixel panel, like a game's level-select screen, so it reads as a slideshow: the dots on its top edge, each level
   inside it with room around it. */
.carousel { overflow: hidden; margin-top: 32px; background: var(--navy); border: 2px solid var(--ink); box-shadow: inset 0 0 0 2px var(--slate), 8px 8px 0 0 var(--ink); }
.carousel .stages { display: flex; flex-direction: row; gap: 32px; margin: 0; align-items: start; transition: transform .8s steps(12); }
.carousel .stage { flex: 0 0 100%; min-width: 0; padding: 8px 32px 36px; }
@media (max-width: 640px) { .carousel .stage { padding: 4px 18px 24px; } }
.carousel .stage:nth-child(even) .stage-copy { order: 0; }
.car-nav { display: flex; justify-content: center; align-items: center; gap: 18px; padding: 20px 0 16px; } /* at the top of the panel */
.car-dots { position: relative; display: flex; justify-content: center; gap: 14px; }
/* "previous" and "next", in the cards' window-bar font, shown while the panel is hovered or focused (always on touch). */
.car-prev, .car-next { padding: 4px 6px; border: 0; background: none; cursor: pointer; font: 400 11px/1 var(--label); text-transform: uppercase; color: var(--fog); visibility: hidden; }
.car-prev::before { content: "◀ "; } .car-next::after { content: " ▶"; }
.carousel:hover .car-prev, .carousel:hover .car-next, .carousel:focus-within .car-prev, .carousel:focus-within .car-next { visibility: visible; }
@media (hover: none) { .car-prev, .car-next { visibility: visible; } }
.car-prev:hover, .car-next:hover { color: var(--gold); }
.car-prev:focus-visible, .car-next:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.car-dots button { width: 12px; height: 12px; padding: 0; border: 0; background: var(--slate); box-shadow: 2px 2px 0 0 var(--ink); cursor: pointer; }
.car-dots button:hover { background: var(--steel); }
.car-pill { --ease: steps(7); position: absolute; top: 0; left: 0; width: 32px; height: 12px; background: var(--gold); box-shadow: 2px 2px 0 0 var(--ink); pointer-events: none; } /* the current one, over its dot (../showcase.js), in steps */
.car-dots button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

/* ---------- "Try it", rearranged (desktops and tablets) ---------- */
/* The front view fills the stack. The two behind it shrink to half and wait above it, side by side, their tops peeking
   out over it (--top) with their names: the phone on the left, the other desktop view on the right. A click on one
   brings it forward (../showcase.js). With the phone in front, it stands at the left, as tall as the stack, and both
   desktop views stand on its right, one over the other. From 1180px, the demos are a column on the right. */
@media (min-width: 601px) {
  /* --bs: the views behind (.6 of a desktop window; the phone at --ps .5), side by side as one pair, centred, --pair apart.
     --ss: the two desktop views beside the phone in front. */
  .try-stack { --top: 72px; --bs: .6; --ss: .5; --gap: 16px; --pair: 24px; --pw: calc(426px * .5); --lead: calc((100% - var(--bs) * 100% - var(--pair) - var(--pw)) / 2); width: auto; margin-left: 0; translate: none; }
  .try-windows { padding-top: var(--top); }
  .try-windows .try-window { width: 100%; transform: none; transform-origin: top right; }
  .try-stack[data-front="page"] [data-view="graph"], .try-stack[data-front="graph"] [data-view="page"] { z-index: 1; transform: translate(calc(-1 * var(--lead)), calc(-1 * var(--top))) scale(var(--bs)); }
  /* With the phone in front: the phone and the two views beside it as one group, centred, --gap apart throughout. */
  .try-stack[data-front="phone"] { --ss: .42; --off: calc((898px * var(--ps-front, .8) - 2 * var(--ss) * var(--win-real, var(--win-h)) - var(--gap)) / 2); --side: calc(var(--gap) + 4px); --lead2: calc((100% - var(--ss) * 100% - var(--side) - 426px * var(--ps-front, .8)) / 2); } /* --side: as wide as the gap between the two views, which comes out a little over --gap */
  .try-stack[data-front="phone"] [data-view="page"] { z-index: 1; transform: translate(calc(-1 * var(--lead2)), calc(var(--off) - var(--top))) scale(var(--ss)); }
  .try-stack[data-front="phone"] [data-view="graph"] { z-index: 1; transform: translate(calc(-1 * var(--lead2)), calc(var(--off) + var(--ss) * var(--win-real, var(--win-h)) + var(--gap) - var(--top))) scale(var(--ss)); } /* smaller than the phone, the pair centred on it */
  .try-phone { --ps: .5; --raise: calc(-64px * var(--ps)); left: var(--lead); top: var(--raise); bottom: auto; /* raised so the curve of its top corners ends level with the window's beside it */ transform: none; transition: left .7s cubic-bezier(.16, 1, .3, 1), top .7s cubic-bezier(.16, 1, .3, 1), width .7s cubic-bezier(.16, 1, .3, 1), height .7s cubic-bezier(.16, 1, .3, 1); }
  .try-stack[data-front="phone"] .try-phone { --ps: var(--ps-front, .8); left: var(--lead2); top: 0; transform: none; }
  /* The names, level along the top of each view behind, at the same size whatever the view's scale. */
  .try-back span { left: 50%; right: auto; top: 14px; writing-mode: horizontal-tb; transform: translateX(-50%); padding: 7px 10px 6px; } /* lying flat: the padding turned with it */
  .try-window .try-back span { top: calc(22px + 10px / var(--bs)); transform: translateX(-50%) scale(calc(1 / var(--bs))); transform-origin: top center; }
  .try-stack[data-front="phone"] .try-window .try-back span { top: 50%; transform: translate(-50%, -50%) scale(calc(1 / var(--ss))); transform-origin: center; } /* the whole window shows: its name in the middle */
  .try-phone .try-back span { left: 50%; top: calc(22px * var(--bs) + 10px - var(--raise)); transform: translateX(-50%); } /* level with the window's name, however far the phone is raised */
  .try-stack[data-front="phone"][data-desk="page"] [data-view="page"] .try-back span,
  .try-stack[data-front="phone"][data-desk="graph"] [data-view="graph"] .try-back span { display: block; }
}
@media (min-width: 981px) {
  .try-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 28px; align-items: center; }
}
@media (min-width: 1180px) {
  .try-layout { width: min(1400px, 100vw - 48px); margin-left: 50%; translate: -50% 0; }
}
/* Narrower desktops: the demos still on the right, reaching in over the window's right edge and running off the page's
   right side, as if they came in from it. */
@media (min-width: 981px) and (max-width: 1179px) {
  .try { overflow-x: clip; }
  .try-layout { grid-template-columns: minmax(0, 1fr) 170px; gap: 0; margin-right: calc((100% - 100vw) / 2); } /* narrow: the titles take two lines */
  .try .try-layout .try-deck, .try .try-layout .try-deck.p2 { position: relative; z-index: 3; margin-left: -64px; transition: filter .5s; } /* both sets */
  /* While the pointer is on the window, the demos step behind it, dimmed like the views waiting at the top. */
  .try-layout .try-stack { position: relative; z-index: 2; }
  .try .try-layout:has(.try-windows:hover) .try-deck { z-index: 1; filter: brightness(.4) saturate(.6); }
  .try-layout .try-demos button, .try-layout .try-more { border-right: 0; box-shadow: inset 0 0 0 2px var(--slate), -6px 6px 0 0 var(--ink); }
}
@media (min-width: 981px) {
  .try-layout .try-deck, .try-layout .try-deck.p2 { grid-template-columns: minmax(0, 1fr); align-content: start; align-self: start; margin: 140px 0 0; } /* from the top, a little under the window's own top (the views wait 72px above it): both sets start on the same line */ /* the second set keeps the first's height (../showcase.js): its cards and the button from the top, the room left under them */
  .try-layout .try-deck.p2 .try-more { order: -1; } /* back to the first set: above the second set's cards */
  .try-layout .try-demos { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
  .try-layout .try-more { height: 44px; }
}

/* The note over the demos, beside the window (desktops only): the arrow points at it; a dashed pixel rule; how to take
   it over. */
.try-hint { display: none; }
@media (min-width: 981px) {
  .try-layout .try-hint { order: -2; display: grid; gap: 12px; margin: 0 0 20px; font: 400 14px/1.55 var(--body); color: var(--cloud); }
  .try-hint .th-arrow { color: var(--gold); }
  .try-hint .th-sub { padding-top: 12px; background: repeating-linear-gradient(90deg, var(--slate) 0 6px, transparent 6px 12px) top / 100% 2px no-repeat; color: var(--fog); font-size: 13px; }
}

@media (min-width: 981px) and (max-width: 1179px) { .try-layout .try-hint { position: relative; isolation: isolate; padding: 13px 13px 15px; margin-bottom: 0; font-size: 13px; } .try-layout .try-hint::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); border: 2px solid var(--ink); border-right: 0; box-shadow: inset 0 0 0 2px var(--slate), -6px 6px 0 0 var(--ink); -webkit-mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%); mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%); } .try-layout .try-hint .th-sub { -webkit-mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%) top / 100% 2px no-repeat, linear-gradient(#000, #000) 0 2px / 100% 100% no-repeat; mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%) top / 100% 2px no-repeat, linear-gradient(#000, #000) 0 2px / 100% 100% no-repeat; } .try-hint .th-sub { font-size: 12px; } } /* a card like the demos, over the window's edge with them, its frame, fill and rule fading out to the right */

/* Under the phone in front, a switch between its two views (601px and up; phones have the switches on top). */
.phone-views { display: none; }
@media (min-width: 601px) {
  .try-stack .try-windows { transition: padding-bottom .7s cubic-bezier(.16, 1, .3, 1); }
  .try-stack[data-front="phone"] .try-windows { padding-bottom: 18px; }
  .try-stack[data-front="phone"] .phone-views { display: flex; position: absolute; left: 50%; top: calc(100% + 14px); translate: -50% 0; white-space: nowrap; animation: pv-in .4s .3s both; }
  @keyframes pv-in { from { opacity: 0; } }
}
.try-hint .th-lead { color: var(--white); } /* white, like the views' names */
.try-hint .th-lead { font: 400 11px/1.7 var(--head); } /* the views' names' type */
/* Overlapping the window (981–1179px), the demo cards and the button fade out to the right like the note, in steps:
   their frame and fill are drawn on a ::before, masked, so the text stays whole. */
@media (min-width: 981px) and (max-width: 1179px) {
  .try-layout .try-demos button, .try-layout .try-more { --bg: var(--navy); --bd: var(--ink); --ring: var(--slate); --bs: solid; isolation: isolate; border: 0; background: none; box-shadow: none; }
  .try-layout .try-demos button { padding: 17px 13px 16px 15px; }
  .try-layout .try-demos button:hover { --ring: var(--steel); }
  .try-layout .try-demos .playing { --ring: var(--cyan); }
  .try-layout .try-more { --bd: var(--slate); --ring: transparent; --bs: dashed; }
  .try-layout .try-more:hover { --bd: var(--tangerine); }
  .try-layout .try-more { position: relative; } .try-layout .try-more svg { position: relative; }
  .try-layout .try-demos button::before, .try-layout .try-more::before { content: ""; position: absolute; inset: 0; z-index: -1; border: 2px var(--bs) var(--bd); border-right: 0; background: var(--bg); box-shadow: inset 0 0 0 2px var(--ring);
    -webkit-mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%); mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%); }
  .try-layout .try-demos button::after { -webkit-mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%); mask: linear-gradient(90deg, #000 0 45%, rgba(0, 0, 0, .6) 45% 65%, rgba(0, 0, 0, .3) 65% 85%, transparent 85%); }
}

/* "How it all works": its eyebrow and heading centred over the plan and the stages. */
#how .head > .eyebrow { display: flex; width: fit-content; margin-inline: auto; }
#how .head > h2 { text-align: center; }
#faq .faq-list { margin-inline: auto; } /* centred under its heading */
/* "How it works": every card's animation is one window shape at every width. Under its title bar (../showcase.js wraps
   the rest in .win-body) it has the app screenshots' proportions. A screenshot covers it from the top, cropped below
   (or at the sides, when it's wider); the terminal and the Markdown-to-blocks are laid out at a set width and scaled
   to fit, like pictures of themselves. */
.carousel .win-body { position: relative; aspect-ratio: 2304 / 1964; overflow: hidden; }
.carousel .win-body > .pic { width: max(100%, calc(100% * var(--r, 1) * 1964 / 2304)); left: 50%; translate: -50% 0; }
.carousel .win-body img { display: block; }
.carousel .win-body > :is(pre, .mb) { position: absolute; top: 0; left: 0; box-sizing: border-box; transform-origin: 0 0; }
.carousel .md2blocks .mb { align-content: center; }
/* The Markdown on top and the blocks below where that fits the window, else side by side (../showcase.js). */
.carousel .md2blocks .mb.wide { grid-template-columns: minmax(0, 1.25fr) 26px minmax(0, 1fr); padding: 24px 20px; }
.carousel .mb.wide .mb-arrow { justify-self: stretch; width: auto; background-image: url(../assets/arcade/ff-right.svg); }
.carousel .md2blocks .mb.tall { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 24px 20px; }
.carousel .mb.tall .mb-arrow { justify-self: center; width: 26px; background-image: url(../assets/arcade/ff-down.svg); }
.versus .vs { opacity: .125; } /* the VS, well in the background */
.term pre:not(.roomy) :is(.more, .gap) { display: none; } /* extras, where its window has room (../showcase.js) */

/* ---------- For every role (../showcase.js) ---------- */
.roles .head { margin-bottom: 36px; }
.role-pick { position: relative; display: flex; justify-content: center; align-items: center; gap: 14px; margin-bottom: 28px; }
.rp-step { flex: none; width: 44px; height: 44px; border: 2px solid var(--ink); background: var(--navy); box-shadow: inset 0 0 0 2px var(--slate), 4px 4px 0 0 var(--ink); color: var(--cloud); font: 400 14px var(--label); cursor: pointer; }
.rp-step:hover { color: var(--gold); }
.rp-step:active { translate: 2px 2px; box-shadow: inset 0 0 0 2px var(--slate), 2px 2px 0 0 var(--ink); }
/* "I am" and the role, the role stepping up as it changes, the box's width following it. The bar filling till the
   next one runs along its bottom border. */
.rp-pill { position: relative; display: inline-flex; align-items: center; gap: .6em; padding: 14px 20px 18px; border: 2px solid var(--ink); background: var(--navy); box-shadow: inset 0 0 0 2px var(--slate), 6px 6px 0 0 var(--ink);
  color: var(--white); font: 400 clamp(12px, 1.7vw, 18px)/1.4 var(--head); text-transform: uppercase; cursor: pointer; }
.rp-pill:hover, .rp-pill[aria-expanded="true"] { box-shadow: inset 0 0 0 2px var(--gold), 6px 6px 0 0 var(--ink); }
.rp-i { color: var(--fog); }
.rp-roles { display: grid; height: 1.4em; overflow: hidden; transition: width .3s steps(4); }
.rp-roles > span { grid-area: 1 / 1; justify-self: start; width: max-content; white-space: nowrap; visibility: hidden; transform: translateY(110%); transition: transform .3s steps(3), visibility 0s .3s; }
.rp-roles > .on { visibility: visible; transform: none; transition: transform .3s steps(3); }
.rp-roles > .out { transform: translateY(-110%); }
.rp-chev { width: 12px; height: 12px; background: url(../assets/arcade/ff-down.svg) center / contain no-repeat; image-rendering: pixelated; opacity: .8; }
.rp-bar { position: absolute; left: -2px; right: -2px; bottom: -2px; height: 2px; background: var(--sweep); transform: scaleX(0); transform-origin: left; transition: transform .1s steps(1); }
/* The whole list, under the box. */
.rp-menu { position: absolute; z-index: 5; top: calc(100% + 14px); left: 50%; translate: -50% 0; width: min(600px, calc(100vw - 32px)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px;
  padding: 8px; border: 2px solid var(--ink); background: var(--night); box-shadow: inset 0 0 0 2px var(--slate), 8px 8px 0 0 var(--ink); }
.rp-menu[hidden] { display: none; }
.rp-menu button { padding: 9px 12px; border: 0; background: none; color: var(--fog); font: 400 13px var(--body); text-align: left; cursor: pointer; }
.rp-menu button:hover, .rp-menu button:focus-visible { background: var(--slate); color: var(--white); outline: none; }
.rp-menu button[aria-current="true"] { color: var(--gold); }
.rp-menu button[aria-current="true"]::before { content: "▶ "; }
.rp-step:focus-visible, .rp-pill:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
/* What each role gets, one card at a time, sliding along with the picker. */
.role-view { overflow: hidden; border: 2px solid var(--ink); background: var(--navy); box-shadow: inset 0 0 0 2px var(--slate), 8px 8px 0 0 var(--ink); }
.role-track { display: flex; transition: transform .8s steps(12); }
.role-slide { flex: 0 0 100%; min-width: 0; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; padding: 36px 40px; }
.role-slide .k { font: 400 12px var(--label); letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.role-slide h3 { margin-top: 16px; font: 400 clamp(15px, 1.7vw, 20px)/1.5 var(--head); color: var(--white); }
.role-gets { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.role-gets li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: baseline; padding: 12px 16px; border: 2px solid var(--slate); background: var(--night); color: var(--cloud); font-size: 14px; }
.role-gets li span { font: 400 11px var(--label); color: var(--mint); }
@media (max-width: 980px) { .role-slide { grid-template-columns: minmax(0, 1fr); gap: 22px; padding: 28px 24px; } }
@media (max-width: 640px) {
  .rp-step { display: none; } /* the box opens the list; it moves on by itself */
  .rp-pill { padding: 12px 14px 16px; gap: .5em; }
  .rp-menu { grid-template-columns: minmax(0, 1fr); }
  .role-slide { padding: 22px 18px; }
}
@media (prefers-reduced-motion: reduce) { .role-track, .rp-roles, .rp-roles > span { transition: none; } }

/* ---------- Separator: the team on one line (four people, three agents), a bubble over each head in turn ---------- */
.teamline { --tm-mia: var(--pink); --tm-josh: var(--aqua); --tm-alex: var(--tangerine); --tm-radhi: var(--lavender); --tm-cc: var(--clay); --tm-cx: var(--sky); --tm-cu: var(--violet);
  display: flex; align-items: center; gap: 16px; padding: 60px 0 16px; } /* room above for the bubbles */
.teamline::before, .teamline::after { content: ""; flex: 1; height: 4px; min-width: 24px; background: repeating-linear-gradient(90deg, var(--slate) 0 8px, transparent 8px 16px); }
.team-row { position: relative; display: flex; align-items: center; gap: 22px; opacity: .42; }
.team-row::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 1px); height: 2px; background: var(--slate); } /* the line they stand on */
.tm { position: relative; display: grid; place-items: center; width: 32px; height: 32px; border: 2px solid var(--ink); background: var(--navy); box-shadow: inset 0 0 0 2px var(--slate), 3px 3px 0 0 var(--ink); font: 400 12px/1 var(--label); color: var(--fog); }
.tm.bot { font-size: 10px; }
.tm b { font-weight: inherit; }
.tm q { --x: -50%; position: absolute; bottom: calc(100% + 14px); left: 50%; translate: var(--x) 0; padding: 7px 9px 6px; border: 2px solid var(--ink); background: var(--night); box-shadow: inset 0 0 0 2px var(--c), 3px 3px 0 0 var(--ink);
  font: 400 11px/1.2 var(--body); color: var(--cloud); white-space: nowrap; quotes: none; visibility: hidden; opacity: .7; }
.tm q::after { content: ""; position: absolute; top: 100%; left: calc(50% - 4px); width: 8px; height: 8px; margin-top: 2px; background: var(--c); clip-path: polygon(0 0, 100% 0, 50% 100%); }
/* The ones at the ends keep their bubbles over the row, not past it. */
.tm:first-child q { --x: -30px; } .tm:first-child q::after { left: 26px; }
.tm:last-child q { --x: calc(-100% + 30px); } .tm:last-child q::after { left: auto; right: 26px; }
.teamline.in .tm, .teamline.in .tm q { animation: tm-on 8.4s steps(1) infinite; animation-delay: calc(var(--i) * 1.2s); }
.teamline.in .tm q { animation-name: tm-say; }
@keyframes tm-on { 0%, 14%, 100% { color: var(--fog); box-shadow: inset 0 0 0 2px var(--slate), 3px 3px 0 0 var(--ink); } 1% { color: var(--c); box-shadow: inset 0 0 0 2px var(--c), 3px 3px 0 0 var(--ink); } }
@keyframes tm-say { 0%, 14%, 100% { visibility: hidden; } 1% { visibility: visible; } }
@media (max-width: 640px) { .teamline { gap: 10px; } .teamline::before, .teamline::after { min-width: 10px; } .team-row { gap: 12px; } }
@media (prefers-reduced-motion: reduce) { .teamline.in .tm, .teamline.in .tm q { animation: none; } .tm:nth-child(4) q { visibility: visible; } }
.tm img { display: block; width: 16px; height: 16px; image-rendering: pixelated; } /* an agent: the pixel bot */
/* The graph view, behind the window: its frame, under its label, round an empty canvas: the graph's dark ground and
   its dot grid, drawn at the screenshot's own spacing (19.25px in its 2140 × 1264, covering the screen as it does). */
.try-window[data-view="graph"] .try-screen { container-type: size; background: #050407; }
.try-window[data-view="graph"] .try-screen::before { --s: max(100cqw * 19.25 / 2140, 100cqh * 19.25 / 1264); content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, .15) 0 .9px, transparent 1.3px) calc(var(--s) * .14) calc(var(--s) * .33) / var(--s) var(--s); }
/* What the views behind show. Above the document window, as they are at first, the phone and the graph view are just
   their frames, round an empty dark screen, under their labels. With the phone or the graph view in front, the others
   show what's on them, at half strength. Each fades as the front changes. (A filter, so it stacks on the screens' own
   fades, such as the screenshot giving way to the live app.) */
.phone-screen > *, .try-window .try-screen > * { transition: filter .5s; }
.try-stack:not([data-front="phone"], [data-front="graph"]) :is(.phone-screen, .try-window[data-view="graph"] .try-screen) > * { filter: opacity(0); }
.try-stack[data-front="graph"] .phone-screen > * { filter: opacity(.5); }
.try-stack[data-front="phone"] .try-window .try-screen > * { filter: opacity(.25); } /* beside the phone, a step further back */
.try-stack[data-front="phone"] .try-window[data-view="page"] .try-screen > * { filter: opacity(.125); } /* the document, busier, further still */
/* With the graph view in front, the document window above it is just its frame and label round faint tiles where the
   document's text is. */
.try-stack[data-front="graph"] .try-window[data-view="page"] .try-screen > :not(.doc-ghost) { filter: opacity(0); }
.doc-ghost { position: absolute; inset: 0; display: grid; align-content: start; gap: 14px; padding: 9% 14% 0 17%; opacity: 0; transition: opacity .5s; pointer-events: none; }
.try-stack[data-front="graph"] .doc-ghost { opacity: 1; }
.doc-ghost i { width: var(--w); height: 10px; border-radius: 4px; background: rgba(255, 255, 255, .045); }
.doc-ghost .h { height: 26px; margin-bottom: 8px; border-radius: 6px; background: rgba(255, 255, 255, .065); }
.doc-ghost .k { height: 7px; }
.doc-ghost .g { height: 16px; background: rgba(255, 255, 255, .055); }
.doc-ghost .gap { margin-top: 26px; }
.doc-ghost i, .doc-ghost .h { border-radius: 0; background: color-mix(in srgb, var(--steel) 16%, transparent); } /* square, in the pixel palette */
.doc-ghost .h, .doc-ghost .g { background: color-mix(in srgb, var(--steel) 24%, transparent); }
.ff-down { opacity: .25; animation-name: ff-blink-half; } /* the arrow down to the tokens, at a quarter strength, blinking as before */
@keyframes ff-blink-half { 50% { filter: brightness(1.5) drop-shadow(0 0 0 var(--gold)); opacity: .14; } }
.point > .ico { filter: opacity(.5); } /* the plugin points' icons, at half strength */
/* Side by side, the VS takes little room of its own: the two sides come in close and run over it, the VS behind. */
@media (min-width: 761px) {
  .versus { grid-template-columns: minmax(0, 1fr) 0 minmax(0, 1fr); column-gap: 28px; }
  .versus .vs { justify-self: center; width: max-content; z-index: 0; }
  .vs-side { position: relative; z-index: 1; }
}
.try-hint .th-brand { display: inline; height: .95em; width: auto; vertical-align: -.05em; image-rendering: pixelated; } /* the name, as the logo's wordmark */
/* The dots at the left, in line with the card's content; "previous" and "next" after them. */
.car-nav { justify-content: flex-start; padding-inline: 32px; } .car-dots { order: -1; gap: 24px; } /* room for the band on the first or last dot, which starts or ends with it (../showcase.js) */
@media (max-width: 640px) { .car-nav { padding-inline: 18px; } }
/* The current dot opens to the pill's width under it, the others keeping their spacing either side (../showcase.js). */
.car-dots { gap: 12px; }
.car-dots button { transition: width .7s var(--dots-ease, cubic-bezier(.65, 0, .35, 1)); }
.car-dots button.on { width: 32px; }
.car-dots { --dots-ease: steps(7); }
/* Side by side, the stages but the current one at half strength. */
@media (min-width: 981px) {
  .pulse-list li { transition: color .4s, opacity .4s; }
  .pulse-list li:not(.on) { opacity: .5; }
}
/* A line between the roles in the list, in the gap above each one past the first row. */
.rp-menu button { position: relative; } .rp-menu button:nth-child(n + 3)::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1.5px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--slate) 70%, transparent) 0 40%, color-mix(in srgb, var(--slate) 45%, transparent) 40% 60%, color-mix(in srgb, var(--slate) 20%, transparent) 60% 80%, transparent 80%); }
@media (max-width: 640px) { .rp-menu button:nth-child(2)::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1.5px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--slate) 70%, transparent) 0 40%, color-mix(in srgb, var(--slate) 45%, transparent) 40% 60%, color-mix(in srgb, var(--slate) 20%, transparent) 60% 80%, transparent 80%); } }
img.brand { display: inline; height: .9em; width: auto; vertical-align: -.05em; image-rendering: pixelated; } /* the name in running text, as the logo's wordmark */
.foot-info img.brand { opacity: .6; } /* in the footer, as quiet as the line around it */
/* The window peeking out above the one in front shows no title in its bar either: just its frame and its label. */
.try-window .app-chrome span { transition: opacity .5s; }
.try-stack:not([data-front="phone"], [data-front="graph"]) .try-window[data-view="graph"] .app-chrome span,
.try-stack[data-front="graph"] .try-window[data-view="page"] .app-chrome span { opacity: 0; }
/* The phone behind the document view still shows its clock and battery, at half strength, as it does behind the graph view. */
.try-stack:not([data-front="phone"], [data-front="graph"]) .try-windows .try-phone .phone-screen > .phone-status { filter: opacity(.5); }
/* The desktop view behind, peeking out above the one in front, 30% narrower (--bw), beside the phone: the pair
   from 20px in from the front window's left edge. */
@media (min-width: 601px) {
  .try-stack { --bw: .7; --lead: 20px; } /* the pair starts 20px in from the front window's left edge */
  .try-windows .try-window { justify-self: end; transition: transform .7s cubic-bezier(.16, 1, .3, 1), width .7s cubic-bezier(.16, 1, .3, 1); }
  .try-stack[data-front="page"] [data-view="graph"], .try-stack[data-front="graph"] [data-view="page"] { width: calc(100% * var(--bw));
    transform: translate(calc(var(--lead) + var(--pw) + var(--pair) + var(--bs) * 100% - 100% / var(--bw)), calc(-1 * var(--top))) scale(var(--bs)); }
}
/* The views' names, at 56% until pointed at or reached by keyboard. */
.try-back span { transition: opacity .2s; }
.try-back:not(:hover, :focus-visible) span { opacity: .56; }
.mk-btn { background: #000; color: var(--white); box-shadow: inset 0 0 0 2px var(--slate), 2px 2px 0 0 var(--ink); } /* black, framed like the other pixel buttons so it reads on the dark card */
/* The views waiting at the top, 10px lower (--low): a narrower strip showing, their names still centred in it, the
   phone's level with the window's. */
@media (min-width: 601px) {
  .try-stack { --low: 10px; }
  .try-stack[data-front="page"] [data-view="graph"], .try-stack[data-front="graph"] [data-view="page"] {
    transform: translate(calc(var(--lead) + var(--pw) + var(--pair) + var(--bs) * 100% - 100% / var(--bw)), calc(var(--low) - var(--top))) scale(var(--bs)); }
  .try-stack:not([data-front="phone"]) .try-phone { top: calc(var(--raise) + var(--low)); }
  .try-stack:not([data-front="phone"]) .try-window .try-back span { top: calc(22px + (7px - var(--low) / 2) / var(--bs)); }
  .try-stack:not([data-front="phone"]) .try-phone .try-back span { top: calc(22px * var(--bs) + 7px - var(--low) / 2 - var(--raise)); }
}
.mk-btn { padding: 7px 13px 6px; font-size: 11px; } /* a bit bigger */
.mk-btn { padding: 10px 18px 9px; font-size: 13px; } /* bigger still, in the room of the row that was under it */
/* The roles run down the first column, then down the second: a line above each but the top one of each column. */
.rp-menu { grid-auto-flow: column; grid-template-rows: repeat(6, auto); }
.rp-menu button:nth-child(2)::before { content: ""; position: absolute; left: 12px; right: 12px; top: -1.5px; height: 1px; background: linear-gradient(90deg, color-mix(in srgb, var(--slate) 70%, transparent) 0 40%, color-mix(in srgb, var(--slate) 45%, transparent) 40% 60%, color-mix(in srgb, var(--slate) 20%, transparent) 60% 80%, transparent 80%); }
.rp-menu button:nth-child(7)::before { display: none; }
@media (max-width: 640px) { .rp-menu { grid-auto-flow: row; grid-template-rows: none; } .rp-menu button:nth-child(7)::before { display: block; } }
/* The caption band over the top of the window, narrating the demo playing (../showcase.js). */
.demo-cap { position: absolute; left: 0; right: 0; top: 0; z-index: 3; padding: 11px 24px 10px; pointer-events: none; opacity: 0; transition: opacity .3s steps(3);
  background: rgba(5, 6, 13, .88); border-bottom: 2px solid var(--slate);
  font: 400 13px/1.5 var(--body); color: var(--cloud); text-align: center; text-wrap: balance; }
.demo-cap::before { content: "▶ "; color: var(--gold); }
.demo-cap.on { opacity: 1; }
@media (max-width: 640px) { .demo-cap { padding: 9px 14px 8px; font-size: 12px; } }
.demo-cap { font: 400 11px/1.7 var(--head); color: var(--white); } /* the note's type, beside the window */
.joined { width: min(520px, calc(100vw - 32px)); } .joined .joined-actions { margin: 22px 0 0; } /* the waitlist's thank-you, like the manifesto, smaller */