/* Index Ai Academy — visual language shared with the Ai_Engineering app (AETheme.swift):
   dark-first navy canvas with an engineering grid and aurora glow, glass surfaces,
   rounded system type, mono eyebrows, and five accents: signal, azure, violet, coral, amber. */

:root {
  /* Accents (AEColor) */
  --signal: #61fac4;
  --azure: #4fc2ff;
  --violet: #9c7aff;
  --coral: #ff736b;
  --amber: #ffb84a;
  /* Readable accent text (bright in dark mode) */
  --t-signal: #61fac4;
  --t-azure: #4fc2ff;
  --t-violet: #9c7aff;
  --t-coral: #ff736b;
  --t-amber: #ffb84a;

  /* Neutrals (dark) */
  --canvas: #05060d;
  --canvas-raised: #090c16;
  --surface: #0e121d;
  --surface-elevated: #131826;
  --glass: rgba(19, 24, 38, 0.62);
  --glass-strong: rgba(19, 24, 38, 0.86);
  --text-1: #f2f7ff;
  --text-2: #a2afc7;
  --text-3: #728098;
  --text-4: #48536a;
  --stroke: rgba(255, 255, 255, 0.105);
  --stroke-strong: rgba(255, 255, 255, 0.19);
  --stroke-hi: rgba(255, 255, 255, 0.18);
  --divider: rgba(255, 255, 255, 0.075);
  --subtle-fill: rgba(255, 255, 255, 0.055);
  --input-fill: rgba(0, 0, 0, 0.22);
  --rail-fill: rgba(0, 0, 0, 0.10);
  --shadow: rgba(0, 0, 0, 0.52);
  --grid-line: rgba(255, 255, 255, 0.035);
  --grid-major: rgba(255, 255, 255, 0.065);
  --on-signal: #03140e;
  --code-bg: rgba(0, 0, 0, 0.30);
  --code-ink: #dfe7f5;
  --hl-keyword: #b59cff;
  --hl-string: #7ee8b8;
  --hl-number: #ffb84a;
  --hl-comment: #7d8aa3;
  --hl-builtin: #4fc2ff;
  --hl-def: #ff9b8f;
  --marker: rgba(255, 184, 74, 0.16);
  --marker-strong: #ffb84a;

  --grad-signal: linear-gradient(135deg, #61fac4, #4fc2ff);
  --grad-spectral: linear-gradient(90deg, #61fac4, #4fc2ff, #9c7aff);
  --grad-active: linear-gradient(90deg, #f0742c, #f5933f);

  --font-ui: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --sidebar-w: 248px;
  --topbar-h: 0px;

  /* Aliases kept for inline styles in scripts */
  --ink: var(--text-1);
  --ink-2: var(--text-2);
  --ink-3: var(--text-3);
  --ink-4: var(--text-4);
  --paper-sunk: var(--subtle-fill);
  --rule-strong: var(--stroke-strong);
  --font-read: var(--font-ui);
  --signal-soft: rgba(97, 250, 196, 0.10);
  --signal-line: rgba(97, 250, 196, 0.38);
  --redpen: var(--t-coral);
  --redpen-soft: rgba(255, 115, 107, 0.10);
  color-scheme: dark;
}

:root[data-theme="light"] {
  --t-signal: #006e4f;
  --t-azure: #0063ab;
  --t-violet: #573bb8;
  --t-coral: #b82626;
  --t-amber: #8a4f00;
  --canvas: #f4f7fc;
  --canvas-raised: #ffffff;
  --surface: #fbfcff;
  --surface-elevated: #ffffff;
  --glass: rgba(255, 255, 255, 0.72);
  --glass-strong: rgba(255, 255, 255, 0.92);
  --text-1: #0e121d;
  --text-2: #4f5c74;
  --text-3: #667081;
  --text-4: #a7b0bf;
  --stroke: rgba(20, 31, 54, 0.105);
  --stroke-strong: rgba(20, 31, 54, 0.19);
  --stroke-hi: rgba(75, 0, 130, 0.11);
  --divider: rgba(20, 31, 54, 0.10);
  --subtle-fill: rgba(20, 31, 54, 0.055);
  --input-fill: rgba(255, 255, 255, 0.88);
  --rail-fill: rgba(255, 255, 255, 0.36);
  --shadow: rgba(75, 0, 130, 0.13);
  --grid-line: rgba(75, 0, 130, 0.035);
  --grid-major: rgba(75, 0, 130, 0.06);
  --code-bg: rgba(20, 31, 54, 0.05);
  --code-ink: #1b2233;
  --hl-keyword: #6a3fc4;
  --hl-string: #00744f;
  --hl-number: #9a5a00;
  --hl-comment: #5d6878;
  --hl-builtin: #0063ab;
  --hl-def: #b0352b;
  --marker: rgba(255, 184, 74, 0.24);
  --marker-strong: #b36b00;
  --signal-soft: rgba(0, 150, 105, 0.09);
  --signal-line: rgba(0, 130, 95, 0.35);
  --redpen-soft: rgba(184, 38, 38, 0.07);
  color-scheme: light;
}

/* Phase / category accents: set --acc and --acc-text on any element */
.acc-signal { --acc: var(--signal); --acc-text: var(--t-signal); }
.acc-azure { --acc: var(--azure); --acc-text: var(--t-azure); }
.acc-violet { --acc: var(--violet); --acc-text: var(--t-violet); }
.acc-coral { --acc: var(--coral); --acc-text: var(--t-coral); }
.acc-amber { --acc: var(--amber); --acc-text: var(--t-amber); }

/* ── Base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--canvas);
  color: var(--text-1);
  font: 400 15px/1.5 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Frontier background: aurora glow + engineering grid (AEFrontierBackground) */
body::before, body::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; }
body::before {
  background:
    radial-gradient(60vw 60vw at 92% -12%, rgba(156, 122, 255, 0.16), rgba(156, 122, 255, 0.05) 40%, transparent 70%),
    radial-gradient(52vw 52vw at -8% 108%, rgba(79, 194, 255, 0.13), rgba(79, 194, 255, 0.04) 40%, transparent 70%);
}
body::after {
  background-image:
    linear-gradient(var(--grid-major) 0.75px, transparent 0.75px),
    linear-gradient(90deg, var(--grid-major) 0.75px, transparent 0.75px),
    linear-gradient(var(--grid-line) 0.5px, transparent 0.5px),
    linear-gradient(90deg, var(--grid-line) 0.5px, transparent 0.5px);
  background-size: 128px 128px, 128px 128px, 32px 32px, 32px 32px;
  -webkit-mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.9) 65%, transparent);
  mask-image: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.9) 35%, rgba(0, 0, 0, 0.9) 65%, transparent);
}
:root[data-theme="light"] body::before {
  background:
    radial-gradient(60vw 60vw at 92% -12%, rgba(156, 122, 255, 0.12), transparent 65%),
    radial-gradient(52vw 52vw at -8% 108%, rgba(79, 194, 255, 0.12), transparent 65%);
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; }
button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--t-azure); outline-offset: 2px; border-radius: 6px; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-3); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[hidden] { display: none !important; }

/* Mono uppercase eyebrow, colored by accent */
.eyebrow {
  font: 700 12px/1.3 var(--font-mono);
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--acc-text, var(--t-signal));
  display: inline-flex; align-items: center; gap: 8px;
}
.eyebrow.dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.eyebrow.quiet { color: var(--text-3); }

/* Glass surface (aeGlassSurface) */
.glass {
  background:
    linear-gradient(var(--glass), var(--glass)) padding-box,
    linear-gradient(135deg, var(--stroke-hi), var(--stroke)) border-box;
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
}

/* ── Buttons & chips ──────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--stroke-strong); border-radius: var(--r-pill);
  background: var(--subtle-fill); color: var(--text-1);
  font-weight: 600; font-size: 14.5px; white-space: nowrap; text-decoration: none;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), transform 100ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:hover { background: rgba(255, 255, 255, 0.09); border-color: var(--stroke-hi); }
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn.primary {
  background: var(--grad-signal); border-color: transparent; color: var(--on-signal);
  box-shadow: 0 0 0 1px rgba(97, 250, 196, 0.25), 0 6px 22px rgba(97, 250, 196, 0.18);
}
.btn.primary:hover { filter: brightness(1.06); box-shadow: 0 0 0 1px rgba(97, 250, 196, 0.35), 0 8px 28px rgba(97, 250, 196, 0.26); }
.btn.quiet { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.quiet:hover { background: var(--subtle-fill); color: var(--text-1); }
.btn.small { height: 32px; padding: 0 13px; font-size: 13px; }
.btn.large { height: 48px; padding: 0 24px; font-size: 16px; }
.btn kbd { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }
.linkish { background: none; border: 0; padding: 0; color: var(--t-signal); font-weight: 600; text-decoration: none; }
.linkish:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border-radius: var(--r-pill); background: var(--subtle-fill); border: 1px solid var(--stroke);
  color: var(--text-2); font-size: 13px; font-weight: 600; white-space: nowrap;
}
.badge {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--grad-signal); color: var(--on-signal); font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.icon-btn {
  width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--stroke); background: var(--subtle-fill); border-radius: 50%; color: var(--text-2);
}
.icon-btn:hover { color: var(--text-1); border-color: var(--stroke-strong); }
.icon-btn svg { width: 18px; height: 18px; }

/* ── App shell: sidebar + content ─────────────────────────── */
.app { position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.sidebar {
  position: sticky; top: 0; height: 100vh; z-index: 20;
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px 14px 16px;
  background: color-mix(in srgb, var(--canvas-raised) 82%, transparent);
  border-right: 1px solid var(--divider);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; text-decoration: none; }
.brand .tile {
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
  color: var(--text-1);
}
.brand .tile svg { width: 36px; height: 36px; }
.brand .name { font: 700 14.5px/1.1 var(--font-mono); letter-spacing: 0.06em; color: var(--text-1); }
.brand .tag { font: 600 9.5px/1.4 var(--font-mono); letter-spacing: 0.16em; color: var(--text-3); margin-top: 3px; }
.nav { display: grid; gap: 4px; }
.nav a {
  display: flex; align-items: center; gap: 12px;
  height: 46px; padding: 0 14px; border-radius: 12px;
  text-decoration: none; color: var(--text-1); font-weight: 600; font-size: 16px;
  transition: background-color 140ms var(--ease-out);
}
.nav a svg { width: 20px; height: 20px; flex: none; }
.nav a:hover { background: var(--subtle-fill); }
.nav a[aria-current="page"] { background: var(--grad-active); color: #fff; box-shadow: 0 6px 20px rgba(240, 116, 44, 0.28); }
.nav a .badge { margin-left: auto; }
.nav a[aria-current="page"] .badge { background: rgba(255, 255, 255, 0.92); color: #a2430d; }
.sidebar .spacer { flex: 1; }
.meter { height: 6px; border-radius: 3px; background: var(--subtle-fill); overflow: hidden; }
.meter span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--signal), #4fe0d8); box-shadow: 0 0 10px rgba(97, 250, 196, 0.45); }
.content { min-width: 0; position: relative; }

/* ── Page frame ───────────────────────────────────────────── */
.page { max-width: 1180px; margin: 0 auto; padding: 44px 40px 96px; }
.loading { padding: 80px 24px; text-align: center; color: var(--text-3); }

/* ── Today ────────────────────────────────────────────────── */
.loss-chart { display: block; width: 100%; height: 130px; }
.loss-chart .grid { stroke: var(--grid-major); }
.loss-chart .curve { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(97, 250, 196, 0.45)); }
.loss-chart .dot { fill: var(--signal); filter: drop-shadow(0 0 6px rgba(97, 250, 196, 0.8)); }
.loss-chart text { font: 10px var(--font-mono); fill: var(--text-3); }

.activity { display: grid; grid-template-columns: minmax(0, auto) minmax(220px, 1fr); gap: 28px; align-items: start; }
.activity-grid { display: grid; grid-template-rows: repeat(7, 14px); grid-template-columns: 28px; grid-auto-columns: 14px; gap: 4px; overflow-x: auto; }
.activity-grid .dl { font: 600 9.5px var(--font-mono); color: var(--text-3); line-height: 14px; }
.activity i { display: block; width: 14px; height: 14px; border-radius: 4px; background: var(--subtle-fill); border: 1px solid var(--divider); }
.activity i.future { background: transparent; border-style: dashed; opacity: 0.5; }
.activity i.today { outline: 1.5px solid var(--t-amber); outline-offset: 1px; }
.level { font: 700 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-2); display: inline-flex; align-items: center; gap: 6px; }
.level::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--acc); }
.queue { display: grid; gap: 10px; }

