:root {
    /* Neutral charcoal surfaces (never pure black) with 1px hairline borders */
    --bg-dark: #0b0d0c;
    --bg-section: #101312;
    --bg-card: #141817;
    --border: rgba(148, 163, 184, 0.10);
    --border-strong: rgba(148, 163, 184, 0.18);
    /* Accents tuned for dark backgrounds (300-400 weights for contrast) */
    --primary: #10b981;
    --primary-soft: #34d399;
    --secondary: #0d9488;
    --accent: #5eead4;
    --success: #10b981;
    --success-soft: #34d399;
    --warning: #f59e0b;
    --error: #ef4444;
    --text: #e6eaf2;
    --text-muted: #97a3b6;
    --gradient-1: linear-gradient(135deg, #047857 0%, #0d9488 100%);
    --gradient-2: linear-gradient(135deg, #0f766e 0%, #047857 100%);
    /* Bright variant for progress fills and gradient-clipped data text -
       the dark button gradients disappear against dark tracks/cards */
    --gradient-bright: linear-gradient(135deg, #34d399 0%, #5eead4 100%);
    --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html {
    scroll-behavior: smooth;
    /* Viewport-level horizontal clip: absolutely-positioned helpers
       (tooltips, glows) must never widen the page. Interior
       overflow-x:auto scrollers are unaffected. */
    overflow-x: clip;
}

body {
    font-family: var(--font-body);
    background: var(--bg-dark);
    color: var(--text);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    letter-spacing: -0.015em;
}

/* Skip link for keyboard/screen reader accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: #047857;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 0 0 8px 8px;
    z-index: 9999;
    text-decoration: none;
    font-weight: 600;
    transition: top 0.2s ease;
}

.skip-link:focus {
    top: 0;
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Navigation */
nav {
    overflow-x: clip;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(10, 10, 15, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(16, 185, 129, 0.2);
    display: flex;
    flex-direction: column;
}

nav > .nav-content {
    padding: 1rem 2rem;
}

.nav-content {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    margin-right: 1.75rem;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    background: linear-gradient(135deg, #6ee7b7 0%, #5eead4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.nav-links {
    display: flex;
    gap: 1.5rem;
    list-style: none;
}

.nav-links a {
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.9rem;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    transition: all 0.3s;
}

.nav-links a:hover, .nav-links a.active {
    color: var(--accent);
    background: rgba(94, 234, 212, 0.1);
}

/* Hero */
.hero {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    /* top padding must clear the fixed nav + journey progress bar (~124px) */
    padding: 9rem 2rem 5rem;
    background: radial-gradient(circle at 30% 50%, rgba(16, 185, 129, 0.15) 0%, transparent 50%),
                radial-gradient(circle at 70% 50%, rgba(13, 148, 136, 0.15) 0%, transparent 50%);
}

.hero h1 {
    font-size: clamp(2.75rem, 6.5vw, 4.5rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.05;
    margin-bottom: 1.25rem;
    color: #f7f9fc;
}

.hero h1 .hero-accent {
    color: var(--primary-soft);
}

.hero p {
    font-size: clamp(1.05rem, 1.5vw, 1.25rem);
    color: var(--text-muted);
    max-width: 620px;
    margin-bottom: 2rem;
    line-height: 1.7;
}

.hero-features {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: 3rem;
}

.hero-feature {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--accent);
    font-size: 0.95rem;
}

.start-btn {
    background: #047857;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 1px 3px rgba(0, 0, 0, 0.4);
    padding: 0.95rem 2.4rem;
    font-size: 1.05rem;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: 0.65rem;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}

.start-btn:hover {
    background: #059669;
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 28px rgba(16, 185, 129, 0.35);
}

/* Sections */
section {
    padding: 5rem 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.section-number {
    display: inline-block;
    background: rgba(94, 234, 212, 0.1);
    color: var(--accent);
    padding: 0.4rem 1rem;
    border-radius: 2rem;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.section-title {
    font-size: clamp(1.9rem, 4vw, 2.6rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    margin-bottom: 0.75rem;
}

.section-desc {
    color: var(--text-muted);
    max-width: 600px;
    margin: 0 auto;
}

/* Cards */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 0.875rem;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset;
}

.card h3 {
    color: var(--text);
    font-size: 1.2rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.card h3::before {
    content: '';
    width: 4px;
    height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--primary-soft), var(--accent));
    flex-shrink: 0;
}

/* Interactive Tokenizer */
.tokenizer-input {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.75rem;
    padding: 1rem;
    color: var(--text);
    font-size: 1.1rem;
    resize: none;
    transition: border-color 0.3s;
}

.tokenizer-input:focus {
    outline: none;
    border-color: var(--primary);
}

.token-display {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1.5rem;
    min-height: 60px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
}

.token {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    background: var(--gradient-1);
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    animation: tokenPop 0.3s ease;
}

.token-char {
    font-size: 1.1rem;
    font-weight: 600;
}

.token-id {
    font-size: 0.7rem;
    opacity: 0.8;
}

@keyframes tokenPop {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.1); }
    100% { transform: scale(1); opacity: 1; }
}

/* Embedding Matrix */
.matrix-container {
    overflow-x: auto;
    padding: 1rem 0;
}

.embedding-matrix {
    display: grid;
    gap: 2px;
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.75rem;
    font-family: var(--font-mono);
    font-size: 0.75rem;
}

.matrix-row {
    display: flex;
    gap: 2px;
}

.matrix-cell {
    flex: 1 1 45px;
    min-width: 45px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 3px;
    transition: all 0.3s;
}

.matrix-header {
    background: rgba(16, 185, 129, 0.3);
    font-weight: 600;
}

.matrix-label {
    background: rgba(94, 234, 212, 0.2);
    font-weight: 600;
    min-width: 30px;
}

/* Training Controls */
.training-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
    margin-bottom: 2rem;
}

.control-group {
    background: rgba(0, 0, 0, 0.2);
    padding: 1.25rem;
    border-radius: 0.75rem;
}

.control-group label {
    display: block;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 0.5rem;
}

.control-group input[type="range"] {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    appearance: none;
    cursor: pointer;
}

.control-group input[type="range"]::-webkit-slider-thumb {
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    cursor: pointer;
}

.control-value {
    text-align: right;
    font-family: var(--font-mono);
    color: var(--accent);
    margin-top: 0.25rem;
}

/* Training Buttons Container */
.training-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.train-btn {
    background: var(--gradient-2);
    color: white;
    border: none;
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 0.75rem;
    cursor: pointer;
    flex: 2;
    min-width: 200px;
    transition: all 0.2s;
}

.train-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 20px rgba(94, 234, 212, 0.3);
}

.train-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.reset-btn {
    background: transparent;
    color: var(--text-muted);
    border: 2px solid rgba(255, 255, 255, 0.2);
    padding: 1rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-radius: 0.75rem;
    cursor: pointer;
    flex: 1;
    min-width: 150px;
    transition: all 0.2s;
}

.reset-btn:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: rgba(94, 234, 212, 0.1);
}

.reset-btn:active {
    transform: scale(0.98);
}

/* Stats Display */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.stat-card {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.75rem;
    text-align: center;
}

.stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    font-family: var(--font-mono);
    background: var(--gradient-bright);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

/* Loss Chart */
.chart-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.chart-canvas {
    width: 100%;
    height: 200px;
}

/* Probability Bars */
.prob-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.prob-bar-container {
    margin: 0.5rem 0;
}

.prob-bar-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.25rem;
    font-family: var(--font-mono);
}

.prob-bar-char {
    color: var(--accent);
    font-weight: 600;
}

.prob-bar-value {
    color: var(--text-muted);
}

.prob-bar {
    height: 24px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.prob-bar-fill {
    height: 100%;
    background: var(--gradient-bright);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    padding-left: 0.5rem;
    font-size: 0.75rem;
}

.prob-bar-fill.top {
    background: var(--gradient-bright);
}

/* Generation */
.generation-area {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.generation-input {
    display: flex;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.generation-input input {
    flex: 1;
    min-width: 150px;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    color: var(--text);
    font-size: 1rem;
}

.generation-input input:focus {
    outline: none;
    border-color: var(--primary);
}

.generate-btn {
    background: var(--gradient-1);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
}

.generated-output {
    font-family: var(--font-mono);
    font-size: 1.2rem;
    line-height: 1.8;
    min-height: 100px;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
}

.generated-char {
    display: inline;
    animation: charFade 0.3s ease;
}

.generated-char.new {
    color: var(--accent);
    font-weight: 600;
}

@keyframes charFade {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: var(--accent);
    animation: blink 1s infinite;
    vertical-align: text-bottom;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Concept hierarchy: nested circles AI > ML > Deep Learning > LLMs */
.concept-hierarchy {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem auto;
    max-width: 520px;
}
.ch-ring {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 100%;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--border-strong);
}
.ch-ai  { background: rgba(16, 185, 129, 0.06); }
.ch-ml  { width: 82%; background: rgba(16, 185, 129, 0.10); }
.ch-dl  { width: 78%; background: rgba(52, 211, 153, 0.14); }
.ch-llm { width: 66%; background: rgba(94, 234, 212, 0.20); }
.ch-tag {
    position: absolute;
    top: 0.55rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-display);
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.ch-llm > .ch-tag {
    position: static;
    transform: none;
    color: var(--accent);
    font-size: 0.95rem;
}
@media (max-width: 480px) {
    .ch-tag { font-size: 0.68rem; }
    .ch-llm > .ch-tag { font-size: 0.8rem; }
}

.hierarchy-legend {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-top: 1.5rem;
}
.hl-row {
    display: grid;
    grid-template-columns: minmax(140px, 1fr) 2.4fr;
    grid-template-areas: "name def" "name eg";
    gap: 0.1rem 1rem;
    padding: 0.85rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.6rem;
    border-left: 3px solid var(--border-strong);
}
.hl-ai  { border-left-color: rgba(16, 185, 129, 0.4); }
.hl-ml  { border-left-color: var(--primary); }
.hl-dl  { border-left-color: var(--primary-soft); }
.hl-llm { border-left-color: var(--accent); background: rgba(94, 234, 212, 0.08); }
.hl-name {
    grid-area: name;
    align-self: center;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    font-size: 0.95rem;
}
.hl-def { grid-area: def; color: var(--text-muted); font-size: 0.92rem; }
.hl-eg  { grid-area: eg; color: var(--accent); font-size: 0.82rem; opacity: 0.85; }
@media (max-width: 560px) {
    .hl-row {
        grid-template-columns: 1fr;
        grid-template-areas: "name" "def" "eg";
        gap: 0.25rem;
    }
}

/* History timeline */
.timeline {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.75rem;
    margin: 1.5rem 0;
}
.tl-item {
    position: relative;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.6rem;
    padding: 1rem 0.85rem;
    border-top: 3px solid var(--primary);
}
.tl-year {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--accent);
}
.tl-title {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
    margin: 0.35rem 0 0.5rem;
}
.tl-desc { color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; }
@media (max-width: 900px) {
    .timeline { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .timeline { grid-template-columns: 1fr; }
}

/* Pretraining -> SFT -> RLHF pipeline stages */
.pipeline-stages {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    margin: 1.25rem 0;
}
.stage-card {
    flex: 1 1 0;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1.1rem;
    border-top: 3px solid var(--border-strong);
    position: relative;
}
.stage-done {
    border-top-color: var(--primary);
    background: rgba(16, 185, 129, 0.07);
}
.stage-head {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.stage-num {
    background: var(--primary);
    color: #05140e;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 700;
    flex-shrink: 0;
}
.stage-sub {
    color: var(--accent);
    font-size: 0.78rem;
    margin: 0.35rem 0 0.6rem;
}
.stage-card p { color: var(--text-muted); font-size: 0.88rem; }
.stage-result {
    margin-top: 0.7rem;
    font-size: 0.82rem;
    color: var(--text);
    opacity: 0.85;
}
.stage-badge {
    margin-top: 0.7rem;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--primary-soft);
    background: rgba(16, 185, 129, 0.12);
    border-radius: 0.4rem;
    padding: 0.2rem 0.5rem;
}
.stage-arrow {
    align-self: center;
    color: var(--text-muted);
    font-size: 1.4rem;
    flex-shrink: 0;
}
@media (max-width: 780px) {
    .pipeline-stages { flex-direction: column; }
    .stage-arrow { transform: rotate(90deg); align-self: center; }
}

/* Learning paradigms (supervised / unsupervised / reinforcement) */
.paradigm-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}
.paradigm-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border-top: 3px solid var(--secondary);
}
.pc-icon { font-size: 1.6rem; line-height: 1; }
.pc-name {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    font-size: 1.05rem;
    margin-top: 0.5rem;
}
.pc-tag {
    color: var(--accent);
    font-size: 0.8rem;
    margin-bottom: 0.6rem;
}
.paradigm-card p { color: var(--text-muted); font-size: 0.9rem; }
.pc-cost {
    margin-top: 0.7rem;
    font-size: 0.8rem;
    color: var(--warning);
    opacity: 0.9;
}
@media (max-width: 720px) {
    .paradigm-grid { grid-template-columns: 1fr; }
}

/* Self-supervised "text labels itself" hero example */
.selfsup-example {
    margin: 1.25rem 0;
}
.selfsup-example:empty { display: none; }
.ss-row {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.75rem;
    padding: 1.25rem;
}
.ss-block { text-align: center; }
.ss-cap {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.5rem;
}
.ss-question .ss-cap { color: var(--text-muted); }
.ss-answer .ss-cap { color: var(--accent); }
.ss-chars { display: flex; gap: 0.35rem; justify-content: center; }
.ss-ch {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 600;
    min-width: 1.9rem;
    padding: 0.4rem 0.5rem;
    border-radius: 0.4rem;
    white-space: pre;
}
.ss-ctx-ch {
    background: rgba(148, 163, 184, 0.12);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.ss-label-ch {
    background: rgba(94, 234, 212, 0.18);
    color: var(--accent);
    border: 1px solid var(--accent);
}
.ss-arrow { color: var(--text-muted); font-size: 1.5rem; }
.ss-note {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-top: 0.85rem;
}

/* Data preparation toggles + live before/after preview */
.dataprep-toggles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 620px) {
    .dataprep-toggles { grid-template-columns: 1fr; }
}
.dataprep-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    text-align: left;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    padding: 0.75rem 0.9rem;
    cursor: pointer;
    color: var(--text);
    transition: border-color 0.15s, background 0.15s;
}
.dataprep-btn:hover { border-color: var(--primary); }
.dataprep-btn.active {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.12);
}
.dp-name { font-weight: 600; font-size: 0.92rem; }
.dataprep-btn.active .dp-name::before {
    content: "✓ ";
    color: var(--primary-soft);
}
.dp-hint { color: var(--text-muted); font-size: 0.8rem; }

