/* Layout: a white presentation shell — story panel left, one continuous satellite "window" right; every slide is a camera move, never a cut. */
:root{--tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23fff'/%3E%3Cg fill='none' stroke='%231c3fa8' stroke-width='1.6'%3E%3Ccircle cx='0' cy='0' r='15'/%3E%3Ccircle cx='48' cy='0' r='15'/%3E%3Ccircle cx='0' cy='48' r='15'/%3E%3Ccircle cx='48' cy='48' r='15'/%3E%3Ccircle cx='24' cy='24' r='7.5'/%3E%3Cpath d='M24 1v6M24 41v6M1 24h6M41 24h6'/%3E%3C/g%3E%3Cg fill='%231c3fa8'%3E%3Cpath d='M24 9c3 4.5 3 8 0 11.5c-3-3.5-3-7 0-11.5z'/%3E%3Cpath d='M24 39c-3-4.5-3-8 0-11.5c3 3.5 3 7 0 11.5z'/%3E%3Cpath d='M9 24c4.5-3 8-3 11.5 0c-3.5 3-7 3-11.5 0z'/%3E%3Cpath d='M39 24c-4.5 3-8 3-11.5 0c3.5-3 7-3 11.5 0z'/%3E%3Ccircle cx='24' cy='24' r='2.4'/%3E%3Ccircle cx='0' cy='0' r='5'/%3E%3Ccircle cx='48' cy='0' r='5'/%3E%3Ccircle cx='0' cy='48' r='5'/%3E%3Ccircle cx='48' cy='48' r='5'/%3E%3Ccircle cx='24' cy='0' r='1.8'/%3E%3Ccircle cx='24' cy='48' r='1.8'/%3E%3Ccircle cx='0' cy='24' r='1.8'/%3E%3Ccircle cx='48' cy='24' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
  --bg:#ffffff; --ink:#0c1116; --ink-2:#4a535e; --ink-3:#8a929c; --line:#e7e9ec; --wash:#f4f5f7;
  --cobalt:#1c3fa8; --tram:#ffb703; --tram-ink:#241a00; --pink:#e5307f; --violet:#7a3fc4; --tagus:#0f6878; --leaf:#2f7d4f;
  --display:"Syne","Helvetica Neue",Arial,sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Martian Mono",ui-monospace,Menlo,Consolas,monospace;
  --top:4rem; --rail:4.25rem;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow:hidden;overscroll-behavior:none}
