/* TURN AND BURN page. A laser machine in the Quaig Laser Lab after dark (owner 10-22: "the viewer is not great", "the outside
   background needs to be better", desktop the same as the phone). The lab wears the Founders pass skin /lab wears: velvet under
   pink and gold stage light, glitter, gold trim. The machine is one cohesive piece of kit in two parts:
   - the housing: a gunmetal cabinet with the amber readout and a deep viewing window onto the bed, where the steel slab sits on four
     toe clamps under glass (a chamber light, a slow scan line, scales in millimetres with amber marks at the laser, the hot spot's
     glow spilling over the steel);
   - the console: a separate panel below it carrying the two brass jog wheels, the X wheel always on the left and the Y wheel always
     on the right, each in its own round well.
   A tall screen and a desktop stack them (housing on top, console below). A phone held sideways is too short for that stack, so its
   wheels ride on two wings at the screen's far left and far right, where the thumbs rest. The wheels never sit in or on the housing
   (the trade-dress line: LEDGER.md and the spec). Colours are tokens on :root: the lab follows the system scheme (a blush velvet by
   day) unless the page sets data-theme; the machine is a physical object and looks the same in both. */
:root {
  /* the lab round the machine */
  --env-top: #4b0c31;
  --env-mid: #1a0713;
  --env-low: #10030b;
  --stage-a: rgba(255, 95, 174, .34);
  --stage-b: rgba(247, 215, 116, .22);
  --floor: rgba(142, 24, 87, .55);
  --floor-line: rgba(255, 95, 174, .16);
  --wall-line: rgba(0, 0, 0, .24);
  --beam: rgba(255, 95, 174, .2);
  --glit-a: rgba(255, 246, 214, .85);
  --glit-b: rgba(255, 255, 255, .7);
  --glit-c: rgba(255, 175, 218, .5);
  --hot: #ff5fae;
  --hot-deep: #c22f78;
  --gold: #f4c34a;
  --gold-lt: #f7d774;
  --gold-dk: #b9852a;
  --panel: rgba(32, 9, 24, .84);
  --panel-line: rgba(247, 215, 116, .22);
  --ink: #fbf3ff;
  --ink-dim: #dccbe8;
  --ink-faint: #bfabcd;
  --title: #ff5fae;
  --title-shadow: #f4c34a;
  --btn: #2a0f22;
  --btn-ink: #fbf3ff;
  --btn-line: rgba(247, 215, 116, .45);
  --focus: #f7d774;
  --danger: #ff7a59;
  --end-bg: #1a0713;
  --shadow: rgba(0, 0, 0, .5);
  /* the machine: the same in both schemes */
  --m-hi: #2c3139;
  --m-body: #1c2026;
  --m-lo: #111317;
  --m-edge: #08090b;
  --brass-hi: #f6e2a4;
  --brass: #c9a24f;
  --brass-lo: #5e4518;
  --bed-hole: #07080a;
  --dro-bg: #050607;
  --dro-fg: #ffb531;
  --dro-dim: #a07a36;
  --mbtn: #1d2127;
  --mbtn-ink: #eef1f4;
  --mbtn-line: #424a55;
  --leaf: linear-gradient(180deg, #fff1b8, #f7d774 24%, #f4c34a 56%, #c8952f);
  --leaf-ink: #2a0619;
  --toast-bg: rgba(8, 9, 11, .84);
  --toast-ink: #ffd89a;
  --pink: 255, 95, 174;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --env-top: #f2c2d8; --env-mid: #fbe3ee; --env-low: #f4d4e3; --stage-a: rgba(255, 95, 174, .24); --stage-b: rgba(244, 195, 74, .3);
    --floor: rgba(224, 48, 125, .16); --floor-line: rgba(194, 47, 120, .14); --wall-line: rgba(58, 15, 44, .07); --beam: rgba(224, 48, 125, .16);
    --glit-a: rgba(201, 146, 40, .6); --glit-b: rgba(255, 255, 255, .9); --glit-c: rgba(224, 48, 125, .35);
    --panel: rgba(255, 247, 251, .92); --panel-line: #e6c0d2; --ink: #3a0f2c; --ink-dim: #6b3f5a; --ink-faint: #7b4e68;
    --title: #c22f78; --title-shadow: #e5ad3a; --btn: #ffffff; --btn-ink: #3a0f2c; --btn-line: #d9a9bf; --focus: #b11f68;
    --end-bg: #fbe3ee; --shadow: rgba(58, 15, 44, .25);
  }
}
:root[data-theme="light"] {
  --env-top: #f2c2d8; --env-mid: #fbe3ee; --env-low: #f4d4e3; --stage-a: rgba(255, 95, 174, .24); --stage-b: rgba(244, 195, 74, .3);
  --floor: rgba(224, 48, 125, .16); --floor-line: rgba(194, 47, 120, .14); --wall-line: rgba(58, 15, 44, .07); --beam: rgba(224, 48, 125, .16);
  --glit-a: rgba(201, 146, 40, .6); --glit-b: rgba(255, 255, 255, .9); --glit-c: rgba(224, 48, 125, .35);
  --panel: rgba(255, 247, 251, .92); --panel-line: #e6c0d2; --ink: #3a0f2c; --ink-dim: #6b3f5a; --ink-faint: #7b4e68;
  --title: #c22f78; --title-shadow: #e5ad3a; --btn: #ffffff; --btn-ink: #3a0f2c; --btn-line: #d9a9bf; --focus: #b11f68;
  --end-bg: #fbe3ee; --shadow: rgba(58, 15, 44, .25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--env-mid); color: var(--ink); }
body {
  margin: 0; color: var(--ink); background: transparent;
  font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}
/* the lab: velvet walls with panel seams, pink and gold stage lights from above, a faint laser beam, glitter, and a stage floor with
   a pink grid that falls away under the machine. Two fixed layers painted once (no animation, nothing repaints on scroll) */
body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; }
body::before {
  inset: 0;
  background:
    radial-gradient(circle, var(--glit-a) 0 1.2px, transparent 2.2px) 89px 19px / 211px 173px,
    radial-gradient(circle, var(--glit-b) 0 .9px, transparent 1.9px) 150px 90px / 263px 239px,
    radial-gradient(circle, var(--glit-a) 0 .8px, transparent 1.6px) 0 0 / 127px 113px,
    radial-gradient(circle, var(--glit-c) 0 .7px, transparent 1.4px) 41px 67px / 61px 79px,
    linear-gradient(112deg, transparent calc(24% - 1px), var(--beam) 24%, transparent calc(24% + 1px)),
    linear-gradient(68deg, transparent calc(77% - 1px), var(--beam) 77%, transparent calc(77% + 1px)),
    radial-gradient(48% 42% at 6% -6%, var(--stage-a), transparent 72%),
    radial-gradient(48% 42% at 94% -6%, var(--stage-b), transparent 72%),
    radial-gradient(70% 34% at 50% 104%, var(--floor), transparent 74%),
    repeating-linear-gradient(90deg, var(--wall-line) 0 1px, transparent 1px 118px),
    linear-gradient(180deg, var(--env-top), var(--env-mid) 46%, var(--env-low));
}
body::after {
  left: -30%; right: -30%; bottom: 0; height: 34vh; transform-origin: 50% 100%; transform: perspective(360px) rotateX(58deg);
  background:
    repeating-linear-gradient(90deg, var(--floor-line) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, var(--floor-line) 0 1px, transparent 1px 48px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%);
  mask-image: linear-gradient(180deg, transparent, #000 70%);
}
body.is-ended, body.is-intro { overflow: hidden; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* touch-action manipulation: no double-tap zoom on a quick second tap of Buff or a wheel's pocket (pinch zoom still works) */
.tnb { --gut: 16px; max-width: 1180px; margin: 0 auto; padding: 8px var(--gut) 32px; touch-action: manipulation; }
@media (max-width: 560px) { .tnb { --gut: 12px; } }

/* ---------- header: the Lab's pink and gold ---------- */
.tnb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 2px 12px; flex-wrap: wrap; min-width: 0; }
@media (max-width: 560px) {
  .tnb-head { flex-wrap: nowrap; }                          /* one line: the play screen needs the height */
  .kick-lab { display: none; }
}
.tnb-head h1 {
  margin: 0; font-size: 22px; line-height: 1.15; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; font-stretch: condensed;
  color: var(--title); text-shadow: 2px 2px 0 var(--title-shadow), 3px 4px 0 rgba(26, 7, 19, .5); white-space: nowrap;
}
.tnb-head h1 .w2 { color: var(--gold-lt); text-shadow: 2px 2px 0 var(--hot-deep), 3px 4px 0 rgba(26, 7, 19, .5); }
.tnb-head h1 .amp, .tnb-intro h2 .amp { font-weight: 600; font-size: .58em; letter-spacing: .2em; vertical-align: .2em; color: var(--ink-dim); text-shadow: none; }
.tnb-kicker {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim);
  font-stretch: condensed;
}

