.carousel-lab { scroll-margin-top: 12px; }
.showcase {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .94fr);
  grid-template-areas: "intro player" "series player" "strip player";
  align-content: center;
  align-items: start;
  column-gap: clamp(36px, 7.5vw, 112px);
  row-gap: 26px;
  max-width: 1084px;
}
.showcase-intro { grid-area: intro; align-self: end; }
.showcase-intro h2 { margin: 0; }
.showcase-intro h2 em { color: var(--experience-accent); }
.showcase-intro > p:last-child {
  margin: 17px 0 0;
  max-width: 385px;
  font-size: 14px;
  line-height: 1.65;
  color: #b8b9b4;
}
.showcase-series { grid-area: series; display: grid; gap: 8px; }
.series-choice {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 7px 14px 7px 8px;
  text-align: left;
  font: inherit;
  color: #e8e7e0;
  background: #ffffff04;
  border: 1px solid #ffffff25;
  border-radius: 9px;
  cursor: pointer;
}
.series-choice:hover, .series-choice[aria-pressed=true] { border-color: var(--experience-accent); }
.series-choice[aria-pressed=true] { background: var(--experience-soft); }
.series-choice::after {
  content: "";
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border: 1px solid #898d83;
  border-radius: 50%;
  margin-left: auto;
}
.series-choice[aria-pressed=true]::after { background: var(--experience-accent); border-color: var(--experience-accent); box-shadow: inset 0 0 0 3px #141814; }
.series-choice img { width: 39px; height: 49px; border-radius: 4px; object-fit: cover; }
.series-choice strong, .series-choice small { display: block; }
.series-choice strong { font-size: 15px; font-weight: 680; line-height: 1.22; }
.series-choice small { margin-top: 4px; font-size: 11px; color: #b3b6ac; }
.clip-strip {
  grid-area: strip;
  align-self: start;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, min(13%, 62px));
  justify-content: start;
  gap: clamp(3px, .55vw, 8px);
}
.clip-strip button {
  display: grid; gap: 5px; padding: 3px;
  color: #bfc3b6; background: transparent; border: 1px solid transparent;
  border-radius: 6px; font: 10px var(--mono); cursor: pointer;
}
.clip-strip img {
  width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: #0a0b0b;
  border-radius: 3px; opacity: .8;
}
.clip-strip button[aria-pressed=true], .clip-strip button:hover { color: var(--experience-accent); border-color: var(--experience-accent); }
.clip-strip button:is([aria-pressed=true],:hover) img { opacity: 1; }
.showcase-player { grid-area: player; margin: 0; align-self: center; min-width: 0; }
.clip-stage {
  --clip-ratio: 3 / 4;
  display: grid;
  place-items: center;
  isolation: isolate;
  position: relative;
  padding: 12px 8% 6px 4%;
}
.clip-frame, .clip-behind {
  grid-area: 1 / 1;
  width: min(100%, 338px);
  aspect-ratio: var(--clip-ratio);
  border: 1px solid #d9dfd15c;
  border-radius: 12px;
}
.clip-behind {
  z-index: -1; object-fit: cover;
  transform: translate(6%, 0) rotate(5deg) scale(.97);
  filter: brightness(.42); box-shadow: 0 10px 30px #0006;
}
.clip-frame {
  overflow: hidden; position: relative; background: #0a0a0b;
  box-shadow: 0 15px 32px #0008;
  touch-action: pan-y pinch-zoom; user-select: none; cursor: grab;
}
.clip-frame:active { cursor: grabbing; }
.clip-frame video { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.showcase-player figcaption { margin: 11px auto 0; max-width: 390px; }
.clip-navigation {
  display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; gap: 8px;
  align-items: center;
}
.clip-arrow {
  display: grid; place-items: center; width: 42px; height: 42px; padding: 0;
  border: 1px solid #ffffff4a; border-radius: 50%; background: #ffffff07;
  color: #eceee7; font-size: 21px; cursor: pointer;
}
.clip-arrow:hover { border-color: var(--experience-accent); color: var(--experience-accent); }
#clip-caption { display: grid; gap: 3px; text-align: center; color: #eef0e8; }
#clip-number { font: 11px var(--mono); letter-spacing: 1px; color: var(--experience-accent); }
#clip-name { font-size: 14px; line-height: 1.3; font-weight: 650; }
.clip-playback { display: flex; justify-content: center; flex-wrap: wrap; gap: 2px; margin-top: 5px; }
.clip-playback :is(button,a) {
  display: inline-flex; align-items: center; justify-content: center; gap: .35em;
  min-height: 38px; padding: 5px 10px; color: #c2c5ba; background: none; border: 0;
  border-radius: 4px; font: 12px/1.35 Inter, sans-serif; text-decoration: none; cursor: pointer;
}
.clip-playback :is(button,a):hover, .clip-playback [aria-pressed=true] { color: var(--experience-accent); }
#clip-error { color: #f5c885; text-align: center; font-size: 12px; }
.showcase :is(button,a,[tabindex]):focus-visible, .real-cards-teaser:focus-visible { outline: 2px solid var(--experience-accent); outline-offset: 3px; }
.real-cards-teaser {
  display: flex; align-items: center; justify-content: flex-start; gap: 15px;
  min-height: 132px; padding: 10px clamp(12px, 2vw, 24px);
  color: #f1f0e9; text-decoration: none;
  background: radial-gradient(ellipse at 21% 72%,var(--experience-soft),transparent 74%);
}
.teaser-stack { width: 116px; height: 110px; flex: 0 0 116px; position: relative; }
.teaser-stack > * {
  position: absolute; top: 4px; left: 20px; width: 75px; height: 100px; margin: 0;
  border-radius: 5px; border: 1px solid #e5e3d14a; object-fit: contain; box-shadow: 0 4px 14px #0006;
}
.teaser-stack img:first-child { transform: translate(-14px,4px) rotate(-12deg); filter: brightness(.68); }
.teaser-stack img:nth-child(2) { transform: translate(13px,3px) rotate(11deg); filter: brightness(.82); }
.teaser-front { transform: rotate(-2deg); }
.teaser-link { display: grid; gap: 8px; min-width: 0; text-align: left; }
.teaser-link strong { color: #eeefe7; font-size: 16px; max-width: 180px; line-height: 1.2; }
.teaser-link > span { color: var(--experience-accent); font-size: 11px; }
.teaser-link b { margin-left: 2px; }
@media (max-width:760px) {
  .showcase {
    grid-template-columns: minmax(0,1fr);
    grid-template-areas: "intro" "series" "player" "strip";
    gap: 18px; max-width: 530px; margin-inline: auto;
  }
  .showcase-intro > p:last-child { font-size: 13px; margin-top: 11px; }
  .showcase-series { grid-template-columns: 1fr 1fr; gap: 6px; }
  .series-choice { align-items: flex-start; padding: 9px; gap: 7px; border-radius: 7px; }
  .series-choice::after { display: none; }
  .series-choice img { width: 27px; height: 36px; }
  .series-choice strong { font-size: 12px; }
  .series-choice small { font-size: 10px; margin-top: 4px; }
  .clip-stage { padding: 6px 5% 4px 0; }
  .clip-frame, .clip-behind { width: min(100%, 355px); }
  .showcase-player figcaption { max-width: 340px; }
  .clip-strip { justify-content: center; }
  .clip-playback :is(button,a) { min-height: 42px; }
  .real-cards-teaser { justify-content: center; }
}
@media (max-width:375px) {
  .series-choice img { display: none; }
  .teaser-stack { flex-basis: 97px; }
}