:root {
  color-scheme: dark;
  --ink: #f8f1db;
  --muted: rgba(237, 237, 225, .68);
  --gold: #f4ce78;
  --gold-2: #ffe9aa;
  --glass: rgba(7, 18, 31, .66);
  --glass-strong: rgba(5, 14, 25, .86);
  --line: rgba(244, 206, 120, .26);
  --shadow: 0 24px 80px rgba(0, 0, 0, .5);
  --font-art: "STKaiti", "Kaiti SC", "KaiTi", "FZKai-Z03", serif;
  --font-elegant: "Songti SC", "STSong", "Noto Serif SC", Georgia, serif;
  font-family: var(--font-elegant);
}

* { box-sizing: border-box; }

html, body { min-height: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  color: var(--ink);
  background: #06111d;
}

button { font: inherit; }

.world, .world__image, .world__veil, .world__glow, .door-light, .lanterns, #particles {
  position: fixed;
  inset: 0;
}

.world { z-index: -2; overflow: hidden; background: #06111d; }

.world__image {
  background-image: url("assets/enchanted-gate.png");
  background-image: image-set(url("assets/enchanted-gate.webp") type("image/webp"), url("assets/enchanted-gate.png") type("image/png"));
  background-size: cover;
  background-position: center;
  transform: scale(1.035);
  animation: breathe 18s ease-in-out infinite alternate;
}

.world__veil {
  background:
    linear-gradient(180deg, rgba(2, 8, 16, .28), rgba(2, 8, 16, .05) 35%, rgba(2, 8, 16, .64)),
    radial-gradient(circle at 50% 44%, transparent 0 18%, rgba(1, 8, 16, .2) 58%, rgba(1, 8, 16, .65) 100%);
}

.world__glow {
  inset: 18% 35% 20%;
  background: radial-gradient(ellipse, rgba(255, 200, 92, .23), transparent 65%);
  filter: blur(18px);
  animation: doorGlow 5s ease-in-out infinite;
}

.door-light, .lanterns { pointer-events: none; }

.door-light {
  z-index: 1;
  overflow: hidden;
  opacity: .82;
  transition: opacity 1.5s ease, filter 1.5s ease;
}

.door-light__seam {
  position: absolute;
  left: 49.65%;
  top: 27.5%;
  width: .7%;
  height: 34%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255,247,204,.15), #fff0ad 46%, #ffc352 100%);
  filter: blur(4px);
  box-shadow: 0 0 16px #ffe49a, 0 0 44px rgba(255,190,72,.85), 0 0 90px rgba(255,167,42,.42);
  animation: seamBreathe 4.6s ease-in-out infinite;
}

.door-light__spill {
  position: absolute;
  left: 33%;
  top: 57%;
  width: 34%;
  height: 38%;
  transform-origin: 50% 0;
  background:
    radial-gradient(ellipse 42% 96% at 50% 0%, rgba(255,245,207,.38), rgba(255,209,119,.12) 38%, transparent 74%),
    radial-gradient(ellipse 78% 112% at 50% 0%, rgba(255,198,92,.1), rgba(235,158,49,.03) 56%, transparent 86%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 46%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.72) 46%, transparent 100%);
  filter: blur(22px);
  mix-blend-mode: screen;
  animation: spillFlow 6s ease-in-out infinite;
}

.door-light__rays {
  position: absolute;
  left: 33%;
  top: 37%;
  width: 34%;
  height: 52%;
  transform-origin: 50% 8%;
  background:
    radial-gradient(ellipse 34% 88% at 50% 4%, rgba(255,238,191,.16), rgba(255,192,79,.035) 52%, transparent 78%),
    radial-gradient(ellipse 70% 106% at 50% 8%, rgba(255,204,106,.055), transparent 74%);
  -webkit-mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.58) 42%, transparent 92%);
  mask-image: linear-gradient(180deg, #000, rgba(0,0,0,.58) 42%, transparent 92%);
  filter: blur(24px);
  mix-blend-mode: screen;
  animation: rayOpen 8s ease-in-out infinite;
}

.lanterns { z-index: 2; }

.lantern-glow {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,250,210,.75) 0 5%, rgba(255,202,99,.4) 18%, rgba(255,154,48,.13) 45%, transparent 72%);
  filter: blur(3px);
  mix-blend-mode: screen;
  opacity: .72;
  animation: lanternFlicker var(--speed) ease-in-out var(--delay) infinite;
}

body[data-screen="reveal"] .door-light,
body[data-screen="gift"] .door-light,
body[data-screen="ritual"] .door-light,
body[data-screen="result"] .door-light {
  opacity: 1;
  filter: brightness(1.3) saturate(1.15);
}

body[data-screen="reveal"] .door-light__rays,
body[data-screen="gift"] .door-light__rays {
  animation-duration: 4.2s;
  transform: scaleX(1.18);
}

#particles { width: 100%; height: 100%; }

.cursor-aura {
  position: fixed;
  z-index: 30;
  left: 0;
  top: 0;
  width: 12px;
  height: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translate(-100px, -100px);
  transition: opacity .35s ease;
  mix-blend-mode: screen;
}

.cursor-aura.is-visible { opacity: 1; }

.cursor-aura__halo,
.cursor-aura__ring,
.cursor-aura__star {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cursor-aura__halo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,248,205,.56) 0 4%, rgba(255,203,95,.24) 22%, rgba(115,197,255,.1) 45%, transparent 72%);
  filter: blur(3px);
  animation: cursorBreathe 2.4s ease-in-out infinite;
}

.cursor-aura__ring {
  width: 30px;
  height: 30px;
  border: 1px solid rgba(255,232,160,.48);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 4s linear infinite;
}

.cursor-aura__star {
  color: #fff5c4;
  font-size: 10px;
  text-shadow: 0 0 8px #fff, 0 0 15px #ffc85e;
}

.cursor-aura.is-interactive .cursor-aura__halo {
  width: 94px;
  height: 94px;
  background: radial-gradient(circle, rgba(255,255,232,.8), rgba(255,197,72,.35) 26%, rgba(112,207,255,.13) 52%, transparent 72%);
}

.cursor-aura.is-interactive .cursor-aura__ring {
  width: 42px;
  height: 42px;
  border-color: rgba(255,230,145,.72);
  border-left-color: transparent;
  animation-duration: 1.8s;
}

.topbar {
  position: fixed;
  z-index: 10;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(20px, 4vw, 64px);
  background: linear-gradient(180deg, rgba(1, 7, 14, .58), transparent);
}

.brand, .text-btn, .icon-btn, .music-toggle {
  color: var(--ink);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.brand {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 15px;
  letter-spacing: .24em;
}

.brand__sigil { color: var(--gold); font-size: 18px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }

.icon-btn, .text-btn, .music-toggle {
  min-height: 38px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 999px;
  background: rgba(3, 12, 22, .28);
  backdrop-filter: blur(12px);
}

.icon-btn { width: 38px; }
.music-toggle { min-height: 38px; padding: 0 15px; font-size: 12px; letter-spacing: .1em; }
.text-btn { padding: 0 17px; font-size: 13px; letter-spacing: .12em; }
.icon-btn:hover, .text-btn:hover, .music-toggle:hover { border-color: var(--line); background: rgba(244, 206, 120, .1); }

.music-control {
  position: relative;
}

.music-control::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 10px;
}

.music-control .music-toggle {
  min-height: 38px;
}

.music-volume {
  position: absolute;
  z-index: 20;
  top: calc(100% + 9px);
  left: 50%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 14px;
  color: rgba(255,240,198,.82);
  border: 1px solid rgba(244,206,120,.35);
  border-radius: 14px;
  background: rgba(4,12,23,.94);
  box-shadow: 0 14px 38px rgba(0,0,0,.42), 0 0 24px rgba(225,174,75,.08);
  font-size: 11px;
  letter-spacing: .1em;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -5px);
  transition: opacity .22s ease, transform .22s ease;
}

.music-control:hover .music-volume,
.music-control:focus-within .music-volume {
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, 0);
}

.music-volume input {
  width: 92px;
  height: 18px;
  margin: 0;
  appearance: none;
  background: transparent;
  cursor: pointer;
}

.music-volume input::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,211,107,.9), rgba(255,238,188,.3));
  box-shadow: 0 0 8px rgba(255,202,91,.32);
}

.music-volume input::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5.5px;
  appearance: none;
  border: 1px solid #fff0b7;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8d7, #e1a841 58%, #7d4d1c);
  box-shadow: 0 0 12px rgba(255,211,104,.78);
}

.music-volume input:focus-visible { outline: 1px solid #f2cf7b; outline-offset: 4px; }

.app {
  position: relative;
  z-index: 3;
  min-height: 100vh;
  width: min(1040px, calc(100% - 32px));
  margin: 0 auto;
  display: grid;
  place-items: center;
  padding: 104px 0 88px;
}

.panel {
  width: min(760px, 100%);
  padding: clamp(28px, 5vw, 58px);
  text-align: center;
  border: 1px solid var(--line);
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), transparent 40%),
    var(--glass);
  box-shadow: var(--shadow), inset 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(115%);
  animation: enter .7s cubic-bezier(.2,.7,.2,1) both;
}

.panel--wide { width: min(920px, 100%); }
.panel--clear { background: rgba(3, 12, 22, .36); }

body[data-screen="landing"] .world__image {
  transform: scale(1.055);
  filter: saturate(.9) contrast(1.04);
}

body[data-screen="landing"] .world__veil {
  background:
    linear-gradient(90deg, rgba(1,7,16,.84) 0%, rgba(2,9,18,.64) 42%, rgba(2,9,18,.12) 75%, rgba(2,9,18,.42) 100%),
    linear-gradient(180deg, rgba(1,6,13,.3), transparent 38%, rgba(1,6,13,.62));
}

.landing {
  position: relative;
  isolation: isolate;
  width: 100%;
  min-height: min(78vh, 760px);
  display: flex;
  align-items: center;
  padding: 28px 3vw;
  animation: enter 1s ease both;
}

