.architecture-badge {
  width: max-content;
  padding: 4px 7px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 999px;
  background: rgba(255, 255, 255, .05);
  color: #c9d7ea;
  font-size: 7px;
  font-style: normal;
}

.architecture-badge.modern { color: #81ecc0; border-color: rgba(87, 225, 166, .24); }
.architecture-badge.legacy { color: #ffc98b; border-color: rgba(255, 183, 91, .24); }
.download-option.architecture-modern { border-color: rgba(87, 225, 166, .28); }
.download-option.architecture-legacy { border-color: rgba(255, 183, 91, .24); }
.download-option.unavailable { opacity: .66; cursor: not-allowed; background: rgba(255, 255, 255, .025); }
.download-option.unavailable strong { color: #75839a; }
.download-total { margin-top: 5px; color: #74e9b5 !important; font-weight: 700; }

.screenshot-showcase { overflow: hidden; }
.screenshot-showcase .section-title-row { margin-bottom: 18px; }
.screenshot-showcase .section-title-row p { margin: 7px 0 0; color: #8d9bb2; font-size: 10px; }
.screenshot-count { flex: 0 0 auto; padding: 8px 12px; border: 1px solid rgba(113, 187, 255, .16); border-radius: 999px; background: rgba(70, 123, 255, .08); color: #8fa1bd; font-size: 10px; direction: ltr; }
.screenshot-count b { color: #76ddff; font-size: 15px; }
.screenshot-stage { position: relative; min-height: 430px; display: grid; place-items: center; border: 1px solid rgba(112, 177, 255, .13); border-radius: 21px; overflow: hidden; outline: none; background: radial-gradient(circle at 50% 20%, rgba(69, 102, 220, .13), transparent 48%), rgba(0, 3, 11, .64); touch-action: pan-y; }
.screenshot-stage:focus-visible { box-shadow: 0 0 0 3px rgba(74, 196, 255, .14); border-color: rgba(74, 196, 255, .42); }
.screenshot-main { position: relative; width: 100%; min-height: 430px; padding: 22px 70px 54px; display: grid; place-items: center; border: 0; background: transparent; color: #fff; cursor: zoom-in; }
.screenshot-main img { display: block; width: 100%; height: clamp(380px, 58vw, 700px); object-fit: contain; filter: drop-shadow(0 22px 45px rgba(0, 0, 0, .38)); transition: opacity .2s ease, transform .35s ease; user-select: none; -webkit-user-drag: none; }
.screenshot-main:hover img { transform: scale(1.012); }
.screenshot-main img.changing { opacity: .28; transform: scale(.985); }
.screenshot-main span { position: absolute; inset-inline: 24px; bottom: 28px; color: #d7e3f5; font-size: 11px; text-align: center; text-shadow: 0 2px 8px #000; }
.screenshot-main small { position: absolute; inset-inline-end: 22px; top: 18px; padding: 6px 9px; border-radius: 999px; background: rgba(0, 3, 12, .68); color: #9eb0ca; font-size: 8px; backdrop-filter: blur(10px); }
.carousel-arrow { position: absolute; z-index: 3; top: 50%; width: 43px; height: 43px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .13); border-radius: 50%; background: rgba(3, 8, 22, .75); color: #dff7ff; font: 25px/1 Arial; cursor: pointer; transform: translateY(-50%); transition: .2s ease; backdrop-filter: blur(12px); }
.carousel-arrow:hover { border-color: rgba(85, 210, 255, .48); background: rgba(44, 107, 185, .38); transform: translateY(-50%) scale(1.06); }
.carousel-arrow.previous { inset-inline-start: 16px; }
.carousel-arrow.next { inset-inline-end: 16px; }
.screenshot-dots { display: flex; justify-content: center; gap: 6px; margin-top: 13px; }
.screenshot-dots button { width: 6px; height: 6px; padding: 0; border: 0; border-radius: 999px; background: #42506a; cursor: pointer; transition: .2s ease; }
.screenshot-dots button.active { width: 23px; background: linear-gradient(90deg, #7564ff, #42d7ff); }
.screenshot-thumbnails { display: flex; gap: 9px; margin-top: 13px; padding: 4px 1px 7px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #334463 transparent; scroll-snap-type: x proximity; }
.screenshot-thumbnails button { position: relative; flex: 0 0 86px; height: 72px; padding: 4px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 12px; overflow: hidden; background: rgba(3, 8, 20, .72); cursor: pointer; opacity: .58; scroll-snap-align: center; transition: .2s ease; }
.screenshot-thumbnails button:hover { opacity: .86; transform: translateY(-2px); }
.screenshot-thumbnails button.active { opacity: 1; border-color: rgba(70, 206, 255, .62); box-shadow: 0 0 0 2px rgba(70, 129, 255, .13); }
.screenshot-thumbnails img { width: 100%; height: 100%; display: block; object-fit: contain; }
.screenshot-thumbnails span { position: absolute; bottom: 4px; inset-inline-end: 5px; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 3, 10, .78); color: #bcd0ea; font-size: 7px; }
.lightbox figure { margin: 0; max-width: min(90vw, 980px); display: grid; justify-items: center; gap: 10px; }
.lightbox figure img { max-width: min(88vw, 900px); max-height: 84vh; object-fit: contain; }
.lightbox figcaption { color: #b8c8df; font-size: 11px; direction: ltr; }
.lightbox-arrow { position: fixed; z-index: 2; top: 50%; width: 48px; height: 48px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: rgba(5,10,22,.72); color: #fff; font-size: 27px; cursor: pointer; transform: translateY(-50%); }
.lightbox-arrow.previous { inset-inline-start: 22px; }
.lightbox-arrow.next { inset-inline-end: 22px; }

@media (max-width: 700px) {
  .screenshot-stage, .screenshot-main { min-height: 370px; }
  .screenshot-main { padding: 16px 48px 52px; }
  .screenshot-main img { height: 430px; }
  .carousel-arrow { width: 37px; height: 37px; }
  .carousel-arrow.previous { inset-inline-start: 7px; }
  .carousel-arrow.next { inset-inline-end: 7px; }
  .screenshot-thumbnails button { flex-basis: 72px; height: 62px; }
  .lightbox-arrow { width: 40px; height: 40px; }
  .lightbox-arrow.previous { inset-inline-start: 8px; }
  .lightbox-arrow.next { inset-inline-end: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .screenshot-main img, .carousel-arrow, .screenshot-thumbnails button { transition: none; }
}