@font-face { font-family: 'IBM Plex Sans'; font-weight: 100 700; font-display: swap; src: url('../fonts/ibm-plex-sans.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans Condensed'; font-weight: 600; font-display: swap; src: url('../fonts/ibm-plex-sans-condensed-600.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('../fonts/ibm-plex-mono-400.woff2') format('woff2'); }

:root {
  --ink: #0b0c0e;
  --glass: rgba(15, 16, 19, .53);
  --glass-hi: rgba(20, 21, 25, .62);
  --plate: rgba(20, 21, 25, .66);
  --ground: #0e0f12;
  --well: rgba(0, 0, 0, .34);
  --line: rgba(236, 239, 243, .085);
  --line-2: rgba(236, 239, 243, .16);
  --text: #eef0f3;
  --text-2: #b9bdc4;
  --text-3: #a2a7af;
  --hover: rgba(236, 239, 243, .05);
  --selected: rgba(236, 239, 243, .09);
  --amber: #ffc527;
  --amber-ink: #1b1504;
  --amber-soft: rgba(255, 197, 39, .11);
  --amber-line: rgba(255, 197, 39, .6);
  --sans: 'IBM Plex Sans', system-ui, sans-serif;
  --cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, monospace;
  --gutter: clamp(16px, 4.4vw, 72px);
  /* How far a bleeding capture reaches past the 1340px column to the viewport edge. */
  --edge: max(var(--gutter), (100vw - 1340px) / 2);
  --blur: blur(30px) saturate(125%) brightness(.62);
  --ease: cubic-bezier(.16, 1, .3, 1);
  --ticket: 0 30px 70px -30px rgba(0, 0, 0, .85);
  --float: 40px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; background: var(--ink); scrollbar-color: rgba(236, 239, 243, .22) transparent; }
body { margin: 0; color: var(--text); font: 400 16px/1.45 var(--sans); font-feature-settings: "tnum" 1, "lnum" 1; -webkit-font-smoothing: antialiased; timeline-scope: --stage; }
::selection { background: var(--amber); color: var(--amber-ink); }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-thumb { background: rgba(236, 239, 243, .2); border-radius: 5px; border: 2px solid var(--ink); }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; border-radius: 4px; }
h1, h2, p, dl, dd, ol, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }

/* The light field: three blurred colours from the demo covers drifting slowly behind the glass, with the stage cover's own three waiting on top at zero opacity. */
.field { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: var(--ink); }
.lift { position: absolute; inset: 0 0 -14vh; }
.tint { position: absolute; inset: 0; opacity: 0; }
.field i { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.field i:nth-child(1) { left: -18vmax; top: -12vmax; background: #1f5560; animation: drift-a 19s ease-in-out infinite alternate; }
.field i:nth-child(2) { right: -22vmax; top: -6vmax; background: #7a4026; opacity: .5; animation: drift-b 25s ease-in-out infinite alternate; }
.field i:nth-child(3) { left: 20vw; bottom: -40vmax; background: #42295e; animation: drift-c 22s ease-in-out infinite alternate; }
.tint i:nth-child(1) { background: #1d3552; }
.tint i:nth-child(2) { background: #7a3816; }
.tint i:nth-child(3) { background: #4a2342; }
@keyframes drift-a { 50% { transform: translate(22vw, 6vh) scale(1.18); } to { transform: translate(8vw, 26vh) scale(.95); } }
@keyframes drift-b { 50% { transform: translate(-20vw, 24vh) scale(.88); } to { transform: translate(-6vw, 40vh) scale(1.12); } }
@keyframes drift-c { 50% { transform: translate(-26vw, -16vh) scale(1.14); } to { transform: translate(10vw, -30vh) scale(.9); } }

.glass { background: var(--glass); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--line); }
.lbl { font: 600 11.5px/1.2 var(--cond); letter-spacing: .075em; text-transform: uppercase; color: var(--text-3); }

/* Top strip */
.strip { position: sticky; top: 0; z-index: 10; height: 56px; display: flex; align-items: center; gap: 20px; padding: 0 var(--gutter); border-width: 0 0 1px; }
.mark { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 17px; letter-spacing: -.01em; text-decoration: none; }
.mark svg { width: 26px; height: 26px; }
.nav { display: flex; gap: 2px; margin-left: 12px; }
.nav a { color: var(--text-2); text-decoration: none; font-size: 14px; padding: 7px 11px; border-radius: 4px; transition: background .2s, color .2s; }
.nav a:hover, .nav a[aria-current] { color: var(--text); background: var(--selected); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text); flex: none; }
.motion { margin-left: auto; white-space: nowrap; height: 32px; display: flex; align-items: center; gap: 7px; padding: 0 10px; font: 400 13.5px var(--sans); border: 0; border-radius: 4px; background: none; color: var(--text-2); cursor: pointer; transition: background .2s, color .2s; }
.motion:hover { background: var(--hover); color: var(--text); }
.motion svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.motion .i-play, .motion[aria-pressed="true"] .i-pause { display: none; }
.motion[aria-pressed="true"] .i-play { display: inline; }
.still .field i { animation-play-state: paused; }

/* The boarding pass */
main { padding: 0 var(--gutter); overflow-x: clip; }
.pass { position: relative; max-width: 1340px; margin: 52px auto 0; display: grid; grid-template-columns: 1fr var(--stub, 340px); background: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--ticket); }
/* The stub notches are cut out of the ticket, so the light field shows through them. */
.pass { --notch: radial-gradient(circle 10px at calc(100% - var(--stub, 340px)) 0, #0000 9.5px, #000 10px), radial-gradient(circle 10px at calc(100% - var(--stub, 340px)) 100%, #0000 9.5px, #000 10px); -webkit-mask: var(--notch); -webkit-mask-composite: source-in; mask: var(--notch); mask-composite: intersect; }
.pass { background-image: radial-gradient(circle 11px at calc(100% - var(--stub, 340px)) 0, #0000 9.5px, rgba(236, 239, 243, .2) 10px, #0000 11px), radial-gradient(circle 11px at calc(100% - var(--stub, 340px)) 100%, #0000 9.5px, rgba(236, 239, 243, .2) 10px, #0000 11px); }
.nw { white-space: nowrap; }
.pass-main { display: flex; flex-direction: column; border-right: 1px dashed rgba(236, 239, 243, .26); min-width: 0; }
.seg { padding: 28px 36px; }
.seg-track { border-bottom: 1px solid var(--line); }
h1 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.02; font-weight: 600; letter-spacing: -.028em; max-width: 15ch; margin-top: 12px; text-wrap: balance; }
.sub { text-wrap: pretty; color: var(--text-2); font-size: clamp(16px, 1.3vw, 18.5px); margin-top: 16px; max-width: 56ch; }
.fields { display: grid; grid-template-columns: 1.45fr 1fr 1.1fr 1fr; border-bottom: 1px solid var(--line); }
.fields > div { padding: 18px 36px 20px; border-right: 1px solid var(--line); min-width: 0; }
.fields > div:last-child { border-right: 0; }
.val { line-height: 1.32; font-size: 21px; font-weight: 500; margin-top: 7px; letter-spacing: -.01em; }
.val small { text-wrap: pretty; display: block; font-size: 13px; color: var(--text-2); font-weight: 400; margin-top: 3px; letter-spacing: 0; }
/* Label and message share the row above the field, so feedback never covers it and the field stays level with the button. */
.seg-passenger { padding-bottom: 36px; flex: 1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-content: end; column-gap: 20px; }
.seg-passenger input, .seg-passenger .closed-field { grid-column: 1 / -1; grid-row: 2; }
/* Until a list is connected the field is a printed notice of the same size. */
.closed-field { display: flex; align-items: center; height: 54px; margin: 9px 0 0; padding: 0 16px; border: 1px dashed rgba(236, 239, 243, .26); border-radius: 4px; color: var(--text-2); font-size: 17px; }
.seg-passenger .lbl { grid-row: 1; align-self: end; }
.seg-passenger .msg { grid-column: 2; grid-row: 1; }
input { display: block; width: 100%; margin-top: 9px; height: 54px; padding: 0 16px; background: var(--well); border: 1px solid var(--line-2); border-radius: 4px; color: var(--text); font: 400 19px var(--sans); caret-color: var(--amber); transition: border-color .2s, background .2s; }
input::placeholder { color: var(--text-3); }
input:hover { border-color: rgba(236, 239, 243, .26); }
input:focus { outline: none; border-color: var(--amber); background: rgba(0, 0, 0, .45); }
input[aria-invalid="true"] { border-color: var(--amber-line); }
.msg { align-self: end; margin: 0; text-align: right; font-size: 14px; line-height: 18px; color: var(--text-2); text-wrap: pretty; }
.msg.warn { color: var(--amber); }
.stub { padding: 28px 28px 36px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bars { width: 100%; height: 132px; fill: var(--text); }
/* The hero stub keeps the app's four-row block, centred in the room above the button. */
@media (min-width: 761px) { #signup .stub > .lbl:first-child { margin-top: auto; } }
.hash { font: 400 12.5px var(--mono); color: var(--text-2); display: flex; justify-content: space-between; }
.note { font-size: 13.5px; color: var(--text-2); }
.board { margin-top: auto; height: 54px; border: 0; border-radius: 999px; background: rgba(236, 239, 243, .94); color: var(--ink); font: 600 17px var(--sans); cursor: pointer; box-shadow: 0 8px 24px -10px rgba(0, 0, 0, .6); transition: background .2s, transform .2s var(--ease); }
.board:hover { background: var(--text); }
.board:active { transform: translateY(1px); }
.board[disabled] { opacity: .6; cursor: progress; }
.pass.printed .board { background: var(--selected); color: var(--text); box-shadow: none; cursor: default; }
[data-seq] .stamp { display: inline-block; background: var(--amber); color: var(--amber-ink); border-radius: 3px; padding: 0 7px; }

/* The reprint: each segment flips down from its top edge, 85ms apart. */
.reprint [data-seg] { animation: flip .34s var(--ease) both; animation-delay: calc(var(--i, 0) * 85ms); transform-origin: top center; }
@keyframes flip { from { transform: perspective(900px) rotateX(-92deg); filter: brightness(1.8); } to { transform: none; filter: none; } }
/* A pass or a printed list waiting below the fold sits edge-on until it scrolls in and prints. */
.pass.armed [data-seg], [data-print].armed > * { transform: perspective(900px) rotateX(-92deg); transform-origin: top center; }
[data-print] > * { transform-origin: top center; }
.printing > * { animation: flip .34s var(--ease) both; animation-delay: calc(var(--i, 0) * var(--step, 85ms)); }
.srcs[data-print], .slots[data-print] { --step: 60ms; }

/* Up next */
.next { position: relative; z-index: 1; max-width: 1340px; margin: 32px auto 0; border-radius: 6px; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); overflow: hidden; }
.next header { height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 20px; border-bottom: 1px solid var(--line); }
.next h2 { font-size: 16px; font-weight: 600; }
.next header span { color: var(--text-3); font-size: 13.5px; }
.cols, .rows a { display: grid; grid-template-columns: 70px minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.6fr); column-gap: 12px; align-items: center; padding: 0 20px; }
.cols { height: 32px; border-bottom: 1px solid var(--line); }
.rows { list-style: none; padding: 0; position: relative; }
.rows li { position: relative; }
/* One amber wash glides to whichever row is playing. */
.rows::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--h, 42px); transform: translateY(var(--y, 0)); background: var(--amber-soft); opacity: 0; pointer-events: none; }
.rows.ready::before { opacity: 1; transition: transform .28s var(--ease); }
.still .rows.ready::before { transition: none; }
.rows a { height: 42px; font-size: 16px; border-bottom: 1px solid var(--line); text-decoration: none; transition: background .25s; }
.rows li:last-child a { border-bottom: 0; }
.rows a:hover { background: var(--hover); }
.rows .s { color: var(--text-3); }
.rows .w { color: var(--text-2); }
.rows .n, .rows .w { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.rows a.on .s { background: var(--amber); color: var(--amber-ink); border-radius: 3px; justify-self: start; padding: 1px 8px; font-weight: 600; display: inline-flex; align-items: center; }
.rows a.on .n { font-weight: 500; }
/* Without the script's glide the playing row keeps its own wash. */
.rows:not(.ready) a.on { background: var(--amber-soft); }

/* The playing row's three-bar meter, as on the app's playing badge. */
.eq { display: none; gap: 2px; align-items: end; height: 11px; margin-right: 6px; }
.eq i { display: block; width: 2px; background: currentColor; border-radius: 1px; animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-duration: .8s; animation-delay: -.3s; }
.eq i:nth-child(3) { animation-duration: 1.15s; animation-delay: -.6s; }
@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 11px; } }
.rows a.on .eq { display: inline-flex; }
.still .eq i { animation-play-state: paused; }

/* Stops, in two tempos: the acts (Proof, Stage) open on more quiet than the everyday run. */
.stop { max-width: 1340px; margin: 0 auto; padding: clamp(72px, 8vw, 112px) 0 0; display: grid; gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.stop.act { padding-top: clamp(112px, 14vw, 200px); }
.stop.act h2 { font-size: clamp(40px, 4.6vw, 66px); line-height: 1.02; letter-spacing: -.028em; }
.stop h2 { font-size: clamp(32px, 3.3vw, 46px); line-height: 1.06; font-weight: 600; letter-spacing: -.024em; text-wrap: balance; }
.copy h2 { margin-bottom: 22px; }
.copy { max-width: 46ch; }
.stop p { text-wrap: pretty; }
.copy p, .head-p p, .p1, .p2 p { color: var(--text-2); font-size: 17.5px; }
.copy p + p, .head-p p + p, .p2 p + p { margin-top: 14px; }
.head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 16px clamp(32px, 5vw, 72px); align-items: start; }
.head-p { max-width: 62ch; }
.example { padding: 14px 18px 16px; font-size: 13.5px; color: var(--text-3); }
.mono { font: 400 13.5px var(--mono); color: var(--text); }

/* Plates: every capture lies on a glass plate at about its real size, cropped or run off the page edge rather than shrunk. */
.plate { position: relative; margin: 0; padding: 10px; background: var(--plate); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--ticket); overflow: hidden; }
.plate img { border-radius: 3px; background: var(--ink); }
.plate figcaption { padding: 10px 8px 0; font-size: 13.5px; color: var(--text-3); }
.bleed-l, .bleed-r { display: flex; flex-direction: column; }
.bleed-l { margin-left: calc(-1 * var(--edge)); padding-left: 0; border-left: 0; border-radius: 0 6px 6px 0; align-items: flex-end; }
.bleed-r { margin-right: calc(-1 * var(--edge)); padding-right: 0; border-right: 0; border-radius: 6px 0 0 6px; align-items: flex-start; }
.bleed-l img { border-radius: 0 3px 3px 0; flex: none; }
.bleed-l picture { display: flex; justify-content: flex-end; width: 100%; overflow: hidden; }
.bleed-r img { border-radius: 3px 0 0 3px; }
.bleed-l figcaption { align-self: stretch; padding-left: var(--edge); }

/* Proof: the signal path printed as a full-width ticket strip, the matching hashes at either end. */
.stop-proof { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "h h" "p1 p2" "path path" "stats stats"; row-gap: 28px; }
.stop-proof h2 { grid-area: h; }
.p1 { grid-area: p1; max-width: 46ch; }
.p2 { grid-area: p2; max-width: 62ch; }
.path { grid-area: path; margin-top: 12px; background: var(--glass-hi); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); border: 1px solid var(--line); border-radius: 6px; box-shadow: var(--ticket); overflow: hidden; }
.path > figcaption { display: flex; align-items: center; height: 48px; padding: 0 24px; border-bottom: 1px solid var(--line); font-weight: 600; }
.cells { list-style: none; padding: 0; display: grid; grid-template-columns: 1.45fr 1fr 1fr 1fr 1.45fr; position: relative; }
/* The wire: the signal running from the decoder to the device along the top of the strip. */
.cells::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--text); opacity: .4; transform-origin: left center; }
.cell { padding: 20px 24px 22px; border-right: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; }
.cell:last-child { border-right: 0; }
.cell .val { margin-top: 7px; }
.count { margin-top: 16px; font-size: 14.5px; color: var(--text-2); }
.count b { display: inline-block; min-width: 10ch; font-weight: 500; color: var(--text); }
.cell .h { margin-top: 4px; font-size: 13.5px; }
.path-foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 24px; border-top: 1px solid var(--line); padding: 0 6px; }
.verdict { display: flex; align-items: center; gap: 8px; padding: 14px 18px; font-size: 14.5px; color: var(--text); }
.verdict svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 16; }
.stats { grid-area: stats; }
/* The trace: the strip waits dim below the fold, then the signal runs through it once. */
.path.armed .cell { opacity: .3; }
.path.armed .cells::before { transform: scaleX(0); }
.path.armed [data-hash-print] { clip-path: inset(0 100% 0 0); }
.path.armed .verdict svg { stroke-dashoffset: 16; }
.path.tracing .cell { animation: lit .45s var(--ease) both; animation-delay: calc(var(--i) * 130ms); }
.path.tracing .cells::before { animation: wire .9s cubic-bezier(.4, 0, .2, 1) both; }
.path.tracing [data-hash-print] { animation: type .5s steps(17, end) .9s both; }
.path.tracing .verdict svg { animation: tick .35s var(--ease) 1.45s both; }
@keyframes lit { from { opacity: .3; } to { opacity: 1; } }
@keyframes wire { from { transform: scaleX(0); } }
@keyframes type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes tick { from { stroke-dashoffset: 16; } to { stroke-dashoffset: 0; } }

