:root{--bg:#020603;--text:#dcf7e2;--muted:#7a9a82;--accent:#00ff41;--accent-ink:#001a08;--panel:#0b160d;--red:#ff3b3b;--amber:#ffb547;--blue:#6fb7ff;--press:#5a96f0;--research:#26b39a;--vendor:#d09634;--community:#a37ae8;--cert:#e0647a;--aggregator:#77887c;--unrated:#2a3d30;--line:#142619;--critical:#ff4d52;--high:#f0843f;--medium:#d6ae40;--low:#66757f;--none:#3f4b56}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:radial-gradient(ellipse at 20% 0%,var(--haze,#062a10) 0,transparent 60%),var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;cursor:none}
body{display:flex;flex-direction:column}
header{display:flex;justify-content:space-between;align-items:center;padding:2.2vh 3vw 0}
.brand{display:flex;align-items:center;gap:1vw;font:600 clamp(16px,2.2vh,30px) ui-monospace,"Cascadia Code",Consolas,monospace}
.brand img{height:3.6vh}
.brand b{color:var(--accent);text-shadow:0 0 1.2vh #00ff4180}
.brand em{font-style:normal;color:var(--accent-ink);background:var(--accent);border-radius:999px;padding:.2em .8em;font-size:.8em;margin-left:.6vw}
#clock{font:600 clamp(18px,3.4vh,44px) ui-monospace,Consolas,monospace}
main{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 3vw;min-height:0}
.rank{color:var(--muted);font:700 clamp(16px,2.6vh,34px) ui-monospace,Consolas,monospace;letter-spacing:.1em}
.badges{display:flex;gap:1vw;margin:1.2vh 0}
.badge{font:800 clamp(12px,2vh,26px) ui-monospace,Consolas,monospace;letter-spacing:.12em;padding:.35em .7em;border-radius:.3em}
.badge.breaking{background:var(--red);color:#fff}
.badge.developing{background:#3a2a0c;color:var(--amber)}
.badge.sec{background:#0e2238;color:var(--blue)}
.badge.kev{background:#3a0d10;color:#ffb3b5}
.badge.mine{background:#3a2a0c;color:var(--amber);border:1px solid #6b4a0d}
@keyframes pulse{50%{opacity:.55}}
h1{margin:0;font-size:clamp(28px,6.4vh,92px);line-height:1.12;font-weight:800;letter-spacing:-.01em;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:2vw;margin-top:3vh;color:var(--muted);font-size:clamp(14px,2.4vh,32px)}
.meta .velocity{color:var(--accent)}
.bar{display:flex;width:22vw;height:1.1vh;border-radius:1vh;overflow:hidden;background:var(--line)}
.bar i{display:block;height:100%}
.bar i{margin-right:2px}.bar i:last-child{margin-right:0}
.bar .press{background:var(--press)}.bar .research{background:var(--research)}.bar .vendor{background:var(--vendor)}.bar .community{background:var(--community)}.bar .cert{background:var(--cert)}.bar .aggregator{background:var(--aggregator)}.bar .unrated{background:var(--unrated)}
.legend span{margin-right:1.2vw}
.legend span{display:inline-flex;align-items:center;gap:.4em}
.legend span::before{content:"";width:.7em;height:.7em;border-radius:.15em;background:var(--c)}
.legend .press{--c:var(--press)}.legend .research{--c:var(--research)}.legend .vendor{--c:var(--vendor)}.legend .community{--c:var(--community)}.legend .cert{--c:var(--cert)}.legend .aggregator{--c:var(--aggregator)}
.outlets{margin-top:2.4vh;color:var(--muted);font-size:clamp(13px,2.1vh,28px);line-height:1.5}
.outlets b{color:var(--text);font-weight:600}
.change{margin-top:2vh;font-size:clamp(14px,2.4vh,32px);color:var(--amber)}
.change b{font-weight:800;text-transform:uppercase;font-family:ui-monospace,Consolas,monospace;letter-spacing:.05em}
.change.latest{color:var(--text)}.change.latest b{color:var(--muted)}
.rank small{font-size:.7em;font-weight:600;letter-spacing:.05em}
.fade{animation:fade .6s ease}
@keyframes fade{from{opacity:0;transform:translateY(1.5vh)}to{opacity:1;transform:none}}
#dots{display:flex;justify-content:center;gap:.8vw;padding:1.5vh 0}
#dots i{width:1vh;height:1vh;border-radius:50%;background:var(--line)}
#dots i.on{background:var(--accent)}
#progress{height:.5vh;background:var(--line)}
#progress i{display:block;height:100%;width:0;background:var(--accent)}
footer[hidden]{display:none}
footer{display:flex;align-items:center;background:var(--red);color:#fff;height:6vh;font-size:clamp(16px,3vh,40px);overflow:hidden}
footer b{flex:none;padding:0 2vw;height:100%;display:flex;align-items:center;background:#b00000;font-family:ui-monospace,Consolas,monospace;letter-spacing:.12em}
.track{flex:1;overflow:hidden;white-space:nowrap}
@keyframes scroll{to{transform:translateX(-100%)}}
.waiting{color:var(--muted);font-size:3vh;text-align:center}
#fullscreen{position:fixed;left:1.2vw;bottom:8vh;background:none;border:1px solid var(--line);color:var(--muted);border-radius:8px;font-size:22px;padding:4px 10px;cursor:pointer;opacity:0;transition:opacity .3s}
/* the corner button sits bottom left, clear of the station bug; the public TVs have Full screen in their channel bar instead */
body[data-public="1"] #fullscreen{display:none}
body:hover #fullscreen{opacity:1}
body.pointer{cursor:default}
/* Rising and trending scenes */
.listscene h2{margin:0 0 3vh;font-size:clamp(16px,2.6vh,34px);color:var(--muted);font-weight:600}
.listscene .row{display:flex;gap:1.5vw;align-items:flex-start;margin-bottom:2.2vh}
.listscene .num{flex:none;width:2.2em;color:var(--muted);font:700 clamp(16px,2.8vh,36px) ui-monospace,Consolas,monospace;text-align:right}
.listscene .body{flex:1;min-width:0}
.listscene .title{font-size:clamp(16px,3vh,40px);font-weight:700;line-height:1.2;display:flex;gap:1vw;align-items:center;flex-wrap:wrap}
.listscene .title .badge{font-size:.5em}
.barline{display:flex;align-items:center;gap:1vw;margin-top:.8vh;color:var(--muted);font-size:clamp(12px,1.9vh,24px)}
.barline i{display:block;height:1vh;border-radius:1vh;background:var(--accent);flex:none}
.trendgrid{display:grid;grid-template-columns:1fr 1fr;gap:2.5vh 4vw}
.trend{display:flex;justify-content:space-between;align-items:center;gap:2vw;border-bottom:1px solid var(--line);padding-bottom:1.2vh}
.trend .term{font-size:clamp(18px,3.6vh,48px);font-weight:800}
.trend .sub{color:var(--muted);font-size:clamp(12px,1.9vh,24px)}
.trend .sub b{color:var(--accent)}
.trend .spark{display:flex;align-items:flex-end;gap:3px;height:5vh;width:12vw;flex:none}
.trend .spark i{flex:1;background:var(--accent);opacity:.75;border-radius:2px 2px 0 0}
.trend .spark i:last-child{opacity:1}

/* Breaking takeover */
#takeover{position:fixed;inset:0;z-index:10;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 30%,#3a0606 0,#120202 70%);animation:fade .4s ease}
#takeover[hidden]{display:none}
.tk-flash{background:var(--red);padding:2.5vh 4vw;overflow:hidden}
.tk-flash span{display:block;font:900 clamp(36px,9vh,130px)/1 ui-monospace,Consolas,monospace;letter-spacing:.12em;color:#fff;animation:pulse 1s infinite}
.tk-body{flex:1;display:flex;flex-direction:column;justify-content:center;padding:0 5vw}
.tk-kicker{color:#ffb3b3;font:700 clamp(14px,2.6vh,34px) ui-monospace,Consolas,monospace;letter-spacing:.1em;margin-bottom:2vh}
#takeover h1{font-size:clamp(32px,8vh,120px);-webkit-line-clamp:4}
#takeover .meta,#takeover .outlets{color:#e8c4c4}
.tk-progress{height:.8vh;background:#3a0a0a}
.tk-progress i{display:block;height:100%;width:0;background:#fff}

/* QR codes, NEW / UPDATED, morning brief */
main{position:relative}
.qr{position:absolute;right:3vw;bottom:2vh;margin:0;width:17vh;text-align:center;animation:fade .6s ease}
.qr img{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:1.2vh;box-shadow:0 0 0 .4vh #062a10,0 1vh 3vh #000a}
.qr figcaption{margin-top:.8vh;color:var(--muted);font:600 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace;letter-spacing:.06em}
.qr.tk{right:4vw;bottom:5vh;width:22vh}
.qr.tk figcaption{color:#e8c4c4}
.badge.fresh{background:var(--accent);color:var(--accent-ink)}
.badge.updated{background:var(--amber);color:#1b1203}
#dots i.new{background:#0d4f6b}#dots i.updated{background:#6b4a0d}
#dots i.on{background:var(--accent)}
.brief .row{margin-bottom:2.6vh}
.brief .what{margin-top:.6vh;color:var(--amber);font-size:clamp(13px,2.2vh,28px)}

/* Same story, two framings */
.framescene h2{margin:0 0 3.5vh;font-size:clamp(18px,3.4vh,44px);line-height:1.2;color:var(--muted);font-weight:600}
.frames{display:grid;grid-template-columns:1fr 1fr;gap:3vw}
.frame{border-top:.6vh solid var(--line);padding-top:2vh}
.frame.left{border-top-color:var(--left)}.frame.right{border-top-color:var(--right)}
.side{display:flex;align-items:center;gap:.6em;color:var(--muted);font:700 clamp(12px,2vh,26px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.side i{display:inline-block;width:.8em;height:.8em;border-radius:.2em}
.left .side i{background:var(--left)}.right .side i{background:var(--right)}.centerline .side i{background:var(--center)}
.said{margin-top:1.6vh;font-size:clamp(22px,4.6vh,64px);line-height:1.15;font-weight:800;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.by{margin-top:1.4vh;color:var(--muted);font-size:clamp(13px,2.2vh,30px);font-weight:600}
.centerline{margin-top:3.5vh;color:var(--muted);font-size:clamp(13px,2.2vh,30px);display:flex;align-items:baseline;gap:1vw}
.centerline .side{flex:none;font-size:.8em}
.framescene .meta{margin-top:2.5vh}

/* Severity: the number and the word beside a coloured mark */
.sev{display:inline-flex;align-items:baseline;gap:.35em;padding:.15em .55em .15em .45em;border-radius:.3em;background:var(--panel);border-left:.35em solid var(--c);
  font:700 .8em ui-monospace,Consolas,monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.sev b{color:var(--text);font-size:1.15em}
.sev.critical{--c:var(--critical)}.sev.high{--c:var(--high)}.sev.medium{--c:var(--medium)}.sev.low{--c:var(--low)}.sev.none{--c:var(--none)}
.cves{display:flex;flex-wrap:wrap;gap:1vh 2vw;margin-top:2vh;font-size:clamp(13px,2.2vh,30px);color:var(--text)}

/* Threat board and your lab */
.listscene.threat{display:grid;grid-template-columns:1fr 1fr;gap:4vw;align-items:start}
.listscene .num .sev{font-size:clamp(11px,1.9vh,26px)}
.listscene.threat .num,.listscene:not(.brief) .num:has(.sev){width:auto;min-width:7.5em;text-align:left}
.listscene.threat .row{margin-bottom:2vh}
.listscene.threat .title{font-size:clamp(15px,2.6vh,36px)}
.listscene .what{margin-top:.5vh;color:var(--muted);font-size:clamp(12px,2vh,26px)}
.listscene .what b{color:var(--amber);font-weight:700}
.quiet{color:var(--muted);font-size:clamp(14px,2.2vh,30px)}

/* Vulnerability takeover: red for exploited and critical, amber when it's something you run */
#takeover.vuln.critical{background:radial-gradient(ellipse at 50% 30%,#3a1606 0,#120502 70%)}
#takeover.vuln.critical .tk-flash{background:#d9480f}
#takeover.vuln.mine{background:radial-gradient(ellipse at 50% 30%,#3a2a06 0,#120c02 70%)}
#takeover.vuln.mine .tk-flash{background:var(--amber)}
#takeover.vuln.mine .tk-flash span{color:#1b1203}
#takeover.vuln.mine .tk-kicker{color:#ffd99a}
#takeover.vuln h1{font-size:clamp(28px,6.4vh,96px);-webkit-line-clamp:3}
.tk-cves{display:flex;flex-direction:column;gap:1.2vh;margin-top:3vh;font-size:clamp(16px,3vh,40px);color:var(--text)}
.tk-cves .more{color:#e8c4c4;font-size:.8em}
.tk-facts{display:flex;flex-wrap:wrap;gap:1vh 3vw;margin-top:2.5vh;font-size:clamp(14px,2.6vh,34px);font-weight:700;color:#fff}
.tk-desc{margin:2.5vh 0 0;max-width:70vw;color:#e8c4c4;font-size:clamp(13px,2.2vh,28px);line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
#takeover.vuln.mine .tk-desc,#takeover.vuln.mine .tk-cves .more{color:#f0dcb8}

/* Patch status pills on the lab scene */
.lstat{display:inline-block;padding:.15em .6em;border-radius:.3em;border-left:.35em solid var(--c);background:var(--panel);color:var(--text);
  font:700 clamp(11px,1.9vh,26px) ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
.lstat.critical{--c:var(--critical);background:#3a0d10}.lstat.high{--c:var(--high)}.lstat.medium{--c:var(--medium)}
.lstat.good{--c:#35c27a}.lstat.none{--c:var(--none);color:var(--muted)}
.listscene.lab .num{width:auto;min-width:9em;text-align:left}
.listscene.lab .row{margin-bottom:1.6vh}

/* HUD: up-next chip and countdown ring */
.hud{display:flex;align-items:center;gap:1.2vw}
#upnext{max-width:38vw;display:flex;align-items:baseline;gap:.7em;color:var(--text);font-size:clamp(12px,1.9vh,24px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:.45em 1em}
#upnext[hidden]{display:none}
#upnext span{flex:none;color:var(--accent);font:700 .8em ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
#upnext.pop{animation:pop .5s cubic-bezier(.2,.8,.2,1)}
@keyframes pop{from{opacity:0;transform:translateX(2vw)}to{opacity:1;transform:none}}
#ring svg{display:block;width:3.6vh;height:3.6vh;transform:rotate(-90deg)}
#ring circle{fill:none;stroke-width:3.5}
#ring .rt{stroke:var(--line)}
#ring .rf{stroke:var(--accent);stroke-dasharray:97.4;stroke-linecap:round}

/* Bottom crawl */
#crawl{background:#060e08;border-top:1px solid var(--line);color:var(--text);height:5.4vh;font-size:clamp(14px,2.3vh,30px)}
#crawl b#crawl-label{background:#0a2a12;color:var(--accent)}
/* breaking: the label stays red; the headlines scroll on a dark red band, since white on bright red was hard to read */
#crawl.alert{background:#1e0407;border-top:.35vh solid var(--red);color:#f6f7fb}
#crawl.alert b#crawl-label{background:#b00000;color:#fff;animation:pulse 1.2s infinite}
#crawl-track{display:inline-block;white-space:nowrap;animation:crawl linear infinite;animation-duration:120s;will-change:transform;backface-visibility:hidden}
#crawl{contain:paint}
@keyframes crawl{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.ci{display:inline-flex;align-items:center;gap:.5em;margin-right:3.5vw}
.ci i{width:.6em;height:.6em;border-radius:50%;background:var(--unrated);flex:none}
.ci i.press{background:var(--press)}.ci i.research{background:var(--research)}.ci i.vendor{background:var(--vendor)}.ci i.community{background:var(--community)}.ci i.cert{background:var(--cert)}.ci i.aggregator{background:var(--aggregator)}
.ci b{display:inline;height:auto;padding:0;background:none;color:var(--muted);font:600 1em system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;letter-spacing:0}
#crawl.alert .ci b{color:#ff8f8f}
#crawl.alert .fp{color:#efd2d5;border-color:#ffffff45;background:none}
.ci.hot{font-weight:800}.ci.hot i{background:#fff}

/* Story scene: typed headline, slow zoom, spread replay, CVE gauges */
main>div:not(.listscene){padding-right:21vh}
main>div.storyscene{padding-right:0}
/* A story's QR code sits at the end of its bottom row, so everything above it runs the full width. */
.lower{display:flex;align-items:flex-end;gap:2.5vw}
.lmain{flex:1;min-width:0}
.qr.inline{position:static;flex:none;margin-top:4.5vh}
/* Rank and badges share one line above the headline, and keep their size when a story grows to fill the screen. */
.kicker{display:flex;align-items:center;flex-wrap:wrap;gap:1vh 1.4vw;margin-bottom:1.4vh;zoom:calc(1 / var(--z,1))}
.kicker .badges{margin:0}
/* A breaking story's badge stays solid; only its dot pulses. */
.badge.breaking::before,.badge.major::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.55em;border-radius:50%;background:#fff;animation:pulse 1.4s infinite}
.storyscene h1{font-size:clamp(26px,5.6vh,84px);-webkit-line-clamp:3}
.storyscene.gauged h1{font-size:clamp(24px,5vh,76px)}
.storyscene .meta{margin-top:2.2vh}
.zoom{transform-origin:left center;animation:zoom 22s linear both}
@keyframes zoom{from{transform:scale(1)}to{transform:scale(1.035)}}
.w{display:inline-block;animation:word .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes word{from{opacity:0;transform:translateY(.35em)}to{opacity:1;transform:none}}
.replay{margin-top:3vh}
.rlabel{display:flex;gap:.6em;align-items:baseline;color:var(--text);font-size:clamp(13px,2.1vh,28px)}
.rlabel b{color:var(--accent);font:700 .85em ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.rlabel em{font-style:normal;color:var(--research);font-weight:600;margin-left:1.2vw}
.rlabel span{margin-left:auto;color:var(--muted);font:600 .8em ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.rline{position:relative;height:5.2vh;margin-top:1.2vh;border-bottom:2px solid var(--line)}
.rline i{position:absolute;bottom:1vh;width:1.5vh;height:1.5vh;margin-left:-.75vh;border-radius:50%;background:var(--unrated);opacity:0;animation:dot .5s cubic-bezier(.3,1.6,.5,1) forwards;animation-delay:calc(var(--d,0ms) + 400ms)}
.rline i.press{background:var(--press)}.rline i.research{background:var(--research)}.rline i.vendor{background:var(--vendor)}.rline i.community{background:var(--community)}.rline i.cert{background:var(--cert)}.rline i.aggregator{background:var(--aggregator)}
.rline i.first{width:2.2vh;height:2.2vh;margin-left:-1.1vh;box-shadow:0 0 0 .4vh #00ff4155}
@keyframes dot{from{opacity:0;transform:translateY(-2vh) scale(.4)}to{opacity:.92;transform:none}}
.rline .tick{position:absolute;bottom:-3vh;transform:translateX(-50%);color:var(--muted);font:600 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace}
.rline .tick::before{content:"";position:absolute;left:50%;top:-1.3vh;height:1vh;border-left:1px solid var(--line)}
.rline .tick.now{transform:translateX(-100%);color:var(--accent)}
.rline .tick.now::before{left:auto;right:0}

.gauges{display:flex;align-items:center;gap:3vw;margin-top:4.5vh;animation:rise .6s cubic-bezier(.2,.8,.2,1) .6s both}
.dial{position:relative;flex:none;width:17vh;text-align:center;--c:var(--none)}
.dial.critical{--c:var(--critical)}.dial.high{--c:var(--high)}.dial.medium{--c:var(--medium)}.dial.low{--c:var(--low)}
.dial svg{display:block;width:100%;overflow:visible}
.dial path{fill:none;stroke-width:9;stroke-linecap:round}
.dial .dt{stroke:var(--line)}
.dial .df{stroke:var(--c);stroke-dasharray:125.66;animation:sweep 1.3s cubic-bezier(.2,.8,.2,1) .7s backwards}
@keyframes sweep{from{stroke-dashoffset:125.66}}
.dial b{position:absolute;left:0;right:0;top:38%;font:800 clamp(18px,4vh,56px)/1 ui-monospace,Consolas,monospace;color:var(--text);font-variant-numeric:tabular-nums}
.dial span{display:block;margin-top:.4vh;color:var(--c);font:700 clamp(10px,1.6vh,22px) ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.dial.big{width:24vh}
.epss{flex:1;min-width:0;max-width:44vw}
.elabel{color:var(--muted);font-size:clamp(12px,2vh,26px)}
.elabel b{color:var(--text);font-family:ui-monospace,Consolas,monospace;margin-right:.4em}
.ebar{display:block;height:1.4vh;margin:1.2vh 0;border-radius:1vh;background:var(--line);overflow:hidden}
.ebar i{display:block;height:100%;width:0;border-radius:1vh;background:linear-gradient(90deg,var(--medium),var(--high),var(--critical));animation:grow 1.4s cubic-bezier(.2,.8,.2,1) .9s backwards}
@keyframes grow{from{width:0}}
.esub{color:var(--text);font-size:clamp(12px,2vh,26px);font-weight:600}
.checks{display:flex;flex-direction:column;gap:.9vh;flex:none;font:700 clamp(12px,2vh,26px) ui-monospace,Consolas,monospace}
.checks .ok{color:#35c27a}.checks .no{color:var(--critical)}.checks .mine{color:var(--amber)}.checks .cid{color:var(--muted);font-weight:500}
@keyframes rise{from{opacity:0;transform:translateY(1.5vh)}to{opacity:1;transform:none}}

/* Scene entrances */
.enter-slide{animation:eslide .7s cubic-bezier(.2,.8,.2,1) both}
@keyframes eslide{from{opacity:0;transform:translateX(6vw)}to{opacity:1;transform:none}}
.enter-wipe{animation:ewipe .9s cubic-bezier(.6,0,.2,1) both}
@keyframes ewipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
.enter-rise{animation:fade .6s ease both}

/* Lab status wall */
.wall{display:flex;flex-direction:column;gap:3.5vh}
.wallhead{display:flex;align-items:center;gap:2.5vw}
.pring{width:15vh;height:15vh;transform:rotate(-90deg);flex:none}
.pring circle{fill:none;stroke-width:9}
.pring .pt{stroke:#3a0d10}
.pring .pf{stroke:#35c27a;stroke-linecap:round;stroke-dasharray:263.9;stroke-dashoffset:263.9;transition:stroke-dashoffset 1.6s cubic-bezier(.2,.8,.2,1) .3s}
.wbig{font-size:clamp(26px,6vh,88px);font-weight:800;line-height:1}
.wbig b{color:#35c27a;font-family:ui-monospace,Consolas,monospace}
.wsub{margin-top:1.2vh;color:var(--muted);font-size:clamp(13px,2.2vh,30px)}
.wsub .hot{color:var(--critical);font-weight:700}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(26vh,1fr));gap:1.6vh 1.2vw}
.tile{display:flex;flex-direction:column;gap:.6vh;min-width:0;padding:1.8vh 1.2vw;border-radius:1.2vh;border:1px solid var(--c);background:linear-gradient(160deg,var(--bgc),#060e08);--c:#1f5c3d;--bgc:#0d2a1c;animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.tile.update{--c:#7a5a14;--bgc:#2e2208}
.tile.vulnerable{--c:#8a3f1c;--bgc:#33150a}
.tile.exploited{--c:var(--critical);--bgc:#3a0d10;animation:rise .5s cubic-bezier(.2,.8,.2,1) both,throb 1.8s ease-in-out 1s infinite;animation-delay:var(--d,0ms),calc(var(--d,0ms) + 600ms)}
@keyframes throb{50%{box-shadow:0 0 0 .6vh #ff4d5244,0 0 4vh #ff4d5266}}
.tstat{font:800 clamp(10px,1.6vh,22px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase;color:#35c27a}
.tile.update .tstat{color:var(--amber)}.tile.vulnerable .tstat{color:var(--high)}.tile.exploited .tstat{color:var(--critical)}
.tile b{font-size:clamp(16px,3vh,40px);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsub{color:var(--muted);font-size:clamp(11px,1.8vh,24px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tcount{color:var(--text);font:600 clamp(11px,1.7vh,22px) ui-monospace,Consolas,monospace}

/* Patch deadlines */
.dl{display:flex;align-items:center;gap:2vw;padding:1.3vh 0;border-bottom:1px solid var(--line);animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.dleft{flex:none;width:8em;display:flex;flex-direction:column;align-items:flex-end;font-size:clamp(11px,1.8vh,24px);color:var(--muted)}
.dleft b{font:800 clamp(22px,4.6vh,64px)/1 ui-monospace,Consolas,monospace;color:var(--c,var(--text))}
.dl.far{--c:var(--text)}.dl.near{--c:var(--amber)}.dl.soon{--c:var(--critical)}.dl.over{--c:#8a5055}
.dl.over:not(.mine) .title{color:var(--muted)}
.dl.mine{background:linear-gradient(90deg,#3a2a0c66,transparent 70%)}
.dl.mine.over,.dl.mine.soon{--c:var(--critical)}
.dl.soon .dleft b{animation:pulse 1.6s infinite}
.deadlines .title .badge{font-size:.5em}

/* CVE pulse and the patch calendar strip */
.pulse{display:flex;flex-direction:column;gap:3vh}
.pstats{display:flex;gap:4vw;align-items:flex-end}
.pstats div{display:flex;flex-direction:column}
.pstats b{font:800 clamp(30px,8vh,110px)/1 ui-monospace,Consolas,monospace;color:var(--accent)}
.pstats .crit b{color:var(--critical)}.pstats div:nth-child(3) b{color:var(--high)}.pstats .dim b{color:var(--text);font-size:clamp(22px,5vh,70px)}
.pstats span{margin-top:.6vh;color:var(--muted);font-size:clamp(12px,2vh,26px)}
.chart .cols{display:flex;align-items:stretch;gap:.4vw;height:28vh;border-bottom:2px solid var(--line)}
.chart .col{flex:1;display:flex;flex-direction:column-reverse;gap:2px;animation:colup .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms);transform-origin:bottom}
@keyframes colup{from{transform:scaleY(0)}to{transform:none}}
.chart .col i{display:block;border-radius:3px 3px 0 0}
.chart i.critical{background:var(--critical)}.chart i.high{background:var(--high)}.chart i.other{background:var(--medium);opacity:.75}.chart i.none{background:var(--none)}
.chart .axis{display:flex;justify-content:space-between;margin-top:.8vh;color:var(--muted);font:600 clamp(10px,1.6vh,22px) ui-monospace,Consolas,monospace}
.skey{display:flex;gap:2vw;margin-top:1vh;color:var(--muted);font-size:clamp(11px,1.8vh,24px)}
.skey span{display:inline-flex;align-items:center;gap:.4em}
.skey span::before{content:"";width:.8em;height:.8em;border-radius:.15em;background:var(--c)}
.skey .critical{--c:var(--critical)}.skey .high{--c:var(--high)}.skey .other{--c:var(--medium)}.skey .none{--c:var(--none)}
.cal{display:flex;align-items:center;gap:3vw;padding:1.6vh 1.6vw;border:1px solid var(--line);border-radius:1.2vh;background:#0a1219}
.cal .pt{display:flex;align-items:baseline;gap:.6em;flex:none}
.cal .pt b{font:800 clamp(20px,4vh,56px)/1 ui-monospace,Consolas,monospace;color:var(--accent)}
.cal .pt span{color:var(--muted);font-size:clamp(12px,2vh,26px);max-width:22vw}
.vers{display:flex;flex-wrap:wrap;align-items:center;gap:.8vh 1vw;min-width:0}
.vlabel{color:var(--muted);font:700 clamp(10px,1.6vh,22px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.ver{padding:.3em .7em;border-radius:.4em;background:var(--panel);border-left:.3em solid var(--c,var(--none));font-size:clamp(11px,1.8vh,24px);color:var(--muted);white-space:nowrap}
.ver b{color:var(--text)}
.ver em{font-style:normal;font-weight:700;color:var(--c)}
.ver.patched{--c:#35c27a}.ver.update{--c:var(--amber)}.ver.vulnerable{--c:var(--high)}.ver.exploited{--c:var(--critical)}

/* Lab pulse */
.ops{display:flex;flex-direction:column;gap:3vh}
.ostrip{display:flex;flex-wrap:wrap;gap:1vh 2.5vw;font:700 clamp(13px,2.3vh,32px) ui-monospace,Consolas,monospace}
.ostrip .ok{color:#35c27a}.ostrip .warn{color:var(--amber)}.ostrip .bad{color:var(--critical)}.ostrip .dim{color:var(--muted);font-weight:500;margin-left:auto}
.nodes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2vw}
.node{display:flex;flex-direction:column;gap:1.6vh;padding:2.4vh 1.6vw;border:1px solid var(--line);border-radius:1.4vh;background:linear-gradient(160deg,#0d1b25,#060e08);animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.node.down{border-color:var(--critical);background:linear-gradient(160deg,#3a0d10,#060e08)}
.nhead{display:flex;justify-content:space-between;align-items:baseline}
.nhead b{font:800 clamp(22px,4.6vh,64px)/1 ui-monospace,Consolas,monospace}
.nhead .up{color:#35c27a;font-weight:700}.nhead .off{color:var(--critical);font-weight:700;animation:pulse 1s infinite}
.nsub{color:var(--muted);font-size:clamp(12px,2vh,26px)}
/* Label and value on one line, the bar full width under them: fits however narrow the card gets */
.meter{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.7vh 1vw;font-size:clamp(12px,2vh,26px);color:var(--muted)}
.meter>span:first-child{grid-area:1/1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.meter>b{grid-area:1/2}
.meter>.mbar{grid-area:2/1/3/3}
.meter b{color:var(--text);font-family:ui-monospace,Consolas,monospace;text-align:right}
.meter .mbar{height:1.3vh;border-radius:1vh;background:var(--line);overflow:hidden}
.meter .mbar i{display:block;height:100%;border-radius:1vh;background:#35c27a;animation:grow 1.2s cubic-bezier(.2,.8,.2,1) .5s backwards}
.meter.warn .mbar i{background:var(--amber)}.meter.bad .mbar i{background:var(--critical)}.meter.bad b{color:var(--critical)}
.nfoot{margin-top:.6vh;font:700 clamp(12px,2vh,26px) ui-monospace,Consolas,monospace}
.nfoot.ok{color:#35c27a}.nfoot.bad{color:var(--amber)}

/* Richer takeovers */
#takeover h1{font-size:clamp(28px,5.6vh,84px);-webkit-line-clamp:2}
#takeover.vuln h1{font-size:clamp(26px,5.2vh,78px);-webkit-line-clamp:2}
.tk-body{padding-right:30vh}
.tk-live{margin-top:2vh}
.tk-live .gauges{margin-top:2vh}
#takeover .dial .dt{stroke:#ffffff22}
#takeover .elabel,#takeover .esub{color:#f3dada}
#takeover .ebar{background:#ffffff1a}
.tk-cves>div{animation:slidein .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
@keyframes slidein{from{opacity:0;transform:translateX(3vw)}to{opacity:1;transform:none}}
.tk-cves{margin-top:2.4vh;font-size:clamp(14px,2.6vh,34px)}
.tk-inst{margin-top:2.6vh;max-width:70vw}
.tk-inst h3{margin:0 0 1vh;color:#ffd99a;font:700 clamp(12px,2vh,26px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.irow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) minmax(0,1fr) auto;gap:1.5vw;align-items:center;padding:.9vh 0;border-top:1px solid #ffffff1a;font-size:clamp(13px,2.3vh,32px);animation:slidein .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.ihost{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.iver{font-family:ui-monospace,Consolas,monospace;color:#f3dada}
.iarrow{font-family:ui-monospace,Consolas,monospace;color:#f3dada}.iarrow b{color:#fff}
.istat{font:800 .75em ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;padding:.2em .6em;border-radius:.3em;background:#ffffff1a}
.irow.exploited .istat{background:var(--critical);color:#fff}.irow.vulnerable .istat{background:var(--high);color:#1b0a03}
.irow.update .istat{background:var(--amber);color:#1b1203}.irow.patched .istat{background:#35c27a;color:#03140a}
.tk-count{display:flex;align-items:center;gap:1.4vw}
.tk-count b{font:900 clamp(36px,9vh,130px)/1 ui-monospace,Consolas,monospace;color:#fff;font-variant-numeric:tabular-nums}
.tk-count span{display:flex;flex-direction:column;color:#ffb3b3;font:700 clamp(14px,2.8vh,38px) ui-monospace,Consolas,monospace;letter-spacing:.06em;text-transform:uppercase}
.tk-count em{font-style:normal;color:#e8c4c4;font-weight:500;font-size:.7em;text-transform:none;letter-spacing:0;margin-top:.3em}
.tk-first{margin-top:1.6vh;color:#fff;font-size:clamp(14px,2.5vh,34px)}
.tk-first b{color:#ffb3b3;font-family:ui-monospace,Consolas,monospace;text-transform:uppercase;letter-spacing:.06em}
.tk-first span{color:#e8c4c4}
#takeover .meta{margin-top:1.4vh;font-size:clamp(13px,2.1vh,28px)}
#takeover .rlabel{justify-content:flex-end}
#takeover .rline{border-bottom-color:#5a1a1a}
#takeover .rline .tick.now{color:#fff}
.tk-live .replay{margin-top:2vh}

/* Top-of-the-hour recap */
#recap{position:fixed;inset:0;z-index:9;display:flex;flex-direction:column;padding:5vh 5vw 4vh;background:radial-gradient(ellipse at 80% 0%,#08301a 0,transparent 60%),radial-gradient(ellipse at 10% 100%,#062a10 0,transparent 55%),var(--bg);animation:fade .5s ease}
#recap[hidden]{display:none}
.rc-head{display:flex;align-items:baseline;gap:2vw}
.rc-kicker{background:var(--accent);color:var(--accent-ink);font:800 clamp(13px,2.2vh,30px) ui-monospace,Consolas,monospace;letter-spacing:.14em;padding:.35em .8em;border-radius:.3em}
.rc-head h1{font-size:clamp(26px,5.4vh,80px)}
.rc-since{margin-left:auto;color:var(--muted);font:600 clamp(13px,2.2vh,30px) ui-monospace,Consolas,monospace}
.rc-grid{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:3vh 3vw;margin-top:4vh;min-height:0}
.rc-grid section{animation:rise .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms);min-width:0;overflow:hidden}
.rc-grid h2{margin:0 0 1.6vh;color:var(--muted);font:700 clamp(12px,2vh,26px) ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.rc-total{display:flex;flex-direction:column;gap:1.6vh}
.rc-nums{display:flex;gap:4vw}
.rc-nums div{display:flex;flex-direction:column}
.rc-nums b{font:900 clamp(44px,12vh,170px)/1 ui-monospace,Consolas,monospace;color:var(--accent);font-variant-numeric:tabular-nums}
.rc-nums .cv b{color:var(--high)}
.rc-nums span{color:var(--text);font-size:clamp(14px,2.6vh,34px)}
.rc-total .bar{width:100%;height:1.4vh}
.rc-total .legend{font-size:clamp(13px,2.2vh,30px)}
.rc-sev{display:flex;flex-wrap:wrap;gap:1vh 2vw;font-size:clamp(13px,2.2vh,30px);color:var(--muted)}
.rc-sev b{font-family:ui-monospace,Consolas,monospace;color:var(--text)}
.rc-sev .critical b{color:var(--critical)}.rc-sev .high b{color:var(--high)}
.rc-kev p,.rc-new p{margin:0 0 1.6vh;font-size:clamp(14px,2.6vh,36px);font-weight:700;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rc-kev em,.rc-new em{font-style:normal;color:var(--muted);font-weight:500;font-size:.7em;margin-left:.6em}
.rc-new .badge{margin-right:.6em;font-size:.55em;vertical-align:middle}
.mover{display:grid;grid-template-columns:minmax(0,1fr) 9vw 3em;gap:1.4vw;align-items:center;margin-bottom:1.6vh;font-size:clamp(13px,2.4vh,32px);font-weight:600}
.mover span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mover .mbar{height:1.2vh;background:var(--line);border-radius:1vh;overflow:hidden}
.mover .mbar i{display:block;height:100%;background:var(--accent);border-radius:1vh}
.mover b{color:var(--accent);font-family:ui-monospace,Consolas,monospace;text-align:right}
.rc-foot{margin-top:2vh;color:var(--muted);font:600 clamp(12px,1.9vh,24px) ui-monospace,Consolas,monospace;letter-spacing:.08em}
.muted{color:var(--muted)!important;font-weight:500!important}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0ms!important;animation-iteration-count:1!important;transition:none!important}
  #crawl-track{animation:none!important}
  .rline i{opacity:.92}
}
.rc-grid p.muted{font-size:clamp(14px,2.6vh,36px)}

/* ---- Colour: topics, reach, ladder ---- */
:root{--major:#ff3fae;--t-vulns:#ff7a5c;--t-attacks:#ff5c85;--t-ai:#b39bff;--t-bigtech:#4cc3ff;--t-hardware:#ffc247;--t-software:#5be08a;--t-crypto:#36e0cb;--t-space:#909aff;
  --world:#36e0cb;--national:#7d98ff;--niche:#ffa35c}
[data-tc]{--tc:var(--muted)}
[data-tc=vulns]{--tc:var(--t-vulns)}[data-tc=attacks]{--tc:var(--t-attacks)}[data-tc=ai]{--tc:var(--t-ai)}[data-tc=bigtech]{--tc:var(--t-bigtech)}
[data-tc=hardware]{--tc:var(--t-hardware)}[data-tc=software]{--tc:var(--t-software)}[data-tc=crypto]{--tc:var(--t-crypto)}[data-tc=space]{--tc:var(--t-space)}
.badge.topic{background:#0e161d;border:1px solid #22352a;background:color-mix(in srgb,var(--tc) 16%,transparent);color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent)}
.badge.major{background:var(--major);color:#fff}
.badges{align-items:center}
.badges .ladder{display:inline-flex;gap:.25vw}
.badges .ladder i{display:block;width:1.6vw;height:1vh;border-radius:.3vh;background:#24303b}
.ladder i.on.developing{background:var(--amber)}.ladder i.on.breaking{background:var(--red)}.ladder i.on.major{background:var(--major)}
.badges .needs{color:var(--muted);font:600 clamp(11px,1.7vh,22px) ui-monospace,Consolas,monospace}
.storyscene .rank{color:var(--tc,var(--muted))}
.legend.reach .world{--c:var(--world)}.legend.reach .national{--c:var(--national)}.legend.reach .niche{--c:var(--niche)}
.barline.developing i{background:var(--amber)}.barline.breaking i{background:var(--red)}.barline.major i{background:var(--major)}
#takeover.major{background:radial-gradient(ellipse at 50% 30%,#3a0628 0,#12020c 70%)}
#takeover.major .tk-flash{background:linear-gradient(90deg,var(--major),#ff3b3b)}
#takeover.major .meta,#takeover.major .outlets{color:#f0c4dc}

/* ---- Industry scenes ---- */
.listscene.digest{max-width:84vw}
.digest .dg-k{color:var(--t-ai);font:700 clamp(12px,1.9vh,24px) ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;margin-bottom:2vh}
.week .dg-k{color:#ffc247}
.digest .dg-ai{margin-top:2.6vh;color:var(--muted);font:500 clamp(10px,1.5vh,19px) ui-monospace,Consolas,monospace;letter-spacing:.06em}
.digest h1{font-size:clamp(26px,5vh,68px);line-height:1.15;margin:0 0 3vh}
.digest p{font-size:clamp(16px,2.8vh,38px);line-height:1.45;color:#cfe6d5;margin:0 0 2.2vh}
.ogrid{display:grid;grid-template-columns:repeat(5,1fr);gap:1.6vh 1.2vw}
.ot{display:flex;flex-direction:column;gap:.6vh;padding:1.8vh 1.2vw;border-radius:1vh;background:var(--panel);border-left:.5vw solid #2fbf71}
.ot b{font-size:clamp(14px,2.6vh,34px)}
.ot .ow{color:#2fbf71;font-weight:700;font-size:clamp(12px,1.9vh,26px)}
.ot .od{color:var(--muted);font-size:clamp(11px,1.6vh,22px);overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ot.lvl-notice{border-left-color:#5b6b78}.ot.lvl-notice .ow{color:var(--muted)}
.ot.lvl-minor{border-left-color:var(--amber);background:#1d1608}.ot.lvl-minor .ow{color:var(--amber)}
.ot.lvl-major,.ot.lvl-critical{border-left-color:var(--red);background:#250a0b}.ot.lvl-major .ow,.ot.lvl-critical .ow{color:#ff8a8a}
.ot.stale{opacity:.55}
.pk{display:flex;gap:2vw;align-items:flex-end;margin-bottom:4vh}
.pk>div:not(.rdays){display:flex;flex-direction:column;padding:1.6vh 1.4vw;border-radius:1vh;background:var(--panel);border-top:.4vh solid var(--accent);min-width:10vw}
.pk b{font:800 clamp(28px,7vh,96px)/1 ui-monospace,Consolas,monospace}
.pk span{color:var(--muted);font-size:clamp(12px,1.9vh,26px);margin-top:.6vh}
.pk .crit{border-top-color:var(--critical)!important}.pk .kev{border-top-color:var(--major)!important}
.ransom .pk>div:not(.rdays){border-top-color:var(--t-attacks)}
.rdays{flex:1;display:flex;align-items:flex-end;gap:.4vw;height:12vh}
.rdays i{flex:1;background:var(--t-attacks);border-radius:.4vh .4vh 0 0;min-height:2px}
.pcols{display:grid;grid-template-columns:1fr 1.3fr;gap:4vw}
.patch .barline i{background:var(--t-bigtech)}.ransom .barline i{background:var(--t-attacks)}
.listscene .dim{color:var(--muted);font-size:clamp(11px,1.6vh,20px);margin-top:2vh}
.ransom .pk{margin-bottom:2.5vh}.ransom .rdays{height:8vh}
.ransom .pk b{font-size:clamp(24px,5.5vh,76px)}
.ransom .row{margin-bottom:1.4vh}.ransom .title{font-size:clamp(15px,2.6vh,34px)}

/* ---- Cloud reliability, a year of Patch Tuesday, release radar ---- */
body[data-scene=cloud]{--scene:#5cc8ff;--glow:rgba(92,200,255,.13)}
body[data-scene=patchyear]{--scene:#7aa2ff;--glow:rgba(122,162,255,.13)}
body[data-scene=releases]{--scene:#b8f070;--glow:rgba(184,240,112,.12)}
.cloud .pk>div{border-top-color:#5cc8ff}.cloud .pk b{font-size:clamp(24px,5.5vh,76px)}
.gline.cl{grid-template-columns:minmax(7em,max-content) 1fr minmax(9em,max-content);animation:rise .5s ease both;animation-delay:var(--d,0ms)}
.gline.cl em{font-style:normal;color:var(--muted);font-size:.85em;white-space:nowrap}
.gline.cl i{display:block;height:100%;border-radius:1vh;background:#5cc8ff}
.gline.cl.lvl-minor i{background:var(--amber)}.gline.cl.lvl-major i{background:var(--high)}.gline.cl.lvl-critical i{background:var(--critical)}
.listscene .clean{margin:2.4vh 0 0;color:var(--muted);font-size:clamp(12px,1.9vh,24px)}
.patchyear .pk>div{border-top-color:#7aa2ff}.patchyear .pk b{font-size:clamp(24px,5.5vh,76px)}
.patchyear .rchart{height:46vh}
.rbars.py .rd i{background:#7aa2ff55;display:flex;flex-direction:column;justify-content:flex-end;overflow:visible}
.rbars.py .rd i u{display:block;width:100%;background:var(--critical);border-radius:0;min-height:1px}
.rbars.py .rd s{position:absolute;bottom:calc(100% + 3.2vh);left:-20%;right:-20%;text-align:center;text-decoration:none;color:var(--major);font:700 clamp(9px,1.35vh,18px) ui-monospace,Consolas,monospace}
.patchyear .ck{color:var(--critical)}
.releases .ver{font:700 .8em ui-monospace,Consolas,monospace;color:#b8f070}
.releases .row{margin-bottom:1.7vh;animation:rise .5s ease both;animation-delay:var(--d,0ms)}.releases .title{font-size:clamp(15px,2.7vh,36px)}
.releases .eol .what b{color:var(--muted)}.releases .eol.soon .what b{color:var(--amber)}.releases .eol.gone .what b{color:var(--critical)}
@media (max-aspect-ratio:3/4){
  .cloud .pk,.patchyear .pk{flex-wrap:wrap;gap:1.2vh 3vw}
  .cloud .pk>div,.patchyear .pk>div{flex:1 1 40%;min-width:0}
  .gline.cl{grid-template-columns:minmax(0,1fr) max-content;row-gap:.6vh}
  .gline.cl b{grid-column:1/-1;grid-row:2}
  /* takeovers on an upright phone: no room beside the text for the QR code, so the text gets the full width */
  .tk-flash{padding:2vh 5vw}
  .tk-flash span{font-size:clamp(22px,9vw,60px);letter-spacing:.04em}
  .tk-body{padding:2.4vh 5vw;justify-content:flex-start;min-height:0;overflow:hidden}
  #takeover h1,#takeover.vuln h1{font-size:clamp(22px,7.4vw,44px)}
  .tk-kicker{font-size:clamp(12px,3.6vw,18px);margin-bottom:1.2vh}
  .tk-live .gauges{flex-wrap:wrap;gap:1.6vh 5vw}
  .tk-live .gauges>*:not(.dial){flex:1 1 100%;min-width:0}
  .tk-desc,.tk-inst{max-width:none}
  .tk-facts,.tk-cves,.tk-first{font-size:clamp(13px,4vw,20px)}
  .tk-count b{font-size:clamp(30px,12vw,70px)}
  .qr.tk{display:none}
}

/* ---- World threat monitor: scene colours, threat strip, map ---- */
body{--scene:var(--accent);--glow:rgba(0,255,65,.13);background:radial-gradient(ellipse at 100% 100%,var(--glow) 0,transparent 55%),radial-gradient(ellipse at 0% 0%,var(--glow) 0,transparent 45%),var(--bg)}
body[data-scene=digest]{--scene:#c792ff;--glow:rgba(199,146,255,.14)}
body[data-scene=week]{--scene:#ffc247;--glow:rgba(255,194,71,.12)}
body[data-scene=brief]{--scene:#ffc247;--glow:rgba(255,194,71,.14)}
body[data-scene=map]{--scene:#ff5c85;--glow:rgba(255,92,133,.14)}
body[data-scene=stories]{--scene:var(--accent);--glow:rgba(0,255,65,.14)}
body[data-scene=threat]{--scene:#ff4d52;--glow:rgba(255,77,82,.14)}
body[data-scene=outages]{--scene:#ffa63d;--glow:rgba(255,166,61,.14)}
body[data-scene=lab]{--scene:#2fbf71;--glow:rgba(47,191,113,.14)}
body[data-scene=deadlines]{--scene:#f0843f;--glow:rgba(240,132,63,.14)}
body[data-scene=lag]{--scene:#ffc247;--glow:rgba(255,194,71,.12)}
body[data-scene=patch]{--scene:#4da3ff;--glow:rgba(77,163,255,.14)}
body[data-scene=ransom]{--scene:#ff5c85;--glow:rgba(255,92,133,.14)}
body[data-scene=pulse]{--scene:#b388ff;--glow:rgba(179,136,255,.14)}
body[data-scene=ops]{--scene:#26d9a0;--glow:rgba(38,217,160,.14)}
body[data-scene=rising]{--scene:#ff7ac6;--glow:rgba(255,122,198,.14)}
body[data-scene=trends]{--scene:#7cf29a;--glow:rgba(124,242,154,.14)}
.brand em{background:var(--scene);transition:background .6s}
#progress i,#dots i.on{background:var(--scene)}
.listscene h2{color:var(--scene)}

body{--lvl:#2fbf71;--lvl-a:rgba(47,191,113,.22);--lvl-b:rgba(47,191,113,.45)}
body[data-threat="1"]{--lvl:#4da3ff;--lvl-a:rgba(77,163,255,.22);--lvl-b:rgba(77,163,255,.45)}
body[data-threat="2"]{--lvl:#ffc53d;--lvl-a:rgba(255,197,61,.22);--lvl-b:rgba(255,197,61,.45)}
body[data-threat="3"]{--lvl:#ff8a3d;--lvl-a:rgba(255,138,61,.24);--lvl-b:rgba(255,138,61,.5)}
body[data-threat="4"]{--lvl:#ff3b3b;--lvl-a:rgba(255,59,59,.26);--lvl-b:rgba(255,59,59,.55)}
/* The threat strip: the level and where it sits on the scale, the last day's score, today's counts, and why */
#threatbar{display:flex;align-items:stretch;gap:0;margin:1.4vh 3vw 0;height:7vh;min-height:44px;border-radius:1vh;overflow:hidden;
  background:linear-gradient(90deg,var(--lvl-a),var(--panel) 22%,var(--panel));border:1px solid var(--lvl-b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 .6vh 2.4vh -1vh var(--lvl-a);
  font:600 clamp(11px,1.7vh,23px) ui-monospace,Consolas,monospace;white-space:nowrap;transition:border-color .6s,box-shadow .6s}
#threatbar[hidden]{display:none}
#threatbar>*{display:flex;align-items:center;flex:none;padding:0 1.1vw}
#threatbar>*+*{border-left:1px solid rgba(124,242,154,.09)}
.tlv{flex-direction:column;align-items:flex-start!important;justify-content:center;gap:.35vh;min-width:12vw;background:var(--lvl-a);border-left:.45vw solid var(--lvl)}
.tl-k{display:flex;align-items:center;gap:.5vw;color:var(--muted);font-size:clamp(9px,1.25vh,16px);letter-spacing:.2em}
.tlv b{color:var(--lvl);font:900 clamp(18px,3.3vh,44px)/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;text-shadow:0 0 1.4vh var(--lvl-b)}
body[data-threat="4"] .tlv b,body[data-threat="3"] .tlv b{animation:pulse 1.6s infinite}
.livedot{width:.75em;height:.75em;border-radius:50%;background:var(--lvl);box-shadow:0 0 .7em var(--lvl);animation:pulse 1.4s infinite;flex:none}
/* Five segments, low to severe, lit up to the current level */
.tl-gauge{flex-direction:column;align-items:stretch!important;justify-content:center;gap:.7vh}
#tl-meter{display:flex;gap:.25vw;height:1.3vh;min-height:7px}
#tl-meter i{width:2.3vw;border-radius:.3vh;background:var(--c);opacity:.16;transition:opacity .6s,box-shadow .6s}
#tl-meter i:nth-child(1){--c:#2fbf71}#tl-meter i:nth-child(2){--c:#4da3ff}#tl-meter i:nth-child(3){--c:#ffc53d}#tl-meter i:nth-child(4){--c:#ff8a3d}#tl-meter i:nth-child(5){--c:#ff3b3b}
#tl-meter i.on{opacity:.75}
#tl-meter i.at{opacity:1;box-shadow:0 0 1vh var(--c)}
#tl-score{color:var(--muted);font-size:clamp(9px,1.25vh,16px);letter-spacing:.14em}
#tl-score b{color:var(--text)}
/* The last day's score as a filled line, ending in a dot at the current value */
.tl-trend{position:relative;flex-direction:column;align-items:stretch!important;justify-content:center;gap:.5vh;width:9vw}
#tl-spark{width:100%;height:3.2vh;display:block;overflow:visible}
#tl-spark polyline{fill:none;stroke:var(--lvl);stroke-width:2;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
#tl-spark .area{fill:var(--lvl-a);stroke:none}
#tl-now{position:absolute;right:1.1vw;width:.8vh;height:.8vh;min-width:5px;min-height:5px;transform:translate(50%,-50%);border-radius:50%;background:var(--lvl);box-shadow:0 0 .8vh var(--lvl)}
.tl-trend span{color:var(--muted);font-size:clamp(8px,1.1vh,14px);letter-spacing:.16em}
.tl-trend.none{display:none!important}
/* Today's counts: the number over its label; zero counts stay dim */
#tl-chips{gap:0;padding:0!important;min-width:0;overflow:hidden;flex:0 1 auto!important}
.tc{display:flex;flex-direction:column;justify-content:center;gap:.4vh;padding:0 1vw;height:100%;--kc:var(--text)}
.tc+.tc{border-left:1px solid rgba(124,242,154,.07)}
.tc b{font:800 clamp(15px,2.6vh,34px)/1 ui-monospace,Consolas,monospace;color:var(--text)}
.tc span{color:var(--text);font-size:clamp(8px,1.15vh,15px);letter-spacing:.12em;text-transform:uppercase}
.tc.on b{color:var(--kc);text-shadow:0 0 1.2vh color-mix(in srgb,var(--kc) 40%,transparent)}
.tc.on span{color:var(--text)}
.tc.k-kev{--kc:#ffb547}.tc.k-cve{--kc:#ff4d52}.tc.k-outage{--kc:#ffa63d}.tc.k-ransom{--kc:#ff5c85}.tc.k-news{--kc:var(--accent)}
.tc.k-net{--kc:#b388ff}.tc.k-adv{--kc:#4da3ff}.tc.k-camp{--kc:#c792ff}.tc.k-bgp{--kc:#ff7a5c}.tc.k-abuse{--kc:#7cf29a}
#tl-why{flex:1 1 0!important;min-width:12vw;white-space:normal;line-height:1.25;color:var(--text);font:500 clamp(11px,1.75vh,23px) system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#tl-why>span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
#tl-why em{flex:none;margin-right:.8vw;font:700 clamp(8px,1.15vh,15px) ui-monospace,Consolas,monospace;letter-spacing:.16em;color:var(--lvl);font-style:normal}

.ci i.ev-outage{background:#ffa63d;border-radius:.1em;transform:rotate(45deg)}
.ci i.ev-ransom{background:#ff5c85}
.ci i.ev-kev{background:#ffb547;box-shadow:0 0 .5em #ffb547}
.ci:has(i.ev-kev) b{color:#ffb547}

.mapscene{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 23vw;grid-template-rows:minmax(0,1fr);gap:2vw;align-items:center;height:100%;max-height:78vh}
.mapscene .live{max-height:100%;overflow:hidden}
.mapscene .live .ev:last-child{border-bottom:0}
.mapwrap{position:relative;min-width:0;align-self:stretch;display:flex;flex-direction:column;min-height:0}
.world{width:100%;height:auto;display:block;overflow:visible}
.mapwrap .world{flex:1 1 0;min-height:0}
.world .land circle{fill:#21465a}
.mk{opacity:0;animation:pop .6s ease forwards;animation-delay:var(--d,0ms)}
@keyframes pop{from{opacity:0}to{opacity:1}}
.mk.ransom .halo{fill:rgba(255,92,133,.28);stroke:#ff5c85;stroke-width:.12}
.mk.ransom .core{fill:#ffd1dd}
.mk .ping{fill:none;stroke:#ff5c85;stroke-width:.2;transform-box:fill-box;transform-origin:center;animation:ping 2.4s ease-out infinite}
.mk.news path{fill:var(--accent);stroke:var(--accent-ink);stroke-width:.12}
.mk.outage rect{fill:#ffa63d;stroke:#1b1203;stroke-width:.12}
.mk.outage.lvl-major rect,.mk.outage.lvl-critical rect{fill:#ff3b3b}
.mk.outage.lvl-notice rect{fill:#7a9a82}
.mk.outage .ping{stroke:#ffa63d}
@keyframes ping{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.world .lbl{fill:#ffd1dd;font:700 2.1px ui-monospace,Consolas,monospace;paint-order:stroke;stroke:#020603;stroke-width:.5}
.legend{display:flex;gap:2vw;justify-content:center;margin-top:1.4vh;color:var(--muted);font-size:clamp(11px,1.6vh,21px)}
.mapwrap .legend{flex:none;flex-wrap:wrap;gap:.8vh 1.6vw;margin-top:1.4vh}
.mapwrap .legend span{margin-right:0}
.legend span{white-space:nowrap}
.legend em{font-style:normal;opacity:.7}
.l-ransom{color:#ff8fab}.l-outage{color:#ffc27a}.l-news{color:#7fe3fa}
.live h3{margin:2.4vh 0 1.2vh;color:var(--muted);font:700 clamp(11px,1.7vh,22px) ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.lvlcard{padding:1.6vh 1.2vw;border-radius:1vh;background:linear-gradient(135deg,var(--lvl-a),#060e08 70%);border-left:.5vw solid var(--lvl)}
.lvlcard>span{color:var(--muted);font:700 clamp(11px,1.6vh,20px) ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.lvlcard b{display:block;color:var(--lvl);font:900 clamp(28px,6vh,84px)/1.05 ui-monospace,Consolas,monospace;letter-spacing:.06em}
.lvlcard ul{margin:1vh 0 0;padding-left:1.1em;font-size:clamp(11px,1.7vh,22px);color:#cfe6d5;line-height:1.35}
.lvlcard li{margin:.4vh 0}
.ev{display:flex;gap:.8vw;align-items:flex-start;padding:.9vh 0;border-top:1px solid var(--line);opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms)}
.ev em{flex:none;font:800 clamp(9px,1.3vh,17px) ui-monospace,Consolas,monospace;letter-spacing:.08em;padding:.3em .5em;border-radius:.3em;margin-top:.2em;min-width:6.4em;text-align:center}
.ev b{display:block;font-size:clamp(12px,1.9vh,25px);font-weight:600;line-height:1.25}
.ev span{color:var(--muted);font-size:clamp(10px,1.5vh,20px)}
.ev.k-ransom em{background:#ff5c85;color:#2a0410}.ev.k-outage em{background:#ffa63d;color:#1b1203}
.ev.k-news em{background:var(--accent);color:var(--accent-ink)}.ev.k-kev em{background:#ffb547;color:#1b1203}
@media (prefers-reduced-motion:reduce){.mk,.ev{opacity:1;animation:none}.scan,.mk .ping,.livedot{animation:none}}
main>div.mapscene{padding-right:0}

/* ---- Pop-ups, threat level week, campaigns, advisories, level/directive takeovers ---- */
body[data-scene=level]{--scene:#ffc53d;--glow:rgba(255,197,61,.12)}
body[data-scene=campaigns]{--scene:#c792ff;--glow:rgba(199,146,255,.14)}
body[data-scene=advisories]{--scene:#4da3ff;--glow:rgba(77,163,255,.14)}
.c0{color:#2fbf71}.c1{color:#4da3ff}.c2{color:#ffc53d}.c3{color:#ff8a3d}.c4{color:#ff3b3b}

/* Live pop-ups play inside the threat strip, one at a time, so they never cover the scene; the level stays visible */
#tl-toast{display:none!important;align-items:center!important;gap:.8vw;min-width:0;flex:1 1 0!important;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
#threatbar[data-toast] #tl-chips,#threatbar[data-toast] #tl-why{display:none!important}
#threatbar[data-toast] #tl-toast{display:flex!important;animation:toastin .45s cubic-bezier(.2,.8,.2,1) both}
#threatbar[data-toast]{border-color:var(--tk);box-shadow:0 0 1.5vh -.3vh var(--tk)}
@keyframes toastin{from{opacity:0;transform:translateX(3vw)}to{opacity:1;transform:none}}
#tl-toast em{flex:none;font:800 clamp(9px,1.4vh,18px) ui-monospace,Consolas,monospace;letter-spacing:.08em;padding:.25em .55em;border-radius:.3em;background:var(--tk);color:#0a0a0a;font-style:normal;align-self:center}
#tl-toast b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text);font-weight:650;font-size:clamp(12px,1.9vh,25px)}
#tl-toast span{flex:0 1 auto;max-width:35%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-weight:500;font-size:clamp(10px,1.6vh,21px)}
#threatbar[data-toast=ransom]{--tk:#ff5c85}#threatbar[data-toast=outage]{--tk:#ffa63d}#threatbar[data-toast=kev]{--tk:#ffb547}
#threatbar[data-toast=adv]{--tk:#4da3ff}#threatbar[data-toast=directive]{--tk:#ff3b3b}#threatbar[data-toast=net]{--tk:#b388ff}
#threatbar[data-toast=bgp]{--tk:#ff7a5c}#threatbar[data-toast=breaking]{--tk:#ff3b3b}#threatbar[data-toast=camp]{--tk:#c792ff}

.ci i.ev-adv{background:#4da3ff}.ci i.ev-net{background:#b388ff}.ci i.ev-camp{background:#c792ff}

.mk.net .ring{fill:rgba(179,136,255,.1);stroke:#b388ff;stroke-width:.16;stroke-dasharray:.45 .3}
.mk.net.major .ring{fill:rgba(179,136,255,.25);stroke-width:.3;stroke-dasharray:none}
.mk.bgp path{stroke:#ff7a5c;stroke-width:.4;stroke-linecap:round;fill:none}
.l-net{color:#cdb4ff}.l-bgp{color:#ffab94}
.ev.k-net em{background:#b388ff;color:#160b2e}.ev.k-adv em{background:#4da3ff;color:#04121f}
.ev.k-directive em{background:#ff3b3b;color:#fff}.ev.k-bgp em{background:#ff7a5c;color:#200800}

.levelscene{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 26vw;gap:3vw;align-items:start}
main>div.levelscene{padding-right:0}
.lv-chart{position:relative;height:calc(56vh - var(--rn,0) * 4.6vh);margin:3vh 7vw 0 0;border-bottom:1px solid #22352a}
.lv-chart svg{width:100%;height:100%;display:block}
.lv-chart rect.h0{fill:#2fbf71}.lv-chart rect.h1{fill:#4da3ff}.lv-chart rect.h2{fill:#ffc53d}.lv-chart rect.h3{fill:#ff8a3d}.lv-chart rect.h4{fill:#ff3b3b}
.lv-chart line{stroke:#22352a;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 4}
.lv-tick{position:absolute;left:100%;margin-left:.8vw;transform:translateY(-100%);font:800 clamp(9px,1.4vh,18px) ui-monospace,Consolas,monospace;letter-spacing:.1em}
.lv-days span{position:absolute;bottom:-3.4vh;transform:translateX(-100%);color:var(--muted);font:600 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace}
.lv-pin{position:absolute;top:0;bottom:0;border-left:2px dashed rgba(255,255,255,.4)}
.lv-pin b,.lv-rise b.n{display:grid;place-items:center;width:2.8vh;height:2.8vh;border-radius:50%;background:#fff;color:#020603;font:800 clamp(10px,1.6vh,20px) ui-monospace,Consolas,monospace}
.lv-pin b{position:absolute;top:-1.4vh;left:0;transform:translateX(-50%)}
.lv-rises{margin-top:6vh;display:flex;flex-direction:column;gap:1.2vh}
.lv-rise{display:flex;gap:1vw;align-items:center;font-size:clamp(12px,2vh,26px);opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms)}
.lv-rise .when{color:var(--muted);min-width:7em;font-family:ui-monospace,Consolas,monospace}
.lv-rise .mv{font:800 .85em ui-monospace,Consolas,monospace;white-space:nowrap}
.lv-rise .why{color:#cfe6d5;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-empty{color:var(--muted);font-size:clamp(16px,3vh,40px);line-height:1.4;max-width:46vw}
.levelscene aside .lvlcard ul{font-size:clamp(12px,1.9vh,25px)}
.lv-abuse{margin-top:3vh}
.lv-abuse h3{margin:0 0 1.2vh;color:var(--muted);font:700 clamp(11px,1.7vh,22px) ui-monospace,Consolas,monospace;letter-spacing:.14em;text-transform:uppercase}
.lv-abuse .rdays{height:10vh}.lv-abuse .rdays i{background:#7cf29a}
.lv-abuse p{margin:1vh 0 0;font-size:clamp(12px,1.8vh,24px);color:#cfe6d5}
.levelscene .dim,.campaigns .dim{color:var(--muted)}

.cgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.2vh 1.6vw}
.cgrid.n1,.cgrid.n2,.cgrid.n4{grid-template-columns:repeat(2,1fr)}
.camp{display:flex;flex-direction:column;gap:.8vh;padding:2vh 1.4vw;border-radius:1.2vh;background:var(--panel);border-top:.5vh solid var(--ck,#c792ff);
  opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms)}
.camp .ck{color:var(--ck);font:700 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.camp h3{margin:0;font-size:clamp(20px,4vh,54px);line-height:1.05}
.camp .cn{display:flex;flex-wrap:wrap;gap:.4vh 1vw;color:var(--muted);font-size:clamp(11px,1.7vh,22px)}
.camp .cn b{color:var(--text)}
.camp p{margin:.4vh 0 0;font-size:clamp(12px,1.9vh,25px);line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.camp em{font-style:normal;color:var(--muted);font-size:clamp(10px,1.5vh,20px)}
.camp.k-ransomware{--ck:#ff5c85}.camp.k-state{--ck:#ff4d52}.camp.k-extortion{--ck:#ffa63d}.camp.k-crime{--ck:#ffc247}
.camp.k-malware{--ck:#b388ff}.camp.k-botnet{--ck:#26d9a0}.camp.k-spyware{--ck:#4da3ff}

.advrow{display:flex;gap:1.4vw;align-items:baseline;padding:1.5vh 0;border-top:1px solid var(--line);opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms)}
.advrow .src{flex:none;min-width:9.5em;text-align:center;font:800 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace;letter-spacing:.08em;padding:.35em .6em;border-radius:.3em;background:#16324a;color:#a8d4ff}
.src.s-cisa{background:#0d2a4a;color:#7cc0ff}.src.s-ncsc-uk{background:#2a1340;color:#d8b4ff}.src.s-cyber-centre{background:#3a0d10;color:#ff9a9a}.src.s-cert-eu{background:#2e2a08;color:#ffd84d}
.advrow .body{min-width:0}
.advrow .body b{display:block;font-size:clamp(14px,2.4vh,32px);line-height:1.25}
.advrow .body span{color:var(--muted);font-size:clamp(11px,1.7vh,22px)}
.advrow.directive .body b{color:#ff8a8a}.advrow.joint .body span{color:#7cc0ff}

#takeover.flash{--fl:#ffc53d;--fl-a:rgba(255,197,61,.28);background:radial-gradient(ellipse at 50% 30%,var(--fl-a) 0,transparent 70%),#06080b}
#takeover.flash.lvl-3{--fl:#ff8a3d;--fl-a:rgba(255,138,61,.3)}
#takeover.flash.lvl-4,#takeover.flash.directive{--fl:#ff3b3b;--fl-a:rgba(255,59,59,.32)}
#takeover.flash.agency{--fl:#4da3ff;--fl-a:rgba(77,163,255,.28)}
#takeover.flash .tk-flash{background:var(--fl)}
#takeover.flash .tk-flash span{color:#0b0b0b}
#takeover.flash .tk-kicker{color:#f2e3c4}
#takeover.flash .tk-body{padding-right:5vw}
#takeover.flash .tk-progress{background:rgba(255,255,255,.1)}
.fl-move{display:flex;align-items:baseline;gap:2.5vw;font:900 clamp(40px,13vh,180px)/1 ui-monospace,Consolas,monospace;letter-spacing:.04em;margin:2vh 0 4vh}
.fl-move b:first-child{font-size:.45em;opacity:.55}
.fl-move i{font-style:normal;color:var(--muted);font-size:.5em}
.fl-why{list-style:none;margin:0;padding:0;font-size:clamp(16px,3.2vh,44px);line-height:1.4}
.fl-why li{opacity:0;animation:rise .6s ease forwards;animation-delay:var(--d,0ms)}
.fl-why li::before{content:'▲ ';color:var(--fl)}
@media (prefers-reduced-motion:reduce){#threatbar[data-toast] #tl-toast,.camp,.advrow,.lv-rise,.fl-why li{opacity:1;animation:none}}

/* While you were away */
body[data-scene=away]{--scene:#4cc3ff;--glow:rgba(76,195,255,.12)}
.away .also{display:flex;flex-wrap:wrap;gap:1.2vh 1.2vw;margin-top:3vh}
.away .also span{font-size:clamp(13px,2.1vh,28px);color:#cfe6d5;padding:.7vh 1.2vw;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.04)}

/* Followed stories: a star in the rotation, and a gold takeover for a new development */
.badge.star{background:rgba(255,194,71,.16);color:#ffc247;border:1px solid rgba(255,194,71,.5)}
#takeover.followed{background:radial-gradient(ellipse at 50% 30%,#3a2a06 0,#120c02 70%)}
#takeover.followed .tk-flash{background:#ffc247}
#takeover.followed .tk-flash span{color:#1b1203}
#takeover.followed .tk-kicker{color:#ffd99a}
#takeover .tk-on{margin-top:1.6vh;color:#e9dcc0;font-size:clamp(14px,2.6vh,34px)}

/* Advisories that name what the lab runs */
.advrow .yourun{font-style:normal;font-weight:800;color:#ffc247}

/* Exploit timeline */
body[data-scene=exploits]{--scene:#ff5c85;--glow:rgba(255,92,133,.12)}
.xrow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:2.4vw;align-items:center;padding:1.6vh 0;border-bottom:1px solid var(--line);animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.xrow.mine{background:linear-gradient(90deg,#3a2a0c66,transparent 70%)}
.xname b{display:block;font-size:clamp(14px,2.5vh,34px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xname>span:not(.badge){display:block;margin-top:.5vh;color:var(--muted);font-size:clamp(11px,1.8vh,24px)}
.xname .badge{display:inline-block;font-size:clamp(9px,1.3vh,17px);margin-bottom:.6vh}
.xtrack{position:relative;height:5.4vh}
.xline{position:absolute;left:0;right:0;top:50%;height:2px;background:var(--line)}
.xm{position:absolute;top:50%;width:1.6vh;height:1.6vh;margin:-.8vh 0 0 -.8vh;border-radius:50%;background:var(--c)}
.xm.disc{--c:#4cc3ff}.xm.poc{--c:#ffc247}.xm.kev{--c:#ff5c85;width:2.2vh;height:2.2vh;margin:-1.1vh 0 0 -1.1vh}
.xm.now{--c:#ffffff55;width:2px;height:3vh;margin:-1.5vh 0 0 -1px;border-radius:0}
.xkey{display:flex;gap:1.2vw;align-items:center;margin-top:2vh;color:var(--muted);font-size:clamp(11px,1.7vh,22px)}
.xkey .xm{position:static;display:inline-block;margin:0 .3vw 0 1vw}

/* Digital rain (tv.js startRain): behind everything; the screen's parts are positioned so they paint above it */
body>header,#threatbar,#dots,#progress,body>footer{position:relative}

/* Items that weren't there the last time this scene showed: a tag in front of the headline */
.newtag{display:inline-block;vertical-align:.18em;margin-right:.45em;padding:.22em .45em;border-radius:.3em;background:var(--accent);color:var(--accent-ink);
  font:800 max(.5em,1.1vh)/1 ui-monospace,Consolas,monospace;letter-spacing:.1em;font-style:normal;box-shadow:0 0 1vh var(--accent);animation:pulse 1.6s 3}
@media (prefers-reduced-motion:reduce){.newtag{animation:none}}

/* Phone remote: its QR code, and what it has done to the rotation */
.remote-qr img{background:#fff}
#remote-state{font:800 clamp(10px,1.5vh,19px) ui-monospace,Consolas,monospace;letter-spacing:.12em;padding:.35em .7em;border-radius:.4em;background:var(--amber);color:#1b1203}
#remote-state[hidden]{display:none}
main>div.away.with-qr{padding-right:21vh}
#recap .remote-qr{right:5vw;bottom:3vh;width:14vh}

/* Race to exploit: a clock since disclosure per critical CVE, red once attackers catch up */
body[data-scene=race]{--scene:#ff4d52;--glow:rgba(255,77,82,.12)}
.rrow{display:grid;grid-template-columns:15vw minmax(0,1fr) 25vw;gap:2vw;align-items:center;padding:1.5vh 1vw;border-bottom:1px solid var(--line);border-left:.5vh solid var(--line);
  animation:rise .5s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--d,0ms)}
.rrow.mine{background:linear-gradient(90deg,#3a2a0c66,transparent 70%)}
.rclock b{display:block;font:800 clamp(16px,3.8vh,50px)/1 ui-monospace,Consolas,monospace;color:var(--accent);white-space:nowrap}
.rclock span{display:block;margin-top:.5vh;color:var(--muted);font-size:clamp(10px,1.5vh,20px)}
.rname b{display:block;font-size:clamp(14px,2.6vh,34px);line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rname>span:not(.badge){display:block;margin-top:.5vh;color:var(--muted);font:600 clamp(10px,1.7vh,22px) ui-monospace,Consolas,monospace}
.rname .badge{display:inline-block;font-size:clamp(9px,1.3vh,17px);margin-bottom:.6vh}
.rverdict{justify-self:end;text-align:right;color:var(--muted);font:800 clamp(11px,1.9vh,25px) ui-monospace,Consolas,monospace;letter-spacing:.06em}
.rverdict i{display:block;margin-top:.4vh;font-style:normal;font-weight:600;letter-spacing:0;opacity:.85}
.rrow.poc{border-left-color:var(--high)}.rrow.poc .rclock b,.rrow.poc .rverdict{color:var(--high)}
.rrow.kev{border-left-color:var(--red);background:linear-gradient(90deg,#3a0a0c99,transparent 75%)}.rrow.kev .rclock b,.rrow.kev .rverdict{color:var(--red)}
.rrow.kev .rverdict{text-shadow:0 0 1.5vh rgba(255,59,59,.5)}
.rrow.flip{animation:rise .5s cubic-bezier(.2,.8,.2,1) both,flip 1s 3 var(--d,0ms)}
@keyframes flip{50%{background:#ff3b3b55}}
.rcredit{margin:2vh 0 0;color:var(--muted);font-size:clamp(10px,1.6vh,21px)}
@media (prefers-reduced-motion:reduce){.rrow.flip{animation:none}}

/* Screen off (from the controller): black over everything; takeovers and messages still show */
body.screenoff::before{content:"";position:fixed;inset:0;height:auto;z-index:30;background:#000}
body.screenoff.tk-on::before{display:none}
/* A message sent from the controller */
#notice{position:fixed;left:50%;bottom:8vh;transform:translateX(-50%);z-index:31;max-width:80vw;padding:2.2vh 3.5vw;border-radius:2vh;
  background:#0f1526f2;border:.35vh solid #04f77a;box-shadow:0 2vh 6vh #000c;color:#eef2f8;font:700 clamp(18px,4.2vh,56px)/1.25 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-align:center;animation:noticein .4s ease}
@keyframes noticein{from{opacity:0}to{opacity:1}}
#notice[hidden]{display:none}

/* Ransomware watch: a labelled per-day chart, aligned group bars, sectors */
.rchart{flex:1;display:flex;flex-direction:column;align-self:stretch;min-width:0}
.rchart h3{margin:.8vh 0 0;color:var(--muted);font:600 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase}
.rbars{flex:1;display:flex;gap:.6vw;min-height:12vh;padding-top:3vh}
.rd{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;min-width:0}
.rd i{position:relative;display:block;min-height:2px;background:var(--t-attacks);border-radius:.4vh .4vh 0 0;transition:height .8s ease}
.rd em{position:absolute;bottom:100%;left:0;right:0;padding-bottom:.4vh;text-align:center;font:700 clamp(10px,1.6vh,22px) ui-monospace,Consolas,monospace;font-style:normal;color:var(--text)}
.rd span{margin-top:.5vh;text-align:center;color:var(--muted);font-size:clamp(9px,1.4vh,19px);white-space:nowrap}
.gline{display:grid;grid-template-columns:minmax(6em,max-content) 1fr 2.5em;align-items:center;gap:1vw;margin-top:1vh;font-size:clamp(13px,2.1vh,28px)}
.gline span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gline b{display:block;height:1.1vh;border-radius:1vh;background:#ffffff12;overflow:hidden}
.gline i{display:block;height:100%;border-radius:1vh;background:var(--t-attacks);transition:width .8s ease}
.gline em{font-style:normal;text-align:right;font-weight:700;font-family:ui-monospace,Consolas,monospace}
.ransom h2.sub{margin-top:3vh}
.rsect{display:flex;flex-wrap:wrap;gap:1vh .8vw}
.rsect span{padding:.6vh .9vw;border-radius:99px;border:1px solid #ff5c8555;color:var(--text);font-size:clamp(11px,1.8vh,24px)}
.rsect b{color:var(--t-attacks);margin-left:.3em}

/* Campaign cards: their stories or latest claims */
.campaigns .cgrid{align-items:stretch}
.clist{display:flex;flex-direction:column;gap:1.1vh;margin-top:.6vh}
.clist p{margin:0;-webkit-line-clamp:3}
.clist em{display:block;margin-top:.3vh}
.clist h4{margin:.8vh 0 0;color:var(--ck);font:700 clamp(9px,1.4vh,18px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.clist.claims p{font-size:clamp(12px,1.8vh,24px)}

/* Stories: other outlets' headlines */
.also{margin-top:6vh}
.also h4{margin:0 0 1.2vh;color:var(--muted);font:700 clamp(10px,1.5vh,20px) ui-monospace,Consolas,monospace;letter-spacing:.12em;text-transform:uppercase}
.also-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.6vw;max-width:84vw}
.also-row div{padding-top:1.2vh;border-top:.35vh solid var(--scene,var(--accent))}
.also-row b{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(14px,2.4vh,32px);line-height:1.25}
.also-row span{display:block;margin-top:.6vh;color:var(--muted);font-size:clamp(11px,1.7vh,22px)}

/* Rising this hour: who picked it up, and the newest take when there are few */
.listscene .who{margin-top:.8vh;color:var(--text-2,#bcd);font-size:clamp(12px,1.9vh,25px)}
.listscene .take{margin-top:.6vh;color:var(--muted);font-size:clamp(12px,1.9vh,25px);font-style:italic}
.listscene .take span{font-style:normal;margin-left:.4em}

/* Threat level: the first recorded hour, when the chart covers less than a week */
.lv-days .lv-start{transform:none}
/* Header: every label stays on one line. When space runs short "up next" gives way first, and on a portrait screen
   the clock group moves under the brand instead of squeezing the pills. */
header{flex-wrap:wrap;gap:1vh 1.5vw}
.brand,.brand span,.brand em,#remote-state,#clock{white-space:nowrap}
.brand{flex-wrap:wrap;row-gap:1vh;min-width:0}
.brand em,#remote-state,#ring,#clock{flex:none}
.hud{min-width:0;flex:0 1 auto}
#upnext{min-width:0;flex:0 1 auto}
@media (max-aspect-ratio:1/1){#upnext{display:none !important}}

/* Research desk: who's on each story */
.rwho{display:flex;flex-wrap:wrap;align-items:center;gap:.4em 1.1em;margin-top:.7vh;font-size:clamp(12px,2vh,26px);color:var(--muted)}
.rwho span{color:var(--text)}
.rwho span::before{content:"";display:inline-block;width:.6em;height:.6em;border-radius:2px;margin-right:.45em;background:var(--c)}
.rwho .research{--c:var(--research)}.rwho .cert{--c:var(--cert)}
.rwho em{font-style:normal}

/* --- Look: themes, an accent colour and moods (applyLook in tv.js). Themes set the page's few colours; panels use
   --panel. A picked accent colour re-tints the accent things and every scene's glow, never the alert colours. --- */
#clock small{font-size:.6em;color:var(--muted);margin-left:.7em;font-weight:500}
#rain{position:fixed;inset:0;width:100%;height:100%;opacity:.13;pointer-events:none}
:root[data-theme=newsroom]{--bg:#060a14;--text:#eef2f8;--muted:#8892a8;--accent:#4f8dff;--accent-ink:#04122e;--line:#1f2940;--panel:#0c1222;--haze:transparent}
:root[data-theme=terminal]{--bg:#020603;--text:#dcf7e2;--muted:#7a9a82;--accent:#00ff41;--accent-ink:#001a08;--line:#142619;--panel:#0b160d;--haze:#062a10}
[data-theme=terminal] body{font-family:ui-monospace,"Cascadia Code",Consolas,monospace}
[data-theme=terminal] h1{letter-spacing:-.03em}
[data-theme=terminal] body,[data-theme=terminal] body[data-scene]{--scene:var(--accent);--glow:rgba(0,255,65,.07)}
:root[data-theme=midnight]{--bg:#000;--text:#a7aebb;--muted:#5d6473;--accent:#5b72a6;--accent-ink:#e6ebf5;--line:#141821;--panel:#05070b;--haze:transparent}
[data-theme=midnight] body,[data-theme=midnight] body[data-scene]{--glow:rgba(91,114,166,.05)}
[data-theme=midnight] h1{font-weight:700}
[data-theme=midnight] .badge,[data-theme=midnight] .qr{opacity:.8}
:root[data-theme=synthwave]{--bg:#10041f;--text:#fdeeff;--muted:#b896d6;--accent:#ff3fd2;--accent-ink:#1a0322;--line:#3d1b60;--panel:#1b0a34;--haze:#3a0a5a}
[data-theme=synthwave] body{background:linear-gradient(to top,rgba(255,63,210,.18),transparent 38%),radial-gradient(ellipse at 100% 100%,var(--glow) 0,transparent 55%),radial-gradient(ellipse at 50% 0%,rgba(63,243,255,.12),transparent 55%),var(--bg)}
[data-theme=synthwave] body,[data-theme=synthwave] body[data-scene]{--glow:rgba(255,63,210,.14)}
[data-theme=synthwave] h1{text-shadow:0 0 .45em rgba(255,63,210,.5)}
[data-theme=synthwave] .brand b,[data-theme=synthwave] #clock{color:#3ff3ff;text-shadow:0 0 .6em rgba(63,243,255,.6)}
:root[data-theme=contrast]{--bg:#000;--text:#fff;--muted:#e8e8e8;--accent:#fff;--accent-ink:#000;--line:#8c8c8c;--panel:#000;--haze:transparent}
[data-theme=contrast] body,[data-theme=contrast] body[data-scene]{--scene:#fff;--glow:transparent}
[data-theme=contrast] body{background:#000}
[data-theme=contrast] h1{font-weight:900}
[data-theme=contrast] .meta,[data-theme=contrast] .outlets,[data-theme=contrast] .change{font-size:clamp(17px,3.1vh,42px);color:#fff}
[data-theme=contrast] .rank{color:#fff;font-size:clamp(18px,3vh,40px)}
[data-theme=contrast] #crawl{background:#000;border-top:2px solid #fff;font-size:clamp(16px,2.8vh,36px)}
:root[data-theme=paper]{--bg:#f2ecdf;--text:#1d1913;--muted:#6a6052;--accent:#1f4f8f;--accent-ink:#fff;--line:#d6cab3;--panel:#fbf7ee;--haze:transparent;
  --red:#c8102e;--amber:#99580a;--blue:#1f5fa8;--green:#1c7a43}
[data-theme=paper] body,[data-theme=paper] body[data-scene]{--scene:var(--accent);--glow:rgba(140,100,40,.08)}
[data-theme=paper] h1,[data-theme=paper] .listscene .title{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-weight:700;letter-spacing:0}
[data-theme=paper] .mtile,[data-theme=paper] .game,[data-theme=paper] .wx{box-shadow:0 .3vh 1vh rgba(60,40,10,.08)}
[data-theme=paper] #crawl{background:#e8dfcd}
[data-theme=paper] #crawl b#crawl-label{background:var(--accent);color:#fff}
[data-theme=paper] #crawl.alert{background:#1e0407}[data-theme=paper] #crawl.alert b#crawl-label{background:#c8101c}
[data-theme=paper] .badge.developing{background:#f1ddb5}
[data-theme=paper] .qr img{background:#fff}
[data-theme=paper] .brand em{color:#fff}
/* moods */
[data-mood=calm] .fade{animation-duration:1.4s}
[data-mood=ambient] #crawl,[data-mood=ambient] .outlets{display:none!important}
[data-mood=ambient] h1{font-size:clamp(34px,8.6vh,124px)}
/* a picked accent colour, last so it wins over the theme's */
.accented body,.accented body[data-scene]{--scene:var(--accent);--glow:var(--accent-glow)}
[data-theme=paper] .badge.sec{background:#dce6f4}
[data-theme=paper] .badge.kev{background:#f6d9da;color:#8f1016}
[data-theme=paper] .badge.mine{background:#f1ddb5;border-color:#d1a55a}
:root:not([data-theme=terminal]) .brand b{text-shadow:none}
[data-theme=paper] #tl-why{color:var(--text)}[data-theme=paper] .tc.on b{text-shadow:none}
/* --- The war room (incident() in tv.js). A security-operations look over whatever theme is picked: red alert
   palette, monospace type, a tactical grid, targeting brackets round the stage, a breathing red frame, faint
   scanlines, the WAR ROOM banner with its T+ clock and a red SITREP crawl. --- */
:root[data-incident][data-theme]{--bg:#070102;--text:#ffe9e9;--muted:#c48a8a;--accent:#ff3b3b;--accent-ink:#fff;--line:#3a1116;--panel:#14060a;--haze:#3a0508;
  --red:#ff3b3b;--amber:#ffb547;--blue:#6fb7ff;--green:#2fbf71}
:root[data-incident] body,:root[data-incident] body[data-scene]{--scene:#ff3b3b;--glow:rgba(255,40,40,.16)}
:root[data-incident] body[data-scene]:not([data-scene=threat]):not([data-scene=level]){--scene:#ff6a5c}
:root[data-incident] .brand b{color:#ff3b3b;text-shadow:0 0 1.2vh rgba(255,59,59,.6)}
:root[data-incident] h1,:root[data-incident] .listscene .title{font-family:inherit;text-shadow:0 0 .5em rgba(255,40,40,.25)}
:root[data-incident]::before{content:"";position:fixed;inset:0;z-index:40;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.025) 0 1px,transparent 1px 3px)}
:root[data-incident]::after{content:"";position:fixed;inset:0;z-index:41;pointer-events:none;
  box-shadow:inset 0 0 0 .45vh #ff2a2a,inset 0 0 14vh rgba(255,0,0,.32);animation:redalert 2.6s ease-in-out infinite;will-change:opacity}
@keyframes redalert{50%{opacity:.4}}
:root[data-incident] #remote-state{color:#fff;font-size:clamp(12px,1.9vh,24px);text-shadow:0 1px 0 #000;
  background:repeating-linear-gradient(-45deg,#d40000 0 .9em,#7a0000 .9em 1.8em);box-shadow:0 0 2vh rgba(255,0,0,.55);animation:redbadge 1s steps(2) infinite}
@keyframes redbadge{50%{box-shadow:0 0 .4vh rgba(255,0,0,.3)}}
:root[data-incident] #clock{color:#ffd0d0}
:root[data-incident] #crawl{background:#2a0306;border-top:2px solid #ff2a2a}
:root[data-incident][data-mood=ambient] #crawl:not([hidden]){display:flex!important}
:root[data-incident] #crawl b#crawl-label{background:#ff2a2a;color:#fff;letter-spacing:.18em}
:root[data-incident] #crawl .ci b{color:#ffb3b3}
:root[data-incident] #threatbar{border-color:#ff3b3b88}
:root[data-incident] #rain{opacity:.1}
@media (prefers-reduced-motion:reduce){:root[data-incident]::after,:root[data-incident] #remote-state{animation:none}}
/* Storm Center: the Infocon level, the most probed ports, the handlers' diaries */
body[data-scene=isc]{--scene:#4dd0e1;--glow:rgba(77,208,225,.13)}
.isc .pk>div:not(.rdays){border-top-color:#4dd0e1}
.isc .pk .infocon{min-width:16vw}
.isc .pk .ic-green{border-top-color:#2fbf71!important}.isc .ic-green b{color:#2fbf71}
.isc .pk .ic-yellow{border-top-color:#ffc53d!important}.isc .ic-yellow b{color:#ffc53d}
.isc .pk .ic-orange{border-top-color:#ff8a3d!important}.isc .ic-orange b{color:#ff8a3d}
.isc .pk .ic-red{border-top-color:#ff3b3b!important}.isc .ic-red b{color:#ff3b3b}
.isc .pk .kev{border-top-color:#ffb547!important}
.isc .gline{grid-template-columns:minmax(9em,max-content) 1fr 3.2em}
.isc .gline small{color:var(--muted);font-size:.8em;margin-left:.3em}
.isc .gline small.pnew{color:#1b1203;background:#ffb547;font:800 .7em ui-monospace,Consolas,monospace;padding:.15em .4em;border-radius:.3em;letter-spacing:.08em}
.isc .gline i{background:#4dd0e1}.isc .gline.new i{background:#ffb547}
.ci i.ev-poc{background:#ff7a5c;border-radius:.1em}.ci:has(i.ev-poc) b{color:#ff9a80}.ci i.ev-infocon{background:#ffc53d}
.ev.k-poc em{background:#ff7a5c;color:#1e0600}.ev.k-infocon em{background:#ffc53d;color:#1b1203}
#threatbar[data-toast=poc]{--tk:#ff7a5c}#threatbar[data-toast=infocon]{--tk:#ffc53d}
/* World Cyber: five lanes of the bigger picture */
body[data-scene=world]{--scene:#ff8a5c;--glow:rgba(255,138,92,.13)}
.wgrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1.2vw;margin-top:2vh;align-items:stretch}
.wlane{display:flex;flex-direction:column;gap:1.3vh;padding:1.8vh 1vw;border-radius:1vh;background:var(--panel);border-top:.45vh solid var(--lc);opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms);min-width:0}
.wlane.quiet{opacity:.55;animation:none}
.w-espionage{--lc:#c792ff}.w-infrastructure{--lc:#ffc53d}.w-government{--lc:#4da3ff}.w-takedowns{--lc:#2fbf71}.w-telecom{--lc:#4dd0e1}
.whead{display:flex;align-items:center;gap:.5vw}
.whead i{font-style:normal;color:var(--lc);font-size:clamp(14px,2.6vh,34px)}
.whead b{flex:1;font:800 clamp(11px,1.8vh,24px) ui-monospace,Consolas,monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--lc)}
.whead em{font:800 clamp(18px,3.6vh,48px)/1 ui-monospace,Consolas,monospace;font-style:normal;color:var(--text)}
.wtags{display:flex;flex-wrap:wrap;gap:.5vh .4vw}
.wtags span{font-size:clamp(10px,1.5vh,20px);padding:.2em .6em;border-radius:99px;border:1px solid color-mix(in srgb,var(--lc) 50%,transparent);color:var(--text)}
.wnote{font-size:clamp(10px,1.55vh,21px);color:var(--muted)}.wnote b{color:var(--red)}
.witem{display:flex;flex-direction:column;gap:.4vh;padding-top:1vh;border-top:1px solid var(--line)}
.witem b{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;font-size:clamp(12px,2vh,27px);line-height:1.25;font-weight:650}
.witem b .badge{font-size:.6em;vertical-align:.15em;margin-right:.4em}
.witem span{color:var(--muted);font-size:clamp(10px,1.45vh,19px)}
.witem.press span{color:var(--lc)}
.wquiet{color:var(--muted);font-size:clamp(11px,1.7vh,22px)}

/* Internet health: four tiles, then the day's provider incidents and the public DNS resolvers. Sized to read on a
   small screen: few things, large type. */
body[data-scene=nethealth]{--scene:#4da3ff;--glow:rgba(77,163,255,.13)}
.nethealth{--lbl:13vw}
.ntiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:1.4vw}
.ntile{display:flex;flex-direction:column;gap:.5vh;padding:1.8vh 1.3vw;border-radius:1vh;background:var(--panel);border-top:.5vh solid #2fbf71;min-width:0;
  opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms)}
.ntile.on{border-top-color:var(--amber);background:color-mix(in srgb,var(--amber) 9%,var(--panel))}
.ntile.n-dns.on,.ntile.n-bgp.on{border-top-color:var(--red);background:color-mix(in srgb,var(--red) 9%,var(--panel))}
.ntile b{font:800 clamp(28px,7.5vh,96px)/1 ui-monospace,Consolas,monospace;color:#2fbf71}
.ntile.on b{color:var(--amber)}.ntile.n-dns.on b,.ntile.n-bgp.on b{color:#ff7a7a}
.ntile b small{font-size:.45em;margin-left:.15em;color:var(--muted)}
.ntile span{font-size:clamp(15px,2.5vh,32px);font-weight:650;color:var(--text)}
.ntile em{font-style:normal;color:var(--muted);font-size:clamp(13px,2.1vh,27px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ncols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:3vw;margin-top:3.5vh}
.nethealth h3{margin:0 0 1.2vh;color:var(--muted);font:700 clamp(12px,1.9vh,24px) ui-monospace,Consolas,monospace;letter-spacing:.1em;text-transform:uppercase}
.nrow{display:grid;grid-template-columns:var(--lbl) minmax(0,1fr);column-gap:1vw;align-items:center;padding:1.1vh 0;border-top:1px solid var(--line);opacity:0;animation:pop .5s ease forwards;animation-delay:var(--d,0ms)}
.nrow b{font-size:clamp(15px,2.6vh,34px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nrow span{grid-column:2;color:var(--muted);font-size:clamp(13px,2vh,26px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-top:.5vh}
.ntrack{position:relative;height:2.8vh;border-radius:.5vh;background:#ffffff10}
.nb{position:absolute;top:0;bottom:0;border-radius:.5vh;background:var(--amber)}
.nb.l-major,.nb.l-critical{background:var(--red)}
.nb.open{background-image:repeating-linear-gradient(-45deg,transparent 0 .6vh,rgba(0,0,0,.28) .6vh 1.2vh)}
.naxis{position:relative;height:3.2vh;margin-left:calc(var(--lbl) + 1vw);border-top:1px solid var(--line);font:600 clamp(12px,1.8vh,23px) ui-monospace,Consolas,monospace;color:var(--muted)}
.naxis span{position:absolute;top:.7vh;transform:translateX(-50%);white-space:nowrap}
.naxis span:first-child{transform:none}.naxis span:last-child{transform:translateX(-100%)}
.nquiet,.nnote{color:var(--muted);font-size:clamp(13px,2vh,26px);margin:1.2vh 0 0}
.ndns{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:1vw;row-gap:.8vh;padding:1.2vh 0;border-top:1px solid var(--line)}
.ndns b{font-size:clamp(15px,2.5vh,32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ndns em{font:800 clamp(16px,2.8vh,36px) ui-monospace,Consolas,monospace;font-style:normal;color:#2fbf71}
.ndns.down em{color:#ff7a7a}
.nspark{grid-column:1/-1;display:flex;align-items:flex-end;gap:2px;height:4.6vh}
.nspark i{flex:1;background:#4da3ffb0;border-radius:2px 2px 0 0;min-height:2px}
.nspark i.e{background:#ffffff10;height:100%!important}
.nspark i.f{background:var(--red)}
@media (prefers-reduced-motion:reduce){.wlane,.nrow{opacity:1;animation:none}}

/* war room, security-operations look */
#warbar{display:flex;align-items:center;justify-content:space-between;gap:2vw;flex:none;height:2.8vh;min-height:18px;padding:0 3vw;
  background:linear-gradient(90deg,#7a0000,#1a0204 18%,#1a0204 82%,#7a0000);border-bottom:1px solid #ff2a2a88;
  font:700 clamp(9px,1.35vh,17px) ui-monospace,Consolas,monospace;letter-spacing:.16em;color:#ffd6d6;white-space:nowrap;overflow:hidden}
#warbar[hidden]{display:none}
#warbar .wb-l{display:flex;align-items:center;gap:.7em;color:#fff;min-width:0;overflow:hidden;text-overflow:ellipsis}
#warbar .wb-c,#warbar .wb-r{flex:none}
#warbar .wb-l i{width:.7em;height:.7em;border-radius:50%;background:#ff2a2a;box-shadow:0 0 .8em #ff2a2a;animation:wrlive 1.2s steps(2) infinite}
@keyframes wrlive{50%{opacity:.2}}
#warbar .wb-c{color:#ff9a9a;overflow:hidden;text-overflow:ellipsis}
#warbar .wb-r{color:#fff;letter-spacing:.12em}
:root[data-incident] body{font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  background:linear-gradient(rgba(255,60,60,.045) 1px,transparent 1px) 0 0/4.5vh 4.5vh,linear-gradient(90deg,rgba(255,60,60,.045) 1px,transparent 1px) 0 0/4.5vh 4.5vh,
    radial-gradient(ellipse at 50% 40%,rgba(120,0,0,.25),transparent 70%),var(--bg)}
:root[data-incident] main{--br:#ff3b3bcc;
  background:linear-gradient(var(--br) 0 0) left top/2.4vw 2px,linear-gradient(var(--br) 0 0) left top/2px 2.4vw,
    linear-gradient(var(--br) 0 0) right top/2.4vw 2px,linear-gradient(var(--br) 0 0) right top/2px 2.4vw,
    linear-gradient(var(--br) 0 0) left bottom/2.4vw 2px,linear-gradient(var(--br) 0 0) left bottom/2px 2.4vw,
    linear-gradient(var(--br) 0 0) right bottom/2.4vw 2px,linear-gradient(var(--br) 0 0) right bottom/2px 2.4vw;
  background-repeat:no-repeat;margin:1.2vh 1.4vw;padding:0 1.6vw}
:root[data-incident] .brand em::before{content:"WR // ";opacity:.75}
:root[data-incident] .brand em{border-radius:.25em;letter-spacing:.08em}
:root[data-incident] .listscene h2::before,:root[data-incident] .nethealth h3::before{content:"// ";color:#ff3b3b}
:root[data-incident] .listscene h2{text-transform:uppercase;letter-spacing:.06em}
:root[data-incident] .badge{border-radius:.2em}
@media (prefers-reduced-motion:reduce){#warbar .wb-l i{animation:none}}

/* the station bug, as on the other desks: lined up with the clock's right edge, centred on the scene dots above the crawl */
body .lab-mark.lab-tv{right:3vw;bottom:5.9vh}
body .lab-mark.lab-tv img{opacity:.75}

/* the wordmark, as on Electiondesk and Civicdesk TV: icon, NEWS/TECH + DESK, a live status badge */
@font-face{font-family:"Barlow Condensed";src:url("/fonts/display.ttf") format("truetype");font-weight:700 900;font-display:swap}
.brand .logo{display:flex;align-items:center;gap:.08em;font:800 clamp(18px,3.5vh,47px)/1 "Barlow Condensed","Arial Narrow",system-ui,sans-serif;letter-spacing:.05em}
.brand .logo svg{width:1em;height:1em;margin-right:.3em;color:var(--accent);filter:drop-shadow(0 0 .25em color-mix(in srgb,var(--accent) 55%,transparent))}
.brand .logo svg .f{fill:currentColor}.brand .logo svg .s{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* the name as on statesig.tv: the first word white, DESK in the desk's own colour */
.brand .logo b{color:var(--text);font-weight:800;text-shadow:none}.brand .logo>span{color:#2f9e44;filter:brightness(1.3) saturate(1.1)}
.brand .logo i{display:flex;align-items:center;gap:.45em;font-style:normal;font-size:.5em;letter-spacing:.12em;margin-left:.7em;padding:.3em .55em;border-radius:.25em;
  background:var(--badge,var(--accent));color:var(--badge-ink,var(--accent-ink))}
.brand .logo i[hidden]{display:none}
.brand .logo i.live{--badge:color-mix(in srgb,var(--text) 14%,transparent);--badge-ink:var(--text)}
.brand .logo i.live::before,.brand .logo i.breaking::before{content:"";width:.6em;height:.6em;border-radius:50%;background:#ff3b3b;animation:badge-pulse 1.6s ease-in-out infinite}
.brand .logo i.breaking{--badge:#e63946;--badge-ink:#fff}.brand .logo i.breaking::before{background:#fff}
.brand .logo i.level{--badge-ink:#06110a}
@keyframes badge-pulse{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.brand .logo i::before{animation:none}}