/* JavaScript, then Node.js: the course stylesheet (docs/js-series/design-spec.md, sections 1, 2, 5, 6, 7).
   Copied from courses/mobile/mobile.css (the site's course DNA: paper for reading, night glass for the machine) and
   adapted: the family tabs, the test sheet, the lifecycle and the stacks are gone; the course's own components are at
   the end (place tags, code panels, Open-in buttons, On-your-machine panels, Predict and Check, the core path, hints,
   the interview cards, prompts, out tables, meaning chips).
   One colour, one meaning (design spec section 2): the engine purple, a host sky, your code amber, ok mint, no salmon,
   Part 2's packages rose. The interactive accent stays the site's indigo, for links, focus rings and control hovers
   only; selected states are an ink pill. Code panels have no token colours.
   Motion: transform and opacity only, slow, and none at all under prefers-reduced-motion or the pause switch. */

@font-face { font-family: "Playfair Fallback"; font-style: normal; font-weight: 500 700; src: local("Georgia Bold"), local("Georgia-Bold"); size-adjust: 88.4%; ascent-override: 122.4%; descent-override: 28.4%; line-gap-override: 0%; }
@font-face { font-family: "Playfair Fallback"; font-style: italic; font-weight: 500 700; src: local("Georgia Italic"), local("Georgia-Italic"); size-adjust: 96.6%; ascent-override: 112%; descent-override: 26%; line-gap-override: 0%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"), local("ArialMT"); size-adjust: 106.3%; ascent-override: 91.2%; descent-override: 22.8%; line-gap-override: 0%; }
@font-face { font-family: "Mono Fallback"; src: local("Courier New"), local("CourierNewPSMT"); size-adjust: 100%; ascent-override: 102%; descent-override: 30%; line-gap-override: 0%; }

/* ---------- Tokens ---------- */
:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --bg-glass: rgba(251, 250, 247, .8);
  --surface: #ffffff;
  --surface-2: #f4f2ed;
  --surface-glass: rgba(255, 255, 255, .7);
  --ink: #16161f;
  --ink-2: #474756;
  --ink-3: #5c5c6a;
  --rule: #e4e1d9;
  --rule-strong: #cfcbc1;
  --control: #8f8a7f;            
  --accent: #4f46e5;
  --accent-hover: #3730a3;
  --accent-soft: rgba(79, 70, 229, .08);
  --on-accent: #fff;
  --ok: #17784f;
  --no: #b3261e;
  --wire: linear-gradient(90deg, #ff3d8b 0%, #7a5cff 55%, #2f7dff 100%);
  --wire-v: linear-gradient(180deg, #ff3d8b 0%, #7a5cff 55%, #2f7dff 100%);
  --wire-deep: linear-gradient(135deg, #d6246e 0%, #6a4cf0 55%, #1f66e0 100%); 
  --text-grad: linear-gradient(95deg, #d6246e 0%, #6a4cf0 52%, #1f66e0 100%); 
  --mark: linear-gradient(90deg, rgba(255, 61, 139, .22), rgba(122, 92, 255, .22) 55%, rgba(47, 125, 255, .22));
  --glow-1: rgba(255, 61, 139, .13);
  --glow-2: rgba(122, 92, 255, .12);
  --glow-3: rgba(47, 125, 255, .11);
  --dot: rgba(22, 22, 31, .075);
  --shadow-sm: 0 1px 2px rgba(22, 22, 31, .04), 0 6px 18px -12px rgba(22, 22, 31, .14);
  --shadow: 0 1px 2px rgba(22, 22, 31, .05), 0 18px 40px -24px rgba(22, 22, 31, .28);
  --shadow-lift: 0 2px 6px rgba(22, 22, 31, .05), 0 28px 56px -28px rgba(74, 52, 190, .4);

  --engine: #7e22ce; --host: #0369a1; --you: #9a5b00; --lib: #be185d;
  --engine-soft: color-mix(in srgb, var(--engine) 9%, var(--surface));
  --host-soft:   color-mix(in srgb, var(--host) 9%, var(--surface));
  --you-soft:    color-mix(in srgb, var(--you) 9%, var(--surface));
  --ok-soft:     color-mix(in srgb, var(--ok) 9%, var(--surface));
  --no-soft:     color-mix(in srgb, var(--no) 8%, var(--surface));

  --night: #0c0f1a;
  --night-2: #131727;
  --night-ink: #ecebf3;
  --night-ink-2: #c3c3d1;
  --night-ink-3: #a3a4b8;
  --night-rule: rgba(255, 255, 255, .09);
  --code-bg: #0e111b;
  --code-rule: #262b3d;
  --code-ink: #e6e8f0;
  --code-dim: #8d93a8;
  --code-focus: #a8a3ff;

  --font-body: 'Inter', 'Inter Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-display: 'Playfair Display', 'Playfair Fallback', Georgia, 'Times New Roman', serif;
  --font-mono: 'JetBrains Mono', 'Mono Fallback', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-body: 1.02rem;
  --r-sm: 10px;
  --r: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --gutter: 20px;
  --prose-w: 42.5rem;            /* the reading column: 680 px at 16 px, it grows with the type from 1600 px */
  --head-h: 62px;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  
  --ring: radial-gradient(circle at 50% 50%, var(--engine) 0 3.6px, transparent 4.2px), radial-gradient(circle at 50% 50%, transparent 0 7.4px, var(--host) 7.6px 9.4px, transparent 9.8px);
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0c0e17; --bg-glass: rgba(12, 14, 23, .76); --surface: #131623; --surface-2: #1a1e2e; --surface-glass: rgba(26, 30, 46, .55);
  --ink: #ecebf3; --ink-2: #b9bacb; --ink-3: #a0a2b6;
  --rule: #232738; --rule-strong: #343a50; --control: #6b6f86;
  --accent: #a8a3ff; --accent-hover: #c9c6ff; --accent-soft: rgba(168, 163, 255, .12); --on-accent: #12131a;
  --ok: #5fd3a0; --no: #ff8a80;
  --text-grad: linear-gradient(95deg, #ff6aa9 0%, #a08bff 52%, #6ea8ff 100%);
  --mark: linear-gradient(90deg, rgba(255, 106, 169, .3), rgba(160, 139, 255, .3) 55%, rgba(110, 168, 255, .3));
  --glow-1: rgba(255, 61, 139, .15); --glow-2: rgba(122, 92, 255, .2); --glow-3: rgba(47, 125, 255, .2);
  --dot: rgba(255, 255, 255, .05);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -14px rgba(0, 0, 0, .6);
  --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 44px -24px rgba(0, 0, 0, .75);
  --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 64px -28px rgba(122, 92, 255, .42);
  --engine: #c084fc; --host: #7dd3fc; --you: #fbbf24; --lib: #ff6aa9;
  --code-bg: #0a0c14; --code-rule: #262a3a;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --bg: #0c0e17; --bg-glass: rgba(12, 14, 23, .76); --surface: #131623; --surface-2: #1a1e2e; --surface-glass: rgba(26, 30, 46, .55);
    --ink: #ecebf3; --ink-2: #b9bacb; --ink-3: #a0a2b6;
    --rule: #232738; --rule-strong: #343a50; --control: #6b6f86;
    --accent: #a8a3ff; --accent-hover: #c9c6ff; --accent-soft: rgba(168, 163, 255, .12); --on-accent: #12131a;
    --ok: #5fd3a0; --no: #ff8a80;
    --text-grad: linear-gradient(95deg, #ff6aa9 0%, #a08bff 52%, #6ea8ff 100%);
    --mark: linear-gradient(90deg, rgba(255, 106, 169, .3), rgba(160, 139, 255, .3) 55%, rgba(110, 168, 255, .3));
    --glow-1: rgba(255, 61, 139, .15); --glow-2: rgba(122, 92, 255, .2); --glow-3: rgba(47, 125, 255, .2);
    --dot: rgba(255, 255, 255, .05);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 22px -14px rgba(0, 0, 0, .6);
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 22px 44px -24px rgba(0, 0, 0, .75);
    --shadow-lift: 0 2px 6px rgba(0, 0, 0, .35), 0 30px 64px -28px rgba(122, 92, 255, .42);
    --engine: #c084fc; --host: #7dd3fc; --you: #fbbf24; --lib: #ff6aa9;
    --code-bg: #0a0c14; --code-rule: #262a3a;
  }
}

.night {
  color-scheme: dark;
  --bg: var(--night); --surface: #151a2b; --surface-2: #1b2034; --ink: var(--night-ink); --ink-2: var(--night-ink-2); --ink-3: var(--night-ink-3);
  --rule: rgba(255, 255, 255, .09); --rule-strong: rgba(255, 255, 255, .16);
  --accent: #a8a3ff; --accent-soft: rgba(168, 163, 255, .14);
  --engine: #c084fc; --host: #7dd3fc; --you: #fbbf24; --lib: #ff6aa9; --ok: #5fd3a0; --no: #ff8a80;
  --engine-soft: color-mix(in srgb, #c084fc 14%, #141828); --host-soft: color-mix(in srgb, #7dd3fc 12%, #141828);
  --you-soft: color-mix(in srgb, #fbbf24 11%, #141828); --ok-soft: color-mix(in srgb, #5fd3a0 12%, #141828);
  --no-soft: color-mix(in srgb, #ff8a80 12%, #141828);
  color: var(--ink);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--head-h) + 20px); background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink); overflow-x: clip;
  font: 400 1rem/1.7 var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word; font-variant-numeric: lining-nums;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 50%, transparent); }
a:hover { color: var(--accent-hover); text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible { outline-color: var(--code-focus); }
::selection { background: color-mix(in srgb, #7a5cff 28%, transparent); }
code, kbd, pre { font-family: var(--font-mono); font-variant-ligatures: none; }
:not(pre) > code { font-size: .86em; padding: .12em .4em; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--rule); white-space: nowrap; }
@media (max-width: 480px) { :not(pre) > code { white-space: normal; overflow-wrap: anywhere; -webkit-box-decoration-break: clone; box-decoration-break: clone; } }
kbd { font-size: .82em; padding: .1em .42em; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule-strong); border-bottom-width: 2px; white-space: nowrap; }
.skip-link { position: absolute; left: -9999px; top: 0; }
.skip-link:focus { left: 12px; top: 12px; z-index: 100; background: var(--ink); color: var(--bg); padding: 10px 14px; border-radius: 10px; font-weight: 600; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { width: 100%; max-width: 1240px; margin-inline: auto; padding-inline: var(--gutter); }
.prose { max-width: var(--prose-w); margin-inline: auto; }
.wide { max-width: 1040px; margin-inline: auto; }

/* ---------- Header: glass, the brand wire fills as you read ---------- */
.site-head {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg-glass);
  -webkit-backdrop-filter: saturate(1.5) blur(16px); backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid color-mix(in srgb, var(--rule) 80%, transparent);
}
.site-head__bar { display: flex; align-items: center; gap: 10px; min-height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 11px; min-width: 0; color: var(--ink); text-decoration: none; margin-right: auto; }
.brand:hover { color: var(--ink); }
.brand img { width: 32px; height: 32px; flex: none; }
.brand__text { display: grid; min-width: 0; line-height: 1.05; }
.brand__by { font: 500 .62rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; }
.brand__name { font-family: var(--font-display); font-weight: 600; font-size: 1.24rem; letter-spacing: -.01em; white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: 2px; flex: none; }
.site-nav a { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .92rem; padding: 8px 12px; border-radius: 999px; white-space: nowrap; transition: background-color .2s ease, color .2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); background: color-mix(in srgb, var(--ink) 6%, transparent); }
.head-btn {
  display: inline-grid; place-items: center; height: 38px; min-width: 38px; flex: none; padding: 0 11px;
  border-radius: 999px; border: 1px solid var(--control); background: var(--surface-glass); color: var(--ink);
  font: 600 .78rem/1 var(--font-mono); letter-spacing: .06em; cursor: pointer; transition: border-color .2s ease, background-color .2s ease;
}
.head-btn:hover { border-color: var(--ink-3); background: var(--surface); }
.head-btn svg { width: 17px; height: 17px; }
.head-btn--present { gap: 7px; grid-auto-flow: column; font-family: var(--font-body); font-size: .82rem; letter-spacing: .01em; padding: 0 14px; }

.motion-toggle svg { width: 15px; height: 15px; }
.motion-toggle .motion-toggle__play { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle__pause { display: none; }
.motion-toggle[aria-pressed="true"] .motion-toggle__play { display: block; }
@media (prefers-reduced-motion: reduce) { .motion-toggle { display: none; } }

.i18n-wait :is(.module-main, .site-nav, .site-foot, #presentBtn, #langToggle) { visibility: hidden; }
.theme-toggle .icon-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}
.site-head__progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--wire); transform-origin: 0 50%; transform: scaleX(0); opacity: .9; pointer-events: none; }
@supports (animation-timeline: scroll()) {
  .site-head__progress { animation: read-progress linear both; animation-timeline: scroll(root block); }
  @keyframes read-progress { to { transform: scaleX(1); } }
}
@media (max-width: 700px) { .site-nav a.hide-sm, .head-btn--present { display: none; } }
@media (max-width: 480px) {
  .site-nav { flex: 0 999 auto; }
  .site-nav a { white-space: normal; text-align: center; line-height: 1.15; font-size: .88rem; padding: 6px 10px; }
}
@media (max-width: 400px) { .site-head__bar { gap: 6px; } .site-nav a { padding-inline: 8px; } .brand img { display: none; } }

/* ---------- Hero ---------- */

.module-main { position: relative; isolation: isolate; }
.module-main::before {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--head-h)); height: min(1100px, 130vh); pointer-events: none;
  background:
    radial-gradient(40% 50% at 8% 8%, var(--glow-1), transparent 70%),
    radial-gradient(42% 55% at 92% 18%, var(--glow-3), transparent 70%),
    radial-gradient(50% 45% at 55% 62%, var(--glow-2), transparent 72%);
}
.module-main::after {
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * var(--head-h)); height: 760px; pointer-events: none;
  background-image: radial-gradient(var(--dot) 1px, transparent 1.4px); background-size: 28px 28px;
  -webkit-mask-image: linear-gradient(180deg, #000 10%, transparent 100%); mask-image: linear-gradient(180deg, #000 10%, transparent 100%);
}
.hero { padding: clamp(40px, 5vw, 76px) 0 clamp(28px, 3vw, 44px); }

.hero:has(> .stage) {
  display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); align-items: center;
  gap: clamp(28px, 4.5vw, 72px);
}
.hero__text { min-width: 0; }
.eyebrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin: 0 0 22px;
  font: 500 .74rem/1.4 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.eyebrow::before { content: ""; width: 34px; height: 2px; border-radius: 2px; background: var(--wire); flex: none; }
