/* Experience 08: predictable reach zones, safe areas, dynamic viewport and opt-in sensors. */
:root{--vm8-safe-top:env(safe-area-inset-top,0px);--vm8-safe-bottom:env(safe-area-inset-bottom,0px);--vm8-safe-left:env(safe-area-inset-left,0px);--vm8-safe-right:env(safe-area-inset-right,0px)}
.vm8-toolbar,.vm8-thumb-controls{display:none}
.vm8-experience .mobile-look-tip{display:none!important}
.vm8-experience .vm8-motion-panel,.vm8-experience .vm8-coach{position:absolute;z-index:38;background:#122b38f7;border:1px solid #92b1be66;color:#eff3ef;box-shadow:0 20px 65px #06182044;border-radius:14px;padding:22px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom;scrollbar-width:thin;scrollbar-color:#668793 #19313d}
.vm8-motion-panel{right:calc(3% + 180px);top:156px;width:360px;max-height:calc(100dvh - 195px)}
.vm8-coach{left:50%;top:170px;transform:translateX(-50%);width:390px;max-height:calc(100dvh - 210px)}
.vm8-sheet-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:-9px -9px 4px 0}
.vm8-sheet-heading>span{font:9px/1.5 Arial,sans-serif;letter-spacing:1.5px;color:#b5cdd2}
.vm8-sheet-heading>button{width:44px;height:44px;border-radius:50%;font-size:26px;color:#dbe9e9;flex-shrink:0}
.vm8-sheet-heading>button:hover{background:#ffffff14}
.vm8-motion-panel h2,.vm8-coach h2{font-size:33px;line-height:1.03;letter-spacing:-1.25px;margin:3px 0 15px;font-weight:700}
.vm8-motion-intro{font-size:12px;line-height:1.8;color:#c8d9db;margin-bottom:16px}
.vm8-sensor-status{display:flex;align-items:start;gap:9px;border:1px solid #aeced42b;background:#ffffff07;border-radius:7px;padding:12px;margin:12px 0 14px;font-size:11px;line-height:1.7;color:#d5e2e2}
.vm8-sensor-status i{height:7px;width:7px;margin-top:5px;background:#9ab6c1;border-radius:50%;flex-shrink:0}
[data-status="on"] .vm8-sensor-status i{background:#a4dec5;box-shadow:0 0 0 4px #9bcdb119}
[data-status="denied"] .vm8-sensor-status,[data-status="blocked"] .vm8-sensor-status,[data-status="unavailable"] .vm8-sensor-status,[data-status="insecure"] .vm8-sensor-status{border-color:#d2b17066;color:#f2dfb6}
.vm8-experience .vm8-main-action{display:flex;align-items:center;justify-content:center;min-height:48px;padding:13px 16px;width:100%;border-radius:7px;background:#cfe7e8;color:#16303b;font-weight:700;font-size:13px;line-height:1.5;border:1px solid #dcecee}
.vm8-main-action:hover{background:#e1f2ef}
.vm8-motion-options{display:grid;grid-template-columns:1fr 1fr;gap:11px;margin:15px 0;align-items:end}
.vm8-motion-options>button{height:47px;border:1px solid #97b8c452;border-radius:7px;font-size:12px;color:#e1eeee;padding:9px}
.vm8-motion-options label{display:flex;flex-direction:column;gap:5px;font-size:10px;color:#c5d6d8}
.vm8-motion-options select{width:100%;min-height:47px;border-radius:7px;border:1px solid #97b8c452;background:#233e4a;color:#eef5f1;padding:8px 11px;font-size:16px}
.vm8-privacy{font-size:10px;line-height:1.8;color:#aec6cd;margin:16px 0 4px}
.vm8-text-button{font-size:11px;text-align:left;color:#cce9eb;min-height:44px;padding:9px 0;width:100%;border-top:1px solid #bdd3dc20;margin-top:12px}
.vm8-desktop-phone{position:absolute;right:3%;top:154px;z-index:19;display:flex;gap:8px;align-items:center;padding:10px 13px;border:1px solid #bdd4da48;background:#223d49ef;color:#f1f4ec;border-radius:7px;min-height:44px;font-size:11px}
.vm8-desktop-phone svg,.vm8-extra-controls svg{width:18px;height:18px}
.vm8-extra-controls{display:grid;gap:5px;border-top:1px solid #adcfdb25;margin-top:12px;padding-top:9px}
.vm8-extra-controls button{display:flex;align-items:center;gap:8px;text-align:left;font-size:11px;min-height:44px;padding:8px;border:1px solid #bad3dd25;border-radius:5px;color:#e1edeb}
.vm8-extra-controls button:hover{background:#afc9ce20}
.vm8-experience .navigation-panel{max-height:calc(100dvh - 220px);overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y pinch-zoom}
.vm8-experience .navigation-panel .walk-pad button{min-height:44px}
.vm8-experience .navigation-panel .walk-pad{grid-template-rows:repeat(3,44px)}
.vm8-experience .navigation-panel .navigation-hint{font-size:9px;line-height:1.6}
.vm8-experience .navigation-panel .touch-look-toggle{display:flex;justify-content:space-between;gap:8px;min-height:44px;border:1px solid #9cbdc44d;border-radius:5px;width:100%;font-size:11px;line-height:1.5;padding:8px;background:#294753;color:#edf4ef;margin-top:10px}
.vm8-coach-row{display:flex;gap:13px;margin:18px 0;align-items:start}
.vm8-coach-row>b{font-size:10px;color:#9fbcc4;border:1px solid #bad1d944;min-width:29px;height:29px;border-radius:50%;display:grid;place-items:center;margin-top:1px}
.vm8-coach-row p{font-size:12px;line-height:1.7;color:#b8cdd1}
.vm8-coach-row strong{display:block;color:#ecf2ed;font-size:12px;margin-bottom:1px}
.vm8-coach-note{font-size:10px;line-height:1.75;color:#b2c7ce;margin:15px 0 0}
.vm8-touch .vm8-desktop-phone{display:none}
.vm8-touch.free-navigation .walkway{height:var(--vm8-visible-height,100dvh)}
.vm8-touch .mall-stage{height:var(--vm8-visible-height,100dvh);min-height:0}
.vm8-touch.free-navigation #mall-stage,.vm8-touch.free-navigation #mall-canvas{touch-action:pinch-zoom}
.vm8-touch .site-header,.vm8-touch .site-header.scrolled{height:calc(64px + var(--vm8-safe-top));padding-top:var(--vm8-safe-top);padding-left:max(16px,var(--vm8-safe-left));padding-right:max(16px,var(--vm8-safe-right))}
.vm8-touch .site-header .brand>span{font-size:15px}.vm8-touch .brand small{font-size:5px}
.vm8-touch .brand-mark{width:25px;height:25px}
.vm8-touch .desktop-nav,.vm8-touch .header-lease,.vm8-touch .search-trigger{display:none!important}
.vm8-touch .mobile-menu{display:flex!important}
.vm8-touch .site-header .icon-btn,.vm8-touch .site-header .bag-button{min-width:44px;height:44px}
.vm8-touch .header-actions{gap:2px}.vm8-touch .cart-count{margin-left:2px}
.vm8-touch .district-nav,.vm8-touch.walking-started .district-nav{top:calc(72px + var(--vm8-safe-top));left:max(12px,var(--vm8-safe-left));right:max(12px,var(--vm8-safe-right));gap:5px;display:flex;justify-content:space-between}
.vm8-touch .district-nav button{min-height:44px;min-width:0;flex:1;padding:9px 6px;font-size:10px;line-height:1.35}
.vm8-touch .district-nav button span{display:none}
.vm8-touch .district-location,.vm8-touch.walking-started .district-location{top:calc(127px + var(--vm8-safe-top));left:max(14px,var(--vm8-safe-left));max-width:88%;padding:9px 11px}
.vm8-touch .district-location span{font-size:10px}.vm8-touch .district-location small{display:none}
.vm8-touch .stage-bottom,.vm8-touch .district-controls-toggle,.vm8-touch .walk-guide{display:none!important}
.vm8-touch .vm8-toolbar{position:absolute;display:flex;align-items:stretch;justify-content:space-between;gap:4px;z-index:30;bottom:calc(14px + var(--vm8-safe-bottom));left:max(12px,var(--vm8-safe-left));right:max(12px,var(--vm8-safe-right));padding:5px;border:1px solid #a8c5ce50;border-radius:12px;background:#183440f5;box-shadow:0 9px 30px #06202a25}
.vm8-toolbar>button{flex:1;min-width:0;min-height:52px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;font-size:10px;border-radius:7px;color:#dfeded;position:relative;padding:5px}
.vm8-toolbar>button>svg{width:19px;height:19px}
.vm8-toolbar>button:hover,.vm8-toolbar>button[aria-expanded=true]{background:#d1e3e921}
.vm8-toolbar>button.on{background:#c7e4dc;color:#163d3c}
.vm8-toolbar>button>i{position:absolute;right:13px;top:9px;height:5px;width:5px;background:#226c50;border-radius:50%}
.vm8-touch .prototype-badge{bottom:calc(1px + var(--vm8-safe-bottom));left:16px;font-size:6px;line-height:1.6;letter-spacing:.55px;max-width:93%;color:#9cb7be}
.vm8-touch .vm8-thumb-controls{position:absolute;left:max(18px,var(--vm8-safe-left));right:max(18px,var(--vm8-safe-right));bottom:calc(95px + var(--vm8-safe-bottom));height:124px;display:flex;justify-content:space-between;align-items:end;z-index:18;pointer-events:none;user-select:none}
.vm8-joystick-area>span,.vm8-look-actions>span{display:block;font-size:8px;font-weight:600;letter-spacing:1.25px;color:#eef7f3;text-shadow:0 1px 5px #001d2c;margin:0 0 10px;text-align:center;pointer-events:none}
.vm8-joystick-area{width:98px}
#vm8-joystick{position:relative;display:block;width:98px;height:98px;border-radius:50%;border:1px solid #d0e5e968;background:#15303cc7;pointer-events:auto;touch-action:none;-webkit-user-select:none;user-select:none;box-shadow:inset 0 0 20px #b3d9e80b;--stick-x:0px;--stick-y:0px}
#vm8-joystick:active{transform:none}
.vm8-stick-ring{position:absolute;inset:18px;border:1px solid #b5d9e535;border-radius:50%}
.vm8-stick-knob{position:absolute;top:30px;left:30px;width:36px;height:36px;border-radius:50%;background:#c9e2e6cc;box-shadow:0 3px 9px #081c2655;transform:translate(var(--stick-x),var(--stick-y));pointer-events:none}
#vm8-joystick.active{border-color:#daede9;background:#23434eed}
#vm8-joystick.active .vm8-stick-knob{background:#e3f2ea}
.vm8-look-actions{pointer-events:none}
.vm8-look-actions>div{display:flex;gap:7px}
.vm8-look-actions button{pointer-events:auto;min-width:66px;height:60px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border-radius:8px;border:1px solid #d1e5e650;background:#163442d9;color:#edf7f1;font-size:23px}
.vm8-look-actions button small{font-size:9px;line-height:1.2}
.vm8-touch .navigation-panel{display:none;top:auto;right:max(12px,var(--vm8-safe-right));bottom:calc(88px + var(--vm8-safe-bottom));width:205px;padding:13px;max-height:calc(var(--vm8-visible-height,100dvh) - 222px - var(--vm8-safe-top) - var(--vm8-safe-bottom));z-index:35;border-radius:12px;background:#173440f7}
.vm8-touch .controls-expanded .navigation-panel{display:block}
.vm8-touch .navigation-panel .walk-pad{grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,46px);gap:6px;justify-content:center}
.vm8-touch .navigation-panel .walk-pad button{min-height:46px;min-width:48px}
.vm8-touch .navigation-panel .browse-website{min-height:44px;font-size:11px}
.vm8-touch .navigation-panel .navigation-hint{display:block;line-height:1.7;font-size:9px;margin:10px 0}
.vm8-touch .navigation-panel .navigation-mode{display:none}
.vm8-touch .district-store-actions{bottom:calc(231px + var(--vm8-safe-bottom));left:max(12px,var(--vm8-safe-left));right:max(12px,var(--vm8-safe-right));transform:none;justify-content:center;max-width:440px;margin:auto;gap:6px}
.vm8-touch .district-store-actions button{min-height:44px;min-width:54px;padding:9px 10px;font-size:11px;gap:5px}
.vm8-touch .district-store-actions button.primary{min-width:120px;flex:1}
.vm8-touch .controls-expanded .district-store-actions,.vm8-touch .vm8-panel-open .district-store-actions,.vm8-touch .vm8-coach-open .district-store-actions{display:none!important}
.vm8-touch .district-guide{top:calc(172px + var(--vm8-safe-top));left:max(12px,var(--vm8-safe-left));right:max(12px,var(--vm8-safe-right));bottom:auto;width:auto;max-width:420px;margin:0 auto;padding:12px 15px;max-height:calc(var(--vm8-visible-height,100dvh) - 445px);overflow-y:auto;touch-action:pan-y pinch-zoom}
.vm8-touch .district-guide>p{font-size:20px;line-height:1.15;margin:3px 0 12px}
.vm8-touch .guide-choices{flex-wrap:wrap;gap:6px}
.vm8-touch .guide-choices button{min-height:44px;min-width:70px;font-size:10px}
.vm8-touch .guide-heading button{min-height:44px;min-width:44px}
.vm8-touch .guide-heading>span{font-size:8px}
.vm8-touch .district-guide>small{font-size:9px;line-height:1.6}
.vm8-touch .vm8-motion-panel{top:auto;bottom:calc(87px + var(--vm8-safe-bottom));left:max(12px,var(--vm8-safe-left));right:max(12px,var(--vm8-safe-right));margin:0 auto;width:auto;max-width:440px;max-height:calc(var(--vm8-visible-height,100dvh) - 157px - var(--vm8-safe-top) - var(--vm8-safe-bottom));padding:19px}
.vm8-touch .vm8-coach{top:calc(139px + var(--vm8-safe-top));bottom:auto;left:50%;right:auto;transform:translateX(-50%);width:min(420px,calc(100% - 24px));max-height:calc(var(--vm8-visible-height,100dvh) - 237px - var(--vm8-safe-top) - var(--vm8-safe-bottom));padding:19px}
.vm8-touch .vm8-motion-panel h2,.vm8-touch .vm8-coach h2{font-size:32px}
.vm8-touch input,.vm8-touch select,.vm8-touch textarea{font-size:16px!important}
.vm8-touch dialog{max-height:calc(var(--vm8-visible-height,100dvh) - 24px - var(--vm8-safe-top) - var(--vm8-safe-bottom));scroll-padding-bottom:20px}
.vm8-touch .modal-top .close-modal{min-width:44px;min-height:44px}
.vm8-touch .district-map-list button,.vm8-touch .category-filter button{min-height:44px}
.vm8-touch .hero-copy{top:26%;left:6%;right:6%;max-width:540px}
.vm8-touch .hero-copy h1{font-size:clamp(44px,12vw,74px)}
.vm8-touch .hero-copy p{font-size:12px;max-width:330px}
.vm8-touch .hero-actions{flex-wrap:wrap;gap:12px;margin-top:22px}
.vm8-touch .hero-caption{font-size:7px}
@media(max-width:355px){
 .vm8-touch .site-header .brand>span{font-size:13px}.vm8-touch .brand small{letter-spacing:1px}
 .vm8-touch .hero-copy h1{font-size:42px}.vm8-touch .hero-actions{gap:6px}.vm8-touch .hero-actions .text-btn{font-size:10px}
 .vm8-look-actions button{min-width:60px}.vm8-look-actions>span{font-size:7px}
 .vm8-toolbar>button{font-size:9px}.vm8-touch .vm8-coach h2{font-size:27px}
 .vm8-touch .district-guide{max-height:calc(var(--vm8-visible-height,100dvh) - 390px)}
}
@media(max-height:520px) and (orientation:landscape){
 .vm8-touch .site-header,.vm8-touch .site-header.scrolled{height:calc(48px + var(--vm8-safe-top))}
 .vm8-touch .district-nav,.vm8-touch.walking-started .district-nav{top:calc(52px + var(--vm8-safe-top));left:max(16px,var(--vm8-safe-left));right:max(16px,var(--vm8-safe-right));max-width:430px;margin:auto}
 .vm8-touch .district-nav button{min-height:40px}
 .vm8-touch .district-location,.vm8-touch.walking-started .district-location{top:calc(105px + var(--vm8-safe-top));padding:7px 10px;max-width:38%}
 .vm8-touch .hero-copy{top:111px;left:max(24px,var(--vm8-safe-left));max-width:360px}
 .vm8-touch .hero-copy h1{font-size:35px;line-height:1.0;margin:8px 0}.vm8-touch .hero-copy .eyebrow{font-size:6px}
 .vm8-touch .hero-copy p,.vm8-touch .hero-caption{display:none}.vm8-touch .hero-actions{margin-top:10px;flex-wrap:nowrap;gap:18px}
 .vm8-touch .hero-actions .btn{min-height:43px;padding:9px 16px;font-size:11px}
 .vm8-touch .vm8-toolbar{max-width:360px;left:50%;right:auto;transform:translateX(-50%);width:44%;min-width:300px;bottom:calc(9px + var(--vm8-safe-bottom))}
 .vm8-toolbar>button{min-height:44px;gap:3px;font-size:9px}.vm8-toolbar>button>svg{width:16px;height:16px}
 .vm8-touch .vm8-thumb-controls{bottom:calc(30px + var(--vm8-safe-bottom));height:106px}
 #vm8-joystick{width:86px;height:86px}.vm8-joystick-area{width:86px}.vm8-stick-knob{top:24px;left:24px}
 .vm8-look-actions button{min-width:55px;height:55px}.vm8-look-actions>div{gap:5px}.vm8-look-actions>span{font-size:7px}
 .vm8-touch .district-store-actions{bottom:calc(83px + var(--vm8-safe-bottom));max-width:330px;left:50%;right:auto;transform:translateX(-50%);width:45%}
 .vm8-touch .district-store-actions button{font-size:10px;min-width:48px;padding:8px}.vm8-touch .district-store-actions button.primary{min-width:110px}
 .vm8-touch .district-guide{left:auto;right:max(15px,var(--vm8-safe-right));top:105px;max-width:320px;max-height:calc(var(--vm8-visible-height,100dvh) - 205px);width:38%}
 .vm8-touch .district-guide>p{font-size:17px}.vm8-touch .guide-choices button{font-size:9px}
 .vm8-touch .vm8-motion-panel{top:calc(65px + var(--vm8-safe-top));bottom:calc(73px + var(--vm8-safe-bottom));left:50%;right:auto;transform:translateX(-50%);width:390px;max-width:calc(100% - 130px);max-height:none}
 .vm8-touch .vm8-coach{top:calc(62px + var(--vm8-safe-top));max-height:calc(var(--vm8-visible-height,100dvh) - 142px - var(--vm8-safe-bottom));width:410px;max-width:calc(100% - 130px)}
 .vm8-touch .navigation-panel{top:calc(65px + var(--vm8-safe-top));bottom:calc(74px + var(--vm8-safe-bottom));max-height:none}
}
@media(prefers-reduced-motion:reduce){.vm8-experience .vm8-stick-knob{transition:none}.vm8-experience *{scroll-behavior:auto}}
[hidden]{display:none!important}
/* Remove stale hero copy immediately after entry, including during short-viewport transitions. */
.vm8-experience .vm8-walking .hero-copy{visibility:hidden!important;opacity:0!important;pointer-events:none!important}
.vm8-experience:not(.vm8-touch) .vm8-extra-controls,.vm8-experience:not(.vm8-touch) .touch-look-toggle{display:none!important}
.vm8-motion-panel .vm8-sheet-heading,.vm8-coach .vm8-sheet-heading{position:sticky;top:-22px;z-index:2;background:#122b38;padding-top:3px;padding-bottom:3px}
@media(max-width:1024px){.vm8-motion-panel .vm8-sheet-heading,.vm8-coach .vm8-sheet-heading{top:-19px}}