.landing__card {
  position: relative;
  width: min(610px, 58vw);
  padding: clamp(34px, 5vw, 58px) clamp(28px, 5vw, 62px) 36px;
  text-align: center;
  border: 1px solid rgba(244,206,120,.34);
  border-radius: 160px 160px 26px 26px / 56px 56px 26px 26px;
  background:
    linear-gradient(135deg, rgba(255,235,174,.08), transparent 33%),
    radial-gradient(circle at 50% 0%, rgba(205,151,67,.17), transparent 42%),
    rgba(3,11,22,.72);
  box-shadow: 0 28px 100px rgba(0,0,0,.52), inset 0 0 70px rgba(255,210,120,.035);
  backdrop-filter: blur(15px) saturate(110%);
}

.landing__scroll {
  position: relative;
  width: min(610px, 58vw);
  min-height: 670px;
  text-align: center;
  filter: drop-shadow(0 28px 60px rgba(0,0,0,.55));
}

.landing__sheet {
  position: relative;
  width: 100%;
  min-height: 670px;
  padding: clamp(34px, 5vw, 58px) clamp(28px, 5vw, 62px) 36px;
  overflow: hidden;
  border: 5px solid rgba(103,62,24,.84);
  background:
    radial-gradient(circle at 14% 18%, rgba(91,49,15,.18), transparent 10%),
    radial-gradient(circle at 82% 72%, rgba(107,57,17,.14), transparent 13%),
    radial-gradient(ellipse at 52% 45%, rgba(255,239,184,.58), transparent 58%),
    repeating-linear-gradient(4deg, rgba(88,54,22,.025) 0 1px, transparent 1px 7px),
    linear-gradient(90deg, #b88b4d 0%, #ddbd7a 4%, #eed79c 15%, #e7ca87 52%, #efd99f 85%, #c19454 97%, #8e5f2e 100%);
  clip-path: polygon(1.8% 0, 8% .7%, 17% .2%, 27% .8%, 39% .1%, 52% .6%, 64% .2%, 77% .8%, 89% .1%, 98.1% .7%, 99.5% 6%, 98.2% 12%, 99.7% 19%, 97.8% 27%, 99.4% 35%, 98% 42%, 99.6% 51%, 97.9% 59%, 99.5% 68%, 98.1% 76%, 99.7% 84%, 97.8% 92%, 98.4% 100%, 88% 99.2%, 77% 99.8%, 65% 99.1%, 53% 99.7%, 41% 99%, 28% 99.8%, 16% 99.1%, 1.5% 99.7%, .2% 93%, 2.2% 86%, .3% 79%, 2.4% 71%, .1% 64%, 2.1% 56%, .2% 48%, 2.5% 39%, .1% 32%, 2.2% 24%, .3% 16%, 2.5% 9%);
  box-shadow:
    0 28px 100px rgba(0,0,0,.58),
    0 0 70px rgba(245,197,94,.16),
    inset 0 0 54px rgba(77,42,13,.34),
    inset 0 0 0 3px rgba(255,226,153,.24),
    inset 0 0 11px 5px rgba(57,30,10,.62);
  transform-origin: 50% 0;
  animation: sacredSheetUnroll 2.35s cubic-bezier(.22,.68,.18,1) both;
}

.landing__sheet::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 37%, rgba(78,39,10,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 91% 24%, rgba(78,39,10,.13) 0 2px, transparent 3px),
    radial-gradient(circle at 72% 91%, rgba(78,39,10,.14) 0 1px, transparent 2px),
    linear-gradient(96deg, transparent 49%, rgba(96,57,20,.055) 50%, transparent 51%);
  mix-blend-mode: multiply;
}

.landing__sheet::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 0 13%, rgba(61,31,9,.62) 0 5px, rgba(105,61,20,.25) 6px, transparent 15px),
    radial-gradient(ellipse at 100% 22%, rgba(55,28,8,.58) 0 7px, rgba(105,61,20,.22) 8px, transparent 18px),
    radial-gradient(ellipse at 0 48%, rgba(63,32,9,.55) 0 8px, rgba(105,61,20,.2) 9px, transparent 20px),
    radial-gradient(ellipse at 100% 67%, rgba(57,29,8,.6) 0 6px, rgba(105,61,20,.22) 7px, transparent 17px),
    radial-gradient(ellipse at 0 83%, rgba(62,31,9,.54) 0 5px, rgba(105,61,20,.2) 6px, transparent 16px),
    linear-gradient(90deg, rgba(67,35,11,.3), transparent 4%, transparent 96%, rgba(67,35,11,.3)),
    linear-gradient(180deg, rgba(67,35,11,.24), transparent 5%, transparent 95%, rgba(67,35,11,.24));
  box-shadow: inset 0 0 0 2px rgba(71,39,13,.34), inset 0 0 22px rgba(63,31,8,.3);
  mix-blend-mode: multiply;
}

.landing__writing {
  position: relative;
  z-index: 1;
  color: #3c2817;
  animation: writingAwakens .01s 2.25s both;
}

.landing__rod {
  position: absolute;
  z-index: 4;
  left: -19px;
  width: calc(100% + 38px);
  height: 11px;
  border: 1px solid rgba(225,186,100,.68);
  border-radius: 999px;
  background:
    repeating-linear-gradient(90deg, transparent 0 30px, rgba(255,210,115,.07) 31px 32px),
    linear-gradient(180deg, #7d5027 0%, #3e2213 44%, #1f110b 63%, #68401f 100%);
  box-shadow: 0 0 22px rgba(255,205,102,.2), inset 0 1px rgba(255,225,154,.38), inset 0 -2px rgba(12,6,3,.7);
}

.landing__rod::before,
.landing__rod::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 20px;
  height: 20px;
  border: 1px solid #f0c86f;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #ffe39a, #9b6828 57%, #342013 72%);
  transform: translateY(-50%);
}

.landing__rod::before { left: -7px; }
.landing__rod::after { right: -7px; }
.landing__rod--top { top: -6px; }
.landing__rod--bottom {
  top: 0;
  animation: lowerRodDescends 2.35s cubic-bezier(.22,.68,.18,1) both;
}

.landing__seal {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: -18px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: #eacb83;
  border: 1px solid #dba65d;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #a74438, #71231f 58%, #3f1517 100%);
  box-shadow: 0 0 28px rgba(255,196,94,.38), inset 0 1px rgba(255,216,161,.34);
  transform: translateX(-50%);
}

.landing__scroll .magic-letters > span {
  animation-name: sacredInk;
  animation-duration: .5s;
  animation-timing-function: ease-out;
  animation-delay: calc(2.35s + var(--i) * 48ms);
}

.landing__scroll .landing__path,
.landing__scroll .landing__start,
.landing__scroll .landing__direct,
.landing__scroll .landing__note,
.landing__scroll .landing__revelation > span {
  opacity: 0;
  animation: parchmentDetail 1s 4.1s ease forwards;
}

.landing__constellation {
  position: absolute;
  z-index: 2;
  left: calc(min(610px, 58vw) / 2 + 3vw);
  top: 9px;
  display: flex;
  gap: 12px;
  align-items: center;
  color: rgba(255,224,145,.72);
  font-size: 11px;
  letter-spacing: .16em;
  transform: translateX(-50%);
}

