@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&display=swap');
:root{--ink:#183d34;--lime:#e0edb2;--sans:'Be Vietnam Pro',Arial,sans-serif;--serif:'Playfair Display',Georgia,serif}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#1b382d;color:white;font:14px var(--sans)}button,input{font:inherit}button{cursor:pointer;border:0;color:inherit}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #deeea9;outline-offset:5px}button,a{transition:background .2s,transform .2s,opacity .2s}button:hover{filter:brightness(1.08)}[hidden]{display:none!important}.screen{position:fixed;inset:0;height:100dvh;animation:screenIn .6s ease}.panorama-stage{position:fixed;inset:0;background:#1c3329}.panorama-stage canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}.panorama-stage canvas:active{cursor:grabbing}.panorama-shade{position:absolute;inset:0;background:linear-gradient(180deg,#0b241e80,transparent 30%,transparent 60%,#0b241e88);pointer-events:none;transition:background .7s}.image-fallback{position:absolute;inset:0;background:url('./panoramas/ba-dinh-square.jpg') center/cover}.loading{position:absolute;inset:0;background:#173c32;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:20;font-size:11px}.loading>span{width:32px;height:32px;border:1px solid #fff3;border-top-color:var(--lime);border-radius:50%;animation:spin 1.2s linear infinite}.loading p{margin-top:20px;letter-spacing:1px}.intro-screen{display:flex;flex-direction:column;justify-content:space-between;padding:32px 4% 45px;background:linear-gradient(180deg,#102b2366,#102b2355 20%,#102b23a6 70%,#102b23b8);text-align:center}.intro-top,.intro-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px}.brand{font-size:28px;letter-spacing:-1.5px;font-weight:600;display:inline-flex;align-items:baseline;text-shadow:0 1px 20px #0003}.brand span{font-weight:400}.brand sup{font-size:16px;top:-.8em;position:relative}.experience-tag{font-size:8px;letter-spacing:1.7px;display:flex;align-items:center;gap:9px}.experience-tag i,.map-bottom i{width:5px;height:5px;border-radius:100%;background:var(--lime);display:inline-block}.intro-center{margin-top:-20px}.intro-eyebrow{font-size:9px;letter-spacing:3px;display:flex;align-items:center;justify-content:center;gap:18px;color:#f0f4e8}.intro-eyebrow>span{width:35px;height:1px;background:#eff5dc55}.intro-center h1{font:500 clamp(44px,5.6vw,83px)/1.2 var(--serif);letter-spacing:-1.6px;margin:26px 0 22px;text-shadow:0 4px 35px #15352955}.intro-center h1 em{font-weight:500;color:#e4edc9}.intro-center>p{font-size:12px;letter-spacing:.3px;color:#e8eee1;line-height:1.9}.explore-button{display:inline-flex;align-items:center;justify-content:center;gap:34px;background:var(--lime);color:var(--ink);padding:18px 30px;border-radius:40px;margin-top:27px;font-size:12px;font-weight:500;box-shadow:0 4px 40px #132f2355}.explore-button>span{font-size:24px;line-height:1}.explore-button:hover{transform:translateY(-3px);background:#eef8c9}.intro-step{font-size:7px;letter-spacing:2px;margin-top:22px;color:#d6dfd0}.intro-step>span{font-size:8px;border:1px solid #ffffff40;border-radius:50%;display:inline-grid;place-items:center;width:21px;height:21px;margin-right:8px}.intro-place{display:flex;align-items:center;gap:14px;text-align:left}.place-symbol{width:41px;height:41px;border:1px solid #ffffff40;border-radius:50%;display:grid;place-items:center;font-size:22px}.intro-place small{display:block;font-size:7px;letter-spacing:2px;color:#d5decf}.intro-place strong{display:block;font-size:12px;font-weight:400;margin-top:7px}.intro-bottom-note{font-size:9px;letter-spacing:.6px;opacity:.65}.round-button{width:43px;height:43px;display:grid;place-items:center;border:1px solid #ffffff55;border-radius:50%;background:#153c2d33;backdrop-filter:blur(15px);font-size:21px;color:#fff;flex-shrink:0}.global-credit{position:fixed;bottom:11px;left:4%;right:4%;display:flex;justify-content:space-between;gap:12px;color:#f2f5e7;opacity:.65;font-size:7px;z-index:30;pointer-events:none}.global-credit a{pointer-events:auto}.global-credit a:hover{text-decoration:underline;opacity:1}body[data-view="map"] .global-credit{display:none}.map-screen{color:var(--ink);background:#cdd8c4}.map-screen #map{position:absolute;inset:0;background:#cdd8c4;z-index:0}.map-tone{position:absolute;inset:0;pointer-events:none;z-index:400;box-shadow:inset 0 0 150px #18372a22;background:linear-gradient(#f5f5e422,transparent 20%)}.leaflet-tile-pane{filter:saturate(.6)}.map-top{position:absolute;top:28px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:center;z-index:450;pointer-events:none}.map-top>*{pointer-events:auto}.map-heading{display:flex;align-items:center;gap:15px;background:#fcfcf1f2;padding:12px 20px 12px 12px;border:1px solid #ffffff99;border-radius:40px;box-shadow:0 4px 30px #1f392512;backdrop-filter:blur(15px)}.map-heading .round-button{background:var(--ink);width:36px;height:36px;border:0;font-size:18px}.map-heading small{font-size:6px;letter-spacing:2px;display:block;color:#7d8977}.map-heading h1{font-size:13px;font-weight:500;margin:5px 0 0}.map-brand{color:var(--ink);background:#fcfcf1e8;border-radius:25px;padding:8px 18px;font-size:23px}.map-brand sup{font-size:12px}.destination-panel{position:absolute;left:32px;top:122px;width:280px;z-index:450;border-radius:15px;background:#fafbf1f5;box-shadow:0 10px 50px #18352720;backdrop-filter:blur(20px);overflow:hidden;border:1px solid #fff9}.panel-label{display:flex;align-items:center;gap:8px;font-size:8px;letter-spacing:1.5px;padding:17px 19px;border-bottom:1px solid #dfe4d5}.destination-count{background:#e9eedc;color:#687954;font-size:8px;padding:3px 6px;border-radius:10px;letter-spacing:0}.panel-label>button{margin-left:auto;background:transparent;font-size:18px;line-height:1;color:#657757;width:22px;height:22px}.destination-item{display:flex;align-items:center;width:100%;gap:11px;text-align:left;padding:20px 19px;background:none}.destination-item strong{font-size:11px;font-weight:500;display:block}.destination-item small{font-size:8px;color:#8a9581;margin-top:7px;display:block}.destination-item>span:last-child{margin-left:auto;font-size:18px;color:#6c7f58}.destination-icon{font-size:24px;color:#768959}.destination-photo{height:130px;position:relative;margin:0 18px;border-radius:8px;overflow:hidden}.destination-photo img{width:100%;height:100%;object-fit:cover}.photo-badge{position:absolute;bottom:10px;right:10px;background:#153d32a6;color:#fff;padding:5px 9px;font-size:8px;border-radius:15px;backdrop-filter:blur(10px)}#destination-content>p{font-size:9px;line-height:1.9;color:#7f8a73;margin:15px 19px}.view-panorama{display:flex;align-items:center;justify-content:space-between;margin:0 18px 18px;width:calc(100% - 36px);background:var(--ink);color:white;border-radius:7px;padding:14px 17px;font-size:10px}.view-panorama span{font-size:18px;line-height:1}.map-toolbar{position:absolute;right:30px;bottom:78px;z-index:450;display:flex;flex-direction:column;gap:12px}.map-toolbar .round-button{color:var(--ink);background:#fafbf2ee;border-color:white;box-shadow:0 2px 15px #27382115}.zoom-stack{background:#fafbf2f0;border-radius:25px;box-shadow:0 2px 15px #27382115;padding:5px;display:flex;flex-direction:column}.zoom-stack button{background:transparent;color:var(--ink);width:33px;height:35px;font-size:21px}.zoom-stack button+button{border-top:1px solid #dfe3d6}.map-bottom{position:absolute;bottom:32px;left:32px;right:90px;z-index:450;display:flex;gap:20px;justify-content:space-between;pointer-events:none}.map-bottom span{background:#fafbf1e8;padding:10px 14px;border-radius:20px;font-size:8px;letter-spacing:.3px}.map-bottom i{background:#738e50;margin-right:5px}.map-marker{border:0!important;background:none!important}.marker-body{background:#fffdf4;padding:7px;border-radius:50%;box-shadow:0 4px 30px #193b3344;width:72px;height:72px;position:relative;animation:markerIn .8s ease;display:grid;place-items:center}.marker-body:after{content:'';position:absolute;width:16px;height:16px;background:#fffdf4;bottom:-5px;left:28px;rotate:45deg;z-index:-1}.marker-body:before{content:'';position:absolute;inset:-12px;border:1px solid #496b4f55;border-radius:50%}.leaflet-container .leaflet-marker-pane .marker-body img{width:58px!important;height:58px!important;object-fit:cover;border-radius:50%}.marker-label{position:absolute;top:89px;left:36px;transform:translateX(-50%);font:500 11px var(--sans);color:var(--ink);white-space:nowrap;background:#fffef4;padding:10px 16px;border-radius:5px;box-shadow:0 3px 15px #193b3322;text-align:center}.marker-label small{display:block;font-size:7px;font-weight:400;color:#8a967b;margin-top:5px;letter-spacing:.4px}.leaflet-container{font-family:var(--sans)}.leaflet-control-attribution{font-size:8px!important;background:#fafbf1e8!important;color:#64725b!important;padding:3px 7px!important;max-width:90vw}.leaflet-control-attribution a{color:#3d614a!important}.map-marker:focus-visible{outline:3px solid #1a4b36!important;border-radius:50%}#map-error{position:absolute;bottom:82px;left:32px;z-index:450;max-width:300px;background:#fffdf1;padding:14px 18px;border-radius:8px;font-size:10px;line-height:1.7;box-shadow:0 5px 20px #193b3322}.tour-screen{pointer-events:none}.tour-screen button,.tour-screen a,.info-panel{pointer-events:auto}.tour-top{position:absolute;left:30px;right:30px;top:27px;display:flex;align-items:center;justify-content:space-between;gap:15px}.glass-button{display:flex;align-items:center;gap:12px;background:#183b2e55;border:1px solid #ffffff50;backdrop-filter:blur(15px);padding:12px 18px;border-radius:25px;font-size:16px}.glass-button span{font-size:10px}.tour-heading{text-align:center;text-shadow:0 2px 20px #16322580}.tour-heading small{font-size:7px;letter-spacing:2px;opacity:.8}.tour-heading h1{font:500 28px var(--serif);margin:8px 0}.tour-side{position:absolute;left:30px;top:45%;display:flex;flex-direction:column;align-items:center;gap:18px;font-size:11px;opacity:.65}.vertical-label{writing-mode:vertical-rl;font-size:6px;letter-spacing:2px}.vertical-line{height:40px;width:1px;background:#fff7}.tour-bottom{position:absolute;bottom:45px;left:20px;right:20px;display:flex;flex-direction:column;align-items:center;gap:17px}.tour-hint{font-size:20px;display:flex;gap:10px;align-items:center;opacity:.8;text-shadow:0 1px 8px #0007}.tour-hint span{font-size:9px;letter-spacing:.4px}.tour-controls{background:#15352fbd;backdrop-filter:blur(18px);display:flex;align-items:center;gap:4px;padding:7px 10px;border:1px solid #ffffff40;border-radius:40px;box-shadow:0 5px 35px #15332730}.tour-controls button{display:flex;align-items:center;gap:8px;padding:10px 13px;background:transparent;border-radius:30px;font-size:21px;height:43px;min-width:40px;justify-content:center}.tour-controls button span{font-size:9px;white-space:nowrap}.tour-controls button:hover{background:#ffffff18}.tour-controls button[aria-pressed="true"],.tour-controls button[aria-expanded="true"]{background:var(--lime);color:var(--ink)}.control-divider{height:20px;width:1px;background:#ffffff30;margin:0 4px}.tour-meta{width:440px;max-width:85vw;display:flex;justify-content:space-between;gap:20px;font-size:6px;letter-spacing:2px;opacity:.6}.info-panel{position:absolute;right:30px;top:125px;bottom:165px;width:340px;max-height:520px;overflow:auto;border-radius:12px;background:#f8faefed;backdrop-filter:blur(25px);padding:30px 25px;color:var(--ink);box-shadow:0 8px 40px #10291c20;animation:screenIn .3s ease}.close-info,.close-credits{position:absolute;top:13px;right:15px;width:28px;height:28px;background:#e4e9d8;border-radius:50%;font-size:22px;line-height:1;color:var(--ink)}.panel-kicker{font-size:6px;letter-spacing:1.5px;color:#849174}.info-panel h2{font:500 32px/1.3 var(--serif);margin:16px 0}.info-panel img{height:125px;width:100%;object-fit:cover;border-radius:6px}.info-panel p{font-size:11px;line-height:1.9;color:#6c7d61}.info-panel .info-note{font-size:9px;border-top:1px solid #d9dfcd;padding-top:14px}.info-map{font-size:10px;background:none;padding:8px 0;border-bottom:1px solid #a7b79a}dialog{border:1px solid #fff8;background:#f8faed;color:var(--ink);border-radius:14px;max-width:480px;width:calc(100% - 36px);padding:38px}dialog::backdrop{background:#183c2f77;backdrop-filter:blur(8px)}dialog small{font-size:7px;letter-spacing:2px;color:#7c8c6a}dialog h2{font:500 33px/1.3 var(--serif);margin:16px 0}dialog p{font-size:11px;line-height:2;color:#6e7d60}dialog a{font-size:11px;text-decoration:underline;display:block;margin-top:20px}.toast{position:fixed;bottom:130px;left:50%;transform:translateX(-50%);background:#f5f8e9;color:var(--ink);border-radius:8px;padding:15px 20px;font-size:11px;line-height:1.8;max-width:90vw;z-index:1000;box-shadow:0 10px 35px #17382a33;text-align:center}@keyframes screenIn{from{opacity:0}to{opacity:1}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes markerIn{from{transform:translateY(-20px);opacity:0}to{transform:translateY(0);opacity:1}}
@media(max-width:760px){.intro-screen{padding:25px 6% 47px}.brand{font-size:24px}.brand sup{font-size:12px}.experience-tag{font-size:6px;letter-spacing:1px;max-width:125px;line-height:1.8;text-align:right}.experience-tag i{flex-shrink:0}.intro-center{margin-top:-25px}.intro-center h1{font-size:36px;letter-spacing:-1.1px;line-height:1.25;margin:23px 0 20px}.intro-eyebrow{font-size:7px;letter-spacing:2.5px;gap:12px}.intro-eyebrow>span{width:23px}.intro-center>p{font-size:10px}.explore-button{padding:17px 25px;font-size:11px;gap:35px;margin-top:25px}.intro-step{font-size:6px;letter-spacing:1.4px;margin-top:19px}.intro-bottom-note{display:none}.intro-place{gap:10px}.intro-place small{font-size:6px}.intro-place strong{font-size:10px}.place-symbol{width:35px;height:35px;font-size:20px}.round-button{width:37px;height:37px;font-size:19px}.global-credit{left:6%;right:6%;font-size:5px;bottom:12px;line-height:1.7}.map-top{left:16px;right:16px;top:18px;gap:10px}.map-heading{padding:9px 16px 9px 9px;gap:10px}.map-heading small{font-size:5px;letter-spacing:1.5px}.map-heading h1{font-size:11px;margin-top:4px}.map-heading .round-button{width:30px;height:30px;font-size:16px}.map-brand{font-size:18px;padding:8px 12px}.map-brand sup{font-size:10px}.destination-panel{left:16px;right:16px;top:auto;bottom:68px;width:auto;max-width:380px;border-radius:12px}.panel-label{padding:10px 15px;font-size:7px}.destination-photo{display:none}.destination-item{padding:16px 15px;gap:10px}.destination-item strong{font-size:11px}.destination-item small{font-size:7px}.destination-icon{font-size:24px}#destination-content>p{display:none}.view-panorama{margin:0 15px 15px;width:calc(100% - 30px);padding:13px 16px;font-size:10px}.map-bottom{left:16px;right:16px;bottom:25px;justify-content:flex-start}.map-bottom span{font-size:7px;padding:9px 12px}.map-bottom span+span{display:none}.map-toolbar{right:16px;top:100px;bottom:auto;gap:10px}.zoom-stack{padding:3px}.zoom-stack button{width:31px;height:30px}.map-toolbar .round-button{width:37px;height:37px}.marker-body{width:60px;height:60px;padding:5px}.leaflet-container .leaflet-marker-pane .marker-body img{width:50px!important;height:50px!important}.marker-body:after{left:23px;width:14px;height:14px}.marker-label{top:76px;left:30px;font-size:10px;padding:9px 12px}.marker-label small{font-size:6px}.marker-body:before{inset:-9px}#map-error{left:16px;bottom:290px;right:66px;max-width:none;font-size:9px}.leaflet-control-attribution{font-size:6px!important}.tour-top{left:16px;right:16px;top:23px;gap:10px}.tour-heading h1{font-size:20px;margin-top:7px}.tour-heading small{font-size:6px;letter-spacing:1.5px}.glass-button{width:37px;height:37px;padding:0;display:grid;place-items:center;border-radius:50%;font-size:17px}.glass-button span{display:none}.tour-side{left:18px;gap:13px;font-size:9px}.vertical-label{font-size:5px;letter-spacing:1.5px}.vertical-line{height:30px}.tour-bottom{bottom:48px;left:12px;right:12px;gap:14px}.tour-controls{gap:0;padding:5px 7px;max-width:100%;border-radius:30px}.tour-controls button{height:40px;padding:7px 9px;min-width:34px;font-size:20px;gap:5px}.tour-controls button span{display:none}.control-divider{margin:0 4px;height:18px}.tour-hint{font-size:17px;gap:8px}.tour-hint span{font-size:8px}.tour-meta{font-size:5px;letter-spacing:1.5px;width:305px}.info-panel{left:16px;right:16px;top:111px;bottom:170px;width:auto;max-height:none;padding:25px 22px}.info-panel h2{font-size:29px;margin:14px 0}.info-panel img{height:100px}.info-panel p{font-size:10px}.info-panel .info-note{font-size:8px}dialog{padding:34px 25px}dialog h2{font-size:29px}}
@media(max-height:560px){.intro-screen{padding-top:18px;padding-bottom:35px}.intro-center{margin-top:0}.intro-center h1{font-size:38px;margin:10px 0}.intro-center>p{font-size:9px;margin:8px}.intro-eyebrow{font-size:7px}.explore-button{padding:12px 24px;margin-top:12px}.intro-step{display:none}.intro-bottom .intro-place{display:none}.intro-bottom{justify-content:flex-end}.tour-bottom{bottom:33px;gap:8px}.tour-top{top:15px}.info-panel{top:90px;bottom:135px}.destination-panel{top:100px;bottom:auto}.destination-photo{height:80px}.destination-panel #destination-content>p{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.scene-hotspots{position:absolute;inset:0;pointer-events:none}.scene-hotspot{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;gap:14px;background:none;padding:10px;color:white;pointer-events:auto;z-index:2}.hotspot-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:#f2f7dfe8;color:#274e39;font-size:26px;border:1px solid #fff;box-shadow:0 0 0 8px #f4fad12b,0 3px 20px #15362755;transition:transform .2s}.scene-hotspot:hover .hotspot-icon,.scene-hotspot:focus-visible .hotspot-icon{transform:scale(1.12);background:#e0edb2}.hotspot-caption{background:#153b2ed9;border:1px solid #ffffff50;backdrop-filter:blur(12px);border-radius:6px;padding:9px 13px;font-size:10px;max-width:180px;text-align:center;line-height:1.5;box-shadow:0 3px 15px #163c2422}.scene-label{position:absolute;top:113px;left:50%;transform:translateX(-50%);font-size:8px;background:#153b2e70;backdrop-filter:blur(10px);border:1px solid #ffffff30;padding:8px 13px;border-radius:20px;text-align:center;max-width:85vw;white-space:nowrap}.scene-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:20px;background:#183b2e80;backdrop-filter:blur(5px);z-index:20;pointer-events:auto;font-size:11px}.scene-loading>span{width:28px;height:28px;border:2px solid #fff4;border-top-color:var(--lime);border-radius:50%;animation:spin 1s linear infinite}
@media(max-width:760px){.scene-label{top:105px;font-size:7px;white-space:normal;width:max-content;max-width:85vw;line-height:1.5}.hotspot-icon{width:42px;height:42px;font-size:23px;box-shadow:0 0 0 6px #f4fad12b,0 3px 20px #15362755}.scene-hotspot{gap:12px}.hotspot-caption{font-size:8px;padding:8px 10px;max-width:125px}}
#transition-frame{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;transform-origin:center;will-change:opacity,transform;z-index:1}.panorama-shade{z-index:2}.panorama-stage.travelling #panorama{pointer-events:none}.is-travelling .tour-hint{opacity:.9}.is-travelling #info{pointer-events:none;opacity:.5}
.map-travelling{z-index:5;animation:none;pointer-events:none}.map-travelling #map{will-change:transform}.map-travelling #map *{pointer-events:none!important}.map-travelling .destination-panel,.map-travelling .map-toolbar,.map-travelling .map-bottom,.map-travelling #map-error{opacity:0;pointer-events:none;transition:opacity .3s}.map-travelling .map-top{pointer-events:auto}.map-arrival{opacity:0;z-index:6;animation:none}.map-travel-status{display:none;position:absolute;z-index:450;bottom:85px;left:50%;transform:translateX(-50%);background:#f8faeff2;color:#244b37;padding:12px 18px;border-radius:30px;box-shadow:0 3px 20px #163b2922;font-size:10px;white-space:nowrap}.map-travelling .map-travel-status{display:block}
@media(max-width:760px){.map-travel-status{font-size:9px;bottom:80px;padding:11px 14px}}
.map-arrival *{pointer-events:none!important}
.map-travelling .marker-label{opacity:0;transition:opacity .25s}

/* Multiple map destinations share one demonstration panorama. */
.destination-panel{max-height:calc(100dvh - 190px);overflow:auto}
.destination-item{padding:13px 17px;text-align:left;border-bottom:1px solid #15352e12}
.destination-item.is-selected{background:#e6ecd9}
.destination-photo{height:90px;margin-top:14px}
.destination-item strong{line-height:1.5}
.marker-body{width:56px;height:56px}
.leaflet-container .leaflet-marker-pane .marker-body img{width:44px!important;height:44px!important}
.marker-label{top:70px;left:28px;font-size:10px;padding:8px 12px;white-space:nowrap}
.map-marker.is-selected .marker-body{box-shadow:0 0 0 5px #c6db7b66,0 6px 18px #15352e44}
@media(max-width:760px){.destination-panel{max-height:calc(100dvh - 190px)}.destination-item{padding:11px 16px}.marker-body{width:56px;height:56px}.marker-label{top:70px;left:28px;font-size:9px;padding:7px 10px}.destination-list{max-height:240px;overflow:auto}}

.destination-photo{height:112px;margin-bottom:16px}
.destination-photo:after{content:'';position:absolute;inset:35% 0 0;background:linear-gradient(transparent,#102b23bb);pointer-events:none}
.destination-photo img{transition:object-position .3s ease}
.preview-name{position:absolute;left:12px;right:50px;bottom:12px;z-index:1;color:#fff;font-size:10px;line-height:1.5;text-shadow:0 1px 4px #0008;pointer-events:none}
.destination-photo .photo-badge{z-index:1}
.destination-item:hover,.destination-item:focus-visible{background:#e6ecd9}
@media(max-width:760px){.destination-photo{display:block;height:85px;margin:12px 15px}.destination-list{max-height:200px}}
@media(prefers-reduced-motion:reduce){.destination-photo img{transition:none}}

/* Hanoi: warm ivory, sunshine yellow and the terracotta of old streets. */
:root{--ink:#57372d;--lime:#f5cb69;--brick:#a44932;--cream:#fff9ee}
body{background:#f6eee0}
button:focus-visible,a:focus-visible,canvas:focus-visible{outline-color:#efbd52}
.intro-screen{isolation:isolate;padding:30px 4.5% 38px;text-align:left;background:#504832 url('./video/hanoi-poster.jpg') center/cover}
.intro-video,.intro-video-wash{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.intro-video{object-fit:cover;z-index:-2}
.intro-video-wash{z-index:-1;background:linear-gradient(90deg,#252b298c 0%,#28322d55 40%,#28322d0a 80%),linear-gradient(180deg,#1e302d3d,transparent 35%,transparent 65%,#25302d73)}
.intro-top,.intro-center,.intro-bottom{position:relative}
.intro-top .brand{font-size:29px;letter-spacing:-1px;gap:3px;color:#fff9ed}
.intro-top .brand span{color:#ffdc88;margin-left:4px}
.experience-tag{font-size:8px;letter-spacing:1.8px;background:#fffaf01f;border:1px solid #fff8;padding:12px 17px;border-radius:30px;backdrop-filter:blur(8px);color:#fff8e8}
.experience-tag i{background:#ffd479}
.intro-center{margin:0;width:min(760px,85%)}
.intro-eyebrow{justify-content:flex-start;font-size:10px;letter-spacing:3px;color:#ffe2a0;gap:15px;font-weight:500}
.intro-eyebrow>span{width:37px;background:#ffda83;height:2px}
.intro-center h1{font-size:clamp(52px,6.1vw,88px);line-height:1.08;letter-spacing:-2.3px;margin:20px 0 22px;color:#fffaf1;text-shadow:0 3px 25px #23322a26}
.intro-center h1 em{color:#ffdc88;font-weight:500}
.intro-center>p{font-size:12px;color:#fff9ed;line-height:1.9;letter-spacing:.15px;margin:0;text-shadow:0 1px 10px #23322a55}
.explore-button{background:#f8ce71;color:#503323;border-radius:40px;padding:17px 26px;margin-top:27px;gap:35px;font-weight:600;font-size:12px;box-shadow:0 6px 30px #34271926}
.explore-button:hover{background:#ffe2a0;transform:translateY(-2px)}
.explore-button>span{background:#a44932;color:#fff7e9;border-radius:50%;display:grid;place-items:center;width:30px;height:30px;font-size:21px;margin:-5px -12px -5px 0}
.intro-destinations{display:flex;align-items:center;gap:12px;margin-top:23px;color:#fff3d8;font-size:9px;letter-spacing:.3px}
.intro-destinations i{font-style:normal;color:#f5cb69;font-size:13px}
.intro-bottom{gap:20px;padding-top:20px;border-top:1px solid #fff8e638}
.intro-journey{display:flex;align-items:center;gap:13px}
.journey-mark{font-size:30px;color:#ffda83}
.intro-journey small{display:block;font-size:6px;letter-spacing:2px;color:#f6e4bd}
.intro-journey strong{display:block;font-size:11px;font-weight:400;margin-top:6px;color:#fff7e8}
.intro-journey strong span{padding:0 7px;opacity:.5}
.intro-bottom-note{font:italic 17px var(--serif);color:#fff0d0;opacity:.9;letter-spacing:0}
.intro-tools{display:flex;align-items:center;gap:12px}
.video-toggle{display:flex;align-items:center;gap:9px;background:#fff8e81c;border:1px solid #fff8e659;border-radius:30px;padding:10px 15px;font-size:9px;color:#fff8e8;backdrop-filter:blur(10px)}
.video-toggle-icon{font-size:16px;line-height:1}
.intro-tools .round-button{background:#fff8e81c;border-color:#fff8e659;width:36px;height:36px;font-size:18px}
body[data-view="intro"] .global-credit{display:none}
.map-screen,.map-screen #map{background:#e9e2cf}
.map-tone{box-shadow:inset 0 0 100px #ba90501c;background:linear-gradient(#fff9e633,transparent 25%)}
.leaflet-tile-pane{filter:saturate(.83) sepia(.1)}
.map-heading,.map-brand,.destination-panel{background:#fffaf0f5;border-color:#fffdf5}
.map-heading .round-button,.view-panorama{background:var(--brick);color:#fff9ee}
.map-brand{color:var(--brick)}
.panel-label{color:#956b52;border-bottom-color:#e8d6bd}
.destination-count{background:#f4e5ca;color:#91643b}
.destination-item{border-bottom-color:#e9d9c64d}
.destination-item.is-selected,.destination-item:hover,.destination-item:focus-visible{background:#faecd2}
.destination-item small{color:#9c8266}.destination-icon,.destination-item>span:last-child{color:#aa7148}
.map-marker.is-selected .marker-body{box-shadow:0 0 0 5px #edb94b66,0 6px 18px #8f5a3044}
.marker-body:before{border-color:#ca9a5077}.marker-label{background:#fffaf0}.marker-label small{color:#a58b6e}
.map-bottom span,.zoom-stack,.map-toolbar .round-button{background:#fffaf0f2}.map-bottom i{background:#cc8b3f}
.tour-controls{background:#fff8eced;border-color:#fffcf2;color:var(--ink);box-shadow:0 5px 35px #52312026}
.tour-controls button:hover{background:#f4e5cd}.control-divider{background:#b58d663b}
.tour-controls button[aria-pressed="true"],.tour-controls button[aria-expanded="true"]{background:#f5cc75;color:#57372d}
.hotspot-icon{background:#fff8e5f5;color:var(--brick);box-shadow:0 0 0 8px #f9db982b,0 3px 20px #653b2755}
.scene-hotspot:hover .hotspot-icon,.scene-hotspot:focus-visible .hotspot-icon{background:#ffdc88}
.hotspot-caption{background:#fff8ecee;color:#603b2c;border-color:#fff9e7;box-shadow:0 3px 15px #6b43262b}
.scene-label{background:#fff8ece8;color:#6b4631;border-color:#fff9e7}
.info-panel,dialog{background:#fff9eef5;color:var(--ink)}
.close-info,.close-credits{background:#f1e2c9;color:#764a32}
@media(max-width:760px){
 .intro-screen{padding:25px 6% 24px}.intro-top .brand{font-size:24px}.experience-tag{font-size:5px;line-height:1.6;letter-spacing:1px;padding:9px 12px;max-width:145px;text-align:left}.experience-tag i{width:4px;height:4px}
 .intro-center{width:100%;margin:0}.intro-eyebrow{font-size:8px;letter-spacing:2.5px}.intro-eyebrow>span{width:27px}
 .intro-center h1{font-size:clamp(43px,10.5vw,68px);letter-spacing:-1.2px;line-height:1.15;margin:20px 0}.intro-center>p{font-size:10px;line-height:1.9}
 .explore-button{padding:17px 24px;font-size:11px;margin-top:24px;gap:30px}.intro-destinations{font-size:7px;gap:8px;margin-top:22px;flex-wrap:wrap}
 .intro-bottom{padding-top:16px;gap:10px}.intro-journey{gap:8px}.journey-mark{font-size:24px}.intro-journey small{font-size:5px;letter-spacing:1.1px}.intro-journey strong{font-size:8px}.intro-journey strong span{padding:0 3px}
 .intro-tools{gap:8px}.video-toggle{padding:9px 11px}.video-toggle-label{display:none}.intro-tools .round-button{width:33px;height:33px}
 .intro-video{object-position:58% center}.intro-video-wash{background:linear-gradient(90deg,#29332d88,#29332d24),linear-gradient(180deg,#2d342b30,transparent 40%,#2d342b66)}
}
@media(max-height:560px){.intro-screen{padding-top:16px;padding-bottom:16px}.intro-center h1{font-size:42px;line-height:1.05;margin:10px 0}.intro-center>p{font-size:9px}.intro-eyebrow{font-size:7px}.explore-button{margin-top:15px;padding:13px 23px}.intro-destinations{margin-top:14px}.intro-bottom{padding-top:10px}.intro-bottom-note{display:none}.intro-journey small{display:none}}

@media(max-width:760px){.map-brand{font-size:15px;padding:8px 10px;letter-spacing:-.7px}}

.audio-toggle[aria-pressed="true"]{background:#fff3d833}
.audio-toggle .sound-muted{display:none}
.audio-toggle[aria-pressed="false"] .sound-muted{display:block}
.audio-toggle[aria-pressed="false"] .sound-waves{display:none}
@media(max-width:760px){.audio-toggle-label{display:none}.audio-toggle{padding:9px}}