:root { --font-heading: "Sora", system-ui, sans-serif; --font-body: "Outfit", system-ui, sans-serif; }
  html, body { margin: 0; height: 100%; overflow: hidden; background: var(--color-text); color: var(--color-bg); font-family: var(--font-body); font-weight: 300; }
  a { color: var(--color-bg); text-decoration: none; }
  a:hover { color: #079FFC; }
  ::selection { background: var(--color-bg); color: var(--color-text); }
  :focus-visible { outline: 2px solid #079FFC; outline-offset: 3px; }
  pano-view { width: 100%; height: 100%; }
  pano-view:not(:defined) { background: color-mix(in srgb, var(--color-text) 88%, #000); }
  [data-arrow] { transition: background 240ms ease, color 240ms ease, transform 300ms cubic-bezier(.22,.61,.36,1); }
  [data-arrow]:hover { background: var(--color-bg) !important; color: var(--color-text) !important; }
  [data-arrow][data-back]:hover { transform: translateX(-3px); }
  [data-arrow][data-fwd]:hover { transform: translateX(3px); }
  [data-dot] { transition: opacity 300ms ease, transform 300ms cubic-bezier(.22,.61,.36,1); }
  [data-dot]:hover { opacity: 1 !important; transform: scale(1.12); }
  [data-cta] { transition: background 240ms ease, color 240ms ease; }
  [data-cta]:hover { background: var(--color-bg) !important; color: var(--color-text) !important; }
  [data-rail] { scrollbar-width: none; }
  [data-rail]::-webkit-scrollbar { display: none; }
  [data-scrollarea] { scrollbar-width: thin; scrollbar-color: rgba(243,242,242,0.28) transparent; }
  [data-scrollarea]::-webkit-scrollbar { width: 5px; }
  [data-scrollarea]::-webkit-scrollbar-thumb { background: rgba(243,242,242,0.28); }
  @media (max-width: 820px) {
    [data-catnav] { display: none !important; }
    [data-dock] { width: clamp(222px, 36vw, 264px) !important; }
  }
  @media (max-width: 560px) {
    [data-dock] { left: 0; width: auto !important; top: auto; height: auto; background: rgba(32,30,29,0.82) !important; border-top: 2px solid rgba(243,242,242,0.26); padding-top: 20px !important; }
  }
  @media (max-width: 560px) {
    /* Beating the element's own inline top/bottom, which a plain rule cannot. */
    [data-dock] { top: auto !important; height: auto !important; left: 0 !important; }
    /* The dock now sits where the hint used to be. */
    [data-hint] { display: none !important; }
  }