.landing__constellation span:nth-child(1),
.landing__constellation span:nth-child(5) { animation: doorGlow 3.2s ease-in-out infinite; }
.landing__constellation span:nth-child(3) { color: #fff1b1; font-size: 17px; animation: doorGlow 2.4s .5s ease-in-out infinite; }

.landing__eyebrow {
  margin: 0 0 13px;
  color: #70401f;
  font-size: 11px;
  letter-spacing: .42em;
}

.landing h1 {
  margin: 0 0 20px;
  font-weight: 500;
  line-height: 1;
  color: #352113;
  font-family: var(--font-art);
  text-shadow: 0 1px rgba(255,246,204,.48), 0 0 20px rgba(105,58,19,.1);
}

.landing h1 > span {
  display: block;
  font-size: clamp(42px, 5.6vw, 68px);
  letter-spacing: .13em;
}

.landing h1 > small {
  display: block;
  margin-top: 13px;
  color: #6e3f21;
  font-size: clamp(15px, 1.8vw, 20px);
  font-weight: 400;
  letter-spacing: .55em;
}

.landing__intro {
  max-width: 470px;
  margin: 0 auto;
  color: rgba(54,35,20,.78);
  font-size: 15px;
  line-height: 1.95;
}

.landing__revelation {
  position: relative;
  max-width: 480px;
  margin: 0 auto 19px;
  padding: 17px 22px 16px;
  border-top: 1px solid rgba(91,53,21,.34);
  border-bottom: 1px solid rgba(91,53,21,.34);
}

.landing__revelation > span {
  display: block;
  margin-bottom: 8px;
  color: #7c4824;
  font-size: 10px;
  letter-spacing: .55em;
}

.landing__revelation blockquote {
  margin: 0;
  color: #382316;
  font-family: var(--font-art);
  font-size: clamp(16px, 1.8vw, 19px);
  font-style: italic;
  line-height: 1.85;
  letter-spacing: .04em;
  text-shadow: 0 1px rgba(255,246,204,.5);
}

.landing__celestial-script {
  position: relative;
  width: fit-content;
  max-width: 100%;
  margin: 2px auto 12px;
  padding: 0 42px 7px;
  overflow: hidden;
  color: #3a2114;
  font-family: "Geeza Pro", "Noto Naskh Arabic", "Arial", serif;
  font-size: clamp(30px, 4vw, 43px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  clip-path: inset(0 0 0 100%);
  text-shadow: 0 1px rgba(255,245,200,.5), 0 0 12px rgba(93,45,15,.12);
  animation: arabicInkWrites 2.25s 2.65s cubic-bezier(.28,.06,.22,1) forwards;
}

.landing__celestial-script::before,
.landing__celestial-script::after {
  content: "";
  position: absolute;
  bottom: 3px;
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #72401f);
}

.landing__celestial-script::before { left: 0; transform: scaleX(-1); }
.landing__celestial-script::after { right: 0; }

.landing__revelation blockquote .magic-letters > span {
  animation-delay: calc(4.2s + var(--i) * 46ms);
}

.landing__path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 26px auto 27px;
}

.landing__path div {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  text-align: left;
}

.landing__path i {
  display: grid;
  place-items: center;
  width: 29px;
  height: 29px;
  flex: 0 0 auto;
  color: #33250c;
  border-radius: 50%;
  background: linear-gradient(135deg, #ffe7a4, #b77b2f);
  font-size: 10px;
  font-style: normal;
  box-shadow: 0 0 22px rgba(244,206,120,.22);
}

.landing__path span { color: rgba(58,36,19,.72); font-size: 11px; line-height: 1.55; }
.landing__path b { color: rgba(94,54,22,.35); font-size: 9px; font-weight: 400; white-space: nowrap; }

.landing__start {
  min-width: 214px;
  padding-block: 15px;
  font-size: 17px;
  box-shadow: 0 10px 44px rgba(222,159,51,.34), 0 0 70px rgba(255,204,97,.1);
}

.landing__direct {
  display: block;
  margin: 10px auto 0;
  padding: 7px 10px;
  color: rgba(55,33,18,.66);
  border: 0;
  background: transparent;
  font-size: 12px;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.landing__direct span { color: #713f1d; }
.landing__direct:hover { color: #2d1b0f; transform: translateX(3px); }
.landing__note { margin: 8px 0 0; color: rgba(60,36,19,.5); font-family: system-ui, sans-serif; font-size: 10px; letter-spacing: .04em; }

.about-dialog {
  width: min(620px, calc(100vw - 32px));
  padding: 46px 52px 42px;
  color: #3d2816;
  border: 1px solid rgba(255,220,139,.8);
  border-radius: 26px;
  background:
    linear-gradient(90deg, rgba(105,62,24,.13), transparent 12%, transparent 88%, rgba(105,62,24,.13)),
    linear-gradient(180deg, #f6e0a8, #dfbb70);
  box-shadow: 0 30px 110px rgba(0,0,0,.72), inset 0 0 46px rgba(112,65,24,.2);
  text-align: center;
}

.about-dialog::backdrop {
  background: rgba(2,8,17,.76);
  backdrop-filter: blur(7px);
}

.about-dialog__sigil {
  display: block;
  color: #9d6421;
  font-size: 20px;
  text-shadow: 0 0 20px rgba(255,220,124,.74);
}

.about-dialog h2 {
  margin: 9px 0 22px;
  font-size: 29px;
  font-weight: 500;
  letter-spacing: .18em;
}

.about-dialog p {
  margin: 0;
  font-family: system-ui, sans-serif;
  font-size: 16px;
  line-height: 2.05;
  text-align: left;
}

.about-dialog__close {
  position: absolute;
  top: 14px;
  right: 17px;
  width: 36px;
  height: 36px;
  padding: 0;
  color: rgba(60,37,18,.65);
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.about-dialog__close:hover { color: #28180e; }

.landing__whisper {
  position: absolute;
  right: 5vw;
  bottom: 7vh;
  margin: 0;
  color: rgba(255,238,190,.64);
  font-size: 13px;
  letter-spacing: .25em;
  writing-mode: vertical-rl;
  text-shadow: 0 2px 20px #000;
}

.home-hero {
  position: relative;
  isolation: isolate;
  width: min(920px, 100%);
  min-height: min(76vh, 720px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: clamp(20px, 4vh, 42px) 20px clamp(26px, 5vh, 54px);
  text-align: center;
  animation: enter 1s ease both;
}

.home-hero > * {
  position: relative;
  z-index: 1;
}

.gate-numbers {
  position: fixed;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform: scale(1.045);
  transform-origin: center;
}

body[data-screen="home"] .world__image {
  animation: none;
  transform: scale(1.045);
}

.home-door-hotspot {
  position: fixed;
  z-index: 7;
  left: 50%;
  top: 21%;
  width: 23%;
  height: 55%;
  transform: translateX(-50%);
  padding: 0;
  border: 0;
  border-radius: 48% 48% 8% 8% / 25% 25% 5% 5%;
  background: transparent;
  cursor: pointer;
}

.home-door-hotspot:hover,
.home-door-hotspot:focus-visible {
  outline: none;
  background: radial-gradient(ellipse at 50% 48%, rgba(255,225,144,.07), transparent 68%);
}

.home-energy-guide {
  position: fixed;
  z-index: 8;
  left: 50%;
  top: 48%;
  width: min(680px, calc(100% - 42px));
  transform: translate(-50%, -44%);
  padding: 24px 30px;
  color: #fff4ce;
  text-align: center;
  text-shadow: 0 3px 22px rgba(0,0,0,.95), 0 0 24px rgba(255,205,107,.26);
  pointer-events: none;
  opacity: 0;
  filter: blur(7px);
}

.home-energy-guide::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -34px -50px;
  background: radial-gradient(ellipse, rgba(2,10,20,.82), rgba(3,12,24,.42) 46%, transparent 75%);
  filter: blur(8px);
}

.home-energy-guide__sigil {
  display: block;
  margin-bottom: 13px;
  color: #ffe29a;
  font-size: 19px;
  text-shadow: 0 0 14px #ffe6a6, 0 0 34px rgba(217,157,255,.62);
}

.home-energy-guide p {
  margin: 0;
  font-family: var(--font-art);
  font-size: clamp(17px, 2.1vw, 24px);
  letter-spacing: .08em;
  line-height: 1.85;
}

.home-energy-guide p + p {
  margin-top: 7px;
  color: rgba(255,244,210,.82);
  font-size: clamp(15px, 1.7vw, 20px);
}

.home-gate-opening {
  position: fixed;
  z-index: 2;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
}

.home-gate-opening__world,
.home-gate-opening__leaf {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform: scale(1.045);
  transform-origin: 50% 50%;
}

.home-gate-opening__world {
  background-image: url("assets/enchanted-gate-open.png");
  background-image: image-set(url("assets/enchanted-gate-open.webp") type("image/webp"), url("assets/enchanted-gate-open.png") type("image/png"));
  opacity: 0;
  /* The open scene is a full-frame photographic dissolve.  Cropping it to the
     doorway creates a visible poster edge at the threshold. */
  clip-path: none;
}

.home-gate-opening__leaf {
  z-index: 2;
  background-image: url("assets/enchanted-gate.png");
  background-image: image-set(url("assets/enchanted-gate.webp") type("image/webp"), url("assets/enchanted-gate.png") type("image/png"));
  backface-visibility: hidden;
}

.home-gate-opening__leaf--left {
  clip-path: polygon(39.5% 33%, 40% 27%, 42% 22%, 45.5% 18.5%, 50% 17%, 50% 72%, 39.5% 72%);
  transform-origin: 50% 50%;
}

.home-gate-opening__leaf--right {
  clip-path: polygon(50% 17%, 54.5% 18.5%, 58% 22%, 60% 27%, 60.5% 33%, 60.5% 72%, 50% 72%);
  transform-origin: 50% 50%;
}

.home-gate-opening__seam {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 21%;
  width: 3px;
  height: 53%;
  transform: translateX(-50%);
  border-radius: 50%;
  opacity: 0;
  background: linear-gradient(180deg, transparent, #fffce6 15%, #ffd36d 58%, rgba(255,179,55,.1));
  box-shadow: 0 0 12px #fff9cf, 0 0 38px #ffc455, 0 0 90px rgba(255,175,53,.72);
}

.home-gate-opening__radiance {
  position: absolute;
  z-index: 3;
  left: 50%;
  top: 48%;
  width: 15%;
  height: 40%;
  transform: translate(-50%,-50%) scale(.12,.7);
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(ellipse, rgba(255,255,238,.52), rgba(255,221,143,.24) 28%, rgba(255,175,65,.07) 56%, transparent 78%);
  filter: blur(30px);
  mix-blend-mode: screen;
}

.home-gate-opening__floor-light {
  position: absolute;
  z-index: 3;
  left: 19%;
  top: 58%;
  width: 62%;
  height: 52%;
  transform: scale(.14,.03);
  transform-origin: 50% 0;
  opacity: 0;
  background:
    radial-gradient(ellipse 32% 98% at 50% 0%, rgba(255,251,226,.65), rgba(255,223,151,.24) 38%, transparent 74%),
    radial-gradient(ellipse 62% 112% at 50% 2%, rgba(255,211,117,.25), rgba(255,177,68,.075) 58%, transparent 86%),
    radial-gradient(ellipse 96% 124% at 50% 7%, rgba(255,190,82,.12), rgba(237,151,45,.035) 64%, transparent 84%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.84) 28%, rgba(0,0,0,.42) 68%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, rgba(0,0,0,.84) 28%, rgba(0,0,0,.42) 68%, transparent 100%);
  filter: blur(21px);
  mix-blend-mode: screen;
}

body.home-gate-is-opening .home-gate-opening { visibility: visible; opacity: 1; }
body.home-gate-is-opening .home-gate-opening__world { animation: homeWorldReveals 6.1s .2s cubic-bezier(.2,.66,.16,1) both; }
body.home-gate-is-opening .home-gate-opening__leaf--left { animation: homeDoorPushLeft 5.9s .55s cubic-bezier(.22,.66,.16,1) both; }
body.home-gate-is-opening .home-gate-opening__leaf--right { animation: homeDoorPushRight 5.9s .55s cubic-bezier(.22,.66,.16,1) both; }
body.home-gate-is-opening .home-gate-opening__seam { animation: homeDoorSeam 4.5s .08s ease-in-out both; }
body.home-gate-is-opening .home-gate-opening__radiance { animation: homeDoorRadiance 5.6s .24s ease-out both; }
body.home-gate-is-opening .home-gate-opening__floor-light { animation: homeFloorLight 6.1s .55s cubic-bezier(.2,.62,.18,1) both; }
body.home-gate-is-opening .gate-numbers { animation: homeNumbersYield 3.1s .75s ease-in both; }
body.home-gate-is-opening .home-hero__title,
body.home-gate-is-opening .home-hero__invitation { animation: homeWordsYield 1.15s ease-in both; }
body.home-gate-is-opening .home-energy-guide { animation: homeWordsYield 1.15s ease-in both; }

.gate-rune {
  opacity: 0;
}

.gate-rune__halo { opacity: 0; }
.gate-rune__candle-glow {
  opacity: .56;
  transform-box: fill-box;
  transform-origin: center;
  filter: blur(1.2px) drop-shadow(0 0 8px rgba(255,201,91,.78));
  animation: hiddenCandleFlicker 2.17s calc(-.31s * var(--i)) steps(1, end) infinite;
}
.gate-rune__number {
  fill: #fff4c4;
  stroke: rgba(105,65,22,.55);
  stroke-width: .55px;
  paint-order: stroke fill;
  font-family: "Times New Roman", "Songti SC", serif;
  font-size: 34px;
  font-style: normal;
  font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  text-rendering: geometricPrecision;
  letter-spacing: -.03em;
  filter: drop-shadow(0 0 4px #fff7cd) drop-shadow(0 0 12px rgba(255,198,84,.9)) drop-shadow(0 0 22px rgba(195,133,255,.55));
  animation: numberCandleShimmer 2.17s calc(-.31s * var(--i)) steps(1, end) infinite;
}

.gate-rune__number--1 { letter-spacing: 0; }

body.home-gate-is-awakening .home-hero__title,
body.home-gate-is-awakening .home-hero__invitation {
  animation: homeWordsYield .9s ease-in both;
}

body.home-gate-is-awakening .home-energy-guide {
  animation: homeEnergyGuideArrives 1.25s .45s cubic-bezier(.18,.72,.2,1) forwards;
}

body.home-gate-is-awakening .gate-rune {
  animation: gateRuneAwakens 1.15s calc(.32s + var(--i) * .62s) cubic-bezier(.18,.74,.2,1) forwards;
}

body.home-gate-is-awakening .gate-rune__halo {
  animation: ringMysticGlow 3.4s calc(.32s + var(--i) * .62s) ease-in-out infinite;
}

body.home-gate-is-awakening.home-gate-is-opening .home-hero__title,
body.home-gate-is-awakening.home-gate-is-opening .home-hero__invitation,
body.home-gate-is-awakening.home-gate-is-opening .home-energy-guide {
  animation: homeWordsYield 1.15s ease-in both;
}

.home-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  bottom: 0;
  width: min(720px, 96%);
  height: 240px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 65%, rgba(2,10,20,.82), rgba(2,10,20,.4) 48%, transparent 76%);
  filter: blur(5px);
}

.home-hero__title {
  width: min(620px, 100%);
  padding: 16px 20px 20px;
  text-shadow: 0 3px 24px rgba(0,0,0,.92), 0 0 36px rgba(255,198,83,.22);
}

.home-hero__sigil {
  display: block;
  margin-bottom: 8px;
  color: var(--gold);
  font-size: 17px;
  animation: doorGlow 3.6s ease-in-out infinite;
}

.home-hero h1 {
  margin: 0 0 10px;
  font-size: clamp(36px, 6vw, 62px);
  letter-spacing: .14em;
}

.home-hero__title p {
  max-width: 100%;
  margin: 0;
  color: rgba(255,255,255,.74);
  font-size: clamp(14px, 1.7vw, 17px);
  line-height: 1.8;
  overflow-wrap: anywhere;
}

.home-hero__invitation {
  position: relative;
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
  opacity: 0;
  animation: optionGather .8s 1.15s ease forwards;
}

.home-hero__start {
  min-width: 210px;
  padding-block: 15px;
  font-size: 17px;
  box-shadow: 0 10px 46px rgba(228,165,57,.38), 0 0 60px rgba(255,204,97,.12);
}

.home-hero__direct {
  padding: 7px 12px;
  color: rgba(255,255,255,.68);
  border: 0;
  background: transparent;
  font-size: 13px;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color .25s ease, transform .25s ease;
}

.home-hero__direct span { color: var(--gold); }
.home-hero__direct:hover { color: var(--ink); transform: translateX(3px); }
.home-hero__invitation small { color: rgba(255,255,255,.4); font-family: system-ui, sans-serif; font-size: 11px; letter-spacing: .05em; }

.eyebrow {
  margin: 0 0 18px;
  color: var(--gold);
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--font-art); }
h1 { margin-bottom: 18px; font-size: clamp(38px, 7vw, 72px); font-weight: 500; letter-spacing: .08em; line-height: 1.1; }
h2 { margin-bottom: 18px; font-size: clamp(25px, 4vw, 38px); font-weight: 500; line-height: 1.35; }
h3 { font-size: 19px; font-weight: 500; }

.lede {
  width: min(580px, 100%);
  margin: 0 auto 30px;
  color: var(--muted);
  font-size: 16px;
  line-height: 2;
}

.whisper { color: rgba(255,255,255,.55); font-size: 13px; letter-spacing: .08em; }

.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.primary-btn, .secondary-btn {
  position: relative;
  min-width: 170px;
  padding: 14px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.primary-btn {
  color: #2a210e;
  border: 1px solid #ffe7a0;
  background: linear-gradient(135deg, #ffe8a5, #c9933d);
  box-shadow: 0 8px 30px rgba(219, 157, 53, .25);
}

.secondary-btn {
  color: var(--ink);
  border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.05);
}

.primary-btn:hover, .secondary-btn:hover { transform: translateY(-2px); }
.primary-btn:hover { box-shadow: 0 12px 38px rgba(219, 157, 53, .4); }
.secondary-btn:hover { border-color: var(--gold); }

.magic-letters { display: inline; }
.magic-letters > span {
  display: inline-block;
  opacity: 0;
  filter: blur(7px) brightness(1.8);
  text-shadow: 0 0 16px rgba(255,222,135,.85);
  transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.36);
  animation: letterGather var(--dur) cubic-bezier(.16,.72,.18,1) calc(.08s + var(--d)) forwards;
}

.magic-option {
  opacity: 1;
  animation: none;
}

.magic-option .magic-letters > span {
  animation-delay: calc(.56s + var(--option) * .13s + var(--d));
}

.is-dispersing .magic-letters > span {
  animation: letterScatter .7s cubic-bezier(.48,.01,.8,.42) calc((var(--d) / 5)) forwards !important;
}

.is-dispersing .dragon-progress,
.is-dispersing .whisper,
.is-dispersing .landing__path,
.is-dispersing button:not(.magic-option) {
  animation: mistAway .58s ease-in forwards !important;
}

.dragon-progress {
  position: relative;
  width: min(560px, 92%);
  height: 70px;
  margin: 0 auto 26px;
}

.dragon-progress__rail {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 37px;
  height: 1px;
  background: rgba(255,255,255,.1);
}

.dragon-progress__rail i {
  display: block;
  width: var(--journey);
  height: 100%;
  background: linear-gradient(90deg, rgba(187,123,36,.3), #ffe292);
  box-shadow: 0 0 12px rgba(255,207,102,.72);
  transition: width 1s ease;
}

.dragon-progress__motes {
  position: absolute;
  inset: 30px 15px auto;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,.16);
  font-size: 11px;
}

.dragon-progress__motes span { transition: color .7s ease, text-shadow .7s ease; }
.dragon-progress__motes .is-passed { color: #ffd87c; text-shadow: 0 0 12px #ffc75b; }
.dragon-progress__motes .is-arriving {
  color: #fff0ae;
  animation: starArrival 1.25s ease-in-out both;
}

.dragon-progress__dragon {
  position: absolute;
  z-index: 2;
  left: clamp(38px, var(--journey), calc(100% - 38px));
  top: 6px;
  width: 92px;
  overflow: visible;
  filter: drop-shadow(0 0 7px rgba(255,202,87,.7));
  transform: translateX(-72%) scale(.8);
  transition: left 1.1s cubic-bezier(.2,.75,.25,1);
  animation: dragonSwim 2.5s ease-in-out infinite;
}

.dragon-progress__dragon path { fill: none; stroke: url(#dragonGold); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.dragon-progress__dragon .dragon-head { fill: url(#dragonGold); stroke-width: 2; }
.dragon-progress__dragon circle { fill: #fff4bd; }
.dragon-progress__dragon .dragon-horns, .dragon-progress__dragon .dragon-whisker { stroke-width: 2; }
.dragon-progress__dragon.is-travelling { animation: none; }

body[data-screen="quiz"] .panel { animation: none; }
body[data-screen="quiz"] .panel { height: 628px; min-height: 628px; overflow: hidden; }
body[data-screen="quiz"] { position: fixed; inset: 0; width: 100%; height: 100vh; overflow: hidden; }
body[data-screen="quiz"] .app { height: 100vh; min-height: 100vh; padding: 78px 0 14px; }
body.is-answering .option { pointer-events: none; }

.question {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin-bottom: 28px;
}
.question h2 { font-family: var(--font-art); font-weight: 400; letter-spacing: .035em; }
.question__count { color: var(--gold); font-size: 12px; letter-spacing: .2em; margin-bottom: 14px; }
.options { display: grid; gap: 12px; text-align: left; }
body[data-screen="quiz"] .options { grid-template-rows: repeat(3, 72px); min-height: 240px; }

.option {
  position: relative;
  width: 100%;
  min-height: 66px;
  padding: 16px 50px 16px 20px;
  color: rgba(255,255,255,.9);
  line-height: 1.65;
  text-align: left;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(3, 12, 22, .48);
  cursor: pointer;
  transition: .25s ease;
}

body[data-screen="quiz"] .option {
  height: 72px;
  min-height: 72px;
  overflow: hidden;
  font-family: var(--font-art);
  font-size: 16px;
}

.option::after { content: "✦"; position: absolute; right: 20px; top: 50%; color: rgba(244,206,120,.35); transform: translateY(-50%); }
.option:hover, .option:focus-visible { outline: none; border-color: rgba(244,206,120,.65); background: rgba(244,206,120,.09); transform: none; }

.reveal { width: min(760px, 100%); text-align: center; animation: enter 1s ease both; }
.reveal__orbit { position: relative; width: 260px; height: 260px; margin: 0 auto 22px; display: grid; place-items: center; }
.reveal__orbit::before, .reveal__orbit::after { content: ""; position: absolute; inset: 0; border: 1px solid rgba(244,206,120,.35); border-radius: 50%; animation: spin 12s linear infinite; }
.reveal__orbit::after { inset: 24px; border-style: dashed; animation-direction: reverse; animation-duration: 18s; }
.reveal__number { color: var(--gold-2); font-size: 150px; line-height: 1; text-shadow: 0 0 18px rgba(255,220,139,.75), 0 0 80px rgba(221,151,49,.5); animation: numberPulse 3s ease-in-out infinite; }
.reveal__name { font-size: 26px; letter-spacing: .18em; }

.portal-transition {
  position: relative;
  width: min(1180px, 100%);
  height: min(78vh, 720px);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #06101e;
  box-shadow: 0 28px 100px rgba(0,0,0,.68), inset 0 1px rgba(255,255,255,.08);
  animation: enter .65s ease both, portalCamera 5.4s ease-in-out both;
}

.portal-transition__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.portal-transition__closed { z-index: 1; }

.portal-transition__open {
  z-index: 2;
  opacity: 0;
  clip-path: circle(0% at 50% 52%);
  animation: openDoorWorld 3.2s .65s cubic-bezier(.25,.7,.18,1) both;
}

.portal-transition__seam {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: 20%;
  width: 4px;
  height: 55%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: linear-gradient(180deg, transparent, #fff8d5 18%, #ffd468 62%, transparent);
  box-shadow: 0 0 18px #fff1ae, 0 0 55px #ffbd45, 0 0 120px rgba(255,174,50,.75);
  animation: openingSeam 2.8s .3s ease-in-out both;
}

.portal-transition__number {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 48%;
  transform: translate(-50%,-50%);
  color: #fff1b3;
  font-size: clamp(96px, 15vw, 180px);
  line-height: 1;
  text-shadow: 0 0 22px #fff, 0 0 70px #ffc149;
  animation: numberEntersDoor 1.6s .15s ease-in both;
}

.portal-transition__mist {
  position: absolute;
  z-index: 5;
  left: 50%;
  top: 50%;
  width: 20%;
  height: 52%;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,250,218,.88), rgba(255,203,101,.26) 38%, transparent 72%);
  filter: blur(16px);
  mix-blend-mode: screen;
  animation: portalMist 3.5s .8s ease-out both;
}

.portal-transition__child {
  z-index: 6;
  opacity: 0;
  clip-path: circle(0% at 50% 47%);
  transform: scale(.55);
  transform-origin: 50% 46%;
  animation: childComesThrough 2.7s 2.65s cubic-bezier(.16,.72,.2,1) both;
}

.portal-transition__caption {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  color: rgba(255,247,216,.82);
  font-size: 13px;
  letter-spacing: .18em;
  text-shadow: 0 2px 16px #000;
  animation: transitionCaption 5.2s ease both;
}

.gift { --accent: #f4ce78; }
.encounter {
  position: relative;
  width: min(1180px, 100%);
  height: min(78vh, 720px);
  min-height: 560px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 28px;
  background: #06101e;
  box-shadow: 0 28px 100px rgba(0,0,0,.65), inset 0 1px rgba(255,255,255,.08);
  animation: enter .9s ease both;
}

.encounter__cinema {
  position: absolute;
  inset: 0;
  overflow: hidden;
  animation: childApproach 16s ease-out both;
  transform-origin: 50% 38%;
}

.encounter.is-gift-shown .encounter__cinema {
  transform: scale(1.055);
  transition: transform 2.8s cubic-bezier(.2,.7,.2,1);
}

.encounter__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.encounter__frame--blink {
  opacity: 0;
  animation: childBlink 6.8s linear infinite;
}

.encounter__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0,0,0,.04) 40%, rgba(1,7,15,.1) 62%, rgba(1,7,15,.92) 100%),
    radial-gradient(circle at 50% 38%, transparent 0 28%, rgba(0,0,0,.08) 75%);
  pointer-events: none;
}

.encounter__caption {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 18px;
  width: min(720px, calc(100% - 32px));
  transform: translateX(-50%);
  padding: 18px 22px;
  text-align: center;
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 18px;
  background: rgba(3, 11, 21, .72);
  backdrop-filter: blur(16px);
}

.encounter__caption p {
  margin: 0 0 12px;
  color: rgba(255,255,255,.9);
  font-size: 15px;
  line-height: 1.8;
}

.encounter__caption .primary-btn { min-width: 150px; padding: 11px 22px; }

.gift-summon {
  position: absolute;
  z-index: 5;
  left: 50%;
  bottom: 114px;
  width: 190px;
  height: 190px;
  padding: 0;
  transform: translateX(-50%);
  border: 0;
  background: transparent;
  cursor: pointer;
}

.gift-summon__light {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 92px;
  height: 92px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,235,.94), rgba(255,207,93,.48) 28%, transparent 70%);
  filter: blur(2px);
  animation: summonPulse 2.1s ease-in-out infinite;
}

.gift-summon__hint {
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 130px;
  transform: translateX(-50%);
  color: rgba(255,247,215,.82);
  font-size: 12px;
  letter-spacing: .1em;
  text-shadow: 0 2px 12px #000;
}

.gift-object {
  width: 170px;
  height: 170px;
  background-image: url("assets/gift-sprite.png");
  background-image: image-set(url("assets/gift-sprite.webp") type("image/webp"), url("assets/gift-sprite.png") type("image/png"));
  background-repeat: no-repeat;
  background-size: 300% 300%;
  filter: drop-shadow(0 0 18px rgba(255,209,103,.75));
}

.gift-object--1 { background-position: 0 0; }
.gift-object--2 { background-position: 50% 0; }
.gift-object--3 { background-position: 100% 0; }
.gift-object--4 { background-position: 0 50%; }
.gift-object--5 { background-position: 50% 50%; }
.gift-object--6 { background-position: 100% 50%; }
.gift-object--7 { background-position: 0 100%; }
.gift-object--8 { background-position: 50% 100%; }
.gift-object--9 { background-position: 100% 100%; }

.gift-summon .gift-object {
  position: absolute;
  left: 50%;
  bottom: -5px;
  opacity: 0;
  transform: translateX(-50%) translateY(65px) scale(.15) rotate(-5deg);
  pointer-events: none;
}

.encounter.is-gift-shown .gift-summon .gift-object {
  opacity: 1;
  transform: translateX(-50%) translateY(-72px) scale(1) rotate(0);
  transition: opacity .5s ease, transform 1.5s cubic-bezier(.16,.8,.2,1.05);
  animation: giftFloat 3.3s 1.5s ease-in-out infinite;
}

.encounter.is-gift-shown .gift-summon__light { animation: summonBurst 1.7s ease-out both; }
.encounter.is-gift-shown .gift-summon__hint { display: none; }

.gift-object--small { width: 96px; height: 96px; margin: 0 auto 18px; }
.result-card .gift-object { width: 150px; height: 150px; }
.gift__icon {
  width: 128px;
  height: 128px;
  margin: 0 auto 24px;
  display: grid;
  place-items: center;
  font-family: Georgia, serif;
  font-size: 56px;
  border: 1px solid color-mix(in srgb, var(--accent) 55%, transparent);
  border-radius: 50%;
  color: var(--accent);
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 18%, transparent), transparent 65%);
  box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 24%, transparent), inset 0 0 30px rgba(255,255,255,.05);
}

.child-line {
  width: min(590px, 100%);
  margin: 22px auto;
  padding: 18px 22px;
  color: rgba(255,255,255,.84);
  line-height: 1.9;
  border-left: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  background: linear-gradient(90deg, transparent, rgba(244,206,120,.06), transparent);
}

.journey-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 28px 0 12px; }
.journey-step { padding: 18px 14px; border: 1px solid rgba(255,255,255,.1); border-radius: 16px; background: rgba(0,0,0,.16); opacity: .45; transition: .35s ease; }
.journey-step.is-active { opacity: 1; border-color: var(--line); background: rgba(244,206,120,.08); transform: translateY(-3px); }
.journey-step.is-done { opacity: .78; border-color: rgba(155,225,190,.3); }
.journey-step__num { color: var(--gold); font-size: 12px; letter-spacing: .18em; }
.journey-step p { margin: 8px 0 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.frequency { overflow: hidden; }
.frequency h2 { margin-bottom: 8px; }

.frequency-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 230px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  min-height: 330px;
  margin: 18px 0 12px;
  padding: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  background:
    radial-gradient(circle at 50% 55%, rgba(244,206,120,.09), transparent 31%),
    linear-gradient(90deg, rgba(12,13,27,.82), rgba(20,18,29,.55) 45%, rgba(33,29,27,.38) 70%, rgba(64,48,24,.22));
}

.frequency-scene::before,
.frequency-scene::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  width: 45%;
  pointer-events: none;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.frequency-scene::before {
  left: -8%;
  background: radial-gradient(ellipse, rgba(66,58,105,.22), transparent 67%);
}

.frequency-scene::after {
  right: -8%;
  opacity: .16;
  background: radial-gradient(ellipse, rgba(255,194,72,.45), transparent 67%);
}

.frequency-scene.stage-2::after { opacity: .9; transform: scale(1.35); }
.frequency-scene.stage-2::before { opacity: .35; transform: scale(.88); }

.frequency-side {
  position: relative;
  z-index: 2;
  padding: 24px 22px;
  text-align: left;
  border-radius: 18px;
  transition: opacity .8s ease, transform .8s ease, border-color .8s ease, background .8s ease;
}

.frequency-side__label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  color: rgba(255,255,255,.52);
  font-size: 12px;
  letter-spacing: .2em;
}

