@font-face{
  font-family: Pixel;
  src: url(assets/pixel.woff2) format('woff2');
  font-display: swap;
}
:root{
  --bg:#0b0f16; --glass:#0f1726; --tube:#10192d; --ink:#e7ecf3;
  --glow:#ff7a18; --glow2:#ffd28a; --grid:#122038;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:radial-gradient(1200px 800px at 50% 0%, #0c1424, #0b0f16 60%);
  color:var(--ink); font:600 16px/1.4 system-ui, Segoe UI, Inter, Arial, sans-serif;
  display:grid; place-items:center; overflow:hidden;
}

.crt{
  position:relative; width:min(900px,95vw); aspect-ratio:16/9; border-radius:24px;
  background:linear-gradient(180deg,#0e1422,#0a0d15);
  box-shadow:0 40px 120px rgba(0,0,0,.6), inset 0 0 120px rgba(0,0,0,.7);
  border:1px solid #1a243b;
}
.scanline{
  position:absolute; inset:0; pointer-events:none; opacity:.18;
  background:repeating-linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.06) 2px, transparent 2px, transparent 4px);
  mix-blend-mode:overlay;
}
.bezel{
  position:absolute; inset:22px; border-radius:16px; padding:24px;
  background:
    radial-gradient(1200px 400px at 50% 0%, rgba(255,122,24,.08), transparent 60%),
    linear-gradient(180deg, rgba(28,41,66,.65), rgba(14,20,34,.65));
  border:1px solid #1c2842;
  backdrop-filter: blur(6px);
  box-shadow: inset 0 0 40px rgba(0,0,0,.45);
  display:grid; gap:18px; place-items:center;
}
.logo{
  margin:0; letter-spacing:.35em; font-weight:800; font-size:14px; color:#9bb3ff; opacity:.8;
}
.clock{
  display:flex; align-items:center; gap:min(2vw,18px);
  padding:20px 24px; border-radius:18px; background:rgba(13,19,34,.6);
  border:1px solid #17223a; box-shadow:inset 0 0 30px rgba(0,0,0,.4);
}
.tube{
  width:min(90px,16vw); height:min(130px,23vw); border-radius:14px; position:relative;
  background:linear-gradient(180deg,#0d1628,#0b1322); border:1px solid #1a2742;
  box-shadow:
    inset 0 10px 40px rgba(0,0,0,.65),
    0 8px 30px rgba(0,0,0,.5);
  display:grid; place-items:center;
}
.digit{
  font-family: Pixel, ui-monospace, monospace; font-size:min(84px,14vw);
  color:var(--glow2); text-shadow:
    0 0 10px var(--glow),
    0 0 22px var(--glow),
    0 0 40px rgba(255,122,24,.6),
    0 0 70px rgba(255,122,24,.35);
  filter: drop-shadow(0 6px 18px rgba(255,122,24,.25));
}
.glow{
  position:absolute; inset:-1px; border-radius:inherit; pointer-events:none;
  box-shadow: 0 0 50px rgba(255,122,24,.18), inset 0 0 30px rgba(255,210,138,.06);
}
.colon{
  font-family: Pixel, ui-monospace, monospace; font-size:min(84px,14vw);
  color:#f1b06a; text-shadow:0 0 14px rgba(241,176,106,.6);
  animation:blink 1s step-end infinite;
}
@keyframes blink{ 50%{ opacity:.2 } }

.date{
  color:#9fb2d9; letter-spacing:.2em; font-size:13px; opacity:.9;
}
.footer{
  opacity:.6; font-size:12px; color:#8aa0d1;
}