@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root {
  color-scheme: dark;
  --ink: #080a10;
  --panel: #10131b;
  --line: #242a36;
  --bone: #d5c59e;
  --blue: #177cff;
  --muted: #788194;
}

.stage-wrap:fullscreen {
  width: 100vw;
  height: 100vh;
  min-height: 0;
  border: 0;
  background: #000;
}
#exit-fullscreen {
  display: none;
}
.stage-wrap:fullscreen #exit-fullscreen {
  display: block;
  position: absolute;
  right: 20px;
  bottom: 20px;
  opacity: 0;
}
.stage-wrap:fullscreen:hover #exit-fullscreen,
.stage-wrap:fullscreen #exit-fullscreen:focus-visible {
  opacity: 1;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background:
    radial-gradient(ellipse at 50% -40%, #1a202c 0, transparent 65%), var(--ink);
  color: #e6e7e9;
  font-family: "Space Grotesk", sans-serif;
  min-height: 100vh;
  display: grid;
  place-items: center;
}
.shell {
  width: min(1160px, calc(100% - 48px));
  padding: 24px 0;
}
.topbar,
footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font:
    11px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.09em;
}
.topbar {
  height: 44px;
  margin-bottom: 16px;
}
.brand {
  font-weight: 700;
  letter-spacing: 0.12em;
}
.mark {
  color: var(--blue);
  font-size: 19px;
  margin-right: 9px;
}
.sub {
  color: var(--muted);
  font-weight: 400;
  margin-left: 12px;
}
.live {
  color: #aeb5c3;
}
.live i,
.overlay i {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2788ff;
  box-shadow: 0 0 12px #2788ff;
  margin-right: 8px;
}
.stage-wrap {
  height: min(68vh, 670px);
  min-height: 360px;
  position: relative;
  border: 1px solid #2a303b;
  background: #07090e;
  overflow: hidden;
  box-shadow: 0 28px 100px #0009;
}
#video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  background: #07090e;
}
.overlay {
  position: absolute;
  color: #d9d2bf;
  font:
    10px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.08em;
  pointer-events: none;
  text-shadow: 0 1px 5px #000;
}
.overlay span {
  display: block;
  color: #8f96a4;
  margin-top: 6px;
  font-size: 9px;
}
.top-left {
  top: 20px;
  left: 22px;
}
.top-right {
  top: 20px;
  right: 22px;
  color: #bac0cd;
}
.top-right i {
  margin: 0 0 0 8px;
  width: 6px;
  height: 6px;
  background: #e14345;
  box-shadow: 0 0 9px #f33;
}
.bottom-left {
  left: 22px;
  bottom: 18px;
  color: #9aa7ba;
}
.crosshair {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #aebcd244;
  font: 18px monospace;
  pointer-events: none;
}
.controls {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
}
.identity {
  display: grid;
  gap: 5px;
}
.eyebrow {
  font:
    9px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.13em;
  color: var(--blue);
}
.identity strong {
  font-size: 17px;
  letter-spacing: 0.04em;
}
.muted {
  font:
    10px "IBM Plex Mono",
    monospace;
  color: var(--muted);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.button {
  height: 42px;
  padding: 0 17px;
  border: 1px solid #343b48;
  color: #d7d9de;
  background: #11151d;
  font:
    10px "IBM Plex Mono",
    monospace;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: 0.18s;
}
.button:hover {
  border-color: #6386bb;
  background: #151d2b;
}
.button.cast {
  background: #176de3;
  border-color: #3287ff;
  color: #fff;
}
.button.cast:hover {
  background: #3287ff;
}
.cast-icon {
  font-size: 15px;
  margin-right: 8px;
}
.button.secondary {
  color: #afb7c6;
}
footer {
  height: 45px;
  color: #626c7d;
  font-size: 9px;
}
footer b {
  color: var(--blue);
  font-size: 8px;
}
@media (max-width: 680px) {
  .shell {
    width: calc(100% - 24px);
    padding: 12px 0;
  }
  .sub {
    display: none;
  }
  .stage-wrap {
    min-height: 320px;
    height: 58vh;
  }
  .controls {
    height: auto;
    min-height: 120px;
    gap: 14px;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 18px 4px;
  }
  .actions {
    width: 100%;
  }
  .button {
    flex: 1;
    padding: 0 8px;
    font-size: 9px;
  }
  footer {
    font-size: 8px;
  }
  footer span:last-child {
    display: none;
  }
}