:root{color-scheme:light;background:#d8e7c5}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}
body{position:fixed;inset:0;background:#d8e7c5}
#city{position:absolute;inset:0;height:100%;height:100dvh;isolation:isolate}
#city-scene{display:block;width:100%;height:100%;touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none;outline:none}
#city-scene.dragging{cursor:grabbing}
.accessible-control{position:fixed;top:calc(16px + env(safe-area-inset-top));left:calc(16px + env(safe-area-inset-left));width:42px;height:42px;opacity:0;pointer-events:none;border:1px solid #879c84;border-radius:50%;background:#fff5df;color:#526e5b;z-index:2}
.accessible-control:focus-visible{opacity:1;pointer-events:auto;outline:3px solid #526e5b;outline-offset:3px}
#pause-city::before{content:'';position:absolute;left:14px;top:12px;width:10px;height:16px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.home-control{left:70px}
.home-control::before{content:'';position:absolute;left:13px;top:15px;width:13px;height:12px;border:2px solid currentColor;border-top:0}
.home-control::after{content:'';position:absolute;left:13px;top:9px;width:13px;height:13px;border-left:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg)}
.windmill{animation:turn 18s linear infinite}
.tree-crown{transform-box:fill-box;transform-origin:50% 100%;animation:sway 5.5s ease-in-out infinite alternate}
.smoke{animation:smoke 4.5s ease-out infinite;animation-delay:var(--delay,0s)}
.flag{transform-box:fill-box;transform-origin:0 50%;animation:flag 3s ease-in-out infinite alternate}
.river-glints{animation:flow 18s linear infinite}
.fountain-water{stroke-dasharray:7 5;animation:water 1.2s linear infinite}
.fountain-ring{transform-box:fill-box;transform-origin:center;animation:ring 3s ease-out infinite}
.fountain-ring.second{animation-delay:-1.5s}
.cloud{animation:cloud 100s linear infinite alternate}
.cloud-two{animation-duration:130s;animation-delay:-45s}
html[data-paused] #city-scene *{animation-play-state:paused!important}
@keyframes turn{to{transform:rotate(360deg)}}
@keyframes sway{from{transform:rotate(-1.1deg)}to{transform:rotate(1.1deg)}}
@keyframes smoke{0%{transform:translate(0,5px);opacity:0}25%{opacity:.6}100%{transform:translate(17px,-32px);opacity:0}}
@keyframes flag{to{transform:skewY(5deg) scaleX(.92)}}
@keyframes flow{to{stroke-dashoffset:-343}}
@keyframes water{to{stroke-dashoffset:-24}}
@keyframes ring{from{transform:scale(.4);opacity:.9}to{transform:scale(1.45);opacity:0}}
@keyframes cloud{from{transform:translateX(-250px)}to{transform:translateX(450px)}}
@media(prefers-reduced-motion:reduce){#city-scene *{animation:none!important}}

.city-dock{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));display:flex;gap:10px;z-index:3}.city-dock a,.city-dock button{display:grid;place-items:center;width:52px;height:52px;background:#fff8e7e8;border:1px solid #fff9e8;border-radius:20px;box-shadow:0 5px 20px #46615720;color:#699fa8;cursor:pointer;backdrop-filter:blur(10px)}.city-dock button{color:#a08bae}.city-dock svg{width:28px;height:28px}.city-dock :focus-visible{outline:3px solid #526e5b;outline-offset:4px}
#wardrobe{border:1px solid #fff6e7;border-radius:30px;padding:32px;width:min(420px,calc(100% - 28px));max-height:90dvh;overflow:auto;background:#fff9ec;color:#47635a;box-shadow:0 25px 100px #304d3840;font-family:system-ui,sans-serif;text-align:center}#wardrobe::backdrop{background:#365a4644;backdrop-filter:blur(7px)}.dialog-close{position:absolute;right:15px;top:12px;border:0;background:none;font-size:28px;color:#6b7d70;cursor:pointer}.eyebrow{font-size:10px;letter-spacing:2px}#wardrobe h1{font-size:35px;font-weight:500;margin:8px 0}.wibi-neighbour{pointer-events:none}#wibi-preview{height:180px}#wibi-preview svg{height:100%;width:auto}#wardrobe fieldset{border:0;padding:12px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}#wardrobe legend{font-size:12px;margin:auto;padding-top:14px}#wibi-colours button{width:30px;height:30px;border:3px solid #fff9ec;border-radius:50%;cursor:pointer}#wibi-colours button[aria-pressed=true]{outline:2px solid #566c60}#wibi-outfits button{padding:9px 12px;border:1px solid #dce2d0;border-radius:12px;background:transparent;color:inherit;cursor:pointer}#wibi-outfits button[aria-pressed=true]{background:#e0e9d6;border-color:#839b7b}.park-link{display:block;margin-top:16px;padding:15px;border-radius:16px;background:#587e70;color:#fff9ec;text-decoration:none;font-size:14px}

#city-canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab;outline:none}#city-canvas[hidden]{display:none}.city-3d-ready #city-scene{visibility:hidden}.city-3d-ready #city-scene *{animation-play-state:paused!important}