/* ==========================================================================
   Design system
   --------------------------------------------------------------------------
   1. Fonts           5. Buttons & forms      9. Roadmap & levels
   2. Tokens          6. Surfaces & status   10. Lesson & blocks
   3. Base            7. Site chrome         11. Editor & console
   4. Layout          8. Dashboard/profile   12. Landing, auth, misc
   ========================================================================== */

/* 1. Fonts ---------------------------------------------------------------- */
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../fonts/bricolage-grotesque-latin-wght-normal.ada540c0e24a.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-normal.202cfb54d4e6.woff2") format("woff2");
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: "Figtree";
  src: url("../fonts/figtree-latin-wght-italic.61af1a2947a4.woff2") format("woff2");
  font-weight: 300 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/jetbrains-mono-latin-wght-normal.b058178d7f30.woff2") format("woff2");
  font-weight: 100 800;
  font-display: swap;
}

/* 2. Tokens --------------------------------------------------------------- */
:root {
  color-scheme: light;

  --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* type scale (1rem = 16px) */
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-md: 1.25rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: clamp(2.1rem, 1.6rem + 2vw, 2.9rem);
  --fs-3xl: clamp(2.6rem, 1.8rem + 3.6vw, 4.4rem);

  /* spacing (4px grid) */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;

  --w-prose: 43rem;
  --w-content: 58rem;
  --w-page: 76rem;
  --gutter: clamp(1rem, 4vw, 2rem);

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;

  /* palette: warm paper + ink, one signal accent */
  --bg: #f6f5f1;
  --surface: #ffffff;
  --surface-2: #efede7;
  --surface-3: #e6e3db;
  --border: #e2ded5;
  --border-strong: #cbc6bb;
  --text: #17161b;
  --text-2: #56545e;
  --text-3: #817e89;

  --accent: #ff6a1f;
  --accent-hover: #ff7d3b;
  --accent-ink: #1c0d03;       /* text on accent */
  --accent-text: #c2410c;      /* accent used as text on light surfaces (AA) */
  --accent-soft: #ffeadb;

  --ok: #0f7a55;
  --ok-soft: #e1f3ea;
  --bad: #c42b2b;
  --bad-soft: #fbe8e6;
  --warn: #8a5a00;
  --warn-soft: #fff1cf;
  --info: #1d5bbf;
  --info-soft: #e6effc;

  /* code surfaces are dark in both themes */
  --code-bg: #15161b;
  --code-bg-2: #1c1d24;
  --code-border: #2a2c35;
  --code-text: #e7e7ec;
  --code-muted: #7e8392;
  --tok-keyword: #ff9352;
  --tok-string: #a6dc84;
  --tok-number: #80c8ff;
  --tok-comment: #7e8392;
  --tok-builtin: #f3c969;
  --tok-def: #c9b3ff;
  --tok-op: #e7e7ec;

  --shadow-sm: 0 1px 2px rgba(23, 22, 27, 0.06);
  --shadow-md: 0 6px 24px -8px rgba(23, 22, 27, 0.14);
  --shadow-lg: 0 18px 50px -20px rgba(23, 22, 27, 0.3);
  --focus: 0 0 0 3px color-mix(in srgb, var(--accent) 45%, transparent);

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur: 180ms;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f0f12;
  --surface: #17171c;
  --surface-2: #1e1e25;
  --surface-3: #26262e;
  --border: #2a2a33;
  --border-strong: #3a3a45;
  --text: #edecf1;
  --text-2: #adabb8;
  --text-3: #7f7d8a;
  --accent: #ff7a33;
  --accent-hover: #ff8f55;
  --accent-text: #ff9a5e;
  --accent-soft: #3a2012;
  --ok: #45c48f;
  --ok-soft: #10281f;
  --bad: #ff7b72;
  --bad-soft: #321716;
  --warn: #f0b93e;
  --warn-soft: #2d2410;
  --info: #7fb0ff;
  --info-soft: #152238;
  --code-bg: #0b0c10;
  --code-bg-2: #13141a;
  --code-border: #262833;
  --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
  --shadow-lg: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
    color-scheme: dark;
    --bg: #0f0f12;
    --surface: #17171c;
    --surface-2: #1e1e25;
    --surface-3: #26262e;
    --border: #2a2a33;
    --border-strong: #3a3a45;
    --text: #edecf1;
    --text-2: #adabb8;
    --text-3: #7f7d8a;
    --accent: #ff7a33;
    --accent-hover: #ff8f55;
    --accent-text: #ff9a5e;
    --accent-soft: #3a2012;
    --ok: #45c48f;
    --ok-soft: #10281f;
    --bad: #ff7b72;
    --bad-soft: #321716;
    --warn: #f0b93e;
    --warn-soft: #2d2410;
    --info: #7fb0ff;
    --info-soft: #152238;
    --code-bg: #0b0c10;
    --code-bg-2: #13141a;
    --code-border: #262833;
    --shadow-md: 0 6px 24px -8px rgba(0, 0, 0, 0.6);
    --shadow-lg: 0 18px 50px -20px rgba(0, 0, 0, 0.8);
  }
}

/* 3. Base ----------------------------------------------------------------- */
[hidden] { display: none !important; }
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: 5rem;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main {
  flex: 1;
}
h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.12;
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-3);
  font-weight: 700;
  text-wrap: balance;
}
h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }
p { margin: 0 0 var(--sp-4); text-wrap: pretty; }
a {
  color: inherit;
  text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
  text-underline-offset: 0.18em;
}
a:hover { text-decoration-color: currentColor; }
img, svg { max-width: 100%; }
code, kbd, pre { font-family: var(--font-mono); font-size: 0.9em; }
:not(pre) > code {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.05em 0.35em;
  font-size: 0.86em;
  white-space: nowrap;
}
kbd {
  border: 1px solid var(--border-strong);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 0 0.35em;
  font-size: 0.8em;
  background: var(--surface);
}
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }
ul, ol { padding-left: 1.3em; margin: 0 0 var(--sp-4); }
li + li { margin-top: 0.25em; }
::selection { background: color-mix(in srgb, var(--accent) 35%, transparent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -3rem;
  z-index: 100;
  background: var(--text);
  color: var(--bg);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-sm);
}
.skip-link:focus { top: var(--sp-3); }

.muted { color: var(--text-2); }
.subtle { color: var(--text-3); }
.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
  font-weight: 600;
  margin: 0 0 var(--sp-2);
}
.lead { font-size: var(--fs-md); color: var(--text-2); line-height: 1.5; }

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

/* 4. Layout --------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--w-page) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--w-prose) + 2 * var(--gutter)); }
.container--content { max-width: calc(var(--w-content) + 2 * var(--gutter)); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.row { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.row--between { justify-content: space-between; }
.page { padding-block: var(--sp-7) var(--sp-8); }
.page-head { margin-bottom: var(--sp-6); }
.page-head p { color: var(--text-2); max-width: 38rem; }
.grid-2 { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }

/* 5. Buttons & forms ------------------------------------------------------ */
.btn {
  --btn-bg: var(--surface);
  --btn-fg: var(--text);
  --btn-border: var(--border-strong);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0.55rem 1.1rem;
  border-radius: var(--r-md);
  border: 1px solid var(--btn-border);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 600 var(--fs-sm) / 1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:hover { --btn-bg: var(--surface-2); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: var(--focus); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }
.btn--primary {
  --btn-bg: var(--accent);
  --btn-fg: var(--accent-ink);
  --btn-border: color-mix(in srgb, var(--accent) 80%, #000);
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.14);
}
.btn--primary:hover { --btn-bg: var(--accent-hover); }
.btn--dark {
  --btn-bg: var(--text);
  --btn-fg: var(--bg);
  --btn-border: var(--text);
}
.btn--dark:hover { --btn-bg: color-mix(in srgb, var(--text) 85%, var(--bg)); }
.btn--ghost { --btn-bg: transparent; --btn-border: transparent; }
.btn--ghost:hover { --btn-bg: var(--surface-2); }
.btn--lg { min-height: 3.25rem; padding: 0.8rem 1.5rem; font-size: var(--fs-base); border-radius: var(--r-md); }
.btn--sm { min-height: 2.25rem; padding: 0.35rem 0.8rem; font-size: var(--fs-xs); }
.btn--block { width: 100%; }
.btn .arrow { transition: transform var(--dur) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1.1em; height: 1.1em;
  border-radius: 50%;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-btn {
  background: none; border: 0; padding: 0;
  font: inherit; color: var(--accent-text);
  cursor: pointer; text-decoration: underline; text-underline-offset: 0.18em;
}

.field { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-4); }
.field > label, .label { font-weight: 600; font-size: var(--fs-sm); }
.input, .field input[type="text"], .field input[type="email"], .field input[type="password"], .field select, .field textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: 0.65rem 0.85rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1rem;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.field textarea { min-height: 6rem; resize: vertical; }
.input:focus, .field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus);
}
.field .help { font-size: var(--fs-xs); color: var(--text-3); }
.field--error input { border-color: var(--bad); }
.errorlist {
  list-style: none;
  padding: 0;
  margin: 0;
  color: var(--bad);
  font-size: var(--fs-sm);
}
.errorlist li::before { content: "⚠ "; }
.checkbox { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); }
.checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--accent); }