.dp-sample-btn {
    background: none;
    border: none;
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
    padding: 0;
}
.dp-sample-btn:hover { color: var(--primary-soft); }

.dataprep-preview {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
}
.dp-metric-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.3rem;
}
.dp-metric-row {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-family: var(--font-mono);
    font-size: 1.3rem;
    font-weight: 700;
}
.dp-before { color: var(--text-muted); }
.dp-arrow { color: var(--text-muted); font-size: 1rem; }
.dp-after { color: var(--text); }
.dp-after.dp-changed { color: var(--primary-soft); }
.dp-apply-wrap {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.4rem;
    min-width: 200px;
}
.dp-apply-btn {
    background: var(--primary);
    color: #05140e;
    border: none;
    border-radius: 0.5rem;
    padding: 0.55rem 1.1rem;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--font-display);
}
.dp-apply-btn:disabled {
    background: rgba(148, 163, 184, 0.15);
    color: var(--text-muted);
    cursor: not-allowed;
}
.dp-summary {
    font-size: 0.82rem;
    color: var(--text-muted);
    text-align: right;
}
@media (max-width: 620px) {
    .dp-apply-wrap { margin-left: 0; align-items: flex-start; min-width: 0; }
    .dp-summary { text-align: left; }
}

/* Guided challenges */
.challenge-list { display: flex; flex-direction: column; gap: 0.6rem; }
.challenge {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    padding: 0.8rem 1rem;
    transition: border-color 0.15s, background 0.15s;
}
.challenge.done {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.08);
}
.challenge-check {
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--text-muted);
    flex-shrink: 0;
}
.challenge.done .challenge-check { color: var(--primary-soft); }
.challenge-title { font-weight: 600; color: var(--text); font-size: 0.95rem; }
.challenge.done .challenge-title { color: var(--primary-soft); }
.challenge-how { color: var(--text-muted); font-size: 0.86rem; margin-top: 0.15rem; }

/* Advanced math track */
.math-block {
    background: rgba(0, 0, 0, 0.18);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}
.math-block h4 { color: var(--accent); margin-bottom: 0.5rem; }
.math-block p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; }
.math-block .formula {
    margin: 0.5rem 0 0.9rem;
    font-size: 1.25rem;
    color: var(--text);
    overflow-x: auto;
}
.inline-formula { color: var(--text); font-size: 1.02em; }

/* Real-model chat-style output (prompt = question, reply = distinct answer) */
.rm-q, .rm-a {
    display: block;
    line-height: 1.55;
    overflow-wrap: anywhere;
}
.rm-q { color: var(--text-muted); margin-bottom: 0.5rem; }
.rm-a { color: var(--text); }
.rm-role {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.14);
    border-radius: 0.3rem;
    padding: 0.05rem 0.4rem;
    margin-right: 0.5rem;
    vertical-align: middle;
}
.rm-role-model { color: var(--primary-soft); background: rgba(16, 185, 129, 0.14); }

/* Example-prompt chips */
.prompt-examples { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.prompt-chip {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-strong);
    color: var(--text-muted);
    border-radius: 1rem;
    padding: 0.25rem 0.7rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.prompt-chip:hover { border-color: var(--primary); color: var(--text); }

/* Section hero icons */
.section-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.6rem;
    filter: drop-shadow(0 2px 6px rgba(16, 185, 129, 0.25));
}

/* Transformer-block diagram + attention heatmap */
.tblock-viz {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.3fr);
    gap: 1.25rem;
    align-items: start;
    margin: 1.25rem 0;
}
@media (max-width: 640px) {
    .tblock-viz { grid-template-columns: 1fr; }
}
.tblock { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; text-align: center; }
.tb-io {
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.5rem;
    padding: 0.55rem;
    font-size: 0.82rem;
    color: var(--text-muted);
}
.tb-arrow { color: var(--text-muted); font-size: 1.1rem; line-height: 1; }
.tb-block {
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    padding: 0.7rem 0.6rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    position: relative;
    background: rgba(16, 185, 129, 0.04);
}
.tb-block-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
}
.tb-sub {
    border-radius: 0.45rem;
    padding: 0.5rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.tb-attn { background: rgba(94, 234, 212, 0.16); }
.tb-ffn { background: rgba(16, 185, 129, 0.16); }
.tb-tag { font-size: 0.7rem; font-weight: 500; color: var(--text-muted); }
.tb-mini { font-size: 0.72rem; color: var(--text-muted); }

.attn-viz { display: flex; flex-direction: column; }
.attn-title { font-size: 0.82rem; color: var(--accent); margin-bottom: 0.5rem; text-align: center; }
.attn-grid { display: grid; gap: 3px; }
.attn-corner { }
.attn-head, .attn-row-label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
}
.attn-row-label { justify-content: flex-end; padding-right: 0.35rem; }
.attn-cell {
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    min-width: 14px;
}
.attn-masked { background: rgba(148, 163, 184, 0.06); }
.attn-note { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.6rem; line-height: 1.5; }

/* Gradient-descent bowl visual */
.gd-bowl-wrap { margin-top: 1rem; }
.gd-bowl {
    width: 100%;
    height: 200px;
    display: block;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
}
.gd-bowl-caption {
    font-size: 0.9rem;
    color: var(--text-muted);
    margin-top: 0.6rem;
    line-height: 1.5;
}
.gd-state {
    font-weight: 700;
    margin-right: 0.4rem;
}
.gd-state.gd-ok { color: var(--primary-soft); }
.gd-state.gd-warn { color: var(--warning); }
.gd-state.gd-bad { color: var(--error); }
.gd-bowl-hint { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4rem; opacity: 0.85; }

/* Live p - y gradient demo */
.gradient-demo {
    margin: 1rem 0 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.6rem;
    padding: 0.9rem 1rem;
}
.gradient-demo:empty { display: none; }
.grad-caption { font-size: 0.86rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.grad-example {
    font-family: var(--font-mono);
    color: var(--text);
    background: rgba(148, 163, 184, 0.14);
    padding: 0.05rem 0.35rem;
    border-radius: 0.3rem;
}
.grad-example.grad-target { color: var(--accent); background: rgba(94, 234, 212, 0.15); }
.grad-row {
    display: grid;
    grid-template-columns: 2rem repeat(3, minmax(64px, 1fr)) 2fr;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.4rem;
    border-radius: 0.35rem;
    font-size: 0.85rem;
}
.grad-row.grad-correct { background: rgba(94, 234, 212, 0.08); }
.grad-ch { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.grad-cell { font-family: var(--font-mono); color: var(--text-muted); }
.grad-val.neg { color: var(--primary-soft); }
.grad-val.pos { color: #e88; }
.grad-dir { color: var(--text-muted); font-size: 0.8rem; }
@media (max-width: 620px) {
    .grad-row { grid-template-columns: 1.6rem repeat(3, 1fr); }
    .grad-dir { grid-column: 1 / -1; }
}

/* Precomputed SmolLM2 example traces (instant, no download) */
.canned-traces {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1.5rem;
}
.canned-head { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 1rem; }
.canned-trace {
    border-left: 2px solid var(--border-strong);
    padding-left: 0.9rem;
    margin-bottom: 0.9rem;
}
.canned-prompt { color: var(--text); font-size: 0.92rem; margin-bottom: 0.35rem; }
.canned-reply { color: var(--text-muted); font-size: 0.92rem; line-height: 1.55; overflow-wrap: anywhere; }
.canned-role {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-muted);
    background: rgba(148, 163, 184, 0.14);
    border-radius: 0.3rem;
    padding: 0.1rem 0.4rem;
    margin-right: 0.5rem;
}
.canned-role.reply { color: var(--primary-soft); background: rgba(16, 185, 129, 0.14); }
.canned-note { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }

.bias-note { font-size: 0.86rem; color: var(--accent); margin-top: 0.75rem; }
.bias-note:empty { display: none; }

/* Side-by-side temperature comparison */
.compare-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 620px) {
    .compare-cols { grid-template-columns: 1fr; }
}
.compare-col {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1rem;
}
.compare-head {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 0.9rem;
}
.compare-low { color: var(--primary-soft); }
.compare-high { color: var(--warning); }
.compare-tag { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.6rem; }
.compare-output {
    font-family: var(--font-mono);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--text);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
    min-height: 4rem;
}
.compare-seed { color: var(--text-muted); }
.compare-note { font-size: 0.84rem; color: var(--text-muted); margin-top: 0.75rem; }

