:root{--bg: #11131a;--panel: #1b1f2a;--panel-2: #232838;--text: #e8eaf0;--muted: #9aa3b2;--border: #333a4d;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}*{box-sizing:border-box}button,.key{touch-action:manipulation;-webkit-tap-highlight-color:transparent}body{margin:0;background:var(--bg);color:var(--text)}.app{max-width:980px;margin:0 auto;padding:24px 20px 48px}header h1{margin:0;font-size:1.6rem}.subtitle{margin:4px 0 20px;color:var(--muted)}.view-purpose{margin:0 0 18px;color:var(--text);font-size:.95rem}.controls{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:20px}.key-picker{display:flex;flex-wrap:wrap;gap:6px}.key-button{min-width:42px;padding:8px 10px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;cursor:pointer;font-size:.95rem}.key-button:hover{background:var(--panel-2)}.key-button.active{background:#0072b2;border-color:#0072b2;font-weight:700}.right-controls{display:flex;align-items:center;gap:16px}.size-toggle{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.size-toggle button{padding:8px 14px;background:var(--panel);color:var(--text);border:none;cursor:pointer;font-size:.9rem}.size-toggle button.active{background:#0072b2;font-weight:700}.audio-toggle{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem}.topbar-right{display:flex;align-items:center;gap:14px}.midi-pill{padding:7px 12px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;cursor:pointer;font-size:.85rem}.midi-pill:hover:not(:disabled){background:var(--panel-2)}.midi-note{border:none;background:none;padding:0;font-size:.85rem;color:var(--muted);cursor:default}.midi-note.warn{color:#e69f00;cursor:pointer}.chord-row{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:16px}.chord-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 6px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;cursor:pointer;transition:transform .05s ease,border-color .1s ease}.func-badge{font-size:.6rem;text-transform:uppercase;letter-spacing:.04em;font-weight:700;padding:2px 6px;border-radius:999px;color:#fff}.func-tonic{background:#2e7d5b}.func-subdominant{background:#3b5b8c}.func-dominant{background:#9c4f2e}.chord-card:hover{border-color:#566;transform:translateY(-2px)}.chord-card.selected{border-color:#e8eaf0;background:var(--panel-2)}.numeral{font-size:1.1rem;font-weight:700}.chord-name{font-size:1.25rem}.quality{font-size:.75rem;color:var(--muted)}.swatches{display:flex;gap:3px;margin-top:4px}.swatch{width:14px;height:14px;border-radius:3px;display:inline-block}.chord-detail{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px;min-height:92px}.chord-detail.empty{display:flex;align-items:center}.chord-detail .hint{color:var(--muted);margin:0}.cd-head{display:flex;align-items:baseline;flex-wrap:wrap;gap:10px}.cd-name{font-size:1.5rem;font-weight:700}.cd-numeral{font-size:1.1rem;color:var(--muted)}.cd-inkey{color:var(--muted)}.cd-head .func-badge{align-self:center}.cd-function{margin:8px 0 12px;color:var(--text)}.cd-notes{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap}.cd-note{display:flex;flex-direction:column;align-items:center;min-width:48px;padding:6px 10px;border-radius:8px;line-height:1.2}.cd-note small{opacity:.85;font-size:.72rem}.cd-facts{display:flex;gap:32px;margin:0}.cd-facts dt{font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}.cd-facts dd{margin:2px 0 0;font-size:1.05rem}.progressions{margin-top:28px}.progressions h2{font-size:1.05rem;margin:0 0 10px}.prog-buttons{display:flex;flex-wrap:wrap;gap:8px}.prog-button{padding:8px 14px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;cursor:pointer;font-size:.95rem}.prog-button:hover{background:var(--panel-2)}.prog-button.active{border-color:#e8eaf0;background:var(--panel-2)}.prog-detail{margin-top:12px;background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px}.prog-chords{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}.prog-chord{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;transition:all .15s ease}.prog-chord.now{border-color:#e8eaf0;background:#0072b2;transform:translateY(-3px)}.pc-numeral{font-weight:700}.pc-name{font-size:1.15rem}.prog-why{margin:6px 0 4px;line-height:1.5}.prog-inkey{margin:0;color:var(--muted);font-size:.85rem}.topbar{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.view-switch{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden}.view-switch button{padding:8px 16px;background:var(--panel);color:var(--text);border:none;cursor:pointer;font-size:.95rem}.view-switch button.active{background:#0072b2;font-weight:700}.legend-wrap{display:flex;flex-direction:column;gap:6px}.legend-caption{color:var(--muted);font-size:.8rem}.group-title{font-size:.8rem;color:var(--muted);margin:12px 0 8px;text-transform:uppercase;letter-spacing:.05em}.keyboard.interactive .key{cursor:pointer}.keyboard.interactive .key.white:active{filter:brightness(.92)}.builder{max-width:820px;margin:0 auto}.type-group{margin-bottom:10px}.type-row{display:flex;flex-wrap:wrap;gap:6px}.type-chip{padding:7px 12px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;cursor:pointer;font-size:.9rem}.type-chip:hover{background:var(--panel-2)}.type-chip.active{border-color:#0072b2;background:#0072b2;font-weight:700}.build-head{display:flex;align-items:baseline;gap:12px;margin:18px 0 2px}.bh-name{font-size:1.8rem;font-weight:700}.bh-label{color:var(--muted)}.build-tip{margin:4px 0 12px;color:var(--text);line-height:1.55}.lore{margin:0 0 12px;padding:12px 14px;background:var(--panel);border:1px solid var(--border);border-radius:10px}.lore-row{display:flex;gap:10px;margin-bottom:6px;line-height:1.5}.lore-k{flex:0 0 76px;color:var(--muted);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em;padding-top:2px}.lore-magic{margin:8px 0 0;padding-top:8px;border-top:1px solid var(--border);line-height:1.55}.symmetry-callout{margin:0 0 14px;padding:10px 14px;background:#cc79a724;border:1px solid rgba(204,121,167,.5);border-radius:10px;line-height:1.55;font-size:.92rem}.thirds-callout{margin:0 0 14px;padding:10px 14px;background:#009e731f;border:1px solid rgba(0,158,115,.4);border-radius:10px;line-height:1.55;font-size:.92rem}.recipe{list-style:none;display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;padding:0;margin:0 0 14px}.recipe-step{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid var(--border);border-radius:10px;opacity:.5;transition:opacity .15s ease,border-color .15s ease}.recipe-step.placed{opacity:1}.recipe-step.current{opacity:1;border-color:#e8eaf0}.step-interval{display:flex;flex-direction:column;font-size:.8rem;color:var(--muted);line-height:1.2}.step-interval small{font-size:.68rem}.step-note{display:flex;flex-direction:column;align-items:center;min-width:42px;padding:4px 8px;border-radius:8px;background:var(--panel-2);line-height:1.2}.step-note small{font-size:.68rem;opacity:.85}.thirds-rule{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:0 0 18px}.thirds-rule h3{margin:0 0 6px;font-size:1rem}.thirds-rule p{margin:0 0 10px;color:var(--muted);line-height:1.5;font-size:.9rem}.thirds-rule .rule-tip{margin:10px 0 0}.rule-rows{display:flex;flex-direction:column;gap:6px}.rule-row{display:grid;grid-template-columns:110px auto 1fr;align-items:center;gap:12px;padding:6px 8px;border-radius:8px;border:1px solid transparent}.rule-row.match{border-color:#e8eaf0;background:var(--panel-2)}.rr-name{font-weight:700}.rr-blocks{display:flex;gap:4px}.rr-mood{color:var(--muted);font-size:.85rem}.third-block{display:flex;flex-direction:column;align-items:center;justify-content:center;height:34px;border-radius:6px;font-size:.62rem;line-height:1.1;color:#10131a;font-weight:700;text-align:center}.third-block.big{background:#e69f00}.third-block.small{background:#56b4e9}.third-block small{font-size:.6rem;opacity:.8}.build-instruction{font-size:1.1rem;min-height:1.6em;margin:0 0 14px}.build-instruction .ok{color:#2ecc8f;font-weight:700}.build-actions{display:flex;gap:12px;margin-top:14px}@keyframes hintpulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.35)}}.builder .keyboard .key[style*=inset]{animation:hintpulse 1.1s ease-in-out infinite}.game{max-width:760px;margin:0 auto}.game.idle,.game.done{text-align:center;padding:10px 0}.game h2{font-size:1.3rem;margin:6px 0 12px}.game-blurb{color:var(--muted);line-height:1.6;max-width:600px;margin:0 auto 18px}.difficulty{display:flex;flex-direction:column;gap:8px;max-width:360px;margin:0 auto 18px}.diff-button{padding:12px 14px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;cursor:pointer;font-size:.95rem}.diff-button.active{border-color:#0072b2;background:var(--panel-2)}.hints-mode{display:inline-flex;border:1px solid var(--border);border-radius:8px;overflow:hidden;margin:0 auto 6px}.hints-mode button{padding:9px 20px;background:var(--panel);color:var(--text);border:none;cursor:pointer;font-size:.9rem}.hints-mode button.active{background:#0072b2;font-weight:700}.hints-hint{color:var(--muted);font-size:.82rem;max-width:460px;margin:0 auto 18px}.start-button{padding:12px 28px;border:none;background:#0072b2;color:#fff;font-size:1.05rem;font-weight:700;border-radius:10px;cursor:pointer}.hud{display:flex;align-items:center;gap:16px;font-size:.95rem;margin-bottom:8px}.hud-round{color:var(--muted)}.hud-score{font-weight:700}.hud-combo{color:#e69f00;font-weight:700}.hud-streak{margin-left:auto}.timer-bar{height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden;margin-bottom:16px}.timer-fill{height:100%;background:linear-gradient(90deg,#009e73,#e69f00,#d55e00);transition:width .1s linear}.prompt{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;background:var(--panel);border:1px solid var(--border);border-radius:12px;margin-bottom:10px}.prompt-key{color:var(--muted)}.prompt-ask{font-size:1.6rem}.prompt-ask strong{font-size:2.1rem;color:#e8eaf0}.feedback{min-height:1.6em;text-align:center;margin-bottom:10px}.feedback .ok{color:#2ecc8f;font-weight:700;font-size:1.1rem}.feedback .no{color:#ff6b6b;font-weight:700}.assist-tag{color:var(--muted);font-size:.8rem;text-transform:uppercase;letter-spacing:.05em}.game-actions{display:flex;justify-content:center;gap:12px;margin:12px 0 18px}.peek-button,.next-button{padding:10px 22px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:10px;cursor:pointer;font-size:.95rem}.peek-button:disabled{opacity:.5;cursor:default}.next-button{background:#0072b2;border-color:#0072b2;font-weight:700}.summary{display:flex;justify-content:center;gap:36px;margin:16px 0 24px}.summary>div{display:flex;flex-direction:column}.summary .big{font-size:2rem;font-weight:700}.summary small{color:var(--muted)}.today{max-width:640px;margin:0 auto}.today-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}.today-card{display:flex;flex-direction:column;gap:4px;padding:16px;border:1px solid var(--border);background:var(--panel);border-radius:14px}.today-card.streak.live{border-color:#e69f0080}.tc-big{font-size:2.1rem;font-weight:800;line-height:1}.tc-label{color:var(--muted);font-size:.85rem}.tc-sub{color:var(--muted);font-size:.8rem}.xp-bar{height:8px;background:var(--panel-2);border-radius:999px;overflow:hidden;margin:6px 0 2px}.xp-fill{height:100%;background:linear-gradient(90deg,#0072b2,#2ecc8f);transition:width .3s ease}.today-practice{text-align:center;padding:20px 16px;border:1px solid var(--border);background:var(--panel);border-radius:14px;margin-bottom:14px}.tp-prompt{font-size:1.2rem;font-weight:700;margin:0 0 4px}.tp-done{font-size:1.2rem;font-weight:700;color:#2ecc8f;margin:0 0 4px}.tp-done small{color:var(--muted);font-weight:400}.tp-sub{color:var(--muted);margin:0 0 14px}.start-button.ghost{background:var(--panel-2);color:var(--text);border:1px solid var(--border)}.today-unlock{text-align:center;color:var(--muted);font-size:.9rem}.play-hub{max-width:760px;margin:0 auto}.play-hub h2{font-size:1.2rem;margin:6px 0 14px}.game-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px}.game-card{display:flex;flex-direction:column;gap:8px;text-align:left;padding:18px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;cursor:pointer}.game-card:hover:not(:disabled){border-color:#0072b2;background:var(--panel-2)}.game-card.locked{opacity:.55;cursor:default}.gc-title{font-size:1.15rem;font-weight:700}.gc-lock{font-size:.9rem}.gc-desc{color:var(--muted);font-size:.9rem;line-height:1.5}.back-button{margin-bottom:12px;padding:7px 14px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:8px;cursor:pointer}.ntc-options{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0 4px}.ntc-option{padding:16px;font-size:1.3rem;font-weight:700;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;cursor:pointer}.ntc-option:hover:not(:disabled){background:var(--panel-2);border-color:#566}.ntc-option.correct{background:#1f7a54;border-color:#2ecc8f}.ntc-option.wrong{background:#7a1f2b;border-color:#d7263d}.ntc-option.dim{opacity:.4}.songs{max-width:820px;margin:0 auto}.songs h2{font-size:1.2rem;margin:6px 0 8px}.song-cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}.song-card{display:flex;flex-direction:column;gap:3px;text-align:left;padding:12px 14px;border:1px solid var(--border);background:var(--panel);color:var(--text);border-radius:12px;cursor:pointer}.song-card:hover{background:var(--panel-2)}.song-card.active{border-color:#0072b2;background:var(--panel-2)}.sc-nick{font-size:1.05rem;font-weight:700}.sc-roman{font-size:.85rem;color:#e69f00;font-weight:700}.sc-songs{font-size:.8rem;color:var(--muted)}.song-player{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--panel)}.sp-songs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.sp-song{padding:5px 10px;background:var(--panel-2);border-radius:999px;font-size:.85rem}.sp-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}.sp-play{padding:9px 22px;border:none;background:#0072b2;color:#fff;font-weight:700;border-radius:10px;cursor:pointer;font-size:.95rem}.sp-play.on{background:#9c4f2e}.sp-seq{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}.sp-chord{display:flex;flex-direction:column;align-items:center;min-width:62px;padding:8px 10px;border:2px solid var(--border);border-radius:10px;transition:transform .12s ease,background .12s ease}.sp-chord.now{background:var(--panel-2);transform:translateY(-3px)}.sp-why{color:var(--muted);line-height:1.5;margin:4px 0 0}.cof{max-width:560px;margin:0 auto}.cof-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.cof-hud{margin:0;gap:12px}.cof-wheel{width:100%;max-width:440px;display:block;margin:0 auto;-webkit-user-select:none;user-select:none;touch-action:manipulation}.cof-info{margin-top:8px}.cof-sig{margin:0 0 10px;font-size:1.05rem}.cof-chords{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:12px}.cof-chord{display:flex;flex-direction:column;align-items:center;min-width:52px;padding:6px 8px;border:2px solid var(--border);border-radius:9px;background:var(--panel)}.cof-explain{color:var(--muted);line-height:1.55;margin:0}.cof-h{font-size:1rem;margin:16px 0 8px}.cof-rel{margin:0 0 4px;padding:10px 14px;background:#cc79a724;border:1px solid rgba(204,121,167,.5);border-radius:10px;line-height:1.55}.cof-scale{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:8px}.cof-note{display:inline-flex;align-items:baseline;gap:4px;padding:7px 10px;border:2px solid var(--border);border-radius:9px;background:var(--panel);font-size:1.05rem;font-weight:700}.cof-note.acc{color:#e69f00}.cof-note.raised{border-width:2px;box-shadow:0 0 0 2px #cc79a780}.cn-up{font-size:.7rem;color:#cc79a7;font-weight:700;margin-left:1px}.cn-deg{font-size:.65rem;color:var(--muted);font-weight:700}.cof-step{font-size:.72rem;color:var(--muted);padding:0 2px}.cof-step.half{color:#e69f00;font-weight:700}.cof-step.aug{color:#cc79a7;font-weight:700}.cof-forms{margin-bottom:8px}.cof-forms button{padding:7px 14px}.cof-build{color:var(--muted);line-height:1.55;margin:0 0 8px}.cof-play{text-align:center}.cof-ask{font-size:1.2rem}.cof-ok{color:#2ecc8f;font-weight:700}.cof-no{color:#ff6b6b;font-weight:700}.ktr-num{font-size:.78rem;color:var(--muted);font-weight:700}.ktr-name{font-size:1.1rem;font-weight:700}.hud-cleared{color:var(--muted)}.hud-lives{margin-left:auto;color:#ff6b6b;letter-spacing:2px}.drop-area{position:relative;height:240px;margin-bottom:16px;border:1px solid var(--border);border-radius:12px;background:linear-gradient(180deg,#161a24,#11141c);overflow:hidden}.drop-tile{position:absolute;left:50%;top:0;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 18px;border-radius:10px;background:#0072b2;box-shadow:0 4px 16px #0006;animation-name:drop;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes drop{0%{top:0}to{top:calc(100% - 64px)}}.dt-main{font-size:1.5rem;font-weight:700}.dt-lead{font-size:.75rem;opacity:.85}.drop-line{position:absolute;left:0;right:0;bottom:10px;height:3px;background:repeating-linear-gradient(90deg,#e69f00 0 12px,transparent 12px 24px)}.drop-feedback{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font-size:1.6rem;font-weight:700}.drop-feedback.ok{color:#2ecc8f}.drop-feedback.no{color:#ff6b6b}@media (max-width: 680px){.game-cards,.song-cards{grid-template-columns:1fr}.drop-area{height:200px}}.keyboard-wrap{margin-bottom:20px}.keyboard{position:relative;display:flex;width:100%;height:180px;-webkit-user-select:none;user-select:none}.key{display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.key.white{flex:1;background:#f7f7f5;border:1px solid #c7c7c2;border-radius:0 0 5px 5px;z-index:1}.key.black{position:absolute;top:0;height:62%;background:#23242a;border:1px solid #000;border-radius:0 0 4px 4px;z-index:2}.key-label{font-size:.72rem;font-weight:700;pointer-events:none}.legend{display:flex;flex-wrap:wrap;gap:6px;align-items:center}.legend-item{padding:4px 10px;border-radius:999px;font-size:.82rem}@media (max-width: 680px){.app{padding:14px 12px 40px}header h1{font-size:1.35rem}.subtitle{font-size:.85rem;margin-bottom:16px}.topbar{flex-direction:column;align-items:stretch;gap:10px}.view-switch{width:100%}.view-switch button{flex:1;padding:11px 2px;font-size:.82rem}.audio-toggle{justify-content:flex-end}.controls{flex-direction:column;align-items:stretch;gap:10px}.right-controls{justify-content:space-between}.key-button{min-width:40px;padding:10px}.chord-row{display:flex;grid-template-columns:none;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px}.chord-row>.chord-card{flex:0 0 auto;min-width:88px;scroll-snap-align:start}.keyboard{height:190px}.key-label{font-size:.8rem}.key.white{border-radius:0 0 7px 7px}.cd-head{gap:8px}.cd-name{font-size:1.3rem}.cd-facts{flex-wrap:wrap;gap:16px}.rule-row{grid-template-columns:76px auto 1fr;gap:8px;padding:6px}.rr-name{font-size:.85rem}.rr-mood{font-size:.72rem}.prompt-ask{font-size:1.35rem}.prompt-ask strong{font-size:1.8rem}.summary{gap:20px}.difficulty{max-width:none}}@media (max-width: 420px){.rule-row{grid-template-columns:70px auto}.rr-mood{display:none}.keyboard{height:170px}.chord-row>.chord-card{min-width:80px}}@media (orientation: landscape) and (max-height: 540px){.app{padding:8px 14px 20px}header{display:none}.topbar,.chord-row,.detail,.chord-detail,.keyboard-wrap{margin-bottom:8px}.keyboard{height:128px}.key-label{font-size:.62rem}.prompt{padding:8px;margin-bottom:6px}.prompt-ask{font-size:1.2rem}.prompt-ask strong{font-size:1.5rem}.timer-bar{margin-bottom:8px}.feedback{min-height:1.2em;margin-bottom:6px}.drop-area{height:130px;margin-bottom:8px}.game-blurb{font-size:.85rem;margin-bottom:10px}.hud{margin-bottom:6px}.thirds-rule,.lore{margin-bottom:8px}}