/* ── Variables ────────────────────────────────────────────────────────────── */
:root {
    /* Light mode (default) — warm ivory with indigo accents */
    --bg:         #F6F5F1;
    --bg-card:    #FFFFFF;
    --bg-sidebar: #EFEEE9;
    --text:       #1C1C22;
    --text-dim:   #64677A;
    --accent:     #6366F1;
    --accent-dim: rgba(99, 102, 241, 0.07);
    --violet:     #7C3AED;
    --red:        #E11D48;
    --green:      #059669;
    --orange:     #D97706;
    --cyan:       #0891B2;
    --border:     rgba(0,0,0,0.08);
    --radius:     12px;
    /* Theme-dependent helpers */
    --card-subtle:    rgba(99, 102, 241, 0.02);
    --card-hover:     rgba(99, 102, 241, 0.04);
    --grid-bg:        rgba(0,0,0,0.05);
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.04), 0 1px 4px rgba(99,102,241,0.03);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.06), 0 2px 6px rgba(99,102,241,0.04);
    --glow-strength:  0.06;
    --input-bg:       #F2F1ED;
    --overlay-bg:     rgba(28,28,34,0.30);
}

[data-theme="dark"] {
    /* Surface hierarchy (deep → elevated) */
    --bg:         #050508;
    --bg-card:    #12141C;
    --bg-sidebar: #0C0D12;
    --bg-elevated:#1A1D28;
    /* Text */
    --text:       #F1F2F6;
    --text-dim:   #64748B;
    /* Brand colors */
    --accent:     #818CF8;
    --accent-dim: rgba(129, 140, 248, 0.10);
    --violet:     #A78BFA;
    --pink:       #EC4899;
    --red:        #FB7185;
    --green:      #34D399;
    --orange:     #FBBF24;
    --cyan:       #22D3EE;
    /* Glass */
    --glass-bg:         rgba(255,255,255,0.02);
    --glass-bg-strong:  rgba(255,255,255,0.05);
    --glass-border:     rgba(255,255,255,0.06);
    --glass-border-hi:  rgba(255,255,255,0.12);
    --border:           rgba(255,255,255,0.06);
    --radius:     12px;
    /* Helpers */
    --card-subtle:    rgba(255,255,255,0.02);
    --card-hover:     rgba(255,255,255,0.06);
    --grid-bg:        rgba(0,0,0,0.35);
    /* Glow-based shadows */
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.5);
    --shadow-md:      0 8px 32px rgba(0,0,0,0.6);
    --shadow-glow:    0 0 60px -12px rgba(124,58,237,0.35);
    --shadow-elevated:0 16px 48px -12px rgba(0,0,0,0.8);
    --glow-strength:  0.22;
    --input-bg:       #12141C;
    --overlay-bg:     rgba(0,0,0,0.80);
    --glow-violet:    rgba(167, 139, 250, 0.30);
    --glow-pink:      rgba(236, 72, 153, 0.25);
    --glow-cyan:      rgba(34, 211, 238, 0.25);
    --glow-green:     rgba(52, 211, 153, 0.25);
    --glow-red:       rgba(251, 113, 133, 0.25);
    --glow-orange:    rgba(251, 191, 36, 0.25);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    display: flex;
    min-height: 100vh;
    font-size: 15px;
    letter-spacing: -0.01em;
}
[data-theme="dark"] body {
    background: #06070C;
}

/* ── Background — fixed grain + subtle color wash ──────────────────────── */
[data-theme="dark"] body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 70% 50% at 10% 0%, rgba(124,58,237,0.08) 0%, transparent 55%),
        radial-gradient(ellipse 50% 45% at 90% 20%, rgba(236,72,153,0.05) 0%, transparent 55%),
        radial-gradient(ellipse 60% 50% at 5% 95%, rgba(34,211,238,0.04) 0%, transparent 55%);
    pointer-events: none;
}
/* Subtle dot grid overlay for depth */
[data-theme="dark"] body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(circle, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* ── Light-mode refinements ────────────────────────────────────────────── */
/* Subtle warm tinted background texture */
:root:not([data-theme="dark"]) body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        radial-gradient(ellipse 60% 50% at 5% 5%, rgba(99,102,241,0.05) 0%, transparent 55%),
        radial-gradient(ellipse 50% 40% at 95% 20%, rgba(236,72,153,0.03) 0%, transparent 50%),
        radial-gradient(ellipse 50% 40% at 90% 90%, rgba(139,92,246,0.04) 0%, transparent 55%);
    pointer-events: none;
}
/* Light-mode cards — subtle tinted border + refined shadow */
:root:not([data-theme="dark"]) .card {
    border: 1px solid rgba(124,58,237,0.08);
    box-shadow: 0 2px 6px rgba(124,58,237,0.04), 0 1px 3px rgba(0,0,0,0.03);
}
:root:not([data-theme="dark"]) .card:hover {
    border-color: rgba(124,58,237,0.18);
    box-shadow: 0 8px 28px rgba(124,58,237,0.10), 0 0 40px -12px rgba(236,72,153,0.06);
    transform: translateY(-3px);
}
/* Light-mode card top accent line */
:root:not([data-theme="dark"]) body.lesson-page .card::before {
    background: linear-gradient(90deg,
        var(--stage-accent, #6366F1) 0%,
        var(--stage-accent-2, #A855F7) 40%,
        #EC4899 70%,
        transparent 100%);
    opacity: 0.55;
}
:root:not([data-theme="dark"]) body.lesson-page .card:hover::before { opacity: 0.80; }
/* Light sidebar */
:root:not([data-theme="dark"]) .sidebar {
    background: #F8F7F4;
    border-right-color: rgba(124,58,237,0.06);
    box-shadow: 1px 0 16px rgba(124,58,237,0.04);
}
:root:not([data-theme="dark"]) .sidebar li.active a {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.05));
    border-color: rgba(124,58,237,0.15);
    color: var(--violet);
    box-shadow: 0 2px 10px rgba(99,102,241,0.08);
}
:root:not([data-theme="dark"]) .sidebar li a:hover {
    background: rgba(124,58,237,0.04);
    border-color: rgba(124,58,237,0.08);
}
:root:not([data-theme="dark"]) .sidebar h2 a {
    background: linear-gradient(135deg, #1C1C22 15%, #6366F1 55%, #A855F7 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Light step-num badges */
:root:not([data-theme="dark"]) .step-num {
    background: rgba(99,102,241,0.05);
    border: 1px solid rgba(99,102,241,0.10);
    color: var(--text-dim);
    border-radius: 8px;
}
:root:not([data-theme="dark"]) .active .step-num {
    background: linear-gradient(135deg, #6366F1, #A855F7);
    color: #fff;
    border-color: var(--accent);
}
/* Light top nav — frosted with subtle indigo tint */
:root:not([data-theme="dark"]) .top-nav {
    background: rgba(246,245,241,0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(124,58,237,0.06);
    box-shadow: 0 1px 8px rgba(124,58,237,0.04);
}
/* Light-mode learning path toolbar */
:root:not([data-theme="dark"]) .learning-path {
    background: #FFFFFF;
    border-color: rgba(124,58,237,0.10);
    box-shadow: 0 2px 8px rgba(124,58,237,0.06);
}
:root:not([data-theme="dark"]) .lp-active {
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(168,85,247,0.06));
    border-color: rgba(124,58,237,0.22);
    box-shadow: 0 2px 10px rgba(124,58,237,0.10);
}
:root:not([data-theme="dark"]) .lp-clickable:hover {
    background: rgba(124,58,237,0.05);
    border-color: rgba(124,58,237,0.15);
}
/* Light step header — gradient text for headings */
:root:not([data-theme="dark"]) .step-header h1 {
    background: linear-gradient(135deg, #1C1C22 15%, #4F46E5 50%, #9333EA 85%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
/* Light-mode info boxes — slightly more vivid */
:root:not([data-theme="dark"]) .info-box.blue {
    background: linear-gradient(90deg, rgba(99,102,241,0.07), rgba(99,102,241,0.02));
    border-color: rgba(99,102,241,0.10);
    border-left-color: var(--accent);
}
:root:not([data-theme="dark"]) .info-box.green {
    background: linear-gradient(90deg, rgba(5,150,105,0.07), rgba(5,150,105,0.02));
    border-color: rgba(5,150,105,0.10);
    border-left-color: var(--green);
}
:root:not([data-theme="dark"]) .info-box.orange {
    background: linear-gradient(90deg, rgba(217,119,6,0.07), rgba(217,119,6,0.02));
    border-color: rgba(217,119,6,0.10);
    border-left-color: var(--orange);
}
:root:not([data-theme="dark"]) .info-box.red {
    background: linear-gradient(90deg, rgba(225,29,72,0.07), rgba(225,29,72,0.02));
    border-color: rgba(225,29,72,0.10);
    border-left-color: var(--red);
    color: var(--red);
}
/* Light-mode progress bar */
:root:not([data-theme="dark"]) .progress-fill {
    background: linear-gradient(90deg, #6366F1, #9333EA, #EC4899);
    box-shadow: 0 0 8px rgba(99,102,241,0.30);
}
:root:not([data-theme="dark"]) .progress-wrap {
    background: rgba(99,102,241,0.06);
}
/* Light-mode buttons */
:root:not([data-theme="dark"]) .btn-primary {
    background: linear-gradient(135deg, #6366F1 0%, #A855F7 50%, #EC4899 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 16px -4px rgba(99,102,241,0.35);
}
:root:not([data-theme="dark"]) .btn-primary:hover {
    background: linear-gradient(135deg, #4F46E5 0%, #9333EA 50%, #DB2777 100%);
    box-shadow: 0 6px 24px -4px rgba(99,102,241,0.45);
    transform: translateY(-2px);
}
/* Light-mode select control */
:root:not([data-theme="dark"]) select {
    background-color: #FFFFFF;
    border-color: rgba(99,102,241,0.15);
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
:root:not([data-theme="dark"]) select:hover {
    border-color: rgba(99,102,241,0.35);
}
:root:not([data-theme="dark"]) select:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.10);
}
/* Light-mode step cards (welcome/overview page) */
:root:not([data-theme="dark"]) .step-card {
    border: 1px solid rgba(99,102,241,0.08);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 1px 2px rgba(99,102,241,0.04);
}
:root:not([data-theme="dark"]) .step-card:hover {
    border-color: rgba(99,102,241,0.18);
    box-shadow: 0 8px 24px rgba(99,102,241,0.10), 0 2px 6px rgba(0,0,0,0.04);
}
/* Light-mode stage cards */
:root:not([data-theme="dark"]) .stage-card {
    border: 1px solid rgba(99,102,241,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.03), 0 2px 6px rgba(99,102,241,0.04);
}
:root:not([data-theme="dark"]) .lesson-card {
    border: 1px solid rgba(99,102,241,0.06);
    border-left: 3px solid var(--border);
}
/* Light-mode token chips */
:root:not([data-theme="dark"]) .token-chip {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.14);
}
/* Light-mode code blocks */
:root:not([data-theme="dark"]) .card pre {
    background: #F0EFE9;
    border-color: rgba(99,102,241,0.08);
}
/* Light-mode metric cards */
:root:not([data-theme="dark"]) .metric-card {
    border-color: rgba(99,102,241,0.08);
}
/* Light-mode input */
:root:not([data-theme="dark"]) .guess-input {
    border-color: rgba(99,102,241,0.15);
}
:root:not([data-theme="dark"]) .guess-input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(99,102,241,0.10);
}
/* Light-mode theme toggle */
:root:not([data-theme="dark"]) .theme-toggle {
    background: #FFFFFF;
    border-color: rgba(99,102,241,0.10);
}
:root:not([data-theme="dark"]) .theme-toggle:hover {
    border-color: rgba(99,102,241,0.25);
    background: rgba(99,102,241,0.04);
}
/* Light-mode sidebar back chip */
:root:not([data-theme="dark"]) .sidebar-back {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.14);
    color: var(--accent);
}
:root:not([data-theme="dark"]) .sidebar-back:hover {
    background: rgba(99,102,241,0.12);
    border-color: var(--accent);
}

h1, h2, h3, h4 {
    font-family: 'Sora', 'Inter', -apple-system, 'Segoe UI', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.step-num, .stat .value, .metric-card .val,
.slider-value, .welcome h1, .step-card .num,
.bc-kicker, .lp-hint, .tier-badge, .lesson-num,
.pred-label, .pred-conf, .token-id {
    font-family: 'Space Mono', 'Consolas', monospace;
}

code, .flat-array, .guess-input {
    font-family: 'Space Mono', 'Consolas', monospace;
}

/* ── Animations ─────────────────────────────────────────────────────────── */
@keyframes fadeSlideUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(6, 182, 212, 0); }
    50%      { box-shadow: 0 0 20px 4px rgba(6, 182, 212, 0.25); }
}
@keyframes pulseRed {
    0%, 100% { box-shadow: 0 0 0 0 rgba(244, 63, 94, 0); }
    50%      { box-shadow: 0 0 16px 4px rgba(244, 63, 94, 0.2); }
}
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-12px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes pop {
    0%   { transform: scale(0.8); opacity: 0; }
    70%  { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* ── Custom scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.14); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #7C3AED 0%, #EC4899 100%);
    border-radius: 3px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #8B5CF6 0%, #F472B6 100%);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.sidebar {
    width: 260px;
    min-width: 260px;
    background: var(--bg-sidebar);
    padding: 20px 0 16px;
    border-right: 1px solid var(--border);
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
[data-theme="dark"] .sidebar {
    border-right: none;
    background: linear-gradient(180deg, #0C0D14 0%, #080910 100%);
    height: 100vh;
    overflow-y: auto;
    z-index: 100;
    transition: transform 0.3s ease;
    box-shadow: 1px 0 24px rgba(0,0,0,0.5);
}
/* Clean right edge in dark mode */
[data-theme="dark"] .sidebar::after { content: none; }

/* Sidebar title */
.sidebar h2 {
    padding: 4px 20px 16px;
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
    border-bottom: none;
    line-height: 1.3;
    letter-spacing: -0.02em;
}
.sidebar h2 a {
    color: inherit;
    text-decoration: none;
}
[data-theme="dark"] .sidebar h2 a {
    background: linear-gradient(135deg, #F0F1F5 0%, #A78BFA 50%, #EC4899 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-size: 200% 100%;
    animation: shimmer 6s linear infinite;
}
[data-theme="dark"] .sidebar h2 {
    border-bottom: none;
    padding-bottom: 14px;
    margin-bottom: 4px;
}
/* No divider under title — clean */
.sidebar h2::after { content: none; }

/* Sidebar list — clean, minimal */
.sidebar ul {
    list-style: none;
    padding: 4px 12px;
    flex: 1;
}

.sidebar li {
    position: relative;
}

/* Sidebar links — clean rows with subtle interaction */
.sidebar li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    margin-bottom: 1px;
    border-radius: 8px;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 13.5px;
    font-weight: 500;
    position: relative;
    transition: background 0.15s ease, color 0.15s ease;
}
.sidebar li a:hover {
    background: rgba(124,58,237,0.05);
    color: var(--text);
}
:root:not([data-theme="dark"]) .sidebar li a:hover {
    background: rgba(99,102,241,0.05);
    color: var(--text);
}
[data-theme="dark"] .sidebar li a:hover {
    background: rgba(124,58,237,0.06);
    border-color: rgba(124,58,237,0.12);
}

/* Active item — clean filled row, no borders */
.sidebar li.active a {
    background: linear-gradient(90deg, rgba(99,102,241,0.10), rgba(168,85,247,0.04));
    color: var(--text);
    font-weight: 600;
}
[data-theme="dark"] .sidebar li.active a {
    color: #fff;
    background: linear-gradient(90deg, rgba(124,58,237,0.16), rgba(236,72,153,0.04));
    font-weight: 600;
}

/* Step number badges — minimal circular counters */
.step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    color: var(--text-dim);
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
    border: none;
    transition: color 0.15s ease, background 0.15s ease;
}
[data-theme="dark"] .step-num {
    background: transparent;
    color: var(--text-dim);
    border: none;
}
[data-theme="dark"] .sidebar li a:hover .step-num {
    background: rgba(124,58,237,0.10);
    color: var(--text);
    border-color: rgba(124,58,237,0.25);
}

/* Active step number — gradient text only, no fill */
.sidebar li.active .step-num {
    background: linear-gradient(135deg, #6366F1, #A855F7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}
[data-theme="dark"] .sidebar li.active .step-num {
    background: linear-gradient(135deg, #A78BFA, #F472B6);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
}

/* Visited step number — just green text */
.sidebar li.visited .step-num {
    color: var(--green);
    background: transparent;
}
[data-theme="dark"] .sidebar li.visited .step-num {
    color: var(--green);
    background: transparent;
}
/* Checkmark indicator for visited */
.sidebar li.visited .step-num::before {
    content: '✓';
    font-size: 13px;
}
.sidebar li.visited .step-num { font-size: 0; }

/* Sidebar back-to-portal chip — pinned to the bottom of the sidebar via
   flex auto-margin so the position is identical in light and dark mode. */
.sidebar-back-wrap {
    padding: 12px 10px 16px;
    margin-top: auto;
}
.sidebar-back-wrap::before { content: none; }
.sidebar-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(99,102,241,0.06), rgba(168,85,247,0.04));
    border: 1px solid rgba(124,58,237,0.12);
    color: var(--violet);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-back-icon {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.sidebar-back:hover {
    background: linear-gradient(135deg, #6366F1, #A855F7);
    border-color: transparent;
    color: #fff;
    transform: translateX(-2px);
    box-shadow: 0 4px 16px rgba(99,102,241,0.30);
}
.sidebar-back:hover .sidebar-back-icon {
    transform: translateX(-3px);
}
[data-theme="dark"] .sidebar-back {
    background: linear-gradient(135deg, rgba(124,58,237,0.08), rgba(236,72,153,0.04));
    border-color: rgba(124,58,237,0.18);
    color: var(--accent);
}
[data-theme="dark"] .sidebar-back:hover {
    background: linear-gradient(135deg, #4C1D95, #831843);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 20px rgba(76,29,149,0.35);
}

/* ── Mobile toggle ──────────────────────────────────────────────────────── */
.mobile-toggle {
    display: none;
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 200;
    width: 40px;
    height: 40px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.mobile-toggle:hover { background: var(--accent-dim); }

/* ── Progress bar ───────────────────────────────────────────────────────── */
.progress-wrap {
    height: 2px;
    background: rgba(255,255,255,0.04);
    position: sticky;
    top: 0;
    z-index: 50;
    margin-bottom: 12px;
    flex-shrink: 0;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--violet), var(--cyan));
    border-radius: 0 2px 2px 0;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] .progress-fill {
    background: linear-gradient(90deg, #7C3AED, #A78BFA, #EC4899, #22D3EE);
    background-size: 250% 100%;
    animation: shimmer 5s linear infinite;
    box-shadow: 0 0 10px rgba(124,58,237,0.40), 0 0 4px rgba(236,72,153,0.25);
}
[data-theme="dark"] .progress-wrap {
    height: 2px;
    background: rgba(255,255,255,0.04);
}

/* ── Main content ────────────────────────────────────────────────────────── */
main {
    margin-left: 260px;
    flex: 1;
    padding: 12px 32px;
    max-width: 1400px;
}

/* Lesson pages: lock to viewport height, scroll only inside the content area */
body.lesson-page {
    overflow: hidden;
    height: 100vh;
    padding-top: 54px;
    box-sizing: border-box;
}
body.lesson-page .sidebar { top: 54px; }
[data-theme="dark"] body.lesson-page .sidebar { height: calc(100vh - 54px); }
body.lesson-page main {
    height: calc(100vh - 54px);
    display: flex;
    flex-direction: column;
    padding: 8px 32px 14px;
}
body.lesson-page .progress-wrap { margin: 0 -32px 14px; }
body.lesson-page .content-layout {
    flex: 0 1 auto;             /* shrink to content; don't stretch to fill viewport */
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
    align-items: stretch;
}
body.lesson-page .content-main {
    flex: 1 1 0;
    overflow-y: auto;
    min-height: 0;
    max-height: 100%;           /* bounded so overflow-y clips when content is long */
    padding-right: 10px;
}
body.lesson-page .nav-buttons { flex-shrink: 0; }

/* Lesson pages: tighten card padding and grid sizes so multi-card steps
   fit within the viewport-locked content area without forcing the user
   to scroll the inner pane. Other contexts (lesson index, portal home)
   keep the spacious defaults. */
body.lesson-page .card {
    padding: 8px 16px;
    margin-bottom: 6px;
}
body.lesson-page .card h3 {
    font-size: 14px;
    margin-bottom: 4px;
}
body.lesson-page .card p {
    margin-bottom: 4px;
    line-height: 1.45;
}

/* Ordered list inside lesson cards — numbered badges, brand-tinted */
body.lesson-page .card ol {
    list-style: none;
    counter-reset: card-step;
    padding: 0;
    margin: 10px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
body.lesson-page .card ol > li {
    counter-increment: card-step;
    position: relative;
    padding: 10px 14px 10px 44px;
    background: var(--stage-tint-08, rgba(129,140,248,0.06));
    border: 1px solid var(--stage-tint-18, rgba(129,140,248,0.14));
    border-left: 3px solid var(--stage-accent, var(--accent));
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
body.lesson-page .card ol > li:hover {
    background: var(--stage-tint-18, rgba(129,140,248,0.12));
    border-color: var(--stage-tint-28, rgba(129,140,248,0.28));
    transform: translateX(2px);
}
body.lesson-page .card ol > li::before {
    content: counter(card-step);
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--stage-accent, var(--accent)), var(--stage-accent-2, var(--violet)));
    color: #04141a;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    box-shadow: 0 2px 8px var(--stage-glow-soft, rgba(129,140,248,0.30));
}
body.lesson-page .card ol > li strong {
    color: var(--stage-accent, var(--accent));
    font-weight: 700;
    margin-right: 2px;
}

/* Unordered list inside lesson cards — bullet replaced with brand chevron */
body.lesson-page .card ul {
    list-style: none;
    padding: 0;
    margin: 10px 0 6px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
body.lesson-page .card ul > li {
    position: relative;
    padding: 6px 12px 6px 24px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
}
body.lesson-page .card ul > li::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 14px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stage-accent, var(--accent));
    box-shadow: 0 0 8px var(--stage-glow-soft, rgba(129,140,248,0.30));
}

/* ── Lesson card section heading — accent bar + stage-tinted title ───── */
body.lesson-page .card h3 {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding-left: 0;
    color: var(--text);
    font-weight: 700;
    letter-spacing: 0.2px;
}
body.lesson-page .card h3::before {
    content: '';
    display: inline-block;
    width: 3px;
    height: 16px;
    border-radius: 2px;
    background: var(--stage-accent, var(--accent));
    flex-shrink: 0;
}

/* Lesson card itself — subtle stage-tinted top edge so each section feels
   anchored to its stage colour. We use ::before with rounded top corners
   instead of overflow:hidden so tooltips on inner widgets aren't clipped. */
body.lesson-page .card {
    position: relative;
}
body.lesson-page .card::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg,
        var(--stage-accent, #7C3AED) 0%,
        var(--stage-accent-2, #EC4899) 50%,
        transparent 100%);
    opacity: 0.70;
    pointer-events: none;
}
body.lesson-page .card:hover::before { opacity: 0.8; }
body.lesson-page[data-stage] .card:hover {
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

/* ── Security callout — refreshed with icon + tighter card look ──────── */
.security-callout {
    position: relative;
    padding: 16px 20px 16px 52px;
    background: linear-gradient(135deg, rgba(251,113,133,0.08), rgba(251,113,133,0.03));
    border: 1px solid rgba(251,113,133,0.20);
    border-radius: 12px;
    font-size: 13.5px;
    line-height: 1.7;
    color: var(--text);
}
.security-callout::after {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg, #fb7185, #f43f5e);
}
.security-callout::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 18px;
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f87171' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/></svg>");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    filter: drop-shadow(0 0 6px rgba(248,113,113,0.5));
}
.security-callout strong { color: var(--red); }

/* ── Info-box variants — refreshed with rounded look + tinted shadow ─── */
.info-box {
    position: relative;
    padding: 12px 16px;
    border-radius: 10px;
    border: 1px solid transparent;
    box-shadow: none;
}
.info-box.blue {
    background: linear-gradient(90deg, rgba(124,58,237,0.08), rgba(124,58,237,0.02));
    border-color: rgba(124,58,237,0.12);
    border-left: 2px solid var(--violet);
}
.info-box.green {
    background: linear-gradient(90deg, rgba(52,211,153,0.08), rgba(52,211,153,0.02));
    border-color: rgba(52,211,153,0.12);
    border-left: 2px solid var(--green);
}
.info-box.orange {
    background: linear-gradient(90deg, rgba(251,191,36,0.08), rgba(251,191,36,0.02));
    border-color: rgba(251,191,36,0.12);
    border-left: 2px solid var(--orange);
}
.info-box.red {
    background: linear-gradient(90deg, rgba(251,113,133,0.08), rgba(251,113,133,0.02));
    border-color: rgba(251,113,133,0.12);
    border-left: 2px solid var(--red);
    color: var(--red);
}

/* ── Keyboard badge — subtle gradient + glow ──────────────────────────── */
.kbd {
    background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
    border: 1px solid rgba(129,140,248,0.25);
    color: #d8e0f5;
    box-shadow: 0 1px 0 rgba(0,0,0,0.4),
                inset 0 1px 0 rgba(255,255,255,0.06),
                0 0 8px rgba(129,140,248,0.10);
}
:root:not([data-theme="dark"]) .kbd {
    background: linear-gradient(180deg, #ffffff, #f1f5f9);
    border-color: rgba(0,0,0,0.15);
    color: var(--text);
    box-shadow: 0 1px 0 rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* ── Next-up-note — stage-aware so the bridge prompt picks up the
   lesson's accent instead of being locked to cyan ──────────────────── */
body[data-stage] .next-up-note {
    background: linear-gradient(135deg, var(--stage-tint-08), var(--stage-tint-18));
    border-color: var(--stage-tint-28);
    box-shadow: 0 0 0 1px var(--stage-tint-08), 0 4px 16px var(--stage-tint-08);
}
body[data-stage] .next-up-note .next-up-icon {
    filter: drop-shadow(0 0 6px var(--stage-glow-soft));
}
body[data-stage] .next-up-note strong {
    color: var(--stage-accent);
}
body.lesson-page .digit-grid.large { width: 180px; }
body.lesson-page .digit-grid.medium { width: 140px; }
body.lesson-page .digit-grid.small { width: 110px; }
body.lesson-page .grid-container { margin: 0 8px; }
body.lesson-page .grid-container .label {
    font-size: 12px;
    margin-bottom: 4px;
}
body.lesson-page .grids-row { margin: 4px 0; gap: 12px; }
body.lesson-page .controls { margin: 8px 0; gap: 12px; }
body.lesson-page .info-box { padding: 10px 14px; margin-bottom: 8px; }

/* Compact chart wrappers — Chart.js uses 2:1 aspect by default, so the
   chart canvas height is determined by wrapper width. Cap the wrapper so
   charts never grow taller than the viewport-locked content area. */
body.lesson-page .chart-wrap {
    max-width: 520px;
    margin: 6px auto;
}
body.lesson-page .chart-wrap canvas {
    max-height: 260px;
}

/* Compact metric cards (Step 6 etc.) */
body.lesson-page .metrics-row { margin: 10px 0; gap: 10px; }
body.lesson-page .metric-card { padding: 10px 12px; min-width: 100px; }
body.lesson-page .metric-card .val { font-size: 22px; }
body.lesson-page .metric-card .name { margin-bottom: 2px; font-size: 11px; }

/* Compact stats row (Step 3 etc.) */
body.lesson-page .stat { margin: 2px 14px; }
body.lesson-page .stat .value { font-size: 20px; }

/* Compact prototype overview grid (Step 7). Cap the grid width so the
   2x5 layout of digit grids fits inside the viewport-locked content
   area regardless of monitor width. */
body.lesson-page .proto-grid {
    max-width: 760px;
    margin: 8px auto;
    gap: 8px;
}
body.lesson-page .proto-item { padding: 6px; }
body.lesson-page .proto-item .proto-label {
    font-size: 11px;
    margin-bottom: 3px;
}

/* Compact step header + learning path so more vertical room is left for
   the actual interactive content */
body.lesson-page .step-header { margin-bottom: 8px; }
body.lesson-page .step-header h1 { font-size: 19px; margin-bottom: 2px; }
body.lesson-page .step-header p { font-size: 12px; }
body.lesson-page .learning-path { margin: 4px 0 14px; padding: 10px 18px 8px; }
body.lesson-page .progress-wrap { margin: 0 -32px 8px; }
body.lesson-page main { padding: 6px 32px 10px; }
body.lesson-page .lesson-breadcrumb { margin: 6px 0 16px; padding: 6px 10px; }

/* Make the inner scrollbar visible so learners know when an interactive
   page has more content below the fold (instead of looking "cut off"). */
body.lesson-page .content-main {
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.08) transparent;
}
body.lesson-page .content-main::-webkit-scrollbar { width: 5px; }
body.lesson-page .content-main::-webkit-scrollbar-track { background: transparent; }
body.lesson-page .content-main::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.08);
    border-radius: 3px;
}
body.lesson-page .content-main::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.14);
}

/* ── Lesson breadcrumb (Portal > Stage > Lesson > Step) ─────────────────── */
.lesson-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 10px 0 10px;
    padding: 4px 4px;
    border-radius: 0;
    background: transparent;
    border: none;
    font-size: 12px;
    line-height: 1.15;
    animation: fadeSlideUp 0.35s ease both;
    flex-shrink: 0;
}
[data-theme="dark"] .lesson-breadcrumb {
    background: transparent;
    border: none;
}
.lesson-breadcrumb .bc-link {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 4px 8px;
    border-radius: 6px;
    color: var(--text-dim);
    text-decoration: none;
    border: none;
    transition: background 0.15s ease, color 0.15s ease;
    white-space: nowrap;
}
.lesson-breadcrumb a.bc-link:hover {
    background: rgba(124,58,237,0.06);
    color: var(--violet);
}
.lesson-breadcrumb a.bc-stage:hover  { background: rgba(124,58,237,0.06); color: var(--violet); }
.lesson-breadcrumb a.bc-lesson:hover { background: rgba(124,58,237,0.06); color: var(--violet); }

.lesson-breadcrumb .bc-home {
    padding: 5px 7px;
    color: var(--text-dim);
}
.lesson-breadcrumb .bc-home svg { display: block; }

.lesson-breadcrumb .bc-kicker {
    font-family: 'Space Mono', monospace;
    font-size: 9.5px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-dim);
    font-weight: 700;
    opacity: 0.65;
}

.lesson-breadcrumb .bc-text {
    font-weight: 600;
    font-size: 12.5px;
}

.lesson-breadcrumb .bc-sep {
    color: var(--text-dim);
    opacity: 0.55;
    font-weight: 400;
    user-select: none;
}

.lesson-breadcrumb .bc-current {
    cursor: default;
    background: transparent;
    border: none;
    color: var(--text);
    font-weight: 600;
}

:root:not([data-theme="dark"]) .lesson-breadcrumb {
    background: transparent;
    border: none;
}
:root:not([data-theme="dark"]) .lesson-breadcrumb a.bc-link:hover {
    background: rgba(99,102,241,0.06);
    color: var(--accent);
}

@media (max-width: 760px) {
    .lesson-breadcrumb { font-size: 11px; padding: 6px 8px; }
    .lesson-breadcrumb .bc-kicker { display: none; }
    .lesson-breadcrumb .bc-text { font-size: 11.5px; }
}

.step-header {
    margin-bottom: 14px;
    animation: fadeSlideUp 0.4s ease both;
    flex-shrink: 0;
}
.step-header h1 {
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 4px;
    line-height: 1.2;
}
[data-theme="dark"] .step-header h1 {
    background: linear-gradient(135deg, #F0F1F5 10%, #A78BFA 45%, #EC4899 80%, #22D3EE 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.step-header p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.4;
}

/* ── Cards ───────────────────────────────────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 16px 20px;
    margin-bottom: 12px;
    animation: fadeSlideUp 0.5s ease both;
    transition: border-color 0.3s, box-shadow 0.3s;
}
[data-theme="dark"] .card {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
[data-theme="dark"] .card:hover {
    border-color: var(--glass-border-hi);
    box-shadow: var(--shadow-elevated), 0 0 40px -8px rgba(124,58,237,0.20);
    background: var(--glass-bg-strong);
    transform: translateY(-4px);
}
.card:nth-child(2) { animation-delay: 0.08s; }
.card:nth-child(3) { animation-delay: 0.16s; }
.card:nth-child(4) { animation-delay: 0.24s; }
.card h3 {
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--text);
}
.card p {
    line-height: 1.55;
    color: var(--text-dim);
    margin-bottom: 6px;
    font-size: 13.5px;
}
[data-theme="dark"] .card p { color: #B8BDD0; }

/* Code blocks inside step-content cards. Step templates render in
   .content-main (not .md-content), so the drawer's pre/code rules don't
   apply. These rules give bare <pre><code> blocks the same dark code-block
   look as the drawer, plus an inline <code> chip for things like
   `connection_rate` mentioned in body text. Prism-tagged blocks
   (`pre[class*="language-"]`) have higher-specificity rules that override
   these, so syntax-highlighted Python/Bash still renders normally. */
.card pre {
    background: #0A0B10;
    color: var(--text);
    padding: 16px 20px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.06);
    margin: 10px 0 12px;
    overflow-x: auto;
    font-family: 'Space Mono', 'Fira Code', Consolas, monospace;
    font-size: 13px;
    line-height: 1.6;
}
.card pre code {
    background: none;
    padding: 0;
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    border: none;
}
.card p > code,
.card li > code,
.card td > code,
.card h3 > code,
.card h4 > code {
    background: var(--accent-dim);
    color: var(--accent);
    padding: 2px 7px;
    border-radius: 6px;
    border: none;
    font-family: 'Space Mono', 'Consolas', monospace;
    font-size: 0.90em;
}

/* ── Digit grids ─────────────────────────────────────────────────────────── */
.grid-container {
    display: inline-block;
    text-align: center;
    margin: 0 12px;
}
.grid-container .label {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
}
.digit-grid {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 2px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--grid-bg);
    padding: 2px;
}
.digit-grid.small  { width: 168px; }
.digit-grid.medium { width: 240px; }
.digit-grid.large  { width: 300px; }

.digit-grid .cell {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 500;
    border-radius: 3px;
    transition: background-color 0.2s ease, transform 0.15s ease;
}
.digit-grid .cell:hover {
    transform: scale(1.08);
    z-index: 1;
}
.digit-grid .cell.show-val {
    font-size: 8px;
}

.grids-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: center;
    gap: 20px;
    margin: 20px 0;
}

/* ── Editable grid (Step 1) ──────────────────────────────────────────────── */
.edit-grid {
    display: grid;
    grid-template-columns: repeat(8, 48px);
    gap: 2px;
}
.edit-grid input {
    width: 48px;
    height: 48px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 2px;
    font-size: 14px;
    font-weight: 600;
    background: var(--input-bg);
    color: var(--text);
    transition: background 0.15s;
}
.edit-grid input:focus {
    outline: 2px solid var(--accent);
    z-index: 1;
}

/* ── Controls ────────────────────────────────────────────────────────────── */
.controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    margin: 16px 0;
}
.slider-group {
    flex: 1;
    min-width: 200px;
}
.slider-group label {
    display: block;
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 4px;
}
.slider-group input[type="range"] {
    width: 100%;
    accent-color: var(--accent);
    height: 6px;
}
.slider-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--accent);
    min-width: 60px;
    text-align: center;
}

