:root{color-scheme:light;background:#e3e9e7;color:#425d67}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{min-height:100svh;-webkit-tap-highlight-color:transparent}.painting{position:fixed;inset:0;isolation:isolate;background:#e3e9e7}.painting picture{display:block;width:100%;height:100%}.landscape{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 53%}#snow-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.controls{position:fixed;bottom:max(30px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:2;opacity:.7;transition:opacity .3s}.controls:hover,.controls:focus-within{opacity:1}button,input{touch-action:manipulation}button{cursor:pointer;color:inherit;border:0;background:none;padding:0}button:focus-visible,input:focus-visible{outline:2px solid #536e78;outline-offset:5px}.play-btn{height:44px;width:44px;display:grid;place-items:center;border:1px solid #4b65734d;border-radius:50%;background:#e3e9e740;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);transition:background .25s,transform .25s}.play-btn:hover{background:#cad6d277;transform:scale(1.06)}.play-btn:active{transform:scale(.96)}.play-btn svg{width:20px;height:20px;fill:currentColor}.icon-play{margin-left:2px}.icon-pause,.is-playing .icon-play{display:none}.is-playing .icon-pause{display:block}.volume-control{display:flex;align-items:center;gap:9px}.mute-btn{width:32px;height:44px;display:grid;place-items:center}.mute-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}input[type=range]{appearance:none;-webkit-appearance:none;width:65px;height:44px;margin:0;background:transparent;cursor:pointer}input[type=range]::-webkit-slider-runnable-track{height:2px;background:#536e784d;border-radius:4px}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:7px;height:7px;margin-top:-2.5px;border-radius:50%;background:#536e78}input[type=range]::-moz-range-track{height:2px;background:#536e784d}input[type=range]::-moz-range-thumb{width:7px;height:7px;border:0;border-radius:50%;background:#536e78}.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:600px){.landscape{object-position:50% center}.controls{bottom:max(24px,env(safe-area-inset-bottom));gap:14px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

@media (orientation: landscape) and (max-aspect-ratio: 3/2){.landscape{object-position:75% 53%}}