/* choice cards (onboarding, quizzes) */
.choices { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
.choices legend { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-md); margin-bottom: var(--sp-3); padding: 0; }
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.8rem 1rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.choice:hover { border-color: var(--text-3); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .choice-mark {
  flex: none;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  transition: border-color var(--dur) var(--ease);
}
.choice input:checked + .choice-mark { border-color: var(--accent); }
.choice input:checked + .choice-mark::after {
  content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent);
}
.choice:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent-soft) 55%, var(--surface)); }
.choice:has(input:focus-visible) { box-shadow: var(--focus); }
.choice-text { flex: 1; min-width: 0; }
.choice-text code { white-space: pre-wrap; }

/* 6. Surfaces & status ---------------------------------------------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
}
.card--flush { padding: 0; overflow: hidden; }
.card h2, .card h3 { margin-bottom: var(--sp-2); }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.4em 0.6em;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.tag--accent { background: var(--accent-soft); color: var(--accent-text); }
.tag--ok { background: var(--ok-soft); color: var(--ok); }
.tag--bad { background: var(--bad-soft); color: var(--bad); }
.tag--info { background: var(--info-soft); color: var(--info); }
.tag--warn { background: var(--warn-soft); color: var(--warn); }
.tag--dark { background: var(--text); color: var(--bg); }

.progress {
  --value: 0%;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--surface-3);
  overflow: hidden;
}
.progress > span {
  display: block;
  height: 100%;
  width: var(--value);
  background: var(--accent);
  border-radius: inherit;
  transition: width 500ms var(--ease);
}
.progress--ok > span { background: var(--ok); }
.progress--thin { height: 0.3rem; }

.status-icon {
  flex: none;
  display: inline-grid;
  place-items: center;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  color: var(--text-3);
  background: var(--surface);
}
.status-icon svg { width: 0.9rem; height: 0.9rem; }
.status-icon--completed { background: var(--ok); border-color: var(--ok); color: #fff; }
.status-icon--in_progress { border-color: var(--accent); color: var(--accent); }
.status-icon--in_progress::after { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--accent); }
.status-icon--locked { background: var(--surface-2); border-style: dashed; }
.status-icon--available { border-color: var(--accent); background: var(--accent-soft); }

.empty {
  text-align: center;
  padding: var(--sp-6) var(--sp-4);
  border: 1px dashed var(--border-strong);
  border-radius: var(--r-lg);
  color: var(--text-2);
}
.empty .empty-icon { font-size: 1.6rem; display: block; margin-bottom: var(--sp-2); }
.empty p { margin: 0 auto; max-width: 26rem; }

.notice {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  background: var(--info-soft);
  color: var(--text);
  border: 1px solid color-mix(in srgb, var(--info) 25%, transparent);
  font-size: var(--fs-sm);
}
.notice--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); }
.notice--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); }
.notice p:last-child { margin: 0; }

.stat {
  display: grid;
  gap: 0.15rem;
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.stat-value { font-family: var(--font-display); font-size: var(--fs-xl); font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
.stat-label { font-size: var(--fs-xs); color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; }
.stat-note { font-size: var(--fs-xs); color: var(--text-2); }
.stats { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); }

.badge-tile {
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.badge-icon {
  flex: none;
  width: 2.75rem; height: 2.75rem;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-soft);
  font-size: 1.35rem;
  line-height: 1;
}
.badge-tile--locked { background: transparent; border-style: dashed; }
.badge-tile--locked .badge-icon { background: var(--surface-2); filter: grayscale(1); opacity: 0.5; }
.badge-tile strong { display: block; font-size: var(--fs-sm); }
.badge-tile span { font-size: var(--fs-xs); color: var(--text-2); }
.badges { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

.avatar {
  flex: none;
  width: 2.25rem; height: 2.25rem;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--text);
  color: var(--bg);
  font: 700 0.85rem/1 var(--font-display);
  letter-spacing: 0.02em;
}
.avatar--lg { width: 4.5rem; height: 4.5rem; font-size: 1.5rem; }

/* 7. Site chrome ---------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
}
.site-header .container { display: flex; align-items: center; gap: var(--sp-4); min-height: 3.75rem; }
.brand {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font: 750 1.15rem/1 var(--font-display);
  letter-spacing: -0.03em;
  text-decoration: none;
  margin-right: auto;
}
.brand-mark {
  display: inline-grid; place-items: center;
  width: 1.9rem; height: 1.9rem;
  border-radius: 8px;
  background: var(--text);
  color: var(--accent);
  font: 700 0.8rem/1 var(--font-mono);
  letter-spacing: -0.05em;
}
.nav { display: flex; align-items: center; gap: var(--sp-1); }
.nav a:not(.btn) {
  padding: 0.45rem 0.7rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.nav a:not(.btn):hover { color: var(--text); background: var(--surface-2); }
.nav a[aria-current="page"] { color: var(--text); }
.nav-xp {
  display: inline-flex; gap: 0.35rem; align-items: center;
  font: 600 var(--fs-xs)/1 var(--font-mono);
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  color: var(--text-2);
  text-decoration: none;
}
.icon-btn {
  display: inline-grid; place-items: center;
  width: 2.5rem; height: 2.5rem;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  cursor: pointer;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 1.2rem; height: 1.2rem; }
.menu { position: relative; }
.menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.5rem);
  min-width: 13rem;
  padding: var(--sp-2);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  display: grid;
}
.menu-panel[hidden] { display: none; }
.menu-panel a, .menu-panel button {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0.55rem 0.7rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  font: 500 var(--fs-sm) var(--font-body);
  color: var(--text);
  background: none; border: 0; text-align: left; cursor: pointer; width: 100%;
}
.menu-panel a svg, .menu-panel button svg { width: 1rem; height: 1rem; flex: none; color: var(--text-3); }
.menu-panel a:hover, .menu-panel button:hover { background: var(--surface-2); }
.menu-panel hr { margin: var(--sp-2) 0; }
.menu-panel .menu-meta { padding: 0.4rem 0.7rem 0.6rem; font-size: var(--fs-xs); color: var(--text-3); }
.theme-switch { display: flex; gap: 2px; padding: 0.35rem 0.4rem; }
.theme-switch button { flex: 1; justify-content: center; padding: 0.4rem; font-size: var(--fs-xs); border: 1px solid var(--border); }
.theme-switch button[aria-pressed="true"] { background: var(--surface-2); border-color: var(--border-strong); font-weight: 700; }

@media (max-width: 720px) {
  .nav .hide-sm { display: none; }
}

.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--sp-6);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.site-footer .container { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; }
.site-footer nav { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }

.messages { list-style: none; padding: 0; margin: var(--sp-4) auto 0; }
.messages li + li { margin-top: var(--sp-2); }

/* toasts (XP, badges) */
.toasts {
  position: fixed;
  z-index: 90;
  right: var(--sp-4);
  bottom: var(--sp-4);
  display: grid;
  gap: var(--sp-2);
  width: min(22rem, calc(100vw - 2rem));
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex; gap: var(--sp-3); align-items: center;
  padding: var(--sp-3) var(--sp-4);
  background: var(--text);
  color: var(--bg);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lg);
  font-size: var(--fs-sm);
  animation: toast-in 280ms var(--ease);
}
.toast strong { display: block; }
.toast .toast-icon { font-size: 1.4rem; line-height: 1; }
.toast .toast-xp { font: 700 var(--fs-sm)/1 var(--font-mono); color: var(--accent); }
.toast.is-leaving { animation: toast-out 220ms var(--ease) forwards; }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px) scale(0.98); } }
@keyframes toast-out { to { opacity: 0; transform: translateY(6px); } }