/* Shareable config link */
.share-config {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}
.share-config-btn {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-strong);
    color: var(--text);
    border-radius: 0.5rem;
    padding: 0.5rem 0.9rem;
    cursor: pointer;
    font-size: 0.88rem;
    transition: border-color 0.15s;
}
.share-config-btn:hover { border-color: var(--primary); }
.share-config-status { font-size: 0.82rem; color: var(--accent); overflow-wrap: anywhere; }

/* Embedding nearest-neighbor explorer */
.matrix-label-click { cursor: pointer; transition: outline 0.12s; }
.matrix-label-click:hover,
.matrix-label-click:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}
.emb-neighbors { margin-top: 1rem; }
.emb-neighbors:not(.active) { display: none; }
.emb-neighbors.active {
    display: block;
    background: rgba(94, 234, 212, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 0.5rem 0.5rem 0;
    padding: 0.9rem 1.1rem;
}
.nn-head { font-size: 0.95rem; color: var(--text); margin-bottom: 0.6rem; }
.nn-selected {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--accent);
    background: rgba(94, 234, 212, 0.15);
    padding: 0.1rem 0.45rem;
    border-radius: 0.3rem;
}
.nn-row { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.nn-chip {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border-strong);
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
}
.nn-ch { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; color: var(--text); }
.nn-cos { font-size: 0.78rem; color: var(--text-muted); }
.nn-note { font-size: 0.84rem; color: var(--text-muted); line-height: 1.5; }

.overfit-badge {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0.15rem 0.5rem;
    border-radius: 0.4rem;
    margin-right: 0.4rem;
    background: rgba(239, 68, 68, 0.18);
    color: #fca5a5;
    vertical-align: middle;
}
.overfit-warning.warning .overfit-badge {
    background: rgba(245, 158, 11, 0.18);
    color: #fcd34d;
}

.hallucination-note {
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--warning);
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.55;
}
.hallucination-note:empty { display: none; }
.hn-icon { margin-right: 0.15rem; }

.hyperparam-caption {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(94, 234, 212, 0.08);
    border-left: 3px solid var(--accent);
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* Scale-gap callout (your model vs SmolLM2) */
.scale-gap-callout {
    display: flex;
    align-items: stretch;
    gap: 1rem;
    margin: 1.5rem 0 0.75rem;
}
.sg-side {
    flex: 1 1 0;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.75rem;
    padding: 1.1rem;
    text-align: center;
}
.sg-yours { border-top: 3px solid var(--accent); }
.sg-theirs { border-top: 3px solid var(--primary); }
.sg-label { font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.4rem; }
.sg-num {
    font-family: var(--font-mono);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.1;
    overflow-wrap: anywhere;
}
.sg-yours .sg-num { color: var(--accent); }
.sg-theirs .sg-num { color: var(--primary-soft); }
.sg-unit { font-size: 0.8rem; color: var(--text-muted); }
.sg-sub { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.5rem; }
.sg-vs {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    flex: 0 0 auto;
    padding: 0 0.25rem;
}
.sg-factor {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--warning);
    overflow-wrap: anywhere;
}
.sg-vs-label { font-size: 0.75rem; color: var(--text-muted); }
.scale-gap-note { color: var(--text-muted); font-size: 0.88rem; }
@media (max-width: 680px) {
    .scale-gap-callout { flex-direction: column; }
    .sg-vs { flex-direction: row; gap: 0.5rem; }
}

/* Per-dataset recommended-settings note */
.reco-note {
    margin-top: 1rem;
    padding: 0.85rem 1.1rem;
    background: rgba(16, 185, 129, 0.08);
    border-left: 3px solid var(--primary);
    border-radius: 0 0.5rem 0.5rem 0;
    font-size: 0.9rem;
    color: var(--text);
    line-height: 1.55;
}
.reco-note:empty { display: none; }
.reco-icon { color: var(--primary-soft); font-weight: 700; }
.reco-why { color: var(--text-muted); }
.reco-tweak { color: var(--accent); font-size: 0.85rem; }

/* Step by Step */
.step-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .step-container {
        grid-template-columns: 1fr;
    }
}

.step-box {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1.5rem;
}