/* Measured speed, printed like the pass's figures. */
.speed { display: flex; flex-wrap: wrap; gap: 14px 40px; padding-top: 18px; border-top: 1px solid var(--line); }
.speed span { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text-2); max-width: 30ch; }
.speed b { font-size: 26px; font-weight: 500; letter-spacing: -.01em; color: var(--text); }
.copy .speed { margin-top: 26px; }
.speed.big b { font-size: clamp(34px, 3.6vw, 52px); font-weight: 600; letter-spacing: -.026em; line-height: 1.04; }
.speed.big span { max-width: 22ch; }
.stats.big span { max-width: 32ch; }

/* Playback: one Between tracks panel, the illustration beside the real settings docked at their own size. */
.stop-playback { grid-template-columns: minmax(0, 1fr); }
.join { display: flex; flex-direction: column; border-radius: 6px; box-shadow: var(--ticket); background: rgba(14, 15, 18, .86); border: 1px solid var(--line); overflow: hidden; }
.join > figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 52px; padding: 8px 12px 8px 24px; border-bottom: 1px solid var(--line); font-weight: 600; }
.modes { margin-left: auto; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--line-2); border-radius: 6px; }
.modes button { height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: none; color: var(--text-2); font: 400 14px var(--sans); cursor: pointer; transition: background .2s, color .2s; }
.modes button:hover { color: var(--text); background: var(--hover); }
.modes button[aria-pressed="true"] { background: var(--selected); color: var(--text); }
.join-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
.join-ill { display: flex; flex-direction: column; min-width: 0; padding: 0 6px; }
.join-svg { overflow: hidden; display: block; width: 100%; height: auto; padding: 22px 12px 0; }
.join-svg .bar-a { fill: #7cc0c9; }
.join-svg .bar-b { fill: #e3a47a; }
.join-svg rect { transition: opacity .6s var(--ease); }
.join-svg .lane { transition: transform .9s var(--ease); }
.join-svg .hush { stroke: var(--text-3); stroke-width: 2; stroke-dasharray: 2 4; transition: opacity .5s; }
.join-svg .seam { stroke: var(--amber); stroke-width: 2; }
.join-svg .seam-g { transition: transform .9s var(--ease), opacity .2s; }
.join-svg text { font: 600 12px var(--cond); letter-spacing: .075em; text-transform: uppercase; fill: var(--text-3); }
.join-svg .seam-t { fill: var(--amber); }
.join-svg .playhead { stroke: var(--text); stroke-width: 1.5; opacity: 0; }
.join-note { padding: 14px 18px 0; min-height: calc(4 * 1.45em + 14px); font-size: 15.5px; color: var(--text); }
.join-ill .example { margin-top: auto; }
.dock { margin: 0; border-left: 1px solid var(--line); background: var(--ground); padding: 24px 24px 0; display: flex; flex-direction: column; justify-content: center; }
.dock img { width: 706px; max-width: none; }
.dock figcaption { margin-top: auto; padding: 14px 0 16px; font-size: 13.5px; color: var(--text-3); }

/* Stage: the one full-bleed peak, pinned while it opens out from the cover. */
.stop-stage { grid-template-columns: minmax(0, 1fr); }
.stage-track { position: relative; width: calc(100vw - 24px); margin-left: calc(50% - 50vw + 12px); }
.stage-fig { --fw: min(100vw - 24px, (100svh - 140px) * 16 / 9); width: var(--fw); margin: 0 auto; }
.frame { position: relative; border-radius: 6px; overflow: hidden; background: var(--ink); box-shadow: var(--ticket); transform-origin: var(--o); }
.frame video { display: block; width: 100%; height: auto; }
.frame .vid-m { display: none; }
.stage-fig figcaption { padding: 12px 2px 0; font-size: 13.5px; color: var(--text-3); }

/* Home: the capture runs off the left edge, the shelves print beside it. */
.stop-home { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "plate copy" "plate shelves"; grid-template-rows: auto 1fr; }
.stop-home .copy { grid-area: copy; }
.stop-home .plate { grid-area: plate; }
.stop-home .plate img { width: max(939px, 100%); max-width: none; }
.shelves { grid-area: shelves; display: grid; border-top: 1px solid var(--line); max-width: 46ch; }
.shelves > div { padding: 12px 0; border-bottom: 1px solid var(--line); }
.shelves dt { font-weight: 600; font-size: 16px; }
.shelves dd { color: var(--text-2); font-size: 15px; margin-top: 2px; }

/* Search: copy and the measured figures on the left, the capture running off the right edge. */
.stop-search { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: center; }
.stop-search .plate img { width: max(1039px, 100%); max-width: none; }
.armed[data-wipe] img { clip-path: inset(0 0 100% 0); }
.wiping[data-wipe] img { animation: wipe .24s cubic-bezier(.2, 0, 0, 1) both; }
@keyframes wipe { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }

/* Sources: the Folders panel at its own size, copy and the Works with board beside it. */
.stop-sources { grid-template-columns: 362px minmax(0, 1fr); align-items: center; }
.detail img { width: 340px; }
.side { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.side .copy { max-width: 58ch; }
.srcs { border-radius: 6px; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); overflow: hidden; }
.srcs-head, .srcs-row { display: grid; grid-template-columns: 1fr 2.2fr 110px; gap: 16px; align-items: center; padding: 0 18px; }
.srcs-head { height: 34px; border-bottom: 1px solid var(--line-2); }
.srcs-row { min-height: 46px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.srcs-row:last-child { border-bottom: 0; }
.srcs-row span:nth-child(2) { color: var(--text-2); }
.st { display: flex; align-items: center; gap: 8px; }
.srcs-row.soon .st { color: var(--text-2); }
.srcs-row.soon .dot, .slots-row.slot .dot { background: none; box-shadow: inset 0 0 0 1.5px var(--text-2); }
a.ext { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; transition: text-decoration-color .2s; }
a.ext:hover { text-decoration-color: var(--text); }
.srcs-row a { color: inherit; text-decoration: none; }
.srcs-row a:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Extensions: copy beside the slots board, the empty slot on a dashed seam that creeps while it waits. */
.stop-extensions { grid-template-columns: 362px minmax(0, 1fr); align-items: start; padding-top: 48px; }
.stop-extensions .copy { max-width: 362px; }
.slots { border-radius: 6px; box-shadow: 0 14px 34px -18px rgba(0, 0, 0, .7); overflow: hidden; }
.slots-head, .slots-row { display: grid; grid-template-columns: 1.1fr 1fr 2fr 110px; gap: 16px; align-items: center; padding: 0 20px; }
.slots-head { height: 36px; border-bottom: 1px solid var(--line-2); }
.slots-row { min-height: 52px; border-bottom: 1px solid var(--line); font-size: 16px; }
.slots-row span:nth-child(3) { color: var(--text-2); }
.slots-row .mono { font-size: 14px; color: var(--text-2); }
.slots-row.slot { position: relative; border-bottom: 0; color: var(--text-2); }
.slots-row.slot::before, .slots-row.slot::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: repeating-linear-gradient(90deg, rgba(236, 239, 243, .3) 0 4px, #0000 4px 8px); animation: seam 12s linear infinite; }
.slots-row.slot::before { top: -1px; }
.slots-row.slot::after { bottom: 0; animation-direction: reverse; }
@keyframes seam { to { background-position: 96px 0; } }
.still .slots-row.slot::before, .still .slots-row.slot::after { animation-play-state: paused; }
.slots-row.slot .st { color: var(--text-2); }
.slots .example { padding: 14px 20px 16px; }

/* Layout: the window in layout mode, with the closing pass laid over its foot. */
.stop-layout { grid-template-columns: minmax(0, 1fr); }
.stop-layout .copy { max-width: 60ch; }
.wide img { width: 100%; }
.pass-close { z-index: 2; margin-top: clamp(72px, 9vw, 128px); max-width: 1180px; }
.pass-close h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.04; font-weight: 600; letter-spacing: -.026em; margin-top: 12px; }
.pass-close .bars { height: 96px; }

.foot { max-width: 1340px; margin: 72px auto 0; padding: 28px var(--gutter) 48px; display: flex; gap: 28px; flex-wrap: wrap; color: var(--text-3); font-size: 14px; border-top: 1px solid var(--line); }
.mark-sm { color: var(--text); font-weight: 600; }
.foot-link { color: var(--text-2); text-decoration: none; }
.foot-link:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.copy-r { margin-left: auto; font-size: 14px; }

@media (max-width: 1240px) {
  .fields { grid-template-columns: 1fr 1fr; }
  .fields > div:nth-child(2) { border-right: 0; }
  .fields > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .join-body { grid-template-columns: minmax(0, 1fr); }
  .dock { border-left: 0; border-top: 1px solid var(--line); align-items: center; }
  .dock figcaption { text-align: center; }
}
@media (max-width: 1100px) {
  .pass { --stub: 290px; }
  .nav { display: none; }
  .cols, .rows a { grid-template-columns: 70px minmax(0, 2.2fr) minmax(0, 1fr); }
  .cols span:nth-child(4), .rows .w + .w { display: none; }
  .fields { grid-template-columns: 1fr 1fr; }
  .fields > div:nth-child(2) { border-right: 0; }
  .fields > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .head, .stop-search { grid-template-columns: minmax(0, 1fr); }
  /* Beside the Folders plate the boards are narrow, so each row puts its description on a line of its own. */
  .srcs-head, .slots-head { display: none; }
  .srcs-row { grid-template-columns: 1fr auto; gap: 4px 12px; }
  .srcs-row span:nth-child(2) { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .slots-row { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 14px; }
  .slots-row .mono { display: none; }
  .slots-row span:nth-child(3) { grid-column: 1 / -1; grid-row: 2; font-size: 14px; }
  .stop-home { grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "plate" "shelves"; }
  .cells { grid-template-columns: 1fr 1fr 1fr; }
  .cell.end { grid-column: span 3; border-right: 0; }
  .cell.end:first-child { border-bottom: 1px solid var(--line); }
  .cell:nth-child(4) { border-right: 0; }
  .cell:last-child { border-top: 1px solid var(--line); }
}
@media (max-width: 860px) {
  .stop-sources, .stop-extensions { grid-template-columns: minmax(0, 1fr); }
  .stop-sources .plate { order: 2; justify-self: start; }
  .stop-extensions { padding-top: clamp(72px, 8vw, 112px); }
  .stop-extensions .copy { max-width: 46ch; }
}
@media (max-width: 760px) {
  :root { --float: 16px; }
  body { font-size: 15.5px; }
  .strip { height: 52px; gap: 10px; }
  .motion { padding: 0 8px; }
  .pass { grid-template-columns: 1fr; margin-top: 24px; }
  .pass { -webkit-mask: none; mask: none; background-image: none; display: flex; flex-direction: column; }
  h1 { font-size: clamp(30px, 8.6vw, 40px); }
  .pass-main, .stub { display: contents; }
  .seg-passenger { padding-bottom: 22px; }
  .seg-passenger .msg { grid-column: 1 / -1; grid-row: 2; text-align: left; margin-top: 6px; }
  .seg-passenger input, .seg-passenger .closed-field { grid-row: 3; }
  .board { order: 4; margin: 0 20px 24px; }
  .stub > .lbl { order: 5; padding: 20px 20px 0; border-top: 1px dashed rgba(236, 239, 243, .26); }
  .bars, .hash { order: 6; width: auto; margin: 0 20px; }
  .hash { order: 7; margin-bottom: 22px; }
  .pass-main { border-right: 0; border-bottom: 1px dashed rgba(236, 239, 243, .26); }
  .seg, .fields > div { padding-left: 20px; padding-right: 20px; }
  .seg { padding-top: 22px; padding-bottom: 22px; }
  .val { font-size: 18px; }
  .bars { height: 64px; margin-top: 10px; margin-bottom: 8px; }
  .note { display: none; }
  .cols { display: none; }
  .rows a { grid-template-columns: 44px 1fr; height: 46px; padding: 0 14px; font-size: 15px; }
  .rows .w { display: none; }
  .next header { padding: 0 14px; }
  .copy p, .head-p p, .p1, .p2 p { font-size: 16.5px; }

  .stop-proof { grid-template-columns: minmax(0, 1fr); grid-template-areas: "h" "p1" "path" "p2" "stats"; }
  .path { margin-top: 0; }
  .path > figcaption { padding: 0 16px; }
  .cells { grid-template-columns: minmax(0, 1fr); }
  .cell, .cell.end { grid-column: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 14px 16px 16px; display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; }
  .cell:last-child { border-top: 0; border-bottom: 0; }
  .cell .lbl { padding-top: 4px; }
  .cell .val { margin-top: 0; font-size: 17px; }
  .cell .count, .cell .h { grid-column: 2; }
  .count { margin-top: 10px; font-size: 14px; }
  .cell .h { font-size: 13px; overflow-wrap: anywhere; }
  .path-foot { padding: 0; }
  .verdict { padding: 14px 16px 0; }
  .path .example { padding: 8px 16px 14px; }
  .speed { gap: 14px 28px; }

  .join > figcaption { padding-left: 14px; }
  .modes button { padding: 0 9px; font-size: 13px; }
  .join-ill { padding: 0; }
  .join-svg { padding: 18px 12px 0; }
  .join-note { padding: 12px 14px 0; min-height: calc(6 * 1.45em + 12px); }
  .dock { padding: 12px 6px 0; }
  .dock img { width: 342px; max-width: 100%; }
  .dock figcaption { padding: 10px 8px 14px; }

  .stage-track { width: 100vw; margin-left: calc(-1 * var(--gutter)); }
  .stage-fig { --fw: 100vw; }
  .frame { border-radius: 0; --r: 0px; }
  .frame .vid-d { display: none; }
  .frame .vid-m { display: block; }
  .stage-fig figcaption { padding: 10px var(--gutter) 0; }

  /* On a phone the bleeding plates run off the right edge at their own size, lined up with the copy on the left. */
  .bleed-l, .bleed-r { margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 10px 0 10px var(--gutter); border-width: 1px 0; border-radius: 0; align-items: flex-start; }
  .bleed-l img, .bleed-r img { border-radius: 3px 0 0 3px; }
  .bleed-l figcaption { padding-left: 0; }
  .bleed-l picture { justify-content: flex-start; }
  .stop-home .plate img { width: 480px; }
  .stop-search .plate img { width: 620px; }
  .detail { padding: 8px; }
  .detail img { width: 100%; }
  .wide { padding: 8px; }
  .stop-layout .plate img { aspect-ratio: 690 / 760; height: auto; object-fit: cover; object-position: 50% 100%; }
  .pass-close { margin-top: 56px; }
}

/* Scroll-driven depth, where the browser supports it and the Motion button hasn't paused the page. */
@supports (animation-timeline: view()) {
  :root:not(.still) .lift { animation: lift linear both; animation-timeline: scroll(root); }
  :root:not(.still) .tint { animation: tint linear both; animation-timeline: --stage; animation-range: cover 10% cover 95%; }
  :root:not(.still) #signup { animation: sink linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  :root:not(.still) .plate { animation: float linear both; animation-timeline: view(); animation-range: cover; }

  /* The stage pins for a stretch of scroll and opens from the animated cover to the whole window. */
  .stage-track { view-timeline: --stage block; }
  :root:not(.still) .stage-track { height: 230vh; }
  :root:not(.still) .stage-fig { --fh: calc(var(--fw) * 9 / 16 + 44px); position: sticky; top: max(64px, calc(28px + 50svh - var(--fh) / 2)); }
  :root:not(.still) .frame { animation: open linear both; animation-timeline: --stage; animation-range: contain 0% contain 68%; }
  :root:not(.still) .stage-fig figcaption { animation: settle linear both; animation-timeline: --stage; animation-range: contain 52% contain 68%; }
  .frame { --o: 9.4% 65.1%; --from: translate(40.6%, -15.1%) scale(2.6); --clip: inset(49.9% 82.1% 19.7% .7% round 2px); }
  @media (max-width: 760px) {
    :root:not(.still) .stage-track { height: 160vh; }
    :root:not(.still) .stage-fig { --fh: calc(100vw * 1016 / 720 + 60px); top: max(56px, calc(26px + 50svh - var(--fh) / 2)); }
    .frame { --o: 50% 77%; --from: translate(0%, -27%) scale(2.2); --clip: inset(66% 30% 12% 30% round 2px); }
  }
}
@keyframes lift { to { transform: translateY(-14vh); } }
@keyframes tint { 0% { opacity: 0; } 30%, 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sink { to { transform: translateY(60px) scale(.965); } }
@keyframes float { from { translate: 0 var(--float); } to { translate: 0 calc(-1 * var(--float)); } }
@keyframes open {
  from { transform: var(--from); clip-path: var(--clip); animation-timing-function: cubic-bezier(.5, 0, .2, 1); }
  to { transform: none; clip-path: inset(0 round var(--r, 6px)); }
}
@keyframes settle { from { opacity: 0; } to { opacity: 1; } }