@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600&display=swap');
:root{--ink:#344139;--muted:#829085;--line:#52665320;--panel:#f8f8f0df;--accent:#768669}*{box-sizing:border-box}body{margin:0;overflow:hidden;background:#eae8e1;color:var(--ink);font-family:'DM Sans',sans-serif;transition:color .6s}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid #9a7b55;outline-offset:4px}#canvas{position:fixed;inset:0}canvas{display:block;touch-action:none}header{position:fixed;left:3.5%;right:3.5%;top:0;height:87px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);z-index:4}.brand{color:inherit;text-decoration:none;font-size:10px;font-weight:600;letter-spacing:2px;display:flex;align-items:center;gap:12px}.brand .mark{font-size:32px;font-weight:400;color:#8a9075}.brand small{font-size:6px;display:block;font-weight:400;letter-spacing:1.7px;margin-top:5px;opacity:.55}.header-right{display:flex;gap:20px;align-items:center}.header-right button{background:none;border:0;font-size:8px;letter-spacing:.8px}#fullscreen{font-size:23px}.intro{position:fixed;left:5%;top:16%;pointer-events:none;transition:opacity .5s}.intro p{font-size:7px;letter-spacing:2px;color:#8c927f}.intro h1{font-family:Manrope,sans-serif;font-size:clamp(28px,3.2vw,49px);font-weight:400;letter-spacing:-2px;line-height:1.16;margin:18px 0}.intro em{font-family:Georgia,serif;font-weight:400;color:#8e866a}.intro div{font-size:10px;line-height:1.8;opacity:.6}.views{position:fixed;left:5%;top:46%;width:185px;z-index:3}.views>span{display:block;font-size:6px;letter-spacing:1.7px;margin-bottom:16px;opacity:.55}.views button{display:flex;align-items:center;gap:15px;border:0;border-bottom:1px solid var(--line);background:transparent;width:100%;text-align:left;padding:13px 0;font-size:10px;opacity:.6;transition:opacity .2s}.views button b{font-weight:400;font-size:7px;opacity:.45}.views button i{margin-left:auto;font-style:normal;opacity:0}.views button.active,.views button:hover{opacity:1}.views button.active i{opacity:1}.views button.active{color:#7f6b4e}.details{position:fixed;right:3.5%;top:19%;width:235px;padding:22px;background:var(--panel);border:1px solid #fff8;border-radius:9px;backdrop-filter:blur(18px);box-shadow:0 12px 45px #22332708;z-index:3}.detail-top{font-size:6px;letter-spacing:1.5px;display:flex;justify-content:space-between;align-items:center;color:#8b927c}.detail-top button{border:0;background:none;font-size:20px;line-height:10px}.details h2{font-family:Georgia,serif;font-size:23px;font-weight:400;letter-spacing:-.6px;line-height:1.2;margin:16px 0 10px}.details p{font-size:9px;line-height:1.7;opacity:.55;margin-bottom:20px}.time-control{margin:20px 0;border-top:1px solid var(--line);padding-top:16px}.time-control label{font-size:8px;display:flex;justify-content:space-between}.time-control label span{font-size:7px;opacity:.5}.time-control input{width:100%;accent-color:#879278;height:3px;margin:16px 0 0;cursor:pointer}.toggles button{display:flex;justify-content:space-between;width:100%;padding:11px 0;font-size:9px;border:0;border-bottom:1px solid var(--line);background:none}.toggles span{font-size:7px;color:#9a9e8d}.toggles button[aria-pressed=true] span{color:#697e4b}.bottom{position:fixed;left:5%;right:3.5%;bottom:67px;display:flex;justify-content:space-between;align-items:center;pointer-events:none}.caption{font-size:8px;letter-spacing:1.4px}.caption small{display:block;font-size:6px;letter-spacing:1px;opacity:.45;margin-top:9px}.tools{display:flex;gap:8px;pointer-events:auto}.tools button{background:var(--panel);border:1px solid #ffffff55;border-radius:5px;padding:11px;font-size:16px;backdrop-filter:blur(10px)}.tools button span{font-size:8px;margin-left:6px}.tools button[aria-pressed=true]{background:#d6ddcb}footer{position:fixed;bottom:0;left:3.5%;right:3.5%;height:37px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--line);font-size:5px;letter-spacing:1.2px;opacity:.55}#loading{position:fixed;inset:0;z-index:20;background:#eae8e1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;font-size:10px;letter-spacing:1px}.spinner{height:28px;width:28px;border-radius:50%;border:1px solid #71806a25;border-top-color:#71806a;animation:spin 1.5s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.hotspot{position:fixed;z-index:2;width:25px;height:25px;border-radius:50%;background:#fcfcf0cc;border:1px solid #fff;color:#6d775d;font-size:14px;box-shadow:0 0 0 6px #ffffff30;transform:translate(-50%,-50%);cursor:pointer}.hotspot span{position:absolute;left:34px;top:3px;white-space:nowrap;background:#f7f7efdd;padding:4px 7px;border-radius:3px;font-size:7px;opacity:0;transition:.2s;pointer-events:none}.hotspot:hover span{opacity:1}body.interior .intro{opacity:0}body.dark{--ink:#d6ded2;--panel:#24352be0;--line:#d3dfd120}body.dark .views button.active{color:#dabf8d}body.dark .intro em{color:#c6bb9e}body.dark .details{border-color:#e2f0e019}body.dark .hotspot{color:#42513e}dialog{width:min(1100px,93vw);max-height:88vh;border:0;border-radius:10px;padding:28px;background:#f5f4ed;color:#344139}dialog::backdrop{background:#172219aa;backdrop-filter:blur(8px)}.dialog-head{display:flex;justify-content:space-between;align-items:center}.dialog-head span{font-size:7px;letter-spacing:2px}.dialog-head h2{font-family:Georgia,serif;font-weight:400;font-size:28px;margin:10px 0 22px}.dialog-head button{border:0;background:none;font-size:23px}.gallery{display:grid;grid-template-columns:1fr 1fr;gap:20px}.gallery figure{margin:0}.gallery img{width:100%;display:block;border-radius:4px}.gallery figcaption{font-size:9px;margin:10px 0 8px;color:#818b77}#toast{position:fixed;bottom:120px;left:50%;transform:translateX(-50%);background:#344139ec;color:#fff;padding:12px 20px;border-radius:6px;font-size:10px;z-index:10;opacity:0;pointer-events:none;transition:opacity .2s}@media(max-width:800px){header{height:65px}.brand{font-size:8px;letter-spacing:1px}.brand .mark{font-size:26px}.brand small{font-size:5px}.header-right{gap:8px}.header-right button{font-size:7px}.intro{top:11%;left:6%}.intro h1{font-size:29px;letter-spacing:-1px}.intro p{font-size:6px}.intro div{display:none}.views{top:auto;bottom:127px;left:4%;width:92%;display:flex;gap:4px;justify-content:center}.views>span,.views button b,.views button i{display:none}.views button{width:auto;font-size:8px;padding:10px 9px;border:1px solid var(--line);border-radius:4px;background:var(--panel);backdrop-filter:blur(10px);opacity:1}.views button.active{background:#dce1d1;color:#506345}.details{top:90px;right:4%;width:185px;padding:14px}.details h2{font-size:19px;margin:10px 0}.details p{font-size:8px}.details #controls{display:none}.details.open #controls{display:block}.details:not(.open) p{display:none}.details:not(.open){width:155px}.time-control label{font-size:7px}.time-control label span{font-size:6px}.bottom{bottom:63px;left:4%;right:4%}.caption{display:none}.tools{margin:auto}.tools button{padding:10px}.tools button span{font-size:8px}footer span:nth-child(2){display:none}.gallery{grid-template-columns:1fr}.hotspot span{display:none}}
