:root {
  /* Design font compliance tokens: Interface labels small coordinates: Mono** brings elegant broadcast-title drama Display** SemiBold Black word “heisei.boo Playfair-style flourish tail */
  --dusk-violet: #6D5DF6;
  --orchid-haze: #B56CFF;
  --soft-magenta: #F27ACB;
  --peach-flare: #FFB08A;
  --moon-cream: #FFF1D6;
  --deep-navy: #17133A;
  --glass-plum: #2B164C;
  --pale-cyan: #8BE9F2;
  --display: "Playfair Display", Georgia, serif;
  --serif: "Cormorant Garamond", Garamond, serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --body: "Noto Sans JP", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { background: var(--deep-navy); scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--moon-cream);
  font-family: var(--body);
  background:
    radial-gradient(circle at 22% 12%, rgba(181, 108, 255, .34), transparent 34rem),
    radial-gradient(circle at 78% 22%, rgba(242, 122, 203, .22), transparent 28rem),
    linear-gradient(135deg, var(--deep-navy), var(--glass-plum) 54%, #100d2d);
  overflow-x: hidden;
}

.ambient {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  overflow: hidden;
  mix-blend-mode: screen;
}

.scanlines {
  position: absolute;
  inset: 0;
  opacity: .11;
  background: repeating-linear-gradient(180deg, transparent 0 5px, rgba(255, 241, 214, .38) 6px, transparent 8px);
  animation: shimmer 7s linear infinite;
}

.flare {
  position: absolute;
  width: 34vmin;
  height: 34vmin;
  border-radius: 50%;
  filter: blur(2px);
  opacity: .5;
  background: radial-gradient(circle, rgba(255, 176, 138, .78), rgba(242, 122, 203, .26) 35%, transparent 68%);
}

.flare-a { top: 8vh; left: -8vmin; animation: flareDrift 24s ease-in-out infinite alternate; }
.flare-b { right: 4vw; top: 52vh; width: 19vmin; height: 19vmin; animation: flareDriftB 31s ease-in-out infinite alternate; }

.chrome-arc {
  position: absolute;
  width: 32rem;
  height: 32rem;
  border: 1px solid rgba(139, 233, 242, .24);
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: 50%;
}

.arc-a { right: -8rem; top: 10vh; transform: rotate(24deg); }
.arc-b { left: -12rem; bottom: 14vh; transform: rotate(-32deg); border-color: rgba(255, 176, 138, .2); border-right-color: transparent; }

.dream { position: relative; z-index: 1; }

.panel {
  position: relative;
  min-height: 100vh;
  opacity: 0;
  filter: blur(18px);
  transform: translate3d(-5vw, 5vh, 0) skewY(-1.6deg);
  transition: opacity 1.4s ease, filter 1.4s ease, transform 1.4s cubic-bezier(.2, .78, .16, 1);
}

.panel.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate3d(0, 0, 0) skewY(0);
}

.hero { overflow: hidden; isolation: isolate; }