select, .btn {
    padding: 8px 16px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
select:hover, .btn:hover {
    border-color: var(--accent);
    background: rgba(6, 182, 212, 0.1);
}

/* Closed-state select needs to clearly read as an interactive control,
   not page text. Brighter fill + cyan border + custom caret + bold value
   so the current selection ('Digit 9') jumps out of the controls row. */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding: 9px 36px 9px 14px;
    color: var(--text);
    font-weight: 600;
    letter-spacing: 0.2px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.08);
    background-color: rgba(255,255,255,0.02);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23A78BFA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 12px center;
    box-shadow: none;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
select:hover {
    background-color: rgba(124,58,237,0.05);
    border-color: rgba(124,58,237,0.25);
}
select:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(124,58,237,0.15);
}
/* Native <option> rendering ignores most CSS, but Chromium and Firefox
   honour background+color on the dropdown panel. Without this rule the
   options inherit a near-black-on-near-black combo from the page theme
   and are unreadable. */
select option {
    background: #111318;
    color: #EDEEF2;
    font-weight: 600;
    padding: 6px 10px;
}
select option:checked,
select option:hover {
    background: rgba(123,147,255,0.18);
    color: #ffffff;
}
.btn:active {
    transform: scale(0.97);
}
.btn-primary {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 700;
    text-shadow: none;
}
.btn-primary:hover {
    background: #8FA5FF;
    border-color: #8FA5FF;
    color: #fff;
}
[data-theme="dark"] .btn-primary {
    background: linear-gradient(135deg, #4C1D95 0%, #831843 100%);
    border-color: transparent;
    color: #fff;
    font-weight: 700;
    box-shadow: 0 4px 20px -4px rgba(76,29,149,0.35);
}
[data-theme="dark"] .btn-primary:hover {
    background: linear-gradient(135deg, #5B21B6 0%, #9D174D 100%);
    box-shadow: 0 6px 28px -4px rgba(91,33,182,0.45), 0 0 16px rgba(157,23,77,0.25);
    transform: translateY(-2px);
}
.btn-sm {
    padding: 5px 12px;
    font-size: 12px;
}

/* Reusable "obvious next action" CTA — pill, slow cyan pulse, lift on
   hover. Pair with .btn-primary so the base colour matches the brand.
   Used by 'New digit' (Step 0), 'Random pair' (Step 2), and future
   explore-step CTAs that need to read as the primary affordance. */
.btn-cta-pulse {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1;
    border-radius: 8px;
    background: linear-gradient(135deg, #7C3AED 0%, #EC4899 100%);
    border: 1px solid transparent;
    box-shadow: 0 3px 12px -2px rgba(124,58,237,0.4);
    animation: btn-cta-pulse-glow 3s ease-in-out infinite;
}
.btn-cta-pulse:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 28px -4px rgba(124,58,237,0.55), 0 0 16px rgba(236,72,153,0.25);
}
.btn-cta-pulse span[aria-hidden="true"] {
    display: inline-block;
    margin-right: 5px;
    font-size: 11px;
    transform: translateY(1px);
}
@keyframes btn-cta-pulse-glow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(124,58,237,0.45),
            0 0 24px rgba(124,58,237,0.35),
            0 0 12px rgba(236,72,153,0.20),
            0 6px 18px rgba(0,0,0,0.35);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(124,58,237,0.70),
            0 0 36px rgba(124,58,237,0.50),
            0 0 20px rgba(236,72,153,0.35),
            0 6px 22px rgba(0,0,0,0.40);
    }
}
/* Dark-mode palette alignment — match the deeper violet→rose used by
   .nav-buttons and .btn-primary so every brand CTA sits at the same depth. */
/* Content-area CTA uses cyan→indigo so it reads as the "do this next"
   button, clearly distinct from the nav-buttons deep violet-rose chrome. */
[data-theme="dark"] .btn-cta-pulse {
    background: linear-gradient(135deg, #0891B2 0%, #4F46E5 100%);
    box-shadow: 0 4px 20px -4px rgba(8,145,178,0.40);
    animation: btn-cta-pulse-glow-dark 3s ease-in-out infinite;
}
[data-theme="dark"] .btn-cta-pulse:hover {
    background: linear-gradient(135deg, #0E7490 0%, #4338CA 100%);
    box-shadow: 0 6px 28px -4px rgba(8,145,178,0.50), 0 0 16px rgba(79,70,229,0.28);
}
@keyframes btn-cta-pulse-glow-dark {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(8,145,178,0.40),
            0 0 22px rgba(8,145,178,0.28),
            0 0 12px rgba(79,70,229,0.18),
            0 6px 18px rgba(0,0,0,0.35);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(14,165,233,0.60),
            0 0 32px rgba(8,145,178,0.42),
            0 0 18px rgba(79,70,229,0.32),
            0 6px 22px rgba(0,0,0,0.40);
    }
}

/* ── Lab guide cards (Stage 5 PDFs) ───────────────────────────────────────
   Used inside step templates whose hands-on lab references one or more
   external PDF guides served from /api/pdf-guide/<slug>. Each card is a
   self-contained call to action: icon, title, subtitle, two buttons. */
.guide-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
    margin: 14px 0 18px;
}
.guide-card-pdf {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
    background: linear-gradient(135deg,
        rgba(129,140,248,0.06),
        rgba(167,139,250,0.04));
    border: 1px solid rgba(129,140,248,0.28);
    border-radius: 12px;
    transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}
.guide-card-pdf:hover {
    border-color: rgba(129,140,248,0.55);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 18px rgba(129,140,248,0.18);
}
.guide-card-pdf .guide-icon {
    font-size: 22px;
    line-height: 1;
    color: var(--accent, #818cf8);
}
.guide-card-pdf .guide-title {
    font-weight: 700;
    font-size: 14.5px;
    color: var(--text);
    letter-spacing: 0.2px;
}
.guide-card-pdf .guide-sub {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.45;
}
.guide-card-pdf .guide-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
    padding-top: 4px;
}
.guide-card-pdf .guide-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid transparent;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.guide-card-pdf .guide-btn-primary {
    background: linear-gradient(135deg, #818cf8, #0891b2);
    color: #0a0a1a;
    border-color: rgba(129,140,248,0.65);
}
.guide-card-pdf .guide-btn-primary:hover {
    background: linear-gradient(135deg, #22e6f0, #06b6d4);
    color: #000;
}
.guide-card-pdf .guide-btn-secondary {
    background: rgba(167,139,250,0.10);
    color: var(--violet, #a78bfa);
    border-color: rgba(167,139,250,0.35);
}
.guide-card-pdf .guide-btn-secondary:hover {
    background: rgba(167,139,250,0.18);
    border-color: rgba(167,139,250,0.55);
}

/* ── Decision-tree ASCII block ────────────────────────────────────────────
   Used inside lecture cards to render an if/else tree where the connectors
   stay dim and the *meaning* (questions, predictions) carries the colour.
   The leaf classes are semantic — re-use .tree-leaf-safe / .tree-leaf-warn
   / .tree-leaf-danger for any tree, not just the network-traffic example. */
.decision-tree {
    font-family: "Space Mono", "Consolas", "Fira Code", monospace;
    font-size: 13.5px;
    line-height: 1.7;
    background: rgba(6, 214, 224, 0.04);
    border: 1px solid rgba(6, 214, 224, 0.18);
    border-left: 3px solid var(--cyan, #818cf8);
    border-radius: 8px;
    padding: 14px 18px;
    margin: 10px 0 14px;
    overflow-x: auto;
    white-space: pre;
    color: var(--text-dim);
}
/* Token classes — work both inside .decision-tree AND inline in body
   text so the same vocabulary teaches itself in the paragraph above. */
.tree-question {
    color: var(--cyan, #818cf8);
    font-weight: 700;
}
.tree-yes {
    color: #a78bfa;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.tree-no {
    color: #f59e0b;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.decision-tree .tree-arrow {
    color: var(--text-dim);
    opacity: 0.7;
}
.decision-tree .tree-connector {
    color: var(--text-dim);
    opacity: 0.55;
}
.tree-leaf-safe {
    color: #a78bfa;
    font-weight: 700;
    background: rgba(168, 85, 247, 0.10);
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid rgba(168, 85, 247, 0.35);
}
.tree-leaf-warn {
    color: #f59e0b;
    font-weight: 700;
    background: rgba(245, 158, 11, 0.10);
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid rgba(245, 158, 11, 0.35);
}
.tree-leaf-danger {
    color: #f87171;
    font-weight: 700;
    background: rgba(244, 63, 94, 0.10);
    padding: 1px 8px;
    border-radius: 4px;
    border: 1px solid rgba(244, 63, 94, 0.35);
}

/* Inline legend chips that sit above the tree so the colour code is
   self-explanatory without a separate paragraph. */
.tree-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 8px 0 4px;
    font-size: 12px;
}
.tree-legend-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid var(--border);
    color: var(--text-dim);
    background: var(--bg-card);
}
.tree-legend-chip .tree-legend-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.tree-legend-chip.is-question .tree-legend-dot { background: #818cf8; }
.tree-legend-chip.is-safe     .tree-legend-dot { background: #a78bfa; }
.tree-legend-chip.is-warn     .tree-legend-dot { background: #f59e0b; }
.tree-legend-chip.is-danger   .tree-legend-dot { background: #f87171; }

/* Scenario / preset button group — sits beneath the main controls and
   acts as one-click jumps to canonical settings. Default .btn was too
   quiet against the dark card; bump contrast so each chip reads as an
   actionable preset, and let hover lift it like a real button. */
.btn-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin: 14px 0;
}
.btn-group .btn {
    font-size: 12.5px;
    font-weight: 600;
    padding: 7px 16px;
    color: var(--text);
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    box-shadow: none;
    letter-spacing: 0.2px;
}
.btn-group .btn:hover {
    color: #ffffff;
    border-color: rgba(255,255,255,0.15);
    background: rgba(255,255,255,0.07);
    transform: translateY(-1px);
}
.btn-group .btn:active {
    transform: translateY(0);
}

/* ── Keyboard shortcut badge ────────────────────────────────────────────── */
.kbd {
    display: inline-block;
    padding: 2px 7px;
    font-size: 11px;
    font-family: 'Space Mono', monospace;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 4px;
    color: var(--text-dim);
    line-height: 1.4;
    vertical-align: middle;
    margin-left: 4px;
}

/* ── Status/info boxes (variant used by some step templates) ──────────── */
.info-box {
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin: 8px 0;
    transition: all 0.3s ease;
}

/* Pulsing danger box */
.info-box.red.pulse {
    animation: pulseRed 1.5s ease infinite;
}

.stat {
    display: inline-block;
    text-align: center;
    margin: 8px 16px;
}
.stat .value {
    font-size: 28px;
    font-weight: 700;
    color: var(--accent);
}
.stat .label {
    font-size: 12.5px;
    color: var(--text-dim);
    font-weight: 500;
    letter-spacing: 0.2px;
}
[data-theme="dark"] .stat .label { color: #c4ccea; }

/* ── Metrics bar (Step 6) ────────────────────────────────────────────────── */
.metrics-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin: 16px 0;
}
.metric-card {
    flex: 1;
    min-width: 120px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    text-align: center;
    transition: border-color 0.3s, box-shadow 0.3s;
    position: relative;
}
.metric-card .name {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 4px;
    cursor: help;
}
.metric-card .val {
    font-size: 28px;
    font-weight: 700;
    transition: color 0.3s;
}
.metric-card.ok   { border-color: rgba(16, 185, 129, 0.3); }
.metric-card.ok .val   { color: var(--green); }
.metric-card.warn { border-color: rgba(245, 158, 11, 0.3); }
.metric-card.warn .val { color: var(--orange); }
.metric-card.bad  { border-color: rgba(244, 63, 94, 0.3); }
.metric-card.bad .val  { color: var(--red); }
.metric-card.bad  { animation: pulseRed 2s ease infinite; }

/* Metric tooltip */
.metric-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    color: var(--text-dim);
    white-space: nowrap;
    z-index: 20;
    pointer-events: none;
}
.metric-card:hover .metric-tip {
    display: block;
    animation: fadeIn 0.15s ease;
}

/* ── Chart ───────────────────────────────────────────────────────────────── */
.chart-wrap {
    position: relative;
    max-width: 700px;
    margin: 16px auto;
}

/* ── Two-column layout (content left, aside right) ──────────────────────── */
.content-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}
.content-main {
    flex: 1;
    min-width: 0;
}
.mat-hint { border-color: rgba(217,119,6,0.3); color: var(--orange); }
.mat-hint:hover { background: rgba(217,119,6,0.06); border-color: rgba(217,119,6,0.5); box-shadow: 0 0 10px rgba(217,119,6,0.1); }
[data-theme="dark"] .mat-hint { border-color: rgba(251,146,60,0.25); color: var(--orange); }
[data-theme="dark"] .mat-hint:hover { border-color: rgba(251,146,60,0.5); box-shadow: 0 0 14px rgba(251,146,60,0.15); }

/* ── Hint modal overlay ──────────────────────────────────────────────────── */
/* Stops above the lesson nav row so the Previous/Next arrows underneath
   stay clickable while the Challenge hint is open. */
.hint-modal-overlay {
    position: fixed; top: 0; right: 0; left: 0; bottom: 64px;
    background: var(--overlay-bg);
    z-index: 800; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.hint-modal-overlay.open { opacity: 1; pointer-events: auto; }

/* ── Hint modal ──────────────────────────────────────────────────────────── */
/* Centered within the viewport ABOVE the nav row, not within the full
   viewport — keeps the arrows uncovered even at small heights. */
.hint-modal {
    position: fixed; top: calc(50% - 32px); left: 50%;
    transform: translate(-50%, -50%) scale(0.95);
    width: 480px; max-width: 92vw; max-height: calc(80vh - 64px);
    background: var(--bg-card); border-radius: 16px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.4);
    z-index: 810; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    display: flex; flex-direction: column;
}
[data-theme="dark"] .hint-modal {
    background: #111318;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 64px rgba(0,0,0,0.6);
}
.hint-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.hint-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 20px; border-bottom: 1px solid var(--border);
}
.hint-modal-title {
    font-family: 'Space Mono', sans-serif;
    font-size: 18px; font-weight: 700; color: var(--text);
}
.hint-modal-close {
    background: none; border: none; font-size: 24px;
    color: var(--text-dim); cursor: pointer; padding: 0 4px;
}
.hint-modal-close:hover { color: var(--text); }

.hint-modal-body {
    padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px;
}

/* ── Reusable confirm modal ──────────────────────────────────────────────────
   Brand-aligned replacement for native browser confirm(). Used by any code
   that needs a destructive-action prompt (per-lesson reset etc). Sits at a
   higher z-index than other lesson modals so it always stacks on top. */
.confirm-modal-overlay {
    position: fixed; inset: 0;
    background: var(--overlay-bg);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 1000; opacity: 0; pointer-events: none;
    transition: opacity 0.25s;
}
.confirm-modal-overlay.open { opacity: 1; pointer-events: auto; }

.confirm-modal {
    position: fixed; top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.94);
    width: 440px; max-width: 92vw;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.40);
    z-index: 1010; opacity: 0; pointer-events: none;
    transition: opacity 0.25s, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 28px 28px 22px;
    text-align: center;
}
.confirm-modal.open {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}
.confirm-modal-icon {
    font-size: 30px;
    margin-bottom: 10px;
    color: var(--red);
    opacity: 0.92;
}
.confirm-modal-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--text);
    font-family: 'Space Mono', monospace;
    letter-spacing: 0.3px;
}
.confirm-modal-body {
    font-size: 13px;
    line-height: 1.55;
    color: var(--text-dim);
    margin: 0 0 22px;
}
.confirm-modal-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}
.confirm-modal-btn {
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    min-width: 110px;
}
.confirm-modal-cancel:hover {
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 14px rgba(129,140,248,0.18);
}
.confirm-modal-ok {
    background: linear-gradient(135deg, rgba(129,140,248,0.10), rgba(167,139,250,0.10));
    border-color: rgba(167,139,250,0.45);
    color: var(--violet);
}
.confirm-modal-ok:hover {
    background: linear-gradient(135deg, rgba(129,140,248,0.20), rgba(167,139,250,0.22));
    border-color: var(--violet);
    box-shadow: 0 0 18px rgba(167,139,250,0.30);
}
.confirm-modal-ok.danger {
    background: linear-gradient(135deg, rgba(248,113,113,0.12), rgba(167,139,250,0.12));
    border-color: rgba(248,113,113,0.55);
    color: var(--red);
}
.confirm-modal-ok.danger:hover {
    background: linear-gradient(135deg, rgba(248,113,113,0.22), rgba(167,139,250,0.18));
    border-color: var(--red);
    box-shadow: 0 0 20px rgba(248,113,113,0.30);
}
.confirm-modal-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* ── Challenge box (inside hint modal) ───────────────────────────────────── */
.challenge-box {
    background: linear-gradient(135deg, rgba(251,191,36,0.06), rgba(245,158,11,0.03));
    border: 1px solid rgba(251,191,36,0.20);
    border-radius: var(--radius);
    padding: 20px 24px;
    position: relative;
}
.challenge-box::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: var(--radius) 0 0 var(--radius);
    background: linear-gradient(180deg, #fbbf24, #f59e0b);
}
.challenge-section-label {
    font-size: 12px; font-weight: 700; color: var(--orange);
    margin-bottom: 10px; font-family: 'Space Mono', monospace;
    text-transform: uppercase; letter-spacing: 1.2px;
}
.challenge-box p {
    font-size: 14px; line-height: 1.7; color: var(--text); margin: 0;
}
.challenge-box .btn {
    margin-top: 14px;
    background: linear-gradient(135deg, rgba(251,191,36,0.15), rgba(245,158,11,0.10));
    border: 1px solid rgba(251,191,36,0.35);
    color: var(--orange);
    font-weight: 600;
}
.challenge-box .btn:hover {
    background: linear-gradient(135deg, rgba(251,191,36,0.25), rgba(245,158,11,0.18));
    border-color: var(--orange);
    box-shadow: 0 0 12px rgba(251,191,36,0.2);
}
.challenge-box .answer {
    margin-top: 16px; padding: 16px 18px;
    background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(167,139,250,0.05));
    border: 1px solid rgba(129,140,248,0.22);
    border-radius: 12px; display: none;
    font-size: 14px; line-height: 1.7; color: var(--text);
    position: relative;
}
.challenge-box .answer::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(180deg, var(--accent), var(--violet));
}
.challenge-box .answer strong {
    color: var(--accent);
    font-weight: 700;
}
.challenge-box .answer.open { display: block; animation: fadeSlideUp 0.3s ease both; }

/* ── "What's next" prompt — bridges Explore to Read/Challenge ─────────── */
.next-up-note {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 14px 0 4px;
    padding: 12px 16px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(129,140,248,0.10), rgba(167,139,250,0.10));
    border: 1px solid rgba(129,140,248,0.35);
    box-shadow: 0 0 0 1px rgba(129,140,248,0.10), 0 4px 16px rgba(129,140,248,0.10);
    color: #e6edff;
    font-size: 13.5px;
    line-height: 1.5;
}
.next-up-note .next-up-icon {
    font-size: 20px;
    line-height: 1;
    flex-shrink: 0;
    filter: drop-shadow(0 0 6px rgba(129,140,248,0.5));
}
.next-up-note strong {
    color: #a5b4fc;
    font-weight: 700;
}

/* ── Navigation ──────────────────────────────────────────────────────────── */
.nav-buttons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.04);
}
.nav-buttons a {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 7px 14px;
    border-radius: 8px;
    background: linear-gradient(135deg, #4C1D95, #831843);
    border: 1px solid transparent;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    line-height: 1;
    white-space: nowrap;
    box-shadow: 0 3px 12px -2px rgba(76,29,149,0.35);
    transition: all 0.18s ease;
}
.nav-buttons a:hover {
    background: linear-gradient(135deg, #5B21B6, #9D174D);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px -2px rgba(91,33,182,0.45), 0 0 14px rgba(157,23,77,0.25);
}
.nav-buttons .kbd-hint {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-dim);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.nav-buttons .kbd-hint .kbd {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-dim);
    font-weight: 600;
    padding: 3px 8px;
    box-shadow: none;
}

/* Light-mode overrides for the lesson nav row — the dark-mode defaults
   above use near-white text on a faint cyan tint, which disappears on a
   white background. */
:root:not([data-theme="dark"]) .nav-buttons a {
    color: #fff;
    background: linear-gradient(135deg, #6366F1, #A855F7, #EC4899);
    border-color: transparent;
    box-shadow: 0 3px 12px -2px rgba(99,102,241,0.40);
}
:root:not([data-theme="dark"]) .nav-buttons a:hover {
    color: #fff;
    background: linear-gradient(135deg, #4F46E5, #9333EA, #DB2777);
    border-color: transparent;
    box-shadow: 0 6px 20px -2px rgba(99,102,241,0.50), 0 0 14px rgba(236,72,153,0.25);
}
:root:not([data-theme="dark"]) .nav-buttons .kbd-hint {
    color: var(--text-dim);
}
:root:not([data-theme="dark"]) .nav-buttons .kbd-hint .kbd {
    background: #ffffff;
    border-color: rgba(124,58,237,0.20);
    color: var(--violet);
    box-shadow: 0 1px 0 rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* ── Table ───────────────────────────────────────────────────────────────── */
.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    margin: 12px 0;
}
.data-table th, .data-table td {
    padding: 8px 12px;
    border: 1px solid var(--border);
    text-align: left;
}
.data-table th {
    background: var(--bg);
    color: var(--text-dim);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.data-table td { color: var(--text); }
.data-table tr:hover td { background: var(--card-subtle); }

/* ── Lesson info table (used inside step cards) ─────────────────────────── */
.info-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0;
    font-size: 13px;
    background: var(--bg);
    border-radius: 8px;
    overflow: hidden;
}
.info-table th,
.info-table td {
    padding: 10px 14px;
    border: 1px solid var(--border);
    text-align: left;
    vertical-align: top;
}
.info-table th {
    background: var(--bg-sidebar, var(--bg));
    color: var(--text-dim);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.info-table td { color: var(--text); }
.info-table tr:hover td { background: var(--card-subtle); }
.info-table code {
    background: var(--accent-dim, rgba(129,140,248,0.10));
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Space Mono', 'Consolas', monospace;
    font-size: 12px;
}

/* ── Flat array display ──────────────────────────────────────────────────── */
.flat-array {
    font-family: 'Space Mono', 'Consolas', monospace;
    font-size: 12px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 14px;
    word-break: break-all;
    line-height: 1.5;
    color: var(--text-dim);
    max-height: 110px;
    overflow-y: auto;
}

/* ── Guess input (Step 9) ────────────────────────────────────────────────── */
.guess-input {
    width: 80px;
    padding: 12px;
    font-size: 24px;
    text-align: center;
    background: var(--input-bg);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
}
.guess-input:focus {
    border-color: var(--accent);
    outline: none;
}
/* Compact variant for inline control rows on lesson pages — matches the
   height of .btn so the Load/Prev/Next row sits on one baseline. */
body.lesson-page .controls .guess-input {
    padding: 6px 10px;
    font-size: 14px;
    border-width: 1px;
    border-radius: 8px;
    height: auto;
    line-height: 1.2;
}

/* ── Lesson overview page ───────────────────────────────────────────────── */
.welcome {
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
    animation: fadeSlideUp 0.6s ease both;
    padding: 76px 24px 40px;
}

/* Top bar: back chip on the left, gear button on the right */
.welcome-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 28px;
}
.welcome-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(129,140,248,0.05);
    border: 1px solid rgba(129,140,248,0.18);
    color: var(--text-dim);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}
.welcome-back-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}
.welcome-back:hover {
    background: rgba(129,140,248,0.12);
    border-color: var(--accent);
    color: var(--accent);
    box-shadow: 0 0 18px rgba(129,140,248,0.25);
}
.welcome-back:hover .welcome-back-icon {
    transform: translateX(-3px);
}
[data-theme="dark"] .welcome-back {
    background: rgba(129,140,248,0.07);
    border-color: rgba(129,140,248,0.22);
}

/* Reset-this-lesson button on the welcome topbar. Sized like the old
   gear so the topbar layout is unchanged, but uses a circular-arrow
   icon and rotates on hover to telegraph the destructive action. */
.welcome-reset {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    flex-shrink: 0;
}
.welcome-reset:hover {
    background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(167,139,250,0.18));
    border-color: var(--red);
    color: var(--red);
    transform: rotate(-90deg);
    box-shadow: 0 0 18px rgba(248,113,113,0.30),
                0 0 32px rgba(167,139,250,0.18);
}

/* ── Home page reset buttons ────────────────────────────────────────────
   Two new reset entry points on the home page that mirror .welcome-reset:
   • .hero-reset-btn — top-right of the program hero, wipes ALL progress
   • .stage-reset-btn — top-right of each stage card, wipes only that stage
   Both use the same circular icon-button shape so the destructive intent
   reads consistently with the in-lesson reset the learner already knows. */
.hero-reset-btn,
.stage-reset-btn {
    position: absolute;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--input-bg);
    color: var(--text-dim);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease;
    z-index: 5;
}
.hero-reset-btn {
    top: 16px;
    right: 16px;
}
.stage-reset-btn {
    top: 16px;
    right: 16px;
}
.hero-reset-btn:hover,
.stage-reset-btn:hover {
    background: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(167,139,250,0.18));
    border-color: var(--red);
    color: var(--red);
    transform: rotate(-90deg);
    box-shadow: 0 0 18px rgba(248,113,113,0.30),
                0 0 32px rgba(167,139,250,0.18);
}
/* Each stage's reset button picks up that stage's accent at rest, so the
   button reads as "part of this card" until you hover and the destructive
   red takes over. Matches the body[data-stage] .welcome-reset pattern. */
