@font-face{font-family:Archivo;src:url(/assets/archivo.woff2) format('woff2');font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:JBM;src:url(/assets/jbmono.woff2) format('woff2');font-weight:100 800;font-display:swap}
:root{--bg:#07090f;--bg2:#0c1019;--panel:#111622;--panel2:#171e2e;--ink:#eef1f7;--dim:#98a2b8;--red:#ff3b30;--amber:#ffb020;--cyan:#4cc9f0;--green:#3ddc84;--line:#232b3d;--cond:Archivo,'Arial Narrow',sans-serif;--mono:JBM,ui-monospace,Menlo,Consolas,monospace}
*{box-sizing:border-box}html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:16.5px/1.65 Archivo,system-ui,-apple-system,'Segoe UI',sans-serif;font-stretch:100%}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline;text-underline-offset:3px}
:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--amber);color:#000;padding:8px 12px;z-index:9;border-radius:4px}
.shell{max-width:1200px;margin:0 auto;padding:0 24px}
.bar{position:sticky;top:0;z-index:5;background:rgba(7,9,15,.86);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar .shell{display:flex;align-items:center;gap:26px;min-height:62px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:10px;font:800 21px/1 var(--cond);font-stretch:75%;letter-spacing:.04em;color:#fff;text-transform:uppercase}
.logo:hover{text-decoration:none}
.logo .tally{width:10px;height:10px;border-radius:50%;background:var(--red);box-shadow:0 0 0 3px #ff3b3033}
.logo b{background:var(--red);color:#fff;padding:3px 7px 2px;border-radius:3px;margin-left:2px}
.bar nav{display:flex;gap:4px;flex-wrap:wrap;font:600 13px/1 var(--cond);font-stretch:85%;text-transform:uppercase;letter-spacing:.1em;margin-left:auto}
.bar nav a{color:var(--dim);padding:9px 11px;border-radius:6px;transition:color .15s,background-color .15s}
.bar nav a.on,.bar nav a:hover{color:#fff;background:var(--panel2);text-decoration:none}
.bar nav a.on{box-shadow:inset 0 -2px 0 var(--red)}
.hero{padding:54px 0 26px}
.kicker{display:inline-flex;align-items:center;gap:8px;color:var(--amber);font:600 12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.14em}
.kicker::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--red)}
h1,h2,h3{font-family:var(--cond);letter-spacing:-.005em}
h1{font-size:clamp(34px,5.2vw,62px);line-height:1.02;margin:12px 0 16px;font-weight:800;font-stretch:72%;text-transform:uppercase}
h2{font-size:clamp(24px,3vw,32px);margin:44px 0 10px;font-weight:750;font-stretch:80%;text-transform:uppercase;line-height:1.1}
h3{font-size:19px;margin:22px 0 6px;font-weight:700;font-stretch:92%}
.sub{color:var(--dim);font-size:19px;max-width:760px}
code,.mono,.tc{font-family:var(--mono);font-size:.92em}
code{background:var(--panel2);padding:1px 6px;border-radius:4px;border:1px solid var(--line)}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px;margin:26px 0}
.tile{position:relative;background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);border-radius:12px;padding:20px 20px 18px;display:block;color:var(--ink);transition:transform .2s ease,border-color .2s,box-shadow .2s;overflow:hidden}
.tile::after{content:'';position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--red),var(--amber));transform:scaleX(0);transform-origin:left;transition:transform .35s ease}
.tile:hover{border-color:#3a4560;transform:translateY(-3px);text-decoration:none;box-shadow:0 18px 40px -24px #000}
.tile:hover::after{transform:scaleX(1)}
.tile .k{font:600 11.5px/1 var(--mono);color:var(--amber);text-transform:uppercase;letter-spacing:.12em}
.tile h3{margin:9px 0 6px;font-size:21px;font-stretch:85%;text-transform:uppercase}.tile p{margin:0;color:var(--dim);font-size:15px}
.tile .new{position:absolute;right:14px;top:16px;font:700 10.5px/1 var(--mono);background:var(--red);color:#fff;padding:4px 6px;border-radius:3px;letter-spacing:.08em}
article{max-width:820px}article p,article li{color:#d4d9e6}article li{margin:4px 0}
.app{display:grid;grid-template-columns:330px 1fr;gap:22px;margin:24px 0}
@media(max-width:900px){.app{grid-template-columns:1fr}.bar nav{margin-left:0;width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:8px}}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:18px}
.panel label{display:block;font:600 11.5px/1.3 var(--mono);color:var(--dim);margin:14px 0 6px;text-transform:uppercase;letter-spacing:.08em}
.panel label.inline{display:flex;gap:8px;align-items:center;text-transform:none;font:15px var(--cond);letter-spacing:0;color:var(--ink)}
.panel input[type=text],.panel input[type=number],.panel input[type=url],.panel select,.panel textarea{width:100%;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);font:15px Archivo,sans-serif;transition:border-color .15s}
.panel textarea{font:14px/1.5 var(--mono);resize:vertical}
.panel input:focus,.panel select:focus,.panel textarea:focus{border-color:var(--cyan);outline:none}
.panel input[type=color]{width:46px;height:34px;border:1px solid var(--line);border-radius:6px;background:none;padding:2px;cursor:pointer}
.panel input[type=range]{width:100%;accent-color:var(--red)}
.presets{display:flex;flex-wrap:wrap;gap:6px}
.presets button{background:var(--bg2);color:var(--ink);border:1px solid var(--line);border-radius:999px;padding:6px 11px;font:600 12.5px var(--cond);cursor:pointer;transition:border-color .15s,background-color .15s}
.presets button:hover,.presets button[aria-pressed=true]{border-color:var(--amber);background:#2a2212}
.btn{display:inline-flex;align-items:center;gap:6px;background:var(--red);color:#fff;border:0;border-radius:8px;padding:10px 16px;font:700 14.5px/1.1 var(--cond);font-stretch:90%;text-transform:uppercase;letter-spacing:.05em;cursor:pointer;margin:14px 8px 0 0;transition:transform .12s,filter .15s,background-color .15s}
.btn:hover{filter:brightness(1.12);text-decoration:none}.btn:active{transform:scale(.97)}
.btn.alt{background:var(--panel2);border:1px solid var(--line)}
.stage{position:relative;background:repeating-conic-gradient(#161c2a 0 25%,#10141f 0 50%) 0 0/24px 24px;border-radius:12px;border:1px solid var(--line);overflow:hidden;align-self:start}
.stage canvas{width:100%;height:auto;display:block}
table{width:100%;border-collapse:collapse;font-size:15px;margin:14px 0}
th,td{border-bottom:1px solid var(--line);padding:10px 9px;text-align:left;vertical-align:top}th{color:var(--dim);font:600 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em}
tr{transition:background-color .15s}tbody tr:hover,table tr:hover td{background:#ffffff05}
.callout{border-left:3px solid var(--amber);background:var(--panel);padding:14px 18px;border-radius:0 10px 10px 0;margin:18px 0}
.callout p{margin:.3em 0}
.small{font-size:13.5px;color:var(--dim)}
.out{font:15px/1.6 var(--cond)}
.big{font:800 40px/1 var(--cond);font-stretch:75%;color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:12px 0}
.stats div{background:var(--bg2);border:1px solid var(--line);border-radius:10px;padding:12px}
.stats span{display:block;font:600 11px var(--mono);color:var(--dim);text-transform:uppercase;letter-spacing:.08em}
.stats b{font:800 26px/1.2 var(--cond);font-stretch:80%}
.faq details{border-bottom:1px solid var(--line);padding:12px 0}.faq summary{cursor:pointer;font:700 17px var(--cond);font-stretch:92%}
.faq summary::marker{color:var(--red)}
dl.gl{margin:0}dl.gl dt{font:800 20px var(--cond);font-stretch:85%;margin-top:22px;scroll-margin-top:80px}dl.gl dd{margin:4px 0 0;color:#d4d9e6}
.az{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 6px}.az a{font:600 13px var(--mono);padding:5px 9px;border:1px solid var(--line);border-radius:6px;color:var(--ink)}.az a:hover{border-color:var(--amber);text-decoration:none}
footer{margin-top:70px;border-top:1px solid var(--line);padding:30px 0;color:var(--dim);font-size:14px;background:var(--bg2)}
footer .cols{display:flex;gap:44px;flex-wrap:wrap}footer a{color:var(--dim)}footer a:hover{color:#fff}
footer strong{font:800 17px var(--cond);font-stretch:80%;text-transform:uppercase;color:#fff;letter-spacing:.04em}
/* on-air hero */
.onair{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:48px 0 18px}
@media(max-width:900px){.onair{grid-template-columns:1fr;gap:22px;padding-top:30px}}
.monitor{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid #2c3550;background:radial-gradient(120% 90% at 70% 20%,#1d2a52 0,#0b1124 55%,#05070d 100%);box-shadow:0 30px 80px -40px #4cc9f055,inset 0 0 0 1px #ffffff08}
.monitor .floor{position:absolute;inset:auto -20% -30% -20%;height:70%;background-image:linear-gradient(#4cc9f040 1px,transparent 1px),linear-gradient(90deg,#4cc9f040 1px,transparent 1px);background-size:40px 40px;transform:perspective(300px) rotateX(62deg);transform-origin:top;mask-image:linear-gradient(transparent,#000 60%)}
.monitor .rec{position:absolute;left:4%;top:6%;display:flex;gap:8px;align-items:center;font:700 11px var(--mono);color:#fff;letter-spacing:.1em}
.monitor .rec i{width:9px;height:9px;border-radius:50%;background:var(--red)}
.monitor .tcode{position:absolute;right:4%;top:6%;font:600 12px var(--mono);color:#cfe7ff;background:#0008;padding:3px 7px;border-radius:4px}
.monitor .safe{position:absolute;inset:5%;border:1px dashed #ffffff22;border-radius:2px}
.monitor .l3{position:absolute;left:5%;bottom:21%;display:flex;flex-direction:column;align-items:flex-start}
.monitor .l3 .n{background:#0d47a1;color:#fff;font:800 clamp(14px,2.2vw,22px)/1 var(--cond);font-stretch:80%;text-transform:uppercase;padding:9px 16px 8px}
.monitor .l3 .t{background:var(--red);color:#fff;font:500 clamp(10px,1.3vw,13px)/1 Archivo,sans-serif;padding:6px 16px}
.monitor .tick{position:absolute;left:0;right:0;bottom:5%;height:11%;background:#000c;border-top:2px solid var(--amber);display:flex;align-items:center;overflow:hidden}
.monitor .tick b{flex:none;height:100%;display:flex;align-items:center;background:var(--amber);color:#000;font:800 clamp(9px,1.2vw,12px)/1 var(--cond);padding:0 12px;letter-spacing:.06em;z-index:1}
.monitor .tick span{white-space:nowrap;font:600 clamp(9px,1.2vw,13px)/1 Archivo,sans-serif;color:#fff;padding-left:20px}
.cta{display:flex;flex-wrap:wrap;gap:0}
@media (prefers-reduced-motion:no-preference){
.monitor .rec i{animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.monitor .l3 .n{animation:l3in 7s cubic-bezier(.2,.8,.2,1) infinite}
.monitor .l3 .t{animation:l3in 7s .12s cubic-bezier(.2,.8,.2,1) infinite}
@keyframes l3in{0%,4%{transform:translateX(-110%);opacity:0}12%,80%{transform:none;opacity:1}88%,100%{transform:translateX(-110%);opacity:0}}
.monitor .tick span{animation:crawl 22s linear infinite}
@keyframes crawl{from{transform:translateX(60%)}to{transform:translateX(-100%)}}
.monitor .floor{animation:floor 4s linear infinite}
@keyframes floor{to{background-position:0 40px}}
.onair h1,.onair .sub,.onair .kicker,.onair .cta{animation:up .7s cubic-bezier(.2,.8,.2,1) both}.onair .sub{animation-delay:.07s}.onair .cta{animation-delay:.14s}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.rv{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
.app .stage,.app .panel{transition:box-shadow .3s}
}
/* teleprompter */
.prompter{position:relative;height:62vh;min-height:360px;overflow:hidden;background:#000;border-radius:12px;border:1px solid var(--line)}
.prompter .txt{position:absolute;left:0;right:0;top:0;padding:40vh 8% 60vh;color:#fff;font:600 48px/1.35 Archivo,sans-serif;will-change:transform}
.prompter.mirror .txt{transform-origin:center}
.prompter .cue{position:absolute;left:0;right:0;top:38%;height:0;border-top:2px solid #ff3b3088;pointer-events:none;z-index:1}
.prompter .cue::before{content:'';position:absolute;left:0;top:-9px;border:8px solid transparent;border-left:12px solid var(--red)}
.prompter:fullscreen{border-radius:0;height:100vh}
.app>.panel{align-self:start}