/* Skillkraft course player: base tokens, layout and blocks.
   The look follows the Agentic AI course in frad-academy (globals.css, LessonShell,
   ModuleNav). Skins in skins/*.css change colour, type and surfaces, never structure.
   Every selector with a class ends with :not(:where(.sim-stage *)) (no specificity), so player
   styles never reach sims that reuse a class name (.opt, .row, .drawer …). Keep it on new rules. */

@font-face { font-family: "Archivo"; src: url("fonts/archivo-var-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("fonts/instrument-sans-var-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-var-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono-var-cyrillic.woff2") format("woff2"); font-weight: 100 800; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

/* Palette: the Agentic AI course's "helix" themes in frad-academy (app/globals.css).
   Dark is html[data-theme="helix-dark"], light is html[data-theme="helix"], value for value.
   Both skins draw only from these tokens. --h is kept for old callers; colour no longer follows it. */
:root {
  --h: 30;
  --bg: #0b0a14; --panel: #161425; --panel-2: #1f1c31; --line: #2c2843; --line-2: #3d3757;
  --ink: #f5ecef; --muted: #bcaaba; --dim: #8f8199; --soft: #dccdd4; --well: #08070f; --code-ink: #dbd1da;
  --accent: #d9adb2; --accent-text: #d9adb2; --on-accent: #0b0a14;
  --ok: #6fd3b0; --bad: #fa5d76; --info: #9297db; --warn: #e0918c; --coral: #e0918c;
  --sheen: rgba(255, 255, 255, 0.038); --shadow: rgba(0, 0, 0, 0.6); --grid-dot: rgba(255, 255, 255, 0.035);
  --sec-l: 0.20; --sec-c: 0.025;
  /* The Agentic AI course's own accent (lib/courses.ts launch2 #e8a0b4): the active step,
     the outline's course code, pull-tab and syllabus bars. On helix (light) frad turns the
     text set in this accent to #17171c (globals.css, "Course-branded elements"). */
  --course: #e8a0b4; --course-text: #e8a0b4; --on-course: #0b0a14;
  --radius: 20px; --radius-sm: 12px;
  --font-display: "Archivo", system-ui, sans-serif;
  --font-body: "Instrument Sans", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --measure: 48rem;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #ece7f3; --panel: #f7f4fa; --panel-2: #e3dcec; --line: #d4cbe0; --line-2: #b7aac9;
  --ink: #221e2b; --muted: #575065; --dim: #645d73; --soft: #423b52; --well: #171320; --code-ink: #d9d4e4;
  --accent: #6c3fa6; --accent-text: #6c3fa6; --on-accent: #fcf9ff;
  --ok: #0a5f70; --bad: #9e253b; --info: #2d54d6; --warn: #b8455f; --coral: #b8455f;
  --sheen: rgba(252, 249, 255, 0.5); --shadow: rgba(52, 38, 74, 0.18); --grid-dot: rgba(76, 53, 102, 0.055);
  --sec-l: 0.965; --sec-c: 0.02;
  --course-text: #17171c; --on-course: #17171c;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font: 16px/1.6 var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 12% -10%, color-mix(in srgb, var(--accent) 7%, transparent), transparent 45%),
    radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--info) 7%, transparent), transparent 42%),
    radial-gradient(var(--grid-dot) 1px, transparent 1px);
  background-size: auto, auto, 34px 34px;
  background-attachment: fixed;
}
/* The course list sits on the Course Studio's plain canvas (founder, 17 Oct 2026). */
body[data-page="index"] { background-color: #0e0d12; background-image: none; }
:root[data-theme="light"] body[data-page="index"] { background-color: #f5f5f8; }
::selection { background: var(--accent); color: var(--on-accent); }
img, svg { max-width: 100%; height: auto; }
a { color: var(--accent-text); text-underline-offset: 3px; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; border-radius: 4px; }
.sr-only:not(:where(.sim-stage *)) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip:not(:where(.sim-stage *)) { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-weight: 600; }
.skip:focus:not(:where(.sim-stage *)) { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ---------- Bits (frad globals.css: .label-mono, .card, .chip, .btn-primary, .btn-ghost) ---------- */
.label-mono:not(:where(.sim-stage *)) { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 500; }
/* A label that is really a sentence: mono caps on a wide screen, plain text on a phone (frad .label-sentence). */
.label-sentence:not(:where(.sim-stage *)) { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.13em; text-transform: uppercase; }
@media (max-width: 640px) { .label-sentence:not(:where(.sim-stage *)) { font-family: inherit; font-size: 13px; letter-spacing: 0; text-transform: none; line-height: 1.55; } }
.accent:not(:where(.sim-stage *)) { color: var(--accent-text); }
.muted:not(:where(.sim-stage *)) { color: var(--muted); }
.dim:not(:where(.sim-stage *)) { color: var(--dim); }
.ok:not(:where(.sim-stage *)) { color: var(--ok); }
.card:not(:where(.sim-stage *)) {
  position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, var(--sheen), transparent 42%), var(--panel);
  transition: border-color .18s ease, box-shadow .18s ease;
}
a.card:not(:where(.sim-stage *)) { color: inherit; text-decoration: none; display: block; }
a.card:hover:not(:where(.sim-stage *)) { border-color: var(--line-2); box-shadow: 0 12px 40px -18px var(--shadow); }
/* Opt-in bloom in a card's top-left corner (frad .card-glow), tinted by --bloom. */
.card-glow:not(:where(.sim-stage *))::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(62% 78% at 6% 0%, var(--bloom, color-mix(in srgb, var(--accent) 11%, transparent)), transparent 68%); }
.card-glow > *:not(:where(.sim-stage *)) { position: relative; }
.chip:not(:where(.sim-stage *)) { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); padding: 4px 11px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.chip strong:not(:where(.sim-stage *)) { color: var(--ink); font-weight: 600; }
.chip-course:not(:where(.sim-stage *)) { color: var(--course-text); border-color: color-mix(in srgb, var(--course) 33%, transparent); }
.chips:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-wrap:not(:where(.sim-stage *)) { white-space: normal; max-width: 100%; }
.btn:not(:where(.sim-stage *)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 12px; padding: 10px 20px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--accent); color: var(--on-accent); box-shadow: 0 0 28px -8px color-mix(in srgb, var(--accent) 42%, transparent); transition: filter .16s ease, box-shadow .16s ease; }
.btn:hover:not(:where(.sim-stage *)) { filter: brightness(1.07); box-shadow: 0 0 34px -6px color-mix(in srgb, var(--accent) 55%, transparent); }
.btn:disabled:not(:where(.sim-stage *)) { opacity: .55; cursor: not-allowed; box-shadow: none; filter: none; }
.btn-ghost:not(:where(.sim-stage *)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 12px; padding: 8px 14px; background: transparent; color: var(--muted); text-decoration: none; font-size: 14px; transition: border-color .16s ease, color .16s ease, background .16s ease; }
.btn-ghost:hover:not(:where(.sim-stage *)) { border-color: var(--accent); color: var(--ink); background: color-mix(in srgb, var(--accent) 7%, transparent); }
/* The course-coloured buttons of frad's course and dashboard pages ("Continue", "View syllabus"). */
.btn-course:not(:where(.sim-stage *)) { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; padding: 12px 20px; font-weight: 600; font-size: 15px; text-decoration: none; background: var(--course); color: var(--on-course); box-shadow: 0 0 26px -10px var(--course); transition: filter .16s ease; }
.btn-course:hover:not(:where(.sim-stage *)) { filter: brightness(1.06); }
.btn-tint:not(:where(.sim-stage *)) { display: inline-flex; align-items: center; gap: 6px; border-radius: 8px; border: 1px solid color-mix(in srgb, var(--course) 40%, transparent); background: color-mix(in srgb, var(--course) 10%, transparent); padding: 6px 12px; font-size: 14px; font-weight: 600; color: var(--ink); text-decoration: none; transition: filter .16s ease; }
.btn-tint:hover:not(:where(.sim-stage *)) { filter: brightness(1.1); }
.icon-btn:not(:where(.sim-stage *)) { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex: none; border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted); font-size: 15px; line-height: 1; }
.icon-btn:hover:not(:where(.sim-stage *)) { border-color: var(--line-2); color: var(--ink); }
.ico:not(:where(.sim-stage *)) { width: 16px; height: 16px; flex: none; }

