/* Cyber Month 2026 brief series: shared styles */
:root{
  --bg:#04080a; --panel:#08120f; --line:#1b4734; --green:#2bff88; --green-dim:#1c6b47; --red:#ff2e3d; --red-dim:#5a1a20;
  --text:#e6f2ec; --muted:#8fa89c; --faint:#5e7a6e;
  --display:'Barlow Condensed','Arial Narrow','Helvetica Neue',Arial,sans-serif;
  --body:'Barlow','Helvetica Neue',Arial,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
/* Dark by design: the HUD palette holds in every viewer theme */
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --bg:#04080a; --panel:#08120f; --text:#e6f2ec; } }
:root[data-theme="dark"]{ --bg:#04080a; --panel:#08120f; --text:#e6f2ec; }
:root[data-theme="light"]{ --bg:#04080a; --panel:#08120f; --text:#e6f2ec; }
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 64px); background:var(--bg)}
body{margin:0; background:var(--bg); color:var(--text); font-family:var(--body); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:hidden;
  background-image:
    linear-gradient(rgba(43,255,136,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(43,255,136,.045) 1px,transparent 1px);
  background-size:36px 36px;}
body::after{content:""; position:fixed; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); z-index:50}
a{color:var(--green)}
:focus-visible{outline:2px solid var(--green); outline-offset:3px}
button{font:inherit; color:inherit; cursor:pointer}

/* HUD bar */
.hud{position:sticky; top:env(safe-area-inset-top,0px); z-index:40; display:flex; align-items:center; gap:12px; padding:10px 16px; background:rgba(4,8,10,.88); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.hud .dot{width:9px;height:9px;border-radius:50%;background:var(--red);box-shadow:0 0 10px var(--red);animation:blink 1.2s steps(2) infinite;flex:none}
.hud .lbl{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.06em}
.hud .amt{font-family:var(--display); font-weight:700; font-size:22px; color:var(--text); text-shadow:0 0 10px rgba(255,46,61,.6); margin-left:auto; font-variant-numeric:tabular-nums}
.progress{position:absolute; left:0; bottom:-1px; height:2px; width:0; background:var(--green); box-shadow:0 0 8px var(--green)}
@keyframes blink{50%{opacity:.25}}

main{max-width:980px; margin:0 auto; padding:0 18px}
section{padding:64px 0; border-bottom:1px dashed rgba(43,255,136,.12); position:relative}
.kicker{font-family:var(--mono); font-size:13px; color:var(--green); letter-spacing:.12em; margin:0 0 10px}
.kicker.red{color:var(--red)}
h1,h2,h3{font-family:var(--display); text-transform:uppercase; margin:0; line-height:.95; letter-spacing:.01em}
h2{font-size:clamp(38px,9vw,64px); text-shadow:0 0 18px rgba(43,255,136,.35); margin-bottom:16px}
h3{font-size:24px}
.lede{font-size:18px; max-width:60ch; color:var(--text); margin:0 0 22px}
.muted{color:var(--muted)}
.src{font-family:var(--mono); font-size:11.5px; color:var(--faint); margin-top:18px}
.src a{color:var(--faint)}

/* Bracketed panel */
.panel{position:relative; background:rgba(8,18,15,.92); border:1px solid var(--line); padding:18px}
.panel::before,.panel::after{content:""; position:absolute; width:16px; height:16px; border-color:var(--accent,var(--green)); border-style:solid; pointer-events:none}
.panel::before{top:-1px; left:-1px; border-width:2px 0 0 2px}
.panel::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0}
.panel.red{--accent:var(--red); border-color:var(--red-dim)}
.grid{display:grid; gap:14px}
@media(min-width:720px){ .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} }

