:root{color-scheme:dark;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;--bg: #050816;--panel: #0d1024;--panel-2: #080b1d;--text: #f8f6ff;--muted: #9aa0d8;--line: rgba(132, 145, 255, .26);--blue: #00d8ff;--pink: #ff4dd2;--purple: #a855f7;--cyan: #31f6ec;--orange: #ff7a1a;--yellow: #ffd21f;--radius: 16px;--track-label-width: 240px;--step-size: 42px;--step-gap: 8px;--glow-pink: 0 0 18px rgba(255, 77, 210, .72), 0 0 44px rgba(255, 77, 210, .28);--glow-blue: 0 0 18px rgba(0, 216, 255, .72), 0 0 42px rgba(0, 216, 255, .26);--glow-purple: 0 0 18px rgba(168, 85, 247, .72), 0 0 42px rgba(168, 85, 247, .26);--app-accent: var(--pink)}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{overflow-x:hidden;background:linear-gradient(115deg,rgba(255,77,210,.12),transparent 26%),linear-gradient(245deg,rgba(0,216,255,.1),transparent 32%),linear-gradient(180deg,#07091c 0%,var(--bg) 46%,#02030b 100%);background-size:140% 140%,150% 150%,100% 100%;color:var(--text);animation:backgroundDrift 18s ease-in-out infinite alternate}button{border:0;font:inherit;color:inherit}.theme-blue{--app-accent: var(--blue)}.theme-pink{--app-accent: var(--pink)}.theme-purple{--app-accent: var(--purple)}.theme-cyan{--app-accent: var(--cyan)}.theme-yellow{--app-accent: var(--yellow)}.app-shell{position:relative;min-height:100vh;min-height:100dvh;padding:max(12px,env(safe-area-inset-top)) 10px max(12px,env(safe-area-inset-bottom));isolation:isolate}.app-shell:before{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";background:linear-gradient(90deg,rgba(255,77,210,.08) 0 1px,transparent 1px 100%),linear-gradient(0deg,rgba(0,216,255,.06) 0 1px,transparent 1px 100%);background-size:84px 84px;-webkit-mask-image:linear-gradient(to bottom,transparent,black 18%,black 70%,transparent);mask-image:linear-gradient(to bottom,transparent,black 18%,black 70%,transparent);opacity:.28}.app-shell:after{position:fixed;inset:0;z-index:-1;pointer-events:none;content:"";background:linear-gradient(135deg,transparent 0%,rgba(255,77,210,.08) 30%,transparent 58%),linear-gradient(45deg,transparent 8%,rgba(0,216,255,.08) 46%,transparent 82%);opacity:.42;transform:translateZ(0);animation:neonAura 14s ease-in-out infinite alternate}.device-frame{width:min(100%,1510px);min-height:calc(100dvh - 24px);margin:0 auto;display:flex;flex-direction:column;overflow:hidden;border:1px solid rgba(168,85,247,.2);border-radius:18px;background:linear-gradient(180deg,#121632f0,#040612fa),var(--bg);box-shadow:0 24px 80px #00000094,inset 0 1px #ffffff0d,inset 0 -1px #00d8ff1f;transition:box-shadow .26s ease,border-color .26s ease}.device-frame.playing{border-color:#00d8ff57;box-shadow:0 24px 80px #00000094,0 0 38px #00d8ff24,inset 0 1px #ffffff0d,inset 0 -1px #00d8ff2e}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:66px;padding:18px 18px 8px}.brand-block{display:flex;align-items:baseline;gap:10px;min-width:0}.brand-block h1{margin:0;color:#ff6be2;font-size:clamp(2rem,8vw,3.4rem);line-height:.9;text-shadow:var(--glow-pink)}.brand-block span{color:var(--blue);font-size:clamp(.82rem,2.6vw,1.1rem);font-weight:800;text-transform:uppercase;text-shadow:var(--glow-blue);white-space:nowrap}.mobile-screen-title{display:none;color:#dfe2ff;font-weight:800}.workspace{flex:1;display:grid;grid-template-columns:210px minmax(0,1fr);gap:18px;min-height:0;padding:6px 18px 16px}.side-rail,.content-panel,.control-card,.sequence-panel,.preset-card,.saved-row,.empty-state,.settings-panel{border:1px solid var(--line);background:linear-gradient(180deg,#121530eb,#050716f5),var(--panel);box-shadow:inset 0 1px #ffffff0d,0 16px 44px #0000004d}.side-rail{display:flex;flex-direction:column;justify-content:space-between;min-height:520px;border-radius:var(--radius);padding:14px 10px}.rail-nav{display:grid;gap:10px}.rail-item,.tab-item{min-height:58px;border-radius:10px;background:transparent;color:#aeb4ea;cursor:pointer}.rail-item{display:flex;align-items:center;gap:14px;padding:0 14px;text-align:left}.rail-item span,.tab-item span{color:#8a92df;font-size:1.5rem}.rail-item strong,.tab-item strong{font-size:.9rem;font-weight:800}.rail-item.active,.tab-item.active{color:#fff;border:1px solid rgba(255,77,210,.72);background:linear-gradient(90deg,#ff4dd23d,#a855f71f),#ff4dd20d;box-shadow:var(--glow-pink),inset 0 0 24px #ff4dd229}.rail-item.active span,.tab-item.active span{color:var(--pink);text-shadow:var(--glow-pink)}.about-panel{display:grid;gap:9px;padding:18px 12px 8px;border-top:1px solid rgba(132,145,255,.16);color:#b5bbec}.about-panel span{color:#d4d8ff;font-size:.78rem;font-weight:800;text-transform:uppercase}.about-panel strong,.about-panel small{font-size:.78rem;font-weight:500}.content-panel{min-width:0;border-radius:var(--radius);padding:16px}.content-panel.pattern-reflect{animation:patternReflect .36s ease-out}.drum-screen{display:grid;gap:16px}.control-strip{display:grid;grid-template-columns:minmax(150px,205px) minmax(220px,310px) minmax(120px,150px) minmax(260px,350px);gap:16px;align-items:stretch}.control-card{min-height:96px;border-radius:10px;padding:16px 18px}.control-card>span,.step-header strong,.track-label strong,.mini-volume span{color:#cfd2ff;font-size:.78rem;font-weight:900;text-transform:uppercase}.bpm-card{display:grid;gap:10px}.bpm-value{display:grid;grid-template-columns:38px 1fr 38px;align-items:center}.bpm-value strong{font-size:2.3rem;font-weight:700;text-align:center}.bpm-value button{width:38px;height:38px;border-radius:50%;background:#080c22c7;color:#d7d9ff;cursor:pointer}.transport-card{position:relative;display:flex;align-items:center;justify-content:center;gap:22px}.transport-card.playing{border-color:#00d8ff6b;box-shadow:var(--glow-blue),inset 0 0 30px #00d8ff1f,0 16px 44px #0000004d}.playback-lamp{position:absolute;top:13px;left:16px;width:9px;height:9px;border-radius:50%;background:#8491ff80;box-shadow:0 0 10px #8491ff47}.playback-lamp.live{background:var(--blue);box-shadow:0 0 14px var(--blue),0 0 30px #00d8ff73;animation:lampBeat .62s ease-in-out infinite alternate}.transport-button{display:grid;place-items:center;width:68px;height:68px;border:2px solid rgba(132,145,255,.45);border-radius:50%;background:#090c23db;cursor:pointer;transition:transform .14s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease;transform:translateZ(0)}.transport-button.play{border-color:var(--blue);box-shadow:var(--glow-blue),inset 0 0 26px #00d8ff29}.transport-button.play.active{animation:transportPulse .9s ease-in-out infinite alternate;background:radial-gradient(circle,#00d8ff38,#090c23e6 68%)}.transport-button:active{transform:scale(.93)}.transport-button.play span{width:0;height:0;margin-left:6px;border-top:18px solid transparent;border-bottom:18px solid transparent;border-left:26px solid #8df1ff;filter:drop-shadow(0 0 12px rgba(0,216,255,.9))}.transport-button.stop span{width:22px;height:22px;border-radius:4px;background:#b9bdff;box-shadow:0 0 18px #a855f77a}.playback-status{position:absolute;right:16px;bottom:12px;color:#8d95dd;font-size:.68rem;font-weight:900;letter-spacing:0;text-transform:uppercase}.playback-status.live{color:var(--blue);text-shadow:var(--glow-blue)}.dial-card{display:grid;gap:12px}.dial-readout{display:flex;align-items:center;gap:10px}.dial-readout i{width:34px;height:34px;border:3px solid rgba(163,172,255,.72);border-right-color:#a3acff33;border-radius:50%;box-shadow:0 0 14px #8491ff5c;transition:rotate .16s ease}.volume-card{display:grid;align-content:center;gap:11px}.volume-card.playing{border-color:#ff4dd257}.wide-slider{display:grid;grid-template-columns:32px minmax(120px,1fr) 48px;align-items:center;gap:12px}.wide-slider b{color:#aeb7ff;font-size:1.7rem}.wide-slider strong,.dial-readout strong{white-space:nowrap}.slider-track,.mini-volume{position:relative}.slider-track{height:6px;overflow:visible;border-radius:999px;background:#5862aa4d}.slider-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:var(--glow-pink)}.range-shell{position:relative;display:block;width:100%;height:28px;min-width:0;touch-action:none}.range-rail{position:absolute;right:0;left:0;top:50%;height:6px;overflow:hidden;border-radius:999px;background:#5862aa57;translate:0 -50%}.range-fill{display:block;width:var(--range-percent);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--pink),var(--purple));box-shadow:var(--glow-pink);transition:width .13s linear}.range-control{position:absolute;inset:0;width:100%;height:28px;margin:0;appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer}.range-control::-webkit-slider-runnable-track{height:28px;background:transparent}.range-control::-webkit-slider-thumb{width:20px;height:20px;margin-top:4px;border:2px solid rgba(255,255,255,.78);border-radius:50%;appearance:none;-webkit-appearance:none;background:var(--app-accent);box-shadow:0 0 18px var(--app-accent),0 0 34px color-mix(in srgb,var(--app-accent) 42%,transparent);transition:transform .12s ease,box-shadow .14s ease}.range-control:active::-webkit-slider-thumb{transform:scale(1.16)}.range-control::-moz-range-track{height:28px;background:transparent}.range-control::-moz-range-thumb{width:18px;height:18px;border:2px solid rgba(255,255,255,.78);border-radius:50%;background:var(--app-accent);box-shadow:0 0 18px var(--app-accent),0 0 34px color-mix(in srgb,var(--app-accent) 42%,transparent);transition:transform .12s ease,box-shadow .14s ease}.range-control:active::-moz-range-thumb{transform:scale(1.16)}.value-pop{display:inline-block;animation:numberPop .18s ease-out}.level-meter{display:grid;grid-template-columns:repeat(10,minmax(8px,1fr));align-items:end;gap:5px;height:22px;padding-inline:44px 58px}.level-meter span{height:calc(5px + var(--meter-index) * 1.3px);border-radius:999px;background:#5862aa4d;transform-origin:bottom;transition:background .16s ease,box-shadow .16s ease,transform .16s ease}.level-meter span.active{background:linear-gradient(180deg,var(--pink),var(--purple));box-shadow:0 0 10px #ff4dd29e}.volume-card.playing .level-meter span.active{animation:meterPulse .68s ease-in-out infinite alternate;animation-delay:calc(var(--meter-index) * 42ms)}.sequence-panel{position:relative;overflow:hidden;border-radius:10px;padding:12px;transition:border-color .22s ease,box-shadow .22s ease}.sequence-panel.playing{border-color:#ff4dd257;box-shadow:0 0 28px #ff4dd229,inset 0 1px #ffffff0d,0 16px 44px #0000004d}.sequence-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 0 10px}.sequence-actions{display:flex;align-items:center;justify-content:flex-end;gap:12px}.sequence-toolbar>strong{color:#f5f6ff;font-size:.82rem;font-weight:900;text-transform:uppercase;text-shadow:var(--glow-blue)}.clear-steps-button{min-height:30px;padding:0 12px;border:1px solid rgba(255,77,210,.52);border-radius:7px;background:#ff4dd21a;color:#ff9be8;font-size:.75rem;font-weight:900;text-transform:uppercase;cursor:pointer;box-shadow:0 0 16px #ff4dd233;transition:transform .12s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease;white-space:nowrap}.clear-steps-button:active{transform:scale(.94)}.step-header{display:grid;grid-template-columns:var(--track-label-width) minmax(0,1fr);gap:10px;align-items:center;min-width:calc(var(--track-label-width) + 10px + (var(--step-size) * 16) + (var(--step-gap) * 15));padding:0 0 8px}.step-numbers,.steps-row{display:grid;gap:var(--step-gap)}.step-numbers span{display:grid;place-items:center;min-height:26px;color:#ccd0ff;font-weight:700;transition:transform .12s ease,color .12s ease,box-shadow .12s ease}.step-numbers span.current{color:#fff;border:1px solid rgba(255,77,210,.8);border-radius:8px 8px 0 0;background:#ff4dd224;box-shadow:var(--glow-pink);transform:translateZ(0) scale(1.08);animation:cursorNumberPulse .52s ease-in-out infinite alternate}.grid-scroll{overflow-x:auto;padding-bottom:6px;scrollbar-color:rgba(255,77,210,.7) rgba(20,24,55,.8)}.track-grid{position:relative;display:grid;min-width:calc(var(--track-label-width) + 10px + (var(--step-size) * 16) + (var(--step-gap) * 15))}.track-grid:after{position:absolute;top:0;bottom:0;left:var(--playhead-left, calc(var(--track-label-width) + 10px + (var(--step-size) + var(--step-gap)) * 4));width:var(--step-size);border:1px solid rgba(255,77,210,.92);border-radius:8px;background:#ff4dd212;box-shadow:var(--glow-pink),inset 0 0 22px #ff4dd22e;pointer-events:none;content:"";transform:translateZ(0);transition:left .12s linear,box-shadow .15s ease,background .15s ease;animation:playheadPulse .62s ease-in-out infinite alternate}.track-row{display:grid;grid-template-columns:var(--track-label-width) minmax(0,1fr);gap:10px;align-items:center;min-height:64px;border-top:1px solid rgba(132,145,255,.13)}.track-row:first-child{border-top:0}.track-label{display:grid;grid-template-columns:34px minmax(78px,1fr) 92px;align-items:center;gap:12px;min-height:58px;padding:0 12px;border-right:1px solid rgba(132,145,255,.15)}.track-icon{display:grid;place-items:center;width:31px;height:31px;font-size:1.35rem}.mini-volume{display:grid;grid-template-columns:max-content minmax(48px,1fr);align-items:center;height:28px;gap:7px}.mini-volume-track{position:relative;display:block;min-width:48px;height:4px;border-radius:999px;background:#5862aa6b}.mini-volume i{position:absolute;inset:0 auto 0 0;width:var(--track-volume);height:4px;border-radius:999px;background:currentColor;box-shadow:0 0 12px currentColor}.mini-volume b{position:absolute;top:50%;left:var(--track-volume);width:15px;height:15px;translate:-50% -50%;border-radius:50%;background:currentColor;box-shadow:0 0 16px currentColor}.step-button{width:var(--step-size);height:var(--step-size);border:1px solid rgba(132,145,255,.38);border-radius:5px;background:linear-gradient(145deg,#1c2244c2,#050715f0);box-shadow:inset 0 1px #ffffff0a;cursor:pointer;transform:translateZ(0);transition:transform .11s ease,border-color .14s ease,box-shadow .16s ease,background .16s ease;will-change:transform}.step-button.on{border-color:currentColor;background:currentColor;box-shadow:0 0 16px currentColor,0 0 34px color-mix(in srgb,currentColor 62%,transparent),inset 0 0 16px #ffffff52;animation:stepPulse 1.26s ease-in-out infinite alternate}.step-button.current{outline:1px solid rgba(255,255,255,.45);outline-offset:2px;border-color:#ff4dd2eb;box-shadow:0 0 16px #ff4dd2b8,0 0 36px #ff4dd252,inset 0 0 14px #ffffff1f;transform:scale(1.08);animation:cursorStepPulse .52s ease-in-out infinite alternate}.step-button:active{transform:scale(.88)}.track-blue{color:var(--blue)}.track-pink{color:var(--pink)}.track-cyan{color:var(--cyan)}.track-purple{color:var(--purple)}.track-orange{color:var(--orange)}.track-yellow{color:var(--yellow)}.sub-screen{display:grid;gap:16px}.screen-header{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:48px;border-bottom:1px solid rgba(132,145,255,.17)}.screen-header div{display:flex;align-items:center;gap:12px}.screen-header h2{margin:0;font-size:1rem}.screen-header button{min-height:38px;padding:0 16px;border:1px solid rgba(255,77,210,.38);border-radius:8px;background:#ff4dd214;color:#ff9be8;font-weight:800;box-shadow:0 0 18px #ff4dd22e}.preset-grid{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:12px}.preset-card{position:relative;display:grid;align-content:space-between;min-height:170px;border-radius:10px;padding:16px;overflow:hidden;cursor:default;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease,filter .18s ease}.preset-card:before{position:absolute;inset:0;background:linear-gradient(135deg,color-mix(in srgb,currentColor 18%,transparent),transparent 55%);opacity:.9;content:""}.preset-card>*{position:relative}.preset-card.selected{border-color:currentColor;animation:presetFlash .52s ease-out}.preset-card:has(button:active){transform:scale(.98)}.preset-index{color:#cfd3ff47;font-size:.78rem}.preset-icon{min-height:58px;color:currentColor;font-size:3.1rem;line-height:1;text-shadow:0 0 20px currentColor}.preset-card h2{margin:10px 0 12px;color:#fff;font-size:.88rem;text-transform:uppercase}.preset-card button,.round-action{display:grid;place-items:center;width:34px;height:34px;border:1px solid currentColor;border-radius:50%;background:#04061299;color:currentColor;box-shadow:0 0 15px currentColor;cursor:pointer;transition:transform .12s ease,box-shadow .16s ease,background .16s ease}.preset-card button:active,.round-action:active,.icon-action:active,.screen-header button:active,.saved-actions button:active,.clear-steps-button:active,.segmented button:active,.color-dot:active,.toggle:active{transform:scale(.94)}.preset-pink{color:var(--pink)}.preset-blue{color:var(--blue)}.preset-purple{color:var(--purple)}.preset-cyan{color:var(--cyan)}.preset-yellow{color:var(--yellow)}.saved-list{display:grid;gap:10px}.saved-actions{display:flex;justify-content:flex-end}.saved-actions button{min-height:38px;padding:0 16px;border:1px solid rgba(0,216,255,.34);border-radius:8px;background:#00d8ff14;color:#9df3ff;font-weight:800;box-shadow:0 0 18px #00d8ff29;cursor:pointer}.saved-row{display:grid;grid-template-columns:38px minmax(0,1fr) 38px 38px;align-items:center;gap:10px;min-height:62px;border-radius:10px;padding:9px 12px}.saved-row h2{margin:0;font-size:.95rem}.saved-row p{margin:3px 0 0;color:var(--muted);font-size:.78rem}.round-action,.icon-action{color:#9fa9ff}.icon-action{width:34px;height:34px;border-radius:8px;background:#080c22c7;color:#b3baff;cursor:pointer;transition:transform .12s ease,filter .16s ease}.icon-action.danger{color:var(--pink);text-shadow:var(--glow-pink)}.empty-state{display:grid;place-items:center;min-height:118px;border-style:dashed;border-radius:12px;color:#aeb4ea;text-align:center;padding:18px}.empty-state strong{color:#fff}.settings-panel{display:grid;border-radius:12px;padding:12px 18px}.setting-row{display:grid;grid-template-columns:minmax(120px,1fr) minmax(160px,310px);align-items:center;gap:18px;min-height:58px;border-top:1px solid rgba(132,145,255,.15)}.setting-row:first-child{border-top:0}.setting-row>span{color:#d4d7ff;font-size:.88rem;font-weight:700}.color-picker,.segmented{display:flex;justify-content:flex-end;gap:12px}.color-dot{width:28px;height:28px;border:1px solid rgba(255,255,255,.28);border-radius:50%;cursor:pointer}.color-dot.active{box-shadow:0 0 18px currentColor,0 0 34px currentColor}.color-dot.pink{background:var(--pink);color:var(--pink)}.color-dot.blue{background:var(--blue);color:var(--blue)}.color-dot.purple{background:var(--purple);color:var(--purple)}.color-dot.cyan{background:var(--cyan);color:var(--cyan)}.color-dot.yellow{background:var(--yellow);color:var(--yellow)}.toggle{justify-self:end;width:48px;height:28px;padding:3px;border-radius:999px;background:#8491ff42}.toggle span{display:block;width:22px;height:22px;border-radius:50%;background:#eef1ff}.toggle.on{background:linear-gradient(90deg,var(--purple),var(--blue));box-shadow:var(--glow-purple)}.toggle.on span{margin-left:auto}.segmented button{min-width:60px;min-height:34px;border:1px solid rgba(132,145,255,.3);border-radius:6px;background:#080c22c7;color:#cbd0ff;cursor:pointer;transition:transform .12s ease,border-color .16s ease,box-shadow .16s ease,background .16s ease}.segmented button.active{border-color:var(--pink);background:#ff4dd224;color:#fff;box-shadow:var(--glow-pink)}.segmented.compact{justify-content:flex-start}.segmented.compact button{min-width:48px;min-height:30px}@keyframes transportPulse{0%{box-shadow:var(--glow-blue),inset 0 0 26px #00d8ff29}to{box-shadow:0 0 28px #00d8ffeb,0 0 58px #00d8ff57,inset 0 0 32px #00d8ff47}}@keyframes backgroundDrift{0%{background-position:0% 0%,100% 0%,50% 50%}to{background-position:18% 8%,78% 18%,50% 50%}}@keyframes neonAura{0%{opacity:.32;transform:translate3d(-2%,-1%,0)}to{opacity:.52;transform:translate3d(2%,1%,0)}}@keyframes lampBeat{0%{transform:scale(.92)}to{transform:scale(1.18)}}@keyframes playheadPulse{0%{box-shadow:var(--glow-pink),inset 0 0 22px #ff4dd22e}to{box-shadow:0 0 24px #ff4dd2f5,0 0 62px #ff4dd26b,inset 0 0 28px #ff4dd23d}}@keyframes cursorNumberPulse{0%{filter:brightness(1)}to{filter:brightness(1.28)}}@keyframes cursorStepPulse{0%{filter:brightness(1.02)}to{filter:brightness(1.34)}}@keyframes stepPulse{0%{filter:brightness(.98)}to{filter:brightness(1.18)}}@keyframes numberPop{0%{opacity:.74;transform:translateY(3px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes meterPulse{0%{transform:scaleY(.76)}to{transform:scaleY(1.12)}}@keyframes presetFlash{0%{transform:scale(.98);box-shadow:0 0 #fff0}46%{transform:scale(1.02);box-shadow:0 0 26px currentColor,0 0 58px color-mix(in srgb,currentColor 35%,transparent)}to{transform:scale(1)}}@keyframes patternReflect{0%{opacity:.62;transform:translateY(4px);filter:saturate(1.25)}to{opacity:1;transform:translateY(0);filter:saturate(1)}}.toast{position:fixed;right:24px;bottom:24px;z-index:20;min-width:172px;padding:14px 18px;border:1px solid rgba(255,77,210,.64);border-radius:12px;background:linear-gradient(135deg,#ff4dd238,#00d8ff14),#080a1cf0;color:#fff;font-size:.88rem;font-weight:900;text-align:center;box-shadow:var(--glow-pink),0 16px 38px #00000057;animation:toastInOut 1.8s ease both}@keyframes toastInOut{0%{opacity:0;transform:translateY(12px) scale(.96)}12%,82%{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(8px) scale(.98)}}.bottom-tabs{display:none}button:focus-visible{outline:2px solid var(--app-accent);outline-offset:3px}button:hover{filter:brightness(1.12)}@media(max-width:1100px){.workspace{grid-template-columns:1fr}.side-rail{display:none}.control-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.mobile-screen-title{display:block}}@media(max-width:760px){.app-shell{padding:0}.device-frame{min-height:100dvh;border-width:0;border-radius:0}.topbar{min-height:58px;padding:14px 14px 6px}.brand-block{align-items:center}.brand-block h1{font-size:2rem}.brand-block span{font-size:.78rem}.mobile-screen-title{max-width:96px;overflow:hidden;font-size:.82rem;text-overflow:ellipsis;white-space:nowrap}.workspace{padding:8px 10px 90px}.content-panel{padding:10px;border-radius:12px}.sequence-toolbar,.sequence-actions{flex-wrap:wrap}.sequence-actions{justify-content:flex-start}.control-strip{grid-template-columns:1fr 1fr;gap:10px}.control-card{min-height:84px;padding:12px}.volume-card,.transport-card{grid-column:1 / -1}.transport-button{width:62px;height:62px}.step-header,.track-grid,.track-row{--track-label-width: 172px;--step-size: 42px;--step-gap: 8px}.track-label{grid-template-columns:30px 72px 60px;gap:8px;padding:0 8px}.mini-volume{grid-template-columns:1fr}.mini-volume span{display:none}.mini-volume-track{width:45px;min-width:45px}.preset-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-card{min-height:150px;padding:13px}.screen-header button{max-width:130px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.saved-row{grid-template-columns:38px minmax(0,1fr) 34px 34px}.setting-row{grid-template-columns:1fr;gap:10px;padding:12px 0}.color-picker,.segmented{justify-content:flex-start;flex-wrap:wrap}.toggle{justify-self:start}.bottom-tabs{position:fixed;right:0;bottom:0;left:0;z-index:10;display:grid;grid-template-columns:repeat(4,1fr);min-height:76px;padding:8px 8px max(8px,env(safe-area-inset-bottom));border-top:1px solid rgba(132,145,255,.18);background:#030510f0;box-shadow:0 -18px 38px #0000006b;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}.toast{right:12px;bottom:calc(88px + env(safe-area-inset-bottom));left:12px}.tab-item{display:grid;place-items:center;gap:3px;min-height:56px}.tab-item span{font-size:1.25rem}.tab-item strong{font-size:.72rem}}@media(max-width:420px){.control-strip{grid-template-columns:1fr}.bpm-card,.dial-card,.volume-card,.transport-card{grid-column:auto}.wide-slider{grid-template-columns:28px minmax(120px,1fr) 44px}.preset-grid{gap:10px}.preset-card h2{font-size:.78rem}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}}