.page--kv, .page--navy, .page--cyan, .page--red, .page--yellow, .page--paper {
  isolation: isolate; will-change: transform; color: var(--c-cream); text-align: center; text-shadow: var(--ink-line);   
  background-color: var(--pg-bg);
  background-image: linear-gradient(var(--pg-grid) 1px, transparent 1px), linear-gradient(90deg, var(--pg-grid) 1px, transparent 1px),
    radial-gradient(circle at 30% 40%, transparent 11px, var(--pg-grid) 11px 13px, transparent 13px);
  background-size: 22px 22px, 22px 22px, 150px 150px;
}

.page--kv, .page--navy { --pg-bg: var(--c-navy-deep); --pg-grid: var(--c-grid-dark); --sec-band: var(--c-navy-2); }
.page--cyan, .page--red, .page--yellow, .page--paper { --pg-grid: var(--grid-tone, var(--c-grid-light)); --pg-fx: url("assets/grain-dark.png") 0 0 / 160px 160px; --pg-fx-o: var(--grain-o, 0.45); }
.page--kv { --pg-fx: url("assets/grain-light.png") 0 0 / 160px 160px, url("assets/p1-city.jpg") 50% 100% / cover; --pg-fx-o: 0.55; --band-bg: var(--c-cyan); }   
.page--dim { --pg-fx-o: 0.32; }   
.page--navy { --pg-fx: url("assets/grain-light.png") 0 0 / 160px 160px; --pg-fx-o: 0.45; --band-bg: var(--c-yellow); }
.page--cyan { --pg-bg: var(--c-cyan); --band-bg: var(--c-yellow); --sec-band: color-mix(in srgb, var(--c-cyan) 62%, var(--c-cream)); }   
.page--red { --grain-o: 0; --grid-tone: var(--c-grid-red); --pg-bg: var(--c-red-soft); --band-bg: var(--c-cyan); --sec-band: color-mix(in srgb, var(--c-red) 55%, var(--c-cream)); }
.page--yellow { --pg-bg: var(--c-yellow); --band-bg: var(--c-red); --sec-band: color-mix(in srgb, var(--c-yellow) 45%, var(--c-cream)); }
.page--paper { --pg-bg: var(--c-cream); --band-bg: var(--c-cyan); --sec-band: color-mix(in srgb, var(--c-cyan) 45%, var(--c-cream)); }
.page--kv::before, .page--navy::before, .page--cyan::before, .page--red::before, .page--yellow::before, .page--paper::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: var(--pg-fx); opacity: var(--pg-fx-o);   
}
.page--kv::after, .page--navy::after, .page--cyan::after, .page--red::after, .page--yellow::after, .page--paper::after {
  content: ""; position: absolute; left: -6%; right: calc(-6% - 320px); bottom: -6px; z-index: 4; height: var(--band-h);
  background: var(--band-bg) url("assets/symbols.svg") 0 50% / auto 80% repeat-x;
  border-block: var(--line) solid var(--c-navy); rotate: var(--tilt);
  animation: band-flow var(--band-speed) linear infinite;
}
@keyframes band-flow { to { transform: translateX(-320px); } }   

.page:not(.is-active)::before, .page:not(.is-active)::after, .page:not(.is-active) *, .page:not(.is-active) *::before, .page:not(.is-active) *::after { animation-play-state: paused; }
.page:last-child::after { content: none; }   

.sec-head { position: relative; display: grid; place-items: center; margin-top: calc(4.6% - 3px); margin-bottom: 15px; margin-inline: calc(var(--gutter) * -1); rotate: -4deg; }   
.sec-head::before {
  content: ""; position: absolute; left: -8%; right: calc(-8% - 320px); top: 50%; height: 30px; translate: 0 -50%;
  background: var(--sec-band) url("assets/symbols.svg") 0 50% / auto 70% repeat-x; border-block: var(--line) solid var(--c-navy);
  animation: band-flow var(--band-speed) linear infinite;
}

.plaque {
  position: relative; align-self: center; padding: 0.12em 0.75em 0.3em;   
  font-family: var(--font-en); font-weight: 800; font-size: 1.4em; line-height: 1; letter-spacing: 0.02em;
  color: var(--c-cream); text-shadow: var(--ink-line-l);
  border: var(--line) solid var(--c-navy); border-radius: 4px;
  --pf-shadow: 6px 6px 0 0 var(--c-yellow), 6px 6px 0 var(--line); --pf-ink: var(--c-navy);
}
.plaque--navy { background: var(--c-navy-2); }
.plaque--red { background: var(--c-red-soft); }

