@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#06130d;--panel:#0b1b13;--panel2:#10241a;--line:#1f392b;--text:#ecf7ef;--muted:#8ca596;--green:#74ef9d;--bright:#baffce;--orange:#ffb45d;--side:270px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Manrope,system-ui,sans-serif}.noise{position:fixed;inset:0;opacity:.035;pointer-events:none;z-index:9;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E")}.sidebar{position:fixed;inset:0 auto 0 0;width:var(--side);border-right:1px solid var(--line);background:#071710;padding:30px 22px;display:flex;flex-direction:column;z-index:5}.brand{display:flex;gap:13px;align-items:center;color:var(--text);text-decoration:none}.brand-mark{width:40px;height:40px;display:grid;place-items:center;background:var(--green);color:#082011;font-weight:900;clip-path:polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%)}.brand b,.brand small{display:block}.brand b{font-size:15px}.brand small{font:10px DM Mono;color:var(--muted);margin-top:3px}.sidebar nav{margin-top:70px}.nav-label{font:10px DM Mono;color:#5d7968;letter-spacing:.16em;margin:0 12px 18px}.sidebar nav a{color:#7f9989;text-decoration:none;display:flex;align-items:center;gap:15px;padding:13px 12px;border-radius:7px;margin:5px 0;font-size:13px}.sidebar nav a span{font:10px DM Mono;color:#496454}.sidebar nav a:hover,.sidebar nav a.active{background:#10281b;color:var(--bright)}.sidebar nav a.active span{color:var(--green)}.progress-card{margin-top:auto;background:#0e2117;border:1px solid var(--line);padding:16px;border-radius:10px}.progress-head{display:flex;justify-content:space-between;font-size:12px}.progress-head b{font:12px DM Mono;color:var(--green)}.progress-track{height:4px;background:#1e3829;margin:13px 0}.progress-track i{height:100%;display:block;width:0;background:var(--green);transition:.4s}.progress-card small{color:#6f8b79;font-size:10px;line-height:1.5}.topbar{height:70px;border-bottom:1px solid var(--line);display:flex;justify-content:flex-end;align-items:center;padding:0 5vw;gap:24px}.status{font:10px DM Mono;color:#769384;letter-spacing:.1em}.status i{display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%;box-shadow:0 0 12px var(--green);margin-right:8px}.reset{background:transparent;border:0;color:#6c8877;font:10px DM Mono;cursor:pointer}main{margin-left:var(--side)}.hero{min-height:750px;padding:86px 6vw 60px;position:relative;overflow:hidden}.hero:before{content:"";position:absolute;width:620px;height:620px;border-radius:50%;right:-220px;top:-210px;border:1px solid #153021;box-shadow:0 0 0 80px rgba(13,39,25,.25),0 0 0 160px rgba(13,39,25,.16)}.eyebrow,.section-title span,.quiz-copy>span{font:11px DM Mono;color:var(--green);letter-spacing:.18em}.hero h1{font-size:clamp(54px,7vw,100px);line-height:.95;letter-spacing:-.06em;margin:23px 0 28px;max-width:900px}.hero h1 em{font-style:normal;color:var(--green)}.hero>p{max-width:640px;color:#9ab0a2;font-size:17px;line-height:1.8}.hero-actions{display:flex;gap:14px;margin:34px 0 60px}.hero-actions a{padding:14px 20px;text-decoration:none;font-size:13px;border-radius:5px}.primary{background:var(--green);color:#082011;font-weight:800}.primary span{margin-left:20px}.secondary{border:1px solid #294333;color:#b5c8bb}.terminal{position:relative;background:#07110c;border:1px solid #284635;border-radius:10px;max-width:950px;box-shadow:0 25px 70px rgba(0,0,0,.3)}.terminal-bar,.panel-head{height:43px;display:flex;align-items:center;border-bottom:1px solid #1d3427;padding:0 16px;font:10px DM Mono;color:#6f8e7b}.terminal-bar span{width:8px;height:8px;border-radius:50%;background:#233c2e;margin-right:6px}.terminal-bar b{margin-left:auto;font-weight:400}.trace{display:flex;align-items:center;padding:32px 38px}.node{min-width:145px}.node i{font:11px DM Mono;width:26px;height:26px;border:1px solid #395342;border-radius:50%;display:grid;place-items:center;font-style:normal;margin-bottom:10px}.node b,.node small{display:block}.node b{font-size:13px}.node small{font:10px DM Mono;color:#637d6d;margin-top:5px}.node.current i{background:var(--green);border-color:var(--green);color:#06200f}.node.current b{color:var(--green)}.node.done i{border-color:#50705d}.beam{height:1px;background:#2b4737;flex:1;margin:0 20px;position:relative}.beam span{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--green);top:-4px;animation:travel 2s infinite}@keyframes travel{from{left:0}to{left:100%}}.terminal-log{border-top:1px solid #162d20;padding:13px 18px;font:10px DM Mono;color:#64806e}.terminal-log span{color:var(--green);margin-right:10px}.section{padding:90px 6vw;border-top:1px solid var(--line)}.section-title{display:flex;justify-content:space-between;align-items:end;margin-bottom:38px}.section-title h2,.quiz h2{font-size:38px;margin:10px 0 0;letter-spacing:-.04em}.section-title p{color:var(--muted);max-width:400px;font-size:13px;line-height:1.7}.scenario-tabs{display:flex;gap:8px;margin-bottom:14px;overflow:auto}.scenario-tabs button{border:1px solid var(--line);background:#091810;color:#7e9887;border-radius:5px;padding:11px 17px;white-space:nowrap;cursor:pointer}.scenario-tabs button.active{background:var(--green);border-color:var(--green);color:#082011;font-weight:700}.lab-grid{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid var(--line);border-radius:10px;overflow:hidden}.code-panel{background:#07110c}.panel-head button{margin-left:auto;border:0;background:transparent;color:#73917e;font:10px DM Mono;cursor:pointer}.code-panel pre{margin:0;padding:26px;min-height:370px;overflow:auto}.code-panel code{font:12px/1.8 DM Mono;color:#c8d8ce}.tok-key{color:#74ef9d}.tok-val{color:#ffc173}.tok-comment{color:#526c5c}.result-panel{background:var(--panel);padding-bottom:24px}.result-panel .panel-head{margin-bottom:25px}.result-panel .panel-head b{margin-left:auto;color:var(--green);font-weight:400}.result-panel label{font:10px DM Mono;color:#6d8a77;margin:0 22px 8px;display:block}.url-box{display:flex;margin:0 22px;border:1px solid #2b4937;border-radius:5px;overflow:hidden}.url-box span{padding:12px;background:#173020;color:var(--green);font:11px DM Mono}.url-box input{flex:1;min-width:0;border:0;background:#0a160f;color:#cad9cf;padding:0 12px;outline:none;font:11px DM Mono}.send{margin:14px 22px 22px;width:calc(100% - 44px);border:0;background:var(--green);padding:12px;font-weight:800;color:#082011;border-radius:5px;cursor:pointer}.send span{float:right}.response{margin:0 22px;border:1px solid #1e3829;display:grid;grid-template-columns:repeat(3,1fr)}.response div{padding:15px;border-right:1px solid #1e3829}.response div:last-child{border:0}.response span,.response b{display:block}.response span{font:9px DM Mono;color:#5f7968}.response b{font:11px DM Mono;color:var(--green);margin-top:7px}.explain{color:#89a08f;font-size:12px;line-height:1.6;margin:20px 22px 0}.lesson-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.lesson-grid article{background:var(--panel);border:1px solid var(--line);padding:25px;min-height:350px;display:flex;flex-direction:column;border-radius:8px;transition:.2s}.lesson-grid article:hover{transform:translateY(-4px);border-color:#3b6249}.lesson-no{font:10px DM Mono;color:#587261}.lesson-icon{font:32px DM Mono;color:var(--green);margin:34px 0 15px}.lesson-grid h3{font-size:18px;margin:0 0 8px}.lesson-grid p{font-size:12px;color:#829a8a;line-height:1.7}.lesson-grid ul{padding:0;list-style:none;font:10px/2 DM Mono;color:#6f8978}.lesson-grid li:before{content:"+";color:var(--green);margin-right:8px}.complete{margin-top:auto;background:transparent;border:1px solid #2a4735;color:#789481;padding:9px;cursor:pointer;border-radius:4px}.complete.done{background:#173a25;color:var(--green);border-color:#39664a}.quiz{display:grid;grid-template-columns:1fr 1fr;gap:7vw;background:#091a11}.quiz-copy p{color:#91aa99;line-height:1.8;max-width:570px}.quiz code{font:11px DM Mono;color:var(--orange);background:#12291b;padding:3px 5px}.answers{display:grid;gap:9px}.answers button{text-align:left;background:#0d2116;border:1px solid #23402e;color:#a6bcad;padding:15px;cursor:pointer;border-radius:6px}.answers button i{display:inline-grid;place-items:center;width:25px;height:25px;border:1px solid #385641;border-radius:4px;font:10px DM Mono;font-style:normal;margin-right:13px}.answers button.correct{border-color:var(--green);color:var(--green)}.answers button.wrong{border-color:#d2675c;color:#f38a80}.answers p{font:10px DM Mono;color:#688170;margin:5px}footer{padding:35px 6vw;border-top:1px solid var(--line);display:flex;gap:30px;color:#587161;font-size:11px}footer b{color:#a9c0b0}footer a{margin-left:auto;color:#7d9986;text-decoration:none}@media(max-width:980px){:root{--side:0px}.sidebar{display:none}.lesson-grid{grid-template-columns:1fr 1fr}.hero{padding-top:60px}.topbar{height:55px}.lab-grid{grid-template-columns:1fr}.quiz{grid-template-columns:1fr}}@media(max-width:620px){.hero,.section{padding-left:22px;padding-right:22px}.hero{min-height:auto}.hero h1{font-size:49px}.hero-actions{flex-direction:column}.trace{padding:25px 15px;overflow:auto}.node{min-width:112px}.section-title{display:block}.lesson-grid{grid-template-columns:1fr}.quiz{gap:28px}.response{grid-template-columns:1fr}.response div{border-right:0;border-bottom:1px solid #1e3829}footer span{display:none}}