/* Trilavi in the Neelverse Lab brand (guide v1.0, 31 Oct 2026): Neel Yellow as the signature, warm neutrals
   for everything else, Clash Display / Inter / JetBrains Mono, light by default with a warm dark mode. Values are
   copied from the guide's chapter 15; never retype colours by eye. */
@font-face { font-family: "Clash Display"; src: url("fonts/ClashDisplay-Variable.woff2") format("woff2"); font-weight: 200 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-latin-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("fonts/Inter-latin-ext-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-latin-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  /* the guide's tokens */
  --yellow: #FFE001; --yellow-light: #FFF4B0; --yellow-hover: #E6CA01; --yellow-dark: #BFA501; --yellow-deep: #8C7901;
  --black: #323232; --ink-900: #1A1A1A; --white: #FFFFFF; --cream: #F9F6F3; --warm-gray: #F3F2EE;
  --gray-50: #FAFAF8; --gray-200: #E5E4E0; --gray-300: #C8C7C3; --gray-400: #9B9A97; --gray-500: #6E6D6A; --gray-600: #4A4A47;
  --coral: #F4845F; --coral-light: #FDE8E0; --lavender: #B8A9C9; --lavender-light: #EDE8F3; --sage: #8DB580; --sage-light: #E4F0DF;
  --success: #2D8A4E; --error: #D64045; --warning: #E6A817;
  --warm-900: #1A1816; --warm-800: #232019; --warm-700: #2A2724; --warm-600: #3A352F; --warm-200: #C8C2B8; --warm-100: #F3EFE8;
  --display: "Clash Display", "General Sans", "Inter Tight", system-ui, sans-serif;
  --body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono-font: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; --ease-standard: cubic-bezier(.2, 0, 0, 1);
  --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--edge-strong); /* keyboard focus: a page-coloured gap, then charcoal (yellow on dark) */
  /* roles: what the page paints with (light) */
  --bg: var(--cream); --bg2: var(--warm-gray); --panel: var(--white); --line: var(--gray-200); --line-2: var(--gray-300);
  --ink: var(--black); --ink-2: var(--gray-600); --dim: var(--gray-500); --meta: var(--gray-400);
  --mark: var(--yellow); --on-mark: var(--black); --overlay: rgba(26, 24, 22, .55);
  /* bands, highlights and edges: a light-mode value here, a dark one below (never a light box with light text) */
  --band: var(--warm-gray); --sec: var(--bg); --panel-2: var(--gray-50);
  --hl: var(--yellow-light); --on-hl: var(--black); --hl-edge: var(--yellow-dark); --edge-strong: var(--black);
  --bar-quiet: var(--gray-300); --path-a: var(--yellow-deep);
  /* charts, validated with the data-viz method (1 Nov 2026): the run training now in focus, three brand hues (violet,
     coral, aqua) for other series, a reference and a quiet context, and a one-hue yellow ramp for ordered stages */
  --now: #FFE001; --now-casing: #323232; --focus: #323232; --cat-1: #6046B0; --cat-2: #AC431D; --cat-3: #009B8F; --ref: #7D7C78; --context: #C8C7C3;
  --ord-1: #CAB101; --ord-2: #AB9500; --ord-3: #8C7B03; --ord-4: #6F6100; --ord-5: #534800; --info: #4A6FA5;
  --ok: var(--success); --warn-fill: var(--warning); --bad-fill: var(--error);
  /* data series, high contrast first (charcoal, yellow-deep, then the approved show accents) */
  --series-1: #323232; --series-2: #8C7901; --series-3: #F4845F; --series-4: #44693A;
  --series-5: #6F5E86; --series-6: #D8A730; --series-7: #974E2D; --series-8: #45867B;
  /* names the scripts read through C(): kept, pointed at brand values */
  --violet: #323232; --gold: #8C7901; --teal: #45867B; --blue: #6F5E86; --red: #D64045;
  --good: #2D8A4E; --bad: #D64045; --warn: #8C7901;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --bg: var(--warm-900); --bg2: var(--warm-800); --panel: var(--warm-700); --line: var(--warm-600); --line-2: #4A443C;
    --ink: var(--warm-100); --ink-2: var(--warm-200); --dim: #A39C90; --meta: #8A8378; --overlay: rgba(0, 0, 0, .6);
    --series-1: #F3EFE8; --series-2: #FFE001; --series-3: #F4845F; --series-4: #8DB580; --series-5: #B8A9C9; --series-6: #D8A730; --series-7: #E0956B; --series-8: #6FAE9F;
    --violet: #F3EFE8; --gold: #FFE001; --teal: #8DB580; --coral: #F4845F; --blue: #B8A9C9; --red: #E5615F;
    --good: #3FA968; --bad: #E5615F; --warn: #F0B83A; --ok: #3FA968;
    --band: var(--warm-800); --panel-2: var(--warm-800); --hl: rgba(255, 224, 1, .14); --on-hl: var(--warm-100); --hl-edge: var(--yellow); --edge-strong: var(--yellow); --bar-quiet: #8A8378; --path-a: var(--yellow);
    --now: #FFE001; --now-casing: #1A1816; --focus: #FFE001; --cat-1: #7C64D1; --cat-2: #C05531; --cat-3: #04AC9F; --ref: #C8C2B8; --context: #625B51;
    --ord-1: #796901; --ord-2: #968304; --ord-3: #B59F00; --ord-4: #D5BB02; --ord-5: #F6D809; --info: #6E96D6;
    color-scheme: dark;
  }
}
:root[data-theme=dark] {
  --bg: var(--warm-900); --bg2: var(--warm-800); --panel: var(--warm-700); --line: var(--warm-600); --line-2: #4A443C;
  --ink: var(--warm-100); --ink-2: var(--warm-200); --dim: #A39C90; --meta: #8A8378; --overlay: rgba(0, 0, 0, .6);
  --series-1: #F3EFE8; --series-2: #FFE001; --series-3: #F4845F; --series-4: #8DB580; --series-5: #B8A9C9; --series-6: #D8A730; --series-7: #E0956B; --series-8: #6FAE9F;
  --violet: #F3EFE8; --gold: #FFE001; --teal: #8DB580; --coral: #F4845F; --blue: #B8A9C9; --red: #E5615F;
  --good: #3FA968; --bad: #E5615F; --warn: #F0B83A; --ok: #3FA968;
  --band: var(--warm-800); --panel-2: var(--warm-800); --hl: rgba(255, 224, 1, .14); --on-hl: var(--warm-100); --hl-edge: var(--yellow); --edge-strong: var(--yellow); --bar-quiet: #8A8378; --path-a: var(--yellow);
  --now: #FFE001; --now-casing: #1A1816; --focus: #FFE001; --cat-1: #7C64D1; --cat-2: #C05531; --cat-3: #04AC9F; --ref: #C8C2B8; --context: #625B51;
  --ord-1: #796901; --ord-2: #968304; --ord-3: #B59F00; --ord-4: #D5BB02; --ord-5: #F6D809; --info: #6E96D6;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* a class's display (flex, grid) must never show what the page hid */
html { scroll-padding-top: calc(var(--bar-h, 53px) + 52px); } /* jumps are instant: smooth scrolls over this long, live page were abandoned */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--body); -webkit-font-smoothing: antialiased; }
main { max-width: 1280px; margin: 0 auto; padding: 0 16px 120px; }
/* chapters: sections alternate between the page and a warm gray band; the live status (Is it OK?, Now) is a dark
   control room in both themes. Bands run edge to edge while the content keeps its column. */
main > section { position: relative; padding: 4px 0 36px; }
main > section > h2 { margin-top: 44px; }
section.band, section.room { background: var(--sec); box-shadow: 0 0 0 100vmax var(--sec); clip-path: inset(0 -100vmax); }
section.band { --sec: var(--band); }
section.room { --sec: var(--warm-900); --bg: var(--warm-900); --bg2: var(--warm-800); --panel: var(--warm-700); --panel-2: var(--warm-800); --line: var(--warm-600); --line-2: #4A443C;
  --ink: var(--warm-100); --ink-2: var(--warm-200); --dim: #A39C90; --meta: #8A8378; --good: #3FA968; --bad: #E5615F; --warn: #F0B83A; --ok: #3FA968;
  --hl: rgba(255, 224, 1, .14); --on-hl: var(--warm-100); --hl-edge: var(--yellow); --edge-strong: var(--yellow); --bar-quiet: #8A8378; color: var(--ink); }
:root[data-theme=dark] section.room { --sec: var(--black); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) section.room { --sec: var(--black); } }
h1, h2 { font-family: var(--display); font-weight: 600; color: var(--ink); }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.25vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; margin: 64px 0 8px; }
h3 { font-size: 16px; margin: 0 0 10px; font-weight: 500; overflow-wrap: anywhere; }
h3.sub { margin: 28px 0 8px; font-size: 18px; }
.lead { color: var(--ink-2); max-width: 880px; margin: 0 0 16px; }
.dim { color: var(--dim); } .small { font-size: 13px; } .mono { font-family: var(--mono-font); font-weight: 500; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }
button { font-family: inherit; }

/* the top bar: wordmark, page name, model chip, live chip, comments, theme */
#bar { position: sticky; top: 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
.brand .wordmark { height: 28px; width: auto; display: block; box-sizing: content-box; }
:root[data-theme=dark] img.wordmark { background: var(--cream); border-radius: 99px; padding: 2px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) img.wordmark { background: var(--cream); border-radius: 99px; padding: 2px; } }
.brand b, .brand .pagename { font-family: var(--display); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.brand .by { color: var(--dim); font-size: 13px; } .brand .by a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--yellow); }
.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: 0; color: var(--ink-2); padding: 2px 9px; font: 500 12px var(--mono-font); cursor: pointer; }
.seg button + button { border-left: 1px solid var(--line-2); }
.seg button:hover { color: var(--ink); background: var(--bg2); } .seg button[aria-pressed=true] { background: var(--yellow); color: var(--black); }
#vitals { display: flex; gap: 14px; flex-wrap: wrap; font: 500 12px var(--mono-font); color: var(--ink-2); }
.vital { display: flex; align-items: center; gap: 6px; }
.vital i { display: inline-block; width: 54px; height: 6px; border-radius: 6px; background: var(--bg2); overflow: hidden; }
.vital i b { display: block; height: 100%; background: var(--ink); }
/* the top navigation (nav.js): five chapters in the page's order, each opening its sections with a line on each;
   the chapter you are in is underlined in yellow (now), and the bar names chapter › section. Phones: one sheet. */
#toc { position: sticky; top: var(--bar-h, 53px); z-index: 19; display: flex; align-items: center; gap: 6px; padding: 6px 16px; background: var(--bg);
  border-bottom: 1px solid var(--line); }
.tocch { display: flex; gap: 2px; }
.tocg { position: relative; }
.tocb { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; color: var(--ink-2); font: 500 14px var(--body);
  padding: 8px 12px; border-radius: 8px; cursor: pointer; white-space: nowrap; }
.tocb::after { content: ""; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); opacity: .6; }
.tocb[aria-expanded=true]::after { transform: translateY(1px) rotate(225deg); }
.tocb:hover, .tocb[aria-expanded=true] { color: var(--ink); background: var(--bg2); }
.tocb.cur { color: var(--ink); box-shadow: inset 0 -2px 0 var(--yellow); }
.tocp { position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; display: grid; gap: 2px; width: max-content; min-width: 280px; max-width: 360px;
  padding: 6px; background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, .22); }
.tocg:nth-last-child(-n+2) .tocp { left: auto; right: 0; }
.tocp a { display: grid; gap: 1px; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--ink); }
.tocp a:hover { background: var(--bg2); }
.tocp a b { font-weight: 600; font-size: 14px; } .tocp a span { font-size: 13px; color: var(--dim); line-height: 1.35; }
.tocp a[aria-current] b::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--yellow);
  box-shadow: 0 0 0 1px var(--now-casing); margin-right: 7px; vertical-align: 1px; }
.tochere { margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 500 12px var(--mono-font); color: var(--dim); }
.tocall { display: none; }
main > section[tabindex="-1"]:focus, main > section[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }
#toc a.navsp { text-decoration: none; font-size: 14px; padding: 7px 14px; border-radius: 8px; white-space: nowrap; }
@media (max-width: 760px) {
  .tocall { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: calc(100vw - 140px); overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 7px 12px; font: 500 14px var(--body); cursor: pointer; }
  .tocall::after { content: ""; flex: none; width: 5px; height: 5px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); }
  .tocch { display: none; position: absolute; top: 100%; left: 0; right: 0; max-height: calc(100vh - 140px); overflow-y: auto; flex-direction: column; gap: 12px;
    padding: 10px 16px 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: 0 16px 30px rgba(0, 0, 0, .18); }
  #toc.open .tocch { display: flex; }
  .tocb, .tocb[aria-expanded=true] { pointer-events: none; padding: 4px 0; font: 600 12px var(--mono-font); color: var(--dim); background: none; } .tocb::after { display: none; }
  .tocb.cur { box-shadow: none; color: var(--ink); }
  .tocp { position: static; display: grid; width: auto; min-width: 0; max-width: none; padding: 0; background: none; border: 0; box-shadow: none; }
  .tochere { display: none; } #toc a.navsp { margin-left: auto; }
  html { scroll-padding-top: 64px; } /* on phones only the section bar sticks */
}

/* surfaces */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; margin: 0 0 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px; position: relative; overflow: hidden; }
.card.live { border-color: var(--ink); }
.card h3 { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.card h3 .pill { flex-shrink: 0; line-height: 18px; margin-top: 1px; }

/* chips and pills: mono caps, charcoal text, a coloured dot says the state (never yellow text on light) */
.pill, .badge { font: 500 11px/18px var(--mono-font); letter-spacing: 0.02em; text-transform: uppercase; border-radius: 4px; padding: 1px 8px;
  border: 1px solid var(--line-2); color: var(--ink); background: var(--panel); white-space: nowrap; }
.pill::before, .badge::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 6px; vertical-align: 0; background: var(--meta); }
.pill.live::before, .badge.live::before { background: var(--success); animation: pulse 1.6s infinite; }
.pill.good::before { background: var(--good); } .pill.bad::before { background: var(--bad); } .pill.warn::before { background: var(--warning); }
.pill.muted { color: var(--dim); }
.mchip { margin-left: 10px; font: 500 11px/18px var(--mono-font); letter-spacing: 0.02em; text-transform: uppercase; border-radius: 4px; padding: 1px 8px; background: var(--yellow); color: var(--black); white-space: nowrap; }
.badge { margin-left: 10px; } .badge.paused::before { background: var(--warning); } .badge.wait { color: var(--dim); }
@keyframes pulse { 50% { opacity: 0.25; } }
.progress { height: 8px; background: var(--bg2); border-radius: 8px; overflow: hidden; margin: 10px 0 6px; }
.progress b { display: block; height: 100%; background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(50, 50, 50, .25); transition: width 1s var(--ease-standard); }
.progress.quiet b { background: var(--bar-quiet); box-shadow: none; } /* finished or ended runs: only the live one is yellow */
.kv { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--dim); }
.kv b { color: var(--ink); font: 500 13px var(--mono-font); }
.tail { margin-top: 8px; font: 12px/1.5 var(--mono-font); color: var(--dim); white-space: pre-wrap; word-break: break-word; max-height: 4.8em; overflow: hidden; }
#queue:empty { display: none; }
.row { display: grid; grid-template-columns: 1fr 320px; gap: 14px; }