.eyebrow a { color: var(--ink); text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; padding-bottom: 2px; }
.eyebrow a:hover { color: var(--accent); }
.eyebrow .sep { color: var(--rule-strong); }
.hero h1 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(2.2rem, 1.2rem + 3.3vw, 3.7rem); line-height: 1.06;
  letter-spacing: -.018em; margin: 0 0 22px; max-width: 16ch; text-wrap: balance;
}
.hub-hero h1 { font-size: clamp(2.4rem, 1.25rem + 3.9vw, 4.25rem); max-width: 13ch; line-height: 1.02; }
.hero h1 em {
  font-style: italic; font-weight: 500; padding-right: .06em;
  background: var(--text-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.lede { font-size: clamp(1.08rem, 1rem + .4vw, 1.27rem); line-height: 1.6; color: var(--ink-2); margin: 0 0 24px; max-width: 54ch; text-wrap: pretty; }

.byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; margin: 0; font-size: .88rem; color: var(--ink-3); overflow: hidden; }
.byline > span + span::before { content: "·"; display: inline-block; width: 22px; margin-left: -22px; text-align: center; color: var(--rule-strong); font-weight: 700; }
.byline kbd { font-size: .78em; }
@media (max-width: 700px) { .byline__key { display: none; } }

.stage {
  --sa: 192 132 252; --sb: 125 211 252; --sc: 251 191 36;   
  position: relative; isolation: isolate; overflow: hidden; margin: 0; min-width: 0;
  border-radius: var(--r-xl); color: var(--night-ink);
  background:
    radial-gradient(60% 55% at 6% 0%, rgb(var(--sa) / .26), transparent 70%),
    radial-gradient(65% 60% at 100% 100%, rgb(var(--sb) / .26), transparent 70%),
    radial-gradient(45% 45% at 62% 38%, rgb(var(--sc) / .16), transparent 70%),
    linear-gradient(180deg, #121527, #0a0c15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .1), 0 44px 80px -44px rgba(14, 16, 40, .8), 0 22px 44px -30px rgba(79, 70, 229, .45);
}
.stage::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}

.stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .07; border-radius: inherit;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
:root[data-theme="dark"] .stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -40px rgba(122, 92, 255, .4); }
@media (prefers-color-scheme: dark) { :root:not([data-theme]) .stage { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), inset 0 1px 0 rgba(255, 255, 255, .1), 0 40px 90px -40px rgba(122, 92, 255, .4); } }
.stage--hero { aspect-ratio: var(--ar, 640 / 470); }
.stage--hero .art { position: absolute; inset: 4% 3%; width: 94%; height: 92%; }

.stage--core { --ar: 640 / 470; }
.stage--core2 { --ar: 640 / 520; }
.stage > .fx-art { position: absolute; inset: 0; }
.stage > .fx-art > svg { width: 100%; height: 100%; }

.art { overflow: visible; }
.art :is(rect, path, line, circle) { vector-effect: non-scaling-stroke; }
.art-mono { font: 500 15px/1 var(--font-mono); letter-spacing: .02em; }
.art-mono--sm { font-size: 14.5px; }
.art-pill { font: 700 13.5px/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; }
.art-tag { font-family: var(--font-mono); font-weight: 600; }
@media (max-width: 600px) { .art-mono, .art-mono--sm { font-size: 21px; } .art-pill { font-size: 20px; } }

/* ---------- The wire: something goes in, something comes back (the series' mark) ---------- */
.wire { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 34px; margin: 6px 0 clamp(36px, 4vw, 60px); padding-inline: clamp(4%, (100% - 300px) / 2, 10%); overflow: hidden; }
.wire::before { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--wire); border-radius: 2px; opacity: .85; }
.wire::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 2px; margin-top: -1px; pointer-events: none; background: linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, .95) 50%, transparent 56%); transform: translateX(-60%); opacity: 0; }
.wire__pkt { position: relative; z-index: 1; font: 600 .72rem/1 var(--font-mono); letter-spacing: .02em; padding: 7px 10px; border-radius: 8px; background: var(--code-bg); color: var(--code-ink); border: 1px solid var(--code-rule); white-space: nowrap; box-shadow: 0 8px 20px -12px rgba(12, 14, 30, .6); }
.wire__pkt::after { content: " →"; color: var(--code-dim); }
.wire__pkt--back { margin-left: auto; }

.wire__pkt--you { color: #fbbf24; } .wire__pkt--host { color: #7dd3fc; } .wire__pkt--engine { color: #c084fc; }
.wire__pkt--plain { color: var(--code-ink); }
.wire__pkt--back::after { content: ""; }
.wire__pkt--back::before { content: "← "; color: var(--code-dim); }
@media (max-width: 480px) { .wire { padding-inline: 0; gap: 8px; } .wire__pkt { font-size: .64rem; padding: 6px 8px; } }
@media (prefers-reduced-motion: no-preference) {
  .wire::after { animation: wire-run 7s cubic-bezier(.5, 0, .5, 1) 1.5s 3; }
}
@keyframes wire-run { 0% { transform: translateX(-60%); opacity: 0; } 8% { opacity: 1; } 60% { transform: translateX(60%); opacity: 1; } 66%, 100% { transform: translateX(60%); opacity: 0; } }

/* ---------- Article, slides, section openers ---------- */
.article { padding: 0 0 24px; }
.article :where(p) { margin: 0 0 1.05em; }
:where(.article > .prose > p, .article li, .slide > p, .slide li) { font-size: var(--fs-body); }
:where(.slide, .article) :where(ul, ol) { padding-left: 1.25em; margin: 0 0 1.1em; }
:where(.slide, .article) :where(li) { margin: .4em 0; }
.slide li::marker, .article li::marker { color: var(--ink-3); font-weight: 600; }
:where(.slide > p) { text-wrap: pretty; }
.slide { scroll-margin-top: calc(var(--head-h) + 16px); }
.prose > .slide + .slide, .prose > .slide + .next-grid, .wide > .slide + .slide { margin-top: clamp(64px, 7vw, 104px); }
.prose > #answer + .slide { margin-top: clamp(56px, 6vw, 88px); }
.slide h2, .article h2 {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(1.75rem, 1.25rem + 1.7vw, 2.45rem); line-height: 1.12;
  letter-spacing: -.012em; margin: 0 0 .6em; text-wrap: balance;
}
.slide h3, .article h3 { font-size: 1.1rem; line-height: 1.35; margin: 1.6em 0 .5em; }
.slide h2 code, .hero h1 code { display: inline; line-height: inherit; font-size: .9em; background: none; border: 0; padding: 0; white-space: normal; }

.prose, .article > .wide { counter-reset: sec; }
.prose > .slide--read > h2,
.article > .wide > .slide > h2, .course-group__head > h2 { counter-increment: sec; }
.prose > .slide--read > h2::before,
.article > .wide > .slide > h2::before, .course-group__head > h2::before {
  content: counter(sec, decimal-leading-zero); display: block; margin: 0 0 12px;
  font: 500 .74rem/22px var(--font-mono); letter-spacing: .16em; color: var(--ink-3); height: 22px;
  padding-left: 0; background-image: var(--ring); background-repeat: no-repeat; background-position: 3.3em 50%, 3.3em 50%; background-size: 22px 22px, 22px 22px;
}

.prose > .slide > ol:not([class]) { list-style: none; padding-left: 0; counter-reset: li; }
.prose > .slide > ol:not([class]) > li { counter-increment: li; position: relative; padding-left: 2.6em; }
.prose > .slide > ol:not([class]) > li::before { content: counter(li, decimal-leading-zero); position: absolute; left: 0; top: .2em; font: 600 .78rem/1.6 var(--font-mono); color: var(--ink-3); }

/* ---------- The short answer ---------- */
#answer { margin-top: 4px; }
.answer {
  position: relative; margin: 0 !important; padding: clamp(22px, 3vw, 30px) clamp(20px, 3vw, 32px);
  font-size: clamp(1.1rem, 1.02rem + .4vw, 1.26rem) !important; line-height: 1.62; color: var(--ink); text-wrap: pretty;
  border: 1px solid transparent; border-radius: var(--r-lg);
  background:
    radial-gradient(90% 120% at 0% 0%, var(--glow-2), transparent 60%) padding-box,
    linear-gradient(var(--surface), var(--surface)) padding-box,
    linear-gradient(125deg, rgba(255, 61, 139, .6), rgba(122, 92, 255, .5) 50%, rgba(47, 125, 255, .6)) border-box;
  box-shadow: var(--shadow);
}
.answer strong { color: var(--ink); background: var(--mark) 0 88% / 100% .34em no-repeat; }
.answer__kicker { display: flex; align-items: center; gap: 10px; font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 12px; }
.answer__kicker::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--ring); }

