.play-scale-buttons{display:flex;gap:var(--sp-3);justify-content:center;flex-wrap:wrap;margin:var(--sp-4) 0}.play-scale-btn{display:inline-flex;align-items:center;gap:var(--sp-2);padding:var(--sp-3) var(--sp-5);background:var(--bg-elevated);border:1px solid var(--border-accent-subtle);border-radius:var(--radius-md);color:var(--text-primary);font-family:var(--font-body);font-size:var(--text-sm);cursor:pointer;transition:all var(--transition-fast);min-height:44px}.play-scale-btn:hover{background:var(--bg-hover);border-color:var(--gold-muted)}.play-scale-btn:active{transform:scale(.98)}.play-scale-btn-active{background:var(--bg-accent-medium);border-color:var(--gold);color:var(--gold-light)}.play-scale-icon{color:var(--gold);font-size:.85em}.play-scale-dir{color:var(--text-muted);font-size:1.1em}.play-scale-btn-active .play-scale-dir{color:var(--gold-light)}.scale-kb{width:100%;max-width:680px;margin:0 auto;padding:var(--sp-3);border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border-accent-subtle)}.scale-kb-keys{position:relative;width:100%;height:180px;-webkit-user-select:none;user-select:none}.scale-kb-white{position:absolute;top:0;height:100%;background:#f8f5ef;border:1px solid rgba(0,0,0,.15);border-radius:0 0 3px 3px;box-sizing:border-box;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px}.scale-kb-white.scale-kb-highlight{background:linear-gradient(180deg,#f8f5ef 0,#f8e9c4);border-color:var(--gold-muted);box-shadow:inset 0 0 0 1px var(--gold-muted)}.scale-kb-white.scale-kb-root{background:linear-gradient(to bottom,#f8f5ef 0,var(--gold) 100%);border-color:var(--gold);box-shadow:inset 0 0 0 2px var(--gold)}.scale-kb-black{position:absolute;top:0;width:calc(100% / 15.1 * .66);height:58%;background:#1a1a1f;border:1px solid rgba(0,0,0,.4);border-radius:0 0 3px 3px;transform:translateX(-50%);z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;box-sizing:border-box}.scale-kb-black.scale-kb-highlight{background:linear-gradient(to bottom,#342a18 0,var(--gold-muted) 100%);border-color:var(--gold)}.scale-kb-black.scale-kb-root{background:linear-gradient(to bottom,#2a1f08 0,var(--gold) 100%);border-color:var(--gold-light)}.scale-kb-label{font-family:var(--font-mono);font-size:.7rem;font-weight:600;color:#2a2520;line-height:1;letter-spacing:-.02em;pointer-events:none}.scale-kb-root .scale-kb-label{color:#1a1814}.scale-kb-label-black{color:#f5f0e8}.scale-kb-black.scale-kb-highlight .scale-kb-label-black{color:#fff8e8}[data-theme=dark] .scale-kb{background:var(--bg-elevated)}[data-theme=dark] .scale-kb-white{background:#eae4d5;border-color:rgba(0,0,0,.35)}[data-theme=dark] .scale-kb-white.scale-kb-highlight{background:linear-gradient(180deg,#eae4d5 0,#d8bf7e)}[data-theme=dark] .scale-kb-white.scale-kb-root{background:linear-gradient(to bottom,#eae4d5 0,var(--gold) 100%)}@media (max-width:560px){.scale-kb-keys{height:140px}.scale-kb-label{font-size:.62rem}}