.step-box h4 {
    color: var(--accent);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.step-number {
    background: var(--primary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}

.math-display {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.5rem;
    font-family: var(--font-mono);
    overflow-x: auto;
    margin: 0.5rem 0;
}

/* Info boxes - Expandable */
.info-box {
    background: rgba(94, 234, 212, 0.1);
    border-left: 3px solid var(--accent);
    padding: 1rem 1.5rem;
    border-radius: 0 0.5rem 0.5rem 0;
    margin: 1.5rem 0;
}

.info-box p {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.info-box-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
}

.info-box-header h4 {
    color: var(--accent);
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.info-box-toggle {
    color: var(--accent);
    font-size: 1.2rem;
    transition: transform 0.3s;
}

.info-box-toggle.open {
    transform: rotate(180deg);
}

.info-box-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
}

.info-box-content.open {
    max-height: 500px;
    padding-top: 1rem;
}

/* Beginner explanations */
.explain-box {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.75rem;
    padding: 1.25rem;
    margin: 1rem 0;
}

.explain-box h4 {
    color: var(--success);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.explain-box p {
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.6;
}

.analogy {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--warning);
    padding: 0.75rem 1rem;
    margin-top: 0.75rem;
    border-radius: 0 0.5rem 0.5rem 0;
    font-style: italic;
    color: var(--text-muted);
}

/* Training data display */
.training-data {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 0.5rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    padding: 0.75rem;
    border-radius: 0.6rem;
    font-family: var(--font-mono);
    margin: 1rem 0;
}

.training-sample {
    display: flex;
    gap: 1rem;
    padding: 0.25rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.training-sample:last-child {
    border-bottom: none;
}

.sample-input {
    color: var(--text-muted);
}

.sample-arrow {
    color: var(--accent);
}

.sample-target {
    color: var(--success);
}

/* Preset buttons */
.preset-buttons {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.preset-btn {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid rgba(16, 185, 129, 0.4);
    color: var(--text);
    padding: 0.6rem 1.2rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.preset-btn:hover {
    background: rgba(16, 185, 129, 0.3);
    border-color: var(--primary);
}

.preset-btn.active {
    background: #047857;
    border-color: #10b981;
}

.preset-btn .preset-name {
    font-weight: 600;
}

.preset-btn .preset-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    display: block;
    margin-top: 0.2rem;
}

/* Epoch Progress */
.epoch-progress {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.epoch-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.epoch-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--accent);
}

.epoch-counter {
    font-family: var(--font-mono);
    font-size: 1.1rem;
    color: var(--text);
}

.epoch-bar {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 1rem;
}

.epoch-bar-fill {
    height: 100%;
    background: var(--gradient-bright);
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
}

.epoch-bar-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

.epoch-milestone {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid var(--success);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    margin-top: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.milestone-icon {
    font-size: 1.5rem;
}

.milestone-text {
    color: var(--success);
    font-weight: 500;
}

/* Before/After Comparison */
.comparison-panel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 1.5rem 0;
}

@media (max-width: 600px) {
    .comparison-panel {
        grid-template-columns: 1fr;
    }
}

.comparison-box {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.25rem;
}

.comparison-box.before {
    border: 2px solid rgba(239, 68, 68, 0.3);
}

.comparison-box.after {
    border: 2px solid rgba(16, 185, 129, 0.3);
}

.comparison-label {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
}

.comparison-box.before .comparison-label {
    color: var(--error);
}

.comparison-box.after .comparison-label {
    color: var(--success);
}

.comparison-text {
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1.6;
    min-height: 60px;
}

.comparison-seed {
    color: var(--text-muted);
}

.comparison-generated {
    color: var(--text);
}

/* Speed control */
.speed-control {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-top: 1rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
}

.speed-label {
    color: var(--text-muted);
    font-size: 0.85rem;
    white-space: nowrap;
}

.speed-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.speed-btn {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 0.4rem 0.8rem;
    border-radius: 0.3rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.speed-btn:hover {
    background: rgba(16, 185, 129, 0.3);
}

.speed-btn.active {
    background: #047857;
    color: white;
    border-color: var(--primary);
}

/* Footer */
footer {
    text-align: center;
    padding: 3rem 2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-muted);
}

footer a {
    color: var(--accent);
    text-decoration: none;
}

/* Dataset Presets */
.dataset-presets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.75rem;
    margin: 1rem 0;
}

.dataset-btn {
    background: rgba(13, 148, 136, 0.15);
    border: 1px solid rgba(13, 148, 136, 0.3);
    color: var(--text);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
    text-align: left;
}

.dataset-btn:hover {
    background: rgba(13, 148, 136, 0.25);
    border-color: var(--secondary);
    transform: translateY(-2px);
}

.dataset-btn.active {
    background: #0f766e;
    border-color: #14b8a6;
}

.dataset-btn .dataset-name {
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.dataset-btn .dataset-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
    display: block;
}

.dataset-btn.active .dataset-desc {
    color: rgba(255, 255, 255, 0.8);
}

/* Dataset Size Indicators */
.dataset-size-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 0.5rem;
    flex-shrink: 0;
}

.dataset-size-indicator.tiny { background: #ef4444; }
.dataset-size-indicator.small { background: #f59e0b; }
.dataset-size-indicator.medium { background: #5eead4; }
.dataset-size-indicator.large { background: #10b981; }
.dataset-size-indicator.xl { background: #10b981; }

/* Dataset Size Legend */
.dataset-size-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
    font-size: 0.8rem;
}

.dataset-size-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--text-muted);
}

.legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-dot.tiny { background: #ef4444; }
.legend-dot.small { background: #f59e0b; }
.legend-dot.medium { background: #5eead4; }
.legend-dot.large { background: #10b981; }
.legend-dot.xl { background: #10b981; }

/* Size Badge */
.size-badge {
    font-size: 0.65rem;
    padding: 0.2rem 0.5rem;
    border-radius: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

/* #f87171 (not #ef4444): 5.21:1 on the alpha-blended card bg - WCAG AA. */
.size-badge.size-tiny { background: rgba(239, 68, 68, 0.2); color: #f87171; }
.size-badge.size-small { background: rgba(245, 158, 11, 0.2); color: #f59e0b; }
.size-badge.size-medium { background: rgba(94, 234, 212, 0.2); color: #5eead4; }
.size-badge.size-large { background: rgba(16, 185, 129, 0.2); color: #10b981; }
.size-badge.size-xl { background: rgba(16, 185, 129, 0.2); color: #10b981; }

/* Train/Validation Split Display */
.data-split-card {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin-top: 1.5rem;
}

.data-split-card h4 {
    margin: 0 0 1rem 0;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.split-bar-container {
    margin-bottom: 1rem;
}

.split-bar {
    display: flex;
    height: 32px;
    border-radius: 0.5rem;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
}

.split-bar-train {
    background: linear-gradient(90deg, #10b981, #059669);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
}

.split-bar-train span {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.split-bar-val {
    background: linear-gradient(90deg, #f59e0b, #d97706);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.3s ease;
}

.split-bar-val span {
    font-size: 0.7rem;
    font-weight: 600;
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.split-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.split-stat {
    text-align: center;
    padding: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.5rem;
}

.split-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.split-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Network Architecture Visualization */
.architecture-viz {
    background: rgba(0, 0, 0, 0.4);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
    overflow-x: auto;
}

.architecture-canvas {
    width: 100%;
    height: 280px;
    min-width: 500px;
}

.arch-legend {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.positive { background: #5eead4; }
.legend-dot.negative { background: #d24545; }
.legend-dot.neutral { background: #94a3b8; }

/* Achievements System */
.achievements-panel {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(234, 88, 12, 0.1));
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.achievements-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.achievements-header h4 {
    color: var(--warning);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.achievements-count {
    background: rgba(245, 158, 11, 0.2);
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
    font-size: 0.85rem;
    color: var(--warning);
}

.achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 1rem;
}

.achievement {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1rem;
    text-align: center;
    transition: all 0.3s;
    border: 2px solid transparent;
}

.achievement.unlocked {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.achievement.locked {
    opacity: 0.4;
    filter: grayscale(1);
}

.achievement-icon {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

.achievement-name {
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.25rem;
}

.achievement-desc {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.achievement.unlocked .achievement-desc {
    color: var(--warning);
}

@keyframes achievementUnlock {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.achievement.just-unlocked {
    animation: achievementUnlock 0.5s ease;
}

/* Misconceptions Section */
.misconceptions-table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}

.misconceptions-table th {
    background: rgba(239, 68, 68, 0.2);
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid rgba(239, 68, 68, 0.3);
}

.misconceptions-table th:first-child {
    color: #fca5a5;
    border-radius: 0.5rem 0 0 0;
}

.misconceptions-table th:last-child {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
    border-bottom-color: rgba(16, 185, 129, 0.3);
    border-radius: 0 0.5rem 0 0;
}

.misconceptions-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    vertical-align: top;
}

.misconceptions-table tr:hover td {
    background: rgba(255, 255, 255, 0.02);
}

.myth-icon { color: #f87171; margin-right: 0.5rem; }
.reality-icon { color: var(--success); margin-right: 0.5rem; }

/* What-If Experiments */
.experiment-box {
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.1), rgba(16, 185, 129, 0.1));
    border: 1px solid rgba(94, 234, 212, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1.5rem 0;
}

.experiment-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.experiment-header h4 {
    color: var(--accent);
    margin: 0;
}

.experiment-icon {
    font-size: 1.5rem;
}

.experiment-controls {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.experiment-btn {
    background: rgba(94, 234, 212, 0.2);
    border: 1px solid rgba(94, 234, 212, 0.4);
    color: var(--text);
    padding: 0.6rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.2s;
}

.experiment-btn:hover {
    background: rgba(94, 234, 212, 0.3);
    transform: translateY(-1px);
}

.experiment-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.experiment-result {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.5rem;
    padding: 1rem;
    font-family: var(--font-mono);
    min-height: 60px;
}

.experiment-prediction {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

/* Scrollytelling enhancements */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.scroll-reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal.delay-1 { transition-delay: 0.1s; }
.scroll-reveal.delay-2 { transition-delay: 0.2s; }
.scroll-reveal.delay-3 { transition-delay: 0.3s; }

.highlight-on-scroll {
    transition: all 0.3s;
}

.highlight-on-scroll.active {
    background: rgba(16, 185, 129, 0.1);
    border-left: 3px solid var(--primary);
    padding-left: 1rem;
}

/* Loss chart annotations */
.chart-annotation {
    position: absolute;
    font-size: 0.7rem;
    color: var(--text-muted);
    background: rgba(0, 0, 0, 0.8);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    pointer-events: none;
    white-space: nowrap;
}

/* Animations — content is visible by default; the reveal effect only
   applies when JS is running (html.js) so crawlers, print, and no-JS
   users always see the content. */
html.js .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

html.js .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html.js .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* Context window display */
.context-display {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-family: var(--font-mono);
    font-size: 0.95rem;
    padding: 0.5rem 0.6rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 0.45rem;
    transition: border-color 0.15s;
}

.context-display:hover {
    border-color: var(--border-strong);
}

.context-char {
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid var(--border);
    min-width: 1.7em;
    text-align: center;
    padding: 0.28rem 0.3rem;
    border-radius: 0.3rem;
    color: var(--text);
    font-weight: 500;
}

.context-arrow {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin: 0 0.15rem;
}

.context-target {
    background: rgba(52, 211, 153, 0.16);
    border: 1px solid rgba(52, 211, 153, 0.45);
    min-width: 1.7em;
    text-align: center;
    padding: 0.28rem 0.3rem;
    border-radius: 0.3rem;
    color: #6ee7b7;
    font-weight: 600;
}

.pairs-more {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem 0.6rem;
    color: var(--text-muted);
    font-size: 0.8rem;
    border: 1px dashed var(--border-strong);
    border-radius: 0.45rem;
}

/* Tooltip */
.tooltip {
    position: relative;
    display: inline-block;
    cursor: help;
    border-bottom: 1px dotted var(--accent);
}

.tooltip .tooltip-text {
    visibility: hidden;
    width: min(250px, calc(100vw - 2rem));
    background: var(--bg-card);
    color: var(--text);
    text-align: left;
    border-radius: 0.5rem;
    padding: 0.75rem;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
    font-size: 0.85rem;
    line-height: 1.4;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.tooltip:hover .tooltip-text,
.tooltip:focus-visible .tooltip-text,
.tooltip:focus-within .tooltip-text {
    visibility: visible;
    opacity: 1;
}

.tooltip:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Understanding checkpoint */
.checkpoint {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(13, 148, 136, 0.1));
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 2rem 0;
}

.checkpoint h4 {
    color: var(--primary);
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.checkpoint-question {
    color: var(--text);
    font-size: 1rem;
    margin-bottom: 1rem;
}

.checkpoint-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.checkpoint-option {
    background: rgba(0, 0, 0, 0.2);
    border: 2px solid transparent;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    cursor: pointer;
    transition: all 0.2s;
    color: var(--text);
}

.checkpoint-option:hover {
    border-color: rgba(16, 185, 129, 0.5);
    background: rgba(16, 185, 129, 0.1);
}

.checkpoint-option.correct {
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.2);
}

.checkpoint-option.incorrect {
    border-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.checkpoint-feedback {
    margin-top: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    display: none;
}

.checkpoint-feedback.show {
    display: block;
}

.checkpoint-feedback.correct {
    background: rgba(16, 185, 129, 0.2);
    border: 1px solid var(--success);
    color: var(--success);
}

.checkpoint-feedback.incorrect {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid var(--error);
    color: var(--text);
}

/* Final Quiz Styles */
.quiz-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.quiz-question {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.25rem;
    border-left: 3px solid var(--primary);
    transition: all 0.3s;
}

.quiz-question.answered {
    opacity: 0.7;
}

.quiz-question.answered.correct {
    border-left-color: var(--success);
    background: rgba(16, 185, 129, 0.1);
}

.quiz-question.answered.incorrect {
    border-left-color: var(--error);
    background: rgba(239, 68, 68, 0.1);
}

.quiz-q-text {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.quiz-feedback {
    margin-top: 0.75rem;
    padding: 0.75rem;
    border-radius: 0.5rem;
    font-size: 0.9rem;
    display: none;
}

.quiz-feedback.show {
    display: block;
}

.quiz-feedback.correct {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.quiz-feedback.incorrect {
    background: rgba(239, 68, 68, 0.15);
    color: var(--text);
}

.quiz-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.5rem;
}

.quiz-progress-bar {
    flex: 1;
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}

.quiz-progress-fill {
    height: 100%;
    background: var(--gradient-bright);
    border-radius: 4px;
    transition: width 0.3s ease;
    width: 0%;
}

.quiz-progress-text {
    font-size: 0.9rem;
    color: var(--text-muted);
    min-width: 80px;
    text-align: right;
}

.quiz-results {
    text-align: center;
    padding: 2rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.75rem;
    margin-top: 1.5rem;
}

.quiz-score {
    font-size: 3rem;
    font-weight: 700;
    background: var(--gradient-bright);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.quiz-message {
    margin-top: 1rem;
    font-size: 1.1rem;
}

.quiz-message.perfect {
    color: var(--success);
}

.quiz-message.good {
    color: var(--accent);
}

.quiz-message.ok {
    color: var(--warning);
}

.quiz-message.retry {
    color: var(--text-muted);
}

@keyframes correctPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.quiz-question.just-answered.correct {
    animation: correctPulse 0.3s ease;
}

/* ============================================
   SCALE UP: REAL LLM SECTION
   ============================================ */

/* Comparison Table */
.comparison-table-container {
    overflow-x: auto;
    margin: 1rem 0;
}

.scale-comparison-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.scale-comparison-table th,
.scale-comparison-table td {
    padding: 0.75rem 1rem;
    text-align: left;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.scale-comparison-table th {
    background: rgba(16, 185, 129, 0.2);
    font-weight: 600;
    color: var(--text);
}

.scale-comparison-table th:first-child {
    border-radius: 0.5rem 0 0 0;
}

.scale-comparison-table th:last-child {
    border-radius: 0 0.5rem 0 0;
}

.scale-comparison-table td.tiny {
    color: var(--accent);
    font-weight: 500;
}

.scale-comparison-table td.medium {
    color: var(--secondary);
    font-weight: 500;
}

.scale-comparison-table td.large {
    color: var(--success);
    font-weight: 500;
}

.scale-comparison-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.03);
}

/* Model Loader */
.model-loader {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    padding: 1.5rem;
    margin: 1rem 0;
}

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

.loader-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.loader-icon {
    font-size: 2.5rem;
}

.loader-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.loader-details strong {
    font-size: 1.1rem;
    color: var(--text);
}

.loader-details span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

.load-model-btn {
    background: var(--gradient-1);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.load-model-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.load-model-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

/* Loading Progress */
.loader-progress {
    text-align: center;
}

.progress-text {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
}

.progress-bar-container {
    height: 12px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.progress-bar-fill {
    height: 100%;
    background: var(--gradient-bright);
    border-radius: 6px;
    transition: width 0.3s ease;
    width: 0%;
}

.progress-details {
    font-size: 0.85rem;
    color: var(--text-muted);
}

/* Ready State */
.loader-ready {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 1rem;
}

.ready-icon {
    width: 48px;
    height: 48px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: white;
    animation: scaleIn 0.3s ease;
}

.ready-text {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--success);
}

@keyframes scaleIn {
    from { transform: scale(0); }
    to { transform: scale(1); }
}

/* Error State */
.loader-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem;
}

.error-icon {
    font-size: 2rem;
    color: var(--error);
}

.error-text {
    color: var(--error);
    font-weight: 500;
}

.retry-btn {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
    border: 1px solid var(--error);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.retry-btn:hover {
    background: var(--error);
    color: white;
}

/* Side-by-Side Comparison */
.comparison-controls {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.comparison-input-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-width: 150px;
}

.comparison-input-group label {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

/* .text-field: attribute-independent (the HTML minifier strips the
   default type="text" attribute, so [type="text"] selectors match
   NOTHING in production) */
.text-field {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 1rem;
    font-family: var(--font-body);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.text-field:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

.comparison-input-group input[type="range"] {
    flex: 1;
}

.generation-comparison {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: stretch;
}

@media (max-width: 768px) {
    .generation-comparison {
        grid-template-columns: 1fr;
    }

    .comparison-divider {
        transform: rotate(90deg);
    }
}

.comparison-column {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.75rem;
    overflow: hidden;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.05);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.tiny-column .column-header {
    background: rgba(94, 234, 212, 0.1);
    border-bottom-color: rgba(94, 234, 212, 0.2);
}

.real-column .column-header {
    background: rgba(13, 148, 136, 0.1);
    border-bottom-color: rgba(13, 148, 136, 0.2);
}

.column-icon {
    font-size: 1.25rem;
}

.column-title {
    font-weight: 600;
    color: var(--text);
}

.column-params {
    font-size: 0.8rem;
    color: var(--text-muted);
}

/* Training State Badge */
.training-badge {
    font-size: 0.7rem;
    padding: 0.25rem 0.5rem;
    border-radius: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
    border: 1px solid var(--error);
    margin-left: auto;
}

.training-badge.trained {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
    border-color: var(--success);
}

.training-badge.training {
    background: rgba(245, 158, 11, 0.2);
    color: var(--warning);
    border-color: var(--warning);
    animation: badgePulse 1s ease-in-out infinite;
}

@keyframes badgePulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.column-output {
    padding: 1rem;
    min-height: 120px;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.95rem;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

.column-output .placeholder {
    color: var(--text-muted);
    font-style: italic;
}

.column-output .generating-indicator {
    color: var(--secondary);
    font-style: italic;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dot-animation {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: var(--secondary);
    border-radius: 50%;
    animation: dotPulse 1s ease-in-out infinite;
}

@keyframes dotPulse {
    0%, 100% {
        opacity: 0.3;
        transform: scale(0.8);
    }
    50% {
        opacity: 1;
        transform: scale(1.2);
    }
}

.btn-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.column-output .prompt-text {
    color: var(--accent);
    font-weight: 600;
}

.column-output .generated-text {
    color: var(--text);
}

.comparison-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 0.5rem;
}

.comparison-divider span {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    font-size: 1.2rem;
}

/* Tokenization Comparison */
.token-comparison-input {
    margin-bottom: 1.5rem;
}

.token-comparison-input input {
    width: 100%;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 0.5rem;
    color: var(--text);
    font-size: 1rem;
}

.token-comparison-input input:focus {
    outline: none;
    border-color: var(--primary);
}

.token-comparison-display {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.token-comparison-row {
    display: grid;
    grid-template-columns: 120px 1fr 80px;
    gap: 1rem;
    align-items: center;
    padding: 1rem;
    background: rgba(94, 234, 212, 0.1);
    border-radius: 0.75rem;
    border: 1px solid rgba(94, 234, 212, 0.2);
}

.token-comparison-row.real {
    background: rgba(13, 148, 136, 0.1);
    border-color: rgba(13, 148, 136, 0.2);
}

.token-row-label {
    display: flex;
    flex-direction: column;
}

.label-title {
    font-weight: 600;
    color: var(--text);
}

.label-subtitle {
    font-size: 0.8rem;
    color: var(--text-muted);
}

.token-row-tokens {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

.token-row-tokens .bpe-token {
    background: rgba(13, 148, 136, 0.3);
    border: 1px solid rgba(13, 148, 136, 0.5);
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
}

.token-row-tokens .char-token {
    background: rgba(94, 234, 212, 0.3);
    border: 1px solid rgba(94, 234, 212, 0.5);
    padding: 0.25rem 0.4rem;
    border-radius: 0.25rem;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text);
    min-width: 1.5rem;
    text-align: center;
}

.token-row-count {
    text-align: right;
    font-weight: 600;
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Final Summary */
.final-checklist {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin: 1.5rem 0;
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 0.5rem;
    border-left: 3px solid var(--success);
}

.checklist-item .check {
    color: var(--success);
    font-weight: bold;
    font-size: 1.1rem;
}

.checklist-item span:last-child {
    color: var(--text);
}

/* Achievement Unlock Animation */
.achievement-unlock {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.2) 0%, rgba(13, 148, 136, 0.2) 100%);
    border: 1px solid rgba(13, 148, 136, 0.3);
    border-radius: 0.75rem;
    margin-top: 1.5rem;
    animation: achievementSlide 0.5s ease;
}

@keyframes achievementSlide {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.achievement-unlock-icon {
    font-size: 2rem;
}

.achievement-unlock-text {
    display: flex;
    flex-direction: column;
}

.achievement-unlock-text strong {
    color: var(--secondary);
    font-size: 1.1rem;
}

.achievement-unlock-text span {
    color: var(--text-muted);
    font-size: 0.9rem;
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .loader-initial {
        flex-direction: column;
        align-items: stretch;
    }

    .load-model-btn {
        width: 100%;
    }

    .token-comparison-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .token-row-count {
        text-align: center;
    }
}

/* ============================================
   UX POLISH & ENHANCEMENTS
   ============================================ */

/* Not Trained Notice */
.not-trained-notice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 0.5rem;
}

.not-trained-notice .notice-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.not-trained-notice .notice-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.not-trained-notice .notice-text strong {
    color: var(--warning);
    font-size: 0.95rem;
}

.not-trained-notice .notice-text span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.not-trained-notice .notice-text a {
    color: var(--accent);
    text-decoration: underline;
    cursor: pointer;
}

.not-trained-notice .notice-text a:hover {
    color: var(--primary);
}

/* Enhanced Button Hover Effects */
.start-btn,
.train-btn,
.generate-btn,
.load-model-btn {
    position: relative;
    overflow: hidden;
}

.start-btn::before,
.train-btn::before,
.generate-btn::before,
.load-model-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.start-btn:hover::before,
.train-btn:hover::before,
.generate-btn:hover::before,
.load-model-btn:hover::before {
    width: 300px;
    height: 300px;
}

.start-btn:active,
.train-btn:active,
.generate-btn:active,
.load-model-btn:active {
    transform: scale(0.98);
}

/* Card Hover Effects */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
    border-color: rgba(16, 185, 129, 0.3);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3);
}

/* Smooth Input Focus Transitions */
.tokenizer-input,
.generation-input input,
.token-comparison-input input {
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.tokenizer-input:focus,
.generation-input input:focus,
.token-comparison-input input:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}

/* Scroll-to-Top Button */
.scroll-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    background: var(--gradient-1);
    border: none;
    border-radius: 50%;
    color: white;
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    z-index: 999;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.scroll-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.scroll-to-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(16, 185, 129, 0.5);
}

.scroll-to-top:active {
    transform: scale(0.95);
}

/* Navigation Active Section Highlighting */
.nav-links a {
    position: relative;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--accent);
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-links a.active::after,
.nav-links a:hover::after {
    width: 80%;
}

/* Improved Stats Animation */
.stat-value {
    transition: transform 0.2s ease;
}

.stat-card:hover .stat-value {
    transform: scale(1.05);
}

/* Progress Bar Pulse Animation */
.epoch-bar-fill.pulsing {
    animation: progressPulse 1s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

/* Enhanced Quiz Option Transitions */
.checkpoint-option {
    transition: all 0.2s ease;
}

.checkpoint-option:hover:not(.correct):not(.incorrect) {
    transform: translateX(5px);
}

/* Dataset Button Improvements */
.dataset-btn {
    position: relative;
    overflow: hidden;
}

.dataset-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.dataset-btn:hover::after {
    left: 100%;
}

/* Preset Button Improvements */
.preset-btn {
    position: relative;
    overflow: hidden;
}

.preset-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
}

.preset-btn:hover::after {
    left: 100%;
}

/* Experiment Button Pulse on Hover */
.experiment-btn:hover {
    animation: buttonGlow 1s ease-in-out infinite;
}

@keyframes buttonGlow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(94, 234, 212, 0.3);
    }
    50% {
        box-shadow: 0 0 15px rgba(94, 234, 212, 0.5);
    }
}

/* Achievement Card Hover */
.achievement.unlocked:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(245, 158, 11, 0.2);
}

/* Token Hover Effect */
.token {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    cursor: default;
}

.token:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Better Mobile Touch Targets */
@media (max-width: 768px) {
    .nav-links a {
        padding: 0.75rem 1rem;
        font-size: 0.85rem;
    }

    .preset-btn,
    .dataset-btn,
    .speed-btn,
    .experiment-btn {
        min-height: 44px;
        padding: 0.75rem 1rem;
    }

    .checkpoint-option {
        min-height: 44px;
        padding: 1rem;
    }

    .hero {
        padding: 9rem 1.5rem 4rem;
    }

    section {
        padding: 3rem 1.5rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .card {
        padding: 1.5rem;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .training-controls {
        grid-template-columns: 1fr;
    }

    .hero-features {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }

    .scroll-to-top {
        bottom: 1.5rem;
        right: 1.5rem;
        width: 44px;
        height: 44px;
    }
}

/* Small Screen Adjustments */
@media (max-width: 480px) {
    .nav-links {
        display: none;
    }

    .nav-content {
        justify-content: center;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .comparison-panel {
        gap: 1rem;
    }

    .step-container {
        gap: 1rem;
    }

    .achievements-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Improved Tooltip Styling */
.tooltip .tooltip-text {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.tooltip .tooltip-text::before {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -8px;
    border-width: 8px;
    border-style: solid;
    border-color: var(--bg-card) transparent transparent transparent;
}

/* Better Focus Styles for Accessibility */
button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Smooth Section Transitions */
section {
    scroll-margin-top: 120px; /* Account for nav + progress bar */
}

/* Loading Spinner Enhancement */
.btn-spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    vertical-align: middle;
    margin-right: 0.5rem;
}

/* Comparison Column Hover */
.comparison-column {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.comparison-column:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
}

/* Link Styling in Cards */
/* Baseline for EVERY link - nothing on this page shows browser blue.
   Component styles (nav, buttons-as-links, tooltips) override this. */
a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(94, 234, 212, 0.45);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

a:hover {
    text-decoration-color: currentColor;
}

.card a {
    color: var(--accent);
    text-decoration: underline;
    text-decoration-color: rgba(94, 234, 212, 0.45);
    text-underline-offset: 3px;
    transition: text-decoration-color 0.2s ease;
}

.card a:hover {
    text-decoration-color: currentColor;
}

/* Better Error State */
.loader-error {
    animation: errorShake 0.5s ease;
}

@keyframes errorShake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
}

/* ============================================
   CONFETTI CELEBRATION SYSTEM
   ============================================ */

.confetti-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;
    overflow: hidden;
}

.confetti-piece {
    position: absolute;
    width: 10px;
    height: 10px;
    top: -20px;
    animation: confettiFall linear forwards;
}

@keyframes confettiFall {
    0% {
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% {
        transform: translateY(100vh) rotate(720deg);
        opacity: 0;
    }
}

/* ============================================
   LINEAR PATH PROGRESSION SYSTEM
   ============================================ */

/* Hidden sections are completely invisible */
.phase-hidden {
    display: none !important;
}

/* Reveal animation for newly unlocked sections */
.phase-revealing {
    animation: phaseReveal 0.8s ease-out forwards;
}

@keyframes phaseReveal {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Journey Progress Bar */
.journey-progress {
    width: 100%;
    padding: 0.5rem 2rem 0.75rem;
    background: rgba(20, 20, 28, 0.95);
    border-top: 1px solid rgba(16, 185, 129, 0.15);
}

.journey-progress-track {
    height: 4px;
    background: rgba(16, 185, 129, 0.2);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.journey-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    border-radius: 2px;
    transition: width 0.5s ease-out;
}

.journey-progress-steps {
    display: flex;
    justify-content: space-between;
    padding: 0 0.25rem;
}

.journey-step {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.journey-step:not(.locked):hover {
    transform: scale(1.1);
}

.journey-step.locked {
    cursor: default;
    opacity: 0.3;
}

.step-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--bg-card);
    border: 2px solid rgba(16, 185, 129, 0.3);
    color: var(--text-muted);
    transition: all 0.3s ease;
}

.journey-step.completed .step-dot {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.journey-step.current .step-dot {
    background: var(--primary);
    border-color: var(--primary);
    color: white;
    animation: currentPulse 2s ease-in-out infinite;
}

@keyframes currentPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
}

/* Section Progress Container */
.section-progress-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    margin-top: 2rem;
    border-top: 1px solid rgba(16, 185, 129, 0.2);
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Section Complete Badge */
.section-complete-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 2rem;
    color: var(--success);
}

.section-complete-badge.final {
    padding: 1rem 1.5rem;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(13, 148, 136, 0.15));
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: var(--text);
}

.section-complete-badge.final .badge-icon {
    background: transparent;
    width: auto;
    height: auto;
    font-size: 1.5rem;
}

.badge-icon {
    width: 20px;
    height: 20px;
    background: var(--success);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 0.75rem;
    font-weight: bold;
}

.badge-text {
    font-size: 0.9rem;
    font-weight: 500;
}

/* Todo Prompt - What to do next */
.section-todo-prompt {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(245, 158, 11, 0.05));
    border: 1px solid rgba(251, 191, 36, 0.3);
    border-radius: 1rem;
    width: 100%;
}

.todo-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.todo-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.todo-action {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.todo-label {
    font-size: 0.85rem;
    color: var(--text-muted);
}

.todo-action strong {
    font-size: 1.1rem;
    color: #fbbf24;
}

.todo-hint {
    font-size: 0.85rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .section-todo-prompt {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .todo-action {
        align-items: center;
    }
}

.continue-button {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: white;
    border: none;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
}

.continue-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4);
}

.continue-arrow {
    font-size: 1.25rem;
    transition: transform 0.3s ease;
}

.continue-button:hover .continue-arrow {
    transform: translateX(5px);
}

/* Mobile adjustments for progress bar */
@media (max-width: 768px) {
    .journey-progress {
        padding: 0.5rem;
    }

    .step-dot {
        width: 20px;
        height: 20px;
        font-size: 0.6rem;
    }

    .continue-button {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================
   PHASE UNLOCK NOTIFICATION
   ============================================ */

.phase-unlock-notification {
    position: fixed;
    top: 100px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    z-index: 10000;
    opacity: 0;
    transition: all 0.3s ease;
}

.phase-unlock-notification.show {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.phase-unlock-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    /* solid base under the tint - toasts float over arbitrary content
       and must never be see-through */
    background:
        linear-gradient(135deg, rgba(16, 185, 129, 0.2), rgba(94, 234, 212, 0.2)),
        #101613;
    border: 2px solid var(--success);
    padding: 1.1rem 1.5rem;
    border-radius: 1rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
}

.phase-unlock-notification {
    max-width: min(440px, calc(100vw - 32px));
}

.phase-unlock-text {
    min-width: 0;
    overflow-wrap: anywhere;
}

.phase-unlock-icon {
    font-size: 2.5rem;
    animation: unlockBounce 0.5s ease;
}

@keyframes unlockBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

.phase-unlock-text {
    display: flex;
    flex-direction: column;
}

.phase-unlock-text strong {
    color: var(--success);
    font-size: 1.1rem;
}

.phase-unlock-text span {
    color: var(--text);
    font-size: 1.25rem;
    font-weight: 600;
}

/* ============================================
   KEYBOARD SHORTCUTS MODAL
   ============================================ */

.shortcuts-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.shortcuts-content {
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 400px;
    width: 90%;
}

.shortcuts-content h3 {
    color: var(--accent);
    margin-bottom: 1.5rem;
    font-size: 1.3rem;
}

.shortcuts-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.shortcut-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem;
    border-radius: 0.5rem;
    background: rgba(0, 0, 0, 0.2);
}

.shortcut-item kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 0.5rem;
    background: var(--gradient-1);
    border-radius: 0.35rem;
    font-family: var(--font-mono);
    font-size: 0.9rem;
    font-weight: 600;
    color: white;
}

.shortcut-item span {
    color: var(--text);
}

.close-shortcuts {
    margin-top: 1.5rem;
    width: 100%;
    padding: 0.75rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--text);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    transition: all 0.2s;
}

.close-shortcuts:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--accent);
}

/* ============================================
   SOUND TOGGLE BUTTON
   ============================================ */

.sound-toggle {
    position: fixed;
    bottom: 2rem;
    left: 2rem;
    width: 44px;
    height: 44px;
    background: var(--bg-card);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: var(--text);
    font-size: 1.25rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 998;
    transition: all 0.2s;
}

.sound-toggle:hover {
    border-color: var(--accent);
    transform: scale(1.1);
}

.sound-toggle.muted {
    opacity: 0.5;
}

/* ============================================
   OVERFITTING WARNING
   ============================================ */

.overfit-warning {
    display: none;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-top: 1rem;
    animation: warningSlide 0.3s ease;
}

@keyframes warningSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.overfit-warning.warning {
    background: rgba(245, 158, 11, 0.15);
    border: 1px solid rgba(245, 158, 11, 0.4);
}

.overfit-warning.severe {
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.4);
}

.overfit-warning .warning-icon {
    font-size: 1.25rem;
}

.overfit-warning .warning-text {
    font-size: 0.9rem;
    color: var(--text);
}

.overfit-warning.warning .warning-text {
    color: var(--warning);
}

.overfit-warning.severe .warning-text {
    color: var(--error);
}

/* ============================================
   LOSS TREND INDICATOR
   ============================================ */

.loss-trend {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    margin-left: 0.5rem;
    transition: all 0.3s;
}

.loss-trend.improving {
    background: rgba(16, 185, 129, 0.2);
    color: var(--success);
}

.loss-trend.worsening {
    background: rgba(239, 68, 68, 0.2);
    color: var(--error);
}

.loss-trend.stable {
    background: rgba(148, 163, 184, 0.2);
    color: var(--text-muted);
}

/* ============================================
   NAV LOCKED STATES
   ============================================ */

.nav-links a.nav-locked {
    color: rgba(148, 163, 184, 0.4);
    cursor: not-allowed;
    position: relative;
}

.nav-links a.nav-locked::before {
    content: '🔒';
    font-size: 0.7rem;
    margin-right: 0.3rem;
}

.nav-links a.nav-locked:hover {
    color: rgba(148, 163, 184, 0.4);
    background: none;
}

.nav-locked-tooltip {
    position: fixed;
    background: var(--bg-card);
    border: 1px solid var(--error);
    color: var(--error);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.85rem;
    z-index: 10000;
    transform: translate(-50%, -120%);
    animation: tooltipFade 2s ease forwards;
    pointer-events: none;
}

@keyframes tooltipFade {
    0% { opacity: 0; transform: translate(-50%, -100%); }
    20% { opacity: 1; transform: translate(-50%, -120%); }
    80% { opacity: 1; transform: translate(-50%, -120%); }
    100% { opacity: 0; transform: translate(-50%, -140%); }
}

/* ============================================
   PROGRESS INDICATORS
   ============================================ */

.phase-progress {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin: 2rem 0;
}

.phase-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    transition: all 0.3s;
}

.phase-dot.completed {
    background: var(--success);
}

.phase-dot.current {
    background: var(--accent);
    animation: phasePulse 1s ease-in-out infinite;
}

@keyframes phasePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.3); }
}

.phase-dot.locked {
    background: rgba(255, 255, 255, 0.1);
}

/* ============================================
   KEYBOARD HINT
   ============================================ */

.keyboard-hint {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(10px);
    padding: 0.5rem 1rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    color: var(--text-muted);
    z-index: 997;
    opacity: 0.7;
    transition: opacity 0.3s;
}

.keyboard-hint:hover {
    opacity: 1;
}

.keyboard-hint kbd {
    background: var(--primary);
    padding: 0.2rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    color: white;
    margin: 0 0.2rem;
}

/* ============================================
   SHAREABLE RESULTS CARD
   ============================================ */

.results-card {
    background: linear-gradient(135deg, var(--bg-card), rgba(16, 185, 129, 0.1));
    border: 2px solid rgba(16, 185, 129, 0.3);
    border-radius: 1rem;
    padding: 2rem;
    margin: 2rem 0;
    text-align: center;
}

.results-card h3 {
    color: var(--accent);
    margin-bottom: 1.5rem;
}

.results-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.result-stat {
    background: rgba(0, 0, 0, 0.3);
    padding: 1rem;
    border-radius: 0.75rem;
}

.result-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    background: var(--gradient-bright);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.result-stat-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.share-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.share-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text);
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.9rem;
}

.share-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--accent);
    transform: translateY(-2px);
}

.share-btn.twitter { color: #1DA1F2; }
.share-btn.copy { color: var(--accent); }

/* ============================================
   TRAINING SPEED DISPLAY
   ============================================ */

.training-speed {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3rem 0.75rem;
    background: rgba(94, 234, 212, 0.1);
    border: 1px solid rgba(94, 234, 212, 0.3);
    border-radius: 2rem;
    font-size: 0.8rem;
    color: var(--accent);
    font-family: var(--font-mono);
}

/* ============================================
   RESET PROGRESS BUTTON
   ============================================ */

.reset-progress-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: transparent;
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: var(--text-muted);
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 0.8rem;
    transition: all 0.2s;
}

.reset-progress-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    border-color: var(--error);
    color: var(--error);
}

/* ============================================
   PWA INSTALL PROMPT
   ============================================ */

.pwa-install-prompt {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: flex;
    justify-content: center;
    padding: 1rem;
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.pwa-install-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--bg-card);
    border: 1px solid rgba(16, 185, 129, 0.3);
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.3);
    max-width: 500px;
    width: 100%;
}

.pwa-install-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.pwa-install-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.pwa-install-text strong {
    color: var(--text);
    font-size: 1rem;
}

.pwa-install-text span {
    color: var(--text-muted);
    font-size: 0.85rem;
}

.pwa-install-btn {
    background: var(--gradient-1);
    color: white;
    border: none;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.pwa-install-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

.pwa-install-close {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
    transition: color 0.2s;
}

.pwa-install-close:hover {
    color: var(--text);
}

/* ============================================
   ENHANCED MOBILE RESPONSIVENESS
   ============================================ */

/* Safe area insets for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }

    nav {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .scroll-to-top {
        right: max(2rem, calc(2rem + env(safe-area-inset-right)));
        bottom: max(2rem, calc(2rem + env(safe-area-inset-bottom)));
    }

    .sound-toggle {
        left: max(2rem, calc(2rem + env(safe-area-inset-left)));
        bottom: max(2rem, calc(2rem + env(safe-area-inset-bottom)));
    }

    footer {
        padding-bottom: max(3rem, calc(3rem + env(safe-area-inset-bottom)));
    }
}

/* Prevent text size adjustment on orientation change */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Improved touch targets for mobile */
@media (max-width: 768px) {
    /* Larger touch targets */
    button,
    .preset-btn,
    .dataset-btn,
    .speed-btn,
    .experiment-btn,
    .checkpoint-option {
        min-height: 48px;
    }

    /* Full-width buttons on mobile */
    .train-btn {
        width: 100%;
        padding: 1.25rem;
        font-size: 1.1rem;
    }

    .reset-btn {
        width: 100%;
    }

    .training-buttons {
        flex-direction: column;
    }

    /* Better spacing for mobile */
    .card {
        padding: 1.25rem;
        margin-bottom: 1.5rem;
    }

    section {
        padding: 3rem 1rem;
    }

    /* Improve input visibility */
    .tokenizer-input,
    .generation-input input,
    .text-field,
    .token-comparison-input input {
        font-size: 16px; /* Prevents zoom on iOS */
    }

    /* Simplify hero on mobile */
    .hero {
        min-height: auto;
        padding: 8.5rem 1rem 3rem;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    /* Stack generation controls */
    .generation-input {
        flex-direction: column;
    }

    .generation-input input,
    .generate-btn {
        width: 100%;
    }

    /* Better stats grid on mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .stat-card {
        padding: 0.75rem;
    }

    .stat-value {
        font-size: 1.25rem;
    }

    /* Improved comparison panel */
    .generation-comparison {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }

    .comparison-divider {
        display: none;
    }

    /* Hide keyboard hint on mobile */
    .keyboard-hint {
        display: none;
    }

    /* Better token display */
    .token-display {
        gap: 0.35rem;
    }

    .token {
        padding: 0.4rem 0.5rem;
    }

    /* PWA prompt on mobile */
    .pwa-install-content {
        flex-wrap: wrap;
    }

    .pwa-install-btn {
        order: 3;
        flex: 1 1 100%;
        margin-top: 0.5rem;
    }

    .pwa-install-close {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
    }

    .pwa-install-prompt .pwa-install-content {
        position: relative;
    }

    /* Better charts on mobile */
    .chart-container {
        padding: 1rem;
    }

    .chart-canvas {
        height: 150px;
    }

    /* Improved matrix on mobile */
    .matrix-cell {
        flex-basis: 35px;
        min-width: 35px;
        height: 24px;
        font-size: 0.65rem;
    }

    /* Better embedding viz */
    .embedding-canvas {
        height: 200px;
    }

    /* Scrollable presets */
    .preset-buttons,
    .dataset-presets {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 0.5rem;
        -webkit-overflow-scrolling: touch;
    }

    .preset-btn,
    .dataset-btn {
        flex-shrink: 0;
    }
}

/* Small phones */
@media (max-width: 380px) {
    .hero h1 {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.5rem;
    }

    .stat-value {
        font-size: 1rem;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .nav-content .logo {
        font-size: 1.1rem;
    }
}

/* Landscape mobile */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: 8rem 1rem 2rem;
    }

    .hero-features {
        flex-direction: row;
        flex-wrap: wrap;
    }

    nav {
        position: relative;
    }

    section {
        scroll-margin-top: 20px;
    }
}

/* Tablet improvements */
@media (min-width: 769px) and (max-width: 1024px) {
    .generation-comparison {
        gap: 0.75rem;
    }

    .comparison-divider {
        padding: 0;
    }

    section {
        padding: 4rem 1.5rem;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .chart-canvas,
    .embedding-canvas,
    .architecture-canvas {
        image-rendering: -webkit-optimize-contrast;
    }
}

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

    .confetti-container {
        display: none;
    }

    html {
        scroll-behavior: auto;
    }
}

/* Dark mode adjustments (system preference) */
@media (prefers-color-scheme: light) {
    /* Could add light mode support here in the future */
}

/* Print styles */
@media print {
    nav,
    .scroll-to-top,
    .sound-toggle,
    .keyboard-hint,
    .pwa-install-prompt,
    .train-btn,
    .reset-btn,
    .generate-btn {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ccc;
    }
}

/* Focus visible for accessibility */
*:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

/* Touch action for better mobile scrolling */
.chart-container,
.matrix-container,
.training-data {
    touch-action: pan-x pan-y;
}

/* Prevent pull-to-refresh on PWA */
body.pwa-mode {
    overscroll-behavior-y: contain;
}

/* References section */
.reference-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.reference-list li {
    color: var(--text-muted);
    padding-left: 1rem;
    border-left: 2px solid rgba(16, 185, 129, 0.35);
    line-height: 1.55;
}

.reference-list a {
    color: var(--accent);
    text-decoration: none;
}

.reference-list a:hover {
    text-decoration: underline;
}

.table-footnote {
    margin-top: 0.75rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.table-footnote a {
    color: var(--accent);
    text-decoration: none;
}

.table-footnote a:hover {
    text-decoration: underline;
}

/* Footer reset-progress control */
.footer-reset {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}

.footer-reset:hover {
    color: var(--text);
}


/* Inner boxes and card prose fill the card's content width; only the
   centered section descriptions keep a narrower symmetric measure. */
.section-desc {
    max-width: 640px;
}

.section-header .section-desc {
    margin-left: auto;
    margin-right: auto;
}

/* Scroll-driven reveal (compositor-thread, no JS) where supported;
   the IntersectionObserver path remains the fallback. Only active under
   html.js, which is never added when prefers-reduced-motion. */
@supports (animation-timeline: view()) {
    html.js .fade-in {
        opacity: 1;
        transform: none;
        transition: none;
        animation: fade-rise linear both;
        animation-timeline: view();
        animation-range: entry 0% entry 35%;
    }

    @keyframes fade-rise {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: none;
        }
    }
}

/* Live temperature visualization */
.temp-viz {
    margin-top: 1.25rem;
    padding: 1.25rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
}

.temp-viz h4 {
    font-size: 1rem;
    margin-bottom: 0.4rem;
}

.temp-viz-desc {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
}

.temp-viz-note {
    color: var(--warning);
    font-size: 0.82rem;
    margin-bottom: 0.75rem;
}

/* "Show the math" expanders */
.math-details {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    background: rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

.math-details summary {
    cursor: pointer;
    padding: 0.7rem 1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--primary-soft);
    list-style: none;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s ease;
}

.math-details summary:hover {
    background: rgba(16, 185, 129, 0.07);
}

/* explicit affordance: expanders must LOOK expandable */
.math-details summary::after {
    content: "expand +";
    margin-left: auto;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.15rem 0.6rem;
    white-space: nowrap;
}

.math-details[open] summary::after {
    content: "collapse \2212";
}

.math-details summary:hover::after {
    color: var(--primary-light);
    border-color: rgba(16, 185, 129, 0.45);
}

.math-details summary::before {
    content: '\25B8';
    display: inline-block;
    transition: transform 0.2s;
}

.math-details[open] summary::before {
    transform: rotate(90deg);
}

.math-details summary::-webkit-details-marker {
    display: none;
}

.math-details-body {
    padding: 0 1rem 1rem;
}

.math-details-body p {
    color: var(--text-muted);
    font-size: 0.88rem;
    margin: 0.6rem 0;
}

.math-details-body pre {
    font-family: var(--font-mono);
    font-size: 1.08rem;
    line-height: 1.9;
    color: var(--text);
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(16, 185, 129, 0.5);
    border-radius: 0.5rem;
    padding: 1.1rem 1.4rem;
    overflow-x: auto;
}

.math-details-body pre sub,
.math-details-body pre sup {
    font-size: 0.72em;
}

@media (max-width: 600px) {
    .math-details-body pre {
        font-size: 0.95rem;
        padding: 0.9rem 1rem;
    }
}

.math-details-body a {
    color: var(--accent);
}

/* Model tier upgrade (WebGPU only) */
.model-upgrade {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.6rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    cursor: pointer;
}

.model-upgrade input {
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.model-upgrade strong {
    color: var(--text);
}

/* On small screens, hover tooltips become a viewport-centered sheet so
   their absolute boxes can never stretch the mobile layout viewport. */
@media (max-width: 600px) {
    .tooltip .tooltip-text {
        position: fixed;
        left: 1rem;
        right: 1rem;
        width: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
        box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6);
    }

    .tooltip .tooltip-text::before {
        display: none;
    }
}

/* No-JS notice */
.noscript-note {
    background: var(--warning);
    color: #1a1305;
    padding: 0.75rem 1.25rem;
    text-align: center;
    font-size: 0.9rem;
    font-weight: 500;
}


/* Active selection states: secondary text must stay readable on the
   dark emerald/teal fills */
.preset-btn.active .preset-desc,
.dataset-btn.active .dataset-desc {
    color: rgba(255, 255, 255, 0.92);
}


/* Slim, theme-matched scrollbars for interior scroll containers
   (standard properties are Baseline since 2025; webkit fallback for
   older engines - the standard props win where both exist) */
.matrix-container,
.comparison-table-container,
.math-details-body pre,
.token-display {
    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

.matrix-container::-webkit-scrollbar,
.comparison-table-container::-webkit-scrollbar,
.math-details-body pre::-webkit-scrollbar,
.token-display::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

.matrix-container::-webkit-scrollbar-thumb,
.comparison-table-container::-webkit-scrollbar-thumb,
.math-details-body pre::-webkit-scrollbar-thumb,
.token-display::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.35);
    border-radius: 4px;
}

.matrix-container::-webkit-scrollbar-track,
.comparison-table-container::-webkit-scrollbar-track,
.math-details-body pre::-webkit-scrollbar-track,
.token-display::-webkit-scrollbar-track {
    background: transparent;
}

/* Inline context echoes in panel captions */
.context-echo {
    font-family: var(--font-mono);
    color: #6ee7b7;
    font-weight: 600;
}

/* "Think about it" question variant of the expander */
.math-details.think summary {
    color: var(--warning);
}

.math-details.think summary::before {
    content: '\1F914';
    margin-right: 0.5rem;
    transform: none !important;
    font-size: 0.95em;
}

.math-details.think {
    border-color: rgba(245, 158, 11, 0.25);
}

/* Locked Continue buttons + unlock guidance */
.btn-locked {
    opacity: 0.65;
}

.btn-locked::after {
    content: ' \1F512';
    font-size: 0.85em;
}

.unlock-hint {
    margin-top: 0.6rem;
    font-size: 0.88rem;
    color: var(--warning);
    opacity: 0;
}

.unlock-hint.show {
    animation: hint-in 0.35s ease-out forwards;
}

@keyframes hint-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.unlock-pulse {
    animation: unlock-pulse 0.85s ease-in-out 3;
    border-radius: 0.75rem;
}

@keyframes unlock-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0); }
    50% { box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.55); }
}

@media (prefers-reduced-motion: reduce) {
    .unlock-hint.show { animation: none; opacity: 1; }
    .unlock-pulse { animation: none; outline: 2px solid var(--warning); outline-offset: 3px; }
}

/* Glossary */
.glossary-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
    gap: 1rem;
}

.glossary-entry {
    padding: 0.9rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
}

.glossary-entry dt {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--primary-soft);
    margin-bottom: 0.35rem;
}

.glossary-entry dd {
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.55;
}

.glossary-entry dd a {
    color: var(--accent);
    text-decoration: none;
    white-space: nowrap;
}

.glossary-entry dd a:hover {
    text-decoration: underline;
}

/* WCAG 1.4.1: links inside prose must not rely on color alone.
   Subtle persistent underline; full-strength on hover. */
p a,
dd a,
li a,
td a,
.analogy a,
.math-details-body a,
.table-footnote a,
.reference-list a,
.glossary-entry dd a {
    text-decoration: underline;
    text-decoration-color: rgba(94, 234, 212, 0.45);
    text-underline-offset: 3px;
}

p a:hover,
dd a:hover,
li a:hover,
td a:hover {
    text-decoration-color: currentColor;
}

/* Share button + feedback */
.share-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    margin-top: 1.25rem;
}

.share-btn {
    background: #047857;
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
    padding: 0.7rem 1.6rem;
    font-size: 0.95rem;
    font-weight: 600;
    font-family: var(--font-body);
    border-radius: 0.55rem;
    cursor: pointer;
    transition: background 0.2s;
}

.share-btn:hover {
    background: #059669;
}

.share-feedback {
    color: var(--success-soft);
    font-size: 0.9rem;
    font-weight: 500;
}


/* Range sliders: one styled treatment everywhere (the comparison
   temperature slider was a raw browser default, and Firefox never had
   styled thumbs at all) */
input[type="range"] {
    appearance: none;
    -webkit-appearance: none;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
    cursor: pointer;
}

input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #0b0d0c;
    cursor: pointer;
}

input[type="range"]::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid #0b0d0c;
    cursor: pointer;
}

input[type="range"]::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.1);
}

input[type="range"]:focus-visible {
    outline: 2px solid var(--primary-soft);
    outline-offset: 3px;
}

/* Model picker cards */
.model-picker {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-bottom: 1rem;
}

.model-option {
    display: block;
    cursor: pointer;
}

.model-option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.model-option-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.8rem 0.95rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
    transition: border-color 0.15s, background 0.15s;
}

