:root{
  --serif:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --thai:'Noto Sans Thai','Sukhumvit Set','Thonburi',system-ui,sans-serif;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.45,0,.2,1);
  --gut:32px;
  --m:20px;
  --lx:max(var(--m),calc((100% - 1440px) / 2 + var(--m)));
  --amber:#EAB64D;--water:#2F7189;--mist:#D8E3E5;--storm:#102832;
}
@media(min-width:900px){:root{--m:clamp(24px,3.2vw,48px)}}

[data-mode=everyday]{
  --bg:#F2EFE8;--fg:#171B1D;--accent:#E45B2B;--accent-text:#B63F16;--route:#167C78;--route-text:#0F6A66;
  --muted:#565B5E;--rule:#C8C5BC;--field:#E7E3D9;
  --scrim:rgba(23,27,29,.82);--sc-fg:#F2EFE8;--sc-muted:#C8C5BC;--sc-acc:#EAB64D;
}
[data-mode=flood]{
  --bg:#102832;--fg:#F4F1E9;--accent:#EAB64D;--accent-text:#EAB64D;--route:#EAB64D;--route-text:#EAB64D;
  --muted:#B9C6C9;--rule:#35505B;--field:#17323E;
  --scrim:rgba(16,40,50,.82);--sc-fg:#F4F1E9;--sc-muted:#B9C6C9;--sc-acc:#EAB64D;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:auto}
body{margin:0;position:relative;background:var(--bg);color:var(--fg);font:400 clamp(1.1875rem,1.1rem + .25vw,1.3125rem)/1.55 var(--serif);
  font-kerning:normal;text-rendering:optimizeLegibility;
  transition:background-color 900ms var(--ease-io),color 900ms var(--ease-io)}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em;transition:text-decoration-color 120ms}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
b{font-weight:600}
h1,h2,h3,p,figure,blockquote{margin:0}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;z-index:50;background:var(--fg);color:var(--bg);padding:12px 16px;font:400 14px var(--sans)}
.skip:focus{left:0}

.wrap{max-width:1440px;margin:0 auto;padding:0 var(--m)}
.grid{display:flex;flex-direction:column;gap:2.5rem}
@media(min-width:900px){.grid{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);row-gap:0}}

/* ---------------- sticky map machinery ---------------- */
.stagewrap{position:relative}
.stage{position:sticky;top:0;height:100vh;height:100svh;z-index:1;overflow:hidden;background:var(--bg)}
.steps{position:relative;z-index:2;margin-top:-100vh;margin-top:-100svh;pointer-events:none}
.step{min-height:100vh;pointer-events:none;padding:0 0 0 var(--lx)}
.step .copy,.step .turn-copy,.step h1,.step .hero-body{pointer-events:auto}
.attrib{position:absolute;right:var(--m);bottom:12px;z-index:3;font:400 12px/1.2 var(--sans);color:var(--muted);background:var(--bg);padding:3px 6px}
.attrib a{display:inline-block;padding:3px 0}
.figcap{position:absolute;right:var(--m);bottom:44px;z-index:3;max-width:min(23rem,34vw);font:400 13px/1.35 var(--sans);color:var(--sc-fg);background:var(--scrim);padding:7px 10px;opacity:0;transition:opacity 300ms var(--ease)}
.stage[data-state=routes] .figcap{opacity:1}
.figcap-inline{font:400 14px/1.35 var(--sans);color:var(--muted);margin-top:6px}

