.polarsteps-entry {
  --polarsteps-accent: #d84b72;
}

.polarsteps-entry > .meta strong {
  color: var(--polarsteps-accent);
}

.polarsteps-gallery {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  margin: 1.35rem 0 1rem;
  overflow: hidden;
}

.polarsteps-gallery-track {
  display: flex;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  gap: .65rem;
  padding: 0 0 .45rem;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scroll-snap-type: inline mandatory;
  scrollbar-width: thin;
  touch-action: pan-x pan-y;
}

.polarsteps-photo {
  flex: 0 0 min(84%, 36rem);
  min-width: 0;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: inherit;
  background: var(--reader-surface);
  border: 1px solid var(--reader-border);
  border-radius: max(.25rem, var(--reader-radius));
  cursor: zoom-in;
  scroll-snap-align: start;
}

.polarsteps-gallery[data-gallery-count="1"] .polarsteps-photo {
  flex-basis: 100%;
}

.polarsteps-photo img {
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(68vh, 42rem);
  margin: 0;
  object-fit: contain;
  background: rgba(0, 0, 0, .04);
}

.polarsteps-gallery-count {
  margin: .35rem 0 0;
  color: var(--reader-muted);
  font: .75rem/1.4 var(--reader-font-ui);
}

.polarsteps-lightbox {
  width: min(calc(100% - 2rem), 78rem);
  max-width: calc(100% - 2rem);
  height: min(calc(100% - 2rem), 54rem);
  max-height: calc(100% - 2rem);
  margin: auto;
  padding: 0;
  overflow: hidden;
  color: #fff;
  background: #111;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: .55rem;
}

.polarsteps-lightbox::backdrop {
  background: rgba(0, 0, 0, .82);
}

.polarsteps-lightbox-shell {
  display: grid;
  grid-template-columns: minmax(2.75rem, auto) minmax(0, 1fr) minmax(2.75rem, auto);
  grid-template-rows: minmax(0, 1fr);
  align-items: center;
  width: 100%;
  height: 100%;
  min-width: 0;
  padding: 2.75rem .35rem .5rem;
}

.polarsteps-lightbox figure {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  grid-column: 2;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}

.polarsteps-lightbox figure img {
  align-self: center;
  justify-self: center;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: calc(100vh - 7rem);
  object-fit: contain;
  touch-action: pan-y;
  user-select: none;
}

.polarsteps-lightbox figcaption {
  padding: .4rem .5rem .1rem;
  overflow-wrap: anywhere;
  color: #ddd;
  font: .8rem/1.4 system-ui, sans-serif;
  text-align: center;
}

.polarsteps-lightbox button {
  width: 2.6rem;
  min-width: 0;
  height: 2.6rem;
  padding: 0;
  color: #fff;
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 999px;
  cursor: pointer;
}

.polarsteps-lightbox-previous { grid-column: 1; grid-row: 1; }
.polarsteps-lightbox-next { grid-column: 3; grid-row: 1; }
.polarsteps-lightbox-close {
  position: absolute;
  top: .45rem;
  right: .45rem;
  z-index: 1;
  font-size: 1.4rem;
}

.polarsteps-lightbox button:disabled {
  opacity: .3;
  cursor: default;
}

@media (max-width: 430px) {
  .polarsteps-photo { flex-basis: 88%; }
  .polarsteps-lightbox {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    height: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
  }
  .polarsteps-lightbox-shell {
    grid-template-columns: 2.5rem minmax(0, 1fr) 2.5rem;
    padding-inline: .15rem;
  }
  .polarsteps-lightbox button { width: 2.35rem; height: 2.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .polarsteps-gallery-track { scroll-behavior: auto; }
}