.stage-reset-btn.s1 { border-color: rgba(167,139,250,0.40); color: var(--violet); }
.stage-reset-btn.s2 { border-color: rgba(129,140,248,0.40);  color: var(--accent); }
.stage-reset-btn.s3 { border-color: rgba(251,146,60,0.40); color: var(--orange); }
.stage-reset-btn.s4 { border-color: rgba(248,113,113,0.40);  color: var(--red); }
.stage-reset-btn.s5 { border-color: rgba(74,222,128,0.40); color: var(--green); }

.welcome h1 {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 30px;
    margin-bottom: 6px;
    line-height: 1.15;
    letter-spacing: -0.03em;
    color: var(--text);
    background: none;
    -webkit-text-fill-color: currentColor;
}
.welcome .tagline {
    font-size: 14px;
    color: var(--text-dim);
    margin-bottom: 22px;
}

/* Horizontal progress bar */
.welcome-progress {
    max-width: 540px;
    margin: 0 auto 36px;
}
.welcome-progress-track {
    height: 8px;
    border-radius: 999px;
    background: rgba(148,163,184,0.12);
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
}
.welcome-progress-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--accent), var(--violet));
    border-radius: 999px;
    transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
    box-shadow: none;
}
.welcome-progress-meta {
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--text-dim);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
.welcome-progress-pct {
    font-family: 'Space Mono', monospace;
    font-weight: 700;
    color: var(--accent);
    font-size: 13px;
    letter-spacing: 0.02em;
}
.welcome-progress-dot {
    color: var(--border);
}
.welcome-progress-sub {
    color: var(--text-dim);
}

@media (max-width: 600px) {
    .welcome-topbar { margin-bottom: 22px; }
    .welcome-back { padding: 7px 12px; font-size: 12px; }
    .welcome-reset { width: 34px; height: 34px; font-size: 16px; }
    .welcome-progress-meta { font-size: 11.5px; gap: 7px; }
}

/* Step cards grid */
.step-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    text-align: left;
}
.step-card {
    display: flex;
    align-items: center;
    gap: 18px;
    /* Right padding reserves space for the .step-icon watermark
       (64px wide, anchored at right:18px) so long descriptions never
       run under it. Left stays at 24px. */
    padding: 20px 96px 20px 24px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: 16px;
    color: var(--text);
    text-decoration: none;
    box-shadow: var(--shadow-sm);
    transition: all 0.25s ease;
    animation: fadeSlideUp 0.4s ease both;
    position: relative;
    overflow: hidden;
}
.step-card:nth-child(1)  { animation-delay: 0.04s; }
.step-card:nth-child(2)  { animation-delay: 0.08s; }
.step-card:nth-child(3)  { animation-delay: 0.12s; }
.step-card:nth-child(4)  { animation-delay: 0.16s; }
.step-card:nth-child(5)  { animation-delay: 0.20s; }
.step-card:nth-child(6)  { animation-delay: 0.24s; }
.step-card:nth-child(7)  { animation-delay: 0.28s; }
.step-card:nth-child(8)  { animation-delay: 0.32s; }
.step-card:nth-child(9)  { animation-delay: 0.36s; }
.step-card:nth-child(10) { animation-delay: 0.40s; }
.step-card:hover {
    transform: translateY(-4px);
    border-left-width: 5px;
    padding-left: 22px; /* compensate for thicker left border so content doesn't shift */
    border-left-color: var(--violet);
}
.step-card:hover .num { transform: scale(1.08); }
[data-theme="dark"] .step-card:hover .info .title { color: #fff; }
.step-card .num {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-weight: 800;
    font-size: 18px;
    flex-shrink: 0;
    transition: all 0.25s cubic-bezier(0.4,0,0.2,1);
    text-shadow: none;
}
/* Completed step styling */
.step-card.done {
    border-left-color: var(--green);
}
.step-card.done .num {
    background: var(--green);
    color: #fff;
    text-shadow: none;
    font-size: 22px;
}
.step-card .info .title {
    font-weight: 600;
    font-size: 17px;
    color: var(--text);
}
.step-card .info .desc {
    font-size: 13px;
    color: var(--text-dim);
    margin-top: 3px;
}
/* Step card status badge — floats in the top-right corner so it never
   collides with the watermark icon that sits centered on the right edge. */
.step-card .step-status {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--green);
    background: rgba(34, 211, 160, 0.12);
    border: 1px solid rgba(34, 211, 160, 0.35);
    padding: 2px 7px;
    border-radius: 999px;
    z-index: 3;
    pointer-events: none;
    line-height: 1;
}
.step-card .step-status:empty {
    display: none;
}
/* Activity-type icon (watermark on the right side of each card).
   Inline SVG that literally depicts the step concept — pixel grid for
   "first look", uneven bars for "class balance", bullseye for "pixel
   importance", etc. Sits behind the title text so it never crowds
   the heading. Uses currentColor so the stage hue carries through. */
.step-card .step-icon {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    width: 64px;
    height: 64px;
    color: var(--stage-accent, var(--violet));
    opacity: 0.22;
    pointer-events: none;
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 0;
    user-select: none;
    line-height: 0;
}
.step-card .step-icon svg {
    width: 100%;
    height: 100%;
    display: block;
}
.step-card:hover .step-icon {
    opacity: 0.78;
    transform: translateY(-50%) scale(1.18);
}
.step-card.done .step-icon {
    opacity: 0.08;
    color: var(--green);
}
.step-card .info {
    position: relative;
    z-index: 1;
}
/* Dark mode step card */
[data-theme="dark"] .step-card {
    border: 1px solid rgba(255,255,255,0.06);
    background: #111318;
}
[data-theme="dark"] .step-card:hover {
    border-color: rgba(255,255,255,0.10);
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    background: #161821;
}
[data-theme="dark"] .step-card .num {
    box-shadow: none;
}
[data-theme="dark"] .step-card.done .num {
    box-shadow: none;
}

.hidden { display: none !important; }

/* ── Bar chart classes ───────────────────────────────────────────────────── */
.bar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}
.bar-label {
    width: 60px;
    font-size: 13px;
    text-align: right;
    color: var(--text-dim);
}
.bar-track {
    flex: 1;
    height: 28px;
    background: var(--bg);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
    min-width: 2px;
}
.bar-fill.blue { background: linear-gradient(90deg, var(--accent), rgba(6, 182, 212, 0.7)); }
.bar-fill.red  { background: linear-gradient(90deg, var(--red), rgba(244, 63, 94, 0.7)); }
.bar-count {
    width: 40px;
    font-size: 13px;
    font-weight: 600;
}

/* ── Guess buttons (Step 0, 9) ──────────────────────────────────────────── */
.guess-btn {
    width: 44px;
    height: 44px;
    font-size: 17px;
    font-weight: 700;
    font-family: 'Space Mono', sans-serif;
    border-radius: 9px;
    position: relative;
    transition: transform 0.1s, border-color 0.15s, background 0.15s;
}
.guess-btn:hover {
    transform: scale(1.08);
}
.guess-btn:active {
    transform: scale(0.95);
}
.guess-btn .shortcut {
    position: absolute;
    bottom: 2px;
    right: 4px;
    font-size: 8px;
    color: var(--text-dim);
    font-family: 'Space Mono', monospace;
}
.guess-btn.selected {
    border-color: var(--accent);
    background: linear-gradient(135deg, #a5b4fc, #06b6d4);
    color: #04141a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.45);
}
.guess-btn.correct {
    border-color: var(--green);
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #04231a;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
    animation: pop 0.3s ease;
}
.guess-btn.wrong {
    border-color: var(--red);
    background: linear-gradient(135deg, #f87171, #e11d48);
    color: #2a0508;
    text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.guess-btn.correct .shortcut,
.guess-btn.wrong .shortcut,
.guess-btn.selected .shortcut {
    color: rgba(0,0,0,0.55);
}
.guess-btn.was-answer {
    border-color: var(--green);
    outline: 3px solid var(--green);
    animation: pulseGlow 1s ease 1;
}

/* ── Streak counter ─────────────────────────────────────────────────────── */
.streak-display {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(124,58,237,0.08);
    border: 1px solid rgba(167,139,250,0.22);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1px;
    color: var(--text);
    transition: color 0.3s, border-color 0.3s, background 0.3s, box-shadow 0.3s;
}
[data-theme="dark"] .streak-display {
    background: rgba(139,92,246,0.12);
    border-color: rgba(167,139,250,0.28);
    color: #E6E1FF;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.streak-display.hot {
    color: var(--orange);
    background: rgba(245,158,11,0.12);
    border-color: rgba(245,158,11,0.40);
    box-shadow: 0 0 12px rgba(245,158,11,0.18);
}
[data-theme="dark"] .streak-display.hot {
    color: #FBBF24;
    background: rgba(245,158,11,0.16);
    border-color: rgba(251,191,36,0.45);
}

/* ── Similarity meter ───────────────────────────────────────────────────── */
.sim-meter {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    margin: 12px 0;
}
.sim-meter .meter-track {
    flex: 1;
    height: 8px;
    background: var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.sim-meter .meter-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}
.sim-meter .meter-label {
    font-size: 18px;
    font-weight: 700;
    min-width: 60px;
    text-align: right;
}

/* ── Step 2: compact layout so the meter + verdict are visible above the
   fold, plus a 2-column split (grids on the left, readout on the right)
   on wide viewports. Scoped to .step2-compact so other steps that use
   .digit-grid.medium are not affected. */
.step2-compact { padding: 14px 18px; }
.step2-compact h3 { margin: 0 0 4px; font-size: 16px; }
.step2-compact .step2-intro { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.step2-compact .controls { margin: 6px 0; gap: 10px; }
.step2-compact .preset-row { margin: 4px 0 8px; }
.step2-compact .grids-row { margin: 0; gap: 10px; }
.step2-compact .grid-container { margin: 0; }
.step2-compact .grid-container .label { font-size: 11px; margin-bottom: 3px; }
.step2-compact .digit-grid.medium { width: 150px; }
.step2-compact .grid-caption { font-size: 10px; margin-top: 4px; max-width: 150px; }
.step2-compact .sim-meter { padding: 8px 12px; margin: 0; }
.step2-compact .sim-meter .meter-label { font-size: 16px; min-width: 50px; }
.step2-compact .verdict-card { margin: 8px 0 0; }
.step2-compact .verdict-card .verdict-body { padding: 10px 14px; }
.step2-compact .verdict-card .verdict-title { font-size: 10px; margin-bottom: 4px; }
.step2-compact .verdict-card .verdict-headline { font-size: 13.5px; margin-bottom: 3px; }
.step2-compact .verdict-card .verdict-text { font-size: 12px; line-height: 1.45; }

/* On wide viewports split the lower area into two columns: grids on the
   left, sim-meter + verdict stacked on the right. Falls back to a single
   column on narrow screens so nothing gets crushed. */
.step2-compact .step2-split {
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 16px;
    align-items: start;
}
.step2-compact .step2-readout { display: flex; flex-direction: column; min-width: 0; }
@media (max-width: 1100px) {
    .step2-compact .step2-split { grid-template-columns: 1fr; }
}

/* ── Step 7: Accuracy Trap — surface the metric definitions instead of
   hiding them in hover tooltips, and add a chart-reading hint. */
.step7-compact { padding: 14px 18px; }
.step7-compact h3 { margin: 0 0 6px; font-size: 16px; }
.step7-compact .step7-intro { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--text); }
.step7-compact .step7-intro strong { color: var(--accent); }
.step7-compact .step7-intro code { font-size: 12px; padding: 1px 5px; background: rgba(129,140,248,0.08); border-radius: 4px; color: var(--accent); }
.step7-compact .controls { margin: 6px 0 10px; }

/* Metric cards: make the per-card definition always visible (drop hover) */
.step7-compact .metrics-row { margin: 6px 0 10px; gap: 10px; }
.step7-compact .metric-card { padding: 12px 12px 10px; min-width: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.step7-compact .metric-card .name { margin-bottom: 2px; font-size: 11px; cursor: default; }
.step7-compact .metric-card .val { font-size: 26px; line-height: 1.1; margin-bottom: 6px; }
.step7-compact .metric-desc {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-dim);
    border-top: 1px dashed var(--border);
    padding-top: 6px;
    margin-top: auto;
    width: 100%;
}
.step7-compact .metric-desc strong { color: var(--text); font-weight: 600; }
.step7-compact .metric-formula { display: inline-block; margin-top: 3px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--text-dim); opacity: 0.75; }

/* Hide the legacy hover tooltip inside the compact scope so we don't get
   both the always-visible description AND the floating tooltip. */
.step7-compact .metric-tip { display: none !important; }

/* Chart-reading hint — small callout above the line chart */
.step7-compact .step7-chart-card { margin-top: 12px; padding: 12px 16px 14px; }
.step7-compact .step7-chart-card h3 { margin: 0 0 4px; font-size: 14px; }
.step7-compact .chart-hint {
    margin: 0 0 8px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
    padding: 8px 12px;
    border-left: 3px solid var(--accent);
    background: rgba(6, 214, 224, 0.05);
    border-radius: 4px;
}
.step7-compact .chart-hint strong:nth-of-type(1) { color: var(--green); }
.step7-compact .chart-hint strong:nth-of-type(2) { color: var(--red); }

/* ── Step 6: compact layout so the 10 bars + imbalance ratio + lazy-model
   warning all fit above the fold. Scoped to .step6-compact so other steps
   that use .bar-row are not affected. */
.step6-compact { padding: 12px 18px; }
.step6-compact .step6-intro { margin: 0 0 10px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.step6-compact .controls { margin: 6px 0; gap: 12px; }
.step6-compact .btn-group { margin: 4px 0 8px; }
.step6-compact #balance-bars { margin: 8px 0; }
.step6-compact .bar-row { margin: 2px 0; gap: 8px; }
.step6-compact .bar-track { height: 18px; }
.step6-compact .bar-label { font-size: 12px; width: 54px; }
.step6-compact .bar-count { font-size: 12px; width: 36px; }
.step6-compact .info-box { padding: 8px 14px; margin: 6px 0 0; text-align: center; font-size: 14px; }
.step6-compact #balance-warn { font-size: 13px; }

/* ── Step 2: emphasise the Difference panel + verdict card ─────────────── */
.grid-container.diff-highlight {
    padding: 10px 10px 8px;
    border: 1px dashed rgba(6, 214, 224, 0.55);
    border-radius: var(--radius);
    background: rgba(6, 214, 224, 0.05);
}
.grid-container.diff-highlight .label {
    color: var(--accent);
}
.diff-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--accent);
    background: rgba(6, 214, 224, 0.12);
    border: 1px solid rgba(6, 214, 224, 0.45);
    border-radius: 999px;
    vertical-align: middle;
}
.grid-caption {
    margin-top: 6px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--text-dim);
    max-width: 220px;
}
.verdict-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
    margin: 12px 0 0;
    overflow: hidden;
    transition: border-color 0.3s ease;
}
.verdict-card .verdict-strip {
    width: 6px;
    flex-shrink: 0;
    transition: background 0.3s ease;
}
.verdict-card .verdict-body {
    padding: 12px 16px;
    flex: 1;
}
.verdict-card .verdict-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 6px;
}
.verdict-card .verdict-headline {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}
.verdict-card .verdict-text {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
}

/* Step 2: preset pair buttons — distinct colours + selected state.
   Each preset class sets --btn-color, and the rules below tint border,
   background, dot, hover glow, and the .selected glow from that one var. */
.preset-hard    { --btn-color: var(--red); }
.preset-mid     { --btn-color: var(--orange); }
.preset-easy    { --btn-color: var(--green); }
.preset-extreme { --btn-color: #8b5cf6; } /* violet — visually distinct from green */

.btn-group .btn-preset {
    display: inline-flex;
    align-items: center;
    color: var(--text);
    border: 1px solid color-mix(in srgb, var(--btn-color) 55%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 14%, transparent) 0%,
        color-mix(in srgb, var(--btn-color)  4%, transparent) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--btn-color) 8%, transparent) inset,
        0 1px 0 rgba(255,255,255,0.04) inset;
    transition: transform 0.15s ease, box-shadow 0.2s ease,
                background 0.2s ease, border-color 0.2s ease;
}
/* Dark-mode: mute the tint — bright color at full saturation on a dark
   background is more visually loud than on light. Knock the fill down
   and darken the border so the chips sit at the same depth as the nav
   buttons and preset rail. */
[data-theme="dark"] .btn-group .btn-preset {
    border-color: color-mix(in srgb, var(--btn-color) 32%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 8%, #0a0a12) 0%,
        color-mix(in srgb, var(--btn-color) 3%, #0a0a12) 100%);
    color: var(--text-dim);
    box-shadow: none;
}
/* Light-mode: the bright tinted fill made the label blend with the chip.
   Use a deeper-saturated text color derived from the accent and bump the
   fill contrast so the chip reads clearly on white. */
:root:not([data-theme="dark"]) .btn-group .btn-preset {
    color: color-mix(in srgb, var(--btn-color) 85%, #1a1a1a);
    border-color: color-mix(in srgb, var(--btn-color) 50%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 18%, #ffffff) 0%,
        color-mix(in srgb, var(--btn-color)  8%, #ffffff) 100%);
    font-weight: 600;
}
:root:not([data-theme="dark"]) .btn-group .btn-preset:hover {
    color: color-mix(in srgb, var(--btn-color) 95%, #000);
    border-color: color-mix(in srgb, var(--btn-color) 75%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 26%, #ffffff) 0%,
        color-mix(in srgb, var(--btn-color) 14%, #ffffff) 100%);
    box-shadow: none;
}
:root:not([data-theme="dark"]) .btn-group .btn-preset.selected {
    color: #ffffff;
    border-color: var(--btn-color);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 100%, transparent) 0%,
        color-mix(in srgb, var(--btn-color) 80%, #000) 100%);
    box-shadow: 0 0 0 1.5px var(--btn-color) inset;
}
:root:not([data-theme="dark"]) .btn-group .btn-preset .preset-meta {
    color: color-mix(in srgb, var(--btn-color) 65%, #333);
    opacity: 0.8;
}
.btn-group .btn-preset .preset-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--btn-color);
    flex-shrink: 0;
}
.btn-group .btn-preset .preset-meta {
    margin-left: 4px;
    opacity: 0.65;
    font-weight: 500;
}
.btn-group .btn-preset:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--btn-color) 80%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 18%, transparent) 0%,
        color-mix(in srgb, var(--btn-color)  6%, transparent) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--btn-color) 14%, transparent) inset;
    transform: translateY(-1px);
}
[data-theme="dark"] .btn-group .btn-preset:hover {
    color: var(--text);
    border-color: color-mix(in srgb, var(--btn-color) 55%, transparent);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 14%, #0a0a12) 0%,
        color-mix(in srgb, var(--btn-color)  5%, #0a0a12) 100%);
    box-shadow: none;
}
.btn-group .btn-preset.selected {
    color: #ffffff;
    border-color: var(--btn-color);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 32%, transparent) 0%,
        color-mix(in srgb, var(--btn-color) 14%, transparent) 100%);
    box-shadow:
        0 0 0 1.5px var(--btn-color) inset;
    transform: translateY(-1px);
}
[data-theme="dark"] .btn-group .btn-preset.selected {
    color: #ffffff;
    border-color: color-mix(in srgb, var(--btn-color) 75%, #000);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--btn-color) 22%, #0a0a12) 0%,
        color-mix(in srgb, var(--btn-color) 10%, #0a0a12) 100%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--btn-color) 55%, #000) inset;
}
.btn-group .btn-preset.selected .preset-dot {
    background: #ffffff;
}
.btn-group .btn-preset.selected .preset-meta {
    opacity: 0.85;
}

/* ── Prototypes overview grid (Step 7) ──────────────────────────────────── */
.proto-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    margin: 16px 0;
    max-width: 100%;
    overflow: hidden;
}
.proto-item {
    text-align: center;
    padding: 10px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: border-color 0.2s, transform 0.1s;
    overflow: hidden;
}
/* Make digit grids fluid inside proto items */
.proto-item .digit-grid { width: 100% !important; }
.proto-item:hover {
    border-color: var(--accent);
    transform: translateY(-2px);
}
.proto-item .proto-label {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: var(--text-dim);
}

/* ── Hint rows (Step 9) ─────────────────────────────────────────────────── */
.hint-progress {
    display: flex;
    gap: 4px;
    margin: 8px 0;
    justify-content: center;
}
.hint-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border);
    transition: background 0.3s;
}
.hint-dot.revealed {
    background: var(--accent);
}

/* ── Score stars ─────────────────────────────────────────────────────────── */
.score-stars {
    display: flex;
    gap: 8px;
    justify-content: center;
    font-size: 28px;
    margin: 12px 0;
}

/* ── Auto-play button ───────────────────────────────────────────────────── */
/* Sits next to the slider as the secondary "watch it animate" affordance.
   The plain .btn rendering disappeared into the dark card, so promote it
   to a violet-tinted pill that visibly pairs with the cyan slider — and
   flips to a red 'recording' state while autoplay is running. */
.btn-play {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 20px;
    font-size: 13.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    border-radius: 999px;
    color: #ffffff;
    border: 1px solid rgba(168, 85, 247, 0.65);
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.22) 0%,
        rgba(168, 85, 247, 0.10) 100%);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.10) inset,
        0 0 16px rgba(168, 85, 247, 0.30),
        0 4px 12px rgba(0, 0, 0, 0.35);
}
.btn-play:hover {
    border-color: rgba(192, 132, 252, 0.95);
    background: linear-gradient(180deg,
        rgba(168, 85, 247, 0.34) 0%,
        rgba(168, 85, 247, 0.18) 100%);
    box-shadow:
        0 0 0 1px rgba(168, 85, 247, 0.18) inset,
        0 0 22px rgba(168, 85, 247, 0.50),
        0 6px 16px rgba(0, 0, 0, 0.40);
    transform: translateY(-1px);
}
.btn-play:active {
    transform: translateY(0);
}
.btn-play.playing {
    color: #fff;
    border-color: rgba(244, 63, 94, 0.85);
    background: linear-gradient(180deg,
        rgba(244, 63, 94, 0.32) 0%,
        rgba(244, 63, 94, 0.16) 100%);
    box-shadow:
        0 0 0 1px rgba(244, 63, 94, 0.18) inset,
        0 0 20px rgba(244, 63, 94, 0.45),
        0 4px 14px rgba(0, 0, 0, 0.40);
    animation: btn-play-pulse 1.2s ease-in-out infinite;
}
@keyframes btn-play-pulse {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(244, 63, 94, 0.18) inset,
            0 0 20px rgba(244, 63, 94, 0.45),
            0 4px 14px rgba(0, 0, 0, 0.40);
    }
    50% {
        box-shadow:
            0 0 0 1px rgba(244, 63, 94, 0.28) inset,
            0 0 30px rgba(244, 63, 94, 0.65),
            0 4px 14px rgba(0, 0, 0, 0.40);
    }
}

/* ── Paint grid overrides ───────────────────────────────────────────────── */
.paint-grid .cell {
    cursor: crosshair;
    user-select: none;
    -webkit-user-select: none;
}
.paint-grid .cell:hover {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
    z-index: 2;
    transform: none;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .sidebar {
        transform: translateX(-100%);
    }
    .sidebar.open {
        transform: translateX(0);
    }
    .mobile-toggle {
        display: flex;
    }
    main {
        margin-left: 0;
        padding: 60px 20px 32px;
    }
    .grids-row {
        gap: 12px;
    }
    .digit-grid.large { width: 280px; }
    .digit-grid.medium { width: 220px; }
    .welcome { margin: 30px auto; padding: 0 20px; }
    .step-cards { grid-template-columns: 1fr; }
    .proto-grid { grid-template-columns: repeat(3, 1fr); }
    .metrics-row { gap: 8px; }
    .metric-card { min-width: 100px; padding: 12px; }
    .metric-card .val { font-size: 22px; }
    .nav-buttons a { padding: 5px 8px; font-size: 11px; }
    .content-layout { flex-direction: column; }

    /* Mobile: release the viewport lock so users can scroll the page normally */
    body.lesson-page { overflow: auto; height: auto; padding-top: 54px; }
    body.lesson-page .sidebar { top: 54px; }
    body.lesson-page main { height: auto; display: block; padding: 12px 20px 32px; }
    body.lesson-page .progress-wrap { margin: 0 -20px 12px; }
    body.lesson-page .content-layout { overflow: visible; }
    body.lesson-page .content-main { overflow: visible; padding-right: 0; }
}
@media (max-width: 480px) {
    .digit-grid.large { width: 240px; }
    .digit-grid.medium { width: 180px; }
    .proto-grid { grid-template-columns: repeat(2, 1fr); }
    .guess-btn { width: 44px; height: 44px; font-size: 18px; }
}

/* ── Overlay for mobile sidebar ─────────────────────────────────────────── */
.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--overlay-bg);
    z-index: 90;
}
.sidebar-overlay.show { display: block; }

/* ── Portal: home & stage pages ─────────────────────────────────────────── */
.portal-home {
    max-width: 1120px;
    margin: 0 auto;
    padding: 50px 24px 60px;
    animation: fadeSlideUp 0.5s ease both;
}

/* ── Hidden /admin console (instructor only) ──────────────────────────── */
.admin-page {
    max-width: 920px;
    margin: 0 auto;
    padding: 96px 24px 80px;
    animation: fadeSlideUp 0.5s ease both;
}

.admin-header {
    text-align: center;
    margin-bottom: 48px;
}
.admin-eyebrow {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--violet);
    padding: 5px 14px;
    border-radius: 999px;
    border: 1px solid rgba(167,139,250,0.4);
    background: rgba(167,139,250,0.08);
    margin-bottom: 14px;
}
.admin-header h1 {
    font-size: 32px;
    margin-bottom: 6px;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.admin-tagline {
    color: var(--text-dim);
    font-size: 14px;
}

.admin-section {
    margin-bottom: 44px;
}
.admin-section-head {
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.admin-section-head h2 {
    font-size: 18px;
    color: var(--text);
    margin-bottom: 4px;
    letter-spacing: -0.01em;
}
.admin-section-head p {
    font-size: 13px;
    color: var(--text-dim);
}

.admin-resource-grid {
    display: grid;
    gap: 14px;
}
.admin-resource {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 18px 22px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        rgba(129,140,248,0.06) 0%,
        rgba(167,139,250,0.06) 100%);
    border: 1px solid rgba(129,140,248,0.25);
    transition: all 0.22s ease;
    position: relative;
    overflow: hidden;
}
.admin-resource::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent), var(--violet));
    opacity: 0.7;
}
.admin-resource:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 24px rgba(129,140,248,0.2),
                0 0 40px rgba(167,139,250,0.10);
}
[data-theme="dark"] .admin-resource {
    background: #111318;
    border-color: rgba(129,140,248,0.25);
}
.admin-resource-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(167,139,250,0.18));
    color: var(--accent);
    border: 1px solid rgba(129,140,248,0.35);
}
.admin-resource-body {
    flex: 1;
    min-width: 0;
}
.admin-resource-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}
.admin-resource-sub {
    font-size: 12.5px;
    color: var(--text-dim);
    line-height: 1.45;
}
.admin-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-decoration: none;
    border: 1px solid rgba(129,140,248,0.4);
    background: rgba(129,140,248,0.08);
    color: var(--accent);
    transition: all 0.22s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.admin-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, rgba(129,140,248,0.22), rgba(167,139,250,0.22));
    border-color: var(--accent);
    box-shadow: 0 4px 18px rgba(129,140,248,0.30),
                0 0 28px rgba(167,139,250,0.18);
}
.admin-btn.primary {
    background: linear-gradient(135deg, var(--accent), var(--violet));
    color: #04141a;
    border-color: transparent;
    box-shadow: 0 2px 14px rgba(129,140,248,0.35);
}
.admin-btn.primary:hover {
    color: #04141a;
    box-shadow: 0 6px 24px rgba(129,140,248,0.55),
                0 0 36px rgba(167,139,250,0.35);
}

.admin-doc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid var(--border);
    border-radius: 12px;
    overflow: hidden;
}
.admin-doc-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--card-bg);
    transition: background 0.18s ease;
}
.admin-doc-list li:last-child { border-bottom: none; }
.admin-doc-list li:hover {
    background: rgba(129,140,248,0.04);
}
.admin-doc-name {
    font-size: 13px;
    color: var(--text);
    font-weight: 600;
}
.admin-doc-path {
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    color: var(--text-dim);
}

/* ── Display Settings — home view toggle ─────────────────────────────── */
.admin-saved-flash {
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(74,222,128,0.08);
    border: 1px solid rgba(74,222,128,0.35);
    color: var(--green);
    font-size: 13px;
    font-weight: 600;
}
.admin-settings-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.admin-view-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    border: none;
    padding: 0;
    margin: 0;
}
.admin-view-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 18px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.admin-view-option:hover {
    border-color: rgba(129,140,248,0.45);
}
.admin-view-option input[type="radio"] {
    margin-top: 4px;
    accent-color: var(--accent);
    flex-shrink: 0;
}
.admin-view-option.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 4px 18px rgba(129,140,248,0.18);
    background: linear-gradient(135deg, rgba(129,140,248,0.07), rgba(167,139,250,0.07));
}
.admin-view-option-body { flex: 1; min-width: 0; }
.admin-view-option-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.admin-view-option-desc {
    font-size: 12px;
    color: var(--text-dim);
    line-height: 1.5;
}
.admin-view-tag {
    font-family: 'Space Mono', monospace;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(129,140,248,0.12);
    border: 1px solid rgba(129,140,248,0.4);
    color: var(--accent);
    font-weight: 600;
}
.admin-view-tag-exp {
    background: rgba(167,139,250,0.10);
    border-color: rgba(167,139,250,0.4);
    color: var(--violet);
}
.admin-settings-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
}
@media (max-width: 720px) {
    .admin-view-toggle { grid-template-columns: 1fr; }
}

.admin-footnote {
    margin-top: 56px;
    padding: 14px 18px;
    border-radius: 10px;
    background: rgba(167,139,250,0.06);
    border: 1px dashed rgba(167,139,250,0.35);
    font-size: 12px;
    color: var(--text-dim);
    text-align: center;
}
.admin-footnote-icon {
    margin-right: 6px;
}
.admin-footnote code {
    font-family: 'Space Mono', monospace;
    color: var(--violet);
    background: rgba(167,139,250,0.10);
    padding: 1px 8px;
    border-radius: 4px;
    font-size: 11.5px;
}

/* ── Admin login form ───────────────────────────────────────────────── */

.admin-login-page {
    max-width: 520px;
}
.admin-login-card {
    padding: 32px;
}
.admin-login-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.admin-login-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-dim);
    font-weight: 700;
}
.admin-login-input {
    width: 100%;
    padding: 14px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    letter-spacing: 0.04em;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.admin-login-input:focus {
    outline: none;
    border-color: var(--violet);
    box-shadow: 0 0 0 3px rgba(167,139,250,0.18);
}
.admin-login-error {
    padding: 10px 14px;
    border-radius: 8px;
    background: rgba(239,68,68,0.10);
    border: 1px solid rgba(239,68,68,0.35);
    color: #ef4444;
    font-size: 13px;
}
.admin-login-submit {
    margin-top: 6px;
    align-self: flex-start;
}
.admin-login-hint {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-dim);
}
.admin-login-hint code {
    font-family: 'Space Mono', monospace;
    color: var(--violet);
    background: rgba(167,139,250,0.10);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 11.5px;
}