/* ---------- Notes ---------- */

.note__title { font-weight: 700; margin: 0 0 6px !important; font-size: 1rem; }

/* ---------- Figures ---------- */
.breakout { --bw: var(--w-full, min(1040px, 100vw - 2 * var(--gutter))); width: var(--bw); margin-left: calc(50% - var(--bw) / 2); }
@media (max-width: 760px) { .breakout { --bw: calc(100vw - 2 * var(--gutter)); } }

.breakout.breakout--mid { --bw: var(--fig-w, var(--w-fig, min(900px, 100vw - 2 * var(--gutter)))); }
@media (max-width: 760px) { .breakout.breakout--mid { --bw: calc(100vw - 2 * var(--gutter)); } }

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; margin-top: 22px; margin-bottom: 24px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); -webkit-overflow-scrolling: touch; }
.table-wrap .data-table { min-width: 640px; }
.data-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .92rem; line-height: 1.45; }
.data-table th, .data-table td { padding: 13px 14px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.data-table td { color: var(--ink-2); }
.data-table thead th { font: 600 1.02rem/1.2 var(--font-display); color: var(--ink); background: var(--surface-2); padding-block: 14px; border-bottom-color: var(--rule-strong); }
.data-table tbody th { font-weight: 600; width: 11em; color: var(--ink); }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody tr:hover > * { background: color-mix(in srgb, var(--accent) 3.5%, var(--surface)); }
.data-table .muted { color: var(--ink-3); }
@media (max-width: 760px) {
  .table-wrap {
    background:
      linear-gradient(90deg, var(--surface) 40%, transparent) 0 0 / 48px 100% no-repeat local,
      linear-gradient(270deg, var(--surface) 40%, transparent) 100% 0 / 48px 100% no-repeat local,
      linear-gradient(90deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent) 0 0 / 16px 100% no-repeat scroll,
      linear-gradient(270deg, color-mix(in srgb, var(--ink) 16%, transparent), transparent) 100% 0 / 16px 100% no-repeat scroll,
      var(--surface);
  }
  .data-table tbody th, .data-table thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: 1px 0 0 var(--rule); }
  .data-table thead th:first-child { background: var(--surface-2); }
  .data-table tbody th { width: 8.5em; min-width: 8.5em; }
}

/* ---------- Cards: with knowledge, check it yourself, quick check ---------- */
.card {
  position: relative; isolation: isolate; overflow: hidden; margin: 0; padding: clamp(22px, 3.4vw, 36px);
  border-radius: var(--r-xl); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow);
}
.card__kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important; font: 600 .72rem/1.3 var(--font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); }
.card__kicker::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--ring); }
.card h2 { margin-top: 0 !important; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 1.9rem) !important; }
.card h3 { margin: 1.5em 0 .5em !important; font-size: 1.04rem !important; }
.card > p:last-child, .card > ul:last-child, .card > ol:last-child { margin-bottom: 0; }
.small-note { font-size: .88rem !important; color: var(--ink-3); margin-top: 12px !important; }
.small-note code { white-space: normal; }

.steps { list-style: none; padding-left: 0 !important; counter-reset: st; margin: 18px 0 8px !important; }
.steps > li { counter-increment: st; position: relative; padding-left: 46px; margin: 0 0 18px !important; }
.steps > li::before { content: counter(st); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 600 .8rem/1 var(--font-mono); color: var(--ink); background: var(--surface); border: 1px solid var(--rule-strong); box-shadow: 0 0 0 4px var(--surface); }
.steps > li:not(:last-child)::after { content: ""; position: absolute; z-index: -1; left: 15px; top: 30px; bottom: -20px; width: 1px; background: linear-gradient(var(--rule-strong), color-mix(in srgb, var(--rule-strong) 30%, transparent)); }
@media (max-width: 480px) { .steps > li { padding-left: 34px; } .steps > li::before { width: 26px; height: 26px; } .steps > li:not(:last-child)::after { left: 13px; top: 26px; } }

.quiz + .quiz { margin-top: 26px; padding-top: 24px; border-top: 1px dashed var(--rule-strong); }
.quiz__q { font-weight: 600; font-size: 1.04rem !important; margin-bottom: 14px !important; }
.quiz__opts { display: grid; gap: 9px; margin: 0 0 12px; counter-reset: opt; }
.quiz__opt {
  counter-increment: opt; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 12px;
  text-align: left; font: 500 .96rem/1.42 var(--font-body); color: var(--ink); padding: 10px 14px 10px 10px; border-radius: 14px; cursor: pointer;
  background: var(--surface); border: 1.5px solid var(--control); box-shadow: var(--shadow-sm);
  transition: border-color .2s ease, transform .2s var(--ease-out), box-shadow .2s ease;
}
.quiz__opt::before { content: counter(opt, upper-alpha); width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font: 600 .78rem/1 var(--font-mono); color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule); }
.quiz__opt:hover:not([disabled]) { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow); }
.quiz__opt[disabled] { cursor: default; }
.quiz__opt[data-result="right"] { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 10%, var(--surface)); }
.quiz__opt[data-result="right"]::before { background: var(--ok); color: var(--surface); border-color: transparent; }
.quiz__opt[data-result="wrong"] { border-color: var(--no); background: color-mix(in srgb, var(--no) 8%, var(--surface)); }
.quiz__opt[data-result="wrong"]::before { background: var(--no); color: var(--surface); border-color: transparent; }
.quiz__opt[data-result]::after { font-weight: 700; font-size: 1.05rem; }
.quiz__opt[data-result="right"]::after { content: "✓"; color: var(--ok); }
.quiz__opt[data-result="wrong"]::after { content: "✗"; color: var(--no); }
.quiz details summary { cursor: pointer; font-weight: 600; color: var(--ink-2); min-height: 44px; display: flex; align-items: center; }
.quiz details[open] summary { margin-bottom: 8px; }
.quiz.js-ready details summary { display: none; }
.quiz__why { font-size: .98rem !important; padding: 12px 14px; border-radius: 12px; background: var(--surface-2); border-left: 3px solid var(--rule-strong); }

.recap { list-style: none; padding: 0 !important; margin: 18px 0 0 !important; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); counter-reset: r; }
.recap li { position: relative; margin: 0 !important; padding: 16px 16px 16px 54px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); font-size: .96rem !important; line-height: 1.5; color: var(--ink-2); }
.recap li::before { counter-increment: r; content: counter(r, decimal-leading-zero); position: absolute; left: 14px; top: 15px; width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font: 600 .74rem/1 var(--font-mono); color: #fff; background: var(--wire-deep); }
.recap li b { color: var(--ink); }
.recap li:last-child:nth-child(odd) { grid-column: 1 / -1; }
#recap h2 { display: flex; align-items: center; gap: 14px; }
#recap h2::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--rule-strong), transparent); }

/* ---------- Next, sources, footer ---------- */
.next-grid { display: grid; gap: 14px; grid-template-columns: 1fr; margin: 0 0 8px; }
@media (min-width: 640px) { .next-grid { grid-template-columns: 1fr 1fr; } }
.next-grid > div { position: relative; padding: 18px 20px; border-radius: var(--r-lg); border: 1px solid var(--rule); background: var(--surface); box-shadow: var(--shadow-sm); transition: box-shadow .3s ease, transform .3s var(--ease-out); }
.next-grid > div:first-child { background: radial-gradient(80% 120% at 100% 0%, var(--glow-2), transparent 60%), var(--surface); }
.next-grid > div:hover { box-shadow: var(--shadow-lift); transform: translateY(-2px); }
.next-grid .label { display: block; font: 500 .68rem/1.3 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 8px; }
.next-grid p { margin: 0 !important; font-size: 1rem !important; }
.next-grid > div:first-child a { font-family: var(--font-display); font-weight: 600; font-size: 1.22rem; line-height: 1.25; text-decoration: none; color: var(--ink); }
.next-grid > div:first-child a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.next-grid > div:first-child a:hover { color: var(--accent); }
.next-grid > div:first-child a { text-wrap: balance; }
.next-grid > div:first-child:has(a:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.next-grid > div:first-child a:focus-visible { outline: none; }
.sources { margin-top: clamp(56px, 6vw, 80px); padding-top: 26px; border-top: 1px solid var(--rule); font-size: .92rem; color: var(--ink-2); }
.sources h2 { font: 500 .74rem/1.3 var(--font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 14px !important; }
.sources ul { list-style: none; padding: 0 !important; counter-reset: src; }
.sources li { counter-increment: src; position: relative; padding-left: 2.4em; font-size: .9rem !important; margin: .7em 0 !important; line-height: 1.55; }
.sources li::before { content: "[" counter(src) "]"; position: absolute; left: 0; font: 500 .78rem/1.9 var(--font-mono); color: var(--ink-3); }
.back-link { display: inline-flex; align-items: center; gap: 8px; margin: 22px 0 8px; font-weight: 600; text-decoration: none; }
.site-foot { position: relative; margin-top: clamp(56px, 6vw, 96px); padding: 30px 0 44px; font-size: .86rem; color: var(--ink-3); }
.site-foot::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 61, 139, .55) 20%, rgba(122, 92, 255, .55) 50%, rgba(47, 125, 255, .55) 80%, transparent); }
.site-foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; }
.site-foot__brand { display: inline-flex; align-items: center; gap: 10px; }
.site-foot__brand img { width: 24px; height: 24px; }
.site-foot a { color: var(--ink-2); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }

