*{box-sizing:border-box}body{margin:0;background:#000;color:#e7e9ea;font:15px -apple-system,system-ui,Segoe UI,Roboto,sans-serif;padding-bottom:140px}
header{position:sticky;top:0;background:#000c;backdrop-filter:blur(8px);display:flex;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #2f3336;z-index:2}
.live{color:#71767b;font-size:13px}.post{display:flex;gap:12px;padding:12px 16px;border-bottom:1px solid #2f3336}.op p{font-size:18px;margin:6px 0}
.av{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#000}
.body{flex:1;min-width:0}.meta span{color:#71767b}.player{display:flex;align-items:center;gap:10px;margin-top:8px;background:#16181c;border:1px solid #2f3336;border-radius:16px;padding:8px 12px}
.play{width:34px;height:34px;border-radius:50%;border:0;background:#1d9bf0;color:#fff;font-size:14px;flex:none}
canvas{flex:1;height:32px;min-width:0;cursor:pointer}.dur{color:#71767b;font-size:13px;flex:none}.playing{background:#0b1a26}
.empty{color:#71767b;text-align:center;padding:30px}footer{position:fixed;bottom:0;left:0;right:0;background:#000;border-top:1px solid #2f3336;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
.row{display:flex;gap:8px}#handle{flex:1;min-width:0;background:#16181c;border:1px solid #2f3336;color:#e7e9ea;border-radius:20px;padding:10px 14px;font-size:16px}
.rec{border:0;border-radius:20px;padding:10px 16px;background:#f91880;color:#fff;font-weight:700;user-select:none;-webkit-user-select:none;touch-action:none}
.rec.on{background:#fff;color:#f91880;animation:p 1s infinite}@keyframes p{50%{opacity:.6}}.timer{text-align:center;color:#f91880;margin-top:6px}
.msg{background:#3a1d1d;color:#ffb4b4;border-radius:10px;padding:10px;margin-bottom:8px;font-size:14px}