.pills { display: flex; flex-direction: column; align-items: center; gap: 0.55em; }
.pill {
  display: inline-block; padding: 0.3em 0.95em 0.32em; font-weight: 900; font-size: var(--fs-pill); line-height: 1.25;
  color: var(--c-cream); text-shadow: var(--ink-line);
  border: 3px solid var(--c-cream); outline: var(--line) solid var(--c-navy);
  --pf-shadow: 4px 5px 0 var(--line); --pf-ink: var(--c-navy);
}
.pill:first-child { translate: -0.7em 0; }
.pill + .pill { translate: 0.7em 0; }
.pills--head { align-items: stretch; font-size: 1.3em; }   
.pills--head .pill { padding-inline: 0.7em; }
.pills--head .pill:first-child { align-self: flex-start; translate: none; white-space: nowrap; }
.pills--head .pill + .pill { align-self: flex-end; translate: -0.6em 0; }
.pill--red { background: var(--c-red-deep); }
.pill--navy { background: var(--c-navy-2); }
.pill--yellow { background: var(--c-yellow); }
.pill--blue { background: var(--c-blue); }

.spike { position: relative; z-index: 0; display: inline-grid; place-items: center; width: 1.4em; height: 1.3em; color: var(--c-cream); text-shadow: 3px 3px 0 var(--c-navy); }   
.spike::before, .spike::after {
  content: ""; position: absolute; z-index: -1;
  clip-path: polygon(50% 0%, 61% 14%, 79% 6%, 81% 24%, 98% 28%, 89% 44%, 100% 58%, 84% 66%, 88% 84%, 70% 82%, 60% 98%, 48% 86%, 32% 98%, 26% 80%, 8% 84%, 13% 66%, 0% 54%, 12% 42%, 4% 24%, 22% 22%, 24% 4%, 40% 14%);
}
.spike::before { inset: 0; background: var(--spike-ring, var(--c-navy)); }
.spike::after { inset: 0.07em; background: var(--spike-bg); }
.spike--red { --spike-bg: var(--c-red); }
.spike--yellow { --spike-bg: var(--c-yellow); --spike-ring: var(--c-cream); color: var(--c-navy); text-shadow: 2px 2px 0 var(--c-cream); }   
.spike--blue { --spike-bg: var(--c-blue); }
.speed { white-space: nowrap; }
.speed::before, .speed::after {
  content: ""; display: inline-block; vertical-align: middle; width: 0.9em; height: 0.75em; margin-inline: 0.35em;
  background: repeating-linear-gradient(var(--c-cyan) 0 2px, transparent 2px 6px); rotate: var(--speed-tilt);
}
.speed::before { --speed-tilt: -24deg; }
.speed::after { --speed-tilt: 24deg; }

.head { display: grid; justify-items: center; gap: calc(var(--sp-1) * 2); }
.kv__catch .ln { white-space: nowrap; }
.kv__tail { display: inline-block; }
.kv__catch { font-family: var(--font-head); font-weight: 900; font-size: var(--fs-catch); line-height: 1.22; letter-spacing: 0; text-shadow: var(--ink-line-l), 6px 6px 0 var(--c-cyan); }   

.kv__stage { position: relative; flex: 1 1 0; min-height: 0; max-height: min(86vw, 420px); margin-inline: calc(var(--gutter) * -1); }   
.kv__crowd { position: absolute; left: 0; top: 0; width: 100%; height: auto; --pf-from: 0.9; --pf-dur: 700ms; }
.kv__lamp { position: absolute; left: var(--x); top: var(--y); --pf-size: 18px; --pf-color: var(--c-yellow); }
.sticker { position: absolute; height: auto; filter: drop-shadow(3px 4px 0 var(--c-navy)); --pf-shadow: 0 0 0; --pf-ink: transparent; }

