/* Live POPZ choreography, adapted to this preview's existing theme and header. */
#pop { padding-top: 0; scroll-margin-top: 0; background: var(--bg); }
#pop .popouter { position: relative; background: var(--bg); }
#pop .popstage-wrap {
  position: relative;
  overflow: hidden;
  border-block: 1px solid var(--hairline);
}
#pop .popgrid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(220px, 30%) minmax(0, 1fr);
  align-items: center;
  max-width: 1440px;
  min-height: 620px;
  margin: auto;
  padding: var(--s-6) 5% 104px;
  isolation: isolate;
}
#pop .popword {
  position: absolute;
  z-index: -1;
  top: 3%;
  left: 3%;
  right: 3%;
  color: var(--text-1);
  opacity: .045;
  font-family: var(--font-display);
  font-size: clamp(100px, 21vw, 310px);
  line-height: 1.05;
  letter-spacing: -.035em;
  text-align: center;
  pointer-events: none;
  user-select: none;
}
#pop .popfacts { position: relative; z-index: 2; pointer-events: none; }
#pop .popflavor { font-size: 16px; font-weight: 650; }
#pop .popfacts h2 {
  margin-top: var(--s-4);
  font-size: clamp(54px, 7vw, 102px);
  line-height: .96;
  color: var(--accent);
}
#pop .popstage {
  position: relative;
  width: 100%;
  min-width: 0;
  height: 480px;
  touch-action: pan-y;
}
#pop .popstill { position: absolute; inset: 0; }
#pop .popstill img,
#pop .popcanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#pop .popstill img { object-fit: contain; }
#pop .popfooter {
  position: absolute;
  z-index: 3;
  bottom: var(--s-5);
  left: 5%;
  right: 5%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-4);
}
#pop .popreadout {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  min-width: 110px;
  padding: var(--s-2) var(--s-4);
  border-radius: var(--r-pill);
  background: var(--highlight);
  color: var(--text-1);
  font-size: 12px;
  font-weight: 750;
}
#pop .popscroll { display: none; font-size: 13px; color: var(--text-2); }
#pop .popscroll span { margin-left: var(--s-2); }
#pop .popactions { display: flex; align-items: center; gap: var(--s-5); }
#pop .popmotion,
#pop .popskip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-1);
  font-family: var(--font-sans);
  font-weight: 650;
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 5px;
  cursor: pointer;
}
#pop .popmotion:hover,
#pop .popskip:hover { color: var(--accent); }
#pop .popmotion:active { transform: scale(.97); }
#pop .poptrack { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--hairline); overflow: hidden; }
#pop .poptrack span { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; }
#pop .popstepper {
  grid-column: 2;
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  z-index: 3;
}
#pop .popstepper button {
  min-height: 44px;
  padding: var(--s-2) var(--s-5);
  border: 1px solid var(--text-2);
  border-radius: var(--r-pill);
  background: var(--bg);
  color: var(--text-1);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
}
#pop .popstepper button[aria-pressed='true'] { background: var(--text-1); color: var(--highlight); border-color: var(--text-1); }
#pop .popstepper button:hover { box-shadow: inset 0 0 0 1px var(--text-1); }
#pop .popstepper button:active { transform: scale(.97); }
#pop.pop-enabled .popouter { height: 300svh; }
#pop.pop-enabled .popstage-wrap { position: sticky; top: var(--header-height); height: calc(100svh - var(--header-height)); }
#pop.pop-enabled .popgrid { height: 100%; min-height: 0; padding-block: var(--s-5) 96px; }
#pop.pop-enabled .popstage { position: absolute; inset: var(--s-4) 0 80px 25%; width: 75%; height: auto; z-index: 1; }
#pop.pop-enabled .popscroll { display: inline; }
#pop.pop-enabled .popstepper { display: none; }
@media (max-width: 900px) {
  #pop .popgrid { grid-template-columns: 1fr; padding: var(--s-5) var(--s-5) 112px; min-height: 0; }
  #pop .popfacts h2 { font-size: clamp(36px, 7.5vw, 64px); margin-top: var(--s-2); }
  #pop .popfacts h2 br { display: none; }
  #pop .popflavor { font-size: 14px; }
  #pop .popword { top: 25%; }
  #pop .popstage { height: 400px; }
  #pop .popstepper { grid-column: 1; margin-top: var(--s-3); }
  #pop .popfooter { left: var(--s-4); right: var(--s-4); bottom: var(--s-4); gap: var(--s-2); flex-wrap: wrap; }
  #pop .popreadout { min-height: 32px; min-width: 94px; font-size: 11px; padding-inline: var(--s-3); }
  #pop .popscroll { font-size: 12px; margin-left: auto; }
  #pop .popactions { width: 100%; justify-content: flex-end; gap: var(--s-5); }
  #pop .popmotion, #pop .popskip { font-size: 12px; }
  #pop.pop-enabled .popouter { height: 260svh; }
  #pop.pop-enabled .popgrid { display: block; padding: var(--s-5); }
  #pop.pop-enabled .popstage { inset: 108px 0 112px; width: 100%; height: auto; }
}
@media (max-height: 600px) and (min-width: 561px) {
  #pop.pop-enabled .popgrid { display: grid; grid-template-columns: 28% 1fr; padding: var(--s-4) 5% 72px; }
  #pop .popfacts h2 { font-size: 44px; }
  #pop .popfacts h2 br { display: initial; }
  #pop.pop-enabled .popstage { inset: 0 0 68px 24%; width: 76%; }
  #pop .popfooter { flex-wrap: nowrap; bottom: var(--s-3); }
  #pop .popactions { width: auto; }
  #pop .popscroll { display: none; }
  #pop.pop-enabled .popscroll { display: none; }
}