html,body{width:100%;height:100%;overflow:hidden}
.shell{display:block;height:100svh;min-height:0}
.viewport{display:grid;place-items:center;width:100%;height:100svh;overflow:hidden;position:relative;background:#17392e}
.viewport::-webkit-scrollbar{display:none}
.wide-scenery{display:none;position:absolute;inset:0;pointer-events:none;isolation:isolate}
.wide-scenery::before,.wide-scenery::after{content:"";position:absolute;top:0;bottom:0;width:max(0px,calc((100% - 100svh * 1672 / 941)/2));background-image:url('./public/reference-rig/wide-scenery-joined.png');background-size:800% 100%;background-repeat:no-repeat}
.wide-scenery::before{left:0;background-position:left center}
.wide-scenery::after{right:0;background-position:right center}
.wide-night{position:absolute;inset:0;z-index:1;background:rgb(22,31,52);mix-blend-mode:multiply;opacity:var(--wide-night,0)}
@media(min-aspect-ratio:1672/941){html:not(.contained-layout) .wide-scenery{display:block}}
#scene{width:min(100%,calc(100svh * 1672 / 941));height:auto;aspect-ratio:1672/941;position:relative;top:auto;transform:none}
.campsite-title{position:absolute;top:18px;right:24px;z-index:3}
#sound{position:fixed;bottom:max(16px,env(safe-area-inset-bottom));left:max(16px,env(safe-area-inset-left));z-index:5;width:44px;height:44px;background:transparent;color:white;opacity:.5;transition:opacity .18s}
#sound:hover,#sound:focus-visible{opacity:1;background:#ffffff12}
#sound svg{width:23px;height:23px}
.scene-keyboard-target{position:absolute;border:0;background:transparent;pointer-events:none;color:transparent}
.scene-keyboard-target:focus-visible{outline:2px solid #fff9;outline-offset:4px}
@media(max-width:720px){.campsite-title{font-size:18px;right:16px;top:16px}}