/* the 3D views and charts */
.view { position: relative; height: 520px; border-radius: 12px; border: 1px solid var(--line); overflow: hidden; background: var(--panel); margin-bottom: 14px; }
.view.tall { height: 640px; margin: 0; }
.view canvas.gl { width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.view canvas.gl:active { cursor: grabbing; }
.gl-labels { position: absolute; inset: 0; pointer-events: none; }
.gl-label { position: absolute; left: 0; top: 0; font: 11px var(--body); color: var(--ink-2); white-space: nowrap; margin: -7px 0 0 8px; }
.gl-label.big { font-size: 13px; color: var(--ink); font-weight: 500; }
.gl-label.gold { color: var(--ink); font-weight: 500; } .gl-label.violet { color: var(--ink); } .gl-label.teal { color: var(--ink); border-bottom: 2px solid var(--cat-3); }
.gl-tip { position: absolute; display: none; pointer-events: none; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px;
  padding: 6px 9px; font-size: 12px; max-width: 220px; white-space: pre-line; box-shadow: 0 6px 20px rgba(26, 24, 22, .12); }
.gl-off::after { content: "3D needs WebGL, which this browser has switched off."; position: absolute; inset: 0; display: grid; place-items: center; color: var(--dim); }
.side { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.controls { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 13px; }
.controls input { accent-color: var(--black); }
canvas.chart { width: 100%; display: block; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid2.wide { grid-template-columns: 1.4fr 1fr; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.legendbar { display: flex; justify-content: space-between; font-size: 12px; color: var(--dim); margin-top: 6px; }
.att { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.att figure { margin: 0; } .att canvas { width: 100%; border-radius: 4px; image-rendering: pixelated; }
.att figcaption { font-size: 12px; color: var(--dim); margin-top: 4px; }

/* maths */
.mathgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 14px; }
.mathcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.mathcard h3 { color: var(--ink); border-left: 3px solid var(--yellow); padding-left: 8px; }
.mathcard math { font-size: 17px; display: block math; scrollbar-width: thin; scrollbar-color: var(--line-2) transparent; margin: 12px 0; overflow-x: auto; overflow-y: hidden; padding: 4px 0; }
.mathcard p { color: var(--ink-2); font-size: 14px; margin: 6px 0; }
.mathcard .now { color: var(--ink); font-size: 13px; border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; }
.mathcard .now b { font-family: var(--mono-font); font-weight: 500; background: var(--hl); color: var(--on-hl); padding: 0 4px; border-radius: 4px; }
.mathcard .oneline { color: var(--ink); font-size: 15px; margin: 4px 0 6px; }
.mathcard .like { color: var(--ink-2); font-size: 14px; background: var(--bg2); border-left: 3px solid var(--yellow); padding: 6px 10px; border-radius: 0; }
.mathcard .syms { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; margin-top: 8px; }
.mathcard .syms dt { color: var(--ink); font-family: "Cambria Math", serif; } .mathcard .syms dd { margin: 0; color: var(--dim); }
.mathcard math [data-x]:hover { background: var(--hl); color: var(--on-hl); }
.mathcard math + math { margin-top: -6px; }

/* the plan as a tree, tables, journal, clips */
.tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dashed var(--line-2); }
#tree > ul { padding-left: 0; border: 0; }
.node { position: relative; padding: 6px 0 6px 14px; }
.node::before { content: ""; position: absolute; left: -1px; top: 15px; width: 10px; height: 10px; border-radius: 50%; transform: translateX(-50%); background: var(--meta); }
#tree > ul > li > .node::before { left: 4px; }
.node.done::before { background: var(--good); } .node.won::before { background: var(--yellow); box-shadow: 0 0 0 1px var(--black); }
.node.failed::before { background: var(--bad); } .node.active::before { background: var(--ink); animation: pulse 1.6s infinite; }
.node.next::before { background: transparent; border: 1px solid var(--ink); } .node.parked::before { background: transparent; border: 1px dashed var(--meta); }
.node b { font-weight: 500; } .node .when { color: var(--dim); font: 12px var(--mono-font); margin-left: 8px; }
.node p { margin: 2px 0 0; color: var(--ink-2); font-size: 13px; }
ol.left { margin: 0; padding-left: 20px; } ol.left li { margin: 0 0 8px; } ol.left li span.d { color: var(--dim); font-size: 13px; display: block; } ol.left .pill { margin-left: 6px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; } td, th { border-bottom: 1px solid var(--line); padding: 7px 6px; text-align: left; vertical-align: top; }
th { color: var(--dim); font-weight: 500; font-size: 13px; }
.tablewrap { overflow-x: auto; } /* wide tables scroll inside their card on the smallest phones */
.journal { display: grid; gap: 10px; }
.entry { display: grid; grid-template-columns: 120px 1fr; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.entry time { color: var(--dim); font: 12px/1.5 var(--mono-font); } .entry b { display: block; font-weight: 500; }
.entry p { margin: 2px 0 0; color: var(--ink-2); font-size: 14px; }
.entry .kind { display: inline-block; font: 500 11px var(--mono-font); text-transform: uppercase; letter-spacing: 0.02em; color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; padding: 0 6px; margin-bottom: 4px; }
.kind.result, .kind.measure { background: var(--hl); border-color: var(--hl-edge); color: var(--on-hl); }
.kind.problem { border-color: var(--bad); } .kind.decision, .kind.finding { border-color: var(--ink); }
.clips { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.clip { border: 1px solid var(--line); border-radius: 12px; padding: 10px; background: var(--panel); }
.clip .tag { font: 11px var(--mono-font); color: var(--dim); margin-top: 6px; text-transform: uppercase; }
audio { width: 100%; height: 32px; margin-top: 4px; }
details.test { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
details.test summary { cursor: pointer; font-weight: 500; display: flex; justify-content: space-between; gap: 12px; }
details.test .listeners { margin: 6px 0 0; color: var(--ink-2); font-weight: 500; }
.corrections { padding-left: 18px; margin: 4px 0 0; } .corrections li { margin-bottom: 4px; }
footer { margin-top: 48px; padding: 24px 16px 96px; text-align: center; background: var(--ink-900); color: var(--warm-100); font-size: 14px; }
footer a { color: var(--yellow) !important; border-bottom-color: var(--yellow) !important; }
footer .endorse { font-family: var(--display); font-weight: 600; letter-spacing: -0.01em; }
.footsocial, .footlegal { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 20px; margin: 12px 0 0; font-size: 13px; }
@media (max-width: 980px) { .row, .grid2, .grid2.wide, .grid3 { grid-template-columns: minmax(0, 1fr); } .att { grid-template-columns: 1fr 1fr; } .view.tall { height: 480px; } }
@media (max-width: 600px) { .view { height: 380px; } .entry { grid-template-columns: 1fr; } .att { grid-template-columns: 1fr; } }

/* explanations, introduction, health, guides, maths, map */
#xtip { position: fixed; z-index: 100; display: none; max-width: 380px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 12px 14px; font-size: 13.5px; line-height: 1.55; box-shadow: 0 12px 32px rgba(26, 24, 22, .16); pointer-events: none; }
#xtip b { display: block; font-size: 14.5px; margin-bottom: 4px; color: var(--ink); font-weight: 500; }
#xtip p { margin: 0 0 6px; color: var(--ink-2); }
#xtip .xh { font: 500 11px var(--mono-font); text-transform: uppercase; letter-spacing: 0.02em; color: var(--dim); margin-top: 6px; }
#xtip .num { font-family: var(--mono-font); font-weight: 500; background: var(--hl); color: var(--on-hl); padding: 0 3px; border-radius: 3px; }
[data-x] { cursor: help; }
h2[data-x], h3[data-x], label[data-x] { text-decoration: underline dotted var(--line-2); text-underline-offset: 6px; }
.hero h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; word-spacing: 0.06em; margin: 40px 0 8px; color: var(--ink); }
.hero .lead { font-size: 18px; max-width: 980px; }
.h2in { margin: 0 0 8px; font-size: 20px; }
#pipe { width: 100%; height: auto; display: block; }
#pipe .blk rect { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; rx: 12; transition: stroke var(--dur-base); }
#pipe .blk:hover rect { stroke: var(--ink); }
#pipe .blk.hot rect { stroke: var(--edge-strong); stroke-width: 2.5; fill: var(--hl); } #pipe .blk.hot text { fill: var(--on-hl); }
#pipe .blk.ghost rect { stroke-dasharray: 6 5; fill: var(--bg2); }
#pipe text { fill: var(--ink); font: 500 15px var(--body); } #pipe text.sub { fill: var(--dim); font: 12px var(--body); }
#pipe .flow { fill: none; stroke: var(--line-2); stroke-width: 2; }
#pipe .flow.live { stroke: var(--ink); stroke-dasharray: 8 10; animation: flow 1.2s linear infinite; }
#pipe .teach { fill: none; stroke: var(--yellow-dark); stroke-width: 1.6; stroke-dasharray: 3 6; animation: flow 2s linear infinite; }
@keyframes flow { to { stroke-dashoffset: -36; } }
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 8px; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.step b { color: var(--ink); font-family: var(--display); font-weight: 600; } .step p { margin: 6px 0 0; color: var(--ink-2); font-size: 14px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.check { background: var(--panel); border: 1px solid var(--line); border-left: 4px solid var(--meta); border-radius: 0 12px 12px 0; padding: 12px 14px; }
.check.ok { border-left-color: var(--good); } .check.warn { border-left-color: var(--warning); } .check.bad { border-left-color: var(--bad); }
.check b { display: block; font-weight: 500; } .check span { color: var(--ink-2); font-size: 13.5px; }
.check .v { float: right; font: 500 11px var(--mono-font); text-transform: uppercase; color: var(--ink); }
#healthPill .pill { margin-left: 10px; }
.paused-note { background: var(--hl); border-bottom: 1px solid var(--hl-edge); color: var(--on-hl); font-size: 14px; padding: 8px 20px; text-align: center; }
.view .guide { position: absolute; left: 14px; top: 12px; max-width: 300px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; font-size: 12.5px; z-index: 2; pointer-events: auto; }
.view .guide ol { margin: 6px 0; padding-left: 18px; color: var(--ink-2); } .view .guide li { margin: 2px 0; }
.legendbar .orange::before, .legendbar .blue::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.legendbar .orange::before { background: var(--cat-2); } .legendbar .blue::before { background: var(--cat-3); } /* colour as a swatch; the words stay readable */
.algos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(380px, 100%), 1fr)); gap: 14px; }
.algo { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.algo h4 { margin: 0 0 8px; color: var(--ink); font-size: 16px; font-weight: 500; }
.algo ol { margin: 0; padding-left: 0; list-style: none; counter-reset: s; }
.algo li { counter-increment: s; position: relative; padding: 6px 0 6px 36px; border-bottom: 1px dashed var(--line); font-size: 14px; }
.algo li::before { content: counter(s); position: absolute; left: 0; top: 6px; width: 24px; height: 24px; border-radius: 50%; background: var(--yellow); color: var(--black);
  display: grid; place-items: center; font: 700 12px var(--mono-font); }
.algo li i { color: var(--dim); display: block; font-size: 12.5px; font-style: normal; }
.algo .cost { margin-top: 8px; font: 12px var(--mono-font); color: var(--ink-2); }
.maptools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.maptools button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 4px 12px; cursor: pointer; font-size: 14px; }
.maptools button:hover { border-color: var(--ink); }
.maptools .legend { font-size: 13px; color: var(--dim); margin-left: 8px; }
.st { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin: 0 4px 0 10px; vertical-align: middle; }
.st.done { background: var(--good); } .st.won { background: var(--yellow); box-shadow: 0 0 0 1px var(--black); } .st.failed { background: var(--bad); } .st.active { background: var(--ink); }
.st.next { border: 1px solid var(--ink); } .st.parked { border: 1px dashed var(--meta); }
.maptools button.primary { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.mapsum { margin: 4px 0 12px; }
.sumbar { display: flex; gap: 2px; height: 10px; border-radius: 99px; overflow: hidden; margin-bottom: 10px; } .sumbar i { display: block; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.chip { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.chip:hover { border-color: var(--ink); } .chip.on { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.chip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; } .chip b { margin-right: 3px; font-weight: 500; }
.mapwrap { position: relative; padding: 0; overflow: hidden; margin-bottom: 16px; }
#mapSvg { width: 100%; height: 640px; display: block; cursor: grab; touch-action: none; user-select: none; }
#mapSvg .mn { cursor: pointer; transition: opacity 0.35s; }
#mapSvg .mn > rect { stroke-width: 1.5; } #mapSvg .mn:hover > rect { stroke: var(--ink) !important; } #mapSvg .mn.sel > rect { stroke: var(--ink) !important; stroke-width: 2.5; }
#mapSvg .mn.now > rect { stroke: var(--now-casing) !important; stroke-width: 2.5; } /* now: filled yellow, solid (a dashed edge read as switched off) */
#mapSvg .mn.now > circle { animation: nowpulse 1.8s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes nowpulse { 50% { transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) { #mapSvg .mn.now > circle { animation: none; } }
#mapSvg text { font: 500 13px var(--body); fill: var(--ink); pointer-events: none; } #mapSvg text.sub { font: 11.5px var(--body); fill: var(--dim); }
#mapSvg text.gl { font: 700 11px var(--mono-font); }
#mapSvg .edge { fill: none; stroke: var(--line-2); stroke-width: 1.6; transition: opacity 0.35s, stroke 0.2s; } #mapSvg .spine { stroke-dasharray: 4 5; }
#mapSvg .edge.live { stroke: var(--ink); stroke-dasharray: 6 6; animation: flow 1.2s linear infinite; }
#mapSvg .tog { cursor: pointer; } #mapSvg .tog circle { fill: var(--panel); stroke: var(--line-2); } #mapSvg .tog:hover circle { stroke: var(--ink); }
#mapSvg .tog text { font: 700 11px var(--mono-font); }
#mapSvg.focus .mn:not(.hl), #mapSvg.focus .edge:not(.hl) { opacity: 0.25; } #mapSvg.focus .edge.hl { stroke: var(--ink); stroke-width: 2.2; }
#mapSvg.filtering .mn:not(.match) { opacity: 0.14; } #mapSvg.filtering .edge { opacity: 0.25; }
#mapSvg.replay .mn:not(.shown), #mapSvg.replay .edge:not(.shown) { opacity: 0.04; }
#mapSvg.replay .mn.cur > rect { stroke: var(--black) !important; stroke-width: 2.5; }
.mapdetail { position: absolute; top: 12px; right: 12px; width: 360px; max-width: calc(100% - 24px); max-height: calc(100% - 24px); overflow: auto; display: none;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 12px; padding: 14px 16px; box-shadow: 0 12px 32px rgba(26, 24, 22, .16); }
.mapdetail.on { display: block; }
.mapdetail .x { position: absolute; top: 6px; right: 10px; background: none; border: 0; color: var(--dim); font-size: 22px; cursor: pointer; }
.mapdetail .crumb { font: 11px var(--mono-font); color: var(--dim); margin-bottom: 4px; padding-right: 22px; text-transform: uppercase; }
.mapdetail h3 { color: var(--ink); margin: 0 0 4px; padding-right: 22px; } .mapdetail p { color: var(--ink-2); font-size: 14px; margin: 6px 0; } .mapdetail .stat { font-weight: 500; }
.mapdetail ul { list-style: none; padding: 0; margin: 4px 0; } .mapdetail li { padding: 4px 0; cursor: pointer; font-size: 14px; } .mapdetail li:hover { text-decoration: underline; text-decoration-color: var(--yellow); }
.mapcap { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); width: min(680px, calc(100% - 32px)); z-index: 30; display: none; box-shadow: 0 12px 32px rgba(26, 24, 22, .2);
  background: var(--panel); border: 1px solid var(--ink); border-radius: 12px; padding: 10px 14px; font-size: 14px; color: var(--ink-2); }
.mapcap.on { display: block; } .mapcap b { color: var(--ink); }
#timeline { width: 100%; height: auto; display: block; }
#timeline circle { cursor: help; } #timeline text { fill: var(--dim); font: 11px var(--mono-font); }
#pathStats { margin: -4px 0 10px; }
@media (max-width: 980px) { .steps { grid-template-columns: 1fr 1fr; } .view .guide { max-width: 220px; font-size: 11.5px; } }
@media (max-width: 600px) { .steps { grid-template-columns: 1fr; } .view .guide { display: none; } }
#clock { margin-left: 10px; }

/* the goal, model card, versions, sources */
.goalhero { padding: 32px 0 8px; } .goalhero h1 { font-size: clamp(2.5rem, 2rem + 3vw, 4.5rem); line-height: 1.05; letter-spacing: -0.03em; word-spacing: 0.06em; margin: 6px 0 12px; }
.goalhero .eyebrow { display: inline-block; font: 500 12px var(--mono-font); text-transform: uppercase; letter-spacing: 0.02em; color: var(--on-hl); background: var(--hl);
  border: 1px solid var(--hl-edge); border-radius: 4px; padding: 2px 8px; }
.goalboard { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 14px 0 8px; }
.goal { background: var(--panel); border: 1px solid var(--line); border-top: 3px solid var(--meta); border-radius: 12px; padding: 14px 16px; }
.goal.done { border-top-color: var(--good); } .goal.active { border-top-color: var(--yellow); } .goal.next { border-top-color: var(--line-2); }
.goal .gh { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .goal .gnow { font: 600 22px var(--display); margin: 8px 0; }
.goal p { color: var(--ink-2); font-size: 13.5px; margin: 8px 0 0; }
.meter { position: relative; height: 12px; background: var(--bg2); border-radius: 99px; margin: 22px 0 10px; }
.meter i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(50, 50, 50, .25); }
.meter .mk { position: absolute; top: -18px; transform: translateX(-50%); font: 11px var(--mono-font); color: var(--ink); white-space: nowrap; }
.meter .mk::after { content: ""; position: absolute; left: 50%; top: 16px; width: 2px; height: 16px; background: var(--ink); }
.meter .mk.r5 { top: 16px; font-size: 0; } .meter .mk.r5::after { top: -14px; background: var(--teal); }
.minibars { margin: 8px 0 0; } .minibars div { display: grid; grid-template-columns: 90px 1fr 48px; align-items: center; gap: 8px; font-size: 13px; margin: 3px 0; }
.minibars i { display: block; height: 10px; border-radius: 99px; background: var(--ink); } .minibars b { text-align: right; font: 500 12px var(--mono-font); }
.minibars .small { display: block; margin-top: 2px; }
#modelCard .mtype { color: var(--ink-2); } table.versions tr.cur td { background: var(--hl); color: var(--on-hl); }
.sources ul { columns: 2; column-gap: 28px; padding-left: 18px; } .sources li { break-inside: avoid; margin: 0 0 6px; }
table.seals td.mono { font-size: 12px; }
@media (max-width: 980px) { .goalboard { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .goalboard { grid-template-columns: 1fr; } .sources ul { columns: 1; } }
main a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--yellow-dark); } main a:hover { background: var(--hl); color: var(--on-hl); }

/* comments */
.cbar { display: inline-flex; gap: 6px; margin-left: 4px; }
.cbar button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 1px 10px; font: 500 12px var(--mono-font); text-transform: uppercase; cursor: pointer; }
.cbar button:hover { border-color: var(--ink); } .cbar #cCount { margin-left: 3px; background: var(--yellow); color: var(--black); border-radius: 4px; padding: 0 4px; }
body.c-mode #cMode { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
body.c-mode main [data-x]:hover, body.c-mode main canvas:hover, body.c-mode .entry:hover { outline: 2px dashed var(--black); outline-offset: 2px; cursor: crosshair; }
body.c-mode #mapSvg .mn:hover > rect { stroke: var(--black) !important; stroke-width: 3; }
#cHint { position: fixed; left: 50%; top: 104px; transform: translateX(-50%); z-index: 40; background: var(--black); border-radius: 12px; padding: 6px 8px 6px 16px; font-size: 14px; color: var(--warm-100); }
#cHint button, .cbf button, .cph button { background: var(--yellow); color: var(--black); border: 0; border-radius: 8px; padding: 3px 12px; cursor: pointer; margin-left: 8px; font-weight: 500; }
#cBox { position: fixed; z-index: 45; width: min(380px, calc(100% - 24px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; box-shadow: 0 12px 32px rgba(26, 24, 22, .2); }
#cBox .cbh { font-size: 13.5px; margin-bottom: 8px; padding-right: 26px; position: relative; } #cBox .cbh b { color: var(--ink); font-weight: 500; }
#cBox .cbh button { position: absolute; right: -4px; top: -6px; background: none; border: 0; color: var(--dim); font-size: 20px; cursor: pointer; margin: 0; padding: 0 4px; }
#cBox input, #cBox textarea { width: 100%; box-sizing: border-box; background: var(--bg); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; padding: 7px 9px; font: inherit; font-size: 14px; margin-bottom: 8px; }
#cBox textarea { min-height: 96px; resize: vertical; } .c-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0; }
.cbf { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
#cPanel { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100%); z-index: 42; background: var(--panel); color: var(--ink); border-left: 1px solid var(--line-2); overflow-y: auto; padding: 14px 16px; box-shadow: -12px 0 32px rgba(26, 24, 22, .16); }
.cph { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; } .cph #cClose { margin-left: auto; background: none; color: var(--dim); border: 1px solid var(--line-2); }
#cPanel h4 { color: var(--ink); margin: 14px 0 6px; font: 500 11px var(--mono-font); text-transform: uppercase; letter-spacing: 0.02em; }
.cwrap { background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; margin: 0 0 8px; cursor: pointer; } .cwrap:hover { border-color: var(--ink); }
.cabout { font: 11px var(--mono-font); color: var(--dim); text-transform: uppercase; } .cmh { font-size: 13px; margin-top: 2px; } .cmh span, .cmr span { color: var(--dim); font-size: 12px; }
.cmt { white-space: pre-wrap; font-size: 14px; color: var(--ink); margin-top: 3px; word-wrap: break-word; }
.cmr { border-left: 3px solid var(--yellow); margin-top: 8px; padding-left: 9px; } .cmr b { color: var(--ink); font-size: 13px; font-weight: 500; }
.c-host { position: relative; }
.cmark { position: absolute; top: -9px; right: -9px; z-index: 5; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 99px; border: 1px solid var(--black); background: var(--yellow); color: var(--black); font: 700 11px var(--mono-font); cursor: pointer; }
.ccount { margin-left: 10px; vertical-align: middle; font: 500 11px var(--mono-font); background: none; border: 1px solid var(--line-2); color: var(--ink-2); border-radius: 4px; padding: 1px 8px; cursor: pointer; }
.c-flash { animation: cflash 1.6s ease-out; } @keyframes cflash { 0%, 40% { box-shadow: 0 0 0 3px var(--yellow); } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (max-width: 600px) { #cHint { top: auto; bottom: 16px; width: calc(100% - 32px); } }
@media (max-width: 600px) { #bar { position: static; } #toc { top: 0; } #vitals { gap: 4px 12px; font-size: 11px; } .vital i { width: 34px; } .brand .wordmark { height: 24px; } }

/* learning views */
/* the hear-it clip at the top: one button, the languages it speaks (yellow while that one speaks), the words */
.hearit { margin: 2px 0 20px; max-width: 46em; }
.hihead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.hiplay { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--bg); border: 0; border-radius: 999px; padding: 10px 20px 10px 16px; font: 600 16px var(--body); cursor: pointer; }
.hiplay:hover { background: var(--ink-2); } .hiplay[aria-pressed=true] { background: var(--yellow); color: var(--black); }
.hiicon { width: 0; height: 0; border-left: 12px solid currentColor; border-top: 7px solid transparent; border-bottom: 7px solid transparent; }
.hiplay[aria-pressed=true] .hiicon { width: 4px; height: 14px; border: 0; background: currentColor; box-shadow: 7px 0 0 currentColor; margin-right: 7px; }
.hidur { font: 500 13px var(--mono-font); opacity: .75; }
.hilangs { display: flex; flex-wrap: wrap; gap: 6px; }
.hipill { background: var(--panel); color: var(--ink-2); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 12px; font: 14px var(--body); cursor: pointer; }
.hipill:hover { border-color: var(--ink); color: var(--ink); } .hipill.on { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
.hiline { font-size: clamp(18px, 1vw + 13px, 23px); line-height: 1.4; margin: 12px 0 4px; min-height: 1.4em; color: var(--ink-2); }
.hearit.playing .hiline { color: var(--ink); }
.hinote { font-size: 13px; color: var(--dim); margin: 0; }
.hiwave { display: block; width: 100%; max-width: 46em; height: 64px; margin: 14px 0 2px; cursor: pointer; }
.tourbtn { background: var(--yellow); color: var(--black); border: 0; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 500; cursor: pointer; }
.tourbtn:hover { background: var(--yellow-hover); }
#tourBox { position: fixed; z-index: 50; border: 2px solid var(--yellow); border-radius: 12px; box-shadow: 0 0 0 9999px var(--overlay); pointer-events: none; transition: all var(--dur-slow) var(--ease-standard); }
#tourCard { position: fixed; z-index: 51; left: 50%; bottom: 22px; transform: translateX(-50%); width: min(520px, calc(100% - 32px)); background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 16px; }
#tourCard .tc { font: 500 11px var(--mono-font); text-transform: uppercase; color: var(--dim); } #tourCard p { margin: 6px 0 10px; color: var(--ink); }
#tourCard .tb { display: flex; gap: 8px; justify-content: flex-end; } #tourCard button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 3px 14px; cursor: pointer; }
#tourCard button[data-t="1"] { background: var(--yellow); border-color: var(--yellow); color: var(--black); }
#stepSvg { width: 100%; height: auto; display: block; } #stepSvg .sn rect { fill: var(--panel); stroke: var(--line-2); stroke-width: 1.5; transition: stroke var(--dur-slow), fill var(--dur-slow); }
#stepSvg .sn.on rect { stroke: var(--edge-strong); fill: var(--hl); } #stepSvg text.t { fill: var(--ink); font: 600 22px var(--display); }
#stepSvg text.sub { fill: var(--dim); font: 13px var(--body); } #stepSvg .sl { color: var(--ink); font: 500 13px/1.25 var(--body); text-align: center; }
#stepDot { fill: var(--yellow); stroke: var(--black); stroke-width: 1.5; } .stepcap { min-height: 44px; color: var(--ink-2); } .stepcap .num { font-family: var(--mono-font); color: var(--ink); }
.archmap { display: flex; gap: 4px; height: 360px; padding: 10px; } .archcol { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.archhead { font: 11px var(--mono-font); color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-bottom: 2px; }
.archu { border-radius: 4px; min-height: 3px; display: flex; align-items: center; justify-content: center; overflow: hidden; cursor: help; }
.archu span { font: 10px var(--mono-font); color: var(--black); white-space: nowrap; }
.hearlist { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(520px, 100%), 1fr)); gap: 14px; }
.hearrow { display: grid; grid-template-columns: 34px 170px 1fr; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; color: var(--ink-2); }
.hearheard { margin: -2px 0 12px 42px; } .hearheard .grheard { font-size: 15px; margin: 0; } .hearheard .grpills { margin: 4px 0 0; } .hearheard .grpill { font-size: 13px; padding: 2px 10px; }
.hearclip .hearmeant { font-size: 15px; margin: 0 0 10px; } .hearrow.nospec { grid-template-columns: 34px 1fr; }
.hearrow canvas { width: 100%; height: 96px; border-radius: 4px; background: var(--bg2); }
.hearrow .play { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--black); cursor: pointer; }
.hbar { display: grid; grid-template-columns: 90px minmax(0, 1fr) 70px; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.hbar i { display: block; height: 10px; border-radius: 99px; background: var(--ink); } .hbar b { text-align: right; font: 500 12px var(--mono-font); }
.hbar em { grid-column: 2 / 4; font-style: normal; color: var(--dim); font-size: 12px; margin-top: -4px; }
.hist { display: flex; align-items: flex-end; gap: 6px; height: 170px; padding-top: 10px; } .hist div { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.hist i { display: block; width: 100%; background: var(--ink); border-radius: 4px 4px 0 0; min-height: 2px; } .hist span { font: 10.5px var(--mono-font); color: var(--dim); margin-top: 4px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
#glossaryFind { width: min(480px, 100%); background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 4px; padding: 8px 10px; font: inherit; margin-bottom: 10px; }
.glossary { display: grid; grid-template-columns: minmax(150px, 240px) 1fr; gap: 6px 16px; margin: 0; max-height: 520px; overflow-y: auto; }
.glossary dt { color: var(--ink); font-weight: 500; } .glossary dd { margin: 0; color: var(--ink-2); font-size: 14px; }
@media (max-width: 600px) { .hearrow { grid-template-columns: 34px 1fr; } .hearheard { margin-left: 0; } .hearrow canvas { grid-column: 1 / 3; } .archmap { height: 260px; } .glossary { grid-template-columns: 1fr; } }
details.test.blind .answer { display: none; } details.test.blind.revealed .answer { display: inline; } details.test.blind.revealed p.answer { display: block; }
button.pick { margin-top: 6px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 2px 12px; cursor: pointer; font-size: 12.5px; }
button.pick:hover { border-color: var(--ink); }
button.pick:disabled { opacity: 0.5; cursor: default; } button.pick.chosen { opacity: 1; background: var(--yellow); border-color: var(--yellow); color: var(--black); }
#seals { overflow-x: auto; } table.seals td { word-break: break-word; }
#tmSlider { width: min(720px, 100%); accent-color: var(--black); } #tmBanner button { margin-left: 10px; background: var(--yellow); border: 0; color: var(--black); border-radius: 8px; padding: 1px 10px; cursor: pointer; }

/* the brand's only loader: three yellow dots rolling in turn (still under reduced motion) */
.dots { display: inline-flex; gap: 5px; vertical-align: middle; } .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 1px var(--black); animation: roll 1s var(--ease-standard) infinite; }
.dots i:nth-child(2) { animation-delay: .15s; } .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes roll { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* the time bar: docked at the bottom; on phones it starts as a "Time" chip */
#timebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--black); color: var(--warm-100); border-top: 1px solid var(--warm-600); }
#tbBody { display: flex; align-items: center; gap: 14px; padding: 8px 16px; max-width: 1280px; margin: 0 auto; }
#tbLabel { flex: 0 0 auto; min-width: 210px; font: 500 12px var(--mono-font); text-transform: uppercase; letter-spacing: 0.02em; color: var(--yellow); }
#tbTrack { position: relative; flex: 1; height: 28px; }
#tbTicks { position: absolute; left: 9px; right: 9px; top: 0; bottom: 0; pointer-events: none; }
#tbTicks i { position: absolute; top: 9px; width: 1px; height: 10px; background: var(--warm-600); }
#tbTicks i.round { top: 5px; height: 18px; width: 2px; background: var(--warm-200); }
#tbTicks b { position: absolute; top: 22px; width: 5px; height: 5px; margin-left: -2px; border-radius: 50%; background: var(--coral); }
#tbRange { position: absolute; inset: 0; width: 100%; margin: 0; background: transparent; accent-color: var(--yellow); cursor: pointer; }
#tbLive, #tbOpen { flex: 0 0 auto; background: var(--yellow); color: var(--black); border: 0; border-radius: 8px; padding: 5px 12px; font-weight: 500; font-size: 13px; cursor: pointer; }
#tbOpen { display: none; }
#timebar.past { border-top: 2px solid var(--yellow); }
body.has-timebar main { padding-bottom: 140px; }
.tnote { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin: 0 0 12px; padding: 8px 12px; background: var(--hl); color: var(--on-hl); border-left: 3px solid var(--hl-edge); font-size: 14px; }
.tnote.now { background: var(--panel-2); color: var(--dim); border-left-color: var(--line-2); } /* blocks that only show now: quiet, so the yellow notes mark the past */
.tnote button { background: var(--ink); color: var(--bg); border: 0; border-radius: 8px; padding: 3px 10px; font-size: 13px; cursor: pointer; }
.tnote button[aria-pressed=true] { background: var(--yellow); color: var(--black); box-shadow: inset 0 0 0 1px var(--black); }
.thenclips { margin-bottom: 8px; }
.tnowonly > :not(h2):not(.tnote) { opacity: .4; filter: saturate(.2); transition: opacity var(--dur-base) var(--ease-standard), filter var(--dur-base) var(--ease-standard); } /* the past on view: a block that can only show now steps back */
.tloading > :not(h2):not(.tnote) { opacity: .35; transition: opacity var(--dur-base) var(--ease-standard); } /* past data on its way: what shows is now, dimmed */
#tbTicks .rl { position: absolute; top: -13px; transform: translateX(-2px); font: 500 10px/12px var(--mono-font); color: var(--warm-200); white-space: nowrap; text-transform: uppercase; letter-spacing: 0.02em; }
#tbTicks .rl.narrow { display: none; }
#tbTicks b.ver { top: 1px; width: 6px; height: 6px; margin-left: -3px; border-radius: 1px; background: var(--yellow); }
#tbTrack { margin-top: 10px; }
.badge.then { white-space: normal; }
@media (max-width: 600px) {
  #timebar { left: auto; right: 12px; bottom: 12px; border: 0; border-radius: 12px; background: transparent; }
  #tbOpen { display: block; box-shadow: 0 0 0 1px var(--black); }
  #tbBody { display: none; }
  #timebar.open, #timebar.past { left: 12px; background: var(--black); border-top: 0; }
  #timebar.open #tbBody, #timebar.past #tbBody { display: flex; flex-wrap: wrap; padding: 8px 10px; }
  #timebar.open #tbOpen, #timebar.past #tbOpen { display: none; }
  #tbLabel { min-width: 0; flex: 1 1 100%; }
  body.has-timebar #cHint { bottom: 56px; } /* above the Time chip and the sponsor pill */
  body.tb-open #cHint, body.tb-past #cHint { bottom: 152px; } /* above the open bar and the pill over it */
  #tbTicks .rl.wide { display: none; } #tbTicks .rl.narrow { display: block; }
}

/* hear it learn: one player, the same sentence at every checkpoint, what a listener heard under it */
.grow { max-width: 920px; }
.grchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 18px; }
.grchips button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 99px; min-height: 36px; padding: 0 14px; font: 500 14px var(--body); cursor: pointer; }
.grchips button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.grrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.grplay { width: 64px; height: 64px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--black); font-size: 22px; cursor: pointer; flex: none;
  box-shadow: inset 0 0 0 2px var(--black); transition: transform var(--dur-fast) var(--ease-standard); }
.grplay:active { transform: scale(.96); }
.grwhere { flex: 1 1 220px; min-width: 0; } .grwhere b { font: 600 clamp(18px, 1vw + 12px, 22px)/1.2 var(--display); color: var(--ink); }
.grlive { display: block; font-size: 13px; color: var(--dim); margin-top: 2px; } .grlive b { font-family: var(--mono-font); color: var(--ink); }
.grteach { background: none; border: 1px solid var(--line-2); color: var(--ink); border-radius: 99px; min-height: 36px; padding: 0 14px; font: 500 14px var(--body); cursor: pointer; }
.grtrack { position: relative; margin: 18px 0 30px; }
.grrange { width: 100%; accent-color: var(--yellow-dark); height: 28px; cursor: pointer; }
.grticks { position: relative; height: 16px; }
.grticks span { position: absolute; top: 0; font: 500 11px var(--mono-font); color: var(--dim); white-space: nowrap; }
.grtext { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; }
.grmeant, .grheard, .hearmeant { margin: 0 0 8px; font-size: 17px; line-height: 1.55; }
.grmeant, .hearmeant { color: var(--ink-2); }
.grlab { display: inline-block; min-width: 56px; font: 500 12px var(--mono-font); color: var(--dim); }
.w-ok { color: var(--ink); }
.w-sub { color: var(--ink); text-decoration: underline 2px var(--coral); text-underline-offset: 4px; }
.w-del { color: var(--ink-2); text-decoration: line-through 2px var(--coral); } /* marks carry the colour; the letters stay text-coloured */
.w-ins { color: var(--ink-2); font-style: italic; text-decoration: underline dotted 2px var(--teal); text-underline-offset: 4px; }
.grpills { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.grpill { border-radius: 99px; padding: 4px 12px; font: 600 14px var(--body); background: var(--panel-2); color: var(--ink); }
.grpill.clear { background: var(--hl); color: var(--on-hl); } .grpill.miss { background: var(--coral); color: var(--black); }
.vplay { width: 44px; } .vdisc { width: 34px; height: 34px; border-radius: 50%; border: 0; background: var(--yellow); color: var(--black); font-size: 12px; cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--black); }
.vnone { display: inline-block; width: 34px; height: 34px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1.5px var(--line-2); cursor: default; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* the chrome: one header line, Sponsor as the nav's yellow last item, Right now (health and the queue together) */
#toc a.navsp { background: var(--yellow); color: var(--black); font-weight: 600; margin-left: 6px; }
#toc a.navsp:hover { background: var(--yellow-hover); color: var(--black); }
.hdot { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; font: 500 12px var(--mono-font); color: var(--ink-2); text-decoration: none; border: 0; }
.hdot i { width: 9px; height: 9px; border-radius: 50%; background: var(--good); }
.hdot.warn i { background: var(--warn); } .hdot.bad i { background: var(--bad); }
.nowhead { display: flex; align-items: center; gap: 16px; margin: 0 0 14px; }
.nowring { flex: none; width: 56px; height: 56px; }
.nowring .rbg { fill: none; stroke: var(--line); stroke-width: 5; } .nowring .rfg { fill: none; stroke: var(--now); stroke-width: 5; stroke-linecap: round; }
.nowring text { font: 600 11px var(--mono-font); fill: var(--ink); }
.nowline { margin: 0; font-size: clamp(16px, 0.6vw + 13px, 19px); line-height: 1.5; color: var(--ink); max-width: 72ch; }
.checks { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chk { border: 1px solid var(--line-2); border-radius: 99px; background: var(--panel); }
.chk[open] { border-radius: 12px; flex-basis: 100%; }
.chk summary { list-style: none; cursor: pointer; padding: 6px 12px; font-size: 14px; font-weight: 500; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.chk summary::-webkit-details-marker { display: none; }
.chk summary i { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: none; }
.chk.warn summary i { background: var(--warn); } .chk.bad summary i { background: var(--bad); }
.chk p { margin: 0; padding: 0 14px 10px 29px; font-size: 14px; color: var(--ink-2); }
.nowgrid .panel h3 { margin-top: 0; }
.departures { list-style: none; margin: 0; padding: 0; }
.dep { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.dep time { font: 500 12px var(--mono-font); color: var(--dim); }
.dep b { font: 500 11px var(--mono-font); text-transform: uppercase; letter-spacing: 0.02em; color: var(--dim); }
.dep.now b { color: var(--on-mark); background: var(--now); padding: 1px 6px; border-radius: 4px; } .dep.failed span { text-decoration: line-through 1.5px var(--bad); color: var(--ink-2); }
.jobsmore { margin-top: 12px; } .jobsmore summary { cursor: pointer; color: var(--ink-2); font-size: 14px; }
@media (max-width: 600px) { /* phones: one slim bottom bar under the Sponsor pill and the Time chip */
  body.has-timebar::after { content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 58px; z-index: 29; background: var(--black); border-top: 1px solid var(--warm-600); }
  #sponsorPill { bottom: 11px; z-index: 31; } #timebar:not(.open):not(.past) { bottom: 11px; z-index: 31; }
  body.tb-open::after, body.tb-past::after { display: none; }
  .hdot span { display: none; }
}
.byline { display: none; margin: -4px 0 10px; color: var(--dim); font-size: 14px; } .byline a { color: var(--ink); border-bottom: 1px solid var(--yellow-dark); text-decoration: none; }
#bar .brand { gap: 6px 8px; } #bar .mchip { margin-left: 4px; } #bar .hdot { margin-left: 4px; }
@media (max-width: 600px) { /* phones: two short header rows; the author's credit moves under the headline */
  #bar .by, #bar #modelChip { display: none; } .byline { display: block; }
  #bar { padding: 8px 16px; } #bar .seg button { padding: 3px 6px; font-size: 11px; }
  .cbar { margin-left: 0; gap: 4px; } .cbar button { padding: 3px 7px; font-size: 11px; } /* the theme switch and the comment buttons share one row */
}
/* stacked bars (the technical side): parts end to end, one scale, a reference line and a goal flag across the rows */
.slegs { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0 0 22px; font-size: 13px; color: var(--ink-2); }
.sleg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.stack { display: grid; grid-template-columns: minmax(120px, 34%) 1fr auto; gap: 12px 12px; align-items: center; }
.srow { display: contents; }
.slab { font-size: 14px; color: var(--ink-2); line-height: 1.3; } .srow.now .slab { color: var(--ink); font-weight: 600; }
.srow.now .slab::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 1.5px var(--now-casing); margin-right: 6px; vertical-align: 1px; }
.strack { display: flex; height: 22px; gap: 2px; position: relative; }
.sseg { display: block; height: 100%; min-width: 2px; border-radius: 3px; }
.stot { font: 500 13px var(--mono-font); color: var(--ink); text-align: right; white-space: nowrap; }
.sline { position: absolute; top: -7px; bottom: -7px; border-left: 2px dashed var(--ink); pointer-events: none; }
.sflag { position: absolute; top: -7px; bottom: -7px; border-left: 2px solid var(--ink); pointer-events: none; } .sflag.top::before { content: "⚑"; position: absolute; top: -16px; left: -3px; font-size: 13px; color: var(--ink); }
.snote { margin: 10px 0 0; font-size: 13px; color: var(--ink-2); } .slinekey, .sflagkey { display: inline-block; width: 18px; height: 0; border-top: 2px dashed var(--ink); margin-right: 8px; vertical-align: 4px; } .sflagkey { border-top-style: solid; }
.pipehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pipetoggle { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 99px; min-height: 34px; padding: 0 14px; font: 500 13px var(--body); cursor: pointer; }
.pipetoggle[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#pipe .wk { display: none; } #pipe.bywork .wk { display: inline; }
#pipe .blk .wk rect.wkbg, #pipe .blk.hot .wk rect.wkbg { fill: var(--bg2); stroke: var(--line); stroke-width: 1; stroke-dasharray: none; }
#pipe .blk .wk rect.wkfg, #pipe .blk.hot .wk rect.wkfg { fill: var(--cat-2); stroke: none; }
/* the research map as a list on phones; the journal by day with filters */
.maplistwrap { display: none; padding: 8px 14px; }
.maplist { list-style: none; margin: 0; padding: 0; } .maplist.sub { padding-left: 18px; border-left: 2px solid var(--line); margin-left: 6px; }
.ml summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 14px 1fr; gap: 2px 8px; padding: 8px 0; align-items: baseline; }
.ml summary::-webkit-details-marker { display: none; }
.ml .mdot { width: 10px; height: 10px; border-radius: 50%; background: var(--dim); grid-row: 1 / 3; align-self: start; margin-top: 5px; }
.ml.done > details .mdot { background: var(--good); } .ml.won > details .mdot { background: var(--path-a); } .ml.failed > details .mdot { background: var(--bad); }
.ml.active > details .mdot { background: var(--now); box-shadow: 0 0 0 2px var(--now-casing); } .ml.next > details .mdot { background: var(--info); }
.ml .mt { font-weight: 500; color: var(--ink); } .ml .mw { grid-column: 2; font-size: 13px; color: var(--dim); }
.ml.now > details > summary .mt { background: var(--hl); color: var(--on-hl); padding: 0 4px; border-radius: 3px; }
.ml details p { margin: 0 0 8px 22px; font-size: 14px; color: var(--ink-2); }
.jchips { margin: 14px 0 6px; } .jchips .kind { font: 500 10px var(--mono-font); text-transform: uppercase; padding: 0 4px; border-radius: 3px; border: 1px solid var(--line-2); }
.jday { position: sticky; top: calc(var(--bar-h, 53px) + 44px); z-index: 2; margin: 16px 0 8px; padding: 6px 0; background: var(--sec); font: 600 15px var(--display); color: var(--ink); }
@media (max-width: 600px) { .mapwrap, .maptools { display: none; } .maplistwrap { display: block; } .jday { top: 46px; } } /* under the sticky nav */
/* the stage strip: a column per stage, a cell per part with its line of how far it moved */
.stripwrap { padding: 14px; overflow-x: auto; }
.strip { display: flex; gap: 6px; min-width: 760px; height: 640px; }
.scol { display: flex; flex-direction: column; gap: 3px; min-width: 96px; }
.shead { flex: none; padding: 0 2px 6px; border-bottom: 2px solid var(--ink); margin-bottom: 3px; }
.shead b { display: block; font: 600 14px var(--display); color: var(--ink); } .shead span { font: 500 11px var(--mono-font); color: var(--dim); }
.shspk { display: block; width: 100%; height: 16px; margin-top: 4px; } .shspk path { fill: none; stroke: var(--cat-2); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.spart { position: relative; min-height: 38px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 3px 6px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); overflow: hidden; cursor: default; }
.spart::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--t) * 100%); background: var(--ink); }
.spart.top { background: var(--hl); border-color: var(--hl-edge); } .spart.top .spl { color: var(--on-hl); }
.spl { font-size: 12px; line-height: 1.2; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.spk { width: 100%; height: 14px; flex: none; } .spk path { fill: none; stroke: var(--ink); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.heatmore { margin-top: 14px; } .heatmore summary { cursor: pointer; color: var(--ink-2); font-size: 14px; margin-bottom: 10px; }
@media (max-width: 600px) { .strip { height: 600px; } }
/* follow one sentence: one attention map with a stage switch; speech as distance travelled */
.attsw { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 10px; }
.attsw button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 99px; min-height: 34px; padding: 0 14px; font: 500 13px var(--body); cursor: pointer; }
.attsw button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.attcap { margin: 0 0 10px; font-size: 16px; color: var(--ink); }
.attone { overflow-x: auto; } .attone > canvas, .attletters { min-width: 640px; }
.attletters { display: flex; padding: 0 4px; font: 500 10px var(--mono-font); color: var(--ink-2); } .attletters span { flex: 1; text-align: center; overflow: hidden; }
.latmore { margin-top: 14px; } .latmore > summary { cursor: pointer; color: var(--ink-2); font-size: 14px; margin-bottom: 10px; }
.dist { width: 100%; height: auto; display: block; }
.dist .dax { stroke: var(--line-2); } .dist .dgap { fill: var(--hl); opacity: .7; }
.dist .dteach { fill: none; stroke: var(--ink); stroke-width: 2.5; } .dist .dstud { fill: none; stroke: var(--now); stroke-width: 4; filter: drop-shadow(0 0 0.8px var(--now-casing)); }
.dist text { font: 500 13px var(--body); fill: var(--ink); } .dist .dshare { font: 600 14px var(--display); } .dist .dsub { font: 12px var(--body); fill: var(--dim); }
/* maths cards fold to a line and today's number; the glossary starts short; one trust row at the foot */
.mathmore > summary { cursor: pointer; margin-top: 6px; font-size: 13px; color: var(--ink-2); }
.mathmore[open] > summary { margin-bottom: 8px; }
.lraise { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
.lraise:hover { text-decoration: underline 1px; text-underline-offset: 3px; }
.glossmore button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 99px; min-height: 36px; padding: 0 16px; font: 500 14px var(--body); cursor: pointer; }
.trustrow { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.devpanel { margin-top: 14px; }
@media (max-width: 760px) { .trustrow { grid-template-columns: 1fr; } }
.techmore { margin-top: 14px; } .techmore summary { cursor: pointer; color: var(--ink-2); font-size: 14px; margin-bottom: 10px; }
@media (max-width: 600px) { .stack { grid-template-columns: 1fr auto; } .slab { grid-column: 1 / -1; margin-bottom: -4px; } }
/* goal gauges: start, now (yellow, a big number) and the goal flag on one track */
.gauge { margin: 6px 0 14px; }
.gnum { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.gbig { font: 600 clamp(28px, 2vw + 18px, 40px)/1 var(--display); color: var(--ink); letter-spacing: -0.01em; }
.gbig small { font: 500 15px var(--body); color: var(--ink-2); letter-spacing: 0; }
.gnowlab { font-size: 13px; color: var(--dim); }
.gtrack { position: relative; height: 8px; border-radius: 8px; background: var(--bg2); box-shadow: inset 0 0 0 1px var(--line); }
.gfill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; background: var(--context); }
.gnowdot { position: absolute; top: 50%; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--now); box-shadow: 0 0 0 2px var(--now-casing); }
.gends { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font: 500 12px/1.35 var(--mono-font); color: var(--ink-2); }
.gends span span { font: 400 12px var(--body); color: var(--dim); }
.gflag { text-align: right; } .gflag::before { content: "⚑ "; color: var(--ink); }
/* scores: one step axis, a switch on phones, the league table */
.scoreswitch { display: none; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
.scoreswitch button { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 99px; min-height: 36px; padding: 0 14px; font: 500 14px var(--body); cursor: pointer; }
.scoreswitch button[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
#curves canvas.chart { cursor: default; }
.leaguewrap { overflow-x: auto; margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.league { width: 100%; border-collapse: collapse; font-size: 14px; }
.league th, .league td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.league thead th { font-weight: 500; color: var(--dim); }
.league thead button { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.league tbody th { font-weight: 600; color: var(--ink); }
.league td.num { font-family: var(--mono-font); font-size: 13px; text-align: right; }
.league tbody tr[data-run]:not(.now) { cursor: pointer; }
.league tbody tr[data-run]:not(.now):hover { background: var(--panel-2); }
.league tr.now { background: var(--hl); color: var(--on-hl); } .league tr.now th, .league tr.now td { color: var(--on-hl); }
.league tr.raised th { text-decoration: underline 2px; text-underline-offset: 4px; }
.league .sw { display: inline-block; width: 18px; height: 4px; border-radius: 2px; margin: 0 8px 3px 0; vertical-align: middle; }
.league .sw.ghost { background: var(--context); height: 2px; }
@media (max-width: 600px) {
  .scoreswitch { display: flex; }
  #curves .grid2 { display: block; }
  #curves[data-m] .panel[data-m] { display: none; }
  #curves[data-m="live"] .panel[data-m="live"], #curves[data-m="held"] .panel[data-m="held"], #curves[data-m="en"] .panel[data-m="en"], #curves[data-m="hi"] .panel[data-m="hi"] { display: block; }
}
.grnote { margin: 0 0 12px; padding: 2px 0 2px 12px; border-left: 3px solid var(--coral); color: var(--ink); font-size: 15px; line-height: 1.5; }
.grdead { background: none; border: 1px solid var(--line-2); color: var(--ink); border-radius: 99px; min-height: 36px; padding: 0 14px; margin-top: 8px; font: 500 14px var(--body); cursor: pointer; }
.grdead[aria-pressed=true] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.grfoot { margin: 16px 0 0; } .grjourney { background: var(--ink); color: var(--bg); border: 0; border-radius: 99px; min-height: 38px; padding: 0 16px; font: 600 14px var(--body); cursor: pointer; }
@media (max-width: 600px) { .grplay { width: 56px; height: 56px; } .grmeant, .grheard { font-size: 15px; } .grticks span.hide-phone { display: none; } }

/* sponsorship: the pill, the sheet, the "Backed by" strip and the sponsors section */
/* the sponsor chooser: on the page (.spc.wide: the brand's yellow band in light, warm charcoal in dark, so it never
   glares) and in the sheet (.spc.sheet). Chosen tiles and chips invert; the one button carries the brand colour. */
.spc { --bk-ink: var(--ink); --bk-dim: var(--ink-2); --bk-card: var(--panel); --bk-line: var(--line-2); --bk-sel: var(--ink); --bk-on-sel: var(--bg);
  --bk-go: var(--yellow); --bk-on-go: var(--black); color: var(--bk-ink); }
section.backband { --sec: var(--yellow); }
.spc.wide { --bk-ink: var(--black); --bk-dim: #4D4700; --bk-card: var(--white); --bk-line: rgba(50, 50, 50, .18); --bk-sel: var(--black); --bk-on-sel: var(--yellow);
  --bk-go: var(--black); --bk-on-go: var(--yellow); display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 56px; padding: 44px 0 48px; align-items: start; }
@media (min-width: 900px) { .spc.wide { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } .spc.wide .sphead { padding-top: 6px; } }
:root[data-theme=dark] section.backband { --sec: var(--warm-800); }
:root[data-theme=dark] .spc.wide { --bk-ink: var(--warm-100); --bk-dim: var(--warm-200); --bk-card: var(--warm-700); --bk-line: var(--warm-600); --bk-sel: var(--yellow); --bk-on-sel: var(--black); --bk-go: var(--yellow); --bk-on-go: var(--black); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) section.backband { --sec: var(--warm-800); }
  :root:not([data-theme=light]) .spc.wide { --bk-ink: var(--warm-100); --bk-dim: var(--warm-200); --bk-card: var(--warm-700); --bk-line: var(--warm-600); --bk-sel: var(--yellow); --bk-on-sel: var(--black); --bk-go: var(--yellow); --bk-on-go: var(--black); }
}
/* the year's goal inside the band: the total, a bar, what each part buys */
.spgoal { color: var(--bk-ink); border-top: 1px solid var(--bk-line); padding-top: 18px; order: 1; } /* phones: the chooser first, the year's plan after it */
@media (min-width: 900px) { .spc.wide .sphead { grid-area: 1 / 1; } .spc.wide .spgoal { grid-area: 2 / 1; order: 0; } .spc.wide .spctl { grid-area: 1 / 2 / span 2; } }
.sgtitle { font: 600 clamp(22px, 1.2vw + 16px, 30px)/1.15 var(--display); margin: 0 0 10px; color: var(--bk-ink); }
.sgbar { display: flex; height: 14px; border-radius: 99px; background: var(--bk-card); box-shadow: inset 0 0 0 1.5px var(--bk-ink); overflow: hidden; max-width: 34em; }
.sgbar i { display: block; height: 100%; background: var(--bk-sel); min-width: 0; }
.sgbar i.sgself { background: repeating-linear-gradient(135deg, var(--bk-ink) 0 2px, transparent 2px 5px); min-width: 6px; } /* Neelverse Lab's own part: hatched, never mistaken for sponsorship */
.sgnow { margin: 8px 0 12px; font-size: 15px; color: var(--bk-dim); max-width: 40em; }
.sgparts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 8px 22px; }
.sgparts li { font-size: 14px; color: var(--bk-dim); line-height: 1.45; } .sgparts b { font: 600 15px var(--mono-font); color: var(--bk-ink); } .sgparts span { color: var(--bk-ink); font-weight: 600; }
.sptitle { font: 600 clamp(30px, 2.4vw + 16px, 48px)/1.04 var(--display); letter-spacing: -0.01em; margin: 0 0 14px; color: var(--bk-ink); max-width: 14em; }
.spc.sheet .sptitle { font-size: 22px; line-height: 1.15; margin: 0 40px 6px 0; }
.spsub { font-size: 17px; color: var(--bk-dim); margin: 0 0 18px; max-width: 30em; }
.spc.sheet .spsub { font-size: 14px; margin-bottom: 14px; }
.spproof { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.spproof span { border: 1px solid var(--bk-line); border-radius: 99px; padding: 5px 12px; font-size: 13px; color: var(--bk-ink); }
.spbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 10px; }
.splab { font: 500 14px var(--body); color: var(--bk-dim); }
.spcur { display: inline-flex; border: 1px solid var(--bk-line); border-radius: 99px; overflow: hidden; background: var(--bk-card); }
.spcur button { background: none; color: var(--bk-ink); border: 0; min-width: 44px; min-height: 34px; padding: 0 14px; font: 600 15px var(--body); cursor: pointer; }
.spcur button[aria-pressed=true] { background: var(--bk-sel); color: var(--bk-on-sel); }
.sppurs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.sptile { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; align-content: start; text-align: left; font: inherit;
  background: var(--bk-card); color: var(--bk-ink); border: 1px solid var(--bk-line); border-radius: 12px; padding: 12px 14px; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.sptile svg { grid-row: 1 / 3; }
.sptile b { font: 600 15px var(--body); } .sptile span { font-size: 13px; color: var(--bk-dim); }
.sptile:hover { border-color: var(--bk-ink); }
.sptile[aria-pressed=true] { background: var(--bk-sel); color: var(--bk-on-sel); border-color: var(--bk-sel); }
.sptile[aria-pressed=true] span { color: inherit; opacity: .82; }
.sphelp { font-size: 13px; color: var(--bk-dim); margin: 8px 0 16px; }
.spamts { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 8px; margin: 0 0 14px; }
.spamts .spother { grid-column: 1 / -1; }
.spamt { background: var(--bk-card); color: var(--bk-ink); border: 1px solid var(--bk-line); border-radius: 99px; min-height: 42px; padding: 0 10px;
  font: 600 16px var(--body); font-variant-numeric: tabular-nums; cursor: pointer; }
.spamt:hover { border-color: var(--bk-ink); }
.spamt[aria-pressed=true] { background: var(--bk-sel); color: var(--bk-on-sel); border-color: var(--bk-sel); }
.spother { flex: 1 1 120px; min-width: 110px; height: 42px; border: 2px solid var(--bk-sel); border-radius: 99px; padding: 0 16px; font: 600 16px var(--body); color: var(--bk-ink); background: var(--bk-card); }
.spc .spgo { display: block; text-align: center; background: var(--bk-go); color: var(--bk-on-go); border: 0; border-radius: 14px; padding: 16px 20px; font: 600 19px var(--body);
  text-decoration: none; cursor: pointer; transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard); }
.spc .spgo:hover { background: var(--bk-go); color: var(--bk-on-go); filter: brightness(1.12); } .spc .spgo:active { transform: scale(.985); }
.spc .spgo[aria-disabled=true] { opacity: .5; cursor: not-allowed; filter: none; }
.spswitch { display: block; margin: 10px auto 0; background: none; border: 0; color: var(--bk-ink); font: 500 14px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }
.sptrust { font-size: 12.5px; color: var(--bk-dim); margin: 10px 0 0; text-align: center; }
.spc .sptrust a { color: var(--bk-ink); border-bottom: 1px solid currentColor; } .spc .sptrust a:hover { background: none; color: var(--bk-ink); }
.spc :focus-visible { outline: 2px solid var(--edge-strong); outline-offset: 2px; }
#sponsorPanel { position: fixed; right: 16px; bottom: 116px; z-index: 46; width: min(420px, calc(100% - 32px)); max-height: calc(100vh - 140px); overflow: auto;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 16px; padding: 20px; box-shadow: 0 12px 32px rgba(26, 24, 22, .2); }
@media (max-width: 600px) { /* phones: the band reads in one screen, the tiles stack their icon above their words */
  .spc.wide { padding: 32px 0 36px; gap: 18px; } .spsub { font-size: 15px; margin-bottom: 12px; }
  .spproof span { font-size: 12px; padding: 3px 9px; }
  .sptile { grid-template-columns: minmax(0, 1fr); row-gap: 2px; padding: 10px 12px; } .sptile svg { grid-row: auto; }
}
body.sp-inview #sponsorPill { opacity: 0; pointer-events: none; } /* the band itself is on screen: no second button over it */
#sponsorPill { transition: opacity var(--dur-base) var(--ease-standard); }
#sponsorPanel .spx { position: absolute; top: 6px; right: 6px; background: none; border: 0; color: var(--dim); font-size: 24px; cursor: pointer; min-width: 44px; min-height: 44px; }
#sponsorPill { position: fixed; right: 16px; bottom: 64px; z-index: 31; display: inline-flex; align-items: center; gap: 8px; background: var(--black); color: var(--white);
  border: 0; border-radius: 99px; padding: 9px 16px; font: 500 14px var(--body); cursor: pointer; box-shadow: 0 6px 20px rgba(26, 24, 22, .18); }
#sponsorPill i { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); }
#sponsorPill:hover { background: var(--ink-900); }
.backed { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; padding: 7px 20px; background: var(--black); color: var(--warm-100); font-size: 13px; }
.backed .bb { color: var(--yellow); font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; }
.backed .bbdot { color: var(--meta); } .backed a { color: var(--yellow); border-bottom: 1px solid var(--yellow); text-decoration: none; }
.backed .bbcta { background: var(--yellow); color: var(--black); border: 0; border-radius: 8px; padding: 2px 10px; font-size: 12px; font-weight: 500; cursor: pointer; }
.sponsorlist { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0; }
.sponsorlist li { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; font-weight: 500; }
.sponsorlist .sppur { display: block; font: 400 12px var(--body); color: var(--dim); } /* what the sponsor chose it to pay for */
@media (max-width: 600px) {
  #sponsorPill { left: 12px; right: auto; bottom: 12px; padding: 7px 12px; font-size: 13px; }
  body.tb-open #sponsorPill, body.tb-past #sponsorPill { bottom: 108px; }
  #sponsorPanel { left: 16px; right: 16px; bottom: 64px; width: auto; }
}

/* the decision record (decisions.js): the road taken runs down the left from the first day to now; each decision is a
   fork, its short branches the roads not taken (ring: decided against; cross: tried and dropped; dashed: later); the
   newest fork is yellow. Outcome: held (success), reversed (error), open (yellow: still being decided). */
.dfil { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; }
.dline { list-style: none; margin: 0; padding: 0; position: relative; max-width: 60em; }
.dline::before { content: ""; position: absolute; left: 13px; top: 14px; bottom: 14px; width: 2px; background: var(--line-2); }
.dk { display: grid; grid-template-columns: 60px minmax(0, 1fr); gap: 10px; align-items: start; padding: 6px 0; position: relative; }
.dfork { overflow: visible; margin-top: 8px; }
.dfork .node { fill: var(--ink); stroke: var(--bg); stroke-width: 3; } .dfork .node.now { fill: var(--yellow); stroke: var(--now-casing); stroke-width: 2; }
.dfork .br path { fill: none; stroke: var(--dim); stroke-width: 1.5; } .dfork .br circle { fill: var(--bg); stroke: var(--dim); stroke-width: 1.5; }
.dfork .br.later path, .dfork .br.later circle { stroke-dasharray: 3 2.5; }
.dfork .br.tried path + path { stroke: var(--bad); stroke-width: 2; }
.dcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; min-width: 0; }
.dcard > summary { list-style: none; cursor: pointer; padding: 12px 16px; display: grid; gap: 4px; border-radius: 12px; }
.dcard > summary::-webkit-details-marker { display: none; }
.dcard[open] > summary { border-bottom: 1px solid var(--line); border-radius: 12px 12px 0 0; }
.dcard > summary:hover .dq { text-decoration: underline; text-decoration-color: var(--yellow); text-underline-offset: 3px; }
.dmeta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 500 12px var(--mono-font); color: var(--dim); }
.darea { border: 1px solid var(--line-2); border-radius: 999px; padding: 0 8px; }
.dout { margin-left: auto; border-radius: 999px; padding: 0 8px; border: 1px solid currentColor; }
.dout.held, .dout.reversed { color: var(--ink-2); border-color: var(--line-2); }
.dout.held::before, .dout.reversed::before, .dop.tried .dv::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; vertical-align: 0; }
.dout.held::before { background: var(--good); } .dout.reversed::before, .dop.tried .dv::before { background: var(--bad); } /* text keeps text colours; the dot carries the meaning */
.dout.open { color: var(--black); background: var(--yellow); border-color: var(--yellow); }
.dq { font: 600 17px/1.35 var(--body); margin: 2px 0 0; color: var(--ink); }
.dchose { margin: 0; font-size: 14px; color: var(--ink-2); } .dchose span { font: 500 12px var(--mono-font); color: var(--dim); margin-right: 6px; }
.dbody { padding: 12px 16px 16px; } .dbody h4 { font: 600 13px var(--body); margin: 14px 0 4px; color: var(--ink); } .dbody h4:first-child { margin-top: 0; }
.dbody p, .dbody li { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 4px; }
.dopts, .dev { margin: 0; padding-left: 18px; }
.dop .dv { font: 500 11px var(--mono-font); border-radius: 4px; padding: 0 6px; margin-right: 4px; background: var(--bg2); color: var(--dim); }
.dop.chosen .dv { background: var(--ink); color: var(--bg); }
.dev a { white-space: nowrap; }
@media (max-width: 600px) { .dk { grid-template-columns: 40px minmax(0, 1fr); gap: 8px; } .dfork { width: 40px; height: auto; } .dcard > summary, .dbody { padding: 10px 12px; } }

/* where it will speak (uses.js): each use is its device, drawn in line art, saying its line; all of them in one grid,
   with no timeline. The plate under a device is the play button; while it speaks, its bubble
   and speaker light up and two sound waves pulse (still, when motion is reduced). */
.ulanes { display: block; }
.unote { font-size: 14px; color: var(--dim); margin: 0 0 6px; }
.ustops { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 26px 18px; align-items: start; margin-top: 18px; }
.ustop { text-align: center; min-width: 0; }
.usay { position: relative; margin: 0 0 14px; padding: 9px 12px; min-height: 5.4em; /* three lines: the devices line up */ display: flex; align-items: center; justify-content: center;
  background: var(--panel); border: 1px solid var(--line-2); border-radius: 14px; font-size: 14px; line-height: 1.4; color: var(--ink); }
.usay::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 12px; height: 12px; margin-left: -6px; background: var(--panel);
  border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); transform: rotate(45deg); }
.speaking .usay { border-color: var(--yellow); box-shadow: 0 0 0 2px var(--yellow); }
.uplay { position: relative; display: block; width: 132px; height: 132px; margin: 0 auto; padding: 18px; border: 0; border-radius: 50%;
  background: var(--bg2); color: var(--ink); cursor: pointer; }
.uplay:hover { background: var(--line); } .uplay.off { cursor: default; }
.uplay[aria-pressed=true] { box-shadow: 0 0 0 3px var(--yellow); }
.udev { display: block; width: 96px; height: 96px; overflow: visible; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.udev .b { fill: var(--panel); } .udev .s { fill: var(--bg); } .udev .acc, .udev .uspk { fill: var(--yellow); }
.udev .tk { font: 700 15px var(--mono-font); fill: currentColor; stroke: none; }
.uwaves path { opacity: 0; } .speaking .uwaves path { animation: uwave 1.1s ease-out infinite; } .speaking .uwaves path + path { animation-delay: .35s; }
@keyframes uwave { 0% { opacity: 0; } 35% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .speaking .uwaves path { opacity: 1; } }
.uhint { position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%); white-space: nowrap; font: 600 12px var(--body);
  background: var(--yellow); color: var(--black); border-radius: 99px; padding: 2px 10px; }
.ustop h3 { font: 600 15px/1.3 var(--body); margin: 20px 0 3px; }
.uwho { font-size: 13px; color: var(--ink-2); margin: 8px 0 6px; line-height: 1.45; } .uwho b { color: var(--ink); }
.uparts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: center; margin: 0 0 8px; }
.upart { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px dashed var(--line-2); color: var(--dim); opacity: .55; }
.upart.on { border: 1px solid var(--ink); color: var(--ink); background: var(--bg2); opacity: 1; }
.upart svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.uev { text-align: left; } .uev summary { cursor: pointer; font-size: 12px; color: var(--ink-2); text-align: center; list-style: none; }
.uev summary::-webkit-details-marker { display: none; } .uev summary:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--yellow); }
.uev ul { margin: 8px 0 4px; padding-left: 16px; } .uev li, .uwhy { font-size: 13px; color: var(--ink-2); line-height: 1.45; margin: 0 0 4px; }
.usrc { color: var(--dim); } .usrc a { color: var(--ink-2); }
.ulic { font-size: 12px; color: var(--dim); border-left: 2px solid var(--line-2); padding-left: 8px; margin: 6px 0 0; }
@media (max-width: 700px) { .ustops { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .uplay { width: 112px; height: 112px; padding: 12px; } .udev { width: 88px; height: 88px; } }

/* the journal: the latest day open, each earlier day folded to one line (lab.js journalDaysHtml) */
.jfold { border-top: 1px solid var(--line); } .jfold > summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; padding: 10px 0; }
.jfold > summary::-webkit-details-marker { display: none; } .jfold > summary .jday { margin: 0; }
.jfold > summary span { font-size: 13px; color: var(--dim); } .jfold > summary:hover span { color: var(--ink); }
.jfold > summary::after { content: "Show"; margin-left: auto; font: 500 12px var(--mono-font); color: var(--ink-2); } .jfold[open] > summary::after { content: "Hide"; }

