*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#172331;color:#f3f0e5;font-family:Arial,sans-serif}#world{position:fixed;inset:0;width:100%;height:100%}.shade{position:fixed;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(16,27,39,.65),transparent 44%,transparent 77%,rgba(11,21,31,.8))}header{position:absolute;top:28px;left:3.5vw;right:3.5vw;display:flex;justify-content:space-between;align-items:center}header img{width:90px;height:62px;object-fit:contain}a{color:inherit;text-decoration:none;font-size:14px}main{position:absolute;left:7vw;top:16vh;max-width:740px;pointer-events:none}.overline{font-size:11px;letter-spacing:.17em;text-transform:uppercase;color:#bdc8ce;margin:0 0 18px}h1{font-size:clamp(30px,3.4vw,62px);font-weight:400;line-height:1.08;letter-spacing:-.045em;margin:0;text-wrap:balance;text-shadow:0 3px 30px #172331;transition:opacity .35s}footer{position:absolute;bottom:35px;left:7vw;right:12vw}nav{display:flex;gap:32px}button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}nav button{padding:12px 0;color:#9aabb9;font-size:13px}nav button[aria-current]{color:#fff}button:focus-visible,a:focus-visible{outline:2px solid #76ceb1;outline-offset:5px}.track{height:1px;background:#ffffff25;margin-top:12px}#progress{height:2px;background:linear-gradient(90deg,#ed9957,#7bcf97,#56afff);width:0}#play{position:absolute;bottom:28px;right:3.5vw;border:1px solid #ffffff30;border-radius:50%;height:50px;width:50px;background:#182733b3;font-size:20px}#labels span{position:absolute;color:#e5eeee;font-size:10px;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-left:1px solid #9debc688;padding:6px 10px;background:linear-gradient(90deg,#142531b0,transparent);pointer-events:none;transition:opacity .5s}#fallback{position:absolute;top:50%;left:10%;right:10%}@media(max-width:650px){main{top:15vh;left:7vw;right:7vw}h1{font-size:34px}header{top:15px}header img{width:72px}nav{gap:18px}nav button{font-size:10px}footer{right:20vw;bottom:30px}#labels span{font-size:8px}#play{width:42px;height:42px}}

#labels .work-tag{font-size:12px;letter-spacing:0;text-transform:none;border:1px solid #91d9c777;border-radius:20px;background:#102431e8;padding:7px 11px;color:#fff;box-shadow:0 0 20px #66d8c033} @media(max-width:650px){nav{gap:12px;flex-wrap:wrap}nav button{font-size:10px}#labels .work-tag{font-size:10px}main{max-width:85vw}}