/* 8. Dashboard / profile -------------------------------------------------- */
.hello { margin-bottom: var(--sp-5); }
.hello h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-1); }
.dash { display: grid; gap: var(--sp-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) {
  .dash { grid-template-columns: minmax(0, 1fr) 20rem; align-items: start; }
}
.continue-card {
  position: relative;
  display: grid;
  gap: var(--sp-4);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--code-bg);
  color: var(--code-text);
  overflow: hidden;
  isolation: isolate;
}
.continue-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(color-mix(in srgb, var(--code-muted) 35%, transparent) 1px, transparent 1px);
  background-size: 18px 18px;
  mask-image: linear-gradient(110deg, transparent 35%, #000 100%);
  -webkit-mask-image: linear-gradient(110deg, transparent 35%, #000 100%);
}
.continue-card .eyebrow { color: var(--accent); }
.continue-card h2 { font-size: var(--fs-2xl); margin: 0; color: #fff; }
.continue-card p { color: var(--code-muted); margin: 0; }
.continue-card .progress { background: var(--code-border); max-width: 26rem; }
.continue-card .meta { font: 500 var(--fs-xs)/1.4 var(--font-mono); color: var(--code-muted); display: flex; gap: var(--sp-4); flex-wrap: wrap; }
.continue-card .btn { justify-self: start; }

.journey { list-style: none; padding: 0; margin: 0; display: grid; gap: 0; }
.journey li { margin: 0; }
.journey a, .journey .journey-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-2);
  text-decoration: none;
  border-radius: var(--r-md);
}
.journey a:hover { background: var(--surface-2); }
.journey .journey-title { flex: 1; min-width: 0; }
.journey .journey-title strong { display: block; font-weight: 650; }
.journey .journey-title span { font-size: var(--fs-xs); color: var(--text-3); }
.journey .is-locked { color: var(--text-3); }

.section-title {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
}
.section-title h2 { font-size: var(--fs-md); margin: 0; }
.section-title a { font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); }

.profile-head { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; margin-bottom: var(--sp-6); }
.profile-head h1 { font-size: var(--fs-xl); margin: 0; }

/* 9. Roadmap & level pages ------------------------------------------------ */
.roadmap { list-style: none; padding: 0; margin: 0; position: relative; }
.roadmap::before {
  content: "";
  position: absolute;
  left: 1.45rem;
  top: 1.5rem;
  bottom: 1.5rem;
  width: 2px;
  background: repeating-linear-gradient(to bottom, var(--border-strong) 0 6px, transparent 6px 12px);
}
.roadmap > li { position: relative; padding-left: 4rem; margin: 0 0 var(--sp-4); }
.roadmap-node {
  position: absolute;
  left: 0.3rem;
  top: 1.2rem;
  width: 2.35rem; height: 2.35rem;
  border-radius: 50%;
  display: grid; place-items: center;
  font: 700 0.95rem/1 var(--font-mono);
  background: var(--surface);
  border: 2px solid var(--border-strong);
  color: var(--text-2);
  z-index: 1;
}
.roadmap-node svg { width: 1rem; height: 1rem; }
.roadmap > li.is-completed .roadmap-node { background: var(--ok); border-color: var(--ok); color: #fff; }
.roadmap > li.is-in_progress .roadmap-node, .roadmap > li.is-available .roadmap-node { border-color: var(--accent); color: var(--accent-text); background: var(--accent-soft); }
.roadmap > li.is-locked .roadmap-node { border-style: dashed; color: var(--text-3); background: var(--surface-2); }
.roadmap-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.roadmap > li.is-in_progress .roadmap-card, .roadmap > li.is-available .roadmap-card { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); box-shadow: var(--shadow-md); }
.roadmap > li.is-locked .roadmap-card { background: transparent; border-style: dashed; }
.roadmap > li.is-locked .roadmap-card h2, .roadmap > li.is-locked .roadmap-card p { color: var(--text-3); }
.roadmap-card h2 { font-size: var(--fs-lg); margin: 0; }
.roadmap-card h2 a { text-decoration: none; }
.roadmap-card h2 a:hover { text-decoration: underline; }
.roadmap-card p { margin: 0; color: var(--text-2); }
.roadmap-meta { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; font-size: var(--fs-xs); color: var(--text-3); }
.roadmap-future > li { opacity: 0.65; }
.roadmap-future .roadmap-card { padding: var(--sp-3) var(--sp-5); }
.roadmap-future h2 { font-size: var(--fs-base); }

.level-hero { padding-block: var(--sp-7) var(--sp-5); }
.level-hero .eyebrow { color: var(--accent-text); }
.goals { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.goals li { display: flex; gap: var(--sp-2); margin: 0; }
.goals li::before { content: "→"; color: var(--accent-text); font-family: var(--font-mono); }

.lesson-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.lesson-list li { margin: 0; }
.lesson-item {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.lesson-item:hover { border-color: var(--text-3); }
.lesson-item .lesson-item-main { flex: 1; min-width: 0; }
.lesson-item strong { display: block; font-size: var(--fs-base); }
.lesson-item .lesson-item-sub { font-size: var(--fs-sm); color: var(--text-2); }
.lesson-item .lesson-item-meta { font: 500 var(--fs-xs)/1 var(--font-mono); color: var(--text-3); white-space: nowrap; }
.lesson-item--mission { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.lesson-item--boss { background: var(--code-bg); color: var(--code-text); border-color: var(--code-border); }
.lesson-item--boss .lesson-item-sub, .lesson-item--boss .lesson-item-meta { color: var(--code-muted); }
.lesson-item.is-locked { opacity: 0.6; background: transparent; }

/* 10. Lesson & blocks ----------------------------------------------------- */
.lesson-bar {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
.lesson-bar .container { display: flex; align-items: center; gap: var(--sp-3); min-height: 3.5rem; }
.lesson-bar .crumb {
  display: flex; align-items: center; gap: var(--sp-2);
  min-width: 0; flex: 1;
  font-size: var(--fs-sm);
  color: var(--text-2);
}
.lesson-bar .crumb a { text-decoration: none; font-weight: 600; white-space: nowrap; }
.lesson-bar .crumb span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lesson-bar .lesson-progress { display: flex; align-items: center; gap: var(--sp-2); font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-2); }
.lesson-bar .lesson-progress .progress { width: clamp(4rem, 12vw, 9rem); }

.lesson-layout {
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: minmax(0, 1fr);
  padding-block: var(--sp-6) var(--sp-8);
}
@media (min-width: 1180px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr) 17rem; }
}
.lesson-main { min-width: 0; max-width: var(--w-content); width: 100%; margin-inline: auto; }
.lesson-aside { display: none; }
@media (min-width: 1180px) {
  .lesson-aside { display: block; position: sticky; top: 5rem; align-self: start; max-height: calc(100vh - 6rem); overflow: auto; }
}
.lesson-header { margin-bottom: var(--sp-6); max-width: var(--w-prose); }
.lesson-header h1 { font-size: var(--fs-2xl); margin-bottom: var(--sp-2); }
.lesson-header .lead { margin: 0; }
.lesson-header .row { margin-bottom: var(--sp-3); }

.outline { list-style: none; padding: 0; margin: 0; font-size: var(--fs-sm); }
.outline li { margin: 0; }
.outline a {
  display: flex; gap: var(--sp-2); align-items: center;
  padding: 0.35rem 0.5rem;
  border-radius: var(--r-sm);
  text-decoration: none;
  color: var(--text-2);
}
.outline a:hover { background: var(--surface-2); color: var(--text); }
.outline .dot {
  flex: none; width: 0.9rem; height: 0.9rem; border-radius: 50%;
  border: 2px solid var(--border-strong);
  display: grid; place-items: center;
}
.outline .is-done .dot { background: var(--ok); border-color: var(--ok); }
.outline .is-done .dot::after { content: ""; width: 0.3rem; height: 0.15rem; border: solid #fff; border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px); }
.aside-card { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.aside-card + .aside-card { margin-top: var(--sp-3); }
.aside-card h2 { font-size: var(--fs-sm); font-family: var(--font-body); font-weight: 700; margin-bottom: var(--sp-2); }

/* blocks */
.blocks > * + * { margin-top: var(--sp-6); }
.block { position: relative; scroll-margin-top: 5rem; }
.block-prose { max-width: var(--w-prose); }
.prose { font-size: 1.125rem; line-height: 1.7; }
.prose > :last-child { margin-bottom: 0; }
.prose h3 { font-size: var(--fs-lg); margin-top: var(--sp-6); }
.prose h4 { font-size: var(--fs-md); margin-top: var(--sp-5); }
.prose strong { font-weight: 700; }
.prose pre, .code-static {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  overflow-x: auto;
  font-size: 0.92rem;
  line-height: 1.65;
  margin: 0 0 var(--sp-4);
  tab-size: 4;
}
.prose pre code { background: none; border: 0; padding: 0; font-size: inherit; white-space: pre; }
.prose table { border-collapse: collapse; width: 100%; margin-bottom: var(--sp-4); font-size: var(--fs-sm); }
.prose th, .prose td { border: 1px solid var(--border); padding: 0.5rem 0.7rem; text-align: left; }
.prose th { background: var(--surface-2); }
.prose blockquote { margin: 0 0 var(--sp-4); padding-left: var(--sp-4); border-left: 3px solid var(--border-strong); color: var(--text-2); }

.block-label {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-bottom: var(--sp-3);
}
.block-label .tag + .block-meta { margin-left: auto; }
.block-meta { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-3); display: inline-flex; gap: var(--sp-3); align-items: center; }
.block-done-flag { display: none; color: var(--ok); }
.block.is-done .block-done-flag { display: inline-flex; gap: 0.3em; align-items: center; }
.block.is-done .xp-pill { text-decoration: line-through; opacity: 0.6; }

.callout {
  max-width: var(--w-prose);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
  border-left: 4px solid var(--text-3);
}
.callout-title { font-weight: 700; margin-bottom: var(--sp-1); display: flex; gap: var(--sp-2); align-items: center; }
.callout .prose { font-size: var(--fs-base); }
.callout--tip { border-left-color: var(--accent); }
.callout--note { border-left-color: var(--info); }
.callout--warning { border-left-color: var(--warn); background: var(--warn-soft); }
.callout--fun { border-left-color: var(--ok); }
.callout--recap { border-left-color: var(--ok); background: var(--ok-soft); }

.code-figure { margin: 0; }
.code-figure figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }

.figure { margin: 0; max-width: var(--w-prose); }
.figure img { display: block; width: 100%; height: auto; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface); }
.figure figcaption { font-size: var(--fs-sm); color: var(--text-2); margin-top: var(--sp-2); }