.frequency-side__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 12px currentColor;
}

.frequency-side p { margin: 0; color: rgba(255,255,255,.76); line-height: 1.95; font-size: 15px; }

.frequency-side--shadow {
  border: 1px solid rgba(139,128,189,.18);
  background: linear-gradient(135deg, rgba(92,78,126,.15), rgba(2,8,16,.16));
}

.frequency-side--shadow .frequency-side__label { color: #a99bc9; }

.frequency-side--light {
  opacity: .18;
  transform: translateX(-12px);
  border: 1px solid rgba(255,209,107,.1);
  background: linear-gradient(135deg, rgba(255,208,98,.08), rgba(255,255,255,.025));
  filter: blur(1.5px);
}

.frequency-side--light .frequency-side__label { color: #ffd572; }
.frequency-scene.stage-1 .frequency-side--light { opacity: .42; filter: blur(.7px); }
.frequency-scene.stage-2 .frequency-side--light { opacity: 1; transform: none; filter: none; border-color: rgba(255,209,107,.38); background: linear-gradient(135deg, rgba(255,208,98,.16), rgba(255,255,255,.045)); box-shadow: 0 0 38px rgba(255,187,64,.09); }
.frequency-scene.stage-2 .frequency-side--shadow { opacity: .62; transform: scale(.97); }

.ember-wrap { position: relative; z-index: 4; min-height: 250px; display: grid; place-items: center; }

.ember {
  position: relative;
  width: 176px;
  height: 232px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  filter: drop-shadow(0 16px 28px rgba(0,0,0,.45));
  transition: transform .7s cubic-bezier(.2,.8,.2,1), filter .7s ease;
}

.ember:hover { transform: scale(1.055); filter: drop-shadow(0 15px 38px rgba(255,188,63,.22)); }

.ember__aura {
  position: absolute;
  left: 50%;
  top: 49%;
  width: 204px;
  height: 226px;
  transform: translate(-50%,-50%);
  border-radius: 48% 52% 54% 46% / 62% 62% 38% 38%;
  background:
    radial-gradient(ellipse at 50% 56%, rgba(255,209,112,.17), rgba(149,103,205,.08) 38%, transparent 69%);
  animation: emberAura 3.3s ease-in-out infinite;
  transition: 1s ease;
}

.ember__flame {
  position: absolute;
  left: 50%;
  top: 42px;
  width: 132px;
  height: 132px;
  transform: translateX(-50%) rotate(45deg);
  transform-origin: 50% 50%;
  border-radius: 7% 62% 68% 62%;
  overflow: hidden;
  transition: opacity 1s ease, filter 1s ease, transform 1s ease;
}

.ember__flame--shadow {
  background:
    radial-gradient(circle at 68% 67%, rgba(154,112,206,.72), transparent 24%),
    radial-gradient(circle at 34% 31%, rgba(83,71,133,.38), transparent 36%),
    linear-gradient(145deg, #050711 8%, #161429 54%, #55416f 100%);
  border: 1px solid rgba(213,190,242,.22);
  box-shadow:
    inset 14px 14px 26px rgba(255,255,255,.055),
    inset -16px -13px 30px rgba(118,76,157,.28),
    0 0 28px rgba(98,72,139,.38);
}

.ember__flame--shadow::before {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(219,198,245,.13);
  border-radius: 8% 60% 66% 60%;
  box-shadow: inset 0 0 18px rgba(164,126,204,.12);
}

.ember__flame--light {
  opacity: .25;
  clip-path: circle(18% at 72% 72%);
  background:
    radial-gradient(circle at 70% 70%, #fffdf0 0 7%, rgba(255,237,157,.92) 14%, rgba(255,183,67,.64) 34%, transparent 58%),
    linear-gradient(135deg, #4b304f 8%, #a34e3e 38%, #ffad3f 70%, #fff0a1 100%);
  filter: drop-shadow(0 0 14px #ffc65d) drop-shadow(0 0 34px rgba(255,174,52,.4));
}

.ember__core {
  position: absolute;
  left: 50%;
  top: 130px;
  width: 46px;
  height: 46px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0 7%, #fff1ae 18%, #f3b64f 36%, rgba(115,78,153,.72) 62%, transparent 74%);
  box-shadow: 0 0 18px rgba(246,196,93,.42), 0 0 42px rgba(139,94,185,.18);
  animation: emberCore 2.2s ease-in-out infinite;
  transition: 1s ease;
}

.ember__spark {
  position: absolute;
  left: 50%;
  top: 45%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ffd978;
  box-shadow: 0 0 9px #ffc55a;
  opacity: .35;
}

.ember__spark--1 { animation: emberSpark 2.8s -.4s ease-out infinite; }
.ember__spark--2 { animation: emberSpark 3.4s -1.7s ease-out infinite; }
.ember__spark--3 { animation: emberSpark 3s -2.2s ease-out infinite; }

.frequency-scene.stage-1 .ember__flame--light { opacity: .68; clip-path: circle(46% at 68% 68%); }
.frequency-scene.stage-1 .ember__core { box-shadow: 0 0 26px #ffc758, 0 0 58px rgba(255,173,52,.35); }
.frequency-scene.stage-1 .ember__spark { opacity: .78; }

.frequency-scene.stage-2 .ember { transform: scale(1.07); filter: drop-shadow(0 14px 44px rgba(255,187,60,.48)); }
.frequency-scene.stage-2 .ember__flame--shadow { opacity: .35; filter: saturate(.7); }
.frequency-scene.stage-2 .ember__flame--light { opacity: 1; clip-path: circle(110% at 58% 60%); transform: translateX(-50%) rotate(45deg) scale(1.055); }
.frequency-scene.stage-2 .ember__core { background: radial-gradient(circle, #fff 0 10%, #fff3a9 25%, #ffba42 54%, transparent 72%); box-shadow: 0 0 32px #ffd061, 0 0 80px rgba(255,170,35,.65); }
.frequency-scene.stage-2 .ember__aura { width: 270px; height: 300px; background: radial-gradient(ellipse, rgba(255,215,123,.36), rgba(255,170,50,.1) 38%, transparent 68%); }
.frequency-scene.stage-2 .ember__spark { opacity: 1; }

.ember-hint {
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 230px;
  transform: translateX(-50%);
  color: rgba(255,255,255,.55);
  font-size: 12px;
  letter-spacing: .08em;
}

.frequency-transform {
  width: min(640px, 100%);
  max-height: 0;
  margin: 0 auto;
  padding: 0 20px;
  opacity: 0;
  overflow: hidden;
  border: 1px solid transparent;
  border-radius: 16px;
  transition: max-height .8s ease, opacity .8s ease, padding .8s ease, border-color .8s ease, background .8s ease;
}

.frequency-transform.is-visible {
  max-height: 150px;
  padding: 15px 20px;
  opacity: 1;
  border-color: rgba(244,206,120,.22);
  background: linear-gradient(90deg, transparent, rgba(244,206,120,.08), transparent);
}

.frequency-transform span { color: var(--gold); font-size: 11px; letter-spacing: .2em; }
.frequency-transform p { margin: 7px 0 0; color: rgba(255,255,255,.78); line-height: 1.75; }

.ritual {
  position: relative;
  min-height: 160px;
  margin: 22px 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  background: radial-gradient(circle, rgba(244,206,120,.08), rgba(0,0,0,.14));
}

.ritual__core {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  color: var(--gold-2);
  font-size: 32px;
  border: 1px solid rgba(244,206,120,.5);
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(244,206,120,.2);
  cursor: pointer;
  user-select: none;
  transition: .35s ease;
  animation: float 3s ease-in-out infinite;
}

.ritual__core:hover { transform: scale(1.1); box-shadow: 0 0 50px rgba(244,206,120,.45); }
.ritual__hint { position: absolute; bottom: 12px; color: rgba(255,255,255,.44); font-size: 12px; }

.result-card { display: grid; grid-template-columns: 160px 1fr; gap: 30px; align-items: center; text-align: left; }
.result-card .gift__icon { margin: 0; }
.result-card__copy p { color: var(--muted); line-height: 1.9; }

.wish-finale {
  position: relative;
  width: min(760px, 100%);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 34px;
  text-align: center;
  isolation: isolate;
  animation: enter 1.3s ease both;
}

.wish-finale::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: 46%;
  width: min(620px, 92vw);
  height: 330px;
  transform: translate(-50%,-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(255,222,133,.2), rgba(178,126,255,.07) 42%, transparent 72%);
  filter: blur(14px);
  animation: wishHalo 4.2s ease-in-out infinite;
}

.wish-finale__mark {
  color: #ffe7a2;
  font-size: 30px;
  text-shadow: 0 0 12px #fff1b7, 0 0 38px rgba(255,194,77,.92), 0 0 76px rgba(189,130,255,.54);
  animation: wishMark 3.2s ease-in-out infinite;
}

.wish-finale h1 {
  margin: 0;
  color: #fff5d2;
  font-family: var(--font-art);
  font-size: clamp(44px, 7vw, 78px);
  font-weight: 400;
  letter-spacing: .18em;
  text-indent: .18em;
  text-shadow: 0 3px 24px rgba(0,0,0,.8), 0 0 24px rgba(255,221,138,.52);
}

.wish-finale__invitation {
  max-width: 460px;
  margin: -16px 0 -8px;
  color: rgba(239,239,226,.7);
  line-height: 1.8;
}

.wish-finale__actions { margin-top: 0; }
.wish-finale__return { min-width: 180px; }

.feedback-panel {
  width: min(860px, 100%);
  text-align: left;
}

.feedback-panel > .eyebrow,
.feedback-panel > h2,
.feedback-panel__intro { text-align: center; }

.feedback-panel__intro {
  margin: 8px auto 28px;
  color: var(--muted);
  line-height: 1.8;
}

.feedback-form { display: grid; gap: 22px; }

.feedback-field {
  min-width: 0;
  margin: 0;
  padding: 18px;
  border: 1px solid rgba(244,206,120,.2);
  border-radius: 18px;
  background: rgba(4,14,27,.48);
}

.feedback-field legend,
.feedback-field > span {
  padding: 0 7px;
  color: #fff2c7;
  font-size: 15px;
  letter-spacing: .04em;
}

.feedback-field small {
  margin-left: 8px;
  color: rgba(238,239,229,.42);
  font-size: 11px;
}

.feedback-scale {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 9px;
  margin-top: 10px;
}

.feedback-scale label { cursor: pointer; }
.feedback-scale input { position: absolute; opacity: 0; pointer-events: none; }

.feedback-scale span {
  min-height: 86px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 6px;
  color: rgba(239,241,232,.64);
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 13px;
  background: rgba(3,12,23,.46);
  transition: border-color .25s ease, background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
}

.feedback-scale b {
  color: var(--gold-2);
  font-family: Georgia, serif;
  font-size: 22px;
  font-weight: 400;
}

.feedback-scale label:hover span { transform: translateY(-2px); border-color: rgba(244,206,120,.38); }
.feedback-scale input:focus-visible + span { outline: 2px solid #ffe19a; outline-offset: 2px; }
.feedback-scale input:checked + span {
  color: #fff7db;
  border-color: rgba(255,220,132,.72);
  background: radial-gradient(circle at 50% 20%, rgba(255,208,103,.2), rgba(9,19,31,.7));
  box-shadow: 0 0 24px rgba(244,190,80,.16), inset 0 0 18px rgba(255,221,140,.06);
}

.feedback-field--select,
.feedback-field--text { display: grid; gap: 12px; }

.feedback-field select,
.feedback-field textarea {
  width: 100%;
  color: #f5f1df;
  font: inherit;
  line-height: 1.7;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 12px;
  background: rgba(2,10,20,.72);
  outline: none;
}

.feedback-field select { min-height: 50px; padding: 0 14px; }
.feedback-field textarea { resize: vertical; min-height: 110px; padding: 12px 14px; }
.feedback-field select:focus,
.feedback-field textarea:focus { border-color: rgba(255,220,132,.68); box-shadow: 0 0 18px rgba(244,190,80,.1); }
.feedback-field textarea::placeholder { color: rgba(238,239,229,.32); }

.feedback-form__note {
  margin: -8px 0 0;
  color: rgba(238,239,229,.44);
  text-align: center;
  font-size: 12px;
}

.feedback-thanks h1 { max-width: 680px; font-size: clamp(32px, 5vw, 58px); line-height: 1.45; }
.feedback-thanks > p:not(.eyebrow) { margin: -18px 0 0; color: var(--muted); }

@keyframes wishHalo {
  0%,100% { opacity: .58; transform: translate(-50%,-50%) scale(.92); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
}

@keyframes wishMark {
  0%,100% { opacity: .7; transform: scale(.88) rotate(-8deg); }
  50% { opacity: 1; transform: scale(1.12) rotate(8deg); }
}
.mantra { color: var(--gold-2) !important; font-size: 18px; }
.practice { padding: 14px 16px; border-radius: 12px; background: rgba(244,206,120,.08); border: 1px solid var(--line); }

.number-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 28px auto; width: min(420px, 100%); }
.number-key {
  aspect-ratio: 1.25;
  color: var(--ink);
  font-size: 30px;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 16px;
  background: rgba(3,12,22,.48);
  cursor: pointer;
  transition: .25s ease;
}
.number-key:hover { color: var(--gold-2); border-color: var(--gold); background: rgba(244,206,120,.09); transform: translateY(-3px); }

.footer {
  position: fixed;
  z-index: 5;
  left: 0;
  right: 0;
  bottom: 18px;
  display: flex;
  justify-content: center;
  gap: 10px;
  padding: 0 20px;
  color: rgba(255,255,255,.42);
  font-family: system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: .06em;
  text-align: center;
}
.footer__dot { color: var(--gold); }

@keyframes enter { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sacredSheetUnroll {
  0% { opacity: .35; transform: scaleY(.018); filter: brightness(1.8) blur(2px); }
  14% { opacity: .72; transform: scaleY(.075); }
  52% { opacity: .94; transform: scaleY(.56); filter: brightness(1.18) blur(.5px); }
  82% { transform: scaleY(.93); }
  100% { opacity: 1; transform: scaleY(1); filter: none; }
}
@keyframes lowerRodDescends {
  0% { top: 0; filter: brightness(1.7); }
  14% { top: 6%; }
  52% { top: 55%; }
  82% { top: 92%; }
  100% { top: calc(100% - 5px); filter: none; }
}
@keyframes writingAwakens { from { opacity: 0; } to { opacity: 1; } }
@keyframes sacredInk {
  0% { opacity: 0; color: #b07b38; filter: blur(4px); transform: translateY(5px) scale(.96); text-shadow: 0 0 18px rgba(255,216,126,.75); }
  55% { opacity: .72; filter: blur(1px); }
  100% { opacity: 1; filter: none; transform: none; text-shadow: inherit; }
}
@keyframes arabicInkWrites {
  0% { opacity: 0; clip-path: inset(0 0 0 100%); filter: blur(3px); color: #a37239; }
  18% { opacity: .7; }
  72% { filter: blur(.4px); color: #51301b; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); filter: none; color: #3a2114; }
}
@keyframes parchmentDetail { from { opacity: 0; filter: blur(5px); } to { opacity: 1; filter: none; } }
@keyframes gateRuneAwakens {
  0% { opacity: 0; filter: brightness(.6); }
  38% { opacity: 1; filter: brightness(1.8); }
  100% { opacity: 1; filter: brightness(1); }
}
@keyframes ringMysticGlow {
  0%,100% { opacity: .12; transform: scale(.72); }
  38% { opacity: .58; transform: scale(1.08); }
  68% { opacity: .3; transform: scale(.92); }
}
@keyframes homeWorldReveals {
  0%, 12% { opacity: 0; filter: brightness(.82) saturate(.86); }
  36% { opacity: .24; filter: brightness(.92) saturate(.92); }
  68% { opacity: .72; filter: brightness(1) saturate(1); }
  100% { opacity: 1; filter: brightness(1.02) saturate(1.04); }
}
@keyframes homeDoorPushLeft {
  0% { opacity: 1; transform: perspective(1400px) scale(1.045) rotateY(0deg); filter: brightness(1); }
  18% { transform: perspective(1400px) scale(1.045) rotateY(-5deg); }
  100% { opacity: 0; transform: perspective(1400px) scale(1.045) translateX(-7.8%) rotateY(-68deg); filter: brightness(.62); }
}
@keyframes homeDoorPushRight {
  0% { opacity: 1; transform: perspective(1400px) scale(1.045) rotateY(0deg); filter: brightness(1); }
  18% { transform: perspective(1400px) scale(1.045) rotateY(5deg); }
  100% { opacity: 0; transform: perspective(1400px) scale(1.045) translateX(7.8%) rotateY(68deg); filter: brightness(.62); }
}
@keyframes homeDoorSeam {
  0% { opacity: .2; transform: translateX(-50%) scaleX(.35); }
  24% { opacity: 1; transform: translateX(-50%) scaleX(2.6); }
  62% { opacity: .9; transform: translateX(-50%) scaleX(18); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(48); }
}
@keyframes homeDoorRadiance {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.08,.62); }
  18% { opacity: .28; transform: translate(-50%,-50%) scale(.3,.82); }
  42% { opacity: .13; transform: translate(-50%,-50%) scale(1.1,1); }
  72%, 100% { opacity: 0; transform: translate(-50%,-50%) scale(2.2,1.12); }
}
@keyframes homeFloorLight {
  0%,8% { opacity: 0; transform: scale(.18,.025); filter: blur(30px); }
  24% { opacity: .18; transform: scale(.38,.16); }
  48% { opacity: .5; transform: scale(.68,.5); filter: blur(25px); }
  76% { opacity: .7; transform: scale(.9,.84); }
  100% { opacity: .68; transform: scale(1,1); filter: blur(21px); }
}
@keyframes homeNumbersYield { to { opacity: 0; filter: blur(4px) brightness(1.7); } }
@keyframes homeWordsYield { to { opacity: 0; transform: translateY(-12px); filter: blur(6px); } }
@keyframes homeEnergyGuideArrives {
  0% { opacity: 0; transform: translate(-50%, -36%); filter: blur(8px); }
  64% { opacity: .92; filter: blur(.8px); }
  100% { opacity: 1; transform: translate(-50%, -44%); filter: none; }
}
@keyframes numberMysticBreath {
  0%,100% { opacity: .82; filter: drop-shadow(0 0 4px #fff2b1) drop-shadow(0 0 10px rgba(209,157,255,.62)); }
  50% { opacity: 1; filter: drop-shadow(0 0 8px #fff8d5) drop-shadow(0 0 22px rgba(218,168,255,.98)); }
}
@keyframes hiddenCandleFlicker {
  0%,100% { opacity: .46; transform: scale(.94, 1.03); filter: blur(1.3px) drop-shadow(0 0 7px rgba(255,190,70,.66)); }
  9% { opacity: .68; transform: scale(1.02, .96); }
  17% { opacity: .52; transform: scale(.97, 1.06); }
  31% { opacity: .78; transform: scale(1.06, .94); filter: blur(.7px) drop-shadow(0 0 13px rgba(255,213,108,.92)); }
  39% { opacity: .58; transform: scale(.98, 1.02); }
  57% { opacity: .72; transform: scale(1.04, .97); }
  73% { opacity: .49; transform: scale(.95, 1.05); }
  86% { opacity: .66; transform: scale(1.01, .98); }
}
@keyframes numberCandleShimmer {
  0%,100% { opacity: .88; filter: drop-shadow(0 0 3px #fff7cd) drop-shadow(0 0 10px rgba(255,191,72,.72)) drop-shadow(0 0 18px rgba(191,126,255,.42)); }
  9% { opacity: 1; filter: drop-shadow(0 0 6px #fffbe2) drop-shadow(0 0 16px rgba(255,208,104,.95)) drop-shadow(0 0 28px rgba(206,151,255,.62)); }
  17% { opacity: .91; }
  31% { opacity: 1; filter: drop-shadow(0 0 8px #fffde9) drop-shadow(0 0 21px rgba(255,194,73,1)) drop-shadow(0 0 34px rgba(210,155,255,.7)); }
  39% { opacity: .93; }
  57% { opacity: .98; filter: drop-shadow(0 0 5px #fff6c4) drop-shadow(0 0 15px rgba(255,201,90,.88)) drop-shadow(0 0 26px rgba(194,135,255,.56)); }
  73% { opacity: .86; }
  86% { opacity: .97; }
}
@keyframes letterGather {
  0% { opacity: 0; filter: blur(9px) brightness(1.7); transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(.72); }
  32% { opacity: .48; filter: blur(5px) brightness(1.45); transform: translate(var(--mx), var(--my)) rotate(var(--mr)) scale(.86); }
  70% { opacity: .94; filter: blur(1px) brightness(1.25); transform: translate(-3px, 2px) rotate(-1deg) scale(1.025); text-shadow: 0 0 18px rgba(255,222,135,.72); }
  100% { opacity: 1; filter: none; transform: none; text-shadow: inherit; }
}
@keyframes letterScatter {
  0% { opacity: 1; filter: none; transform: none; }
  20% { opacity: .94; filter: blur(.5px); transform: translate(-12px, -3px) rotate(-2deg); }
  58% { opacity: .55; filter: blur(3px) brightness(1.35); transform: translate(calc(var(--out-x) * .45), calc(var(--out-y) * .4)) rotate(calc(var(--out-r) * .4)) scale(.86); }
  100% { opacity: 0; filter: blur(9px) brightness(1.65); transform: translate(var(--out-x), var(--out-y)) rotate(var(--out-r)) scale(.5); }
}
@keyframes mistAway { to { opacity: 0; filter: blur(10px); transform: translateY(-18px) scale(.96); } }
@keyframes dragonSwim { 0%,100% { margin-top: -2px; transform: translateX(-72%) scale(.8) rotate(-1deg); } 50% { margin-top: 3px; transform: translateX(-72%) scale(.82) rotate(2deg); } }
@keyframes starArrival {
  0%, 68% { transform: scale(1); color: rgba(255,255,255,.16); }
  82% { transform: scale(2); color: #fff8cf; text-shadow: 0 0 24px #ffd36d, 0 0 45px #ffb637; }
  100% { transform: scale(1.18); color: #ffd87c; text-shadow: 0 0 12px #ffc75b; }
}
@keyframes breathe { from { transform: scale(1.035); } to { transform: scale(1.065); } }
@keyframes doorGlow { 0%,100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes float { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(5px); } }
@keyframes numberPulse { 0%,100% { transform: scale(.96); } 50% { transform: scale(1.03); } }
@keyframes portalCamera {
  0% { transform: scale(1); }
  62% { transform: scale(1.018); }
  100% { transform: scale(1.035); }
}
@keyframes openDoorWorld {
  0% { opacity: 0; clip-path: circle(0% at 50% 52%); filter: brightness(1.4); }
  35% { opacity: .9; }
  100% { opacity: 1; clip-path: circle(76% at 50% 52%); filter: brightness(1); }
}
@keyframes openingSeam {
  0% { opacity: .4; transform: translateX(-50%) scaleX(.4); }
  44% { opacity: 1; transform: translateX(-50%) scaleX(7); }
  76% { opacity: .8; transform: translateX(-50%) scaleX(22); }
  100% { opacity: 0; transform: translateX(-50%) scaleX(42); }
}
@keyframes numberEntersDoor {
  0% { opacity: 1; transform: translate(-50%,-50%) scale(1); filter: blur(0); }
  62% { opacity: .8; transform: translate(-50%,-50%) scale(.46); }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(.06); filter: blur(6px); }
}
@keyframes portalMist {
  0% { opacity: 0; transform: translate(-50%,-50%) scale(.3); }
  46% { opacity: .92; transform: translate(-50%,-50%) scale(1.25); }
  100% { opacity: .18; transform: translate(-50%,-50%) scale(2.8); }
}
@keyframes childComesThrough {
  0% { opacity: 0; clip-path: circle(0% at 50% 47%); transform: scale(.48); filter: blur(10px) brightness(1.45); }
  34% { opacity: .5; clip-path: circle(18% at 50% 47%); }
  72% { opacity: .94; filter: blur(1px) brightness(1.08); }
  100% { opacity: 1; clip-path: circle(82% at 50% 47%); transform: scale(1); filter: none; }
}
@keyframes transitionCaption {
  0%, 12% { opacity: 0; }
  25%, 62% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes seamBreathe {
  0%, 100% { opacity: .52; transform: scaleX(.55); }
  42% { opacity: 1; transform: scaleX(1.2); }
  58% { opacity: .83; transform: scaleX(.86); }
}
@keyframes spillFlow {
  0%, 100% { opacity: .38; transform: scaleX(.7) scaleY(.72); }
  48% { opacity: .92; transform: scaleX(1.12) scaleY(1.08); }
  68% { opacity: .64; transform: scaleX(.94) scaleY(1.18); }
}
@keyframes rayOpen {
  0%, 100% { opacity: .15; transform: scaleX(.68) translateY(-2%); }
  45% { opacity: .68; transform: scaleX(1.05) translateY(2%); }
  70% { opacity: .34; transform: scaleX(.88) translateY(4%); }
}
@keyframes lanternFlicker {
  0%, 100% { opacity: .44; transform: translate(-50%, -50%) scale(.88); filter: blur(3.5px) brightness(.9); }
  18% { opacity: .9; transform: translate(-50%, -50%) scale(1.08); filter: blur(2.5px) brightness(1.18); }
  23% { opacity: .62; transform: translate(-50%, -50%) scale(.96); }
  27% { opacity: .86; transform: translate(-50%, -50%) scale(1.03); }
  63% { opacity: .7; transform: translate(-50%, -50%) scale(1); filter: blur(3px) brightness(1.06); }
  78% { opacity: .96; transform: translate(-50%, -50%) scale(1.12); filter: blur(2px) brightness(1.25); }
}
@keyframes childApproach {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
@keyframes childBlink {
  0%, 43%, 46%, 73%, 76%, 100% { opacity: 0; }
  44%, 45%, 74%, 75% { opacity: 1; }
}
@keyframes summonPulse {
  0%,100% { opacity: .5; transform: translateX(-50%) scale(.8); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.18); }
}
@keyframes summonBurst {
  0% { opacity: .7; transform: translateX(-50%) scale(.8); }
  42% { opacity: 1; transform: translateX(-50%) scale(2.4); }
  100% { opacity: .25; transform: translateX(-50%) scale(1.45); }
}
@keyframes giftFloat {
  0%,100% { transform: translateX(-50%) translateY(-72px) scale(1); }
  50% { transform: translateX(-50%) translateY(-82px) scale(1.035); }
}
@keyframes cursorBreathe {
  0%,100% { opacity: .5; transform: translate(-50%, -50%) scale(.82); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
}

@keyframes emberAura {
  0%,100% { opacity: .45; transform: translate(-50%,-50%) scale(.84); }
  50% { opacity: 1; transform: translate(-50%,-50%) scale(1.12); }
}
@keyframes emberCore {
  0%,100% { transform: translate(-50%,-50%) scale(.86); opacity: .72; }
  50% { transform: translate(-50%,-50%) scale(1.08); opacity: 1; }
}
@keyframes emberSpark {
  0% { transform: translate(-50%, 30px) scale(.45); opacity: 0; }
  18% { opacity: .9; }
  100% { transform: translate(calc(-50% + 22px), -105px) scale(0); opacity: 0; }
}

@media (max-width: 680px) {
  .topbar { gap: 5px; padding: 10px 8px; }
  .brand { flex: 0 0 auto; gap: 0; padding: 0 5px; white-space: nowrap; }
  .brand span:last-child { display: none; }
  .brand__sigil { font-size: 21px; }
  .topbar__actions { flex: 1; justify-content: flex-end; gap: 5px; min-width: 0; }
  .text-btn, .music-toggle, .music-control .music-toggle {
    min-height: 36px;
    padding: 0 9px;
    font-size: 11px;
    letter-spacing: .03em;
    white-space: nowrap;
  }
  .app { width: min(100% - 20px, 1040px); padding-top: 84px; padding-bottom: 80px; }
  .panel { border-radius: 21px; padding: 26px 18px; }
  .question { min-height: 166px; }
  body[data-screen="quiz"] .panel { height: min(690px, calc(100vh - 104px)); min-height: 580px; overflow: hidden; }
  body[data-screen="quiz"] .app { padding: 74px 0 8px; }
  body[data-screen="quiz"] .options { grid-template-rows: repeat(3, 76px); min-height: 252px; }
  body[data-screen="quiz"] .option { height: 76px; min-height: 76px; font-size: 15px; }
  .journey-grid { grid-template-columns: 1fr; }
  .journey-step { text-align: left; }
  .result-card { grid-template-columns: 1fr; text-align: center; }
  .result-card .gift__icon { margin: 0 auto; }
  .feedback-panel { padding-inline: 14px; }
  .feedback-scale { grid-template-columns: 1fr; }
  .feedback-scale span { min-height: 54px; flex-direction: row; justify-content: flex-start; padding-inline: 16px; }
  .feedback-scale b { width: 28px; text-align: center; }
  .wish-finale__actions { flex-direction: column; }
  .footer { display: none; }
  .text-btn { padding: 0 12px; }
  .lantern-glow:nth-child(2), .lantern-glow:nth-child(5), .lantern-glow:nth-child(6) { display: none; }
  .door-light__spill { left: 31%; width: 38%; }
  .door-light__rays { left: 20%; width: 60%; }
  .encounter { min-height: 600px; height: 78vh; border-radius: 20px; }
  .encounter__frame { object-position: center; }
  .gift-summon { bottom: 130px; transform: translateX(-50%) scale(.82); }
  .encounter__caption { bottom: 10px; padding: 14px; }
  .encounter__caption p { font-size: 13px; }
  .frequency-scene { grid-template-columns: 1fr; padding: 14px; }
  .frequency-side { padding: 16px; text-align: center; }
  .frequency-side--light { transform: translateY(-8px); }
  .ember-wrap { min-height: 220px; grid-row: 2; }
  .ember { transform: scale(.9); }
  .frequency-scene.stage-2 .ember { transform: scale(.96); }
  .portal-transition { min-height: 600px; height: 78vh; border-radius: 20px; }
  body[data-screen="landing"] .world__veil {
    background: linear-gradient(180deg, rgba(1,7,16,.38), rgba(1,7,16,.6) 48%, rgba(1,7,16,.82));
  }
  .landing { min-height: auto; padding: 8px 0 16px; align-items: flex-start; }
  .landing__card { width: 100%; padding: 30px 20px 26px; border-radius: 90px 90px 22px 22px / 34px 34px 22px 22px; background: rgba(3,11,22,.72); }
  .landing__scroll { width: 100%; min-height: 680px; }
  .landing__sheet { min-height: 680px; padding: 30px 20px 26px; background: linear-gradient(90deg, #ba8d4d, #ead093 10%, #e3c27d 50%, #efd99d 90%, #a87339); }
  .landing__revelation { padding-inline: 8px; }
  .landing__revelation blockquote { font-size: 16px; line-height: 1.8; }
  .landing__celestial-script { padding-inline: 22px; font-size: 29px; }
  .landing__constellation { display: none; }
  .landing h1 > span { font-size: clamp(38px, 11vw, 50px); }
  .landing__intro { max-width: 390px; font-size: 14px; line-height: 1.8; }
  .landing__path { gap: 7px; margin-block: 21px; }
  .landing__path div { min-width: 0; gap: 5px; }
  .landing__path b { display: none; }
  .landing__path span { font-size: 10px; }
  .landing__whisper { display: none; }
  .home-hero { min-height: 72vh; padding-inline: 8px; }
  .home-hero__title { padding-inline: 8px; }
  .home-hero h1 { font-size: clamp(34px, 12vw, 50px); letter-spacing: .08em; }
  .home-hero__title p { width: min(300px, 100%); margin-inline: auto; }
  .home-hero__invitation small { max-width: 280px; line-height: 1.6; }
  .home-energy-guide { top: 50%; width: calc(100% - 26px); padding: 20px 12px; }
  .home-energy-guide p { letter-spacing: .04em; line-height: 1.75; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}

@media (pointer: coarse) {
  .cursor-aura { display: none; }
}