/* Shared by every page: colour and type tokens, the scroll-driven layout (sticky stage, steps, cards, step rail,
   progress), readouts, the scale bar, hints, notes, the explanation-level slider and its text rules, expert
   "In detail" boxes, unit footnotes and the Greek-letter tips. Page-specific styles stay in each page. */
/* base reset */
:root { color-scheme: dark; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
body { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
/* Layout: one sticky full-bleed canvas (the tank), narrative cards scroll over its left side; a step rail on the right edge. Single dark look by choice: Cherenkov light is seen in darkness. */
:root {
  --ink: #020b13;
  --deep: #051a2b;
  --water: #0b2c47;
  --line: rgba(150, 196, 230, 0.16);
  --fg: #dfe9f1;
  --muted: #8ea6b8;
  --cher: #5cb3ff;
  --cher-hi: #c4e6ff;
  /* Flavours: three well-separated hues that stay distinct under red-green deficiencies (mu turns yellow, e pale
     lavender-grey, tau strong blue) and step in lightness (tau darkest, e middle, mu lightest) for greyscale.
     Tau's indigo is deeper than the sky-blue Cherenkov light; purple stays the neutrino's. */
  --electron: #ee77b6;
  --muon: #f5a623;
  --tau: #4e6cf5;
  --proton: #ff7b5f;
  --neutron: #9aabbd;
  --nu: #b9a4ff;
  --wboson: #7fe3b8;
  --gamma: #d8dde3;   /* neutral, so gamma rays never read as a tau */
  --pion: #8ff0c4;
  --bang1: #ff8a4c;
  --bang2: #4cc9ff;
  --card: rgba(4, 19, 32, 0.8);
  --abyss: #03101a;
  --f-display: "Newsreader", "Iowan Old Style", Georgia, serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  --warn: #e5484d;   /* preliminary / under construction */
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { background: var(--ink); color: var(--fg); font-family: var(--f-body); font-size: 17px; line-height: 1.6; }
/* KaTeX maths (\( ... \) in the text) sized to sit with IBM Plex Sans; colour follows the surrounding text */
.katex { font-size: 1.08em; line-height: 1.2; }
.eq .katex, .hud .katex { font-size: 1.12em; }
/* scale indicator, placed under the visible card by script */
.scale-ind {
  position: fixed; z-index: 3; margin: 0; display: flex; align-items: center; gap: 12px; pointer-events: none;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.scale-ind { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
.si-bar-wrap { height: 12px; display: flex; align-items: center; width: 100%; }
.si-bar { position: relative; height: 2px; background: var(--cher-hi); transition: width 0.12s linear; }
.si-tick { position: absolute; top: -5px; width: 2px; height: 12px; background: var(--cher-hi); }
.si-tick.l { left: 0; } .si-tick.r { right: 0; }
.scale-ind.nts .si-bar { background: repeating-linear-gradient(90deg, var(--muted) 0 6px, transparent 6px 11px); }
.scale-ind.nts .si-tick { background: var(--muted); }
@media (prefers-reduced-motion: reduce) { .si-bar { transition: none; } }.si-text { margin: 0; display: flex; flex-direction: column; gap: 1px; min-width: 0; font-family: var(--f-mono); }
.si-val { font-size: 17px; color: var(--fg); font-variant-numeric: tabular-nums; }
.si-note { font-size: 13px; line-height: 1.35; color: var(--muted); }
@media (max-width: 820px) {
  .scale-ind { gap: 8px; padding: 6px 10px; }
  .si-val { font-size: 13px; }
  .si-note { font-size: 11px; }
}
.stage { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; }
/* The track keeps one screen of scroll per step, but every card is pinned to the same spot in the viewport;
   only the active one shows, and it swaps when its animation segment ends. */
.steps {
  position: relative; margin-top: -100vh; margin-top: -100dvh; z-index: 2; pointer-events: none;
  display: grid; grid-template-rows: 100%;
  height: calc(var(--n) * 100vh); height: calc(var(--n) * 100dvh);
}
.step, .pstep {
  grid-area: 1 / 1; align-self: start; position: sticky; top: 0;
  height: 100vh; height: 100dvh; display: flex; align-items: center;
  padding-block: 116px 132px;   /* clear of the explanation-level panel above the cards; the room below is for the scale indicator, so card + indicator sit centred */
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.step.active, .pstep.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.steps.cards-off .step, .steps.cards-off .pstep { visibility: hidden; transition: none; }
.card {
  pointer-events: auto;
  width: min(470px, 38vw); margin-left: clamp(0px, 2vw, 32px);
  max-height: 100%; overflow-y: auto; overscroll-behavior: contain;   /* a card too tall for the screen has its own scroll bar (cardFades) */
  scrollbar-width: thin; scrollbar-color: rgba(154, 216, 255, 0.5) transparent;
  background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  padding: 22px 24px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; flex-direction: column; gap: 10px; font-size: 18px;
}
.card > * { flex: none; }
/* a card in parts (.sub), one shown at a time as the drawing moves on (placeSubs) */
.card .sub { display: none; flex-direction: column; gap: 10px; }
.card .sub.on { display: flex; animation: sub-in 0.45s ease-out; }
@keyframes sub-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .card .sub.on { animation: none; } }
.sub-of { color: var(--muted); }
.card::-webkit-scrollbar { width: 8px; }
.card::-webkit-scrollbar-thumb { background: rgba(154, 216, 255, 0.45); border-radius: 4px; }
.card::-webkit-scrollbar-track { background: transparent; }
.card.fade-b { -webkit-mask-image: linear-gradient(#000 calc(100% - 40px), transparent); mask-image: linear-gradient(#000 calc(100% - 40px), transparent); }
.card.fade-t { -webkit-mask-image: linear-gradient(transparent, #000 40px); mask-image: linear-gradient(transparent, #000 40px); }
.card.fade-t.fade-b { -webkit-mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(transparent, #000 40px, #000 calc(100% - 40px), transparent); }
@media (min-width: 821px) and (max-height: 800px) {
  .step, .pstep { padding-block: 112px 112px; }
  .card { padding: 18px 22px; gap: 8px; }
  .card p, .card p.lede { font-size: 17px; line-height: 1.5; }
  .card .note { font-size: 15px; }
  h1 { font-size: clamp(30px, 3.2vw, 44px); }
}
.eyebrow { font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin: 0; }
.eyebrow b { color: var(--cher); font-weight: 500; }
h1, h2 { font-family: var(--f-display); font-weight: 400; text-wrap: balance; margin: 0; line-height: 1.12; }
h1 { font-size: clamp(34px, 3.8vw, 54px); letter-spacing: -0.01em; }
h1 em, .story-title em { font-style: italic; color: var(--cher-hi); }
h2 { font-size: clamp(27px, 2.6vw, 36px); }
.card p { margin: 0; color: var(--fg); }
.card p.lede { color: var(--muted); font-size: 18px; }
.eq {
  font-family: var(--f-mono); font-size: 16px; color: var(--cher-hi);
  background: rgba(92, 179, 255, 0.08); border: 1px solid var(--line); border-radius: 4px;
  padding: 7px 10px; align-self: flex-start;
}
.note { font-size: 16px; color: var(--muted); }
.hint { font-family: var(--f-mono); font-size: 15px; color: var(--muted); display: flex; align-items: center; gap: 8px; }
.hint::after { content: ""; width: 1px; height: 22px; background: linear-gradient(var(--cher), transparent); }
/* a hint that a long stretch of scrolling follows: highlighted, with a bobbing arrow */
.hint.go { color: var(--cher-hi); background: rgba(92, 179, 255, 0.08); border: 1px solid rgba(154, 216, 255, 0.4); border-radius: 4px; padding: 8px 12px; gap: 12px; }
.hint.go::after { content: "↓"; width: auto; height: auto; background: none; font-size: 20px; line-height: 1; animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .hint.go::after { animation: none; } }
/* the big "scroll to zoom" flag over the drawing: shown when the reader pauses partway through a zoom (placeFlag) */
.zoom-flag {
  position: absolute; top: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.35s;
  display: flex; align-items: center; gap: 12px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 22px; color: var(--fg);
  background: rgba(2, 11, 19, 0.88); border: 1.5px solid var(--cher-hi); border-radius: 999px; padding: 12px 26px;
  box-shadow: 0 0 24px rgba(79, 157, 255, 0.35);
}
.zoom-flag.on { opacity: 1; }
.zoom-flag b { color: var(--cher-hi); font-weight: 700; letter-spacing: 0.04em; }
.zoom-flag i { font-style: normal; font-size: 28px; color: var(--cher-hi); animation: hint-bob 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .zoom-flag { transition: none; } .zoom-flag i { animation: none; } }
@media (max-width: 820px) { .zoom-flag { font-size: 16px; padding: 8px 16px; } .zoom-flag i { font-size: 20px; } }
sub, sup { font-size: 0.72em; line-height: 0; }
.k-mu { color: var(--muon); } .k-nu { color: var(--nu); } .k-p { color: var(--proton); } .k-w { color: var(--wboson); } .k-c { color: var(--cher-hi); } .k-g { color: var(--gamma); }
.hud {
  position: absolute; top: 72px; right: 76px; z-index: 1;
  font-family: var(--f-mono); font-size: 14px; line-height: 1.5;
  background: rgba(2, 11, 19, 0.6); border: 1px solid var(--line); border-radius: 4px;
  padding: 10px 12px; min-width: 280px; font-variant-numeric: tabular-nums;
}
.hud-title { color: var(--cher); text-transform: uppercase; letter-spacing: 0.12em; font-size: 12px; margin-bottom: 4px; }
.hud-row { display: flex; justify-content: space-between; gap: 18px; }
.hud-row span { color: var(--muted); }
.hud-row b { font-weight: 500; color: var(--fg); }
.hud-row b.on { color: var(--cher-hi); }
.hud-row b.off { color: var(--muted); }
.rail {
  position: fixed; z-index: 5; top: 50%; transform: translateY(-50%);
  right: calc(14px + env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; gap: 6px; transition: opacity 0.3s;
}
.rail.gone { opacity: 0; pointer-events: none; }
.rail button[hidden] { display: none; }   /* stages the explanation level skips */
.rail button {
  all: unset; cursor: pointer; display: flex; align-items: center; justify-content: flex-end; gap: 10px;
  font-family: var(--f-mono); font-size: 13px; color: var(--muted); padding: 3px 0;
}
.rail button i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--muted); display: block; flex: none; }
.rail button span { opacity: 0; transform: translateX(4px); transition: opacity 0.2s, transform 0.2s; white-space: nowrap; }
.rail:hover button span, .rail button:focus-visible span { opacity: 1; transform: none; }
.rail button.active { color: var(--cher-hi); }
.rail button.active i { background: var(--cher); border-color: var(--cher); box-shadow: 0 0 8px var(--cher); }
.rail button.active span { opacity: 1; transform: none; }
.rail button:focus-visible i { outline: 2px solid var(--cher-hi); outline-offset: 2px; }
.progress { display: none; }

.notes {
  position: relative; z-index: 3; background: var(--deep); border-top: 1px solid var(--line);
  padding-block: 64px 80px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.notes-inner { max-width: 1040px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 48px; }
.notes-inner > * { min-width: 0; }
.notes-inner { align-items: start; }
/* collapsible notes: a button in each heading opens its panel in place; the panel's height animates via grid rows */
.notes h2.disc-h, .notes .disc > h2 { margin-bottom: 0; }
.disc-btn {
  all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: flex; align-items: center; gap: 12px;
  font: inherit; font-size: clamp(22px, 2.1vw, 30px); color: var(--fg); padding: 12px 16px; border: 1px solid var(--line); border-radius: 6px; background: var(--card);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.disc-btn:hover { border-color: var(--cher); }
.disc-btn:focus-visible { outline: 2px solid var(--cher-hi); outline-offset: 2px; }
.disc-state { margin-left: auto; font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cher); }
.disc-chev { flex: none; width: 10px; height: 10px; border-right: 2px solid var(--cher); border-bottom: 2px solid var(--cher); transform: translateY(-3px) rotate(45deg); transition: transform 0.3s ease; }
.disc-btn[aria-expanded="true"] .disc-chev { transform: translateY(2px) rotate(-135deg); }
.disc-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease, opacity 0.35s ease; opacity: 0; overflow: hidden; contain: paint; }   /* a closed panel's text must not stretch the page */
.disc-panel.open { grid-template-rows: 1fr; opacity: 1; }
.disc-inner { overflow: hidden; min-height: 0; }
.disc-panel.open .disc-inner { padding-top: 8px; }
@media (prefers-reduced-motion: reduce) { .disc-panel, .disc-chev { transition: none; } }
.notes h2 { font-size: clamp(30px, 3vw, 40px); margin-bottom: 18px; }
.notes h3 { font-family: var(--f-mono); font-weight: 500; font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cher); margin: 24px 0 8px; }
.notes ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; max-width: 64ch; }
.notes li { color: var(--fg); }
.notes li::marker { color: var(--muted); }
/* reference lists: smaller and in the muted accent, so they read as citations rather than notes */
.notes ul.refs { gap: 5px; }
.notes ul.refs li { font-size: 0.86em; line-height: 1.5; color: var(--muted); }
.notes ul.refs li i { color: var(--fg); }
.notes ul.refs a { color: var(--cher-hi); }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 16px; }
th, td { text-align: left; padding: 8px 10px 8px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 400; color: var(--muted); }
td { font-family: var(--f-mono); font-size: 15px; color: var(--cher-hi); white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.sep th, tr.sep td { padding-top: 22px; }

.notes a { color: var(--cher-hi); }
@media (max-width: 820px) {
  /* the drawing fills the top half (see resize()), the card is pinned below it */
  .step, .pstep { align-items: flex-end; padding-top: 0; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .card { width: 100%; margin-left: 0; max-height: calc(46vh - 14px); max-height: calc(46dvh - 14px - env(safe-area-inset-bottom, 0px)); padding: 16px 18px; gap: 8px; font-size: 16px; }
  .card p, .card p.lede { font-size: 15px; line-height: 1.5; }
  .card .note { font-size: 14px; }
  .eyebrow { font-size: 12px; }
  h1 { font-size: 30px; }
  h2 { font-size: 24px; }
  .hud { top: 66px; left: max(12px, env(safe-area-inset-left, 0px)); right: auto; min-width: 0; font-size: 12px; padding: 7px 9px; }
  .hud-row { gap: 10px; }
  .rail { display: none; }
  .progress { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line); z-index: 1; }
  .progress div { height: 100%; width: 0; background: var(--cher); }
  .notes-inner { grid-template-columns: 1fr; gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .step, .pstep, .step.active, .pstep.active, .rail button span { transition: none; }
}
.k-b1 { color: var(--bang1); } .k-b2 { color: var(--bang2); }
.k-e { color: var(--electron); } .k-tau { color: var(--tau); } .k-pi { color: var(--pion); }

/* explanation level (the slider at top left): text marked data-lvl="..." shows only at the levels it lists.
   1 is for readers with minimal science background, 2 the standard text, 3 adds detail for specialists. No data-level means 2. */
html:not([data-level="1"]):not([data-level="3"]) [data-lvl]:not([data-lvl~="2"]),
html[data-level="1"] [data-lvl]:not([data-lvl~="1"]),
html[data-level="3"] [data-lvl]:not([data-lvl~="3"]) { display: none !important; }
/* expert detail: an "In detail" box with a one-line takeaway, short steps, equations on their own line, then sources */
.deep { display: flex; flex-direction: column; gap: 8px; border-left: 2px solid rgba(92, 179, 255, 0.45); padding: 2px 0 2px 12px; }
.card .deep p, .array-head .deep p { margin: 0; font-size: 16px; line-height: 1.55; }
.card .deep p.deep-h, .array-head .deep p.deep-h { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cher); }
.card .deep p.deep-take, .array-head .deep p.deep-take { font-weight: 500; color: var(--fg); }
.deep ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; font-size: 16px; line-height: 1.55; }
.deep li::marker { color: var(--muted); }
.deep .katex { font-size: 1em; }
.card .deep p.eq, .array-head .deep p.eq { font-size: 16px; }
.deep .eq .katex { font-size: 1.05em; }
.card .deep p.deep-src, .array-head .deep p.deep-src { font-size: 14px; color: var(--muted); }
.deep-src a { color: var(--cher-hi); }
.eq { max-width: 100%; overflow-x: auto; }
/* The explanation level: a small panel in the cards' style, exactly over the card column (the card's own left edge
   and width, from .step's padding and .card's margin and width), with the flavour switch centred over the drawing
   beside it. Cards start lower to make room (.step padding below). */
:root {
  --card-l: calc(max(16px, env(safe-area-inset-left, 0px)) + clamp(0px, 2vw, 32px));
  --card-w: min(470px, 38vw);
}
.level-ctl {
  position: fixed; z-index: 8; top: calc(12px + env(safe-area-inset-top, 0px)); left: var(--card-l); width: var(--card-w);
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 18px; row-gap: 5px;
  padding: 10px 18px 9px; background: var(--card); border: 1px solid var(--line); border-radius: 6px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.lv-title { grid-row: 1 / 3; margin: 0; font-family: var(--f-mono); font-size: 12px; line-height: 1.35; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cher); }
.lv-stops { display: grid; grid-template-columns: repeat(3, 1fr); font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.lv-stops button { all: unset; cursor: pointer; color: var(--muted); transition: color 0.2s; }
.lv-stops button:nth-child(2) { text-align: center; } .lv-stops button:nth-child(3) { text-align: right; }
.lv-stops button:hover { color: var(--fg); }
.lv-stops button.on { color: var(--cher-hi); font-weight: 600; }
/* the slider: a thin bar filled up to the thumb, a dot at each stop (both painted in the track, under the thumb; the
   script sets --fill and the dots' colours --d1..--d3), and a glowing thumb. The dots sit where the thumb's centre stops:
   8 px in from each end, and the middle. */
.lv-range { position: relative; height: 16px; }
.level-ctl input {
  --dot-off: rgba(150, 196, 230, 0.5);
  --track: radial-gradient(circle at 8px 50%, var(--d1, var(--cher)) 3px, transparent 3.6px),
    radial-gradient(circle at 50% 50%, var(--d2, var(--cher)) 3px, transparent 3.6px),
    radial-gradient(circle at calc(100% - 8px) 50%, var(--d3, var(--dot-off)) 3px, transparent 3.6px),
    linear-gradient(90deg, var(--cher) var(--fill, 50%), rgba(150, 196, 230, 0.22) var(--fill, 50%)) center / 100% 4px no-repeat;
  position: absolute; inset: 0; width: 100%; height: 16px; margin: 0; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none;
}
.level-ctl input::-webkit-slider-runnable-track { height: 8px; background: var(--track); }
.level-ctl input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -4px; border-radius: 50%; background: var(--cher-hi); border: 3px solid var(--cher); box-sizing: border-box; box-shadow: 0 0 10px rgba(92, 179, 255, 0.6); }
.level-ctl input::-moz-range-track { height: 8px; background: var(--track); }
.level-ctl input::-moz-range-thumb { width: 10px; height: 10px; border-radius: 50%; background: var(--cher-hi); border: 3px solid var(--cher); box-shadow: 0 0 10px rgba(92, 179, 255, 0.6); }
.level-ctl input:focus-visible { outline: 2px solid var(--cher-hi); outline-offset: 3px; border-radius: 3px; }
.lv-desc { grid-column: 1 / -1; margin: 3px 0 0; padding-top: 6px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.4; color: var(--muted); text-align: center; }
.lv-desc b { color: var(--fg); font-weight: 600; }
/* Beginner: what the units in a readout or the scale bar mean */
.hud-units { margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--line); max-width: 300px; display: flex; flex-direction: column; gap: 3px; font-size: 11px; line-height: 1.4; color: var(--muted); white-space: normal; }
.si-unit { font-family: var(--f-body); font-size: 14px; line-height: 1.4; color: var(--cher-hi); }
/* maths with Greek letters: a dotted underline says it can be hovered, and the tip explains each symbol */
.katex.gk { cursor: help; border-bottom: 1px dotted rgba(154, 216, 255, 0.55); }
.gk-tip {
  position: fixed; z-index: 30; max-width: 340px; pointer-events: none; white-space: pre-line;
  background: rgba(2, 11, 19, 0.97); border: 1px solid var(--line); border-radius: 6px; padding: 8px 11px;
  font-family: var(--f-body); font-size: 13px; line-height: 1.5; color: var(--fg); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
@media (min-width: 821px) and (max-width: 1180px) {
  /* a narrower card column: the slider takes the whole width, and the cards leave room for a two-line description */
  .level-ctl { grid-template-columns: minmax(0, 1fr); padding: 9px 14px 8px; }
  .lv-title { display: none; }
  .lv-stops { font-size: 11px; }
  .lv-desc { font-size: 12px; }
  .step, .pstep { padding-top: 128px; }
}
@media (max-width: 820px) {
  /* a compact strip centred under the flavour switch; the drawing's readouts move down to clear it */
  .level-ctl { left: 50%; transform: translateX(-50%); top: calc(62px + env(safe-area-inset-top, 0px)); width: min(300px, calc(100vw - 32px)); grid-template-columns: minmax(0, 1fr); padding: 7px 14px 6px; }
  .lv-title, .lv-desc { display: none; }
  .lv-stops { font-size: 11px; }
  .hud { top: 120px; }
}

/* Work in progress: a red tag for links and titles, and a quiet full-width grey strip for a page under construction */
.prelim-tag { display: inline-block; vertical-align: 0.15em; margin-left: 8px; padding: 2px 8px; border-radius: 3px; background: var(--warn); color: #fff;
  font-family: var(--f-mono); font-size: 11px; font-weight: 600; font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.5; }
.prelim-banner { margin: 0; padding: 7px max(16px, env(safe-area-inset-left, 0px)); background: #1c242c; border-bottom: 1px solid var(--line); color: var(--muted); text-align: center;
  font-size: 15px; line-height: 1.45; }
.prelim-banner strong { font-weight: 600; color: var(--fg); margin-right: 4px; }
/* the way to the other page: a button in a card, and a big card at the end of a page */
.page-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 9px 14px; border: 1px solid var(--cher); border-radius: 6px;
  background: rgba(92, 179, 255, 0.1); color: var(--cher-hi); text-decoration: none; font-family: var(--f-mono); font-size: 14px; }
.page-link:hover { background: rgba(92, 179, 255, 0.2); }
.page-link:focus-visible, .next-card:focus-visible { outline: 2px solid var(--cher-hi); outline-offset: 2px; }
.page-link { flex-wrap: wrap; row-gap: 6px; }
.page-link > span:first-child { white-space: nowrap; }   /* the arrow stays with its words; the tag wraps instead */
.page-link .prelim-tag { margin-left: 0; }
.next-page { position: relative; z-index: 3; background: var(--ink); border-top: 1px solid var(--line); padding: 56px max(16px, env(safe-area-inset-left, 0px)) 72px; }
.next-card { display: flex; flex-direction: column; gap: 10px; max-width: 760px; margin: 0 auto; padding: 26px 30px; border: 1px solid var(--cher); border-radius: 8px;
  background: linear-gradient(135deg, rgba(92, 179, 255, 0.14), rgba(92, 179, 255, 0.03)); color: var(--fg); text-decoration: none; }
.next-card:hover { background: linear-gradient(135deg, rgba(92, 179, 255, 0.22), rgba(92, 179, 255, 0.06)); }
.next-eyebrow { font-family: var(--f-mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cher); }
.next-title { font-family: var(--f-display); font-size: clamp(28px, 3vw, 40px); line-height: 1.12; }
.next-text { color: var(--muted); max-width: 60ch; }
.next-go { font-family: var(--f-mono); font-size: 15px; color: var(--cher-hi); }