@font-face{
  font-family:'Bebas Neue'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/bebas-neue-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:400; font-display:swap;
  src: url('fonts/space-grotesk-latin-400-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:500; font-display:swap;
  src: url('fonts/space-grotesk-latin-500-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:600; font-display:swap;
  src: url('fonts/space-grotesk-latin-600-normal.woff2') format('woff2');
}
@font-face{
  font-family:'Space Grotesk'; font-style:normal; font-weight:700; font-display:swap;
  src: url('fonts/space-grotesk-latin-700-normal.woff2') format('woff2');
}

:root{
  --bg:#0a0707;
  --bg-2:#160c0d;
  --ink:#f4ece5;
  --ink-dim:#b7a49d;
  --signal:#ff3350;      /* on-air red, pulled from the booth light */
  --signal-dim:#7a1522;
  --ember:#ff8a3d;       /* warm amber, secondary accent */
  --gold:#d9a13b;        /* tally / vip accent */
  --line: rgba(244,236,229,.14);
  --line-strong: rgba(244,236,229,.28);
  --glass: rgba(255,255,255,.045);
  --radius: 2px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk', system-ui, sans-serif;
  overflow:hidden; /* no scrolling, hero-only screens */
  -webkit-font-smoothing:antialiased;
}
body{ height:100vh; height:100dvh; }
a{color:inherit; text-decoration:none;}
button{font-family:inherit; cursor:pointer;}

.eyebrow{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.28em;
  font-size:clamp(10px,1.6vw,13px);
  color:var(--ink-dim);
  display:flex; align-items:center; gap:8px;
}
.tally{
  width:7px; height:7px; border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 8px 2px var(--signal);
  animation:pulse 1.6s ease-in-out infinite;
  flex:none;
}
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

.screen{
  position:relative;
  height:100vh; height:100dvh; width:100vw;
  display:flex; flex-direction:column;
  overflow:hidden;
  padding:clamp(14px,2.4vh,28px) clamp(16px,3vw,48px);
  padding-top:max(clamp(14px,2.4vh,28px), env(safe-area-inset-top));
  padding-bottom:max(clamp(14px,2.4vh,28px), env(safe-area-inset-bottom));
  padding-left:max(clamp(16px,3vw,48px), env(safe-area-inset-left));
  padding-right:max(clamp(16px,3vw,48px), env(safe-area-inset-right));
}

.bgvideo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.bgshade{
  position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg, rgba(10,7,7,.55) 0%, rgba(10,7,7,.35) 35%, rgba(10,7,7,.82) 100%),
    linear-gradient(90deg, rgba(10,7,7,.75) 0%, rgba(10,7,7,.15) 45%, rgba(10,7,7,.15) 60%, rgba(10,7,7,.75) 100%);
}
.grain{
  position:absolute; inset:0; z-index:2; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.content{ position:relative; z-index:3; height:100%; display:flex; flex-direction:column; min-height:0; }

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  flex:none;
}
.wordmark{
  font-family:'Bebas Neue', sans-serif;
  font-size:clamp(20px,3.4vw,30px);
  letter-spacing:.06em;
}
.wordmark b{color:var(--signal);}

nav.chan{
  display:flex; gap:clamp(10px,2vw,22px);
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.14em;
  font-size:clamp(11px,1.6vw,14px);
}
nav.chan a{ color:var(--ink-dim); padding:4px 2px; border-bottom:2px solid transparent; }
nav.chan a.on{ color:var(--ink); border-color:var(--signal); }
nav.chan a:hover{ color:var(--ink); }

.hero-body{
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(10px,2vh,22px);
}

h1.big{
  font-family:'Bebas Neue', sans-serif;
  font-weight:400;
  font-size:clamp(40px, 8.6vw, 118px);
  line-height:.92;
  letter-spacing:.01em;
  margin:0;
}
p.lede{
  max-width:52ch;
  font-size:clamp(13px,1.6vw,17px);
  color:var(--ink-dim);
  line-height:1.5;
  margin:0;
}

.btnrow{ display:flex; gap:clamp(8px,1.4vw,14px); flex-wrap:wrap; }
.btn{
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.12em;
  font-size:clamp(12px,1.6vw,15px);
  padding:clamp(10px,1.6vh,15px) clamp(16px,2.4vw,26px);
  border:1px solid var(--line-strong);
  background:var(--glass);
  color:var(--ink);
  display:inline-flex; align-items:center; gap:8px;
  transition:border-color .2s, background .2s;
}
.btn:hover{ border-color:var(--signal); background:rgba(255,51,80,.08); }
.btn.solid{ background:var(--signal); border-color:var(--signal); color:#160c0d; font-weight:600; }
.btn.solid:hover{ background:#ff4b64; }

.channels{
  flex:none;
  display:grid;
  grid-template-columns:repeat(7,1fr);
  gap:clamp(6px,1vw,10px);
}
.chcard{
  border:1px solid var(--line);
  background:var(--glass);
  padding:clamp(9px,1.4vh,14px) clamp(8px,1vw,12px);
  display:flex; flex-direction:column; gap:6px;
  min-height:0;
  transition:border-color .2s, transform .2s, background .2s;
}
.chcard:hover{ border-color:var(--signal); transform:translateY(-2px); background:rgba(255,255,255,.07); }
.chnum{ font-family:'Bebas Neue',sans-serif; color:var(--signal); font-size:clamp(10px,1.2vw,12px); letter-spacing:.1em;}
.chtitle{ font-family:'Bebas Neue',sans-serif; font-size:clamp(13px,1.8vw,19px); letter-spacing:.03em; }
.chsub{ font-size:clamp(9px,1vw,11px); color:var(--ink-dim); line-height:1.3; }

.ticker{
  flex:none; overflow:hidden; white-space:nowrap;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(6px,1vh,10px) 0;
}
.ticker-track{
  display:inline-block; padding-left:100%;
  animation:tick 26s linear infinite;
  font-family:'Bebas Neue', sans-serif;
  letter-spacing:.1em;
  font-size:clamp(11px,1.4vw,14px);
  color:var(--ink-dim);
}
.ticker-track span{ margin-right:48px; }
.ticker-track span b{ color:var(--ink); }
.ticker-track span .dot{ color:var(--signal); margin:0 10px; }
@keyframes tick{ 0%{transform:translateX(0);} 100%{transform:translateX(-100%);} }

.footbar{
  flex:none; display:flex; justify-content:space-between; align-items:center;
  font-size:clamp(9px,1.1vw,11px); color:var(--ink-dim);
  letter-spacing:.08em;
}

@media (max-width:820px){
  .channels{ grid-template-columns:repeat(2,1fr); }
  .topbar{ align-items:flex-start; }
  nav.chan{
    display:flex; overflow-x:auto; -webkit-overflow-scrolling:touch;
    max-width:56vw; gap:16px; scrollbar-width:none; mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  nav.chan::-webkit-scrollbar{ display:none; }
  nav.chan a{ flex:none; padding:6px 2px; }
}
@media (max-height:520px){
  h1.big{ font-size:clamp(30px,6vw,60px); }
  .channels{ grid-template-columns:repeat(4,1fr); }
}

/* ---- shared: coming soon / inner pages ---- */
.panelgrid{
  flex:1 1 auto; min-height:0; display:grid; gap:clamp(8px,1.2vw,14px);
}
.card{
  border:1px solid var(--line); background:var(--glass);
  padding:clamp(12px,1.8vh,20px); display:flex; flex-direction:column; gap:8px; min-height:0;
}
.card h3{ font-family:'Bebas Neue',sans-serif; font-weight:400; letter-spacing:.04em; font-size:clamp(15px,2vw,20px); margin:0;}
.card p{ margin:0; font-size:clamp(11px,1.2vw,13px); color:var(--ink-dim); line-height:1.4; }
.tag{
  font-family:'Bebas Neue',sans-serif; letter-spacing:.14em; font-size:10px; color:var(--gold);
  border:1px solid rgba(217,161,59,.4); padding:2px 8px; width:fit-content;
}

/* Pixels Artist OS additions */
.os-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;min-height:0;flex:1}.os-card{border:1px solid var(--line);background:rgba(8,8,10,.72);padding:16px;position:relative;overflow:hidden}.os-card h2{font-family:'Bebas Neue',sans-serif;letter-spacing:.06em;margin:0 0 8px;font-size:clamp(24px,3vw,38px)}.os-card p,.muted{color:var(--ink-dim);font-size:12px;line-height:1.5}.os-label{font-size:10px;letter-spacing:.18em;color:var(--signal);font-weight:800}.os-list{display:grid;gap:7px;margin-top:12px}.os-row{border-top:1px solid var(--line);padding:8px 0;display:flex;justify-content:space-between;gap:10px;font-size:11px}.os-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.mini-btn{appearance:none;border:1px solid var(--line-strong);background:rgba(255,255,255,.03);color:var(--ink);padding:8px 11px;font:700 10px Arial;letter-spacing:.1em;cursor:pointer}.mini-btn:hover,.mini-btn.active{border-color:var(--signal);background:var(--signal);color:#190b0e}.meter{height:5px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:8px}.meter span{display:block;height:100%;width:42%;background:var(--signal)}.stat{font-family:'Bebas Neue',sans-serif;font-size:32px}.cover{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}.split{display:grid;grid-template-columns:1.25fr .75fr;gap:12px;min-height:0;flex:1}.panel{border:1px solid var(--line);background:rgba(8,8,10,.75);padding:14px;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}.playlist{display:grid;gap:7px}.track{display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;border:1px solid var(--line);padding:8px;cursor:pointer}.track:hover,.track.active{border-color:var(--signal);background:rgba(255,77,91,.08)}.track img{width:34px;height:34px;object-fit:cover}.api-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);padding:5px 8px;margin:3px;font-size:9px;letter-spacing:.08em}.dot-live{width:7px;height:7px;border-radius:50%;background:#54e38e;box-shadow:0 0 8px #54e38e}.modal{position:fixed;inset:0;background:rgba(0,0,0,.85);display:none;align-items:center;justify-content:center;z-index:99;padding:20px}.modal.open{display:flex}.modal-box{max-width:620px;width:100%;border:1px solid var(--signal);background:#0b0b0e;padding:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.field{background:#111;border:1px solid var(--line);color:#fff;padding:10px;width:100%}.full{grid-column:1/-1}.toast{position:fixed;right:18px;bottom:18px;background:var(--signal);color:#160c0d;padding:10px 14px;font-weight:800;font-size:11px;display:none;z-index:120}.toast.show{display:block}.mobile-menu{display:none}
@media(max-width:860px){.os-grid{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.full{grid-column:auto}}
@media(max-width:620px){
  .os-grid{grid-template-columns:1fr}.os-card{min-height:150px}
  .chan{overflow-x:auto;white-space:nowrap;max-width:100%}
  .topbar{align-items:flex-start;gap:8px}
  .split{display:block}.panel{margin-bottom:10px}
  html,body{ overflow-y:auto; height:auto; -webkit-overflow-scrolling:touch; }
  .screen{ height:auto; min-height:100dvh; overflow:visible; }
  .content{ height:auto; min-height:100dvh; overflow:visible; }
  .bgvideo{ position:fixed; }
}

/* =========================================================
   PIXELS COMPONENT 001 — ROTATING 3D NETWORK NAVIGATION
   Replaces only the former flat channel-card row.
   ========================================================= */
.nav3d-section{
  flex:none;
  height:clamp(190px,27vh,290px);
  display:grid;
  place-items:center;
  position:relative;
  margin:-8px 0 2px;
  perspective:1200px;
  overflow:visible;
}
.nav3d-stage{
  --nav-size:clamp(116px,14vw,176px);
  --nav-depth:calc(var(--nav-size) * .94);
  width:min(64vw,520px);
  height:100%;
  position:relative;
  display:grid;
  place-items:center;
  touch-action:none;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  isolation:isolate;
}
.nav3d-stage.dragging{cursor:grabbing}
.nav3d-aura{
  position:absolute;
  width:min(68vw,520px);
  height:78%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.10) 0%,rgba(217,161,59,.07) 24%,rgba(0,0,0,0) 68%);
  filter:blur(13px);
  opacity:.8;
  pointer-events:none;
}
.nav3d-object{
  width:var(--nav-size);
  height:calc(var(--nav-size) * .72);
  position:relative;
  transform-style:preserve-3d;
  transform:rotateX(-10deg) rotateY(var(--nav-angle,0deg));
  will-change:transform;
}
.nav3d-face{
  --face-angle:calc(var(--i) * 45deg);
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:7px;
  transform:rotateY(var(--face-angle)) translateZ(var(--nav-depth));
  backface-visibility:hidden;
  border:1px solid rgba(255,255,255,.36);
  border-radius:10px;
  color:#f6f1eb;
  background:
    linear-gradient(145deg,rgba(255,255,255,.16),rgba(255,255,255,.025) 42%,rgba(0,0,0,.34)),
    rgba(12,12,15,.74);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.045),
    inset 0 -22px 35px rgba(0,0,0,.26),
    0 8px 32px rgba(0,0,0,.35);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(18px,2.1vw,28px);
  letter-spacing:.11em;
  text-shadow:0 2px 12px #000;
  transition:border-color .2s,background .2s,box-shadow .2s,filter .2s;
  overflow:hidden;
}
.nav3d-face::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(120deg,transparent 18%,rgba(255,255,255,.16) 46%,transparent 68%);
  transform:translateX(-120%);
  animation:navSheen 6.5s ease-in-out infinite;
  animation-delay:calc(var(--i) * -.31s);
  pointer-events:none;
}
.nav3d-face::after{
  content:"";
  position:absolute;
  inset:7px;
  border:1px solid rgba(217,161,59,.20);
  border-radius:7px;
  pointer-events:none;
}
.nav3d-face:hover,.nav3d-face.is-front{
  border-color:rgba(217,161,59,.92);
  background:
    linear-gradient(145deg,rgba(255,255,255,.20),rgba(217,161,59,.08) 50%,rgba(0,0,0,.32)),
    rgba(12,12,15,.80);
  box-shadow:inset 0 0 28px rgba(217,161,59,.08),0 0 24px rgba(217,161,59,.15),0 12px 42px rgba(0,0,0,.45);
}
.nav3d-face.is-selected{filter:brightness(1.35);border-color:#fff;box-shadow:0 0 40px rgba(255,255,255,.22)}
.nav3d-icon{
  font-family:Arial,sans-serif;
  font-size:clamp(25px,3vw,40px);
  line-height:1;
  color:#e5bd69;
  text-shadow:0 0 18px rgba(217,161,59,.26);
  letter-spacing:0;
}
.nav3d-cap{
  position:absolute;
  left:0;
  width:100%;
  height:var(--nav-size);
  border:1px solid rgba(255,255,255,.20);
  background:radial-gradient(circle,rgba(255,255,255,.10),rgba(10,10,13,.76) 62%);
  clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%);
  pointer-events:none;
}
.nav3d-cap-top{top:calc(var(--nav-size) * -.50);transform:rotateX(90deg) translateZ(calc(var(--nav-size) * .36))}
.nav3d-cap-bottom{bottom:calc(var(--nav-size) * -.50);transform:rotateX(90deg) translateZ(calc(var(--nav-size) * -.36))}
.nav3d-shadow{
  position:absolute;
  bottom:8%;
  width:clamp(145px,23vw,285px);
  height:24px;
  border-radius:50%;
  background:rgba(0,0,0,.72);
  filter:blur(12px);
  transform:scaleX(1.15);
  pointer-events:none;
}
@keyframes navSheen{0%,70%,100%{transform:translateX(-130%)}82%{transform:translateX(130%)}}
@media (prefers-reduced-motion:reduce){.nav3d-face::before{animation:none}}
@media(max-width:820px){
  .nav3d-section{height:clamp(180px,28vh,245px);margin:-4px 0 0}
  .nav3d-stage{--nav-size:clamp(102px,28vw,136px);width:100%}
  .hero-body{gap:clamp(7px,1.4vh,13px)}
  p.lede{max-width:43ch}
}
@media(max-height:650px){
  .nav3d-section{height:145px}
  .nav3d-stage{--nav-size:96px}
  .btnrow{display:none}
}

/* iPhone / small-phone landscape: keep the copy and Pixels hub in separate lanes. */
@media (orientation: landscape) and (max-height: 520px) and (max-width: 950px){
  .screen{
    padding-top:max(10px, env(safe-area-inset-top));
    padding-bottom:max(8px, env(safe-area-inset-bottom));
    padding-left:max(16px, env(safe-area-inset-left));
    padding-right:max(16px, env(safe-area-inset-right));
  }
  .topbar{align-items:flex-start; min-height:42px; gap:14px;}
  .wordmark{font-size:clamp(18px,3.2vw,24px); white-space:nowrap;}
  nav.chan{max-width:62vw; gap:14px; font-size:11px;}

  .hero-body{
    width:58%;
    flex:1 1 auto;
    justify-content:center;
    gap:5px;
    padding:4px 10px 4px 0;
    overflow:visible;
  }
  .eyebrow{font-size:9px; gap:6px;}
  h1.big{font-size:clamp(36px,7.2vw,56px); line-height:.88;}
  p.lede{
    max-width:46ch;
    font-size:clamp(10px,1.55vw,12px);
    line-height:1.35;
  }
  .btnrow{display:none;}

  .nav3d-section{
    position:absolute;
    z-index:4;
    right:0;
    top:48px;
    bottom:48px;
    width:42%;
    height:auto;
    margin:0;
    display:grid;
    place-items:center;
  }
  .nav3d-stage{
    --nav-size:clamp(82px,15vw,108px);
    width:100%;
    height:100%;
  }
  .nav3d-aura{width:100%; height:88%;}
  .nav3d-shadow{bottom:5%; width:clamp(105px,19vw,160px);}

  .ticker{padding:4px 0;}
  .ticker-track{font-size:10px;}
  .footbar{font-size:8px;}
}