/* what it saves (savings.js): the chip first (a $15 board beside a $5 module), then one ranked chart, per device or
   across the fleet, at the cloud price picked; bars in ink (one series, so no legend), each row opens to its arithmetic
   and sources; the open row is marked in yellow at its edge */
.svchip { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 20px 36px; align-items: center; padding: 18px 0 26px; border-bottom: 1px solid var(--line); }
.svparts { display: flex; align-items: center; gap: 12px; }
.svparts figure { margin: 0; flex: 1; text-align: center; min-width: 0; }
.svparts svg { width: 100%; max-width: 190px; height: auto; fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.svparts .b { fill: var(--panel); } .svparts .s { fill: var(--bg); } .svparts .acc { fill: var(--yellow); stroke: var(--now-casing); }
.svparts figcaption { font-size: 13px; color: var(--ink-2); line-height: 1.4; margin-top: 8px; }
.svparts figcaption b { display: block; font: 700 24px/1.1 var(--display); color: var(--ink); margin-bottom: 2px; }
.svarrow { font: 600 28px var(--display); color: var(--dim); }
.svbig { font: 700 clamp(30px, 4.2vw, 46px)/1.05 var(--display); margin: 0 0 10px; text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 6px; text-underline-offset: 6px; }
.svchipsay p:not(.svbig) { font-size: 15px; color: var(--ink-2); margin: 0; max-width: 34em; line-height: 1.5; }
.svcontrols { display: flex; flex-wrap: wrap; gap: 10px 16px; margin: 22px 0 4px; }
.svseg button { padding: 6px 12px; font-size: 13px; min-height: 36px; } .svseg button span { font-family: var(--body); }
.svnote { font-size: 13px; color: var(--dim); margin: 8px 0 12px; }
.svrows { display: grid; gap: 2px; }
.svrow > summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px minmax(120px, 200px) minmax(0, 1fr) 8.5em;
  grid-template-areas: "dev name track val" "dev per per per"; gap: 2px 14px; align-items: center; padding: 8px 10px; border-radius: 10px; border-left: 3px solid transparent; }