/* activity shell (quiz, predict, exercise) */
.activity {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.activity > * + * { margin-top: var(--sp-4); }
.activity-question { font-size: var(--fs-md); font-weight: 650; font-family: var(--font-display); letter-spacing: -0.01em; }
.activity-question p { margin: 0; }
.activity .prose { font-size: var(--fs-base); }
.activity--predict { border-top: 3px solid var(--info); }
.activity--quiz { border-top: 3px solid var(--text-3); }
.activity--exercise { border-top: 3px solid var(--accent); }
.activity--fill { border-top: 3px solid var(--accent); }
.activity--debug { border-top: 3px solid var(--bad); }
.activity--mission {
  border: 2px solid var(--text);
  box-shadow: 6px 6px 0 var(--accent);
}
.activity--boss {
  background: var(--code-bg);
  color: var(--code-text);
  border: 1px solid var(--code-border);
  box-shadow: var(--shadow-lg);
}
.activity--boss .prose, .activity--boss .muted { color: #c9c9d2; }
.activity--boss :not(pre) > code { background: var(--code-bg-2); border-color: var(--code-border); color: var(--code-text); }
.activity--boss .tag { background: var(--accent); color: var(--accent-ink); }
.activity--boss .btn:not(.btn--primary) { --btn-bg: var(--code-bg-2); --btn-fg: var(--code-text); --btn-border: var(--code-border); }
.activity--boss .requirements li { border-color: var(--code-border); }
.activity--boss .hint, .activity--boss .solution-panel, .activity--boss .challenge { background: var(--code-bg-2); border-color: var(--code-border); color: var(--code-text); }
.activity--boss .hint-body :not(pre) > code { background: var(--code-bg); }
.activity-title { font-size: var(--fs-xl); margin: 0; }

.requirements { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); counter-reset: req; }
.requirements li {
  counter-increment: req;
  display: flex; gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin: 0;
}
.requirements li::before { content: counter(req, decimal-leading-zero); font: 700 var(--fs-xs)/1 var(--font-mono); color: var(--accent-text); }

.quiz-options { display: grid; gap: var(--sp-2); border: 0; padding: 0; margin: 0; }
.quiz-options .choice.is-correct { border-color: var(--ok); background: var(--ok-soft); }
.quiz-options .choice.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.quiz-options .choice.is-correct .choice-mark { border-color: var(--ok); background: var(--ok); }
.quiz-options .choice.is-wrong .choice-mark { border-color: var(--bad); }
.quiz-options .choice .verdict { font: 700 var(--fs-xs)/1 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; }
.quiz-options .choice.is-correct .verdict { color: var(--ok); }
.quiz-options .choice.is-wrong .verdict { color: var(--bad); }
.quiz-options[disabled] .choice { cursor: default; }
.quiz-options .choice-text--output { font-family: var(--font-mono); font-size: 0.95rem; white-space: pre; line-height: 1.5; overflow-x: auto; }
.quiz-options .choice-text code { background: transparent; border: 0; padding: 0; font-size: 0.95em; }

.feedback {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font-size: var(--fs-base);
}
.feedback[hidden] { display: none; }
.feedback .feedback-icon { flex: none; font-size: 1.1rem; line-height: 1.5; }
.feedback .prose { font-size: var(--fs-base); }
.feedback p:last-child { margin-bottom: 0; }
.feedback--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 30%, transparent); }
.feedback--almost { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 30%, transparent); }
.feedback--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }
.feedback--info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 30%, transparent); }
.feedback strong.feedback-title { display: block; }
.activity--boss .feedback { color: var(--text); }

.activity-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.activity-actions .spacer { flex: 1; }

.hints { display: grid; gap: var(--sp-2); }
.hint {
  border: 1px solid color-mix(in srgb, var(--warn) 30%, var(--border));
  background: var(--warn-soft);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  animation: fade-up 240ms var(--ease);
}
.hint-label { font: 700 var(--fs-xs)/1 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--warn); margin-bottom: var(--sp-2); }
.hint-body.prose { font-size: var(--fs-base); }
.hint[hidden] { display: none; }
.solution-panel { border: 1px dashed var(--border-strong); border-radius: var(--r-md); padding: var(--sp-4); }
.solution-panel[hidden] { display: none; }
.solution-panel pre { margin: var(--sp-2) 0 var(--sp-3); }
.challenge {
  border: 1px dashed color-mix(in srgb, var(--accent) 60%, var(--border));
  border-radius: var(--r-md);
  padding: var(--sp-4);
}
.challenge.is-done { border-style: solid; border-color: var(--ok); }
.challenge .prose { font-size: var(--fs-base); }
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } }

/* lesson end */
.lesson-end {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  background: var(--surface);
  text-align: center;
}
.lesson-end h2 { font-size: var(--fs-xl); }
.lesson-end .remaining { list-style: none; padding: 0; display: inline-grid; gap: var(--sp-1); text-align: left; }
.lesson-end .remaining a { font-weight: 600; }
.feedback-widget { margin-top: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--border); }
.feedback-widget .row { justify-content: center; }
.feedback-widget textarea { width: 100%; max-width: 30rem; min-height: 5rem; margin: var(--sp-3) auto 0; display: block; }
.feedback-choice[aria-pressed="true"] { --btn-bg: var(--accent-soft); --btn-border: var(--accent); }

