/* ═══════════════════════════════════════════════════════════════════
   LearnWithPython design system v2 — light-first, theme-aware, animated
   Light theme is the default; [data-theme="dark"] flips the palette.
   Code editors intentionally stay dark in both themes.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* brand */
  --brand-1: #6366f1;          /* indigo */
  --brand-2: #06b6d4;          /* cyan   */
  --brand-grad: linear-gradient(100deg, var(--brand-1), var(--brand-2));
  --success: #10b981;
  --warn: #f59e0b;
  --danger: #f43f5e;

  /* light theme (default) */
  --bg: #f6f8fd;
  --bg-soft: #eef2fa;
  --surface: #ffffff;
  --surface-2: #f1f5fb;
  --border: #e2e8f2;
  --text: #0f172a;
  --text-dim: #5b6b83;
  --nav-bg: rgba(255, 255, 255, .8);
  --shadow: 0 4px 24px rgba(15, 23, 42, .07);
  --shadow-lg: 0 18px 44px rgba(15, 23, 42, .13);
  --tint-1: rgba(99, 102, 241, .09);
  --tint-2: rgba(6, 182, 212, .08);
  --code-inline-bg: #eef2fb;
  --code-inline-fg: #4f46e5;

  --primary: var(--brand-1);
  --primary-2: var(--brand-2);
  --accent: var(--brand-1);
  --radius: 16px;
  --font: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --display: 'Manrope', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
}

[data-theme="dark"] {
  --bg: #0b0f1a;
  --bg-soft: #101626;
  --surface: #151c2c;
  --surface-2: #1c2438;
  --border: #263049;
  --text: #e6ebf4;
  --text-dim: #94a3b8;
  --nav-bg: rgba(11, 15, 26, .82);
  --shadow: 0 8px 30px rgba(0, 0, 0, .35);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55);
  --tint-1: rgba(99, 102, 241, .16);
  --tint-2: rgba(6, 182, 212, .10);
  --code-inline-bg: #1c2438;
  --code-inline-fg: #7dd3fc;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background:
    radial-gradient(1100px 480px at 85% -8%, var(--tint-1), transparent 60%),
    radial-gradient(900px 420px at 8% -4%, var(--tint-2), transparent 60%),
    var(--bg);
  color: var(--text);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background .3s, color .3s;
}
main { flex: 1; width: 100%; }
a { color: var(--brand-1); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { font-family: var(--display); line-height: 1.2; font-weight: 800; letter-spacing: -.02em; }
code {
  font-family: var(--mono); font-size: .9em;
  background: var(--code-inline-bg); border: 1px solid var(--border);
  padding: .1em .38em; border-radius: 6px; color: var(--code-inline-fg);
}
pre code { background: none; border: none; padding: 0; color: inherit; }
.ui-icon {
  width: 1em; height: 1em; display: inline-block; flex: 0 0 auto;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -.13em;
}
.heading-icon { width: .92em; height: .92em; color: var(--brand-2); }
.course-meta > span,
.nav-xp, .nav-streak, .done-badge,
.path-checks span, .auth-proof span {
  display: inline-flex; align-items: center; gap: .32rem;
}
.course-meta .ui-icon, .nav-stats .ui-icon, .done-badge .ui-icon {
  width: 1.05em; height: 1.05em;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand-1); color: #fff; padding: .6rem 1rem; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

.grad {
  background: linear-gradient(100deg, var(--brand-1), var(--brand-2), var(--brand-1));
  background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: gradShift 7s ease infinite;
}
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.muted { color: var(--text-dim); font-weight: 400; font-size: .9em; }

/* ── reading progress bar ────────────────────────────────────────── */
.read-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: var(--brand-grad); z-index: 60;
  transition: width .1s linear;
}

/* ── nav ─────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s, box-shadow .25s;
}
.nav.scrolled { border-bottom-color: var(--border); box-shadow: 0 4px 20px rgba(15, 23, 42, .06); }
[data-theme="dark"] .nav.scrolled { box-shadow: 0 4px 20px rgba(0, 0, 0, .4); }
.nav-inner {
  max-width: 1200px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.brand { display: flex; align-items: center; gap: .5rem; font-size: 1.25rem; font-weight: 900; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-name em { font-style: normal; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand-mark {
  width: 34px; height: 34px; display: grid; place-items: center;
  color: var(--brand-1); border: 1px solid color-mix(in srgb, var(--brand-1) 24%, var(--border));
  background: linear-gradient(145deg, var(--surface), var(--tint-1));
  border-radius: 10px; box-shadow: inset 0 1px rgba(255,255,255,.45);
  transition: transform .3s cubic-bezier(.2, 1.6, .4, 1);
}
.brand-glyph { width: 22px; height: 22px; }
.brand:hover .brand-mark { transform: rotate(-12deg) scale(1.15); }
.nav-links { display: flex; gap: .25rem; flex: 1; }
.nav-links a {
  color: var(--text-dim); font-weight: 600; font-size: .95rem;
  padding: .45rem .85rem; border-radius: 10px; position: relative;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.nav-links a.active { color: var(--brand-1); background: var(--tint-1); }
.nav-right { display: flex; align-items: center; gap: .55rem; }
.nav-stats { display: flex; gap: .7rem; font-size: .85rem; font-weight: 700; color: var(--text-dim); }
.theme-toggle {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 1.05rem;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s, background .2s;
}
.theme-icon { width: 18px; height: 18px; }
.theme-toggle:hover { transform: rotate(15deg) scale(1.08); color: var(--brand-1); }
.nav-burger { display: none; background: none; border: none; cursor: pointer; padding: .4rem; }
.nav-burger span { display: block; width: 22px; height: 2px; background: var(--text); margin: 5px 0; border-radius: 2px; transition: .2s; }

/* ── buttons ─────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  font-family: var(--font); font-weight: 700; font-size: .95rem;
  padding: .6rem 1.2rem; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s, background .15s;
  text-decoration: none !important;
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary { background: var(--brand-grad); color: #fff; box-shadow: 0 4px 14px rgba(99, 102, 241, .3); }
.btn-primary::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%);
  transform: translateX(-120%); transition: transform .5s;
}
.btn-primary:hover { box-shadow: 0 8px 26px rgba(99, 102, 241, .45); transform: translateY(-2px); }
.btn-primary:hover::after { transform: translateX(120%); }
.btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-ghost:hover { background: var(--surface-2); transform: translateY(-1px); }
.btn-run { background: var(--success); color: #fff; box-shadow: 0 3px 12px rgba(16, 185, 129, .3); }
.btn-run:hover { box-shadow: 0 6px 20px rgba(16, 185, 129, .45); transform: translateY(-1px); }
.btn-run:disabled { opacity: .6; cursor: wait; transform: none; }
.btn-success { background: var(--success); color: #fff; }
.btn-warn { background: var(--warn); color: #fff; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-sm { padding: .42rem .85rem; font-size: .85rem; border-radius: 10px; }
.btn-lg { padding: .85rem 1.75rem; font-size: 1.05rem; border-radius: 14px; }

/* ── cards & layout ──────────────────────────────────────────────── */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.card.pad { padding: 1.75rem; }
.section { max-width: 1200px; margin: 0 auto; padding: 3.25rem 1.25rem; }
.section.narrow { max-width: 860px; }
.section.alt { max-width: none; background: var(--bg-soft); border-block: 1px solid var(--border); }
.section.alt > * { max-width: 1200px; margin-left: auto; margin-right: auto; }
.section-title { font-size: clamp(1.6rem, 3.5vw, 2.4rem); text-align: center; margin-bottom: .5rem; }
.section-title.left { text-align: left; margin: 2.5rem 0 1rem; font-size: 1.4rem; }
.section-sub { text-align: center; color: var(--text-dim); max-width: 640px; margin: 0 auto 2.5rem; }
.page-head { max-width: 1200px; margin: 0 auto; padding: 2.75rem 1.25rem 0; }
.page-head h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); margin-bottom: .5rem; }
.page-head p { color: var(--text-dim); max-width: 700px; }
.crumbs { font-size: .85rem; color: var(--text-dim); display: inline-block; margin-bottom: .75rem; }
.notice { padding: 1.25rem 1.5rem; margin-top: 1.5rem; color: var(--text-dim); }
.notice h3 { color: var(--text); margin-bottom: .5rem; }
.notice ul { margin-left: 1.2rem; }

