*{box-sizing:border-box}
:root{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#244d53;background:#74bfc4;color-scheme:light}
html,body{margin:0;width:100%;height:100%;overflow:hidden}
main{position:relative;width:100%;height:100svh;min-height:260px;overflow:hidden;container-type:size;background:radial-gradient(ellipse at 48% 38%,#99d2d2 0%,#80c4c8 50%,#6db6bd 100%)}
#world{position:absolute;inset:0;width:100%;height:100%;touch-action:none;outline:0;cursor:grab}
#world:active{cursor:grabbing}
#world:focus-visible{box-shadow:inset 0 0 0 3px #f8efd3}
.poster-layer{position:absolute;left:50%;top:50%;width:min(150cqh,133.333333cqw);aspect-ratio:3/2;transform:translate(-50%,-50%);pointer-events:none}
.poster{display:block;width:100%;height:100%;object-fit:contain;transition:opacity .6s ease}
.ready .poster{opacity:0}
.sign{position:absolute;display:block;min-width:44px;min-height:44px;transform:translate(-50%,-50%);pointer-events:auto;border-radius:8px;outline:0;touch-action:none;-webkit-tap-highlight-color:transparent}
.sign:hover{box-shadow:0 0 0 1.5px #fff5cf88;background:#fff5cf12}
.sign:focus-visible{outline:2px solid #fff5cf;outline-offset:4px;background:#fff5cf25}
.sign[hidden]{display:none}
.hint{position:absolute;left:50%;bottom:max(24px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;gap:10px;white-space:nowrap;margin:0;padding:10px 17px;border:1px solid #e5f8ef55;border-radius:30px;background:#e7f5e533;backdrop-filter:blur(12px);font-size:.8125rem;font-weight:450;letter-spacing:.012em;pointer-events:none;user-select:none}
.hint i{font-style:normal;opacity:.5}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:480px){.hint{font-size:.75rem;padding:10px 14px;gap:8px;bottom:max(22px,env(safe-area-inset-bottom))}}
@media(prefers-reduced-motion:reduce){.poster{transition:none}}

[hidden]{display:none!important}

.play-target{padding:0;border:0;background:transparent;cursor:pointer;width:44px;height:44px;color:inherit}

@media(max-height:540px) and (min-aspect-ratio:4/3){.hint{left:auto;right:20px;bottom:14px;transform:none}}

.sky-controls{position:absolute;right:max(22px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top));display:flex;gap:8px}
.sky-controls button{display:grid;place-items:center;width:44px;height:44px;padding:10px;border-radius:50%;border:1px solid #e5f8ef70;background:#e7f5e533;backdrop-filter:blur(12px);color:#28545b;cursor:pointer;transition:background .2s,color .2s}
.sky-controls button:hover{background:#eef9eb70}.sky-controls button:focus-visible{outline:2px solid #fff2c8;outline-offset:4px}
.sky-controls svg{width:22px;height:22px}.sky-controls .sun-icon{display:none}
#time-of-day[aria-pressed="true"] .moon-icon{display:none}#time-of-day[aria-pressed="true"] .sun-icon{display:block}
#town-lights:not([aria-pressed="false"]){background:#fff0b8a0;color:#795827}
.night .hint,.night .sky-controls button{color:#d8e6ef;border-color:#a7c5d52e;background:#122c4b77}
.night #town-lights:not([aria-pressed="false"]){color:#ffdc93;background:#57463088}
@media(prefers-reduced-motion:reduce){.sky-controls button{transition:none}}

main.night{background:radial-gradient(ellipse at 48% 38%,#17465c,#0a2038)}