.svrow > summary::-webkit-details-marker { display: none; }
.svrow > summary:hover, .svrow[open] > summary { background: var(--bg2); } .svrow[open] > summary { border-left-color: var(--yellow); }
.svrow > summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.svdev { grid-area: dev; display: block; width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; color: var(--ink); }
.svdev .b { fill: var(--panel); } .svdev .s { fill: var(--bg); } .svdev .acc, .svdev .uspk { fill: var(--yellow); } .svdev .tk { display: none; } .svdev .uwaves { display: none; }
.svname { grid-area: name; font: 600 14px/1.3 var(--body); color: var(--ink); }
.svtag { display: inline-block; font: 400 11px/1.4 var(--body); color: var(--dim); border: 1px dashed var(--line-2); border-radius: 99px; padding: 0 7px; margin-top: 2px; }
.svtrack { grid-area: track; height: 10px; background: var(--line); border-radius: 99px; overflow: hidden; }
.svbar { display: block; height: 100%; background: var(--ink); border-radius: 99px; transition: width .35s ease; }
@media (prefers-reduced-motion: reduce) { .svbar { transition: none; } }
.svval { grid-area: val; font: 700 15px var(--mono-font); color: var(--ink); text-align: right; white-space: nowrap; }
.svper { grid-area: per; font-size: 12px; color: var(--dim); }
.svmore { padding: 6px 10px 16px 61px; font-size: 13px; color: var(--ink-2); line-height: 1.5; max-width: 62em; }
.svmore p { margin: 0 0 6px; } .svmore b { color: var(--ink); } .svbasis { font: 12px/1.5 var(--mono-font); }
.svsrc { margin: 4px 0 0; padding-left: 16px; } .svsrc li { margin: 0 0 2px; } .svsrc a { color: var(--ink-2); }
.svzero { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; max-width: 62em; } .svzero b { color: var(--ink); }
.usave { display: inline-block; font: 600 12px/1.4 var(--body); color: var(--ink); background: var(--bg2); border-radius: 99px; padding: 3px 10px; margin: 0 0 8px; text-decoration: none; }
.usave:hover { text-decoration: underline; text-decoration-color: var(--yellow); text-decoration-thickness: 2px; }
@media (max-width: 700px) {
  .svchip { grid-template-columns: minmax(0, 1fr); }
  .svrow > summary { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "dev name val" "dev track track" "dev per per"; gap: 4px 10px; padding: 8px 6px; }
  .svdev { width: 28px; height: 28px; } .svmore { padding-left: 8px; } .svseg button { padding: 6px 8px; }
}
.svbar.ceil { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1px var(--ink); }
.svparts { align-items: flex-end; } .svparts svg { height: 112px; width: auto; max-width: 100%; }
.svarrow { align-self: center; padding-bottom: 40px; }
/* does it fit the chip (savings.js fitHtml): memory against the flash, work per second of speech against real time;
   the lines are the limits, a bar past its line is drawn hatched (over), so it reads without colour */
