/* race.css: the Redaction race section (.rect-drag), ONE copy, linked by
   index.html and by generated pages that include partials/race-stage.html.
   Moved verbatim out of index.html's <style> (2026-10-04). The payback
   picker's rules also name .payback-solo (a standalone picker, assets/payback.js),
   the same rules under both selectors. */
  /* ========= §7 RECTANGLE DRAG (slash-cut placeholder) ========= */
  .rect-drag {
    padding: 5.5rem 1.5rem 4.5rem; /* BAND RULE (owner 2026-09-28): 88px (5.5rem) of visible space above and below the content at every background-colour change. 4.5rem + the caption's own 16px margin = 88 visible. */
    background: var(--bg-surface-muted);
  }
  .rect-drag .container { max-width: var(--content-max); margin: 0 auto; text-align: center; }
  .rect-drag h2 { max-width: 28ch; margin: 0 auto 1rem; }
  .rect-drag .lede { color: var(--text-secondary); font-size: 1.125rem; line-height: 1.55; max-width: 60ch; margin: 0 auto 2rem; }
  .slash-window {
    position: relative;
    aspect-ratio: 16/9;
    width: 100%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-float-strong);
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
  }
  /* warm edge — reused from the pricing card (same float-strong family) */
  [data-theme="light"] .slash-window {
    border: 1px solid rgba(98,93,75,0.175);
    box-shadow: var(--shadow-float-strong), 0 0.5px 0 rgba(98,93,75,0.195);
  }
  /* Inset perimeter shade — reads as the footage being recessed INTO the page
     rather than a flat rectangle pasted on it. Has to be an ::after overlay,
     not `box-shadow: inset` on .slash-window itself: an inset shadow paints
     above the background but BELOW child content, so the <video> would cover
     it completely.
     Sits at z-index 4 — above the panes and their dim overlays (z 3), below
     every piece of chrome: the timer chips (z 5), the vs badge (z 6) and the
     replay control (z 8). So only the FOOTAGE picks up the recess and nothing
     that has to stay legible gets shaded. pointer-events:none keeps the replay
     button clickable through it. */
  .slash-window::after {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 4;
    /* Photoshop "inner shadow", not a vignette. Each layer uses a NEGATIVE
       spread roughly equal to its blur, which confines it to a band just
       inside its own edge instead of bleeding toward the middle. That's what
       keeps the OUTER edge crisp — the earlier wide `inset 0 0 22px` bloom
       washed across the boundary and made the whole rectangle read soft.

       Angle: light from above, so the top edge carries the shadow (distance 7,
       size 9) and the other three get lighter fills to close the perimeter.
       The 1px liner is the crisp inner edge the shadow then falls away from.

       Alphas are high because of WHAT THIS SITS ON. At idle and done — the two
       static states — .pane-overlay covers the footage with rgba(14,17,22,.66).
       Shading black over an already-66%-dark scrim leaves very little contrast,
       so gentle values vanished exactly where the effect is supposed to live.
       These read as subtle ON THE SCRIM; judge them there, not against the
       bright playing frames.

       Deliberately NOT theme-split: the surface underneath is video footage or
       that same neutral scrim in both themes, so a warm light-mode variant was
       tinting against a colour that isn't actually there. */
    box-shadow:
      inset  0    0   0 1px rgba(0,0,0,0.12),
      inset  0    7px 9px -7px rgba(0,0,0,0.85),
      inset  0   -5px 8px -6px rgba(0,0,0,0.55),
      inset  7px  0   9px -7px rgba(0,0,0,0.50),
      inset -7px  0   9px -7px rgba(0,0,0,0.50);
  }
  .slash-window .half {
    position: absolute; inset: 0;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: 0.875rem;
  }
  /* Divider is a slight incline (leans like "/"): top at 58%, bottom at 42%.
     These vertices MUST match the SVG line endpoints below so the gray line
     sits exactly on the blue/white intersection. */
  /* Straight vertical 50/50 seam (was a diagonal slash tuned for static stills).
     The two full-window video recordings are tall, so a diagonal clip fragmented
     them; a clean vertical split shows each app window whole. */
  .slash-window .half-left {
    background: linear-gradient(135deg, rgba(74,143,243,0.10), rgba(74,143,243,0.02));
    clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
  }
  .slash-window .half-right {
    background: var(--bg-surface);
    clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  }
  /* Each recording is pinned to ITS OWN half (left half = left 50%, right half =
     right 50%) then object-fit:cover fills that pane. The clips are ~1:1 tall
     app windows, so cover crops only a sliver off the sides; full height (toolbar
     → results) stays visible. The half's clip-path + the window's rounded corners
     are the mask. */
  .slash-window .shot {
    position: absolute; top: 0; bottom: 0; width: 50%; height: 100%;
    object-fit: cover;
    background: var(--bg-surface);
    user-select: none; -webkit-user-drag: none;
  }
  .slash-window .half-left  .shot { left: 0;  object-position: 50% 0%; }
  .slash-window .half-right .shot { right: 0; object-position: 50% 0%; }

  /* ---- Redaction-race states: per-pane gray overlay ----
     The overlay dims a pane when it is NOT actively "racing": at rest (idle) and
     again the moment its clip finishes (done). This mirrors Cover's own dim of a
     document before/after the engine runs. Lives inside .half so the clip-path
     masks it to exactly that pane.
     Pure dim, nothing in it: the old 56px green/red check disc that used to sit
     centred here is gone. The scoreboard's own status mark already resolves to a
     check or a cross, and the timer colour says the same thing a third time — one
     signal, on the board, is enough. */
  .slash-window .pane-overlay {
    position: absolute; inset: 0; z-index: 3;
    background: rgba(14,17,22,0.66);
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;
  }
  /* Constrain each overlay to its OWN pane. The parent .half is full-window-sized
     (clip-path masks it to a half), so a bare inset:0 would spill across the seam —
     pin the overlay to the actual pane rect instead. */
  .slash-window .half-left  .pane-overlay { right: 50%; }
  .slash-window .half-right .pane-overlay { left: 50%; }
  .slash-window .half[data-pane-state="idle"] .pane-overlay,
  .slash-window .half[data-pane-state="done"] .pane-overlay { opacity: 1; }
  /* PAUSED dims too, and it needs its own rule rather than falling out of the
     pane states above. Pausing deliberately leaves both panes on `playing` —
     that is what stops an already-finished clip from rejoining the race on
     resume — so keyed on pane state alone, pause was the one stopped state that
     stayed bright. Keyed on the WINDOW instead, so the rule reads the same way
     the drawer does: dim whenever the race is not actually running. An
     already-done pane is covered by both rules and is unaffected. */
  .slash-window[data-state="paused"] .pane-overlay { opacity: 1; }
  /* ══ THE ONE OBJECT: drawer scoreboard ═══════════════════════════════════
     Replaces seven floating things — the two timer cards (.half-content), the
     vs badge, the two 56px completion discs (.pane-badge) and the centred play
     disc with its label pill — with a SINGLE board pinned to the top of the
     window. The play control is no longer a separate object hovering over the
     footage; it is a DRAWER on the board that slides down whenever there is an
     action to offer and slides away while the race runs.

     Same PLANE as the seam and the section behind it: the board is painted in
     the section's own --bg-surface-muted and carries the WINDOW's edge treatment
     (same hairline, same --shadow-float-strong, same warm 0.5px contact edge),
     so it reads as the background plane floating over the recessed footage
     rather than as a white card pasted on top of it.

     z-index 6: above the window's inner recess (::after, z 4) and above the
     seam-plane (z 5), so it sits ON the seam the way the old vs badge did. */
  .slash-window .race-board {
    position: absolute; top: 5.5%; left: 50%; transform: translateX(-50%);
    z-index: 6;
    /* width:max-content is LOAD-BEARING for the centring below, not a nicety. An
       absolutely-positioned box is shrink-to-fit, and once the window gets narrow
       enough that the board's natural width approaches the space available, Chrome
       stops resolving the two 1fr tracks to the max flex fraction and sizes them to
       their own contents instead. The columns then go unequal (measured 87px vs
       161px) and "vs" slides ~37px off the seam. Pinning the box to its max-content
       width keeps the fr resolution in the equal-tracks regime at every width.
       Deliberately NO max-width:100% — that re-introduces the same clamp, and the
       narrow-screen rules below are what keep the board inside the window. */
    width: max-content;
    background: var(--bg-surface-muted);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-float-strong);
    overflow: hidden;             /* clips the drawer while it is collapsed */
    white-space: nowrap;
    text-align: left;
  }
  [data-theme="light"] .slash-window .race-board {
    border-color: rgba(98,93,75,0.175);
    box-shadow: var(--shadow-float-strong), 0 0.5px 0 rgba(98,93,75,0.195);
  }
  /* Equal 1fr side columns put the divider dead-centre BY CONSTRUCTION, whatever
     the two names happen to measure — that is what lands "vs" exactly on the
     window seam, instead of an offset that drifts the moment a longer competitor
     is picked from the dropdown. The slack from the shorter name falls OUTWARD. */
  .slash-window .rb-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; }
  /* Gap RHYTHM, not one uniform value. A single gap made the row read as four
     unrelated things at equal spacing — the app mark sat as far from its own
     name as the name sat from the clock. Two groups instead:
         [mark · name]        the brand lockup, one object
         [clock · result]     the outcome, one object
     so the base gap is the TIGHT one (6px) and the seam between the two groups
     is opened to 12px by a margin on the clock. The margin goes on the side
     facing the name, which is opposite per column because the two halves are
     mirrored. Outer padding (16px) stays the widest space on the row, so the
     groups never crowd the board's edge or the divider. */
  .slash-window .rb-side  { display: flex; align-items: center; gap: 0.375rem; padding: 0.85rem 1rem; }
  .slash-window .rb-cover .rb-time { margin-left: 0.375rem; }
  .slash-window .rb-acro  .rb-time { margin-right: 0.375rem; }
  .slash-window .rb-side.rb-cover { justify-content: flex-end; }    /* right-aligned, hugs the divider */
  .slash-window .rb-side.rb-acro  { justify-content: flex-start; }  /* left-aligned,  hugs the divider */
  .slash-window .rb-name { font-size: 0.85rem; font-weight: 650; letter-spacing: -0.01em; color: var(--text-primary); }
  /* App mark, outermost on its side so the board reads brand → name → clock →
     result, running inward toward the seam.
     viewBox is cropped to the artwork box (48..464 of the 512 source) rather
     than reusing the footer's full-bleed 0 0 512 512. That source insets the
     rounded square to ~81% of its own canvas, so at this size the full viewBox
     rendered an 11.4px mark inside a 14px slot and read undersized next to
     13.6px text. Cropped, the element size IS the mark size. */
  .slash-window .rb-logo { width: 15px; height: 15px; flex: 0 0 auto; display: block; }
  /* No pill, no fill around the clock — plain mono text with a mark beside it. */
  .slash-window .rb-time {
    font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
    color: var(--text-secondary); font-variant-numeric: tabular-nums;
  }
  /* The status mark is STATE-DEPENDENT: a pulsing dot while that clip runs, which
     then RESOLVES into a check (won) or a cross (lost). A check that is present
     from the start would mean nothing mid-race, and resolving the glyph keeps
     win/lose from depending on colour alone. */
  .slash-window .rb-mark { width: 11px; height: 11px; flex: 0 0 auto; display: grid; place-items: center; }
  .slash-window .rb-mark .rb-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); }
  .slash-window .rb-mark svg { width: 11px; height: 11px; display: none; }
  .slash-window .rb-side.is-running .rb-dot { background: #2FBF71; animation: rbPulse 1.15s ease-in-out infinite; }
  /* "behind" = the other side has already landed; this clock is now losing. */
  .slash-window .rb-side.is-running.is-behind .rb-dot  { background: #E5484D; }
  .slash-window .rb-side.is-running.is-behind .rb-time { color: #c0353a; }
  .slash-window .rb-side.is-won  .rb-dot,
  .slash-window .rb-side.is-lost .rb-dot { display: none; }
  .slash-window .rb-side.is-won  .rb-ok { display: block; color: #157f43; }
  .slash-window .rb-side.is-lost .rb-no { display: block; color: #c0353a; }
  .slash-window .rb-side.is-won  .rb-time { color: #157f43; }
  .slash-window .rb-side.is-lost .rb-time { color: #c0353a; }
  [data-theme="dark"] .slash-window .rb-side.is-won  .rb-ok,
  [data-theme="dark"] .slash-window .rb-side.is-won  .rb-time { color: #7ee0a6; }
  [data-theme="dark"] .slash-window .rb-side.is-lost .rb-no,
  [data-theme="dark"] .slash-window .rb-side.is-lost .rb-time,
  [data-theme="dark"] .slash-window .rb-side.is-running.is-behind .rb-time { color: #ff9ea1; }
  @keyframes rbPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }
  /* ── The last PULSE_LEAD seconds: a side previews its own resolution ──
     Successor to the old .about-done halo that ringed each timer card. That
     object is gone, and a halo around the BOARD would be wrong — it is one
     shared object, so a board-level pulse cannot say which side is about to
     land. So the signal moves inside the side, and it is the same idea the
     board already runs on: colour means outcome here, so the treatment is that
     meaning arriving early at partial strength, then snapping to definite.

     --rb-hot is the colour this side is heading TOWARD: green while it is still
     winning, red once it is behind. Both halves of the treatment read it, so
     the whole thing re-aims off ONE existing state flag — Cover's moment is
     green, Acrobat's (which can only happen after Cover has landed) is red,
     with nothing switched twice. The dot is deliberately untouched: it keeps
     its normal pulse, because speeding up the resting state is louder
     sameness, not a second signal. */
  .slash-window .rb-side { --rb-hot: 47,191,113; }
  .slash-window .rb-side.is-behind { --rb-hot: 229,72,77; }
  /* Dark uses the same light green/pink the resolved clocks use in this theme.
     The point of the treatment is that the cell warms toward the colour the
     clock is ABOUT to become, so the two have to agree per theme — the base
     hues wash muddy against a near-black board and disagreed with the pink the
     dark-theme `behind` clock already switches to. */
  [data-theme="dark"] .slash-window .rb-side { --rb-hot: 126,224,166; }
  [data-theme="dark"] .slash-window .rb-side.is-behind { --rb-hot: 255,158,161; }
  /* (1) the cell warms. Bounded by the vs hairlines inside and the board's
     rounded corner outside, so it reads as "this half of the board" and never
     as a shape floating on it. Never fully off, so it breathes rather than
     blinks. */
  .slash-window .rb-side.is-nearly { animation: rbWarm 1.15s ease-in-out infinite; }
  @keyframes rbWarm {
    0%,100% { background: rgba(var(--rb-hot), 0.03); }
    50%     { background: rgba(var(--rb-hot), 0.20); }
  }
  /* (2) the clock takes the colour with it.
     It stays in WHOLE SECONDS. A tenths readout for the final stretch was tried
     and cut: it reads as fussy at this size, and it forced a permanently
     reserved fraction slot (~32px of board width, dead air at rest) purely so
     the equal columns would not shove the board sideways when the digits
     appeared. The wash carries the moment on its own. */
  .slash-window .rb-side.is-nearly .rb-time { color: rgb(var(--rb-hot)); }
  .slash-window .rb-time { transition: color 0.35s ease; }
  @media (prefers-reduced-motion: reduce) {
    .slash-window .rb-side.is-running .rb-dot { animation: none; }
    /* hold the warm state steady instead of breathing it */
    .slash-window .rb-side.is-nearly { animation: none; background: rgba(var(--rb-hot), 0.12); }
  }
  /* Divider: vertical hairlines + a faint fill. Spans the SCORE ROW only, so the
     drawer underneath reads as one full-width shelf rather than two cells. */
  .slash-window .rb-vs {
    display: flex; align-items: center; padding: 0 0.65rem;
    font-family: var(--font-body);
    font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
    color: var(--text-muted);
    border-left: 1px solid var(--border-subtle);
    border-right: 1px solid var(--border-subtle);
    background: color-mix(in srgb, var(--text-primary) 4%, transparent);
  }
  /* The drawer. grid-template-rows 0fr → 1fr animates to CONTENT height, so there
     is no magic max-height to keep in sync as the label swaps between
     "Play…" / "Resume…" / "Replay the redaction race". */
  .slash-window .rb-drawer {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 0.34s cubic-bezier(0.22,0.9,0.3,1);
  }
  .slash-window .race-board.is-open .rb-drawer { grid-template-rows: 1fr; }
  .slash-window .rb-drawer-in { overflow: hidden; min-height: 0; }
  @media (prefers-reduced-motion: reduce) { .slash-window .rb-drawer { transition: none; } }
  /* The action itself: a full-width shelf button under the grey rule. */
  .slash-window .cmp-replay {
    display: flex; align-items: center; justify-content: center; gap: 0.45rem;
    width: 100%;
    border: 0; border-top: 1px solid var(--border-subtle);
    background: transparent; color: var(--text-primary);
    font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
    padding: 0.68rem 0.9rem; cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
  }
  .slash-window .cmp-replay svg { width: 13px; height: 13px; }
  /* Interactive, unlike the reference text above it. */
  .slash-window .cmp-replay:hover  { background: color-mix(in srgb, var(--text-primary) 7%, transparent); }
  .slash-window .cmp-replay:active { background: color-mix(in srgb, var(--text-primary) 12%, transparent); }
  .slash-window .cmp-replay:focus-visible { outline: 2px solid var(--accent, #4a8ff3); outline-offset: -2px; }
  /* Icon swaps with the button's role: ▶ play at idle/paused, ↻ restart once finished. */
  .slash-window .cmp-replay .ico-replay { display: none; }
  .slash-window .cmp-replay.is-replay .ico-play { display: none; }
  .slash-window .cmp-replay.is-replay .ico-replay { display: block; }
  /* Board select. Written for the competitor picker (the Acrobat side's
     .rb-name WAS the select, so it read as plain board text with only a chevron
     to say it was choosable); that picker is parked in a comment for now and
     the one live instance is the ROLE picker in the payback shelf. A word in
     the middle of a sentence needs a boundary the bare-text version did not:
     the pill wash below, and a width fitted to the SELECTED option (see
     fitRole) — a native select sizes itself to its longest option, so
     "paralegal" would otherwise sit in a box cut for "government records
     staff" with a stranded chevron a word away. */
  .slash-window .app-select, .payback-solo .app-select {
    appearance: none;
    -webkit-appearance: none;
    display: inline-block; width: -moz-fit-content; width: fit-content; margin: 0;
    border: 0;
    background-color: transparent;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 650;
    letter-spacing: -0.01em;
    line-height: 1.2;
    padding: 0.12rem 1rem 0.12rem 0.45rem;  /* right pad leaves room for the chevron */
    border-radius: var(--radius-sm, 6px);
    cursor: pointer;
    text-align: left;
    direction: ltr;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23888' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.3rem center;
    transition: background-color 0.15s ease;
  }
  .slash-window .app-select, .payback-solo .app-select { background-color: color-mix(in srgb, var(--text-primary) 7%, transparent); }
  .slash-window .app-select:hover, .payback-solo .app-select:hover { background-color: color-mix(in srgb, var(--text-primary) 12%, transparent); }
  .slash-window .app-select:focus-visible, .payback-solo .app-select:focus-visible { outline: 2px solid var(--accent, #4a8ff3); outline-offset: 1px; }
  .slash-window .app-select option, .payback-solo .app-select option { direction: ltr; color: var(--text-primary); background: var(--bg-surface); }
  /* Center seam line. The two recordings already contrast hard (dark Cover UI vs
     light Acrobat), so the line stays thin and crisp — no drop shadow, which read
     fuzzy against the busy app pixels. */
  /* ── Ava on the seam ───────────────────────────────────────────────
     Mirrors .race-board (top 5.5% / bottom 5.5%, same translateX(-50%)) so the
     two float on ONE vertical axis, on the seam, which is page-colour and so
     belongs to neither app's footage.

     DIMENSIONS ARE THE TOUR'S, not chosen here. tour.html's sidebar track is
     232px and .tp-ava carries margin: 2px 8px 8px, so its card renders 216px
     wide at aspect-ratio 5/4 = 216x173. Every other value below is lifted from
     .tp-ava / .tp-mute / .tp-restart / .tp-sound-cta verbatim: 10px radius,
     0 1px 6px rgba(0,0,0,.4), 22px corner chips at 6px insets on
     rgba(0,0,0,.45) + blur(8px) at .75 opacity, and the sound pill's full
     treatment including its ripple. She should be the SAME OBJECT in both
     places, so these are copied, not approximated. */
  .slash-window .race-ava {
    position: absolute; bottom: 5.5%; left: 50%; transform: translateX(-50%);
    z-index: 6; display: none;
    /* Width on the WRAPPER: .race-ava is absolutely positioned so a % here
       resolves against .slash-window. On the card it resolved against a
       shrink-to-fit parent, which is circular — it collapsed to the clamp
       minimum and broke the centring, parking her 75px right of the seam. */
    width: 216px; max-width: 34%;
  }
  .slash-window .race-ava.is-up { display: block; }
  .race-ava .ra-card {
    position: relative; width: 100%; aspect-ratio: 5/4;
    border-radius: 10px; overflow: hidden; background: #000;
    box-shadow: 0 1px 6px rgba(0,0,0,.4); cursor: pointer;
  }
  .race-ava video, .race-ava .ra-hold {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  }
  /* The hold layer covers her whenever she is not PLAYING. That rule is
     tour.html's and it is kept deliberately: keying it on "has ever had a
     frame" left a paused card painting blank once the browser released the
     decoded frame. What changed is WHAT it holds — a canvas carrying her real
     last frame instead of a fixed poster still, so the cut at the end of each
     clip is between two identical images and therefore invisible. */
  .race-ava .ra-hold { transition: opacity .25s ease; }
  .race-ava.is-playing .ra-hold { opacity: 0; pointer-events: none; }
  /* Waiting: the stretch between her clips where Acrobat is still dragging
     boxes and she has nothing to say. She holds her real last frame (see the
     hold canvas) and goes highly transparent, so the pane keeps working behind
     her instead of being covered by a card that is doing nothing.

     This was .tp-ava.dimmed's brightness filter, which had TWO problems here.
     It was scoped to `video`, and the thing actually on screen during the gap
     is the hold canvas stacked on top of it, so the dim applied to a layer
     nobody could see and she sat at full strength. And a dim still reads as an
     opaque card; transparency reads as stepping back. Opacity does both jobs
     and needs no second treatment compounding on it. */
  .race-ava.is-waiting { opacity: .3; }

  /* Corner chips — .tp-mute and .tp-restart, same geometry and idiom. */
  .race-ava .ra-chip {
    position: absolute; bottom: 6px; width: 22px; height: 22px;
    border-radius: 50%; background: rgba(0,0,0,.45); backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none; align-items: center; justify-content: center; cursor: pointer;
    opacity: .75; transition: opacity 140ms ease, transform 160ms ease, background 140ms ease;
  }
  .race-ava .ra-chip:hover { opacity: 1; transform: scale(1.08); background: rgba(0,0,0,.7); }
  .race-ava .ra-chip svg { display: block; width: 12px; height: 12px; fill: #fff; }
  .race-ava .ra-mute { right: 6px; }
  /* There is no restart chip. She used to end the race parked on screen with
     one, copied from the tour card where it is the only "watch again" there is.
     Here it is not: the board's own drawer says "Replay the redaction race",
     two inches up, and it is the control the visitor already used to START. A
     second replay button competing with it is clutter, so at the end she simply
     leaves and the drawer keeps the job. */
  /* Keyed on is-playing was the first bug: clicking the footage pauses the race,
     which pauses her, which dropped is-playing and took the mute chip away —
     the control vanishing under the cursor of the person reaching for it.
     is-live fixed the pause but left the SAME hole in the greyed gap between
     cues, and that one is worse, because the race is still running underneath:
     the click that muted her at 8s pauses the whole race at 10s, on the same
     pixel. Sound is a PREFERENCE, not an action on the current clip, so the
     chip stays for as long as she is on screen with something still to say.
     Only the end withdraws it, and by then she is leaving anyway. */
  .race-ava.is-live .ra-mute,
  .race-ava.is-waiting .ra-mute { display: flex; }
  /* Introduce the chip. Sound starts ON now, so whoever needs this needs it in
     the first seconds. Two soft pulses at full strength, then it settles. */
  .race-ava.is-fresh .ra-mute { opacity: 1; background: rgba(0,0,0,.62); }
  .race-ava.is-fresh .ra-mute::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    pointer-events: none; animation: raChipRing 1.55s cubic-bezier(.22,.61,.36,1) 2;
  }
  @keyframes raChipRing {
    0%   { box-shadow: 0 0 0 0 rgba(0,0,0,.30); }
    62%  { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
    100% { box-shadow: 0 0 0 10px rgba(0,0,0,0); }
  }
  /* Leaving, not popping. is-up owns display so she cannot exist before the
     race starts; is-out fades the card out first and display follows once the
     transition has run. */
  .race-ava { transition: opacity .38s ease; }
  /* After .is-waiting in source order on purpose: equal specificity, and a card
     on its way out must reach 0 even if the gap class is still on it. */
  .race-ava.is-out { opacity: 0; pointer-events: none; }
  .race-ava .ra-mute .slash { display: none; }
  .race-ava .ra-mute.muted .slash { display: block; }

    @media (prefers-reduced-motion: reduce) {
    .race-ava .ra-hold { transition: none; }
    .race-ava.is-fresh .ra-mute::after { animation: none; }
  }
  @media (max-width: 700px) {
    .slash-window .race-ava { bottom: 3%; width: 150px; }
  }

  /* ── Finished-state CTA in the drawer ──────────────────────────
     The race ends with the visitor having just watched 17 seconds of somebody
     doing by hand what Cover finished at 13. Until now the only thing on offer
     at that moment was watching it again. Buying is the primary action here, so
     the filled button is the CTA and Replay demotes to a quiet shelf. */
  .slash-window .rb-cta, .slash-window .rb-payback { display: none; }
  /* Payback shelf: first row of the finished drawer, directly under the two
     clocks it is computed from. Same 0.8rem body type as the CTA line so the
     drawer reads as shelves of one object; the hours are the one weighted
     token. It rides the drawer's own 0fr→1fr slide — no motion of its own. */
  .slash-window .race-board.is-finished .rb-payback, .payback-solo .rb-payback {
    display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
    gap: 0 0.3rem; padding: 0.5rem 0.9rem;
    border-top: 1px solid var(--border-subtle);
    font-family: var(--font-body); font-size: 0.8rem; line-height: 1.3;
    color: var(--text-primary);
  }
  .slash-window .rb-pb-lead b, .payback-solo .rb-pb-lead b { font-weight: 650; }
  .slash-window .rb-pb-body, .payback-solo .rb-pb-body { display: inline-flex; align-items: center; gap: 0.3rem; }
  .slash-window .rb-role, .payback-solo .rb-role { font-size: 0.8rem; font-weight: 650; }
  .slash-window .rb-pb-num, .payback-solo .rb-pb-num { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.01em; line-height: 1; }
  /* A standalone picker sits under a scene that already says "2.3x faster", so
     it reads as one plain line: no shelf rule, no repeated multiplier, wraps
     like text on a phone. Context rules for .payback-solo only; the race board
     above is untouched. */
  .payback-solo .rb-payback { display: block; text-align: center; border-top: 0; padding: 0; font-size: 0.9375rem; line-height: 1.6; }
  .payback-solo .rb-pb-lead { display: none; }
  .payback-solo .rb-pb-body { display: inline; }
  .payback-solo .rb-role { font-size: 0.9375rem; }
  /* Row rhythm follows .cmp-replay immediately below it — same 0.9rem gutter,
     same 0.8rem type — so the drawer reads as two shelves of ONE object rather
     than a card with a widget stapled to it.

     The button is the SITE's button (.btn.btn-primary.btn-pill-sm, in
     assets/site-chrome.css), not a bespoke pill. The hand-rolled one I wrote
     first re-implemented the fill and a hover, and silently lost the real
     active and focus-visible states, the dark-theme shadow, and the doubled-
     class guard that stops a page-level a:hover repainting the label
     blue-on-blue. Reusing it is also why the sizing lands: btn-pill-sm is the
     size step this design system already has. */
  .slash-window .race-board.is-finished .rb-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 0.7rem; padding: 0.42rem 0.9rem;
    border-top: 1px solid var(--border-subtle);
    /* Its own surface. The board is painted in the page colour so it reads as
       the front plane; the CTA is the one row that is not reporting the race
       but ASKING for something, so it gets a fill of its own. A distinct fill,
       not a distinct idiom.

       This was written first as var(--accent-tint) / var(--accent-border) with
       a comment claiming the token system defined them for exactly this. It
       does not — those two names exist nowhere on this page, so the fill
       computed to TRANSPARENT and the border, having no colour to resolve, fell
       back to the text colour and drew a near-black rgb(26,28,30) hairline
       across the drawer.

       The replacement was a 7% brand wash, and it read badly: the board is
       painted rgb(244,242,236), a WARM cream, and a cool blue film over warm
       cream turns grey-mauve rather than tinted. DESIGN.md is explicit here,
       and against this exact move: blue is named the ONLY brand colour and is
       to be resisted as decoration, because "blue does the work, warm is the
       seasoning". A CTA band is seasoning.

       So the row is LIFTED, not tinted. --bg-surface-raised is the token
       DESIGN.md already reserves for active surfaces, and against the cream
       board it reads as a raised panel with no colour introduced at all. It
       inverts correctly too: #FFFFFF over cream in light, #1D2024 over #16181B
       in dark. */
    background: var(--bg-surface-raised);
  }
  .slash-window .rb-cta-line {
    flex: 0 1 auto;
    font-family: var(--font-body); font-size: 0.8rem; line-height: 1.25;
    color: var(--text-primary);
  }
  /* line-height:1 because an <a> inherits the body's 1.6 and .btn never sets
     one — the same trap site-chrome.css calls out. Left alone the pill renders
     37px tall against the 31px replay shelf directly beneath it, which is what
     made the drawer read as two mismatched rows. */
  .slash-window .rb-cta-btn { flex: none; white-space: nowrap; line-height: 1; }
  .slash-window .race-board.is-finished .cmp-replay {
    font-size: 0.74rem; font-weight: 500; opacity: 0.7; padding: 0.5rem 0.9rem;
  }
  .slash-window .race-board.is-finished .cmp-replay:hover { opacity: 1; }

  /* ── Seam: a strip of the BACKGROUND PLANE bridging the recessed footage ──
     The page sits at the front, the two recordings are sunk behind it (that's
     the window's inner recess), and this seam is part of that FRONT plane
     showing through the gap between them. So it is painted in the section's own
     background colour and casts onto the videos, rather than being a line drawn
     on the footage.

     It lives OUTSIDE .slash-window, in a .race-stage wrapper, and that is the
     whole trick. `overflow: hidden` clips a window CHILD to the PADDING box, so
     an inside seam got cut just short of the window's 1px border and that border
     drew straight across it — the visible step at top and bottom. Positioned
     against the stage instead, the seam passes over the border and meets the
     page cleanly at both ends.

     --bg-surface-muted is exactly what paints this section, so the seam tracks
     the theme for free (#F4F2EC light / #0F1113 dark) and can never drift from
     the background it belongs to.

     The cast is SIDE-ONLY: horizontal offsets with a negative spread, not a
     symmetric blur. A symmetric one bled past the top and bottom ends onto the
     page, which is wrong twice over — it left dark stubs above and below the
     window, and a strip sitting AT page level shouldn't cast onto the page at
     all, only onto the recessed footage either side of it.

     z-index 5: above the window's recess overlay (z 4) so the seam stays clean
     where the recess is strongest, and below the vs badge (z 6) which sits ON
     it. .slash-window establishes no stacking context, so its descendants
     compete here directly and that ordering holds. */
  .rect-drag .race-stage { position: relative; }
  .rect-drag .seam-plane {
    position: absolute;
    /* 1px in at BOTH ends so the window's own edge line stays UNBROKEN across
       the seam. Spanning the full border box painted over that line and cut
       the bottom "ledge" — the hard light rule plus its contact shadow that
       makes the window sit on the page. The seam now butts against it instead
       of erasing it. */
    top: 1px; bottom: 1px; left: 50%;
    width: 6px;
    transform: translateX(-50%);
    z-index: 5;
    pointer-events: none;
    /* Flat token everywhere EXCEPT the last stretch, which ramps into the
       window's own cast shadow. The page below the window is genuinely darker
       than --bg-surface-muted (--shadow-float-strong is offset DOWNWARD, so it
       lands there and nowhere else), and a seam painted the flat colour met
       that darker page with a visible step. The ramp is the seam picking up the
       same shadow everything else at that edge is sitting in.
       Only the bottom needs it: the top edge is out of the shadow's path. */
    background:
      linear-gradient(to bottom,
        rgba(14,20,30,0) 0,
        rgba(14,20,30,0) calc(100% - 26px),
        rgba(14,20,30,0.12) 100%),
      var(--bg-surface-muted);
    box-shadow:
      -1px 0 0 0 rgba(0,0,0,0.14),
       1px 0 0 0 rgba(0,0,0,0.14),
      -7px 0 7px -3px rgba(0,0,0,0.34),
       7px 0 7px -3px rgba(0,0,0,0.34);
  }
  /* Dark leans harder on the cast: in light the seam is far brighter than the
     footage so colour alone separates it, but in dark the strip and the
     recordings sit at nearly the same luminance. */
  [data-theme="dark"] .rect-drag .seam-plane {
    box-shadow:
      -1px 0 0 0 rgba(0,0,0,0.22),
       1px 0 0 0 rgba(0,0,0,0.22),
      -8px 0 8px -3px rgba(0,0,0,0.60),
       8px 0 8px -3px rgba(0,0,0,0.60);
  }
  /* Narrow screens: the 16:9 window shrinks with the viewport, so scale the board
     down proportionally. The board is one nowrap object centred on the seam, so
     the failure mode to avoid is its intrinsic width outgrowing the window — pull
     in the paddings and the type rather than breaking the layout apart. */
  @media (max-width: 680px) {
    .slash-window .race-board { top: 4%; }
    .slash-window .rb-side { gap: 0.34rem; padding: 0.55rem 0.6rem; }
    .slash-window .rb-name, .slash-window .app-select { font-size: 0.72rem; }
    .slash-window .rb-logo { width: 13px; height: 13px; }
    .slash-window .app-select { padding-right: 0.8rem; background-position: right 0.2rem center; }
    /* width:0 + min-width:100% — the shelf contributes NOTHING to the board's
       max-content (which .race-board pins for centring) and stretches to the
       width the score row set, wrapping inside it. */
    .slash-window .race-board.is-finished .rb-payback { display: block; text-align: center; width: 0; min-width: 100%; box-sizing: border-box; white-space: normal; font-size: 0.72rem; }
    .slash-window .rb-pb-body { display: inline; }
    .slash-window .rb-role { font-size: 0.72rem; }
    .slash-window .rb-pb-num { font-size: 0.95rem; }
    .slash-window .rb-time { font-size: 0.64rem; }
    .slash-window .rb-vs { padding: 0 0.4rem; font-size: 0.58rem; }
    .slash-window .cmp-replay { font-size: 0.72rem; padding: 0.5rem 0.7rem; }
  }
  /* Phone widths. Measured target: the board's max-content must stay inside the
     window, which at a 380px viewport is only 332px wide. These values land it at
     ~320px (6px of slack a side); below ~350px of viewport the board's ends get
     clipped by the window, which is the accepted floor. */
  @media (max-width: 480px) {
    .slash-window .rb-side { gap: 0.24rem; padding: 0.4rem 0.35rem; }
    .slash-window .rb-name, .slash-window .app-select { font-size: 0.62rem; }
    .slash-window .rb-logo { width: 11px; height: 11px; }
    .slash-window .app-select { padding-right: 0.68rem; background-position: right 0.12rem center; }
    .slash-window .rb-time { font-size: 0.56rem; }
    .slash-window .rb-vs { padding: 0 0.25rem; font-size: 0.54rem; }
    .slash-window .rb-mark { width: 9px; height: 9px; }
    .slash-window .rb-mark svg { width: 9px; height: 9px; }
    .slash-window .cmp-replay { font-size: 0.66rem; padding: 0.42rem 0.5rem; gap: 0.3rem; }
  }
  .rect-drag .caption {
    text-align: center;
    color: var(--text-muted);
    margin-top: 0.85rem;   /* note hugs its visual (was 1.5rem — read as detached) */
    /* 68ch (was 60ch). The race caption ran to THREE lines at 60ch once it
       gained its closing sentence — but the visual above it is 1050px wide, so
       the measure was the artificial constraint, not the copy. 68ch = 600px is
       still comfortably inside the classic 60-75ch reading measure and leaves
       ~36 characters of slack before the line tips over, so small copy edits
       won't silently push it back to three. */
    max-width: 68ch;
    margin-left: auto; margin-right: auto;
    font-size: 0.875rem;
    font-style: italic;
    line-height: 1.5;
  }

  /* ══ RACE v2 (2026-10-07): a racetrack, not two screenshots ══════════════
     Idle: a dusk scene (Mercury's lit-scene field, DESIGN.md wash.duskStart) in
     which the press-kit pin burns out, laying a redaction as its skid mark, and
     knocks the Acrobat icon onto its own name; RACE is the play control.
     Racing: the two recordings at their usual scale in cropped panels, a camera
     following the work (race.js CAM), a track round the edge whose racers are
     placed from each clip's currentTime (never their own timer). Finished: the
     scene comes back resolved and the board's own nodes are laid into it on the
     centre line. Same state machine (#cmpWindow[data-state]); race.js's first
     half is unchanged. Russo One: SIL OFL 1.1, Copyright (c) 2011-2012 Jovanny
     Lemonad, served unmodified from fonts.gstatic.com's latin file.
     "Adobe Acrobat" is drawn from Adobe Clean Bold OUTLINES (inline SVG in the
     partial); no Adobe font file is served. */
  @font-face { font-family: 'Russo One'; src: url(russo-one-latin.woff2) format('woff2'); font-display: swap; }
  .slash-window { container-type: inline-size; --glow: 240,150,95; background: #181623; }
  .slash-window ~ .seam-plane { display: none; }
  .slash-window .race-field, .slash-window .race-cover {
    position: absolute; inset: 0;
    background: radial-gradient(70% 55% at 50% 118%, rgba(var(--glow),.10), transparent 70%),
                linear-gradient(180deg, #181623 0%, #1E1A2A 60%, #262338 100%);
  }
  .slash-window .race-field { z-index: 0; }
  .slash-window .race-cover { z-index: 3; transition: opacity .5s ease; }
  .slash-window .race-scene { position: absolute; inset: 0; z-index: 7; overflow: hidden; pointer-events: none; transition: opacity .5s ease; }
  .slash-window:is([data-state="racing"],[data-state="paused"]) :is(.race-cover,.race-scene,.race-go) { opacity: 0; pointer-events: none; }
  /* the board waits off-stage until the race runs (visibility also takes it out of the tab order) */
  .slash-window[data-state="idle"] .race-board { opacity: 0; visibility: hidden; }

  /* ---- idle scene: a 1280x720 stage race.js scales to the window ---- */
  .rs-stage { position: absolute; left: 0; top: 0; width: 1280px; height: 720px; transform-origin: 0 0; color: #F2F4F8;
    font-family: 'SF Pro Display', 'Inter', -apple-system, system-ui, sans-serif; }
  .rs-wm { position: absolute; left: 64px; top: 346px; display: flex; align-items: center; gap: 14px; font: 700 64px/84px 'SF Pro Display','Inter',-apple-system,system-ui,sans-serif; letter-spacing: -.035em; }
  .rs-wm .rb-logo { width: 84px; height: 84px; }
  .rs-ico { position: absolute; left: 690px; top: 338px; width: 100px; height: 100px; transform-origin: 92px 92px; z-index: 2;
    background: url(race-acrobat.png) center/contain no-repeat; }
  .rs-ico-sh { position: absolute; left: 692px; top: 422px; width: 104px; height: 14px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.5), transparent); }
  .rs-aw { position: absolute; left: 804px; top: 346px; height: 84px; display: flex; align-items: center; font-size: 64px; color: #F2F4F8; }
  .rs-aw span { display: inline-block; transform-origin: 100% 78%; }
  .rs-aw svg { display: block; fill: currentColor; }
  .rs-aw .sp { display: inline-block; }
  /* the burnout's mark IS a redaction (#111315), laid hot and left to cool */
  .rs-skid { position: absolute; top: 413px; height: 17px; width: 0; border-radius: 3px; background: #111315; box-shadow: 0 0 0 1px rgba(255,255,255,.10); }
  .rs-heat { position: absolute; inset: 0; border-radius: 3px; opacity: 0; box-shadow: 0 0 22px rgba(var(--glow),.55);
    background: linear-gradient(90deg, rgba(var(--glow),0) 0%, rgba(var(--glow),.18) 55%, rgba(255,170,105,.95) 100%); }
  .rs-smk i { position: absolute; left: 0; top: 0; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%; opacity: 0;
    background: radial-gradient(closest-side, rgba(220,214,232,.55), rgba(220,214,232,0)); }
  /* the press-kit pin (dev/marketing-assets/promo-videos/kit/mascot.js), parts and sizes verbatim */
  .msc { position: absolute; left: 0; top: 0; width: 60px; height: 28px; transform-origin: 50% 100%; opacity: 0; z-index: 3; }
  .msc .msc-bar { position: absolute; inset: 0; border-radius: 8px; background: rgba(74,143,243,.26); }
  .msc .msc-bird { position: absolute; right: -14px; bottom: 100%; width: 48px; height: 64px; transform-origin: 50% 100%; }
  .msc .msc-stem { position: absolute; left: 21.5px; bottom: 0; width: 5px; height: 20px; background: #4A8FF3; border-radius: 3px; }
  .msc .msc-badge { position: absolute; left: 0; top: 0; width: 48px; height: 48px; transform-origin: 50% 50%; }
  .msc .msc-badge svg { display: block; width: 100%; height: 100%; overflow: visible; }
  .msc .msc-shadow { position: absolute; left: 50%; bottom: -10px; width: 70px; height: 12px; margin-left: -35px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.4), transparent); }

  /* ---- RACE: the play control. The word is centred; its speed lines and the
     play triangle hang off its sides. The whole window starts it, so hover is the window's. ---- */
  .slash-window .race-go { position: absolute; left: 0; right: 0; top: 17.8%; z-index: 8; display: flex; justify-content: center;
    background: none; border: 0; padding: 0; margin: 0; cursor: pointer; color: #4A8FF3; transition: opacity .5s ease; }
  .slash-window .race-go:focus-visible { outline: none; }
  .slash-window .race-go:focus-visible .rg-word { outline: 2px solid #4A8FF3; outline-offset: .8cqw; border-radius: 4px; }
  .rg-word { position: relative; display: inline-block; }
  .rg-word b { display: inline-block; font: 400 9.2cqw/1.05 'Russo One', 'SF Pro Display', system-ui, sans-serif; color: #4A8FF3; transform: skewX(-12deg); padding: 0 .06em;
    text-shadow: .16cqw .16cqw 0 #2B6AC5, .31cqw .31cqw 0 #24599F, .47cqw .47cqw 0 #1D4A85, .63cqw .63cqw 0 #163A6A, .78cqw .78cqw 0 #102B4F, 1.1cqw 1.25cqw 1.9cqw rgba(0,0,0,.45); }
  .rg-sl { position: absolute; right: 100%; top: 50%; transform: translateY(-50%); margin-right: 1.6cqw; display: flex; flex-direction: column; align-items: flex-end; gap: 1.1cqw; }
  .rg-sl i { display: block; height: .86cqw; border-radius: 2px; background: linear-gradient(90deg, rgba(74,143,243,0), #4A8FF3); transform: skewX(-12deg); transform-origin: 100% 50%; transition: transform .3s ease; }
  .rg-sl i:nth-child(1) { width: 8.6cqw; } .rg-sl i:nth-child(2) { width: 13.3cqw; } .rg-sl i:nth-child(3) { width: 6.25cqw; }
  .rg-pt { position: absolute; left: 100%; top: 50%; margin-left: 1.7cqw; opacity: 0; transform: translate(-1.1cqw,-50%) skewX(-12deg); transition: transform .25s ease, opacity .2s ease; }
  .rg-pt svg { display: block; width: 6.9cqw; height: 6.9cqw; fill: currentColor;
    filter: drop-shadow(.16cqw .16cqw 0 #2B6AC5) drop-shadow(.16cqw .16cqw 0 #24599F) drop-shadow(.16cqw .16cqw 0 #1D4A85) drop-shadow(.16cqw .16cqw 0 #163A6A) drop-shadow(.16cqw .16cqw 0 #102B4F); }
  .slash-window:hover .rg-pt, .race-go:focus-visible .rg-pt { opacity: 1; transform: translate(0,-50%) skewX(-12deg); }
  .slash-window:hover .rg-sl i { transform: skewX(-12deg) scaleX(1.45); }
  @media (hover: none) { .rg-pt { opacity: 1; transform: translate(0,-50%) skewX(-12deg); } }

  /* ---- racing: the recordings at their usual scale, cropped into panels; race.js pans them ---- */
  .slash-window .half { clip-path: none !important; overflow: hidden; border-radius: 12px; inset: auto; top: 22.5%; width: 40.6%; height: 63%;
    -webkit-mask-image: linear-gradient(#000,#000); box-shadow: 0 18px 40px rgba(0,0,0,.45); transition: opacity .5s ease; }
  .slash-window .half-left  { left: 8.6%;  background: #161617; }
  .slash-window .half-right { left: 50.8%; background: #fdfdfd; }
  .slash-window .half .shot { left: 0; right: auto; top: 0; bottom: auto; width: auto; height: auto; object-fit: fill; will-change: transform; }
  .slash-window .half-left .pane-overlay, .slash-window .half-right .pane-overlay { left: 0; right: 0; }
  .slash-window[data-state="finished"] .half { opacity: 0; pointer-events: none; }
  /* the track round the edge (geometry in the partial's SVG, progress in race.js) */
  .slash-window .race-track { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity .5s ease; }
  .slash-window:is([data-state="idle"],[data-state="finished"]) .race-track { opacity: 0; }
  .race-track svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .rt-racer { position: absolute; left: 0; top: 0; width: 3%; aspect-ratio: 1; margin: -1.5% 0 0 -1.5%; will-change: transform; }
  .rt-racer .rb-logo { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }
  .rt-racer.rt-acro { background: url(race-acrobat.png) center/118% no-repeat; filter: drop-shadow(0 4px 8px rgba(0,0,0,.5)); }

  /* ---- the board, restyled for the dark field (racing / paused) ---- */
  .slash-window .race-board { top: 9.6%; z-index: 8; background: rgba(30,26,38,.94); border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 14px 34px rgba(0,0,0,.5); transition: opacity .4s ease, visibility .4s; }
  [data-theme="light"] .slash-window .race-board { border-color: rgba(255,255,255,.10); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
  .slash-window .rb-name { color: #E8E4EE; }
  .slash-window .rb-acro .rb-name::before { content: ''; display: inline-block; width: 17px; height: 17px; margin: 0 6px -3px 0; background: url(race-acrobat.png) center/118% no-repeat; }
  .slash-window .rb-time { font-family: 'Russo One', var(--font-mono); font-size: 1.05rem; color: #F2F4F8; letter-spacing: .02em; }
  .slash-window .rb-vs { color: #8E8A99; background: transparent; border-color: rgba(255,255,255,.08); }
  .slash-window .rb-side.is-won .rb-time, .slash-window .rb-side.is-won .rb-ok { color: #7ee0a6; }
  .slash-window .rb-side.is-lost .rb-time, .slash-window .rb-side.is-lost .rb-no,
  .slash-window .rb-side.is-running.is-behind .rb-time { color: #ff9ea1; }
  .slash-window .cmp-replay { color: #E8E4EE; border-top-color: rgba(255,255,255,.08); }
  .slash-window .cmp-replay:hover { background: rgba(255,255,255,.06); }
  .slash-window .rb-payback, .slash-window .race-board.is-finished .rb-payback { color: #E8E4EE; border-top-color: rgba(255,255,255,.08); }
  .slash-window .app-select { color: #F2F4F8; background-color: rgba(255,255,255,.08); }
  .slash-window .app-select:hover { background-color: rgba(255,255,255,.14); }
  .slash-window .app-select option { color: #1A1C1E; }

  /* ---- finished: the scene is back; the board's own nodes sit on the centre line ---- */
  .slash-window[data-state="finished"] .race-go { opacity: 0; pointer-events: none; }
  .slash-window[data-state="finished"] .race-board { inset: 0; top: 0; width: auto; transform: none; background: transparent; border: 0;
    box-shadow: none; overflow: visible; pointer-events: none; }
  .slash-window[data-state="finished"] .race-board :is(a,button,select) { pointer-events: auto; }
  .slash-window[data-state="finished"] .rb-cta-line { display: none; }
  /* times: a mirrored pair, [logo] time check  vs  cross time [icon]; the names are in the scene */
  .slash-window[data-state="finished"] .rb-score { position: absolute; left: 0; right: 0; top: 17.5%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; animation: raceFinIn .6s .15s both; }
  .slash-window[data-state="finished"] .rb-side { padding: 0 1.4cqw; gap: .8cqw; background: none; animation: none; }
  .slash-window[data-state="finished"] .rb-side.rb-cover { justify-content: flex-end; }
  .slash-window[data-state="finished"] .rb-side.rb-acro { justify-content: flex-start; }
  .slash-window[data-state="finished"] .rb-cover .rb-time { margin: 0; }
  .slash-window[data-state="finished"] .rb-acro .rb-time { margin: 0; }
  .slash-window[data-state="finished"] .race-board .rb-logo { width: 1.8cqw; height: 1.8cqw; }
  .slash-window[data-state="finished"] .rb-cover .rb-name { display: none; }
  .slash-window[data-state="finished"] .rb-acro .rb-name { font-size: 0; line-height: 0; display: block; }
  .slash-window[data-state="finished"] .rb-acro .rb-name::before { width: 1.8cqw; height: 1.8cqw; margin: 0; display: block; }
  .slash-window[data-state="finished"] .rb-time { font-size: 2.6cqw; }
  .slash-window[data-state="finished"] .rb-mark, .slash-window[data-state="finished"] .rb-mark svg { width: 1.8cqw; height: 1.8cqw; }
  .slash-window[data-state="finished"] .rb-vs { font-size: 1.1cqw; padding: 0 .8cqw; border: 0; }
  /* headline + one line + Buy, centred */
  .slash-window[data-state="finished"] .rb-drawer { position: static; display: block; }
  .slash-window[data-state="finished"] .rb-drawer-in { display: block; overflow: visible; }
  .slash-window[data-state="finished"] .race-board.is-finished .rb-payback { position: absolute; left: 0; right: 0; top: 5%; display: flex; width: auto; min-width: 0; white-space: nowrap; text-align: center; flex-direction: column; gap: 6.6cqw; border: 0; padding: 0; background: none; animation: raceFinIn .6s both; }
  .slash-window[data-state="finished"] .rb-pb-lead { font-family: 'Russo One', system-ui, sans-serif; font-size: 5.6cqw; line-height: 1; color: #4A8FF3; transform: skewX(-12deg); text-transform: uppercase;
    text-shadow: .1cqw .1cqw 0 #2B6AC5, .2cqw .2cqw 0 #24599F, .3cqw .3cqw 0 #1D4A85, .4cqw .4cqw 0 #163A6A, .5cqw .5cqw 0 #102B4F, .8cqw 1cqw 1.8cqw rgba(0,0,0,.45); }
  .slash-window[data-state="finished"] .rb-pb-lead b { font: inherit; color: inherit; }
  .slash-window[data-state="finished"] .rb-pb-body { display: inline-flex; font-size: 1.45cqw; color: #C9C4D2; }
  .slash-window[data-state="finished"] .rb-pb-num { font-size: 1.75cqw; color: #F2F4F8; }
  .slash-window[data-state="finished"] .rb-role { font-size: 1.45cqw; }
  .slash-window[data-state="finished"] .race-board.is-finished .rb-cta { position: absolute; left: 0; right: 0; top: 79%; display: flex; justify-content: center; background: none; border: 0; padding: 0; animation: raceFinIn .6s .1s both; }
  .slash-window[data-state="finished"] .rb-cta-btn { font-size: 2.2cqw; padding: 1.5cqw 4.4cqw; box-shadow: 0 .7cqw 2.8cqw rgba(74,143,243,.42); }
  /* Replay: its own corner, opposite Ava; the word slides out on hover */
  .slash-window[data-state="finished"] .race-board.is-finished .cmp-replay { position: absolute; right: 3.5%; top: 5.5%; width: auto; border: 0; padding: .6cqw .8cqw; background: none; gap: 0;
    flex-direction: row-reverse; color: #4A8FF3; opacity: 1; animation: raceFinIn .6s .1s both; }
  .slash-window[data-state="finished"] #cmpReplayLabel { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .slash-window[data-state="finished"] .cmp-replay .ico-replay { width: 3cqw; height: 3cqw; transform: skewX(-12deg);
    filter: drop-shadow(1px 1px 0 #2B6AC5) drop-shadow(1px 1px 0 #24599F) drop-shadow(1px 1px 0 #1D4A85) drop-shadow(1px 1px 0 #163A6A); }
  .slash-window[data-state="finished"] .cmp-replay::after { content: 'REPLAY'; display: inline-block; overflow: hidden; max-width: 0; opacity: 0; white-space: nowrap;
    font: 400 2.4cqw/1 'Russo One', system-ui, sans-serif; color: #4A8FF3; transform: skewX(-12deg); text-shadow: 1px 1px 0 #2B6AC5, 2px 2px 0 #24599F, 3px 3px 0 #1D4A85;
    padding: 0 .4cqw 5px; transition: max-width .3s ease, opacity .2s ease, margin .3s ease; }
  .slash-window[data-state="finished"]:hover .cmp-replay::after { max-width: 16cqw; opacity: 1; margin-right: 1cqw; }
  @media (hover: none) { .slash-window[data-state="finished"] .cmp-replay::after { max-width: 16cqw; opacity: 1; margin-right: 1cqw; } }
  /* Ava: at the finish she joins Cover's side, top-left */
  .slash-window .race-ava { transition: left .6s cubic-bezier(.22,.9,.3,1), bottom .6s cubic-bezier(.22,.9,.3,1), transform .6s cubic-bezier(.22,.9,.3,1), width .6s ease, opacity .38s ease; }
  .slash-window[data-state="finished"] .race-ava { left: 4%; bottom: 70%; transform: none; width: 14%; max-width: none; }
  @media (max-width: 680px) {
    .slash-window .race-board { top: 3%; }
    .slash-window .rb-time { font-size: .7rem; }
    .slash-window .rb-acro .rb-name::before { width: 12px; height: 12px; margin: 0 4px -2px 0; }
    .slash-window .race-ava { width: 120px; }
  }
  @media (max-width: 480px) {
    .slash-window .rb-time { font-size: .62rem; }
  }
  @keyframes raceFinIn { from { opacity: 0; transform: translateY(10px); } }
  @media (prefers-reduced-motion: reduce) {
    .slash-window .race-go, .rg-pt, .rg-sl i, .slash-window .half, .slash-window .race-track, .slash-window .race-ava { transition: none; }
    .slash-window[data-state="finished"] :is(.rb-score,.rb-payback,.rb-cta,.cmp-replay) { animation: none; }
  }
  /* a narrow window: the centre column keeps reading size */
  @container (max-width: 640px) {
    .slash-window[data-state="finished"] .rb-pb-lead { font-size: 6.4cqw; }
    .slash-window[data-state="finished"] .rb-score { top: 17%; }
    .slash-window[data-state="finished"] .rb-time { font-size: 4cqw; }
    .slash-window[data-state="finished"] .race-board .rb-logo,
    .slash-window[data-state="finished"] .rb-acro .rb-name::before,
    .slash-window[data-state="finished"] .rb-mark, .slash-window[data-state="finished"] .rb-mark svg { width: 2.8cqw; height: 2.8cqw; }
    .slash-window[data-state="finished"] .race-board.is-finished .rb-payback { top: 4%; gap: 9cqw; }
    .slash-window[data-state="finished"] .rb-pb-body, .slash-window[data-state="finished"] .rb-role { font-size: 2.9cqw; }
    .slash-window[data-state="finished"] .rb-pb-num { font-size: 3.4cqw; }
    .slash-window[data-state="finished"] .rb-cta-btn { font-size: 3.4cqw; padding: 2cqw 5.5cqw; }
    .slash-window[data-state="finished"] .cmp-replay .ico-replay { width: 5cqw; height: 5cqw; }
    .slash-window[data-state="finished"] .cmp-replay::after { display: none; }
    .slash-window[data-state="finished"] .race-ava { width: 18%; }
  }