/* The Sandbox project page, /sandbox/{slug} and /sandbox/{slug}/{part}
   (web/templates/fragments/sandbox/project.templ; brief:
   .claude/plans/site-v2/03-build/sandbox-brief.md). The merge of the round 2 bake-off on slot p7,
   "the title screen, docked", with p6's log and tally numerals and p8's ledger and open door.
   Linked from <head> on every page (layouts.document), so a boosted swap into the page never paints
   unstyled (gotchas/htmx.md 2026-10-02). Every rule sits under [data-sandbox="project"].

   Two layers that play off each other:
   - THE MACHINE (Halden's): the Sandbox scene, the CH 2 scope on the bench, with one camera
     transform (scale(--sb-a) about the scene's top-left; the glass, the channel strip and the chin
     are --sb-a times their box and scaled back, so they draw 1:1). Beige plastic, keys, the probe,
     phosphor, room tokens. It also shows THROUGH the project's screen: the scope's graticule on
     the glass (its centre axes drawn as ticks, so no solid line runs behind text), the CH 2
     readout band at the glass's foot (outside the scroll: always whole), a trace per question,
     the beam that sweeps the glass on a part change, the CH 2 captions.
   - THE PROJECT (its own, on the glass): data-look picks the identity. "wahori" is the Wahori
     game layer from .claude/plans/site-v2/03-build/sandbox-wahori-identity.md: its palette (ink
     indigo #1a1626 screen, paper #f4eee2, terracotta-deep, amber light cues, sage), Fraunces
     (display, synthesized italic, SOFT/WONK) and Figtree (body, ss01 cv01), its game devices
     (title menu that docks into a pause rail, text box with a name plate, passport stamps,
     speech bubbles with reply choices, the helper sheet, the progress map) and its art (marked
     uncleared). "plain" is a project without identity material: the scope's own glass with
     Halden paper and mono, saying identity [TBD].
   Motion: transforms and opacity only, inside prefers-reduced-motion: no-preference, one-shots.
   Targets: every link and button is at least 44px (--touch) both ways. */

