:root{color-scheme:dark;--bg-app:#101214;--ink:#f1f4f5;--muted:#858e98;--accent:#68e1df;--line:#25292e;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--ink);background:#101214;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input{font:inherit}button{cursor:pointer;border:1px solid #31363d;border-radius:10px;padding:11px 16px;color:inherit;background:#20252a;transition:background .15s,border-color .15s,transform .15s}button:hover{background:#2a3138;border-color:#47525d}button:active{transform:translateY(1px)}button:disabled{opacity:.38;cursor:default;transform:none}input:not([type=range]):not([type=checkbox]):not([type=file]){min-width:0;width:100%;background:#171c20;border:1px solid #30373f;border-radius:10px;color:inherit;padding:12px 14px}button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}[hidden]{display:none!important}.primary{background:var(--accent);color:#0a292c;font-weight:650;border-color:transparent;white-space:nowrap}.primary:hover{background:#96eeeb;border-color:transparent}.muted{color:var(--muted);font-size:12px;line-height:1.6}
header{height:72px;padding:0 28px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;background:#101214}.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:700;letter-spacing:-.6px;color:inherit;text-decoration:none}.brand-mark{width:35px;height:35px;display:inline-grid;place-items:center}.brand-mark img{width:100%;height:100%}.account{display:flex;gap:9px;align-items:center}.account>span:not(.avatar){font-size:12px;color:#b9c0c7;margin-right:12px}.avatar{height:30px;width:30px;display:grid;place-items:center;background:#24373d;border:1px solid #34535c;border-radius:50%;font-size:11px;font-weight:700;color:#a5d5df}.account button{font-size:11px;padding:7px 10px;border-color:transparent;background:transparent;color:#9fa8b3}.account button:hover{background:#23282e;color:white}
main{display:grid;grid-template-columns:280px minmax(0,1fr);min-height:calc(100svh - 72px)}aside{min-width:0;border-right:1px solid var(--line);padding:26px 18px 18px;background:#121518;position:sticky;top:0;height:calc(100svh - 72px);display:flex;flex-direction:column}.new-song{display:flex;align-items:center;justify-content:center;gap:10px;flex-shrink:0;width:100%;border:1px solid #415759;color:#b7f1ed;background:#243333;font-weight:600;font-size:13px;padding:13px;margin-bottom:28px}.new-song:hover{background:#304343;border-color:#6aa3a3}.new-song span{font-size:20px;font-weight:400;line-height:16px}.library-head{display:flex;align-items:center;justify-content:space-between;padding:0 5px;margin-bottom:14px}.library-head h2{font-size:12px;font-weight:600;letter-spacing:.02em;margin:0;color:#aeb6bf}#songCount{font-size:10px;font-variant-numeric:tabular-nums;color:#7e8995;background:#22272c;border-radius:5px;padding:2px 6px}.library-search{position:relative;margin-bottom:16px;flex-shrink:0}.library-search svg{position:absolute;left:12px;top:13px;width:14px;height:14px;stroke:#74808d;fill:none;stroke-width:1.7;pointer-events:none}#search{font-size:12px;padding:11px 12px 11px 34px;background:#1b1f24;border-color:transparent;border-radius:8px}#search:focus{border-color:#547779}#library{display:grid;grid-template-columns:minmax(0,1fr);gap:5px;min-width:0;overflow:auto;align-content:start;margin:0 -5px;padding:0 5px}.library-song{display:flex;gap:0;min-width:0;max-width:100%;align-items:center;border:1px solid transparent;border-radius:10px;position:relative}.library-song:hover{background:#1c2228}.library-song.active{background:#233235;border-color:#335356}.library-open{border:0;background:none;text-align:left;flex:1;min-width:0;padding:10px 5px 10px 9px;display:flex;align-items:center;gap:10px}.library-open:hover{background:none}.library-text{min-width:0;display:block}.library-open strong{font-size:12px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550;color:#d8dfe4}.library-open small{display:block;margin-top:5px;font-size:10px;color:#788591;white-space:nowrap}.library-art{flex:0 0 38px;width:38px;height:38px;border-radius:7px;display:grid;place-items:center;background:linear-gradient(135deg,hsl(var(--art-hue) 28% 30%),hsl(calc(var(--art-hue) + 45) 25% 15%));box-shadow:inset 0 0 0 1px #ffffff0c}.library-art svg{width:29px;stroke:#efffff99;stroke-width:2;stroke-linecap:round;fill:none}.library-delete{flex-shrink:0;padding:6px;background:none;border:0;font-size:17px;color:#74818e;opacity:0}.library-song:hover .library-delete,.library-song:focus-within .library-delete{opacity:1}#usage{margin-top:auto;padding:24px 6px 0;font-size:10px;color:#66727d}.library-empty{font-size:12px;color:#77848f;line-height:1.7;padding:12px 6px}
.workspace{padding:42px clamp(20px,3.6vw,68px) 50px;min-width:0;max-width:1600px;width:100%;align-self:start;margin:0 auto}.song-heading{display:flex;align-items:center;gap:24px;margin-bottom:32px;min-width:0}.song-art{--art-hue:185;flex:0 0 104px;width:104px;height:104px;border-radius:20px;overflow:hidden;position:relative;display:grid;place-items:center;background:radial-gradient(ellipse at 20% 0%,hsl(var(--art-hue) 42% 40%),transparent 85%),linear-gradient(135deg,#243b42,#1c2433);box-shadow:inset 0 0 0 1px #ffffff15,0 12px 35px #0003}.song-art::after{content:'';position:absolute;width:140px;height:140px;border:1px solid #ffffff10;border-radius:50%;top:40px;left:40px}.song-art svg{width:78px;stroke:#cef8f6;stroke-width:3;stroke-linecap:round;fill:none;opacity:.8}.song-info{min-width:0;flex:1}.view-label{font-size:9px;letter-spacing:.15em;font-weight:650;color:#7ba8ac;display:block;margin-bottom:10px}#title{border:1px solid transparent;background:transparent;padding:2px 0;font-weight:650;font-size:clamp(21px,2.3vw,32px);letter-spacing:-.04em;border-radius:4px}#title:hover,#title:focus{border-color:#37464e}.song-heading .muted{margin:9px 0 0;color:#7f8b94;font-size:11px}.song-actions{display:flex;gap:8px;flex-shrink:0;flex-wrap:wrap;justify-content:flex-end}.song-actions button{font-size:12px;min-height:40px;padding:10px 14px}#message{color:#ffd4a0;border:1px solid #674c2c;background:#352a1d;border-radius:10px;font-size:13px;padding:14px 16px;line-height:1.5;margin:0 0 18px}#saveState:empty,#message:empty,#loginError:empty{display:none}
/* The mixer keeps its behavior; the studio supplies its visual theme. */
.workspace #body{padding:0!important;background:transparent!important}.workspace .stem-player{--stem-panel:#191e23;--stem-line:#30373e;--stem-muted:#8d99a5;--stem-text:#e6edf1;--stem-control:#252c33;--stem-wave:#667480;gap:16px}.workspace .stem-player .stem-transport{padding:22px 24px;border-radius:18px;background:#1a2026;border-color:#2c343c;gap:16px}.workspace .stem-player .stem-timeline{gap:13px}.workspace .stem-player .stem-play{background:#d2f7f1;color:#163a3c;box-shadow:0 4px 20px #68e1df0b}.workspace .stem-player .stem-presets{border:1px solid #313b43;background:#222a31;padding:4px;border-radius:12px}.workspace .stem-player .stem-presets button{border-radius:8px}.workspace .stem-player .stem-presets button[aria-pressed=true]{background:#d2f7f1;color:#163a3c;box-shadow:none}.workspace .stem-player .stem-card{padding:19px 20px;min-height:106px;border-radius:15px;background:#181d22;border-color:#293139;grid-template-columns:minmax(110px,150px) 68px minmax(50px,1fr) 95px}.workspace .stem-player .stem-name{font-size:13px}.workspace .stem-player .stem-badge{width:35px;height:35px;border-radius:11px}.workspace .stem-player .stem-wave{height:56px}.workspace .stem-player .stem-panel{padding:22px;border-radius:16px;background:#171d22;border-color:#2b353e}.workspace .stem-player .stem-tools [data-a=manage]{font-size:11px;padding:7px 10px;border-color:#35424b;color:#a2b0ba}.workspace .stem-player .stem-status{padding:16px;border:1px solid #3d464f;background:#20282f;border-radius:12px;line-height:1.6}.workspace .stem-player [data-a=sourcePanel]{max-width:900px;margin:8px auto 0;width:100%;padding:34px;border:1px solid #34464d;background:radial-gradient(ellipse at 0 0,#263f432e,transparent 70%),#191f25;box-shadow:0 20px 60px #0002}.stem-source-title{font-size:20px;font-weight:650;letter-spacing:-.03em;margin:0 0 10px}.workspace .stem-player input[type=search]{padding:17px 18px;min-height:54px;background:#11171c;border:1px solid #3c515b;border-radius:12px;font-size:15px}.workspace .stem-player .stem-youtube>form button{min-width:94px;background:#69dcd8;color:#143438;border:0;font-weight:650;border-radius:10px}.workspace .stem-player [data-a=youtube]{background:#151b21;padding:12px 14px;font-size:12px}.workspace .stem-player [data-a=split]{background:#2e4148;color:#caf0ef;border-color:#405b64}.workspace .stem-player [data-a=splitFile]{font-size:12px;background:transparent;border-style:dashed;color:#9badb9}.workspace .stem-player .stem-search-results{max-height:380px;grid-template-columns:repeat(auto-fit,minmax(225px,1fr))}.workspace .stem-player .stem-search-result{padding:10px;background:#202a33;border-color:#354550}.workspace .stem-player .stem-youtube{gap:16px}.workspace[data-view=create] .song-art{opacity:.8}.workspace[data-view=create] .song-actions{display:none}
/* Large, honest progress: no pretend percentage during GPU work. */
.activity{min-height:440px;border:1px solid #2c3b43;border-radius:22px;background:radial-gradient(ellipse at 50% 25%,#264c532b,transparent 65%),#171d23;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:45px 25px;overflow:hidden}.activity-visual{width:146px;height:138px;position:relative;display:grid;place-items:center;margin-bottom:20px}.activity-halo{position:absolute;inset:0;border:1px solid #68e1df22;border-radius:50%;box-shadow:0 0 70px #51cfc211,inset 0 0 38px #51cfc208;animation:halo 3s ease-in-out infinite}.activity-bars{height:70px;display:flex;gap:4px;align-items:center;z-index:1}.activity-bars i{width:4px;height:var(--bar-size,40px);border-radius:8px;background:linear-gradient(#a1f7e8,#46adb9);animation:wave 1.1s ease-in-out infinite alternate;animation-delay:calc(var(--i)*-.13s)}.activity-stage{font-size:9px;letter-spacing:.2em;color:#6b9ba4;margin:0 0 12px;font-weight:700}.activity h2{font-size:clamp(22px,2.6vw,30px);letter-spacing:-.035em;font-weight:600;margin:0 0 12px}#activityDetail{font-size:12px;color:#94a5b0;line-height:1.6;margin:0 0 25px;max-width:500px;overflow-wrap:anywhere}.activity-meter{width:min(100%,310px);display:grid;gap:10px}.activity progress{appearance:none;border:0;width:100%;height:4px;border-radius:5px;background:#28363e;overflow:hidden}.activity progress::-webkit-progress-bar{background:#28363e}.activity progress::-webkit-progress-value{background:#75dfda;border-radius:5px}.activity progress::-moz-progress-bar{background:#75dfda;border-radius:5px}.activity progress:not([value]){background:linear-gradient(90deg,#27373f 30%,#65c5c6 50%,#27373f 70%);background-size:200% 100%;animation:shimmer 1.8s linear infinite}.activity progress:not([value])::-webkit-progress-bar{background:transparent}.activity progress:not([value])::-moz-progress-bar{background:transparent}#activityCount{font-size:11px;color:#74929c;font-variant-numeric:tabular-nums;min-height:14px}.activity-steps{display:flex;gap:28px;margin-top:24px;color:#526771;font-size:10px}.activity-steps span{display:flex;align-items:center;gap:7px}.activity-steps span::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}.activity-steps .active{color:#98d8d4}@keyframes wave{from{transform:scaleY(.45);opacity:.5}to{transform:scaleY(1.1);opacity:1}}@keyframes halo{50%{transform:scale(1.1);opacity:.5}}@keyframes shimmer{to{background-position:-200% 0}}
.login{min-height:100svh;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 10%,#25505530,transparent 65%);padding:24px}.login-card{width:min(100%,390px);background:#191f24;border:1px solid #344049;border-radius:22px;padding:36px;box-shadow:0 20px 100px #0004}.login-card .brand-mark{width:46px;height:46px;margin-bottom:20px}.login-card h1{font-size:29px;margin:6px 0 25px;letter-spacing:-.05em}#login label,dialog label{display:grid;gap:8px;font-size:12px;color:#a8b8c4;margin:22px 0}.login-card .primary{display:flex;justify-content:space-between;width:100%;margin-top:26px}#loginError,#passwordMessage{font-size:13px;color:#ffadb3;line-height:1.5}dialog{background:#1a2127;color:inherit;border:1px solid #3b4851;border-radius:18px;padding:28px;width:min(90vw,440px)}dialog::backdrop{background:#000a;backdrop-filter:blur(5px)}dialog h2{font-size:20px}.actions{display:flex;gap:10px;justify-content:flex-end}
@media(max-width:1150px){main{grid-template-columns:245px minmax(0,1fr)}.workspace{padding:30px 24px}.song-heading{flex-wrap:wrap;gap:18px}.song-art{flex-basis:80px;width:80px;height:80px;border-radius:16px}.song-art svg{width:62px}.song-actions{margin-left:98px}.workspace .stem-player .stem-card{grid-template-columns:minmax(90px,120px) 62px minmax(45px,1fr) 70px;padding:16px 14px;gap:10px}}
@media(max-width:850px){header{height:64px;padding:0 18px}.brand{font-size:16px}.account>span:not(.avatar){display:none}.account{gap:3px}.account button{font-size:10px;padding:7px}.avatar{display:none}main{grid-template-columns:1fr}aside{position:relative;top:auto;height:auto;border-right:0;border-bottom:1px solid var(--line);padding:16px 20px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px}.new-song{width:auto;margin:0;grid-column:2;grid-row:1;font-size:12px;padding:9px 12px}.library-head{grid-column:1;grid-row:1;margin:0;justify-content:flex-start;gap:10px}.library-search{grid-column:1/-1;margin:0}#library{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));max-height:162px;margin:0;padding:0}#usage{display:none}.library-delete{opacity:1}.workspace{padding:26px 20px}.song-heading{margin-bottom:25px}.workspace .stem-player .stem-card{grid-template-columns:minmax(100px,130px) 62px minmax(50px,1fr) 85px}.activity{min-height:390px}}
@media(max-width:600px){.workspace{padding:24px 12px}.song-heading{gap:14px;padding:0 4px}.song-art{width:64px;height:64px;flex-basis:64px;border-radius:13px}.song-art svg{width:50px}.song-info{flex:1;min-width:0}#title{font-size:21px}.view-label{font-size:8px;margin-bottom:6px}.song-heading .muted{font-size:10px}.song-actions{margin-left:0;width:100%;justify-content:flex-start}.song-actions button{font-size:11px;padding:9px 12px;min-height:36px}.workspace .stem-player .stem-transport{padding:16px;border-radius:14px}.workspace .stem-player .stem-card{grid-template-columns:minmax(0,1fr) 62px 85px;padding:14px;min-height:114px}.workspace .stem-player .stem-wave{grid-column:1/-1;grid-row:2;height:38px}.workspace .stem-player .stem-volume{grid-column:3;grid-row:1}.workspace .stem-player .stem-panel{padding:16px}.workspace .stem-player [data-a=sourcePanel]{padding:22px 16px;margin-top:0}.workspace .stem-player input[type=search]{font-size:13px;min-width:110px}.workspace .stem-player .stem-youtube>form button{min-width:64px;padding:10px}.workspace .stem-player [data-a=youtube]{min-width:110px}.workspace .stem-player .stem-search-results{grid-template-columns:minmax(0,1fr)}.activity{min-height:380px;padding:30px 20px}.activity-visual{transform:scale(.9)}.activity h2{font-size:23px}.activity-steps{gap:22px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.activity-bars i{transform:scaleY(.8)}.activity progress:not([value]){background:#497b82}}