.model-option strong {
    font-family: var(--font-display);
    font-size: 0.98rem;
    color: var(--text);
}

.model-option-tag {
    align-self: flex-start;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--primary-soft);
    background: rgba(16, 185, 129, 0.12);
    padding: 0.12rem 0.5rem;
    border-radius: 1rem;
}

.model-option-meta {
    font-size: 0.78rem;
    color: var(--text-muted);
}

.model-option input:checked + .model-option-body {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.08);
}

.model-option input:focus-visible + .model-option-body {
    outline: 2px solid var(--primary-soft);
    outline-offset: 2px;
}

.model-option.disabled {
    cursor: not-allowed;
    opacity: 0.55;
}


/* Side-by-side controls: aligned action row + label polish */
.comparison-controls-row {
    display: flex;
    gap: 1.25rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.comparison-prompt-group,
.comparison-temp-group {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.comparison-prompt-group {
    width: 100%;
}

.comparison-temp-group {
    flex: 1;
    min-width: 220px;
}

.comparison-controls label {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.temp-value-chip {
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0;
    color: var(--primary-soft);
    background: rgba(16, 185, 129, 0.12);
    padding: 0.05rem 0.5rem;
    border-radius: 1rem;
    margin-left: 0.4rem;
}

.comparison-controls .generate-btn {
    margin-left: auto;
}

@media (max-width: 600px) {
    .comparison-controls-row {
        flex-direction: column;
        align-items: stretch;
    }

    .comparison-controls .generate-btn {
        margin-left: 0;
        width: 100%;
    }
}

/* Model output is machine-generated and can contain arbitrarily long
   unbroken character runs - allow breaking anywhere or they overflow
   narrow tracks (caught by the geometry sweep on mobile). */
.comparison-text,
.generated-output,
.column-output,
.experiment-result,
.token-row-tokens {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Generation cap note */
.gen-cap-note {
    display: block;
    margin-top: 0.6rem;
    font-size: 0.72rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Inline AI-term glossary */
.ai-term {
    border-bottom: 1px dashed rgba(94, 234, 212, 0.55);
    cursor: help;
    border-radius: 1px;
}

.ai-term:hover,
.ai-term:focus-visible {
    border-bottom-color: var(--accent);
    background: rgba(94, 234, 212, 0.07);
}

/* Keyboard focus needs a real outline, not just a color shift. */
.ai-term:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}

.term-tooltip {
    position: absolute;
    z-index: 1200;
    max-width: min(340px, calc(100vw - 2rem));
    background: var(--bg-card);
    border: 1px solid var(--border-strong);
    border-radius: 0.6rem;
    padding: 0.85rem 1rem;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55);
}

.term-tooltip::after {
    content: '';
    position: absolute;
    left: var(--arrow-left, 50%);
    bottom: -7px;
    margin-left: -7px;
    border-width: 7px 7px 0;
    border-style: solid;
    border-color: var(--border-strong) transparent transparent;
}

.term-tooltip--below::after {
    bottom: auto;
    top: -7px;
    border-width: 0 7px 7px;
    border-color: transparent transparent var(--border-strong);
}

.term-tooltip__label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--primary-soft);
    margin-bottom: 0.25rem;
}

.term-tooltip__term {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.term-tooltip__def {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.term-tooltip__see {
    display: inline-block;
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--accent);
    text-decoration: none;
}

.term-tooltip__see:hover {
    text-decoration: underline;
}

/* Streaming cursor */
.stream-cursor {
    display: inline-block;
    width: 8px;
    height: 1em;
    margin-left: 2px;
    vertical-align: text-bottom;
    background: var(--primary-soft);
    animation: cursor-blink 0.8s steps(1) infinite;
}

@keyframes cursor-blink {
    50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .stream-cursor { animation: none; }
}

/* Extra credit */
.extra-credit {
    margin-top: 2rem;
    padding: 1.5rem;
    border: 1px dashed var(--border-strong);
    border-radius: 0.75rem;
}

.extra-credit h4 {
    color: var(--primary-soft);
    margin-bottom: 0.5rem;
}

.extra-credit-intro p {
    color: var(--text-muted);
    margin-bottom: 1rem;
}

.xq-progress {
    font-family: var(--font-mono);
    font-size: 0.85rem;
    color: var(--text-muted);
    margin-bottom: 0.9rem;
}

.xq-feedback {
    margin: 0.9rem 0;
    font-size: 0.92rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.xq-feedback.correct { color: var(--success-soft); }
.xq-feedback.incorrect { color: #fca5a5; }

.xq-feedback .xq-why {
    display: block;
    margin-top: 0.35rem;
    color: var(--text-muted);
}

/* Single-step training button */
.step-btn {
    border-color: var(--primary);
    color: var(--primary-light);
}

/* Math-term -> architecture-diagram bridge links */
.arch-link-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.arch-link {
    font-family: inherit;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    color: var(--primary-light);
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.arch-link:hover,
.arch-link:focus-visible {
    background: rgba(16, 185, 129, 0.18);
    border-color: var(--primary);
}

/* "changes as you train" badge on live-value cards */
.live-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    vertical-align: middle;
    margin-left: 0.4rem;
    padding: 0.15rem 0.6rem;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--primary-light);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    white-space: nowrap;
}

.live-badge::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary);
}

body[data-training="1"] .live-badge {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.18);
}