@font-face {
  font-family: "sb Fraunces";
  src: url("/static/assets/sandbox/wahori/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "sb Figtree";
  src: url("/static/assets/sandbox/wahori/fonts/figtree-latin-var.woff2") format("woff2");
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

[data-sandbox="project"] {
  /* named sizes (the camera numbers are round 1's, measured there at all seven sizes) */
  --sb-a: 1.8;                        /* the zoom: the scope beside its patch bay at rest, filling the view in */
  --sb-m: clamp(8px, 1.6vw, 30px);    /* wall left round the zoomed monitor */
  --sb-hd: calc(var(--hdr) + 1px);    /* the sticky header and its rule */
  --sb-st-top: 64px;                  /* the wall's top to the scene at rest */
  --sb-ws: min(100vw - 2 * var(--pad), var(--wallmax));
  --sb-bay: 56px;                     /* final height of the channel strip: a 44px key with air */
  --sb-chin-h: 64px;                  /* final height of the chin: 44px keys with air */
  --sb-band: 41px;                    /* the CH 2 readout band at the glass's foot, its rule included */
  --sb-bz: 22px;                      /* side bezel in scene px (x zoom = about 40px on screen) */
  --sb-rad: 22px;                     /* monitor corner radius (room.css .crt) */
  --sb-mw: calc((100vw - 2 * var(--sb-m)) / var(--sb-a));
  --sb-mh: calc((100svh - var(--sb-hd) - 2 * var(--sb-m)) / var(--sb-a));
  --sb-bz-t: calc(var(--sb-bay) / var(--sb-a));
  --sb-bz-b: calc(var(--sb-chin-h) / var(--sb-a));
  --sb-mute-ink: #4f4c41;             /* muted ink on the beige plastic: 5:1 on its lightest and darkest shade */
  --sb-key: linear-gradient(180deg, #ece5cf, #c4bb9f);
  --sb-key-sh: inset 1px 1px 0 rgba(255, 255, 255, .7), 0 2px 0 #8e8469, 0 3px 4px rgba(0, 0, 0, .28);
  --sb-key-in: inset 0 2px 3px rgba(0, 0, 0, .35), 0 0 0 #8e8469;
  @media (max-width: 1099px) { --sb-a: 1.9; --sb-st-top: 56px; }
  @media (max-width: 899px) { --sb-a: 1.08; --sb-st-top: 60px; --sb-ws: var(--sb-mw); }
  @media (max-width: 760px) { --sb-bz: 10px; --sb-rad: 15px; --sb-bay: 52px; --sb-chin-h: 58px; }

  /* ════════════ the scene and the camera (the machine) ════════════ */
  &.sb-room { max-width: none; height: 100%; overflow: clip; padding: var(--wall-top) 0 0; }
  /* the view: the scene's off-camera part (the patch bay) is cut 2px inside the viewport's edge, a
     deliberate crop, not content pushed off the page */
  & .sb-view { height: 100%; margin: 0 2px; overflow: clip; }
  & .sb-scene {
    display: grid;
    grid-template-columns: var(--sb-mw) minmax(0, 1fr);
    grid-template-rows: var(--sb-mh) auto;
    column-gap: clamp(28px, 3.4vw, 64px);
    width: var(--sb-ws);
    margin: var(--sb-st-top) auto 0;
    transform-origin: 0 0;
    transform:
      translate(calc(var(--sb-m) - (100vw - var(--sb-ws)) / 2), calc(var(--sb-m) - var(--wall-top) - var(--sb-st-top)))
      scale(var(--sb-a));
  }
  & .sb-halo { grid-column: 1; grid-row: 1; }
  & .sb-mon {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
    height: var(--sb-mh);
    padding: var(--sb-bz-t) var(--sb-bz) var(--sb-bz-b);
    border-radius: var(--sb-rad);
  }
  & .sb-mon::after { display: none; }
  & .sb-screen { min-height: 0; padding: 0; border-radius: 12px / 15px; }
  /* the screen's two pseudo-elements are the arrival's shutters (hidden at rest) */
  & .sb-screen::before, & .sb-screen::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    z-index: 4;
    height: 50%;
    pointer-events: none;
    background: #030803;
    opacity: 0;
  }
  & .sb-screen::before { top: 0; box-shadow: inset 0 -1px 0 var(--color-phosphor-hi), 0 2px 10px rgba(160, 255, 130, .55); }
  & .sb-screen::after { bottom: 0; box-shadow: inset 0 1px 0 var(--color-phosphor-hi), 0 -2px 10px rgba(160, 255, 130, .55); }
  & .sb-snow {
    position: absolute;
    inset: 0;
    z-index: 3;
    opacity: 0;
    pointer-events: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .7  0 0 0 0 1  0 0 0 0 .65  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  }

  /* the 1:1 layers: --sb-a times their box, scaled back */
  & .sb-glass, & .sb-bay-in, & .sb-chin-in {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(100% * var(--sb-a));
    height: calc(100% * var(--sb-a));
    transform: scale(calc(1 / var(--sb-a)));
    transform-origin: 0 0;
  }
  & .sb-bay { position: absolute; left: var(--sb-bz); right: var(--sb-bz); top: 0; height: var(--sb-bz-t); }
  & .sb-chin { position: absolute; left: var(--sb-bz); right: var(--sb-bz); bottom: 0; height: var(--sb-bz-b); }
  & .sb-bay-in, & .sb-chin-in { pointer-events: none; }
  & .sb-bay-in a, & .sb-chin-in a { pointer-events: auto; }

  /* the rest of the scene, out of view while the camera is in (inert) */
  & .sb-off { display: contents; }
  & .sb-bench {
    grid-column: 1 / -1;
    grid-row: 2;
    display: block;
    height: 22px;
    margin: 0 -40px;
    background: linear-gradient(180deg, var(--color-wood-hi) 0%, var(--color-wood) 55%, #3f2b1b 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
  }
  & .sb-cable {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: end;
    justify-self: end;
    width: 6px;
    height: 34px;
    margin: 0 calc(var(--sb-bz) + 30px) 22px 0;
    background: linear-gradient(90deg, #121412, var(--color-cable) 45%, #121412);
    border-radius: 0 0 3px 3px;
    transform: translateY(100%);
    pointer-events: none;
  }
  & .sb-patch {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    padding: 18px 20px;
    background: linear-gradient(180deg, var(--color-steel-hi), var(--color-steel) 40%, var(--color-steel-lo));
    border-radius: 6px;
    box-shadow: var(--sh);
    font: 700 max(var(--fs-floor, 0px), 12px)/1.2 var(--font-term);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-ink);
  }
  & .sb-patch ul { list-style: none; display: grid; gap: 12px; margin: 12px 0 0; padding: 0; }
  & .sb-patch li { display: flex; align-items: center; gap: 10px; }
  & .sb-patch li > span { display: grid; gap: 3px; background: rgba(232, 220, 178, .93); padding: 6px 10px 5px; }
  & .sb-patch em { font-style: normal; color: var(--color-stamp-red); }
  & .sb-patch li i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #0b0e0b 35%, var(--color-steel-hi) 40%, var(--color-steel-lo)); }
  & .sb-patch li.sb-patched i { box-shadow: 0 0 0 4px var(--color-cable), 0 0 10px var(--color-power-led); }

  /* ════════════ the channel strip (the machine's top bezel) ════════════ */
  & .sb-bay-in {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 4px;
    color: var(--color-ink);
    font: 14px/1.3 var(--font-term);
    white-space: nowrap;
  }
  & .sb-jack {
    position: relative;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle, #111311 0 28%, var(--color-steel-hi) 31% 46%, var(--color-steel) 50%, var(--color-steel-lo) 70%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), 1px 2px 3px rgba(0, 0, 0, .35);
  }
  & .sb-jack i {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--color-power-led);
    box-shadow: 0 0 6px var(--color-power-led);
  }
  & .sb-bay-ch { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; font-weight: 700; letter-spacing: .04em; }
  & .sb-bay-n { display: inline-block; margin-right: 12px; padding: 3px 7px 2px; background: var(--color-ink); color: var(--color-phosphor-hi); letter-spacing: .12em; }
  & .sb-bay-dim { color: var(--sb-mute-ink); font-weight: 400; }
  & .sb-bay-st { flex: none; }
  & .sb-bstamp {
    display: inline-block;
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--color-stamp-red);
    background: var(--color-paper);
    border: 2px solid currentColor;
    border-radius: 3px;
    padding: 5px 7px 4px;
    transform: rotate(-3.5deg);
  }
  & .sb-bay .tbd { font-size: max(var(--fs-floor, 0px), 12px); }
  & .sb-bay-last {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    min-height: var(--touch);
    margin-left: auto;
    padding: 0 6px;
    color: var(--color-ink);
    font: 700 13px/1 var(--font-term);
    letter-spacing: .04em;
    text-decoration: none;
  }
  & .sb-bay-last time { flex: none; padding: 5px 8px 4px; background: rgba(244, 239, 226, .9); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); }
  & a.sb-bay-last:hover time { background: var(--color-ink); color: var(--color-paper); }
  & .sb-bay-lab { flex: none; font-weight: 400; font-size: max(var(--fs-floor, 0px), 11.5px); letter-spacing: .14em; text-transform: uppercase; color: var(--sb-mute-ink); }
  & .sb-bay-t { min-width: 0; max-width: 30ch; overflow: hidden; text-overflow: ellipsis; font-weight: 400; }
  & .sb-unplug {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: .45em;
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0 16px;
    background: linear-gradient(180deg, #e7dfc8, #b9af93);
    color: var(--color-ink);
    font: 700 max(var(--fs-floor, 0px), 12.5px)/1 var(--font-term);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 5px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .6), 0 2px 0 #8e8469, 0 3px 4px rgba(0, 0, 0, .3);
  }
  & .sb-unplug > span:first-child { font-size: 15px; }
  @media (max-width: 1279px) { & .sb-bay-t { display: none; } }
  @media (max-width: 899px) { & .sb-bay-last .sb-bay-lab { display: none; } }
  @media (max-width: 760px) {
    & .sb-bay-in { gap: 10px; padding: 0 2px; font-size: 13px; }
    & .sb-jack { width: 24px; height: 24px; }
    & .sb-bay-n { margin-right: 8px; }
    & .sb-bay-dim { display: none; }
  }
  @media (max-width: 560px) {
    & .sb-bay-path, & .sb-unplug-w { display: none; }
    & .sb-unplug { padding: 0; }
    & .sb-bay-n { margin-right: 0; }
    & .sb-bay-last { padding: 0 2px; gap: 5px; font-size: max(var(--fs-floor, 0px), 12.5px); letter-spacing: 0; }
    & .sb-bstamp { font-size: max(var(--fs-floor, 0px), 11px); letter-spacing: .08em; padding: 4px 5px 3px; }
  }
  @media (max-width: 400px) { & .sb-jack { display: none; } & .sb-bay-in { gap: 8px; } }

  /* ════════════ the chin (the machine's keys) ════════════ */
  & .sb-chin-in { display: flex; align-items: center; gap: 18px; padding: 0 10px; overflow: hidden; }
  & .sb-badge { flex: none; font: 700 max(var(--fs-floor, 0px), 11px) var(--font-term); letter-spacing: .3em; color: rgba(0, 0, 0, .55); }
  & .sb-chs, & .sb-keys { display: flex; align-items: center; gap: 8px; min-width: 0; }
  & .sb-chs { flex: none; }
  & .sb-keys { margin: 0 auto; }
  & .sb-chin-in a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0 14px;
    background: var(--sb-key);
    color: var(--color-ink);
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .12em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: var(--sb-key-sh);
  }
  & .sb-chin-in a:hover { transform: translateY(1px); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), 0 1px 0 #8e8469, 0 2px 3px rgba(0, 0, 0, .28); }
  & .sb-chin-in a[aria-current] { position: relative; background: linear-gradient(180deg, #c9c0a4, #ddd5bc); box-shadow: var(--sb-key-in); transform: translateY(1px); }
  & .sb-chin-in a[aria-current]::before {
    content: "";
    position: absolute;
    top: 5px;
    left: 50%;
    width: 14px;
    height: 3px;
    margin-left: -7px;
    border-radius: 2px;
    background: var(--color-power-led);
    box-shadow: 0 0 6px var(--color-power-led);
  }
  & .sb-chs a { padding: 0; width: var(--touch); font-size: 15px; letter-spacing: 0; }
  & .sb-keys .sb-k { font-size: 15px; padding: 0 12px; }
  & .sb-keys .sb-k-t { font-size: max(var(--fs-floor, 0px), 12px); }
  & .sb-keys .sb-k-t > span:first-child { font-size: 16px; }
  /* the part counter: a small LCD between the shoulder keys */
  & .sb-k-read {
    display: inline-flex;
    align-items: baseline;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    background: #10140f;
    color: var(--color-phosphor);
    font: 400 13px/1 var(--font-term);
    letter-spacing: .06em;
    border-radius: 3px;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, .7);
    text-shadow: 0 0 6px rgba(140, 255, 120, .35);
    white-space: nowrap;
  }
  & .sb-k-read b { color: var(--color-phosphor-hi); }
  & .sb-k-rw { margin-left: .6em; }
  & .sb-probe { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 max(var(--fs-floor, 0px), 11px)/1 var(--font-term); letter-spacing: .14em; color: var(--sb-mute-ink); }
  & .sb-probe i {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: radial-gradient(circle, #1a1d1a 0 30%, var(--color-steel-hi) 33% 48%, var(--color-steel) 52%, var(--color-steel-lo) 72%);
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), 1px 2px 3px rgba(0, 0, 0, .35);
  }
  & .sb-probe i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 8px;
    height: 60px;
    margin-left: -4px;
    border-radius: 4px 4px 0 0;
    background: linear-gradient(90deg, #121412, var(--color-cable) 45%, #121412);
  }
  & .sb-led { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--color-power-led); box-shadow: 0 0 8px var(--color-power-led); }
  @media (max-width: 1099px) { & .sb-badge { display: none; } }
  @media (max-width: 899px) { & .sb-chs { display: none; } }
  @media (max-width: 760px) {
    & .sb-probe { display: none; }
    & .sb-chin-in { gap: 8px; padding: 0 4px; }
    & .sb-keys { flex: 1; gap: 6px; margin: 0; }
    & .sb-k-read { flex: 1 1 auto; justify-content: center; min-width: 0; padding: 0 6px; }
  }
  @media (max-width: 400px) { & .sb-led { display: none; } & .sb-k-rw, & .sb-k-w { display: none; } }

  /* ════════════ the glass: the project's screen ════════════ */
  & .sb-glass {
    /* the project's identity tokens; "plain" (Halden's own) is the default */
    --g-bg: var(--color-screen);
    --g-bg-hi: var(--color-screen-center);
    --g-scan: rgba(0, 0, 0, .2);
    --g-on: var(--color-phosphor-hi);
    --g-on-2: var(--color-phosphor);
    --g-hi: var(--color-phosphor-hi);
    --g-rule: rgba(166, 245, 154, .22);
    --g-paper: var(--color-paper);
    --g-paper-2: #e9e2cf;
    --g-ink: var(--color-ink);
    --g-ink-2: #3a3f3a;
    --g-faint: #5f5c50;                 /* 5.6:1 on the paper */
    --g-acc: var(--color-stamp-red);
    --g-calm: #4d7a4d;
    --g-warm: var(--color-amber);
    --g-line: rgba(29, 35, 32, .14);
    --g-line-2: rgba(29, 35, 32, .26);
    --g-disp: var(--font-term);
    --g-disp-st: normal;
    --g-disp-wt: 700;
    --g-disp-vs: normal;
    --g-disp-ls: -.02em;
    --g-body: var(--font-term);
    --g-feat: normal;
    --g-rad: 6px;                       /* panels: square-ish paper */
    --g-pill: 4px;                      /* chips and buttons: keys, not pills */
    --g-sh: 0 2px 0 rgba(0, 0, 0, .25), 0 10px 24px rgba(0, 0, 0, .35);
    --g-glow: 0 0 6px rgba(140, 255, 120, .3);
    --g-on-3: var(--color-phosphor-dim);  /* faint text on the screen */
    --g-mark: var(--color-phosphor);      /* lines, rings and nodes drawn on the screen */
    --g-panel: rgba(166, 245, 154, .05);  /* a raised surface on the screen */
    --g-dlg: #061006;                     /* the game's dialogue box on the screen */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--g-on);
    font: 16px/1.6 var(--g-body);
    font-feature-settings: var(--g-feat);
    container: sbgl / inline-size;
    --sb-pad: clamp(14px, 3.6cqi, 56px);
  }
  & .sb-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--g-on-2) transparent;
    container: sbg / inline-size;
  }
  /* Wahori: the game's own layer (identity doc §1–§3, §5): a night-indigo screen, paper panels */
  & .sb-glass[data-look="wahori"] {
    --g-bg: #1a1626;                    /* --ink */
    --g-bg-hi: #2a2338;
    --g-scan: rgba(10, 8, 16, .22);
    --g-on: #f4eee2;                    /* --paper on ink: 15.3:1 */
    --g-on-2: #d9cfbd;                  /* softer paper on ink: 11:1 */
    --g-hi: #f0c77b;                    /* --amber, "cozy light cues": 11.1:1 on ink */
    --g-rule: rgba(244, 238, 226, .16);
    --g-paper: #f4eee2;                 /* --paper */
    --g-paper-2: #ecdfc6;               /* --paper-deep */
    --g-ink: #1a1626;                   /* --ink */
    --g-ink-2: #3d3349;                 /* --ink-soft */
    --g-faint: #6b5f74;                 /* --ink-faint: 5.2:1 on paper */
    --g-acc: #9a4e33;                   /* --terracotta-deep: 5.2:1 on paper */
    --g-acc-lg: #c86b4a;                /* --terracotta: large text and marks only */
    --g-calm: #8fa68e;                  /* --sage: never text on paper */
    --g-warm: #e8b05a;                  /* --amber-warm */
    --g-line: rgba(26, 22, 38, .12);    /* --hairline */
    --g-line-2: rgba(26, 22, 38, .22);  /* --hairline-strong */
    --g-disp: "sb Fraunces", Georgia, "Times New Roman", serif;
    --g-disp-st: italic;                /* the house voice: synthesized italic of the roman file */
    --g-disp-wt: 400;
    --g-disp-vs: "opsz" 144, "SOFT" 100, "WONK" 1;
    --g-disp-ls: -.02em;
    --g-body: "sb Figtree", system-ui, sans-serif;
    --g-feat: "ss01", "cv01", "kern";
    --g-rad: 24px;                      /* rounded-3xl: the game's helper sheet */
    --g-pill: 999px;
    --g-sh: 0 1px 2px rgba(26, 22, 38, .04), 0 8px 24px rgba(200, 107, 74, .06), 0 18px 40px rgba(0, 0, 0, .35);   /* --shadow-warm, on a dark screen */
    --g-glow: none;
    --g-on-3: #a99fae;                  /* faint on ink (ink-faint lifted for the dark): 6.6:1 */
    --g-mark: #c86b4a;                  /* --terracotta: lines, rings and nodes on the night screen, never small text */
    --g-panel: rgba(244, 238, 226, .045);
    --g-dlg: #120f1c;                   /* the dialogue box: a shade under --ink */
  }
  & .sb-scroll:focus-visible { outline: 2px solid var(--color-amber); outline-offset: -4px; }
  & .sb-scroll[data-sb-arrived]:focus-visible { outline: none; }
  & .sb-glass :focus-visible { outline: 2px solid var(--color-amber); outline-offset: 3px; }
  & .sb-glass :is(.sb-status, .sb-reg, .sb-pass, .sb-helper, .sb-specs, .sb-bub, .sb-art) :focus-visible { outline: 2px solid var(--g-ink); outline-offset: 2px; box-shadow: 0 0 0 5px var(--color-amber); }
  :where(&) .sb-game :is(p, ol, ul, dl, dd, h1, h2, h3, figure) { margin: 0; }
  :where(&) .sb-game :is(ol, ul) { padding: 0; list-style: none; }
  & .sb-faint { color: var(--g-on-3); }
  & :is(.sb-status, .sb-reg, .sb-pass, .sb-specs, .sb-helper) .sb-faint { color: var(--g-faint); }
  & .sb-glass a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
  & .sb-glass a:hover { text-decoration-thickness: 2px; }

  /* Halden's marks on the project's screen: always the room's mono, so they read as annotation */
  & .sb-glass .tbd { font: 700 max(var(--fs-floor, 0px), max(11px, .78em))/1.35 var(--font-term); vertical-align: .08em; border-radius: 2px; }
  & .sb-unc {
    position: relative;
    display: inline-block;
    margin-inline-start: .5em;
    padding: 0 .4em;
    border: 1.5px dashed currentColor;
    border-radius: 2px;
    font: 700 max(var(--fs-floor, 0px), 12px)/1.5 var(--font-term);
    letter-spacing: .04em;
    font-style: normal;
    white-space: nowrap;
    vertical-align: .15em;
  }
  & .sb-osd {
    display: inline-block;
    padding: 3px 7px 2px;
    background: #071007;
    color: var(--color-phosphor-hi);
    font: 700 max(var(--fs-floor, 0px), 11px)/1.2 var(--font-term);
    letter-spacing: .14em;
    text-shadow: 0 0 6px rgba(140, 255, 120, .4);
    border-radius: 2px;
    font-style: normal;
  }
  & .sb-ghost { display: grid; gap: 10px; justify-items: start; }
  & .sb-ghost-l { display: grid; gap: 9px; width: 100%; }
  & .sb-ghost-l i { display: block; height: 0; border-top: 2px dashed currentColor; opacity: .3; }
  & .sb-ghost-l i:nth-child(2) { width: 82%; }
  & .sb-ghost-l i:nth-child(3) { width: 58%; }

  & .sb-game { min-height: 100%; display: flex; flex-direction: column; padding: clamp(14px, 2.6cqi, 34px) var(--sb-pad) 0; }

  /* the wordmark (the h1) */
  & .sb-mark { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: .5em; min-width: 0; }
  & .sb-h1 {
    font-family: var(--g-disp);
    font-style: var(--g-disp-st);
    font-weight: var(--g-disp-wt);
    font-variation-settings: var(--g-disp-vs);
    letter-spacing: var(--g-disp-ls);
    line-height: .98;
    color: var(--g-on);
    text-shadow: var(--g-glow);
    overflow-wrap: anywhere;
    font-size: clamp(30px, 4.4cqi, 40px);
  }
  & .sb-glass[data-look="wahori"] .sb-h1 { text-transform: lowercase; }
  & .sb-mark-big .sb-h1 { font-size: max(var(--fs-floor, 0px), min(clamp(56px, 9cqi, 112px), 9svh)); }
  & .sb-glass[data-look="plain"] .sb-mark-big .sb-h1 { font-size: max(var(--fs-floor, 0px), min(clamp(36px, 5.6cqi, 72px), 7svh)); }
  & .sb-glass .sb-h1 .tbd { font-size: max(var(--fs-floor, 0px), .5em); vertical-align: .3em; }
  & .sb-mark-sub { font: 500 .95rem/1 system-ui, sans-serif; color: var(--g-hi); letter-spacing: .04em; }
  & .sb-mark-big .sb-mark-sub { font-size: clamp(15px, 1.8cqi, 22px); }

  /* ════════════ the title screen ════════════ */
  /* Two stacks: main (name, line, menu) and side (art, status). The first viewport must show every
     menu item above the CH 2 band at every size (sandbox-shot.js asserts it), so the main stack's
     vertical sizes follow the viewport's height (svh): the name, the menu rows, the gaps; on a
     narrow glass the menu comes straight after the name and the line follows it. */
  & .sb-title {
    --sb-tg: clamp(10px, 2svh, 26px);
    display: grid;
    gap: var(--sb-tg);
    align-items: start;
  }
  & .sb-t-main, & .sb-t-side { display: flex; flex-direction: column; gap: var(--sb-tg); min-width: 0; }
  & .sb-t-side { gap: clamp(16px, 2.6cqi, 30px); }
  @container sbg (min-width: 860px) {
    & .sb-title { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(28px, 4.4cqi, 64px); }
  }
  @container sbg (max-width: 859px) {
    & .sb-t-main .sb-menu { order: 1; }
    & .sb-t-main .sb-sub { order: 2; }
  }
  & .sb-t-head { min-width: 0; }
  & .sb-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-bottom: clamp(4px, 1.2svh, 16px) !important; font-size: 13px; letter-spacing: .04em; color: var(--g-on-2); }
  & .sb-sub { max-width: 40ch; font: 400 max(var(--fs-floor, 0px), min(clamp(16px, 1.7cqi, 20px), 2.6svh))/1.5 var(--g-body); color: var(--g-on-2); }
  & .sb-sub .sb-unc { color: var(--g-on-2); }
  & .sb-sub-tbd { color: var(--g-on-2); }

  /* the art: the game's own picture, in a paper mat, marked uncleared */
  & .sb-art { position: relative; min-width: 0; padding: 8px; background: var(--g-paper); border-radius: calc(var(--g-rad) * .75); box-shadow: var(--g-sh); }
  & .sb-art img { display: block; width: 100%; height: auto; border-radius: calc(var(--g-rad) * .5); }
  & .sb-art-cap {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 0;
    padding: 8px 4px 2px;
    font: 500 max(var(--fs-floor, 0px), 12.5px)/1.3 var(--g-body);
    letter-spacing: .02em;
    color: var(--g-ink-2);
  }
  & .sb-art-cap .sb-unc { color: var(--g-acc); }
  & .sb-art-none {
    display: grid;
    place-items: center;
    aspect-ratio: 1024 / 434;
    background: transparent;
    border: 2px dashed var(--g-rule);
    box-shadow: none;
  }
  & .sb-art-say { display: inline-flex; gap: 8px; align-items: center; font: 700 13px/1 var(--font-term); letter-spacing: .14em; text-transform: uppercase; color: var(--g-on-2); }

  /* the menu: the project's navigation, the title screen's own list */
  & .sb-menu { min-width: 0; }
  & .sb-menu ol { border-top: 1px solid var(--g-rule); }
  & .sb-menu li { border-bottom: 1px solid var(--g-rule); }
  & .sb-mi {
    position: relative;
    display: grid;
    grid-template-columns: 2.4em minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 14px;
    min-height: var(--touch);
    padding: clamp(2px, .5svh, 7px) 4px clamp(2px, .5svh, 7px) 0;
    color: var(--g-on) !important;
    text-decoration: none !important;
  }
  & .sb-mi-n { font: 400 max(var(--fs-floor, 0px), 12px)/1 var(--font-term); color: var(--g-on-2); letter-spacing: .08em; }
  & .sb-mi-w {
    font-family: var(--g-disp);
    font-style: var(--g-disp-st);
    font-weight: var(--g-disp-wt);
    font-variation-settings: var(--g-disp-vs);
    letter-spacing: var(--g-disp-ls);
    font-size: max(var(--fs-floor, 0px), min(clamp(26px, 2.7cqi, 34px), 4.4svh));
    line-height: 1.1;
    white-space: nowrap;
  }
  /* short screens: no keyboard hint; very short ones: the menu's readouts live in the parts' rail */
  @media (max-height: 800px) { & .sb-menu .sb-menu-hint { display: none; } }
  @media (max-height: 640px) { & .sb-menu .sb-mi-s, & .sb-eyebrow .sb-eb-tr { display: none; } }   /* the trace stays in the band */
  & .sb-glass[data-look="plain"] .sb-mi-w { font-size: clamp(20px, 2.1cqi, 26px); }
  /* the selection cursor: the game's ▸ in amber, over the item's number */
  & .sb-mi-cur { position: absolute; inset-inline-start: 0; top: 50%; translate: 0 -50%; color: var(--g-hi); font: 400 18px/1 var(--font-term); opacity: 0; }
  & .sb-mi:hover .sb-mi-n, & .sb-mi:focus-visible .sb-mi-n,
  & .sb-menu:not(:hover, :focus-within) li:first-child .sb-mi-n { opacity: 0; }
  & .sb-mi-s { justify-self: end; text-align: end; font: 500 13px/1.35 var(--g-body); letter-spacing: .02em; color: var(--g-on-2); }
  & .sb-mi-s .tbd { margin-inline-start: .3em; }
  & .sb-mi:hover .sb-mi-cur, & .sb-mi:focus-visible .sb-mi-cur,
  & .sb-menu:not(:hover, :focus-within) li:first-child .sb-mi-cur { opacity: 1; }
  & .sb-mi:hover .sb-mi-w, & .sb-mi:focus-visible .sb-mi-w { color: var(--g-hi); }
  @container sbg (max-width: 520px) {
    & .sb-mi { grid-template-columns: 2em minmax(0, 1fr); row-gap: 2px; }
    & .sb-mi-s { grid-column: 2; justify-self: start; text-align: start; }
  }

  /* the status card: a paper sheet with the passport stamp */
  & .sb-status {
    position: relative;
    min-width: 0;
    padding: clamp(16px, 2.2cqi, 26px) clamp(16px, 2.4cqi, 28px);
    background: var(--g-paper);
    color: var(--g-ink);
    border-radius: var(--g-rad);
    box-shadow: var(--g-sh);
  }
  & .sb-status-h { font: italic 500 13px/1 var(--g-disp); font-variation-settings: "opsz" 14, "SOFT" 20; letter-spacing: .18em; text-transform: uppercase; color: var(--g-faint); }
  & .sb-glass[data-look="plain"] .sb-status-h { font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term); }
  & .sb-stamp-w { position: absolute; top: clamp(12px, 1.8cqi, 20px); inset-inline-end: clamp(14px, 2cqi, 24px); display: flex; align-items: center; gap: 6px; }
  & .sb-stamp-w .sb-unc { color: var(--g-acc); margin: 0; }
  & .sb-stamp {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 6px 12px 7px;
    border: 2px solid var(--g-acc);
    outline: 1px solid var(--g-acc);
    outline-offset: 2px;
    border-radius: 6px;
    color: var(--g-acc);
    transform: rotate(-6deg);
    font: 800 14px/1 var(--g-body);
    letter-spacing: .16em;
    text-transform: uppercase;
  }
  & .sb-stamp-k { font: 600 max(var(--fs-floor, 0px), 9.5px)/1 var(--g-body); letter-spacing: .24em; }
  & .sb-stamp-tbd { color: var(--g-faint); border-style: dashed; outline-style: dashed; }
  & .sb-facts { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: clamp(22px, 3.4cqi, 44px); row-gap: 10px; margin-top: clamp(16px, 2.2cqi, 24px) !important; padding-inline-end: 110px; }
  & .sb-facts dt { font: 600 max(var(--fs-floor, 0px), 11px)/1.2 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-faint); margin-bottom: 4px; }
  & .sb-facts dd { font: 500 15px/1.45 var(--g-body); }
  & .sb-facts-last { grid-column: 1 / -1; padding-top: 10px; border-top: 1px solid var(--g-line); }
  & .sb-facts-last dd { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; }
  & .sb-status .sb-unc { color: var(--g-acc); }
  & a.sb-last { display: inline-flex; flex-wrap: wrap; align-items: baseline; column-gap: 12px; min-height: var(--touch); align-items: center; text-decoration: none; }
  & a.sb-last time { font: 700 15px/1 var(--g-body); font-variant-numeric: tabular-nums; padding: 5px 9px; border-radius: var(--g-pill); background: var(--g-ink); color: var(--g-paper); }
  & a.sb-last:hover .sb-last-t { text-decoration: underline; }
  & .sb-last-t { font: var(--g-disp-st) var(--g-disp-wt) 19px/1.3 var(--g-disp); font-variation-settings: var(--g-disp-vs); }
  @container sbg (max-width: 420px) {
    & .sb-facts { padding-inline-end: 0; margin-top: 64px !important; }
  }


  /* ════════════ the scope through the glass: graticule, beam, readout ════════════ */
  /* the graticule is the glass's own background (the glass does not scroll; its .sb-scroll does): a
     10 x 8 grid of faint phosphor lines under everything the project draws, as on a real scope's
     face. The centre axes are not solid lines: like a real graticule they carry minor ticks (a
     short crossbar every fifth of a division), so they are broken everywhere and no bright line
     runs behind the glass's text. */
  & .sb-glass {
    --g-grid: rgba(140, 255, 120, .045);
    --g-axis: rgba(140, 255, 120, .11);
    --g-tick: 7px;
    background:
      repeating-linear-gradient(to bottom, transparent 0 2px, var(--g-scan) 2px 3px),
      linear-gradient(to bottom, var(--g-axis) 1px, transparent 1px) 50% 0 / var(--g-tick) 2.5% repeat-y,
      linear-gradient(to right, var(--g-axis) 1px, transparent 1px) 0 50% / 2% var(--g-tick) repeat-x,
      linear-gradient(to right, var(--g-grid) 1px, transparent 1px) 0 0 / 10% 12.5%,
      linear-gradient(to bottom, var(--g-grid) 1px, transparent 1px) 0 0 / 10% 12.5%,
      radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(0, 0, 0, .38)),
      linear-gradient(135deg, rgba(255, 255, 255, .05), transparent 35%),
      radial-gradient(ellipse at 40% 30%, var(--g-bg-hi), var(--g-bg) 75%);
  }
  & .sb-glass[data-look="plain"] { --g-grid: rgba(140, 255, 120, .07); --g-axis: rgba(140, 255, 120, .16); }
  /* the beam: one bright phosphor line that crosses the glass when a part comes up (sandbox.js adds
     .sb-step; at rest it is parked off the glass) */
  & .sb-beam { position: absolute; inset: 0; z-index: 3; opacity: 0; pointer-events: none; }
  & .sb-beam::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    width: 3px;
    background: var(--color-phosphor-hi);
    box-shadow: 0 0 12px 3px rgba(140, 255, 120, .55), 0 0 40px 10px rgba(140, 255, 120, .18);
  }
  & .sb-trace { display: block; overflow: visible; }
  & .sb-trace path { fill: none; stroke: var(--color-phosphor-hi); stroke-width: 1.4; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 2px rgba(140, 255, 120, .7)); }

  /* the CH 2 readout band: the scope's measurement line at the foot of the glass, outside its
     scroll, so it is always whole on screen (CH 2, the stage's trace, the stage, the credit) */
  & .sb-band {
    flex: none;
    display: flex;
    align-items: center;
    gap: 8px 20px;
    min-height: var(--sb-band);
    padding: 5px 14px;
    border-top: 1px solid rgba(140, 255, 120, .16);
    background: linear-gradient(180deg, rgba(4, 9, 4, .9), rgba(2, 5, 2, .96));
    font: 400 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term);
    color: var(--color-phosphor);
    white-space: nowrap;
  }
  & .sb-band-sig { display: inline-flex; align-items: center; gap: 10px; min-width: 0; letter-spacing: .08em; text-transform: uppercase; text-shadow: 0 0 6px rgba(140, 255, 120, .35); }
  & .sb-band-tr { flex: none; width: 150px; height: 22px; }
  & .sb-band-st { color: var(--color-phosphor-hi); }
  & .sb-band-c { margin-inline-start: auto !important; min-width: 0; overflow: hidden; text-overflow: ellipsis; color: var(--color-phosphor-dim); letter-spacing: .04em; }
  @container sbgl (max-width: 600px) { & .sb-band-c { display: none; } & .sb-band-tr { width: 96px; } }
  @container sbgl (max-width: 340px) { & .sb-band { padding: 4px 10px; gap: 8px; } & .sb-band-tr { width: 64px; } }
  & .sb-eb-tr { width: clamp(70px, 9cqi, 120px); height: 18px; }
  /* the legend closes every screen: what the two marks mean */
  & .sb-legend {
    margin-top: auto !important;
    padding: clamp(22px, 3cqi, 34px) 0 clamp(14px, 2.2cqi, 22px);
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    font: 400 max(var(--fs-floor, 0px), 12.5px)/1.5 var(--font-term);
    color: var(--g-on-2);
  }
  & .sb-legend .sb-unc { margin-inline-start: 0; }

  /* ════════════ the title menu's hint ════════════ */
  & .sb-menu-hint { display: flex; align-items: center; gap: 6px; margin-bottom: 8px !important; font: 400 max(var(--fs-floor, 0px), 11.5px)/1 var(--font-term); letter-spacing: .1em; text-transform: uppercase; color: var(--g-on-2); }
  & .sb-menu-hint kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; border: 1px solid var(--g-rule); border-radius: 3px; font: inherit; }
  & .sb-menu-hint span:last-child { margin-inline-start: 4px; }
  @media (hover: none) { & .sb-menu-hint { display: none; } }
  /* JS moves the cursor with the arrow keys: the item it is on */
  & .sb-menu[data-sb-cursor] li .sb-mi-cur { opacity: 0; }
  & .sb-menu[data-sb-cursor] li .sb-mi-n { opacity: 1; }
  & .sb-menu[data-sb-cursor] .sb-mi[data-sb-on] .sb-mi-cur { opacity: 1; }
  & .sb-menu[data-sb-cursor] .sb-mi[data-sb-on] .sb-mi-n { opacity: 0; }
  & .sb-menu[data-sb-cursor] .sb-mi[data-sb-on] .sb-mi-w { color: var(--g-hi); }

  /* ════════════ a part: the docked menu (rail) beside the part's own screen ════════════ */
  & .sb-deck { display: grid; gap: clamp(16px, 2.4cqi, 26px); align-items: start; }
  & .sb-rail { min-width: 0; }
  & .sb-dock { margin-top: 12px; }
  & .sb-dock ol { display: flex; flex-wrap: wrap; gap: 2px 4px; }
  & .sb-di {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: center;
    min-height: var(--touch);
    min-width: var(--touch);
    padding: 0 10px;
    border-radius: var(--g-pill);
    color: var(--g-on) !important;
    text-decoration: none !important;
  }
  & .sb-di-n { font: 400 15px/1 var(--font-term); color: var(--g-on-2); }
  & .sb-di:not(.sb-di-t) .sb-di-n, & .sb-di-s { display: none; }
  & .sb-di-t .sb-di-w { display: none; }
  & .sb-di-cur { display: none; color: var(--g-hi); font: 400 14px/1 var(--font-term); }
  & .sb-di-w {
    font-family: var(--g-disp);
    font-style: var(--g-disp-st);
    font-weight: var(--g-disp-wt);
    font-variation-settings: var(--g-disp-vs);
    letter-spacing: var(--g-disp-ls);
    font-size: 20px;
    line-height: 1.1;
    white-space: nowrap;
  }
  & .sb-glass[data-look="plain"] .sb-di-w { font-size: 15px; }
  & .sb-di:hover .sb-di-w { color: var(--g-hi); }
  & .sb-di[aria-current] { background: rgba(244, 238, 226, .1); box-shadow: inset 0 0 0 1px var(--g-rule); }
  & .sb-di[aria-current] .sb-di-cur { display: inline; }
  & .sb-di[aria-current] .sb-di-w { color: var(--g-hi); }
  @container sbg (min-width: 900px) {
    & .sb-deck { grid-template-columns: 15.5rem minmax(0, 1fr); column-gap: clamp(26px, 3.2cqi, 48px); }
    & .sb-rail { position: sticky; top: 0; padding-top: 4px; }
    & .sb-dock { margin-top: 18px; border-top: 1px solid var(--g-rule); }
    & .sb-dock ol { display: grid; gap: 0; }
    & .sb-dock li { border-bottom: 1px solid var(--g-rule); }
    & .sb-di {
      display: grid;
      grid-template-columns: 2.2em minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-items: baseline;
      column-gap: 8px;
      row-gap: 1px;
      padding-block: 8px 8px; padding-inline: 6px 8px;
      border-radius: 0;
    }
    & .sb-di-n, & .sb-di:not(.sb-di-t) .sb-di-n { display: block; grid-column: 1; grid-row: 1; font-size: max(var(--fs-floor, 0px), 12px); letter-spacing: .08em; }
    & .sb-di-t .sb-di-n { font-size: 15px; }
    & .sb-di-cur { display: block; grid-column: 1; grid-row: 1; opacity: 0; font-size: 17px; }
    & .sb-di[aria-current] .sb-di-cur { display: block; opacity: 1; }
    & .sb-di[aria-current] .sb-di-n { opacity: 0; }
    & .sb-di-w { grid-column: 2; grid-row: 1; font-size: 25px; }
    & .sb-di-t .sb-di-w { display: block; font-size: 19px; }
    & .sb-di-s { display: block; grid-column: 2; grid-row: 2; font: 500 max(var(--fs-floor, 0px), 12.5px)/1.35 var(--g-body); color: var(--g-on-2); }
    & .sb-di-s .tbd { margin-inline-start: .3em; font-size: max(var(--fs-floor, 0px), 11px); }
    & .sb-di-t .sb-di-s { display: none; }
    & .sb-di-t { padding-block: 6px; }
    & .sb-di[aria-current] { background: linear-gradient(90deg, rgba(240, 199, 123, .14), rgba(240, 199, 123, 0) 80%); box-shadow: inset 2px 0 0 var(--g-hi); }
  }

  /* the part's own screen */
  & .sb-part { min-width: 0; }
  & .sb-ph { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: clamp(14px, 2cqi, 22px); }
  & .sb-h2 {
    flex: 1 1 auto;
    font-family: var(--g-disp);
    font-style: var(--g-disp-st);
    font-weight: var(--g-disp-wt);
    font-variation-settings: var(--g-disp-vs);
    letter-spacing: var(--g-disp-ls);
    font-size: clamp(30px, 4cqi, 52px);
    line-height: 1.02;
    color: var(--g-on);
  }
  & .sb-glass[data-look="plain"] .sb-h2 { font-size: clamp(24px, 2.8cqi, 34px); }
  & .sb-ph-cap { display: inline-flex; align-items: stretch; font: 700 max(var(--fs-floor, 0px), 12px)/1.2 var(--font-term); letter-spacing: .06em; }
  & .sb-ph-cap > .sb-osd { flex: none; white-space: nowrap; display: inline-flex; align-items: center; border-inline-end: 1px solid #27422a; border-radius: 2px 0 0 2px; }
  & .sb-ph-cap > span:last-child { padding: 3px 8px 2px; background: #071007; color: var(--color-phosphor); border-radius: 0 2px 2px 0; text-shadow: 0 0 6px rgba(140, 255, 120, .35); }
  & .sb-ph-k { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
  & .sb-pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 5px 11px;
    border: 1px solid var(--g-rule);
    border-radius: var(--g-pill);
    font: 600 max(var(--fs-floor, 0px), 11.5px)/1.2 var(--g-body);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--g-on-2);
  }
  & .sb-h3 { font: 600 max(var(--fs-floor, 0px), 11.5px)/1.2 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-on-2); }
  & .sb-part .sb-unc { color: var(--g-hi); }

  /* buttons: the game's pill. On the dark screen it is paper with the terracotta arrow; on a
     paper sheet it is the ink pill with the amber arrow (Hero.tsx) */
  & .sb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .2em;
    min-height: var(--touch);
    padding: 0 22px;
    border: 1.5px solid var(--g-on);
    border-radius: var(--g-pill);
    background: transparent;
    color: var(--g-on);
    font: var(--g-disp-st) var(--g-disp-wt) 17px/1.1 var(--g-disp);
    font-variation-settings: var(--g-disp-vs);
    text-decoration: none !important;
    cursor: pointer;
  }
  & .sb-btn-go { background: var(--g-paper); border-color: var(--g-paper); color: var(--g-ink) !important; }
  & .sb-btn-go > span[aria-hidden] { color: var(--g-acc); }
  & .sb-btn-go:hover { background: var(--g-hi); border-color: var(--g-hi); }
  & .sb-btn-line:hover { background: rgba(244, 238, 226, .1); }
  & .sb-btn-s { min-height: var(--touch); padding: 0 16px; font-size: 15px; }
  & .sb-glass[data-look="plain"] .sb-btn { font: 700 13px/1.1 var(--font-term); letter-spacing: .08em; text-transform: uppercase; }

  /* ── play: the stage ── */
  & .sb-play { display: grid; gap: clamp(14px, 2cqi, 22px); }
  & .sb-stage {
    position: relative;
    justify-self: start;
    width: min(100% - 12px, max(400px, calc((100svh - var(--hdr) - 2 * var(--sb-m) - var(--sb-bay) - var(--sb-chin-h) - var(--sb-band) - 150px) * 16 / 9)));
    aspect-ratio: var(--sb-ar, 16 / 9);
    overflow: hidden;
    border-radius: calc(var(--g-rad) * .7);
    background: var(--g-bg);
    box-shadow: 0 0 0 6px var(--g-paper), 0 0 0 7px var(--g-line-2), var(--g-sh);
    margin: 6px;
  }
  @container sbg (max-width: 480px) { & .sb-stage-idle { aspect-ratio: 4 / 3; } }
  & .sb-stage-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  & .sb-stage-mark {
    position: absolute;
    top: 10px;
    inset-inline-start: 10px;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    max-width: calc(100% - 20px);
    padding-block: 4px 4px; padding-inline: 10px 6px;
    border-radius: 14px;
    background: rgba(244, 238, 226, .95);
    color: var(--g-ink-2);
    font: 500 max(var(--fs-floor, 0px), 12px)/1.3 var(--g-body);
  }
  & .sb-stage-mark .sb-unc { color: var(--g-acc); }
  /* the game's text box: a paper window at the foot of the scene */
  & .sb-box {
    position: absolute;
    left: 4%;
    right: 4%;
    bottom: 5%;
    padding: clamp(10px, 1.6cqi, 18px) clamp(14px, 2cqi, 24px);
    background: rgba(244, 238, 226, .97);
    color: var(--g-ink);
    border: 1px solid var(--g-line-2);
    border-radius: calc(var(--g-rad) * .66);
    box-shadow: 0 4px 16px -8px rgba(26, 22, 38, .22);
  }
  & .sb-box-more { position: absolute; inset-inline-end: 16px; bottom: 8px; color: var(--g-acc); font-size: max(var(--fs-floor, 0px), 11px); }
  & .sb-stage-idle:not(:has(.sb-stage-art)) .sb-box { top: 50%; bottom: auto; transform: translateY(-50%); }
  & .sb-box-t { font: var(--g-disp-st) var(--g-disp-wt) clamp(19px, 2.4cqi, 28px)/1.15 var(--g-disp); font-variation-settings: var(--g-disp-vs); }
  & .sb-box-s { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px !important; font: 500 13px/1.4 var(--g-body); color: var(--g-ink-2); }
  & .sb-poster { position: absolute; inset: 0; display: block; }
  & .sb-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
  & .sb-play-b {
    position: absolute;
    left: 50%;
    top: 50%;
    display: grid;
    place-items: center;
    width: 72px;
    height: 72px;
    margin-block: -36px 0; margin-inline: -36px 0;
    border-radius: 50%;
    background: var(--g-ink);
    color: var(--g-hi);
    font-size: 26px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
  }
  & .sb-frame { position: absolute; inset: 0; display: none; }
  & .sb-running .sb-frame { display: block; }
  & .sb-running .sb-poster { visibility: hidden; }
  & .sb-frame iframe { display: block; width: 100%; height: 100%; border: 0; background: #000; }
  & .sb-noinline .sb-play-b { display: none; }
  & .sb-play-k { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
  & .sb-acts { display: flex; flex-wrap: wrap; gap: 10px; }
  & .sb-note { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 13px/1.45 var(--g-body); color: var(--g-on-2); }
  & .sb-why-not { color: var(--g-hi); }
  /* the specs: the cartridge label, paper on the screen, under the map */
  & .sb-cart { display: grid; gap: 10px; max-width: 34rem; }
  & .sb-specs { padding: 6px 16px; background: var(--g-paper); color: var(--g-ink); border-radius: calc(var(--g-rad) * .6); box-shadow: var(--g-sh); }
  & .sb-specs > div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--g-line); }
  & .sb-specs > div:last-child { border-bottom: 0; }
  & .sb-specs dt { font: 600 max(var(--fs-floor, 0px), 11px)/1.5 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-faint); }
  & .sb-specs dd { font: 500 14px/1.45 var(--g-body); text-align: end; }
  & .sb-specs .sb-unc { color: var(--g-acc); }

  /* the stage map: the game's skill map, lit up to here, the rest locked ahead in the distance */
  & .sb-map { display: grid; gap: 14px; padding: clamp(14px, 2cqi, 20px) clamp(14px, 2.2cqi, 24px); border: 1px solid var(--g-rule); border-radius: calc(var(--g-rad) * .6); }
  @container sbg (min-width: 1000px) {
    & .sb-map { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: clamp(18px, 3cqi, 40px); }
  }
  & .sb-map-path { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
  & .sb-map-path::before { content: ""; position: absolute; left: 12.5%; right: 12.5%; top: 11px; border-top: 2px dashed var(--g-rule); }
  & .sb-n { position: relative; display: grid; justify-items: center; gap: 6px; font: 600 max(var(--fs-floor, 0px), 12px)/1.2 var(--g-body); letter-spacing: .04em; color: var(--g-on-2); text-align: center; }
  & .sb-n i { position: relative; z-index: 1; display: block; width: 22px; height: 22px; border-radius: 50%; background: var(--g-bg); border: 2px dashed rgba(244, 238, 226, .4); }
  & .sb-n-done i { background: var(--g-calm); border: 2px solid var(--g-calm); box-shadow: 0 0 10px rgba(143, 166, 142, .6); }
  & .sb-n-on { color: var(--g-on); font-weight: 800; }
  & .sb-n-on i { background: var(--g-acc-lg, var(--g-acc)); border: 2px solid var(--g-acc-lg, var(--g-acc)); box-shadow: 0 0 0 4px var(--g-bg), 0 0 0 6px var(--g-acc-lg, var(--g-acc)); }
  & .sb-n-on span { padding: 1px 7px; border-radius: var(--g-pill); background: var(--g-paper); color: var(--g-ink); }
  & .sb-map-ends { display: flex; flex-wrap: wrap; gap: 6px 14px; padding-inline-start: 14px; border-inline-start: 1px dashed var(--g-rule); }
  & .sb-map-ends .sb-n { grid-auto-flow: column; justify-items: start; align-items: center; gap: 6px; font-weight: 500; }
  & .sb-map-ends .sb-n i { width: 12px; height: 12px; border-width: 1.5px; }
  @container sbg (max-width: 420px) { & .sb-n { font-size: max(var(--fs-floor, 0px), 11px); letter-spacing: 0; } }

  /* ── why: the game's text box with the speaker's plate, then the passport page ── */
  & .sb-why { display: grid; gap: clamp(22px, 3.4cqi, 36px); }
  & .sb-dlg {
    position: relative;
    margin-top: 16px;
    min-height: clamp(130px, 15cqi, 170px);
    padding: clamp(30px, 3.4cqi, 40px) clamp(18px, 3.2cqi, 40px) clamp(30px, 3.4cqi, 40px);
    background: rgba(13, 10, 20, .82);
    color: var(--g-on);
    border-radius: calc(var(--g-rad) * .7);
    box-shadow: inset 0 0 0 2px rgba(244, 238, 226, .7), inset 0 0 0 6px rgba(13, 10, 20, .82), inset 0 0 0 7px rgba(240, 199, 123, .45), 0 18px 40px rgba(0, 0, 0, .35);
    font: 400 clamp(17px, 2cqi, 22px)/1.6 var(--g-body);
  }
  & .sb-dlg-who {
    position: absolute;
    top: -16px;
    inset-inline-start: clamp(16px, 2.6cqi, 30px);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--g-pill);
    background: var(--g-hi);
    color: var(--g-ink);
    font: 700 13px/1.2 var(--g-body);
    box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
  }
  & .sb-dlg-k { font-weight: 600; font-size: max(var(--fs-floor, 0px), 10.5px); letter-spacing: .18em; text-transform: uppercase; }
  & .sb-dlg-b { display: grid; gap: .8em; max-width: 62ch; }
  & .sb-dlg-b .sb-ghost-l i { opacity: .4; }
  & .sb-dlg .sb-unc { color: var(--g-hi); }
  & .sb-dlg-more { position: absolute; inset-inline-end: 22px; bottom: 14px; color: var(--g-hi); font-size: 13px; }
  & .sb-pass {
    position: relative;
    padding: clamp(16px, 2.6cqi, 28px) clamp(16px, 2.8cqi, 32px) clamp(18px, 2.6cqi, 28px);
    background:
      repeating-linear-gradient(135deg, rgba(154, 78, 51, .035) 0 1px, transparent 1px 9px),
      var(--g-paper);
    color: var(--g-ink);
    border-radius: calc(var(--g-rad) * .6);
    box-shadow: var(--g-sh);
  }
  & .sb-pass .sb-h3 { color: var(--g-faint); }
  & .sb-stamps { align-items: start; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 18px clamp(14px, 2.4cqi, 28px); margin-top: 16px !important; }
  & .sb-st {
    display: grid;
    align-content: start;
    gap: 6px;
    padding: 10px 14px 12px;
    border: 2px solid var(--g-acc);
    outline: 1px solid var(--g-acc);
    outline-offset: 3px;
    border-radius: 8px;
    color: var(--g-acc);
    transform: rotate(-2.2deg);
  }
  & .sb-st:nth-child(2) { transform: rotate(1.6deg); }
  & .sb-st:nth-child(3) { transform: rotate(-.8deg); }
  & .sb-st dt { font: 600 max(var(--fs-floor, 0px), 10.5px)/1.2 var(--g-body); letter-spacing: .22em; text-transform: uppercase; }
  & .sb-st dd { font: 700 15px/1.35 var(--g-body); color: var(--g-ink); }
  & .sb-st dd a { display: block; min-height: var(--touch); padding: 4px 0; text-decoration: none; }
  & .sb-st-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
  & .sb-st-links a { display: inline-flex; align-items: center; min-height: var(--touch); }
  & .sb-crew-a { display: inline-flex; align-items: center; min-height: var(--touch); }
  & .sb-st dd a time { display: block; margin-bottom: 4px; }
  & .sb-st-cn { display: block; font: var(--g-disp-st) 500 19px/1.25 var(--g-disp); font-variation-settings: var(--g-disp-vs); }
  & .sb-st dd a:hover .sb-st-t { text-decoration: underline; }
  & .sb-st time { font: 700 16px/1 var(--font-term); color: var(--g-acc); }
  & .sb-st-t { font: var(--g-disp-st) 500 17px/1.25 var(--g-disp); font-variation-settings: var(--g-disp-vs); }
  & .sb-st-case .sb-st-t { display: block; margin-top: 4px; font: 400 13px/1.3 var(--font-term); color: var(--g-ink-2); }
  & .sb-st-a:hover .sb-st-cn { text-decoration: underline; }
  & .sb-st-tbd { border-style: dashed; outline-style: dashed; color: var(--g-faint); }
  & .sb-pass .sb-unc { color: var(--g-acc); }
  & .sb-st-line { grid-column: 1 / -1; display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 18px; align-items: baseline; padding-top: 12px; border-top: 1px solid var(--g-line-2); }
  & .sb-st-line dt { font: 600 max(var(--fs-floor, 0px), 11px)/1.3 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-faint); }
  & .sb-st-line dd { font: var(--g-disp-st) 400 clamp(17px, 1.9cqi, 21px)/1.4 var(--g-disp); font-variation-settings: var(--g-disp-vs); max-width: 52ch; }
  @container sbg (max-width: 480px) { & .sb-st-line { grid-template-columns: minmax(0, 1fr); } }
  & .sb-code { overflow-x: auto; padding: 12px; background: var(--g-paper-2); color: var(--g-ink); border-radius: 8px; font: 13px/1.5 var(--font-term); }

  /* ── learning: the tally in the project's numerals beside the ledger sheet (square paper, the
     terracotta double margin rule, a trace per question, the state with its finding) ── */
  & .sb-learn { display: grid; gap: clamp(20px, 3cqi, 36px); align-items: start; }
  @container sbg (min-width: 860px) { & .sb-learn { grid-template-columns: 13rem minmax(0, 1fr); } }
  & .sb-tally { display: grid; gap: 18px; align-content: start; }
  & .sb-tally-n { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  @container sbg (min-width: 860px) { & .sb-tally-n { grid-template-columns: none; gap: 0; border-top: 1px solid var(--g-rule); } }
  & .sb-tally-n > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: 10px 0; }
  @container sbg (min-width: 860px) { & .sb-tally-n > div { flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--g-rule); } }
  & .sb-tally-n dt { font: 600 max(var(--fs-floor, 0px), 12px)/1.2 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-on-3); }
  & .sb-tally-n dd {
    font-family: var(--g-disp);
    font-style: var(--g-disp-st);
    font-weight: var(--g-disp-wt);
    font-variation-settings: var(--g-disp-vs);
    font-size: clamp(34px, 4cqi, 48px);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--g-on-2);
  }
  & .sb-tn-open dd { color: var(--g-hi); }
  & .sb-tn-open dt { color: var(--g-on); }
  & .sb-settle { display: grid; gap: 7px; }
  & .sb-settle-k { font: 500 max(var(--fs-floor, 0px), 12.5px)/1.2 var(--font-term); letter-spacing: .06em; color: var(--g-on-2); }
  & .sb-settle-bar { display: block; height: 4px; border-radius: 2px; background: rgba(244, 238, 226, .14); overflow: hidden; }
  & .sb-settle-bar i { display: block; height: 100%; min-width: 0; background: var(--g-calm); }
  & .sb-tally-u, & .sb-tally-none { display: flex; align-items: center; gap: 4px; font: 500 13px/1.3 var(--g-body); }
  & .sb-tally-u .sb-unc { margin-inline-start: .2em; color: var(--g-hi); }
  & .sb-reg {
    --sb-mg: clamp(30px, 4.4cqi, 58px);   /* the margin: the double rule sits 6-10px inside it */
    position: relative;
    min-width: 0;
    padding: 6px clamp(12px, 2cqi, 26px) 10px var(--sb-mg);
    background:
      linear-gradient(to right, transparent calc(var(--sb-mg) - 10px), rgba(200, 107, 74, .55) calc(var(--sb-mg) - 10px) calc(var(--sb-mg) - 9px), transparent calc(var(--sb-mg) - 9px) calc(var(--sb-mg) - 7px), rgba(200, 107, 74, .55) calc(var(--sb-mg) - 7px) calc(var(--sb-mg) - 6px), transparent calc(var(--sb-mg) - 6px)),
      var(--g-paper);
    color: var(--g-ink);
    border-radius: 3px;
    box-shadow: var(--g-sh);
  }
  & .sb-reg .sb-unc { color: var(--g-acc); }
  & .sb-reg-hd, & .sb-q { display: grid; grid-template-columns: 5.6em minmax(0, 1.25fr) clamp(80px, 10cqi, 140px) minmax(0, 1fr); column-gap: clamp(14px, 2.2cqi, 28px); }
  & .sb-reg-hd { padding: 12px 6px 9px; border-bottom: 2px solid var(--g-ink); font: 600 max(var(--fs-floor, 0px), 11.5px)/1.2 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-faint); }
  & .sb-q { padding: 16px 6px; border-bottom: 1px solid var(--g-line-2); align-items: center; scroll-margin-top: 16px; }
  & .sb-q:last-child { border-bottom: 0; }
  & .sb-q-code { font: 700 13.5px/1.4 var(--font-term); letter-spacing: .04em; color: var(--g-acc); white-space: nowrap; }
  & .sb-q-t { font: 500 clamp(16px, 1.65cqi, 19px)/1.35 var(--g-body); color: var(--g-ink); }
  /* the question's own trace, drawn in terracotta on the paper (noise while open) */
  & .sb-q-sig { width: 100%; height: 34px; }
  & .sb-q-sig path { stroke: var(--g-acc-lg, var(--g-acc)); stroke-width: 1.5; filter: none; opacity: .85; }
  & .sb-q-answered .sb-q-sig path { stroke: var(--g-acc); stroke-width: 2; opacity: 1; }
  & :is(.sb-q-dropped, .sb-q-tbd) .sb-q-sig path { stroke: var(--g-faint); stroke-dasharray: 4 4; opacity: 1; }
  & .sb-q-r { display: grid; gap: 6px; justify-items: start; padding-inline-start: clamp(12px, 2cqi, 22px); border-inline-start: 1px dashed var(--g-line-2); }
  & .sb-q-st { display: inline-flex; align-items: center; gap: 8px; font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--g-body); letter-spacing: .14em; text-transform: uppercase; color: var(--g-ink); }
  & .sb-q-st i { display: block; width: 9px; height: 9px; transform: rotate(45deg); border: 1.5px solid var(--g-acc); }
  & .sb-q-answered .sb-q-st i { background: var(--g-acc); }
  & .sb-q-dropped .sb-q-st i { border-color: var(--g-faint); background: linear-gradient(135deg, transparent 45%, var(--g-faint) 45% 55%, transparent 55%); }
  & .sb-q-f { font: 400 14px/1.5 var(--g-body); color: var(--g-ink-2); }
  & .sb-q-fk { margin-inline-end: .6em; font-weight: 600; font-size: max(var(--fs-floor, 0px), 11.5px); letter-spacing: .16em; text-transform: uppercase; color: var(--g-faint); }
  & .sb-q-still { font-style: italic; white-space: nowrap; }
  & .sb-q-f a { display: inline-flex; align-items: center; min-height: var(--touch); min-width: var(--touch); margin-block: -12px; }
  & .sb-q-tbd .sb-q-t { color: var(--g-faint); }
  & .sb-reg .tbd { font-size: max(var(--fs-floor, 0px), 12px); }
  @container sbg (max-width: 700px) {
    & .sb-reg-hd { display: none; }
    & .sb-q { grid-template-columns: minmax(0, 1fr) minmax(60px, 34%); row-gap: 8px; padding: 14px 4px; }
    & .sb-q-code { grid-column: 1; grid-row: 1; align-self: center; }
    & .sb-q-sig { grid-column: 2; grid-row: 1; height: 24px; }
    & .sb-q-t { grid-column: 1 / -1; }
    & .sb-q-r { grid-column: 1 / -1; padding-inline-start: 0; border-inline-start: 0; grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 6px 14px; }
  }
  @container sbg (max-width: 400px) { & .sb-q-r { grid-auto-flow: row; } }

  /* ── help: the open door first (the route that always works), then the project's bubbles with
     your replies; beside them (below on a narrow glass) the helper sheet ── */
  & .sb-talk { display: grid; gap: clamp(22px, 3.2cqi, 34px); align-items: start; }
  @container sbg (min-width: 760px) {
    & .sb-talk { grid-template-columns: minmax(0, 1fr) minmax(12rem, 15rem); column-gap: clamp(24px, 4cqi, 56px); }
    & .sb-helper { position: sticky; top: 0; }
  }
  & .sb-talk-main { display: grid; gap: clamp(26px, 3.6cqi, 40px); min-width: 0; }
  & .sb-door { display: grid; gap: 8px; }
  & .sb-door-k, & .sb-spk-k { font: 600 max(var(--fs-floor, 0px), 11.5px)/1.2 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-on-2); }
  & .sb-choice {
    position: relative;
    display: grid;
    grid-template-columns: 1.4em minmax(0, auto) minmax(0, 1fr);
    align-items: baseline;
    column-gap: 10px;
    row-gap: 2px;
    min-height: var(--touch);
    max-width: 52rem;
    padding: 16px clamp(16px, 2.4cqi, 26px);
    background: var(--g-dlg);
    border-radius: calc(var(--g-rad) * .6);
    box-shadow: inset 0 0 0 2px var(--g-on-2), inset 0 0 0 5px var(--g-dlg), inset 0 0 0 6px var(--g-rule);
    color: var(--g-on) !important;
    text-decoration: none !important;
  }
  & .sb-cur { color: var(--g-hi); font: 400 16px/1 var(--font-term); }
  & .sb-choice-w { font: var(--g-disp-st) var(--g-disp-wt) clamp(19px, 2.2cqi, 26px)/1.2 var(--g-disp); font-variation-settings: var(--g-disp-vs); overflow-wrap: anywhere; }
  & .sb-choice-s { justify-self: end; font: 500 13px/1.4 var(--font-term); color: var(--g-on-2); overflow-wrap: anywhere; }
  & .sb-choice:hover .sb-choice-w { color: var(--g-hi); }
  & .sb-glass[data-look="plain"] .sb-choice-w { font: 700 16px/1.3 var(--font-term); }
  @container sbg (max-width: 620px) { & .sb-choice { grid-template-columns: 1.4em minmax(0, 1fr); } & .sb-choice-s { grid-column: 2; justify-self: start; } }
  & .sb-conv { display: grid; gap: 14px; }
  & .sb-spk { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
  & .sb-spk-n { padding: 6px 15px; border-radius: var(--g-pill); background: var(--g-hi); color: var(--g-ink); font: var(--g-disp-st) var(--g-disp-wt) 18px/1.1 var(--g-disp); font-variation-settings: var(--g-disp-vs); }
  & .sb-glass[data-look="wahori"] .sb-spk-n { text-transform: lowercase; }
  & .sb-asks { display: grid; gap: clamp(16px, 2.4cqi, 24px); }
  & .sb-ask { display: grid; gap: 12px; align-items: center; }
  @container sbg (min-width: 1000px) { & .sb-ask { grid-template-columns: minmax(0, 1.5fr) minmax(13rem, 1fr); column-gap: clamp(20px, 3cqi, 40px); } }
  & .sb-bub {
    position: relative;
    padding-block: 18px 18px; padding-inline: 62px 22px;
    background: var(--g-paper);
    color: var(--g-ink);
    border: 1px solid var(--g-line-2);
    border-radius: 18px;
    box-shadow: 0 4px 16px -8px rgba(26, 22, 38, .22);
    font: 400 clamp(16px, 1.8cqi, 19px)/1.5 var(--g-body);
  }
  & .sb-bub::after {   /* the bubble's tail: the rotated square (identity doc §3), toward the speaker above */
    content: "";
    position: absolute;
    inset-inline-start: 30px;
    top: -8px;
    width: 14px;
    height: 14px;
    background: inherit;
    border-inline-start: 1px solid var(--g-line-2);
    border-top: 1px solid var(--g-line-2);
    transform: rotate(45deg);
  }
  & .sb-ask-tbd .sb-bub { background: transparent; color: var(--g-on-2); border: 1.5px dashed var(--g-on-2); box-shadow: none; }
  & .sb-ask-tbd .sb-bub::after { background: var(--g-bg); border-color: var(--g-on-2); border-style: dashed; border-width: 1.5px 0 0 1.5px; }
  & .sb-ask-tbd .sb-ghost-l i { opacity: .4; }
  & .sb-ask-n { position: absolute; inset-inline-start: 18px; top: 17px; font: var(--g-disp-st) var(--g-disp-wt) 24px/1 var(--g-disp); font-variation-settings: var(--g-disp-vs); color: var(--g-acc); }
  & .sb-ask-tbd .sb-ask-n { color: var(--g-hi); }
  & .sb-reply {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    min-height: 64px;
    padding: 10px 18px;
    background: var(--g-dlg);
    border-radius: calc(var(--g-rad) * .5);
    box-shadow: inset 0 0 0 1.5px var(--g-on-2), inset 0 0 0 4px var(--g-dlg), inset 0 0 0 5px var(--g-rule);
  }
  @container sbg (max-width: 999px) { & .sb-reply { min-height: 48px; margin-inline-start: clamp(18px, 7cqi, 56px); } & .sb-ask { gap: 8px; } }
  /* an unwritten reply: the choice's shape, its two blanks dashed (the bubble carries the one [TBD]) */
  & .sb-reply-tbd { flex-wrap: nowrap; gap: 10px; background: transparent; box-shadow: none; border: 1.5px dashed var(--g-rule); }
  & .sb-reply-tbd .sb-cur { opacity: .5; }
  & .sb-blank { flex: 1 1 0; min-width: 24px; height: 0; margin-inline-end: 6px; border-top: 2px dashed var(--g-on-2); opacity: .45; }
  & .sb-for { display: inline-flex; align-items: center; gap: 8px; font: 500 14px/1.3 var(--g-body); }
  & .sb-for-k, & .sb-route-off > span:first-child { font-weight: 600; font-size: max(var(--fs-floor, 0px), 11.5px); letter-spacing: .16em; text-transform: uppercase; color: var(--g-on-2); }
  & .sb-for a { display: inline-flex; align-items: center; min-height: var(--touch); min-width: var(--touch); }
  & .sb-route-off { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 1.5px dashed var(--g-on-2); border-radius: var(--g-pill); }
  /* the helper sheet: the game's phone helper (rounded-3xl, chips), the open questions to serve */
  & .sb-helper {
    display: grid;
    gap: 14px;
    padding: 18px 18px 20px;
    background: rgba(244, 238, 226, .96);
    color: var(--g-ink);
    border-radius: var(--g-rad);
    box-shadow: var(--g-sh);
  }
  & .sb-helper .sb-h3 { color: var(--g-faint); }
  & .sb-hs { display: grid; gap: 10px; padding: 12px; background: rgba(236, 223, 198, .55); border: 1px solid var(--g-line); border-radius: 16px; }
  & .sb-hs-k { font: 600 max(var(--fs-floor, 0px), 12px)/1.2 var(--g-body); letter-spacing: .12em; text-transform: uppercase; color: var(--g-ink-2); }
  & .sb-hs-qs { display: flex; flex-wrap: wrap; gap: 6px; }
  & .sb-hs-qs a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: var(--touch); padding: 0 12px; border: 1px solid rgba(26, 22, 38, .2); border-radius: 999px; font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term); letter-spacing: .06em; color: var(--g-acc); text-decoration: none; background: var(--g-paper); }
  & .sb-hs-qs a:hover { border-color: var(--g-acc); }

  /* ── log: the changelog on the line (the day large, the month under it), from the next entry
     to where it started; beside it the ledger: by kind, the span, by month ── */
  & .sb-logw { display: grid; gap: clamp(26px, 3.4cqi, 44px); align-items: start; }
  @container sbg (min-width: 860px) { & .sb-logw { grid-template-columns: minmax(0, 1fr) 15rem; } & .sb-ledger { position: sticky; top: 0; } }
  & .sb-logc { --sb-dc: 6.6em; --sb-lg: clamp(20px, 3cqi, 36px); --sb-lx: calc(var(--sb-dc) + var(--sb-lg) / 2); position: relative; min-width: 0; }
  & .sb-log { position: relative; display: grid; }
  & .sb-next, & .sb-start { position: relative; display: grid; grid-template-columns: var(--sb-dc) minmax(0, 1fr); column-gap: var(--sb-lg); align-items: center; }
  & .sb-next { padding-bottom: 26px; }
  & .sb-next::before { content: ""; position: absolute; inset-inline-start: calc(var(--sb-lx) - 1px); top: 14px; bottom: 0; border-inline-start: 2px dashed var(--g-mark); }
  & .sb-next::after, & .sb-start::after { content: ""; position: absolute; inset-inline-start: calc(var(--sb-lx) - 7px); top: calc(50% - 7px); width: 10px; height: 10px; border-radius: 50%; border: 2px dashed var(--g-mark); background: var(--g-bg); }
  & .sb-next::after { top: 3px; }
  & .sb-next-k, & .sb-start-k { text-align: end; font: 600 max(var(--fs-floor, 0px), 12px)/1.3 var(--g-body); letter-spacing: .16em; text-transform: uppercase; color: var(--g-on-3); }
  & .sb-next > :not(.sb-next-k), & .sb-start > :not(.sb-start-k) { justify-self: start; }
  & .sb-u { position: relative; display: grid; grid-template-columns: var(--sb-dc) minmax(0, 1fr); column-gap: var(--sb-lg); padding: 0 0 clamp(26px, 3.4cqi, 36px); scroll-margin-top: 16px; }
  & .sb-u::before { content: ""; position: absolute; inset-inline-start: calc(var(--sb-lx) - 1px); top: 0; bottom: 0; border-inline-start: 2px solid var(--g-mark); }
  & .sb-u::after { content: ""; position: absolute; inset-inline-start: calc(var(--sb-lx) - 8px); top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--g-bg); border: 2px solid var(--g-mark); }
  & .sb-u-latest::after { background: var(--g-hi); border-color: var(--g-hi); box-shadow: 0 0 0 4px rgba(240, 199, 123, .18); }
  & .sb-u-date { text-align: end; }
  & .sb-u-date time { display: grid; justify-items: end; gap: 2px; color: var(--g-on); }
  & .sb-u-date b { font: 700 30px/1 var(--font-term); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
  & .sb-u-date span { font: 500 max(var(--fs-floor, 0px), 12.5px)/1.2 var(--font-term); letter-spacing: .1em; text-transform: uppercase; color: var(--g-on-2); }
  & .sb-u-b { display: grid; gap: 8px; min-width: 0; padding-block: 0 0; padding-inline: 4px 0; }
  & .sb-u-meta { display: flex; flex-wrap: wrap; gap: 6px; }
  & .sb-kind, & .sb-flag { display: inline-block; padding: 3px 10px; border-radius: var(--g-pill); font: 600 max(var(--fs-floor, 0px), 11.5px)/1.3 var(--g-body); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--g-rule); color: var(--g-on-2); }
  & .sb-kind-release { border-color: var(--g-hi); color: var(--g-hi); }
  & .sb-kind-milestone { border-color: var(--g-calm); color: #c4d4c3; }
  & .sb-flag { background: var(--g-hi); border-color: var(--g-hi); color: var(--g-ink); }
  & .sb-flag-new { background: var(--g-paper); border-color: var(--g-paper); color: var(--g-ink); }
  & .sb-u-t { font: var(--g-disp-st) var(--g-disp-wt) clamp(24px, 2.8cqi, 34px)/1.15 var(--g-disp); font-variation-settings: var(--g-disp-vs); letter-spacing: var(--g-disp-ls); color: var(--g-on); }
  /* the permalink: inline, so its # stays with the last word; padded to a 44px target */
  & .sb-u-t a { display: inline-block; padding-block: max(0px, (var(--touch) - 1.15em) / 2); text-decoration: none !important; }
  & .sb-u-t a:hover { text-decoration: underline !important; }
  & .sb-u-hash { margin-inline-start: .25em; color: var(--g-hi); font-style: normal; font-size: max(var(--fs-floor, 0px), .58em); }
  & .sb-u-b > p, & .sb-u-more p { max-width: 62ch; font: 400 15px/1.6 var(--g-body); color: var(--g-on-2); }
  & .sb-u-more summary { min-height: var(--touch); cursor: pointer; }
  & .sb-u-links { display: flex; flex-wrap: wrap; gap: 4px 16px; }
  & .sb-u-links a { display: inline-flex; align-items: center; min-height: var(--touch); font: 600 14px/1.3 var(--g-body); color: var(--g-on) !important; }
  & .sb-u-lu { margin-inline-start: .5em; font: 400 13px/1.3 var(--font-term); color: var(--g-on-3); }
  & .sb-u-shot img { max-width: 100%; height: auto; border-radius: 10px; }
  & .sb-start { padding-top: 4px; }
  & .sb-start::before { content: ""; position: absolute; inset-inline-start: calc(var(--sb-lx) - 1px); top: -26px; height: calc(50% + 26px - 7px); border-inline-start: 2px dashed var(--g-mark); }
  & .sb-u:target .sb-u-b, & .sb-hit .sb-u-b { background: rgba(240, 199, 123, .14); border-radius: 10px; box-shadow: 0 0 0 8px rgba(240, 199, 123, .14); }
  & .sb-q.sb-hit, & .sb-q:target { background: rgba(240, 199, 123, .35); }
  @container sbg (max-width: 560px) {
    & .sb-logc { --sb-dc: 0px; --sb-lg: 26px; --sb-lx: 6px; }
    & .sb-u, & .sb-next, & .sb-start { grid-template-columns: minmax(0, 1fr); padding-inline-start: 28px; }
    & .sb-u-date, & .sb-next-k, & .sb-start-k { text-align: start; margin-bottom: 6px; }
    & .sb-u-date time { display: flex; align-items: baseline; gap: 8px; justify-content: flex-start; }
    & .sb-u-date b { font-size: 22px; }
  }
  /* the ledger: the log in numbers, by kind, its span, a month ruler */
  & .sb-ledger { display: grid; gap: 10px; align-content: start; padding: clamp(14px, 2cqi, 20px); border: 1px solid var(--g-rule); border-radius: calc(var(--g-rad) * .6); background: var(--g-panel); }
  & .sb-ledger .sb-h3:not(:first-child) { margin-top: 10px !important; }
  & .sb-kinds { display: grid; gap: 8px; }
  & .sb-kinds li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  & .sb-kinds b { font: 700 16px/1 var(--font-term); color: var(--g-on); }
  & .sb-span { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 500 13.5px/1.4 var(--font-term); color: var(--g-on); }
  & .sb-span > span { color: var(--g-hi); }
  & .sb-ruler { display: grid; }
  & .sb-ruler li { display: grid; grid-template-columns: 5.4em minmax(0, 1fr) 2em; align-items: center; gap: 10px; min-height: 28px; border-bottom: 1px dashed var(--g-rule); font: 500 max(var(--fs-floor, 0px), 12.5px)/1.2 var(--font-term); color: var(--g-on-3); }
  & .sb-rm-l { letter-spacing: .08em; text-transform: uppercase; }
  & .sb-rm-l i { margin-inline-start: .5em; font-style: normal; font-size: max(var(--fs-floor, 0px), 11.5px); opacity: .85; }
  & .sb-rm-t { display: flex; gap: 4px; }
  & .sb-rm-t i { display: block; width: 10px; height: 10px; border-radius: 50%; background: var(--g-mark); }
  & .sb-rm-on { color: var(--g-on); }
  & .sb-rm-n { text-align: end; }
  & .sb-ledger-none { margin: 0; }

  /* ════════════ narrow glass: the title's paper sheets keep the room readable ════════════ */
  @container sbg (max-width: 899px) {
    & .sb-rail { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; padding-bottom: 10px; border-bottom: 1px solid var(--g-rule); }
    & .sb-dock { margin-top: 0; margin-inline-start: -8px; }
    & .sb-di { padding: 0 6px; gap: 3px; }
    & .sb-di-w { font-size: 17.5px; }
  }
}

