[hidden] { display: none !important; }
:root {
  --cream: #FAF7F0; --paper: #FFFCFA; --burgundy: #4A081E; --deep: #2E000F; --ember: #FE472E;
  --charcoal: #2F2D27; --slate: #6D6B64; --line: rgba(47,45,39,.12); --stone-p: #F0E8DC;
  --glass: rgba(255,252,250,.86); --shadow: 0 10px 40px rgba(46,0,15,.14), 0 2px 8px rgba(46,0,15,.06);
  --serif: 'Newsreader', Georgia, serif; --sans: 'Instrument Sans', Arial, sans-serif;
  --safe-b: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; overflow: hidden; background: var(--cream); color: var(--charcoal); font-family: var(--sans); -webkit-font-smoothing: antialiased; touch-action: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
#stage { position: fixed; inset: 0; }
#stage canvas { display: block; outline: none; }
#stage::after { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0) 55%, rgba(46,0,15,.10) 100%); }

/* top bar */
.top { position: fixed; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; pointer-events: none; z-index: 20; }
.top > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 14px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 10px 18px 10px 16px; border-radius: 3px; box-shadow: var(--shadow); }
.logo { height: 22px; display: block; }
.sep { width: 1px; height: 28px; background: var(--line); }
.asset b { display: block; font-family: var(--serif); font-weight: 400; font-size: 24px; letter-spacing: -0.02em; color: var(--burgundy); line-height: 1; }
.asset span { font-size: 12.5px; color: var(--slate); letter-spacing: .01em; }
.right { display: flex; gap: 10px; align-items: center; }
.time { display: flex; align-items: center; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 3px; padding: 4px; box-shadow: var(--shadow); }
.time .clock { font-size: 12.5px; color: var(--slate); padding: 0 10px 0 8px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.time button { font-size: 13px; font-weight: 600; padding: 8px 12px; border-radius: 2px; color: var(--slate); }
.time button.on { background: var(--burgundy); color: var(--cream); }
.icon { width: 40px; height: 40px; background: var(--glass); backdrop-filter: blur(14px); border-radius: 3px; box-shadow: var(--shadow); font-size: 20px; color: var(--burgundy); }
.for { background: var(--burgundy); color: var(--cream); font-size: 13px; padding: 10px 14px; border-radius: 3px; box-shadow: var(--shadow); }
.for b { font-weight: 600; }

/* modes */
.modes { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(22px + var(--safe-b)); display: flex; gap: 4px; padding: 5px; background: var(--glass); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-radius: 3px; box-shadow: var(--shadow); z-index: 20; }
.modes button { padding: 11px 18px; font-size: 14px; font-weight: 600; border-radius: 2px; color: var(--charcoal); white-space: nowrap; }
.modes button.on { background: var(--stone-p); color: var(--burgundy); }
.modes .tour { background: var(--burgundy); color: var(--cream); margin-left: 6px; display: flex; align-items: center; gap: 9px; }
.play { width: 0; height: 0; border-left: 8px solid currentColor; border-top: 5px solid transparent; border-bottom: 5px solid transparent; display: inline-block; }

.filters { position: fixed; left: 22px; bottom: calc(26px + var(--safe-b)); display: flex; gap: 4px; z-index: 19; }
.filters button { font-size: 12.5px; font-weight: 600; padding: 7px 11px; border-radius: 20px; background: var(--glass); backdrop-filter: blur(10px); color: var(--slate); box-shadow: 0 2px 10px rgba(46,0,15,.08); }
.filters button.on { background: var(--charcoal); color: var(--cream); }

/* pins */
#pins { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
.pin { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; display: flex; flex-direction: column; align-items: center; transition: opacity .25s; will-change: transform; }
.pin .dot { width: 26px; height: 26px; border-radius: 50%; background: var(--burgundy); color: var(--cream); font-size: 12px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255,252,250,.9), 0 4px 12px rgba(46,0,15,.3); }
.pin .stem { width: 2px; height: 14px; background: rgba(74,8,30,.65); }
.pin .lab { position: absolute; bottom: 44px; white-space: nowrap; background: var(--paper); color: var(--charcoal); font-size: 12.5px; font-weight: 600; padding: 6px 10px; border-radius: 2px; box-shadow: var(--shadow); opacity: 0; transform: translateY(4px); transition: all .18s; pointer-events: none; }
.pin:hover .lab, .pin.show .lab { opacity: 1; transform: none; }
.pin:hover .dot { background: var(--ember); }
.pin.small .dot { width: 20px; height: 20px; font-size: 10px; }
.pin.hide { opacity: 0; pointer-events: none; }
.tag { position: absolute; left: 0; top: 0; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; text-align: center; transition: opacity .25s; will-change: transform; }
.tag .t-in { background: var(--paper); padding: 8px 14px 9px; border-radius: 2px; box-shadow: var(--shadow); border-top: 3px solid var(--burgundy); }
.tag b { display: block; font-family: var(--serif); font-weight: 400; font-size: 19px; letter-spacing: -0.015em; color: var(--burgundy); line-height: 1.1; white-space: nowrap; }
.tag span { font-size: 11.5px; color: var(--slate); white-space: nowrap; }
.tag .t-stem { width: 1.5px; height: 26px; background: rgba(74,8,30,.5); margin: 0 auto; }
.tag:hover .t-in { border-top-color: var(--ember); }
.tag.hide { opacity: 0; pointer-events: none; }
.tag.accent .t-in { border-top-color: var(--ember); }

