:root{
  --bg:#0b1020;
  --panel:#121a33;
  --text:#e8ecff;
  --muted:#aab3d6;
  --accent:#6ee7ff;
  --danger:#ff6b6b;
  --ok:#7CFF9A;
}

*{box-sizing:border-box}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Segoe UI", Roboto, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 30% 20%, #1b2a66 0%, var(--bg) 60%);
  color:var(--text);
}

.app{min-height:100vh; display:flex; flex-direction:column}
.topbar{
  padding:12px 14px;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
}
.brand{font-weight:700; letter-spacing:.3px}
.controls{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
button{
  border:none; padding:10px 12px; border-radius:12px;
  background:#24305e; color:var(--text); cursor:pointer;
}
button[disabled]{opacity:.45; cursor:not-allowed}
button:hover:not([disabled]){filter:brightness(1.08)}
.select{display:flex; gap:8px; align-items:center; padding:8px 10px; border-radius:12px; background:rgba(18,26,51,.75)}
.select span{font-size:12px; color:var(--muted)}
select{background:#1a2450; color:var(--text); border:none; border-radius:10px; padding:8px}

.main{display:flex; justify-content:center; padding:10px 14px 18px}
.stageWrap{
  position:relative;
  width:min(960px, 100%);
  background:rgba(18,26,51,.55);
  border:1px solid rgba(255,255,255,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 16px 60px rgba(0,0,0,.35);
}
canvas{width:100%; height:auto; display:block; background:linear-gradient(#10183a, #0c1030)}

.meter{
  position:absolute; left:12px; bottom:12px;
  width:min(300px, calc(100% - 24px));
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.meterLabel{font-size:12px; color:var(--muted); margin-bottom:6px}
.meterBar{
  height:14px; border-radius:999px;
  background:rgba(255,255,255,.08);
  overflow:hidden;
}
.meterFill{
  height:100%;
  width:0%;
  background:linear-gradient(90deg, #7CFF9A, #6ee7ff, #ff6b6b);
  border-radius:999px;
  transition: width 80ms linear;
}
.meterHint{margin-top:6px; font-size:12px; color:var(--muted)}

.hud{
  position:absolute; right:12px; top:12px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,.35);
  border:1px solid rgba(255,255,255,.08);
  min-width: 240px;
  font-size:12px;
  color:var(--muted);
  white-space:pre;
}

.video{position:absolute; right:-9999px; width:320px; height:240px; opacity:0}