.board {
  position: relative; z-index: 1; padding: 13px; margin-inline: calc(var(--gutter) * -0.6); text-shadow: var(--ink-line); --pf-from: 0.94;
  --jag-out: polygon(0.0% 0.0%, 4.5% 4.0%, 9.1% 0.0%, 13.6% 3.5%, 18.2% 0.0%, 22.7% 5.0%, 27.3% 0.0%, 31.8% 3.2%, 36.4% 0.0%, 40.9% 4.6%, 45.5% 0.0%, 50.0% 4.1%, 54.5% 0.0%, 59.1% 3.2%, 63.6% 0.0%, 68.2% 4.5%, 72.7% 0.0%, 77.3% 3.1%, 81.8% 0.0%, 86.4% 4.3%, 90.9% 0.0%, 95.5% 3.2%, 100.0% 0.0%, 97.4% 6.2%, 100.0% 12.5%, 96.6% 18.8%, 100.0% 25.0%, 95.6% 31.2%, 100.0% 37.5%, 97.3% 43.8%, 100.0% 50.0%, 97.1% 56.2%, 100.0% 62.5%, 96.1% 68.8%, 100.0% 75.0%, 95.3% 81.2%, 100.0% 87.5%, 96.2% 93.8%, 100.0% 100.0%, 95.5% 95.8%, 90.9% 100.0%, 86.4% 94.1%, 81.8% 100.0%, 77.3% 96.9%, 72.7% 100.0%, 68.2% 94.4%, 63.6% 100.0%, 59.1% 96.1%, 54.5% 100.0%, 50.0% 96.6%, 45.5% 100.0%, 40.9% 96.6%, 36.4% 100.0%, 31.8% 96.1%, 27.3% 100.0%, 22.7% 94.6%, 18.2% 100.0%, 13.6% 96.5%, 9.1% 100.0%, 4.5% 95.3%, 0.0% 100.0%, 3.9% 93.8%, 0.0% 87.5%, 3.3% 81.2%, 0.0% 75.0%, 3.7% 68.8%, 0.0% 62.5%, 2.6% 56.2%, 0.0% 50.0%, 2.5% 43.8%, 0.0% 37.5%, 2.9% 31.2%, 0.0% 25.0%, 4.0% 18.8%, 0.0% 12.5%, 3.4% 6.2%);
  --jag-in: polygon(0.0% 0.0%, 3.8% 2.8%, 7.7% 0.0%, 11.5% 3.3%, 15.4% 0.0%, 19.2% 3.1%, 23.1% 0.0%, 26.9% 2.7%, 30.8% 0.0%, 34.6% 3.8%, 38.5% 0.0%, 42.3% 3.6%, 46.2% 0.0%, 50.0% 2.6%, 53.8% 0.0%, 57.7% 3.3%, 61.5% 0.0%, 65.4% 3.2%, 69.2% 0.0%, 73.1% 3.9%, 76.9% 0.0%, 80.8% 3.6%, 84.6% 0.0%, 88.5% 2.7%, 92.3% 0.0%, 96.2% 4.2%, 100.0% 0.0%, 98.0% 5.6%, 100.0% 11.1%, 97.4% 16.7%, 100.0% 22.2%, 96.8% 27.8%, 100.0% 33.3%, 97.9% 38.9%, 100.0% 44.4%, 97.3% 50.0%, 100.0% 55.6%, 98.1% 61.1%, 100.0% 66.7%, 97.0% 72.2%, 100.0% 77.8%, 96.8% 83.3%, 100.0% 88.9%, 97.2% 94.4%, 100.0% 100.0%, 96.2% 96.1%, 92.3% 100.0%, 88.5% 97.2%, 84.6% 100.0%, 80.8% 96.4%, 76.9% 100.0%, 73.1% 96.7%, 69.2% 100.0%, 65.4% 96.7%, 61.5% 100.0%, 57.7% 96.9%, 53.8% 100.0%, 50.0% 96.1%, 46.2% 100.0%, 42.3% 95.9%, 38.5% 100.0%, 34.6% 96.9%, 30.8% 100.0%, 26.9% 96.5%, 23.1% 100.0%, 19.2% 97.8%, 15.4% 100.0%, 11.5% 96.4%, 7.7% 100.0%, 3.8% 96.5%, 0.0% 100.0%, 3.6% 94.4%, 0.0% 88.9%, 3.3% 83.3%, 0.0% 77.8%, 2.3% 72.2%, 0.0% 66.7%, 2.5% 61.1%, 0.0% 55.6%, 3.0% 50.0%, 0.0% 44.4%, 1.8% 38.9%, 0.0% 33.3%, 2.6% 27.8%, 0.0% 22.2%, 2.1% 16.7%, 0.0% 11.1%, 2.0% 5.6%);
}
.board::before, .board::after { content: ""; position: absolute; z-index: -1; clip-path: var(--jag-out); }
.board::before { inset: 0; background: var(--c-navy); }
.board::after { inset: 3px; background: var(--c-yellow); }
.board__in { display: grid; justify-items: center; gap: var(--sp-1); padding: 0.9em 0.7em 1em; background: var(--c-red-soft); clip-path: var(--jag-in); }
.board__sub { font-size: max(1.45em, 21px); font-weight: 900; line-height: 1.3; }   
.board__em { display: block; color: var(--c-yellow); }
.board__body { font-size: 13px; line-height: 1.6; text-shadow: var(--ink-line), 1.5px 1.5px 0 var(--c-ink), -1.5px -1.5px 0 var(--c-ink), 1.5px -1.5px 0 var(--c-ink), -1.5px 1.5px 0 var(--c-ink); }   
.board__close { font-size: max(1.25em, 14px); line-height: 1.5; }
.board__close { justify-self: stretch; margin-top: var(--sp-1); padding: 0.25em 0.4em; color: var(--c-yellow); font-weight: 900; background: var(--c-blue); }