/* panel */
.panel { position: fixed; right: 18px; top: 86px; bottom: 96px; width: 430px; background: var(--paper); border-radius: 3px; box-shadow: var(--shadow); z-index: 25; overflow: hidden; display: flex; flex-direction: column; animation: slideIn .35s cubic-bezier(.2,.8,.2,1); }
@keyframes slideIn { from { transform: translateX(30px); opacity: 0; } }
.panel .close, .modal .close { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,252,250,.92); font-size: 22px; line-height: 1; z-index: 3; color: var(--burgundy); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.grip { display: none; }
.panel-in { overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; background: var(--stone-p); }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { flex: 0 0 100%; scroll-snap-align: start; position: relative; aspect-ratio: 16/10; }
.gallery img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gallery figcaption { position: absolute; left: 12px; bottom: 10px; color: #fff; font-size: 12px; font-weight: 600; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.dots { display: flex; gap: 5px; justify-content: center; padding: 10px 0 0; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.dots i.on { background: var(--burgundy); }
.p-body { padding: 18px 24px 26px; }
.eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.p-body h2 { font-family: var(--serif); font-weight: 400; font-size: 36px; letter-spacing: -0.02em; line-height: 1.05; color: var(--burgundy); margin-top: 6px; }
.p-body .lede { font-size: 16px; line-height: 1.5; margin-top: 12px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 20px; border-top: 1px solid var(--line); }
.facts div { padding: 13px 0 12px; border-bottom: 1px solid var(--line); }
.facts div:nth-child(odd) { padding-right: 12px; }
.facts b { display: block; font-family: var(--serif); font-weight: 400; font-size: 25px; color: var(--burgundy); letter-spacing: -0.01em; line-height: 1.1; }
.facts span { font-size: 13px; color: var(--slate); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.chips span { font-size: 12.5px; padding: 6px 10px; background: var(--stone-p); border-radius: 20px; }
.p-actions { display: flex; gap: 8px; margin-top: 20px; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 16px; font-size: 14px; font-weight: 600; border-radius: 2px; background: var(--burgundy); color: var(--cream); }
.btn.ghost { background: var(--stone-p); color: var(--burgundy); }
.levels { margin-top: 18px; border-top: 1px solid var(--line); }
.levels button { display: grid; grid-template-columns: 96px 1fr; gap: 12px; width: 100%; text-align: left; padding: 13px 4px; border-bottom: 1px solid var(--line); align-items: baseline; }
.levels button:hover, .levels button.on { background: var(--stone-p); }
.levels b { font-size: 13px; font-weight: 700; color: var(--burgundy); }
.levels span { font-size: 14px; line-height: 1.4; }
.levels span i { display: block; font-style: normal; color: var(--slate); font-size: 13px; margin-top: 3px; }
.levels button.mine b::after { content: 'Your floor'; display: block; margin-top: 4px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ember); }
.dist { margin-top: 16px; border-top: 1px solid var(--line); }
.dist div { display: grid; grid-template-columns: 82px 1fr; padding: 11px 0; border-bottom: 1px solid var(--line); align-items: baseline; }
.dist b { font-family: var(--serif); font-weight: 400; font-size: 22px; color: var(--burgundy); }
.dist span { font-size: 14px; }
.fine { font-size: 11.5px; color: var(--slate); margin-top: 18px; line-height: 1.45; }

/* welcome */
.welcome { position: fixed; left: 28px; top: 50%; transform: translateY(-45%); width: 400px; background: var(--paper); padding: 30px 30px 24px; border-radius: 3px; box-shadow: var(--shadow); z-index: 30; border-top: 4px solid var(--burgundy); animation: rise .6s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { transform: translateY(-38%); opacity: 0; } }
.w-eyebrow { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--slate); }
.welcome h1 { font-family: var(--serif); font-weight: 400; font-size: 50px; letter-spacing: -0.025em; line-height: 1; color: var(--burgundy); margin-top: 8px; }
.welcome h1 em { color: var(--ember); }
.w-sub { font-size: 16px; color: var(--charcoal); margin-top: 10px; line-height: 1.45; }
.w-stats { display: grid; grid-template-columns: 1fr 1fr; margin-top: 18px; border-top: 1px solid var(--line); }
.w-stats div { padding: 11px 0; border-bottom: 1px solid var(--line); }
.w-stats b { font-family: var(--serif); font-weight: 400; font-size: 27px; color: var(--burgundy); letter-spacing: -0.01em; }
.w-stats b small { font-size: 15px; margin-left: 3px; }
.w-stats span { display: block; font-size: 12.5px; color: var(--slate); }
.w-actions { display: flex; gap: 8px; margin-top: 20px; flex-wrap: wrap; }
.primary { display: inline-flex; align-items: center; gap: 10px; background: var(--burgundy); color: var(--cream); padding: 14px 18px; font-size: 15px; font-weight: 600; border-radius: 2px; }
.ghost { padding: 14px 16px; font-size: 15px; font-weight: 600; color: var(--burgundy); background: var(--stone-p); border-radius: 2px; }
.w-hint { font-size: 12px; color: var(--slate); margin-top: 14px; }

