.relay-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:24px}.relay-stage{min-width:0;padding:24px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 50% 30%,var(--accent-dim),var(--surface) 65%)}.relay-topline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px;font-size:calc(11px * var(--text-scale));color:var(--soft)}.relay-player{width:100%;display:flex;flex-direction:column;align-items:center;gap:22px;min-width:0}.relay-screen{position:relative;overflow:hidden;max-width:100%;border-radius:18px;background:#070a0e;box-shadow:0 0 0 1px var(--border),0 25px 65px #0004;flex:none}.relay-screen video{display:block;width:100%;height:100%;object-fit:contain;touch-action:none;user-select:none}.relay-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:18px;padding:22px;background:radial-gradient(ellipse at 50% 22%,#1e3548,#090d12 78%);color:#eaf4ff}.relay-placeholder[hidden]{display:none}.relay-placeholder h2{font-size:calc(23px * var(--text-scale));line-height:1.15;letter-spacing:-.05em}.relay-placeholder p{font-size:calc(11px * var(--text-scale));color:#a8b7c8;line-height:1.6}.relay-placeholder .button{white-space:normal;max-width:100%}.relay-orbit{font-size:58px;color:#9bc6ff;animation:essential-beat 4s infinite}.relay-toolbar{display:flex;gap:3px;padding:6px;border:1px solid var(--border);border-radius:999px;background:var(--surface2);max-width:100%}.relay-toolbar .live-control{width:42px;height:42px}.relay-hint{text-align:center;margin:20px auto 0;max-width:430px;line-height:1.7}.relay-stage>.live-error{margin-top:16px}.relay-countdown{font-size:calc(50px * var(--text-scale));font-variant-numeric:tabular-nums;line-height:1.2;letter-spacing:-.055em;margin:15px 0}.relay-session .eyebrow{color:var(--muted);font-size:10px;letter-spacing:.15em}.relay-layout aside .hint{line-height:1.8;margin:12px 0 18px}.relay-session .info-row{gap:12px}.relay-session .info-row strong{overflow-wrap:anywhere;text-align:right;font-size:11px}.relay-session>a{margin-top:20px}.relay-layout aside h3{font-size:calc(15px * var(--text-scale))}#relay-text{display:block;width:100%;min-height:120px;resize:vertical;margin:16px 0 12px}.relay-note{background:var(--surface2)}.relay-card-link,.relay-owner-link{margin-top:10px}.relay-player:fullscreen{height:100dvh;width:100%;padding:14px;background:#070a0e;justify-content:center;gap:14px}.relay-player:fullscreen .relay-screen{box-shadow:none;border-radius:0}.relay-player:fullscreen .relay-toolbar{flex:none}.relay-player:fullscreen [data-relay=play]{position:absolute;top:16px;right:16px}
@media(max-width:1050px){.relay-layout{grid-template-columns:minmax(0,1fr) 260px}.relay-stage{padding:18px}}@media(max-width:850px){.relay-layout{grid-template-columns:1fr}.relay-layout>aside{display:grid;grid-template-columns:1fr 1fr}.relay-note{grid-column:1/-1}}@media(max-width:550px){.relay-stage{padding:14px}.relay-topline{flex-wrap:wrap}.relay-layout>aside{display:flex;flex-direction:column}.relay-toolbar{gap:1px;padding:4px}.relay-toolbar .live-control{width:38px;height:40px}.relay-layout{gap:16px}}@media(max-width:350px){.relay-toolbar .live-control{width:34px}.relay-toolbar{gap:0}.relay-placeholder{padding:16px}.relay-placeholder h2{font-size:21px}}

/* Keep session feedback and the controls in reach before the tall phone image. */
.relay-stage{isolation:isolate;align-self:start}
.relay-stage::before{content:"";position:absolute;inset:-12%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 25% 20%,var(--accent-dim),transparent 60%);opacity:.65;animation:relay-ambient 18s ease-in-out infinite}
@keyframes relay-ambient{0%,100%{transform:translate(-3%,-2%) scale(1)}50%{transform:translate(5%,4%) scale(1.08)}}
.relay-topline{flex-wrap:wrap;gap:10px 12px;margin-bottom:18px}
#relay-status{flex:1 1 160px;min-width:0;line-height:1.5}
.relay-top-countdown{display:inline-flex;align-items:center;justify-content:center;min-width:65px;padding:4px 8px;border:1px solid var(--border);border-radius:10px;background:var(--surface2);font-size:calc(12px * var(--text-scale));font-variant-numeric:tabular-nums;line-height:1.5;color:var(--text)}
.relay-stage>.live-error{margin:0 0 18px;line-height:1.7;overflow-wrap:anywhere}
.relay-player{gap:18px}
.relay-toolbar{order:-1;flex:none;gap:4px;padding:6px;border-radius:18px}
.relay-toolbar .live-control{width:44px;height:44px}
.relay-toolbar [data-relay=fullscreen]{color:var(--accent);background:var(--accent-dim)}
.relay-placeholder .button{min-height:48px}
[data-relay=play][hidden]{display:none}
.relay-layout>aside.stack{align-content:start}
.relay-session .info-row strong{min-width:0;font-size:calc(10.5px * var(--text-scale))}
@media(max-width:950px){
  .relay-layout{grid-template-columns:1fr}
  .relay-layout>aside{display:grid;grid-template-columns:1fr 1fr}
  .relay-note{grid-column:1/-1}
}
@media(max-width:550px){
  .relay-layout>aside{display:flex;flex-direction:column}
  .relay-topline>.pill{display:none}
  .relay-topline #relay-status{flex:1 1 140px}
  .relay-toolbar{display:grid;grid-template-columns:repeat(6,44px);gap:4px}
  .relay-toolbar .live-control{justify-self:center}
}
@media(max-width:350px){
  .relay-toolbar{width:100%;grid-template-columns:repeat(3,minmax(44px,1fr))}
}

