:root{
  --bg:#0f1113; --panel:#16191c; --line:#2a2f34;
  --ink:#e8e6e1; --dim:#9aa0a6; --brass:#c8a24a; --rec:#e2433b;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
.wrap{max-width:1000px;margin:0 auto;padding:1rem;display:flex;flex-direction:column;gap:1rem;min-height:100%}
header{display:flex;align-items:baseline;justify-content:space-between;gap:1rem}
h1{font-size:1.15rem;margin:0;letter-spacing:.02em}
h1 small{color:var(--brass);font-weight:600}
.role{color:var(--dim);font-size:.85rem}

.stage{position:relative;width:100%;background:#000;border:1px solid var(--line);
  border-radius:12px;overflow:hidden;aspect-ratio:16/9}
#remoteVideo{width:100%;height:100%;object-fit:contain;background:#000;display:block}
#selfVideo{position:absolute;right:12px;bottom:12px;width:24%;max-width:200px;
  aspect-ratio:4/3;object-fit:cover;border:2px solid var(--line);border-radius:8px;
  background:#000;transform:scaleX(-1)} /* mirror own preview */

.bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--panel);
  color:var(--ink);padding:.6rem 1.05rem;border-radius:9px}
button:disabled{opacity:.45;cursor:not-allowed}
button.rec{background:var(--rec);border-color:var(--rec);color:#fff}
.note{color:var(--dim);font-size:.85rem;line-height:1.5}
.note b{color:var(--ink)}
#log{white-space:pre-wrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.72rem;color:var(--dim);background:var(--panel);border:1px solid var(--line);
  border-radius:8px;padding:.6rem .7rem;max-height:130px;overflow:auto;margin-top:auto}
a{color:var(--brass)}