:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;--bg: #0b1020;--surface: #111827;--surface-2: #172033;--text: #f8fafc;--muted: #aeb9ca;--line: rgba(255, 255, 255, .12);--accent: #38bdf8;--accent-2: #f59e0b;--ok: #34d399;--shadow: 0 24px 80px rgba(0, 0, 0, .35)}:root[data-theme=light]{color-scheme:light;--bg: #f6f7fb;--surface: #ffffff;--surface-2: #eef2f7;--text: #152033;--muted: #657083;--line: rgba(21, 32, 51, .12);--shadow: 0 18px 54px rgba(36, 50, 74, .12)}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at 15% 0%,rgba(56,189,248,.12),transparent 28rem),linear-gradient(135deg,var(--bg),color-mix(in srgb,var(--bg) 84%,#24334f));color:var(--text)}button{font:inherit}button:disabled{cursor:not-allowed}.plain-button{border:0;background:transparent;color:inherit;cursor:pointer;text-align:left}.app-shell{width:min(1440px,100%);margin:0 auto;padding:24px}.topbar,.hero-grid,.section-grid,.satb-layout,.bottom-grid{display:grid;gap:18px}.topbar{grid-template-columns:1fr auto;align-items:center;margin-bottom:24px}.brand-lockup,.topbar-actions,.section-title,.primary-actions,.chip-row,.view-nav{display:flex;align-items:center;gap:12px}.brand-mark,.icon-button{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--accent)}.icon-button{cursor:pointer}.eyebrow{margin:0 0 4px;color:var(--muted);font-size:.75rem;font-weight:700;text-transform:uppercase}h1,h2,h3,p{margin-top:0}h1{margin-bottom:0;font-size:clamp(1.35rem,2vw,2rem)}h2{margin-bottom:0;font-size:1.15rem}h3{margin-bottom:0;font-size:1rem;line-height:1.35}.streak-pill,.level-badge{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 12px;border:1px solid var(--line);border-radius:999px;background:color-mix(in srgb,var(--surface) 86%,transparent);color:var(--text)}.hero-grid{grid-template-columns:minmax(0,1fr) 320px}.session-panel,.progress-panel,.map-section,.tool-card,.satb-panel,.region-card{border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:var(--shadow)}.session-panel{padding:clamp(20px,4vw,34px)}.panel-heading{display:flex;justify-content:space-between;gap:16px}.mission-focus{max-width:820px;color:var(--muted);font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.5}.session-blocks{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:24px 0}.session-block{min-height:132px;padding:16px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.session-block strong{display:block;color:var(--accent-2);font-size:1.4rem}.session-block span{display:block;margin:5px 0;font-weight:800}.session-block small,.exploration-item small,.keyboard-hint{color:var(--muted);line-height:1.4}.primary-button,.secondary-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 18px;border-radius:8px;border:1px solid transparent;cursor:pointer;font-weight:800}.primary-button{background:var(--accent);color:#06111f}.secondary-button{border-color:var(--line);background:transparent;color:var(--text)}.full{width:100%}.view-nav{justify-content:space-between;margin-bottom:18px;padding:12px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 80%,transparent)}.view-nav span{color:var(--muted);font-weight:800}.summary-preview,.tool-card p,.diagnosis{color:var(--muted);line-height:1.55}.progress-panel{display:grid;align-content:center;gap:20px;padding:24px}.xp-ring{display:grid;place-items:center;width:158px;height:158px;margin:0 auto;border:12px solid color-mix(in srgb,var(--accent) 45%,var(--surface-2));border-radius:999px}.xp-ring span{font-size:2.15rem;font-weight:900}.xp-ring small{color:var(--muted)}.stat-list,.mission-stack,.exploration-list,.satb-controls{display:grid;gap:10px}.stat-item{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--line)}.stat-item span{color:var(--muted)}.section-grid{grid-template-columns:minmax(0,1.35fr) minmax(320px,.65fr);margin-top:18px}.map-section,.satb-panel,.tool-card{padding:20px}.mission-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px}.region-card{display:grid;gap:16px;min-height:220px;padding:18px;box-shadow:none}.accent-sky{border-top:3px solid #38bdf8}.accent-amber{border-top:3px solid #f59e0b}.accent-emerald{border-top:3px solid #34d399}.accent-violet{border-top:3px solid #a78bfa}.accent-rose{border-top:3px solid #fb7185}.mission-node,.exploration-item,.voice-button{min-height:58px;padding:12px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);text-align:left}.mission-node span,.exploration-item span{display:block;font-weight:800}.mission-node.locked{opacity:.55}.mission-node.available{outline:2px solid color-mix(in srgb,var(--accent) 55%,transparent)}.mission-node.complete{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,var(--surface-2))}.side-column{display:grid;gap:18px}.chip-row{flex-wrap:wrap}.chip-row span{padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:.9rem}.satb-panel{margin-top:18px}.satb-layout{grid-template-columns:minmax(0,1fr) 320px;align-items:center;margin-top:18px}.staff-preview{position:relative;min-height:260px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:linear-gradient(180deg,var(--surface-2),color-mix(in srgb,var(--surface-2) 80%,#000))}.staff-lines{position:absolute;top:56px;right:36px;bottom:56px;left:36px}.staff-lines i{display:block;height:1px;margin-bottom:27px;background:color-mix(in srgb,var(--text) 56%,transparent)}.note{position:absolute;width:34px;height:24px;border-radius:50%;background:var(--muted);transform:rotate(-18deg)}.note:after{position:absolute;left:28px;bottom:10px;width:4px;height:76px;border-radius:999px;background:currentColor;content:""}.note-s{left:13%;top:28px}.note-a{left:34%;top:58px}.note-t{left:55%;top:88px}.note-b{left:76%;top:118px}.note.active{background:var(--accent-2);color:var(--accent-2);box-shadow:0 0 0 12px #f59e0b24}.cursor-line{position:absolute;inset-block:34px;left:55%;width:2px;background:var(--accent)}.voice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.voice-button{text-align:center;cursor:pointer}.voice-button strong{display:block;margin-bottom:3px;font-size:1.3rem}.voice-button.active{border-color:var(--accent-2);background:color-mix(in srgb,var(--accent-2) 18%,var(--surface-2))}.compact{width:100%}.bottom-grid{grid-template-columns:repeat(4,minmax(0,1fr));margin-top:18px}.meter{height:10px;overflow:hidden;border-radius:999px;background:var(--surface-2)}.meter.large{height:12px;margin:20px 0}.learning-view{display:grid;gap:18px}.exercise-card{display:grid;grid-template-columns:320px minmax(0,1fr);gap:22px;align-items:center;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2)}.mini-staff{position:relative;min-height:210px;overflow:hidden;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 84%,#000)}.mini-staff i{display:block;height:1px;margin:34px 34px 0;background:color-mix(in srgb,var(--text) 62%,transparent)}.mini-staff small{position:absolute;left:14px;right:14px;bottom:12px;color:var(--muted)}.mini-note{position:absolute;left:42%;width:34px;height:24px;border-radius:50%;background:var(--accent-2);color:var(--accent-2);transform:rotate(-18deg);box-shadow:0 0 0 10px #f59e0b1f}.mini-note.second{left:62%;background:var(--accent);color:var(--accent)}.mini-note:after{position:absolute;left:28px;bottom:10px;width:4px;height:68px;border-radius:999px;background:currentColor;content:""}.answer-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.answer-button{min-height:52px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--text);cursor:pointer;font-weight:800}.answer-button.correct{border-color:var(--ok);background:color-mix(in srgb,var(--ok) 16%,var(--surface))}.answer-button.wrong{border-color:#fb7185;background:color-mix(in srgb,#fb7185 14%,var(--surface))}.feedback,.help-panel{padding:14px;border:1px solid var(--line);border-radius:8px;background:color-mix(in srgb,var(--surface) 70%,transparent)}.feedback p,.help-panel p{margin-bottom:6px}.feedback.correct{border-color:color-mix(in srgb,var(--ok) 50%,var(--line))}.feedback.wrong{border-color:color-mix(in srgb,#fb7185 55%,var(--line))}.feedback small,.help-panel small{color:var(--muted)}.form-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:22px 0}.form-grid label{display:grid;gap:8px;color:var(--muted);font-weight:800}.form-grid select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--text);padding:0 10px}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.meter span{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--accent),var(--ok))}@media (max-width: 1080px){.hero-grid,.section-grid,.satb-layout,.bottom-grid{grid-template-columns:1fr}.session-blocks,.mission-map,.form-grid,.exercise-card{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (max-width: 680px){.app-shell{padding:16px}.topbar,.panel-heading{grid-template-columns:1fr}.topbar{display:grid}.topbar-actions{justify-content:space-between}.session-blocks,.mission-map,.voice-grid,.form-grid,.exercise-card,.stats-grid{grid-template-columns:1fr}.primary-actions{align-items:stretch;flex-direction:column}}