/* satellite figure: photo + drawn overlays */
.sat{position:relative;overflow:hidden;background:var(--bg)}
.sat svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.mapfig{position:absolute;inset:0}
.sat .ph{transition:filter 700ms var(--ease-io)}
.sat .navy{fill:#102832;opacity:0;mix-blend-mode:multiply;transition:opacity 700ms var(--ease-io)}
.sat.is-dark .ph{filter:brightness(.45) saturate(.5)}
.sat.is-dark .navy{opacity:.3}
.sat{--k:1}
.sat .zones,.sat .roads,.sat .rail,.sat .roadlabels,.sat .zonelabels{opacity:0;transition:opacity 400ms var(--ease)}
.sat.s-zones .zones,.sat.s-zones .roads,.sat.s-zones .rail,.sat.s-zones .roadlabels,.sat.s-zones .zonelabels{opacity:1}
.sat .zones polygon{fill:none;stroke:#fff;stroke-width:calc(var(--k) * 1.5px);stroke-linejoin:round}
.sat .roads path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.sat .roads .casing path{stroke:#4a3a12;stroke-width:calc(var(--k) * 7px)}
.sat .roads .main path{stroke:#EAB64D;stroke-width:calc(var(--k) * 5px)}
.sat .roads .casing .rd-motorway{stroke-width:calc(var(--k) * 9px)}
.sat .roads .main .rd-motorway{stroke-width:calc(var(--k) * 7px)}
.sat .roads .casing .rd-secondary{stroke-width:calc(var(--k) * 6px)}
.sat .roads .main .rd-secondary{stroke-width:calc(var(--k) * 4px)}
.sat .rail path{fill:none;stroke-linejoin:round}
.sat .rail .rl-band{stroke:#E45B2B;stroke-width:calc(var(--k) * 10px)}
.sat .rail .rl-dash{stroke:#fff;stroke-width:calc(var(--k) * 1.4px);stroke-dasharray:calc(var(--k) * 5px) calc(var(--k) * 5px)}
.sat .roadlabels text{font:500 calc(var(--k) * 15px) var(--sans);letter-spacing:.03em}
.sat .rt-road{fill:#2b2108}
.sat .rt-rail{fill:#fff}
.sat .zonelabels text{font-family:var(--serif);font-weight:800;font-size:calc(var(--k) * 44px);fill:#fff;paint-order:stroke;stroke:#102832;stroke-width:calc(var(--k) * 4px);stroke-linejoin:round}
.sat.s-walk.s-zones .zones{opacity:.35}
.sat .walk{opacity:0;transition:opacity 200ms linear}
.sat.s-walk .walk{opacity:1}
.sat .walk path{fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 300ms linear}
.sat .walk .wcase path{stroke:rgba(16,40,50,.7);stroke-width:calc(var(--k) * 6.5px)}
.sat .walk .wline path{stroke:#A8E6E0;stroke-width:calc(var(--k) * 3.5px)}
.sat.s-walk .walk path{stroke-dashoffset:0;transition:stroke-dashoffset var(--dur) linear var(--del)}
.sat .leaders,.sat .callouts{opacity:0;transition:opacity 200ms var(--ease)}
.sat.s-callouts .leaders,.sat.s-callouts .callouts{opacity:1;transition:opacity 300ms var(--ease) .85s}
.sat .leaders polyline{fill:none;stroke:#111;stroke-width:calc(var(--k) * 1.6px)}
.sat .callouts rect{fill:#fff}
.sat .callouts text{font-family:var(--sans);font-weight:500;fill:#171B1D}
.sat .pin{pointer-events:none}
.sat .pinin{opacity:0;transform:scale(.6);transition:opacity 160ms var(--ease),transform 160ms var(--ease)}
.sat.s-pins .pinin{opacity:1;transform:scale(1);transition:opacity 220ms var(--ease) calc(var(--i) * 40ms),transform 220ms var(--ease) calc(var(--i) * 40ms)}
.sat .pin circle{fill:#fff;stroke:rgba(0,0,0,.28);stroke-width:calc(var(--k) * 1px)}
.sat .cam{fill:#EAB64D;stroke:#102832;stroke-width:calc(var(--k) * 2px);r:calc(var(--k) * 6.5px);opacity:0;transition:opacity 300ms var(--ease)}
.sat.s-cams .cam{opacity:1;transition-delay:calc(var(--i) * 20ms)}
.sat .camlabel{font:500 calc(var(--k) * 17px) var(--sans);fill:#fff;paint-order:stroke;stroke:#102832;stroke-width:calc(var(--k) * 4px);stroke-linejoin:round;opacity:0;transition:opacity 300ms var(--ease)}
.sat.s-cams .camlabel{opacity:1}

/* ---------------- scene 1 ---------------- */
.step-hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;padding:84px var(--m) 7vh var(--lx)}
.step-hero h1{font:800 clamp(3rem,8vw,8.5rem)/.93 var(--serif);letter-spacing:-.025em;max-width:9.5em;text-wrap:balance;font-optical-sizing:auto}
.kicker{font:600 clamp(1.125rem,1.4vw + .55rem,1.5rem)/1.3 var(--sans);letter-spacing:.005em;color:var(--fg);margin:0 0 .9rem;max-width:30em;text-wrap:balance}
.hero-body{max-width:36ch;border-top:1px solid var(--fg);padding:18px 0 0}

/* ---------------- scenes 1-2 steps ---------------- */
.step-zones,.step-units,.step-routes{min-height:100vh}
.copy{border-top:1px solid var(--fg);padding:22px 0 26px;max-width:min(35rem,42vw)}
.copy h2{font:800 clamp(1.9rem,3.2vw,3.1rem)/1.05 var(--serif);letter-spacing:-.015em;margin-bottom:1rem}
.copy p{max-width:65ch}
.step-routes .copy p+p{margin-top:.9rem}
.step-routes .fig{font-weight:700;font-size:1.2em;display:inline;margin:0}

/* ---------------- scene 3 ---------------- */
.expo{padding:6vh 0 16vh}
.expo-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.015em}
.expo-photo img{width:100%;box-shadow:0 2px 8px rgb(0 0 0 / 8%)}
.fact{font-size:clamp(1.15rem,1.55vw,1.5rem);line-height:1.3;max-width:36ch}
.fig{font-weight:800;font-size:1.9em;line-height:1;letter-spacing:-.025em;font-variant-numeric:lining-nums;display:inline-block;margin:0 .02em}
.fact .fig{display:block;font-size:clamp(3rem,6vw,5.6rem);margin:.08em 0 .06em}
.fact-stores .fig{display:inline;font-size:1.65em;margin:0 .08em;vertical-align:-.08em}
.expo-text{display:flex;flex-direction:column;gap:2rem}
.expo-rank .fact{margin-bottom:1.25rem}
.doc img{width:100%;box-shadow:0 2px 8px rgb(0 0 0 / 8%);border:1px solid var(--rule)}
.chart{display:block;width:100%;height:auto;overflow:visible}
.chart .base,.chart .tk{stroke:var(--fg);stroke-width:1;fill:none}
.chart .ax{font:400 13px var(--sans);fill:var(--muted)}
.ln{fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ln-asc{stroke:var(--route)}.ln-play{stroke:var(--accent)}
.dl-asc{font:500 15px var(--sans);fill:var(--route-text)}
.dl-play{font:500 15px var(--sans);fill:var(--accent-text)}

/* ---------------- scene 4 ---------------- */
@media(min-width:900px){#stage-b .steps{padding-top:50vh}}
.step-turn{min-height:100vh;min-height:100svh;padding-top:9vh}
.turn-copy{border-top:1px solid var(--fg);padding:22px 0 30px;width:min(36rem,38vw);max-width:min(36rem,38vw)}
.turn-copy h2{font:400 .9375rem/1.2 var(--sans);letter-spacing:.04em;color:var(--muted);margin-bottom:.9rem}
.turn-body{max-width:34ch;margin-bottom:1.8rem}
.turn-q{position:relative;font:800 clamp(2.75rem,5.2vw,5.5rem)/1.02 var(--serif);letter-spacing:-.025em;min-height:2.1em}
.q{position:absolute;left:0;top:0;transition:opacity 700ms var(--ease-io)}
.q-2{opacity:0}
body[data-mode=flood] .q-1{opacity:0}
body[data-mode=flood] .q-2{opacity:1}
.turn-cap{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:1rem}

/* ---------------- scene 5 ---------------- */
.tl{position:relative;padding-bottom:30vh}
.tl::before{content:"";position:absolute;left:var(--lx);top:0;bottom:0;width:1px;background:var(--fg);transition:background-color 900ms var(--ease-io)}
.tl-item{min-height:64vh;display:flex;align-items:flex-start;padding-top:6vh}
.tl-item .copy{position:relative;border-top:0;border-left:1px solid var(--fg);padding:6px 0 6px 1.4rem;max-width:min(30rem,38vw)}
.tl-item .copy::before{content:"";position:absolute;left:-5px;top:14px;width:9px;height:9px;background:var(--accent-text)}
.tl-item h2{font:800 clamp(1.9rem,3.2vw,3.1rem)/1.05 var(--serif);letter-spacing:-.015em;margin-bottom:1.4rem;margin-left:-1.4rem;padding:0 0 .9rem 1.4rem;border-bottom:1px solid var(--rule);margin-right:0}
.tl-line{font-size:1.1875rem;line-height:1.4}
.t{display:block;font:400 .8125rem/1 var(--sans);letter-spacing:.06em;color:var(--accent-text);margin-bottom:.45rem;font-variant-numeric:tabular-nums}
.tl-key .tl-line{font:800 clamp(1.5rem,2.3vw,2.2rem)/1.2 var(--serif);letter-spacing:-.01em}

.evidence{padding:12vh 0 14vh}
.evidence .grid{align-items:start}
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}
.shot figcaption{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:.6rem}
@media(min-width:900px){
  .shot-1{grid-column:1/5}
  .shot-2{grid-column:5/9}
  .shot-3{grid-column:9/13}
}

/* ---------------- scene 6 ---------------- */
.use{padding:8vh 0 14vh}
.use-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.015em;max-width:14ch}
.cam-line{font-size:clamp(1.5rem,2.4vw,2.2rem);line-height:1.25;max-width:34ch;letter-spacing:-.01em}
.cam-line .fig{color:var(--accent-text)}
.dl-text{font-size:1.1875rem;max-width:44ch;margin-bottom:1.2rem}
.dl-text b{font-weight:600}
.bars{max-width:760px}
.dl-note{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:.8rem;max-width:56ch}
.rule{border:0;border-top:1px solid var(--fg);margin:0;width:100%}
.pub-h{font:400 .875rem/1 var(--sans);letter-spacing:.06em;color:var(--muted);margin-bottom:1.6rem}
.notice img{width:100%;box-shadow:0 2px 8px rgb(0 0 0 / 8%)}
.pub-text p:first-child{font-size:clamp(1.25rem,1.8vw,1.6rem);line-height:1.35;max-width:26ch}
.pub-text .cap{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:.8rem}
.pub{display:flex;flex-direction:column;gap:1.6rem}
@media(min-width:900px){
  .use-h{grid-column:1/6;grid-row:1}
  .cam-line{grid-column:1/9;grid-row:2;margin-top:6vh}
  .dl{grid-column:5/13;grid-row:3;margin-top:10vh}
  .rule{grid-column:1/-1;grid-row:4;margin:12vh 0 5vh}
  .pub{grid-column:1/-1;grid-row:5;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
  .pub-h{grid-column:1/-1}
  .notice{grid-column:1/5}
  .pub-text{grid-column:6/12;align-self:center}
}
.bars .base{stroke:var(--fg);stroke-width:1}
.bar{fill:var(--water)}
.bar.hi{fill:var(--amber)}
.tot{font:800 38px var(--serif);fill:var(--fg)}
.tot-hi{fill:var(--accent-text);font-size:46px}
.brk{fill:none;stroke:var(--muted);stroke-width:1}
.bars .ax{font:400 13px var(--sans);fill:var(--muted)}

/* ---------------- scene 7 ---------------- */
.boats{padding:10vh 0 14vh;border-top:1px solid var(--rule)}
.boats-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.015em;max-width:16ch}
.split{display:flex;flex-direction:column;gap:var(--gut)}
.split figure{display:flex;flex-direction:column;margin:0}
.split img{width:100%;aspect-ratio:3/2;object-fit:cover}
.boats-text p{max-width:60ch}
.essay{display:flex;flex-direction:column;gap:3rem}
.es{margin:0}
.es img{display:block;width:100%;height:100%;object-fit:cover}
.es-lead img{height:auto;aspect-ratio:4/3;max-height:80vh}
.es-row{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1.25rem}
.es-row li{min-width:0}
.es-a .es-row li,.es-c .es-row li{aspect-ratio:4/3}
.es-b .es-row li{aspect-ratio:3/2}
.es-b .es-row li:nth-child(2) img{object-position:50% 58%}
.es-a .es-row li:nth-child(3) img{object-position:50% 52%}
.es figcaption{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:.6rem}
.es-credit{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:-1.5rem}
.watch{margin-top:1.2rem}
.watch a{display:inline-flex;align-items:center;min-height:44px;font:400 .9375rem var(--sans)}
@media(min-width:900px){
  .boats-h{grid-column:1/8;grid-row:1}
  .split{grid-column:1/-1;grid-row:2;display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--gut);align-items:start;margin-top:6vh}
  .boats-text{grid-column:1/9;grid-row:3;margin-top:5vh}
  .essay{grid-column:1/-1;grid-row:4;margin-top:8vh;gap:var(--gut)}
  .es-lead img{aspect-ratio:3/2;max-height:none}
  .es-row{flex-direction:row;align-items:flex-start;gap:var(--gut)}
  .es-a .es-row li,.es-c .es-row li{flex:1 1 0}
  .es-b .es-row li:nth-child(1){flex:5 1 0}
  .es-b .es-row li:nth-child(2){flex:4 1 0}
  .es-b .es-row li:nth-child(3){flex:3 1 0}
  .es-b .es-row li:nth-child(1){aspect-ratio:5/3.4}
  .es-b .es-row li:nth-child(2){aspect-ratio:4/3.4}
  .es-b .es-row li:nth-child(3){aspect-ratio:3/3.4}
  .es-credit{margin-top:-1rem}
  .boats-watch{grid-column:1/-1;grid-row:5}
}

/* ---------------- scene 8 ---------------- */
.privacy{padding:12vh 0 12vh;border-top:1px solid var(--rule)}
.priv-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.015em;max-width:14ch}
.priv-lead{font-size:clamp(1.25rem,1.9vw,1.75rem);margin-top:1.4rem}
.quote{border-left:2px solid var(--accent-text);padding-left:1.4rem}
.said{font:400 .875rem/1.3 var(--sans);color:var(--muted);margin-bottom:.7rem}
.quote blockquote p{font:italic 400 clamp(1.7rem,3vw,2.8rem)/1.15 var(--serif);letter-spacing:-.01em}
.quote .and{font:400 .875rem var(--sans);font-style:normal;color:var(--muted);margin:.5rem 0;letter-spacing:.04em}
.quote figcaption{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:.9rem}
.tri{display:grid;grid-template-columns:1fr;gap:20px}
.tri-fig{margin:0}
.tri-map{aspect-ratio:var(--ar);border:1px solid var(--rule)}
.attrib-fig{font:400 12px/1.35 var(--sans);color:var(--muted);margin-top:.35rem}
.attrib-fig a{display:inline-block;padding:3px 0}
.tri-fig figcaption{font:400 .9375rem var(--sans);margin-top:.6rem}
.pattern{font-size:clamp(1.3rem,2vw,1.8rem);line-height:1.4;max-width:36ch}
.pattern em{font-style:italic;box-shadow:inset 0 -1px 0 var(--accent-text)}
@media(min-width:900px){
  .priv-h{grid-column:1/7;grid-row:1}
  .priv-lead{grid-column:1/7;grid-row:2}
  .q-apple{grid-column:1/6;grid-row:3;margin-top:8vh}
  .q-google{grid-column:7/13;grid-row:3;margin-top:14vh}
  .tri{grid-column:1/-1;grid-row:4;grid-template-columns:repeat(3,1fr);gap:var(--gut);margin-top:14vh}
  .pattern{grid-column:1/9;grid-row:5;margin-top:7vh}
}
.js .tri-fig figcaption{opacity:0;transition:opacity 250ms var(--ease)}
.js .tri.in figcaption{opacity:1}

/* ---------------- scene 9 ---------------- */
.close{padding:14vh 0 10vh;border-top:1px solid var(--rule)}
.close-h{font:800 clamp(2.2rem,5.2vw,5rem)/1 var(--serif);letter-spacing:-.025em;max-width:14em;text-wrap:balance}
.close-body{font-size:clamp(1.25rem,1.9vw,1.7rem);line-height:1.4;max-width:44ch}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:20px}
.badge{display:inline-flex;align-items:center;min-height:44px}
.badge img{height:40px;width:auto}
.sources h3{font:400 .875rem/1 var(--sans);letter-spacing:.06em;color:var(--muted);margin-bottom:1rem}
.sources ul{list-style:none;margin:0;padding:0;font:400 .9375rem/1.45 var(--sans)}
.sources li{padding:.35rem 0;border-top:1px solid var(--rule)}
.sources a{display:inline-flex;align-items:center;min-height:44px;padding:.15rem 0}
.credits{font:400 .8125rem/1.5 var(--sans);color:var(--muted);max-width:44ch}
.credits p+p{margin-top:.8rem}
@media(min-width:900px){
  .close-h{grid-column:1/12;grid-row:1}
  .close-body{grid-column:1/8;grid-row:2;margin-top:5vh}
  .stores{grid-column:1/8;grid-row:3;margin-top:5vh}
  .sources{grid-column:1/8;grid-row:4;margin-top:16vh}
  .credits{grid-column:9/13;grid-row:4;margin-top:16vh;align-self:end}
}

/* ---------------- motion hooks ---------------- */
.js .reveal{opacity:0;transition:opacity 240ms var(--ease)}
.js .reveal.in{opacity:1}
.js .draw .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 600ms ease-out 120ms}
.js .draw.in .ln{stroke-dashoffset:0}
.js .dl .bar{transform:scaleY(0);transform-box:fill-box;transform-origin:50% 100%;transition:transform 450ms ease-out}
.js .dl.in .bar{transform:scaleY(1)}
.js .wipe .sp-l,.js .wipe .sp-r{clip-path:inset(0 100% 0 0);transition:clip-path 500ms var(--ease)}
.js .wipe .sp-r{transition-delay:120ms}
.js .wipe.in .sp-l,.js .wipe.in .sp-r{clip-path:inset(0 0 0 0)}
.no-anim,.no-anim *{transition:none!important}

/* ---------------- mobile ---------------- */
.mapfig-inline{position:relative;margin:2rem 0 0 calc(-1 * var(--m));width:calc(100% + var(--m))}
.mapfig-inline[data-kind=hero]{margin-right:calc(-1 * var(--m));width:auto}
.mapfig-inline .mfi{width:100%;aspect-ratio:var(--ar);border:0}
.mapfig-inline .attrib,.mapfig-inline .figcap-inline{padding-left:16px;padding-right:16px}
.mapfig-inline .attrib{position:relative;right:auto;bottom:auto;z-index:1;display:block;margin-top:0;padding:6px 16px 4px calc(var(--m) + 1.4rem);background:var(--bg)}
.mapfig-inline .figcap-inline{position:relative;z-index:1;background:var(--bg);padding-left:calc(var(--m) + 1.4rem)}
@media(min-width:900px){.mapfig-inline{display:none}}
.tri .camlabel{display:none}
.tri .tri-map.sat .cam{r:calc(var(--k) * 3px);stroke-width:calc(var(--k) * 1px)}
.tri .tri-map.sat .walk .wcase path{stroke-width:calc(var(--k) * 3.4px)}
.tri .tri-map.sat .walk .wline path{stroke-width:calc(var(--k) * 1.8px)}
.tri .tri-map.s-zones .zones{opacity:.35}
@media(max-width:899.98px){
  .mfi.sat .zonelabels text{font-size:calc(var(--k) * 26px);stroke-width:calc(var(--k) * 4px)}
  .sat .walk .wcase path{stroke-width:calc(var(--k) * 6px)}
  .sat .walk .wline path{stroke-width:calc(var(--k) * 3px)}
  .sat .roadlabels text{font-size:calc(var(--k) * 11px)}
  .stage{display:none}
  .steps{margin-top:0}
  .step{min-height:0;padding:0 0 0 var(--m)}
  .step-hero{min-height:0;padding:76px var(--m) 3rem var(--m);display:block}
  .kicker{font-size:18px}
  .step-hero h1{margin-bottom:1.6rem}
  .hero-body{border-top:1px solid var(--fg);padding-top:16px}
  .step-zones,.step-units,.step-routes,.step-turn{display:block;min-height:0;padding-top:3rem}
  .copy{max-width:none;margin-right:var(--m)}
  .turn-copy{width:auto;margin-right:var(--m)}
  .tl-item{min-height:0;display:block;padding-top:2rem}
  .tl-item .copy{max-width:none}
  .tl{padding-bottom:3rem}
  .mfi.sat .cam{r:calc(var(--k) * 5px);stroke-width:calc(var(--k) * 1.5px)}
  .tl::before{left:var(--m)}
  .step-turn{padding-top:3rem}
  .expo,.use,.boats,.shelter,.privacy,.close,.evidence{padding-top:4.5rem;padding-bottom:4.5rem}
  .shot{max-width:340px;margin-bottom:2rem}
  .evidence .grid{gap:0}
  .tri{gap:28px}
  .split{gap:2rem}
  .fact .fig{font-size:3.2rem}
  .fact-stores .fig{font-size:1.65em}
}

/* ---------------- desktop: copy on flat scrims over the photo ---------------- */
@media(min-width:900px){
  #stage-hero .step,#stage-a .step,#stage-b .step{padding-left:0}
  .step-hero,.step-zones .copy,.step-units .copy,.step-routes .copy,.turn-copy,.tl-item .copy{
    background:var(--scrim);color:var(--sc-fg);--fg:var(--sc-fg);--muted:var(--sc-muted);--accent-text:var(--sc-acc);
    transition:background-color 700ms var(--ease-io),color 700ms var(--ease-io)}
  #stage-hero .step-hero{width:calc(var(--lx) + min(38rem,44vw));padding:84px 32px 7vh var(--lx)}
  .step-zones .copy,.step-units .copy,.step-routes .copy{
    position:sticky;top:calc(100svh - var(--ch));min-height:var(--ch);
    width:calc(var(--lx) + min(40rem,52vw));max-width:none;border-top:0;padding:24px 32px 26px var(--lx);
    display:flex;flex-direction:column;justify-content:flex-end}
  .step-zones{--ch:7.5rem}
  .step-units{--ch:7.5rem}
  .step-routes{--ch:13.5rem}
  .step-routes .copy{width:calc(var(--lx) + min(52rem,66vw));font-size:1.0625rem;line-height:1.5}
  .js .step-zones .copy,.js .step-units .copy,.js .step-routes .copy{opacity:0;transition:opacity 250ms var(--ease)}
  .js .step-zones.is-active .copy,.js .step-units.is-active .copy,.js .step-routes.is-active .copy{opacity:1}
  .turn-copy{width:calc(var(--lx) + min(34rem,40vw));max-width:none;border-top:0;padding:26px 32px 30px var(--lx)}
  .tl-item .copy{width:calc(var(--lx) + min(30rem,38vw));max-width:none;border-left:0;padding:22px 32px 24px var(--lx)}
  .tl-item .copy::before{display:none}
  .tl-item h2{margin-left:0;padding-left:0}
  .tl::before{display:none}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js .reveal{opacity:1}
  .js .draw .ln{stroke-dasharray:none;stroke-dashoffset:0}
  .js .dl .bar{transform:none}
  .js .wipe .sp-l,.js .wipe .sp-r{clip-path:none}
  .js .tri-fig figcaption{opacity:1}
}

@media(max-width:899.98px){
  .turn-copy{width:auto;max-width:none}
  .turn-q{min-height:4.2em;font-size:clamp(2.4rem,11vw,3.4rem)}
  .expo-photo figcaption,.doc figcaption,.notice figcaption,.split figcaption,.quote figcaption,.attrib,.mapfig-inline .attrib,.tri-fig figcaption,.attrib-fig{font-size:14px}
}

/* ---------------- shelter ---------------- */
.shelter{padding:10vh 0 12vh;border-top:1px solid var(--rule)}
.shelter-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);letter-spacing:-.015em;max-width:14ch}
.shelter-body{max-width:60ch}
.clip{margin:0;max-width:340px}
.clip-box{position:relative}
.clip video{display:block;width:100%;height:auto;aspect-ratio:9/19.5;object-fit:cover;background:var(--rule);border:1px solid color-mix(in srgb,var(--fg) 20%,transparent)}
.clip figcaption{font:400 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:.6rem}
.clip-btn{position:absolute;left:0;bottom:0;min-width:44px;min-height:44px;padding:0 14px;border:0;border-top:1px solid color-mix(in srgb,var(--fg) 20%,transparent);border-right:1px solid color-mix(in srgb,var(--fg) 20%,transparent);background:var(--bg);color:var(--fg);font:500 .8125rem/1 var(--sans);cursor:pointer}
.clip-btn:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.shelter-cap{font:400 .8125rem/1.4 var(--sans);color:var(--muted)}
@media(min-width:900px){
  .shelter-h{grid-column:1/8;grid-row:1}
  .shelter-body{grid-column:1/9;grid-row:2;margin-top:3vh}
  .clip-1{grid-column:2/6;grid-row:3;margin-top:7vh}
  .clip-2{grid-column:7/11;grid-row:3;margin-top:16vh}
  .shelter-cap{grid-column:2/11;grid-row:4;margin-top:3vh}
}

/* Archivo: wide display cut for headings and headline figures */
.step-hero h1,.copy h2,.expo-h,.turn-q,.tl-item h2,.tl-key .tl-line,.use-h,.boats-h,.priv-h,.close-h,.shelter-h,.fig,.tot{font-stretch:108%}
.kicker,.attrib,.figcap,.figcap-inline,.figcap-inline,.attrib-fig,.said,.t,.dl-asc,.dl-play{font-weight:500}
@media (min-width:900px){#stage-hero .step-hero h1{font-size:clamp(3rem,5.4vw,6.4rem);font-stretch:104%;letter-spacing:-.03em}}

/* ---------------- 0310d revision ---------------- */
/* hero proof row */
.hero-foot{display:flex;flex-direction:column}
.proof{list-style:none;margin:22px 0 0;padding:18px 0 0;border-top:1px solid var(--fg);display:grid;grid-template-columns:repeat(2,1fr);gap:22px 0}
.proof li{padding:0 14px 0 0;display:flex;flex-direction:column;gap:.35rem}
.proof li:nth-child(even){padding-left:16px;border-left:1px solid var(--fg)}
.pn{font:800 clamp(1.7rem,7.4vw,2.1rem)/1 var(--serif);font-stretch:108%;letter-spacing:-.02em;font-variant-numeric:lining-nums}
.pl{font:500 .8125rem/1.3 var(--sans)}
.pq{display:block;font:500 11px/1.2 var(--sans);letter-spacing:.02em;margin-bottom:2px}
.proof-cap{font:500 .75rem/1.4 var(--sans);color:var(--muted);margin-top:14px;max-width:44ch}
@media(min-width:900px){
  #stage-hero .step-hero{width:calc(var(--lx) + min(56rem,64vw))}
  .hero-foot .hero-body{max-width:36ch}
  .proof{grid-template-columns:repeat(4,1fr);gap:0}
  .proof li{padding:0 14px}
  .proof li:first-child{padding-left:0}
  .proof li:nth-child(even){padding-left:14px}
  .proof li+li{border-left:1px solid var(--fg)}
  .pn{font-size:clamp(1.8rem,2.4vw,2.4rem)}
  .pq{font-size:12px}
}

/* innovation layer */
.layer{padding:12vh 0 12vh;border-top:1px solid var(--rule)}
.layer-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);font-stretch:108%;letter-spacing:-.015em;max-width:16ch}
.layer-text{display:flex;flex-direction:column;gap:1.1rem;max-width:62ch}
.stack{margin:0}
.stack-list{list-style:none;margin:0;padding:0;counter-reset:none}
.stack-list li{font:500 clamp(1rem,1.2vw,1.125rem)/1.4 var(--sans);padding:12px 0;border-top:1px solid var(--fg);position:relative}
.stack-list li:nth-child(3){font:800 clamp(1.3rem,1.8vw,1.7rem)/1.2 var(--serif);font-stretch:108%;letter-spacing:-.01em}
.stack-list li+li{margin-top:30px}
.stack-list li+li::before{content:"";position:absolute;left:0;top:-30px;height:30px;width:1px;background:var(--fg)}
.stack-list li+li::after{content:"";position:absolute;left:-4px;top:-9px;width:8px;height:8px;border-right:1px solid var(--fg);border-bottom:1px solid var(--fg);transform:rotate(45deg) translate(-1px,-1px) scale(.9);background:transparent}
.stack figcaption{font:500 .8125rem/1.4 var(--sans);color:var(--muted);margin-top:1rem}
@media(min-width:900px){
  .layer-h{grid-column:1/8;grid-row:1}
  .layer-text{grid-column:1/7;grid-row:2;margin-top:4vh}
  .stack{grid-column:8/13;grid-row:2;margin-top:4vh}
}

/* how measured */
.fact-group{display:flex;flex-direction:column}
.how{margin-top:.25rem}
.how summary{display:inline-flex;align-items:center;min-height:44px;font:500 .8125rem/1 var(--sans);cursor:pointer;list-style:none;color:var(--muted);text-underline-offset:.25em}
.how summary::-webkit-details-marker{display:none}
.how summary:hover,.how summary:focus-visible{text-decoration:underline}
.how[open] summary{color:var(--fg)}
.how p{font:500 .8125rem/1.45 var(--sans);color:var(--muted);max-width:56ch;padding:0 0 .6rem}
@media(min-width:900px){.how summary{min-height:32px}}
.cam-line .how p{font-size:.8125rem;line-height:1.45;letter-spacing:0}
.bars+.how{margin-top:.2rem}

/* ready for the unexpected */
.ready-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);font-stretch:108%;letter-spacing:-.015em;max-width:14ch}
.ready-body{max-width:50ch}
.shot-label{font:500 .875rem/1 var(--sans);letter-spacing:.04em;color:var(--muted);margin:0 0 .6rem}
.shot img{aspect-ratio:783/1600;object-fit:cover}
@media(max-width:899.98px){.evidence .grid{gap:2rem}.shot{margin-bottom:0}}
@media(min-width:900px){
  .ready-h{grid-column:1/8;grid-row:1}
  .ready-body{grid-column:1/8;grid-row:2;margin-top:2.2rem}
  .shot-1{grid-column:1/5;grid-row:3;margin-top:7vh}
  .shot-2{grid-column:6/10;grid-row:3;margin-top:7vh}
  .shot-3{grid-column:1/5;grid-row:4;margin-top:9vh}
  .shot-4{grid-column:6/10;grid-row:4;margin-top:9vh}
}

/* chart marker */
.bars .mk{stroke:var(--muted);stroke-width:1}
.bars .mkl{font:500 13px var(--sans);fill:var(--muted)}
.bars .pk{font:800 20px var(--serif);fill:var(--fg)}

/* replication */
.replicate{padding:12vh 0 12vh;border-top:1px solid var(--rule)}
.rep-h{font:800 clamp(2rem,3.6vw,3.6rem)/1.05 var(--serif);font-stretch:108%;letter-spacing:-.015em;max-width:16ch}
.rep-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.rep-list li{border-top:1px solid var(--fg);padding:16px 0 26px}
.rn{display:block;font:800 clamp(2.6rem,4vw,3.8rem)/1 var(--serif);font-stretch:108%;color:var(--accent-text);margin-bottom:.8rem}
.rep-list h3{font:700 clamp(1.15rem,1.4vw,1.35rem)/1.25 var(--sans);margin-bottom:.5rem}
.rep-list p{font:400 1rem/1.5 var(--sans);color:var(--fg);max-width:34ch}
.rep-close{max-width:56ch;font-size:clamp(1.2rem,1.7vw,1.5rem);line-height:1.4}
@media(min-width:900px){
  .rep-h{grid-column:1/8;grid-row:1}
  .rep-list{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(4,1fr);column-gap:var(--gut);margin-top:6vh}
  .rep-close{grid-column:1/9;grid-row:3;margin-top:7vh}
}

/* closing */
.close-body{display:flex;flex-direction:column;gap:1.1rem}
.badge img{height:28px}
.src-g{font:500 .8125rem/1 var(--sans);letter-spacing:.06em;color:var(--muted);margin:1.6rem 0 .6rem}
.src-g:first-of-type{margin-top:0}
.sources li:not(:has(a)){padding:.7rem 0}
.rep-h,.layer-h,.ready-h{font-stretch:108%}

.logo-row{display:flex;align-items:center;gap:16px;margin:12px 0 20px}
.logo-row img{height:26px;width:auto;display:block}
.logo-row .sep{width:1px;height:26px;background:rgba(26,26,26,.3)}
@media(min-width:900px){.logo-row img{height:34px}.logo-row .sep{height:34px;background:rgba(255,255,255,.4)}}

/* ---- platform diagram ---- */
.dg{display:block;width:100%;height:auto;overflow:visible}
.dg-tall{display:none}
.dg-g{font:600 12px var(--sans);letter-spacing:.12em;fill:var(--muted)}
.dg-n{font:600 16px var(--sans);fill:var(--fg)}
.dg-r{font:500 13px var(--sans);fill:var(--muted)}
.dg-l{fill:none;stroke:var(--fg);stroke-width:1;opacity:.55}
.dg-tk{fill:none;stroke:var(--fg);stroke-width:4;stroke-linejoin:round}
.dg-l.dg-br{stroke-width:1.25;opacity:.7}
.dg-hub{fill:var(--fg)}
.dg-hn{font:800 30px var(--serif);font-stretch:108%;letter-spacing:-.01em;fill:var(--bg)}
.dg-hs{font:600 20px var(--sans);fill:var(--bg)}
.dg-hr{font:500 13.5px var(--sans);fill:var(--bg)}
.dg-mn{font:700 21px var(--sans);fill:var(--fg)}
.dg-md{font:500 14px var(--sans);fill:var(--muted)}
.dg-l.dg-m1{stroke-width:1.5;opacity:1}
.dg-l.dg-m2{stroke-width:1;opacity:.8}
.dg-l.dg-m3{stroke:var(--accent);stroke-width:1.5;opacity:1}
text.dg-m1.dg-mn{font-weight:800}
text.dg-m3.dg-mn{fill:var(--accent-text)}
.dg-m2.dg-mn{font-weight:600}
@media(max-width:899.98px){
  .dg-wide{display:none}.dg-tall{display:block}
  .dg-g{font-size:13px}.dg-r{font-size:13px}.dg-md{font-size:13px}.dg-mn{font-size:18px}.dg-hr{font-size:13px}
  .stack{margin-top:2rem}
}
@media(min-width:900px){
  .stack{grid-column:1/-1!important;grid-row:3!important;margin-top:7vh!important}
}

/* ---- expo layout ---- */
.expo-h{grid-column:1/-1}
.expo-photo{margin-top:1.5rem}
.expo-figs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);border-top:1px solid var(--fg);margin-top:3rem}
.expo-figs .fact-group{padding:18px 0 8px 14px;border-left:1px solid var(--fg)}
.expo-figs .fact-group:nth-child(odd){padding-left:0;padding-right:14px;border-left:0}
.expo-figs .fact-group:nth-child(n+3){border-top:1px solid var(--fg)}
.fl{font:500 .8125rem/1.35 var(--sans);color:var(--muted);margin-bottom:.7rem}
.expo-figs .fig{display:block;font-size:clamp(1.75rem,8vw,2.2rem);margin:0 0 .5rem}
.expo-figs .fig-pair{font-size:clamp(1.5rem,6.6vw,1.9rem)}
.fb{font:600 .9375rem/1.3 var(--sans);margin-bottom:.4rem}
.expo-chart{margin-top:4rem}
.expo-sub{font:600 .9375rem/1.35 var(--sans);margin:0 0 1rem;max-width:44ch}
.expo-rank{margin-top:3rem}
.expo-rank .fact{font:600 clamp(1.1rem,1.4vw,1.3rem)/1.3 var(--sans);margin-bottom:1rem;max-width:30ch}
.expo-rank .doc img{box-shadow:none}
.expo-photo img{box-shadow:none}
@media(min-width:900px){
  .expo-photo{grid-column:1/-1;margin-top:0}
  .expo-figs{grid-column:1/-1;grid-template-columns:repeat(4,1fr);margin-top:6vh}
  .expo-figs .fact-group,.expo-figs .fact-group:nth-child(odd){padding:20px 20px 8px;border-left:1px solid var(--fg);border-top:0}
  .expo-figs .fact-group:first-child{padding-left:0;border-left:0}
  .expo-figs .fig{font-size:clamp(2.4rem,3.4vw,3.2rem)}
  .expo-figs .fig-pair{font-size:clamp(2.1rem,2.9vw,2.7rem)}
  .fl{font-size:.875rem;min-height:3.8em}
  .fb{font-size:1rem}
  .expo-chart{grid-column:1/7;margin-top:9vh}
  .expo-rank{grid-column:7/13;margin-top:9vh}
}
.expo-h{padding-bottom:1.75rem}
.chart-m{display:none}
.chart-d .ax,.chart-d .dl-asc,.chart-d .dl-play{font-size:14px}
.chart-m .ax,.chart-m .dl-asc,.chart-m .dl-play{font-size:13px}
.chart .lg .ln{stroke-dasharray:none;stroke-dashoffset:0}
@media(max-width:899.98px){.chart-d{display:none}.chart-m{display:block}}
/* platform diagram, dial */
.dg-ring{fill:none;stroke:var(--fg);stroke-width:1.5}
.dg-tk{stroke:var(--fg);stroke-width:1.5;fill:none}
.dg-tkg{stroke:var(--muted);stroke-width:1;fill:none}
.dg-sp{stroke:var(--muted);stroke-width:1;fill:none}
.dg-pv{fill:var(--accent)}
.dg-pl{font:600 13px var(--sans);letter-spacing:.1em;fill:var(--muted)}
.dg-pl.f{fill:var(--accent-text);font-weight:800}
.dg-cap{font:500 13px var(--sans);fill:var(--muted)}
.dg-sb{font:500 14px var(--sans);fill:var(--bg)}
.dg-band{fill:none;stroke:var(--fg);stroke-width:1.5}
.dg-bt{font:600 12px var(--sans);letter-spacing:.12em;fill:var(--fg)}
.dg-bs{font:500 13px var(--sans);fill:var(--fg)}
.dg-sw{stroke:var(--muted);stroke-width:1.5;fill:none}
.dg-swf{fill:var(--accent)}
.dg-sl{font:600 12px var(--sans);letter-spacing:.06em;fill:var(--muted)}
.dg-sl.f{fill:var(--accent-text);font-weight:800}
.dg-hs2{font:600 16px var(--sans);fill:var(--bg)}
.dg-bandL{fill:none;stroke:var(--accent);stroke-width:14}
.dg-arc{fill:none;stroke:var(--fg);stroke-width:1.25}
.dg-tn{stroke:var(--fg);stroke-width:1;opacity:.35;fill:none}
.dg-tm{stroke:var(--fg);stroke-width:1.5;fill:none}
.dg-tm.f{stroke:var(--accent)}
.dg-nd{stroke:var(--accent);stroke-width:6;stroke-linecap:round;fill:none}
.dg-nh{fill:var(--accent);stroke:none}
.dg-cap{font-size:13px}
@media(max-width:720px){.dg-sb{font-size:13px}}

/* ---------------- wide context map ---------------- */
.context{background:var(--storm);color:#F2EFE8;position:relative;z-index:2}
.cx{margin:0 auto;max-width:1600px}
.cx-stage{position:relative;width:100%;line-height:0;overflow:hidden}
.cx-stage img{display:block;width:100%;height:auto;filter:saturate(.48) brightness(.56) contrast(1.06)}
.cx-stage svg{position:absolute;left:0;top:0;width:100%;height:100%;display:block}
.cx-cap{padding-top:18px;padding-bottom:36px}
@media(min-width:900px){.cx{max-width:min(1600px,calc((100vh - 200px)*16/9))}}
.cx-cap p{font:400 clamp(1rem,.95rem + .3vw,1.25rem)/1.45 var(--sans);max-width:46rem}
.cx-cap small{display:block;font:400 12px/1.3 var(--sans);opacity:.7;margin-top:8px}
@media(max-width:899.98px){.cx-cap small{font-size:14px}}
.cx-pl{fill:#F2EFE8;font-weight:600;paint-order:stroke;stroke:#102832;stroke-linejoin:round}
.cx-ll{fill:#F2EFE8;font-weight:800;text-transform:uppercase;letter-spacing:.08em;paint-order:stroke;stroke:#102832;stroke-linejoin:round}
.cx-st{fill:none;stroke-linejoin:round;animation:cx-mv linear infinite}
.cx.cx-idle .cx-st{animation-play-state:paused}
@keyframes cx-mv{from{stroke-dashoffset:var(--s)}to{stroke-dashoffset:var(--e)}}
.dg-l.dg-lf{stroke:var(--fg);stroke-width:1.5;opacity:1;stroke-linejoin:round}

.logo-row .lang{pointer-events:auto;margin-left:auto;display:inline-flex;align-items:center;padding:12px 0;margin-top:-12px;margin-bottom:-12px;font:500 .8125rem/1 var(--sans);letter-spacing:.02em;color:inherit;text-decoration:underline;text-underline-offset:3px}
.logo-row .lang:hover{text-decoration-thickness:2px}
.shelter-note{margin-top:1.4rem}
@media (min-width:900px){.shelter-note{grid-column:2/11;grid-row:4;margin-top:3vh}.shelter-note~.shelter-cap{grid-row:5;margin-top:1rem}}

.dg-needle{transition:transform .8s ease;transform-origin:var(--ox) var(--oy)}
.dg [data-mode]{transition:opacity .4s ease,fill .4s ease,stroke .4s ease}
.dg[data-live] path.dg-l[data-mode]{stroke:var(--fg);stroke-width:1;opacity:.35}
.dg[data-live] path.dg-tm[data-mode]{stroke:var(--fg);opacity:.5}
.dg[data-live] text.dg-pl[data-mode]{fill:var(--muted);font-weight:600}
.dg[data-live] text.dg-mn[data-mode]{fill:var(--fg);font-weight:600;opacity:.55}
.dg[data-live] text.dg-md[data-mode]{opacity:.55}
.dg[data-live][data-on="1"] path.dg-l[data-mode="1"],.dg[data-live][data-on="2"] path.dg-l[data-mode="2"],.dg[data-live][data-on="3"] path.dg-l[data-mode="3"]{stroke:var(--accent);stroke-width:1.5;opacity:1}
.dg[data-live][data-on="1"] path.dg-tm[data-mode="1"],.dg[data-live][data-on="2"] path.dg-tm[data-mode="2"],.dg[data-live][data-on="3"] path.dg-tm[data-mode="3"]{stroke:var(--accent);opacity:1}
.dg[data-live][data-on="1"] text.dg-pl[data-mode="1"],.dg[data-live][data-on="2"] text.dg-pl[data-mode="2"],.dg[data-live][data-on="3"] text.dg-pl[data-mode="3"]{fill:var(--accent-text);font-weight:800}
.dg[data-live][data-on="1"] text.dg-mn[data-mode="1"],.dg[data-live][data-on="2"] text.dg-mn[data-mode="2"],.dg[data-live][data-on="3"] text.dg-mn[data-mode="3"]{fill:var(--accent-text);font-weight:800;opacity:1}
.dg[data-live][data-on="1"] text.dg-md[data-mode="1"],.dg[data-live][data-on="2"] text.dg-md[data-mode="2"],.dg[data-live][data-on="3"] text.dg-md[data-mode="3"]{opacity:1}