@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#05070b;--line:#222831;--muted:#919aa7;--lime:#b7f7c4}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:#edf1f4;font:15px 'DM Sans',Arial,sans-serif}button,a,select{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button,select{font:inherit;color:inherit;background:transparent;border:1px solid #3a424d;cursor:pointer}button:hover,a:hover{color:var(--lime)}button:focus-visible,a:focus-visible,select:focus-visible{outline:2px solid var(--lime);outline-offset:4px}button{padding:10px 16px;border-radius:5px}button.active{background:var(--lime);color:#102019;border-color:var(--lime)}nav{height:86px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding:0 4vw}.logo{font:600 27px 'Space Grotesk',sans-serif;letter-spacing:-1.5px}.logo i{display:inline-block;width:17px;height:23px;border:2px solid var(--lime);border-radius:50%;transform:rotate(25deg);margin-right:9px;vertical-align:-3px}.logo span{font-weight:400;color:#c8d1db}nav .links{display:flex;gap:30px;font-size:13px}.badge{color:var(--lime);font:10px monospace;letter-spacing:1.7px}.badge:before{content:'●';margin-right:8px}.topline{display:flex;justify-content:space-between;margin:32px 4vw 0;font:11px monospace;letter-spacing:1.5px;color:var(--muted)}.experience{margin:20px 4vw 0;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#030507}.view-top{display:flex;justify-content:space-between;align-items:center;padding:15px 20px;border-bottom:1px solid var(--line)}.city-tabs{display:flex;gap:8px}.city-tabs button{padding:8px 16px;font-size:12px;border-color:transparent}.city-tabs button.active{background:#1d3028;color:var(--lime);border:1px solid #365543}.view-tools{display:flex;gap:8px;align-items:center}.view-tools button,.view-tools select{padding:7px 9px;border-color:var(--line);font:11px monospace;border-radius:4px}.scene{height:min(730px,calc(100vh - 210px));height:min(730px,calc(100svh - 210px));min-height:530px;position:relative;overflow:hidden;background:#030507}.scene canvas{width:100%;height:100%;display:block;touch-action:none;cursor:grab}.scene canvas:active{cursor:grabbing}.hero-copy{position:absolute;top:42px;left:36px;z-index:2;pointer-events:none}.eyebrow{color:var(--lime);letter-spacing:2px;font:10px monospace;text-transform:uppercase}h1{font:500 clamp(36px,4.2vw,68px)/1.04 'Space Grotesk',sans-serif;letter-spacing:-3px;margin:20px 0}h1 em{font-style:normal;color:#9da7b3}.hero-copy p{color:#a4aeb9;line-height:1.7;font-size:13px}.coordinates{font:10px monospace;color:#6f7d8c;margin-top:24px}.telemetry{position:absolute;right:24px;top:32px;width:185px;pointer-events:none;font:10px monospace}.telemetry .micro{color:#7e8a96;letter-spacing:1px}.clock{display:block;font:25px 'Space Grotesk';margin:8px 0 25px}.telemetry dl{margin:12px 0}.telemetry dl div{display:flex;justify-content:space-between;margin:13px 0}.telemetry dt{color:#7e8a96}.telemetry dd{margin:0}.telemetry svg{width:100%;height:60px;overflow:visible}.telemetry .legend-mini{margin-top:28px;pointer-events:auto}.legend-mini button{display:flex;width:100%;align-items:center;justify-content:space-between;padding:9px 0;font-size:10px;border:0;border-bottom:1px solid #1b232a;border-radius:0;text-align:left}.dot{width:6px;height:6px;background:var(--color);border-radius:50%;display:inline-block;margin-right:8px}.scene-foot{position:absolute;bottom:20px;left:28px;right:24px;display:flex;justify-content:space-between;font:10px monospace;color:#84909e}.zoom{position:absolute;bottom:60px;left:30px;display:flex;gap:5px}.zoom button{padding:6px 12px;background:#080d1488}.anchor-label{position:absolute;left:40%;top:60%;width:245px;pointer-events:none;z-index:4;font:11px monospace;text-shadow:0 1px 5px #000}.anchor-label strong{font:500 17px 'Space Grotesk';display:block;margin:8px 0;color:#fff}.anchor-label span{color:#b0bac5;line-height:1.5}.leader{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.strip{display:flex;gap:25px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);padding:17px 24px;font:11px monospace;color:#8e9ba7}.strip b{font-weight:400;color:#d8e1e9}.section{padding:90px 4vw 20px;scroll-margin-top:30px}.section-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:32px}.section-head h2{font:500 clamp(27px,3vw,42px) 'Space Grotesk';letter-spacing:-1.5px;margin:12px 0}.section-head p{max-width:390px;line-height:1.7;color:var(--muted);font-size:13px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.source-card{padding:24px;border:1px solid var(--line);border-radius:8px;background:linear-gradient(140deg,#10151c,#080b10);text-align:left;display:block}.source-card:hover{border-color:#677583;color:inherit}.card-head{display:flex;justify-content:space-between;font-size:12px}.kind{font:9px monospace;color:#a6b5c4;text-transform:uppercase}.value{font:500 34px 'Space Grotesk';letter-spacing:-1px;margin:22px 0 8px}.value small{font:12px monospace;color:#92a1af;letter-spacing:0}.source-card p{font-size:12px;line-height:1.7;color:#93a0ae;margin:6px 0}.source-card footer{border-top:1px solid var(--line);margin-top:18px;padding-top:13px;display:flex;justify-content:space-between;font:10px monospace;color:#9aacbc}.city-grid{display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.city-item{padding:30px 22px;border-right:1px solid var(--line);position:relative}.city-item:last-child{border:0}.city-item h3{font:23px 'Space Grotesk';margin:20px 0}.city-item p{font:11px monospace;color:#81909d;line-height:1.7}.city-item button{font-size:11px}.city-item.future{opacity:.55}.story{display:grid;grid-template-columns:1fr 1fr;gap:10vw;padding-bottom:50px}.story h2{font:500 48px/1.12 'Space Grotesk';letter-spacing:-2px}.story .bodycopy{color:#aab3bd;line-height:1.9;font-size:14px}.story .bodycopy p{margin:0 0 22px}.story strong{color:#e1e8ee;font-weight:500}.method{display:grid;grid-template-columns:repeat(4,1fr);gap:25px}.method article{border-top:1px solid #334239;padding:20px 0}.method h3{font:20px 'Space Grotesk'}.method p{font-size:12px;color:#94a1ad;line-height:1.8}.research{margin-top:25px;border:1px solid var(--line);border-radius:8px;padding:20px}.research summary{cursor:pointer}.research li{margin:15px 0;color:#a0acb8;line-height:1.7;font-size:13px}.research a{text-decoration:underline}.site-footer{margin:70px 4vw 0;padding:25px 0 35px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid var(--line);color:#82909b;font:11px monospace}.site-footer .logo{color:white}dialog{max-width:580px;width:calc(100% - 32px);background:#0c1119;color:#eaf1f6;border:1px solid #42514b;border-radius:12px;padding:30px}dialog::backdrop{background:#000b;backdrop-filter:blur(7px)}dialog h2{font:30px 'Space Grotesk'}dialog p{font-size:14px;line-height:1.8;color:#aab8c5}dialog a{color:var(--lime);word-break:break-all}dialog ul{padding-left:18px;color:#aab8c5;font-size:12px;line-height:1.8}.dialog-close{float:right}.detail-data{max-height:220px;overflow:auto}body.immersive nav,body.immersive .topline,body.immersive .section,body.immersive .site-footer{display:none}body.immersive .experience{margin:0;border:0;border-radius:0}body.immersive .scene{height:calc(100vh - 105px);height:calc(100svh - 105px);min-height:0}body.portrait .scene{height:calc(100vh - 105px);height:calc(100svh - 105px)}body.portrait .hero-copy{top:20px;left:20px}body.portrait .hero-copy h1{font-size:36px}body.portrait .hero-copy p,body.portrait .coordinates{display:none}body.portrait .telemetry{top:auto;bottom:50px;right:20px;width:145px}body.portrait .telemetry dl,body.portrait .telemetry .graph-block{display:none}body.portrait .clock{margin:3px 0}body.portrait .legend-mini{margin-top:10px}.stale{color:#d9b879!important}.hidden{display:none!important}@media(min-width:1500px){.scene{height:780px;max-height:calc(100vh - 210px);max-height:calc(100svh - 210px)}}@media(max-width:1000px){.hero-copy{left:24px}.hero-copy h1{font-size:43px}.hero-copy p{max-width:150px}.telemetry{width:150px}.cards{grid-template-columns:repeat(2,1fr)}.city-grid{grid-template-columns:repeat(3,1fr)}.city-item{border-bottom:1px solid var(--line)}}@media(max-width:700px){nav{height:68px}nav .links{gap:18px}nav .badge{display:none}.topline{font-size:9px;margin-top:22px}.experience{margin:14px 12px 0}.scene{height:690px;min-height:600px}.hero-copy{top:25px;left:20px}.hero-copy h1{font-size:36px;letter-spacing:-1.5px}.hero-copy p{display:none}.coordinates{font-size:9px;margin-top:14px}.telemetry{top:auto;bottom:50px;right:18px;width:135px}.clock{font-size:20px;margin:5px 0 15px}.telemetry dl,.graph-block{display:none}.telemetry .legend-mini{margin-top:14px}.legend-mini button{padding:6px 0;font-size:9px}.view-top{padding:10px;gap:6px}.view-tools #portrait{display:none}.view-tools button,.view-tools select{font-size:9px;padding:7px 5px}.city-tabs{gap:0}.city-tabs button{padding:7px;font-size:11px}.scene-foot{font-size:8px;left:15px;bottom:15px}.scene-foot span:last-child{display:none}.strip{gap:10px;padding:12px;font-size:9px}.section{padding:60px 20px 0}.section-head{display:block}.cards{grid-template-columns:1fr}.city-grid{grid-template-columns:1fr 1fr}.city-item{padding:22px 15px}.city-item h3{font-size:20px}.story{grid-template-columns:1fr;gap:20px}.story h2{font-size:37px}.method{grid-template-columns:1fr 1fr;gap:15px}.site-footer{gap:20px;align-items:start;font-size:10px}.site-footer p{max-width:170px;line-height:1.7}.anchor-label{width:190px;font-size:10px}.anchor-label strong{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.scene canvas{filter:brightness(1.28)}
.logo{white-space:nowrap;flex-shrink:0}nav .links a{white-space:nowrap}
body.immersive{overflow:hidden}body.immersive .experience{height:100vh;height:100svh;display:flex;flex-direction:column}body.immersive .view-top,body.immersive .strip{flex:0 0 auto}body.immersive .scene,body.immersive.portrait .scene{height:auto;max-height:none;min-height:0;flex:1 1 auto}
@media(max-width:700px){nav .logo{font-size:22px}nav .logo i{width:13px;height:18px;margin-right:6px}nav .links{font-size:10px;gap:12px}.view-top{flex-wrap:wrap}.view-tools{margin-left:auto;white-space:nowrap}.hero-copy .coordinates{max-width:180px}.strip span:nth-child(3){display:none}}

