@font-face{font-family:"Fraunces";font-style:normal;font-weight:300 900;font-display:swap;src:url(fonts/Fraunces-display.woff2) format("woff2")}
@font-face{font-family:"Atkinson Next";font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/AtkinsonHyperlegibleNext.woff2) format("woff2")}

/* ------------------------------------------------------------------ tokens: light first, dark under the media guard and the explicit switch */
:root{
  color-scheme:light;
  --bg:#f6f0e3; --bg2:#efe6d3; --surface:#fffaf0; --ink:#171d1d; --ink2:#2e3837; --muted:#3f4b4a;
  --line:#c9bb98; --line-soft:#ddd1b4;
  --accent:#7a4300; --accent-ink:#fffaf0; --mark:#8f1f14; --ok:#0f5a3a;
  --sea:#d3e2e0; --land:#efe5cd; --land-line:#b4a67f; --obs:#0f6b66;
  --ant:#3a2410; --ant-dead:#8d8678; --ant-trail:#8a4b00;
  --dish-bg:#fbf4e3; --dish-bg2:#ecdfc2; --dish-rim:#b4a27a; --dish-rim2:#cdbd96;
  --ui:rgba(255,250,240,.9);
  --bar:3.25rem; --serif:"Fraunces",Georgia,"Times New Roman",serif; --sans:"Atkinson Next","Atkinson Hyperlegible",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --shadow:0 1px 2px rgba(60,40,10,.08),0 10px 30px rgba(60,40,10,.12);
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#0a1216; --bg2:#0e1a20; --surface:#122127; --ink:#f3eee2; --ink2:#d9d5c8; --muted:#b7c2c3;
  --line:#2c4048; --line-soft:#1f2f36;
  --accent:#ffb23e; --accent-ink:#1b1200; --mark:#ff907e; --ok:#8fe0b4;
  --sea:#0b1c24; --land:#1d343b; --land-line:#527682; --obs:#7fd6cb;
  --ant:#e9a83f; --ant-dead:#707777; --ant-trail:#ffb23e;
  --dish-bg:#16313a; --dish-bg2:#0c1c22; --dish-rim:#41606b; --dish-rim2:#2a4750;
  --ui:rgba(10,18,22,.86);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.5);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#0a1216; --bg2:#0e1a20; --surface:#122127; --ink:#f3eee2; --ink2:#d9d5c8; --muted:#b7c2c3;
    --line:#2c4048; --line-soft:#1f2f36;
    --accent:#ffb23e; --accent-ink:#1b1200; --mark:#ff907e; --ok:#8fe0b4;
    --sea:#0b1c24; --land:#1d343b; --land-line:#527682; --obs:#7fd6cb;
    --ant:#e9a83f; --ant-dead:#707777; --ant-trail:#ffb23e;
    --dish-bg:#16313a; --dish-bg2:#0c1c22; --dish-rim:#41606b; --dish-rim2:#2a4750;
    --ui:rgba(10,18,22,.86);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 12px 36px rgba(0,0,0,.5);
  }
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.62 var(--sans);overflow-wrap:break-word}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:3px}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0;text-wrap:balance}
.skip{position:absolute;left:-999px;top:0;background:var(--surface);color:var(--ink);padding:.6rem 1rem;z-index:90}
.skip:focus{left:8px;top:8px}

/* ------------------------------------------------------------------ topbar */
.topbar{position:sticky;top:0;z-index:60;height:var(--bar);display:flex;align-items:center;gap:.7rem;padding:0 max(14px,env(safe-area-inset-left));
  background:var(--ui);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft)}