.head--peek { gap: 0; }
.peek { position: relative; z-index: 2; justify-self: end; width: min(44%, 200px); height: auto; margin-bottom: -0.55em; margin-right: -0.2em; --pf-from: 0.9; }
.burst {
  position: relative; align-self: center; flex-shrink: 0; height: min(30dvh, 62vw, 290px); aspect-ratio: 1.12;
  --burst: polygon(50.0% 1.0%, 56.9% 11.4%, 67.1% 4.0%, 71.5% 13.5%, 82.1% 12.5%, 80.6% 24.8%, 93.3% 25.5%, 90.4% 35.6%, 99.2% 41.5%, 90.0% 50.0%, 99.2% 58.5%, 90.4% 64.4%, 93.3% 74.5%, 80.6% 75.2%, 82.1% 87.5%, 71.5% 86.5%, 67.1% 96.0%, 56.9% 88.6%, 50.0% 99.0%, 42.5% 91.5%, 32.9% 96.0%, 30.0% 83.9%, 17.9% 87.5%, 17.1% 77.1%, 6.7% 74.5%, 12.4% 63.4%, 0.8% 58.5%, 7.0% 50.0%, 0.8% 41.5%, 12.4% 36.6%, 6.7% 25.5%, 17.1% 22.9%, 17.9% 12.5%, 30.0% 16.1%, 32.9% 4.0%, 42.5% 8.5%);
}
.burst::before { content: ""; position: absolute; inset: 0; background: var(--c-navy); clip-path: var(--burst); }
.burst__bolt { position: absolute; inset: 5px; background: var(--c-yellow); clip-path: var(--burst); animation: bolt-flicker 1.4s steps(2, jump-none) infinite; }

.burst__img {
  position: absolute; left: 50%; top: 50%; height: 80%; width: auto; aspect-ratio: 1; translate: -50% -50%; object-fit: cover; object-position: 35% 40%;
  border: 3px solid var(--c-cream); outline: var(--line) solid var(--c-navy); border-radius: 50%; box-shadow: var(--drop) var(--drop) 0 var(--line) var(--c-red);
}
.burst .sticker--plug { left: -14%; top: 56%; width: 34%; rotate: -14deg; }
.burst .sticker--tester { right: -10%; top: -6%; width: 25%; rotate: 18deg; }
@keyframes bolt-flicker { 0% { scale: 1; rotate: 0deg; } 100% { scale: 1.035; rotate: 4deg; } }

.txt { display: grid; gap: var(--sp-p); }
.kw { font-weight: 900; color: var(--c-yellow); }
.txt .ln { --pf-from: 0.97; }

.stk-row { display: flex; justify-content: center; align-items: center; gap: 3%; flex-shrink: 0; }
.stk-row__img { width: 29%; height: auto; filter: drop-shadow(3px 4px 0 var(--c-navy)); }   
.stk-row__img:nth-child(1) { rotate: -8deg; }
.stk-row__img:nth-child(2) { rotate: 5deg; translate: 0 -10%; }
.stk-row__img:nth-child(3) { rotate: -4deg; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; margin-inline: calc(var(--gutter) * -0.6); }
.duo__chara { justify-self: center; width: 100%; max-width: 130px; height: auto; max-height: min(30dvh, 280px); object-fit: contain; filter: drop-shadow(3px 4px 0 var(--c-navy)); --pf-from: 0.9; }
.pills--duo { padding-bottom: 1.2em; }
.pills--duo .pill:first-child { translate: 0.7em 0; }   
.pills--duo .pill + .pill { translate: -1.6em 0; }

.steps { display: grid; justify-items: center; gap: 0.55em; margin: 0; padding: 0; list-style: none; }
.step {
  display: grid; justify-items: center; gap: 0.1em; padding: 0.4em 0.9em 0.5em; background: var(--c-navy-2);
  border: var(--line) solid var(--c-navy); --pf-shadow: 4px 4px 0; --pf-ink: var(--c-navy);
}
.step:nth-child(1) { width: 78%; }
.step:nth-child(2) { width: 89%; }
.step:nth-child(3) { width: 100%; }
.step__no { font-family: var(--font-en); font-weight: 800; font-size: 1.15em; line-height: 1.1; color: var(--c-yellow); }
.step__txt { font-weight: 900; font-size: max(0.95em, 13px); line-height: 1.5; }

.boards { position: relative; flex-shrink: 0; align-self: center; width: 92%; aspect-ratio: 1.9; margin: 0; }   
.boards__img {
  position: absolute; top: 0; height: 100%; width: auto; aspect-ratio: 640 / 720; object-fit: cover;
  border: 4px solid var(--c-cream); outline: var(--line) solid var(--c-navy); --pf-shadow: 5px 5px 0; --pf-ink: var(--c-navy);
}
.boards__img--l { left: 0; rotate: -6deg; }
.boards__img--r { right: 0; top: 5%; rotate: 5deg; }
.boards::after { content: ""; position: absolute; left: 50%; top: -6%; z-index: 1; width: 26%; height: 11%; translate: -50% 0; rotate: -3deg; background: color-mix(in srgb, var(--c-yellow) 80%, transparent); border-inline: 2px dashed var(--c-navy); }