/* 11. Editor & console ---------------------------------------------------- */
.code-panel {
  container-type: inline-size;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
}
.code-panel-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 760px) {
  .code-panel-grid { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .code-panel-grid .console { border-top: 0; border-left: 1px solid var(--code-border); }
}
.pane-head {
  display: flex; align-items: center; gap: var(--sp-2);
  min-height: 2.5rem;
  padding: 0 var(--sp-3);
  border-bottom: 1px solid var(--code-border);
  background: var(--code-bg-2);
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--code-muted);
}
.pane-head .pane-actions { margin-left: auto; display: flex; gap: var(--sp-1); }
.pane-btn {
  display: inline-flex; align-items: center; gap: 0.35em;
  background: transparent;
  color: var(--code-muted);
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  padding: 0.3rem 0.55rem;
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.pane-btn:hover { color: var(--code-text); background: var(--code-border); }
.pane-btn svg { width: 0.85rem; height: 0.85rem; }

.editor {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  font: 400 0.95rem/1.65 var(--font-mono);
  tab-size: 4;
  max-height: 32rem;
  overflow: auto;
  overscroll-behavior: contain;
}
.editor-gutter {
  padding: var(--sp-3) 0;
  text-align: right;
  color: #4d5160;
  user-select: none;
  min-width: 2.8em;
  padding-right: 0.8em;
  padding-left: 0.6em;
  border-right: 1px solid var(--code-border);
  position: sticky;
  left: 0;
  background: var(--code-bg);
  z-index: 2;
}
.editor-gutter span { display: block; }
.editor-gutter span.is-error { color: var(--bad); font-weight: 700; }
.editor-gutter span.is-error::before { content: "●"; margin-right: 0.2em; font-size: 0.7em; vertical-align: 0.15em; }
.editor-area { position: relative; min-width: 0; }
.editor-highlight, .editor-input {
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font: inherit;
  white-space: pre;
  word-wrap: normal;
  overflow-wrap: normal;
  letter-spacing: 0;
  tab-size: 4;
  min-height: 100%;
}
.editor-highlight { pointer-events: none; color: var(--code-text); min-height: 7.5rem; }
.editor-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  resize: none;
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: var(--accent);
  overflow: hidden;
  -webkit-text-fill-color: transparent;
}
.editor-input::selection { background: rgba(255, 122, 51, 0.3); -webkit-text-fill-color: transparent; }
.editor:focus-within { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 60%, transparent); }
.editor-hint { padding: 0.35rem var(--sp-3); font: 500 0.7rem/1.3 var(--font-mono); color: #5d6170; border-top: 1px solid var(--code-border); display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.editor-hint kbd { background: var(--code-bg-2); border-color: var(--code-border); color: var(--code-muted); }
@media (hover: none) { .editor-hint { display: none; } }

.tok-kw { color: var(--tok-keyword); }
.tok-str { color: var(--tok-string); }
.tok-num { color: var(--tok-number); }
.tok-com { color: var(--tok-comment); font-style: italic; }
.tok-bi { color: var(--tok-builtin); }
.tok-def { color: var(--tok-def); }
.tok-blank { background: rgba(255, 122, 51, 0.22); outline: 1px dashed var(--accent); border-radius: 2px; color: var(--accent); }

.console { display: flex; flex-direction: column; border-top: 1px solid var(--code-border); min-height: 9rem; }
.console-out {
  flex: 1;
  margin: 0;
  padding: var(--sp-3) var(--sp-4);
  font: 400 0.9rem/1.6 var(--font-mono);
  white-space: pre-wrap;
  word-break: break-word;
  overflow: auto;
  max-height: 24rem;
  min-height: 6rem;
  color: var(--code-text);
}
.console-out .placeholder { color: #5d6170; }
.console-out .user-input { color: var(--tok-string); }
.console-out .sys { color: var(--code-muted); font-style: italic; }
.console-out .err { color: #ff8b82; }
.console-input { display: inline; }
.console-input input {
  width: min(22ch, 60%);
  min-width: 8ch;
  background: transparent;
  border: 0;
  border-bottom: 1px dashed var(--accent);
  color: var(--tok-string);
  font: inherit;
  padding: 0 0.1em;
  outline: none;
  caret-color: var(--accent);
}
.console-status {
  display: flex; align-items: center; gap: var(--sp-2);
  font: 500 0.72rem/1 var(--font-mono);
  color: var(--code-muted);
  padding: 0.5rem var(--sp-4);
  border-top: 1px solid var(--code-border);
}
.console-status[hidden] { display: none; }
.console-status .spinner { width: 0.8rem; height: 0.8rem; border-radius: 50%; border: 2px solid var(--code-muted); border-right-color: transparent; animation: spin 0.8s linear infinite; }

.code-toolbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  padding: var(--sp-3);
  border-top: 1px solid var(--code-border);
  background: var(--code-bg-2);
}
.code-toolbar .spacer { flex: 1; }
.code-toolbar .btn:not(.btn--primary) { --btn-bg: transparent; --btn-fg: var(--code-text); --btn-border: var(--code-border); }
.code-toolbar .btn:not(.btn--primary):hover { --btn-bg: var(--code-border); }
.code-toolbar .btn svg { width: 0.95rem; height: 0.95rem; }
.code-toolbar .shortcut { font: 500 0.7rem/1 var(--font-mono); color: var(--code-muted); }
@media (hover: none) { .code-toolbar .shortcut { display: none; } }

.error-card {
  border: 1px solid color-mix(in srgb, var(--bad) 35%, var(--border));
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  color: var(--text);
}
.error-card[hidden] { display: none; }
.error-card-head { display: flex; gap: var(--sp-2); align-items: center; padding: var(--sp-3) var(--sp-4); background: var(--bad-soft); font-weight: 700; }
.error-card section { padding: var(--sp-3) var(--sp-4); }
.error-card section + section { border-top: 1px solid var(--border); }
.error-card .eyebrow { margin-bottom: var(--sp-1); }
.error-card pre { margin: 0; white-space: pre-wrap; font-size: 0.85rem; color: var(--bad); background: none; padding: 0; border: 0; }
.error-card .prose { font-size: var(--fs-base); }
.error-card .prose p:last-child { margin: 0; }

.test-transcript { margin-top: var(--sp-2); }
.test-transcript pre { margin: var(--sp-1) 0 0; padding: var(--sp-3); background: var(--code-bg); color: var(--code-text); border-radius: var(--r-sm); font-size: 0.85rem; white-space: pre-wrap; max-height: 12rem; overflow: auto; }

/* 12. Landing, auth, misc ------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) var(--sp-8); }
.hero-grid { display: grid; gap: var(--sp-7); align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.hero h1 { font-size: var(--fs-3xl); letter-spacing: -0.035em; line-height: 1.02; margin-bottom: var(--sp-4); }
.hero h1 em { font-style: normal; color: var(--accent-text); }
.hero .lead { max-width: 33rem; margin-bottom: var(--sp-5); }
.hero .row { gap: var(--sp-3); }
.hero-note { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--text-3); }

.demo {
  background: var(--code-bg);
  color: var(--code-text);
  border-radius: var(--r-lg);
  border: 1px solid var(--code-border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.demo-top { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--code-border); font: 600 0.72rem/1 var(--font-mono); color: var(--code-muted); letter-spacing: 0.06em; text-transform: uppercase; }
.demo-top .tag { background: var(--accent); color: var(--accent-ink); }
.demo-body { padding: var(--sp-4) var(--sp-5) var(--sp-2); }
.demo-body p { color: #cfcfd8; margin-bottom: var(--sp-3); font-size: var(--fs-sm); }
.demo :not(pre) > code, .continue-card :not(pre) > code, .lesson-item--boss :not(pre) > code {
  background: var(--code-bg-2); border-color: var(--code-border); color: var(--code-text);
}
.demo .code-panel { border: 0; border-top: 1px solid var(--code-border); border-radius: 0; }

.band { padding-block: var(--sp-8); }
.band--alt { background: var(--surface); border-block: 1px solid var(--border); }
.band-head { max-width: 40rem; margin-bottom: var(--sp-6); }
.band-head h2 { font-size: var(--fs-2xl); }
.band-head p { color: var(--text-2); font-size: var(--fs-md); }

.loop {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: var(--sp-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  counter-reset: loop;
}
.loop li { margin: 0; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg); counter-increment: loop; }
.band:not(.band--alt) .loop li { background: var(--surface); }
.loop li::before { content: counter(loop, decimal-leading-zero); display: block; font: 700 var(--fs-xs)/1 var(--font-mono); color: var(--accent-text); margin-bottom: var(--sp-3); }
.loop strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); margin-bottom: var(--sp-1); }
.loop span { font-size: var(--fs-sm); color: var(--text-2); }

.feature-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.feature { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.feature h3 { font-size: var(--fs-md); }
.feature p { color: var(--text-2); margin: 0; font-size: var(--fs-sm); }
.feature .mini-code { margin: 0 0 var(--sp-4); padding: var(--sp-3) var(--sp-4); background: var(--code-bg); color: var(--code-text); border-radius: var(--r-md); font-size: 0.8rem; line-height: 1.55; overflow-x: auto; }
.feature .mini-out { display: block; margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px dashed var(--code-border); color: #ff8b82; white-space: pre-wrap; }

.projects { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.project { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.project .tag { margin-bottom: var(--sp-3); }
.project strong { display: block; font-family: var(--font-display); font-size: var(--fs-md); }
.project span { color: var(--text-2); font-size: var(--fs-sm); }

.cta-band { text-align: center; padding-block: var(--sp-9); }
.cta-band h2 { font-size: var(--fs-2xl); }
.cta-band p { color: var(--text-2); max-width: 32rem; margin-inline: auto; margin-bottom: var(--sp-5); }

.auth { display: grid; place-items: start center; padding-block: var(--sp-7) var(--sp-8); }
.auth-card { width: 100%; max-width: 26rem; }
.auth-card h1 { font-size: var(--fs-xl); margin-bottom: var(--sp-2); }
.auth-card .lead { font-size: var(--fs-base); margin-bottom: var(--sp-5); }
.auth-alt { margin-top: var(--sp-5); text-align: center; font-size: var(--fs-sm); color: var(--text-2); }

.onboarding { max-width: 36rem; margin-inline: auto; padding-block: var(--sp-7) var(--sp-8); }
.onboarding .choices + .choices { margin-top: var(--sp-6); }
.onboarding-step { font: 600 var(--fs-xs)/1 var(--font-mono); color: var(--text-3); margin-bottom: var(--sp-2); }
.ready { text-align: center; max-width: 34rem; margin-inline: auto; padding-block: var(--sp-8); }
.ready .ready-mark {
  display: inline-grid; place-items: center;
  width: 4.5rem; height: 4.5rem;
  border-radius: 18px;
  background: var(--text);
  color: var(--accent);
  font: 700 1.4rem/1 var(--font-mono);
  margin-bottom: var(--sp-5);
  animation: pop 500ms var(--ease);
}
@keyframes pop { from { transform: scale(0.6); opacity: 0; } }
.ready h1 { font-size: var(--fs-2xl); }

.celebrate { text-align: center; max-width: 40rem; margin-inline: auto; padding-block: var(--sp-8); }
.celebrate .big-badge {
  display: inline-grid; place-items: center;
  width: 6rem; height: 6rem;
  border-radius: 24px;
  background: var(--accent-soft);
  font-size: 3rem;
  margin-bottom: var(--sp-5);
  animation: pop 600ms var(--ease);
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 12%, transparent);
}
.celebrate h1 { font-size: var(--fs-2xl); }
.celebrate .stats { margin: var(--sp-6) 0; text-align: left; }

.error-page { text-align: center; padding-block: var(--sp-9); max-width: 34rem; margin-inline: auto; }
.error-page .code { font: 700 1rem/1 var(--font-mono); color: var(--accent-text); }
.error-page pre { text-align: left; }

.legal { max-width: var(--w-prose); }
.legal h2 { font-size: var(--fs-lg); margin-top: var(--sp-6); }

.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.table th, .table td { padding: 0.6rem 0.9rem; border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; }
.table th { font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-3); background: var(--surface-2); }
.table tr:last-child td { border-bottom: 0; }
.table td.num, .table th.num { text-align: right; font-family: var(--font-mono); }
.bar-cell { min-width: 8rem; }
.bar-cell .progress { height: 0.4rem; }

/* Phases (roadmap) --------------------------------------------------------- */
.phase { margin-bottom: var(--sp-4); }
.phase > details { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.phase > details[open] { padding-bottom: var(--sp-4); }
.phase-head {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  list-style: none;
  border-radius: var(--r-lg);
}
.phase-head::-webkit-details-marker { display: none; }
.phase-head::after { content: "▾"; color: var(--text-3); transition: transform var(--dur) var(--ease); }
details:not([open]) > .phase-head::after { transform: rotate(-90deg); }
.phase-head:hover { background: var(--surface-2); }
.phase-marker {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 12px;
  display: grid; place-items: center;
  font: 700 1rem/1 var(--font-mono);
  background: var(--surface-2); color: var(--text-2);
}
.phase-marker svg { width: 1.1rem; height: 1.1rem; }
.phase.is-completed .phase-marker { background: var(--ok); color: #fff; }
.phase.is-in_progress .phase-marker, .phase.is-available .phase-marker { background: var(--accent-soft); color: var(--accent-text); }
.phase-title { flex: 1; min-width: 0; display: grid; gap: 0.1rem; }
.phase-title .eyebrow { margin: 0; }
.phase-title strong { font-family: var(--font-display); font-size: var(--fs-md); letter-spacing: -0.01em; }
.phase-meta { font: 500 var(--fs-xs)/1.3 var(--font-mono); color: var(--text-3); text-align: right; }
.phase .roadmap { padding: var(--sp-2) var(--sp-5) 0; }
.phase .roadmap::before { left: calc(1.45rem + var(--sp-5)); }
@media (max-width: 560px) {
  .phase-meta { display: none; }
  .phase-head { padding: var(--sp-3) var(--sp-4); gap: var(--sp-3); }
  .phase .roadmap { padding-inline: var(--sp-3); }
  .phase .roadmap::before { left: calc(1.45rem + var(--sp-3)); }
}
.phase--future { padding: var(--sp-5); border: 1px dashed var(--border-strong); border-radius: var(--r-lg); }
.future-phases { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-3); }
.future-phases li { display: grid; gap: 0.1rem; margin: 0; }
.phase-complete {
  text-align: left;
  margin: 0 0 var(--sp-6);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: var(--code-bg);
  color: var(--code-text);
}
.phase-complete .eyebrow { color: var(--accent); }
.phase-complete h2 { color: #fff; font-size: var(--fs-xl); }
.phase-complete .prose { color: #cfcfd8; font-size: var(--fs-base); }
.phase-complete :not(pre) > code { background: var(--code-bg-2); border-color: var(--code-border); color: var(--code-text); }
.built-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-1); font-weight: 600; }
.journey .journey-phase { padding: var(--sp-3) var(--sp-2) var(--sp-1); }
.journey .journey-phase .eyebrow { margin: 0; }
.journey a.is-locked { color: var(--text-3); }
a.project { text-decoration: none; display: grid; gap: var(--sp-1); transition: border-color var(--dur) var(--ease); }
a.project:hover { border-color: var(--text-3); }
.project .tag { justify-self: start; }
.activity--reflection { border-top: 3px solid var(--info); }
.reflection-form textarea { width: 100%; min-height: 7rem; resize: vertical; margin-bottom: var(--sp-3); }

/* Sequence diagrams --------------------------------------------------------- */
.seq {
  margin: 0;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.seq-title { display: flex; gap: var(--sp-2); align-items: center; font-weight: 700; margin-bottom: var(--sp-4); }
.seq-actors, .seq-row { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.seq-actors span {
  justify-self: center;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-sm);
  background: var(--text);
  color: var(--bg);
  font: 700 var(--fs-xs)/1.2 var(--font-mono);
  text-align: center;
}
.seq-steps { list-style: none; padding: 0; margin: 0; }
.seq-step { margin: 0; }
.seq-step[hidden] { display: none; }
.seq-row { position: relative; min-height: 3.25rem; align-items: center; }
.seq-lane { grid-row: 1; align-self: stretch; justify-self: center; width: 0; border-left: 2px dashed var(--border-strong); }
.seq-arrow {
  grid-row: 1;
  align-self: end;
  position: relative;
  margin-inline: calc(100% / (var(--span) * 2));
  margin-top: var(--sp-3);
  padding: 0 0.25rem 0.35rem;
  border-bottom: 2px solid var(--accent);
  text-align: center;
}
.seq-arrow::after {
  content: "";
  position: absolute;
  bottom: -7px;
  border: 6px solid transparent;
}
.seq-arrow--ltr::after { right: -2px; border-left: 9px solid var(--accent); border-right: 0; }
.seq-arrow--rtl::after { left: -2px; border-right: 9px solid var(--accent); border-left: 0; }
.seq-arrow--self { border-bottom: 0; padding: 0; margin-inline: 0; align-self: center; justify-self: center; }
.seq-arrow--self::after { display: none; }
.seq-label {
  display: inline-block;
  max-width: 100%;
  font: 600 var(--fs-xs)/1.3 var(--font-mono);
  color: var(--text);
  background: var(--surface);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
  overflow-wrap: anywhere;
}
.seq-arrow--self .seq-label { border: 1px solid var(--accent); max-width: 11rem; }
.seq-note { margin: 0 0 var(--sp-3); padding: var(--sp-2) var(--sp-3); border-left: 3px solid var(--accent); background: var(--surface-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: var(--fs-sm); }
.seq-note p { margin: 0; }
.seq-step.is-current .seq-arrow { animation: seq-in 300ms var(--ease); }
@keyframes seq-in { from { opacity: 0; transform: scaleX(0.6); } }
.seq-controls { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; margin-top: var(--sp-3); }

/* Order activities ------------------------------------------------------------ */
.order-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.order-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  margin: 0;
}
.order-pos { font: 700 var(--fs-xs)/1 var(--font-mono); color: var(--text-3); min-width: 1.2em; }
.order-text { flex: 1; min-width: 0; }
.order-moves { display: flex; gap: 2px; }
.order-moves .icon-btn { width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); font-weight: 700; }
.order-moves .icon-btn[disabled] { opacity: 0.3; }
.order-item.is-moved { animation: fade-up 200ms var(--ease); }
.activity--order.is-done .order-item { border-color: var(--ok); background: var(--ok-soft); }
.activity--order { border-top: 3px solid var(--info); }

/* Web playground ------------------------------------------------------------- */
.web-panel {
  container-type: inline-size;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
}
.web-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 760px) {
  .web-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .web-preview { border-top: 0 !important; border-left: 1px solid var(--code-border); }
}
.web-code { min-width: 0; }
.web-preview { border-top: 1px solid var(--code-border); display: flex; flex-direction: column; min-width: 0; }
.file-tabs { display: flex; gap: 2px; align-self: stretch; }
.file-tab {
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--code-muted);
  font: 600 0.72rem/1 var(--font-mono);
  letter-spacing: 0.04em;
  padding: 0 0.7rem;
  cursor: pointer;
}
.file-tab[aria-selected="true"] { color: var(--code-text); border-bottom-color: var(--accent); }
.file-tab:hover { color: var(--code-text); }
.web-code .editor { max-height: 26rem; }
.pane-btn[aria-pressed="true"] { color: var(--code-text); background: var(--code-border); }
.web-frame-wrap {
  flex: 1;
  display: flex;
  justify-content: center;
  background: repeating-conic-gradient(#20222a 0% 25%, #1a1b21 0% 50%) 50% / 16px 16px;
  min-height: 18rem;
  resize: vertical;
  overflow: auto;
}
.web-frame-wrap iframe { width: 100%; min-height: 18rem; border: 0; background: #fff; display: block; }
.web-frame-wrap.is-phone iframe { width: 375px; max-width: 100%; border-inline: 1px solid var(--code-border); }
.web-frame-wrap.is-desktop { position: relative; overflow: hidden; }
.web-frame-wrap.is-desktop iframe { position: absolute; top: 0; left: 0; width: 1024px; min-height: 0; transform-origin: 0 0; }
.width-modes { display: inline-flex; gap: 2px; }
.web-block:not(.activity) .web-panel { margin-top: 0; }
.activity--web { border-top: 3px solid var(--accent); }

/* ---------------------------------------------------------------------------
   Practice terminal
   --------------------------------------------------------------------------- */
.term {
  container-type: inline-size;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
}
@media (min-width: 900px) {
  .term { grid-template-columns: minmax(0, 1.6fr) minmax(12rem, 1fr); }
  .term-side { border-top: 0 !important; border-left: 1px solid var(--code-border); }
}
.term-screen {
  height: 18rem;
  overflow-y: auto;
  padding: var(--sp-3);
  font: 0.875rem/1.5 var(--font-mono);
  cursor: text;
}
.term-entry + .term-entry { margin-top: var(--sp-1); }
.term-cmd { white-space: pre-wrap; overflow-wrap: anywhere; }
.term-prompt { color: var(--tok-string); white-space: nowrap; }
.term-out { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--code-text); }
.term-entry.is-error .term-out { color: #ff9c8f; }
.term-entry.is-pending { opacity: 0.6; }
.term-line { display: flex; align-items: baseline; gap: 0.6ch; }
.term-input {
  flex: 1; min-width: 0;
  background: transparent; border: 0; outline: 0;
  color: var(--code-text);
  font: inherit;
  caret-color: var(--accent);
  padding: 0;
}
.term-screen:focus-within { box-shadow: inset 0 0 0 2px var(--accent); }
.term-help { margin: 0; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--code-border); color: var(--code-muted); }
.term-side { border-top: 1px solid var(--code-border); font: 0.8125rem/1.5 var(--font-mono); min-width: 0; }
.term-root { margin-left: auto; text-transform: none; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-tree { position: relative; list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); max-height: 20rem; overflow: auto; }
.term-side:has([data-term-git]:not([hidden])) .term-tree { max-height: 11rem; }
.term-tree li { padding-left: calc(var(--depth, 0) * 1.1rem); white-space: nowrap; }
.term-tree .is-dir { color: var(--tok-number); }
.term-tree span { color: var(--code-muted); }
.term-git { padding: var(--sp-2) var(--sp-3) var(--sp-3); }
.term-git-none { margin: 0; padding: var(--sp-2) var(--sp-3); color: var(--code-muted); }
.term-git-label { margin: var(--sp-2) 0 0; font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--code-muted); }
.term-git-label:first-child { margin-top: 0; }
.term-files, .term-commits { list-style: none; margin: 0; padding: 0; }
.term-files .is-changed { color: #ffb86b; }
.term-files .is-staged { color: var(--tok-string); }
.term-files .muted, .term-commits .muted { color: var(--code-muted); }
.term-commits li { position: relative; padding-left: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.term-commits li::before { content: ""; position: absolute; left: 0.25rem; top: 0.55em; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--code-muted); }
.term-commits li:not(:last-child)::after { content: ""; position: absolute; left: calc(0.25rem + 0.2rem - 0.5px); top: 1.1em; bottom: -0.55em; width: 1px; background: var(--code-border); }
.term-commits li.is-head::before { background: var(--accent); }
.term-commits code { color: var(--tok-builtin); }
.term-branch { margin-left: auto; text-transform: none; letter-spacing: 0; color: var(--accent); }
.term-branches { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.2rem 0 0; }
.term-branches span { padding: 0 0.4rem; border: 1px solid var(--code-border); border-radius: var(--r-sm); }
.term-branches .is-current { border-color: var(--accent); color: var(--code-text); }
.term-tasks { list-style: none; margin: 0 0 var(--sp-3); padding: 0; display: grid; gap: var(--sp-1); }
.term-tasks li { display: flex; gap: var(--sp-2); align-items: baseline; }
.term-task-mark {
  flex: none; display: inline-grid; place-items: center;
  width: 1.2rem; height: 1.2rem; border-radius: 50%;
  border: 2px solid var(--border-strong);
  font-size: 0.75rem; font-weight: 700; line-height: 1;
  transform: translateY(0.2em);
}
.term-tasks li.is-ok .term-task-mark { background: var(--ok); border-color: var(--ok); color: #fff; }
.term-tasks li.is-ok > span:nth-child(2) { color: var(--text-2); }
@media (max-width: 600px) {
  .term-screen { height: 15rem; font-size: 0.8125rem; }
}
.term-main { min-width: 0; }

/* Tabs (per operating system) */
.tabs-block { max-width: var(--w-prose); }
.tabs-block .eyebrow { margin-bottom: var(--sp-2); }
.tabs-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); border-bottom: 1px solid var(--border); }
.tabs-tab {
  background: transparent; border: 0; border-bottom: 3px solid transparent;
  padding: var(--sp-2) var(--sp-3); margin-bottom: -1px;
  font: 600 var(--fs-sm)/1.2 var(--font-body); color: var(--text-2); cursor: pointer;
}
.tabs-tab:hover { color: var(--text); }
.tabs-tab[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); }
.tabs-panel { padding-top: var(--sp-4); }