.home{display:inline-flex;align-items:center;gap:.4rem;color:var(--ink);text-decoration:none;font:700 .92rem var(--sans);white-space:nowrap}
.home-ico{color:var(--accent)}
.topnav{display:flex;gap:.25rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.topnav::-webkit-scrollbar{display:none}
.topnav a{color:var(--ink2);text-decoration:none;font:600 .86rem var(--sans);padding:.45rem .6rem;border-radius:999px;white-space:nowrap}
.topnav a:hover{background:var(--bg2);color:var(--ink)}
.spacer{flex:1 0 0}
.langs{display:flex;gap:.15rem}
.chip{font:700 .78rem var(--sans);letter-spacing:.04em;color:var(--ink2);text-decoration:none;padding:.4rem .5rem;border-radius:7px;border:1px solid transparent;min-width:2.1rem;text-align:center}
a.chip:hover{border-color:var(--line)}
.chip.cur{color:var(--accent-ink);background:var(--accent)}
.icon-btn{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:50%;border:1px solid var(--line);background:transparent;color:var(--ink);cursor:pointer}
.icon-btn svg{display:block}.icon-btn svg[hidden]{display:none}
.icon-btn:hover{border-color:var(--accent);color:var(--accent)}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.progress span{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:var(--accent)}
.progress i{opacity:0;transition:opacity .3s;position:absolute;top:-8px;left:0;width:14px;height:14px;margin-left:-7px;color:var(--accent);will-change:transform}
.progress i svg{display:block}
@media (max-width:760px){.home{font-size:0}.home-ico{font-size:1rem}.topnav a{padding:.45rem .5rem}}

/* ------------------------------------------------------------------ the story: a pinned stage and a column of text */
.story{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);max-width:1600px;margin:0 auto;align-items:start}
.stage-wrap{position:sticky;top:var(--bar);height:calc(100svh - var(--bar));min-width:0;border-right:1px solid var(--line-soft);z-index:5}
#stage{position:relative;height:100%;overflow:hidden;background:var(--sea)}
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s ease,visibility 0s linear .55s}
.scene.on{opacity:1;visibility:visible;transition:opacity .55s ease}
#coast,#world{width:100%;height:100%;display:block;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
#ants{position:absolute;inset:0;pointer-events:none}
.sea{fill:var(--sea)}
.land{fill:var(--land);stroke:none}
.coastline{fill:none;stroke:var(--land-line);stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.trailline{fill:none;stroke:var(--ant-trail);stroke-width:1.3;opacity:.22;vector-effect:non-scaling-stroke}
#obs{opacity:0;transition:opacity .3s;pointer-events:none}#obs.on{opacity:.62}#obs circle{fill:var(--obs)}
.pairline{fill:none;stroke-width:3.2;vector-effect:non-scaling-stroke;stroke-dasharray:6 6;opacity:0;transition:opacity .3s}
.pairline.on{opacity:1}.pairline.peace{stroke:var(--accent)}.pairline.war{stroke:var(--mark)}.pairline.mixed{stroke:var(--mark);stroke-dasharray:2 6}.pairline.none{stroke:var(--muted)}
.site{cursor:pointer;outline:none}
.site .mk{transform:scale(var(--ks,1))}
.site .halo{fill:var(--accent);opacity:.16}
.site.cat .halo{fill:var(--mark);opacity:.22}
.site .dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.6;vector-effect:non-scaling-stroke}
.site.cat .dot{fill:var(--sea);stroke:var(--mark);stroke-width:3.4}
.site.mites .dot{fill:var(--sea);stroke:var(--muted);stroke-width:1.8}
.site .star{stroke:var(--muted);stroke-width:1.8;fill:none;vector-effect:non-scaling-stroke}
.site .num{display:none;font:700 11px var(--sans);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--sea);stroke-width:3px}
.zoomed .site .num,.site.selA .num,.site.selB .num,.site:hover .num,.site:focus-visible .num{display:block}
.site.selA .dot,.site.selB .dot{stroke:var(--ink);stroke-width:3}
.site.selA .halo,.site.selB .halo{opacity:.5;animation:pulse 1.6s ease-in-out infinite}
.site:focus-visible .halo{opacity:.7}
@keyframes pulse{50%{opacity:.18}}
.site.cat .halo{animation:pulse 3.2s ease-in-out infinite}
#pals{opacity:0;transition:opacity .4s;pointer-events:none}#pals.on{opacity:1}
#pals .mk{transform:scale(var(--ks,1))}
.pdot{fill:none;stroke:var(--ink);stroke-width:2}
.plabel{font:700 11px var(--sans);fill:var(--ink);paint-order:stroke;stroke:var(--sea);stroke-width:3px}
.wsite{cursor:pointer;outline:none}.wsite .wl{display:none;font:700 9px var(--sans);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--sea);stroke-width:3px}.wsite:hover .wl,.wsite:focus-visible .wl,.wsite.selA .wl,.wsite.selB .wl{display:block}
.wsite .dot{fill:var(--accent);stroke:var(--bg);stroke-width:1.2}.wsite .halo{fill:var(--accent);opacity:.18}
.wsite.selA .dot,.wsite.selB .dot{stroke:var(--ink);stroke-width:2}.wsite:focus-visible .halo{opacity:.7}
#chaincv{width:100%;height:100%;display:block;background:var(--sea)}
.stage-cap{position:absolute;left:16px;right:16px;top:14px;margin:0;font:500 .86rem/1.4 var(--sans);color:var(--ink2);text-shadow:0 0 6px var(--sea),0 0 2px var(--sea);pointer-events:none}