#mini-legend{max-height:min(48vh,460px);overflow-y:auto;scrollbar-width:thin;pointer-events:auto}#mini-legend button{min-height:27px}

/* Reserved empty lane keeps floating source text clear of the artwork. */
.scene canvas{width:calc(100% - 260px);margin-left:260px}.anchor-label{width:220px;max-width:calc(100% - 28px);padding:0;background:none;border:0;text-shadow:0 2px 8px #000}.anchor-label small{color:var(--signal-color,#b7f7c4);font-size:9px;letter-spacing:1px}.anchor-label strong{font-size:16px;line-height:1.4}.anchor-label span{font-size:10px;color:#b5c2ce}.source-pulses{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}.leader{z-index:3}.legend-mini button[data-pulsing=true]{color:#fff;background:#a8f9c71a}.legend-mini button[data-pulsing=true] .dot{box-shadow:0 0 11px 3px var(--color)}.telemetry{z-index:2}.telemetry .micro{line-height:1.5}#mini-legend{max-height:min(42vh,380px)}
@media(max-width:700px){.scene canvas{width:100%;height:calc(100% - 142px);margin-left:0;margin-top:142px}.scene .hero-copy{display:none}.anchor-label{width:calc(100% - 28px);max-width:420px}.anchor-label strong{font-size:15px;margin:4px 0}.telemetry{max-height:calc(100% - 180px);overflow:hidden}.telemetry #fetch-stats,.telemetry #analysis-stats{font-size:8px}.telemetry .legend-mini{max-height:30vh}.scene-foot{max-width:calc(100% - 28px)}}
body.portrait .scene canvas{width:100%;height:calc(100% - 142px);margin-left:0;margin-top:142px}body.portrait .scene .hero-copy{display:none}body.portrait .anchor-label{width:calc(100% - 28px);max-width:420px}

.story .bodycopy{max-width:68ch}.story-signature{padding-top:18px;border-top:1px solid var(--line);font-size:12px}.story-examples>p{max-width:80ch;color:#a0acb8;font-size:13px;line-height:1.8}#about-viewpulse{max-width:720px;max-height:85svh;overflow:auto}#about-viewpulse h3{margin-top:30px;font:20px 'Space Grotesk',sans-serif}#about-viewpulse .story-signature{margin:25px 0}#about-viewpulse .research{padding:16px}

/* Keep the extra story control reachable on narrow screens. */
@media(max-width:700px){.view-top{flex-wrap:wrap}.view-tools{flex-wrap:wrap;justify-content:flex-end;margin-left:auto}}

/* City profiles share one scene; keep all city selectors usable on compact displays. */
.view-top{flex-wrap:wrap;gap:10px}.city-tabs{flex-wrap:wrap}.research[hidden]{display:none}.research>p{font-size:13px;line-height:1.8;color:#a0acb8}

@media(min-width:701px){body:not(.portrait) .telemetry{bottom:52px;display:flex;flex-direction:column}body:not(.portrait) .telemetry .clock{margin:6px 0 8px}body:not(.portrait) .telemetry dl{margin:5px 0}body:not(.portrait) .telemetry dl div{margin:9px 0}body:not(.portrait) .telemetry .graph-block{flex:0 0 auto}body:not(.portrait) #mini-legend{flex:1 1 auto;min-height:55px;max-height:none;margin-top:10px}body:not(.portrait) #mini-legend button{min-height:24px;padding:5px 0}}

/* Portrait monitor: match the original Oisterwijk installation's 66/34 composition. */
body.immersive.portrait{--pu:1vw}
body.immersive.portrait .view-top{display:none}
body.immersive.portrait .strip{display:none}
body.immersive.portrait .scene{position:relative;height:100vh;height:100svh;flex:none;width:100%;overflow:hidden}
body.immersive.portrait .scene canvas{position:absolute;top:0;left:0;width:100%;height:66%;margin:0}
body.immersive.portrait .telemetry{position:absolute;top:66%;bottom:0;left:0;right:0;width:100%;height:34%;max-height:none;padding:2vw 4vw 12vw;overflow:hidden;border-top:1px solid #34414c;background:#030507;display:grid;grid-template-columns:1fr 1.25fr;grid-template-rows:auto auto 1fr;gap:1vw 4vw;font-size:1.8vw}
body.immersive.portrait .telemetry>.micro{grid-column:1;grid-row:1;font-size:1.5vw}
body.immersive.portrait .telemetry .clock{grid-column:2;grid-row:1;font-size:3vw;margin:0;text-align:right}
body.immersive.portrait .telemetry dl,body.immersive.portrait #fetch-stats,body.immersive.portrait #analysis-stats{display:none}
body.immersive.portrait .telemetry .graph-block{display:block;grid-column:1;grid-row:2/4;align-self:start;margin-top:1vw}
body.immersive.portrait .graph-block .micro{font-size:1.7vw;line-height:1.5}
body.immersive.portrait .telemetry svg{height:10vw;margin:2vw 0}
body.immersive.portrait .telemetry #mini-legend{grid-column:2;grid-row:2/4;margin:0;max-height:none;min-height:0;overflow:auto;display:grid;grid-template-columns:1fr;align-content:start}
body.immersive.portrait #mini-legend button{font-size:1.7vw;line-height:1.25;min-height:0;padding:.35vw 0}
body.immersive.portrait .anchor-label{left:4vw!important;top:auto!important;bottom:2vw!important;width:92vw;max-width:none;z-index:5;background:#030507}
body.immersive.portrait .anchor-label small{font-size:1.5vw}
body.immersive.portrait .anchor-label strong{font-size:2.4vw;line-height:1.25;margin:.7vw 0}
body.immersive.portrait .anchor-label span{font-size:1.6vw}
body.immersive.portrait .leader,body.immersive.portrait .zoom,body.immersive.portrait .scene-foot{display:none}

/* Persistent identity for every city, including the unattended portrait player. */
.city-sign{display:none}body.immersive .city-sign,body.portrait .city-sign{display:block;position:absolute;left:4vw;top:2.5vw;z-index:6;pointer-events:none;padding:1vw 1.5vw;background:#030507c9;border-radius:4px;text-shadow:0 1px 4px #000}body.immersive .city-sign span,body.portrait .city-sign span{display:block;font:500 clamp(9px,1.4vw,18px)/1.4 monospace;letter-spacing:.15em;color:#b7f7c4}body.immersive .city-sign strong,body.portrait .city-sign strong{display:block;margin-top:.35vw;font:500 clamp(18px,3.2vw,38px)/1.2 'Space Grotesk',sans-serif;color:#edf1f4;letter-spacing:.01em}

/* The language choice remains available in the website and fullscreen artwork. */
.nav-end{display:flex;align-items:center;gap:22px}.language-switch{display:inline-flex;gap:2px;padding:3px;border:1px solid #3a424d;border-radius:6px;background:#080d14}.language-switch button{border:0;padding:7px 10px;font:11px monospace;min-width:34px;min-height:32px}.language-switch button[aria-pressed=true]{background:var(--lime);color:#102019}.scene-language{display:none}body.immersive .scene-language{display:flex;position:absolute;right:4vw;top:2.5vw;z-index:7}body.immersive:not(.portrait) .scene-language{top:10px;right:12px}.city-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.city-item{border-bottom:1px solid var(--line)}
@media(max-width:700px){nav{gap:12px;flex-wrap:wrap;height:auto;min-height:68px;padding-top:12px;padding-bottom:12px}nav .links{order:3;flex-basis:100%;justify-content:center;padding-top:4px}.nav-end{margin-left:auto}.language-switch button{padding:5px 8px}.city-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}