/* ── scroll reveal ───────────────────────────────────────────────── */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.16, 1, .3, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* ── hero ────────────────────────────────────────────────────────── */
.hero { padding: 4.5rem 1.25rem 3.5rem; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; pointer-events: none; z-index: -1; }
.hero-grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 44px 44px; opacity: .5;
  -webkit-mask-image: radial-gradient(650px 420px at 50% 20%, #000 20%, transparent 75%);
  mask-image: radial-gradient(650px 420px at 50% 20%, #000 20%, transparent 75%);
}
.blob { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; }
.blob-1 { width: 420px; height: 420px; background: var(--tint-1); top: -140px; right: 4%; animation: blobFloat 16s ease-in-out infinite alternate; }
.blob-2 { width: 340px; height: 340px; background: var(--tint-2); top: 30%; left: -120px; animation: blobFloat 20s 2s ease-in-out infinite alternate-reverse; }
.blob-3 { width: 240px; height: 240px; background: rgba(16, 185, 129, .10); bottom: -80px; right: 30%; animation: blobFloat 14s 1s ease-in-out infinite alternate; }
@keyframes blobFloat {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 34px) scale(1.12); }
}
.hero-inner {
  max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem; align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: .4rem;
  font-size: .8rem; font-weight: 700;
  background: var(--tint-1); color: var(--brand-1);
  border: 1px solid var(--border);
  padding: .35rem .95rem; border-radius: 99px; margin-bottom: 1.2rem;
}
.pill .pulse-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  animation: pulse 1.8s ease infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, .5); }
  50% { box-shadow: 0 0 0 6px rgba(16, 185, 129, 0); }
}
.hero h1 { font-size: clamp(2.3rem, 5vw, 3.7rem); margin-bottom: 1rem; }
.hero-sub { color: var(--text-dim); font-size: 1.1rem; max-width: 540px; margin-bottom: 1.75rem; }
.hero-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-bottom: 2.25rem; }
.hero-stats { display: flex; gap: 2.5rem; }
.hero-stats div { display: flex; flex-direction: column; }
.hero-stats strong { font-size: 1.7rem; background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-stats span { font-size: .85rem; color: var(--text-dim); }

/* staggered entrance */
.stagger { opacity: 0; animation: fadeUp .7s cubic-bezier(.16, 1, .3, 1) forwards; }
.stagger.d1 { animation-delay: .05s; } .stagger.d2 { animation-delay: .15s; }
.stagger.d3 { animation-delay: .25s; } .stagger.d4 { animation-delay: .35s; }
.stagger.d5 { animation-delay: .45s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.hero-demo {
  overflow: hidden; position: relative;
  animation:
    fadeUp .7s .2s cubic-bezier(.16, 1, .3, 1) both,
    heroFloat 7s 1.2s ease-in-out infinite;
  box-shadow: var(--shadow-lg);
}
.hero-demo::before {
  content: ''; position: absolute; inset: -2px; z-index: -1; border-radius: inherit;
  background: var(--brand-grad); opacity: .5; filter: blur(18px);
}
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* ── code editor (always dark — in both themes) ──────────────────── */
.editor-chrome {
  display: flex; align-items: center; gap: .45rem;
  padding: .7rem 1rem; border-bottom: 1px solid #263049;
  background: #161d2e; border-radius: var(--radius) var(--radius) 0 0;
}
/* OS-neutral file badge (replaces macOS traffic-light dots). */
.editor-badge {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .12rem .4rem; border-radius: 5px;
  background: rgba(56, 189, 248, .14); border: 1px solid rgba(56, 189, 248, .28);
  color: #7dd3fc; font: 800 .58rem/1.5 var(--mono); letter-spacing: .08em;
}
.editor-title { margin-left: .35rem; font-family: var(--mono); font-size: .8rem; color: #8ea0bd; }
.copy-btn {
  margin-left: auto; background: #1f2940; color: #9fb2d0; border: 1px solid #2c3854;
  font-size: .72rem; font-weight: 700; padding: .25rem .65rem; border-radius: 7px; cursor: pointer;
  transition: background .15s, color .15s;
}
.copy-btn:hover { background: #2a3654; color: #e2e8f0; }
.code-input {
  width: 100%; border: none; resize: vertical; display: block;
  background: #0d1322; color: #dbeafe;
  font-family: var(--mono); font-size: .92rem; line-height: 1.6;
  padding: 1rem 1.2rem; outline: none; tab-size: 4; min-height: 120px;
}
.code-input::placeholder { color: #64748b; opacity: 1; }
.code-input:focus { box-shadow: inset 0 0 0 2px rgba(99, 102, 241, .5); }
.editor-bar {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  padding: .7rem 1rem; border-top: 1px solid #263049; background: #161d2e;
}
.editor-bar .btn-ghost { background: #1f2940; color: #cbd5e1; border-color: #2c3854; }
.editor-bar .btn-ghost:hover { background: #2a3654; }
.editor-hint { font-size: .8rem; color: #8ea0bd; margin-left: auto; }
.code-output {
  font-family: var(--mono); font-size: .88rem; line-height: 1.55;
  background: #080c16; color: #a7f3d0; padding: 1rem 1.2rem;
  border-radius: 0 0 var(--radius) var(--radius);
  white-space: pre-wrap; word-break: break-word;
  min-height: 3.2rem; max-height: 320px; overflow: auto;
}
.code-output.tall { max-height: 460px; }
.code-output.error { color: #fda4af; }

/* ── course cards ────────────────────────────────────────────────── */
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.5rem; }
.course-card {
  padding: 1.5rem; color: var(--text); display: flex; flex-direction: column; gap: .55rem;
  border-top: 3px solid var(--accent); position: relative; overflow: hidden;
}
.course-card::after {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 90px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent);
  pointer-events: none;
}
.course-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); text-decoration: none; }
.course-card p { color: var(--text-dim); font-size: .92rem; flex: 1; }
.course-top { display: flex; justify-content: space-between; align-items: center; }
.course-icon {
  width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 44px;
  color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface));
  border-radius: 13px;
}
.course-icon .ui-icon { width: 24px; height: 24px; }
.course-icon.lg { width: 52px; height: 52px; flex-basis: 52px; border-radius: 15px; }
.course-icon.lg .ui-icon { width: 29px; height: 29px; }
.course-icon.xl { width: 66px; height: 66px; flex-basis: 66px; border-radius: 18px; }
.course-icon.xl .ui-icon { width: 36px; height: 36px; }
.level-badge {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: .25rem .6rem; border-radius: 99px;
}
.level-beginner { background: rgba(16, 185, 129, .13); color: #0b9e6f; }
.level-intermediate { background: rgba(245, 158, 11, .14); color: #b07207; }
.level-advanced { background: rgba(244, 63, 94, .12); color: #dc3355; }
[data-theme="dark"] .level-beginner { color: #34d399; }
[data-theme="dark"] .level-intermediate { color: #fbbf24; }
[data-theme="dark"] .level-advanced { color: #fb7185; }
.course-meta { display: flex; gap: 1rem; flex-wrap: wrap; font-size: .84rem; color: var(--text-dim); font-weight: 600; }

.filter-chips { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.5rem 0 .25rem; }
.chip {
  background: var(--surface); border: 1px solid var(--border); color: var(--text-dim);
  font-weight: 700; font-size: .85rem; padding: .4rem 1rem; border-radius: 99px; cursor: pointer;
  transition: all .15s;
}
.chip:hover { border-color: var(--brand-1); color: var(--brand-1); }
.chip.on { background: var(--brand-grad); color: #fff; border-color: transparent; }

.course-list { display: flex; flex-direction: column; gap: 1.1rem; }
.course-row {
  display: flex; gap: 1.4rem; align-items: center; padding: 1.5rem 1.75rem;
  color: var(--text); border-left: 4px solid var(--accent);
}
.course-row:hover { transform: translateX(6px); text-decoration: none; box-shadow: var(--shadow-lg); }
.course-row.hidden { display: none; }
.course-row-body { flex: 1; display: flex; flex-direction: column; gap: .4rem; }
.course-row-top { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap; }
.course-row-body p { color: var(--text-dim); font-size: .93rem; }
.course-row-go { font-size: 1.1rem; font-weight: 800; color: var(--accent); white-space: nowrap; transition: transform .15s; }
.course-row:hover .course-row-go { transform: translateX(4px); }

/* ── progress ────────────────────────────────────────────────────── */
.progress-track {
  height: 8px; background: var(--surface-2); border-radius: 99px; overflow: hidden;
  border: 1px solid var(--border); margin-top: .4rem;
}
.progress-track.lg { height: 12px; }
.progress-fill {
  height: 100%; border-radius: 99px;
  background: var(--brand-grad);
  background-size: 200% 100%;
  animation: gradShift 4s linear infinite;
  transition: width .5s cubic-bezier(.16, 1, .3, 1);
}
.progress-label { font-size: .8rem; color: var(--text-dim); font-weight: 600; }

/* ── course detail / lessons ─────────────────────────────────────── */
.course-head-row { display: flex; gap: 1.5rem; align-items: flex-start; margin-bottom: 1rem; }
.outcomes-head { max-width: 680px; margin-bottom: 1.25rem; }
.outcomes-head h2 { font-size: clamp(1.45rem, 3vw, 2rem); margin: .2rem 0 .35rem; }
.outcomes-head p { color: var(--text-dim); }
.eyebrow {
  color: var(--accent, var(--brand-1)); font-size: .72rem; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase;
}
.use-case-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  margin-bottom: 2.75rem;
}
.use-case-card {
  padding: 1.2rem; display: flex; align-items: flex-start; gap: .8rem;
  border-top: 3px solid var(--accent); min-width: 0;
}
.use-case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.use-case-icon {
  width: 42px; height: 42px; flex: 0 0 42px; display: grid; place-items: center;
  border-radius: 12px; background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--accent);
}
.use-case-icon .ui-icon { width: 22px; height: 22px; }
.use-case-card h3 { font-size: .98rem; margin-bottom: .25rem; }
.use-case-card p { color: var(--text-dim); font-size: .84rem; line-height: 1.45; }
.lesson-list { list-style: none; display: flex; flex-direction: column; gap: .8rem; }
.lesson-row { display: flex; gap: 1.2rem; align-items: center; padding: 1.1rem 1.4rem; color: var(--text); }
.lesson-row:hover { transform: translateX(6px); text-decoration: none; box-shadow: var(--shadow-lg); }
.lesson-row.is-done { border-color: rgba(16, 185, 129, .45); }
.lesson-row.is-done .lesson-num { background: var(--success); color: #fff; border-color: transparent; }
.lesson-num {
  width: 38px; height: 38px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%;
  font-weight: 800; color: var(--accent);
}
.lesson-row-body { flex: 1; }
.lesson-row-body h3 { font-size: 1.05rem; margin-bottom: .2rem; }

/* ── lesson page ─────────────────────────────────────────────────── */
.lesson-layout {
  max-width: 1240px; margin: 0 auto; padding: 2rem 1.25rem;
  display: grid; grid-template-columns: 270px 1fr; gap: 2rem; align-items: start;
}
.lesson-side { padding: 1.25rem; position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; }
.mobile-course-nav { display: none; }
.side-lessons { display: flex; flex-direction: column; gap: .15rem; margin-top: 1rem; }
.side-lesson {
  display: flex; gap: .6rem; align-items: center; padding: .5rem .6rem;
  border-radius: 8px; color: var(--text-dim); font-size: .87rem; font-weight: 600;
}
.side-lesson span {
  width: 22px; height: 22px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border-radius: 50%; font-size: .72rem;
}
.side-lesson:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-lesson.current { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); }
.side-lesson.is-done span { background: var(--success); color: #fff; }
.lesson-main { display: flex; flex-direction: column; gap: 1.75rem; min-width: 0; }
.lesson-header h1 { font-size: clamp(1.7rem, 3.5vw, 2.4rem); margin-bottom: .4rem; }
.lesson-content { font-size: 1.02rem; }
.lesson-content p { margin-bottom: 1rem; }
.lesson-content ul { margin: 0 0 1rem 1.3rem; }
.lesson-content li { margin-bottom: .45rem; }
.lesson-content pre {
  background: #0d1322; border: 1px solid #263049; border-radius: 12px;
  padding: 1rem 1.2rem; overflow-x: auto; margin-bottom: 1rem;
  font-family: var(--mono); font-size: .88rem; line-height: 1.6; color: #dbeafe;
}
.lesson-content pre code { color: #dbeafe; }

/* deep-dive callouts */
.callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.callout { padding: 1.3rem 1.5rem; border-left: 4px solid var(--border); }
.callout h3 { font-size: .98rem; margin-bottom: .55rem; display: flex; align-items: center; gap: .5rem; }
.callout p, .callout li { color: var(--text-dim); font-size: .93rem; }
.callout ul { margin-left: 1.2rem; }
.callout li { margin-bottom: .4rem; }
.callout.world { border-left-color: var(--brand-2); grid-column: 1 / -1; }
.callout.mistakes { border-left-color: var(--danger); }
.callout.protip { border-left-color: var(--warn); }

.block-title { font-size: 1.15rem; padding: 1.1rem 1.25rem .4rem; display: flex; align-items: center; gap: .6rem; }
.editor-heading {
  padding: 1rem 1.25rem .35rem; display: flex; justify-content: space-between;
  align-items: center; gap: 1rem;
}
.editor-heading .block-title { padding: .1rem 0 .35rem; }
.editor-intro { padding: 0 1.25rem 1rem; color: var(--text-dim); font-size: .92rem; }
.save-state {
  display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap;
  color: var(--text-dim); font-size: .75rem; font-weight: 700;
}
.save-state::before {
  content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 15%, transparent);
}
.standalone-save { display: flex; justify-content: flex-end; padding: .65rem 1rem; background: var(--surface-2); }
.output-target {
  display: grid; grid-template-columns: auto 1fr; gap: .8rem; align-items: start;
  margin: 0 1.25rem 1rem; padding: .75rem .9rem;
  background: var(--surface-2); border: 1px dashed var(--border); border-radius: 12px;
}
.output-target > span {
  color: var(--text-dim); font-size: .72rem; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding-top: .1rem;
}
.output-target pre {
  min-width: 0; overflow-x: auto; white-space: pre-wrap; color: var(--text);
  font: 600 .82rem/1.45 var(--mono);
}
.editor-block { overflow: hidden; }
.editor-block .editor-chrome { border-radius: 0; }
.challenge-prompt { padding: 0 1.25rem .9rem; color: var(--text-dim); }
.xp-tag {
  font-size: .75rem; background: var(--tint-1); color: var(--brand-1);
  padding: .2rem .6rem; border-radius: 99px; font-weight: 800;
}
.hint-box { padding: .8rem 1.25rem; background: rgba(245, 158, 11, .09); color: #b07207; font-size: .92rem; }
[data-theme="dark"] .hint-box { color: var(--warn); }
.solution-box { border-radius: 0; color: #c4b5fd; border-block: 1px solid #263049; }
.check-result { padding: .9rem 1.25rem; font-weight: 700; }
.check-result.pass { background: rgba(16, 185, 129, .1); color: #0b9e6f; animation: passPop .4s cubic-bezier(.2, 1.6, .4, 1); }
[data-theme="dark"] .check-result.pass { color: var(--success); }
@keyframes passPop { from { transform: scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.check-result.fail { background: rgba(244, 63, 94, .08); color: var(--danger); }
.check-result small { display: block; font-weight: 400; color: var(--text-dim); margin-top: .3rem; white-space: pre-wrap; font-family: var(--mono); }

/* quiz */
.quiz-block { padding-bottom: 1.25rem; }
.quiz-q { border: none; padding: .6rem 1.25rem; }
.quiz-q legend { font-weight: 700; margin-bottom: .5rem; }
.quiz-opt {
  display: flex; gap: .6rem; align-items: center; padding: .55rem .8rem;
  border: 1px solid var(--border); border-radius: 12px; margin-bottom: .45rem;
  cursor: pointer; transition: background .12s, border-color .12s; font-size: .95rem;
}
.quiz-opt:hover { background: var(--surface-2); border-color: var(--brand-1); }
.quiz-opt input { accent-color: var(--brand-1); }
.quiz-opt.correct { border-color: var(--success); background: rgba(16, 185, 129, .08); }
.quiz-opt.wrong { border-color: var(--danger); background: rgba(244, 63, 94, .07); }
.quiz-explain { font-size: .87rem; color: var(--text-dim); padding: .3rem .2rem; }
.quiz-block .btn { margin: .6rem 1.25rem 0; }
.quiz-score { font-weight: 800; color: var(--brand-1); margin-left: .6rem; }

.notes-block { padding-bottom: 1.25rem; }
.notes-input {
  width: calc(100% - 2.5rem); margin: 0 1.25rem; resize: vertical;
  background: var(--surface-2); color: var(--text); border: 1px solid var(--border);
  border-radius: 12px; padding: .8rem 1rem; font-family: var(--font); font-size: .95rem;
}
.notes-input:focus { outline: 2px solid rgba(99, 102, 241, .45); }

.lesson-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }

.recipe-strip {
  display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
  padding: 1rem; margin-bottom: 1rem; border: 1px solid var(--border);
  border-radius: var(--radius); background: var(--surface);
}
.recipe-strip > div { margin-right: auto; display: flex; flex-direction: column; }
.recipe-btn {
  min-height: 42px; padding: .55rem .8rem; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); color: var(--text);
  font: 700 .84rem var(--font); cursor: pointer;
}
.recipe-btn:hover { border-color: var(--brand-1); transform: translateY(-1px); }

/* ── challenges arena ────────────────────────────────────────────── */
.challenge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.1rem; }
.challenge-card { padding: 1.4rem; color: var(--text); display: flex; flex-direction: column; gap: .5rem; }
.challenge-card:hover { transform: translateY(-5px); text-decoration: none; box-shadow: var(--shadow-lg); }
.challenge-card.is-done { border-color: rgba(16, 185, 129, .5); }
.challenge-top { display: flex; justify-content: space-between; align-items: center; }
.diff-badge {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: .25rem .65rem; border-radius: 99px; background: var(--surface-2); color: var(--text-dim);
}
.diff-easy .diff-badge, .diff-badge.diff-easy { background: rgba(16, 185, 129, .13); color: #0b9e6f; }
.diff-medium .diff-badge, .diff-badge.diff-medium { background: rgba(245, 158, 11, .14); color: #b07207; }
.diff-hard .diff-badge, .diff-badge.diff-hard { background: rgba(244, 63, 94, .12); color: #dc3355; }
[data-theme="dark"] .diff-easy .diff-badge, [data-theme="dark"] .diff-badge.diff-easy { color: #34d399; }
[data-theme="dark"] .diff-medium .diff-badge, [data-theme="dark"] .diff-badge.diff-medium { color: #fbbf24; }
[data-theme="dark"] .diff-hard .diff-badge, [data-theme="dark"] .diff-badge.diff-hard { color: #fb7185; }
.done-badge { font-size: .75rem; font-weight: 800; color: var(--success); }

/* ── features / stats / dashboard ────────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
.feature { padding: 1.6rem; }
.feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.feature-icon {
  color: var(--brand-1); display: inline-flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; border-radius: 14px; background: var(--tint-1); margin-bottom: .8rem;
}
.feature-icon .ui-icon { width: 27px; height: 27px; }
.feature h3 { margin-bottom: .45rem; font-size: 1.08rem; }
.feature p { color: var(--text-dim); font-size: .92rem; }
.cta-band { text-align: center; padding-block: 4.5rem; }
.cta-band h2 { font-size: clamp(1.5rem, 3.5vw, 2.2rem); margin-bottom: 1.5rem; }

.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.1rem; margin-bottom: 1.5rem; }
.stat { padding: 1.3rem; text-align: center; }
.stat strong { display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 1.7rem; }
.stat strong .ui-icon { width: .9em; height: .9em; color: var(--brand-1); }
.stat span { font-size: .84rem; color: var(--text-dim); font-weight: 600; }
.level-card { padding: 1.3rem 1.6rem; margin-bottom: 1rem; }
.level-row { display: flex; justify-content: space-between; font-weight: 700; font-size: .95rem; }
.dash-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.dash-course { padding: 1.3rem; color: var(--text); border-top: 3px solid var(--accent); }
.dash-course:hover { transform: translateY(-4px); text-decoration: none; box-shadow: var(--shadow-lg); }
.dash-course h3 { font-size: 1.02rem; margin: .4rem 0; }

.achieve-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .9rem; }
.achieve-tile { padding: 1.1rem; text-align: center; display: flex; flex-direction: column; gap: .3rem; }
.achieve-tile:hover { transform: translateY(-3px); }
.achieve-tile-icon {
  width: 50px; height: 50px; display: grid; place-items: center; align-self: center;
  color: var(--brand-1); background: var(--tint-1); border-radius: 15px;
}
.achieve-tile-icon .ui-icon { width: 27px; height: 27px; }
.achieve-tile strong { font-size: .92rem; }
.achieve-tile-desc { font-size: .78rem; color: var(--text-dim); }
.achieve-tile.locked { opacity: .42; filter: grayscale(.9); }

.leaderboard { padding: .5rem 1rem; overflow-x: auto; }
.leaderboard table { width: 100%; border-collapse: collapse; }
.leaderboard th, .leaderboard td { text-align: left; padding: .7rem .8rem; border-bottom: 1px solid var(--border); font-size: .93rem; }
.leaderboard th { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.leaderboard tr.me td { background: var(--tint-1); font-weight: 700; }
.leaderboard tr:last-child td { border-bottom: none; }

/* ── review / flashcards ─────────────────────────────────────────── */
.review-stats { display: grid; grid-template-columns: repeat(4, 1fr); padding: 1.2rem; text-align: center; margin-bottom: 1.75rem; }
.review-stats strong { display: block; font-size: 1.5rem; color: var(--brand-1); }
.review-stats span { font-size: .8rem; color: var(--text-dim); font-weight: 600; }
.flashcard-zone { display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.flashcard {
  width: 100%; min-height: 260px; padding: 2.2rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center; text-align: center;
}
.flashcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.flashcard:focus-visible { outline: 2px solid var(--brand-1); }
.flashcard-face { display: flex; flex-direction: column; gap: 1rem; align-items: center; }
.flash-course { font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-1); }
#cardQuestion { font-size: 1.25rem; font-weight: 700; max-width: 560px; }
.flash-hint { font-size: .8rem; color: var(--text-dim); }
.flash-answer { font-size: 1.2rem; font-weight: 800; color: var(--success); }
.flash-explain { color: var(--text-dim); max-width: 560px; }
.review-actions { display: flex; gap: .8rem; flex-wrap: wrap; justify-content: center; }
.review-actions .btn { flex-direction: row; line-height: 1.2; min-width: 112px; }
.review-actions .btn > span { display: flex; flex-direction: column; align-items: flex-start; }
.review-actions .ui-icon { width: 1.25rem; height: 1.25rem; }
.review-actions small { font-weight: 500; opacity: .85; }
.review-done { padding: 1.5rem 2rem; text-align: center; font-weight: 600; }

/* ── auth ────────────────────────────────────────────────────────── */
.auth-wrap { display: flex; justify-content: center; padding: 4rem 1.25rem; }
.auth-card { width: 100%; max-width: 420px; padding: 2.25rem; display: flex; flex-direction: column; gap: 1rem; }
.auth-card.center { text-align: center; align-items: center; }
.auth-card h1 { font-size: 1.6rem; }
.auth-card label { font-weight: 600; font-size: .9rem; display: flex; flex-direction: column; gap: .35rem; }
.auth-card input {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 12px; padding: .75rem .9rem; font-size: 1rem; font-family: var(--font);
}
.auth-card input:focus { outline: 2px solid rgba(99, 102, 241, .5); border-color: transparent; }
.form-error {
  background: rgba(244, 63, 94, .09); color: var(--danger);
  border: 1px solid rgba(244, 63, 94, .3);
  padding: .7rem 1rem; border-radius: 12px; font-size: .9rem; font-weight: 600;
}
.auth-alt { text-align: center; font-size: .9rem; color: var(--text-dim); }

/* ── toasts & modal ──────────────────────────────────────────────── */
.toasts { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: .6rem; z-index: 90; }
.toast {
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--brand-1);
  color: var(--text); padding: .8rem 1.2rem; border-radius: 12px; box-shadow: var(--shadow-lg);
  font-weight: 600; font-size: .92rem; animation: slideIn .3s cubic-bezier(.16, 1, .3, 1); max-width: 340px;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast { display: flex; align-items: center; gap: .9rem; }
.toast > span { flex: 1; }
.toast-action {
  flex: 0 0 auto; cursor: pointer; border: 0; background: var(--tint-1);
  color: var(--brand-1); font: 800 .82rem var(--font); padding: .3rem .75rem;
  border-radius: 8px; transition: background .15s, transform .1s;
}
.toast-action:hover { background: color-mix(in srgb, var(--brand-1) 20%, transparent); }
.toast-action:active { transform: scale(.96); }
@keyframes slideIn { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }

.modal {
  position: fixed; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  background: rgba(15, 23, 42, .45); backdrop-filter: blur(5px); padding: 1.25rem;
}
[data-theme="dark"] .modal { background: rgba(4, 7, 14, .7); }
.modal[hidden] { display: none; }
.modal-card { max-width: 380px; width: 100%; padding: 2.2rem; text-align: center; animation: pop .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.achieve-card { display: flex; flex-direction: column; gap: .8rem; align-items: center; }
.achieve-icon { font-size: 3.6rem; animation: bounce 1s ease infinite alternate; }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-8px); } }

/* ── back to top ─────────────────────────────────────────────────── */
.to-top {
  position: fixed; bottom: 1.4rem; left: 1.4rem; z-index: 80;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  font-size: 1.1rem; cursor: pointer; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transform: translateY(10px);
  transition: opacity .25s, transform .25s;
}
.to-top.show { opacity: 1; pointer-events: auto; transform: none; }
.to-top:hover { background: var(--surface-2); }

/* ── footer ──────────────────────────────────────────────────────── */
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); margin-top: 3rem; }
.footer-inner {
  max-width: 1200px; margin: 0 auto; padding: 2.5rem 1.25rem 1rem;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem;
}
.footer-tag { color: var(--text); display: block; margin-bottom: .15rem; }
.footer-soon { color: var(--text-dim); font-size: .82rem; opacity: .8; }
.footer-brand p { color: var(--text-dim); font-size: .9rem; margin-top: .5rem; max-width: 300px; }
.footer-col { display: flex; flex-direction: column; gap: .45rem; }
.footer-col h4 { color: var(--text-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .3rem; }
.footer-col a { color: var(--text); font-size: .92rem; }
.footer-copy { text-align: center; color: var(--text-dim); font-size: .82rem; padding: 1.25rem; border-top: 1px solid var(--border); }

/* ── prose ───────────────────────────────────────────────────────── */
.prose h2 { margin: 1.4rem 0 .6rem; font-size: 1.3rem; }
.prose p, .prose ul { margin-bottom: .9rem; color: var(--text-dim); }
.prose ul { margin-left: 1.3rem; }
.prose li { margin-bottom: .4rem; }
.prose strong { color: var(--text); }

/* ═══════════════════ responsive ═══════════════════ */
@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .course-grid, .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-course-grid { grid-template-columns: repeat(2, 1fr); }
  .use-case-grid { grid-template-columns: repeat(2, 1fr); }
  .lesson-layout { grid-template-columns: 1fr; max-width: 900px; }
  .lesson-side { display: none; }
  .mobile-course-nav { display: block; padding: .2rem 1rem; }
  .mobile-course-nav summary {
    padding: .8rem 0; cursor: pointer; color: var(--text); font-weight: 800;
  }
  .mobile-course-nav[open] { padding-bottom: .8rem; }
  .callout-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; background: var(--surface);
    border-bottom: 1px solid var(--border); padding: .8rem 1.25rem; gap: .3rem;
    box-shadow: var(--shadow-lg);
  }
  .nav-links.open { display: flex; }
  .nav-burger { display: block; }
  .nav-stats { display: none; }
  .course-grid, .feature-grid { grid-template-columns: 1fr; }
  .stat-grid, .review-stats { grid-template-columns: repeat(2, 1fr); gap: .8rem; }
  .dash-course-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .course-row { flex-direction: column; align-items: flex-start; gap: .8rem; }
  .course-row-go { display: none; }
  .course-head-row { flex-direction: column; }
  .use-case-grid { grid-template-columns: 1fr; }
  .hero { padding-top: 2.5rem; }
  .hero-stats { gap: 1.5rem; }
  .lesson-footer { flex-direction: column; }
  .lesson-footer .btn { width: 100%; }
  .lesson-layout { padding: 1rem .75rem 2rem; }
  .lesson-main { gap: 1.1rem; }
  .editor-heading { align-items: flex-start; padding: .9rem 1rem .25rem; }
  .editor-heading .save-state { margin-top: .2rem; }
  .editor-intro, .challenge-prompt { padding-left: 1rem; padding-right: 1rem; }
  .output-target { margin-left: 1rem; margin-right: 1rem; grid-template-columns: 1fr; gap: .25rem; }
  .code-input {
    min-height: 220px; padding: .9rem 1rem; font-size: 16px; line-height: 1.55;
    resize: vertical; border-radius: 0;
  }
  .editor-chrome { padding: .65rem .8rem; }
  .editor-bar {
    display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .55rem; padding: .7rem;
  }
  .editor-bar .btn { width: 100%; min-height: 44px; padding-inline: .55rem; }
  .editor-bar .btn-run { grid-column: 1 / -1; }
  .editor-bar .editor-hint { grid-column: 1 / -1; margin: 0; text-align: center; }
  .code-output { font-size: .82rem; padding: .9rem 1rem; max-height: 260px; }
  .recipe-strip { align-items: stretch; }
  .recipe-strip > div { width: 100%; }
  .recipe-btn { flex: 1 1 calc(50% - .4rem); min-height: 46px; }
  .block-title { font-size: 1.05rem; }
  .section { padding-left: .85rem; padding-right: .85rem; }
  .blob { display: none; }
}

/* ═══════════════════ v3: how-it-works, projects, walkthrough ═══════ */

/* rotating word in hero */

/* how it works */
.how-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 2.25rem; }
.how-card { padding: 1.6rem; position: relative; display: flex; flex-direction: column; gap: .7rem; }
.how-num {
  position: absolute; top: -14px; left: 1.4rem;
  width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
  background: var(--brand-grad); color: #fff; border-radius: 50%;
  font-weight: 900; font-size: .9rem; box-shadow: 0 4px 12px rgba(99, 102, 241, .4);
}
.how-card h3 { font-size: 1.08rem; margin-top: .3rem; }
.how-card > p { color: var(--text-dim); font-size: .92rem; }
.how-demo {
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px;
  padding: 1rem 1.1rem; min-height: 92px;
  display: flex; flex-direction: column; justify-content: center; gap: .55rem; overflow: hidden;
}
.how-line { height: 9px; border-radius: 5px; background: var(--border); display: block; }
.how-line.w80 { width: 80%; } .how-line.w60 { width: 60%; }
.how-line.w90 { width: 90%; } .how-line.w40 { width: 40%; }
.how-line.shimmer {
  background: linear-gradient(90deg, var(--border) 25%, var(--tint-1) 50%, var(--border) 75%);
  background-size: 200% 100%; animation: shimmerMove 2.2s linear infinite;
}
@keyframes shimmerMove { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.how-demo-code { background: #0d1322; border-color: #263049; font-family: var(--mono); font-size: .82rem; }
.type-line {
  color: #dbeafe; white-space: nowrap; overflow: hidden; width: 0;
  animation: typeIn 3.4s steps(20) infinite;
}
@keyframes typeIn { 0% { width: 0; } 55%, 100% { width: 100%; } }
.caret {
  display: inline-block; width: 8px; height: 1em; background: var(--brand-2);
  vertical-align: text-bottom; animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.type-result { color: #34d399; opacity: 0; animation: resultPop 3.4s infinite; }
@keyframes resultPop { 0%, 60% { opacity: 0; transform: translateY(6px); } 72%, 100% { opacity: 1; transform: none; } }

.how-xp-track {
  height: 12px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 99px; overflow: hidden;
}
.how-xp-fill {
  height: 100%; border-radius: 99px; background: var(--brand-grad); width: 0;
  animation: xpFill 3s cubic-bezier(.16, 1, .3, 1) infinite;
}
@keyframes xpFill { 0% { width: 8%; } 55%, 88% { width: 76%; } 100% { width: 76%; } }
.how-badge {
  align-self: flex-start; font-weight: 800; font-size: .82rem; color: var(--brand-1);
  background: var(--tint-1); padding: .25rem .7rem; border-radius: 99px;
  animation: badgePop 3s cubic-bezier(.2, 1.6, .4, 1) infinite;
}
@keyframes badgePop { 0%, 50% { opacity: 0; transform: scale(.6); } 62%, 95% { opacity: 1; transform: scale(1); } 100% { opacity: 0; } }

/* project cards */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.25rem; }
.project-grid.home { margin-top: 2.25rem; }
.project-card {
  padding: 1.6rem; color: var(--text); display: flex; flex-direction: column; gap: .6rem;
  border-top: 3px solid var(--accent); position: relative;
}
.project-card:hover { box-shadow: var(--shadow-lg); text-decoration: none; }
.project-card.is-done { border-color: rgba(16, 185, 129, .5); }
.project-card-top { display: flex; justify-content: space-between; align-items: center; }
.project-icon {
  width: 48px; height: 48px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 14px;
}
.project-icon .ui-icon { width: 26px; height: 26px; }
.project-card h2, .project-card h3 { font-size: 1.15rem; }
.project-card p { color: var(--text-dim); font-size: .92rem; flex: 1; }
.project-go { font-weight: 800; color: var(--accent); font-size: .95rem; transition: transform .15s; display: inline-block; }
.project-card:hover .project-go { transform: translateX(5px); }

/* project detail */
.how-works-card { border-left: 4px solid var(--accent); margin-bottom: 1.5rem; }
.how-works-card h2 { font-size: 1.2rem; margin-bottom: .7rem; display: flex; align-items: center; gap: .5rem; }
.how-works-card h2 .ui-icon { color: var(--accent); }
.how-works-card p, .how-works-card li { color: var(--text-dim); }
.how-works-card ol { margin: .5rem 0 .8rem 1.4rem; }
.how-works-card li { margin-bottom: .45rem; }
.how-works-card strong { color: var(--text); }
.project-progress { padding: 1.2rem 1.5rem; margin-bottom: 1.75rem; position: sticky; top: 68px; z-index: 10; }

.steps { display: flex; flex-direction: column; gap: 1.5rem; }
.step-card { overflow: hidden; transition: opacity .3s, filter .3s, transform .3s; }
.step-card.locked { opacity: .45; filter: saturate(.4); pointer-events: none; user-select: none; }
.step-card.locked .step-body { display: none; }
.step-card.done { border-color: rgba(16, 185, 129, .45); }
.step-card.done .step-num { background: var(--success); color: #fff; }
.step-card.just-unlocked { animation: unlockPop .6s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes unlockPop { 0% { transform: scale(.97); box-shadow: 0 0 0 4px var(--tint-1); } 100% { transform: none; } }
.step-head { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.4rem; }
.step-head h3 { flex: 1; font-size: 1.08rem; }
.step-num {
  width: 34px; height: 34px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 50%;
  font-weight: 800; color: var(--accent);
}
.step-state {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--text-dim); background: var(--surface-2); border-radius: 9px;
}
.step-state .ui-icon { width: 18px; height: 18px; }
.editor-wrap { border-top: 1px solid var(--border); }
.editor-wrap .editor-chrome { border-radius: 0; }
.project-finish { text-align: center; margin-top: 2rem; animation: pop .5s cubic-bezier(.2, 1.6, .4, 1); }
.finish-icon {
  width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto .7rem;
  color: var(--brand-1); background: var(--tint-1); border-radius: 20px;
  animation: bounce 1s ease infinite alternate;
}
.finish-icon .ui-icon { width: 38px; height: 38px; }
.project-finish p { color: var(--text-dim); margin-top: .5rem; }

/* walkthrough player */
.walkthrough { overflow: hidden; }
.wl-body { display: grid; grid-template-columns: 1.1fr .9fr; }
.wl-code {
  margin: 0; background: #0d1322; padding: 1rem 0; overflow-x: auto;
  font-family: var(--mono); font-size: .88rem; line-height: 1.7; color: #dbeafe;
}
.wl-line { display: block; padding: .1rem 1.1rem .1rem .6rem; white-space: pre; border-left: 3px solid transparent; transition: background .3s, border-color .3s; }
.wl-ln { display: inline-block; width: 2em; color: #4b5b78; text-align: right; margin-right: .9em; user-select: none; }
.wl-line.active {
  background: rgba(99, 102, 241, .18); border-left-color: var(--brand-2);
}
.wl-line.active .wl-ln { color: var(--brand-2); }
.wl-explain { padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; }
#wlText { color: var(--text-dim); font-size: .97rem; min-height: 4.5em; }
#wlText.wl-fade { animation: wlFade .45s ease; }
@keyframes wlFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.wl-controls { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.wl-count { font-size: .82rem; font-weight: 700; color: var(--text-dim); margin-left: auto; }

@media (max-width: 900px) {
  .how-grid { grid-template-columns: 1fr; gap: 1.6rem; }
  .wl-body { grid-template-columns: 1fr; }
  .project-progress { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .stagger, .reveal { opacity: 1 !important; transform: none !important; }
  .type-line { width: 100% !important; }
  .type-result, .how-badge { opacity: 1 !important; }
  .how-xp-fill { width: 76% !important; }
}

/* ═══════════════════ v4: editorial navigation & conversion system ═ */
:root {
  --ink: #07152f;
  --ink-2: #0d2447;
  --cream: #fffaf0;
  --nav-line: rgba(15, 23, 42, .1);
  --nav-panel: rgba(255, 255, 255, .97);
}
[data-theme="dark"] {
  --ink: #07101f;
  --ink-2: #10213d;
  --cream: #f5ead6;
  --nav-line: rgba(226, 232, 240, .1);
  --nav-panel: rgba(16, 22, 38, .98);
}

.announce {
  position: relative; z-index: 52; background: var(--ink); color: var(--cream);
  border-bottom: 1px solid color-mix(in srgb, var(--cream) 12%, transparent);
}
.announce-inner {
  max-width: 1240px; min-height: 32px; margin: 0 auto; padding: .35rem 1.25rem;
  display: flex; justify-content: center; align-items: center; gap: 1.25rem;
  font-size: .75rem; letter-spacing: .01em;
}
.announce strong {
  color: var(--ink); background: var(--cream); padding: .1rem .42rem;
  margin-right: .35rem; border-radius: 99px; font-size: .65rem; text-transform: uppercase;
}
.announce a { color: #7dd3fc; font-weight: 800; }
.nav { border-bottom: 1px solid var(--nav-line); }
.nav-inner { max-width: 1240px; min-height: 66px; padding-block: .55rem; gap: 2rem; }
.brand { position: relative; flex-shrink: 0; }
.nav-links { align-items: center; gap: .15rem; }
.nav-links > a, .nav-menu-trigger {
  min-height: 40px; display: inline-flex; align-items: center; gap: .3rem;
  color: var(--text-dim); background: transparent; border: 0; border-radius: 10px;
  padding: .45rem .8rem; font: 700 .9rem var(--font); cursor: pointer;
}
.nav-links > a:hover, .nav-menu-trigger:hover,
.nav-links > a.active, .nav-menu-trigger.active {
  color: var(--text); background: var(--surface-2); text-decoration: none;
}
/* Target the chevron specifically: a bare `span` here also caught the
   label wrapper and rotated the whole word 180 degrees. */
.nav-menu-trigger[aria-expanded="true"] > span[aria-hidden] { transform: rotate(180deg); }
.nav-menu-trigger > span[aria-hidden] { transition: transform .18s; }
.nav-menu-wrap { position: relative; }
.mega-menu {
  position: absolute; top: calc(100% + 14px); left: -120px; width: min(720px, 82vw);
  display: grid; grid-template-columns: .8fr 1.2fr; padding: .75rem;
  color: var(--text); background: var(--nav-panel); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: 0 26px 70px rgba(7, 21, 47, .2);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
}
.mega-menu[hidden] { display: none; }
.mega-intro {
  padding: 1.35rem; border-radius: 14px; background:
    radial-gradient(circle at 90% 0%, var(--tint-2), transparent 48%),
    var(--surface-2);
}
.mega-intro h2 { font-size: 1.35rem; margin: .45rem 0; }
.mega-intro p { color: var(--text-dim); font-size: .85rem; line-height: 1.5; }
.mega-primary { display: inline-flex; margin-top: 1.2rem; color: var(--brand-1); font-weight: 800; font-size: .86rem; }
.mega-links { padding: .35rem; display: grid; grid-template-columns: 1fr 1fr; gap: .25rem; }
.mega-links a {
  display: flex; gap: .7rem; align-items: flex-start; padding: .9rem;
  border-radius: 12px; color: var(--text);
}
.mega-links a:hover { background: var(--surface-2); text-decoration: none; }
.mega-links a > span { color: var(--brand-2); font: 700 .68rem var(--mono); padding-top: .2rem; }
.mega-links strong, .mega-links small { display: block; }
.mega-links strong { font-size: .88rem; }
.mega-links small { color: var(--text-dim); font-size: .72rem; line-height: 1.35; margin-top: .2rem; }
.mobile-nav-cta { display: none; }
.nav-cta { padding-inline: 1rem; }
.nav-burger { width: 42px; height: 42px; border-radius: 10px; background: var(--surface-2); }

.hero { padding-top: 5.25rem; padding-bottom: 5rem; }
.hero-inner { max-width: 1240px; grid-template-columns: .88fr 1.12fr; gap: 2rem; }
.hero h1 { font-size: clamp(2.8rem, 5.1vw, 4.65rem); line-height: .98; letter-spacing: -.055em; }
.hero-sub { max-width: 590px; }
.hero-visual { position: relative; min-height: 610px; }
.hero-visual > img {
  width: 100%; height: 100%; min-height: 570px; object-fit: cover; object-position: 50% center;
  border-radius: 28px; box-shadow: 0 35px 80px rgba(7, 21, 47, .22);
  border: 1px solid color-mix(in srgb, var(--cream) 36%, transparent);
}
.hero-visual::after {
  content: ''; position: absolute; inset: 10px; border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 21px; pointer-events: none;
}
.visual-label {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: .45rem;
  padding: .45rem .7rem; color: var(--cream); background: rgba(7, 21, 47, .82);
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 99px;
  backdrop-filter: blur(12px); font-size: .72rem; font-weight: 800;
}
.visual-label span { width: 7px; height: 7px; border-radius: 50%; background: var(--success); }
.label-one { top: 1.3rem; left: 1.3rem; }
.label-two { top: 1.3rem; right: 1.3rem; }
.hero-console {
  position: absolute; z-index: 4; width: min(410px, 86%); left: -1.4rem; bottom: -1.7rem;
  animation: none; border: 1px solid rgba(255, 255, 255, .16); box-shadow: 0 30px 70px rgba(4, 10, 22, .4);
}
.hero-console .code-input { min-height: 76px; font-size: .72rem; line-height: 1.5; padding-block: .55rem; }
.hero-console .editor-bar { padding-block: .45rem; }
.hero-console .code-output { min-height: 2.1rem; max-height: 90px; padding-block: .55rem; font-size: .7rem; }
.hero-console .editor-chrome { padding-block: .5rem; }
.hero-console .editor-title { font-size: .7rem; }
.hero-console .hero-scenarios { padding: .4rem .6rem; gap: .28rem; }
.hero-console .scenario-chip { padding: .16rem .45rem; font-size: .6rem; }

.section-kicker {
  display: flex; align-items: center; gap: .6rem; margin-bottom: 1.25rem;
  color: var(--text-dim); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
}
.section-kicker span { color: var(--brand-2); font-family: var(--mono); }
.section-kicker::after { content: ''; width: 70px; height: 1px; background: var(--border); }
.path-feature {
  display: grid; grid-template-columns: 1.12fr .88fr; min-height: 430px; overflow: hidden;
  margin-bottom: 2rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 26px; box-shadow: var(--shadow-lg);
}
.path-feature > img { width: 100%; height: 100%; object-fit: contain; background: #010d2c; }
.path-feature-copy { padding: clamp(2rem, 5vw, 4rem); display: flex; flex-direction: column; justify-content: center; }
.path-feature-copy h2, .project-showcase h2 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .55rem 0 1rem; }
.path-feature-copy p, .project-showcase p { color: var(--text-dim); }
.path-checks { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: 1.4rem 0; color: var(--text); font-size: .84rem; font-weight: 700; }
.path-checks span::first-letter { color: var(--success); }
.text-cta { align-self: flex-start; color: var(--text); font-weight: 800; border-bottom: 1px solid var(--text); }
.text-cta:hover { color: var(--brand-1); text-decoration: none; border-color: var(--brand-1); }
.text-cta span { display: inline-block; transition: transform .15s; }
.text-cta:hover span { transform: translateX(4px); }
.project-showcase {
  display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; overflow: hidden;
  background: var(--ink); color: var(--cream); border-radius: 26px; margin-bottom: 2rem;
  box-shadow: 0 28px 70px rgba(7, 21, 47, .22);
}
.project-showcase > img { width: 100%; height: 100%; min-height: 420px; object-fit: contain; background: #010d2c; }
.project-showcase > div { padding: clamp(2rem, 5vw, 4rem); }
.project-showcase p { color: color-mix(in srgb, var(--cream) 70%, transparent); margin-bottom: 1.5rem; }
.cta-band {
  max-width: 1160px; margin: 4rem auto; padding: clamp(3rem, 7vw, 6rem) 1.25rem;
  border-radius: 28px; color: var(--cream); background:
    radial-gradient(circle at 10% 20%, rgba(6, 182, 212, .28), transparent 26%),
    radial-gradient(circle at 90% 80%, rgba(99, 102, 241, .3), transparent 28%),
    var(--ink);
}
.cta-band h2 { max-width: 700px; margin: .5rem auto .75rem; font-size: clamp(2rem, 5vw, 3.5rem); }
.cta-band > p { color: color-mix(in srgb, var(--cream) 72%, transparent); margin-bottom: 1.5rem; }
.cta-band .eyebrow { color: #7dd3fc; }
.cta-note { display: block; margin-top: 1rem; color: color-mix(in srgb, var(--cream) 65%, transparent); font-size: .78rem; }
.cta-note a { color: var(--cream); text-decoration: underline; }

.directory-hero {
  max-width: 1240px; min-height: 460px; margin: 2.5rem auto 0; overflow: hidden;
  display: grid; grid-template-columns: .9fr 1.1fr; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: 28px;
  box-shadow: var(--shadow-lg);
}
.directory-copy { padding: clamp(2rem, 5vw, 4.5rem); display: flex; flex-direction: column; justify-content: center; }
.directory-copy h1 { font-size: clamp(2.4rem, 4.8vw, 4.2rem); line-height: 1; margin: .65rem 0 1.1rem; }
.directory-copy > p { max-width: 560px; color: var(--text-dim); font-size: 1.02rem; }
.directory-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.75rem; }
.directory-hero > img, .arena-visual > img { width: 100%; height: 100%; object-fit: cover; }
.directory-dark { background: var(--ink); color: var(--cream); border-color: var(--ink-2); }
.directory-dark .directory-copy > p { color: color-mix(in srgb, var(--cream) 70%, transparent); }
.directory-dark > img { object-position: 62% center; }
.directory-dark .eyebrow { color: #7dd3fc; }
.btn-dark-ghost { color: var(--cream); border-color: rgba(255, 255, 255, .25); background: rgba(255, 255, 255, .06); }
.btn-dark-ghost:hover { background: rgba(255, 255, 255, .12); }
.arena-hero { grid-template-columns: 1fr 1fr; }
.arena-visual { position: relative; min-height: 460px; overflow: hidden; }
.arena-visual img { object-position: 73% center; }
.arena-score {
  position: absolute; left: 1.25rem; bottom: 1.25rem; min-width: 112px; padding: .8rem 1rem;
  background: rgba(7, 21, 47, .86); color: var(--cream); border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; backdrop-filter: blur(12px);
}
.arena-score.second { left: 9rem; }
.arena-score strong, .arena-score span { display: block; }
.arena-score strong { font-family: var(--display); font-size: 1.6rem; }
.arena-score span { font-size: .7rem; color: color-mix(in srgb, var(--cream) 70%, transparent); text-transform: uppercase; }
.catalog-head {
  display: flex; justify-content: space-between; align-items: end; gap: 2rem; margin-bottom: 1.5rem;
}
.catalog-head h2 { font-size: clamp(1.7rem, 3vw, 2.35rem); margin-top: .3rem; }
.catalog-head > p { max-width: 480px; color: var(--text-dim); }

.global-cta {
  max-width: 1160px; margin: 5rem auto 0; padding: clamp(2rem, 5vw, 3.5rem);
  display: flex; justify-content: space-between; align-items: center; gap: 2rem;
  border: 1px solid var(--border); border-radius: 24px; background:
    radial-gradient(circle at 8% 0%, var(--tint-2), transparent 35%), var(--surface);
  box-shadow: var(--shadow);
}
.global-cta h2 { font-size: clamp(1.7rem, 3.5vw, 2.7rem); margin: .35rem 0; }
.global-cta p { color: var(--text-dim); }
.global-cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; flex-shrink: 0; }
.footer { margin-top: 2rem; }

@media (max-width: 1024px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-visual { min-height: 590px; }
  .path-feature, .project-showcase { grid-template-columns: 1fr; }
  .path-feature > img, .project-showcase > img { max-height: 460px; }
  .directory-hero { margin-inline: 1rem; grid-template-columns: 1fr; }
  .directory-hero > img, .arena-visual { max-height: 430px; }
}

@media (max-width: 760px) {
  .announce-inner { justify-content: flex-start; overflow-x: auto; white-space: nowrap; }
  .announce-inner a { display: none; }
    .nav-inner { gap: .6rem; }
  .nav-right { margin-left: auto; }
  .nav-right > .btn { display: none; }
  .nav-links {
    position: absolute; display: none; top: 100%; left: 0; right: 0; bottom: auto;
    width: 100%; padding: 1.1rem;
    background: var(--surface); overflow-y: auto; box-shadow: none; z-index: 55;
  }
  .nav-links.open { display: flex; }
  .nav-links > a, .nav-menu-wrap, .nav-menu-trigger { width: 100%; }
  .nav-links > a, .nav-menu-trigger { justify-content: space-between; min-height: 52px; font-size: 1rem; padding-inline: 1rem; }
  .mega-menu {
    position: static; width: 100%; grid-template-columns: 1fr; margin: .35rem 0;
    box-shadow: none; border-radius: 14px;
  }
  .mega-intro { display: none; }
  .mega-links { grid-template-columns: 1fr; }
  .mobile-nav-cta { display: block; margin-top: auto; padding-top: 1rem; }
  .mobile-nav-cta .btn { width: 100%; min-height: 52px; color: var(--cream); }
  /* Deliberately no `overflow: hidden` here. The drawer is content-sized,
     so locking the body freezes the page visible beneath it and the menu
     appears to break scrolling. It stays anchored under the sticky header
     instead, like any dropdown. */
  .hero { padding: 3rem .85rem 2rem; }
  .hero h1 { font-size: clamp(2.55rem, 13vw, 4rem); }
  .hero-sub br { display: none; }
  .hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
  .hero-stats div { min-width: 0; padding-right: .4rem; margin-right: 0; border-right: 0; }
  .hero-stats strong { font-size: 1.4rem; }
  .hero-stats span { font-size: .7rem; line-height: 1.25; }
  .hero-visual { min-height: auto; padding-bottom: 0; }
  .hero-visual > img { min-height: 350px; height: 350px; object-position: 61% center; border-radius: 20px; }
  .visual-label { display: none; }
  .hero-console { position: relative; width: calc(100% - 1rem); left: .5rem; bottom: 2rem; }
  .path-feature, .project-showcase { border-radius: 20px; }
  .path-feature > img, .project-showcase > img { min-height: 270px; max-height: 300px; }
  .path-feature-copy, .project-showcase > div { padding: 1.5rem; }
  .path-feature-copy h2, .project-showcase h2 { font-size: 2rem; }
  .directory-hero { min-height: 0; margin: 1rem .75rem 0; border-radius: 20px; }
  .directory-copy { padding: 2rem 1.25rem; }
  .directory-copy h1 { font-size: clamp(2.35rem, 12vw, 3.5rem); }
  .directory-actions { flex-direction: column; }
  .directory-actions .btn { width: 100%; }
  .directory-hero > img, .arena-visual { min-height: 270px; height: 300px; }
  .catalog-head { align-items: flex-start; flex-direction: column; gap: .5rem; }
  .global-cta { margin: 3rem .75rem 0; flex-direction: column; align-items: flex-start; }
  .global-cta-actions, .global-cta-actions .btn { width: 100%; }
  .cta-band { margin: 2rem .75rem; border-radius: 20px; }
}

/* ═══════════════════ v5: browser IDE playground ═══════════════════ */
.playground-hero {
  max-width: 1380px; margin: 0 auto; padding: clamp(3rem, 7vw, 6rem) 1.25rem 2.5rem;
  display: flex; justify-content: space-between; align-items: end; gap: 3rem;
}
.playground-hero > div:first-child { max-width: 760px; }
.playground-hero h1 {
  font-size: clamp(3rem, 7vw, 5.8rem); line-height: .94; letter-spacing: -.06em;
  margin: .6rem 0 1rem;
}
.playground-hero p { max-width: 680px; color: var(--text-dim); font-size: 1.05rem; }
.playground-proof {
  display: flex; flex-direction: column; gap: .55rem; min-width: 230px;
  padding: 1rem 1.15rem; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: var(--shadow);
}
.playground-proof span { color: var(--text-dim); font-size: .78rem; font-weight: 700; display: flex; align-items: center; gap: .4rem; }
.playground-proof .ui-icon { color: var(--brand-1); }
.status-light {
  display: inline-block; width: 8px; height: 8px; margin-right: .35rem;
  border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px color-mix(in srgb, var(--success) 14%, transparent);
}
.playground-section { max-width: 1460px; margin: 0 auto; padding: 0 1.25rem 4rem; }
.playground-layout { display: grid; grid-template-columns: 255px minmax(0, 1fr); gap: 1rem; align-items: stretch; }

.lab-sidebar {
  padding: .85rem; box-shadow: none; display: flex; flex-direction: column;
  background: color-mix(in srgb, var(--surface) 92%, var(--bg-soft));
}
.lab-sidebar-head { padding: .75rem .65rem 1rem; }
.lab-sidebar-head h2 { font-size: 1.15rem; margin: .25rem 0 .35rem; }
.lab-sidebar-head p { color: var(--text-dim); font-size: .8rem; line-height: 1.4; }
.recipe-list { display: flex; flex-direction: column; gap: .35rem; }
.lab-recipe {
  width: 100%; min-height: 68px; display: grid; grid-template-columns: 34px 1fr auto;
  align-items: center; gap: .55rem; padding: .65rem;
  color: var(--text); background: transparent; border: 1px solid transparent;
  border-radius: 12px; text-align: left; font-family: var(--font); cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.lab-recipe:hover { background: var(--surface); border-color: var(--border); transform: translateX(2px); }
.lab-recipe.active { background: var(--surface); border-color: color-mix(in srgb, var(--brand-2) 45%, var(--border)); box-shadow: var(--shadow); }
.lab-recipe > span {
  width: 32px; height: 32px; display: grid; place-items: center;
  color: var(--brand-1); background: var(--tint-1); border-radius: 9px;
}
.lab-recipe > span .ui-icon { width: 18px; height: 18px; }
.lab-recipe strong, .lab-recipe small { display: block; }
.lab-recipe strong { font-size: .82rem; }
.lab-recipe small { color: var(--text-dim); font-size: .68rem; margin-top: .15rem; }
.lab-recipe b { color: var(--text-dim); transition: transform .15s; }
.lab-recipe:hover b { transform: translateX(3px); }
.shortcut-card {
  margin-top: auto; padding: 1rem .7rem .5rem; display: flex; flex-direction: column; gap: .55rem;
  color: var(--text-dim); font-size: .7rem; border-top: 1px solid var(--border);
}
.shortcut-card strong { color: var(--text); font-size: .75rem; }
kbd {
  display: inline-flex; min-width: 24px; min-height: 22px; align-items: center; justify-content: center;
  padding: .1rem .35rem; margin-right: .2rem; border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; background: var(--surface-2);
  color: var(--text-dim); font: 700 .65rem var(--mono);
}

.playground-ide {
  --pg-font-size: 15px; min-width: 0; overflow: hidden;
  background: #0a1020; border: 1px solid #25304a; border-radius: 18px;
  box-shadow: 0 28px 75px rgba(7, 21, 47, .22);
}
.ide-topbar {
  min-height: 58px; display: flex; align-items: center; gap: 1rem; padding: .55rem .8rem;
  background: #141c2e; border-bottom: 1px solid #293550;
}
.file-tab {
  min-width: 0; display: flex; align-items: center; gap: .55rem; padding: .35rem .55rem;
  background: #0d1424; border: 1px solid #293550; border-radius: 9px;
}
.python-file-icon {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 7px;
  color: #06101f; background: #7dd3fc; font: 900 .65rem var(--mono);
}
.file-tab input {
  width: 150px; min-width: 0; color: #dbeafe; background: transparent; border: 0;
  outline: 0; font: 600 .78rem var(--mono);
}
.file-dirty { color: #34d399; font-size: .65rem; }
.ide-runtime {
  display: flex; align-items: center; gap: .45rem; margin-left: auto;
  color: #8ea0bd; font-size: .72rem; font-weight: 700;
}
.runtime-dot { width: 7px; height: 7px; border-radius: 50%; background: #64748b; }
.ide-runtime.loading .runtime-dot { background: #fbbf24; animation: pulse 1s infinite; }
.ide-runtime.ready .runtime-dot { background: #34d399; }
.ide-runtime.failed .runtime-dot { background: #fb7185; }
.ide-file-actions { display: flex; gap: .35rem; }
.ide-tool {
  min-height: 34px; display: inline-flex; align-items: center; padding: .35rem .6rem;
  color: #a9b8d0; background: #1c2740; border: 1px solid #2d3a57; border-radius: 8px;
  font: 700 .7rem var(--font); cursor: pointer;
}
.ide-tool:hover { color: #fff; background: #26334f; }

.ide-workspace { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr); min-height: 590px; }
.ide-panel { min-width: 0; display: flex; flex-direction: column; background: #0c1322; }
.editor-panel { border-right: 1px solid #293550; }
.ide-panel-head {
  min-height: 42px; display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .8rem; color: #8ea0bd; background: #11192a;
  border-bottom: 1px solid #252f48; font-size: .7rem;
}
.ide-panel-head > div { display: flex; align-items: center; gap: .45rem; }
.ide-panel-head strong { color: #cbd5e1; font-size: .72rem; }
.panel-indicator { width: 7px; height: 7px; border-radius: 50%; }
.panel-indicator.cyan { background: #22d3ee; }
.panel-indicator.mint { background: #34d399; }
.editor-surface { min-height: 0; flex: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr); overflow: hidden; }
.line-numbers {
  height: 100%; margin: 0; padding: 1.05rem .7rem;
  overflow: hidden; color: #4e607e; background: #0a1020; border-right: 1px solid #202a41;
  text-align: right; user-select: none; font: 400 var(--pg-font-size)/1.65 var(--mono);
}
.code-input.playground-code {
  height: 100%; min-height: 540px; resize: none; padding: 1rem 1.15rem;
  overflow: auto; border: 0; border-radius: 0; background: #0c1322;
  color: #e2e8f0; caret-color: #67e8f9; font-size: var(--pg-font-size); line-height: 1.65;
  white-space: pre; tab-size: 4;
}
.code-input.playground-code:focus { box-shadow: inset 0 0 0 1px rgba(34, 211, 238, .32); }
.console-tools { display: flex; gap: .25rem; }
.console-tools button {
  padding: .25rem .45rem; color: #8ea0bd; background: transparent;
  border: 0; border-radius: 5px; font: 700 .66rem var(--font); cursor: pointer;
}
.console-tools button:hover { color: #e2e8f0; background: #202a41; }
.code-output.playground-output {
  flex: 1; min-height: 0; max-height: none; margin: 0; padding: 1.1rem;
  border-radius: 0; background: #080d18; color: #a7f3d0;
  font-size: calc(var(--pg-font-size) - 1px); line-height: 1.62;
}
.console-prompt { color: #22d3ee; }
.console-status {
  min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .6rem .8rem; color: #70819e; background: #0b1120; border-top: 1px solid #202a41;
  font-size: .67rem;
}
#pgRunStatus { color: #a9b8d0; font-weight: 700; }
.ide-actionbar {
  min-height: 64px; display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem;
  background: #141c2e; border-top: 1px solid #293550;
}
.pg-run { min-height: 42px; padding-inline: 1rem; }
.pg-run kbd { margin-left: .35rem; color: rgba(255,255,255,.8); background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); }
.ide-action {
  min-height: 38px; display: inline-flex; align-items: center; justify-content: center;
  padding: .4rem .65rem; color: #b6c4d8; background: #1c2740;
  border: 1px solid #2d3a57; border-radius: 9px; font: 700 .72rem var(--font); cursor: pointer;
}
.ide-action:hover, .ide-action.active { color: #fff; background: #26334f; border-color: #3b82f6; }
.ide-action.compact { min-width: 36px; padding-inline: .4rem; }
.ide-view-tools { display: flex; gap: .35rem; margin-left: auto; }
.ide-actionbar .save-state { color: #8ea0bd; margin-left: .35rem; }

.playground-lower { display: grid; grid-template-columns: 1.25fr .75fr; gap: 1rem; margin-top: 1rem; }
.run-history, .lab-guide { padding: 1.35rem; box-shadow: none; }
.lower-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.lower-head h2, .lab-guide h2 { font-size: 1.2rem; margin-top: .2rem; }
.text-button {
  color: var(--text-dim); background: transparent; border: 0;
  font: 700 .75rem var(--font); cursor: pointer;
}
.text-button:hover { color: var(--danger); }
.history-list { display: flex; flex-direction: column; gap: .4rem; }
.history-empty { color: var(--text-dim); font-size: .82rem; padding: .8rem 0; }
.history-item {
  display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: .7rem;
  padding: .65rem .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px;
}
.history-state {
  width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px;
  color: var(--success); background: color-mix(in srgb, var(--success) 12%, transparent); font-weight: 900;
}
.history-item.failed .history-state { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.history-item strong, .history-item small { display: block; }
.history-item strong { font: 700 .75rem var(--mono); }
.history-item small { color: var(--text-dim); font-size: .67rem; margin-top: .1rem; }
.history-item button {
  color: var(--brand-1); background: transparent; border: 0; font: 800 .7rem var(--font); cursor: pointer;
}
.lab-guide { background: radial-gradient(circle at 100% 0%, var(--tint-2), transparent 40%), var(--surface); }
.lab-guide h2 { margin: .35rem 0 .8rem; }
.lab-guide ul { margin: 0 0 1rem 1.1rem; color: var(--text-dim); font-size: .8rem; }
.lab-guide li { margin-bottom: .55rem; }
.lab-guide strong { color: var(--text); }

@media (max-width: 1100px) {
  .playground-layout { grid-template-columns: 1fr; }
  .lab-sidebar { display: block; }
  .lab-sidebar-head { padding-bottom: .7rem; }
  .recipe-list { display: grid; grid-template-columns: repeat(5, minmax(170px, 1fr)); overflow-x: auto; padding-bottom: .35rem; }
  .lab-recipe { min-width: 180px; }
  .shortcut-card { display: none; }
  .ide-workspace { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .playground-hero { padding: 2.5rem .85rem 1.5rem; flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .playground-hero h1 { font-size: clamp(3.2rem, 18vw, 4.8rem); }
  .playground-proof { width: 100%; display: grid; grid-template-columns: 1fr 1fr; }
  .playground-section { padding-inline: .65rem; }
  .lab-sidebar { border-radius: 14px; padding: .65rem; }
  .recipe-list { grid-template-columns: repeat(5, 175px); }
  .playground-ide { border-radius: 14px; }
  .ide-topbar { flex-wrap: wrap; }
  .file-tab { flex: 1; }
  .file-tab input { width: 120px; }
  .ide-runtime { order: 3; width: 100%; margin: 0; padding: .15rem .3rem; }
  .ide-file-actions { margin-left: auto; }
  .ide-workspace { grid-template-columns: 1fr; min-height: 0; }
  .editor-panel { border-right: 0; border-bottom: 1px solid #293550; }
  .code-input.playground-code { min-height: 430px; font-size: var(--pg-font-size); }
  .console-panel { min-height: 260px; }
  .code-output.playground-output { min-height: 210px; }
  .console-status { align-items: flex-start; flex-direction: column; gap: .15rem; }
  .ide-actionbar { display: grid; grid-template-columns: 1fr 1fr; }
  .pg-run { grid-column: 1 / -1; width: 100%; }
  .ide-view-tools { margin: 0; grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; }
  .ide-actionbar .save-state { margin: 0; justify-self: end; }
  .playground-lower { grid-template-columns: 1fr; }
  .run-history, .lab-guide { padding: 1rem; }
}

/* Playground density correction: keep the full workbench in view. */
.playground-hero {
  max-width: 1280px; padding: 2.25rem 1.25rem 1.25rem;
  align-items: center; gap: 2rem;
}
.playground-hero > div:first-child { max-width: 720px; }
.playground-hero h1 {
  font-size: clamp(2.6rem, 4.8vw, 4.1rem); line-height: 1;
  margin: .35rem 0 .55rem; letter-spacing: -.045em;
}
.playground-hero p { max-width: 620px; font-size: .95rem; }
.playground-proof {
  min-width: 0; display: grid; grid-template-columns: repeat(3, auto);
  gap: .45rem 1rem; padding: .75rem 1rem;
}
.playground-proof span { white-space: nowrap; }
.playground-section { max-width: 1280px; padding-inline: 1.25rem; }
.playground-layout { grid-template-columns: 220px minmax(0, 1fr); gap: .8rem; }
.lab-sidebar { min-height: 0; max-height: 600px; padding: .65rem; overflow-y: auto; }
.lab-sidebar-head { padding: .55rem .5rem .65rem; }
.lab-sidebar-head h2 { font-size: 1rem; margin-block: .15rem; }
.lab-sidebar-head p { font-size: .72rem; }
.recipe-list { gap: .2rem; }
.lab-recipe {
  min-height: 56px; grid-template-columns: 30px 1fr auto; gap: .4rem;
  padding: .45rem .5rem; border-radius: 10px;
}
.lab-recipe > span { font-size: 1rem; }
.lab-recipe strong { font-size: .75rem; }
.lab-recipe small { font-size: .62rem; }
.shortcut-card { padding-top: .7rem; gap: .35rem; }

.playground-ide {
  height: clamp(500px, calc(100dvh - 300px), 600px); min-height: 0;
  display: flex; flex-direction: column; border-radius: 15px;
}
.ide-topbar { min-height: 50px; flex: 0 0 50px; padding-block: .4rem; }
.ide-workspace {
  flex: 1 1 auto; min-height: 0; height: auto;
  grid-template-columns: minmax(0, 3fr) minmax(280px, 2fr);
}
.ide-panel { min-height: 0; overflow: hidden; }
.ide-panel-head { min-height: 36px; flex: 0 0 36px; padding-block: .4rem; }
.editor-surface { min-height: 0; height: 100%; }
.line-numbers { min-height: 0; }
.code-input.playground-code {
  min-height: 0; height: 100%; padding: .85rem 1rem;
  font-size: min(var(--pg-font-size), 15px); line-height: 1.58;
}
.code-input.playground-code.wrap-enabled {
  white-space: pre-wrap; overflow-wrap: anywhere; word-break: normal;
}
.line-numbers { padding-top: .9rem; line-height: 1.58; }
.code-output.playground-output { padding: .9rem 1rem; line-height: 1.55; overflow: auto; }
.console-status { min-height: 38px; flex: 0 0 38px; }
.ide-actionbar { min-height: 56px; flex: 0 0 56px; padding-block: .45rem; }
.pg-run { min-height: 38px; }
.ide-action { min-height: 36px; }
.playground-lower { margin-top: .8rem; }
.run-history, .lab-guide { padding: 1.1rem; }

@media (max-width: 1100px) {
  .playground-hero { align-items: flex-start; flex-direction: column; gap: .8rem; }
  .playground-proof { width: 100%; }
  .playground-layout { grid-template-columns: 1fr; }
  .lab-sidebar { display: block; max-height: none; overflow: visible; }
  .recipe-list {
    display: grid; grid-template-columns: repeat(5, minmax(155px, 1fr));
    overflow-x: auto; padding-bottom: .25rem; scroll-snap-type: x proximity;
  }
  .lab-recipe { min-width: 160px; scroll-snap-align: start; }
  .shortcut-card { display: none; }
  .playground-ide { height: clamp(500px, calc(100dvh - 390px), 600px); }
  .ide-workspace { grid-template-columns: minmax(0, 3fr) minmax(270px, 2fr); }
}

@media (max-width: 760px) {
  .playground-hero { padding: 1.6rem .85rem 1rem; gap: .8rem; }
  .playground-hero h1 { font-size: clamp(2.5rem, 13vw, 3.5rem); }
  .playground-hero p { font-size: .86rem; }
  .playground-proof {
    display: flex; width: 100%; overflow-x: auto; gap: .45rem; padding: .55rem;
  }
  .playground-proof span {
    flex: 0 0 auto; padding: .35rem .5rem; background: var(--surface-2); border-radius: 8px;
    font-size: .67rem;
  }
  .playground-section { width: 100%; max-width: 100%; padding-inline: .55rem; overflow: hidden; }
  .playground-layout { width: 100%; max-width: 100%; min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .lab-sidebar, .playground-ide { width: 100%; max-width: 100%; min-width: 0; }
  .lab-sidebar-head { padding-bottom: .45rem; }
  .recipe-list { width: 100%; max-width: 100%; min-width: 0; grid-template-columns: repeat(5, 155px); }
  .lab-recipe { min-width: 155px; }
  .playground-ide { height: auto; min-height: 0; }
  .ide-topbar { min-height: 0; flex: none; }
  .ide-workspace { display: grid; grid-template-columns: 1fr; }
  .editor-panel { min-height: 360px; }
  .code-input.playground-code { min-height: 320px; }
  .console-panel { min-height: 210px; }
  .code-output.playground-output { min-height: 160px; }
  .ide-actionbar { min-height: 0; flex: none; }
}

/* ═══════════════════ v6: unified product typography & page system ═ */
:root {
  --radius: 14px;
  --content-wide: 1240px;
  --content-reading: 900px;
}
html { font-size: 16px; }
body {
  font-family: var(--font); font-weight: 400; line-height: 1.62;
  letter-spacing: -.006em; text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4 {
  font-family: var(--display); font-weight: 800; line-height: 1.12;
  letter-spacing: -.038em; text-wrap: balance;
}
p { text-wrap: pretty; }
.brand, .btn, .nav-links, .nav-menu-trigger, input, textarea, button { letter-spacing: -.012em; }
.brand-name { letter-spacing: -.04em; }
.eyebrow { font-size: .68rem; letter-spacing: .11em; }
.muted { line-height: 1.5; }

.btn { min-height: 42px; font-weight: 750; border-radius: 10px; }
.btn-sm { min-height: 36px; }
.btn-lg { min-height: 50px; font-size: .96rem; }
.card { border-radius: var(--radius); }
.section { max-width: var(--content-wide); padding: 3.5rem 1.25rem; }
.section.narrow { max-width: var(--content-reading); }
.section-title { font-size: clamp(1.75rem, 3vw, 2.4rem); }
.section-title.left {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); margin: 3rem 0 1rem;
  padding-bottom: .65rem; border-bottom: 1px solid var(--border);
}
.section-sub { font-size: .96rem; line-height: 1.7; }

.page-head {
  max-width: 1180px; margin: 2rem auto 0; padding: clamp(1.7rem, 4vw, 2.7rem);
  background: radial-gradient(circle at 95% 0%, var(--tint-2), transparent 34%), var(--surface);
  border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow);
}
.page-head h1 { max-width: 900px; font-size: clamp(2rem, 4.2vw, 3.35rem); margin: .35rem 0 .65rem; }
.page-head > p { max-width: 780px; font-size: .96rem; line-height: 1.7; }
.course-head, .project-head { border-top: 4px solid var(--accent); }
.course-head-row { gap: 1.25rem; align-items: center; }
.course-head-row > div { min-width: 0; }
.course-icon.xl {
  width: 72px; height: 72px; display: grid; place-items: center; flex: 0 0 72px;
  border-radius: 18px; background: var(--surface-2); font-size: 2.4rem;
}
.challenge-head .course-row-top { justify-content: space-between; }
.review-head, .dashboard-head, .about-head { overflow: hidden; }

.directory-hero {
  max-width: 1200px; min-height: 420px; border-radius: 22px;
}
.directory-copy { padding: clamp(2rem, 4.5vw, 4rem); }
.directory-copy h1 { font-size: clamp(2.35rem, 4.5vw, 4rem); letter-spacing: -.048em; }
.catalog-head h2 { letter-spacing: -.035em; }
.course-row { border-left-width: 3px; border-radius: 12px; }
.course-row h2 { font-size: 1.15rem; }
.course-row-body p { max-width: 850px; line-height: 1.6; }
.course-row-go {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--border); border-radius: 10px;
}
.course-card, .project-card, .feature, .challenge-card, .dash-course {
  border-radius: 14px; box-shadow: 0 6px 24px rgba(15, 23, 42, .06);
}
[data-theme="dark"] .course-card,
[data-theme="dark"] .project-card,
[data-theme="dark"] .feature,
[data-theme="dark"] .challenge-card,
[data-theme="dark"] .dash-course { box-shadow: var(--shadow); }
.course-card h3, .project-card h3, .project-card h2 { letter-spacing: -.025em; }
.challenge-card { min-height: 150px; justify-content: space-between; padding: 1.25rem; }
.challenge-card h3 { font-size: 1rem; }

.lesson-layout { max-width: 1280px; grid-template-columns: 240px minmax(0, 1fr); gap: 1.5rem; }
.lesson-side { top: 82px; padding: 1rem; border-radius: 14px; }
.lesson-main { gap: 1.35rem; }
.lesson-header {
  padding: 1.35rem 1.5rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px;
}
.lesson-header h1 { font-size: clamp(1.8rem, 3.2vw, 2.5rem); }
.lesson-content {
  padding: clamp(1.2rem, 3vw, 2rem); background: var(--surface);
  border: 1px solid var(--border); border-radius: 14px; line-height: 1.75;
}
.lesson-content p, .lesson-content ul { max-width: 780px; }
.block-title { font-size: 1.05rem; letter-spacing: -.02em; }
.editor-block { border-radius: 14px; }
.editor-heading { padding-top: .85rem; }
.callout { border-radius: 12px; box-shadow: none; }
.quiz-q legend { line-height: 1.45; }
.lesson-footer { padding-block: .5rem; }

.project-head + .section, .challenge-head + .section { padding-top: 1.5rem; }
.how-works-card { border-radius: 14px; }
.project-progress { top: 76px; border-radius: 12px; }
.step-card { border-radius: 14px; }
.step-head h3 { letter-spacing: -.02em; }

.stat-grid { grid-template-columns: repeat(5, 1fr); gap: .8rem; }
.stat { min-height: 108px; padding: 1.1rem; display: grid; place-content: center; }
.stat strong { font-size: 1.45rem; letter-spacing: -.03em; }
.level-card { border-radius: 14px; }
.dash-course { min-height: 145px; display: flex; flex-direction: column; justify-content: space-between; }
.achieve-grid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); }
.achieve-tile { min-height: 145px; justify-content: center; border-radius: 12px; }
.leaderboard { border-radius: 14px; }

.review-head + .section { padding-top: 1.5rem; }
.review-stats { gap: 0; padding: 0; overflow: hidden; border-radius: 14px; }
.review-stats > div { padding: 1.1rem; border-right: 1px solid var(--border); }
.review-stats > div:last-child { border-right: 0; }
.flashcard {
  min-height: 300px; border-radius: 18px; border-top: 4px solid var(--brand-2);
  background: radial-gradient(circle at 50% 0%, var(--tint-2), transparent 44%), var(--surface);
}
#cardQuestion { font-size: clamp(1.15rem, 2.5vw, 1.45rem); line-height: 1.5; }
.flash-answer { font-size: 1.25rem; }
.review-actions { width: 100%; display: grid; grid-template-columns: repeat(4, 1fr); }
.review-actions .btn { min-height: 64px; min-width: 0; }

.auth-wrap {
  max-width: 1040px; min-height: calc(100vh - 260px); margin: 0 auto; padding: 3rem 1.25rem;
  display: grid; grid-template-columns: 1fr minmax(380px, .78fr); align-items: stretch; gap: 1rem;
}
.auth-context {
  display: flex; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 4rem);
  color: var(--cream); background:
    radial-gradient(circle at 10% 10%, rgba(6, 182, 212, .3), transparent 34%),
    radial-gradient(circle at 90% 90%, rgba(99, 102, 241, .25), transparent 35%),
    var(--ink);
  border-radius: 18px;
}
.auth-context .eyebrow { color: #7dd3fc; }
.auth-context h1 { font-size: clamp(2.2rem, 5vw, 3.7rem); margin: .55rem 0 1rem; }
.auth-context p { max-width: 520px; color: color-mix(in srgb, var(--cream) 72%, transparent); }
.auth-proof { display: flex; flex-direction: column; gap: .55rem; margin-top: 1.5rem; font-size: .8rem; font-weight: 700; }
.auth-card {
  max-width: none; padding: clamp(1.6rem, 4vw, 2.5rem); justify-content: center;
  border-radius: 18px; box-shadow: var(--shadow-lg);
}
.auth-card h1 { font-size: 2rem; margin-top: -.2rem; }
.auth-card label { font-size: .8rem; font-weight: 700; }
.auth-card input {
  min-height: 48px; border-radius: 9px; padding-inline: .85rem;
  font-size: .92rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.auth-card input:focus {
  outline: none; border-color: var(--brand-1);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-1) 16%, transparent);
  background: var(--surface);
}
.auth-card > .btn { width: 100%; margin-top: .25rem; }
.error-wrap { display: flex; min-height: calc(100vh - 260px); }
.error-wrap .auth-card { max-width: 620px; margin: auto; }
.error-wrap .code-output { width: 100%; text-align: left; }

.prose .card { padding: clamp(1.5rem, 4vw, 2.75rem); }
.prose h2 { font-size: 1.35rem; margin-top: 2rem; padding-top: .25rem; }
.prose p, .prose li { line-height: 1.75; }
.footer-inner { max-width: var(--content-wide); }
.footer-col a { padding-block: .1rem; }

.hero h1, .directory-copy h1, .playground-hero h1,
.path-feature-copy h2, .project-showcase h2, .cta-band h2 {
  font-family: var(--display); font-variation-settings: "wght" 800;
}
.hero h1 { letter-spacing: -.052em; }

@media (max-width: 1024px) {
  .page-head { margin-inline: 1rem; }
  .stat-grid { grid-template-columns: repeat(3, 1fr); }
  .auth-wrap { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  html { font-size: 15px; }
  body { line-height: 1.58; }
  .section { padding: 2.5rem .85rem; }
  .section-title.left { margin-top: 2.3rem; }
  .page-head {
    margin: .8rem .75rem 0; padding: 1.35rem; border-radius: 15px;
  }
  .page-head h1 { font-size: clamp(1.8rem, 9vw, 2.55rem); }
  .page-head > p { font-size: .86rem; }
  .course-head-row { align-items: flex-start; }
  .course-icon.xl { width: 54px; height: 54px; flex-basis: 54px; border-radius: 14px; font-size: 1.8rem; }
  .directory-hero { border-radius: 16px; }
  .directory-copy h1 { letter-spacing: -.042em; }
  .catalog-head > p { font-size: .86rem; }
  .course-row { padding: 1.1rem; }
  .course-row h2 { font-size: 1.05rem; }
  .course-row-body p { font-size: .84rem; }
  .lesson-layout { padding-inline: .65rem; }
  .lesson-header, .lesson-content { padding: 1.1rem; }
  .lesson-content { font-size: .94rem; }
  .callout { padding: 1rem; }
  .editor-heading { flex-direction: column; gap: .25rem; }
  .editor-heading .save-state { align-self: flex-start; }
  .lesson-footer { gap: .55rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .stat { min-height: 92px; }
  .dash-course-grid { grid-template-columns: 1fr; }
  .achieve-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .achieve-tile { min-height: 132px; padding: .85rem; }
  .review-stats { grid-template-columns: repeat(2, 1fr); }
  .review-stats > div { border-bottom: 1px solid var(--border); }
  .review-stats > div:nth-child(2) { border-right: 0; }
  .flashcard { min-height: 260px; padding: 1.4rem; }
  .review-actions { grid-template-columns: repeat(2, 1fr); gap: .55rem; }
  .auth-wrap {
    min-height: 0; grid-template-columns: 1fr; padding: 1rem .75rem 2.5rem; gap: .75rem;
  }
  .auth-context { padding: 1.5rem; border-radius: 15px; }
  .auth-context h1 { font-size: 2.1rem; }
  .auth-proof { display: grid; grid-template-columns: 1fr 1fr; }
  .auth-card { padding: 1.35rem; border-radius: 15px; }
  .error-wrap { display: flex; min-height: calc(100vh - 180px); }
  .leaderboard { padding-inline: .35rem; }
  .leaderboard th, .leaderboard td { padding: .65rem .55rem; font-size: .78rem; }
  .global-cta { border-radius: 16px; }
}

/* ═══════════════════ v7: LearnWithPython professional learning lab ═══════ */
:root {
  --brand-1: #2563eb;
  --brand-2: #0f9f8f;
  --brand-grad: linear-gradient(105deg, #2563eb 0%, #2563eb 52%, #0f9f8f 100%);
  --success: #059669;
  --warn: #d97706;
  --danger: #e11d48;
  --bg: #f5f7fb;
  --bg-soft: #edf2f7;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --border: #dce3ed;
  --text: #101828;
  --text-dim: #56657a;
  --ink: #081426;
  --ink-2: #10233f;
  --cream: #f8fbff;
  --tint-1: rgba(37, 99, 235, .085);
  --tint-2: rgba(15, 159, 143, .085);
  --shadow: 0 8px 28px rgba(16, 24, 40, .065);
  --shadow-lg: 0 24px 64px rgba(16, 24, 40, .14);
}
[data-theme="dark"] {
  --brand-1: #60a5fa;
  --brand-2: #2dd4bf;
  --brand-grad: linear-gradient(105deg, #60a5fa 0%, #60a5fa 52%, #2dd4bf 100%);
  --bg: #07111f;
  --bg-soft: #0b1728;
  --surface: #101d30;
  --surface-2: #16253a;
  --border: #263750;
  --text: #eff6ff;
  --text-dim: #a5b4c7;
  --tint-1: rgba(96, 165, 250, .12);
  --tint-2: rgba(45, 212, 191, .1);
}

body {
  background:
    radial-gradient(900px 380px at 88% -6%, var(--tint-1), transparent 64%),
    radial-gradient(720px 320px at 4% 0%, var(--tint-2), transparent 66%),
    var(--bg);
}
.grad {
  background: linear-gradient(100deg, var(--brand-1) 8%, var(--brand-2) 88%);
  background-size: 100% 100%; animation: none;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.btn-primary {
  background: #2563eb; color: #fff;
  box-shadow: 0 7px 20px rgba(37, 99, 235, .24);
}
[data-theme="dark"] .btn-primary { background: #3b82f6; }
.btn-primary:hover { background: #1d4ed8; box-shadow: 0 10px 28px rgba(37, 99, 235, .32); }
.btn-run { background: #059669; }

/* Header: two clear systems, generous click targets, and contextual panels. */
.announce { background: #07152b; }
.announce-inner { min-height: 34px; font-size: .72rem; }
.announce strong { background: #dffdf6; color: #075f55; }
.announce a { color: #75e6d4; }
.nav { background: color-mix(in srgb, var(--surface) 90%, transparent); }
.nav-inner { max-width: 1280px; min-height: 72px; }
.brand-mark { color: var(--brand-1); border-color: color-mix(in srgb, var(--brand-1) 28%, var(--border)); }
.nav-links { justify-content: center; }
.nav-links > a, .nav-menu-trigger { font-size: .86rem; min-height: 42px; padding-inline: .9rem; }
.nav-links > a.active, .nav-menu-trigger.active {
  color: var(--brand-1); background: var(--tint-1);
}
.nav-menu-trigger[aria-expanded="true"] {
  color: var(--brand-1); background: var(--tint-1);
}
.mega-menu {
  top: calc(100% + 15px); left: -148px; width: min(760px, 88vw);
  grid-template-columns: .88fr 1.12fr; gap: .55rem; padding: .7rem;
  border-radius: 18px; box-shadow: 0 28px 80px rgba(8, 20, 38, .22);
}
.mega-menu::before {
  content: ''; position: absolute; top: -7px; left: 178px; width: 13px; height: 13px;
  background: var(--nav-panel); border-left: 1px solid var(--border); border-top: 1px solid var(--border);
  transform: rotate(45deg);
}
.build-menu { left: -245px; }
.build-menu::before { left: 276px; }
.mega-intro {
  padding: 1.5rem; color: var(--cream); background:
    linear-gradient(145deg, rgba(37, 99, 235, .22), transparent 48%),
    var(--ink);
}
.mega-intro .eyebrow { color: #7dd3fc; }
.mega-kicker {
  display: inline-flex; align-items: center; gap: .4rem; color: #8be7d8;
  font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
}
.mega-kicker .ui-icon { width: 16px; height: 16px; }
.mega-intro h2 { color: #fff; font-size: 1.45rem; margin-top: .65rem; }
.mega-intro p { color: #afbdd0; }
.mega-intro .mega-primary { color: #8be7d8; }
.mega-progress { height: 5px; margin-top: 1.1rem; overflow: hidden; background: rgba(255,255,255,.1); border-radius: 99px; }
.mega-progress span { display: block; height: 100%; background: #2dd4bf; border-radius: inherit; }
.mega-links { display: flex; flex-direction: column; justify-content: center; gap: .2rem; padding: .25rem; }
.mega-links a {
  display: grid; grid-template-columns: 38px 1fr auto; align-items: center;
  gap: .75rem; padding: .85rem; border: 1px solid transparent;
}
.mega-links a:hover { border-color: var(--border); background: var(--surface-2); }
.mega-links a > .menu-icon {
  width: 38px; height: 38px; display: grid; place-items: center;
  color: var(--brand-1); background: var(--tint-1); border-radius: 10px;
}
.mega-links .menu-icon .ui-icon { width: 20px; height: 20px; }
.mega-links a > b { color: var(--text-dim); font-size: .9rem; }
.mega-links strong { font-size: .86rem; }
.mega-links small { font-size: .7rem; }
.build-links a { min-height: 78px; }
.theme-toggle { border-radius: 11px; }

/* Hero: tighter message, clearer value, and a calmer visual hierarchy. */
.hero { padding: 4.75rem 1.25rem 4rem; }
.hero-inner { max-width: 1280px; grid-template-columns: .92fr 1.08fr; gap: 3.5rem; }
.hero h1 { max-width: 650px; font-size: clamp(3rem, 5.15vw, 4.8rem); line-height: .98; }
.hero-sub { max-width: 600px; font-size: 1.03rem; line-height: 1.7; }
.pill { color: #165fd4; background: #eef4ff; border-color: #cfddf7; }
[data-theme="dark"] .pill { color: #93c5fd; background: var(--tint-1); border-color: var(--border); }
.hero-assurance {
  display: flex; align-items: center; flex-wrap: wrap; gap: .35rem;
  margin: -.5rem 0 1.85rem; color: var(--text-dim); font-size: .75rem; font-weight: 700;
}
.hero-assurance .ui-icon { color: var(--brand-2); }
.hero-assurance > span { display: inline-flex; align-items: center; gap: .3rem; }
.hero-assurance > span + span::before { content: ''; width: 1px; height: 14px; margin-inline: .35rem; background: var(--border); }
.hero-stats { gap: 0; border-top: 1px solid var(--border); padding-top: 1.5rem; }
.hero-stats div { min-width: 135px; padding-right: 1.2rem; margin-right: 1.2rem; border-right: 1px solid var(--border); }
.hero-stats div:last-child { border-right: 0; }
.hero-stats strong { color: var(--brand-1); background: none; font-size: 1.65rem; }
.hero-visual { min-height: 535px; }
.hero-visual > img { min-height: 520px; border-radius: 24px; box-shadow: 0 30px 70px rgba(8, 20, 38, .2); }
.hero-visual::after { border-radius: 18px; }
.hero-console { width: min(320px, 62%); bottom: -1.1rem; left: -1.1rem; }

/* The method is one connected, high-contrast practice loop. */
.section.alt.method-section {
  padding-top: 4.5rem; padding-bottom: 5rem; color: #eef6ff;
  background:
    radial-gradient(600px 260px at 12% 0%, rgba(37, 99, 235, .25), transparent 72%),
    radial-gradient(620px 300px at 92% 100%, rgba(15, 159, 143, .17), transparent 72%),
    var(--ink);
  border-color: rgba(255,255,255,.08);
}
.method-section .section-kicker { color: #a9b8cb; }
.method-section .section-kicker span, .method-section .eyebrow { color: #65dfcd; }
.method-section .section-kicker::after { background: rgba(255,255,255,.15); }
.method-head {
  display: grid; grid-template-columns: 1.1fr .9fr; align-items: end; gap: 3rem;
  margin-bottom: 2rem;
}
.method-head h2 { max-width: 660px; font-size: clamp(2.15rem, 4vw, 3.45rem); margin-top: .5rem; color: #fff; }
.method-head h2 span { color: #65dfcd; }
.method-head > p { max-width: 520px; color: #aebdd0; line-height: 1.7; }
.method-section .how-grid { position: relative; gap: .8rem; margin-top: 0; }
.method-section .how-grid::before {
  content: ''; position: absolute; left: 16%; right: 16%; top: 34px; height: 1px;
  background: linear-gradient(90deg, #3b82f6, #2dd4bf); opacity: .5;
}
.method-section .how-card {
  min-height: 360px; padding: 1.25rem; gap: .9rem;
  color: #eef6ff; background: rgba(16, 35, 63, .82);
  border-color: rgba(255,255,255,.11); box-shadow: none; backdrop-filter: blur(10px);
}
.method-section .how-card:hover { border-color: rgba(101,223,205,.4); transform: translateY(-3px); }
.method-section .how-num {
  position: relative; z-index: 2; top: auto; left: auto; align-self: flex-end;
  width: 27px; height: 27px; color: #06231f; background: #65dfcd;
  border: 4px solid var(--ink); box-shadow: none; font-size: .7rem;
}
.how-card-title { display: flex; align-items: center; gap: .7rem; }
.how-icon {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: #7fb1ff; background: rgba(59,130,246,.13); border: 1px solid rgba(127,177,255,.2); border-radius: 11px;
}
.how-icon .ui-icon { width: 22px; height: 22px; }
.how-card-title small { display: block; color: #65dfcd; font-size: .62rem; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; }
.how-card-title h3 { color: #fff; margin-top: .15rem; }
.method-section .how-demo { min-height: 92px; background: #0a1425; border-color: rgba(255,255,255,.11); }
.method-section .how-demo-code { gap: .7rem; padding: 1rem 1.1rem; }
.method-section .type-line,
.method-section .type-result {
  width: 100%; display: block; opacity: 1; overflow: visible;
  padding: 0; color: #eaf2ff; background: transparent; border: 0;
  font: 600 .8rem/1.45 var(--mono); animation: none;
}
.method-section .type-result { color: #9ee8dc; }
.method-section .code-prompt { color: #5eead4; font-weight: 800; }
.method-section .code-status {
  display: inline-flex; margin-right: .35rem; padding: .12rem .4rem;
  color: #062e28; background: #5eead4; border-radius: 5px;
  font: 800 .58rem/1.25 var(--font); letter-spacing: .08em;
}
.method-section .caret {
  width: 7px; height: .95em; margin-left: 2px; background: #5eead4;
}
.method-section .how-line { background: #273851; }
.method-section .how-card > p { color: #aebdd0; line-height: 1.65; }
.method-section .how-xp-track { background: #172841; border-color: rgba(255,255,255,.12); }
.method-section .how-xp-fill { background: #2dd4bf; }
.method-section .how-badge { color: #a7f3d0; background: rgba(16,185,129,.13); }

/* Shared page-family refinement. */
.page-head {
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--brand-1) 5%, transparent), transparent 44%),
    var(--surface);
}
.page-head::after {
  content: ''; display: block; width: 54px; height: 4px; margin-top: 1.25rem;
  background: var(--brand-2); border-radius: 99px;
}
.course-head::after, .project-head::after { background: var(--accent); }
.page-head-actions { display: flex; flex-wrap: wrap; gap: .65rem; margin-top: 1.4rem; }
.directory-hero { min-height: 420px; border-radius: 22px; }
.directory-copy > p { line-height: 1.7; }
.course-card, .project-card, .challenge-card, .dash-course, .use-case-card {
  border-top-width: 2px;
}
.course-row { border-left-width: 0; border-top: 1px solid var(--border); }
.course-row::before {
  content: ''; align-self: stretch; width: 3px; flex: 0 0 3px; margin: -.1rem 0;
  background: var(--accent); border-radius: 99px;
}
.filter-chips { padding: .35rem; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; width: fit-content; }
.chip { border: 0; background: transparent; }
.chip.on { background: var(--ink); color: #fff; }
.global-cta {
  color: var(--cream); border-color: rgba(255,255,255,.1);
  background:
    radial-gradient(circle at 8% 0%, rgba(15,159,143,.2), transparent 38%),
    var(--ink);
  box-shadow: 0 24px 60px rgba(8,20,38,.2);
}
.global-cta .eyebrow { color: #65dfcd; }
.global-cta p { color: #aebdd0; }
.global-cta .btn-ghost { color: #fff; background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.2); }
.footer { background: color-mix(in srgb, var(--bg-soft) 84%, var(--surface)); }

/* About page: system overview plus a compact manifesto. */
.about-system { max-width: 1200px; }
.about-principles { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.about-principles article { min-height: 190px; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; }
.about-principles article > span {
  width: 42px; height: 42px; display: grid; place-items: center; color: var(--brand-1);
  background: var(--tint-1); border-radius: 11px; margin-bottom: 1rem;
}
.about-principles article > span .ui-icon { width: 22px; height: 22px; }
.about-principles strong { font-size: .95rem; }
.about-principles p { margin-top: .35rem; color: var(--text-dim); font-size: .82rem; line-height: 1.55; }
.about-story { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 1rem; margin-top: 1rem; align-items: start; }
.about-story .prose { min-width: 0; }
.about-story .prose h2:first-child { margin-top: 0; }
.about-manifesto {
  position: sticky; top: 96px; padding: 1.5rem; color: #fff; background: var(--ink); border-radius: 16px;
}
.about-manifesto blockquote { margin: .75rem 0 1.5rem; font-size: 1.55rem; font-weight: 800; line-height: 1.2; letter-spacing: -.04em; }
.about-manifesto dl { display: grid; gap: .75rem; }
.about-manifesto dl div { display: flex; justify-content: space-between; align-items: baseline; padding-top: .7rem; border-top: 1px solid rgba(255,255,255,.12); }
.about-manifesto dt { color: #65dfcd; font-size: 1.2rem; font-weight: 800; }
.about-manifesto dd { color: #aebdd0; font-size: .72rem; }

@media (max-width: 1024px) {
  .mega-menu { left: -100px; }
  .mega-menu::before { left: 130px; }
  .build-menu { left: -220px; }
  .build-menu::before { left: 250px; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { max-width: 760px; }
  .hero-visual { min-height: 520px; }
  .about-principles { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 760px) {
  .announce-inner { min-height: 31px; padding-block: .25rem; }
  .nav-inner { min-height: 64px; padding-inline: .8rem; }
  .brand-mark { width: 32px; height: 32px; }
  .nav-links {
    padding: .8rem; gap: .2rem;
    background: var(--surface);
  }
  .nav-links.open { display: flex; flex-direction: column; align-items: stretch; }
  .nav-menu-wrap { flex: 0 0 auto; }
  .mega-menu, .build-menu {
    width: 100%; left: auto; grid-template-columns: minmax(0, 1fr); gap: 0; padding: .35rem; background: var(--surface-2);
  }
  .mega-menu::before { display: none; }
  .mega-links a { background: var(--surface); margin-bottom: .25rem; min-height: 68px; }
  .mega-links small { font-size: .69rem; }
  .hero { padding: 2.6rem .85rem 1.6rem; }
  .hero h1 { font-size: clamp(2.55rem, 12.3vw, 3.55rem); }
  .hero-sub { font-size: .94rem; }
  .hero-assurance { margin-top: -1rem; }
  .hero-assurance > span + span::before { display: none; }
  .hero-cta { width: 100%; flex-direction: column; }
  .hero-cta .btn { width: 100%; }
  .hero-stats div { min-width: 0; margin-right: .65rem; padding-right: .65rem; }
  .hero-visual { min-height: auto; }
  .hero-visual > img { min-height: 270px; height: 290px; }
  .hero-console { width: calc(100% - .75rem); left: .375rem; bottom: 1.25rem; }
  .method-section { padding: 3.4rem .85rem; }
  .method-head { grid-template-columns: 1fr; gap: .75rem; }
  .method-head h2 { font-size: 2.3rem; }
  .method-section .how-grid { grid-template-columns: 1fr; }
  .method-section .how-grid::before { display: none; }
  .method-section .how-card { min-height: 0; }
  .method-section .how-num { position: absolute; top: .9rem; right: .9rem; }
  .directory-hero { min-height: 0; }
  .page-head::after { margin-top: 1rem; }
  .page-head-actions, .page-head-actions .btn { width: 100%; }
  .about-principles { grid-template-columns: 1fr 1fr; }
  .about-principles article { min-height: 175px; padding: 1rem; }
  .about-story { grid-template-columns: 1fr; }
  .about-manifesto { position: static; }
}

@media (max-width: 430px) {
  .about-principles { grid-template-columns: 1fr; }
  .about-principles article { min-height: 0; }
}

/* ═══════════════════ v8: motion & learning-science system ═════════ */

/* Page entrance — every navigation feels intentional. */
@media (prefers-reduced-motion: no-preference) {
  main { animation: pageIn .55s cubic-bezier(.16, 1, .3, 1) both; }
}
@keyframes pageIn { from { opacity: 0; transform: translateY(16px); } }

/* Directional scroll reveals (assigned via data-reveal or by main.js). */
.js .reveal-left { opacity: 0; transform: translateX(-36px); }
.js .reveal-right { opacity: 0; transform: translateX(36px); }
.js .reveal-scale { opacity: 0; transform: scale(.94); }
.reveal-left, .reveal-right, .reveal-scale {
  transition: opacity .65s ease, transform .65s cubic-bezier(.16, 1, .3, 1);
}
.reveal-left.in, .reveal-right.in, .reveal-scale.in { opacity: 1; transform: none; }

/* Progress bars fill from zero when they scroll into view. */
.progress-fill { transition: width .9s cubic-bezier(.16, 1, .3, 1); }

/* Cursor spotlight — cards glow softly toward the pointer. */
@media (pointer: fine) {
  .course-card, .project-card, .challenge-card, .feature, .dash-course,
  .use-case-card, .achieve-tile, .learn-card, .how-card { position: relative; }
  .course-card::before, .project-card::before, .challenge-card::before,
  .feature::before, .dash-course::before, .use-case-card::before,
  .achieve-tile::before, .learn-card::before, .how-card::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    opacity: 0; transition: opacity .35s; pointer-events: none;
    background: radial-gradient(280px circle at var(--spot-x, 50%) var(--spot-y, 50%),
      color-mix(in srgb, var(--accent, var(--brand-1)) 10%, transparent), transparent 70%);
  }
  .course-card:hover::before, .project-card:hover::before, .challenge-card:hover::before,
  .feature:hover::before, .dash-course:hover::before, .use-case-card:hover::before,
  .achieve-tile:hover::before, .learn-card:hover::before, .how-card:hover::before { opacity: 1; }
}

/* Button ripple on press. */
.btn-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: currentColor; opacity: .25; transform: scale(0);
  animation: ripple .6s ease-out forwards;
}
@keyframes ripple { to { transform: scale(3); opacity: 0; } }

/* XP fly-up — rewards float away from the action that earned them. */
.xp-fly {
  position: fixed; z-index: 96; pointer-events: none; white-space: nowrap;
  font: 800 .95rem var(--display); color: var(--brand-1);
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--brand-1) 35%, var(--border));
  padding: .35rem .85rem; border-radius: 99px; box-shadow: var(--shadow-lg);
  animation: xpFlyUp 1.5s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes xpFlyUp {
  0% { opacity: 0; transform: translate(-50%, 0) scale(.7); }
  14% { opacity: 1; transform: translate(-50%, -14px) scale(1.06); }
  100% { opacity: 0; transform: translate(-50%, -110px) scale(1); }
}

/* Live nav stats. */
.nav-xp .ui-icon { color: var(--brand-1); }
.nav-streak .ui-icon {
  color: var(--warn); transform-origin: 50% 85%;
  animation: flamePulse 2.6s ease-in-out infinite;
}
@keyframes flamePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }

/* Mega menus glide open. */
@media (prefers-reduced-motion: no-preference) {
  .mega-menu:not([hidden]) { animation: menuIn .28s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes menuIn { from { opacity: 0; transform: translateY(-10px) scale(.985); } }

/* Quiz feedback with feeling. */
.quiz-opt.correct { animation: optPop .38s cubic-bezier(.2, 1.6, .4, 1); }
.quiz-opt.wrong { animation: optShake .4s ease; }
@keyframes optPop { 0% { transform: scale(.97); } 55% { transform: scale(1.015); } 100% { transform: none; } }
@keyframes optShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); }
}

/* Fresh console output flashes so learners notice the change. */
.code-output.flash { animation: outFlash .55s ease; }
@keyframes outFlash { from { box-shadow: inset 0 0 0 2px rgba(45, 212, 191, .55); } }

/* Flashcards flip and deal like real cards. */
@media (prefers-reduced-motion: no-preference) {
  .flashcard.flipping { animation: cardFlip .48s cubic-bezier(.4, 0, .2, 1); }
  .flashcard.deal { animation: cardDeal .45s cubic-bezier(.16, 1, .3, 1); }
}
@keyframes cardFlip {
  0% { transform: perspective(900px) rotateY(0); }
  50% { transform: perspective(900px) rotateY(90deg); }
  100% { transform: perspective(900px) rotateY(0); }
}
@keyframes cardDeal { from { opacity: 0; transform: translateY(16px) scale(.97); } }

/* ── the study loop strip (lesson pages) ─────────────────────────── */
.study-loop {
  display: flex; align-items: center; flex-wrap: wrap; gap: .45rem;
  padding: .8rem 1.1rem; border-radius: 14px;
}
.study-loop > strong {
  display: inline-flex; align-items: center; gap: .45rem; margin-right: .4rem;
  color: var(--text-dim); font-size: .72rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .09em;
}
.study-loop > strong .ui-icon { color: var(--accent, var(--brand-1)); }
.loop-step {
  --i: 0;
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 99px;
  background: var(--surface-2); color: var(--text-dim);
  font-size: .74rem; font-weight: 800;
  animation: loopGlow 7.2s ease infinite;
  animation-delay: calc(var(--i) * 1.2s);
}
.loop-step .ui-icon { color: var(--accent, var(--brand-1)); }
.loop-sep { color: var(--text-dim); opacity: .5; font-weight: 800; font-size: .8rem; }
@keyframes loopGlow {
  0%, 16.6%, 100% { border-color: var(--border); color: var(--text-dim); transform: none; }
  6% {
    border-color: color-mix(in srgb, var(--accent, var(--brand-1)) 55%, var(--border));
    color: var(--accent, var(--brand-1)); transform: translateY(-2px);
  }
}

/* ── "learn how to learn" cards (home) ───────────────────────────── */
.learn-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .9rem; margin-top: 2.25rem; }
.learn-card {
  position: relative; overflow: hidden; padding: 1.5rem 1.4rem;
  display: flex; flex-direction: column; gap: .55rem;
}
.learn-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.learn-num {
  position: absolute; top: -.4rem; right: .7rem; z-index: 0; user-select: none;
  font: 800 3.6rem var(--display); letter-spacing: -.06em;
  color: color-mix(in srgb, var(--brand-1) 10%, transparent);
}
.learn-card h3 { font-size: 1.04rem; position: relative; z-index: 1; }
.learn-card > p { color: var(--text-dim); font-size: .88rem; line-height: 1.6; flex: 1; position: relative; z-index: 1; }
.learn-icon {
  width: 46px; height: 46px; display: grid; place-items: center;
  color: var(--brand-1); background: var(--tint-1); border-radius: 12px; margin-bottom: .3rem;
}
.learn-icon .ui-icon { width: 24px; height: 24px; }
.learn-do {
  display: flex; align-items: flex-start; gap: .45rem; margin-top: auto;
  padding: .5rem .7rem; border-radius: 10px;
  color: var(--brand-1); background: var(--tint-1);
  font-size: .76rem; font-weight: 700; line-height: 1.45;
}
.learn-do .ui-icon { flex-shrink: 0; margin-top: .15em; color: var(--brand-2); }

/* ── study method timeline (about) ───────────────────────────────── */
.method-steps { display: flex; flex-direction: column; gap: .8rem; margin-top: 1.75rem; }
.method-step {
  display: grid; grid-template-columns: 46px 1fr; gap: 1.1rem; align-items: start;
  padding: 1.25rem 1.4rem;
}
.method-step-num {
  width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 50%; background: var(--brand-grad); color: #fff;
  font-weight: 900; font-size: 1.05rem;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand-1) 30%, transparent);
}
.method-step h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.method-step p { color: var(--text-dim); font-size: .9rem; line-height: 1.65; }
.method-step p code { font-size: .84em; }

@media (max-width: 1024px) {
  .learn-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .learn-grid { grid-template-columns: 1fr; }
  .study-loop { padding: .7rem .85rem; }
  .study-loop > strong { width: 100%; margin: 0; }
  .loop-sep { display: none; }
  .method-step { padding: 1rem; grid-template-columns: 38px 1fr; gap: .8rem; }
  .method-step-num { width: 36px; height: 36px; font-size: .9rem; }
}

/* ── "never coded before?" fast-start callout ────────────────────── */
.starter-callout {
  display: flex; align-items: center; gap: 1rem;
  margin: 1.5rem 0 .25rem; padding: 1.1rem 1.35rem;
  color: var(--text); border-left: 4px solid var(--brand-2);
  background: linear-gradient(100deg, var(--tint-2), transparent 55%), var(--surface);
}
.starter-callout:hover { text-decoration: none; transform: translateX(4px); box-shadow: var(--shadow-lg); }
.starter-callout-icon {
  width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center;
  color: var(--brand-2); background: var(--tint-2); border-radius: 12px;
}
.starter-callout-icon .ui-icon { width: 24px; height: 24px; }
.starter-callout strong { display: block; font-size: .98rem; }
.starter-callout small { color: var(--text-dim); font-size: .82rem; line-height: 1.45; }
.starter-callout > b { margin-left: auto; color: var(--brand-2); font-size: 1.2rem; transition: transform .15s; }
.starter-callout:hover > b { transform: translateX(4px); }

/* ═══════════════════ v9: cinematic interactive hero ═══════════════ */
.hero {
  isolation: isolate;
  background:
    linear-gradient(180deg, transparent 70%, color-mix(in srgb, var(--bg) 94%, transparent)),
    transparent;
}
.hero-grid {
  background-size: 44px 44px;
  animation: heroGridDrift 18s linear infinite;
}
@keyframes heroGridDrift {
  from { background-position: 0 0, 0 0; }
  to { background-position: 44px 44px, 44px 44px; }
}
.hero-copy { position: relative; z-index: 4; }
.hero-copy::before {
  content: ''; position: absolute; z-index: -1; width: 360px; height: 360px;
  left: -150px; top: 60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--brand-2) 10%, transparent), transparent 68%);
  filter: blur(16px);
}
/* The gradient already carries the emphasis. A rule under it was drawn from
   the span's first inline fragment, so it struck through the following line
   at desktop widths (line-height is .98, so line boxes overlap) and collapsed
   to nothing wherever "writing it" wrapped. */
.hero h1 .grad {
  background-image: linear-gradient(100deg, #2563eb 0%, #1688bc 52%, #0f9f8f 100%);
}
.hero-cta .btn-primary { position: relative; }
.hero-cta .btn-primary span, .hero-cta .btn-primary::marker { transition: transform .2s; }
.hero-cta .btn-primary:hover { transform: translateY(-3px); }
.hero-cta .btn-ghost:hover { border-color: color-mix(in srgb, var(--brand-1) 45%, var(--border)); }

.hero-visual {
  --hero-x: 0px; --hero-y: 0px; --hero-rx: 0deg; --hero-ry: 0deg;
  --console-x: 0px; --console-y: 0px;
  perspective: 1200px; isolation: isolate;
}
.hero-visual::after { display: none; }
.hero-media {
  position: relative; width: 100%; min-height: 520px; height: 520px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-1) 18%, var(--border));
  border-radius: 24px; background: #0a1730;
  box-shadow: 0 30px 70px rgba(8, 20, 38, .2);
  transform: perspective(1200px) translate3d(var(--hero-x), var(--hero-y), 0)
             rotateX(var(--hero-rx)) rotateY(var(--hero-ry));
  transform-style: preserve-3d;
  transition: transform .18s ease-out, box-shadow .25s;
}
.hero-media:hover { box-shadow: 0 38px 86px rgba(8, 20, 38, .27); }
.hero-media::after {
  content: ''; position: absolute; inset: 10px; z-index: 6; pointer-events: none;
  border: 1px solid rgba(255,255,255,.23); border-radius: 17px;
}
.hero-media > img {
  width: 100%; height: 100%; min-height: 0; object-fit: cover; object-position: 50% center;
  border-radius: inherit; transform: scale(1.035); transition: transform .25s ease-out, filter .3s;
}
.hero-media:hover > img { transform: scale(1.055); filter: saturate(1.06) contrast(1.02); }
.hero-media .visual-label { z-index: 8; }
.hero-scan {
  position: absolute; z-index: 4; left: 0; right: 0; top: -18%; height: 22%;
  pointer-events: none; opacity: .42;
  background: linear-gradient(180deg, transparent, rgba(45,212,191,.14) 65%, rgba(125,211,252,.58) 100%);
  mix-blend-mode: screen;
  animation: heroScan 6.5s 1.2s ease-in-out infinite;
}
@keyframes heroScan {
  0%, 12% { transform: translateY(-30%); opacity: 0; }
  24% { opacity: .42; }
  65% { opacity: .2; }
  78%, 100% { transform: translateY(610%); opacity: 0; }
}
.hero-flow {
  position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%;
  pointer-events: none; filter: drop-shadow(0 0 8px rgba(45,212,191,.45));
}
.flow-track, .flow-signal { fill: none; stroke-linecap: round; }
.flow-track { stroke: rgba(255,255,255,.14); stroke-width: 1.5; }
.flow-signal {
  stroke: #5eead4; stroke-width: 2; stroke-dasharray: 5 18;
  animation: flowDash 2.4s linear infinite;
}
@keyframes flowDash { to { stroke-dashoffset: -46; } }
.flow-node {
  fill: #5eead4; stroke: rgba(8,20,38,.85); stroke-width: 4;
  transform-box: fill-box; transform-origin: center;
  animation: flowPulse 2.2s ease-in-out infinite;
}
.flow-node.n2 { animation-delay: .55s; }
.flow-node.n3 { animation-delay: 1.1s; }
@keyframes flowPulse {
  0%, 100% { transform: scale(.75); opacity: .45; }
  48% { transform: scale(1.45); opacity: 1; }
}
.hero-capabilities {
  position: absolute; z-index: 9; right: -20px; top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; gap: .5rem;
}
.hero-capabilities span {
  width: 62px; min-height: 54px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .2rem;
  color: #dbeafe; background: rgba(7,21,43,.87);
  border: 1px solid rgba(255,255,255,.18); border-radius: 13px;
  box-shadow: 0 14px 30px rgba(4,10,22,.24); backdrop-filter: blur(12px);
  animation: capabilityFloat 4.8s ease-in-out infinite;
}
.hero-capabilities span:nth-child(2) { animation-delay: -.9s; }
.hero-capabilities span:nth-child(3) { animation-delay: -1.8s; }
.hero-capabilities .ui-icon { width: 18px; height: 18px; color: #5eead4; }
.hero-capabilities b { font: 800 .52rem/1 var(--mono); letter-spacing: .08em; }
@keyframes capabilityFloat {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(-6px); }
}
.hero-console {
  transform: translate3d(var(--console-x), var(--console-y), 35px);
  transition: transform .18s ease-out, box-shadow .25s;
  animation: heroConsoleBreathe 5.5s 1.1s ease-in-out infinite;
}
@keyframes heroConsoleBreathe {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -7px; }
}
.hero-console:hover { box-shadow: 0 34px 82px rgba(4,10,22,.5); }
.hero-console .editor-live {
  margin-left: auto; display: inline-flex; align-items: center; gap: .35rem;
  color: #8fe7d8; font: 700 .62rem var(--font);
}
.hero-console .editor-live i {
  width: 6px; height: 6px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.5);
  animation: runtimePulse 1.8s ease-out infinite;
}
.hero-visual.is-executing .hero-media {
  box-shadow: 0 34px 90px rgba(15,159,143,.28), 0 0 0 1px rgba(45,212,191,.22);
}
.hero-visual.is-executing .flow-signal { animation-duration: .75s; stroke-width: 2.8; }
.hero-visual.is-executing .hero-scan { animation-duration: 1.5s; opacity: .7; }
.hero-visual.is-executing .editor-live i { background: #fbbf24; }
.hero-visual.is-complete .editor-live { color: #a7f3d0; }
.hero-visual.is-complete .editor-live i { background: #34d399; }
.hero-visual.is-failed .editor-live { color: #fda4af; }
.hero-visual.is-failed .editor-live i { background: #fb7185; }
@keyframes runtimePulse {
  70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}
.hero-console .copy-btn { margin-left: .35rem; }
.hero-console .code-output {
  position: relative; color: #a7f3d0;
  background-image: linear-gradient(90deg, rgba(45,212,191,.06), transparent 62%);
}
.hero-console .btn-run::before {
  content: ''; position: absolute; inset: -1px; border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(16,185,129,.35); animation: runGlow 2.8s ease-out infinite;
}
@keyframes runGlow {
  0%, 50% { box-shadow: 0 0 0 0 rgba(16,185,129,.28); }
  78%, 100% { box-shadow: 0 0 0 10px rgba(16,185,129,0); }
}


@media (max-width: 1100px) {
  .hero-capabilities { right: 10px; }
}

@media (max-width: 760px) {
  .hero-copy::before { width: 240px; height: 240px; left: -100px; }
  .hero-media { height: 310px; min-height: 310px; border-radius: 20px; }
  .hero-media > img { min-height: 0; height: 100%; object-position: 61% center; }
  .hero-media .visual-label { display: none; }
  .hero-flow { opacity: .7; }
  .hero-capabilities {
    right: 12px; top: auto; bottom: 2.25rem; translate: 0;
    flex-direction: row; gap: .35rem;
  }
  .hero-capabilities span { width: 52px; min-height: 45px; border-radius: 11px; }
  .hero-capabilities .ui-icon { width: 15px; height: 15px; }
  .hero-console { position: relative; transform: none; }
  .hero-console .editor-live { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-grid, .hero-scan, .flow-signal, .flow-node,
  .hero-capabilities span, .hero-console, .hero-console .editor-live i,
  .hero-console .btn-run::before { animation: none !important; }
  .hero-media, .hero-media > img, .hero-console { transform: none !important; transition: none !important; }
}

/* ═══════════════════ v10: self-running hero, ⌘K palette, real-world grid ═══ */

/* hero ambience: drifting code sparks (markup-free) */
.hero-bg::before, .hero-bg::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(3px 3px at 12% 30%, rgba(99, 102, 241, .55), transparent 60%),
    radial-gradient(2px 2px at 28% 68%, rgba(6, 182, 212, .55), transparent 60%),
    radial-gradient(3px 3px at 46% 22%, rgba(16, 185, 129, .5), transparent 60%),
    radial-gradient(2px 2px at 64% 74%, rgba(99, 102, 241, .5), transparent 60%),
    radial-gradient(2px 2px at 82% 36%, rgba(6, 182, 212, .55), transparent 60%),
    radial-gradient(3px 3px at 92% 62%, rgba(16, 185, 129, .45), transparent 60%);
  animation: sparkDrift 26s linear infinite;
  opacity: .8;
}
.hero-bg::after {
  background-image:
    radial-gradient(2px 2px at 8% 76%, rgba(6, 182, 212, .5), transparent 60%),
    radial-gradient(3px 3px at 36% 44%, rgba(99, 102, 241, .4), transparent 60%),
    radial-gradient(2px 2px at 58% 12%, rgba(16, 185, 129, .5), transparent 60%),
    radial-gradient(2px 2px at 76% 88%, rgba(99, 102, 241, .5), transparent 60%),
    radial-gradient(3px 3px at 88% 18%, rgba(6, 182, 212, .4), transparent 60%);
  animation-duration: 34s; animation-direction: reverse; opacity: .6;
}
@keyframes sparkDrift {
  0% { transform: translateY(14px); }
  50% { transform: translateY(-16px); }
  100% { transform: translateY(14px); }
}

/* seamless color bridge between hero and the first sections */
.section.alt {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--tint-2) 40%, transparent), transparent 220px),
    var(--bg-soft);
}

/* scenario chips inside the hero console */
.hero-scenarios {
  display: flex; gap: .35rem; flex-wrap: wrap;
  padding: .55rem .8rem; background: #101828; border-bottom: 1px solid #263049;
}
.scenario-chip {
  border: 1px solid #2c3854; background: #17203a; color: #9fb2d0;
  font: 600 .68rem/1.4 var(--mono); padding: .22rem .6rem; border-radius: 8px;
  cursor: pointer; transition: color .15s, background .15s, border-color .15s, transform .15s;
}
.scenario-chip:hover { color: #e2e8f0; background: #202c4c; transform: translateY(-1px); }
.scenario-chip.on {
  color: #062e28; background: #5eead4; border-color: #5eead4; font-weight: 700;
}
.code-input.is-autotyping { caret-color: transparent; }
.hero-console .code-output .out-line {
  display: block; opacity: 0; transform: translateY(4px);
  animation: outLine .3s ease forwards;
}
@keyframes outLine { to { opacity: 1; transform: none; } }

/* ── nav search trigger ─────────────────────────────────────────── */
.cmdk-btn {
  display: inline-flex; align-items: center; gap: .45rem;
  min-height: 38px; padding: .4rem .7rem; cursor: pointer;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 10px;
  font: 600 .82rem var(--font);
  transition: color .15s, border-color .15s, box-shadow .15s;
}
.cmdk-btn:hover {
  color: var(--text); border-color: color-mix(in srgb, var(--brand-1) 40%, var(--border));
  box-shadow: 0 0 0 3px var(--tint-1);
}
.cmdk-btn .ui-icon { width: 15px; height: 15px; }
.cmdk-btn kbd, .mega-kbd kbd, .cmdk kbd {
  font: 700 .64rem/1.3 var(--mono); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border);
  border-bottom-width: 2px; border-radius: 5px; padding: .08rem .32rem;
}

/* ── ⌘K palette ─────────────────────────────────────────────────── */
body.cmdk-open { overflow: hidden; }
.cmdk {
  position: fixed; inset: 0; z-index: 90; display: flex;
  justify-content: center; align-items: flex-start; padding: 12vh 1rem 2rem;
  background: color-mix(in srgb, var(--ink) 42%, transparent);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  animation: cmdkFade .16s ease;
}
@keyframes cmdkFade { from { opacity: 0; } }
.cmdk-panel {
  width: min(580px, 100%); overflow: hidden; display: flex; flex-direction: column;
  background: var(--nav-panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: 0 40px 90px rgba(4, 10, 22, .4);
  animation: cmdkPop .22s cubic-bezier(.16, 1, .3, 1);
}
@keyframes cmdkPop { from { opacity: 0; transform: translateY(14px) scale(.98); } }
.cmdk-head {
  display: flex; align-items: center; gap: .65rem;
  padding: .85rem 1rem; border-bottom: 1px solid var(--border);
}
.cmdk-glass { width: 17px; height: 17px; color: var(--brand-1); }
.cmdk-head input {
  flex: 1; border: 0; outline: 0; background: transparent; color: var(--text);
  font: 600 1rem var(--font);
}
.cmdk-head input::placeholder { color: var(--text-dim); }
.cmdk-list { max-height: min(46vh, 420px); overflow-y: auto; padding: .45rem; }
.cmdk-group {
  padding: .55rem .65rem .25rem; color: var(--text-dim);
  font: 800 .64rem var(--font); text-transform: uppercase; letter-spacing: .09em;
}
.cmdk-item {
  width: 100%; display: flex; align-items: center; gap: .7rem; text-align: left;
  padding: .58rem .65rem; border: 0; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text); font: 600 .92rem var(--font);
}
.cmdk-item .ui-icon { width: 17px; height: 17px; color: var(--brand-2); }
.cmdk-item .cmdk-label { flex-shrink: 0; }
.cmdk-item .cmdk-hint {
  flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: var(--text-dim); font-weight: 500; font-size: .78rem;
}
.cmdk-item b {
  color: var(--text-dim); font: 700 .66rem var(--mono); opacity: 0;
  border: 1px solid var(--border); border-radius: 5px; padding: .05rem .3rem;
}
.cmdk-item.active { background: var(--tint-1); }
.cmdk-item.active .ui-icon { color: var(--brand-1); }
.cmdk-item.active b { opacity: 1; }
.cmdk-empty { padding: 1.4rem .8rem; color: var(--text-dim); font-size: .9rem; text-align: center; }
.cmdk-foot {
  display: flex; gap: 1.1rem; padding: .6rem 1rem;
  border-top: 1px solid var(--border); color: var(--text-dim); font-size: .72rem; font-weight: 600;
}
.cmdk-foot span { display: inline-flex; align-items: center; gap: .3rem; }

/* ── mega-menu quick actions ────────────────────────────────────── */
.mega-foot {
  grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: .5rem .35rem .1rem; padding: .6rem .8rem;
  border-top: 1px solid var(--border);
}
.mega-foot-label {
  color: var(--text-dim); font: 800 .62rem var(--font);
  text-transform: uppercase; letter-spacing: .09em;
}
.mega-foot a {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .3rem .7rem; border: 1px solid var(--border); border-radius: 99px;
  color: var(--text); font-weight: 700; font-size: .76rem;
  transition: border-color .15s, background .15s;
}
.mega-foot a:hover {
  text-decoration: none; background: var(--tint-1);
  border-color: color-mix(in srgb, var(--brand-1) 40%, var(--border));
}
.mega-foot a .ui-icon { width: 13px; height: 13px; color: var(--brand-2); }
.mega-kbd { margin-left: auto; color: var(--text-dim); font-size: .72rem; font-weight: 600; }

/* ── real-world use-case grid (home 04) ─────────────────────────── */
.usecase-head {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 2rem; align-items: end;
  margin-bottom: 2rem;
}
.usecase-head h2 { font-size: clamp(1.9rem, 3.8vw, 3rem); margin-top: .55rem; }
.usecase-head > p { color: var(--text-dim); max-width: 460px; justify-self: end; }
.usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.usecase-card {
  display: flex; flex-direction: column; gap: .9rem; padding: 1.4rem;
  color: var(--text); position: relative; overflow: hidden;
}
.usecase-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 3px;
  background: linear-gradient(90deg, var(--accent), transparent 80%);
  opacity: .85;
}
.usecase-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); text-decoration: none; }
.usecase-icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent) 24%, var(--border));
  border-radius: 13px; transition: transform .25s cubic-bezier(.2, 1.6, .4, 1);
}
.usecase-card:hover .usecase-icon { transform: rotate(-8deg) scale(1.12); }
.usecase-icon .ui-icon { width: 23px; height: 23px; }
.usecase-body h3 { font-size: 1.05rem; margin-bottom: .3rem; }
.usecase-body p { color: var(--text-dim); font-size: .88rem; line-height: 1.55; }
.usecase-course {
  margin-top: auto; display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text-dim); font-size: .76rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em;
}
.usecase-course i {
  width: 8px; height: 8px; border-radius: 3px; background: var(--accent); flex: 0 0 8px;
}
.usecase-course b { margin-left: auto; color: var(--accent); transition: transform .15s; }
.usecase-card:hover .usecase-course b { transform: translateX(4px); }

/* ── responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .usecase-grid { grid-template-columns: 1fr 1fr; }
  .cmdk-btn .cmdk-btn-text, .cmdk-btn kbd { display: none; }
  .cmdk-btn { width: 38px; justify-content: center; padding: 0; border-radius: 50%; }
}
@media (max-width: 760px) {
  .usecase-head { grid-template-columns: 1fr; gap: .75rem; }
  .usecase-head > p { justify-self: start; }
  .usecase-grid { grid-template-columns: 1fr; }
  .hero-scenarios { padding: .5rem .65rem; overflow-x: auto; flex-wrap: nowrap; }
  .scenario-chip { flex: 0 0 auto; }
  .mega-foot { display: none; }
  .cmdk { padding-top: 8vh; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg::before, .hero-bg::after { animation: none; }
  .hero-console .code-output .out-line { animation: none; opacity: 1; transform: none; }
  .cmdk, .cmdk-panel { animation: none; }
}

/* ═══════════════════ v11: course timeline, spy nav, diff viewer, resume ═══ */

/* course syllabus timeline */
.lesson-list.timeline { position: relative; padding-left: 1.4rem; }
/* The connector is drawn per row — from this dot down to the next one — so
   the rail starts exactly at the first circle and ends at the last, with no
   stub dangling past either end, whatever height the cards are. */
.lesson-list.timeline li::after {
  content: ''; position: absolute; z-index: 0;
  left: calc(-1.4rem + 8px); top: 50%; width: 2px;
  height: calc(100% + .8rem);          /* row height + list gap = next dot */
  background: var(--border); border-radius: 2px;
  transition: background .3s;
}
.lesson-list.timeline li:last-child::after { display: none; }
/* the trail fills in as lessons are completed */
.lesson-list.timeline li:has(.is-done)::after {
  background: linear-gradient(180deg, var(--success),
    color-mix(in srgb, var(--success) 45%, var(--border)));
}
.lesson-list.timeline li { position: relative; }
.lesson-list.timeline li::before {
  content: ''; position: absolute; z-index: 1; left: calc(-1.4rem + 3px); top: 50%; translate: 0 -50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--border);
  transition: border-color .2s, background .2s;
}
.lesson-list.timeline li:has(.is-done)::before { background: var(--success); border-color: var(--success); }
.lesson-list.timeline li:has(.is-next)::before {
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent);
  animation: nextPulse 2.2s ease-in-out infinite;
}
@keyframes nextPulse {
  0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
  50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 8%, transparent); }
}
.lesson-row.is-next {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--border));
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 5%, var(--surface)), var(--surface) 55%);
}
.next-up-badge {
  display: inline-block; vertical-align: .12em; margin-left: .4rem;
  padding: .12rem .55rem; border-radius: 99px;
  color: #fff; background: var(--accent);
  font: 800 .62rem/1.4 var(--font); text-transform: uppercase; letter-spacing: .07em;
}
.course-head-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ── roadmap rows: generous, consistent padding + a real Start button ── */
.lesson-list.timeline .lesson-row {
  gap: 1.25rem; padding: 1.35rem 1.5rem; border-radius: 16px;
}
.lesson-list.timeline .lesson-num {
  width: 42px; height: 42px; font-size: 1.02rem;
}
.lesson-list.timeline .lesson-row-body { padding-right: .5rem; }
.lesson-list.timeline .lesson-row-body h3 {
  font-size: 1.12rem; margin-bottom: .45rem; letter-spacing: -.01em;
}
.lesson-list.timeline .lesson-row .course-meta { gap: .55rem 1.15rem; }
/* the "Start →" / "Review →" affordance — a padded pill, not a cramped icon box */
.lesson-list.timeline .course-row-go {
  flex: 0 0 auto; width: auto; height: auto; display: inline-flex; align-items: center; gap: .4rem;
  padding: .58rem 1.15rem; border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--border));
  border-radius: 11px; background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--accent); font-size: .92rem; font-weight: 800;
  transition: background .15s, transform .15s, box-shadow .15s;
}
.lesson-list.timeline .lesson-row:hover .course-row-go {
  background: var(--accent); color: #fff; transform: translateX(2px);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent) 35%, transparent);
}
.lesson-list.timeline .lesson-row.is-done .course-row-go {
  border-color: color-mix(in srgb, var(--success) 40%, var(--border));
  background: color-mix(in srgb, var(--success) 8%, var(--surface)); color: #0b9e6f;
}
[data-theme="dark"] .lesson-list.timeline .lesson-row.is-done .course-row-go { color: var(--success); }
@media (max-width: 640px) {
  .lesson-list.timeline .lesson-row { flex-wrap: wrap; padding: 1.15rem 1.15rem; gap: .9rem 1rem; }
  .lesson-list.timeline .lesson-row-body { flex: 1 1 calc(100% - 3.5rem); padding-right: 0; }
  .lesson-list.timeline .course-row-go {
    display: inline-flex; flex: 1 1 100%; justify-content: center; margin-left: 0; padding-block: .7rem;
  }
}

/* lesson sidebar: on-page spy nav */
.spy-nav {
  display: flex; flex-direction: column; gap: .1rem;
  margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--border);
}
.spy-label {
  color: var(--text-dim); font: 800 .62rem var(--font);
  text-transform: uppercase; letter-spacing: .09em; margin-bottom: .35rem;
}
.spy-nav a {
  display: flex; align-items: center; gap: .5rem;
  padding: .38rem .55rem; border-left: 2px solid transparent; border-radius: 0 8px 8px 0;
  color: var(--text-dim); font-size: .82rem; font-weight: 600;
  transition: color .15s, background .15s, border-color .15s;
}
.spy-nav a:hover { color: var(--text); background: var(--surface-2); text-decoration: none; }
.spy-nav a.on {
  color: var(--accent); border-left-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.spy-nav .ui-icon { width: 14px; height: 14px; }
.lesson-kbd-hint { margin-top: .9rem; text-align: center; color: var(--text-dim); font-size: .78rem; }
.lesson-kbd-hint kbd {
  font: 700 .68rem/1.3 var(--mono); color: var(--text-dim);
  background: var(--surface); border: 1px solid var(--border); border-bottom-width: 2px;
  border-radius: 5px; padding: .06rem .32rem;
}

/* output diff viewer inside .check-result.fail */
.diff-view {
  margin-top: .8rem; overflow-x: auto; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); font-weight: 400;
}
.diff-row {
  display: grid; grid-template-columns: 34px 1fr 1fr; min-width: 420px;
  border-top: 1px solid var(--border);
}
.diff-row:first-child { border-top: 0; }
.diff-row .diff-ln {
  display: grid; place-items: center; padding-block: .3rem;
  color: var(--text-dim); background: var(--surface-2);
  font: 600 .68rem var(--mono); border-right: 1px solid var(--border);
}
.diff-row code {
  background: none; border: 0; border-radius: 0; padding: .3rem .7rem;
  color: var(--text); font-size: .78rem; white-space: pre-wrap; word-break: break-word;
}
.diff-row code + code { border-left: 1px solid var(--border); }
.diff-row code em { color: var(--text-dim); font-style: italic; font-size: .72rem; }
.diff-head { background: var(--surface-2); }
.diff-head code {
  color: var(--text-dim); font: 800 .62rem var(--font);
  text-transform: uppercase; letter-spacing: .07em;
}
.diff-row.diff-ok code + code { color: #0b9e6f; }
[data-theme="dark"] .diff-row.diff-ok code + code { color: var(--success); }
.diff-row.diff-bad code + code,
.diff-row.diff-missing code + code,
.diff-row.diff-extra code + code {
  color: var(--danger); background: rgba(244, 63, 94, .06);
}
.diff-row.diff-bad .diff-ln, .diff-row.diff-missing .diff-ln, .diff-row.diff-extra .diff-ln {
  color: var(--danger);
}

/* quiz perfect score */
.quiz-score.perfect { color: #0b9e6f; font-weight: 800; }
[data-theme="dark"] .quiz-score.perfect { color: var(--success); }

/* resume chip */
.resume-slot { margin-bottom: 1.5rem; }
.resume-chip {
  display: inline-flex; align-items: center; gap: .6rem; max-width: 100%;
  padding: .55rem 1rem .55rem .8rem; border-radius: 99px;
  color: var(--text); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--accent, var(--brand-1)) 35%, var(--border));
  box-shadow: var(--shadow); font-size: .84rem;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  animation: fadeUp .5s cubic-bezier(.16, 1, .3, 1);
}
.resume-chip:hover {
  text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow-lg);
  border-color: var(--accent, var(--brand-1));
}
.resume-chip i {
  flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--accent, var(--brand-1));
  animation: pulse 1.8s ease infinite;
}
.resume-chip small { color: var(--text-dim); font-weight: 700; white-space: nowrap; }
.resume-chip strong { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 800; }
.resume-chip b { color: var(--accent, var(--brand-1)); transition: transform .15s; }
.resume-chip:hover b { transform: translateX(3px); }
.directory-actions + .resume-slot { margin: 1rem 0 0; }

@media (max-width: 900px) {
  .spy-nav { display: none; }
}
@media (max-width: 760px) {
  .lesson-list.timeline { padding-left: 1.1rem; }
  .lesson-list.timeline li::before { left: calc(-1.1rem + 2px); }
  .lesson-list.timeline li::after { left: calc(-1.1rem + 7px); }
  .resume-chip small { display: none; }
  .diff-row { min-width: 360px; }
  .course-head-actions .btn { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .lesson-list.timeline li:has(.is-next)::before,
  .resume-chip, .resume-chip i { animation: none; }
}

/* ═══════════════════ v12: Google sign-in, rebrand polish ═══════════ */
.btn-google {
  width: 100%; gap: .6rem; background: #fff; color: #1f2937;
  border: 1px solid #dadce0; box-shadow: 0 1px 2px rgba(0,0,0,.06);
}
.btn-google:hover { background: #f8fafc; box-shadow: 0 2px 8px rgba(0,0,0,.1); transform: translateY(-1px); }
[data-theme="dark"] .btn-google { background: #1f2937; color: #e6ebf4; border-color: #374151; }
[data-theme="dark"] .btn-google:hover { background: #263042; }
.google-glyph { width: 18px; height: 18px; stroke: none; fill: none; }
.auth-divider {
  display: flex; align-items: center; gap: .8rem; margin: .35rem 0 .1rem;
  color: var(--text-dim); font-size: .74rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px; background: var(--border);
}

/* ═══════════════════ v13: hero as a large live terminal ════════════ */
/* The right column is now one prominent, interactive Python terminal
   (no background illustration). Overrides the old floating-console rules. */
.hero-visual { min-height: auto; perspective: none; display: flex; flex-direction: column; }
.hero-visual::after { display: none; }
.hero-visual .hero-terminal {
  position: relative; inset: auto; left: auto; right: auto; bottom: auto; top: auto;
  width: 100%; transform: none; animation: none;
  border-radius: 20px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-1) 26%, #22304d);
  box-shadow: 0 34px 90px rgba(4, 10, 22, .30), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.hero-visual .hero-terminal::before { display: none; }
.hero-terminal .editor-chrome { padding: .8rem 1.1rem; }
.hero-terminal .editor-title { font-size: .82rem; }
.hero-terminal .hero-scenarios { padding: .6rem .9rem; gap: .4rem; }
.hero-terminal .scenario-chip { padding: .26rem .75rem; font-size: .74rem; }
.hero-terminal .code-input {
  min-height: 208px; font-size: .95rem; line-height: 1.68; padding: 1.1rem 1.3rem;
}
.hero-terminal .editor-bar { padding: .7rem 1.1rem; }
.hero-terminal .code-output {
  min-height: 3.4rem; max-height: 150px; padding: .95rem 1.3rem; font-size: .86rem;
}
.hero-terminal .editor-live { margin-left: auto; }

/* capability chips: a calm horizontal strip under the terminal */
.hero-visual .hero-capabilities {
  position: static; transform: none; translate: none; right: auto; top: auto; bottom: auto;
  flex-direction: row; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; justify-content: flex-start;
}
.hero-visual .hero-capabilities span {
  flex-direction: row; width: auto; min-height: 0; gap: .45rem;
  padding: .5rem .95rem; border-radius: 11px; animation: none;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text);
}
.hero-visual .hero-capabilities .ui-icon { width: 16px; height: 16px; color: var(--brand-1); }
.hero-visual .hero-capabilities b { font: 800 .72rem var(--font); letter-spacing: 0; }

@media (max-width: 980px) {
  .hero-terminal .code-input { min-height: 172px; }
}
@media (max-width: 760px) {
  .hero-visual .hero-capabilities { justify-content: center; }
  .hero-terminal .code-input { min-height: 150px; font-size: .9rem; }
  .hero-terminal .code-output { max-height: 120px; }
}

/* ═══════════════════ v14: guest progress & save nudge ══════════════ */
/* Learners can finish the whole curriculum signed-out; this invites them
   to keep it without ever blocking the lesson. */
.save-nudge {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 1rem 1.15rem; margin-top: 1.25rem; padding: 1.15rem 1.35rem;
  border-left: 4px solid var(--success);
  background: linear-gradient(100deg, color-mix(in srgb, var(--success) 8%, var(--surface)), var(--surface) 60%);
  animation: fadeUp .45s cubic-bezier(.16, 1, .3, 1);
}
.save-nudge-icon {
  width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center;
  border-radius: 12px; color: #fff; background: var(--success);
}
.save-nudge-icon .ui-icon { width: 21px; height: 21px; }
.save-nudge strong { display: block; font-size: 1rem; margin-bottom: .2rem; }
.save-nudge p { color: var(--text-dim); font-size: .88rem; line-height: 1.55; margin: 0; }
.save-nudge-actions { display: flex; align-items: center; gap: .5rem; }

@media (max-width: 760px) {
  .save-nudge { grid-template-columns: auto 1fr; padding: 1rem; }
  .save-nudge-actions { grid-column: 1 / -1; }
  .save-nudge-actions .btn { flex: 1; justify-content: center; }
}

/* ═══════════ close the 761–1000px nav gap (h-overflow fix) ══════════ */
/* The horizontal bar stops fitting around 1000px but only collapsed at
   760px, leaving a band where it overflowed the viewport. An earlier pass
   set this bound to 900px, which was still short: at 901px the page
   scrolled 48px sideways. Measured across widths, 1000px is where the bar
   genuinely fits, so the drawer holds until then. */
@media (min-width: 761px) and (max-width: 1000px) {
  .nav-links {
    position: absolute; display: none; top: 100%; left: 0; right: 0; bottom: auto;
    width: 100%; height: auto; max-height: calc(100dvh - 99px); padding: 1.1rem;
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: var(--surface); overflow-y: auto; box-shadow: var(--shadow-lg); z-index: 55;
    border-bottom: 1px solid var(--border);
  }
  .nav-links.open { display: flex; }
  .nav-links > a, .nav-menu-wrap, .nav-menu-trigger { width: 100%; }
  .nav-links > a, .nav-menu-trigger {
    justify-content: space-between; min-height: 50px; font-size: 1rem; padding-inline: 1rem;
  }
  .mega-menu, .build-menu {
    position: static; width: 100%; left: auto; grid-template-columns: 1fr;
    margin: .35rem 0; padding: .35rem; gap: 0;
    background: var(--surface-2); box-shadow: none; border-radius: 14px;
  }
  .mega-links { grid-template-columns: 1fr 1fr; }
  .mobile-nav-cta { display: block; margin-top: .75rem; }
  .mobile-nav-cta .btn { width: 100%; min-height: 50px; color: var(--cream); }
  .nav-burger { display: block; }
  .mega-foot { display: none; }
}

/* Playground: let the grid tracks actually shrink. Grid items default to
   min-width:auto, so the 5-wide recipe row forced the sidebar past the
   viewport at ~768–820px instead of scrolling inside its own container. */
.playground-layout > * { min-width: 0; }
.lab-sidebar, .recipe-list { min-width: 0; max-width: 100%; }

/* ═══════════ v15b: hero rhythm when the columns stack ══════════════ */
/* Once the hero is one column the terminal was stretching to the full
   container (≈970px slab). Cap and centre both columns so the stacked
   layout keeps a deliberate measure instead of edge-to-edge sprawl. */
@media (max-width: 1024px) {
  .hero { padding-top: 4rem; padding-bottom: 3.5rem; }
  .hero-inner { gap: 2.75rem; justify-items: center; }
  .hero-copy { max-width: 720px; width: 100%; }
  .hero-visual { max-width: 720px; width: 100%; }
  .hero h1 { max-width: 100%; }
}
@media (max-width: 760px) {
  .hero { padding: 3rem .9rem 2.25rem; }
  .hero-inner { gap: 2.25rem; }
  /* even, tappable rhythm down the stacked hero */
  .hero-cta { margin-bottom: 1.35rem; }
  .hero-assurance { margin: 0 0 1.5rem; gap: .5rem .75rem; }
  .hero-stats { padding-top: 1.35rem; }
  .hero-visual .hero-capabilities { margin-top: 1.1rem; gap: .45rem; }
}

/* ═══════════ v16: lesson step markers (follow-along clarity) ════════ */
/* Every lesson now reads as an explicit sequence, so learners always know
   where they are and what comes next. */
.step-head { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.step-head h2 { margin: 0; }
.lesson-content .step-head h2 { font-size: 1.35rem; letter-spacing: -.02em; }
.step-chip {
  display: inline-flex; align-items: center; flex: 0 0 auto;
  padding: .22rem .68rem; border-radius: 99px;
  color: var(--accent, var(--brand-1));
  background: color-mix(in srgb, var(--accent, var(--brand-1)) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--brand-1)) 28%, transparent);
  font: 800 .66rem/1.5 var(--font); text-transform: uppercase; letter-spacing: .09em;
  white-space: nowrap;
}
.editor-heading .step-chip { margin-bottom: .35rem; }

/* numbered markers in the sidebar step list */
.spy-nav a i {
  width: 19px; height: 19px; flex: 0 0 19px; display: inline-grid; place-items: center;
  border-radius: 50%; background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-dim); font: 800 .64rem/1 var(--font); font-style: normal;
}
.spy-nav a.on i {
  color: #fff; background: var(--accent, var(--brand-1));
  border-color: var(--accent, var(--brand-1));
}

@media (max-width: 640px) {
  .step-head { gap: .55rem; margin-bottom: .8rem; }
  .lesson-content .step-head h2 { font-size: 1.2rem; }
}

/* ═══════════ v17: inline glossary + section entrances ══════════════ */
/* Any jargon in a lesson explains itself — hover, click or tap. */
.gloss {
  display: inline; padding: 0; border: 0; background: none; cursor: help;
  color: inherit; font: inherit;
  border-bottom: 2px dotted color-mix(in srgb, var(--accent, var(--brand-1)) 55%, transparent);
  transition: color .15s, border-color .15s, background .15s;
}
.gloss:hover, .gloss[aria-expanded="true"] {
  color: var(--accent, var(--brand-1));
  border-bottom-color: var(--accent, var(--brand-1));
  background: color-mix(in srgb, var(--accent, var(--brand-1)) 9%, transparent);
  border-radius: 3px;
}
.gloss:focus-visible { outline: 2px solid var(--brand-1); outline-offset: 2px; border-radius: 3px; }
.gloss-pop {
  position: absolute; z-index: 95; padding: .85rem 1rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg);
  animation: glossIn .16s cubic-bezier(.16, 1, .3, 1);
}
@keyframes glossIn { from { opacity: 0; transform: translateY(-5px); } }
.gloss-pop strong { display: block; font-size: .95rem; margin-bottom: .25rem; text-transform: capitalize; }
.gloss-pop p { margin: 0; color: var(--text-dim); font-size: .86rem; line-height: 1.55; }
.gloss-pop p code { font-size: .82em; }
.gloss-pop-foot {
  display: block; margin-top: .6rem; padding-top: .5rem; border-top: 1px solid var(--border);
  color: var(--text-dim); font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em;
}

/* Sections and course cards arrive with a calm, staggered entrance. */
@media (prefers-reduced-motion: no-preference) {
  .js .section-enter { opacity: 0; transform: translateY(26px); }
  .js .section-enter.in {
    opacity: 1; transform: none;
    transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
  }
  /* children stagger in after their section */
  .section-enter.in .course-card,
  .section-enter.in .usecase-card,
  .section-enter.in .learn-card,
  .section-enter.in .project-card { animation: cardRise .6s cubic-bezier(.16, 1, .3, 1) backwards; }
  .section-enter.in .course-card:nth-child(n+2),
  .section-enter.in .usecase-card:nth-child(n+2) { animation-delay: .06s; }
  .section-enter.in .course-card:nth-child(n+4),
  .section-enter.in .usecase-card:nth-child(n+4) { animation-delay: .12s; }
  .section-enter.in .course-card:nth-child(n+7) { animation-delay: .18s; }
}
@keyframes cardRise { from { opacity: 0; transform: translateY(18px); } }

/* lesson sections settle in as you scroll the lesson */
@media (prefers-reduced-motion: no-preference) {
  .lesson-main > section, .lesson-main > .callout-grid { animation: sectionSettle .55s cubic-bezier(.16, 1, .3, 1) backwards; }
  .lesson-main > *:nth-child(n+3) { animation-delay: .05s; }
}
@keyframes sectionSettle { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 640px) {
  .gloss-pop { max-width: calc(100vw - 24px); }
}

/* ═══════════════════ v18: admin portal ═════════════════════════════ */
.admin-wrap { max-width: 1320px; margin: 0 auto; padding: 2rem 1.25rem 4rem; }
.admin-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.75rem;
}
.admin-head h1 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); margin: .35rem 0 .5rem; }
.admin-head p { color: var(--text-dim); max-width: 60ch; }
.admin-head-meta { display: flex; align-items: center; gap: 1rem; color: var(--text-dim); font-size: .84rem; font-weight: 700; }
.admin-live { display: inline-flex; align-items: center; gap: .4rem; }
.admin-live i {
  width: 8px; height: 8px; border-radius: 50%; background: var(--success);
  animation: pulse 1.8s ease infinite;
}
.nav-admin { color: var(--brand-1) !important; }
.nav-admin .ui-icon { width: 15px; height: 15px; }

.admin-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.25rem; }
.admin-kpi { padding: 1.25rem 1.35rem; display: flex; flex-direction: column; gap: .1rem; }
.admin-kpi-icon {
  width: 38px; height: 38px; display: grid; place-items: center; margin-bottom: .5rem;
  border-radius: 11px; color: var(--brand-1); background: var(--tint-1);
}
.admin-kpi-icon .ui-icon { width: 19px; height: 19px; }
.admin-kpi strong { font-size: 1.85rem; line-height: 1.1; color: var(--text); }
.admin-kpi > span { color: var(--text-dim); font-size: .85rem; font-weight: 700; }
.admin-kpi small { color: var(--text-dim); font-size: .74rem; margin-top: .3rem; opacity: .85; }

.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; }
.admin-panel { padding: 1.35rem 1.5rem; }
.admin-panel-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.admin-panel-head h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.05rem; margin: 0; }
.admin-panel-head .ui-icon { width: 17px; height: 17px; color: var(--brand-2); }
.admin-panel-note { color: var(--text-dim); font-size: .76rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em; }
.admin-empty { color: var(--text-dim); font-size: .88rem; padding: 1rem 0; }

/* signup bars */
.admin-bars { display: flex; align-items: flex-end; gap: .3rem; height: 120px; margin-bottom: 1rem; }
.admin-bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; gap: .25rem; }
.admin-bar span {
  width: 100%; min-height: 3px; border-radius: 4px 4px 2px 2px;
  background: linear-gradient(180deg, var(--brand-1), var(--brand-2));
  animation: barGrow .6s cubic-bezier(.16,1,.3,1) backwards;
}
@keyframes barGrow { from { height: 0 !important; } }
.admin-bar b { color: var(--text-dim); font-size: .62rem; font-weight: 700; }
.admin-split { display: flex; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.admin-split div { display: flex; flex-direction: column; }
.admin-split strong { font-size: 1.15rem; }
.admin-split span { color: var(--text-dim); font-size: .74rem; }

/* course engagement + per-member course progress */
.admin-course-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.admin-course-top { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: .4rem; font-size: .9rem; }
.admin-course-top span { color: var(--text-dim); font-size: .8rem; white-space: nowrap; }
.admin-course-list small { display: block; color: var(--text-dim); font-size: .74rem; margin-top: .35rem; }
.progress-track.sm { height: 6px; }
.admin-lessons summary { cursor: pointer; color: var(--text-dim); font-size: .76rem; margin-top: .4rem; }
.admin-lessons ul { list-style: none; margin-top: .5rem; display: flex; flex-direction: column; gap: .3rem; }
.admin-lessons li { display: flex; justify-content: space-between; gap: 1rem; font-size: .8rem; }
.admin-lessons .ui-icon { width: 13px; height: 13px; color: var(--success); }
.admin-lessons small, .admin-simple-list small { color: var(--text-dim); font-size: .72rem; white-space: nowrap; }
.admin-simple-list { list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.admin-simple-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; }

/* member table */
.admin-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.admin-search { display: flex; align-items: center; gap: .45rem; padding: .4rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.admin-search .ui-icon { width: 15px; height: 15px; color: var(--text-dim); }
.admin-search input { border: 0; outline: 0; background: none; color: var(--text); font: 600 .86rem var(--font); width: 190px; }
.admin-tools select { padding: .45rem .7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 700 .82rem var(--font); }
.admin-table-scroll { overflow-x: auto; margin: 0 -.35rem; }
.admin-table { width: 100%; border-collapse: collapse; min-width: 860px; }
.admin-table th, .admin-table td { text-align: left; padding: .8rem .6rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.admin-table thead th { color: var(--text-dim); font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; border-bottom-width: 2px; }
.admin-table tbody tr { transition: background .15s; }
.admin-table tbody tr:hover { background: var(--surface-2); }
.admin-member { display: flex; align-items: center; gap: .7rem; color: var(--text); }
.admin-member:hover { text-decoration: none; }
.admin-member strong { display: block; font-size: .92rem; }
.admin-member small { color: var(--text-dim); font-size: .74rem; }
.admin-avatar {
  width: 36px; height: 36px; flex: 0 0 36px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: var(--brand-grad);
  font-weight: 800; font-size: .95rem;
}
.admin-avatar.xl { width: 64px; height: 64px; flex-basis: 64px; font-size: 1.6rem; }
.admin-pill {
  display: inline-block; padding: .06rem .4rem; border-radius: 99px; font-style: normal;
  color: #fff; background: var(--brand-1); font-size: .6rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; vertical-align: .12em;
}
.admin-level { color: var(--text-dim); font-size: .8rem; font-weight: 700; white-space: nowrap; }
.admin-num { font-variant-numeric: tabular-nums; font-weight: 800; white-space: nowrap; }
.admin-num .ui-icon { width: 13px; height: 13px; color: var(--warn); }
.admin-progress { min-width: 190px; }
.admin-progress small { display: block; color: var(--text-dim); font-size: .72rem; margin-top: .3rem; }
.admin-open { color: var(--brand-1); font-weight: 800; font-size: .82rem; white-space: nowrap; }
.admin-foot { margin-top: 1.5rem; color: var(--text-dim); font-size: .78rem; display: flex; align-items: center; gap: .45rem; }
.admin-foot .ui-icon { width: 14px; height: 14px; }
.admin-foot code { font-size: .76rem; }

/* member detail */
.admin-member-head { display: flex; align-items: center; gap: 1.5rem; padding: 1.5rem; margin: .75rem 0 1.25rem; flex-wrap: wrap; }
.admin-member-id { flex: 1; min-width: 240px; }
.admin-member-id h1 { font-size: 1.7rem; margin-bottom: .2rem; }
.admin-member-id p { color: var(--text-dim); font-size: .9rem; margin-bottom: .6rem; }
.admin-member-level { min-width: 190px; text-align: right; }
.admin-member-level strong { font-size: 2rem; color: var(--brand-1); }
.admin-member-level > span { display: block; color: var(--text-dim); font-size: .82rem; font-weight: 700; margin-bottom: .5rem; }
.admin-member-level small { display: block; color: var(--text-dim); font-size: .72rem; margin-top: .35rem; }
.admin-badges { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
.admin-badges li { display: flex; align-items: center; gap: .7rem; }
.admin-badge-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: var(--warn); background: color-mix(in srgb, var(--warn) 12%, transparent); }
.admin-badge-icon .ui-icon { width: 17px; height: 17px; }
.admin-badges strong { display: block; font-size: .88rem; }
.admin-badges small { color: var(--text-dim); font-size: .72rem; }

@media (max-width: 1024px) {
  .admin-kpis { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .admin-wrap { padding: 1.25rem .85rem 3rem; }
  .admin-kpis { gap: .7rem; }
  .admin-kpi { padding: 1rem; }
  .admin-kpi strong { font-size: 1.5rem; }
  .admin-tools { width: 100%; }
  .admin-search { flex: 1; }
  .admin-search input { width: 100%; }
  .admin-member-head { gap: 1rem; }
  .admin-member-level { text-align: left; width: 100%; }
}

/* ═══════════ v19: personalised hero progress cockpit ═══════════════ */
/* Returning learners see their own momentum instead of marketing stats. */
.hero-progress {
  display: grid; grid-template-columns: auto 1fr; gap: 1rem 1.35rem;
  align-items: center; padding-top: 1.5rem; border-top: 1px solid var(--border);
}
.hp-ring { position: relative; width: 72px; height: 72px; display: grid; place-items: center; }
.hp-ring svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.hp-ring circle { fill: none; stroke-width: 5; stroke-linecap: round; }
.hp-track { stroke: var(--border); }
.hp-fill {
  stroke: url(#hpGrad); stroke: var(--brand-1);
  animation: hpFill 1.1s cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes hpFill { from { stroke-dasharray: 0 195; } }
.hp-ring b { font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--brand-1); }
.hp-ring small {
  position: absolute; bottom: -1.15rem; left: 50%; translate: -50% 0;
  color: var(--text-dim); font-size: .64rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .07em; white-space: nowrap;
}
.hp-stats { display: flex; gap: 1.75rem; flex-wrap: wrap; }
.hp-stat strong {
  display: flex; align-items: center; gap: .3rem;
  font-size: 1.35rem; color: var(--text); line-height: 1.15;
}
.hp-stat strong em { font-style: normal; color: var(--text-dim); font-size: .9rem; font-weight: 700; }
.hp-stat strong .ui-icon { width: 17px; height: 17px; color: var(--brand-1); }
.hp-stat:first-child strong .ui-icon { color: var(--warn); }
.hp-stat span { display: block; color: var(--text-dim); font-size: .74rem; margin-top: .1rem; }
.hp-course { grid-column: 1 / -1; margin-top: .35rem; }
.hp-course span { display: block; color: var(--text-dim); font-size: .74rem; margin-top: .4rem; }

@media (max-width: 760px) {
  .hero-progress { gap: .85rem 1rem; padding-top: 1.35rem; }
  .hp-stats { gap: 1.1rem; }
  .hp-stat strong { font-size: 1.15rem; }
  .hp-ring { width: 60px; height: 60px; }
  .hp-ring b { font-size: 1.1rem; }
}

/* ═══════════ v20: accessibility, focus & interaction polish ════════ */
/* A single, consistent focus ring everywhere. Keyboard and screen-reader
   users could previously tab through most of the site with almost no
   visible indication of where they were. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--brand-1) 70%, transparent);
  outline-offset: 2px;
  border-radius: 6px;
}
/* cards and rows that are themselves links get the ring on their real shape */
:where(.course-card, .project-card, .challenge-card, .course-row, .lesson-row,
       .usecase-card, .dash-course, .admin-member, .resume-chip):focus-visible {
  outline-offset: 3px;
  border-radius: var(--radius);
}
.btn:focus-visible { outline-offset: 3px; }
/* dark surfaces need a lighter ring to stay visible */
:where(.method-section, .project-showcase, .cta-band, .global-cta, .footer,
       .hero-terminal, .playground-ide) :where(a, button):focus-visible {
  outline-color: color-mix(in srgb, #7dd3fc 85%, transparent);
}

/* the skip link should be unmissable once focused */
.skip-link:focus, .skip-link:focus-visible {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  width: auto; height: auto; padding: .75rem 1.1rem; clip: auto; overflow: visible;
  color: #fff; background: var(--brand-1); border-radius: 10px;
  font-weight: 800; box-shadow: var(--shadow-lg); outline: 3px solid #fff;
}

/* screen-reader-only helper used by table headers etc. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* pointer feedback: everything clickable should feel clickable */
.btn:active { transform: translateY(1px); }
:where(.course-card, .project-card, .challenge-card, .usecase-card):active { transform: translateY(-2px) scale(.995); }

/* honour reduced motion for the interaction flourishes too */
@media (prefers-reduced-motion: reduce) {
  .btn:active, .course-card:active, .project-card:active,
  .challenge-card:active, .usecase-card:active { transform: none; }
}

/* ── challenge page: match the page header's measure + real navigation ── */
.challenge-page { max-width: 1180px; margin: 0 auto; padding: 2rem 1.25rem 3rem; }
.challenge-nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 1rem; margin-top: 1.5rem;
}
.challenge-nav .cn-next { justify-self: end; text-align: right; }
.challenge-nav a {
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .7rem 1.1rem; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface); color: var(--text); max-width: 100%;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.challenge-nav a:hover {
  text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow);
  border-color: color-mix(in srgb, var(--brand-1) 40%, var(--border));
}
.challenge-nav small { color: var(--text-dim); font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.challenge-nav strong { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.challenge-nav .cn-all { color: var(--text-dim); font-weight: 800; font-size: .85rem; border: 0; background: none; padding: .5rem; }
.challenge-nav .cn-all:hover { color: var(--brand-1); transform: none; box-shadow: none; }

@media (max-width: 700px) {
  .challenge-nav { grid-template-columns: 1fr; }
  .challenge-nav .cn-next { justify-self: stretch; text-align: left; }
  .challenge-nav .cn-all { order: 3; text-align: center; }
}

/* 404: give a lost visitor somewhere useful to go, not just one button */
.error-actions {
  display: grid; gap: .55rem; width: 100%;
  margin: 1.35rem 0 1.5rem; text-align: left;
}
.error-action {
  display: flex; align-items: center; gap: .8rem; padding: .8rem .95rem;
  border: 1px solid var(--border); border-radius: 12px; color: var(--text);
  background: var(--surface-2);
  transition: transform .15s, border-color .15s, background .15s;
}
.error-action:hover {
  text-decoration: none; transform: translateX(3px);
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand-1) 40%, var(--border));
}
.error-action > span {
  width: 34px; height: 34px; flex: 0 0 34px; display: grid; place-items: center;
  border-radius: 10px; color: var(--brand-1); background: var(--tint-1);
}
.error-action .ui-icon { width: 17px; height: 17px; }
.error-action strong { display: block; font-size: .9rem; }
.error-action small { color: var(--text-dim); font-size: .76rem; }
.error-tip { margin-top: 1rem; color: var(--text-dim); font-size: .78rem; }
.error-tip kbd {
  font: 700 .7rem var(--mono); color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 5px; padding: .06rem .32rem;
}

/* ═══════════ touch targets & narrow-phone nav ══════════════════════
   Sized by input device, not viewport: a 27px chip is fine with a mouse
   and too small for a thumb, and a large phone is still a touch device.
   ~44px is the Apple HIG minimum, 48dp the Material one; 40px is the
   floor used here so dense toolbars stay usable. */
@media (pointer: coarse) {
  .btn, a.btn, button.btn { min-height: 42px; }
  .btn-sm { min-height: 42px; padding-inline: 1rem; }
  .chip, .scenario-chip { min-height: 42px; display: inline-flex; align-items: center; }
  .hero-console .scenario-chip { min-height: 40px; padding-inline: .7rem; }
  .copy-btn { min-height: 40px; padding: .5rem .85rem; }
  /* the playground console's Copy/Clear are bare <button>s */
  .console-tools button { min-height: 40px; padding-inline: .8rem; }
  .ide-tool, .ide-action { min-height: 40px; }
  .ide-action.compact { min-width: 40px; }
  .text-button { min-height: 40px; display: inline-flex; align-items: center; }
  .cmdk-btn, .theme-toggle, .nav-burger { width: 42px; height: 42px; }
  .nav-links > a, .nav-menu-trigger { min-height: 46px; }
  .quiz-opt { min-height: 46px; }
  .cmdk-item { min-height: 50px; }
}

/* Those larger controls must still fit a 320px bar, which was already
   overflowing by 27px before they grew. Trim the brand and the gaps
   rather than dropping a control. */
@media (max-width: 400px) {
  .nav-inner { padding-inline: .6rem; gap: .6rem; }
  .nav-right { gap: .35rem; }
  .brand { gap: .4rem; font-size: 1.02rem; }
  .brand-mark { width: 30px; height: 30px; }
}
@media (max-width: 340px) {
  .brand-name { font-size: .9em; }
  .cmdk-btn, .theme-toggle, .nav-burger { width: 38px; height: 38px; }
}

/* ═══════════ mobile drawer: size to content, read as a menu ════════
   The panel was locked to calc(100dvh - 99px) with the CTA pushed down by
   margin-top:auto, so three items left ~570px of empty white above a
   stranded button. Size it to what it holds instead. */
.nav-lead { display: inline-flex; align-items: center; gap: .6rem; }
.nav-lead .ui-icon { display: none; }          /* drawer-only */

@media (max-width: 760px) {
  .nav-links {
    height: auto;
    max-height: calc(100dvh - 99px);
    padding: .6rem .75rem 1rem;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 18px 40px rgba(15, 23, 42, .16);
  }
  .nav-links.open { flex-direction: column; }

  /* one consistent row, with its icon showing */
  .nav-lead .ui-icon { display: block; width: 20px; height: 20px; color: var(--text-dim); flex-shrink: 0; }
  .nav-links > a, .nav-menu-trigger {
    min-height: 54px; border-radius: 12px; font-weight: 600;
  }
  .nav-links > a.active .nav-lead .ui-icon,
  .nav-menu-trigger.active .nav-lead .ui-icon { color: var(--brand-1); }
  .nav-links > a + a { margin-top: 2px; }

  /* the CTA follows the list instead of being pinned to the viewport floor */
  .mobile-nav-cta {
    margin-top: .85rem; padding-top: .9rem;
    border-top: 1px solid var(--border);
    display: grid; gap: .5rem;
  }
  .mobile-nav-cta .btn { min-height: 50px; }
  .mobile-nav-secondary { color: var(--text) !important; }
}

/* ═══════════ feature artwork on phones ═════════════════════════════
   The illustrations are 1600x900 on a flat #07152f field. Forcing them
   into a ~390x300 box with object-fit:cover sliced the tiles off both
   edges. Let them keep their own aspect ratio instead — the matching
   background means there is no visible letterbox. */
@media (max-width: 760px) {
  .directory-hero > img,
  .path-feature > img,
  .project-showcase > img {
    height: auto; min-height: 0; max-height: none;
    aspect-ratio: 16 / 9;
    object-fit: contain;
    background: #07152f;
  }
  .directory-dark > img { object-position: center; }
}

/* ═══════════ 320px: let grid tracks actually shrink ════════════════
   A `1fr` track floors at min-content, so the three-up hero stats held
   the hero open at 393px inside a 320px viewport. minmax(0, 1fr) lets
   them collapse. */
@media (max-width: 760px) {
  .hero-copy, .hero-inner > * { min-width: 0; }
  .hero-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 360px) {
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem .7rem; }
  .hero-stats span { font-size: .68rem; }
  .hero h1 { font-size: clamp(2rem, 11vw, 4rem); overflow-wrap: break-word; }
}

/* Inline glossary triggers sit inside running prose. Giving them a 40px
   box would break the line rhythm of every paragraph they appear in, so
   they keep their text size — the touch-target floor is for standalone
   controls, not words in a sentence. */

/* Card grids get an explicit shrink floor for the same reason as the hero
   stats above — an auto min-width stops a track collapsing on small phones. */
@media (max-width: 760px) {
  .project-grid, .project-grid > *, .course-grid, .course-grid > * { min-width: 0; }
}

/* ═══════════ lesson layout below desktop ══════════════════════════
   `.lesson-layout { grid-template-columns: 240px minmax(0,1fr) }` is
   declared later in this file than the max-width:1024px rule that
   collapses it, so it won at every width. With `.lesson-side` hidden the
   article was landing in the 240px track and leaving the second one empty
   — roughly a fifth of a phone screen blank beside every lesson. This has
   to come last to win. */
@media (max-width: 1024px) {
  .lesson-layout { grid-template-columns: minmax(0, 1fr); max-width: 900px; }
}

/* ── generated artwork placements ─────────────────────────────────── */
/* The artwork sits behind the panel's gradient rather than in the flow.
   As an <img> with max-width but no height:auto it kept its intrinsic
   1040px height, stretching the whole page to 2070px. A background layer
   cannot affect layout height at all. */
.auth-context { position: relative; overflow: hidden; isolation: isolate; }
.auth-context::after {
  content: ''; position: absolute; z-index: -1;
  right: -7%; bottom: -9%; width: min(76%, 440px); aspect-ratio: 16 / 9;
  background: url('/static/images/auth-visual.png') center / contain no-repeat;
  /* The artwork has a flat navy field. Laying it over the panel at partial
     opacity just lightened that rectangle, leaving a visible seam. `screen`
     drops near-black to nothing and keeps only the lit tiles, and the mask
     dissolves the edges so nothing ends on a straight line. */
  mix-blend-mode: screen;
  opacity: .9;
  -webkit-mask-image: radial-gradient(closest-side at 62% 58%, #000 42%, transparent 92%);
  mask-image: radial-gradient(closest-side at 62% 58%, #000 42%, transparent 92%);
  pointer-events: none;
}
@media (max-width: 900px) { .auth-context::after { display: none; } }

/* An atmospheric wash behind the closing call to action — damped and
   blurred so white text still reads cleanly on top. */
.cta-band {
  position: relative; overflow: hidden; isolation: isolate;
}
.cta-band::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-image: url('/static/images/mesh-bg.jpg');
  background-size: cover; background-position: center;
  mix-blend-mode: screen; opacity: .55;
}

/* ═══════════ /start — onboarding for absolute beginners ════════════ */
.start-h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); letter-spacing: -.03em; margin: .3rem 0 .6rem; }
.start-lede { color: var(--text-dim); max-width: 60ch; margin-bottom: 1.6rem; }

.faq-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 1rem; margin-top: 1.5rem;
}
.faq-card { padding: 1.4rem; }
.faq-card h3 {
  display: flex; align-items: center; gap: .55rem;
  font-size: 1.02rem; margin-bottom: .5rem;
}
.faq-card h3 .ui-icon { width: 20px; height: 20px; color: var(--brand-1); flex-shrink: 0; }
.faq-card p { color: var(--text-dim); font-size: .94rem; }

.start-editor { overflow: hidden; margin-top: 1rem; }
.start-editor .editor-chrome { border-radius: var(--radius) var(--radius) 0 0; }
.start-editor .code-output { border-radius: 0 0 var(--radius) var(--radius); }
.start-editor:has(.try-win:not([hidden])) .code-output { border-radius: 0; }

.method-list { list-style: none; display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.method { display: flex; gap: 1.1rem; padding: 1.5rem; align-items: flex-start; }
.method-num {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; font-weight: 900;
  background: var(--tint-1); color: var(--brand-1);
}
.method h3 { font-size: 1.08rem; margin-bottom: .4rem; }
.method p { color: var(--text-dim); font-size: .95rem; }
.method strong { color: var(--text); }

.week-plan { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 1rem; margin-top: 1.4rem; }
.week-plan li { padding: 1.3rem; display: flex; flex-direction: column; gap: .4rem; }
.week-plan b {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--brand-1);
}
.week-plan span { color: var(--text-dim); font-size: .93rem; }
.start-final { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 2rem; }

/* the zero-experience door on the home hero */
.hero-beginner {
  display: flex; align-items: center; gap: .85rem;
  max-width: 560px; margin-top: 1.1rem; padding: .95rem 1.1rem;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-1); border-radius: 14px;
  color: var(--text); font-size: .92rem; line-height: 1.45;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.hero-beginner:hover {
  text-decoration: none; transform: translateY(-2px);
  box-shadow: var(--shadow); border-color: var(--brand-1);
}
.hero-beginner .ui-icon { width: 26px; height: 26px; color: var(--brand-1); flex-shrink: 0; }
.hero-beginner span { flex: 1; color: var(--text-dim); }
.hero-beginner b { color: var(--text); }
.hero-beginner-go { color: var(--brand-1); font-size: 1.1rem; transition: transform .16s; }
.hero-beginner:hover .hero-beginner-go { transform: translateX(4px); }
@media (max-width: 640px) { .hero-beginner { font-size: .88rem; padding: .85rem .9rem; } }

.playground-art {
  width: 260px; height: auto; border-radius: 16px;
  border: 1px solid var(--border); flex-shrink: 0; align-self: center;
}
.dashboard-head { display: flex; align-items: center; gap: 2rem; justify-content: space-between; }
.dash-head-copy { min-width: 0; }
.dash-art {
  width: 300px; height: auto; border-radius: 18px;
  border: 1px solid var(--border); flex-shrink: 0;
}
@media (max-width: 900px) { .playground-art, .dash-art { display: none; } }

/* ═══════════ /cheatsheet ═══════════════════════════════════════════ */
.cheat-controls {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem;
  margin-bottom: 1.6rem;
}
.cheat-search {
  position: relative; display: flex; align-items: center; gap: .55rem;
  flex: 1 1 320px; min-width: 0;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: .1rem .9rem;
}
.cheat-search:focus-within { border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--tint-1); }
.cheat-search .ui-icon { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
#cheatSearch {
  flex: 1; min-width: 0; border: none; background: none; outline: none;
  font-family: var(--font); font-size: 1rem; color: var(--text);
  padding: .75rem 0;
}
.cheat-clear { background: none; border: none; cursor: pointer; color: var(--text-dim); padding: .3rem; }
.cheat-clear .ui-icon { width: 16px; height: 16px; }
.cheat-chips { display: flex; flex-wrap: wrap; gap: .45rem; }
.cheat-count { color: var(--text-dim); font-size: .88rem; font-weight: 600; margin-left: auto; }

.cheat-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(360px, 100%), 1fr));
  gap: 1.1rem; align-items: start;
}
.cheat-card { padding: 1.25rem; display: flex; flex-direction: column; gap: .6rem; }
.cheat-card[hidden] { display: none; }
.cheat-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; }
.cheat-card-head h3 { font-size: 1.02rem; letter-spacing: -.01em; }
.cheat-cat {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .07em;
  color: var(--brand-1); background: var(--tint-1);
  padding: .2rem .5rem; border-radius: 99px; white-space: nowrap; flex-shrink: 0;
}
.cheat-blurb { color: var(--text-dim); font-size: .9rem; }
.cheat-code, .cheat-out {
  margin: 0; padding: .8rem .95rem; border-radius: 12px; overflow-x: auto;
  font-family: var(--mono); font-size: .84rem; line-height: 1.55;
  white-space: pre; tab-size: 4;
}
.cheat-code { background: #0d1322; color: #dbeafe; border: 1px solid #263049; }
.cheat-out {
  background: #080c16; color: #a7f3d0; border: 1px solid #1b2740;
  position: relative;
}
.cheat-out::before {
  content: 'output'; position: absolute; top: .35rem; right: .6rem;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: #4b5b78;
}
.cheat-actions { display: flex; gap: .5rem; margin-top: auto; padding-top: .2rem; }
.cheat-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font); font-weight: 700; font-size: .8rem;
  padding: .45rem .8rem; border-radius: 9px; cursor: pointer;
  text-decoration: none !important;
}
.cheat-btn:hover { border-color: var(--brand-1); color: var(--brand-1); }
.cheat-btn .ui-icon { width: 14px; height: 14px; }
.cheat-empty { text-align: center; color: var(--text-dim); padding: 3rem 1rem; }

@media (max-width: 640px) {
  .cheat-controls { gap: .7rem; }
  .cheat-count { margin-left: 0; }
  .cheat-chips { overflow-x: auto; flex-wrap: nowrap; padding-bottom: .25rem; }
  .cheat-chips .chip { flex: 0 0 auto; }
  .cheat-card { padding: 1rem; }
  .cheat-code, .cheat-out { font-size: .8rem; }
}

/* The playground hero is a space-between row; adding artwork to it pushed
   the capability chips past the viewport at ~1280px. Let it wrap instead. */
.playground-hero { flex-wrap: wrap; }
.playground-hero > * { min-width: 0; }
.playground-proof { flex-wrap: wrap; }
.playground-art { width: 220px; }
@media (max-width: 1180px) { .playground-art { display: none; } }

@media (pointer: coarse) {
  .cheat-btn { min-height: 42px; padding-inline: .95rem; }
  #cheatSearch { font-size: 16px; }   /* 16px stops iOS zoom-on-focus */
}

/* password reveal */
.pw-field { position: relative; display: block; }
.pw-field input { width: 100%; padding-right: 4.4rem; }
.pw-toggle {
  position: absolute; top: 50%; right: .5rem; transform: translateY(-50%);
  background: none; border: none; cursor: pointer;
  font-family: var(--font); font-size: .78rem; font-weight: 800;
  color: var(--brand-1); padding: .45rem .55rem; border-radius: 7px;
}
.pw-toggle:hover { background: var(--tint-1); }
@media (pointer: coarse) { .pw-toggle { min-height: 40px; padding-inline: .7rem; } }

/* ── home: the three practice surfaces ────────────────────────────── */
.practice-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1.1rem; margin-top: 2rem;
}
.practice-card {
  display: flex; flex-direction: column; gap: .45rem; padding: 1.6rem;
  color: var(--text); border-top: 3px solid var(--brand-1);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.practice-card:hover {
  text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-lg);
}
.practice-icon {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--tint-1); color: var(--brand-1); margin-bottom: .3rem;
}
.practice-icon .ui-icon { width: 22px; height: 22px; }
.practice-stat { font-size: 2.1rem; line-height: 1; letter-spacing: -.03em; }
.practice-label {
  font-size: .72rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--text-dim);
}
.practice-card h3 { font-size: 1.12rem; margin-top: .5rem; }
.practice-card p { color: var(--text-dim); font-size: .93rem; flex: 1; }
.practice-go {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 800; font-size: .9rem; color: var(--brand-1); margin-top: .5rem;
}
.practice-go .ui-icon { width: 16px; height: 16px; transition: transform .18s; }
.practice-card:hover .practice-go .ui-icon { transform: translateX(4px); }

/* ── curated external resources ───────────────────────────────────── */
.resources-section { border-top: 1px solid var(--border); margin-top: 1rem; }
.resource-group {
  font-size: .74rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-dim); margin: 2rem 0 .9rem;
}
.resource-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: 1rem;
}
.resource-card {
  display: flex; flex-direction: column; gap: .5rem; padding: 1.3rem;
  color: var(--text); transition: transform .16s, box-shadow .16s, border-color .16s;
}
.resource-card:hover {
  text-decoration: none; transform: translateY(-3px);
  box-shadow: var(--shadow); border-color: var(--brand-1);
}
.resource-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.resource-icon {
  width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: var(--tint-1); color: var(--brand-1);
}
.resource-icon .ui-icon { width: 19px; height: 19px; }
.resource-cost {
  font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-dim); background: var(--surface-2);
  border: 1px solid var(--border); padding: .22rem .55rem; border-radius: 99px;
  white-space: nowrap;
}
.resource-name { display: flex; align-items: center; gap: .4rem; font-size: 1.02rem; }
.resource-out { width: 14px; height: 14px; color: var(--text-dim); transition: transform .16s; }
.resource-card:hover .resource-out { transform: translate(3px, -3px); color: var(--brand-1); }
.resource-card p { color: var(--text-dim); font-size: .9rem; }

/* ═══════════ account menu ═════════════════════════════════════════ */
.account-wrap { position: relative; flex-shrink: 0; }
.account-btn {
  display: flex; align-items: center; gap: .3rem;
  background: none; border: 1px solid transparent; cursor: pointer;
  padding: .18rem .3rem .18rem .18rem; border-radius: 99px;
  transition: background .15s, border-color .15s;
}
.account-btn:hover, .account-btn.on { background: var(--surface-2); border-color: var(--border); }
.account-caret { color: var(--text-dim); font-size: .8rem; line-height: 1; }
.account-avatar {
  width: 32px; height: 32px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-weight: 800; font-size: .9rem;
}
.account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.account-avatar.lg { width: 44px; height: 44px; font-size: 1.15rem; }

.account-menu {
  position: absolute; top: calc(100% + .5rem); right: 0; z-index: 70;
  min-width: 262px; padding: .45rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: .1rem;
  animation: menuPop .16s cubic-bezier(.16, 1, .3, 1);
}
.account-menu[hidden] { display: none; }
@keyframes menuPop { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.account-id { display: flex; align-items: center; gap: .65rem; padding: .6rem .65rem .5rem; }
.account-id-text { min-width: 0; display: flex; flex-direction: column; }
.account-id-text strong { font-size: .95rem; }
.account-id-text small { color: var(--text-dim); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-meta {
  display: flex; gap: .8rem; padding: 0 .65rem .6rem;
  font-size: .78rem; font-weight: 700; color: var(--text-dim);
  border-bottom: 1px solid var(--border); margin-bottom: .35rem;
}
.account-meta span { display: inline-flex; align-items: center; gap: .25rem; }
.account-meta .ui-icon { width: 13px; height: 13px; }
.account-menu > a {
  display: flex; align-items: center; gap: .6rem;
  padding: .6rem .65rem; border-radius: 9px;
  color: var(--text); font-size: .9rem; font-weight: 600; text-decoration: none !important;
}
.account-menu > a:hover { background: var(--surface-2); }
.account-menu > a .ui-icon { width: 17px; height: 17px; color: var(--text-dim); flex-shrink: 0; }
.account-menu > a:hover .ui-icon { color: var(--brand-1); }
.account-sep { height: 1px; background: var(--border); margin: .35rem .3rem; }
.account-logout { color: var(--danger) !important; }
.account-logout .ui-icon { color: var(--danger) !important; }
@media (pointer: coarse) { .account-menu > a { min-height: 46px; } .account-btn { min-height: 42px; } }

/* ═══════════ profile page ═════════════════════════════════════════ */
.profile-wrap { display: flex; flex-direction: column; gap: 1.25rem; }
.profile-summary { display: flex; align-items: center; gap: 1.3rem; padding: 1.6rem; flex-wrap: wrap; }
.profile-avatar-lg {
  width: 96px; height: 96px; border-radius: 24px; overflow: hidden; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-grad); color: #fff; font-weight: 900; font-size: 2.4rem;
}
.profile-avatar-lg img { width: 100%; height: 100%; object-fit: cover; display: block; }
.profile-summary-body { min-width: 0; flex: 1; }
.profile-summary-body h2 { font-size: 1.5rem; letter-spacing: -.02em; }
.profile-facts { display: flex; flex-wrap: wrap; gap: .9rem; margin: .7rem 0 .5rem; font-size: .88rem; font-weight: 700; }
.profile-facts span { display: inline-flex; align-items: center; gap: .35rem; }
.profile-facts .ui-icon { width: 15px; height: 15px; color: var(--brand-1); }
.profile-since { font-size: .82rem; }

.profile-card { padding: 1.6rem; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.profile-card h2 { display: flex; align-items: center; gap: .5rem; font-size: 1.1rem; }
.profile-card h2 .ui-icon { width: 19px; height: 19px; color: var(--brand-1); }
.profile-card label { width: 100%; max-width: 360px; font-weight: 700; font-size: .85rem; display: flex; flex-direction: column; gap: .35rem; }
.profile-card input[type="text"], .profile-card input[type="password"] {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text);
  border-radius: 10px; padding: .7rem .85rem; font-size: .95rem; font-family: var(--font); width: 100%;
}
.profile-card input:focus { outline: none; border-color: var(--brand-1); box-shadow: 0 0 0 3px var(--tint-1); }
.field-help { font-size: .8rem; color: var(--text-dim); }
.profile-h2 { margin-top: 1rem; }
.form-ok {
  background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3);
  color: #0b7a5b; padding: .7rem 1rem; border-radius: 12px; font-weight: 600;
  display: flex; align-items: center; gap: .5rem;
}
[data-theme="dark"] .form-ok { color: #6ee7b7; }

.avatar-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin: .3rem 0 1rem; }
/* Each swatch is a <label>, so the form-label rule above was giving it
   width:100%/max-width:360px and forcing two per row. */
.avatar-opt {
  position: relative; cursor: pointer; line-height: 0;
  width: auto !important; max-width: none !important;
  display: inline-block; flex-direction: row;
}
.avatar-opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.avatar-swatch {
  width: 64px; height: 64px; border-radius: 16px; display: block;
  border: 3px solid transparent; box-shadow: 0 0 0 1px var(--border);
  transition: transform .15s, border-color .15s;
}
.avatar-initial { display: grid; place-items: center; background: var(--brand-grad); color: #fff; }
.avatar-initial b { font-size: 1.5rem; font-weight: 900; }
.avatar-opt:hover .avatar-swatch { transform: translateY(-3px); }
.avatar-opt input:checked + .avatar-swatch,
.avatar-opt input:checked ~ .avatar-swatch { border-color: var(--brand-1); box-shadow: 0 0 0 4px var(--tint-1); }
.avatar-opt input:focus-visible ~ .avatar-swatch { outline: 2px solid var(--brand-1); outline-offset: 3px; }

.danger-zone { border-color: rgba(244,63,94,.35); }
.danger-zone h2 .ui-icon { color: var(--danger); }
.danger-details summary {
  cursor: pointer; font-weight: 700; color: var(--danger); padding: .5rem 0; font-size: .92rem;
}
.danger-form { display: flex; flex-direction: column; gap: .8rem; margin-top: .8rem; max-width: 360px; }
.profile-legal { font-size: .85rem; text-align: center; }
.legal-switch { display: flex; gap: .5rem; margin-top: 1rem; }
.legal-body h2 { margin-top: 2rem; }
.legal-table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .92rem; }
.legal-table th, .legal-table td { text-align: left; padding: .6rem .7rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.legal-table th { font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
@media (max-width: 640px) {
  .profile-summary { gap: 1rem; }
  .profile-avatar-lg { width: 72px; height: 72px; font-size: 1.9rem; border-radius: 20px; }
  .avatar-swatch { width: 56px; height: 56px; }
  .profile-card { padding: 1.2rem; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table td, .legal-table th { display: block; }
  .legal-table thead { display: none; }
  .legal-table tr { border-bottom: 1px solid var(--border); padding: .6rem 0; }
  .legal-table td { border: none; padding: .15rem 0; }
  .legal-table td:first-child { font-weight: 700; }
}

/* the Google photo option carries a small label so it is identifiable */
.avatar-opt { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; }
.avatar-tag {
  font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-dim); line-height: 1;
}

/* ── Header hierarchy ──────────────────────────────────────────────────
   Five identically-weighted text links gave a visitor no way to tell the
   two section entrances from the three flat pages, so everything read as
   equally important — which is the same as nothing being important. The
   bar now resolves into two groups: the mega-menu triggers carry their
   icon and full ink, the flat pages sit quieter behind a hairline rule.
   Scoped to >=901px: the drawer runs all the way to 900px (see the
   min-width:761/max-width:1000 block above), not 760 as the icon rule
   beside it assumed, so anything lower leaks a vertical hairline and
   shrunken link text into the drawer. */
@media (min-width: 1001px) {
  .nav-links { align-items: center; gap: .15rem; }

  /* Primary — the two doors into the product */
  .nav-menu-trigger { color: var(--text); font-weight: 700; }
  .nav-menu-trigger .nav-lead { gap: .5rem; }
  .nav-menu-trigger .ui-icon {
    display: block; width: 18px; height: 18px; flex-shrink: 0;
    color: var(--text-dim); transition: color .15s;
  }
  .nav-menu-trigger:hover .ui-icon,
  .nav-menu-trigger.active .ui-icon,
  .nav-menu-trigger[aria-expanded="true"] .ui-icon { color: var(--brand-1); }
  /* the chevron is an affordance, not content — let it recede */
  .nav-menu-trigger > span[aria-hidden] { font-size: .72em; opacity: .5; }

  /* Secondary — flat pages, one step quieter than the menus */
  .nav-links > a { font-weight: 600; font-size: .875rem; color: var(--text-dim); }
  .nav-links > a:hover { color: var(--text); }

  /* Hairline where the section menus end and the flat pages begin */
  .nav-links > a.nav-start { margin-left: .5rem; padding-left: 1rem; position: relative; }
  .nav-links > a.nav-start::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 1px; height: 18px; background: var(--border);
  }

  /* Where you are, unmistakably — colour carries it, not weight */
  .nav-links > a.active, .nav-menu-trigger.active {
    color: var(--brand-1); background: var(--tint-1);
  }
}

/* The drawer spans two media blocks (<=760 and 761-1000) but only the first
   turned its icons on, so the upper band rendered the same drawer as bare
   text. The upper bound was 900px, but the horizontal bar does not actually
   fit until ~1000px -- at 901px it overflowed the viewport by 48px even
   before the icons were added -- so the drawer now holds until it does. */
@media (min-width: 761px) and (max-width: 1000px) {
  .nav-lead .ui-icon {
    display: block; width: 20px; height: 20px;
    color: var(--text-dim); flex-shrink: 0;
  }
  .nav-links > a.active .nav-lead .ui-icon,
  .nav-menu-trigger.active .nav-lead .ui-icon { color: var(--brand-1); }
}

/* Just above the drawer the bar fits, but only barely -- at 1001px it still
   ran 5px past the viewport. Tighten the horizontal padding through that
   band rather than hand another 100px of width back to the drawer. */
@media (min-width: 1001px) and (max-width: 1100px) {
  .nav-links > a, .nav-menu-trigger { padding-inline: .58rem; }
  .nav-links > a.nav-start { margin-left: .3rem; padding-left: .72rem; }
  .nav-inner { gap: .5rem; }
}