.stage-ui{position:absolute;inset:0;pointer-events:none;display:flex;flex-direction:column;justify-content:flex-start;gap:.5rem;padding:14px}
.stage-ui>*{pointer-events:auto}
.legend{display:flex;flex-wrap:wrap;gap:.35rem .9rem;align-self:flex-start;background:var(--ui);border:1px solid var(--line-soft);border-radius:10px;padding:.45rem .7rem;font:600 .8rem var(--sans);color:var(--ink2);backdrop-filter:blur(6px);max-width:min(100%,34rem)}
.lg{display:inline-flex;align-items:center;gap:.4rem}
.lg i{width:12px;height:12px;border-radius:50%;display:inline-grid;place-items:center;font:700 11px/1 var(--sans);font-style:normal}
.lg.main i{background:var(--accent)}.lg.cat i{border:3px solid var(--mark)}.lg.mites i{border:1.5px solid var(--muted);color:var(--muted)}
.hint-pill{background:var(--accent);color:var(--accent-ink);font:700 .95rem var(--sans);padding:.55rem 1rem;border-radius:18px;box-shadow:var(--shadow);position:absolute;left:50%;top:46%;transform:translateX(-50%);pointer-events:none;margin:0;z-index:3}
#coast-pill.idle{animation:bob 2.4s ease-in-out infinite}
.hint-pill[hidden]{display:none}
.hint-pill.peace{background:var(--accent);color:var(--accent-ink)}.hint-pill.war{background:var(--mark);color:var(--bg)}.hint-pill.none{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.hint-pill{max-width:min(86%,26rem);white-space:normal;text-align:center;line-height:1.3}
@keyframes bob{50%{transform:translateX(-50%) translateY(-5px)}}
.regs{margin-top:auto;display:flex;gap:.35rem;overflow-x:auto;scrollbar-width:none;align-self:flex-start;max-width:100%;padding:2px}
.regs::-webkit-scrollbar{display:none}
.reg{flex:none;font:700 .8rem var(--sans);color:var(--ink);background:var(--ui);border:1px solid var(--line);border-radius:999px;padding:.4rem .8rem;cursor:pointer;min-height:36px;backdrop-filter:blur(6px)}
.reg[aria-current="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.obs{background:var(--ui);border:1px solid var(--line-soft);border-radius:10px;padding:.4rem .7rem;font:600 .8rem var(--sans);color:var(--ink2);align-self:flex-start;max-width:min(100%,30rem);backdrop-filter:blur(6px)}
.obs label{display:flex;gap:.5rem;align-items:center;cursor:pointer}.obs input{width:18px;height:18px;accent-color:var(--accent)}.obs-ico{display:none}
.obs-note{display:none;font-weight:400;color:var(--muted);margin-top:.2rem}
.obs:has(input:checked) .obs-note{display:block}
.map-reset{position:absolute;right:14px;top:14px;font:700 .82rem var(--sans);color:var(--accent-ink);background:var(--accent);border:0;border-radius:999px;padding:.5rem .9rem;cursor:pointer;min-height:38px;box-shadow:var(--shadow)}
.map-reset[hidden]{display:none}
.tip{position:absolute;z-index:4;background:var(--ink);color:var(--bg);font:600 .8rem var(--sans);padding:.3rem .55rem;border-radius:6px;pointer-events:none;white-space:nowrap}
.tip[hidden]{display:none}

/* ------------------------------------------------------------------ the column */
.col{padding:2.2rem clamp(18px,3vw,44px) 3rem;min-width:0}
.col section{padding:3.6rem 0 .6rem;scroll-margin-top:calc(var(--bar) + 8px)}
.col section.hero{padding-top:1.4rem}
.col p{max-width:36rem;margin:0 0 1.05rem}
.kicker{font:700 .78rem var(--sans);text-transform:uppercase;letter-spacing:.09em;color:var(--accent);margin:0 0 .8rem}
.hero h1{font-size:clamp(1.9rem,3.2vw,2.75rem);font-weight:650;letter-spacing:-.012em;margin-bottom:1.1rem}
.deck{font:400 1.12rem/1.6 var(--sans);color:var(--ink2)}
.hint{display:none}
.col h2{font-size:clamp(1.55rem,2.3vw,2rem);margin-bottom:1.1rem}
.col h3{font-size:1.2rem;margin:1.6rem 0 .6rem}
.small{font-size:.9rem;color:var(--muted)}

/* ------------------------------------------------------------------ the dish card */
.dish-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:1rem;box-shadow:var(--shadow);margin:1.2rem 0 1.4rem;max-width:36rem}
.dish-pick{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:.6rem}
.dish-pick label,.citysel{display:flex;flex-direction:column;gap:.25rem;font:700 .8rem var(--sans);color:var(--ink2)}
.citysel{max-width:20rem;margin:.4rem 0 .6rem}
select{font:500 .95rem var(--sans);color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:.55rem .5rem;min-height:44px;max-width:100%;width:100%}
.dish-stage{margin:.7rem auto .3rem;width:min(100%,250px);aspect-ratio:1}
.dish-stage canvas{width:100%;height:100%;display:block}
.dish-out{min-height:5.5rem}
.dish-title{font-size:1.25rem;margin:.2rem 0 .3rem}
.dish-body{margin:0 0 .5rem!important;max-width:none!important;color:var(--ink2)}
.dish-score{font:700 .9rem var(--sans);color:var(--accent);margin:0 0 .5rem!important}
.dish-card[data-state="war"] .dish-title,.dish-card[data-state="war"] .dish-score{color:var(--mark)}
.tally-cap{font:600 .82rem var(--sans);color:var(--muted);margin:.4rem 0 .3rem!important}
.tally{display:flex;flex-wrap:wrap;gap:3px;max-width:100%}
.tally i{width:8px;height:8px;border-radius:50%;border:1.5px solid var(--muted);display:block}
.tally i.x{background:var(--mark);border-color:var(--mark)}
.again{font:700 .85rem var(--sans);color:var(--ink);background:transparent;border:1px solid var(--line);border-radius:999px;padding:.45rem .9rem;cursor:pointer;min-height:40px;margin-top:.4rem}
.again:hover{border-color:var(--accent);color:var(--accent)}
.dish-note{font:400 .8rem/1.45 var(--sans);color:var(--muted);margin:.7rem 0 0!important}
.scale-box{margin-top:.8rem;border-top:1px solid var(--line-soft);padding-top:.6rem}
.scale-box summary{font:700 .85rem var(--sans);color:var(--ink2);cursor:pointer;padding:.3rem 0}
.scale{list-style:none;margin:.4rem 0 0;padding:0;display:grid;gap:.35rem}
.scale li{display:grid;grid-template-columns:1.7rem 1fr;gap:.5rem;align-items:start;font:400 .88rem/1.4 var(--sans);color:var(--ink2);padding:.25rem .3rem;border-radius:8px}
.scale b{display:grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;border:1.5px solid var(--line);font:700 .8rem var(--sans)}
.scale li.hit{background:var(--bg2);color:var(--ink)}
.scale li.hit b{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.js .nojs{display:none}
.nojs{margin:1rem 0;max-width:36rem}

/* ------------------------------------------------------------------ figures, facts, chart */
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1.4rem 0;max-width:36rem}
.fact{border-top:3px solid var(--accent);padding-top:.6rem}
.fact b{display:block;font:650 1.7rem/1.1 var(--serif);color:var(--accent);margin-bottom:.4rem}
.fact p{font-size:.92rem;line-height:1.5;margin:0}
@media (max-width:520px){.facts{grid-template-columns:1fr}}
.ph{margin:1.6rem 0;max-width:36rem}
.ph img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line-soft)}
.ph.tall img{max-height:62svh;width:auto;max-width:100%;margin:0 auto}
.ph figcaption{font:400 .84rem/1.45 var(--sans);color:var(--muted);margin-top:.5rem}
.cr{display:block}
.strip-fig{margin:1.6rem 0;max-width:36rem}
.strip-fig h3{margin-top:0}
.strip{width:100%;height:auto;display:block;background:var(--surface);border:1px solid var(--line-soft);border-radius:12px}
.strip .tick{stroke:var(--line);stroke-width:1}
.strip .axl{font:600 10px var(--sans);fill:var(--muted)}
.strip .rowl{font:700 11px var(--sans);fill:var(--ink2)}
.strip .palsl{font:700 10px var(--sans);fill:var(--mark)}
.strip .pp{fill:var(--accent);opacity:.62}.strip .pw{fill:var(--mark);opacity:.7}.strip .pw.big{opacity:1;stroke:var(--ink);stroke-width:1.2}
.strip-fig figcaption{font:400 .86rem/1.5 var(--sans);color:var(--muted);margin-top:.5rem}
.pickline{font-weight:700;color:var(--accent)}
.chain-out{font:600 1rem/1.5 var(--sans);color:var(--ink);min-height:3rem}
.limits{margin:0;padding-left:1.2rem;max-width:36rem}.limits li{margin:0 0 .8rem}
.src{margin:0 0 1rem;padding-left:1.3rem;max-width:36rem;font-size:.9rem;line-height:1.5}.src li{margin:0 0 .45rem}