.relay-capture-card{min-width:0;transition:border-color .25s,background .25s}
.relay-capture-card[hidden],.relay-toolbar .relay-capture-quick[hidden]{display:none}
.relay-capture-heading{display:flex;align-items:center;gap:12px}
.relay-capture-heading h3{margin:0}
.relay-capture-icon{display:grid;place-items:center;width:40px;height:40px;flex:none;border-radius:12px;background:var(--accent-dim);color:var(--accent)}
.relay-capture-icon svg,.relay-capture-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
.relay-capture-toggle{min-height:44px;gap:9px;white-space:normal}
.relay-capture-card[data-capture-active=true]{border-color:var(--accent)}
.relay-capture-toggle[aria-pressed=true]{color:var(--accent);background:var(--accent-dim);border-color:var(--accent)}
.relay-layout aside .relay-capture-status{margin-bottom:0;overflow-wrap:anywhere}
.relay-toolbar .relay-capture-quick{display:none}
.relay-player:fullscreen .relay-capture-quick:not([hidden]){display:flex;align-items:center;justify-content:center}
.relay-player:fullscreen .relay-capture-quick[aria-pressed=true]{color:var(--accent);background:var(--accent-dim)}
.relay-capture-feedback{display:none;order:-1;flex:none;width:min(100%,520px);padding:8px 12px;border:1px solid var(--border);border-radius:12px;background:var(--surface2);color:var(--soft);font-size:calc(11px * var(--text-scale));line-height:1.5}
.relay-capture-feedback p{margin:0;overflow-wrap:anywhere}
.relay-player:fullscreen .relay-capture-feedback:not([hidden]){display:grid;gap:5px}
.relay-capture-feedback [hidden]{display:none}

/* Raw VMOS pixels retain their dimensions; rotate the visual frame around its center. */
.relay-screen video{position:absolute;left:50%;top:50%;transform-origin:center;max-width:none}