/* the camera fills the view: the page itself never scrolls; the glass does (the page's own root,
   never a probe: see the bench's tune-in at the end of this file) */
html:has(#main-content > [data-sandbox="project"]) { overflow: hidden; overscroll-behavior: none; }
html:has(#main-content > [data-sandbox="project"]) body.room { height: 100dvh; min-height: 0; }
html:has(#main-content > [data-sandbox="project"]) body.room > #main-content { flex: 1 1 0; min-height: 0; }
html:has(#main-content > [data-sandbox="project"]) :is(body.room > .floor, body.room > .foot) { display: none; }

@media (prefers-reduced-motion: no-preference) {
  [data-sandbox="project"] {
    & .sb-mi-n { transition: opacity var(--fast) linear; }
    & .sb-chin-in a, & .sb-unplug, & .sb-mi-w, & .sb-mi-cur, & .sb-di-w { transition: transform var(--fast) var(--ease), opacity var(--fast) var(--ease), color var(--fast) var(--ease); }
    & .sb-mi:hover .sb-mi-w, & .sb-mi:focus-visible .sb-mi-w, & .sb-mi[data-sb-on] .sb-mi-w { transform: translateX(6px); }
    & .sb-di:not([aria-current]):hover .sb-di-w { transform: translateX(4px); }
    /* arrival (sandbox.js adds .sb-tune to the root): the scope's channel opens on the project's screen */
    /* until then (sandbox.js holds a swapped-in page with .sb-hold) the shutters stay shut, so the
       title screen never paints before the channel opens */
    &.sb-hold .sb-screen::before, &.sb-hold .sb-screen::after { opacity: 1; }
    &.sb-tune .sb-screen::before { animation: sb-shut-up 420ms cubic-bezier(.5, 0, .2, 1); }
    &.sb-tune .sb-screen::after { animation: sb-shut-down 420ms cubic-bezier(.5, 0, .2, 1); }
    &.sb-tune .sb-snow { animation: sb-snow 300ms ease-out; }
    &.sb-tune :is(.sb-t-main, .sb-t-side) > * { animation: sb-rise 700ms cubic-bezier(.16, 1, .3, 1) backwards; }
    &.sb-tune .sb-t-side > :nth-child(1) { animation-delay: 120ms; }
    &.sb-tune .sb-t-main > .sb-menu { animation-delay: 220ms; }
    &.sb-tune .sb-t-side > :nth-child(2) { animation-delay: 300ms; }
    /* moving between parts (sandbox.js adds .sb-step to the root, &.sb-step here, on every part
       change, the title screen included): the beam crosses the glass, the new screen comes up
       behind it; the menu words fly between the title and the rail (sandbox.js, WAAPI) */
    &.sb-step .sb-beam { animation: sb-beam 520ms cubic-bezier(.4, 0, .2, 1); }
    &.sb-step .sb-part > * { animation: sb-wipe 520ms cubic-bezier(.16, 1, .3, 1) backwards; }
    &.sb-step .sb-part > :nth-child(2) { animation-delay: 50ms; }
    &.sb-step .sb-part > :nth-child(3) { animation-delay: 90ms; }
    &.sb-step .sb-t-head, &.sb-step .sb-sub, &.sb-step .sb-art, &.sb-step .sb-status { animation: sb-wipe 520ms cubic-bezier(.16, 1, .3, 1) backwards; }
    &.sb-step .sb-di-s { animation: sb-late 260ms 300ms linear backwards; }
    &.sb-step .sb-menu-hint { animation: sb-late 260ms 200ms linear backwards; }
    &.sb-leave .sb-part, &.sb-leave :is(.sb-t-head, .sb-sub, .sb-t-side), &.sb-leave .sb-legend { opacity: .25; transition: opacity 110ms linear; }
    & .sb-hit .sb-u-b, & .sb-q.sb-hit { animation: sb-hit 900ms ease-out; }
  }
}
@keyframes sb-shut-up { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(-101%); } }
@keyframes sb-shut-down { from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(101%); } }
@keyframes sb-snow { 0% { opacity: 0; } 25% { opacity: .55; } 100% { opacity: 0; } }
@keyframes sb-rise { from { opacity: 0; transform: translateY(22px); } }
@keyframes sb-wipe { from { opacity: 0; transform: translateX(-18px); } }
@keyframes sb-beam { 0% { opacity: 1; transform: translateX(0); } 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes sb-late { from { opacity: 0; } }
@keyframes sb-hit { 0% { opacity: .4; } 100% { opacity: 1; } }


/* ════════════════════════════════════════════════════════════════════════════════════════════════
   THE BENCH: the Sandbox index (/sandbox) and the home station's Sandbox part (CH 2 and the
   clipboard page), web/templates/fragments/sandbox/roll; behaviour in sandbox.js. Home: the merge
   of the round 3 bake-off on p8 "ROLL, grafted" (brief .claude/plans/site-v2/03-build/
   sandbox-index-brief.md) with p7's way in from home and its tune-in, p6's clipboard fit. The
   index: the round 4 merge on p6 "THE WHOLE LAB, polished" ((A2) below).

   THE INDEX is the whole lab with the camera pulled back off the scope: the CH 2 scope on the
   bench (its glass the project page's glass at its end state, scaled), the patch bay, the printer's
   hardcopy, the pegboard, the stage chart and the taped card. At 900px and up the page never
   scrolls (the glass, the hardcopy, the pegboard and the chart do); under 900px it is one column
   in reading order.
   THE ROLL: one timebase for every project (x = the calendar, from the oldest dated log entry to
   now at the right edge). A lane = one row: the address, the project's name in its own type and
   its counts on the left; its trace on the right, drawn only over the span its log covers, a pip
   per update, a dotted run to now, and the last update written at the last pip.
   Motion: hover/focus transitions and the pick (sandbox.js), opacity and transforms only; on
   /sandbox, slow ambient keyframes ((A2)), paused off screen and in a hidden tab, none under
   reduced motion.
   ════════════════════════════════════════════════════════════════════════════════════════════════ */

/* the tune-in's copy of the top of a project's title screen (sandbox.TitleProbe): laid out by the
   project page's own rules above, its .sb-tp the project's glass at rest, scaled onto the bench's
   glass by sandbox.js. Never the page (the html rules above and sandbox.js skip it). */
[data-sandbox="project"][data-sb-probe] { position: absolute; left: 0; top: 0; transform-origin: 0 0; pointer-events: none; }
[data-sandbox="project"][data-sb-probe] .sb-tp { position: relative; overflow: hidden; }

/* ════════════ shared: the roll's parts (index, CH 2, clipboard) ════════════ */
:is([data-sandbox="index"], [data-sandbox-home]) {
  --sx-ph: var(--color-phosphor);
  --sx-ph-hi: var(--color-phosphor-hi);
  --sx-ph-dim: var(--color-phosphor-dim);
  --sx-ph-faint: var(--color-phosphor-faint);
  --sx-amber: var(--color-amber);
  /* Wahori (identity doc §2): ink indigo, paper, terracotta (marks only), terracotta-deep, amber */
  --sx-w-ink: #1a1626;
  --sx-w-paper: #f4eee2;
  --sx-w-terra: #c86b4a;
  --sx-w-deep: #9a4e33;
  --sx-w-amber: #f0c77b;
  --sx-lab: clamp(214px, 48cqi, 340px);   /* the lanes' label column (the strips take the rest) */

  & .tbd { font: 700 max(var(--fs-floor, 0px), 12px)/1.35 var(--font-term); letter-spacing: .04em; border-radius: 2px; vertical-align: .06em; }
  /* written, not yet confirmed: the value is dashed, and one dashed [TBD] follows */
  & .sx-uv { text-decoration: underline dashed; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
  & .sx-unc {
    display: inline-block;
    margin-left: .4em;
    padding: 0 .35em;
    border: 1.5px dashed currentColor;
    border-radius: 2px;
    font: 700 max(var(--fs-floor, 0px), 12px)/1.4 var(--font-term);
    letter-spacing: .04em;
    font-style: normal;
    white-space: nowrap;
    vertical-align: .06em;
  }
  & :focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }

  /* the wordmark: a project's name in its own type */
  & .sx-wm { min-width: 0; font: 700 15px/1.15 var(--font-term); color: var(--sx-ph-hi); overflow-wrap: anywhere; }
  & [data-look="wahori"] .sx-wm-n {
    font-family: "sb Fraunces", Georgia, "Times New Roman", serif;
    font-style: italic;   /* the house voice: synthesized italic of the roman file (identity doc §1) */
    font-weight: 400;
    font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1;
    letter-spacing: -.02em;
    text-transform: lowercase;
    font-size: 27px;
    line-height: 1;
    color: var(--sx-w-paper);
  }
  & [data-look="wahori"] .sx-wm-sub { margin-left: 6px; font: 500 max(var(--fs-floor, 0px), 12px)/1 system-ui, sans-serif; color: var(--sx-w-amber); white-space: nowrap; }
  & .sx-n { flex: none; font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term); color: var(--sx-ph-dim); letter-spacing: .04em; font-variant-numeric: tabular-nums; }

  /* the axis: the year, the months, now */
  & .sx-ruler {
    display: grid;
    grid-template-columns: var(--sx-lab) minmax(0, 1fr);
    align-items: end;
    height: 22px;
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--sx-ph-dim);
  }
  & .sx-ru-k { padding-left: 38px; padding-bottom: 5px; }
  & .sx-axis { position: relative; height: 100%; border-bottom: 1px solid var(--sx-ph-faint); }
  & .sx-tick { position: absolute; bottom: 0; height: 100%; padding: 0 0 5px 4px; border-left: 1px solid var(--sx-ph-faint); white-space: nowrap; }
  & .sx-tk-i { display: none; }
  & .sx-now { position: absolute; right: 0; bottom: 0; height: 100%; padding: 0 5px 5px 0; color: var(--sx-amber); border-right: 1.5px solid var(--sx-amber); }

  /* a strip: the trace on the timebase */
  & .sx-strip { position: relative; display: block; min-width: 0; height: 30px; }
  & .sx-strip svg { display: block; width: 100%; height: 100%; overflow: visible; }
  & .sx-strip path { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; stroke-linecap: round; }
  & .sx-strip::after {   /* the now line, at the axis's right edge */
    content: "";
    position: absolute;
    right: 0;
    top: -4px;
    bottom: -4px;
    border-right: 1.5px dashed color-mix(in srgb, var(--color-amber) 55%, transparent);
  }
  & .sx-grid { stroke: var(--sx-ph-faint); stroke-width: 1; }
  & .sx-seg { stroke: var(--sx-ph); stroke-width: 1.5; }
  & .sx-lock { stroke: var(--sx-ph-hi); stroke-width: 2; opacity: 0; }
  & .sx-tail { stroke: var(--sx-ph-dim); stroke-width: 1.5; stroke-dasharray: 1 5; }
  & .sx-dead .sx-seg { stroke: var(--sx-ph-dim); stroke-width: 1; stroke-dasharray: 4 5; }
  & .sx-pip {
    position: absolute;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: var(--sx-ph-hi);
    box-shadow: 0 0 0 2px #061006;
  }
  & .sx-pip-last { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; background: var(--sx-amber); box-shadow: 0 0 0 2px #061006, 0 0 8px rgba(255, 191, 63, .7); }
  & [data-look="wahori"] .sx-seg { stroke: var(--sx-w-terra); stroke-width: 1.7; }
  & [data-look="wahori"] .sx-lock { stroke: var(--sx-w-amber); }
  & [data-look="wahori"] .sx-pip { background: var(--sx-w-paper); }
  & [data-look="wahori"] .sx-pip-last { background: var(--sx-w-amber); }

  /* the tune-in (sandbox.js, on a pick): the glass takes the project's own screen and its wordmark
     rises to exactly where the title screen draws it. The layer holds a copy of the top of the
     project's title screen (sandbox.TitleProbe), laid out by the project page's own rules
     ([data-sandbox="project"][data-sb-probe], below) and scaled onto this glass; decoration only. */
  & .sx-tune { position: absolute; inset: 0; z-index: 6; overflow: hidden; border-radius: inherit; pointer-events: none; visibility: hidden; }
  & .sx-tune.sx-on { visibility: visible; background: radial-gradient(ellipse at 40% 35%, var(--color-screen-center) 0%, var(--color-screen) 70%, #030803 100%); }
}

/* ════════════ (A) THE INDEX: the whole lab, the camera pulled back off the scope ════════════ */
/* (A1) the scope's glass and the roll on it: [data-sandbox="index"] (the round 4 lab slots,
   fragments/sandbox/lab, draw the same glass and lean on these rules) */
[data-sandbox="index"] {
  & .sx-screen { min-height: 0; padding: 0; border-radius: 12px / 15px; }
  & .sx-screen::before { z-index: 3; }

  /* ── the glass: the roll, drawn 1:1 ── */
  & .sx-glass { position: absolute; inset: 0; display: flex; flex-direction: column; }
  & .sx-scroll {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--sx-ph-dim) transparent;
    container: sxg / inline-size;
    background: linear-gradient(rgba(166, 245, 154, .04) 1px, transparent 1px) 0 0 / 100% 48px;   /* the graticule */
  }
  & .sx-scroll:focus-visible { outline: 2px solid var(--color-amber); outline-offset: -4px; }
  & .sx-scroll-in { display: flex; flex-direction: column; min-height: 100%; padding: 12px clamp(12px, 2.6cqi, 24px) 8px; }
  & .sx-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 16px; margin-bottom: 6px; }
  & .sx-h1 { margin: 0; font: 700 clamp(24px, 4.4cqi, 32px)/1.05 var(--font-term); letter-spacing: .03em; color: var(--sx-ph-hi); text-shadow: 0 0 8px rgba(140, 255, 120, .35); }
  & .sx-h1-n { color: var(--sx-ph); }
  & .sx-cap0 { margin: 0; font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term); letter-spacing: .14em; text-transform: uppercase; color: var(--sx-ph); }

  /* a lane: few lanes share the glass's height (taller traces), many stay thin (--sx-n: the count) */
  & .sx-lanes { --sx-row: 50px; list-style: none; margin: 0; padding: 0; }
  & .sx-lane { position: relative; border-bottom: 1px dashed var(--sx-ph-faint); }
  & .sx-lane::before {   /* the lane's ground: the project's own when it is lit or picked */
    content: "";
    position: absolute;
    inset: 0 -10px;
    z-index: -1;
    border-radius: 3px;
    background: rgba(166, 245, 154, .06);
    opacity: 0;
  }
  & .sx-lane[data-look="wahori"]::before { background: var(--sx-w-ink); box-shadow: inset 0 0 0 1px rgba(200, 107, 74, .5); }
  & .sx-lane:is(:hover, :focus-within, .sx-armed, .sx-hot)::before { opacity: 1; }
  & .sx-lane:is(:hover, :focus-within, .sx-armed, .sx-hot) .sx-lock { opacity: 1; }
  & .sx-lane:is(:hover, :focus-within, .sx-armed, .sx-hot) .sx-seg { opacity: .18; }
  & .sx-lane:is(:hover, :focus-within, .sx-armed, .sx-hot) .sx-trig { opacity: 1; transform: none; }
  & .sx-name {
    display: grid;
    grid-template-columns: var(--sx-lab) minmax(0, 1fr);
    align-items: center;
    min-height: var(--sx-row);
    color: inherit;
    text-decoration: none;
  }
  & .sx-lab { display: grid; gap: 3px; min-width: 0; padding: 6px 12px 6px 0; }
  & .sx-l1 { display: flex; align-items: baseline; gap: 0; min-width: 0; }
  & .sx-l1 .sx-n { width: 38px; }
  & .sx-name .sx-wm { text-decoration: underline; text-decoration-color: rgba(166, 245, 154, .35); text-underline-offset: 4px; }
  & [data-look="wahori"] .sx-name .sx-wm { text-decoration: none; }
  & .sx-name:hover .sx-wm { text-decoration-color: currentColor; }
  & .sx-trig { flex: none; margin-left: 8px; color: var(--sx-amber); font-size: max(var(--fs-floor, 0px), 12px); opacity: 0; transform: translateX(-4px); }
  & .sx-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 5px; font: max(var(--fs-floor, 0px), 12px)/1.45 var(--font-term); letter-spacing: -.01em; color: var(--sx-ph-dim); }
  & .sx-meta .sx-st { color: var(--sx-ph); font-weight: 700; letter-spacing: .04em; }
  & .sx-meta .sx-unc { margin-left: 0; color: var(--sx-ph); }
  & .sx-name > .sx-strip { grid-column: 2; grid-row: 1; height: calc(var(--sx-row) - 18px); }
  & .sx-none {   /* a lane with nothing dated: said on its dead line */
    position: relative;
    z-index: 1;
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
    margin-left: 12px;
    padding: 2px 8px;
    background: #061006;
    font: max(var(--fs-floor, 0px), 12px)/1.4 var(--font-term);
    color: var(--sx-ph-dim);
  }
  /* the last update, written at the last pip, over the run to now: its own link into the log */
  & .sx-last {
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--sx-lab) + (100% - var(--sx-lab)) * var(--sx-x) + 10px);
    max-width: calc((100% - var(--sx-lab)) * (1 - var(--sx-x)) - 18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 44px;
    color: var(--sx-ph);
    font: max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term);
    text-decoration: none;
  }
  & .sx-flip .sx-last { left: auto; right: calc((100% - var(--sx-lab)) * (1 - var(--sx-x)) + 10px); max-width: calc((100% - var(--sx-lab)) * var(--sx-x) - 18px); align-items: flex-end; text-align: right; }
  /* two lines at most: "last" and the date, then the title on one line (cut with an ellipsis; the
     link's name, its tooltip and the paper carry it whole) */
  & .sx-last > span { display: block; width: fit-content; max-width: 100%; padding: 0 5px; background: #061006; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .sx-last > .sx-lt1 { overflow: visible; }   /* the date is never cut */
  & .sx-k { letter-spacing: .12em; text-transform: uppercase; color: var(--sx-ph-dim); }
  & .sx-last time { font-weight: 700; color: var(--sx-amber); }
  & .sx-lt { text-decoration: underline; text-decoration-color: rgba(166, 245, 154, .4); text-underline-offset: 3px; }
  & a.sx-last:hover .sx-lt { text-decoration-color: currentColor; color: var(--sx-ph-hi); }
  & .sx-quiet :is(.sx-wm, .sx-meta .sx-st) { color: var(--sx-ph-dim); }
  & .sx-dead .sx-name .sx-wm { color: var(--sx-ph); }

  & .sx-foot { display: grid; gap: 6px; padding: 10px 0 2px; margin-top: auto; }
  & .sx-caps { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 2px 2ch; margin: 0; font: 700 max(var(--fs-floor, 0px), 12px)/1.35 var(--font-term); letter-spacing: .1em; text-transform: uppercase; color: var(--sx-ph-dim); }
  & .sx-key { display: flex; flex-wrap: wrap; gap: 2px 16px; margin: 0; font: max(var(--fs-floor, 0px), 12px)/1.5 var(--font-term); color: var(--sx-ph-dim); }
  & .sx-key > span { display: inline-flex; align-items: center; gap: 6px; }
  & .sx-key i { display: inline-block; flex: none; }
  & .sx-key-seg { width: 18px; border-top: 1.5px solid var(--sx-ph); }
  & .sx-key-tail { width: 18px; border-top: 1.5px dotted var(--sx-ph-dim); }
  & .sx-key-pip { width: 7px; height: 7px; border-radius: 50%; background: var(--sx-amber); }
  & .sx-key .sx-unc { margin-left: 0; color: var(--sx-ph); }
  & .sx-key .sx-uv { color: var(--sx-ph); }

  & .sx-band {
    position: relative;
    z-index: 1;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 32px;
    padding: 0 clamp(12px, 2.6cqi, 24px);
    border-top: 1px solid var(--sx-ph-faint);
    background: rgba(3, 8, 3, .55);
    font: max(var(--fs-floor, 0px), 12px)/1.2 var(--font-term);
    letter-spacing: .08em;
    color: var(--sx-ph-dim);
  }
  & .sx-band p { margin: 0; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
  & .sx-band-tr { width: 44px; height: 12px; }
  & .sx-band-tr path { fill: none; stroke: var(--sx-ph); stroke-width: 1.4; }
  & .sx-band-c { color: var(--sx-ph); }

  /* a narrow glass: each lane stacks (name and counts, the trace across, the last update) */
  @container sxg (max-width: 470px) {
    & .sx-ruler { grid-template-columns: 38px minmax(0, 1fr); }
    & .sx-ru-k { padding-left: 0; }
    & .sx-tk-r, & .sx-tk-late > span { display: none; }
    & .sx-tk-i { display: inline; }
    & .sx-tk-late > .sx-tk-i { display: none; }
    & .sx-name { grid-template-columns: minmax(0, 1fr); padding-bottom: 4px; }
    & .sx-name > .sx-strip { grid-column: 1; grid-row: 2; height: 28px; margin-left: 38px; }
    & .sx-none { grid-column: 1; grid-row: 2; margin-left: 50px; }
    & .sx-last, & .sx-flip .sx-last { position: relative; left: auto; right: auto; max-width: none; align-items: flex-start; text-align: start; padding: 0 0 6px 33px; }
    & .sx-head { flex-direction: column; align-items: flex-start; }
  }
  @container sxg (min-width: 471px) and (max-width: 640px) {
    & .sx-tk-r { display: none; }
    & .sx-tk-i { display: inline; }
  }
  /* a glass too narrow to write the last update over the run to now: it goes under the trace, on
     one line */
  @container sxg (min-width: 471px) and (max-width: 680px) {
    & .sx-lane:has(.sx-last) { padding-bottom: 40px; }
    & .sx-last, & .sx-flip .sx-last { top: auto; bottom: 0; left: var(--sx-lab); right: 0; max-width: none; min-height: 44px; flex-direction: row; align-items: center; column-gap: 8px; text-align: start; }
    & .sx-last > span { padding: 0; min-width: 0; }
    & .sx-lt1 { flex: none; }
  }
  @media (max-width: 560px) {
    & .sx-band .sx-band-sig { display: none; }
  }
  /* a short desktop view: the lanes come first */
  @media (min-width: 900px) and (max-height: 820px) {
    & .sx-head { margin-bottom: 2px; }
    & .sx-h1 { font-size: 24px; }
    & .sx-scroll-in { padding-top: 8px; }
  }
}

/* (A2) THE LAB (.sx-lab, the real index; the round 4 merge on p6 "THE WHOLE LAB, polished", with
   p7's wider scene and lane height and p8's cursors). The camera pulls back until /sandbox is the
   entire bench, and every object carries a real field: the CH 2 scope in roll mode (the hero); the
   printer's hardcopy over the bench's edge; the patch bay (on the bench's front apron at 1100px and
   up); the pegboard with each project's corner (its questions and asks on hooks, the CH 2 captions
   as its legend); the stage chart taped to the wall; the taped card with the Sandbox's own words.
   THE SCOPE'S GLASS is the project page's glass at its end state times --sx-k (its numbers mirrored
   as --sx-*): the same aspect, so the pick is one uniform push (sandbox.js).
   AMBIENT MOTION (/sandbox only; sandbox-index-brief.md ROUND 4): transform/opacity keyframes, slow
   and sparse, inside prefers-reduced-motion: no-preference, each on a [data-amb] element that
   sandbox.js switches on (data-amb-on) while it is on screen and the tab is visible; the rule below
   pauses the rest. No JS: none runs. */
[data-sandbox="index"].sx-lab [data-amb]:not([data-amb-on]),
[data-sandbox="index"].sx-lab [data-amb]:not([data-amb-on]) * { animation-play-state: paused !important; }
[data-sandbox="index"].sx-lab {
  /* ── the project page's camera numbers (sandbox.css [data-sandbox="project"] --sb-*), mirrored ── */
  --sx-a: 1.8;                              /* its zoom */
  --sx-m: clamp(8px, 1.6vw, 30px);          /* wall round the zoomed monitor */
  --sx-pbz: 22px;                           /* its side bezel, scene px */
  --sx-pbay: 56px;                          /* its channel strip, screen px */
  --sx-pchin: 64px;                         /* its chin, screen px */
  --sx-hd: calc(var(--hdr) + 1px);
  /* its glass at the end state, on screen: the push's target */
  --sx-ew: calc(100vw - 2 * var(--sx-m) - 2 * var(--sx-a) * var(--sx-pbz));
  --sx-eh: calc(100svh - var(--sx-hd) - 2 * var(--sx-m) - var(--sx-pbay) - var(--sx-pchin));
  /* ── this scope: the same glass, k times (the camera pulled back) ── */
  --sx-k: .55;
  --sx-gw: calc(var(--sx-k) * var(--sx-ew));
  --sx-gh: calc(var(--sx-k) * var(--sx-eh));
  --sx-sbz: 12px;                           /* its side bezels */
  --sx-stop: 30px;                          /* its top strip */
  --sx-schin: 36px;                         /* its chin: keys, probe, LED */
  --sx-sw: calc(var(--sx-gw) + 2 * var(--sx-sbz));
  --sx-sh: calc(var(--sx-gh) + var(--sx-stop) + var(--sx-schin));
  --sx-top: 18px;                           /* the bench top's edge */
  --sx-front: clamp(118px, 19svh, 200px);   /* the bench's front, to the view's foot (the hardcopy's length) */
  --sx-gap: clamp(20px, 2.6vw, 44px);
  --sx-gear-h: clamp(150px, 24svh, 230px);  /* the gear on the bench (bay, printer) at most */
  --sx-tag: #ead9a4;                        /* manila tags */
  --sx-tag-ink: #2a2a24;
  --sx-board: #6e5236;                      /* the pegboard's hardboard */
  --sx-gap-ink: #5f6058;                    /* the hardcopy's day gaps: 5.6:1 on its paper */
  --sx-curs-h: 0px;                         /* the cursor row under the roll, off the lanes' share (shown: below) */
  @media (min-width: 900px) and (min-height: 800px) { --sx-curs-h: 30px; }
  --sx-scenemax: 1880px;                    /* the scene's widest (past --wallmax: the lab fills 1920) */
  --sx-prw: clamp(232px, 21vw, 330px);     /* the printer (and its hardcopy) on the bench */
  --sx-patchw: clamp(270px, 22vw, 380px);     /* the patch bay on the bench's front (>=1100) */
  @media (max-width: 1099px) { --sx-a: 1.9; --sx-k: .54; }
  @media (min-width: 1600px) { --sx-k: .53; }
  @media (max-width: 899px) { --sx-a: 1.08; --sx-k: .62; }
  @media (max-width: 760px) { --sx-pbz: 10px; --sx-pbay: 52px; --sx-pchin: 58px; --sx-k: .86; --sx-sbz: 9px; }

  max-width: none;
  width: 100%;
  margin: 0;
  padding-bottom: 0;
  position: relative;
  overflow: clip;
  @media (min-width: 900px) { flex: 1 1 0; min-height: 0; height: 100%; }

  & :focus-visible { outline: 2px solid var(--color-amber); outline-offset: 2px; }
  & .sx-view { position: relative; @media (min-width: 900px) { height: 100%; } }

  /* ════════════ the scene: the camera's one transform (sandbox.js) ════════════ */
  & .sx-scene {
    position: relative;
    display: grid;
    grid-template-columns: var(--sx-sw) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) var(--sx-sh) var(--sx-top) var(--sx-front);
    column-gap: var(--sx-gap);
    max-width: calc(var(--sx-scenemax) - 2 * var(--pad));   /* wider than the wall column: no bare wall at 1920 */
    height: 100%;
    margin: 0 auto;
    transform-origin: 0 0;
  }
  & .sx-backlight {   /* the work light on the wall behind the bench (one light: top left) */
    grid-area: 1 / 1 / 3 / 3;
    margin: -40px -60px 0;
    pointer-events: none;
    background: radial-gradient(ellipse 60% 70% at 32% 30%, rgba(255, 222, 160, .07), transparent 70%);
  }

  /* ════════════ the scope: the CH 2 scope in roll mode ════════════ */
  & .sx-scope-w { position: relative; grid-area: 2 / 1; z-index: 2; width: var(--sx-sw); height: var(--sx-sh); }
  & .sx-halo { inset: -18% -12%; }
  & .sx-scope {
    position: relative;
    width: 100%;
    height: 100%;
    padding: var(--sx-stop) var(--sx-sbz) var(--sx-schin);
    border-radius: 16px;
  }
  & .sx-scope::after { display: none; }   /* room.css's power LED: this one has its own */
  & .sx-sc-top, & .sx-chin {
    position: absolute;
    left: var(--sx-sbz);
    right: var(--sx-sbz);
    display: flex;
    align-items: center;
    gap: 10px;
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    white-space: nowrap;
    overflow: hidden;
  }
  & .sx-sc-top { top: 0; height: var(--sx-stop); letter-spacing: .12em; color: var(--color-ink); }
  & .sx-sc-jack { flex: none; width: 15px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #111311 0 28%, var(--color-steel-hi) 31% 46%, var(--color-steel) 50%, var(--color-steel-lo) 70%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .5), 1px 2px 3px rgba(0, 0, 0, .35); }
  & .sx-sc-ch { display: inline-flex; gap: 6px; align-items: center; }
  & .sx-sc-ch b { background: var(--color-ink); color: var(--color-plastic); padding: 2px 5px; border-radius: 2px; }
  & .sx-sc-ch span { color: #4f4c41; font-weight: 400; letter-spacing: .04em; }
  & .sx-sc-mode { padding: 1px 5px; border: 1.5px solid var(--color-stamp-red); color: var(--color-stamp-red); border-radius: 2px; text-transform: uppercase; }
  & .sx-sc-n { margin-left: auto; color: #4f4c41; text-transform: uppercase; }
  & .sx-chin { bottom: 0; height: var(--sx-schin); letter-spacing: .16em; color: #4f4c41; }
  & .sx-keys { display: inline-flex; gap: 5px; }
  & .sx-keys i {
    display: inline-grid;
    place-items: center;
    width: 22px;
    aspect-ratio: 1;
    font-style: normal;
    letter-spacing: 0;
    color: var(--color-ink);
    background: linear-gradient(180deg, #ece5cf, #c4bb9f);
    border-radius: 3px;
    box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .7), 0 1px 0 #8e8469, 0 2px 3px rgba(0, 0, 0, .28);
  }
  & .sx-keys i.sx-on { background: linear-gradient(180deg, #c9c0a4, #ddd5bc); box-shadow: inset 0 2px 3px rgba(0, 0, 0, .35); }
  & .sx-probe { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; letter-spacing: .14em; }
  & .sx-probe i { width: 15px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #0b0e0b 35%, var(--color-steel-hi) 40%, var(--color-steel-lo)); }
  & .sx-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--color-power-led); box-shadow: 0 0 7px var(--color-power-led); }
  /* the probe's cable, parked: down from the probe, over the bench's edge */
  & .sx-cable {
    position: absolute;
    right: calc(var(--sx-sbz) + 50px);
    bottom: -24px;
    width: 4px;
    height: 34px;
    background: linear-gradient(90deg, #121412, var(--color-cable) 45%, #121412);
    border-radius: 0 0 3px 3px;
    pointer-events: none;
  }
  & .sx-scene.sx-corded .sx-cable { opacity: 0; }

  /* the glass: sandbox.css draws the roll (sx-*); here its size and its rows */
  & .sx-screen { position: relative; flex: 1 1 auto; width: var(--sx-gw); height: var(--sx-gh); min-height: 0; padding: 0; border-radius: 10px / 13px; overflow: hidden; }
  & .sx-screen::before { z-index: 3; }
  /* few lanes share the glass (taller traces, no dead graticule under them); many stay thin and scroll */
  & .sx-scroll .sx-lanes { --sx-row: clamp(44px, calc((var(--sx-gh) - 168px - var(--sx-curs-h)) / var(--sx-n, 4)), 150px); }
  & .sx-scroll { --sx-lab: clamp(200px, 40cqi, 300px); }
  /* few lanes are tall: the last update's title may take a second line instead of being cut */
  & .sx-scroll.sx-few .sx-last > span:not(.sx-lt1) { white-space: normal; text-overflow: clip; overflow: visible; }
  & .sx-scroll .sx-scroll-in { padding-top: 10px; }
  /* the lanes take whatever the glass has left over (no dead graticule band under a short list) */
  @media (min-width: 900px) {
    & .sx-scroll .sx-lanes { flex: 1 0 auto; display: flex; flex-direction: column; }
    & .sx-scroll .sx-lane { flex: 1 0 auto; display: flex; flex-direction: column; }
    & .sx-scroll .sx-lane > .sx-name { flex: 1 0 auto; }
  }
  & .sx-scroll .sx-h1 { font-size: clamp(22px, 4.2cqi, 30px); }
  & .sx-scroll .sx-foot { padding-top: 8px; }
  & .sx-scroll .sx-key { gap: 0 14px; }
  /* the cursors under the roll: A on the newest update, B on now, the time between. Only on a view
     900px wide and 800px tall or more, on a glass wider than 680px (where a lane is one row): on a
     phone's glass, a short desktop's or a narrower one they would push the key out of view. */
  & .sx-curs { display: none; }
  @media (min-width: 900px) and (min-height: 800px) { & .sx-curs { display: flex; } }
  @container sxg (max-width: 680px) { & .sx-curs { display: none; } & .sx-lanes { --sx-curs-h: 0px; } }
  & .sx-curs { flex-wrap: wrap; align-items: baseline; gap: 2px 18px; margin: 0 0 2px; padding-top: 6px; border-top: 1px dashed var(--sx-ph-faint); font: max(var(--fs-floor, 0px), 12px)/1.5 var(--font-term); color: var(--sx-ph); }
  & .sx-curs-k { letter-spacing: .14em; text-transform: uppercase; color: var(--sx-ph-dim); }
  & .sx-curs-c b { display: inline-block; min-width: 1.6em; margin-right: 4px; padding: 0 3px; border: 1px solid currentColor; border-radius: 2px; font-weight: 700; text-align: center; }
  & .sx-curs-c time { color: var(--sx-ph-hi); }
  & .sx-curs-d, & .sx-curs-d b { color: var(--color-amber); }
  & .sx-screen .sx-band { min-height: 28px; }
  /* the sweep: the roll writing to now, a beam crossing the glass (ambient) */
  /* the write head: it crosses the timebase only (the strips, right of the lanes' labels) to now */
  & .sx-screen { container: sxscr / inline-size; }
  & .sx-sweep {
    position: absolute;
    top: 0;
    bottom: 28px;
    left: calc(clamp(12px, 2.6cqi, 24px) + clamp(200px, 40cqi, 300px));
    right: clamp(12px, 2.6cqi, 24px);
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    @media (max-width: 899px) { left: 0; right: 0; }   /* one column: the strips run under the labels */
  }
  & .sx-sweep > i { position: absolute; inset: 0; opacity: 0; }

  /* ════════════ the bench ════════════ */
  & .sx-benchtop {
    grid-area: 3 / 1 / 4 / 3;
    z-index: 1;
    margin: 0 calc(50% - 50vw);
    background: linear-gradient(180deg, var(--color-wood-hi) 0%, var(--color-wood) 55%, #3f2b1b 100%);
    border-radius: 3px 3px 0 0;
    box-shadow: 0 10px 22px rgba(0, 0, 0, .55);
  }
  & .sx-front {
    grid-area: 4 / 1 / 5 / 3;
    margin: 0 calc(50% - 50vw);
    background:
      linear-gradient(180deg, rgba(0, 0, 0, .6), rgba(0, 0, 0, 0) 18px),
      linear-gradient(90deg, transparent 0 calc(50vw - 50% - 40px), #2c1e12 calc(50vw - 50% - 40px) calc(50vw - 50% - 8px), rgba(0, 0, 0, .55) calc(50vw - 50% - 8px) calc(50vw - 50% - 4px), transparent calc(50vw - 50% - 4px)),
      repeating-linear-gradient(90deg, rgba(255, 230, 190, .025) 0 2px, transparent 2px 11px, rgba(0, 0, 0, .05) 11px 13px, transparent 13px 23px),
      linear-gradient(180deg, #3b2818, #24180e 85%, #1b120a);
  }

  /* the gear on the bench, right of the scope: the patch bay and the printer */
  & .sx-right { grid-area: 1 / 2 / 3 / 3; display: flex; flex-direction: column-reverse; min-width: 0; min-height: 0; }
  & .sx-gear {
    flex: none;
    position: relative;
    z-index: 3;
    display: flex;
    align-items: flex-end;
    max-height: var(--sx-gear-h);
    gap: clamp(14px, 2vw, 30px);
    min-width: 0;
  }

  /* ── the patch bay: one jack per project (the cord's target) ── */
  & .sx-patch {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 360px;
    max-height: var(--sx-gear-h);
    overflow-y: auto;
    scrollbar-width: none;
    padding: 12px 14px 12px;
    background: linear-gradient(180deg, var(--color-steel-hi), var(--color-steel) 40%, var(--color-steel-lo));
    border-radius: 6px 6px 3px 3px;
    box-shadow: var(--sh);
    font: 700 max(var(--fs-floor, 0px), 12px)/1.2 var(--font-term);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-ink);
  }
  & .sx-patch-hd { display: block; }
  & .sx-patch ul { list-style: none; display: grid; gap: 6px; margin: 8px 0 0; padding: 0; }
  & .sx-patch ul:has(> li:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; }
  & .sx-patch li { display: flex; min-width: 0; }
  & .sx-patch a { display: flex; align-items: center; gap: 8px; min-width: 0; min-height: 44px; color: inherit; text-decoration: none; }
  & .sx-patch li i { flex: none; width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle, #0b0e0b 35%, var(--color-steel-hi) 40%, var(--color-steel-lo)); transition: box-shadow var(--fast) var(--ease); }
  & .sx-tape { display: grid; gap: 2px; min-width: 0; background: rgba(232, 220, 178, .93); padding: 4px 8px 3px; }
  & .sx-tape b { overflow-wrap: anywhere; }
  & .sx-tape-n { color: #4f4c41; letter-spacing: .06em; }
  & .sx-tape-tbd { padding: 0 3px; background: var(--color-ink); color: rgba(232, 220, 178, .93); }
  & .sx-tape em { font-style: normal; color: var(--color-stamp-red); }
  & .sx-tape em.sx-tape-q { color: #4f4c41; }
  & .sx-patch ul:has(> li:nth-child(4)) .sx-tape-q { display: none; }
  & .sx-patch li.sx-hot .sx-tape { box-shadow: 0 0 0 2px var(--color-amber); }
  & .sx-patch li.sx-hot i { box-shadow: 0 0 0 3px rgba(255, 191, 63, .55); }
  & .sx-patch li.sx-lit i { box-shadow: 0 0 0 4px var(--color-cable), 0 0 10px var(--color-power-led); }
  & .sx-patch li.sx-capped { align-items: center; min-height: 32px; }
  & .sx-patch li.sx-capped i { background: radial-gradient(circle at 40% 35%, #4a4f4b, #262927 70%); box-shadow: inset 0 -2px 2px rgba(0, 0, 0, .5); }
  & .sx-patch ul:has(> .sx-capped) { grid-template-columns: repeat(4, 18px); gap: 14px; }

  /* ── the printer and its hardcopy over the bench's edge ── */
  & .sx-printer { position: relative; flex: none; width: var(--sx-prw); min-width: 0; }
  & .sx-pr {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    align-content: flex-start;
    min-height: clamp(58px, 7.5svh, 84px);
    padding: 10px 14px 24px;
    background: linear-gradient(170deg, var(--color-plastic) 0%, var(--color-plastic) 50%, var(--color-plastic-lo) 100%);
    border-radius: 9px 9px 4px 4px;
    box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .4), inset -2px -3px 0 rgba(0, 0, 0, .18), var(--sh-s);
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #4f4c41;
    white-space: nowrap;
  }
  & .sx-pr::after {   /* the paper slot on its front */
    content: "";
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    height: 6px;
    border-radius: 3px;
    background: #2a2a24;
    box-shadow: inset 0 2px 2px rgba(0, 0, 0, .6);
  }
  & .sx-pr-led { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #3c403d; }
  & .sx-pr-led.sx-pr-on { background: var(--color-power-led); box-shadow: 0 0 6px var(--color-power-led); }
  /* the paper's lip in the slot: it creeps out while there is hardcopy (ambient) */
  & .sx-lip { position: absolute; left: 22px; right: 22px; bottom: 12px; height: 5px; z-index: 1; background: #f3f0e6; border-radius: 1px; }
  & .sx-paper {
    position: absolute;
    left: 20px;
    right: 20px;
    top: calc(100% - 16px);
    z-index: 1;
    height: calc(var(--sx-top) + var(--sx-front) + 8px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #9a958a transparent;
    background: linear-gradient(90deg, rgba(0, 0, 0, .06), transparent 7%, transparent 93%, rgba(0, 0, 0, .06)), #f3f0e6;
    color: var(--color-ink);
    box-shadow: 0 8px 14px rgba(0, 0, 0, .5);
  }
  & .sx-paper-in { padding: 18px 12px 0; font: max(var(--fs-floor, 0px), 12px)/1.45 var(--font-term); }
  & .sx-paper-h { display: flex; justify-content: space-between; margin: 0 0 2px; padding-bottom: 5px; border-bottom: 1.5px dashed rgba(29, 35, 32, .45); font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term); letter-spacing: .16em; text-transform: uppercase; }
  & .sx-feed { list-style: none; margin: 0; padding: 0; }
  & .sx-feed li { border-bottom: 1px dashed rgba(29, 35, 32, .25); }
  & .sx-feed li:last-child { border-bottom: 0; }
  & .sx-feed a { display: grid; gap: 1px; min-height: 44px; padding: 5px 0; color: inherit; text-decoration: none; }
  & .sx-f1 { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: #4a4e48; }
  & .sx-f1 time { font-weight: 700; color: var(--color-ink); }
  & .sx-fk { text-transform: uppercase; letter-spacing: .1em; }
  & .sx-new { padding: 0 4px; background: var(--color-ink); color: var(--color-paper); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
  & .sx-new[hidden] { display: none; }
  & .sx-f2 { text-decoration: underline; text-decoration-color: rgba(31, 76, 156, .4); text-underline-offset: 3px; }
  & .sx-fp[data-look="wahori"] { font: italic 400 15px/1 "sb Fraunces", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; text-transform: lowercase; color: var(--sx-w-ink); }
  & .sx-feed a:hover .sx-f2 { color: var(--color-pen-blue); text-decoration-color: currentColor; }
  & .sx-feed a:focus-visible { outline-color: var(--color-pen-blue); outline-offset: -2px; }
  & .sx-paper-none { margin: 6px 0 4px; }
  /* the printer's face reads the line it is on: today (the page's clock), the next entry [TBD], the
     print head waiting (on the face, so the hardcopy shows its entries from its top) */
  & .sx-today { flex: 0 0 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; margin: 7px 0 0; font: max(var(--fs-floor, 0px), 12px)/1.4 var(--font-term); letter-spacing: 0; text-transform: none; white-space: normal; color: var(--color-ink); }
  & .sx-today time { font-weight: 700; }
  & .sx-prhead { display: inline-block; width: 8px; height: 14px; align-self: center; }
  & .sx-prhead > i { display: block; width: 100%; height: 100%; background: var(--color-ink); opacity: .75; }
  /* the days between two lines, in the gutter (derived from their dates) */
  & .sx-gap { display: flex; align-items: center; gap: 8px; padding: 1px 0; font: max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term); color: var(--sx-gap-ink); letter-spacing: .04em; }
  & .sx-gap::before, & .sx-gap::after { content: ""; flex: 1 1 auto; border-top: 1px dotted rgba(29, 35, 32, .4); }
  & .sx-gap::before { flex: 0 0 10px; }
  & .sx-tear {
    height: 10px;
    margin: 6px -12px 0;
    background:
      linear-gradient(135deg, #f3f0e6 5px, transparent 0) 0 0 / 10px 10px repeat-x,
      linear-gradient(225deg, #f3f0e6 5px, transparent 0) 0 0 / 10px 10px repeat-x;
  }

  /* ── >=1100: the patch bay is screwed to the bench's front apron, between the card and the hardcopy;
        the gear on the bench top is the printer alone (the pegboard gets the height) ── */
  @media (min-width: 1100px) {
    & .sx-gear { position: static; justify-content: flex-end; }
    & .sx-printer { z-index: 3; }
    & .sx-patch {
      position: absolute;
      z-index: 3;
      top: calc(100% - var(--sx-front) + clamp(10px, 1.6svh, 20px));
      right: calc(var(--sx-prw) + clamp(26px, 3vw, 54px));
      width: var(--sx-patchw);
      max-width: none;
      max-height: calc(var(--sx-front) - clamp(10px, 1.6svh, 20px) - 10px);
      border-radius: 3px;
      box-shadow: 0 6px 12px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .35);
    }
    & .sx-patch::before, & .sx-patch::after {   /* its screws */
      content: "";
      position: absolute;
      top: 7px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: radial-gradient(circle at 35% 35%, #e9ece8, #7d837f 60%, #4b504d);
      box-shadow: 0 1px 1px rgba(0, 0, 0, .5);
    }
    & .sx-patch::before { left: 7px; }
    & .sx-patch::after { right: 7px; }
    & .sx-patch-hd { padding: 0 8px; }
    & .sx-patch ul { grid-template-columns: repeat(auto-fill, minmax(min(100%, 118px), 1fr)); gap: 4px 10px; }
    & .sx-patch ul:has(> .sx-capped) { grid-template-columns: repeat(4, 18px); gap: 14px; }
  }

  /* ════════════ the pegboard: each project's corner, its questions and asks on hooks ════════════ */
  & .sx-peg {
    flex: 1 1 auto;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 4px 0 -48px;
    padding: 12px 10px 58px 14px;
    border: 7px solid #4a3523;
    border-bottom: 0;
    border-radius: 4px;
    background:
      radial-gradient(circle at 9px 9px, rgba(0, 0, 0, .42) 0 2.2px, transparent 2.6px) 0 0 / 18px 18px,
      linear-gradient(160deg, #7a5c3e, var(--sx-board) 55%, #5d442c);
    box-shadow: var(--sh), inset 0 0 0 1px rgba(255, 240, 210, .08);
  }
  & .sx-peg-h {
    flex: none;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 2px 18px;
    margin: 0 4px 8px 0;
    font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term);
    letter-spacing: .14em;
    text-transform: uppercase;
  }
  & .sx-peg-k { padding: 5px 10px 4px; background: rgba(232, 220, 178, .93); color: var(--color-tape-ink); box-shadow: var(--sh-s); transform: rotate(-1.2deg); }
  /* the board's legend: the CH 2 captions say what each kind of tag is for (one line each) */
  & .sx-peg-top { flex: none; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 6px 18px; margin: 6px 4px 10px 0; }
  & .sx-peg-top .sx-peg-h { position: absolute; z-index: 2; top: -15px; left: 12px; margin: 0; }
  & .sx-legend { list-style: none; display: grid; gap: 3px; margin: 0; padding: 5px 10px 5px 8px; background: rgba(28, 20, 12, .55); border-radius: 2px; font: max(var(--fs-floor, 0px), 12px)/1.35 var(--font-term); color: rgba(244, 239, 226, .9); }
  & .sx-legend li { display: flex; align-items: center; gap: 7px; }
  & .sx-legend b { font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 239, 226, .66); min-width: 9.5ch; }
  & .sx-swatch { flex: none; width: 16px; height: 10px; clip-path: polygon(4px 0, 100% 0, 100% 100%, 4px 100%, 0 calc(100% - 4px), 0 4px); }
  & .sx-swatch-q { background: var(--sx-tag); }
  & .sx-swatch-a { background: #f6f1e3; box-shadow: inset 2px 0 0 var(--color-stamp-red); }
  & .sx-peg-in {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 14px 22px;
    padding: 4px 8px 8px 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #c9b48f transparent;
  }
  & .sx-peg:not(.sx-peg-more) .sx-peg-fade { display: none; }
  & .sx-peg-fade { position: absolute; left: 14px; right: 10px; bottom: 58px; height: 26px; z-index: 2; pointer-events: none; background: linear-gradient(180deg, rgba(94, 70, 46, 0), rgba(94, 70, 46, .85)); }
  & .sx-corner { position: relative; flex: 1 1 200px; min-width: 0; max-width: 100%; display: flex; flex-direction: column; gap: 6px; container: sxc / inline-size; }
  & .sx-corner-big { flex: 2.4 1 340px; }
  /* a wide corner hangs its question tags in two columns, a small one its two rows side by side */
  @container sxc (min-width: 440px) {
    & .sx-corner-big .sx-hrow-q .sx-tags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; }
    & .sx-corner-big .sx-hrow-q .sx-tags > li > .sx-tag { width: 100%; }
    & .sx-corner:not(.sx-corner-big) .sx-hooks { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 26px; }
  }
  & .sx-c-hd {
    display: flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    max-width: 100%;
    margin: 0;
    padding: 6px 12px 5px;
    background: rgba(232, 220, 178, .95);
    color: var(--color-tape-ink);
    box-shadow: var(--sh-s);
    transform: rotate(-.8deg);
    font: 700 13px/1.2 var(--font-term);
  }
  & .sx-c-n { flex: none; color: #4f4c41; font-size: max(var(--fs-floor, 0px), 12px); letter-spacing: .06em; }
  & .sx-c-hd .sx-wm { color: var(--color-ink); font-size: 14px; text-decoration: none; overflow-wrap: anywhere; }
  & .sx-corner[data-look="wahori"] .sx-c-hd { background: var(--sx-w-paper); box-shadow: var(--sh-s), inset 0 -2px 0 var(--sx-w-terra); }
  & .sx-corner[data-look="wahori"] .sx-c-hd .sx-wm-n { font-size: 24px; color: var(--sx-w-ink); }
  & .sx-corner[data-look="wahori"] .sx-c-hd .sx-wm-sub { color: var(--sx-w-deep); font-weight: 600; }
  & .sx-c-led { flex: none; width: 8px; height: 8px; margin-left: 2px; border-radius: 50%; background: #3c403d; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .5); }
  & .sx-c-led.sx-c-live { background: var(--color-power-led); box-shadow: 0 0 7px var(--color-power-led); }
  /* what it is (its OneLiner; dashed while not confirmed) in the project's own body face */
  & .sx-c-what { margin: 0; max-width: 62ch; font: 13px/1.45 var(--font-term); color: rgba(244, 239, 226, .92); text-shadow: 0 1px 0 rgba(0, 0, 0, .55); }
  & .sx-corner[data-look="wahori"] .sx-c-what { font: 400 14.5px/1.4 "sb Figtree", system-ui, sans-serif; }
  & .sx-c-what .sx-uv { text-decoration-color: rgba(244, 239, 226, .45); }
  & .sx-c-what .sx-unc { color: rgba(244, 239, 226, .9); font-family: var(--font-term); }
  & .sx-c-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0 14px;
    margin: 0;
    font: max(var(--fs-floor, 0px), 12px)/1.6 var(--font-term);
    color: rgba(244, 239, 226, .9);
    text-shadow: 0 1px 0 rgba(0, 0, 0, .55);
  }
  & .sx-c-meta b { color: var(--color-amber); font-weight: 700; }
  & .sx-c-meta time { color: rgba(244, 239, 226, .9); }
  & .sx-c-meta a { color: inherit; display: inline-block; min-height: 44px; }
  & .sx-hooks { display: grid; gap: 6px; }
  & .sx-hrow { display: grid; gap: 5px; }
  /* the asks: their label beside them (one row) */
  & .sx-hrow-a { grid-template-columns: max-content minmax(0, 1fr); align-items: start; column-gap: 12px; }
  & .sx-hrow-a > .sx-hrow-k { padding-top: 14px; }
  @container sxc (max-width: 299px) { & .sx-hrow-a { grid-template-columns: minmax(0, 1fr); } & .sx-hrow-a > .sx-hrow-k { padding-top: 0; } }
  & .sx-hrow-k { margin: 0; font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term); letter-spacing: .1em; text-transform: uppercase; color: rgba(244, 239, 226, .82); text-shadow: 0 1px 0 rgba(0, 0, 0, .5); }
  & .sx-hrow-k .sx-unc { margin-left: .5em; color: rgba(244, 239, 226, .9); }
  & .sx-hrow-k .sx-uv { text-decoration: underline dashed; text-underline-offset: 4px; }
  & .sx-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 10px; margin: 0; padding: 0; }
  & .sx-tags > li { display: flex; min-width: 0; max-width: 100%; transform: rotate(var(--sx-tilt, 0deg)); transform-origin: 14px 50%; }
  /* a tag: manila card, a reinforced hole and its string on the hook at its left */
  & .sx-tag {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 7px;
    min-width: 0;
    max-width: 100%;
    min-height: 44px;
    align-content: center;
    padding: 3px 12px 3px 26px;
    background: var(--sx-tag);
    color: var(--sx-tag-ink);
    font: max(var(--fs-floor, 0px), 12.5px)/1.35 var(--font-term);
    text-decoration: none;
    clip-path: polygon(10px 0, 100% 0, 100% 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
    filter: drop-shadow(2px 3px 2px rgba(0, 0, 0, .45));
    transform-origin: 14px 50%;
  }
  & .sx-tag::before {   /* the hole, reinforced */
    content: "";
    position: absolute;
    left: 9px;
    top: calc(50% - 5px);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--sx-board);
    box-shadow: 0 0 0 2.5px #c9b27a;
  }
  & a.sx-tag:hover { background: #f4e7bd; }
  & .sx-tag-k { font-weight: 700; letter-spacing: .06em; color: #6b4f16; }
  & .sx-tag-t { min-width: 0; overflow-wrap: anywhere; }
  & .sx-tag-in { display: block; min-width: 0; }
  & .sx-tag-q { display: flex; align-items: center; }
  & .sx-tag-q .sx-tag-k { margin-right: .3em; }
  & a.sx-tag .sx-tag-t { text-decoration: underline; text-decoration-color: rgba(42, 42, 36, .35); text-underline-offset: 3px; }
  & .sx-tag-a { background: #f6f1e3; box-shadow: inset 3px 0 0 var(--color-stamp-red); }
  & .sx-tag-a .sx-tag-k { color: var(--color-stamp-red); text-transform: uppercase; letter-spacing: .12em; }
  & .sx-tag-blank { color: #6d6a5c; }
  & .sx-tag-tbd { align-self: flex-start; }
  & .sx-corner[data-look="wahori"] .sx-tag-q { box-shadow: inset 0 -2px 0 rgba(154, 78, 51, .35); }
  & .sx-c-quiet { opacity: .78; }

  /* ════════════ the stage chart taped to the wall ════════════ */
  & .sx-chart {
    grid-area: 1 / 1;
    align-self: stretch;
    justify-self: stretch;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    margin: 10px 18px 16px 10px;
    padding: 12px 16px 10px;
    color: var(--color-ink);
    background:
      linear-gradient(rgba(31, 76, 156, .07) 1px, transparent 1px) 0 0 / 100% 16px,
      linear-gradient(90deg, rgba(31, 76, 156, .07) 1px, transparent 1px) 0 0 / 16px 100%,
      var(--color-paper);
    box-shadow: var(--sh-s);
    transform: rotate(-.5deg);
  }
  & .sx-chart::before, & .sx-chart::after {   /* masking tape at its top corners */
    content: "";
    position: absolute;
    top: -9px;
    width: 58px;
    height: 18px;
    background: rgba(232, 220, 178, .9);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
  }
  & .sx-chart::before { left: -12px; transform: rotate(-22deg); }
  & .sx-chart::after { right: -12px; transform: rotate(20deg); }
  & .sx-chart-h { flex: none; margin: 0 0 6px; font: 700 max(var(--fs-floor, 0px), 12px)/1.2 var(--font-term); letter-spacing: .18em; text-transform: uppercase; color: var(--color-ink-soft); }
  & .sx-chart-in { flex: 1 1 auto; min-height: 0; display: grid; grid-template-rows: minmax(64px, 1fr) auto; gap: 6px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  /* the track: idea -> graduated, left to right, each stage a column with its flags above its word */
  & .sx-climb {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    margin: 0;
    padding: 0;
    min-height: 0;
    border-bottom: 0;
  }
  /* the stairs: each stage a step up from the last, its word on its tread, its flags above */
  & .sx-rung { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 3px; min-width: 0; }
  & .sx-rung > * { flex-shrink: 0; }
  & .sx-climb .sx-flags { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; }
  & .sx-climb .sx-flag { white-space: nowrap; flex-wrap: nowrap; }
  & .sx-climb .sx-rung > .sx-flags { order: 1; padding: 0 3px; }
  & .sx-climb .sx-rung > .sx-rung-w { order: 3; padding: 3px 4px 0; }
  & .sx-climb .sx-rung::after {
    content: "";
    order: 2;
    flex: none;
    height: calc(var(--sx-step, 1) * 14%);
    min-height: calc(var(--sx-step, 1) * 6px);
    border-top: 2px solid rgba(31, 76, 156, .75);
    border-left: 2px solid rgba(31, 76, 156, .75);
    border-bottom: 2px solid var(--color-ink);
    background: repeating-linear-gradient(135deg, rgba(31, 76, 156, .09) 0 2px, transparent 2px 7px);
  }
  & .sx-climb .sx-rung-on::after { background: repeating-linear-gradient(135deg, rgba(31, 76, 156, .22) 0 2px, transparent 2px 6px); }
  & .sx-rung-w { display: block; font: 700 max(var(--fs-floor, 0px), 12px)/1.2 var(--font-term); letter-spacing: .04em; color: var(--color-ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  & .sx-rung-on > .sx-rung-w { color: var(--color-ink); }
  & .sx-chart-side { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px 18px; }
  & .sx-side { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
  & .sx-side .sx-rung { flex-direction: row; align-items: center; border-left: 0; padding: 0; }
  & .sx-side .sx-rung-w { color: #6f6c5c; font-weight: 400; text-decoration: line-through dashed rgba(29, 35, 32, .35); }
  & .sx-side .sx-rung-w::after { content: none; }
  & .sx-tray { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; min-width: 0; margin-left: auto; padding: 3px 8px; border: 1.5px dashed rgba(29, 35, 32, .4); }
  & .sx-tray-k { margin: 0; font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term); letter-spacing: .04em; color: var(--color-ink-soft); }
  & .sx-flags { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0; padding: 0; }
  & .sx-flag-none { font: max(var(--fs-floor, 0px), 12px) var(--font-term); color: #6f6c5c; }
  & .sx-flag {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 5px;
    max-width: 100%;
    padding: 3px 7px 3px 18px;
    background: #fbfaf5;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
    font: 700 max(var(--fs-floor, 0px), 12px)/1.3 var(--font-term);
    color: var(--color-ink);
  }
  & .sx-flag::before {   /* its pin */
    content: "";
    position: absolute;
    left: 5px;
    top: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-stamp-red);
    box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
  }
  & .sx-flag[data-look="wahori"]::before { background: var(--sx-w-terra); }
  & .sx-flag-n { color: #4f4c41; font-weight: 400; }
  & .sx-flag-name { overflow-wrap: anywhere; }
  & .sx-flag[data-look="wahori"] .sx-flag-name { font: italic 400 17px/1 "sb Fraunces", Georgia, serif; font-variation-settings: "opsz" 144, "SOFT" 100, "WONK" 1; text-transform: lowercase; letter-spacing: -.01em; color: var(--sx-w-ink); }
  & .sx-flag-unc { outline: 1.5px dashed rgba(29, 35, 32, .6); outline-offset: 2px; }
  & .sx-flag-unc .sx-flag-name { text-decoration: underline dashed rgba(29, 35, 32, .55); text-underline-offset: 3px; }
  & .sx-flag .sx-unc { margin-left: 0; color: var(--color-ink-soft); }
  & .sx-flag-ring { position: absolute; left: 1px; top: 3px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--color-stamp-red); opacity: 0; pointer-events: none; }
  & .sx-flag[data-look="wahori"] .sx-flag-ring { border-color: var(--sx-w-terra); }
  & .sx-tray .sx-flags:has(> li:nth-child(3)) :is(.sx-flag-rest, .sx-flag > .tbd) { display: none; }

  /* ════════════ the taped card on the bench's front: the Sandbox's own words ════════════ */
  & .sx-card {
    grid-area: 4 / 1 / 5 / 3;
    align-self: start;
    justify-self: start;
    position: relative;
    z-index: 2;
    width: min(100% - var(--sx-prw) - 72px, 900px);
    @media (min-width: 1100px) { width: min(100% - var(--sx-prw) - var(--sx-patchw) - 2 * clamp(26px, 3vw, 54px) - clamp(10px, 2vw, 40px), 820px); }
    margin: clamp(12px, 2svh, 26px) 0 0 clamp(10px, 2vw, 40px);
    padding: 12px 20px 11px;
    color: var(--color-ink);
    font: max(var(--fs-floor, 0px), 12.5px)/19px var(--font-term);
    background:
      repeating-linear-gradient(transparent 0 18px, rgba(31, 76, 156, .1) 18px 19px) 0 31px,
      var(--color-paper);
    box-shadow: var(--sh-s);
    transform: rotate(-.6deg);
  }
  & .sx-card::before, & .sx-card::after { content: ""; position: absolute; top: -9px; width: 60px; height: 19px; background: rgba(232, 220, 178, .9); box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
  & .sx-card::before { left: -14px; transform: rotate(-24deg); }
  & .sx-card::after { right: -14px; transform: rotate(22deg); }
  & .sx-card p { margin: 0; }
  & .sx-kick { font: 700 max(var(--fs-floor, 0px), 12px)/19px var(--font-term); letter-spacing: .16em; text-transform: uppercase; color: var(--color-ink-soft); }
  & .sx-lead { font: 700 14px/20px var(--font-term); }
  & .sx-peg-more { color: #3a3f3a; }
  & .sx-stamp { position: absolute; z-index: 1; right: 30px; top: -14px; background: var(--color-paper); margin: 0 !important; padding: 5px 9px 4px; font: 700 max(var(--fs-floor, 0px), 12px)/1.25 var(--font-term); letter-spacing: .16em; text-transform: uppercase; color: #906300; border: 3px solid currentColor; border-radius: 3px; transform: rotate(-4deg); }

  /* ════════════ the probe cord (sandbox.js draws it from the probe to the picked jack) ════════════ */
  & .sx-cord { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  & .sx-cord path { fill: none; stroke: var(--color-cable); stroke-width: 5px; stroke-linecap: round; filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, .45)); }

  /* ════════════ a tall desktop view: the board's tags and type breathe ════════════ */
  @media (min-width: 1100px) and (min-height: 1000px) {
    & .sx-peg-in { gap: 22px 26px; }
    & .sx-corner { gap: 9px; }
    & .sx-hooks { gap: 12px; }
    & .sx-tags { gap: 9px 12px; }
    & .sx-tag { font-size: 13.5px; padding-top: 6px; padding-bottom: 6px; }
    & .sx-c-what { font-size: 14px; }
    & .sx-corner[data-look="wahori"] .sx-c-what { font-size: 16px; }
    & .sx-c-meta { font-size: 13px; }
    & .sx-flag { font-size: 13px; }
  }

  /* ════════════ a short desktop view ════════════ */
  @media (min-width: 900px) and (max-height: 800px) {
    --sx-front: clamp(112px, 16svh, 200px);
    & .sx-scroll .sx-head { margin-bottom: 0; }
    & .sx-scroll .sx-scroll-in { padding-top: 6px; }
    & .sx-scroll .sx-h1 { font-size: 22px; }
    & .sx-c-hd { padding: 4px 10px 3px; }
    & .sx-corner[data-look="wahori"] .sx-c-hd .sx-wm-n { font-size: 20px; }
    & .sx-card { font-size: max(var(--fs-floor, 0px), 12px); line-height: 17px; padding: 9px 16px 8px; background-position: 0 28px; background-size: auto; }
    & .sx-lead { font-size: 13px; line-height: 18px; }
    & .sx-kick { line-height: 17px; }
    & .sx-chart { padding: 9px 12px 8px; margin-top: 8px; margin-bottom: 12px; }
    & .sx-peg { padding-top: 9px; }
  }

  /* ════════════ phones and narrow tablets: one column, the page scrolls ════════════ */
  @media (max-width: 899px) {
    & .sx-scene { display: flex; flex-direction: column; align-items: center; height: auto; }
    & .sx-backlight, & .sx-front { display: none; }
    & .sx-scope-w { margin-top: 10px; }
    & .sx-benchtop { align-self: stretch; height: var(--sx-top); margin: 0 calc(-1 * var(--pad)); }
    & .sx-gear { max-height: none; align-self: stretch; flex-direction: column; align-items: stretch; gap: 26px; margin: 0 calc(-1 * var(--pad)); padding: 26px var(--pad) 30px; background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0) 18px), repeating-linear-gradient(90deg, rgba(255, 230, 190, .025) 0 2px, transparent 2px 11px, rgba(0, 0, 0, .05) 11px 13px, transparent 13px 23px), linear-gradient(180deg, #3b2818, #24180e 85%, #1b120a); }
    & .sx-patch { max-width: none; max-height: none; overflow: visible; }
    & .sx-patch ul { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    & .sx-printer { align-self: center; width: min(100%, 360px); max-width: none; }
    & .sx-paper { position: relative; top: -16px; left: auto; right: auto; height: auto; margin: 0 18px; overflow: visible; }
    & .sx-right { align-self: stretch; flex-direction: column; }
    & .sx-peg { margin: 30px 0 0; padding-bottom: 10px; border-bottom: 7px solid #4a3523; }
    & .sx-peg-in { overflow: visible; }
    & .sx-peg-fade { display: none; }
    & .sx-chart { align-self: stretch; margin: 34px 4px 0; }
    & .sx-climb { min-height: 120px; }
    & .sx-card { align-self: center; width: min(100%, 600px); margin: 34px 0 40px; }
  }
  @media (max-width: 560px) {
    & .sx-sc-n, & .sx-badge { display: none; }
    & .sx-climb { grid-template-columns: minmax(0, 1fr); row-gap: 4px; min-height: 0; border-bottom: 0; border-left: 2px solid rgba(31, 76, 156, .75); }
    & .sx-climb .sx-rung { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; min-height: 28px; }
    & .sx-climb .sx-rung::after { order: 0; height: 14px; min-height: 0; width: calc(var(--sx-step, 1) * 13%); border-top: 0; border-left: 0; border-right: 2px solid rgba(31, 76, 156, .75); }
    & .sx-climb .sx-rung > .sx-rung-w { order: 1; }
    & .sx-climb .sx-rung > .sx-flags { order: 2; }
    & .sx-corner-big { flex-basis: 100%; }
    & .sx-stamp { position: static; display: inline-block; margin-top: 8px !important; }
  }
}

/* ════════════ ambient motion: slow, sparse, off under reduced motion ════════════ */
@media (prefers-reduced-motion: no-preference) {
  [data-sandbox="index"].sx-lab {
    & .sx-sweep > i {
      background: linear-gradient(90deg, transparent calc(100% - 90px), rgba(166, 245, 154, .045) calc(100% - 3px), rgba(214, 255, 204, .26) calc(100% - 2px), rgba(214, 255, 204, .26) 100%);
      transform: translateX(-100%);
      opacity: 0;
      animation: sx-sweep 20s linear infinite;
    }
    & .sx-led { animation: sx-beat 3.6s ease-in-out infinite; }
    & .sx-prhead > i { animation: sx-blink 2.4s steps(1, end) infinite; }
    & .sx-lip { animation: sx-feed 9s ease-in-out infinite; }
    & .sx-c-live { animation: sx-beat var(--sx-pace, 4.8s) ease-in-out 1.2s infinite; }
    & .sx-flag-ring { animation: sx-ring var(--sx-pace, 4.8s) ease-out .6s infinite; }
    & .sx-sweep > i, & .sx-lip { will-change: transform; }
    & .sx-patch li i, & .sx-tag, & .sx-feed a { transition: box-shadow var(--fast) var(--ease), background-color var(--fast) var(--ease); }
  }
}
@keyframes sx-sweep {
  0% { transform: translateX(-100%); opacity: 0; }
  6% { opacity: 1; }
  88% { opacity: 1; }
  100% { transform: translateX(0); opacity: 0; }
}
@keyframes sx-beat { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes sx-blink { 0%, 100% { opacity: .75; } 50% { opacity: 0; } }
@keyframes sx-feed { 0%, 70%, 100% { transform: translateY(0); } 80%, 92% { transform: translateY(3px); } }
@keyframes sx-ring { 0%, 100% { opacity: 0; } 30% { opacity: .8; } 70% { opacity: 0; } }
@media (min-width: 900px) {
  html:has(#main-content > [data-sandbox="index"]) { overflow: hidden; overscroll-behavior: none; }
  html:has(#main-content > [data-sandbox="index"]) body.room { height: 100dvh; min-height: 0; }
  html:has(#main-content > [data-sandbox="index"]) body.room > #main-content { flex: 1 1 0; min-height: 0; }
  html:has(#main-content > [data-sandbox="index"]) :is(body.room > .floor, body.room > .foot) { display: none; }
  html:has(#main-content > .sx-lab[data-sandbox="index"]) body.room > #main-content { display: flex; flex-direction: column; }
}

/* ════════════ (B) HOME: CH 2 on the shared monitor ════════════ */
[data-sandbox-home="channel"] {
  --sx-lab: 46%;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  container: sxch / inline-size;
  font: 13px/1.4 var(--font-term);

  & .sx-fig { position: relative; display: flex; flex-direction: column; gap: 4px; min-height: 0; }
  & .sx-art { width: 100%; height: 150px; }
  & .sx-mini { flex: none; display: flex; flex-direction: column; min-width: 0; }
  & .sx-ruler-mini { height: 20px; }
  & .sx-ruler-mini .sx-ru-k { padding-left: 34px; }
  & .sx-mlanes { list-style: none; margin: 0; padding: 0; }
  & .sx-mlane { position: relative; border-bottom: 1px dashed var(--sx-ph-faint); }
  & .sx-mlane::before { content: ""; position: absolute; inset: 0 -6px; z-index: -1; border-radius: 3px; background: rgba(166, 245, 154, .07); opacity: 0; }
  & .sx-mlane[data-look="wahori"]::before { background: var(--sx-w-ink); box-shadow: inset 0 0 0 1px rgba(200, 107, 74, .5); }
  & .sx-mlane:is(:hover, :focus-within, .sx-armed)::before { opacity: 1; }
  & .sx-mlane:is(:hover, :focus-within, .sx-armed) .sx-lock { opacity: 1; }
  & .sx-mlane:is(:hover, :focus-within, .sx-armed) .sx-seg { opacity: .18; }
  & .sx-ml { display: grid; grid-template-columns: var(--sx-lab) minmax(0, 1fr); align-items: center; min-height: 46px; color: inherit; text-decoration: none; }
  & .sx-ml-t { display: grid; gap: 1px; min-width: 0; padding: 3px 10px 3px 0; }
  & .sx-ml-1 { display: flex; align-items: baseline; min-width: 0; }
  & .sx-ml-1 .sx-n { width: 34px; }
  & .sx-ml .sx-wm { font-size: 14px; text-decoration: underline; text-decoration-color: rgba(166, 245, 154, .35); text-underline-offset: 3px; }
  & [data-look="wahori"] .sx-ml .sx-wm { text-decoration: none; }
  & [data-look="wahori"] .sx-wm-n { font-size: 21px; }
  & .sx-ml-s { padding-left: 34px; font: max(var(--fs-floor, 0px), 12px)/1.35 var(--font-term); color: var(--sx-ph-dim); letter-spacing: .02em; }
  & .sx-ml-s .sx-unc { margin-left: 4px; padding: 0 .25em; color: var(--sx-ph); line-height: 1.2; }
  & .sx-ml-s time { color: var(--sx-ph); }
  & .sx-strip-mini { height: 24px; }
  & .sx-ml-zero { display: grid; grid-template-columns: var(--sx-lab) minmax(0, 1fr); align-items: center; min-height: 46px; }
  & .sx-ch2-end { display: flex; align-items: center; justify-content: space-between; gap: 0 16px; flex-wrap: wrap; }
  & .sx-moreln[hidden] { display: none; }
  & .sx-moreln { margin-left: auto; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; color: var(--sx-ph); font-size: max(var(--fs-floor, 0px), 12.5px); text-decoration: underline dotted; text-underline-offset: 4px; }
  & .sx-ch2-caps { margin: 0; }
  & .sx-prompt { margin: 0; font-size: 13.5px; }
  & .sx-ph { color: var(--sx-ph-dim); }
  & .sx-prompt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sx-ph-hi); text-decoration: underline dotted; text-underline-offset: 4px; }
  & .sx-prompt a:hover, & .sx-moreln:hover { background: var(--sx-ph); color: var(--color-phosphor-ink); text-shadow: none; }

  /* a narrower glass: the names and their lines get more of it, the traces less */
  @container sxch (max-width: 560px) {
    & .sx-mini { --sx-lab: 58%; }
  }
  /* a narrow glass (phones): the mini lane takes the glass's width, its trace under the name and
     its line (stage, date) */
  @container sxch (max-width: 420px) {
    & .sx-art { height: 96px; }
    & .sx-ruler { grid-template-columns: 34px minmax(0, 1fr); }
    & .sx-ruler-mini .sx-ru-k { padding-left: 0; }
    & .sx-tk-r, & .sx-tk-late > span { display: none; }
    & .sx-tk-i { display: inline; }
    & .sx-tk-late > .sx-tk-i { display: none; }
    & .sx-ml, & .sx-ml-zero { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: 4px; }
    & .sx-strip-mini { height: 14px; margin-left: 34px; }
  }
}
/* pinned: the list shows whole lanes only, at most three (sandbox.js sets its height to the whole
   lanes that fit and names the rest in "+N more"); it scrolls inside, a lane at a time. The figure
   takes what the list, captions and prompt leave. Static (no JS, a short view): every lane. */
.dk.dk-pinned [data-sandbox-home="channel"] .sx-mlanes {
  max-height: calc(3 * var(--sx-mlh, 47px));
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scroll-snap-type: y mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--color-phosphor-dim) transparent;
}
.dk.dk-pinned [data-sandbox-home="channel"] .sx-mlane { scroll-snap-align: start; }
.dk:not(.dk-pinned) [data-sandbox-home="channel"] .sx-moreln { display: none; }
.dk.dk-pinned [data-sandbox-home="channel"] .sx-fig { flex: 1 1 0; }
.dk.dk-pinned [data-sandbox-home="channel"] .sx-art { flex: 1 1 0; min-height: 0; height: auto; }
@container sxch (max-width: 420px) {
  .dk.dk-pinned [data-sandbox-home="channel"] { --sx-mlh: 61px; }
}
/* the pinned glass is a fixed box: it sheds the extras as it gets short (the clipboard page
   carries the same links) */
@container dkglass (max-height: 470px) {
  [data-sandbox-home="channel"] .sx-prompt { display: none; }
  [data-sandbox-home="channel"] .sx-fig-cap { display: none; }
}
@container dkglass (max-height: 400px) {
  [data-sandbox-home="channel"] :is(.sx-ch2-caps, .sx-fig-cap) { display: none; }
}

/* ════════════ (B) HOME: the Sandbox clipboard page ════════════ */
/* Two-line rows: the address and the wordmark over the last update's date, the stage stamp on the
   right; the counts (open questions, asks) under them where the page has room. */
[data-sandbox-home="page"] {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;

  & :focus-visible { outline-color: var(--color-pen-blue); }
  & .dk-title a { display: inline-flex; align-items: center; min-height: 44px; }
  & .sx-cl { list-style: none; display: grid; align-content: start; margin: 4px 0 0; padding: 0; }
  & .sx-cl-a {
    display: grid;
    grid-template-columns: 3.4ch minmax(0, 1fr) auto;
    column-gap: 1.2ch;
    align-items: center;
    min-height: 48px;
    padding: 3px 6px;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed rgba(29, 35, 32, .2);
  }
  & .sx-cl-row:last-of-type .sx-cl-a { border-bottom: 0; }
  & .sx-cl-a:hover { background: rgba(31, 76, 156, .07); }
  & .sx-cl-n { align-self: start; padding-top: .35em; color: #5f5c50; font-size: max(var(--fs-floor, 0px), 12px); font-variant-numeric: tabular-nums; }
  & .sx-cl-name { display: grid; gap: 1px; min-width: 0; }
  & .sx-cl-name .sx-wm { color: var(--color-ink); font-size: inherit; line-height: 1.25; text-decoration: underline; text-decoration-color: rgba(31, 76, 156, .45); text-underline-offset: 3px; }
  & [data-look="wahori"] .sx-cl-name .sx-wm { text-decoration: none; }
  & [data-look="wahori"] .sx-wm-n { color: var(--sx-w-ink); font-size: 22px; }
  & [data-look="wahori"] .sx-wm-sub { color: var(--sx-w-deep); }
  & .sx-cl-a:hover .sx-cl-name .sx-wm { color: var(--color-pen-blue); }
  & .sx-cl-d { font-size: max(var(--fs-floor, 0px), 12px); line-height: 1.35; color: #4f4c41; }
  & .sx-cl-d time { color: var(--color-ink); font-weight: 700; white-space: nowrap; }
  & .sx-cl-d .tbd, & .sx-cl-st .tbd { font-size: max(var(--fs-floor, 0px), 12px); }
  & .sx-cl-st { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; white-space: nowrap; font-size: max(var(--fs-floor, 0px), 12px); color: #4f4c41; }
  & .sx-cl-stamp {
    display: inline-block;
    font: 700 max(var(--fs-floor, 0px), 12px)/1 var(--font-term);
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--color-stamp-red);
    border: 2px solid currentColor;
    border-radius: 3px;
    padding: 4px 5px 3px;
    transform: rotate(-3deg);
  }
  & .sx-cl-st .sx-unc { margin-left: 0; color: var(--color-stamp-red); }
  & .sx-quiet .sx-cl-stamp { color: #5f5c50; }
  & .sx-cl-c { grid-column: 2 / 4; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; padding-bottom: 2px; font-size: max(var(--fs-floor, 0px), 12px); line-height: 1.4; color: #4f4c41; }
  & .sx-cl-c .sx-unc { margin-left: 0; color: var(--color-stamp-red); }
  & .sx-cl-more[hidden] { display: none; }
  & .sx-cl-more a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: var(--color-pen-blue); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
  & .sx-cl-zero { display: flex; align-items: center; gap: 1.2ch; min-height: 44px; padding: 0 6px; }
}
@container dkpage (max-height: 620px) {
  [data-sandbox-home="page"] .dk-more { display: none; }
}
/* pinned, the page is a fixed sheet: sandbox.js drops what does not fit, in this order, so the
   stamp and the link always sit inside it: the counts lines, the deck, then whole rows from the
   end ("+N more on the roll", or "NN on the roll" when no row fits), on the shortest page the
   sub-line. The static stack lists all. */
.dk.dk-pinned [data-sandbox-home="page"] {
  &.sx-pg-nocounts .sx-cl-c { display: none; }
  &.sx-pg-tight .dk-lede { display: none; }
  &.sx-pg-bare .dk-sub { display: none; }
  & .sx-cl-row.sx-cl-x { display: none; }
}
.dk:not(.dk-pinned) [data-sandbox-home="page"] .sx-cl-more { display: none; }

@media (prefers-reduced-motion: no-preference) {
  :is([data-sandbox="index"], [data-sandbox-home]) {
    & :is(.sx-lane, .sx-mlane)::before { transition: opacity var(--fast) linear; }
    & .sx-lock, & .sx-seg { transition: opacity 160ms linear; }
    & .sx-trig { transition: opacity var(--fast) var(--ease), transform var(--fast) var(--ease); }
    & .sx-patch .sx-tape, & .sx-patch li i { transition: box-shadow var(--fast) linear; }
  }
}