/* Values are the Figma artboard's (1512 × 982), anchored to the nearest viewport edge. */
:root {
  --veil: rgba(0, 0, 0, 0.5);
  --veil-soft: rgba(0, 0, 0, 0.2);
  --chip: rgba(217, 217, 217, 0.2);
  --white: #fff;
  --panel-dark: rgba(0, 0, 0, 0.4);
  --panel-light: rgba(255, 255, 255, 0.15); /* Figma 2140:1810 */
  --poppins: "Poppins", system-ui, sans-serif;
  --sf: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif; /* Inter: the SF Pro stand-in on Windows/Linux */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0d0c; color: var(--white); font-family: var(--sf); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible, a:focus-visible, select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
img { display: block; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.tour { position: fixed; inset: 0; overflow: hidden; }
/* Figma crops the aerial photo to 203% × 156.5% of the frame, offset −27% / −24%. */
.tour__bg { position: absolute; inset: 0; background: #1f2a22 url("../assets/aerial-bg.jpg") no-repeat; background-size: 203.28% 156.5%; background-position: 26.31% 42.53%; }

.book-now { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 152px; height: 41px; background: var(--veil); border-radius: 0 0 10px 10px; display: grid; place-items: center; }
.book-now img { width: 90.7px; height: 9.1px; transform: translate(0.93px, -0.76px); } /* Figma lettering at 711.59 / 15.19 */

.brand { position: absolute; left: 112.9px; top: 24px; width: 245.2px; height: 110.3px; overflow: hidden; }
.brand img { position: absolute; left: 0; top: -55.14%; width: 100%; height: 222.37%; object-fit: cover; }
.info-btn { position: absolute; left: 213px; top: 146.1px; width: 45px; height: 45px; }
.info-btn img { width: 100%; height: 100%; }

.scene-title { position: absolute; top: 55px; left: 50%; transform: translateX(calc(-50% + 0.5px)); text-align: center; font-family: var(--poppins); font-size: 12px; line-height: 1.5; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); white-space: nowrap; }
.scene-title p { margin: 0; }
.scene-title__name { font-weight: 600; }

.tool-rail { position: absolute; top: 40px; right: 121.8px; width: 60.2px; height: 155px; border-radius: 50px; background: var(--veil); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); display: flex; flex-direction: column; justify-content: space-between; align-items: center; padding: 9px 0 10px; }
.tool-rail button { width: 41px; height: 41px; display: grid; place-items: center; border-radius: 50%; transition: background 160ms var(--ease); }
.tool-rail img { width: 41px; height: 41px; }

.tour-hotspot { position: absolute; left: 334.6px; top: 511px; width: 60px; height: 60px; border-radius: 30px; background: var(--veil); padding: 11px 9px; transition: transform 200ms var(--ease); }
.tour-hotspot img { width: 42.2px; height: 38.2px; }

.bottom-menu { position: absolute; left: 50%; bottom: 43.65px; transform: translateX(calc(-50% - 0.5px)); height: 60px; padding: 0 75px; display: flex; gap: 30px; align-items: center; border-radius: 50px; background: var(--veil); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.bottom-menu button + button, .bottom-menu button + a { padding-left: 29px; } /* Figma 1734:380: the second label sits 29 px in */
.bottom-menu button, .bottom-menu a { place-items: start !important; padding: 19px 0 0 24px; box-sizing: border-box; height: 60px; min-width: 90px; display: grid; place-items: center; color: inherit; text-decoration: none; font-family: var(--poppins); font-weight: 600; font-size: 14px; }
.page-toast { position: absolute; left: 50%; bottom: 120px; z-index: 30; transform: translate(-50%, 8px); padding: 9px 16px; border-radius: 30px; background: rgba(0, 0, 0, 0.65); color: #fff; font-size: 12px; opacity: 0; transition: opacity 200ms, transform 200ms; pointer-events: none; max-width: calc(100vw - 32px); text-align: center; }
.page-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.powered { position: absolute; left: 120px; bottom: 33px; width: 174px; text-align: center; }
.powered p { margin: 0 0 0 64px; width: 62px; line-height: 15px; font-family: var(--poppins); font-weight: 600; font-size: 10px; text-shadow: 0 0 5px rgba(0, 0, 0, 0.45); }
.powered img { width: 174px; height: 35px; object-fit: cover; filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.45)); }

.round-btn { position: absolute; right: 122px; width: 41px; height: 41px; border-radius: 50%; background: var(--veil); display: grid; place-items: center; transition: background 160ms var(--ease); }
.round-btn--settings { bottom: 82px; }
.round-btn--settings img { width: 25.8px; height: 25.8px; transform: translate(0.61px, 0.61px); } /* Figma inset 8.2px */
.round-btn--layout { bottom: 33px; }
.round-btn--layout img { width: 20px; height: 20px; }

/* ---------- dollhouse glass panel ---------- */
.dh-panel { --w: min(1000px, calc(100vw - 48px)); --h: min(600px, calc(100vh - 140px)); position: absolute; left: 50%; top: 50%; width: var(--w); height: var(--h); transform: translate(-50%, -50%); border-radius: 20px; z-index: 5; transition: width 520ms var(--ease), height 520ms var(--ease), opacity 360ms var(--ease), transform 520ms var(--ease); }
.dh-panel[hidden] { display: block; visibility: hidden; opacity: 0; transform: translate(-50%, -47%) scale(0.98); pointer-events: none; }
.dh-panel.is-full { --w: min(1460px, calc(100vw - 52px)); --h: min(900px, calc(100vh - 82px)); }
.dh-panel__glass { position: absolute; inset: 0; border-radius: inherit; background: var(--panel-dark); transition: background 360ms var(--ease); } /* Figma 1734:603: flat, no blur */
.dh-panel.is-light .dh-panel__glass { background: var(--panel-light); }
.dh-stage, .dh-hotspots { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.dh-stage canvas { display: block; width: 100%; height: 100%; cursor: grab; }
.dh-stage canvas:active { cursor: grabbing; }
.dh-hotspots { pointer-events: none; }

.dh-hotspot, .dh-pin { position: absolute; left: 0; top: 0; pointer-events: auto; opacity: 0; visibility: hidden; transition: opacity 360ms var(--ease), visibility 360ms; }
.dh-hotspot.is-on, .dh-pin.is-on { opacity: 1; visibility: visible; transition-delay: 500ms; }
/* Figma 1734:621: 60 px property-logo hotspots on a 50 % black disc. */
.dh-hotspot { width: 60px; height: 60px; border-radius: 30px; background: rgba(0, 0, 0, 0.5); padding: 11px 9px; }
.dh-hotspot img { display: block; width: 42.24px; height: 38.19px; }
.dh-panel.is-hotspots-off .dh-hotspot { opacity: 0; visibility: hidden; transition-delay: 0ms; }
.dh-pin { width: 36px; height: 47px; }
.dh-pin__icon { position: absolute; inset: 0; background: no-repeat center/contain url("../assets/pin-here.svg"); } /* Figma 1786:804 */

.dh-villa { position: absolute; left: 28px; top: 24px; }
.dh-villa select { appearance: none; -webkit-appearance: none; height: 34px; padding: 0 34px 0 16px; border-radius: 34px; border: 0; background: var(--veil-soft) no-repeat right 12px center / 12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23fff' stroke-width='1.4' stroke-linecap='round'/%3E%3C/svg%3E"); color: #fff; font: 500 12px var(--sf); cursor: pointer; }
.dh-villa option { color: #111; }

.dh-status { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); margin: 0; font-size: 13px; letter-spacing: 0.2px; opacity: 0.85; pointer-events: none; }
.dh-status:empty { display: none; }

.dh-close { position: absolute; top: 27.9px; right: 37.7px; width: 24px; height: 24px; }
.dh-close img { position: absolute; inset: 1px; width: 22px; height: 22px; } /* Figma: 22 px X, 1 px in */

.dh-theme { position: absolute; left: 41.3px; bottom: 36.1px; width: 50px; padding: 6px 5px 5px; border-radius: 50px; background: var(--chip); display: flex; flex-direction: column; }
.dh-theme button { width: 40px; height: 40px; border-radius: 20px; padding: 8px; transition: background 200ms var(--ease); }
.dh-theme button[aria-checked="true"] { background: #000; }
.dh-panel.is-light .dh-theme button[aria-checked="true"] { background: #fff; }
.dh-panel.is-light .dh-theme button[aria-checked="true"] img { filter: invert(1); }
.dh-theme img { width: 24px; height: 24px; }

/* Floor names on the floor control (Figma prototype): "2nd Floor" above the bar, "1st Floor" below;
   the floor in focus is bright, the other dimmed. SF Pro Display Medium 16, white. */


.dh-full { position: absolute; right: 28.3px; bottom: 36.1px; width: 50px; height: 50px; padding: 13px; border-radius: 50px; background: var(--chip); }
.dh-full img, .dh-full svg { width: 24px; height: 24px; }
/* Reload (Figma 1981:1797): 15px above the fullscreen button. */
.dh-reload { position: absolute; right: 28.3px; bottom: 96.1px; width: 50px; height: 50px; padding: 13px; border-radius: 50px; background: var(--chip); }
.dh-reload img { width: 24px; height: 24px; }
/* Floor names beside the split floors (Figma "1st Floor" / "2nd Floor"): SF Pro Display Medium 16 white. */
.dh-panel.is-light .dh-floor-label { color: #1d1d1f; text-shadow: none; }
.dh-full__exit, .dh-panel.is-full .dh-full__enter { display: none; }
.dh-panel.is-full .dh-full__exit { display: block; }

.dh-toast { position: absolute; left: 50%; bottom: 90px; transform: translate(-50%, 8px); padding: 9px 16px; border-radius: 30px; background: rgba(0, 0, 0, 0.65); font-size: 12px; opacity: 0; transition: opacity 200ms, transform 200ms var(--ease); pointer-events: none; white-space: nowrap; }
.dh-toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) {
  .dh-panel, .dh-hotspot, .dh-pin, .dh-panel * { transition-duration: 1ms !important; transition-delay: 0ms !important; }
}
@media (max-width: 760px) {
  .brand { left: 16px; transform: scale(0.7); transform-origin: left top; }
  .info-btn { left: 16px; top: 104px; }
  .tool-rail, .round-btn { right: 16px; }
  .powered { display: none; }
  .scene-title { top: auto; bottom: 92px; font-size: 11px; }
  .bottom-menu { padding: 0 24px; gap: 8px; bottom: 24px; }
  .tour-hotspot { left: 40%; }
  .dh-panel { --w: calc(100vw - 24px); --h: calc(100vh - 220px); }
  .dh-theme { left: 16px; bottom: 16px; }
  .dh-full { right: 16px; bottom: 16px; }
}

/* Expanded dollhouse takes the stage: page UI steps back. */
.tour:has(.dh-panel.is-full:not([hidden])) > :not(.dh-panel):not(.tour__bg) { opacity: 0; pointer-events: none; transition: opacity 300ms var(--ease); }
.dh-panel.is-full { z-index: 20; }

/* ---------- Ren's floorplan controls (Figma page 1734:168, 4 Nov) ---------- */
/* Popup offsets are Figma's 1000 x 600 frame; fullscreen (.is-full) uses its 1460 x 900 frame. */
.dh-help { position: absolute; left: 41px; bottom: 268px; width: 50px; height: 50px; border-radius: 50px; background: var(--chip); color: #fff; font: 510 20px/24px var(--sf); }
.dh-hs { position: absolute; left: 41.3px; bottom: 137.1px; width: 50px; padding: 4px 5px 5px; border-radius: 50px; background: rgba(255, 255, 255, 0.2); display: flex; flex-direction: column; align-items: center; }
.dh-hs__icon { position: relative; width: 40px; height: 32px; }
.dh-hs__icon img { position: absolute; left: 9px; top: 6px; width: 22px; height: 19.9px; }
.dh-hs button { width: 40px; height: 40px; border-radius: 20px; color: #fff; font: 500 11px var(--sf); letter-spacing: 0.44px; transition: background 220ms var(--ease), color 220ms var(--ease); }
.dh-hs button[aria-checked="true"] { background: #000; }
.dh-panel.is-light .dh-hs button[aria-checked="true"] { background: #fff; color: #1c1c1c; }

.dh-fs { position: absolute; right: 32.8px; top: calc(50% - 139.2px); width: 50px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.dh-fs__label { padding: 0; border: 0; background: none; color: #fff; font: 500 16px/19px var(--sf); white-space: nowrap; cursor: pointer; }
.dh-fs__pill { position: relative; width: 50px; height: 210px; flex: none; border-radius: 50px; background: rgba(255, 255, 255, 0.2); }
.dh-fs__step { position: absolute; left: 5px; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; transition: background 160ms var(--ease), opacity 160ms; }
.dh-fs__step img { width: 22px; height: 22px; }
.dh-fs__step:disabled { cursor: default; } /* Figma shows no dimmed state */
.dh-fs__up { top: 5px; }
.dh-fs__down { top: 165px; }
.dh-fs__rail { position: absolute; left: 0; right: 0; top: 51px; height: 108px; cursor: pointer; touch-action: none; outline: none; }
.dh-fs__line { position: absolute; left: 24.5px; top: 5px; width: 1px; height: 98px; background: rgba(255, 255, 255, 0.45); transition: background 300ms var(--ease); }
.dh-fs.is-all .dh-fs__line { background: rgba(255, 255, 255, 0.8); }
.dh-fs__ticks i { position: absolute; left: 25px; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: rgba(255, 255, 255, 0.75); }
.dh-fs.is-all .dh-fs__ticks i { background: #fff; }
.dh-fs__rail.is-dense .dh-fs__ticks i { width: 3px; height: 3px; margin: -1.5px 0 0 -1.5px; }
.dh-fs__thumb { position: absolute; left: 10px; top: 5px; width: 30px; height: 30px; margin-top: -15px; border-radius: 15px; background: #000; color: #fff; display: grid; place-items: center; font: 510 13px var(--sf); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22); transition: top 450ms var(--ease), opacity 250ms var(--ease), transform 250ms var(--ease); }
.dh-fs.is-all .dh-fs__thumb { opacity: 0; transform: scale(0.6); }
.dh-fs__rail:focus-visible .dh-fs__thumb { box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(0, 0, 0, 0.22); }
.dh-panel.is-light .dh-fs__thumb { background: #fff; color: #1c1c1c; }
.dh-fs__count { margin: 0; color: #9d9d9d; font: 300 13px var(--sf); white-space: nowrap; }
.dh-panel.is-light .dh-fs__count { color: #727272; }

.dh-zoom { --k: 0; position: absolute; left: 50%; bottom: 36.1px; transform: translateX(-50%); width: 440px; max-width: calc(100% - 300px); height: 50px; padding: 0 8px 0 5px; display: flex; align-items: center; gap: 4px; border-radius: 50px; background: rgba(255, 255, 255, 0.2); }
.dh-zoom button { flex: none; width: 40px; height: 40px; border-radius: 20px; display: grid; place-items: center; transition: background 160ms var(--ease), opacity 160ms; }
.dh-zoom button:disabled { cursor: default; } /* Figma shows no dimmed state */
.dh-zoom button img { width: 22px; height: 22px; }
.dh-zoom__track { position: relative; flex: 1; min-width: 0; height: 40px; }
.dh-zoom__rail, .dh-zoom__level { position: absolute; left: 6px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; }
.dh-zoom__rail { right: 6px; background: rgba(255, 255, 255, 0.3); }
.dh-zoom__level { width: calc((100% - 12px) * var(--k)); background: #fff; transition: width 140ms linear; }
.dh-zoom__thumb { position: absolute; left: calc(6px + (100% - 12px) * var(--k)); top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28); transition: left 140ms linear; pointer-events: none; }
.dh-zoom input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dh-zoom input:focus-visible ~ .dh-zoom__thumb, .dh-zoom__track:has(input:focus-visible) .dh-zoom__thumb { box-shadow: 0 0 0 2px #000, 0 0 0 4px #fff; }
.dh-zoom__div { flex: none; width: 1px; height: 20px; background: rgba(255, 255, 255, 0.3); }
.dh-zoom__value { flex: none; width: 52px; text-align: center; color: #fff; font: 500 13px var(--sf); }

/* Controls guide (Figma 2154:3160): Loading, and the Overlay that Help opens (Dark / Light). */
.dh-guide { width: 536px; padding: 14px 16px 16px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 16px; background: rgba(0, 0, 0, 0.32); display: flex; flex-direction: column; align-items: center; gap: 12px; color: #fff; }
.dh-guide__title { margin: 0; font: 500 11px/14px var(--sf); letter-spacing: 0.22px; color: rgba(255, 255, 255, 0.56); }
.dh-guide__row { width: 100%; display: flex; align-items: center; }
.dh-guide__item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; }
.dh-guide__glyph { position: relative; width: 36px; height: 36px; margin-bottom: 8px; }
.dh-guide__glyph img { position: absolute; left: 0; top: 0; height: 36px; width: auto; }
.dh-guide__glyph.g-rotate img { left: -0.6px; }
.dh-guide__item b { font: 500 12px/16px var(--sf); color: rgba(255, 255, 255, 0.96); margin-bottom: 2px; }
.dh-guide__item span:last-child { font: 400 11px/14px var(--sf); color: rgba(255, 255, 255, 0.6); }
.dh-guide__div { flex: none; width: 1px; height: 44px; background: rgba(255, 255, 255, 0.1); }
.dh-guide img.is-light { display: none; }
.dh-guide--overlay { position: absolute; left: 50%; top: 50%; z-index: 3; padding: 16px 16px 18px; border-color: rgba(255, 255, 255, 0.18); border-radius: 20px; background: rgba(10, 10, 13, 0.78); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transform: translate(-50%, -50%); transition: opacity 260ms var(--ease), transform 260ms var(--ease), visibility 260ms; }
.dh-guide--overlay[hidden] { display: flex; opacity: 0; visibility: hidden; pointer-events: none; }
.dh-guide__close { position: absolute; top: 11px; right: 13px; width: 20px; height: 20px; }
.dh-guide__close img { width: 20px; height: 20px; }
.dh-panel.is-light .dh-guide--overlay { border-color: rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.86); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); }
.dh-panel.is-light .dh-guide--overlay .dh-guide__title { color: rgba(15, 15, 18, 0.56); }
.dh-panel.is-light .dh-guide--overlay b { color: rgba(15, 15, 18, 0.96); }
.dh-panel.is-light .dh-guide--overlay .dh-guide__item span:last-child { color: rgba(15, 15, 18, 0.6); }
.dh-panel.is-light .dh-guide--overlay .dh-guide__div { background: rgba(15, 15, 18, 0.1); }
.dh-panel.is-light .dh-guide--overlay img.is-light { display: block; }
.dh-panel.is-light .dh-guide--overlay img.is-dark { display: none; }

/* Loading screen (Figma 2137:2352): centred status, determinate progress, the guide below. */
.dh-loading { position: absolute; inset: 0; z-index: 2; border-radius: inherit; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 300ms var(--ease), visibility 300ms; }
.dh-panel.is-loading .dh-loading { opacity: 1; visibility: visible; transition: none; }
.dh-loading__status { position: absolute; left: 50%; top: calc(50% - 87.15px); transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; }
.dh-loading__logo { width: 34px; height: 30.7px; margin-bottom: 20px; }
.dh-loading__title { margin: 0 0 6px; font: 500 18px var(--sf); white-space: nowrap; }
.dh-loading__sub { margin: 0 0 24px; font: 300 13px var(--sf); color: rgba(255, 255, 255, 0.72); white-space: pre; }
.dh-progress { width: 240px; display: flex; flex-direction: column; gap: 8px; }
.dh-progress__track { height: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.dh-progress__fill { width: 8%; height: 2px; background: #fff; transition: width 1800ms cubic-bezier(0.42, 0, 0.58, 1); } /* Figma 2137:2350: Smart Animate 1.8 s ease-in-out */
.dh-progress__meta { display: flex; justify-content: space-between; font: 300 12px var(--sf); color: rgba(255, 255, 255, 0.72); }
.dh-progress__pct { font-weight: 510; color: #fff; }
.dh-guide--loading { position: absolute; left: 50%; top: calc(50% + 24px); transform: translateX(-50%); }
/* While loading only the close button shows; the viewer fades in when it is ready (Figma: Dissolve). */
.dh-ctl, .dh-theme, .dh-reload, .dh-full, .dh-villa, .dh-stage, .dh-hotspots { transition: opacity 360ms var(--ease), visibility 360ms; }
.dh-panel.is-loading :is(.dh-ctl, .dh-theme, .dh-reload, .dh-full, .dh-villa, .dh-stage, .dh-hotspots, .dh-status) { opacity: 0; visibility: hidden; transition: none; }

.dh-panel.is-full .dh-help { left: 19px; bottom: 264px; }
.dh-panel.is-full .dh-hs { left: 18.9px; bottom: 133px; }
.dh-panel.is-full .dh-theme { left: 18.9px; bottom: 32px; }
.dh-panel.is-full :is(.dh-full, .dh-reload) { right: 21px; }
.dh-panel.is-full .dh-fs { right: 25.5px; } /* Figma 2143:2380: pill at 1384.5 */
.dh-panel.is-full .dh-full { bottom: 39.85px; }
.dh-panel.is-full .dh-reload { bottom: 104.16px; }
.dh-panel.is-full .dh-zoom { bottom: 39.8px; transform: translateX(calc(-50% - 2px)); } /* Figma x 508 */
.dh-panel.is-full .dh-close { top: 32px; right: 34px; }

/* Phones: the controls hug the panel edges (after the base rules above, so these win). */
@media (max-width: 760px) {
  .dh-reload { right: 16px; bottom: 76px; }
  .dh-hs { left: 16px; bottom: 117px; }
  .dh-help { left: 16px; bottom: 248px; }
  .dh-fs { right: 16px; }
  .dh-zoom { width: calc(100% - 148px); bottom: 16px; }
  .dh-zoom__div, .dh-zoom__value { display: none; }
  .dh-guide { width: calc(100% - 24px); }
  .dh-zoom { max-width: none; }
}

/* Round 4 (Figma Glass effect: frost 10 on the panel, frost 4 on its chips; hotspots OFF dims the logo). */
.dh-panel__glass { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
.dh-help, .dh-hs, .dh-fs__pill, .dh-zoom, .dh-reload, .dh-full, .dh-theme { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.dh-panel.is-hotspots-off .dh-hs__icon img { opacity: 0.4; }
.dh-fs__rail:focus-visible { outline: none; }
.dh-zoom.is-dragging .dh-zoom__level, .dh-zoom.is-dragging .dh-zoom__thumb { transition: none; } /* the bar tracks the pointer exactly while dragged */