:root {
  --casa-cream: #f5e1c0;
  --casa-gold: #c89145;
  --casa-copper: #b78f61;
  --casa-taupe: #d2c1af;
  --casa-brown: #6f5132;
  --casa-wine: #290b00;
  --casa-white: #fffaf1;
  --glass: rgba(41, 11, 0, .82);
  --shadow: 0 16px 48px rgba(41, 11, 0, .28);
  /* ===== Bề mặt gold ánh kim dùng chung ===== */
  --gold-surface:
    linear-gradient(125deg,
      rgba(255,240,205,0) 10%, rgba(255,240,205,.18) 17%, rgba(255,240,205,0) 27%,
      rgba(255,236,198,0) 47%, rgba(255,236,198,.13) 57%, rgba(255,236,198,0) 68%,
      rgba(255,240,205,0) 82%, rgba(255,240,205,.10) 88%, rgba(255,240,205,0) 95%),
    linear-gradient(160deg, #bd8735 0%, #a87528 42%, #8f6220 72%, #714d18 100%);
  --gold-border: rgba(255,226,170,.30);
  --gold-shadow:
    0 10px 30px rgba(70,40,10,.45),
    inset 0 1px 0 rgba(255,242,210,.55),
    inset 0 0 0 1px rgba(255,226,170,.20);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body {
  color: var(--casa-wine);
  background: #080300;
  font-family: "Playfair Display", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
button, a { font: inherit; }
button { color: inherit; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

#pano { position: absolute; inset: 0; overflow: hidden; }
#pano::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(41,11,0,.12), transparent 24%, transparent 72%, rgba(41,11,0,.28));
}

.scene-title {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; justify-content: center;
  width: 100%; height: 130px; min-width: 0; max-width: none; padding: 0 24px 16px;
  transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  border: 0; border-radius: 0;
  color: #e8cf91;
  background: linear-gradient(180deg,
    rgba(22,10,3,0) 0%,
    rgba(22,10,3,.08) 18%,
    rgba(25,11,3,.38) 48%,
    rgba(20,8,2,.78) 72%,
    rgba(13,5,1,.97) 100%);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  font-size: 15px; font-style: normal; font-weight: 500; letter-spacing: .02em; text-align: center;
  text-shadow: 0 2px 8px rgba(0,0,0,.72);
}
.scene-title::before {
  content: ""; position: absolute; left: 22%; right: 22%; bottom: 45px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(194,147,67,.55) 20%, rgba(194,147,67,.55) 80%, transparent);
}
.scene-title::after {
  content: ""; position: absolute; left: 50%; bottom: 9px; width: 54px; height: 1px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, #d9ac55 25%, #f1d58e 50%, #d9ac55 75%, transparent);
  box-shadow: 0 0 6px rgba(218,173,87,.34);
}
.scene-title:empty { display: none; }

/* Casa Luna navigation */
.tour-navigation {
  position: fixed; z-index: 1100; left: 10px; top: 50%; bottom: auto;
  width: min(180px, calc(100vw - 28px)); padding-top: 0;
  transform: translateY(-50%);
}
.tour-menu {
  position: relative; isolation: isolate; display: flex; flex-direction: column; gap: 6px;
  align-items: stretch; width: 100%; height: auto; margin: 0; padding: 10px;
  overflow: hidden; border: 1px solid var(--gold-border); border-radius: 24px;
  background: var(--gold-surface);
  box-shadow: var(--gold-shadow);
  transition: transform .48s cubic-bezier(.22,.8,.2,1), opacity .32s ease;
}
.tour-menu::before {
  display: none;
}
.tour-menu::after {
  display: none;
}
.tour-menu__logo {
  position: relative; z-index: 2; display: flex; height: 75px; flex: 0 0 75px; flex-direction: column;
  align-items: center; justify-content: center; gap: 0; padding: 0;
  color: #a5652b; text-decoration: none;
}
.tour-menu__logo::before {
  display: none;
}
.tour-menu__logo::after {
  display: none;
}
.tour-menu__logo img {
  position: static; z-index: 1; width: 82px; height: 74px;
  transform: none; object-fit: contain; filter: drop-shadow(0 2px 5px rgba(40,22,6,.5));
}
.tour-menu__logo span { display: none; }
.tour-menu__item {
  position: relative; z-index: 2; display: flex; min-width: 0; width: 100%; height: 38px; flex: 0 0 38px;
  flex-direction: row; align-items: center; justify-content: flex-start; gap: 5px;
  padding: 0 8px; overflow: hidden; border: 1px solid rgba(255,234,198,.32); border-radius: 12px;
  color: #fff7e6; text-shadow: 0 1px 2px rgba(58,30,10,.4);
  background: rgba(255,240,214,.16); box-shadow: inset 0 1px 0 rgba(255,248,232,.28);
  text-decoration: none; text-align: left; cursor: pointer;
  transition: color .28s ease, transform .28s ease, background .28s ease, box-shadow .28s ease, filter .28s ease;
}
.tour-menu__item img {
  position: relative; z-index: 1; display: block; flex: 0 0 auto; width: 20px; height: 20px; object-fit: contain;
  filter: brightness(0) saturate(100%) invert(98%) sepia(17%) saturate(668%) hue-rotate(325deg) brightness(108%) contrast(101%);
  transition: filter .25s ease, transform .25s ease;
}
.tour-menu__item--amenities img { width: 21px; }
.tour-menu__item span { position: relative; z-index: 1; min-width: 0; font-size: 12.7px; font-weight: 700; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; text-transform: uppercase; text-shadow: none; transition: letter-spacing .28s ease; -webkit-text-stroke: .08px currentColor; }
.tour-menu__item--amenities span { font-size: 11.1px; line-height: 1.02; letter-spacing: -.025em; white-space: nowrap; }
.tour-menu__item:not(:last-child)::before { display: none; }
.tour-menu__item.is-active {
  color: #fffdf5;
  background: linear-gradient(
    105deg,
    #a95524 0%,
    #c98143 44%,
    #e0b171 72%,
    #bc7136 100%
  );
  box-shadow:
    0 6px 16px rgba(132, 70, 28, .24),
    inset 0 1px 0 rgba(255, 240, 205, .46);
  text-shadow: 0 1px 3px rgba(83, 33, 10, .42);
}
.tour-menu__item.is-active img {
  filter:
    brightness(0) saturate(100%)
    invert(98%) sepia(17%) saturate(668%)
    hue-rotate(325deg) brightness(108%) contrast(101%);
}
.tour-menu__item:hover {
  color: #fffdf5; transform: translateX(3px);
  background: rgba(255,245,224,.30); border-color: rgba(255,240,210,.55);
  box-shadow: 0 7px 16px rgba(45,24,8,.22), inset 0 1px 0 rgba(255,250,236,.35);
}
/* Active là gradient TĨNH — tắt mọi hiệu ứng ánh sáng chạy nếu dự án cũ có */
.tour-menu__item.is-active::before,
.tour-menu__item.is-active::after {
  display: none;
}
.tour-menu__item.is-active:hover {
  color: #fffdf5;
  transform: translateX(2px);
  background: linear-gradient(
    105deg,
    #a95524 0%,
    #c98143 44%,
    #e0b171 72%,
    #bc7136 100%
  );
  box-shadow:
    0 8px 19px rgba(132, 70, 28, .29),
    inset 0 1px 0 rgba(255, 240, 205, .5);
}
.tour-menu__item:hover img { transform: translateX(2px) scale(1.08); filter: brightness(0) saturate(100%) invert(98%) sepia(17%) saturate(668%) hue-rotate(325deg) brightness(112%) contrast(101%); }
.tour-menu__item:hover span { letter-spacing: .012em; }
.tour-menu__item--amenities:hover span { letter-spacing: -.025em; }

.tour-menu-toggle {
  display: flex; align-items: center; justify-content: center; width: calc(100% - 20px); height: 27px;
  margin: 7px auto 0; padding: 0 10px; border: 1px solid var(--gold-border); border-radius: 999px;
  color: #fff8ea; text-shadow: 0 1px 3px rgba(56,30,10,.55);
  background: var(--gold-surface); box-shadow: var(--gold-shadow);
  font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer;
  transition: transform .36s ease, width .36s ease, background-color .25s ease, box-shadow .25s ease;
}
.tour-menu-toggle:hover {
  border-color: #ffe9c0;
  box-shadow: 0 12px 24px rgba(46,25,8,.4), inset 0 1px 0 rgba(255,242,210,.55);
  transform: translateY(-1px);
}
.tour-menu-toggle__show { display: none; }
.tour-navigation.is-collapsed .tour-menu {
  position: absolute; left: 0; top: 0; opacity: 0; pointer-events: none;
  transform: translateX(calc(-100% - 24px));
}
.tour-navigation.is-collapsed .tour-menu-toggle {
  width: 92px; margin: 0 0 0 -18px; border-radius: 0 999px 999px 0;
  transform: none;
}
.tour-navigation.is-collapsed .tour-menu-toggle__hide { display: none; }
.tour-navigation.is-collapsed .tour-menu-toggle__show { display: inline; }

/* Utility buttons */
.utility-controls {
  position: fixed; z-index: 1001; top: max(18px, env(safe-area-inset-top)); right: 18px;
  display: flex; gap: 9px;
}
.utility-button {
  position: relative; width: 44px; height: 44px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(245,225,192,.7); color: var(--casa-cream); background: var(--glass);
  box-shadow: 0 8px 22px rgba(41,11,0,.24); cursor: pointer; transition: .25s ease;
}
.utility-button:hover, .utility-button.is-active { color: var(--casa-wine); background: var(--casa-cream); transform: translateY(-2px); }
.target-icon, .pause-icon, .fullscreen-icon { position: absolute; inset: 11px; }
.target-icon { border: 1.5px solid currentColor; border-radius: 50%; }
.target-icon::before, .target-icon::after { content: ""; position: absolute; background: currentColor; }
.target-icon::before { width: 28px; height: 1px; top: 9px; left: -4px; }
.target-icon::after { width: 1px; height: 28px; top: -4px; left: 9px; }
.pause-icon::before, .pause-icon::after { content: ""; position: absolute; top: 2px; width: 4px; height: 20px; border-radius: 2px; background: currentColor; }
.pause-icon::before { left: 5px; } .pause-icon::after { right: 5px; }
.utility-button:not(.is-active) .pause-icon::before { left: 5px; width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 16px solid currentColor; background: none; border-radius: 0; }
.utility-button:not(.is-active) .pause-icon::after { display: none; }
.fullscreen-icon { border: 2px solid currentColor; border-width: 2px 0 0 2px; }
.fullscreen-icon::before { content: ""; position: absolute; right: 0; bottom: 0; width: 9px; height: 9px; border: 2px solid currentColor; border-width: 0 2px 2px 0; }

/* Link hotspot */
.link-hotspot {
  --link-width: 190px; position: relative; width: var(--link-width); height: 42px;
  margin-left: -8px; margin-top: -21px; padding: 0; border: 0; background: none;
  color: var(--casa-brown); cursor: pointer; transform-origin: 8px 50%;
  filter: drop-shadow(0 5px 10px rgba(41,11,0,.22));
}
.link-hotspot__dot {
  position: absolute; z-index: 3; left: 0; top: 50%; width: 14px; height: 14px;
  border: 2px solid var(--casa-white); border-radius: 50%; transform: translateY(-50%);
  background: var(--casa-copper); box-shadow: 0 0 0 4px rgba(245,225,192,.25);
}
.link-hotspot__line {
  position: absolute; z-index: 1; left: 12px; top: 50%; width: 18px; height: 1px;
  background: linear-gradient(90deg, var(--casa-white), var(--casa-gold));
}
.link-hotspot__label {
  position: absolute; z-index: 2; left: 28px; top: 50%; max-width: 250px;
  padding: 8px 15px; border: 1px solid var(--casa-gold); border-radius: 999px;
  transform: translateY(-50%); overflow: hidden; white-space: nowrap;
  color: var(--casa-brown); background: rgba(255,250,241,.94); font-size: 11px; font-weight: 600;
}
.link-hotspot__label::after {
  content: ""; position: absolute; top: -60%; left: -45%; width: 30%; height: 220%;
  transform: rotate(18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation: linkShine 3s ease-in-out infinite;
}
.link-hotspot:hover { z-index: 20; }
.link-hotspot:hover .link-hotspot__label { color: var(--casa-wine); background: var(--casa-cream); }
.link-hotspot--left { margin-left: calc(var(--link-width) * -1 + 8px); transform-origin: calc(100% - 8px) 50%; }
.link-hotspot--left .link-hotspot__dot { left: auto; right: 0; }
.link-hotspot--left .link-hotspot__line { left: auto; right: 12px; }
.link-hotspot--left .link-hotspot__label { left: auto; right: 28px; }
@keyframes linkShine { 0%, 30% { left: -45%; } 65%, 100% { left: 120%; } }

/* Info hotspot */
.info-hotspot {
  --icon-size: 62px; position: relative; display: block; width: 0; height: 0;
  margin: 0; padding: 0; border: 0; background: none;
  filter: drop-shadow(0 6px 12px rgba(41,11,0,.23)); pointer-events: none;
}
.info-hotspot__label {
  position: absolute; z-index: 4; left: 0;
  bottom: calc(var(--icon-size) * .5 + 28px); max-width: 260px; transform: translateX(-50%);
  padding: 8px 17px; border: 1px solid var(--casa-gold); border-radius: 999px;
  color: var(--title-color, var(--casa-brown));
  background: var(--title-background, rgba(255,250,241,.95));
  font-size: var(--title-font-size, 11px); font-weight: 600;
  white-space: nowrap; transition: .25s ease; pointer-events: auto; cursor: pointer;
}
.info-hotspot__connector {
  position: absolute; z-index: 1; left: 0; bottom: calc(var(--icon-size) * .5);
  width: 1px; height: 28px; background: var(--casa-gold);
}
.info-hotspot__radar {
  position: absolute; z-index: 2; left: 0; top: 0; width: var(--icon-size); height: var(--icon-size);
  transform: translate(-50%, -50%); display: grid; place-items: center; border-radius: 50%;
  padding: 0; background: rgba(255,250,241,.94); border: 1px solid var(--casa-gold);
  pointer-events: auto; cursor: pointer;
}
.info-hotspot__radar::before, .info-hotspot__radar::after {
  content: ""; position: absolute; inset: -1px; border: 1px solid var(--casa-gold); border-radius: 50%;
  animation: radarPulse 2.5s ease-out infinite;
}
.info-hotspot__radar::after { animation-delay: 1.25s; }
.info-hotspot__icon { display: block; width: 82%; height: 82%; object-fit: contain; border-radius: 50%; }
.info-hotspot:hover { z-index: 20; }
.info-hotspot:hover .info-hotspot__label { filter: brightness(1.06); transform: translateX(-50%) translateY(-3px); }
@keyframes radarPulse { 0% { opacity: .8; transform: scale(.9); } 100% { opacity: 0; transform: scale(1.75); } }

/* Media modal */
.media-modal { position: fixed; z-index: 12000; inset: 0; display: grid; place-items: center; padding: 24px; visibility: hidden; opacity: 0; transition: .3s ease; }
.media-modal.is-open { visibility: visible; opacity: 1; }
.media-modal__backdrop { position: absolute; inset: 0; background: rgba(20,5,0,.78); backdrop-filter: blur(8px); }
.media-modal__dialog {
  position: relative; z-index: 1; width: min(1176px, 96vw); max-height: 96vh; overflow: auto;
  border: 1px solid rgba(200,145,69,.75); border-radius: 22px; background: var(--casa-white);
  box-shadow: 0 30px 90px rgba(0,0,0,.5); transform: translateY(18px) scale(.98); transition: .35s ease;
}
.media-modal.is-open .media-modal__dialog { transform: none; }
.media-modal__heading { min-height: 58px; padding: 11px 68px 10px 20px; border-bottom: 1px solid rgba(183,143,97,.3); }
.media-modal__heading h2 { margin: 0; color: var(--casa-wine); font-size: clamp(20px, 2vw, 28px); line-height: 1.25; }
.media-modal__close {
  position: absolute; z-index: 2; top: 9px; right: 13px; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--casa-copper); color: var(--casa-wine); background: transparent; font-size: 27px; line-height: 33px; cursor: pointer;
}
.media-modal__body { padding: 12px; }
.media-modal__body > img { display: block; width: 100%; max-height: calc(96vh - 84px); border-radius: 14px; object-fit: contain; background: #160700; }
.media-modal__body > iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; background: #160700; }
.media-modal__empty { min-height: 380px; display: grid; place-content: center; text-align: center; border-radius: 14px; color: var(--casa-cream); background: linear-gradient(135deg, var(--casa-wine), var(--casa-brown)); }
.media-modal__empty span { color: var(--casa-gold); font-size: 42px; }
.media-modal__empty p { margin: 12px 20px 0; color: var(--casa-cream); }
.media-modal__description { margin: 17px 8px 2px; color: var(--casa-brown); font-size: 16px; line-height: 1.7; }

/* Slider cho info hotspot có nhiều hình */
.media-slider { position: relative; overflow: hidden; border-radius: 14px; background: #160700; outline: none; }
.media-slider__viewport { overflow: hidden; touch-action: pan-y; }
.media-slider__track { display: flex; transition: transform .45s cubic-bezier(.22,.61,.36,1); }
.media-slider__slide { position: relative; flex: 0 0 100%; margin: 0; }
.media-slider__slide img { display: block; width: 100%; height: min(72vh, 760px); object-fit: contain; }
.media-slider__slide figcaption {
  position: absolute; right: 0; bottom: 0; left: 0; padding: 34px 18px 13px;
  color: #fff9eb; text-align: center; background: linear-gradient(transparent, rgba(31,10,2,.78));
}
.media-slider__nav {
  position: absolute; z-index: 2; top: 50%; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255,235,192,.75);
  border-radius: 50%; color: #fff8e7; background: rgba(48,17,5,.56); box-shadow: 0 7px 20px rgba(0,0,0,.25);
  font-family: Arial, sans-serif; font-size: 38px; line-height: 38px; cursor: pointer; transform: translateY(-50%); transition: .22s ease;
}
.media-slider__nav:hover { color: #4c1e0d; background: #f7dfae; transform: translateY(-50%) scale(1.06); }
.media-slider__nav--prev { left: 16px; }
.media-slider__nav--next { right: 16px; }
.media-slider__footer {
  position: absolute; z-index: 2; right: 0; bottom: 12px; left: 0; display: flex; align-items: center; justify-content: center; gap: 14px;
  pointer-events: none;
}
.media-slider__dots { display: flex; align-items: center; gap: 7px; pointer-events: auto; }
.media-slider__dot { width: 8px; height: 8px; padding: 0; border: 1px solid rgba(255,247,224,.9); border-radius: 50%; background: rgba(67,25,9,.5); cursor: pointer; transition: .22s ease; }
.media-slider__dot.is-active { width: 25px; border-radius: 999px; background: #f3d697; }
.media-slider__counter { min-width: 46px; color: #fff9e9; font-family: Arial, sans-serif; font-size: 12px; letter-spacing: .08em; text-shadow: 0 1px 4px #000; }

/* Coordinate helper */
.coordinate-panel {
  position: fixed; z-index: 3000; top: 76px; right: 18px; width: min(360px, calc(100vw - 36px));
  padding: 18px; border: 1px solid rgba(245,225,192,.55); border-radius: 16px;
  color: var(--casa-cream); background: var(--glass); box-shadow: var(--shadow);
  backdrop-filter: blur(16px); opacity: 0; visibility: hidden; transform: translateY(-10px); transition: .25s ease;
}
.coordinate-panel.is-open { opacity: 1; visibility: visible; transform: none; }
.coordinate-panel__heading { display: flex; align-items: center; justify-content: space-between; }
.coordinate-panel__heading strong { display: block; font-size: 21px; }
.coordinate-panel__eyebrow { color: var(--casa-gold); font-size: 10px; letter-spacing: .17em; text-transform: uppercase; }
.coordinate-panel__heading button { border: 0; color: var(--casa-cream); background: none; font-size: 28px; cursor: pointer; }
.coordinate-panel p { margin: 12px 0; color: rgba(245,225,192,.8); font-size: 13px; line-height: 1.5; }
.coordinate-readout { margin-top: 9px; padding: 10px 12px; border-radius: 9px; background: rgba(0,0,0,.25); }
.coordinate-readout span { display: block; margin-bottom: 5px; color: var(--casa-copper); font-size: 11px; }
.coordinate-readout code { color: #fff; font: 12px/1.5 Consolas, monospace; user-select: text; }
.coordinate-actions { display: flex; gap: 8px; margin: 12px 0 9px; }
.coordinate-actions button { flex: 1; padding: 9px; border: 1px solid var(--casa-gold); border-radius: 8px; color: var(--casa-wine); background: var(--casa-cream); font-size: 12px; cursor: pointer; }
.coordinate-panel small { color: rgba(245,225,192,.65); font-size: 10px; }
.coordinate-mode #pano { cursor: crosshair; }
.coordinate-mode #pano::before { content: ""; position: fixed; z-index: 999; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%,-50%); border: 1px solid var(--casa-cream); border-radius: 50%; pointer-events: none; }
.toast { position: fixed; z-index: 20000; left: 50%; top: 24px; transform: translate(-50%,-15px); padding: 10px 18px; border-radius: 999px; color: var(--casa-wine); background: var(--casa-cream); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transition: .25s ease; }
.toast.is-visible { opacity: 1; visibility: visible; transform: translate(-50%,0); }

@media (max-width: 680px) {
  .scene-title {
    top: auto; bottom: 0;
    width: 100%; height: 92px; min-width: 0; max-width: none; padding: 0 20px 13px;
    overflow: hidden; text-overflow: ellipsis; font-size: 12px; letter-spacing: .015em;
  }
  .scene-title::before { left: 12%; right: 12%; bottom: 36px; }
  .scene-title::after { bottom: 6px; width: 42px; }
  .tour-navigation {
    left: 8px; right: auto; top: 8px; bottom: auto;
    width: min(140px, calc(100vw - 16px)); padding-top: 0; transform: none;
  }
  .tour-menu {
    display: flex; width: 100%; height: auto; margin: 0; padding: 7px; gap: 5px; border-radius: 19px;
  }
  .tour-menu::before { display: none; }
  .tour-menu__logo { height: 52px; flex-basis: 52px; padding: 0; }
  .tour-menu__logo::before { display: none; }
  .tour-menu__logo img { position: static; width: 60px; height: 51px; max-height: none; transform: none; }
  .tour-menu__item { height: 33px; flex-basis: 33px; gap: 4px; padding: 0 6px; border-radius: 10px; }
  .tour-menu__item img { width: 16px; height: 16px; }
  .tour-menu__item--amenities img { width: 17px; }
  .tour-menu__item span { max-width: 100%; overflow: visible; font-size: 10.2px; font-weight: 700; line-height: 1; text-overflow: clip; white-space: nowrap; }
  .tour-menu__item--amenities span { font-size: 8.7px; line-height: .98; white-space: nowrap; }
  .tour-menu__item.is-active::after { display: none; }
  .tour-menu-toggle { width: calc(100% - 14px); height: 24px; margin-top: 5px; font-size: 9px; }
  .tour-navigation.is-collapsed .tour-menu-toggle { width: 82px; margin-left: -8px; }
  .utility-controls { top: 18px; right: 12px; gap: 7px; }
  .utility-button { width: 40px; height: 40px; }
  .target-icon, .pause-icon, .fullscreen-icon { inset: 9px; }
  .coordinate-panel { top: 124px; right: 12px; width: calc(100vw - 24px); }
  .link-hotspot { --link-width: 165px; transform: scale(.88); }
  .link-hotspot__label { font-size: 13px; }
  .info-hotspot { transform: scale(.86); }
  .info-hotspot__label { max-width: 220px; }
  .media-modal { padding: 10px; }
  .media-modal__dialog { width: 100%; max-height: 91vh; border-radius: 16px; }
  .media-modal__heading { min-height: 52px; padding: 10px 58px 9px 14px; }
  .media-modal__heading h2 { font-size: 19px; }
  .media-modal__body { padding: 8px; }
  .media-modal__empty { min-height: 270px; }
  .media-slider__slide img { height: min(68vh, 620px); }
  .media-slider__nav { width: 38px; height: 38px; font-size: 32px; line-height: 31px; }
  .media-slider__nav--prev { left: 8px; }
  .media-slider__nav--next { right: 8px; }
  .media-slider__footer { bottom: 9px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}