.svfit { padding: 18px 0 22px; border-bottom: 1px solid var(--line); }
.svfit h3 { font: 600 17px/1.3 var(--display); margin: 0 0 12px; }
.fitgrid { display: grid; grid-template-columns: minmax(130px, 200px) minmax(0, 1fr) minmax(0, 1fr); gap: 10px 22px; align-items: center; }
.fithead { font-size: 12px; color: var(--dim); } .fithead i { font-style: normal; }
.fitname b { display: block; font: 600 14px var(--body); color: var(--ink); } .fitname span { font-size: 12px; color: var(--dim); }
.fitcell { display: grid; grid-template-columns: minmax(0, 1fr) 7.5em; gap: 10px; align-items: center; }
.fittrack { position: relative; height: 14px; background: var(--line); border-radius: 99px; }
.fitbar { position: absolute; left: 0; top: 0; bottom: 0; background: var(--ink); border-radius: 99px; }
.fitbar.over { background: repeating-linear-gradient(135deg, var(--ink) 0 3px, transparent 3px 7px); box-shadow: inset 0 0 0 1.5px var(--ink); }
.fitline { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; background: var(--yellow); box-shadow: 0 0 0 1px var(--now-casing); border-radius: 2px; }
.fitval { font: 600 13px var(--mono-font); color: var(--ink); white-space: nowrap; }
.fitnote { font-size: 12px; color: var(--dim); margin: 12px 0 0; max-width: 60em; line-height: 1.5; }
.fitwork, .fitsources, .svwork { grid-column: 1 / -1; font-size: 12.5px; color: var(--ink-2); line-height: 1.5; margin: 2px 0 6px; overflow-wrap: anywhere; }
.fitwork summary, .fitsources summary, details.svwork summary { cursor: pointer; color: var(--dim); font-size: 12px; }
.fitwork ol, .fitwork ul, .fitsources ul, .svwork ol { padding-left: 18px; margin: 4px 0; } .fitwork p, .svwork p { margin: 4px 0; }
.fitsources { margin-top: 10px; } div.svwork { margin: 8px 0; padding: 8px 10px; border-left: 2px solid var(--line-2); }
.fittimed { font-size: 13px; color: var(--ink-2); margin: 12px 0 0; max-width: 60em; line-height: 1.5; padding-left: 10px; border-left: 2px solid var(--line-2); }
@media (max-width: 700px) { .fitgrid { grid-template-columns: minmax(0, 1fr); gap: 6px; } .fithead { display: none; } .fitcell::before { content: attr(data-l); grid-column: 1 / -1; font-size: 11px; color: var(--dim); } .fitcell { grid-template-columns: minmax(0, 1fr) 6.5em; } .fitname { margin-top: 8px; } }

