:root {
  color-scheme: dark;
  background: #000;
  font-family: system-ui, sans-serif;
}

* { box-sizing: border-box; }

html, body, .stage {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #000;
}

#playoutVideo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #000;
}

.status {
  position: fixed;
  left: 24px;
  bottom: 24px;
  display: grid;
  gap: 4px;
  max-width: min(640px, calc(100vw - 48px));
  padding: 12px 16px;
  color: #fff;
  background: rgb(0 0 0 / 72%);
  border-left: 4px solid #ff4f79;
}

.status span, .status small { color: #c9c9c9; }
.status strong { letter-spacing: .05em; }

#start {
  position: fixed;
  inset: 50% auto auto 50%;
  translate: -50% -50%;
  padding: 16px 24px;
  border: 0;
  border-radius: 8px;
  color: #111;
  background: #ffd24d;
  font: 800 18px/1 system-ui, sans-serif;
  cursor: pointer;
}

#start[hidden] { display: none; }
body.clean .status { display: none; }
body[data-state="playing"] .status { opacity: 0; pointer-events: none; }