.deeper { margin-block: 20px 24px; border-radius: var(--r); border: 1px solid var(--rule); background: color-mix(in srgb, var(--surface) 70%, transparent); }
.deeper > summary {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 46px; padding: 10px 16px 10px 14px; cursor: pointer;
  list-style: none; border-radius: inherit; font: 600 .95rem/1.35 var(--font-body); color: var(--ink-2); -webkit-tap-highlight-color: transparent;
}
.deeper > summary::-webkit-details-marker { display: none; }
.deeper > summary::before {
  content: ""; flex: none; width: 22px; height: 22px; border-radius: 7px; border: 1px solid var(--control);
  background: linear-gradient(var(--ink-2), var(--ink-2)) 50% 50% / 10px 2px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 50% 50% / 2px 10px no-repeat;
  transition: transform .25s var(--ease-out), border-color .2s ease;
}
.deeper[open] > summary::before { background: linear-gradient(var(--ink-2), var(--ink-2)) 50% 50% / 10px 2px no-repeat; transform: rotate(180deg); }
.deeper > summary:hover { color: var(--ink); }
.deeper > summary:hover::before { border-color: var(--accent); }
.deeper[open] > summary { border-bottom: 1px dashed var(--rule-strong); border-radius: var(--r) var(--r) 0 0; color: var(--ink); }
.deeper__k { font: 600 .68rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.deeper__t { margin-left: auto; font: 500 .7rem/1.3 var(--font-mono); letter-spacing: .06em; color: var(--ink-3); white-space: nowrap; }
.deeper > :not(summary) { margin-inline: 18px; }
.deeper > summary + * { margin-top: 16px; }
.deeper > :last-child:not(summary) { margin-bottom: 18px; }
.deeper :where(p, li) { font-size: .97rem; color: var(--ink-2); }
.deeper :where(b, strong) { color: var(--ink); }

pre.expect {
  margin-block: .6em 1.1em; margin-inline: 0; padding: 12px 16px 14px; max-width: 100%; overflow-x: auto; border-radius: 12px;
  font: 500 .8rem/1.6 var(--font-mono); color: var(--code-ink); background: var(--code-bg); border: 1px solid var(--code-rule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05); white-space: pre; tab-size: 4; -webkit-overflow-scrolling: touch;
}
.expect__label {
  display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px dashed var(--code-rule);
  font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--code-dim); white-space: normal;
}
.expect__label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid var(--code-dim); flex: none; }
pre.expect:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

pre.expect.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0, 0, 0, .15)); }

.checkpoint {
  position: relative; isolation: isolate; overflow: hidden; margin-block: 30px; padding: clamp(18px, 2.8vw, 28px) clamp(18px, 3vw, 30px);
  border-radius: var(--r-lg); background: radial-gradient(70% 90% at 100% 0%, var(--glow-2), transparent 60%), var(--surface);
  border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.checkpoint::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 3px; border-radius: 0 3px 3px 0; background: var(--wire-v); }
.checkpoint .checkpoint__kicker {
  display: flex; align-items: center; gap: 10px; margin: 0 0 10px !important;
  font: 600 .72rem/1.3 var(--font-mono) !important; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-3);
}
.checkpoint__kicker::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--ring); }
.checkpoint .quiz__q { font-size: 1.06rem !important; }
.checkpoint .quiz > :last-child { margin-bottom: 0; }

.figure-film { margin-block: 28px 22px; }   
.figure-film__frame {
  position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 9; container-type: inline-size;
  border-radius: var(--r-xl); color: var(--night-ink);
  background:
    radial-gradient(60% 60% at 6% 0%, rgb(255 61 139 / .24), transparent 70%),
    radial-gradient(65% 65% at 100% 100%, rgb(47 125 255 / .24), transparent 70%),
    radial-gradient(45% 45% at 60% 40%, rgb(122 92 255 / .16), transparent 70%),
    linear-gradient(180deg, #121527, #0a0c15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 44px 80px -44px rgba(14, 16, 40, .8), 0 22px 44px -30px rgba(79, 70, 229, .45);
}
.figure-film__frame::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .085) 1px, transparent 1.3px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 45%, #000 30%, transparent 100%);
}
.figure-film__frame > img, .figure-film__frame > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.figure-film__frame > svg { position: absolute; inset: 5% 4%; width: 92%; height: 90%; }

.figure-film__frame::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 1px 0 rgba(255, 255, 255, .12); }
.figure-film__play {
  position: absolute; z-index: 3; inset: 0; margin: auto; width: clamp(56px, 15cqi, 88px); height: clamp(56px, 15cqi, 88px);
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .94); color: #16161f;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .14), 0 0 46px 6px rgba(122, 92, 255, .45), 0 14px 34px rgba(0, 0, 0, .4);
  transition: transform .25s var(--ease-out), box-shadow .25s ease;
}
.figure-film__play:hover { transform: scale(1.06); box-shadow: 0 0 0 10px rgba(255, 255, 255, .18), 0 0 56px 8px rgba(122, 92, 255, .55), 0 14px 34px rgba(0, 0, 0, .4); }
.figure-film__play[hidden] { display: none; }   
.figure-film__play svg { width: 36%; height: 36%; margin-left: 7%; }
.figure-film__frame :focus-visible { outline-color: var(--code-focus); outline-offset: 4px; }
.figure-film__status {
  position: absolute; z-index: 3; left: 12px; bottom: 12px; margin: 0 !important; display: inline-flex; align-items: center; gap: 8px;
  font: 600 .74rem/1.2 var(--font-body) !important; letter-spacing: .02em; color: #fff;
  background: rgba(10, 11, 17, .84); padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .18);
}
.figure-film__status::before { content: ""; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #fff; }
@container (min-width: 640px) { .figure-film__status { left: auto; bottom: auto; right: 16px; top: 16px; font-size: .8rem !important; padding: 8px 13px; } }
.figure-film[data-state="ready"] .figure-film__status, .figure-film[data-state="playing"] .figure-film__status { display: none; }
.figure-film[data-state="pending"] .figure-film__play { display: none; }
.figure-film[data-state="playing"] .figure-film__frame { background: #000; }
.figure-film[data-state="playing"] .figure-film__frame::before, .figure-film[data-state="playing"] .figure-film__frame::after { content: none; }
.figure-film__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; margin: 12px 4px 0; font-size: .86rem; line-height: 1.45; color: var(--ink-3); }
.figure-film__meta a { font-weight: 600; }
@media (max-width: 600px) { .figure-film__frame { border-radius: var(--r-lg); } }

.beat-end { position: relative; margin-block: 22px 0; padding-left: 18px; font-weight: 600; color: var(--ink); text-wrap: pretty; }
.beat-end b { font-weight: 700; background: linear-gradient(transparent 60%, var(--accent-soft) 0); }   
.beat-end::before { content: ""; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px; background: var(--wire-v); }
:is(.fig, .fx, .vs, .table-wrap, .rowpick) + .beat-end { margin-top: 18px; }

.check-list { list-style: none; margin: 4px 0 0 !important; padding: 0 !important; }
.check-list > li { margin: 0 !important; }
label.check {
  display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 12px; align-items: start; min-height: 44px; padding-block: 9px;
  cursor: pointer; font-size: .95rem; line-height: 1.5; color: var(--ink-2); -webkit-tap-highlight-color: transparent;
}
label.check > input[type="checkbox"] {
  -webkit-appearance: none; appearance: none; display: inline-grid; place-items: center; width: 24px; height: 24px; margin: 0;
  border-radius: 7px; border: 1.5px solid var(--control); background: var(--surface); cursor: pointer;
  transition: background-color .16s ease, border-color .16s ease, box-shadow .16s ease;
}
label.check > input[type="checkbox"]::before {
  content: ""; width: 11px; height: 6px; margin-top: -3px; border: solid var(--bg); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) scale(0);
  transition: transform .16s var(--ease-out);
}
label.check:hover > input[type="checkbox"] { border-color: var(--ok); }
label.check > input[type="checkbox"]:checked { background: var(--ok); border-color: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 16%, transparent); }
label.check > input[type="checkbox"]:checked::before { transform: rotate(-45deg) scale(1); }
label.check > input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
label.check > input:checked + span { color: var(--ink-3); }
label.check code { white-space: normal; }
label.check--done { width: fit-content; align-items: center; font-weight: 600; font-size: .9rem; }
label.check--done > input:checked + span { color: var(--ok); }

.deeper > pre.expect { margin-inline: 18px; }

