: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}.github-link{border:1px solid var(--line);width:30px;height:30px;color:var(--navy);border-radius:4px;flex:none;place-items:center;text-decoration:none;display:grid}.github-link:hover{border-color:var(--navy)}.github-link:focus-visible{outline-offset:3px;border-radius:2px;outline:3px solid #e5663a80}.github-icon{width:16px;height:16px;display:block}select,.quiet-button{border:1px solid var(--line);background:0 0;border-radius:4px;height:30px;padding:0 10px;font-size:13px}select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='m5 7 5 5 5-5' fill='none' stroke='%2317324d' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:12px 12px;padding-right:34px}.quiet-button:hover,select:hover{border-color:var(--navy)}.view-controls{border:1px solid var(--line);border-radius:4px;align-items:center;gap:2px;height:30px;padding:2px;display:flex}.view-button{height:24px;color:var(--muted);background:0 0;border:0;border-radius:2px;align-items:center;gap:6px;padding:0 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%)}.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:minmax(0,1fr) 8px;align-items:center;gap:8px;min-width:0;padding:9px 8px;font-size:14px;line-height:1.4;display:grid}.course-map nav button:hover{background:#17324d0f}.course-map nav button.active{color:#fff;background:var(--navy)}.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{border:1px solid #6f8798;border-radius:50%;width:7px;height:7px}.buffer-state.modified{background:#83c5bd;border-color:#83c5bd}.practice-actions{white-space:nowrap}.complete-button{color:var(--orange);background:0 0;border:0;font-size:12px}.complete-button.completed{color:#518c86}.editor-position{color:#96a9b8;text-align:right;min-width:34px;font:500 11px IBM Plex Mono,monospace}.lesson-step,.practice-icon-button{color:#dce6ed;background:0 0;border:1px solid #45647c;border-radius:3px;place-items:center;width:26px;height:26px;padding:0;display:grid}.lesson-step svg,.practice-icon-button svg,.toast-icon{fill:none;stroke:currentColor;stroke-width:1.7px;stroke-linecap:round;stroke-linejoin:round;width:15px;height:15px}.lesson-step:hover:not(:disabled){background:#73a6a21f;border-color:#8fb9b5}.lesson-step:disabled{cursor:not-allowed;opacity:.35}.apply-file-config{background:#73a6a21f;border-color:#73a6a2}.apply-file-config:hover{background:#73a6a23d}.reset-button:hover{background:#73a6a21f;border-color:#8fb9b5}.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}.local-vim-note{border-left:3px solid var(--sea);color:#40596b;background:#edf3ef;max-width:760px;margin:20px clamp(24px,4vw,54px) -8px;padding:10px 12px;font-size:13px;line-height:1.55}.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}.buffer-tabs{scrollbar-width:thin;background:#132a40;border-bottom:1px solid #31516b;flex:0 0 30px;display:flex;overflow-x:auto}.buffer-tabs button{color:#8ea5b5;background:0 0;border-top:0;border-bottom:2px solid #0000;border-left:0;border-right:1px solid #31516b;flex:none;padding:0 12px;font:500 11px IBM Plex Mono,monospace}.buffer-tabs button:hover{color:#dce6ed;background:#73a6a214}.buffer-tabs button.active{border-bottom-color:var(--orange);color:#f2f6f8;background:var(--navy-deep)}.toast-region{z-index:40;pointer-events:none;gap:8px;width:min(360px,100vw - 32px);display:grid;position:fixed;bottom:44px;right:18px}.app-toast{color:#e9f1f5;pointer-events:auto;background:#132a40;border:1px solid #45647c;border-left:4px solid #73a6a2;grid-template-columns:18px minmax(0,1fr) auto;align-items:center;gap:9px;padding:10px 12px;font-size:12px;display:grid;box-shadow:0 10px 34px #040e1747}.app-toast.toast-success{border-left-color:#73a6a2}.app-toast.toast-error{border-left-color:var(--orange)}.app-toast button{color:#f3c776;background:0 0;border:0;border-bottom:1px solid;padding:3px 0;font-size:12px}.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-heading>div>span{color:var(--muted);margin-bottom:3px;font-size:11px;display:block}.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}.config-actions{align-items:center;gap:10px;margin-top:14px;display:flex}.apply-button{color:#fff;background:var(--orange);border:0;padding:9px 16px;font-size:13px;font-weight:600}.reset-config-button{border:1px solid var(--line);color:var(--navy);background:0 0;border-radius:3px;padding:8px 12px;font-size:13px;font-weight:600}.reset-config-button:hover{border-color:var(--navy)}.config-panel .reset-config-help{margin:7px 0 0;font-size:11px}.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}.file-preview-panel{border-top:5px solid var(--orange);background:var(--paper-bright);width:min(680px,100%);max-height:calc(100dvh - 40px);overflow:hidden;box-shadow:0 20px 70px #0000003d}.file-preview-panel .config-heading{border-bottom:1px solid var(--line);padding:16px 18px}.file-preview-panel pre{color:#dce6ed;background:var(--navy-deep);white-space:pre;max-height:calc(100dvh - 140px);margin:0;padding:18px;font:12px/1.65 IBM Plex Mono,monospace;overflow:auto}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.pane-tabs{display:none}.workspace.tablet-layout .learning-area,.workspace.tablet-layout .learning-area.lesson-hidden{flex-direction:column;grid-template-columns:none;display:flex}.workspace.tablet-layout .pane-tabs{border-bottom:1px solid var(--line);background:var(--paper);flex:0 0 38px;grid-template-columns:1fr 1fr;display:grid}.pane-tabs button{color:var(--muted);background:0 0;border:0;border-bottom:2px solid #0000;justify-content:center;align-items:center;gap:8px;padding:0 16px;font-size:13px;font-weight:600;display:flex}.pane-tabs button+button{border-left:1px solid var(--line)}.pane-tabs button.active{border-bottom-color:var(--orange);color:var(--navy);background:var(--paper-bright)}.pane-tab-icon{color:currentColor;width:14px;height:12px;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}.workspace.tablet-layout .lesson-pane,.workspace.tablet-layout .practice-pane{flex:auto;height:auto}.workspace.tablet-layout .course-map-heading h1{font-size:14px}.workspace.tablet-layout .course-map-heading span{font-size:10px}.workspace.tablet-layout .course-map nav button{grid-template-columns:minmax(0,1fr) 7px;gap:6px;padding:7px 6px;font-size:13px;line-height:1.35}.workspace.tablet-layout .completion-dot{width:6px;height:6px}.pane-hidden{display:none!important}@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}.topbar-actions{gap:4px;min-width:0}.view-button{justify-content:center;width:27px;height:26px;padding:0}.topbar select{background-position:right 10px center;width:86px;padding:0 30px 0 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{white-space:nowrap;width:auto;height:32px;padding:0 10px;font-size:11px;display:block}.completion-dot{display:none}.learning-area,.learning-area.lesson-hidden{flex:1;min-height:0;display:block}.lesson-pane{height:100%;min-height:0}.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}.toast-region{width:calc(100vw - 24px);bottom:40px;right:12px}.data-tools{flex-direction:column;align-items:stretch;gap:12px}.data-actions button{flex:1}.lesson-copy{padding:24px 20px 70px}.local-vim-note{margin:16px 20px -4px}}@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}}