:root{color-scheme:dark;font-family:Segoe UI,Arial,sans-serif;background:#101116;color:#f3f2f8}*{box-sizing:border-box}body{margin:0}a{color:inherit;text-decoration:none}button,input,textarea,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit;border:1px solid #ffffff20;background:#252631;border-radius:12px;padding:11px 16px}button:hover{border-color:#c8bbff;transform:translateY(-1px)}button:disabled{opacity:.5;cursor:not-allowed;transform:none}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #c4acff;outline-offset:4px}[hidden]{display:none!important}.rail{position:fixed;inset:0 auto 0 0;width:214px;background:#0c0d12;border-right:1px solid #ffffff0c;padding:32px 24px;display:flex;flex-direction:column}.brand{display:flex;gap:12px;align-items:center;font-size:40px;color:#bfadff}.brand span{font-size:20px;line-height:1.1;font-weight:750;color:#f8f7ff}.rail-label{font-size:9px;letter-spacing:1.5px;color:#767586;margin:54px 0 15px}.nav{padding:13px 12px;font-size:13px;color:#a5a4b4;border-radius:10px;margin-bottom:5px}.nav.active{background:#262033;color:#dacfff}.rail-bottom{margin-top:auto;color:#a09bac;font-size:12px;line-height:1.8}.rail-bottom span{font-size:10px;color:#5d5c70}.shell{margin-left:214px}header{padding:26px 42px;border-bottom:1px solid #ffffff09;display:flex;justify-content:space-between;align-items:center}.breadcrumb{font-size:10px;letter-spacing:2px;color:#8c899e}.badge{font-size:9px;letter-spacing:1.5px;border:1px solid #3d354f;color:#c9b3ee;border-radius:20px;padding:7px 10px}main{max-width:1120px;padding:32px 42px 120px;margin:auto}.hero{display:flex;align-items:center;justify-content:space-between;min-height:230px}.eyebrow{font-size:9px;letter-spacing:2.2px;color:#b09acc;font-weight:700}h1{font-size:clamp(38px,4.5vw,64px);line-height:1.05;letter-spacing:-2px;margin:18px 0}h1 em{font-style:normal;background:linear-gradient(90deg,#e4b6ff,#a7baff);background-clip:text;color:transparent}.hero p{font-size:14px;color:#9995aa}.orb{width:220px;height:220px;position:relative;display:grid;place-items:center;isolation:isolate}.orb-core{position:absolute;inset:30px;border-radius:50%;background:radial-gradient(circle at 30% 25%,#eecbff,#9170dc 30%,#2c3a8f 65%,#171727);box-shadow:inset -15px -20px 30px #111323,0 0 70px #8468d52a}.orb-ring{position:absolute;inset:8px;border:1px solid #b79de65c;border-radius:50%;transform:rotate(-32deg) scaleY(.42);box-shadow:0 0 25px #8065ff25;z-index:2}.orb span{z-index:3;font-size:76px;color:#ffffffbd}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.tool-card{display:flex;text-align:left;align-items:center;gap:12px;padding:16px;background:#181922;min-height:90px}.tool-card.selected{border-color:#a68bd8;background:#272034;box-shadow:0 0 28px #8e66bd12}.tool-card strong{display:block;font-size:13px}.tool-card small{display:block;font-size:10px;color:#a29baa;margin-top:6px;line-height:1.5}.card-art{display:grid;place-items:center;width:42px;height:48px;border-radius:10px;font-size:27px;flex-shrink:0;background:linear-gradient(140deg,#cf89df,#403688);box-shadow:inset 0 1px #ffffff35}.forest .card-art{background:linear-gradient(140deg,#8ab895,#1e4940)}.sunset .card-art{background:linear-gradient(140deg,#e2a570,#8c4262)}.card-arrow{margin-left:auto;color:#a393ba}.composer{border:1px solid #5b486b;border-radius:20px;background:linear-gradient(125deg,#24212e,#1a1b24);box-shadow:0 18px 50px #0002;padding:22px 24px}.composer-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}.composer h2{font-size:14px;font-weight:550;margin:0}#allowance{font-size:10px;color:#a59bb6}textarea{width:100%;min-height:105px;padding:20px 0 12px;resize:vertical;background:transparent;border:none;color:#efebf9;line-height:1.6;font-size:17px}textarea::placeholder{color:#797183}.composer-bottom{display:flex;justify-content:space-between;align-items:center;gap:15px}.length{display:flex;align-items:center;gap:8px;font-size:10px;color:#9891a6}.length label{color:#b4adc3}select{border:1px solid #494252;background:#24212e;color:#eee7f8;border-radius:9px;padding:9px;font-size:11px}#generate{background:linear-gradient(110deg,#c6a5f9,#9eaff9);color:#20152d;font-weight:750;font-size:12px;padding:12px 20px;border:0;box-shadow:0 4px 18px #b78df422}#generate span{margin-left:14px}.status-row{display:flex;gap:8px;align-items:center;border-top:1px solid #ffffff0a;margin-top:18px;padding-top:12px}.status-dot{width:5px;height:5px;border-radius:50%;background:#ad91d6}#notice{margin:0;font-size:10px;color:#b5a8c8;line-height:1.6}.provider{margin-left:auto;font-size:9px;color:#716a80;white-space:nowrap}.access{margin-top:15px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#171720;padding:14px;border-radius:12px;font-size:11px}.access input{min-width:180px;flex:1;border:1px solid #3f354e;border-radius:8px;background:#101116;color:white;padding:10px}.access button{font-size:11px}.access p{width:100%;margin:0;color:#f0b4b4}.inspiration-heading{display:flex;justify-content:space-between;align-items:center;margin:30px 0 14px}.inspiration-heading h2{font-size:15px}.inspiration-heading button{font-size:10px;background:transparent;border:none;color:#b6a9cb}.ideas{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.idea{position:relative;overflow:hidden;min-height:150px;text-align:left;padding:22px;border-radius:16px;isolation:isolate;background:#292132}.idea:before{content:'';position:absolute;width:140px;height:140px;border-radius:50%;right:-25px;top:-20px;z-index:-1;background:repeating-radial-gradient(ellipse at center,#b1a1ec45 0 1px,transparent 2px 13px);transform:rotate(30deg) scaleX(.75)}.idea.violet{background:linear-gradient(120deg,#33264c,#252846)}.idea.green{background:linear-gradient(120deg,#233d36,#14282a)}.idea.orange{background:linear-gradient(120deg,#543531,#31232d)}.idea span{display:block;color:#d7cce988;font-size:8px;letter-spacing:1.7px}.idea strong{display:block;margin-top:40px;font-size:17px}.idea small{display:block;font-size:10px;color:#c4b8cf;margin-top:7px}.library{margin-top:35px}.library-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:15px}.library-heading h2{font-size:24px;margin:6px 0}.library-heading button{font-size:10px}.empty{border:1px dashed #36303f;border-radius:14px;padding:25px;color:#888194;font-size:13px}#results{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.result{display:flex;align-items:center;gap:15px;border:1px solid #ffffff0b;border-radius:14px;background:#191921;padding:16px}.art{height:72px;width:72px;flex-shrink:0;display:grid;place-items:center;border-radius:10px;background:radial-gradient(circle at 30% 20%,#ccabec,#675693 50%,#282641);color:#f1ddff;font-size:30px}.result:nth-child(even) .art{background:radial-gradient(circle at 30% 20%,#b5d9b8,#527e77 50%,#243439)}.result-body{min-width:0;flex:1}.result h3{font-size:13px;margin:0 0 6px}.result p{font-size:10px;line-height:1.5;color:#948ba1;margin:5px 0;overflow-wrap:anywhere}.result button{font-size:10px;padding:7px 11px;background:#30273f;border-radius:20px}.result a{font-size:10px;color:#bdabd5;margin-left:12px}.result.pending .art{animation:breathe 2s ease-in-out infinite}.result.pending{border-color:#72598c}details{margin-top:20px;color:#888093;font-size:11px}summary{cursor:pointer}#history-results .result{margin-top:10px}.disclosure{font-size:9px;color:#6f677b;margin-top:35px}footer{display:flex;justify-content:space-between;font-size:10px;color:#777080;border-top:1px solid #ffffff0b;padding-top:20px;margin-top:20px}.player-dock{position:fixed;bottom:0;left:214px;right:0;padding:16px 35px;background:#17151ff2;backdrop-filter:blur(18px);border-top:1px solid #76628250;display:flex;align-items:center;gap:18px;z-index:10}.mini-art{height:42px;width:42px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(120deg,#8b68ad,#3c4a8b);font-size:25px}.now{width:200px;min-width:0}.now small{font-size:8px;letter-spacing:1.5px;color:#a993c0;display:block}.now strong{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:5px}#play-toggle{border-radius:50%;width:38px;height:38px;padding:0;background:#c4a9e8;color:#201329}#seek{flex:1;min-width:50px;accent-color:#b69bdd}#player-time,#player-download{font-size:10px;color:#b4a7c0}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}@keyframes breathe{50%{opacity:.5;transform:scale(.96)}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}@media(max-width:1050px){.rail{width:175px;padding:28px 16px}.shell{margin-left:175px}.player-dock{left:175px}.tool-card{padding:12px;gap:8px}.card-art{width:32px;height:38px;font-size:22px}.tool-card small{font-size:9px}.orb{width:180px;height:180px}main{padding:25px 28px 120px}.card-arrow{display:none}}@media(max-width:720px){.rail{position:static;width:100%;flex-direction:row;align-items:center;padding:18px;gap:15px;border-bottom:1px solid #ffffff0d}.brand{font-size:28px}.brand span{font-size:14px}.rail-label,.rail-bottom,.nav:not(.active){display:none}.nav{margin:0 0 0 auto;font-size:11px;padding:8px}.shell{margin:0}header{padding:17px 20px}.breadcrumb{font-size:8px}.badge{font-size:7px}main{padding:20px 20px 125px}.hero{min-height:175px}.orb{width:110px;height:130px}.orb-core{inset:20px 5px}.orb-ring{inset:5px -5px}.orb span{font-size:42px}h1{font-size:36px;letter-spacing:-1px}.hero p{font-size:11px;max-width:210px}.eyebrow{font-size:7px}.tool-grid{gap:6px}.tool-card{display:block;padding:12px 9px;min-height:120px}.card-art{margin-bottom:10px}.tool-card strong{font-size:10px}.tool-card small{font-size:8px}.composer{padding:18px 15px}.composer-heading{align-items:flex-start;flex-direction:column;gap:7px}textarea{font-size:14px;min-height:110px}.length>span,.provider{display:none}.ideas{gap:8px}.idea{padding:14px 10px;min-height:145px}.idea strong{font-size:13px;line-height:1.3;margin-top:35px}.idea small{font-size:8px;line-height:1.5}.inspiration-heading h2{font-size:13px}.inspiration-heading button{font-size:9px;padding:8px 0}#results{grid-template-columns:1fr}.player-dock{left:0;padding:12px;gap:10px}.now{width:110px}.mini-art{display:none}#player-download{font-size:9px}#player-time{display:none}}
.editor{margin-top:28px}.editor-help,#edit-status{font-size:11px;color:#aaa0b8;line-height:1.7}.file-label{display:inline-block;border:1px solid #67537b;border-radius:10px;padding:10px 14px;font-size:12px;cursor:pointer}.file-label input{display:block;font-size:10px;margin-top:8px;max-width:100%}#waveform{display:block;width:100%;height:85px;margin:18px 0;background:#14131c;border-radius:10px}fieldset{border:0;padding:0;margin:18px 0}.edit-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px}.edit-grid label{font-size:10px;color:#b4a6c3}.edit-grid input,.edit-grid select{display:block;margin-top:7px;width:100%;padding:10px;background:#16141e;border:1px solid #4e3b61;border-radius:8px;color:#eee}.edit-actions{display:flex;flex-wrap:wrap;align-items:center;gap:15px;margin-top:20px;font-size:11px}.edit-actions button{font-size:11px}#edit-preview{width:100%;margin:12px 0}#edit-download{font-size:12px;color:#ceb5ed}.result-body>button{margin:3px}fieldset:disabled{opacity:.4}@media(max-width:720px){.edit-grid{grid-template-columns:repeat(2,1fr)}}

:root[data-theme="light"]{color-scheme:light;background:#f6f3fa;color:#252235}html[data-theme="light"] .rail{background:#eee8f5;border-color:#d4cbdf}html[data-theme="light"] .brand span{color:#252235}html[data-theme="light"] .brand{color:#634489}html[data-theme="light"] .nav{color:#50465e}html[data-theme="light"] .nav.active{background:#ded2ed;color:#452f61}html[data-theme="light"] .composer,html[data-theme="light"] .result,html[data-theme="light"] .empty{background:#fff;border-color:#ddd3e8}html[data-theme="light"] button{background:#eee7f6;color:#35234a;border-color:#cfc2de}html[data-theme="light"] textarea,html[data-theme="light"] input,html[data-theme="light"] select,html[data-theme="light"] .edit-grid input,html[data-theme="light"] .edit-grid select{background:#fff;color:#252235;border-color:#bcaacb}html[data-theme="light"] .hero p,html[data-theme="light"] .editor-help,html[data-theme="light"] #edit-status,html[data-theme="light"] .edit-grid label,html[data-theme="light"] .breadcrumb,html[data-theme="light"] .rail-label,html[data-theme="light"] .rail-bottom,html[data-theme="light"] .disclosure{color:#655872}html[data-theme="light"] h1 em{background:linear-gradient(90deg,#8849aa,#435da5);background-clip:text}html[data-theme="light"] .badge{color:#674187}html[data-theme="light"] header{border-color:#dbd0e5}html[data-theme="light"] .player-dock{background:#eee6f7;color:#292237}html[data-theme="light"] #waveform{background:#e9e1f1}
html[data-theme="light"] .tool-card.selected{background:#e4d7f2;border-color:#9871bd;box-shadow:0 0 0 1px #9871bd}html[data-theme="light"] .tool-card strong{color:#30203f}html[data-theme="light"] .tool-card small{color:#665971}html[data-theme="light"] .composer-heading h2,html[data-theme="light"] .result h3{color:#30203f}
.composer-heading{flex-wrap:wrap;align-items:flex-start}.composer-heading h2{min-width:0;max-width:100%;line-height:1.5;white-space:normal;overflow-wrap:break-word}.composer-heading>span{max-width:100%;line-height:1.5}#composer-title{flex:1 1 260px}#prompt{display:block}@media(max-width:720px){#composer-title{flex:0 1 auto}}

#prompt{margin-top:12px;padding:14px 12px;border-radius:10px}#prompt:focus-visible{outline:2px solid #c4acff;outline-offset:-2px}#playground,#library{scroll-margin-top:24px}@media(max-width:720px){.rail .nav[data-section]{display:block;margin:0;padding:8px}.rail{flex-wrap:wrap}.rail .brand{margin-right:auto}}
.mix-layer{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:16px 0;border-bottom:1px solid #89769a40}.mix-layer strong{flex:1 1 180px;font-size:12px;overflow-wrap:anywhere}.mix-layer label{font-size:11px}.mix-layer input{display:block;width:110px;margin-top:5px;padding:8px;border-radius:8px}.mix-layer button,#mix-render{font-size:12px}#mix-render{margin-top:16px}#waveform{cursor:crosshair}

.workspace-nav{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}.workspace-nav a{padding:9px 14px;border:1px solid #8e779d55;border-radius:20px;font-size:12px}.workspace-nav a:hover{background:#9270bb25}.ai-tools{color:inherit}.ai-tools summary{font-size:15px;font-weight:600}.ai-tools summary span{display:block;font-size:11px;font-weight:400;opacity:.7;margin-top:7px}.ai-tools form{margin-top:20px}.ai-tools textarea{border:1px solid #8e779d55;border-radius:10px;padding:12px;margin:8px 0 16px;min-height:75px}.ai-tools label{font-size:12px}.ai-tools #ai-lyrics{min-height:65px}.ai-tools:target,.mix-panel:target{scroll-margin-top:24px}

.mix-base-label{display:block;margin-top:16px;font-size:12px}.mix-base-label input{display:block;width:110px;margin-top:6px;padding:8px;border:1px solid #8e779d55;border-radius:8px}
.result-body>a{display:inline-block;margin:4px 6px 4px 0;line-height:1.6}.result-body>button{margin:4px 6px 4px 0}html[data-theme="light"] .result a{color:#684980}@media(max-width:1100px){#results{grid-template-columns:1fr}}

/* Mixing essentials: inherited theme colors, visible labels and native keyboard sliders. */
.mix-console{margin:24px 0;padding:22px;border:1px solid #9d83c454;border-radius:18px;background:linear-gradient(135deg,#9270bb12,#6e75cc0b)}
.console-title{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.console-title h3{font-size:23px;margin:8px 0}.console-title label,.peak-option{font-size:12px;line-height:1.7}
.console-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 26px;margin:22px 0}
.console-control{display:block;min-width:0;font-size:12px}.console-control>span{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;line-height:1.5}.console-control output{font-variant-numeric:tabular-nums;color:#d7bfff}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]{display:block;width:100%;min-width:0;accent-color:#a98bd0;margin:14px 0 0;padding:0;min-height:24px}
.console-control input:focus-visible,.fine-eq summary:focus-visible{outline:2px solid #c4acff;outline-offset:4px}.fine-eq{border-top:1px solid #9d83c454;padding-top:18px}.fine-eq summary{cursor:pointer;font-size:13px}.peak-option{display:block;margin-top:20px}
.render-meter{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;margin:18px 0}.render-meter meter{width:150px;max-width:100%}.render-meter span{font-variant-numeric:tabular-nums}
html[data-theme=light] .console-control output{color:#684580}html[data-theme=light] .mix-console{border-color:#c8b9db;background:#f7f3fb}html[data-theme=light] .console-control input{accent-color:#765297}
@media(max-width:720px){.mix-console{padding:16px}.console-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 16px}}@media(max-width:400px){.console-grid{grid-template-columns:1fr}}

.fine-eq summary{color:inherit;opacity:1}html[data-theme=light] .mix-console .eyebrow{color:#684580}

/* Polished alloy surfaces, scoped to the Playground. */
.composer.editor{background:linear-gradient(135deg,#41414f 0%,#262632 12%,#191923 52%,#272534 100%);border:1px solid #74717e;box-shadow:inset 0 1px 0 #ffffff66,inset 0 -1px 0 #0009,0 18px 45px #0005;color:#f6f3ff}
.mix-console{position:relative;background:linear-gradient(155deg,#686673 0%,#35333f 8%,#25232f 32%,#191922 54%,#383342 100%);border:1px solid #99909e;border-radius:20px;box-shadow:inset 0 2px 1px #ffffff70,inset 0 -2px 2px #000b,0 12px 25px #0005;padding:26px}
.console-title h3{letter-spacing:-.5px;text-shadow:0 2px 2px #0009}.mix-console .eyebrow{color:#e4caff;letter-spacing:3px}
.console-control{padding:15px 14px 12px;border:1px solid #777080;border-radius:12px;background:linear-gradient(165deg,#50495788,#25222e 45%,#15151d);box-shadow:inset 0 1px 0 #ffffff25,0 3px 6px #0005;color:#f8f2ff}
.console-control output{min-width:53px;text-align:right;border:1px solid #68616f;border-radius:5px;padding:2px 6px;background:#101018;color:#ebd7ff;box-shadow:inset 0 2px 4px #000a;font:11px/1.5 Consolas,monospace}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;border:0;min-height:36px;margin-top:12px;cursor:ew-resize;box-shadow:none;padding:0}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]::-webkit-slider-runnable-track{height:8px;border-radius:8px;border:1px solid #77717f;background:linear-gradient(#09090f,#393040);box-shadow:inset 0 2px 3px #000,0 1px 0 #ffffff25}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:28px;height:32px;margin-top:-13px;border:1px solid #e1d6e9;border-radius:7px;background:linear-gradient(90deg,transparent 45%,#70409e 45%,#bd8eeb 55%,transparent 55%),linear-gradient(#fff 0%,#b9b7c2 24%,#f8f4ff 45%,#73717f 49%,#bcb9c8 75%,#e6e2ed 100%);box-shadow:0 3px 7px #000b,inset 1px 0 0 #fff9,inset -1px 0 0 #0006}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]::-moz-range-track{height:8px;border-radius:8px;border:1px solid #77717f;background:linear-gradient(#09090f,#393040);box-shadow:inset 0 2px 3px #000}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]::-moz-range-thumb{width:28px;height:32px;border:1px solid #e1d6e9;border-radius:7px;background:linear-gradient(90deg,transparent 45%,#70409e 45%,#bd8eeb 55%,transparent 55%),linear-gradient(#fff,#aaa8b5 24%,#f8f4ff 45%,#73717f 49%,#e6e2ed);box-shadow:0 3px 7px #000b}
.editor button,.editor .file-label{background:linear-gradient(#74707f,#474150 46%,#2c2735 49%,#494051);border:1px solid #a396b6;color:#fff5ff;box-shadow:inset 0 1px 0 #fff7,0 3px 5px #0006;text-shadow:0 1px 2px #0009}
.editor button:hover:enabled{border-color:#e2c6ff;box-shadow:inset 0 1px 0 #fff9,0 0 16px #b58aff44}
.editor #edit-render{background:linear-gradient(#e8d6ff,#b291db 46%,#74499b 49%,#9a70bf);color:#190d27;text-shadow:0 1px #fff6;font-weight:750}
.editor .editor-help,.editor .edit-grid label{color:#d7cfdf}.editor .edit-grid input,.editor .edit-grid select{background:linear-gradient(#111018,#24202c);border-color:#81738f;color:#fff5ff;box-shadow:inset 0 2px 5px #0008}
.editor fieldset:disabled{opacity:.62}.editor input:disabled{cursor:not-allowed}
#edit-status,#mix-status{padding:12px 15px;border:1px solid #756585;border-radius:10px;background:#14121d;color:#e4d8f1;min-height:44px;font-size:12px}
.processing-status{position:relative;overflow:hidden;display:flex;align-items:center;gap:10px}
.processing-status::before{content:'';width:15px;height:15px;flex:0 0 15px;border:2px solid #9c7abe;border-top-color:#fff;border-radius:50%;animation:processing-spin .8s linear infinite}
.processing-status::after{content:'';position:absolute;height:3px;bottom:0;left:0;width:35%;background:linear-gradient(90deg,transparent,#d8b9ff,transparent);animation:processing-sweep 1.5s ease-in-out infinite}
@keyframes processing-spin{to{transform:rotate(360deg)}}@keyframes processing-sweep{from{transform:translateX(-100%)}to{transform:translateX(390%)}}
html[data-theme=light] .composer.editor{background:linear-gradient(135deg,#fff,#d9d8e3 22%,#f1edf6 65%,#c9c4d3);color:#241b30;border-color:#99909f;box-shadow:inset 0 1px #fff,0 15px 35px #30203b20}
html[data-theme=light] .mix-console{background:linear-gradient(150deg,#fff,#ceccd7 15%,#ece8f1 48%,#b9b4c4 100%);border-color:#918797;box-shadow:inset 0 2px #fff,0 9px 20px #46315125}
html[data-theme=light] .console-control{background:linear-gradient(155deg,#fff,#d4cfde 45%,#f0edf5);border-color:#9b91a8;color:#2e203f;box-shadow:inset 0 1px #fff,0 3px 6px #35204420}
html[data-theme=light] .console-control output{background:#fdfaff;color:#442564;border-color:#9884aa;box-shadow:inset 0 2px 3px #30203b20}
html[data-theme=light] .console-title h3{text-shadow:0 1px #fff}html[data-theme=light] .mix-console .eyebrow{color:#5e387b}
html[data-theme=light] .editor button,html[data-theme=light] .editor .file-label{background:linear-gradient(#fff,#d7d1df 46%,#b2a8bf 49%,#ebe5f1);color:#2c193f;border-color:#9d8aac;text-shadow:0 1px #fff;box-shadow:inset 0 1px #fff,0 3px 5px #35204425}
html[data-theme=light] .editor #edit-render{background:linear-gradient(#ecd8ff,#c3a0e8 46%,#a579c8 49%,#d7b6f3);color:#271036}
html[data-theme=light] .editor .editor-help,html[data-theme=light] .editor .edit-grid label{color:#4e3a61}
html[data-theme=light] .editor .edit-grid input,html[data-theme=light] .editor .edit-grid select{background:linear-gradient(#e2dce9,#fff);color:#2b1b38;border-color:#a796b6;box-shadow:inset 0 2px 4px #36204420}
html[data-theme=light] #edit-status,html[data-theme=light] #mix-status{background:#f8f3ff;color:#45275e;border-color:#a792ba}
html[data-theme=light] .processing-status::before{border-color:#c5a9dc;border-top-color:#572d7b}
@media(max-width:720px){.console-grid{gap:12px}.console-control{padding:12px 10px}.mix-console{padding:16px}}
@media(prefers-reduced-motion:reduce){.processing-status::before,.processing-status::after{animation:none}.processing-status::after{width:100%;background:#b78bdf}}

/* Mirror-polished chrome: reflected studio lights around dark readable faces. */
:root{--mirror:linear-gradient(125deg,#151820 0%,#7f8999 8%,#fff 13%,#e3e9f3 17%,#3d4654 24%,#080b12 34%,#c6d0e1 45%,#fff 48%,#222b3a 51%,#060910 65%,#8797b0 79%,#fff 88%,#bac5d7 92%,#252e3d 100%)}
.mix-console,html[data-theme=light] .mix-console{border:5px solid transparent;background:linear-gradient(145deg,#343e50,#0d111a 43%,#303b50) padding-box,var(--mirror) border-box;box-shadow:inset 0 0 0 1px #05070c,inset 0 2px 4px #c8d9fa55,0 1px 0 #fff9,0 12px 26px #0008;color:#f2f5ff}
.mix-console .eyebrow,html[data-theme=light] .mix-console .eyebrow{color:#d6c1ff}.console-title h3,html[data-theme=light] .console-title h3{text-shadow:0 2px 3px #000}
.console-control,html[data-theme=light] .console-control{border:3px solid transparent;background:linear-gradient(180deg,#151b28,#252e41) padding-box,var(--mirror) border-box;box-shadow:inset 0 1px 2px #000,0 3px 6px #0009;border-radius:12px;color:#fff}
.console-control>span{background:#111725e8;border-radius:5px;padding:4px 6px;align-items:center}
.console-control output,html[data-theme=light] .console-control output{background:#060a12;color:#e5d6ff;border-color:#59687d;box-shadow:inset 0 2px 3px #000}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]::-webkit-slider-thumb{background:linear-gradient(90deg,transparent 44%,#57257e 44%,#e9bfff 54%,transparent 54%),linear-gradient(100deg,#fff 0%,#6e6979 12%,#fff 23%,#d2ccd9 38%,#fff 45%,#5a5366 49%,#93899e 64%,#fff 83%,#70657e 100%);border-color:#fff;box-shadow:0 4px 6px #000b,inset 0 1px 0 #fff,0 0 7px #e3c6ff55}
:is(.console-control,.synth-panel,.mix-panel,.dj-panel,.drum-panel) input[type=range]::-moz-range-thumb{background:linear-gradient(90deg,transparent 44%,#57257e 44%,#e9bfff 54%,transparent 54%),linear-gradient(100deg,#fff 0%,#6e6979 12%,#fff 23%,#d2ccd9 38%,#fff 45%,#5a5366 49%,#93899e 64%,#fff 83%,#70657e 100%);border-color:#fff;box-shadow:0 4px 6px #000b,inset 0 1px 0 #fff,0 0 7px #e3c6ff55}
.editor button,.editor .file-label,html[data-theme=light] .editor button,html[data-theme=light] .editor .file-label{border:2px solid transparent;background:linear-gradient(#333b4d,#161c29) padding-box,var(--mirror) border-box;color:#fff;text-shadow:0 1px 2px #000;box-shadow:inset 0 1px 1px #b9c8df44,0 3px 5px #0006}
.editor #edit-render,html[data-theme=light] .editor #edit-render{background:linear-gradient(#57327e,#57327e) padding-box,var(--mirror) border-box;color:#fff;text-shadow:none;font-size:14px;font-weight:700;line-height:1.4;border:3px solid transparent;box-shadow:inset 0 1px 0 #b996d455,0 3px 6px #0006;padding:13px 20px}
.editor #edit-render:hover:enabled,html[data-theme=light] .editor #edit-render:hover:enabled{background:linear-gradient(#694091,#694091) padding-box,var(--mirror) border-box;color:#fff}
#render-feedback{position:fixed;z-index:100;bottom:24px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 32px);display:flex;align-items:center;gap:12px;background:linear-gradient(#554161,#20182d);color:#fff;border:1px solid #e2bcff;border-radius:14px;padding:18px 24px;box-shadow:0 6px 35px #000a,inset 0 1px #fff6;font-size:14px;pointer-events:none}
#render-feedback::before,.render-running::before{content:'';display:inline-block;width:18px;height:18px;flex:0 0 18px;border:3px solid #ffffff55;border-top-color:#fff;border-radius:50%;animation:processing-spin .7s linear infinite;will-change:transform}
.render-running::before{width:12px;height:12px;margin-right:8px;vertical-align:middle}.editor button.render-running:disabled{opacity:1}
@media(prefers-reduced-motion:reduce){#render-feedback::before,.render-running::before{animation:none}}

/* Approved mirror-chrome finish; optional perimeter light stays outside labels. */
@property --perimeter-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
:is(.mix-console,.composer){isolation:isolate;position:relative}
:is(.mix-console,.composer:not(.editor),.ai-tools[open],.mix-panel,.drum-panel)::after{content:'';position:absolute;inset:-6px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--perimeter-angle),transparent 0deg,transparent 245deg,#a275ff88 265deg,#6e8bff 280deg,#59d9ee 295deg,#7de7a8 307deg,#ffe48c 319deg,#ff8fac 333deg,#ca91ff 345deg,transparent 360deg);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;animation:perimeter-orbit 9s linear infinite;opacity:.85;z-index:1}
@keyframes perimeter-orbit{to{--perimeter-angle:360deg}}
@media(prefers-reduced-motion:reduce){:is(.mix-console,.composer:not(.editor),.ai-tools[open],.mix-panel,.drum-panel)::after{animation:none;opacity:.5}}

/* Approved shared instrument finish: generation, remix, editing and layering. */
.composer,html[data-theme=light] .composer{border:3px solid transparent;background:linear-gradient(145deg,#30394a,#131923 55%,#2a3446) padding-box,var(--mirror) border-box;color:#f2f5ff;box-shadow:inset 0 1px 2px #d6e1fa44,0 8px 24px #0005}
.composer .editor-help,.composer .edit-grid label,.composer .provider,.composer .length,.composer #allowance,html[data-theme=light] .composer .editor-help,html[data-theme=light] .composer .edit-grid label,html[data-theme=light] .composer .provider,html[data-theme=light] .composer .length,html[data-theme=light] .composer #allowance{color:#d1d9e8}
.composer h2,html[data-theme=light] .composer-heading h2{color:#f2f5ff}
.composer textarea,.composer input:not([type=range]):not([type=checkbox]):not([type=file]),.composer select,html[data-theme=light] .composer textarea,html[data-theme=light] .composer input:not([type=range]):not([type=checkbox]):not([type=file]),html[data-theme=light] .composer select{background:#111725;color:#f4f5ff;border-color:#8090a8;color-scheme:dark}
.composer textarea::placeholder{color:#aebbd0}.composer button,html[data-theme=light] .composer button{background:linear-gradient(#333b4d,#161c29) padding-box,var(--mirror) border-box;border:2px solid transparent;color:#fff}
.composer #generate,.composer #ai-generate,html[data-theme=light] .composer #generate,html[data-theme=light] .composer #ai-generate{background:linear-gradient(#57327e,#57327e) padding-box,var(--mirror) border-box;color:#fff}
.composer #edit-render,html[data-theme=light] .composer #edit-render{background:linear-gradient(#57327e,#57327e) padding-box,var(--mirror) border-box;border-width:3px;color:#fff}

.composer.editor,html[data-theme=light] .composer.editor{border:3px solid transparent;background:linear-gradient(145deg,#30394a,#131923 55%,#2a3446) padding-box,var(--mirror) border-box;color:#f2f5ff;box-shadow:inset 0 1px 2px #d6e1fa44,0 8px 24px #0005}
.composer.editor .edit-grid select,html[data-theme=light] .composer.editor .edit-grid select{background:#111725;color:#f4f5ff;border-color:#8090a8}
html[data-theme=light] .access{background:#eee8f5;color:#35234a}html[data-theme=light] .access .editor-help{color:#504260}

/* Spark cards retain distinct, readable colors in both themes. */
.idea.violet{background:linear-gradient(135deg,#49356a,#303f67)}
.idea.green{background:linear-gradient(135deg,#275b50,#254653)}
.idea.orange{background:linear-gradient(135deg,#744636,#57334f)}
.idea{color:#fff;border-color:#a6a0bb66}
.idea span{color:#e5dcf5;font-size:10px}
.idea strong{color:#fff}.idea small{color:#ebe4f3;font-size:12px;line-height:1.5}
html[data-theme=light] .idea.violet{background:linear-gradient(135deg,#eee1ff,#dce7ff)}
html[data-theme=light] .idea.green{background:linear-gradient(135deg,#dbf2e7,#dbeef5)}
html[data-theme=light] .idea.orange{background:linear-gradient(135deg,#ffead7,#f4ddec)}
html[data-theme=light] .idea{color:#252136;border-color:#9c90ac;box-shadow:inset 0 1px #fff,0 4px 12px #36234d14}
html[data-theme=light] .idea span{color:#51415f}
html[data-theme=light] .idea strong{color:#251b36}
html[data-theme=light] .idea small{color:#493c58}
html[data-theme=light] .idea::before{background:repeating-radial-gradient(ellipse at center,#78619833 0 1px,transparent 2px 13px)}
.idea:focus-visible{outline:3px solid #c4acff;outline-offset:4px}
html[data-theme=light] .idea:focus-visible{outline-color:#684094}


/* Compact metallic Spark tiles: chrome rims and readable inset faces. */
.idea{min-height:112px;padding:15px 18px;border:2px solid transparent;box-shadow:inset 0 1px #ffffff30,0 3px 9px #0004}
.idea.violet{background:linear-gradient(130deg,#424458,#252b40) padding-box,var(--mirror) border-box}
.idea.green{background:linear-gradient(130deg,#354f50,#23353e) padding-box,var(--mirror) border-box}
.idea.orange{background:linear-gradient(130deg,#604a47,#3d303f) padding-box,var(--mirror) border-box}
.idea strong{margin-top:19px;font-size:15px;line-height:1.3}
.idea small{font-size:11px;margin-top:5px}
.idea span{font-size:9px;letter-spacing:1.3px}
.idea::before{opacity:.45;width:105px;height:105px;right:-20px;top:-25px}
html[data-theme=light] .idea{border:2px solid transparent;box-shadow:inset 0 1px #fff,0 3px 9px #30203922}
html[data-theme=light] .idea.violet{background:linear-gradient(130deg,#f1f0f7,#c9ccdd) padding-box,var(--mirror) border-box}
html[data-theme=light] .idea.green{background:linear-gradient(130deg,#edf4f1,#bdcfd0) padding-box,var(--mirror) border-box}
html[data-theme=light] .idea.orange{background:linear-gradient(130deg,#f7efeb,#d8c5cd) padding-box,var(--mirror) border-box}
@media(max-width:720px){.idea{min-height:116px;padding:12px 10px}.idea strong{font-size:13px;margin-top:16px}.idea small{font-size:10px}.idea span{font-size:8px;letter-spacing:1px}}


/* Working instrument module uses the approved chrome panel system. */
.synth-panel{scroll-margin-top:24px}:is(.synth-panel,.dj-panel)::after{content:'';position:absolute;inset:-4px;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--perimeter-angle),transparent 245deg,#a275ff,#59d9ee,#ffe48c,#ff8fac,transparent);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:perimeter-orbit 9s linear infinite}
.synth-keys{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:5px;margin:22px 0}.synth-keys button{min-height:80px!important;background:linear-gradient(100deg,#e3e7ef,#fff 30%,#929caa 95%)!important;color:#151b28!important;border:1px solid #fff!important;text-shadow:none!important;border-radius:5px 5px 10px 10px;font-weight:700;padding:8px 3px}.synth-keys button:active{background:#b7a0e4!important}
.synth-steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}.synth-steps label{font-size:11px;color:#d1d9e8}.synth-steps select{display:block;width:100%;padding:8px 2px;margin-top:5px;border-radius:6px;border:1px solid #8090a8}.synth-steps label.playing{color:#fff;outline:2px solid #b992ff;border-radius:6px;box-shadow:0 0 12px #b992ff66}
#synth-status{font-size:12px;line-height:1.6;color:#e1d6f5;margin:16px 0}#synth-preview{width:100%}#synth-download{color:#e1c8ff;font-size:12px}.synth-panel h3{font-size:16px}
@media(max-width:720px){.synth-steps{grid-template-columns:repeat(4,minmax(0,1fr))}.synth-keys button{min-height:65px!important}.synth-panel .edit-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(prefers-reduced-motion:reduce){:is(.synth-panel,.dj-panel)::after{animation:none}}

html[data-theme=light] .synth-panel input[type=range]{background:transparent;border:0;box-shadow:none}

.mix-panel input[type=range]{accent-color:#ba9fec;min-height:32px}.mix-panel output,.synth-panel output{display:block;font-size:11px;color:#e0d4f4;margin:4px 0 12px}.mix-base-label{display:inline-block;margin-right:20px}html[data-theme=light] .mix-panel output{color:#e0d4f4}

html[data-theme=light] .mix-panel input[type=range]{background:transparent;border:0;box-shadow:none}

.effects-rack{margin:20px 0;padding-top:18px;border-top:1px solid #ffffff30}.effects-rack>label{display:block;margin:14px 0}.effects-rack .console-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}

.dj-panel{margin-top:24px}.dj-decks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.dj-deck{min-width:0;padding:16px;border:2px solid transparent;border-radius:16px;background:linear-gradient(130deg,#28313e,#111722) padding-box,var(--mirror) border-box}.dj-deck canvas{width:100%;height:100px;background:#0b101b;border-radius:8px;cursor:crosshair}.dj-deck fieldset{border:0;padding:0;margin:12px 0}.dj-deck input[type=range],.dj-cross input{display:block;width:100%;padding:0;min-height:32px;accent-color:#bc9bed}.dj-deck output,.dj-cross output{display:block;color:#e8dcff;font-size:12px}.dj-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.dj-deck label,.dj-cross{font-size:12px}.dj-deck p{overflow-wrap:anywhere}.dj-cross{display:block;margin:22px 0;max-width:500px}.dj-panel #dj-status{color:#eadfff}@media(max-width:800px){.dj-decks{grid-template-columns:1fr}}

html[data-theme=light] .dj-panel input[type=range]{background:transparent;border:0;box-shadow:none}.dj-panel input[type=range]{background:transparent;border:0;box-shadow:none}

.dj-recorder{border-top:1px solid #ffffff35;margin-top:24px;padding-top:20px}.dj-recorder audio{display:block;width:100%;margin:14px 0}.dj-recorder meter{width:min(350px,70%);margin:10px}.dj-recorder #dj-record-status{color:#eadeff}.dj-recorder [data-recording=true]{color:#ffc4da}.dj-recorder a{color:#e5c7ff;text-decoration:underline}

/* DJ performance controls retain the approved mirror-metal material in both themes. */
.dj-performance{margin:16px 0;padding-top:4px;border-top:1px solid #ffffff30}.dj-performance h4{font-size:13px;letter-spacing:.06em;margin:20px 0 10px;color:#f0eaff}
.dj-loop-fields{display:grid;grid-template-columns:1fr 1fr;gap:10px}.dj-performance input[type=number]{display:block;width:100%;min-width:0;margin-top:5px;padding:8px;background:#111825!important;color:#f3efff!important;border:1px solid #8e9bb5!important;border-radius:7px}
.dj-tempo{display:block;max-width:155px;margin:12px 0}.dj-beats,.dj-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:12px 0}
.dj-performance .dj-beats button,.dj-performance .dj-pads button{padding:10px 3px;font-size:11px;min-width:0}.dj-pads button small{display:block;font-size:10px;margin-top:6px}.dj-pads button.saved{outline:2px solid #bda2f3;outline-offset:1px}
.dj-jog-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:15px;align-items:center;margin:18px 0}.dj-jog-row .dj-jog{width:110px;height:110px;min-height:110px;padding:0;border-radius:50%;border:3px solid #dae1ec!important;background:repeating-radial-gradient(circle,transparent 0 5px,#151f3533 6px 7px),conic-gradient(#8590a5,#fff 12%,#59667b 25%,#e5edfa 42%,#6e7c94 54%,#fff 69%,#525e73 84%,#8590a5)!important;box-shadow:inset 0 0 0 4px #182130,0 6px 12px #0008;touch-action:none;user-select:none;cursor:grab}
.dj-jog span{display:grid;place-content:center;width:50px;height:50px;margin:auto;border-radius:50%;background:#172030;color:#f5efff!important;font-size:11px;text-shadow:none!important;border:1px solid #ffffff80}
.dj-jog.jogging{cursor:grabbing;outline:2px solid #d2b3ff}.dj-jog:focus-visible{outline:3px solid #aef1e7;outline-offset:4px}.dj-jog-row .editor-help{font-size:11px;line-height:1.5}

.dj-fx{margin:18px 0;padding:16px;border:2px solid transparent;border-radius:13px;background:linear-gradient(125deg,#374255,#141c29 60%,#263044) padding-box,var(--mirror) border-box;box-shadow:inset 0 1px #ffffff70,0 5px 15px #0004}
.dj-fx-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}.dj-fx h4{margin:0;color:#f3ecff;font-size:13px;letter-spacing:.12em}.dj-fx h4 span{font-weight:400;letter-spacing:0;font-size:11px;color:#d7cbea;margin-left:8px}
.dj-fx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.dj-fx-grid>label:first-child{grid-column:1/-1}.dj-fx label{min-width:0;color:#eee7fc!important}.dj-fx .editor-help{font-size:11px;line-height:1.5;color:#d8dbea!important}.dj-fx output{min-height:18px;color:#eddaff!important}.dj-fx [role=status]{color:#dfcdfa;font-size:11px}.dj-fx .edit-actions{align-items:center;margin-top:12px}

.dj-sampler{padding:20px;margin:20px 0;border:2px solid transparent;border-radius:16px;background:linear-gradient(130deg,#30394b,#141b28) padding-box,var(--mirror) border-box}.dj-sound-pads{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:18px 0}.dj-sound-pads>div{min-width:0}.dj-sound-pads button[id^=dj-sound-]:not(.dj-pad-reset){width:100%;min-height:90px;display:flex;flex-direction:column;gap:8px;align-items:center;justify-content:center}.dj-sound-pads span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}.dj-sound-pads strong{font-size:20px}.dj-sound-pads .playing{outline:2px solid #dfafff;box-shadow:0 0 20px #b96cff77!important}.dj-pad-load{display:block;font-size:11px;margin-top:10px;color:#e4d9f5}.dj-pad-load input{width:100%;min-width:0;padding:3px;font-size:10px}.dj-sound-pads .dj-pad-reset{padding:4px 8px;font-size:10px;margin-top:5px}.dj-performance-actions{display:flex;flex-wrap:wrap;align-items:end;gap:8px;margin:16px 0}.dj-performance-actions select{display:block;padding:7px;margin-top:5px}.dj-performance-actions [aria-pressed=true]{outline:2px solid #d3a6ff}
@media(max-width:650px){.dj-sound-pads{grid-template-columns:repeat(2,minmax(0,1fr))}}

.dj-motion{margin:16px 0;padding:16px;border:2px solid transparent;border-radius:14px;background:linear-gradient(125deg,#3c3951,#171d2b 60%,#303a4b) padding-box,var(--mirror) border-box;box-shadow:inset 0 1px #ffffff70,0 5px 15px #0004}.dj-motion h4{font-size:13px;letter-spacing:.1em;margin:0;color:#f5edff}.dj-motion h4 span{font-size:11px;letter-spacing:0}.dj-motion label{color:#eee5fc!important}.dj-motion .editor-help{font-size:11px;color:#ded4ed!important;line-height:1.5}.dj-motion-presets{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.dj-motion-presets button{font-size:11px;padding:8px 10px}.dj-motion .dj-fx-grid>label:first-child{grid-column:auto}.dj-tape{border-top:1px solid #ffffff30;margin-top:16px;padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center}.dj-motion input:focus-visible{outline-offset:0}.dj-motion output{margin-top:6px}

/* Stereo console: readable charcoal labels on approved mirror-metal surfaces. */
.mix-panel{position:relative;border:2px solid transparent!important;background:linear-gradient(125deg,#333b50,#141b29 65%,#29364b) padding-box,var(--mirror) border-box!important;color:#f5efff!important;box-shadow:inset 0 1px 2px #fff8,0 10px 30px #0005}
.mix-panel h2,.mix-panel h3,.mix-panel label,.mix-panel output,.mix-panel .editor-help,.mix-panel .eyebrow{color:#eee6fb!important}.mix-panel .editor-help{line-height:1.6}.mix-panel fieldset{border:0;padding:0;min-width:0}.track-strips{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px;margin:20px 0}.track-strip{min-width:0;padding:16px;border:2px solid transparent;border-radius:14px;background:linear-gradient(135deg,#465064,#192332 60%,#354055) padding-box,var(--mirror) border-box;box-shadow:inset 0 1px #fff8,0 4px 14px #0006}.track-strip h3{font-size:13px;overflow-wrap:anywhere;margin:0 0 16px}.track-strip>label{display:block;font-size:12px;margin:14px 0}.track-strip input{width:100%;min-width:0;display:block;margin-top:7px}.track-strip input[type=number]{background:#101827!important;color:#f5edff!important;border:1px solid #97a3ba!important;border-radius:7px;padding:8px}.track-strip output{font-size:11px;display:block;margin-top:5px}.track-toggles{display:flex;gap:10px}.mix-panel button{border:2px solid transparent!important;background:linear-gradient(#3d4659,#111a29 58%,#303b4e) padding-box,var(--mirror) border-box!important;color:#fff3ff!important;text-shadow:0 1px 2px #000;padding:10px 14px;border-radius:12px;box-shadow:inset 0 1px #fff9,0 4px 8px #0006}.mix-panel button[aria-pressed=true]{outline:2px solid #d6adff;box-shadow:0 0 15px #a77af866!important}.mix-panel input[type=range]{background:transparent!important;border:0!important;box-shadow:none!important}.track-master{padding:20px;border:2px solid transparent;border-radius:14px;background:linear-gradient(130deg,#39364c,#151e2c) padding-box,var(--mirror) border-box;display:grid;grid-template-columns:1fr 1fr;gap:24px}.track-master h3{font-size:13px;letter-spacing:.14em}.track-master label{display:block;font-size:12px}.track-master input{width:100%;display:block}.stereo-meters{padding-top:10px}.stereo-meters label{display:flex!important;gap:8px;align-items:center;font-size:10px!important;margin:7px 0!important}.stereo-meters meter{width:100%;height:14px;min-width:0}.stereo-meters meter::-webkit-meter-bar{background:#080f1c;border:1px solid #748197;border-radius:4px}.stereo-meters meter::-webkit-meter-optimum-value{background:linear-gradient(90deg,#6fe3ce,#b5a4ff,#ead46f)}.mix-panel #mix-peak{display:block;font-size:12px;margin-top:10px}.mix-panel #mix-peak.peak-warning{color:#ffb4b8!important;font-weight:bold}.mix-panel #mix-render{margin:0}.mix-panel .edit-actions{align-items:center;margin:20px 0}.mix-panel #mix-clock{font-variant-numeric:tabular-nums;font-size:12px}.mix-panel input:focus-visible,.mix-panel button:focus-visible{outline:2px solid #ccafff;outline-offset:3px}@media(max-width:650px){.track-master{grid-template-columns:1fr;gap:8px}}

html[data-theme=light] .mix-panel #mix-status{background:#151e2d;color:#eee6fb;border-color:#7b6b99}

/* Drum machine shares the approved chrome controls and perimeter light. */
.drum-panel .drum-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:22px 0}.drum-settings label{font-size:12px;color:#e8ddfa}.drum-settings input{width:100%;display:block;margin-top:8px}.drum-settings input[type=number]{padding:10px;border-radius:8px}.drum-settings output{display:block;margin-top:8px;font-size:12px}.drum-presets{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.drum-panel button{font-size:12px}.drum-scroll{overflow-x:auto;padding:10px 3px 16px;scrollbar-color:#b398d1 #171e2d}.drum-grid{min-width:820px}.drum-row{display:grid;grid-template-columns:90px repeat(16,minmax(34px,1fr));gap:5px;margin:8px 0}.drum-row button{min-width:0;padding:0;border-radius:8px;height:43px}.drum-panel .drum-voice{font-size:11px}.drum-panel .drum-step{position:relative;color:#d8d2e5!important;background:linear-gradient(#252b3a,#101622) padding-box,var(--mirror) border-box!important;font-size:10px}.drum-step.beat-start{margin-left:4px}.drum-panel .drum-step[data-strength="0.75"]{background:linear-gradient(#654c89,#332647) padding-box,var(--mirror) border-box!important;color:#fff!important}.drum-panel .drum-step[data-strength="1"]{background:linear-gradient(#806095,#46314f) padding-box,var(--mirror) border-box!important;color:#fff!important}.drum-panel .drum-step[data-strength="0.45"]{background:linear-gradient(#354f60,#1e303d) padding-box,var(--mirror) border-box!important;color:#fff!important}.drum-step:not([data-strength="0"])::after{content:'';position:absolute;bottom:4px;left:20%;right:20%;height:3px;background:#c8a3ff;border-radius:2px}.drum-step[data-strength="1"]::after{height:6px;background:#ffddac}.drum-step[data-strength="0.45"]::after{height:2px;background:#9adddc}.drum-panel .drum-step.playing{outline:2px solid #e6ceff;outline-offset:1px;box-shadow:0 0 12px #c589ff88}.drum-panel .edit-actions{align-items:center;gap:10px}.drum-panel #drum-position{font-size:12px;font-variant-numeric:tabular-nums;color:#e3c9fc}.drum-panel #drum-download{display:inline-block;margin:12px 0;color:#e9ccff;text-decoration:underline}.drum-panel #drum-download[hidden]{display:none}.drum-scroll:focus-visible{outline:2px solid #bda3eb;outline-offset:4px}.drum-panel #drum-status{color:#e4d8f2!important}.drum-panel input[type=range]{accent-color:#bc95ee}@media(max-width:650px){.drum-panel .drum-settings{grid-template-columns:1fr}.drum-panel{padding:18px}.drum-grid{min-width:820px}}@media(prefers-reduced-motion:reduce){.drum-panel .drum-step.playing{box-shadow:none}}

/* Four-lane arrangement timeline, using the shared mirror-metal panel. */
.arranger-panel{min-width:0}.arranger-panel .arr-settings{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin:18px 0}.arr-settings label{font-size:12px;display:block;min-width:0}.arranger-panel .arr-settings input,.arranger-panel .arr-settings select{display:block;width:100%;min-width:0;margin-top:8px;padding:10px;border:1px solid #a09bab!important;border-radius:8px;background:#101827!important;color:#f4edff!important}.arr-scroll{max-width:100%;overflow-x:auto;margin:20px 0;border:1px solid #82788f;border-radius:12px;background:#101622;scrollbar-color:#bba1d9 #101622}.arr-timeline{min-width:960px;position:relative;padding:0 0 10px}.arr-sections,.arr-ruler{display:grid;grid-template-columns:repeat(4,1fr);color:#e1d2f0}.arr-sections span{padding:12px 8px;background:linear-gradient(#414154,#252c3b);border-right:1px solid #71667e;font-size:10px;letter-spacing:.07em}.arr-ruler{grid-template-columns:repeat(16,1fr);height:28px;font-size:10px}.arr-ruler span{border-left:1px solid #71667e;padding:7px}.arr-lane{height:84px;position:relative;border-top:1px solid #726483;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(6.25% - 1px),#75648865 calc(6.25% - 1px),#75648865 6.25%),repeating-linear-gradient(90deg,#182132 0,#182132 calc(1.5625% - 1px),#51475d60 calc(1.5625% - 1px),#51475d60 1.5625%)}.arr-lane-title{position:absolute;top:3px;left:6px;z-index:1;font-size:10px;color:#e4d9ef;pointer-events:none}.arranger-panel button.arr-clip{position:absolute;top:22px;height:55px;min-width:4px;overflow:hidden;padding:5px!important;text-align:left;border-radius:7px;font-size:10px;touch-action:none;cursor:grab;background:linear-gradient(125deg,#775799,#372c52) padding-box,var(--mirror) border-box!important;color:#fff!important;z-index:2}.arr-lane:nth-child(2) button.arr-clip{background:linear-gradient(125deg,#315e78,#23314c) padding-box,var(--mirror) border-box!important}.arr-lane:nth-child(3) button.arr-clip{background:linear-gradient(125deg,#706046,#42352e) padding-box,var(--mirror) border-box!important}.arr-lane:nth-child(4) button.arr-clip{background:linear-gradient(125deg,#3e6860,#253e3b) padding-box,var(--mirror) border-box!important}.arr-clip strong,.arr-clip small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;pointer-events:none;font-size:10px}.arr-clip small{margin-top:6px;color:#e2d5ef}.arr-clip[aria-pressed=true]{z-index:3!important}.arr-playhead{position:absolute;top:39px;bottom:10px;width:2px;pointer-events:none;background:#f7ceff;box-shadow:0 0 8px #dd8bff;z-index:4}.arranger-panel fieldset{border:1px solid #746783!important;border-radius:12px;padding:16px!important;margin:20px 0}.arranger-panel legend{color:#ede1fc;max-width:100%;overflow-wrap:anywhere;font-size:13px}.arranger-panel #arr-download{display:inline-block;color:#f0d0ff;text-decoration:underline;margin:12px 0}.arranger-panel #arr-download[hidden]{display:none}.arranger-panel #arr-status{color:#e4d8f2!important;overflow-wrap:anywhere}.arr-scroll:focus-visible{outline:2px solid #c6a3f1;outline-offset:3px}@media(max-width:650px){.arranger-panel{padding:18px}.arranger-panel .arr-settings{grid-template-columns:1fr}.arranger-panel .file-label{max-width:100%}.arranger-panel input[type=file]{max-width:100%}}

/* Singing room shares the chrome faders, readable faces and rainbow perimeter. */
.vocal-panel .vocal-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:22px 0}.vocal-grid label{display:block;min-width:0;font-size:12px}.vocal-grid output{display:block;font-size:11px;margin-top:8px}.vocal-panel select{display:block;width:100%;min-width:0;margin-top:12px;padding:10px;background:#101827;color:#f4ecff;border:1px solid #aaa0b7;border-radius:8px}.vocal-presets{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.vocal-panel .vocal-compress{display:flex;align-items:center;gap:10px;font-size:12px;margin:18px 0}.vocal-panel #vocal-preview{width:100%;margin:12px 0}.vocal-panel #vocal-status{color:#eee1ff!important;line-height:1.6}.vocal-panel #vocal-download{color:#eed0ff;text-decoration:underline}.vocal-panel input[type=file]{max-width:100%}.vocal-panel #vocal-name{overflow-wrap:anywhere}.vocal-panel button:disabled{opacity:.5;cursor:default}@media(max-width:700px){.vocal-panel .vocal-grid{grid-template-columns:1fr}.vocal-panel{padding:18px}}