@charset "UTF-8";
:root{--sky:#e8edf0;--paper:#fbfcfa;--ink:#203a32;--pine:#174d3d;--muted:#647870;--line:#ced8d3;--coral:#d99a80;font-family:"Segoe UI",Arial,sans-serif;color:var(--ink);background:var(--sky);font-synthesis:none}
*{box-sizing:border-box}body{margin:0;min-width:320px}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.5}button:focus-visible,a:focus-visible,#viewport:focus-visible{outline:3px solid #bc7051;outline-offset:5px}button{border:0}a{color:inherit;text-decoration:none}
.site-header{height:108px;margin:0 5%;display:flex;align-items:center;gap:40px;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px;font-family:Georgia,serif;font-size:27px;letter-spacing:-1px}.brand svg{width:34px;height:40px;fill:none;stroke:var(--pine);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.brand i{font-size:22px;font-weight:normal}.site-header nav{display:flex;gap:28px;margin-left:auto}.site-header nav button{background:none;padding:9px 0;font-size:14px;border-bottom:1px solid transparent}.site-header nav button:hover{border-color:var(--pine)}.demo-tag{font-size:12px;color:var(--muted);border-left:1px solid var(--line);padding-left:28px}
main{display:grid;grid-template-columns:310px minmax(0,1fr);min-height:calc(100svh - 169px);max-width:1800px;margin:auto;padding:0 3% 0 5%}.intro{padding:52px 0 24px;position:relative;z-index:2}.welcome{display:flex;gap:9px;align-items:center;color:var(--muted);font-size:13px;margin:0 0 24px}.welcome span{height:6px;width:6px;background:var(--coral);border-radius:50%}h1{font-family:Georgia,"Times New Roman",serif;font-weight:normal;font-size:clamp(48px,3.75vw,65px);line-height:1.02;letter-spacing:-2.5px;margin:0 0 24px}.intro-copy{font-size:14px;line-height:1.75;max-width:265px;color:var(--muted);margin:0 0 27px}.primary{display:flex;align-items:center;justify-content:space-between;gap:20px;background:var(--pine);color:var(--paper);padding:15px 20px;border-radius:6px;font-size:14px;min-width:245px;transition:background .2s}.primary:hover{background:#28624d}.primary svg{fill:none;stroke:currentColor;stroke-width:1.3;width:23px;height:23px}.terrace-link{font-size:12px;margin-top:18px;border-bottom:1px solid #9aafa3;padding:0 0 3px;background:none;color:var(--muted)}.intro-note{font-size:11px;line-height:1.6;color:#7e8e85;margin-top:38px}
.world{min-width:0;position:relative;display:flex;flex-direction:column;justify-content:center;min-height:620px}.scene-top{position:absolute;top:26px;left:0;right:2%;display:flex;align-items:center;justify-content:space-between;gap:20px;z-index:4}.time-switch{display:flex;gap:3px;padding:4px;background:#dbe3e2;border-radius:30px}.time-switch button{font-size:12px;padding:10px 17px;background:transparent;border-radius:30px;display:flex;align-items:center;gap:7px;transition:background .25s,color .25s}.time-switch button[aria-pressed=true]{background:var(--paper);box-shadow:0 2px 7px #203a3210}.time-switch span{font-size:17px;line-height:1}.scene-caption{font-size:11px;color:var(--muted)}#viewport{position:absolute;inset:46px -2% 30px -3%;outline-offset:-6px;touch-action:pan-y;overflow:hidden}#viewport canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}#viewport canvas:active{cursor:grabbing}#fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:.3;transition:opacity .35s}.is-ready #fallback{display:none}.loading{position:absolute;inset:0;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;font-size:13px;background:#e8edf099;z-index:3}.loader-cup{font-size:30px}.is-ready .loading{display:none}.is-fallback #fallback{opacity:1}.is-fallback .loading{inset:auto 0 20px;padding:10px;background:var(--paper);font-size:12px}.is-fallback #scene-labels{display:none}#scene-labels{position:absolute;inset:0;pointer-events:none;visibility:hidden}.is-ready #scene-labels{visibility:visible}.scene-label{position:absolute;left:0;top:0;transform:translate(-50%,-100%);pointer-events:auto;background:#fbfcfaee;padding:8px 13px;border:1px solid #d2dcd4;border-radius:24px;font-size:11px;white-space:nowrap;box-shadow:0 3px 14px #203a3212;display:flex;gap:6px;align-items:center;transition:opacity .2s,background .2s}.scene-label:hover{background:#fff;border-color:var(--pine)}.pin{width:5px;height:5px;border-radius:50%;background:var(--pine)}.scene-label::after{content:"";position:absolute;left:50%;bottom:-16px;width:1px;height:15px;background:#8aa295}.scene-bottom{position:absolute;bottom:20px;left:3%;right:2%;display:flex;align-items:center;justify-content:space-between;gap:15px;z-index:4}.gesture{font-size:11px;color:var(--muted);display:flex;gap:9px;align-items:center;pointer-events:none}.gesture svg{height:21px;width:21px;stroke:currentColor;fill:none;stroke-width:1.2}.camera-controls{display:flex;align-items:center;border:1px solid #c7d3ce;background:#fbfcfabd;border-radius:6px;overflow:hidden}.camera-controls button{width:38px;height:36px;background:none;font-size:20px;display:grid;place-items:center}.camera-controls button:hover{background:white}.camera-controls button+button{border-left:1px solid #d9e1dc}.camera-controls svg{height:17px;width:17px;stroke:currentColor;fill:none;stroke-width:1.5}footer{min-height:61px;margin:0 5%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;color:var(--muted)}
dialog{border:none;border-radius:14px;background:var(--paper);color:var(--ink);width:min(520px,calc(100vw - 32px));max-height:85svh;padding:44px 38px;box-shadow:0 20px 80px #11241c30;overflow:auto}dialog::backdrop{background:#132a2570;backdrop-filter:blur(5px)}.close-dialog{position:absolute;right:17px;top:13px;background:none;font-size:28px;color:var(--muted);width:32px;height:32px}.dialog-illustration{font-size:31px;margin-bottom:17px}.dialog-subtitle{font-size:12px;color:var(--muted);margin:0 0 8px}dialog h2{font:normal 35px/1.1 Georgia,serif;margin:0 0 18px;letter-spacing:-1px}dialog p{font-size:14px;line-height:1.75;color:var(--muted)}.menu-list{margin:27px 0}.menu-row{display:grid;grid-template-columns:1fr auto;gap:8px;border-bottom:1px solid #d9e3db;padding:14px 0}.menu-row strong{font-size:15px;font-weight:500}.menu-row small{display:block;font-size:12px;color:var(--muted);line-height:1.5;margin-top:4px}.menu-row span{font-size:14px;padding-top:1px}.dialog-note{font-size:11px!important;margin-bottom:0}.dialog-action{padding:12px 17px;background:var(--pine);color:white;border-radius:6px;font-size:13px;margin-top:12px}.sr-only{position:absolute;clip:rect(0,0,0,0);width:1px;height:1px;overflow:hidden;white-space:nowrap}
body.evening{--sky:#152a37;--ink:#ecede1;--muted:#a5b8b9;--line:#324a53;background:var(--sky)}body.evening .brand svg{stroke:#dce8d5}body.evening .welcome span{background:#edc18a}body.evening .primary{background:#e8be92;color:#26392d}body.evening .primary:hover{background:#f3cc9e}body.evening .time-switch{background:#273f4b}body.evening .time-switch button[aria-pressed=true]{background:#526774;color:#fff}body.evening .scene-label{background:#233e49ef;color:#e8ebe0;border-color:#576e72}body.evening .pin{background:#edc18a}body.evening .camera-controls{background:#233e49;border-color:#536974}body.evening .camera-controls button:hover{background:#344f5b}body.evening .camera-controls button+button{border-color:#536974}body.evening dialog{color:#203a32;--muted:#647870;--pine:#174d3d}body{transition:background .6s,color .6s}
@media(min-width:1500px){main{grid-template-columns:370px minmax(0,1fr)}.intro{padding-top:70px}.intro-copy{max-width:280px;font-size:15px}.world{min-height:710px}}
@media(max-width:1050px){.site-header{height:88px;gap:24px}.demo-tag{display:none}main{grid-template-columns:250px minmax(0,1fr);min-height:620px;padding-left:4%;padding-right:2%}.intro{padding-top:42px}h1{font-size:46px}.intro-copy{max-width:215px;font-size:13px}.primary{min-width:210px;padding:14px 16px}.scene-caption{display:none}.world{min-height:610px}#viewport{inset:60px -3% 60px -5%}.scene-top{left:4%}.scene-bottom{bottom:25px}.gesture{max-width:145px;line-height:1.5}}
@media(max-width:720px){.site-header{height:76px;margin:0 6%;gap:12px}.brand{font-size:22px;gap:8px}.brand svg{width:27px;height:32px}.site-header nav{gap:16px}.site-header nav button{font-size:12px}main{display:flex;flex-direction:column;padding:0;min-height:0}.intro{padding:31px 6% 12px;display:grid;grid-template-columns:1fr auto;gap:0 16px}.welcome{grid-column:1/-1;margin-bottom:15px;font-size:12px}h1{grid-column:1/-1;font-size:44px;letter-spacing:-1.6px;line-height:1.07;margin:0 0 15px;max-width:330px}.intro-copy{grid-column:1/-1;max-width:350px;font-size:13px;line-height:1.65;margin:0 0 18px}.primary{min-width:0;font-size:12px;max-width:220px;padding:12px 15px}.terrace-link{font-size:11px;max-width:115px;line-height:1.5;justify-self:end;align-self:center;margin:0}.intro-note{display:none}.world{min-height:470px;width:100%;margin:0}.scene-top{top:17px;left:6%;right:6%}.scene-caption{display:block;font-size:10px}.time-switch button{padding:8px 13px;font-size:11px}#viewport{inset:44px 0 52px}.scene-bottom{bottom:13px;left:6%;right:6%}.gesture{max-width:none;font-size:10px}.scene-label{font-size:10px;padding:7px 10px}footer{margin:0 6%;font-size:10px;align-items:flex-start;flex-direction:column;justify-content:center;gap:5px;padding:16px 0;min-height:67px}dialog{padding:38px 25px}dialog h2{font-size:31px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;scroll-behavior:auto!important}}
body{color:var(--ink)}