/* ---------- the play screen. A tall screen (the default here): the title, then the housing (the readout over the viewing window),
   the tools, then the console with the two wheels side by side, X on the left and Y on the right, at the bottom where the thumbs
   rest. The tools row is the gap between the housing and the console: the wheels never sit in or on the housing.
   --avail is the screen height under the machine's top edge (game.js measures --tnb-mtop: the site's top row and the title above
   it), so the whole play screen fits the first screen with no scroll; the small viewport unit keeps it still while a phone's toolbar
   comes and goes. --wheel is the jog wheel's diameter, --plate the slab's side, --hpad the housing's rim, --bed the bed round the
   slab inside the window ---------- */
.tnb-bench { --avail: calc(100vh - var(--tnb-mtop, 96px)); }
@supports (height: 100svh) { .tnb-bench { --avail: calc(100svh - var(--tnb-mtop, 96px)); } }
.tnb-bench {
  --hpad: 7px;
  --bed: 5px;
  --wheel: clamp(104px, min(calc((100vw - 80px) / 2), calc(var(--avail) * .21)), 164px);
  --plate: max(200px, min(100vw - 2 * var(--gut) - 2 * var(--hpad) - 2 * var(--bed), 600px, calc(var(--avail) - 194px - var(--wheel))));
  position: relative; display: grid; column-gap: 12px; row-gap: 10px; align-items: start;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "head head" "dro dro" "table table" "actions actions" "x y" "side side";
}
.tnb-machine, .tnb-play { display: contents; }
.tnb-head { grid-area: head; }
.tnb-dro-bar { grid-area: dro; position: relative; z-index: 1; margin: var(--hpad) var(--hpad) 0; }
.tnb-table { grid-area: table; z-index: 1; margin: 0 var(--hpad) var(--hpad); }
.tnb-housing { grid-column: dro-start / dro-end; grid-row: dro-start / table-end; align-self: stretch; z-index: 0; }
.tnb-actions { grid-area: actions; }
.tnb-console { grid-column: x-start / y-end; grid-row: x-start / x-end; align-self: stretch; z-index: 0; }
.tnb-xcell { grid-area: x; z-index: 1; }
.tnb-ycell { grid-area: y; z-index: 1; }
.tnb-side { grid-area: side; }