/* caption */
.caption { position: fixed; left: 50%; bottom: calc(92px + var(--safe-b)); transform: translateX(-50%); width: min(720px, calc(100% - 32px)); background: var(--paper); border-radius: 3px; box-shadow: var(--shadow); padding: 16px 22px 0; z-index: 30; text-align: center; overflow: hidden; }
.cap-step { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ember); }
.caption p { font-family: var(--serif); font-size: 25px; line-height: 1.25; letter-spacing: -0.015em; color: var(--burgundy); margin-top: 6px; }
.cap-ctl { display: flex; justify-content: center; gap: 6px; margin: 10px 0 12px; }
.cap-ctl button { min-width: 36px; height: 32px; border-radius: 2px; background: var(--stone-p); color: var(--burgundy); font-size: 15px; font-weight: 700; padding: 0 10px; }
.cap-ctl .end { font-size: 12.5px; }
.cap-bar { height: 3px; background: var(--line); margin: 0 -22px; }
.cap-bar i { display: block; height: 100%; width: 0; background: var(--burgundy); }

.hover { position: fixed; z-index: 15; pointer-events: none; background: var(--burgundy); color: var(--cream); font-size: 13px; font-weight: 600; padding: 7px 11px; border-radius: 2px; transform: translate(14px, 14px); white-space: nowrap; box-shadow: var(--shadow); }
.compass { position: fixed; right: 22px; bottom: calc(26px + var(--safe-b)); width: 44px; height: 44px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(10px); box-shadow: var(--shadow); z-index: 19; display: grid; place-items: center; }
.compass i { position: absolute; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 15px solid var(--burgundy); top: 6px; left: 17px; transform-origin: 5px 16px; }
.compass span { font-size: 10px; font-weight: 700; color: var(--charcoal); margin-top: 16px; }
.note { position: fixed; right: 78px; bottom: calc(28px + var(--safe-b)); font-size: 11px; line-height: 1.45; color: var(--slate); z-index: 18; text-align: right; max-width: 420px; background: rgba(255,252,250,.82); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 14px; }

