:root {
  --bg: #06080b;
  --panel: #0d1117;
  --line: #1c2430;
  --text: #d7dee8;
  --muted: #7d8897;
  --led: #3ff3ff;
  --led-dim: rgba(63, 243, 255, .18);
  --live: #ff3b5c;
  --chrome: linear-gradient(180deg, #ffffff 0%, #c9d1db 38%, #6b7684 52%, #e3e8ee 70%, #9aa5b2 100%);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background: radial-gradient(1200px 600px at 50% -10%, #0f1a24 0%, var(--bg) 60%) fixed, var(--bg);
  color: var(--text);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
}
.grid {
  position: fixed; inset: auto 0 0 0; height: 45vh; pointer-events: none;
  background:
    linear-gradient(transparent 0 calc(100% - 1px), var(--led-dim) 0) 0 0 / 100% 36px,
    linear-gradient(90deg, transparent 0 calc(100% - 1px), var(--led-dim) 0) 0 0 / 48px 100%;
  transform: perspective(400px) rotateX(58deg); transform-origin: bottom;
  mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 85%);
  opacity: .55;
}
main {
  position: relative;
  width: 100%; max-width: 1120px; margin: 0 auto;
  padding: 28px 16px 40px;
}
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.logo {
  margin: 0; font: 800 clamp(28px, 6vw, 44px)/1 Orbitron, system-ui, sans-serif; letter-spacing: .04em;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 #000) drop-shadow(0 0 18px rgba(200, 220, 240, .15));
}
.logo span { background: none; color: var(--led); -webkit-text-fill-color: var(--led); text-shadow: 0 0 14px var(--led), 0 0 2px #fff; }
.badge {
  font: 600 12px/1 Orbitron, system-ui, sans-serif; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--panel);
  white-space: nowrap;
}
.badge.on { color: #fff; background: var(--live); border-color: var(--live); box-shadow: 0 0 18px rgba(255, 59, 92, .5); }
.badge.on::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: #fff; vertical-align: 1px; animation: pulse 1.4s infinite; }
@keyframes pulse { 50% { opacity: .25; } }

.screen {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  border-radius: 14px; overflow: hidden; background: #000;
  border: 1px solid #2a3442;
  box-shadow: 0 0 0 1px #000, 0 0 0 4px #121820, 0 0 0 5px #3a4655, 0 30px 80px rgba(0, 0, 0, .6), 0 0 60px rgba(63, 243, 255, .06);
}
video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }

.offline {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 16px; text-align: center;
  background: radial-gradient(60% 70% at 50% 45%, #0b141b 0%, #040608 100%);
}
.offline[hidden] { display: none; }
.face {
  position: relative; width: clamp(110px, 22vw, 180px); aspect-ratio: 1.35; border-radius: 28% / 34%;
  background: linear-gradient(180deg, #0a0f14, #020304); margin-bottom: 10px;
  box-shadow: inset 0 0 0 2px #1f2a36, 0 0 0 6px #aab4c0, 0 0 0 7px #4d5866, 0 10px 30px rgba(0, 0, 0, .7);
}
.eye, .mouth { position: absolute; display: block; background: var(--led); box-shadow: 0 0 10px var(--led), 0 0 24px var(--led-dim); opacity: .75; }
.eye { top: 34%; width: 15%; height: 6%; border-radius: 4px; animation: doze 5s ease-in-out infinite; }
.eye:first-child { left: 24%; } .eye:nth-child(2) { right: 24%; }
.mouth { left: 42%; width: 16%; height: 4%; bottom: 26%; border-radius: 3px; opacity: .45; }
@keyframes doze { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
.offline .title { margin: 0; font: 800 clamp(18px, 3.4vw, 28px)/1.1 Orbitron, system-ui, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: var(--led); text-shadow: 0 0 12px var(--led-dim); }
.offline .sub { margin: 0; max-width: 34em; color: var(--muted); font-size: clamp(12px, 2.2vw, 14px); }


footer p { margin: 18px 2px 0; color: var(--muted); font-size: 13px; }

@media (max-width: 520px) {
  main { padding-top: 18px; }
  .screen { border-radius: 10px; }
  .offline .sub { display: none; }
}
@media (prefers-reduced-motion: reduce) { .eye, .badge.on::before { animation: none; } }