/* the graphics card's plan (lab.js boardHtml): no times, a word per state; the running step carries a progress bar */
.departures .dep { grid-template-columns: 96px 1fr; } .departures .dep b { justify-self: start; }
.dep.next b { color: var(--ink); border: 1px solid var(--ink); padding: 0 6px; border-radius: 4px; }
.dep.later span, .dep.skipped span { color: var(--ink-2); } .dep.skipped span { text-decoration: line-through 1px var(--dim); }
.dep.done span { color: var(--ink-2); }
.bprog { display: block; height: 6px; background: var(--line); border-radius: 99px; margin: 6px 0 2px; overflow: hidden; }
.bprog i { display: block; height: 100%; background: var(--ink); border-radius: 99px; }
.dep small { display: block; font: 12px var(--mono-font); color: var(--dim); }

/* why Trilavi (problem.js): the gap sentence large, three circles with the models in their regions and the empty
   middle marked in yellow (the aim), the same regions as a list beside it, then three columns and the full table */
.pgap { font: 600 clamp(19px, 2.2vw, 25px)/1.35 var(--display); max-width: 46em; margin: 6px 0 22px; color: var(--ink); }
.pvenn { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px 32px; align-items: center; }
.venn { width: 100%; height: auto; max-width: 620px; }
.vring { fill: var(--ink); fill-opacity: .045; stroke: var(--ink); stroke-width: 1.5; } .vring.v1 { stroke-dasharray: 6 4; } .vring.v2 { stroke-dasharray: 2 4; }
.vlabel { font: 600 15px var(--body); fill: var(--ink); } .vlabel .vsub { font: 400 12px var(--body); fill: var(--dim); }
.vnames { font: 500 12px var(--body); fill: var(--ink-2); }
.vaim { fill: var(--yellow); stroke: var(--now-casing); stroke-width: 1.5; stroke-dasharray: 4 3; } .vaimt { font: 700 12px var(--body); fill: var(--black); }
.pregions { list-style: none; padding: 0; margin: 0; font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.pregions li { margin: 0 0 8px; } .pregions b { color: var(--ink); }
.pcols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 30px; margin: 26px 0 14px; padding-top: 20px; border-top: 1px solid var(--line); }
.pcols h3 { font: 600 17px/1.3 var(--display); margin: 0 0 10px; } .pcols p { font-size: 14px; color: var(--ink-2); line-height: 1.55; margin: 0 0 10px; }
.pwhy { padding-left: 18px; margin: 0; } .pwhy li { font-size: 14px; color: var(--ink-2); line-height: 1.5; margin: 0 0 8px; }
.psrc { display: block; font-size: 11px; color: var(--dim); margin-top: 2px; } .psrc a { color: var(--dim); }
.pwho { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 14px; }
.pstat b { display: block; font: 700 24px/1.1 var(--display); color: var(--ink); } .pstat span { font-size: 12px; color: var(--ink-2); }
.pstands { border-left: 3px solid var(--yellow); padding-left: 10px; }
.pall summary { cursor: pointer; font-size: 13px; color: var(--ink-2); } .pall summary:hover { color: var(--ink); }
.ptable { overflow-x: auto; margin-top: 10px; } .ptable table { border-collapse: collapse; font-size: 12px; min-width: 900px; }
.ptable th, .ptable td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line); color: var(--ink-2); }
.ptable th { color: var(--ink); font-weight: 600; } .ptable a { color: var(--ink-2); }
@media (max-width: 760px) { .pvenn, .pcols { grid-template-columns: minmax(0, 1fr); } }

/* watch it think (think.js): the tube large, the path beside it, the sentence with the word being read marked in
   yellow, then the controls; one column on phones */
.tkgrid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.tkside h3 { font: 600 15px var(--body); margin: 0 0 8px; } .tkside .view { height: 420px; }
.tktext { font: 600 clamp(18px, 2vw, 24px)/1.4 var(--display); margin: 16px 0 10px; color: var(--ink-2); min-height: 1.4em; }
.tktext mark { background: var(--yellow); color: var(--black); border-radius: 4px; padding: 0 3px; box-shadow: 0 0 0 1px var(--now-casing); }
.tkcontrols { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.tkplay { background: var(--yellow); color: var(--black); border: 0; border-radius: 99px; padding: 9px 18px; font: 600 14px var(--body); cursor: pointer; min-height: 40px; }
.tkplay[aria-pressed=true] { box-shadow: 0 0 0 2px var(--now-casing); }
.tkcontrols input[type=range] { flex: 1 1 180px; accent-color: var(--ink); }
.tkin { background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 99px; padding: 7px 14px; font: 500 13px var(--body); cursor: pointer; min-height: 36px; }
.tkver button { padding: 6px 10px; font-size: 12px; min-height: 34px; }
#thinkSize { color: var(--ink-2); margin: 10px 0 2px; }
@media (max-width: 900px) { .tkgrid { grid-template-columns: minmax(0, 1fr); } .tkside .view { height: 320px; } }

/* the speech at the top: its path in 3D, drawn as it plays (speak3d.js) */
.speak { margin: 6px 0 22px; }
.speakview { height: clamp(280px, 70vw, 420px); margin-bottom: 10px; background: var(--panel); }
@media (min-width: 900px) { .speak:not([hidden]) { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 28px; align-items: center; }
  .speakview { height: 440px; margin: 0; } }
.speaktext { font: 600 clamp(19px, 2.2vw, 26px)/1.4 var(--display); margin: 4px 0 12px; color: var(--ink-2); min-height: 1.4em; max-width: 34em; }
.speaktext mark { background: var(--yellow); color: var(--black); border-radius: 4px; padding: 0 3px; box-shadow: 0 0 0 1px var(--now-casing); }
.speakbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 10px; }
.speakwho button { padding: 6px 12px; font-size: 13px; }
.speaknote { color: var(--ink-2); font-size: 14px; line-height: 1.55; max-width: 46em; margin: 0; }
.spkey { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; color: var(--ink); font-weight: 500; }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; }
.sw.a { background: var(--path-a); } .sw.t { background: var(--ink); }
.tksay { min-height: 1.5em; margin: 0 0 12px; color: var(--ink); font-weight: 500; }
.tkgrow { margin: 14px 0 4px; max-width: 46em; color: var(--ink); }

