@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;600&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--ink:#16202a;--ink-secondary:#2d3e50;--muted:#5f6d7a;--paper:#f7f9fb;--panel:#fff;--line:#dce4ea;--blue:#00add8;--blue-dark:#087ea4;--blue-soft:#eaf8fb;--blue-glow:#00add81f;--green:#1b8a5a;--green-soft:#e6f7ef;--yellow:#f2b705;--yellow-soft:#fff8e1;--orange:#e8732f;--coral:#e85d4f;--purple:#7c5cbf;--purple-soft:#f3eeff;--code-bg:#0d1b2a;--code-header:#152233;--code-border:#1e3248;--code-text:#e7f3f6;--terminal-bg:#070f18;--terminal-text:#93e2a8;--inline-code-bg:#eef6f8;--inline-code-text:#0a6683;--inline-code-border:#cfe8ee;--shadow:0 22px 60px #14293e21;--shadow-sm:0 4px 14px #14293e12;--shadow-glow:0 0 20px #00add81a;--radius:12px;--radius-sm:8px;--transition:.25s cubic-bezier(.4,0,.2,1);--quiz-correct:#d4edda;--quiz-wrong:#f8d7da;--quiz-correct-border:#1b8a5a;--quiz-wrong-border:#e85d4f}[data-theme=dark]{--ink:#f0f4f8;--ink-secondary:#c8d6e0;--muted:#a3b8c8;--paper:#0a1018;--panel:#111c28;--line:#1e3040;--blue-dark:#5cc8e8;--blue-soft:#0e2230;--blue-glow:#00add826;--green-soft:#0e2a1e;--yellow-soft:#2a2410;--purple-soft:#1e1530;--code-bg:#080e18;--code-header:#0c1620;--code-border:#162030;--terminal-bg:#060c14;--inline-code-bg:#162030;--inline-code-text:#5cc8e8;--inline-code-border:#1e3248;--shadow:0 22px 60px #00000080;--shadow-sm:0 4px 14px #0000004d;--shadow-glow:0 0 30px #00add814;--quiz-correct:#0e2a1e;--quiz-wrong:#2a1418;--quiz-correct-border:#2dbe73;--quiz-wrong-border:#f07070}*,:before,:after{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{background:var(--paper);color:var(--ink);transition:background var(--transition), color var(--transition);font-family:Inter,system-ui,-apple-system,sans-serif;line-height:1.6}a{color:inherit;text-decoration:none}code,pre{font-family:JetBrains Mono,ui-monospace,SFMono-Regular,Menlo,monospace}p code,li code{background:var(--inline-code-bg);border:1px solid var(--inline-code-border);color:var(--inline-code-text);border-radius:5px;padding:.15rem .4rem;font-size:.86em}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.06)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.animate-in{animation:.4s both fadeSlideIn}.lucide{vertical-align:middle;flex-shrink:0}.spin-icon{animation:1s linear infinite spin}.topbar{z-index:10;background:color-mix(in srgb, var(--paper) 85%, transparent);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(20px)saturate(1.2);backdrop-filter:blur(20px)saturate(1.2);transition:background var(--transition);justify-content:space-between;align-items:center;gap:20px;padding:12px clamp(18px,5vw,72px);display:flex;position:sticky;top:0}.brand{cursor:pointer;align-items:center;gap:10px;font-weight:800;display:flex}.brand-mark{background:linear-gradient(135deg, var(--blue), #0093b8);color:#fff;border-radius:7px;place-items:center;width:42px;height:30px;font-size:.9rem;font-weight:800;display:grid;box-shadow:0 2px 8px #00add84d}.top-nav{color:var(--muted);align-items:center;gap:18px;font-size:.92rem;font-weight:700;display:flex}.top-nav a{transition:color .2s}.top-nav a:hover{color:var(--blue)}.theme-toggle{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);cursor:pointer;width:40px;height:40px;transition:all var(--transition);place-items:center;font-size:1.15rem;display:grid}.theme-toggle:hover{border-color:var(--blue);box-shadow:var(--shadow-glow)}.progress-bar-wrap{z-index:100;background:var(--line);height:3px;position:fixed;top:0;left:0;right:0}.progress-bar-fill{background:linear-gradient(90deg, var(--blue), var(--green), var(--blue));background-size:200% 100%;height:100%;transition:width .5s;animation:3s linear infinite shimmer}.hero{grid-template-columns:minmax(0,1fr) minmax(320px,520px);align-items:center;gap:clamp(30px,5vw,70px);min-height:calc(100vh - 64px);padding:clamp(44px,7vw,86px) clamp(18px,5vw,72px);display:grid}.hero-copy{max-width:720px}.eyebrow,.card-label,.menu-title,.project-tag{color:var(--blue-dark);letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.76rem;font-weight:800}h1,h2,h3,p{overflow-wrap:anywhere}h1{letter-spacing:-.02em;max-width:850px;margin:14px 0 18px;font-size:clamp(2.4rem,6vw,5rem);line-height:.98}h2{letter-spacing:-.01em;margin:8px 0 0;font-size:clamp(1.6rem,3.5vw,2.8rem);line-height:1.1}h3{margin:10px 0 8px;font-size:1.12rem}.hero-text,.topic-description,.setup-band p,.project-card p,.mini-project p,footer span{color:var(--muted);font-size:1.02rem;line-height:1.75}.hero-text{max-width:600px}.hero-actions{flex-wrap:wrap;gap:12px;margin-top:28px;display:flex}.hero-stats{gap:24px;margin-top:24px;display:flex}.hero-stat{flex-direction:column;display:flex}.hero-stat strong{color:var(--blue);font-size:1.6rem}.hero-stat span{color:var(--muted);font-size:.82rem;font-weight:600}.button,.icon-button{border:1px solid var(--line);border-radius:var(--radius-sm);font:inherit;cursor:pointer;font-weight:700;transition:all .2s}.button{padding:13px 22px;font-size:.95rem}.button:hover{box-shadow:var(--shadow-sm);transform:translateY(-2px)}.button.primary{background:linear-gradient(135deg, var(--blue), #0093b8);color:#fff;border-color:#0000;box-shadow:0 4px 14px #00add84d}.button.primary:hover{box-shadow:0 6px 20px #00add866}.button.secondary{background:var(--panel);color:var(--ink)}.terminal-art,.code-card{background:var(--code-bg);color:var(--code-text);border:1px solid var(--code-border);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.terminal-header{background:var(--code-header);border-bottom:1px solid var(--code-border);align-items:center;gap:8px;padding:12px 16px;display:flex}.terminal-header span{border-radius:50%;width:11px;height:11px}.terminal-header span:first-child{background:var(--coral)}.terminal-header span:nth-child(2){background:var(--yellow)}.terminal-header span:nth-child(3){background:var(--green)}.terminal-header strong{color:#8ca8ba;margin-left:8px;font-size:.8rem;font-weight:600}pre{margin:0;padding:20px;font-size:.88rem;line-height:1.7;overflow-x:auto}.terminal-output{background:var(--terminal-bg);color:var(--terminal-text);white-space:pre-wrap;padding:14px 20px;font-family:JetBrains Mono,monospace;font-size:.85rem;line-height:1.6}.setup-band,.practice-section{background:var(--panel);border-block:1px solid var(--line);transition:background var(--transition);padding:clamp(44px,7vw,80px) clamp(18px,5vw,72px)}.setup-band{grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);align-items:start;gap:26px;display:grid}.setup-steps,.project-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;display:grid}.setup-steps article,.project-card,.explain-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);transition:all .25s}.setup-steps article:hover,.project-card:hover{box-shadow:var(--shadow-sm);border-color:var(--blue);transform:translateY(-4px)}.setup-steps article,.project-card{padding:22px}.setup-steps span{background:var(--blue-soft);width:34px;height:34px;color:var(--blue-dark);border-radius:7px;place-items:center;font-weight:800;display:grid}.learning-layout{grid-template-columns:280px minmax(0,1fr);gap:22px;padding:clamp(36px,6vw,72px) clamp(18px,5vw,72px);display:grid}.topic-menu{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);max-height:calc(100vh - 90px);transition:background var(--transition);align-self:start;padding:16px;position:sticky;top:70px;overflow:auto}.menu-title{margin-bottom:12px}.topic-buttons{gap:4px;display:grid}.topic-button{border-radius:var(--radius-sm);width:100%;color:var(--muted);font:inherit;text-align:left;cursor:pointer;background:0 0;border:1px solid #0000;align-items:center;gap:8px;padding:10px 12px;font-size:.85rem;font-weight:600;transition:all .18s;display:flex}.topic-button .topic-num{text-align:center;background:var(--blue-soft);min-width:26px;color:var(--blue-dark);border-radius:4px;padding:2px 0;font-size:.75rem;font-weight:800}.topic-button:hover{background:var(--blue-soft);color:var(--ink)}.topic-button.active{background:var(--blue-soft);border-color:var(--blue);color:var(--ink);box-shadow:var(--shadow-glow)}.topic-button .check{color:var(--green);margin-left:auto;font-size:.85rem}.difficulty-badge{text-transform:uppercase;letter-spacing:.04em;border-radius:4px;flex-shrink:0;margin-left:auto;padding:2px 6px;font-size:.65rem;font-weight:800}.difficulty-badge.intermediate{background:var(--blue-soft);color:var(--blue-dark)}.difficulty-badge.advanced{background:var(--purple-soft);color:var(--purple)}.topic-panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:0;box-shadow:var(--shadow-sm);transition:background var(--transition);padding:clamp(22px,4vw,32px)}.topic-heading{justify-content:space-between;align-items:start;gap:16px;display:flex}.topic-heading .difficulty-badge{margin-top:6px;padding:4px 10px;font-size:.72rem}.tab-bar{border-bottom:2px solid var(--line);gap:0;margin-top:20px;display:flex;overflow-x:auto}.tab-btn{color:var(--muted);font:inherit;cursor:pointer;white-space:nowrap;background:0 0;border:none;border-bottom:2.5px solid #0000;align-items:center;gap:7px;margin-bottom:-2px;padding:12px 20px;font-size:.9rem;font-weight:700;transition:all .18s;display:inline-flex}.tab-btn:hover{color:var(--ink);background:var(--blue-soft)}.tab-btn.active{color:var(--blue);border-bottom-color:var(--blue)}.tab-content{padding-top:22px;animation:.35s both fadeSlideIn}.code-tab-grid{grid-template-columns:minmax(0,1.1fr) minmax(260px,.9fr);gap:18px;display:grid}.code-card .card-label{color:#7bdcf1}.code-card .card-label,.explain-card .card-label{padding:14px 18px 0}.explain-card{background:var(--panel)}.explain-card ul{color:var(--muted);margin:0;padding:14px 22px 20px 36px;line-height:1.75}.explain-card li+li{margin-top:8px}.concepts-list{gap:12px;display:grid}.concept-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--ink-secondary);padding:16px 18px;font-size:.94rem;line-height:1.7;transition:all .18s}.concept-item:hover{border-color:var(--blue);background:var(--blue-soft)}.concept-item strong{color:var(--ink)}.interview-section{margin-top:28px}.interview-section h4{color:var(--ink);align-items:center;gap:8px;margin-bottom:14px;font-size:.95rem;display:flex}.interview-qa{border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:12px;transition:border-color .18s;overflow:hidden}.interview-qa:hover{border-color:var(--blue)}.interview-q{background:var(--panel);cursor:pointer;text-align:left;width:100%;font-size:.92rem;font-weight:700;font:inherit;color:var(--ink);border:none;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;transition:background .18s;display:flex}.interview-q:hover{background:var(--blue-soft)}.interview-q .toggle-icon{color:var(--muted);flex-shrink:0;font-size:.8rem;transition:transform .2s}.interview-q .toggle-icon.open{transform:rotate(180deg)}.interview-a{color:var(--muted);padding:0 18px 16px;font-size:.9rem;line-height:1.75;animation:.25s fadeIn}.exercise-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);padding:22px}.exercise-card h4{margin-bottom:8px;font-size:1.05rem}.exercise-prompt{color:var(--muted);margin-bottom:16px;line-height:1.75}.hint-toggle,.solution-toggle{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);color:var(--ink);font:inherit;cursor:pointer;align-items:center;gap:8px;margin-bottom:8px;margin-right:8px;padding:10px 16px;font-size:.88rem;font-weight:700;transition:all .18s;display:inline-flex}.hint-toggle:hover,.solution-toggle:hover{border-color:var(--blue);background:var(--blue-soft)}.solution-toggle{border-color:var(--green);color:var(--green)}.solution-toggle:hover{background:var(--green-soft)}.hints-list{background:var(--yellow-soft);border:1px solid color-mix(in srgb, var(--yellow) 30%, var(--line));border-radius:var(--radius-sm);color:var(--ink-secondary);margin-top:12px;padding:14px 18px 14px 36px;line-height:1.7;animation:.3s fadeSlideIn}.hints-list li+li{margin-top:6px}.solution-block{margin-top:12px;animation:.3s fadeSlideIn}.run-simulator{margin-top:18px}.run-btn{border-radius:var(--radius-sm);background:linear-gradient(135deg, var(--blue), #0093b8);color:#fff;font:inherit;cursor:pointer;border:none;align-items:center;gap:8px;padding:10px 22px;font-size:.9rem;font-weight:700;transition:all .18s;display:inline-flex;box-shadow:0 2px 10px #00add840}.run-btn:hover{transform:translateY(-2px);box-shadow:0 4px 16px #00add859}.run-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.run-output{background:var(--terminal-bg);border:1px solid var(--code-border);border-radius:var(--radius-sm);color:var(--terminal-text);white-space:pre-wrap;margin-top:10px;padding:14px 18px;font-family:JetBrains Mono,monospace;font-size:.84rem;line-height:1.6;animation:.3s fadeIn}.run-cursor{background:var(--terminal-text);vertical-align:text-bottom;width:8px;height:1.1em;margin-left:2px;animation:.7s infinite pulse;display:inline-block}.quiz-widget h4{align-items:center;gap:8px;margin-bottom:16px;font-size:.95rem;display:flex}.quiz-question{margin-bottom:18px;animation:.35s both fadeSlideIn}.quiz-question p{margin-bottom:10px;font-size:.92rem;font-weight:600}.quiz-options{gap:8px;display:grid}.quiz-option{border:1.5px solid var(--line);border-radius:var(--radius-sm);background:var(--panel);font:inherit;text-align:left;cursor:pointer;color:var(--ink);padding:11px 16px;font-size:.88rem;transition:all .18s}.quiz-option:hover:not(:disabled){border-color:var(--blue);background:var(--blue-soft)}.quiz-option.correct{background:var(--quiz-correct);border-color:var(--quiz-correct-border);color:var(--ink)}.quiz-option.wrong{background:var(--quiz-wrong);border-color:var(--quiz-wrong-border);color:var(--ink)}.quiz-option:disabled{cursor:default}.quiz-score{border-radius:var(--radius-sm);background:var(--green-soft);border:1px solid var(--green);color:var(--green);margin-top:12px;padding:12px 16px;font-size:.88rem;font-weight:700;animation:.3s fadeIn}.copy-toast{z-index:200;border-radius:var(--radius-sm);background:var(--code-bg);color:var(--code-text);border:1px solid var(--code-border);pointer-events:none;box-shadow:var(--shadow);padding:12px 24px;font-size:.88rem;font-weight:700;animation:.3s both fadeSlideIn;position:fixed;bottom:24px;right:24px}.section-heading{max-width:720px;margin-bottom:26px}.project-card{min-height:200px}.project-tag{color:var(--green);display:inline-flex}.project-card h3{font-size:1.08rem}footer{background:var(--code-bg);color:var(--code-text);border-top:1px solid var(--code-border);justify-content:space-between;align-items:center;gap:16px;padding:24px clamp(18px,5vw,72px);display:flex}footer span{color:var(--muted)}@media (width<=980px){.hero,.setup-band,.learning-layout,.code-tab-grid{grid-template-columns:1fr}.hero{min-height:auto}.topic-menu{max-height:none;position:static}.topic-buttons{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=720px){.topbar,footer{flex-direction:column;align-items:flex-start}.setup-steps,.project-grid,.topic-buttons{grid-template-columns:1fr}.topic-heading{flex-direction:column}.tab-bar{gap:0}.tab-btn{padding:10px 14px;font-size:.84rem}.hero-stats{flex-wrap:wrap;gap:16px}}.hljs{background:0 0!important;padding:0!important}.topic-menu::-webkit-scrollbar{width:4px}.topic-menu::-webkit-scrollbar-track{background:0 0}.topic-menu::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}pre code.hljs{padding:1em;display:block;overflow-x:auto}code.hljs{padding:3px 5px}.hljs{color:#abb2bf;background:#282c34}.hljs-comment,.hljs-quote{color:#5c6370;font-style:italic}.hljs-doctag,.hljs-keyword,.hljs-formula{color:#c678dd}.hljs-section,.hljs-name,.hljs-selector-tag,.hljs-deletion,.hljs-subst{color:#e06c75}.hljs-literal{color:#56b6c2}.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#98c379}.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-type,.hljs-selector-class,.hljs-selector-attr,.hljs-selector-pseudo,.hljs-number{color:#d19a66}.hljs-symbol,.hljs-bullet,.hljs-link,.hljs-meta,.hljs-selector-id,.hljs-title{color:#61aeee}.hljs-built_in,.hljs-title.class_,.hljs-class .hljs-title{color:#e6c07b}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}.hljs-link{text-decoration:underline}