body[data-training="1"] .live-badge::before {
    animation: liveBadgePulse 1s ease-in-out infinite;
}

@keyframes liveBadgePulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.6); opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
    .live-badge::before { animation: none !important; }
}

.live-note .live-badge {
    margin-left: 0;
}

/* External reference links read differently from glossary terms:
   links = solid underline + arrow-out marker; glossary terms keep the
   dashed underline + help cursor. */
.card a[target="_blank"]::after,
.math-details-body a[target="_blank"]::after,
.reference-list a::after {
    content: "\2197";
    font-size: 0.72em;
    margin-left: 0.18em;
    opacity: 0.65;
    display: inline-block;
}

.card a {
    text-decoration-style: solid;
    text-decoration-color: rgba(94, 234, 212, 0.8);
}

/* Calculator walkthroughs inside math expanders */
.calc-steps {
    margin: 0.9rem 0 0.3rem;
    padding: 0.9rem 1rem;
    background: rgba(16, 185, 129, 0.05);
    border: 1px solid rgba(16, 185, 129, 0.25);
    border-left: 3px solid var(--primary);
    border-radius: 0.5rem;
}

.calc-steps h5 {
    margin: 0 0 0.5rem;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--primary-light);
}

.calc-steps p {
    font-size: 0.86rem;
}