/* why Trilavi: the ladder of machines, from a server down to a microcontroller (problem.js) */
.phead { font: 700 clamp(26px, 3.6vw, 44px)/1.12 var(--display); letter-spacing: -.01em; max-width: 22em; margin: 4px 0 12px; color: var(--ink); }
.psub { font-size: clamp(15px, 1.4vw, 17px); line-height: 1.55; color: var(--ink-2); max-width: 44em; margin: 0 0 22px; }
.ladder { border-top: 1px solid var(--line); }
.lrow { display: grid; grid-template-columns: minmax(150px, 1.5fr) repeat(4, minmax(0, 1fr)); align-items: center; gap: 0 8px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.lhead { padding: 10px 0; align-items: end; }
.lhead .ldev, .lcap { font: 600 13px/1.25 var(--body); color: var(--ink); }
.lcap { text-align: center; } .lgroup { display: block; min-height: 1.3em; font: 600 11px/1.3 var(--mono-font); color: var(--dim); margin-bottom: 3px; }
.lcap small { display: block; font: 400 11px/1.3 var(--body); color: var(--dim); margin-top: 2px; }
.ldev b { display: block; font: 600 15px/1.25 var(--body); color: var(--ink); } .ldev small { display: block; font-size: 12px; color: var(--dim); margin-top: 1px; }
.lbar { display: block; height: 4px; border-radius: 4px; background: var(--ink); opacity: .75; margin-top: 7px; max-width: 160px; }
.lcell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lmark { display: inline-block; width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--ink); background: transparent; padding: 0; cursor: pointer; flex: none; }
.lmark.yes { background: var(--ink); }
.lmark.partly { background: linear-gradient(90deg, var(--ink) 50%, transparent 50%); }
.lmark.no { border: 2px dashed var(--meta); }
.lmark.aim { box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--yellow), 0 0 0 7px var(--now-casing); }
.lmark[aria-pressed=true] { outline: 2px solid var(--ink); outline-offset: 5px; }
.lmark.aim[aria-pressed=true] { outline-offset: 9px; }
.lmark:focus-visible { outline: 2px solid var(--focus); outline-offset: 5px; }
.laim { font: 600 10px/1 var(--mono-font); background: var(--yellow); color: var(--black); padding: 2px 5px; border-radius: 4px; margin-top: 4px; }
.lkey { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--ink-2); margin: 12px 0 14px; }
.lkey span { display: inline-flex; align-items: center; gap: 7px; } .lkey .lmark { width: 14px; height: 14px; border-width: 1.5px; cursor: default; }
.lkey .lmark.aim { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--yellow), 0 0 0 5px var(--now-casing); margin: 0 3px; }
.lcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; max-width: 52em; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.lcard p { margin: 0 0 6px; } .lcard .lcardh { color: var(--ink); font-size: 15px; } .lcard b { color: var(--ink); }
.lword { display: inline-block; border-radius: 6px; padding: 0 6px; font-weight: 600; }
.lword.yes { background: var(--ink); color: var(--bg); } .lword.partly { background: var(--hl); color: var(--on-hl); box-shadow: inset 0 0 0 1px var(--hl-edge); } .lword.no { box-shadow: inset 0 0 0 1px var(--line-2); }
.pscale { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px 28px; margin: 34px 0 8px; }
.pbig b { display: block; font: 700 clamp(30px, 4.4vw, 52px)/1.05 var(--display); color: var(--ink); letter-spacing: -.01em; }
.pbig > span:not(.psrc) { display: block; font-size: 14px; color: var(--ink-2); margin-top: 4px; }
.pscaleline { font: 600 clamp(17px, 1.8vw, 21px)/1.4 var(--display); color: var(--ink); max-width: 36em; margin: 14px 0 0; }
.pvennbox { margin-top: 22px; border-top: 1px solid var(--line); padding-top: 14px; }
.pvennbox > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
@media (max-width: 640px) {
  .lrow { grid-template-columns: 100px repeat(4, minmax(0, 1fr)); gap: 0 4px; }
  .lcap { font-size: 11px; } .lcap small { display: none; }
  .ldev b { font-size: 13px; } .ldev small { font-size: 11px; }
  .lmark { width: 24px; height: 24px; }
  .pscale { grid-template-columns: minmax(0, 1fr); }
}

/* what Trilavi has found: the map of findings and one finding's card (found.js) */
.fgrid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px 28px; align-items: start; }
.fmap { width: 100%; height: auto; display: block; }
.frowbg { fill: var(--panel); } .frowbg.fopen { fill: none; stroke: var(--line-2); stroke-dasharray: 4 4; }
.fstage { font: 500 12px var(--body); fill: var(--ink-2); } .fnov { font: 500 11.5px var(--body); fill: var(--ink-2); }
.fdot { cursor: pointer; outline: none; }
.fdot .fc { fill: var(--panel); stroke-width: 3; } .fdot text { font: 700 11px var(--body); fill: var(--ink); pointer-events: none; }
.fdot .fsel { fill: none; stroke: none; }
.fdot[aria-pressed=true] .fsel, .fdot:focus-visible .fsel { stroke: var(--ink); stroke-width: 2; }
.fdot:hover .fc { fill: var(--bg2); }
.k-science { --k: var(--series-2); } .k-engineering { --k: var(--series-3); } .k-finding { --k: var(--series-4); } .k-practice { --k: var(--series-5); }
.fdot .fc { stroke: var(--k); }
.fsw { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--panel); box-shadow: inset 0 0 0 3px var(--k); flex: none; }
.fkey { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12px; color: var(--ink-2); margin: 8px 0 4px; } .fkey span { display: inline-flex; align-items: center; gap: 6px; }
.fhow { font-size: 12px; color: var(--dim); margin: 2px 0 0; }
.fcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14px; line-height: 1.55; color: var(--ink-2); }
.fmeta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; } .fmeta span { font: 500 11.5px var(--body); border: 1px solid var(--line-2); border-radius: 99px; padding: 1px 8px; color: var(--ink-2); }
.fmeta .fkind { border-color: var(--k); color: var(--ink); box-shadow: inset 3px 0 0 var(--k); }
.ftitle { font: 600 clamp(18px, 1.8vw, 21px)/1.3 var(--display); color: var(--ink); margin: 0 0 8px; }
.fwhat { color: var(--ink); margin: 0 0 12px; }
.fcard h4 { font: 600 13px var(--body); color: var(--ink); margin: 14px 0 4px; }
.fcard ul { margin: 0; padding-left: 18px; } .fcard li { margin: 0 0 4px; }
.fdiff { margin: 6px 0 0; color: var(--ink); }
.fstats { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 4px 0 10px; } .fstats b { display: block; font: 700 26px/1.1 var(--display); color: var(--ink); } .fstats span { font-size: 12px; }
.fchart { margin: 6px 0 12px; } .fct { font: 600 12.5px var(--body); color: var(--ink); margin: 0 0 6px; }
.frow { display: grid; grid-template-columns: minmax(90px, 1.3fr) minmax(0, 2fr) auto; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 12.5px; }
.fl { color: var(--ink-2); } .fv { font: 600 12.5px var(--mono-font); color: var(--ink); min-width: 4.5em; text-align: right; }
.ftrack { position: relative; height: 14px; background: var(--bg2); border-radius: 4px; }
.fbar, .frange { position: absolute; top: 0; bottom: 0; left: 0; background: var(--ink); border-radius: 0 4px 4px 0; }
.frange { border-radius: 4px; background: repeating-linear-gradient(45deg, var(--ink) 0 3px, var(--ink-2) 3px 5px); }
.fref { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--path-a); margin-left: -1px; }
.frefkey { font-size: 12px; color: var(--ink-2); margin: 4px 0 0; display: flex; align-items: center; gap: 8px; }
.frefkey .fref { position: static; display: inline-block; height: 14px; margin: 0; }
.fall { margin-top: 16px; } .fall > summary { cursor: pointer; font-weight: 600; color: var(--ink); }
.findex { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.fpick { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; padding: 6px 4px; border-radius: 8px; font: 500 13.5px var(--body); color: var(--ink); cursor: pointer; }
.fpick:hover { background: var(--bg2); } .fpick[aria-pressed=true] { background: var(--hl); color: var(--on-hl); }
.fupd { font-size: 12px; color: var(--dim); margin: 14px 0 0; }
@media (max-width: 900px) { .fgrid { grid-template-columns: minmax(0, 1fr); } .findex { grid-template-columns: minmax(0, 1fr); } }
.fmap.narrow .fstage { font-size: 11px; } .fmap.narrow .fnov { font-size: 10.5px; } .fmap.narrow .fdot text { font-size: 9.5px; }
/* watch it think: the scan, where it looks, and the 3D tube beside it (think.js) */
.tkscanwrap { position: relative; margin: 4px 0 6px; }
.tkscan, .tkatt { display: block; width: 100%; cursor: crosshair; }
.tktip { position: absolute; z-index: 3; max-width: 240px; background: var(--panel); color: var(--ink); border: 1px solid var(--line-2); border-radius: 8px; padding: 6px 9px; font-size: 12.5px; line-height: 1.4; pointer-events: none; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); }
.tkduo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px 28px; margin-top: 22px; align-items: start; }
.tkduo h3 { font: 600 16px var(--body); margin: 0 0 8px; color: var(--ink); }
.tkview { height: 380px; margin-bottom: 8px; }
@media (max-width: 860px) { .tkduo { grid-template-columns: minmax(0, 1fr); } .tkview { height: 320px; } }
/* the voices' style space: what the view says, and each voice as a print of its numbers (lab.js drawStyles) */
.stfacts { margin: 10px 0 0; max-width: 46em; color: var(--ink); }
.sth { font: 600 17px var(--display); margin: 22px 0 4px; color: var(--ink); }
.stpick { flex-wrap: wrap; margin: 8px 0 10px; } .stpick button { padding: 4px 10px; font-size: 12.5px; }
.stprints { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.stprint { margin: 0; } .stprint svg { display: block; width: 100%; height: 110px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg2); }
.stprint figcaption { font-size: 13px; color: var(--ink-2); margin-top: 6px; } .stprint b { color: var(--ink); }
/* the training PC as tiles: icon inside a ring gauge, the number, its meaning (lab.js vitalsHtml) */
#vitals { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-top: 8px; }
.vtile { display: flex; align-items: center; gap: 10px; min-width: 0; }
.vfig { position: relative; width: 46px; height: 46px; flex: none; }
.vring { position: absolute; inset: 0; width: 46px; height: 46px; transform: rotate(-90deg); }
.vtrack { fill: none; stroke: var(--line); stroke-width: 3.5; } .vfill { fill: none; stroke: var(--path-a); stroke-width: 3.5; stroke-linecap: round; }
.vicon { position: absolute; left: 12px; top: 12px; width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.vtxt { display: flex; flex-direction: column; min-width: 0; } .vtxt b { font: 700 16px/1.2 var(--display); color: var(--ink); } .vtxt span { font-size: 11.5px; line-height: 1.3; color: var(--ink-2); }
.vtile.warm .vfill { stroke: var(--warn-fill); } .vtile.warm .vtxt b { color: var(--ink); }
@media (max-width: 700px) { #vitals { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a panel whose data has not arrived yet says so, instead of standing empty */
#queue:empty::before, #jobs:empty::before, #vitals:empty::before { content: "Loading the latest from the training PC…"; color: var(--dim); font-size: 13px; }
/* learn from it: eight steps, each tied to a live section, and the spread-or-average toy (learn.js) */
.lpath { list-style: none; padding: 0; margin: 18px 0 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 20px; }
.lstep { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; font-size: 14.5px; line-height: 1.55; color: var(--ink-2); }
.lstep h3 { display: flex; gap: 10px; align-items: baseline; font: 600 17px/1.3 var(--display); color: var(--ink); margin: 0 0 8px; }
.lnum { flex: none; display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); color: var(--black); font: 700 13px var(--body); }
.lstep p { margin: 0 0 8px; }
.lsee { display: flex; flex-wrap: wrap; gap: 6px 10px; } .lsee a { font-weight: 600; color: var(--ink); }
.llive { font: 500 12.5px var(--mono-font); color: var(--ink); background: var(--hl); border-radius: 6px; padding: 3px 8px; display: inline-block; }
.llive:empty { display: none; }
.ltry { color: var(--ink); } .ltry b { font-weight: 600; }
.ltoy { margin: 10px 0 12px; } .ltoyc { display: block; width: 100%; }
.ltoyl { display: block; font-size: 13px; color: var(--ink); margin: 6px 0 2px; } .ltoy input[type=range] { width: 100%; }
.ltoyr { font-weight: 600; color: var(--ink); }
@media (max-width: 820px) { .lpath { grid-template-columns: minmax(0, 1fr); } }
/* how it is judged: the scorecard (judge.js) */
.jtier { flex-wrap: wrap; margin: 6px 0 6px; } .jtier button, .jscen button { padding: 5px 11px; font-size: 13px; }
.jdev { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; max-width: 52em; }
.jgroup { font: 600 17px var(--display); color: var(--ink); margin: 22px 0 8px; }
.jrows { border-top: 1px solid var(--line); }
.jrow { border-bottom: 1px solid var(--line); }
.jrow > summary { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(0, 1.2fr) minmax(0, 1.2fr); gap: 4px 14px; align-items: baseline; padding: 10px 2px; cursor: pointer; list-style: none; }
.jrow > summary::-webkit-details-marker { display: none; }
.jname { font-weight: 600; color: var(--ink); } .jtarget, .jnow { font-size: 13px; color: var(--ink-2); }
.jtarget i, .jnow i { font-style: normal; font-size: 11px; color: var(--dim); margin-right: 4px; }
.jlive { font: 700 15px var(--display); color: var(--ink); background: var(--hl); border-radius: 5px; padding: 0 5px; } .jwhen { font-size: 11px; color: var(--dim); margin-left: 6px; }
.jpill { font: 600 10.5px var(--mono-font); border-radius: 99px; padding: 1px 7px; border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }
.jpill.on { background: var(--ink); color: var(--bg); border-color: var(--ink); } .jpill.count { background: var(--hl); color: var(--on-hl); border-color: var(--hl-edge); }
.jpill.one { border-style: dashed; color: var(--ink); } .jnote { margin: 4px 0 0; color: var(--dim); max-width: 60em; }
.jmore { padding: 0 2px 12px; font-size: 13.5px; color: var(--ink-2); max-width: 60em; } .jmore ul { margin: 4px 0 0; padding-left: 18px; }
.jscen { flex-wrap: wrap; } .jsent { font-size: 14px; color: var(--ink-2); margin-top: 10px; } .jsent ul { margin: 2px 0 8px; padding-left: 18px; }
.jgates { padding-left: 20px; font-size: 14px; color: var(--ink-2); } .jgates > li { margin-bottom: 8px; } .jgates b { color: var(--ink); } .jgates ul { padding-left: 16px; margin: 2px 0; }
.jsys { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 18px; font-size: 13.5px; }
.jsys b { color: var(--ink); display: block; } .jsys span { color: var(--dim); font-size: 12px; }
.jriv tr.jkal td { color: var(--ink); background: var(--panel-2, transparent); } .jvs { font-size: 11px; white-space: nowrap; } .jvs.ahead { color: var(--good, var(--ink)); } .jvs.behind { color: var(--warn, var(--ink)); } .jvs.noise { color: var(--dim); }
@media (max-width: 760px) { .jrow > summary { grid-template-columns: minmax(0, 1fr) auto; } .jtarget, .jnow { grid-column: 1 / -1; } .jsys { grid-template-columns: minmax(0, 1fr); } }
/* the road to the chip: one stage a stop on a road; done filled, now yellow and live, ahead open (road.js) */
.road { list-style: none; padding: 0; margin: 18px 0 0; position: relative; }
.road::before { content: ""; position: absolute; left: 13px; top: 6px; bottom: 6px; width: 3px; border-radius: 3px; background: linear-gradient(var(--ink) 0 var(--rd, 30%), var(--line-2) var(--rd, 30%)); }
.rstage { position: relative; padding: 0 0 18px 44px; }
.rdot { position: absolute; left: 4px; top: 14px; width: 21px; height: 21px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 3px var(--line-2); }
.rstage.done .rdot { background: var(--ink); box-shadow: none; }
.rstage.now .rdot { background: var(--yellow); box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--now-casing); }
.rcard { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; max-width: 760px; }
.rstage.now .rcard { border-color: var(--hl-edge); box-shadow: 0 0 0 2px var(--hl); }
.rstage.later .rcard { background: transparent; }
.rstate { font: 600 11px var(--mono-font); color: var(--dim); margin: 0 0 4px; } .rstage.now .rstate { color: var(--ink); }
.rcard h3 { font: 600 18px/1.3 var(--display); color: var(--ink); margin: 0 0 4px; }
.rach { color: var(--ink); margin: 0 0 8px; font-weight: 500; }
.rcard dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; font-size: 14px; }
.rcard dt { font-weight: 600; color: var(--ink); } .rcard dd { margin: 0; color: var(--ink-2); }
.rlive { margin-top: 10px; } .rbar { height: 8px; border-radius: 8px; background: var(--bg2); overflow: hidden; } .rbar b { display: block; height: 100%; background: var(--yellow); box-shadow: inset 0 0 0 1px rgba(50, 50, 50, .25); transition: width 1s var(--ease-standard); }
.rlive span { font: 500 12px var(--mono-font); color: var(--ink); display: block; margin-top: 5px; }
.rsee { margin: 8px 0 0; font-size: 13px; } .rsee a { font-weight: 600; color: var(--ink); }
@media (max-width: 600px) { .rcard dl { grid-template-columns: minmax(0, 1fr); } }
.rstage.closed .rdot { background: var(--bg); box-shadow: inset 0 0 0 3px var(--dim); }
.rstage.closed .rcard { background: transparent; border-style: dashed; }
/* the chip voice in detail, below the road: its parts, the three sizes' registered lines (targets), its steps (road.js chipHtml) */
.rchip { margin-top: 26px; max-width: 980px; } .rchip h3 { font: 600 20px/1.3 var(--display); color: var(--ink); margin: 0 0 6px; } .rchip h4 { font: 600 15px/1.3 var(--display); color: var(--ink); margin: 18px 0 8px; }
.rparts { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.rparts li { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--ink-2); } .rparts li b { display: block; color: var(--ink); margin-bottom: 4px; }
.rtwrap { margin-top: 16px; overflow-x: auto; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); }
.rtiers { min-width: 640px; border-collapse: collapse; font-size: 13.5px; } .rtiers caption { text-align: left; font: 600 12px var(--mono-font); color: var(--dim); padding: 8px 10px 4px; }
.rtiers th, .rtiers td { vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; } .rtiers tbody tr:last-child > * { border-bottom: 0; }
.rtiers thead th { color: var(--ink); font-weight: 600; } .rtiers tbody th { color: var(--ink); font-weight: 500; width: 26%; } .rtiers td { color: var(--ink-2); }
.rchips { display: block; font-weight: 400; font-size: 12px; color: var(--dim); }
.csteps { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.cstep { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 4px 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 14px; color: var(--ink-2); }
.cstep.now { border-color: var(--hl-edge); box-shadow: 0 0 0 2px var(--hl); } .cstep.later { background: transparent; }
.cstep .cid { font: 600 13px var(--mono-font); color: var(--ink); } .cstep b { color: var(--ink); } .cstep p { margin: 4px 0 0; } .cstep .cpass { color: var(--dim); }
@media (max-width: 600px) { .cstep { grid-template-columns: minmax(0, 1fr); } }
/* download the numbers; how each number is measured; a chart's n */
p.dl { color: var(--dim); margin: 10px 0 0; overflow-wrap: anywhere; } p.dl a { color: var(--ink-2); }
.jmethods { padding-left: 18px; font-size: 13px; color: var(--ink-2); line-height: 1.55; max-width: 70em; } .jmethods li { margin-bottom: 6px; } .jmethods b { color: var(--ink); }
.fcn { font-size: 11.5px; color: var(--dim); margin: -4px 0 6px; }
/* the hypotheses: a card each, status in words and in shape (never colour alone), a small picture */
.hyps { margin: 0 0 22px; } .hhead { margin: 0 0 4px; } .hlead { color: var(--ink-2); margin: 0 0 12px; max-width: 60em; }
.hgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 12px; }
.hyp { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; min-width: 0; }
.hyp header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hid { font: 700 22px var(--display); color: var(--ink); }
.hstat { font: 600 11px var(--mono-font); color: var(--ink-2); display: inline-flex; align-items: center; gap: 6px; }
.hstat i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--ink-2); display: inline-block; box-sizing: border-box; }
.hstat.s-open i { background: linear-gradient(90deg, var(--ink-2) 50%, transparent 50%); }
.hstat.s-pending i { border-style: dashed; }
.hstat.s-supported i { background: var(--ink-2); }
.hstat.s-falsified i { border-radius: 2px; background: linear-gradient(45deg, transparent 42%, var(--ink-2) 42% 58%, transparent 58%); }
.hclaim { font: 600 15px/1.35 var(--body); color: var(--ink); margin: 8px 0 6px; }
.hchart { width: 100%; height: auto; display: block; margin: 4px 0 0; }
.hc-lab, .hc-val, .hc-ref, .hc-ax { font: 500 10.5px var(--body); fill: var(--ink-2); } .hc-ref { fill: var(--ink); font-weight: 600; } .hc-ax { fill: var(--dim); }
.hc-track { stroke: var(--line-2); stroke-width: 1; } .hc-line { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 3; }
.hc-dot { fill: var(--path-a); stroke: var(--ink); stroke-width: 1; } .hc-range { fill: var(--path-a); stroke: var(--ink); stroke-width: 1; }
.hcn { font-size: 11.5px; color: var(--dim); margin: 2px 0 8px; }
.hfals { font-size: 13px; color: var(--ink-2); margin: 6px 0; } .hsofar { font-size: 12.5px; color: var(--ink-2); padding-left: 16px; margin: 4px 0 0; }

