.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vh, 48px);
  max-width: var(--col);
  margin: 0 auto;
  padding: clamp(48px, 7vh, 100px) var(--gut) 0;
}
.hero-claim {
  margin: 0;
  font: 400 clamp(32px, 3.4vw, 48px)/1.08 'Redaction 35', Georgia, serif;
  letter-spacing: -0.014em;
  color: var(--ink);
  text-wrap: balance;
}
.hero-poster {
  grid-template-columns: 5fr 7fr;
  grid-template-areas: 'claim claim' 'copy stage' 'copy cap';
  column-gap: 56px; row-gap: 0;
  align-items: end;
  padding-top: clamp(40px, 6vh, 64px);
}
.hero-poster .hero-claim {
  grid-area: claim;
  margin-bottom: 52px;
  font: 400 clamp(46px, 8.1vw, 117px)/0.98 'Redaction 50', Georgia, serif;
  letter-spacing: -0.02em;
  text-wrap: initial; white-space: nowrap;
}
.hero-poster .hero-copy { grid-area: copy; display: flex; flex-direction: column; align-items: flex-start; align-self: end; }
.hero-poster .hero-lede { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ink-dim); max-width: 46ch; }
.hero-poster .hero-acts { margin-top: 30px; }
.hero-poster .hero-cap { grid-area: cap; }
@media (max-width: 920px) {
  .hero-poster { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'claim' 'copy' 'stage' 'cap'; row-gap: 32px; }
  .hero-poster .hero-cap { margin-top: 18px; }
  .hero-poster .hero-claim { margin-bottom: 0; white-space: normal; text-wrap: balance; font-size: clamp(38px, 10vw, 64px); }
  .hero-poster .hero-claim br { display: none; }
}
.demo-pairs { display: block; }
.pairs-stage { position: relative; aspect-ratio: 16 / 7; container-type: size; }
.pairs-slot { position: absolute; top: 4.161cqw; width: 22.857cqw; height: 34.286cqw; }
.pairs-l { left: 4.786cqw; }
.pairs-r { left: 34.148cqw; }
.pairs-p {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity 0.6s ease;
}
.pairs-p img { width: 100%; height: auto; box-shadow: inset 0 0 0 1px rgba(20, 28, 50, 0.08); }
[data-state="1"] .pairs-p[data-on~="1"], [data-state="2"] .pairs-p[data-on~="2"], [data-state="3"] .pairs-p[data-on~="3"],
[data-state="4"] .pairs-p[data-on~="4"], [data-state="5"] .pairs-p[data-on~="5"] { opacity: 1; }
.pairs-file {
  position: absolute; left: 0; right: 0; top: calc(100% + 7px);
  font: 400 9px/1.2 var(--mono); letter-spacing: 0.04em; color: var(--ink-faint);
  text-align: center; white-space: nowrap; transition: opacity 0.3s;
}
[data-state="5"] .pairs-file { opacity: 0; }
.pairs-page {
  position: absolute; top: 1.875cqw; width: 28.2cqw; height: 40cqw;
  background: var(--surface); box-shadow: var(--float-shadow);
  opacity: 0;
}
.pairs-page.l { left: 2.5cqw; }
.pairs-page.r { left: 31.1cqw; }
.pairs-page .cm { --mark-box: 1.1cqw; --mark-len: 0.8cqw; --mark-off: -1.4cqw; }
.pairs-folio {
  position: absolute; top: calc(1.875cqw - 20px);
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint);
  opacity: 0;
}
.pairs-folio.l { left: calc(2.5cqw + 2px); }
.pairs-folio.r { left: calc(31.1cqw + 2px); }
[data-state="5"] .pairs-page, [data-state="5"] .pairs-folio { opacity: 1; }
.pairs-now > span { display: none; }
[data-state="1"] ~ .hero-cap [data-st="1"], [data-state="2"] ~ .hero-cap [data-st="2"], [data-state="3"] ~ .hero-cap [data-st="3"],
[data-state="4"] ~ .hero-cap [data-st="4"], [data-state="5"] ~ .hero-cap [data-st="5"] { display: inline; color: var(--ink); }
@media (prefers-reduced-motion: reduce) {
  .pairs-p, .pairs-file { transition: none; }
}
.demo-cuts { display: block; }
.cuts-stage { position: relative; aspect-ratio: 16 / 7; container-type: size; }
.cuts-frame { display: block; position: absolute; left: 0; top: 1.9cqw; width: 32cqw; height: 40cqw; }
.cuts-mosaic { left: 34cqw; visibility: hidden; }
.cuts-frame img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; box-shadow: inset 0 0 0 1px rgba(20, 28, 50, 0.08);
  visibility: hidden;
}
.cuts-label {
  position: absolute; left: 0; right: 0; top: calc(100% + 8px);
  font: 400 9px/1.3 var(--mono); letter-spacing: 0.04em; color: var(--ink-faint);
  text-align: center; white-space: nowrap;
}
.cuts-label span, .cuts-now span { display: none; }
[data-state="1"] .cuts-frame img[data-on~="1"], [data-state="2"] .cuts-frame img[data-on~="2"],
[data-state="3"] .cuts-frame img[data-on~="3"] { visibility: visible; }
[data-state="3"] .cuts-frame[data-on~="3"] { visibility: visible; }
[data-state="1"] .cuts-label span[data-on~="1"], [data-state="2"] .cuts-label span[data-on~="2"],
[data-state="3"] .cuts-label span[data-on~="3"] { display: inline; }
[data-state="1"] ~ .hero-cap .cuts-now span[data-st="1"],
[data-state="2"] ~ .hero-cap .cuts-now span[data-st="2"],
[data-state="3"] ~ .hero-cap .cuts-now span[data-st="3"] { display: inline; color: var(--ink); }
.demo-cover { display: block; }
.cover-stage { container-type: inline-size; }
.cover-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 5cqw; padding: 1.6cqw;
}
.cv {
  display: flex; flex-direction: column; gap: 6px;
  container-type: inline-size; visibility: hidden;
}
[data-state="1"] .cv[data-on~="1"], [data-state="2"] .cv[data-on~="2"], [data-state="3"] .cv[data-on~="3"],
[data-state="4"] .cv[data-on~="4"], [data-state="5"] .cv[data-on~="5"] { visibility: visible; }
.cv-sheet {
  position: relative; aspect-ratio: 148 / 182;
  background: var(--surface); box-shadow: var(--float-shadow);
}
.cv-sheet .cm { --mark-box: 5.38cqw; --mark-len: 3.91cqw; --mark-off: -6.85cqw; }
.cv-photo { position: absolute; overflow: hidden; }
.cv-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cv-inset { left: 8.1081%; right: 6.7568%; top: 5.4945%; bottom: 8.2418%; }
.cv-bleed { inset: 0; }
.cv-title {
  position: absolute; left: 31%; top: 44.74%; width: 38%;
  text-align: center; color: #2cff05;
  font-family: 'Hanken Grotesk', var(--sans);
  font-size: 6.763cqw; font-weight: 900;
  letter-spacing: -0.0199em; line-height: 0.9;
}
.cv-byline {
  position: absolute; left: 0; top: 91.48%; width: 100%;
  text-align: center; color: #2cff05;
  font-family: 'Hanken Grotesk', var(--sans);
  font-size: 2.114cqw; font-weight: 600;
  letter-spacing: 0.0457em; line-height: 1.35;
}
.cv-name {
  font: 400 9px/1.2 var(--mono); letter-spacing: 0.04em;
  color: var(--ink-faint); text-align: center;
}
.cover-now > span { display: none; }
[data-state="1"] ~ .hero-cap .cover-now span[data-st="1"], [data-state="2"] ~ .hero-cap .cover-now span[data-st="2"],
[data-state="3"] ~ .hero-cap .cover-now span[data-st="3"], [data-state="4"] ~ .hero-cap .cover-now span[data-st="4"],
[data-state="5"] ~ .hero-cap .cover-now span[data-st="5"] { display: inline; color: var(--ink); }
.demo-print { display: block; }
.flip-stage {
  position: relative; width: 52%; aspect-ratio: 5 / 4;
  container-type: size;
}
.flip-p { position: absolute; inset: 0; display: none; }
.flip-p img { display: block; width: 100%; height: 100%; object-fit: cover; box-shadow: var(--edge); }
[data-state="1"] .flip-p[data-on="1"], [data-state="2"] .flip-p[data-on="2"],
[data-state="3"] .flip-p[data-on="3"], [data-state="4"] .flip-p[data-on="4"] { display: block; }
.flip-now > span { display: none; }
[data-state="1"] ~ .hero-cap [data-st="1"], [data-state="2"] ~ .hero-cap [data-st="2"],
[data-state="3"] ~ .hero-cap [data-st="3"], [data-state="4"] ~ .hero-cap [data-st="4"] { display: inline; color: var(--ink); }
@media (max-width: 920px) {
  .demo-pairs, .demo-cuts { overflow-x: clip; }
  .pairs-stage { width: 164%; }
  .cuts-stage { width: 150%; }
  .cover-stage { position: relative; aspect-ratio: 1 / 1; container-type: size; }
  .cover-row { display: block; padding: 0; }
  .cv { position: absolute; left: 18cqw; top: 2cqw; width: 64cqw; visibility: visible; display: none; }
  [data-state="1"] .cv[data-solo~="1"], [data-state="2"] .cv[data-solo~="2"], [data-state="3"] .cv[data-solo~="3"],
  [data-state="4"] .cv[data-solo~="4"], [data-state="5"] .cv[data-solo~="5"] { display: flex; }
  .flip-stage { width: 100%; }
}
.showcase { --sc-w: 960; --sc-h: 600; }
.sc-stage {
  position: relative;
  container-type: inline-size;
  aspect-ratio: var(--sc-w) / var(--sc-h);
  overflow: hidden;
}
.sc-world { position: absolute; inset: 0; transform-origin: 0 0; }
.sc-layer {
  position: absolute; left: 0; top: 0;
  width: calc(var(--sc-w) * 1px); height: calc(var(--sc-h) * 1px);
  transform-origin: 0 0;
}
.sc-at {
  position: absolute;
  left: calc(var(--x) / var(--sc-w) * 100%);
  top: calc(var(--y) / var(--sc-h) * 100%);
  width: calc(var(--w) / var(--sc-w) * 100%);
}
.showcase [hidden] { display: none !important; }
.hp-stage {
  border-radius: 0;
  background: var(--desk);
  box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.05), var(--frame-shadow);
}
.hp-scene { position: absolute; inset: 0; }
.hp-world { will-change: transform; }
.hp-ph {
  display: block;
  aspect-ratio: 4 / 5; object-fit: cover;
  box-shadow: var(--hp-lift);
  background: #fff;
}
.hp-sel {
  position: absolute; pointer-events: none; z-index: 6;
  outline: 2px solid #ececec; outline-offset: -1px;
}
.hp-sel2 .hp-hn, .hp-sel.hp-multi .hp-hn { display: none; }
.hp-band {
  position: absolute; pointer-events: none; z-index: 6;
  border: 1px solid rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.07);
  border-radius: 3px;
}
.hp-mguide {
  position: absolute; left: 0; right: 0; height: 1px; z-index: 6;
  background: var(--brand); opacity: 0.85; pointer-events: none;
}
.hp-hn {
  position: absolute; width: 10px; height: 10px;
  background: var(--hp-accent); border: 1px solid rgba(0, 0, 0, 0.55); border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -50%);
}
.hp-hn[data-c="nw"] { left: 0; top: 0; }
.hp-hn[data-c="ne"] { left: 100%; top: 0; }
.hp-hn[data-c="sw"] { left: 0; top: 100%; }
.hp-hn[data-c="se"] { left: 100%; top: 100%; }
.hp-sheet {
  aspect-ratio: 595 / 731;
  background: #fff;
  box-shadow: var(--hp-lift);
}
.hp-sheet img { position: absolute; object-fit: cover; }
.hp-spr { position: absolute; inset: 0; overflow: hidden; }
.hp-pair { z-index: 2; }
.hp-folio {
  position: absolute; bottom: 100%; left: 2px; padding-bottom: 0.73cqw;
  font: 500 1.25cqw/1 var(--mono); color: #8d93a0; white-space: nowrap;
}
.hp-folio b { font-weight: 500; padding: 1px 5px; margin-left: 1px; }
.hp-folio.on b {
  font-weight: 600; background: var(--hp-accent); color: #141414; border-radius: 5px;
}
@font-face {
  font-family: 'Hanken Grotesk';
  src: url('/assets/fonts/hanken-grotesk-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
.hp-title {
  position: absolute; left: var(--tx, 31%); top: 44.74%; width: var(--tw, 38%);
  text-align: center; color: #2cff05;
  font-family: 'Hanken Grotesk', var(--sans);
  font-size: 1.926cqw; font-weight: 900;
  letter-spacing: -0.0199em; line-height: 0.9;
}
.hp-title.tsel { outline: 1.5px dashed var(--hp-accent); outline-offset: 4px; }
.hp-title.tsel::after, .hp-title.tsel::before {
  content: ''; position: absolute; background: var(--hp-accent);
  border: 1px solid rgba(0, 0, 0, 0.55); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hp-title.tsel::after { right: -8px; top: 50%; width: 4px; height: 16px; transform: translateY(-50%); }
.hp-title.tsel::before { bottom: -8px; left: 50%; width: 16px; height: 4px; transform: translateX(-50%); }
.hp-byline {
  position: absolute; left: 0; top: 91.48%; width: 100%;
  text-align: center; color: #2cff05;
  font-family: 'Hanken Grotesk', var(--sans);
  font-size: 0.602cqw; font-weight: 600;
  letter-spacing: 0.0457em; line-height: 1.35;
}
.hp-vguide {
  position: absolute; top: 0; bottom: 0; width: 1px; z-index: 6;
  background: var(--brand); opacity: 0.85; pointer-events: none;
}
.hp-cw { position: absolute; inset: 0; display: block; overflow: hidden; }
.hp-cw img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
.hp-croprect {
  position: absolute; display: block;
  outline: 1.5px solid #fff;
  box-shadow: 0 0 0 2000px rgba(10, 12, 16, 0.55);
}
.hp-cg { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.38); }
.hp-cg-h { top: auto; bottom: auto; left: 0; right: 0; width: auto; height: 1px; }
.hp-ch { position: absolute; width: 15px; height: 15px; border: 2.5px solid #fff; }
.hp-ch[data-c="nw"] { left: -1px; top: -1px; border-right: 0; border-bottom: 0; }
.hp-ch[data-c="ne"] { right: -1px; top: -1px; border-left: 0; border-bottom: 0; }
.hp-ch[data-c="sw"] { left: -1px; bottom: -1px; border-right: 0; border-top: 0; }
.hp-ch[data-c="se"] { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }
.hp-btn {
  appearance: none; border: 1px solid var(--hp-line); border-radius: 5px;
  padding: 6px 14px; font: 500 12.5px/1.2 var(--sans);
  background: var(--hp-hover); color: var(--hp-ink);
}
.hp-btn-boxy { padding: 9px 16px; }
.hp-btn-primary {
  background: var(--hp-accent); border-color: var(--hp-accent);
  color: var(--hp-accent-ink); font-weight: 600;
}
.hp-btn-primary.press { background: #fff; border-color: #fff; transform: scale(0.97); }
.hp-ui .hp-keyhud {
  position: absolute; left: 480px; bottom: 26px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px;
  padding: 8px 15px 8px 12px;
  background: rgba(20, 20, 22, 0.88); border: 1px solid var(--hp-line);
  border-radius: 10px; box-shadow: var(--hp-shadow);
  font: 400 12.5px/1.2 var(--sans); color: var(--hp-ink-dim);
  white-space: nowrap;
}
.hp-keys { display: flex; gap: 2px; }
.hp-keyhud kbd {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 19px; height: 19px; padding: 0 5px;
  font: 500 11px/1 var(--mono); color: var(--hp-ink-dim);
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--hp-line); border-radius: 6px;
}
.hp-what b { color: var(--hp-ink); font-weight: 600; }
.hp-offer {
  position: absolute;
  appearance: none; padding: 8px 14px;
  background: rgba(20, 20, 22, 0.76);
  border: 1px solid var(--hp-line); border-radius: 10px;
  box-shadow: var(--hp-shadow);
  font: 500 12.5px/1.2 var(--sans); color: var(--hp-ink);
  opacity: 0;
}
.hp-offer.press { background: rgba(40, 40, 44, 0.86); border-color: var(--hp-line-strong); transform: scale(0.97); }
.hp-ui .hp-printpill { left: 425px; top: 532px; }
.hp-ui .hp-bdlg { position: absolute; left: 706px; top: 152px; width: 262px; padding: 15px 16px 16px; }
.hp-ui .hp-bookpill { left: 368px; top: 528px; }
.hp-h3 { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--hp-ink); }
.hp-sub { margin: 2px 0 0; font: 400 11.5px/1.4 var(--mono); color: var(--hp-ink-faint); }
.hp-actions { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 16px; }
.hp-veil { position: absolute; inset: 0; z-index: 5; background: rgba(16, 19, 26, 0.42); }
.hp-ui .hp-pdlg { position: absolute; left: 300px; top: 136px; width: 360px; padding: 18px 20px 20px; }
.hp-pstack { position: relative; height: 141px; margin: 12px auto; width: 194px; }
.hp-psh {
  position: absolute; display: block; width: 180px; aspect-ratio: 560 / 396;
  background: #fff; border-radius: 2px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.hp-psh:nth-child(1) { left: 0; top: 14px; }
.hp-psh:nth-child(2) { left: 7px; top: 7px; }
.hp-psh-top { left: 14px; top: 0; }
.hp-psh-top img {
  position: absolute; display: block; top: 8%;
  width: 43.57%; aspect-ratio: 595 / 731; object-fit: cover;
}
.hp-pfold { position: absolute; left: 50%; top: 0; bottom: 0; width: 0; margin-left: -0.5px; }
.hp-pfold::before, .hp-pfold::after {
  content: ''; position: absolute; left: 0; width: 1px; height: 3.5px;
  background: rgba(20, 28, 50, 0.4);
}
.hp-pfold::before { top: calc(8% - 5.5px); }
.hp-pfold::after { top: calc(83.7% + 2px); }
.hp-phow { margin: 0; font: 400 12.5px/1.5 var(--sans); color: var(--hp-ink-dim); }
.hp-pmach { margin: 4px 0 0; font: 400 10.5px/1 var(--mono); color: var(--hp-ink-faint); letter-spacing: 0.02em; }
.hp-picker { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; }
.hp-bopt {
  appearance: none; display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 9px; border: 1px solid transparent; border-radius: 10px;
  background: transparent; text-align: left;
  font: 500 12.5px/1.2 var(--sans); color: var(--hp-ink-dim);
}
.hp-bopt .hp-glyph { width: 15px; height: 15px; flex: none; }
.hp-optext { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hp-opthint { font: 400 10.5px/1.35 var(--sans); color: var(--hp-ink-faint); }
.hp-bopt.active { background: var(--hp-on); color: var(--hp-ink); border-color: var(--hp-line); }
.hp-press { pointer-events: none; z-index: 9; overflow: hidden; }
.hp-press .hp-osheet { --w: 700; box-shadow: none; }
.hp-press .hp-osheet:first-child { box-shadow: 0 6px 26px rgba(20, 28, 50, 0.32); }
.hp-osheet {
  --mark-ink: rgba(20, 22, 28, 0.55);
  --w: 560;
  aspect-ratio: 560 / 396;
  background: #fff;
  box-shadow: var(--hp-lift);
}
.hp-osheet > img {
  position: absolute; display: block; top: 8%;
  width: 43.57%; aspect-ratio: 595 / 731; object-fit: cover;
}
.hp-colorbar {
  position: absolute; left: 6.43%; bottom: 2.4%; height: 9.4px;
  display: flex; gap: 1px;
}
.hp-colorbar i { display: block; width: 11px; height: 100%; background: var(--c); }
.hp-reg {
  position: absolute; left: 50%; width: 9.4px; height: 9.4px; margin-left: -4.7px;
  border: 1px solid var(--mark-ink); border-radius: 50%;
}
.hp-reg::before, .hp-reg::after { content: ''; position: absolute; background: var(--mark-ink); }
.hp-reg::before { left: 50%; top: -2.4px; bottom: -2.4px; width: 1px; margin-left: -0.5px; }
.hp-reg::after { top: 50%; left: -2.4px; right: -2.4px; height: 1px; margin-top: -0.5px; }
.hp-reg-t { top: 1.6%; left: 8%; }
.hp-reg-b { bottom: 1.6%; left: auto; right: 8%; }
.hp-opg {
  position: absolute; top: 8%; width: 43.57%; aspect-ratio: 595 / 731;
  background: #fff; overflow: hidden;
}
.hp-opg img { position: absolute; display: block; object-fit: cover; }
.hp-fold {
  position: absolute; left: 50%; width: 1px; margin-left: -0.5px; height: 9.4px;
  background: var(--mark-ink);
}
.hp-fold-t { top: calc(8% - 16.5px); }
.hp-fold-b { top: calc(83.7% + 7.1px); }
.hp-oslabel {
  position: absolute; left: calc(6.43% + 96px); bottom: 2.5%;
  font: 500 9px/1 var(--mono); letter-spacing: 0.06em; color: #5c6370;
}
.hp-cm { position: absolute; width: 0; height: 0; }
.hp-cm::before, .hp-cm::after { content: ''; position: absolute; background: var(--mark-ink); }
.hp-cm::before { width: 1px; height: 9.4px; left: -0.5px; }
.hp-cm::after { height: 1px; width: 9.4px; top: -0.5px; }
.hp-cm-tl { left: 6.43%; top: 8%; }
.hp-cm-tr { left: 93.57%; top: 8%; }
.hp-cm-bl { left: 6.43%; top: 83.7%; }
.hp-cm-br { left: 93.57%; top: 83.7%; }
:is(.hp-cm-tl, .hp-cm-tr)::before { bottom: 7.1px; }
:is(.hp-cm-bl, .hp-cm-br)::before { top: 7.1px; }
:is(.hp-cm-bl, .hp-cm-br)::after { top: auto; bottom: -0.5px; }
:is(.hp-cm-tl, .hp-cm-bl)::after { right: 7.1px; }
:is(.hp-cm-tr, .hp-cm-br)::after { left: 7.1px; }
.hero-play {
  position: relative;
  width: 100%;
  margin: 0 auto;
  max-width: max(560px, calc((100svh - 340px) * 8 / 5));
  --hp-accent: var(--app-accent);
  --hp-accent-ink: var(--app-accent-ink);
  --hp-ink: var(--app-ink);
  --hp-ink-dim: var(--app-ink-dim);
  --hp-ink-faint: var(--app-ink-faint);
  --hp-line: var(--app-line);
  --hp-line-strong: var(--app-line-strong);
  --hp-hover: var(--app-hover);
  --hp-on: var(--app-on);
  --hp-shadow: var(--app-shadow-deep);
  --hp-lift: var(--lift);
}
.hp-ui { pointer-events: none; z-index: 6; }
.hp-cur { position: absolute; z-index: 8; pointer-events: none;
  filter: drop-shadow(0 2px 3px rgba(20, 28, 50, 0.22)); }
.hp-cur img { display: block; transform-origin: 40% 40%; }
.hp-glove { width: 28.5px; height: 30px; }
.hp-fist { width: 28px; height: 25.6px; }
.hero-poster .hero-play { grid-area: stage; max-width: none; }
.hero-poster .hp-stage { box-shadow: inset 0 0 0 1px rgba(20, 20, 20, 0.05); }
.hp-pause { min-width: 48px; justify-content: center; }
.hero-cap .hp-pause::after { content: none; }
.hp-pause[hidden] { display: none; }
@media (max-width: 640px) {
  .hero-poster .hero-cap { flex-direction: row; gap: 24px; }
}
.hero-run {
  animation: hr-cycle 22s linear infinite;
  position: relative;
  width: 100%;
  margin: 0;
  container-type: inline-size;
  aspect-ratio: 1000 / 850;
}
.hr-item {
  animation-duration: 22s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  position: absolute;
  left: 50%; top: 47.5%;
  transform: translate(calc(-50% + var(--dx, 0cqw)), calc(-50% + var(--dy, 0cqw)));
  opacity: 0;
}
.hr-print img {
  display: block;
  height: var(--ph, 60cqw); width: auto;
  border-radius: 1px;
  box-shadow: 0 0.6cqw 2cqw rgba(20, 28, 50, 0.28);
}
.hr-sheet {
  display: flex;
  gap: 0.7cqw;
  height: 72cqw;
}
.hr-pg {
  height: 100%;
  background: #fff;
  border-radius: 0.25cqw;
  box-shadow: 0 0.6cqw 2cqw rgba(20, 28, 50, 0.32);
}
.hr-cover .hr-sheet {
  background: #fff;
  border-radius: 0.25cqw;
  box-shadow: 0 0.7cqw 2.4cqw rgba(20, 28, 50, 0.35);
}
.hr-pg img, .hr-cover img {
  display: block; height: 100%; width: auto;
  aspect-ratio: 900 / 1273; object-fit: cover;
  border-radius: 0.25cqw;
}
.hr-cf .hr-pg img, .hr-cf .hr-sheet > img,
.hr-cf .hr-sheet > picture > img { aspect-ratio: 595 / 731; }
.hr-b5 .hr-pg img, .hr-b5 .hr-sheet > img,
.hr-b5 .hr-sheet > picture > img { aspect-ratio: 707 / 1000; }
.hr-spread.hr-cf .hr-sheet { height: 64cqw; }
.hr-psheet .hr-pss {
  position: relative;
  display: block;
  height: 72cqw;
  aspect-ratio: 297 / 210;
  background: #fff;
  border-radius: 0.25cqw;
  box-shadow: 0 0.7cqw 2.4cqw rgba(20, 28, 50, 0.35);
}
.hr-psheet .cm { --mark-box: 1.2cqw; --mark-len: 0.9cqw; --mark-off: -1.6cqw; }
.hr-psheet .pl {
  position: absolute; top: 1.2cqw; left: 1.6cqw;
  font: 500 0.8cqw/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: #8d93a0;
}
.hr-psheet .pl.plr { left: auto; right: 1.6cqw; }
.hr-psheet .pp { position: absolute; inset: 8% 6% 6%; display: grid; }
.hr-psheet .pp8 { grid-template-columns: repeat(4, 1fr); grid-template-rows: 1fr 1fr; gap: 2.5%; }
.hr-psheet .ppg { position: relative; background: #fbfbfa; box-shadow: inset 0 0 0 1px rgba(28, 42, 85, 0.12); overflow: hidden; }
.hr-psheet .ppg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-psheet .ppg.flip { transform: rotate(180deg); }
.hr-item:nth-child(1) { animation-name: hr-b1; }
.hr-item:nth-child(2) { animation-name: hr-b2; }
.hr-item:nth-child(3) { animation-name: hr-b3; }
.hr-item:nth-child(4) { animation-name: hr-b4; }
.hr-item:nth-child(5) { animation-name: hr-b5; }
.hr-item:nth-child(6) { animation-name: hr-b6; }
.hr-item:nth-child(7) { animation-name: hr-b7; }
.hr-item:nth-child(8) { animation-name: hr-b8; }
.hr-item:nth-child(9) { animation-name: hr-b9; }
.hr-item:nth-child(10) { animation-name: hr-b10; }
.hr-item:nth-child(11) { animation-name: hr-b11; }
.hr-item:nth-child(12) { animation-name: hr-b12; }
.hr-item:nth-child(13) { animation-name: hr-b13; }
.hr-item:nth-child(14) { animation-name: hr-b14; }
.hr-item:nth-child(15) { animation-name: hr-b15; }
@keyframes hr-b1 { 0%, 1.4% { opacity: 0; } 1.401%, 100% { opacity: 1; } }
@keyframes hr-b2 { 0%, 6.4% { opacity: 0; } 6.401%, 100% { opacity: 1; } }
@keyframes hr-b3 { 0%, 13.6% { opacity: 0; } 13.601%, 100% { opacity: 1; } }
@keyframes hr-b4 { 0%, 20.9% { opacity: 0; } 20.901%, 100% { opacity: 1; } }
@keyframes hr-b5 { 0%, 25.5% { opacity: 0; } 25.501%, 100% { opacity: 1; } }
@keyframes hr-b6 { 0%, 30.0% { opacity: 0; } 30.001%, 100% { opacity: 1; } }
@keyframes hr-b7 { 0%, 37.7% { opacity: 0; } 37.701%, 100% { opacity: 1; } }
@keyframes hr-b8 { 0%, 42.3% { opacity: 0; } 42.301%, 100% { opacity: 1; } }
@keyframes hr-b9 { 0%, 48.6% { opacity: 0; } 48.601%, 100% { opacity: 1; } }
@keyframes hr-b10 { 0%, 56.8% { opacity: 0; } 56.801%, 100% { opacity: 1; } }
@keyframes hr-b11 { 0%, 61.4% { opacity: 0; } 61.401%, 100% { opacity: 1; } }
@keyframes hr-b12 { 0%, 69.1% { opacity: 0; } 69.101%, 100% { opacity: 1; } }
@keyframes hr-b13 { 0%, 73.6% { opacity: 0; } 73.601%, 100% { opacity: 1; } }
@keyframes hr-b14 { 0%, 78.2% { opacity: 0; } 78.201%, 100% { opacity: 1; } }
@keyframes hr-b15 { 0%, 85.5% { opacity: 0; } 85.501%, 100% { opacity: 1; } }
@keyframes hr-cycle {
  0%, 95.3% { opacity: 1; }
  98.5%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-run { animation: none; }
  .hr-item { animation: none; opacity: 1; }
}
.band-close:has(> .hero-run) .fin-claim { font-size: clamp(52px, 8vw, 116px); }
.band-close:has(> .hero-run) { padding-bottom: 0; }
.band-close .hero-run { max-width: 900px; margin: clamp(52px, 7vh, 92px) auto 0; }
@media (max-width: 920px) {
  .band-close:has(> .hero-run) .fin-claim { font-size: clamp(40px, 11vw, 64px); }
}