:root{--bg:#0b0c10;--surface:#121319;--surface-2:#16171f;--line:#ffffff12;--line-strong:#ffffff21;--text:#edecf0;--muted:#8a8c99;--faint:#5a5c68;--accent:#ff5b7a;--accent-2:#ff8a5c;--accent-soft:#ff5b7a21;--accent-glow:#ff5b7a80;--ok:#4ad295;--radius:12px;--ease:cubic-bezier(.22, 1, .36, 1);--serif:"Instrument Serif", Georgia, "Times New Roman", serif;--sans:"Hanken Grotesk", system-ui, -apple-system, sans-serif;--mono:"JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace}*{box-sizing:border-box}html{-webkit-font-smoothing:antialiased;text-rendering:optimizelegibility}body{font-family:var(--sans);min-height:100vh;color:var(--text);background:radial-gradient(900px 500px at 12% -8%, #ff5b7a1a, transparent 60%), radial-gradient(1000px 600px at 105% 0%, #5a8cff14, transparent 55%), var(--bg);background-attachment:fixed;margin:0}.grain{pointer-events:none;z-index:100;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");position:fixed;inset:0}.spectrum{z-index:101;opacity:.85;background:linear-gradient(90deg,#df4949,#e4af44,#8cd742,#3bce9d,#49addf,#895fdd,#e052b1,#df4949) 0 0/200% 100%;height:3px;position:fixed;inset:0 0 auto}body[data-state=transcribing] .spectrum{animation:2.4s linear infinite drift}@keyframes drift{to{background-position:-200% 0}}.hero{max-width:1440px;animation:rise .7s var(--ease) both;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px;margin:0 auto;padding:40px 28px 22px;display:flex}.brand h1{font-family:var(--serif);letter-spacing:-.01em;background:linear-gradient(#fff 30%,#c9c8d2);color:#0000;-webkit-background-clip:text;background-clip:text;margin:0;font-size:clamp(44px,7vw,78px);font-weight:400;line-height:.9}.tagline{font-family:var(--mono);letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin:10px 0 0 4px;font-size:12px}.status-wrap{background:var(--surface);border:1px solid var(--line);border-radius:999px;align-items:center;gap:10px;padding:9px 15px;display:flex;box-shadow:inset 0 1px #ffffff08}#status{color:var(--muted);font-variant-numeric:tabular-nums;font-size:13px}.status-dot{background:var(--faint);width:8px;height:8px;transition:background .3s var(--ease);border-radius:50%;flex:none}body[data-state=transcribing] .status-dot{background:var(--accent);animation:ping 1.3s var(--ease) infinite}body[data-state=done] .status-dot{background:var(--ok)}body[data-state=error] .status-dot{background:var(--accent)}@keyframes ping{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 7px #0000}to{box-shadow:0 0 #0000}}main{grid-template-columns:1fr 248px;gap:16px;max-width:1440px;margin:0 auto;padding:8px 28px 48px;display:grid}.card,#conditioning,#piano-roll-wrap,#instruments{background:linear-gradient(180deg, #ffffff06, transparent 120px), var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:inset 0 1px #ffffff0a,0 18px 40px -28px #000000e6}#controls{animation:rise .7s var(--ease) 60ms both}#piano-roll-wrap{animation:rise .7s var(--ease) .12s both}#instruments{animation:rise .7s var(--ease) .18s both}#conditioning{animation:rise .7s var(--ease) .24s both}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.eyebrow{font-family:var(--mono);letter-spacing:.26em;text-transform:uppercase;color:var(--accent);vertical-align:1px;margin-right:7px;font-size:10px;display:inline-block}#conditioning h2,#instruments h2{letter-spacing:.01em;margin:0;font-size:15px;font-weight:600}.hint{color:var(--faint);margin-top:3px;font-size:12px;font-weight:400;display:block}#conditioning{grid-column:1/-1;padding:16px 18px 18px}#conditioning-header{align-items:flex-start;gap:12px;margin-bottom:14px;display:flex}#conditioning-actions{margin-left:auto}#conditioning-list{grid-template-columns:repeat(auto-fill,minmax(186px,1fr));gap:6px 14px;font-size:13px;display:grid}#conditioning-list label{cursor:pointer;color:var(--muted);-webkit-user-select:none;user-select:none;transition:background .15s var(--ease), color .15s var(--ease);border-radius:8px;align-items:center;gap:9px;padding:6px 9px;display:flex}#conditioning-list label:hover{color:var(--text);background:#ffffff0a}#conditioning-list input[type=checkbox]{appearance:none;border:1px solid var(--line-strong);background:var(--bg);cursor:pointer;width:15px;height:15px;transition:background .15s var(--ease), border-color .15s var(--ease);border-radius:5px;flex:none;place-content:center;margin:0;display:grid}#conditioning-list input[type=checkbox]:after{content:"";width:8px;height:8px;transition:transform .15s var(--ease);background:var(--accent);border-radius:2px;transform:scale(0)}#conditioning-list input[type=checkbox]:checked{border-color:var(--accent)}#conditioning-list input[type=checkbox]:checked:after{transform:scale(1)}#drop-overlay{z-index:200;pointer-events:none;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);opacity:0;transition:opacity .15s var(--ease);background:#0b0c10c7;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}body.drag #drop-overlay{opacity:1}.drop-overlay-inner{text-align:center;border:1.5px dashed var(--accent);border-radius:var(--radius);background:var(--surface);flex-direction:column;align-items:center;gap:14px;padding:44px 64px;display:flex;box-shadow:0 24px 60px -24px #000000e6}.drop-overlay-inner p{color:var(--muted);margin:0;font-size:15px}.drop-overlay-inner strong{color:var(--text);font-weight:600}.dropzone-wave{fill:none;width:120px;height:30px;stroke:var(--accent);stroke-width:2px;stroke-linecap:round;stroke-linejoin:round}button{font-family:var(--sans);color:var(--text);background:var(--surface-2);border:1px solid var(--line-strong);cursor:pointer;transition:background .15s var(--ease), border-color .15s var(--ease), transform 80ms var(--ease);border-radius:9px;padding:8px 16px;font-size:13px;font-weight:500}button:hover{background:#20212b;border-color:#fff3}button:active{transform:translateY(1px)}button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button:disabled{opacity:.4;cursor:not-allowed;transform:none}#file-button{background:var(--text);color:#15151b;border-color:#0000;border-radius:11px;padding:12px 28px;font-size:15px;font-weight:600}#file-button:hover{background:#fff}#conditioning-actions button{padding:5px 13px;font-size:12px}#controls{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);grid-column:1/-1;align-items:center;gap:10px;padding:12px 14px;display:flex}#clock{font-family:var(--mono);color:var(--muted);background:var(--bg);border:1px solid var(--line);font-variant-numeric:tabular-nums;border-radius:7px;padding:4px 10px;font-size:13px}#mix-label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);align-items:center;gap:9px;margin-left:auto;font-size:11px;display:inline-flex}#mix-label .mix-end{text-align:center;min-width:30px}#mix-label.disabled{opacity:.4}#mix:disabled{cursor:not-allowed;filter:grayscale()}#stereo-label{font-family:var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:6px;font-size:11px;display:inline-flex}#stereo-label input{cursor:pointer;accent-color:var(--accent)}#mix{appearance:none;background:linear-gradient(90deg, #5a8cffb3, var(--accent));cursor:pointer;border-radius:999px;width:170px;height:4px}#mix::-webkit-slider-thumb{appearance:none;border:2px solid var(--accent);width:16px;height:16px;transition:transform .1s var(--ease);background:#fff;border-radius:50%;box-shadow:0 2px 8px #00000080}#mix::-webkit-slider-thumb:hover{transform:scale(1.15)}#mix::-moz-range-thumb{border:2px solid var(--accent);background:#fff;border-radius:50%;width:16px;height:16px;box-shadow:0 2px 8px #00000080}#download{align-items:center;gap:7px;display:inline-flex}#download:not(:disabled){background:linear-gradient(180deg, var(--accent), #e84668);color:#fff;box-shadow:0 0 0 1px #ff5b7a66, 0 8px 22px -10px var(--accent-glow);border-color:#0000;font-weight:600}#download:not(:disabled):hover{filter:brightness(1.08)}.dl-icon{fill:none;stroke:currentColor;stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round;width:14px;height:14px}#piano-roll-wrap{background:linear-gradient(#ffffff05,#0000 60px),#0a0b0e;grid-column:1;padding:0;position:relative;overflow:hidden}#piano-roll{width:100%;height:420px;display:block}#instruments{grid-column:2;align-self:start;padding:16px 16px 18px}#instruments h2{margin-bottom:12px}#instrument-list{flex-direction:column;gap:2px;margin:0;padding:0;font-size:13px;list-style:none;display:flex}#instrument-list li{color:var(--muted);animation:rise .4s var(--ease) both;transition:background .15s var(--ease);border-radius:8px;align-items:center;gap:10px;padding:7px 9px;display:flex}#instrument-list li:hover{color:var(--text);background:#ffffff0a}#instrument-list .swatch{border-radius:3px;flex:none;width:12px;height:12px;box-shadow:0 0 10px -1px}#instrument-list .inst-name{text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;overflow:hidden}#instrument-list li.inst-hidden .swatch{opacity:.25;box-shadow:none}#instrument-list li.inst-hidden .inst-name{opacity:.45}#instrument-list .icon-btn{width:24px;height:24px;color:var(--muted);opacity:.55;cursor:pointer;transition:opacity .15s var(--ease), background .15s var(--ease), color .15s var(--ease);background:0 0;border:none;border-radius:6px;flex:none;justify-content:center;align-items:center;margin:-4px 0;padding:0;display:flex}#instrument-list li:hover .icon-btn{opacity:1}#instrument-list .icon-btn:hover{color:var(--text);background:#ffffff14}#instrument-list .icon-btn.off{opacity:1;color:#f57}@media (width<=760px){main{grid-template-columns:1fr}#piano-roll-wrap,#instruments{grid-column:1}.hero{padding-top:30px}#controls{flex-wrap:wrap}#mix-label{margin-left:0}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}