:root{color-scheme:dark;--gold:#f3ca7b;--muted:#9aa9bb;--line:#2c384b}*{box-sizing:border-box}body{margin:0;background:#0b1220;color:#e9eef5;font:14px/1.5 'DM Sans',sans-serif}button,select,input{font:inherit}button,a,select,input{touch-action:manipulation}button,a{cursor:pointer}button,select,input{background:#182338;border:1px solid #354158;border-radius:8px;color:inherit;padding:9px 12px}button:disabled{opacity:.45;cursor:default}button:hover:not(:disabled){border-color:var(--gold)}a{color:var(--gold);text-decoration:none}header{display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding:16px 4%}header>span{margin-right:auto;font-size:10px;letter-spacing:2px;color:var(--muted)}main{max-width:1480px;padding:28px 4%;margin:auto}.intro{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}h1,h2{font-family:Manrope,sans-serif;line-height:1.2;margin:8px 0}h1{font-size:36px;letter-spacing:-1.7px}h1 span{color:var(--gold)}p{color:var(--muted);margin:8px 0}.eyebrow{color:var(--gold);font-size:10px;letter-spacing:2px}.tag{font-size:9px;border:1px solid #4a3d28;border-radius:20px;padding:6px 12px;color:var(--gold);letter-spacing:1px}#settings{background:#111c2c;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:20px}.fields{display:flex;gap:14px;flex-wrap:wrap;align-items:end}.fields label{display:grid;gap:5px;font-size:11px;color:var(--muted)}select{max-width:100%}#apply,.primary{background:var(--gold);border-color:var(--gold);color:#1b2230;font-weight:700}details{margin-top:10px}summary{cursor:pointer;color:#d5deea}#choices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:15px 0}.choice{display:flex;gap:5px;align-items:center;background:#0b1424;padding:8px;border-radius:8px}.choice select{font-size:11px;padding:5px;min-width:0}.choice strong{min-width:22px}.choice button{padding:4px 7px}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:20px}.cosmos{position:relative;background:radial-gradient(ellipse at center,#24314a 0,#101b30 45%,#0d1627 75%);border:1px solid #30405b;border-radius:18px;overflow:hidden}.cosmos-top,.solar-caption{display:flex;justify-content:space-between;padding:16px 22px;color:#b9c7da;font-size:10px;letter-spacing:1px}.solar-caption{letter-spacing:0}.legend i{display:inline-block;background:var(--gold);width:6px;height:6px;border-radius:50%;margin-right:6px}#solar{display:block;width:100%;height:420px}.orbit{fill:none;stroke:#52647e;stroke-opacity:.23}.ray{stroke:#7286aa;stroke-opacity:.15;stroke-dasharray:3 7}.planet circle{fill:#243652;stroke:#6385a9;stroke-width:1.3}.planet text{fill:#e4edfb;font:700 14px 'DM Sans',sans-serif;text-anchor:middle;dominant-baseline:middle;pointer-events:none}.planet.active circle{fill:#94713a;stroke:#ffdc99;stroke-width:3}.planet.done circle{stroke:#79c9bb}.planet .sub{font-size:9px;fill:#b9c9df}.sun circle{fill:#e6b65e;stroke:#ffdea0;stroke-width:2;filter:drop-shadow(0 0 22px #e8ba6370)}.sun text{fill:#2c2519;font-size:24px}.sun .sub{fill:#514329;font-size:9px}.traveller{fill:#fff1bd;filter:drop-shadow(0 0 7px #ffeac1);transition:cx .4s ease,cy .4s ease}.mission{border:1px solid var(--line);border-radius:18px;padding:22px;background:#121d2e}#role{font-size:10px;letter-spacing:2px;color:var(--muted);margin-top:20px}.mission h2{font-size:46px;color:var(--gold)}#note-names{display:flex;gap:7px;flex-wrap:wrap;margin:16px 0}#note-names span{background:#223149;padding:6px 9px;border-radius:6px;font-size:13px}#feedback{min-height:44px;color:#c4d4e7;font-size:13px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:11px}.controls input[type=number]{width:65px;padding:6px}.controls label:nth-child(n+3){grid-column:1/-1}.controls input[type=checkbox]{accent-color:var(--gold)}#beats{display:flex;gap:8px;margin:16px 0}#beats i{width:7px;height:7px;border-radius:50%;background:#3c4a61}#beats i.active{background:var(--gold);box-shadow:0 0 8px #ffda86}.mission>button{width:100%;margin-bottom:8px}.small{font-size:10px;color:var(--muted)}#stars{font-size:29px;color:var(--gold);letter-spacing:4px}.actions{display:flex;flex-wrap:wrap;gap:6px}.actions button{font-size:11px;padding:7px}.piano-panel{margin-top:20px;padding:16px;background:#121d2e;border:1px solid var(--line);border-radius:14px}.piano-panel>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:10px;letter-spacing:1px;margin-bottom:12px}.piano-scroll{overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}#piano{display:flex;position:relative;min-width:960px;height:140px;touch-action:pan-x}.key{border-radius:0 0 5px 5px;padding:0 0 8px;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;touch-action:none}.key.white{flex:1;min-width:44px;height:100%;background:#f0f3f3;color:#506779;border:1px solid #b4c1c6}.key.black{position:absolute;top:0;height:62%;background:#162434;z-index:2;color:#b7c8da;border:1px solid #0a1522}.key.expected{background:#eac483;color:#433621}.key.pressed{background:#8bc9bc;color:#16362c}.key span{font-size:10px}.key:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid #8fd6d0;outline-offset:2px}[hidden]{display:none!important}#status{min-height:20px}@media(max-width:900px){.workspace{grid-template-columns:minmax(0,1fr) 260px}#choices{grid-template-columns:1fr 1fr}#solar{height:360px}h1{font-size:29px}.tag{display:none}}@media(max-width:650px){header{gap:8px;padding:10px}header>span{display:none}header a{margin-right:auto}.workspace{grid-template-columns:1fr}#solar{height:320px}.intro{display:block}main{padding:20px 12px}#choices{grid-template-columns:1fr}.mission{padding:16px}.mission h2{font-size:34px}.fields label{max-width:48%}.piano-panel>div:first-child{display:block}}@media(prefers-reduced-motion:reduce){.traveller{transition:none}}
@media(min-width:901px) and (min-height:650px){body.exploring{height:100dvh;overflow:hidden}.exploring header{height:62px;padding-top:10px;padding-bottom:10px}.exploring main{height:calc(100dvh - 62px);display:grid;grid-template-rows:minmax(0,1fr) 162px;gap:10px;padding:12px 3%}.exploring .intro,.exploring #settings,.exploring #status{display:none}.exploring .workspace{min-height:0;gap:12px}.exploring .cosmos{display:flex;flex-direction:column;min-height:0}.exploring #solar{flex:1;min-height:0;height:100%;width:100%}.exploring .cosmos-top,.exploring .solar-caption{padding:10px 16px}.exploring .mission{padding:12px 16px;min-height:0}.exploring .mission>.small{display:none}.exploring #role{margin-top:7px}.exploring .mission h2{font-size:32px;margin:3px 0}.exploring #note-names{margin:8px 0}.exploring #feedback{min-height:30px;font-size:11px;margin:5px 0}.exploring .controls{gap:6px}.exploring .controls label:nth-child(n+3){grid-column:auto}.exploring #beats{margin:8px 0}.exploring .mission>button{padding:6px;margin-bottom:5px}.exploring #stars{font-size:23px}.exploring #result{font-size:11px}.exploring .actions{gap:4px}.exploring .actions button{padding:5px}.exploring .piano-panel{padding:10px 14px;margin:0}.exploring #piano{height:118px}.exploring .piano-panel>div:first-child{margin-bottom:5px}}
#harmony-paths{padding:20px;background:linear-gradient(115deg,#1b3040,#182238);border:1px solid #46616a;border-radius:14px;margin-bottom:20px}.path-heading{display:flex;align-items:center;gap:18px}.path-heading>div{flex:1}.path-heading h2{font-size:22px}.path-heading label{font-size:11px;display:grid;gap:4px}#path-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}#path-list [aria-pressed=true]{background:#f3ca7b;color:#162536;border-color:#f3ca7b}#lesson-intro{border-top:1px solid #425568;margin-top:16px;padding-top:10px}#lesson-intro h3{font-size:18px;margin:6px 0}#lesson-concept{color:#e0e8ef;max-width:900px}#lesson-answers{display:flex;flex-wrap:wrap;gap:8px}#lesson-answer-feedback{color:#a4d8c8}#lesson-coach{margin:0 18px;padding:14px;border-radius:10px;background:#162f3c;border:1px solid #335563}#lesson-tip{color:#e5eef0;font-size:14px}#voice-changes{display:flex;flex-wrap:wrap;gap:7px;font-size:11px}#voice-changes span{padding:5px 8px;background:#233e4a;border-radius:5px}.shared-note{background:#244f43!important;color:#b8f1d4!important}.exploring #harmony-paths{display:none}.harmony-mode #solar{height:330px}@media(min-width:901px) and (min-height:650px){.exploring.harmony-mode #solar{height:100%;flex:1}.exploring #lesson-coach{padding:9px}.exploring #lesson-tip{font-size:12px;margin:4px 0}.exploring #voice-changes{font-size:10px}}@media(max-width:650px){.path-heading{flex-wrap:wrap}.path-heading>div{flex-basis:100%}#harmony-paths{padding:15px}#path-list button{font-size:12px}.harmony-mode #solar{height:290px}}

.harmony-options{display:flex;align-items:end;gap:12px;flex-wrap:wrap;margin-top:16px}.harmony-options label{display:grid;gap:5px;font-size:11px}.harmony-options span{align-self:center;color:#b8c9d8;font-size:12px}.planet text{font-size:12px}.sun text{font-size:21px}.harmony-options select{max-width:100%}@media(max-width:650px){.harmony-options label{width:100%}.harmony-options span{flex:1}.harmony-options button{font-size:11px}}

#colour-journey{margin-top:18px}#colour-levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#colour-levels button{text-align:left;padding:14px;border-color:#526278}#colour-levels button[aria-pressed=true]{background:#e4c68c;color:#14202f;border-color:#ffe1a4;font-weight:700}#colour-level-description{margin:12px 0;color:#d4e0e9}#chord-colour-legend{display:flex;gap:10px;flex-wrap:wrap}#chord-colour-legend span{color:var(--family-colour);border:1px solid var(--family-colour);border-radius:20px;padding:4px 10px;font-size:11px}.colour-mode .planet circle{fill:color-mix(in srgb,var(--family-colour) 17%,#101b30);stroke:var(--family-colour);stroke-width:2}.colour-mode .planet text{fill:var(--family-colour)}.colour-mode .planet .sub{fill:#e1e8f0}.colour-mode .sun circle{filter:none;stroke-width:3}.colour-mode .planet.active circle{stroke:#fff;stroke-width:4;fill:color-mix(in srgb,var(--family-colour) 35%,#101b30)}.colour-mode .planet.done circle{stroke:var(--family-colour)}.colour-mode .planet.active.done circle{stroke:white}.colour-mode .mission h2{color:var(--target-colour)}.colour-mode .key.expected:not(.pressed){background:var(--target-colour);color:#152331}.planet[role=button]{cursor:pointer}.planet[role=button]:focus-visible{outline:2px solid white;outline-offset:6px}.planet[aria-disabled=true]{cursor:default}@media(max-width:650px){#colour-levels{grid-template-columns:1fr}#colour-levels button{padding:10px}}

#practice-levels{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:18px;background:#172b36;border:1px solid #46656b;border-radius:14px;margin-bottom:18px}#practice-levels label{display:grid;gap:5px;font-size:12px}#practice-levels>div{flex:1;min-width:180px}#practice-levels p{font-size:12px}.exploring #practice-levels{display:none}@media(max-width:650px){#practice-levels label,#practice-levels>div{width:100%}#practice-levels select{width:100%}}

/* Keep setup readable: essential choices first, explanations on demand. */
body:not(.exploring) main{max-width:1320px}.intro{margin-bottom:20px}h1{font-size:30px;letter-spacing:-1px}.intro .eyebrow{font-size:9px}#harmony-paths{padding:18px;margin-bottom:14px;background:#142335}.path-heading h2{font-size:20px}#path-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}#path-list button{text-align:left;padding:12px;font-size:13px}#chord-options{border-top:1px solid #34475b;margin-top:16px;padding-top:12px}#chord-options>summary,#lesson-intro>summary{font-weight:500;color:#b8cedc;font-size:13px}#lesson-intro{margin-top:12px;padding-top:12px}#practice-levels{padding:16px;background:#142a32}#practice-levels p{margin-bottom:0}#practice-size{font-size:13px}.harmony-options #set-label{display:none}body:not(.exploring) #solar{height:300px}body:not(.exploring) .mission h2{font-size:36px}#colour-journey>.small{max-width:850px}#colour-levels button{font-size:12px}@media(max-width:650px){#path-list{grid-template-columns:1fr 1fr}.path-heading h2{font-size:18px}h1{font-size:27px}#practice-levels{gap:10px}#practice-prev,#practice-next{flex:1}.path-heading{gap:10px}}