:root{--bg:#0b0d10;--surface:#111419;--surface-2:#171a20;--surface-3:#1c2027;--line:#292e36;--text:#f1f3f5;--muted:#949ca7;--subtle:#69717d;--accent:#e9edf1;--accent-ink:#0c0f12;--success:#69d6a7;--danger:#ef818b;--radius:16px;--font-body:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--font-display:'Space Grotesk',var(--font-body)}
*{box-sizing:border-box}html{background:var(--bg);color-scheme:dark;scroll-behavior:smooth}body{margin:0;min-height:100vh;background:radial-gradient(900px 500px at 76% -10%,rgba(255,255,255,.05),transparent 60%),var(--bg);color:var(--text);font:400 14px/1.5 var(--font-body);overflow-x:hidden}button,input{font:inherit}button,a{tap-highlight-color:transparent}.app{min-height:100vh;display:grid;grid-template-columns:248px minmax(0,1fr)}.sidebar{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;padding:24px 16px 18px;border-right:1px solid var(--line);background:#0d0f12}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 32px;color:inherit;text-decoration:none}.brand-mark{width:34px;height:34px;display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:7px;border:1px solid #323741;border-radius:10px;background:#111419}.brand-mark i{display:block;width:3px;border-radius:10px;background:#e7ebee}.brand-mark i:nth-child(1){height:7px}.brand-mark i:nth-child(2){height:15px}.brand-mark i:nth-child(3){height:11px}.brand-mark i:nth-child(4){height:18px}.brand strong{display:block;font:700 13px/1 var(--font-display);letter-spacing:.15em}.brand small{display:block;margin-top:5px;color:var(--subtle);font-size:8px;letter-spacing:.17em}.nav{display:grid;gap:5px}.nav-item{width:100%;display:flex;align-items:center;gap:11px;padding:11px 12px;border:1px solid transparent;border-radius:10px;background:transparent;color:#808894;text-align:left;cursor:pointer;transition:background .18s ease,border-color .18s ease,color .18s ease}.nav-item:hover{background:#14171c;color:#cfd4da}.nav-item.active{background:#191c22;border-color:#2a2f37;color:#f3f5f6}.nav-icon{width:18px;color:#7e8792;text-align:center;font-size:13px}.nav-item.active .nav-icon{color:#eceff2}.sidebar-foot{margin-top:auto}.studio-link{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid #2a2f37;border-radius:12px;background:#12151a;color:var(--text);text-decoration:none;transition:background .18s ease,border-color .18s ease,transform .18s ease}.studio-link:hover{background:#171a20;border-color:#39404b;transform:translateY(-1px)}.studio-link-icon{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;background:#e8ecef;color:#0c0f12;font-weight:700}.studio-link strong{display:block;font-size:11px}.studio-link small{display:block;color:var(--subtle);font-size:9px;margin-top:2px}.studio-link>b{margin-left:auto;color:#77808a;font-size:12px}.connection{display:flex;align-items:center;gap:8px;padding:14px 6px 0;color:var(--subtle)}.connection span,.status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);box-shadow:0 0 0 4px rgba(105,214,167,.07)}.connection small{font-size:10px}.main{min-width:0}.topbar{height:68px;position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(20px,4vw,52px);border-bottom:1px solid rgba(41,46,54,.82);background:rgba(11,13,16,.86);backdrop-filter:blur(18px)}.crumb{display:flex;align-items:center;gap:9px;font-size:12px;color:#656d78}.crumb b{color:#343941}.crumb strong{font-weight:600;color:#d6dbe0}.top-actions{display:flex;align-items:center;gap:14px}.top-link,.clear-link{font-size:11px;text-decoration:none}.top-link{color:#c4cad1}.top-link:hover{color:#fff}.clear-link{padding:0;border:0;background:none;color:#68717c;cursor:pointer}.clear-link:hover{color:#c9cfd5}.view{width:min(1360px,100%);margin:0 auto;padding:46px clamp(20px,4vw,52px) 120px}.welcome-row{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:30px}.eyebrow{font-size:9px;font-weight:700;letter-spacing:.18em;color:#69727d}.welcome-row h1{margin:13px 0 11px;font:600 clamp(35px,4.8vw,64px)/.98 var(--font-display);letter-spacing:-.055em}.welcome-row h1 em{font-style:normal;color:#858e99}.lede{max-width:640px;margin:0;color:#7f8893;font-size:13px;line-height:1.7}.quick-card{min-width:210px;padding:16px 17px;border:1px solid var(--line);border-radius:13px;background:#101318}.quick-kicker{display:block;color:#656e79;font-size:9px;font-weight:700;letter-spacing:.14em}.quick-card strong{display:block;margin-top:8px;font-size:12px}.quick-card small{display:block;margin-top:3px;color:#68717d;font-size:10px}.workspace{display:grid;gap:14px}.now-card{display:grid;grid-template-columns:116px minmax(0,1fr) auto;align-items:center;gap:20px;padding:18px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(120deg,#12161b,#0f1217)}.album-art{position:relative;width:116px;height:116px;display:grid;place-items:center;overflow:hidden;border:1px solid #30353e;border-radius:14px;background:#0a0c0f}.art-grid{position:absolute;inset:0;background:linear-gradient(90deg,transparent 48%,#1e232a 49%,transparent 50%),linear-gradient(transparent 48%,#1e232a 49%,transparent 50%);background-size:24px 24px;opacity:.55}.art-orbit{position:absolute;width:76px;height:76px;border:1px solid #39414a;border-radius:50%;box-shadow:0 0 0 16px rgba(255,255,255,.015)}.art-center{position:relative;width:50px;height:50px;border:1px solid #424a55;border-radius:13px;display:grid;place-items:center;background:#15191e;font-size:22px}.now-copy{min-width:0}.now-copy h2{margin:9px 0 6px;font:600 clamp(22px,3vw,33px)/1.05 var(--font-display);letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-copy p{margin:0;color:#777f8a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:13px}.tags span{padding:5px 7px;border:1px solid #2d333b;border-radius:6px;color:#79828d;background:#11151a;font-size:8px;letter-spacing:.12em}.status-stack{display:flex;align-items:center;gap:8px;color:#89929d;font-size:10px}.status-dot.idle{background:#59616c;box-shadow:none}.control-card{padding:19px 20px;border:1px solid var(--line);border-radius:16px;background:#111419}.scrubber{padding-top:2px}.scrubber input{width:100%}.time-row{display:flex;justify-content:space-between;margin-top:8px;color:#68717d;font-size:10px}.transport{display:flex;align-items:center;gap:9px;margin-top:17px}.icon-btn,.play-btn{border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:background .17s ease,border-color .17s ease,color .17s ease,transform .17s ease}.icon-btn{width:34px;height:34px;border:1px solid #2b3038;background:#161a20;color:#9199a3;font-size:9px}.icon-btn:hover{background:#1c2128;border-color:#3a414b;color:#f1f3f5}.icon-btn.is-active{background:#e8ecef;color:#0c0f12;border-color:#e8ecef}.play-btn{width:46px;height:46px;border:0;background:#edf0f2;color:#0a0d10;font-size:13px}.play-btn:hover{background:#fff;transform:translateY(-1px)}.volume{display:flex;align-items:center;gap:8px;margin-left:auto;color:#68717d;font-size:8px;letter-spacing:.13em}.volume input{width:120px}.lower-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:14px}.panel{min-width:0;padding:20px;border:1px solid var(--line);border-radius:16px;background:#101318}.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:18px}.section-head h3{margin:7px 0 0;font:600 18px/1.1 var(--font-display);letter-spacing:-.025em}.add-form{display:grid;gap:10px}.add-form label{display:grid;gap:7px;color:#89919b;font-size:10px}.add-form label>span{color:#5e6671;font-size:9px}.add-form input{width:100%;height:42px;padding:0 12px;border:1px solid #2a3038;border-radius:9px;background:#0c0f13;color:#edf0f2;outline:none}.add-form input::placeholder{color:#525b66}.add-form input:focus{border-color:#5a636f;box-shadow:0 0 0 3px rgba(255,255,255,.035)}.primary-btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:11px 13px;border:0;border-radius:9px;background:#edf0f2;color:#0b0e11;font-weight:700;font-size:11px;cursor:pointer;transition:background .17s ease,transform .17s ease}.primary-btn:hover{background:#fff;transform:translateY(-1px)}.form-note{margin:11px 0 0;color:#5f6873;font-size:9px;line-height:1.6}.queue{display:grid;gap:5px;max-height:260px;overflow:auto;padding-right:2px}.queue-item{display:grid;grid-template-columns:34px minmax(0,1fr) 26px;align-items:center;gap:9px;padding:7px;border:1px solid transparent;border-radius:10px;cursor:pointer}.queue-item:hover{background:#15191e;border-color:#292f37}.queue-item.is-current{background:#181c22;border-color:#343b44}.queue-num{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#181c21;color:#69727d;font-size:9px}.queue-info{min-width:0}.queue-info b{display:block;font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.queue-info small{display:block;margin-top:2px;color:#606975;font-size:9px}.queue-remove{width:24px;height:24px;border:0;background:transparent;color:#5d6671;cursor:pointer;border-radius:6px}.queue-remove:hover{background:#20252c;color:#e7eaed}.empty{min-height:90px;display:grid;place-items:center;border:1px dashed #2a3037;border-radius:10px;color:#555f6a;font-size:10px}.count{min-width:24px;padding:4px 7px;border:1px solid #2a3037;border-radius:999px;color:#7b8490;text-align:center;font-size:9px}.mini-effects{padding-bottom:18px}.quick-fx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.quick-fx-grid label{display:grid;gap:10px}.quick-fx-grid label>span{display:flex;justify-content:space-between;color:#8a929d;font-size:10px}.quick-fx-grid output,.effect-card output{color:#c6cbd1}.effects-link{margin-top:18px;padding:0;border:0;background:none;color:#8e97a1;font-size:10px;cursor:pointer}.effects-link:hover{color:#eef1f3}.text-btn{border:0;background:none;color:#6b7480;font-size:10px;cursor:pointer}.text-btn:hover{color:#dfe3e6}.page-intro{padding-bottom:26px}.page-intro h1{margin:10px 0 7px;font:600 40px/1 var(--font-display);letter-spacing:-.04em}.page-intro p{margin:0;color:#717a85;font-size:12px}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.lib-card{padding:17px;border:1px solid var(--line);border-radius:14px;background:#101318}.lib-card b{display:block;font-size:12px}.lib-card small{display:block;margin-top:6px;color:#66707b;font-size:9px;line-height:1.6}.effects-rack{max-width:960px}.rack-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px}.rack-head h3{margin:7px 0 0;font:600 19px var(--font-display)}.eq-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:20px 6px;border-top:1px solid #252b33;border-bottom:1px solid #252b33}.eq-band{display:grid;gap:10px;justify-items:center}.eq-band label{font-size:9px;color:#7a838e}.eq-band output{font-size:9px;color:#aeb5bd}.eq-band input{height:150px;writing-mode:vertical-lr;direction:rtl}.effect-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.effect-card{display:grid;grid-template-columns:1fr auto;gap:8px;padding:15px;border:1px solid #292f37;border-radius:12px;background:#12161b}.effect-card strong{display:block;font-size:11px}.effect-card small{display:block;margin-top:4px;color:#66707b;font-size:9px}.effect-card input{grid-column:1/-1;width:100%}input[type=range]{appearance:none;height:3px;border-radius:999px;background:#2a3038;outline:none}input[type=range]:focus-visible{box-shadow:0 0 0 3px rgba(255,255,255,.09)}input[type=range]::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border-radius:50%;background:#e7ebee;border:2px solid #0e1115;box-shadow:0 0 0 1px #78818c;cursor:pointer}input[type=range]::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:#e7ebee;border:2px solid #0e1115;box-shadow:0 0 0 1px #78818c;cursor:pointer}.hidden{display:none!important}@media(max-width:1050px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:12px 16px;border-right:0;border-bottom:1px solid var(--line)}.brand{padding:3px 0 12px}.nav{grid-template-columns:repeat(3,1fr)}.nav-item{justify-content:center}.sidebar-foot{display:none}.view{padding-top:32px}.lower-grid{grid-template-columns:1fr}.quick-card{display:none}}@media(max-width:720px){.topbar{height:60px;padding:0 17px}.top-link{display:none}.welcome-row{margin-bottom:22px}.welcome-row h1{font-size:38px}.view{padding:30px 17px 100px}.now-card{grid-template-columns:72px minmax(0,1fr);gap:14px}.album-art{width:72px;height:72px}.art-orbit{width:48px;height:48px}.art-center{width:34px;height:34px;font-size:16px}.status-stack{grid-column:2;font-size:9px;margin-top:-5px}.now-copy h2{font-size:22px}.now-copy p{font-size:10px}.quick-fx-grid{grid-template-columns:1fr;gap:16px}.volume{width:100%;margin-left:4px}.volume input{flex:1}.effect-cards{grid-template-columns:1fr}.eq-grid{gap:9px}.eq-band input{height:125px}}@media(max-width:460px){.nav-item{padding:9px 5px;font-size:10px}.nav-icon{display:none}.crumb span,.crumb b{display:none}.view{padding-left:13px;padding-right:13px}.welcome-row h1{font-size:33px}.lede{font-size:11px}.control-card,.panel,.now-card{padding:14px}.transport{gap:7px}.icon-btn{width:32px;height:32px}.play-btn{width:43px;height:43px}.queue-item{grid-template-columns:30px minmax(0,1fr) 24px}.queue-num{width:26px;height:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}