:root {
  --ink: #08070D;
  --violet: #1B1028;
  --persimmon: #FF8A3D;
  --acid: #C9FF5A;
  --lilac: #BDA7FF;
  --blue: #123A52;
  --paper: #F6E8C8;
  --serif: "Shippori Mincho", "Yu Mincho", "Hiragino Mincho ProN", Georgia, serif;
  --gothic: "Sawarabi Gothic", "Hiragino Kaku Gothic ProN", "Yu Gothic", Arial, sans-serif;
  --poster: "Syne", "Arial Black", Impact, system-ui, sans-serif;
  --design-token-interpret: "Interpret";
  --design-token-plus: "+";
  --design-token-yami: "yami**:";
  --design-token-yami-bre: "yami*:";
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--gothic);
}

body.has-descended .crescent-crack { filter: drop-shadow(0 0 34px var(--acid)); transform: rotate(-8deg) scaleX(1.25); }
body.wish-tied .wish-core .underground-sky { box-shadow: 0 0 160px #C9FF5A66, inset 0 0 90px #BDA7FF55; }
body.wish-tied .hanging-charms i { background: var(--acid); }

.grain {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  opacity: .28;
  background-image:
    radial-gradient(circle at 22% 18%, #F6E8C814 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 70%, #BDA7FF12 0 1px, transparent 1.5px),
    linear-gradient(115deg, transparent 0 47%, #ffffff08 48% 49%, transparent 50%);
  background-size: 19px 23px, 31px 29px, 7px 7px;
  mix-blend-mode: screen;
}

.descent { width: 100%; }

.underlight-scene {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(34px, 6vw, 90px);
  background:
    radial-gradient(circle at 30% 20%, #FF8A3D55, transparent 32%),
    radial-gradient(circle at 70% 80%, #C9FF5A33, transparent 28%),
    linear-gradient(160deg, var(--violet), var(--ink) 64%);
}

.underlight-scene::before {
  content: "";
  position: absolute;
  inset: -10%;
  z-index: -2;
  background:
    radial-gradient(ellipse at 18% 80%, #123A5270, transparent 35%),
    radial-gradient(ellipse at 86% 15%, #BDA7FF22, transparent 26%);
  filter: blur(12px);
}

.underlight-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .23;
  background-image: linear-gradient(#F6E8C80B 1px, transparent 1px), linear-gradient(90deg, #F6E8C808 1px, transparent 1px);
  background-size: 58px 58px;
  transform: rotate(-4deg) scale(1.2);
}

.bead-nav {
  position: fixed;
  right: clamp(12px, 3vw, 44px);
  top: 8vh;
  width: 120px;
  height: 84vh;
  z-index: 20;
  pointer-events: none;
}

.descent-cord { position: absolute; inset: 0; overflow: visible; }
.cord-shadow, .cord-light { fill: none; stroke-linecap: round; stroke-width: 2.5; }
.cord-shadow { stroke: #F6E8C838; filter: drop-shadow(0 0 5px #08070D); }
.cord-light { stroke: var(--acid); stroke-width: 3.5; stroke-dasharray: 760; stroke-dashoffset: var(--cord-offset, 760); filter: drop-shadow(0 0 8px var(--acid)); transition: stroke-dashoffset .7s ease; }

.glow-bead {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 18px;
  height: 18px;
  padding: 0;
  border: 1px solid #F6E8C8AA;
  border-radius: 999px;
  background: var(--violet);
  box-shadow: 0 0 0 5px #08070D99, 0 0 18px #BDA7FF55;
  cursor: pointer;
  pointer-events: auto;
  transition: transform .4s ease, background .4s ease, box-shadow .4s ease;
}

.glow-bead span {
  position: absolute;
  right: 26px;
  top: 50%;
  transform: translateY(-50%) rotate(-4deg);
  width: max-content;
  color: var(--paper);
  font: 11px/1 var(--gothic);
  letter-spacing: .12em;
  opacity: .5;
}

.glow-bead.is-active { background: var(--acid); transform: translateY(9px) scale(1.24); box-shadow: 0 0 0 5px #08070D99, 0 0 28px var(--acid); }
.glow-bead.is-active span { opacity: 1; color: var(--acid); }

.chika-spark {
  position: fixed;
  left: var(--spark-x, 70vw);
  top: var(--spark-y, 25vh);
  z-index: 18;
  width: 18px;
  height: 18px;
  pointer-events: none;
  transition: left .22s ease-out, top .22s ease-out;
  filter: drop-shadow(0 0 13px var(--acid));
}
.chika-spark span, .chika-spark::before, .chika-spark::after { position: absolute; content: ""; border-radius: 50%; background: var(--acid); }
.chika-spark span { inset: 5px; }
.chika-spark::before { inset: 0; opacity: .16; animation: pulse 2.8s infinite; }
.chika-spark::after { width: 4px; height: 4px; right: -14px; top: 12px; background: var(--persimmon); }

.scene-copy {
  position: absolute;
  max-width: 430px;
  z-index: 4;
  color: var(--paper);
}
.scene-copy h1, .scene-copy h2 {
  margin: 0 0 18px;
  font-family: var(--poster);
  font-weight: 900;
  line-height: .85;
  letter-spacing: -.07em;
  text-transform: uppercase;
  text-shadow: 0 0 24px #BDA7FF33;
}
.scene-copy h1 { font-size: clamp(74px, 14vw, 190px); color: #F6E8C8; }
.scene-copy h2 { font-size: clamp(48px, 9vw, 124px); color: #BDA7FF; }
.scene-copy p:not(.vertical-label) { margin: 0; font: 17px/1.7 var(--serif); letter-spacing: .04em; }
.vertical-label {
  margin: 0;
  font: 14px/1.2 var(--serif);
  letter-spacing: .28em;
  color: var(--acid);
  writing-mode: vertical-rl;
  position: absolute;
  left: -42px;
  top: 4px;
}

.dream-action {
  margin-top: 22px;
  border: 1px solid #C9FF5AAA;
  border-radius: 999px;
  padding: 12px 22px;
  color: var(--acid);
  background: #08070D99;
  font: 12px/1 var(--gothic);
  letter-spacing: .18em;
  text-transform: lowercase;
  box-shadow: inset 0 0 18px #C9FF5A1F, 0 0 20px #C9FF5A22;
  cursor: pointer;
}

.street-crack { background: radial-gradient(ellipse at 50% 105%, #123A5280, transparent 36%), linear-gradient(172deg, #08070D, #1B1028 75%, #08070D); }
.asphalt-plane { position: absolute; inset: 0; background-image: radial-gradient(circle at 30% 20%, #F6E8C80C 0 1px, transparent 1px); background-size: 16px 14px; }
.crescent-crack {
  position: absolute;
  right: 18vw;
  top: 19vh;
  width: 36vw;
  height: 64vh;
  border-left: 5px solid var(--acid);
  border-bottom: 3px solid var(--acid);
  border-radius: 50% 0 0 50%;
  transform: rotate(-13deg);
  box-shadow: -15px 0 55px #C9FF5A40, inset 22px -10px 28px #08070D;
  transition: transform 1.4s ease, filter 1.4s ease;
}
.crescent-crack::before, .crescent-crack::after { content: ""; position: absolute; background: var(--acid); box-shadow: 0 0 18px var(--acid); }
.crescent-crack::before { width: 80px; height: 2px; right: 12%; top: 42%; transform: rotate(25deg); }
.crescent-crack::after { width: 50px; height: 2px; left: -16px; top: 70%; transform: rotate(-36deg); }
.ticket {
  width: 220px;
  padding: 18px 18px 15px;
  color: var(--ink);
  background: var(--paper);
  clip-path: polygon(4% 0, 100% 7%, 96% 100%, 0 91%);
  box-shadow: 0 18px 44px #08070DAA;
  transform: rotate(-5deg);
}
.ticket small, .ticket em { display: block; font: 11px/1.4 var(--gothic); letter-spacing: .16em; color: #123A52; }
.ticket strong { display: block; margin: 7px 0; font: 23px/1 var(--poster); letter-spacing: -.04em; color: #1B1028; }
.trapped-ticket { position: absolute; right: 27vw; top: 48vh; }
.street-copy { left: 8vw; bottom: 11vh; }
.glow-a { position: absolute; right: 7vw; bottom: 16vh; width: 76px; height: 220px; background: linear-gradient(#F6E8C8, #FF8A3D); opacity: .42; filter: blur(.5px) drop-shadow(0 0 36px #FF8A3D); }

.lantern-stair { background: radial-gradient(circle at 70% 20%, #FF8A3D55, transparent 31%), linear-gradient(145deg, #123A52, #08070D 68%); }
.paper-curtains { position: absolute; inset: 0 0 auto 0; height: 45vh; display: flex; opacity: .52; }
.paper-curtains i { flex: 1; margin: 0 2px; background: linear-gradient(#F6E8C8AA, #F6E8C800); clip-path: polygon(0 0, 100% 0, 82% 100%, 14% 87%); animation: sway 5s infinite ease-in-out; transform-origin: top; }
.paper-curtains i:nth-child(2n) { animation-delay: -2s; }
.stairwell { position: absolute; left: 38vw; top: 18vh; width: 32vw; height: 72vh; perspective: 700px; transform: rotate(-8deg); }
.stairwell span { display: block; height: 11%; margin-bottom: 2%; border-top: 2px solid #F6E8C855; background: linear-gradient(90deg, #08070D, #1B1028, #123A52); transform: rotateX(62deg); box-shadow: 0 15px 30px #08070D; }
.lantern { position: absolute; width: 52px; height: 78px; border-radius: 44% 44% 50% 50%; background: #FF8A3D; box-shadow: 0 0 45px #FF8A3D, inset 0 -18px 24px #1B1028AA; animation: lantern 4.8s infinite ease-in-out; }
.lantern::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 84px; background: #F6E8C899; }
.lantern b { position: absolute; inset: 12px; border-left: 1px solid #F6E8C888; border-right: 1px solid #F6E8C888; }
.cluster-one { left: 18vw; top: 13vh; }
.cluster-two { right: 24vw; top: 38vh; animation-delay: -1.6s; }
.rail-string { position: absolute; left: 16vw; bottom: 9vh; width: 47vw; height: 2px; background: var(--persimmon); transform: rotate(-13deg); box-shadow: 0 0 10px #FF8A3D; }
.ema-note { background: #F6E8C8E8; color: var(--ink); padding: 18px; width: 230px; clip-path: polygon(10% 0, 90% 0, 100% 28%, 94% 100%, 4% 94%, 0 26%); font: 14px/1.55 var(--serif); box-shadow: 0 18px 45px #08070DAA; }
.ema-note span { display: block; color: var(--persimmon); font-family: var(--poster); }
.note-stair { position: absolute; left: 20vw; bottom: 21vh; transform: rotate(7deg); }
.stair-copy { right: 10vw; bottom: 13vh; }

.moth-platform { background: radial-gradient(circle at 20% 76%, #BDA7FF33, transparent 30%), linear-gradient(180deg, #1B1028, #08070D 65%); }
.platform-arch { position: absolute; left: 6vw; top: 12vh; width: 70vw; height: 67vh; border: 4px solid #123A52; border-bottom: 0; border-radius: 50% 50% 0 0; box-shadow: inset 0 0 80px #123A52AA, 0 0 60px #08070D; }
.tile-fog { position: absolute; width: 60vw; height: 18vh; background: radial-gradient(ellipse, #BDA7FF55, transparent 68%); filter: blur(22px); animation: fog 12s infinite linear; }
.fog-one { left: -10vw; bottom: 18vh; }
.fog-two { right: -12vw; top: 28vh; animation-delay: -5s; }
.moth-map { position: absolute; width: 170px; height: 96px; animation: hover 5.5s infinite ease-in-out; }
.moth-a { left: 20vw; top: 29vh; }
.moth-b { right: 22vw; bottom: 25vh; transform: scale(.72) rotate(18deg); animation-delay: -2s; }
.moth-map i { position: absolute; display: block; }
.moth-map .body { left: 78px; top: 24px; width: 14px; height: 54px; border-radius: 999px; background: #F6E8C8; box-shadow: 0 0 12px #F6E8C8; }
.moth-map .wing { top: 3px; width: 78px; height: 88px; background: linear-gradient(135deg, #BDA7FFCC, #F6E8C877); border: 1px solid #F6E8C899; }
.moth-map .wing::after { content: ""; position: absolute; inset: 16px; border-top: 2px solid #123A52; border-bottom: 1px solid #123A52; transform: rotate(24deg); }
.moth-map .left { right: 88px; border-radius: 90% 20% 80% 30%; transform-origin: right center; animation: wingLeft .5s infinite alternate ease-in-out; }
.moth-map .right { left: 88px; border-radius: 20% 90% 30% 80%; transform-origin: left center; animation: wingRight .5s infinite alternate ease-in-out; }
.station-sign { position: absolute; left: 12vw; bottom: 13vh; padding: 12px 18px; color: var(--acid); border: 1px solid #C9FF5A55; background: #08070DCC; font: 13px/1 var(--gothic); letter-spacing: .18em; transform: rotate(-2deg); }
.platform-ticket { position: absolute; right: 13vw; top: 18vh; }
.moth-copy { left: 12vw; top: 18vh; }

.blackwater-garden { background: radial-gradient(circle at 70% 80%, #C9FF5A22, transparent 28%), linear-gradient(160deg, #123A52, #08070D 70%); }
.canal-tiles { position: absolute; inset: 0; opacity: .25; background-image: linear-gradient(90deg, #F6E8C822 1px, transparent 1px), linear-gradient(#F6E8C81E 1px, transparent 1px); background-size: 90px 52px; transform: rotate(5deg) scale(1.1); }
.blackwater-reflection { position: absolute; left: 18vw; bottom: 9vh; width: min(66vw, 850px); height: 36vh; border-radius: 50%; background: radial-gradient(ellipse at 50% 40%, #123A52, #08070D 72%); border: 1px solid #BDA7FF55; box-shadow: inset 0 0 70px #08070D, 0 0 70px #123A52; overflow: hidden; transform: skewX(calc(var(--ripple, 0) * 1deg)); }
.blackwater-reflection::before { content: ""; position: absolute; inset: 12%; border-radius: 50%; border-top: 2px solid #C9FF5A44; animation: ripple 4s infinite ease-in-out; }
.blackwater-reflection .constellation { position: absolute; left: 50%; top: 48%; transform: translate(-50%, -50%) scaleY(-1) rotate(4deg); color: #C9FF5A; font: 42px/1 var(--poster); letter-spacing: -.06em; text-shadow: 0 0 24px #C9FF5A; opacity: .72; }
.blackwater-reflection span { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 10px var(--paper); }
.blackwater-reflection span:nth-child(2) { left: 25%; top: 35%; } .blackwater-reflection span:nth-child(3) { left: 62%; top: 24%; } .blackwater-reflection span:nth-child(4) { left: 75%; top: 62%; } .blackwater-reflection span:nth-child(5) { left: 43%; top: 71%; } .blackwater-reflection span:nth-child(6) { left: 18%; top: 58%; }
.paper-talisman { position: absolute; width: 54px; height: 150px; background: var(--paper); color: var(--persimmon); display: grid; place-items: center; font: 40px/1 var(--serif); box-shadow: 0 0 30px #F6E8C844; animation: sway 6s infinite ease-in-out; }
.talisman-a { right: 20vw; top: 11vh; } .talisman-b { left: 10vw; top: 34vh; animation-delay: -2s; }
.garden-copy { right: 10vw; top: 16vh; }
.garden-note { position: absolute; left: 9vw; bottom: 21vh; transform: rotate(-6deg); }

.wish-core { background: radial-gradient(circle at 50% 50%, #C9FF5A22, transparent 26%), radial-gradient(circle at 45% 55%, #BDA7FF40, transparent 45%), #08070D; }
.underground-sky { position: absolute; left: 50%; top: 50%; width: min(78vw, 760px); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle at 50% 50%, #123A52 0 12%, #1B1028 36%, #08070D 70%); border: 2px solid #F6E8C855; box-shadow: inset 0 0 100px #BDA7FF33, 0 0 90px #123A52; transition: box-shadow 1s ease; }
.core-ring { position: absolute; inset: 10%; border-radius: 50%; border: 1px dashed #C9FF5A88; animation: rotate 28s infinite linear; }
.core-pool { position: absolute; left: 50%; top: 52%; transform: translate(-50%, -50%) scaleY(-1); color: var(--acid); font: clamp(38px, 8vw, 86px)/1 var(--poster); letter-spacing: -.07em; text-shadow: 0 0 35px #C9FF5A; white-space: nowrap; }
.star { position: absolute; border-radius: 50%; background: var(--paper); box-shadow: 0 0 12px var(--paper); width: 5px; height: 5px; }
.s1 { left: 22%; top: 34%; } .s2 { left: 68%; top: 24%; } .s3 { left: 77%; top: 61%; } .s4 { left: 40%; top: 72%; } .s5 { left: 51%; top: 17%; }
.hanging-charms { position: absolute; inset: 0; pointer-events: none; }
.hanging-charms i { position: absolute; top: 0; width: 26px; height: 80px; background: var(--persimmon); transform-origin: top; animation: sway 5.5s infinite ease-in-out; box-shadow: 0 0 22px #FF8A3D; transition: background .8s ease; }
.hanging-charms i::before { content: ""; position: absolute; left: 50%; bottom: 100%; width: 1px; height: 26vh; background: #F6E8C866; }
.hanging-charms i:nth-child(1) { left: 15%; } .hanging-charms i:nth-child(2) { left: 32%; animation-delay: -1s; } .hanging-charms i:nth-child(3) { left: 67%; animation-delay: -2.3s; } .hanging-charms i:nth-child(4) { left: 82%; animation-delay: -3.6s; } .hanging-charms i:nth-child(5) { left: 51%; animation-delay: -4.2s; }
.core-copy { left: 9vw; bottom: 11vh; }

@keyframes pulse { 50% { transform: scale(2.4); opacity: .02; } }
@keyframes sway { 50% { transform: rotate(4deg); } }
@keyframes lantern { 50% { transform: rotate(5deg) translateY(8px); filter: brightness(1.18); } }
@keyframes hover { 50% { translate: 0 -18px; } }
@keyframes wingLeft { to { transform: rotateY(34deg) rotate(-6deg); } }
@keyframes wingRight { to { transform: rotateY(-34deg) rotate(6deg); } }
@keyframes fog { from { transform: translateX(-12vw); } to { transform: translateX(26vw); } }
@keyframes ripple { 50% { transform: scale(1.16); opacity: .25; } }
@keyframes rotate { to { transform: rotate(360deg); } }

@media (max-width: 760px) {
  .bead-nav { right: -28px; opacity: .8; }
  .glow-bead span { display: none; }
  .underlight-scene { padding: 28px; }
  .scene-copy { left: 12vw; right: auto; bottom: 10vh; top: auto; max-width: 76vw; }
  .vertical-label { left: -29px; }
  .scene-copy h1 { font-size: 64px; }
  .scene-copy h2 { font-size: 50px; }
  .trapped-ticket { right: 18vw; top: 42vh; }
  .stairwell { left: 17vw; width: 66vw; }
  .platform-ticket, .note-stair, .garden-note { display: none; }
  .blackwater-reflection { left: 4vw; width: 92vw; }
  .core-pool { font-size: 40px; }
}