/* Logout button on the admin console header */
.admin-logout-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: -8px;
}
.admin-logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg-card);
    color: var(--text-dim);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}
.admin-logout-btn:hover {
    color: var(--violet);
    border-color: var(--violet);
}

@media (max-width: 640px) {
    .admin-resource {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
    .admin-doc-list li {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero — program landing header
   Editorial redesign:
   • Sora display title (geometric sans) with an Instrument Serif italic accent
   • Centered hero rule (line · dot · line) as a typographic divider
   • Connector-arrow tagline below
   • Background: single soft aurora glow + masked dot grid
   ══════════════════════════════════════════════════════════════════════════ */
.portal-hero {
    position: relative;
    text-align: center;
    padding: 32px 24px;
    margin: 0 0 28px;
    min-height: 180px;
    border-radius: 24px;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
:root:not([data-theme="dark"]) .portal-hero {
    border: 1px solid rgba(99,102,241,0.08);
    box-shadow: 0 2px 12px rgba(99,102,241,0.06);
}

/* ── Background layers ────────────────────────────────────────────── */
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    border-radius: inherit;
}
.hero-bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(99,102,241,0.10) 1px, transparent 1px);
    background-size: 24px 24px;
    -webkit-mask-image: radial-gradient(ellipse 70% 90% at center, #000 25%, transparent 78%);
            mask-image: radial-gradient(ellipse 70% 90% at center, #000 25%, transparent 78%);
}
[data-theme="dark"] .hero-bg-grid {
    background-image: radial-gradient(circle, rgba(148,163,184,0.20) 1px, transparent 1px);
}
.hero-bg-aurora {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 900px;
    height: 360px;
    transform: translate(-50%, -50%);
    background:
        radial-gradient(ellipse 50% 60% at 15% 45%, rgba(124,58,237,0.35), transparent 60%),
        radial-gradient(ellipse 45% 55% at 85% 35%, rgba(236,72,153,0.25), transparent 60%),
        radial-gradient(ellipse 40% 50% at 50% 70%, rgba(34,211,238,0.15), transparent 60%);
    filter: blur(60px);
    opacity: 0.9;
    animation: hero-aurora-breathe 12s ease-in-out infinite;
}
[data-theme="light"] .hero-bg-aurora,
:root:not([data-theme="dark"]) .hero-bg-aurora {
    background:
        radial-gradient(ellipse 50% 60% at 20% 50%, rgba(99,102,241,0.18), transparent 60%),
        radial-gradient(ellipse 45% 55% at 80% 35%, rgba(168,85,247,0.12), transparent 60%),
        radial-gradient(ellipse 35% 45% at 50% 65%, rgba(236,72,153,0.06), transparent 60%);
    opacity: 0.6;
}
@keyframes hero-aurora-breathe {
    0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: 0.85; }
    50%      { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
}
.brand-logo-wrap {
    position: relative;
    cursor: pointer;
    filter: drop-shadow(0 0 16px rgba(129,140,248,0.3));
    transition: filter 0.3s, transform 0.3s;
}
.brand-logo-wrap:hover {
    filter: drop-shadow(0 0 24px rgba(129,140,248,0.5)) drop-shadow(0 0 40px rgba(167,139,250,0.3));
    transform: scale(1.08);
}
[data-theme="dark"] .brand-logo-wrap { filter: drop-shadow(0 0 24px rgba(129,140,248,0.5)) drop-shadow(0 0 48px rgba(167,139,250,0.2)); }
[data-theme="dark"] .brand-logo-wrap:hover { filter: drop-shadow(0 0 32px rgba(129,140,248,0.7)) drop-shadow(0 0 60px rgba(167,139,250,0.35)); }

/* ── Brand tooltip ─────────────────────────────────────────────────── */
.brand-tooltip {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    width: 320px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
    box-shadow: 0 12px 40px rgba(0,0,0,0.15);
    z-index: 100;
}
[data-theme="dark"] .brand-tooltip {
    background: #111318;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.5);
}
.brand-tooltip::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%) rotate(45deg);
    width: 12px;
    height: 12px;
    background: var(--surface);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
}
[data-theme="dark"] .brand-tooltip::before {
    background: #111318;
    border-color: rgba(255,255,255,0.08);
}
/* Tooltip disabled for now — uncomment to re-enable
.brand-logo-wrap:hover .brand-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
} */
.brand-tooltip-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-align: center;
}
.brand-tooltip-items { display: flex; flex-direction: column; gap: 8px; }
.brand-tooltip-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--text-dim);
}
.brand-tooltip-row strong { color: var(--text); font-weight: 600; }
.bt-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
}
.bt-orbit {
    background: conic-gradient(#818cf8, #a78bfa, #818cf8);
    animation: bt-spin 3s linear infinite;
}
@keyframes bt-spin { to { transform: rotate(360deg); } }

/* ── Title ────────────────────────────────────────────────────────── */
.portal-home h1.hero-title {
    position: relative;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 56px;
    font-weight: 800;
    margin: 0 0 14px;
    padding-bottom: 4px;
    line-height: 1.15;
    letter-spacing: -0.05em;
    color: var(--text);
    background: none;
    -webkit-text-fill-color: currentColor;
    z-index: 1;
}
.hero-title-grad {
    background: linear-gradient(135deg, var(--accent) 0%, var(--violet) 35%, var(--pink, #EC4899) 65%, var(--cyan) 100%);
    background-size: 250% 250%;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: hero-title-shimmer 7s ease-in-out infinite;
}
@keyframes hero-title-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}
/* Italic accent word in hero title */
.hero-title-italic {
    font-family: 'Instrument Serif', 'Georgia', serif;
    font-style: italic;
    font-weight: 400;
    letter-spacing: 0;
}
:root:not([data-theme="dark"]) .portal-home h1.hero-title {
    background: linear-gradient(135deg, #1C1C22 10%, #4F46E5 40%, #9333EA 65%, #DB2777 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Tagline ──────────────────────────────────────────────────────── */
.portal-home .tagline {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 15px;
    color: var(--text-dim);
    margin: 0;
    z-index: 1;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: 400;
    letter-spacing: -0.01em;
}
.tagline-from { font-weight: 500; }
.tagline-to {
    font-weight: 600;
    background: linear-gradient(135deg, var(--accent), var(--violet));
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
}
.tagline-arrow {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 42px;
    height: 14px;
}
.tagline-arrow-line {
    position: absolute;
    left: 0;
    right: 9px;
    top: 50%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--text-dim) 30%, var(--accent));
    transform: translateY(-50%);
}
.tagline-arrow-head {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-54%);
    color: var(--accent);
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
}

/* ── Stat cards ───────────────────────────────────────────────────── */
.hero-stats {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 14px;
    position: relative;
    z-index: 1;
    flex-wrap: wrap;
}
.hero-stat-card {
    --hsc: var(--accent);
    --hsc-rgb: 6, 214, 224;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px 14px 16px;
    min-width: 158px;
    border-radius: 16px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.045);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    transition: transform 0.25s ease,
                border-color 0.25s ease,
                box-shadow 0.25s ease,
                background 0.25s ease;
    position: relative;
    overflow: hidden;
}
[data-theme="dark"] .hero-stat-card {
    background: #111318;
    border-color: rgba(var(--hsc-rgb), 0.18);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.hero-stat-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(var(--hsc-rgb), 0.10), transparent 55%);
    pointer-events: none;
    opacity: 0.7;
}
.hero-stat-card:hover {
    transform: translateY(-3px);
    border-color: rgba(var(--hsc-rgb), 0.55);
    background: rgba(var(--hsc-rgb), 0.06);
    box-shadow: 0 10px 28px rgba(var(--hsc-rgb), 0.18),
                0 0 0 1px rgba(var(--hsc-rgb), 0.25);
}
.hero-stat-cyan   { --hsc: var(--accent); --hsc-rgb: 129, 140, 248; }
.hero-stat-violet { --hsc: var(--violet); --hsc-rgb: 167, 139, 250; }
.hero-stat-orange { --hsc: var(--orange); --hsc-rgb: 251, 191, 36; }

[data-theme="light"] .hero-stat-cyan   { --hsc-rgb: 8, 145, 178; }
[data-theme="light"] .hero-stat-violet { --hsc-rgb: 124, 58, 237; }
[data-theme="light"] .hero-stat-orange { --hsc-rgb: 217, 119, 6; }

.hero-stat-icon {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--hsc-rgb), 0.14);
    color: var(--hsc);
    flex-shrink: 0;
    border: 1px solid rgba(var(--hsc-rgb), 0.22);
    position: relative;
    z-index: 1;
}
.hero-stat-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1;
    position: relative;
    z-index: 1;
}
.hero-stat-val {
    font-family: 'Space Mono', system-ui, sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 5px;
    line-height: 1;
}
.hero-stat-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-dim);
    font-weight: 600;
}

/* ══════════════════════════════════════════════════════════════════════════
   Roadmap — two-column zigzag grid (default cards view)
   The home page can render in one of two layouts; the admin console picks
   which one. The cards view is the default and uses a CSS grid that
   alternates left/right column with horizontal/vertical connector arrows.
   The neuron view is opt-in and uses a flex column with .view-neuron
   overrides further down.
   ══════════════════════════════════════════════════════════════════════════ */
.roadmap {
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    grid-template-rows: auto 52px auto 52px auto;
    align-items: stretch;
    position: relative;
}
.roadmap-stage {
    animation: fadeSlideUp 0.6s ease both;
    position: relative;
    z-index: 1;
}

/* ── Neural-network mesh overlay (drawn by roadmap-mesh-cards.js) ──────── */
.roadmap-mesh {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 0;
}
.mesh-path {
    fill: none;
    stroke-width: 1.6;
    stroke-linecap: round;
    opacity: 0.55;
    transition: opacity 0.45s ease, stroke-width 0.3s ease, stroke 0.3s ease;
}
.mesh-path[data-pair="s1-s2"] { stroke: var(--violet); }
.mesh-path[data-pair="s2-s3"] { stroke: var(--accent); }
.mesh-path[data-pair="s3-s4"] { stroke: var(--orange); }
.mesh-path[data-pair="s4-s5"] { stroke: var(--red);    }
.mesh-path.mesh-dropped { opacity: 0.12; }
/* When any lesson is hovered, gently mute the rest of the web and
 * highlight that lesson's own incoming + outgoing connections. The
 * non-active paths stay readable so the mesh doesn't collapse into
 * an empty stage with one glowing line. */
.roadmap-mesh.mesh-hover .mesh-path { opacity: 0.38; }
.roadmap-mesh.mesh-hover .mesh-path.mesh-active {
    opacity: 1;
    stroke-width: 2.6;
    filter: drop-shadow(0 0 1.5px currentColor);
}
[data-theme="dark"] .mesh-path { opacity: 0.6; }
[data-theme="dark"] .mesh-path.mesh-dropped { opacity: 0.14; }
[data-theme="dark"] .roadmap-mesh.mesh-hover .mesh-path { opacity: 0.42; }
/* Active state in dark mode: bright, almost-white inner stroke with the
 * stage colour serving as a tight aura around it. */
[data-theme="dark"] .roadmap-mesh.mesh-hover .mesh-path.mesh-active {
    stroke-width: 2.4;
    filter: none;
}
[data-theme="dark"] .roadmap-mesh.mesh-hover .mesh-path.mesh-active[data-pair="s1-s2"] {
    stroke: #e9d5ff;
    filter: drop-shadow(0 0 1.5px #a78bfa);
}
[data-theme="dark"] .roadmap-mesh.mesh-hover .mesh-path.mesh-active[data-pair="s2-s3"] {
    stroke: #cffafe;
    filter: drop-shadow(0 0 1.5px #818cf8);
}
[data-theme="dark"] .roadmap-mesh.mesh-hover .mesh-path.mesh-active[data-pair="s3-s4"] {
    stroke: #fef3c7;
    filter: drop-shadow(0 0 1.5px #f59e0b);
}
[data-theme="dark"] .roadmap-mesh.mesh-hover .mesh-path.mesh-active[data-pair="s4-s5"] {
    stroke: #ffe4e6;
    filter: drop-shadow(0 0 1.5px #f87171);
}

/* On desktop the mesh replaces the single-arrow connectors entirely. */
@media (min-width: 961px) {
    .rm-arrow.rm-h::before,
    .rm-arrow.rm-h::after,
    .rm-arrow.rm-v::before,
    .rm-arrow.rm-v::after,
    .pulse-dot {
        display: none !important;
    }
}

/* Grid positions (zigzag: 1→2 then 3←4 then 5) */
.rpos-1 { grid-column: 1; grid-row: 1; }
.rpos-2 { grid-column: 3; grid-row: 1; }
.rpos-3 { grid-column: 3; grid-row: 3; }
.rpos-4 { grid-column: 1; grid-row: 3; }
.rpos-5 { grid-column: 1; grid-row: 5; }

.rm-1-2 { grid-column: 2; grid-row: 1; }
.rm-2-3 { grid-column: 3; grid-row: 2; }
.rm-3-4 { grid-column: 2; grid-row: 3; }
.rm-4-5 { grid-column: 1; grid-row: 4; }

/* ── Horizontal connector arrows ─────────────────────────────────────── */
.rm-arrow.rm-h {
    display: flex;
    align-items: center;
    position: relative;
    padding: 0 6px;
}
.rm-arrow.rm-h::before {
    content: '';
    position: absolute;
    top: 50%;
    height: 3px;
    border-radius: 2px;
    transform: translateY(-50%);
}
.rm-arrow.rm-h::after {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
}
/* Right-pointing (S1 → S2) */
.rm-h.rm-r::before {
    left: 0;
    right: 14px;
    background: linear-gradient(90deg, var(--accent), var(--violet));
}
.rm-h.rm-r::after {
    right: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-left: 12px solid var(--violet);
    filter: drop-shadow(0 0 4px rgba(167,139,250,0.4));
}
/* Left-pointing (S3 → S4) */
.rm-h.rm-l::before {
    right: 0;
    left: 14px;
    background: linear-gradient(90deg, var(--red), var(--orange));
}
.rm-h.rm-l::after {
    left: 0;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
    border-right: 12px solid var(--red);
    filter: drop-shadow(0 0 4px rgba(248,113,113,0.4));
}

/* ── Vertical connector arrows ───────────────────────────────────────── */
.rm-arrow.rm-v {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    padding: 6px 0;
}
.rm-arrow.rm-v::before {
    content: '';
    position: absolute;
    left: 50%;
    width: 3px;
    border-radius: 2px;
    transform: translateX(-50%);
}
.rm-arrow.rm-v::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
}
/* S2 → S3 (right column, down) */
.rm-2-3::before {
    top: 0;
    bottom: 14px;
    background: linear-gradient(180deg, var(--violet), var(--orange));
}
.rm-2-3::after {
    bottom: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--orange);
    filter: drop-shadow(0 0 4px rgba(251,146,60,0.4));
}
/* S4 → S5 (left column, down) */
.rm-4-5::before {
    top: 0;
    bottom: 14px;
    background: linear-gradient(180deg, var(--red), var(--green));
}
.rm-4-5::after {
    bottom: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 12px solid var(--green);
    filter: drop-shadow(0 0 4px rgba(74,222,128,0.4));
}

/* Animated pulse travelling along the connector arrows */
@keyframes arrowPulseH {
    0%   { left: 0; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { left: calc(100% - 16px); opacity: 0; }
}
@keyframes arrowPulseHRev {
    0%   { right: 0; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { right: calc(100% - 16px); opacity: 0; }
}
@keyframes arrowPulseV {
    0%   { top: 0; opacity: 0; }
    20%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { top: calc(100% - 16px); opacity: 0; }
}
.rm-h.rm-r .pulse-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--violet);
    box-shadow: 0 0 8px var(--violet);
    transform: translateY(-50%);
    animation: arrowPulseH 2.2s ease-in-out infinite;
}
.rm-h.rm-l .pulse-dot {
    position: absolute;
    top: 50%;
    right: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--red);
    box-shadow: 0 0 8px var(--red);
    transform: translateY(-50%);
    animation: arrowPulseHRev 2.2s ease-in-out infinite;
}
.rm-v .pulse-dot {
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    transform: translateX(-50%);
    animation: arrowPulseV 2s ease-in-out infinite;
}
.rm-2-3 .pulse-dot { background: var(--orange); box-shadow: 0 0 8px var(--orange); }
.rm-4-5 .pulse-dot { background: var(--green); box-shadow: 0 0 8px var(--green); }
[data-theme="dark"] .rm-h.rm-r .pulse-dot { box-shadow: 0 0 14px var(--violet), 0 0 30px rgba(167,139,250,0.3); }
[data-theme="dark"] .rm-h.rm-l .pulse-dot { box-shadow: 0 0 14px var(--red), 0 0 30px rgba(248,113,113,0.3); }
[data-theme="dark"] .rm-2-3 .pulse-dot    { box-shadow: 0 0 14px var(--orange), 0 0 30px rgba(251,146,60,0.3); }
[data-theme="dark"] .rm-4-5 .pulse-dot    { box-shadow: 0 0 14px var(--green), 0 0 30px rgba(74,222,128,0.3); }

/* ══════════════════════════════════════════════════════════════════════════
   Neuron view overrides — applied when admin flips the home view to neuron.
   The .view-neuron modifier on .roadmap reshapes the container to a flex
   column and tunes the inter-cluster mesh-path styling to match the
   thicker, brighter dendrites the neuron clusters use.
   ══════════════════════════════════════════════════════════════════════════ */
.roadmap.view-neuron {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    grid-template-rows: none;
    gap: 28px;
    padding: 24px 0 60px;
}
.roadmap.view-neuron .roadmap-stage { width: 100%; }
.roadmap.view-neuron .mesh-path {
    stroke-width: 2;
    opacity: 0.7;
}
.roadmap.view-neuron .mesh-path.mesh-dropped { opacity: 0.18; }
.roadmap.view-neuron .mesh-path.mesh-active {
    opacity: 1;
    stroke-width: 3;
    filter: drop-shadow(0 0 4px currentColor);
}
[data-theme="dark"] .roadmap.view-neuron .mesh-path { opacity: 0.75; }
[data-theme="dark"] .roadmap.view-neuron .mesh-path.mesh-dropped { opacity: 0.2; }
[data-theme="dark"] .roadmap.view-neuron .mesh-path.mesh-active {
    stroke-width: 3.2;
    filter: drop-shadow(0 0 5px currentColor);
}

/* ══════════════════════════════════════════════════════════════════════════
   Neuron cluster — soma core, dendrite branches, lesson satellites
   ══════════════════════════════════════════════════════════════════════════
   Each cluster is split into two stacked regions:
     1. .neuron-header — full-width strip with stage title, description, tier.
     2. .neuron-stage  — positioning context for the soma core, satellites,
                         and the SVG branch layer.
   Keeping the title strip outside the stage prevents text from colliding
   with the dendrite arc.
*/
.neuron-cluster {
    position: relative;
    display: flex;
    flex-direction: column;
    --cluster-c: var(--violet);
    --cluster-c-soft: rgba(167,139,250,0.18);
    --cluster-c-mid:  rgba(167,139,250,0.45);
}
.neuron-cluster.s1 { --cluster-c: var(--violet); --cluster-c-soft: rgba(167,139,250,0.18); --cluster-c-mid: rgba(167,139,250,0.45); }
.neuron-cluster.s2 { --cluster-c: var(--accent); --cluster-c-soft: rgba(129,140,248,0.18);  --cluster-c-mid: rgba(129,140,248,0.45);  }
.neuron-cluster.s3 { --cluster-c: var(--orange); --cluster-c-soft: rgba(251,146,60,0.18); --cluster-c-mid: rgba(251,146,60,0.45); }
.neuron-cluster.s4 { --cluster-c: var(--red);    --cluster-c-soft: rgba(248,113,113,0.18);  --cluster-c-mid: rgba(248,113,113,0.45);  }
.neuron-cluster.s5 { --cluster-c: var(--green);  --cluster-c-soft: rgba(74,222,128,0.18); --cluster-c-mid: rgba(74,222,128,0.45); }

/* ── Header strip ──────────────────────────────────────────────────────── */
.neuron-header {
    padding: 4px 24px 14px;
    max-width: 640px;
    margin-bottom: 6px;
}
.neuron-cluster.left  .neuron-header { text-align: left;  margin-right: auto; }
.neuron-cluster.right .neuron-header { text-align: right; margin-left:  auto; }
.neuron-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}
.neuron-cluster.right .neuron-header-row { justify-content: flex-end; }
.neuron-stage-num {
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--cluster-c);
    opacity: 0.85;
}
.neuron-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
    margin: 0 0 6px;
    white-space: nowrap;
}
.neuron-header p {
    font-size: 13px;
    color: var(--text-dim);
    line-height: 1.5;
    margin: 0;
    max-width: 460px;
}
.neuron-cluster.right .neuron-header p { margin-left: auto; }
.neuron-tier {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cluster-c);
    background: color-mix(in srgb, var(--cluster-c) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--cluster-c) 30%, transparent);
}
[data-theme="dark"] .neuron-tier {
    text-shadow: 0 0 8px color-mix(in srgb, var(--cluster-c) 60%, transparent);
}

/* ── Stage area ────────────────────────────────────────────────────────── */
.neuron-stage {
    position: relative;
    height: 360px;
    width: 100%;
}

/* SVG layer — branches drawn by roadmap-mesh.js, sits behind everything. */
.neuron-branches {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    z-index: 1;
}
.neuron-branch {
    fill: none;
    stroke: var(--cluster-c);
    stroke-width: 1.4;
    stroke-linecap: round;
    opacity: 0.55;
    transition: opacity 0.3s ease, stroke-width 0.3s ease;
}
.neuron-cluster.is-hovered .neuron-branch { opacity: 0.32; }
.neuron-cluster .neuron-branch.is-active  { opacity: 1; stroke-width: 2.2; filter: drop-shadow(0 0 4px var(--cluster-c)); }

/* ── Soma core ─────────────────────────────────────────────────────────── */
.neuron-core {
    position: absolute;
    width: 108px;
    height: 108px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
                color-mix(in srgb, var(--cluster-c) 85%, white 15%),
                var(--cluster-c) 45%,
                color-mix(in srgb, var(--cluster-c) 60%, black 40%) 100%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cluster-c) 70%, transparent),
        0 0 24px var(--cluster-c-mid),
        0 0 60px var(--cluster-c-soft),
        inset 0 0 24px rgba(255,255,255,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
    cursor: default;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    animation: neuronCoreBreathe 4.6s ease-in-out infinite;
}
@keyframes neuronCoreBreathe {
    0%, 100% { box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cluster-c) 70%, transparent),
        0 0 22px var(--cluster-c-mid),
        0 0 52px var(--cluster-c-soft),
        inset 0 0 24px rgba(255,255,255,0.12); }
    50%      { box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cluster-c) 90%, transparent),
        0 0 36px var(--cluster-c-mid),
        0 0 90px var(--cluster-c-soft),
        inset 0 0 28px rgba(255,255,255,0.16); }
}
.neuron-cluster.is-hovered .neuron-core { transform: scale(1.06); }
.neuron-core-num {
    font-family: 'Space Mono', monospace;
    font-size: 32px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 12px rgba(0,0,0,0.5), 0 0 24px var(--cluster-c);
    letter-spacing: -1px;
    user-select: none;
}

/* The soma also carries a faint inner nucleus dot — pure decoration. */
.neuron-core::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, transparent 55%, color-mix(in srgb, var(--cluster-c) 30%, transparent) 100%);
    pointer-events: none;
}

/* Core position within the stage area. Left-anchored clusters keep the
 * core in the right third of the stage so the satellites can fan left.
 * Right-anchored clusters mirror that. */
.neuron-cluster.left  .neuron-stage > .neuron-core { right: 32%; top: 50%; transform: translate(50%, -50%); }
.neuron-cluster.right .neuron-stage > .neuron-core { left:  32%; top: 50%; transform: translate(-50%, -50%); }
.neuron-cluster.is-hovered.left  .neuron-stage > .neuron-core { transform: translate(50%, -50%) scale(1.06); }
.neuron-cluster.is-hovered.right .neuron-stage > .neuron-core { transform: translate(-50%, -50%) scale(1.06); }

/* ── Lesson satellites ─────────────────────────────────────────────────── */
.neuron-satellite {
    position: absolute;
    z-index: 2;
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: transform 0.3s ease;
    /* JS sets top + left in pixels relative to the .neuron-stage. */
}
.neuron-sat-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%,
                color-mix(in srgb, var(--cluster-c) 75%, white 25%),
                var(--cluster-c) 65%);
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cluster-c) 60%, transparent),
        0 0 10px var(--cluster-c-mid),
        0 0 22px var(--cluster-c-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    text-shadow: 0 0 4px rgba(0,0,0,0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.neuron-sat-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    background: color-mix(in srgb, var(--bg) 85%, transparent);
    padding: 5px 10px;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--cluster-c) 22%, transparent);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    white-space: nowrap;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    opacity: 0.85;
    transition: opacity 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
/* For left-anchored clusters the dot is on the right (closest to the core)
 * and the label flows left. For right-anchored clusters it's the natural
 * order: dot on the left, label flows right. */
.neuron-cluster.left .neuron-satellite { flex-direction: row-reverse; }

