.control-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--band-violet);cursor:pointer;border:2px solid var(--color-bg-deep);box-shadow:0 0 6px #8844ff80}.zone-sub{background:#ff6b6b0d}.zone-bell{background:#44ff880d}.zone-ultra{background:#ffdd660d}.zone-transcendent{background:#b8b8d00a}.zone-header{display:flex;align-items:center;justify-content:space-between;padding:6px 12px;font-size:.72rem;font-weight:600;letter-spacing:.06em;border-radius:var(--spacing-sm);margin:var(--spacing-xs) 0 2px;text-transform:uppercase}.zone-header.zone-sub{background:#ff6b6b1a;color:#ff6b6b}.zone-header.zone-audible{background:#8844ff1a;color:#84f}.zone-header.zone-bell{background:#44ff881a;color:#4f8}.zone-header.zone-ultra{background:#ffdd661a;color:#fd6}.zone-header.zone-transcendent{background:#b8b8d014;color:#b8b8d0}.zone-header-freq{font-size:.65rem;opacity:.7;font-style:italic}.key-visual{opacity:.6}.key-visual:hover{opacity:.85}.key-visual:active,.key-visual.active{background:color-mix(in srgb,var(--key-color, #888) 15%,transparent);box-shadow:0 0 8px var(--key-color, #888)}.key-transcendent{opacity:.5;border-style:dashed;border-color:#b8b8d033}.key-transcendent:hover{opacity:.75;border-color:#b8b8d066}.key-transcendent:active,.key-transcendent.active{background:#b8b8d01a;box-shadow:0 0 6px #b8b8d04d}.zone-ultra-dot{background:#fd66}.zone-transcendent-dot{background:#b8b8d066}.keyboard-page{display:flex;flex-direction:column;gap:var(--spacing-lg)}.keyboard-header{text-align:center;padding:var(--spacing-lg) 0 var(--spacing-md)}.keyboard-title{font-size:1.8rem;font-weight:700;margin:0 0 var(--spacing-xs)}.keyboard-subtitle{color:var(--color-text-secondary);font-size:.95rem;margin:0}.controls-bar{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);align-items:center;justify-content:space-between}.controls-group{display:flex;flex-wrap:wrap;gap:var(--spacing-lg);align-items:center}.control-item{display:flex;align-items:center;gap:var(--spacing-sm)}.control-label{font-size:.8rem;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}.control-value{font-size:.8rem;color:var(--color-text-secondary);min-width:2.5em;text-align:right;font-family:var(--font-mono)}.control-slider{-webkit-appearance:none;appearance:none;width:100px;height:4px;border-radius:2px;background:var(--color-border);outline:none;cursor:pointer}.control-slider::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--band-violet);cursor:pointer;border:2px solid var(--color-bg-deep);box-shadow:0 0 6px #8844ff80}.control-slider::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--band-violet);cursor:pointer;border:2px solid var(--color-bg-deep)}.control-toggle{display:flex;align-items:center;gap:var(--spacing-sm);cursor:pointer}.control-toggle input{display:none}.toggle-track{width:36px;height:20px;background:var(--color-border);border-radius:10px;position:relative;transition:background var(--transition-fast)}.control-toggle input:checked+.toggle-track{background:var(--band-violet)}.toggle-thumb{position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--color-text-primary);transition:left var(--transition-fast)}.control-toggle input:checked+.toggle-track .toggle-thumb{left:18px}.control-select{background:#ffffff0f;color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--spacing-sm);padding:4px 8px;font-size:.85rem;font-family:var(--font-sans);cursor:pointer;outline:none;min-width:120px}.control-select:focus{border-color:var(--band-violet)}.control-select option{background:var(--color-bg-card);color:var(--color-text-primary)}.control-btn{padding:6px 14px;border-radius:var(--spacing-sm);border:1px solid var(--color-border);background:#ffffff0f;color:var(--color-text-primary);font-size:.85rem;cursor:pointer;transition:all var(--transition-fast)}.control-btn:hover{background:#ffffff1f}.control-btn--danger{border-color:#f46;color:#f46}.control-btn--danger:hover{background:#ff446626}.visualizer-container{padding:var(--spacing-sm)}.waveform-canvas{width:100%;height:60px;display:block;border-radius:var(--spacing-sm);background:#0000004d}.visualizer-labels{display:flex;justify-content:space-between;font-size:.7rem;color:var(--color-text-muted);margin-top:4px;padding:0 4px}.visualizer-label{font-family:var(--font-mono)}.keyboard-container{display:flex;flex-direction:column;gap:2px;user-select:none;-webkit-user-select:none}.keyboard-row{display:flex;gap:2px;border-radius:var(--spacing-sm);overflow:visible}.zone-sub{background:#ff44660d}.zone-audible{background:#8844ff0d}.zone-bell{background:#00ff880d}.zone-ultra{background:#e8e0ff0d}.row-label{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:80px;padding:4px 8px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--row-color, var(--color-text-secondary));border-right:1px solid var(--color-border);flex-shrink:0}.row-label-text{font-size:.75rem;line-height:1.2}.row-label-range{font-size:.6rem;opacity:.6;font-family:var(--font-mono)}.row-keys{display:grid;grid-template-columns:repeat(12,1fr);gap:2px;flex:1;padding:2px}.key{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;padding:4px 2px;border:1px solid rgba(255,255,255,.06);border-radius:4px;background:#ffffff08;color:var(--key-color, var(--color-text-primary));cursor:pointer;transition:all 80ms ease;font-family:var(--font-sans);min-height:42px;overflow:hidden}.key:hover{background:#ffffff14;border-color:var(--key-color, var(--band-violet));transform:translateY(-1px);box-shadow:0 2px 8px #0006}.key:active,.key.active{background:color-mix(in srgb,var(--key-color, #8844ff) 30%,transparent);border-color:var(--key-color, #8844ff);box-shadow:0 0 12px var(--key-color, #8844ff),inset 0 0 8px var(--key-color, #8844ff);transform:translateY(1px)}.key-num{font-size:.7rem;font-weight:700;font-family:var(--font-mono);line-height:1;opacity:.9}.key-name{font-size:.5rem;line-height:1.1;opacity:.6;text-align:center;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.key.subsonic-active{animation:sub-pulse .5s ease-in-out}@keyframes sub-pulse{0%,to{box-shadow:0 0 4px var(--key-color, #ff4466)}50%{box-shadow:0 0 20px var(--key-color, #ff4466),0 0 40px var(--key-color, #ff4466)}}.key.ultra-shimmer{animation:ultra-shimmer .3s ease-out}@keyframes ultra-shimmer{0%{box-shadow:0 0 4px var(--key-color, #e8e0ff)}50%{box-shadow:0 0 16px var(--key-color, #e8e0ff),0 0 30px var(--key-color, #e8e0ff)}to{box-shadow:0 0 4px var(--key-color, #e8e0ff)}}.keyboard-legend{display:flex;flex-wrap:wrap;gap:var(--spacing-sm);align-items:center;font-size:.75rem;color:var(--color-text-secondary);justify-content:center}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex-shrink:0}.legend-sep{opacity:.3;margin:0 4px}.legend-zone{display:inline-block;width:10px;height:10px;border-radius:2px;flex-shrink:0}.zone-sub-dot{background:#f466}.zone-audible-dot{background:#84f6}.zone-bell-dot{background:#0f86}.zone-ultra-dot{background:#e8e0ff66}@media(max-width:768px){.row-label{min-width:50px;padding:4px}.row-label-text{font-size:.6rem}.row-label-range{display:none}.row-keys{grid-template-columns:repeat(6,1fr)}.key-name{display:none}.key-num{font-size:.65rem}.controls-bar{flex-direction:column;gap:var(--spacing-md)}}@media(max-width:480px){.row-keys{grid-template-columns:repeat(4,1fr)}}