:root{--bg:#09070f;--panel:#15121e;--panel2:#1c1728;--text:#fbf8ff;--muted:#aaa2b8;--purple:#a65cff;--pink:#ff4fa7;--cyan:#43e8ff;--lime:#b8ff5c;--line:#2a2437;--shadow:0 20px 60px #0008}*{box-sizing:border-box}body{margin:0;background:radial-gradient(circle at 15% 0,#24103c 0,transparent 32%),radial-gradient(circle at 85% 18%,#102c3d 0,transparent 28%),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}.ambient{position:fixed;filter:blur(90px);opacity:.15;pointer-events:none}.ambient.one{width:300px;height:300px;background:var(--purple);left:-120px;top:30%}.ambient.two{width:300px;height:300px;background:var(--cyan);right:-130px;top:10%}button,input,select,textarea{font:inherit}button{color:var(--text);background:#211b2d;border:1px solid var(--line);border-radius:12px;padding:10px 14px;cursor:pointer;transition:.18s}button:hover{transform:translateY(-1px);border-color:#685982}.primary{background:linear-gradient(135deg,var(--purple),var(--pink));border:0;font-weight:800;box-shadow:0 10px 28px #a65cff38}.wide{width:100%;padding:15px}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:24px;padding:13px 22px;background:#09070fe8;backdrop-filter:blur(18px);border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;background:none;border:0;padding:0;text-align:left}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--pink),var(--purple),var(--cyan));font-size:25px;font-weight:950}.brand b{color:var(--lime)}.brand small{display:block;color:var(--muted);font-size:9px;letter-spacing:.04em}.topbar nav{display:flex;gap:5px;flex:1;overflow:auto}.topbar nav button{background:transparent;border:0;color:var(--muted);white-space:nowrap}.topbar nav button.active{background:#211b2d;color:#fff}.top-actions{display:flex;align-items:center;gap:10px}.status{font-size:12px;color:var(--muted)}main{max-width:1500px;margin:auto;padding:22px}.view{display:none}.view.active{display:block}.panel{background:linear-gradient(145deg,#181321ed,#100e17ed);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow)}.hero{display:flex;justify-content:space-between;align-items:center;gap:22px;overflow:hidden}.hero h1,.page-title h1{font-size:clamp(28px,4vw,55px);line-height:1.02;margin:7px 0}.hero p{color:var(--muted);max-width:650px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.18em;color:var(--cyan)}.hero-button{min-width:220px;min-height:105px;background:linear-gradient(135deg,#582b87,#b83080);font-size:18px;font-weight:900;border:1px solid #e49dff}.hero-button span{display:block;font-size:30px}.transport{margin:16px 0;display:flex;gap:12px;align-items:center}.round{width:43px;height:43px;border-radius:50%;padding:0}.record{color:#ff537a}.transport label,.form-card label{color:var(--muted);font-size:12px}.transport input,.transport select,.form-card input,.form-card select,.form-card textarea,.project-toolbar input,.mix-toolbar select,.keyboard-panel select{display:block;background:#0e0b14;color:#fff;border:1px solid var(--line);border-radius:9px;padding:9px}.transport input{width:76px}.timeline-mini{margin-left:auto;min-width:180px}.timeline-mini span{font-variant-numeric:tabular-nums}.timeline-mini div{height:5px;background:#2b2437;border-radius:20px;margin-top:5px;overflow:hidden}.timeline-mini i{display:block;width:0;height:100%;background:linear-gradient(90deg,var(--cyan),var(--pink))}.studio-grid,.two-col{display:grid;grid-template-columns:1fr 1.35fr;gap:16px}.section-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.section-head h2{margin:4px 0}.combo-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.combo{min-height:84px;text-align:left;font-weight:850;position:relative;overflow:hidden}.combo small{display:block;color:var(--muted);font-weight:500;margin-top:5px}.combo::after{content:"";position:absolute;width:70px;height:70px;border-radius:50%;right:-25px;bottom:-25px;background:var(--pad);opacity:.35}.seq-row{display:grid;grid-template-columns:84px repeat(16,1fr);gap:5px;margin:7px 0;align-items:center}.seq-label{font-size:12px;color:var(--muted)}.step{aspect-ratio:1;padding:0;border-radius:6px;background:#272032}.step:nth-child(5n){border-color:#5c4d74}.step.on{background:linear-gradient(145deg,var(--purple),var(--pink));box-shadow:0 0 15px #a65cff80}.step.playing{outline:2px solid var(--cyan)}.keyboard-panel{margin-top:16px}.keyboard{display:flex;height:150px;overflow-x:auto}.key-white,.key-black{position:relative;border-radius:0 0 7px 7px;padding:0;flex-shrink:0}.key-white{width:54px;background:linear-gradient(#fff,#d8d2e0);border:1px solid #777;color:#222}.key-black{width:34px;height:92px;background:linear-gradient(#292333,#050407);margin-left:-17px;margin-right:-17px;z-index:2;border:1px solid #000;color:#fff}.key-white.active,.key-black.active{background:var(--cyan)}.page-title{padding:24px 4px}.form-card{display:grid;gap:14px}.form-card input,.form-card select,.form-card textarea{width:100%;margin-top:6px}.form-card textarea{min-height:110px;resize:vertical}.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.song-section{display:flex;align-items:center;gap:12px;border:1px solid var(--line);padding:13px;margin:9px 0;border-radius:13px;background:#0e0b14}.song-section.locked{border-color:var(--lime)}.song-section b{flex:1}.song-section span{font-size:12px;color:var(--muted)}.hint{color:var(--muted);font-size:12px}.dropzone{text-align:center;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center}.dropzone.drag{border-color:var(--cyan)}.drop-icon{font-size:70px;color:var(--cyan)}.dropzone audio{width:100%;margin-top:15px}.dropzone canvas{width:100%;height:90px;margin-top:15px}.action-list{display:grid;gap:10px}.action-list button{text-align:left}.action-list span{display:block;color:var(--muted);font-size:12px;margin-top:3px}.chop-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.chop-grid button{aspect-ratio:1;background:linear-gradient(145deg,#553073,#1e6472)}.recorder{text-align:center}.mic-orb{width:150px;height:150px;display:grid;place-items:center;margin:15px auto;border-radius:50%;font-size:65px;background:radial-gradient(circle,#663b87,#17101f 70%);box-shadow:0 0 0 12px #a65cff10}.mic-orb.live{animation:pulse 1s infinite}@keyframes pulse{50%{box-shadow:0 0 0 27px #ff4fa711}}#recordTimer{font-size:38px;font-variant-numeric:tabular-nums;margin:15px}.recorder audio{display:block;width:100%;margin:18px 0}.vocal-presets{display:grid;grid-template-columns:1fr 1fr;gap:10px}.sliders{margin-top:22px;display:grid;gap:17px}.sliders label{display:grid;grid-template-columns:65px 1fr 70px;align-items:center;gap:10px;color:var(--muted);font-size:12px}.mix-toolbar,.project-toolbar{display:flex;gap:10px;margin-bottom:16px}.project-toolbar input{flex:1}.mixer-channels{display:flex;gap:12px;overflow-x:auto;padding-bottom:12px}.channel{min-width:145px;text-align:center}.channel .meter{height:160px;width:16px;background:#231d2d;border-radius:20px;margin:15px auto;display:flex;align-items:end;overflow:hidden}.channel .meter i{display:block;width:100%;height:var(--level);background:linear-gradient(0deg,var(--pink),var(--lime))}.channel input[type=range]{writing-mode:vertical-lr;direction:rtl;height:120px}.project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}.project-card h3{margin:0 0 8px}.project-card p{color:var(--muted);font-size:12px}.project-card .thumb{height:90px;border-radius:12px;background:linear-gradient(125deg,#3c1d62,#16445a);margin-bottom:12px;position:relative;overflow:hidden}.project-card .thumb::after{content:"〰〰〰";position:absolute;font-size:40px;color:#ffffff55;left:20px;top:18px}#toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,140px);padding:13px 20px;border-radius:13px;background:#fff;color:#111;font-weight:750;z-index:50;transition:.3s;box-shadow:var(--shadow)}#toast.show{transform:translate(-50%,0)}@media(max-width:900px){.topbar{flex-wrap:wrap}.topbar nav{order:3;width:100%}.top-actions .status{display:none}.studio-grid,.two-col{grid-template-columns:1fr}.hero{align-items:flex-start}.transport{overflow:auto}.timeline-mini{display:none}.seq-row{grid-template-columns:62px repeat(16,27px)}.sequencer{overflow:auto}.mixer-channels{padding-bottom:25px}}@media(max-width:560px){main{padding:12px}.topbar{padding:10px 12px}.brand small{display:none}.hero{display:block}.hero-button{width:100%;margin-top:12px;min-height:82px}.combo-grid{grid-template-columns:1fr 1fr}.transport label{display:none}.vocal-presets{grid-template-columns:1fr}.mix-toolbar,.project-toolbar{flex-wrap:wrap}.project-toolbar input{flex-basis:100%}}


/* Audio reliability and input controls */
.master-volume{display:flex;align-items:center;gap:8px;min-width:310px;padding:6px 9px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.master-volume button{padding:8px 10px;min-width:38px}.master-volume input{width:120px}.master-volume output{font-size:12px;color:var(--muted);min-width:38px}.master-volume #muteMaster.active{background:linear-gradient(135deg,var(--purple),var(--pink));color:white}.sample-source-buttons{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}.sample-record-status{margin-top:12px;color:var(--pink);font-weight:800}.audio-warning{color:#ffb84f!important}
@media(max-width:900px){.transport{flex-wrap:wrap}.master-volume{order:10;width:100%;min-width:0}.master-volume input{flex:1}.timeline-mini{width:100%}}

/* Professional sound library */
.rack-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.selected-sound{display:flex;align-items:center;gap:13px;padding:12px 14px;margin:-2px 0 16px;border:1px solid #342b43;border-radius:15px;background:linear-gradient(120deg,#110d18,#1d1628)}.selected-sound .selected-icon{width:76px;height:56px;border-radius:12px;display:grid;place-items:center;background:radial-gradient(circle at 50% 30%,#503376,#171020);color:#d8b7ff}.selected-sound svg,.instrument-art svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}.selected-sound>div:nth-child(2){display:grid;gap:2px;flex:1}.selected-sound span,.sound-card>span{font-size:9px;letter-spacing:.16em;color:var(--cyan);font-weight:900}.selected-sound b{font-size:16px}.selected-sound small{color:var(--muted)}
.sound-modal{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;padding:20px;background:#050309d9;backdrop-filter:blur(16px)}.sound-modal.open{display:flex}.sound-modal-card{width:min(1180px,100%);max-height:92vh;overflow:auto;border:1px solid #3a2e4e;border-radius:24px;padding:22px;background:radial-gradient(circle at 90% 0,#153644 0,transparent 30%),radial-gradient(circle at 0 0,#32164d 0,transparent 34%),#0d0a13;box-shadow:0 40px 120px #000}.modal-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;position:sticky;top:-22px;z-index:3;padding:18px 0 14px;background:#0d0a13ee;backdrop-filter:blur(15px)}.modal-head h2{margin:5px 0;font-size:clamp(25px,4vw,43px)}.modal-close{font-size:27px;line-height:1;width:47px;height:47px;border-radius:50%;padding:0}.library-categories{display:flex;gap:8px;overflow:auto;padding:3px 0 17px}.library-categories button{white-space:nowrap}.library-categories button.active{background:linear-gradient(135deg,var(--purple),var(--pink));border-color:transparent}.library-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.sound-card{text-align:left;padding:0 0 14px;overflow:hidden;background:#171220}.instrument-art{height:125px;padding:17px;color:#d7b9ff;background:radial-gradient(circle at 50% 50%,#593779 0,#21152e 47%,#100d16 75%);margin-bottom:13px}.sound-card:nth-child(3n+2) .instrument-art{color:#74ebff;background:radial-gradient(circle at 50% 50%,#245f70 0,#142b38 47%,#100d16 75%)}.sound-card:nth-child(3n) .instrument-art{color:#ff91cc;background:radial-gradient(circle at 50% 50%,#71325a 0,#32172b 47%,#100d16 75%)}.sound-card>span,.sound-card>b,.sound-card>small,.sound-card>em{display:block;margin-left:14px;margin-right:14px}.sound-card>b{font-size:16px;margin-top:5px}.sound-card>small{color:var(--muted);min-height:34px;margin-top:4px}.sound-card>em{font-style:normal;font-size:10px;color:#867b94;margin-top:10px}
.designer-card{width:min(1120px,100%)}.designer-layout{display:grid;grid-template-columns:1.05fr 1fr;gap:20px}.designer-visual{min-height:500px;display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:20px;background:radial-gradient(circle at 50% 35%,#4c2c72,#151020 55%,#09070f);border:1px solid #342746;padding:25px}.sound-orb{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;font-size:70px;color:var(--cyan);background:radial-gradient(circle,#5e3e83 0,#1b1327 58%,#09070f 74%);box-shadow:0 0 70px #a65cff44,inset 0 0 45px #43e8ff20}.designer-visual canvas{width:100%;height:120px;margin:14px 0}.designer-controls{display:grid;gap:11px}.designer-controls label{display:grid;grid-template-columns:90px 1fr auto;align-items:center;gap:10px;color:var(--muted);font-size:12px;padding:10px 12px;background:#15111d;border:1px solid #2b2437;border-radius:12px}.designer-controls label:first-child,.designer-controls label:nth-child(2){grid-template-columns:90px 1fr}.designer-controls input:not([type=range]),.designer-controls select{width:100%;background:#0c0911;border:1px solid #342b43;color:#fff;border-radius:8px;padding:9px}.designer-controls input[type=range]{width:100%}.designer-controls output{min-width:55px;text-align:right;color:#fff}.designer-buttons{display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:6px}
@media(max-width:900px){.library-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.designer-layout{grid-template-columns:1fr}.designer-visual{min-height:360px}.sound-orb{width:130px;height:130px}.rack-actions{justify-content:flex-start}.selected-sound{align-items:flex-start}}
@media(max-width:560px){.library-grid{grid-template-columns:1fr}.sound-modal{padding:8px}.sound-modal-card{padding:15px;border-radius:18px}.modal-head{top:-15px}.designer-controls label{grid-template-columns:75px 1fr}.designer-controls label output{grid-column:2}.designer-buttons{grid-template-columns:1fr}.selected-sound .selected-icon{width:58px;height:48px}.selected-sound button{padding:8px}.rack-actions button{flex:1}}

/* Keyboard and composed-track layout */
.keyboard-tools{display:flex;align-items:center;gap:12px;margin:10px 0 14px}.keyboard-tools span{font-size:12px;color:var(--muted)}#autoKeysBtn.active{background:linear-gradient(135deg,var(--purple),var(--pink));font-weight:800}.keyboard-v25{height:190px;min-width:100%;overflow-x:auto;padding-bottom:8px}.keyboard-v25 .key-white{width:70px;min-width:70px}.keyboard-v25 .key-black{width:42px;min-width:42px;height:118px;margin-left:-21px;margin-right:-21px}.composed-track{margin-top:18px;display:grid;grid-template-columns:110px 1fr auto;align-items:center;gap:18px;border-color:#674485;background:linear-gradient(135deg,#211334,#101a25)}.composed-track[hidden]{display:none}.composed-art{width:94px;height:94px;border-radius:22px;display:grid;place-items:center;font-size:48px;background:linear-gradient(145deg,var(--purple),var(--pink));box-shadow:0 0 35px #a65cff55}.composed-copy h2{margin:4px 0}.composed-copy p,.composed-copy small{color:var(--muted)}.composed-actions{display:grid;gap:9px;min-width:190px}@media(max-width:800px){.composed-track{grid-template-columns:74px 1fr}.composed-art{width:66px;height:66px}.composed-actions{grid-column:1/-1;grid-template-columns:1fr 1fr 1fr}.keyboard-v25 .key-white{width:64px;min-width:64px}}

/* Authoritative responsive keyboard and playback controls */
[hidden],#instrument,#kit{display:none!important}
.keyboard-tools{display:flex!important;align-items:center;gap:12px;flex-wrap:wrap;margin:14px 0 12px}
#autoKeysBtn{display:inline-flex!important;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid rgba(67,232,255,.48);background:linear-gradient(135deg,rgba(67,232,255,.16),rgba(255,79,167,.15));font-weight:800;white-space:nowrap}
#autoKeysBtn.active{background:linear-gradient(135deg,#43e8ff,#ff4fa7);color:#090711;border-color:transparent;box-shadow:0 0 22px rgba(67,232,255,.3)}
.keyboard-v26{display:flex!important;align-items:flex-start;overflow-x:auto;padding:8px 4px 18px;min-height:220px;scrollbar-width:thin;touch-action:pan-x}
.keyboard-v26 .key-white{position:relative;flex:0 0 68px!important;width:68px!important;height:190px!important;margin:0 1px;border-radius:0 0 7px 7px;z-index:1}
.keyboard-v26 .key-black{position:relative;flex:0 0 42px!important;width:42px!important;height:118px!important;margin:0 -22px;z-index:3;border-radius:0 0 6px 6px}
.keyboard-v26 .key-white.active,.keyboard-v26 .key-black.active{transform:translateY(3px);filter:brightness(1.25);box-shadow:0 0 20px #43e8ff}
#composedTrackPanel[hidden]{display:none!important}
#composedTrackPanel{margin-top:24px}

/* V3 device export and animated key feedback */
.composed-actions{min-width:210px}.composed-actions #downloadTrack{border-color:rgba(67,232,255,.48);background:rgba(67,232,255,.08)}.key-white.active,.key-black.active{transition:transform .05s,filter .05s,box-shadow .05s}.key-white.active{background:linear-gradient(#fff,#bff8ff)!important}.key-black.active{background:linear-gradient(#43e8ff,#a65cff)!important}.composed-actions button.active{background:linear-gradient(135deg,#ff4fa7,#a65cff)}
@media(max-width:800px){.composed-actions{grid-template-columns:1fr 1fr}.composed-actions button:first-child{grid-column:1/-1}}


/* RecessStudio 3.1 Arranger */
.arranger-toolbar{display:flex;gap:12px;justify-content:space-between;align-items:center;flex-wrap:wrap;margin-bottom:16px}.arranger-toolbar>div{display:flex;gap:8px;flex-wrap:wrap}.file-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:rgba(255,255,255,.06);border-radius:12px;padding:11px 15px;font-weight:800;cursor:pointer}.arranger-overview{margin-bottom:16px}.arranger-overview canvas{width:100%;height:120px;border-radius:14px;background:rgba(4,4,12,.55)}.arranger-workspace{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:16px}.timeline-panel{overflow:auto;padding:0;min-height:560px}.timeline-ruler{display:flex;position:sticky;top:0;z-index:5;background:#11101b;border-bottom:1px solid var(--line);min-width:max-content}.ruler-spacer{width:190px;min-width:190px;padding:13px;font-size:11px;letter-spacing:.16em;color:var(--muted)}.ruler-bars{display:flex}.ruler-bars span{display:block;border-left:1px solid rgba(255,255,255,.08);padding:13px 0 13px 8px;font-size:11px;color:var(--muted);box-sizing:border-box}.arrangement-tracks{min-width:max-content}.arr-track{display:flex;min-height:84px;border-bottom:1px solid rgba(255,255,255,.07)}.arr-track-head{width:190px;min-width:190px;padding:12px;position:sticky;left:0;z-index:3;background:#151321;border-right:1px solid var(--line)}.arr-track-head input{width:100%;padding:5px 0;border:0;background:transparent;font-weight:900}.arr-track-head small{display:block;color:var(--muted);margin:2px 0 8px}.arr-track-head button{padding:6px 9px}.arr-track-head button.active{background:linear-gradient(135deg,#a84cff,#ff4fa7)}.arr-lane{position:relative;min-height:84px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 54px)}.arr-clip{position:absolute;top:10px;height:62px;text-align:left;border:1px solid rgba(255,255,255,.22);border-radius:10px;padding:10px 18px 8px 10px;overflow:hidden;touch-action:none;cursor:grab;box-shadow:0 8px 24px rgba(0,0,0,.2)}.arr-clip:active{cursor:grabbing}.arr-clip b,.arr-clip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.arr-clip small{opacity:.72;margin-top:4px}.arr-clip.selected{outline:3px solid #fff;outline-offset:2px}.clip-resize{position:absolute;right:0;top:0;width:12px;height:100%;cursor:ew-resize;background:rgba(255,255,255,.18)}.clip-color-0{background:linear-gradient(135deg,#8d36d8,#d83c9f)}.clip-color-1{background:linear-gradient(135deg,#175d8a,#299fc0)}.clip-color-2{background:linear-gradient(135deg,#5a3fa0,#8c6fe7)}.clip-color-3{background:linear-gradient(135deg,#a85c24,#d58d34)}.clip-color-4{background:linear-gradient(135deg,#237257,#36a87f)}.clip-color-5{background:linear-gradient(135deg,#7c3d53,#bd5576)}.clip-inspector{align-self:start;position:sticky;top:90px}.clip-inspector label{display:block;margin:13px 0}.clip-inspector input,.clip-inspector select{width:100%;margin-top:6px}.pattern-head{margin-top:18px}.pattern-head small{display:block;color:var(--muted);margin-top:4px}.clip-pattern{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:12px}.clip-pattern button{aspect-ratio:1;border-radius:9px;padding:0}.clip-pattern button.on{background:linear-gradient(135deg,#a84cff,#ff4fa7);box-shadow:0 0 18px rgba(255,79,167,.45)}@media(max-width:900px){.arranger-workspace{grid-template-columns:1fr}.clip-inspector{position:static}.arranger-toolbar{align-items:stretch}.arranger-toolbar>div{width:100%}.arranger-toolbar button,.file-button{flex:1}.timeline-panel{min-height:460px}}