/* ---------- the housing: a gunmetal cabinet, lit pink from the left and gold from the right by the lab's stage lights ---------- */
.tnb-housing, .tnb-console {
  position: relative; min-width: 0; border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .11), inset 0 -2px 0 rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .55),
    -1px 0 0 rgba(var(--pink), .4), 1px 0 0 rgba(247, 215, 116, .32), 0 22px 44px rgba(0, 0, 0, .55);
}
.tnb-housing {
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, var(--m-hi), var(--m-body) 38%, var(--m-lo));
}
/* the laser lamp: amber while the laser burns (game.js) */
.tnb-lamp {
  position: absolute; z-index: 2; left: 50%; margin-left: -2.5px; top: max(1px, calc(var(--hpad) / 2 - 2.5px)); width: 5px; height: 5px; border-radius: 50%;
  background: #3a2a14; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .6); transition: background .12s, box-shadow .12s;
}
.tnb-lamp.on { background: #ffcf6a; box-shadow: 0 0 6px 2px rgba(255, 170, 50, .75), 0 0 14px rgba(255, 140, 40, .5); }

/* ---------- the readout: amber digits on black glass, odometer columns, and a stylus map ---------- */
.tnb-dro-bar { display: flex; gap: 8px; min-width: 0; }
.tnb-dro {
  flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 8px;
  padding: 7px 10px; background: var(--dro-bg); color: var(--dro-fg); border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 0 18px rgba(255, 160, 40, .06), inset 0 2px 6px rgba(0, 0, 0, .8);
  font: 400 16px/1.2 ui-monospace, "Cascadia Mono", Consolas, "SFMono-Regular", Menlo, monospace;
  text-shadow: 0 0 6px rgba(255, 170, 40, .55);
}
.dro-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.dro-cell .lbl { color: var(--dro-dim); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-shadow: none; }
.dro-cell small { color: var(--dro-dim); font-size: 11px; white-space: nowrap; text-shadow: none; }
.dro-val { display: flex; align-items: baseline; gap: 4px; min-width: 0; overflow: hidden; font-size: 17px; line-height: 1; }
.odo { position: relative; flex: 0 0 auto; display: inline-flex; align-items: flex-start; height: 1em; line-height: 1; overflow: hidden; font-variant-numeric: tabular-nums; }
.dro-cell .lbl i { font-style: normal; letter-spacing: .04em; text-transform: none; }
.narrow-unit { display: none; }
@media (max-width: 560px) {
  .wide-unit { display: none; }
  .narrow-unit { display: inline; }
  .tnb-dro { gap: 4px 6px; padding: 7px 8px; }
  .tnb-toast { font-size: 12px; padding: 5px 10px; }
}
@media (orientation: landscape) and (max-height: 560px) and (max-width: 760px) {   /* "/ 30:00" was cut off at 667 wide */
  .wide-unit { display: none; }
  .narrow-unit { display: inline; }
}
.odo .dcol { display: block; position: relative; height: 1em; width: .62em; overflow: hidden; clip-path: inset(0); text-align: center; }
.odo .dstrip { display: block; height: 10em; transition: transform .38s cubic-bezier(.2, .8, .2, 1); }
.odo .dstrip i { display: block; height: 1em; line-height: 1em; font-style: normal; }
.odo .dsep { display: inline-block; width: .3em; height: 1em; text-align: center; line-height: 1em; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.tnb-map { flex: 0 0 54px; display: flex; align-items: center; }
.mapwell {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; background-color: var(--dro-bg);
  background-image: linear-gradient(rgba(255, 181, 49, .14) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 181, 49, .14) 1px, transparent 1px);
  background-size: 20% 20%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07), inset 0 2px 6px rgba(0, 0, 0, .8);
}
.mdot {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%;
  background: var(--dro-fg); box-shadow: 0 0 6px var(--dro-fg); transition: left .2s ease-out, top .2s ease-out;
}

/* ---------- the viewing window: a deep, dark bezel onto a perforated bed lit from the top of the chamber; the slab on four toe
   clamps; glass over it all (a reflection, the chamber light, a slow scan line) ---------- */