.hero-sky {
  position: absolute;
  inset: 0 0 30% 0;
  background:
    radial-gradient(circle at 31% 18%, rgba(255, 176, 138, .42), transparent 8rem),
    linear-gradient(140deg, #2B164C 0%, #6D5DF6 45%, #B56CFF 68%, #F27ACB 100%);
  clip-path: polygon(0 0, 100% 0, 100% 48%, 0 78%);
}

.diagonal-plane {
  position: absolute;
  inset: 16% -8% 12% -8%;
  background: linear-gradient(115deg, rgba(109, 93, 246, .78), rgba(181, 108, 255, .44), rgba(139, 233, 242, .18));
  clip-path: polygon(0 35%, 100% 2%, 100% 50%, 0 82%);
  box-shadow: 0 0 80px rgba(181, 108, 255, .42);
}

.tiled-floor {
  position: absolute;
  inset: 42% 0 0 0;
  background:
    linear-gradient(153deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 92px 54px,
    linear-gradient(28deg, rgba(139,233,242,.15) 1px, transparent 1px) 0 0 / 92px 54px,
    linear-gradient(170deg, rgba(43,22,76,.36), rgba(23,19,58,.96) 66%);
  clip-path: polygon(0 28%, 100% 0, 100% 100%, 0 100%);
}

.hero-copy {
  position: relative;
  z-index: 2;
  padding: 18vh 8vw 0 12vw;
  max-width: 77rem;
}

.mono-label, .station-sign, .final-coordinates {
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: clamp(.65rem, 1.2vw, .86rem);
  color: var(--pale-cyan);
}

h1 {
  margin: .12em 0;
  font-family: var(--display);
  font-size: clamp(5rem, 16vw, 16rem);
  font-style: italic;
  line-height: .78;
  letter-spacing: -.08em;
  text-shadow: 0 0 34px rgba(255, 241, 214, .22), 0 18px 0 rgba(43,22,76,.2);
}

h1 span { color: var(--peach-flare); }

.scene-line {
  max-width: 36rem;
  margin: 2rem 0 0 12vw;
  font-family: var(--serif);
  font-size: clamp(1.5rem, 3vw, 3rem);
  color: rgba(255, 241, 214, .84);
}

.title-flare {
  position: absolute;
  z-index: 1;
  top: 31vh;
  left: 48vw;
  width: 26vmin;
  height: 26vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #FFF1D6 0 4%, #FFB08A 7% 18%, rgba(242,122,203,.24) 35%, transparent 70%);
  animation: dotPass 18s ease-in-out infinite;
}

.ghost-reflection, .crt-ghost, .stamp-ghost {
  position: absolute;
  width: 7rem;
  height: 8rem;
  border-radius: 50% 50% 44% 44%;
  background: radial-gradient(circle at 40% 22%, rgba(255,241,214,.74), rgba(139,233,242,.28) 42%, rgba(181,108,255,.08) 76%);
  box-shadow: 0 0 48px rgba(139,233,242,.32);
}

.ghost-reflection {
  right: 19vw;
  bottom: 10vh;
  opacity: .22;
  transform: rotate(-13deg) scaleY(.55);
  filter: blur(1px);
  animation: ghostFade 9s ease-in-out infinite;
}

.ghost-reflection:after, .crt-ghost:after, .stamp-ghost:after {
  content: "";
  position: absolute;
  right: -1.4rem;
  bottom: .1rem;
  width: 3.4rem;
  height: 2.3rem;
  border-bottom: 1.3rem solid rgba(139,233,242,.2);
  border-radius: 50%;
  transform: rotate(-24deg);
}

.ghost-eye, .crt-ghost span, .stamp-ghost span {
  position: absolute;
  top: 2.9rem;
  width: .52rem;
  height: .7rem;
  border-radius: 50%;
  background: var(--glass-plum);
}

.ghost-eye.left, .crt-ghost span:first-child, .stamp-ghost span:first-child { left: 2.4rem; }
.ghost-eye.right, .crt-ghost span:last-child, .stamp-ghost span:last-child { right: 2.4rem; }

.station-sign {
  position: absolute;
  right: 7vw;
  bottom: 21vh;
  padding: .8rem 1.2rem;
  border: 1px solid rgba(255,241,214,.22);
  background: rgba(23,19,58,.48);
  transform: rotate(-10deg);
}

.broadcast-strip {
  min-height: 38vh;
  margin-top: -10vh;
  display: grid;
  place-items: center;
  clip-path: polygon(0 28%, 100% 0, 100% 74%, 0 100%);
  background: linear-gradient(100deg, rgba(109,93,246,.88), rgba(242,122,203,.72), rgba(255,176,138,.64));
  overflow: hidden;
}

.strip-track {
  white-space: nowrap;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(2rem, 7vw, 7rem);
  color: var(--moon-cream);
  animation: broadcast 26s linear infinite;
}

.strip-track span { margin-right: 8vw; }

.chapter {
  min-height: 112vh;
  padding: 20vh 9vw;
  clip-path: polygon(0 9%, 100% 0, 100% 88%, 0 100%);
  background:
    radial-gradient(circle at 70% 28%, rgba(255,176,138,.18), transparent 22rem),
    linear-gradient(135deg, rgba(43,22,76,.96), rgba(23,19,58,.94));
  margin-top: -8vh;
}

.chapter:nth-of-type(odd) { clip-path: polygon(0 0, 100% 11%, 100% 100%, 0 86%); }

.chapter-copy {
  max-width: 42rem;
  margin-left: 6vw;
  transform: rotate(-3deg);
}

.offset-copy { margin-left: auto; margin-right: 8vw; transform: rotate(3deg); }

h2 {
  margin: .2rem 0 1.2rem;
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(2.5rem, 6vw, 7rem);
  line-height: .88;
  color: var(--moon-cream);
}

.chapter p:not(.mono-label), .postcard-card p:not(.mono-label) {
  font-size: clamp(1rem, 1.5vw, 1.28rem);
  line-height: 1.9;
  color: rgba(255,241,214,.74);
}

.guide-line {
  position: absolute;
  left: -10vw;
  top: 38vh;
  width: 120vw;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(139,233,242,.54), transparent);
  transform: rotate(-13deg);
}

.motif { position: absolute; transition: transform .6s ease; }

.escalator {
  right: 7vw;
  top: 32vh;
  width: 38vw;
  height: 22vh;
  transform: rotate(-17deg);
}

.escalator span {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--pale-cyan), var(--orchid-haze), transparent);
  box-shadow: 0 0 20px rgba(139,233,242,.42);
}