/* V041: one third story, two thirds animated world. */
#world{inset:0 0 0 auto;width:66.6667%;height:100%;left:33.3333%}
main{left:4vw;top:50%;width:26.5vw;max-width:none;transform:translateY(-50%)}
h1{font-size:clamp(30px,3.15vw,60px);line-height:1.12;text-wrap:pretty}
.shade{background:linear-gradient(90deg,#131e2b 0%,#131e2b22 35%,transparent 55%);}
#labels .work-car{position:absolute;width:76px;height:38px;transform-origin:center;pointer-events:none;filter:drop-shadow(0 3px 3px #050a10) drop-shadow(0 0 7px #b6e9da44);will-change:transform;transition:opacity .4s}
.work-car svg{width:100%;height:100%;display:block}
@media(max-width:700px){#world{left:0;top:25%;width:100%;height:66%}main{left:7vw;top:16vh;width:86vw;transform:none}h1{font-size:32px}.overline{margin-bottom:12px}.shade{background:linear-gradient(180deg,#131e2b66,transparent 45%)}footer{bottom:22px}}
/* Keep overlays in the same viewport coordinate system as WebGL. */
header,main,footer,#play{position:fixed}#labels{position:fixed;inset:0;pointer-events:none}

html,body{background:#202938}#opening-cloud{position:fixed;left:33.3333%;top:0;width:66.6667%;height:100%;border:0;pointer-events:none}.shade{background:none}#world{opacity:0}@media(max-width:700px){#opening-cloud{left:0;top:25%;width:100%;height:66%}}

#labels .work-car{transform-origin:0 0;filter:none}

/* V044: one uninterrupted cinematic stage. */
html,body{background:#202938}
#world,#opening-cloud{inset:0;width:100%;height:100%;left:0;top:0}
main{left:50%;top:14vh;width:min(78vw,980px);max-width:none;transform:translateX(-50%);text-align:center}
h1{font-size:clamp(30px,3.6vw,62px);line-height:1.08;text-wrap:balance;text-shadow:0 2px 30px #202938}
.overline{display:none}
.shade{background:linear-gradient(180deg,#20293866,transparent 30%,transparent 85%,#20293899)}
footer{left:50%;right:auto;bottom:28px;width:min(620px,76vw);transform:translateX(-50%)}
nav{justify-content:space-between;gap:18px}
#labels span{background:none;border:0;font-size:9px;letter-spacing:.08em;text-shadow:0 1px 8px #202938}
@media(max-width:700px){
 main{left:50%;top:14vh;width:88vw;transform:translateX(-50%)}
 h1{font-size:clamp(27px,6.6vw,36px)}
 #world,#opening-cloud{inset:0;width:100%;height:100%}
 footer{left:5vw;right:18vw;width:auto;transform:none;bottom:22px}
 nav{gap:10px;flex-wrap:nowrap}nav button{font-size:10px}
}
/* V045: headline overlays the morph; navigation has a protected footer. */
main{top:50%;left:50%;width:min(84vw,1000px);transform:translate(-50%,-50%);z-index:4}
h1{text-shadow:0 2px 6px #202938,0 0 32px #202938,0 0 72px #202938;line-height:1.14}
main::before{content:"";position:absolute;inset:-60px -8vw;z-index:-1;pointer-events:none;background:radial-gradient(ellipse,rgba(32,41,56,.67),rgba(32,41,56,.25) 48%,transparent 72%)}
footer{z-index:5;bottom:0;left:0;right:0;width:100%;transform:none;padding:28px max(7vw,24px) 26px;background:linear-gradient(transparent,#202938 32%)}
nav,.track{max-width:760px;margin-left:auto;margin-right:auto}nav{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}nav button{white-space:normal;text-align:center;line-height:1.3}
#play{z-index:6}header{z-index:6}#labels{z-index:2}
@media(max-width:700px){main{top:50%;left:50%;width:88vw;transform:translate(-50%,-50%)}footer{left:0;right:0;width:100%;bottom:0;padding:28px 68px 20px 12px}nav{gap:5px}nav button{font-size:10px;min-width:0}.track{margin-top:10px}}

/* Concept: signs mounted on rooftops; district labels around the city. */
.roof-sign{position:absolute;transition:opacity .3s;opacity:0;display:flex;flex-direction:column;align-items:center;filter:drop-shadow(0 0 5px #e99b4f33)}
.roof-sign b{font-size:11px;font-weight:500;padding:5px 8px;background:#263341ec;color:#fff0d2;border:1px solid #e2a368aa;border-radius:3px;box-shadow:inset 0 0 8px #edab5822;white-space:nowrap}
.roof-sign i{width:1px;height:9px;background:#d9ab72}
.district-callout{position:absolute;transform:translate(-50%,-50%);font-size:15px;letter-spacing:.02em;padding:9px 15px;background:#202938e8;border:1px solid var(--district);border-radius:5px;color:var(--district);transition:opacity .25s;white-space:nowrap}
.district-lines{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}.district-lines path{fill:none;stroke-width:1;transition:opacity .25s}
@media(max-width:700px){.roof-sign b{font-size:8px;padding:3px 5px}.district-callout{font-size:11px;padding:6px 8px}}
.roof-sign b{min-width:28px;min-height:25px;display:grid;place-items:center}.roof-sign img{width:15px;height:15px;filter:brightness(0) invert(1)}