:root{--op-bg:#0f172a;--op-bg-surface:#ffffff0f;--op-bg-surface-hover:#ffffff1a;--op-text:#e2e8f0;--op-text-muted:#94a3b8;--op-text-dim:#64748b;--op-border:#ffffff1a;--op-primary:#6366f1;--op-primary-glow:#6366f14d;--op-rec-color:#ef4444;--op-midi-color:#22c55e;--op-bg-elevated:#1e293b;--op-white-key:linear-gradient(to bottom, #fafafa 0%, #fff 60%, #f1f5f9 100%);--op-white-key-active:linear-gradient(to bottom, #c7d2fe 0%, #ddd6fe 100%);--op-white-key-border:#cbd5e1;--op-white-key-label:#475569;--op-black-key:linear-gradient(to bottom, #1e293b 0%, #0f172a 100%);--op-black-key-active:linear-gradient(to bottom, #6366f1 0%, #4f46e5 100%);--op-black-key-label:#94a3b8;--op-mapped-indicator:#6366f126;--op-white-key-height:200px;--op-black-key-height:130px;--op-toolbar-height:48px;--op-bottom-bar-height:48px}._op-container{min-height:100%;color:var(--op-text);-webkit-user-select:none;user-select:none;flex-direction:column;display:flex}._op-toolbar{height:var(--op-toolbar-height);background:var(--op-bg-surface);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--op-border);justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1.5rem;display:flex}._op-toolbar-left,._op-toolbar-center,._op-toolbar-right{align-items:center;gap:.75rem;display:flex}._op-toolbar-center{flex:1;justify-content:center}._op-instrument-select{background:var(--op-bg-surface);color:var(--op-text);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);cursor:pointer;outline:none;padding:.375rem .75rem;font-size:.8125rem}._op-instrument-select:focus{border-color:var(--op-primary)}._op-instrument-select option{background:var(--op-bg-elevated);color:var(--op-text)}._op-toolbar-btn{width:34px;height:34px;color:var(--op-text-muted);border-radius:var(--main-radius);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;display:flex}._op-toolbar-btn:hover{background:var(--op-bg-surface-hover);color:var(--op-text)}._op-toolbar-btn.is-active{color:var(--op-primary);background:var(--op-primary-glow)}._op-volume-wrapper{align-items:center;gap:.5rem;display:flex}._op-volume-icon{color:var(--op-text-muted);display:flex}._op-volume-slider{width:100px;height:4px;accent-color:var(--op-primary);cursor:pointer}._op-toolbar-divider{background:var(--op-border);width:1px;height:20px}._op-metronome,._op-metro-trigger{position:relative}._op-metro-beat{background:var(--op-text-dim);opacity:0;pointer-events:none;border-radius:50%;width:6px;height:6px;position:absolute;top:4px;right:4px}._op-metro-beat.is-accent{background:var(--op-primary);opacity:1}._op-metro-beat.is-tick{background:var(--op-text);opacity:.7}._op-metro-dropdown{background:var(--op-bg-elevated);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);z-index:100;white-space:nowrap;padding:.5rem;display:none;position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);box-shadow:0 4px 12px #0006}._op-metro-dropdown.is-open{display:block}._op-metro-dropdown-row{align-items:center;gap:.375rem;display:flex}._op-metro-play-btn{background:var(--op-bg-surface);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);width:30px;height:30px;color:var(--op-text-muted);cursor:pointer;justify-content:center;align-items:center;padding:0;display:flex}._op-metro-play-btn:hover{background:var(--op-bg-surface-hover);color:var(--op-text)}._op-metro-play-btn.is-active{color:var(--op-primary);border-color:var(--op-primary);background:var(--op-primary-glow)}._op-metro-dropdown-divider{background:var(--op-border);width:1px;height:20px}._op-metro-bpm{background:var(--op-bg-surface);width:48px;color:var(--op-text);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);font-size:.75rem;font-family:var(--main-font-mono);text-align:center;-moz-appearance:textfield;outline:none;padding:.25rem}._op-metro-bpm::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}._op-metro-bpm::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}._op-metro-bpm:focus{border-color:var(--op-primary)}._op-metro-bpm-btn{background:var(--op-bg-surface);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);width:26px;height:26px;color:var(--op-text-muted);cursor:pointer;justify-content:center;align-items:center;padding:0;font-size:.875rem;line-height:1;display:flex}._op-metro-bpm-btn:hover{background:var(--op-bg-surface-hover);color:var(--op-text)}._op-midi-btn.is-active{color:var(--op-midi-color);background:#22c55e1a}._op-piano-area{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:2rem;padding:2rem 1.5rem;display:flex}._op-octave-info{align-items:center;gap:.75rem;display:flex}._op-octave-label{color:var(--op-text-muted);font-size:.8125rem;font-family:var(--main-font-mono);text-align:center;min-width:80px}._op-nav-btn{background:var(--op-bg-surface);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);width:30px;height:30px;color:var(--op-text-muted);cursor:pointer;justify-content:center;align-items:center;padding:0;display:flex}._op-nav-btn:hover{background:var(--op-bg-surface-hover);color:var(--op-text)}._op-nav-btn:disabled{opacity:.3;cursor:not-allowed}._op-hints{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.25rem;display:flex}._op-hint{color:var(--op-text-dim);font-size:.75rem}._op-hint kbd{background:var(--op-bg-surface);border-style:solid;border-width:1px;border-color:var(--op-border);font-size:.6875rem;font-family:var(--main-font-mono);color:var(--op-text-muted);border-radius:3px;padding:.125rem .375rem;line-height:1.4;display:inline-block}._op-bottom-bar{height:var(--op-bottom-bar-height);background:var(--op-bg-surface);border-top-style:solid;border-top-width:1px;border-top-color:var(--op-border);justify-content:space-between;align-items:center;gap:1rem;padding:.5rem 1.5rem;display:flex}@media (max-width:768px){._op-toolbar{gap:.5rem;padding:.5rem 1rem}._op-piano-area{gap:.5rem;padding:.5rem 0}._op-hints{gap:.75rem;padding:0 .5rem}._op-hint:last-child{display:none}._op-bottom-bar{flex-wrap:wrap;gap:.5rem;height:auto;padding:.5rem 1rem}._op-volume-slider{width:70px}:root{--op-white-key-height:180px;--op-black-key-height:115px}}@media (max-width:480px){._op-toolbar-center,._op-hints{display:none}:root{--op-white-key-height:200px;--op-black-key-height:130px}}._op-keyboard{width:100%;max-width:1100px;min-height:var(--op-white-key-height);display:flex;position:relative}._op-octave{flex:1;display:flex;position:relative}._op-key._op-white{height:var(--op-white-key-height);background:var(--op-white-key);border-style:solid;border-width:1px;border-color:var(--op-white-key-border);cursor:pointer;z-index:1;border-radius:0 0 6px 6px;flex-direction:column;flex:1;justify-content:flex-end;align-items:center;margin-right:-1px;padding-bottom:10px;display:flex;position:relative;box-shadow:0 2px 4px #00000026}._op-key._op-white:first-child{border-radius:0 0 6px 6px}._op-key._op-white:last-of-type{margin-right:0}._op-key._op-white:hover{background:linear-gradient(#f1f5f9 0%,#f8fafc 100%)}._op-key._op-white.is-active{background:var(--op-white-key-active);box-shadow:inset 0 2px 6px #6366f14d}._op-key._op-white.is-learn-target{background:linear-gradient(#fef3c7 0%,#fde68a 100%);box-shadow:0 0 12px #f59e0b66}._op-key._op-black{height:var(--op-black-key-height);background:var(--op-black-key);cursor:pointer;z-index:2;border-radius:0 0 4px 4px;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;display:flex;position:absolute;top:0;box-shadow:0 3px 6px #0006,inset 0 -2px 4px #0003}._op-key._op-black:hover{opacity:.9}._op-key._op-black.is-active{background:var(--op-black-key-active);box-shadow:inset 0 2px 6px #6366f180}._op-key._op-black.is-learn-target{background:linear-gradient(#d97706 0%,#b45309 100%);box-shadow:0 0 12px #f59e0b80}._op-key-label{pointer-events:none;opacity:0;font-size:.625rem;font-weight:500;line-height:1;transition:opacity .2s}._op-keyboard.show-labels ._op-key-label{opacity:1}._op-white ._op-key-label{color:var(--op-white-key-label)}._op-black ._op-key-label{color:var(--op-black-key-label);font-size:.5625rem}._op-key-shortcut{font-size:.5625rem;font-family:var(--main-font-mono);pointer-events:none;opacity:0;margin-top:2px;transition:opacity .2s}._op-keyboard.show-labels ._op-key-shortcut{opacity:.6}._op-white ._op-key-shortcut{color:var(--op-text-dim)}._op-black ._op-key-shortcut{color:var(--op-text-dim);font-size:.5rem}@media (max-width:768px){._op-keyboard{max-width:100%}._op-key._op-white{border-radius:0 0 5px 5px;padding-bottom:8px}._op-key._op-black{border-radius:0 0 4px 4px;padding-bottom:6px}._op-key-label{font-size:.6875rem}._op-key-shortcut{display:none}._op-key._op-white.is-active{box-shadow:inset 0 3px 10px #6366f166}._op-key._op-black.is-active{box-shadow:inset 0 3px 10px #6366f199}}@media (max-width:480px){._op-key._op-white{padding-bottom:10px}._op-key._op-black{padding-bottom:8px}._op-key-label{font-size:.75rem;font-weight:600}._op-black ._op-key-label{font-size:.625rem}}._op-rec-controls{align-items:center;gap:.375rem;display:flex}._op-rec-divider{background:var(--op-border);width:1px;height:18px;margin:0 .125rem}._op-rec-btn{background:var(--op-bg-surface);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);width:32px;height:32px;color:var(--op-text-muted);cursor:pointer;justify-content:center;align-items:center;padding:0;display:flex}._op-rec-btn:hover:not(:disabled){background:var(--op-bg-surface-hover);color:var(--op-text)}._op-rec-btn:disabled{opacity:.3;cursor:not-allowed}._op-rec-btn--rec{color:var(--op-rec-color);border-color:#ef44444d}._op-rec-btn--rec:hover:not(:disabled){border-color:var(--op-rec-color);background:#ef44441a}._op-rec-btn.is-recording{color:var(--op-rec-color);border-color:var(--op-rec-color);background:#ef444426}._op-rec-btn.is-playing{color:var(--op-primary);border-color:var(--op-primary);background:var(--op-primary-glow)}._op-rec-btn.is-exporting{opacity:.5;cursor:wait}._op-rec-time{font-size:.8125rem;font-family:var(--main-font-mono);color:var(--op-text-muted);min-width:36px}._op-rec-indicator{border-radius:50%;width:8px;height:8px;display:none}._op-rec-indicator.is-recording{background:var(--op-rec-color);animation:1s ease-in-out infinite _op-pulse;display:block}@keyframes _op-pulse{0%,to{opacity:1}50%{opacity:.3}}._op-rec-badge{background:var(--op-primary);color:#fff;border-radius:8px;justify-content:center;align-items:center;min-width:16px;height:16px;margin-left:4px;padding:0 4px;font-size:.625rem;font-weight:600;display:inline-flex}._op-rec-overlay{z-index:9999;background:#00000080;display:none;position:fixed;top:0;bottom:0;left:0;right:0}._op-rec-overlay.is-open{display:block}._op-rec-panel{background:var(--op-bg);border-left-style:solid;border-left-width:1px;border-left-color:var(--op-border);z-index:10000;flex-direction:column;width:340px;height:100%;transition:right .3s;display:flex;position:fixed;top:0;right:-340px;overflow:hidden}._op-rec-panel.is-open{right:0}._op-rec-panel-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--op-border);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}._op-rec-panel-header h3{color:var(--op-text);margin:0;font-size:1rem;font-weight:600}._op-rec-unsaved{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--op-border);background:#6366f114;padding:.75rem 1rem}._op-rec-unsaved-label{color:var(--op-primary);text-transform:uppercase;letter-spacing:.05em;margin-bottom:.5rem;font-size:.6875rem;font-weight:600}._op-rec-unsaved-row{align-items:center;gap:.5rem;display:flex}._op-rec-name-input{background:var(--op-bg-surface);color:var(--op-text);border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);outline:none;flex:1;padding:.375rem .625rem;font-size:.8125rem}._op-rec-name-input:focus{border-color:var(--op-primary)}._op-rec-name-input::placeholder{color:var(--op-text-dim)}._op-rec-list{flex:1;padding:.5rem;overflow-y:auto}._op-rec-item{border-radius:var(--main-radius);align-items:center;gap:.75rem;margin-bottom:.25rem;padding:.625rem .75rem;display:flex}._op-rec-item:hover{background:var(--op-bg-surface-hover)}._op-rec-item-info{flex:1;min-width:0}._op-rec-item-name{color:var(--op-text);white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:500;overflow:hidden}._op-rec-item-meta{color:var(--op-text-dim);font-size:.6875rem;font-family:var(--main-font-mono);margin-top:2px}._op-rec-item-actions{flex-shrink:0;gap:.25rem;display:flex}._op-rec-item-btn{border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);width:28px;height:28px;color:var(--op-text-muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;display:flex}._op-rec-item-btn:hover{background:var(--op-bg-surface-hover);color:var(--op-text)}._op-rec-item-btn.is-playing{color:var(--op-primary);border-color:var(--op-primary)}._op-rec-item-btn._op-rec-item-delete:hover{color:var(--op-rec-color);border-color:var(--op-rec-color)}._op-rec-empty{text-align:center;color:var(--op-text-dim);padding:2rem 1.25rem;font-size:.8125rem;line-height:1.6}._op-songs-overlay{z-index:9999;background:#00000080;display:none;position:fixed;top:0;bottom:0;left:0;right:0}._op-songs-overlay.is-open{display:block}._op-songs-panel{background:var(--op-bg);border-left-style:solid;border-left-width:1px;border-left-color:var(--op-border);z-index:10000;flex-direction:column;width:320px;height:100%;transition:right .3s;display:flex;position:fixed;top:0;right:-320px;overflow:hidden}._op-songs-panel.is-open{right:0}._op-songs-header{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--op-border);justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}._op-songs-header h3{color:var(--op-text);margin:0;font-size:1rem;font-weight:600}._op-songs-list{flex:1;padding:.75rem;overflow-y:auto}._op-song-item{border-radius:var(--main-radius);cursor:pointer;align-items:center;gap:.75rem;margin-bottom:.25rem;padding:.75rem;display:flex}._op-song-item:hover{background:var(--op-bg-surface-hover)}._op-song-item.is-active{background:var(--op-primary-glow)}._op-song-icon{border-radius:var(--main-radius);background:var(--op-bg-surface);width:36px;height:36px;color:var(--op-primary);flex-shrink:0;justify-content:center;align-items:center;display:flex}._op-song-info{flex:1;min-width:0}._op-song-name{color:var(--op-text);white-space:nowrap;text-overflow:ellipsis;font-size:.8125rem;font-weight:500;overflow:hidden}._op-song-meta{color:var(--op-text-dim);margin-top:2px;font-size:.6875rem}._op-song-actions{gap:.25rem;display:flex}._op-song-btn{border-style:solid;border-width:1px;border-color:var(--op-border);border-radius:var(--main-radius);width:28px;height:28px;color:var(--op-text-muted);cursor:pointer;background:0 0;justify-content:center;align-items:center;padding:0;display:flex}._op-song-btn:hover{background:var(--op-bg-surface-hover);color:var(--op-text)}._op-song-btn.is-active{color:var(--op-primary);border-color:var(--op-primary)}@media (max-width:480px){._op-songs-panel{width:280px;right:-280px}._op-rec-panel{width:290px;right:-290px}._op-rec-divider,._op-rec-time{display:none}}