.sc-stage{gap:var(--space-2);align-items:stretch}.sc-head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}.sc-title{display:grid;gap:4px;min-width:0}.sc-title__name{font-family:var(--font-heading);font-weight:700;font-size:clamp(1.8rem,3.6vw,2.6rem);line-height:1.05;letter-spacing:-.01em}.sc-title__meta{font-size:var(--fs-sm);font-weight:700;color:var(--color-gray)}.sc-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}.sc-pickers{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:10px;align-items:center}.sc-roots{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}.sc-roots::-webkit-scrollbar{display:none}.sc-root{flex:1 0 auto;min-width:46px;min-height:var(--tap-sm);padding:0 8px;border-radius:999px;border:1px solid var(--color-hairline);background:var(--color-surface-2);color:var(--color-ink-soft);font-weight:700;font-size:var(--fs-base);box-shadow:var(--shadow-sm);touch-action:manipulation}.sc-root:hover{border-color:var(--color-accent);color:var(--color-ink)}.sc-root[aria-pressed=true]{background:var(--color-accent);border-color:var(--color-accent);color:var(--color-on-accent)}.sc-select select{font-weight:700}.sc-visual{display:grid;gap:var(--space-2);align-items:center}@media (min-width: 960px){.sc-visual{grid-template-columns:minmax(0,46fr) minmax(0,54fr);gap:var(--space-3)}}.sc-kb-wrap,.sc-fb-wrap{width:100%}.sc-kb{width:100%;aspect-ratio:560 / 120;height:auto;display:block;touch-action:manipulation}@media (max-width: 600px){.sc-kb{aspect-ratio:280 / 120;max-height:132px}}.sc-key rect{stroke:var(--color-hairline);stroke-width:1;transition:fill .12s ease}.sc-key--w rect{fill:#f2f1ed}.sc-key--b rect{fill:#24231f}:root[data-theme=light] .sc-key--w:not(.is-in):not(.is-root):not(.is-sounding) rect{fill:#fff}.sc-key text{font:700 12px var(--font-body);text-anchor:middle;pointer-events:none}.sc-key--w text{fill:#121212}.sc-key--b text{fill:#f2f1ed;font-size:10.5px}.sc-key--w.is-in rect{fill:#bfefe1}.sc-key--b.is-in rect{fill:#0f6e57}.sc-key.is-root rect{fill:var(--color-accent)}.sc-key.is-root text{fill:#121212}.sc-key.is-sounding rect{fill:var(--color-warn)}.sc-fb{width:100%;aspect-ratio:640 / 170;height:auto;display:block;touch-action:manipulation}.sc-fret{stroke:var(--color-hairline);stroke-width:2}.sc-nut{stroke:var(--color-ink-soft);stroke-width:5}.sc-str{stroke:var(--color-gray);opacity:.7}.sc-inlay{fill:var(--color-surface-3)}.sc-fnum{fill:var(--color-gray);font:700 12px var(--font-body);text-anchor:middle}.sc-dot circle{fill:var(--color-surface-3);stroke:var(--color-ink-soft);stroke-width:1.5}.sc-dot text{fill:var(--color-ink);font:700 10px var(--font-body);text-anchor:middle;pointer-events:none}.sc-dot.is-root circle{fill:var(--color-accent);stroke:var(--color-accent)}.sc-dot.is-root text{fill:var(--color-on-accent)}.sc-dot.is-open circle{stroke-dasharray:3 2}.sc-dot.is-sounding circle{fill:var(--color-warn);stroke:var(--color-warn)}.sc-dot.is-sounding text{fill:#121212}.sc-notes{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.sc-notes li{display:grid;justify-items:center;min-width:52px;padding:5px 10px;border-radius:var(--radius-media);background:var(--color-surface-2);border:1px solid var(--color-hairline);box-shadow:var(--shadow-sm);transition:border-color .12s ease,background .12s ease}.sc-notes li:first-child{border-color:var(--color-accent)}.sc-notes li.is-sounding{background:var(--color-accent-dim);border-color:var(--color-accent)}.sc-note__deg{font-size:var(--fs-xs);font-weight:700;color:var(--color-gray)}.sc-note__name{font-family:var(--font-heading);font-weight:700;font-size:var(--fs-lg);line-height:1.2}.sc-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-2);align-items:start}.sc-about{margin:0;font-size:var(--fs-base);color:var(--color-ink-soft)}.sc-stage:fullscreen .sc-title__name,.sc-stage.is-stage-mode .sc-title__name{font-size:clamp(2.4rem,6vh,4rem)}@media (max-width: 760px){.sc-pickers{grid-template-columns:minmax(0,1fr);gap:8px}}@media (max-width: 600px){.sc-stage{gap:10px}.sc-title__name{font-size:1.55rem}.sc-actions .play{width:56px;height:56px}.sc-actions .play svg{width:22px;height:22px}.sc-notes{gap:4px;flex-wrap:nowrap;justify-content:space-between}.sc-notes li{flex:1 1 0;min-width:0;padding:3px 2px}.sc-note__name{font-size:var(--fs-base)}.sc-fb-wrap{overflow-x:auto;scrollbar-width:thin}.sc-fb{width:640px;max-width:none}}