.city-scene { position: relative; }
.city-illustration { display: block; width: 100%; height: auto; overflow: visible; }
.city-illustration path { stroke: var(--gold-500); stroke-width: 1.45; fill: none; stroke-linejoin: round; stroke-linecap: round; }
.city-illustration .city-face,.city-illustration .city-side,.city-illustration .city-roof { fill: var(--navy-900); stroke: none; }
.city-illustration .city-window { stroke-width: 1; opacity: .75; }
.city-illustration .city-side { fill: var(--navy-950); }
.city-illustration .city-chart-guide { opacity: .12; stroke-dasharray: 2 7; }
.city-illustration .city-growth-line { stroke-width: 2; opacity: .85; }
.city-illustration .city-arrow { stroke-width: 2; }
.city-illustration .city-ground { opacity: .7; }
.city-illustration .city-landscape { opacity: .8; }
.city-illustration .city-street { opacity: .25; }
.city-illustration .city-crane { opacity: 0; }
.city-illustration .city-crane path { stroke-width: 1; }
.city-scene.is-city-playing .city-crane { animation: city-work 3.85s .825s ease both; }
@keyframes city-work { 0%,100% { opacity: 0; } 15%,80% { opacity: .6; } }
.city-scene.is-city-ready .city-stage { opacity: 0; }
.city-scene.is-city-ready .city-growth-line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.city-scene.is-city-ready .city-arrow { opacity: 0; }
.city-scene.is-city-playing .city-stage { animation: city-arrive .605s calc(var(--at) * .55) ease-out both; }
.city-scene.is-city-playing .city-stage path:not(.city-face,.city-side,.city-roof) { stroke-dasharray: 1; animation: city-draw .715s calc(var(--at) * .55) ease-out both; }
.city-scene.is-city-playing .city-growth-line { animation: city-draw 4.4s .33s cubic-bezier(.25,.1,.35,1) both; }
.city-scene.is-city-playing .city-arrow { animation: city-arrive .385s 4.455s ease-out both; }
@keyframes city-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes city-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@media(prefers-reduced-motion:reduce) {
 .city-scene.is-city-ready .city-stage,.city-scene.is-city-ready .city-arrow { opacity: 1; animation: none; }
 .city-scene.is-city-ready .city-growth-line,.city-scene.is-city-playing .city-stage path { animation: none; stroke-dashoffset: 0; }
 .city-scene.is-city-playing .city-crane { display: none; }
}