/* Layout: one 3D brick wall pinned behind the page. Each screen says one thing, in one sentence and at most one number,
   and the wall rebuilds itself to show it. After the story, three calm sections hold the detail. Deliberately dark-only. */
:root{
  --bg:#080c12; --panel:#0e141c; --line:#1c2632; --fg:#e8edf3; --mute:#8d9aaa;
  --accent:#4589ff; --accent-2:#a6c8ff; --caught:#42be65; --miss:#ff7b6b;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-io:cubic-bezier(.77,0,.175,1);
  --display:"Mona Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font-family:var(--display);margin:0;font-size:17px;line-height:1.55;hyphens:none;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
h1,h2,h3{font-weight:500;margin:0;text-wrap:balance}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.gut{padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}

.top{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:6;display:flex;align-items:center;gap:20px;height:60px;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.route-picks .top{background:var(--bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:9px;font-weight:500;font-size:19px;letter-spacing:-.01em;color:var(--fg);text-decoration:none}
.tabs{margin-left:auto;display:flex;gap:4px}
.tabs a{font:400 14px var(--mono);color:var(--mute);text-decoration:none;padding:7px 12px;border-radius:999px;transition:color .15s cubic-bezier(.2,0,.38,.9),background .15s cubic-bezier(.2,0,.38,.9)}
.tabs a{white-space:nowrap}
@media (max-width:480px){.tabs{gap:0}.tabs a{padding:7px 8px;font-size:12.5px}}
.tabs a:hover{color:var(--fg)}
.tabs a[aria-current="page"]{color:var(--bg);background:var(--fg)}
.prog{position:fixed;right:max(20px,env(safe-area-inset-right,0px));top:50%;transform:translateY(-50%);z-index:5;display:flex;flex-direction:column;gap:6px}
.prog i{width:3px;height:16px;background:var(--line);border-radius:2px;transition:background .3s cubic-bezier(.2,0,.38,.9)}
@media (max-width:760px){.prog{display:none}}
.route-picks #stage,.route-picks .scrim,.route-picks .story,.route-picks .prog{display:none}
#data{display:none}
.route-picks #data{display:block}
.route-lookup #data{display:none}
.route-found #data{display:none}
#found{display:none;padding-top:calc(env(safe-area-inset-top,0px) + 60px);min-height:100vh}
.route-found #found{display:block}
/* Findings page (#found): one finding per band. Text on the left, a chart on the right drawn from site/data/findings.json.
   Every chart is made of bricks, the same unit as the wall: one brick = one hole, reason or link. Colours are the page tokens. */
.fwrap{max-width:1180px;margin:0 auto;padding-block:64px 120px}
.fhero{max-width:860px}
.fq{font-size:clamp(17px,1.4vw,19px);font-weight:500;color:var(--accent-2);letter-spacing:0}
.fwrap .def{font-size:clamp(22px,2.3vw,32px);line-height:1.3;letter-spacing:-.01em;margin-top:14px;max-width:34ch;color:var(--fg)}
.flow{list-style:none;padding:0;margin:44px 0 0;display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}
.flow li{padding:22px 24px 0 0;display:flex;flex-direction:column;gap:6px;position:relative}
.flow li+li{padding-left:24px;border-left:1px solid var(--line)}
.flow .fstep{font:400 12px/1 var(--mono);color:var(--accent);letter-spacing:.06em}
.flow b{font-weight:500;font-size:17px;line-height:1.4}
.flow span:last-child{color:var(--mute);font-size:15px;line-height:1.5}
.isnot{margin-top:28px;color:var(--mute);font-size:15px;max-width:70ch}
.fhead{margin-top:140px}
.fhead h1{font-size:clamp(44px,7vw,104px);line-height:.95;letter-spacing:-.03em}
.fwrap .sub{color:var(--mute);margin-top:18px;max-width:58ch;font-size:clamp(16px,1.3vw,18px)}
.fidx{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:32px}
.fidx button{font:400 13px/1 var(--mono);color:var(--mute);background:none;border:1px solid var(--line);border-radius:999px;padding:8px 12px;cursor:pointer;
  transition:color .15s var(--ease-out),border-color .15s var(--ease-out),transform .12s var(--ease-out)}
.fidx button b{font-weight:400;color:var(--accent);margin-right:6px}
.fidx button:hover{color:var(--fg);border-color:var(--mute)}
.fidx button:active{transform:scale(.97)}
.fd{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:center;padding:120px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.fd:first-of-type{margin-top:64px}
.ft .fk{font:400 12px/1 var(--mono);color:var(--mute);letter-spacing:.06em}
.fbig{display:block;margin-top:18px;font:500 clamp(56px,7.4vw,112px)/.9 var(--display);letter-spacing:-.035em;font-variant-numeric:tabular-nums;color:var(--fg)}
.fbig b{font-weight:500;color:var(--tone,var(--fg))}
.tone-coral{--tone:var(--miss)}.tone-mint{--tone:var(--caught)}.tone-amber{--tone:#f1c21b}.tone-blue{--tone:var(--accent)}
.fd .fk{color:var(--tone,var(--mute))}
.fbig small{display:block;margin-top:12px;font:400 13px/1.4 var(--mono);letter-spacing:0;color:var(--mute)}
.ft h3{margin-top:26px;font-size:clamp(21px,1.9vw,26px);line-height:1.2;letter-spacing:-.01em;max-width:24ch}
.ft p{color:var(--mute);margin-top:12px;max-width:52ch;line-height:1.6}
.ft code{display:block;margin-top:16px;font:400 12px/1.6 var(--mono);color:var(--mute);opacity:.75}
.fv{margin:0}
.key{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:16px;font:400 12px/1.4 var(--mono);color:var(--mute)}
.k::before{content:"";display:inline-block;width:14px;height:7px;border-radius:1px;margin-right:7px;vertical-align:1px;background:var(--c)}
.k.blue{--c:var(--accent)}.k.coral{--c:var(--miss)}.k.mint{--c:var(--caught)}.k.amber{--c:#f1c21b}
.k.dim{--c:#2a3646}.k.dim2{--c:#3a4757}.k.dim3{--c:#56616f}.k.ghost::before{background:none;border:1px dashed var(--miss);height:5px}
/* brick grids */
.bg{display:grid;gap:var(--g,3px)}
.bg i{display:block;aspect-ratio:2/1;border-radius:1px;background:var(--c,#3a4757);opacity:0;transform:translateY(8px);
  transition:opacity .45s var(--ease-out),transform .55s var(--ease-out),background-color .5s var(--ease-io);transition-delay:calc(var(--d,0)*1ms)}
.on .bg i{opacity:1;transform:none}
.bg i.ghost{background:none;box-shadow:inset 0 0 0 1px var(--miss);opacity:0}
.on .bg i.ghost{opacity:.85}
.bg i.out{background:none;box-shadow:inset 0 0 0 1px #3a4757}
.bg i.kept{box-shadow:none}
.lbl{font:400 12px/1.4 var(--mono);color:var(--mute);margin:0 0 10px}
.lbl b{font-weight:500;color:var(--fg);font-size:15px;margin-right:6px}
.rows .row+.row{margin-top:26px}
/* workload bars */
.bars{display:grid;gap:22px}
.bar .lbl{display:flex;justify-content:space-between;gap:12px}
.bar .tr{height:22px;background:#111923;border-radius:2px;overflow:hidden}
.bar .fl{height:100%;background:var(--c);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease-io);transition-delay:calc(var(--d,0)*1ms)}
.on .bar .fl{transform:scaleX(var(--w))}
.bar.me .lbl b{color:var(--caught)}
/* timeline */
.tl .tlg{position:relative;height:150px;border-bottom:1px solid var(--line)}
.tl .ev{position:absolute;bottom:0;width:7px;display:flex;flex-direction:column-reverse;gap:2px;transform:translateX(-50%)}
.tl .ev i{height:9px;width:7px;aspect-ratio:auto}
@media (max-width:700px){.tl .ev,.tl .ev i{width:5px}.tl .ev i{height:7px}}
.tl .ax{display:flex;justify-content:space-between;margin-top:8px;font:400 11px/1 var(--mono);color:var(--mute)}
.tl .ev:hover i{background:var(--fg)}
/* EPSS months */
.ep .eg{display:flex;align-items:flex-end;gap:4px;height:200px;border-bottom:1px solid var(--line)}
.ep .m{flex:1;background:var(--c,#3a4757);border-radius:1px 1px 0 0;height:var(--h);transform-origin:bottom;transform:scaleY(0);
  transition:transform .8s var(--ease-io);transition-delay:calc(var(--d,0)*1ms)}
.on .ep .m{transform:scaleY(1)}
.ep .gap{flex:.6}
.ep .ax{display:flex;justify-content:space-between;margin-top:8px;font:400 11px/1 var(--mono);color:var(--mute)}
.ep .jump{font:500 15px/1 var(--mono);color:var(--accent);text-align:right;margin-bottom:10px}
/* tiles */
.tiles .tg{display:grid;grid-template-columns:repeat(11,1fr);gap:7px;max-width:560px}
.tiles .tg i{aspect-ratio:1;border-radius:3px;box-shadow:inset 0 0 0 1px #3a4757;opacity:0;transform:scale(.9);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out),background-color .5s var(--ease-io);transition-delay:calc(var(--d,0)*1ms)}
.on .tiles .tg i{opacity:1;transform:none}
.tiles .tg i.kept{background:var(--caught);box-shadow:none}
.tiles .lbl{margin-top:18px}
.qah{font-size:clamp(26px,2.6vw,34px);line-height:1.1;margin-top:40px;padding-top:88px;border-top:1px solid var(--line);letter-spacing:-.01em}
.qa{margin-top:32px;display:grid;grid-template-columns:1fr 1fr;gap:28px 48px}
.qa dt{font-weight:500;font-size:19px}
.qa dd{color:var(--mute);margin:8px 0 0;line-height:1.6}
@media (max-width:860px){.fd{grid-template-columns:1fr;gap:36px;padding:64px 0}.flow{grid-template-columns:1fr}.flow li+li{padding-left:0;border-left:0;border-top:1px solid var(--line);margin-top:20px}.qa{grid-template-columns:1fr}.fhead{margin-top:88px}}
@media (prefers-reduced-motion:reduce){.bg i,.bar .fl,.ep .m,.tiles .tg i{transition:none!important}}
#look{display:none;padding-top:calc(env(safe-area-inset-top,0px) + 60px);min-height:100vh}
.route-lookup #look{display:block}
.lwrap{max-width:980px;margin:0 auto;padding-block:56px 96px}
.lsearch{display:flex;align-items:center;gap:14px;margin-top:40px;background:var(--panel);border:1px solid var(--line);border-bottom:2px solid var(--accent);padding:0 18px;height:68px}
.lsearch:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.lsearch input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font:500 clamp(18px,2.4vw,26px) var(--mono);outline:none;letter-spacing:-.01em}
.lsearch input::placeholder{color:var(--line);color:#3a4656}
.lsearch button{font:500 14px var(--display);background:var(--fg);color:var(--bg);border:0;border-radius:999px;padding:10px 18px;cursor:pointer;transition:transform .16s var(--ease-out)}
.lsearch button:active{transform:scale(.97)}
.tries{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;font-size:14px;color:var(--mute)}
.tries button{font:400 13px var(--mono);color:var(--fg);background:transparent;border:1px solid var(--line);border-radius:999px;padding:5px 11px;cursor:pointer}
.tries button:hover{border-color:var(--accent)}
.lres{margin-top:40px}
.lres .rk{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap}
.lres .rk b{font:500 clamp(56px,8vw,104px)/.9 var(--mono);letter-spacing:-.04em;color:var(--accent)}
.lres .rk span{font:400 16px var(--mono);color:var(--mute)}
.lres .cv{font:500 18px var(--mono);margin-bottom:10px;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.lane{position:relative;height:46px;margin-top:30px}
.lane .tr{position:absolute;left:0;right:0;top:18px;height:10px;background:var(--panel);border:1px solid var(--line);border-radius:2px}
.lane .top{position:absolute;left:0;top:18px;height:10px;background:var(--caught);border-radius:2px 0 0 2px}
.lane .mk{position:absolute;top:8px;width:3px;height:30px;background:var(--fg);transform:translateX(-1px);transition:left .5s var(--ease-io)}
.lane .lb{position:absolute;top:34px;font:12px var(--mono);color:var(--mute);white-space:nowrap}
.lane .lb.r{right:0}
.facts2{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:40px;border-top:1px solid var(--line);padding-top:26px}
.facts2 h3{font:500 12.5px var(--mono);color:var(--mute);margin-bottom:8px}
.facts2 p{font-size:16px}
@media (max-width:760px){.facts2{grid-template-columns:1fr;gap:20px}}
.why{margin-top:34px;background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--caught);border-radius:4px;padding:20px 22px;font-size:16px;line-height:1.6}
.why .src{display:block;margin-top:10px;font:12px var(--mono);color:var(--mute)}
.note2{margin-top:34px;color:var(--mute);max-width:62ch}
.miss{margin-top:40px;font-size:18px;color:var(--mute);max-width:56ch}
.prog i.on{background:var(--fg)}
.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.btn{display:inline-flex;align-items:center;gap:10px;font:500 15px var(--display);text-decoration:none;padding:13px 20px;border-radius:999px;background:var(--fg);color:var(--bg);transition:transform .2s cubic-bezier(.2,.8,.2,1)}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--fg);border:1px solid var(--line)}
.step p.eg{margin-top:18px;padding-left:14px;border-left:2px solid var(--caught);font:400 13.5px/1.7 var(--mono);color:var(--fg);max-width:46ch}
.step p.tool{margin-top:14px;font:400 12.5px/1.6 var(--mono);color:var(--mute);max-width:52ch}
.step p.tool b{display:block;font-weight:500;color:var(--accent-2);letter-spacing:.02em}
.step p.tool+p.tool{margin-top:10px}
.step p.credits{margin-top:40px;font:400 12.5px/1.8 var(--mono);color:var(--mute);max-width:56ch}
/* data page */
#data{padding-top:calc(env(safe-area-inset-top,0px) + 60px);min-height:100vh}
.dwrap{max-width:1240px;margin:0 auto;padding-block:56px 80px}
.dwrap h1{font-size:clamp(34px,4.4vw,56px);line-height:1.05;letter-spacing:-.015em}
.dwrap .lead{color:var(--mute);margin-top:14px;max-width:60ch}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
.stat{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:18px 20px}
.stat b{display:block;font:500 34px/1 var(--mono);letter-spacing:-.02em}
.stat span{display:block;margin-top:8px;font-size:14px;color:var(--mute)}
@media (max-width:820px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:40px}
.search{flex:1 1 260px;min-width:0;display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-bottom-color:var(--mute);padding:0 14px;height:44px;color:var(--mute)}
.search:focus-within{outline:2px solid var(--accent);outline-offset:-2px}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--fg);font:15px var(--display);outline:none}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);cursor:pointer}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
.chip{font:400 12.5px var(--mono);border:1px solid var(--line);background:transparent;color:var(--mute);padding:6px 11px;border-radius:999px;cursor:pointer}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--fg);background:rgba(69,137,255,.16)}
.tablebox{overflow-x:auto;border:1px solid var(--line);border-radius:6px;margin-top:18px}
table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:780px}
th{text-align:left;font:500 12px var(--mono);color:var(--mute);padding:12px 14px;background:var(--panel);border-bottom:1px solid var(--line)}
td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top}
tr.r{cursor:pointer}
tr.r:hover td{background:var(--panel)}
tr.r td:first-child{font-family:var(--mono);color:var(--mute);width:60px}
td.cve{font-family:var(--mono);white-space:nowrap}
td.pct{font-family:var(--mono);text-align:right;white-space:nowrap}
tr.detail td{background:var(--panel);font-size:15px;line-height:1.6;padding:16px 18px 18px 74px}
tr.detail .src{display:block;margin-top:8px;font:12px var(--mono);color:var(--mute)}
.meter{display:inline-block;width:46px;height:6px;background:var(--line);border-radius:3px;vertical-align:middle;margin-left:8px;position:relative;overflow:hidden}
.meter i{position:absolute;inset:0 auto 0 0;background:var(--accent)}
.cds-tag.coral{background:rgba(255,123,107,.16);color:var(--fg)}
.more{margin-top:18px;font:500 13.5px var(--mono);color:var(--fg);background:transparent;border:1px solid var(--line);padding:10px 16px;border-radius:999px;cursor:pointer}
.count{font:12.5px var(--mono);color:var(--mute)}
.facts{display:flex;flex-wrap:wrap;gap:10px 28px;margin-top:22px;color:var(--mute);font-size:15px}
.facts b{font:500 15px var(--mono);color:var(--fg);margin-right:6px}
.dhead{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap}
.dnum{font:500 clamp(84px,12vw,168px)/.82 var(--mono);letter-spacing:-.05em;color:var(--accent)}
.dhead h1{font-size:clamp(28px,3.4vw,44px);max-width:16ch}
.dhead .lead{margin-top:10px;max-width:52ch}
.code{display:flex;align-items:flex-end;gap:1px;height:132px;margin-top:44px;padding-bottom:1px;border-bottom:1px solid var(--line);cursor:crosshair}
@media (max-width:900px){.code{gap:0}}
.code i{flex:1;min-width:0;background:#3a4656;border-radius:1px 1px 0 0;transform-origin:bottom;transition:background .15s var(--ease-out)}
.code i.g{background:#2f8f4b}
.code i:hover,.code i.hot{background:var(--accent)!important}
.route-picks .code.go i{animation:grow .5s var(--ease-out) both}
@keyframes grow{from{transform:scaleY(.15);opacity:.3}to{transform:none;opacity:1}}
.codeinfo{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px;font:12.5px var(--mono);color:var(--mute)}
.codeinfo #codeinfo{color:var(--fg)}
.lg{display:inline-block;width:9px;height:9px;background:#3a4656;margin:0 6px 0 10px;vertical-align:-1px}
.lg.g{background:#2f8f4b;margin-left:0}
tr.r td{transition:background .15s var(--ease-out),box-shadow .15s var(--ease-out)}
tr.r:hover td:first-child,tr.r[aria-expanded="true"] td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tr.r td:first-child{font:500 15px var(--mono)}
tr.detail td>div{animation:dIn .22s var(--ease-out) both}
@keyframes dIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.plain{margin:12px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mute)}
.plain b{color:var(--accent-2);font-weight:500}
.ktag{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:999px;font:400 12.5px var(--display);white-space:nowrap}

#stage{position:fixed;inset:0;z-index:0;display:block;width:100%;height:100%}
.scrim{position:fixed;inset:0;z-index:0;pointer-events:none;background:linear-gradient(90deg,rgba(8,12,18,.92) 0%,rgba(8,12,18,.78) 30%,rgba(8,12,18,0) 52%)}
@media (max-width:760px){.scrim{background:linear-gradient(0deg,rgba(8,12,18,.9) 0%,rgba(8,12,18,0) 50%)}}
.story{position:relative;z-index:1}
.step{min-height:150vh;display:flex;align-items:center}
.step:first-child{min-height:110vh}
.step:last-child{min-height:100vh}
.card{max-width:520px;padding:28px 0}
.step h2{font-size:clamp(32px,4.4vw,58px);line-height:1.05;font-stretch:106%;letter-spacing:-.015em}
.step p{color:var(--mute);font-size:clamp(17px,1.5vw,20px);margin-top:18px;max-width:40ch}
.num{display:block;font:500 clamp(64px,10vw,140px)/.9 var(--mono);letter-spacing:-.04em;margin-bottom:16px;font-variant-numeric:tabular-nums}
.num small{font-size:.32em;letter-spacing:0;color:var(--mute);margin-left:.2em}
.step h2{position:relative}
.step mark{background:none;color:inherit;background-image:linear-gradient(var(--accent),var(--accent));background-repeat:no-repeat;background-position:0 94%;background-size:100% .09em;transition:background-size .9s var(--ease-io),color .4s var(--ease-out)}
.step:not(.active) mark{background-size:0% .09em}
.step.active mark{color:var(--accent-2)}
.step.active h2::after{content:"";position:absolute;top:-4%;bottom:-4%;left:0;width:2px;background:var(--accent);opacity:0;animation:hscan 1.1s var(--ease-io) .05s}
@keyframes hscan{0%{left:-2%;opacity:1}88%{opacity:1}100%{left:100%;opacity:0}}
.biglogo{display:block;width:84px;height:auto;margin-bottom:26px;color:var(--fg)}
.coral{color:var(--miss)} .amber{color:#f1c21b} .mint{color:var(--caught)} .blue{color:var(--accent)}
.vs{display:flex;gap:40px;align-items:flex-end;margin-bottom:16px;flex-wrap:wrap}
.vs div{display:flex;flex-direction:column}
.vs .num{margin:0}
.vs.sm{margin:26px 0 0;gap:28px}
.vs.sm .num{font-size:clamp(34px,3.6vw,52px)}
.vs span.l{font:400 14px var(--mono);color:var(--mute);margin-top:8px}
.note{display:inline-block;margin-top:20px;font:400 13px var(--mono);color:var(--mute);border-left:2px solid var(--line);padding-left:10px}
@media (max-width:760px){
  .step{align-items:flex-end;padding-bottom:6vh}
  .card{background:var(--bg);border:1px solid var(--line);border-radius:6px;padding:22px;max-width:none;width:100%}
  .vs{gap:28px}
}

/* calm detail after the story */
.after{position:relative;z-index:2;background:var(--bg);border-top:1px solid var(--line)}
.sec{max-width:1180px;margin:0 auto;padding-block:96px}
.sec+.sec{border-top:1px solid var(--line)}
.sec>h2{font-size:clamp(28px,3.2vw,40px);line-height:1.1;font-stretch:106%;max-width:22ch}
.sec>p.lead{color:var(--mute);margin-top:14px;max-width:58ch}
.three{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}
.three h3{font-size:22px;margin-top:10px}
.three p{color:var(--mute);margin-top:8px;font-size:16px}
.three .k{font:500 13px var(--mono);color:var(--accent)}
.three .m{display:block;margin-top:12px;font:400 12.5px var(--mono);color:var(--mute)}
@media (max-width:820px){.three{grid-template-columns:1fr;gap:32px}}

.picks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:40px}
.pick{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:20px 22px;display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px 14px}
.pick .r{font:500 22px var(--mono);color:var(--mute);grid-row:span 3}
.pick .c{font:500 15px var(--mono)}
.pick .w{font-size:15px;color:var(--mute)}
.pick p{font-size:15px;line-height:1.5;margin-top:6px}
.pick .t{margin-top:10px;display:flex;gap:6px;flex-wrap:wrap}
.cds-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font:400 11.5px var(--mono);white-space:nowrap;background:#16202c;color:var(--mute)}
.cds-tag.mint{background:rgba(66,190,101,.2);color:var(--fg)}
@media (max-width:820px){.picks{grid-template-columns:1fr}}

.honest{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px;margin-top:48px}
.honest .big{font:500 44px/1 var(--mono);letter-spacing:-.02em}
.honest p{color:var(--mute);margin-top:12px;font-size:15.5px}
@media (max-width:820px){.honest{grid-template-columns:1fr;gap:32px}}

footer{border-top:1px solid var(--line);padding-block:32px 48px;color:var(--mute);font-size:14px}
footer .in{max-width:1180px;margin:0 auto;display:flex;gap:28px;flex-wrap:wrap;justify-content:space-between}
footer b{color:var(--fg);font-weight:500}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* wall upgrade: poster fallback, vignette, grain, the 500 strip */
#stage{opacity:0;transition:opacity .7s cubic-bezier(.2,0,.38,.9)}
#stage.on{opacity:1}
.poster{display:none;position:fixed;inset:0;z-index:0;background:var(--bg) url(wall-poster.webp) 62% 40%/cover no-repeat}
.no-gl .poster{display:block}
.no-gl #stage{display:none}
.vig{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(120% 90% at 60% 42%,rgba(8,12,18,0) 52%,rgba(8,12,18,.62) 100%)}
.vig::after{content:"";position:absolute;inset:0;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (max-width:760px){.vig::after{display:none}}
.route-picks .vig,.route-picks .poster{display:none}
.dnum,.lres .rk b,.stat b,.vs .num,.fn{font-variant-numeric:tabular-nums}
.code{contain:layout paint}
.code i{transition:background .18s cubic-bezier(.2,0,.38,.9)}
.route-picks .code.go i{animation:rise .62s cubic-bezier(.77,0,.175,1) both}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.codeinfo #codeinfo{min-height:1.5em;font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){#stage{opacity:1;transition:none}.route-picks .code.go i{animation:none}}
.num{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.14em}
.num small{line-height:1.1;margin-left:0}
.vs.sm .num{font-size:clamp(30px,2.7vw,38px)}
.vs.sm{gap:22px}
@media (max-width:480px){.brand{font-size:0;gap:0}.tabs{gap:0}.tabs a{padding:6px 8px;font-size:12.5px}}