/* Generated by scripts/bundle-styles.mjs; edit source stylesheets. */

/* Meandering metro line, measured against the actual mobile layout. */
.route-chapters { position: relative; isolation: isolate; }
.route-chapters > .chapter { z-index: 1; }
.route-chapters > .intro { position: relative; z-index: 1; }
.route-chapters > .intro > p:not(.eyebrow) { text-shadow: 0 1px 5px #090d28; }
.route-wallpaper { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.route-wallpaper-viewport {
  position: sticky;
  isolation: isolate;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: radial-gradient(ellipse at 15% 30%, #6e40dc 0, transparent 60%), radial-gradient(ellipse at 90% 75%, #8a6ee3 0, transparent 65%), #140d3b;
}
/* Background canvas + dark veil, then stars; all remain below chapter content. */
.route-wallpaper-viewport canvas { position: relative; z-index: 0; display: block; width: 100%; height: 100%; }
.route-stars { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.route-star {
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  border-radius: 50%;
  background: #eee8ff;
  opacity: var(--star-opacity);
  box-shadow: 0 0 3px rgba(217, 198, 255, .35);
}
.route-star.is-sparkle {
  opacity: calc(var(--star-opacity) * .45);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 0 2px #e6dcff22);
}
.route-star.is-sparkle::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: polygon(50% 0, 55% 36%, 64% 45%, 100% 50%, 64% 55%, 55% 64%, 50% 100%, 45% 64%, 36% 55%, 0 50%, 36% 45%, 45% 36%);
}
.route-wallpaper-viewport::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(3, 3, 12, .8);
}
.route-chapters .chapter-copy { text-shadow: 0 1px 5px #090d28; }
.site .chapter { padding-bottom: clamp(136px, 42.666666667vw, 205px); }
.chapter > :not(.route) { position: relative; z-index: 1; }
.chapter .route {
  opacity: .42;
  inset: 0;
  width: 100%;
  height: 100%;
  background: none;
  border-radius: 0;
  pointer-events: none;
  z-index: 0;
}
.chapter .route::after { content: none; }
.route svg { display: block; width: 100%; overflow: visible; }
.route .route-particle-canvas {
  position: absolute;
  left: -40px;
  top: -40px;
  display: none;
  pointer-events: none;
  filter: drop-shadow(0 0 2.7px var(--accent)) drop-shadow(0 0 8px var(--accent));
}
.route.has-particles svg { opacity: .055; }
.route.has-particles .route-particle-canvas { display: block; }
@media (prefers-reduced-motion: reduce) {
  .route.has-particles svg { opacity: 1; }
  .route.has-particles .route-particle-canvas { display: none; }
}
.route path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route .route-halo {
  stroke: var(--accent);
  stroke-width: 28;
  opacity: .6;
  filter: blur(12.4px);
}
.route .route-bloom {
  stroke: var(--accent);
  stroke-width: 20.2;
  opacity: .85;
  filter: blur(4.4px);
}
.route .route-line {
  stroke: var(--accent);
  stroke-width: 14;
}
.route .route-highlight {
  stroke: #fff;
  stroke: color-mix(in srgb, var(--accent) 60%, white);
  stroke-width: 7.8;
  filter: blur(1.3px);
}
.chapter .number {
  border-width: 6px;
  box-shadow: 0 0 8px var(--accent), 0 0 26px color-mix(in srgb, var(--accent) 65%, transparent), inset 0 0 12px color-mix(in srgb, var(--accent) 35%, transparent);
  text-shadow: 0 0 6px color-mix(in srgb, var(--accent) 60%, transparent);
}

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

html.lenis { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
}

.chapter.aqua { --accent: var(--aqua); }
.chapter .mission-memo {
  margin: 32px 0 0;
  padding: 24px 20px;
  background: #211331e6;
  border-left: 3px solid var(--violet);
  border-radius: 0 18px 18px 0;
}
.mission-memo .eyebrow { color: #d7b3ff; margin-bottom: 12px; }
.chapter .mission-memo h3 { font-size: 20px; line-height: 1.6; }
.chapter .mission-memo > p:last-child { margin-top: 12px; font-size: 16px; line-height: 1.9; }
.chapter .crew-stage { position: relative; padding: 1px 0 72px; margin-top: 28px; }
.crew-stage .crew-block { margin-top: 24px; padding-bottom: 16px; }
.crew-stage .crew-block > p { color: var(--aqua); font-size: clamp(18px, 5vw, 24px); }
.crew-stage .crew-block img { width: 100%; height: auto; margin: 28px auto 12px; }
.crew-stage .crew-block h3 { font-size: clamp(28px, 8vw, 36px); text-shadow: 3px 3px #6336a6; }
.crew-stage .crew-note { position: absolute; right: 0; bottom: 0; background: var(--aqua); transform: rotate(5deg); }
.chapter .collection-notes { margin-top: 38px; padding: 6px 20px; border: 1px solid #10dfc455; border-radius: 20px 4px 20px 4px; background: #12152bd9; }
.collection-notes > div { padding: 22px 0; }
.collection-notes > div + div { border-top: 1px solid #10dfc433; }
.collection-label { display: block; color: var(--aqua); font: 700 12px/1.5 monospace; letter-spacing: 2px; margin-bottom: 8px; }
.collection-notes h3 { font-size: 21px; line-height: 1.5; }
.collection-notes p { margin-top: 10px; font-size: 16px; line-height: 1.9; }
.chapter .collection-outro { margin: -2px 0 0; padding: 14px 8px; text-align: center; font-size: 24px; font-weight: 900; line-height: 1.8; color: var(--aqua); text-shadow: 0 2px 8px #090d28; }
@media (max-width: 359px) {
  .chapter .mission-memo, .chapter .collection-notes { padding-left: 14px; padding-right: 14px; }
  .chapter .mission-memo h3 { font-size: 18px; }
}
#collect .collect-heading-sticker {
  display: block;
  width: 100%;
  margin: -16px 0 4px;
  transform: rotate(3deg);
}
#collect .collect-heading-sticker img { display: block; width: 100%; height: auto; }
#collect .collect-character-row { margin: 0; height: 0; top: -16px; z-index: auto; }
#collect .crew-stage { margin-top: 12px; }
#collect .collect-character {
  display: block;
  height: auto;
  transform-origin: 50% 75%;
  animation: collect-character-sway 4.8s ease-in-out infinite;
  pointer-events: none;
}
#collect .collect-character-takoyaki { position: absolute; left: -36px; top: 16px; width: clamp(90px, 25.2vw, 115.2px); z-index: 2; }
#collect .collect-count-sticker { position: absolute; right: 0; top: calc(16px + clamp(100px, 28vw, 128px) / 2); transform: translateY(-50%) rotate(7deg); width: calc(70% - clamp(70px, 19.6vw, 89.6px) - 5.6px); height: auto; pointer-events: none; z-index: 0; }
#collect .collect-character-shisa { position: absolute; right: -30px; top: -110px; width: clamp(90px, 25.2vw, 115.2px); z-index: 2; animation-delay: -2.4s; }
@media (max-width: 359px) {
  #collect .collect-character-takoyaki { left: -30px; }
  #collect .collect-character-shisa { right: -24px; }
}
@keyframes collect-character-sway {
  0%, 100% { transform: rotate(6deg); }
  50% { transform: rotate(-6deg); }
}
#collect .collect-count-sticker { right: -24px; transform-origin: right center; }
#collect .crew-block.crew-reveal-ready > img { opacity: 0; transform: translateY(40px) scale(.78); transform-origin: 50% 75%; }
#collect .crew-block.crew-reveal-visible > img { animation: crew-impact-enter 850ms cubic-bezier(.2,.75,.25,1) both; }
@keyframes crew-impact-enter {
  0% { opacity: 0; transform: translateY(40px) scale(.78); }
  60% { opacity: 1; transform: translateY(-8px) scale(1.055); }
  80% { transform: translateY(3px) scale(.985); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (max-width: 359px) { #collect .collect-count-sticker { right: -18px; } }
@media (prefers-reduced-motion: reduce) {
  #collect .crew-block.crew-reveal-ready > img { opacity: 1; transform: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) {
  #collect .collect-character { animation: none; transform: none; }
}

/* Preserve the existing 500-weight body rendering when adding the 400 font. */
:root { font-weight: 500; }
.chapter.explorer { --accent: #d6d8ff; }
.chapter .explorer-stage { position: relative; z-index: 3; margin-top: -48px; padding-bottom: 0; isolation: isolate; }
.explorer-stage h2 { padding-top: 2px; }
.explorer-stage .pretitle {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: 100%;
  padding: 5px 9px 8px;
  background: #08080b;
  color: var(--ink);
  font-size: 25px;
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
}
.explorer-stage .pretitle::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: var(--accent);
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
  pointer-events: none;
}
.explorer-heading-sticker {
  display: block;
  width: 100%;
  aspect-ratio: 1915 / 460;
  margin: 0;
  transform-origin: center;
  animation: explorer-title-float 7s ease-in-out infinite;
}
/* Frame the transparent padding without cropping the white sticker contour. */
.explorer-heading-sticker img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
@keyframes explorer-title-float {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(7deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(5deg); }
}
.explorer-orbit { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; margin: 0 auto; }
.explorer-stage .explorer-character { position: absolute; top: 0; right: 0; display: block; width: 100%; height: auto; margin: 0; object-fit: contain; filter: drop-shadow(0 8px 20px #05051080); }
.explorer-orbit .explorer-food {
  position: absolute;
  top: 2%;
  left: calc(-22% + 18px);
  width: 33%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  transform-origin: center;
  filter: drop-shadow(0 4px 9px #c3c8ff44);
  animation: explorer-food-float 6.8s ease-in-out infinite;
}
@keyframes explorer-food-float {
  0%, 100% { transform: translate3d(0, 1px, 0) rotate(-7deg); }
  50% { transform: translate3d(3px, -7px, 0) rotate(-2deg); }
}
.explorer-stage .explorer-identity { position: relative; isolation: isolate; display: block; width: fit-content; max-width: 100%; margin: -6px 0 0; z-index: 4; padding: 12px 14px; background: #08080b; color: var(--ink); clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%); font-size: 16px; font-weight: 900; line-height: 1.3; transform: translateX(-16px) rotate(-3deg); }
.explorer-identity::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: var(--accent);
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
  pointer-events: none;
}
.explorer-identity strong { display: block; margin-top: 0; color: inherit; font-size: clamp(19px, calc(4.8vw + 1px), 23px); font-weight: 900; white-space: nowrap; }
.explorer-identity .explorer-word { color: #6423bc; }
.chapter .explorer-story {
  z-index: 2;
  margin-top: -16px;
  padding: 20px 16px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(90deg, #d8d5ff12 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    linear-gradient(#d8d5ff12 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    radial-gradient(ellipse at 0% 0%, #babdff55, transparent 37%) padding-box,
    radial-gradient(ellipse at 100% 100%, #7775df55, transparent 35%) padding-box,
    linear-gradient(180deg, #1b2540, #191921) padding-box,
    linear-gradient(135deg, #d6d8ff, #494b75 48%, #9295e8) border-box;
  box-shadow: inset 0 0 18px #c6c9ff0d, 0 0 14px #9699ef18;
}
.explorer-story .eyebrow { color: var(--accent); font-size: 11px; letter-spacing: 1px; margin-bottom: 16px; }
.explorer-stage .explorer-companion {
  position: absolute;
  right: -46px;
  bottom: -160px;
  width: clamp(150.48px, 43.56vw, 182.16px);
  height: clamp(122.76px, 35.64vw, 148.896px);
  /* Keep the placement anchor while revealing the original full-body image. */
  overflow: visible;
  /* In front of the panel, behind the foreground caption. */
  z-index: 3;
  pointer-events: none;
}
.explorer-companion img { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 10px #06061580); }
.explorer-story h3 { font-size: clamp(21px, 5.7vw, 27px); line-height: 1.6; font-weight: 900; letter-spacing: -.5px; }
.explorer-story h3 em { font-style: normal; color: var(--accent); }
.explorer-story > p:not(.eyebrow) { margin-top: 20px; color: var(--accent); font-size: 14px; font-weight: 400; line-height: 28px; overflow-wrap: anywhere; }
.explorer-story > p:first-child { margin-top: 0; }
.explorer-story > p { position: relative; left: 8px; }
.explorer-stage .explorer-character {
  transform-origin: 50% 55%;
  animation: explorer-float 6s ease-in-out infinite;
}
@keyframes explorer-float {
  0%, 100% { transform: translate3d(0, 4px, 0) rotate(-1.5deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(1.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .explorer-stage .explorer-character, .explorer-heading-sticker, .explorer-orbit .explorer-food { animation: none; transform: none; }
  .explorer-heading-sticker { transform: rotate(6deg); }
}
@media (max-width: 359px) {
  .explorer-stage .explorer-identity { padding: 8px; font-size: 14px; }
  .chapter .explorer-story { padding-left: 12px; padding-right: 12px; }
}
.explorer-entrance { position: absolute; inset: 0; pointer-events: none; }
.explorer-entrance-food { z-index: 2; }
.explorer-orbit.entrance-ready .explorer-entrance { opacity: 0; }
.explorer-orbit.entrance-visible .explorer-entrance-food {
  animation: explorer-burger-enter .75s cubic-bezier(.2,.8,.3,1) both;
}
.explorer-orbit.entrance-visible .explorer-entrance-character {
  animation: explorer-astronaut-enter .6s cubic-bezier(.16,1,.3,1) .18s both;
}
@keyframes explorer-burger-enter {
  0% { opacity: 0; transform: translateX(-100px); }
  65% { opacity: 1; transform: translateX(9px); }
  82% { transform: translateX(-3px); }
  100% { opacity: 1; transform: translateX(0); }
}
@keyframes explorer-astronaut-enter {
  0% { opacity: 0; transform: translateX(150px); }
  100% { opacity: 1; transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .explorer-orbit.entrance-ready .explorer-entrance {
    opacity: 1; animation: none; transform: none;
  }
}
/* Keep the authored 430px line breaks; move the companion outward on phones. */
@media (max-width: 430px) {
  #explorer .explorer-stage .explorer-companion {
    right: calc(-46px - clamp(0px, calc(215px - 50vw), 55px));
  }
}
@media (max-width: 420px) {
  #explorer .explorer-story > p:not(.eyebrow) {
    font-size: clamp(12px, 3.333333vw, 14px);
    line-height: 28px;
  }
}

/* Dedicated top-left space keeps the floating sticker clear of the intro copy. */
.site .intro {
  padding-top: calc(clamp(160px, 44vw, 190px) - 80px);
  padding-bottom: 142px;
}
.site .intro > .eyebrow { color: #c4a0ff; }
.intro-description { position: relative; }
/* Keep the authored 22-character lines intact at 375px without overflow.
   Leave wrapping available for accessibility text zoom and narrower screens. */
.site .intro > p:not(.eyebrow) {
  font-size: clamp(12px, calc((100vw - 56px) / 22), 16px);
  line-height: 2;
  letter-spacing: 0;
  word-break: normal;
  overflow-wrap: break-word;
}
.intro-description .intro-tableware-sticker {
  position: absolute;
  top: -54px;
  right: calc(26px - clamp(58px, 16.2vw, 76px));
  width: clamp(86.4px, 24.3vw, 113.4px);
  height: auto;
  pointer-events: none;
  user-select: none;
  transform: rotate(8deg);
  filter: drop-shadow(0 5px 8px #090d2844);
  animation: intro-tableware-float 7.8s ease-in-out infinite;
}
@keyframes intro-tableware-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(8deg); }
  50% { transform: translate3d(-3px, -7px, 0) rotate(5deg); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-description .intro-tableware-sticker { animation: none; }
}
.site .intro .intro-headline {
  position: relative;
  width: calc(100% + 32px);
  margin: 0 -16px;
  line-height: 1;
}
.intro-headline img { display: block; width: 100%; height: auto; transform-origin: 50% 50%; animation: intro-headline-float 8s ease-in-out infinite; }
@keyframes intro-headline-float {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(-2deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(2deg); }
}
@media (prefers-reduced-motion: reduce) {
  .intro-headline img { animation: none; transform: none; }
}
.intro-headline .headline-peel-host { position: absolute; inset: -8px; display: block; }
.intro-headline.has-peel > img { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .intro-headline .headline-peel-host { display: none; }
  .intro-headline.has-peel > img { opacity: 1; }
}
.site .intro .rocket-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border: 0;
  border-radius: 0;
  line-height: 0;
  isolation: isolate;
}
.rocket-link img {
  display: block;
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  object-fit: contain;
  transform: none;
  filter: none;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  animation: rocket-blink 1.8s ease-in-out infinite;
}
@keyframes rocket-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .rocket-link img { animation: none; opacity: 1; } }
.intro .intro-space-sticker {
  position: absolute;
  top: 10px;
  left: -18px;
  width: clamp(96px, 27vw, 126px);
  height: auto;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 7px 10px #090d2855);
  transform-origin: center;
  animation: intro-ship-float 7.8s ease-in-out infinite;
}
@keyframes intro-ship-float {
  0%, 100% { transform: translate3d(0, 3px, 0) rotate(-6deg); }
  50% { transform: translate3d(5px, -8px, 0) rotate(-1deg); }
}
@media (prefers-reduced-motion: reduce) {
  .intro .intro-space-sticker { animation: none; transform: rotate(-3deg); }
}

/* Keep the tilted ribbon above the following section at both lower corners. */
.site .ticker {
  position: relative;
  z-index: 2;
  font-size: 14px;
  font-weight: 900;
  /* 18px text line plus 3px padding per edge makes a 24px ribbon. */
  padding: 3px 0;
  line-height: 18px;
  /* Add 4deg clockwise to the previous -2deg, including the text. */
  transform: rotate(2deg);
  isolation: isolate;
  background: #d2c7ed;
  color: #21192f;
  box-shadow: inset 0 1px 0 #ffffffb3, inset 0 -1px 0 #66558266;
}
/* Foil reflections only: no pointer tracking, warping, or text distortion. */
.site .ticker::before,
.site .ticker::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.site .ticker::before {
  background: linear-gradient(110deg, #bca6f0 0%, #f4bcdf 14%, #f5e3ad 27%, #b6eddf 40%, #a6d6f8 53%, #c2adf4 66%, #efc2ec 79%, #eaf7fb 90%, #bca6f0 100%);
  background-size: 250% 100%;
  animation: ticker-holo 12s ease-in-out infinite alternate;
}
.site .ticker::after {
  background: linear-gradient(115deg, transparent 28%, #ffffff12 37%, #ffffffa6 47%, #ffffff24 54%, transparent 65%), repeating-linear-gradient(0deg, #ffffff18 0 1px, transparent 1px 3px);
  background-size: 250% 100%, 100% 100%;
  animation: ticker-sheen 9s ease-in-out infinite alternate;
}
.ticker .ticker-track {
  position: relative;
  z-index: 1;
  display: flex;
  width: max-content;
  animation: ticker-loop 60s linear infinite;
}
.ticker .ticker-group {
  display: block;
  flex: 0 0 auto;
  padding-right: 1em;
  animation: none;
}
/* Identical halves meet exactly at the wrap point, with no empty tail. */
.ticker-right .ticker-track { animation-direction: reverse; }
@keyframes ticker-loop {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes ticker-holo {
  from { background-position: 0% 50%; }
  to { background-position: 100% 50%; }
}
@keyframes ticker-sheen {
  from { background-position: 100% 50%, 0 0; }
  to { background-position: 0% 50%, 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker .ticker-track { animation: none; }
  .site .ticker::before, .site .ticker::after { animation: none; background-position: 50% 50%; }
}

.site footer { text-align: center; clip-path: none; padding-top: 32px; padding-bottom: max(24px, env(safe-area-inset-bottom)); }
.site footer > p { margin: 0 0 24px; font-size: 16px; line-height: 1.5; text-wrap: balance; }
.site footer .footer-info {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  border-top: 1px solid #ffffff24;
  border-bottom: 1px solid #ffffff24;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 6.4vw, 36px);
  white-space: nowrap;
  font-size: 10px;
  line-height: 1.6;
  font-weight: 400;
  color: #d0ced4;
}
.site footer .footer-bottom { position: relative; display: flex; justify-content: center; align-items: center; min-height: 33.75px; margin-top: 24px; }
.site footer small { margin: 0; font: 400 10px/1.6 Arial, sans-serif; opacity: .5; }
.site footer .back-top { position: absolute; top: 0; right: -5px; margin: 0; width: 33.75px; height: 33.75px; border-width: 1px; }
.site footer .back-top img { width: 24px; height: 24px; transform: rotate(180deg); }
.site footer .back-top > span { font-size: 18px; line-height: 1; }
/* Reveal the floating CTA softly after the lower milestone ticker enters view. */
.site .sticky {
  isolation: isolate;
  border: 0;
  color: #fff;
  background: #160c24;
  clip-path: none;
  box-shadow: none;
  text-shadow: 0 0 10px #cfb4ff70;
  letter-spacing: .04em;
}
.site .sticky::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  clip-path: none;
  background: linear-gradient(110deg, #341458, #7435bc 52%, #35105c);
  box-shadow: inset 0 1px 10px #d4a5ff66, inset 0 -4px 12px #17052d88;
  pointer-events: none;
}
.site .sticky span { color: #eddfff; font-style: normal; border-right: 1px solid #d9b3ff80; letter-spacing: .08em; }
.site .sticky:hover::before { background: linear-gradient(110deg, #482174, #8745d4 52%, #49206e); }
.site .sticky,
.site .sticky span {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
}
.site .sticky:focus-visible { outline: 2px solid #e5cfff; outline-offset: 4px; }
.site .sticky {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
  transition: opacity 500ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1);
}
.site .sticky.is-hidden {
  opacity: 0;
  transform: translate(-50%, 24px) scale(.96);
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .site .sticky { transition: none; }
  .site .sticky.is-hidden { transform: translate(-50%, 0); }
}

#discover .map-compare {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  height: 480px;
  aspect-ratio: 818 / 1580;
  max-width: 90%;
  border-radius: 20px;
  overflow: hidden;
  /* Only the arrow handle owns dragging; the map itself scrolls the page. */
  touch-action: pan-y pinch-zoom;
  user-select: none;
  -webkit-user-select: none;
}
.map-compare > img, .map-compare-before, .map-compare-before img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
}
.map-compare-before { clip-path: inset(0 50% 0 0); }
.map-compare-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-compare-line path { fill: none; stroke: white; stroke-width: 2; filter: drop-shadow(0 0 3px #0008); }
.map-compare-grip {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; background: #ffffffeb; color: #282037;
  border: 1px solid #fff; box-shadow: 0 2px 10px #0005;
  font: 700 22px/1 Arial, sans-serif;
  cursor: ew-resize; pointer-events: auto; touch-action: pinch-zoom;
}
.map-compare-grip::after { content: ''; position: absolute; inset: -10px; border-radius: 50%; }
.map-compare-grip:focus-visible { outline: 3px solid var(--accent); outline-offset: 5px; }
#discover .discover-memo-wrap { z-index: 2; }
#discover .map-stage .cross {
  top: 119px;
  animation: discover-star-sway 4s ease-in-out infinite;
}
@keyframes discover-star-sway {
  0%, 100% { transform: translateX(5px) rotate(8deg); }
  50% { transform: translateX(-5px) rotate(-8deg); }
}
@media (prefers-reduced-motion: reduce) {
  #discover .map-stage .cross { animation: none; transform: none; }
}

/* The supplied composition includes its own tilted cards, outline and glow. */
.chapter .swipe-story {
  margin: 8px 0 24px;
  padding: 20px 16px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(90deg, #d8ffd512 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    linear-gradient(#d8ffd512 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    radial-gradient(ellipse at 0% 0%, #bbff9555, transparent 37%) padding-box,
    radial-gradient(ellipse at 100% 100%, #6aaa4755, transparent 35%) padding-box,
    linear-gradient(180deg, #1c3028, #181d19) padding-box,
    linear-gradient(135deg, #d6ffb8, #4b7549 48%, #9bd975) border-box;
  box-shadow: inset 0 0 18px #d6ffc60d, 0 0 14px #a2ef9618;
}
.swipe-story h3 {
  color: var(--accent);
  font-size: clamp(21px, 5.7vw, 27px);
  line-height: 1.6;
  font-weight: 900;
  letter-spacing: -.5px;
}
.swipe-story p {
  margin-top: 20px;
  color: #e2ffc3;
  font-size: 14px;
  font-weight: 400;
  line-height: 32px;
  overflow-wrap: anywhere;
}
@media (max-width: 359px) {
  .chapter .swipe-story { padding-left: 12px; padding-right: 12px; }
}
#swipe .swipe-stage {
  margin-top: 0;
  /* Center the full composition despite the chapter's asymmetric 36/24px padding. */
  width: 100%;
  left: -6px;
  /* Match the artwork's rendered height instead of reserving 452px on phones. */
  height: auto;
  aspect-ratio: 831 / 1076;
  max-height: 452px;
}
#swipe .swipe-stage > img {
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  object-fit: contain;
  object-position: center top;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
}
#swipe .swipe-note,
#swipe .swipe-stamp { z-index: 1; }
#swipe .swipe-note {
  bottom: 66px;
  padding: 8px 12px;
  font-size: 10px;
  line-height: 1.5;
  font-weight: 700;
  white-space: nowrap;
  background: #bdff36;
  color: #172313;
  border: 0;
  border-radius: 16px;
  box-shadow: none;
  text-shadow: none;
  transform: none;
}
#swipe .swipe-note::after {
  content: '';
  position: absolute;
  left: 12px;
  bottom: -5px;
  width: 11px;
  height: 12px;
  background: inherit;
  border-radius: 0 0 3px 12px;
  transform: skewX(-24deg);
}
#swipe .swipe-note-seen {
  top: 40%;
  bottom: auto;
  right: 6px;
}
#swipe .chats-ready .swipe-note {
  opacity: 0;
  transform-origin: 24px 100%;
  --chat-delay: 440ms;
}
#swipe .chats-ready .swipe-note-seen { --chat-delay: 0ms; }
#swipe .chats-ready .swipe-note-friend { --chat-delay: 220ms; transform-origin: calc(100% - 24px) 100%; }
#swipe .chats-visible .swipe-note {
  animation: swipe-chat-pop 460ms cubic-bezier(.2,.8,.3,1) var(--chat-delay) both;
}
@keyframes swipe-chat-pop {
  0% { opacity: 0; transform: translateY(10px) scale(.65); }
  65% { opacity: 1; transform: translateY(-2px) scale(1.08); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #swipe .chats-ready .swipe-note { opacity: 1; animation: none; transform: none; }
}
#swipe .swipe-note-friend {
  left: -6px;
  right: auto;
  bottom: 176px;
  background: #e3f3d4;
}
#swipe .swipe-note-friend::after {
  left: auto;
  right: 12px;
  border-radius: 0 0 12px 3px;
  transform: skewX(24deg);
}
#discover .map-stamp {
  position: absolute;
  left: -7px;
  top: 20px;
  z-index: 1;
}
#swipe .swipe-stamp,
#discover .map-stamp {
  width: clamp(148px, 44vw, 190px);
  border: 0;
  padding: 0;
  text-shadow: none;
  transform: none;
  animation: swipe-label-float 6.8s ease-in-out infinite;
}
#swipe .swipe-stamp img,
#discover .map-stamp img {
  position: static;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  transform: none;
  box-shadow: none;
  object-fit: contain;
}
@keyframes swipe-label-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  50% { transform: translate3d(2px, -7px, 0) rotate(1deg); }
}
@media (prefers-reduced-motion: reduce) {
  #swipe .swipe-stamp,
  #discover .map-stamp { animation: none; }
}

#mission .mission-stage { height: 720px; width: calc(100% + 60px); margin-left: -36px; margin-bottom: -56px; }
.mission-carousel-host {
  position: absolute;
  inset: 0;
  transform: translateY(-72px);
  border-radius: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.has-carousel .mission-carousel-host { opacity: 1; pointer-events: auto; }
#mission .mission-top-cards,
#mission .mission-tickets {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  left: -6px;
  z-index: 2;
  margin-top: -256px;
}
/* Offset the cards' existing 116px translation: visible top is 24px below copy.
   Moving the flow wrapper also brings the carousel and following content up. */
#mission .mission-top-cards { margin-top: -108px; margin-bottom: -152px; pointer-events: none; }
/* Keep the carousel's flow height while relocating the two landscape tickets. */
#mission .mission-top-cards { aspect-ratio: 286 / 137.24; }
#mission .mission-decor-right { position: absolute; top: 100px; right: -40px; width: 47%; }
#mission .mission-decor-left { display: block; width: 47%; transform: translateX(-40px); }
#mission .mission-top-cards img,
#mission .mission-tickets img {
  display: block; width: 100%; height: auto;
  transform-origin: center;
  animation: mission-ticket-sway 5s ease-in-out infinite;
}
#mission .mission-decor-right img { animation-delay: -2.5s; }
@keyframes mission-ticket-sway {
  0%, 100% { transform: translateX(-4px) rotate(-4deg); }
  50% { transform: translateX(4px) rotate(4deg); }
}
@media (prefers-reduced-motion: reduce) {
  #mission .mission-top-cards img, #mission .mission-tickets img { animation: none; }
}
@media (max-width: 359px) {
  #mission .mission-stage { width: calc(100% + 48px); margin-left: -30px; }
}
#mission .mission-heading-sticker { display: block; width: 100%; margin: -16px 0 4px; transform: rotate(3deg); }
#mission .mission-heading-sticker img { display: block; width: 100%; height: auto; }

/* Match 01/03's 12px grid, corner glow and rounded gradient border. */
#discover .discover-memo-wrap { position: relative; isolation: isolate; margin-top: calc(clamp(120px, 32vw, 155px) - 160px); }
#discover .discover-earth-scene {
  position: absolute;
  bottom: calc(100% - 12px);
  left: calc(50% - 6px);
  transform: translateX(-50%);
  width: calc(100% + 32px);
  height: auto;
  z-index: 0;
  pointer-events: none;
}
#discover .discover-memo-earth { display: block; width: 100%; height: auto; }
#discover .discover-earth-object { position: absolute; height: auto; transform-origin: 50% 85%; }
#discover .earth-sushi { left: calc(13% + 16px); top: -2%; width: 13%; --pop-delay: 0ms; }
#discover .earth-flame-upper { left: 61%; top: 10%; width: 8%; --pop-delay: 200ms; }
#discover .earth-food { left: 73%; top: 38%; width: 11%; --pop-delay: 400ms; }
#discover .earth-flame-lower { left: calc(27% + 16px); top: 62%; width: 8%; --pop-delay: 600ms; }
#discover .pins-ready .discover-earth-object { opacity: 0; }
#discover .pins-visible .discover-earth-object {
  animation: discover-object-pop 480ms cubic-bezier(.2,.8,.3,1) var(--pop-delay) both;
}
@keyframes discover-object-pop {
  0% { opacity: 0; transform: translateY(12px) scale(.45); }
  65% { opacity: 1; transform: translateY(-3px) scale(1.12); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  #discover .pins-ready .discover-earth-object { opacity: 1; animation: none; }
}
#discover .discover-memo-wrap .memo { margin-top: 0; z-index: 1; }
/* Chapters reserve 12px more space on the left; center panels without resizing. */
:is(#explorer, #discover, #swipe, #mission, #collect) :is(.explorer-story, .memo, .swipe-story, .mission-memo, .collection-notes) {
  position: relative;
  left: -6px;
}
#discover .memo {
  --panel-light: #ecc8ff;
  --panel-glow: #c586ef;
  --panel-deep: #271d38;
  --panel-bottom: #1d1923;
  --panel-border: #705081;
}
#mission .mission-memo {
  --panel-light: #d4ddff;
  --panel-glow: #91a7ff;
  --panel-deep: #223451;
  --panel-bottom: #202735;
  --panel-border: #627bae;
}
#collect .collection-notes {
  --panel-light: #bdfff1;
  --panel-glow: #36d7bf;
  --panel-deep: #193832;
  --panel-bottom: #172321;
  --panel-border: #427c73;
}
:is(#discover, #mission, #collect) :is(.memo, .mission-memo, .collection-notes) {
  margin: 32px 0 0;
  padding: 20px 16px 16px;
  border: 1px solid transparent;
  border-radius: 20px;
  transform: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--panel-light) 7%, transparent) 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    linear-gradient(color-mix(in srgb, var(--panel-light) 7%, transparent) 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--panel-glow) 33%, transparent), transparent 37%) padding-box,
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--panel-glow) 33%, transparent), transparent 35%) padding-box,
    linear-gradient(180deg, var(--panel-deep), var(--panel-bottom)) padding-box,
    linear-gradient(135deg, var(--panel-light), var(--panel-border) 48%, var(--panel-glow)) border-box;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--panel-light) 5%, transparent),
    0 0 14px color-mix(in srgb, var(--panel-glow) 9%, transparent);
}
#mission .mission-memo { margin-top: 0; }
#collect .collection-notes { margin-top: -56px; }
#discover .memo-label,
#mission .mission-memo .eyebrow,
#collect .collection-label { color: var(--panel-light); }
#collect .collection-notes > div { padding: 0; }
#collect .collection-notes > div + div {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid color-mix(in srgb, var(--panel-light) 20%, transparent);
}
@media (max-width: 359px) {
  :is(#discover, #mission, #collect) :is(.memo, .mission-memo, .collection-notes) {
    padding-left: 12px;
    padding-right: 12px;
  }
}
#discover .memo .panel-sticker-title,
#mission .mission-memo .panel-sticker-title,
#swipe .swipe-story .panel-sticker-title,
#collect .collection-notes .panel-sticker-title {
  position: relative;
  isolation: isolate;
  z-index: 2;
  width: fit-content;
  max-width: calc(100% + 16px);
  margin: -48px -8px 0;
  padding: 12px 14px;
  background: #08080b;
  color: var(--ink);
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
  font-size: clamp(19px, calc(4.8vw + 1px), 23px);
  font-weight: 900;
  line-height: 1.3;
  letter-spacing: normal;
  transform: rotate(-3deg);
}
.panel-sticker-title::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: var(--accent);
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
  pointer-events: none;
}
#discover .memo > p,
#mission .mission-memo > p,
#swipe .swipe-story > p,
#collect .collection-notes > p {
  position: relative;
  left: 8px;
  margin-top: 20px;
  color: var(--accent);
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
  overflow-wrap: anywhere;
}
@media (max-width: 359px) {
  #discover .memo .panel-sticker-title,
  #swipe .swipe-story .panel-sticker-title { padding: 8px; }
}
#discover .memo .panel-sticker-title,
#mission .mission-memo .panel-sticker-title,
#swipe .swipe-story .panel-sticker-title,
#collect .collection-notes .panel-sticker-title { left: -16px; }
#swipe .panel-sticker-title .panel-title-line { white-space: nowrap; }

