@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(../media/32687112bd2dd8db-s.0gspg~~t9nou8.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(../media/28868e710e86be81-s.0rx81dn62y51_.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(../media/0c89a48fa5027cee-s.p.0rd3rjvnnhw7n.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(../media/32687112bd2dd8db-s.0gspg~~t9nou8.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(../media/28868e710e86be81-s.0rx81dn62y51_.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(../media/0c89a48fa5027cee-s.p.0rd3rjvnnhw7n.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(../media/32687112bd2dd8db-s.0gspg~~t9nou8.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(../media/28868e710e86be81-s.0rx81dn62y51_.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(../media/0c89a48fa5027cee-s.p.0rd3rjvnnhw7n.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(../media/32687112bd2dd8db-s.0gspg~~t9nou8.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(../media/28868e710e86be81-s.0rx81dn62y51_.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(../media/0c89a48fa5027cee-s.p.0rd3rjvnnhw7n.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Space Grotesk Fallback;src:local(Arial);ascent-override:89.71%;descent-override:26.62%;line-gap-override:0.0%;size-adjust:109.69%}.space_grotesk_8f4792a3-module__WKttlq__className{font-family:Space Grotesk,Space Grotesk Fallback;font-style:normal}
*,:before,:after{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0}:root{--bg-0:#050505;--bg-1:#0c0c0e;--bg-2:#121214;--bg-3:#1a1a1e;--bg-4:#222228;--bg-hover:#28282e;--neon-accent:#00e5ff;--neon-accent-dim:#00e5ff1f;--neon-accent-mid:#00e5ff59;--neon-blue:#4d8dff;--neon-blue-dim:#4d8dff1f;--neon-blue-mid:#4d8dff59;--neon-green:#0f8;--neon-green-dim:#00ff881f;--neon-purple:#a855f7;--neon-purple-dim:#a855f726;--neon-red:#ff3b3b;--text-0:#fff;--text-1:#b0b0b8;--text-2:#666670;--text-3:#3a3a42;--border:#1e1e24;--border-active:#2a2a32;--step-off:#141418;--step-hover:#1c1c22;--r-xs:2px;--r-sm:3px;--r-md:4px;--r-lg:6px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:20px;--s6:24px;--s8:32px;--s10:40px;--font-mono:"Space Grotesk", system-ui, -apple-system, sans-serif;--fs-xs:9px;--fs-sm:10px;--fs-md:11px;--fs-lg:13px;--fs-xl:16px;--fs-2xl:22px;--fs-3xl:32px;--ease-out:cubic-bezier(.16, 1, .3, 1);--ease-snap:cubic-bezier(0, .9, .3, 1);--dur-instant:50ms;--dur-fast:.1s;--dur-normal:.18s}html{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricprecision}body{font-family:var(--font-mono);background-color:var(--bg-0);background-image:radial-gradient(circle at 50% -20%, #161b24 0%, var(--bg-0) 80%), url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.02'/%3E%3C/svg%3E");color:var(--text-0);overscroll-behavior:none;-webkit-user-select:none;user-select:none;width:100%;height:100%;position:fixed;overflow:hidden}button{color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;background:0 0;border:none;outline:none;font-family:inherit}::-webkit-scrollbar{display:none}*{scrollbar-width:none}@keyframes breathe{0%,to{opacity:.3}50%{opacity:1}}@keyframes scan-in{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse-dot{0%,to{box-shadow:0 0 0 0 var(--neon-accent-mid)}50%{box-shadow:0 0 0 4px #0000}}@keyframes spin{to{transform:rotate(360deg)}}.mono{font-variant-numeric:tabular-nums}.uppercase{text-transform:uppercase}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}::selection{background:var(--neon-accent-dim);color:var(--neon-accent)}@supports (padding:env(safe-area-inset-bottom)){.safe-bottom{padding-bottom:env(safe-area-inset-bottom)}}
.studio{background:var(--bg-0);flex-direction:column;width:100vw;height:100dvh;display:flex;overflow:hidden}@media (min-width:768px){.studio{grid-template:"transport transport""modetoggle modetoggle""sequencer fxpanel"1fr/1fr 260px;display:grid}.transport-bar{grid-area:transport}.mode-toggle-bar{grid-area:modetoggle}.sequencer-container,.arranger-container,.perform-surface{grid-area:sequencer}.fx-panel{grid-area:fxpanel}.studio.vibe-mode{grid-template-columns:1fr;grid-template-areas:"transport""modetoggle""sequencer"}}.splash{z-index:200;background:var(--bg-0);cursor:pointer;-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;gap:var(--s6);background-image:radial-gradient(at 50% 30%,#00e5ff14 0%,#0000 60%),radial-gradient(at 30% 70%,#4d8dff0f 0%,#0000 50%),radial-gradient(at 70% 60%,#a855f70d 0%,#0000 50%);flex-direction:column;animation:.6s ease-out splash-fade-in;display:flex;position:fixed;inset:0}@keyframes splash-fade-in{0%{opacity:0}to{opacity:1}}.splash-brand{letter-spacing:.25em;text-transform:uppercase;color:var(--text-0);text-shadow:0 0 40px #00e5ff4d,0 0 80px #00e5ff1a;font-size:42px;font-weight:800;position:relative}.splash-brand:after{content:"";background:linear-gradient(90deg, transparent, var(--neon-accent), var(--neon-blue), var(--neon-accent), transparent);background-size:200% 100%;height:2px;animation:3s linear infinite shine;position:absolute;bottom:-8px;left:10%;right:10%}@keyframes shine{0%{background-position:200% 0}to{background-position:-200% 0}}.splash-cta{font-size:var(--fs-md);letter-spacing:.35em;text-transform:uppercase;color:var(--neon-accent);margin-bottom:var(--s2);transition:all .3s var(--ease-out);cursor:pointer;text-shadow:0 0 12px var(--neon-accent-dim);font-weight:700}.splash.ready .splash-cta{letter-spacing:.5em;animation:1.5s ease-in-out infinite breathe;transform:scale(1.1)}.splash.loading .splash-cta{opacity:.3;pointer-events:none}.splash-progress-container{justify-content:center;align-items:center;gap:var(--s2);flex-direction:column;display:flex}.splash-status{font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);min-height:1.2em;font-weight:600}.splash-ver{bottom:var(--s8);font-size:var(--fs-xs);letter-spacing:.15em;color:var(--text-3);position:absolute}.splash-eq{align-items:flex-end;gap:4px;height:48px;margin-bottom:24px;display:flex}.splash-eq-bar{background:linear-gradient(to top, var(--neon-accent), var(--neon-blue));border-radius:2px;width:5px;animation:1.2s ease-in-out infinite eq-bounce}@keyframes eq-bounce{0%,to{opacity:.4;height:12px}50%{opacity:1;height:48px}}.splash-progress{background:#ffffff0f;border:1px solid #ffffff08;border-radius:2px;width:200px;height:4px;overflow:hidden}.splash-progress-fill{background:linear-gradient(90deg, var(--neon-accent), var(--neon-blue), var(--neon-green));height:100%;box-shadow:0 0 12px var(--neon-accent-mid);background-size:200% 100%;border-radius:2px;transition:width .4s cubic-bezier(.16,1,.3,1);animation:4s linear infinite shine}.transport-bar{padding:var(--s2) var(--s4);-webkit-backdrop-filter:blur(12px);z-index:10;justify-content:space-between;align-items:center;gap:var(--s3);background:linear-gradient(#121216fa 0%,#0a0a0efa 100%);border-bottom:1px solid #ffffff0a;flex-shrink:0;min-height:52px;display:flex;box-shadow:0 2px 12px #0006}.transport-group{align-items:center;gap:var(--s2);display:flex}.btn-transport{background:linear-gradient(135deg, var(--neon-accent) 0%, #00b8d4 100%);width:42px;height:42px;color:var(--bg-0);transition:all var(--dur-fast) ease;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 0 20px #00e5ff40,0 0 40px #00e5ff1a,inset 0 1px #fff3}.btn-transport:hover{transform:scale(1.05);box-shadow:0 0 28px #00e5ff66,0 0 56px #00e5ff26}.btn-transport:active{transition:transform var(--dur-instant);background:linear-gradient(135deg,#00b8d4 0%,#0088a3 100%);transform:scale(.92)}.play-tri{border-style:solid;border-width:7px 0 7px 13px;border-color:transparent transparent transparent var(--bg-0);filter:drop-shadow(0 0 2px #00000080);width:0;height:0;margin-left:2px}.stop-sq{background:var(--bg-0);border-radius:2px;width:12px;height:12px}.bpm-cluster{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);align-items:center;display:flex;overflow:hidden}.bpm-btn{width:28px;height:32px;color:var(--text-2);font-size:var(--fs-xl);transition:color var(--dur-fast), background var(--dur-fast);justify-content:center;align-items:center;font-weight:500;display:flex}.bpm-btn:hover{color:var(--text-0);background:var(--bg-3)}.bpm-btn:active{background:var(--bg-4)}.bpm-display{text-align:center;min-width:42px;font-size:var(--fs-xl);font-variant-numeric:tabular-nums;color:var(--text-0);font-weight:700;line-height:32px}.bpm-tag{font-size:var(--fs-xs);letter-spacing:.15em;color:var(--text-3);padding-right:var(--s2)}.bar-chip{align-items:center;gap:var(--s1);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s1) var(--s2);height:28px;display:flex}.bar-num{font-size:var(--fs-lg);color:var(--neon-green);font-variant-numeric:tabular-nums;font-weight:700}.bar-tag{letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);font-size:7px}.btn-extend{border-radius:var(--r-md);background:var(--neon-green-dim);width:28px;height:28px;color:var(--neon-green);font-size:var(--fs-xl);transition:background var(--dur-fast);border:1px solid #00ff8826;justify-content:center;align-items:center;font-weight:700;display:flex}.btn-extend:hover{background:#0f83}.btn-extend:disabled{opacity:.2;cursor:default}.btn-extend:disabled:active{transform:none}.btn-export{height:28px;padding:0 var(--s3);border-radius:var(--r-md);align-items:center;gap:var(--s1);background:var(--neon-purple-dim);color:var(--neon-purple);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;transition:background var(--dur-fast);white-space:nowrap;border:1px solid #a855f726;font-weight:700;display:flex}.btn-export:hover{background:#a855f738}.btn-export:disabled{opacity:.3;cursor:default}.sequencer-container{flex-direction:column;flex:1;min-height:0;display:flex;position:relative;overflow:hidden}.sequencer-scroll{-webkit-overflow-scrolling:touch;flex:1;overflow:auto}.sequencer-canvas{touch-action:pan-y;-webkit-user-select:none;user-select:none;width:100%;image-rendering:pixelated;display:block}.track-row{border-bottom:1px solid var(--border);animation:scan-in .25s var(--ease-out) both;align-items:stretch;display:flex}.track-label{background:var(--bg-1);border-right:1px solid var(--border);cursor:pointer;width:52px;transition:opacity var(--dur-fast);padding:var(--s1) 0;flex-direction:column;flex-shrink:0;justify-content:center;align-items:center;gap:3px;display:flex;position:relative}.track-label.muted{opacity:.25}.track-label:active{background:var(--bg-2)}.track-name{font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--text-1);text-align:center;font-weight:700;line-height:1.2}.track-dot{background:var(--neon-accent);border-radius:50%;width:4px;height:4px}.track-dot.off{background:var(--text-3)}.track-key{color:var(--text-3);font-size:7px;font-weight:700;display:none;position:absolute;top:3px;right:3px}@media (min-width:768px){.track-key{display:block}}.step-grid{padding:3px var(--s2) 3px var(--s1);touch-action:none;flex:1;align-items:stretch;gap:2px;min-width:0;display:flex;position:relative;overflow-x:hidden}.step{background:var(--step-off);border:1px solid var(--border);border-radius:var(--r-sm);cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:16px;max-width:52px;min-height:44px;transition:background var(--dur-instant), border-color var(--dur-instant), box-shadow var(--dur-fast);flex:1 0 0;position:relative;box-shadow:inset 0 1px 2px #ffffff08,inset 0 -1px 2px #0006,0 1px 3px #00000080}.step.beat-start{margin-left:3px}.step.bar-start{margin-left:7px}.step:hover{background:var(--step-hover);border-color:var(--border-active)}.step.on{background:var(--neon-accent);opacity:calc(.25 + .75 * var(--velocity,1));border-color:#ff5e1a99;box-shadow:inset 0 2px 4px #fff3,inset 0 -2px 3px #00000040,0 0 6px #ff5e1a66,0 0 16px #ff5e1a26,0 1px 3px #00000080}.step.on:hover{background:#f74;border-color:#f74;box-shadow:inset 0 2px 4px #ffffff40,inset 0 -2px 3px #0003,0 0 10px #ff5e1a80,0 0 20px #ff5e1a33,0 1px 3px #0006}.step.playing{box-shadow:inset 0 0 6px #00b4ff59, 0 0 12px var(--neon-blue-mid), 0 0 24px var(--neon-blue-dim);z-index:3;transition:none;transform:scaleY(1.06);background:var(--neon-blue)!important;border-color:var(--neon-blue)!important}.step.on.playing{box-shadow:inset 0 0 8px #ffffff80, 0 0 14px #fff9, 0 0 28px #ff5e1a4d, 0 0 4px var(--neon-accent);background:#fff!important;border-color:#ffffffe6!important}.playhead-layer{pointer-events:none;z-index:5;position:absolute;inset:0}.playhead-col{background:var(--neon-blue);width:2px;box-shadow:0 0 8px var(--neon-blue-mid), 0 0 20px var(--neon-blue-dim);opacity:0;will-change:transform, opacity;transition:opacity var(--dur-fast);pointer-events:none;z-index:5;position:absolute;top:0;bottom:0}.playhead-col.visible{opacity:1}.fx-panel{background:var(--bg-1);border-top:1px solid var(--border);padding:var(--s3) var(--s4);gap:var(--s2);flex-direction:column;flex-shrink:0;display:flex}@media (min-width:768px){.fx-panel{border-top:none;border-left:1px solid var(--border);padding:var(--s4);justify-content:flex-start}}.fx-header{justify-content:space-between;align-items:center;height:32px;display:flex;position:relative}.fx-title{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--text-2);font-weight:700}.fx-readout{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--text-3);letter-spacing:.05em}.xy-pad{aspect-ratio:16/9;border-radius:var(--r-md);background:var(--bg-2);border:1px solid var(--border);touch-action:none;cursor:crosshair;width:100%;position:relative;overflow:hidden}@media (min-width:768px){.xy-pad{aspect-ratio:1}}.xy-pad:before,.xy-pad:after{content:"";pointer-events:none;background:var(--border);position:absolute}.xy-pad:before{width:1px;top:0;bottom:0;left:50%}.xy-pad:after{height:1px;top:50%;left:0;right:0}.xy-label{letter-spacing:.18em;text-transform:uppercase;pointer-events:none;z-index:2;font-size:7px;position:absolute}.xy-label-x{color:var(--neon-green);opacity:.5;bottom:5px;right:8px}.xy-label-y{color:var(--neon-blue);opacity:.5;top:5px;left:8px}.xy-cursor{border:2px solid var(--text-0);pointer-events:none;opacity:0;will-change:transform, opacity;width:20px;height:20px;transition:opacity var(--dur-fast);z-index:3;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}.xy-cursor.active{opacity:1}.xy-cursor:after{content:"";border:1px solid #ffffff26;border-radius:50%;animation:1.2s ease-in-out infinite pulse-dot;position:absolute;inset:-6px}.export-overlay{z-index:100;-webkit-backdrop-filter:blur(12px);justify-content:center;align-items:center;gap:var(--s4);animation:scan-in .15s var(--ease-out);background:#050505eb;flex-direction:column;display:flex;position:fixed;inset:0}.export-spinner{border:2px solid var(--border);border-top-color:var(--neon-purple);border-radius:50%;width:28px;height:28px;animation:.7s linear infinite spin}.export-label{font-size:var(--fs-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--text-1)}.export-bar{background:var(--bg-3);border-radius:1px;width:180px;height:2px;overflow:hidden}.export-fill{background:var(--neon-purple);height:100%;transition:width .3s var(--ease-out);border-radius:1px}.shortcut-hint{bottom:var(--s4);font-size:var(--fs-xs);letter-spacing:.1em;color:var(--text-3);gap:var(--s4);z-index:100;display:none;position:fixed;left:50%;transform:translate(-50%)}@media (min-width:768px){.shortcut-hint{display:flex}}.shortcut-key{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text-2);margin-right:var(--s1);padding:2px 6px;font-weight:600}@media (min-width:768px){.track-row{min-height:56px}.track-label{width:64px}.step{min-height:48px}.synth-cell{min-height:28px}.synth-note-label{width:64px}}@media (min-width:1024px){.track-row{min-height:64px}.track-label{width:72px}.step{max-width:64px;min-height:56px}.track-name{font-size:var(--fs-sm)}.synth-cell{max-width:64px;min-height:30px}.synth-note-label{width:72px}}.synth-section{border-top:2px solid var(--neon-purple-dim)}.synth-header{padding:var(--s2) var(--s4);background:var(--bg-1);border-bottom:1px solid var(--border);justify-content:space-between;align-items:center;min-height:40px;display:flex}.synth-header-left{align-items:center;gap:var(--s2);display:flex}.synth-expand-btn{width:20px;height:20px;color:var(--text-2);font-size:var(--fs-md);transition:color var(--dur-fast);justify-content:center;align-items:center;display:flex}.synth-expand-btn:hover{color:var(--text-0)}.synth-title{font-size:var(--fs-xs);letter-spacing:.2em;text-transform:uppercase;color:var(--neon-purple);font-weight:700}.synth-wave-select{background:var(--border);border-radius:var(--r-md);gap:1px;display:flex;overflow:hidden}.synth-wave-btn{padding:var(--s1) var(--s3);font-size:var(--fs-xs);letter-spacing:.12em;color:var(--text-2);background:var(--bg-2);transition:all var(--dur-fast);font-weight:700}.synth-wave-btn:hover{color:var(--text-0);background:var(--bg-3)}.synth-wave-btn.active{color:var(--neon-purple);background:var(--neon-purple-dim)}.synth-grid-wrapper{border-bottom:1px solid var(--border);animation:scan-in .2s var(--ease-out);display:flex}.synth-note-labels{background:var(--bg-1);border-right:1px solid var(--border);flex-direction:column;flex-shrink:0;width:52px;display:flex}.synth-note-label{letter-spacing:.1em;color:var(--text-3);border-bottom:1px solid var(--border);flex:1;justify-content:center;align-items:center;font-size:7px;font-weight:700;display:flex}.synth-note-label:last-child{border-bottom:none}.synth-grid{touch-action:none;flex-direction:column;flex:1;display:flex;overflow-x:auto}.synth-grid-row{padding:0 var(--s2) 0 var(--s1);border-bottom:1px solid var(--border);gap:1px;display:flex}.synth-grid-row:last-child{border-bottom:none}.synth-cell{background:var(--step-off);cursor:pointer;-webkit-tap-highlight-color:transparent;min-width:16px;max-width:52px;min-height:22px;transition:background var(--dur-instant);border:1px solid #0000;border-radius:2px;flex:1 0 0;box-shadow:inset 0 1px 1px #ffffff05,inset 0 -1px 1px #0000004d,0 1px 2px #0000004d}.synth-cell.beat-start{margin-left:2px}.synth-cell.bar-start{margin-left:5px}.synth-cell:hover{background:var(--step-hover)}.synth-cell.on{background:var(--neon-purple);opacity:calc(.25 + .75 * var(--velocity,1));box-shadow:inset 0 1px 3px #ffffff26, inset 0 -1px 2px #0003, 0 0 6px #a855f759, 0 0 14px var(--neon-purple-dim), 0 1px 2px #0000004d;border-color:#a855f799}.synth-cell.on:hover{box-shadow:inset 0 1px 3px #fff3, 0 0 10px #a855f773, 0 0 18px var(--neon-purple-dim);background:#c084fc}.synth-cell.synth-playing{box-shadow:inset 0 0 4px #00b4ff4d, 0 0 8px var(--neon-blue-dim);transition:none;background:var(--neon-blue)!important;border-color:var(--neon-blue)!important}.synth-cell.on.synth-playing{box-shadow:inset 0 0 6px #fff6,0 0 10px #a855f780,0 0 20px #a855f733;background:#fff!important;border-color:#ffffffe6!important}.btn-reset{height:28px;padding:0 var(--s3);border-radius:var(--r-md);align-items:center;gap:var(--s1);color:var(--neon-red);font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;transition:background var(--dur-fast);white-space:nowrap;background:#ff3b3b14;border:1px solid #ff3b3b1f;font-weight:700;display:flex}.btn-reset:hover{background:#ff3b3b2e}.reset-modal{z-index:150;-webkit-backdrop-filter:blur(12px);justify-content:center;align-items:center;gap:var(--s4);animation:scan-in .12s var(--ease-out);background:#050505eb;flex-direction:column;display:flex;position:fixed;inset:0}.reset-modal-title{font-size:var(--fs-xl);color:var(--text-0);letter-spacing:.1em;text-shadow:0 0 16px #fff6;font-weight:700}.reset-modal-desc{font-size:var(--fs-sm);color:var(--text-2);text-align:center;max-width:280px;line-height:1.6}.reset-modal-actions{gap:var(--s3);margin-top:var(--s2);display:flex}.reset-modal-btn{height:36px;padding:0 var(--s6);border-radius:var(--r-md);font-size:var(--fs-sm);letter-spacing:.1em;text-transform:uppercase;font-weight:700}.reset-confirm{background:var(--neon-red);color:var(--bg-0);transition:all var(--dur-fast) ease;box-shadow:0 0 12px #ff3b3b4d}.reset-confirm:active{background:#cc2f2f;transform:scale(.95)}.reset-cancel{background:var(--bg-3);color:var(--text-1);border:1px solid var(--border)}.reset-cancel:active{background:var(--bg-4)}.mode-toggle-bar{background:linear-gradient(#0c0c0ef2 0%,#08080cf2 100%);border-bottom:1px solid #ffffff08;justify-content:center;align-items:center;gap:4px;padding:6px 16px;display:flex}.mode-toggle-btn{color:var(--text-3);font:700 10px/1 var(--font-mono);letter-spacing:1.5px;text-transform:uppercase;cursor:pointer;transition:all .25s var(--ease-out);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;background:#ffffff05;border:1px solid #ffffff0d;border-radius:20px;align-items:center;gap:6px;padding:8px 22px;display:flex;position:relative;overflow:hidden}.mode-toggle-btn:before{content:"";opacity:0;background:linear-gradient(135deg,#0000 0%,#ffffff08 100%);transition:opacity .2s;position:absolute;inset:0}.mode-toggle-btn:hover{color:var(--text-1);background:#ffffff0d}.mode-toggle-btn:hover:before{opacity:1}.mode-toggle-btn.active{color:var(--neon-blue);background:linear-gradient(135deg,#4d8dff1f 0%,#00e5ff14 100%);border-color:#4d8dff4d;box-shadow:0 0 16px #4d8dff26,0 0 32px #4d8dff0d,inset 0 1px #ffffff0f}.mode-toggle-btn.active svg{filter:drop-shadow(0 0 6px #4d8dff99)}.mode-toggle-vibe.active{color:#ec4899;background:linear-gradient(135deg,#ec489926 0%,#f59e0b1a 100%);border-color:#ec489966;box-shadow:0 0 16px #ec489933,0 0 32px #ec489914,inset 0 1px #ffffff0f}.mode-toggle-vibe.active svg{filter:drop-shadow(0 0 6px #ec4899b3)}.perform-surface{aspect-ratio:auto;background:#0a0a0a;border-radius:8px;flex:1;width:100%;max-width:900px;min-height:300px;margin:0 auto;position:relative;overflow:hidden}@media (max-width:767px){.perform-surface{border-radius:0;max-width:100%;margin:0}}.perform-overlay{pointer-events:none;z-index:2;flex-direction:column;justify-content:space-between;align-items:center;padding:10px 12px;display:flex;position:absolute;inset:0}.perform-scene-bar{pointer-events:auto;align-items:center;gap:6px;display:flex}.perform-scene-btn{color:#ffffff80;cursor:pointer;-webkit-tap-highlight-color:transparent;background:#ffffff0f;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;transition:all .2s;display:flex}.perform-scene-btn:hover{color:#fff;background:#ffffff1f}.perform-scene-pill{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0006;border:1px solid #ffffff14;border-radius:20px;align-items:center;gap:6px;padding:5px 14px;display:flex}.perform-scene-icon{color:#ec4899;filter:drop-shadow(0 0 4px #ec489966);font-size:12px}.perform-scene-name{font:700 11px/1 var(--font-mono,"Inter", system-ui);letter-spacing:1px;color:#fffc;text-transform:uppercase}.perform-seed-badge{color:#fff6;background:#ffffff0d;border-radius:8px;padding:2px 6px;font:500 9px/1 monospace}.perform-actions{pointer-events:auto;align-self:flex-end;gap:8px;display:flex}.perform-action-btn{color:#fff9;cursor:pointer;-webkit-tap-highlight-color:transparent;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0006;border:1px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:13px;transition:all .25s;display:flex}.perform-action-btn:hover{color:#fff;background:#ffffff1a;border-color:#fff3}.perform-action-btn.copied{color:#10b981;background:#10b98126;border-color:#10b98166}.arranger-container{flex-direction:column;min-height:348px;display:flex;overflow:hidden}.arranger-scroll{flex:1;overflow:auto}.page-toggle{padding:var(--s1) var(--s4);background:var(--bg-1);border-bottom:1px solid var(--border);flex-shrink:0;justify-content:center;align-items:center;gap:1px;display:flex}.page-btn{max-width:140px;height:28px;font-size:var(--fs-xs);letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);transition:all var(--dur-fast);flex:1;justify-content:center;align-items:center;font-weight:700;display:flex}.page-btn:first-child{border-radius:var(--r-md) 0 0 var(--r-md)}.page-btn:last-child{border-radius:0 var(--r-md) var(--r-md) 0}.page-btn.active{color:var(--neon-accent);background:var(--neon-accent-dim);border-color:#ff5e1a4d}.page-btn:active{transform:scale(.96)}@media (min-width:768px){.page-toggle{display:none}}.swing-cluster{align-items:center;gap:var(--s1);background:var(--bg-2);border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s1) var(--s2);height:28px;display:flex}.swing-tag{letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);flex-shrink:0;font-size:7px}.swing-slider{appearance:none;background:var(--bg-4);cursor:pointer;border-radius:2px;outline:none;width:52px;height:4px}.swing-slider::-webkit-slider-thumb{appearance:none;background:var(--neon-accent);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}.swing-slider::-moz-range-thumb{background:var(--neon-accent);cursor:pointer;border:none;border-radius:50%;width:10px;height:10px}.swing-value{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--text-3);text-align:right;min-width:28px}@media (max-width:420px){.swing-cluster{display:none}}.motion-rec-btn{align-items:center;gap:var(--s1);height:22px;padding:0 var(--s2);border-radius:var(--r-sm);letter-spacing:.12em;text-transform:uppercase;color:var(--text-2);background:var(--bg-2);border:1px solid var(--border);transition:all var(--dur-fast);cursor:pointer;font-size:8px;font-weight:700;display:flex;position:absolute;left:50%;transform:translate(-50%)}.motion-rec-btn:hover{color:var(--text-0);background:var(--bg-3)}.rec-dot{background:var(--text-3);width:6px;height:6px;transition:background var(--dur-fast);border-radius:50%;flex-shrink:0}.motion-rec-btn.recording{color:var(--neon-red);background:#ff3b3b14;border-color:#ff3b3b40}.motion-rec-btn.recording .rec-dot{background:var(--neon-red);animation:1s ease-in-out infinite breathe}.motion-rec-btn.has-data{color:var(--neon-green);background:var(--neon-green-dim);border-color:#0f83}.motion-rec-btn.has-data .rec-dot{background:var(--neon-green)}.xy-ghost-cursor{background:var(--neon-purple);width:12px;height:12px;box-shadow:0 0 8px var(--neon-purple-dim);pointer-events:none;will-change:left, top, opacity;transition:opacity var(--dur-fast);z-index:2;opacity:0;border-radius:50%;position:absolute;transform:translate(-50%,-50%)}@media (max-width:767px){.step{min-width:28px;min-height:44px}.synth-cell{min-width:28px;min-height:24px}}.pointer-light-overlay{pointer-events:none;z-index:1;background:radial-gradient(320px circle at var(--mouse-x,50%) var(--mouse-y,50%), #ffffff06 0%, transparent 100%);will-change:background;mix-blend-mode:screen;position:fixed;inset:0}.guide-trigger{background:var(--bg-3);border:1px solid var(--border);width:20px;height:20px;color:var(--text-2);cursor:pointer;transition:all var(--dur-fast);margin-left:var(--s2);border-radius:50%;justify-content:center;align-items:center;font-family:Georgia,serif;font-size:10px;font-style:italic;font-weight:700;display:flex}.guide-trigger:hover{color:var(--neon-blue);border-color:var(--neon-blue-dim);background:var(--neon-blue-dim)}.guide-overlay{z-index:180;-webkit-backdrop-filter:blur(16px);animation:scan-in .15s var(--ease-out);background:#050505e0;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.guide-card{background:var(--bg-2);border:1px solid var(--border-active);border-radius:var(--r-lg);padding:var(--s6) var(--s8);align-items:center;gap:var(--s4);text-align:center;flex-direction:column;width:92%;max-width:360px;max-height:85vh;display:flex;overflow-y:auto;box-shadow:0 0 40px #0009,0 0 1px #ffffff14}.guide-tabs{gap:4px;width:100%;display:flex}.guide-tab{color:var(--text-3);font:700 9px/1 var(--font-mono);letter-spacing:1px;cursor:pointer;background:#ffffff08;border:1px solid #ffffff0f;border-radius:6px;flex:1;padding:6px 4px;transition:all .2s}.guide-tab:hover{background:#ffffff0f}.guide-tab.active{background:#ffffff0f;border-bottom:2px solid}.guide-dots{gap:var(--s2);display:flex}.guide-dot{background:var(--text-3);cursor:pointer;width:6px;height:6px;transition:all var(--dur-fast);border-radius:50%}.guide-dot.active{background:var(--neon-blue);box-shadow:0 0 6px var(--neon-blue-dim);transform:scale(1.3)}.guide-icon{background:var(--bg-3);border-radius:var(--r-lg);border:1px solid var(--border);width:56px;height:56px;color:var(--neon-blue);justify-content:center;align-items:center;font-size:28px;display:flex}.guide-title{font-size:var(--fs-lg);letter-spacing:.1em;text-transform:uppercase;color:var(--text-0);font-weight:700}.guide-desc{font-size:var(--fs-sm);color:var(--text-1);letter-spacing:.02em;line-height:1.7}.guide-ghost-hand{justify-content:center;align-items:center;height:48px;display:flex}.ghost-hand-indicator{flex-direction:column;align-items:center;gap:2px;animation:1.5s ease-in-out infinite ghost-bob;display:flex}.ghost-arrow{color:var(--neon-accent);font-size:20px}.ghost-label{letter-spacing:.15em;text-transform:uppercase;color:var(--text-2);font-size:8px}@keyframes ghost-bob{0%,to{opacity:.5;transform:translateY(-6px)}50%{opacity:1;transform:translateY(6px)}}.guide-nav{align-items:center;gap:var(--s4);margin-top:var(--s2);display:flex}.guide-nav-btn{border-radius:var(--r-md);background:var(--bg-3);border:1px solid var(--border);width:32px;height:32px;color:var(--text-1);font-size:var(--fs-lg);transition:all var(--dur-fast);justify-content:center;align-items:center;font-weight:600;display:flex}.guide-nav-btn:hover{background:var(--bg-4);color:var(--text-0)}.guide-nav-btn:disabled{opacity:.2;cursor:default}.guide-counter{font-size:var(--fs-xs);font-variant-numeric:tabular-nums;color:var(--text-3);letter-spacing:.08em}.btn-settings{border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg-2);width:36px;height:36px;color:var(--text-1);cursor:pointer;transition:all var(--dur-fast);justify-content:center;align-items:center;font-size:18px;display:flex}.btn-settings:hover{background:var(--bg-hover);color:var(--text-0)}.settings-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#000000b3;justify-content:center;align-items:flex-end;padding:16px;display:flex;position:fixed;inset:0}.settings-modal{background:var(--bg-2);border:1px solid var(--border-active);border-radius:var(--r-lg);flex-direction:column;gap:16px;width:100%;max-width:400px;padding:20px;display:flex}.settings-title{font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--text-0);text-transform:uppercase;letter-spacing:.12em;text-align:center;font-weight:700}.settings-row{align-items:center;gap:12px;display:flex}.settings-label{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--text-1);text-transform:uppercase;letter-spacing:.1em;min-width:60px}.settings-control{flex:1;align-items:center;gap:8px;display:flex}.settings-btn{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-0);font-family:var(--ff-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;transition:all var(--dur-fast);flex:1;padding:10px}.settings-btn:hover{background:var(--bg-hover)}.settings-btn:disabled{opacity:.3;cursor:default}.settings-btn-danger{color:var(--neon-red);border-color:#ff3b3b33}.settings-btn-danger:hover{background:#ff3b3b1a}.settings-close{background:var(--neon-accent);border-radius:var(--r-sm);color:var(--bg-0);font-family:var(--ff-mono);font-size:var(--fs-xs);text-transform:uppercase;letter-spacing:.1em;cursor:pointer;border:none;padding:10px;font-weight:700}.page-arrow{justify-content:center;align-items:center;width:36px;height:36px;padding:0;font-size:12px;display:flex}.page-arrow:disabled{opacity:.2;cursor:default}.page-indicator{font-family:var(--ff-mono);font-size:var(--fs-sm);color:var(--neon-accent);letter-spacing:.08em;text-align:center;min-width:80px;font-weight:700}.page-total{color:var(--text-3);font-weight:400;font-size:var(--fs-xs)}.settings-modal-full{max-height:85vh;overflow-y:auto}.settings-title{font-family:var(--ff-mono);font-size:var(--fs-md);color:var(--text-1);border-bottom:1px solid var(--border);align-items:center;gap:8px;margin-bottom:12px;padding-bottom:8px;display:flex}.settings-actions-top{gap:8px;margin-bottom:16px;display:flex}.settings-btn{background:var(--bg-hover);border:1px solid var(--border);border-radius:var(--r-sm);color:var(--text-2);font-family:var(--ff-mono);font-size:var(--fs-xs);text-transform:uppercase;cursor:pointer;flex:1;justify-content:center;align-items:center;gap:6px;padding:8px;display:flex}.settings-btn-primary{background:var(--neon-accent-dim);color:var(--neon-accent);border-color:var(--neon-accent)}.settings-add-title{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--neon-accent);text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--border);align-items:center;gap:6px;margin-bottom:8px;padding-bottom:4px;font-weight:700;display:flex}.settings-section{margin-bottom:24px}.settings-section-title{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--neon-accent);text-transform:uppercase;letter-spacing:.12em;border-bottom:1px solid var(--border);padding-bottom:4px;font-weight:700}.settings-track-list{flex-direction:column;gap:4px;max-height:140px;display:flex;overflow-y:auto}.settings-track-item{background:var(--bg-3);border-radius:var(--r-xs);justify-content:space-between;align-items:center;padding:6px 10px;display:flex}.settings-track-name{font-family:var(--ff-mono);font-size:var(--fs-xs);color:var(--text-1);letter-spacing:.08em}.settings-track-remove{border:1px solid var(--border);border-radius:var(--r-xs);width:24px;height:24px;color:var(--neon-red);cursor:pointer;transition:all var(--dur-fast);background:0 0;justify-content:center;align-items:center;font-size:14px;display:flex}.settings-track-remove:hover{background:#ff3b3b26}.settings-track-remove:disabled{opacity:.15;cursor:default}.settings-add-section{flex-direction:column;gap:8px;display:flex}.settings-add-title{font-family:var(--ff-mono);color:var(--text-2);text-transform:uppercase;letter-spacing:.12em;font-size:9px}.settings-instrument-grid{flex-direction:column;gap:12px;display:flex}.settings-instrument-category{flex-direction:column;gap:4px;display:flex}.settings-category-title{font-family:var(--ff-mono);color:var(--neon-accent-dim);text-transform:uppercase;letter-spacing:.1em;border-bottom:1px solid var(--border);padding-bottom:2px;font-size:8px}.settings-category-flex{grid-template-columns:repeat(3,1fr);gap:4px;display:grid}.settings-instrument-btn{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--r-xs);color:var(--text-1);font-family:var(--ff-mono);text-transform:uppercase;letter-spacing:.06em;cursor:pointer;transition:all var(--dur-fast);justify-content:center;align-items:center;gap:4px;padding:6px 4px;font-size:9px;display:flex}.settings-instrument-btn:hover{background:var(--bg-hover);color:var(--neon-accent);border-color:var(--neon-accent)}.settings-instrument-btn.active{background:var(--bg-1);color:var(--neon-green);border-color:var(--neon-green);box-shadow:0 0 8px #39ff1433}.settings-instrument-btn:disabled{opacity:.3;cursor:default}