.biz { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 0.5em; margin: 0; padding: 0; list-style: none; }
.biz__item { display: grid; justify-items: center; gap: 0.25em; }
.biz__item img { width: 100%; height: auto; max-height: 13dvh; object-fit: contain; filter: drop-shadow(3px 4px 0 var(--c-navy)); }
.biz__item:nth-child(odd) img { rotate: -6deg; }
.biz__item:nth-child(even) img { rotate: 5deg; }
.biz__en { font-family: var(--font-en); font-weight: 800; font-size: max(0.9em, 13px); line-height: 1; color: var(--c-cyan); }
.biz__item--next .biz__en { color: var(--c-yellow); animation: next-blink 1s steps(2, jump-none) infinite; }
@keyframes next-blink { 50% { opacity: 0.35; } }

.frame, .rail-logo, .rail-side { --rough: polygon(0.0% 0.5%, 11.1% 0.1%, 22.2% 0.0%, 33.3% 0.2%, 44.4% 0.1%, 55.6% 0.5%, 66.7% 0.0%, 77.8% 1.2%, 88.9% 0.9%, 99.8% 0.0%, 99.6% 11.1%, 99.5% 22.2%, 99.5% 33.3%, 99.8% 44.4%, 98.8% 55.6%, 98.6% 66.7%, 99.3% 77.8%, 99.3% 88.9%, 100.0% 99.9%, 88.9% 99.9%, 77.8% 99.5%, 66.7% 99.6%, 55.6% 98.8%, 44.4% 99.8%, 33.3% 100.0%, 22.2% 98.7%, 11.1% 99.3%, 0.2% 100.0%, 0.8% 88.9%, 0.0% 77.8%, 0.7% 66.7%, 1.4% 55.6%, 1.2% 44.4%, 1.0% 33.3%, 0.4% 22.2%, 0.5% 11.1%); }

.frame {
  position: relative; isolation: isolate; flex-shrink: 0; display: grid; gap: var(--sp-p);
  margin-top: calc(var(--sit-h) * 0.58 - var(--sp-g)); padding: calc(var(--sit-h) * 0.42 + 0.4em) 1.1em 1.2em;
  --sit-h: min(25dvh, 46vw, 200px);
}
.frame::before, .frame::after { content: ""; position: absolute; z-index: -1; clip-path: var(--rough); }
.frame::before { inset: 0; background: var(--c-navy); }
.frame::after {
  inset: 3px;
  background: repeating-linear-gradient(-50deg, var(--c-navy) 0 1.5px, transparent 1.5px 9px) 100% 0 / 30% 26% no-repeat,
    repeating-linear-gradient(-50deg, var(--c-navy) 0 1.5px, transparent 1.5px 9px) 0 100% / 30% 22% no-repeat, var(--c-cyan);   
}
.sit { position: absolute; left: 50%; top: calc(var(--sit-h) * -0.58); z-index: 1; width: auto; height: var(--sit-h); translate: -50% 0; filter: drop-shadow(3px 4px 0 var(--c-navy)); --pf-from: 0.92; }
.frame .sticker { z-index: 2; width: auto; }
.float--clock { left: 3%; top: calc(var(--sit-h) * -0.5); height: calc(var(--sit-h) * 0.42); rotate: -12deg; }
.float--pliers { right: 2%; top: calc(var(--sit-h) * -0.42); height: calc(var(--sit-h) * 0.36); rotate: 14deg; }
.float--bulb { right: 20%; top: calc(var(--sit-h) * -0.62); height: calc(var(--sit-h) * 0.24); rotate: -8deg; }
.band-close {
  justify-self: center; padding: 0.3em 0.9em; font-weight: 900; font-size: max(1.1em, 15px); line-height: 1.5; color: var(--c-yellow);
  background: var(--c-blue); border: var(--line) solid var(--c-navy); --pf-shadow: 4px 4px 0; --pf-ink: var(--c-navy);
}

