.screen-page{
  --screen-bg:rgba(3, 8, 10, .76);
  --screen-bg-strong:rgba(2, 4, 7, .9);
  --signal:#bff7ec;
  --signal-red:#ff5a72;
  --signal-blue:#68d8ff;
  --amber:#ead58c;
  --ghost:rgba(246,241,231,.86);
  min-height:100vh;
  padding-top:1.35rem;
  overflow-x:hidden;
  background-color:#05090b;
}

.tv-wash,
.scanlines,
.signal-noise{
  position:fixed;
  inset:0;
  pointer-events:none;
}

.tv-wash{
  z-index:1;
  background:
    radial-gradient(900px 620px at 72% 10%, rgba(104,216,255,.12), transparent 64%),
    radial-gradient(720px 560px at 20% 76%, rgba(255,90,114,.11), transparent 70%),
    linear-gradient(180deg, rgba(4,16,20,.4), rgba(3,5,8,.72));
  mix-blend-mode:screen;
}

.scanlines{
  z-index:3;
  opacity:.18;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.18) 0 1px, transparent 1px 4px),
    linear-gradient(90deg, transparent, rgba(191,247,236,.18), transparent);
  mix-blend-mode:soft-light;
}

.signal-noise{
  z-index:2;
  opacity:.08;
  background:
    repeating-radial-gradient(circle at 15% 30%, rgba(255,255,255,.35) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, rgba(255,90,114,.18) 0 1px, transparent 1px 9px);
  background-size:160px 160px, 24px 100%;
  animation:noise-shift 1.6s steps(2, end) infinite;
}

.tracking-bars{
  position:fixed;
  inset:0;
  z-index:3;
  pointer-events:none;
  overflow:hidden;
}

.tracking-bars span{
  position:absolute;
  left:-8vw;
  width:116vw;
  height:2px;
  opacity:.34;
  background:linear-gradient(90deg, transparent, rgba(191,247,236,.55), rgba(255,90,114,.35), transparent);
  box-shadow:
    0 0 10px rgba(191,247,236,.35),
    0 0 24px rgba(104,216,255,.2);
  animation:tracking-roll 8.5s linear infinite;
}

.tracking-bars span:nth-child(1){ top:18%; animation-duration:9.2s; }
.tracking-bars span:nth-child(2){ top:53%; animation-duration:12.5s; animation-delay:-4s; opacity:.22; }
.tracking-bars span:nth-child(3){ top:81%; animation-duration:7.4s; animation-delay:-2.7s; }

@keyframes noise-shift{
  0%{ transform:translate3d(0,0,0); }
  50%{ transform:translate3d(-11px, 7px,0); }
  100%{ transform:translate3d(8px, -5px,0); }
}

@keyframes tracking-roll{
  from{ transform:translateY(-18vh) scaleY(.7); }
  48%{ transform:translateY(54vh) scaleY(1); }
  50%{ transform:translateY(54vh) scaleY(8); opacity:.12; }
  to{ transform:translateY(126vh) scaleY(.7); }
}

.screen-page .godrays{
  opacity:.32;
  filter:blur(.6px) saturate(70%);
}

.screen-page .firefly{
  background:rgba(191,247,236,.78);
  box-shadow:
    0 0 7px rgba(191,247,236,.76),
    0 0 18px rgba(104,216,255,.38);
}

.screen-nav,
.screen-hero,
.screen-shell{
  position:relative;
  z-index:4;
  box-sizing:border-box;
  max-width:100%;
}

.screen-nav{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:.45rem 1rem;
  max-width:880px;
  margin:0 auto 2.3rem;
  padding:0 3.25rem;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
}

.screen-nav a{
  margin:0;
  color:var(--amber);
  font-size:.9rem;
  text-shadow:
    1px 0 rgba(255,90,114,.38),
    -1px 0 rgba(104,216,255,.34),
    0 0 9px rgba(234,213,140,.32);
}

.screen-moon{
  position:fixed;
  left:clamp(.75rem, 2.6vw, 2rem);
  top:clamp(.75rem, 2.6vw, 2rem);
  width:42px;
  height:42px;
  color:var(--amber);
  z-index:6;
  opacity:.9;
  filter:
    drop-shadow(1px 0 rgba(255,90,114,.55))
    drop-shadow(-1px 0 rgba(104,216,255,.5))
    drop-shadow(0 0 8px rgba(234,213,140,.45));
  animation:none;
}

.screen-moon svg{
  width:100%;
  height:100%;
  display:block;
}

.screen-hero{
  max-width:1120px;
  margin:0 auto 2rem;
  padding:0 1rem;
}