/* ── Map ──────────────────────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-2); padding-bottom: 6px; }
.legend span { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.phase-band { position: absolute; top: 0; bottom: 0; border-right: 1px dashed var(--divider); }
.phase-band header { position: sticky; top: 0; padding: 16px 18px 12px; z-index: 2; background: linear-gradient(180deg, var(--canvas) 70%, transparent); }
.phase-band header .n { font: 700 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--acc-text); }
.phase-band header .t { font-weight: 800; font-size: 17px; letter-spacing: -0.2px; margin-top: 2px; }
.phase-band header .c { font-size: 12.5px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.node {
  position: absolute; width: 168px; min-height: 44px;
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; border-radius: 12px;
  border: 1px solid var(--stroke-strong); background: var(--glass-strong);
  font-size: 12.5px; font-weight: 600; line-height: 1.3; text-align: left; color: var(--text-2);
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out), box-shadow 140ms var(--ease-out);
}
.node:hover { border-color: var(--text-3); color: var(--text-1); }
.node .dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--text-4); }
.node.locked { color: var(--text-3); border-style: dashed; border-color: var(--stroke-strong); background: color-mix(in srgb, var(--glass) 70%, transparent); }
.node.available { color: var(--text-1); border-color: rgba(97, 250, 196, 0.45); }
.node.available .dot { border-color: var(--signal); }
.node.learning { color: var(--text-1); border-color: rgba(79, 194, 255, 0.5); }
.node.learning .dot { border-color: var(--azure); background: linear-gradient(90deg, var(--azure) 50%, transparent 50%); }
.node.known { color: var(--text-1); background: color-mix(in srgb, var(--signal) 10%, var(--glass-strong)); border-color: rgba(97, 250, 196, 0.45); }
.node.known .dot { background: var(--signal); border-color: var(--signal); box-shadow: 0 0 8px rgba(97, 250, 196, 0.7); }
.node.tested .dot { background: repeating-linear-gradient(45deg, var(--signal) 0 2px, transparent 2px 4px); }
.node.selected { box-shadow: 0 0 0 2px var(--azure), 0 0 22px rgba(79, 194, 255, 0.3); }
.node.next { box-shadow: 0 0 0 2px var(--amber), 0 0 22px rgba(255, 184, 74, 0.28); }
.drawer {
  width: 380px; border-left: 1px solid var(--divider); background: color-mix(in srgb, var(--canvas-raised) 90%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  overflow-y: auto; padding: 24px; display: grid; gap: 16px; align-content: start;
}
.drawer h2 { font-size: 26px; line-height: 1.15; letter-spacing: -0.35px; }
.drawer .summary { font-size: 16px; color: var(--text-2); line-height: 1.5; }
.drawer .rel h3 { font: 700 11px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.drawer .rel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.drawer .rel button { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 1px solid transparent; background: transparent; padding: 7px 10px; border-radius: 10px; color: var(--text-2); font-weight: 600; }
.drawer .rel button:hover { background: var(--subtle-fill); border-color: var(--stroke); color: var(--text-1); }
.drawer .actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── Placement ────────────────────────────────────────────── */
.narrow { max-width: 760px; margin: 0 auto; padding: 56px 32px 96px; }
.narrow > h1 { margin-top: 10px; font-size: 40px; line-height: 1.1; letter-spacing: -0.8px; }
.lede { margin-top: 14px; font-size: 18px; line-height: 1.55; color: var(--text-2); }
.ratings { margin-top: 32px; display: grid; gap: 10px; }
.seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--rail-fill); border: 1px solid var(--stroke); }
.seg button { border: 0; background: transparent; padding: 0 12px; height: 32px; border-radius: var(--r-pill); font-size: 13px; font-weight: 600; color: var(--text-2); }
.seg button:hover { color: var(--text-1); background: var(--subtle-fill); }
.seg button[aria-pressed="true"] { background: var(--grad-signal); color: var(--on-signal); }
.question { display: grid; gap: 18px; }
.question .qmeta { display: flex; justify-content: space-between; color: var(--text-3); font: 600 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.question .qtext { font-size: 22px; font-weight: 700; line-height: 1.35; letter-spacing: -0.2px; }
.question .qtext code, .option code { font-family: var(--font-mono); font-size: 0.86em; background: var(--code-bg); padding: 0.1em 0.35em; border-radius: 6px; }
.options { display: grid; gap: 10px; }
.option {
  display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start;
  text-align: left; padding: 14px 16px; border-radius: var(--r-md);
  border: 1px solid var(--stroke-strong); background: var(--glass);
  font-size: 15.5px; line-height: 1.45;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
.option:hover:not(:disabled) { border-color: var(--t-azure); }
.option .k { font: 700 12px var(--font-mono); color: var(--text-2); width: 26px; height: 26px; border: 1px solid var(--stroke-strong); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; }
.option.right { border-color: var(--signal); background: var(--signal-soft); }
.option.right .k { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }
.option.wrong { border-color: var(--coral); background: var(--redpen-soft); }
.option.wrong .k { background: var(--coral); color: #210403; border-color: var(--coral); }
.option:disabled { cursor: default; }

/* ── Lesson ───────────────────────────────────────────────── */
.lesson-shell { display: grid; grid-template-columns: minmax(0, 1fr) 400px; min-height: 100vh; }
.lesson-shell.tutor-closed { grid-template-columns: minmax(0, 1fr) 0; }
.stages { margin-top: 26px; display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--r-pill); background: var(--rail-fill); border: 1px solid var(--stroke); }
.lesson-notes { max-width: 800px; margin: 0 auto; padding: 0 36px 22px; }
.notes { border-radius: var(--r-md); padding: 0; }
.notes summary { cursor: pointer; padding: 14px 18px; display: flex; justify-content: space-between; align-items: center; gap: 12px; font-weight: 700; list-style: none; }
.notes summary::-webkit-details-marker { display: none; }
.notes summary::before { content: "＋"; color: var(--text-3); font-weight: 600; margin-right: 8px; }
.notes[open] summary::before { content: "－"; }
.notes summary > span:first-child { margin-right: auto; }
.notes-status { font: 600 11.5px var(--font-mono); color: var(--text-3); }
.notes-input { display: block; width: calc(100% - 36px); margin: 0 18px; min-height: 110px; resize: vertical; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--stroke); background: var(--code-bg); color: var(--text-1); font-family: inherit; font-size: 15px; line-height: 1.55; }
.notes-input:focus { outline: none; border-color: var(--t-azure); }
.notes-hint { margin: 8px 18px 14px; font-size: 12.5px; color: var(--text-3); }
.why { padding: 20px 22px; margin-bottom: 26px; border-radius: var(--r-md); position: relative; overflow: hidden; }
.why::before { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(97, 250, 196, 0.09), transparent 60%); pointer-events: none; }
.why > * { position: relative; }
.why .eyebrow { margin-bottom: 8px; }
.why .prose p { font-size: 16.5px; color: var(--text-1); }

/* Reading prose */
.prose { font-size: 17px; line-height: 1.68; color: var(--text-1); }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 24px; line-height: 1.25; letter-spacing: -0.35px; margin-top: 1.9em; }
.prose h3 { font-size: 18px; margin-top: 1.5em; }
.prose h2 + *, .prose h3 + * { margin-top: 0.6em; }
.prose p, .prose li { color: color-mix(in srgb, var(--text-1) 88%, var(--text-2)); }
.prose strong { color: var(--text-1); font-weight: 700; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose li::marker { color: var(--t-signal); }
.prose code { font-family: var(--font-mono); font-size: 0.84em; background: var(--code-bg); border: 1px solid var(--divider); padding: 0.1em 0.38em; border-radius: 6px; }
.prose a { color: var(--t-azure); text-underline-offset: 3px; }
/* Long inline code, such as URLs and file paths, wraps instead of widening the page on phones. */
.ih-legacy :not(pre) > code, .prose :not(pre) > code { overflow-wrap: anywhere; }
.prose .table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.prose .table-scroll:focus-visible { outline: 2px solid var(--t-azure); outline-offset: 2px; border-radius: 12px; }
.prose table { border-collapse: collapse; width: 100%; font-size: 14.5px; border-radius: 12px; overflow: hidden; }
.prose th, .prose td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--divider); vertical-align: top; }
.prose th { font: 700 11.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); border-bottom-color: var(--stroke-strong); }
.prose blockquote { --tint: var(--azure); --tint-text: var(--t-azure); margin: 1.3em 0; padding: 14px 18px; border-radius: 14px; background: color-mix(in srgb, var(--tint) 6%, var(--glass)); border: 1px solid color-mix(in srgb, var(--tint) 28%, transparent); font-size: 16px; }
.prose blockquote.callout-tip, .prose blockquote.callout-note { --tint: var(--signal); --tint-text: var(--t-signal); }
.prose blockquote.callout-marketers { --tint: var(--amber); --tint-text: var(--t-amber); }
.prose blockquote.callout-watch { --tint: var(--coral); --tint-text: var(--t-coral); }
.prose blockquote.callout-plain { --tint: var(--azure); --tint-text: var(--t-azure); }
.prose blockquote strong:first-child { color: color-mix(in srgb, var(--tint-text) 70%, var(--text-1)); }
.prose blockquote > * + * { margin-top: 0.6em; }
.prose pre { margin: 1.1em 0; }
.section { margin-top: 34px; }
.section:first-child { margin-top: 0; }

/* Code */
.code-wrap { position: relative; }
.code-wrap .copy-btn { position: absolute; top: 8px; right: 8px; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--stroke); background: var(--surface-elevated); color: var(--text-2); font: 600 11.5px var(--font-mono); opacity: 0; transition: opacity 120ms var(--ease-out); }
.code-wrap:hover .copy-btn, .code-wrap .copy-btn:focus-visible, .code-wrap .copy-btn.done { opacity: 1; }
@media (hover: none) { .code-wrap .copy-btn { opacity: 1; } }
pre.code {
  margin: 0; padding: 14px 18px; overflow-x: auto;
  background: var(--code-bg); color: var(--code-ink);
  border-radius: 14px; border: 1px solid var(--stroke);
  font: 500 13.5px/1.65 var(--font-mono); tab-size: 4;
}
.tok-k { color: var(--hl-keyword); }
.tok-s { color: var(--hl-string); }
.tok-n { color: var(--hl-number); }
.tok-c { color: var(--hl-comment); font-style: italic; }
.tok-b { color: var(--hl-builtin); }
.tok-d { color: var(--hl-def); }

.cell { border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--stroke-strong); background: var(--surface); }
.cell .cell-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 16px; border-bottom: 1px solid var(--divider); background: var(--glass); }
.cell .cell-bar .lbl { font: 700 11px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.cell .cell-bar .btns { display: flex; gap: 6px; }
.cell .output { border-top: 1px solid var(--divider); background: var(--rail-fill); }

.editor { position: relative; font: 500 13.5px/1.65 var(--font-mono); tab-size: 4; background: var(--code-bg); }
.editor .gutter { position: absolute; left: 0; top: 0; bottom: 0; width: 44px; padding: 14px 10px 14px 0; text-align: right; color: var(--text-3); /* text-4 reads at 2.42:1 on the code background; text-3 passes at 4.68:1 */ font-variant-numeric: tabular-nums; user-select: none; border-right: 1px solid var(--divider); overflow: hidden; }
.editor .gutter div.err { color: var(--t-coral); font-weight: 700; }
.editor .scroller { position: relative; margin-left: 44px; overflow-x: auto; }
.editor pre, .editor textarea { margin: 0; padding: 14px 16px; border: 0; min-height: 100%; font: inherit; white-space: pre; word-wrap: normal; overflow-wrap: normal; letter-spacing: normal; }
.editor pre { pointer-events: none; color: var(--code-ink); }
.editor textarea { position: absolute; inset: 0; width: 100%; height: 100%; resize: none; overflow: hidden; background: transparent; color: transparent; caret-color: var(--signal); outline: none; }
.editor textarea::selection { background: rgba(79, 194, 255, 0.28); color: transparent; }
.editor:focus-within { box-shadow: inset 0 0 0 1px rgba(79, 194, 255, 0.45); }

.out { font: 500 13px/1.6 var(--font-mono); padding: 12px 16px; white-space: pre-wrap; word-break: break-word; max-height: 340px; overflow: auto; color: var(--text-1); }
.out:empty { display: none; }
.out .err { color: var(--t-coral); }
.out .note { color: var(--text-3); font-family: var(--font-ui); font-size: 12.5px; }
.out:has(.plot) { max-height: none; }
.out .plot { display: block; max-width: 100%; height: auto; margin: 10px 0 4px; border-radius: var(--r-sm); border: 1px solid var(--divider); }

/* Math: TeX source shows in mono until KaTeX loads, then KaTeX's own markup replaces it. */
.math:not([data-done]), .math-display:not([data-done]) { font-family: var(--font-mono); font-size: 0.92em; color: var(--text-2); }
.math-display { margin: 14px 0; padding: 10px 4px; overflow-x: auto; overflow-y: hidden; text-align: center; }
.katex { font-size: 1.06em; color: inherit; }
.katex-display { margin: 0; }
.out-label { font: 700 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding: 10px 16px 0; }

/* Example and check blocks */
.example { padding: 22px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; border-radius: var(--r-lg); }
.example > header .eyebrow { margin-bottom: 6px; }
.example > header h3 { font-size: 19px; letter-spacing: -0.2px; }
.example .after { border-top: 1px dashed var(--stroke-strong); padding-top: 14px; }
.check { padding: 22px; display: grid; gap: 14px; border-radius: var(--r-lg); }
.check .q { font-weight: 700; font-size: 16.5px; overflow-wrap: anywhere; }
.check .explain, .quiz-feedback { font-size: 15px; color: var(--text-2); padding: 12px 14px; border-radius: 12px; background: var(--rail-fill); border: 1px solid var(--stroke); }
.widget-frame { border-radius: var(--r-lg); overflow: hidden; }
.widget-frame > header { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--divider); }
.widget-frame > header .t { font-weight: 700; font-size: 14.5px; }
.widget-frame > header .k { font: 700 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-violet); }
.caption { margin-top: 10px; font-size: 14px; color: var(--text-3); line-height: 1.5; }

/* Practice */
.exercise { display: grid; gap: 18px; }
.exercise .task { padding: 18px 20px; border-radius: var(--r-md); }
.exercise .toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.exercise .toolbar .spacer { flex: 1; }
/* Very wide lesson column: the task stays beside the editor instead of scrolling away above it.
   Sized to the lesson column (not the window), so it stays stacked while the tutor panel takes the
   room, and only where the editor still gets about 100 characters a line. */
.lesson-content:has(> .exercise) { container-type: inline-size; }
@container (min-width: 1150px) {
  .exercise:has(> .cell) { grid-template-columns: minmax(300px, 1fr) minmax(0, 2fr); column-gap: 28px; align-items: start; }
  .exercise:has(> .cell) > * { grid-column: 2; }
  .exercise:has(> .cell) > .eyebrow { grid-column: 1 / -1; }
  .exercise:has(> .cell) > .task { grid-column: 1; grid-row: 2 / span 7; position: sticky; top: 24px; max-height: calc(100dvh - 48px); overflow-y: auto; }
}
.checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.checks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; font-size: 14.5px; line-height: 1.45; }
.checks li .m { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; margin-top: 1px; }
.checks li.ok .m { background: var(--signal); color: var(--on-signal); }
.checks li.no .m { background: var(--coral); color: #210403; }
.checks li code { font-family: var(--font-mono); font-size: 12.5px; background: var(--code-bg); padding: 0 5px; border-radius: 5px; }
.hint { padding: 14px 16px; border-radius: 14px; border: 1px dashed var(--stroke-strong); font-size: 15px; background: var(--rail-fill); }
.hint .n { font: 700 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-amber); margin-bottom: 6px; }
.hint pre { margin-top: 6px; }
.hint.mistake { border-style: solid; }
.hint.mistake code { overflow-wrap: anywhere; }
.banner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 16px 18px; border-radius: var(--r-md); border: 1px solid rgba(97, 250, 196, 0.38); background: var(--signal-soft); }
.banner .t { font-weight: 800; color: var(--t-signal); }
.banner.warn { border-color: rgba(255, 115, 107, 0.4); background: var(--redpen-soft); }
.banner.warn .t { color: var(--t-coral); }
details.solution summary { cursor: pointer; color: var(--text-3); font-size: 14px; font-weight: 600; }
details.solution[open] summary { margin-bottom: 10px; }

