:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--bg: #0d0d0d;--panel-dark: #1a1a1a;--panel-black: #0d0d0d;--console-black: #000000;--border: #1f2937;--orange: #f97316;--orange-hover: #ea580c;--red: #ef4444;--gray-700: #374151;--gray-600: #4b5563;--gray-500: #6b7280;--gray-400: #9ca3af;--gray-300: #d1d5db;--white: #ffffff;--green: #4ade80}body.dark{--bg: #0d0d0d;--panel-dark: #1a1a1a;--panel-black: #0d0d0d;--console-black: #000000;--border: #1f2937;--orange: #f97316;--orange-hover: #ea580c;--red: #ef4444;--gray-700: #374151;--gray-600: #4b5563;--gray-500: #6b7280;--gray-400: #9ca3af;--gray-300: #d1d5db;--white: #ffffff;--green: #4ade80}body:not(.dark){--bg: #edf1f5;--panel-dark: #f4f6fb;--panel-black: #ffffff;--console-black: #0a1220;--border: #d6dce6;--gray-700: #4b5563;--gray-600: #607184;--gray-500: #607184;--gray-400: #607184;--gray-300: #1f2937;--white: #1f2937}*{box-sizing:border-box}body{margin:0;font-family:var(--font-sans);color:var(--gray-300);background:var(--bg)}.site{min-height:100vh;background:var(--bg)}.top-header{position:sticky;top:0;z-index:50;background:var(--panel-dark);border-bottom:1px solid var(--border)}.top-header-inner{max-width:1280px;margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{border:0;background:transparent;color:inherit;display:flex;align-items:center;gap:12px;cursor:pointer;padding:0}.brand-icon{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,var(--orange),var(--red));color:var(--white);display:grid;place-items:center;font-size:14px;font-weight:700}.brand-title{margin:0;font-size:20px;font-weight:700;color:var(--white)}.brand-subtitle{margin:2px 0 0;font-size:12px;color:var(--gray-400)}.top-nav{display:flex;align-items:center;gap:12px}.top-link{border:0;background:transparent;color:var(--gray-300);border-radius:8px;padding:8px 16px;font-size:16px;font-weight:500;cursor:pointer}.top-link:hover{background:#1f293780;color:var(--white)}.top-link.active{color:var(--orange);background:#f973161a}.docs-link{text-decoration:none;padding:8px 20px;border-radius:8px;background:linear-gradient(90deg,var(--orange),var(--red));color:var(--white);font-size:14px;font-weight:500}.home-page{background:var(--bg)}.hero{position:relative;overflow:hidden}.hero-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(249,115,22,.1),transparent,rgba(239,68,68,.1))}.hero-inner{position:relative;max-width:1280px;margin:0 auto;padding:96px 24px;text-align:center}.hero-badge{display:inline-flex;align-items:center;padding:8px 16px;border-radius:9999px;border:1px solid rgba(249,115,22,.2);background:#f973161a;color:var(--orange);font-size:14px;font-weight:500;margin-bottom:32px}.hero-title{margin:0 0 24px;font-size:clamp(48px,8vw,72px);line-height:1.1;font-weight:700;color:var(--white)}.hero-title span{display:block;background:linear-gradient(90deg,var(--orange),var(--red));-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy{max-width:672px;margin:0 auto 48px;font-size:20px;line-height:1.6;color:var(--gray-300)}.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.hero-primary,.hero-secondary{border:0;border-radius:8px;padding:16px 32px;font-size:16px;font-weight:600;text-decoration:none;cursor:pointer}.hero-primary{background:linear-gradient(90deg,var(--orange),var(--red));color:var(--white)}.hero-secondary{background:#1f293780;border:1px solid var(--gray-700);color:var(--white)}.hero-stats{margin:64px auto 0;max-width:672px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.hero-stats strong{display:block;font-size:30px;color:var(--orange);font-weight:700}.hero-stats span{font-size:14px;color:var(--gray-400)}.home-section{max-width:1280px;margin:0 auto;padding:96px 24px}.section-features{background:var(--panel-dark);max-width:none}.section-head{text-align:center;margin-bottom:64px}.section-head h3{margin:0 0 16px;font-size:36px;color:var(--white)}.section-head p{margin:0;font-size:18px;color:var(--gray-400)}.feature-grid,.steps-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}.feature-card{border:1px solid var(--border);border-radius:12px;background:var(--bg);padding:32px}.feature-icon{width:48px;height:48px;border-radius:8px;background:#f973161a;color:var(--orange);display:grid;place-items:center;font-size:22px;margin-bottom:24px}.feature-card h4,.step-card h4{margin:0 0 12px;color:var(--white);font-size:20px}.feature-card p,.step-card p{margin:0;color:var(--gray-400);line-height:1.6}.step-card{text-align:center}.step-index{width:64px;height:64px;margin:0 auto 24px;border-radius:50%;background:linear-gradient(135deg,var(--orange),var(--red));color:var(--white);font-size:30px;font-weight:700;display:grid;place-items:center}.section-cta{text-align:center;background:linear-gradient(135deg,rgba(249,115,22,.05),transparent,rgba(239,68,68,.05));max-width:none}.section-cta h3{margin:0 0 24px;font-size:36px;color:var(--white)}.section-cta p{margin:0 0 32px;font-size:20px;color:var(--gray-300)}.site-footer{background:var(--bg);border-top:1px solid var(--border)}.site-footer-inner{max-width:1280px;margin:0 auto;padding:48px 24px}.footer-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px}.footer-grid h4,.footer-grid h5{margin:0 0 16px;color:var(--white)}.footer-grid p,.footer-grid a{display:block;margin:0 0 8px;color:var(--gray-400);font-size:14px;text-decoration:none;line-height:1.6}.footer-grid a:hover{color:var(--orange)}.footer-bottom{margin-top:48px;padding-top:32px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:16px;color:var(--gray-500);font-size:14px}.footer-disclaimer{margin-top:24px;padding-top:24px;border-top:1px solid rgba(31,41,55,.5)}.footer-disclaimer p{margin:0;text-align:center;color:var(--gray-600);font-size:12px;line-height:1.5}.app{display:flex;height:100vh;overflow:hidden}.learn-layout{height:calc(100vh - 73px)}.sidebar{width:320px;flex:0 0 320px;display:flex;flex-direction:column;border-right:1px solid var(--border);background:var(--panel-dark);padding:16px;transition:width .18s ease,flex-basis .18s ease,padding .18s ease;overflow-y:auto;overflow-x:hidden}.sidebar-collapsed .sidebar{width:0;flex-basis:0;padding:0;border-right:0}.sidebar-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px;margin-bottom:12px}.sidebar-actions{display:flex;gap:8px}.sidebar-title{margin:0;font-size:20px;line-height:1.2;font-weight:600;color:var(--white)}.sidebar-subtitle{margin:8px 0 0;font-size:14px;line-height:1.4;font-weight:400;color:var(--gray-400)}.chapter-list{flex:0 0 auto;min-height:auto;overflow:visible;display:grid;gap:8px}.chapter-card{border:1px solid transparent;border-radius:10px;overflow:hidden}.chapter-card.selected{background:#f973161a;border-color:#f9731633}.chapter-button{width:100%;display:flex;align-items:center;justify-content:space-between;text-align:left;border:0;background:transparent;color:var(--gray-300);padding:10px 12px;font-size:16px;font-weight:500;cursor:pointer}.chapter-button:hover{background:#1f293780;color:var(--white)}.chapter-card.selected .chapter-button{color:var(--orange)}.count{color:var(--gray-500);font-size:12px;font-weight:400}.lesson-list{border-top:1px solid var(--border);padding:8px;display:grid;gap:6px}.lesson-link{width:100%;text-align:left;border:1px solid transparent;background:transparent;color:var(--gray-300);padding:8px 10px;border-radius:8px;font-size:16px;font-weight:500;cursor:pointer}.lesson-link:hover{background:#1f293780;color:var(--white)}.lesson-link.active{border-color:#f9731673;background:#f973161a;color:var(--orange)}.sidebar-footer{border-top:1px solid var(--border);margin-top:12px;padding-top:10px;font-size:12px;color:var(--gray-500)}.content{flex:1;display:grid;grid-template-columns:minmax(520px,1fr) 500px;gap:0;overflow:hidden;position:relative}.sidebar-collapsed .content{grid-template-columns:minmax(520px,1.1fr) minmax(520px,.9fr)}.sidebar-reopen{position:absolute;top:12px;left:12px;z-index:3;border:1px solid var(--border);background:var(--panel-dark);color:var(--gray-300);border-radius:8px;font-size:12px;font-weight:500;padding:6px 10px;cursor:pointer}.lesson,.playground{min-height:0}.lesson{background:var(--panel-black);border-right:1px solid var(--border);overflow:auto}.lesson-inner{max-width:980px;margin:0 auto;padding:28px 30px 36px}.lesson-inner>h2{margin:0 0 16px;font-size:36px;line-height:1.2;font-weight:700;color:var(--white)}.lesson-inner>h2:after{content:"";display:block;width:80px;height:4px;border-radius:999px;margin-top:14px;background:linear-gradient(90deg,var(--orange),var(--red))}.lesson-block{margin-bottom:18px}.section-nav{display:flex;justify-content:space-between;gap:10px;margin-top:20px;padding-top:12px;border-top:1px solid var(--border)}.nav-btn{min-width:110px}.lesson-heading{font-size:24px;line-height:1.3;font-weight:600;color:var(--white);margin:18px 0 10px}.assessment{margin-top:18px;border-top:1px solid var(--border);padding-top:16px}.assessment-title{margin:0 0 4px;font-size:24px;color:var(--white);font-weight:600}.assessment-goal{margin:0 0 12px;font-size:16px;color:var(--gray-300)}.assessment-card{border:1px solid var(--border);border-radius:10px;background:var(--panel-dark);padding:12px;margin-bottom:10px}.assessment-card h4{margin:0 0 8px;font-size:16px;color:var(--white)}.assessment-card ul{margin:0;padding-left:18px}.assessment-card li{margin-bottom:6px}.quiz-item{margin-bottom:10px}.project-item{border:1px solid var(--border);border-radius:8px;padding:10px;margin-bottom:10px;background:#ffffff03}.quiz-question{margin:0 0 6px;font-weight:500}.quiz-options{display:grid;gap:6px}.quiz-option{border:1px solid var(--border);background:transparent;color:var(--gray-300);border-radius:8px;padding:8px;text-align:left;cursor:pointer}.quiz-option.selected{border-color:var(--orange)}.quiz-option.correct{border-color:#16a34a;background:#16a34a24}.quiz-option.wrong{border-color:#dc2626;background:#dc26261f}.quiz-explain{margin:6px 0 0;font-size:13px;color:var(--gray-400)}.challenge-prompt{margin:0 0 8px}.challenge-actions{display:flex;gap:8px;margin-bottom:8px}.challenge-expected{margin:0 0 4px;font-size:13px;color:var(--gray-400)}.challenge-output{margin:0;padding:8px;border-radius:8px;border:1px solid var(--border);font-family:var(--font-mono);font-size:13px;white-space:pre-wrap}.challenge-status{margin:8px 0 0;font-size:13px;color:var(--gray-300)}.lesson-text{color:var(--gray-300);font-size:18px;line-height:1.65;margin:0}.lesson-code{border:1px solid var(--border);border-radius:10px;overflow:hidden;background:#1e1e1e}.lesson-code-actions{display:flex;justify-content:flex-end;gap:8px;padding:8px}.primary-btn,.ghost-btn,.mode-toggle{border:1px solid transparent;border-radius:8px;padding:7px 12px;cursor:pointer;font-size:14px;font-weight:500;font-family:var(--font-sans)}.primary-btn{background:var(--orange);color:var(--white)}.primary-btn:hover{background:var(--orange-hover)}.primary-btn:disabled{background:var(--gray-700);cursor:not-allowed;opacity:.65}.ghost-btn,.mode-toggle{background:transparent;color:var(--gray-500);border-color:var(--gray-600)}.ghost-btn:hover,.mode-toggle:hover{color:var(--gray-300);background:var(--gray-700)}.code-static{margin:0;padding:16px 20px;overflow:auto;color:#d4d4d4;white-space:pre;font-family:var(--font-mono);font-size:14px;line-height:1.5}.tok-keyword{color:#569cd6}.tok-string{color:#ce9178}.tok-comment{color:#6a9955}.tok-number{color:#b5cea8}.playground{background:var(--panel-dark);border-left:1px solid var(--border);padding:0;display:flex;flex-direction:column;overflow:hidden}.playground-inner{display:flex;flex-direction:column;height:100%;min-height:0;overflow:hidden}.playground-header,.output-head{display:flex;align-items:center;justify-content:space-between}.playground-header{padding:16px;border-bottom:1px solid var(--border)}.playground-title{margin:0;color:var(--white);font-size:14px;font-weight:600}.playground-subtitle{margin:0;padding:8px 16px 10px;font-size:12px;color:var(--gray-500)}.editor-shell{flex:1 1 auto;min-height:0;border:0;border-radius:0;overflow:hidden;margin:0;background:transparent}.editor{width:100%;height:100%}.output{margin-top:auto;border-top:1px solid var(--border);border-radius:0;height:224px;min-height:224px;flex:0 0 auto;background:var(--panel-black);padding:0;display:flex;flex-direction:column;min-width:0}.output-head{padding:8px 16px;background:var(--panel-black);border-bottom:1px solid var(--border)}.output-head strong{color:var(--gray-400);font-size:12px;font-weight:600;text-transform:uppercase}.output .ghost-btn{padding:4px 10px;font-size:12px}.output pre{margin:0;padding:10px 16px;background:var(--console-black);color:var(--green);border-radius:0;flex:1 1 auto;min-height:0;max-height:none;overflow:auto;white-space:pre-wrap;font-family:var(--font-mono);font-size:14px;line-height:1.45}.muted{color:var(--gray-500)}@media(max-width:1200px){.feature-grid,.steps-grid{grid-template-columns:1fr}.sidebar{width:280px;flex-basis:280px}.content{grid-template-columns:1fr;overflow:auto}.playground{min-height:520px}}@media(max-width:880px){.top-header-inner{flex-direction:column;align-items:flex-start}.top-nav{width:100%;flex-wrap:wrap;gap:8px}.hero-inner{padding:72px 24px}.hero-copy,.section-cta p{font-size:18px}.hero-stats{grid-template-columns:1fr;gap:16px}.footer-grid{grid-template-columns:1fr}.footer-bottom{flex-direction:column;align-items:flex-start}.app{display:block;height:auto;overflow:auto}.sidebar{width:100%;flex-basis:auto;border-right:0;border-bottom:1px solid var(--border);height:40vh;max-height:none;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y}.chapter-list{min-height:auto}.content{display:block}.lesson{border-right:0;border-bottom:1px solid var(--border)}}