.screen-page .eyebrow{
  margin:0 0 .28rem;
  color:var(--amber);
  font:700 .74rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.glitch-title{
  position:relative;
  display:inline-block;
  max-width:100%;
  margin:.05rem 0 .4rem;
  text-align:left;
  color:#fff8dc;
  font-size:clamp(2rem, 5.2vw, 4rem);
  line-height:.95;
  letter-spacing:.02em;
  text-shadow:
    0 0 1px #fff,
    3px 0 rgba(255,90,114,.54),
    -3px 0 rgba(104,216,255,.48),
    0 0 22px rgba(234,213,140,.42);
}

.glitch-title::before,
.glitch-title::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  pointer-events:none;
  color:#fff8dc;
  overflow:hidden;
  mix-blend-mode:screen;
}

.glitch-title::before{
  left:-2px;
  text-shadow:2px 0 var(--signal-red), 0 0 14px rgba(255,90,114,.54);
  clip:rect(0, 900px, 0, 0);
  animation:title-noise-a 5.4s infinite linear alternate-reverse;
}

.glitch-title::after{
  left:2px;
  text-shadow:-2px 0 var(--signal-blue), 0 0 14px rgba(104,216,255,.54);
  clip:rect(0, 900px, 0, 0);
  animation:title-noise-b 5.9s infinite linear alternate-reverse;
}

.glitch-title:hover::before{
  left:-3px;
  animation-duration:1.6s;
}

.glitch-title:hover::after{
  left:3px;
  animation-duration:1.9s;
}

@keyframes title-noise-a{
  0%{clip:rect(6px,9999px,62px,0)}5%{clip:rect(42px,9999px,90px,0)}
  10%{clip:rect(10px,9999px,54px,0)}15%{clip:rect(70px,9999px,96px,0)}
  20%{clip:rect(22px,9999px,68px,0)}25%{clip:rect(80px,9999px,110px,0)}
  30%{clip:rect(8px,9999px,38px,0)}35%{clip:rect(58px,9999px,94px,0)}
  40%{clip:rect(16px,9999px,48px,0)}45%{clip:rect(74px,9999px,120px,0)}
  50%{clip:rect(30px,9999px,82px,0)}55%{clip:rect(4px,9999px,36px,0)}
  60%{clip:rect(64px,9999px,106px,0)}65%{clip:rect(20px,9999px,50px,0)}
  70%{clip:rect(84px,9999px,116px,0)}75%{clip:rect(12px,9999px,44px,0)}
  80%{clip:rect(52px,9999px,92px,0)}85%{clip:rect(24px,9999px,66px,0)}
  90%{clip:rect(68px,9999px,100px,0)}100%{clip:rect(6px,9999px,62px,0)}
}

@keyframes title-noise-b{
  0%{clip:rect(78px,9999px,112px,0)}5%{clip:rect(18px,9999px,46px,0)}
  10%{clip:rect(60px,9999px,92px,0)}15%{clip:rect(8px,9999px,36px,0)}
  20%{clip:rect(44px,9999px,76px,0)}25%{clip:rect(86px,9999px,120px,0)}
  30%{clip:rect(26px,9999px,58px,0)}35%{clip:rect(72px,9999px,108px,0)}
  40%{clip:rect(14px,9999px,40px,0)}45%{clip:rect(56px,9999px,88px,0)}
  50%{clip:rect(32px,9999px,70px,0)}55%{clip:rect(90px,9999px,122px,0)}
  60%{clip:rect(22px,9999px,50px,0)}65%{clip:rect(66px,9999px,100px,0)}
  70%{clip:rect(10px,9999px,34px,0)}75%{clip:rect(48px,9999px,84px,0)}
  80%{clip:rect(28px,9999px,62px,0)}85%{clip:rect(76px,9999px,112px,0)}
  90%{clip:rect(16px,9999px,44px,0)}100%{clip:rect(58px,9999px,92px,0)}
}

.hero-copy{
  max-width:62rem;
  margin:0;
  color:rgba(246,241,231,.9);
  font-size:clamp(1.08rem, 2vw, 1.38rem);
  text-shadow:0 1px 10px rgba(0,0,0,.72);
}

.screen-shell{
  max-width:1120px;
  margin:0 auto 4rem;
  padding:0 1rem;
}

.status-light{
  flex:0 0 auto;
  width:.7rem;
  height:.7rem;
  margin-top:.42rem;
  border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 12px rgba(191,247,236,.82), 0 0 26px rgba(104,216,255,.38);
}

