<!-- SS · part 8 -->
r()) + '%'; time.textContent = fmt(a.currentTime) + ' / ' + fmt(dur()); }
    btn.addEventListener('click', function () { if (a.paused) { a.play().catch(function () {}); } else a.pause(); });
    a.addEventListener('play', function () { btn.textContent = '❚❚'; btn.classList.add('is-on'); btn.setAttribute('aria-label', 'Pause preview'); });
    a.addEventListener('pause', function () { btn.textContent = '▶'; btn.classList.remove('is-on'); btn.setAttribute('aria-label', 'Play preview'); });
    a.addEventListener('timeupdate', function () { if (a.currentTime >= 30) { a.pause(); a.currentTime = 0; } ui(); });
    a.addEventListener('loadedmetadata', ui);
    a.addEventListener('ended', function () { a.currentTime = 0; ui(); });
    bar.addEventListener('click', function (e) { var r = bar.getBoundingClientRect(); a.currentTime = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * dur(); if (a.paused) a.play().catch(function () {}); });
  });
})();


===== FILE: public/ss/ss.css =====
/* /ss — SS Music Studio. Red/black, iPhone-first. */
.ss-app{--r:#e3122c;--r2:#ff3048;--bg:#070707;--c1:#121212;--c2:#1b1b1b;--ln:#2a2a2a;--tx:#f2f2f2;--mu:#9a9a9a;
  max-width:1100px;margin:0 auto;padding:12px 12px 90px;color:var(--tx);font:15px/1.45 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;box-sizing:border-box}
.ss-app *,.ss-app *::before,.ss-app *::after{box-sizing:border-box}
.ss-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:4px 0 12px}
.ss-brand{display:flex;align-items:center;gap:12px}
.ss-logo{display:inline-grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--r);color:#000;font-weight:900;font-size:20px;letter-spacing:-1px;box-shadow:0 0 24px rgba(227,18,44,.35)}
.ss-head h1{margin:0;font-size:22px;line-height:1.1;color:#fff}
.ss-head p{margin:2px 0 0;color:var(--mu);font-size:13px}
.ss-now{color:var(--r2);font-size:13px;text-align:right;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-tabs{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:6px;background:rgba(7,7,7,.94);backdrop-filter:blur(6px);border:1px solid var(--ln);border-radius:14px;margin-bottom:12px}
.ss-tab{appearance:none;border:0;background:transparent;color:var(--mu);font:600 14px/1 inherit;padding:12px 4px;border-radius:10px;cursor:pointer;min-height:44px}
.ss-tab.is-on{background:var(--r);color:#000}
.ss-panel{display:none}.ss-panel.is-on{display:block}
.ss-card{background:var(--c1);border:1px solid var(--ln);border-radius:14px;padding:14px;margin-bottom:12px}
.ss-card h2{margin:0 0 8px;font-size:17px;color:#fff}
.ss-label{display:block;margin:10px 0 6px;color:#ddd;font-size:13px;font-weight:600}
.ss-input{width:100%;background:#000;color:var(--tx);border:1px solid #333;border-radius:10px;padding:11px 12px;font:16px/1.35 inherit}
.ss-input:focus{outline:none;border-color:var(--r)}
textarea.ss-input{resize:vertical}
.ss-lyrics{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:14px}
.ss-row2{display:grid;grid-template-columns:1fr;gap:10px;align-items:end}
@media(min-width:620px){.ss-row2{grid-template-columns:1fr 1fr}.ss-row2:has(>:nth-child(3)){grid-template-columns:1fr 1fr 1fr}}
.ss-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.ss-actions-tight{margin-top:0}
.ss-btn{appearance:none;border:1px solid #3a3a3a;background:var(--c2);color:#fff;font:600 15px/1 inherit;padding:12px 16px;border-radius:11px;cursor:pointer;min-height:44px}
.ss-btn:hover{border-color:var(--r)}
.ss-btn:disabled{opacity:.5;cursor:default}
.ss-btn-red{background:var(--r);border-color:var(--r);color:#000}
.ss-btn-red:hover{background:var(--r2)}
.ss-btn-sm{padding:8px 10px;font-size:13px;min-height:36px}
.ss-link{background:none;border:0;color:var(--r2);cursor:pointer;font:inherit;text-decoration:underline;padding:4px}
.ss-hint{color:var(--mu);font-size:13px;margin:10px 0 0}
.ss-remix{display:flex;align-items:center;gap:8px;margin-top:10px;padding:8px 10px;border:1px dashed var(--r);border-radius:10px;font-size:14px}
.ss-titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px}
.ss-title-in{font-size:20px;font-weight:700}
.ss-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ss-chip{background:#000;border:1px solid #3a0d14;color:#ffb3bd;padding:5px 9px;border-radius:999px;font-size:13px}
.ss-copyrow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start}
.ss-unlock{display:flex;flex-wrap:wrap;align-items:center;gap:10px;background:#1a0306;border:1px solid var(--r);border-radius:12px;padding:10px;margin-bottom:12px;font-size:13px;color:#ffc7ce}
.ss-transport{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;position:sticky;top:64px;z-index:15}
.ss-play{min-width:110px}
.ss-mini{display:flex;align-items:center;gap:8px;color:#ccc;font-size:13px;font-weight:600}
.ss-num{width:78px;padding:8px}
.ss-sel{width:auto;paddin