@media print {
  .deeper, .checkpoint, .how-capsule > li, .figure-film { break-inside: avoid; }
  label.check > input[type="checkbox"] { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  pre.expect.is-clipped { -webkit-mask-image: none; mask-image: none; }
  .deeper > summary::before, .figure-film__play, .figure-film__status { display: none !important; }
  pre.expect { white-space: pre-wrap; color: #16161f; background: #f4f2ed; border-color: #ccc; box-shadow: none; }
  .expect__label { color: #5c5c6a; border-color: #ccc; }
  .expect__label::before { border-color: #5c5c6a; }
  .checkpoint, .how-capsule > li { box-shadow: none !important; background: #fff; }
  .how-capsule::before { display: none; }
  .how-capsule__n { box-shadow: none; }
  .figure-film__frame { box-shadow: none; border: 1px solid #ccc; }
}

/* ---------- Widths ---------- */
@media (min-width: 900px) { :root { --gutter: 32px; --fs-body: 1.075rem; } }
@media (max-width: 899px) {
  .hero:has(> .stage) { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .hero h1, .hub-hero h1 { max-width: 20ch; }
  .stage--hero { width: 100%; max-width: 620px; justify-self: center; }
}
@media (max-width: 600px) {
  .hero { padding-top: 30px; }
  .stage--hero { border-radius: var(--r-lg); }
  :root:lang(fr) .prose p { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 8 5 4; }   
  :root:lang(fr) .prose p :is(b, strong, code, [class^="c-"]) { hyphens: manual; -webkit-hyphens: manual; }
  :root:lang(fr) .module-main :is(.quiz__q, .quiz__opt, h1, h2, h3, button, .beat-end, summary, .place, .iv__tr) { hyphens: manual; -webkit-hyphens: manual; }
  .card { border-radius: var(--r-lg); }
}

/* ---------- Motion, print ---------- */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }

:root[data-motion="off"] *:not(.site-head__progress), :root[data-motion="off"] *::before, :root[data-motion="off"] *::after {
  animation: none !important; transition-property: none !important; transition-duration: 0s !important; transition-delay: 0s !important; scroll-behavior: auto !important;
}
@media print {
  
  :root:is([data-theme], :not([data-theme])) {
    color-scheme: light; --bg: #fff; --surface: #fff; --surface-2: #f4f2ed; --ink: #16161f; --ink-2: #474756; --ink-3: #5c5c6a;
    --rule: #ddd; --rule-strong: #bbb; --accent: #4f46e5; --code-bg: #f4f2ed; --code-ink: #16161f; --code-dim: #5c5c6a; --code-rule: #ccc;
    --engine: #7e22ce; --host: #0369a1; --you: #9a5b00; --lib: #be185d; --ok: #17784f; --no: #b3261e; --shadow: none; --shadow-sm: none; --shadow-lift: none;
  }
  .site-head, .site-foot, .wire, .stage, .module-main::before, .module-main::after, .back-link { display: none !important; }
  .hero, .hero:has(> .stage) { grid-template-columns: 1fr; padding-top: 0; }
  .breakout, .prose > :is(.card--wide, .card) { width: auto !important; margin-left: 0 !important; }
  .night, .fig--night { --bg: #fff; --surface: #fff; --surface-2: #f4f2ed; --ink: #16161f; --ink-2: #474756; --ink-3: #5c5c6a; --rule: #ddd; --rule-strong: #bbb; --engine: #7e22ce; --host: #0369a1; --you: #9a5b00; --lib: #be185d; --ok: #17784f; --no: #b3261e; color: #16161f; background: none !important; box-shadow: none !important; border: 1px solid #ccc; }
  .card, .answer, .capsule-card, .table-wrap { box-shadow: none !important; break-inside: avoid; }
  .prompt, code.cmd, .wire__pkt { color: #16161f; background: #f4f2ed; border-color: #ccc; }
  a { color: inherit; }
}

section#quiz > .quiz > .quiz__q[data-n]::before {
  content: attr(data-n); display: inline-block; min-width: 2.1em; margin-right: .5em; padding: 2px 0;
  font: 600 .74em/1 var(--font-mono); letter-spacing: .04em; color: var(--ink-3); vertical-align: .12em;
}
.quiz__tag {
  display: inline-block; margin: 0 8px 6px 0; padding: 3px 9px; border-radius: 999px; vertical-align: 2px;
  font: 600 .64rem/1.2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); background: var(--surface-2); border: 1px solid var(--rule);
}
.quiz-score {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  margin-block: 22px 0; padding: 14px 18px; border-radius: var(--r); border: 1px dashed var(--rule-strong);
  background: var(--surface-2);
}
.quiz-score__line { margin: 0; font: 600 .95rem/1.4 var(--font-body); color: var(--ink-2); }
.quiz-score.is-done { border-style: solid; border-color: var(--rule-strong); background: var(--surface); }
.quiz-score.is-done .quiz-score__line { color: var(--ink); font-size: 1.05rem; }
.quiz-score__again {
  min-height: 40px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--surface);
  font: 600 .9rem/1 var(--font-body); color: var(--ink); cursor: pointer;
}
.quiz-score__again:hover { border-color: var(--accent); }
.quiz-score__again:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media print { .quiz-score { display: none; } }

.m-chip {
  --c: var(--ink-3); --cs: var(--surface-2);
  display: inline-flex; align-items: center; gap: .4em; padding: .06em .55em .1em .45em; border-radius: 999px;
  font-weight: 600; font-size: .92em; line-height: 1.45; color: var(--ink); white-space: nowrap;
  background: var(--cs); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 30%, transparent);
}
.m-chip::before { content: ""; width: .5em; height: .5em; border-radius: 50%; background: var(--c); flex: none; }
.m-chip--engine { --c: var(--engine); --cs: var(--engine-soft); }
.m-chip--host { --c: var(--host); --cs: var(--host-soft); }
.m-chip--you { --c: var(--you); --cs: var(--you-soft); }
.m-engine { color: var(--engine); }
.m-host { color: var(--host); }

.hero h1 em.m-engine, .hero h1 em.m-host { background: none; -webkit-text-fill-color: currentColor; color: var(--c-h); }
.hero h1 em.m-engine { --c-h: var(--engine); }
.hero h1 em.m-host { --c-h: var(--host); }

.st { --c: var(--ink-3); display: inline-flex; align-items: center; gap: .42em; font-weight: 600; font-size: .92em; color: var(--ink); white-space: nowrap; }
.st::before { content: ""; flex: none; width: .62em; height: .62em; border-radius: 50%; box-sizing: border-box; }
.st small { font: 500 .82em/1 var(--font-mono); color: var(--ink-3); }
.st--there::before { background: var(--c); }
.st--engine { --c: var(--engine); } .st--host { --c: var(--host); }
.st--missing { color: var(--ink-3); font-weight: 500; }
.st--missing::before { border: 1.5px dashed var(--control); background: transparent; }
.st--na { color: var(--ink-3); font-weight: 500; }
.st--na::before { content: none; }

/* ---------- Time chip: a clock glyph and minutes, in mono (spec 5.7) ---------- */
.time-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px 3px 7px; border-radius: 999px; white-space: nowrap;
  font: 500 .72rem/1.3 var(--font-mono); letter-spacing: .02em; color: var(--ink-3); background: var(--surface-2); border: 1px solid var(--rule);
}
.time-chip svg { width: 13px; height: 13px; flex: none; }

.place {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px 3px 7px; border-radius: 999px;
  font: 600 .74rem/1.3 var(--font-body); letter-spacing: .005em; color: var(--ink); vertical-align: middle;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--host) 55%, transparent);
}
.place__g { width: 16px; height: 16px; flex: none; color: var(--host); }
.place > span { min-width: 0; }
.place--unknown { border-style: dashed; border-color: var(--control); }
.place--unknown .place__g { color: var(--ink-3); }
.place__imit { color: var(--ink-3); font-weight: 500; padding-left: 7px; margin-left: 1px; border-left: 1px dashed var(--rule-strong); }
.places { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.code {
  margin: 18px 0 16px; border-radius: 14px; overflow: hidden; min-width: 0;
  background: var(--code-bg); border: 1px solid var(--code-rule);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 18px 36px -26px rgba(12, 14, 30, .75);
}
.code__bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 44px; padding: 6px 6px 6px 14px;
  border-bottom: 1px solid var(--code-rule); background: rgba(255, 255, 255, .025);
}
.code__file { font: 600 .74rem/1.3 var(--font-mono); letter-spacing: .02em; color: var(--code-dim); margin-right: 4px; }
.code__bar .place { background: transparent; }
.code__bar > .copy { margin-left: auto; }
.code__pre, .shell pre.code__pre {
  margin: 0; padding: 14px 16px 16px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  font: 500 .84rem/1.62 var(--font-mono); color: var(--code-ink); white-space: pre; tab-size: 2; background: none; border: 0;
}
.code__pre code { font: inherit; color: inherit; background: none; border: 0; padding: 0; white-space: inherit; }
.code__pre:focus-visible, pre.expect:focus-visible, .out-table__wrap:focus-visible { outline: 2px solid var(--code-focus); outline-offset: -2px; border-radius: 10px; }
.code__pre.is-clipped, .shell__cmd.is-clipped { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0, 0, 0, .15)); mask-image: linear-gradient(90deg, #000 calc(100% - 40px), rgba(0, 0, 0, .15)); }
.cm { color: var(--code-dim); }

mark.hl { color: inherit; background: var(--wire) 0 100% / 100% 2px no-repeat; padding-bottom: 1px; }
:not(pre) > code mark.hl { padding-bottom: 0; }
.code--small { margin: 10px 0 14px; border-radius: 12px; }
.code--small .code__pre { padding: 10px 14px 12px; font-size: .8rem; }

.code-pair { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .code-pair { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) { .code__pre { font-size: .76rem; padding: 12px 12px 14px; } }

/* ---------- Copy button (spec 5.6) ---------- */
.copy {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; min-width: 44px; padding: 5px 10px;
  border-radius: 8px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink-2); cursor: pointer;
  font: 600 .72rem/1 var(--font-body); letter-spacing: .02em; flex: none; position: relative;
}
.copy::after { content: ""; position: absolute; inset: -6px -2px; }   
.copy:hover { border-color: var(--accent); color: var(--ink); }
.copy svg { width: 13px; height: 13px; }
.copy.is-done { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.copy__done { display: none; }
.copy.is-done .copy__label { display: none; }
.copy.is-done .copy__done { display: inline; }
/* A long confirmation (the async lab's) wraps inside the code bar instead of running past it. */
.code__bar > .copy.is-done { flex-shrink: 1; min-width: 0; max-width: 100%; text-align: left; line-height: 1.35; padding-block: 10px; }

/* ---------- Open in a playground (spec 5.3): neutral buttons, 44 px, one per line on a phone ---------- */
.pg-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.pg-open {
  display: inline-flex; align-items: center; gap: 9px; min-height: 44px; padding: 9px 16px 9px 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--control); color: var(--ink); text-decoration: none;
  font: 600 .92rem/1.25 var(--font-body); box-shadow: var(--shadow-sm);
  transition: border-color .18s ease, transform .18s var(--ease-out);
}
.pg-open:hover { border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.pg-open[hidden] { display: none; }
.pg-open__g { width: 20px; height: 20px; flex: none; color: var(--host); }
.pg-open__arrow { color: var(--ink-3); font-weight: 500; }
.pg-note { margin: 2px 0 14px !important; font-size: .84rem !important; color: var(--ink-3); }
.pg-open--imit { border-style: dashed; }
.pg-open__imit { font-weight: 500; color: var(--ink-3); font-size: .84rem; }
@media (max-width: 520px) { .pg-row { flex-direction: column; align-items: stretch; } .pg-open { width: 100%; } }

/* ---------- On your machine (spec 5.4): a paper panel; the terminal inside is night; PowerShell | bash ---------- */
.shell { margin: 20px 0 18px; padding: 14px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.shell__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin: 0 0 10px; }
.shell__save { margin: 2px 2px 8px !important; font-size: .9rem !important; color: var(--ink-2); }
.shell .code { margin: 0 0 12px; }
.shell__term { border-radius: 14px; overflow: hidden; background: var(--code-bg); border: 1px solid var(--code-rule); }
.shell__tabs { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--code-rule); background: rgba(255, 255, 255, .025); }
.shell__tab {
  min-height: 40px; padding: 8px 14px; border: 0; border-radius: 9px 9px 0 0; background: transparent; cursor: pointer;
  font: 600 .78rem/1.2 var(--font-body); color: var(--code-dim); position: relative;
}
.shell__tab:hover { color: var(--code-ink); }
.shell__tab[aria-selected="true"] { color: var(--code-ink); background: rgba(255, 255, 255, .06); }
.shell__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; border-radius: 2px; background: var(--code-ink); }
.shell__tab:focus-visible { outline: 2px solid var(--code-focus); outline-offset: -2px; }
.shell:not(.js-ready) .shell__tabs { display: none; }
.shell__body { padding: 12px 12px 4px; }
.shell__line { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 10px; }
.shell__cmd {
  flex: 1; min-width: 0; margin: 0; padding: 8px 12px; overflow-x: auto; border-radius: 9px; white-space: pre;
  font: 600 .84rem/1.55 var(--font-mono); color: var(--code-ink); background: rgba(255, 255, 255, .04); border: 1px solid var(--code-rule);
}
.shell__cmd code { font: inherit; background: none; border: 0; padding: 0; color: inherit; white-space: inherit; }
.shell__p { color: #5fd3a0; user-select: none; -webkit-user-select: none; margin-right: .6em; }
.shell__line > .copy { margin-top: 4px; color: var(--code-dim); border-color: var(--code-rule); }
.shell__line > .copy:hover { color: var(--code-ink); border-color: var(--code-focus); }
.shell__alt { margin: 0 0 10px !important; padding: 0 2px; font-size: .86rem !important; line-height: 1.5; color: var(--code-dim); }
.shell__alt code { color: var(--code-ink); background: rgba(255, 255, 255, .06) !important; border-color: var(--code-rule) !important; }
.shell__name { display: block; margin: 4px 2px 6px; font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--code-dim); }
.shell.js-ready .shell__name { display: none; }

:root[data-jsc-shell="ps"] .shell.js-ready [data-sh="sh"],
:root[data-jsc-shell="sh"] .shell.js-ready [data-sh="ps"] { display: none !important; }
.shell pre.expect { margin: 4px 0 12px; }
.shell__ver { margin: 0 2px 4px !important; font: 500 .72rem/1.45 var(--font-mono) !important; color: var(--ink-3); }

