:root{--bg-deep:#09090f;--bg-surface:rgba(22, 22, 32, 0.72);--bg-surface-2:rgba(30, 30, 44, 0.9);--accent:#b534ff;--accent-2:#00e5ff;--accent-glow:rgba(181, 52, 255, 0.5);--html:#e34c26;--css:#2965f1;--js:#f7df1e;--react:#61dafb;--ok:#10b981;--warn:#f59e0b;--danger:#ef4444;--text-main:#f4f4f5;--text-secondary:#d4d4d8;--text-muted:#9ca3af;--border:rgba(255, 255, 255, 0.08);--border-hover:rgba(255, 255, 255, 0.18);--mono:'Fira Code','JetBrains Mono','Consolas',monospace;--ease:cubic-bezier(0.4, 0, 0.2, 1)}*{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;scroll-padding-top:90px}body{background:var(--bg-deep);color:var(--text-main);font-family:Outfit,'Segoe UI',sans-serif;line-height:1.75;letter-spacing:.1px;min-height:100vh;overflow-x:hidden}.bg-fx{position:fixed;inset:0;z-index:-1;background:radial-gradient(circle at 12% 18%,rgba(181,52,255,.09),transparent 42%),radial-gradient(circle at 88% 82%,rgba(0,229,255,.07),transparent 42%),var(--bg-deep)}.bg-fx::after{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.02) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.02) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(circle at 50% 40%,#000,transparent 80%)}.reading-progress-container{position:fixed;top:0;left:0;width:100%;height:4px;z-index:1000;background:0 0}.reading-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:0 0 12px var(--accent-glow);transition:width .1s linear}.lesson-nav{position:sticky;top:0;z-index:200;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 32px;background:rgba(9,9,15,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}.nav-left{display:flex;align-items:center;gap:20px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.1rem;color:#fff;text-decoration:none}.brand .brand-badge{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;font-size:1rem;color:#fff;background:linear-gradient(135deg,var(--accent),#7d12ff);box-shadow:0 4px 14px var(--accent-glow)}.back-link{display:flex;align-items:center;gap:8px;color:var(--text-muted);text-decoration:none;font-size:.9rem;font-weight:600;padding:8px 14px;border-radius:9px;background:rgba(255,255,255,.03);border:1px solid var(--border);transition:all .25s var(--ease)}.back-link:hover{color:#fff;background:rgba(255,255,255,.08);transform:translateX(-3px)}.nav-pill{display:flex;align-items:center;gap:8px;font-size:.85rem;font-weight:700;letter-spacing:.5px;color:var(--accent-2);padding:8px 15px;border-radius:30px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.25)}.lesson-wrap{max-width:1240px;margin:0 auto;padding:40px 28px 120px;display:grid;grid-template-columns:262px 1fr;gap:44px;align-items:start}.course-hero{grid-column:1/-1;text-align:center;padding:30px 20px 10px}.course-hero .kicker{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--accent-2);padding:6px 16px;border-radius:30px;background:rgba(0,229,255,.08);border:1px solid rgba(0,229,255,.2);margin-bottom:18px}.course-hero h1{font-size:clamp(2.1rem, 5vw, 3.2rem);font-weight:900;line-height:1.1;letter-spacing:-1px;background:linear-gradient(120deg,#fff 30%,var(--accent) 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.course-hero p{max-width:620px;margin:16px auto 0;color:var(--text-muted);font-size:1.1rem}.course-meta{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}.course-meta span{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;color:var(--text-secondary);padding:8px 16px;border-radius:10px;background:var(--bg-surface);border:1px solid var(--border)}.course-meta span i{color:var(--accent)}.lesson-toc{position:sticky;top:84px;max-height:calc(100vh - 108px);overflow-y:auto;padding:22px 18px;background:var(--bg-surface);border:1px solid var(--border);border-radius:18px;backdrop-filter:blur(12px);scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.14) transparent}.lesson-toc::-webkit-scrollbar{width:5px}.lesson-toc::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:10px}.toc-title{font-size:.72rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);margin-bottom:14px;padding-left:6px}.toc-progress{height:6px;border-radius:6px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:20px}.toc-progress i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent-2));transition:width .4s var(--ease)}.toc-link{display:flex;align-items:center;gap:10px;padding:9px 12px;margin-bottom:3px;border-radius:10px;color:var(--text-muted);text-decoration:none;font-size:.9rem;font-weight:500;border-left:3px solid transparent;transition:all .2s var(--ease)}.toc-link .toc-num{flex:0 0 22px;height:22px;display:grid;place-items:center;font-size:.72rem;font-weight:800;border-radius:6px;background:rgba(255,255,255,.06);color:var(--text-muted);transition:all .2s var(--ease)}.toc-link:hover{color:#fff;background:rgba(255,255,255,.04)}.toc-link.active{color:#fff;background:rgba(181,52,255,.12);border-left-color:var(--accent)}.toc-link.active .toc-num{background:var(--accent);color:#fff}main.lesson-main{min-width:0}.lesson-section{background:var(--bg-surface);border:1px solid var(--border);border-radius:22px;padding:46px 48px;margin-bottom:40px;backdrop-filter:blur(10px);box-shadow:0 12px 34px rgba(0,0,0,.45);opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease),transform .6s var(--ease),border-color .3s}.lesson-section.visible{opacity:1;transform:translateY(0)}.lesson-section:hover{border-color:var(--border-hover)}.module-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.74rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--accent);padding:5px 13px;border-radius:30px;background:rgba(181,52,255,.1);border:1px solid rgba(181,52,255,.25);margin-bottom:16px}.lesson-title{font-size:clamp(1.6rem, 3.4vw, 2.3rem);font-weight:800;line-height:1.15;letter-spacing:-.5px;background:linear-gradient(135deg,#fff 45%,#a1a1aa 120%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}.lead{font-size:1.12rem;color:var(--text-secondary);margin:14px 0 8px}.lesson-section p{margin:14px 0;color:var(--text-secondary)}.lesson-section h3{position:relative;font-size:1.35rem;font-weight:700;color:#fff;margin:34px 0 12px;padding-left:16px}.lesson-section h3::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:4px;border-radius:4px;background:linear-gradient(var(--accent),var(--accent-2))}.lesson-section h4{font-size:1.08rem;color:#fff;margin:24px 0 10px}.lesson-section ol,.lesson-section ul{margin:14px 0 14px 4px;padding-left:24px;color:var(--text-secondary)}.lesson-section li{margin:8px 0}.lesson-section b,.lesson-section strong{color:#fff;font-weight:700}.lesson-section a{color:var(--accent-2);text-decoration:none;border-bottom:1px dotted rgba(0,229,255,.4)}.lesson-section a:hover{border-bottom-style:solid}code{font-family:var(--mono);font-size:.86em;background:rgba(181,52,255,.12);color:#e9c9ff;padding:2px 7px;border-radius:6px;border:1px solid rgba(181,52,255,.2)}.callout{display:flex;gap:14px;margin:24px 0;padding:18px 20px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-left:4px solid var(--accent)}.callout i.callout-ico{font-size:1.15rem;color:var(--accent);margin-top:3px;flex:0 0 auto}.callout p{margin:0;color:var(--text-secondary)}.callout .callout-h{display:block;font-weight:700;color:#fff;margin-bottom:4px}.callout.tip{border-left-color:var(--ok)}.callout.tip i.callout-ico{color:var(--ok)}.callout.warn{border-left-color:var(--warn)}.callout.warn i.callout-ico{color:var(--warn)}.callout.info{border-left-color:var(--accent-2)}.callout.info i.callout-ico{color:var(--accent-2)}.code-block{position:relative;margin:22px 0;border-radius:12px;overflow:hidden;border:1px solid var(--border);background:#0d0d16;box-shadow:0 14px 32px -18px rgba(0,0,0,.9)}.code-block .code-bar{display:flex;align-items:center;gap:8px;padding:9px 14px;background:rgba(255,255,255,.03);border-bottom:1px solid var(--border);font-size:.75rem;color:var(--text-muted);font-weight:600}.code-block .code-bar .dot{width:11px;height:11px;border-radius:50%}.code-block .code-bar .dot.r{background:#ff5f56}.code-block .code-bar .dot.y{background:#ffbd2e}.code-block .code-bar .dot.g{background:#27c93f}.code-block .code-bar .fname{margin-left:8px}.code-block pre{margin:0;padding:18px 20px;font-family:var(--mono);font-size:.9rem;line-height:1.7;color:#e6e6f0;overflow-x:auto;tab-size:2}.code-block pre code{background:0 0;border:none;padding:0;color:inherit;font-size:inherit}.tok-tag{color:#ff7b9c}.tok-attr{color:#d2a8ff}.tok-str{color:#a5d6ff}.tok-kw{color:#ff7b72}.tok-fn{color:#82aaff}.tok-num{color:#f78c6c}.tok-com{color:#6b7280;font-style:italic}.tok-punct{color:#8b949e}.tok-prop{color:#7ee787}.tok-val{color:#a5d6ff}.tok-sel{color:#ffa657}.try-it{display:inline-flex;align-items:center;gap:9px;margin-top:14px;padding:11px 22px;border-radius:30px;font-weight:700;font-size:.9rem;text-decoration:none;color:#061014;background:var(--accent-2);box-shadow:0 6px 18px rgba(0,229,255,.3);transition:all .25s var(--ease)}.try-it:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,229,255,.45)}.sim{--sim-accent:var(--accent);--sim-soft:rgba(181, 52, 255, 0.15);margin:30px 0;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:linear-gradient(180deg,rgba(20,20,32,.85),rgba(9,9,15,.92));overflow:hidden;box-shadow:0 22px 50px -26px rgba(0,0,0,.95)}.sim-cyan{--sim-accent:var(--accent-2);--sim-soft:rgba(0, 229, 255, 0.15)}.sim-emerald{--sim-accent:var(--ok);--sim-soft:rgba(16, 185, 129, 0.15)}.sim-warn{--sim-accent:var(--warn);--sim-soft:rgba(245, 158, 11, 0.15)}.sim-js{--sim-accent:#f7df1e;--sim-soft:rgba(247, 223, 30, 0.15)}.sim-head{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:13px 18px;background:rgba(255,255,255,.02);border-bottom:1px solid rgba(255,255,255,.06)}.sim-kicker{display:block;font-size:.62rem;font-weight:800;letter-spacing:1.6px;text-transform:uppercase;color:var(--sim-accent);margin-bottom:3px}.sim-title{font-size:.98rem;font-weight:700;color:#fff;margin:0;line-height:1.3}.sim-ctrl{display:flex;align-items:center;gap:6px;flex:0 0 auto}.sim-btn{height:34px;min-width:34px;padding:0 9px;border-radius:9px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-size:.8rem;font-weight:600;font-family:inherit;transition:all .2s var(--ease)}.sim-btn:hover:not(:disabled){background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.2)}.sim-btn:disabled{opacity:.3;cursor:not-allowed}.sim-btn-play{background:var(--sim-accent);color:#08060f;border-color:transparent;padding:0 14px}.sim-btn-play:hover:not(:disabled){filter:brightness(1.12)}.sim-progress{height:2px;background:rgba(255,255,255,.06);position:relative;overflow:hidden}.sim-progress i{position:absolute;inset:0 auto 0 0;width:0%;background:var(--sim-accent);box-shadow:0 0 8px var(--sim-accent);transition:width .4s var(--ease)}.sim-stage{position:relative;padding:30px 24px;min-height:260px;display:flex;align-items:center;justify-content:center;background-image:linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);background-size:26px 26px}.sim-script{list-style:none;margin:0;padding:6px 0;border-top:1px solid rgba(255,255,255,.06);background:rgba(0,0,0,.35);counter-reset:simstep;max-height:190px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,0.12) transparent}.sim-script::-webkit-scrollbar{width:4px}.sim-script::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:10px}.sim-script li{counter-increment:simstep;display:block;position:relative;padding:10px 18px 10px 51px;font-size:.9rem;line-height:1.6;color:var(--text-muted);border-left:3px solid transparent;opacity:.42;transition:opacity .35s var(--ease),background .35s,color .35s,border-color .35s;cursor:pointer}.sim-script li::before{content:counter(simstep);position:absolute;left:15px;top:11px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:.7rem;font-weight:800;color:var(--text-muted);background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);transition:all .3s var(--ease)}.sim-script li.is-done{opacity:.72}.sim-script li.is-done::before{content:'\2713';background:var(--sim-soft);border-color:var(--sim-accent);color:var(--sim-accent)}.sim-script li.is-active{opacity:1;color:var(--text-main);background:rgba(255,255,255,.04);border-left-color:var(--sim-accent)}.sim-script li.is-active::before{background:var(--sim-accent);border-color:var(--sim-accent);color:#08060f;box-shadow:0 0 12px var(--sim-accent)}.sim-script li b{color:#fff;font-weight:700}.sim-script li code{font-size:.82em}.browser{width:100%;max-width:460px;background:#14141f;border:1px solid rgba(255,255,255,.1);border-radius:10px;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}.browser-bar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#22222e;border-bottom:1px solid rgba(255,255,255,.06)}.browser-bar .dot{width:10px;height:10px;border-radius:50%}.browser-bar .dot.r{background:#ff5f56}.browser-bar .dot.y{background:#ffbd2e}.browser-bar .dot.g{background:#27c93f}.browser-bar .url{flex:1;margin-left:8px;font-size:.72rem;color:#9ca3af;background:#14141f;border-radius:20px;padding:4px 12px;font-family:var(--mono)}.browser-view{min-height:150px;padding:20px;background:#fff;color:#1a1a1a;display:flex;flex-direction:column;gap:8px}.pop{opacity:0;transform:translateY(12px) scale(.96);transition:all .5s var(--ease)}.pop.is-on{opacity:1;transform:translateY(0) scale(1)}.fade{opacity:0;transition:opacity .5s var(--ease)}.fade.is-on{opacity:1}.grow{transition:all .6s var(--ease)}.s-node{padding:12px 16px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:var(--text-secondary);font-weight:600;text-align:center;font-size:.9rem;transition:all .4s var(--ease)}.s-node.is-on{border-color:var(--sim-accent);background:var(--sim-soft);color:#fff;box-shadow:0 0 22px -4px var(--sim-accent)}.s-term{width:100%;max-width:440px;background:#0a0a12;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:14px 16px;font-family:var(--mono);font-size:.82rem;line-height:1.7;color:#cbd5e1;text-align:left;overflow-x:auto}.s-term .c{color:var(--accent-2)}.s-term .g{color:#7ee787}.s-term .y{color:#f7df1e}.s-term .r{color:#ff7b72}.s-term .m{color:#6b7280}.s-code{width:100%;max-width:460px;background:#0d0d18;border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:16px 18px;font-family:var(--mono);font-size:.86rem;line-height:1.8;color:#e6e6f0;text-align:left;overflow-x:auto}.s-code .ln{display:block;border-radius:5px;padding:0 6px;transition:background .35s var(--ease)}.s-code .ln.is-on{background:rgba(181,52,255,.22);box-shadow:inset 2px 0 0 var(--sim-accent)}.back-to-top{position:fixed;right:26px;bottom:26px;z-index:300;width:48px;height:48px;border-radius:50%;border:1px solid var(--border-hover);background:rgba(181,52,255,.16);color:#fff;backdrop-filter:blur(10px);cursor:pointer;font-size:1rem;display:grid;place-items:center;opacity:0;pointer-events:none;transform:translateY(14px);transition:all .3s var(--ease)}.back-to-top.show{opacity:1;pointer-events:auto;transform:translateY(0)}.back-to-top:hover{background:var(--accent);box-shadow:0 8px 24px var(--accent-glow)}.course-end{grid-column:1/-1;text-align:center;padding:46px 30px;border-radius:22px;background:linear-gradient(135deg,rgba(181,52,255,.12),rgba(0,229,255,.08));border:1px solid var(--border);margin-top:10px}.course-end i.trophy{font-size:2.6rem;color:var(--warn);margin-bottom:14px}.course-end h2{font-size:1.8rem;margin-bottom:10px}.course-end p{color:var(--text-muted);max-width:520px;margin:0 auto 22px}.course-end .end-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}.course-end .end-btn{display:inline-flex;align-items:center;gap:9px;padding:13px 26px;border-radius:30px;font-weight:700;text-decoration:none;transition:all .25s var(--ease)}.end-btn.primary{background:var(--accent);color:#fff;box-shadow:0 6px 18px var(--accent-glow)}.end-btn.primary:hover{transform:translateY(-2px)}.end-btn.ghost{background:rgba(255,255,255,.05);color:#fff;border:1px solid var(--border)}.end-btn.ghost:hover{background:rgba(255,255,255,.1)}@media (max-width:940px){.lesson-wrap{grid-template-columns:1fr;gap:24px}.lesson-toc{display:none}.lesson-section{padding:32px 24px}}@media (max-width:560px){.lesson-wrap{padding:24px 16px 80px;gap:20px}.lesson-nav{padding:12px 16px;flex-direction:column;gap:12px;align-items:stretch}.nav-left{width:100%;justify-content:space-between}.nav-pill{width:100%;justify-content:center;font-size:.8rem;text-align:center}.brand span.brand-txt{display:inline;font-size:1.05rem}.back-link{font-size:.85rem;padding:6px 12px}.course-hero{padding:10px}.course-hero h1{font-size:2rem;margin-top:10px}.course-meta{flex-direction:column;align-items:stretch;gap:8px}.course-meta span{justify-content:center;width:100%}.lesson-section{padding:24px 16px}.lesson-section h2{font-size:1.5rem}.sim-head{flex-direction:column;text-align:center;gap:12px}.sim-ctrl{width:100%;justify-content:center}.sim-stage{padding:20px 12px;min-height:200px}.sim-script li{padding:10px 12px 10px 42px;font-size:.85rem}.sim-script li::before{left:10px;width:22px;height:22px;font-size:.65rem;top:12px}.code-block pre{padding:14px;font-size:.8rem}.callout{flex-direction:column;text-align:center;align-items:center;padding:16px}.callout i.callout-ico{margin-top:0;margin-bottom:8px;font-size:1.4rem}}@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.lesson-section{opacity:1;transform:none;transition:none}}.lesson-section.locked>:not(.lesson-lock){filter:blur(12px) saturate(.2);opacity:0;visibility:hidden;pointer-events:none;user-select:none;transition:filter .35s,opacity .35s,visibility 0s .35s}.lesson-section.locked{border-color:rgba(239,68,68,.22);overflow:hidden;max-height:460px}.lesson-section.locked:hover{transform:none;border-color:rgba(239,68,68,.35)}.lesson-lock{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:32px;background:rgba(9,9,15,.65);z-index:10}.lesson-lock .lock-icon{font-size:2.2rem;color:#ef4444;text-shadow:0 0 16px rgba(239,68,68,.4);margin-bottom:4px}.lesson-lock h3{margin:0;font-size:1.25rem;color:#fff}.lesson-lock p{margin:0;max-width:480px;color:var(--text-secondary);font-size:.95rem}.lesson-lock .lock-timer{font-weight:700;color:var(--accent-2);font-variant-numeric:tabular-nums}.energy-banner{position:fixed;bottom:24px;left:50%;transform:translate(-50%,150%);background:rgba(30,30,44,.95);border:1px solid rgba(239,68,68,.4);box-shadow:0 8px 32px rgba(0,0,0,.4),0 0 0 1px rgba(255,255,255,.05) inset;border-radius:12px;padding:16px 20px;display:flex;align-items:center;gap:16px;z-index:9999;backdrop-filter:blur(12px);transition:transform .4s cubic-bezier(.34, 1.56, .64, 1);min-width:320px}.energy-banner.show{transform:translate(-50%,0)}.energy-banner i.banner-icon{font-size:1.4rem;color:#ef4444;background:rgba(239,68,68,.15);width:42px;height:42px;display:flex;align-items:center;justify-content:center;border-radius:10px}.energy-banner .banner-text{font-size:.9rem;line-height:1.5}.energy-banner .banner-title{display:block;color:#fff;font-weight:700;font-size:1rem;margin-bottom:2px}.energy-banner .banner-sub{color:var(--text-muted)}.energy-banner .banner-sub strong{color:var(--accent-2);font-weight:700;font-variant-numeric:tabular-nums}.energy-banner .banner-close{background:0 0;border:none;padding:6px;color:var(--text-muted);cursor:pointer;font-size:1.1rem;margin-left:auto;border-radius:6px;transition:.2s}.energy-banner .banner-close:hover{color:#fff;background:rgba(255,255,255,.1)}.module-dropdown-item.locked,.next-btn.locked,.toc-link.locked{opacity:.5;pointer-events:none;filter:grayscale(1)}.toc-link.locked::after{content:'\f023';font-family:'Font Awesome 6 Free';font-weight:900;margin-left:auto;color:#ef4444}