.neuron-satellite:hover .neuron-sat-dot {
    transform: scale(1.25);
    box-shadow:
        0 0 0 2px var(--cluster-c),
        0 0 14px var(--cluster-c-mid),
        0 0 32px var(--cluster-c-mid);
}
.neuron-satellite:hover .neuron-sat-label {
    opacity: 1;
    border-color: var(--cluster-c);
    background: color-mix(in srgb, var(--cluster-c) 10%, var(--bg) 90%);
}
.neuron-satellite.gated .neuron-sat-dot {
    filter: grayscale(0.6);
    opacity: 0.55;
}
.neuron-satellite.gated .neuron-sat-label {
    opacity: 0.45;
    font-style: italic;
}
.neuron-satellite.gated::after {
    content: 'soon';
    font-size: 9px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Visited badge — appended by inline JS in home.html, mirrors the
 * existing #badge-{lesson_id} pattern. */
.neuron-sat-visited {
    display: inline-block;
    margin-left: 6px;
    font-size: 10px;
    color: var(--cluster-c);
    opacity: 0.8;
}

/* ── Stage card ────────────────────────────────────────────────────────── */
.stage-card {
    position: relative;
    background: var(--bg-card);
    border-radius: 20px;
    padding: 24px;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: box-shadow 0.35s cubic-bezier(0.4,0,0.2,1), transform 0.35s cubic-bezier(0.4,0,0.2,1), border-color 0.35s;
}
[data-theme="dark"] .stage-card {
    background: #111318;
    border: 1px solid rgba(255,255,255,0.06);
}
.stage-card.s1 { border-left-color: var(--violet); }
.stage-card.s2 { border-left-color: var(--accent); }
.stage-card.s3 { border-left-color: var(--orange); }
.stage-card.s4 { border-left-color: var(--red); }
.stage-card.s5 { border-left-color: var(--green); }

.stage-card:hover { transform: translateY(-4px); }
.stage-card.s1:hover { box-shadow: 0 0 24px rgba(167,139,250,0.10), 0 8px 28px rgba(0,0,0,0.06); }
.stage-card.s2:hover { box-shadow: 0 0 24px rgba(129,140,248,0.10),  0 8px 28px rgba(0,0,0,0.06); }
.stage-card.s3:hover { box-shadow: 0 0 24px rgba(251,146,60,0.10), 0 8px 28px rgba(0,0,0,0.06); }
.stage-card.s4:hover { box-shadow: 0 0 24px rgba(248,113,113,0.10),  0 8px 28px rgba(0,0,0,0.06); }
.stage-card.s5:hover { box-shadow: 0 0 24px rgba(74,222,128,0.10), 0 8px 28px rgba(0,0,0,0.06); }
[data-theme="dark"] .stage-card.s1:hover { box-shadow: var(--shadow-elevated), 0 0 50px -10px var(--glow-violet); border-color: rgba(167,139,250,0.20); background: var(--bg-elevated); }
[data-theme="dark"] .stage-card.s2:hover { box-shadow: var(--shadow-elevated), 0 0 50px -10px rgba(129,140,248,0.25); border-color: rgba(129,140,248,0.20); background: var(--bg-elevated); }
[data-theme="dark"] .stage-card.s3:hover { box-shadow: var(--shadow-elevated), 0 0 50px -10px var(--glow-orange); border-color: rgba(251,191,36,0.20); background: var(--bg-elevated); }
[data-theme="dark"] .stage-card.s4:hover { box-shadow: var(--shadow-elevated), 0 0 50px -10px var(--glow-red); border-color: rgba(251,113,133,0.20); background: var(--bg-elevated); }
[data-theme="dark"] .stage-card.s5:hover { box-shadow: var(--shadow-elevated), 0 0 50px -10px var(--glow-green); border-color: rgba(52,211,153,0.20); background: var(--bg-elevated); }

/* ── Neuron soma layers ────────────────────────────────────────────────── */
/* The card visually behaves like a neuron cell body: a faint membrane ring
 * pulses at a slow ~4s rhythm (each stage offset so the page reads as five
 * neurons firing slightly out of sync), synaptic terminals sit on the edges
 * where mesh paths attach, and a brief activation flash washes outward on
 * hover. None of these layers add real DOM nodes — they all hang off pseudo
 * elements on .stage-card so the existing markup stays untouched. */
@keyframes neuronPulse {
    0%, 100% { box-shadow: 0 0 0 0 var(--neuron-pulse-c, rgba(167,139,250,0.0)); }
    50%      { box-shadow: 0 0 0 6px var(--neuron-pulse-c, rgba(167,139,250,0.18)); }
}
@keyframes neuronFlash {
    0%   { opacity: 0; transform: scale(0.8); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: scale(1.4); }
}
.stage-card {
    /* Subtle pulse on the card edge per stage colour. */
    animation: none;
}
.stage-card.s1 { --neuron-pulse-c: rgba(167,139,250,0.18); animation-delay: 0s;   }
.stage-card.s2 { --neuron-pulse-c: rgba(129,140,248,0.18);  animation-delay: 0.6s; }
.stage-card.s3 { --neuron-pulse-c: rgba(251,146,60,0.18); animation-delay: 1.2s; }
.stage-card.s4 { --neuron-pulse-c: rgba(248,113,113,0.18);  animation-delay: 1.8s; }
.stage-card.s5 { --neuron-pulse-c: rgba(74,222,128,0.18); animation-delay: 2.4s; }
[data-theme="dark"] .stage-card.s1 { --neuron-pulse-c: rgba(167,139,250,0.15); }
[data-theme="dark"] .stage-card.s2 { --neuron-pulse-c: rgba(129,140,248,0.15); }
[data-theme="dark"] .stage-card.s3 { --neuron-pulse-c: rgba(251,146,60,0.15); }
[data-theme="dark"] .stage-card.s4 { --neuron-pulse-c: rgba(248,113,113,0.15); }
[data-theme="dark"] .stage-card.s5 { --neuron-pulse-c: rgba(74,222,128,0.15); }


/* Activation flash — a single radial wash that ripples out from the card
 * centre on hover. Uses .stage-card-glow's existing pseudo by piggy-backing
 * on a fresh pseudo would clash, so we drive it via animation on the
 * existing glow blob: when hovered, the glow briefly scales up. */
.stage-card:hover .stage-card-glow {
    animation: neuronFlash 0.9s ease-out;
}

/* Corner glow blob */
.stage-card-glow {
    position: absolute;
    top: -80px;
    right: -80px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.05;
    pointer-events: none;
    transition: opacity 0.4s;
}
.stage-card:hover .stage-card-glow { opacity: 0.10; }
[data-theme="dark"] .stage-card-glow { opacity: 0.04; filter: blur(60px); }
[data-theme="dark"] .stage-card:hover .stage-card-glow { opacity: 0.10; }
.stage-card-glow.s1 { background: var(--violet); }
.stage-card-glow.s2 { background: var(--accent); }
.stage-card-glow.s3 { background: var(--orange); }
.stage-card-glow.s4 { background: var(--red); }
.stage-card-glow.s5 { background: var(--green); }

/* ── Stage header (inside card) ────────────────────────────────────────── */
.stage-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 8px;
    position: relative;
    z-index: 1;
}
.stage-num {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    font-size: 20px;
    font-weight: 700;
    flex-shrink: 0;
    color: #fff;
}
.stage-icon-wrap {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 2px;
}
[data-theme="dark"] .stage-icon-wrap {
    background: #0C0D12;
    border-color: rgba(129,140,248,0.15);
}
.stage-icon-wrap.s1 { box-shadow: 0 0 16px rgba(167,139,250,0.15); }
.stage-icon-wrap.s2 { box-shadow: 0 0 16px rgba(129,140,248,0.15); }
.stage-icon-wrap.s3 { box-shadow: 0 0 16px rgba(251,146,60,0.15); }
.stage-icon-wrap.s4 { box-shadow: 0 0 16px rgba(248,113,113,0.15); }
.stage-icon-wrap.s5 { box-shadow: 0 0 16px rgba(74,222,128,0.15); }
[data-theme="dark"] .stage-icon-wrap.s1 { box-shadow: 0 0 20px rgba(167,139,250,0.3); }
[data-theme="dark"] .stage-icon-wrap.s2 { box-shadow: 0 0 20px rgba(129,140,248,0.3); }
[data-theme="dark"] .stage-icon-wrap.s3 { box-shadow: 0 0 20px rgba(251,146,60,0.3); }
[data-theme="dark"] .stage-icon-wrap.s4 { box-shadow: 0 0 20px rgba(248,113,113,0.3); }
[data-theme="dark"] .stage-icon-wrap.s5 { box-shadow: 0 0 20px rgba(74,222,128,0.3); }
.stage-num.s1 { background: linear-gradient(135deg, #a78bfa, #7c3aed); box-shadow: 0 4px 14px rgba(167,139,250,0.3); }
.stage-num.s2 { background: linear-gradient(135deg, #06b6d4, #0891b2); box-shadow: 0 4px 14px rgba(129,140,248,0.3); }
.stage-num.s3 { background: linear-gradient(135deg, #f59e0b, #d97706); box-shadow: 0 4px 14px rgba(251,146,60,0.3); }
.stage-num.s4 { background: linear-gradient(135deg, #f87171, #e11d48); box-shadow: 0 4px 14px rgba(248,113,113,0.3); }
.stage-num.s5 { background: linear-gradient(135deg, #10b981, #059669); box-shadow: 0 4px 14px rgba(74,222,128,0.3); }

[data-theme="dark"] .stage-num.s1 { box-shadow: 0 0 20px rgba(167,139,250,0.5), 0 0 40px rgba(167,139,250,0.15); }
[data-theme="dark"] .stage-num.s2 { box-shadow: 0 0 20px rgba(129,140,248,0.5),  0 0 40px rgba(129,140,248,0.15); }
[data-theme="dark"] .stage-num.s3 { box-shadow: 0 0 20px rgba(251,146,60,0.5), 0 0 40px rgba(251,146,60,0.15); }
[data-theme="dark"] .stage-num.s4 { box-shadow: 0 0 20px rgba(248,113,113,0.5),  0 0 40px rgba(248,113,113,0.15); }
[data-theme="dark"] .stage-num.s5 { box-shadow: 0 0 20px rgba(74,222,128,0.5), 0 0 40px rgba(74,222,128,0.15); }
.stage-header .stage-info h2 { font-size: 19px; font-weight: 700; color: var(--text); }
.stage-header .stage-info p { font-size: 13px; color: var(--text-dim); margin-top: 2px; }

.stage-card > .tier-badge {
    align-self: flex-start;
    margin-bottom: 14px;
    margin-left: 0;
    position: relative;
    z-index: 1;
}
.tier-badge {
    padding: 5px 14px;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text-dim);
    white-space: nowrap;
}
.tier-badge.s1 { border-color: rgba(167,139,250,0.25); color: var(--violet); }
.tier-badge.s2 { border-color: rgba(129,140,248,0.25); color: var(--accent); }
.tier-badge.s3 { border-color: rgba(251,146,60,0.25); color: var(--orange); }
.tier-badge.s4 { border-color: rgba(248,113,113,0.25); color: var(--red); }
.tier-badge.s5 { border-color: rgba(74,222,128,0.25); color: var(--green); }

[data-theme="dark"] .tier-badge.s1 { box-shadow: 0 0 8px rgba(167,139,250,0.15); text-shadow: 0 0 8px rgba(167,139,250,0.4); }
[data-theme="dark"] .tier-badge.s2 { box-shadow: 0 0 8px rgba(129,140,248,0.15);  text-shadow: 0 0 8px rgba(129,140,248,0.4); }
[data-theme="dark"] .tier-badge.s3 { box-shadow: 0 0 8px rgba(251,146,60,0.15); text-shadow: 0 0 8px rgba(251,146,60,0.4); }
[data-theme="dark"] .tier-badge.s4 { box-shadow: 0 0 8px rgba(248,113,113,0.15);  text-shadow: 0 0 8px rgba(248,113,113,0.4); }
[data-theme="dark"] .tier-badge.s5 { box-shadow: 0 0 8px rgba(74,222,128,0.15); text-shadow: 0 0 8px rgba(74,222,128,0.4); }

/* ── Lesson cards (roadmap: single column) ─────────────────────────────── */
.lesson-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    position: relative;
    z-index: 1;
    flex: 1;
}
.lesson-cards.roadmap-lessons {
    grid-template-columns: 1fr;
    gap: 8px;
}
.lesson-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--border);
    border-radius: 12px;
    color: var(--text);
    text-decoration: none;
    transition: all 0.25s ease;
    position: relative;
}
.lesson-card.active.s1 { border-left-color: var(--violet); }
.lesson-card.active.s2 { border-left-color: var(--accent); }
.lesson-card.active.s3 { border-left-color: var(--orange); }
.lesson-card.active.s4 { border-left-color: var(--red); }
.lesson-card.active.s5 { border-left-color: var(--green); }

.lesson-card.active:hover {
    transform: translateY(-3px);
    border-left-width: 5px;
    padding-left: 12px; /* compensate for thicker left border to prevent shift */
    background: var(--bg-card) !important;
}
.lesson-card.active.s1:hover { box-shadow: 0 8px 28px rgba(167,139,250,0.28), 0 0 0 1px rgba(167,139,250,0.4); border-color: rgba(167,139,250,0.5); }
.lesson-card.active.s2:hover { box-shadow: 0 8px 28px rgba(129,140,248,0.28),  0 0 0 1px rgba(129,140,248,0.4);  border-color: rgba(129,140,248,0.5); }
.lesson-card.active.s3:hover { box-shadow: 0 8px 28px rgba(251,146,60,0.28), 0 0 0 1px rgba(251,146,60,0.4); border-color: rgba(251,146,60,0.5); }
.lesson-card.active.s4:hover { box-shadow: 0 8px 28px rgba(248,113,113,0.28),  0 0 0 1px rgba(248,113,113,0.4);  border-color: rgba(248,113,113,0.5); }
.lesson-card.active.s5:hover { box-shadow: 0 8px 28px rgba(74,222,128,0.28), 0 0 0 1px rgba(74,222,128,0.4); border-color: rgba(74,222,128,0.5); }

[data-theme="dark"] .lesson-card.active.s1:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 30px -8px var(--glow-violet); border-color: rgba(167,139,250,0.35); }
[data-theme="dark"] .lesson-card.active.s2:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 30px -8px rgba(129,140,248,0.25); border-color: rgba(123,147,255,0.35); }
[data-theme="dark"] .lesson-card.active.s3:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 30px -8px var(--glow-orange); border-color: rgba(255,187,56,0.35); }
[data-theme="dark"] .lesson-card.active.s4:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 30px -8px var(--glow-red); border-color: rgba(251,113,133,0.35); }
[data-theme="dark"] .lesson-card.active.s5:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.35), 0 0 30px -8px var(--glow-green); border-color: rgba(61,220,132,0.35); }

[data-theme="dark"] .lesson-card.active:hover .lesson-info .title { color: #fff; text-shadow: none; }

.lesson-card.active:hover .lesson-num { transform: scale(1.08); }
[data-theme="dark"] .lesson-card.active:hover .lesson-num { box-shadow: none; }

.lesson-card.active:hover .lesson-card-icon { transform: scale(1.12); }
.lesson-card-icon { transition: transform 0.25s ease; }

.lesson-card.locked { opacity: 0.4; pointer-events: none; }
.lesson-card.gated  { opacity: 0.4; pointer-events: none; }

.lesson-card .lesson-num {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: var(--border);
    color: var(--text);
    font-weight: 800;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.25s;
}
.lesson-card.active .lesson-num.s1 { background: var(--violet); color: #fff; text-shadow: none; }
.lesson-card.active .lesson-num.s2 { background: var(--accent); color: #fff; text-shadow: none; }
.lesson-card.active .lesson-num.s3 { background: var(--orange); color: #fff; text-shadow: none; }
.lesson-card.active .lesson-num.s4 { background: var(--red); color: #fff; text-shadow: none; }
.lesson-card.active .lesson-num.s5 { background: var(--green); color: #fff; text-shadow: none; }

[data-theme="dark"] .lesson-card.active .lesson-num.s1 { box-shadow: none; }
[data-theme="dark"] .lesson-card.active .lesson-num.s2 { box-shadow: none; }
[data-theme="dark"] .lesson-card.active .lesson-num.s3 { box-shadow: none; }
[data-theme="dark"] .lesson-card.active .lesson-num.s4 { box-shadow: none; }
[data-theme="dark"] .lesson-card.active .lesson-num.s5 { box-shadow: none; }

.lesson-card .lesson-info { flex: 1 1 auto; min-width: 0; }
.lesson-card .lesson-info .title { font-weight: 600; font-size: 14px; color: var(--text); }
.lesson-card .lesson-info .desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.4; }
.lesson-card .lesson-badge { font-size: 11px; color: var(--green); font-weight: 600; white-space: nowrap; }
.lesson-lock { font-size: 11px; color: var(--text-dim); white-space: nowrap; }

/* ── Lesson card right-side icon ─────────────────────────────────────────
   Each lesson card on the home page renders a small literal icon (regression
   line, sigmoid, decision tree, …) tinted with the stage colour. Icons fade
   on gated cards so the "Soon" label still reads as the dominant signal. */
.lesson-card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    color: var(--text-dim);
    transition: transform 0.2s ease, color 0.2s ease;
}
.lesson-card-icon svg { display: block; width: 100%; height: 100%; }
.lesson-card.active.s1 .lesson-card-icon { color: var(--violet); }
.lesson-card.active.s2 .lesson-card-icon { color: var(--accent); }
.lesson-card.active.s3 .lesson-card-icon { color: var(--orange); }
.lesson-card.active.s4 .lesson-card-icon { color: var(--red); }
.lesson-card.active.s5 .lesson-card-icon { color: var(--green); }
.lesson-card.gated .lesson-card-icon  { opacity: 0.55; }
.lesson-card.active:hover .lesson-card-icon { transform: scale(1.12); }

/* ── Stage detail page ─────────────────────────────────────────────────── */
.stage-detail {
    max-width: 800px;
    margin: 40px auto;
    padding: 56px 24px 0;
    animation: fadeSlideUp 0.5s ease both;
}
.stage-detail .stage-card { height: auto; }
.stage-detail .back-link {
    display: inline-block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 20px;
    transition: color 0.15s;
}
.stage-detail .back-link:hover { color: var(--accent); }

/* ── Top controls (theme + demo toggles) ───────────────────────────────── */
/* ── Top navigation bar ─────────────────────────────────────────────── */
.top-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 300;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    background: rgba(244,243,240,0.75);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
[data-theme="dark"] .top-nav {
    background: rgba(6,7,12,0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 1px 0 rgba(129,140,248,0.04), 0 4px 20px rgba(0,0,0,0.5);
}
.nav-brand {
    display: flex;
    align-items: center;
    text-decoration: none;
    flex-shrink: 0;
}
.nav-brand .brand-logo-wrap { transition: filter 0.25s, transform 0.25s; }
.nav-brand:hover .brand-logo-wrap { transform: scale(1.06); }
[data-theme="dark"] .nav-brand .brand-logo-wrap { filter: brightness(1.1); }
[data-theme="dark"] .nav-brand:hover .brand-logo-wrap { filter: brightness(1.2); transform: scale(1.06); }
.nav-brand { text-decoration: none; }

/* ── Sidebar command panel (lesson pages) ──────────────────────────── */
.cmd-sidebar {
    padding: 0 12px;
    margin-bottom: 8px;
}
.cmd-sidebar-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--accent-dim);
    color: var(--text-dim);
    font-size: 12px;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.cmd-sidebar-toggle:hover { background: var(--accent-dim); color: var(--text); }
.cmd-sidebar-toggle .cmd-icon { font-size: 12px; }
.cmd-chevron { margin-left: auto; font-size: 10px; transition: transform 0.2s; }
.cmd-sidebar-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
    border-radius: 0 0 8px 8px;
}
.cmd-sidebar-panel.open {
    max-height: 600px;
    border: 1px solid var(--border);
    border-top: none;
    padding: 4px 0;
    margin-top: -1px;
    border-radius: 0 0 8px 8px;
}

/* ── Command menu ──────────────────────────────────────────────────────── */
.cmd-overlay {
    position: fixed;
    inset: 0;
    z-index: 350;
    background: rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s, visibility 0.2s;
}
[data-theme="dark"] .cmd-overlay { background: rgba(0,0,0,0.5); }
.cmd-overlay.open { opacity: 1; visibility: visible; }

.cmd-menu {
    position: fixed;
    top: 58px;
    left: 16px;
    z-index: 400;
    width: 320px;
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 8px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(0.97);
    transition: opacity 0.2s, visibility 0.2s, transform 0.2s;
}
[data-theme="dark"] .cmd-menu {
    background: #111318;
    border-color: rgba(255,255,255,0.08);
    box-shadow: 0 16px 48px rgba(0,0,0,0.6), 0 0 0 1px rgba(129,140,248,0.06);
}
.cmd-menu.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}
.cmd-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--text-dim);
    padding: 8px 10px 4px;
}
.cmd-empty {
    font-size: 12px;
    color: var(--text-dim);
    padding: 4px 10px 8px;
    opacity: 0.6;
}
.cmd-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
}
.cmd-item:hover { background: var(--accent-dim); }
.cmd-item .cmd-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
.cmd-item-info { display: flex; flex-direction: column; min-width: 0; }
.cmd-item-info strong { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmd-sub { font-size: 11px; color: var(--text-dim); }
.cmd-continue .cmd-icon { color: var(--accent); }
.cmd-bookmark-item {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
}
.cmd-bookmark-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    text-decoration: none;
    color: var(--text);
    flex: 1;
    min-width: 0;
    transition: background 0.15s;
}
.cmd-bookmark-link:hover { background: var(--accent-dim); }
.cmd-bookmark-link .cmd-icon { color: #f59e0b; font-size: 14px; width: 20px; text-align: center; flex-shrink: 0; }
.cmd-remove {
    background: none;
    border: none;
    color: var(--text-dim);
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s, color 0.15s;
}
.cmd-bookmark-item:hover .cmd-remove { opacity: 1; }
.cmd-remove:hover { color: var(--red); background: rgba(248,113,113,0.1); }

.cmd-divider {
    height: 1px;
    background: var(--border);
    margin: 6px 8px;
}
.cmd-actions { display: flex; flex-direction: column; gap: 2px; }
.cmd-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: none;
    color: var(--text);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s;
    width: 100%;
    text-align: left;
}
.cmd-btn:hover { background: var(--accent-dim); }
.cmd-btn .cmd-icon { font-size: 15px; width: 20px; text-align: center; }
.cmd-btn-bookmark .cmd-icon { color: #f59e0b; }
.cmd-btn-done { opacity: 0.5; cursor: default; }
.cmd-btn-done:hover { background: none; }
.cmd-btn-danger { color: var(--red); }
.cmd-btn-danger:hover { background: rgba(248,113,113,0.1); }

.cmd-confirm {
    padding: 12px 10px;
    text-align: center;
}
.cmd-confirm p { font-size: 13px; color: var(--text); margin-bottom: 10px; }
.cmd-confirm-btns { display: flex; gap: 8px; justify-content: center; }
.cmd-confirm-btns .cmd-btn { width: auto; padding: 6px 16px; border-radius: 6px; font-weight: 600; }
.cmd-confirm-btns .cmd-btn:not(.cmd-btn-danger) { background: var(--accent-dim); }

/* Highlight pulse for auto-scroll target */
@keyframes cmdHighlight {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 0 3px var(--accent), 0 0 20px rgba(129,140,248,0.3); }
}
.cmd-highlight { animation: cmdHighlight 1s ease 2; }

/* Compact one-line progress strip — replaces the old 3-tile stats grid.
   Sits directly under the Continue card with no header label. */
.cmd-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 12px 10px;
    font-size: 12px;
    color: var(--text-dim);
}
.cmd-meta-item strong {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    background: linear-gradient(135deg, var(--accent), var(--violet));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-right: 4px;
}
.cmd-meta-dot { color: var(--text-dim); opacity: 0.5; }

/* Subtler empty state used by the Continue card when nothing has been visited. */
.cmd-empty-quiet {
    padding: 14px 12px;
    text-align: center;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-dim);
    opacity: 0.75;
}

.top-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: rgba(255,255,255,0.04);
    color: var(--text-dim);
    font-size: 17px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background 0.2s, border-color 0.2s, transform 0.15s, color 0.2s;
    line-height: 1;
}
.theme-toggle:hover {
    border-color: rgba(255,255,255,0.12);
    color: var(--text);
    background: rgba(255,255,255,0.07);
}
.theme-toggle .icon-sun,
.theme-toggle .icon-moon { pointer-events: none; }
/* Light mode: show moon (click to go dark) */
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: block; }
/* Dark mode: show sun (click to go light) */
[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }

/* ── Lesson placeholder (coming soon) ──────────────────────────────────── */
.placeholder-page {
    max-width: 560px;
    margin: 40px auto;
    padding: 0 24px;
    animation: fadeSlideUp 0.5s ease both;
}
.placeholder-page .back-link {
    display: inline-block;
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 24px;
    transition: color 0.15s;
}
.placeholder-page .back-link:hover { color: var(--accent); }
.placeholder-card {
    text-align: center;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 48px 32px;
}
.placeholder-icon { margin-bottom: 20px; opacity: 0.7; }
.placeholder-card h1 { font-size: 26px; margin-bottom: 6px; }
.placeholder-sub { font-size: 14px; color: var(--text-dim); margin-bottom: 16px; }
.placeholder-desc { font-size: 15px; color: var(--text); margin-bottom: 24px; }
.placeholder-notice {
    display: inline-block;
    padding: 10px 20px;
    background: var(--accent-dim);
    border: 1px solid rgba(129,140,248,0.2);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--accent);
}

/* ── Demo mode toggle ──────────────────────────────────────────────────── */
/* ── Portal responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
    .portal-home { padding: 44px 16px 40px; }
    .portal-hero { padding: 22px 16px; margin: 0 0 16px; min-height: 170px; }
    .portal-home h1.hero-title { font-size: 34px; margin-bottom: 6px; }
    .portal-home .tagline { font-size: 13px; gap: 10px; }

    /* ── Cards view (default) on mobile ──────────────────────────────── */
    .roadmap.view-cards {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        grid-template-rows: none;
        gap: 0;
    }
    .roadmap.view-cards .rpos-1 { order: 1; }
    .roadmap.view-cards .rpos-2 { order: 3; }
    .roadmap.view-cards .rpos-3 { order: 5; }
    .roadmap.view-cards .rpos-4 { order: 7; }
    .roadmap.view-cards .rpos-5 { order: 9; }
    .roadmap.view-cards .rm-arrow.rm-h { display: none; }
    .roadmap.view-cards .rm-2-3 { order: 4; height: 40px; }
    .roadmap.view-cards .rm-4-5 { order: 8; height: 40px; }
    /* Simple vertical connectors between stacked cards on mobile. */
    .roadmap.view-cards .roadmap-stage::after {
        content: '';
        display: block;
        width: 3px;
        height: 28px;
        margin: 6px auto;
        border-radius: 2px;
        background: var(--border);
    }
    .roadmap.view-cards .rpos-2::after,
    .roadmap.view-cards .rpos-4::after { display: none; } /* rm-v handles these */
    .roadmap.view-cards .rpos-5::after { display: none; }
    .stage-card { padding: 18px; }
    .tier-badge { font-size: 9px; }

    /* ── Neuron view (opt-in) on mobile ──────────────────────────────── */
    /* Mobile fallback: stacked compact list rather than clusters. The
     * cluster layout assumes a wide canvas; on mobile the satellites are
     * collapsed to a vertical list under each core. */
    .roadmap.view-neuron { gap: 32px; padding: 12px 0 40px; }
    .neuron-cluster {
        align-items: center;
        gap: 12px;
        padding: 16px 0;
    }
    .neuron-cluster.left  .neuron-header,
    .neuron-cluster.right .neuron-header {
        text-align: center;
        margin: 0 auto;
        max-width: 90%;
        padding: 4px 12px 8px;
    }
    .neuron-cluster.left  .neuron-header-row,
    .neuron-cluster.right .neuron-header-row { justify-content: center; }
    .neuron-cluster.right .neuron-header p { margin: 0 auto; }
    .neuron-header h2 { white-space: normal; }
    .neuron-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .neuron-cluster .neuron-branches { display: none; }
    .neuron-cluster.left  .neuron-stage > .neuron-core,
    .neuron-cluster.right .neuron-stage > .neuron-core {
        position: relative; left: auto; right: auto; top: auto; transform: none;
    }
    .neuron-cluster.is-hovered.left  .neuron-stage > .neuron-core,
    .neuron-cluster.is-hovered.right .neuron-stage > .neuron-core { transform: scale(1.04); }
    .neuron-cluster .neuron-satellite {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        flex-direction: row !important;
        width: min(360px, 90%);
        gap: 12px;
    }
    .neuron-cluster .neuron-sat-label { white-space: normal; }

    .top-nav { padding: 6px 12px; }
    .top-controls { gap: 8px; }
    .theme-toggle { width: 34px; height: 34px; font-size: 16px; }
}
@media (max-width: 480px) {
    .portal-home h1 { font-size: 26px; }
    .stage-header { flex-wrap: wrap; }
    .stage-num { width: 36px; height: 36px; font-size: 16px; }
    .stage-icon-wrap { width: 34px; height: 34px; }
    .stage-icon-wrap svg { width: 28px; height: 28px; }
    .nav-brand svg { width: 30px; height: 30px; }
}

/* ── Feature Engineering lesson (s2_01) ──────────────────────────────────── */

/* Log table */
.log-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
}
.log-table th, .log-table td {
    padding: 6px 10px;
    border: 1px solid var(--border);
    white-space: nowrap;
}
.log-table th {
    background: var(--card-subtle);
    color: var(--text-dim);
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
}
.log-table td {
    color: var(--text);
}
.log-table-wrap { border-radius: var(--radius); overflow: hidden; }

/* Column type coloring */
.col-numeric { background: rgba(5, 150, 105, 0.08) !important; }
.col-string  { background: rgba(225, 29, 72, 0.08) !important; }
th.col-numeric { border-bottom: 3px solid var(--green) !important; }
th.col-string  { border-bottom: 3px solid var(--red) !important; }

.col-badge {
    display: inline-block;
    font-size: 9px;
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 4px;
    vertical-align: middle;
    font-family: 'Space Mono', monospace;
    text-transform: uppercase;
    font-weight: 600;
}
.badge-ok  { background: var(--green); color: #fff; }
.badge-bad { background: var(--red);   color: #fff; }

/* Transformation plan grid */
.transform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 16px;
}
.transform-card {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 12px;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.transform-card:hover { border-color: var(--accent); }
.transform-card.tc-use       { border-color: var(--green); background: rgba(5,150,105,0.06); }
.transform-card.tc-transform { border-color: var(--orange); background: rgba(217,119,6,0.06); }
.transform-card.tc-drop      { border-color: var(--red); background: rgba(225,29,72,0.06); }

.tc-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.tc-name { font-weight: 600; font-size: 13px; color: var(--text); }
.tc-dtype { font-size: 10px; padding: 1px 6px; border-radius: 6px; color: #fff; }
.tc-example { font-size: 11px; color: var(--text-dim); font-family: 'Space Mono', monospace; margin: 4px 0; }
.tc-state { font-size: 11px; color: var(--text-dim); font-style: italic; margin-top: 6px; }
.tc-answer { font-size: 11px; color: var(--accent); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--border); }

/* Derive display (step 2) */
.derive-display {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 20px 0;
}
.derive-step {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
    min-width: 100px;
}
.derive-step.highlight {
    border-color: var(--cyan);
    background: rgba(6, 182, 212, 0.06);
}
.derive-label { font-size: 11px; color: var(--text-dim); margin-bottom: 4px; }
.derive-val { font-size: 18px; font-weight: 700; color: var(--text); font-family: 'Space Mono', monospace; }
.derive-arrow { font-size: 16px; color: var(--text-dim); font-weight: 600; }

/* Risk editor (step 3) */
.risk-editor { margin-top: 12px; }
.risk-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
}
.risk-port { font-weight: 600; min-width: 80px; font-family: 'Space Mono', monospace; font-size: 13px; color: var(--text); }
.risk-service { font-size: 12px; color: var(--text-dim); min-width: 70px; }
.risk-select {
    background: var(--input-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 13px;
    font-family: 'Space Mono', monospace;
}
.risk-bar-wrap {
    flex: 1;
    height: 8px;
    background: var(--grid-bg);
    border-radius: 4px;
    overflow: hidden;
}
.risk-bar {
    height: 100%;
    background: var(--red);
    border-radius: 4px;
    transition: width 0.3s ease, background 0.3s ease;
}

/* Feature toggles (step 6) */
.feature-toggles {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}
.ft-group {
    flex: 1;
    min-width: 200px;
}
.ft-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-dim);
    text-transform: uppercase;
    margin-bottom: 8px;
}
.ft-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    cursor: pointer;
}
.ft-toggle input[type="checkbox"] {
    accent-color: var(--accent);
    width: 16px;
    height: 16px;
}
.ft-name {
    font-size: 13px;
    font-family: 'Space Mono', monospace;
    color: var(--text);
}

/* Encoding nodes (step 4) */
.enc-node {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 20px;
    min-width: 70px;
}
.enc-arrow {
    font-size: 11px;
    color: var(--text-dim);
    text-align: center;
    min-width: 80px;
}

/* Pipeline flow (step 7) */
.pipeline-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 24px 0;
    flex-wrap: wrap;
}
.pipe-stage {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 12px;
    text-align: center;
    min-width: 90px;
    flex: 0 0 auto;
}
.pipe-stage.highlight {
    border-color: var(--green);
    background: rgba(5, 150, 105, 0.06);
}
.pipe-icon { font-size: 24px; margin-bottom: 6px; }
.pipe-title { font-weight: 700; font-size: 13px; color: var(--text); }
.pipe-detail { font-size: 11px; color: var(--text-dim); margin-top: 4px; line-height: 1.4; }
.pipe-arrow { font-size: 20px; color: var(--text-dim); font-weight: 700; }

/* Metric row variant for s2_01 scaling step */
.metric-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* Info box variants */
.info-box.orange { background: rgba(217,119,6,0.1); border-left: 4px solid var(--orange); }

/* ── Neural Network lesson (s3_01) ───────────────────────────────────────── */

/* Neuron lab */
.neuron-lab { padding: 16px 0; }
.ni-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
}
.ni-row label { min-width: 30px; font-weight: 600; color: var(--text); font-size: 14px; }
.ni-row input[type="range"] { width: 100px; }
.ni-val { min-width: 40px; font-family: 'Space Mono', monospace; font-size: 13px; color: var(--cyan); font-weight: 600; }
.ni-times { color: var(--text-dim); font-size: 16px; }
.neuron-compute {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 16px;
}

/* Forward pass visualization */
.forward-pass-viz {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 24px 0;
    flex-wrap: wrap;
}
.fp-layer {
    text-align: center;
    transition: opacity 0.4s ease;
}
.fp-title { font-size: 11px; color: var(--text-dim); margin-bottom: 8px; font-weight: 600; }
.fp-nodes { display: flex; flex-direction: column; gap: 6px; }
.fp-node {
    background: var(--bg-card);
    border: 2px solid var(--border);
    border-radius: 8px;
    padding: 8px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}
.fp-val { font-family: 'Space Mono', monospace; font-size: 14px; font-weight: 700; color: var(--text); }
.fp-label { font-size: 10px; color: var(--text-dim); }
.fp-arrows {
    font-size: 24px;
    color: var(--text-dim);
    transition: opacity 0.4s ease, color 0.4s ease;
}

@media (max-width: 700px) {
    .derive-display { flex-direction: column; }
    .pipeline-flow { flex-direction: column; }
    .pipe-arrow { transform: rotate(90deg); }
    .transform-grid { grid-template-columns: 1fr; }
    .feature-toggles { flex-direction: column; }
    .forward-pass-viz { flex-direction: column; }
    .fp-arrows { transform: rotate(90deg); }
    .ni-row input[type="range"] { width: 70px; }
}

