/* ===== Aurelia Explorer — v3 premium app layer (glass UI). Concept demo · sample data ===== */
:root{--glass:rgba(14,16,22,.56);--glass2:rgba(22,25,33,.62);--gl-b:rgba(255,255,255,.09);--gl-hi:rgba(255,255,255,.14);
 --av:#3ddc97;--rs:#f4b94e;--sd:#ef5b6b;--av-a:rgba(61,220,151,.42);--rs-a:rgba(244,185,78,.42);--sd-a:rgba(239,91,107,.38);--ui:"Inter",system-ui,sans-serif}
.glass{background:linear-gradient(160deg,rgba(28,31,40,.62),rgba(12,14,19,.58));border:1px solid var(--gl-b);box-shadow:inset 0 1px 0 var(--gl-hi),0 30px 80px -30px rgba(0,0,0,.7);backdrop-filter:blur(22px) saturate(150%);-webkit-backdrop-filter:blur(22px) saturate(150%);border-radius:18px}
.tnum{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.xtag{display:inline-flex;align-items:center;gap:6px;font:500 9px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55);padding:5px 8px;border-radius:20px;border:1px solid rgba(255,255,255,.12)}
.xtag .dot{width:6px;height:6px;border-radius:50%;background:var(--av);box-shadow:0 0 0 0 rgba(61,220,151,.6);animation:xping 1.8s infinite}
@keyframes xping{0%{box-shadow:0 0 0 0 rgba(61,220,151,.55)}100%{box-shadow:0 0 0 8px rgba(61,220,151,0)}}

/* DOCK */
.dock{position:absolute;z-index:9;left:50%;bottom:24px;transform:translateX(-50%);display:flex;gap:4px;padding:6px;border-radius:999px}
.dock button{position:relative;display:flex;align-items:center;gap:9px;padding:11px 17px 11px 14px;border-radius:999px;font:500 11px/1 var(--ui);letter-spacing:.04em;color:rgba(255,255,255,.72);transition:color .35s,background .35s;white-space:nowrap}
.dock button svg{width:17px;height:17px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock button:hover{color:#fff;background:rgba(255,255,255,.06)}
.dock button.on{color:#0b0c10;background:linear-gradient(180deg,#efdcae,#c6a66b);box-shadow:0 8px 24px -8px rgba(198,166,107,.65)}
.dock .kbd{font-size:9px;opacity:.45;margin-left:2px}
.hero.xmode .hero-foot{opacity:0!important;pointer-events:none}
.hero.xmode .intro{opacity:0!important;pointer-events:none}
.hero.xmode .legend{opacity:0!important;pointer-events:none}
.hero.xmode .scrollcue{display:none}

/* MODE PANEL */
.xpanel{position:absolute;z-index:9;right:clamp(16px,2.6vw,40px);top:96px;bottom:96px;width:350px;padding:22px 22px 18px;display:flex;flex-direction:column;gap:16px;overflow:auto;opacity:0;visibility:hidden;transform:translateX(24px);scrollbar-width:none}
.xpanel::-webkit-scrollbar{display:none}
.xpanel .ph-h{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.xpanel h3{font:300 30px/1.02 var(--serif);color:#fff}
.xpanel h3 small{display:block;font:500 9.5px/1 var(--ui);letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.xpanel p.sub{font:400 12px/1.6 var(--ui);color:rgba(255,255,255,.58)}
.xsec{border-top:1px solid rgba(255,255,255,.07);padding-top:14px;display:flex;flex-direction:column;gap:10px}
.xsec>label,.xlab{font:500 9px/1 var(--ui);letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.42)}
.xfine{font:400 9.5px/1.55 var(--ui);color:rgba(255,255,255,.36);letter-spacing:.02em;margin-top:auto}
.xbtn{display:flex;align-items:center;justify-content:center;gap:9px;padding:13px 16px;border-radius:12px;font:500 11px/1 var(--ui);letter-spacing:.08em;color:#fff;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);transition:.3s}
.xbtn:hover{border-color:rgba(233,214,168,.6);background:rgba(198,166,107,.1)}
.xbtn.gold{background:linear-gradient(180deg,#efdcae,#c6a66b);color:#0b0c10;border:0}
.xbtn.wa{background:#1fa855;border:0}
.xbtn svg{width:15px;height:15px;fill:currentColor}
.seg{display:flex;padding:4px;border-radius:12px;background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.07);gap:3px}
.seg button{flex:1;padding:9px 8px;border-radius:9px;font:500 10.5px/1 var(--ui);color:rgba(255,255,255,.6);display:flex;align-items:center;justify-content:center;gap:6px;transition:.3s;white-space:nowrap}
.seg button.on{background:rgba(255,255,255,.12);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.seg button i{width:7px;height:7px;border-radius:50%}

/* AVAILABILITY on tower */
.fl .sg{position:absolute;top:0;bottom:0;opacity:0;pointer-events:none;transition:opacity .4s}
.fl .sg::after{content:"";position:absolute;inset:1px 1px;border-radius:1px}
.floors.av .fl .sg{opacity:1}
.fl .sg.s-a::after{background:linear-gradient(90deg,rgba(61,220,151,.18),var(--av-a) 50%,rgba(61,220,151,.18));box-shadow:0 0 14px rgba(61,220,151,.35)}
.fl .sg.s-r::after{background:linear-gradient(90deg,rgba(244,185,78,.18),var(--rs-a) 50%,rgba(244,185,78,.18))}
.fl .sg.s-s::after{background:linear-gradient(90deg,rgba(239,91,107,.16),var(--sd-a) 50%,rgba(239,91,107,.16))}
.floors.av .fl .sg.dimmed{opacity:.08}
.floors.av .fl.on .sg::after{filter:brightness(1.35)}
.floors.av .fl.on{box-shadow:0 0 0 200vmax rgba(5,6,10,.25)}
.av-stat{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);cursor:pointer;transition:.3s;text-align:left}
.av-stat:hover,.av-stat.on{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.06)}
.av-stat i{width:10px;height:10px;border-radius:3px}
.av-stat b{font:500 13px/1 var(--ui);color:#fff}
.av-stat b small{display:block;font:400 10px/1.4 var(--ui);color:rgba(255,255,255,.45);margin-top:3px}
.av-stat em{font:300 28px/1 var(--serif);font-style:normal;color:#fff}
.av-top{display:flex;gap:18px;align-items:center}
.donut{width:118px;height:118px;flex:0 0 auto;position:relative}
.donut svg{width:100%;height:100%;transform:rotate(-90deg)}
.donut .c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut .c b{font:300 36px/1 var(--serif);color:#fff}
.donut .c small{font:500 8.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-top:5px}
.av-k{display:flex;flex-direction:column;gap:6px}
.av-k div{font:400 11px/1.4 var(--ui);color:rgba(255,255,255,.6)}
.av-k div b{font:300 26px/1 var(--serif);color:var(--av);display:block}
.av-type{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;font:400 11.5px/1.3 var(--ui);color:rgba(255,255,255,.75)}
.av-type .bar{grid-column:1/-1;height:5px;border-radius:5px;overflow:hidden;display:flex;background:rgba(255,255,255,.06);margin-bottom:6px}
.av-type .bar i{display:block;height:100%}
.av-type span{font-size:10.5px;color:rgba(255,255,255,.45)}
.st{display:inline-flex;align-items:center;gap:6px;font:500 9px/1 var(--ui)!important;letter-spacing:.16em!important;text-transform:uppercase;padding:5px 8px 5px 7px;border-radius:20px;vertical-align:middle;margin:0!important}
.st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.st-a{color:var(--av)!important;background:rgba(61,220,151,.1);border:1px solid rgba(61,220,151,.28)}
.st-r{color:var(--rs)!important;background:rgba(244,185,78,.1);border:1px solid rgba(244,185,78,.28)}
.st-s{color:var(--sd)!important;background:rgba(239,91,107,.1);border:1px solid rgba(239,91,107,.28)}
.xopen{display:none}
.flabel .st{margin-left:8px!important}

/* FLY-UP HUD */
.rise{position:fixed;z-index:45;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none;opacity:0;display:flex;align-items:center;gap:22px}
.rise .gauge{width:3px;height:180px;background:rgba(255,255,255,.28);position:relative;border-radius:2px;overflow:hidden}
.rise .gauge i{position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(0deg,var(--gold),#fff)}
.rise b{font:300 130px/0.8 var(--ui);letter-spacing:-.04em;color:#fff;text-shadow:0 10px 60px rgba(0,0,0,.6)}
.rise small{display:block;font:500 10px/1 var(--ui);letter-spacing:.34em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}
.streaks{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 14px,rgba(255,236,200,.06) 14px 15px);mix-blend-mode:screen}

/* SUN */
.hero-alt{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;pointer-events:none;display:block}
.sunlight{position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:soft-light}
.sunshade{position:absolute;pointer-events:none;opacity:0}
.gshadow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0;overflow:visible}
.sunarc{position:absolute;z-index:5;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.sunarc .arc{fill:none;stroke:rgba(255,214,120,.75);stroke-width:1.4;stroke-dasharray:3 7}
.sunarc .arcbg{fill:none;stroke:rgba(255,214,120,.12);stroke-width:22;filter:blur(8px)}
.sunarc .hz{stroke:rgba(255,255,255,.22);stroke-width:1;stroke-dasharray:2 6}
.sunarc text{font:500 11px var(--ui);fill:rgba(255,255,255,.75);letter-spacing:.12em}
.sunarc .tlabel{font:600 15px var(--ui);fill:#fff;letter-spacing:.04em}
.sun-time{font:200 64px/1 var(--ui);letter-spacing:-.03em;color:#fff}
.sun-time small{font:500 12px/1 var(--ui);letter-spacing:.2em;color:var(--gold2);margin-left:8px}
.xrange{-webkit-appearance:none;appearance:none;width:100%;height:28px;background:transparent;cursor:pointer}
.xrange::-webkit-slider-runnable-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#1b2440,#f0a35a 18%,#ffe3a3 50%,#f0a35a 82%,#1b2440)}
.xrange::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;margin-top:-9px;background:radial-gradient(circle,#fff6d9 30%,#ffc861 70%);box-shadow:0 0 0 5px rgba(255,200,97,.22),0 0 24px rgba(255,200,97,.8)}
.xrange::-moz-range-track{height:4px;border-radius:4px;background:linear-gradient(90deg,#1b2440,#f0a35a 18%,#ffe3a3 50%,#f0a35a 82%,#1b2440)}
.xrange::-moz-range-thumb{width:20px;height:20px;border-radius:50%;border:0;background:#ffd884}
.rd{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.rd div{padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.rd small{display:block;font:500 8.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:6px}
.rd b{font:400 17px/1.1 var(--ui);color:#fff}
.lit{font:400 11.5px/1.55 var(--ui);color:rgba(255,255,255,.7)}
.lit b{color:#ffd884;font-weight:500}

/* FULL LAYERS INSIDE HERO (map, amenities) */
.xlayer{position:absolute;inset:0;z-index:4;opacity:0;visibility:hidden;overflow:hidden;background:#05070b}
.xlayer .vign{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 80% 70% at 45% 50%,rgba(5,7,11,0) 40%,rgba(5,7,11,.75) 100%),linear-gradient(180deg,rgba(5,7,11,.7),rgba(5,7,11,0) 18%,rgba(5,7,11,0) 80%,rgba(5,7,11,.8))}
.xmap-world{position:absolute;inset:0;perspective:1300px;perspective-origin:50% 40%}
.xmap-plane{position:absolute;left:44%;top:56%;width:2400px;height:2028px;transform-origin:0 0;transform-style:preserve-3d;will-change:transform}
.xmap-plane img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.xmap-plane svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.xmap-plane .rt{fill:none;stroke-linecap:round;stroke-linejoin:round}
.xmap-plane .rt.glow{stroke:#ff5fa2;stroke-width:16;opacity:.25;filter:blur(6px)}
.xmap-plane .rt.core{stroke:#ff86bb;stroke-width:4.5}
.xmap-plane .rt.ghost{stroke:rgba(255,255,255,.22);stroke-width:2.2;stroke-dasharray:6 8}
.xmap-plane .car{fill:#fff;filter:drop-shadow(0 0 10px #ff5fa2)}
.mk2{position:absolute;inset:0;z-index:5;pointer-events:none}
.mk{position:absolute;left:0;top:0;pointer-events:auto;cursor:pointer;will-change:transform}
.mk .in{transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;transition:opacity .4s}
.mk .lb{display:flex;align-items:center;gap:8px;white-space:nowrap;padding:8px 12px 8px 8px;border-radius:12px;font:500 13px/1 var(--ui);color:#fff}
.mk .lb i{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;background:rgba(255,95,162,.18);color:#ff86bb;font-style:normal;font-size:14px}
.mk .lb em{font-style:normal;color:rgba(255,255,255,.55);font-weight:400;font-size:12px;margin-left:2px}
.mk .stem{width:2px;height:34px;background:linear-gradient(#fff,rgba(255,255,255,0))}
.mk .base{width:12px;height:12px;border-radius:50%;background:#ff86bb;box-shadow:0 0 0 6px rgba(255,95,162,.2),0 0 20px #ff5fa2;margin-top:-3px}
.mk.home .lb{background:linear-gradient(180deg,#efdcae,#c6a66b);color:#0b0c10;border:0;font-weight:600}
.mk.home .lb i{background:rgba(0,0,0,.15);color:#0b0c10}
.mk.home .base{background:#efdcae;box-shadow:0 0 0 8px rgba(233,214,168,.2),0 0 30px #c6a66b;animation:hp 2s infinite}
@keyframes hp{50%{box-shadow:0 0 0 18px rgba(233,214,168,0),0 0 30px #c6a66b}}
.mk.dim .in{opacity:.35}
.xmap-plane img{-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 52%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 62% 62% at 50% 52%,#000 55%,transparent 100%)}
a.xbtn{text-decoration:none}
.mapbig{position:absolute;z-index:6;left:clamp(20px,4vw,60px);top:120px;pointer-events:none;opacity:0}
.mapbig b{display:block;font:700 96px/0.9 var(--ui);letter-spacing:-.04em;color:#ff86bb;text-shadow:0 10px 50px rgba(255,95,162,.45)}
.mapbig small{display:block;font:500 12px/1.4 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-top:10px}
.speed{display:inline-block;margin-top:12px;font:600 11px/1 var(--ui);letter-spacing:.1em;color:#0b0c10;background:#fff;padding:6px 9px;border-radius:6px}
.dest{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);text-align:left;transition:.3s}
.dest:hover,.dest.on{border-color:rgba(255,134,187,.45);background:rgba(255,95,162,.08)}
.dest i{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);font-style:normal;font-size:16px}
.dest b{font:500 12.5px/1.25 var(--ui);color:#fff;display:block}
.dest small{font:400 10px/1.3 var(--ui);color:rgba(255,255,255,.45);letter-spacing:.06em}
.dest em{font:300 24px/1 var(--serif);font-style:normal;color:#fff;text-align:right}
.dest em small{display:block;font:400 9.5px/1 var(--ui);color:rgba(255,255,255,.45);margin-top:4px}
.attrib{position:absolute;z-index:6;left:12px;bottom:8px;font:400 9px/1.3 var(--ui);color:rgba(255,255,255,.35)}

.amen img{position:absolute;inset:-3%;width:106%;height:106%;object-fit:cover;opacity:0}
.amen img.on{opacity:1}
.amen .cap{position:absolute;z-index:6;left:clamp(20px,4vw,60px);bottom:110px;max-width:520px}
.amen .cap small{display:block;font:500 10px/1 var(--ui);letter-spacing:.3em;text-transform:uppercase;color:var(--gold2);margin-bottom:14px}
.amen .cap b{display:block;font:300 clamp(40px,4.4vw,68px)/1 var(--serif);color:#fff;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.amen .dn{position:absolute;z-index:6;left:clamp(20px,4vw,60px);top:118px;width:260px}
.amen-list{display:flex;flex-direction:column;gap:8px}
.amen-list div{display:flex;justify-content:space-between;font:400 12px/1.3 var(--ui);color:rgba(255,255,255,.72);padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.amen-list div b{font-weight:500;color:#fff}

/* OVERLAYS (view, iso, walk) */
.xov{position:fixed;inset:0;z-index:70;visibility:hidden;opacity:0;background:#05070b;overflow:hidden}
.xov .xclose{position:absolute;z-index:8;top:22px;right:22px;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;color:#fff}
.xov .xhead{position:absolute;z-index:7;left:24px;top:22px;display:flex;align-items:center;gap:12px;padding:10px 16px 10px 12px;border-radius:14px}
.xov .xhead b{font:500 13px/1.2 var(--ui);color:#fff;display:block}
.xov .xhead small{font:400 10.5px/1.2 var(--ui);color:rgba(255,255,255,.55);letter-spacing:.04em}
.xov .xhead .ic{width:34px;height:34px;border-radius:10px;background:rgba(198,166,107,.18);color:var(--gold2);display:flex;align-items:center;justify-content:center}
.xov .xhead .ic svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.6}
/* view */
.vstack{position:absolute;inset:0}
.vstack img{position:absolute;inset:-2%;width:104%;height:104%;object-fit:cover;opacity:0}
.vstack.split img{inset:0;width:100%;height:100%;opacity:1!important;transform:none!important}
.vband{position:absolute;inset:0;display:none;pointer-events:none}
.vstack.split~.vband{display:block}
.vband span{position:absolute;left:24px;font:700 clamp(18px,2.2vw,30px)/1 var(--ui);letter-spacing:.02em;color:#fff;text-shadow:0 4px 24px rgba(0,0,0,.6)}
.vctl{position:absolute;z-index:7;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:8px;align-items:center;padding:6px;border-radius:16px}
.vctl .seg{background:transparent;border:0;padding:0}
.vctl .seg button{padding:12px 18px;font-size:12px}
.vctl .seg button svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6}
.vctl .split-b{padding:12px 14px;border-radius:10px;font:500 12px/1 var(--ui);color:rgba(255,255,255,.7)}
.vctl .split-b.on{background:rgba(255,255,255,.12);color:#fff}
.vlabel{position:absolute;z-index:7;left:24px;bottom:30px;font:600 12px/1 var(--ui);letter-spacing:.16em;text-transform:uppercase;color:#fff;padding:10px 14px;border-radius:12px}
.vlabel b{color:var(--gold2);font-weight:600}
/* iso */
#xiso{background:radial-gradient(ellipse 60% 60% at 40% 52%,#1b1f2a,#07080b 75%)}
#xiso .grid{position:absolute;inset:0;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse 60% 60% at 40% 52%,#000,transparent 75%);-webkit-mask-image:radial-gradient(ellipse 60% 60% at 40% 52%,#000,transparent 75%)}
.iso-stage{position:absolute;left:0;top:0;bottom:0;right:410px;display:flex;align-items:center;justify-content:center;perspective:1600px}
.iso-wrap{position:relative;width:min(88%,calc((100vh - 200px) * var(--ar,1.13)));aspect-ratio:var(--ar,1.13);transform-style:preserve-3d;will-change:transform}
.iso-wrap img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none;-webkit-user-drag:none}
.iso-wrap .shadow{position:absolute;left:8%;right:8%;bottom:2%;height:30%;background:radial-gradient(ellipse at center,rgba(0,0,0,.65),rgba(0,0,0,0) 70%);filter:blur(10px);transform:translateZ(-20px)}
.iso-wrap .roof{filter:brightness(.7) saturate(.6) drop-shadow(0 20px 30px rgba(0,0,0,.5))}
.iso-wrap .int{filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
.pin{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:auto;opacity:0}
.pin span{font:600 10px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#0b0c10;background:rgba(255,255,255,.92);padding:7px 10px;border-radius:8px;white-space:nowrap;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.pin i{width:1.5px;height:18px;background:rgba(255,255,255,.9)}
.pin em{width:8px;height:8px;border-radius:50%;background:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.25)}
.pin.hl span{background:var(--gold2)}
.iso-badge{position:absolute;z-index:7;left:24px;bottom:26px;display:flex;gap:8px}
.iso-badge .b{padding:10px 14px;border-radius:12px;font:600 11px/1 var(--ui);letter-spacing:.14em;text-transform:uppercase;color:#fff}
.iso-badge .b.roof{color:#0b0c10;background:linear-gradient(180deg,#efdcae,#c6a66b)}
.iso-panel{position:absolute;z-index:7;right:18px;top:18px;bottom:18px;width:380px;padding:26px 24px 20px;display:flex;flex-direction:column;gap:16px;overflow:auto;scrollbar-width:none}
.iso-panel .uid{font:200 64px/.9 var(--ui);letter-spacing:-.04em;color:#fff}
.iso-panel .uid small{font:500 10px/1 var(--ui);letter-spacing:.24em;color:var(--gold2);display:block;margin-bottom:12px;text-transform:uppercase}
.iso-panel .utype{font:300 24px/1.1 var(--serif);color:#fff}
.iso-tabs{display:flex;gap:6px}
.iso-tabs:empty{display:none}
.kv{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kv div{padding:11px 12px;border-radius:12px;background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.06)}
.kv small{display:block;font:500 8.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.42);margin-bottom:7px}
.kv b{font:400 15px/1.1 var(--ui);color:#fff}
.iso-price{display:flex;justify-content:space-between;align-items:flex-end;padding:14px 16px;border-radius:14px;border:1px solid rgba(198,166,107,.35);background:linear-gradient(135deg,rgba(198,166,107,.14),rgba(198,166,107,.02))}
.iso-price small{font:500 8.5px/1 var(--ui);letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.iso-price b{display:block;font:300 26px/1 var(--serif);color:var(--gold2);margin-top:7px}
.rooms{display:flex;flex-wrap:wrap;gap:6px}
.rooms button{font:500 10.5px/1 var(--ui);color:rgba(255,255,255,.72);padding:8px 10px;border-radius:9px;border:1px solid rgba(255,255,255,.1);transition:.25s}
.rooms button:hover{border-color:var(--gold2);color:#fff}
.xcta{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.xcta .xbtn:first-child{grid-column:1/-1}
/* walk */
#xwalk video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.unit-x{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.unit-x .btn{padding:14px 10px;font-size:9.5px;letter-spacing:.18em}
.unit-x .btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}
.fv-tools{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.fv-tools .xbtn{padding:11px 16px;border-radius:30px;font-size:10.5px}
.fv-tools .xbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.5}

/* RESPONSIVE */
@media (max-width:1180px){.xpanel{width:320px}.dock button .t{display:none}.dock button{padding:12px}}
@media (max-width:980px){
 .iso-stage{right:0;bottom:46%;top:60px}
 .iso-panel{left:12px;right:12px;top:auto;bottom:12px;width:auto;max-height:44%}
 .iso-badge{bottom:calc(46% + 8px)}
}
@media (max-width:700px){
 .dock{top:70px;bottom:auto;left:12px;right:12px;transform:none;overflow-x:auto;scrollbar-width:none;padding:5px;justify-content:flex-start}
 .dock::-webkit-scrollbar{display:none}
 .dock button{padding:10px 12px;font-size:10.5px}
 .dock button .t{display:inline}
 .dock button svg{width:15px;height:15px}
 .hero.xmode .mbar,.hero.xmode .scrub{display:none!important}
 .hero.xmode.m-avail .scrub{display:block!important}
 .xpanel{left:10px;right:10px;top:auto;bottom:10px;width:auto;max-height:46%;padding:16px 16px 14px;gap:12px;border-radius:16px}
 .xpanel h3{font-size:24px}
 .hero.m-avail .xpanel{max-height:38%}
 .xopen{display:flex}
 .donut{width:92px;height:92px}.donut .c b{font-size:28px}
 .av-stat{padding:8px 10px}.av-stat em{font-size:22px}
 .rise b{font-size:96px}.rise .gauge{height:130px}
 .xmap-plane{left:50%;top:40%}
 .mapbig{top:128px;left:16px}.mapbig b{font-size:64px}
 .mk .lb{font-size:11px;padding:6px 9px 6px 6px}.mk .lb i{width:20px;height:20px;font-size:11px}
 .amen .cap{bottom:auto;top:130px;left:18px;right:18px}.amen .cap b{font-size:38px}
 .amen .dn{display:none}
 .sun-time{font-size:46px}
 .xov .xhead{left:12px;top:12px;right:70px}
 .xov .xclose{top:12px;right:12px}
 .vctl{left:12px;right:12px;transform:none;bottom:14px;flex-wrap:wrap;justify-content:center}
 .vctl .seg{flex:1}.vctl .seg button{padding:11px 6px;font-size:11px}
 .vlabel{bottom:auto;top:74px;left:12px;font-size:10px}
 .vstack img{object-position:62% 50%}
 .iso-stage{bottom:48%;top:66px}
 .iso-wrap{width:94%}
 .iso-panel{max-height:46%;padding:18px 16px}
 .iso-panel .uid{font-size:48px}
 .iso-badge{left:12px;bottom:calc(48% + 6px)}
 .unit-x{grid-template-columns:1fr 1fr}
}

#isoClose{right:418px}
@media (max-width:980px){#isoClose{right:12px}}
.flabel.lft{flex-direction:row-reverse;text-align:right;transform:translateX(-100%) translateX(6px)}
.flabel.lft.show{transform:translateX(-100%)}
.flabel.lft i{background:linear-gradient(270deg,var(--gold2),var(--gold))}
/* floor label only belongs to residence / availability modes */
#hero.m-loc .flabel,#hero.m-amen .flabel,#hero.m-sun .flabel{opacity:0!important;visibility:hidden}

/* studio credit */
footer .credit{display:flex;align-items:center;gap:10px;text-transform:uppercase;letter-spacing:.3em;font-size:9.5px;color:var(--mute);opacity:.85}
footer .credit .om{height:16px;width:auto}
footer .credit em{font-style:normal;color:var(--gold2);letter-spacing:.34em}
.hero-foot .by{opacity:.8}
@media (max-width:1760px){.hero-foot .by{display:none}}