:root {
  --ink: #16171d;
  --header: #1d1e26;
  --nav: #929397;
  --paper: #f2f1ed;
  --accent: #e5ff54;
  --header-height: 88px;
  --transition-speed: 900ms;
  --focus: #dfff39;
  --radar-color: #fff;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
html { background: var(--ink); }
body {
  color: var(--paper);
  background: #0e0f13;
  font-family: "Space Grotesk", Arial, sans-serif;
  overflow: hidden;
}
button, a { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 1000; background: var(--accent); color: #111; padding: 10px 14px; text-decoration: none; }
.skip-link:focus { top: 12px; }

.museum-header { position: fixed; inset: 0 0 auto; height: var(--header-height); background: var(--header); z-index: 100; transition: transform 300ms ease; }
.museum-header.is-hidden { transform: translateY(calc(-1 * var(--header-height))); }
.museum-masthead { height: 56px; display: flex; align-items: center; justify-content: center; padding: 0 24px; }
.museum-brand { display: inline-flex; align-items: center; gap: 20px; color: #f8f8f8; text-decoration: none; text-transform: uppercase; font-size: clamp(11px, 1.12vw, 18px); letter-spacing: .18em; font-weight: 400; white-space: nowrap; }
.museum-brand i { font-style: normal; color: #bfc0c4; }
.brand-title > span { display: inline; }
.brand-title > span + span::before { content: " "; }
.brand-mark { display: block; flex: 0 0 auto; width: 28px; height: 33px; object-fit: contain; }
.ecosystem-nav { height: 32px; display: flex; align-items: center; justify-content: center; gap: clamp(13px, 2.5vw, 44px); background: var(--nav); }
.ecosystem-nav a { color: rgba(255,255,255,.72); text-decoration: none; text-transform: uppercase; letter-spacing: .35em; font-size: clamp(10px, 1vw, 15px); transition: color 180ms ease; }
.ecosystem-nav a:hover, .ecosystem-nav a.active { color: #111218; }
.ecosystem-nav span { color: rgba(255,255,255,.65); }
.menu-toggle { display: none; border: 0; background: transparent; padding: 8px; }
.menu-toggle > span:not(.visually-hidden) { display: block; width: 22px; height: 1px; background: #fff; margin: 5px 0; }

.museum-shell { position: fixed; inset: var(--header-height) 0 0; background: #111217; }
.museum-shell.header-minimized { inset: 0; }
.museum-entrance { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; isolation: isolate; background: #111318; }
.museum-entrance::before { content: ""; position: absolute; inset: -6%; z-index: -2; background: linear-gradient(90deg, rgba(8,9,12,.65), rgba(8,9,12,.1)), url("../images/rooms/gallery.png") center / cover; filter: grayscale(.25) contrast(1.05); animation: entranceDrift 18s ease-in-out infinite alternate; }
.museum-entrance::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,.7)); }
.entrance-copy { width: min(84vw, 760px); text-align: center; }
.eyebrow, .entrance-index { text-transform: uppercase; letter-spacing: .34em; font-size: clamp(9px, .9vw, 13px); }
.entrance-copy h1 { margin: 18px 0 14px; text-transform: uppercase; font-size: clamp(58px, 10vw, 148px); line-height: .79; letter-spacing: -.055em; font-weight: 300; }
.entrance-exhibition { margin: 22px 0 34px; font-size: clamp(12px, 1.2vw, 17px); letter-spacing: .26em; text-transform: uppercase; }
.enter-button { border: 1px solid rgba(255,255,255,.7); background: rgba(17,18,23,.18); color: #fff; padding: 14px 18px; text-transform: uppercase; letter-spacing: .28em; font-size: 11px; cursor: pointer; backdrop-filter: blur(8px); transition: background 180ms ease, color 180ms ease; }
.enter-button:hover { color: #111; background: #fff; }
.enter-button span { margin-left: 18px; }
.entrance-index { position: absolute; inset: auto 28px 22px; display: flex; justify-content: space-between; color: rgba(255,255,255,.66); }

.room-viewport { position: absolute; inset: 0; overflow: hidden; background: #0c0d10; overscroll-behavior: none; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.45) transparent; }
.room-viewport.is-gallery { overflow-x: hidden; }
.room-mount { position: relative; width: 100%; height: 100%; min-width: 100%; min-height: 100%; transition: opacity var(--transition-speed) ease, transform var(--transition-speed) cubic-bezier(.2,.8,.2,1), filter var(--transition-speed) ease; }
.room-mount.is-leaving { opacity: .15; transform: scale(1.055) translateX(-2.5%); filter: blur(5px); }
.room-mount.is-entering { opacity: 0; transform: scale(.96) translateX(4%); filter: blur(2px); }
.room-loader { position: absolute; inset: 0; z-index: 20; display: grid; place-content: center; gap: 12px; text-align: center; background: #111217; text-transform: uppercase; letter-spacing: .35em; font-size: 10px; transition: opacity 280ms ease, visibility 280ms; }
.room-loader[hidden] { display: none; }
.room-loader b { justify-self: center; width: 5px; height: 5px; border-radius: 50%; background: #fff; animation: loaderPulse 1.3s infinite; }

.room-stage { position: relative; width: 100vw; height: 66.65vw; overflow: hidden; background: #d4d2ce; }
.room-stage > .room-background { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; user-select: none; }
.gallery-background-portrait { display: none; }
.gallery-stage { top: 50%; transform: translateY(-50%); }
.room-caption { position: absolute; z-index: 9; left: 22px; top: 18px; display: flex; align-items: baseline; gap: 12px; color: #1c1d20; text-transform: uppercase; text-shadow: 0 1px 12px rgba(255,255,255,.8); }
.room-caption b { font-size: clamp(10px, .9vw, 14px); letter-spacing: .22em; }
.room-caption > span { font-size: 9px; letter-spacing: .18em; opacity: .65; pointer-events: none; }
.room-switcher { position: relative; text-shadow: none; }
.room-switcher summary { display: inline-flex; align-items: center; gap: 9px; list-style: none; cursor: pointer; text-shadow: 0 1px 12px rgba(255,255,255,.8); }
.room-switcher summary::-webkit-details-marker { display: none; }
.room-switcher summary i { width: 7px; height: 7px; margin-top: -3px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); transition: transform 160ms ease; }
.room-switcher[open] summary i { margin-top: 3px; transform: rotate(225deg); }
.room-switcher nav { position: absolute; left: -10px; top: calc(100% + 11px); display: grid; width: min(250px, calc(100vw - 32px)); padding: 7px; background: rgba(20,21,24,.9); box-shadow: 0 12px 35px rgba(0,0,0,.24); backdrop-filter: blur(14px); }
.room-switcher nav a { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 10px 11px; color: #fff; text-decoration: none; letter-spacing: .14em; font-size: 9px; }
.room-switcher nav a:hover, .room-switcher nav a[aria-current="page"] { background: rgba(255,255,255,.13); }
.room-switcher nav a small { color: rgba(255,255,255,.56); font-size: 7px; letter-spacing: .14em; }

.artwork-slot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); z-index: var(--z, 2); display: grid; place-items: center; transform: rotate(var(--rotation, 0deg)) skewX(var(--skew-x, 0deg)) skewY(var(--skew-y, 0deg)); transform-origin: center; }
.artwork-open { display: grid; place-items: center; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; touch-action: manipulation; }
.artwork-open img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; box-shadow: 0 7px 14px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.35); filter: none; opacity: 1; transition: transform 180ms ease; }
.artwork-slot[data-fit="fill"] .artwork-open img { width: 100%; height: 100%; object-fit: cover; }
.museum-radar { position: absolute; right: -9px; bottom: -9px; z-index: 7; width: 28px; height: 28px; border: 0; border-radius: 50%; background: transparent; padding: 0; cursor: pointer; }
.radar-core { position: absolute; inset: 10px; border-radius: 50%; background: var(--radar-color); box-shadow: 0 1px 8px rgba(0,0,0,.7); }
.radar-ring { position: absolute; inset: 5px; border: 1px solid var(--radar-color); border-radius: 50%; animation: radarPulse 1.9s ease-out infinite; }
.radar-tooltip { position: absolute; right: 18px; bottom: 26px; width: max-content; max-width: 240px; padding: 9px 11px; background: rgba(18,19,23,.88); color: #fff; text-align: left; text-transform: uppercase; letter-spacing: .1em; line-height: 1.45; font-size: 9px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: 160ms ease; pointer-events: none; backdrop-filter: blur(7px); }
.museum-radar:hover .radar-tooltip, .museum-radar:focus-visible .radar-tooltip { opacity: 1; visibility: visible; transform: none; }

/* SVG guide renderer. Scoped so old JavaScript and new CSS can safely coexist. */
.room-viewport.perspective-gallery { overflow: hidden; background: #d6d4d0; }
.room-viewport.perspective-gallery .room-mount { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 100%; min-height: 100%; }
.room-viewport.perspective-gallery .gallery-stage { position: absolute; inset: 0; top: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; transform: none; }
.room-viewport.perspective-gallery .gallery-stage > .room-background { object-fit: fill; }
.room-viewport.perspective-gallery .artwork-slot { position: absolute; inset: 0; left: 0; top: 0; width: 100%; height: 100%; display: block; transform: none; pointer-events: none; }
.room-viewport.perspective-gallery .artwork-open { position: absolute; inset: 0; display: block; width: 100%; height: 100%; transform-origin: 0 0; pointer-events: auto; }
.room-viewport.perspective-gallery .artwork-open img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: fill; transform: none; filter: none; opacity: 1; transition: none; }
.room-viewport.perspective-gallery .artwork-slot > .museum-radar { left: var(--radar-x); top: var(--radar-y); right: auto; bottom: auto; transform: translate(-50%, -50%); pointer-events: auto; }

/* Artwork keeps its source color in every pointer state. This also prevents
   WebKit from retaining a bright hover/active layer after a mobile tap. */
.artwork-open:hover img,
.artwork-open:active img,
.artwork-open:focus img,
.room-viewport.perspective-gallery .artwork-open:hover img,
.room-viewport.perspective-gallery .artwork-open:active img,
.room-viewport.perspective-gallery .artwork-open:focus img { filter: none !important; opacity: 1; }

.room-navigation { position: absolute; z-index: 8; top: 52%; transform: translateY(-50%); display: grid; gap: 4px; border: 0; background: rgba(20,21,24,.54); color: #fff; min-width: 48px; padding: 14px 10px; cursor: pointer; text-transform: uppercase; backdrop-filter: blur(8px); transition: background 180ms ease; }
.room-navigation:hover { background: rgba(20,21,24,.82); }
.room-navigation.previous { left: 14px; }
.room-navigation.next { right: 14px; }
.room-navigation b { font-size: 22px; line-height: 1; font-weight: 300; }
.room-navigation span { writing-mode: vertical-rl; font-size: 8px; letter-spacing: .2em; }

.room-ambience { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #0c0d10; }
.room-ambience::after { content: ""; position: absolute; inset: 0; background: rgba(9,10,12,.16); }
.room-ambience img { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.05); filter: blur(12px) saturate(.84) brightness(.76); }

.contain-stage { position: absolute; z-index: 1; inset: 0; margin: auto; width: min(100vw, calc((100vh - var(--header-height)) * var(--room-ratio))); height: min(calc(100vh - var(--header-height)), calc(100vw / var(--room-ratio))); min-height: 0; aspect-ratio: var(--room-ratio); overflow: hidden; }
.theater-stage { --room-ratio: 1.3671875; background: #aaa; }
.theater-background-portrait { display: none; }
.music-stage { --room-ratio: 1; background: #2e2d29; }
.museum-shell.header-minimized .contain-stage { width: min(100vw, calc(100vh * var(--room-ratio))); height: min(100vh, calc(100vw / var(--room-ratio))); }
.video-stage { position: absolute; left: 24.65%; top: 18.1%; width: 51.3%; height: 38.7%; z-index: 3; background: #050505; overflow: hidden; }
.video-stage video, .video-stage iframe { display: block; width: 100%; height: 100%; border: 0; object-fit: contain; background: #000; }
.media-empty { display: grid; place-items: center; width: 100%; height: 100%; text-transform: uppercase; letter-spacing: .25em; color: rgba(255,255,255,.55); font-size: clamp(8px, 1vw, 12px); }
.theater-radar { position: absolute; left: 77.4%; top: 47.5%; }
.fullscreen-control { position: absolute; z-index: 6; left: 63.8%; top: 58.6%; border: 0; background: rgba(10,10,10,.58); color: #fff; padding: 7px 10px; text-transform: uppercase; letter-spacing: .15em; font-size: clamp(7px, .75vw, 10px); cursor: pointer; }
.contain-stage .room-caption { color: #fff; text-shadow: 0 1px 10px #000; }
.contain-stage .room-navigation { top: 51%; }

.music-controls { position: absolute; z-index: 4; left: 22%; top: 49%; width: 18%; height: 15%; display: flex; align-items: center; justify-content: center; gap: clamp(3px, .65vw, 8px); }
.audio-control { display: grid; place-items: center; flex: 0 0 auto; width: clamp(26px, 3.2vw, 40px); height: clamp(26px, 3.2vw, 40px); aspect-ratio: 1; padding: 0; border: 1px solid rgba(255,255,255,.68); border-radius: 50%; background: rgba(0,0,0,.16); color: #fff; font-size: clamp(10px, 1.4vw, 17px); line-height: 1; cursor: pointer; backdrop-filter: blur(5px); -webkit-appearance: none; appearance: none; touch-action: manipulation; }
.audio-control.minor { width: clamp(19px, 2.2vw, 28px); height: clamp(19px, 2.2vw, 28px); font-size: clamp(8px, 1vw, 12px); border-color: rgba(255,255,255,.35); }
.audio-control:disabled { opacity: .35; cursor: default; }
.audio-control [data-play-icon] { display: block; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 8px solid currentColor; transform: translateX(10%); }
.audio-control.is-playing [data-play-icon] { width: 8px; height: 10px; border: 0; border-left: 2px solid currentColor; border-right: 2px solid currentColor; transform: none; }
.now-playing { position: absolute; z-index: 4; left: 62%; top: 49%; width: 20%; color: #fff; text-shadow: 0 2px 12px #000; overflow-wrap: break-word; }
.now-playing small { display: block; margin-bottom: 7px; text-transform: uppercase; letter-spacing: .25em; font-size: clamp(5px, .55vw, 8px); opacity: .68; }
.now-playing > b, .now-playing > span { display: block; text-transform: uppercase; }
.now-playing > b { font-size: clamp(7px, .92vw, 12px); letter-spacing: .12em; }
.now-playing > span { margin-top: 4px; font-size: clamp(6px, .78vw, 10px); letter-spacing: .09em; }
.music-radar { position: absolute; right: -10px; bottom: -2px; min-width: 28px; width: 28px; height: 28px; aspect-ratio: 1; }

.info-panel { position: fixed; z-index: 300; inset: var(--header-height) 0 0 auto; width: min(460px, 100vw); padding: clamp(32px, 5vw, 70px) clamp(24px, 4vw, 52px); background: rgba(22,23,29,.96); color: #fff; transform: translateX(105%); transition: transform 360ms cubic-bezier(.2,.8,.2,1); overflow-y: auto; backdrop-filter: blur(18px); }
.info-panel.open { transform: none; }
.overlay-close { position: absolute; right: 20px; top: 16px; width: 40px; height: 40px; border: 0; background: transparent; color: inherit; font-size: 32px; font-weight: 200; cursor: pointer; }
.info-type { margin: 0 0 44px; color: #b9bac0; text-transform: uppercase; letter-spacing: .28em; font-size: 9px; }
.info-panel h2 { margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; font-size: clamp(28px, 4vw, 45px); line-height: .98; font-weight: 400; }
.info-creator { margin: 0 0 32px; text-transform: uppercase; letter-spacing: .16em; font-size: 12px; }
.info-facts { display: grid; grid-template-columns: 92px 1fr; gap: 9px 14px; margin: 0 0 30px; font-size: 12px; }
.info-facts dt { color: #999ba3; text-transform: uppercase; letter-spacing: .13em; font-size: 9px; }
.info-facts dd { margin: 0; }
.info-description { color: #d2d3d7; line-height: 1.7; font-size: 14px; }
.info-link { display: inline-block; margin-top: 24px; color: #fff; text-transform: uppercase; letter-spacing: .18em; font-size: 10px; text-underline-offset: 5px; }

.lightbox { position: fixed; z-index: 400; inset: 0; display: grid; grid-template-columns: 72px minmax(0,1fr) 72px; align-items: center; background: rgba(8,8,10,.96); color: #fff; opacity: 0; visibility: hidden; transition: opacity 250ms ease, visibility 250ms; }
.lightbox.open { opacity: 1; visibility: visible; }
.lightbox figure { display: grid; place-items: center; gap: 14px; margin: 0; min-width: 0; }
.lightbox figure img { max-width: min(82vw, 1500px); max-height: 78vh; width: auto; height: auto; object-fit: contain; touch-action: pinch-zoom; }
.lightbox figcaption { display: flex; align-items: baseline; gap: 12px; width: min(82vw, 1500px); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; }
.lightbox figcaption span { color: #a8a9ae; }
.lightbox-nav { justify-self: center; width: 44px; height: 60px; border: 0; background: transparent; color: #fff; font-size: 26px; cursor: pointer; }
.room-error, .standalone-error { display:grid; place-content:center; justify-items:center; gap:22px; min-height:100vh; padding:30px; background:#17181e; color:#fff; text-align:center; text-transform:uppercase; letter-spacing:.18em; font-size:11px; }
.room-error { min-height:calc(100vh - var(--header-height)); }.room-error button, .standalone-error a { border:1px solid #777; background:transparent; color:#fff; padding:12px 16px; text-decoration:none; text-transform:uppercase; letter-spacing:.14em; cursor:pointer; }

@keyframes radarPulse { from { transform: scale(.35); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }
@keyframes loaderPulse { 50% { transform: scale(2.2); opacity: .3; } }
@keyframes entranceDrift { to { transform: scale(1.04) translateX(-1%); } }

@media (max-width: 767.98px) {
  :root { --header-height: 64px; --transition-speed: 540ms; }
  .room-mount.is-entering { opacity: 1; transform: none; filter: none; transition: none; }
  .museum-masthead { height: 64px; justify-content: flex-start; padding: 0 14px; }
  .museum-brand { gap: 10px; max-width: calc(100vw - 88px); font-size: 12px; letter-spacing: .22em; white-space: normal; line-height: 1.35; }
  .brand-title { display: grid; gap: 0; }
  .brand-title > span { display: block; }
  .brand-title > span + span::before { content: none; }
  .brand-mark { flex-basis: 23px; width: 23px; height: 27px; }
  .menu-toggle { display: block; position: absolute; right: 10px; top: 12px; }
  .ecosystem-nav { position: fixed; top: 64px; right: 0; width: min(78vw, 320px); height: calc(100vh - 64px); flex-direction: column; gap: 0; align-items: stretch; justify-content: flex-start; padding: 26px; background: rgba(29,30,38,.98); transform: translateX(105%); transition: transform 300ms ease; }
  .ecosystem-nav.open { transform: none; }
  .ecosystem-nav a { padding: 15px 2px; color: #fff; font-size: 12px; }
  .ecosystem-nav a.active { color: #fff; }
  .ecosystem-nav span { display: none; }
  .entrance-copy h1 { font-size: clamp(54px, 21vw, 92px); }
  .entrance-index { inset: auto 16px 16px; font-size: 7px; }
  .room-viewport.is-gallery { overflow: hidden; scroll-snap-type: none; }
  .gallery-stage { width: 100vw; height: 66.65vw; }
  .room-viewport.perspective-gallery .gallery-stage, .museum-shell.header-minimized .room-viewport.perspective-gallery .gallery-stage { inset: auto 0; top: 50%; margin: 0; width: 100%; height: auto; max-height: none; aspect-ratio: 1.498805; transform: translateY(-50%); }
  .room-viewport.is-music .room-ambience { display: none; }
  .room-caption { left: 12px; top: 12px; }
  .room-caption > span { display: none; }
  .room-switcher nav { top: calc(100% + 9px); }
  .room-navigation.previous { left: 8px; }
  .room-navigation.next { right: 8px; }
  .room-navigation { padding: 10px 7px; min-width: 39px; }
  .room-navigation span { font-size: 6px; }
  .museum-radar { width: 34px; height: 34px; right: -14px; bottom: -14px; }
  .radar-core { inset: 12px; }
  .radar-ring { inset: 6px; }
  .radar-tooltip { display: none; }
  .contain-stage { width: min(100vw, calc((100vh - var(--header-height)) * var(--room-ratio))); height: min(calc(100vh - var(--header-height)), calc(100vw / var(--room-ratio))); }
  .lightbox { grid-template-columns: 44px minmax(0,1fr) 44px; }
  .lightbox figure img { max-width: calc(100vw - 96px); max-height: 74vh; }
  .lightbox figcaption { display: grid; gap: 5px; width: calc(100vw - 96px); font-size: 9px; }
  .info-panel { inset: var(--header-height) 0 0; width: 100%; }
}

@media (max-width: 767.98px) and (orientation: portrait) {
  .room-viewport.perspective-gallery .gallery-stage,
  .museum-shell.header-minimized .room-viewport.perspective-gallery .gallery-stage { inset: 0; top: 0; width: 100%; height: 100%; max-height: 100%; aspect-ratio: auto; transform: none; }
  .gallery-background-default { display: none; }
  .gallery-background-portrait { display: block; }
  .room-viewport.perspective-gallery .artwork-slot > .museum-radar { left: var(--portrait-radar-x); top: var(--portrait-radar-y); }
  .room-viewport.perspective-gallery .room-navigation { min-width: 32px; padding: 8px 5px; gap: 3px; }
  .room-viewport.perspective-gallery .room-navigation.previous { left: 4px; }
  .room-viewport.perspective-gallery .room-navigation.next { right: 4px; }
  .room-viewport.perspective-gallery .room-navigation b { font-size: 17px; }
  .room-viewport.perspective-gallery .room-navigation span { font-size: 5px; letter-spacing: .16em; }
  .room-viewport.is-theater .room-ambience { display: none; }
  .room-viewport.is-theater .theater-stage,
  .museum-shell.header-minimized .room-viewport.is-theater .theater-stage { inset: auto 0; top: 50%; width: 100vw; height: auto; margin: 0; aspect-ratio: 1278 / 2124; transform: translateY(-50%); }
  .theater-background-default { display: none; }
  .theater-background-portrait { display: block; object-fit: fill; }
  .room-viewport.is-theater .video-stage { left: 24.96%; top: 34.37%; width: 51.64%; height: 17%; }
  .room-viewport.is-theater .theater-radar { left: 76.5%; top: 50.2%; }
  .room-viewport.is-theater .fullscreen-control { left: 59.8%; top: 51.65%; padding: 5px 7px; font-size: 6px; }
  .room-viewport.is-theater .room-navigation { min-width: 32px; padding: 8px 5px; gap: 3px; }
  .room-viewport.is-theater .room-navigation.previous { left: 4px; }
  .room-viewport.is-theater .room-navigation.next { right: 4px; }
  .room-viewport.is-theater .room-navigation b { font-size: 17px; }
  .room-viewport.is-theater .room-navigation span { font-size: 5px; letter-spacing: .16em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .radar-ring { opacity: .75; transform: none; }
  .room-mount.is-leaving, .room-mount.is-entering { transform: none; filter: none; }
}