.share-row{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin:2rem 0 0}
.share-label{font:700 .85rem var(--sans);color:var(--ink2);margin-right:.2rem}
.sh{width:40px;height:40px;display:inline-grid;place-items:center;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer;text-decoration:none}
.sh:hover,.sh:focus-visible{border-color:var(--accent);color:var(--accent)}
.sh[hidden]{display:none}
.copied{flex-basis:100%;margin:0!important;font:600 .85rem var(--sans);color:var(--ok);min-height:1.2rem}
@media (pointer:coarse){.sh{width:44px;height:44px}}
.foot{max-width:1600px;margin:0 auto;padding:2.4rem max(18px,3vw) 4rem;font:400 .88rem/1.6 var(--sans);color:var(--muted);border-top:1px solid var(--line-soft)}
.foot a{color:var(--ink2)}
.nf .col{max-width:40rem;margin:0 auto;padding-top:4rem}

/* ------------------------------------------------------------------ phone: map on top, text beneath */
@media (max-width:900px){
  .story{display:block}
  .stage-wrap{position:sticky;top:var(--bar);height:46svh;border-right:0;border-bottom:1px solid var(--line-soft)}
  .stage-ui{padding:8px}
  .legend{font-size:.72rem;padding:.3rem .55rem;gap:.15rem .6rem}
  .hint-pill{top:42%;font-size:.88rem}
  .obs{font-size:.74rem;padding:.3rem .55rem}
  .col{padding:1.4rem 18px 2.4rem}
  .col section{scroll-margin-top:calc(var(--bar) + 46svh + 8px)}
  .hero h1{font-size:1.75rem}
  .stage-cap{bottom:24px;font-size:.78rem}
}
@media (max-width:900px){
  .legend{max-width:calc(100% - 150px)}.lg.mites{display:none}
  .obs{position:absolute;right:8px;bottom:8px;width:46px;height:46px;border-radius:50%;padding:0;display:grid;place-items:center}
  .obs label{width:100%;height:100%;justify-content:center;margin:0}
  .obs input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
  .obs-ico{display:block}.obs-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .obs:has(input:checked){background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
  .obs-note{display:none!important}
  .regs{max-width:calc(100% - 64px)}
  .topnav{flex:1 1 auto;mask-image:linear-gradient(90deg,#000 80%,transparent);-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .spacer{display:none}
}
@media (max-width:900px) and (max-height:620px){.stage-wrap{height:40svh}.legend{display:none}}
@media (max-width:900px){.hero .hint{display:none}}

/* the dish beside the map on a wide screen: the verdict and the animation stay in view while the reader taps */
.mini{display:none;position:absolute;right:16px;bottom:16px;width:clamp(180px,30%,270px);aspect-ratio:1;pointer-events:none;transition:opacity .35s}
.mini.off{opacity:0}
.mini canvas{width:100%;height:100%;display:block;filter:drop-shadow(0 6px 18px rgba(0,0,0,.35))}
@media (min-width:901px){
  .mini{display:block}
  .dish-card[data-dish="a"] .dish-stage,.dish-card[data-dish="w"] .dish-stage{display:none}
  .regs{max-width:calc(100% - 300px)}
  .obs{max-width:calc(100% - 300px)}
}

/* social-card capture mode */
.card .topbar,.card .col,.card .foot,.card .stage-ui>*:not(.mini),.card .progress{display:none!important}
.card .story{display:block}.card .stage-wrap{position:static;height:100vh;border:0}
.card .mini{display:block!important;opacity:1!important;width:330px;right:30px;bottom:30px}
.card .site .num,.card #pals{display:none!important}
.card .mini.off{opacity:1}
.card #ants{opacity:1}

@media (max-width:900px){.chip{min-width:38px;min-height:38px;display:inline-grid;place-items:center;padding:0}.icon-btn{flex:none;width:40px;height:40px}.langs{flex:none}}
@media (max-width:520px){.topnav{display:none}.spacer{display:block;flex:1}.topbar{gap:.4rem}}

.progress.moving i{opacity:1}
.mini{bottom:104px}
@media (min-width:901px){.regs,.obs{max-width:calc(100% - 28px)}}
.mini.idle{opacity:.55}
.mini.idle canvas{filter:none}