/* The unit page's hosted-video player (player.js). Sized by its pane like the
   other media (unit.html sets the hero height); everything sits over the video. */
.lvp { position: relative; width: 100%; aspect-ratio: 16/10; background: #000; color: #fff; overflow: hidden;
       font-family: var(--font-display, "Plus Jakarta Sans", system-ui, sans-serif); cursor: pointer; outline: none;
       -webkit-tap-highlight-color: transparent; user-select: none; }
.lvp:focus-visible { box-shadow: inset 0 0 0 3px var(--accent, #3943C6); }
.lvp:fullscreen { aspect-ratio: auto; width: 100vw; height: 100vh; }
.lvp-v { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; opacity: 0; }
.lvp-v.on { opacity: 1; }
.lvp-shade { position: absolute; inset: auto 0 0 0; height: 45%; pointer-events: none;
             background: linear-gradient(to top, rgba(0,0,0,.6), transparent); opacity: 1; transition: opacity .3s; }

.lvp-title { position: absolute; left: 0; right: 0; bottom: calc(96px + 8%); text-align: center; pointer-events: none;
             opacity: 0; transform: translateY(8px); transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
             text-shadow: 0 2px 14px rgba(0,0,0,.45); }
.lvp-title.on { opacity: 1; transform: none; }
.lvp-title-u { text-align: left; left: 6%; bottom: calc(96px + 4%); }
.lvp-t1 { font-weight: 800; font-size: clamp(18px, 3.2vw, 34px); letter-spacing: -.01em; }
.lvp-t2 { font-weight: 500; font-size: clamp(13px, 2.1vw, 22px); opacity: .92; margin-top: 2px; }

/* The row above the bar: just the watermark, right-aligned. */
.lvp-chips { display: flex; align-items: center; gap: 6px; min-height: 22px; }

/* Chapters button, top left, always on show: "2/5 Entrance ▾ / Up next: Lobby".
   A tap opens the list of every part. */
.lvp-cb { position: absolute; left: 12px; top: 12px; z-index: 4; max-width: calc(100% - 24px); cursor: default; }
.lvp-cb-btn { display: flex; align-items: center; gap: 10px; max-width: 100%; border: 0; cursor: pointer; text-align: left; color: #fff;
              font: inherit; background: rgba(14,14,18,.62); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
              box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 8px 22px -10px rgba(0,0,0,.7); border-radius: 14px; padding: 7px 12px 7px 7px; }
.lvp-cb-btn:hover { background: rgba(14,14,18,.78); }
.lvp-cb-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.lvp-cb-ico { position: relative; flex: none; width: 30px; height: 30px; border-radius: 9px; background: #fff; color: #0A0A0A; display: grid; place-items: center; }
.lvp-cb-ico svg { width: 16px; height: 16px; fill: currentColor; }
.lvp-cb-ico b { position: absolute; right: -5px; top: -5px; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--accent, #3943C6);
                color: #fff; font-size: 10px; font-weight: 800; display: grid; place-items: center; box-shadow: 0 0 0 2px rgba(14,14,18,.9); }
.lvp-cb-txt { min-width: 0; display: flex; flex-direction: column; }
.lvp-cb-l1 { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvp-cb-k { font-weight: 700; opacity: .65; margin-right: 6px; font-variant-numeric: tabular-nums; }
.lvp-cb-car { font-size: 10px; opacity: .8; display: inline-block; transition: transform .2s; }
.lvp-cb.open .lvp-cb-car { transform: rotate(180deg); }
.lvp-cb-l2 { font-size: 11.5px; font-weight: 600; opacity: .88; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.lvp-cb-nx { opacity: .7; font-weight: 500; }
.lvp-list { display: none; margin-top: 8px; width: 300px; max-width: calc(100vw - 48px); overflow: auto; padding: 6px; border-radius: 14px;
            background: rgba(14,14,18,.9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 22px 44px -14px rgba(0,0,0,.8); }
.lvp-cb.open .lvp-list { display: block; animation: lvp-drop .18s ease-out; }
@keyframes lvp-drop { from { opacity: 0; transform: translateY(-6px); } }
.lvp-it { display: grid; grid-template-columns: 20px 58px minmax(0, 1fr) auto; gap: 9px; align-items: center; width: 100%; border: 0; background: none;
          color: #fff; font: inherit; text-align: left; padding: 6px; border-radius: 10px; cursor: pointer; }
.lvp-it:hover { background: rgba(255,255,255,.1); }
.lvp-it.on { background: rgba(255,255,255,.16); }
.lvp-it-n { font-size: 11px; font-weight: 800; opacity: .55; text-align: center; font-variant-numeric: tabular-nums; }
.lvp-it.on .lvp-it-n { opacity: 1; }
.lvp-it img, .lvp-it-np { width: 58px; height: 34px; object-fit: cover; border-radius: 6px; display: block; background: #222; }
.lvp-it-t { min-width: 0; }
.lvp-it-t b { font-size: 13px; }
.lvp-it.unit .lvp-it-t b { color: #AEB3FF; }
.lvp-it-t small { display: block; font-size: 11px; opacity: .6; }
.lvp-it-at { font-size: 12px; font-variant-numeric: tabular-nums; opacity: .75; }
.lvp-badge:empty { display: none; }
.lvp-badge { display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 1px 6px;
             border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.lvp-badge.now { background: #fff; color: #0A0A0A; }
.lvp-badge.next { background: rgba(255,255,255,.18); color: #fff; }
@media (max-width: 640px) {
  .lvp-cb { left: 8px; top: 8px; }
  .lvp-cb-btn { gap: 8px; padding: 5px 10px 5px 5px; }
  .lvp-cb-ico { width: 26px; height: 26px; }
  .lvp-cb-l1 { font-size: 12px; } .lvp-cb-l2 { font-size: 11px; }
  .lvp-list { width: 260px; }
}
/* The real wordmark in white (same artwork as the site header), translucent. */
.lvp-mark { height: 22px; width: auto; opacity: .7; filter: drop-shadow(0 1px 4px rgba(0,0,0,.4));
            pointer-events: none; user-select: none; }

.lvp-big { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border: 0;
           border-radius: 50%; background: rgba(255,255,255,.94); display: grid; place-items: center; cursor: pointer;
           box-shadow: 0 10px 30px -10px rgba(0,0,0,.55); transition: transform .2s; }
.lvp-big svg { width: 28px; height: 28px; fill: #0A0A0A; margin-left: 4px; }
.lvp-big:hover { transform: scale(1.06); }
.lvp.is-playing .lvp-big, .lvp.is-started.is-loading .lvp-big { display: none; }
.lvp-spin { position: absolute; left: 50%; top: 50%; width: 40px; height: 40px; margin: -20px 0 0 -20px; border-radius: 50%;
            border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; display: none; animation: lvp-spin .8s linear infinite; }
.lvp.is-started.is-loading .lvp-spin { display: block; }
@keyframes lvp-spin { to { transform: rotate(360deg); } }

/* The controls stay on screen while playing, so the chapters are always one tap away. */
.lvp-ctrl { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.lvp-bar { display: flex; gap: 4px; height: 14px; align-items: center; cursor: pointer; }
.lvp-bar.has-tag { margin-top: 20px; }   /* room for the "Unit tour" label */
.lvp-seg { position: relative; min-width: 8px; }
.lvp-tr { position: relative; height: 5px; border-radius: 999px; background: rgba(255,255,255,.32); overflow: hidden; }
.lvp-tr i { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: 999px; }
.lvp-seg.unit .lvp-tr i { background: #AEB3FF; }
/* A still dot where each part starts, with a ring rippling out of it: tap to jump. */
.lvp-cdot { position: absolute; left: 0; top: 50%; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; padding: 0; border: 0; border-radius: 50%;
            background: #fff; box-shadow: 0 0 0 2px rgba(0,0,0,.4); cursor: pointer; z-index: 2; }
.lvp-cdot.unit { background: #AEB3FF; }
.lvp-cdot::before { content: ""; position: absolute; inset: -12px; }   /* a finger-sized target */
.lvp-cdot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(255,255,255,.8);
                   animation: lvp-ripple 2.4s ease-out infinite; pointer-events: none; }
.lvp-cdot.unit::after { border-color: rgba(174,179,255,.95); }
.lvp-cdot.on::after { display: none; }
@keyframes lvp-ripple { 0% { transform: scale(.6); opacity: .9; } 70%, 100% { transform: scale(1.8); opacity: 0; } }
/* The one name on the line: where the unit tour starts. Small, and gone once the tour is reached. */
.lvp-utag { position: absolute; left: 0; bottom: calc(100% + 9px); transform: translateX(-50%); border: 0; padding: 0; background: none;
            font: inherit; cursor: pointer; display: flex; flex-direction: column; align-items: center; transition: opacity .5s; }
.lvp-utag span { color: #AEB3FF; font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap;
                 background: rgba(0,0,0,.35); text-shadow: 0 1px 3px rgba(0,0,0,.6); }
.lvp-utag::after { content: ""; width: 1.5px; height: 6px; background: rgba(174,179,255,.7); }
.lvp-utag.gone { opacity: 0; pointer-events: none; }
.lvp-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; }
.lvp-btn { border: 0; background: none; color: #fff; width: 32px; height: 32px; display: grid; place-items: center; cursor: pointer; border-radius: 8px; }
.lvp-btn:hover { background: rgba(255,255,255,.14); }
.lvp-btn svg { width: 20px; height: 20px; fill: currentColor; }
.lvp-time { font-variant-numeric: tabular-nums; opacity: .92; }
.lvp-sp { flex: 1; }
/* Speed (1× / 1.5× / 2×) and quality (HD ⇄ 4K): finger-sized, white when not the default. */
.lvp-pill { min-width: 44px; height: 32px; padding: 0 10px; border: 1.5px solid rgba(255,255,255,.7); border-radius: 8px;
            background: rgba(0,0,0,.25); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer;
            font-variant-numeric: tabular-nums; }
.lvp-pill:hover { background: rgba(255,255,255,.16); }
.lvp-pill.on { background: #fff; border-color: #fff; color: #0A0A0A; }
.lvp-pill:disabled { opacity: .55; cursor: default; background: none; }
/* On the 720p backup: amber, so it's clear the picture stepped down for a slow connection. */
.lvp-pill.low { border-color: #FFD36B; color: #FFD36B; }
.lvp-toast { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%) scale(.92); padding: 10px 18px;
             border-radius: 12px; background: rgba(0,0,0,.6); font-size: 22px; font-weight: 800; pointer-events: none;
             opacity: 0; transition: opacity .25s, transform .25s; }
.lvp-toast.on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 640px) {
  .lvp-mark { height: 17px; }
  .lvp-big { width: 58px; height: 58px; margin: -29px 0 0 -29px; }
}
@media (prefers-reduced-motion: reduce) { .lvp-title { transition: none; } .lvp-cdot::after { animation: none; opacity: .6; } }

/* The stage holds the picture and everything drawn over it. */
.lvp-stage { position: absolute; inset: 0; }

/* Where you are (player.js buildMap): the floor plan beside the video with a
   dot + view cone following the camera. In the page, a panel on the right or
   (upright phone) under the video; in desktop full screen a card in a corner;
   a phone turned sideways (.lvp-rot) the panel on the right. player.js sizes
   the stage around it. */
.lvp-map, .lvp-mapbtn, .lvp-room, .lvp-map-ghost { display: none; }
.lvp.has-map { cursor: default; }
.lvp.lvp-split { aspect-ratio: auto; width: 100vw; height: 100vh; height: 100dvh; }
.lvp.lvp-fsx { position: fixed; inset: 0; z-index: 3000; }
/* A phone's "watch sideways" (player.js rotate()): held upright, the cover is
   turned a quarter so the video fills the phone once it's turned. !important:
   the page sizes a covering player to the upright screen. */
@media (orientation: portrait) {
  .lvp.lvp-fsx.lvp-rot { inset: 0 auto auto 100%; width: 100vh !important; width: 100dvh !important; height: 100vw !important;
                          transform: rotate(90deg); transform-origin: top left; }
}
html.lvp-locked, html.lvp-locked body { overflow: hidden; }
.lvp.has-map .lvp-stage { cursor: pointer; transition: bottom .28s cubic-bezier(.2,.8,.2,1), right .28s cubic-bezier(.2,.8,.2,1); }
.lvp.has-map .lvp-stage.no-anim { transition: none; }
.lvp.has-map .lvp-mapbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; position: relative; }
.lvp-mapbtn svg { fill: none; flex: none; }
.lvp-mapbtn[aria-pressed="true"] { background: rgba(255,255,255,.2); }
/* Named on a computer screen, where the row has room: "Floor plan". */
.lvp-mapbtn-t { display: none; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
/* Phones: "Plan", so a hidden plan is easy to bring back. */
.lvp.lvp-phone.has-map .lvp-mapbtn { width: auto; padding: 0 10px 0 8px; }
.lvp.lvp-phone .lvp-mapbtn-t { display: inline; }
@media (min-width: 900px) {
  .lvp.has-map .lvp-mapbtn { width: auto; padding: 0 10px 0 8px; }
  .lvp-mapbtn-t { display: inline; }
}
.lvp-mapbtn.nudge::after { content: ""; position: absolute; inset: -3px; border-radius: 10px; border: 2px solid #fff; animation: lvp-nudge 1.2s ease-out 2; }
@keyframes lvp-nudge { from { transform: scale(.8); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
.lvp-toast.small { top: auto; bottom: 110px; font-size: 13px; font-weight: 600; padding: 8px 14px; border-radius: 999px; white-space: nowrap; background: rgba(20,20,26,.88); }

.lvp.has-map .lvp-map { display: flex; }
/* A phone shows the plan only full screen; in the page the video is alone. */
.lvp.lvp-phone:not(.lvp-split) .lvp-map { display: none; }
.lvp-map { position: absolute; z-index: 6; flex-direction: column; background: #F6F5F2; color: #14141A; border-radius: 14px;
           box-shadow: 0 10px 34px rgba(0,0,0,.4); padding: 8px 10px 10px; cursor: grab; container-type: inline-size;
           transform-origin: var(--ox, 100%) var(--oy, 100%);
           transition: left .28s cubic-bezier(.2,.8,.2,1), top .28s cubic-bezier(.2,.8,.2,1), opacity .2s, transform .2s; }
.lvp-map.no-anim { transition: none; }
.lvp-map.card { touch-action: none; }   /* dragged; elsewhere a swipe scrolls the page */
.lvp-map.drag { transition: none; cursor: grabbing; box-shadow: 0 16px 44px rgba(0,0,0,.5); }
.lvp-map.off { opacity: 0; transform: scale(.6); pointer-events: none; }
.lvp-map.dock { border-radius: 20px 20px 0 0; box-shadow: none; cursor: default; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
.lvp-map.dock.off { opacity: 1; transform: translateY(100%); }
.lvp-map.dock .lvp-map-grip, .lvp-map.dock .lvp-map-grow { display: none; }
/* The panel right of the video, in the page: full height, slides out right. */
.lvp-map.side { border-radius: 0; box-shadow: none; cursor: default; padding: 12px 14px 14px; }
.lvp-map.side.off { opacity: 1; transform: translateX(100%); }
.lvp-map.side .lvp-map-grip, .lvp.lvp-phone .lvp-map-grip, .lvp.lvp-phone .lvp-map-grow { display: none; }
.lvp.lvp-phone .lvp-map { touch-action: auto; cursor: default; }
.lvp-map-grip { width: 26px; height: 4px; border-radius: 2px; background: #CFCDC6; position: absolute; top: 4px; left: 50%; margin-left: -13px; }
.lvp-map-ghost { position: absolute; z-index: 5; border: 2px dashed rgba(255,255,255,.55); border-radius: 14px; opacity: 0; pointer-events: none;
                 transition: opacity .15s, left .15s, top .15s; }
.lvp.lvp-split .lvp-map-ghost { display: block; }
.lvp-map-ghost.on { opacity: 1; }
.lvp-map-h { display: flex; align-items: center; gap: 7px; min-height: 26px; font-size: 13px; }
.lvp-map.dock .lvp-map-h { font-size: 14.5px; }
.lvp-map-h b { font-weight: 800; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvp-map-skip { font: inherit; font-weight: 800; color: var(--accent, #3943C6); background: rgba(57,67,198,.1); border: 0; border-radius: 6px;
                 padding: 1px 6px; margin-left: 1px; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.lvp-map-skip:hover { background: rgba(57,67,198,.18); }
.lvp-map-note { font-size: 11.5px; font-weight: 600; color: #6B6B78; white-space: nowrap; }
@container (max-width: 250px) { .lvp-map-note { display: none; } }
.lvp-map-pin { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--accent, #3943C6); box-shadow: 0 0 0 3px rgba(57,67,198,.22); }
.lvp-map.is-before .lvp-map-pin { background: #9A9AA6; box-shadow: none; }
.lvp-map-b { flex: none; width: 26px; height: 26px; border: 0; padding: 0; border-radius: 7px; background: none; color: #6B6B78; display: grid; place-items: center; cursor: pointer; }
.lvp-map-b:hover { background: rgba(0,0,0,.06); color: #14141A; }
.lvp-map-b svg { width: 15px; height: 15px; }
.lvp-map-fit { flex: 1 1 0; min-height: 0; display: grid; place-items: center; margin-top: 4px; }
.lvp-map-box { position: relative; overflow: hidden; }
.lvp-map-box img { position: absolute; max-width: none; height: auto; display: block; pointer-events: none; user-select: none; }
.lvp-map-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lvp-map-trail { fill: none; stroke: var(--accent, #3943C6); stroke-opacity: .35; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round;
                 stroke-dasharray: 1 6; vector-effect: non-scaling-stroke; }
.lvp-map-cone { fill: rgba(57,67,198,.24); stroke: rgba(57,67,198,.5); stroke-width: 1; }
.lvp-map-ring { fill: none; stroke: var(--accent, #3943C6); stroke-width: 2; transform-box: fill-box; transform-origin: center;
                animation: lvp-here 1.8s ease-out infinite; }
.lvp-map-c { fill: var(--accent, #3943C6); stroke: #fff; stroke-width: 2.5; }
.lvp-map-dot { pointer-events: none; }
.lvp-map.is-before .lvp-map-cone, .lvp-map.is-before .lvp-map-ring { display: none; }
.lvp-map.is-before .lvp-map-c { fill: #9A9AA6; }
@keyframes lvp-here { 0% { transform: scale(.7); opacity: .9; } 80%, 100% { transform: scale(2); opacity: 0; } }
/* A play button on each room: tap to skip there. The room you're in is solid. */
.lvp-hs { cursor: pointer; outline: none; }
.lvp-hs-hit { fill: transparent; }
.lvp-hs-c { fill: #fff; stroke: var(--accent, #3943C6); transition: fill .15s; }
.lvp-hs-p { fill: var(--accent, #3943C6); }
.lvp-hs:hover .lvp-hs-c, .lvp-hs:focus-visible .lvp-hs-c { fill: #E4E5FA; }
.lvp-hs.on .lvp-hs-c { fill: var(--accent, #3943C6); }
.lvp-hs.on .lvp-hs-p { fill: #fff; }
/* The room's name and size, under the chapters button; bigger for a moment on arrival. */
.lvp.has-map .lvp-room.on { display: block; }
.lvp.has-map.lvp-room-off .lvp-room.on { display: none; }
.lvp-room { position: absolute; left: 12px; top: 72px; z-index: 3; pointer-events: none; color: #fff; background: rgba(14,14,18,.55);
            border-radius: 10px; padding: 6px 10px; font-size: 13px; line-height: 1.25; font-weight: 700;
            transition: font-size .35s, padding .35s, background .35s; }
.lvp-room-n { display: block; }
.lvp-room-s { display: block; font-size: 11.5px; font-weight: 600; opacity: .92; }
.lvp-room-s i { font-style: normal; opacity: .72; }
.lvp-room.arrive { font-size: 19px; padding: 10px 14px; background: rgba(57,67,198,.88); }
.lvp-room.arrive .lvp-room-s { font-size: 14px; }
@media (max-width: 640px) { .lvp-room { left: 8px; top: 60px; } }
@media (prefers-reduced-motion: reduce) {
  .lvp-map-ring, .lvp-mapbtn.nudge::after { animation: none; opacity: .5; }
  .lvp-map, .lvp-room, .lvp.has-map .lvp-stage { transition: none; }
}

/* Leave the phone's full-screen video + plan (player.js setSplit). */
.lvp-exit { display: none; }
.lvp.lvp-fsx:not(.lvp-rot) .lvp-exit { display: inline-flex; position: absolute; z-index: 30; top: calc(env(safe-area-inset-top, 0px) + 12px); right: 12px; width: 42px; height: 42px; border: 0; border-radius: 50%; background: rgba(255,255,255,.16); transition: background .2s; color: #fff; align-items: center; justify-content: center; cursor: pointer; }
.lvp-exit svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.lvp-exit:hover, .lvp-exit:active { background: rgba(255,255,255,.28); }
.lvp-time { white-space: nowrap; }
@media (max-width: 420px) { .lvp.lvp-phone .lvp-time { font-size: 13px; } }
@media (max-width: 420px) { .lvp.lvp-phone .lvp-row { gap: 4px; } .lvp.lvp-phone.has-map .lvp-mapbtn { padding: 0 6px 0 4px; } }
@media (max-width: 360px) { .lvp.lvp-phone .lvp-mapbtn-t { display: none; } .lvp.lvp-phone.has-map .lvp-mapbtn { width: 32px; padding: 0; } .lvp.lvp-phone .lvp-row { gap: 2px; } }