.escalator span:nth-child(1) { top: 20%; }
.escalator span:nth-child(2) { top: 48%; }
.escalator span:nth-child(3) { top: 76%; }

.token {
  position: absolute;
  left: 18vw;
  bottom: 16vh;
  width: 7rem;
  height: 7rem;
  border: 1px solid rgba(255,241,214,.4);
  border-radius: 50%;
  font-family: var(--serif);
  font-size: 3rem;
  color: var(--moon-cream);
  background: radial-gradient(circle, #FFB08A, #F27ACB 42%, #6D5DF6 74%);
  box-shadow: 0 0 44px rgba(255,176,138,.38);
  cursor: pointer;
  transition: transform .8s ease, box-shadow .8s ease;
}

.token.is-lit { transform: rotate(28deg) scale(1.08); box-shadow: 0 0 80px rgba(255,176,138,.72); }

.chapter-arcade { background: linear-gradient(142deg, rgba(23,19,58,.94), rgba(109,93,246,.46), rgba(43,22,76,.98)); }

.cd {
  left: 12vw;
  top: 26vh;
  width: min(30vw, 21rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(from 20deg, #8BE9F2, #FFF1D6, #F27ACB, #6D5DF6, #8BE9F2);
  opacity: .82;
  box-shadow: 0 0 70px rgba(139,233,242,.28);
  animation: cdSpin 28s linear infinite;
}

.cd-ring { position: absolute; inset: 12%; border: 1px solid rgba(23,19,58,.34); border-radius: 50%; }
.cd-hole { position: absolute; inset: 42%; border-radius: 50%; background: var(--deep-navy); box-shadow: inset 0 0 20px rgba(255,241,214,.28); }

.vending-bank {
  position: absolute;
  right: 10vw;
  bottom: 16vh;
  display: flex;
  gap: .8rem;
  transform: rotate(8deg);
}

.vending-bank span {
  display: block;
  width: 4rem;
  height: 12rem;
  border: 1px solid rgba(255,241,214,.18);
  background: linear-gradient(180deg, rgba(139,233,242,.2), rgba(242,122,203,.16));
}

.terminal-shell {
  width: min(66rem, 80vw);
  margin: 4vh auto 0;
  padding: 1.4rem;
  transform: rotate(-4deg);
  background: linear-gradient(135deg, rgba(255,241,214,.18), rgba(109,93,246,.18));
  border: 1px solid rgba(139,233,242,.34);
  box-shadow: 0 32px 90px rgba(0,0,0,.32);
}

.terminal-screen {
  position: relative;
  min-height: 30rem;
  padding: 4rem clamp(2rem, 6vw, 7rem);
  overflow: hidden;
  background:
    repeating-linear-gradient(180deg, rgba(255,255,255,.03) 0 2px, transparent 3px 8px),
    radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(139,233,242,.26), transparent 15rem),
    linear-gradient(150deg, rgba(23,19,58,.96), rgba(43,22,76,.92));
}

.crt-ghost {
  right: 9%;
  bottom: 12%;
  opacity: .18;
  transform: scale(.72);
  transition: opacity .6s ease, transform .6s ease;
}

.terminal-shell.is-awake .crt-ghost { opacity: .56; transform: scale(.88) rotate(-6deg); }

.phone-silhouette {
  right: 14vw;
  bottom: 10vh;
  width: 6rem;
  height: 14rem;
  border-radius: 1rem;
  border: 1px solid rgba(255,176,138,.42);
  background: linear-gradient(180deg, rgba(255,176,138,.15), rgba(109,93,246,.18));
  transform: rotate(16deg);
}

.phone-silhouette:after { content: ""; position: absolute; inset: 54% 14% 12%; border: 1px solid rgba(139,233,242,.24); }

.postcard { display: grid; place-items: center; background: linear-gradient(155deg, #17133A, #2B164C 48%, rgba(181,108,255,.6)); }

.postcard-card {
  position: relative;
  width: min(62rem, 82vw);
  min-height: 32rem;
  padding: clamp(2rem, 6vw, 5rem);
  color: var(--glass-plum);
  background:
    linear-gradient(135deg, rgba(255,176,138,.22), transparent 34%),
    var(--moon-cream);
  box-shadow: 0 40px 100px rgba(0,0,0,.34), inset 0 0 0 1px rgba(43,22,76,.16);
  transform: rotate(-6deg);
}

.postcard-card h2 { color: var(--glass-plum); }
.postcard-card p:not(.mono-label) { color: rgba(43,22,76,.72); max-width: 39rem; }
.postcard-card .mono-label { color: var(--soft-magenta); }

.stamp-ghost {
  right: 3rem;
  top: 3rem;
  width: 6rem;
  height: 7rem;
  opacity: .62;
  position: absolute;
  border: 1px dashed rgba(43,22,76,.34);
}

.final-coordinates { position: absolute; right: 8vw; bottom: 10vh; transform: rotate(-7deg); }

@keyframes shimmer { to { transform: translateY(18px); } }
@keyframes flareDrift { to { transform: translate(72vw, 8vh) scale(.72); } }
@keyframes flareDriftB { to { transform: translate(-22vw, -18vh) scale(1.25); } }
@keyframes dotPass { 0%,100% { transform: translate(-16vw, -3vh) scale(.6); opacity: .28; } 50% { transform: translate(18vw, 2vh) scale(1); opacity: .78; } }
@keyframes ghostFade { 0%,100% { opacity: .08; transform: rotate(-13deg) scaleY(.42) translateY(1.5rem); } 50% { opacity: .28; transform: rotate(-13deg) scaleY(.58) translateY(0); } }
@keyframes broadcast { to { transform: translateX(-50%); } }
@keyframes cdSpin { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .hero-copy { padding: 18vh 6vw 0; }
  .scene-line { margin-left: 0; }
  .chapter { padding: 18vh 6vw; }
  .chapter-copy, .offset-copy { margin: 0; transform: rotate(0); }
  .escalator, .cd, .vending-bank, .phone-silhouette { opacity: .42; }
  .terminal-shell { width: 92vw; transform: rotate(-2deg); }
  .postcard-card { width: 90vw; transform: rotate(-3deg); }
}