:root{color-scheme:dark;--bg: #11111b;--panel: #1e1e2e;--panel-2: #181825;--line: #313244;--text: #cdd6f4;--muted: #6c7086;--accent: #cba6f7;--good: #a6e3a1;--warn: #f9e2af;--blue: #89b4fa;--mono: ui-monospace, SFMono-Regular, Menlo, monospace}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,sans-serif}.app{display:flex;flex-direction:column;height:100vh}.topbar{display:flex;align-items:center;justify-content:space-between;background:var(--panel-2);padding:8px 16px;font-family:var(--mono);font-size:13px;border-bottom:1px solid var(--line)}.topbar .brand{color:var(--accent);font-weight:700}.mode-badge{background:var(--good);color:var(--panel);padding:2px 10px;border-radius:4px;font-weight:700}.mode-badge.INSERT{background:var(--blue)}.mode-badge.VISUAL{background:var(--warn)}.columns{display:flex;flex:1;min-height:0}.lesson{width:33%;background:var(--panel);border-right:1px solid var(--line);padding:20px;overflow-y:auto}.game{width:67%;background:var(--bg);padding:20px;display:flex;flex-direction:column;min-width:0}.lesson .skill-label{color:var(--accent);text-transform:uppercase;letter-spacing:1px;font-size:11px}.lesson h2{margin:6px 0 12px;font-size:20px}.lesson p{color:#bac2de;line-height:1.6}.tryit{background:var(--panel-2);border-radius:8px;padding:12px;margin:14px 0;font-family:var(--mono)}.tryit .keys,.tryit.keys{color:var(--good);font-size:16px}.goal{color:var(--warn);font-family:var(--mono);margin-top:10px}.hint-btn{margin-top:14px;background:none;border:1px solid var(--line);color:var(--muted);padding:6px 10px;border-radius:6px;cursor:pointer;font-family:var(--mono)}.hint-text{margin-top:8px;color:var(--muted);font-size:13px}.keystrip{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;color:var(--muted);font-family:var(--mono);font-size:12px}.keystrip b{color:var(--text)}.feedback{color:var(--muted);font-family:var(--mono);font-size:13px;margin-top:6px;min-height:18px}.win-banner{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--good);color:var(--panel);font-family:var(--mono);padding:12px 16px;border-radius:8px;margin-bottom:12px;box-shadow:0 0 0 2px var(--good),0 6px 24px #a6e3a159;animation:win-pop .22s ease-out}.win-banner .win-text{font-size:16px;font-weight:700}.win-banner .win-next{background:var(--panel);color:var(--good);border:none;cursor:pointer;font-family:var(--mono);font-weight:700;font-size:14px;padding:8px 14px;border-radius:6px;white-space:nowrap}@keyframes win-pop{0%{transform:scale(.96);opacity:0}to{transform:scale(1);opacity:1}}.board{font-family:var(--mono);font-size:22px;line-height:1.2;letter-spacing:4px;-webkit-user-select:none;user-select:none;outline:none}.board .wall{color:var(--line)}.board .floor{color:#45475a}.board .cursor{color:var(--blue);font-weight:700}.board .target{color:var(--good);font-weight:700}.cm-editor{height:100%;border:1px solid var(--line);border-radius:8px;font-size:15px}.cm-editor .cm-content{font-family:var(--mono)}.map{padding:32px;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:900px;margin:0 auto}.map h1{grid-column:1 / -1;text-align:center}.map .tile{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px;cursor:pointer}.map .tile.locked{opacity:.4;cursor:not-allowed}.map .tile .num{color:var(--muted);font-family:var(--mono);font-size:12px}.map .tile .name{font-weight:700;margin:4px 0}.map .tile .stars{color:var(--warn)}