:root{--bg:#1e1e1e;--bg-panel:#252526;--bg-input:#1a1a1a;--border:#3a3a3a;--text:#ccc;--text-dim:#6a6a6a;--text-mute:#888;--accent:#569cd6;--green:#4ec9b0;--orange:#ce9178;--yellow:#dcdcaa;--red:#f44747;--purple:#c586c0;--sidebar-w:230px;--panel-w:300px}*{box-sizing:border-box;margin:0;padding:0}html,body{background:var(--bg);height:100%;color:var(--text);font-family:JetBrains Mono,monospace;font-size:13px;overflow:hidden}.app{grid-template-rows:36px 1fr 22px;grid-template-columns:var(--sidebar-w) 1fr var(--panel-w);height:100vh;display:grid}.titlebar{color:var(--text-mute);user-select:none;background:#323233;border-bottom:1px solid #1a1a1a;grid-column:1/-1;justify-content:space-between;align-items:center;padding:0 16px;font-size:12px;display:flex}.titlebar-center{color:var(--text);align-items:center;gap:8px;font-size:12px;display:flex}.titlebar-right{color:var(--text-dim);align-items:center;gap:20px;font-size:11px;display:flex}.xp-bar-wrap{align-items:center;gap:6px;display:flex}.xp-bar{background:var(--border);border-radius:2px;width:80px;height:4px;overflow:hidden}.xp-fill{background:var(--accent);border-radius:2px;height:100%;transition:width .5s}.badge{background:var(--accent);color:#fff;border-radius:10px;padding:1px 6px;font-size:10px}.sidebar{background:var(--bg-panel);border-right:1px solid var(--border);flex-direction:column;grid-row:2;display:flex;overflow-y:auto}.sidebar-section{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);padding:16px 12px 4px;font-size:10px;font-weight:500}.lesson-item{cursor:pointer;color:var(--text-mute);border-left:2px solid #0000;align-items:center;gap:8px;padding:7px 12px 7px 16px;font-size:12px;line-height:1.4;transition:background .1s,color .1s;display:flex}.lesson-item:hover{color:var(--text);background:#ffffff0d}.lesson-item.active{border-left-color:var(--accent);color:var(--text);background:#569cd61a}.lesson-item.completed{color:var(--text-dim)}.lesson-item.completed .lnum:after{content:" ✓";color:var(--green)}.lesson-item.locked{opacity:.4}.lesson-item:focus,.panel-tab:focus{outline:1px solid var(--accent);outline-offset:-1px}.lnum{color:var(--text-dim);min-width:18px;font-size:10px;font-weight:500}.sidebar-spacer{flex:1}.sidebar-footer{border-top:1px solid var(--border);color:var(--text-dim);padding:10px 12px;font-size:10px;line-height:1.6}.main{flex-direction:column;grid-row:2;min-width:0;display:flex;overflow:hidden}.tutorial-pane{border-bottom:1px solid var(--border);background:var(--bg);flex:none;max-height:45%;padding:20px 24px;overflow-y:auto}.lesson-title{color:var(--yellow);align-items:center;gap:8px;margin-bottom:10px;font-size:13px;font-weight:500;display:flex}.lesson-title .module-tag{color:var(--text-dim);background:var(--bg-panel);border:1px solid var(--border);border-radius:3px;padding:2px 7px;font-size:10px;font-weight:400}.tutorial-pane p{color:var(--text-mute);margin-bottom:10px;font-size:12px;line-height:1.9}.tutorial-pane p strong{color:var(--text);font-weight:500}.cmd-highlight{color:var(--accent);background:#569cd61f;border:1px solid #569cd633;border-radius:3px;padding:1px 5px;font-size:12px}.permission-box{border:1px solid #ce917840;border-left:3px solid var(--orange);color:var(--text-mute);background:#ce917814;border-radius:0 4px 4px 0;margin:12px 0;padding:10px 14px;font-size:12px;line-height:1.8}.permission-box .perm-label{color:var(--orange);letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;font-size:10px;font-weight:500}.objective-box{background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;margin-top:12px;padding:12px 14px}.obj-title{color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:8px;font-size:10px}.objective-list{list-style:none}.objective-list li{color:var(--text-mute);align-items:flex-start;gap:8px;padding:3px 0;font-size:12px;display:flex}.objective-list li:before{content:"○";color:var(--text-dim);flex-shrink:0;margin-top:1px}.objective-list li.done{color:var(--text-dim);text-decoration:line-through}.objective-list li.done:before{content:"●";color:var(--green)}.terminal-pane{background:var(--bg-input);flex-direction:column;flex:1;display:flex;overflow:hidden}.terminal-header{background:var(--bg-panel);border-bottom:1px solid var(--border);height:32px;color:var(--text-dim);justify-content:space-between;align-items:center;padding:0 12px;font-size:11px;display:flex}.terminal-tabs{height:100%;display:flex}.t-tab{cursor:pointer;color:var(--text-dim);border-bottom:1px solid #0000;align-items:center;padding:0 14px;font-size:11px;transition:color .1s;display:flex}.t-tab.active{color:var(--text);border-bottom-color:var(--accent);background:#569cd60d}.t-tab:hover:not(.active){color:var(--text-mute)}.terminal-body{flex:1;padding:12px 16px;font-size:13px;line-height:1.6;overflow-y:auto}.term-line{gap:4px;margin-bottom:1px;display:flex}.term-prompt{color:var(--green);white-space:nowrap;flex-shrink:0}.term-cmd{color:var(--text)}.term-output{color:var(--text-mute)}.term-error{color:var(--red)}.term-success{color:var(--green)}.term-comment{color:var(--text-dim);font-style:italic}.term-info{color:var(--accent)}.term-warn{color:var(--orange)}.term-input-row{border-top:1px solid var(--border);background:var(--bg-input);align-items:center;gap:8px;padding:8px 16px;display:flex}.term-input-prompt{color:var(--green);white-space:nowrap;flex-shrink:0;font-size:13px}#termInput{color:var(--text);caret-color:var(--text);background:0 0;border:none;outline:none;flex:1;font-family:JetBrains Mono,monospace;font-size:13px}.right-panel{background:var(--bg-panel);border-left:1px solid var(--border);flex-direction:column;grid-row:2;display:flex;overflow:hidden}.panel-tab-bar{border-bottom:1px solid var(--border);height:32px;display:flex}.panel-tab{letter-spacing:.5px;cursor:pointer;color:var(--text-dim);border-bottom:1px solid #0000;flex:1;justify-content:center;align-items:center;font-size:11px;transition:color .1s;display:flex}.panel-tab.active{color:var(--text);border-bottom-color:var(--accent);background:#569cd60d}.panel-tab:hover:not(.active){color:var(--text-mute)}.panel-content{flex:1;padding:14px;overflow-y:auto}.hint-box{background:var(--bg);border:1px solid var(--border);color:var(--text-mute);border-radius:4px;margin-bottom:8px;padding:10px 12px;font-size:12px;line-height:1.7}.hint-label{color:var(--accent);letter-spacing:1px;text-transform:uppercase;margin-bottom:5px;font-size:10px;font-weight:500}.hint-btn{width:100%;color:var(--accent);cursor:pointer;text-align:left;background:#569cd61a;border:1px solid #569cd64d;border-radius:4px;margin-top:6px;padding:8px 12px;font-family:JetBrains Mono,monospace;font-size:12px;transition:background .1s}.hint-btn:hover{background:#569cd62e}.hint-btn.secondary{border-color:var(--border);color:var(--text-dim);background:0 0}.hint-btn.secondary:hover{color:var(--text-mute);background:#ffffff0a}.ref-section{margin-bottom:18px}.ref-title{letter-spacing:1.5px;text-transform:uppercase;color:var(--text-dim);border-bottom:1px solid var(--border);margin-bottom:6px;padding-bottom:4px;font-size:10px}.ref-item{border-bottom:1px solid #3a3a3a80;grid-template-columns:1fr 1fr;gap:4px 8px;padding:5px 0;font-size:11px;display:grid}.ref-cmd{color:var(--accent)}.ref-desc{color:var(--text-dim)}.ref-link{color:var(--text-dim);opacity:.5;margin-left:4px;font-size:10px;text-decoration:none;transition:opacity .1s,color .1s}.ref-link:hover{opacity:1;color:var(--accent)}.stat-row{border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;padding:8px 0;font-size:12px;display:flex}.stat-label{color:var(--text-dim);font-size:11px}.stat-val{color:var(--text)}.statusbar{background:var(--accent);color:#ffffffe6;grid-column:1/-1;justify-content:space-between;align-items:center;padding:0 14px;font-size:11px;display:flex}.status-left,.status-right{align-items:center;gap:16px;display:flex}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#444;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#555}.hidden{display:none!important}.bmc-corner{color:var(--text-dim);opacity:.5;margin-top:8px;font-size:12px;text-decoration:none;transition:opacity .2s;display:block}.bmc-corner:hover{opacity:1}.bmc-tutorial{border:1px solid var(--border);background:var(--bg-panel);color:var(--text-mute);border-radius:4px;justify-content:space-between;align-items:center;margin-top:16px;padding:12px 14px;font-size:12px;display:flex}.bmc-link{color:var(--yellow);white-space:nowrap;opacity:.8;margin-left:12px;font-size:12px;text-decoration:none;transition:opacity .1s}.bmc-link:hover{opacity:1}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.app{animation:.3s fade-in}.mobile-nav{display:none}@media (width<=768px){:root{--sidebar-w:1fr;--panel-w:1fr}.app{grid-template-rows:36px 1fr 52px;grid-template-columns:1fr}.titlebar-center,#clockEl{display:none}.sidebar{border-right:none;grid-area:2/1;display:none}.sidebar.mobile-active{display:flex}.main{grid-area:2/1;display:none}.main.mobile-active{display:flex}.tutorial-pane{max-height:50%}.right-panel{border-left:none;grid-area:2/1;display:none}.right-panel.mobile-active{display:flex}.statusbar{grid-column:1;display:none}.mobile-nav{background:var(--bg-panel);border-top:1px solid var(--border);grid-area:3/1;display:flex}.mobile-nav-tab{color:var(--text-dim);cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;letter-spacing:.5px;border-top:2px solid #0000;flex-direction:column;flex:1;justify-content:center;align-items:center;gap:3px;padding:6px 0;font-size:10px;transition:color .15s;display:flex}.mobile-nav-tab.active{color:var(--accent);border-top-color:var(--accent)}.mobile-nav-icon{font-size:16px;line-height:1}#termInput{font-size:16px}}