/* ===== Design Tokens ===== */
        :root {
            --primary-50:#eff6ff; --primary-100:#dbeafe; --primary-200:#bfdbfe;
            --primary-300:#93c5fd; --primary-400:#60a5fa; --primary-500:#3b82f6;
            --primary-600:#2563eb; --primary-700:#1d4ed8; --primary-800:#1e40af;
            --primary-900:#1e3a8a;
            --accent-50:#f0f9ff; --accent-100:#e0f2fe; --accent-200:#bae6fd;
            --accent-300:#7dd3fc; --accent-400:#38bdf8; --accent-500:#0ea5e9;
            --accent-600:#0284c7; --accent-700:#0369a1;
            --success-50:#f0fdf4; --success-500:#22c55e; --success-600:#16a34a;
            --warning-50:#fffbeb; --warning-500:#f59e0b; --warning-600:#d97706;
            --error-50:#fef2f2; --error-500:#ef4444; --error-600:#dc2626;
            --neutral-50:#f8fafc; --neutral-100:#f1f5f9; --neutral-200:#e2e8f0;
            --neutral-300:#cbd5e1; --neutral-400:#94a3b8; --neutral-500:#64748b;
            --neutral-600:#475569; --neutral-700:#334155; --neutral-800:#1e293b;
            --neutral-900:#0f172a;
            --space-xs:.25rem; --space-sm:.5rem; --space-md:1rem; --space-lg:1.5rem;
            --space-xl:2rem; --space-2xl:2.5rem; --space-3xl:3rem; --space-4xl:4rem;
            --radius-sm:.375rem; --radius-md:.5rem; --radius-lg:.75rem;
            --radius-xl:1rem; --radius-2xl:1.5rem;
            --shadow-sm:0 1px 2px 0 rgb(0 0 0/.05);
            --shadow-md:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1);
            --shadow-lg:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
            --shadow-xl:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1);
            --gradient-primary:linear-gradient(135deg,var(--primary-500) 0%,var(--accent-500) 100%);
            --gradient-glow:linear-gradient(135deg,rgba(59,130,246,.12) 0%,rgba(14,165,233,.12) 100%);
        }

        *{box-sizing:border-box;margin:0;padding:0}
        html{scroll-behavior:smooth}
        body{
            font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
            line-height:1.6;color:var(--neutral-800);
            background:linear-gradient(135deg,var(--primary-50) 0%,var(--accent-50) 50%,var(--neutral-50) 100%);
            min-height:100vh;overflow-x:hidden;
        }
        body::before,body::after{content:'';position:fixed;pointer-events:none;z-index:-1;border-radius:50%}
        body::before{top:-10%;right:-10%;width:30vw;height:30vw;background:radial-gradient(circle,rgba(59,130,246,.08) 0%,transparent 70%);animation:float 20s ease-in-out infinite}
        body::after{bottom:-15%;left:-15%;width:40vw;height:40vw;background:radial-gradient(circle,rgba(14,165,233,.06) 0%,transparent 70%);animation:float 25s ease-in-out infinite reverse}
        @keyframes float{0%,100%{transform:translate(0,0)}33%{transform:translate(-20px,-20px)}66%{transform:translate(20px,-10px)}}
        @keyframes slideInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
        @keyframes fadeIn{from{opacity:0}to{opacity:1}}

        /* ===== Navigation ===== */
        .top-nav{
            position:sticky;top:0;z-index:100;
            background:rgba(255,255,255,.85);backdrop-filter:blur(16px);
            border-bottom:1px solid var(--neutral-200);
            box-shadow:var(--shadow-sm);
        }
        .top-nav .nav-inner{
            max-width:960px;margin:0 auto;padding:.6rem 1.5rem;
            display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
        }
        .top-nav .nav-brand{
            font-weight:700;font-size:1rem;
            background:var(--gradient-primary);-webkit-background-clip:text;
            -webkit-text-fill-color:transparent;background-clip:text;
            white-space:nowrap;
        }
        .top-nav a{
            font-size:.82rem;font-weight:500;color:var(--neutral-600);
            text-decoration:none;padding:.3rem .55rem;border-radius:var(--radius-md);
            transition:all .25s;white-space:nowrap;
        }
        .top-nav a:hover{color:var(--primary-600);background:var(--primary-50)}

        /* ===== Layout ===== */
        .container{max-width:920px;margin:0 auto;padding:var(--space-xl)}

        /* ===== Typography ===== */
        h1{
            font-size:2.4rem;font-weight:800;text-align:center;
            background:var(--gradient-primary);-webkit-background-clip:text;
            -webkit-text-fill-color:transparent;background-clip:text;
            margin-bottom:var(--space-xl);animation:slideInUp 1s ease-out;
            position:relative;
        }
        h1::after{content:'';position:absolute;bottom:-10px;left:50%;transform:translateX(-50%);width:100px;height:4px;background:var(--gradient-primary);border-radius:var(--radius-sm)}
        h2{font-size:1.5rem;font-weight:700;color:var(--primary-700);margin-bottom:var(--space-lg);padding-left:var(--space-lg);position:relative}
        h2::before{content:'';position:absolute;left:0;top:4px;width:5px;height:calc(100% - 8px);background:var(--gradient-primary);border-radius:3px}
        h3{font-size:1.2rem;font-weight:600;color:var(--primary-600);margin-top:var(--space-xl);margin-bottom:var(--space-md)}
        p{margin-bottom:var(--space-md);line-height:1.75}
        ul,ol{margin-bottom:var(--space-md);padding-left:var(--space-xl)}
        li{margin-bottom:var(--space-sm);line-height:1.65}
        strong{font-weight:600;color:var(--neutral-800)}

        /* ===== Cards ===== */
        .card{
            background:linear-gradient(135deg,var(--neutral-50) 0%,#fff 100%);
            border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);
            padding:var(--space-2xl);margin:var(--space-2xl) 0;
            border:1px solid rgba(255,255,255,.2);
            backdrop-filter:blur(10px);position:relative;overflow:hidden;
            transition:all .4s cubic-bezier(.25,.8,.25,1);
        }
        .card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}

        /* ===== Reusable blocks ===== */
        .formula{
            background:var(--gradient-glow);border:1px solid var(--primary-200);
            border-radius:var(--radius-lg);padding:var(--space-lg);margin:var(--space-lg) 0;
            font-size:1.1rem;font-weight:500;text-align:center;box-shadow:var(--shadow-md);
        }
        .explanation{
            font-style:italic;color:var(--neutral-600);font-size:.875rem;
            margin-top:var(--space-md);padding:var(--space-md);
            background:var(--neutral-100);border-radius:var(--radius-md);
            border-left:4px solid var(--primary-400);
        }
        .example{
            background:linear-gradient(135deg,var(--warning-50) 0%,#fffef7 100%);
            border:1px solid var(--warning-500);border-radius:var(--radius-lg);
            padding:var(--space-lg);margin:var(--space-lg) 0;box-shadow:var(--shadow-sm);
        }
        .example>p:first-child{font-weight:600;color:var(--warning-600);margin-bottom:var(--space-md)}
        .learning-outcomes{
            background:linear-gradient(135deg,var(--primary-50) 0%,var(--accent-50) 100%);
            border:2px solid var(--primary-200);border-radius:var(--radius-xl);
            padding:var(--space-xl);margin-bottom:var(--space-xl);box-shadow:var(--shadow-md);
        }
        .learning-outcomes h4{margin:0 0 var(--space-md);color:var(--primary-700);font-weight:600;font-size:1.05rem}
        .learning-outcomes li{color:var(--neutral-700);margin-bottom:var(--space-md)}

        /* ===== Simulation Containers ===== */
        .sim-wrapper{
            margin:var(--space-xl) 0;border-radius:var(--radius-xl);
            overflow:hidden;border:1px solid var(--neutral-200);
            box-shadow:var(--shadow-lg);background:#fff;
        }
        .sim-header{
            background:var(--gradient-primary);color:#fff;
            padding:var(--space-md) var(--space-lg);
        }
        .sim-header h4{font-size:1.05rem;font-weight:600;margin:0}
        .sim-header p{font-size:.82rem;opacity:.9;margin:4px 0 0}
        .sim-body{position:relative;background:#0d1b2a}
        .sim-body canvas{display:block;width:100%;cursor:default}
        .sim-controls{
            display:flex;flex-wrap:wrap;gap:var(--space-md) var(--space-lg);
            padding:var(--space-md) var(--space-lg);background:var(--neutral-50);
            border-top:1px solid var(--neutral-200);align-items:center;
        }
        .sim-control-group{display:flex;flex-direction:column;gap:3px;min-width:140px;flex:1}
        .sim-control-group label{font-size:.78rem;font-weight:600;color:var(--neutral-600);text-transform:uppercase;letter-spacing:.5px}
        .sim-control-group input[type=range]{width:100%;accent-color:var(--primary-500)}
        .sim-readout{
            display:inline-flex;align-items:center;gap:6px;
            padding:4px 10px;background:var(--primary-50);
            border:1px solid var(--primary-200);border-radius:var(--radius-md);
            font-size:.82rem;font-weight:600;color:var(--primary-700);
            font-variant-numeric:tabular-nums;min-width:60px;justify-content:center;
        }
        .sim-btn{
            background:var(--gradient-primary);color:#fff;border:none;
            padding:8px 18px;border-radius:var(--radius-lg);font-size:.85rem;
            font-weight:600;cursor:pointer;transition:all .25s;margin:0;
            box-shadow:var(--shadow-sm);
        }
        .sim-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
        .sim-btn.secondary{background:var(--neutral-200);color:var(--neutral-700);box-shadow:none}
        .sim-btn.secondary:hover{background:var(--neutral-300)}

        /* ===== Quiz ===== */
        .quiz-container{
            background:var(--gradient-glow);border:1px solid var(--primary-200);
            border-radius:var(--radius-xl);padding:var(--space-xl);
        }
        .quiz-question{
            margin-bottom:var(--space-xl);padding:var(--space-lg);
            background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);
            transition:all .3s;
        }
        .quiz-question:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
        .quiz-question p{font-weight:500;margin-bottom:var(--space-md);color:var(--neutral-800)}
        .quiz-question label{display:block;padding:var(--space-sm) var(--space-sm) var(--space-sm) var(--space-xl);cursor:pointer;border-radius:var(--radius-md);transition:background .2s;position:relative;margin-bottom:4px}
        .quiz-question label:hover{background:var(--primary-50)}
        .quiz-question input[type=radio]{position:absolute;left:8px;top:50%;transform:translateY(-50%);accent-color:var(--primary-500);width:16px;height:16px}
        button.quiz-btn{
            background:var(--gradient-primary);color:#fff;border:none;
            padding:var(--space-md) var(--space-xl);border-radius:var(--radius-lg);
            font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s;
            box-shadow:var(--shadow-md);position:relative;overflow:hidden;
        }
        button.quiz-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg)}
        .result{
            background:var(--success-50);border:2px solid var(--success-500);
            color:var(--success-600);padding:var(--space-lg);border-radius:var(--radius-lg);
            margin-top:var(--space-lg);font-weight:500;box-shadow:var(--shadow-sm);
        }
        .result.error{background:var(--error-50);border-color:var(--error-500);color:var(--error-600)}

        /* ===== Scroll reveal ===== */
        .reveal{opacity:0;transform:translateY(24px);transition:all .7s cubic-bezier(.25,.8,.25,1)}
        .reveal.active{opacity:1;transform:translateY(0)}

        /* ===== Footer ===== */
        .footer{text-align:center;padding:var(--space-2xl) var(--space-md);color:var(--neutral-400);font-size:.82rem}

        /* ===== Responsive ===== */
        @media(max-width:800px){
            .container{padding:var(--space-lg)}
            h1{font-size:1.8rem}
            h2{font-size:1.25rem}
            .card{padding:var(--space-lg);margin:var(--space-lg) 0}
            .sim-controls{padding:var(--space-sm) var(--space-md)}
            .sim-control-group{min-width:110px}
        }
        @media(max-width:500px){
            .container{padding:var(--space-md)}
            h1{font-size:1.5rem}
            .top-nav .nav-inner{gap:.5rem}
            .top-nav a{font-size:.72rem;padding:.25rem .4rem}
        }