:root{--text:#6f7390;--text-strong:#f8fbff;--muted:#a8aec8;--bg:#070812;--surface:#0f1222d1;--surface-strong:#181c34f0;--border:#ffffff1f;--accent:#9d7cff;--accent-2:#21d4fd;--accent-3:#ff7ad9;--accent-4:#7cffb2;--danger:#ff8a9a;--shadow:0 32px 90px #0000007a;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font:16px/1.5 var(--sans);color:var(--text);background:var(--bg);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{background:radial-gradient(circle at 18% 18%,#9d7cff3d,#0000 30vw),radial-gradient(circle at 82% 12%,#21d4fd2e,#0000 28vw),linear-gradient(135deg,#050611 0%,#11142a 46%,#070812 100%);min-width:320px;min-height:100vh;margin:0;overflow-x:hidden}body:before,body:after{z-index:-2;content:"";filter:blur(80px);opacity:.34;border-radius:999px;width:42vmax;height:42vmax;animation:13s ease-in-out infinite alternate float-glow;position:fixed;inset:auto}body:before{background:var(--accent);top:-14vmax;left:-9vmax}body:after{background:var(--accent-2);animation-delay:-5s;bottom:-16vmax;right:-13vmax}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.56}#root{min-height:100vh}.app-shell{place-items:center;min-height:100vh;padding:48px 20px;display:grid}.hero-card{text-align:center;background:linear-gradient(135deg, #ffffff1f, transparent 34%), var(--surface);border:1px solid var(--border);width:min(980px,100%);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);border-radius:34px;padding:clamp(28px,5vw,64px);position:relative;overflow:hidden}.orb{z-index:-1;pointer-events:none;filter:blur(36px);opacity:.42;border-radius:999px;width:230px;height:230px;animation:7s ease-in-out infinite alternate pulse-orb;position:absolute}.orb--left{background:var(--accent-3);top:9%;left:-76px}.orb--right{background:var(--accent-2);animation-delay:-2.8s;bottom:18%;right:-88px}.hero-card:before{z-index:-1;pointer-events:none;content:"";background-image:linear-gradient(#ffffff0b 1px,#0000 1px),linear-gradient(90deg,#ffffff0b 1px,#0000 1px);background-size:42px 42px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(circle,#000,#0000 74%);mask-image:radial-gradient(circle,#000,#0000 74%)}.eyebrow{color:#d8ccff;text-transform:uppercase;letter-spacing:.14em;background:#9d7cff1f;border:1px solid #9d7cff59;border-radius:999px;align-items:center;gap:8px;margin-bottom:18px;padding:8px 14px;font-size:.78rem;font-weight:800;display:inline-flex;box-shadow:inset 0 1px #ffffff29}.eyebrow-dot{background:var(--accent-4);width:9px;height:9px;box-shadow:0 0 18px var(--accent-4);border-radius:999px}h1,h2,p{margin:0}h1{max-width:820px;color:var(--text-strong);letter-spacing:-.075em;text-shadow:0 24px 70px #9d7cff47;margin:0 auto;font-size:clamp(2.5rem,7vw,5.8rem);line-height:.94}.hero-copy{max-width:680px;color:var(--muted);margin:24px auto 0;font-size:clamp(1rem,2vw,1.18rem)}.status-rail{border:1px solid var(--border);background:#ffffff12;border-radius:999px;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:26px;padding:6px;display:inline-grid}.status-pill{color:var(--muted);border-radius:999px;padding:7px 13px;font-size:.78rem;font-weight:800;transition:color .18s,background .18s,box-shadow .18s}.status-pill--active{color:#04111f;background:linear-gradient(135deg, var(--accent-2), var(--accent-4));box-shadow:0 10px 28px #21d4fd33}.upload-panel,.stems-panel{gap:20px;margin-top:38px;display:grid}.drop-zone{color:var(--text-strong);background:linear-gradient(135deg,#ffffff16,#ffffff09),#fff1;border:1px dashed #ffffff42;border-radius:26px;gap:10px;padding:32px;transition:transform .18s,border-color .18s,background .18s;display:grid}.drop-zone:hover,.drop-zone:focus-within{background:#9d7cff21;border-color:#9d7cffb8;transform:translateY(-2px)}.drop-zone input{clip:rect(0 0 0 0);width:1px;height:1px;position:absolute;overflow:hidden}.drop-icon{color:#08101d;background:linear-gradient(135deg, var(--accent-2), var(--accent-3));border-radius:22px;place-items:center;width:66px;height:66px;margin:0 auto 2px;font-size:2rem;display:grid;box-shadow:0 16px 40px #21d4fd40}.drop-zone strong{font-size:1.2rem}.drop-zone small{color:var(--muted)}.wave-preview{background:#0507116b;border:1px solid #ffffff17;border-radius:22px;justify-content:center;align-items:center;gap:5px;width:min(520px,100%);min-height:74px;margin:8px auto 0;padding:14px;display:flex}.wave-preview span{width:7px;height:var(--bar-height);background:linear-gradient(180deg, var(--accent-4), var(--accent-2), var(--accent-3));opacity:.82;transform-origin:50%;animation:1.35s ease-in-out infinite alternate equalize;animation-delay:calc(var(--bar) * -72ms);border-radius:999px}.file-chip{color:#dffdf7;background:#7cffb21a;border:1px solid #7cffb247;border-radius:999px;justify-self:center;margin-top:2px;padding:8px 12px;font-size:.82rem;font-weight:800}.primary-button,.secondary-button,.play-button{color:#06111f;border:0;border-radius:18px;justify-content:center;align-items:center;gap:10px;min-height:54px;padding:0 24px;font-weight:900;transition:transform .18s,box-shadow .18s;display:inline-flex;box-shadow:0 18px 42px #21d4fd2e}.primary-button,.play-button{background:linear-gradient(135deg, var(--accent-2), var(--accent-3))}.secondary-button{color:var(--text-strong);border:1px solid var(--border);background:#ffffff1a;justify-self:center}.primary-button:not(:disabled):hover,.secondary-button:hover,.play-button:hover{transform:translateY(-2px);box-shadow:0 22px 52px #ff7ad940}.processing-card,.transport-card,.stem-card{background:var(--surface-strong);border:1px solid var(--border);border-radius:24px}.processing-card{text-align:left;align-items:center;gap:16px;max-width:620px;margin:24px auto 0;padding:18px;animation:.36s both rise-in;display:flex}.processing-card strong,.processing-card span{display:block}.processing-card strong{color:var(--text-strong)}.loader{border:4px solid #ffffff1f;border-top-color:var(--accent-2);border-radius:50%;flex:none;width:48px;height:48px;animation:.95s linear infinite spin}.transport-card{text-align:left;justify-content:space-between;align-items:center;gap:18px;padding:18px;display:flex}.transport-card p{color:var(--muted)}.job-chip{color:#d8ccff;text-overflow:ellipsis;white-space:nowrap;background:#9d7cff1f;border:1px solid #9d7cff47;border-radius:999px;max-width:260px;padding:6px 10px;font-size:.76rem;font-weight:800;display:inline-flex;overflow:hidden}.result-actions{flex-wrap:wrap;justify-content:center;gap:12px;display:flex}a.secondary-button{text-decoration:none}.play-glyph{color:#06111f;background:#ffffff80;border-radius:999px;place-items:center;width:26px;height:26px;display:inline-grid}.live-badge{color:var(--muted);background:#ffffff12;border:1px solid #ffffff1c;border-radius:999px;flex:none;padding:7px 12px;font-size:.78rem;font-weight:900}.live-badge--on{color:#06111f;background:linear-gradient(135deg, var(--accent-4), var(--accent-2));box-shadow:0 0 34px #7cffb242}.seek-card{color:var(--muted);border:1px solid var(--border);background:#fff1;border-radius:20px;grid-template-columns:auto minmax(180px,1fr) auto;align-items:center;gap:14px;padding:16px 18px;display:grid}.seek-card span{min-width:46px;color:var(--text-strong);font-variant-numeric:tabular-nums;font-size:.86rem;font-weight:900}.seek-card span:last-child{text-align:right}.seek-card input{appearance:none;cursor:pointer;background:linear-gradient(90deg, var(--accent-3) var(--seek), #ffffff21 var(--seek));border-radius:999px;outline:0;width:100%;height:10px}.seek-card input:disabled{cursor:wait;opacity:.62}.seek-card input::-webkit-slider-thumb{appearance:none;border:4px solid var(--accent-3);background:#fff;border-radius:50%;width:24px;height:24px;box-shadow:0 8px 22px #ff7ad940}.seek-card input::-moz-range-thumb{border:4px solid var(--accent-3);background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 8px 22px #ff7ad940}.stem-list{gap:14px;display:grid}.stem-card{text-align:left;grid-template-columns:minmax(150px,1fr) minmax(220px,1.4fr);align-items:center;gap:18px;padding:20px;transition:border-color .18s,transform .18s,background .18s;animation:.42s both rise-in;display:grid;position:relative;overflow:hidden}.stem-card:before{content:"";background:var(--stem-color,var(--accent-2));width:5px;position:absolute;inset:0 auto 0 0}.stem-card:first-child{--stem-color:var(--accent-3)}.stem-card:nth-child(2){--stem-color:var(--accent-2)}.stem-card:nth-child(3){--stem-color:var(--accent-4)}.stem-card:nth-child(4){--stem-color:var(--accent)}.stem-card:hover{background:#ffffff18;border-color:#fff3;transform:translateY(-2px)}.stem-number{color:var(--accent-2);letter-spacing:.18em;margin-bottom:2px;font-size:.72rem;font-weight:900;display:block}h2{color:var(--text-strong);font-size:clamp(1.25rem,3vw,1.9rem)}.stem-heading{gap:8px;display:grid}.stem-meter{align-items:end;gap:5px;height:22px;display:flex}.stem-meter span{background:var(--stem-color,var(--accent-2));opacity:.78;border-radius:999px;width:8px;height:45%}.stem-meter span:nth-child(2){height:82%}.stem-meter span:nth-child(3){height:62%}.stem-meter span:nth-child(4){height:100%}.app-shell--complete .stem-meter span{animation:.9s ease-in-out infinite alternate stem-pulse}.app-shell--complete .stem-meter span:nth-child(2){animation-delay:-180ms}.app-shell--complete .stem-meter span:nth-child(3){animation-delay:-320ms}.app-shell--complete .stem-meter span:nth-child(4){animation-delay:-460ms}.volume-control{color:var(--muted);grid-template-columns:auto 1fr auto;align-items:center;gap:14px;display:grid}.volume-control input{appearance:none;background:linear-gradient(90deg, var(--accent-2) var(--volume), #ffffff1f var(--volume));border-radius:999px;outline:0;width:100%;height:8px}.volume-control input::-webkit-slider-thumb{appearance:none;border:4px solid var(--accent-2);background:#fff;border-radius:50%;width:22px;height:22px;box-shadow:0 8px 22px #21d4fd40}.volume-control input::-moz-range-thumb{border:4px solid var(--accent-2);background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 8px 22px #21d4fd40}.volume-control strong{min-width:44px;color:var(--text-strong);text-align:right}.error-message{max-width:620px;color:var(--danger);background:#ff8a9a1a;border:1px solid #ff8a9a4d;border-radius:18px;margin:20px auto 0;padding:14px 18px}@keyframes equalize{0%{transform:scaleY(.62)}to{transform:scaleY(1.12)}}@keyframes pulse-orb{0%{transform:translate(0,0)scale(.94)}to{transform:translate(18px,-12px)scale(1.08)}}@keyframes stem-pulse{0%{opacity:.45;transform:scaleY(.72)}to{opacity:1;transform:scaleY(1.08)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes rise-in{0%{opacity:0;transform:translateY(18px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}@keyframes float-glow{0%{transform:translate(0,0)scale(1)}to{transform:translate(6vw,4vh)scale(1.12)}}@media (width<=720px){.app-shell{padding:20px 12px}.hero-card{border-radius:24px}.status-rail{width:100%}.transport-card,.seek-card,.stem-card,.volume-control{grid-template-columns:1fr}.transport-card{text-align:center;display:grid}.play-button{width:100%}}
