:root{--bg:#f6f6f7;--bg-raised:#fff;--bg-sunken:#ececee;--border:#e1e1e4;--text:#1b1b1f;--text-dim:#6b6b74;--accent:#2298e0;--accent-text:#fff;--root-color:#2298e0;--root-label-color:#fff;--shadow-sm:0 1px 2px #10111412;--shadow-md:0 6px 20px #1011141a;--key-white-bg:#fbfbfa;--key-black-bg:#232326;--key-white-label:#232326;--key-black-label:#f5f5f5;--radius-sm:6px;--radius-md:10px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--fs-2xs:9px;--fs-xs:11px;--fs-sm:12px;--fs-base:13px;--fs-md:15px;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;font:var(--fs-base) / 1.5 -apple-system, "Inter", "Segoe UI", Roboto, sans-serif}:root[data-theme=dark]{--bg:#0b0c0e;--bg-raised:#17181b;--bg-sunken:#08090a;--border:#2a2c30;--text:#f5f6f7;--text-dim:#9a9ca3;--accent:#6e7bf2;--accent-text:#0b0c0e;--root-color:#f5a623;--root-label-color:#1b1b1f;--shadow-sm:0 1px 2px #0006;--shadow-md:0 10px 28px #00000080;--key-white-bg:#d7d8db;--key-black-bg:#0a0a0c;--key-white-label:#1b1c1e;--key-black-label:#f2f2f4;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}button,input{font:inherit;color:inherit}button{cursor:pointer;transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s}h1,h2,h3{margin:0;font-weight:600}:focus{outline:none}:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--radius-sm)}.app-shell{grid-template:"topbar topbar topbar"48px"sidebar main right"1fr/260px 1fr 360px;height:100dvh;display:grid}@media (width>=901px){.app-shell.sidebar-collapsed{grid-template-columns:0 1fr 360px}.app-shell.right-panel-collapsed{grid-template-columns:260px 1fr 0}.app-shell.sidebar-collapsed.right-panel-collapsed{grid-template-columns:0 1fr 0}}.topbar{align-items:center;gap:var(--space-2);padding:0 var(--space-3);border-bottom:1px solid var(--border);grid-area:topbar;display:flex}.app-title{letter-spacing:-.01em;white-space:nowrap;text-overflow:ellipsis;min-width:0;font-weight:600;overflow:hidden}.topbar-spacer{flex:1}.icon-button{background:var(--bg-sunken);border:1px solid var(--border);border-radius:var(--radius-sm);width:32px;height:32px;font-size:var(--fs-md);justify-content:center;align-items:center;display:inline-flex}.icon-button:hover{border-color:var(--accent);background:var(--bg-raised)}.icon-button:active{transform:scale(.94)}.icon-button[aria-pressed=true]{background:var(--bg-raised);border-color:var(--border);box-shadow:var(--shadow-sm)}.icon-button:disabled{opacity:.4;cursor:default}.icon-button:disabled:hover{border-color:var(--border);background:var(--bg-sunken)}.sidebar{border-right:1px solid var(--border);padding:var(--space-3);gap:var(--space-3);flex-direction:column;grid-area:sidebar;display:flex;overflow-y:auto}.sidebar-footer{margin-top:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--border);font-size:var(--fs-xs);color:var(--text-dim);line-height:1.5}.sidebar-footer a{color:var(--text-dim);text-underline-offset:2px;text-decoration:underline}.sidebar-footer a:hover{color:var(--accent)}.main-column{padding:var(--space-4);gap:var(--space-4);flex-direction:column;grid-area:main;display:flex;overflow-y:auto}.main-column.is-empty{justify-content:center;align-items:center}.main-empty-state{text-align:center;max-width:320px;color:var(--text-dim);font-size:var(--fs-md);margin:0;line-height:1.5}.right-panel{border-left:1px solid var(--border);padding:var(--space-4);gap:var(--space-4);flex-direction:column;grid-area:right;display:flex;overflow-y:auto}.drawer-backdrop{display:none}@media (width<=900px){.app-shell{grid-template:"topbar"48px"main"1fr/1fr}.drawer-backdrop{z-index:15;background:#0006;display:block;position:fixed;inset:48px 0 0}.sidebar,.right-panel{background:var(--bg);width:min(85vw,320px);box-shadow:var(--shadow-md);z-index:20;position:fixed;top:48px;bottom:0}.sidebar{left:0}.right-panel{right:0}}.panel{border:1px solid var(--border);border-radius:var(--radius-md);background:var(--bg-raised);box-shadow:var(--shadow-md)}.panel-header{align-items:center;row-gap:var(--space-2);column-gap:var(--space-2);padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border);flex-wrap:wrap;display:flex}.panel-title{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim)}.panel-subtitle{font-size:var(--fs-xs);color:var(--text-dim)}.panel-controls{align-items:center;gap:var(--space-2);flex-wrap:wrap;margin-left:auto;display:flex}.panel-collapse-toggle{color:var(--text-dim);font-size:var(--fs-sm);background:0 0;border:none;margin-left:auto}.panel-collapse-toggle:hover{color:var(--accent)}.panel-body{padding:var(--space-4)}.dim{color:var(--text-dim)}.mode-tabs{background:var(--bg-sunken);border-radius:var(--radius-sm);gap:4px;padding:3px;display:flex}.mode-tab{font-size:var(--fs-base);color:var(--text-dim);background:0 0;border:none;border-radius:5px;flex:1;padding:6px 0}.root-selector{grid-template-columns:repeat(6,1fr);gap:4px;display:grid}.root-key{border:1px solid var(--border);background:var(--bg-raised);border-radius:var(--radius-sm);font-size:var(--fs-sm);padding:6px 0}.root-key:hover{border-color:var(--accent)}.root-key.is-accidental{color:var(--text-dim)}.root-key.is-selected{background:var(--accent);border-color:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm)}.search-input{border:1px solid var(--border);background:var(--bg-sunken);border-radius:var(--radius-sm);width:100%;font-size:var(--fs-base);padding:6px 8px}.search-input:focus-visible{border-color:var(--accent)}.library-list{flex-direction:column;display:flex;overflow-y:auto}.library-group-label{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);padding:10px 4px 2px}.library-item{text-align:left;border-radius:var(--radius-sm);font-size:var(--fs-base);background:0 0;border:none;justify-content:space-between;padding:5px 8px;display:flex}.library-item:hover{background:var(--bg-sunken)}.library-item.is-selected{background:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm)}.library-item-meta{color:var(--text-dim);font-size:var(--fs-sm)}.library-item.is-selected .library-item-meta{color:inherit;opacity:.8}.library-empty{color:var(--text-dim);font-size:var(--fs-base);padding:12px 8px}.segmented{background:var(--bg-sunken);border-radius:var(--radius-sm);gap:4px;padding:3px;display:flex}.segmented-option{font-size:var(--fs-base);color:var(--text-dim);white-space:nowrap;background:0 0;border:none;border-radius:5px;flex:1;padding:5px 8px}.mode-tab.is-selected,.segmented-option.is-selected{background:var(--bg-raised);color:var(--text);box-shadow:var(--shadow-sm)}.keyboard-scroll{padding-bottom:4px;overflow-x:auto}.keyboard-svg{display:block}.piano-key{cursor:pointer}.piano-rect{stroke:var(--border);stroke-width:1px}.piano-rect.white{fill:var(--key-white-bg);filter:drop-shadow(0 1px 1px #0000002e)}.piano-rect.black{fill:var(--key-black-bg);filter:drop-shadow(0 2px 2px #00000073)}.piano-rect.is-tone.white{fill:color-mix(in srgb, var(--accent) 35%, var(--key-white-bg))}.piano-rect.is-tone.black{fill:color-mix(in srgb, var(--accent) 55%, var(--key-black-bg))}.piano-rect.is-root{fill:var(--root-color)!important}.piano-active-overlay{fill:var(--accent);fill-opacity:.4;stroke:var(--accent);stroke-width:1.5px}.key-label{font-size:var(--fs-2xs);fill:var(--key-white-label);pointer-events:none;-webkit-user-select:none;user-select:none}.key-label.on-black{fill:var(--key-black-label)}.piano-rect.is-root+.key-label{fill:var(--root-label-color)}.fretboard-scroll{padding-bottom:4px;overflow-x:auto}.fretboard-svg{display:block}.fret-neck{fill:var(--bg-sunken)}.fret-nut{fill:var(--text-dim)}.fret-wire{stroke:var(--border);stroke-width:2px}.fret-string{stroke:var(--text-dim);stroke-width:1px}.fret-inlay{fill:var(--text-dim);opacity:.5}.fret-number{font-size:var(--fs-xs);fill:var(--text);font-weight:600}.fret-string-label{font-size:var(--fs-xs);fill:var(--text-dim);font-weight:600}.fret-position{cursor:pointer}.fret-window-stepper{align-items:center;gap:var(--space-1);display:flex}.fret-window-stepper .icon-button{width:26px;height:26px;font-size:var(--fs-base)}.fret-window-label{font-size:var(--fs-sm);font-variant-numeric:tabular-nums;color:var(--text-dim);text-align:center;min-width:34px}.fret-marker{fill:var(--key-white-bg);stroke:var(--border);stroke-width:1px}.fret-marker.is-tone{fill:color-mix(in srgb, var(--accent) 35%, var(--key-white-bg));stroke:color-mix(in srgb, var(--accent) 45%, var(--key-white-bg));stroke-width:1.5px}.fret-marker.is-empty{fill:#0000;stroke:none}.fret-marker.is-root{stroke-width:1.5px;fill:var(--root-color)!important;stroke:color-mix(in srgb, var(--root-color) 65%, black)!important}.fret-active-overlay{fill:var(--accent);fill-opacity:.4;stroke:var(--accent);stroke-width:1.5px;pointer-events:none}.fret-label{font-size:var(--fs-2xs);fill:var(--key-white-label);pointer-events:none;-webkit-user-select:none;user-select:none}.fret-marker.is-root+.fret-label,.fret-marker.is-root~.fret-active-overlay+.fret-label{fill:var(--root-label-color)}.fretboard-note{margin:0 0 var(--space-3);font-size:var(--fs-sm);color:var(--text-dim)}.fret-barre{fill:color-mix(in srgb, var(--accent) 30%, var(--key-white-bg));stroke:color-mix(in srgb, var(--accent) 45%, var(--key-white-bg));stroke-width:1.5px}.fret-mute-mark{font-size:var(--fs-md);fill:var(--text-dim);pointer-events:none;-webkit-user-select:none;user-select:none;font-weight:700}.staff-container{overflow-x:auto}.staff-container svg{display:block}.staff-key-label{margin:0 0 var(--space-2);font-size:var(--fs-sm)}.info-grid{gap:var(--space-2) var(--space-3);grid-template-columns:auto 1fr;margin:0 0 4px;display:grid}.info-grid dt{color:var(--text-dim);font-size:var(--fs-sm);padding-top:4px}.info-grid dd{font-variant-numeric:tabular-nums;margin:0}.chip-row{flex-wrap:wrap;gap:4px;display:flex}.chip{border:1px solid var(--border);background:var(--bg-sunken);font-size:var(--fs-base);font-variant-numeric:tabular-nums;border-radius:5px;padding:2px 7px}.chip.is-root{border-color:var(--root-color);color:var(--root-color);font-weight:600}.chip.is-active{background:var(--accent);border-color:var(--accent);color:var(--accent-text);box-shadow:var(--shadow-sm)}.info-heading{font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--text-dim);margin:var(--space-5) 0 var(--space-2)}.link-list{flex-direction:column;gap:2px;margin:0;padding:0;list-style:none;display:flex}.link-item{align-items:center;gap:var(--space-2);text-align:left;border-radius:var(--radius-sm);width:100%;font-size:var(--fs-base);background:0 0;border:none;padding:4px 6px;display:flex}.link-item:hover{background:var(--bg-sunken);color:var(--accent)}.link-item-degree{color:var(--text-dim);font-size:var(--fs-xs);text-align:right;width:12px}.link-item.inline{border:1px solid var(--border);border-radius:5px;width:auto;padding:1px 6px;display:inline-flex}.key-nav-link{text-align:left;border:1px solid var(--border);background:var(--bg-sunken);width:100%;color:var(--accent);border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);font-size:var(--fs-base);margin-bottom:var(--space-4);display:block}.key-nav-link:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}.accidental-order{font-variant-numeric:tabular-nums;gap:3px;display:flex}.accidental-order span{color:var(--text-dim);font-size:var(--fs-sm)}.accidental-order span.is-active{color:var(--root-color);font-weight:600}.circle-wrap{align-items:center;gap:var(--space-2);flex-direction:column;display:flex}.circle-svg{width:100%;max-width:328px}.circle-ring-guide{fill:none;stroke:var(--border);stroke-width:1px}.circle-accidental-count{fill:var(--text-dim);font-size:9.5px;font-weight:600}.circle-node{cursor:pointer}.circle-node-dot{fill:var(--bg-sunken);stroke:var(--border);stroke-width:1px;filter:drop-shadow(0 1px 1.5px #0000004d)}.circle-node-dot.is-root-match{stroke:var(--root-color);stroke-width:2px}.circle-node-dot.is-neighbor,.circle-node-dot.is-relative,.circle-node-dot.is-parallel{stroke:var(--accent);stroke-width:1.5px;stroke-dasharray:2 2}.circle-node-dot.is-selected{fill:var(--accent);stroke:color-mix(in srgb, var(--accent) 65%, black);stroke-width:1.5px}.circle-node-label{fill:var(--text);pointer-events:none;-webkit-user-select:none;user-select:none;font-size:11px;font-weight:500}.circle-node-dot.is-selected+.circle-node-label{fill:var(--accent-text)}.circle-tooltip{min-height:14px;font-size:var(--fs-xs);text-align:center;margin:0}