.calc-steps ol {
    margin: 0.5rem 0 0.5rem 1.2rem;
    padding: 0;
    color: var(--text-muted);
    font-size: 0.86rem;
    line-height: 1.7;
}

.calc-steps li {
    margin: 0.3rem 0;
}

.calc-steps .calc-check {
    color: var(--primary-soft);
    font-size: 0.84rem;
    margin-bottom: 0;
}

.math-legend {
    font-size: 0.82rem;
    color: var(--text-muted);
    font-style: italic;
}

/* Diploma */
.diploma-controls {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 1rem 0 0.5rem;
}

.diploma-controls .text-field {
    flex: 1 1 260px;
}

.diploma-hint {
    color: var(--primary-soft);
    font-size: 0.9rem;
    min-height: 1.2em;
    margin: 0.5rem 0;
}

.diploma-preview {
    margin-top: 1rem;
}

#diplomaCanvas {
    width: 100%;
    height: auto;
    border-radius: 0.6rem;
    border: 1px solid var(--border);
    display: block;
}

.diploma-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 0.75rem;
}

/* Lab rank chip in the achievements header */
.lab-rank {
    margin-left: auto;
    margin-right: 0.75rem;
    padding: 0.2rem 0.7rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--primary-light);
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.35);
    border-radius: 999px;
    white-space: nowrap;
}