/* Quiz */
.quiz { display: grid; gap: 22px; }
.quiz-progress { display: flex; gap: 6px; }
.quiz-progress i { flex: 1; height: 6px; border-radius: 3px; background: var(--subtle-fill); }
.quiz-progress i.right { background: var(--signal); box-shadow: 0 0 8px rgba(97, 250, 196, 0.5); }
.quiz-progress i.partial { background: var(--amber); }
.quiz-progress i.wrong { background: var(--coral); }
.quiz-progress i.current { background: var(--text-3); }
.quiz textarea.answer, .quiz input.answer {
  width: 100%; border: 1px solid var(--stroke-strong); border-radius: 14px; background: var(--input-fill);
  padding: 12px 14px; font: 15px/1.5 var(--font-ui); resize: vertical;
}
.quiz textarea.answer.code, .quiz input.answer.code { font-family: var(--font-mono); font-size: 13.5px; }
.quiz textarea.answer:focus, .quiz input.answer:focus { outline: none; border-color: var(--t-azure); }
.score-card { display: grid; gap: 14px; padding: 28px; border-radius: var(--r-lg); }
.score-card .big { font: 800 52px var(--font-mono); letter-spacing: -2px; font-variant-numeric: tabular-nums; }
.score-card.pass .big { background: var(--grad-signal); -webkit-background-clip: text; background-clip: text; color: transparent; }
.score-card p { color: var(--text-2); font-size: 16px; }
.verdict { font-weight: 800; }
.verdict.correct { color: var(--t-signal); }
.verdict.partial { color: var(--t-amber); }
.verdict.incorrect { color: var(--t-coral); }
.panel { padding: 22px; border-radius: var(--r-lg); }
.panel h2 { font-size: 15px; font-weight: 700; color: var(--text-1); display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.panel h2 .muted { font-weight: 500; font-size: 13px; }

/* Tutor */
.tutor {
  position: sticky; top: 0; height: 100vh;
  border-left: 1px solid var(--divider); background: color-mix(in srgb, var(--canvas-raised) 88%, transparent);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  display: grid; grid-template-rows: auto 1fr auto; min-width: 0; overflow: hidden;
}
.tutor-closed .tutor { display: none; }
.tutor > header { display: flex; align-items: center; gap: 12px; padding: 18px 18px 14px; border-bottom: 1px solid var(--divider); }
.tutor .avatar-tile { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; flex: none; background: radial-gradient(circle at 30% 25%, rgba(156, 122, 255, 0.6), rgba(79, 194, 255, 0.25) 60%, transparent); border: 1px solid rgba(156, 122, 255, 0.45); color: #fff; }
.tutor .avatar-tile svg { width: 22px; height: 22px; }
.tutor > header .t { font: 700 12px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-violet); }
.tutor > header .s { font-size: 14px; color: var(--text-2); font-weight: 600; }
.tutor > header .icon-btn { margin-left: auto; }
.tutor .log { overflow-y: auto; padding: 18px; display: grid; gap: 14px; align-content: start; }
.tutor .msg { font-size: 14.5px; line-height: 1.6; }
.tutor .msg.user { justify-self: end; max-width: 88%; background: rgba(79, 194, 255, 0.12); border: 1px solid rgba(79, 194, 255, 0.28); padding: 9px 14px; border-radius: 16px 16px 4px 16px; white-space: pre-wrap; }
.tutor .msg.assistant { padding: 14px 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--stroke); }
.tutor .msg.assistant > * + * { margin-top: 0.6em; }
.tutor .msg.assistant pre.code { font-size: 12.5px; padding: 10px 12px; }
.tutor .msg.assistant code { font-family: var(--font-mono); font-size: 12.5px; background: var(--code-bg); padding: 0 5px; border-radius: 5px; }
.tutor .msg.assistant ul, .tutor .msg.assistant ol { padding-left: 1.2em; margin: 0; }
.tutor .msg.thinking { color: var(--text-3); font-size: 13.5px; }
.tutor .empty { color: var(--text-2); font-size: 14.5px; line-height: 1.55; padding: 16px; border-radius: 16px; background: var(--glass); border: 1px solid var(--stroke); }
.tutor .suggest { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tutor .suggest button { border: 1px solid rgba(156, 122, 255, 0.4); background: transparent; border-radius: var(--r-pill); padding: 6px 12px; font-size: 13px; font-weight: 600; color: var(--text-1); }
.tutor .suggest button:hover { background: rgba(156, 122, 255, 0.12); }
.tutor form { border-top: 1px solid var(--divider); padding: 12px; display: grid; gap: 8px; }
.tutor .ask { display: flex; gap: 10px; align-items: flex-end; }
.tutor textarea { flex: 1; min-height: 52px; max-height: 180px; resize: none; border: 1px solid var(--stroke-strong); border-radius: 18px; background: var(--input-fill); padding: 13px 16px; font-size: 14.5px; line-height: 1.45; }
.tutor textarea:focus { outline: none; border-color: var(--t-azure); }
.tutor .send { width: 46px; height: 46px; border-radius: 50%; border: 0; flex: none; display: grid; place-items: center; background: var(--grad-signal); color: var(--on-signal); box-shadow: 0 4px 16px rgba(97, 250, 196, 0.25); }
.tutor .send:disabled { opacity: 0.4; }
.tutor .send svg { width: 20px; height: 20px; }
.tutor form .row { font-size: 12px; color: var(--text-3); padding-left: 4px; }

/* Review */

/* Dialog */
dialog { border: 1px solid var(--stroke-strong); border-radius: var(--r-lg); background: var(--surface-elevated); color: var(--text-1); padding: 0; width: min(560px, calc(100vw - 32px)); box-shadow: 0 30px 80px var(--shadow); }
dialog::backdrop { background: rgba(2, 3, 8, 0.6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.search-dialog { width: min(620px, calc(100vw - 24px)); margin-top: 12vh; }
.search-bar { display: flex; align-items: center; gap: 10px; padding: 14px 14px 12px 18px; border-bottom: 1px solid var(--divider); }
.search-icon { display: inline-flex; color: var(--text-3); }
.search-icon svg { width: 20px; height: 20px; }
.search-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text-1); font-family: inherit; font-size: 17px; font-weight: 500; padding: 6px 0; }
.search-input::-webkit-search-cancel-button { display: none; }
.search-hint { padding: 12px 20px 4px; }
.search-results { list-style: none; margin: 0; padding: 4px 8px 10px; max-height: min(56vh, 520px); overflow-y: auto; }
.search-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 12px; cursor: pointer; }
.search-row[aria-selected="true"] { background: var(--subtle-fill); }
.search-row .t { font-weight: 650; }
.search-row .s { font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-row .m { font: 600 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.search-row .note-tag { font: 700 10px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-amber); margin-right: 6px; }
.sdot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px dashed var(--ink-4); }
.sdot.mastered, .sdot.tested { background: var(--signal); border: 0; }
.sdot.learning, .sdot.available { border: 1.5px solid var(--signal); }
dialog.shortcuts dl { display: grid; grid-template-columns: 150px 1fr; gap: 8px 18px; margin: 8px 0 0; align-items: center; }
dialog.shortcuts dt { white-space: nowrap; color: var(--text-3); font-size: 12.5px; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
dialog.shortcuts dt .sep { margin: 0 2px; }
dialog.shortcuts dd { margin: 0; font-size: 14.5px; }
kbd { display: inline-block; min-width: 22px; padding: 2px 7px; border-radius: 7px; border: 1px solid var(--stroke-strong); border-bottom-width: 2px; background: var(--subtle-fill); color: var(--text-1); font: 600 12px var(--font-mono); text-align: center; }
.setting { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--divider); }
.setting:last-child { border-bottom: 0; padding-bottom: 0; }
.setting .l { font-weight: 700; }
.setting .h { font-size: 13.5px; color: var(--text-3); }
.switch { appearance: none; width: 44px; height: 26px; border-radius: 13px; background: var(--stroke-strong); position: relative; cursor: pointer; transition: background 150ms var(--ease-out); margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform 150ms var(--ease-out); }
.switch:checked { background: var(--grad-signal); }
.switch:checked::after { transform: translateX(18px); }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; background: var(--surface-elevated); border: 1px solid var(--stroke-strong); color: var(--text-1); padding: 12px 18px; border-radius: var(--r-pill); font-size: 14px; font-weight: 600; box-shadow: 0 12px 30px var(--shadow); animation: toast-in 180ms var(--ease-out); }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 6px); } }
.consent { position: fixed; right: 16px; bottom: 16px; z-index: 60; max-width: 380px; padding: 16px; display: grid; gap: 12px; font-size: 14px; color: var(--text-2); animation: toast-in 180ms var(--ease-out); }
.consent p { margin: 0; }
.consent-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (max-width: 600px) { .consent { left: 8px; right: 8px; bottom: 8px; max-width: none; padding: 10px 12px; gap: 8px; font-size: 13px; line-height: 1.35; } }
/* On the sign-in pages the form sits on the right, so the banner goes bottom-left. */

/* ── Widgets ──────────────────────────────────────────────── */
.widget-body { min-width: 0; }
.stepper { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.stepper .src { background: var(--code-bg); border-right: 1px solid var(--divider); padding: 12px 0; font: 500 13px/1.75 var(--font-mono); overflow-x: auto; }
.stepper .src .ln { display: grid; grid-template-columns: 40px 1fr; padding-right: 12px; white-space: pre; position: relative; }
.stepper .src .ln .no { color: var(--text-4); text-align: right; padding-right: 12px; user-select: none; font-variant-numeric: tabular-nums; }
.stepper .src .ln.next { background: var(--marker); }
.stepper .src .ln.next .no { color: var(--t-amber); }
.stepper .src .ln.prev { background: rgba(97, 250, 196, 0.06); }
.stepper .state { padding: 14px 16px; display: grid; gap: 14px; align-content: start; font-size: 13.5px; min-height: 220px; }
.stepper .state h3 { font: 700 10.5px var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin-bottom: 8px; }
.vars { display: grid; gap: 5px; }
.var { display: grid; grid-template-columns: minmax(74px, auto) 1fr; gap: 10px; align-items: baseline; padding: 6px 10px; border-radius: 10px; background: var(--rail-fill); border: 1px solid var(--stroke); font: 500 12.5px var(--font-mono); }
.var .n { color: var(--text-1); font-weight: 700; }
.var .v { color: var(--text-2); word-break: break-all; }
.var .ty { color: var(--text-3); font-size: 11px; margin-left: 6px; }
.var.changed { border-color: rgba(97, 250, 196, 0.45); background: var(--signal-soft); }
.frame { padding: 8px 10px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--violet) 30%, transparent); background: color-mix(in srgb, var(--violet) 5%, transparent); display: grid; gap: 5px; }
.frame .fn { font: 600 12px var(--font-mono); color: var(--t-violet); }
.stepper .printed { background: var(--code-bg); border-radius: 10px; padding: 8px 10px; font: 500 12.5px/1.5 var(--font-mono); white-space: pre-wrap; min-height: 32px; border: 1px solid var(--divider); }
.stepper footer { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--divider); }
.stepper footer input[type="range"] { flex: 1; height: 24px; accent-color: var(--signal); }
.stepper footer .pos { font: 600 12px var(--font-mono); color: var(--text-3); min-width: 76px; text-align: right; font-variant-numeric: tabular-nums; }
.stepper .note { font-size: 13px; color: var(--text-2); padding: 8px 10px; border-radius: 10px; background: var(--rail-fill); border: 1px solid var(--stroke); }