.tnb-table {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; min-width: 0;
  padding: var(--bed); border-radius: 10px;
  background:
    radial-gradient(circle, var(--bed-hole) 0 1.5px, transparent 2px) 0 0 / 7px 7px,
    radial-gradient(circle, var(--bed-hole) 0 1.5px, transparent 2px) 3.5px 3.5px / 7px 7px,
    radial-gradient(90% 70% at 50% 0%, #4a5058, #262a30 55%, #16181c);
  box-shadow:
    inset 0 0 0 1px #040506, inset 0 7px 14px rgba(0, 0, 0, .78), inset 0 -3px 8px rgba(0, 0, 0, .5),
    0 1px 0 rgba(255, 255, 255, .08), 0 -1px 0 rgba(0, 0, 0, .6);
}
.tnb-platebox { position: relative; width: var(--plate); max-width: 100%; aspect-ratio: 1; min-width: 0; container-type: inline-size; }
.tnb-stage { position: absolute; inset: 0; will-change: transform; }
.tnb-plate {
  position: absolute; inset: 0; border-radius: 4px; overflow: hidden; background: #4a525c; touch-action: none;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 3px 8px rgba(0, 0, 0, .55), 0 10px 22px rgba(0, 0, 0, .35);
}
.tnb-plate:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.tnb-plate canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.spec { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; }
.sheen {
  position: absolute; top: -15%; bottom: -15%; left: calc(var(--hx, 30%) - 20%); width: 40%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .04) 35%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .04) 65%, rgba(255, 255, 255, 0));
  transition: left .6s ease-out; animation: drift 16s ease-in-out infinite alternate;
}
@keyframes drift { from { transform: translateX(-14%) skewX(-12deg); } to { transform: translateX(14%) skewX(-12deg); } }
.vign { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 110% at 45% 35%, rgba(0, 0, 0, 0) 58%, rgba(0, 0, 0, .26) 100%); }
.clamp {
  position: absolute; z-index: 3; width: 22px; height: 10px; border-radius: 2px; pointer-events: none;
  background: linear-gradient(180deg, #b7bfc9, #4a525d); box-shadow: 0 2px 3px rgba(0, 0, 0, .55);
}
.clamp::after {
  content: ""; position: absolute; left: 8px; top: 2px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #f3dc9c, #a07a2c 70%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35);
}
.clamp.tl { left: -8px; top: -3px; transform: rotate(-45deg); }
.clamp.tr { right: -8px; top: -3px; transform: rotate(45deg); }
.clamp.bl { left: -8px; bottom: -3px; transform: rotate(45deg); }
.clamp.br { right: -8px; bottom: -3px; transform: rotate(-45deg); }

/* the glass: a reflection across the upper left, the chamber light falling from the top, a soft edge, and a scan line that runs down
   the window every 9 s while the machine waits (game.js sets .is-scan in play when the laser is not burning; transform only, its own
   layer; none with reduced motion) */
.tnb-glass {
  position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; border-radius: inherit;
  background:
    linear-gradient(117deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .025) 24%, transparent 24.4%, transparent 63%, rgba(255, 255, 255, .03) 63.4%, transparent 76%),
    linear-gradient(180deg, rgba(255, 238, 248, .07), transparent 20%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05), inset 0 0 24px rgba(0, 0, 0, .3);
}
.tnb-glass.is-scan::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 100%; transform: translateY(-100%);
  background: linear-gradient(180deg, transparent 0, transparent 96.5%, rgba(var(--pink), .045) 99%, rgba(255, 226, 240, .3) 99.75%, transparent 100%);
  animation: tnb-scan 9s linear infinite; will-change: transform;
}
@keyframes tnb-scan { from { transform: translateY(-100%); } to { transform: translateY(6%); } }

/* the scales on the glass, the 90 mm window in millimetres: a tick every 0.9 mm step, longer every 4.5 mm and 9 mm, numbers every
   18 mm on a plate big enough to read them; amber marks ride the scales at the laser. A faint 9 mm grid over the window. The spill:
   the hot spot's light pooling on the steel round it while the laser burns (game.js moves it with transform) */
.tnb-scale { position: absolute; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; border-radius: 4px; }
.tnb-grid {
  position: absolute; left: 5.70866%; top: 5.70866%; width: 88.58268%; height: 88.58268%; overflow: visible;
  fill: none; stroke: rgba(226, 234, 244, .075); stroke-width: 1;
}
.tnb-ruler { position: absolute; color: rgba(232, 238, 246, .62); }
.tnb-ruler svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1; }
.tnb-ruler .t1 { opacity: .45; }
.tnb-ruler .t5 { opacity: .7; }
.tnb-ruler.rx { left: 5.70866%; width: 88.58268%; top: 1.15%; height: 3.6%; }
.tnb-ruler.ry { top: 5.70866%; height: 88.58268%; left: 1.15%; width: 3.6%; }
.tnb-ruler b {
  position: absolute; display: none; font: 600 9px/1 ui-monospace, "Cascadia Mono", Consolas, monospace; color: rgba(236, 241, 248, .66);
  text-shadow: 0 1px 1px rgba(0, 0, 0, .6);
}
.rx b { top: 0; }
.ry b { left: 0; }
.rx b:nth-of-type(1) { left: 3px; } .rx b:nth-of-type(2) { left: calc(20% + 3px); } .rx b:nth-of-type(3) { left: calc(40% + 3px); }
.rx b:nth-of-type(4) { left: calc(60% + 3px); } .rx b:nth-of-type(5) { left: calc(80% + 3px); } .rx b:nth-of-type(6) { left: auto; right: 3px; }
.ry b:nth-of-type(1) { top: 3px; } .ry b:nth-of-type(2) { top: calc(20% + 3px); } .ry b:nth-of-type(3) { top: calc(40% + 3px); }
.ry b:nth-of-type(4) { top: calc(60% + 3px); } .ry b:nth-of-type(5) { top: calc(80% + 3px); } .ry b:nth-of-type(6) { top: auto; bottom: 3px; }
@container (min-width: 460px) { .tnb-ruler b { display: block; } }
.tnb-caret {
  position: absolute; width: 0; height: 0; border: 4px solid transparent;
  filter: drop-shadow(0 0 3px rgba(255, 170, 40, .9)); transition: left .14s ease-out, top .14s ease-out;
}
.rx .tnb-caret { left: 50%; bottom: -3px; margin-left: -4px; border-top: 7px solid var(--dro-fg); border-bottom-width: 0; }
.ry .tnb-caret { top: 50%; right: -3px; margin-top: -4px; border-left: 7px solid var(--dro-fg); border-right-width: 0; }
.tnb-spill {
  position: absolute; left: 0; top: 0; width: 64%; aspect-ratio: 1; margin: -32% 0 0 -32%; border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 214, 150, .34), rgba(255, 160, 70, .13) 38%, rgba(255, 120, 40, .04) 70%, rgba(255, 120, 40, 0));
  will-change: transform, opacity;
}