.beach { position: relative; flex-shrink: 0; align-self: center; width: min(100%, calc(14dvh * 2.34)); margin: 0; rotate: -2deg; --pf-from: 0.92; }
.beach__img { display: block; width: 100%; height: auto; border: 4px solid var(--c-cream); outline: var(--line) solid var(--c-navy); box-shadow: var(--drop) var(--drop) 0 var(--line) var(--c-navy); }
.beach .sticker--license { right: -7%; bottom: -18%; width: 27%; rotate: 10deg; }
.blast {
  position: relative; isolation: isolate; padding: 16px;
  --blast-out: polygon(0.0% 0.7%, 7.1% 5.9%, 14.3% 1.5%, 21.4% 5.7%, 28.6% 1.2%, 35.7% 6.7%, 42.9% 0.1%, 50.0% 7.2%, 57.1% 0.1%, 64.3% 7.0%, 71.4% 0.2%, 78.6% 5.7%, 85.7% 1.0%, 92.9% 8.4%, 99.7% 0.0%, 93.8% 7.1%, 98.6% 14.3%, 91.2% 21.4%, 98.7% 28.6%, 93.2% 35.7%, 97.8% 42.9%, 94.4% 50.0%, 98.1% 57.1%, 93.6% 64.3%, 99.7% 71.4%, 94.2% 78.6%, 99.3% 85.7%, 91.7% 92.9%, 100.0% 99.6%, 92.9% 92.5%, 85.7% 98.6%, 78.6% 93.3%, 71.4% 98.8%, 64.3% 94.4%, 57.1% 99.9%, 50.0% 93.9%, 42.9% 98.5%, 35.7% 93.1%, 28.6% 99.3%, 21.4% 92.5%, 14.3% 99.0%, 7.1% 93.5%, 1.8% 100.0%, 7.9% 92.9%, 0.5% 85.7%, 7.5% 78.6%, 1.2% 71.4%, 8.6% 64.3%, 1.6% 57.1%, 6.4% 50.0%, 2.2% 42.9%, 5.8% 35.7%, 0.9% 28.6%, 8.1% 21.4%, 0.3% 14.3%, 7.2% 7.1%);
  --blast-in: polygon(0.0% 0.0%, 5.6% 4.3%, 11.1% 1.0%, 16.7% 4.1%, 22.2% 1.1%, 27.8% 3.6%, 33.3% 0.9%, 38.9% 4.2%, 44.4% 0.7%, 50.0% 3.9%, 55.6% 1.0%, 61.1% 4.9%, 66.7% 0.6%, 72.2% 4.3%, 77.8% 0.1%, 83.3% 4.4%, 88.9% 0.8%, 94.4% 5.0%, 99.0% 0.0%, 96.4% 5.6%, 99.5% 11.1%, 95.7% 16.7%, 100.0% 22.2%, 96.1% 27.8%, 99.8% 33.3%, 96.8% 38.9%, 99.9% 44.4%, 95.5% 50.0%, 99.8% 55.6%, 96.5% 61.1%, 99.5% 66.7%, 95.3% 72.2%, 99.9% 77.8%, 96.1% 83.3%, 99.3% 88.9%, 95.2% 94.4%, 100.0% 99.0%, 94.4% 95.3%, 88.9% 99.7%, 83.3% 96.2%, 77.8% 99.6%, 72.2% 95.2%, 66.7% 98.8%, 61.1% 96.7%, 55.6% 99.8%, 50.0% 96.5%, 44.4% 99.7%, 38.9% 96.0%, 33.3% 99.3%, 27.8% 96.5%, 22.2% 100.0%, 16.7% 96.2%, 11.1% 99.5%, 5.6% 95.9%, 1.2% 100.0%, 4.4% 94.4%, 0.6% 88.9%, 4.2% 83.3%, 0.8% 77.8%, 3.1% 72.2%, 1.1% 66.7%, 4.6% 61.1%, 1.1% 55.6%, 4.6% 50.0%, 0.5% 44.4%, 3.8% 38.9%, 0.1% 33.3%, 4.3% 27.8%, 0.1% 22.2%, 3.1% 16.7%, 0.3% 11.1%, 3.3% 5.6%);
}
.blast::before, .blast::after { content: ""; position: absolute; z-index: -1; clip-path: var(--blast-out); }
.blast::before { inset: 0; background: var(--c-navy); }
.blast::after { inset: 3px; background: var(--c-yellow); }
.blast__in { display: grid; gap: var(--sp-p); padding: 1.1em 0.9em 1.2em; background: var(--c-red-soft); clip-path: var(--blast-in); }
.perks { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.45em 0.4em; margin: 0; padding: 0; list-style: none; }
.perk { padding: 0.15em 0.6em 0.22em; font-weight: 900; font-size: max(0.95em, 13px); line-height: 1.45; background: var(--c-navy-2); border: 2px solid var(--c-navy); box-shadow: 3px 3px 0 var(--c-navy); }
.perk--star { color: var(--c-white); text-shadow: var(--ink-line), 1.5px 1.5px 0 var(--c-ink), -1.5px -1.5px 0 var(--c-ink), 1.5px -1.5px 0 var(--c-ink), -1.5px 1.5px 0 var(--c-ink); background: var(--c-red-soft); }   
.note { font-weight: 700; font-size: var(--fs-min); line-height: 1.5; }

