/* ========== DESIGN TOKENS ========== */
        :root {
            --bg: #f0f4f8;
            --bg-card: #ffffff;
            --bg-card-alt: #f8fafc;
            --text: #1e293b;
            --text-muted: #64748b;
            --text-light: #94a3b8;
            --border: #e2e8f0;
            --border-light: #f1f5f9;
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --primary-light: #dbeafe;
            --primary-glow: rgba(59,130,246,.15);
            --emerald: #10b981;
            --emerald-dark: #059669;
            --emerald-light: #d1fae5;
            --purple: #8b5cf6;
            --purple-dark: #7c3aed;
            --purple-light: #ede9fe;
            --orange: #f97316;
            --orange-dark: #ea580c;
            --orange-light: #ffedd5;
            --pink: #ec4899;
            --pink-dark: #db2777;
            --pink-light: #fce7f3;
            --indigo: #6366f1;
            --indigo-dark: #4f46e5;
            --red: #ef4444;
            --amber: #f59e0b;
            --success: #10b981;
            --warning: #f59e0b;
            --error: #ef4444;
            --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
            --shadow-md: 0 4px 12px rgba(0,0,0,.08);
            --shadow-lg: 0 12px 32px rgba(0,0,0,.1);
            --shadow-xl: 0 20px 48px rgba(0,0,0,.12);
            --radius: .75rem;
            --radius-lg: 1rem;
            --radius-xl: 1.25rem;
            --transition: .25s ease;
            --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        .dark {
            --bg: #0f172a;
            --bg-card: #1e293b;
            --bg-card-alt: #1a2332;
            --text: #f1f5f9;
            --text-muted: #94a3b8;
            --text-light: #64748b;
            --border: #334155;
            --border-light: #1e293b;
            --primary-light: rgba(59,130,246,.15);
            --primary-glow: rgba(59,130,246,.08);
            --emerald-light: rgba(16,185,129,.12);
            --purple-light: rgba(139,92,246,.12);
            --orange-light: rgba(249,115,22,.12);
            --pink-light: rgba(236,72,153,.12);
            --shadow-sm: 0 1px 3px rgba(0,0,0,.2);
            --shadow-md: 0 4px 12px rgba(0,0,0,.3);
            --shadow-lg: 0 12px 32px rgba(0,0,0,.4);
            --shadow-xl: 0 20px 48px rgba(0,0,0,.5);
        }
        .dark .sim-canvas { background: #0f172a; }
        .dark .example { background: #2d2006; border-color: #92400e; }
        .dark .example p { color: #fde68a; }
        .dark .learning-outcomes { background: var(--primary-light); border-color: var(--border); }
        .dark .quiz-question { background: var(--bg-card-alt); }
        .dark input[type="number"], .dark select { background: var(--bg-card-alt); color: var(--text); border-color: var(--border); }
        .dark .working-out { background: var(--bg-card-alt); }

        /* ========== RESET & BASE ========== */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; scroll-padding-top: 80px; }
        body {
            font-family: var(--font);
            background: var(--bg);
            color: var(--text);
            line-height: 1.7;
            transition: background var(--transition), color var(--transition);
        }

        /* ========== TOP NAVIGATION ========== */
        .top-nav {
            position: sticky; top: 64px; z-index: 10;
            background: rgba(255,255,255,.85);
            backdrop-filter: blur(16px) saturate(180%);
            -webkit-backdrop-filter: blur(16px) saturate(180%);
            border-bottom: 1px solid var(--border);
            transition: background var(--transition), border var(--transition);
        }
        .dark .top-nav { background: rgba(15,23,42,.85); }
        .nav-inner {
            max-width: 1200px; margin: 0 auto;
            display: flex; align-items: center; justify-content: space-between;
            padding: .65rem 1.5rem; gap: 1rem; flex-wrap: wrap;
        }
        .nav-brand { font-weight: 700; font-size: 1.05rem; color: var(--primary); white-space: nowrap; }
        .nav-links { display: flex; gap: .25rem; flex-wrap: wrap; align-items: center; }
        .nav-links a {
            text-decoration: none; font-size: .8rem; font-weight: 500;
            color: var(--text-muted); padding: .35rem .7rem; border-radius: .5rem;
            transition: all var(--transition); white-space: nowrap;
        }
        .nav-links a:hover, .nav-links a.active { color: var(--primary); background: var(--primary-light); }
        .dark-toggle {
            background: none; border: 2px solid var(--border); border-radius: .5rem;
            padding: .35rem .6rem; cursor: pointer; font-size: 1rem;
            color: var(--text); transition: all var(--transition);
        }
        .dark-toggle:hover { border-color: var(--primary); background: var(--primary-light); transform: none; box-shadow: none; }

        /* ========== CONTAINER ========== */
        .container { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }

        /* ========== HERO ========== */
        .hero {
            text-align: center; padding: 3.5rem 2rem 3rem;
            background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #6366f1 100%);
            border-radius: var(--radius-xl); margin-bottom: 2rem;
            color: #fff; position: relative; overflow: hidden;
        }
        .hero::before {
            content: ''; position: absolute; inset: 0;
            background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
        }
        .hero h1 { font-size: 2.5rem; font-weight: 800; margin-bottom: .5rem; position: relative; letter-spacing: -.02em; }
        .hero p { font-size: 1.1rem; opacity: .9; position: relative; max-width: 600px; margin: 0 auto; }

        /* ========== CARDS ========== */
        .card {
            background: var(--bg-card); border-radius: var(--radius-xl);
            box-shadow: var(--shadow-md); padding: 2rem;
            margin-bottom: 2rem; border: 1px solid var(--border);
            transition: all var(--transition); position: relative; overflow: hidden;
        }
        .card:hover { box-shadow: var(--shadow-lg); }
        .card-accent { position: absolute; top: 0; left: 0; right: 0; height: 4px; }
        .accent-blue    { background: linear-gradient(90deg, #3b82f6, #6366f1); }
        .accent-emerald { background: linear-gradient(90deg, #10b981, #34d399); }
        .accent-purple  { background: linear-gradient(90deg, #8b5cf6, #a78bfa); }
        .accent-orange  { background: linear-gradient(90deg, #f97316, #fb923c); }
        .accent-pink    { background: linear-gradient(90deg, #ec4899, #f472b6); }
        .accent-indigo  { background: linear-gradient(90deg, #6366f1, #818cf8); }

        /* ========== SECTION HEADER ========== */
        .section-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; }
        .section-icon {
            width: 44px; height: 44px; border-radius: .75rem;
            display: flex; align-items: center; justify-content: center;
            font-size: 1.25rem; flex-shrink: 0;
        }
        .icon-blue    { background: var(--primary-light); }
        .icon-emerald { background: var(--emerald-light); }
        .icon-purple  { background: var(--purple-light); }
        .icon-orange  { background: var(--orange-light); }
        .icon-pink    { background: var(--pink-light); }
        .icon-indigo  { background: #eef2ff; }
        .dark .icon-indigo { background: rgba(99,102,241,.12); }
        .section-header h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; }

        /* ========== LEARNING OUTCOMES ========== */
        .learning-outcomes {
            background: var(--primary-light); border: 1px solid var(--border);
            border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem;
        }
        .learning-outcomes h4 {
            font-size: .85rem; font-weight: 600; color: var(--primary);
            text-transform: uppercase; letter-spacing: .04em; margin-bottom: .75rem;
        }
        .learning-outcomes ul { padding-left: 1.25rem; }
        .learning-outcomes li { font-size: .92rem; color: var(--text-muted); margin-bottom: .4rem; }
        .learning-outcomes li::marker { color: var(--primary); }

        /* ========== FORMULA BOXES ========== */
        .formula-box {
            color: #fff; padding: 1.5rem; border-radius: var(--radius);
            text-align: center; margin: 1.5rem 0; position: relative; overflow: hidden;
        }
        .formula-box.blue    { background: linear-gradient(135deg, #2563eb, #3b82f6); }
        .formula-box.emerald { background: linear-gradient(135deg, #059669, #10b981); }
        .formula-box.purple  { background: linear-gradient(135deg, #7c3aed, #8b5cf6); }
        .formula-box.orange  { background: linear-gradient(135deg, #ea580c, #f97316); }
        .formula-box.pink    { background: linear-gradient(135deg, #db2777, #ec4899); }
        .formula-box.indigo  { background: linear-gradient(135deg, #4f46e5, #6366f1); }
        .formula-box p { color: #fff; font-weight: 500; margin-bottom: .35rem; }
        .formula-box .formula-main { font-size: 1.2rem; font-weight: 700; margin-bottom: .5rem; }
        .formula-box .formula-units { font-size: .88rem; opacity: .9; }
        .formula-box .formula-note { font-size: .82rem; opacity: .8; font-style: italic; }

        /* ========== SVG DIAGRAMS ========== */
        .diagram-container {
            display: flex; justify-content: center; margin: 1.5rem 0;
            padding: 1.5rem; background: var(--bg-card-alt); border-radius: var(--radius);
            border: 1px solid var(--border);
        }
        .diagram-container svg { max-width: 100%; height: auto; }

        /* ========== EXAMPLES ========== */
        .example {
            background: #fffbeb; border-left: 4px solid var(--amber);
            border-radius: 0 var(--radius) var(--radius) 0;
            padding: 1.25rem 1.5rem; margin: 1.5rem 0;
        }
        .example p { color: #78350f; margin-bottom: .3rem; }
        .example p:last-child { margin-bottom: 0; }

        /* ========== INTERACTIVE / CALCULATOR ========== */
        .interactive-section {
            margin: 1.5rem 0; padding: 1.5rem;
            background: var(--bg-card-alt); border-radius: var(--radius);
            border: 1px solid var(--border);
        }
        .interactive-section h3 {
            font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem;
            display: flex; align-items: center; gap: .5rem;
        }
        .calc-grid {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 1rem; margin-bottom: 1rem;
        }
        .form-group { display: flex; flex-direction: column; }
        .form-group label {
            font-size: .82rem; font-weight: 600; color: var(--text-muted);
            margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .03em;
        }
        .form-group label:hover { background: none; }
        input[type="number"], select {
            padding: .65rem .85rem; border: 2px solid var(--border);
            border-radius: var(--radius); font-size: .95rem;
            font-family: var(--font); transition: all var(--transition);
            background: var(--bg-card); color: var(--text);
        }
        input[type="number"]:focus, select:focus {
            outline: none; border-color: var(--primary);
            box-shadow: 0 0 0 3px var(--primary-glow);
        }
        button {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: #fff; border: none; padding: .7rem 1.5rem;
            border-radius: var(--radius); font-size: .92rem; font-weight: 600;
            cursor: pointer; transition: all var(--transition);
            font-family: var(--font); box-shadow: var(--shadow-sm);
        }
        button:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); filter: brightness(1.05); }
        button:active { transform: translateY(0); }
        button.secondary {
            background: var(--bg-card); color: var(--text); border: 2px solid var(--border); box-shadow: none;
        }
        button.secondary:hover { border-color: var(--primary); color: var(--primary); background: var(--primary-light); }
        button.emerald-btn { background: linear-gradient(135deg, var(--emerald), var(--emerald-dark)); }
        button.orange-btn  { background: linear-gradient(135deg, var(--orange), var(--orange-dark)); }
        button.purple-btn  { background: linear-gradient(135deg, var(--purple), var(--purple-dark)); }
        button.pink-btn    { background: linear-gradient(135deg, var(--pink), var(--pink-dark)); }

        /* ========== RESULTS ========== */
        .result {
            margin-top: 1rem; padding: 1rem 1.25rem;
            background: var(--primary-light); border-radius: var(--radius);
            border-left: 4px solid var(--primary); font-weight: 600;
            color: var(--text); display: none;
        }
        .result.show { display: block; animation: slideUp .3s ease; }
        @keyframes slideUp {
            from { opacity: 0; transform: translateY(8px); }
            to   { opacity: 1; transform: translateY(0); }
        }
        .working-out {
            background: var(--bg-card-alt); padding: 1rem 1.25rem;
            border-radius: var(--radius); margin-top: .75rem;
            border-left: 4px solid var(--emerald); font-family: 'Courier New', monospace;
            font-size: .88rem;
        }
        .working-out h4 { color: var(--emerald); margin-bottom: .5rem; font-family: var(--font); font-size: .85rem; }
        .working-step { margin-bottom: .3rem; color: var(--text-muted); }

        /* ========== SIMULATION CANVASES ========== */
        .sim-wrapper {
            margin: 1.5rem 0; padding: 1.5rem;
            background: var(--bg-card-alt); border-radius: var(--radius);
            border: 2px solid var(--border);
        }
        .sim-wrapper h3 {
            font-size: 1.1rem; font-weight: 600; margin-bottom: 1rem;
            display: flex; align-items: center; gap: .5rem;
        }
        .sim-canvas-wrap {
            position: relative; border-radius: var(--radius); overflow: hidden;
            margin-bottom: 1rem; border: 1px solid var(--border);
        }
        .sim-canvas { display: block; width: 100%; background: #f8fafc; }
        .sim-controls { display: flex; flex-wrap: wrap; gap: 1rem; align-items: end; }
        .sim-control-group { display: flex; flex-direction: column; min-width: 160px; }
        .sim-control-group label {
            font-size: .78rem; font-weight: 600; color: var(--text-muted);
            margin-bottom: .3rem; text-transform: uppercase; letter-spacing: .03em;
        }
        .sim-control-group label:hover { background: none; }
        input[type="range"] { width: 100%; accent-color: var(--primary); cursor: pointer; height: 6px; }
        .sim-readout { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .75rem; }
        .readout-badge {
            display: inline-flex; align-items: center; gap: .4rem;
            padding: .35rem .75rem; border-radius: 2rem;
            font-size: .82rem; font-weight: 600;
        }
        .badge-blue    { background: var(--primary-light); color: var(--primary-dark); }
        .badge-emerald { background: var(--emerald-light); color: var(--emerald-dark); }
        .badge-purple  { background: var(--purple-light); color: var(--purple-dark); }
        .badge-orange  { background: var(--orange-light); color: var(--orange-dark); }
        .badge-pink    { background: var(--pink-light); color: var(--pink-dark); }

        /* ========== ENERGY BAR ========== */
        .energy-bars { margin-top: 1rem; }
        .energy-bar-row { display: flex; align-items: center; gap: .75rem; margin-bottom: .5rem; }
        .energy-bar-label { font-size: .8rem; font-weight: 600; width: 70px; text-align: right; color: var(--text-muted); }
        .energy-bar-track {
            flex: 1; height: 22px; background: var(--border-light); border-radius: 11px;
            overflow: hidden; border: 1px solid var(--border);
        }
        .energy-bar-fill {
            height: 100%; border-radius: 11px; transition: width .08s linear;
            display: flex; align-items: center; justify-content: flex-end;
            padding-right: 8px; font-size: .7rem; font-weight: 700; color: #fff;
            min-width: 0;
        }
        .bar-gpe  { background: linear-gradient(90deg, #3b82f6, #6366f1); }
        .bar-ke   { background: linear-gradient(90deg, #f97316, #f59e0b); }
        .bar-total { background: linear-gradient(90deg, #10b981, #34d399); }

        /* ========== QUIZ ========== */
        .quiz-container {
            padding: 1.5rem; background: var(--bg-card-alt);
            border-radius: var(--radius); border: 1px solid var(--border);
        }
        .quiz-question {
            background: var(--bg-card); padding: 1.25rem;
            border-radius: var(--radius); margin-bottom: 1rem;
            border: 1px solid var(--border); transition: all var(--transition);
        }
        .quiz-question:hover { box-shadow: var(--shadow-sm); }
        .quiz-question p { font-weight: 600; margin-bottom: .75rem; }
        .quiz-option {
            display: flex; align-items: center; gap: .5rem;
            padding: .5rem .75rem; border-radius: var(--radius);
            cursor: pointer; transition: background var(--transition);
            margin-bottom: .25rem;
        }
        .quiz-option:hover { background: var(--primary-light); }
        input[type="radio"] {
            appearance: none; width: 18px; height: 18px; flex-shrink: 0;
            border: 2px solid var(--border); border-radius: 50%;
            cursor: pointer; transition: all var(--transition); position: relative;
        }
        input[type="radio"]:checked { border-color: var(--primary); background: var(--primary); }
        input[type="radio"]:checked::after {
            content: ''; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 6px; height: 6px; background: #fff; border-radius: 50%;
        }

        /* ========== FOOTER ========== */
        .footer { text-align: center; padding: 2rem 1.5rem; color: var(--text-light); font-size: .85rem; }

        /* ========== RESPONSIVE ========== */
        @media (max-width: 768px) {
            .nav-links { display: none; }
            .hero h1 { font-size: 1.8rem; }
            .hero { padding: 2.5rem 1.5rem; }
            .card { padding: 1.5rem; }
            .calc-grid { grid-template-columns: 1fr; }
            .sim-controls { flex-direction: column; }
        }
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: .01ms !important;
                transition-duration: .01ms !important;
            }
        }