img{display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;margin:0;letter-spacing:-.03em;text-wrap:balance}
p{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:2px;border-radius:0.375rem}
.kicker{font:500 0.6875rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.deck{position:fixed;inset:0;display:grid;grid-template-rows:var(--top) minmax(0,1fr) var(--rail);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}

/* top bar */
.top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:1rem;padding:0 1.375rem}
.brand{display:flex;align-items:center;gap:0.6875rem;font:500 0.7188rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;white-space:nowrap}
.brand i{width:1.5rem;height:1.5rem;border-radius:0.3125rem;background:var(--tile) center/1.5rem 1.5rem;box-shadow:inset 0 0 0 1px rgba(28,63,168,.2)}
.brand span{color:var(--ink-3)}
.chap{display:flex;align-items:baseline;gap:0.625rem;font-size:0.875rem;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:44vw}
.chap b{font:600 0.6875rem/1 var(--mono);letter-spacing:.1em;color:var(--ink)}
.tools{display:flex;justify-content:flex-end;gap:0.5rem}
.tbtn{position:relative;display:inline-flex;align-items:center;gap:0.5rem;height:2.375rem;padding:0 0.875rem;border:1px solid var(--line);border-radius:62.4375rem;background:#fff;font:600 0.8125rem/1 var(--body);color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.tbtn:hover{border-color:var(--ink);color:var(--ink)}
.tbtn svg{width:1rem;height:1rem;flex:none}
.tbtn.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tbtn .ring{position:absolute;inset:-0.1875rem;width:calc(100% + 0.375rem);height:calc(100% + 0.375rem);pointer-events:none;overflow:visible}
.tbtn .ring rect{fill:none;stroke:var(--tram);stroke-width:2.5;stroke-linecap:round}
.tbtn.icon{width:2.375rem;padding:0;justify-content:center}

/* main */
.main{display:grid;grid-template-columns:minmax(22.5rem,35%) minmax(0,1fr);min-height:0}
.panels{position:relative;min-height:0}
.panel{position:absolute;inset:0;overflow-y:auto;overflow-x:hidden;padding:clamp(1.125rem,3vh,2.5rem) clamp(1.375rem,2.6vw,2.875rem) 2rem;visibility:hidden;opacity:0;transition:opacity .35s ease,visibility 0s linear .35s;scrollbar-width:thin}
.panel.on{visibility:visible;opacity:1;transition:opacity .45s ease .12s,visibility 0s}
.panel [data-a]{opacity:0;transform:translateY(1rem);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.panel.on [data-a]{opacity:1;transform:none;transition-delay:calc(.18s + var(--i,0) * 70ms)}
.panel h1{font-size:clamp(4.75rem,9vw,9.375rem);line-height:.82;letter-spacing:-.055em;margin:1rem 0 1.375rem}
.panel h1 b{color:var(--cobalt)}
.panel h2{font-size:clamp(2rem,3.3vw,3.375rem);line-height:.98;margin:0.75rem 0 1rem}
.panel .lede{font-size:clamp(1.125rem,1.5vw,1.3125rem);line-height:1.45;color:var(--ink);max-width:34ch}
.panel .txt{font-size:1.0312rem;color:var(--ink-2);max-width:44ch}
.cta{display:flex;flex-wrap:wrap;gap:0.625rem;margin-top:1.625rem}
.btn{display:inline-flex;align-items:center;gap:0.625rem;height:2.875rem;padding:0 1.25rem;border-radius:62.4375rem;border:1px solid var(--ink);background:#fff;font:600 0.9375rem/1 var(--body);text-decoration:none}
.btn.primary{background:var(--ink);color:#fff}
.btn svg{width:1rem;height:1rem}
.keys{display:flex;flex-wrap:wrap;gap:0.5rem 1rem;margin-top:1.375rem;font:400 0.6875rem/1.6 var(--mono);color:var(--ink-3)}
.keys kbd{display:inline-grid;place-items:center;min-width:1.375rem;height:1.375rem;padding:0 0.3125rem;margin-right:0.25rem;border:1px solid var(--line);border-bottom-width:2px;border-radius:0.3125rem;font:600 0.6875rem/1 var(--mono);color:var(--ink-2);background:#fff}
.facts{margin:1.375rem 0 0;padding:0;list-style:none;display:grid;gap:0}
.facts li{display:flex;gap:0.75rem;align-items:baseline;padding:0.6875rem 0;border-top:1px solid var(--line);font-size:0.9688rem}
.facts li::before{content:"";flex:none;width:0.4375rem;height:0.4375rem;border-radius:50%;background:var(--cobalt);transform:translateY(-2px)}
.thumb{display:grid;grid-template-columns:6rem minmax(0,1fr);gap:0.875rem;align-items:center;margin-top:1.25rem;padding:0.625rem;border-radius:1rem;background:var(--wash)}
.thumb img{width:6rem;height:auto;aspect-ratio:640/976;object-fit:cover;border-radius:0.625rem}
.thumb span{font-size:0.875rem;color:var(--ink-2)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:1.375rem;border-top:1px solid var(--ink)}
.stat{padding:1rem 0.75rem 0.875rem 0;border-bottom:1px solid var(--line)}
.stat:nth-child(even){padding-left:1rem;border-left:1px solid var(--line)}
.stat b{display:block;font:700 clamp(2.875rem,4.6vw,4.5rem)/.9 var(--body);letter-spacing:-.05em}
.stat b small{font:500 0.75rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);margin-left:0.3125rem}
.stat span{display:block;margin-top:0.5rem;font-size:0.875rem;color:var(--ink-2)}
.note{margin-top:1.125rem;font:400 0.6875rem/1.6 var(--mono);color:var(--ink-3)}

/* place lists */
.plist{margin:1.125rem 0 0;padding:0;list-style:none;display:grid}
.pl{border-top:1px solid var(--line)}
.pl:last-child{border-bottom:1px solid var(--line)}
.pl button{display:grid;grid-template-columns:1.75rem minmax(0,1fr) auto;gap:0.75rem;align-items:center;width:100%;padding:0.6875rem 0.25rem;border:0;background:transparent;text-align:left;transition:background .2s}
.pl button:hover,.pl.on button{background:#fff8e3}
.pl b{display:block;font-weight:600;font-size:0.9375rem;line-height:1.25}
.pl small{display:block;font-size:0.7812rem;color:var(--ink-3);line-height:1.3;margin-top:1px}
.pl .m{font:500 0.6875rem/1 var(--mono);color:var(--ink-3);text-align:right;white-space:nowrap}
.pl .m em{display:block;font:700 1.375rem/1 var(--body);font-style:normal;letter-spacing:-.03em;color:var(--ink);margin-bottom:2px}
.pl .more{display:none;padding:0 0.25rem 0.75rem 2.75rem;font-size:0.875rem;color:var(--ink-2)}
.pl.on .more{display:block}
.pl.dim{opacity:.35}
.badge{width:1.75rem;height:1.75rem;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--ct,#fff);font:600 0.6875rem/1 var(--mono)}
.cat-eat{--c:var(--pink)} .cat-see{--c:var(--cobalt)} .cat-culture{--c:var(--violet)} .cat-move{--c:var(--tram);--ct:var(--tram-ink)}

/* explore controls */
.modes{display:inline-flex;padding:0.25rem;margin-top:1rem;border-radius:62.4375rem;background:var(--wash);box-shadow:inset 0 0 0 1px var(--line)}
.mode{display:inline-flex;align-items:center;gap:0.4375rem;padding:0.5rem 0.75rem;border:0;border-radius:62.4375rem;background:transparent;font:600 0.8125rem/1 var(--body);color:var(--ink-2)}
.mode svg{width:0.9375rem;height:0.9375rem}
.mode[aria-pressed="true"]{background:var(--ink);color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.75rem}
.chip{display:inline-flex;align-items:center;gap:0.4375rem;padding:0.4375rem 0.6875rem;border-radius:62.4375rem;border:1px solid var(--line);background:#fff;font:500 0.7812rem/1 var(--body);color:var(--ink-2)}
.chip i{width:0.5rem;height:0.5rem;border-radius:50%;background:var(--c,var(--ink-3))}
.chip[aria-pressed="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.sel{margin-top:0.875rem;padding:0.875rem 1rem;border-radius:1rem;background:var(--wash)}
.sel h3{font-size:1.375rem;line-height:1.1;margin-top:0.5rem}
.sel .walk{display:flex;align-items:baseline;gap:0.5rem;margin:0.5rem 0 0.375rem;font:500 0.6875rem/1 var(--mono);color:var(--ink-2)}
.sel .walk b{font:700 1.875rem/1 var(--body);letter-spacing:-.04em;color:var(--ink)}
.sel p{font-size:0.9062rem;color:var(--ink-2)}
.sel .hint{font-size:0.875rem;color:var(--ink-2)}

/* coast ride */
.ride{display:grid;gap:0.75rem;margin-top:1.25rem}
.ride-top{display:flex;align-items:center;gap:0.875rem}
.play{flex:none;white-space:nowrap;display:inline-flex;align-items:center;gap:0.625rem;height:2.875rem;padding:0 1.25rem;border:0;border-radius:62.4375rem;background:var(--ink);color:#fff;font:600 0.9375rem/1 var(--body)}
.play svg{width:0.875rem;height:0.875rem}
.readout b{display:block;font:700 1.375rem/1.1 var(--display);letter-spacing:-.02em}
.readout span{display:block;margin-top:0.1875rem;font:500 0.6875rem/1.4 var(--mono);color:var(--ink-3)}
.ride input{width:100%;direction:rtl;accent-color:var(--tram);margin:0}
.ends{display:flex;justify-content:space-between;font:500 0.6875rem/1.3 var(--mono);letter-spacing:.06em;color:var(--ink-3)}
.dests{margin:1.125rem 0 0;padding:0;list-style:none;display:grid}
.dests li{display:grid;grid-template-columns:4.75rem minmax(0,1fr);gap:0.75rem;padding:0.75rem 0;border-top:1px solid var(--line)}
.dests .t{font:700 2.125rem/1 var(--body);letter-spacing:-.05em}
.dests .t small{font:500 0.6875rem/1 var(--mono);color:var(--ink-3);margin-left:0.1875rem;letter-spacing:.04em}
.dests b{display:block;font-weight:600;font-size:0.9375rem}
.dests span{display:block;font-size:0.875rem;color:var(--ink-2)}

/* apartments */
.tabs{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:1rem}
.tab{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5625rem 0.8125rem;border:1px solid var(--line);border-radius:62.4375rem;background:#fff;font:600 0.8438rem/1 var(--body);color:var(--ink-2)}
.tab i{font:600 0.6875rem/1 var(--mono);font-style:normal;padding:0.25rem 0.375rem;border-radius:62.4375rem;background:var(--c);color:#fff}
.tab[aria-selected="true"]{border-color:var(--ink);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.tpane{display:none;margin-top:1rem}
.tpane.on{display:block;animation:rise .45s cubic-bezier(.2,.7,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(0.625rem)}to{opacity:1;transform:none}}
.slot{position:relative;aspect-ratio:16/9;display:grid;place-items:center;padding:1rem;text-align:center;border-radius:1rem;background:linear-gradient(135deg,#f6f7f8,#eceff2);color:var(--ink-3);font:500 0.6875rem/1.5 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.slot::before{content:"";position:absolute;inset:0.625rem;border:1.5px dashed #cdd2d8;border-radius:0.625rem}
.slot b{display:block;margin-bottom:0.25rem;font:700 1.25rem/1.1 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--ink-2)}
.meta{display:flex;flex-wrap:wrap;gap:0.25rem 0.875rem;margin:0.75rem 0 0.5rem;font:500 0.6875rem/1.4 var(--mono);color:var(--ink-2)}
.rooms{display:grid;gap:0.625rem;margin-top:0.625rem}
.rooms h4{margin:0 0 2px;font:500 0.6875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rooms dl{margin:0;display:grid}
.rooms dl div{display:flex;justify-content:space-between;gap:0.75rem;padding:0.3125rem 0;border-bottom:1px dotted #d9dde2;font-size:0.875rem}
.rooms dd{margin:0;font:500 0.7188rem/1.6 var(--mono);color:var(--ink-2);white-space:nowrap}
.floorinfo{margin-top:0.875rem;padding:0.75rem 0.875rem;border-radius:0.875rem;background:var(--wash);font-size:0.875rem;color:var(--ink-2)}
.floorinfo b{display:block;font:700 1.0625rem/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}

/* contact */
.contact{display:grid;gap:0.25rem;margin-top:1.125rem;font-size:1.0625rem}
.contact span{font:400 0.875rem/1.6 var(--mono);user-select:all}
.credits{margin-top:1.625rem;display:grid;gap:0.4375rem;font:400 0.6875rem/1.6 var(--mono);color:var(--ink-3)}

/* stage */
.stage{position:relative;margin:0 1.25rem 0.375rem 0;border-radius:1.625rem;overflow:hidden;background:#0f2c35;isolation:isolate;touch-action:none;user-select:none;-webkit-user-select:none}
.geo{position:absolute;inset:0;transition:opacity .7s ease,filter .7s ease,transform .9s cubic-bezier(.3,.1,.2,1);--n:0;--gd:0}
.lv{position:absolute;left:0;top:0;max-width:none!important;transform-origin:0 0;will-change:transform,opacity;pointer-events:none;-webkit-user-drag:none}
.lv.pre{width:100%!important;height:100%!important;object-fit:cover;transform:none!important}
.geo.fx .lv.s2,.geo.fx .lv.day{filter:brightness(calc(1 - .8 * var(--n))) saturate(calc(1 + .35 * var(--gd) - .5 * var(--n))) sepia(calc(.3 * var(--gd))) hue-rotate(calc(-10deg * var(--gd)))}
.lv.night{filter:none}
.tint{position:absolute;inset:0;pointer-events:none;opacity:0}
.tint.golden{background:linear-gradient(105deg,rgba(255,138,48,.45),rgba(255,170,90,.12) 45%,rgba(120,60,140,.2));mix-blend-mode:soft-light}
.tint.night{background:radial-gradient(130% 100% at 50% 40%,rgba(10,20,50,0),rgba(4,8,20,.45))}
.stage.img-mode .geo{opacity:0;filter:blur(6px);transform:scale(1.08)}
.stage.img-mode{background:#f1f2f4}
.ov{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ov .case{fill:none;stroke:rgba(4,10,14,.5);stroke-linecap:round;stroke-linejoin:round}
.ov .iso{fill:none;stroke:#fff;stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.ov .iso-c{stroke-width:4}
.ov .route{fill:none;stroke:var(--tram);stroke-width:4;stroke-dasharray:10 9;stroke-linecap:round;stroke-linejoin:round;animation:march .9s linear infinite}
.ov .route-c{stroke-width:8}
.ov .rail{fill:none;stroke:#fff;stroke-width:2.6;stroke-linejoin:round}
.ov .rail-c{stroke-width:6.5}
.ov .rail-done{fill:none;stroke:var(--tram);stroke-width:4.5;stroke-linejoin:round;stroke-linecap:round}
.ov .ferry{fill:none;stroke:#fff;stroke-width:2.2;stroke-dasharray:2 7;stroke-linecap:round;animation:march 1.2s linear infinite}
.ov .fp{fill:rgba(255,183,3,.3);stroke:var(--tram);stroke-width:2.5;stroke-linejoin:round}
.ov [hidden]{display:none}
@keyframes march{to{stroke-dashoffset:-19}}
.mk{position:absolute;inset:0;pointer-events:none}
.mk>*{position:absolute;left:0;top:0;will-change:transform}
.mk [hidden]{display:none!important}
.pin{width:1.75rem;height:1.75rem;margin:-0.875rem 0 0 -0.875rem;border-radius:50%;display:grid;place-items:center;background:var(--c);color:var(--ct,#fff);font:600 0.6875rem/1 var(--mono);border:2px solid #fff;box-shadow:0 3px 10px -2px rgba(0,0,0,.6);pointer-events:auto;cursor:pointer;transition:opacity .3s,box-shadow .2s}
.pin.hot{box-shadow:0 0 0 5px rgba(255,183,3,.8),0 3px 10px -2px rgba(0,0,0,.6)}
.pin.dim{opacity:.35}
.pin .lb{position:absolute;left:1.25rem;top:50%;transform:translateY(-50%);white-space:nowrap;padding:0.3125rem 0.5625rem;border-radius:62.4375rem;background:#fff;color:var(--ink);font:600 0.75rem/1 var(--body);box-shadow:0 6px 16px -6px rgba(0,0,0,.55);opacity:0;transition:opacity .2s;pointer-events:none}
.pin .lb small{font:500 0.6875rem/1 var(--mono);color:var(--ink-3);margin-left:0.375rem}
.pin.lab .lb,.pin:hover .lb,.pin.hot .lb{opacity:1}
.pin.lft .lb{left:auto;right:1.25rem}
.door.nolab span{display:none}
.door{width:0;height:0}
.door i{position:absolute;left:-0.4375rem;top:-0.4375rem;width:0.875rem;height:0.875rem;border-radius:50%;background:var(--tram);box-shadow:0 0 0 3px #fff,0 4px 12px rgba(0,0,0,.5)}
.door i::after{content:"";position:absolute;inset:-0.75rem;border-radius:50%;border:2px solid var(--tram);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(.4);opacity:1}100%{transform:scale(1.6);opacity:0}}
.door span{position:absolute;left:1rem;top:-0.75rem;white-space:nowrap;padding:0.375rem 0.625rem;border-radius:62.4375rem;background:var(--tram);color:var(--tram-ink);font:700 0.6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 20px -8px rgba(0,0,0,.6)}
.geol{width:0;height:0}
.geol span{position:absolute;transform:translate(-50%,-50%);white-space:nowrap;color:#fff;font:500 0.6875rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;text-shadow:0 1px 3px rgba(0,0,0,.7),0 0 12px rgba(0,0,0,.4)}
.geol.sea span{font:italic 600 0.9375rem/1 var(--display);letter-spacing:.24em;color:rgba(255,255,255,.88)}
.stn{width:0;height:0}
.stn i{position:absolute;left:-0.25rem;top:-0.25rem;width:0.5rem;height:0.5rem;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(0,0,0,.4)}
.stn.key i{left:-0.375rem;top:-0.375rem;width:0.75rem;height:0.75rem;box-shadow:0 0 0 3px var(--ink)}
.stn.beach i{box-shadow:0 0 0 3px var(--tagus)}
.stn.passed i{background:var(--tram)}
.stn .lb{position:absolute;left:0;bottom:0.75rem;transform:translateX(-50%);white-space:nowrap;padding:0.3125rem 0.5rem;border-radius:0.625rem;background:#fff;box-shadow:0 8px 20px -10px rgba(0,0,0,.6);text-align:center}
.stn.down .lb{bottom:auto;top:0.75rem}
.stn .lb b{display:block;font:600 0.75rem/1.15 var(--body)}
.stn .lb em{display:block;font:500 0.6875rem/1.3 var(--mono);font-style:normal;color:var(--ink-3)}
.stn .lb .bt{display:inline-block;margin-top:0.1875rem;padding:2px 0.375rem;border-radius:62.4375rem;background:#e3f1f3;color:var(--tagus);font:600 0.6875rem/1.2 var(--mono);letter-spacing:.1em;text-transform:uppercase}
.train{width:0;height:0}
.train i{position:absolute;left:-0.5625rem;top:-0.5625rem;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--tram);box-shadow:0 0 0 4px rgba(255,183,3,.35),0 0 26px 8px rgba(255,183,3,.6)}
.hud{position:absolute;left:1.125rem;top:1rem;display:grid;gap:0.375rem;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45);pointer-events:none;transition:opacity .4s}
.hud .k{font:500 0.6875rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.88}
.hud .alt{font:600 clamp(1.375rem,2.2vw,2.125rem)/1 var(--mono);letter-spacing:-.02em}
.hud .alt small{font-size:.42em;letter-spacing:.08em;margin-left:0.3125rem;opacity:.85}
.compass{position:absolute;right:1rem;top:1rem;display:flex;align-items:center;gap:0.5rem;pointer-events:none;transition:opacity .4s}
.compass .badge2{padding:0.375rem 0.625rem;border-radius:62.4375rem;background:rgba(255,255,255,.92);font:600 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.compass svg{width:2.125rem;height:2.125rem;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.scale{position:absolute;left:1.125rem;bottom:1rem;color:#fff;font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-shadow:0 1px 6px rgba(0,0,0,.45);pointer-events:none;transition:opacity .4s}
.scale i{display:block;height:0.375rem;margin-top:0.3125rem;border:1.5px solid #fff;border-top:0;width:6.25rem}
.credit{position:absolute;right:1rem;bottom:0.875rem;max-width:55%;text-align:right;color:rgba(255,255,255,.82);font:400 0.6875rem/1.4 var(--mono);text-shadow:0 1px 6px rgba(0,0,0,.6);pointer-events:none;transition:opacity .4s}
.stage.img-mode .hud,.stage.img-mode .compass,.stage.img-mode .scale,.stage.img-mode .credit{opacity:0}
.zoomui{position:absolute;right:1rem;bottom:2.75rem;display:grid;gap:0.375rem;opacity:0;pointer-events:none;transition:opacity .3s}
.stage.explore .zoomui{opacity:1;pointer-events:auto}
.stage.explore{cursor:grab}
.stage.explore.dragging{cursor:grabbing}
.zoomui button{width:2.375rem;height:2.375rem;border:0;border-radius:0.75rem;background:#fff;font:600 1.125rem/1 var(--body);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.stage-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);padding:0.4375rem 0.75rem;border-radius:62.4375rem;background:rgba(255,255,255,.92);font:500 0.7188rem/1 var(--body);color:var(--ink-2);opacity:0;transition:opacity .4s;pointer-events:none;white-space:nowrap}
.stage.explore .stage-hint{opacity:1}
.stage.explore .credit{opacity:0}

/* image scenes */
.scene{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(1rem,3vh,2.125rem);opacity:0;visibility:hidden;transform:scale(1.04);transition:opacity .6s ease,transform .8s cubic-bezier(.2,.7,.2,1),visibility 0s linear .6s;background:#f3f4f6 var(--tile) center/3.5rem 3.5rem;background-blend-mode:luminosity}
.scene::before{content:"";position:absolute;inset:0;background:rgba(243,244,246,.9)}
.scene.on{opacity:1;visibility:visible;transform:none;transition:opacity .7s ease .35s,transform 1s cubic-bezier(.2,.7,.2,1) .35s,visibility 0s}
.scene figure{position:relative;margin:0;height:100%;max-width:100%;aspect-ratio:var(--ar);box-shadow:0 40px 80px -40px rgba(0,0,0,.55);border-radius:0.875rem;overflow:hidden}
.scene figure img{width:100%;height:100%;object-fit:cover}
.scene figcaption{position:absolute;left:0.75rem;bottom:0.75rem;padding:0.375rem 0.625rem;border-radius:62.4375rem;background:rgba(255,255,255,.92);font:500 0.6875rem/1 var(--mono);color:var(--ink-2)}
.scene svg{position:absolute;inset:0;width:100%;height:100%}
.rg{fill:transparent;stroke:transparent;cursor:pointer;transition:fill .2s,stroke .2s}
.rg.svc{cursor:default}
.rg:hover,.rg.hl{fill:rgba(255,183,3,.36);stroke:#fff;stroke-width:2;vector-effect:non-scaling-stroke}
.rg.svc:hover,.rg.svc.hl{fill:rgba(28,63,168,.24)}
.flv{position:absolute;left:0.5rem;top:0;bottom:0;pointer-events:none}
.flv span{position:absolute;left:0;white-space:nowrap;transform:translateY(-50%);padding:0.1875rem 0.375rem;border-radius:62.4375rem;background:rgba(255,255,255,.82);font:600 0.6875rem/1 var(--mono);letter-spacing:.06em;color:var(--ink-3);transition:color .2s,background .2s}
.flv span.on{color:var(--tram-ink);background:var(--tram)}

/* bottom rail */
.rail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:0 1.375rem}
.nav-btn{display:inline-flex;align-items:center;gap:0.625rem;height:2.625rem;padding:0 1rem;border:1px solid var(--line);border-radius:62.4375rem;background:#fff;font:600 0.8438rem/1 var(--body);color:var(--ink)}
.nav-btn:hover{border-color:var(--ink)}
.nav-btn svg{width:1rem;height:1rem}
.nav-btn.next{background:var(--ink);border-color:var(--ink);color:#fff;max-width:18.75rem}
.nav-btn.next span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nav-btn:disabled{opacity:.35;cursor:default}
.segs{display:flex;align-items:center;gap:0.3125rem;min-width:0}
.seg{position:relative;flex:1;height:1.875rem;border:0;background:transparent;padding:0}
.seg i{position:absolute;left:0;right:0;top:50%;height:0.25rem;margin-top:-2px;border-radius:2px;background:var(--line);transition:background .3s,height .2s,margin .2s}
.seg.done i{background:var(--ink)}
.seg.cur i{background:var(--tram);height:0.375rem;margin-top:-0.1875rem}
.seg:hover i{background:#c4c9cf}
.seg.cur:hover i{background:var(--tram)}
.seg .tip{position:absolute;left:50%;bottom:1.875rem;transform:translateX(-50%) translateY(0.25rem);white-space:nowrap;padding:0.375rem 0.625rem;border-radius:0.5rem;background:var(--ink);color:#fff;font:500 0.7188rem/1 var(--body);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s}
.seg .tip b{font:600 0.6875rem/1 var(--mono);margin-right:0.375rem;color:var(--tram)}
.seg:hover .tip,.seg:focus-visible .tip{opacity:1;transform:translateX(-50%)}
.count{font:500 0.7188rem/1 var(--mono);color:var(--ink-3);white-space:nowrap}
.count b{color:var(--ink)}
.rail-right{display:flex;align-items:center;gap:0.875rem}

@media (max-width:900px){
  :root{--top:3.5rem;--rail:3.75rem}
  .top{grid-template-columns:minmax(0,1fr) auto;padding:0 0.75rem}
  .chap{display:none}
  .tbtn .lbl{display:none}
  .tbtn{padding:0 0.75rem}
  .main{grid-template-columns:minmax(0,1fr);grid-template-rows:44% minmax(0,1fr)}
  .stage{order:-1;margin:0 0.625rem;border-radius:1.25rem}
  .panel{padding:1rem 1.125rem 1.75rem}
  .panel h1{font-size:clamp(4rem,19vw,6.875rem);margin:0.625rem 0 0.875rem}
  .panel h2{font-size:clamp(1.75rem,7.6vw,2.5rem);margin:0.5rem 0 0.625rem}
  .rail{padding:0 0.625rem;gap:0.625rem}
  .nav-btn{padding:0 0.8125rem}
  .nav-btn .lbl,.count{display:none}
  .nav-btn.next{max-width:none}
  .seg .tip{display:none}
  .credit{display:none}
  .hud .alt{font-size:1.25rem}
  .compass .badge2{display:none}
  .stn .lb em{display:none}
  .flv{display:none}
  .keys{display:none}
  .ov-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem}
  .card .lbl span{font-size:0.875rem}
}
@media (prefers-reduced-motion:reduce){
  .panel [data-a],.panel.on [data-a]{transition:none;transform:none}
  .ov .route,.ov .ferry,.door i::after{animation:none}
  .scene,.scene.on,.geo{transition:opacity .2s}
}

[hidden]{display:none!important}

/* ---------- v5 additions: chapter tabs, contact, gallery, viewer, postcard, metro ---------- */
.pop-wrap{position:relative}
.pop{position:absolute;right:0;top:2.875rem;z-index:40;display:grid;gap:0.25rem;min-width:16.25rem;padding:1rem 1.125rem;border-radius:1rem;background:#fff;box-shadow:0 24px 50px -20px rgba(0,0,0,.45),0 0 0 1px var(--line);font-size:0.9062rem}
.pop b{font:700 1.25rem/1.1 var(--display);letter-spacing:-.02em;margin:0.25rem 0 0.375rem}
.pop .mail{font:500 0.8125rem/1.5 var(--mono);user-select:all}
.pop .addr{font-size:0.8125rem;color:var(--ink-3)}
.seg{flex:1 1 0;min-width:0;height:2.75rem;display:flex;flex-direction:column;justify-content:center;gap:0.4375rem;text-align:left}
.seg i{position:relative;left:auto;right:auto;top:auto;margin:0!important;display:block;width:100%}
.seg .nm{font:500 0.7188rem/1.1 var(--body);color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.seg.cur .nm{color:var(--ink);font-weight:600}
.seg.done .nm{color:var(--ink-2)}
.seg .tip{display:none}
.chips3{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:1.25rem}
.chips3 span{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;border-radius:62.4375rem;background:var(--wash);font:500 0.8125rem/1 var(--body);color:var(--ink-2)}
.chips3 span b{font:700 0.8125rem/1 var(--body);color:var(--ink)}
.ln{display:inline-flex;align-items:center;gap:0.4375rem}
.ln::before{content:"";flex:none;width:0.625rem;height:0.625rem;border-radius:50%;background:var(--lc,var(--ink))}
.ln.g{--lc:#00AAA6} .ln.b{--lc:#4E84C4}
.ln.f::before{width:0.5rem;height:0.5rem;border:2px dashed var(--tagus);background:transparent}
.ov .metro{fill:none;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.ov .metro.g{stroke:#00AAA6} .ov .metro.b{stroke:#4E84C4}
.ov .metro-c{stroke-width:9}
.mst{width:0;height:0}
.mst i{position:absolute;left:-0.4375rem;top:-0.4375rem;width:0.875rem;height:0.875rem;border-radius:50%;background:#fff;border:3px solid var(--mc,#00AAA6);box-shadow:0 2px 6px rgba(0,0,0,.5)}
.mst.blue i{--mc:#4E84C4}
.mst.both i{border-color:#00AAA6;box-shadow:0 0 0 3px #4E84C4,0 2px 6px rgba(0,0,0,.5)}
.mst span{position:absolute;left:0.75rem;top:-0.6875rem;white-space:nowrap;padding:0.25rem 0.5rem;border-radius:62.4375rem;background:#fff;color:var(--ink);font:600 0.6875rem/1 var(--body);box-shadow:0 6px 14px -6px rgba(0,0,0,.5)}
.mst.lft span{left:auto;right:0.75rem}
.postcard{position:absolute;right:clamp(0.875rem,2.4vw,1.875rem);bottom:clamp(2.5rem,6vh,4rem);z-index:5;width:clamp(7.5rem,15vw,13.125rem);padding:0.5rem 0.5rem 0.625rem;border:0;border-radius:0.375rem;background:#fff;box-shadow:0 30px 50px -22px rgba(0,0,0,.65);transform:rotate(-4deg);transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .5s ease,visibility 0s linear .5s;text-align:left;opacity:0;visibility:hidden}
.postcard.on{opacity:1;visibility:visible;transition:transform .4s cubic-bezier(.2,.7,.2,1),opacity .6s ease .5s,visibility 0s}
.postcard:hover{transform:rotate(0deg) translateY(-0.25rem)}
.postcard img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:0.1875rem}
.postcard b{display:block;margin-top:0.4375rem;font:700 0.7812rem/1.15 var(--display);letter-spacing:-.01em}
.postcard span{display:block;margin-top:2px;font:500 0.6875rem/1.3 var(--mono);color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}

/* gallery: the stage in the building, street-level and apartment slides */
.gal{position:absolute;inset:0;display:grid;grid-template-rows:minmax(0,1fr) auto;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s;background:#0e1114}
.stage.img-mode .gal{opacity:1;visibility:visible;transition:opacity .7s ease .3s,visibility 0s}
.gal-view{position:relative;min-height:0;overflow:hidden}
.gal-bg{position:absolute;inset:-2.5rem;background:center/cover no-repeat;filter:blur(28px) saturate(1.1) brightness(.65);transform:scale(1.1)}
.gal-fig{position:absolute;inset:0;margin:0;display:flex;align-items:center;justify-content:center;padding:clamp(0.625rem,2vh,1.375rem) clamp(0.625rem,2vw,1.625rem);opacity:0;transition:opacity .7s ease}
.gal-fig.on{opacity:1}
.gal-fig img{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:0.625rem;box-shadow:0 30px 60px -30px rgba(0,0,0,.8);cursor:zoom-in}
.gal-fig.on img{animation:kb 14s ease-out both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.045)}}
.gal-elev{position:absolute;inset:0;display:grid;place-items:center;padding:clamp(0.625rem,2vh,1.375rem);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s}
.gal-elev.on{opacity:1;visibility:visible;transition:opacity .6s ease,visibility 0s}
.elev-box{position:relative;height:100%;max-width:100%;aspect-ratio:640/976;border-radius:0.625rem;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.elev-box img{width:100%;height:100%;object-fit:cover}
.elev-box svg{position:absolute;inset:0;width:100%;height:100%}
.elev-box .flv{left:0.5rem}
.elev-tip{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);width:min(26.25rem,calc(100% - 1.75rem));padding:0.6875rem 0.875rem;border-radius:0.875rem;background:rgba(255,255,255,.95);font-size:0.8438rem;color:var(--ink-2);box-shadow:0 18px 40px -20px rgba(0,0,0,.6)}
.elev-tip b{display:block;font:700 0.9688rem/1.2 var(--display);letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.elev-tip .go{display:inline-block;margin-top:0.375rem;font:600 0.7812rem/1 var(--body);color:var(--cobalt)}
.gal-nav{position:absolute;top:50%;z-index:3;width:2.75rem;height:2.75rem;margin-top:-1.375rem;border:0;border-radius:50%;background:rgba(255,255,255,.92);font:600 1.25rem/1 var(--body);color:var(--ink);box-shadow:0 10px 24px -10px rgba(0,0,0,.6);transition:transform .2s}
.gal-nav:hover{transform:scale(1.08)}
.gal-nav.prev{left:0.875rem}.gal-nav.next{right:0.875rem}
.gal-cap{position:absolute;left:1rem;top:0.875rem;z-index:3;display:flex;align-items:center;gap:0.625rem;max-width:calc(100% - 5.625rem);padding:0.4375rem 0.75rem;border-radius:62.4375rem;background:rgba(255,255,255,.94);font:600 0.7812rem/1.2 var(--body);color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.gal-cap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gal-cap b{flex:none;font:500 0.6875rem/1 var(--mono);color:var(--ink-3)}
.gal-zoom{position:absolute;right:0.875rem;top:0.75rem;z-index:3;display:grid;place-items:center;width:2.375rem;height:2.375rem;border:0;border-radius:0.75rem;background:rgba(255,255,255,.94);box-shadow:0 10px 24px -12px rgba(0,0,0,.6)}
.gal-zoom svg{width:1rem;height:1rem}
.gal-strip{display:flex;gap:0.5rem;overflow-x:auto;overflow-y:hidden;padding:0.625rem 0.875rem 0.75rem;background:#0e1114;scrollbar-width:none;scroll-behavior:smooth}
.gal-strip::-webkit-scrollbar{display:none}
.gal-strip button{flex:none;width:4.75rem;height:3.375rem;padding:0;border:0;border-radius:0.5rem;overflow:hidden;background:#22272c;opacity:.55;transition:opacity .2s,box-shadow .2s}
.gal-strip button:hover{opacity:.85}
.gal-strip button.on{opacity:1;box-shadow:0 0 0 2px var(--tram)}
.gal-strip img{width:100%;height:100%;object-fit:cover}
.gal-strip .el{display:grid;place-items:center;font:600 0.6875rem/1.2 var(--mono);color:#fff;text-transform:uppercase;letter-spacing:.06em;background:var(--cobalt)}
.gal-empty{position:absolute;inset:0;display:none;place-items:center;text-align:center;padding:1.5rem;color:#cfd5db;font:500 0.6875rem/1.5 var(--mono);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.gal-empty b{display:block;margin-bottom:0.375rem;font:700 1.5rem/1.1 var(--display);letter-spacing:-.02em;text-transform:none;color:#fff}
.gal.single .gal-nav,.gal.single .gal-strip{display:none}

/* lightbox */
.lbx{position:fixed;inset:0;z-index:60;display:grid;grid-template-rows:auto minmax(0,1fr) auto;background:rgba(8,10,12,.96);opacity:0;visibility:hidden;transition:opacity .3s ease,visibility 0s linear .3s}
.lbx.on{opacity:1;visibility:visible;transition:opacity .3s ease,visibility 0s}
.lbx-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.875rem 1.125rem;color:#fff;font:600 0.875rem/1.3 var(--body)}
.lbx-top b{font:500 0.6875rem/1 var(--mono);color:#9aa3ad;margin-left:0.625rem}
.lbx-top button{flex:none;width:2.625rem;height:2.625rem;border:0;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;font-size:1.25rem}
.lbx-view{position:relative;min-height:0;display:flex;align-items:center;justify-content:center;padding:0 clamp(0.5rem,4vw,4.375rem)}
.lbx-view img{max-width:100%;max-height:100%;object-fit:contain;border-radius:0.375rem}
.lbx .gal-nav{background:rgba(255,255,255,.14);color:#fff;box-shadow:none}
.lbx-hint{padding:0.625rem 1.125rem 1rem;text-align:center;font:400 0.6875rem/1.4 var(--mono);color:#7d868f}

/* panels: building, street, apartments */
.endcard{margin-top:1.75rem;padding:1.25rem;border-radius:1.125rem;background:var(--wash)}
.endcard h3{font-size:1.625rem;margin:0.375rem 0 0.5rem}
.endcard .credits{margin-top:1.125rem}
.floorlist{margin:1.125rem 0 0;padding:0;list-style:none;display:grid}
.floorlist button{display:grid;grid-template-columns:5.375rem minmax(0,1fr);gap:0.75rem;width:100%;padding:0.6875rem 0.25rem;border:0;border-top:1px solid var(--line);background:transparent;text-align:left;font-size:0.9375rem;transition:background .2s}
.floorlist li:last-child button{border-bottom:1px solid var(--line)}
.floorlist button:hover{background:#fff8e3}
.floorlist button b{font:500 0.6875rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.shopcards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.75rem;margin-top:1.25rem}
.shopcards button{display:grid;gap:0.5rem;padding:0;border:0;background:transparent;text-align:left}
.shopcards img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0.875rem;transition:transform .25s,box-shadow .25s}
.shopcards button:hover img{transform:translateY(-0.1875rem);box-shadow:0 16px 30px -18px rgba(0,0,0,.6)}
.shopcards b{font:700 1rem/1.2 var(--display);letter-spacing:-.01em}
.shopcards span{font-size:0.8125rem;color:var(--ink-3);margin-top:-0.375rem}
.main{transition:grid-template-rows .5s ease}

@media (max-width:900px){
  .seg{height:1.875rem}
  .seg .nm{display:none}
  .main.gal-mode{grid-template-rows:56% minmax(0,1fr)}
  .gal-strip{padding:0.5rem 0.625rem 0.625rem;gap:0.375rem}
  .gal-strip button{width:3.5rem;height:2.625rem}
  .gal-nav{width:2.375rem;height:2.375rem;margin-top:-1.1875rem}
  .gal-nav.prev{left:0.5rem}.gal-nav.next{right:0.5rem}
  .gal-cap{left:0.625rem;top:0.625rem;font-size:0.7188rem;padding:0.375rem 0.625rem}
  .gal-zoom{right:0.625rem;top:0.5625rem;width:2.125rem;height:2.125rem}
  .elev-tip{bottom:0.625rem;font-size:0.7812rem;padding:0.5625rem 0.75rem}
  .pop{position:fixed;left:0.75rem;right:0.75rem;top:3.75rem;min-width:0}
  .postcard{width:6.5rem;padding:0.375rem 0.375rem 0.5rem;bottom:0.875rem;right:0.875rem}
  .postcard b{font-size:0.6875rem}
  .postcard span{display:none}
}
@media (prefers-reduced-motion:reduce){.gal-fig.on img{animation:none}.main{transition:none}}

.facts.lines li::before{display:none}
.facts.lines li{padding-left:2px}
.tpane .note{margin-top:0.625rem}

/* ---------- v6: navigation (grouped rail, contents, cover shortcuts) ---------- */
button.chap{justify-self:center;border:0;background:transparent;padding:0.4375rem 0.75rem;border-radius:62.4375rem;cursor:pointer;font:inherit;font-size:0.875rem;color:var(--ink-2)}
button.chap:hover{background:var(--wash)}
button.chap::after{content:"";flex:none;width:0.375rem;height:0.375rem;margin-left:2px;border-right:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:translateY(-0.1875rem) rotate(45deg)}
.toc{min-width:20.625rem;max-height:min(72vh,37.5rem);overflow:auto;gap:0.75rem;padding:0.875rem 0.75rem 1rem}
.toc-g{display:grid;gap:1px}
.toc-g .kicker{margin:2px 0 0.25rem 0.5rem}
.toc button{display:grid;grid-template-columns:1.75rem minmax(0,1fr);gap:0.5rem;align-items:baseline;width:100%;padding:0.5rem;border:0;border-radius:0.625rem;background:transparent;text-align:left;font:500 0.9062rem/1.3 var(--body);color:var(--ink-2)}
.toc button b{font:600 0.6875rem/1 var(--mono);color:var(--ink-3)}
.toc button:hover{background:var(--wash);color:var(--ink)}
.toc button.cur{background:#fff3cf;color:var(--ink)}
.toc button.cur b{color:var(--ink)}
.jump{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0.5rem;margin-top:1.375rem}
.jump button{display:grid;align-content:start;gap:0.25rem;padding:0.75rem 0.75rem 0.6875rem;border:1px solid var(--line);border-radius:0.875rem;background:#fff;text-align:left;transition:border-color .2s,transform .2s}
.jump button:hover{border-color:var(--ink);transform:translateY(-2px)}
.jump b{font:700 0.9375rem/1.15 var(--display);letter-spacing:-.01em}
.jump small{font-size:0.75rem;line-height:1.3;color:var(--ink-3)}
.segs{gap:0.875rem}
.sg{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 0}
.sgl{padding-left:1px;font:600 0.6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}
.sg.cur .sgl{color:var(--ink)}
.sgs{display:flex;gap:0.3125rem;min-width:0}
.sg .seg{height:2.5rem}
.lnk{display:inline-flex;align-items:center;gap:0.375rem;padding:0.5rem 0.75rem;border:1px solid var(--line);border-radius:62.4375rem;background:#fff;font:600 0.7812rem/1 var(--body);color:var(--ink);text-decoration:none;transition:border-color .2s,background .2s}
.lnk:hover{border-color:var(--ink)}
.panel>.lnk{margin-top:1rem}
.btn:disabled{opacity:.35;cursor:default}
.rg[data-link]{cursor:pointer}

/* ---------- v6: floor plans ---------- */
.k-studio{--c:#1c3fa8}.k-one{--c:#7a3fc4}.k-two{--c:#e5307f}.k-dup,.k-dup1,.k-dup2{--c:#2f7d4f}
.k-bar{--c:#d99a00}.k-matcha{--c:#6f9a3c}.k-entrance{--c:#7d8791}.k-reception{--c:#0f6878}.k-common{--c:#aeb5bd}
.stage.plan-mode{background:#f3f1ec}
.plans{position:absolute;inset:0;background:#f3f1ec;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility 0s linear .5s}
.plans::before{content:"";position:absolute;inset:0;background:radial-gradient(110% 85% at 50% 42%,rgba(255,255,255,.85),rgba(255,255,255,0) 72%);pointer-events:none}
.stage.plan-mode .plans{opacity:1;visibility:visible;transition:opacity .6s ease .2s,visibility 0s}
.stage.plan-mode .gal{opacity:0;visibility:hidden;transition:opacity .4s ease,visibility 0s linear .4s}
.pv{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.pv.on{opacity:1;visibility:visible;transition:opacity .6s ease .1s,visibility 0s}
.psvg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.psvg .slab{fill:#fff}
.rm{fill:var(--c);fill-opacity:.2;transition:fill-opacity .25s ease}
.rm.k-common,.rm.k-entrance{fill-opacity:.1}
.uo{fill:none;stroke:var(--c);stroke-width:6;stroke-linejoin:round;stroke-opacity:0;pointer-events:none;transition:stroke-opacity .25s ease}
.rm.hov{fill-opacity:.42}
.uo.hov{stroke-opacity:.85}
.has-sel .rm{fill-opacity:.05}
.has-sel .rm.sel{fill-opacity:.4}
.has-sel .uo.sel{stroke-opacity:1}
.rm.hot,.has-sel .rm.hot{fill-opacity:.85}
.pv-floors .rm:not(.k-common):not(.k-reception),.pv-duplex .rm.k-dup1,.pv-duplex .rm.k-dup2{cursor:pointer}
.pbox{position:relative}
.pbox>.psvg{filter:drop-shadow(0 18px 24px rgba(30,36,44,.13))}
.plab{position:absolute;inset:0;pointer-events:none}
.ulab{position:absolute;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:0.375rem;padding:0.25rem 0.5625rem 0.25rem 0.25rem;border:0;border-radius:62.4375rem;background:rgba(255,255,255,.96);box-shadow:0 6px 16px -8px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.05);font:600 0.75rem/1 var(--body);color:var(--ink-2);white-space:nowrap;pointer-events:auto;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,opacity .25s ease}
.ulab b{display:grid;place-items:center;min-width:1.625rem;height:1.375rem;padding:0 0.375rem;border-radius:62.4375rem;background:var(--c);color:#fff;font:600 0.6875rem/1 var(--mono)}
.ulab.zl{gap:0.4375rem;padding:0.4375rem 0.6875rem;font:700 0.7812rem/1 var(--display);letter-spacing:-.01em;color:var(--ink)}
.ulab.zl::before{content:"";width:0.5rem;height:0.5rem;border-radius:50%;background:var(--c)}
.ulab:hover,.ulab.hov,.ulab.sel{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 0 2px var(--c),0 10px 20px -10px rgba(0,0,0,.6)}
.has-sel .ulab:not(.sel){opacity:.5}
.pbox.tiny .ulab span{display:none}
.pbox.tiny .ulab{padding:0.1875rem}
.pbox.tiny .ulab.zl span{display:inline}
.pbox.tiny .ulab.zl{padding:0.3125rem 0.5rem;font-size:0.6875rem}
.zlab{position:absolute;transform:translate(-50%,-50%);padding:0.25rem 0.5rem;border-radius:62.4375rem;background:rgba(255,255,255,.88);font:600 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c);pointer-events:none}
.street{position:absolute;left:50%;bottom:-0.375rem;transform:translate(-50%,100%);font:500 0.6875rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap;pointer-events:none}
.street::before{content:"\2193\00a0\00a0"}
.ptip{position:absolute;left:0;top:0;z-index:8;display:grid;gap:0.1875rem;padding:0.5rem 0.75rem;border-radius:0.75rem;background:#fff;box-shadow:0 14px 30px -14px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.04);font:600 0.8125rem/1.2 var(--body);color:var(--ink);white-space:nowrap;pointer-events:none}
.ptip span{font:500 0.6875rem/1.2 var(--mono);color:var(--ink-3)}
.ptip i{position:absolute;right:-0.5rem;top:-0.5625rem;padding:0.1875rem 0.375rem;border-radius:62.4375rem;background:var(--c);color:#fff;font:600 0.6875rem/1 var(--mono);font-style:normal}
.pv-finder.on~.pcredit{display:none}
.pcredit{position:absolute;right:1rem;bottom:0.75rem;font:400 0.6875rem/1.4 var(--mono);color:var(--ink-3);pointer-events:none}
.pv-hint{position:absolute;left:50%;bottom:1rem;transform:translateX(-50%);padding:0.4375rem 0.75rem;border-radius:62.4375rem;background:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.4);font:500 0.7188rem/1 var(--body);color:var(--ink-2);white-space:nowrap;pointer-events:none}

/* the stack */
.stk{position:absolute;inset:0;overflow:hidden;perspective:125rem;perspective-origin:50% 32%;cursor:grab;touch-action:none}
.stk.dragging{cursor:grabbing}
.stk-floor{position:absolute;left:50%;top:80%;width:72%;height:20%;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(40,46,56,.2),rgba(40,46,56,0));pointer-events:none}
.stk-rig{position:absolute;left:50%;top:50%;transform-style:preserve-3d;--yaw:-28deg;--tilt:60deg;--gap:3.125rem;transform:translate(-50%,-50%) rotateX(var(--tilt)) rotateZ(var(--yaw))}
.plate{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;transform:translateZ(calc((var(--k) - 2.5) * var(--gap))) translateY(var(--pull,0%));transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.plate>*{transition:opacity .35s ease}
.plate .under{position:absolute;inset:0;transform:translateZ(-0.625rem)}
.plate .under svg{display:block;width:100%;height:100%;fill:#c3c8cf}
.plate .psvg *{pointer-events:none}
.plate .psvg .slab{pointer-events:visiblePainted;cursor:pointer}
.stk[data-hl] .plate:not(.hl)>:not(.uchip){opacity:.16}
.stk[data-hl] .plate.hl{--pull:15%}
.ptag{position:absolute;left:0;top:90%;transform-origin:0 0;transform:translateZ(0.25rem) rotateZ(calc(var(--yaw) * -1)) rotateX(calc(var(--tilt) * -1)) translate(calc(-100% - 0.625rem),-50%);padding:0.3125rem 0.5625rem;border-radius:62.4375rem;background:#fff;box-shadow:0 6px 14px -8px rgba(0,0,0,.5);font:600 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-2);white-space:nowrap;pointer-events:none}
.plate.hl .ptag{background:var(--ink);color:#fff}
.uchip{position:absolute;transform-origin:0 0;transform:translateZ(0.5rem) rotateZ(calc(var(--yaw) * -1)) rotateX(calc(var(--tilt) * -1)) translate(-50%,-100%);padding:0.25rem 0.4375rem;border-radius:62.4375rem;background:var(--c);color:#fff;font:600 0.6875rem/1 var(--mono);box-shadow:0 6px 14px -6px rgba(0,0,0,.6);opacity:0;pointer-events:none;transition:opacity .3s ease}
.stk[data-hl] .plate.hl .uchip{opacity:1}
.lvlist{list-style:none;margin:1.125rem 0 0;padding:0}
.lvlist li{border-top:1px solid var(--line)}
.lvlist li:last-child{border-bottom:1px solid var(--line)}
.lvlist button{display:grid;grid-template-columns:4.5rem minmax(0,1fr) auto;gap:0.625rem;align-items:center;width:100%;padding:0.625rem 0.25rem;border:0;background:transparent;text-align:left;transition:background .2s}
.lvlist button:hover,.lvlist button.on{background:#fff8e3}
.lvn{font:500 0.6875rem/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.lvlist button.on .lvn{color:var(--ink)}
.lvd{font-size:0.9062rem;line-height:1.3}
.lvu{display:flex;gap:0.25rem}
.lvu i{width:0.625rem;height:0.625rem;border-radius:50%;background:var(--c)}
.explode{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0.625rem;align-items:center;margin-top:1rem;font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.explode input{width:100%;margin:0;accent-color:var(--ink)}
.totals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:1.125rem;border-top:1px solid var(--ink)}
.totals>div{padding:0.75rem 0.625rem 0.625rem 0}
.totals>div+div{padding-left:0.75rem;border-left:1px solid var(--line)}
.totals b{font:700 clamp(1.625rem,2.5vw,2.375rem)/1 var(--body);letter-spacing:-.04em}
.totals small{margin-left:0.1875rem;font:500 0.6875rem/1 var(--mono);color:var(--ink-3)}
.totals span{display:block;margin-top:0.375rem;font-size:0.7812rem;line-height:1.3;color:var(--ink-2)}

/* floor by floor: the lift */
.shaft{position:absolute;left:0;top:0;bottom:0;right:5rem;overflow:hidden;touch-action:none}
.car{position:absolute;left:0;top:0;width:100%;height:400%;will-change:transform}
.lvl{position:relative;height:25%;display:grid;place-items:center;padding:0.625rem 0.625rem 1.875rem}
.liftp{position:absolute;right:1rem;top:50%;transform:translateY(-50%);display:grid;justify-items:center;gap:0.5rem;padding:0.75rem 0.5625rem 0.875rem;border-radius:1.875rem;background:linear-gradient(180deg,#2b3139,#161a1f);box-shadow:0 24px 40px -22px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.08)}
.liftp .disp{display:flex;align-items:center;justify-content:center;gap:0.1875rem;width:2.875rem;height:2.5rem;margin-bottom:0.25rem;border-radius:0.625rem;background:#07090b;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);color:var(--tram);font:700 1.1875rem/1 var(--mono);text-shadow:0 0 8px rgba(255,183,3,.7)}
.liftp .disp i{font-size:0.6875rem;font-style:normal}
.liftp button{display:grid;place-items:center;width:2.5rem;height:2.5rem;padding:0;border:1.5px solid #59626d;border-radius:50%;background:radial-gradient(circle at 40% 35%,#3a414a,#22272d);color:#d5dbe1;font:600 0.8125rem/1 var(--mono);transition:border-color .2s,color .2s,box-shadow .2s}
.liftp button:hover{border-color:#aab3bd;color:#fff}
.liftp button.on{border-color:var(--tram);color:var(--tram);box-shadow:0 0 0 3px rgba(255,183,3,.18),0 0 14px rgba(255,183,3,.45)}
.liftp .up4{border-style:dashed}
.flhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:0.25rem 0.75rem;margin-top:1.25rem;padding-bottom:0.625rem;border-bottom:1px solid var(--ink)}
.flhead b{font:700 1.625rem/1 var(--display);letter-spacing:-.03em}
.flhead span{font-size:0.875rem;color:var(--ink-2)}
.ulist{list-style:none;margin:0;padding:0}
.urow{border-bottom:1px solid var(--line)}
.uhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0.75rem;align-items:center;width:100%;padding:0.75rem 0.25rem;border:0;background:transparent;text-align:left;transition:background .2s}
.uhead:hover,.urow.hov .uhead,.urow.open .uhead{background:#fff8e3}
.ucode{display:inline-grid;place-items:center;min-width:2.25rem;height:1.625rem;padding:0 0.5rem;border-radius:62.4375rem;background:var(--c);color:#fff;font:600 0.7188rem/1 var(--mono)}
.ucode.zc{min-width:0.875rem;width:0.875rem;height:0.875rem;padding:0}
.ut b{display:block;font-size:0.9375rem;font-weight:600;line-height:1.25}
.ut small{display:block;margin-top:1px;font-size:0.7812rem;line-height:1.3;color:var(--ink-3)}
.ua{font:500 0.6875rem/1 var(--mono);color:var(--ink-3);text-align:right;white-space:nowrap}
.ua em{display:block;margin-bottom:2px;font:700 1.375rem/1 var(--body);font-style:normal;letter-spacing:-.03em;color:var(--ink)}
.ubody{display:none;padding:2px 0.25rem 0.875rem 3.25rem}
.urow.open .ubody{display:block;animation:rise .4s cubic-bezier(.2,.7,.2,1)}
.rlist{margin:0;display:grid}
.rlist div{display:flex;justify-content:space-between;gap:0.75rem;padding:0.3125rem 2px;border-bottom:1px dotted #d9dde2;font-size:0.875rem;cursor:default;transition:background .15s}
.rlist div:hover{background:#fff8e3}
.rlist dd{margin:0;font:500 0.7188rem/1.6 var(--mono);color:var(--ink-2);white-space:nowrap}
.uacts{display:flex;flex-wrap:wrap;gap:0.5rem;margin-top:0.75rem}

/* the duplexes */
.dxpair{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;align-items:center;justify-items:center;gap:0.625rem;padding:0.875rem 1rem 1.625rem}
.dx{position:relative;margin:0;display:grid;justify-items:center;gap:0.75rem;transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1),visibility 0s}
.dx figcaption{display:flex;align-items:baseline;gap:0.5rem}
.dx figcaption b{font:700 1.125rem/1 var(--display);letter-spacing:-.02em}
.dx figcaption span{font:500 0.6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.dxlink{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.dxl{fill:none;stroke:var(--leaf);stroke-width:3;stroke-dasharray:2 9;stroke-linecap:round;animation:march 1.1s linear infinite}
.dxl-c{fill:none;stroke:#fff;stroke-width:9;stroke-linecap:round;opacity:.85}
.stair{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:2.125rem;height:2.125rem;padding:0;border:2px solid #fff;border-radius:50%;background:var(--c);color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.6);pointer-events:auto;opacity:.5;transition:opacity .3s ease,transform .3s ease}
.stair svg{width:1.0625rem;height:1.0625rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.stair:hover{opacity:1;transform:translate(-50%,-50%) scale(1.08)}
.stair.sel{opacity:1;animation:pulse2 1.9s ease-out infinite}
@keyframes pulse2{0%{box-shadow:0 0 0 0 rgba(47,125,79,.55),0 6px 14px -6px rgba(0,0,0,.6)}100%{box-shadow:0 0 0 16px rgba(47,125,79,0),0 6px 14px -6px rgba(0,0,0,.6)}}
.dxtog{position:absolute;left:50%;top:0.75rem;z-index:3;transform:translateX(-50%);display:none;padding:0.25rem;border-radius:62.4375rem;background:#fff;box-shadow:0 8px 20px -12px rgba(0,0,0,.45)}
.dxtog button{padding:0.5rem 0.875rem;border:0;border-radius:62.4375rem;background:transparent;font:600 0.8125rem/1 var(--body);color:var(--ink-2)}
.dxtog button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pv-duplex.narrow .dxpair{grid-template-columns:1fr;padding-top:3.625rem}
.pv-duplex.narrow .dx{grid-area:1/1}
.pv-duplex.narrow .dx figcaption{display:none}
.pv-duplex.narrow .dx:not(.show){opacity:0;visibility:hidden;transform:translateY(-1rem) scale(.97);transition:opacity .35s ease,transform .45s ease,visibility 0s linear .45s}
.pv-duplex.narrow .dxtog{display:inline-flex}
.dxsel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem;margin-top:1.125rem}
.dxcard{display:grid;align-content:start;gap:0.25rem;padding:0.875rem;border:1px solid var(--line);border-radius:1rem;background:#fff;text-align:left;transition:border-color .2s,box-shadow .2s,transform .2s}
.dxcard:hover{transform:translateY(-2px)}
.dxcard[aria-pressed="true"]{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c),0 14px 26px -18px rgba(47,125,79,.7)}
.dxcard .ucode{justify-self:start}
.dxcard b{margin-top:0.375rem;font:700 1rem/1.15 var(--display);letter-spacing:-.01em}
.dxa{font:500 0.6875rem/1 var(--mono);color:var(--ink-3)}
.dxa em{font:700 1.875rem/1 var(--body);font-style:normal;letter-spacing:-.04em;color:var(--ink)}
.dxcard small{font-size:0.7812rem;line-height:1.35;color:var(--ink-2)}
.dxrooms{display:grid;gap:1rem;margin-top:1rem}
.dxrooms h4{display:flex;justify-content:space-between;margin:0 0 2px;font:500 0.6875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}

/* find yours */
.fgrid{position:absolute;inset:0;display:grid;align-content:start;gap:0.75rem;padding:1rem 1rem 2.25rem;overflow:auto;touch-action:pan-y;scrollbar-width:thin}
.frow{display:grid;grid-template-columns:1.25rem repeat(3,minmax(0,1fr));gap:0.625rem}
.frow.dup{grid-template-columns:1.25rem repeat(2,minmax(0,1fr))}
.frl{align-self:center;justify-self:center;writing-mode:vertical-rl;transform:rotate(180deg);font:600 0.6875rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);white-space:nowrap}
.fcard{position:relative;border-radius:1rem;background:#fff;box-shadow:0 0 0 1px var(--line);transition:opacity .35s ease,filter .35s ease,box-shadow .2s ease,transform .25s ease}
.fcard:hover{transform:translateY(-2px);box-shadow:0 0 0 1px #cfd4da,0 16px 28px -22px rgba(0,0,0,.5)}
.fcard.off{opacity:.2;filter:grayscale(1)}
.fcard.picked{box-shadow:0 0 0 2px var(--c),0 16px 30px -20px rgba(0,0,0,.5)}
.fpick{display:grid;gap:0.4375rem;width:100%;padding:0.625rem 0.625rem 0.6875rem;border:0;border-radius:1rem;background:transparent;text-align:left}
.minis{display:flex;align-items:center;justify-content:center;gap:0.375rem;height:var(--mh,6rem);min-width:0}
.mini{flex:0 1 auto;min-width:0;height:100%;width:auto;max-width:100%;overflow:visible}
.mslab{fill:#fff}
.mini .rm{fill-opacity:.3}
.mini .uo{stroke-opacity:.9;stroke-width:5}
.fmeta{display:flex;align-items:baseline;gap:0.4375rem;min-width:0}
.fmeta b{display:inline-grid;place-items:center;min-width:1.75rem;height:1.3125rem;padding:0 0.375rem;border-radius:62.4375rem;background:var(--c);color:#fff;font:600 0.6875rem/1 var(--mono)}
.fmeta>span{font:600 0.8125rem/1.2 var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.fmeta em{margin-left:auto;font:700 1.0625rem/1 var(--body);font-style:normal;letter-spacing:-.03em;white-space:nowrap}
.fmeta em small{font:500 0.6875rem/1 var(--mono);letter-spacing:0;color:var(--ink-3)}
.fout{font-size:0.7188rem;line-height:1.3;color:var(--ink-3)}
.tick{position:absolute;right:0.5rem;top:0.5rem;display:grid;place-items:center;width:1.375rem;height:1.375rem;border:1.5px solid #cfd4da;border-radius:50%;background:#fff;transition:background .2s,border-color .2s}
.tick svg{width:0.75rem;height:0.75rem;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fcard.picked .tick{background:var(--c);border-color:var(--c)}
.fopen{position:absolute;left:0.5rem;top:0.5rem;padding:0.3125rem 0.5rem;border:0;border-radius:62.4375rem;background:rgba(255,255,255,.94);box-shadow:0 0 0 1px var(--line);font:600 0.6875rem/1 var(--mono);color:var(--ink-2);opacity:0;transition:opacity .2s}
.fcard:hover .fopen,.fopen:focus-visible{opacity:1}
.filters{display:grid;gap:0.875rem;margin-top:1.125rem}
.fgrp{display:grid;gap:0.5rem}
.flab{font:500 0.6875rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.flab b{font:700 0.8125rem/1 var(--body);letter-spacing:0;color:var(--ink)}
.fchips{display:flex;flex-wrap:wrap;gap:0.375rem}
.fchip{padding:0.5rem 0.75rem;border:1px solid var(--line);border-radius:62.4375rem;background:#fff;font:600 0.8125rem/1 var(--body);color:var(--ink-2);transition:border-color .2s,background .2s,color .2s}
.fchip:hover{border-color:var(--ink)}
.fchip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.filters input[type=range]{width:100%;margin:0;accent-color:var(--ink)}
.fcount{margin-top:0.875rem;font-size:0.875rem;color:var(--ink-2)}
.fcount b{font:700 1.25rem/1 var(--body);color:var(--ink)}
.tray{display:flex;flex-wrap:wrap;align-items:center;gap:0.625rem;margin-top:0.75rem;padding:0.75rem;border-radius:1rem;background:var(--wash)}
.tray-l{display:flex;flex-wrap:wrap;gap:0.375rem;flex:1 1 10.625rem;min-width:0}
.tray .empty{font-size:0.8125rem;color:var(--ink-3)}
.tray .btn{height:2.5rem;padding:0 1rem;font-size:0.875rem}
.tchip{display:inline-flex;align-items:center;gap:0.375rem;padding:0.25rem;border-radius:62.4375rem;background:#fff;box-shadow:0 0 0 1px var(--line);font:600 0.7812rem/1 var(--body)}
.tchip b{display:grid;place-items:center;min-width:1.625rem;height:1.25rem;padding:0 0.3125rem;border-radius:62.4375rem;background:var(--c);color:#fff;font:600 0.6875rem/1 var(--mono)}
.tchip button{width:1.25rem;height:1.25rem;padding:0;border:0;border-radius:50%;background:var(--wash);font-size:0.8125rem;line-height:1}
.cmp{position:absolute;inset:0.625rem;z-index:7;display:grid;grid-template-rows:auto minmax(0,1fr);border-radius:1.25rem;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.55),0 0 0 1px var(--line);opacity:0;transform:translateY(0.75rem) scale(.985);transition:opacity .3s ease,transform .4s cubic-bezier(.2,.7,.2,1)}
.cmp.on{opacity:1;transform:none}
.cmp-top{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding:0.75rem 0.875rem 0.75rem 1.125rem;border-bottom:1px solid var(--line)}
.cmp-top b{font:700 1.125rem/1.1 var(--display);letter-spacing:-.02em}
.cmp-x{flex:none;width:2.25rem;height:2.25rem;border:0;border-radius:50%;background:var(--wash);font-size:1.125rem;line-height:1}
.cmp-body{overflow:auto;padding:0.875rem 1.125rem 1.25rem;touch-action:pan-y}
.cmp-grid{display:grid;grid-template-columns:6rem repeat(var(--n),minmax(0,1fr));column-gap:1rem;align-items:end}
.cmp-plan{display:flex;align-items:center;justify-content:center;gap:0.375rem;height:clamp(6.25rem,24vh,14.375rem)}
.cmp-h{margin:0.625rem 0 0.5rem}
.cmp-rl,.cmp-c{align-self:stretch;padding:0.5625rem 0;border-top:1px solid var(--line);font-size:0.875rem}
.cmp-rl{padding-top:0.6875rem;font:500 0.6875rem/1.5 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.cmp-c.best{font-weight:700;color:var(--ink);box-shadow:inset 0 -3px 0 var(--tram)}

@media (max-width:900px){
  .jump{grid-template-columns:repeat(3,minmax(0,1fr));gap:0.375rem}
  .jump button{padding:0.625rem}
  .jump small{display:none}
  .segs{gap:0.5rem}
  .sgl{display:none}
  .sgs{gap:0.1875rem}
  .sg .seg{height:1.875rem}
  button.chap{display:none}
  .toc{min-width:0}
  .shaft{right:3.5rem}
  .lvl{padding:0.375rem 0.375rem 1.5rem}
  .liftp{right:0.5rem;gap:0.375rem;padding:0.5rem 0.375rem 0.625rem}
  .liftp button{width:2.125rem;height:2.125rem;font-size:0.75rem}
  .liftp .disp{width:2.375rem;height:2rem;font-size:0.9375rem}
  .pcredit{display:none}
  .pv-hint{bottom:0.625rem;font-size:0.6875rem}
  .ubody{padding-left:0.25rem}
  .dxpair{padding:0.625rem 0.625rem 1.375rem}
  .frow{grid-template-columns:0.75rem repeat(3,minmax(0,1fr));gap:0.375rem}
  .frow.dup{grid-template-columns:0.75rem repeat(2,minmax(0,1fr))}
  .fgrid{gap:0.5rem;padding:0.625rem 0.5rem 1.5rem}
  .fpick{gap:0.25rem;padding:0.4375rem 0.375rem 0.5rem}
  .fmeta>span,.fout{display:none}
  .fmeta em{font-size:0.875rem}
  .tick{right:0.3125rem;top:0.3125rem;width:1.125rem;height:1.125rem}
  .fopen{display:none}
  .cmp{inset:0.375rem}
  .cmp-grid{grid-template-columns:4rem repeat(var(--n),minmax(0,1fr));column-gap:0.5rem}
  .cmp-c{font-size:0.7812rem}
  .totals b{font-size:1.625rem}
}
@media (prefers-reduced-motion:reduce){.plate,.dx,.cmp{transition:none}.dxl,.stair.sel{animation:none}}

/* ---------- v7: apartments chapter = render reel beside the plan ---------- */
.stage{--rw:41%}
.stage.plan-mode{background:transparent!important;overflow:visible;border-radius:0}
.stage.plan-mode .plans{left:calc(var(--rw) + 0.75rem);z-index:1;border-radius:1.5rem;overflow:hidden}
.reel{position:absolute;left:0;top:0;bottom:0;z-index:2;width:var(--rw);border-radius:1.5rem;overflow:hidden;background:#16191d;box-shadow:0 30px 60px -42px rgba(0,0,0,.7);opacity:0;visibility:hidden;transition:opacity .6s ease,visibility 0s linear .6s,transform .55s cubic-bezier(.2,.7,.2,1);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.stage.plan-mode .reel{opacity:1;visibility:visible;transition:opacity .7s ease .1s,visibility 0s,transform .55s cubic-bezier(.2,.7,.2,1)}
.reel-fig{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.reel-fig.on{opacity:1}
.reel-fig img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;-webkit-user-drag:none}
.reel-fig.on img{animation:rkb 12s ease-out both}
.reel-fig.land.on img{animation:rpan 12s ease-in-out both}
@keyframes rkb{from{transform:scale(1.02)}to{transform:scale(1.1)}}
@keyframes rpan{from{object-position:15% 50%;transform:scale(1.03)}to{object-position:85% 50%;transform:scale(1.06)}}
.reel-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,0) 16%,rgba(0,0,0,0) 56%,rgba(0,0,0,.7))}
.reel-bars{position:absolute;left:0.875rem;right:0.875rem;top:0.875rem;z-index:3;display:flex;gap:0.25rem;pointer-events:none}
.reel-bars i{flex:1;height:0.1875rem;border-radius:2px;background:rgba(255,255,255,.32);overflow:hidden}
.reel-bars i b{display:block;width:0;height:100%;background:#fff}
.reel-bars i.done b{width:100%}
.reel-bars i.on b{animation:rbar var(--rd,5200ms) linear forwards}
.reel.held .reel-bars i.on b{animation:none;width:100%}
@keyframes rbar{from{width:0}to{width:100%}}
.reel-tap{position:absolute;top:2.5rem;bottom:5.625rem;z-index:2;display:flex;align-items:center;padding:0 0.75rem;border:0;background:transparent;color:#fff;opacity:0;transition:opacity .25s ease}
.reel-tap.prev{left:0;width:34%;justify-content:flex-start}
.reel-tap.next{right:0;width:66%;justify-content:flex-end}
.reel:hover .reel-tap{opacity:1}
.reel-tap i{display:grid;place-items:center;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font:300 1.625rem/1 var(--body);font-style:normal}
.reel-zoom{position:absolute;right:0.75rem;top:1.75rem;z-index:3;display:grid;place-items:center;width:2.125rem;height:2.125rem;border:0;border-radius:0.625rem;background:rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff}
.reel-zoom svg{width:0.9375rem;height:0.9375rem}
.reel-cap{position:absolute;left:1rem;right:1rem;bottom:1rem;z-index:3;display:flex;align-items:flex-end;gap:0.625rem;color:#fff;pointer-events:none}
.reel-cap .ucode{flex:none;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.rc-t{display:grid;gap:0.25rem;min-width:0;flex:1}
.rc-t b{font:700 clamp(1.25rem,1.8vw,1.75rem)/1.02 var(--display);letter-spacing:-.025em;text-shadow:0 2px 16px rgba(0,0,0,.35)}
.rc-t span{font:500 0.6875rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;opacity:.85}
.reel-cap em{flex:none;font:500 0.6875rem/1 var(--mono);font-style:normal;opacity:.85}
.reel-soon{position:absolute;left:50%;top:3.625rem;z-index:3;transform:translateX(-50%);display:grid;justify-items:center;gap:0.1875rem;padding:0.625rem 1rem;border-radius:0.875rem;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);text-align:center;white-space:nowrap;box-shadow:0 14px 30px -16px rgba(0,0,0,.5)}
.reel-soon b{font:700 0.875rem/1.1 var(--display)}
.reel-soon span{font:500 0.6875rem/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.pipbtn{display:none}

/* "you are here": the room in the current render pulses on the plan and in the room list */
.rm.cam,.has-sel .rm.cam{fill-opacity:.6;animation:cam 1.7s ease-in-out infinite}
@keyframes cam{50%{fill-opacity:.3}}
.rlist div[data-cam]{cursor:pointer}
.rlist div.cam{background:#fff3cf}
.camb{display:inline-flex;align-items:center;gap:0.1875rem;margin-left:0.5rem;padding:2px 0.375rem;border-radius:62.4375rem;background:var(--wash);font:600 0.6875rem/1 var(--mono);color:var(--ink-2);vertical-align:2px}
.camb svg{width:0.625rem;height:0.625rem;fill:none;stroke:currentColor;stroke-width:1.2}
.rlist div.cam .camb{background:var(--tram);color:var(--tram-ink)}
.urow.cam .uhead{box-shadow:inset 3px 0 0 var(--tram)}
.pv-stack.on~.pcredit{display:none}

/* the duplexes stacked when the plan pane is tall: attic above floor 4 */
.pv-duplex.col .dxpair{grid-template-columns:1fr;grid-template-rows:1fr 1fr;gap:0.375rem;padding:0.75rem 1rem 1rem}
.pv-duplex:not(.col):not(.narrow) .dx[data-lv="4"]{order:-1}

/* find yours: every card leads with its render */
.fcard{height:var(--ch,9.375rem);overflow:hidden}
.fpick{position:absolute;inset:0;display:block;padding:0;overflow:hidden}
.fimg{position:absolute;inset:0;overflow:hidden}
.fimg img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.fcard:hover .fimg img{transform:scale(1.06)}
.fimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.1),rgba(0,0,0,0) 30%,rgba(0,0,0,.66))}
.fplan{position:absolute;right:0.5rem;bottom:0.5rem;display:flex;align-items:center;justify-content:center;gap:0.1875rem;width:42%;height:54%;padding:0.3125rem;border-radius:0.75rem;background:rgba(255,255,255,.95);box-shadow:0 10px 22px -12px rgba(0,0,0,.65)}
.fplan .mini{flex:0 1 auto;min-width:0;height:100%;width:auto;max-width:100%}
.fmeta{position:absolute;left:0.625rem;right:calc(42% + 1rem);bottom:0.625rem;display:grid;justify-items:start;gap:0.1875rem;color:#fff}
.fmeta>span{font:600 0.7812rem/1.15 var(--body);color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.45);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fmeta em{margin:0;font:700 1.1875rem/1 var(--body);letter-spacing:-.03em;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.fmeta em small{color:rgba(255,255,255,.8)}
.fob{position:absolute;left:0.5rem;top:0.5rem;padding:0.25rem 0.4375rem;border-radius:62.4375rem;background:rgba(255,255,255,.92);font:600 0.6875rem/1 var(--mono);color:var(--ink-2)}
.fopen{left:auto;right:2.25rem;top:0.5rem}
.tick{background:rgba(255,255,255,.9)}
.cmp-img{position:relative;aspect-ratio:4/3;margin-bottom:0.625rem;border-radius:0.875rem;overflow:hidden}
.cmp-img img{width:100%;height:100%;object-fit:cover}
.cmp-img .ucode{position:absolute;left:0.5rem;top:0.5rem;box-shadow:0 0 0 2px #fff}
.cmp-plan{height:clamp(5rem,15vh,10rem);margin-bottom:0.375rem}
.cmp-plan .mini{flex:0 1 auto;min-width:0}

/* interiors: every render by layout, the plan shows where you are */
.pv-tour{display:grid;grid-template-rows:auto minmax(0,1fr);gap:0.75rem;padding:1rem 1rem 0}
.tour-plans{display:grid;gap:0.375rem}
.tp-row{display:flex;justify-content:center;align-items:stretch;gap:0.75rem;min-width:0}
.tp{display:grid;justify-items:center;gap:0.5rem;min-width:0;margin:0;padding:0.625rem 0.75rem;border-radius:1rem;background:#fff;box-shadow:0 0 0 1px var(--line)}
.tp-m{display:flex;align-items:center;gap:0.375rem;height:clamp(6.25rem,21vh,12.5rem);min-width:0}
.tp-m .mini{flex:0 1 auto;min-width:0;height:100%;width:auto;max-width:100%}
.tp figcaption{display:flex;align-items:center;gap:0.5rem;font-size:0.8125rem;white-space:nowrap}
.tp figcaption b{font-weight:600}
.tp figcaption em{font:500 0.6875rem/1 var(--mono);font-style:normal;color:var(--ink-3)}
.tp-note{text-align:center;font:400 0.6875rem/1.5 var(--mono);color:var(--ink-3)}
.tour-grid{overflow:auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(5.75rem,1fr));align-content:start;gap:0.5rem;padding:2px 2px 1.125rem;touch-action:pan-y;scrollbar-width:thin}
.tg{position:relative;aspect-ratio:3/4;padding:0;border:0;border-radius:0.75rem;overflow:hidden;background:#e4e6e9;box-shadow:0 0 0 1px var(--line);transition:transform .2s ease,box-shadow .2s ease}
.tg img{width:100%;height:100%;object-fit:cover}
.tg span{position:absolute;left:0;right:0;bottom:0;padding:1.125rem 0.4375rem 0.375rem;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.62));color:#fff;font:600 0.6875rem/1.2 var(--body);text-align:left}
.tg:hover{transform:translateY(-2px)}
.tg.on{box-shadow:0 0 0 3px var(--tram)}

/* contents page */
.idx{position:fixed;inset:0;z-index:70;display:grid;grid-template-rows:auto minmax(0,1fr);background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);opacity:0;transition:opacity .3s ease}
.idx.on{opacity:1}
.idx[hidden]{display:none!important}
.idx-top{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.375rem clamp(1.125rem,4vw,3rem) 1rem}
.idx-top h2{margin-top:0.375rem;font-size:clamp(2.125rem,4vw,3.75rem);line-height:.95}
.idx-x{flex:none;width:2.875rem;height:2.875rem;border:0;border-radius:50%;background:var(--wash);font-size:1.375rem;line-height:1}
.idx-body{overflow:auto;display:grid;grid-template-columns:.75fr 1.35fr 2.6fr 1.5fr;align-items:start;gap:1.625rem;padding:0.375rem clamp(1.125rem,4vw,3rem) 2.5rem}
.idx-g h3{margin:0 0 0.75rem;padding-bottom:0.5rem;border-bottom:1px solid var(--ink);font:500 0.6875rem/1.4 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3)}
.idx-cards{display:grid;gap:1rem}
.idx-g[data-g="apartments"] .idx-cards{grid-template-columns:repeat(2,minmax(0,1fr))}
.idx-card{display:grid;gap:0.5rem;padding:0;border:0;background:transparent;text-align:left;opacity:0;transform:translateY(0.875rem);transition:transform .5s cubic-bezier(.2,.7,.2,1),opacity .5s ease;transition-delay:calc(var(--d,0) * 35ms)}
.idx.on .idx-card{opacity:1;transform:none}
.ith{position:relative;display:block;aspect-ratio:16/10;border-radius:0.875rem;overflow:hidden;background:var(--wash);box-shadow:0 0 0 1px var(--line);transition:transform .25s ease,box-shadow .25s ease}
.ith img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.idx-card:hover .ith{transform:translateY(-0.1875rem);box-shadow:0 0 0 2px var(--ink),0 18px 30px -18px rgba(0,0,0,.5)}
.idx-card:hover .ith img{transform:scale(1.05)}
.idx-card.cur .ith{box-shadow:0 0 0 3px var(--tram)}
.itx{display:flex;align-items:baseline;gap:0.5rem}
.itx b{font:600 0.6875rem/1 var(--mono);color:var(--ink-3)}
.itx span{font:700 0.9375rem/1.2 var(--display);letter-spacing:-.01em}
.idx-card.cur .itx b{color:var(--ink)}
/* rail previews */
.rprev{position:fixed;left:0;top:0;z-index:45;width:14.5rem;padding:0.375rem 0.375rem 0.5625rem;border-radius:0.875rem;background:#fff;box-shadow:0 24px 50px -20px rgba(0,0,0,.45),0 0 0 1px var(--line);opacity:0;transform:translate(-50%,calc(-100% - 0.5rem));pointer-events:none;transition:opacity .18s ease,transform .18s ease}
.rprev.on{opacity:1;transform:translate(-50%,calc(-100% - 0.875rem))}
.rprev img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:0.5625rem}
.rprev span{display:grid;gap:2px;padding:0.4375rem 0.25rem 0}
.rprev i{font:500 0.6875rem/1.2 var(--mono);font-style:normal;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.rprev b{font:600 0.8125rem/1.25 var(--body)}
/* cover shortcuts with pictures */
.jump button{padding:0.375rem 0.375rem 0.625rem}
.jth{display:block;aspect-ratio:16/10;margin-bottom:0.25rem;border-radius:0.625rem;overflow:hidden}
.jth img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.jump button:hover .jth img{transform:scale(1.06)}
.jump b,.jump small{padding:0 0.25rem}

@media (hover:none),(max-width:900px){.rprev{display:none}}
@media (max-width:900px){
  .reel-tap{opacity:1}
  .reel-tap i{width:2rem;height:2rem;font-size:1.375rem;background:rgba(0,0,0,.22)}
  .reel-cap{left:0.75rem;right:0.75rem;bottom:0.75rem}
  .rc-t b{font-size:1.1875rem}
  .reel-soon{top:2.875rem}
  .idx-body{grid-template-columns:1fr;gap:1.25rem}
  .idx-cards,.idx-g[data-g="apartments"] .idx-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:0.625rem}
  .itx span{font-size:0.8125rem}
  .fob,.fmeta>span{display:none}
  .fmeta em{font-size:0.9375rem}
  .fplan{width:46%;height:56%;padding:0.1875rem;border-radius:0.5625rem}
  .fmeta{right:calc(46% + 0.75rem)}
  .pv-tour{padding:0.625rem 0.625rem 0;gap:0.5rem}
  .tp-m{height:clamp(4.375rem,13vh,7.5rem)}
  .tour-grid{grid-template-columns:repeat(auto-fill,minmax(4.375rem,1fr));gap:0.375rem}
  .tg span{font-size:0.6875rem;padding:0.875rem 0.3125rem 0.25rem}
}
@media (max-width:600px){#fs-btn{display:none}.brand{letter-spacing:.1em}}
@media (prefers-reduced-motion:reduce){.reel-fig.on img,.rm.cam{animation:none}.idx-card{transition:none}}

/* ---------- v8: a bigger, fitted render carousel; one calm layout per screen size ---------- */
/* fluid type and spacing for every screen */
.panel{padding:clamp(0.875rem,3vh,2.5rem) clamp(1.125rem,2.4vw,2.75rem) 1.75rem}
.panel h1{font-size:clamp(4rem,min(9vw,17vh),9.375rem)}
.panel h2{font-size:clamp(1.75rem,min(3.3vw,6.4vh),3.375rem)}
@media (min-width:901px){
  .main.apt{grid-template-columns:minmax(20rem,29%) minmax(0,1fr)}
  .main.apt .panel .txt{font-size:0.9688rem}
}
@media (min-width:901px) and (max-height:780px){
  :root{--top:3.5rem;--rail:3.875rem}
  .panel .txt{font-size:0.9375rem;line-height:1.5}
  .panel h2{margin:0.5rem 0 0.75rem}
  .flhead{margin-top:0.875rem}
  .lvlist button{padding:0.5rem 0.25rem}
  .totals b{font-size:1.75rem}
  .sg .seg{height:2.25rem}
  .jump{margin-top:1rem}
}

/* render column: 3:4 at full stage height (JS sets --rw), every picture shown whole over a blurred copy of itself */
.reel{background:#121417}
.reel-fig{overflow:hidden;opacity:0;transition:transform .7s cubic-bezier(.22,.7,.2,1),opacity .7s ease;backface-visibility:hidden}
.reel-fig.on{z-index:1}
.rbg{position:absolute;inset:-10%;background:center/cover no-repeat;filter:blur(30px) brightness(.62) saturate(1.15);transform:scale(1.08)}
.reel-fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.reel-fig.on img,.reel-fig.land.on img{animation:rkb2 14s ease-out both}
@keyframes rkb2{from{transform:scale(1)}to{transform:scale(1.035)}}
.reel{cursor:grab}
.reel.held{cursor:grabbing}
.reel-tap{top:2.75rem;bottom:6rem}

/* picture-in-picture whenever the plan would be too narrow beside the render (phones, tablets, small laptops) */
.stage.plan-mode.pip .plans{left:0;border-radius:1.375rem}
.stage.plan-mode.pip .reel{right:0;width:auto;border-radius:1.375rem}
.stage.plan-mode.pip .plans,.stage.plan-mode.pip .reel{transition:opacity .6s ease .1s,visibility 0s,transform .6s cubic-bezier(.2,.7,.2,1),border-radius .6s ease,box-shadow .6s ease}
.stage.plan-mode.pip:not(.swap) .plans,.stage.plan-mode.pip.swap .reel{z-index:4;transform:translate(-0.75rem,-0.75rem) scale(.34);transform-origin:100% 100%;border-radius:3.875rem;box-shadow:0 0 0 8px #fff,0 30px 44px -18px rgba(0,0,0,.6);pointer-events:none}
.stage.plan-mode.pip .pipbtn{position:absolute;right:0.75rem;bottom:0.75rem;z-index:6;display:block;width:34%;height:34%;padding:0;border:0;background:transparent}
.pipbtn svg{position:absolute;right:0.5rem;top:0.5rem;width:2rem;height:2rem;padding:0.5rem;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 6px 14px -6px rgba(0,0,0,.6)}
.pipbtn span{position:absolute;left:0.5rem;bottom:0.5rem;padding:0.3125rem 0.5625rem;border-radius:62.4375rem;background:rgba(255,255,255,.95);font:600 0.6875rem/1 var(--body);color:var(--ink);box-shadow:0 4px 12px -6px rgba(0,0,0,.5)}
.stage.plan-mode.pip:not(.swap) .reel-cap{right:calc(34% + 1.5rem)}
.stage.plan-mode.pip:not(.swap) .reel-cap em{display:none}

/* floor by floor: floor bar with a sliding marker, giant floor number, camera zoom into the apartment */
.liftp{display:none}
.shaft{right:0;top:3.625rem}
.fbar{position:absolute;left:50%;top:0.75rem;z-index:3;transform:translateX(-50%);display:flex;align-items:stretch;gap:2px;padding:0.25rem;border-radius:62.4375rem;background:rgba(255,255,255,.94);box-shadow:0 12px 30px -18px rgba(0,0,0,.45),0 0 0 1px var(--line);white-space:nowrap}
.fbar button{position:relative;z-index:1;display:grid;justify-items:center;align-content:center;gap:2px;min-width:3.125rem;padding:0.3125rem 0.625rem;border:0;border-radius:62.4375rem;background:transparent;color:var(--ink-2);transition:color .3s ease}
.fbar b{font:700 0.9375rem/1 var(--display);letter-spacing:-.01em}
.fbar small{font:500 0.6875rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);transition:color .3s ease}
.fbar button:hover{color:var(--ink)}
.fbar button.on,.fbar button.on small{color:var(--tram-ink)}
.fbar .up4{margin-left:0.3125rem}
.fbar .up4::before{content:"";position:absolute;left:-0.25rem;top:0.5625rem;bottom:0.5625rem;width:1px;background:var(--line)}
.fbar-ind{position:absolute;left:0;top:0.25rem;bottom:0.25rem;z-index:0;width:3.125rem;border-radius:62.4375rem;background:var(--tram);box-shadow:0 8px 16px -10px rgba(170,110,0,.9);transition:transform .5s cubic-bezier(.3,.75,.2,1),width .5s cubic-bezier(.3,.75,.2,1)}
.lvl{overflow:hidden;padding:0.375rem 0.875rem 1.875rem}
.lvnum{position:absolute;z-index:2;left:3%;top:1%;mix-blend-mode:multiply;font:800 clamp(7.5rem,34vh,22.5rem)/.8 var(--display);letter-spacing:-.07em;color:rgba(20,32,48,.06);pointer-events:none;user-select:none;transition:opacity .5s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.shaft.moving .lvnum{transform:translateY(8%)}
.fbar-ind.arrive{animation:arrive .7s ease}
@keyframes arrive{35%{box-shadow:0 0 0 7px rgba(255,183,3,.32),0 8px 16px -10px rgba(170,110,0,.9)}}
.lvl.zoomed .lvnum{opacity:0}
.pbox{transform-origin:0 0;transition:transform .8s cubic-bezier(.22,.7,.18,1)}
.pbox>.psvg{filter:none}
.pv-floors .ulab{transform:translate(-50%,-50%) scale(calc(1 / var(--zs,1)))}
.pv-floors .ulab:hover,.pv-floors .ulab.hov,.pv-floors .ulab.sel{transform:translate(-50%,-50%) scale(calc(1.07 / var(--zs,1)))}
.lvl.zoomed .ulab{opacity:0;pointer-events:none}
.street{transition:opacity .4s ease}
.lvl.zoomed .street{opacity:0}
.rlab{position:absolute;display:grid;justify-items:center;gap:2px;padding:0.3125rem 0.5rem;border-radius:0.5625rem;background:rgba(255,255,255,.93);box-shadow:0 6px 14px -8px rgba(0,0,0,.45);transform:translate(-50%,-50%) scale(calc(1 / var(--zs,1)));white-space:nowrap;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s ease,background .25s ease}
.rlab b{font:600 0.7188rem/1.1 var(--body);color:var(--ink)}
.rlab i{font:500 0.6875rem/1.1 var(--mono);font-style:normal;color:var(--ink-3)}
.rlab.on{opacity:1;pointer-events:auto;cursor:pointer;transition:opacity .45s ease .45s,background .25s ease}
.rlab.cam{background:var(--tram)}
.rlab.cam i{color:var(--tram-ink)}
.zback{position:absolute;left:0.875rem;bottom:0.875rem;z-index:4;display:inline-flex;align-items:center;gap:0.5rem;padding:0.625rem 0.9375rem;border:0;border-radius:62.4375rem;background:var(--ink);color:#fff;font:600 0.8125rem/1 var(--body);box-shadow:0 12px 26px -12px rgba(0,0,0,.65);animation:rise .4s cubic-bezier(.2,.7,.2,1)}
.zback[hidden]{display:none}
/* apartment rows lead with their render */
.uhead{gap:0.75rem;padding:0.5625rem 0.375rem}
.uth{position:relative;flex:none;width:2.75rem;height:3.5rem;border-radius:0.625rem;overflow:hidden;background:var(--wash);box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.uth img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.uhead:hover .uth img,.urow.open .uth img{transform:scale(1.08)}
.uth .ucode{position:absolute;left:0.1875rem;bottom:0.1875rem;min-width:0;height:1.0625rem;padding:0 0.3125rem;font-size:0.6875rem;box-shadow:0 0 0 1.5px #fff}
.ubody{padding:2px 0.25rem 0.875rem 3.875rem}
.urow.open .uhead{box-shadow:inset 3px 0 0 var(--c)}

@media (max-width:900px){
  .main.gal-mode.apt{grid-template-rows:62% minmax(0,1fr)}
  .panel h2{font-size:clamp(1.5rem,7.4vw,2.25rem)}
  .fbar{top:0.5rem;padding:0.1875rem}
  .fbar button{min-width:2.5rem;padding:0.25rem 0.4375rem}
  .fbar b{font-size:0.8125rem}
  .fbar small{display:none}
  .fbar-ind{top:0.1875rem;bottom:0.1875rem}
  .shaft{top:2.875rem;right:0}
  .lvl{padding:0.25rem 0.5rem 1.375rem}
  .zback{left:0.625rem;bottom:0.625rem;padding:0.5rem 0.75rem;font-size:0.75rem}
  .uth{width:2.375rem;height:3rem}
  .ubody{padding-left:0.25rem}
  .rlab{padding:0.1875rem 0.375rem}
  .rlab b{font-size:0.6875rem}
  .rlab i{font-size:0.6875rem}
}
/* compact finder cards when the grid pane is narrow: code, area and the plan, nothing else */
.fgrid.compact .fob,.fgrid.compact .fmeta>span{display:none}
.fgrid.compact .fmeta{left:0.5rem;right:auto;top:0.5rem;bottom:0.5rem;display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start}
.fgrid.compact .fmeta em{font-size:1rem}
.fgrid.compact .fplan{width:50%;height:62%;right:0.375rem;bottom:0.375rem;padding:0.25rem;border-radius:0.625rem}
.fgrid.compact .tick{width:1.25rem;height:1.25rem;right:0.375rem;top:0.375rem}
/* the cover keeps its shortcuts in view on short screens */
@media (min-width:901px) and (max-height:820px){
  .panel h1{font-size:clamp(3.5rem,min(8vw,13.5vh),9.375rem);margin:0.625rem 0 0.875rem}
  .panel .lede{font-size:1.0625rem}
  .chips3{margin-top:0.875rem}
  .cta{margin-top:1.125rem}
  .jump{margin-top:0.875rem}
  .jth{aspect-ratio:16/8}
  .keys{display:none}
}
@media (prefers-reduced-motion:reduce){.reel-fig,.pbox,.fbar-ind{transition:none}.reel-fig.on img{animation:none}}

/* ---------- v9: a slide per layout (studios, one-bedroom, two-bedrooms) ---------- */
.pv-type .tshaft{position:absolute;left:0;right:0;top:3.625rem;bottom:0;overflow:hidden}
.pv-type .lvl{height:100%}
.tshaft.in .pbox{animation:tin .6s cubic-bezier(.2,.7,.2,1)}
@keyframes tin{from{opacity:0}to{opacity:1}}
.thead{position:absolute;left:50%;top:0.75rem;z-index:3;transform:translateX(-50%);display:flex;align-items:center;gap:0.5625rem;padding:0.3125rem 0.875rem 0.3125rem 0.3125rem;border-radius:62.4375rem;background:rgba(255,255,255,.94);box-shadow:0 12px 30px -18px rgba(0,0,0,.45),0 0 0 1px var(--line);white-space:nowrap}
.thead b{font:700 0.875rem/1 var(--display);letter-spacing:-.01em}
.thead span:not(.ucode){font:500 0.6875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.tsel{display:grid;gap:0.625rem;margin-top:1.125rem}
.tsel.cards{grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr))}
.tgrp{display:grid;grid-template-columns:1fr;gap:0.625rem;padding:0.75rem 0.75rem 0.75rem 0.875rem;border:1px solid var(--line);border-radius:1rem;background:#fff}
.tgl b{display:block;font:700 0.9375rem/1.2 var(--display);letter-spacing:-.01em}
.tgl span{display:block;margin-top:2px;font-size:0.7812rem;line-height:1.3;color:var(--ink-3)}
.tchips{display:flex;gap:0.375rem}
.tch{flex:1;display:grid;justify-items:center;gap:0.1875rem;min-width:0;padding:0.5rem 0.5rem 0.4375rem;border:1px solid var(--line);border-radius:0.75rem;background:#fff;color:var(--ink);transition:background .2s,border-color .2s,color .2s,transform .2s}
.tch:hover{border-color:var(--c);transform:translateY(-1px)}
.tch b{font:600 0.75rem/1 var(--mono)}
.tch small{font:500 0.6875rem/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.tch[aria-pressed="true"]{background:var(--c);border-color:var(--c);color:#fff}
.tch[aria-pressed="true"] small{color:rgba(255,255,255,.8)}
.tfacts{display:flex;flex-wrap:wrap;align-items:center;gap:0.375rem 0.625rem;margin-top:1rem;padding-bottom:0.625rem;border-bottom:1px solid var(--ink);font-size:0.8125rem;color:var(--ink-2)}
.tfacts b{font:700 1.125rem/1 var(--display);letter-spacing:-.02em;color:var(--ink)}
.tfacts em{margin-left:auto;font:700 1.5rem/1 var(--body);font-style:normal;letter-spacing:-.03em;color:var(--ink)}
.tfacts em small{font:500 0.6875rem/1 var(--mono);letter-spacing:0;color:var(--ink-3)}
.trooms{margin-top:0.5rem}
.tsel.cards+.trooms{margin-top:1rem}
@media (max-width:900px){
  .thead{top:0.5rem}
  .pv-type .tshaft{top:3rem}
}
@media (prefers-reduced-motion:reduce){.tshaft.in .pbox{animation:none}}

/* ---------- v10: readable type that scales with the screen ---------- */
/* one root size drives everything (make_css.py turns the px above into rem): 16px at 1440×900, ~19px at 1920×1080, 24px on big screens */
:root{--display:"Fraunces",Georgia,"Times New Roman",serif;--body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--mono:var(--body)}
html{font-size:clamp(14.5px,min(1.111vw,1.778vh),24px)}
@media (max-width:900px){html{font-size:clamp(14.5px,4.1vw,17px)}}
body{font-size:1rem;line-height:1.6;font-variant-numeric:tabular-nums}
h1,h2,h3,h4{font-family:var(--display);font-weight:560;letter-spacing:-.02em;font-optical-sizing:auto}

/* headlines: a serif with one italic accent phrase */
.panel h1{font-weight:520;letter-spacing:-.045em;line-height:.86}
.panel h1 b{font-style:italic;font-weight:420;color:var(--cobalt)}
.panel h2{font-weight:500;letter-spacing:-.03em;line-height:1.02}
.panel h2 em{font-style:italic;font-weight:380;color:var(--cobalt);letter-spacing:-.02em}
.panel .lede{font-family:var(--display);font-weight:380;font-size:clamp(1.2rem,1.5vw,1.6rem);line-height:1.35;letter-spacing:-.012em;max-width:30ch}
.panel .lede em{font-style:italic;font-weight:500;color:var(--cobalt)}
.panel .txt{font-size:1.04rem;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.note{font:400 .8rem/1.6 var(--body);letter-spacing:0;color:var(--ink-3)}

/* chapter numerals: a big italic number, a hairline, then the chapter name */
.kicker{font:600 .74rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.panel .kicker b{font:italic 420 1.7rem/1 var(--display);letter-spacing:-.02em;text-transform:none;color:var(--cobalt);vertical-align:-.16em}
.panel .kicker b::after{content:"";display:inline-block;width:1.7rem;height:1px;margin:0 .75rem 0 .7rem;vertical-align:.4em;background:var(--ink-3);opacity:.55}
.chap{font-size:.92rem}
.chap b{font:italic 500 1.05rem/1 var(--display);letter-spacing:0;color:var(--cobalt)}

/* figures in the serif, units small */
.ua em,.dxa em,.tfacts em,.totals b,.stat b,.dests .t,.pl .m em,.fmeta em,.fcount b,.flhead b{font-family:var(--display);font-weight:500;letter-spacing:-.025em}
.ua{font:500 .72rem/1 var(--body)}
.ua em{font-size:1.55rem}
.totals small,.stat b small,.dests .t small{font:500 .72rem/1 var(--body);letter-spacing:0}
.tfacts em small,.fmeta em small{font:500 .7rem/1 var(--body)}

/* labels: Inter caps instead of the narrow mono */
.sgl{font:650 .66rem/1 var(--body);letter-spacing:.13em}
.seg .nm{font:500 .76rem/1.1 var(--body)}
.brand{font:650 .8rem/1 var(--body);letter-spacing:.16em}
.lvn,.flab,.rooms h4,.dxrooms h4,.idx-g h3,.cmp-rl,.explode{font-weight:650;letter-spacing:.12em}
.ucode{font-weight:650;letter-spacing:.02em}
.rlist div{font-size:.92rem}
.rlist dd{font:500 .84rem/1.6 var(--body);color:var(--ink-2)}

/* the reel caption reads like a magazine caption */
.rc-t b{font-family:var(--display);font-style:italic;font-weight:440;letter-spacing:-.015em;font-size:clamp(1.4rem,2vw,2.3rem);line-height:1.02}
.rc-t span{font:650 .72rem/1.3 var(--body);letter-spacing:.14em}
.reel-cap em{font:500 .8rem/1 var(--body)}

/* plans and maps */
.fbar b,.thead b,.dx figcaption b,.tgl b,.dxcard b,.jump b,.itx span{font-family:var(--display)}
.fbar b{font-weight:560}
.rlab b{font:600 .76rem/1.15 var(--body)}
.rlab i{font:500 .68rem/1.15 var(--body)}
.geol span{font:650 .72rem/1 var(--body);letter-spacing:.2em}
.geol.sea span{font:italic 450 1.1rem/1 var(--display);letter-spacing:.05em}
.pin .lb{font:600 .8rem/1 var(--body)}
.door span{font:700 .72rem/1 var(--body)}

/* picture-in-picture: drag the small window anywhere between the header and the rail; it sticks to the nearer side */
.stage.plan-mode.pip{z-index:2}
.stage.plan-mode.pip:not(.swap) .plans,.stage.plan-mode.pip.swap .reel{transform:translate(calc(-0.75rem + var(--pipx,0px)),calc(-0.75rem + var(--pipy,0px))) scale(.34)}
.stage.plan-mode.pip .pipbtn{transform:translate(var(--pipx,0px),var(--pipy,0px));transition:transform .6s cubic-bezier(.2,.7,.2,1);touch-action:none;cursor:grab}
.stage.plan-mode.pip.pipdrag .plans,.stage.plan-mode.pip.pipdrag .reel,.stage.plan-mode.pip.pipdrag .pipbtn{transition:none}
.stage.plan-mode.pip.pipdrag .pipbtn{cursor:grabbing}
.stage.plan-mode.pip.pipdrag:not(.swap) .plans,.stage.plan-mode.pip.pipdrag.swap .reel{box-shadow:0 0 0 8px #fff,0 60px 80px -20px rgba(0,0,0,.55)}
.stage.plan-mode.pip .pipbtn span{display:flex;align-items:center;gap:0.375rem}
.stage.plan-mode.pip .pipbtn span::before{content:"";flex:none;width:0.4375rem;height:0.6875rem;opacity:.5;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 7 11'%3E%3Cg fill='%230c1116'%3E%3Ccircle cx='1.5' cy='1.5' r='1.2'/%3E%3Ccircle cx='5.5' cy='1.5' r='1.2'/%3E%3Ccircle cx='1.5' cy='5.5' r='1.2'/%3E%3Ccircle cx='5.5' cy='5.5' r='1.2'/%3E%3Ccircle cx='1.5' cy='9.5' r='1.2'/%3E%3Ccircle cx='5.5' cy='9.5' r='1.2'/%3E%3C/g%3E%3C/svg%3E") center/contain no-repeat}
.stage.plan-mode.pip.pip-left:not(.swap) .reel-cap{left:calc(34% + 1.5rem);right:0.75rem}
.stage.plan-mode.pip.pip-clear:not(.swap) .reel-cap{left:0.75rem;right:0.75rem}

/* v10.4: smooth on phones and tablets */
/* the story bars fill with a transform, not a width: no page layout on every frame */
.reel-bars i b{width:100%;transform:scaleX(0);transform-origin:0 50%}
.reel-bars i.done b{transform:none}
.reel-bars i.on b{animation:rbar2 var(--rd,5200ms) linear forwards}
.reel.held .reel-bars i.on b{animation:none;transform:none}
@keyframes rbar2{from{transform:scaleX(0)}to{transform:none}}
/* nothing animates where nobody can see it (hidden plans, renders and map kept pulsing and repainted the stage on every later slide) */
.stage:not(.plan-mode) .plans *,.stage:not(.plan-mode) .reel *,.pv:not(.on) *,.stage.img-mode .geo *,.stage.img-mode .geo *::after{animation:none!important}
/* the small window's offsets don't inherit, so a drag restyles three elements instead of the whole stage */
@property --pipx{syntax:"<length>";inherits:false;initial-value:0px}
@property --pipy{syntax:"<length>";inherits:false;initial-value:0px}
/* the page never bounces or pulls to refresh; a panel keeps its scroll to itself */
html{overscroll-behavior:none}
.panel{overscroll-behavior:contain}

/* touch screens and narrow windows: nothing repaints or re-blurs on every frame while you just look */
@media (hover:none),(pointer:coarse),(max-width:900px){
  .main{transition:none}
  .stage.img-mode .geo{filter:none}
  .stage:not(.img-mode) .geo{transition:none}
  .rm.cam,.has-sel .rm.cam{animation-iteration-count:2}
  .reel-tap i,.reel-zoom,.reel-soon,.idx{-webkit-backdrop-filter:none;backdrop-filter:none}
  .reel-tap i{background:rgba(0,0,0,.34)}
  .reel-zoom{background:rgba(0,0,0,.4)}
  .idx{background:#fff}
  .ov .route,.ov .ferry,.dxl{animation:none}
  .stair.sel{animation:none;box-shadow:0 0 0 5px rgba(47,125,79,.3),0 6px 14px -6px rgba(0,0,0,.6)}
  .lvnum{mix-blend-mode:normal}
  button,a,[role=button]{-webkit-tap-highlight-color:transparent}
}