@import "https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700&family=Newsreader:opsz,wght@6..72,500;6..72,600&display=swap";:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;color:#20251f;font-synthesis:none;text-rendering:optimizelegibility;--ink:#20251f;--muted:#6b7068;--paper:#fbfaf6;--line:#deddd5;--moss:#315d46;--moss-soft:#e2ebe3;--amber:#d48d3b;--code:#171d1a;--code-line:#27302b;background:#f4f3ee;font-family:Manrope,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth}body{background:var(--paper);min-width:320px;min-height:100vh;margin:0}button,textarea{font:inherit}button{color:inherit}button:focus-visible,textarea:focus-visible{outline-offset:2px;outline:3px solid #d48d3b80}.app-shell{min-height:100vh}.lesson-nav{z-index:30;background:#eef0ea;border-right:1px solid #d9dcd3;flex-direction:column;width:272px;display:flex;position:fixed;inset:0 auto 0 0}.nav-brand{border-bottom:1px solid #d9dcd3;align-items:center;gap:11px;height:78px;padding:0 20px;display:flex}.brand-mark{background:var(--moss);color:#f4f1e6;border-radius:10px;justify-content:center;align-items:center;gap:2px;width:42px;height:42px;font-family:DM Mono,monospace;display:flex;box-shadow:inset 0 0 0 1px #ffffff1f}.brand-mark span{opacity:.65;font-size:12px}.brand-mark b{font-size:19px}.nav-brand>div:nth-child(2){flex-direction:column;gap:2px;display:flex}.nav-brand strong{letter-spacing:-.2px;font-family:Newsreader,serif;font-size:19px}.nav-brand span{color:var(--muted);text-transform:uppercase;letter-spacing:1.2px;font-size:10px}.close-nav{margin-left:auto;display:none!important}.progress-card{background:#ffffff8c;border:1px solid #d9dcd3;border-radius:10px;margin:18px 17px 8px;padding:15px}.progress-label{color:var(--muted);text-transform:uppercase;letter-spacing:.7px;justify-content:space-between;align-items:center;font-size:11px;display:flex}.progress-label strong{color:var(--moss);font-size:12px}.progress-track{background:#d6dbd2;border-radius:20px;height:5px;margin:10px 0 8px;overflow:hidden}.progress-track span{border-radius:inherit;background:var(--moss);height:100%;transition:width .35s;display:block}.progress-card p{color:#7c817a;margin:0;font-size:11px}.curriculum{scrollbar-width:thin;padding:4px 10px 18px;overflow-y:auto}.module-group{margin-top:15px}.module-group h2{color:#899087;letter-spacing:1.35px;text-transform:uppercase;margin:0 10px 7px;font-size:9px;font-weight:700}.lesson-link{text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;grid-template-columns:25px 1fr auto;align-items:center;gap:8px;width:100%;min-height:50px;padding:7px 9px;display:grid}.lesson-link:hover{background:#ffffff9e}.lesson-link.is-active{color:var(--moss);background:#fff;box-shadow:0 1px 4px #1d2a210f}.lesson-status{color:#7a8078;border:1px solid #c9cec5;border-radius:50%;place-items:center;width:23px;height:23px;font-family:DM Mono,monospace;font-size:9px;display:grid}.lesson-status.is-complete{border-color:var(--moss);background:var(--moss);color:#fff}.lesson-link-copy{flex-direction:column;gap:2px;min-width:0;display:flex}.lesson-link-copy strong{text-overflow:ellipsis;white-space:nowrap;font-size:11px;font-weight:600;overflow:hidden}.lesson-link-copy small{color:#91958f;font-size:9px}.soft-lock{color:#b8bcb5}.nav-footer{color:#7d827a;border-top:1px solid #d9dcd3;align-items:center;gap:8px;margin-top:auto;padding:16px 20px;font-size:10px;display:flex}.status-dot{background:#5c956d;border-radius:50%;width:7px;height:7px;box-shadow:0 0 0 3px #d9e5db}.workspace{min-height:100vh;margin-left:272px}.topbar{z-index:20;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#fbfaf6eb;justify-content:space-between;align-items:center;height:62px;padding:0 28px;display:flex;position:sticky;top:0}.breadcrumbs{color:#8a8d87;align-items:center;gap:7px;font-size:10px;display:flex}.breadcrumbs strong{color:#535950;font-weight:600}.breadcrumbs svg{color:#b7bab4}.top-actions{align-items:center;gap:8px;display:flex}.icon-button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;place-items:center;width:34px;height:34px;padding:0;display:inline-grid}.icon-button:hover{background:#f4f4ef}.mobile-menu{display:none}.complete-button,.ghost-button,.hint-button{border:1px solid var(--line);cursor:pointer;background:#fff;border-radius:7px;align-items:center;gap:7px;font-size:10px;font-weight:600;display:inline-flex}.complete-button{height:34px;padding:0 12px}.complete-button:hover,.complete-button.is-complete{color:var(--moss);background:var(--moss-soft);border-color:#b8cabd}.workspace-grid{grid-template-columns:minmax(500px,760px) minmax(280px,360px);justify-content:center;gap:44px;padding:50px 42px 72px;display:grid}.lesson-column{min-width:0}.lesson-hero{margin-bottom:32px}.lesson-meta-row{color:#898d86;text-transform:uppercase;letter-spacing:.65px;justify-content:space-between;align-items:center;font-size:10px;display:flex}.lesson-meta-row .eyebrow{color:var(--amber);font-weight:700}.lesson-hero h1{letter-spacing:-1.5px;margin:15px 0 10px;font-family:Newsreader,serif;font-size:clamp(38px,4vw,52px);font-weight:600;line-height:.98}.lesson-hero>p{color:#676c65;max-width:610px;margin:0;font-family:Newsreader,serif;font-size:18px;line-height:1.5}.lesson-rule{background:var(--line);height:1px;margin-top:28px}.lesson-rule span{background:var(--amber);width:52px;height:2px;display:block}.lesson-copy h2,.challenge-copy h2{margin:0 0 13px;font-family:Newsreader,serif;font-size:23px}.lesson-copy p{color:#50554f;margin:0 0 14px;font-size:13px;line-height:1.78}.concept-grid{border:1px solid var(--line);background:#f7f6f1;border-radius:10px;grid-template-columns:repeat(3,1fr);margin:27px 0;display:grid;overflow:hidden}.concept{border-right:1px solid var(--line);gap:10px;min-width:0;padding:17px;display:flex}.concept:last-child{border:0}.concept>span{color:#a1a59e;font-family:DM Mono,monospace;font-size:8px}.concept code{color:var(--moss);font-family:DM Mono,monospace;font-size:11px;font-weight:500}.concept p{color:#747870;margin:7px 0 0;font-size:10px;line-height:1.5}.challenge-card{border-left:3px solid var(--amber);background:#f5efe3;border-radius:0 10px 10px 0;gap:15px;margin:0 0 28px;padding:20px;display:flex}.challenge-icon{color:#9a642c;background:#e8d3af;border-radius:50%;flex:none;place-items:center;width:34px;height:34px;display:grid}.section-kicker{color:#a26c31;letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;font-size:8px;font-weight:700;display:block}.challenge-copy h2{margin-bottom:5px;font-size:18px}.challenge-copy>p{color:#676156;margin:0;font-size:11px;line-height:1.6}.hint-button{color:#866032;background:#ffffff80;border-color:#dfcba7;margin-top:11px;padding:6px 9px;font-size:9px}.hint-text{color:#625845;background:#ffffff8f;border-radius:6px;margin-top:10px;padding:10px;font-family:DM Mono,monospace;font-size:9px;line-height:1.55}.editor-card{background:var(--code);border:1px solid #2b332f;border-radius:10px;overflow:hidden;box-shadow:0 16px 40px #13181521}.panel-header{justify-content:space-between;align-items:center;height:42px;display:flex}.editor-header{color:#adb5af;border-bottom:1px solid #303833;padding:0 10px 0 14px}.file-tab{border-bottom:2px solid #6b9278;align-items:center;gap:8px;height:100%;font-family:DM Mono,monospace;font-size:10px;display:flex}.c-file-icon{color:#d8e3dc;background:#3a6a50;border-radius:3px;place-items:center;width:18px;height:18px;font-size:9px;font-weight:500;display:grid}.unsaved-dot{background:#b98047;border-radius:50%;width:5px;height:5px}.ghost-button{color:#89918b;background:0 0;border-color:#0000;padding:5px 8px;font-size:9px}.ghost-button:hover{color:#fff;background:#262e2a}.editor-shell{background:var(--code);grid-template-columns:48px 1fr;height:340px;display:grid}.line-numbers{border-right:1px solid var(--code-line);color:#59635d;text-align:right;-webkit-user-select:none;user-select:none;height:100%;margin:0;padding:17px 12px 17px 0;font:11px/1.75 DM Mono,monospace;overflow:hidden}.code-input{resize:none;color:#d6ddd8;caret-color:#e3a65d;tab-size:4;white-space:pre;background:0 0;border:0;outline:0;width:100%;height:100%;padding:17px;font:11px/1.75 DM Mono,monospace;overflow:auto}.editor-footer{color:#737d77;border-top:1px solid #303833;align-items:center;gap:14px;min-height:32px;padding:0 13px;font:8px DM Mono,monospace;display:flex}.shortcut-hint{align-items:center;gap:3px;margin-left:auto;display:flex}.editor-footer kbd,.keyboard-note kbd{color:#a9b2ac;background:#282f2b;border:1px solid #434d47;border-radius:3px;padding:2px 5px;box-shadow:0 1px #0f1311}.compact-run{display:none!important}.output-column{align-self:start;gap:16px;display:grid;position:sticky;top:92px}.output-card,.stdin-card{border:1px solid var(--line);background:#fff;border-radius:10px;overflow:hidden;box-shadow:0 8px 28px #20251f0d}.output-header{color:#aeb6b0;background:#252c28;border-bottom:1px solid #333b36;padding:0 14px}.terminal-title{align-items:center;gap:8px;font:10px DM Mono,monospace;display:flex}.run-status{color:#8e9891;text-transform:uppercase;letter-spacing:.6px;align-items:center;gap:5px;font-size:8px;display:flex}.run-status.ok{color:#79b58e}.run-status.failed{color:#e49b8c}.output-body{background:var(--code);min-height:190px;padding:15px}.empty-output{color:#606a64;text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:158px;display:flex}.empty-output svg{color:#536059;margin-bottom:10px}.empty-output strong{color:#909a94;font-size:10px}.empty-output span{color:#606a64;margin-top:5px;font-size:8px}.terminal-output{color:#d2dad5;white-space:pre-wrap;overflow-wrap:anywhere;margin:0;font:10px/1.6 DM Mono,monospace}.error-output{color:#f0a496}.success-output:before{content:"$ ./main\a ";white-space:pre;color:#5c9a70}.network-error{color:#e29a8b;gap:10px;display:flex}.network-error strong{font-size:10px}.network-error p{color:#a68c86;margin:5px 0 0;font-size:9px;line-height:1.5}.output-meta{color:#7b837e;background:#232a26;border-top:1px solid #303833;justify-content:space-between;align-items:center;height:29px;padding:0 12px;font:7px DM Mono,monospace;display:flex}.output-meta.is-error{color:#d48e80}.stdin-card{padding:16px}.side-card-heading{justify-content:space-between;align-items:start;display:flex}.side-card-heading h2{margin:0;font-family:Newsreader,serif;font-size:17px}.optional-label{color:#a0a49e;text-transform:uppercase;letter-spacing:.7px;font-size:8px}.stdin-card label{color:#888c85;margin:12px 0 6px;font-size:8px;display:block}.stdin-card textarea{resize:vertical;border:1px solid var(--line);color:#3e453f;background:#f7f7f3;border-radius:6px;width:100%;min-height:76px;padding:10px;font:10px/1.5 DM Mono,monospace}.run-button{color:#fff;background:var(--moss);cursor:pointer;border:0;border-radius:6px;justify-content:center;align-items:center;gap:8px;width:100%;min-height:39px;margin-top:10px;font-size:10px;font-weight:700;display:flex;box-shadow:0 3px 8px #315d4633}.run-button:hover:not(:disabled){background:#274f3a}.run-button:disabled{cursor:wait;opacity:.7}.play-icon{font-size:9px}.keyboard-note{color:#a3a7a1;justify-content:center;align-items:center;gap:4px;margin:10px 0 0;font-size:7px;display:flex}.keyboard-note kbd{color:#7b817c;background:#f5f5f1;border-color:#d9dcd5;box-shadow:0 1px #c8cbc5}.tip-card{background:#f6f1e7;border:1px solid #ded8cb;border-radius:9px;gap:10px;padding:14px;display:flex}.tip-glyph{color:#a87437;border:1px solid #cba771;border-radius:50%;flex:none;place-items:center;width:20px;height:20px;font-family:Newsreader,serif;font-size:12px;font-weight:600;display:grid}.tip-card strong{color:#655e51;font-size:9px}.tip-card p{color:#82796b;margin:4px 0 0;font-size:8px;line-height:1.55}.spin{animation:1s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.lesson-pagination{justify-content:space-between;gap:12px;margin-top:20px;display:flex}.lesson-pagination button{border:1px solid var(--line);cursor:pointer;text-align:left;background:#fff;border-radius:8px;align-items:center;gap:10px;min-width:170px;padding:10px 12px;display:flex}.lesson-pagination button:hover{background:#f6f7f3;border-color:#bfc8bd}.lesson-pagination span{flex-direction:column;display:flex}.lesson-pagination small{color:#9a9e98;text-transform:uppercase;letter-spacing:.5px;font-size:8px}.lesson-pagination strong{margin-top:2px;font-size:10px}.lesson-pagination .next-lesson{text-align:right;color:var(--moss);justify-content:flex-end;margin-left:auto}.nav-scrim{display:none}@media (width<=1050px){.workspace-grid{grid-template-columns:minmax(480px,700px) 290px;gap:24px;padding:38px 24px 60px}.concept-grid{grid-template-columns:1fr}.concept{border-right:0;border-bottom:1px solid var(--line)}}@media (width<=840px){.lesson-nav{transition:transform .25s;transform:translate(-100%);box-shadow:20px 0 50px #181d1924}.lesson-nav.is-open{transform:translate(0)}.close-nav{display:inline-grid!important}.nav-scrim{z-index:25;opacity:0;pointer-events:none;background:#161c1859;border:0;width:100%;transition:opacity .25s;position:fixed;inset:0}.nav-scrim.is-open{opacity:1;pointer-events:auto;display:block}.workspace{margin-left:0}.mobile-menu{display:inline-grid}.topbar{padding:0 18px}.breadcrumbs{margin-left:12px;margin-right:auto}.workspace-grid{grid-template-columns:1fr;max-width:760px;margin:auto;padding:34px 24px 60px}.output-column{grid-template-columns:1fr 1fr;position:static}.tip-card{grid-column:1/-1}.output-card,.stdin-card{min-width:0}}@media (width<=560px){.topbar{height:56px;padding:0 12px}.breadcrumbs span,.breadcrumbs svg{display:none}.breadcrumbs strong{font-size:9px}.top-actions>.icon-button{display:none}.complete-button{padding:0 9px;font-size:9px}.workspace-grid{padding:28px 16px 48px}.lesson-hero h1{font-size:39px}.lesson-hero>p{font-size:16px}.lesson-meta-row{font-size:8px}.lesson-copy p{font-size:12px}.concept-grid{margin:22px 0}.challenge-card{padding:16px}.editor-shell{grid-template-columns:38px 1fr;height:390px}.line-numbers{padding-right:8px}.code-input{padding:14px 12px;font-size:10px}.editor-footer{gap:8px}.shortcut-hint{display:none}.compact-run{width:auto;min-height:25px;margin:0 0 0 auto;padding:0 9px;font-size:8px;display:flex!important}.output-column{grid-template-columns:1fr}.tip-card{grid-column:auto}.output-body{min-height:170px}.lesson-pagination button{flex:1;min-width:0}.lesson-pagination strong{white-space:nowrap;text-overflow:ellipsis;max-width:110px;overflow:hidden}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}.workspace-grid{grid-template-columns:minmax(0,760px) minmax(260px,340px);gap:28px}.output-column,.editor-shell,.code-input{min-width:0}.icon-button{width:44px;height:44px}.complete-button,.ghost-button,.hint-button{min-height:40px;font-size:12px}.lesson-link-copy strong{white-space:normal;font-size:13px}.lesson-link-copy small,.module-group h2,.progress-card p,.nav-footer{color:#626a60;font-size:11px}.lesson-copy p{font-size:15px}.concept p,.challenge-copy>p,.hint-text{font-size:13px}.concept code{overflow-wrap:anywhere;font-size:12px}.code-input,.line-numbers{padding-top:17px;font-size:13px;line-height:1.75}.editor-footer{color:#b4bfb7;flex-wrap:wrap;gap:10px;padding:8px 12px;font-size:10px}.compact-run{width:auto;min-height:40px;margin:0 0 0 auto;padding:0 16px;font-size:12px;display:flex!important}.terminal-output{font-size:12px}.empty-output strong,.network-error strong{font-size:13px}.empty-output span,.network-error p,.tip-card p,.tip-card strong,.stdin-card label,.keyboard-note,.output-meta,.run-status{font-size:11px}.empty-output span{color:#a5b0a8}.stdin-card textarea{font-size:13px}.run-button{min-height:44px;font-size:13px}.lesson-pagination small{font-size:10px}.lesson-pagination strong{font-size:12px}#program-output{scroll-margin-top:80px}@media (width<=1150px) and (width>=841px){.workspace-grid{grid-template-columns:minmax(0,760px)}.output-column{grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:static}.tip-card{grid-column:1/-1}}@media (width<=840px){.workspace-grid{grid-template-columns:minmax(0,1fr)}.lesson-nav{visibility:hidden}.lesson-nav.is-open{visibility:visible}}@media (width<=560px){.breadcrumbs{display:none}.top-actions{margin-left:auto}.output-column{grid-template-columns:minmax(0,1fr)}.lesson-copy p{font-size:15px}.code-input,.line-numbers{padding-top:17px;font-size:13px}.lesson-meta-row{gap:12px;font-size:10px}.complete-button{font-size:12px}}
