:root{--ink:#050706;--paper:#edf2e7;--acid:#d8ff69;--mint:#7fffd1;--violet:#ab7cff;--pink:#ff42d0;--muted:#8c968b;--line:#2a302b;--panel:#0b0f0c;--serif:Georgia,"Times New Roman",serif;--sans:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--ink)}
body{min-width:300px;margin:0;color:var(--paper);font-family:var(--sans);background:radial-gradient(circle at 78% 0,rgba(171,124,255,.12),transparent 31rem),radial-gradient(circle at 10% 45%,rgba(127,255,209,.06),transparent 35rem),var(--ink)}
button,select,input{font:inherit}
.lab-shell{width:min(1540px,100%);min-height:100vh;margin:auto;padding:0 clamp(14px,2.5vw,42px) 48px}
.lab-header{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:72px;border-bottom:1px solid var(--line)}
.brand{display:flex;gap:11px;align-items:center;width:max-content;color:inherit;text-decoration:none}
.brand>i{width:15px;height:15px;border:2px solid var(--acid);box-shadow:0 0 16px rgba(216,255,105,.65);transform:rotate(45deg)}
.brand span{display:flex;gap:7px;align-items:baseline}
.brand strong{font-size:1.05rem;letter-spacing:-.04em}
.brand b{color:var(--acid);font:italic 1rem/1 var(--serif)}
.save-state{display:flex;gap:8px;align-items:center;margin:0;color:var(--muted);font-size:.66rem;font-weight:800;letter-spacing:.13em}
.save-state i{width:6px;height:6px;border-radius:50%;background:var(--mint);box-shadow:0 0 9px var(--mint)}
.save-state.is-saving i{background:var(--violet)}
.power{justify-self:end;display:flex;gap:9px;align-items:center;padding:10px 12px;color:var(--acid);font-size:.68rem;font-weight:900;letter-spacing:.12em;background:#0d120e;border:1px solid #3b463d}
.power span{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.power[aria-pressed="false"]{color:#788078}
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(260px,.7fr);gap:40px;align-items:end;padding:clamp(42px,7vw,96px) 0 clamp(38px,5vw,70px)}
.eyebrow{margin:0 0 14px;color:var(--mint);font-size:.7rem;font-weight:900;letter-spacing:.18em}
.hero h1{margin:0;font:400 clamp(3.2rem,7.2vw,7.7rem)/.82 var(--serif);letter-spacing:-.065em}
.hero h1 em{color:var(--acid);font-weight:400}
.intro{max-width:570px;margin:0 0 7px;color:#b4bdb3;font:1.08rem/1.65 var(--serif)}
.studio-grid{display:grid;grid-template-columns:minmax(220px,.72fr) minmax(460px,1.55fr) minmax(300px,.93fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.panel{background:linear-gradient(145deg,rgba(255,255,255,.018),transparent 48%),var(--panel);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.studio-grid>.panel{min-height:690px;padding:23px}
.panel-heading{display:flex;gap:14px;align-items:flex-start;margin-bottom:25px}
.panel-heading>span{display:grid;place-items:center;width:30px;height:30px;color:var(--acid);font:700 .7rem/1 var(--sans);border:1px solid #435042;border-radius:50%}
.panel-heading p{margin:0 0 3px;color:var(--muted);font-size:.61rem;font-weight:900;letter-spacing:.15em}
.panel-heading h2{margin:0;font:400 1.45rem/1.1 var(--serif)}
.preset-list{display:grid;gap:8px}
.preset-card{position:relative;width:100%;padding:14px 15px 14px 18px;color:#c6cdc5;text-align:left;background:#0d120e;border:1px solid #242b25;transition:.18s ease}
.preset-card::before{position:absolute;inset:11px auto 11px 0;width:3px;content:"";background:var(--preset-color);box-shadow:0 0 12px var(--preset-color)}
.preset-card strong,.preset-card small{display:block}
.preset-card strong{margin-bottom:5px;color:var(--paper);font:400 1.06rem/1 var(--serif)}
.preset-card small{color:#778178;font-size:.65rem;line-height:1.35}
.preset-card:hover,.preset-card.active{transform:translateX(3px);border-color:var(--preset-color);box-shadow:inset 0 0 26px color-mix(in srgb,var(--preset-color),transparent 94%)}
.preset-card.active::after{position:absolute;top:11px;right:11px;color:var(--preset-color);font-size:.65rem;content:"ACTIVE"}
.listen-panel{display:flex;flex-direction:column}
.scope{position:relative;min-height:210px;margin-bottom:18px;overflow:hidden;background:radial-gradient(circle at center,rgba(216,255,105,.075),transparent 55%),#070a08;border:1px solid #232a24}
.scope::after{position:absolute;inset:0;pointer-events:none;content:"";background:repeating-linear-gradient(0deg,transparent 0 19px,rgba(216,255,105,.035) 20px),repeating-linear-gradient(90deg,transparent 0 39px,rgba(216,255,105,.03) 40px)}
.scope canvas{position:absolute;inset:0;width:100%;height:100%}
.scope-copy{position:absolute;left:18px;bottom:15px;z-index:2}
.scope-copy small,.scope-copy strong{display:block}
.scope-copy small{margin-bottom:5px;color:#738075;font-size:.58rem;font-weight:900;letter-spacing:.16em}
.scope-copy strong{color:var(--acid);font-size:.77rem;letter-spacing:.12em;text-shadow:0 0 12px rgba(216,255,105,.45)}
.sound-pads{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sound-pad{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;min-height:65px;padding:9px 12px;color:inherit;text-align:left;background:#0e130f;border:1px solid #29312a;transition:.14s ease}
.sound-pad>i{display:grid;place-items:center;width:32px;height:32px;color:var(--pad-color,var(--acid));font-style:normal;border:1px solid currentColor;border-radius:50%;box-shadow:inset 0 0 13px color-mix(in srgb,var(--pad-color,var(--acid)),transparent 80%)}
.sound-pad strong,.sound-pad small{display:block}
.sound-pad strong{font-size:.72rem;letter-spacing:.06em}
.sound-pad small{margin-top:3px;color:#778178;font-size:.61rem}
.sound-pad>span{color:#59625a}
.sound-pad:hover,.sound-pad.is-playing{color:var(--pad-color,var(--acid));border-color:var(--pad-color,var(--acid));transform:translateY(-1px);box-shadow:0 0 20px color-mix(in srgb,var(--pad-color,var(--acid)),transparent 91%)}
.listen-note{margin:auto 0 0;padding-top:18px;color:#727c73;font-size:.7rem;line-height:1.55}
.select-label,.recipe-field>span{display:block;color:#889289;font-size:.61rem;font-weight:900;letter-spacing:.14em}
.select-label select{display:block;width:100%;height:46px;margin-top:8px;padding:0 12px;color:var(--paper);font-weight:800;background:#101511;border:1px solid #323a33;border-radius:0}
.recipe-field{margin-top:19px}
.recipe-list{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin-top:8px}
.recipe-button{min-height:38px;padding:7px;color:#909990;font-size:.67rem;font-weight:800;background:#0f1410;border:1px solid #29302a}
.recipe-button:hover,.recipe-button.active{color:var(--acid);border-color:var(--acid);box-shadow:inset 0 0 15px rgba(216,255,105,.05)}
.control-list{display:grid;gap:14px;margin-top:22px}
.sound-control,.mix-control{display:block}
.sound-control>span,.mix-control>span{display:flex;justify-content:space-between;margin-bottom:7px;color:#939d94;font-size:.62rem;font-weight:900;letter-spacing:.1em}
.sound-control output,.mix-control output{color:var(--acid)}
input[type="range"]{width:100%;height:4px;margin:0;appearance:none;background:#303831;border:0;border-radius:0;accent-color:var(--acid)}
input[type="range"]::-webkit-slider-thumb{width:14px;height:14px;appearance:none;background:var(--acid);border:3px solid #141a15;border-radius:50%;box-shadow:0 0 9px rgba(216,255,105,.45)}
.audition{display:flex;justify-content:center;gap:10px;align-items:center;width:100%;min-height:48px;margin-top:24px;color:#10130f;font-size:.69rem;font-weight:950;letter-spacing:.08em;background:var(--acid);border:0}
.audition i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid #10130f}
.audition kbd{margin-left:auto;padding:3px 5px;color:#4d5949;font:700 .55rem/1 var(--sans);background:rgba(0,0,0,.1);border:1px solid rgba(0,0,0,.2)}
.mixer{padding:23px;margin-bottom:36px}
.mixer>.panel-heading{margin-bottom:22px}
.mixer-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:24px;align-items:end}
.ambience-select select{margin-top:7px}
.mixer-footer{display:flex;justify-content:space-between;gap:25px;align-items:center;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.mixer-footer p{max-width:590px;margin:0;color:#7e887f;font-size:.68rem;line-height:1.55}
.mixer-footer p b{color:#aab4aa}
.actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.actions button,.actions a{display:grid;place-items:center;min-height:41px;padding:0 14px;color:#9ba49b;font-size:.65rem;font-weight:900;letter-spacing:.09em;text-decoration:none;background:#101511;border:1px solid #333b34}
.actions a{display:flex;gap:18px;color:var(--acid);border-color:#566849}
.actions a span{font-size:1rem}
@media(max-width:1100px){.studio-grid{grid-template-columns:240px 1fr}
.editor-panel{grid-column:1/-1;min-height:0}
.recipe-list{grid-template-columns:repeat(4,1fr)}
.control-list{grid-template-columns:repeat(3,1fr)}
.audition{max-width:420px}
.mixer-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){.lab-shell{padding-inline:10px}
.lab-header{grid-template-columns:1fr auto;min-height:60px}
.save-state{display:none}
.brand span{display:block}
.brand strong,.brand b{display:block;font-size:.82rem}
.power{padding:9px;font-size:.58rem}
.hero{grid-template-columns:1fr;gap:25px;padding:45px 5px 38px}
.hero h1{font-size:clamp(3rem,16vw,5.2rem)}
.intro{font-size:.98rem}
.studio-grid{display:block;border-top:1px solid var(--line)}
.studio-grid>.panel{min-height:0;padding:18px}
.preset-list{grid-template-columns:repeat(2,1fr)}
.scope{min-height:180px}
.sound-pads{grid-template-columns:1fr}
.recipe-list{grid-template-columns:repeat(2,1fr)}
.control-list{grid-template-columns:1fr}
.mixer{padding:18px}
.mixer-grid{grid-template-columns:1fr}
.mixer-footer{display:block}
.actions{margin-top:18px}
.actions>*{flex:1}
.preset-card.active::after{display:none}
}
@media(max-width:420px){.preset-list{grid-template-columns:1fr}
.hero h1{font-size:3.15rem}
.actions{display:grid}
.sound-pad{min-height:58px}
}
.ambience-info{display:grid;grid-template-columns:auto 1fr;gap:8px 10px;align-items:start;margin-top:8px}
.ambience-info b{padding:4px 6px;color:var(--ink);font-size:.55rem;letter-spacing:.1em;background:var(--mint)}
.ambience-info span{color:#7e887f;font-size:.63rem;line-height:1.35}
.preset-panel{background:radial-gradient(circle at 10% 12%,rgba(216,255,105,.045),transparent 28rem),var(--panel)}

/* Collapsible per-game studio */
.hero{padding:clamp(34px,5vw,68px) 0 clamp(28px,4vw,48px)}
.scope-dock{position:sticky;top:8px;z-index:10;min-height:170px;margin:0 0 12px;background:radial-gradient(circle at 50% 50%,rgba(216,255,105,.08),transparent 58%),rgba(7,10,8,.94);border-color:#364038;box-shadow:0 18px 48px rgba(0,0,0,.35);backdrop-filter:blur(16px)}
.scope-dock .scope-copy{left:clamp(14px,2.3vw,28px);bottom:18px}
.module-stack{display:grid;gap:8px;border-top:1px solid var(--line)}
.lab-module{overflow:hidden;background:linear-gradient(145deg,rgba(255,255,255,.018),transparent 48%),var(--panel);border:1px solid var(--line);border-top:0}
.lab-module>summary{display:grid;grid-template-columns:44px 1fr auto;align-items:center;min-height:76px;padding:0 clamp(16px,2.4vw,28px);cursor:pointer;list-style:none;transition:background .18s ease}
.lab-module>summary::-webkit-details-marker{display:none}.lab-module>summary:hover{background:rgba(216,255,105,.025)}
.lab-module>summary>span{display:grid;place-items:center;width:31px;height:31px;color:var(--acid);font-size:.68rem;font-weight:850;border:1px solid #435042;border-radius:50%}
.lab-module>summary div{display:grid;gap:4px}.lab-module>summary small{color:var(--muted);font-size:.58rem;font-weight:900;letter-spacing:.16em}.lab-module>summary strong{font:400 1.45rem/1 var(--serif)}
.lab-module>summary>i{color:var(--mint);font-style:normal;font-size:1.1rem;transition:transform .2s ease}.lab-module[open]>summary>i{transform:rotate(180deg)}
.module-content{padding:0 clamp(16px,2.4vw,28px) clamp(20px,3vw,32px);border-top:1px solid #222a24;animation:module-open .24s ease}
.game-label{display:grid;grid-template-columns:auto minmax(170px,260px);gap:14px;align-items:center;justify-content:end;margin:14px 0 22px;color:#879188;font-size:.6rem;font-weight:900;letter-spacing:.14em}
.game-label select,.select-label select{width:100%;height:42px;padding:0 35px 0 11px;color:var(--paper);font-weight:850;background:#101511;border:1px solid #354038}
.background-grid{display:grid;grid-template-columns:minmax(230px,1.25fr) minmax(200px,1fr) auto;gap:clamp(18px,3vw,40px);align-items:end}
.module-play{display:flex;gap:9px;align-items:center;justify-content:center;min-height:44px;padding:0 17px;color:var(--ink);font-size:.65rem;font-weight:950;letter-spacing:.08em;background:var(--acid);border:0}.module-play i{width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;border-left:8px solid currentColor}
.preset-list{grid-template-columns:repeat(3,minmax(0,1fr))}.preset-card.home::after{position:absolute;top:10px;right:10px;color:var(--preset-color);font-size:.52rem;font-weight:900;letter-spacing:.08em;content:'HOME'} .preset-card.active::after{content:'ACTIVE'}
.sound-pads{grid-template-columns:repeat(4,minmax(0,1fr))}.editor-grid{display:grid;grid-template-columns:minmax(210px,.7fr) minmax(340px,1.3fr);gap:18px 28px}.editor-grid>.game-label{grid-column:1/-1}.editor-grid>.recipe-field{margin-top:0}.editor-grid>.control-list{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:4px}.editor-grid>.audition{grid-column:1/-1;max-width:520px;margin:4px auto 0}
.mix-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,60px)}.mixer-footer{margin-top:24px}.mixer-footer .actions{flex-wrap:wrap}.mixer-footer .actions a{min-width:190px}
input[type=range]:disabled,select:disabled{cursor:not-allowed;opacity:.42}
@keyframes module-open{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:none}}
@media(max-width:960px){.sound-pads{grid-template-columns:repeat(2,minmax(0,1fr))}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.background-grid{grid-template-columns:1fr 1fr}.background-grid .module-play{grid-column:1/-1}.editor-grid{grid-template-columns:1fr}.editor-grid>*{grid-column:1!important}}
@media(max-width:720px){.scope-dock{top:5px;min-height:132px}.game-label{grid-template-columns:1fr;justify-content:stretch;gap:7px}.background-grid,.mix-grid{grid-template-columns:1fr}.background-grid .module-play{grid-column:auto}.preset-list,.sound-pads{grid-template-columns:1fr}.editor-grid>.control-list{grid-template-columns:1fr}.lab-module>summary{min-height:68px;grid-template-columns:38px 1fr auto}.lab-module>summary strong{font-size:1.22rem}.mixer-footer{display:grid}.actions{justify-content:stretch}.actions>*{flex:1 1 100%}}