:root { color-scheme: dark; font-family: 'Courier New', monospace; background: #191e26; color: #bfc8ce; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100svh; display: grid; place-items: center; padding: 32px; }
main { width: min(100%, 1100px); }
header, footer, .caption { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
header { padding-bottom: 25px; }
.brand { font-size: 15px; font-weight: bold; letter-spacing: 3px; color: #e3e3d7; }
.light { color: #eab674; }
.edition { font-size: 9px; letter-spacing: 1.5px; color: #788592; }
.screen { border: 1px solid #3b4551; background: #222b36; box-shadow: 0 20px 55px #0003; }
canvas { width: 100%; height: auto; display: block; image-rendering: pixelated; aspect-ratio: 8 / 5; }
.caption { padding: 18px 22px; font-size: 10px; letter-spacing: 1px; border-top: 1px solid #3b4551; }
.live { color: #d9b880; font-size: 9px; }
footer { font-size: 10px; color: #788592; padding-top: 22px; }
@media (max-width: 600px) {
  body { padding: 16px; }
  .edition, .live { display: none; }
  header { padding-bottom: 18px; }
  .caption { padding: 14px; font-size: 9px; }
  footer { align-items: flex-start; font-size: 9px; line-height: 1.7; }
  footer span:last-child { text-align: right; }
}