:root{--navy:#142d34;--cream:#fff7ec;--gold:#e2b77d}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;height:100dvh;overflow:hidden;touch-action:none;overscroll-behavior:none;background:#a3c1c4;color:var(--cream);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer;touch-action:manipulation}button:focus-visible{outline:2px solid #fff8e4;outline-offset:3px}#app,#scene{width:100%;height:100%;height:100dvh}#app{position:relative;overflow:hidden}#scene{display:block;outline:none;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(12,26,35,.58),rgba(12,26,35,.07) 28%,transparent 55%,rgba(9,23,28,.42));mix-blend-mode:multiply}.site-head{pointer-events:none;position:absolute;top:0;left:0;right:0;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:calc(env(safe-area-inset-top) + 30px) clamp(20px,3.6vw,58px) 0}.brand .micro,.micro,.panel-caption,.map-title,.version,.intro-overline{font-size:9px;letter-spacing:.26em;font-weight:750}.brand .micro{color:#f8d3a4;display:flex;align-items:center;gap:11px}.sun-mark{font-size:18px}.micro-line{width:23px;height:1px;background:#e7d4b5}.brand h1{margin:8px 0 7px;font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,3.2vw,51px);font-weight:400;letter-spacing:.075em;line-height:1}.brand h1 em{font-weight:400;font-style:italic}.brand p{font-size:12px;letter-spacing:.18em;margin:0;color:#f7efe5cc}.head-actions{display:flex;align-items:center;gap:11px;pointer-events:auto}.pill,.icon-btn{border:1px solid #fffbef6b;color:#fff9ee;background:#173944a8;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}.pill{border-radius:30px;display:flex;align-items:center;gap:11px;padding:12px 18px;font-size:12px;font-weight:700;letter-spacing:.07em;white-space:nowrap}.pill span:first-child{font-size:19px;font-weight:400}.icon-btn{height:43px;width:43px;border-radius:50%;font-family:Georgia,serif;font-size:20px}.location-bar{pointer-events:none;position:absolute;top:calc(env(safe-area-inset-top) + 127px);left:clamp(20px,3.6vw,58px);display:flex;align-items:center;gap:11px;background:#14313cc4;border:1px solid #fff7e637;border-radius:30px;padding:10px 14px;backdrop-filter:blur(13px);font-size:10px;letter-spacing:.06em}.live-dot{width:6px;height:6px;border-radius:50%;background:#e6d39a;box-shadow:0 0 0 4px #e6d39a26}.separator{height:12px;width:1px;background:#fff5e94d}.side-panel{position:absolute;right:clamp(20px,3.6vw,58px);top:50%;transform:translateY(-40%);width:178px;padding:19px 16px;background:#14313cbf;backdrop-filter:blur(17px);border:1px solid #ffffff36;border-radius:7px;box-shadow:0 16px 50px #0002}.panel-caption{color:#f4d4a3;font-size:9px;letter-spacing:.2em}.lighting{display:flex;gap:5px;margin-top:11px}.lighting button{flex:1;border:1px solid #ffffff24;background:#ffffff14;color:#faf6ee;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 2px;border-radius:5px}.lighting button span{font-size:18px;line-height:1}.lighting button small{font-size:10px}.lighting button.active{background:#fbecd0;color:#29414a;border-color:#fbecd0}.side-divider{height:1px;background:#ffffff2e;margin:18px 0}.destinations{display:flex;flex-direction:column;gap:3px;margin-top:11px}.destinations button{display:flex;align-items:center;gap:10px;text-align:left;padding:8px 5px;color:#f9f8f1;background:none;border:0;border-bottom:1px solid #ffffff14;font-size:11px}.destinations button:hover{background:#fff2cc1c}.destinations button span{color:#e6c49b;font-family:Georgia,serif;font-size:11px}.map-dock{position:absolute;left:clamp(20px,3.6vw,58px);bottom:calc(env(safe-area-inset-bottom) + 75px);width:204px;padding:13px;background:#153542cb;backdrop-filter:blur(14px);border-radius:6px;border:1px solid #ffffff38}.map-title{display:flex;justify-content:space-between;color:#f8deb5;font-size:8px;letter-spacing:.17em}.map-dock canvas{width:100%;height:129px;display:block;margin:6px auto}.map-foot{font-size:9px;color:#e9efeaba;letter-spacing:.09em;text-align:right}.foot-ui{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 23px);left:clamp(20px,3.6vw,58px);right:clamp(20px,3.6vw,58px);display:flex;align-items:end;justify-content:space-between;pointer-events:none;gap:20px}.hint{font-size:11px;letter-spacing:.07em;color:#f8f7eedd;text-shadow:0 2px 8px #122a3b}.hint b{color:#f0c48b;margin:0 7px}.mobile-hint{display:none}.version{font-size:9px;color:#fff8f0aa;letter-spacing:.15em;white-space:nowrap}.version span{color:#ffddac}.joystick,.look-label{display:none}.intro,.modal{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(90deg,rgba(9,26,34,.84) 0,rgba(9,26,34,.52) 65%,rgba(9,26,34,.18) 100%);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:5}.intro{place-items:center start;padding:clamp(24px,7vw,130px)}.intro-inner{width:min(580px,100%)}.intro-overline{color:#edd0a3}.intro h2{font-family:Georgia,"Times New Roman",serif;font-size:clamp(43px,6.6vw,88px);font-weight:400;line-height:1.26;letter-spacing:.015em;margin:25px 0}.intro h2 em{font-style:normal}.intro p{font-size:14px;line-height:2.2;letter-spacing:.11em;color:#f4ebdd}.intro button{margin-top:19px;display:flex;align-items:center;justify-content:space-between;gap:50px;background:#f9eddb;border:0;color:#23414b;padding:17px 19px;min-width:225px;font-weight:750;font-size:13px;letter-spacing:.08em}.intro button span{font-size:19px}.intro-features{display:flex;gap:27px;color:#eadcc2ab;font-size:9px;letter-spacing:.17em;margin-top:36px}.modal{z-index:8;background:#08212ac9;padding:15px}.modal[hidden],.error[hidden]{display:none}.modal-card{position:relative;max-width:470px;width:100%;padding:29px 30px;background:#f9f2e6;color:#283e44;border-radius:6px;box-shadow:0 20px 90px #06192199}.modal-card .micro{color:#b08e5e}.modal-card h2{font:normal 30px Georgia,serif}.modal-card p{font-size:13px;line-height:1.9}.close{position:absolute;right:14px;top:9px;color:#45616a;background:none;border:0;font-size:30px}.solid-btn{border:0;color:#fff;background:#284955;padding:13px 19px;margin-top:6px}.error{z-index:10;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:550px;width:88%;padding:22px;border-radius:10px;color:white;background:#153844;box-shadow:0 25px 90px #0008}.error p{line-height:1.6;font-size:13px}
@media(max-width:800px){.site-head{padding:calc(env(safe-area-inset-top) + 16px) 18px 0}.brand .micro{font-size:7px;letter-spacing:.13em}.micro-line{width:11px}.brand h1{font-size:27px;margin:6px 0}.brand p{font-size:10px;letter-spacing:.08em}.pill{padding:9px 11px;font-size:11px;gap:7px}.pill span:first-child{font-size:16px}.icon-btn{height:36px;width:36px;font-size:17px}.location-bar{left:18px;top:calc(env(safe-area-inset-top) + 105px);font-size:9px;padding:8px 11px}.side-panel{top:auto;bottom:calc(env(safe-area-inset-bottom) + 15px);transform:none;right:11px;width:auto;min-width:173px;max-width:180px;padding:10px 10px 8px;background:#153644cf}.side-panel .panel-caption{font-size:7px}.side-panel .side-divider{margin:9px 0}.lighting{margin-top:6px}.lighting button{padding:6px 5px}.lighting button span{font-size:15px}.destinations{display:grid;grid-template-columns:1fr 1fr;gap:3px 7px;margin-top:6px}.destinations button{padding:5px 2px;font-size:8px;gap:3px;white-space:nowrap}.destinations button span{font-size:8px}.map-dock{left:14px;bottom:calc(env(safe-area-inset-bottom) + 175px);width:148px;padding:8px}.map-dock canvas{height:97px}.map-title{font-size:7px}.map-foot{font-size:7px}.foot-ui{left:15px;right:15px;bottom:calc(env(safe-area-inset-bottom) + 7px)}.hint{display:none}.version{font-size:8px;margin-left:auto}.joystick{display:block;position:absolute;width:116px;height:116px;bottom:calc(env(safe-area-inset-bottom) + 38px);left:16px;border-radius:50%;background:#1a39435e;border:1px solid #fff9e868;backdrop-filter:blur(6px);touch-action:none;box-shadow:0 2px 21px #0d253525}.joy-guides{position:absolute;inset:18px;border:1px dashed #fff8e654;border-radius:50%}.stick{position:absolute;left:32px;top:32px;width:50px;height:50px;border-radius:50%;background:#f3e9d1d9;color:#42606a;border:1px solid #fff;display:grid;place-items:center;font-size:19px;box-shadow:0 4px 15px #0e28363e}.look-label{display:block;position:absolute;right:17px;bottom:calc(env(safe-area-inset-bottom) + 207px);font-size:8px;letter-spacing:.14em;color:#fffce5be;pointer-events:none;text-shadow:0 1px 3px #000}.look-label span{display:block;text-align:center;font-size:20px}.intro{padding:26px}.intro h2{font-size:clamp(35px,10vw,58px)}.intro p{font-size:12px}.intro-features{gap:13px;font-size:8px}.intro button{min-width:205px}.intro-overline{font-size:8px}}
@media(max-width:390px){.brand h1{font-size:24px}.brand .micro{font-size:6px}.brand p{font-size:9px}.pill{font-size:9px;padding:8px}.icon-btn{width:32px;height:32px}.side-panel{width:173px}.map-dock{width:130px;bottom:calc(env(safe-area-inset-bottom) + 165px)}.map-dock canvas{height:90px}}
@media(max-height:600px) and (orientation:landscape){.brand p{display:none}.location-bar{top:calc(env(safe-area-inset-top) + 77px)}.side-panel{right:9px;top:calc(env(safe-area-inset-top) + 64px);bottom:auto;padding:8px;max-width:230px}.side-panel .destinations{grid-template-columns:1fr 1fr}.map-dock{bottom:calc(env(safe-area-inset-bottom) + 9px);width:129px}.map-dock canvas{height:79px}.joystick{bottom:calc(env(safe-area-inset-bottom) + 14px);width:102px;height:102px}.stick{left:26px;top:26px}.look-label{display:none}.foot-ui{display:none}}

/* v2 mobile-first HUD: clear room view and distinguish the camera look region. */
.controls-toggle{display:none;position:absolute;z-index:4;color:#f9efdc;background:rgba(23,52,61,.86);backdrop-filter:blur(10px);border:1px solid #f4dfc074;border-radius:24px;padding:11px 15px;font-size:12px;font-weight:700;box-shadow:0 6px 28px #08232e56}
@media(max-width:800px){
 .site-head{padding-top:calc(env(safe-area-inset-top) + 12px)}
 .brand h1{font-size:25px}.brand p{display:none}.brand .micro{font-size:6px}
 .location-bar{top:calc(env(safe-area-inset-top) + 74px)}
 .controls-toggle{display:block;right:12px;bottom:calc(env(safe-area-inset-bottom) + 20px)}
 .side-panel{display:none;z-index:4;right:12px;bottom:calc(env(safe-area-inset-bottom) + 70px);width:195px;max-width:210px;max-height:60dvh;overflow-y:auto;padding:14px;transform:none;background:rgba(12,39,49,.96);border-radius:12px}
 .side-panel.open{display:block}
 .side-panel .destinations{grid-template-columns:1fr 1fr;gap:7px}
 .side-panel .destinations button{font-size:10px;padding:10px 4px;border-radius:6px;background:#ffffff0d}
 .side-panel .lighting button{padding:10px 6px}
 .map-dock{top:calc(env(safe-area-inset-top) + 117px);bottom:auto;left:12px;width:135px;padding:9px;opacity:.90}
 .map-dock canvas{height:86px}
 .joystick{bottom:calc(env(safe-area-inset-bottom) + 28px);width:124px;height:124px;left:19px;z-index:2;background:#183a435c}
 .stick{left:36px;top:36px}
 .look-label{right:22px;bottom:calc(env(safe-area-inset-bottom) + 113px);font-size:9px}
 .foot-ui{bottom:calc(env(safe-area-inset-bottom) + 5px)}.version{font-size:8px;opacity:.92}
 .intro{padding:26px}.intro h2{font-size:clamp(33px,9vw,54px)}
}
@media(max-height:600px) and (orientation:landscape){.map-dock{top:calc(env(safe-area-inset-top) + 80px);left:9px}.controls-toggle{bottom:calc(env(safe-area-inset-bottom) + 8px)}.joystick{bottom:calc(env(safe-area-inset-bottom) + 8px);width:102px;height:102px}.stick{left:26px;top:26px}.side-panel{bottom:calc(env(safe-area-inset-bottom) + 52px)}}

.compare-btn{width:100%;display:block;margin-top:15px;padding:10px 7px;border:1px solid #f5d7a851;background:#f5d7a817;color:#fff0d4;border-radius:6px;font-size:10px;font-weight:700;letter-spacing:.03em;text-align:center}.compare-btn:hover{background:#ffe6b12f}.compare-modal{z-index:10}.compare-card{max-width:1120px;max-height:calc(100dvh - 28px);overflow-y:auto}.compare-card h2{font-size:27px;margin:12px 0 8px}.compare-card p{max-width:800px}.compare-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.compare-grid figure{margin:0;min-width:0}.compare-grid img{display:block;width:100%;max-height:60dvh;object-fit:contain;border-radius:3px;background:#e9dec9}.compare-grid figcaption{color:#5d6b68;font-size:11px;margin:8px 0 4px}.compare-card .close{position:sticky;float:right;top:0;z-index:2}@media(max-width:700px){.compare-grid{grid-template-columns:1fr}.compare-card{padding:20px;max-height:calc(100dvh - 14px)}.compare-grid img{max-height:43dvh}.compare-card h2{font-size:22px}}

/* v2.1 cinematic view — full unobstructed canvas with a minimal restore affordance. */
.immersive-pill{font-size:11px;white-space:nowrap;padding:12px 13px}
.immersive-restore{position:absolute;z-index:6;right:max(12px,env(safe-area-inset-right));bottom:calc(max(12px,env(safe-area-inset-bottom)) + 5px);background:rgba(9,34,45,.40);border:1px solid rgba(255,255,255,.23);border-radius:24px;color:#fffaf0;font-size:11px;padding:10px 14px;backdrop-filter:blur(8px)}
.immersive-restore[hidden]{display:none!important}
#app.immersive .vignette,#app.immersive .site-head,#app.immersive .location-bar,#app.immersive .controls-toggle,#app.immersive .side-panel,#app.immersive .map-dock,#app.immersive .foot-ui,#app.immersive .joystick,#app.immersive .look-label{display:none!important}
#app.immersive .immersive-restore{display:block}
@media(max-width:800px){.immersive-pill{padding:9px 7px;font-size:9px;gap:0}.head-actions{gap:5px}}
@media(max-width:390px){.immersive-pill{font-size:8px;padding:8px 5px}.head-actions{gap:4px}}
/* Small screens: keep the villa brand on a single line, clear of status and buttons. */
@media(max-width:800px){.site-head .brand .micro{display:none}.site-head .brand h1{font-size:15px;letter-spacing:.025em;white-space:nowrap;margin:10px 0 0}.location-bar{top:calc(env(safe-area-inset-top) + 62px)}}
@media(max-height:600px) and (orientation:landscape){.location-bar{top:calc(env(safe-area-inset-top) + 64px)}.map-dock{top:calc(env(safe-area-inset-top) + 111px)}}