/* ---------- Page frame (frad app/dashboard/layout.tsx: sticky blurred header, 1400px main) ---------- */
.top:not(:where(.sim-stage *)) { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 70%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); }
.top-in:not(:where(.sim-stage *)) { display: flex; align-items: center; gap: 12px; padding: 14px 24px; }
.brand:not(:where(.sim-stage *)) { display: flex; align-items: baseline; gap: 10px; min-height: 24px; color: var(--ink); text-decoration: none; font: 600 16px var(--font-display); letter-spacing: -0.01em; min-width: 0; }
.brand span:not(:where(.sim-stage *)) { color: var(--dim); font: 500 11px var(--font-mono); letter-spacing: .13em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-actions:not(:where(.sim-stage *)) { margin-left: auto; display: flex; gap: 12px; align-items: center; }
.wrap:not(:where(.sim-stage *)) { width: 100%; max-width: 1400px; margin: 0 auto; padding: 32px 24px 80px; }
.wrap.slim:not(:where(.sim-stage *)) { max-width: 42rem; padding-top: 40px; }
@media (min-width: 1024px) { .top-in:not(:where(.sim-stage *)) { padding: 14px 40px; } .wrap:not(:where(.sim-stage *)) { padding-left: 40px; padding-right: 40px; } }
@media (min-width: 1440px) { .wrap:not(:where(.sim-stage *)) { max-width: 1780px; } }

/* Breadcrumb line, title block (frad module layout) */
.crumbs:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.crumbs a:not(:where(.sim-stage *)) { color: var(--dim); text-decoration: none; }
.crumbs a:hover:not(:where(.sim-stage *)) { color: var(--ink); }
.crumbs .here:not(:where(.sim-stage *)) { color: var(--course-text); }
h1.title:not(:where(.sim-stage *)) { font: 600 30px/1.2 var(--font-display); letter-spacing: -0.025em; margin: 12px 0 0; text-wrap: balance; }
h1.title.big:not(:where(.sim-stage *)) { font-size: 36px; line-height: 1.1; margin-top: 8px; }
@media (min-width: 640px) { h1.title.big:not(:where(.sim-stage *)) { font-size: 48px; } }
.topic:not(:where(.sim-stage *)) { margin: 4px 0 0; font-size: 18px; line-height: 1.55; color: var(--course-text); }
.lede:not(:where(.sim-stage *)) { margin: 10px 0 0; max-width: 42rem; line-height: 1.65; color: var(--muted); }
.section-title:not(:where(.sim-stage *)) { font: 600 20px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 0; }
.note:not(:where(.sim-stage *)) { padding: 14px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 14px; }

/* ---------- Course list (frad dashboard programme cards) ---------- */
.list-head:not(:where(.sim-stage *)) { margin-top: 10px; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.grid-cards:not(:where(.sim-stage *)) { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; margin-top: 16px; }
@media (min-width: 720px) { .grid-cards:not(:where(.sim-stage *)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid-cards:not(:where(.sim-stage *)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ccard:not(:where(.sim-stage *)) { display: flex; flex-direction: column; padding: 0 22px 20px; overflow: hidden; isolation: isolate; }
.ccard.loading:not(:where(.sim-stage *)) { min-height: 300px; padding-top: 20px; }
/* Title and audience sit over the foot of the motif; a soft panel-coloured halo keeps them readable. */
.ccard h2:not(:where(.sim-stage *)) { margin: 0; font: 600 23px/1.25 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; text-shadow: 0 0 18px var(--panel), 0 0 6px var(--panel), 0 0 2px var(--panel); }
.ccard .desc:not(:where(.sim-stage *)) { margin: 6px 0 0; font-size: 16px; line-height: 1.5; color: var(--muted); text-shadow: 0 0 10px var(--panel); }
/* Progress: one thin segmented line with the count beside it. Done in the course colour, built in a tint. */
.cprog:not(:where(.sim-stage *)) { margin-top: 14px; display: flex; align-items: center; gap: 10px; color: var(--dim); }
.cprog .segs:not(:where(.sim-stage *)) { flex: 1; display: flex; gap: 2px; }
.cprog .segs span:not(:where(.sim-stage *)) { flex: 1; height: 4px; border-radius: 99px; background: var(--panel-2); }
.cprog .segs span.b:not(:where(.sim-stage *)) { background: color-mix(in srgb, var(--course) 38%, var(--panel-2)); }
.cprog .segs span.d:not(:where(.sim-stage *)) { background: var(--course); }
.cprog .label-mono:not(:where(.sim-stage *)) { flex: none; font-size: 11px; }
.cacts:not(:where(.sim-stage *)) { margin-top: 14px; display: flex; gap: 10px; }
.cacts > a:not(:where(.sim-stage *)) { flex: 1; justify-content: center; min-height: 42px; padding: 0 14px; border-radius: 12px; font-size: 14px; white-space: nowrap; }

/* Course photo (_player/tiles/<id>.webp): in the flow above the text, so every row is the same height and a tile
   with a one-line title gives the spare height to the photo. It runs on behind the title and fades into the panel. */
.ccard .ph:not(:where(.sim-stage *)) {
  position: relative; flex: 1 0 250px; margin: 0 -22px -130px; z-index: -1; pointer-events: none;
  background: color-mix(in srgb, var(--course) 8%, transparent) center 30% / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, #000 34%, rgb(0 0 0 / .3) 62%, transparent 88%); mask-image: linear-gradient(to bottom, #000 34%, rgb(0 0 0 / .3) 62%, transparent 88%);
  opacity: .6; filter: saturate(.8); transition: opacity .3s ease;
}
:root[data-theme="light"] .ccard .ph:not(:where(.sim-stage *)) { opacity: .66; }
.ccard:hover .ph:not(:where(.sim-stage *)) { opacity: .8; }

/* ---------- Course motion (motifs.js), syllabus header: one grammar, one beat, a motif per course ---------- */
.mo:not(:where(.sim-stage *)) {
  position: relative; flex: 1 0 124px; margin: 0 -22px -24px; z-index: -1; pointer-events: none;
  --mo-ink: color-mix(in srgb, var(--course) 62%, transparent);
  --mo-faint: color-mix(in srgb, var(--course) 22%, transparent);
  --mo-fill: color-mix(in srgb, var(--course) 9%, transparent);
  --mo-bar: color-mix(in srgb, var(--course) 26%, transparent);
  --mo-hot: var(--course); --mo-node: var(--panel);
  background: radial-gradient(color-mix(in srgb, var(--course) 16%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px,
    radial-gradient(60% 70% at 62% 40%, color-mix(in srgb, var(--course) 10%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(to bottom, #000 52%, transparent 96%); mask-image: linear-gradient(to bottom, #000 52%, transparent 96%);
  opacity: .9; transition: opacity .3s ease;
}
:root[data-theme="light"] .mo:not(:where(.sim-stage *)) {
  --mo-ink: color-mix(in srgb, var(--accent) 62%, transparent);
  --mo-faint: color-mix(in srgb, var(--accent) 24%, transparent);
  --mo-fill: color-mix(in srgb, var(--accent) 5%, transparent);
  --mo-bar: color-mix(in srgb, var(--course) 55%, transparent);
  --mo-hot: color-mix(in srgb, var(--course), var(--accent) 55%);
  background: radial-gradient(color-mix(in srgb, var(--accent) 13%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px,
    radial-gradient(60% 70% at 62% 40%, color-mix(in srgb, var(--course) 22%, transparent), transparent 70%);
}
.mo-art { position: absolute; inset: 0; display: block; width: 100%; height: 100%; padding: 12px 8px 4px; overflow: visible; }
.mo-art .ln { fill: none; stroke: var(--mo-ink); stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.mo-art .fa { stroke: var(--mo-faint); }
.mo-art .hs { stroke: var(--mo-hot); stroke-width: 1.6; }
.mo-art .bs { stroke: var(--bad); stroke-width: 1.4; }
.mo-art .dash { stroke-dasharray: 4 5; }
.mo-art .dr { stroke-dasharray: 1; }
.mo-art .nd { fill: var(--mo-node); stroke: var(--mo-ink); stroke-width: 1.25; }
.mo-art .thin { stroke-width: .9; stroke: var(--mo-faint); }
.mo-art .hsn { stroke: var(--mo-hot); stroke-width: 1.5; }
.mo-art .hf { fill: var(--mo-hot); }
.mo-art .bd { fill: var(--bad); }
.mo-art .ff { fill: var(--mo-faint); }
.mo-art .ff2 { fill: var(--mo-fill); }
.mo-art .fb { fill: var(--mo-bar); }
.mo-art .fi { fill: var(--mo-ink); }
.mo-art .half { fill-opacity: .55; }
.mo-art .soft { fill-opacity: .2; }
.mo-art .ghost { fill: var(--mo-hot); fill-opacity: .3; }
.mo-art .cone { fill: var(--mo-hot); fill-opacity: .14; }
.mo-art .lens { fill: var(--mo-hot); fill-opacity: .07; stroke: var(--mo-hot); stroke-width: 1.6; }
.mo-art .halo { fill: var(--mo-hot); fill-opacity: .13; }
.mo-art .halo.x0 { opacity: 0; }
.mo-art .pg { fill: none; stroke: var(--mo-hot); stroke-width: 1.4; opacity: 0; }
.mo-art .pg.bad { stroke: var(--bad); }
.mo-art .run { fill: none; stroke: var(--mo-hot); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .001 2; stroke-dashoffset: .001; opacity: 0; }
.mo-art .run.sq { stroke-linecap: square; stroke-width: 4.5; }
.mo-art .sat { fill: none; stroke: var(--mo-hot); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .001 .499; }
.mo-art .x0 { opacity: 0; }
.mo-art [data-a] { transform-box: fill-box; transform-origin: center; }
.mo-art [data-o="l"] { transform-origin: 0 50%; }
.mo-art [data-o="b"] { transform-origin: 50% 100%; }
.mo-art [data-o="lb"] { transform-origin: 0 100%; }
.mo-art [data-o="rb"] { transform-origin: 100% 100%; }
.mo-art .sweep { transform-box: view-box; transform-origin: 250px 92px; }

/* ---------- Course page: syllabus (frad app/dashboard/course/[course]/page.tsx) ---------- */
.page-head:not(:where(.sim-stage *)) { margin-top: 16px; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head > div:not(:where(.sim-stage *)) { min-width: 0; max-width: 42rem; }
.page-head .title:not(:where(.sim-stage *)) { margin-top: 8px; }
.eyebrow:not(:where(.sim-stage *)) { color: var(--course-text); }
.for:not(:where(.sim-stage *)) { margin: 12px 0 0; color: var(--dim); }
.goal:not(:where(.sim-stage *)) { margin-top: 32px; padding: 24px; }
/* Course page: intro on the left, the goal card beside it from 1024px (stacked below that). */
.course-head:not(:where(.sim-stage *)) { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
.course-head > div:not(:where(.sim-stage *)) { max-width: none; }
.course-head .goal:not(:where(.sim-stage *)) { margin-top: 0; }
.course-head .intro:not(:where(.sim-stage *)) { padding: 24px; overflow: hidden; }
.course-head .start:not(:where(.sim-stage *)) { margin-top: 20px; }
/* The course's tile motif above the title, fading into it, as on its tile. */
.hero-mo:not(:where(.sim-stage *)) {
  position: relative; height: 200px; flex: none; margin: -8px 0 -36px; z-index: -1; max-width: 560px;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 96%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, #000 55%, transparent 96%), linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); mask-composite: intersect;
}
.course-head h1:not(:where(.sim-stage *)), .course-head .lede:not(:where(.sim-stage *)) { text-shadow: 0 0 16px var(--bg), 0 0 6px var(--bg); }
.course-head > div:first-child:not(:where(.sim-stage *)) { position: relative; isolation: isolate; }
@media (min-width: 1024px) { .course-head:not(:where(.sim-stage *)) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 40px; align-items: stretch; } }
.goal h2:not(:where(.sim-stage *)) { margin: 12px 0 0; font: 600 20px/1.3 var(--font-display); }
.outcomes:not(:where(.sim-stage *)) { margin: 12px 0 0; padding-left: 20px; max-width: 48rem; color: var(--soft); }
.outcomes li:not(:where(.sim-stage *)) { margin-bottom: 6px; line-height: 1.6; }
.outcomes li:not(:where(.sim-stage *))::marker { color: var(--accent); }
.syl:not(:where(.sim-stage *)) { margin-top: 40px; }
.syl-head:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.syl-head h2:not(:where(.sim-stage *)) { display: flex; align-items: center; gap: 12px; margin: 0; font: 600 20px/1.3 var(--font-display); letter-spacing: -0.01em; }
.syl-head h2 a:not(:where(.sim-stage *)) { color: inherit; text-decoration: none; }
.syl-head h2 a:hover:not(:where(.sim-stage *)) { text-decoration: underline; text-decoration-color: var(--course); }
.bar:not(:where(.sim-stage *)) { flex: none; width: 3px; height: 16px; border-radius: 99px; background: var(--course); box-shadow: 0 0 10px var(--course); }
.syl-sub:not(:where(.sim-stage *)) { margin: 4px 0 0; max-width: 48rem; font-size: 14px; line-height: 1.55; color: var(--muted); }
.mgrid:not(:where(.sim-stage *)) { margin-top: 16px; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .mgrid:not(:where(.sim-stage *)) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .mgrid.three:not(:where(.sim-stage *)) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mod-list:not(:where(.sim-stage *)) { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
/* A module (or capstone) card: the course colour down its left edge, stronger once done. */
.mcard:not(:where(.sim-stage *)) { padding: 16px; border-left: 3px solid color-mix(in srgb, var(--course) 33%, transparent); --bloom: color-mix(in srgb, var(--course) 11%, transparent); }
.mcard.done:not(:where(.sim-stage *)) { border-left-color: color-mix(in srgb, var(--course) 80%, transparent); }
.mcard.unbuilt:not(:where(.sim-stage *)) { opacity: .6; }
.mcard.unbuilt:hover:not(:where(.sim-stage *)) { opacity: .85; }
.mcard .mrow:not(:where(.sim-stage *)) { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--dim); }
.mcard .st-next:not(:where(.sim-stage *)) { color: var(--course-text); }
.mcard .st-done:not(:where(.sim-stage *)) { color: var(--ok); }
.mcard h3:not(:where(.sim-stage *)) { margin: 8px 0 0; font: 600 16px/1.375 var(--font-display); color: var(--ink); }
.mcard p:not(:where(.sim-stage *)) { margin: 4px 0 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.mcard .meta:not(:where(.sim-stage *)) { margin-top: 8px; font-size: 13px; color: var(--dim); }

/* ---------- Lesson shell: outline rail + lesson column (frad LessonShell, CourseNavDrawer) ---------- */
.shell:not(:where(.sim-stage *)) { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); }
.main-col:not(:where(.sim-stage *)) { min-width: 0; width: 100%; max-width: 960px; margin: 0 auto; }
.rail:not(:where(.sim-stage *)), .rail-stub:not(:where(.sim-stage *)), .outline-tab:not(:where(.sim-stage *)) { display: none; }
/* Tablet: a pull-tab on the left edge, and a gutter its width so nothing runs under it. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .shell:not(:where(.sim-stage *)) { padding-left: 56px; }
  .outline-tab:not(:where(.sim-stage *)) { position: fixed; z-index: 40; left: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; border: 0; border-radius: 0 16px 16px 0; padding: 16px 14px 16px 10px; background: var(--course); color: var(--on-course); box-shadow: 0 0 30px -10px var(--course), 0 10px 20px -8px var(--shadow); transition: transform .16s ease, padding .16s ease; }
  .outline-tab:hover:not(:where(.sim-stage *)) { transform: translate(2px, -50%); padding-right: 16px; }
  .outline-tab .vt:not(:where(.sim-stage *)) { writing-mode: vertical-rl; font-weight: 600; }
  .outline-tab .vt-n:not(:where(.sim-stage *)) { writing-mode: vertical-rl; border-radius: 999px; padding: 6px 2px; background: color-mix(in srgb, var(--bg) 20%, transparent); }
}
/* Phone: the tab becomes a bar in the flow, so the width goes back to the lesson. */
.outline-bar:not(:where(.sim-stage *)) { display: flex; width: 100%; align-items: center; gap: 10px; border-radius: 12px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); padding: 10px 14px; text-align: left; color: var(--ink); transition: border-color .16s ease; }
.outline-bar:hover:not(:where(.sim-stage *)) { border-color: var(--line-2); }
.outline-bar .grow:not(:where(.sim-stage *)) { flex: 1; }
.outline-bar .chev:not(:where(.sim-stage *)) { color: var(--dim); }
.pill-course:not(:where(.sim-stage *)) { border-radius: 999px; padding: 2px 8px; background: var(--course); color: var(--on-course); }
@media (min-width: 640px) { .outline-bar:not(:where(.sim-stage *)) { display: none; } }
/* Desktop: the standing column, squeezable to a 34px strip. */
@media (min-width: 1024px) {
  .shell[data-rail="open"]:not(:where(.sim-stage *)) { grid-template-columns: 236px minmax(0, 1fr); }
  .shell[data-rail="closed"]:not(:where(.sim-stage *)) { grid-template-columns: 34px minmax(0, 1fr); }
  .shell[data-rail="open"] .rail:not(:where(.sim-stage *)) { display: block; }
  .shell[data-rail="closed"] .rail-stub:not(:where(.sim-stage *)) { display: flex; }
}
.rail:not(:where(.sim-stage *)) { align-self: start; position: sticky; top: 89px; max-height: calc(100vh - 113px); overflow-y: auto; padding-right: 4px; }
.rail-top:not(:where(.sim-stage *)) { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.rail-code:not(:where(.sim-stage *)) { margin: 0; color: var(--course-text); }
.rail-collapse:not(:where(.sim-stage *)) { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin: -2px -4px 0 0; flex: none; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 13px; line-height: 1; box-shadow: 0 1px 2px var(--shadow); transition: border-color .16s ease, background .16s ease, color .16s ease; }
.rail-collapse:hover:not(:where(.sim-stage *)) { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--ink); }
.rail-title:not(:where(.sim-stage *)) { margin: 4px 0 0; font: 600 15px/1.375 var(--font-display); }
.rail-title a:not(:where(.sim-stage *)) { color: var(--ink); text-decoration: none; }
.rail-title a:hover:not(:where(.sim-stage *)) { text-decoration: underline; text-decoration-color: var(--line-2); }
.rail-count:not(:where(.sim-stage *)) { margin: 8px 0 0; color: var(--dim); }
.rail-body:not(:where(.sim-stage *)) { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; }
.rail-stub:not(:where(.sim-stage *)) { position: sticky; top: 89px; align-self: start; width: 34px; flex-direction: column; align-items: center; gap: 12px; padding: 12px 0; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 40%, transparent); background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent-text); box-shadow: 0 1px 2px var(--shadow); transition: border-color .16s ease, background .16s ease; }
.rail-stub:hover:not(:where(.sim-stage *)) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 15%, transparent); }
.rail-stub .label-mono:not(:where(.sim-stage *)) { writing-mode: vertical-rl; white-space: nowrap; font-size: 10px; }

/* The outline itself: lesson groups (frad's weeks) with module rows (frad's lessons) */
.og:not(:where(.sim-stage *)) { margin-bottom: 8px; }
.og-btn:not(:where(.sim-stage *)) { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 8px; border: 0; border-radius: 8px; background: none; padding: 8px; text-align: left; color: var(--ink); }
.og-btn:hover:not(:where(.sim-stage *)), .og.here > .og-btn:not(:where(.sim-stage *)) { background: var(--panel-2); }
.og-t:not(:where(.sim-stage *)) { font-size: 14px; font-weight: 500; line-height: 1.375; }
.og-n:not(:where(.sim-stage *)) { display: flex; flex: none; align-items: center; gap: 6px; color: var(--dim); }
.og-n .chev:not(:where(.sim-stage *)) { display: inline-block; letter-spacing: 0; transition: transform .15s ease; }
.og-btn[aria-expanded="true"] .chev:not(:where(.sim-stage *)) { transform: rotate(90deg); }
.og-list:not(:where(.sim-stage *)) { list-style: none; margin: 4px 0 0; padding: 0 0 0 8px; display: grid; gap: 2px; }
.og-list[hidden]:not(:where(.sim-stage *)) { display: none; }
.orow:not(:where(.sim-stage *)) { display: flex; align-items: flex-start; gap: 8px; border-radius: 8px; padding: 8px 10px; font-size: 14px; line-height: 1.375; color: var(--muted); text-decoration: none; }
.orow:hover:not(:where(.sim-stage *)), .orow[aria-current="page"]:not(:where(.sim-stage *)) { background: var(--panel-2); color: var(--ink); }
.orow .ot:not(:where(.sim-stage *)) { min-width: 0; flex: 1; }
.ocheck:not(:where(.sim-stage *)) { flex: none; margin-top: 2px; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--line-2); font-size: 10px; line-height: 1; color: transparent; }
.ocheck.done:not(:where(.sim-stage *)) { border-color: transparent; background: var(--ok); color: var(--bg); }
.ocap:not(:where(.sim-stage *)) { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }

/* Drawer (phones and tablets) */
.drawer:not(:where(.sim-stage *)) { position: fixed; inset: 0; z-index: 50; display: flex; }
.drawer[hidden]:not(:where(.sim-stage *)) { display: none; }
.drawer-bg:not(:where(.sim-stage *)) { position: absolute; inset: 0; background: color-mix(in srgb, var(--bg) 80%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.drawer-panel:not(:where(.sim-stage *)) { position: relative; display: flex; flex-direction: column; height: 100%; width: 300px; max-width: 85vw; border-right: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 95%, transparent); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); box-shadow: 0 25px 50px -12px var(--shadow); }
.drawer-head:not(:where(.sim-stage *)) { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line); padding: 16px; }
.drawer-title:not(:where(.sim-stage *)) { margin: 2px 0 0; font: 600 16px/1.375 var(--font-display); }
.drawer-close:not(:where(.sim-stage *)) { border: 0; border-radius: 8px; background: none; padding: 4px 8px; color: var(--dim); }
.drawer-close:hover:not(:where(.sim-stage *)) { color: var(--ink); }
.drawer-body:not(:where(.sim-stage *)) { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }
html.drawer-open:not(:where(.sim-stage *)) { overflow: hidden; }

/* Module steps: 1 Learn → 2 Try it → 3 Finish (frad ModuleNav). The active step is the
   course-coloured pill with the violet ring of the founder's screenshot. */
.steps-nav:not(:where(.sim-stage *)) { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 6px; border-radius: 16px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 60%, transparent); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); width: fit-content; max-width: 100%; }
.steps-nav .stp:not(:where(.sim-stage *)) { display: flex; align-items: center; }
.steps-nav a:not(:where(.sim-stage *)) { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 12px; font-size: 13px; color: var(--muted); text-decoration: none; transition: background-color .16s ease, color .16s ease; }
.steps-nav a:hover:not(:where(.sim-stage *)) { color: var(--ink); background: var(--panel-2); }
.steps-nav a[aria-current="step"]:not(:where(.sim-stage *)) { background: var(--course); color: var(--on-course); font-weight: 600; box-shadow: 0 0 22px -8px var(--course); outline: 2px solid var(--accent); outline-offset: 2px; }
.steps-nav .n:not(:where(.sim-stage *)) { font: 500 10px var(--font-mono); letter-spacing: .13em; opacity: .7; }
.steps-nav .tick:not(:where(.sim-stage *)) { font-size: 12px; }
.steps-nav .arrow:not(:where(.sim-stage *)) { color: var(--dim); padding: 0 4px; }
.outcome:not(:where(.sim-stage *)) { margin: 16px 0 0; max-width: var(--measure); padding: 14px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--soft); }
.outcome .label-mono:not(:where(.sim-stage *)) { display: block; color: var(--accent-text); margin-bottom: 4px; }
.cta:not(:where(.sim-stage *)) { margin-top: 32px; padding: 18px 20px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.cta p:not(:where(.sim-stage *)) { margin: 0; font-weight: 600; font-size: 15.5px; }
.pn:not(:where(.sim-stage *)) { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 16px; font-size: 14px; }
.pn a:not(:where(.sim-stage *)) { color: var(--muted); text-decoration: none; max-width: 48%; }
.pn a:hover:not(:where(.sim-stage *)) { color: var(--ink); }
.pn .next:not(:where(.sim-stage *)) { text-align: right; margin-left: auto; }
.modcard:not(:where(.sim-stage *)) { margin-top: 26px; padding: 0; }
.modcard > summary:not(:where(.sim-stage *)) { cursor: pointer; padding: 16px 20px; font-weight: 600; list-style: none; display: flex; gap: 10px; align-items: center; }
.modcard > summary:not(:where(.sim-stage *))::-webkit-details-marker { display: none; }
.modcard > summary:not(:where(.sim-stage *))::before { content: "›"; color: var(--dim); transition: transform .15s; }
.modcard[open] > summary:not(:where(.sim-stage *))::before { transform: rotate(90deg); }
.modcard .body:not(:where(.sim-stage *)) { padding: 0 20px 18px; font-size: 14.5px; color: var(--muted); }
.modcard dl:not(:where(.sim-stage *)) { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.modcard dt:not(:where(.sim-stage *)) { color: var(--dim); font: 500 11px/2 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.modcard dd:not(:where(.sim-stage *)) { margin: 0; color: var(--soft); }
.sources:not(:where(.sim-stage *)) { margin: 6px 0 0; padding-left: 18px; }
.sources li:not(:where(.sim-stage *)) { margin-bottom: 4px; }
@media (max-width: 560px) { .modcard dl:not(:where(.sim-stage *)) { grid-template-columns: 1fr; } .modcard dd:not(:where(.sim-stage *)) { margin-bottom: 6px; } }
.safe:not(:where(.sim-stage *)) { margin: 0; font-size: 14.5px; color: var(--soft); }
.safe .label-mono:not(:where(.sim-stage *)) { color: var(--warn); margin-right: 6px; }
.try-head:not(:where(.sim-stage *)) { padding: 16px 20px; display: grid; gap: 8px; margin-bottom: 22px; }
.try-head p:not(:where(.sim-stage *)) { margin: 0; }
.empty:not(:where(.sim-stage *)) { padding: 28px; margin-top: 24px; }
.empty h2:not(:where(.sim-stage *)) { margin: 12px 0 6px; font: 600 24px/1.25 var(--font-display); letter-spacing: -0.02em; }
.empty p:not(:where(.sim-stage *)) { margin: 0; color: var(--muted); }
.badge-done:not(:where(.sim-stage *)) { color: var(--ok); }

/* ---------- Lesson content (the .lesson typography of frad's globals.css) ---------- */
.lesson:not(:where(.sim-stage *)) { --measure: 48rem; }
.lesson > *:not(:where(.sim-stage *)), .sec > *:not(:where(.sim-stage *)) { max-width: var(--measure); }
.lesson .intro:not(:where(.sim-stage *)) { font-size: 16.5px; color: var(--ink); line-height: 1.7; }
.lesson h2:not(:where(.sim-stage *)) { font: 600 21px/1.3 var(--font-display); letter-spacing: -0.01em; margin: 34px 0 10px; text-wrap: balance; }
.lesson h3:not(:where(.sim-stage *)) { font: 600 17px/1.35 var(--font-display); margin: 0 0 8px; }
.lesson p:not(:where(.sim-stage *)) { margin: 0 0 14px; line-height: 1.75; color: var(--soft); }
.lesson ul:not(:where(.sim-stage *)), .lesson ol:not(:where(.sim-stage *)) { margin: 0 0 16px; padding-left: 22px; }
.lesson li:not(:where(.sim-stage *)) { margin-bottom: 7px; line-height: 1.65; color: var(--soft); }
.lesson li:not(:where(.sim-stage *))::marker { color: var(--accent); }
.lesson strong:not(:where(.sim-stage *)) { color: var(--ink); font-weight: 600; }
.lesson code:not(:where(.sim-stage *)) { font-family: var(--font-mono); font-size: .86em; background: var(--panel-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--accent-text); }
.lesson pre:not(:where(.sim-stage *)) { margin: 0; background: var(--well); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; white-space: pre-wrap; overflow-wrap: anywhere; }
.lesson pre code:not(:where(.sim-stage *)) { background: none; border: 0; padding: 0; color: var(--code-ink); font-size: 13px; line-height: 1.6; }
.blk:not(:where(.sim-stage *)) { margin: 0 0 18px; }

/* Sections: Studio gives each one its own light colour world (skins/studio.css). */
.sec:not(:where(.sim-stage *)) { position: relative; }

/* Term gloss */
.term:not(:where(.sim-stage *)) { border: 0; padding: 0; background: none; color: inherit; font: inherit; text-decoration: underline dotted var(--accent); text-underline-offset: 4px; cursor: help; }
.term[aria-expanded="true"]:not(:where(.sim-stage *)) { color: var(--accent-text); }
.gloss:not(:where(.sim-stage *)) { display: inline; margin-left: 4px; padding: 1px 8px; border-radius: 6px; background: var(--panel-2); border: 1px solid var(--line); font-size: .92em; color: var(--soft); }

/* Tip and callouts */
.tip:not(:where(.sim-stage *)) { padding: 12px 16px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--info) 30%, transparent); background: color-mix(in srgb, var(--info) 8%, transparent); }
.tip p:not(:where(.sim-stage *)) { margin: 0; font-size: 14.5px; }
.tip .label-mono:not(:where(.sim-stage *)) { color: var(--info); margin-right: 8px; }
.callout:not(:where(.sim-stage *)) { padding: 14px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); border-left: 4px solid var(--tone, var(--accent)); }
.callout > .label-mono:not(:where(.sim-stage *)) { color: var(--tone, var(--accent-text)); margin: 0 0 4px; }
.callout p:last-child:not(:where(.sim-stage *)) { margin-bottom: 0; }
.callout--warn:not(:where(.sim-stage *)) { --tone: var(--warn); }
.callout--law:not(:where(.sim-stage *)) { --tone: var(--info); }
.callout--info:not(:where(.sim-stage *)) { --tone: var(--info); }
.callout--bottomline:not(:where(.sim-stage *)) { --tone: var(--accent); }
.callout--bottomline > div > p:not(:where(.sim-stage *)) { font-size: 17px; color: var(--ink); }

/* Table: scrolls inside its own box, folds into cards on a phone */
.table-wrap:not(:where(.sim-stage *)) { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow-x: auto; }
.table-wrap table:not(:where(.sim-stage *)) { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.table-wrap caption:not(:where(.sim-stage *)) { text-align: left; padding: 10px 14px 0; color: var(--dim); font: 500 11px var(--font-mono); letter-spacing: .12em; text-transform: uppercase; }
.table-wrap th:not(:where(.sim-stage *)), .table-wrap td:not(:where(.sim-stage *)) { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.table-wrap th:not(:where(.sim-stage *)) { color: var(--ink); font-weight: 600; background: var(--panel-2); }
.table-wrap td:not(:where(.sim-stage *)) { color: var(--soft); }
.table-wrap tr:last-child td:not(:where(.sim-stage *)) { border-bottom: 0; }
@media (max-width: 560px) {
  .table-wrap.stack thead:not(:where(.sim-stage *)) { display: none; }
  .table-wrap.stack tr:not(:where(.sim-stage *)) { display: block; padding: 10px 0; border-bottom: 1px solid var(--line); }
  .table-wrap.stack td:not(:where(.sim-stage *)) { display: block; border: 0; padding: 3px 14px; }
  .table-wrap.stack td[data-label]:not(:where(.sim-stage *))::before { content: attr(data-label); display: block; color: var(--dim); font: 500 10.5px var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
}

/* Case */
.case:not(:where(.sim-stage *)) { margin: 0 0 18px; padding: 18px 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); }
.case > .label-mono:not(:where(.sim-stage *)) { color: var(--accent-text); margin: 0 0 6px; }
.case.case-world > .label-mono:not(:where(.sim-stage *)) { color: var(--info); }
.case figcaption:not(:where(.sim-stage *)) { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }

/* Figure and sim */
.fig:not(:where(.sim-stage *)), .sim { margin: 0 0 20px; }
.fig .art:not(:where(.sim-stage *)), .sim-stage { border-radius: 16px; border: 1px solid var(--line); background: var(--panel); overflow: hidden; }
.fig .art:not(:where(.sim-stage *)) { padding: 14px; display: grid; place-items: center; color: var(--ink); }
.fig .art img:not(:where(.sim-stage *)) { display: block; border-radius: 8px; }
.fig .art svg:not(:where(.sim-stage *)) { width: 100%; height: auto; display: block; }
.fig figcaption:not(:where(.sim-stage *)), .sim figcaption { margin-top: 8px; font-size: 13.5px; color: var(--dim); }
.sim-stage { min-height: 120px; padding: 16px; }
.sim-fallback { color: var(--muted); font-size: 14px; }

/* Interactive: choice, decision, sorter, quiz */
.ia:not(:where(.sim-stage *)) { padding: 20px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.ia > .label-mono:not(:where(.sim-stage *)) { color: var(--accent-text); margin: 0 0 8px; }
.ia .q-text:not(:where(.sim-stage *)) { font: 600 18px/1.4 var(--font-display); margin: 0 0 14px; color: var(--ink); overflow-wrap: anywhere; }
.opts:not(:where(.sim-stage *)) { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
/* long file names and formulas break instead of widening the page on phones */
.lesson :is(p, li, .opt):not(:where(.sim-stage *)) { overflow-wrap: anywhere; }
.opt:not(:where(.sim-stage *)) { width: 100%; text-align: left; display: grid; grid-template-columns: 26px 1fr; gap: 4px 12px; align-items: start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 15px; line-height: 1.45; }
button.opt:hover:not(:disabled):not(:where(.sim-stage *)), label.opt:hover:not(:where(.sim-stage *)) { background: var(--panel-2); }
.opt .mark:not(:where(.sim-stage *)) { width: 24px; height: 24px; border-radius: 99px; border: 1px solid var(--line-2); display: grid; place-items: center; font: 600 11px var(--font-mono); color: var(--muted); }
.opt input:not(:where(.sim-stage *)) { position: absolute; opacity: 0; width: 1px; height: 1px; }
label.opt:not(:where(.sim-stage *)) { position: relative; cursor: pointer; }
label.opt:has(input:checked):not(:where(.sim-stage *)), button.opt[aria-pressed="true"]:not(:where(.sim-stage *)) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
label.opt:has(input:focus-visible):not(:where(.sim-stage *)) { outline: 2px solid var(--focus, var(--accent)); outline-offset: 2px; }
.opt .why:not(:where(.sim-stage *)) { grid-column: 2; font-size: 14px; color: var(--muted); line-height: 1.55; }
.opt.right:not(:where(.sim-stage *)) { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 9%, transparent); }
.opt.right .mark:not(:where(.sim-stage *)) { border-color: var(--ok); color: var(--ok); }
.opt.wrong:not(:where(.sim-stage *)) { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 8%, transparent); }
.opt.wrong .mark:not(:where(.sim-stage *)) { border-color: var(--bad); color: var(--bad); }
.opt.missed:not(:where(.sim-stage *)) { border-style: dashed; border-color: var(--ok); }
.opt:disabled:not(:where(.sim-stage *)), label.opt.locked:not(:where(.sim-stage *)) { cursor: default; }
.verdict:not(:where(.sim-stage *)) { margin-top: 14px; padding: 10px 14px; border-radius: 12px; font-size: 14.5px; }
.verdict:empty:not(:where(.sim-stage *)) { display: none; }
.verdict.good:not(:where(.sim-stage *)) { border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 8%, transparent); }
.verdict.bad:not(:where(.sim-stage *)) { border: 1px solid color-mix(in srgb, var(--bad) 45%, transparent); background: color-mix(in srgb, var(--bad) 7%, transparent); }
.verdict strong:not(:where(.sim-stage *)) { color: var(--ink); }
.row:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin-top: 16px; }
.row.end:not(:where(.sim-stage *)) { justify-content: flex-end; }
.hint:not(:where(.sim-stage *)) { display: block; margin-top: 4px; font: 400 13.5px var(--font-body); color: var(--dim); }
.qbar:not(:where(.sim-stage *)) { height: 5px; border-radius: 99px; background: var(--panel-2); overflow: hidden; margin: 8px 0 18px; }
.qbar span:not(:where(.sim-stage *)) { display: block; height: 100%; background: var(--accent); transition: width .4s ease; }
fieldset.q:not(:where(.sim-stage *)) { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.q legend:not(:where(.sim-stage *)) { padding: 0; margin-bottom: 14px; width: 100%; }
.score:not(:where(.sim-stage *)) { font: 600 46px/1 var(--font-display); letter-spacing: -0.02em; margin: 10px 0 6px; }
.score small:not(:where(.sim-stage *)) { font-size: 22px; color: var(--muted); }
.missed-list:not(:where(.sim-stage *)) { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.missed-list li:not(:where(.sim-stage *)) { padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel-2); font-size: 14.5px; }
.sort-card:not(:where(.sim-stage *)) { padding: 16px 18px; border-radius: 14px; border: 1px dashed var(--line-2); background: var(--panel-2); font-size: 16px; color: var(--ink); margin-bottom: 12px; }
.bins:not(:where(.sim-stage *)) { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bins .opt:not(:where(.sim-stage *)) { grid-template-columns: 1fr; text-align: center; font-weight: 600; }
.expert:not(:where(.sim-stage *)) { margin-top: 14px; padding: 14px 16px; border-radius: 12px; border-left: 3px solid var(--info); background: color-mix(in srgb, var(--info) 7%, transparent); }
.expert .label-mono:not(:where(.sim-stage *)) { color: var(--info); display: block; margin-bottom: 4px; }
.expert p:last-child:not(:where(.sim-stage *)) { margin-bottom: 0; }

/* Try it steps */
.steps-flow:not(:where(.sim-stage *)) { list-style: none; margin: 0 0 18px; padding: 0; counter-reset: s; }
.step:not(:where(.sim-stage *)) { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 14px; position: relative; padding-bottom: 22px; }
.step:not(:where(.sim-stage *))::before { content: ""; position: absolute; left: 14px; top: 32px; bottom: 4px; width: 1px; background: var(--line); }
.step:last-child:not(:where(.sim-stage *))::before { display: none; }
.step .num:not(:where(.sim-stage *)) { width: 30px; height: 30px; border-radius: 99px; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 700 12px var(--font-mono); }
.step h3:not(:where(.sim-stage *)) { margin: 3px 0 4px; }
.step .where:not(:where(.sim-stage *)) { margin: 0 0 6px; color: var(--info); }
.step p:not(:where(.sim-stage *)) { margin-bottom: 8px; }
.prompt:not(:where(.sim-stage *)) { margin: 8px 0; position: relative; }
.prompt .copy:not(:where(.sim-stage *)) { position: absolute; top: 8px; right: 8px; border: 1px solid #3d3757; background: #1f1c31; color: #dbd1da; border-radius: 8px; padding: 4px 10px; font-size: 12.5px; }
.prompt pre:not(:where(.sim-stage *)) { padding-right: 84px; }
.check-line:not(:where(.sim-stage *)) { margin: 6px 0 0; font-size: 14px; color: var(--ok); }
.good:not(:where(.sim-stage *)) { margin-top: 6px; padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent); background: color-mix(in srgb, var(--ok) 6%, transparent); }
.good > .label-mono:not(:where(.sim-stage *)) { color: var(--ok); margin: 0 0 8px; }
.good ul:not(:where(.sim-stage *)) { list-style: none; padding: 0; margin: 0; }
.good li:not(:where(.sim-stage *)) { margin: 0 0 6px; }
.good label:not(:where(.sim-stage *)) { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--soft); }
.good input:not(:where(.sim-stage *)), .handin input:not(:where(.sim-stage *)) { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }

/* Practical, take-away, discussion */
.practical:not(:where(.sim-stage *)), .takeaway:not(:where(.sim-stage *)), .discussion:not(:where(.sim-stage *)) { padding: 20px 22px; border-radius: 18px; border: 1px solid var(--line); background: var(--panel); }
.practical > .label-mono:not(:where(.sim-stage *)), .takeaway > .label-mono:not(:where(.sim-stage *)), .discussion > .label-mono:not(:where(.sim-stage *)) { color: var(--accent-text); margin: 0 0 6px; }
.reviewer:not(:where(.sim-stage *)) { font-size: 14.5px; }
.handin:not(:where(.sim-stage *)) { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: var(--panel-2); cursor: pointer; }
.handin-how:not(:where(.sim-stage *)) { font-size: 14.5px; }
.handin-state:not(:where(.sim-stage *)) { margin: 8px 0 0; color: var(--muted); }
/* modules whose Finish is a practical a person scores: tag on cards and outline rows, one line on the lesson page */
.prac-tag:not(:where(.sim-stage *)) { color: var(--accent-text); font-weight: 600; }
.prac-mark:not(:where(.sim-stage *)) { color: var(--muted); font-size: 12.5px; }
.prac-line:not(:where(.sim-stage *)) { margin: 10px 0 0; font-size: 15px; color: var(--muted); }
.prac-line .label-mono:not(:where(.sim-stage *)) { display: block; color: var(--accent-text); margin-bottom: 2px; }
.next-open:not(:where(.sim-stage *)) { display: block; margin-top: 12px; color: var(--accent-text); text-transform: none; }
.takeaway .bl:not(:where(.sim-stage *)) { font-size: 17px; color: var(--ink); }
.print-btn:not(:where(.sim-stage *)) { margin-top: 6px; }

/* Workbench blocks: code, file tree, terminal and notebook, starter file, verification checklist, hints.
   Code and terminal sit in the dark well in both themes (like the Try it prompt), so their head bar uses
   the well's fixed colours; the tree, notebook, starter, checklist and hints use the theme tokens. */
.wb-head:not(:where(.sim-stage *)) { display: flex; align-items: center; gap: 10px; min-height: 38px; padding: 5px 8px 5px 14px; border-bottom: 1px solid var(--line); color: var(--dim); }
.wb-head .label-mono:not(:where(.sim-stage *)) { flex: none; }
.wb-title:not(:where(.sim-stage *)) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 12.5px var(--font-mono); color: var(--soft); }
.wb-head .copy:not(:where(.sim-stage *)) { margin-left: auto; flex: none; border: 1px solid var(--line-2); background: var(--panel-2); color: var(--soft); border-radius: 8px; padding: 3px 10px; font-size: 12.5px; }
.codeblk:not(:where(.sim-stage *)), figure.term:not(:where(.sim-stage *)) { border: 1px solid var(--line); border-radius: 12px; background: var(--well); overflow: hidden; }
.codeblk .wb-head:not(:where(.sim-stage *)), .term .wb-head:not(:where(.sim-stage *)) { border-bottom-color: #2c2843; color: #8f8199; }
.codeblk .wb-title:not(:where(.sim-stage *)) { color: #dbd1da; }
.codeblk .copy:not(:where(.sim-stage *)), .term .copy:not(:where(.sim-stage *)) { border-color: #3d3757; background: #1f1c31; color: #dbd1da; }
.lesson .codeblk pre:not(:where(.sim-stage *)), .lesson .term pre:not(:where(.sim-stage *)), .lesson .nb pre:not(:where(.sim-stage *)), .lesson .starter pre:not(:where(.sim-stage *)) { white-space: pre; overflow-wrap: normal; overflow-x: auto; tab-size: 2; }
.lesson .codeblk pre:not(:where(.sim-stage *)) { border: 0; border-radius: 0; }
.codeblk figcaption:not(:where(.sim-stage *)), .term figcaption:not(:where(.sim-stage *)) { padding: 8px 14px; border-top: 1px solid #2c2843; font-size: 13px; color: #bcaaba; }
.term-body:not(:where(.sim-stage *)) { padding: 10px 0; overflow-x: auto; }
.lesson .term pre:not(:where(.sim-stage *)) { border: 0; border-radius: 0; padding: 0 16px; background: none; font: 13px/1.6 var(--font-mono); color: var(--code-ink); }
.lesson .term pre code:not(:where(.sim-stage *)), .lesson .term samp:not(:where(.sim-stage *)) { font: inherit; }
.lesson .term .t-in + .t-in:not(:where(.sim-stage *)), .lesson .term .t-out + .t-in:not(:where(.sim-stage *)) { margin-top: 8px; }
.term .ps:not(:where(.sim-stage *)) { color: #6fd3b0; user-select: none; }
.lesson .term .t-out:not(:where(.sim-stage *)) { color: #a99bb0; }
.ftree:not(:where(.sim-stage *)), .nb:not(:where(.sim-stage *)) { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); overflow: hidden; }
.ftree-body:not(:where(.sim-stage *)) { padding: 10px 14px 12px; overflow-x: auto; font: 13px/1.7 var(--font-mono); }
.lesson .ftree ul:not(:where(.sim-stage *)) { list-style: none; margin: 0; padding: 0; }
.lesson .ftree ul ul:not(:where(.sim-stage *)) { margin-left: 6px; padding-left: 14px; border-left: 1px solid var(--line-2); }
.lesson .ftree li:not(:where(.sim-stage *)) { margin: 0; line-height: 1.7; color: var(--soft); }
.ftree .dir > .fname:not(:where(.sim-stage *)) { color: var(--accent-text); font-weight: 600; }
.ftree .fnote:not(:where(.sim-stage *)) { color: var(--dim); font-family: var(--font-body); font-size: 13px; }
.ftree .fnote:not(:where(.sim-stage *))::before { content: " — "; }
.ftree figcaption:not(:where(.sim-stage *)), .nb figcaption:not(:where(.sim-stage *)), .starter figcaption:not(:where(.sim-stage *)) { padding: 8px 14px; border-top: 1px solid var(--line); font-size: 13px; color: var(--dim); }
.nb-body:not(:where(.sim-stage *)) { padding: 10px 12px; display: grid; gap: 6px; }
.cell:not(:where(.sim-stage *)) { display: grid; grid-template-columns: 4.6em minmax(0, 1fr); gap: 8px; align-items: start; }
.cell .gut:not(:where(.sim-stage *)) { padding-top: 8px; font: 11.5px var(--font-mono); color: var(--info); text-align: right; white-space: nowrap; }
.cell.out .gut:not(:where(.sim-stage *)) { color: var(--coral); }
.lesson .nb pre:not(:where(.sim-stage *)) { padding: 8px 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel-2); font: 13px/1.6 var(--font-mono); color: var(--ink); }
.lesson .nb .out pre:not(:where(.sim-stage *)) { background: transparent; border-color: transparent; color: var(--soft); }
.lesson .nb pre code:not(:where(.sim-stage *)), .lesson .nb samp:not(:where(.sim-stage *)) { font: inherit; background: none; border: 0; padding: 0; color: inherit; }
@media (max-width: 480px) { .cell:not(:where(.sim-stage *)) { grid-template-columns: minmax(0, 1fr); gap: 0; } .cell .gut:not(:where(.sim-stage *)) { text-align: left; padding-top: 2px; } }
.starter:not(:where(.sim-stage *)) { padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); }
.starter-top:not(:where(.sim-stage *)) { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.file-ico:not(:where(.sim-stage *)) { flex: none; color: var(--accent-text); }
.starter-top .label-mono:not(:where(.sim-stage *)) { margin: 0; color: var(--accent-text); }
.lesson .starter-name:not(:where(.sim-stage *)) { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.starter .row:not(:where(.sim-stage *)) { margin-top: 6px; justify-content: flex-start; }
.starter .copy:not(:where(.sim-stage *)) { padding: 10px 16px; }
.starter-view:not(:where(.sim-stage *)) { margin-top: 12px; }
.starter-view > summary:not(:where(.sim-stage *)) { cursor: pointer; font-size: 14px; color: var(--accent-text); }
.lesson .starter-view pre:not(:where(.sim-stage *)) { margin-top: 8px; max-height: 320px; overflow: auto; }
.verify:not(:where(.sim-stage *)) { padding: 16px 18px; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--info) 35%, transparent); background: color-mix(in srgb, var(--info) 6%, transparent); }
.verify[data-all]:not(:where(.sim-stage *)) { border-color: color-mix(in srgb, var(--ok) 45%, transparent); }
.verify-head:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.verify-head .label-mono:not(:where(.sim-stage *)) { margin: 0; color: var(--info); }
.verify-head .count:not(:where(.sim-stage *)) { color: var(--dim); }
.verify[data-all] .count:not(:where(.sim-stage *)) { color: var(--ok); }
.lesson .verify ul:not(:where(.sim-stage *)) { list-style: none; padding: 0; margin: 0; }
.verify li:not(:where(.sim-stage *)) { margin: 0 0 8px; }
.verify label:not(:where(.sim-stage *)) { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; color: var(--soft); }
.verify input:not(:where(.sim-stage *)) { width: 18px; height: 18px; margin-top: 3px; accent-color: var(--accent); flex: none; }
.verify .how:not(:where(.sim-stage *)) { display: block; margin-top: 2px; font-size: 14px; color: var(--muted); }
.hints > .label-mono:not(:where(.sim-stage *)) { margin: 0 0 8px; color: var(--dim); }
.hint:not(:where(.sim-stage *)) { border: 1px dashed var(--line-2); border-radius: 12px; padding: 0 14px; margin-bottom: 8px; background: var(--panel); }
.hint > summary:not(:where(.sim-stage *)) { cursor: pointer; padding: 10px 0; font-weight: 600; font-size: 14.5px; list-style: none; display: flex; gap: 8px; align-items: center; }
.hint > summary:not(:where(.sim-stage *))::-webkit-details-marker { display: none; }
.hint > summary:not(:where(.sim-stage *))::before { content: "›"; color: var(--dim); transition: transform .15s; }
.hint[open] > summary:not(:where(.sim-stage *))::before { transform: rotate(90deg); }
.hint > div:not(:where(.sim-stage *)) { padding-bottom: 4px; }

@media print {
  .top:not(:where(.sim-stage *)), .rail:not(:where(.sim-stage *)), .rail-stub:not(:where(.sim-stage *)), .outline-bar:not(:where(.sim-stage *)), .outline-tab:not(:where(.sim-stage *)), .drawer:not(:where(.sim-stage *)), .steps-nav:not(:where(.sim-stage *)), .cta:not(:where(.sim-stage *)), .pn:not(:where(.sim-stage *)), .crumbs:not(:where(.sim-stage *)), .print-btn:not(:where(.sim-stage *)) { display: none !important; }
  .shell:not(:where(.sim-stage *)) { display: block; padding-left: 0; }
  body { background: #fff; color: #000; }
  html[data-print] body * { visibility: hidden; }
  html[data-print] [data-printing], html[data-print] [data-printing] * { visibility: visible; }
  html[data-print] [data-printing] { position: absolute; inset: 0 auto auto 0; width: 100%; border: 0; }
  .gloss[hidden]:not(:where(.sim-stage *)) { display: inline !important; }
}
/* Syllabus: the learning-path toggle (Essentials, Practitioner, Full) above the lessons. */
.path-bar:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 36px 0 4px; }
.path-pick:not(:where(.sim-stage *)) { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel); }
.path-pick button:not(:where(.sim-stage *)) { display: inline-flex; align-items: baseline; gap: 8px; border: 0; border-radius: 999px; padding: 8px 16px; background: none; color: var(--soft); font: 500 15px/1.2 var(--font-body); cursor: pointer; white-space: nowrap; }
.path-pick button .label-mono:not(:where(.sim-stage *)) { font-size: 11px; color: var(--muted); text-transform: none; }
.path-pick button:hover:not(:where(.sim-stage *)) { color: var(--ink); }
.path-pick button[aria-pressed="true"]:not(:where(.sim-stage *)) { background: color-mix(in srgb, var(--course) 16%, var(--panel-2)); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--course) 40%, transparent); }
.path-pick button:focus-visible:not(:where(.sim-stage *)) { outline: 2px solid var(--course); outline-offset: 2px; }
.path-note:not(:where(.sim-stage *)) { margin: 0; color: var(--muted); font-size: 14px; }
@media (max-width: 480px) { .path-pick:not(:where(.sim-stage *)) { width: 100%; } .path-pick button:not(:where(.sim-stage *)) { flex: 1; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; } }

/* Company kit (plan 2026-10-15): brand fonts the kit may pick, logo, practice banner, notes */
@font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-var-latin.woff2") format("woff2"); font-weight: 200 900; font-display: swap; }
@font-face { font-family: "Inter"; src: url("fonts/inter-var-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
.brand-logo { height: 26px; width: auto; max-width: 120px; object-fit: contain; vertical-align: middle; margin-right: 10px; border-radius: 4px; }
.kit-note { margin: 12px 0 18px; padding: 10px 14px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--panel); color: var(--muted); font-size: .92rem; }
.kit-note strong { color: var(--ink); }
.kit-sys { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--panel-2); }
.kit-sys ul { margin: 6px 0 0; padding-left: 18px; }
.kit-rules { margin: 0 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--panel); }
.kit-rules ul { margin: 4px 0 8px; padding-left: 18px; }
.kit-warn { color: var(--warn); font-size: .9rem; }
/* system packs (kit 4.6): "In your system: <title>" at the end of Learn */
.kit-pack { margin: 24px 0 0; padding: 14px 16px; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); background: var(--panel); }
.kit-pack h3 { margin: 0; font-size: 1.05rem; }
.kit-pack .pk-covers, .kit-pack .pk-src, .kit-pack .pk-dl span { color: var(--muted); font-size: .88rem; }
.kit-pack .pk-covers { margin: 4px 0 10px; }
.kit-pack details { border-top: 1px solid var(--line); padding: 8px 0; }
.kit-pack summary { cursor: pointer; font-weight: 600; }
.kit-pack ol, .kit-pack ul { margin: 6px 0 8px; padding-left: 20px; }
.kit-pack .pk-file { color: var(--accent-text); font-weight: 600; }
.kit-pack .pk-src a { color: inherit; }
.kit-pack .pk-rules { border-top: 1px solid var(--line); padding-top: 8px; font-size: .92rem; }
/* completion certificate (Phase 4.4): A4 landscape when printed */
.cert-tools { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin: 0 0 18px; }
.cert-tools .field { display: grid; gap: 4px; font-size: .9rem; color: var(--muted); }
.cert { position: relative; aspect-ratio: 297 / 210; max-width: 960px; margin: 0 auto; padding: 6% 7%; box-sizing: border-box; background: #fff; color: #1d1f22;
  border: 1px solid var(--line); border-top: 14px solid var(--cert-primary); border-radius: 6px; display: flex; flex-direction: column; gap: 10px; font-size: clamp(11px, 1.6vw, 16px); }
.cert-top { display: flex; align-items: center; gap: 14px; }
.cert-logo { max-height: 3.4em; max-width: 30%; object-fit: contain; }
.cert-org { margin: 0; font-weight: 700; color: var(--cert-primary); } .cert-org span { font-weight: 400; color: #5b6168; }
.cert-kicker { margin: 1.4em 0 0; text-transform: uppercase; letter-spacing: .14em; font-size: .8em; color: var(--cert-accent); font-weight: 700; }
.cert-name { margin: 0; font-size: 2.6em; line-height: 1.1; color: #1d1f22; }
.cert-line { margin: 0; color: #5b6168; }
.cert-course { margin: 0; font-size: 1.6em; color: var(--cert-primary); }
.cert-meta { margin: 0; color: #5b6168; }
.cert-a4 { margin: auto 0 0; padding-top: .8em; border-top: 1px solid #e3e5e8; font-size: .9em; color: #3a3f45; }
.cert-foot { display: flex; justify-content: space-between; gap: 12px; font-size: .78em; color: #5b6168; }
/* the operator's legal notice, on every page frame (light theme by default, like the rest of the player) */
.legal-foot { padding: 28px 24px 32px; text-align: center; font-size: 13px; color: var(--muted); }
.legal-foot a { color: inherit; }
@media print {
  @page { size: A4 landscape; margin: 0; }
  header.top, .cert-hide { display: none !important; }
  main.wrap { padding: 0 !important; max-width: none !important; }
  .cert { border-radius: 0; max-width: none; width: 297mm; height: 210mm; border-left: 0; border-right: 0; border-bottom: 0; font-size: 15px; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---------- course list: search and team filters above the photo cards (founder, 16 Oct 2026) ---------- */
/* one row on wide screens: the filters from the left edge, the search filling the rest up to the right edge */
.clist-tools:not(:where(.sim-stage *)) { margin: 18px 0 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.clist-search:not(:where(.sim-stage *)) { flex: 1 1 260px; min-width: 0; }
.clist-search .input:not(:where(.sim-stage *)) { width: 100%; height: 40px; padding: 0 16px; border-radius: 999px; font-size: 15px; }
.clist-chips:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; gap: 6px; }
@media (max-width: 1099px) { .clist-search:not(:where(.sim-stage *)) { order: -1; flex-basis: 100%; } }
.clist-chips button:not(:where(.sim-stage *)) { height: 40px; padding: 0 16px; white-space: nowrap; border-radius: 999px; border: 1px solid var(--line, rgba(0,0,0,.12)); background: var(--panel);
  color: var(--muted); font: 500 14px/1 var(--font-body, inherit); cursor: pointer; }
.clist-chips button[aria-pressed="true"]:not(:where(.sim-stage *)) { background: var(--ink, #131218); color: #fff; border-color: transparent; }
.clist-none:not(:where(.sim-stage *)) { margin-top: 18px; color: var(--muted); }
.linkish:not(:where(.sim-stage *)) { background: none; border: 0; padding: 0; color: var(--course, #6c3fa6); font: inherit; text-decoration: underline; cursor: pointer; }
.ccard[hidden]:not(:where(.sim-stage *)) { display: none; }

/* ---------------- the AI assistant (coach.js, spec 5.2): a side panel, a full-screen sheet on phones */
.coach-btn:not(:where(.sim-stage *)) { position: fixed; right: 18px; bottom: 18px; z-index: 40; border: 1px solid var(--line-2); border-radius: 999px; padding: 11px 18px; background: var(--panel); color: var(--ink); font: 600 14px/1 var(--font-body); box-shadow: 0 10px 30px -12px var(--shadow); cursor: pointer; }
.coach-btn[aria-expanded="true"]:not(:where(.sim-stage *)) { display: none; }
.coach-panel:not(:where(.sim-stage *)) { position: fixed; top: 0; right: 0; bottom: 0; z-index: 50; width: min(400px, 100vw); display: flex; flex-direction: column; background: var(--panel); color: var(--ink); border-left: 1px solid var(--line); box-shadow: -18px 0 40px -24px var(--shadow); }
.coach-panel[hidden]:not(:where(.sim-stage *)) { display: none; }
.coach-head:not(:where(.sim-stage *)) { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line); }
.coach-head h2:not(:where(.sim-stage *)) { margin: 0; font: 600 16px/1.2 var(--font-display); }
.coach-x:not(:where(.sim-stage *)) { border: 0; background: none; color: var(--muted); font-size: 18px; cursor: pointer; padding: 4px 8px; }
.coach-log:not(:where(.sim-stage *)) { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.coach-msg:not(:where(.sim-stage *)) { margin: 0; padding: 10px 12px; border-radius: var(--radius-sm); font-size: 14px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; max-width: 92%; }
.coach-msg p:not(:where(.sim-stage *)) { margin: 0; }
.coach-notice:not(:where(.sim-stage *)) { max-width: none; background: var(--panel-2); color: var(--muted); font-size: 13px; }
.coach-me:not(:where(.sim-stage *)) { align-self: flex-end; background: color-mix(in srgb, var(--accent) 14%, var(--panel)); }
.coach-ai:not(:where(.sim-stage *)) { align-self: flex-start; border: 1px solid var(--line); }
.coach-wait:not(:where(.sim-stage *)) { color: var(--dim); }
.coach-src:not(:where(.sim-stage *)) { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px !important; white-space: normal; }
.coach-form:not(:where(.sim-stage *)) { border-top: 1px solid var(--line); padding: 12px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.coach-fixed:not(:where(.sim-stage *)) { margin: 0; font-size: 12px; color: var(--muted); }
.coach-tried:not(:where(.sim-stage *)) { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.coach-form textarea:not(:where(.sim-stage *)) { width: 100%; box-sizing: border-box; resize: vertical; min-height: 64px; border: 1px solid var(--line-2); border-radius: var(--radius-sm); background: var(--bg); color: var(--ink); font: 14px/1.45 var(--font-body); padding: 9px 11px; }
.coach-row:not(:where(.sim-stage *)) { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-left:not(:where(.sim-stage *)) { color: var(--muted); font-size: 11px; }
.coach-send:not(:where(.sim-stage *)) { padding: 9px 16px; border: 0; cursor: pointer; }
.coach-send:disabled:not(:where(.sim-stage *)) { opacity: .5; cursor: default; }
.coach-err:not(:where(.sim-stage *)) { margin: 0; color: var(--bad); font-size: 13px; }
.coach-foot:not(:where(.sim-stage *)) { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; }
.coach-dl:not(:where(.sim-stage *)) { color: var(--muted); }
@media (max-width: 640px) {
  .coach-panel:not(:where(.sim-stage *)) { width: 100vw; border-left: 0; box-shadow: none; }
  .coach-btn:not(:where(.sim-stage *)) { right: 12px; bottom: 12px; }
  html.coach-open:not(:where(.sim-stage *)) { overflow: hidden; }
}