:root{
  --ink:#0b0c0a;
  --paper:#e9e4d6;
  --amber:#ffb100;
  --amber-dim:#8a6100;
  --red:#ff3b30;
  --teal:#3ddad7;
  --line: rgba(233,228,214,0.14);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background:var(--ink);
  color:var(--paper);
  font-family:'Space Mono', monospace;
}
.mono-display{font-family:'Major Mono Display', monospace;}
.vt{font-family:'VT323', monospace;}

/* grain */
.grain{
  position:fixed; inset:0; pointer-events:none; z-index:60; opacity:.06; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
/* scanlines */
.scan{
  position:fixed; inset:0; pointer-events:none; z-index:61;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0.35) 0px, rgba(0,0,0,0.35) 1px, transparent 2px, transparent 3px);
  opacity:.25;
}
.vignette{
  position:fixed; inset:0; pointer-events:none; z-index:59;
  box-shadow: inset 0 0 18vw rgba(0,0,0,0.85);
}

/* glitch title */
.glitch{position:relative; display:inline-block;}
.glitch::before, .glitch::after{
  content:attr(data-text);
  position:absolute; left:0; top:0; width:100%; height:100%;
  overflow:hidden; background:var(--ink);
}
.glitch::before{
  left:2px; text-shadow:-2px 0 var(--red); animation: glitch1 4.5s infinite linear alternate-reverse;
}
.glitch::after{
  left:-2px; text-shadow:-2px 0 var(--teal); animation: glitch2 3.7s infinite linear alternate-reverse;
}
@keyframes glitch1{
  0%{clip-path:inset(0 0 90% 0);} 10%{clip-path:inset(10% 0 60% 0);} 20%{clip-path:inset(70% 0 5% 0);}
  30%{clip-path:inset(30% 0 40% 0);} 40%{clip-path:inset(5% 0 80% 0);} 50%{clip-path:inset(60% 0 10% 0);}
  60%{clip-path:inset(20% 0 55% 0);} 70%{clip-path:inset(80% 0 2% 0);} 80%{clip-path:inset(40% 0 30% 0);}
  90%{clip-path:inset(15% 0 70% 0);} 100%{clip-path:inset(0 0 90% 0);}
}
@keyframes glitch2{
  0%{clip-path:inset(80% 0 2% 0);} 10%{clip-path:inset(30% 0 40% 0);} 20%{clip-path:inset(5% 0 85% 0);}
  30%{clip-path:inset(60% 0 15% 0);} 40%{clip-path:inset(20% 0 55% 0);} 50%{clip-path:inset(45% 0 30% 0);}
  60%{clip-path:inset(70% 0 5% 0);} 70%{clip-path:inset(10% 0 75% 0);} 80%{clip-path:inset(35% 0 45% 0);}
  90%{clip-path:inset(55% 0 20% 0);} 100%{clip-path:inset(80% 0 2% 0);}
}

.blink{animation:blink 1.6s steps(1) infinite;}
@keyframes blink{50%{opacity:0.15;}}

.marquee-track{
  display:inline-block; white-space:nowrap; animation:marquee 22s linear infinite;
}
@keyframes marquee{from{transform:translateX(0);} to{transform:translateX(-50%);}}

.card-tape{
  background:linear-gradient(180deg, rgba(233,228,214,0.03), rgba(233,228,214,0.01));
  border:1px solid var(--line);
}
.card-tape:hover{border-color:var(--amber-dim); box-shadow:0 0 0 1px var(--amber-dim), 0 0 30px rgba(255,177,0,0.06);}

.dashed{border-style:dashed;}

.btn-amber{
  background:var(--amber); color:#161200; font-weight:700; letter-spacing:.04em;
}
.btn-amber:hover{background:#ffc94d;}
.btn-outline{
  border:1px solid var(--paper); color:var(--paper);
}
.btn-outline:hover{background:var(--paper); color:var(--ink);}

::selection{background:var(--amber); color:#161200;}

input::placeholder{color:rgba(233,228,214,0.4);}

#signal-panel{
  background: radial-gradient(circle at 35% 30%, #17160f, #0b0c0a 70%);
}

#broadcast-canvas{display:block;}