.spi-webcams { max-width: 76rem; margin: 0 auto; }
.spi-webcams__intro { max-width: 52rem; margin: 0 auto 2rem; font-size: 1.05rem; line-height: 1.72; }
.spi-webcams__intro h2 { color: var(--spi-section-heading, #075985); font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.65rem, 3vw, 2.4rem); }
.spi-webcams__badges { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1.25rem; }
.spi-webcams__badges span {
  padding: .48rem .78rem;
  border: 1px solid rgba(8, 123, 131, .2);
  border-radius: 999px;
  color: #075985;
  background: #ecfeff;
  font-size: .78rem;
  font-weight: 850;
  letter-spacing: .035em;
}

.spi-webcam-stage {
  margin: 1.5rem 0 3rem;
  padding: clamp(.55rem, 1.5vw, 1rem);
  border: 1px solid rgba(255,255,255,.36);
  border-radius: clamp(1.2rem, 2.4vw, 2rem);
  color: #fff;
  background: linear-gradient(135deg, #032f43, #08766f);
  box-shadow: 0 2rem 5rem rgba(3,47,67,.25);
}
.spi-webcam-stage__screen {
  position: relative;
  aspect-ratio: 16 / 9;
  min-height: 18rem;
  overflow: hidden;
  border-radius: clamp(.85rem, 1.8vw, 1.45rem);
  background: #031d2a;
}
.spi-webcam-stage__screen > img,
.spi-webcam-stage__screen > iframe { width: 100%; height: 100%; border: 0; object-fit: cover; }
.spi-webcam-stage__screen > iframe { position: absolute; inset: 0; }
.spi-webcam-stage__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(2,28,42,.91), rgba(2,28,42,.25) 65%, rgba(2,28,42,.05)); }
.spi-webcam-stage__prompt { position: absolute; inset: auto auto clamp(1.2rem, 5vw, 4rem) clamp(1.2rem, 5vw, 4rem); max-width: 34rem; padding-right: 1.25rem; }
.spi-webcam-stage__prompt > span { color: #99f6e4; font-size: .78rem; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.spi-webcam-stage__prompt h2 { max-width: 14ch; margin: .5rem 0 .7rem; color: #fff; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.8rem, 5vw, 3.8rem); line-height: 1.02; }
.spi-webcam-stage__prompt p { margin: 0 0 1.25rem; color: rgba(255,255,255,.88); }
.spi-webcam-stage__prompt button {
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  min-height: 3rem;
  padding: .75rem 1.15rem;
  border: 0;
  border-radius: 999px;
  color: #073b4c;
  background: #fde68a;
  box-shadow: 0 .75rem 2rem rgba(0,0,0,.22);
  font: inherit;
  font-weight: 900;
  cursor: pointer;
}
.spi-webcam-stage__prompt button:hover { transform: translateY(-2px); background: #fff4b8; }
.spi-webcam-stage__prompt button:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.spi-webcam-stage__status { margin: .8rem .5rem .1rem; color: #c7f9f1; font-size: .86rem; }

.spi-webcam-rail__top { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.spi-webcam-rail__top h2 { margin: 0; color: #064e5e; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.6rem, 3vw, 2.35rem); }
.spi-webcam-rail__buttons { display: flex; gap: .5rem; }
.spi-webcam-rail__buttons button {
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid rgba(8,123,131,.3);
  border-radius: 999px;
  color: #075985;
  background: #fff;
  font: 900 1.15rem/1 system-ui, sans-serif;
  cursor: pointer;
}
.spi-webcam-rail__buttons button:hover { color: #fff; background: #087b83; }
.spi-webcam-rail__buttons button:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.spi-webcam-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min(82vw, 18rem), 22rem);
  gap: 1rem;
  margin-inline: calc((100vw - min(100vw, 76rem)) / -2);
  padding: .25rem max(1rem, calc((100vw - 76rem) / 2)) 1.5rem;
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-color: #0f9d98 #d9f4f1;
}
.spi-webcam-card {
  scroll-snap-align: start;
  overflow: hidden;
  border: 1px solid rgba(8,123,131,.18);
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 .8rem 2rem rgba(7,45,57,.1);
  transition: transform .18s ease, box-shadow .18s ease;
}
.spi-webcam-card:hover { transform: translateY(-4px); box-shadow: 0 1.3rem 2.8rem rgba(7,45,57,.16); }
.spi-webcam-card > button { display: block; width: 100%; padding: 0; border: 0; color: #0b3f4d; background: transparent; text-align: left; cursor: pointer; }
.spi-webcam-card > button:focus-visible { outline: 4px solid #f59e0b; outline-offset: -4px; }
.spi-webcam-card > button[aria-pressed="true"] { background: #ecfeff; }
.spi-webcam-card__image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #073b4c; }
.spi-webcam-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.spi-webcam-card:hover .spi-webcam-card__image img { transform: scale(1.035); }
.spi-webcam-card__play { position: absolute; left: 1rem; bottom: 1rem; display: grid; place-items: center; width: 2.7rem; height: 2.7rem; border-radius: 999px; color: #073b4c; background: #fde68a; box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.25); }
.spi-webcam-card__copy { display: grid; gap: .45rem; padding: 1.1rem 1.1rem .8rem; }
.spi-webcam-card__copy strong { font: 800 1.15rem/1.25 Georgia, 'Times New Roman', serif; }
.spi-webcam-card__copy > span { color: #456771; font-size: .9rem; line-height: 1.45; }
.spi-webcam-card .spi-webcam-card__source { min-height: 0; margin: 0 1.1rem 1rem; color: #087b83; font-size: .76rem; font-weight: 800; text-decoration: none; }
.spi-webcam-note { max-width: 54rem; margin: 3rem auto 0; padding: clamp(1.25rem, 4vw, 2rem); border-radius: 1.35rem; background: linear-gradient(135deg, #ecfeff, #f0fdf4); }
.spi-webcam-note h2 { margin-top: 0; color: #075985; font-family: Georgia, 'Times New Roman', serif; }

@media (max-width: 42rem) {
  .spi-webcam-stage__screen { min-height: 22rem; }
  .spi-webcam-stage__screen > img { height: 100%; object-position: center; }
  .spi-webcam-stage__shade { background: linear-gradient(0deg, rgba(2,28,42,.94), rgba(2,28,42,.08) 78%); }
  .spi-webcam-stage__prompt { inset: auto 1.15rem 1.25rem 1.15rem; padding: 0; }
  .spi-webcam-stage__prompt h2 { font-size: clamp(1.7rem, 10vw, 2.7rem); }
  .spi-webcam-rail__buttons { display: none; }
  .spi-webcam-rail { grid-auto-columns: 84vw; }
}

@media (prefers-reduced-motion: reduce) {
  .spi-webcam-rail { scroll-behavior: auto; }
  .spi-webcam-card, .spi-webcam-card__image img, .spi-webcam-stage__prompt button { transition: none; }
}