html:has(body.pure-review) {
  scrollbar-gutter: stable;
}

html.staged-scroll-lock {
  overflow: hidden;
  overscroll-behavior: none;
  overflow-anchor: none;
}

.pure-review .pure-p02 {
  --header: var(--chapter-height);
  --p02-frame-height: min(100%, 675px);
  --p02-grid-gap: 16px;
}

.pure-review .pure-p02 .film-frame {
  width: min(calc(100% - var(--site-gutter) * 2), var(--max));
  height: var(--p02-frame-height);
  border-radius: var(--rw-radius-film);
}

.pure-review .pure-p02 .film-shade {
  background: radial-gradient(
    ellipse farthest-corner at center,
    rgb(36 47 56 / 0) 27%,
    rgb(36 47 56 / .11) 52%,
    rgb(36 47 56 / .26) 73%,
    rgb(36 47 56 / .4) 100%
  );
}

.pure-review .pure-p02 .lyric {
  text-shadow: 0 1px 3px rgb(17 24 30 / .78), 0 2px 9px rgb(17 24 30 / .32);
}

.pure-review .pure-p02 .film-bottom {
  left: auto;
  justify-content: end;
}
.pure-review .pure-p02 .film-scroll {
  display: none;
}

.pure-review .pure-p02 .extraction {
  padding: calc(var(--section-gap) / 2) 0 0;
}

.pure-review .pure-p02 .extraction-stage {
  width: min(calc(100% - var(--site-gutter) * 2), var(--max));
}

.pure-review .pure-p02 .extraction-heading {
  margin: 0 0 16px;
}

.pure-review .pure-p02 .sync-grid {
  min-width: 0;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: var(--p02-grid-gap);
  height: min(var(--p02-art-natural, 680px), var(--p02-art-limit, 100svh));
}

.pure-review .pure-p02 .detail-stack {
  gap: var(--p02-grid-gap);
}

.pure-review .pure-p02 .detail-stack .panel {
  background: #24282a;
}

.pure-review .pure-p02 .p02-brew-spec {
  margin-top: 5px;
}

.pure-review .pure-p02 .transport {
  margin-top: 10px;
  gap: 16px;
  flex-wrap: nowrap;
}

.pure-review .pure-p02 .transport input {
  cursor: pointer;
}

.pure-review .pure-p02.is-reduced .film-stage,
.pure-review .pure-p02:not(.is-enhanced) .film-stage {
  padding: calc(var(--section-gap) / 2) 0 0;
  height: auto;
}
.pure-review .pure-p02.is-reduced .film-frame,
.pure-review .pure-p02:not(.is-enhanced) .film-frame {
  height: auto;
  min-height: min(400px, 70svh);
}
.pure-review .pure-p02:not(.is-enhanced) .film-chapter {
  height: auto;
}
.pure-review .pure-p02:not(.is-enhanced) .film-copy {
  position: relative;
  padding-block: 70px 90px;
}
.pure-review .pure-p02:not(.is-enhanced) .film-bottom {
  display: none;
}

@media (max-width: 760px) {
  .pure-review .pure-p02 {
    --p02-grid-gap: 10px;
  }

  .pure-review .pure-p02 .film-frame {
    border-radius: 20px;
  }

  .pure-review .pure-p02 .film-chapter .lyric {
    font-size: clamp(26px, 8.3vw, 38px);
  }

  .pure-review .pure-p02 .sync-grid {
    height: auto;
    grid-template-columns: minmax(0, 1fr);
  }

  .pure-review .pure-p02 .main-panel {
    height: min(var(--p02-main-natural, 330px), var(--p02-art-limit, 330px));
    aspect-ratio: auto;
  }

  .pure-review .pure-p02 .detail-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pure-review .pure-p02 .detail-stack .panel {
    background: white;
  }

  .pure-review .pure-p02 .main-panel .panel-label {
    left: 6px;
    right: auto;
    top: 6px;
  }

  .pure-review .pure-p02 .extraction-heading {
    margin-bottom: 12px;
  }
}

.pure-review .pure-p02.is-enhanced:not(.is-reduced) .film-stage {
  align-items: end;
  padding-bottom: calc(var(--section-gap) / 2);
}
.pure-review .pure-p02.is-enhanced:not(.is-reduced) .film-frame {
  transform: translateY(var(--p02-frame-offset, 0px));
}
.pure-review .pure-p02 .extraction-stage,
.pure-review .pure-p02 .film-frame {
  max-width: var(--max);
}

@media (min-width: 761px) and (max-height: 710px) {
  .pure-review .pure-p02 .sync-grid {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 2fr);
    height: min(var(--p02-art-natural, 390px), var(--p02-art-limit, 100svh));
  }

  .pure-review .pure-p02 .detail-stack {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .pure-review .pure-p02 .main-panel {
    min-height: 0;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .pure-review .pure-p02 .main-panel .panel-label {
    grid-area: 1 / 1;
    position: relative;
    inset: auto;
    justify-self: start;
    margin: 4px;
  }

  .pure-review .pure-p02 .main-panel > :is(img, canvas) {
    grid-area: 2 / 1;
    position: relative;
    min-height: 0;
  }
}

.pure-review .pure-p02 .detail-stack .panel > :is(img, canvas) {
  object-fit: cover;
}

@media (min-width: 761px) and (max-height: 710px) {
  .pure-review .pure-p02 .detail-stack .panel {
    align-self: center;
    aspect-ratio: 3 / 2;
    max-height: 100%;
  }
}

@media (max-width: 760px) and (min-height: 621px) and (max-height: 710px) {
  .pure-review .pure-p02 .main-panel > :is(img, canvas) {
    transform: translateY(-1%) scale(1.12);
  }
}

@media (max-width: 760px) and (max-height: 620px) {
  .pure-review .pure-p02 .sync-grid {
    grid-template-columns: minmax(0, 1.16fr) minmax(0, 1fr);
    height: min(var(--p02-art-limit, 250px), 310px);
  }

  .pure-review .pure-p02 .main-panel {
    height: auto;
  }

  .pure-review .pure-p02 .detail-stack {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
  }

  .pure-review .pure-p02 .detail-stack .panel > :is(img, canvas) {
    min-height: 0;
    height: 100%;
  }

  .pure-review .pure-p02 .panel-label {
    font-size: 14px;
    line-height: 20px;
  }
}