:root {
  --bg: #0b0d10;
  --fg: #e8ecef;
  --muted: #8b949e;
  --accent: #3dd6c6;
  --danger: #e35d6a;
  --line: #1c232b;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  min-height: 100dvh;
  background: radial-gradient(120% 80% at 50% -10%, #152029 0%, var(--bg) 55%);
  color: var(--fg);
}
.rc {
  max-width: 28rem;
  margin: 0 auto;
  padding: 1.25rem 1rem 2rem;
  display: grid;
  gap: .75rem;
}
.brand-lockup{display:flex;align-items:center;gap:8px;min-width:0}.brandmark{width:28px;height:28px;flex:none;border-radius:6px;overflow:hidden}.brandmark svg{width:100%;height:100%;display:block}.brand { margin: 0; letter-spacing: .02em; text-transform: none; color: var(--accent); font-size: .72rem; }.brand .co{font-size:.68em;vertical-align:.16em;letter-spacing:0}
h1 { margin: 0; font-size: 1.6rem; font-weight: 600; }
.hint, .fine { margin: 0; color: var(--muted); font-size: .85rem; }
.state {
  margin: 0;
  padding: .55rem .75rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.03);
}
label { display: grid; gap: .35rem; font-size: .8rem; color: var(--muted); }
input, select, button {
  font: inherit;
  border-radius: .4rem;
  border: 1px solid var(--line);
  background: #12171c;
  color: var(--fg);
  padding: .7rem .8rem;
}
.actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
button { cursor: pointer; background: var(--accent); color: #04201c; font-weight: 600; border: none; }
button.stop { background: transparent; color: var(--danger); border: 1px solid var(--danger); }
video {
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: .4rem;
  object-fit: cover;
}
.metrics {
  margin: 0;
  font-size: .68rem;
  color: var(--muted);
  white-space: pre-wrap;
  max-height: 8rem;
  overflow: auto;
}


.companion-head{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:calc(.75rem + env(safe-area-inset-top,0px)) 1rem .7rem;
  background:rgba(11,13,16,.94);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.companion-tabs{display:flex;gap:.4rem}
.companion-tabs button{
  min-height:38px;padding:.45rem .7rem;
  border-radius:999px;border:1px solid var(--line);
  background:#12171c;color:var(--muted);font-weight:650;
}
.companion-tabs button.active{border-color:var(--accent);color:var(--accent)}
[data-companion-panel][hidden]{display:none!important}
.controller-panel{min-height:calc(100dvh - 74px);display:grid;grid-template-rows:auto 1fr}
.controller-intro{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:.8rem 1rem;border-bottom:1px solid var(--line)
}
.controller-intro h1{font-size:1.15rem}
.controller-intro .ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
#controllerFrame{
  width:100%;height:calc(100dvh - 150px);
  min-height:640px;border:0;background:var(--bg)
}
@media(max-width:520px){
  .companion-head{align-items:flex-end}
  .companion-head .hint{display:none}
  .companion-tabs button{padding:.4rem .6rem}
  #controllerFrame{height:calc(100dvh - 128px);min-height:560px}
}