/* ── LLM Lesson (s4_01) ──────────────────────────────────────────────────── */
.token-chip {
    display: inline-flex; flex-direction: column; align-items: center;
    background: var(--accent-dim); border: 1px solid var(--border);
    border-radius: 6px; padding: 6px 10px; margin: 3px; font-size: 13px;
    font-weight: 600; color: var(--text); transition: background 0.2s;
}
.token-chip.token-unk {
    background: rgba(248,113,113,0.12); border-color: var(--red); color: var(--red);
}
.token-id {
    font-size: 10px; color: var(--text-dim); font-family: 'Space Mono', monospace;
    margin-top: 2px;
}
.token-arrow {
    display: inline-block; color: var(--text-dim); font-size: 18px;
    margin: 0 2px; vertical-align: middle;
}
.pred-chip {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: 8px; padding: 8px 14px; margin: 4px;
    cursor: pointer; transition: all 0.2s;
}
.pred-chip:hover { border-color: var(--accent); background: var(--accent-dim); }
.pred-chip.selected { border-color: var(--green); background: rgba(74,222,128,0.1); }
.pred-word { font-weight: 600; font-size: 14px; color: var(--text); }
.pred-conf {
    font-size: 11px; color: var(--text-dim); font-family: 'Space Mono', monospace;
}
.attn-sentence {
    display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
    padding: 16px 0;
}
.attn-word {
    padding: 8px 16px; border-radius: 8px; font-weight: 600; font-size: 15px;
    cursor: pointer; background: var(--bg-card); border: 2px solid var(--border);
    color: var(--text); transition: all 0.2s;
}
.attn-word:hover { border-color: var(--accent); }
.attn-word.attn-selected {
    border-color: var(--accent); background: rgba(129,140,248,0.10);
}

/* ── Vocabulary Limits step (s4_01 step 3) — TOY vs BPE side-by-side ─── */
.vl-input-row {
    margin: 18px 0 10px;
}
.vl-input-row input {
    width: 100%;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 14px;
    color: var(--text);
    font-size: 15px;
    font-family: inherit;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.vl-input-row input:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(8,145,178,0.18);
}

.vl-presets {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 8px; margin-bottom: 18px;
}
.vl-preset-label {
    color: var(--text-dim); font-size: 13px; margin-right: 4px;
}
.vl-preset-btn {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.vl-preset-btn:hover {
    border-color: var(--cyan);
    background: rgba(8,145,178,0.10);
    color: var(--cyan);
}

.vl-compare {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 18px;
}
@media (max-width: 880px) {
    .vl-compare { grid-template-columns: 1fr; }
}

.vl-side {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px 18px;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.vl-side-toy { border-top: 3px solid var(--orange); }
.vl-side-bpe { border-top: 3px solid var(--green); }

.vl-side-head { margin-bottom: 14px; }
.vl-side-badge {
    display: inline-block;
    font-family: 'Space Mono', monospace;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 4px;
    margin-bottom: 8px;
}
.vl-badge-bad  { background: rgba(251,146,60,0.14); color: var(--orange); border: 1px solid rgba(251,146,60,0.4); }
.vl-badge-good { background: rgba(74,222,128,0.14); color: var(--green); border: 1px solid rgba(74,222,128,0.4); }

.vl-side-sub {
    color: var(--text-dim);
    font-size: 13px;
    line-height: 1.5;
}
.vl-side-sub code {
    background: rgba(251,146,60,0.12);
    color: var(--orange);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12px;
}

.vl-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    padding: 14px 12px;
    background: rgba(15,23,42,0.35);
    border: 1px dashed var(--border);
    border-radius: 8px;
    min-height: 80px;
    margin-bottom: 14px;
}

/* individual token chip */
.vl-tok {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    font-family: 'Space Mono', monospace;
    border: 1px solid transparent;
    line-height: 1;
}
.vl-tok-known {
    background: rgba(8,145,178,0.14);
    border-color: rgba(8,145,178,0.35);
    color: var(--cyan);
}
.vl-tok-lost {
    background: rgba(251,146,60,0.18);
    border-color: rgba(251,146,60,0.65);
    color: #fde68a;
    gap: 7px;
}
.vl-tok-strike {
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    text-decoration-color: #f59e0b;
    color: #fde68a;
    opacity: 1;
}
.vl-tok-unk {
    font-size: 9.5px;
    background: #d97706;
    color: #ffffff;
    padding: 2px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    font-weight: 700;
}
.vl-tok-split {
    background: rgba(74,222,128,0.10);
    border-color: rgba(74,222,128,0.4);
    color: var(--green);
    padding: 6px 10px;
    gap: 0;
}
.vl-tok-piece {
    padding: 0 2px;
}
.vl-tok-sep {
    color: rgba(74,222,128,0.55);
    margin: 0 2px;
    font-weight: 400;
}

/* survival bar */
.vl-survival { margin-top: auto; }
.vl-bar {
    width: 100%;
    height: 8px;
    background: rgba(100,116,139,0.2);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.vl-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.4s ease;
}
.vl-bar-fill-toy { background: linear-gradient(90deg, #d97706, var(--orange)); }
.vl-bar-fill-bpe { background: linear-gradient(90deg, var(--green), #34d399); }

.vl-survival-stats {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    color: var(--text-dim);
}
.vl-pct {
    font-family: 'Space Mono', monospace;
    font-size: 15px;
    font-weight: 700;
}
.vl-pct-good { color: var(--green); }
.vl-pct-warn { color: var(--orange); }
.vl-pct-bad  { color: var(--orange); }

/* takeaway box */
.vl-takeaway {
    margin-top: 8px;
    padding: 14px 18px;
    border-radius: 10px;
    border-left: 4px solid var(--border);
    background: rgba(100,116,139,0.08);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}
.vl-takeaway code {
    background: rgba(8,145,178,0.12);
    color: var(--cyan);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12.5px;
}
.vl-takeaway-good {
    border-left-color: var(--green);
    background: rgba(74,222,128,0.08);
}
.vl-takeaway-bad {
    border-left-color: var(--orange);
    background: rgba(251,146,60,0.08);
}

/* ── Pretraining slider (s4_01 step 7) ──────────────────────────────────── */

.pt-prompt-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(8,145,178,0.08);
    border: 1px solid rgba(8,145,178,0.3);
    border-radius: 8px;
    margin: 14px 0 18px;
}
.pt-prompt-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--cyan);
    font-weight: 700;
}
.pt-prompt-text {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: var(--text);
    background: transparent;
    padding: 0;
}
.pt-prompt-cursor {
    display: inline-block;
    width: 8px;
    color: var(--violet);
    font-weight: 700;
    animation: pt-blink 1.1s steps(2, start) infinite;
}
@keyframes pt-blink { to { visibility: hidden; } }

.pt-stage-grid {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) 2.4fr;
    gap: 14px;
    margin-bottom: 16px;
}
.pt-stage-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 110px;
}
.pt-stage-output {
    border-color: rgba(167,139,250,0.4);
    background: rgba(167,139,250,0.06);
}
.pt-stage-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
    font-weight: 700;
    margin-bottom: 6px;
}
.pt-stage-value {
    font-family: 'Space Mono', monospace;
    font-size: 22px;
    font-weight: 700;
    color: var(--cyan);
    line-height: 1.25;
}
.pt-stage-completion {
    font-size: 16px;
    color: var(--violet);
    word-break: break-word;
}
.pt-stage-sub {
    font-size: 12px;
    color: var(--text-dim);
    margin-top: 6px;
    font-style: italic;
}

.pt-slider-row {
    margin: 8px 0 18px;
}
.pt-slider-row input[type="range"] {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--violet), var(--cyan));
    outline: none;
    cursor: pointer;
}
.pt-slider-row input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--cyan);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--violet);
    cursor: pointer;
}
.pt-slider-row input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--cyan);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--violet);
    cursor: pointer;
}
.pt-slider-ticks {
    display: flex;
    justify-content: space-between;
    margin-top: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    color: var(--text-dim);
}
.pt-slider-ticks span {
    flex: 1;
    text-align: center;
    transition: color 0.15s, font-weight 0.15s;
}
.pt-slider-ticks span:first-child { text-align: left; }
.pt-slider-ticks span:last-child  { text-align: right; }
.pt-tick-active {
    color: var(--cyan) !important;
    font-weight: 700;
}

.pt-loss-block {
    margin: 18px 0;
    padding: 12px 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-card);
}
.pt-loss-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 6px;
}
.pt-loss-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-dim);
    font-weight: 700;
}
.pt-loss-value {
    font-family: 'Space Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: var(--violet);
}
.pt-loss-bar {
    width: 100%;
    height: 8px;
    background: rgba(100,116,139,0.2);
    border-radius: 4px;
    overflow: hidden;
}
.pt-loss-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--green), var(--orange), var(--red));
    border-radius: 4px;
    transition: width 0.25s ease;
}
.pt-loss-scale {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--text-dim);
    font-family: 'Space Mono', monospace;
}

.pt-takeaway {
    margin-top: 14px;
    padding: 14px 18px;
    border-radius: 10px;
    border-left: 4px solid var(--violet);
    background: rgba(167,139,250,0.08);
    color: var(--text);
    font-size: 14px;
    line-height: 1.55;
}
.pt-takeaway code {
    background: rgba(167,139,250,0.14);
    color: var(--violet);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 12.5px;
}

/* probability table for the cross-entropy worked example */
.pt-prob-table {
    width: 100%;
    border-collapse: collapse;
    margin: 12px 0;
    font-size: 13px;
}
.pt-prob-table th {
    text-align: left;
    padding: 8px 10px;
    border-bottom: 2px solid var(--border);
    color: var(--text-dim);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.pt-prob-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text);
}
.pt-prob-table td:nth-child(2) {
    font-family: 'Space Mono', monospace;
    width: 110px;
}
.pt-prob-table td:nth-child(3) {
    width: 50%;
}
.pt-prob-correct td {
    background: rgba(74,222,128,0.06);
}
.pt-correct-flag {
    margin-left: 8px;
    color: var(--green);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.pt-pbar {
    height: 10px;
    border-radius: 3px;
    min-width: 4px;
}
.pt-pbar-wrong {
    background: rgba(248,113,113,0.55);
}
.pt-pbar-correct {
    background: var(--green);
}

.pt-loss-calc {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 4px solid var(--cyan);
    background: rgba(8,145,178,0.08);
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    line-height: 1.6;
}
.pt-loss-calc code {
    font-family: 'Space Mono', monospace;
    background: rgba(8,145,178,0.12);
    color: var(--cyan);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 12.5px;
}

@media (max-width: 760px) {
    .pt-stage-grid {
        grid-template-columns: 1fr;
    }
    .pt-prob-table td:nth-child(3) {
        display: none;
    }
}

/* ── Material Toolbar + Drawer + Code Modal ───────────────────────────────── */

/* Floating material buttons */
/* ── Learning path (numbered flow) ──────────────────────────────────── */
/* ── Learning-path flow rail ──────────────────────────────────────────────
   Horizontal progress track with circular nodes and connecting segments.
   Each segment runs between two .lp-step circles; an "active" segment lights
   up once the step to its left has been completed or is current. The rail
   visually communicates forward motion — something a row of pills can't. */
.learning-path {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0;
    margin-bottom: 18px;
    padding: 14px 18px 10px;
    overflow-x: auto;
    flex-shrink: 0;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .learning-path {
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Step = circular node + stacked label/hint underneath. */
.lp-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 0;
    min-width: 0;
    text-align: center;
    position: relative;
    background: transparent;
    border: none;
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}
.lp-clickable { cursor: pointer; }
.lp-clickable:hover { transform: translateY(-2px); }
.lp-clickable:hover .lp-num {
    border-color: rgba(139,92,246,0.55);
    box-shadow: 0 0 0 4px rgba(139,92,246,0.12);
}
.lp-clickable:hover .lp-label { color: var(--text); }

/* Numbered circular node. Base state = muted outlined chip. */
.lp-num {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    background: var(--bg);
    border: 1.5px solid var(--border);
    border-radius: 50%;
    color: var(--text-dim);
    margin: 0;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-theme="dark"] .lp-num {
    background: rgba(10,11,18,0.7);
    border-color: rgba(255,255,255,0.10);
}

/* Active = filled brand gradient + soft outer halo. Uses the same deep
   violet→rose palette as nav buttons and .btn-primary (dark mode). */
.lp-active .lp-num {
    background: linear-gradient(135deg, #6366F1, #A855F7);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.10), 0 2px 8px -2px rgba(99,102,241,0.20);
    transform: scale(1.08);
}
[data-theme="dark"] .lp-active .lp-num {
    background: linear-gradient(135deg, #4C1D95 0%, #831843 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 0 0 4px rgba(76,29,149,0.22), 0 4px 16px -2px rgba(91,33,182,0.45);
}
/* Intentionally do NOT tint the active node with per-stage accents —
   keep the same deep violet→rose as the nav buttons so the flow rail
   reads as one family with .nav-buttons a and .btn-primary. */

/* Pulse subtly so eyes land on "you are here". Dark-mode only — on
   light backgrounds the ring reads as a heavy glow halo. */
[data-theme="dark"] .lp-active .lp-num::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0.35;
    animation: lpActiveRing 2.4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    pointer-events: none;
}
@keyframes lpActiveRing {
    0%   { transform: scale(0.9); opacity: 0.45; }
    70%  { transform: scale(1.35); opacity: 0; }
    100% { transform: scale(1.35); opacity: 0; }
}

/* Completed = filled check in accent green. */
.lp-done .lp-num {
    background: linear-gradient(135deg, #10B981, #059669);
    border-color: transparent;
    color: #fff;
    font-size: 0;
}
.lp-done .lp-num::before {
    content: '✓';
    font-size: 15px;
    font-weight: 800;
    color: #fff;
}
[data-theme="dark"] .lp-done .lp-num {
    background: linear-gradient(135deg, #065F46, #064E3B);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.14);
}

/* Terminal "reflect" node uses an emoji instead of a digit — drop circle
   fill so the lightbulb reads cleanly. */
.lp-num-last {
    background: var(--bg) !important;
    border: 1.5px dashed var(--border) !important;
    font-size: 16px !important;
    color: var(--text-dim) !important;
    box-shadow: none !important;
}
[data-theme="dark"] .lp-num-last {
    background: rgba(10,11,18,0.7) !important;
    border-color: rgba(255,255,255,0.14) !important;
}
.lp-active .lp-num-last {
    border-style: solid !important;
    border-color: transparent !important;
    color: #FBBF24 !important;
    background: radial-gradient(circle at center, rgba(251,191,36,0.25), rgba(245,158,11,0.05)) !important;
    box-shadow: 0 0 0 4px rgba(251,191,36,0.14), 0 0 18px rgba(251,191,36,0.30) !important;
}

.lp-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.15;
}
.lp-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-dim);
    line-height: 1.15;
    letter-spacing: 0.2px;
    transition: color 0.25s ease;
}
.lp-active .lp-label { color: var(--text); }
[data-theme="dark"] .lp-active .lp-label { color: #F5F3FF; }
.lp-done .lp-label { color: var(--text-dim); }

.lp-hint {
    font-size: 9px;
    color: var(--text-dim);
    line-height: 1.2;
    margin-top: 3px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    opacity: 0.75;
}
.lp-active .lp-hint { opacity: 1; }

/* Connecting rail between nodes. Replaces the old chevron character with a
   proper progress segment. Segment brightens when the step preceding it is
   active or done. */
.lp-arrow {
    flex: 1 1 auto;
    min-width: 18px;
    height: 2px;
    margin: 0 4px;
    align-self: flex-start;
    margin-top: 14px;   /* centers with 30px circles (padding-top 14 + 15 mid) */
    background: var(--border);
    border-radius: 2px;
    font-size: 0;       /* hide the "›" text character */
    color: transparent;
    opacity: 1;
    position: relative;
    overflow: hidden;
    user-select: none;
}
[data-theme="dark"] .lp-arrow { background: rgba(255,255,255,0.08); }

/* Segment fills with gradient once previous step is active/done. */
.lp-step.lp-active + .lp-arrow,
.lp-step.lp-done  + .lp-arrow {
    background: linear-gradient(90deg, #6366F1, #A855F7);
}
[data-theme="dark"] .lp-step.lp-active + .lp-arrow,
[data-theme="dark"] .lp-step.lp-done  + .lp-arrow {
    background: linear-gradient(90deg, #4C1D95, #831843);
}
/* Rail segments stay on the unified deep violet→rose, matching the nav
   buttons. Per-stage tinting would break the visual link between the
   flow rail and the lesson's primary action buttons. */

/* Flowing shimmer on the active-leading segment — visual forward motion. */
.lp-step.lp-active + .lp-arrow::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.55) 50%,
        transparent 100%);
    background-size: 200% 100%;
    animation: lpRailShimmer 2.2s linear infinite;
}
@keyframes lpRailShimmer {
    0%   { background-position: -100% 0; }
    100% { background-position:  200% 0; }
}

/* Keep old toolbar styles for backward compat */
.material-toolbar {
    display: flex; gap: 8px; flex-wrap: wrap;
    margin-bottom: 10px; padding: 0 4px;
}
.mat-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px; border-radius: 8px; border: none;
    color: #fff; font-size: 13px;
    font-weight: 600; cursor: pointer; transition: all 0.2s;
    font-family: 'Space Mono', monospace;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.mat-btn:hover { transform: translateY(-1px); }
.mat-lecture:hover  { background: rgba(8,145,178,0.06);  border-color: rgba(8,145,178,0.5);  box-shadow: 0 0 10px rgba(8,145,178,0.1); }
.mat-lab:hover      { background: rgba(5,150,105,0.06);  border-color: rgba(5,150,105,0.5);  box-shadow: 0 0 10px rgba(5,150,105,0.1); }
.mat-solution:hover { background: rgba(124,58,237,0.06); border-color: rgba(124,58,237,0.5); box-shadow: 0 0 10px rgba(124,58,237,0.1); }
.mat-btn .mat-icon { font-size: 15px; }
.mat-btn {
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim);
}
.mat-lecture  { border-color: rgba(8,145,178,0.3);  color: var(--cyan); }
.mat-lab      { border-color: rgba(5,150,105,0.3);  color: var(--green); }
.mat-solution { border-color: rgba(124,58,237,0.3); color: var(--violet); }

[data-theme="dark"] .mat-btn {
    background: var(--bg-card); color: #c0c4d8;
    border: 1px solid var(--border);
    box-shadow: none;
}
[data-theme="dark"] .mat-lecture  { border-color: rgba(129,140,248,0.25);  color: var(--cyan); }
[data-theme="dark"] .mat-lab      { border-color: rgba(74,222,128,0.25); color: var(--green); }
[data-theme="dark"] .mat-solution { border-color: rgba(167,139,250,0.25); color: var(--violet); }
[data-theme="dark"] .mat-btn:hover { background: #1A1C24; }
[data-theme="dark"] .mat-lecture:hover  { border-color: rgba(129,140,248,0.5);  box-shadow: 0 0 14px rgba(129,140,248,0.15); }
[data-theme="dark"] .mat-lab:hover      { border-color: rgba(74,222,128,0.5); box-shadow: 0 0 14px rgba(74,222,128,0.15); }
[data-theme="dark"] .mat-solution:hover { border-color: rgba(167,139,250,0.5); box-shadow: 0 0 14px rgba(167,139,250,0.15); }

/* Drawer overlay — stops above the nav row so the Previous/Next arrows
   underneath stay clickable, not just visible. */
.drawer-overlay {
    position: fixed; top: 0; right: 0; left: 0; bottom: 64px;
    background: var(--overlay-bg);
    z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

/* Content drawer (slides from right) — leaves the bottom nav row
   uncovered so the user can keep walking through phases without closing.
   Default opens to half the viewport so the lecture sits side-by-side with
   the interactive panel, never covering it. */
.content-drawer {
    position: fixed; top: 0; right: 0; bottom: 64px;
    width: clamp(640px, 60vw, 1400px); z-index: 910;
    /* min-width: 0 lets flex children inside .drawer-body shrink and wrap
       instead of forcing horizontal scroll on the whole drawer. */
    min-width: 0;
    background: var(--bg-card); border-left: 1px solid var(--border);
    box-shadow: -8px 0 30px rgba(0,0,0,0.15);
    transform: translateX(100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
}
.content-drawer.open { transform: translateX(0); }

/* Fullscreen view — drawer takes the entire viewport width. */
.content-drawer.is-fullscreen {
    width: 100vw !important;
    max-width: none;
}
.content-drawer.is-fullscreen .drawer-body {
    max-width: 1200px;
    margin: 0 auto;
    padding: 36px 56px;
}
.content-drawer.is-fullscreen .drawer-resize-handle { display: none; }

/* Minimized view — collapses to a thin vertical tab on the right edge.
   The tab keeps the title visible (rotated) so the user can spot what's
   tucked away and click to restore. Scroll position is preserved. */
.content-drawer.is-minimized {
    width: 44px !important;
    cursor: pointer;
}
.content-drawer.is-minimized .drawer-header,
.content-drawer.is-minimized .drawer-actions,
.content-drawer.is-minimized .drawer-body,
.content-drawer.is-minimized .drawer-resize-handle { display: none; }
.content-drawer.is-minimized .drawer-mini-tab { display: flex; }

.drawer-mini-tab {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%; height: 100%;
    padding: 16px 0;
    background: linear-gradient(180deg, rgba(129,140,248,0.10), rgba(167,139,250,0.06));
    border-left: 2px solid var(--accent);
}
.drawer-mini-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--accent);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-height: calc(100% - 60px);
    user-select: none;
}
.drawer-mini-tab-icon {
    width: 26px; height: 26px;
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(129,140,248,0.12);
    color: var(--accent);
    border: 1px solid rgba(129,140,248,0.30);
}

.drawer-resize-handle {
    position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
    cursor: col-resize; z-index: 5;
    background: transparent; transition: background 0.2s;
}
.drawer-resize-handle::after {
    content: ''; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
    width: 2px; height: 40px; border-radius: 2px;
    background: var(--border); transition: background 0.2s;
}
.drawer-resize-handle:hover,
.drawer-resize-handle:active { background: var(--accent-dim); }
.drawer-resize-handle:hover::after,
.drawer-resize-handle:active::after { background: var(--accent); }

.drawer-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    padding: 22px 26px 20px;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 20;
    background: var(--bg-card);
}
.drawer-header::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    background: var(--accent);
    border-radius: 0 2px 2px 0;
}
[data-theme="dark"] .drawer-header {
    background: #0F1016;
    backdrop-filter: blur(16px) saturate(1.3);
    -webkit-backdrop-filter: blur(16px) saturate(1.3);
    border-bottom-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .drawer-header::before {
    background: var(--accent);
}
.drawer-breadcrumb {
    font-size: 11px; color: var(--text-dim); margin-bottom: 6px;
    font-family: 'Space Mono', monospace; text-transform: uppercase;
    letter-spacing: 1px; font-weight: 700;
}
[data-theme="dark"] .drawer-breadcrumb { color: var(--cyan); opacity: 0.85; }
.drawer-title {
    font-size: 22px; font-weight: 700; color: var(--text); margin: 0;
    font-family: 'Space Mono', monospace;
    line-height: 1.2;
    letter-spacing: 0.2px;
}
[data-theme="dark"] .drawer-title {
    background: linear-gradient(135deg, #ffffff 0%, var(--cyan) 60%, var(--violet) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.drawer-window-controls {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}
.drawer-icon-btn {
    background: var(--card-subtle); border: 1px solid var(--border);
    width: 30px; height: 30px;
    border-radius: 7px;
    color: var(--text-dim);
    cursor: pointer; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all 0.2s;
}
.drawer-icon-btn:hover {
    color: var(--accent);
    background: rgba(129,140,248,0.10);
    border-color: rgba(129,140,248,0.35);
}
.drawer-icon-btn .drawer-icon-fs-off { display: none; }
.content-drawer.is-fullscreen .drawer-icon-btn .drawer-icon-fs-on { display: none; }
.content-drawer.is-fullscreen .drawer-icon-btn .drawer-icon-fs-off { display: block; }

.drawer-close {
    background: var(--card-subtle); border: 1px solid var(--border);
    width: 34px; height: 34px;
    border-radius: 8px;
    font-size: 22px; color: var(--text-dim);
    cursor: pointer; padding: 0; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}
.drawer-close:hover {
    color: var(--text);
    background: rgba(129,140,248,0.12);
    border-color: var(--accent);
    transform: rotate(90deg);
}
[data-theme="dark"] .drawer-close:hover {
    box-shadow: 0 0 12px rgba(129,140,248,0.3);
}

.drawer-actions {
    display: flex; gap: 6px; padding: 10px 24px;
    border-bottom: 1px solid var(--border); flex-shrink: 0;
    align-items: center;
}
.drawer-action-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent; border: 1px solid var(--border);
    color: var(--text-dim); font-size: 12px; font-family: 'Space Mono', monospace;
    padding: 5px 12px; border-radius: 6px; cursor: pointer;
    transition: all 0.2s;
}
.drawer-action-btn:hover {
    color: var(--text); border-color: var(--accent-dim);
    background: rgba(6, 182, 212, 0.06);
}
.drawer-action-icon { font-size: 13px; }
[data-theme="dark"] .drawer-action-btn {
    border-color: var(--border);
}
[data-theme="dark"] .drawer-action-btn:hover {
    border-color: rgba(129,140,248,0.4);
    background: rgba(129,140,248,0.1);
    color: var(--accent);
}

.drawer-body {
    flex: 1; overflow-y: auto; overflow-x: hidden; padding: 24px;
    font-size: 14px; line-height: 1.7; color: var(--text);
    /* min-width:0 inside the flex column lets long lines wrap instead of
       expanding the drawer. */
    min-width: 0;
}
/* Force every block-level child to respect the drawer width — no element
   may push the drawer wider than its current size. Wide stuff (code,
   tables, images) handles its own overflow internally. */
.drawer-body .md-content,
.drawer-body .md-content > * {
    max-width: 100%;
    min-width: 0;
}
.drawer-body .md-content p,
.drawer-body .md-content li,
.drawer-body .md-content blockquote,
.drawer-body .md-content h1,
.drawer-body .md-content h2,
.drawer-body .md-content h3 {
    overflow-wrap: anywhere;
    word-break: break-word;
}
/* Images are the most aggressive overflow source — clamp them with
   !important so no inline width/height attribute can break out of the
   drawer width. height:auto preserves aspect ratio. */
.drawer-body .md-content img,
.drawer-body .md-content p img,
.drawer-body img {
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin-left: auto;
    margin-right: auto;
}
/* Tables overflow-scroll inside their own scroll-box rather than pushing
   the drawer wider. */
.drawer-body .md-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
}
/* Same for the new diagram widgets — let chips wrap onto a second row
   if the drawer is narrow. */
.drawer-body .md-content .md-flow {
    flex-wrap: wrap;
}
.drawer-body .md-content .md-cluster-grid {
    grid-template-columns: 1fr;
}
@media (min-width: 720px) {
    .drawer-body .md-content .md-cluster-grid {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }
}
.drawer-loading {
    text-align: center; padding: 40px; color: var(--text-dim);
    font-size: 14px;
}

/* Markdown content styling inside drawer */
/* Shared markdown typography — same Inter-based hierarchy in both modes.
   Only colors and the h2 accent bar differ by theme (handled below). */
.md-content h1 {
    font-size: 24px;
    font-weight: 800;
    font-family: 'Inter', 'Space Mono', sans-serif;
    color: var(--text);
    margin: 12px 0 6px;
    padding-bottom: 6px;
    border-bottom: 2px solid rgba(99,102,241,0.20);
}
.md-content > h1:first-child,
.md-content > h2:first-child { margin-top: 0; }
.md-content h2 {
    font-size: 19px;
    font-weight: 700;
    font-family: 'Inter', 'Space Mono', sans-serif;
    color: var(--text);
    margin: 14px 0 6px;
    padding-left: 14px;
    position: relative;
}
.md-content h2::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 4px;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--stage-accent, var(--accent)), var(--stage-accent-2, var(--violet)));
}
.md-content h3 {
    font-size: 16px;
    font-weight: 700;
    font-family: 'Inter', 'Space Mono', sans-serif;
    color: var(--stage-accent, var(--accent));
    margin: 11px 0 4px;
    letter-spacing: 0.2px;
}
.md-content p, .md-content li {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--text);
}
.md-content p { margin: 4px 0 6px; }
.md-content ul { margin: 4px 0 6px; padding-left: 24px; }
.md-content ul li { margin: 4px 0; }

/* Lecture visuals — concept-first illustrations rendered inside .md-content
   drawer panels. Used to introduce a function with a small mental-model
   diagram BEFORE the code call. Author them with raw HTML inside the
   markdown source. Two patterns are supported:
     • Image:  <div class="lecture-visual"><img src="..."><div class="vis-caption">…</div></div>
     • Diagram: <div class="lecture-visual"><div class="vis-stack">…</div></div> */