/* Checklists */
.checklist { list-style: none; margin: var(--sp-3) 0; padding: 0; display: grid; gap: var(--sp-2); }
.checklist-item {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--surface); cursor: pointer;
}
.checklist-item input { width: 1.15rem; height: 1.15rem; margin-top: 0.2em; accent-color: var(--ok); flex: none; }
.checklist-item:has(input:checked) { border-color: var(--ok); background: var(--ok-soft); }
.checklist-item:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.term-tree .is-here { color: var(--code-text); font-weight: 700; }
.term-tree .term-here { color: var(--accent-ink); }
.term-here {
  margin-left: 0.5rem; padding: 0 0.35rem; border-radius: var(--r-sm);
  background: var(--accent); color: var(--accent-ink);
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
}
@media (max-width: 600px) {
  .term-tree, .term-side:has([data-term-git]:not([hidden])) .term-tree { max-height: 10rem; }
}
.term-commits code { background: none; border: 0; padding: 0; font-size: inherit; }
.term-files .is-conflict { color: #ff9c8f; font-weight: 700; }
.term-remote-url { margin: 0 0 var(--sp-1); color: var(--code-muted); overflow-wrap: anywhere; }
.term-remote-status { margin: var(--sp-2) 0 0; color: var(--tok-number); }
@media (min-width: 900px) {
  .term-side:has([data-term-git]:not([hidden])) { max-height: 34rem; overflow-y: auto; }
}

/* ---------------------------------------------------------------------------
   Django lab
   --------------------------------------------------------------------------- */
.lab {
  container-type: inline-size;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--code-border);
  background: var(--code-bg);
  color: var(--code-text);
}
.lab-grid { display: grid; grid-template-columns: minmax(0, 1fr); }
@container (min-width: 820px) {
  .lab-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .lab-browser { border-top: 0 !important; border-left: 1px solid var(--code-border); }
}
.lab-code { min-width: 0; }
.lab-code .editor { max-height: 26rem; }
.lab-code .file-tabs { overflow-x: auto; scrollbar-width: none; }
.lab-code .file-tab { white-space: nowrap; }
.file-tab.is-readonly { font-weight: 400; font-style: italic; }
.lab-readonly-note { margin: 0; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-xs); color: var(--code-muted); border-bottom: 1px solid var(--code-border); }
.lab-readonly { margin: 0; border: 0; border-radius: 0; max-height: 24rem; overflow: auto; opacity: 0.85; }
.lab-browser { border-top: 1px solid var(--code-border); display: flex; flex-direction: column; min-width: 0; }
.lab-status { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 700; }
.lab-status[data-kind="ok"] { color: var(--tok-string); }
.lab-status[data-kind="warn"] { color: #ffb86b; }
.lab-status[data-kind="bad"] { color: #ff9c8f; }
.lab-address {
  display: flex; align-items: center; gap: var(--sp-1);
  margin: var(--sp-2); padding: 0 var(--sp-2);
  background: var(--code-bg-2); border: 1px solid var(--code-border); border-radius: var(--r-pill);
  font: 0.8125rem/1 var(--font-mono);
}
.lab-address:focus-within { border-color: var(--accent); }
.lab-host { color: var(--code-muted); white-space: nowrap; }
.lab-address-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--code-text); font: inherit; padding: 0.55rem 0; }
.lab-page { flex: 1; min-height: 18rem; background: #fff; display: flex; resize: vertical; overflow: hidden; }
.lab-page iframe { flex: 1; width: 100%; min-height: 18rem; border: 0; background: #fff; }
.lab-page iframe[hidden] { display: none; }
.lab-placeholder { margin: auto; padding: var(--sp-4); color: #6b6b6b; text-align: center; font-size: var(--fs-sm); }
.lab-placeholder[hidden] { display: none; }
.lab.is-busy .lab-page, .lab.is-loading .lab-page { opacity: 0.6; }
.lab-trace { list-style: none; margin: 0; padding: var(--sp-2) var(--sp-3); border-top: 1px solid var(--code-border); font: 0.78rem/1.7 var(--font-mono); min-height: 2.4rem; }
.lab-trace:empty { display: none; }
.lab-trace li + li { margin-top: var(--sp-1); padding-top: var(--sp-1); border-top: 1px dashed var(--code-border); }
.lab-trace code { background: none; border: 0; padding: 0; color: var(--tok-builtin); font-size: inherit; }
.lab-step { white-space: nowrap; }
.lab-step.is-ok b { color: var(--tok-string); }
.lab-step.is-warn, .lab-step.is-warn b { color: #ffb86b; }
.lab-step.is-bad, .lab-step.is-bad b { color: #ff9c8f; }
.lab-arrow { color: var(--code-muted); }
.lab-trace li { overflow-wrap: anywhere; }
.lab .error-card { margin: 0; border-radius: 0; border-width: 1px 0 0; }
.feedback code, .hint-body code, .requirements code { overflow-wrap: anywhere; white-space: normal; }
.lab-console { border-top: 1px solid var(--code-border); }
.lab-console-hint { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lab-console-screen { height: 13rem; }
.lab-console.is-shell .term-prompt { color: var(--tok-builtin); }
.lab-sql { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: var(--code-muted); }
.lab-sql span { font-size: 0.68rem; font-weight: 700; padding: 0 0.3rem; border: 1px solid var(--code-border); border-radius: var(--r-sm); margin-right: 0.3rem; }
.block :not(pre) > code { overflow-wrap: anywhere; }
@media (max-width: 600px) { .block :not(pre) > code { white-space: normal; } }
.lab-user { color: var(--tok-number); }
.lab-output { border-top: 1px solid var(--code-border); padding: var(--sp-2) var(--sp-3); font: 0.78rem/1.6 var(--font-mono); }
.lab-output[hidden] { display: none; }
.lab-output p { margin: 0; color: var(--code-muted); font-size: 0.7rem; letter-spacing: 0.04em; text-transform: uppercase; font-family: var(--font-mono); }
.lab-output pre { margin: var(--sp-1) 0 0; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--tok-string); max-height: 9rem; overflow: auto; font: inherit; }
/* Tables in lessons become stacked cards on phones (three columns don't fit). */
@media (max-width: 600px) {
  .prose table, .prose tbody, .prose tr, .prose td { display: block; width: auto; }
  .prose thead { display: none; }
  .prose tr { padding: var(--sp-3) 0; border-bottom: 1px solid var(--border); }
  .prose td { border: 0 !important; padding: 0.1rem 0 !important; }
  .prose td:first-child { font-weight: 700; }
  .prose td:not(:first-child) { color: var(--text-2); }
}


/* ── Courses: catalogue cards, course page, roadmap actions ─────────────── */
.course-grid { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.course-card {
  display: grid;
  gap: var(--sp-3);
  align-content: start;
  padding: var(--sp-5);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.course-card-meta { display: flex; gap: var(--sp-2); align-items: center; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-2); min-height: 1.4em; }
.course-card h3 { font-size: var(--fs-lg); margin: 0; }
.course-card h3 a { text-decoration: none; }
.course-card h3 a:hover { text-decoration: underline; }
.course-card p { margin: 0; color: var(--text-2); }
.course-card-facts { font-size: var(--fs-xs); }
.course-card .btn { justify-self: start; }
.course-card-progress { gap: var(--sp-2); flex-wrap: nowrap; }

.course-facts { display: flex; flex-wrap: wrap; gap: var(--sp-5) var(--sp-6); margin: var(--sp-5) 0; }
.course-facts div { display: grid; gap: 2px; }
.course-facts dt { font: 600 var(--fs-xs)/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-2); }
.course-facts dd { margin: 0; font: 700 var(--fs-lg)/1.2 var(--font-display); }
.course-section { margin-top: var(--sp-7); }
.course-section h2 { font-size: var(--fs-lg); }
.check-list { list-style: none; padding: 0; display: grid; gap: var(--sp-2); }
.check-list li { position: relative; padding-left: 1.7em; }
.check-list li::before { content: "✓"; position: absolute; left: 0; color: var(--ok); font-weight: 700; }
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.pill-list li { padding: var(--sp-1) var(--sp-3); border: 1px solid var(--border); border-radius: 999px; font-size: var(--fs-sm); background: var(--surface); }
.syllabus { border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); margin-bottom: var(--sp-3); }
.syllabus summary { display: flex; gap: var(--sp-3); align-items: baseline; justify-content: space-between; flex-wrap: wrap; padding: var(--sp-4) var(--sp-5); cursor: pointer; }
.syllabus summary > span:first-child { display: grid; gap: 2px; }
.syllabus-list { list-style: none; margin: 0; padding: 0 var(--sp-5) var(--sp-3); }
.syllabus-list li { display: grid; grid-template-columns: 1.6rem 1fr auto; gap: var(--sp-3); align-items: baseline; padding: var(--sp-3) 0; border-top: 1px solid var(--border); margin: 0; }
.syllabus-list li > span:nth-child(2) { display: grid; gap: 2px; min-width: 0; }

.roadmap-actions { margin-top: var(--sp-5); gap: var(--sp-4); }
.mode-switch { display: flex; gap: var(--sp-2); align-items: center; }
.segmented { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; padding: 2px; background: var(--surface); }
.segmented button { border: 0; background: transparent; color: var(--text-2); font: 600 var(--fs-sm)/1 var(--font-body, inherit); padding: 0.45em 0.9em; border-radius: 999px; cursor: pointer; }
.segmented button[aria-pressed="true"] { background: var(--accent-soft); color: var(--accent-text); }
.choice-sub { display: block; font-size: var(--fs-sm); color: var(--text-2); font-weight: 400; }

/* ── Trace table ────────────────────────────────────────────────────────── */
.trace-grid { display: grid; gap: var(--sp-4); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 60rem) { .trace-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.trace-grid .code-static { margin: 0; }
.trace-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.trace-table th, .trace-table td { padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border); text-align: left; }
.trace-table thead th { font: 600 var(--fs-sm)/1.3 var(--font-mono); background: var(--surface-2); }
.trace-table tbody th { font-weight: 500; color: var(--text-2); white-space: nowrap; }
.trace-table tr:last-child > * { border-bottom: 0; }
.trace-table td { font-family: var(--font-mono); min-width: 4.5rem; }
.trace-table input {
  width: 100%; min-width: 3.5rem; font: inherit; padding: 0.35rem 0.5rem;
  border: 1px solid var(--border-strong, var(--border)); border-radius: var(--r-sm, 6px);
  background: var(--surface); color: var(--text);
}
.trace-table input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.trace-table input.is-wrong { border-color: var(--bad); background: var(--bad-soft); }
.trace-table input.is-right { border-color: var(--ok); }
.trace-table .is-given { color: var(--text-2); }
.trace-grid--stacked { grid-template-columns: minmax(0, 1fr) !important; }
.trace-code { display: flex; gap: 1.1em; }
.trace-code code { flex: 1; min-width: 0; }
.trace-lines { color: var(--tok-comment); text-align: right; user-select: none; white-space: pre; flex: none; }
.trace-table thead th { white-space: nowrap; }
.trace-code code { font-size: inherit; line-height: inherit; }