.gallery[hidden], .gallery-section[hidden], .gallery-earth[hidden], .gallery-earth [hidden] {
  display: none !important;
}

.gallery-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
}

.gallery-toolbar .gallery-layout { margin: 0; }

.gallery-view {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  padding: 0;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--body-color);
  background: var(--body-bg);
  font: inherit;
  cursor: pointer;
  transition: border-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.gallery-view:hover { color: var(--accent-color); border-color: var(--accent-color); box-shadow: 0 2px 10px #4fb1ba18; }
.gallery-view__window { display: block; width: 22px; height: 22px; overflow: hidden; pointer-events: none; }
.gallery-view__track { display: flex; flex-direction: column; gap: 14px; transition: transform 380ms cubic-bezier(.22, 1, .36, 1); }
.gallery-view__track svg { display: block; width: 22px; height: 22px; flex: 0 0 22px; }
.gallery-view[data-view="earth"] .gallery-view__track { transform: translateY(-36px); }

.gallery-earth {
  position: relative;
  isolation: isolate;
  margin: 1.5rem 0 2rem;
  overflow: hidden;
  border: 1px solid #28424e;
  border-radius: 18px;
  color: #e1eeed;
  background: radial-gradient(ellipse at 50% 42%, #142e3b 0%, #091820 55%, #081219 100%);
  box-shadow: 0 16px 50px rgba(0, 0, 0, .13);
}

.gallery-earth__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.7rem 1.6rem 0;
}

.gallery-earth__eyebrow {
  margin: 0 0 .4rem;
  color: #9eb9bc;
  font-size: .58rem;
  letter-spacing: .17em;
  text-transform: uppercase;
}

.gallery-earth__header h2 { margin: 0; color: #e7f2ef; font-size: 1.45rem; letter-spacing: -.035em; }
.gallery-earth__count { color: #b5c9cc; font-size: .62rem; white-space: nowrap; }

.gallery-earth__stage {
  position: relative;
  height: clamp(340px, 42vw, 530px);
  width: 100%;
  overflow: hidden;
  background-image: radial-gradient(circle at 14% 24%, #709aa380 0 1px, transparent 1.5px), radial-gradient(circle at 81% 65%, #709aa350 0 1px, transparent 1.5px), radial-gradient(circle at 76% 18%, #709aa360 0 1px, transparent 1.5px), radial-gradient(circle at 22% 78%, #709aa350 0 1px, transparent 1.5px);
}

.gallery-earth__stage canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: grab; touch-action: none; }
.gallery-earth__stage canvas:active { cursor: grabbing; }
.gallery-earth__status { position: absolute; z-index: 5; left: 12%; right: 12%; top: 38%; padding: 1rem; border-radius: 10px; background: #0b1b26e8; color: #c6dedf; text-align: center; font-size: .85rem; }
.gallery-earth__markers, .gallery-earth__leaders { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.gallery-earth__leaders line { stroke: #b7e8db; stroke-width: 1; opacity: .65; }
.gallery-earth__leaders circle { fill: #e0c59a; stroke: #071921; stroke-width: 1; }

.gallery-earth .gallery-earth__pin {
  position: absolute;
  top: 0;
  left: 0;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 3px;
  border: 1px solid #e4e9d8;
  border-radius: 12px;
  background: #0b202a;
  box-shadow: 0 4px 15px #0008;
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  will-change: transform, opacity;
}
.gallery-earth .gallery-earth__pin.is-interactive { pointer-events: auto; }

.gallery-earth__pin img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 8px; pointer-events: none; }
.gallery-earth__pin span { position: absolute; bottom: calc(100% + 8px); left: 50%; width: max-content; max-width: 150px; padding: 5px 9px; border: 1px solid #4c737b; border-radius: 6px; transform: translateX(-50%); color: #ecf5f1; background: #0b202a; font-size: 11px; line-height: 1.3; opacity: 0; pointer-events: none; }
.gallery-earth__pin:hover, .gallery-earth__pin:focus-visible, .gallery-earth__pin.is-selected { z-index: 2; border-color: #7cf5dd; box-shadow: 0 0 0 3px #77dccb40, 0 4px 15px #0008; }
.gallery-earth__pin:hover span, .gallery-earth__pin:focus-visible span { opacity: 1; }

.gallery-earth__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; padding: 0 1.5rem 1.2rem; font-size: .63rem; color: #a7bec3; }
.gallery-earth__tools > div { display: flex; gap: .3rem; }
.gallery-earth__tools button, .gallery-earth__browse button {
  min-width: 36px;
  min-height: 36px;
  padding: .35rem .65rem;
  border: 1px solid #38535f;
  border-radius: 7px;
  font: inherit;
  color: #d4e7e6;
  background: #142b36;
  cursor: pointer;
}
.gallery-earth button:hover, .gallery-earth button[aria-pressed="true"] { background: #274954; }
.gallery-earth button:disabled { opacity: .45; cursor: default; }
.gallery-earth :focus-visible, .gallery-view:focus-visible { outline: 2px solid #5eb8bc; outline-offset: 4px; }
.gallery-earth__browse { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem; padding: 1rem 1.5rem; border-top: 1px solid #28404b; background: #0b1b24; font-size: .7rem; }
.gallery-earth__browse label { color: #b0c6c8; }
.gallery-earth__browse select { flex: 1; min-width: 0; width: 100%; max-width: 100%; min-height: 38px; padding: .4rem .5rem; border: 1px solid #38535f; border-radius: 7px; color: #e1eeed; background: #142b36; font: inherit; }
.gallery-earth__note { margin: 0; padding: 0 1.5rem 1rem; color: #95aeb4; background: #0b1b24; font-size: .58rem; line-height: 1.5; }

@media (max-width: 600px) {
  .gallery-earth__header { padding: 1.2rem 1rem 0; }
  .gallery-earth__header h2 { font-size: 1.2rem; }
  .gallery-earth__count { display: none; }
  .gallery-earth__tools { padding: 0 1rem 1rem; justify-content: center; }
  .gallery-earth__browse { padding: 1rem; }
  .gallery-earth__browse label { flex-basis: 100%; }
  .gallery-earth__note { padding: 0 1rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gallery-view, .gallery-view__track { transition: none; }
}