:root{color:#17324d;font-synthesis:none;text-rendering:optimizelegibility;--navy:#17324d;--navy-deep:#102439;--paper:#f3f0e8;--paper-bright:#fbfaf6;--orange:#e5663a;--sea:#73a6a2;--line:#c9c6bc;--muted:#64717c;background:#f3f0e8;font-family:-apple-system,BlinkMacSystemFont,Hiragino Sans,PingFang SC,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#app{height:100%;margin:0}body{min-width:320px}.seo-fallback{max-width:760px;margin:0 auto;padding:48px 24px;line-height:1.7}.seo-fallback nav{flex-wrap:wrap;gap:16px;display:flex}.seo-fallback a{color:#166b74}button,select,textarea{font:inherit}button,select{color:inherit}button{cursor:pointer}button:focus-visible,select:focus-visible,textarea:focus-visible,.cm-editor.cm-focused{outline-offset:2px;outline:3px solid #e5663a80}.app-shell{flex-direction:column;height:100dvh;display:flex;overflow:hidden}.topbar{border-bottom:1px solid var(--line);background:var(--paper-bright);flex:0 0 58px;justify-content:space-between;align-items:center;min-height:58px;padding:0 20px;display:flex}.brand{color:var(--navy);align-items:center;gap:10px;font-weight:700;text-decoration:none;display:flex}.brand-version{color:var(--muted);margin-left:-3px;font:500 10px IBM Plex Mono,ui-monospace,monospace}.brand-mark{width:30px;height:30px;display:block}.topbar-actions{align-items:center;gap:10px;display:flex}.sync-note{color:var(--muted);font-size:12px}select,.quiet-button{border:1px solid var(--line);background:0 0;border-radius:4px;padding:7px 10px;font-size:13px}.quiet-button:hover,select:hover{border-color:var(--navy)}.mobile-config-button{display:none}.view-controls{border:1px solid var(--line);border-radius:4px;align-items:center;gap:2px;padding:2px;display:flex}.view-button{color:var(--muted);background:0 0;border:0;border-radius:2px;align-items:center;gap:6px;padding:5px 8px;font-size:12px;display:flex}.view-button:hover{color:var(--navy);background:#ece9e1}.view-button.active{color:var(--navy);background:#e3dfd5}.view-icon{border:1px solid;width:13px;height:11px}.nav-icon{box-shadow:inset 4px 0}.lesson-icon{background:linear-gradient(90deg,#0000 32%,currentColor 32% 39%,#0000 39%)}.update-banner{color:#fff;background:var(--orange);text-align:center;padding:8px 20px;font-size:13px}.update-banner button{color:#fff;background:0 0;border:0;border-bottom:1px solid;margin-left:8px}.site-footer{border-top:1px solid var(--line);color:var(--muted);background:var(--paper-bright);white-space:nowrap;flex:0 0 30px;align-items:center;gap:14px;padding:0 20px;font-size:11px;display:flex}.site-footer a{color:var(--navy);text-underline-offset:2px}.footer-source{margin-left:auto}.workspace{flex:auto;grid-template-columns:250px minmax(0,1fr);min-height:0;display:grid;overflow:hidden}.workspace.nav-hidden{grid-template-columns:minmax(0,1fr)}.navigation-shell{display:contents}.course-map{border-right:1px solid var(--line);background:#e9e5db;min-height:0;padding:22px 14px;overflow-y:auto}.course-map-heading{justify-content:space-between;align-items:baseline;padding:0 8px;display:flex}.course-map-heading h1{margin:0;font-size:16px}.course-map-heading span{color:var(--muted);font:500 12px IBM Plex Mono,monospace}.progress-track{background:#d4d0c6;height:3px;margin:12px 8px 18px}.progress-track span{background:var(--orange);height:100%;transition:width .18s ease-out;display:block}.course-map nav{gap:3px;display:grid}.course-map nav button{text-align:left;background:0 0;border:0;border-radius:3px;grid-template-columns:28px minmax(0,1fr) 8px;align-items:center;gap:8px;min-width:0;padding:9px 8px;display:grid}.course-map nav button:hover{background:#17324d0f}.course-map nav button.active{color:#fff;background:var(--navy)}.chapter-index{color:var(--muted);font:500 11px IBM Plex Mono,monospace}.active .chapter-index{color:#b7c8d5}.completion-dot{border:1px solid #969d9f;border-radius:50%;width:7px;height:7px}.done .completion-dot{border-color:var(--sea);background:var(--sea)}.learning-area{grid-template-columns:minmax(320px,.88fr) minmax(420px,1.12fr);min-width:0;min-height:0;display:grid;overflow:hidden}.learning-area.lesson-hidden{grid-template-columns:minmax(0,1fr)}.lesson-pane,.practice-pane{min-width:0;height:100%;min-height:0}.lesson-pane{overscroll-behavior:contain;background:var(--paper-bright);overflow-y:auto}.practice-pane{background:var(--navy-deep);flex-direction:column;display:flex;overflow:hidden}.pane-heading{z-index:2;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#fbfaf6f0;justify-content:space-between;align-items:center;min-height:48px;padding:0 22px;font-size:13px;font-weight:600;display:flex;position:sticky;top:0}.practice-heading{color:#dce6ed;background:var(--navy-deep);border-color:#31516b;position:relative}.practice-heading>div{color:#96a9b8;align-items:center;gap:7px;font-size:11px;font-weight:400;display:flex}.practice-title>span:first-child{color:#dce6ed;font-size:13px;font-weight:600}.buffer-state{color:#86a2b5;border-left:1px solid #31516b;padding-left:8px}.buffer-state.modified{color:#83c5bd}.practice-actions{white-space:nowrap}kbd{color:#dce6ed;border:1px solid #557087;border-radius:3px;padding:2px 5px;font:500 10px IBM Plex Mono,monospace}.complete-button,.reset-button{background:0 0;border:0;font-size:12px}.complete-button{color:var(--orange)}.complete-button.completed{color:#518c86}.reset-button{color:#dce6ed;text-underline-offset:3px;margin-left:10px;text-decoration:underline}.lesson-step{color:#dce6ed;background:0 0;border:1px solid #45647c;border-radius:3px;width:26px;height:24px;line-height:1}.lesson-step:hover:not(:disabled){background:#73a6a21f;border-color:#8fb9b5}.lesson-step:disabled{cursor:not-allowed;opacity:.35}.lesson-copy{color:#233b4f;max-width:760px;padding:28px clamp(24px,4vw,54px) 80px;font-size:15px;line-height:1.8}.lesson-copy h1{color:var(--navy);letter-spacing:-.03em;margin:0 0 28px;font-size:clamp(25px,2.4vw,38px);line-height:1.18}.lesson-copy h2{border-top:1px solid var(--line);margin:42px 0 12px;padding-top:8px;font-size:20px}.lesson-copy h3{margin-top:28px;font-size:16px}.lesson-copy p,.lesson-copy ul,.lesson-copy ol{max-width:72ch}.lesson-copy blockquote{border-left:4px solid var(--orange);background:#f0e7dc;margin:22px 0;padding:12px 18px}.lesson-copy blockquote p{margin:0}.lesson-copy code{color:#9f3e20;font:500 .9em IBM Plex Mono,monospace}.lesson-copy pre{color:#e5edf2;background:var(--navy);padding:16px;overflow:auto}.lesson-copy pre code{color:inherit}.lesson-copy a{color:#166b74;text-underline-offset:3px}.state-message{color:var(--muted);padding:32px}.state-message.error{color:#a63726}.editor-host{flex:1;min-height:0;overflow:hidden}.editor-host .cm-editor{color:#dce6ed;background:var(--navy-deep);height:100%;font:14px/1.65 IBM Plex Mono,monospace}.editor-host .cm-scroller{overscroll-behavior:contain;overflow:auto}.editor-host .cm-gutters{color:#627c90;background:#132a40;border:0}.editor-host .cm-activeLine,.editor-host .cm-activeLineGutter{background:#73a6a217}.editor-host .cm-selectionBackground{background:#43637b!important}.editor-host .cm-content ::selection{background:#43637b!important}.editor-host .cm-cursor{border-left-color:var(--orange);border-left-width:2px}.editor-host .vim-no-hlsearch .cm-searchMatch,.editor-host .vim-no-hlsearch .cm-searchMatch-selected{background-color:#0000!important;outline:0!important}.editor-host .cm-vim-panel{color:#dce6ed;background:#0c1d2d;padding:5px 10px;font:12px IBM Plex Mono,monospace}.editor-host .cm-editor .cm-vim-panel input{min-width:0;color:inherit;caret-color:var(--orange);font:inherit;background:0 0;border:0;outline:0;flex:1;padding:0 4px}.editor-host .cm-editor .cm-vim-panel input::selection{color:#fff;background:#43637b}.config-backdrop{z-index:20;background:#0817239e;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.config-panel{border-top:5px solid var(--orange);background:var(--paper-bright);width:min(620px,100%);max-height:calc(100dvh - 40px);padding:22px;overflow-y:auto;box-shadow:0 20px 70px #0000003d}.config-heading{justify-content:space-between;align-items:center;display:flex}.config-heading h2{margin:0;font-size:20px}.config-heading button{background:0 0;border:0;font-size:25px}.config-panel p{color:var(--muted);font-size:13px}.config-panel textarea{resize:vertical;border:1px solid var(--line);color:#e7edf2;background:var(--navy-deep);width:100%;min-height:220px;padding:14px;font:13px/1.65 IBM Plex Mono,monospace}.config-warnings{color:#a63726;max-height:100px;font-size:12px;overflow:auto}.apply-button{color:#fff;background:var(--orange);border:0;margin-top:14px;padding:9px 16px;font-weight:600}.data-tools{border-top:1px solid var(--line);justify-content:space-between;align-items:flex-end;gap:24px;margin-top:22px;padding-top:18px;display:flex}.data-tools h3{margin:0;font-size:14px}.data-tools p{max-width:38ch;margin:5px 0 0}.data-actions{flex:none;gap:8px;display:flex}.data-actions button{border:1px solid var(--line);background:0 0;border-radius:3px;padding:7px 10px;font-size:12px}.data-actions button:hover{border-color:var(--navy)}.data-error{color:#a63726!important}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.mobile-tabs{display:none}@media (width<=1050px){.workspace{grid-template-columns:210px minmax(0,1fr)}.workspace.nav-hidden{grid-template-columns:minmax(0,1fr)}.learning-area{grid-template-columns:minmax(300px,.8fr) minmax(380px,1.2fr)}.learning-area.lesson-hidden{grid-template-columns:minmax(0,1fr)}.view-button{gap:0;font-size:0}}@media (width<=720px){.topbar{flex-basis:46px;min-height:46px;padding:0 8px}.sync-note,.quiet-button,.brand-version{display:none}.brand{white-space:nowrap;gap:7px;font-size:15px}.brand-mark{width:26px;height:26px;font-size:15px}.mobile-config-button{border:1px solid var(--line);background:0 0;border-radius:4px;place-items:center;width:30px;height:30px;padding:0;font-size:14px;display:grid}.mobile-config-button:hover{border-color:var(--navy)}.topbar-actions{gap:4px;min-width:0}.view-controls{display:none}.view-button{justify-content:center;width:27px;height:26px;padding:0}.topbar select{width:86px;height:30px;padding:3px 6px;font-size:12px}.workspace,.workspace.nav-hidden{flex-direction:column;display:flex}.navigation-shell{border-bottom:1px solid var(--line);background:#e9e5db;flex:0 0 32px;min-width:0;display:flex}.course-map{border:0;flex:auto;padding:0 6px;overflow-x:auto}.course-map-heading,.progress-track{display:none}.course-map nav{width:max-content;display:flex}.course-map nav button{text-align:center;width:40px;height:32px;padding:0 4px;display:block}.course-map nav button>span:nth-child(2),.completion-dot{display:none}.chapter-index{font-size:11px}.learning-area,.learning-area.lesson-hidden{flex:1;min-height:0;display:block}.mobile-tabs{border-left:1px solid var(--line);background:var(--paper);flex:none;grid-template-columns:34px 34px;height:32px;display:grid}.mobile-tabs button{background:0 0;border:0;border-bottom:2px solid #0000;place-items:center;padding:0;display:grid}.mobile-tabs button+button{border-left:1px solid var(--line)}.mobile-tabs button.active{border-bottom-color:var(--orange);background:var(--paper-bright)}.mobile-tab-icon{width:14px;height:12px;color:var(--navy);display:block}.read-tab-icon{border:1px solid;border-radius:1px;position:relative}.read-tab-icon:after{content:"";border-left:1px solid;position:absolute;inset:0 auto 0 50%}.practice-tab-icon{letter-spacing:-2px;font:600 11px/12px IBM Plex Mono,monospace}.lesson-pane,.practice-pane{height:100%;min-height:0}.mobile-tabs.single{grid-template-columns:34px}.site-footer{flex-basis:28px;justify-content:space-between;padding:0 12px}.footer-source,.buffer-state,.practice-actions>span:first-child{display:none}.pane-heading{min-height:42px;padding:0 12px}.practice-heading{padding:0 12px}.reset-button{margin-left:2px}.data-tools{flex-direction:column;align-items:stretch;gap:12px}.data-actions button{flex:1}.mobile-hidden{display:none}.lesson-copy{padding:24px 20px 70px}}@media (width<=360px){.brand{font-size:14px}.topbar select{width:72px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important}}