@import"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700;800&display=swap";*{margin:0;padding:0;box-sizing:border-box}:root{--bg: #0d0d0f;--bg-panel: #131315;--surface: #161618;--surface-raised: #1c1c1f;--border: rgba(255, 255, 255, .06);--accent: #e8a634;--accent-dim: rgba(232, 166, 52, .4);--active: #f0e6d3;--info: #6b7b8d;--error: #c45c5c;--success: #6ba368;--fg: #d4cfc7;--muted: #7a766e;--dim: #5a5650;--font-ui: "Inter", "SF Pro", system-ui, sans-serif;--font-mono: "Berkeley Mono", "IBM Plex Mono", "JetBrains Mono", monospace}html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--fg);font-family:var(--font-ui);user-select:none;-webkit-font-smoothing:antialiased}.loader{position:fixed;inset:0;z-index:9999;background:var(--bg);display:flex;align-items:center;justify-content:center;transition:opacity .6s ease,visibility .6s ease}.loader.fade-out{opacity:0;visibility:hidden}.loader-content{display:flex;flex-direction:column;align-items:center;gap:24px}.loader-logo{font-family:var(--font-mono);font-size:28px;font-weight:700;letter-spacing:.25em;color:var(--accent)}.loader-bar{width:200px;height:1px;background:#ffffff14;overflow:hidden}.loader-progress{height:100%;width:0%;background:var(--accent);animation:load .8s ease-out forwards}.loader-text{font-size:10px;color:var(--dim);letter-spacing:.15em;font-family:var(--font-mono)}#app{height:100vh;display:flex;flex-direction:column;opacity:0;animation:fadeIn .5s .8s ease forwards}.app-header{height:48px;display:flex;justify-content:space-between;align-items:center;padding:0 20px;background:var(--bg-panel);border-bottom:1px solid var(--border);z-index:10}.app-title{font-family:var(--font-mono);font-weight:700;font-size:14px;letter-spacing:.2em;color:var(--accent)}.header-right{display:flex;align-items:center;gap:12px}.style-switcher{display:flex;gap:4px;background:var(--surface);border:1px solid var(--border);border-radius:6px;padding:2px}.style-btn{background:transparent;color:var(--muted);border:none;padding:4px 10px;border-radius:4px;font-family:var(--font-mono);font-size:11px;cursor:pointer;transition:all .15s;white-space:nowrap}.style-btn:hover{color:var(--fg);background:var(--surface-raised)}.style-btn.active{color:var(--accent);background:var(--surface-raised)}.preset-select-wrapper{position:relative}.preset-select{appearance:none;background:var(--surface);color:var(--fg);border:1px solid var(--border);padding:6px 32px 6px 12px;border-radius:4px;font-family:var(--font-mono);font-size:12px;font-weight:500;cursor:pointer;transition:border-color .2s ease;min-width:180px}.preset-select:hover,.preset-select:focus{border-color:#ffffff26;outline:none}.preset-select-wrapper:after{content:"▼";position:absolute;right:12px;top:50%;transform:translateY(-50%);font-size:8px;color:var(--muted);pointer-events:none}.main-content{flex:1;display:flex;overflow:hidden;background:var(--bg);padding:8px;gap:8px}.editor-panel{width:35%;min-width:350px;display:flex;flex-direction:column;position:relative;z-index:5;background:var(--bg-panel);border-radius:8px;border:1px solid var(--border)}.editor-panel .cm-editor{flex:1;overflow:auto;border-radius:8px}.cm-editor{outline:none!important}.visual-panel{flex:1;position:relative;background:var(--bg);border-radius:8px;border:1px solid var(--border);overflow:hidden}.visual-panel canvas{position:absolute;inset:0;width:100%;height:100%}.transport-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 24px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.01) 0px,rgba(255,255,255,.015) 1px,transparent 1px,transparent 3px),linear-gradient(180deg,#18181b,#111113);border-top:1px solid rgba(255,255,255,.04);position:relative;z-index:10}.transport-section{display:flex;align-items:center;gap:12px;padding:10px 16px;background:var(--surface);border:1px solid var(--border);border-radius:6px;box-shadow:inset 0 1px 3px #0006,0 1px #ffffff05;position:relative}.transport-section-title{position:absolute;top:-8px;left:12px;font-size:9px;font-weight:600;letter-spacing:.12em;color:var(--dim);background:var(--surface);padding:0 6px;font-family:var(--font-ui);text-transform:uppercase}.transport-btn{width:44px;height:44px;border-radius:6px;border:1px solid rgba(0,0,0,.6);background:linear-gradient(180deg,#2a2a2e,#1a1a1d);color:var(--fg);font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .08s ease;box-shadow:0 3px 6px #00000080,inset 0 1px #ffffff14,inset 0 -1px #0000004d}.transport-btn:active{transform:translateY(2px);box-shadow:0 1px 2px #00000080,inset 0 2px 4px #0009}.transport-btn:hover{border-color:#ffffff1f;background:linear-gradient(180deg,#303034,#202024)}.transport-btn.playing{color:var(--accent);border-color:#e8a6344d}.transport-btn.state-flip{animation:bump .15s ease}.transport-btn-mini{height:28px;padding:0 12px;border-radius:4px;border:1px solid rgba(0,0,0,.5);background:linear-gradient(180deg,#222225,#161618);color:var(--muted);font-family:var(--font-mono);font-size:10px;font-weight:600;cursor:pointer;transition:.15s ease;box-shadow:0 2px 3px #0000004d,inset 0 1px #ffffff0d;letter-spacing:.05em}.transport-btn-mini:hover{color:var(--fg);background:linear-gradient(180deg,#2a2a2e,#1c1c1f)}.transport-btn-mini.active{color:var(--accent);border-color:#e8a63433;background:linear-gradient(180deg,#252520,#1a1a16)}.transport-btn-mini:active{transform:translateY(1px);box-shadow:inset 0 2px 3px #00000080}.bpm-display-wrap{display:flex;flex-direction:column;align-items:center;gap:6px}.bpm-led{font-size:24px;font-weight:700;color:var(--accent);font-family:var(--font-mono);background:#0a0a0b;padding:4px 14px;border-radius:4px;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 2px 6px #000c;letter-spacing:.08em}.knob-group{display:flex;flex-direction:column;align-items:center;gap:6px}.knob-label{font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-ui)}.knob-value{font-size:10px;color:var(--dim);font-family:var(--font-mono)}.knob{width:40px;height:40px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a3a3e,#1a1a1d 70%);border:2px solid rgba(0,0,0,.6);box-shadow:0 2px 6px #0009,inset 0 1px #ffffff1a;position:relative;cursor:grab;transition:box-shadow .15s ease}.knob:active{cursor:grabbing}.knob:hover{box-shadow:0 2px 8px #000000b3,inset 0 1px #ffffff1f,0 0 0 1px #e8a63426}.knob-pointer{position:absolute;top:4px;left:50%;width:2px;height:10px;background:var(--accent);border-radius:1px;transform-origin:bottom center;transform:translate(-50%)}.beat-indicator{display:flex;gap:4px;padding:6px 10px;background:#0a0a0b;border-radius:4px;border:1px solid rgba(255,255,255,.04);box-shadow:inset 0 1px 4px #000c}.beat-dot{width:8px;height:14px;border-radius:2px;background:#1a1a1d;border:1px solid rgba(0,0,0,.4);transition:background-color .08s ease}.beat-dot.active{background:var(--accent);box-shadow:0 0 6px #e8a63466}.beat-dot:nth-child(4n+1){width:10px}.slider-group{display:flex;flex-direction:column;align-items:center;gap:6px}.slider-label{font-size:9px;color:var(--muted);font-weight:600;letter-spacing:.1em;text-transform:uppercase;font-family:var(--font-ui)}input[type=range]{-webkit-appearance:none;appearance:none;width:100px;height:3px;background:#ffffff14;border-radius:2px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:16px;border-radius:2px;background:linear-gradient(180deg,#4a4a4e,#2a2a2e);border:1px solid rgba(0,0,0,.5);cursor:pointer;box-shadow:0 1px 3px #00000080}input[type=range]::-webkit-slider-thumb:hover{background:linear-gradient(180deg,#5a5a5e,#3a3a3e)}.transport-fader{width:12px;height:70px!important;writing-mode:vertical-lr;direction:rtl}.transport-status{font-size:10px;color:var(--muted);font-family:var(--font-mono);letter-spacing:.08em;background:#0000004d;padding:5px 12px;border-radius:4px;border:1px solid var(--border);display:flex;gap:10px;align-items:center}.transport-status.active{color:var(--accent);border-color:#e8a63426}.scope-meter{width:80px;height:12px;background:#0a0a0b;border-radius:2px;border:1px solid rgba(255,255,255,.04);overflow:hidden;box-shadow:inset 0 1px 3px #000c}.scope-level{height:100%;background:linear-gradient(90deg,var(--success),var(--accent),var(--error));width:0%;transition:width .05s linear}.visualizer-mode-switcher,.preset-quick-group{display:flex;gap:6px;flex-wrap:wrap}.preset-quick-btn{height:26px;padding:0 10px;font-size:10px;border-radius:3px;background:var(--surface);color:var(--muted);border:1px solid var(--border);cursor:pointer;font-family:var(--font-mono);font-weight:600;transition:.15s ease}.preset-quick-btn:hover{color:var(--fg);background:var(--surface-raised)}.preset-quick-btn.active{color:var(--accent);border-color:#e8a63433;background:#e8a6340f}.transport-hints{font-size:9px;color:var(--dim);display:flex;gap:6px;flex-wrap:wrap}.kbd{background:var(--surface);border:1px solid var(--border);padding:2px 5px;border-radius:3px;color:var(--muted);font-family:var(--font-mono);font-size:9px}@keyframes fadeIn{to{opacity:1}}@keyframes load{to{width:100%}}@keyframes bump{0%{transform:scale(1)}50%{transform:scale(.96)}to{transform:scale(1)}}.help-btn{height:28px;padding:0 10px;border-radius:4px;border:1px solid var(--border);background:linear-gradient(180deg,#222225,#161618);color:var(--muted);font-family:var(--font-mono);font-size:11px;font-weight:600;cursor:pointer;transition:.15s ease;letter-spacing:.08em;box-shadow:0 2px 3px #0000004d,inset 0 1px #ffffff0d}.help-btn:hover{color:var(--accent);border-color:#e8a63440;background:linear-gradient(180deg,#252520,#1a1a16)}.help-btn:active{transform:translateY(1px);box-shadow:inset 0 2px 3px #00000080}.help-backdrop{position:fixed;inset:0;z-index:1000;background:#030201d1;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s ease;backdrop-filter:blur(2px)}.help-backdrop.help-visible{opacity:1;pointer-events:all}.help-panel{width:min(700px,92vw);max-height:82vh;background:#0e0d0b;border:1px solid rgba(232,166,52,.18);border-radius:8px;display:flex;flex-direction:column;box-shadow:0 20px 60px #000c,0 0 0 1px #ffffff0a;transform:translateY(8px);transition:transform .2s ease;user-select:text}.help-backdrop.help-visible .help-panel{transform:translateY(0)}.help-panel-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;border-bottom:1px solid rgba(255,255,255,.06);flex-shrink:0}.help-panel-title{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.2em;color:var(--accent)}.help-close-btn{width:26px;height:26px;border-radius:4px;border:1px solid var(--border);background:var(--surface);color:var(--muted);font-size:18px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.15s ease;padding:0}.help-close-btn:hover{color:var(--fg);border-color:#ffffff26}.help-panel-body{overflow-y:auto;padding:20px 24px 24px;flex:1;color:var(--fg)}.help-section{margin-bottom:28px}.help-section:last-child{margin-bottom:0}.help-h2{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid rgba(232,166,52,.15)}.help-h3{font-family:var(--font-mono);font-size:10px;font-weight:600;color:var(--active);letter-spacing:.1em;text-transform:uppercase;margin:12px 0 6px}.help-p{font-size:13px;line-height:1.6;margin-bottom:8px}.help-muted{color:var(--muted);font-family:var(--font-mono);font-size:12px}.help-code{font-family:var(--font-mono);font-size:12px;background:#0006;border:1px solid rgba(255,255,255,.06);border-radius:4px;padding:10px 14px;color:var(--active);line-height:1.7;overflow-x:auto;white-space:pre}.help-table{width:100%;border-collapse:collapse;font-size:12px;font-family:var(--font-mono)}.help-table th{text-align:left;color:var(--dim);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:0 10px 6px 0;border-bottom:1px solid rgba(255,255,255,.06)}.help-table td{padding:5px 10px 5px 0;color:var(--fg);border-bottom:1px solid rgba(255,255,255,.03);vertical-align:top}.help-table tr:last-child td{border-bottom:none}.help-table code,.help-p code{background:#e8a63414;border:1px solid rgba(232,166,52,.15);border-radius:3px;padding:1px 5px;color:var(--accent);font-size:11px}.help-panel-body kbd{background:var(--surface);border:1px solid rgba(255,255,255,.12);border-bottom-width:2px;border-radius:3px;padding:1px 6px;font-family:var(--font-mono);font-size:11px;color:var(--active)}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff0f;border-radius:4px}::-webkit-scrollbar-thumb:hover{background:#ffffff1a}