/* © 2026 Willy Tai. All rights reserved. Not licensed for reuse. */
/* Smart City Twin · layout. */
@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,400&display=swap');
.ct{--c-page:#FAF8F5;--c-panel:#FAF8F5;--c-text:#33302B;--c-muted:#6E6760;--c-hair:#E4DCCE;--c-watch:#96691A;--c-alarm:#6E2532;--c-badge-t:#FAF8F5;--c-teal:#1C8C8E;--c-ground:#EAE1CE;--c-sel:#1A1A1A;--c-active:#33302B;--c-active-t:#FAF8F5;--c-scene:#FAF8F5}
.ct{--s-panel:rgba(250,248,245,.95);--s-solid:#FAF8F5;--s-line:rgba(26,26,26,.1);--s-soft:rgba(26,26,26,.04);--c-btn:rgba(26,26,26,.06);--s-sh:0 14px 36px rgba(51,48,43,.16);--c-brass:#96691A;--c-ok:#1F7A4F;--c-obs:#B45309;--c-exc:#B23A2B;--c-alarm:#B23A2B;font-variant-numeric:tabular-nums}
[data-theme=dark] .ct,.ct[data-theme=dark]{--s-panel:rgba(36,33,30,.95);--s-solid:#24211E;--s-line:rgba(239,233,223,.09);--s-soft:rgba(239,233,223,.04);--c-btn:rgba(239,233,223,.07);--s-sh:0 18px 44px rgba(0,0,0,.38);--c-brass:#C9A868;--c-ok:#6FBF83;--c-obs:#F29A55;--c-exc:#E06A54}
[data-theme=dark] .ct,.ct[data-theme=dark]{--c-page:#22201D;--c-panel:#2C2925;--c-text:#EFE9DF;--c-muted:#9E958A;--c-hair:#37342E;--c-watch:#C9A868;--c-alarm:#E06A54;--c-badge-t:#22201D;--c-teal:#2E9FA1;--c-ground:#262320;--c-sel:#EFE9DF;--c-active:#EFE9DF;--c-active-t:#22201D;--c-scene:#2C2925}
main.head{padding-top:26px;padding-bottom:18px}main.head .lede{max-width:760px;margin-bottom:0}main.head .lede a{color:inherit;text-decoration:underline;text-underline-offset:3px}main.tail{padding:18px 40px 8px}
.stage{position:relative;width:100vw;margin-left:calc(50% - 50vw);height:clamp(600px,calc(100vh - 64px),900px);background:var(--c-scene);overflow:hidden;border-top:1px solid var(--c-hair);border-bottom:1px solid var(--c-hair);color:var(--c-text);font-family:var(--sans)}
[data-embed] .stage{height:100vh;width:100%;margin:0;border:0}[data-embed] main.tail{display:none}
[data-scrub] .rail,[data-scrub] .rp{display:none!important}
#scene{position:absolute;inset:0;touch-action:none}#scene canvas{display:block;outline:0}
.ct[data-lock]>:not(.poster):not(.lockmsg){display:none!important}.lockmsg{position:absolute;z-index:2;left:16px;top:16px;margin:0;padding:8px 14px;background:var(--s-panel);color:var(--c-text);border:1px solid var(--s-line);border-radius:12px;font:13px/1.4 var(--sans)}
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transition:opacity .6s;pointer-events:none;z-index:1}.poster.gone{opacity:0}
[data-theme=dark] .poster{filter:invert(.86) hue-rotate(180deg)}
/* first-visit loader */
.ld{position:absolute;inset:0;z-index:20;background:var(--c-scene);color:var(--c-muted);transition:opacity .4s}.ld.out{opacity:0;pointer-events:none}.ld svg{position:absolute;inset:0;width:100%;height:100%}
.ld svg *{fill:none;stroke:currentColor;stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;animation:ink 1.2s ease-out forwards}@keyframes ink{to{stroke-dashoffset:0}}
.ld p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin:0;padding:10px 18px 12px;background:var(--s-panel);border:1px solid var(--s-line);border-radius:999px;font:500 13px/1.4 var(--sans);color:var(--c-text);white-space:nowrap;overflow:hidden}.ld i{position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--c-teal);transform:scaleX(var(--p,0));transform-origin:0 0;transition:transform .3s}
.ct button{font:600 13px/1 var(--sans);letter-spacing:0;color:var(--c-text);background:var(--c-btn);border:1px solid transparent;border-radius:999px;padding:8px 14px;min-height:34px;cursor:pointer}
.ct button:hover{border-color:var(--s-line)}.ct button.on,.ct button[aria-checked=true],.ct button[aria-pressed=true]{background:var(--c-active);color:var(--c-active-t);border-color:var(--c-active)}
.ct button:disabled{opacity:.45;cursor:default}
.panel{position:absolute;z-index:3;background:var(--s-panel);border:1px solid var(--s-line);font-size:13px;line-height:1.45;overflow:auto;overscroll-behavior:contain;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.ct [hidden]{display:none!important}
.mono{font-family:var(--mono)}
.rail{position:absolute;z-index:4;left:20px;right:20px;top:20px;display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
.pill{display:flex;align-items:center;gap:12px;min-width:0;padding:6px 16px 6px 6px;background:var(--s-panel);border:1px solid var(--s-line);border-radius:999px;box-shadow:var(--s-sh);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);pointer-events:auto}
.pill+.pill{flex:none;gap:2px;padding:4px}
.wtm{flex:none;width:36px;height:36px;border-radius:50%;background:var(--c-brass);color:#1B1917;font:500 12px/36px var(--mono);text-align:center}
.ct .ib{flex:none;width:36px;height:36px;min-height:36px;padding:0;border:0;border-radius:50%;background:none;color:var(--c-muted);display:inline-flex;align-items:center;justify-content:center}
.ct .ib:hover{background:var(--c-btn);color:var(--c-text)}
.ib svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.crumb{display:flex;gap:8px;align-items:center;font:500 14px var(--sans);white-space:nowrap;min-width:0;overflow:hidden}.crumb button{border:0;background:none;padding:4px 2px;font:500 14px var(--sans);min-height:28px;color:var(--c-muted)}
.crumb button:hover{color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.crumb button{min-width:0;overflow:hidden;text-overflow:ellipsis}.crumb [aria-current]{font-weight:600;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;max-width:100%}.crumb i{color:var(--c-muted);font-style:normal}.ct .syn{flex:none;font:600 11px var(--sans);letter-spacing:.04em;padding:4px 9px;border:0;border-radius:999px;background:color-mix(in srgb,var(--c-brass) 16%,transparent);color:color-mix(in srgb,var(--c-brass) 70%,var(--c-text))}.rp{left:20px;top:84px;width:372px;bottom:20px;padding:0;display:flex;flex-direction:column;border-radius:16px;box-shadow:var(--s-sh)}
.lh{font:500 12px var(--sans);color:var(--c-muted);padding-bottom:6px;border-bottom:1px solid var(--s-line)}.ev{font:500 12px var(--sans);padding:8px 0;display:flex;flex-wrap:wrap;gap:6px}.ev button{min-height:28px;padding:4px 10px}
.agg{font:13px/1.45 'Source Serif 4',Georgia,serif;color:var(--c-muted);margin:4px 0 8px}
.list summary{cursor:pointer}.list .grp,.ucf .grp{font:600 12px var(--sans);color:var(--c-muted);margin:14px 0 4px}
.list .row,.ucf .row{display:grid;grid-template-columns:14px 1fr auto;gap:6px;align-items:center;width:100%;text-align:left;border:0;border-bottom:1px solid var(--c-hair);background:none;font-weight:500;font-size:12.5px;padding:7px 2px;min-height:36px;letter-spacing:0}
/* parts that teach: a sentence underlines while its part is hovered */
.pn{display:inline;min-height:0!important;padding:0 1px!important;border:0;background:none;font:600 1.05em/1 var(--sans);color:var(--c-text);cursor:pointer;text-decoration:underline;text-underline-offset:2px}.pn:hover,.pn:focus-visible{background:color-mix(in srgb,var(--c-text) 10%,transparent)}
.sn.lit{text-decoration:underline;text-decoration-color:var(--c-text);text-decoration-thickness:2px;text-underline-offset:3px}.ball.sel{background:var(--c-brass)!important;color:#1B1917!important;outline:2px solid var(--c-brass);outline-offset:3px}
.eggtip.tipx small{display:block;margin-top:3px;font:500 11px var(--sans);color:var(--c-muted)}.eggtip.tipx{position:fixed;white-space:normal;max-width:min(280px,calc(100vw - 8px));z-index:1100;box-shadow:0 2px 8px color-mix(in srgb,var(--c-text) 18%,transparent)}
.partbar{position:absolute;z-index:7;left:12px;right:12px;top:64px;background:var(--s-panel);border:1px solid var(--s-line);border-radius:16px;box-shadow:var(--s-sh);padding:10px 12px;font-size:13px}.partbar p{margin:0 0 6px}.partbar .acts{margin:0}.partbar button{min-height:40px}
.pcard{margin-top:14px;border-top:1px solid var(--s-line);padding-top:10px}.pcard .pid{display:inline}.card .acts{flex-wrap:wrap}.ball.sel{z-index:2}.pcard h4{margin:0 0 4px}.pcard p{margin:0 0 4px;font-size:13px}.pcard .acts{margin-top:8px}
.ucf .row:hover,.list .row:hover,.list .row.sel{background:color-mix(in srgb,var(--c-text) 6%,transparent)}.list .row small{font:400 11px var(--sans);color:var(--c-muted)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--c-text);display:inline-block}.dot.stale{background:var(--c-watch);box-shadow:0 0 0 2px var(--c-panel),0 0 0 3px var(--c-text)}.dot.missing{background:none;border:1.5px dashed var(--c-text)}.dot.none{background:none;border:1px solid var(--c-muted)}
.badge{font:600 10px var(--sans);letter-spacing:.06em;padding:3px 8px;border-radius:999px;white-space:nowrap}.badge.watch{background:color-mix(in srgb,var(--c-obs) 16%,transparent);color:color-mix(in srgb,var(--c-obs) 70%,var(--c-text))}.badge.alarm{background:color-mix(in srgb,var(--c-exc) 16%,transparent);color:color-mix(in srgb,var(--c-exc) 70%,var(--c-text))}
.badge.del{background:var(--c-btn);box-shadow:inset 0 0 0 1px var(--c-text)}.badge.exp{border:1px dashed var(--c-muted);color:var(--c-muted)}
.card{padding:16px 22px}.card .k{font:600 12px var(--sans);letter-spacing:.02em;color:var(--c-muted)}.card h2{font:700 20px/1.22 var(--sans);margin:6px 0 10px;letter-spacing:-.01em}.card h2:focus-visible{outline:2px solid var(--c-text);outline-offset:3px}
.card dl{display:grid;grid-template-columns:92px 1fr;gap:6px 12px;margin:0 0 12px;font-size:13px}.card dt{font:600 12px var(--sans);color:var(--c-muted);padding-top:1px}.card dd{margin:0}
.card .st{cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;border:0;background:none;padding:0;min-height:24px;font:inherit;letter-spacing:0;text-align:left;color:inherit}.card .line{font-size:12px;color:var(--c-muted);margin:4px 0 0;display:none}.card .st:hover+.line,.card .st:focus+.line,.card .line.open{display:block}
.read{border-top:1px solid var(--s-line);border-bottom:1px solid var(--s-line);padding:8px 0;margin:8px 0}.read .r{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:12.5px;align-items:baseline}.read .r b{font:700 16px var(--sans)}.prov{font:11px var(--sans);color:var(--c-muted);grid-column:1/-1}
.card p.s{font:400 15px/1.5 'Source Serif 4',Georgia,serif;margin:10px 0}.card details{font-size:12px;margin:8px 0}.card summary{cursor:pointer;font-weight:600}
.fact{border-left:2px solid var(--c-muted);padding:8px 12px;font-size:12.5px;margin:10px 0;background:var(--s-soft);border-radius:0 10px 10px 0}.fact a{font-size:11.5px}
.acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}.acts .pri,.rnav .pri{background:var(--c-active);color:var(--c-active-t);border-color:var(--c-active)}

.trace ol{padding-left:18px;margin:6px 0;font-size:12px}.trace li button{border:0;background:none;padding:2px 0;min-height:24px;text-align:left;font-weight:500;text-decoration:underline;text-underline-offset:2px}.trace .tier{font:600 10px var(--sans);color:var(--c-muted);margin-right:4px}
.bottom{position:absolute;z-index:3;left:412px;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;pointer-events:none}.bottom>*{pointer-events:auto}
.honesty{align-self:flex-start;margin:0;font:11px/1.4 var(--sans);color:var(--c-muted);background:var(--s-panel);border-radius:999px;padding:4px 12px;pointer-events:none}
.kpis{display:flex;flex-direction:column;padding:4px 10px;border-radius:14px;background:var(--s-panel);border:1px solid var(--s-line);box-shadow:var(--s-sh);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.orow{display:grid;grid-template-columns:minmax(150px,1.2fr) 6fr;align-items:center;gap:10px;padding:2px 0}.orow+.orow{border-top:1px solid var(--s-line)}.orow .of{display:flex;flex-direction:column;gap:2px;min-width:0}
.ct .orow .ob{display:grid;grid-template-columns:1.3fr .9fr 1.3fr 72px 1.9fr;align-items:center;gap:12px;text-align:left;padding:6px 8px;min-height:44px;border:0;border-radius:10px;background:none;font:500 13px var(--sans);color:var(--c-text)}.ct .orow .ob:hover{background:var(--s-soft)}
.ct .orow .od{border:0;background:none;padding:2px 0;min-height:0;text-align:left;font:500 12px var(--sans);color:var(--c-muted);text-decoration:underline;text-underline-offset:3px}.orow .od b{color:var(--c-text)}
.orow .l{font:600 13px var(--sans)}.orow .l small{display:block;font:500 12px var(--sans);color:var(--c-muted)}.orow .ow{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;margin-right:5px;border-radius:50%;font:700 9px var(--sans);font-style:normal;vertical-align:1px;background:color-mix(in srgb,var(--c-obs) 16%,transparent);color:color-mix(in srgb,var(--c-obs) 70%,var(--c-text))}
.ohd{display:grid;grid-template-columns:minmax(150px,1.2fr) 6fr;gap:10px;padding:6px 0 2px;font:600 11px var(--sans);color:var(--c-muted)}.ohd>div{display:grid;grid-template-columns:1.3fr .9fr 1.3fr 72px 1.9fr;gap:12px;padding:0 8px}.legend .lk{white-space:nowrap}.mrec .mst{color:var(--c-muted)}.orow .v{font:700 17px var(--sans);white-space:nowrap}.orow .v small{font:500 12px var(--sans);color:var(--c-muted)}.orow .badge{justify-self:start}.orow .opv{font:12px/1.3 var(--sans);color:var(--c-muted)}
.spk{width:100%;height:20px}.spk polyline{fill:none;stroke:var(--c-text);stroke-width:1.3;vector-effect:non-scaling-stroke}.spk line{stroke:var(--c-muted);stroke-dasharray:2 2;vector-effect:non-scaling-stroke}.orow .lit{outline:2px solid var(--c-brass);outline-offset:-2px}


.levels{position:absolute;z-index:4;left:412px;bottom:96px;display:flex;flex-direction:column;gap:4px}.ct .levels button{width:78px;height:30px;min-height:30px;padding:0 12px;font-size:12px;text-align:left;background:var(--s-panel);border-color:var(--s-line);box-shadow:var(--s-sh)}
.legend{position:absolute;z-index:4;left:412px;bottom:140px;font:500 11.5px var(--sans);background:var(--s-panel);border:1px solid var(--s-line);border-radius:999px;padding:7px 14px;box-shadow:var(--s-sh)}.legend i{display:inline-block;width:14px;height:10px;margin:0 3px 0 8px;vertical-align:middle;border:1px solid var(--c-hair)}
.chipmsg{position:absolute;z-index:6;left:50%;bottom:150px;transform:translateX(-50%);font:600 13px var(--sans);background:var(--c-text);color:var(--c-page);padding:9px 16px;border-radius:999px;box-shadow:var(--s-sh);pointer-events:auto}.chipmsg button{margin-left:8px;min-height:26px;padding:4px 8px}
.pins{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
/* pins: context ones haloed, watch and selected boxed; stems end in a 3 px ink dot */
.pin{position:absolute;left:0;top:0;pointer-events:auto;font:600 12.5px/1.2 var(--sans)!important;padding:5px 12px!important;min-height:0!important;white-space:nowrap;text-align:left;border:1px solid var(--s-line)!important;background:var(--s-panel)!important;color:var(--c-text)!important;box-shadow:0 6px 16px rgba(0,0,0,.16);will-change:transform;
 text-shadow:1px 0 0 var(--c-scene),-1px 0 0 var(--c-scene),0 1px 0 var(--c-scene),0 -1px 0 var(--c-scene),1px 1px 0 var(--c-scene),-1px -1px 0 var(--c-scene),1px -1px 0 var(--c-scene),-1px 1px 0 var(--c-scene)}
.pin::after{content:"";position:absolute;left:calc(50% + var(--sx,0px));top:100%;width:1.2px;height:13px;background:var(--c-text)}.pin i.d{position:absolute;left:calc(50% - 3px + var(--sx,0px));top:calc(100% + 11px);width:6px;height:6px;border-radius:50%;background:var(--c-text)}
.pin.sel{box-shadow:0 0 0 2px var(--c-brass),0 6px 16px rgba(0,0,0,.16)}
.pin:has(small){border-radius:12px}.pin.watch{border-color:var(--c-brass)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brass) 30%,transparent)}
.pin.dn::after{top:auto;bottom:100%}.pin.dn i.d{top:auto;bottom:calc(100% + 11px)}.pin.alarm{border-color:var(--c-exc)!important}
.elabel{position:absolute;left:0;top:0;pointer-events:auto;font:600 13px var(--sans)!important;letter-spacing:0!important;background:none!important;border:0!important;color:var(--c-text)!important;text-shadow:0 0 3px var(--c-scene),0 0 6px var(--c-scene),0 0 10px var(--c-scene);padding:2px 4px!important;min-height:0!important}
.elabel small{display:block;max-width:30ch;white-space:normal;font:500 11px/1.3 var(--sans);color:var(--c-text);text-transform:none;text-shadow:1px 0 0 var(--c-scene),-1px 0 0 var(--c-scene),0 1px 0 var(--c-scene),0 -1px 0 var(--c-scene),1px 1px 0 var(--c-scene),-1px -1px 0 var(--c-scene)}.lh:empty,.agg:empty,.ev:empty{display:none}.eggtip{position:absolute;z-index:7;pointer-events:none;padding:6px 10px;background:var(--s-panel);color:var(--c-text);border:1px solid var(--s-line);border-radius:10px;box-shadow:var(--s-sh);font:12.5px/1.35 var(--sans);white-space:nowrap}
@media(max-width:1279px) and (min-width:1024px){.rp{width:340px}.bottom,.levels,.legend,.stage[data-uc] .legend{left:380px}}
@media(max-width:1023px){
 .stage{height:100vh;height:100svh;min-height:560px;padding-top:0;overflow:hidden}.rail{left:12px;right:12px;top:12px;gap:8px}
.pill{flex:1;padding:4px 10px 4px 4px;gap:8px}
.wtm{width:28px;height:28px;font-size:10px;line-height:28px}
.ball:not(.uc){width:22px;height:22px;font-size:11px!important;line-height:18px!important}
.crumb,.crumb button{font-size:13px}.bottom{left:12px;right:12px;bottom:calc(min(430px,54svh) + 10px)}
 .kpis{flex-direction:row;overflow-x:auto;scroll-snap-type:x mandatory;gap:6px;padding:0;border:0;background:none;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;-webkit-mask-image:linear-gradient(90deg,#000 86%,transparent);mask-image:linear-gradient(90deg,#000 86%,transparent)}
 .ohd{display:none}.orow{flex:0 0 196px;display:block;scroll-snap-align:start;padding:8px 10px;border-radius:14px;background:var(--s-panel);border:1px solid var(--s-line)}.orow+.orow{border-top:1px solid var(--s-line)}.ct .orow .ob{display:block;padding:4px 0;min-height:0}.orow .ob>*{display:block}.orow .ob .badge{display:inline-block;margin:2px 0}.orow .spk{margin:4px 0}.honesty{font-size:10px}.rp{left:0;right:0;top:auto;bottom:0;width:auto;height:min(430px,54svh);border-radius:24px 24px 0 0;border-bottom:0}
.rp::before{content:"";flex:none;order:-1;width:40px;height:4px;border-radius:4px;background:color-mix(in srgb,var(--c-text) 22%,transparent);margin:10px auto 0}.rp .inside{max-height:none}
 .levels{left:12px;right:12px;top:64px;bottom:auto;flex-direction:row;overflow-x:auto}.ct .levels button{width:auto;min-width:44px;height:44px}.legend{left:12px;bottom:auto;top:116px}
 .chipmsg{bottom:calc(min(430px,54svh) + 70px)}.ct button,.crumb button,.ev button,.trace li button,.chipmsg button{min-height:44px}.pin::before,.elabel::before{content:"";position:absolute;inset:-11px -6px}
}
@media(min-width:768px) and (max-width:1023px){.rp{left:12px;right:auto;width:420px;bottom:12px;height:auto;top:72px;border-radius:16px;border-bottom:1px solid var(--s-line)}.rp::before{display:none}.bottom{left:444px;bottom:12px}}
@media(prefers-reduced-motion:reduce){.poster,.ld,.ld i{transition:none}.ld svg *{animation:none;stroke-dashoffset:0}.fi{animation:none!important}}

.pin small{display:block;font:500 11px/1.3 var(--sans);color:var(--c-muted)}.pin small .id{font:500 10.5px var(--mono)}.pin small b{font-weight:700;color:var(--c-text)}
.pin .sd,.callout .sd{display:inline-block;width:9px;height:9px;margin:0 7px 1px 0;vertical-align:middle;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-obs) 25%,transparent)}.pin .sd.alarm,.callout .sd.alarm{background:var(--c-exc);box-shadow:0 0 0 3px color-mix(in srgb,var(--c-exc) 25%,transparent)}.elabel.disc{width:18px;height:18px;border:1px solid var(--c-text)!important;border-radius:50%;padding:0!important;font:600 10px/16px var(--sans)!important;letter-spacing:0!important;text-align:center;background:var(--s-panel)!important;text-shadow:none}.tg{margin-left:6px;padding:0 6px;border:1px solid var(--c-muted);border-radius:999px;font:600 9.5px var(--sans);letter-spacing:.04em;color:var(--c-muted)}.acard h4{margin:12px 0 2px;font:600 12px var(--sans);color:var(--c-muted)}.acard p{margin:0;font:13px/1.4 var(--sans)}
.ball{position:absolute;left:0;top:0;pointer-events:auto;width:26px;height:26px;border:2px solid var(--c-page)!important;border-radius:50%;padding:0!important;min-height:0!important;font:700 12px/22px var(--sans)!important;text-align:center;background:var(--c-text)!important;color:var(--c-page)!important}.ball.uc{width:24px;height:24px;font:700 11.5px/20px var(--sans)!important;background:var(--fc)!important;border-color:var(--c-page)!important;color:var(--c-page)!important}
.loopl,.flab{position:absolute;left:0;top:0;padding:0 2px!important;min-height:0!important;border:0!important;background:none!important;font:500 11px var(--sans)!important;color:var(--c-text)!important;text-shadow:1px 0 0 var(--c-scene),-1px 0 0 var(--c-scene),0 1px 0 var(--c-scene),0 -1px 0 var(--c-scene)}.flab{color:var(--c-muted)!important}
.callout{position:absolute;left:0;top:0;pointer-events:auto;font:600 12.5px/1.2 var(--sans)!important;padding:5px 10px!important;min-height:0!important;white-space:nowrap;text-align:left;border:1px solid var(--s-line)!important;border-radius:12px;background:var(--s-panel)!important;box-shadow:0 6px 16px rgba(0,0,0,.16);color:var(--c-text)!important;text-shadow:1px 0 0 var(--c-scene),-1px 0 0 var(--c-scene),0 1px 0 var(--c-scene),0 -1px 0 var(--c-scene)}
.callout small{display:block;font:500 11px var(--sans);color:var(--c-muted)}.callout small .id{font:500 10.5px var(--mono)}.callout.ring small{white-space:normal;max-width:150px}.callout .nw{white-space:nowrap}.callout .ph{font:600 12px var(--sans)}.fi{animation:fi .2s ease-out}@keyframes fi{from{opacity:0}}.callout.watch{border-color:var(--c-brass)!important;box-shadow:0 0 0 3px color-mix(in srgb,var(--c-brass) 30%,transparent);text-shadow:none}
.leaders{position:absolute;left:0;top:0;pointer-events:none;overflow:visible}.leaders polyline{fill:none;stroke:var(--c-text);stroke-width:1.2}.leaders circle{fill:var(--c-text)}
@media(max-width:1023px){.stage[data-uc] .bottom{position:static;padding:8px 16px}.stage[data-uc] .honesty{font-size:9.5px;margin:0}body:has(.stage) .site-header{position:relative}}
[data-theme=dark] .elabel small{color:#C9C1B5}
/* point ids, one per line, unbroken */
.pid{display:block;white-space:nowrap;font-family:var(--mono);font-size:11px}
.stage[data-uc] .legend{bottom:58px}
/* use-case floor stack at the top, clear of step bar and honesty strip */
@media(min-width:1024px){.stage[data-uc] .levels,.stage[data-uc] .legend{bottom:auto;top:84px}.stage[data-uc] .legend{left:412px}}
/* leader casing, level target, watch dot; ids unbroken in rows */
.leaders .cs{stroke:var(--c-scene);stroke-width:3}.ct .levels [aria-current],.ct .levels [aria-checked=true]{background:var(--c-active);color:var(--c-active-t);border-color:var(--c-active);font-weight:700}.levels .wd::after{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--c-watch);margin-left:6px;vertical-align:middle}
.nw{white-space:nowrap}.dot.watch{background:var(--c-watch)}

/* four families; brass stays the watched device, oxblood the alarm */
.ct{--f-energy:#4A5A66;--f-buildings:#33544A;--f-water:#5A3A54;--f-mobility:#A85A36}
[data-theme=dark] .ct,.ct[data-theme=dark]{--f-energy:#7C93A0;--f-buildings:#7BB59E;--f-water:#B08AA6;--f-mobility:#D08A63}
.f-energy{--fc:var(--f-energy)}.f-buildings{--fc:var(--f-buildings)}.f-water{--fc:var(--f-water)}.f-mobility{--fc:var(--f-mobility)}
/* the rail scrolls as one, Back and Next held at the foot */
.rp .rh{padding:22px 22px 0}.rp .rh:empty{display:none}.rp .card{flex:none;order:1}
.rp .inside{flex:none;order:3;padding:6px 22px 10px;border-top:1px solid var(--s-line)}.rnav{order:2}.rlinks{order:4}
.rp .rf{position:sticky;bottom:0;z-index:5;flex:none;order:5;margin-top:auto;padding:12px 22px 16px;border-top:1px solid var(--s-line);background:var(--s-solid)}.rp .rf:empty{display:none}
.rp[data-mode=explore] .rf{display:contents}.rp[data-mode=explore] .rnav{padding:0 22px 14px}.rp[data-mode=explore] .rlinks{padding:10px 22px 14px;margin:0;border-top:1px solid var(--s-line);flex-direction:column;align-items:flex-start}
.rlinks .grp{width:100%;font:600 12px var(--sans);color:var(--c-muted);margin:4px 0 0}.lk .sw{margin-right:7px}
.rtabs{display:flex;gap:2px;padding:3px;background:var(--s-soft);border-radius:999px}.ct .rtabs button{flex:1;min-height:36px;background:none;border:0;color:var(--c-muted)}
.ct .rtabs button[aria-pressed=true]{background:var(--c-active);color:var(--c-active-t)}
.badge.ok{background:color-mix(in srgb,var(--c-ok) 16%,transparent);color:color-mix(in srgb,var(--c-ok) 70%,var(--c-text))}
.kfig{background:var(--s-soft);border-radius:12px;padding:14px 16px;margin:4px 0 14px}
.kfig .kh{display:flex;align-items:center;justify-content:space-between;gap:8px;font:600 13px var(--sans)}.kws{display:flex;gap:14px}.kfig>.kws{margin-top:8px}.ct .kw{flex:none;border:0;background:none;padding:8px 6px;margin:-8px -6px;min-height:0;font:600 12px var(--sans);color:var(--c-text);text-decoration:underline;text-underline-offset:3px}
.kfig .kv{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.kfig .kv b{font:700 44px/1 var(--sans);letter-spacing:-.03em}
.kfig .kv small{font:500 16px var(--sans);color:var(--c-muted);white-space:nowrap}
.kfig .kv .badge{margin-left:auto;align-self:center}
.kb{position:relative;height:8px;border-radius:999px;background:var(--c-btn);margin-top:12px}
.kb i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:var(--c-obs)}
.kb i.ok{background:var(--c-ok)}
.kb s{position:absolute;top:-5px;width:2px;height:18px;margin-left:-1px;background:var(--c-text);border-radius:2px}
.ks{position:relative;display:flex;justify-content:space-between;height:14px;font:11px var(--sans);color:var(--c-muted);margin-top:6px}
.ks span:nth-child(2){position:absolute;transform:translateX(-50%);white-space:nowrap}
.kfig.sm{padding:10px 12px;margin:0 0 12px}
.kfig.sm .kh{font-size:12px;color:var(--c-muted)}
.kfig.sm .kv{margin-top:2px}
.kfig.sm .kv b{font-size:22px}
.kfig.sm .kv small{font-size:12px}
.kfig.sm .kb{height:4px;margin-top:8px}
.kfig.sm .kb s{top:-4px;height:12px}
.kfig .bv{display:none}.kfig.sm .bv{display:inline}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 14px}
.tile{background:var(--s-soft);border-radius:12px;padding:10px 12px;min-width:0}
.tile .th{display:flex;align-items:center;gap:6px;font:600 12px var(--sans)}
.sd{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c-obs)}.sd.ok{background:var(--c-ok)}
.tile b{display:block;font:700 18px/1.2 var(--sans);margin-top:4px;overflow-wrap:anywhere}
.tile small{display:block;font:11px/1.35 var(--sans);color:var(--c-muted);margin-top:2px}.tile .id{font-family:var(--mono)}
.inside .fb{display:none}.inside.fold .fb{display:flex;width:100%;justify-content:space-between;align-items:center;min-height:44px;padding:0;border:0;background:none;font:600 13px var(--sans);color:var(--c-text)}
.inside.fold .fb::after{content:"+";font-size:16px;color:var(--c-muted)}.inside.fold.open .fb::after{content:"−"}
.inside.fold:not(.open)>:not(.fb),.inside.fold .lh{display:none}
/* the asset stop: a picked part keeps full strength, the rest fall to 55%; the walk sits at the scene's foot */
.pins:has(.ball.sel) .ball:not(.sel),.pins:has(.ball.sel) .callout:not(.on){opacity:.55}.callout.on{box-shadow:0 0 0 1.5px var(--c-brass),var(--s-sh)}
.stepbar{flex:none;align-self:flex-start;gap:4px;padding:5px;font:600 13px var(--sans)}.stepbar span{padding:0 8px}
.ct .stepbar .ib{background:var(--c-btn);color:var(--c-text);font-size:18px}.ct .stepbar .ib.pri{background:var(--c-active);color:var(--c-active-t)}.ct .stepbar .ib:disabled{opacity:.4}
.stepbar.ph{position:absolute;z-index:7;left:50%;transform:translateX(-50%);bottom:calc(min(430px,54svh) + 12px);white-space:nowrap}.ct .stepbar.ph .ib{width:44px;height:44px;min-height:44px}
@media(min-width:768px){.stepbar.ph{left:444px;transform:none;bottom:12px}}
/* phone sheet: the figure first and compact, the stop letters and the footer links out of the fixed footer */
@media(max-width:767px){.rpips b{display:none}.rp[data-mode=uc] .rf{display:contents}.rp[data-mode=uc] .rnav{position:sticky;bottom:0;z-index:5;order:5;margin-top:auto;padding:10px 22px 12px;border-top:1px solid var(--s-line);background:var(--s-solid)}.rp[data-mode=uc] .rlinks{padding:0 22px 10px;margin:0}
 .rp[data-mode=uc] .card{display:flex;flex-direction:column}.rp[data-mode=uc] .card>.kfig{order:-1;padding:10px 12px;margin:0 0 12px}.rp[data-mode=uc] .kfig .kh{font-size:12px;color:var(--c-muted)}.rp[data-mode=uc] .kfig .kv{margin-top:2px}.rp[data-mode=uc] .kfig .kv b{font-size:26px}.rp[data-mode=uc] .kfig .kv small{font-size:12px}.rp[data-mode=uc] .kfig .kb{height:4px;margin-top:8px}.rp[data-mode=uc] .kfig .kb s{top:-4px;height:12px}.rp[data-mode=uc] .kfig .ks{display:none}.rp[data-mode=uc] .kfig .bv{display:inline}.tkey{display:none}}
.hw{margin:12px 0 4px;padding:12px 14px;border-radius:12px;background:var(--s-soft);display:flex;flex-direction:column;gap:8px}.hw p{display:flex;gap:10px;margin:0;font:13px/1.4 var(--sans)}
.hw i{flex:none;width:18px;height:18px;border-radius:50%;display:flex;align-items:center;justify-content:center;font:700 11px var(--sans);font-style:normal}
.hw i.ok{background:color-mix(in srgb,var(--c-ok) 16%,transparent);color:color-mix(in srgb,var(--c-ok) 70%,var(--c-text))}.hw i.watch{background:color-mix(in srgb,var(--c-obs) 16%,transparent);color:color-mix(in srgb,var(--c-obs) 70%,var(--c-text))}
.sk{color:var(--c-muted);margin:4px 0 12px}.sk svg{display:block;width:100%;height:auto;overflow:visible}.sk small{display:block;font:11px var(--sans);margin-top:4px}
.sk path{fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:ink 1.2s ease-out forwards}
@media (prefers-reduced-motion:reduce){.sk path{animation:none;stroke-dashoffset:0}}
.mom{margin:10px 0 0}
.mline{display:block;width:100%;height:auto;overflow:visible}.mline .ln{fill:none;stroke:var(--c-text);stroke-width:1.5;stroke-linejoin:round}.mline .ax{stroke:var(--s-line)}
.mline .tk{stroke:var(--c-muted);stroke-width:1.2}.mline .cu{stroke:var(--c-brass);stroke-width:1.5}.mline .cur{fill:var(--c-brass)}.mline text{font:9.5px var(--sans);fill:var(--c-muted)}
.mcap{margin:0 0 2px;font:11px var(--sans);color:var(--c-muted)}.mcap b{font-weight:600;color:var(--c-text)}
.mrec{margin:6px 0 0;font:13px/1.4 var(--sans);text-wrap:balance}.mrec b{font-weight:600;margin-right:6px}.mrec .nw{white-space:nowrap}
@media(max-width:767px){.mom .mline,.mom .mcap{display:none}.mom{margin-top:6px}}
.rtitle{display:flex;flex-direction:column;gap:4px}.rtitle b{font:700 24px/1.12 var(--sans);letter-spacing:-.02em;margin:2px 0}.rstop{font:500 12px var(--sans);color:var(--c-muted)}.rscene{margin:0 0 2px}.rtabs+.rscene{margin-top:8px}
.rfam{display:flex;justify-content:space-between;align-items:center;gap:8px}.lens{display:flex;align-items:center;gap:6px;font:500 12px var(--sans);color:var(--c-muted)}.lens select{font:600 12px var(--sans);color:var(--c-text);background:var(--c-btn);border:0;border-radius:999px;padding:4px 8px;min-height:30px}.ltx b{font:600 13px/1.35 var(--sans)}
.lq{margin:0 0 12px;padding:12px 14px;border-radius:12px;background:var(--s-soft)}.lq h3{margin:0 0 4px;font:600 12px var(--sans);color:var(--c-muted)}.lq p{margin:0 0 8px;font:600 14px/1.35 var(--sans)}.lq dl{margin:0}
.fam{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;font:600 12px var(--sans);letter-spacing:.02em;color:var(--c-muted)}
.fam::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--fc)}
.rpips{position:relative;display:flex;justify-content:space-between;list-style:none;margin:10px 0 0;padding:0}.rpips::before{content:"";position:absolute;left:20px;right:11px;top:9px;border-top:1px solid var(--s-line)}
.ct .rpips button{border:0;background:none;margin:0 -4px;padding:4px 4px 2px;min-height:44px;display:flex;flex-direction:column;align-items:center;gap:3px;font:500 10.5px/1 var(--sans);color:var(--c-muted)}.rpips button:hover span{text-decoration:underline}
.rpips i{width:10px;height:10px;box-sizing:border-box;border-radius:50%;border:1.5px solid var(--c-muted);background:var(--c-panel)}.rpips .seen i{background:var(--c-muted)}.rpips b{font:600 9px/1 var(--sans);letter-spacing:.04em;min-height:9px}.tkey{margin:2px 0 0;font:500 10.5px var(--sans);color:var(--c-muted);text-align:right}.card .sline{margin:2px 0 12px;font:12.5px/1.45 var(--sans);color:var(--c-muted)}
.rpips .cur{color:var(--c-text);font-weight:600}.rpips .cur i{background:var(--c-text);border-color:var(--c-text);box-shadow:0 0 0 2px var(--c-panel),0 0 0 3.5px var(--c-brass)}
.rnav{display:flex;justify-content:space-between;gap:8px}.rnav button{min-height:40px;padding:0 18px}
.rlinks{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:8px}.ct .rlinks .lk{border:0;background:none;padding:4px 0;min-height:30px;font-size:12.5px;font-weight:500;color:var(--c-muted);text-decoration:underline;text-underline-offset:3px;text-align:left}
.ucidx .grp{display:flex;align-items:center;gap:6px;margin-top:12px}.sw{display:inline-block;width:10px;height:10px;background:var(--fc)}
.ct .ucidx .row{display:grid;grid-template-columns:28px 1fr;gap:8px;text-align:left;width:100%;padding:9px 8px;border:0;border-radius:10px;background:none;font-weight:600}
.ct .ucidx .row:hover{background:var(--s-soft)}
.ucidx .row small{display:block;color:var(--c-muted);font-size:11.5px;font-weight:400;margin-top:2px}.num{width:22px;height:22px;border-radius:50%;background:var(--fc);color:var(--c-page);font:700 11px/22px var(--sans);text-align:center}
.ktag{display:inline-block;margin-left:7px;padding:0 7px;border-radius:999px;background:var(--c-btn);font:600 9.5px/16px var(--sans);letter-spacing:.06em;color:var(--c-text);vertical-align:1px}
.crumb .un{color:var(--c-muted);font-weight:500}.crumb .un i{margin-right:6px}
@media(max-width:1023px){.lens select{min-height:44px}.rlinks .lk{min-height:44px}.rlinks .lk:has(.sw){display:flex;align-items:baseline}.rlinks .lk .sw{flex:none}.rp[data-mode=home] .card{display:flex;flex-direction:column}.rp[data-mode=home] .card[data-c=town] .acts{order:-1;margin:0 0 12px}}
@media(max-width:1279px) and (min-width:1024px){.rpips button{font-size:9px}}
.rp{overflow-anchor:none}.card[data-c=town] .acts{margin:2px 0 12px}/* labels outside the view read as plain muted text on a ground halo, never a see-through pill */.pins .dim{color:var(--c-muted)!important}.pins .pin.dim{background:none!important;border-color:transparent!important;box-shadow:none;text-shadow:0 0 3px var(--c-scene),0 0 6px var(--c-scene),0 0 10px var(--c-scene)}.pins .dim:hover,.pins .dim:focus-visible{color:var(--c-text)!important}