@import "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap";:root{--ink:#1a2421;--muted:#5a6b64;--paper:#f3efe6;--line:#1a24211f;--accent:#0d7a6f;--accent-deep:#085a52;--danger:#a33b2b;--danger-soft:#f3ddd8;--layer-vocals:#0d7a6f;--layer-drums:#b85c2e;--layer-bass:#3d5a80;--layer-other:#6b5b95;--radius:14px;--shadow:0 18px 50px #1a242114;--font-display:"Fraunces", Georgia, serif;--font-body:"DM Sans", sans-serif;font-family:var(--font-body);color:var(--ink);background:var(--paper);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-height:100vh;margin:0}#root{min-height:100vh}button,input{font:inherit}.page{min-height:100vh;position:relative}.atmosphere{z-index:-1;background:radial-gradient(80% 55% at 12% -10%,#0d7a6f2e,#0000 55%),radial-gradient(70% 50% at 95% 8%,#b85c2e24,#0000 50%),linear-gradient(165deg,#f7f3ea 0%,#ebe4d4 48%,#e4ddd0 100%);animation:14s ease-in-out infinite alternate wash;position:fixed;inset:0}@keyframes wash{0%{filter:hue-rotate()}to{filter:hue-rotate(8deg)}}.site-header{padding:1.75rem clamp(1.25rem,4vw,3rem) 0}.brand{font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:clamp(2.4rem,6vw,3.6rem);font-weight:700;line-height:1}.badge{color:var(--muted);margin:.55rem 0 0;font-size:.88rem}.shell{width:min(720px,100% - 2rem);margin:0 auto;padding:1.5rem 0 4rem}.hero{animation:.7s both rise}@keyframes rise{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.headline{font-family:var(--font-display);letter-spacing:-.02em;max-width:18ch;margin:0 0 .85rem;font-size:clamp(1.55rem,3.4vw,2.1rem);font-weight:500;line-height:1.2}.lede{color:var(--muted);max-width:40ch;margin:0 0 1.75rem;font-size:1.05rem}.speed-row{flex-wrap:wrap;align-items:center;gap:.45rem;margin:0 0 1.1rem;display:flex}.speed-label{color:var(--muted);margin-right:.25rem;font-size:.88rem;font-weight:500}.mobile-note{color:var(--ink);background:#b85c2e1f;border-radius:10px;margin:0 0 1rem;padding:.75rem .9rem;font-size:.9rem}.job-note{color:var(--layer-drums);margin:.35rem 0 0;font-size:.82rem}.speed-hint{color:var(--muted);flex:12rem;font-size:.8rem}.dropzone{border-radius:var(--radius);backdrop-filter:blur(6px);cursor:pointer;text-align:center;background:#ffffff73;border:1.5px dashed #1a242147;place-content:center;gap:.35rem;min-height:160px;padding:1.5rem;transition:border-color .2s,background .2s,transform .25s;display:grid}.dropzone:hover,.dropzone.dragover{border-color:var(--accent);background:#ffffffb3;transform:translateY(-2px)}.dropzone-title{font-family:var(--font-display);font-size:1.35rem;font-weight:500}.dropzone-hint{color:var(--muted);font-size:.92rem}.file-name{color:var(--accent-deep);margin:.85rem 0 0;font-size:.95rem}.progress-card{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#ffffff9e;padding:1.25rem 1.35rem;animation:.4s both rise}.progress-msg{margin:0 0 .75rem;font-weight:500}.progress-track{background:#1a24211a;border-radius:99px;height:8px;overflow:hidden}.progress-fill{background:var(--accent);border-radius:99px;height:100%;transition:width .25s}.progress-pct{color:var(--accent-deep);margin:.5rem 0 0;font-size:.9rem}.progress-hint{color:var(--muted);margin:.65rem 0 0;font-size:.85rem}.status{min-height:1.5rem;color:var(--muted);margin:1rem 0 0;font-size:.95rem}.status.error{color:var(--danger)}.btn{appearance:none;font-family:var(--font-body);cursor:pointer;border:none;border-radius:10px;padding:.85rem 1.25rem;font-size:.98rem;font-weight:600;transition:background .2s,color .2s,transform .15s,opacity .2s}.btn:disabled{opacity:.45;cursor:not-allowed}.btn:not(:disabled):active{transform:scale(.98)}.btn.primary{background:var(--accent);color:#f7f3ea}.btn.primary:not(:disabled):hover{background:var(--accent-deep)}.btn.ghost{color:var(--ink);border:1px solid var(--line);background:0 0}.btn.ghost:hover{background:#ffffff8c}.btn.danger{background:var(--danger-soft);color:var(--danger)}.btn.danger:hover{background:#ebcfc8}.btn.small{padding:.45rem .75rem;font-size:.85rem;font-weight:500}.mixer{animation:.55s both rise}.mixer-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1.25rem;display:flex}.eyebrow{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 .25rem;font-size:.78rem}.song-title{font-family:var(--font-display);word-break:break-word;margin:0;font-size:1.45rem;font-weight:500}.mixer-actions{flex-wrap:wrap;gap:.5rem;display:flex}.layers{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.layer{--swatch:var(--accent);border-radius:var(--radius);box-shadow:var(--shadow);border:1px solid var(--line);background:#ffffff9e;grid-template-columns:6px 1fr auto;align-items:center;gap:.85rem;padding:1rem 1rem 1rem .85rem;transition:opacity .25s,transform .25s;animation:.45s both layer-in;display:grid}.layer:first-child{animation-delay:50ms}.layer:nth-child(2){animation-delay:.12s}.layer:nth-child(3){animation-delay:.19s}.layer:nth-child(4){animation-delay:.26s}@keyframes layer-in{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.layer[data-id=vocals]{--swatch:var(--layer-vocals)}.layer[data-id=drums]{--swatch:var(--layer-drums)}.layer[data-id=instruments]{--swatch:var(--layer-other)}.trim-note{color:var(--muted);margin:.4rem 0 0;font-size:.88rem}.layer.deleted{opacity:.48}.layer-bar{background:var(--swatch);border-radius:99px;align-self:stretch;width:6px}.layer-body{gap:.55rem;min-width:0;display:grid}.layer-meta{flex-wrap:wrap;align-items:baseline;gap:.4rem .75rem;display:flex}.layer-name{margin:0;font-size:1.02rem;font-weight:600}.layer-name-ar{color:var(--muted);font-size:.88rem}.layer-badge{letter-spacing:.04em;text-transform:uppercase;color:var(--danger);font-size:.72rem;font-weight:600}.layer audio{width:100%;height:36px}.layer-controls{flex-direction:column;gap:.4rem;display:flex}.mixer-note{color:var(--muted);margin:1.25rem 0 0;font-size:.9rem}.queue{margin-top:2rem;animation:.45s both rise}.queue-head{flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin-bottom:1rem;display:flex}.queue-title{font-family:var(--font-display);margin:0;font-size:1.35rem;font-weight:500}.job-list{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.job{border-radius:var(--radius);border:1px solid var(--line);box-shadow:var(--shadow);background:#ffffff9e;gap:.65rem;padding:1rem 1.1rem;display:grid}.job-top{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:.75rem;display:flex}.job-name{word-break:break-word;margin:0;font-weight:600}.job-sub{color:var(--muted);margin:.25rem 0 0;font-size:.88rem}.job-actions{flex-wrap:wrap;gap:.4rem;display:flex}.job-progress{height:6px}.phases{grid-template-columns:repeat(5,minmax(0,1fr));gap:.35rem;margin:0;padding:0;list-style:none;display:grid}.phase{text-align:center;flex-direction:column;align-items:center;gap:.2rem;min-width:0;display:flex}.phase-dot{background:#1a24211f;border-radius:99px;width:100%;height:4px}.phase-done .phase-dot,.phase-current .phase-dot{background:var(--accent)}.phase-current .phase-dot{box-shadow:0 0 0 3px #0d7a6f29}.phase-failed .phase-dot{background:var(--danger)}.phase-ar{font-size:.78rem;font-weight:650;line-height:1.15}.phase-en{color:var(--muted);letter-spacing:.01em;font-size:.66rem;line-height:1.1}.phase-wait{opacity:.48}.phase-current .phase-ar{color:var(--accent-deep)}.phase-failed .phase-ar{color:var(--danger)}.phase-now{color:var(--accent-deep);margin:0;font-size:.88rem}.model-banner{color:var(--accent-deep);background:#0d7a6f1a;border-radius:12px;margin:-.85rem 0 1.25rem;padding:.75rem .9rem;font-size:.92rem}.job-audio{width:100%;height:36px}.job-outputs{gap:.65rem;display:grid}.output-row{flex-wrap:wrap;gap:.4rem;display:flex}.job-failed .job-sub{color:var(--danger)}.job-done{border-color:#0d7a6f47}.site-footer{text-align:center;color:var(--muted);padding:0 1.25rem 2rem;font-size:.85rem}.site-footer p{margin:0}@media (width<=560px){.layer{grid-template-columns:6px 1fr}.layer-controls{flex-flow:wrap;grid-column:2}.headline{max-width:none}}