:root{--bg:#f7f7fb;--surface:#fff;--text:#14172b;--muted:#5d6280;--border:#dfe1ec;--accent:#d9930d;--accent-text:#14172b;--ok:#1f8a4c;--bad:#c0392b;--code-bg:#f0f1f7;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--bg:#0b1020;--surface:#131a30;--text:#e8eaf6;--muted:#9aa0c3;--border:#262f52;--accent:#ffd166;--accent-text:#0b1020;--ok:#4cc38a;--bad:#ff6b6b;--code-bg:#0f1528;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0;font:16px/1.6 system-ui,-apple-system,Segoe UI,sans-serif}a{color:var(--accent)}pre,code{font-family:ui-monospace,JetBrains Mono,Menlo,monospace;font-size:14px}pre{background:var(--code-bg);border:1px solid var(--border);border-radius:8px;padding:12px;overflow-x:auto}html{scroll-behavior:smooth}button,.button{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);cursor:pointer;border-radius:8px;padding:6px 14px}.button{font-weight:500;text-decoration:none;display:inline-block}button:disabled{opacity:.6;cursor:default}button.primary,.button.primary{background:var(--accent);color:var(--accent-text);border-color:#0000;font-weight:600}.link-button{color:var(--muted);background:0 0;border:none;padding:6px;text-decoration:underline}.muted{color:var(--muted)}.error{color:var(--bad);white-space:pre-wrap}.badge{background:var(--accent);color:var(--accent-text);border-radius:4px;margin-left:6px;padding:1px 6px;font-size:11px;font-weight:700}.topbar{border-bottom:1px solid var(--border);background:var(--surface);justify-content:space-between;align-items:center;padding:10px 16px;display:flex}.brand{letter-spacing:-.02em;color:var(--text);align-items:center;gap:8px;font-size:18px;font-weight:800;text-decoration:none;display:flex}.topbar-right{align-items:center;gap:12px;display:flex}.stat{font-variant-numeric:tabular-nums}main{max-width:1280px;margin:0 auto;padding:24px 16px}.lesson{gap:24px;display:grid}.lesson-code,.lesson-sim{grid-template-columns:minmax(0,1fr) minmax(0,1.2fr)}@media (width<=900px){.lesson-code,.lesson-sim{grid-template-columns:1fr}}.lesson-body,.lesson-reading,.lesson-quiz{max-width:760px}.workspace{flex-direction:column;gap:12px;min-width:0;display:flex}.editor{border:1px solid var(--border);background:var(--cm-bg,var(--surface));border-radius:8px;overflow:hidden}.theme-picker{margin-left:auto;font-size:13px}.theme-picker select{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:6px;padding:2px 6px}.editor .cm-editor{min-height:280px;max-height:60vh}.actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.preview-canvas{border:1px solid var(--border);background:#000;border-radius:8px;justify-content:center;align-items:center;min-height:240px;display:flex}.preview-canvas canvas{aspect-ratio:4/3;width:100%;max-width:640px;image-rendering:pixelated;outline:none}.results{border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:8px 16px}.results h3{margin:4px 0;font-size:16px}.results ul{margin:0;padding:0;list-style:none}.results.passed{border-color:var(--ok)}.results.failed,.results.error{border-color:var(--bad)}.results table{border-collapse:collapse;width:100%;font-size:14px}.results th,.results td{border-top:1px solid var(--border);text-align:left;vertical-align:top;padding:4px 8px}.results thead th{color:var(--muted);border-top:none;font-size:12px;font-weight:600}.results tbody th{font-weight:400}.results td{text-align:center;width:6em;font-weight:700}.results td.pass{color:var(--ok)}.results td.fail{color:var(--bad)}.results .stale{opacity:.55}.test-error{white-space:pre-wrap;font-size:13px}kbd{font:inherit;opacity:.55;border:1px solid;border-radius:4px;padding:0 4px;font-size:11px}@media (hover:none){kbd{display:none}}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.lesson-footer{flex-direction:column;gap:12px;margin-top:24px;display:flex}.completion{border:1px solid var(--ok);background:color-mix(in srgb, var(--ok) 8%, var(--surface));border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;animation:.35s ease-out completion-in;display:flex}.completion h3{margin:0;font-size:17px}.completion-stats{color:var(--muted);gap:14px;margin-top:2px;font-size:14px;display:flex}.xp-gain{color:var(--accent);font-weight:800}.streak-up{color:var(--text);font-weight:700}@keyframes completion-in{0%{opacity:0;transform:translateY(6px)scale(.98)}}@media (prefers-reduced-motion:reduce){.completion{animation:none}}.visible-tests summary{cursor:pointer;color:var(--muted);padding:4px 0}.visible-tests>.editor{margin-top:8px}.snippet-tabs{margin:16px 0}.tab-row{gap:4px;display:flex}.tab{border-bottom:none;border-radius:8px 8px 0 0;padding:4px 12px;font-size:13px}.tab.active{background:var(--code-bg);font-weight:600}.snippet-tabs pre{border-top-left-radius:0;margin-top:0}.quiz fieldset{border:1px solid var(--border);border-radius:8px;margin:0 0 12px}.quiz label{margin:4px 0;display:block}.quiz fieldset.correct{border-color:var(--ok)}.quiz fieldset.incorrect{border-color:var(--bad)}.quiz label.picked{font-weight:600}.quiz-feedback{margin:6px 0 2px;font-size:14px}.quiz .mark.ok,.quiz .correct .quiz-feedback{color:var(--ok)}.quiz .mark.bad,.quiz .incorrect .quiz-feedback{color:var(--bad)}.quiz .actions{margin-bottom:12px}.login,.paywall{flex-direction:column;gap:12px;max-width:380px;margin:40px auto;display:flex}.login form{flex-direction:column;gap:10px;display:flex}.login label{flex-direction:column;gap:4px;display:flex}.login input{font:inherit;border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:8px;padding:8px}.editor-compact .cm-editor{min-height:200px;max-height:420px}.playground{border:1px solid var(--border);background:var(--surface);border-radius:10px;flex-direction:column;gap:10px;margin:20px 0;padding:12px;display:flex}.playground-main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;display:grid}@media (width<=700px){.playground-main{grid-template-columns:1fr}}.playground-side{flex-direction:column;gap:10px;min-width:0;display:flex}.playground .preview-canvas{min-height:0}.tweaks{flex-direction:column;gap:4px;display:flex}.tweaks label{grid-template-columns:minmax(80px,auto) 1fr 4.5em;align-items:center;gap:8px;font-size:14px;display:grid}.tweak-name{font-family:ui-monospace,JetBrains Mono,Menlo,monospace}.tweaks input[type=range]{width:100%;accent-color:var(--accent)}.tweaks output{text-align:right;font-variant-numeric:tabular-nums}.playground-hint{font-size:13px}.app{flex-direction:column;min-height:100vh;display:flex}.app main{flex:1;width:100%}.site-footer{border-top:1px solid var(--border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;width:100%;max-width:1280px;margin:0 auto;padding:24px 16px 32px;font-size:14px;display:flex}.site-footer nav{gap:20px;display:flex}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--text)}.home{flex-direction:column;gap:88px;padding-bottom:48px;display:flex}.eyebrow{letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 8px;font-family:ui-monospace,JetBrains Mono,Menlo,monospace;font-size:12px;font-weight:600}.lead{font-size:18px;line-height:1.6}.notice{border:1px solid var(--accent);background:var(--surface);border-radius:10px;margin:0;padding:12px 16px}.section-head{max-width:640px;margin-bottom:28px}.section-head h2,.open-source h2{letter-spacing:-.02em;margin:0;font-size:clamp(26px,3.2vw,34px);line-height:1.2}.section-head .lead{margin:10px 0 0}.hero{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);align-items:center;gap:48px;padding:40px 0 8px;display:grid;position:relative}.hero:before{content:"";z-index:-1;background-image:linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px);opacity:.45;background-size:32px 32px;position:absolute;inset:-24px -16px -40px;-webkit-mask-image:radial-gradient(70% 70% at 60% 45%,#000 20%,#0000 75%);mask-image:radial-gradient(70% 70% at 60% 45%,#000 20%,#0000 75%)}.hero h1{letter-spacing:-.035em;margin:0;font-size:clamp(36px,5vw,56px);font-weight:800;line-height:1.05}.hero h1 em{color:var(--accent);font-style:normal}.hero .lead{color:var(--muted);max-width:540px;margin:20px 0 28px}.hero-cta{flex-wrap:wrap;gap:12px;display:flex}.hero-cta .button{padding:10px 20px;font-size:16px}.hero-points{flex-wrap:wrap;gap:8px 20px;margin:24px 0 0;padding:0;font-size:14px;list-style:none;display:flex}.hero-points li:before{content:"✓ ";color:var(--ok);font-weight:700}.hero-demo .playground{margin:0;box-shadow:0 24px 60px -24px #00000073}.hero-demo-caption{margin:10px 4px 0;font-size:13px}.playground-hero .playground-main{grid-template-columns:1fr}@media (width<=900px){.hero{grid-template-columns:1fr;gap:32px;padding-top:16px}}.continue{border:1px solid var(--border);background:var(--surface);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:28px;display:flex}.continue h1{letter-spacing:-.02em;margin:0 0 4px;font-size:clamp(24px,3vw,32px)}.continue .button{margin-top:12px}.continue-stats,.course-stats{gap:28px;margin:0;display:flex}.continue-stats dt,.course-stats dt{color:var(--muted);text-transform:uppercase;letter-spacing:.08em;font-size:12px}.continue-stats dd,.course-stats dd{font-variant-numeric:tabular-nums;margin:0;font-size:22px;font-weight:700}.steps{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.steps li,.roadmap li{border:1px solid var(--border);background:var(--surface);border-radius:12px;padding:20px}.steps h3,.roadmap h3{margin:8px 0 6px;font-size:18px}.steps p,.roadmap p{margin:0;font-size:15px}.step-num,.chapter-num{color:var(--accent);font-family:ui-monospace,JetBrains Mono,Menlo,monospace;font-weight:700}.course-list{flex-direction:column;gap:24px;display:flex}.course-card{border:1px solid var(--border);background:var(--surface);border-radius:14px;padding:24px}.course-card-head{flex-wrap:wrap;justify-content:space-between;gap:16px 32px;display:flex}.course-card-head h3{margin:0 0 4px;font-size:22px}.course-card-head p{max-width:620px;margin:0}.progress{align-items:center;gap:12px;margin-top:16px;font-size:14px;display:flex}.progress-bar{background:var(--code-bg);border:1px solid var(--border);border-radius:999px;flex:1;height:8px;overflow:hidden}.progress-bar span{background:var(--accent);height:100%;display:block}.chapters{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px 32px;margin-top:20px;display:grid}.chapter h4{gap:10px;margin:8px 0;font-size:16px;display:flex}.lesson-list{margin:0;padding:0;list-style:none}.lesson-list a{color:var(--text);border-radius:8px;align-items:center;gap:10px;margin:0 -10px;padding:8px 10px;text-decoration:none;display:flex}.lesson-list a:hover{background:var(--code-bg)}.lesson-title{flex:1}.lesson-meta{align-items:center;gap:8px;font-size:13px;display:flex}.lesson-meta .badge{margin:0}.lesson-list .done .lesson-title{color:var(--muted)}.check{color:var(--ok);font-weight:800}.billing-toggle{border:1px solid var(--border);background:var(--surface);border-radius:999px;gap:4px;min-inline-size:0;margin-bottom:20px;padding:4px;display:inline-flex}.billing-toggle button{background:0 0;border:none;border-radius:999px;font-size:14px}.billing-toggle button.active{background:var(--code-bg);font-weight:600}.save{color:var(--ok);margin-left:4px;font-size:12px;font-weight:600}.plans{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;max-width:820px;display:grid}.plan{border:1px solid var(--border);background:var(--surface);border-radius:14px;flex-direction:column;padding:28px;display:flex}.plan-pro{border:2px solid var(--accent);box-shadow:0 20px 50px -30px var(--accent)}.plan h3{margin:0;font-size:18px}.price{letter-spacing:-.03em;margin:8px 0 16px;font-size:40px;font-weight:800}.price .muted{letter-spacing:0;font-size:16px;font-weight:500}.plan ul{flex:1;margin:0 0 24px;padding:0;list-style:none}.plan li{padding:6px 0}.plan li:before{content:"✓";color:var(--ok);margin-right:10px;font-weight:700}.plan .button,.plan button{text-align:center;padding:10px 16px}.roadmap{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin:0;padding:0;list-style:none;display:grid}.roadmap li{border-style:dashed}.roadmap-status{border:1px solid var(--border);color:var(--muted);border-radius:999px;padding:2px 8px;font-size:12px;font-weight:600}.open-source{border:1px solid var(--border);background:var(--surface);border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px;padding:32px;display:flex}.open-source>div{max-width:620px}.open-source p:last-child{margin-bottom:0}.faq{border-top:1px solid var(--border);max-width:760px}.faq details{border-bottom:1px solid var(--border);padding:4px 0}.faq summary{cursor:pointer;justify-content:space-between;gap:16px;padding:14px 0;font-weight:600;list-style:none;display:flex}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--accent);font-weight:700}.faq details[open] summary:after{content:"−"}.faq details p{margin:0 0 16px}.lesson-shell{grid-template-columns:minmax(0,1fr);grid-template-areas:"bar""main";gap:16px 28px;display:grid}.lesson-bar{grid-area:bar;align-items:center;gap:12px;min-width:0;display:flex}.outline-toggle{flex:none;font-size:14px}.breadcrumb{min-width:0;color:var(--muted);flex-wrap:wrap;gap:6px;font-size:14px;display:flex}.breadcrumb a{text-decoration:none}.lesson-main{grid-area:main;min-width:0;container-type:inline-size}.prev-next{grid-template-columns:1fr 1fr;gap:12px;margin-top:40px;display:grid}.prev-next a{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:10px;flex-direction:column;padding:10px 14px;font-weight:600;text-decoration:none;display:flex}.prev-next a:hover{border-color:var(--accent)}.prev-next .muted{font-size:13px;font-weight:400}.prev-next .next{text-align:right;grid-column:2}.course-outline{border:1px solid var(--border);background:var(--surface);border-radius:12px;grid-area:outline;align-self:start;max-height:calc(100vh - 32px);padding:14px 10px;position:sticky;top:16px;overflow-y:auto}.course-outline[hidden]{display:none}.course-outline header{flex-direction:column;padding:0 8px 8px;font-size:15px;display:flex}.course-outline header .muted{font-size:13px}.course-outline h4{gap:8px;margin:12px 8px 4px;font-size:13px;display:flex}.course-outline ol{margin:0;padding:0;list-style:none}.course-outline li a{color:var(--text);border-radius:6px;align-items:center;gap:8px;padding:5px 8px;font-size:14px;line-height:1.35;text-decoration:none;display:flex}.course-outline li a:hover{background:var(--code-bg)}.course-outline li a[aria-current=page]{background:color-mix(in srgb, var(--accent) 16%, transparent);font-weight:600}.course-outline li.done .lesson-title{color:var(--muted)}.course-outline .check,.course-outline .badge{margin-left:auto}.outline-backdrop{display:none}@media (width>=1024px){.lesson-shell.outline-open{grid-template-columns:270px minmax(0,1fr);grid-template-areas:"bar bar""outline main"}}@media (width<=1023px){.course-outline{z-index:20;border-radius:0 12px 12px 0;width:min(320px,85vw);max-height:none;position:fixed;inset:0 auto 0 0;box-shadow:0 0 40px #00000040}.outline-open .outline-backdrop{z-index:19;background:#0006;border:none;border-radius:0;padding:0;display:block;position:fixed;inset:0}}@media (width<=600px){.outline-toggle-label{display:none}}@container (width<=860px){.lesson-code,.lesson-sim{grid-template-columns:minmax(0,1fr)}}.skeleton{background:var(--border);border-radius:6px;animation:1.4s ease-in-out infinite skeleton-pulse}.skeleton-title{width:50%;height:30px;margin-bottom:18px}.skeleton-line{height:14px;margin-bottom:10px}.skeleton-block{height:180px;margin-top:20px}.skeleton-row{height:34px;margin-top:8px}.skeleton-lesson{max-width:760px}@keyframes skeleton-pulse{50%{opacity:.45}}@media (prefers-reduced-motion:reduce){.skeleton{animation:none}}.not-found{text-align:center;max-width:480px;margin:64px auto}.button.small{padding:3px 10px;font-size:14px}.guest-nudge{border:1px dashed var(--border);color:var(--muted);border-radius:10px;margin:0;padding:10px 14px;font-size:14px}.paywall-features{margin:0;padding-left:20px}.paywall .billing-toggle{align-self:flex-start}