/* the cloud machines (lab.js cloudsHtml): the training PC's tiles, then each session's line */
.cloudpanel { margin-top: 14px; }
.ctiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; margin-top: 8px; }
.clist { list-style: none; margin: 12px 0 4px; padding: 0; display: grid; gap: 8px; font-size: 13px; color: var(--ink-2); }
.clist li { display: flex; flex-wrap: wrap; gap: 2px 8px; padding: 8px 10px; border-radius: 10px; background: var(--panel-2, transparent); border: 1px solid var(--line); }
.clist li > span:last-child { flex-basis: 100%; }
.clist li.running b, .clist li.queued b { color: var(--ink); }
#clouds:empty::before { content: "Waiting for the cloud machines' first report…"; color: var(--dim); font-size: 13px; }
@media (max-width: 700px) { .ctiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* a stage's measured result: its summary, every figure one tap away (record.js stageHtml) */
.rcard details.rall { margin-top: 4px; font-size: 12.5px; color: var(--ink-2); }
.rcard details.rall summary { cursor: pointer; color: var(--dim); }
.rcard details.rall p { margin: 4px 0 0; }

/* the sign-up (signup.js): a section after "Right now", a compact form in the footer, and one sheet that slides up from the bottom.
   One set of tokens per surface: the card (light and dark), the footer (always dark). Text sits on --su-card or the band
   behind it; field edges are 3:1 against what they sit on; the one button carries the brand colour like the sponsor's. */
.su { --su-ink: var(--black); --su-dim: var(--gray-600); --su-card: var(--white); --su-field: var(--cream); --su-line: var(--gray-300); --su-edge: #7D7C78;
  --su-sel: var(--black); --su-on-sel: var(--yellow); --su-go: var(--black); --su-on-go: var(--yellow); --su-err: #B3261E; --su-focus: var(--black); color: var(--su-ink); }
:root[data-theme=dark] .su { --su-ink: var(--warm-100); --su-dim: var(--warm-200); --su-card: var(--warm-700); --su-field: var(--warm-900); --su-line: var(--warm-600); --su-edge: #8A8378;
  --su-sel: var(--yellow); --su-on-sel: var(--black); --su-go: var(--yellow); --su-on-go: var(--black); --su-err: #F08A85; --su-focus: var(--yellow); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .su { --su-ink: var(--warm-100); --su-dim: var(--warm-200); --su-card: var(--warm-700); --su-field: var(--warm-900); --su-line: var(--warm-600); --su-edge: #8A8378;
    --su-sel: var(--yellow); --su-on-sel: var(--black); --su-go: var(--yellow); --su-on-go: var(--black); --su-err: #F08A85; --su-focus: var(--yellow); }
}
:root footer .su.foot { --su-ink: var(--warm-100); --su-dim: var(--warm-200); --su-card: transparent; --su-field: var(--warm-800); --su-line: #4A443C; --su-edge: #8A8378;
  --su-sel: var(--yellow); --su-on-sel: var(--black); --su-go: var(--yellow); --su-on-go: var(--black); --su-err: #F08A85; --su-focus: var(--yellow); }
section.joinband { --sec: var(--lavender-light); }
:root[data-theme=dark] section.joinband { --sec: var(--warm-800); }
@media (prefers-color-scheme: dark) { :root:not([data-theme=light]) section.joinband { --sec: var(--warm-800); } }

.su-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px 56px; padding: 44px 0 52px; align-items: start; }
@media (min-width: 900px) { .su-wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); } }
.su-copy { color: var(--su-ink); }
.su-title { font: 600 clamp(28px, 2vw + 18px, 44px)/1.08 var(--display); letter-spacing: -0.01em; margin: 0 0 12px; color: var(--su-ink); max-width: 12em; }
.su-lead { font-size: 17px; color: var(--su-dim); margin: 0; max-width: 30em; }
.su-offers { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 20px; max-width: 34em; }
.su-offers li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 0 14px; }
.su-offers li > svg { margin-top: 2px; color: var(--su-ink); }
.su-offers li > div > b { display: block; font: 600 16px var(--body); color: var(--su-ink); }
.su-offers li > div > span { display: block; font-size: 15px; line-height: 1.5; color: var(--su-dim); }
/* the listening test in one picture: two clips, no answer given */
.su-ab { display: grid; gap: 8px; margin: 14px 0 0; max-width: 360px; }
.su-clip { display: grid; grid-template-columns: 28px minmax(0, 1fr) 18px; align-items: center; gap: 12px; padding: 8px 14px 8px 10px; border: 1px solid var(--su-line);
  border-radius: 12px; background: var(--su-card); color: var(--cat-1); }
.su-offers .su-clip b { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--su-ink); color: var(--su-card); font: 600 13px var(--mono-font); }
.su-clip svg { display: block; width: 100%; height: 28px; color: var(--cat-1); }
.su-clip i { display: block; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--su-edge); }

.su-card { background: var(--su-card); border: 1px solid var(--su-line); border-radius: 16px; padding: 24px; }
.suform { display: grid; gap: 12px; }
.su-main { display: grid; gap: 12px; }
.su-row { display: grid; gap: 6px; min-width: 0; }
.su label, .su legend { font: 500 14px var(--body); color: var(--su-ink); }
.su input[type=text], .su input[type=email], .su select { width: 100%; min-height: 46px; padding: 0 14px; border: 1px solid var(--su-edge); border-radius: 10px;
  background: var(--su-field); color: var(--su-ink); font: 400 16px var(--body); }
.su select { appearance: none; -webkit-appearance: none; padding-right: 38px;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 20px) 20px, calc(100% - 15px) 20px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; }
.su :focus-visible { outline: 2px solid var(--su-focus); outline-offset: 2px; box-shadow: none; border-radius: 10px; }
.su-go { min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--su-go); color: var(--su-on-go); font: 600 17px var(--body); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard); }
.su-go:hover { filter: brightness(1.12); } .su-go:active { transform: scale(.985); }
.su-go:disabled { opacity: .6; cursor: progress; filter: none; transform: none; }
.su-msg { margin: 0; font-size: 14px; color: var(--su-err); }
.su-consent { margin: 0; font-size: 13px; color: var(--su-dim); }
.su-optnote { margin: 6px 0 14px; font-size: 14px; color: var(--su-dim); }
.su-fields { display: grid; gap: 14px; }
.su-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.su-chips { border: 0; margin: 0; padding: 0; min-width: 0; }
.su-chips legend { padding: 0; margin-bottom: 8px; }
.su-chiprow { display: flex; flex-wrap: wrap; gap: 8px; }
.su-chip { position: relative; display: inline-flex; }
.su-chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.su-chip span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px; border: 1px solid var(--su-edge); border-radius: 99px;
  background: var(--su-field); color: var(--su-ink); font: 500 15px var(--body); transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.su-chip input:checked + span { background: var(--su-sel); color: var(--su-on-sel); border-color: var(--su-sel); }
.su-chip input:checked + span::before { content: "✓"; font-size: 13px; }
.su-chip input:focus-visible + span { outline: 2px solid var(--su-focus); outline-offset: 2px; }
.su-other { margin-top: 10px; }
.su-opt summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font: 500 14px var(--body); color: var(--su-ink); text-decoration: underline; text-underline-offset: 3px; }
.su-opt[open] > summary { margin-bottom: 4px; }
.su-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden; opacity: 0; }
.su-done:focus, .su-done:focus-visible { outline: none; box-shadow: none; }
.su-done h3 { font: 600 24px/1.2 var(--display); margin: 0 0 8px; color: var(--su-ink); }
.su-done p { margin: 0; color: var(--su-dim); max-width: 32em; }
.su-link { background: none; border: 0; padding: 0; color: var(--su-ink); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; min-height: 32px; }

/* the footer: the same form, compact, on the footer's own dark ground */
footer .su.foot { max-width: 880px; margin: 0 auto 26px; padding: 0 0 26px; border-bottom: 1px solid var(--su-line); text-align: left; display: grid;
  grid-template-columns: minmax(0, 1fr); gap: 16px 40px; align-items: start; }
@media (min-width: 760px) { footer .su.foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.su-foottitle { font: 600 22px/1.2 var(--display); margin: 0 0 4px; color: var(--su-ink); letter-spacing: -0.01em; }
.su-footcopy p { margin: 0; font-size: 14px; color: var(--su-dim); }
.su.foot .su-main, .su.sheet .su-main { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
.su.foot .su-opt, .su.sheet .su-opt { margin-top: -2px; }

/* the sheet: slides up from the bottom edge, above the time bar and over the sponsor pill (which steps aside) */
.su.sheet { position: fixed; left: 50%; bottom: 0; z-index: 44; width: min(680px, 100%); max-height: 88vh; overflow-y: auto; overscroll-behavior: contain;
  padding: 8px 24px calc(20px + env(safe-area-inset-bottom, 0px)); background: var(--su-card); border: 1px solid var(--su-line); border-bottom: 0; border-radius: 20px 20px 0 0;
  box-shadow: 0 -14px 40px rgba(26, 24, 22, .22); transform: translate(-50%, 105%); visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-standard), visibility 0s linear var(--dur-slow); }
.su.sheet.in { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; }
.su-grab { width: 40px; height: 4px; border-radius: 4px; background: var(--su-line); margin: 0 auto 6px; }
.su-sheethead { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.su-sheettitle { font: 600 22px/1.2 var(--display); margin: 0; color: var(--su-ink); letter-spacing: -0.01em; }
.su-notnow { flex: none; min-height: 44px; padding: 0 6px; background: none; border: 0; color: var(--su-ink); font: 500 14px var(--body); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.su-sheetsub { margin: 0 0 14px; font-size: 14px; color: var(--su-dim); }
body.su-open #sponsorPill { opacity: 0; visibility: hidden; pointer-events: none; } /* one floating thing at a time */
#toc a.navsp[data-join] { background: none; color: var(--ink); font-weight: 500; box-shadow: inset 0 0 0 1px var(--line-2); }
#toc a.navsp[data-join]:hover { background: var(--bg2); color: var(--ink); }
@media (max-width: 600px) {
  .su-wrap { padding: 32px 0 36px; }
  .su-card { padding: 18px; }
  .su-pair { grid-template-columns: minmax(0, 1fr); }
  .su.sheet { padding-left: 16px; padding-right: 16px; }
  .su-sheettitle { font-size: 19px; }
  .su-sheetsub { display: none; } /* the sentence under the button says the same, and the sheet should leave the page showing */
  .su.foot .su-main, .su.sheet .su-main { grid-template-columns: minmax(0, 1fr); }
  .su-go { width: 100%; }
}

/* Terms, Privacy and Cookies (site/legal.mjs): a reading column in the page's own type, under the pill */
.legalmain { max-width: 720px; margin: 0 auto; padding: 48px 16px 24px; }
.legal { margin: 28px 0 0; }
.legal h1 { font: 600 clamp(2rem, 1.5rem + 2.5vw, 3rem)/1.05 var(--display); letter-spacing: -0.02em; margin: 0; }
.legal h2 { font-size: 18px; line-height: 1.3; margin: 32px 0 0; }
.legal p, .legal li { font-size: 17px; line-height: 1.65; max-width: 38em; }
.legal p { margin: 12px 0 0; } .legal ul { margin: 12px 0 0; padding-left: 1.2em; } .legal li { margin: 8px 0 0; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.legal .legal-updated { font-size: 14px; color: var(--dim); }
.su-consent a { color: var(--su-ink); text-decoration: underline; text-underline-offset: 3px; }