.tnb-toast {
  position: absolute; z-index: 7; left: 50%; top: 10px; transform: translate(-50%, -6px); margin: 0;
  width: max-content; max-width: calc(100% - 24px);                 /* the full plate width to wrap in, not the half right of left: 50% */
  padding: 6px 12px; border-radius: 14px; background: var(--toast-bg); color: var(--toast-ink); font-size: 13px; font-weight: 600;
  letter-spacing: .02em; text-align: center; opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 0 0 1px rgba(255, 180, 80, .25), 0 6px 18px rgba(0, 0, 0, .4);
}
.tnb-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.tnb-toast.gold { color: #fff1c2; box-shadow: 0 0 0 1px rgba(255, 210, 90, .6), 0 0 24px rgba(255, 190, 60, .45); }

/* ---------- the console: a separate panel under the housing, a brass trim line along its top edge, the jog wheels in round
   wells. A wheel's cell is its grab area: a touch anywhere in it turns the wheel round the wheel's own centre, so a thumb never
   has to land on the wheel itself (no page scroll, no zoom, no text selection from it). The well glows amber while a hand holds
   its wheel. On a tall screen each cell is half the console ---------- */
.tnb-console {
  background:
    linear-gradient(180deg, rgba(201, 162, 79, .55), rgba(201, 162, 79, 0) 2px) top / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, #2e333b, #1d2127 26%, #14171b);
}
.tnb-cell {
  position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; align-self: stretch; padding: 8px 0 6px;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; cursor: grab;
}
.tnb-cell.is-grip { cursor: grabbing; }
/* the machine is dark in both schemes, so its focus ring is the Lab's gold (the light scheme's pink ring is about 2.5:1 on the steel) */
.tnb-table, .tnb-cell { --focus: #f7d774; }
.tnb-pocket { position: relative; display: grid; justify-items: center; gap: 3px; padding: 0 6px; }
.tnb-pocket::before {
  content: ""; position: absolute; left: 50%; top: calc(var(--wheel) / 2); width: calc(var(--wheel) * .9); aspect-ratio: 1;
  transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(closest-side, #050607 78%, #0f1114 90%, #1b1e23);
  box-shadow: inset 0 4px 9px rgba(0, 0, 0, .9), 0 1px 0 rgba(255, 255, 255, .08), 0 0 0 1px rgba(0, 0, 0, .45);
  transition: box-shadow .18s ease-out;
}
.tnb-cell.is-grip .tnb-pocket::before {
  box-shadow: inset 0 4px 9px rgba(0, 0, 0, .9), 0 0 0 2px rgba(255, 170, 60, .7), 0 0 24px rgba(255, 150, 50, .4);
}
.tnb-cell .cap {
  position: relative; font-size: 11px; line-height: 14px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  text-align: center; white-space: nowrap; color: #e3c47e; font-stretch: condensed; text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
}
canvas.wheel {
  position: relative; display: block; width: var(--wheel); height: var(--wheel); touch-action: none; outline: none; border-radius: 50%;
  user-select: none; -webkit-user-select: none;
}
canvas.wheel:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

/* the status line: for screen readers on a phone (the toast and the readout show the same); a desktop also shows it at the head of
   the panels beside the machine */
.tnb-status { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* ---------- buttons ---------- */
.tnb-actions { position: relative; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tnb-btn {
  min-height: 44px; min-width: 44px; padding: 9px 18px; border-radius: 10px; border: 1px solid var(--btn-line); background: var(--btn);
  color: var(--btn-ink); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .25);
}
.tnb-btn:hover { border-color: var(--gold-lt); }
.tnb-btn:active { transform: translateY(1px); }
.tnb-btn:disabled { opacity: .45; cursor: not-allowed; }
.tnb-btn.primary { background: var(--leaf); border-color: #e8bb4c; color: var(--leaf-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 3px 10px rgba(0, 0, 0, .3), 0 0 16px rgba(244, 195, 74, .18); }
.tnb-btn.big { min-height: 52px; padding: 12px 28px; font-size: 17px; }
.tnb-actions #buff, .tnb-actions #print { flex: 1 1 0; }
/* the machine's own buttons: dark steel keys, the same in both schemes (Print stays gold) */
.tnb-actions .tnb-btn:not(.primary) { background: linear-gradient(180deg, #2a2f36, var(--mbtn)); color: var(--mbtn-ink); border-color: var(--mbtn-line); }
.tnb-actions .tnb-btn:not(.primary):hover { border-color: #e3c47e; }
.tnb-icon {
  width: 44px; height: 44px; flex: 0 0 44px; border-radius: 50%; border: 1px solid var(--mbtn-line); background: linear-gradient(180deg, #2a2f36, var(--mbtn));
  display: grid; place-items: center; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 6px rgba(0, 0, 0, .3);
}
.tnb-icon svg { width: 22px; height: 22px; fill: none; stroke: var(--dro-fg); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.tnb-icon .spk { fill: var(--dro-fg); stroke: none; }
.tnb-icon .cross { display: none; }
.tnb-icon[aria-pressed="true"] .wave { display: none; }
.tnb-icon[aria-pressed="true"] .cross { display: inline; stroke: var(--danger); }
/* the Print question floats over the foot of the window, so the console under it never jumps away from the thumbs */
.tnb-confirm {
  position: absolute; z-index: 15; left: 0; right: 0; bottom: calc(100% + 10px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; color: #eef1f4;
  background: #15181d; border: 1px solid var(--gold); box-shadow: 0 10px 30px rgba(0, 0, 0, .55), 0 0 22px rgba(244, 195, 74, .18);
}
.tnb-confirm span { flex: 1 1 100%; font-weight: 700; }
.tnb-confirm .tnb-btn { flex: 1 1 0; }

/* ---------- side panels ---------- */
.tnb-side { display: grid; gap: 12px; min-width: 0; }
.panel { min-width: 0; background: var(--panel); border: 1px solid var(--panel-line); border-radius: 12px; padding: 12px 14px; box-shadow: 0 10px 24px var(--shadow); }
.panel h2 { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--gold-lt); }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; border: 1px solid var(--panel-line); border-radius: 10px; overflow: hidden; }
.stats > div { min-width: 0; padding: 8px 10px; border-left: 1px solid var(--panel-line); }
.stats > div:first-child { border-left: 0; }
.stats dt { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); }
.stats dd { margin: 4px 0 0; font: 600 19px/1.1 ui-monospace, "Cascadia Mono", Consolas, monospace; }
.note { margin: 8px 0 0; font-size: 13px; color: var(--ink-dim); }
.how { margin: 0; padding-left: 18px; font-size: 14px; color: var(--ink-dim); }
.how li + li { margin-top: 4px; }
.how b { color: var(--ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .panel h2 { color: var(--hot-deep); }
  :root:not([data-theme="dark"]) .tnb-head h1 .w2 { color: #94620f; text-shadow: 2px 2px 0 rgba(194, 47, 120, .35); }
}
:root[data-theme="light"] .panel h2 { color: var(--hot-deep); }
:root[data-theme="light"] .tnb-head h1 .w2 { color: #94620f; text-shadow: 2px 2px 0 rgba(194, 47, 120, .35); }

/* ---------- intro card: below the site's top row (--tnb-top, game.js), so its back link stays tappable while the card is up ---------- */
.tnb-intro {
  position: fixed; inset: var(--tnb-top, 0px) 0 0; z-index: 20; display: grid; place-items: center; padding: 16px;
  background:
    radial-gradient(70% 55% at 50% 42%, rgba(var(--pink), .2), transparent 70%),
    radial-gradient(50% 40% at 50% 60%, rgba(247, 215, 116, .1), transparent 70%),
    rgba(16, 3, 11, .84);
  backdrop-filter: blur(3px);
}
.tnb-intro-card {
  max-width: 440px; padding: 22px 22px 18px; border-radius: 18px; text-align: center; color: #fbf3ff;
  background: linear-gradient(180deg, rgba(42, 6, 25, .9), rgba(26, 7, 19, .92));
  box-shadow: 0 0 0 1px rgba(247, 215, 116, .45), 0 0 0 4px rgba(26, 7, 19, .8), 0 0 0 5px rgba(194, 47, 120, .7), 0 0 40px rgba(var(--pink), .25), 0 24px 50px rgba(0, 0, 0, .6);
}
.tnb-intro h2 {
  margin: 4px 0 12px; font-size: clamp(30px, 9vw, 44px); line-height: 1; font-weight: 900; letter-spacing: .08em; text-transform: uppercase;
  font-stretch: condensed; white-space: nowrap; color: #ff5fae; text-shadow: 3px 3px 0 #f4c34a, 5px 6px 0 rgba(26, 7, 19, .6);
}
.tnb-intro .tnb-kicker { color: #d9c6e6; }
.tnb-intro p { margin: 0 0 18px; color: #e6d8ef; }
.tnb-fine { font-size: 12px; margin-top: 14px !important; margin-bottom: 0 !important; color: #b8a6c6 !important; }

/* ---------- end screen: the lab behind the printed slab, below the site's top row like the intro card (its back link stays
   tappable) ---------- */
.tnb-end {
  position: fixed; inset: var(--tnb-top, 0px) 0 0; z-index: 30; overflow-y: auto; padding: 16px;
  background:
    radial-gradient(60% 40% at 50% 0%, var(--stage-a), transparent 72%),
    radial-gradient(60% 50% at 50% 100%, var(--floor), transparent 74%),
    linear-gradient(180deg, var(--env-top), var(--end-bg) 40%, var(--env-low));
}
.tnb-end-card { max-width: 560px; margin: 0 auto; padding: 8px 0 28px; text-align: center; }
.tnb-end h2 {
  margin: 4px 0 2px; font-size: 30px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; font-stretch: condensed;
  color: var(--title); text-shadow: 2px 2px 0 var(--title-shadow);
}
.tnb-end-sub { margin: 0 0 12px; color: var(--ink-dim); }
#slab { width: min(100%, 420px); height: auto; aspect-ratio: 1; border-radius: 6px; box-shadow: 0 0 0 1px rgba(247, 215, 116, .4), 0 16px 40px rgba(0, 0, 0, .5); background: #c9ccc8; }
.tnb-end-line { margin: 10px 0 4px; font-size: 13px; color: var(--ink-dim); }
.tnb-mantra {
  margin: 10px 0; font-weight: 800; letter-spacing: .16em; color: #ffd36b; text-shadow: 0 0 14px rgba(255, 190, 60, .6);
}
.tnb-end-stats { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 12px auto; max-width: 420px; text-align: left; font-size: 14px; }
.tnb-end-stats dt { color: var(--ink-dim); }
.tnb-end-stats dd { margin: 0; font-weight: 600; }
.tnb-code-label { display: block; margin: 12px 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); }
.tnb-code {
  display: block; max-height: 96px; overflow: auto; padding: 8px 10px; border-radius: 8px; background: var(--dro-bg); color: var(--dro-fg);
  font: 12px/1.35 ui-monospace, Consolas, monospace; text-align: left; overflow-wrap: anywhere; user-select: all;
}
.tnb-end-actions { display: flex; gap: 8px; justify-content: center; margin-top: 12px; }
.tnb-end-actions .tnb-btn { flex: 1 1 0; max-width: 200px; }
.tnb-note { min-height: 1.4em; margin: 6px 0 0; font-size: 13px; color: var(--ink-dim); }
/* the site adds its shared burn-code panel (#burnCode) after this box; while the panel shows, it carries the code (with its own
   Copy button), so this box steps aside (hidden, not removed: it keeps its text). No panel, or one that never showed: this box
   shows the code */
.tnb-end:has(#burnCode:not([hidden])) :is(.tnb-code-label, .tnb-code, #copy, #copy-note) { display: none; }

/* ---------- desktop (and any wide screen with the height for it): the same machine as the phone held upright, larger. The housing
   on top with the window as big as the screen allows; the console hinged under it with a visible gap and two hinge knuckles, the X
   wheel under the window's left side, the Y wheel under its right side, the readout and the tools between them; the title and the
   panels in a column on the right. --mw is the machine's width (the window's, or the console's when the window is narrower than
   two wheels and the tools need) ---------- */
@media (min-width: 900px) and (min-height: 561px) {
  .tnb { max-width: none; width: fit-content; padding-top: 12px; padding-bottom: 10px; }   /* no scroll when the panels fit too */
  .tnb-head { display: grid; gap: 2px; align-content: start; }
  .tnb-head h1 { font-size: 27px; }
  .tnb-bench {
    --hpad: 12px;
    --bed: 8px;
    --hinge: 14px;
    --wheel: clamp(112px, calc(var(--avail) * .17), 168px);
    --cellw: calc(var(--wheel) + 30px);
    --sidew: clamp(282px, calc(24vw + 32px), 352px);                     /* with the 32 px gap before it */
    --plate: max(280px, min(780px, calc(100vw - 2 * var(--gut) - var(--sidew) - 2 * var(--hpad) - 2 * var(--bed)),
      calc(var(--avail) - 66px - max(var(--wheel) + 39px, 164px))));   /* the housing's rims, the hinge, the console, 12 px to spare */
    --mw: max(calc(var(--plate) + 2 * var(--hpad) + 2 * var(--bed)), calc(2 * var(--cellw) + 250px));
    grid-template-columns: var(--cellw) calc(var(--mw) - 2 * var(--cellw)) var(--cellw) var(--sidew);
    grid-template-rows: auto auto auto 1fr;
    grid-template-areas:
      "table table   table head"
      "x     dro     y     side"
      "x     actions y     side"
      ".     .       .     side";
    gap: 0;                                                   /* the hinge and the console's spacing are margins: the empty last
                                                                 row adds no height */
  }
  /* the title and the panels share the right-hand column: the panels span every row (so they never stretch the machine's rows; the
     last row takes what they need) and start under the title, which has a fixed height */
  .tnb-head, .tnb-side { margin-left: 32px; }
  .tnb-head { height: 58px; overflow: hidden; }
  .tnb-side { grid-row: 1 / -1; grid-column: 4; margin-top: 68px; align-self: start; }
  .tnb-housing { grid-column: table-start / table-end; grid-row: table-start / table-end; margin-bottom: var(--hinge); }
  .tnb-housing {
    background:
      radial-gradient(circle at 50% 50%, var(--brass-hi) 0 1px, var(--brass) 1.8px, var(--brass-lo) 2.6px, transparent 3.2px) 2px 2px / 12px 12px no-repeat,
      radial-gradient(circle at 50% 50%, var(--brass-hi) 0 1px, var(--brass) 1.8px, var(--brass-lo) 2.6px, transparent 3.2px) calc(100% - 2px) 2px / 12px 12px no-repeat,
      radial-gradient(circle at 50% 50%, var(--brass-hi) 0 1px, var(--brass) 1.8px, var(--brass-lo) 2.6px, transparent 3.2px) 2px calc(100% - 2px) / 12px 12px no-repeat,
      radial-gradient(circle at 50% 50%, var(--brass-hi) 0 1px, var(--brass) 1.8px, var(--brass-lo) 2.6px, transparent 3.2px) calc(100% - 2px) calc(100% - 2px) / 12px 12px no-repeat,
      /* vent slots down both sides: they show only where the cabinet is wider than its window */
      repeating-linear-gradient(180deg, rgba(0, 0, 0, .6) 0 3px, rgba(255, 255, 255, .05) 3px 4px, transparent 4px 10px) 18px 50% / 18px 46% no-repeat,
      repeating-linear-gradient(180deg, rgba(0, 0, 0, .6) 0 3px, rgba(255, 255, 255, .05) 3px 4px, transparent 4px 10px) calc(100% - 18px) 50% / 18px 46% no-repeat,
      repeating-linear-gradient(90deg, rgba(255, 255, 255, .012) 0 1px, transparent 1px 3px),
      linear-gradient(180deg, var(--m-hi), var(--m-body) 38%, var(--m-lo));
  }
  .tnb-table { margin: var(--hpad) var(--hpad) calc(var(--hpad) + var(--hinge)); justify-self: center; border-radius: 12px; }
  .tnb-console { grid-column: x-start / y-end; grid-row: x-start / x-end; }
  /* two hinge knuckles bridge the gap between the housing and the console */
  .tnb-console::before, .tnb-console::after {
    content: ""; position: absolute; top: calc(-1 * var(--hinge) - 3px); height: calc(var(--hinge) + 6px); width: 54px; border-radius: 5px;
    background:
      repeating-linear-gradient(90deg, transparent 0 17px, rgba(0, 0, 0, .65) 17px 18px),
      linear-gradient(180deg, #7b838e, #3a4048 40%, #1a1d22 75%, #2b3037);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .6), inset 0 0 0 1px rgba(0, 0, 0, .5);
  }
  .tnb-console::before { left: calc(var(--cellw) / 2 - 27px); }
  .tnb-console::after { right: calc(var(--cellw) / 2 - 27px); }
  /* the readout and the tools meet in the console's middle, however tall the wheels make it */
  .tnb-dro-bar { margin: 12px 0 0; align-self: end; container-type: inline-size; }
  .tnb-dro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tnb-map { display: none; }                               /* the scales' amber marks show the laser on a window this size */
  .tnb-actions { margin: 14px 0 12px; align-self: start; flex-wrap: nowrap; --focus: #f7d774; }   /* on the console here */
  .tnb-cell { padding: 12px 0 10px; }
  .tnb-status {
    position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; min-height: 2.9em;
    margin: 0; padding: 8px 12px; border-radius: 10px; font: 12.5px/1.45 ui-monospace, "Cascadia Mono", Consolas, monospace;
    color: var(--dro-fg); background: rgba(5, 6, 7, .78); box-shadow: inset 0 0 0 1px rgba(255, 181, 49, .18);
  }
  .tnb-confirm { left: 50%; right: auto; bottom: calc(100% + 12px); width: min(440px, calc(var(--mw) - 24px)); transform: translateX(-50%); }
  /* the panels a little tighter beside the machine, so they fit the first screen on most desktops too */
  .tnb-side { gap: 10px; }
  .panel { padding: 10px 13px; }
  .note { font-size: 12.5px; line-height: 1.4; }
  .how { font-size: 13px; line-height: 1.4; }
  .stats dd { font-size: 17px; }
}
@media (min-width: 900px) and (max-width: 1180px) and (min-height: 561px) {
  .kick-lab { display: none; }                              /* the kicker stays one line in the narrower right-hand column */
}
@container (min-width: 440px) {                             /* "30:00 / 30:00" needs about 98 px a column */
  .tnb-dro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- phone held sideways: too short for the stack (the window would shrink from about 290 px to under 200), so the wheels
   ride on two console wings at the far left (X) and the far right (Y) at thumb height, the housing and its window in the centre
   with a gap on each side; the readout and the tools run as one bar across the top; the play screen fits the viewport with no page
   scroll (the panels follow below it). --avail is the height under that bar's top edge (the site's top row taken off), so --playh
   is the row the window and the wings share. Each wheel's grab area is its whole wing ---------- */
@media (orientation: landscape) and (max-height: 560px) {
  .tnb { max-width: none; padding: 4px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
  .tnb-head { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .tnb-bench {
    --hpad: 0px;
    --bed: 0px;
    --playh: max(180px, calc(var(--avail) - 56px));
    --plate: min(calc(var(--playh) - 8px), calc(100vw - 268px));
    --wheel: max(88px, min(176px, calc(var(--playh) - 56px), calc((100vw - 48px - var(--plate)) / 2 - 16px)));
    column-gap: 8px; row-gap: 4px; grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "dro actions" "play play" "side side";
  }
  .tnb-dro-bar { margin: 0; align-self: stretch; align-items: center; }
  .tnb-map { display: none; }
  .tnb-dro { padding: 4px 10px; gap: 0 10px; }
  .dro-cell { flex-direction: row; align-items: baseline; gap: 6px; }
  .dro-val { font-size: 15px; }
  .tnb-actions { flex-wrap: nowrap; }
  .tnb-actions #buff, .tnb-actions #print { flex: 0 0 auto; padding: 8px 14px; }
  .tnb-confirm { position: fixed; left: 50%; right: auto; top: 52px; bottom: auto; transform: translateX(-50%); width: min(420px, 92vw); }
  .tnb-play {
    grid-area: play; display: grid; height: var(--playh);
    grid-template-columns: minmax(0, 1fr) var(--plate) minmax(0, 1fr); grid-template-areas: "x table y";
    column-gap: 14px; padding: 4px 0;
  }
  .tnb-housing { grid-area: table; margin: -4px -7px; border-radius: 12px; }
  .tnb-table { grid-area: table; align-self: center; margin: 0; padding: 0; border-radius: 5px; background: #16181c; }
  .tnb-console { display: none; }
  /* thumb height and spread: a wheel sits a little below the middle of its wing and out at the screen's edge, where a thumb rests
     on a phone held in two hands */
  .tnb-cell {
    padding: clamp(0px, calc(var(--playh) - var(--wheel) - 60px), calc(var(--playh) * .18)) 0 6px; border-radius: 16px;
    background: linear-gradient(180deg, rgba(201, 162, 79, .5), rgba(201, 162, 79, 0) 2px) top / 100% 3px no-repeat, linear-gradient(180deg, #2e333b, #1d2127 26%, #14171b);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(0, 0, 0, .55), 0 14px 28px rgba(0, 0, 0, .5);
  }
  .tnb-xcell { justify-items: start; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(0, 0, 0, .55), -1px 0 0 rgba(var(--pink), .4), 0 14px 28px rgba(0, 0, 0, .5); }
  .tnb-ycell { justify-items: end; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(0, 0, 0, .55), 1px 0 0 rgba(247, 215, 116, .32), 0 14px 28px rgba(0, 0, 0, .5); }
  .tnb-pocket { padding: 0 8px; }
  .tnb-ruler b { display: none; }
  .tnb-side { grid-template-columns: 1fr 1fr; }
  .tnb-intro h2 { font-size: 34px; }
  .tnb-intro-card { padding: 14px 18px 12px; }
  .tnb-intro p { margin-bottom: 12px; }
  .tnb-end { padding: 8px 16px; }
  .tnb-end-card {
    max-width: 820px; padding: 0 0 16px; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px;
    align-items: start; text-align: left;
  }
  .tnb-end h2 { grid-column: 2; font-size: 24px; margin: 0; }
  .tnb-end-sub { grid-column: 2; margin: 0 0 6px; }
  #slab { grid-column: 1; grid-row: 1 / span 9; width: min(42vw, calc(100vh - 24px - var(--tnb-top, 0px))); width: min(42vw, calc(100dvh - 24px - var(--tnb-top, 0px))); }
  .tnb-end-card > :not(#slab) { grid-column: 2; }
  .tnb-end-stats { margin: 6px 0; max-width: none; }
  .tnb-end-actions { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .sheen, .tnb-glass::after { animation: none !important; }
  .tnb-glass::after { display: none; }
  .odo .dstrip { transition: none; }
  .mdot, .tnb-toast, .tnb-caret { transition: none; }
}