:root {
  color-scheme: dark;
  --rail: #07090c;
  --line: rgb(255 255 255 / 20%);
  font: 16px/1.4 ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, main, #route-root { width: 100%; height: 100%; margin: 0; }
body { overflow: hidden; color: #fff; background: #000; }
button, input { font: inherit; }

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.state-panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  gap: .75rem;
  padding: 1rem;
  background: #000;
  text-align: center;
}
.state-panel p { max-width: 40rem; margin: 0; color: #c8cdd2; }
.state-panel.error p { color: #ffd0ca; }
.spinner {
  width: 1.7rem;
  aspect-ratio: 1;
  margin: auto;
  border: 2px solid rgb(255 255 255 / 20%);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(1turn); } }

.viewer-shell,
.deepzoom-viewer,
.compare-shell,
.compare-stage {
  position: relative;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #000;
}

.deepzoom-viewer .navigator {
  top: .75rem !important;
  right: .75rem !important;
  border: 1px solid rgb(255 255 255 / 70%) !important;
  transition: opacity 420ms ease;
}
.astroview-navigator-idle .navigator { opacity: 0 !important; pointer-events: none; }
.viewer-controls {
  position: absolute;
  z-index: 10;
  top: .65rem;
  left: .65rem;
  display: flex;
  gap: .3rem;
  opacity: .36;
  transition: opacity 160ms ease;
}
.viewer-controls:hover, .viewer-controls:focus-within { opacity: .82; }
.viewer-controls button {
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  padding: 0;
  color: #fff;
  background: rgb(5 8 11 / 58%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: .3rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 38%);
  cursor: pointer;
  backdrop-filter: blur(5px);
}
.viewer-controls button:hover { background: rgb(24 29 34 / 88%); border-color: rgb(255 255 255 / 65%); }
.viewer-controls button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.viewer-controls svg { display: block; width: 1rem; height: 1rem; stroke: currentColor; }
.embed-popout {
  position: absolute;
  z-index: 12;
  right: .75rem;
  bottom: .75rem;
  display: grid;
  place-items: center;
  width: 2.15rem;
  height: 2.15rem;
  color: #fff;
  background: rgb(5 8 11 / 58%);
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: .3rem;
  box-shadow: 0 2px 10px rgb(0 0 0 / 38%);
  opacity: .36;
  transition: opacity 160ms ease, background-color 160ms ease, border-color 160ms ease;
  backdrop-filter: blur(5px);
}
.embed-popout:hover { color: #fff; background: rgb(24 29 34 / 88%); border-color: rgb(255 255 255 / 65%); opacity: .82; }
.embed-popout:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: .82; }
.embed-popout svg { display: block; width: 1rem; height: 1rem; stroke: currentColor; }
.viewer-status { display: none; }
.viewer-status.error {
  position: absolute;
  z-index: 20;
  left: 50%;
  bottom: 1rem;
  display: block;
  max-width: calc(100% - 2rem);
  margin: 0;
  padding: .5rem .75rem;
  color: #fff;
  background: rgb(120 20 20 / 90%);
  border-radius: .3rem;
  transform: translateX(-50%);
}

.image-caption {
  position: absolute;
  z-index: 8;
  left: clamp(1rem, 3.5vw, 3rem);
  bottom: clamp(1.25rem, 5vh, 3.5rem);
  max-width: min(46rem, calc(100% - 2rem));
  color: #fff;
  font-family: "Segoe UI Variable Display", "Segoe UI", ui-sans-serif, system-ui, sans-serif;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgb(0 0 0 / 90%));
}
.image-caption h1 {
  margin: 0;
  font-size: clamp(1.6rem, 4vw, 3.75rem);
  font-weight: 540;
  line-height: 1.02;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.image-caption p {
  max-width: 42rem;
  margin: .55rem 0 0;
  color: rgb(255 255 255 / 84%);
  font-size: clamp(.88rem, 1.55vw, 1.15rem);
  font-weight: 400;
  line-height: 1.35;
  text-wrap: pretty;
}

.gallery-shell {
  display: grid;
  grid-template-columns: clamp(5.25rem, 10vw, 8rem) minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}
.thumbnail-rail {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  min-width: 0;
  min-height: 0;
  padding: .5rem;
  overflow-x: hidden;
  overflow-y: auto;
  background: var(--rail);
  border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
.thumbnail {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  background: #000;
  border: 1px solid transparent;
  border-radius: .3rem;
  cursor: pointer;
  opacity: .64;
}
.thumbnail:hover { opacity: .9; }
.thumbnail.selected { border-color: #fff; opacity: 1; }
.thumbnail:focus-visible { outline: 2px solid #fff; outline-offset: 2px; opacity: 1; }
.thumbnail img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gallery-viewer { display: block; width: 100%; height: 100%; min-width: 0; border: 0; background: #000; }

.compare-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: var(--compare-fit, contain);
  user-select: none;
  pointer-events: none;
}
.compare-left { clip-path: inset(0 calc(100% - var(--position)) 0 0); }
.compare-divider {
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: var(--position);
  width: 2px;
  background: #fff;
  box-shadow: 0 0 0 1px rgb(0 0 0 / 60%);
  transform: translateX(-1px);
  pointer-events: none;
}
.compare-divider::after {
  content: "↔";
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 2.7rem;
  aspect-ratio: 1;
  color: #000;
  background: #fff;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  font-weight: 800;
  box-shadow: 0 3px 16px rgb(0 0 0 / 55%);
}
.compare-range { position: absolute; z-index: 3; inset: 0; width: 100%; height: 100%; margin: 0; opacity: .01; cursor: ew-resize; }
.compare-label {
  position: absolute;
  z-index: 2;
  top: .75rem;
  max-width: 42%;
  padding: .32rem .5rem;
  overflow: hidden;
  color: #fff;
  background: rgb(0 0 0 / 68%);
  border: 1px solid rgb(255 255 255 / 32%);
  border-radius: .25rem;
  font-size: clamp(.72rem, 1.5vw, .9rem);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compare-label.left { left: .75rem; }
.compare-label.right { right: .75rem; }

@media (max-width: 32rem) {
  .gallery-shell { grid-template-columns: 4.5rem minmax(0, 1fr); }
  .thumbnail-rail { gap: .35rem; padding: .35rem; }
  .image-caption { left: .9rem; bottom: 1rem; max-width: calc(100% - 1.8rem); }
}

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