.broadcast-note{
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  margin:0 0 1.4rem;
  padding:1rem 1.1rem;
  border:1px solid rgba(191,247,236,.22);
  border-radius:10px;
  background:
    linear-gradient(180deg, rgba(191,247,236,.09), rgba(5,8,10,.68)),
    rgba(3,8,10,.72);
  box-shadow:
    0 16px 42px rgba(0,0,0,.34),
    inset 0 0 0 1px rgba(255,255,255,.035);
}

.broadcast-note p{
  margin:0;
  color:rgba(246,241,231,.86);
  font-size:1.04rem;
}

.title-dot{
  display:inline-block;
  width:.48em;
  height:.48em;
  margin:0 .38em .08em 0;
  vertical-align:middle;
}

.section-head{
  margin:1.75rem 0 .8rem;
}

.section-head h2{
  margin:0;
  color:#fff8dc;
  text-align:left;
  font-size:clamp(1.65rem, 3.4vw, 2.45rem);
  line-height:1;
  text-shadow:
    1px 0 rgba(255,90,114,.35),
    -1px 0 rgba(104,216,255,.33),
    0 0 13px rgba(234,213,140,.28);
}

.screen-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:stretch;
  gap:1rem;
}

.screen-card{
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0, 1fr);
  gap:0;
  align-items:center;
  flex:1 1 460px;
  max-width:calc(50% - .5rem);
  min-width:0;
  color:var(--ghost);
  text-decoration:none;
  border:1px solid rgba(191,247,236,.22);
  border-radius:14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), transparent 30%),
    radial-gradient(90% 80% at 100% 0%, rgba(104,216,255,.12), transparent 55%),
    linear-gradient(180deg, var(--screen-bg), var(--screen-bg-strong));
  box-shadow:
    0 18px 48px rgba(0,0,0,.46),
    inset 0 0 0 1px rgba(255,255,255,.04);
  contain:layout paint style;
  content-visibility:auto;
  contain-intrinsic-size:260px;
  overflow:hidden;
  transform:translateZ(0);
}

.screen-grid .screen-card:last-child:nth-child(odd){
  flex-basis:100%;
  max-width:100%;
}

.text-only-card{
  display:block;
}

.screen-card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background:
    linear-gradient(90deg, transparent 0 46%, rgba(255,90,114,.34) 48%, rgba(104,216,255,.28) 51%, transparent 53%),
    linear-gradient(90deg, rgba(255,90,114,.12), transparent 14% 86%, rgba(104,216,255,.12)),
    repeating-linear-gradient(0deg, transparent 0 12px, rgba(255,255,255,.05) 13px, transparent 14px);
  mix-blend-mode:screen;
}

.screen-card::after{
  content:"";
  position:absolute;
  left:-30%;
  top:0;
  width:28%;
  height:100%;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(191,247,236,.12), transparent);
  transform:skewX(-12deg);
  transition:left .28s ease;
}

.screen-card:hover::after,
.screen-card:focus-visible::after{
  left:112%;
}

.screen-card:hover,
.screen-card:focus-visible{
  border-color:rgba(191,247,236,.44);
  outline:none;
  box-shadow:
    0 20px 54px rgba(0,0,0,.5),
    2px 0 0 rgba(255,90,114,.18),
    -2px 0 0 rgba(104,216,255,.18),
    0 0 34px rgba(104,216,255,.16);
}

.screen-card:hover .poster-frame img,
.screen-card:focus-visible .poster-frame img{
  filter:
    saturate(1.28)
    contrast(1.12)
    drop-shadow(4px 0 rgba(255,90,114,.36))
    drop-shadow(-4px 0 rgba(104,216,255,.32));
}

.linked-card:hover,
.linked-card:focus-visible{
  transform:translateY(-1px);
}

.card-frame{
  position:relative;
  z-index:1;
  min-height:100%;
  padding:1rem;
}

.card-frame::before{
  content:"";
  position:absolute;
  inset:8px;
  pointer-events:none;
  border:1px solid rgba(191,247,236,.13);
  border-radius:10px;
}

.poster-frame{
  position:relative;
  z-index:1;
  margin:0;
  min-height:0;
  padding:.75rem 0 .75rem .75rem;
  display:flex;
  align-items:center;
  align-self:center;
  justify-content:center;
}

.poster-frame::before,
.poster-frame::after{
  content:"";
  position:absolute;
  pointer-events:none;
  inset:.75rem 0 .75rem .75rem;
  border-radius:9px;
}

.poster-frame::before{
  background:linear-gradient(90deg, rgba(255,90,114,.16), transparent 18% 82%, rgba(104,216,255,.15));
  mix-blend-mode:screen;
  z-index:2;
}