.stat-value.stat-warn {
    color: var(--warning);
}

/* Post-training inventions showcase */
.model-inventions {
    margin-top: 1rem;
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 2;
}

.invention-chip {
    display: inline-block;
    padding: 0.15rem 0.65rem;
    margin: 0 0.15rem;
    background: rgba(16, 185, 129, 0.12);
    border: 1px solid rgba(16, 185, 129, 0.4);
    border-radius: 999px;
    color: var(--primary-light);
    font-family: var(--font-mono);
    font-size: 0.85rem;
}

/* Calibration subline under the accuracy stat */
.stat-sub {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 0.2rem;
    font-family: var(--font-mono);
}

/* Unknown-character explainer under the tokenizer playground */
.unknown-note {
    margin-top: 0.75rem;
    padding: 0.6rem 0.9rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    background: rgba(239, 68, 68, 0.07);
    border-left: 3px solid var(--error);
    border-radius: 0.4rem;
}

.phase-unlock-notification {
    cursor: pointer;
}

/* Native MathML display formulas - the official look */
math.formula {
    /* "block math" keeps the MathML layout engine in charge; a plain
       "block" makes children flow like HTML and shatters the formula */
    display: block math;
    margin: 1.1rem auto;
    padding: 1.1rem 1.4rem;
    font-size: 1.35rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-left: 3px solid rgba(16, 185, 129, 0.5);
    border-radius: 0.5rem;
    color: var(--text);
    overflow-x: auto;
}

@media (max-width: 600px) {
    math.formula {
        font-size: 1.1rem;
        padding: 0.9rem 0.8rem;
    }
}

/* Badge toasts: bottom-right so they never collide with phase-unlock
   toasts (top-center), clickable through to the badge collection */
.badge-toast {
    top: auto;
    bottom: 24px;
    left: auto;
    right: 24px;
    transform: translateY(80px);
    cursor: pointer;
}

.badge-toast.show {
    transform: translateY(0);
}

#achievements {
    scroll-margin-top: 120px;
}

/* Train/validation split control - the slider sits right under the
   bar it drives; the bar labels are the value display */
.split-control {
    margin: 0.4rem 0 1rem;
}

.split-control input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    border-radius: 999px;
    background: linear-gradient(90deg, #10b981 0%, #34d399 78%, #d0a94a 90%, #f59e0b 100%);
    outline: none;
    cursor: pointer;
}

.split-control input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #f7f9fc;
    border: 3px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    cursor: grab;
}

.split-control input[type="range"]::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #f7f9fc;
    border: 3px solid var(--primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    cursor: grab;
}

.split-control input[type="range"]:focus-visible {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.35);
}

.split-control-caption {
    margin-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.85;
}

.dataset-size-indicator.custom {
    background: linear-gradient(135deg, #5eead4, #10b981);
}

/* Drag-and-drop affordance for corpus/model files */
.dataset-btn.drag-over,
.tokenizer-input.drag-over {
    border: 2px dashed var(--primary) !important;
    background: rgba(16, 185, 129, 0.1);
}

/* Bottom-right toasts carry sentences, not phase names - smaller type */
.badge-toast .phase-unlock-content {
    padding: 0.9rem 1.2rem;
    gap: 0.75rem;
}

.badge-toast .phase-unlock-icon {
    font-size: 1.6rem;
}

.badge-toast .phase-unlock-text strong {
    font-size: 0.95rem;
}

.badge-toast .phase-unlock-text span {
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.45;
}