@font-face{font-family:DM Sans;font-style:normal;font-weight:400 650;font-display:swap;src:url(/stylized-dioramas/italy-town/fonts/dm-sans-latin.woff2) format("woff2")}@font-face{font-family:Italiana;font-style:normal;font-weight:400;font-display:swap;src:url(/stylized-dioramas/italy-town/fonts/italiana-latin.woff2) format("woff2")}*{box-sizing:border-box}:root{font-family:DM Sans,sans-serif;color:#34433c;background:#eeeae2;font-synthesis:none;font-weight:400}body{margin:0;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #a26b41;outline-offset:5px}#app,#scene{width:100%;height:100svh;position:relative}#scene{position:absolute;inset:0}canvas{display:block;outline:none;touch-action:none}.masthead{position:absolute;top:35px;left:42px;right:42px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.masthead>*{pointer-events:auto}.brand{display:flex;gap:15px;align-items:center;text-decoration:none;color:inherit;font-family:Italiana,Georgia,serif;font-size:34px;line-height:1;letter-spacing:-.7px}.brand>svg{width:39px;height:39px;fill:none;stroke:#a56c45;stroke-width:1.25}.brand-sub{display:block;font-family:DM Sans,sans-serif;font-size:8px;letter-spacing:2.55px;margin-top:10px;color:#6e786c;font-weight:500}.time-switch{display:flex;border:1px solid #d6d7ca;background:#f6f4ee78;border-radius:30px;padding:5px;gap:3px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.time-switch button{border:0;background:none;padding:10px 15px;border-radius:24px;display:flex;align-items:center;gap:8px;font-size:11px;color:#808477;transition:background .3s,color .3s,box-shadow .3s}.time-switch button.active{background:#fffdf5;color:#485341;box-shadow:0 2px 7px #4e493b0c}.time-switch svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}.place-label{position:absolute;left:44px;bottom:125px;pointer-events:none}.eyebrow{font-size:8px;font-weight:600;letter-spacing:2px;display:flex;align-items:center;gap:8px;color:#748071}.eyebrow>span{width:5px;height:5px;background:#71806a;border-radius:100%}h1{font-family:Italiana,Georgia,serif;font-weight:400;font-size:35px;letter-spacing:-.6px;margin:14px 0 7px}.place-label p{font-size:11px;color:#7c8275;margin:0}.view-tools{position:absolute;right:40px;bottom:123px;border:1px solid #d6d7ca;display:flex;gap:3px;align-items:center;background:#f6f4ee80;border-radius:30px;padding:5px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.icon-button{position:relative;display:grid;place-items:center;border:0;background:transparent;border-radius:50%;width:37px;height:37px;transition:background .2s,color .2s}.icon-button svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}.icon-button:hover{background:#fffdf5}.icon-button[aria-pressed=true]{background:#d8decd;color:#375740}.tool-divider{width:1px;height:17px;background:#d0d4c6;margin:0 4px}.mute-slash{position:absolute;width:21px;height:1px;background:currentColor;transform:rotate(-48deg);box-shadow:0 -2px #f3f1e9}.icon-button[aria-pressed=true] .mute-slash{display:none}footer{position:absolute;bottom:0;left:42px;right:42px;height:76px;display:flex;justify-content:space-between;align-items:center;border-top:1px solid #8e927829;color:#828779;font-size:8px;letter-spacing:1.5px}.edition{display:flex;align-items:center;gap:15px}.edition-number{border:1px solid #a1a88f63;border-radius:20px;padding:6px 8px;font-size:9px;letter-spacing:0}.gesture{display:flex;gap:9px;align-items:center;letter-spacing:.15px;font-size:10px;position:absolute;left:50%;transform:translate(-50%);white-space:nowrap}.gesture svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:1}.gesture i{font-style:normal;margin:0 7px;color:#a9ad9e}.about-button{padding:8px 0;background:none;border:0;font-size:10px;letter-spacing:0;color:#727b6b}.about-button span{padding-left:7px}.about-button:hover{color:#34433c}#loading{position:absolute;inset:0;background:#eeeae2;z-index:20;display:flex;gap:23px;flex-direction:column;align-items:center;justify-content:center;color:#848771;font-size:11px;letter-spacing:1px;transition:opacity .7s,visibility .7s}#loading.loaded{opacity:0;visibility:hidden}.loading-sun{font-size:45px;color:#af8056;animation:spin 16s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}dialog{border:1px solid #d4d5c6;border-radius:8px;padding:48px;width:450px;max-width:calc(100vw - 36px);background:#f5f2e9;color:#4c5749;box-shadow:0 30px 100px #313c3a30}dialog::backdrop{background:#33423b30;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}dialog h2{font-family:Italiana,Georgia,serif;font-size:42px;font-weight:400;margin:24px 0}dialog p{font-size:13px;line-height:1.9;color:#737b6c}#close-about{position:absolute;right:15px;top:11px;border:0;background:transparent;font-size:26px;color:#7e8777}.dialog-note{border-top:1px solid #d8daca;padding-top:20px;margin-top:27px;font-size:10px;line-height:1.8;color:#87907d}.dialog-note a{color:#5e7456;text-underline-offset:3px}:root,.brand>svg,.brand-sub,.time-switch,.view-tools,.eyebrow,.place-label p,footer,.about-button,dialog{transition:color .8s,background-color .8s,border-color .8s,stroke .8s}:root[data-theme=night]{color:#e6e8e3;background:#142238;color-scheme:dark}[data-theme=night] .brand>svg{stroke:#ddbe8a}[data-theme=night] :is(.brand-sub,.eyebrow,.place-label p,footer,.about-button){color:#a8bbca}[data-theme=night] .eyebrow>span{background:#b5c7d4}[data-theme=night] :is(.time-switch,.view-tools){background:#1c2d43b8;border-color:#60778e66}[data-theme=night] .time-switch button{color:#a8bbca}[data-theme=night] .time-switch button.active{background:#40566e;color:#fff0cc;box-shadow:0 2px 12px #050d1b33}[data-theme=night] .icon-button:hover{background:#344b64}[data-theme=night] .icon-button[aria-pressed=true]{background:#40566e;color:#fff0cc}[data-theme=night] .tool-divider{background:#60778e66}[data-theme=night] .mute-slash{box-shadow:0 -2px #1c2d43}[data-theme=night] footer{border-color:#60778e40}[data-theme=night] .edition-number{border-color:#60778e80}[data-theme=night] .gesture i{color:#899db0}[data-theme=night] .about-button:hover{color:#fff0cc}[data-theme=night] dialog{background:#1a2b40;border-color:#536c84;color:#e6e8e3}[data-theme=night] dialog::backdrop{background:#050d1b88}[data-theme=night] :is(dialog p,.dialog-note,#close-about){color:#b3c3cf}[data-theme=night] .dialog-note{border-color:#536c8470}[data-theme=night] .dialog-note a{color:#f2d2a0}[data-theme=night] :is(button,a):focus-visible{outline-color:#f2d2a0}@media(max-width:800px){.masthead{left:23px;right:23px;top:25px}.brand{font-size:27px;gap:10px}.brand>svg{width:30px;height:30px}.brand-sub{font-size:6px;letter-spacing:1.9px;margin-top:8px}.time-switch button{padding:9px 10px}.time-switch button span{display:none}.place-label{left:25px;bottom:115px}h1{font-size:29px}.view-tools{right:23px;bottom:113px}.icon-button{width:31px;height:31px}footer{left:25px;right:25px;height:76px}.edition>span:last-child,.about-button{display:none}.gesture{left:auto;right:0;transform:none;font-size:9px}.gesture i{margin:0 4px}}@media(max-width:360px){.masthead{left:18px;right:18px}.brand{font-size:22px;gap:8px}.brand>svg{width:25px;height:25px}.brand-sub{font-size:5.5px;letter-spacing:1.5px}.time-switch button{padding-inline:8px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