.poster-frame::after{
  background:repeating-linear-gradient(0deg, transparent 0 5px, rgba(255,255,255,.08) 6px, transparent 7px);
  opacity:.32;
  z-index:3;
}

.poster-frame img{
  display:block;
  width:96px;
  max-width:96px;
  height:144px;
  min-height:0;
  object-fit:contain;
  border:1px solid rgba(191,247,236,.24);
  border-radius:9px;
  background:rgba(191,247,236,.045);
  filter:
    saturate(1.12)
    contrast(1.05)
    drop-shadow(2px 0 rgba(255,90,114,.28))
    drop-shadow(-2px 0 rgba(104,216,255,.24));
  box-shadow:0 14px 26px rgba(0,0,0,.38);
}

.poster-frame--wide img{
  height:144px;
  object-fit:contain;
}

.screen-card h3{
  margin:0 0 .25rem;
  color:#fff8dc;
  font-size:clamp(1.28rem, 2.4vw, 1.75rem);
  line-height:1.05;
  text-shadow:
    1px 0 rgba(255,90,114,.28),
    -1px 0 rgba(104,216,255,.28);
}

.screen-card .meta{
  margin:0 0 .8rem;
  color:rgba(191,247,236,.72);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.82rem;
  line-height:1.35;
}

.screen-card p:not(.meta){
  margin:0;
  color:rgba(246,241,231,.84);
  font-size:1rem;
  line-height:1.48;
}

.link-pulse{
  display:inline-flex;
  margin-top:.9rem;
  color:var(--amber);
  border-bottom:1px solid rgba(234,213,140,.34);
  font:700 .78rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body.night.screen-page .godrays{
  opacity:0;
  pointer-events:none;
}

body.night.screen-page .tv-wash{
  opacity:.36;
}

body.night.screen-page .scanlines{
  opacity:.26;
}

body.night.screen-page .screen-card,
body.night.screen-page .broadcast-note{
  background:
    linear-gradient(135deg, rgba(255,255,255,.045), transparent 28%),
    radial-gradient(90% 80% at 100% 0%, rgba(104,216,255,.08), transparent 55%),
    linear-gradient(180deg, rgba(3,6,10,.86), rgba(2,3,7,.94));
}

@media (max-width:680px){
  .screen-page{
    padding-top:.85rem;
    background-attachment:scroll;
  }

  .screen-nav{
    justify-content:center;
    margin:0 0 2rem;
    padding:0 3.65rem;
    gap:.5rem .8rem;
  }

  .screen-moon{
    position:absolute;
    left:.85rem;
    top:.8rem;
  }

  .screen-hero{
    text-align:center;
    margin-bottom:1.35rem;
    padding:0 .85rem;
  }

  .glitch-title{
    width:auto;
    margin-left:auto;
    margin-right:auto;
    text-align:center;
  }

  .hero-copy{
    max-width:100%;
  }

  .screen-shell{
    padding:0 .85rem;
  }

  .broadcast-note{
    display:block;
  }

  .status-light{
    display:inline-block;
    margin:.1rem .45rem 0 0;
    vertical-align:middle;
  }

  .screen-card{
    grid-template-columns:92px minmax(0, 1fr);
    flex-basis:100%;
    max-width:100%;
  }

  .poster-frame{
    padding:.7rem 0 .7rem .7rem;
  }

  .poster-frame::before,
  .poster-frame::after{
    inset:.7rem 0 .7rem .7rem;
  }

  .poster-frame img{
    width:76px;
    max-width:76px;
    height:114px;
  }

  .poster-frame--wide img{
    height:114px;
  }
}

@media (pointer:coarse), (max-width:680px){
  .signal-noise{
    opacity:.045;
    animation:none;
  }

  .tracking-bars span{
    opacity:.18;
    animation-duration:16s;
  }

  .tracking-bars span:nth-child(n+2){
    display:none;
  }

  .screen-page .godrays{
    filter:saturate(70%);
  }

  .screen-page .firefly:nth-child(n+6){
    display:none;
  }

  .screen-card::before{
    opacity:.16;
  }

  .poster-frame::after{
    opacity:.18;
  }

  .glitch-title::before,
  .glitch-title::after{
    animation-duration:10s;
  }
}

@media (prefers-reduced-motion:reduce){
  .signal-noise,
  .tracking-bars span,
  .screen-page .firefly,
  .screen-page .godrays,
  .screen-page .godrays::after,
  .screen-page h1,
  .screen-page h2{
    animation:none !important;
  }

  .screen-card::after{
    transition:none;
  }
}