:root{--bg-base: #0d0d14;--bg-surface-1: #14141f;--bg-surface-2: #1a1a28;--bg-surface-3: #222233;--bg-inset: #0a0a10;--accent-primary: #8b5cf6;--accent-primary-hover: #a78bfa;--accent-primary-muted: rgba(139, 92, 246, .15);--accent-primary-glow: rgba(139, 92, 246, .3);--accent-secondary: #6366f1;--text-primary: #ededf0;--text-secondary: #8b8b9e;--text-tertiary: #55556a;--text-on-accent: #ffffff;--border-subtle: #1f1f2e;--border-default: #2a2a3d;--border-focus: #8b5cf6;--color-success: #34d399;--color-warning: #fbbf24;--color-error: #f87171;--shadow-sm: 0 1px 2px rgba(0, 0, 0, .3);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);--shadow-glow: 0 0 12px var(--accent-primary-glow);--font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", monospace;--text-xs: .6875rem;--text-sm: .75rem;--text-base: .8125rem;--text-md: .875rem;--text-lg: 1rem;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--radius-sm: 4px;--radius-md: 6px;--radius-lg: 8px;--radius-full: 9999px;--transition-fast: .1s ease;--transition-base: .15s ease;--transition-slow: .25s ease;--toolbar-height: 44px;--bottom-bar-height: 64px;--right-panel-width: 232px;--bg-primary: var(--bg-base);--bg-secondary: var(--bg-surface-1);--bg-panel: var(--bg-surface-2);--bg-toolbar: var(--bg-surface-2);--accent-color: var(--accent-primary);--border-color: var(--border-default);font-family:var(--font-sans);line-height:1.5;font-weight:400}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;background:var(--bg-base);color:var(--text-primary);overflow:hidden;font-family:var(--font-sans);font-size:var(--text-base);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{display:grid;grid-template-rows:var(--toolbar-height) 1fr var(--bottom-bar-height);height:100vh;width:100vw}#toolbar{display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-3);background:var(--bg-surface-2);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-sm);z-index:10}#file-toolbar,#transport-bar{display:flex;align-items:center;gap:var(--space-2)}#workspace{position:relative;display:grid;grid-template-columns:1fr;overflow:hidden}#toggle-right-panel{position:absolute;right:var(--right-panel-width);top:50%;transform:translateY(-50%);width:16px;height:48px;background:var(--bg-surface-2);border:1px solid var(--border-subtle);border-right:none;border-radius:var(--radius-sm) 0 0 var(--radius-sm);color:var(--text-secondary);cursor:pointer;font-size:14px;line-height:1;padding:0;display:flex;align-items:center;justify-content:center;z-index:30;transition:right .3s ease,color .2s}#toggle-right-panel:hover{color:var(--text-primary);background:var(--bg-surface-3)}#right-panel{position:absolute;top:0;right:0;bottom:0;width:var(--right-panel-width);background:var(--bg-surface-1);border-left:1px solid var(--border-subtle);overflow-y:auto;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-4);transform:translate(0);transition:transform .3s ease;z-index:20}.right-panel-hidden #right-panel{transform:translate(100%)}.right-panel-hidden #toggle-right-panel{right:0}#sequencer-container{position:relative;overflow:hidden;background:var(--bg-inset)}#sequencer-canvas{display:block;width:100%;height:100%}#right-panel::-webkit-scrollbar{width:6px}#right-panel::-webkit-scrollbar-track{background:transparent}#right-panel::-webkit-scrollbar-thumb{background:var(--border-default);border-radius:var(--radius-full)}#instrument-palette{border-bottom:1px solid var(--border-subtle);padding-bottom:var(--space-3)}#note-editor{border-bottom:none}#bottom-bar{display:flex;align-items:center;padding:0 var(--space-3);background:var(--bg-surface-2);border-top:1px solid var(--border-subtle);box-shadow:0 -1px 2px #0003}.panel-title{font-size:var(--text-xs);font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--text-secondary);margin:0 0 var(--space-2) 0}#sequencer-canvas:focus{outline:2px solid var(--accent-primary);outline-offset:-2px}*:focus-visible{outline:2px solid var(--accent-primary);outline-offset:2px}input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;height:14px}input[type=range]::-webkit-slider-track{height:3px;background:var(--bg-surface-3);border-radius:var(--radius-full)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;border-radius:50%;background:var(--bg-surface-2);border:2px solid var(--accent-primary);margin-top:-4.5px;transition:transform var(--transition-fast)}input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type=range]::-moz-range-track{height:3px;background:var(--bg-surface-3);border-radius:var(--radius-full);border:none}input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--bg-surface-2);border:2px solid var(--accent-primary)}input[type=number]{-moz-appearance:textfield}input[type=number]::-webkit-outer-spin-button,input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}@media(max-width:768px){#workspace{grid-template-columns:1fr}#right-panel{display:none}}