.md-content .lecture-visual {
    margin: 14px auto 18px;
    padding: 18px 20px;
    background: linear-gradient(135deg, rgba(129,140,248,0.05), rgba(167,139,250,0.04));
    border: 1px solid rgba(129,140,248,0.20);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    max-width: 620px;
    text-align: center;
}
.md-content .lecture-visual img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
/* Side-by-side image pair (e.g. tight_layout off vs on) */
.md-content .lecture-visual-pair {
    max-width: 820px;
}
.md-content .lecture-visual-pair img {
    display: inline-block;
    max-width: 48%;
    margin: 0 4px;
    vertical-align: middle;
}
.md-content .lecture-visual .vis-stack {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.md-content .lecture-visual .vis-row {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: center;
}
.md-content .lecture-visual .vis-num-cell {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    background: rgba(255,255,255,0.06);
    border: 1px solid var(--border);
    border-radius: 5px;
}
.md-content .lecture-visual .vis-px-cell {
    display: inline-block;
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid var(--border);
    box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.md-content .lecture-visual .vis-arrow {
    font-size: 22px;
    line-height: 1;
    color: var(--accent);
    font-weight: 700;
    margin: 6px 0 2px;
}
.md-content .lecture-visual .vis-caption {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--text-dim);
    font-style: italic;
    line-height: 1.5;
}
.md-content .lecture-visual .vis-caption code {
    background: rgba(129,140,248,0.12);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-style: normal;
}

/* Numbered ordered lists in the markdown drawer render as a brand-tinted
   pipeline — circular gradient number badge, accent left border, hover
   nudge. Mirrors the lesson-card .ol style so flow steps look consistent
   across the portal. */
.md-content ol {
    list-style: none;
    counter-reset: md-step;
    padding: 0;
    margin: 14px 0 18px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: linear-gradient(135deg, rgba(129,140,248,0.06), rgba(167,139,250,0.03));
    border: 1px solid rgba(129,140,248,0.15);
    border-left: 3px solid var(--accent);
    border-radius: 10px;
    overflow: hidden;
}
.md-content ol > li {
    counter-increment: md-step;
    position: relative;
    padding: 10px 16px 10px 52px;
    border-bottom: 1px solid rgba(129,140,248,0.10);
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    transition: background 0.2s;
}
.md-content ol > li:last-child {
    border-bottom: none;
}
.md-content ol > li:hover {
    background: rgba(129,140,248,0.06);
}
.md-content ol > li::before {
    content: counter(md-step);
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: transparent;
    border: 1px solid rgba(129,140,248,0.30);
    color: var(--accent);
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
}
.md-content ol > li strong {
    color: var(--accent);
    font-weight: 700;
}
.md-content ol > li code {
    background: rgba(129,140,248,0.12);
    color: var(--accent);
    padding: 1px 6px;
    border-radius: 4px;
    font-family: 'Space Mono', 'Consolas', monospace;
    font-size: 12.5px;
}
.md-content ol > li strong code {
    background: rgba(129,140,248,0.18);
}
:root:not([data-theme="dark"]) .md-content ol {
    background: linear-gradient(135deg, rgba(129,140,248,0.04), rgba(167,139,250,0.02));
    border-color: rgba(129,140,248,0.20);
}
.md-content code {
    background: var(--grid-bg); padding: 2px 6px; border-radius: 4px;
    font-family: 'Space Mono', monospace; font-size: 13px; color: var(--text);
}
.md-content pre {
    background: #0F1117; padding: 16px; border-radius: 8px;
    overflow-x: auto; margin: 12px 0;
    /* The background is always dark, so the foreground must always be
       light — otherwise plain (non-Prism) code blocks inherit var(--text)
       and become dark-on-dark invisible in light mode. Prism's .token.*
       rules override this for language-tagged blocks. */
    color: #e6e8f0;
}
.md-content pre code,
.md-content pre code[class*="language-"] {
    background: none;
    padding: 0;
    font-size: 13px;
    font-family: 'Space Mono', 'Fira Code', Consolas, monospace;
    text-shadow: none;
    color: inherit;
}
/* Tighten Prism Tomorrow's defaults to match the lesson palette without
   killing token colours. */
.md-content pre[class*="language-"] {
    background: #0F1117;
    text-shadow: none;
}
.md-content pre { position: relative; }
.md-content pre .code-block-copy {
    position: absolute; top: 8px; right: 8px;
    background: #161821; border: 1px solid rgba(255,255,255,0.12);
    color: #8b8fa8; font-size: 11px; font-family: 'Space Mono', monospace;
    padding: 4px 10px; border-radius: 5px; cursor: pointer;
    opacity: 0; transition: all 0.2s;
}
.md-content pre:hover .code-block-copy { opacity: 1; }
.md-content pre .code-block-copy:hover {
    background: rgba(6, 214, 224, 0.15); color: var(--accent);
    border-color: rgba(6, 214, 224, 0.3);
}
.md-content pre .code-block-copy.copied {
    opacity: 1; color: var(--green); border-color: rgba(34, 211, 160, 0.3);
    background: rgba(34, 211, 160, 0.1);
}
.md-content a { color: var(--accent); text-decoration: none; }
.md-content a:hover { text-decoration: underline; }
.md-content a.dead-link { color: var(--text-dim); cursor: default; text-decoration: none; pointer-events: none; opacity: 0.6; }
.md-content table {
    width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px;
}
.md-content th, .md-content td {
    padding: 8px 12px; border: 1px solid var(--border); text-align: left;
}
.md-content th {
    background: var(--bg-sidebar); font-weight: 600;
}
.md-content blockquote {
    border-left: 3px solid var(--accent); margin: 6px 0 4px; padding: 8px 16px;
    color: var(--text-dim); background: var(--accent-dim); border-radius: 0 6px 6px 0;
}
.md-content blockquote + h1,
.md-content blockquote + h2,
.md-content blockquote + h3 { margin-top: 6px; }
.md-content strong { color: var(--text); }
.md-content hr { border: none; border-top: 1px solid var(--border); margin: 4px 0 6px; }
.md-content h1 + hr, .md-content h2 + hr { margin-top: 4px; }

/* ── Dark-mode md-content overrides ──────────────────────── */

/* Dark-mode-only color tweaks — typography is shared (see .md-content h1-h3
   above). Borders use a cooler indigo in dark; light keeps the base violet. */
[data-theme="dark"] .md-content h1 {
    color: #fff;
    border-bottom-color: rgba(129,140,248,0.20);
}
[data-theme="dark"] .md-content h2 {
    color: #e8eaff;
}

/* Inline code — vivid accent chip */
[data-theme="dark"] .md-content code {
    background: rgba(129,140,248,0.14);
    color: #a5b4fc;
    border: 1px solid rgba(129,140,248,0.20);
    padding: 2px 7px;
    border-radius: 5px;
    font-family: 'Space Mono', 'Consolas', monospace;
    font-size: 13px;
    font-weight: 500;
}
/* Code inside pre blocks — reset the chip style */
[data-theme="dark"] .md-content pre code {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    border-radius: 0;
    font-weight: 400;
}

/* Unordered list — styled bullets; spacing inherited from base */
[data-theme="dark"] .md-content ul {
    list-style: none;
}
[data-theme="dark"] .md-content ul li {
    position: relative;
    padding-left: 20px;
}
[data-theme="dark"] .md-content ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--stage-accent, var(--accent));
    opacity: 0.7;
}

/* Blockquote — accent bar + tinted panel; spacing inherited from base */
[data-theme="dark"] .md-content blockquote {
    border-left: 3px solid var(--stage-accent, var(--accent));
    background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(167,139,250,0.04));
    border-radius: 0 10px 10px 0;
    color: var(--text);
}
[data-theme="dark"] .md-content blockquote p {
    color: var(--text);
    opacity: 0.9;
}

/* Strong — brighter white */
[data-theme="dark"] .md-content strong {
    color: #fff;
    font-weight: 700;
}

/* HR divider — gradient line; spacing inherited from base */
[data-theme="dark"] .md-content hr {
    border: none;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(129,140,248,0.25), transparent);
}

/* Tables — elevated panel style */
[data-theme="dark"] .md-content table {
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid rgba(129,140,248,0.15);
    border-radius: 10px;
    overflow: hidden;
    margin: 14px 0;
}
[data-theme="dark"] .md-content th {
    background: linear-gradient(135deg, rgba(129,140,248,0.12), rgba(167,139,250,0.08));
    color: #c4cbff;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: none;
    border-bottom: 1px solid rgba(129,140,248,0.15);
    padding: 10px 14px;
}
[data-theme="dark"] .md-content td {
    border: none;
    border-bottom: 1px solid rgba(129,140,248,0.08);
    padding: 9px 14px;
    font-size: 13.5px;
}
[data-theme="dark"] .md-content tr:last-child td {
    border-bottom: none;
}
[data-theme="dark"] .md-content tr:hover td {
    background: rgba(129,140,248,0.05);
}

/* Pre/code blocks — subtle glow border */
[data-theme="dark"] .md-content pre {
    border: 1px solid rgba(129,140,248,0.12);
    box-shadow: 0 4px 16px rgba(0,0,0,0.3);
}

/* Links */
[data-theme="dark"] .md-content a {
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(34,211,238,0.25);
    transition: border-color 0.2s;
}
[data-theme="dark"] .md-content a:hover {
    border-bottom-color: var(--cyan);
    text-decoration: none;
}

/* ── End dark-mode md-content overrides ──────────────────── */

/* Code modal overlay — stops above the lesson nav row so the
   Previous/Next arrows stay clickable while the Compare script is open. */
.code-modal-overlay {
    position: fixed; top: 0; right: 0; left: 0; bottom: 64px;
    background: radial-gradient(ellipse at center, rgba(8,12,28,0.55), rgba(2,4,12,0.85));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 900; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.code-modal-overlay.open { opacity: 1; pointer-events: auto; }

/* Code modal — modern frosted card with gradient border.
   Centered within the area ABOVE the nav row and capped to leave that
   row visible, so the arrows aren't covered even on short displays. */
.code-modal {
    position: fixed; top: calc(50% - 32px); left: 50%;
    transform: translate(-50%, -50%) scale(0.96);
    width: min(960px, 92vw); max-height: calc(85vh - 64px);
    z-index: 910;
    background: linear-gradient(180deg, #08091a 0%, #04050f 100%);
    border-radius: 14px;
    /* Gradient border via padded background-clip */
    border: 1px solid transparent;
    background-clip: padding-box;
    box-shadow:
        0 0 0 1px rgba(129,140,248,0.22),
        0 30px 80px rgba(0,0,0,0.7),
        0 0 60px rgba(129,140,248,0.14),
        0 0 120px rgba(167,139,250,0.08);
    opacity: 0; pointer-events: none;
    transition: all 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex; flex-direction: column;
    overflow: hidden;
}
.code-modal::before {
    /* Glowing top accent line */
    content: '';
    position: absolute; left: 0; right: 0; top: 0; height: 2px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(129,140,248,0.6) 20%,
        rgba(167,139,250,0.6) 80%,
        transparent 100%);
    pointer-events: none;
}
.code-modal.open {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
}

/* Fullscreen — code modal goes edge-to-edge above the bottom nav row. */
.code-modal.is-fullscreen {
    top: 0; left: 0;
    transform: none !important;
    width: 100vw !important;
    max-width: none;
    height: calc(100vh - 64px);
    max-height: calc(100vh - 64px);
    border-radius: 0;
}
.code-modal.is-fullscreen.open { transform: none !important; }
.code-modal.is-fullscreen .code-modal-body {
    padding: 0;
}
.code-modal.is-fullscreen .code-modal-body pre {
    max-width: 1400px;
    margin: 0 auto;
}

/* Minimized — collapses the modal to a small floating chip at the
   bottom-right of the viewport, just above the nav row. Click to restore. */
.code-modal.is-minimized {
    top: auto; left: auto; right: 24px; bottom: 84px;
    transform: none !important;
    width: auto !important; max-width: none;
    height: auto; max-height: none;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 0 0 1px rgba(129,140,248,0.45),
        0 12px 32px rgba(0,0,0,0.55),
        0 0 24px rgba(129,140,248,0.25);
}
.code-modal.is-minimized.open { transform: none !important; }
.code-modal.is-minimized .code-modal-header,
.code-modal.is-minimized .code-modal-body { display: none; }
.code-modal.is-minimized .code-modal-mini-chip { display: inline-flex; }

.code-modal-mini-chip {
    display: none;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
    background: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(167,139,250,0.10));
    white-space: nowrap;
}
.code-modal-mini-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: rgba(129,140,248,0.20);
    border: 1px solid rgba(129,140,248,0.40);
    font-size: 11px;
}
.code-modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px 14px 16px;
    background: linear-gradient(180deg, rgba(255,255,255,0.025), transparent);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    position: relative;
}
.code-modal-filename {
    display: flex; align-items: center; gap: 12px;
    font-family: 'Space Mono', monospace; font-size: 14px;
    color: #e6edff; font-weight: 700;
    letter-spacing: 0.2px;
}
.code-modal-filename::before {
    /* Traffic-light dots — pure decoration, signals "this is a code window" */
    content: '';
    display: inline-block;
    width: 46px; height: 12px;
    background:
        radial-gradient(circle at 6px 6px,  #ff5f57 0 5px, transparent 6px),
        radial-gradient(circle at 22px 6px, #febc2e 0 5px, transparent 6px),
        radial-gradient(circle at 38px 6px, #28c840 0 5px, transparent 6px);
    background-repeat: no-repeat;
    flex-shrink: 0;
    opacity: 0.85;
}
.code-modal-filename::after {
    /* Tiny PY badge after the filename */
    content: 'PY';
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #818cf8;
    background: rgba(129,140,248,0.12);
    border: 1px solid rgba(129,140,248,0.35);
    padding: 2px 6px;
    border-radius: 4px;
    text-shadow: 0 0 8px rgba(129,140,248,0.4);
}
.code-run-btn {
    padding: 7px 16px; border-radius: 8px;
    border: 1px solid rgba(129,140,248,0.45);
    background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
    color: #04050f; font-size: 12px; font-weight: 800;
    cursor: pointer; font-family: 'Space Mono', monospace;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35);
    box-shadow:
        0 0 0 1px rgba(129,140,248,0.3),
        0 6px 22px rgba(167,139,250,0.4),
        inset 0 1px 0 rgba(255,255,255,0.25);
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.code-run-btn:hover {
    transform: translateY(-1px);
    background: linear-gradient(135deg, #22e6f0 0%, #b873ff 100%);
    box-shadow:
        0 0 0 1px rgba(129,140,248,0.5),
        0 8px 28px rgba(167,139,250,0.55),
        inset 0 1px 0 rgba(255,255,255,0.35);
}
.code-run-btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }
.code-run-btn .spinner {
    display: inline-block; width: 12px; height: 12px;
    border: 2px solid rgba(4,5,15,0.35); border-top-color: #04050f;
    border-radius: 50%; animation: spin 0.6s linear infinite;
    vertical-align: middle; margin-right: 4px;
}
@keyframes spin { to { transform: rotate(360deg); } }
.code-copy-btn {
    padding: 7px 14px; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    backdrop-filter: blur(10px);
    color: #c4ccea; font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: 'Space Mono', monospace;
    transition: all 0.2s;
    letter-spacing: 0.3px;
}
.code-copy-btn:hover {
    background: rgba(129,140,248,0.1);
    border-color: rgba(129,140,248,0.45);
    color: #a5b4fc;
    box-shadow: 0 0 14px rgba(129,140,248,0.25);
}
.code-modal-header .drawer-close {
    color: #6c7086;
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
    transition: all 0.2s;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
}
.code-modal-header .drawer-close:hover {
    color: #f8fafc;
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.45);
}
.code-modal-body {
    flex: 1; overflow-y: auto; padding: 0; min-height: 0;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 10px),
        linear-gradient(180deg, #05060f 0%, #02030a 100%);
}
.code-modal-body::-webkit-scrollbar { width: 10px; }
.code-modal-body::-webkit-scrollbar-track { background: transparent; }
.code-modal-body::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, rgba(129,140,248,0.45), rgba(167,139,250,0.4));
    border-radius: 6px;
    border: 2px solid #02030a;
}
.code-modal-body::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, rgba(129,140,248,0.7), rgba(167,139,250,0.6));
}

/* ── Run Output Modal ────────────────────────────────────────────────────── */
.run-modal-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.6);
    z-index: 950; opacity: 0; pointer-events: none; transition: opacity 0.3s;
}
.run-modal-overlay.open { opacity: 1; pointer-events: auto; }

.run-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0.95);
    width: 800px; max-width: 94vw; max-height: 88vh;
    background: #0F1117; border-radius: 12px;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5);
    z-index: 960; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
    display: flex; flex-direction: column; overflow: hidden;
}
.run-modal.open { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%) scale(1); }

