:root{--bg:#f6f4f8;--bg-panel:#fff;--bg-sunken:#edeaf1;--line:#d8d3e0;--line-soft:#e8e4ee;--fg:#1c1922;--fg-dim:#5d5670;--fg-faint:#8b849b;--accent:#9a7b12;--accent-ink:#fff;--accent-wash:#efe3c0;--held:#1c8a64;--moving:#c2453c;--bass:#6a4fc0;--probe:#2f6fd0;--danger:#c2453c;--key-white:#fff;--key-white-edge:#a7a0b6;--key-black:#2b2732;--role-ink:#fff;--radius:10px;--shadow:0 1px 2px rgba(28,25,34,.06),0 8px 24px rgba(28,25,34,.05);--display:"Fraunces","Iowan Old Style",Palatino,Georgia,serif;--sans:"Karla",ui-sans-serif,system-ui,"Segoe UI",Helvetica,Arial,sans-serif;--mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,Consolas,monospace}@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#17151c;--bg-panel:#201d28;--bg-sunken:#171520;--line:#332e40;--line-soft:#29253300;--line-soft:#292533;--fg:#ece8f2;--fg-dim:#a49bb6;--fg-faint:#726a84;--accent:#d4ab34;--accent-ink:#1b1710;--accent-wash:#3d3218;--held:#3fae86;--moving:#e0685f;--bass:#8b6fd4;--probe:#5b9cf0;--danger:#e0685f;--key-white:#e9e5ef;--key-white-edge:#6f6880;--key-black:#14121a;--role-ink:#14121a;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.22)}}:root[data-theme="dark"]{--bg:#17151c;--bg-panel:#201d28;--bg-sunken:#171520;--line:#332e40;--line-soft:#292533;--fg:#ece8f2;--fg-dim:#a49bb6;--fg-faint:#726a84;--accent:#d4ab34;--accent-ink:#1b1710;--accent-wash:#3d3218;--held:#3fae86;--moving:#e0685f;--bass:#8b6fd4;--probe:#5b9cf0;--danger:#e0685f;--key-white:#e9e5ef;--key-white-edge:#6f6880;--key-black:#14121a;--role-ink:#14121a;--shadow:0 1px 2px rgba(0,0,0,.3),0 10px 30px rgba(0,0,0,.22)}*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}body{margin:0;background:var(--bg);color:var(--fg);font:15px/1.55 var(--sans);-webkit-font-smoothing:antialiased}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}h1,h2{margin:0}h1{font-family:var(--display);font-weight:600;font-size:21px;letter-spacing:-0.01em;font-optical-sizing:auto}h2{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--fg-faint)}code{font-family:var(--mono);font-size:.9em;color:var(--fg-dim)}b,strong{font-weight:600}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}.head-controls{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-left:auto}.seg-group{display:flex;align-items:center;gap:7px}.seg-label{font-size:12.5px;color:var(--fg-dim);white-space:nowrap}.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}.seg button{border:0;border-radius:0;background:var(--bg-sunken);padding:5px 9px;font-size:12.5px;color:var(--fg-dim);border-right:1px solid var(--line)}.seg button:last-child{border-right:0}.seg button:hover{background:var(--accent-wash);color:var(--fg)}.seg button.on{background:var(--accent);color:var(--accent-ink);font-weight:600}.seg button:focus-visible{outline-offset:-2px}.voicing-why{font-size:12px;color:var(--fg-faint);line-height:1.45;flex:1 1 15ch;min-width:0}main{max-width:1380px;margin:0 auto;padding:14px 20px 40px;display:flex;flex-direction:column;gap:11px}.panel{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:13px 16px}.panel-head{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}.progression-panel .panel-head{align-items:center;row-gap:8px}.progression-panel h1{margin-right:2px}.hint{color:var(--fg-faint);font-size:12.5px}.field{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg-dim)}.field>span:first-child{white-space:nowrap}select,input[type="text"],input.prog-input{background:var(--bg-sunken);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:5px 8px;font:inherit;font-size:13px}select{cursor:pointer}input[type="range"]{width:68px;accent-color:var(--accent);cursor:pointer}output{font-family:var(--mono);font-size:12px;min-width:26px;color:var(--fg-dim);font-variant-numeric:tabular-nums}button{background:var(--bg-sunken);color:var(--fg);border:1px solid var(--line);border-radius:6px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;transition:background .12s,border-color .12s,color .12s}button:hover{border-color:var(--accent)}button.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}button.primary:hover{filter:brightness(1.07)}button.ghost{background:transparent}button.small{padding:4px 9px;font-size:12px}button.danger:hover{border-color:var(--danger);color:var(--danger)}button.toggle{background:var(--bg-sunken);color:var(--fg-dim)}.build-step{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-dim);margin:6px 0 4px}.pal-group.builder{border-top:1px solid var(--line);padding-top:10px;margin-top:14px}button.toggle.on{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}.prog-input{width:100%;font-family:var(--mono);font-size:16px;padding:10px 12px;letter-spacing:.2px}.chips{display:flex;flex-wrap:wrap;align-items:stretch;gap:0;margin:12px 0 2px;min-height:62px}.chip{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:76px;padding:6px 12px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:7px;cursor:grab;user-select:none;transition:border-color .12s,background .12s}.chip:hover{border-color:var(--accent)}.chip.selected{border-color:var(--accent);background:var(--accent-wash)}.chip.playing{border-color:var(--held);background:var(--accent-wash)}.chip.invalid{border-color:var(--danger)}.chip.dragging{opacity:.4}.chip-symbol{font-family:var(--mono);font-size:17px;font-weight:700;letter-spacing:.2px}.chip-roman{font-family:var(--mono);font-size:11px;color:var(--fg-dim)}.chip-meta{font-size:9.5px;color:var(--fg-faint);letter-spacing:.06em;text-transform:uppercase}.chip.borrowed .chip-roman{color:var(--moving)}.barline{width:1px;background:var(--line);margin:6px 7px;align-self:stretch}.gap{width:22px;align-self:center;height:34px;padding:0;display:flex;align-items:center;justify-content:center;color:transparent;background:0;border:0;cursor:pointer;font-size:17px;line-height:1;transition:color .12s}.chips:hover .gap{color:var(--fg-faint)}.gap:hover,.gap.active{color:var(--accent)}.transport{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding-top:11px;margin-top:8px;border-top:1px solid var(--line-soft)}.keyboard-panel{padding:12px 15px 10px}.piano{width:100%;overflow-x:auto}.piano-svg{width:100%;height:auto;min-width:620px;display:block;margin:0 auto;touch-action:none}.key{transition:fill .08s}.key-white{fill:var(--key-white);stroke:var(--key-white-edge);stroke-width:.6}.key-black{fill:var(--key-black);stroke:var(--key-black);stroke-width:.5}.key.pressed,.key.role-probe{fill:var(--probe)!important}.key.role-held{fill:var(--held)!important}.key.role-moving{fill:var(--moving)!important}.key.role-bass,.key.role-pedal{fill:var(--bass)!important}.key.role-ghost{fill:var(--line)!important}.key-label{font-family:var(--mono);font-size:8px;font-weight:700;fill:transparent;pointer-events:none}.key-label.on{fill:var(--role-ink)}.legend{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-faint);margin-top:7px}.legend .spacer{margin-left:auto}.swatch{width:11px;height:11px;border-radius:3px;display:inline-block;vertical-align:-1px}.swatch.role-held{background:var(--held)}.swatch.role-moving{background:var(--moving)}.swatch.role-bass{background:var(--bass)}.swatch.role-probe{background:var(--probe)}.vl-readout{margin-top:8px;padding-top:8px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--fg);min-height:22px;display:grid;grid-template-columns:repeat(2,minmax(0,620px));justify-content:start;column-gap:26px;row-gap:3px;align-content:start}@media(max-width:900px){.vl-readout{grid-template-columns:1fr}}.ro-row{display:grid;grid-template-columns:118px 1fr;gap:12px;align-items:baseline}@media(max-width:620px){.ro-row{grid-template-columns:1fr;gap:1px}}.ro-key{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--fg-faint);font-weight:700;text-align:right;padding-top:2px}@media(max-width:620px){.ro-key{text-align:left}}.ro-val{line-height:1.5}.ro-dim{color:var(--fg-faint);font-size:12px}.ro-sep{color:var(--line);padding:0 1px}.ro-roman{color:var(--accent);font-weight:700}.ro-total{grid-column:1 / -1;margin-top:4px;padding-top:6px;border-top:1px dashed var(--line-soft)}.ro-total .ro-val{color:var(--fg-dim);font-size:12.5px}.ro-total b{font-variant-numeric:tabular-nums;color:var(--fg)}.vl-readout b{color:var(--fg)}.vl-readout .mono{font-family:var(--mono);letter-spacing:.3px}.vl-held b,.vl-held{color:var(--held)}.vl-moving b,.vl-moving{color:var(--moving)}.vl-bass b,.vl-bass{color:var(--bass)}.lower{display:grid;grid-template-columns:286px 1fr;gap:20px;align-items:start}@media(max-width:900px){.lower{grid-template-columns:1fr}}.circle-svg{width:100%;height:auto;display:block}.seg-bg{fill:var(--bg-sunken);stroke:var(--line);stroke-width:1;transition:fill .12s}.circle-seg{cursor:pointer}.circle-seg:hover .seg-bg{fill:var(--accent-wash)}.circle-seg.is-diatonic .seg-bg{fill:color-mix(in srgb,var(--accent) 20%,var(--bg-sunken))}.circle-seg.is-used .seg-bg{fill:color-mix(in srgb,var(--fg-faint) 30%,var(--bg-sunken))}.circle-seg.is-key .seg-bg{fill:var(--accent);stroke:var(--accent)}.circle-seg.is-key .seg-label{fill:var(--accent-ink);font-weight:700}.circle-seg.is-current .seg-bg{fill:var(--held);stroke:var(--held);stroke-width:2.5;paint-order:stroke}.circle-seg.is-current .seg-label{fill:var(--role-ink);font-weight:700}.seg-label{font-family:var(--mono);font-size:11.5px;fill:var(--fg);pointer-events:none}.key-note{margin-top:10px;font-size:12.5px;color:var(--fg-dim);text-align:center}.key-aside{margin-top:5px;font-size:11.5px;color:var(--fg-faint);line-height:1.45;max-width:30ch;margin-inline:auto}.tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-bottom:12px}.tabs button{background:0;border:0;border-bottom:2px solid transparent;border-radius:0;padding:7px 11px;color:var(--fg-dim);font-size:13px}.tabs button:hover{color:var(--fg);border-color:transparent}.tabs button.active{color:var(--fg);border-bottom-color:var(--accent);font-weight:600}.tab-pane{display:none}.tab-pane.active{display:block}.rows{display:flex;flex-direction:column;gap:5px}.row{display:flex;align-items:baseline;gap:12px;padding:9px 11px;background:var(--bg-sunken);border:1px solid var(--line-soft);border-radius:7px;cursor:pointer;transition:border-color .12s}.row:hover{border-color:var(--accent)}.row-symbol{font-family:var(--mono);font-size:14.5px;font-weight:700;min-width:74px}.row-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}.row-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}.row-kind{font-size:12.5px;color:var(--fg);font-weight:600}.row-notation{font-family:var(--mono);font-size:11.5px;color:var(--accent);border:1px solid var(--accent-wash);background:var(--accent-wash);border-radius:4px;padding:1px 6px;white-space:nowrap}.row-why{font-size:12.5px;color:var(--fg-dim);line-height:1.5}.row-tag{font-size:11px;font-family:var(--mono);color:var(--held);margin-left:auto;white-space:nowrap}.tab-intro{font-size:12.5px;color:var(--fg-dim);line-height:1.55;margin-bottom:14px}.tab-intro b{color:var(--fg)}.sugg-group{margin-bottom:16px}.sugg-title{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:12px;font-weight:700;color:var(--fg);text-transform:uppercase;letter-spacing:.06em;margin-bottom:7px}.sugg-sub{font-size:12px;font-weight:400;text-transform:none;letter-spacing:0;color:var(--fg-faint)}.pal-group{margin-bottom:14px}.pal-title{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-faint);margin-bottom:6px;font-weight:700}.pal-chips{display:flex;flex-wrap:wrap;gap:5px}.pal-chip{font-family:var(--mono);font-size:13px;font-weight:500;padding:5px 10px;background:var(--bg-sunken);border:1px solid var(--line);border-radius:6px;cursor:pointer}.pal-chip:hover{border-color:var(--accent);background:var(--accent-wash)}.pal-chip .deg{color:var(--fg-faint);font-size:10px;margin-left:5px}.detail-grid{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:13.5px;align-items:baseline;margin:0}.detail-grid dt{color:var(--fg-faint);font-size:12px}.detail-grid dd{margin:0;font-family:var(--mono)}.empty{color:var(--fg-faint);font-size:13px;padding:10px 2px;max-width:62ch;line-height:1.6}.lib-item .row-symbol{min-width:0;font-size:12.5px;font-weight:500}.lib-name{font-weight:600;min-width:148px;font-size:13.5px}.lib-actions{margin-left:auto;display:flex;gap:6px}.toolbar-row{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}.overlay{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 78%,transparent);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;z-index:60;padding:20px}.overlay.hidden{display:none}.overlay-card{background:var(--bg-panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px 26px;max-width:560px;width:100%;max-height:85vh;overflow:auto}.overlay-card h2{margin-bottom:10px}.overlay-card h2:not(:first-child){margin-top:20px}.overlay-card dl{display:grid;grid-template-columns:76px 1fr;gap:5px 14px;margin:0;font-size:13.5px}.overlay-card dt{font-family:var(--mono);color:var(--accent);font-size:12.5px}.overlay-card dd{margin:0;color:var(--fg-dim)}.overlay-card>button{margin-top:20px}.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--bg-panel);border:1px solid var(--accent);color:var(--fg);padding:9px 16px;border-radius:7px;font-size:13px;z-index:70;box-shadow:var(--shadow)}