/* Fill the responsive site canvas, with equal 16px outer gutters. */
.site #explorer .explorer-story,
.site #explorer .explorer-identity,
.site #discover .memo {
  top: -16px;
}
.site #swipe .swipe-story,
.site #collect .collection-notes {
  top: -32px;
}
.site .chapter { --panel-expansion: 14px; }
.site :is(#explorer, #discover, #swipe, #mission, #collect) :is(.explorer-story, .memo, .swipe-story, .mission-memo, .collection-notes) {
  box-sizing: border-box;
  width: calc(100% + var(--panel-expansion) * 2);
  max-width: none;
  left: calc(-6px - var(--panel-expansion));
  padding-left: 16px;
  padding-right: 16px;
}
.site :is(#explorer, #discover, #swipe, #mission, #collect) :is(.explorer-story, .memo, .swipe-story, .mission-memo, .collection-notes) > p {
  left: 0;
  width: auto;
  max-width: 100%;
  word-break: normal;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
/* Preserve the stickers' screen position as their panels grow sideways. */
.site :is(#discover, #swipe, #mission, #collect) .panel-sticker-title {
  left: calc(-16px + var(--panel-expansion));
  max-width: 100%;
}
@media (max-width: 359px) {
  .site .chapter { --panel-expansion: 8px; }
}

/* Match 01's responsive body typography without changing horizontal gutters. */
.site :is(#discover, #swipe, #mission, #collect) :is(.memo, .swipe-story, .mission-memo, .collection-notes) {
  height: auto;
  min-height: 0;
}
.site :is(#discover, #swipe, #mission, #collect) :is(.memo, .swipe-story, .mission-memo, .collection-notes) > p {
  font-size: 14px;
  font-weight: 400;
  line-height: 28px;
}
@media (max-width: 420px) {
  .site :is(#discover, #swipe, #mission, #collect) :is(.memo, .swipe-story, .mission-memo, .collection-notes) > p {
    font-size: clamp(12px, 3.333333vw, 14px);
  }
}

/* Matching planet transitions and unframed labels for chapters 01 through 05. */
@font-face {
  font-family: 'WDXL Lubrifont TC';
  src: url('./assets/chapter-label-font.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
/* Chapter 02 echoes its violet-magenta planet without changing other chapters. */
#discover { --accent: #d17afa; --pink: #d17afa; }
#discover .map-note { background: #d6a0f2; }
:is(#discover, #swipe, #mission, #collect) > h2 .pretitle {
  position: relative;
  isolation: isolate;
  display: table;
  max-width: 100%;
  padding: 5px 9px 8px;
  background: #08080b;
  color: var(--ink);
  font-size: 25px;
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
}
#swipe > h2 .pretitle {
  font-size: clamp(16px, calc((100vw - 88px) / 13), 25px);
  white-space: nowrap;
}
:is(#discover, #swipe, #mission, #collect) > h2 .pretitle::before {
  content: '';
  position: absolute;
  inset: 4px;
  z-index: -1;
  background: var(--accent);
  clip-path: polygon(0 0, 98% 3%, 100% 91%, 1% 100%);
  pointer-events: none;
}
#discover .discover-heading-sticker, #swipe .swipe-heading-sticker {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  transform-origin: center;
  animation: explorer-title-float 7s ease-in-out infinite;
}
#discover .discover-heading-sticker img, #swipe .swipe-heading-sticker img { display: block; width: 100%; height: auto; }
#discover .discover-heading-sticker { margin-top: -16px; margin-bottom: 4px; animation-name: swipe-heading-float; }
#discover > .chapter-copy { margin-top: 1px; position: relative; left: 0; }
#swipe .swipe-heading-sticker { margin-top: -16px; margin-bottom: 4px; animation-name: swipe-heading-float; }
#swipe > .chapter-copy { margin-top: 1px; position: relative; left: 0; }
:is(#mission, #collect) > .chapter-copy { margin-top: 1px; position: relative; left: 0; }
.site :is(#discover, #swipe, #mission, #collect) > .chapter-copy {
  font-size: clamp(12px, 3.733333333vw, 18px);
}
#collect > .chapter-copy { top: -8px; }
#mission .mission-heading-sticker,
#collect .collect-heading-sticker {
  margin-top: -16px;
  margin-bottom: 4px;
  transform-origin: center;
  animation: swipe-heading-float 7s ease-in-out infinite;
}
#collect .collect-heading-sticker { margin-top: -40px; position: relative; top: 8px; }
/* Counter the heading's -3deg tilt, preserving a gentle half-degree sway. */
@keyframes swipe-heading-float {
  0%, 100% { transform: translate3d(0, 2px, 0) rotate(3.5deg); }
  50% { transform: translate3d(0, -6px, 0) rotate(2.5deg); }
}
@media (prefers-reduced-motion: reduce) {
  #mission .mission-heading-sticker,
  #collect .collect-heading-sticker { animation: none; transform: rotate(3deg); }
  #discover .discover-heading-sticker, #swipe .swipe-heading-sticker { animation: none; transform: rotate(3deg); }
  #swipe .swipe-heading-sticker { transform: rotate(3deg); }
}
/* Electric royal blue distinguishes 04 from 05's turquoise. */
#mission { --accent: #91a7ff; --violet: #91a7ff; }
#mission .mission-note { background: #a6b7ff; }
:is(#explorer, #discover, #swipe, #mission, #collect) { --planet-size: clamp(118.8px, 32.4vw, 151.2px); padding-top: calc(var(--planet-size) - 42px); }
/* Match chapter 01's -48px content offset and 2px heading inset. */
:is(#discover, #swipe, #mission, #collect) > h2 {
  margin-top: -48px;
  padding-top: 2px;
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-planet {
  position: absolute;
  top: -54px;
  left: -22px;
  width: calc(var(--planet-size) * .8);
  aspect-ratio: 1;
  z-index: 2;
  pointer-events: none;
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head {
  position: absolute;
  top: -54px;
  left: calc(var(--planet-size) * .8 - 22px + 16px);
  right: 18px;
  height: calc(var(--planet-size) * .8);
  min-height: 0;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 10px;
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head .number {
  display: block;
  width: auto;
  height: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
  font: 900 18px/1 Arial, sans-serif;
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head p {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  font-size: 14px;
  letter-spacing: 0;
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head p span { white-space: nowrap; }
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head .number,
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head p,
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-head p span {
  font-family: 'WDXL Lubrifont TC', 'Noto Sans JP', sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0;
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-planet img { display: block; width: 100%; height: auto; }
/* Only the image moves; the fixed wrapper remains the route's anchor. */
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-planet.has-reveal:not(.is-visible) img {
  opacity: 0;
  transform: translate3d(-110%, 8px, 0) rotate(-18deg) scale(.85);
}
:is(#explorer, #discover, #swipe, #mission, #collect) .chapter-planet.has-reveal.is-visible img {
  animation: chapter-planet-pop .76s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes chapter-planet-pop {
  0% { opacity: 0; transform: translate3d(-110%, 8px, 0) rotate(-18deg) scale(.85); }
  70% { opacity: 1; transform: translate3d(6px, -3px, 0) rotate(3deg) scale(1.04); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  :is(#explorer, #discover, #swipe, #mission, #collect) .chapter-planet.has-reveal:not(.is-visible) img,
  :is(#explorer, #discover, #swipe, #mission, #collect) .chapter-planet.has-reveal.is-visible img { animation: none; opacity: 1; transform: none; }
}



.site .user-milestone {
  position: relative;
  margin: 20px 20px 0;
  padding: 16px 0 36px;
  text-align: center;
  color: #fff;
  border: 0;
  background: radial-gradient(ellipse at 50% 65%, #9373ed17, transparent 70%);
}
.user-milestone h2 { margin: 0 0 20px; font-size: clamp(16px, 4.5vw, 21px); font-weight: 700; line-height: 1.6; letter-spacing: .02em; }
.user-milestone .user-milestone-label { margin: 0 0 10px; color: #d5cfe2; font-size: 14px; line-height: 1.7; letter-spacing: .06em; }
.user-milestone .user-milestone-total { margin: 0; font-family: Arial, sans-serif; font-size: clamp(38px, 16vw, 74px); font-weight: 900; line-height: 1.2; letter-spacing: .02em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.user-milestone-total > span { color: #eadcff; background: linear-gradient(120deg, #fff 8%, #c9ecff 28%, #e6c6ff 53%, #fff4d9 76%, #dabfff); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 14px #be8cff38); }
.user-milestone .user-milestone-unit { margin-left: 5px; font-size: .43em; letter-spacing: 0; }
.user-milestone [data-user-count] { font-family: 'Anton', Arial, sans-serif; font-weight: 400; }

.site { display: flow-root; } /* Contain the video's negative margin so the header stays at its original top position. */
.site .hero.hero-video { padding: 0; margin: -32px 0 0; background: #080e18; aspect-ratio: 9 / 16; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 20px)); }
.hero-video video { display: block; width: 100%; height: auto; aspect-ratio: 9 / 16; object-fit: contain; }
.site .hero-video + script + .ticker { margin-top: -24px; }
.site .hero-video .hero-title-sticker { position: absolute; z-index: 2; left: 2%; bottom: 3%; width: 96%; margin: 0; padding: 0; font-size: 0; line-height: 0; pointer-events: none; transform: none; }
.hero-title-sticker img { display: block; width: 100%; height: auto; }
.site .hero-registration-badge {
  position: absolute; z-index: 3; right: -178px;
  /* Follow the title image's top edge, including its transparent top margin. */
  bottom: calc(3% + min(42.666667vw, 204.8px) - 24px);
  box-sizing: border-box; width: 308px; height: 44px;
  display: flex; flex-direction: row; justify-content: flex-start; align-items: center; gap: 0;
  padding: 0 160px 0 13px; border: 0; border-radius: 999px;
  color: #fff; text-align: center; text-decoration: none;
  background: rgba(12, 12, 16, .76);
  box-shadow: inset 0 1px 0 #ffffff26, 0 3px 9px #0004;
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 1.4;
  cursor: pointer; touch-action: manipulation;
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.hero-registration-badge::after {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--hamoni-holo);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.hero-registration-badge::before {
  content: ''; flex: 0 0 14px; width: 14px; height: 14px;
  display: grid; place-items: center; margin-right: 7px;
  border-radius: 50%;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M5 3.5 8.5 7 5 10.5' fill='none' stroke='%23101014' stroke-width='1.8' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / 14px 14px no-repeat, var(--hamoni-holo);
}
.hero-registration-badge span { font-size: 11px; white-space: nowrap; }
.hero-registration-badge strong { font-size: 12px; font-weight: 700; white-space: nowrap; }
.hero-registration-badge span,
.hero-registration-badge strong {
  background: var(--hamoni-holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
.site .hero-registration-badge:focus-visible { outline: 3px solid #fff; outline-offset: 5px; }
@media (hover: hover) and (pointer: fine) {
  .site .hero-registration-badge:hover { transform: translateY(-2px); background: rgba(12, 12, 16, .9); }
}
.site .hero-registration-badge:active { transform: translateY(1px); box-shadow: inset 0 2px 4px #0008; }
@media (prefers-reduced-motion: reduce) { .site .hero-registration-badge { transition: none; } }
.site .hero-video::after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 58% 0 0;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent 0%, rgba(3, 4, 12, .12) 26%, rgba(3, 4, 12, .56) 62%, rgba(3, 4, 12, .82) 100%);
}

.site .start {
  z-index: 1;
  margin-top: -40px;
  padding-top: 0;
  padding-bottom: 0;
  clip-path: none;
  background: transparent;
  color: var(--white);
}
.site .start-title { transform: none; justify-content: center; text-align: center; }
/* Compensate for the heading's transparent bottom and the portrait's transparent top. */
.site .registration-visual { position: relative; isolation: isolate; width: calc(100% + 52px); margin: max(-34.37px, calc(-6.59224% - 9.32px)) 0 0 -26px; }
.site .registration-ticket-pile { position: absolute; bottom: 6px; left: 0; width: 100%; height: auto; z-index: 0; pointer-events: none; }
.registration-pile-window { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.registration-pile-window.pile-reveal-ready .registration-ticket-pile {
  opacity: 0;
  transform: translateY(110%);
  transition: transform 350ms ease-in, opacity 250ms ease;
}
.registration-pile-window.pile-reveal-visible .registration-ticket-pile {
  opacity: 1;
  transform: translateY(0);
  transition: transform 700ms cubic-bezier(.22, 1.25, .4, 1), opacity 350ms ease;
}
@media (prefers-reduced-motion: reduce) {
  .registration-pile-window.pile-reveal-ready .registration-ticket-pile { opacity: 1; transform: none; transition: none; }
}
.site .registration-visual > .registration-astronaut {
  position: relative; z-index: 1;
  width: min(100%, 285px); height: auto;
  margin: 0 auto; transform: none;
  filter: drop-shadow(0 8px 14px #0005);
}
.site .start > .registration-ticker { width: calc(100% + 72px); margin: 16px 0 16px -36px; }
/* The foreground ribbon covers both the portrait crop and the card's top edge. */
.site .registration-visual + .registration-ticker { margin-top: -18px; margin-bottom: -12px; z-index: 2; }
.site .start > .release-card {
  z-index: 1;
  width: calc(100% + 52px);
  margin-left: -26px;
  border-radius: 0;
  box-shadow: none;
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 38px;
}
.site .release-card + .registration-ticker { margin-top: -12px; margin-bottom: 0; z-index: 2; }
.site .registration-heading { position: relative; width: 380px; max-width: 100%; height: auto; }
.site .registration-heading img { position: static; display: block; width: 100%; height: auto; margin: 0; transform: none; }
.site .release-card h3 { font-size: clamp(20px, 5.6vw, 26px); line-height: 1.6; }
.registration-reward { display: block; color: #d3b8ff; }
.registration-reward strong { font: 400 64px/1.2 'Anton', sans-serif; margin: 0 8px; }
.site .release-card > .registration-intro {
  text-align: center;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: clamp(16px, 4.533333vw, 20px);
  font-weight: 700;
  line-height: 1.8;
  color: #d2c7ed;
}
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .site .release-card > .registration-intro {
    background: var(--hamoni-holo);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.registration-fields { display: grid; gap: 12px; }
.registration-fields label { font-size: 14px; font-weight: 700; }
.registration-fields input {
  width: 100%; min-width: 0; min-height: 52px; padding: 12px 14px;
  border: 1px solid #a99cbe; border-radius: 4px;
  background: #100d18;
  color: #f6f5ff; caret-color: #f6f5ff;
  box-shadow: inset 0 2px 4px #0004;
  font: inherit; font-size: 16px;
}
.registration-fields input::placeholder { color: #a8a0b5; opacity: 1; }
.registration-fields input:focus-visible { outline: 2px solid #eaf7fb; outline-offset: 3px; }
.site .registration-fields .action {
  width: 100%; min-height: 52px; margin-bottom: 6px;
  border: 1px solid #faf5ff; border-radius: 4px;
  background: var(--hamoni-holo); color: var(--hamoni-control-ink);
  box-shadow: inset 0 2px 0 #ffffffed, inset 0 -3px 0 #66558266, 0 5px 0 #685b88, 0 7px 12px #0005;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700; font-size: 16px; text-shadow: none;
  opacity: 1; -webkit-text-fill-color: var(--hamoni-control-ink); cursor: not-allowed;
}

.registration-modal {
  box-sizing: border-box;
  width: min(420px, calc(100vw - 32px));
  max-width: none; max-height: calc(100dvh - 40px);
  margin: auto; padding: 42px 24px 26px; overflow-y: auto;
  border: 1px solid transparent; border-radius: 18px;
  background: linear-gradient(#100d18, #08070d) padding-box, var(--hamoni-holo) border-box;
  color: #f6f5ff; box-shadow: 0 18px 65px #000a, 0 0 24px #c2adf424;
  font-family: 'Noto Sans JP', sans-serif; overscroll-behavior: contain;
}
.registration-modal::backdrop { background: #000b; }
.registration-modal[open] { animation: registration-modal-in 240ms ease-out both; }
.registration-modal [hidden] { display: none; }
.registration-modal-close {
  position: absolute; top: 4px; right: 4px; width: 40px; height: 40px;
  border: 0; background: transparent; color: #ddd4f0; font-size: 28px; cursor: pointer;
}
.registration-modal-label {
  margin: 0 0 12px; text-align: center; color: #d2c7ed;
  font-size: 12px; font-weight: 700; letter-spacing: .07em;
}
.registration-modal h2 {
  margin: 0 0 22px; text-align: center;
  font-size: clamp(19px, 5.2vw, 23px); line-height: 1.6; font-weight: 700;
}
.registration-modal h2:focus { outline: none; }
.registration-modal p:not(.registration-modal-label):not(.registration-modal-email) {
  margin: 0; font-size: 15px; line-height: 1.85;
}
.registration-modal .registration-modal-email {
  margin: 0 0 20px; padding: 14px 12px; border: 1px solid #d2c7ed40;
  border-radius: 8px; background: #ffffff08; font-size: 16px; line-height: 1.6;
  text-align: center; overflow-wrap: anywhere; font-weight: 700;
}
.registration-modal .registration-modal-status:not(:empty) { margin-top: 16px; color: #d3c7ec; font-size: 13px; }
.registration-modal-actions { display: grid; gap: 12px; margin-top: 26px; }
.registration-modal-actions button {
  min-height: 48px; padding: 12px; border-radius: 9px; cursor: pointer;
  font: 700 14px/1.5 'Noto Sans JP', sans-serif;
}
.registration-modal-primary {
  border: 1px solid #faf5ff; color: #101014;
  background: linear-gradient(#ffffff33, #30204422), var(--hamoni-holo);
  box-shadow: inset 0 1px #fff, 0 4px #685b88;
}
.registration-modal-secondary { border: 1px solid #d2c7ed55; color: #eee8fa; background: #ffffff08; }
.registration-modal button:disabled { cursor: not-allowed; opacity: .55; }
.registration-modal button:focus-visible { outline: 2px solid #eaf7fb; outline-offset: 3px; }
.registration-modal strong { color: #e5d6ff; }
.site .registration-fields .action:not(:disabled) { cursor: pointer; }
@keyframes registration-modal-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .registration-modal[open] { animation: none; } }
.registration-stamp {
  position: absolute;
  left: 8px;
  z-index: 2;
  width: clamp(86px, 25vw, 108px);
  height: auto;
  pointer-events: none;
  transform: rotate(-7deg);
  filter: drop-shadow(0 3px 5px #0008);
}

.site .menu-toggle {
  right: max(13px, calc((100vw - 480px)/2 + 13px));
  border-color: transparent;
  color: #b46cff;
  cursor: pointer;
}
/* Purple HUD brackets: only the four corners are outlined. */
.site .menu-toggle::after,
.site .sticky::after {
  --corner-length: 12px;
  --corner-thickness: 2px;
  --corner-color: #b46cff;
  content: '';
  position: absolute;
  inset: -1px;
  pointer-events: none;
  background:
    linear-gradient(var(--corner-color), var(--corner-color)) left top / var(--corner-length) var(--corner-thickness),
    linear-gradient(var(--corner-color), var(--corner-color)) left top / var(--corner-thickness) var(--corner-length),
    linear-gradient(var(--corner-color), var(--corner-color)) right top / var(--corner-length) var(--corner-thickness),
    linear-gradient(var(--corner-color), var(--corner-color)) right top / var(--corner-thickness) var(--corner-length),
    linear-gradient(var(--corner-color), var(--corner-color)) left bottom / var(--corner-length) var(--corner-thickness),
    linear-gradient(var(--corner-color), var(--corner-color)) left bottom / var(--corner-thickness) var(--corner-length),
    linear-gradient(var(--corner-color), var(--corner-color)) right bottom / var(--corner-length) var(--corner-thickness),
    linear-gradient(var(--corner-color), var(--corner-color)) right bottom / var(--corner-thickness) var(--corner-length);
  background-repeat: no-repeat;
  filter: drop-shadow(0 0 3px #b46cff66);
}
.site .sticky::after { inset: 0; --corner-length: 16px; }
.site .menu-toggle span {
  position: absolute;
  left: 11px;
  top: 20px;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 300ms cubic-bezier(.4, 0, .2, 1), opacity 200ms ease;
}
.site .menu-toggle span:nth-child(1) { transform: translateY(-7px); }
.site .menu-toggle span:nth-child(3) { transform: translateY(7px); }
.site .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.site .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.site .menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }
@media (prefers-reduced-motion: reduce) {
  .site .menu-toggle span { transition: none; }
}

/* A dark game menu, using the preparation button's violet palette. */
.site #menu {
  left: auto;
  right: max(13px, calc((100vw - 480px)/2 + 13px));
  width: clamp(180px, calc((100vw - 40px)/2), 220px);
  padding: 10px;
  z-index: 2;
  overscroll-behavior: contain;
  border: 1px solid transparent;
  border-radius: 4px 16px 4px 16px;
  background:
    linear-gradient(145deg, #191022, #09070f 65%, #221333) padding-box,
    linear-gradient(125deg, #d4b5ff, #783eaf 55%, #ae68ff) border-box;
  color: #f3eaff;
  box-shadow: 0 14px 36px #0009, 0 0 20px #9149df26, inset 0 1px 14px #b46cff12;
  transform-origin: top right;
}
.site #menu:not([hidden]) {
  animation: game-menu-reveal 380ms cubic-bezier(.22, 1, .36, 1) both;
}
.site #menu a {
  font-family: 'WDXL Lubrifont TC', 'Noto Sans JP', sans-serif;
  font-weight: 400;
  padding: 15px 8px;
  min-height: 48px;
  border-bottom: 1px solid #ad72e333;
  color: #f3eaff;
  font-size: 15px;
  letter-spacing: .025em;
  transition: background-color 180ms ease, color 180ms ease;
}
body.menu-open { overflow: hidden; }
body.menu-open .site header { z-index: 100; }
body.menu-open .menu-toggle { z-index: 2; }
.menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: rgba(3, 1, 9, .72);
  touch-action: none;
  animation: menu-dim-in 250ms ease both;
}
.menu-backdrop[hidden] { display: none; }
@keyframes menu-dim-in { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .menu-backdrop { animation: none; } }
.site #menu a:hover { background-color: #9b54e326; color: #fff; }
.site #menu a:focus-visible { outline: 2px solid #d4b5ff; outline-offset: -3px; }
.site #menu a:last-child {
  margin-top: 14px;
  border: 1px solid #c28afa;
  border-radius: 2px 10px 2px 10px;
  text-align: center;
  background: linear-gradient(110deg, #341458, #7435bc 52%, #35105c);
  box-shadow: inset 0 1px 10px #d4a5ff44, inset 0 -4px 12px #17052d66;
  text-shadow: 0 0 10px #cfb4ff70;
}
.site #menu a:last-child:hover { background: linear-gradient(110deg, #482174, #8745d4 52%, #49206e); }
@keyframes game-menu-reveal {
  from { opacity: 0; transform: translateY(-10px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .site #menu:not([hidden]) { animation: none; }
  .site #menu a { transition: none; }
}

/* One violet source for navigation, CTA, and brand highlights. */
:root {
  --hamoni-purple: #8b5cf6;
  --hamoni-purple-light: color-mix(in srgb, var(--hamoni-purple) 30%, white);
  --hamoni-purple-dark: color-mix(in srgb, var(--hamoni-purple) 38%, black);
  --hamoni-purple-black: color-mix(in srgb, var(--hamoni-purple) 9%, black);
  --hamoni-purple-line: color-mix(in srgb, var(--hamoni-purple) 30%, transparent);
  --hamoni-purple-glow: color-mix(in srgb, var(--hamoni-purple) 35%, transparent);
  --hamoni-button-fill: linear-gradient(110deg, var(--hamoni-purple-dark), color-mix(in srgb, var(--hamoni-purple) 80%, black), var(--hamoni-purple-dark));
}
.site .menu-toggle,
.site .intro > .eyebrow,
.explorer-identity .explorer-word { color: var(--hamoni-purple); }
.site .menu-toggle { background: var(--hamoni-purple-black); }
.site .menu-toggle::after,
.site .sticky::after {
  --corner-color: var(--hamoni-purple);
  filter: drop-shadow(0 0 3px var(--hamoni-purple-glow));
}
.site #menu {
  color: var(--hamoni-purple-light);
  background:
    linear-gradient(145deg, var(--hamoni-purple-black), #09090b 65%, var(--hamoni-purple-dark)) padding-box,
    linear-gradient(125deg, var(--hamoni-purple), var(--hamoni-purple-dark), var(--hamoni-purple)) border-box;
  box-shadow: 0 14px 36px #0009, 0 0 20px var(--hamoni-purple-line);
}
.site #menu a { color: var(--hamoni-purple-light); border-bottom-color: var(--hamoni-purple-line); }
.site #menu a:hover { background-color: var(--hamoni-purple-line); color: #fff; }
.site #menu a:focus-visible,
.site .menu-toggle:focus-visible,
.site .sticky:focus-visible { outline-color: var(--hamoni-purple-light); }
.site #menu a:last-child,
.site .sticky::before {
  background: var(--hamoni-button-fill);
  box-shadow: inset 0 1px 10px var(--hamoni-purple-glow), inset 0 -4px 12px #0005;
}
.site #menu a:last-child { border-color: var(--hamoni-purple); text-shadow: 0 0 10px var(--hamoni-purple-glow); }
.site #menu a:last-child:hover,
.site .sticky:hover::before { background: linear-gradient(110deg, var(--hamoni-purple-dark), color-mix(in srgb, var(--hamoni-purple) 90%, black), var(--hamoni-purple-dark)); }
.site .sticky { background: var(--hamoni-purple-black); text-shadow: 0 0 10px var(--hamoni-purple-glow); }
.site .sticky span { color: var(--hamoni-purple-light); border-right-color: var(--hamoni-purple-line); }

/* Navigation and preparation controls share the ribbon's holographic foil. */
:root {
  --hamoni-holo: linear-gradient(110deg, #bca6f0 0%, #f4bcdf 14%, #f5e3ad 27%, #b6eddf 40%, #a6d6f8 53%, #c2adf4 66%, #efc2ec 79%, #eaf7fb 90%, #bca6f0 100%);
  --hamoni-control-ink: #101014;
}
.site .intro > .eyebrow { color: #d2c7ed; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .site .intro > .eyebrow {
    background: var(--hamoni-holo);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
  }
}
.site .menu-toggle,
.site #menu,
.site .sticky {
  color: var(--hamoni-control-ink);
  background: var(--hamoni-holo);
  text-shadow: none;
}
.site .menu-toggle::after,
.site .sticky::after {
  --corner-color: #faf5ff;
  filter: drop-shadow(0 0 2px #8872c180);
}
.site .menu-toggle { box-shadow: inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #66558266; }
.site #menu { border-color: #f6edff; box-shadow: 0 14px 36px #0009, inset 0 1px 12px #ffffff80; }
.site #menu a,
.site #menu a:hover,
.site .sticky span { color: var(--hamoni-control-ink); text-shadow: none; }
.site #menu a { border-bottom-color: #21192f33; }
.site #menu a:hover { background-color: #ffffff55; }
.site #menu a:last-child,
.site #menu a:last-child:hover,
.site .sticky::before,
.site .sticky:hover::before {
  background: var(--hamoni-holo);
  box-shadow: inset 0 1px 0 #ffffffcc, inset 0 -1px 0 #66558266;
}
.site #menu a:last-child { border-color: #21192f55; text-shadow: none; }
.site .sticky span { border-right-color: #21192f55; }
.site #menu a:focus-visible { outline-color: #101014; }
.site .menu-toggle:focus-visible,
.site .sticky:focus-visible { outline-color: #eaf7fb; }

/* Raised foil face with a solid lower edge and tactile press feedback. */
/* Keep the menu button quiet: foil only on the bars and corner brackets. */
.site .menu-toggle {
  background: rgb(13 8 22 / 30%);
  box-shadow: none;
}
.site .menu-toggle span { background: var(--hamoni-holo); }
.site .menu-toggle::after {
  background: var(--hamoni-holo);
  filter: none;
  --corner-mask: linear-gradient(#000 0 0) left top / 12px 2px no-repeat,
    linear-gradient(#000 0 0) left top / 2px 12px no-repeat,
    linear-gradient(#000 0 0) right top / 12px 2px no-repeat,
    linear-gradient(#000 0 0) right top / 2px 12px no-repeat,
    linear-gradient(#000 0 0) left bottom / 12px 2px no-repeat,
    linear-gradient(#000 0 0) left bottom / 2px 12px no-repeat,
    linear-gradient(#000 0 0) right bottom / 12px 2px no-repeat,
    linear-gradient(#000 0 0) right bottom / 2px 12px no-repeat;
  -webkit-mask: var(--corner-mask);
  mask: var(--corner-mask);
}
.site .sticky {
  cursor: pointer;
  min-height: 40px;
  border-radius: 10px;
  box-shadow: 0 6px 0 #685b88, 0 8px 0 #21192f, 0 13px 22px #0008;
  transition: opacity 500ms ease, transform 650ms cubic-bezier(.22, 1, .36, 1), box-shadow 150ms ease;
}
.site .sticky::before,
.site .sticky:hover::before {
  border-radius: inherit;
  background: linear-gradient(to bottom, #ffffff66 0%, #ffffff18 35%, #30204410 60%, #30204455 100%), var(--hamoni-holo);
  box-shadow: inset 0 2px 0 #ffffffed, inset 2px 0 0 #ffffff80, inset -2px 0 0 #75618a40, inset 0 -3px 5px #30204450;
}
.site .sticky::after { border-radius: inherit; }
@media (hover: hover) and (pointer: fine) {
  .site .sticky:not(.is-hidden):hover {
    box-shadow: 0 7px 0 #685b88, 0 9px 0 #21192f, 0 15px 26px #0009, 0 0 12px #d9ccff55;
  }
}
.site .sticky:not(.is-hidden):active {
  transform: translate(-50%, 4px) scale(1);
  box-shadow: 0 2px 0 #685b88, 0 3px 0 #21192f, 0 5px 10px #0007;
  transition-duration: 80ms;
}
@media (prefers-reduced-motion: reduce) {
  .site .sticky { transition: none; }
}

/* Five steps through the former 01 lavender, 05 turquoise, and 02 pink-violet. */
.site #explorer { --accent: #d6d8ff; }
.site #discover { --accent: #73dce2; }
.site #swipe { --accent: #10dfc4; }
.site #mission { --accent: #71addf; }
.site #collect { --accent: #d17afa; }
.site :is(#explorer, #discover, #swipe, #mission, #collect) {
  --pink: var(--accent);
  --lime: var(--accent);
  --violet: var(--accent);
  --aqua: var(--accent);
}
.site :is(#explorer, #discover, #swipe, #mission, #collect) :is(.explorer-story, .memo, .swipe-story, .mission-memo, .collection-notes) {
  --panel-light: color-mix(in srgb, var(--accent) 78%, white);
  --panel-glow: var(--accent);
  --panel-deep: color-mix(in srgb, var(--accent) 15%, #10131f);
  --panel-bottom: color-mix(in srgb, var(--accent) 7%, #111018);
  --panel-border: color-mix(in srgb, var(--accent) 45%, #15131f);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    linear-gradient(color-mix(in srgb, var(--accent) 7%, transparent) 1px, transparent 1px) 0 0 / 12px 12px padding-box,
    radial-gradient(ellipse at 0% 0%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 37%) padding-box,
    radial-gradient(ellipse at 100% 100%, color-mix(in srgb, var(--accent) 25%, transparent), transparent 35%) padding-box,
    linear-gradient(180deg, var(--panel-deep), var(--panel-bottom)) padding-box,
    linear-gradient(135deg, var(--panel-light), var(--panel-border) 48%, var(--accent)) border-box;
  box-shadow: inset 0 0 18px color-mix(in srgb, var(--accent) 5%, transparent), 0 0 14px color-mix(in srgb, var(--accent) 9%, transparent);
}
.site #swipe .swipe-note { background: var(--accent); color: #21132d; }
.site #discover .map-note,
.site #mission .mission-note { background: var(--accent); }
.site #collect .collection-outro { color: var(--accent); }

/* Fixed artwork, scrolling LP, and a fixed 240px navigation rail. */
body > #desktop-menu { display: none; }
@media (min-width: 850px) {
  html body { background: #030309; }
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: #030309 url('./assets/desktop-hamoni-space-lossless.webp') left center / auto 100% no-repeat;
    /* Subject center is approximately x=520 in the 1280x860 artwork.
       Center it in the exposed area, accounting for LP, menu and foil rail. */
    background-position-x: min(0px, calc((100vw - 728px) / 2 - 60.465116vh));
    pointer-events: none;
  }
  body > .site { width: 480px; margin-left: auto; margin-right: 240px; }
  /* Outside the 480px LP: 8px foil rails, with no overlay on its content. */
  body::after {
    content: '';
    position: fixed;
    top: 0; bottom: 0; right: 232px; width: 496px;
    box-sizing: border-box;
    border-style: solid;
    border-width: 0 8px;
    border-image: var(--hamoni-holo) 1;
    box-shadow: -12px 0 24px #0009, 12px 0 24px #0009;
    pointer-events: none;
    z-index: 40;
  }
  body > .desktop-label,
  body > .desktop-right { display: none; }
  .site .menu-toggle,
  .site #menu { display: none; }
  .site .sticky { display: none; }
  body > #desktop-menu {
    display: flex; flex-direction: column; justify-content: safe center; gap: 8px;
    position: fixed; inset: 0 0 0 auto; width: 240px; height: 100dvh; max-height: none;
    padding: 32px 18px 32px 32px; overflow-y: auto; overscroll-behavior: contain; z-index: 30;
    background: #0c0914; color: #f6f5ff; box-shadow: -1px 0 0 #d2c7ed33;
    font-family: 'WDXL Lubrifont TC', 'Noto Sans JP', sans-serif;
  }
  body > #desktop-menu a {
    display: block; flex-shrink: 0; padding: 17px 10px; min-height: 52px;
    font-size: 16px; font-weight: 400; line-height: 1.5;
    color: #f6f5ff; border-bottom: 1px solid #d2c7ed40;
  }
  body > #desktop-menu a:hover { background: #d2c7ed18; }
  body > #desktop-menu a:last-child {
    margin-top: 20px; text-align: center; border: 1px solid #faf5ff; border-radius: 4px;
    background: var(--hamoni-holo); color: var(--hamoni-control-ink);
    box-shadow: 0 4px 0 #685b88;
  }
  body > #desktop-menu a:focus-visible { outline: 2px solid #eaf7fb; outline-offset: 2px; }
}

header .brand-logo { display: flex; align-items: center; gap: 8px; width: min(144px, 45vw); min-height: 44px; flex: 0 0 auto; }
header .brand-logo img { display: block; height: auto; }
header .brand-logo .brand-symbol { width: 28px; flex: 0 0 28px; }
header .brand-logo .brand-text { width: calc(100% - 36px); }
:root{--ink:#18181b;--white:#f6f5e9;--pink:#ff35b7;--lime:#bdff36;--violet:#a644ff;--aqua:#10dfc4;font-family:'Noto Sans JP',sans-serif;color:var(--white);background:#111113;font-synthesis:none}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0}a{color:inherit;text-decoration:none}button{font:inherit}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--aqua);outline-offset:5px}.skip{position:fixed;top:-80px;z-index:100;background:white;color:black;padding:10px}.skip:focus{top:0}.site{position:relative;max-width:480px;margin:auto;overflow:clip;background:var(--ink);background-image:radial-gradient(#fff1 .7px,transparent .7px);background-size:5px 5px;box-shadow:0 0 100px #0008}.desktop-label,.desktop-right{display:none}header{position:absolute;top:0;left:0;right:0;z-index:10;padding:23px 21px;display:flex;justify-content:space-between;align-items:center}.wordmark{font-family:Arial,sans-serif;font-size:34px;font-weight:1000;font-style:italic;line-height:.9;letter-spacing:-2px;transform:rotate(-4deg);text-shadow:2px 2px var(--ink)}.wordmark span{display:block;font-size:8px;letter-spacing:1.6px;margin-top:8px;font-style:normal}.menu-toggle{position:fixed;top:max(23px,env(safe-area-inset-top));right:max(21px,calc((100vw - 480px)/2 + 21px));width:44px;height:44px;border:1px solid #fff5;background:#171719b8;display:grid;align-content:center;gap:6px;justify-content:center;color:white;transform:none}.menu-toggle span{display:block;width:20px;height:3px;background:#fff}nav{position:fixed;top:calc(max(23px,env(safe-area-inset-top)) + 63px);left:max(20px,calc((100vw - 480px)/2 + 20px));right:max(20px,calc((100vw - 480px)/2 + 20px));max-height:calc(100dvh - 110px);overflow-y:auto;padding:20px;background:var(--lime);color:var(--ink);box-shadow:6px 6px var(--pink)}nav a{display:block;padding:13px;font-weight:900;border-bottom:1px solid #17171944}nav[hidden]{display:none}.hero{position:relative;padding-top:120px;background:radial-gradient(ellipse at 78% 40%,#53236f 0,transparent 60%),linear-gradient(135deg,#1a2020,#151317);overflow:hidden}.hero-grid{position:absolute;inset:0;background:linear-gradient(transparent 96%,#ffffff0b 96%),linear-gradient(90deg,transparent 96%,#ffffff0b 96%);background-size:35px 35px;transform:rotate(-12deg) scale(1.4)}.issue{position:relative;margin:0 22px 18px;font-family:monospace;font-size:11px;letter-spacing:1px;color:var(--aqua)}h1{position:relative;z-index:4;margin:0 18px;transform:rotate(-6deg)}h1>span{display:table;padding:4px 9px;background:var(--white);color:var(--ink);font-size:clamp(20px,5.8vw,28px);font-weight:900}h1 strong{display:block;font-size:clamp(43px,12vw,58px);font-weight:900;letter-spacing:-.065em;color:var(--lime);line-height:1.4;text-shadow:3px 3px #191919,-1px -1px #191919;filter:drop-shadow(2px 3px 0 var(--pink))}.hero-visual{height:390px;position:relative;margin-top:-8px}.giant-type{position:absolute;left:15px;top:42px;font:1000 italic 104px/.85 Arial,sans-serif;letter-spacing:-9px;color:transparent;-webkit-text-stroke:1px #f7f5e93b;transform:rotate(-9deg)}.hero-phone{position:absolute;width:40%;height:274px;top:71px;left:8%;border:5px solid #48484b;border-radius:25px;transform:rotate(-13deg);overflow:hidden;box-shadow:10px 10px 0 #0007}.hero-phone img{width:100%;height:100%;object-fit:cover;object-position:top}.hero-character{position:absolute;width:80%;height:365px;object-fit:contain;right:-13%;top:0;filter:drop-shadow(9px 18px 14px #0009);transform:rotate(8deg)}.sticker{display:block;background:var(--lime);color:var(--ink);font-weight:900;padding:9px 13px;border:2px solid var(--ink);box-shadow:3px 4px 0 var(--white);transform:rotate(-8deg);font-size:16px}.hero-sticker{position:absolute;bottom:32px;right:18px;background:var(--pink);transform:rotate(8deg);z-index:5}.coordinate{position:absolute;left:20px;bottom:0;font:10px/1.5 monospace;color:#a1a1a6}.orbit-star{position:absolute;right:22px;top:12px;font-size:70px;color:var(--aqua);transform:rotate(12deg)}.hero-ticket{position:relative;display:block;background:var(--aqua);color:var(--ink);padding:22px 28px 27px;margin-top:6px;clip-path:none}.hero-ticket span{display:block;font-size:14px;font-weight:700}.hero-ticket b{font-size:25px;letter-spacing:-1px}.hero-ticket i{position:absolute;right:23px;top:30px;font-size:36px;font-style:normal}.ticker{overflow:hidden;background:var(--pink);color:var(--ink);padding:8px 0;transform:rotate(-2deg);width:104%;margin-left:-2%;white-space:nowrap;font:900 14px Arial,sans-serif;letter-spacing:2px}.ticker span{display:inline-block;animation:marquee 22s linear infinite}.intro{padding:66px 26px 54px;text-align:center}.eyebrow{font:700 11px/1.5 monospace;letter-spacing:2px;color:var(--aqua);margin-bottom:18px}.intro h2{font-size:30px;line-height:1.55;letter-spacing:-1.5px;font-weight:900}.intro em{font-style:normal;background:var(--lime);color:var(--ink);padding:1px 5px}.intro>p:not(.eyebrow){font-size:16px;line-height:2;margin-top:26px}.round-link{display:grid;place-items:center;width:44px;height:44px;border:1px solid #fff5;border-radius:50%;margin:28px auto 0;font-size:24px}.chapter{--accent:var(--pink);position:relative;padding:30px 24px 50px 36px}.chapter.lime{--accent:var(--lime)}.chapter.violet{--accent:var(--violet)}.route{position:absolute;left:12px;top:40px;bottom:-5px;width:8px;background:var(--accent);border-radius:10px}.route:after{content:'';position:absolute;inset:0;background:radial-gradient(circle,#171719 2px,transparent 3px) center top/8px 28px}.chapter-head{display:flex;align-items:center;gap:13px;margin:0 0 26px -11px}.number{position:relative;flex:none;width:51px;height:51px;border:5px solid var(--accent,var(--ink));color:var(--accent,var(--ink));border-radius:50%;background:var(--ink);display:grid;place-items:center;font:900 22px Arial,sans-serif;z-index:2}.chapter-head p{color:var(--accent);font:700 11px/1.4 monospace;letter-spacing:.6px}.chapter h2{font-weight:900;transform:rotate(-3deg);position:relative;z-index:2;margin-left:-7px}.pretitle{display:block;color:var(--accent);font-size:20px;line-height:1.8}.tape{display:inline-block;background:var(--accent);color:var(--ink);padding:5px 9px 8px;font-size:clamp(23px,6.5vw,31px);line-height:1.25;letter-spacing:-1.5px;clip-path:polygon(0 0,98% 3%,100% 91%,1% 100%)}.violet .tape{color:white}.chapter-copy{margin-top:25px;font-size:15px;line-height:1.95;letter-spacing:-.4px}.map-stage{position:relative;height:446px;margin-top:25px}.outline-word{position:absolute;left:-12px;top:15px;font:900 italic 60px Arial,sans-serif;color:transparent;-webkit-text-stroke:1px #fff3;transform:rotate(-10deg);letter-spacing:-3px}.map-screen{position:absolute;width:72%;height:376px;top:25px;left:11%;object-fit:cover;object-position:top;border:5px solid #414145;border-radius:27px;transform:rotate(7deg);box-shadow:10px 15px 0 #0005}.map-note{position:absolute;bottom:8px;left:-8px;background:var(--aqua);font-size:20px;line-height:1.4}.cross{position:absolute;right:0;top:15px;color:var(--pink);font-size:72px}.memo{background:var(--violet);padding:22px 20px 27px;transform:rotate(-4deg);border-radius:4px 20px 4px 18px;margin:4px 4px 16px -3px;box-shadow:5px 5px #0004}.memo-label{display:block;font:10px monospace;letter-spacing:1.4px;margin-bottom:9px}.memo h3{font-size:20px;font-weight:900;margin-bottom:10px}.memo p{font-size:14px;line-height:1.9}.swipe-stage{height:452px;position:relative;margin:28px 0 14px}.swipe-stage img{position:absolute;width:72%;height:390px;object-fit:cover;object-position:top;left:12%;top:10px;border:5px solid #48484a;border-radius:24px;transform:rotate(-7deg);box-shadow:6px 10px #0006}.swipe-back{position:absolute;inset:20px 16% 37px 5%;border:2px solid var(--lime);border-radius:23px;transform:rotate(8deg);background:repeating-linear-gradient(45deg,#343438 0 3px,#202023 3px 8px)}.swipe-note{position:absolute;right:-6px;bottom:34px;background:var(--pink);transform:rotate(8deg)}.swipe-stamp{position:absolute;left:-7px;top:36px;font:900 italic 35px Arial,sans-serif;border:4px solid var(--lime);color:var(--lime);padding:4px 8px;transform:rotate(-20deg);text-shadow:2px 2px #18181b}.small-tape{display:table;background:var(--lime);color:var(--ink);padding:8px 10px;font-size:14px;font-weight:900;transform:rotate(-3deg);margin:auto}.mission-stage{position:relative;height:360px;margin-top:28px}.mission-stage img{position:absolute;left:10%;top:20px;width:80%;height:288px;object-fit:cover;object-position:top;border:6px solid #454549;border-radius:8px;transform:rotate(5deg);box-shadow:7px 9px #0006}.mission-note{position:absolute;left:0;bottom:0;background:var(--aqua);font-size:18px}.crew-block{position:relative;text-align:center;margin:40px -16px 0 -15px;padding:17px 0 35px}.crew-block>p{font:900 italic 24px Arial,sans-serif;letter-spacing:-1px;color:var(--pink);transform:rotate(-8deg)}.crew-block img{width:115%;max-width:none;margin:13px -7% -10px;filter:drop-shadow(3px 14px 10px #0008)}.crew-block h3{position:relative;font-size:32px;line-height:1.4;font-weight:900;transform:rotate(-7deg);text-shadow:4px 4px var(--violet)}.crew-block .small-tape{margin-top:28px;background:var(--pink);font-size:13px}.start{position:relative;background:var(--aqua);color:var(--ink);padding:40px 26px 30px;clip-path:polygon(0 1%,100% 0,100% 100%,0 100%);background-image:repeating-radial-gradient(ellipse at 90% 55%,transparent 0 22px,#baff3330 23px 26px,transparent 27px 40px)}.start-title{display:flex;gap:12px;align-items:center;transform:rotate(-4deg)}.start .number{color:var(--ink);border-color:var(--ink);background:transparent;width:46px;height:46px;font-size:20px}.start h2{font-size:26px;font-weight:900;line-height:1.5;letter-spacing:-1px}.start h2 strong{background:var(--ink);color:var(--white);padding:0 5px;font-size:32px}.start>p{font-weight:700;margin:30px 0 0 6px;font-size:16px;line-height:1.8}.start>img{height:285px;margin:-24px auto -7px;transform:rotate(-12deg);filter:drop-shadow(4px 12px 0 #0002)}.release-card{position:relative;background:var(--ink);color:var(--white);padding:25px 20px 22px;border-radius:3px 18px 3px 18px;box-shadow:5px 6px #0003}.release-card .eyebrow{font-size:10px;margin-bottom:12px}.release-card h3{font-size:22px;font-weight:900;letter-spacing:-.8px}.release-card>p:not(.eyebrow){margin:13px 0 23px;font-size:14px;line-height:1.8}.action{display:block;text-align:center;background:var(--pink);border:2px solid var(--white);color:var(--ink);padding:13px 6px;font-size:14px;font-weight:900;box-shadow:3px 3px var(--violet);min-height:48px}.faq{padding:50px 26px 40px}.faq h2{font-size:29px;margin-bottom:24px}.faq details{border-top:1px solid #fff3}.faq summary{cursor:pointer;padding:20px 24px 20px 0;position:relative;list-style:none;font-size:15px;font-weight:700}.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:'+';position:absolute;right:0;color:var(--lime);font-size:24px;top:14px}.faq details[open] summary:after{content:'−'}.faq details p{font-size:14px;line-height:1.9;color:#ccc9cd;margin:0 0 20px}footer{position:relative;background:transparent;color:var(--white);padding:35px 26px 110px;clip-path:polygon(0 3%,100% 0,100% 100%,0 100%)}footer .wordmark{display:inline-block;text-shadow:none;font-size:40px}footer p{margin-top:26px;font-size:13px;font-weight:700}footer small{display:block;font:11px monospace;margin-top:16px}.back-top{position:absolute;right:25px;top:40px;width:45px;height:45px;display:grid;place-items:center;border:2px solid currentColor;border-radius:50%;font-size:25px}.sticky{position:fixed;z-index:20;bottom:max(12px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 30px),440px);display:flex;justify-content:center;align-items:center;gap:17px;min-height:54px;background:var(--pink);color:var(--ink);border:2px solid var(--white);box-shadow:4px 4px var(--ink);font-size:16px;font-weight:900}.sticky span{font:900 italic 14px Arial,sans-serif;border-right:2px solid var(--ink);padding-right:17px}.sticky.is-hidden{opacity:0;pointer-events:none}section[id]{scroll-margin-top:20px}@keyframes marquee{to{transform:translateX(-35%)}}@media(min-width:850px){body{background:radial-gradient(ellipse at 5% 55%,#45234855,transparent 50%),repeating-linear-gradient(-45deg,#ffffff03 0 1px,transparent 1px 10px),#101012}.desktop-label{display:block;position:fixed;left:max(20px,calc(50% - 565px));top:27%;width:270px;transform:rotate(-7deg)}.desktop-label>span{font:900 italic 39px Arial,sans-serif;color:var(--lime);letter-spacing:-2px}.desktop-label>p{font:900 33px/.95 Arial,sans-serif;color:#fff3;margin:20px 0 30px}.desktop-label small{font-size:13px;line-height:2;color:#b2adb5}.desktop-right{display:flex;position:fixed;right:calc(50% - 345px);top:40%;writing-mode:vertical-rl;font:12px monospace;letter-spacing:3px;color:var(--aqua);gap:25px}.desktop-right span{font-size:28px}}@media(max-width:359px){.chapter{padding-left:30px;padding-right:18px}.chapter-copy{font-size:14px}.pretitle{font-size:18px}.hero-visual{height:360px}.hero-character{height:330px}.hero-phone{height:255px}.hero-ticket b{font-size:22px}.intro h2{font-size:27px}.sticky{font-size:14px;gap:10px}.start h2 strong{font-size:28px}.tape{letter-spacing:-1px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.ticker span{animation:none}}