*{box-sizing:border-box}:root{color:#fff9ec;font-synthesis:none;--ink-950:#151329;--ink-900:#211b3c;--ink-800:#2c2550;--blue:#159cf1;--blue-deep:#075b9e;--lime:#7ddc22;--orange:#ff8a18;--violet:#a45ae9;--teal:#22c8cf;--gold:#ffb51c;--cream:#fff8e9;--muted:#d8d2ed;--shadow:#0504148c;background:#141229;font-family:ui-rounded,Arial Rounded MT Bold,Trebuchet MS,system-ui,sans-serif}body{background:#16132a;min-width:1100px;min-height:100vh;margin:0;overflow:hidden}button,input{font:inherit}button{cursor:pointer;color:inherit;border:0}button:disabled{cursor:not-allowed;opacity:.42}button:focus-visible,input:focus-visible{outline-offset:2px;outline:3px solid #ffffffdb}.icon{flex:none;display:block}.studio-app{isolation:isolate;background:#141229;height:100vh;min-height:100vh;position:relative;overflow:hidden}.room-backdrop{z-index:0;filter:saturate(1.08)brightness(.88);background:linear-gradient(90deg,#070a1c08,#09081b57 49%,#05071814),url(/assets/studio-room.png) 50%/cover no-repeat;position:absolute;inset:0}.studio-app:before{content:"";z-index:1;pointer-events:none;background:linear-gradient(90deg,#08091c0a,#0d0a1f33 49%,#05071812),radial-gradient(circle at 52% 31%,#2a4a821a,#0000 44%);position:absolute;inset:0}.studio-app:after{content:"";z-index:1;pointer-events:none;opacity:.18;mix-blend-mode:soft-light;background-image:repeating-linear-gradient(0deg,#ffffff06 0 1px,#0000 1px 4px);position:absolute;inset:0}.topbar{z-index:3;align-items:center;gap:13px;height:64px;padding:10px 18px 8px;display:flex;position:relative}.home-orb,.settings-button{color:#fff;background:linear-gradient(145deg,#a766ea,#5f32ad);border:2px solid #ffffff42;border-radius:50%;place-items:center;transition:transform .18s,filter .18s;display:grid;box-shadow:0 8px 20px #1e094885,inset 0 2px #ffffff57,inset 0 -4px #1a083e4d}.home-orb{width:50px;height:50px}.home-orb:hover,.settings-button:hover{filter:brightness(1.12);transform:translateY(-2px)scale(1.03)}.brand-lockup{align-items:center;gap:9px;min-width:170px;display:flex}.brand-mark{color:#e8fbff;background:linear-gradient(145deg,#1da8ee,#0865ad);border:1px solid #ffffff4d;border-radius:12px;place-items:center;width:38px;height:38px;display:grid;box-shadow:inset 0 2px #ffffff61,inset 0 -4px #00000029,0 6px 13px #00000045}.brand-lockup strong{letter-spacing:.1em;font-size:18px;line-height:1;display:block}.brand-lockup small{color:#bcb6d4;letter-spacing:.18em;margin-top:4px;font-size:9px;font-weight:800;display:block}.topbar-center{color:#ffedc7;letter-spacing:.13em;text-transform:uppercase;flex:1;justify-content:center;align-items:center;gap:12px;font-size:12px;font-weight:900;display:flex}.topbar-motto{color:#fff1bd;letter-spacing:.12em;background:#17143685;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:9px 15px;font-size:11px;display:flex;box-shadow:inset 0 1px #ffffff1f}.topbar-motto .icon{color:#ffd34d;filter:drop-shadow(0 0 5px #ffd34da6)}.room-name{color:#fff;text-shadow:0 2px 8px #00000059}.topbar-divider{background:linear-gradient(90deg,#0000,#ffffff70,#0000);width:44px;height:1px}.topbar-hint{color:#b5adca;font-size:10px}.topbar-status{color:#dce9ff;letter-spacing:.11em;white-space:nowrap;background:#0c0d269e;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:8px;padding:9px 13px;font-size:10px;font-weight:900;display:flex;box-shadow:inset 0 1px #ffffff14}.status-light,.room-card-dot{background:#8df12f;border-radius:50%;width:7px;height:7px;box-shadow:0 0 12px #8df12f}.status-divider{background:#ffffff2e;width:1px;height:13px}.status-bpm{color:#ffd16c}.workspace-nav{background:#090a1fb8;border:1px solid #ffffff21;border-radius:14px;align-items:center;gap:3px;min-width:0;padding:4px;display:flex;box-shadow:inset 0 2px 7px #00000057,0 5px 12px #04041238}.workspace-tab{--workspace-accent:#6fd8ff;color:#c7c3d8;letter-spacing:.04em;text-transform:uppercase;background:0 0;border:1px solid #0000;border-radius:11px;justify-content:center;align-items:center;gap:6px;min-width:0;height:35px;padding:0 10px;font-size:10px;font-weight:900;transition:transform .18s,color .18s,background .18s,box-shadow .18s;display:flex}.workspace-tab:hover{color:#fff;background:#ffffff14;transform:translateY(-1px)}.workspace-tab.active{color:#fff;background:color-mix(in srgb, var(--workspace-accent), #251f48 56%);border-color:color-mix(in srgb, var(--workspace-accent), white 20%);box-shadow:0 0 12px color-mix(in srgb, var(--workspace-accent), transparent 48%), inset 0 1px #ffffff4d}.workspace-drums{--workspace-accent:var(--orange)}.workspace-synth{--workspace-accent:var(--blue)}.workspace-chords{--workspace-accent:var(--gold)}.workspace-bass{--workspace-accent:var(--lime)}.workspace-melody{--workspace-accent:var(--violet)}.workspace-fx{--workspace-accent:#c985ff}.workspace-mixer{--workspace-accent:#6ee63d}.studio-grid{z-index:2;grid-template-columns:minmax(340px,.98fr) minmax(860px,2.48fr) minmax(292px,.84fr);gap:12px;max-width:1920px;height:calc(100vh - 133px);min-height:0;margin:0 auto;padding:0 17px 10px;display:grid;position:relative}.left-rail,.center-column,.right-rail,.instrument-workspace{min-height:0}.left-rail{grid-template-rows:minmax(270px,.73fr) minmax(400px,1.08fr);gap:12px;display:grid}.center-column{grid-template-rows:minmax(270px,.73fr) minmax(400px,1.08fr);gap:12px;min-width:0;display:grid}.right-rail{flex-direction:column;gap:10px;min-width:0;display:flex}.instrument-workspace{transition:opacity .22s,transform .24s}.instrument-workspace>*{animation:.22s ease-out workspaceReveal}.instrument-row{grid-template-columns:minmax(0,1.45fr) minmax(330px,.95fr);gap:12px;height:100%;display:grid}.hardware-panel{min-height:0;box-shadow:0 22px 38px var(--shadow), 0 4px 0 #0505116b, inset 0 2px #ffffff6b, inset 0 -9px #00000038;border:3px solid #ffffff45;border-radius:24px;transition:transform .22s,filter .22s,outline-color .22s,box-shadow .22s;position:relative;overflow:hidden}.hardware-panel:before{content:"";z-index:0;pointer-events:none;opacity:.78;background:radial-gradient(circle at 5px 5px,#ffffffb8 0 1px,#050715b8 2px 3px,#0000 4px),radial-gradient(circle at calc(100% - 5px) 5px,#ffffffb8 0 1px,#050715b8 2px 3px,#0000 4px),radial-gradient(circle at 5px calc(100% - 5px),#ffffff85 0 1px,#050715b8 2px 3px,#0000 4px),radial-gradient(circle at calc(100% - 5px) calc(100% - 5px),#ffffff85 0 1px,#050715b8 2px 3px,#0000 4px);border-radius:17px;position:absolute;inset:5px;box-shadow:inset 0 0 0 1px #ffffff29,inset 0 0 0 4px #00000014}.hardware-panel.workspace-active{outline-offset:-5px;filter:saturate(1.1)brightness(1.045);outline:3px solid #ffffffb8;transform:translateY(-2px)}.panel-blue.workspace-active{box-shadow:0 20px 38px #03122f8a,0 0 23px #3bc8ff75,inset 0 2px #ffffff6b,inset 0 -8px #0003}.panel-orange.workspace-active{box-shadow:0 20px 38px #2f0d038c,0 0 23px #ff8a236b,inset 0 2px #ffffff6b,inset 0 -8px #0003}.panel-violet.workspace-active{box-shadow:0 20px 38px #1908348c,0 0 23px #b970ff6b,inset 0 2px #ffffff6b,inset 0 -8px #0003}.panel-green.workspace-active{box-shadow:0 20px 38px #0423088c,0 0 23px #77ee3d6b,inset 0 2px #ffffff6b,inset 0 -8px #0003}.hardware-panel:after{content:"";pointer-events:none;opacity:.17;mix-blend-mode:soft-light;background:repeating-linear-gradient(105deg,#0000 0 12px,#ffffff12 12px 13px,#0000 13px 29px);position:absolute;inset:0}.panel-blue{background:linear-gradient(145deg,#188fdc 0%,#0a66ad 44%,#074b86 100%);border-color:#65d4ff;box-shadow:0 22px 38px #03122f94,0 0 24px #22b3ff4d,inset 0 2px #ffffff6b,inset 0 -9px #00000038}.panel-orange{background:linear-gradient(145deg,#f56b17 0%,#ce4615 50%,#84300f 100%);border-color:#ffad4d;box-shadow:0 22px 38px #2e0e048c,0 0 23px #ff74183d,inset 0 2px #ffffff61,inset 0 -9px #00000038}.panel-violet{background:linear-gradient(145deg,#8253cc 0%,#6031a2 48%,#3f2377 100%);border-color:#c08cff;box-shadow:0 22px 38px #1808348f,0 0 24px #ae5dff45,inset 0 2px #ffffff61,inset 0 -9px #00000038}.panel-green{background:linear-gradient(145deg,#4fbc22 0%,#2c8c1b 49%,#176020 100%);border-color:#8cf14f;box-shadow:0 22px 38px #0423088f,0 0 23px #64e8313b,inset 0 2px #ffffff61,inset 0 -9px #00000038}.panel-gold{background:linear-gradient(145deg,#f5a717 0%,#cf780d 50%,#83500c 100%);border-color:#ffd15b;box-shadow:0 22px 38px #341c038f,0 0 25px #ffb02340,inset 0 2px #fff6,inset 0 -9px #00000038}.panel-header,.sequencer-header,.builder-header{z-index:1;background:linear-gradient(#ffffff1a,#080c221c);border:1px solid #ffffff14;border-radius:14px;justify-content:space-between;align-items:center;gap:9px;margin:5px 7px 6px;padding:8px 9px 7px;display:flex;position:relative;box-shadow:inset 0 1px #ffffff1a}.panel-title-wrap{align-items:center;gap:9px;min-width:0;display:flex}.panel-icon{color:#fff;background:#0b0d2238;border-radius:10px;place-items:center;width:31px;height:31px;display:grid;box-shadow:inset 0 1px #ffffff38,0 3px 8px #00000021}.panel-eyebrow{color:#fff8e6cc;letter-spacing:.15em;margin-bottom:3px;font-size:9px;font-weight:900;line-height:1;display:block}.panel-header h2,.sequencer-header h2,.builder-header h2{color:#fffdf2;letter-spacing:.035em;text-transform:uppercase;text-shadow:0 2px 3px #00000047;margin:0;font-size:clamp(18px,1.25vw,21px);font-weight:900;line-height:1}.panel-expand-button{color:#fff;background:#070b1f47;border-radius:10px;place-items:center;width:31px;height:31px;transition:background .18s,transform .18s;display:grid}.panel-expand-button:hover{background:#fff3;transform:translate(2px)}.panel-expand-button .icon{transform:rotate(0)}.knob-row{justify-content:space-around;align-items:flex-start;gap:4px;display:flex}.knob-control{text-align:center;touch-action:none;cursor:ns-resize;width:68px;padding-top:2px;position:relative}.knob-face{transform-origin:50%;background:radial-gradient(circle at 34% 27%,#ffffffc2 0 5%,#0000 10%),linear-gradient(145deg,#47bbff,#0864ad 74%);border:3px solid #ffffffa3;border-radius:50%;width:55px;height:55px;margin:0 auto 5px;transition:transform .12s cubic-bezier(.2,.75,.25,1);position:relative;box-shadow:0 9px 14px #0509195c,0 0 0 4px #03163238,inset 0 3px 5px #ffffff80,inset 0 -7px 10px #0000005e}.knob-face:before{content:"";opacity:.78;border:2px dotted #ffffff8c;border-radius:50%;position:absolute;inset:-8px;transform:rotate(-25deg)}.knob-marker{background:#fff8d6;border-radius:3px;width:4px;height:14px;position:absolute;top:7px;left:50%;transform:translate(-50%);box-shadow:0 0 8px #ffffffb8}.knob-glint{filter:blur(1px);background:#ffffff4d;border-radius:50%;width:13px;height:7px;position:absolute;top:6px;left:10px}.knob-input{z-index:2;opacity:0;cursor:grab;width:calc(100% + 10px);position:absolute;inset:-3px -5px 20px}.knob-input:active{cursor:grabbing}.knob-label{color:#fffffff0;letter-spacing:.07em;text-transform:uppercase;font-size:10px;font-weight:900;display:block}.knob-value{color:#fff6c8;margin-top:2px;font-size:9px;font-weight:900;display:block}.knob-lime .knob-face{background:radial-gradient(circle at 34% 27%,#ffffffb8 0 5%,#0000 10%),linear-gradient(145deg,#b7f046,#3a9c1d 75%)}.knob-orange .knob-face{background:radial-gradient(circle at 34% 27%,#ffffffb8 0 5%,#0000 10%),linear-gradient(145deg,#ffd13a,#e97513 75%)}.knob-violet .knob-face{background:radial-gradient(circle at 34% 27%,#ffffffb8 0 5%,#0000 10%),linear-gradient(145deg,#d48aff,#7440c2 75%)}.knob-teal .knob-face{background:radial-gradient(circle at 34% 27%,#ffffffb8 0 5%,#0000 10%),linear-gradient(145deg,#5effed,#078e9d 75%)}.knob-compact{transform-origin:top;width:58px;transform:scale(.88)}.synth-panel{flex-direction:column;display:flex}.synth-knobs{background:linear-gradient(#03265294,#03183d80);border:1px solid #b7e5ff2b;border-radius:15px;margin:0 12px 8px;padding:11px 8px 7px;box-shadow:inset 0 4px 12px #010f2a66,0 2px #ffffff12}.waveform-picker{z-index:1;background:#04113175;border:1px solid #b3e5ff1f;border-radius:10px;grid-template-columns:repeat(4,1fr);gap:4px;margin:0 12px 9px;padding:4px;display:grid;position:relative;box-shadow:inset 0 2px 6px #00000040}.waveform-picker button{color:#c8e1ee;background:0 0;border-radius:7px;padding:6px 2px;font-size:10px;font-weight:900}.waveform-picker button:hover,.waveform-picker button.selected{color:#fff;background:#30a7ea8a;box-shadow:inset 0 1px #ffffff40}.keyboard{z-index:1;background:linear-gradient(#111b31,#080f20);border:3px solid #050b1bbd;border-radius:14px;height:99px;margin:auto 12px 11px;padding:7px 8px 8px;position:relative;box-shadow:inset 0 5px 12px #000000a8,0 4px #ffffff1a,0 8px 12px #030a194d}.white-keys{gap:2px;height:100%;display:flex}.piano-key{transition:transform .1s,filter .1s,background .1s}.white-key{color:#1f2b3d8c;background:linear-gradient(100deg,#fff8dd,#d6d8ce 66%,#a7b3b5);border:1px solid #161b2cb8;border-radius:4px 4px 7px 7px;flex:1;position:relative;box-shadow:inset 0 -4px 3px #27343e38,0 3px #0000004f}.white-key span{font-size:8px;font-weight:900;position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.black-key{z-index:2;background:linear-gradient(110deg,#344055,#080d1c 75%);border:1px solid #030611;border-radius:3px 3px 5px 5px;width:8%;height:48px;position:absolute;top:4px;box-shadow:inset 0 1px #ffffff38,0 4px 4px #00000073}.piano-key:hover{filter:brightness(1.13)}.piano-key.pressed{filter:brightness(1.35);transform:translateY(3px)}.drum-panel{flex-direction:column;display:flex}.live-pill{color:#ffd990;letter-spacing:.12em;background:#54190859;border-radius:999px;align-items:center;gap:5px;padding:5px 8px;font-size:8px;font-weight:900;display:flex}.live-pill span{background:#72ec3c;border-radius:50%;width:6px;height:6px;box-shadow:0 0 10px #72ec3c}.drum-tip,.sequencer-tip{z-index:1;color:#ffe8bb;white-space:nowrap;background:#52190742;border-radius:7px;align-items:center;gap:6px;margin:0 13px 7px;padding:5px 8px;font-size:9px;display:flex;position:relative}.tip-star{color:#ffe04d}.drum-grid{z-index:1;background:linear-gradient(#4617087a,#25110c9e);border:1px solid #ffdc9f30;border-radius:13px;flex:1;grid-template-columns:70px repeat(16,minmax(0,1fr));grid-auto-rows:minmax(18px,1fr);gap:4px 3px;min-height:0;margin:0 12px 7px;padding:7px 8px 9px;display:grid;position:relative;box-shadow:inset 0 4px 12px #290c0473,0 2px #ffffff14}.drum-grid-corner,.step-number{color:#ffeec8b3;letter-spacing:.04em;place-items:center;font-size:7px;font-weight:900;display:grid}.step-number.bar-start{color:#fff}.step-number.current{color:#442008;background:#fff3bd;border-radius:4px;transform:translateY(-1px);box-shadow:0 0 8px #fff5b8a6}.drum-row{display:contents}.drum-voice{color:#fff;text-align:left;text-transform:uppercase;background:linear-gradient(#74270bb8,#41160ac2);border:1px solid #ffd69121;border-radius:8px;align-items:center;gap:6px;min-width:0;padding:4px 5px;font-size:9px;font-weight:900;display:flex;overflow:hidden;box-shadow:inset 0 1px #ffffff1f,inset 0 -3px #1f0a0533}.active-row .drum-voice{background:#ffb24745}.voice-mark{color:#fff;background:linear-gradient(145deg, color-mix(in srgb, var(--voice-color), white 18%), var(--voice-color));width:20px;height:20px;box-shadow:0 0 9px color-mix(in srgb, var(--voice-color), transparent 38%), inset 0 2px #ffffff61, inset 0 -3px #00000029;border:1px solid #ffffff94;border-radius:7px;flex:none;place-items:center;font-size:10px;line-height:1;display:grid}.drum-pad{background:linear-gradient(155deg,#572419,#2a1514 75%);border:1px solid #ffcd9326;border-radius:7px;min-width:0;min-height:0;transition:transform .12s,background .15s,box-shadow .15s;position:relative;box-shadow:inset 0 2px #ffffff1a,inset 0 -5px #00000057,0 3px 4px #1e080447}.drum-pad:after{content:"";pointer-events:none;background:linear-gradient(#ffffff29,#0000);border-radius:4px;height:28%;position:absolute;inset:3px 4px auto}.drum-pad.bar-start{border-left-color:#ffca8073}.drum-pad:hover{background:#ff984b4d;transform:translateY(-1px)}.drum-pad.active{background:linear-gradient(155deg, color-mix(in srgb, var(--pad-color), white 26%), var(--pad-color) 56%, color-mix(in srgb, var(--pad-color), #53200b 26%));box-shadow:0 0 13px color-mix(in srgb, var(--pad-color), transparent 24%), inset 0 3px #ffffff7a, inset 0 -5px #44140747, 0 3px 5px #23090457;border-color:#ffffffc7}.drum-pad.current-step{outline-offset:1px;filter:brightness(1.12);outline:2px solid #fff7c5f2}.drum-pad.triggered{animation:.15s ease-out both padTrigger}.drum-pad:active{transform:translateY(2px)}@keyframes padTrigger{0%{filter:brightness(1.8);transform:scale(.82)translateY(2px)}to{filter:brightness(1.12);transform:scale(1)}}.drum-footer-console{z-index:1;background:linear-gradient(#4b190773,#2b120980);border:1px solid #ffd18438;border-radius:11px;grid-template-columns:1.45fr 1fr .55fr;align-items:center;gap:10px;margin:0 12px 10px;padding:6px 9px;display:grid;position:relative;box-shadow:inset 0 2px 8px #1d0a054d,0 2px #ffffff12}.console-label{color:#ffd78f;letter-spacing:.1em;font-size:7px;font-weight:900;display:block}.energy-bars,.fx-visualizer-bars{align-items:flex-end;gap:3px;height:19px;margin-top:3px;display:flex}.energy-bars i,.fx-visualizer-bars i{opacity:.8;background:linear-gradient(#ffe070,#ff8a1c);border-radius:3px 3px 1px 1px;flex:1;min-width:2px;display:block}.groove-readout{grid-template-columns:7px 1fr;align-items:center;column-gap:6px;display:grid}.groove-readout strong{color:#fff1c6;letter-spacing:.07em;font-size:8px}.groove-readout small{color:#deb47d;grid-column:2;font-size:8px}.groove-led{background:#86e62c;border-radius:50%;width:7px;height:7px;box-shadow:0 0 9px #86e62c}.drum-clock{color:#ffe1a2;flex-direction:column;align-items:flex-end;display:flex}.drum-clock span{font-size:22px;font-weight:900;line-height:.9}.drum-clock small{color:#d3a878;letter-spacing:.06em;margin-top:4px;font-size:7px}.effects-panel{flex-direction:column;display:flex}.fx-section{z-index:1;background:linear-gradient(#2d145861,#1d0e4285);border:1px solid #ecd6ff29;border-radius:13px;justify-content:space-between;align-items:center;gap:6px;min-height:72px;margin:0 10px 6px;padding:6px 9px;display:flex;position:relative;box-shadow:inset 0 3px 9px #14083057,0 2px #ffffff0f}.fx-label{color:#e4d1ff;flex-direction:column;align-items:flex-start;gap:4px;display:flex}.fx-label span{letter-spacing:.11em;font-size:11px;font-weight:900}.fx-label small{color:#bfa8e0;font-size:9px}.fx-knobs{gap:7px}.fx-divider{display:none}.fx-visualizer{z-index:1;background:linear-gradient(#23124875,#150d3599);border:1px solid #e0c5ff33;border-radius:12px;flex:1;min-height:54px;margin:0 10px 10px;padding:7px 9px 6px;position:relative;box-shadow:inset 0 3px 9px #13082d61,0 2px #ffffff0f}.fx-visualizer .fx-visualizer-bars{height:22px}.fx-visualizer-head{color:#d9c8f7;letter-spacing:.1em;justify-content:space-between;align-items:center;font-size:7px;font-weight:900;display:flex}.fx-visualizer-head strong{color:#96fae5;font-size:10px}.fx-visualizer-bars{height:50px;margin-top:6px}.fx-visualizer-bars i{opacity:.72;background:linear-gradient(#5ee7da,#7753d4)}.fx-visualizer small{display:none}.mixer-panel{flex-direction:column;display:flex}.mixer-tip{z-index:1;color:#d9f8be;text-align:center;background:#0c3a135c;border:1px solid #bdff741c;border-radius:7px;justify-content:center;align-items:center;gap:6px;margin:-1px 12px 7px;padding:6px 7px;font-size:9px;display:flex;position:relative}.mixer-tip>span{background:#c2ff7147;border-radius:50%;width:6px;height:6px}.mixer-tip>span.signal-live{background:#aef244;animation:.7s ease-in-out infinite alternate signalPulse;box-shadow:0 0 9px #aef244}.mixer-channels{z-index:1;flex:1;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;min-height:0;padding:0 10px 11px;display:grid;position:relative}.mixer-channel{color:#ecffdc;background:linear-gradient(180deg, color-mix(in srgb, var(--strip-color), #16421c 82%) 0 12%, #0a3710a3 12%, #051c0acc 100%);border:1px solid color-mix(in srgb, var(--strip-color), #ffffff2e 64%);border-radius:13px;flex-direction:column;align-items:center;min-width:0;padding:7px 4px 8px;transition:opacity .2s,filter .2s,background .2s;display:flex;position:relative;overflow:hidden;box-shadow:inset 0 2px #ffffff21,inset 0 -7px #0000002e,0 5px 9px #03140738}.mixer-channel:before{content:"";background:var(--strip-color);height:4px;box-shadow:0 0 10px color-mix(in srgb, var(--strip-color), transparent 25%);position:absolute;inset:0 0 auto}.mixer-master{background:linear-gradient(#391f5d73,#1e113c85)}.mixer-channel.is-inaudible:not(.is-solo){opacity:.58;filter:saturate(.55)}.mixer-channel.is-solo{background:linear-gradient(180deg, color-mix(in srgb, var(--strip-color), #163218 76%), #092c0e94);box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--strip-color), white 15%), 0 0 12px color-mix(in srgb, var(--strip-color), transparent 65%)}.mixer-channel-top{flex-direction:column;align-items:center;gap:2px;width:100%;min-height:58px;display:flex}.channel-badge{color:#f9fff1;background:linear-gradient(145deg, color-mix(in srgb, var(--strip-color), white 22%), var(--strip-color));width:31px;height:31px;box-shadow:0 4px 8px #00000047, 0 0 10px color-mix(in srgb, var(--strip-color), transparent 50%), inset 0 2px #fff6, inset 0 -4px #00000029;border:1px solid #ffffff9e;border-radius:10px;place-items:center;margin-bottom:1px;display:grid}.mixer-label{color:#f2ffe7;letter-spacing:.06em;text-transform:uppercase;text-overflow:ellipsis;max-width:100%;font-size:9px;font-weight:900;overflow:hidden}.mixer-channel output{color:#eaffd4;background:#02130673;border-radius:999px;min-width:27px;padding:1px 5px;font-size:9px;font-weight:900}.mixer-strip-body{flex:1;justify-content:center;align-items:stretch;gap:7px;width:100%;min-height:0;margin:6px 0 8px;display:flex}.meter-stack{flex-direction:column-reverse;justify-content:space-between;width:9px;padding-block:4px;display:flex}.meter-stack span{background:#ceff6424;border-radius:3px;flex:0 9px;width:9px;min-height:4px;transition:background 60ms linear,box-shadow 60ms linear;display:block}.meter-stack span.lit{background:#a8ef39;box-shadow:0 0 6px #abed2ecc}.meter-stack span:nth-child(n+10).lit{background:#ffd64a;box-shadow:0 0 6px #ffd64acc}.meter-stack span:nth-child(12).lit{background:#ff7055}.fader-well{touch-action:none;cursor:ns-resize;background:linear-gradient(90deg,#07100a,#243526 48%,#07100a);border:1px solid #ffffff2b;border-radius:15px;justify-content:center;width:36px;height:100%;min-height:175px;display:flex;position:relative;box-shadow:inset 0 4px 11px #000000c7,0 2px #ffffff17,0 0 0 3px #0214062e}.fader-scale{background:repeating-linear-gradient(0deg,#ffffff2e 0 1px,#0000 1px 12px);border-radius:2px;width:2px;position:absolute;inset:7px 50%;transform:translate(-50%)}.fader-level{background:linear-gradient(0deg, #ffd34a 0%, var(--strip-color) 70%);opacity:.68;border-radius:6px;width:5px;max-height:calc(100% - 8px);position:absolute;bottom:4px;left:50%;transform:translate(-50%)}.fader-cap{z-index:2;pointer-events:none;background:linear-gradient(#fff9e9 0 28%,#c9bea4 29% 61%,#f4ecd9 62%);border:1px solid #1f1b16c7;border-radius:6px;width:45px;height:21px;transition:bottom .1s ease-out;position:absolute;left:50%;transform:translate(-50%);box-shadow:0 4px 7px #0009,inset 0 2px #ffffffdb,inset 0 -3px #584c3938}.fader-cap:after{content:"";opacity:.72;background:#2f2a25;height:2px;position:absolute;top:7px;left:4px;right:4px}.fader-well input{z-index:3;opacity:0;writing-mode:vertical-lr;cursor:ns-resize;pointer-events:none;direction:rtl;width:calc(100% + 30px);height:100%;position:absolute;inset:0 -15px}.mixer-actions{justify-content:center;align-items:center;gap:4px;min-height:31px;display:flex}.mixer-actions button{color:#e5fbd4;background:linear-gradient(#0a2a0de6,#041607e6);border:1px solid #ffffff26;border-radius:8px;justify-content:center;align-items:center;gap:4px;min-width:29px;height:29px;padding:0 6px;font-size:9px;font-weight:900;display:flex;box-shadow:inset 0 1px #ffffff1f,0 3px 5px #0000003d}.mixer-actions small{text-transform:uppercase;font-size:7px;display:none}.mixer-actions button.active{color:#172012;background:#bcf14e;border-color:#ffffff80;box-shadow:0 0 9px #bbf0449e,inset 0 1px #ffffff8c}.mixer-actions button.mute-active{color:#fff;background:#ea5b4e;box-shadow:0 0 9px #ff564994}.mixer-actions button.solo-active{color:#332400;background:#ffd64b;box-shadow:0 0 9px #ffd43a9e}.master-mark{color:#d8bcf5;letter-spacing:.08em;place-items:center;height:24px;padding:0 5px;font-size:7px;font-weight:900;display:grid}@keyframes signalPulse{to{opacity:.46;transform:scale(.78)}}.sequencer-panel{flex-direction:column;display:flex}.sequencer-header{padding-bottom:8px}.sequencer-actions{align-items:center;gap:5px;display:flex}.sequencer-actions button,.ghost-button,.tool-toggle{color:#fff8d9;letter-spacing:.04em;text-transform:uppercase;background:linear-gradient(#6737058f,#44230380);border:1px solid #ffe8a81f;border-radius:10px;align-items:center;gap:5px;padding:8px 10px;font-size:10px;font-weight:900;transition:background .15s,transform .15s;display:flex;box-shadow:inset 0 2px #ffffff29,inset 0 -3px #0000001f,0 3px 6px #3319022e}.sequencer-actions button:hover,.ghost-button:hover,.tool-toggle:hover{background:#ffd75b4d;transform:translateY(-1px)}.sequencer-actions button.active{color:#372002;background:#ffd96a;box-shadow:0 0 11px #ffd86073,inset 0 1px #fff6c9}.sequencer-creator{z-index:2;background:linear-gradient(#45260575,#2a170573);border:1px solid #ffe19929;border-radius:12px;justify-content:space-between;align-items:center;gap:9px;margin:0 11px 7px;padding:7px 8px;display:flex;position:relative;box-shadow:inset 0 2px 8px #25120342}.add-bar-group{align-items:center;gap:5px;min-width:0;display:flex}.creator-label{color:#f5cf84;letter-spacing:.1em;white-space:nowrap;margin-right:2px;font-size:8px;font-weight:900}.add-bar-button,.open-note-editor,.edit-notes-button{color:#fffdf2;letter-spacing:.04em;text-transform:uppercase;border:1px solid #ffffff47;border-radius:9px;justify-content:center;align-items:center;gap:4px;padding:7px 9px;font-size:9px;font-weight:900;transition:transform .14s,filter .14s;display:flex;box-shadow:inset 0 2px #ffffff4d,inset 0 -3px #0000002e,0 3px 5px #22110240}.add-bar-button:hover,.open-note-editor:hover,.edit-notes-button:hover{filter:brightness(1.12);transform:translateY(-1px)}.add-bar-button:active,.open-note-editor:active,.edit-notes-button:active{transform:translateY(1px)}.add-bar-button.track-drums{background:linear-gradient(145deg,#279fe9,#0a63aa)}.add-bar-button.track-bass{background:linear-gradient(145deg,#88df35,#3b9818)}.add-bar-button.track-chords{color:#493002;background:linear-gradient(145deg,#ffca3c,#d77d0e)}.add-bar-button.track-melody{background:linear-gradient(145deg,#b968eb,#7437ad)}.open-note-editor{white-space:nowrap;background:linear-gradient(145deg,#53d4f4,#147cb8);flex:none}.open-note-editor.track-bass{color:#14330d;background:linear-gradient(145deg,#85e532,#3b9b1a)}.open-note-editor.track-chords{color:#4a2b03;background:linear-gradient(145deg,#ffce43,#e08b14)}.open-note-editor.track-melody{background:linear-gradient(145deg,#bc75f0,#7a40b8)}.sequencer-tip{background:#572b0257;margin-bottom:6px;padding-block:6px;font-size:10px}.timeline-readout{color:#ffe1a4;letter-spacing:.08em;background:#2818066b;border-radius:999px;margin-left:auto;padding:3px 7px;font-size:7px;font-weight:900}.timeline-readout.live{color:#233609;background:#c8f35c;box-shadow:0 0 9px #c9f45c7a}.timeline-shell{z-index:1;background:linear-gradient(#1d1214a8,#120e12b8);border:1px solid #ffe29f40;border-radius:14px;flex-direction:column;flex:1;min-height:0;margin:0 11px;padding:0 7px 7px;display:flex;position:relative;box-shadow:inset 0 4px 13px #0000007a,0 3px #ffffff0f}.bar-ruler{grid-template-columns:114px repeat(16,minmax(0,1fr));align-items:end;gap:0;height:28px;display:grid}.bar-ruler>span{color:#ffe1a6;place-items:center;height:23px;font-size:9px;font-weight:900;display:grid;position:relative}.bar-ruler .bar-ruler-label{color:#cbb991;letter-spacing:.08em;font-size:7px}.bar-ruler>span.current{color:#382006;background:#fff2ca;border-radius:5px 5px 0 0}.sequencer-lanes{flex:1;grid-template-rows:repeat(4,minmax(46px,1fr));min-height:0;display:grid}.sequencer-lane{grid-template-columns:114px minmax(0,1fr);gap:4px;min-height:0;display:grid}.lane-label{color:#fff;background:#0f1329bf;border:1px solid #ffffff2e;border-radius:9px;align-items:center;gap:8px;min-width:0;margin-block:2px;padding:0 9px;display:flex;box-shadow:inset 0 2px #ffffff47,inset 0 -5px #0000002e,0 3px 6px #0003}.lane-label strong{letter-spacing:.07em;text-overflow:ellipsis;text-transform:uppercase;font-size:11px;overflow:hidden}.lane-icon{background:#0d122433;border-radius:7px;flex:none;place-items:center;width:24px;height:24px;display:grid;box-shadow:inset 0 1px #fff3}.track-drums .lane-label,.lane-label.track-drums{background:linear-gradient(145deg,#158fe7,#075693)}.lane-label.track-bass{background:linear-gradient(145deg,#79db25,#368f17)}.lane-label.track-chords{background:linear-gradient(145deg,#ffc32c,#d7790c)}.lane-label.track-melody{background:linear-gradient(145deg,#ad60ef,#6832a9)}.lane-track{background-color:#101119c2;background-image:linear-gradient(#ffffff06,#ffffff06);border:1px solid #ffffff1c;border-radius:9px;grid-template-columns:repeat(16,1fr);margin-block:2px;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 3px 8px #00000059}.bar-cell{border-left:1px solid #ffffff1a;min-width:0;display:block}.bar-cell.bar-cell-major{background:#ffffff05;border-left:2px solid #ffdc9647}.song-clip{z-index:3;cursor:grab;border:1px solid #ffffff47;border-radius:9px;flex-direction:column;justify-content:center;padding:4px 9px;transition:filter .16s,transform .16s,box-shadow .16s;display:flex;position:absolute;top:6px;bottom:6px;overflow:hidden;box-shadow:inset 0 3px #ffffff4d,inset 0 -6px #0003,0 4px 8px #0000004d}.song-clip:active{cursor:grabbing;transform:scaleY(.95)}.song-clip:hover{filter:brightness(1.12)}.song-clip.selected{border:2px solid #fff8d2;box-shadow:0 0 12px #fff6c48c,inset 0 2px #ffffff6b,inset 0 -4px #0000002e}.song-clip.playing{animation:.7s ease-in-out infinite clip-pulse}.song-clip.track-drums{background:linear-gradient(135deg,#1f9bed,#0b68bf)}.song-clip.track-bass{background:linear-gradient(135deg,#86e52f,#46a91c)}.song-clip.track-chords{background:linear-gradient(135deg,#ffc72e,#ef9e11)}.song-clip.track-melody{background:linear-gradient(135deg,#b766ec,#803cba)}.clip-name{z-index:2;color:#fffffff5;letter-spacing:.04em;text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap;text-shadow:0 1px 2px #0000003d;font-size:10px;font-weight:900;position:relative;overflow:hidden}.clip-wave{opacity:.62;align-items:center;gap:2px;height:13px;margin-top:2px;display:flex}.clip-wave i{background:#ffffffd1;border-radius:2px;flex:1;min-width:2px;max-width:5px;display:block}.clip-shine{pointer-events:none;background:#ffffff2e;height:35%;position:absolute;top:0;left:0;right:0}.sequencer-playhead{z-index:6;pointer-events:none;background:#fffbed;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 9px #fffddef5}.sequencer-playhead.is-playing{transition:left var(--transport-step,.15s) linear}.sequencer-playhead:before{content:"";background:#fff9d5;border-radius:50%;width:7px;height:7px;position:absolute;top:-2px;left:50%;transform:translate(-50%);box-shadow:0 0 8px #fff6ae}.clip-inspector{background:linear-gradient(#43220578,#2a170580);border:1px solid #ffe8aa33;border-radius:13px;grid-template-columns:1.1fr 2fr .82fr;align-items:center;gap:12px;min-height:70px;margin:8px 11px 10px;padding:8px 11px;display:grid;box-shadow:inset 0 3px 8px #2512033d,0 2px #ffffff0d}.clip-source{min-width:0}.clip-source-label,.inspector-label,.clip-length span{color:#fbdc9a;letter-spacing:.12em;font-size:7px;font-weight:900;display:block}.clip-source strong,.clip-source small{text-overflow:ellipsis;white-space:nowrap;display:block;overflow:hidden}.clip-source strong{margin-top:3px;font-size:12px}.clip-source small{color:#ecd09b;margin-top:2px;font-size:9px}.inspector-steps{grid-template-columns:repeat(16,1fr);align-items:end;gap:3px;display:grid}.inspector-label{grid-column:1/-1;margin-bottom:1px}.inspector-label b{color:#fff5d7}.inspector-steps>span:not(.inspector-label){color:#a99068;background:#120f1099;border-radius:4px;place-items:center;height:19px;font-size:7px;display:grid}.inspector-steps>span.on{color:#3b2204;background:#ffd35d;box-shadow:0 0 8px #ffcf455c}.clip-length{color:#ffe8b6;text-align:left;background:#2314056b;border:1px solid #ffe59f29;border-radius:8px;flex-wrap:wrap;align-items:flex-end;gap:4px;padding:7px 8px;transition:transform .15s,background .15s;display:flex}.clip-length:hover:not(:disabled){background:#ffd05b2e;transform:translateY(-1px)}.clip-length span{width:100%}.clip-length strong{font-size:10px}.inspector-actions{grid-template-columns:1fr;gap:5px;display:grid}.edit-notes-button{color:#dff8ff;background:linear-gradient(145deg,#348fc8,#1a5b96);width:100%;padding:6px 7px;font-size:8px}.mascot-zone{border-radius:21px;flex:1;min-height:0;position:relative;overflow:hidden}.mascot-zone:before{content:"";pointer-events:none;background:radial-gradient(circle at 50% 45%,#12698429,#0000 54%);border-radius:28px;position:absolute;inset:15% 0 0}.mascot-sign{z-index:4;color:#e6fbff;letter-spacing:.11em;background:#0c182d9e;border:1px solid #60cdea45;border-radius:999px;align-items:center;gap:6px;padding:6px 8px;font-size:8px;font-weight:900;display:flex;position:absolute;top:9px;right:5px;box-shadow:inset 0 1px #ffffff1f}.sign-dot{background:#ffbc35;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #ffbc35}.sign-spark{color:#ffd744}.mascot-bubble{z-index:5;color:#fff9ea;background:linear-gradient(145deg,#2b184ff0,#15163cf0);border:1px solid #ce9eff6b;border-radius:16px 16px 16px 4px;padding:12px 12px 12px 14px;font-size:11px;font-weight:800;line-height:1.3;position:absolute;top:49px;left:3px;right:8px;box-shadow:0 8px 16px #0a061e61,inset 0 1px #fff3}.bubble-tail{background:#281a50;border-bottom:1px solid #ce9eff6b;border-right:1px solid #ce9eff6b;width:16px;height:16px;position:absolute;bottom:-8px;left:18px;transform:skew(-24deg)rotate(28deg)}.mascot-art{z-index:2;filter:drop-shadow(0 15px 17px #05041466);width:116%;max-width:none;transition:transform .35s,filter .35s;position:absolute;bottom:-7%;right:-15%}.mascot-dancing .mascot-art{filter:drop-shadow(0 20px 20px #05041473)saturate(1.08);transform:translateY(-5px)rotate(-1deg)}.mascot-action{z-index:5;color:#fff;text-transform:uppercase;background:linear-gradient(145deg,#8648c5,#4d288d);border:1px solid #ffffff4d;border-radius:11px;align-items:center;gap:6px;padding:8px 10px;font-size:9px;font-weight:900;display:flex;position:absolute;bottom:9px;right:12px;box-shadow:0 6px 12px #09051c57,inset 0 1px #ffffff45}.mascot-action:hover{filter:brightness(1.1);transform:translateY(-2px)}.room-card{z-index:4;color:#e9f4ff;background:#0c0e26a8;border:1px solid #7ecdee38;border-radius:16px;flex:none;padding:11px 12px 12px;display:none;position:relative;box-shadow:0 9px 20px #05051447,inset 0 1px #ffffff1a}.room-card-header{color:#8eddf3;letter-spacing:.11em;justify-content:space-between;align-items:center;font-size:8px;font-weight:900;display:flex}.room-card-header span:first-child{align-items:center;gap:5px;display:flex}.room-card strong{color:#fff1c9;margin-top:8px;font-size:11px;line-height:1.15;display:block}.idea-steps{align-items:center;gap:5px;margin:9px 0 7px;display:flex}.idea-steps span{color:#c5c1dc;background:#6c579675;border-radius:50%;place-items:center;width:20px;height:20px;font-size:9px;font-weight:900;display:grid}.idea-steps span.idea-active{color:#172019;background:#97ea40;box-shadow:0 0 8px #97ea4066}.idea-steps i{background:#5d527e;width:17px;height:2px}.room-card small{color:#bdb9d4;font-size:9px;line-height:1.3;display:block}.writer-workspace{transform-origin:50%}.melody-builder{flex-direction:column;height:100%;display:flex}.builder-header{padding-bottom:9px}.builder-header-actions{gap:6px;display:flex}.close-editor-button{color:#eaf7ff;text-transform:uppercase;background:#0823469e;border:1px solid #b3e4ff38;border-radius:10px;padding:8px 10px;font-size:9px;font-weight:900;box-shadow:inset 0 1px #ffffff24}.close-editor-button:hover{background:#2972a8a6}.ghost-button{color:#d9f0ff;background:#06264b6e;border:1px solid #abe3ff2e}.send-button{color:#392006;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(145deg,#fff1a3,#ffb927);border-radius:10px;align-items:center;gap:6px;padding:8px 11px;font-size:9px;font-weight:900;transition:transform .16s,filter .16s;display:flex;box-shadow:0 5px 10px #2c170245,inset 0 1px #ffffffb3}.send-button:hover{filter:brightness(1.08);transform:translateY(-2px)}.mode-tabs{z-index:1;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 14px 8px;display:grid;position:relative}.mode-tab{color:#ffffffc2;text-align:left;background:#081d3973;border:1px solid #ffffff21;border-radius:10px;justify-content:space-between;align-items:center;gap:7px;padding:8px 11px;transition:transform .17s,filter .17s,background .17s;display:flex}.mode-tab span{letter-spacing:.06em;text-transform:uppercase;font-size:11px;font-weight:900}.mode-tab small{color:#ffffff9e;font-size:8px}.mode-tab:hover{filter:brightness(1.12);transform:translateY(-2px)}.mode-tab.selected{color:#fff;box-shadow:0 0 13px var(--tab-glow), inset 0 1px #fff6;border-color:#ffffff9e}.mode-chords{--tab-glow:#ffb6228c}.mode-chords.selected{background:linear-gradient(145deg,#ffc02d,#dd7c0d)}.mode-bass{--tab-glow:#7fe82780}.mode-bass.selected{background:linear-gradient(145deg,#7fdf29,#398d1b)}.mode-melody{--tab-glow:#c773ff80}.mode-melody.selected{background:linear-gradient(145deg,#b36aee,#6e37ac)}.writer-toolbar{z-index:1;background:#0416346b;border:1px solid #ffffff1f;border-radius:10px;align-items:center;gap:7px;min-height:35px;margin:0 14px 7px;padding:4px 6px;display:flex;position:relative}.tool-group{align-items:center;gap:4px;display:flex}.tool-group>span{color:#b9dcec;letter-spacing:.1em;margin:0 3px;font-size:7px;font-weight:900}.tool-group button{color:#b6cfe0;background:#0f365899;border-radius:6px;place-items:center;width:23px;height:23px;font-size:12px;display:grid}.tool-group button.selected{color:#163248;background:#aee9ff;box-shadow:0 0 8px #7addff73}.tool-toggle{color:#c3dfef;background:#0f365875;padding:5px 7px;font-size:8px}.tool-toggle.selected{color:#112f23;background:#a6ed74;box-shadow:0 0 8px #a6ed7461}.snap-chip{color:#bef5ff;text-transform:uppercase;background:#19809a45;border-radius:999px;align-items:center;gap:5px;margin-left:auto;padding:5px 7px;font-size:8px;font-weight:900;display:flex}.snap-chip span{background:#8bf1ed;border-radius:50%;width:6px;height:6px;box-shadow:0 0 8px #8bf1ed}.chord-helper{z-index:1;align-items:center;gap:4px;min-height:29px;margin:0 14px 7px;display:flex;position:relative}.helper-label{color:#ffe1a2;letter-spacing:.1em;margin-right:3px;font-size:8px;font-weight:900}.chord-helper button{color:#5a3304;background:#ffd15b;border-radius:7px;min-width:31px;padding:5px 7px;font-size:10px;font-weight:900;box-shadow:inset 0 1px #ffffff8c,0 3px #4922023d}.chord-helper button:hover{filter:brightness(1.08);transform:translateY(-1px)}.chord-helper small{color:#bddbec;margin-left:5px;font-size:8px}.piano-roll{z-index:1;background:#0a1026b5;border:2px solid #b9e3ff2e;border-radius:12px;flex:1;min-height:0;margin:0 13px;display:flex;position:relative;box-shadow:inset 0 4px 12px #00000063}.piano-column{background:#f3ecdb;border-right:1px solid #ffffff26;flex-direction:column;flex:0 0 58px;min-height:0;padding:25px 3px 3px;display:flex}.piano-column-label{color:#384054;letter-spacing:.12em;background:#faf0d1;place-items:center;width:58px;height:25px;font-size:7px;font-weight:900;display:grid;position:absolute;top:0;left:0}.roll-key{color:#586076;background:linear-gradient(90deg,#fff7df,#c7d0cc);border-bottom:1px solid #313a4861;flex:1;justify-content:flex-end;align-items:center;min-height:0;padding-right:4px;font-size:7px;font-weight:900;display:flex;position:relative}.roll-key.black{color:#d8e2e4;background:linear-gradient(90deg,#343c4f,#111726)}.piano-grid{flex-direction:column;flex:1;min-width:0;min-height:0;display:flex;overflow:hidden}.grid-top-ruler{color:#b6c5d7;background:#1b2a46c7;border-bottom:1px solid #ffffff24;flex:0 0 25px;grid-template-columns:repeat(16,1fr);display:grid}.grid-top-ruler span{place-items:center;font-size:8px;font-weight:900;display:grid}.grid-top-ruler span.current{color:#16253b;background:#d8f3ff}.grid-body{cursor:crosshair;flex:1;min-height:0;position:relative;overflow:hidden}.pitch-row,.time-column{pointer-events:none;position:absolute}.pitch-row{border-bottom:1px solid #a2c7e81a;left:0;right:0}.pitch-row:nth-child(odd){background:#ffffff04}.pitch-row.octave-row{border-bottom-color:#78c2e657}.pitch-row.scale-row{background:#6ed7aa09}.time-column{background:#b1d6ef1a;width:1px;top:0;bottom:0}.time-column.major{background:#b1d6ef45}.roll-playhead{z-index:4;pointer-events:none;background:#fffde9;width:2px;position:absolute;top:0;bottom:0;box-shadow:0 0 9px #ffffe8e6}.roll-note{z-index:5;color:#fffde8;background:linear-gradient(145deg, color-mix(in srgb, var(--note-color), white 16%), var(--note-color));min-width:7px;box-shadow:0 0 10px color-mix(in srgb, var(--note-color), transparent 32%), inset 0 2px #ffffff59, inset 0 -3px #00000026;cursor:grab;border:1px solid #ffffffa3;border-radius:4px;align-items:center;padding:0 5px;transition:filter .14s,box-shadow .14s;display:flex;position:absolute;overflow:hidden}.roll-note:hover,.roll-note.dragging{z-index:7;filter:brightness(1.15);box-shadow:0 0 15px color-mix(in srgb, var(--note-color), transparent 15%), inset 0 2px #ffffff75}.roll-note.sounding{z-index:6;filter:brightness(1.34);box-shadow:0 0 19px color-mix(in srgb, var(--note-color), white 22%), inset 0 2px #ffffff94}.roll-note:active{cursor:grabbing}.roll-note span{z-index:2;text-overflow:ellipsis;font-size:7px;font-weight:900;position:relative;overflow:hidden}.roll-note i{background:#ffffffbf;border-radius:3px;width:3px;height:55%;position:absolute;right:4px}.erase-mode .roll-note{cursor:crosshair}.builder-footer{z-index:1;color:#bedff0;justify-content:space-between;align-items:center;gap:8px;min-height:30px;padding:7px 14px 4px;font-size:9px;display:flex;position:relative}.builder-footer>span{align-items:center;gap:5px;display:flex}.builder-footer button{color:#fff2bd;text-transform:uppercase;background:0 0;align-items:center;gap:5px;font-size:9px;font-weight:900;display:flex}.builder-footer button:hover{color:#fff}.note-editor-overlay{z-index:20;background:linear-gradient(145deg,#2169a5fa,#112c68fc);border:2px solid #bae8ff85;border-radius:24px;min-width:860px;padding:6px;display:flex;position:fixed;inset:74px 4vw 76px;overflow:hidden;box-shadow:0 22px 52px #0205179e,0 0 0 5px #0a234e85,0 0 36px #44c0ff4d,inset 0 2px #ffffff57,inset 0 -6px #020b2a57}.note-editor-overlay:before{content:"";pointer-events:none;background:radial-gradient(circle at 16% 8%,#8febff3d,#0000 23%),linear-gradient(115deg,#ffffff14,#0000 28%);position:absolute;inset:0}.note-editor-overlay .melody-builder{z-index:1;border-radius:18px;width:100%;min-height:0;position:relative}.transport-bar{z-index:5;justify-content:space-between;align-items:center;gap:15px;height:69px;padding:5px 18px 8px;display:flex;position:relative}.transport-left,.transport-right{align-items:center;gap:9px;display:flex}.transport-main{color:#fff;letter-spacing:.08em;border:3px solid #ffffff4d;border-radius:19px;justify-content:center;align-items:center;gap:8px;min-width:92px;height:56px;padding:0 16px;font-size:11px;font-weight:900;transition:transform .14s,filter .14s;display:flex;box-shadow:0 10px 18px #04041170,0 3px #05061366,inset 0 3px #fff6,inset 0 -7px #00000038}.play-control{min-width:108px}.transport-main:hover{filter:brightness(1.1);transform:translateY(-2px)}.transport-main:active{transform:translateY(2px)}.play-control{background:linear-gradient(145deg,#8be62b,#40a610)}.stop-control{background:linear-gradient(145deg,#f67,#d92849)}.record-control{background:linear-gradient(145deg,#25caf4,#087ab9)}.play-control.is-playing{box-shadow:0 0 16px #8def328c,0 9px 17px #04041166,inset 0 2px #ffffff57,inset 0 -5px #0003}.bpm-control{background:linear-gradient(145deg,#3b365e,#1b1b35);border:3px solid #fff3;border-radius:19px;align-items:center;height:56px;display:flex;overflow:hidden;box-shadow:0 9px 17px #0404116b,0 3px #0506135c,inset 0 3px #ffffff2b,inset 0 -6px #0000003d}.bpm-control button{color:#fff;background:#0407143b;place-items:center;width:48px;height:100%;font-size:25px;display:grid}.bpm-control button:hover{background:#ffffff1a}.bpm-control div{flex-direction:column;justify-content:center;align-items:center;min-width:84px;display:flex}.bpm-control span{color:#d8d2ec;letter-spacing:.1em;font-size:8px;font-weight:900}.bpm-control strong{color:#fff9e4;margin-top:1px;font-size:22px;line-height:1}.transport-right{justify-content:flex-end}.loop-status{color:#b3aace;text-transform:uppercase;background:#0d0d238a;border:1px solid #ffffff1f;border-radius:999px;align-items:center;gap:5px;padding:7px 9px;font-size:8px;font-weight:900;display:flex}.loop-status.on{color:#c8fa85}.utility-button{color:#fff;letter-spacing:.05em;text-transform:uppercase;background:linear-gradient(145deg,#8650d1,#50278f);border:1px solid #ffffff42;border-radius:13px;align-items:center;gap:6px;padding:10px 13px;font-size:9px;font-weight:900;display:flex;box-shadow:0 7px 13px #08041d57,inset 0 1px #ffffff52}.utility-button:hover{filter:brightness(1.1);transform:translateY(-2px)}.clear-button{background:linear-gradient(145deg,#a66bed,#6537ae)}.settings-button{background:linear-gradient(145deg,#22c9e9,#087ba9);width:47px;height:47px}@keyframes clip-pulse{0%,to{filter:brightness()}50%{filter:brightness(1.18)}}@keyframes workspaceReveal{0%{opacity:.72;transform:translateY(5px)scale(.995)}to{opacity:1;transform:none}}@media (width<=1400px){.studio-grid{grid-template-columns:286px minmax(690px,1fr) 245px;gap:9px;padding-inline:11px}.transport-main{padding-inline:10px}.transport-main span{display:none}.topbar{padding-inline:11px}.topbar-center{font-size:10px}.room-card{display:none}.mascot-art{width:127%;right:-23%}}@media (height<=840px){.topbar{height:57px}.studio-grid{height:calc(100vh - 119px)}.panel-header,.sequencer-header,.builder-header{padding-top:9px;padding-bottom:6px}.keyboard{height:65px;margin-bottom:8px}.transport-bar{height:62px}}@media (width<=1120px){body{overflow:auto}.studio-app{min-width:1120px;height:auto;min-height:100vh}}