:root{--font-ui:"Trebuchet MS", "Segoe UI", sans-serif;--font-code:"Courier New", Courier, monospace;--color-bg:#fff;--color-ink:#1a1a1a;--color-muted:#5a5a5a;--color-border:#1a1a1a;--color-terminal-bg:#0b0b0b;--color-terminal-text:#f2f2f2;--color-terminal-error:#ff8a80;--color-terminal-prompt:#7fd97f;--color-callout:#edb391;--color-callout-text:#2a1608;--color-drawer-bg:#fafafa;--color-accent:#b35a1f;--color-highlight-bg:#eee1d3;--color-divider:#ccc;--radius-md:8px;--shadow-sm:0 2px 8px #00000026}:root[data-theme=dark]{--color-bg:#16181c;--color-ink:#ececec;--color-muted:#a3a3a3;--color-border:#3a3d42;--color-terminal-bg:#000;--color-drawer-bg:#1d2024;--color-accent:#e08a44;--color-highlight-bg:#3a2f22;--color-divider:#3a3d42}*{box-sizing:border-box}html,body,#root{height:100%}body{font-family:var(--font-ui);color:var(--color-ink);background:var(--color-bg);margin:0}code,pre{font-family:var(--font-code)}button{cursor:pointer;font-family:inherit}.app-shell{flex-direction:column;min-height:100vh;display:flex}.app-header{border-bottom:2px solid var(--color-border);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.5rem;padding:.85rem 1.5rem;display:flex}.brand{align-items:center;gap:.75rem;display:flex}.brand-logo{object-fit:contain;border-radius:6px;flex-shrink:0;width:40px;height:40px}.brand h1{letter-spacing:.02em;margin:0;font-size:1.4rem}.brand p{color:var(--color-muted);margin:.15rem 0 0;font-size:.85rem}.progress-text{font-weight:700}.header-actions{gap:.6rem;display:flex}.ghost-button{color:var(--color-ink);border:1.5px solid var(--color-border);border-radius:var(--radius-md);background:0 0;padding:.4rem .9rem;font-size:.85rem}.ghost-button:hover{background:var(--color-accent);border-color:var(--color-accent);color:#fff}.app-main{flex:1;align-items:stretch;display:flex}.stage{flex:1;justify-content:center;align-items:center;min-width:0;padding:4rem 3rem;display:flex;position:relative}.terminal-wrap{width:min(640px,100%);position:relative}.terminal{z-index:5;background:var(--color-terminal-bg);border-radius:var(--radius-md);width:100%;box-shadow:var(--shadow-sm);flex-direction:column;display:flex;position:relative;overflow:hidden}.terminal-titlebar{background:#1c1c1c;align-items:center;gap:.4rem;padding:.5rem .75rem;display:flex}.terminal-dot{border-radius:50%;width:11px;height:11px;display:inline-block}.dot-red{background:#ff5f56}.dot-yellow{background:#ffbd2e}.dot-green{background:#27c93f}.terminal-titletext{color:#aaa;font-family:var(--font-code);margin-left:.6rem;font-size:.78rem}.terminal-body{font-family:var(--font-code);color:var(--color-terminal-text);white-space:pre-wrap;word-break:break-word;height:420px;padding:1rem 1.1rem;font-size:.92rem;line-height:1.5;overflow-y:auto}.term-line{min-height:1.4em}.term-error{color:var(--color-terminal-error)}.prompt{color:var(--color-terminal-prompt)}.term-instruction{color:#ffd27f;margin-top:.6rem;font-style:italic}.term-input-row{align-items:center;gap:.4rem;margin-top:.2rem;display:flex}.term-input{color:var(--color-terminal-text);font-family:var(--font-code);background:0 0;border:none;outline:none;flex:1;font-size:.92rem}.term-run-button{color:var(--color-terminal-text);font-family:var(--font-code);white-space:nowrap;background:#2a2a2a;border:1px solid #444;border-radius:4px;flex-shrink:0;padding:.2rem .6rem;font-size:.8rem}.term-run-button:hover:not(:disabled){background:#3a3a3a}.term-run-button:disabled{opacity:.5}.callout{z-index:10;background:var(--color-callout);width:260px;color:var(--color-callout-text);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);pointer-events:none;padding:1rem 1.1rem;font-size:.92rem;line-height:1.4;position:absolute}.callout-close{pointer-events:auto}.callout p{margin:.3rem 0 0}.callout-close{color:var(--color-callout-text);background:0 0;border:none;font-size:1.1rem;line-height:1;position:absolute;top:.3rem;right:.5rem}.callout-top-right{margin-bottom:1rem;bottom:100%;right:0}.callout-top-left{margin-bottom:1rem;bottom:100%;left:0}.callout-bottom-right{margin-top:1rem;top:100%;right:0}.callout-bottom-left{margin-top:1rem;top:100%;left:0}.drawer{border-left:2px solid var(--color-border);background:var(--color-drawer-bg);transition:width .2s;position:relative}.drawer-open{width:min(360px,34vw)}.drawer-closed{width:2.2rem}.drawer-toggle{border:2px solid var(--color-border);background:var(--color-bg);width:2.1rem;height:2.1rem;color:var(--color-ink);border-radius:50%;font-size:1rem;position:absolute;top:.75rem;left:-1.05rem}.drawer-inner{height:100%;padding:2.5rem 1.25rem 2rem;overflow-y:auto}.drawer h2{text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid var(--color-divider);margin:1.4rem 0 .6rem;padding-bottom:.3rem;font-size:1rem}.drawer h2:first-child{margin-top:0}.lesson-list{margin:0;padding:0;list-style:none}.lesson-link{text-align:left;width:100%;color:var(--color-ink);background:0 0;border:none;border-radius:6px;padding:.35rem .4rem;font-size:.88rem;display:block}.lesson-link.status-upcoming{color:#9a9a9a}.lesson-link.status-current{font-weight:700}.lesson-link.viewing,.lesson-link:hover{background:var(--color-highlight-bg)}.back-to-current{background:var(--color-accent);color:#fff;border-radius:var(--radius-md);border:none;margin-bottom:.6rem;padding:.4rem .7rem;font-size:.8rem}.lesson-intro{color:var(--color-muted);font-size:.9rem}.note-block{border-bottom:1px dashed var(--color-divider);margin-bottom:1rem;padding-bottom:.8rem}.note-instruction{font-family:var(--font-code);background:var(--color-highlight-bg);border-radius:4px;margin:0 0 .4rem;padding:.15rem .4rem;font-size:.82rem;display:inline-block}.note-block p{margin:.3rem 0;font-size:.88rem}.cheat-sheet{border-collapse:collapse;width:100%;font-size:.82rem}.cheat-sheet td{border-bottom:1px solid var(--color-divider);vertical-align:top;padding:.3rem}.cheat-command{font-family:var(--font-code);white-space:nowrap;color:var(--color-accent)}@media (width<=900px){.app-main{flex-direction:column}.stage{padding:2.5rem 1rem 6rem}.terminal-wrap{flex-direction:column;gap:1rem;display:flex}.callout{width:100%;font-size:.88rem;position:static}.drawer{border-left:none;border-top:2px solid var(--color-border)}.drawer-open{width:100%}.drawer-toggle{top:-1.05rem;left:1rem}}