:root{--bg-primary: #0a0a0a;--bg-secondary: #141414;--bg-tertiary: #1e1e1e;--bg-elevated: #252525;--bg-glass: rgba(20, 20, 20, .8);--text-primary: #e0e0e0;--text-secondary: #888888;--text-muted: #555555;--accent: #00ff88;--accent-dim: #00cc6a;--accent-glow: rgba(0, 255, 136, .15);--cat-drums: #FF8C42;--cat-drums-bg: rgba(255, 140, 66, .08);--cat-drums-flash: rgba(255, 140, 66, .3);--cat-synths: #4A9EFF;--cat-synths-bg: rgba(74, 158, 255, .08);--cat-synths-flash: rgba(74, 158, 255, .3);--cat-fx: #00D68F;--cat-fx-bg: rgba(0, 214, 143, .08);--cat-fx-flash: rgba(0, 214, 143, .3);--cat-pattern: #A855F7;--cat-pattern-bg: rgba(168, 85, 247, .08);--cat-pattern-flash: rgba(168, 85, 247, .3);--status-playing: #00ff88;--status-stopped: #888888;--status-error: #ff4444;--border: #2a2a2a;--border-button: #333333;--border-focus: #00ff88;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--font-mono: "JetBrains Mono", "Fira Code", "SF Mono", "Consolas", monospace;--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;--font-size-sm: 12px;--font-size-base: 14px;--font-size-lg: 16px;--font-size-xl: 20px;--transport-height: 48px;--tab-height: 36px;--cycle-bar-height: 4px;--grid-gap: 5px;--button-radius: 4px;--border-radius: 6px;--ease-entrance: cubic-bezier(.16, 1, .3, 1);--ease-exit: ease-out}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;overflow:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}body{font-family:var(--font-sans);background:var(--bg-primary);color:var(--text-primary);line-height:1.4}button{cursor:pointer;border:none;background:none;color:inherit;font:inherit;-webkit-appearance:none;appearance:none}input{-webkit-appearance:none;appearance:none}#app{height:100%}.splash{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;background:var(--bg-primary);transition:opacity .3s ease-out}.splash--fade-out{opacity:0}.splash__wordmark{display:flex;gap:2px}.splash__letter{font-family:var(--font-mono);font-size:36px;font-weight:600;color:var(--text-primary);opacity:0;transform:translateY(8px);animation:splash-letter .4s cubic-bezier(.16,1,.3,1) forwards}@keyframes splash-letter{to{opacity:1;transform:translateY(0)}}.template-picker{position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--bg-primary);padding:var(--space-lg);transition:opacity .3s ease-out}.template-picker--fade-out{opacity:0}.template-picker__wordmark{font-family:var(--font-mono);font-size:var(--font-size-xl);font-weight:600;color:var(--text-primary);letter-spacing:.1em;margin-bottom:var(--space-sm)}.template-picker__subtitle{font-family:var(--font-sans);font-size:var(--font-size-base);color:var(--text-secondary);margin-bottom:var(--space-xl)}.template-picker__buttons{display:flex;flex-direction:column;gap:var(--space-sm);width:100%;max-width:340px}.template-picker__btn{width:100%;height:56px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius);background:var(--bg-elevated);border:1px solid var(--border-button);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-base);font-weight:600;cursor:pointer;transition:background .15s var(--ease-exit),transform .15s var(--ease-exit)}.template-picker__btn:hover{background:var(--bg-tertiary)}.template-picker__btn:active{transform:scale(.98);background:var(--accent-glow)}.template-picker__btn--blank{background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-weight:400}.template-picker__btn--blank:hover{background:#ffffff08}.template-picker__btn--blank:active{background:#ffffff0f}.onboarding{position:fixed;inset:0;z-index:800;background:#000000b3;opacity:0;transition:opacity .3s ease-out}.onboarding--visible{opacity:1}.onboarding--fade-out{opacity:0}.onboarding__spotlight{position:absolute;border:2px solid var(--accent);border-radius:var(--border-radius);box-shadow:0 0 0 9999px #000000b3,0 0 12px var(--accent-glow);transition:all .3s cubic-bezier(.16,1,.3,1);pointer-events:none}.onboarding__text{position:absolute;left:var(--space-lg);right:var(--space-lg);text-align:center;color:var(--text-primary);font-family:var(--font-sans);font-size:var(--font-size-lg);line-height:1.5}.onboarding__controls{position:absolute;bottom:var(--space-xl);left:0;right:0;display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.onboarding__step-indicator{font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--text-muted)}.onboarding__skip{font-family:var(--font-sans);font-size:var(--font-size-sm);color:var(--text-secondary);background:transparent;border:none;cursor:pointer;padding:var(--space-sm) var(--space-md);text-decoration:underline;text-underline-offset:2px}.onboarding__skip:hover{color:var(--text-primary)}.onboarding__next{font-family:var(--font-sans);font-size:var(--font-size-base);color:var(--bg-primary);background:var(--accent);border:none;border-radius:var(--button-radius);cursor:pointer;padding:var(--space-sm) var(--space-lg);font-weight:600;transition:background .15s var(--ease-exit)}.onboarding__next:hover{background:var(--accent-dim)}.app-shell{display:flex;flex-direction:column;height:100vh;height:100dvh;background:var(--bg-primary);overflow:hidden}.transport{display:flex;align-items:center;gap:var(--space-md);height:var(--transport-height);padding:0 var(--space-md);background:var(--bg-secondary);border-bottom:1px solid var(--border);flex-shrink:0;z-index:10;transition:background .3s ease}.transport--playing{animation:transport-pulse 1s ease-in-out infinite}@keyframes transport-pulse{0%,to{background-color:var(--bg-secondary)}50%{background-color:#1a1a1a}}.transport__play-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--border-radius);background:var(--bg-elevated);border:1px solid var(--border-button);color:var(--text-primary);font-size:var(--font-size-lg);transition:background .15s var(--ease-exit),box-shadow .15s var(--ease-exit)}.transport__play-btn:hover{background:var(--bg-tertiary)}.transport__play-btn:active{background:var(--accent-glow);transform:scale(.97)}.transport__play-btn--playing{box-shadow:0 0 8px var(--accent-glow);border-color:var(--accent-dim)}.transport__bpm{font-family:var(--font-mono);font-size:var(--font-size-base);color:var(--text-secondary);-webkit-user-select:none;user-select:none}.transport__bpm-input{width:48px;background:transparent;border:none;border-bottom:1px solid var(--border);color:var(--text-primary);font-family:var(--font-mono);font-size:var(--font-size-base);text-align:center;outline:none;padding:2px 0}.transport__bpm-input:focus{border-bottom-color:var(--accent)}.transport__templates-btn{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--button-radius);background:transparent;border:1px solid var(--border);color:var(--text-secondary);font-size:var(--font-size-lg);font-family:var(--font-mono);transition:background .15s var(--ease-exit),color .15s var(--ease-exit);margin-left:var(--space-sm)}.transport__templates-btn:hover{background:var(--bg-tertiary);color:var(--text-primary)}.status-dot{width:8px;height:8px;border-radius:50%;margin-left:auto;flex-shrink:0;transition:background .2s var(--ease-exit),box-shadow .2s var(--ease-exit)}.status-dot--stopped{background:var(--status-stopped)}.status-dot--playing{background:var(--status-playing);box-shadow:0 0 6px #0f86}.status-dot--error{background:var(--status-error);box-shadow:0 0 6px #f446}.editor-container{flex:1;min-height:0;overflow:hidden;position:relative}.editor-container .cm-editor{height:100%}.editor-container .cm-editor.cm-focused{outline:none}.editor-container .cm-scroller{overflow:auto;font-family:var(--font-mono)!important}.editor-container .cm-gutters{background:var(--bg-secondary)!important;color:var(--text-muted)!important;border-right:1px solid var(--border)!important}.editor-container .cm-activeLineGutter{background:var(--bg-tertiary)!important}.editor-container .cm-activeLine{background:#ffffff08!important}.error-banner{display:none;flex-shrink:0;flex-direction:row;align-items:stretch;background:#ff44441a;cursor:pointer;overflow:hidden;max-height:0;transition:max-height .2s var(--ease-exit)}.error-banner--visible{display:flex;max-height:28px}.error-banner--visible.error-banner--expanded{max-height:120px}.error-banner__border{width:3px;background:var(--status-error);flex-shrink:0}.error-banner__message{padding:4px var(--space-sm);font-family:var(--font-mono);font-size:var(--font-size-sm);color:var(--status-error);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.error-banner--expanded .error-banner__message{white-space:pre-wrap;word-break:break-word}.cycle-bar{height:var(--cycle-bar-height);background:var(--bg-tertiary);flex-shrink:0;position:relative;overflow:hidden}.cycle-bar__fill{position:absolute;top:0;left:0;height:100%;width:0%;background:var(--accent);will-change:width}.cycle-bar__fill--active{animation:cycle-sweep linear infinite}@keyframes cycle-sweep{0%{width:0%}to{width:100%}}.control-panel{flex:1;min-height:0;background:var(--bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;overflow:hidden}.control-panel__placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-muted);font-size:var(--font-size-base);font-family:var(--font-mono)}.category-tabs{display:flex;height:var(--tab-height);flex-shrink:0;border-bottom:1px solid var(--border)}.category-tab{flex:1;display:flex;align-items:center;justify-content:center;font-family:var(--font-sans);font-size:var(--font-size-sm);text-transform:uppercase;letter-spacing:.08em;color:var(--text-secondary);background:transparent;border:none;border-bottom:2px solid transparent;transition:color .15s var(--ease-exit),border-color .15s var(--ease-exit);cursor:pointer}.category-tab--active.category-tab--drums{color:var(--cat-drums);border-bottom-color:var(--cat-drums)}.category-tab--active.category-tab--synths{color:var(--cat-synths);border-bottom-color:var(--cat-synths)}.category-tab--active.category-tab--fx{color:var(--cat-fx);border-bottom-color:var(--cat-fx)}.category-tab--active.category-tab--pattern{color:var(--cat-pattern);border-bottom-color:var(--cat-pattern)}.snippet-grid{flex:1;min-height:0;overflow-y:auto;padding:var(--space-sm);display:grid;grid-template-columns:repeat(4,1fr);gap:var(--grid-gap);align-content:start}.snippet-btn{display:flex;align-items:center;justify-content:center;padding:12px 4px;border-radius:var(--button-radius);background:var(--bg-elevated);border:1px solid var(--border-button);font-family:var(--font-mono);font-size:var(--font-size-sm);text-align:center;cursor:pointer;transition:background .15s var(--ease-exit),transform .15s var(--ease-exit);user-select:none;-webkit-user-select:none;line-height:1.2;word-break:break-all}.snippet-btn--drums{color:var(--cat-drums);background:var(--cat-drums-bg);border-color:#ff8c4226}.snippet-btn--synths{color:var(--cat-synths);background:var(--cat-synths-bg);border-color:#4a9eff26}.snippet-btn--fx{color:var(--cat-fx);background:var(--cat-fx-bg);border-color:#00d68f26}.snippet-btn--pattern{color:var(--cat-pattern);background:var(--cat-pattern-bg);border-color:#a855f726}.snippet-btn:active,.snippet-btn--tap{transform:scale(.97)}.snippet-btn--drums:active,.snippet-btn--drums.snippet-btn--tap{background:#ff8c4233}.snippet-btn--synths:active,.snippet-btn--synths.snippet-btn--tap{background:#4a9eff33}.snippet-btn--fx:active,.snippet-btn--fx.snippet-btn--tap{background:#00d68f33}.snippet-btn--pattern:active,.snippet-btn--pattern.snippet-btn--tap{background:#a855f733}.snippet-btn--flash.snippet-btn--drums{background:var(--cat-drums-flash)}.snippet-btn--flash.snippet-btn--synths{background:var(--cat-synths-flash)}.snippet-btn--flash.snippet-btn--fx{background:var(--cat-fx-flash)}.snippet-btn--flash.snippet-btn--pattern{background:var(--cat-pattern-flash)}