:root{--bg: #14161c;--panel: #1d2029;--panel2: #23273268;--border: #313749;--text: #e8eaf0;--muted: #9aa1b5;--accent: #6ea8fe;--tonic: #3fa96f;--predominant: #d9a23c;--dominant: #d45d5d;--chromatic: #9d6fd4;--passing: #5aa7b8}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Segoe UI,system-ui,-apple-system,sans-serif;font-size:15px}h1{font-size:1.25rem;margin:0}h2{font-size:1.1rem;margin:.2rem 0}h3{font-size:1rem;margin:.2rem 0}h4{font-size:.85rem;margin:.6rem 0 .2rem;color:var(--accent);text-transform:uppercase;letter-spacing:.04em}button{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.35rem .7rem;cursor:pointer;font-size:.9rem}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);color:#10131a;border-color:var(--accent);font-weight:600}button.big{font-size:1.2rem;padding:.8rem 1.6rem}button:disabled{opacity:.45;cursor:default}select,input[type=range]{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;padding:.25rem .4rem}label{color:var(--muted);display:inline-flex;align-items:center;gap:.4rem}.splash{height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.splash h1{font-size:2rem}.splash p{color:var(--muted)}.loading{animation:pulse 1.2s infinite}@keyframes pulse{50%{opacity:.4}}.app{max-width:1400px;margin:0 auto;padding:.8rem 1.2rem 10rem}.topbar{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;padding:.6rem 0 1rem;border-bottom:1px solid var(--border);margin-bottom:1rem}.brand{margin-right:auto}.seg-group{display:inline-flex}.seg{border-radius:0}.seg:first-child{border-radius:6px 0 0 6px}.seg:last-child{border-radius:0 6px 6px 0}.seg.on{background:var(--accent);color:#10131a;border-color:var(--accent);font-weight:600}.keypicker{display:flex;align-items:center;gap:.5rem}.keypicker select{font-size:1.05rem;font-weight:600}.explore-top{display:flex;gap:1.2rem;align-items:flex-start}.explore-left{flex:1 1 auto;min-width:0}.explore-toolbar{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}.kbd-hint{color:var(--muted);font-size:.78rem;margin-left:auto}.palette-headers,.palette-row{display:grid;grid-template-columns:repeat(7,1fr);gap:.45rem}.palette-header{text-align:center;color:var(--muted);font-weight:700;font-size:.95rem;padding-bottom:.2rem}.palette-row-block{margin-bottom:.75rem}.palette-row-label{color:var(--muted);font-size:.74rem;text-transform:uppercase;letter-spacing:.05em;margin:.5rem 0 .3rem;display:flex;align-items:center;gap:.8rem}.palette-cell{display:flex;flex-direction:column;gap:.4rem;min-height:1px}.chromatic-toggle{margin-top:.4rem;color:var(--muted);font-size:.8rem}.chromatic-toggle.inline{padding:.05rem .4rem}.tile{position:relative;border-radius:8px;border:1px solid var(--border);background:var(--panel);overflow:hidden;border-left-width:4px}.tile.fn-tonic{border-left-color:var(--tonic)}.tile.fn-predominant{border-left-color:var(--predominant)}.tile.fn-dominant{border-left-color:var(--dominant)}.tile.fn-chromatic{border-left-color:var(--chromatic)}.tile.fn-passing{border-left-color:var(--passing)}.tile.selected{outline:2px solid var(--accent)}.tile.playing{outline:2px solid var(--accent);box-shadow:0 0 14px #6ea8fea6;background:#2b3145}.tile.highlighted{background:#2b3145}.tile-main{width:100%;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;padding:.45rem .3rem .4rem;gap:.1rem}.tile-roman{font-weight:700;font-size:1.02rem}.tile-symbol{color:var(--muted);font-size:.78rem}.tile-shortcut{position:absolute;top:2px;left:6px;font-size:.66rem;color:var(--muted);border:1px solid var(--border);border-radius:3px;padding:0 3px;background:var(--bg)}.tile-add{position:absolute;top:1px;right:3px;border:none;background:transparent;color:var(--muted);padding:0 2px;font-size:.85rem;opacity:0}.tile:hover .tile-add{opacity:1}.tile-add:hover{color:var(--accent)}.legend{display:flex;gap:1rem;flex-wrap:wrap;margin-top:.8rem;font-size:.78rem;color:var(--muted)}.legend-item:before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}.legend-item.fn-tonic:before{background:var(--tonic)}.legend-item.fn-predominant:before{background:var(--predominant)}.legend-item.fn-dominant:before{background:var(--dominant)}.legend-item.fn-chromatic:before{background:var(--chromatic)}.legend-item.fn-passing:before{background:var(--passing)}.theory-card{flex:0 0 340px;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.9rem 1rem;font-size:.88rem;line-height:1.45;position:sticky;top:.8rem;max-height:calc(100vh - 140px - 2rem);overflow-y:auto}.theory-card.empty{color:var(--muted)}.theory-card p{margin:.2rem 0}.theory-chord-btn{display:flex;align-items:baseline;gap:.6rem;font-size:1rem;padding:.4rem .8rem}.theory-roman{font-weight:700;font-size:1.2rem}.theory-symbol{color:var(--muted)}.theory-notes{margin:.6rem 0;display:flex;gap:.4rem;flex-wrap:wrap}.note-chip{display:flex;flex-direction:column;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:6px;padding:.25rem .55rem;min-width:3rem}.note-chip-name{font-weight:700;font-size:.95rem}.note-chip-role{color:var(--muted);font-size:.66rem}.theory-songs{margin:.2rem 0;padding-left:1.1rem}.theory-songs li{margin-bottom:.3rem}.resolve-btn{margin:.15rem .25rem 0 0}.flow-toolbar{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;margin-bottom:1rem}.flow-hint{color:var(--muted);font-size:.82rem;max-width:60ch}.flow-chart{position:relative;padding:1rem 0 3.5rem}.flow-svg{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;pointer-events:none;overflow:visible}.flow-edge{fill:none;stroke:#4a5165;stroke-width:1.6}.flow-edge.dashed{stroke-dasharray:6 5}.flow-edge.hot{stroke:var(--accent);stroke-width:2.4}.flow-columns{display:flex;align-items:center;justify-content:space-between;gap:2.6rem;position:relative}.flow-column{display:flex;flex-direction:column;gap:1.1rem;align-items:stretch}.flow-node{display:flex;flex-direction:column;align-items:center;min-width:4.6rem;padding:.5rem .6rem;border-left-width:4px;position:relative;z-index:3}.flow-node.fn-tonic{border-left-color:var(--tonic)}.flow-node.fn-predominant{border-left-color:var(--predominant)}.flow-node.fn-dominant{border-left-color:var(--dominant)}.flow-node.fn-chromatic{border-left-color:var(--chromatic)}.flow-node.fn-passing{border-left-color:var(--passing)}.flow-node.selected{outline:2px solid var(--accent)}.flow-node.next{background:#2b3145;border-color:var(--accent)}.flow-any{color:var(--muted);font-size:.85rem;white-space:nowrap}.flow-any.hot{color:var(--accent);font-weight:600}.flow-legend{color:var(--muted);font-size:.8rem;max-width:80ch}.circle-view{display:flex;gap:2rem;align-items:flex-start;flex-wrap:wrap}.circle-left{flex:0 1 520px;min-width:320px}.circle-svg{width:100%;height:auto;-webkit-user-select:none;user-select:none}.circle-wedge{fill:#1a1d26;stroke:var(--border);stroke-width:1;cursor:pointer}.circle-wedge:hover{fill:#262b3a}.circle-wedge.diatonic{fill:#2a3149}.circle-wedge.diatonic.fn-tonic{fill:#1f3a2d}.circle-wedge.diatonic.fn-dominant{fill:#402327}.circle-wedge.diatonic.fn-predominant{fill:#3d3321}.circle-wedge.borrowed{fill:#2c2440}.circle-wedge.selected{stroke:var(--accent);stroke-width:2.5}.circle-wedge.playing{stroke:var(--accent);stroke-width:3;filter:brightness(1.5)}.circle-wedge.guest{stroke:var(--accent);stroke-width:2.5;stroke-dasharray:6 4;filter:brightness(1.45)}.circle-wedge.pull{stroke:#8ab0e8;stroke-width:2;filter:brightness(1.25)}.circle-label{fill:var(--muted);font-size:15px;pointer-events:none}.circle-label.in-key{fill:var(--text);font-weight:700}.circle-roman{fill:var(--accent);font-size:11px;pointer-events:none}.circle-center{fill:var(--text);font-size:26px;font-weight:700}.circle-center-sub{fill:var(--muted);font-size:13px}.circle-panel{flex:1 1 300px;max-width:420px}.circle-explain{color:var(--muted);font-size:.88rem;line-height:1.55}.circle-legend{display:flex;gap:1rem;flex-wrap:wrap;margin:.8rem 0;font-size:.8rem;color:var(--muted)}.circle-legend-item:before{content:"";display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:5px;border:1px solid var(--border)}.circle-legend-item.diatonic:before{background:#2a3149}.circle-legend-item.borrowed:before{background:#2c2440}.circle-legend-item.outside:before{background:#1a1d26}.circle-legend-item.guest:before{background:transparent;border:1.5px dashed var(--accent)}.circle-legend-item.pull:before{background:#2a3149;border:1.5px solid #8ab0e8}.circle-selected{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem}.circle-selected h3{margin-top:0}.circle-notes,.circle-dist{color:var(--muted);font-size:.85rem}.stdprog{margin-top:1.2rem}.stdprog-toggle{color:var(--muted)}.stdprog-hint{color:var(--muted);font-size:.82rem;max-width:70ch}.stdprog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:.8rem}.stdprog-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.7rem .9rem;font-size:.85rem}.stdprog-head{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}.stdprog-romans{color:var(--accent);font-weight:700;margin:.3rem 0}.stdprog-desc{color:var(--muted);margin:.3rem 0;line-height:1.45}.stdprog-songs{display:flex;flex-direction:column;gap:.15rem}.stdprog-song{color:var(--muted);font-size:.8rem}.hint{position:relative;cursor:help;color:var(--muted);font-size:.85rem;margin-left:.15rem;-webkit-user-select:none;user-select:none}.hint-pop{display:none;position:absolute;z-index:60;top:1.5em;left:-1rem;width:min(380px,70vw);background:var(--panel);border:1px solid var(--accent);border-radius:8px;padding:.65rem .85rem;color:var(--text);font-size:.82rem;line-height:1.5;font-weight:400;text-transform:none;letter-spacing:normal;box-shadow:0 6px 24px #00000080}.hint:hover .hint-pop,.hint:focus .hint-pop{display:block}.notation-toggle{margin-left:auto;color:var(--muted);font-size:.78rem;padding:.1rem .5rem}.notation-panel{margin-top:.6rem;background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:.6rem .9rem;display:grid;grid-template-columns:4.5rem 1fr;gap:.35rem .8rem;font-size:.82rem}.notation-row{display:contents}.notation-sym{font-weight:700;color:var(--accent);white-space:nowrap}.notation-text{color:var(--muted);line-height:1.4}.piano-dock{position:fixed;bottom:0;left:0;right:0;z-index:50;background:var(--bg);border-top:1px solid var(--border);padding:.5rem 1.2rem .6rem}.piano{position:relative;height:104px;max-width:1400px;margin:0 auto;border:1px solid var(--border);border-radius:8px;overflow:hidden;background:#0d0f14}.pkey{position:absolute;top:0}.pkey.white{height:100%;background:#eceef2;border:1px solid #9aa1b5;border-top:none;border-radius:0 0 4px 4px;z-index:1}.pkey.black{height:60%;background:#191c24;border:1px solid #000;border-top:none;border-radius:0 0 3px 3px;z-index:2}.pkey.white.active{background:var(--accent)}.pkey.black.active{background:#4a7fd4}.pkey.white.active-pc{background:#c9d8f2}.pkey.black.active-pc{background:#35476b}.pkey-label{position:absolute;bottom:4px;left:0;width:100%;text-align:center;font-size:.62rem;font-weight:700;color:#10131a;pointer-events:none}.pkey.black .pkey-label{color:#eceef2}.pkey-c{position:absolute;bottom:3px;left:0;width:100%;text-align:center;font-size:.58rem;color:#9aa1b5;pointer-events:none}.builder{margin-top:1.2rem;background:var(--panel);border:1px solid var(--border);border-radius:10px;padding:.8rem 1rem}.builder-head{display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}.builder-hint{color:var(--muted);font-size:.78rem}.builder-steps{display:flex;flex-wrap:wrap;gap:.4rem;min-height:2.6rem;padding:.5rem 0}.builder-empty{color:var(--muted);font-size:.85rem}.step-chip{display:flex;flex-direction:column;align-items:center;padding:.3rem .6rem}.step-chip.active{background:var(--accent);color:#10131a}.step-chip.active .step-symbol{color:#10131a}.step-roman{font-weight:700}.step-symbol{font-size:.72rem;color:var(--muted)}.builder-controls{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}.builder-saved{margin-top:.8rem;border-top:1px solid var(--border);padding-top:.5rem}.builder-saved ul{list-style:none;margin:.3rem 0;padding:0}.builder-saved li{display:flex;align-items:center;gap:.6rem;padding:.2rem 0}.saved-name{font-weight:600}.saved-key{color:var(--muted);font-size:.8rem}.quiz{max-width:980px}.quiz-head{display:flex;align-items:baseline;gap:1.5rem;flex-wrap:wrap}.quiz-scores{display:flex;gap:1.2rem;color:var(--muted)}.quiz-controls{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin:.8rem 0}.quiz-prompt{color:var(--muted);max-width:60ch}.quiz-answers{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.6rem}.quiz-answer{display:flex;flex-direction:column;align-items:center;min-width:4.4rem;border-left-width:4px}.quiz-answer.fn-tonic{border-left-color:var(--tonic)}.quiz-answer.fn-predominant{border-left-color:var(--predominant)}.quiz-answer.fn-dominant{border-left-color:var(--dominant)}.quiz-answer.fn-chromatic{border-left-color:var(--chromatic)}.quiz-answer.fn-passing{border-left-color:var(--passing)}.quiz-feedback{margin-top:.8rem;border-radius:10px;padding:.8rem 1rem;border:1px solid var(--border);background:var(--panel)}.quiz-feedback.ok{border-color:var(--tonic)}.quiz-feedback.nope{border-color:var(--dominant)}.quiz-verdict{font-weight:600;margin:0 0 .5rem}.quiz-theory{margin-top:.6rem;color:var(--muted);font-size:.88rem}.quiz-stats-toggle{margin-top:1.2rem;color:var(--muted)}.quiz-stats-table{border-collapse:collapse;margin-top:.5rem}.quiz-stats-table th,.quiz-stats-table td{border:1px solid var(--border);padding:.25rem .7rem;text-align:left;font-size:.85rem}@media (max-width: 980px){.explore-top{flex-direction:column}.theory-card{flex:1 1 auto;position:static;max-height:none}}