.run-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 20px; background: #181825;
    border-bottom: 2px solid #40a02b;
}
.run-modal-title {
    display: flex; align-items: center; gap: 8px;
    font-family: 'Space Mono', monospace; font-size: 14px;
    color: #cdd6f4; font-weight: 600;
}
.run-modal-icon { color: #40a02b; font-size: 16px; }
.run-modal-header .drawer-close { color: #6c7086; }
.run-modal-header .drawer-close:hover { color: #cdd6f4; }

.run-modal-body {
    flex: 1; overflow-y: auto; padding: 20px 24px;
    background: #11111b; font-family: 'Space Mono', monospace; font-size: 13px;
}

.run-section-label {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #40a02b; margin: 0 0 8px;
    padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.08);
}
.run-section-label.run-section-warn { color: #f9e2af; }
.run-section-label:not(:first-child) { margin-top: 20px; }

.run-stdout { color: #cdd6f4; margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.6; }
.run-stderr { color: #f9e2af; margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 12px; line-height: 1.6; }
.run-error { color: #f38ba8; font-weight: 600; padding: 12px 0; }
.run-exit { color: #f38ba8; font-size: 11px; margin-top: 12px; }
.run-empty { color: #6c7086; font-style: italic; padding: 20px 0; }
.run-loading {
    color: #a6adc8; padding: 40px 0; text-align: center;
    display: flex; align-items: center; justify-content: center; gap: 10px;
}
.run-loading .spinner {
    display: inline-block; width: 16px; height: 16px;
    border: 2px solid rgba(255,255,255,0.08); border-top-color: #40a02b;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}
.run-figures { display: flex; flex-direction: column; gap: 16px; margin-top: 8px; }
.run-figure {
    max-width: 100%; border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08); background: #fff;
}

/* ── Collapsible section cards ─────────────────────────────────────────── */
.run-section-card {
    background: #0F1117; border: 1px solid rgba(255,255,255,0.08); border-radius: 8px;
    margin-bottom: 10px; overflow: hidden;
    transition: border-color 0.2s;
}
.run-section-card[open] { border-color: #40a02b; box-shadow: 0 0 12px rgba(64,160,43,0.15); }
.run-section-card.run-section-warn-card[open] { border-color: #f9e2af; }

.run-section-summary {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px; cursor: pointer;
    font-family: 'Space Mono', monospace; font-size: 13px;
    font-weight: 600; color: #cdd6f4;
    list-style: none; user-select: none;
}
.run-section-summary::-webkit-details-marker { display: none; }
.run-section-summary::marker { content: ''; }
.run-section-summary:hover { background: #181825; }

.run-section-chevron {
    color: #6c7086; font-size: 12px;
    transition: transform 0.2s; display: inline-block;
}
.run-section-card[open] > .run-section-summary .run-section-chevron {
    transform: rotate(90deg); color: #40a02b;
}
.run-section-warn-card[open] > .run-section-summary .run-section-chevron {
    color: #f9e2af;
}

.run-section-name { flex: 1; }

.run-section-badge {
    font-size: 10px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.5px; color: #89b4fa; background: rgba(137,180,250,0.12);
    padding: 2px 8px; border-radius: 10px;
}

.run-section-summary-warn .run-section-name { color: #f9e2af; }

.run-section-content {
    padding: 0 14px 14px;
    border-top: 1px solid rgba(255,255,255,0.08);
}
.run-section-content .run-stdout { margin-top: 10px; }
.run-section-content .run-figures { margin-top: 12px; }

/* Streaming progress spinner (small, inline) */
.run-section-spinner {
    display: inline-flex; align-items: center; margin-left: 4px;
}
.spinner-sm {
    width: 14px; height: 14px;
    border: 2px solid rgba(255,255,255,0.08); border-top-color: #40a02b;
    border-radius: 50%; animation: spin 0.8s linear infinite;
}

/* Section card appear animation */
.run-section-appear {
    animation: sectionSlideIn 0.3s ease-out;
}
@keyframes sectionSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Figure appear animation */
.run-figure-appear {
    animation: figFadeIn 0.4s ease-out;
}
@keyframes figFadeIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}

.code-modal-body pre {
    margin: 0; padding: 22px 24px 28px; background: transparent !important;
    font-size: 13px; line-height: 1.65;
}
.code-modal-body code {
    font-family: 'Space Mono', monospace !important;
}

/* Override Prism theme to match our dark modal */
.code-modal-body pre[class*="language-"] {
    background: transparent !important;
}
/* Subtle line-number gutter so it visually separates from code */
.code-modal-body pre.line-numbers {
    padding-left: 3.6em;
}
.code-modal-body .line-numbers .line-numbers-rows {
    border-right: 1px solid rgba(255,255,255,0.08);
    padding-right: 6px;
}
.code-modal-body .line-numbers-rows > span:before {
    color: rgba(140, 152, 200, 0.55);
    font-weight: 500;
}

/* ── Brand syntax theme ──────────────────────────────────────────────────
 * Override Prism Tomorrow's token colours with our CSS variables so the
 * code modal and markdown code blocks share the portal's cyan/violet/orange
 * palette and respond to light/dark theme toggling automatically. */
pre[class*="language-"],
code[class*="language-"] {
    color: #d8e0f5 !important;
    text-shadow: none !important;
    background: #070a18 !important;
}
pre[class*="language-"] {
    border: 1px solid rgba(129,140,248,0.12) !important;
    border-radius: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 2px 12px rgba(0,0,0,0.30) !important;
}
:root:not([data-theme="dark"]) pre[class*="language-"],
:root:not([data-theme="dark"]) code[class*="language-"] {
    background: #0a1024 !important;
}
pre[class*="language-"] .token.comment,
pre[class*="language-"] .token.prolog,
pre[class*="language-"] .token.doctype,
pre[class*="language-"] .token.cdata,
code[class*="language-"] .token.comment {
    color: var(--text-dim) !important;
    font-style: italic;
}
pre[class*="language-"] .token.punctuation,
pre[class*="language-"] .token.operator,
code[class*="language-"] .token.punctuation,
code[class*="language-"] .token.operator {
    color: #c4ccea !important;
}
pre[class*="language-"] .token.string,
pre[class*="language-"] .token.attr-value,
pre[class*="language-"] .token.char,
pre[class*="language-"] .token.regex,
pre[class*="language-"] .token.template-string,
code[class*="language-"] .token.string,
code[class*="language-"] .token.attr-value {
    color: var(--orange) !important;
}
pre[class*="language-"] .token.keyword,
pre[class*="language-"] .token.atrule,
pre[class*="language-"] .token.important,
pre[class*="language-"] .token.selector,
code[class*="language-"] .token.keyword {
    color: var(--violet) !important;
    font-weight: 600;
}
pre[class*="language-"] .token.function,
pre[class*="language-"] .token.class-name,
pre[class*="language-"] .token.builtin,
pre[class*="language-"] .token.tag,
pre[class*="language-"] .token.property,
pre[class*="language-"] .token.attr-name,
code[class*="language-"] .token.function,
code[class*="language-"] .token.class-name {
    color: var(--accent) !important;
}
pre[class*="language-"] .token.number,
pre[class*="language-"] .token.boolean,
pre[class*="language-"] .token.constant,
pre[class*="language-"] .token.symbol,
pre[class*="language-"] .token.deleted,
code[class*="language-"] .token.number,
code[class*="language-"] .token.boolean {
    color: var(--red) !important;
}
pre[class*="language-"] .token.variable,
pre[class*="language-"] .token.parameter,
code[class*="language-"] .token.variable {
    color: #d8e0f5 !important;
}
pre[class*="language-"] .token.url,
pre[class*="language-"] .token.entity,
pre[class*="language-"] .token.inserted {
    color: var(--green) !important;
}
/* Light-theme base text colour for code blocks. The background of every
 * code block is intentionally dark in BOTH themes (set on .md-content pre
 * and .card pre to #0F1117 / #0a1024), so the foreground must stay light
 * in light mode too. Earlier this was set to #2a2f4a, which made plain
 * (non-Prism) code blocks like ASCII diagrams render dark-on-dark and
 * become invisible. */
:root:not([data-theme="dark"]) pre[class*="language-"],
:root:not([data-theme="dark"]) code[class*="language-"] {
    color: #e6e8f0 !important;
}
:root:not([data-theme="dark"]) pre[class*="language-"] .token.punctuation,
:root:not([data-theme="dark"]) pre[class*="language-"] .token.operator {
    color: #c4ccea !important;
}
:root:not([data-theme="dark"]) pre[class*="language-"] .token.variable {
    color: #d8e0f5 !important;
}

@media (max-width: 768px) {
    .content-drawer { width: 100vw !important; min-width: 0; }
    .content-drawer.is-minimized { width: 44px !important; }
    .code-modal { width: 96vw; max-height: 90vh; }
    .material-toolbar { gap: 6px; }
    .mat-btn { font-size: 12px; padding: 5px 10px; }
    .learning-path { gap: 0; padding: 10px 12px 8px; }
    .lp-step { padding: 0; min-width: 48px; }
    .lp-hint { display: none; }
    .lp-arrow { min-width: 10px; margin: 12px 2px 0; height: 2px; padding: 0; }
    .lp-num { width: 26px; height: 26px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Per-stage theming
   ──────────────────────────────────────────────────────────────────────────
   Each lesson page (index + step) renders with body[data-stage="sN"]. We use
   CSS variables so a single accent definition retints the lesson title,
   progress bar, sidebar active state, gear, and back chip — making it
   instantly obvious which stage of the program the learner is in.

   The five brand colors mirror the home-page roadmap:
     s1 cyan  · s2 violet · s3 orange · s4 red · s5 green
   ══════════════════════════════════════════════════════════════════════════ */

/* Defaults — applied wherever the body has no data-stage (home, admin) */
body {
    --stage-accent:    var(--accent);
    --stage-accent-2:  var(--violet);
    --stage-glow:      rgba(129,140,248,0.55);
    --stage-glow-soft: rgba(129,140,248,0.30);
    --stage-tint-08:   rgba(129,140,248,0.08);
    --stage-tint-18:   rgba(129,140,248,0.18);
    --stage-tint-28:   rgba(129,140,248,0.28);
    --stage-grad-soft: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(167,139,250,0.18));
}

/* s1 — Classic ML — violet → pink */
body[data-stage="s1"] {
    --stage-accent:    #a78bfa;
    --stage-accent-2:  #ec4899;
    --stage-glow:      rgba(167,139,250,0.55);
    --stage-glow-soft: rgba(167,139,250,0.30);
    --stage-tint-08:   rgba(167,139,250,0.08);
    --stage-tint-18:   rgba(167,139,250,0.18);
    --stage-tint-28:   rgba(167,139,250,0.28);
    --stage-grad-soft: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(236,72,153,0.18));
}

/* s2 — Intermediate ML — cyan → sky */
body[data-stage="s2"] {
    --stage-accent:    #818cf8;
    --stage-accent-2:  #38bdf8;
    --stage-glow:      rgba(129,140,248,0.55);
    --stage-glow-soft: rgba(129,140,248,0.30);
    --stage-tint-08:   rgba(129,140,248,0.08);
    --stage-tint-18:   rgba(129,140,248,0.18);
    --stage-tint-28:   rgba(129,140,248,0.28);
    --stage-grad-soft: linear-gradient(135deg, rgba(129,140,248,0.18), rgba(56,189,248,0.18));
}

/* s3 — Neural Networks — orange → red */
body[data-stage="s3"] {
    --stage-accent:    #f59e0b;
    --stage-accent-2:  #f87171;
    --stage-glow:      rgba(251,146,60,0.55);
    --stage-glow-soft: rgba(251,146,60,0.30);
    --stage-tint-08:   rgba(251,146,60,0.08);
    --stage-tint-18:   rgba(251,146,60,0.18);
    --stage-tint-28:   rgba(251,146,60,0.28);
    --stage-grad-soft: linear-gradient(135deg, rgba(251,146,60,0.18), rgba(248,113,113,0.18));
}

/* s4 — Generative AI — red → pink */
body[data-stage="s4"] {
    --stage-accent:    #f87171;
    --stage-accent-2:  #ec4899;
    --stage-glow:      rgba(248,113,113,0.55);
    --stage-glow-soft: rgba(248,113,113,0.30);
    --stage-tint-08:   rgba(248,113,113,0.08);
    --stage-tint-18:   rgba(248,113,113,0.18);
    --stage-tint-28:   rgba(248,113,113,0.28);
    --stage-grad-soft: linear-gradient(135deg, rgba(248,113,113,0.18), rgba(236,72,153,0.18));
}

/* s5 — Applied Check Point AI — green → cyan */
body[data-stage="s5"] {
    --stage-accent:    #4ade80;
    --stage-accent-2:  #818cf8;
    --stage-glow:      rgba(74,222,128,0.55);
    --stage-glow-soft: rgba(74,222,128,0.30);
    --stage-tint-08:   rgba(74,222,128,0.08);
    --stage-tint-18:   rgba(74,222,128,0.18);
    --stage-tint-28:   rgba(74,222,128,0.28);
    --stage-grad-soft: linear-gradient(135deg, rgba(74,222,128,0.18), rgba(129,140,248,0.18));
}

/* ── Themed surfaces — applied only when a stage is set ────────────────── */
body[data-stage] .welcome h1 {
    background: linear-gradient(135deg, var(--stage-accent), var(--stage-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

body[data-stage] .welcome-progress-fill {
    background: linear-gradient(90deg, var(--stage-accent), var(--stage-accent-2));
    box-shadow: 0 0 14px var(--stage-glow);
}
body[data-stage] .welcome-progress-pct {
    color: var(--stage-accent);
}

body[data-stage] .welcome-back {
    background: var(--stage-tint-08);
    border-color: var(--stage-tint-28);
    color: var(--stage-accent);
}
body[data-stage] .welcome-back:hover {
    background: var(--stage-grad-soft);
    border-color: var(--stage-accent);
    color: var(--stage-accent);
    box-shadow: 0 0 18px var(--stage-glow-soft);
}

/* Idle state picks up the lesson's stage colour so it sits naturally in
   the page. The hover state intentionally falls through to the global
   .welcome-reset:hover (red) so the destructive intent is unambiguous
   regardless of which stage you're in. */
body[data-stage] .welcome-reset {
    border-color: var(--stage-tint-28);
    background: var(--stage-tint-08);
    color: var(--stage-accent);
}

/* Lesson page top progress bar */
body[data-stage] .progress-fill {
    background: linear-gradient(90deg, var(--stage-accent), var(--stage-accent-2));
}
body[data-stage][data-theme="dark"] .progress-fill,
[data-theme="dark"] body[data-stage] .progress-fill {
    box-shadow: 0 0 8px var(--stage-glow-soft), 0 0 20px var(--stage-tint-18);
}

/* Sidebar lesson title (gradient text) */
body[data-stage][data-theme="dark"] .sidebar h2 a,
[data-theme="dark"] body[data-stage] .sidebar h2 a {
    background: linear-gradient(135deg, var(--stage-accent), var(--stage-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Sidebar step numbers — stage-colored (text only, no fills) */
body[data-stage][data-theme="dark"] .step-num,
[data-theme="dark"] body[data-stage] .step-num {
    background: transparent;
    border: none;
    color: var(--text-dim);
}
body[data-stage][data-theme="dark"] .sidebar li a:hover .step-num,
[data-theme="dark"] body[data-stage] .sidebar li a:hover .step-num {
    background: transparent;
    color: var(--stage-accent);
    border: none;
}
body[data-stage] .sidebar li.active .step-num {
    background: linear-gradient(135deg, var(--stage-accent), var(--stage-accent-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    border: none;
    box-shadow: none;
    font-weight: 700;
}
body[data-stage][data-theme="dark"] .sidebar li.active .step-num,
[data-theme="dark"] body[data-stage] .sidebar li.active .step-num {
    box-shadow: none;
}

/* Sidebar active row — stage-tinted */
body[data-stage][data-theme="dark"] .sidebar li.active a,
[data-theme="dark"] body[data-stage] .sidebar li.active a {
    background: linear-gradient(90deg, var(--stage-tint-28), var(--stage-tint-08) 70%, transparent);
    border: none;
    box-shadow: none;
    text-shadow: none;
}

/* Sidebar back-to-portal chip — stage-colored */
body[data-stage] .sidebar-back {
    background: var(--stage-tint-08);
    border-color: var(--stage-tint-28);
    color: var(--stage-accent);
}
body[data-stage] .sidebar-back:hover {
    background: linear-gradient(135deg, var(--stage-accent), var(--stage-accent-2));
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 20px var(--stage-glow-soft);
}

/* Step cards on lesson index — accent number tile (mirrors home roadmap palette) */
body[data-stage="s1"] .step-card .num { background: linear-gradient(135deg, #c4a3ff, #8b5cf6); color: #1a0a2e; }
body[data-stage="s2"] .step-card .num { background: linear-gradient(135deg, #a5b4fc, #06b6d4); color: #04141a; }
body[data-stage="s3"] .step-card .num { background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #2a1505; }
body[data-stage="s4"] .step-card .num { background: linear-gradient(135deg, #f87171, #f87171); color: #2a040c; }
body[data-stage="s5"] .step-card .num { background: linear-gradient(135deg, #34d399, #10b981); color: #04231a; }

body[data-stage] .step-card { border-left-color: var(--stage-accent); }
body[data-stage] .step-card:hover {
    border-left-color: var(--stage-accent-2);
    border-color: var(--stage-tint-28);
    box-shadow: 0 0 24px var(--stage-glow-soft),
                0 8px 24px rgba(0, 0, 0, 0.08),
                inset 0 0 0 1px var(--stage-tint-28);
    background: var(--bg-card);
}
[data-theme="dark"] body[data-stage] .step-card:hover,
body[data-stage][data-theme="dark"] .step-card:hover {
    box-shadow: 0 0 36px var(--stage-glow-soft),
                0 10px 32px rgba(0, 0, 0, 0.5),
                inset 0 0 0 1px var(--stage-tint-28);
    background: linear-gradient(135deg, var(--stage-tint-08), rgba(20, 20, 40, 0.95));
}
body[data-stage] .step-card:hover .num {
    box-shadow: 0 0 18px var(--stage-glow-soft);
}
body[data-stage] .step-card:hover .info .title {
    text-shadow: 0 0 10px var(--stage-glow-soft);
}

/* Done state stays green across all stages — graduates know what done means. */

/* ════════════════════════════════════════════════════════════════════════
   End-of-lesson Quiz
   Rendered by portal/templates/quiz.html. Each lesson defines a QUIZ list
   in its blueprint and the /quiz route serves it. The quiz UI is one card
   per question with selectable options, a "Show answer" reveal, a per-card
   correct/incorrect/revealed state, and a final results panel that scrolls
   into view once every question has been answered or revealed.
   All state lives in localStorage under quizState_<lessonId>.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Sidebar quiz link (added by lesson_base.html when quiz_count > 0) ── */
.sidebar .sidebar-quiz {
    margin-top: 4px;
    padding-top: 8px;
}
.sidebar .sidebar-quiz::before { content: none; }
.sidebar .sidebar-quiz .step-num.quiz-num {
    background: transparent;
    border: none;
    color: var(--stage-accent, var(--accent));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}
.sidebar .sidebar-quiz a { display: flex; align-items: center; gap: 10px; }
.sidebar .sidebar-quiz .quiz-count-badge {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 10px;
    background: var(--stage-tint-18, rgba(255,255,255,0.08));
    color: var(--stage-accent, var(--accent));
    font-size: 11px;
    font-weight: 700;
    line-height: 1.4;
}
.sidebar .sidebar-quiz.active .step-num.quiz-num {
    background: var(--stage-accent, var(--accent));
    color: var(--bg, #0C0D12);
}

/* ── Quiz header strip ─────────────────────────────────────────────────── */
.quiz-header {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 22px 24px;
    margin: 0 0 22px;
    border-radius: 14px;
    background: linear-gradient(135deg,
        var(--stage-tint-12, rgba(124,58,237,0.10)),
        var(--stage-tint-06, rgba(124,58,237,0.04)));
    border: 1px solid var(--stage-tint-18, rgba(124,58,237,0.18));
    position: relative;
    overflow: hidden;
}
.quiz-header::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 90% 30%, var(--stage-tint-12, rgba(255,255,255,0.06)), transparent 60%);
    pointer-events: none;
}
.quiz-header-icon {
    width: 56px; height: 56px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--stage-tint-18, rgba(255,255,255,0.10));
    color: var(--stage-accent, var(--accent));
    border: 1px solid var(--stage-tint-18, rgba(255,255,255,0.18));
}
.quiz-header-text { flex: 1 1 auto; min-width: 0; }
.quiz-header-text h1 {
    margin: 0;
    font-size: 24px;
    color: var(--text);
    line-height: 1.2;
}
.quiz-header-text .quiz-subtitle {
    margin: 4px 0 0;
    font-size: 13px;
    color: var(--text-dim);
}
.quiz-header-meta { flex-shrink: 0; }
.quiz-progress-pill {
    display: inline-block;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--bg-soft, rgba(255,255,255,0.04));
    border: 1px solid var(--stage-tint-18, rgba(255,255,255,0.10));
    color: var(--stage-accent, var(--accent));
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* ── Quiz container + cards ────────────────────────────────────────────── */
.quiz-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.quiz-card {
    padding: 20px 22px 18px;
    border-radius: 12px;
    background: var(--bg-card, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.quiz-card:hover { border-color: var(--stage-tint-18, rgba(255,255,255,0.14)); }
.quiz-card.answered.correct {
    border-color: rgba(74,222,128,0.45);
    box-shadow: 0 0 0 1px rgba(74,222,128,0.18) inset;
}
.quiz-card.answered.wrong {
    border-color: rgba(248,113,113,0.45);
    box-shadow: 0 0 0 1px rgba(248,113,113,0.18) inset;
}
.quiz-card.answered.revealed {
    border-color: rgba(251,146,60,0.45);
    box-shadow: 0 0 0 1px rgba(251,146,60,0.18) inset;
}

.quiz-card-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 12px;
}
.quiz-q-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--stage-accent, var(--accent));
    line-height: 1;
}
.quiz-q-of {
    font-size: 12px;
    color: var(--text-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.quiz-q-state {
    margin-left: auto;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-dim);
}
.quiz-card.answered.correct .quiz-q-state { color: var(--green, #4ade80); }
.quiz-card.answered.wrong   .quiz-q-state { color: var(--red, #f87171); }
.quiz-card.answered.revealed .quiz-q-state { color: var(--orange, #f59e0b); }

.quiz-q-text {
    font-size: 16px;
    line-height: 1.55;
    color: var(--text);
    margin-bottom: 14px;
}
.quiz-q-text code {
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--bg-soft, rgba(255,255,255,0.06));
    font-size: 0.92em;
}

/* ── Options ────────────────────────────────────────────────────────── */
.quiz-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.quiz-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--bg-soft, rgba(255,255,255,0.03));
    border: 1.5px solid var(--border, rgba(255,255,255,0.08));
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}
.quiz-option:hover {
    border-color: var(--stage-accent, var(--accent));
    background: var(--stage-tint-06, rgba(255,255,255,0.05));
}
.quiz-option:active { transform: translateY(1px); }
.quiz-card.answered .quiz-option {
    cursor: default;
    pointer-events: none;
}

.quiz-opt-letter {
    flex-shrink: 0;
    width: 26px; height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg, rgba(0,0,0,0.25));
    border: 1px solid var(--border, rgba(255,255,255,0.10));
    font-weight: 700;
    font-size: 13px;
    color: var(--text-dim);
}
.quiz-opt-text { flex: 1 1 auto; min-width: 0; }
.quiz-opt-text code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg, rgba(0,0,0,0.25));
    font-size: 0.92em;
}
.quiz-opt-mark {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Picked + correct */
.quiz-option.correct {
    border-color: rgba(74,222,128,0.65);
    background: rgba(74,222,128,0.10);
}
.quiz-option.correct .quiz-opt-letter {
    background: rgba(74,222,128,0.20);
    border-color: rgba(74,222,128,0.5);
    color: var(--green, #4ade80);
}
.quiz-option.correct .quiz-opt-mark::before {
    content: "\2713";
    color: var(--green, #4ade80);
}
.quiz-option.correct .quiz-opt-mark { opacity: 1; }

/* Picked + wrong */
.quiz-option.wrong {
    border-color: rgba(248,113,113,0.65);
    background: rgba(248,113,113,0.10);
}
.quiz-option.wrong .quiz-opt-letter {
    background: rgba(248,113,113,0.20);
    border-color: rgba(248,113,113,0.5);
    color: var(--red, #f87171);
}
.quiz-option.wrong .quiz-opt-mark::before {
    content: "\2717";
    color: var(--red, #f87171);
}
.quiz-option.wrong .quiz-opt-mark { opacity: 1; }

/* Revealed (no pick, just shown) */
.quiz-option.revealed {
    border-style: dashed;
    border-color: rgba(251,146,60,0.7);
}

/* ── Reveal button + explanation ──────────────────────────────────────── */
.quiz-card-foot {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--border, rgba(255,255,255,0.08));
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.quiz-reveal-btn {
    align-self: flex-start;
}
.quiz-card.answered .quiz-reveal-btn {
    display: none;
}
.quiz-explain {
    display: none;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--stage-tint-06, rgba(255,255,255,0.04));
    border-left: 3px solid var(--stage-accent, var(--accent));
    font-size: 13px;
    line-height: 1.55;
    color: var(--text);
}
.quiz-explain.shown { display: block; }
.quiz-explain code {
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--bg, rgba(0,0,0,0.25));
    font-size: 0.92em;
}

/* ── Results panel ────────────────────────────────────────────────────── */
.quiz-results {
    margin-top: 24px;
    padding: 28px 28px 24px;
    border-radius: 16px;
    background: linear-gradient(135deg,
        var(--stage-tint-12, rgba(124,58,237,0.10)),
        var(--stage-tint-06, rgba(124,58,237,0.04)));
    border: 1px solid var(--stage-tint-18, rgba(124,58,237,0.20));
    text-align: center;
    animation: quizResultsIn 0.45s cubic-bezier(0.2,0.9,0.3,1.2) both;
}
@keyframes quizResultsIn {
    0%   { opacity: 0; transform: translateY(12px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0)    scale(1);    }
}
.quiz-results-icon {
    display: inline-flex;
    width: 76px; height: 76px;
    align-items: center; justify-content: center;
    border-radius: 50%;
    background: var(--stage-tint-18, rgba(255,255,255,0.10));
    color: var(--stage-accent, var(--accent));
    border: 2px solid var(--stage-tint-18, rgba(255,255,255,0.18));
    margin-bottom: 12px;
}
.quiz-results-title {
    margin: 0 0 14px;
    font-size: 22px;
    color: var(--text);
}
.quiz-score-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}
.quiz-score {
    display: inline-flex;
    align-items: baseline;
    color: var(--stage-accent, var(--accent));
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}
.quiz-score-num { font-size: 56px; line-height: 1; }
.quiz-score-of {
    font-size: 22px;
    color: var(--text-dim);
    margin-left: 4px;
}
.quiz-score-meta { text-align: left; }
.quiz-score-pct {
    font-size: 22px;
    font-weight: 700;
    color: var(--text);
}
.quiz-score-label {
    font-size: 13px;
    color: var(--text-dim);
}
.quiz-results-bar {
    height: 8px;
    border-radius: 999px;
    background: var(--bg-soft, rgba(255,255,255,0.06));
    overflow: hidden;
    margin: 0 auto 18px;
    max-width: 420px;
}
.quiz-results-fill {
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--stage-accent, var(--accent)), var(--stage-accent-2, var(--violet)));
    transition: width 0.6s ease;
}
.quiz-results-breakdown {
    list-style: none;
    padding: 0;
    margin: 0 auto 20px;
    max-width: 560px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.quiz-result-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    background: var(--bg-soft, rgba(255,255,255,0.03));
    border: 1px solid var(--border, rgba(255,255,255,0.06));
    font-size: 13px;
}
.quiz-result-row.ok   { border-left: 3px solid var(--green,  #4ade80); }
.quiz-result-row.no   { border-left: 3px solid var(--red,    #f87171); }
.quiz-result-row.rev  { border-left: 3px solid var(--orange, #f59e0b); }
.quiz-result-row.skip { border-left: 3px solid var(--text-dim, #888); }
.quiz-result-icon {
    flex-shrink: 0;
    width: 22px; height: 22px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: 800;
    font-size: 13px;
    background: var(--bg, rgba(0,0,0,0.3));
    color: var(--text-dim);
}
.quiz-result-row.ok   .quiz-result-icon { color: var(--green,  #4ade80); }
.quiz-result-row.no   .quiz-result-icon { color: var(--red,    #f87171); }
.quiz-result-row.rev  .quiz-result-icon { color: var(--orange, #f59e0b); }
.quiz-result-num {
    flex-shrink: 0;
    font-weight: 700;
    color: var(--stage-accent, var(--accent));
    font-variant-numeric: tabular-nums;
}
.quiz-result-text {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--text-dim);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.quiz-results-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.quiz-results-actions .btn { min-width: 140px; }

/* ── Bottom nav ───────────────────────────────────────────────────────── */
.quiz-nav-buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--border, rgba(255,255,255,0.08));
}
.quiz-nav-buttons a {
    color: var(--text-dim);
    text-decoration: none;
    font-size: 14px;
    padding: 8px 14px;
    border-radius: 8px;
    transition: color 0.15s, background 0.15s;
}
.quiz-nav-buttons a:hover {
    color: var(--stage-accent, var(--accent));
    background: var(--stage-tint-06, rgba(255,255,255,0.04));
}

/* ── Mobile tweaks ────────────────────────────────────────────────────── */
@media (max-width: 700px) {
    .quiz-header { flex-wrap: wrap; padding: 18px; }
    .quiz-header-meta { width: 100%; }
    .quiz-results { padding: 22px 16px; }
    .quiz-score-num { font-size: 44px; }
}

/* ── Markdown drawer: color-coded diagram primitives ────────────────── */
/* Used by curriculum/stage4_genai/01_how_llms_work/README.md to replace
   ASCII art with proper visual flows. */
.md-content .md-flow {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 12px 0 16px;
    padding: 12px 14px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
}
.md-content .md-flow-chip {
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    border: 1px solid;
}
.md-content .md-flow-chip small {
    margin-left: 6px;
    font-weight: 400;
    opacity: 0.8;
}
.md-content .md-chip-cyan {
    background: rgba(6, 214, 224, 0.10);
    border-color: rgba(6, 214, 224, 0.45);
    color: var(--cyan);
}
.md-content .md-chip-violet {
    background: rgba(168, 85, 247, 0.10);
    border-color: rgba(168, 85, 247, 0.45);
    color: var(--violet);
}
.md-content .md-chip-amber {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.45);
    color: var(--orange);
}
.md-content .md-flow-arrow {
    color: var(--text-dim);
    font-size: 18px;
    font-weight: 700;
}

.md-content .md-callout {
    margin: 14px 0;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid;
    font-size: 14px;
    line-height: 1.5;
}
.md-content .md-callout-red {
    background: rgba(244, 63, 94, 0.07);
    border-left-color: var(--red);
}
.md-content .md-callout-cyan {
    background: rgba(8, 145, 178, 0.08);
    border-left-color: var(--cyan);
}
.md-content .md-callout-violet {
    background: rgba(139, 92, 246, 0.08);
    border-left-color: var(--violet);
}

/* Cluster grid for the embeddings vector groups */
.md-content .md-cluster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
    margin: 14px 0 18px;
}
.md-content .md-cluster {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    line-height: 1.7;
}
.md-content .md-cluster-cyan {
    background: rgba(6, 214, 224, 0.07);
    border-color: rgba(6, 214, 224, 0.30);
}
.md-content .md-cluster-amber {
    background: rgba(245, 158, 11, 0.07);
    border-color: rgba(245, 158, 11, 0.30);
}
.md-content .md-cluster-title {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.md-content .md-cluster-cyan .md-cluster-title { color: var(--cyan); }
.md-content .md-cluster-amber .md-cluster-title { color: var(--orange); }
.md-content .md-cluster-title small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.7;
}
.md-content .md-vec {
    color: var(--text-dim);
    font-size: 11px;
}

/* ── Tokenisation example cards ────────────────────────────────────── */
/* Each example is a distinct visual unit: header strip with a colored
   verdict badge, the input string, the resulting token chips inline,
   and a one-line takeaway. Used in s4_01 README for the "is one token =
   one word?" section. */
.md-content .tok-example {
    margin: 16px 0 22px;
    padding: 0;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
}
.md-content .tok-example-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 16px;
    background: rgba(6, 214, 224, 0.07);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.md-content .tok-example-title {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 0;
}
.md-content .tok-example-title small {
    margin-left: 8px;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-dim);
    text-transform: none;
    letter-spacing: 0;
}
.md-content .tok-verdict {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-family: 'Space Mono', monospace;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    border: 1px solid;
    white-space: nowrap;
}
.md-content .tok-verdict-good {
    background: rgba(34, 211, 160, 0.10);
    border-color: rgba(34, 211, 160, 0.45);
    color: var(--green);
}
.md-content .tok-verdict-warn {
    background: rgba(245, 158, 11, 0.10);
    border-color: rgba(245, 158, 11, 0.45);
    color: var(--orange);
}
.md-content .tok-verdict-bad {
    background: rgba(244, 63, 94, 0.10);
    border-color: rgba(244, 63, 94, 0.45);
    color: var(--red);
}
.md-content .tok-input {
    padding: 12px 16px 6px;
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    color: var(--text-dim);
}
.md-content .tok-input strong {
    color: var(--text);
}
.md-content .tok-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 16px 14px;
}
.md-content .tok-chip {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    padding: 6px 10px 4px;
    background: rgba(168, 85, 247, 0.10);
    border: 1px solid rgba(168, 85, 247, 0.40);
    border-radius: 6px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--text);
    line-height: 1.2;
}
.md-content .tok-chip-text {
    font-weight: 700;
    color: var(--violet);
    white-space: pre;
}
.md-content .tok-chip-id {
    font-size: 9px;
    color: var(--text-dim);
    margin-top: 2px;
}
.md-content .tok-takeaway {
    padding: 10px 16px 14px;
    border-top: 1px dashed var(--border);
    font-size: 13px;
    line-height: 1.5;
    color: var(--text);
    background: rgba(255, 255, 255, 0.02);
}
.md-content .tok-takeaway strong { color: var(--text); }

/* Inline horizontal bar (for attention weight tables) */
.md-content .md-bar {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    min-width: 40px;
}
.md-content .md-bar-cyan {
    background: linear-gradient(90deg, rgba(6, 214, 224, 0.55), rgba(6, 214, 224, 0.20));
    color: var(--cyan);
}
.md-content .md-bar-amber {
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.45), rgba(245, 158, 11, 0.15));
    color: var(--orange);
}

/* ── s4_01 step 1: compact layout for above-the-fold fit ─────────────── */
body.lesson-page .card.step1-compact h3 {
    margin: 0 0 8px;
}
body.lesson-page .card.step1-compact p {
    margin: 6px 0;
    font-size: 14px;
    line-height: 1.5;
}
body.lesson-page .card.step1-compact .llm-quote {
    margin: 8px 0;
    padding: 8px 14px;
    background: linear-gradient(135deg, rgba(99,102,241,0.08), rgba(139,92,246,0.05));
    border-left: 3px solid;
    border-image: linear-gradient(180deg, #6366f1, #a855f7) 1;
    border-radius: 0 6px 6px 0;
    font-size: 14px;
    line-height: 1.45;
    color: var(--text);
    font-style: normal;
}
body.lesson-page .card.step1-compact .llm-quote em {
    color: var(--cyan);
    font-style: italic;
    font-weight: 600;
}
body.lesson-page .card.step1-compact .controls {
    margin: 10px 0 0;
}
/* Prompt input — clearly interactive */
.prompt-input-wrap {
    margin: 12px 0 0;
}
.prompt-input-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cyan);
    margin-bottom: 6px;
    letter-spacing: 0.3px;
}
.prompt-input-field {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--accent);
    border-radius: 10px;
    background: var(--input-bg);
    color: var(--text);
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
.prompt-input-field:focus {
    outline: none;
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(34,211,238,0.15), 0 0 12px rgba(34,211,238,0.10);
}
[data-theme="dark"] .prompt-input-field {
    background: #0C0D12;
    border-color: rgba(34,211,238,0.40);
}
[data-theme="dark"] .prompt-input-field:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 3px rgba(34,211,238,0.12), 0 0 14px rgba(34,211,238,0.08);
}
body.lesson-page .card.step1-compact #prompt-input {
    flex: 1;
}
body.lesson-page .card.step1-compact .token-flow {
    margin-top: 10px;
}
body.lesson-page .card.step1-compact .pred-block {
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(245, 158, 11, 0.06);
    border: 1px solid rgba(245, 158, 11, 0.25);
    border-radius: 8px;
}
body.lesson-page .card.step1-compact .pred-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--orange);
    font-weight: 700;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pred-info-btn {
    background: none;
    border: 1px solid rgba(251,191,36,0.30);
    color: var(--orange);
    font-size: 14px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, border-color 0.2s;
    line-height: 1;
}
.pred-info-btn:hover {
    background: rgba(251,191,36,0.12);
    border-color: var(--orange);
}
.pred-info-panel {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--text-dim);
    background: rgba(251,191,36,0.06);
    border: 1px solid rgba(251,191,36,0.15);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}
.pred-info-panel strong { color: var(--text); }
.pred-info-panel em { color: var(--orange); }
body.lesson-page .card.step1-compact #predictions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
body.lesson-page .card.step1-compact .compact-info {
    margin-top: 10px;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.45;
}

/* ════════════════════════════════════════════════════════════════════════
   Inline Tab Panels — Explore / Read / Build / Compare / Reflect
   All content renders inside .content-main instead of drawers/modals.
   Only the .active panel is visible; others are hidden.
   ════════════════════════════════════════════════════════════════════════ */
.tab-panel {
    display: none;
    animation: fadeSlideUp 0.3s ease both;
}
.tab-panel.active {
    display: block;
}
.tab-loading {
    padding: 32px;
    text-align: center;
    color: var(--text-dim);
    font-size: 14px;
}

/* Read / Build / Reflect tabs — slightly narrower, centered */
.tab-panel .md-content,
.tab-panel .reflect-content {
    max-width: 96%;
    margin: 0 auto;
    padding: 0;
}
.tab-panel .md-content > :first-child,
.tab-panel .reflect-content > :first-child {
    margin-top: 0 !important;
}
.tab-panel .tab-md-header {
    max-width: 96%;
    margin: 0 auto 16px;
}
/* Images inside tab panels — constrain to container */
.tab-panel .md-content img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 8px auto;
    border-radius: 10px;
}
/* Tables inside tab panels — horizontal scroll on overflow */
.tab-panel .md-content table {
    display: block;
    width: 100%;
    overflow-x: auto;
}

/* Read / Build tab — markdown action header */
.tab-md-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    margin-bottom: 12px;
    background: linear-gradient(135deg, rgba(129,140,248,0.06), rgba(167,139,250,0.03));
    border: 1px solid rgba(129,140,248,0.12);
    border-radius: var(--radius);
}
.tab-md-title {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--text-dim);
}
[data-theme="dark"] .tab-md-title {
    color: var(--stage-accent, var(--accent));
}
.tab-md-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}
.tab-md-actions .btn {
    font-size: 12px;
    padding: 4px 10px;
}

/* Compare tab — code viewer with header */
#tabCompare {
    max-width: 96%;
    margin: 0 auto;
}
.tab-code-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, rgba(129,140,248,0.08), rgba(167,139,250,0.05));
    border: 1px solid rgba(129,140,248,0.18);
    border-bottom: none;
    border-radius: var(--radius) var(--radius) 0 0;
    margin-bottom: 0;
}
.tab-code-filename {
    font-family: 'Space Mono', monospace;
    font-size: 13px;
    font-weight: 700;
    color: var(--accent);
}
.tab-code-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.tab-code-actions .btn-run {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-color: #f59e0b;
    color: #1a1000;
    font-weight: 700;
}
.tab-code-actions .btn-run:hover {
    box-shadow: 0 0 14px rgba(251,191,36,0.4);
}
.tab-panel pre.language-python {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* Reflect tab */
.reflect-content {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.reflect-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-dim);
    font-family: 'Space Mono', monospace;
    margin-bottom: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .reflect-title {
    color: var(--stage-accent, var(--accent));
    border-bottom-color: rgba(255,255,255,0.06);
}

/* ══════════════════════════════════════════════════════════════════════════
   REDESIGN OVERRIDES — "Midnight Ember" polish layer
   Catch-all overrides that sweep remaining hardcoded old-theme values
   to match the new warm-midnight design language.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Global background harmonisation ─────────────────────────────────── */
[data-theme="dark"] .portal-home { color: var(--text); }

/* ── Metric cards ────────────────────────────────────────────────────── */
[data-theme="dark"] .metric-card {
    background: #111318;
    border-color: rgba(255,255,255,0.06);
}

/* ── Slider track ────────────────────────────────────────────────────── */
input[type="range"] {
    accent-color: var(--accent);
}

/* ── Guess buttons ───────────────────────────────────────────────────── */
[data-theme="dark"] .guess-btn {
    background: #111318;
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text);
}
[data-theme="dark"] .guess-btn:hover {
    border-color: rgba(255,255,255,0.15);
    background: #161821;
}
.guess-btn.selected {
    border-color: var(--accent);
    background: var(--accent);
    color: #fff;
    text-shadow: none;
}
.guess-btn.correct {
    border-color: var(--green);
    background: var(--green);
    color: #fff;
    text-shadow: none;
}
.guess-btn.wrong {
    border-color: var(--red);
    background: var(--red);
    color: #fff;
    text-shadow: none;
}

/* ── Data table ──────────────────────────────────────────────────────── */
[data-theme="dark"] .data-table th {
    background: #101218;
}
[data-theme="dark"] .info-table th {
    background: #101218;
}

/* ── Flat array ──────────────────────────────────────────────────────── */
[data-theme="dark"] .flat-array {
    background: #101218;
    border-color: rgba(255,255,255,0.06);
}

/* ── Bar fills ───────────────────────────────────────────────────────── */
.bar-fill.blue { background: linear-gradient(90deg, var(--accent), rgba(123,147,255,0.6)); }
.bar-fill.red  { background: linear-gradient(90deg, var(--red), rgba(255,99,105,0.6)); }

/* ── Challenge box ───────────────────────────────────────────────────── */
[data-theme="dark"] .challenge-box {
    background: rgba(255,187,56,0.04);
    border-color: rgba(255,187,56,0.12);
}
[data-theme="dark"] .challenge-box .answer {
    background: rgba(123,147,255,0.05);
    border-color: rgba(123,147,255,0.12);
}

/* ── Security callout ────────────────────────────────────────────────── */
[data-theme="dark"] .security-callout {
    background: rgba(255,99,105,0.04);
    border-color: rgba(255,99,105,0.12);
}

/* ── Sim meter ───────────────────────────────────────────────────────── */
[data-theme="dark"] .sim-meter {
    background: #111318;
    border-color: rgba(255,255,255,0.06);
}

/* ── Verdict card ────────────────────────────────────────────────────── */
[data-theme="dark"] .verdict-card {
    background: #101218;
    border-color: rgba(255,255,255,0.06);
}

/* ── Proto grid items ────────────────────────────────────────────────── */
[data-theme="dark"] .proto-item {
    background: #101218;
    border-color: rgba(255,255,255,0.06);
}

/* ── Next-up note ────────────────────────────────────────────────────── */
[data-theme="dark"] .next-up-note {
    background: rgba(123,147,255,0.06);
    border-color: rgba(123,147,255,0.15);
    color: var(--text);
}
[data-theme="dark"] .next-up-note strong {
    color: var(--accent);
}

/* ── Hero rule (typographic divider) ─────────────────────────────────── */
.hero-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 8px 0 16px;
    z-index: 1;
    position: relative;
}
.hero-rule-line {
    display: block;
    width: 56px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--accent));
    opacity: 0.4;
}
.hero-rule-line:last-child {
    background: linear-gradient(90deg, var(--accent), transparent);
}
.hero-rule-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    opacity: 0.6;
    box-shadow: 0 0 8px rgba(129,140,248,0.4);
}

/* ── Brand logo adjustments ──────────────────────────────────────────── */
[data-theme="dark"] .brand-logo-wrap {
    filter: brightness(1.1);
}
[data-theme="dark"] .brand-logo-wrap:hover {
    filter: brightness(1.2) drop-shadow(0 0 12px rgba(129,140,248,0.3));
    transform: scale(1.06);
}

/* ── Smooth transitions everywhere ───────────────────────────────────── */
a, button, .btn, .card, .step-card, .lesson-card, .stage-card {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Lesson card number pill ─────────────────────────────────────────── */
[data-theme="dark"] .lesson-num {
    box-shadow: none;
}

/* ── Sidebar lesson title ────────────────────────────────────────────── */
.sidebar-lesson-title {
    font-family: 'Sora', 'Inter', sans-serif;
}

/* ── Kbd badges ──────────────────────────────────────────────────────── */
[data-theme="dark"] .kbd {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-dim);
    box-shadow: none;
}

/* ── Portal home padding ─────────────────────────────────────────────── */
.portal-home {
    padding: 60px 24px 60px;
}

/* ── Stat value color ────────────────────────────────────────────────── */
[data-theme="dark"] .stat .label { color: var(--text-dim); }

/* ── Confirm modal colour fix ────────────────────────────────────────── */
[data-theme="dark"] .confirm-modal {
    background: #111318;
    border-color: rgba(255,255,255,0.06);
}

/* ── Hint modal colour fix ───────────────────────────────────────────── */
[data-theme="dark"] .hint-modal {
    background: #111318;
    border: 1px solid rgba(255,255,255,0.06);
}

/* ── Command menu colour fix ─────────────────────────────────────────── */
[data-theme="dark"] .cmd-overlay { background: rgba(0,0,0,0.55); }

/* ── Lesson page body lock ───────────────────────────────────────────── */
[data-theme="dark"] body.lesson-page .sidebar { height: calc(100vh - 54px); }

/* ── Admin page colour fix ───────────────────────────────────────────── */
[data-theme="dark"] .admin-resource {
    background: #111318;
    border-color: rgba(255,255,255,0.06);
}

/* ── Neuron core fix ─────────────────────────────────────────────────── */
[data-theme="dark"] .neuron-core {
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--cluster-c) 50%, transparent),
        0 0 20px var(--cluster-c-soft),
        inset 0 0 20px rgba(255,255,255,0.08);
}