:root{color-scheme:dark;--bg:#0d0e10;--panel:#141518;--line:#2a2a2d;--ink:#f4f0ea;--muted:#b2afb1;--brand-orange:#ff5a36;--route-coral:#ff8556;--route-focus:#ffbd9f}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.55 system-ui,sans-serif}a{color:inherit}button{font:inherit;cursor:pointer;color:inherit;background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:.55rem .8rem}a:focus-visible,button:focus-visible{outline:2px solid var(--brand-orange);outline-offset:4px}button[aria-pressed=true]{border-color:var(--brand-orange);color:var(--brand-orange)}button:hover,a:hover{color:var(--brand-orange)}header,main,footer{width:min(1120px,calc(100% - 112px));margin:auto}header,footer{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:18px 0}header{padding-block:14.5px}header img{display:block;object-fit:contain}nav{display:flex;align-items:center;gap:22px}nav a{text-decoration:none;font-size:.9rem}.lang{display:flex;gap:4px}.lang button{font-size:.72rem;padding:.26rem .44rem}.skip{position:fixed;top:-100px;left:8px;z-index:5;background:#161616;padding:12px}.skip:focus{top:8px}main{outline:none}section{margin:0 0 clamp(3rem,7vw,6rem)}.hero{padding-top:clamp(2.4rem,6vw,5.5rem);margin-bottom:2.4rem}.eyebrow,.label{text-transform:uppercase;letter-spacing:.13em;color:var(--muted);font-size:.73rem;font-weight:650}.eyebrow{color:var(--brand-orange)}h1,h2,p{margin:0}h1{font-size:clamp(2.65rem,7vw,6rem);letter-spacing:-.068em;line-height:.99;max-width:11ch;margin:.45em 0 .31em;font-weight:820}h2{font-size:clamp(1.55rem,3vw,2.5rem);line-height:1.12;letter-spacing:-.04em;margin-bottom:.6em}p{color:var(--muted);max-width:63ch}.lead{font-size:clamp(1.02rem,2vw,1.35rem)}.hero p+p{margin-top:.85rem}.rule{padding-top:1.3rem}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,155px),1fr));gap:1rem 1.6rem;margin:0 0 1.3rem}.metric strong{display:block;font-size:clamp(1.28rem,3vw,2.05rem);font-weight:780;line-height:1.15;letter-spacing:-.045em;font-variant-numeric:tabular-nums}.metric .label{display:block;margin-top:.35rem}.map{margin:0;background:radial-gradient(ellipse at center,#1b1b1e 0,#101114 78%);border:1px solid var(--line);position:relative}.map svg{display:block;width:100%;height:clamp(310px,62vw,620px)}.map figcaption{padding:.6rem 1rem;display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;justify-content:space-between;color:var(--muted);font-size:.75rem}.key::before{content:"";display:inline-block;width:17px;height:2px;background:var(--route-coral);vertical-align:middle;margin-right:.45rem}.boundary{fill:#1a1b1f;stroke:#626168;stroke-width:1;vector-effect:non-scaling-stroke}.base{stroke:#414147;fill:none;stroke-width:.65;vector-effect:non-scaling-stroke}.route{fill:none;stroke:var(--route-coral);stroke-width:1.35;opacity:.88;vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;filter:drop-shadow(0 0 2px #ff5a3650)}.route.dim{opacity:.11}.route.hot{stroke:var(--route-focus);stroke-width:2.7;opacity:1}.route.hide{visibility:hidden}.map a:hover .boundary,.map a:focus .boundary{stroke:var(--brand-orange);stroke-width:2}.map a:focus{outline:none}.fresh{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;padding:1rem 0;border-bottom:1px solid var(--line)}.fresh strong{display:block}.actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:.9rem 0}.actions output{font-size:.86rem;color:var(--brand-orange)}.runs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:8px}.runs button,.runs .run-info{text-align:left;padding:.8rem;border:1px solid var(--line);background:var(--panel);border-radius:4px}.runs small{display:block;color:var(--muted);margin-top:.2rem}.textlink{color:var(--brand-orange);text-underline-offset:.28em}.pager{display:flex;justify-content:space-between;gap:1rem}.pager a:last-child{margin-left:auto}.site-credit{justify-content:center;text-align:center;margin-top:48px;font-size:13px}.site-credit a{color:var(--ink);font-weight:700;text-decoration:none}.site-credit a:hover{color:var(--brand-orange)}.district-title h1{max-width:17ch;overflow-wrap:anywhere}.split{display:grid;grid-template-columns:1fr 1fr;gap:2rem}.muted{color:var(--muted);font-size:.85rem}.error{padding:3rem 0}
@media(max-width:960px){header,main,footer{width:calc(100% - 48px)}}
@media(max-width:550px){header,main,footer{width:calc(100% - 36px)}nav{gap:9px}nav a{font-size:.75rem}.fresh{grid-template-columns:1fr 1fr}.fresh>div:first-child{grid-column:1/-1}.split{grid-template-columns:1fr;gap:1.8rem}.map figcaption{padding:.55rem .7rem}.map svg{height:340px}.metrics{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:no-preference){.route.draw{animation:trace .58s linear both}@keyframes trace{from{stroke-dasharray:1;stroke-dashoffset:1}to{stroke-dasharray:1;stroke-dashoffset:0}}}
h1{letter-spacing:-.055em}
@media(max-width:380px){header{padding-block:18.5px}header img{width:88px;height:37px}nav{gap:7px}}
.map .hit{fill:transparent;cursor:pointer}
.home-map .map a:hover .hit,.home-map .map a.is-peek .hit,.home-map .map a:focus-visible .hit{fill:transparent;stroke:var(--route-focus);stroke-width:2;filter:drop-shadow(0 0 3px var(--brand-orange))}
.home-map .map[data-highlighted-district] .route:not(.is-district-highlighted){animation:none;opacity:.3;filter:none}
.map-tooltip{
 position:absolute;z-index:2;left:.75rem;top:.75rem;
 width:max-content;max-width:min(19rem,calc(100% - 1rem));
 background:#17181c;border:1px solid #323238;border-radius:10px;
 box-shadow:0 8px 24px #0006;padding:.7rem .85rem;
 pointer-events:none;line-height:1.4
}
.map-tooltip strong{display:block}
.map-tooltip strong{font-size:.98rem;letter-spacing:-.02em}
.map-tooltip-metrics{display:grid;gap:.25rem;margin-top:.25rem;font-size:.8rem;color:var(--muted)}
.map-tooltip-run{color:var(--route-coral);font-weight:700}
.map-tooltip.is-pinned{pointer-events:auto}
.map-tooltip-link:not([hidden]){
 display:flex;min-height:44px;align-items:center;margin-top:.4rem;
 color:var(--route-coral);
 font-size:.85rem;font-weight:700;text-underline-offset:.2em;text-decoration:none
}
.map-tooltip-link:is(:hover,:focus-visible){text-decoration:underline}
.home-hero,.district-title{padding-top:clamp(1.1rem,3vw,2.1rem);margin-bottom:1.1rem}
.home-hero h1,.district-title h1{max-width:none;font-size:clamp(2rem,5vw,4.35rem);margin:.2em 0 0}
.home-map .map{background:radial-gradient(ellipse at 50% 53%,#1a1a1e 0,#101114 72%)}
.home-map .map svg{height:calc(clamp(305px,60svh,670px) + 31px)}
@media(max-width:550px){.home-hero,.district-title{margin-bottom:.85rem}.home-map .map svg{height:calc(clamp(280px,53svh,490px) + 31px)}}
.home-map figcaption{position:absolute;top:100%;right:0;max-width:100%;justify-content:flex-end;text-align:right;padding:.3rem 0 0;font-size:.7rem}
.home-map{margin-bottom:2rem;padding-bottom:2rem}
.home-map .base{opacity:.8}
.home-map .route{stroke-width:1.5;filter:drop-shadow(0 0 3px #ff5a3670)}
@media(prefers-reduced-motion:no-preference){.map-reveal .route{animation:city-reveal .85s ease-out both}@keyframes city-reveal{from{opacity:0}to{opacity:.88}}}
@media(max-width:550px){.home-map{padding-bottom:2.6rem}}
.home-subtitle{font-size:clamp(.95rem,1.65vw,1.15rem)}
.home-article{max-width:68ch;margin:0 auto 2rem;padding-top:0}
.home-article p{max-width:none;line-height:1.65}
.home-article p+p{margin-top:1em}
.home-article p a{text-underline-offset:.23em}
.home-coverage{margin-top:.3rem;font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.home-context{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.35rem 1.5rem;margin-top:.55rem}
.site-credit .credit-heart{color:var(--brand-orange)}

.city-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"streets distance" "network progress";gap:.65rem;margin:0;padding:0 .75rem .75rem;font-variant-numeric:tabular-nums;pointer-events:none}
.city-stats>div{display:flex;flex-direction:column}
.city-stats dt{color:var(--muted);font-size:.72rem;line-height:1.25}
.city-stats dd{order:-1;margin:0 0 .2rem;font-size:clamp(1.15rem,2.4vw,1.75rem);font-weight:750;line-height:1.1}
.city-stats dd span{font-size:.65em;font-weight:500}
.city-streets-block{grid-area:streets}
.city-network-block{grid-area:network}
.city-distance-block{grid-area:distance;text-align:right}
.city-progress-block{grid-area:progress;text-align:right}
.city-stats:has(.city-current-block){grid-template-areas:"streets current" "network distance" ". progress"}
.city-current-block{grid-area:current;text-align:right}
.city-stats .city-current-block dd{font-size:clamp(.9rem,1.7vw,1.2rem)}
.city-stats .city-progress{color:var(--brand-orange)}
@media(min-width:900px){
.city-stats{position:absolute;inset:clamp(1.15rem,3vw,2rem) clamp(1.15rem,3vw,2rem) auto;grid-template-columns:max-content max-content;justify-content:space-between;row-gap:1rem;padding:0}
}
.home-map .boundary-done{fill:#ff5a3619;stroke:var(--brand-orange);stroke-width:1.5}

.district-map,.district-title ~ section{margin-bottom:clamp(1.5rem,3.5vw,2.5rem)}
.district-map .map{border:0;background:none}
.district-map .map svg{border:1px solid var(--line);background:radial-gradient(ellipse at 50% 53%,#1a1a1e 0,#101114 72%)}
.district-map figcaption{justify-content:flex-end;text-align:right;padding:.3rem 0 0;font-size:.7rem}

.runs button,.runs .run-info{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.run-copy{min-width:0}
.runs small span{white-space:nowrap}
.run-preview{width:clamp(3rem,7vw,4.5rem);height:auto;flex:none}
.run-preview path{fill:none;stroke:#79767a;stroke-width:1.1;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}

@media(hover:hover){.runs button:not([aria-pressed=true]):hover .run-preview path{stroke:var(--route-coral)}}
.runs button:not([aria-pressed=true]):focus-visible .run-preview path{stroke:var(--route-coral)}
.runs button[aria-pressed=true] .run-preview path{stroke:#ffa17c}

/* Keep the map at full width; give the information beneath it its own measure. */
.district-map .actions,.district-map .runs,.district-stats{max-width:60rem;margin-inline:auto}
.district-map .runs :is(button,.run-info){padding:.65rem .7rem;border-color:color-mix(in srgb,var(--line) 65%,var(--panel))}
.district-map .runs button[aria-pressed=true]{border-color:var(--brand-orange)}

.district-stats{
 --stat-inset:clamp(1rem,3.2vw,2rem);
 --stat-line:#343236;
 --stat-columns:minmax(0,.9fr) minmax(0,1.1fr);
 border-block:1px solid var(--stat-line);
 background:#141416;
 font-variant-numeric:tabular-nums;
}
.stat-intro,.stat-body{display:grid;grid-template-columns:var(--stat-columns)}
.stat-intro{
 position:relative;isolation:isolate;align-items:center;
 gap:clamp(1rem,3vw,2.5rem);padding:var(--stat-inset);
 background:linear-gradient(115deg,#211a19,#161619 70%);
 border-top:2px solid var(--route-coral);
}
.stat-intro::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
 background:url("eixample-texture.svg") left 36% / min(100%,36rem) auto no-repeat;
 mask-image:linear-gradient(100deg,#000,transparent 67%);
 opacity:.62;
}
.stat-intro h2{max-width:15ch;margin:0;font-size:clamp(1.95rem,4.4vw,3.45rem);line-height:1;letter-spacing:-.058em;text-wrap:balance}
.stat-intro p{margin-top:.7rem;max-width:35ch;font-size:.88rem;line-height:1.45}
.stat-chart dl,.stat-facts{margin:0}
.stat-chart dl{display:grid;gap:.75rem}
.stat-distance{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:.28rem .5rem}
.stat-distance dt{font-size:.82rem;color:var(--muted)}
.stat-distance dd{display:contents}
.stat-distance strong{font-size:clamp(1.4rem,3.1vw,2.25rem);line-height:1.1;letter-spacing:-.045em;white-space:nowrap}
.stat-distance strong span{font-size:.52em;letter-spacing:0;font-weight:650}
.stat-distance--run strong{color:var(--route-coral)}
.stat-track{grid-column:1/-1;background:#ffffff10;height:5px}
.stat-track i{display:block;height:100%;background:#aaa6a3}
.stat-distance--run .stat-track i{background:var(--route-coral)}
.stat-axis{display:grid;grid-template-columns:repeat(3,1fr);margin-top:.25rem;font-size:.67rem;color:var(--muted)}
.stat-axis span:nth-child(2){text-align:center}
.stat-axis span:last-child{text-align:right}
.stat-group{min-width:0;padding:1.05rem var(--stat-inset) 1.15rem;border-top:1px solid var(--stat-line)}
.stat-group+.stat-group{border-inline-start:1px solid var(--stat-line)}
.stat-group h3{margin:0 0 .7rem;font-size:.93rem;font-weight:700}
.stat-facts{display:grid;grid-template-columns:repeat(4,minmax(0,auto));gap:.6rem 1rem;justify-content:space-between}
.stat-facts>div{display:flex;flex-direction:column;min-width:0}
.stat-facts dt{color:var(--muted);font-size:.73rem;line-height:1.3}
.stat-facts dd{order:-1;margin:0 0 .18rem;font-size:clamp(1rem,2vw,1.37rem);line-height:1.15;font-weight:700;letter-spacing:-.035em}
.district-neighborhoods,.stat-period{margin-top:.7rem;font-size:.76rem;line-height:1.45}
.stat-period time{white-space:nowrap}
.stat-averages{grid-template-columns:repeat(3,minmax(0,1fr));gap:.65rem 1rem;padding:.8rem var(--stat-inset);border-top:1px solid var(--stat-line);background:#19191b}
.stat-averages dd{font-size:1rem;letter-spacing:0}
.district-stats--single{--stat-columns:minmax(0,1fr);max-width:36rem}
@media(max-width:800px){.stat-group .stat-facts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .district-stats{--stat-columns:minmax(0,1fr)}
 .stat-group+.stat-group{border-inline-start:0}
}
@media(max-width:400px){.stat-averages{grid-template-columns:repeat(2,minmax(0,1fr))}}

.replay-hud:not([hidden]){display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.15rem .45rem;padding:.35rem .55rem;background:#101114e8;border-radius:4px;font-size:.8rem;font-variant-numeric:tabular-nums;pointer-events:none}
.replay-hud i{width:.45rem;height:.45rem;border-radius:50%;background:var(--replay-color)}
.replay-hud time{color:var(--muted)}
.replay-hud strong{grid-column:2;color:#ddd8d2;font-size:clamp(1rem,2vw,1.3rem);font-weight:550;line-height:1.2}
.replay-hud time{grid-area:1/1}
.replay-hud i{grid-area:1/2;justify-self:end}
.replay-hud strong{grid-area:2/1/3/3}

.pager a{text-decoration:none}

/* Keep the texture near the header and footer on every page. */
body{isolation:isolate}
body > header,.site-credit{position:relative}
body > header::before,.site-credit::before{
  content:"";position:absolute;z-index:-1;pointer-events:none;
  background:url("eixample-texture.svg") right top / cover no-repeat;
}
body > header::before{
  inset:0 clamp(-2rem,-2.5vw,-.75rem) auto auto;
  width:min(59%,36rem);height:clamp(8rem,18vw,13rem);opacity:.67;
  mask-image:radial-gradient(ellipse 69% 100% at 96% 0%,#000 8%,#0009 32%,transparent 77%);
}
.site-credit::before{
  inset:auto auto 0 0;width:min(82%,52rem);
  height:clamp(11rem,32vw,21rem);opacity:.46;transform:rotate(180deg);
  mask-image:radial-gradient(ellipse 92% 105% at 89% 0%,#000 8%,#0009 36%,transparent 81%);
}
@media(max-width:550px){
  body > header::before{width:71%;height:8rem;opacity:.43}
  .site-credit::before{width:94%;height:11.5rem;opacity:.32}
}

/* Replay spotlights the current run without changing the overview map. */
/* Keep the real street grid readable, with quieter context beyond the district. */
.map.is-replay{background:#0b0b0c}
.map.is-replay .route{
 --replay-light:0;
 stroke:currentColor;
 stroke:color-mix(in srgb,currentColor,white calc(28% * var(--replay-light)));
 stroke-width:calc(1px + .25px * var(--replay-light));
 opacity:calc(.72 + .28 * var(--replay-light));
 filter:drop-shadow(0 0 2px currentColor)
        drop-shadow(0 0 3px color-mix(in srgb,transparent,currentColor calc(100% * var(--replay-light))));
}
.replay-runner-rim{fill:currentColor;filter:drop-shadow(0 0 2px currentColor)}
.replay-runner-core{fill:#fff}
.map.is-replay .replay-hud{background:#0b0b0ce8}
.map.is-replay .replay-hud i{box-shadow:0 0 6px var(--replay-color)}

.district-map-canvas{position:relative}
.district-map-stats{
  position:absolute;top:clamp(.7rem,2.8vw,2rem);left:clamp(.7rem,2.8vw,2rem);
  display:grid;gap:.65rem;margin:0;pointer-events:none;font-variant-numeric:tabular-nums;
}
.district-map-stats>div{display:flex;flex-direction:column}
.district-map-stats dt{color:var(--muted);font-size:.72rem;line-height:1.25}
.district-map-stats dd{order:-1;margin:0 0 .2rem;font-size:clamp(1.05rem,2.4vw,1.75rem);font-weight:750;line-height:1.1}
.district-map-stats dd span{font-size:.65em;font-weight:500}
.map-player{
  position:absolute;bottom:clamp(.7rem,2.8vw,2rem);left:clamp(.7rem,2.8vw,2rem);
  display:grid;justify-items:start;gap:.4rem;
}
.map-replay-controls{display:flex;gap:.35rem}
.map-replay-controls [data-action=play]{
  display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;
  border-color:var(--brand-orange);
}
.playback-icon{
  display:block;width:.85rem;height:.9rem;background:currentColor;
  clip-path:polygon(14% 0,100% 50%,14% 100%);
}
.is-playing .playback-icon{
  clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0);
}
@media(max-width:550px){
  .district-map-stats{grid-auto-flow:column;gap:.75rem}
  .map-replay-controls button{font-size:.8rem}
}

/* The district and its surroundings share the same street geometry. */
.district-map .map svg{background:#0b0b0c}
.district-map .map .boundary{
 fill:#101113;stroke:#292a2d;stroke-width:.55
}
.district-map .map .base{stroke:#383a40;stroke-width:.68;opacity:.85}
.district-street-context{
 fill:none;stroke:#b9bdc4;stroke-width:.55;
 opacity:.13;pointer-events:none
}
#city-streets{vector-effect:non-scaling-stroke}

/* The replay stays vector-based and keeps its controls when expanded. */
.map-replay-controls [data-action=reset]:not([hidden]),
.map-replay-controls [data-action=fullscreen]:not([hidden]){
 display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0
}
.map-replay-controls [data-action=reset] span{font-size:1.6rem;line-height:1}
.fullscreen-icon{
 width:1rem;height:1rem;background:currentColor;
 mask:
  linear-gradient(#000 0 0) top left/.36rem 2px,
  linear-gradient(#000 0 0) top left/2px .36rem,
  linear-gradient(#000 0 0) top right/.36rem 2px,
  linear-gradient(#000 0 0) top right/2px .36rem,
  linear-gradient(#000 0 0) bottom left/.36rem 2px,
  linear-gradient(#000 0 0) bottom left/2px .36rem,
  linear-gradient(#000 0 0) bottom right/.36rem 2px,
  linear-gradient(#000 0 0) bottom right/2px .36rem;
 mask-repeat:no-repeat
}
.is-expanded .fullscreen-icon{
 mask:none;background:none;position:relative;width:1.1rem;height:1.1rem
}
.is-expanded .fullscreen-icon::before,.is-expanded .fullscreen-icon::after{
 content:"";position:absolute;top:50%;left:8%;width:84%;height:2px;background:currentColor;
 transform:translateY(-50%) rotate(45deg)
}
.is-expanded .fullscreen-icon::after{transform:translateY(-50%) rotate(-45deg)}
.replay-fullscreen{
 position:fixed;inset:0;margin:0;padding:0;border:0;
 width:100%;height:100%;max-width:none;max-height:none;
 background:#0b0b0c;color:inherit;overflow:hidden
}
html:has(.replay-fullscreen[open]){overflow:hidden}
.district-map-canvas.is-expanded{width:100%;height:100%;background:#0b0b0c}
.district-map .map .is-expanded>svg{width:100%;height:100%;border:0}
.is-expanded .district-map-stats{
 top:max(clamp(.7rem,2.8vw,2rem),env(safe-area-inset-top));
 left:max(clamp(.7rem,2.8vw,2rem),env(safe-area-inset-left))
}
.is-expanded .map-player{
 bottom:max(clamp(.7rem,2.8vw,2rem),env(safe-area-inset-bottom));
 left:max(clamp(.7rem,2.8vw,2rem),env(safe-area-inset-left))
}

.map-replay-controls [data-action=fullscreen]:is(:hover,:active,:focus){
 color:inherit;outline:none;-webkit-tap-highlight-color:transparent
}

/* District directory: calm cards, one accent for the district in progress. */
.district-index{display:block;margin:clamp(2.75rem,6vw,5rem) 0}
.district-index h2{font-size:clamp(1.45rem,3vw,2.1rem);margin-bottom:1rem}
.district-index ul{display:grid;grid-template-columns:1fr;grid-auto-rows:1fr;gap:.65rem;list-style:none;margin:0;padding:0}
.district-index a{display:flex;align-items:center;justify-content:space-between;gap:.65rem;height:100%;min-height:74px;padding:.65rem .75rem;border:1px solid var(--line);border-radius:.65rem;background:#ffffff03;text-decoration:none}
.district-index a:has(.district-status--active){border-color:#ff85566b;background:#ff85560a}
.district-index a:is(:hover,:focus-visible){border-color:var(--brand-orange);color:var(--ink)}
.district-index-name{display:flex;align-items:center;gap:.7rem;min-width:0}
.district-index strong{font-size:clamp(.9rem,1.45vw,1.08rem);line-height:1.2;overflow-wrap:anywhere}
.district-silhouette{width:2.6rem;height:2.6rem;flex:0 0 2.6rem;padding:.25rem;color:#b2afb1;background:#ffffff07;border-radius:.45rem}
.district-silhouette path{fill:currentColor;fill-opacity:.16;stroke:currentColor;stroke-width:1.15;stroke-linejoin:round}
.district-index a:is(:hover,:focus-visible):has(.district-status--done) .district-silhouette{color:#9fe0be}
.district-index a:has(.district-status--active) .district-silhouette{color:var(--route-focus);background:#ff855616}
.district-index-meta{display:grid;justify-items:end;gap:.2rem;flex:none}
.district-status{display:inline-flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.69rem;line-height:1.15;white-space:nowrap}
.district-status::before{content:"";width:.34rem;height:.34rem;border:1px solid currentColor;border-radius:50%}
.district-status--done::before{color:#9fe0be;background:currentColor}
.district-status--active,.district-percent--active{color:var(--route-focus)}
.district-status--active::before{background:currentColor}
.district-percent{color:var(--muted);font-size:.78rem;font-weight:650;line-height:1;font-variant-numeric:tabular-nums}
.district-percent--active{color:var(--route-focus)}
@media(min-width:760px){
 .district-index ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.25rem}
 .district-index a{min-height:84px;padding:.8rem 1rem}
 .district-index-name{gap:.9rem}
 .district-silhouette{width:2.9rem;height:2.9rem;flex-basis:2.9rem}
 .district-status{font-size:.75rem}
}
.district-status--done,.district-status--active{padding:.2rem .45rem;border-radius:999px}
.district-status--done{background:#9fe0be12}
.district-status--active{background:#ff85561a}
.district-index a:has(.district-status--done){background:#9fe0be09;border-color:#9fe0be32}
.district-status--done{background:transparent}
.district-index a:has(.district-status--done):is(:hover,:focus-visible){border-color:#9fe0be9e}
.district-index{max-width:68ch;margin-inline:auto}
@media(min-width:620px) and (max-width:759px){
 .district-index ul{grid-template-columns:repeat(2,minmax(0,1fr))}
}