/* Hero */
.hero{min-height:calc(100svh - 52px); display:grid; align-content:center; gap:24px; padding-top:32px}
@media(min-width:820px){ .hero{grid-template-columns:1.1fr .9fr; align-items:center} }
.hero h1{font-size:clamp(64px,17vw,124px); text-shadow:0 0 24px rgba(43,255,136,.35)}
.hero .tag{font-size:19px; color:var(--muted); margin:16px 0 22px}
.topo{width:min(86vw,400px); display:block; margin:0 auto}
.topo .g{stroke:#2bff88; stroke-opacity:.06}
.topo .cmin{fill:none; stroke:#2bff88; stroke-opacity:.2; stroke-width:.8}
.topo .cmaj{fill:none; stroke:#2bff88; stroke-opacity:.5; stroke-width:1.3}
.topo .river{fill:none; stroke:#4fc3ff; stroke-opacity:.35; stroke-width:3}
.topo .tk{font-family:var(--mono); font-size:9px; fill:#5e7a6e}
.topo .track{fill:none; stroke:#ff2e3d; stroke-width:3; stroke-linecap:round; stroke-dasharray:1000; stroke-dashoffset:1000}
.topo.run .track{transition:stroke-dashoffset 4.6s linear; stroke-dashoffset:0}
.topo .house{fill:#e6f2ec; transition:fill .4s}
.topo .ping{fill:none; stroke:#ff2e3d; stroke-width:2; opacity:0; transform-box:fill-box; transform-origin:center}
.topo.found .house{fill:#ff2e3d}
.topo.found .ping{animation:pinpulse 1.4s ease-out infinite}
@keyframes pinpulse{0%{opacity:1; transform:scale(.6)}100%{opacity:0; transform:scale(2.4)}}
.topo .scanbar{transform:translateY(-10px)}
.topo.scan .scanbar{animation:scan 2.6s linear forwards}
@keyframes scan{from{transform:translateY(0)}to{transform:translateY(490px)}}
.readout{display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap; width:min(86vw,400px); margin:8px auto 0; font-family:var(--mono); font-size:12px; color:var(--green)}
.readout #ro2{color:var(--muted)}
.readout .hit{color:var(--red); text-shadow:0 0 8px rgba(255,46,61,.6)}
.topo-cap{width:min(86vw,400px); margin:6px auto 0; font-size:13px; color:var(--faint)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ping{0%,100%{opacity:.35}10%{opacity:1}}
.byline{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.2em; text-align:center; margin-top:8px}
.btn{display:inline-flex; align-items:center; gap:10px; padding:14px 20px; border:1px solid var(--green); background:rgba(43,255,136,.08); color:var(--green); font-family:var(--display); font-weight:700; font-size:20px; text-transform:uppercase; letter-spacing:.04em; box-shadow:0 0 14px rgba(43,255,136,.25), inset 0 0 14px rgba(43,255,136,.08); text-decoration:none}
.btn:hover{background:rgba(43,255,136,.16)}
.btn.red{border-color:var(--red); color:var(--red); background:rgba(255,46,61,.08); box-shadow:0 0 14px rgba(255,46,61,.25)}

/* Gauges */
.gauge svg{width:100%; max-width:220px; display:block; margin:0 auto 8px}
.needle{transform-origin:110px 112px; transform:rotate(-90deg); transition:transform 1.6s cubic-bezier(.3,1.6,.5,1)}
.armed .needle{transform:rotate(68deg)}
.gauge h3{color:var(--red); text-shadow:0 0 10px rgba(255,46,61,.5)}
.gauge p{margin:6px 0 0; font-size:16px}
.punch{font-family:var(--display); font-size:24px; text-transform:uppercase; margin:20px 0 0}
.punch b{color:var(--red)}

/* BLUF */
.bluf .n{font-family:var(--display); font-weight:800; font-size:54px; color:var(--green-dim); line-height:1; float:right}
.bluf h3{color:var(--green); text-shadow:0 0 10px rgba(43,255,136,.45); margin:6px 0 10px; font-size:28px}
.bluf p{margin:0}

/* Guess */
.opts{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
@media(min-width:720px){ .opts{grid-template-columns:repeat(4,1fr)} }
.opt{padding:16px 10px; background:var(--panel); border:1px solid var(--line); font-family:var(--display); font-weight:700; font-size:24px}
.opt[aria-pressed="true"].right{border-color:var(--green); color:var(--green); box-shadow:0 0 14px rgba(43,255,136,.35)}
.opt[aria-pressed="true"].wrong{border-color:var(--red); color:var(--red)}
.opt.answer{border-color:var(--green); color:var(--green)}
.reveal{display:none}
.reveal.show{display:block; animation:fadein .5s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.bars{display:flex; align-items:flex-end; gap:10px; height:200px; padding-top:28px}
.bar{flex:1; position:relative; background:var(--green-dim); height:0; transition:height 1.2s ease}
.bar.now{background:var(--red); box-shadow:0 0 16px rgba(255,46,61,.6)}
.bar span{position:absolute; top:-24px; left:50%; transform:translateX(-50%); font-family:var(--display); font-weight:700; font-size:16px; white-space:nowrap}
.years{display:flex; gap:10px; font-family:var(--mono); font-size:12px; color:var(--muted); margin-top:6px}
.years div{flex:1; text-align:center}
.big{font-family:var(--display); font-weight:800; font-size:48px; line-height:1; text-shadow:0 0 14px rgba(255,46,61,.55)}
.ppl{display:grid; grid-template-columns:repeat(10,1fr); gap:6px; margin:12px 0}
.ppl svg{width:100%; height:auto}

/* Timeline */
.tl{display:flex; gap:12px; overflow-x:auto; padding:30px 2px 10px; scroll-snap-type:x mandatory; position:relative}
.tl::before{content:""; position:absolute; top:12px; left:0; right:0; height:2px; background:var(--green); box-shadow:0 0 10px var(--green)}
.ev{flex:0 0 170px; scroll-snap-align:start; position:relative}
.ev::before{content:""; position:absolute; top:-24px; left:14px; width:14px; height:14px; border-radius:50%; background:var(--accent,var(--green)); box-shadow:0 0 12px var(--accent,var(--green))}
.ev .yr{font-family:var(--display); font-weight:800; font-size:38px; color:var(--accent,var(--green)); line-height:1}
.ev .nm{font-family:var(--mono); font-size:12px; margin:6px 0}
.ev p{margin:0; font-size:15px; color:var(--muted)}
.ev.red{--accent:var(--red)}
.hint{font-family:var(--mono); font-size:12px; color:var(--faint)}

/* Threat */
.threat h3{color:var(--red); text-shadow:0 0 10px rgba(255,46,61,.45)}
.threat p{margin:6px 0 0}

/* Target package */
.tp{display:grid; gap:14px}
@media(min-width:820px){ .tp{grid-template-columns:1fr 280px 1fr; align-items:center} }
.posts{display:grid; gap:10px}
.post{text-align:left; background:var(--panel); border:1px solid var(--line); padding:12px 14px; display:block; width:100%}
.post q{font-style:italic; color:var(--muted); font-size:15px}
.post .leak{display:block; font-family:var(--display); font-weight:700; font-size:20px; text-transform:uppercase; color:var(--faint); margin-top:4px}
.post .leak::before{content:"Tap to see what it gives away"; font-family:var(--mono); font-size:12px; text-transform:none; font-weight:400}
.post.hit{border-color:var(--red-dim)}
.post.hit .leak{color:var(--red); text-shadow:0 0 8px rgba(255,46,61,.5)}
.post.hit .leak::before{content:none}
.reticle{text-align:center}
.reticle svg{width:min(70vw,260px)}
.reticle .ring{stroke:var(--red); opacity:.25; transition:opacity .4s}
.reticle .person{fill:var(--green); filter:drop-shadow(0 0 8px rgba(43,255,136,.6))}
.reticle.locked .ring{opacity:1}
.reticle.locked svg{animation:lock 1.4s ease-in-out infinite}
.reticle.locked .person{fill:var(--red); filter:drop-shadow(0 0 12px rgba(255,46,61,.8))}
@keyframes lock{50%{filter:drop-shadow(0 0 16px rgba(255,46,61,.8))}}
.meter{font-family:var(--mono); font-size:13px; color:var(--muted); margin-top:8px}
.meter b{color:var(--red)}
.alias{font-family:var(--mono); font-size:12px; color:var(--red); letter-spacing:.1em}
.verdict{font-family:var(--display); font-weight:700; text-transform:uppercase; font-size:22px; min-height:1.2em; margin-top:6px}

/* Trades */
.chips{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.chip{padding:10px 14px; border:1px solid var(--line); background:var(--panel); font-family:var(--display); font-weight:700; font-size:18px; text-transform:uppercase}
.chip[aria-selected="true"]{border-color:var(--green); color:var(--green); box-shadow:0 0 12px rgba(43,255,136,.3)}
.trade h3{color:var(--green); text-shadow:0 0 10px rgba(43,255,136,.4)}

/* Spot the fake */
.fake{text-align:left; width:100%; background:var(--panel); border:1px solid var(--line); padding:16px; position:relative}
.fake .who{display:flex; align-items:center; gap:10px; margin-bottom:10px}
.fake .av{width:36px; height:36px; border-radius:50%; background:#1b2b25; flex:none}
.fake .nm{font-weight:700} .fake .meta{font-size:13px; color:var(--muted)}
.fake .hl{font-weight:700; font-size:17px}
.fake .letter{position:absolute; top:12px; right:16px; font-family:var(--display); font-weight:800; font-size:36px; color:var(--green); text-shadow:0 0 10px rgba(43,255,136,.5)}
.fake .stamp{display:none; margin-top:10px; font-family:var(--display); font-weight:800; font-size:24px; text-transform:uppercase}
.answered .fake .stamp{display:block}
.fake.real .stamp{color:var(--green)} .fake.false .stamp{color:var(--red)}
.answered .fake.false{border-color:var(--red)}

/* Roles */
.role h3{font-size:30px; color:var(--green); text-shadow:0 0 10px rgba(43,255,136,.4); margin-bottom:8px}
.role.red h3{color:var(--red); text-shadow:0 0 10px rgba(255,46,61,.45)}
.role p{margin:0}

/* Action */
.check{display:flex; gap:14px; align-items:flex-start; padding:16px; border:1px solid var(--green); background:rgba(43,255,136,.06); cursor:pointer}
.check input{width:28px; height:28px; accent-color:var(--green); flex:none; margin:2px 0 0}
.check span{font-family:var(--display); font-weight:700; font-size:24px; text-transform:uppercase; line-height:1.1}
.done-msg{color:var(--green); margin:10px 0 0}
.stopped{margin-top:18px}
.stopped .big{color:var(--text)}
ul.home{margin:0; padding-left:18px} ul.home li{margin:6px 0}

/* Sources */
details summary{cursor:pointer; font-family:var(--display); font-weight:700; font-size:22px; text-transform:uppercase; color:var(--green)}
details ol{font-size:14px; padding-left:20px; overflow-wrap:anywhere}
details li{margin:6px 0}
footer{padding:28px 18px 40px; text-align:center; font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.15em}
footer i{display:inline-block; width:8px; height:8px; background:var(--green); box-shadow:0 0 8px var(--green); margin-right:8px}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
  .armed .needle{transform:rotate(68deg)}
}
/* Work / home tip pair */
.tips{display:grid; gap:12px; margin-top:18px}
@media(min-width:720px){ .tips{grid-template-columns:1fr 1fr} }
.tip{border-left:3px solid var(--green); padding:12px 14px; background:rgba(43,255,136,.05)}
.tip.home{border-left-color:#7fd1ff; background:rgba(127,209,255,.05)}
.tip .who{font-family:var(--display); font-weight:700; font-size:18px; text-transform:uppercase; color:var(--green); margin-bottom:4px}
.tip.home .who{color:#7fd1ff}
.tip p{margin:0; font-size:16px}

/* Explainer block */
.explain{margin-top:18px}
.explain h3{color:var(--green); font-size:26px; margin-bottom:8px; text-shadow:0 0 10px rgba(43,255,136,.35)}
.explain p{margin:0 0 10px; max-width:68ch}
.term{font-family:var(--mono); color:var(--green); font-size:15px}
.fixlist{margin:6px 0 0; padding-left:20px} .fixlist li{margin:6px 0}

/* Anatomy tiles */
.anat{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px 0}
@media(min-width:720px){ .anat{grid-template-columns:repeat(4,1fr)} }
.anat .panel h3{font-size:22px; color:var(--green)}
.anat .panel p{margin:4px 0 0; font-size:15px}
.anat-sum{font-family:var(--display); font-size:22px; text-transform:uppercase; margin:6px 0 0}
.anat-sum b{color:var(--red)}

/* Case files */
.cases{display:grid; gap:10px; margin-top:16px}
.case{border:1px solid var(--line); background:var(--panel)}
.case summary{list-style:none; display:flex; align-items:baseline; gap:14px; padding:14px 16px; cursor:pointer}
.case summary::-webkit-details-marker{display:none}
.case .yr{font-family:var(--display); font-weight:800; font-size:30px; color:var(--red); text-shadow:0 0 10px rgba(255,46,61,.45); flex:none; width:78px}
.case .ttl{font-family:var(--display); font-weight:700; font-size:21px; text-transform:uppercase; line-height:1.1}
.case .ttl small{display:block; font-family:var(--body); font-weight:400; text-transform:none; font-size:14px; color:var(--muted); margin-top:2px}
.case summary::after{content:"+"; margin-left:auto; font-family:var(--mono); font-size:22px; color:var(--green)}
.case[open] summary::after{content:"\2013"}
.case[open]{border-color:var(--red-dim)}
.case .body{padding:0 16px 16px 108px}
@media(max-width:560px){ .case .body{padding:0 16px 16px} }
.case .body p{margin:0 0 8px}
.case .lesson{font-family:var(--display); font-weight:700; text-transform:uppercase; color:var(--green); font-size:18px}

/* Checklist */
.checklist{display:grid; gap:8px; margin-top:12px}
.ck{display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); background:var(--panel); cursor:pointer}
.ck input{width:24px; height:24px; accent-color:var(--green); flex:none; margin:2px 0 0}
.ck b{display:block}
.ck span{font-size:15px; color:var(--muted)}
.ck:has(input:checked){border-color:var(--green)}
.score{font-family:var(--mono); color:var(--muted); margin-top:10px}
.score b{color:var(--green); font-size:18px}

/* AitM flow */
.flow{display:grid; gap:10px; margin-top:14px; counter-reset:step}
@media(min-width:820px){ .flow{grid-template-columns:repeat(4,1fr)} }
.flow .panel{counter-increment:step}
.flow .panel::marker{content:none}
.flow h3{font-size:20px; color:var(--red)}
.flow h3::before{content:"Step " counter(step) ". "; color:var(--muted); font-size:15px; display:block; font-family:var(--mono); text-transform:none}
.flow p{margin:6px 0 0; font-size:15px}

/* MFA ladder */
.ladder{display:grid; gap:8px; margin-top:14px}
.rung{display:grid; grid-template-columns:110px 1fr; align-items:center; gap:12px; text-align:left; width:100%; padding:12px 14px; background:var(--panel); border:1px solid var(--line)}
.rung .lvl{height:10px; background:var(--c); box-shadow:0 0 10px var(--c)}
.rung .nm{font-family:var(--display); font-weight:700; font-size:20px; text-transform:uppercase}
.rung .note{grid-column:1/-1; display:none; font-size:15px; color:var(--muted)}
.rung[aria-expanded="true"]{border-color:var(--c)}
.rung[aria-expanded="true"] .note{display:block}
.rung.top .nm{color:var(--green)}

/* Trade card extras */
.trade .tips{margin-top:12px}

.author-mini{margin:18px 0 0; font-size:15px; color:var(--muted)}
.author-mini b{color:var(--text)}
.author{display:grid; gap:4px; justify-items:start}
.author-name{font-size:clamp(40px,9vw,60px); text-shadow:0 0 18px rgba(43,255,136,.35)}
.author-role{font-family:var(--display); font-weight:700; font-size:22px; text-transform:uppercase; color:var(--green); margin:0 0 14px}
/* ===== Series navigation ===== */
.hub-link{display:inline-block; font-family:var(--mono); font-size:12px; color:var(--muted); text-decoration:none; letter-spacing:.08em; margin-bottom:14px}
.hub-link:hover{color:var(--green)}
.series-nav{max-width:980px; margin:0 auto; padding:28px 18px 0; display:grid; gap:10px}
@media(min-width:720px){ .series-nav{grid-template-columns:1fr 1fr 1fr} }
.series-nav a,.series-nav span{display:block; padding:14px 16px; border:1px solid var(--line); background:var(--panel); text-decoration:none; color:var(--text)}
.series-nav a:hover{border-color:var(--green)}
.series-nav small{display:block; font-family:var(--mono); font-size:11px; color:var(--muted); letter-spacing:.1em; text-transform:uppercase}
.series-nav b{font-family:var(--display); font-size:20px; text-transform:uppercase}
.series-nav .off{opacity:.45}
.series-nav .next{text-align:right}
.series-nav .hub{text-align:center}
.series-nav .hub b{color:var(--green)}

/* ===== Hub ===== */
.hub-hero{padding:56px 0 24px; border-bottom:0}
.hub-hero h1{font-size:clamp(56px,14vw,110px); text-shadow:0 0 24px rgba(43,255,136,.35)}
.hub-hero .tag{font-size:19px; color:var(--muted); margin:16px 0 0; max-width:60ch}
.series-grid{display:grid; gap:14px; padding-bottom:48px}
@media(min-width:720px){ .series-grid{grid-template-columns:1fr 1fr} }
.bcard{display:block; text-decoration:none; color:var(--text); min-height:190px}
a.bcard:hover{border-color:var(--green); box-shadow:0 0 18px rgba(43,255,136,.15)}
.bcard .num{font-family:var(--display); font-weight:800; font-size:64px; line-height:1; color:var(--green); text-shadow:0 0 14px rgba(43,255,136,.45)}
.bcard h3{font-size:28px; margin:8px 0 6px}
.bcard p{margin:0; color:var(--muted); font-size:16px}
.bcard .meta{display:flex; gap:10px; align-items:center; margin-top:14px; font-family:var(--mono); font-size:12px; color:var(--muted)}
.status{padding:3px 8px; border:1px solid currentColor; letter-spacing:.1em}
.status.live{color:var(--green)} .status.done{color:#7fd1ff} .status.soon{color:var(--faint)}
.bcard.planned{opacity:.5}
.bcard.planned .num{color:var(--faint); text-shadow:none}

/* ===== Brief 02 components ===== */
.metaline{font-family:var(--mono); font-size:12px; color:var(--green); letter-spacing:.14em; margin:0 0 22px}
/* Incoming-call hero */
.callcard{width:min(86vw,380px); margin:0 auto; background:#050b09; border:1px solid var(--line); padding:18px; position:relative}
.callcard::before,.callcard::after{content:""; position:absolute; width:18px; height:18px; border-color:var(--green); border-style:solid}
.callcard::before{top:-1px; left:-1px; border-width:2px 0 0 2px}
.callcard::after{bottom:-1px; right:-1px; border-width:0 2px 2px 0}
.callcard .who{font-family:var(--mono); font-size:12px; color:var(--muted); letter-spacing:.12em}
.callcard .name{font-family:var(--display); font-weight:800; font-size:44px; line-height:1; margin:4px 0 2px}
.callcard .num{font-family:var(--mono); font-size:13px; color:var(--muted)}
.wave{display:flex; align-items:center; gap:3px; height:110px; margin:18px 0 10px}
.wave i{flex:1; background:var(--green); border-radius:2px; box-shadow:0 0 8px rgba(43,255,136,.5); transform-origin:center; height:var(--h); transition:background .3s, box-shadow .3s}
.callcard.live .wave i{animation:talk .9s ease-in-out infinite alternate; animation-delay:var(--d)}
@keyframes talk{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.callcard.glitch .wave i.g{background:var(--red); box-shadow:0 0 10px rgba(255,46,61,.7)}
.callcard .status{font-family:var(--mono); font-size:13px; color:var(--green); min-height:1.4em}
.callcard .status.hit{color:var(--red); text-shadow:0 0 8px rgba(255,46,61,.6)}
.callcard .stamp{margin-top:12px; padding:10px; text-align:center; border:2px solid var(--red); color:var(--red); font-family:var(--display); font-weight:800; font-size:22px; text-transform:uppercase; opacity:0; transform:scale(.9); transition:all .35s}
.callcard.done .stamp{opacity:1; transform:scale(1); box-shadow:0 0 16px rgba(255,46,61,.35)}
.callcap{width:min(86vw,380px); margin:8px auto 0; font-size:13px; color:var(--faint)}
/* Stat tiles */
.stats4{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0}
@media(min-width:720px){ .stats4{grid-template-columns:repeat(4,1fr)} }
.stats4 .panel .big2{font-family:var(--display); font-weight:800; font-size:40px; line-height:1; color:var(--red); text-shadow:0 0 12px rgba(255,46,61,.5)}
.stats4 .panel p{margin:6px 0 0; font-size:15px}
/* Confidence gap bars */
.gap{display:grid; gap:12px; margin-top:8px}
.gap .row{display:grid; grid-template-columns:1fr; gap:4px}
.gap .lbl{font-size:15px}
.gap .track{height:16px; background:#0d1a15; border:1px solid var(--line)}
.gap .fill{height:100%; width:0; transition:width 1.4s ease}
.gap .fill.r{background:var(--red); box-shadow:0 0 10px rgba(255,46,61,.5)}
.gap .fill.g{background:var(--green); box-shadow:0 0 10px rgba(43,255,136,.5)}
.gap .pct{font-family:var(--display); font-weight:800; font-size:26px}
/* Red-flag tagger */
.sms{max-width:520px; background:#0b1512; border:1px solid var(--line); padding:16px; border-radius:4px}
.sms .from{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:8px}
.sms .bubble{background:#16251f; padding:14px 16px; border-radius:14px 14px 14px 4px; font-size:17px; line-height:1.7}
.flag{background:none; border:0; padding:0 2px; color:inherit; font:inherit; border-bottom:2px dashed var(--faint); cursor:pointer}
.flag.on{color:var(--red); border-bottom-color:var(--red); text-shadow:0 0 8px rgba(255,46,61,.5)}
.flag .tagname{display:none; font-family:var(--mono); font-size:11px; background:var(--red); color:#000; padding:1px 5px; margin-left:4px; vertical-align:middle; letter-spacing:.06em}
.flag.on .tagname{display:inline}
.moves{display:grid; gap:8px; margin-top:16px}
@media(min-width:720px){ .moves{grid-template-columns:repeat(5,1fr)} }
.move{border:1px solid var(--line); padding:10px; text-align:center; font-family:var(--display); font-weight:700; text-transform:uppercase; color:var(--faint)}
.move.on{border-color:var(--red); color:var(--red); box-shadow:0 0 10px rgba(255,46,61,.25)}
.move small{display:block; font-family:var(--body); font-weight:400; text-transform:none; font-size:13px; color:var(--muted); margin-top:4px}
/* Rounds */
.round{margin-top:16px}
.round .artifact{background:#0b1512; border:1px solid var(--line); padding:16px; font-size:16px}
.round .artifact .hdr{font-family:var(--mono); font-size:12px; color:var(--muted); margin-bottom:8px; letter-spacing:.06em}
.round .choices{display:flex; gap:10px; flex-wrap:wrap; margin-top:10px}
.round .choices button{padding:12px 16px; border:1px solid var(--line); background:var(--panel); font-family:var(--display); font-weight:700; font-size:18px; text-transform:uppercase}
.round .choices button.right{border-color:var(--green); color:var(--green)}
.round .choices button.wrong{border-color:var(--red); color:var(--red)}
.round .why{display:none; margin-top:10px}
.round.answered .why{display:block}
.qr{display:grid; grid-template-columns:96px 1fr; gap:14px; align-items:center}
.qr svg{width:96px; height:96px}
/* Code word generator */
.codeword{font-family:var(--display); font-weight:800; font-size:clamp(30px,7vw,46px); color:var(--green); text-shadow:0 0 14px rgba(43,255,136,.45); letter-spacing:.02em; margin:8px 0}