.indexviz { padding: 20px 18px; display: grid; gap: 16px; }
.indexviz .boxes { display: flex; gap: 5px; overflow-x: auto; padding-bottom: 4px; }
.indexviz .box { flex: none; min-width: 42px; text-align: center; display: grid; gap: 4px; }
.indexviz .box .pos, .indexviz .box .neg { font: 600 11px var(--font-mono); color: var(--text-3); }
.indexviz .box .cell-v { font: 500 14px var(--font-mono); padding: 9px 7px; border: 1px solid var(--stroke-strong); border-radius: 10px; background: var(--rail-fill); white-space: pre; color: var(--text-1); }
.indexviz .box.in .cell-v { background: var(--marker); border-color: var(--amber); box-shadow: 0 0 12px rgba(255, 184, 74, 0.25); }
.indexviz .controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.indexviz label { display: grid; gap: 5px; font: 700 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.indexviz input[type="number"] { height: 36px; border: 1px solid var(--stroke-strong); border-radius: 10px; background: var(--input-fill); padding: 0 10px; font-family: var(--font-mono); }
.indexviz .expr, .indexviz .codeline { font: 500 14px var(--font-mono); padding: 11px 14px; background: var(--code-bg); border-radius: 10px; border: 1px solid var(--divider); }

.terminal { background: #04060b; color: #d8e1ee; font: 500 13px/1.6 var(--font-mono); }
.terminal .screen { height: 320px; overflow-y: auto; padding: 14px 16px; white-space: pre-wrap; word-break: break-word; }
.terminal .screen .cmd { color: #ffffff; }
.terminal .screen .prompt { color: #61fac4; }
.terminal .screen .err { color: #ff8c84; }
.terminal .screen .dim { color: #8b97ad; }
.terminal .input-line { display: flex; gap: 8px; padding: 0 16px 14px; align-items: baseline; }
.terminal .input-line input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font: inherit; caret-color: #61fac4; }
.terminal:focus-within { box-shadow: inset 0 0 0 2px var(--t-azure); }
.terminal-tasks { padding: 14px 16px; display: grid; gap: 7px; border-top: 1px solid var(--divider); }
.terminal-tasks .task { display: grid; grid-template-columns: 22px 1fr; gap: 8px; font-size: 14px; color: var(--text-3); }
.terminal-tasks .task.current { color: var(--text-1); font-weight: 700; }
.terminal-tasks .task.done { color: var(--text-2); }
.terminal-tasks .task .m { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--text-4); margin-top: 1px; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; }
.terminal-tasks .task.done .m { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.terminal-tasks .task.current .m { border-color: var(--signal); box-shadow: 0 0 8px rgba(97, 250, 196, 0.5); }
.terminal-tasks .hintline { font-size: 13px; color: var(--text-3); padding-left: 30px; }

.httpw .req { padding: 16px; display: grid; gap: 12px; border-bottom: 1px solid var(--divider); }
.httpw .presets { display: flex; flex-wrap: wrap; gap: 8px; }
.httpw .presets button { border: 1px solid var(--stroke-strong); background: var(--subtle-fill); border-radius: var(--r-pill); padding: 5px 12px; font-size: 13px; font-weight: 600; color: var(--text-2); }
.httpw .presets button[aria-pressed="true"] { background: var(--grad-signal); color: var(--on-signal); border-color: transparent; }
.httpw .line { display: grid; grid-template-columns: 104px 1fr auto; gap: 8px; }
.httpw select, .httpw input, .httpw textarea { border: 1px solid var(--stroke-strong); border-radius: 10px; background: var(--input-fill); padding: 0 10px; height: 40px; font: 500 13px var(--font-mono); min-width: 0; }
.httpw textarea { height: 90px; padding: 10px; resize: vertical; }
.httpw .sub { font: 700 10.5px var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); }
.httpw .res { display: grid; grid-template-columns: 1fr 1fr; min-height: 170px; }
.httpw .res > div { padding: 14px 16px; min-width: 0; }
.httpw .res > div + div { border-left: 1px solid var(--divider); }
.httpw .raw { font: 500 12px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word; color: var(--text-2); max-height: 300px; overflow: auto; margin: 0; }
.httpw .status { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.httpw .status .code { font: 800 24px var(--font-mono); }
.httpw .status.ok .code { color: var(--t-signal); }
.httpw .status.bad .code { color: var(--t-coral); }
.httpw .status .meaning { font-size: 13.5px; color: var(--text-2); font-weight: 600; }

.jsonw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
.jsonw .tree { padding: 14px 8px 14px 14px; font: 500 13px/1.85 var(--font-mono); max-height: 380px; overflow: auto; border-right: 1px solid var(--divider); }
.jsonw .row { display: flex; gap: 6px; align-items: baseline; cursor: pointer; border-radius: 6px; padding: 0 6px; white-space: nowrap; }
.jsonw .row:hover { background: var(--subtle-fill); }
.jsonw .row.sel { background: var(--marker); }
.jsonw .row.sel .sum { color: var(--text-2); }
.jsonw .tw { width: 12px; color: var(--text-3); flex: none; }
.jsonw .key { color: var(--hl-def); }
.jsonw .str { color: var(--hl-string); }
.jsonw .num { color: var(--hl-number); }
.jsonw .lit { color: var(--hl-keyword); }
.jsonw .sum { color: var(--text-3); }
.jsonw .side { padding: 16px; display: grid; gap: 10px; align-content: start; }
.jsonw .side .expr { font: 500 13px var(--font-mono); background: var(--code-bg); padding: 11px 13px; border-radius: 10px; word-break: break-all; border: 1px solid var(--divider); color: var(--t-signal); }
.jsonw .side .val { font: 500 12.5px var(--font-mono); white-space: pre-wrap; color: var(--text-2); max-height: 210px; overflow: auto; }

.arrayw { padding: 18px; display: grid; gap: 16px; }
.arrayw .toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.arrayw .eq { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.arrayw .op { font: 700 20px var(--font-mono); color: var(--text-3); }
.arrayw .grid { display: grid; gap: 4px; }
.arrayw .grid .c { min-width: 46px; height: 36px; display: flex; align-items: center; justify-content: center; font: 500 13px var(--font-mono); border: 1px solid var(--stroke-strong); border-radius: 8px; background: var(--rail-fill); font-variant-numeric: tabular-nums; }
.arrayw .grid .c.ghost { border-style: dashed; color: var(--text-4); background: transparent; }
.arrayw .grid .c.hot { background: var(--marker); border-color: var(--amber); }
.arrayw .grid .c.res { background: var(--signal-soft); border-color: rgba(97, 250, 196, 0.4); }
.arrayw .shape { font: 600 11px var(--font-mono); color: var(--text-3); margin-top: 6px; text-align: center; }
.arrayw .codeline { font: 500 13px var(--font-mono); background: var(--code-bg); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--divider); white-space: pre; overflow-x: auto; }

.tokensw { padding: 16px; display: grid; gap: 14px; }
.tokensw textarea { width: 100%; min-height: 80px; border: 1px solid var(--stroke-strong); border-radius: 12px; background: var(--input-fill); padding: 10px 12px; font: 15px/1.5 var(--font-ui); resize: vertical; }
.tokensw .chips { display: flex; flex-wrap: wrap; gap: 3px; font: 500 13px/2 var(--font-mono); }
.tokensw .chip { all: unset; padding: 0 3px; border-radius: 5px; white-space: pre; }
.tokensw .chip:nth-child(4n+1) { background: rgba(97, 250, 196, 0.18); }
.tokensw .chip:nth-child(4n+2) { background: rgba(255, 184, 74, 0.22); }
.tokensw .chip:nth-child(4n+3) { background: rgba(156, 122, 255, 0.22); }
.tokensw .chip:nth-child(4n+4) { background: rgba(79, 194, 255, 0.2); }
.tokensw .stats { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--text-3); }
.tokensw .stats b { font: 800 20px var(--font-mono); color: var(--text-1); display: block; font-variant-numeric: tabular-nums; }

.msgw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.msgw .build { padding: 16px; display: grid; gap: 12px; border-right: 1px solid var(--divider); align-content: start; }
.msgw label { display: grid; gap: 5px; font: 700 10.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.msgw textarea, .msgw input, .msgw select { border: 1px solid var(--stroke-strong); border-radius: 10px; background: var(--input-fill); padding: 8px 10px; font: 14px/1.45 var(--font-ui); resize: vertical; min-width: 0; text-transform: none; letter-spacing: normal; }
.msgw input[type="number"] { font-family: var(--font-mono); height: 36px; width: 120px; }
.msgw .turn { display: grid; gap: 4px; }
.msgw .turn .role { font: 600 11px var(--font-mono); color: var(--t-violet); }
.msgw .views { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.msgw .tabs { display: flex; gap: 4px; padding: 10px 12px; border-bottom: 1px solid var(--divider); }
.msgw .tabs button { border: 0; background: transparent; padding: 6px 12px; font-size: 13px; font-weight: 700; color: var(--text-3); border-radius: var(--r-pill); }
.msgw .tabs button[aria-selected="true"] { color: var(--text-1); background: var(--subtle-fill); box-shadow: 0 0 0 1px var(--stroke-strong); }
.msgw .view { padding: 14px 16px; font: 500 12px/1.6 var(--font-mono); white-space: pre-wrap; word-break: break-word; overflow: auto; max-height: 400px; }

/* ── Login ────────────────────────────────────────────────── */

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .lesson-shell, .lesson-shell.tutor-closed { grid-template-columns: minmax(0, 1fr); }
  .tutor { position: fixed; right: 0; top: 0; bottom: 0; width: min(420px, 100vw); z-index: 30; height: auto; box-shadow: -20px 0 60px var(--shadow); }
  .tutor-closed .tutor { display: none; }
  }
@media (max-width: 900px) {
  :root { --topbar-h: 60px; }
  .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: sticky; top: 0; height: var(--topbar-h); flex-direction: row; align-items: center; gap: 10px; padding: 0 12px; border-right: 0; border-bottom: 1px solid var(--divider); }
  .sidebar .brand .meta, .sidebar .spacer, .sidebar .path-card, .sidebar-foot .ver { display: none; }
  .brand { padding: 0; }
  .brand .tile { width: 36px; height: 36px; }
  .nav { display: flex; gap: 2px; flex: 1; }
  .nav a { height: 38px; padding: 0 10px; font-size: 14px; gap: 6px; }
  .nav a svg { width: 17px; height: 17px; }
      .tutor { top: var(--topbar-h); }
  }
@media (max-width: 680px) {
  .nav a span.label { display: none; }
  .page, .narrow, .review-wrap { padding-left: 16px; padding-right: 16px; }
  .page { padding-top: 28px; }
          .lesson-head, .lesson-body, .lesson-pager, .lesson-notes { padding-left: 16px; padding-right: 16px; }
        .stepper, .jsonw, .httpw .res, .msgw { grid-template-columns: minmax(0, 1fr); }
  .stepper .src { border-right: 0; border-bottom: 1px solid var(--divider); }
  .jsonw .tree, .msgw .build { border-right: 0; border-bottom: 1px solid var(--divider); }
  .httpw .res > div + div { border-left: 0; border-top: 1px solid var(--divider); }
    .seg { width: 100%; }
  .seg button { flex: 1; padding: 0 4px; font-size: 12px; }
  .drawer { position: fixed; inset: auto 0 0 0; width: auto; max-height: 72vh; border-left: 0; border-top: 1px solid var(--stroke-strong); z-index: 25; border-radius: 24px 24px 0 0; }
      .search-dialog { margin-top: 8px; }
  .activity { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .search-row .m { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0ms !important; animation-duration: 0ms !important; }
}

/* ── Baby AI ──────────────────────────────────────────────── */
.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px; border-radius: var(--r-md); background: var(--rail-fill); border: 1px solid var(--stroke); }
.inspector { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.inspector:empty { display: none; }
.probs { display: grid; gap: 6px; }
.prob { display: grid; grid-template-columns: 28px 1fr 58px; gap: 10px; align-items: center; font-size: 13px; }
.prob .c { text-align: center; font-weight: 700; padding: 2px 0; border-radius: 6px; background: var(--subtle-fill); }
.prob .bar { height: 8px; border-radius: 4px; background: var(--subtle-fill); overflow: hidden; }
.prob .bar span { display: block; height: 100%; background: var(--violet); border-radius: 4px; }
.prob.chosen .bar span { background: var(--grad-signal); }
.prob.chosen .c { background: var(--signal); color: var(--on-signal); }
.prob .p { color: var(--text-2); text-align: right; font-variant-numeric: tabular-nums; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.timeline li { display: grid; grid-template-columns: 28px 1fr; gap: 10px; align-items: center; padding: 7px 8px; border-radius: 12px; color: var(--text-3); }
.timeline li .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 11px var(--font-mono); border: 1.5px solid var(--stroke-strong); color: var(--text-3); }
.timeline li .l { font-weight: 700; }
.timeline li .a { font-size: 12.5px; }
.timeline li.done { color: var(--text-2); }
.timeline li.done .dot { background: var(--signal); border-color: var(--signal); color: var(--on-signal); }
.timeline li.now { color: var(--text-1); background: color-mix(in srgb, var(--acc) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--acc) 40%, transparent); }
.timeline li.now .dot { border-color: var(--acc); color: var(--acc-text); box-shadow: 0 0 10px color-mix(in srgb, var(--acc) 50%, transparent); }
.timeline li.open .dot { border-color: var(--acc); color: var(--acc-text); }
.timeline .linkish { font-size: 15px; }
.chip.toggle { cursor: pointer; }
.chip.toggle[aria-pressed="true"] { background: var(--grad-signal); color: var(--on-signal); border-color: transparent; }
.kv { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; color: var(--text-3); }
.kv strong { color: var(--text-1); }

/* ── Math widgets ─────────────────────────────────────────── */
.c-signal { --c: var(--t-signal); }
.c-azure { --c: var(--t-azure); }
.c-violet { --c: var(--t-violet); }
.c-amber { --c: var(--t-amber); }
.c-coral { --c: var(--t-coral); }
.mathw { display: grid; grid-template-columns: minmax(0, 1fr) minmax(250px, 300px); gap: 18px; padding: 18px; align-items: start; }
.mathw.wide { grid-template-columns: minmax(0, 1.35fr) minmax(250px, 300px); }
.mathw.softmaxw { grid-template-columns: minmax(0, 1fr); }
.mstage { min-width: 0; }
.plane { width: 100%; height: auto; display: block; border-radius: var(--r-md); background: var(--rail-fill); border: 1px solid var(--divider); user-select: none; -webkit-user-select: none; }
.plane .gl { stroke: var(--grid-major); stroke-width: 1; }
.plane .axis { stroke: var(--stroke-strong); stroke-width: 1.4; }
.plane .tick { fill: var(--text-3); font: 500 13px var(--font-mono); }
.plane .vec line { stroke: var(--c, var(--text-2)); stroke-width: 3; stroke-linecap: round; }
.plane .vec.thick line { stroke-width: 6; opacity: 0.45; }
.plane .vec.faint line { opacity: 0.5; stroke-dasharray: 5 4; }
.plane .vec .head { fill: var(--c, var(--text-2)); }
.plane .vlabel { fill: var(--c, var(--text-1)); font: 700 16px var(--font-mono); paint-order: stroke; stroke: var(--surface); stroke-width: 4px; }
.plane .vec .vlabel { stroke-width: 4px; }
.plane .handle { fill: var(--surface-elevated); stroke-width: 2.5; }
.plane .handle.h-signal { stroke: var(--t-signal); }
.plane .handle.h-azure { stroke: var(--t-azure); }
.plane .handle.h-amber { stroke: var(--t-amber); }
.plane .handle:hover { stroke-width: 4; }
.plane .handle:focus-visible { stroke-width: 4; outline: 2px solid var(--t-azure); outline-offset: 3px; }
.plane:focus-visible, .flow-seq .msg:focus-visible { outline: 2px solid var(--t-azure); outline-offset: 2px; border-radius: 8px; }
.tree .row:focus-visible { outline: 2px solid var(--t-azure); outline-offset: -2px; border-radius: 4px; }
.plane .guide { stroke: var(--text-3); stroke-width: 1.3; stroke-dasharray: 4 4; }
.plane .arc { fill: none; stroke: var(--t-amber); stroke-width: 2; }
.plane .tgrid { stroke: var(--t-azure); stroke-opacity: 0.22; stroke-width: 1; }
.plane .tgrid.axis { stroke-opacity: 0.55; stroke-width: 1.6; }
.plane .unitsq { fill: var(--t-amber); fill-opacity: 0.16; stroke: var(--t-amber); stroke-opacity: 0.6; stroke-width: 1.5; }
.plane .eigline { stroke: var(--t-violet); stroke-width: 2; stroke-dasharray: 8 5; opacity: 0.85; }
.plane .curve { fill: none; stroke: var(--c); stroke-width: 2.6; stroke-linejoin: round; }
.plane .tangent { stroke: var(--t-violet); stroke-width: 2; }
.plane .tangent.faint { opacity: 0.35; stroke-dasharray: 5 4; }
.plane .secant { stroke: var(--t-coral); stroke-width: 2; }
.plane .dot { fill: var(--t-amber); fill-opacity: 0.55; }
.plane .dot.now { fill: var(--t-amber); fill-opacity: 1; stroke: var(--surface); stroke-width: 2; }
.plane .trail { fill: none; stroke: var(--t-amber); stroke-width: 1.6; stroke-opacity: 0.7; }
.plane .contour { fill: none; stroke: var(--t-signal); stroke-opacity: 0.35; stroke-width: 1.2; }
.plane .legend { fill: var(--c); font: 600 14px var(--font-ui); }
.plane .band1 { fill: var(--t-amber); fill-opacity: 0.2; }
.plane .band2 { fill: var(--t-amber); fill-opacity: 0.09; }
.plane .bar { fill: var(--c); fill-opacity: 0.35; }
.plane .area { fill: var(--c); fill-opacity: 0.16; stroke: var(--c); stroke-width: 2.2; }
.plane .mark { stroke: var(--c); stroke-width: 2.5; stroke-dasharray: 3 3; }
.mpanel { display: grid; gap: 14px; min-width: 0; }
.mcontrols { display: grid; gap: 10px; }
.mrow { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mrow > .sl, .mslider .sl { font: 700 10.5px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.mslider { display: grid; grid-template-columns: minmax(70px, auto) 1fr 64px; align-items: center; gap: 10px; }
.mslider input[type="range"] { width: 100%; height: 24px; accent-color: var(--t-signal); }
.mslider .sv { font: 600 12.5px var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; color: var(--text-1); }
.readout { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; padding: 12px 14px; border-radius: var(--r-sm); background: var(--subtle-fill); border: 1px solid var(--divider); font-size: 12.5px; }
.readout dt { color: var(--text-3); }
.readout dd { margin: 0; font: 600 12.5px var(--font-mono); color: var(--c, var(--text-1)); font-variant-numeric: tabular-nums; word-break: break-word; }
.mathw .codeline { margin: 0; font: 500 12px/1.55 var(--font-mono); background: var(--code-bg); color: var(--code-ink); padding: 10px 12px; border-radius: 10px; border: 1px solid var(--divider); white-space: pre; overflow-x: auto; }
.mhint { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--text-3); }
.mside { display: grid; gap: 10px; }
.matrix-in { display: grid; grid-template-columns: repeat(2, 64px); gap: 6px; padding: 6px 10px; border-left: 2px solid var(--stroke-strong); border-right: 2px solid var(--stroke-strong); border-radius: 6px; }
.matrix-in input { width: 64px; padding: 6px 8px; font: 600 13px var(--font-mono); text-align: center; background: var(--input-fill); color: var(--text-1); border: 1px solid var(--stroke); border-radius: 8px; }
.presets { display: flex; gap: 6px; flex-wrap: wrap; }
.prows { display: grid; gap: 8px; }
.prow { display: grid; grid-template-columns: auto minmax(220px, 1.1fr) minmax(120px, 1fr) 56px; gap: 12px; align-items: center; }
.prow input[type="radio"] { accent-color: var(--t-coral); margin: 0; }
.prow .mslider { grid-template-columns: 70px 1fr 40px; }
.ptrack { height: 14px; border-radius: var(--r-pill); background: var(--subtle-fill); overflow: hidden; }
.pbar { height: 100%; border-radius: var(--r-pill); background: var(--t-azure); opacity: 0.75; transition: width 0.18s var(--ease-out); }
.pbar.top { background: var(--t-signal); opacity: 1; }
.pbar.target { box-shadow: inset 0 0 0 2px var(--t-coral); }
.ppct { font: 600 12.5px var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; }
.softmaxw .mpanel.full { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 900px) {
  .mathw, .mathw.wide { grid-template-columns: minmax(0, 1fr); }
  .prow { grid-template-columns: auto minmax(0, 1fr) 52px; }
  .prow .ptrack { grid-column: 2 / 3; }
}
@media (prefers-reduced-motion: reduce) { .pbar { transition: none; } }

/* ── Accounts: sign in, sign up, recovery ─────────────────────── */
.field { display: grid; gap: 6px; }
.field input, .field select, .note-form textarea, .admin-toolbar input, .admin-toolbar select, dialog input {
  height: 46px; border: 1px solid var(--stroke-strong); border-radius: 12px; background: var(--input-fill);
  padding: 0 14px; font-size: 16px; width: 100%; color: var(--text-1); }
.field input:focus, .field select:focus, .note-form textarea:focus, .admin-toolbar input:focus, dialog input:focus { outline: 2px solid var(--t-azure); outline-offset: 1px; border-color: transparent; }
.fine { font-size: 12.5px; color: var(--text-3); margin: 0; }
.err { color: var(--t-coral); font-size: 13.5px; min-height: 18px; }
.err:empty { min-height: 0; }
.auth-links a, .auth-alt a, .fine a, .site-doc a, .linklike { color: var(--t-azure); text-decoration: underline; text-underline-offset: 2px; }

/* ── In the app: account box, banners, walls, Account view ────── */
.account-btns, .row-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.signup-wall { display: grid; gap: 14px; padding-top: 24px; }
.signup-wall .free-try { margin: 4px 0 18px; color: var(--text-2); }
.signup-wall .free-try p { margin: 0 0 6px; }
.signup-wall .free-try ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.wall-card { padding: 24px; display: grid; gap: 12px; }
.wall-card h2 { font-size: 20px; }
.wall-card ul { margin: 0; padding-left: 20px; color: var(--text-2); display: grid; gap: 4px; }
.wall-card .actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.account { display: grid; gap: 18px; }
.btn.danger:hover { background: var(--redpen-soft); }
.btn.danger { border-color: var(--t-coral); color: var(--t-coral); }

/* ── Public pages (course, lesson overviews, privacy, terms) ──── */
.site { min-height: 100vh; display: flex; flex-direction: column; }
.site-head, .admin-head { display: flex; align-items: center; gap: 18px; padding: 16px clamp(16px, 4vw, 40px); border-bottom: 1px solid var(--divider); }
.site-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; margin-right: auto; }
.site-brand .mark { width: 32px; height: 32px; flex: none; }
.site-nav { display: flex; align-items: center; gap: 18px; font-size: 14.5px; }
.site-nav a:not(.btn) { color: var(--text-2); white-space: nowrap; }
.site-main { flex: 1; width: min(860px, 100%); margin: 0 auto; padding: 40px 16px 64px; display: grid; gap: 28px; align-content: start; }
.site-hero h1, .site-lesson h1, .site-doc h1 { font-size: clamp(30px, 5vw, 44px); letter-spacing: -1px; margin: 6px 0 12px; }
.site-lede { font-size: 18px; color: var(--text-2); line-height: 1.55; }
.site-hero p, .site-lesson > p { margin: 0 0 14px; }
.site-meta { color: var(--text-3); font-size: 14px; }
.site-lesson h2, .site-doc h2 { font-size: 20px; margin: 26px 0 8px; }
.site-lesson ul, .site-doc ul { padding-left: 22px; line-height: 1.6; color: var(--text-2); }
.site-doc p, .site-lesson p { line-height: 1.65; color: var(--text-2); }
.site-free { display: inline-block; font: 700 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-signal); border: 1px solid var(--signal-line); border-radius: var(--r-pill); padding: 2px 8px; vertical-align: 2px; }
.site-phase h2 { font-size: 24px; margin: 4px 0; }
.site-sub { color: var(--text-3); margin: 0 0 10px; }
.site-lessons { margin: 0; padding-left: 24px; display: grid; gap: 8px; }
.site-lessons li span:last-child { display: block; color: var(--text-3); font-size: 14px; }
.site-lessons a { font-weight: 600; }
.site-foot { display: flex; gap: 6px 18px; flex-wrap: wrap; align-items: center; justify-content: center; padding: 20px 16px; border-top: 1px solid var(--divider); font-size: 13px; color: var(--text-3); }
.site-foot a { display: inline-block; padding: 4px 0; color: var(--text-3); }
.site-foot a.site-foot-partner { display: inline-flex; align-items: center; gap: 8px; }
.site-foot-partner img { display: block; height: 22px; width: auto; }

/* ── Admin console ────────────────────────────────────────────── */
.admin-tabs a, .site-brand, .site-nav a, .crumb a { text-decoration: none; }
.fig { padding: 16px 18px; border-right: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.bars { display: grid; grid-template-columns: repeat(30, 1fr); gap: 3px; align-items: end; height: 120px; }
.bar { height: 100%; display: flex; align-items: flex-end; }
.bar span { display: block; width: 100%; min-height: 2px; background: var(--t-azure); border-radius: 3px 3px 0 0; }
.chip { display: inline-block; font: 700 10.5px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; border: 1px solid var(--stroke-strong); border-radius: var(--r-pill); padding: 2px 8px; color: var(--text-2); width: max-content; }
.ok { color: var(--t-signal); font-size: 12.5px; }
.warn { color: var(--t-amber); font-size: 12.5px; }
.facts { display: grid; grid-template-columns: 150px 1fr; gap: 8px 16px; margin: 0; font-size: 14px; }
.facts dt { color: var(--text-3); }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.phase-bars { display: grid; gap: 10px; }
.pb { display: grid; grid-template-columns: 170px 1fr 52px; gap: 10px; align-items: center; font-size: 13.5px; }
.note { border-top: 1px solid var(--divider); padding-top: 10px; }
.note p { margin: 4px 0 0; white-space: pre-wrap; }

@media (max-width: 900px) {
        .pb { grid-template-columns: 120px 1fr 44px; }
}
@media (max-width: 600px) {
  .site-nav a:not(.btn, [href="/login"]) { display: none; }
    .facts { grid-template-columns: 1fr; gap: 2px 0; }
  .facts dd { margin-bottom: 8px; }
      .btn.small, .admin-tabs a, .auth-tabs a { min-height: 44px; }
}

/* ── Wide screens: use the room ───────────────────────────────── */
/* Pages grow with the window. Lesson prose keeps a readable line length (about 75 characters) while
   code cells, widgets and tables use the full lesson width. Measured in em: Geist's "0" is wide,
   so 80ch came to about 900px, over 100 characters a line. */
.page { max-width: 1920px; padding-left: clamp(24px, 3vw, 56px); padding-right: clamp(24px, 3vw, 56px); }
.narrow { max-width: 1040px; }
.lesson-head, .lesson-body, .lesson-notes, .lesson-pager { max-width: 1400px; }
.lesson-body .prose > :is(p, ul, ol, blockquote, h2, h3, h4), .lesson-content .prose > :is(p, ul, ol, blockquote, h2, h3, h4) { max-width: 35em; }
.lesson-shell { grid-template-columns: minmax(0, 1fr) clamp(380px, 25vw, 520px); }
/* A lesson's first screen (lib/first-screen.mjs) with the tutor on: its column waits only where the panel starts open. */
@media (max-width: 1080px) { .lesson-shell.tutor-starts-open { grid-template-columns: minmax(0, 1fr); } }
.account { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); align-items: start; }
.site-main { width: min(1920px, 100%); padding-left: clamp(16px, 3vw, 48px); padding-right: clamp(16px, 3vw, 48px); }
.site-hero .site-lede { max-width: 70ch; }
.site-phases { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 24px; align-items: start; }
.site-phase { padding: 22px 24px; }
.site-baby { margin-top: 24px; padding: 22px 24px; }
.site-baby h2 { font-size: 24px; margin: 4px 0; }
.site-stages { margin: 12px 0; padding-left: 22px; display: grid; gap: 10px; }
.site-stages li span:last-child { display: block; color: var(--text-2); font-size: 14.5px; }
.site-lesson-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.site-lesson-grid > aside { display: grid; gap: 18px; }
.site-lesson-grid > aside section { padding: 20px 22px; }
.site-term { max-width: 820px; }
.cert { max-width: 760px; margin: 12px auto 0; padding: clamp(28px, 6vw, 64px); text-align: center; border-width: 2px; }
.cert-lead { margin: 18px 0 4px; color: var(--text-2); }
.cert-name { font-size: clamp(32px, 6vw, 52px); margin: 6px 0; }
.cert-title { font-size: clamp(20px, 3.4vw, 28px); margin: 6px 0 12px; }
.cert-sub { margin: 0 0 14px; color: var(--text-2); }
.cert-detail { color: var(--text-2); }
.cert-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 32px; margin: 28px 0 0; }
.cert-meta dt { font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.cert-meta dd { margin: 4px 0 0; word-break: break-all; }
.cert-note { margin-top: 26px; font-size: 13.5px; color: var(--text-3); }
.cert-cta { text-align: center; margin-top: 22px; }
@media print { .site-head, .site-foot, .cert-cta, .cert-note { display: none; } .cert { border: 2px solid #999; box-shadow: none; } }
.site-term .eyebrow a { color: inherit; }
.site-term-lesson { padding: 20px 22px; margin: 26px 0; }
.site-term-lesson h2 { margin-top: 0; }
.site-term-list { padding-left: 20px; }
.site-term-list li { margin-bottom: 8px; }
.site-term-nav { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--divider); }
.site-lesson-grid > aside h2 { margin-top: 0; font-size: 17px; }
.site-lesson-grid ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14.5px; color: var(--text-2); }
.site-lesson-grid ol a { display: inline-block; padding: 3px 0; }
.site-lesson-grid ol a[aria-current] { color: var(--t-signal); font-weight: 700; }
@media (max-width: 760px) { .site-lesson-grid ol { gap: 2px; } .site-lesson-grid ol li { padding: 6px 0; } .site-lesson-grid ol a { display: inline-block; padding: 4px 0; } }
.site-lesson .site-main-col p, .site-doc { max-width: 80ch; }
/* A lesson's text on its public page (lib/lesson-html.mjs), and the wall before the rest of a locked one. */
.site-lesson-text { margin-top: 26px; }
.site-lesson-text.lesson-locked { margin-top: 1em; }
.site-lesson .site-lesson-text h2 { font-size: 24px; line-height: 1.25; margin: 1.6em 0 0.4em; }
.site-lesson .site-lesson-text h3 { font-size: 18px; margin: 1.3em 0 0.3em; }
.site-lesson .site-lesson-text :is(p, li) { color: var(--text-1); }
.site-lesson .site-lesson-text > :is(.example, .check, .site-try, .site-lesson-live) { margin-top: 1.6em; }
.site-lesson-grid .site-lesson-text ol { display: block; margin: 0; padding-left: 1.3em; font-size: inherit; color: inherit; }
.site-lesson-grid .site-lesson-text ol li { padding: 0; }
.site-lesson-grid .site-lesson-text .site-check-options { display: grid; gap: 6px; padding-left: 24px; list-style: upper-alpha; }
.site-check-answer > summary { cursor: pointer; font-weight: 600; color: var(--t-azure); }
.site-check-answer > p { margin: 8px 0 0; }
.site-lesson-live { padding: 12px 16px; border: 1px dashed var(--stroke-strong); border-radius: 12px; }
.site-lesson-live .site-try-note { margin: 4px 0 0; }
.site-wall { margin-top: 28px; padding: clamp(20px, 3vw, 28px); display: grid; gap: 10px; }
.site-lesson .site-wall h2 { margin: 0; font-size: 24px; line-height: 1.25; }
.site-lesson .site-wall h3 { margin: 10px 0 0; font-size: 15px; }
.site-wall ul { margin: 0; }
.site-wall .site-cta { margin: 10px 0 0; }
.site-wall .site-meta { margin: 0; }
.site-lesson-practice { margin-top: 28px; padding: 20px 22px; }
.site-lesson .site-lesson-practice h2 { margin-top: 0; }
.site-lesson-practice .site-cta { margin: 12px 0 0; }
/* Interactive explainers: /explain/<slug>, and the two widgets made for them (widgets/gpt.js, playground.js). */
.site-explain > * + * { margin-top: 1.5em; }
.site-explain-figure { margin: 1.5em 0 0; }
.site-explain-live { min-height: 260px; }
/* Room for what's coming, so the text below doesn't jump when a large widget arrives. */
.site-explain-live[data-widget="gpt"] { min-height: 1040px; }
.site-explain-live[data-widget="playground"] { min-height: 520px; }
@media (max-width: 560px) { .site-explain-live[data-widget="gpt"] { min-height: 1180px; } .site-explain-live[data-widget="playground"] { min-height: 900px; } }
.site-explain-figure figcaption { margin-top: 8px; font-size: 14.5px; line-height: 1.5; color: var(--text-3); max-width: 80ch; }
.site-lesson .site-explain .prose h2 { font-size: 22px; margin: 1.4em 0 0.4em; }
.site-lesson .site-explain .prose :is(p, li) { color: var(--text-1); }
.site-lesson-grid .site-explain .prose ol { display: block; margin: 0; padding-left: 1.3em; font-size: inherit; color: inherit; }
.site-lesson-grid .site-explain .prose ol li { padding: 0; }
.site-lesson .site-explain .site-lesson-practice ul { margin: 0 0 10px; }
.gptw, .pgw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 16px; min-width: 0; }
.attn-token.gpt-preset { min-height: 44px; text-align: left; }
.gpt-input { width: 100%; padding: 10px 12px; border: 1px solid var(--stroke-strong); border-radius: 10px; font: 500 15px var(--font-ui); color: var(--text-1); background: transparent; }
.gpt-tokens { display: flex; flex-wrap: wrap; gap: 6px; }
.gpt-token { padding: 2px 8px; border: 1px solid var(--stroke); border-radius: 6px; font: 500 13px var(--font-mono); color: var(--text-1); background: var(--subtle-fill); }
.gpt-token.unknown { border-color: var(--coral); background: var(--redpen-soft); }
.gpt-notice:empty { display: none; }
.gpt-head { margin: 8px 0 0; font-size: 15px; color: var(--text-1); }
.pg-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.pg-stage { position: relative; width: 100%; aspect-ratio: 1; overflow: hidden; border: 1px solid var(--stroke); border-radius: 12px; }
.pg-field, .pg-dots { position: absolute; inset: 0; width: 100%; height: 100%; }
.pg-side { display: grid; gap: 10px; min-width: 0; }
.pg-curve { display: block; width: 100%; height: 70px; border: 1px solid var(--stroke); border-radius: 8px; }
.pg-key::before { content: ""; display: inline-block; width: 12px; height: 3px; margin-right: 5px; vertical-align: middle; background: #174bff; }
.pg-key.test { margin-left: 8px; }
.pg-key.test::before { background: #d67614; }
.pg-status:empty { display: none; }
@media (max-width: 560px) { .pg-view { grid-template-columns: minmax(0, 1fr); } }
/* Deeper glossary pages: /glossary/<slug>, for the terms in public/content/glossary-deep.js. */
.site-term-deep { display: grid; gap: 12px; }
.site-term-deep > * { min-width: 0; margin: 0; }
.site-lesson .site-term-deep h2 { margin: 16px 0 0; font-size: 22px; line-height: 1.3; }
.site-lesson .site-term-deep .prose :is(p, li) { color: var(--text-1); }
.site-term-deep .prose > :first-child { margin-top: 0; }
.site-term-deep .prose > :last-child { margin-bottom: 0; }
/* Project tutorials: /tutorials/<slug>. */
.tut-step, .tut-after { margin-top: 30px; }
.tut-step:first-child { margin-top: 10px; }
.site-lesson .tut-step h2, .site-lesson .tut-after h2 { margin: 0 0 10px; font-size: 22px; line-height: 1.3; }
.site-lesson .tut-after h2 + ul, .site-lesson .tut-after .prose + h2 { margin-top: 18px; }
.site-lesson .tut-step h3 { margin: 18px 0 6px; font-size: 16px; }
.site-lesson .tut-step .prose :is(p, li), .site-lesson .tut-after .prose :is(p, li) { color: var(--text-1); }
.tut-step .prose { margin-bottom: 12px; }
.tut-step .code-wrap + .prose, .tut-output + .prose { margin: 12px 0 0; }
.tut-output { margin: 10px 0 0; }
.tut-output figcaption { margin-bottom: 4px; font-size: 13px; font-weight: 600; color: var(--text-3); }
.tut-output pre { margin: 0; padding: 12px 16px; overflow-x: auto; border: 1px solid var(--stroke); border-radius: 12px; background: var(--subtle-fill); color: var(--text-1); font: 500 13px/1.6 var(--font-code); white-space: pre; }
.tut-practice { margin-top: 30px; }
.tut-full { margin-top: 18px; }
.tut-full .code-wrap { margin-top: 10px; }
.tut-full pre.code { max-height: 640px; overflow-y: auto; }
/* The AI engineer roadmap: /roadmap/ai-engineer. */
.site-roadmap { display: grid; gap: 22px; width: min(900px, 100%); margin-inline: auto; }
.site-roadmap > * { margin: 0; min-width: 0; }
.site-roadmap h2 { margin: 0 0 12px; }
.site-roadmap h1 { margin-bottom: 0; }
.rm-plan { display: grid; gap: 14px; padding: 20px 22px; }
.rm-plan h2 { margin: 0; font-size: 22px; }
.rm-plan p { margin: 0; }
.rm-group { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rm-label { flex-basis: 100%; font-size: 14px; color: var(--text-3); }
.rm-choice { min-width: 44px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--stroke-strong); border-radius: 10px; background: transparent; color: var(--text-1); font: 500 15px var(--font-ui); cursor: pointer; }
.rm-choice:hover { border-color: var(--accent); }
.rm-choice[aria-pressed="true"] { border-color: var(--accent); background: var(--accent); color: #fff; }
.rm-result { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--text-1); }
.rm-num { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); color: #fff; font: 600 13px var(--font-ui); }
.rm-glance { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.rm-glance a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border: 1px solid var(--stroke); border-radius: 10px; color: var(--text-1); font-weight: 500; text-decoration: none; }
.rm-glance a:hover { border-color: var(--accent); }
.rm-glance li[data-skip="all"] a { color: var(--text-3); text-decoration: line-through; }
.rm-glance li[data-skip="all"] .rm-num, .rm-stage[data-skip="all"] .rm-num { background: var(--stroke-strong); color: var(--text-2); }
.rm-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.rm-head h2 { margin: 0; }
.rm-stages { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.rm-stages::before { content: ""; position: absolute; top: 18px; bottom: 18px; left: 13px; width: 2px; background: var(--stroke-strong); }
.rm-stage { position: relative; padding-left: 42px; scroll-margin-top: 16px; }
.rm-stage > .rm-num { position: absolute; top: 18px; left: 0; }
.rm-card { display: grid; gap: 8px; padding: 18px 20px; }
.rm-card > * { margin: 0; min-width: 0; }
.rm-card h3 { font-size: 19px; line-height: 1.3; }
.rm-stage[data-skip="all"] .rm-card > :not(h3, .rm-size) { display: none; }
.rm-stage[data-skip="all"] .rm-card { opacity: 0.7; }
.rm-card .rm-tracks { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.rm-tracks li { padding: 2px 10px; border-radius: 999px; background: var(--subtle-fill); color: var(--text-2); font-size: 13.5px; line-height: 1.6; }
.rm-project, .rm-more { font-size: 15px; color: var(--text-2); }
.rm-lessons { margin: 8px 0 0; padding-left: 24px; columns: 2 280px; column-gap: 28px; font-size: 14.5px; color: var(--text-2); }
.rm-lessons li { padding: 3px 0; break-inside: avoid; }
.site-roadmap .rm-qa h3 { margin: 22px 0 6px; font-size: 18px; }
.site-roadmap .rm-qa p { margin: 0; color: var(--text-1); line-height: 1.6; }
.rm-routes { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
.rm-routes-wrap > p { margin: 0 0 12px; }
.rm-routes-wrap > p:last-child { margin: 12px 0 0; }
.rm-end p:last-child { margin-bottom: 0; }
@media print {
  .site-head, .site-foot, .rm-plan, .site-cta, .rm-print, .rm-end { display: none !important; }
  .rm-card { padding: 8px 0; border: 0; box-shadow: none; background: none; }
  .rm-head { break-after: avoid; }
  .rm-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}
/* Interview questions: /questions/<slug>. */
.site-qa { margin-top: 30px; }
.site-qa:first-child { margin-top: 10px; }
.site-lesson .site-qa h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.35; }
.site-qa .site-meta { margin: 10px 0 0; font-size: 14px; }
.site-lesson .site-qa .prose :is(p, li) { color: var(--text-1); }
.site-lesson .lesson-locked:has(> .site-qa) { margin-top: 30px; }
/* The named free courses: /courses, /courses/<slug>, and the short list on /course. */
/* Videos: the list at /videos and each video's own page */
.site-videos-group { margin-top: 44px; scroll-margin-top: 20px; }
.site-videos-group > h2 { margin: 0 0 6px; font-size: 24px; line-height: 1.25; letter-spacing: -0.01em; }
.site-videos-group > p { margin: 0 0 18px; max-width: 70ch; color: var(--text-2); line-height: 1.55; }
.site-video-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 20px; }
.site-video-card { display: grid; gap: 8px; align-content: start; padding: 0 0 18px; overflow: hidden; }
.site-video-card :is(h3, p) { margin: 0; padding: 0 18px; }
.site-video-card h3 { margin-top: 6px; font-size: 17px; line-height: 1.3; }
.site-video-card h3 a { color: inherit; text-decoration: none; }
.site-video-card h3 a:hover { text-decoration: underline; }
.site-video-card p { color: var(--text-2); font-size: 15px; line-height: 1.5; }
.site-video-frame { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #1447ff; }
.site-video-frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.site-video-play { position: absolute; left: 12px; bottom: 12px; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; background: rgba(16, 24, 40, 0.82); color: #fff; transition: transform 160ms ease, background-color 160ms ease; }
.site-video-frame:hover .site-video-play, .site-video-frame:focus-visible .site-video-play { background: #101828; transform: scale(1.07); }
.site-video-time { position: absolute; right: 10px; bottom: 10px; padding: 2px 7px; border-radius: 6px; background: rgba(16, 24, 40, 0.82); color: #fff; font: 600 12.5px var(--font-mono); font-variant-numeric: tabular-nums; }
.site-video-player { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #101828; }
.site-video-watch .site-video-player { border-radius: 12px; }
.site-video-watch .site-cta { margin: 18px 0 0; }
.site-video-watch aside .site-course-links { margin-bottom: 12px; }
.site-video-text { margin-top: 28px; max-width: 70ch; }
.site-video-text h2 { margin: 0 0 8px; font-size: 20px; }
.site-video-text p { margin: 0 0 10px; color: var(--text-2); line-height: 1.6; }
.site-videos-next { margin-top: 44px; padding: 24px 26px; }
.site-videos-next h2 { margin: 0 0 6px; font-size: 22px; }
.site-videos-next p { margin: 0 0 14px; color: var(--text-2); }
.site-videos-next .site-cta { margin: 0; }
@media (prefers-reduced-motion: reduce) { .site-video-play { transition: none; } }

.site-course-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.site-course-card { padding: 20px 22px; display: grid; gap: 8px; align-content: start; }
.site-course-card :is(h2, h3) { margin: 0; font-size: 20px; line-height: 1.3; }
.site-course-card p { margin: 0; color: var(--text-2); line-height: 1.55; }
.site-courses-short { margin: 8px 0 32px; }
.site-courses-short > h2, .site-phases-title { font-size: 22px; margin: 0 0 14px; }
.site-course-links { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14.5px; }
.site-course-links li { padding: 3px 0; }
.site-faq { margin: 0; display: grid; gap: 4px; }
.site-faq dt { margin-top: 12px; font-weight: 600; color: var(--text-1); }
.site-faq dd { margin: 0; line-height: 1.6; color: var(--text-2); max-width: 80ch; }
/* A look inside a lesson on its public page: outline, a code example, a quiz question, prev/next. */
.site-outline { margin: 0; padding-left: 22px; display: grid; gap: 4px; color: var(--text-2); line-height: 1.5; }
.site-code-wrap { margin: 0; }
.site-code-wrap figcaption { margin-top: 6px; font-size: 13px; color: var(--text-3); }
.site-code { margin: 0; padding: 14px 16px; overflow-x: auto; background: var(--code-bg); border: 1px solid var(--stroke); border-radius: 12px;
  font: 13.5px/1.6 var(--font-code); color: var(--text-1); }
.site-quiz { padding: 18px 20px; display: grid; gap: 12px; }
.site-quiz .site-quiz-q { margin: 0; font-weight: 600; color: var(--text-1); }
.site-quiz-options { margin: 0; padding-left: 22px; display: grid; gap: 6px; color: var(--text-2); list-style: upper-alpha; }
.site-quiz .site-meta { margin: 0; }
.site-lesson code { font-family: var(--font-code); font-size: 0.9em; }
.site-pager { margin-top: 28px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.site-pager a { display: grid; gap: 4px; padding: 14px 16px; text-decoration: none; color: var(--text-2); font-size: 14px; }
.site-pager a[rel="next"] { text-align: right; }
.site-pager strong { color: var(--text-1); font-size: 15px; }
@media (max-width: 640px) { .site-pager { grid-template-columns: 1fr; } .site-pager a[rel="next"] { text-align: left; } }
.site-doc { margin: 0 auto; width: 100%; }
@media (max-width: 960px) {
      .site-lesson-grid { grid-template-columns: minmax(0, 1fr); }
}
/* Grid items default to min-width: auto, so one long code line could widen the whole page. */
.site-main > *, .site-lesson-grid > * { min-width: 0; }
.site-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.site-excerpt { margin: 0 0 22px; padding: 2px 0 2px 16px; border-left: 3px solid var(--stroke-strong); }
.site-excerpt p { margin: 0 0 6px; }
.site-excerpt footer { font-size: 14px; color: var(--text-3); }
.site-try { margin-top: 26px; }
.btn[data-loading] { position: relative; }
.btn[data-loading]::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.6; animation: btn-pulse 1.2s ease-in-out infinite; }
@keyframes btn-pulse { 50% { opacity: 0.15; } }
@media (prefers-reduced-motion: reduce) { .btn[data-loading]::after { animation: none; } }
.site-try .site-try-live { min-height: 360px; }
.site-try .site-try-live.compact { min-height: 0; }
.site-search { display: flex; gap: 8px; margin-top: 16px; max-width: 520px; align-items: center; flex-wrap: wrap; }
.site-search input { flex: 1 1 240px; min-height: 44px; padding: 8px 14px; border: 1px solid var(--stroke-strong); border-radius: 12px; font: inherit; font-size: 16px; background: var(--input-fill); color: var(--text-1); }
.site-search input:focus { outline: 2px solid var(--t-signal); outline-offset: 1px; }
.site-search output { flex-basis: 100%; font-size: 14px; color: var(--text-3); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
details.site-fold > summary { cursor: pointer; list-style: none; color: var(--text-3); font-size: 14px; margin: 0 0 10px; }
details.site-fold > summary::-webkit-details-marker { display: none; }
details.site-fold > summary::before { content: "▸"; display: inline-block; width: 1em; transition: transform .15s; }
details.site-fold[open] > summary::before { transform: rotate(90deg); }
details.site-fold > summary h2 { display: inline; }
.glossary-entry { display: contents; }
@media (max-width: 640px) { details.site-fold > summary { min-height: 44px; display: flex; align-items: center; gap: 6px; } }
.site-try .site-try-note { margin: 10px 0 0; font-size: 14.5px; color: var(--text-3); }
.site-try-start { display: grid; gap: 12px; justify-items: start; padding: 18px 20px; }
.site-try-next { margin-top: 14px; padding: 14px 16px; display: grid; gap: 10px; justify-items: start; border: 1px solid var(--stroke); border-radius: 12px; background: var(--subtle-fill); }
.site-try-next p { margin: 0; color: var(--text-2); }
.site-quiz .option { width: 100%; }
.site-quiz-q, .site-quiz-answer, .site-quiz .option, .site-quiz-options li { overflow-wrap: anywhere; }
.site-quiz-answer { margin: 0; color: var(--text-2); }
.site-teach { padding: 20px 22px; margin: 26px 0 0; }
.site-teach h2 { margin-top: 0; }
.site-lesson-grid > aside .site-teach { margin: 0; }

/* ── Accessibility layer: glossary terms, optional depth, plain-words help ── */
.term { text-decoration: underline dotted; text-decoration-color: var(--t-azure); text-underline-offset: 3px; text-decoration-thickness: 1.5px; cursor: help; border-radius: 4px; }
.term:hover, .term:focus-visible { background: var(--subtle-fill); outline: none; }
.term:focus-visible { box-shadow: 0 0 0 2px var(--t-azure); }
.term-pop { position: absolute; z-index: 80; padding: 14px 16px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.5; border-radius: 14px; background: var(--surface-elevated); border: 1px solid var(--stroke-strong); box-shadow: 0 12px 30px var(--shadow); }
.term-pop .term-name { font: 700 12px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--t-azure); }
.term-pop p { margin: 0; color: var(--text-1); }
.term-pop .term-links { display: flex; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.term-pop .term-links a { color: var(--t-azure); text-decoration: underline; text-underline-offset: 2px; }
details.deeper { margin: 1em 0; border: 1px solid var(--stroke); border-radius: 14px; background: var(--subtle-fill); max-width: 100%; }
details.deeper > summary { cursor: pointer; padding: 12px 16px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: center; }
details.deeper > summary::-webkit-details-marker { display: none; }
details.deeper > summary::after { content: "Show"; margin-left: auto; font: 600 12px var(--font-mono); color: var(--text-3); }
details.deeper[open] > summary::after { content: "Hide"; }
details.deeper > :not(summary) { margin-left: 16px; margin-right: 16px; }
details.deeper[open] { padding-bottom: 8px; }
.deeper-tag { font: 700 11px var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--t-violet, var(--t-azure)); border: 1px solid var(--stroke-strong); border-radius: var(--r-pill); padding: 2px 8px; }
.explain-btn { margin-top: 10px; background: none; border: 0; padding: 4px 0; font-size: 13.5px; font-weight: 600; color: var(--t-azure); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.explain-btn:hover { color: var(--text-1); }
.lesson-feedback { max-width: 1400px; margin: 0 auto 18px; padding: 18px 22px; display: grid; gap: 10px; }
.lesson-feedback p { margin: 0; }
.lesson-feedback textarea { width: 100%; max-width: 640px; border: 1px solid var(--stroke-strong); border-radius: 12px; background: var(--input-fill); padding: 10px 14px; font: 15px/1.5 var(--font-ui); color: var(--text-1); resize: vertical; }
.funnel { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 13.5px; white-space: nowrap; }
.funnel b { font-variant-numeric: tabular-nums; }
.hotspots { margin: 0; padding-left: 16px; font-size: 13.5px; }
.hotspots li { margin-bottom: 4px; }
.glossary-letters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.glossary-letters a { display: inline-grid; place-items: center; min-width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--stroke-strong); font-weight: 700; text-decoration: none; }
.glossary-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 520px), 1fr)); gap: 8px 40px; }
.glossary-letter h2 { font-size: 26px; border-bottom: 1px solid var(--divider); padding-bottom: 6px; }
.glossary-letter dl { margin: 0; }
.glossary-letter dt { font-weight: 700; margin-top: 14px; scroll-margin-top: 20px; }
.glossary-letter dd { margin: 4px 0 0; color: var(--text-2); line-height: 1.55; }
.glossary-letter dd a { font-size: 13.5px; color: var(--t-azure); overflow-wrap: anywhere; }
.lesson-feedback, .lesson-notes { width: auto; }
@media (max-width: 680px) { .lesson-feedback { margin-left: 16px; margin-right: 16px; } }

/* ══ Index Ai Academy design system (shared with IndexHalo, design.md) ═══════════════════════
   White surfaces, near-black ink #101828, secondary #475467, neutral surface #F7F8FA, dividers
   #E4E7EC/#D0D5DD, one focal accent: cobalt #174BFF (hover #1238BF). Geist Variable type
   (self-hosted, SIL OFL 1.1, public/fonts/LICENSE-geist.txt); monospace only for literal code.
   Flat: 12px panels, 8px controls, no glows, gradients or glass. This layer overrides the older
   dark "learning terminal" look above. */
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-latin-var.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/fonts/geist-latin-ext-var.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root, :root[data-theme="light"], :root[data-theme="dark"] {
  --accent: #174bff;
  --accent-hover: #1238bf;
  --accent-soft: rgba(23, 75, 255, 0.07);
  --signal: #174bff;
  --azure: #174bff;
  --violet: #6d28d9;
  --coral: #b42318;
  --amber: #b45309;
  --t-signal: #174bff;
  --t-azure: #174bff;
  --t-violet: #6d28d9;
  --t-coral: #b42318;
  --t-amber: #b45309;
  --positive: #007f73;

  --canvas: #ffffff;
  --canvas-raised: #f7f8fa;
  --surface: #ffffff;
  --surface-elevated: #ffffff;
  --glass: #ffffff;
  --glass-strong: #ffffff;
  --text-1: #101828;
  --text-2: #475467;
  --text-3: #667085;
  --text-4: #98a2b3;
  --stroke: #e4e7ec;
  --stroke-strong: #d0d5dd;
  --stroke-hi: #e4e7ec;
  --divider: #eaecf0;
  --subtle-fill: #f2f4f7;
  --input-fill: #ffffff;
  --rail-fill: #f2f4f7;
  --shadow: rgba(16, 24, 40, 0.12);
  --grid-line: transparent;
  --grid-major: transparent;
  --on-signal: #ffffff;
  --code-bg: #f7f8fa;
  --code-ink: #101828;
  --hl-keyword: #6d28d9;
  --hl-string: #006e64;
  --hl-number: #9a3412;
  --hl-comment: #667085;
  --hl-builtin: #174bff;
  --hl-def: #be185d;
  --marker: rgba(23, 75, 255, 0.08);
  --marker-strong: #174bff;
  --signal-soft: rgba(23, 75, 255, 0.07);
  --signal-line: rgba(23, 75, 255, 0.35);
  --redpen-soft: rgba(180, 35, 24, 0.07);

  --grad-signal: linear-gradient(#174bff, #174bff);
  --grad-spectral: linear-gradient(#174bff, #174bff);
  --grad-active: linear-gradient(#174bff, #174bff);

  --font-ui: "Geist Variable", "Geist Fallback", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-code: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
  /* Labels used the mono stack; in this design labels are Geist and only code is monospace. */
  --font-mono: var(--font-ui);

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 12px;
  --sidebar-w: 224px;
  color-scheme: light;
}

body { background: #ffffff; color: var(--text-1); font: 400 15px/1.55 var(--font-ui); }
body::before, body::after { display: none; }

/* Literal machine text stays monospace */
code, pre, kbd, samp, .editor, .out, .terminal, .jsonw, .code-list, .quiz textarea.answer.code, .quiz input.answer.code, .prose code, pre.code, .stepper pre, .httpw select, .httpw input, .httpw textarea {
  font-family: var(--font-code);
}

/* Flat surfaces */
.glass { background: #ffffff; border: 1px solid var(--stroke); border-radius: 12px; -webkit-backdrop-filter: none; backdrop-filter: none; }
dialog { border-radius: 12px; box-shadow: 0 20px 48px var(--shadow); }
dialog::backdrop { background: rgba(16, 24, 40, 0.4); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* Controls: 8px radius, cobalt is the one primary colour */
.btn { border-radius: 8px; background: #ffffff; border: 1px solid var(--stroke-strong); color: var(--text-1); box-shadow: none; }
.btn:hover { background: #f7f8fa; border-color: var(--stroke-strong); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #ffffff; box-shadow: none; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); filter: none; box-shadow: none; }
.btn.quiet { background: transparent; border-color: transparent; color: var(--text-2); }
.btn.quiet:hover { background: #f2f4f7; color: var(--text-1); }
.btn.danger { background: #ffffff; border-color: #fda29b; color: #b42318; }
.icon-btn { border-radius: 8px; }
.seg { border-radius: 8px; background: #f2f4f7; border-color: var(--stroke); }
.seg button, .auth-tabs a, .admin-tabs a { border-radius: 6px; }
.seg button[aria-pressed="true"], .auth-tabs a[aria-pressed="true"], .admin-tabs a[aria-pressed="true"], .httpw .presets button[aria-pressed="true"], .chip.toggle[aria-pressed="true"] {
  background: #ffffff; color: var(--text-1); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.08), 0 0 0 1px var(--stroke);
}
.switch:checked { background: var(--accent); }
input:focus-visible, textarea:focus-visible, select:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Sidebar: pale grey, neutral icons, cobalt for the active route */
.sidebar { background: #f7f8fa; border-right: 1px solid var(--stroke); -webkit-backdrop-filter: none; backdrop-filter: none; padding: 18px 12px 14px; gap: 18px; }
.nav a { color: var(--text-2); border-radius: 8px; font-weight: 500; }
.nav a svg { width: 16px; height: 16px; stroke-width: 1.75; }
.nav a:hover { background: #eaecf0; color: var(--text-1); }
.nav a[aria-current="page"] { background: var(--accent-soft); color: var(--accent); box-shadow: none; font-weight: 600; }
.nav a[aria-current="page"] .badge { background: var(--accent); color: #ffffff; }
.brand .name { font: 600 14px/1.15 var(--font-ui); letter-spacing: 0; color: var(--text-1); }
.brand .tag { font: 500 11px var(--font-ui); letter-spacing: 0.02em; color: var(--text-3); }

/* Labels: Geist, quiet, no tracking-heavy mono */
.eyebrow, .fig-l, .site-tag, .chip, .site-free, .term-name, .deeper-tag, .admin-table th, .sidebar-foot .ver, .bars-axis, .note-meta, .pb-n {
  font-family: var(--font-ui); letter-spacing: 0.02em;
}
.eyebrow { font-size: 12px; font-weight: 600; color: var(--text-2); text-transform: none; }

/* No glows anywhere */
.meter span, .track-dots .fill, .track-dots i.done, .node.known .dot, .node.selected, .node.next, .quiz-progress i.right, .progress-line span,
.course-card.current, .indexviz .box.in .cell-v, .terminal-tasks .task.current .m, .pipe-block.new, .baby-output .ch.sel, .timeline li.now .dot,
.baby-card.grow.ready, .hero-card ul.objectives li::before, .btn.primary:hover, .term-pop {
  box-shadow: none;
}
.node.selected { outline: 2px solid var(--accent); outline-offset: 1px; }
.node.next { outline: 2px solid var(--amber); outline-offset: 1px; }
.meter span { background: var(--accent); }

/* Section trays (IndexHalo): grouped content sits on the neutral surface */
.admin-lead h1, .site-hero h1, .site-lesson h1, .site-doc h1 { letter-spacing: -0.02em; }
.term { text-decoration-color: var(--accent); }
.prose blockquote.callout-plain { --tint: var(--accent); --tint-text: var(--accent); }
.prose a, .auth-links a, .auth-alt a, .fine a, .site-doc a, .crumb a, .linklike, .glossary-letter dd a, .term-pop .term-links a { color: var(--accent); }
.terminal { background: #101828; color: #f2f4f7; }

/* Phones: iOS zooms the page when a field under 16px gets focus, so touch screens get 16px fields.
   The code editor's textarea sits over its highlighted text, so the whole editor grows with it.
   !important because this has to beat every field's own size, in this file and the React layers. */
@media (pointer: coarse) {
  input:not([type="checkbox"], [type="radio"], [type="range"]), textarea, select, .editor { font-size: 16px !important; }
}

/* Narrow screens: the tutor button shrinks to its icon so it covers less of the lesson. */

/* The lesson page's frame is React (web/src/views/lesson.tsx) with its own spacing, so the notes
   and feedback panels mounted inside it drop their page-level margins. */
.lesson-panel .lesson-notes, .lesson-panel .lesson-feedback { max-width: none; margin: 0; padding-left: 0; padding-right: 0; }
.lesson-panel .lesson-notes { padding-bottom: 0; }
.lesson-panel .lesson-feedback { padding: 18px 22px; }

/* Lesson content on the design system: plain Geist labels (no tracked capitals), neutral tags, one
   accent. Covers what public/js/lesson and the widgets draw inside the React lesson page. */
.cell .cell-bar .lbl, .out-label, .widget-frame > header .k, .hint .n, .stepper .state h3, .indexviz label,
.httpw .sub, .msgw label, .mrow > .sl, .mslider .sl, .prose th, .deeper-tag, .term-pop .term-name,
.question .qmeta, .flash .face .from, .tutor > header .t {
  font: 500 12px/1.4 var(--font-ui); letter-spacing: 0; text-transform: none; color: var(--text-2);
}
.widget-frame > header .k { color: var(--text-3); }
.hint .n { color: var(--amber); font-weight: 600; }
.prose th { color: var(--text-2); }
.deeper-tag { border-color: var(--stroke); background: #f7f8fa; color: var(--text-2); padding: 1px 8px; }
.term-pop .term-name { font-weight: 600; color: var(--text-1); font-size: 13px; }
.explain-btn { color: var(--accent); }

/* Callouts: white with a coloured edge, not a tinted wash. The bold lead-in names the kind. */
.prose blockquote { background: #ffffff; border: 1px solid var(--stroke); border-left: 3px solid var(--tint); border-radius: 8px; }
.prose blockquote.callout-tip, .prose blockquote.callout-note, .prose blockquote.callout-plain { --tint: var(--accent); --tint-text: var(--accent); }
.prose blockquote.callout-marketers { --tint: var(--amber); --tint-text: var(--amber); }
.prose blockquote.callout-watch { --tint: var(--coral); --tint-text: var(--coral); }
.prose blockquote strong:first-child { color: var(--tint-text); }

/* Code-cell call frames (the stepper) and chat roles: neutral, not violet. */
.frame { border-color: var(--stroke); background: #f7f8fa; }
.frame .fn { color: var(--text-1); }
.msgw .turn .role { color: var(--text-2); }

/* The tutor panel */
.tutor { background: #ffffff; border-left: 1px solid var(--stroke); }
.tutor .avatar-tile { background: #f2f4f7; border: 1px solid var(--stroke); color: var(--accent); border-radius: 8px; width: 36px; height: 36px; }
.tutor .avatar-tile svg { width: 18px; height: 18px; }
.tutor > header .t { color: var(--text-3); }
.tutor > header .s { color: var(--text-1); }
.tutor .msg.user { background: var(--accent-soft); border-color: rgba(23, 75, 255, 0.2); border-radius: 12px 12px 4px 12px; }
.tutor .msg.assistant, .tutor .empty { border-radius: 12px; background: #ffffff; }
.tutor .suggest button { border-color: var(--stroke-strong); color: var(--text-1); }
.tutor .suggest button:hover { background: #f7f8fa; border-color: var(--text-4); }
.tutor textarea { border-radius: 8px; }
.tutor textarea:focus { border-color: var(--accent); }
.tutor .send { width: 40px; height: 40px; border-radius: 8px; background: var(--accent); color: #ffffff; box-shadow: none; }
.tutor .send:hover:not(:disabled) { background: var(--accent-hover); }

/* The second set of lesson widgets: walk-throughs, what-ifs, sorting, machine-learning playgrounds. */
.calcw { grid-template-columns: minmax(0, 1fr) !important; }
.calcw .mpanel { max-width: 560px; }
.calc-out { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--r-sm); background: var(--subtle-fill); font-size: 13.5px; }
.calc-out dt { color: var(--text-3); }
.calc-out dd { margin: 0; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-1); }
.calc-out .big { font-size: 15px; color: var(--text-1); }
.calc-out dd.big { font-size: 20px; color: var(--accent); }
.mathw .plane .tick { font-size: 12.5px; }

.sortw { display: grid; gap: 12px; padding: 18px; }
.sortw-prompt { margin: 0; font-weight: 600; }
.sortw-items { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sortw-item { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--divider); border-radius: var(--r-sm); background: #fff; }
.sortw-item.right { border-color: color-mix(in srgb, var(--t-signal) 55%, transparent); }
.sortw-item.wrong { border-color: color-mix(in srgb, var(--t-coral) 55%, transparent); }
.sortw-item .t { margin: 0; }
.sortw-item .why { margin: 0; font-size: 13.5px; color: var(--text-2); }
.sortw-choices { display: flex; flex-wrap: wrap; gap: 6px; }
.sortw-choice { min-height: 34px; padding: 4px 12px; border: 1px solid var(--stroke); border-radius: 999px; background: #fff; color: var(--text-1); font-size: 13.5px; cursor: pointer; }
.sortw-choice:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.sortw-choice:disabled { cursor: default; opacity: 0.55; }
.sortw-choice.answer { opacity: 1; border-color: var(--t-signal); color: var(--t-signal); font-weight: 600; }
.sortw-choice.missed { opacity: 1; border-color: var(--t-coral); color: var(--t-coral); text-decoration: line-through; }
.sortw-score { margin: 0; font-size: 13.5px; color: var(--text-3); }

.flowp { display: grid; gap: 14px; padding: 18px; min-width: 0; }
.flow-row { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; }
.flow-step { position: relative; }
.flow-step:not(:last-child)::after { content: "→"; position: absolute; top: 50%; right: -17px; transform: translateY(-50%); color: var(--text-3); font-size: 13px; }
.flow-step button { display: flex; min-height: 38px; align-items: center; gap: 7px; padding: 5px 12px 5px 6px; border: 1px solid var(--stroke); border-radius: 999px; background: #fff; color: var(--text-1); font-size: 13.5px; text-align: left; cursor: pointer; }
.flow-step .n { display: grid; width: 24px; height: 24px; flex: none; place-items: center; border-radius: 50%; background: var(--subtle-fill); font-size: 12px; font-weight: 600; color: var(--text-2); }
.flow-step.past button { border-color: color-mix(in srgb, var(--accent) 35%, var(--stroke)); }
.flow-step.on button { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, #fff); font-weight: 600; }
.flow-step.on .n { background: var(--accent); color: #fff; }
.flow-loop { margin: -6px 0 0; font-size: 13px; color: var(--text-3); }
.flow-detail { min-height: 84px; padding: 12px 14px; border-radius: var(--r-sm); background: var(--subtle-fill); border: 1px solid var(--divider); }
.flow-detail p { margin: 4px 0 0; }
.flow-detail .codeline { margin: 8px 0 0; white-space: pre-wrap; font: 500 12.5px/1.55 var(--font-code, var(--font-mono)); }
.flow-count { font-size: 13px; color: var(--text-3); }
.flow-detail-p { min-height: 48px; margin: 0; }
.flow-scroll { min-width: 0; overflow-x: auto; }
.flow-scroll .plane { min-width: 500px; }
.flow-seq { max-width: 680px; background: #fff; }
.flow-scroll .plane.flow-seq-narrow { min-width: 0; }
.flow-seq .msg { cursor: pointer; }
.flow-seq .msg.later { opacity: 0.22; }
.flow-seq .life { stroke: var(--stroke); stroke-width: 1.4; stroke-dasharray: 4 4; }
.flow-seq .actor { font: 600 14.5px var(--font-ui); fill: var(--text-1); }
.flow-seq .msg line, .flow-seq .msg path:not(.head) { stroke: var(--text-3); stroke-width: 1.6; fill: none; }
.flow-seq .msg text { font: 500 13.5px var(--font-ui); fill: var(--text-2); paint-order: stroke; stroke: #fff; stroke-width: 4px; }
.flow-seq .msg.on line, .flow-seq .msg.on path:not(.head) { stroke: var(--accent); stroke-width: 2.4; }
.flow-seq .msg.on text { fill: var(--accent); font-weight: 600; }
.flow-seq .head { fill: var(--text-2); }

.samplerw { display: grid; gap: 14px; padding: 18px; min-width: 0; }
.sampler-text { margin: 0; font-size: 16px; }
.sampler-text strong { color: var(--accent); }
.sampler-text .n { display: block; margin-top: 2px; font-size: 13px; color: var(--text-3); }
.sampler-bars { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sampler-bars li { display: grid; grid-template-columns: minmax(56px, 90px) minmax(0, 1fr) 52px; align-items: center; gap: 10px; font-size: 13.5px; }
.sampler-bars li.off { opacity: 0.45; }
.sampler-bars .w { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.sampler-bars .track { position: relative; height: 12px; border-radius: 6px; background: var(--subtle-fill); }
.sampler-bars .fill { display: block; height: 100%; border-radius: 6px; background: var(--accent); }
.sampler-bars .tally { position: absolute; top: -3px; bottom: -3px; width: 3px; border-radius: 2px; background: var(--t-coral); }
.sampler-bars .p { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); }

.plane .dot-pos, .plane .dot-neg, .plane .dot-test, .plane .dot-proj, .plane .dot-cluster { stroke: #fff; stroke-width: 1.2; }
.plane .dot-pos { fill: var(--t-coral); }
.plane .dot-neg { fill: var(--t-azure); }
.plane .dot-test { fill: #98a2b3; stroke-width: 0.5; }
.plane .dot-proj { fill: var(--accent); stroke-width: 0.5; }
.plane .region { stroke: none; }
.plane .region.r1 { fill: var(--t-coral); fill-opacity: 0.14; }
.plane .region.r0 { fill: var(--t-azure); fill-opacity: 0.12; }
.plane .curve.ghost { stroke-width: 1.2; stroke-opacity: 0.35; }
.plane .k-1 { fill: #98a2b3; }
.plane .dot-cluster.k0 { fill: #174bff; } .plane .dot-cluster.k1 { fill: #be185d; } .plane .dot-cluster.k2 { fill: #007f73; } .plane .dot-cluster.k3 { fill: #b45309; } .plane .dot-cluster.k4 { fill: #6d28d9; } .plane .dot-cluster.k5 { fill: #0e7490; }
.plane .dot-cluster.k-1 { fill: #98a2b3; }
.plane .center { fill: none; stroke-width: 4; stroke-linecap: round; }
.plane .center.k0 { stroke: #174bff; } .plane .center.k1 { stroke: #be185d; } .plane .center.k2 { stroke: #007f73; } .plane .center.k3 { stroke: #b45309; } .plane .center.k4 { stroke: #6d28d9; } .plane .center.k5 { stroke: #0e7490; }

.thw-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 200px); gap: 14px; align-items: start; margin-top: 12px; }
.thw-roc { margin: 0; }
.thw-matrix { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.thw-matrix th, .thw-matrix td { padding: 7px 9px; border: 1px solid var(--divider); text-align: center; font-weight: 500; }
.thw-matrix th { background: var(--subtle-fill); color: var(--text-2); }
.thw-matrix td { font-weight: 600; font-variant-numeric: tabular-nums; }
.thw-matrix td.ok { color: var(--t-signal); }
.thw-matrix td.bad { color: var(--t-coral); }
.thw-matrix tr.now td { background: color-mix(in srgb, var(--accent) 8%, #fff); }

.netw-svg { background: #fff; }
.net-edge { stroke-linecap: round; }
.net-edge.pos { stroke: color-mix(in srgb, var(--accent) 55%, #fff); }
.net-edge.neg { stroke: color-mix(in srgb, var(--t-coral) 60%, #fff); }
.net-edge.off { opacity: 0.08; }
.net-node circle { fill: #fff; stroke: var(--text-2); stroke-width: 1.8; }
.net-node.on circle { fill: color-mix(in srgb, var(--accent) 12%, #fff); stroke: var(--accent); }
.net-node.off circle { fill: var(--subtle-fill); stroke: var(--stroke); stroke-dasharray: 3 3; }
.net-node .lab, .netw-svg .lab { font: 500 13px var(--font-ui); fill: var(--text-2); }
.net-node .val { font: 600 13px var(--font-ui); fill: var(--text-1); }
.netw-svg .grad { font: 600 13px var(--font-ui); fill: var(--t-coral); }
.depth-bars { display: flex; height: 220px; align-items: flex-end; gap: 2px; padding: 8px; border: 1px solid var(--divider); border-radius: var(--r-md); background: #fff; }
.depth-bars .bar { min-width: 0; flex: 1; border-radius: 3px 3px 0 0; background: var(--accent); }

.attnw { display: grid; gap: 12px; padding: 18px; min-width: 0; }
.attn-row { display: flex; flex-wrap: wrap; gap: 6px; }
.attn-token { min-height: 38px; padding: 4px 12px; border: 1px solid var(--stroke); border-radius: 8px; background: color-mix(in srgb, var(--accent) calc(var(--w, 0) * 70%), #fff); color: var(--text-1); font-size: 15px; cursor: pointer; }
.attn-token.on { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.attn-arcs { display: block; width: 100%; height: auto; max-height: 90px; }
.attn-scroll { overflow-x: auto; }
.attn-matrix { border-collapse: collapse; font-size: 13px; }
.attn-matrix th { padding: 4px 8px; font-weight: 500; color: var(--text-2); white-space: nowrap; }
.attn-matrix td { min-width: 44px; height: 36px; border: 1px solid var(--divider); background: color-mix(in srgb, var(--accent) calc(var(--w, 0) * 85%), #fff); text-align: center; font-variant-numeric: tabular-nums; }
.attn-matrix td.off { background: repeating-linear-gradient(45deg, #eef0f4 0 4px, #f7f8fa 4px 8px); }
@media (max-width: 720px) {
  .thw-row { grid-template-columns: minmax(0, 1fr); }
  .thw-roc { max-width: 220px; }
}

/* A touchscreen keeps :hover on whatever was tapped last, so buttons stay in their hover color. */
@media (hover: none) {
  .btn:hover { background: #ffffff; border-color: var(--stroke-strong); }
  .btn.primary:hover { background: var(--accent); border-color: var(--accent); }
  .btn.quiet:hover { background: transparent; color: var(--text-2); }
  .option:hover:not(:disabled) { border-color: var(--stroke-strong); }
}

/* Until Geist arrives, Arial or Helvetica drawn to Geist's measurements (scripts/measure fallback with fontkit:
   width on a sample paragraph 102.49%, ascent 1005/1000, descent 295/1000), so text keeps its place when the font loads. */
@font-face {
  font-family: "Geist Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 102.49%;
  ascent-override: 98.06%;
  descent-override: 28.78%;
  line-gap-override: 0%;
}

.taught { max-width: 720px; margin: 12px auto 0; padding: clamp(24px, 5vw, 44px); }
.taught h1 { font-size: clamp(30px, 5vw, 44px); margin: 8px 0 12px; overflow-wrap: anywhere; }
.taught-lead { margin: 0; font-size: 17px; line-height: 1.55; color: var(--text-2); }
.taught-paper { margin: 24px 0; padding: 18px 22px 4px; border-radius: 12px; background: #101828; }
.taught-when { margin: 0 0 6px; font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: #98a2b3; }
.taught-line { margin: 0 0 18px; font-family: var(--font-mono); font-size: clamp(14px, 2.2vw, 17px); line-height: 1.5; overflow-wrap: anywhere; }
.taught-pencil { color: #98a2b3; }
.taught-ink { color: #fff; }
.taught-facts { display: flex; flex-wrap: wrap; gap: 12px 32px; margin: 0; }
.taught-facts dt { font: 600 11px var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.taught-facts dd { margin: 4px 0 0; }
.taught-note { margin: 24px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-3); }
.taught-cta { max-width: 720px; margin: 20px auto 0; padding: 24px 28px; text-align: center; }
.taught-cta h2 { margin: 0 0 8px; }
.taught-cta p { margin: 0 0 14px; color: var(--text-2); }
.taught-cta p:last-child { margin: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }