:root{
  --bg:#0d0b1a; --bg2:#15122b; --card:#1c1838; --line:#2c2752;
  --gold:#d4af37; --lilac:#e6d7f0; --mint:#b8e0e8; --rose:#b76e79;
  --text:#f3eefb; --muted:#9a90c0;
}
*{box-sizing:border-box}
body{margin:0;font-family:Lato,system-ui,sans-serif;background:radial-gradient(1200px 700px at 70% -10%,#241d4d 0%,var(--bg) 60%);color:var(--text);min-height:100vh}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--line);background:rgba(20,16,42,.7);backdrop-filter:blur(8px)}
.brand{font-family:'Playfair Display',serif;font-size:20px;color:var(--gold);letter-spacing:.5px}
.tag{color:var(--muted);font-size:13px}
.stage{display:grid;grid-template-columns:minmax(360px,1fr) 340px;gap:20px;padding:22px;max-width:1200px;margin:0 auto}
.panel{background:linear-gradient(180deg,var(--bg2),var(--card));border:1px solid var(--line);border-radius:16px;padding:18px}
.canvas-wrap{position:relative;width:100%;aspect-ratio:640/720;background:radial-gradient(600px 600px at 50% 30%,#1a1633,#0c0a18);border-radius:14px;overflow:hidden;border:1px solid var(--line)}
#avatar{width:100%;height:100%;display:block}
.rec-badge{position:absolute;top:12px;left:12px;color:#ff5d6c;font-weight:700;font-size:14px;letter-spacing:1px;text-shadow:0 0 8px #ff5d6c}
.timer{position:absolute;top:12px;right:12px;font-variant-numeric:tabular-nums;color:var(--mint);font-size:14px}
.controls{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.btn{appearance:none;border:1px solid var(--line);background:#241d4d;color:var(--text);padding:10px 16px;border-radius:10px;font-size:14px;cursor:pointer;transition:.15s;text-decoration:none;display:inline-flex;align-items:center}
.btn:hover{border-color:var(--gold)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(90deg,#d4af37,#b76e79);color:#1a1430;font-weight:700;border:none}
.btn.ghost{background:transparent;border-color:var(--mint);color:var(--mint)}
.status{margin-top:12px;color:var(--muted);font-size:13px;min-height:18px}
.side h2{font-family:'Playfair Display',serif;font-size:16px;color:var(--gold);margin:18px 0 10px;border-bottom:1px solid var(--line);padding-bottom:6px}
.side h2:first-child{margin-top:0}
.meters{display:flex;flex-direction:column;gap:9px}
.meter label{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.bar{height:9px;background:#0e0b1f;border-radius:6px;overflow:hidden;border:1px solid var(--line)}
.bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--mint),var(--gold));transition:width .06s linear}
.state-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px}
.state-grid>div{display:flex;justify-content:space-between;font-size:13px;background:#0e0b1f;border:1px solid var(--line);border-radius:8px;padding:7px 10px}
.k{color:var(--muted)} .v{color:var(--lilac);font-weight:700}
.tune{display:flex;flex-direction:column;gap:10px}
.tune label{font-size:13px;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.tune input[type=range]{width:100%;accent-color:var(--gold)}
.tune label.chk{flex-direction:row;align-items:center;gap:8px}
.help{margin-top:16px;font-size:12px;color:var(--muted)}
.help summary{cursor:pointer;color:var(--gold)}
.help p{line-height:1.55}
@media (max-width:860px){.stage{grid-template-columns:1fr}}