.switch-img { display: block; width: auto; height: 3.2em; margin: -0.2em auto 0.2em; filter: drop-shadow(2px 3px 0 var(--c-navy)); }

.emp { position: relative; display: inline-block; padding: 0.15em 0.5em 0.05em; color: var(--c-cyan); }
.emp::before, .emp::after {
  content: ""; position: absolute; width: 0.5em; height: 0.42em;
  background: repeating-linear-gradient(-60deg, var(--c-cyan) 0 2px, var(--c-navy) 2px 3px, transparent 3px 6px);
}
.emp::before { left: 0; top: 0; }
.emp::after { right: 0; bottom: 0; }
.emp--burst { z-index: 0; padding-inline: 0.35em; color: var(--c-navy); text-shadow: none; }   
.emp--burst::before {
  inset: -0.08em 0; z-index: -1; width: auto; height: auto; background: var(--c-yellow);
  clip-path: polygon(50% 0%, 59% 16%, 74% 4%, 76% 22%, 95% 15%, 87% 36%, 100% 47%, 86% 58%, 97% 78%, 76% 76%, 72% 96%, 58% 84%, 46% 100%, 38% 83%, 20% 94%, 22% 74%, 2% 75%, 13% 56%, 0% 42%, 16% 34%, 6% 13%, 26% 20%, 30% 2%, 42% 15%);
}

.sheet {
  position: relative; padding: 0.6em 1em; color: var(--c-navy); text-shadow: none; text-align: left;
  background: var(--c-cream); border: var(--line) solid var(--c-navy); box-shadow: var(--drop) var(--drop) 0 var(--c-navy);
}
.tbl { display: grid; margin: 0; }
.tbl__row { display: grid; grid-template-columns: 5.6em 1fr; gap: 0.8em; padding: 0.6em 0; border-bottom: 1px dashed var(--color-line); }
.tbl__row:last-child { border-bottom: 0; }
.tbl dt { font-weight: 900; color: var(--c-navy-2); }
.tbl dd { margin: 0; font-weight: 700; line-height: 1.65; }
.company__mark { align-self: flex-end; margin-bottom: -3px; width: auto; height: min(19dvh, 170px); margin-right: 0.4em; filter: drop-shadow(3px 4px 0 var(--c-navy)); }
.form.sheet { padding: 1.1em 1em 1.3em; }
.form__fields { display: grid; gap: 1.1em; }
.entry-btn {
  justify-self: center; min-width: 80%; min-height: 60px; margin-top: 0.4em; padding: 0.2em 1.6em; border-radius: var(--radius-pill);
  font: inherit; font-weight: 900; font-size: max(1.1em, 16px); color: var(--c-cream); text-shadow: var(--ink-line); letter-spacing: 0.04em;
  background: var(--c-red-soft); border: var(--line) solid var(--c-navy); box-shadow: var(--drop) var(--drop) 0 var(--c-navy), 0 0 0 0 var(--c-glow);
  cursor: pointer; animation: entry-glow 1.8s ease-out infinite;
}
.entry-btn__en { font-family: var(--font-en); font-weight: 800; font-size: 1.2em; }
@keyframes entry-glow { 70%, 100% { box-shadow: var(--drop) var(--drop) 0 var(--c-navy), 0 0 0 14px transparent; } }

.pbtn {
  display: inline-flex; align-items: center; justify-content: center; height: 34px; padding: 0 12px;
  font-weight: 900; font-size: var(--fs-ui); letter-spacing: 0.04em; white-space: nowrap; color: var(--c-cream); text-shadow: var(--ink-line);
  background: var(--c-cream); border: var(--line) solid var(--c-navy); border-radius: var(--radius-pill);
  transition: translate var(--dur-hover) ease-in, box-shadow var(--dur-hover) ease-in;
}
.pbtn--entry { background: var(--c-red-soft); }
.pbtn--l { height: 56px; font-size: 17px; box-shadow: 4px 4px 0 var(--c-navy); }
@media (hover: hover) {
  .pbtn:hover { translate: 0 -2px; box-shadow: 4px 6px 0 var(--c-navy); }
}

.page--speed {
  --pg-fx: url("assets/grain-light.png") 0 0 / 160px 160px,
    repeating-conic-gradient(from 3deg at 50% 46%, transparent 0deg 9deg, var(--c-cyan) 9deg 9.5deg, transparent 9.5deg 17deg, var(--c-red) 17deg 17.8deg, transparent 17.8deg 23deg, var(--c-yellow) 23deg 23.4deg, transparent 23.4deg 31deg, var(--c-cream) 31deg 31.3deg, transparent 31.3deg 36deg);
  --pg-fx-o: 0.5;
}
.page--speed::before { mask-image: radial-gradient(circle at 50% 46%, transparent 12%, var(--c-navy) 55%); animation: speed-zoom 1.6s linear infinite; }
@keyframes speed-zoom { from { scale: 1; } to { scale: 1.12; } }