.menu { position: fixed; right: 22px; top: 70px; background: var(--paper); box-shadow: var(--shadow); border-radius: 3px; z-index: 40; padding: 6px; display: flex; flex-direction: column; min-width: 240px; }
.menu button { text-align: left; padding: 11px 14px; font-size: 14px; font-weight: 500; border-radius: 2px; }
.menu button:hover { background: var(--stone-p); }
.modal { position: fixed; inset: 0; background: rgba(46,0,15,.35); z-index: 50; display: grid; place-items: center; padding: 16px; }
.m-card { position: relative; width: min(460px, 100%); background: var(--paper); border-radius: 3px; padding: 28px; box-shadow: var(--shadow); border-top: 4px solid var(--burgundy); }
.m-card h2 { font-family: var(--serif); font-weight: 400; font-size: 32px; color: var(--burgundy); letter-spacing: -0.02em; margin-top: 6px; }
.m-card p { font-size: 14.5px; line-height: 1.5; margin-top: 8px; color: var(--charcoal); }
.m-card label { display: block; font-size: 12.5px; font-weight: 600; color: var(--slate); margin-top: 14px; }
.m-card input, .m-card select { display: block; width: 100%; margin-top: 6px; padding: 11px 12px; font: inherit; font-size: 15px; border: 1px solid var(--line); border-radius: 2px; background: #fff; color: var(--charcoal); }
.lk-out { display: flex; gap: 6px; margin-top: 18px; }
.lk-out input { margin: 0; font-size: 12.5px; color: var(--slate); }
.lk-out button { background: var(--burgundy); color: var(--cream); padding: 0 16px; font-weight: 600; border-radius: 2px; }

.loader { position: fixed; inset: 0; background: var(--cream); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; transition: opacity .8s; }
.loader img { height: 30px; }
.l-name { font-family: var(--serif); font-size: 46px; color: var(--burgundy); letter-spacing: -0.02em; }
.l-bar { width: 220px; height: 2px; background: var(--line); }
.l-bar i { display: block; height: 100%; width: 0; background: var(--burgundy); transition: width .3s; }
.l-note { font-size: 12.5px; color: var(--slate); }
.loader.done { opacity: 0; pointer-events: none; }

.plan-overlay { position: fixed; left: 22px; top: 92px; width: 380px; background: var(--paper); padding: 10px; box-shadow: var(--shadow); border-radius: 3px; z-index: 24; }
.plan-overlay img { width: 100%; display: block; }
.plan-overlay .fine { margin-top: 6px; }

@media (max-width: 760px) {
  .top { padding: 10px 10px; align-items: flex-start; }
  .brand { padding: 8px 12px; gap: 10px; }
  .logo { height: 16px; }
  .sep { height: 22px; }
  .asset b { font-size: 19px; }
  .asset span { font-size: 11px; }
  .time { flex-direction: column; padding: 3px; }
  .time .clock { display: none; }
  .time button { display: none; padding: 9px 10px; font-size: 12px; }
  .time button.on { display: block; }
  .icon { width: 38px; height: 38px; }
  .right { flex-direction: row-reverse; align-items: flex-start; }
  .for { display: none; }
  .modes { left: 8px; right: 8px; transform: none; overflow-x: auto; scrollbar-width: none; bottom: calc(10px + var(--safe-b)); }
  .modes::-webkit-scrollbar { display: none; }
  .modes button { padding: 11px 13px; font-size: 13.5px; }
  .filters { bottom: calc(70px + var(--safe-b)); left: 8px; right: 8px; overflow-x: auto; scrollbar-width: none; }
  .compass { bottom: calc(118px + var(--safe-b)); right: 10px; width: 38px; height: 38px; }
  .compass i { left: 14px; top: 4px; }
  .note { display: none; }
  .panel { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 72vh; border-radius: 12px 12px 0 0; animation: sheetUp .35s cubic-bezier(.2,.8,.2,1); }
  @keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } }
  .grip { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 8px auto 0; position: absolute; left: 50%; transform: translateX(-50%); z-index: 3; }
  .welcome { left: 8px; right: 8px; width: auto; top: auto; bottom: calc(66px + var(--safe-b)); transform: none; padding: 20px 18px 16px; animation: none; }
  .welcome h1 { font-size: 38px; }
  .w-stats b { font-size: 22px; }
  .w-sub { font-size: 14.5px; }
  .primary, .ghost { padding: 12px 14px; font-size: 14px; }
  .caption { bottom: calc(66px + var(--safe-b)); padding: 12px 14px 0; }
  .caption p { font-size: 19px; }
  .cap-bar { margin: 0 -14px; }
  .tag b { font-size: 15px; }
  .tag span { display: none; }
  .tag .t-in { padding: 6px 10px; }
  .pin .dot { width: 22px; height: 22px; font-size: 10.5px; }
  .menu { top: 56px; right: 10px; }
  .plan-overlay { left: 8px; right: 8px; width: auto; top: 64px; }
}

.tag.small b { font-size: 15px; }
.tag.small .t-in { padding: 6px 10px 7px; }
.gallery figcaption { left: auto; right: 12px; text-align: right; }
.plan-overlay { width: 560px; }
.plan-overlay img { cursor: zoom-in; }
.plan-overlay.big { left: 50%; top: 50%; width: min(1300px, 94vw); transform: translate(-50%, -50%); z-index: 45; }
.plan-overlay.big img { cursor: zoom-out; }
@media (max-width: 760px) {
  .modes .tour { order: -1; margin-left: 0; margin-right: 6px; }
  .panel { height: 56vh; }
  .panel.peek { height: 38vh; }
  .plan-overlay { width: auto; }
}

.pin .lab { transform: translateX(var(--lx, 0px)) translateY(4px); }
.pin:hover .lab, .pin.show .lab { transform: translateX(var(--lx, 0px)); }
.tag .t-in { transform: translateX(var(--lx, 0px)); }
.pin.dim { opacity: .38; }
.pin.dim:hover { opacity: 1; }
.filters .key { background: var(--burgundy); color: var(--cream); }
.keyrow { cursor: pointer; }
.keyrow:hover { background: var(--stone-p); }
body.panel-open .caption { left: calc((100% - 470px) / 2); }
@media (max-width: 760px) { body.touring .filters, body.touring .compass { display: none; } }

.sm { display: none; }
@media (max-width: 760px) {
  .lg { display: none; } .sm { display: inline; }
  .modes { justify-content: space-between; }
  .filters { right: 60px; }
}

@media (max-width: 760px) { .filters button:not(.key) { display: none; } .filters { right: auto; } }