:root{color-scheme:dark;--bg:#10191c;--panel:#19262a;--line:#33464b;--text:#e6eee9;--muted:#a3b4b4;--accent:#e7bd73;--green:#a8dcc5}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:15px system-ui,Segoe UI,sans-serif}main{max-width:1560px;margin:auto;padding:28px 38px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:26px}.eyebrow{color:var(--accent);font-size:11px;letter-spacing:2.5px;margin:0 0 8px}h1{font:500 32px Georgia,serif;margin:0}h1 span{font:14px system-ui;color:var(--muted);margin-left:22px}button,select{font:inherit;color:var(--text);background:#203237;border:1px solid #43585d;border-radius:6px;min-height:35px;padding:6px 12px;cursor:pointer}button:hover,select:hover{background:#30464b}button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--accent);outline-offset:3px}button.active{background:var(--accent);border-color:var(--accent);color:#182326;font-weight:650}button:disabled{opacity:.35;cursor:default}label{font-size:10px;letter-spacing:1.5px;color:var(--muted);display:block;margin-bottom:7px;font-weight:650}.controls{display:flex;gap:28px;align-items:start;margin-bottom:20px}.segmented{display:flex;gap:4px}.chords{flex:1}.chords .segmented{gap:6px}.chords button{min-width:48px}.subtle,#chordHint{color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}.instrument{border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}.board-toolbar{display:flex;align-items:center;justify-content:space-between;padding:15px 20px;border-bottom:1px solid var(--line)}.view-controls{display:flex;gap:5px}.view-controls button{min-height:30px;padding:3px 10px}#board{display:block;width:100%;min-height:310px;touch-action:none;user-select:none}#board text{font-family:system-ui,sans-serif;pointer-events:none}#board .interactive{cursor:pointer}#board .interactive:hover{filter:brightness(1.35)}.position-row{border-top:1px solid var(--line);display:flex;gap:14px;align-items:center;padding:10px 20px}.position-row label{margin:0}.position-row select{font-size:13px}#preview{width:120px;height:60px;flex-shrink:0}.focus-control{flex:1;padding:0 15px}.focus-control label{margin-bottom:7px}.focus-control input{width:100%;accent-color:var(--accent)}.check{display:flex;gap:6px;align-items:center;font-size:11px;letter-spacing:0;white-space:nowrap}.selection-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}.selection{padding:18px 22px;background:var(--panel);border:1px solid var(--line);border-radius:10px}.selection-heading{display:flex;justify-content:space-between;align-items:center}.selection-heading button{min-height:28px;padding:1px 10px}.selection-heading label{margin:0}h2{font-size:20px;font-weight:500;margin:8px 0}.selection p{color:var(--muted);font-size:13px;line-height:1.6;margin:6px 0 12px;min-height:40px}.chips{display:flex;gap:6px;flex-wrap:wrap}.chips button{font-size:12px;min-height:29px;padding:4px 9px}.text-button{background:none;border:0;padding:10px 0 0;color:var(--green);font-size:12px}.legend{display:flex;gap:24px;flex-wrap:wrap;font-size:12px;color:var(--muted);margin-top:22px}.legend span{display:flex;align-items:center;gap:8px}.dot{display:inline-block;width:13px;height:13px;background:#344b50;border:1px solid #92b0ae;border-radius:50%}.dot.root{border:2px solid var(--green)}.dot.chord{background:#c8d4d1;border-color:#e7eeea}.dot.grip{background:var(--green);border:2px solid white}footer p{font-size:12px;color:var(--muted);line-height:1.6}#guide{padding:16px 20px;background:var(--panel);border-left:3px solid var(--accent);margin-bottom:20px;line-height:1.7;color:var(--muted)}@media(max-width:1000px){main{padding:20px}.controls{gap:14px;flex-wrap:wrap}h1 span{display:block;margin:8px 0 0}.position-row{flex-wrap:wrap}.focus-control{min-width:200px}.selection-grid{gap:12px}.legend{gap:14px}}@media(max-width:650px){.selection-grid{grid-template-columns:1fr}.board-toolbar{flex-wrap:wrap;gap:12px}#board{min-height:240px}.chords button{min-width:36px;padding:6px}.controls{gap:15px}}
[hidden]{display:none!important}
.app-header{justify-content:flex-start;gap:32px;flex-wrap:wrap}
.app-header .app-heading{flex-shrink:0}
.app-header h1 span{display:block;margin:8px 0 0}
.app-header #help{margin-left:auto}
.workspace-tabs{display:flex;gap:8px;margin:0;padding:0;border:0}
@media(max-width:650px){.app-header{gap:16px}.app-header .app-heading{flex-basis:100%}.workspace-tabs button{padding-inline:14px}}
.workspace-tabs button{padding:8px 20px}
.progression-intro h2{font:500 28px Georgia,serif;margin:8px 0 12px}
.progression-intro>p:not(.eyebrow){color:var(--muted);line-height:1.6;margin:0 0 24px}
.progression-toolbar{display:flex;gap:35px;align-items:flex-start;background:var(--panel);padding:20px 24px;border:1px solid var(--line);border-radius:10px;margin-bottom:24px}
#progressionForm{flex:1;min-width:0}
.progression-entry{display:flex;gap:10px;margin-bottom:10px}
#progressionInput{min-width:120px;max-width:460px;flex:1;font:500 20px system-ui;letter-spacing:2px;background:#101f23;color:var(--text);border:1px solid #55706d;border-radius:6px;padding:8px 14px}
#progressionInput[aria-invalid="true"]{border-color:#e7ad9c}
#progressionError{color:#e7ad9c;margin:8px 0 0;font-size:13px}
#progressionError:empty{display:none}
.progression-caption{display:flex;gap:18px;align-items:baseline;margin-bottom:14px}
.progression-caption strong{font-weight:500;font-size:19px}
#progressionSummary{color:var(--muted);font-size:13px}
.progression-card-grid{display:flex;gap:16px;overflow-x:auto;padding:2px 2px 14px;scrollbar-color:#54786b #19262a}
.progression-card{flex:1 0 165px;min-width:165px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.step-number{font-size:10px;letter-spacing:1.8px;color:var(--muted);margin:0 0 15px;text-align:center}
.degree-stack{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.key-degree{display:grid;grid-template-columns:1fr 45px;align-items:center;min-height:37px;border:1px solid transparent;border-radius:7px;color:#819695;padding:4px 10px;background:#152226}
.degree-number{text-align:center;font-size:18px;margin-left:45px}
.tone-role{text-align:right;font-size:11px;color:#78908a}
.key-degree.chord-tone{background:#a8dcc519;border-color:#729b89;color:#d6f4e5}
.chord-tone .degree-number{font-weight:650}
.chord-tone .tone-role{color:#a8dcc5}
.progression-chord{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.progression-degree{font:500 38px Georgia,serif;color:var(--green)}
.progression-chord strong{font-size:20px;font-weight:500;display:block}
.progression-chord div>span{font-size:12px;color:var(--muted);display:block;margin-top:2px}
.chord-spelling{text-align:center;color:var(--muted);font-size:13px;letter-spacing:1px;margin:12px 0 0}
.progression-legend{display:flex;flex-wrap:wrap;gap:22px;color:var(--muted);font-size:12px;margin:14px 0}
.progression-legend span{display:flex;align-items:center;gap:8px}
.progression-legend i{display:inline-block;width:15px;height:12px;border-radius:3px;border:1px solid #729b89;background:#a8dcc519}
.progression-footnote{color:var(--muted);font-size:12px;line-height:1.7;max-width:850px}
@media(max-width:700px){.progression-toolbar{flex-direction:column;gap:20px;padding:18px}.progression-entry{flex-wrap:wrap}#progressionForm{width:100%}.progression-caption{flex-wrap:wrap;gap:8px 15px}.progression-card{flex-basis:160px}}