/* ---------- Predict, then Check (spec 5.5) ---------- */
.predict {
  position: relative; margin: 20px 0 14px; padding: 14px 16px 14px 18px; border-radius: var(--r);
  background: var(--surface-2); border: 1px solid var(--rule);
}
.predict::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ink); }
.predict__k { display: block; margin: 0 0 4px; font: 600 .68rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.predict__q { margin: 0 !important; font-weight: 600; color: var(--ink); line-height: 1.55; }
.predict + .pg-row { margin-top: 10px; }

details.check { margin: 14px 0 20px; }
details.check > summary {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 8px 16px 8px 12px; cursor: pointer;
  list-style: none; border-radius: 12px; border: 1px solid var(--control); background: var(--surface); color: var(--ink);
  font: 700 .95rem/1.2 var(--font-body); -webkit-tap-highlight-color: transparent; transition: border-color .18s ease;
}
details.check > summary::-webkit-details-marker { display: none; }
details.check > summary::before {
  content: ""; width: 18px; height: 18px; flex: none; border-radius: 50%; border: 1.5px solid var(--ink-2);
  background: linear-gradient(var(--ink-2), var(--ink-2)) 50% 50% / 8px 1.5px no-repeat, linear-gradient(var(--ink-2), var(--ink-2)) 50% 50% / 1.5px 8px no-repeat;
}
details.check[open] > summary::before { background: linear-gradient(var(--ink-2), var(--ink-2)) 50% 50% / 8px 1.5px no-repeat; }
details.check > summary:hover { border-color: var(--accent); }
.check__after { font: 500 .78rem/1.2 var(--font-body); color: var(--ink-3); }
details.check[open] > summary { border-color: var(--rule-strong); background: var(--surface-2); }
.check__body { margin-top: 12px; padding: 4px 0 0 16px; border-left: 2px solid var(--rule-strong); }
.check__body > :first-child { margin-top: 0; }
.check__body > :last-child { margin-bottom: 4px; }
.check__body details.check { margin-top: 10px; }

[data-after][hidden] { display: none !important; }

/* ---------- Out table: the exact outputs, host by host (spec 5.12) ---------- */
.out-table__wrap { margin: 14px 0 16px; overflow-x: auto; border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface); -webkit-overflow-scrolling: touch; }
.out-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: .9rem; }
.out-table th, .out-table td { padding: 10px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.out-table thead th { background: var(--surface-2); border-bottom-color: var(--rule-strong); font-weight: 600; }
.out-table tbody tr:last-child > * { border-bottom: 0; }
.out-table th + th, .out-table td + td { border-left: 1px solid var(--rule); }
.out-table tbody th { font-weight: 600; color: var(--ink); width: 34%; font-size: .9rem; }
.out-table td { font: 500 .82rem/1.65 var(--font-mono); color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.out-table td .ok, .out-line--ok { color: var(--ok); }
.out-table td .no, .out-line--no { color: var(--no); }
.out-table__lab { display: none; }
@media (max-width: 600px) {
  .out-table, .out-table tbody, .out-table tr, .out-table td, .out-table tbody th { display: block; width: auto; }
  .out-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
  .out-table td + td { border-left: 0; }
  .out-table tbody tr { border-bottom: 1px solid var(--rule-strong); }
  .out-table tbody tr:last-child { border-bottom: 0; }
  .out-table td, .out-table tbody th { border-bottom: 1px dashed var(--rule); }
  .out-table tr > :last-child { border-bottom: 0; }
  .out-table__lab { display: flex; margin: 0 0 6px; font-family: var(--font-body); }
}

/* ---------- Data tables of this course: chips inside ---------- */
.data-table td .st, .data-table td .m-chip { margin: 1px 0; }
.data-table code { white-space: nowrap; }
.table-wrap--fit .data-table { min-width: 0; }
.data-table td.mono { font: 500 .84rem/1.6 var(--font-mono); color: var(--ink); }

/* ---------- If you see… (Step 3): each error line, then its cause ---------- */
.if-see { margin: 18px 0; padding: 16px 18px 6px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--rule); }
.if-see__k { margin: 0 0 10px !important; font: 600 .68rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.if-see ul { list-style: none; padding: 0 !important; margin: 0 !important; }
.if-see li { margin: 0 0 14px !important; font-size: .95rem !important; line-height: 1.55; color: var(--ink-2); }
.if-see__where { display: block; margin-bottom: 4px; font-weight: 600; font-size: .86rem; color: var(--ink); }
.err {
  display: block; width: fit-content; max-width: 100%; margin: 0 0 6px; padding: 6px 10px; border-radius: 8px; overflow-wrap: anywhere;
  font: 600 .8rem/1.5 var(--font-mono); color: var(--no); background: var(--no-soft); border: 1px solid color-mix(in srgb, var(--no) 30%, transparent);
}

/* ---------- Hints, one at a time (spec 5.9) ---------- */
.hints-box { margin: 18px 0 8px; }
.hints-box__k { margin: 0 0 8px !important; font: 600 .68rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
ol.hints { list-style: none; padding: 0 !important; margin: 0 0 10px !important; counter-reset: h; }
ol.hints > li { counter-increment: h; position: relative; margin: 0 0 8px !important; padding: 10px 14px 10px 44px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--rule); font-size: .95rem !important; }
ol.hints > li::before { content: counter(h); position: absolute; left: 12px; top: 10px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 .72rem/1 var(--font-mono); color: var(--ink-2); border: 1px solid var(--rule-strong); background: var(--surface); }
ol.hints > li[hidden] { display: none; }
.hints__more {
  min-height: 44px; padding: 9px 16px; border-radius: 12px; border: 1px solid var(--control); background: var(--surface); color: var(--ink);
  font: 600 .9rem/1.2 var(--font-body); cursor: pointer;
}
.hints__more:hover { border-color: var(--accent); }
.hints__more[hidden] { display: none; }

/* ---------- Prompt (spec 5.11): paper, mono, a label and a copy button ---------- */
.prompt { margin: 12px 0 14px; border-radius: 12px; border: 1px solid var(--rule-strong); background: var(--surface); overflow: hidden; }
.prompt__bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 4px 6px 4px 12px; border-bottom: 1px dashed var(--rule); background: var(--surface-2); }
.prompt__k { font: 600 .66rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.prompt pre { margin: 0; padding: 10px 14px 12px; white-space: pre-wrap; overflow-wrap: anywhere; font: 500 .86rem/1.55 var(--font-mono); color: var(--ink); background: none; }
.prompt-pair { display: grid; gap: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 12px 0 16px; }
.prompt-pair .prompt { margin: 0; }
@media (max-width: 640px) { .prompt-pair { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The course rule as a strip (spec 6.3, 6.5): Playfair italic, the ring mark ---------- */
.rule-strip {
  position: relative; margin: 26px 0 18px; padding: 18px 20px 18px 56px; border-radius: var(--r-lg);
  background: radial-gradient(80% 140% at 0% 0%, color-mix(in srgb, var(--engine) 7%, transparent), transparent 60%), var(--surface);
  border: 1px solid var(--rule); box-shadow: var(--shadow-sm);
}
.rule-strip::before { content: ""; position: absolute; left: 20px; top: 21px; width: 22px; height: 22px; background: var(--ring); }
.rule-strip__k { display: block; margin: 0 0 6px; font: 600 .66rem/1.3 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.rule-strip__t { margin: 0 !important; font: italic 500 clamp(1.08rem, 1rem + .4vw, 1.24rem)/1.5 var(--font-display); color: var(--ink); text-wrap: pretty; }
.rule-strip__then { margin: 10px 0 0 !important; font-size: .98rem !important; color: var(--ink-2); }

/* ---------- Two hosts, two cards (3.3) and the three places (5.0) ---------- */
.host-pair { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 18px 0 16px; }
.host-card { margin: 0; padding: 16px 16px 14px; border-radius: var(--r); background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--host) 45%, var(--rule)); }
.host-card__h { display: flex; align-items: center; gap: 9px; margin: 0 0 8px !important; font-weight: 700; font-size: 1.02rem; color: var(--ink); }
.host-card__h svg { width: 22px; height: 22px; color: var(--host); flex: none; }
.host-card p:not(.host-card__h) { margin: 0 !important; font-size: .95rem !important; line-height: 1.55; color: var(--ink-2); }
@media (max-width: 600px) { .host-pair { grid-template-columns: minmax(0, 1fr); } }

.place-cards { display: grid; gap: 14px; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: 18px 20px; }
.place-card { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 18px; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
.place-card .place { align-self: flex-start; }
.place-card__what { margin: 0 !important; font-size: .95rem !important; line-height: 1.55; color: var(--ink); }
.place-card__k { margin: 6px 0 0 !important; font: 600 .64rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }
.place-card ul { margin: 0 !important; padding-left: 1.1em !important; }
.place-card li { margin: .3em 0 !important; font-size: .9rem !important; line-height: 1.5; color: var(--ink-2); }
@media (max-width: 960px) { .place-cards { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Real captures of the playgrounds (spec 6.8): night frame, place tag, full size on click ---------- */
.shots { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 18px; }
.shot { margin: 0; padding: 10px; border-radius: 16px; background: var(--code-bg); border: 1px solid var(--code-rule); min-width: 0; }
.shot .place { margin: 0 0 8px; background: transparent; }
.shot a { display: block; border-radius: 8px; overflow: hidden; }
.shot img { width: 100%; height: auto; aspect-ratio: var(--ar, 4 / 3); object-fit: cover; object-position: left top; background: #0b0d15; }
.shot figcaption { margin-top: 8px; font-size: .8rem; line-height: 1.45; color: var(--code-dim); }
@media (max-width: 640px) { .shots { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The core path (spec 5.8, 6.6): the strip, then four steps ---------- */
.core-strip { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px 18px; margin: 18px 0 22px; }
.core-strip__bar { display: flex; gap: 4px; min-width: 0; }
.core-strip__seg {
  display: flex; flex-direction: column; gap: 6px; min-width: 86px; text-decoration: none; color: var(--ink-2);
  font: 600 .74rem/1.2 var(--font-body);
}
.core-strip__seg[data-step="1"] { flex: 3; } .core-strip__seg[data-step="2"] { flex: 4; }
.core-strip__seg[data-step="3"] { flex: 7; } .core-strip__seg[data-step="4"] { flex: 1.6; }
.core-strip__fill { display: block; height: 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--rule-strong); transition: background-color .3s ease; }
.core-strip__seg.is-done .core-strip__fill { background: var(--ok); border-color: var(--ok); }
.core-strip__seg:hover { color: var(--ink); }
.core-strip__lab { display: flex; gap: 6px; align-items: baseline; white-space: nowrap; }
.core-strip__lab b { font-family: var(--font-mono); font-weight: 600; color: var(--ink-3); }
.core-strip__meta { display: grid; justify-items: end; gap: 2px; font: 500 .74rem/1.35 var(--font-mono); color: var(--ink-3); white-space: nowrap; }
.core-strip__meta b { color: var(--ink); font-weight: 600; }
@media (max-width: 600px) {
  .core-strip { grid-template-columns: minmax(0, 1fr); }
  .core-strip__meta { justify-items: start; grid-auto-flow: column; gap: 12px; }
  .core-strip__lab { white-space: normal; flex-direction: column; gap: 0; font-size: .7rem; }
}
ol.core-path > li { padding-left: 52px; margin-bottom: 34px !important; }
ol.core-path > li::before { width: 36px; height: 36px; font-size: .9rem; top: -4px; color: var(--ink); border-color: var(--ink-3); }
ol.core-path > li:not(:last-child)::after { left: 18px; top: 34px; }
.core-step__h { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 10px !important; }
.core-step__h h3 { margin: 0 !important; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem) !important; }
.core-step label.check--done { margin-top: 6px; }
@media (max-width: 480px) { ol.core-path > li { padding-left: 40px; } ol.core-path > li::before { width: 30px; height: 30px; } ol.core-path > li:not(:last-child)::after { left: 15px; } }

/* ---------- More practice: eight closed cards ---------- */
ol.practice-list > li { padding-left: 0; margin-bottom: 12px !important; }
ol.practice-list > li::before, ol.practice-list > li::after { content: none !important; }
details.practice { border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow-sm); }
details.practice > summary {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 22px; align-items: center; column-gap: 14px; row-gap: 6px;
  min-height: 56px; padding: 12px 16px 12px 14px; cursor: pointer; list-style: none; border-radius: inherit; -webkit-tap-highlight-color: transparent;
}
details.practice > summary::-webkit-details-marker { display: none; }
.practice__n { grid-row: span 2; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font: 600 .82rem/1 var(--font-mono); color: var(--ink); border: 1px solid var(--rule-strong); background: var(--surface-2); }
.practice__t { font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--ink); }
details.practice > summary .places { grid-column: 2; }
details.practice > summary::after {
  content: ""; grid-column: 3; grid-row: 1 / span 2; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--rule-strong);
  background: linear-gradient(var(--ink-3), var(--ink-3)) 50% 50% / 9px 1.5px no-repeat, linear-gradient(var(--ink-3), var(--ink-3)) 50% 50% / 1.5px 9px no-repeat;
}
details.practice[open] > summary::after { background: linear-gradient(var(--ink-3), var(--ink-3)) 50% 50% / 9px 1.5px no-repeat; }
details.practice > summary:hover::after { border-color: var(--accent); }
details.practice[open] > summary { border-bottom: 1px dashed var(--rule-strong); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.practice__body { padding: 4px 18px 16px; }
.practice__body > :first-child { margin-top: 14px; }
@media (max-width: 480px) { details.practice > summary { grid-template-columns: 30px minmax(0, 1fr) 22px; column-gap: 10px; } .practice__n { width: 30px; height: 30px; } .practice__body { padding: 2px 12px 14px; } }

/* ---------- Answer it like an engineer (spec 5.10) ---------- */
.iv-frame { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px !important; padding: 0 !important; list-style: none; counter-reset: ivf; }
.iv-frame > li { counter-increment: ivf; display: inline-flex; align-items: center; gap: 8px; margin: 0 !important; padding: 6px 12px 6px 6px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--rule); font-weight: 600; font-size: .9rem !important; color: var(--ink); }
.iv-frame > li::before, .iv__parts dt::before { content: counter(ivf); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font: 600 .72rem/1 var(--font-mono); color: var(--bg); background: var(--ink); flex: none; }
ol.interview-list > li { padding-left: 0; margin-bottom: 26px !important; }
ol.interview-list > li::before, ol.interview-list > li::after { content: none !important; }
.iv { padding: 18px 18px 16px !important; border-radius: var(--r-lg); background: var(--surface-2); border: 1px solid var(--rule); }
.iv__q { margin: 0 0 4px !important; font: italic 500 clamp(1.18rem, 1.05rem + .5vw, 1.4rem)/1.38 var(--font-display); color: var(--ink); text-wrap: balance; }
.iv__tr { margin: 0 0 6px !important; font-size: .95rem !important; color: var(--ink-2); }
:root:not(:lang(fr)) .iv__tr { display: none; }
.iv__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 12px 0 10px; }
.iv__timer {
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 16px 6px 8px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--control); background: var(--surface); color: var(--ink); font: 600 .9rem/1.2 var(--font-body);
}
.iv__timer:hover { border-color: var(--accent); }
.iv__timer[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.iv__ring { --p: 1; width: 30px; height: 30px; flex: none; border-radius: 50%; background: conic-gradient(currentColor calc(var(--p) * 360deg), color-mix(in srgb, currentColor 18%, transparent) 0); -webkit-mask: radial-gradient(circle, transparent 0 9px, #000 9.5px); mask: radial-gradient(circle, transparent 0 9px, #000 9.5px); }
.iv__left { font: 600 .82rem/1 var(--font-mono); min-width: 3.2ch; }
.iv__left:empty { display: none; }
.iv__live { font-size: .86rem; color: var(--ink-3); }
details.iv__model { margin: 6px 0 0; border-radius: var(--r); border: 1px solid var(--rule); background: var(--surface); }
details.iv__model > summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 14px; cursor: pointer; list-style: none; font-weight: 600; color: var(--ink); }
details.iv__model > summary::-webkit-details-marker { display: none; }
details.iv__model > summary::before { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--ink-2); border-bottom: 2px solid var(--ink-2); transform: rotate(-45deg); transition: transform .2s ease; flex: none; }
details.iv__model[open] > summary::before { transform: rotate(45deg); }
details.iv__model[open] > summary { border-bottom: 1px dashed var(--rule-strong); }
.iv__parts { margin: 0; padding: 12px 16px 4px; counter-reset: ivf; display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 10px 14px; }
.iv__parts dt { counter-increment: ivf; display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; color: var(--ink); align-self: start; padding-top: 1px; }
.iv__parts dd { margin: 0; max-width: 58ch; font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.iv__follow { margin: 8px 16px 14px !important; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: .94rem !important; color: var(--ink-2); }
.iv__follow b { color: var(--ink); }
@media (max-width: 560px) { .iv__parts { grid-template-columns: minmax(0, 1fr); gap: 4px; } .iv__parts dd { margin-bottom: 10px; } }
.iv-short { margin: 0 0 18px !important; }
.iv-short li { font-family: var(--font-display); font-style: italic; font-size: 1.08rem !important; color: var(--ink); }
.iv-short .iv__tr { font-family: var(--font-body); font-style: normal; display: block; margin-top: 2px !important; }

/* ---------- Review the assistant's code; syntax you need; recap tables ---------- */
.review .data-table td .pg-row { margin: 10px 0 4px; flex-direction: column; align-items: stretch; }
.review .data-table td .pg-open { font-size: .86rem; }
dl.syntax-list { display: grid; gap: 14px 28px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 16px 0 4px; }
dl.syntax-list > div { padding: 14px 16px; border-radius: var(--r); background: var(--surface-2); border: 1px solid var(--rule); min-width: 0; }
dl.syntax-list dt { margin: 0 0 6px; }
dl.syntax-list dt code { font-size: .86rem; white-space: normal; overflow-wrap: anywhere; }
dl.syntax-list dd { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--ink-2); }
dl.syntax-list dd code { white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 760px) { dl.syntax-list { grid-template-columns: minmax(0, 1fr); } }
.recap li.recap__wide { grid-column: 1 / -1; }
.recap-table { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: .9rem; }
.recap-table th, .recap-table td { padding: 7px 8px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); }
.recap-table thead th { font: 600 .7rem/1.3 var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.recap-table tbody th { font-weight: 600; color: var(--ink); }
.recap-table tbody tr:last-child > * { border-bottom: 0; }
.recap-table code { font-size: .82em; }

/* ---------- 900-wide cards in the reading column (setup, the guide, the core path, practice, interview, review, syntax) ---------- */
@media (min-width: 960px) { .prose > .card--wide { --kw: var(--w-card, min(900px, 100vw - 2 * var(--gutter))); width: var(--kw); margin-left: calc(50% - var(--kw) / 2); } }
.card .code, .card .shell { margin-inline: 0; }
.card--guide .card__kicker + h2 { margin-bottom: .4em; }
.lead-k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 12px !important; font: 600 .68rem/1.3 var(--font-mono) !important; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Live region for copies and other short announcements ---------- */
.jsc-live { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Presentation mode: Checks stay closed until the teacher opens them ---------- */
[data-teaching="true"] .copy, [data-teaching="true"] .core-strip__meta b + span { display: none; }

/* ---------- Print: the Checks and folds open, the night panels turn to paper ---------- */
@media print {
  .code, .shell__term, .shot { background: #f4f2ed !important; border-color: #ccc !important; box-shadow: none !important; }
  .code__pre, .shell__cmd, .code__file, .shell__p { color: #16161f !important; }
  .cm { color: #5c5c6a !important; }
  .copy, .shell__tabs, .hints__more, .iv__row, .pg-open__arrow { display: none !important; }
  .shell [data-sh] { display: revert !important; }
  .shell__name { display: block !important; color: #5c5c6a; }
  ol.hints > li[hidden] { display: block !important; }
  .pg-open { box-shadow: none; }
  .place, .st::before, .m-chip, .core-strip__fill { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  details.practice, .iv, .place-card, .host-card { break-inside: avoid; }
}

code, kbd, pre, .code__pre, .code__pre *, .shell__cmd, .shell__cmd *, .prompt pre, .out-table td, pre.expect, .err, .data-table td.mono, .time-chip, .wire__pkt {
  font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0;
}

.quiz__opt > span { min-width: 0; }
.quiz__opt code { background: none; border: 0; padding: 0; font-size: .92em; white-space: normal; }

.recap--c01 li:last-child:nth-child(odd) { grid-column: auto; }

.iv__ring { -webkit-mask: radial-gradient(circle, transparent 0 11px, #000 11.5px); mask: radial-gradient(circle, transparent 0 11px, #000 11.5px); }

/* ---------- Phones (390): the cards give the steps their full width ---------- */
@media (max-width: 480px) {
  .card { padding: 20px 14px 22px; }
  .card .steps:not(.practice-list):not(.interview-list) > li { padding-left: 0; }
  .card .steps:not(.practice-list):not(.interview-list) > li::before { position: relative; left: auto; top: auto; display: grid; margin: 0 0 10px; box-shadow: none; }
  .card .steps:not(.practice-list):not(.interview-list) > li:not(:last-child)::after { display: none; }
  .card .steps:not(.practice-list):not(.interview-list) > li + li { padding-top: 22px; border-top: 1px dashed var(--rule-strong); }
  ol.core-path > li::before { position: absolute !important; top: 18px !important; }
  ol.core-path > li:first-child::before { top: -4px !important; }
  ol.core-path .core-step__h { padding-left: 42px; min-height: 34px; }
  .shell { padding: 10px; margin-inline: -4px; }
  .answer { font-size: 1.04rem !important; line-height: 1.58; padding: 18px 18px 20px; }
  .pg-open--imit { flex-wrap: wrap; row-gap: 2px; }
  .pg-open--imit .pg-open__imit { order: 3; flex-basis: 100%; padding-left: 29px; }
}
@media (max-width: 600px) {
  .core-strip__seg { min-width: 0; }
  .core-strip__seg[data-step="4"] { flex: 2.4; }
  .core-strip__lab { white-space: normal; }
}

/* ======================================================================================================================
   Fix round (2026-10-24): the design, QA and fidelity reviews of the first build
   ====================================================================================================================== */

/* A card clips without being a scroll container: scrollIntoView (anchors, Tab into a table) can no longer shift it */
.card { overflow: clip; }
/* Breakouts nested in indented Checks: cancel the indent (half of 16 px padding + 2 px border per level), so a figure
   centres on the column. Under 760 px they simply fill the Check. */
.check__body { --nest: 9px; }
.check__body .check__body { --nest: 18px; }
.check__body .breakout { margin-left: calc(50% - var(--bw) / 2 - var(--nest, 0px)); }
@media (max-width: 760px) { .check .breakout, .core-step .breakout, .practice .breakout { --bw: 100%; width: 100%; margin-left: 0; } }
/* Inside a card (the 900 frame) a breakout fills the card instead of breaking out of it, in presentation mode too */
.card .breakout, .card .breakout.breakout--mid,
:root.is-presenting .card .breakout, :root.is-presenting .card .breakout.breakout--mid,
:root.is-presenting .lab .breakout { --bw: 100%; width: 100%; margin-left: 0; }

/* Focus on a command or a code panel that scrolls sideways: the ring sits inside, and the fade mask stops masking it */
.shell__cmd:focus-visible { outline: 2px solid var(--code-focus); outline-offset: -2px; }
.shell__cmd.is-clipped:focus-visible, .code__pre.is-clipped:focus-visible, pre.expect.is-clipped:focus-visible { -webkit-mask-image: none; mask-image: none; }

/* Touch targets, 44 px (spec 7). Copy keeps its 32 px pill, drawn inside a 44 px button, so the bars keep their height. */
.copy { min-height: 44px; min-width: 44px; border: 0; background: transparent; isolation: isolate; }
.copy::before { content: ""; position: absolute; z-index: -1; inset: 6px 0; border-radius: 8px; border: 1px solid var(--rule-strong); transition: border-color .18s ease; }
.copy::after { display: none; }
.copy:hover::before { border-color: var(--accent); }
.copy.is-done::before { border-color: color-mix(in srgb, var(--ok) 55%, transparent); }
.copy:focus-visible { outline-offset: -4px; border-radius: 10px; }
.code__bar > .copy, .prompt__bar > .copy { margin-block: -6px; }
.shell__line > .copy { margin-top: -2px; }
.shell__line > .copy::before { border-color: var(--code-rule); }
.shell__line > .copy:hover::before { border-color: var(--code-focus); }
.shell__tab { min-height: 44px; }

/* The core strip on a phone: the proportional bar stays; its labels sit under it as a 2 x 2 grid, one line each */
@media (max-width: 600px) {
  .core-strip__bar { position: relative; padding-bottom: 48px; }
  .core-strip__seg { min-width: 0; gap: 0; }
  .core-strip__seg[data-step="4"] { flex: 1.6; }
  .core-strip__lab { position: absolute; left: 0; top: 18px; width: 50%; flex-direction: row; gap: 5px; white-space: nowrap; font-size: .74rem; line-height: 1.2; }
  .core-strip__seg:is([data-step="2"], [data-step="4"]) .core-strip__lab { left: 50%; }
  .core-strip__seg:is([data-step="3"], [data-step="4"]) .core-strip__lab { top: 40px; }
  .core-strip__seg:focus-visible { outline: none; }
  .core-strip__seg:focus-visible .core-strip__fill, .core-strip__seg:focus-visible .core-strip__lab { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
  .core-strip__meta { display: flex; flex-wrap: wrap; gap: 2px 12px; white-space: normal; }
  .core-strip__meta > * { white-space: nowrap; }
}

/* Real captures: cropped to what the text claims, shown near 1:1, one per row */
.shots { grid-template-columns: minmax(0, 1fr); }
.shot { max-width: calc(var(--sw, 420px) + 22px); }

/* Folds that keep the core path short (Step 2's exact outputs, Step 3's "If you see…"); open in print */
.deeper--fold > summary { color: var(--ink); }
.deeper--fold > .if-see { margin-block: 14px 16px; }
.deeper--fold > .shots { margin-bottom: 18px; }

/* Small things */
code.code-wrap { white-space: normal; overflow-wrap: anywhere; }
.lead-k::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--ring); }
.out-table__lab .places { flex-wrap: wrap; }
.iv__timer[aria-pressed="true"] [data-i18n="iv-timer"] { display: none; }
/* Under 760 px a figure in a Check takes back the Check's indent: the figure gets the column's full width */
@media (max-width: 760px) {
  .check__body .breakout, .card .check__body .breakout, .card .check__body .breakout.breakout--mid {
    width: calc(100% + 2 * var(--nest, 0px)); margin-left: calc(-2 * var(--nest, 0px));
  }
}
@media (max-width: 480px) {
  .deeper--fold > :not(summary) { margin-inline: 10px; }
  .shot { padding: 6px; }
}
/* Code bars on a phone: Copy stays on the file-name row, the place tags go on the row under it */
@media (max-width: 560px) {
  .code__bar > .copy { order: 1; }
  .code__bar:has(.place)::after { content: ""; order: 2; flex-basis: 100%; height: 0; }
  .code__bar > :is(.places, .place) { order: 3; }
}
.place-card__t { margin: 0 !important; font: 600 1.18rem/1.25 var(--font-display) !important; color: var(--ink); }

/* ======================================================================================================================
   Large screens (2026-10-25, docs/js-series/layout-audit.md, "Prototype"). With the menu open, nothing changes up to
   1440 px: the tokens below give the old 900 / 1040 px. With the menu closed (or no menu), the room is the whole screen,
   so the wider frame starts at 1200 px. Past that the page grows with the screen: figures take most of the extra room
   right of the menu (not a fixed 900 px), the hero shares their edge from 1920 px, and from 1600 px the type grows (the
   root size, so the reading column, in rem, keeps its ~75 characters a line; the caps are in rem too, so they grow with
   it). Presentation mode keeps its own 1280 px slide (every rule here stops at :root.is-presenting).
   ====================================================================================================================== */
body {
  --area: calc(100vw - var(--cn-pad, 0px));                         /* the room right of the menu (all of it without) */
  --w-fig: min(900px, 100vw - 2 * var(--gutter));                   /* figures: the old values under 1200 */
  --w-full: min(1040px, 100vw - 2 * var(--gutter));                 /* .breakout, the widest */
  --w-card: min(900px, var(--w-fig));                               /* wide cards: 900 until they split in two (1600) */
}
@media screen and (min-width: 1200px) {
  /* 900 / 1040 px while the room right of the menu is 1152 px or less (1440 px with the menu), then most of each extra
     pixel goes to them: figures 1033 at 1600, 1312 at 1920 (menu open), 97.5rem at most (1560 px at 16 px, 1804 at
     2560); the hero keeps its old width (the whole room, 1312 at most) until the figures reach it, then shares their edge. */
  body {
    --w-fig: min(clamp(900px, 900px + (var(--area) - 1152px) * .926, 97.5rem), var(--area) - 2 * var(--gutter));
    --w-full: min(clamp(1040px, 1040px + (var(--area) - 1152px) * .9, 110rem), var(--area) - 2 * var(--gutter));
    --w-hero: min(var(--area) - 2 * var(--gutter), max(var(--w-fig), 1312px));
  }
  /* Figures with little inside (two environments, the engines map) stop at 68rem: wider would only be emptier. */
  :root:not(.is-presenting) .breakout--mid:is([data-fx="same-core"], [data-fx="engines-map"]) { --fig-w: min(var(--w-fig), 68rem); }
}
/* The type: 16 px at 1600, 16.8 at 1920, 18.5 at 2560 (19 at most, from 2752); the body text follows (17.2, 18.1, 19.9 px). */
@media screen and (min-width: 1600px) {
  :root:not(.is-presenting) { font-size: clamp(100%, 100% + (100vw - 1600px) / 384, 100% + 3px); }
  :root:not(.is-presenting) .lede { text-wrap: balance; }
}
/* A capsule: the hero and its wire keep their old width until the figures reach it (1920 px), then share their edge. */
@media screen and (min-width: 1200px) {
  :root:not(.is-presenting) .module-main[data-capsule] > .wrap > :is(.hero, .wire) { max-width: var(--w-hero); margin-inline: auto; }
  /* menu closed: the page frame follows the hero instead of stopping at 1240 px */
  :root[data-nav="collapsed"]:not(.is-presenting) body:has(> main.module-main[data-capsule]) > :is(.site-head, .module-main, .site-foot) > .wrap { max-width: calc(var(--w-hero) + 2 * var(--gutter)); }
}
/* From 1600 px, the cards that are lists go wide and side by side; the paragraphs keep the reading column. */
@media screen and (min-width: 1600px) {
  /* The interview card takes the figures' frame only now, when it splits in two (900 px before, whatever the room) */
  :root:not(.is-presenting) body { --w-card: var(--w-fig); }
  /* Answer it like an engineer: the frame on the left, the questions on the right */
  :root:not(.is-presenting) .prose > .card--wide:has(> .interview-list) {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr); grid-template-rows: repeat(5, auto) 1fr;
    column-gap: clamp(36px, 3vw, 64px); align-items: start;
  }
  :root:not(.is-presenting) .prose > .card--wide:has(> .interview-list) > :not(.interview-list) { grid-column: 1; }
  :root:not(.is-presenting) .prose > .card--wide:has(> .interview-list) > .interview-list { grid-column: 2; grid-row: 1 / -1; margin: 0 !important; }
  :root:not(.is-presenting) .prose > .card--wide:has(> .interview-list) > .interview-list > li:last-child { margin-bottom: 0 !important; }
  /* Quick check: the figures' frame, the four options two by two; the question and the why keep a reading width */
  :root:not(.is-presenting) .prose > #quiz { width: var(--w-fig); margin-left: calc(50% - var(--w-fig) / 2); }
  :root:not(.is-presenting) .prose > #quiz .quiz__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root:not(.is-presenting) .prose > #quiz :is(.quiz__q, .quiz__why) { max-width: 40rem; }
  /* Try it, once its cards sit side by side (capsule.css): a card can pass 800 px, its paragraphs keep a reading width */
  :root:not(.is-presenting) .prose > #try > .try-card :is(.try-card > p, .check__body > p) { max-width: 60ch; }
  /* Recap: three cards a row in the figures' frame, a short last row centred (3 + 2, 3 + 1); the heading's rule runs to
     the frame's right edge (100% = the reading column) */
  :root:not(.is-presenting) .prose > #recap > h2 { margin-right: calc((100% - var(--w-fig)) / 2); }
  :root:not(.is-presenting) .prose > #recap > .recap { width: var(--w-fig); margin-left: calc(50% - var(--w-fig) / 2) !important; grid-template-columns: repeat(6, minmax(0, 1fr)); }
  :root:not(.is-presenting) .prose > #recap > .recap > li { grid-column: span 2; }
  :root:not(.is-presenting) .prose > #recap > .recap > li:last-child:nth-child(3n + 1) { grid-column: 3 / span 2; }
  :root:not(.is-presenting) .prose > #recap > .recap > li:nth-last-child(2):nth-child(3n + 1) { grid-column: 2 / span 2; }
}