@property --border-angle{syntax: ""; initial-value: 0deg; inherits: false;}:root{--bg: #0b0a10;--surface: #14131f;--surface-2: #1e1d2e;--border: #2a2940;--text: #e8e5f0;--text-dim: #6e6b82;--text-micro: #4a4860;--accent: #f07a5c;--accent-glow: rgba(240, 122, 92, .35);--accent-cool: #7c6ff0;--accent-cool-glow: rgba(124, 111, 240, .35);--font-display: "Syne", sans-serif;--font-body: "Outfit", sans-serif;--font-mono: "JetBrains Mono", monospace;--radius: 16px}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body,#root{height:100%}body{background:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(124,111,240,.04),transparent),var(--bg);color:var(--text);font-family:var(--font-body);-webkit-font-smoothing:antialiased;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh;max-width:1400px;margin:0 auto;padding:0 32px}.header{display:flex;align-items:center;gap:14px;padding:28px 0 20px;flex-shrink:0}.logo{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,var(--accent-cool),var(--accent));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{font-size:13px;font-weight:400;color:var(--text-dim)}.reset-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--text-dim);cursor:pointer;margin-left:auto;transition:color .2s,border-color .2s}.reset-btn:hover{color:var(--text);border-color:var(--accent-cool)}.main{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;padding-bottom:24px}.main--player{align-items:stretch;flex-direction:row;gap:24px}.drop-zone{position:relative;width:100%;max-width:540px;aspect-ratio:16 / 9;border-radius:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;background:var(--surface);transition:transform .3s ease}.drop-zone:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:22px;background:conic-gradient(from var(--border-angle),var(--accent-cool) 0%,var(--accent) 30%,transparent 50%,transparent 80%,var(--accent-cool) 100%);z-index:0;opacity:.45;animation:border-rotate 8s linear infinite;transition:opacity .4s ease,filter .4s ease}.drop-zone:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:20px;background:var(--surface);z-index:0}.drop-zone.drag-over{transform:scale(1.02)}.drop-zone.drag-over:before{opacity:1;filter:brightness(1.3);animation-duration:3s}@keyframes border-rotate{to{--border-angle: 360deg}}.drop-content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:none}.drop-icon{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#7c6ff021,#f07a5c21);display:flex;align-items:center;justify-content:center;color:var(--accent-cool);animation:icon-float 3s ease-in-out infinite}.drop-icon svg{width:24px;height:24px}@keyframes icon-float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.drop-title{font-size:16px;font-weight:600;color:var(--text)}.drop-hint{font-size:13px;color:var(--text-dim)}.warmup{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:fade-in .4s ease}.warmup-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:radial-gradient(circle,rgba(124,111,240,.12),transparent 70%);animation:warmup-breathe 3s ease-in-out infinite;pointer-events:none}@keyframes warmup-breathe{0%,to{transform:scale(1);opacity:.6}50%{transform:scale(1.15);opacity:1}}.warmup-content{position:relative;display:flex;flex-direction:column;align-items:center;gap:24px}.warmup-rings{position:relative;width:88px;height:88px}.warmup-ring{position:absolute;border-radius:50%;border:2px solid transparent}.warmup-ring--outer{top:0;right:0;bottom:0;left:0;border-top-color:var(--accent-cool);border-right-color:#7c6ff033;animation:ring-spin 2s linear infinite}.warmup-ring--inner{top:12px;right:12px;bottom:12px;left:12px;border-bottom-color:var(--accent);border-left-color:#f07a5c33;animation:ring-spin 1.4s linear infinite reverse}@keyframes ring-spin{to{transform:rotate(360deg)}}.warmup-icon{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:var(--accent-cool);animation:warmup-pulse 2s ease-in-out infinite}@keyframes warmup-pulse{0%,to{opacity:.7}50%{opacity:1}}.warmup-text{font-family:var(--font-display);font-size:16px;font-weight:600;color:var(--text)}.warmup-subtext{font-size:13px;color:var(--text-dim);margin-top:-12px}.loading{display:flex;flex-direction:column;align-items:center;gap:24px;animation:fade-in .3s ease}.loading-bars{display:flex;gap:5px;align-items:flex-end;height:44px}.loading-bar{width:5px;border-radius:3px;background:linear-gradient(to top,var(--accent-cool),var(--accent));animation:bar-pulse 1.2s ease-in-out infinite}.loading-bar:nth-child(1){height:55%}.loading-bar:nth-child(2){height:90%}.loading-bar:nth-child(3){height:40%}.loading-bar:nth-child(4){height:75%}.loading-bar:nth-child(5){height:50%}@keyframes bar-pulse{0%,to{transform:scaleY(.35);opacity:.45}50%{transform:scaleY(1);opacity:1}}.loading-text{font-size:14px;color:var(--text-dim);font-weight:400}.player-area{flex:1;min-width:0;display:flex;flex-direction:column;gap:0;animation:player-in .55s cubic-bezier(.22,1,.36,1)}@keyframes player-in{0%{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}.spectrogram-wrap{position:relative;flex:none;height:260px;border-radius:14px;overflow:hidden;background:#000;cursor:crosshair;box-shadow:0 0 0 1px #ffffff08,0 24px 64px -16px #000000b3,0 0 48px -12px #7c6ff00f}.spectrogram-wrap:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:14px;box-shadow:inset 0 0 50px #00000040;pointer-events:none;z-index:1}.spectrogram-canvas{display:block;width:100%;height:100%}.cursor{position:absolute;top:0;bottom:0;width:2px;background:var(--accent);box-shadow:0 0 8px var(--accent-glow),0 0 24px var(--accent-glow);pointer-events:none;z-index:2;will-change:left}.freq-label{position:absolute;right:10px;font-family:var(--font-mono);font-size:10px;font-weight:400;color:#ffffff40;pointer-events:none;transform:translateY(-50%);z-index:1;-webkit-user-select:none;user-select:none}.controls{display:flex;align-items:center;gap:16px;padding:16px 2px 8px;flex-shrink:0}.play-btn{width:44px;height:44px;border-radius:50%;border:none;background:linear-gradient(135deg,var(--accent-cool),var(--accent));color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:transform .15s ease,box-shadow .2s ease}.play-btn:hover{transform:scale(1.08);box-shadow:0 0 24px -4px var(--accent-cool-glow)}.play-btn:active{transform:scale(.95)}.play-btn svg{width:18px;height:18px}.track-info{flex:1;min-width:0}.track-name{font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}.time-display{font-family:var(--font-mono);font-size:13px;font-weight:400;color:var(--text-dim);flex-shrink:0;display:flex;gap:4px}.time-display .sep{opacity:.35}.model-sidebar{width:300px;flex-shrink:0;display:flex;flex-direction:column;gap:16px;animation:player-in .55s cubic-bezier(.22,1,.36,1)}.model-sidebar__heading{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1.5px;color:var(--text-dim)}.model-sidebar__cards{display:flex;flex-direction:column;gap:12px}.model-sidebar__stems{animation:stem-fade-in .3s ease}.model-card{position:relative;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);cursor:pointer;text-align:left;font-family:inherit;color:var(--text);padding:0;transition:transform .2s ease,border-color .2s ease}.model-card:hover{transform:translateY(-2px)}.model-card__inner{position:relative;z-index:1;display:flex;flex-direction:column;gap:8px;padding:20px;border-radius:calc(var(--radius) - 1px);background:var(--surface);height:100%}.model-card--selected{border-color:transparent;background:transparent}.model-card--selected:before{content:"";position:absolute;top:-2px;right:-2px;bottom:-2px;left:-2px;border-radius:calc(var(--radius) + 2px);background:linear-gradient(135deg,var(--accent-cool),var(--accent));z-index:0}.model-card--selected:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:calc(var(--radius) - 1px);background:var(--surface);z-index:0}.model-card--cached{border-color:#7c6ff040}.model-card__label{font-family:var(--font-display);font-size:16px;font-weight:700}.model-card__desc{font-size:13px;color:var(--text-dim);line-height:1.4}.model-card__size{font-family:var(--font-mono);font-size:12px;color:var(--text-micro)}.model-card__status{margin-top:auto;padding-top:4px;min-height:20px}.model-card__hint{font-size:12px;color:var(--text-micro)}.model-card__cached{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;color:#6ee7a0;background:#6ee7a014;padding:3px 10px 3px 7px;border-radius:20px;border:1px solid rgba(110,231,160,.2)}.model-card__check{flex-shrink:0}.model-card__error{font-size:12px;color:var(--accent)}.progress-track{width:100%;height:6px;border-radius:3px;background:var(--surface-2);overflow:hidden}.progress-fill{height:100%;border-radius:3px;background:linear-gradient(90deg,var(--accent-cool),var(--accent));transition:width .3s ease}.progress-fill--shimmer{width:100%;background:linear-gradient(90deg,transparent 0%,var(--accent-cool) 50%,transparent 100%);background-size:200% 100%;animation:download-shimmer 1.5s ease-in-out infinite}@keyframes download-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.stem-chips{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.stem-chips__label{font-size:13px;font-weight:500;color:var(--text-dim)}.stem-chips__list{display:flex;gap:8px;flex-wrap:wrap}.stem-chip{padding:6px 14px;border-radius:20px;border:1px solid var(--border);background:var(--surface-2);color:var(--text-dim);font-family:var(--font-body);font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.stem-chip:hover{border-color:var(--text-micro);color:var(--text)}.stem-chip--active{border-color:var(--accent-cool);color:var(--text);background:#7c6ff01a}@keyframes stem-fade-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.run-btn{width:100%;margin-top:auto;padding:12px 28px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--accent-cool),var(--accent));color:#fff;font-family:var(--font-body);font-size:15px;font-weight:600;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,opacity .2s ease}.run-btn:hover:not(:disabled){transform:scale(1.04);box-shadow:0 0 24px -4px var(--accent-cool-glow)}.run-btn:active:not(:disabled){transform:scale(.97)}.run-btn:disabled{opacity:.3;cursor:not-allowed}.mp{display:flex;flex-direction:column;gap:14px;padding:20px 24px;border-radius:var(--radius);background:radial-gradient(ellipse 120% 80% at 50% -20%,rgba(124,111,240,.07),transparent),var(--surface);border:1px solid var(--border);animation:fade-in .4s ease;overflow:hidden;box-shadow:0 0 0 1px #ffffff05,0 8px 32px -8px #0006}.mp-chunk{display:flex;align-items:center;gap:12px}.mp-chunk__label{font-family:var(--font-mono);font-size:12px;font-weight:500;color:var(--text-dim);white-space:nowrap;flex-shrink:0}.mp-chunk__bar{flex:1;height:4px;border-radius:2px;background:var(--surface-2);overflow:hidden}.mp-chunk__fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent-cool),var(--accent));transition:width .4s ease;box-shadow:0 0 12px #7c6ff04d}.mp-detail{display:flex;align-items:center;justify-content:space-between;padding-top:6px;border-top:1px solid rgba(255,255,255,.04)}.mp-detail__stage{font-size:12px;font-weight:400;color:var(--text-dim)}.mp-bar{height:3px;border-radius:2px;background:#ffffff0a;overflow:hidden}.mp-bar__fill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent-cool),var(--accent));transition:width .5s cubic-bezier(.4,0,.2,1);box-shadow:0 0 8px #7c6ff066}.stem-results{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow-y:auto;padding:8px 0;animation:fade-in .4s ease}.stem-results__play-all{align-self:flex-start;padding:8px 20px;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);font-family:var(--font-body);font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,transform .15s}.stem-results__play-all:hover{border-color:var(--accent-cool);transform:scale(1.03)}.stem-row{display:flex;flex-direction:row;gap:12px;align-items:stretch}.stem-row__controls{width:80px;flex-shrink:0;display:flex;flex-direction:column;justify-content:center;gap:6px}.stem-row__name{font-family:var(--font-display);font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}.stem-row__buttons{display:flex;gap:4px}.stem-row__solo,.stem-row__mute{width:24px;height:20px;border:1px solid var(--border);border-radius:4px;background:var(--surface-2);color:var(--text-micro);font-family:var(--font-mono);font-size:10px;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;padding:0}.stem-row__solo:hover,.stem-row__mute:hover{border-color:var(--text-micro);color:var(--text-dim)}.stem-row__solo--active{background:#7c6ff033;border-color:var(--accent-cool);color:var(--accent-cool)}.stem-row__mute--active{background:#f07a5c33;border-color:var(--accent);color:var(--accent)}.stem-row__download{width:24px;height:20px;border:1px solid var(--border);border-radius:4px;background:var(--surface-2);color:var(--text-micro);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s ease;padding:0}.stem-row__download:hover{border-color:#6ee7a0;color:#6ee7a0}.stem-row__spectrogram{flex:1;min-width:0}.stem-row__spectrogram .spectrogram-wrap{height:100px}.clip-dim{position:absolute;top:0;bottom:0;background:#0000008c;pointer-events:none;z-index:3}.clip-selection{position:absolute;top:0;bottom:0;border-top:1px solid rgba(124,111,240,.5);border-bottom:1px solid rgba(124,111,240,.5);pointer-events:none;z-index:3}.clip-handle{position:absolute;top:0;bottom:0;width:16px;transform:translate(-50%);cursor:ew-resize;z-index:5;display:flex;align-items:center;justify-content:center}.clip-handle__grip{width:4px;height:40px;border-radius:2px;background:var(--accent-cool);box-shadow:0 0 8px var(--accent-cool-glow);transition:height .15s ease}.clip-handle:hover .clip-handle__grip{height:56px}.clip-time{position:absolute;top:6px;transform:translate(-50%);font-family:var(--font-mono);font-size:10px;font-weight:500;color:var(--text);background:#0009;padding:2px 6px;border-radius:4px;pointer-events:none;z-index:6;white-space:nowrap;-webkit-user-select:none;user-select:none}.clip-clear{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:24px;height:24px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:#0009;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:6;opacity:0;transition:opacity .15s ease;padding:0;font-size:14px;line-height:1}.spectrogram-wrap:hover .clip-clear{opacity:1}.clip-clear:hover{border-color:var(--accent);background:#000c}.clip-tooltip{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-family:var(--font-mono);font-size:11px;color:var(--text);background:#000000b3;padding:6px 14px;border-radius:8px;border:1px solid rgba(124,111,240,.3);pointer-events:none;z-index:6;white-space:nowrap;-webkit-user-select:none;user-select:none;animation:clip-tooltip-in .3s ease,clip-tooltip-out .4s ease 2.5s forwards}@keyframes clip-tooltip-in{0%{opacity:0;transform:translate(-50%,-50%) scale(.95)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}@keyframes clip-tooltip-out{0%{opacity:1}to{opacity:0}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}