.rail {
  overflow: hidden;
  background: url("assets/grain-light.png") 0 0 / 160px 160px,
    linear-gradient(var(--c-grid-dark) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, var(--c-grid-dark) 1px, transparent 1px) 0 0 / 22px 22px;
}

.rail-logo, .rail-side { position: relative; isolation: isolate; padding: 26px 28px; filter: drop-shadow(var(--drop) var(--drop) 0 var(--c-cyan)); }
.rail-logo::before, .rail-side::before, .rail-logo::after, .rail-side::after { content: ""; position: absolute; z-index: -1; clip-path: var(--rough); }
.rail-logo::before, .rail-side::before { inset: 0; background: var(--c-navy); }
.rail-logo::after, .rail-side::after {
  inset: 3px;
  background: repeating-linear-gradient(-50deg, var(--c-navy) 0 1.5px, transparent 1.5px 9px) 100% 0 / 64px 18px no-repeat,
    repeating-linear-gradient(-50deg, var(--c-navy) 0 1.5px, transparent 1.5px 9px) 0 100% / 64px 18px no-repeat, var(--c-cream);   
}
.rail > * { position: relative; z-index: 1; }
.rail::before, .rail::after {
  content: ""; position: absolute; left: -15%; right: calc(-15% - 320px); height: 30px;
  background: var(--rail-band) url("assets/symbols.svg") 0 50% / auto 80% repeat-x;
  border-block: var(--line) solid var(--c-navy); animation: band-flow var(--band-speed) linear infinite;
}
.rail::before { top: 9%; rotate: -7deg; --rail-band: var(--c-yellow); }
.rail::after { bottom: 11%; rotate: 5deg; --rail-band: var(--c-red); }

@media (min-width: 960px) {
  .pills--head { font-size: 1.5em; }
  .pills--duo { padding-bottom: 0; }   
}
@media (max-width: 959px) {
  .pills--head { padding: 0 0 15px; }   
  #p2 { --sp-g: 16px; }   
  #p2 .sec-head { margin-bottom: 0; }   
  #p2 .txt { line-height: 1.4; }   
  .frame { margin-top: 40px; }   
  .float--bulb { top: calc(var(--sit-h) * -0.42); }
}

@media (max-height: 720px) {
  .burst { height: min(25dvh, 52vw); }
  .peek { width: min(30%, 130px); }
  .frame { --sit-h: min(18dvh, 40vw); }
  .kv__catch--3 { font-size: calc(var(--fs-catch) * 0.84); }
  .beach { width: min(100%, calc(9.5dvh * 2.34)); }
  .blast { padding: 11px; }
  .blast__in { padding: 0.65em 0.7em 0.75em; }
  .perks { gap: 0.3em; }
  .steps { gap: 0.4em; }
  .step { padding-block: 0.3em 0.35em; }
  .switch-img { position: relative; top: -15px; height: 3.4em; margin-bottom: -15px; }   
}
@media (max-height: 600px) {
  .burst { height: min(21dvh, 50vw); }
  .peek { width: min(24%, 100px); }
  .frame { --sit-h: min(16dvh, 34vw); }
  .frame .sticker { display: none; }
  .switch-img { height: 2.6em; }
  .blast { padding: 6px; }
  .blast__in { padding: 0.5em 0.6em 0.6em; }
  .perk { padding-block: 0.05em 0.1em; }
  .beach { width: min(100%, calc(8dvh * 2.34)); }
  .boards { width: 72%; }   
}

@media (min-height: 800px) {
  .burst { height: 26dvh; }   
  .duo { grid-template-columns: 1fr 1fr; row-gap: var(--sp-g); }   
  .pills--duo { grid-column: 1 / -1; grid-row: 1; }
  .duo__chara { width: auto; max-width: none; height: min(32dvh, 340px); max-height: none; }
  .boards { margin-block: 2dvh; }   
  .stk-row { margin-block: 5dvh; }   
  .step { padding-block: 0.9em 1em; }
  .frame { --sit-h: min(28dvh, 50vw, 270px); }
  .beach { width: min(100%, calc(18dvh * 2.34)); }
  .company__mark { height: min(24dvh, 230px); }
}

@media (min-height: 800px) and (min-width: 960px) {
  .biz { margin-block: 4dvh; }
  .steps { margin-block: 2dvh; }
  #p10 .switch-img { height: 4.6em; }
  .company__mark { height: min(30dvh, 280px); }
}

@media (min-height: 800px) and (max-width: 959px) {
  .biz { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--sp-p); padding-inline: 8%; }
  .biz img { max-height: 15dvh; }
}