:root{color-scheme:light;--paper:#f5f1e8;--ink:#3e4954}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;width:100%}
body{background:var(--paper);color:var(--ink);transition:background-color 3s ease;color-scheme:light}
body[data-period=notte]{--paper:#293a56;--ink:#fff1ce;color-scheme:dark}
.stage{min-height:100svh;display:grid;place-items:center;overflow:hidden}
.frame{position:relative;width:min(100%,calc(100svh * 1024 / 1856));aspect-ratio:1024/1856;overflow:hidden;isolation:isolate;background:#99ccef;touch-action:pan-y;outline-offset:-3px}
.frame:focus-visible{outline:1px solid var(--ink)}
.camera,.layer-stack,.plane,.layer{position:absolute;inset:0;pointer-events:none}
.camera{transform:scale(1.24);transform-origin:58% 38.159483%;will-change:transform}
.layer-stack{transform:scale(1.035);transform-origin:center}
.plane{will-change:transform}
.layer img{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.night{opacity:0}
.theme-toggle{position:absolute;right:18px;top:max(18px,env(safe-area-inset-top));z-index:2;width:44px;height:44px;display:grid;place-items:center;padding:0;border:1px solid #ffffff55;border-radius:50%;background:#ffffff45;color:#394c67;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background-color .5s,color .5s,border-color .5s}
.theme-toggle:hover{background:#ffffff85}
.theme-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.motion-toggle{position:absolute;left:18px;top:max(18px,env(safe-area-inset-top));z-index:2;min-height:44px;display:flex;align-items:center;gap:7px;padding:0 12px;border:1px solid #ffffff55;border-radius:24px;background:#ffffff65;color:#394c67;font:500 12px/1 system-ui,sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.motion-toggle svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.motion-toggle:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.motion-toggle[aria-pressed=true]{background:#ffffff90}
.motion-toggle:disabled{cursor:wait;opacity:.7}
.motion-status{position:absolute;top:max(72px,calc(env(safe-area-inset-top) + 54px));left:18px;right:18px;z-index:2;width:fit-content;max-width:calc(100% - 36px);margin:0;padding:9px 12px;border-radius:14px;background:#f5f1e8ee;color:#394c67;font:13px/1.4 system-ui,sans-serif;pointer-events:none}
[data-period=notte] .motion-toggle{color:#fff0c4;background:#25355290;border-color:#fff0c455}
[data-period=notte] .motion-toggle[aria-pressed=true]{background:#435570}
[data-period=notte] .motion-status{background:#293a56ee;color:#fff0c4}
.theme-toggle svg{position:absolute;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.45;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s,transform .6s}
.sun{opacity:0;transform:rotate(-25deg) scale(.75)}
[data-period=notte] .theme-toggle{color:#fff0c4;background:#25355260;border-color:#fff0c455}
[data-period=notte] .moon{opacity:0;transform:rotate(20deg) scale(.8)}
[data-period=notte] .sun{opacity:1;transform:rotate(0) scale(1)}
.load-error{position:absolute;inset:auto 8% 5%;margin:0;padding:16px;background:#fff5e9;color:#6a3c31;font:15px/1.5 system-ui,sans-serif;text-align:center}
[hidden]{display:none!important}
@media(prefers-reduced-motion:reduce){body,.theme-toggle,.theme-toggle svg{transition:none}.camera{transform:scale(1.4)}}