:root {
  color-scheme: dark;
  --ink: #051722;
  --ice: #d6f5ff;
  --muted: #92b5c4;
  --line: rgba(192, 231, 245, .23);
  --serif: "Noto Serif SC", "Songti SC", "STSong", "SimSun", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
  --px: 0;
  --py: 0;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: var(--ink); }
body { font: 14px/1.6 var(--sans); color: var(--ice); overscroll-behavior: none; }
button, a { touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
button, a { -webkit-user-select: none; user-select: none; }
button:focus-visible, a:focus-visible, [tabindex]:focus-visible { outline: 2px solid #cbf7ff; outline-offset: 5px; }
button:disabled { cursor: wait; }
a { color: inherit; text-decoration: none; }
button, a, div { -webkit-touch-callout: none; }
svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; }
[hidden] { display: none !important; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.experience { position: relative; width: 100%; height: 100%; height: 100svh; min-height: 480px; overflow: hidden; isolation: isolate; background: #061722; }
.environment { position: absolute; inset: -4%; overflow: hidden; pointer-events: none; }
.landscape { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3, 15, 25, .6), rgba(5, 22, 35, .07) 65%), url("./assets/images/sanctuary.webp") center 53% / cover no-repeat; transform: translate3d(calc(var(--px) * -13px), calc(var(--py) * -8px), 0) scale(1.03); opacity: .82; }
.aurora { position: absolute; width: 80%; height: 36%; top: -8%; left: 26%; border-radius: 50%; background: radial-gradient(ellipse, rgba(84, 219, 219, .19), rgba(54, 152, 193, .08) 45%, transparent 70%); transform: rotate(-25deg); opacity: .7; animation: aurora-flow 18s ease-in-out infinite alternate; transition: background 2s, opacity 2s; }
.aurora-two { top: 3%; left: -5%; width: 95%; height: 24%; background: radial-gradient(ellipse, rgba(126, 136, 222, .14), transparent 65%); animation-delay: -7s; }
[data-aurora="1"] .aurora-one { background: radial-gradient(ellipse, rgba(169, 100, 235, .4), rgba(75, 80, 172, .1) 50%, transparent 70%); opacity: 1; }
[data-aurora="1"] .aurora-two { background: radial-gradient(ellipse, rgba(219, 157, 239, .22), transparent 65%); }
[data-aurora="2"] .aurora-one { background: radial-gradient(ellipse, rgba(100, 231, 183, .35), rgba(78, 196, 184, .08) 50%, transparent 70%); opacity: 1; }
.moon-halo { position: absolute; width: min(45vw, 640px); aspect-ratio: 1; left: 58%; top: 12%; border: 1px solid rgba(195, 237, 255, .13); border-radius: 50%; box-shadow: 0 0 70px rgba(152, 221, 255, .04), inset 0 0 100px rgba(152, 221, 255, .02); transform: translate3d(calc(-50% + var(--px) * -6px), calc(var(--py) * -4px), 0); }
.moon-halo::before, .moon-halo::after, .moon-halo span { content: ""; position: absolute; inset: -10px; border: 1px solid rgba(213, 237, 251, .035); border-radius: 50%; }
.moon-halo::after { inset: -27px; border-style: dashed; opacity: .45; }
.moon-halo span { inset: 10px; }
.horizon { position: absolute; left: 0; right: 0; bottom: 0; height: 24%; background: linear-gradient(0deg, rgba(2, 20, 30, .8), transparent); }
.gesture-surface { position: absolute; inset: 0; z-index: 3; outline-offset: -8px !important; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
.goddess-position { position: absolute; height: 94%; width: min(63vw, 950px); left: 63%; bottom: -4%; transform: translateX(-50%); pointer-events: none; }
.goddess-depth, .goddess-float { width: 100%; height: 100%; }
.goddess-depth { transform: translate3d(calc(var(--px) * 19px), calc(var(--py) * 9px), 0); }
.goddess-float { animation: goddess-float 7s ease-in-out infinite; }
.goddess { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; filter: drop-shadow(0 0 28px rgba(130, 220, 255, .11)); opacity: .79; transform: scale(.97); transition: opacity 1.8s ease, transform 2.4s cubic-bezier(.2, .65, .2, 1), filter 1.8s; -webkit-user-drag: none; }
.ice-platform { position: absolute; width: 39%; height: 11%; left: 63%; bottom: 0; border-radius: 50%; transform: translateX(-50%); background: radial-gradient(ellipse, rgba(107, 230, 250, .09), transparent 67%); opacity: .7; }
.ice-platform span, .ice-platform i { position: absolute; inset: 25% 8%; border: 1px solid rgba(180, 239, 255, .14); border-radius: 50%; box-shadow: 0 0 17px rgba(80, 207, 243, .08); }
.ice-platform i { inset: 38% 20%; }
.floating-crystal { position: absolute; width: 18px; height: 40px; background: linear-gradient(125deg, rgba(211, 252, 255, .65), rgba(94, 174, 213, .04) 52%, rgba(169, 232, 255, .5)); clip-path: polygon(50% 0, 100% 45%, 50% 100%, 0 45%); opacity: .5; animation: crystal-float 8s ease-in-out infinite; pointer-events: none; }
.crystal-a { left: 46%; top: 57%; transform: rotate(-20deg); }
.crystal-b { left: 81%; top: 39%; width: 13px; height: 30px; animation-delay: -3s; }
.crystal-c { left: 88%; top: 76%; width: 23px; height: 51px; animation-delay: -5s; }
.snow-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 6; pointer-events: none; }
.vignette { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(0deg, rgba(3, 16, 25, .65), transparent 20%, transparent 75%, rgba(3, 16, 25, .35)), linear-gradient(90deg, rgba(3, 16, 25, .25), transparent 48%); }
.ritual-light { position: absolute; inset: 0; z-index: 8; pointer-events: none; background: radial-gradient(ellipse at 63% 45%, rgba(216, 252, 255, .67), rgba(130, 213, 248, .1) 40%, transparent 68%); opacity: 0; }
.ritual-light.is-blooming { animation: light-bloom 2s cubic-bezier(.17, .67, .15, 1) both; }
.site-header { position: absolute; z-index: 20; top: max(30px, env(safe-area-inset-top)); left: 4.4%; right: 4.4%; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: 13px; min-height: 44px; }
.brand-icon { width: 36px; height: 36px; stroke-width: 1; color: #d0f3fc; }
.brand strong { display: block; font: 13px/1.6 Georgia, serif; letter-spacing: .29em; font-weight: normal; }
.brand small { display: block; font-size: 9px; letter-spacing: .39em; color: #97b6c5; }
.header-actions { display: flex; gap: 10px; }
.icon-button { background: rgba(6, 25, 38, .3); border: 1px solid var(--line); border-radius: 50%; width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; transition: background .3s, border-color .3s; }
.icon-button:hover, .icon-button:active { background: rgba(168, 226, 248, .12); border-color: rgba(202, 243, 253, .55); }
.help-button { font: italic 18px Georgia, serif; }
.sound-bars { display: flex; align-items: center; justify-content: center; gap: 3px; height: 21px; }
.sound-bars i { display: block; background: #bfdfe9; width: 2px; height: 4px; transition: height .35s; }
.sound-button.is-playing .sound-bars i { height: 15px; animation: sound-wave 1.3s ease-in-out infinite alternate; }
.sound-button.is-playing .sound-bars i:nth-child(2) { animation-delay: -.6s; height: 8px; }
.sound-button.is-playing .sound-bars i:nth-child(3) { animation-delay: -.3s; height: 19px; }
.sound-button.is-playing .sound-bars i:nth-child(4) { animation-delay: -.9s; height: 9px; }
.invitation { position: absolute; z-index: 10; left: 9%; top: 24%; pointer-events: none; transition: opacity 1s, transform 1.2s; }
.edition { font: 12px var(--serif); color: #b9d9e6; letter-spacing: .26em; display: flex; align-items: center; gap: 13px; margin-bottom: 35px; }
.tiny-star { font-size: 20px; }
.eyebrow { margin: 0 0 14px; font: 10px/1.5 var(--sans); letter-spacing: .31em; color: #a9ccdb; }
h1 { margin: 0; font: normal clamp(54px, 6.5vw, 100px)/1.25 var(--serif); letter-spacing: .12em; color: #e0f7ff; text-shadow: 0 4px 30px rgba(137, 217, 249, .12); }
h1 span { display: block; font-size: .38em; line-height: 1.5; letter-spacing: .42em; font-weight: 300; color: #c7e3ec; margin: 12px 0 0 3px; }
.title-rule { display: flex; align-items: center; gap: 13px; color: #b1d9e7; font: 17px Georgia, serif; margin: 25px 0 19px; width: 215px; }
.title-rule span { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(189, 225, 238, .45), transparent); }
.title-rule span:first-child { transform: rotate(180deg); }
.intro-description { margin: 0; color: #a5c6d5; font: 14px/2.1 var(--serif); letter-spacing: .2em; }
.scene-label { position: absolute; z-index: 10; right: 4.5%; top: 36%; writing-mode: vertical-rl; display: flex; align-items: center; gap: 19px; color: #8baaba; pointer-events: none; }
.scene-label span:first-child { font-size: 8px; letter-spacing: .3em; }
.scene-label span:last-child { font: 10px var(--serif); letter-spacing: .25em; }
.scene-label i { display: block; height: 45px; width: 1px; background: var(--line); }
.entry-controls { position: absolute; z-index: 20; left: 9%; bottom: 14%; width: 322px; transition: opacity .7s, transform 1s; }
.summon-button { position: relative; width: 100%; min-height: 83px; display: flex; align-items: center; gap: 17px; text-align: left; padding: 17px 22px; border: 1px solid rgba(185, 233, 248, .37); background: linear-gradient(115deg, rgba(142, 211, 238, .16), rgba(108, 187, 221, .03)); box-shadow: inset 0 0 28px rgba(158, 226, 246, .04), 0 0 35px rgba(85, 177, 213, .05); border-radius: 3px; transition: border-color .4s, background .4s, transform .4s; }
.summon-button::before, .summon-button::after { content: ""; position: absolute; inset: 5px; pointer-events: none; border: 1px solid rgba(202, 238, 246, .09); border-right-color: transparent; border-left-color: transparent; }
.summon-button::after { inset: -5px; border: 0; border-top: 1px solid rgba(156, 218, 244, .3); border-bottom: 1px solid rgba(156, 218, 244, .3); left: 35%; right: 35%; animation: breathe 3s ease-in-out infinite; }
.summon-button:hover, .summon-button:active { border-color: #b4e4f3; background: rgba(151, 220, 240, .17); transform: translateY(-2px); }
.summon-emblem { width: 37px; height: 37px; display: grid; place-items: center; }
.summon-emblem svg { width: 32px; height: 32px; color: #ccf6ff; filter: drop-shadow(0 0 8px rgba(177, 232, 255, .4)); }
.summon-copy { display: flex; flex-direction: column; }
.summon-copy strong { font: normal 17px var(--serif); letter-spacing: .17em; }
.summon-copy small { font-size: 8px; letter-spacing: .22em; color: #90b5c5; margin-top: 7px; }
.summon-arrow { width: 21px; margin-left: auto; color: #a0c7d7; }
.entry-note { display: flex; align-items: center; justify-content: center; gap: 9px; margin: 20px 0 0; font-size: 10px; color: #779ba9; letter-spacing: .07em; }
.entry-note span { width: 11px; height: 1px; background: #5c8292; }
.scene-footer { position: absolute; z-index: 10; bottom: max(24px, env(safe-area-inset-bottom)); left: 4.5%; right: 4.5%; display: flex; justify-content: space-between; align-items: center; pointer-events: none; color: #698e9e; }
.scene-footer span:first-child { font-size: 8px; letter-spacing: .24em; }
.scene-footer span:last-child { font: 10px var(--serif); letter-spacing: .18em; }
.scene-footer i { font-style: normal; font-size: 15px; margin-left: 13px; }
[data-phase="entering"] .invitation, [data-phase="active"] .invitation { opacity: 0; transform: translateY(-20px); }
[data-phase="entering"] .entry-controls { opacity: 0; transform: translateY(20px); pointer-events: none; }
[data-phase="entering"] .goddess, [data-phase="active"] .goddess { opacity: 1; transform: scale(1.03); filter: drop-shadow(0 0 30px rgba(130, 220, 255, .23)); }
[data-phase="active"] .scene-label { opacity: .55; }
[data-awakened="true"] .goddess { filter: drop-shadow(0 0 35px rgba(146, 233, 255, .48)); }
[data-awakened="true"] .moon-halo { border-color: rgba(189, 241, 255, .37); box-shadow: 0 0 80px rgba(104, 203, 249, .15); }
[data-awakened="true"] .aurora { opacity: 1; }
.active-controls { position: absolute; z-index: 20; width: 330px; left: 9%; bottom: 18%; animation: controls-enter 1s ease both; }
.journey-heading { display: flex; justify-content: space-between; align-items: center; margin-bottom: 13px; }
#sceneName { font: 24px var(--serif); letter-spacing: .24em; color: #dbf2fc; }
.journey-dots { display: flex; gap: 9px; }
.journey-dots i { display: block; width: 5px; height: 5px; transform: rotate(45deg); border: 1px solid #7093a4; transition: background .5s, box-shadow .5s; }
.journey-dots i.is-lit { background: #c7f3ff; border-color: #c7f3ff; box-shadow: 0 0 10px rgba(171, 233, 255, .5); }
.guidance { min-height: 22px; color: #a9c8d7; font: 12px/1.8 var(--serif); letter-spacing: .1em; margin: 0 0 20px; }
.magic-toolbar { display: flex; align-items: center; border: 1px solid var(--line); background: linear-gradient(140deg, rgba(150, 213, 238, .1), rgba(6, 26, 41, .45)); border-radius: 4px; }
.magic-button { flex: 1; padding: 15px 7px 13px; min-height: 106px; background: transparent; display: flex; flex-direction: column; align-items: center; transition: background .3s, color .3s; border-radius: 3px; }
.magic-button svg { width: 27px; height: 27px; color: #b6e4f4; margin-bottom: 6px; transition: transform .4s; }
.magic-button span { font: 14px var(--serif); letter-spacing: .16em; }
.magic-button small { font-size: 9px; color: #7fa4b5; margin-top: 5px; white-space: nowrap; }
.magic-button:hover, .magic-button:active, .magic-button[aria-pressed="true"] { background: rgba(170, 228, 246, .09); color: #e4fcff; }
.magic-button:active svg { transform: scale(1.13); }
.toolbar-divider { width: 1px; height: 35px; background: var(--line); }
.gesture-note { text-align: center; font-size: 10px; letter-spacing: .1em; color: #789bab; margin: 17px 0 0; }
.gesture-note b { font-weight: normal; color: #4c7180; margin: 0 7px; }
.blessing-link { width: 100%; padding: 13px 4px 0; background: transparent; display: flex; justify-content: space-between; align-items: center; font: 13px var(--serif); letter-spacing: .1em; color: #d1f0fa; }
.blessing-link svg { width: 18px; }
.hold-indicator { position: absolute; z-index: 24; width: 80px; height: 80px; transform: translate(-50%, -50%); pointer-events: none; opacity: 0; transition: opacity .15s; }
.hold-indicator.is-holding { opacity: 1; }
.hold-indicator svg { width: 80px; height: 80px; transform: rotate(-90deg); stroke-width: 1.4; }
.hold-track { stroke: rgba(204, 243, 255, .18); }
.hold-progress { stroke: #d2f6ff; stroke-dasharray: 207.35; stroke-dashoffset: 207.35; }
.is-holding .hold-progress { animation: hold-progress var(--hold-time, 1000ms) linear forwards; }
.hold-indicator span { position: absolute; inset: 0; display: grid; place-items: center; font: 11px var(--serif); letter-spacing: .1em; text-shadow: 0 0 10px #3183ac; }
.toast { position: absolute; z-index: 26; top: 17%; left: 50%; transform: translate(-50%, -8px); padding: 10px 22px; max-width: 90%; width: max-content; border: 1px solid rgba(183, 226, 243, .16); border-radius: 40px; background: rgba(6, 27, 41, .85); color: #c7e4f0; font: 12px/1.6 var(--serif); letter-spacing: .1em; opacity: 0; transition: opacity .4s, transform .4s; pointer-events: none; text-align: center; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: max(24px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); animation: modal-enter .5s ease both; overflow-y: auto; }
.modal-backdrop { position: fixed; inset: 0; background: rgba(2, 13, 23, .84); }
@supports (backdrop-filter: blur(6px)) { .modal-backdrop { backdrop-filter: blur(6px); background: rgba(2, 13, 23, .72); } }
.modal-card { position: relative; width: min(100%, 430px); max-height: 100%; overflow-y: auto; padding: 45px 30px 27px; border: 1px solid rgba(178, 223, 241, .29); background: radial-gradient(ellipse at 50% 0, rgba(77, 125, 154, .24), transparent 60%), #0a2131; text-align: center; box-shadow: 0 30px 100px rgba(0, 0, 0, .35); border-radius: 6px; }
.modal-card::before { content: ""; position: absolute; inset: 7px; border: 1px solid rgba(166, 216, 236, .07); pointer-events: none; border-radius: 2px; }
.modal-close { position: absolute; right: 13px; top: 13px; width: 36px; height: 36px; border-color: transparent; background: transparent; }
.modal-close svg { width: 19px; }
.letter-seal { margin: 0 auto 27px; width: 69px; height: 69px; display: grid; place-items: center; border: 1px solid #44697e; transform: rotate(45deg); box-shadow: 0 0 30px rgba(131, 209, 237, .06); }
.letter-seal svg { transform: rotate(-45deg); width: 39px; height: 39px; stroke-width: .9; }
h2 { margin: 0; font: normal 25px/1.5 var(--serif); letter-spacing: .13em; color: #e1f5ff; }
.blessing-card .eyebrow { font-size: 8px; }
.letter-divider { color: #8fb8cb; margin: 19px 0; font: 19px var(--serif); }
.blessing-quote { font: 19px/2.3 var(--serif); color: #d1e9f5; letter-spacing: .08em; margin: 0; }
.blessing-signature { font: 10px/1.8 var(--serif); color: #86a8b9; letter-spacing: .1em; margin: 23px 0 33px; }
.primary-button { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; min-height: 50px; padding: 13px 9px; background: linear-gradient(115deg, #c1e7f1, #e3f6fa); color: #133547; font: 14px var(--serif); letter-spacing: .06em; border-radius: 3px; transition: filter .3s; }
.primary-button:hover, .primary-button:active { filter: brightness(1.1); }
.primary-button svg { width: 18px; height: 18px; }
.text-button { background: transparent; padding: 15px; min-height: 44px; color: #9dc2d4; font: 12px var(--serif); letter-spacing: .14em; }
.text-button span { margin-left: 6px; font-size: 16px; }
.letter-number { display: block; margin-top: 16px; color: #5e8195; font-size: 7px; letter-spacing: .2em; }
.share-modal { z-index: 70; }
.share-card { padding-top: 35px; }
.share-spark { display: block; font: 45px var(--serif); color: #bee5f3; margin-bottom: 17px; }
.share-card .eyebrow { font-size: 8px; }
.share-card h2 { font-size: 23px; }
#shareInstructions { font: 13px/2 var(--serif); color: #9cbfce; margin: 25px 0; }
.share-arrow { position: fixed; right: 21px; top: max(18px, env(safe-area-inset-top)); z-index: 2; width: 95px; font: 12px var(--serif); text-align: center; color: #d2effb; }
.share-arrow svg { width: 80px; height: 105px; display: block; stroke-width: 1.2; }
.copy-status { min-height: 20px; margin: 12px 0 0; color: #b0d0df; font-size: 11px; word-break: break-word; user-select: text; }
.help-card { text-align: left; padding: 40px 27px 25px; }
.help-card .eyebrow { font-size: 8px; }
.help-card h2 { font-size: 24px; }
.help-list { list-style: none; padding: 0; margin: 25px 0; }
.help-list li { display: flex; gap: 16px; padding: 13px 0; border-bottom: 1px solid rgba(149, 200, 221, .1); }
.help-list li > span { color: #6c9eb5; font: 11px/2 Georgia, serif; }
.help-list strong { font: normal 14px var(--serif); letter-spacing: .09em; }
.help-list p { margin: 7px 0 0; font-size: 11px; color: #86a9bb; }
.quality-button { display: flex; justify-content: space-between; width: 100%; padding: 12px 0; background: transparent; font-size: 12px; }
.quality-button span { color: #87c8d4; }
.help-footnote { color: #6e93a7; font-size: 10px; margin: 11px 0 0; }
.noscript { position: fixed; inset: auto 10% 30%; z-index: 90; padding: 30px; background: #0b2c3d; text-align: center; }
.experience.is-low-power .goddess-float, .experience.is-low-power .aurora, .experience.is-low-power .floating-crystal { animation: none; }
.experience.is-low-power .goddess { filter: none; }

@keyframes aurora-flow { from { transform: translate(-4%, -5%) rotate(-25deg) scale(1); } to { transform: translate(7%, 10%) rotate(-15deg) scale(1.12); } }
@keyframes goddess-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes crystal-float { 0%, 100% { transform: translateY(0) rotate(16deg); } 50% { transform: translateY(-17px) rotate(30deg); } }
@keyframes breathe { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes sound-wave { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
@keyframes light-bloom { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .8; } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes controls-enter { from { opacity: 0; transform: translateY(17px); } to { opacity: 1; transform: translateY(0); } }
@keyframes modal-enter { from { opacity: 0; } to { opacity: 1; } }
@keyframes hold-progress { to { stroke-dashoffset: 0; } }

@media (min-width: 1600px) { .invitation, .entry-controls, .active-controls { left: 13%; } }
@media (max-height: 700px) and (min-width: 761px) {
  .invitation { top: 19%; }
  .edition { margin-bottom: 15px; }
  h1 { font-size: 62px; }
  .title-rule { margin: 15px 0 10px; }
  .entry-controls { bottom: 12%; }
}
@media (max-width: 760px) {
  .experience { min-height: 460px; }
  .site-header { left: 23px; right: 19px; top: max(18px, env(safe-area-inset-top)); }
  .brand { gap: 9px; }
  .brand-icon { width: 30px; height: 30px; }
  .brand strong { font-size: 10px; letter-spacing: .25em; }
  .brand small { font-size: 8px; letter-spacing: .24em; }
  .header-actions { gap: 4px; }
  .icon-button { width: 42px; height: 42px; }
  .header-actions .icon-button { background: transparent; border-color: rgba(180, 220, 239, .19); }
  .landscape { background-position: 54% center; background-image: linear-gradient(0deg, rgba(2, 18, 28, .2), rgba(5, 22, 35, .08) 60%), url("./assets/images/sanctuary-mobile.webp"); opacity: .78; }
  .moon-halo { width: 87vw; max-width: 480px; left: 50%; top: 27%; }
  .goddess-position { left: 50%; width: 108vw; max-width: 670px; height: 78%; bottom: 3.5%; }
  .goddess { opacity: .83; }
  .goddess-depth { transform: translate3d(calc(var(--px) * 11px), calc(var(--py) * 7px), 0); }
  .ice-platform { left: 50%; width: 76%; bottom: 6%; }
  .crystal-a { left: 13%; top: 48%; width: 11px; height: 28px; }
  .crystal-b { left: 85%; top: 40%; }
  .crystal-c { left: 83%; top: 67%; width: 17px; height: 35px; }
  .vignette { background: linear-gradient(0deg, rgba(3, 17, 27, .97), rgba(3, 17, 27, .68) 20%, transparent 42%, transparent 73%, rgba(3, 17, 27, .4)), linear-gradient(90deg, rgba(3, 17, 27, .1), transparent); }
  .ritual-light { background: radial-gradient(ellipse at 50% 47%, rgba(216, 252, 255, .58), rgba(130, 213, 248, .12) 40%, transparent 70%); }
  .invitation { top: 13%; left: 0; right: 0; text-align: center; }
  .edition { display: none; }
  .invitation .eyebrow { font-size: 8px; letter-spacing: .32em; margin-bottom: 12px; color: #abc7d7; }
  h1 { font-size: clamp(39px, 10.8vw, 58px); letter-spacing: .19em; padding-left: .19em; line-height: 1.2; }
  h1 span { font-size: 15px; letter-spacing: .54em; margin-top: 12px; color: #a8c8da; }
  .title-rule { width: 125px; margin: 16px auto 0; font-size: 11px; }
  .intro-description { display: none; }
  .scene-label { display: none; }
  .entry-controls { width: calc(100% - 70px); max-width: 360px; left: 50%; transform: translateX(-50%); bottom: max(65px, calc(env(safe-area-inset-bottom) + 45px)); }
  .summon-button { min-height: 76px; padding: 14px 18px; background: linear-gradient(115deg, rgba(123, 191, 219, .17), rgba(77, 142, 172, .05)); }
  .summon-copy strong { font-size: 15px; }
  .summon-copy small { font-size: 7px; }
  .summon-emblem { width: 29px; }
  .summon-emblem svg { width: 29px; }
  .summon-arrow { width: 18px; }
  .entry-note { font-size: 9px; margin-top: 17px; }
  .scene-footer { bottom: max(18px, env(safe-area-inset-bottom)); justify-content: center; }
  .scene-footer span:first-child { font-size: 7px; letter-spacing: .22em; }
  .scene-footer span:last-child { display: none; }
  [data-phase="entering"] .entry-controls { transform: translate(-50%, 20px); }
  .active-controls { width: calc(100% - 48px); max-width: 390px; left: 50%; transform: translateX(-50%); bottom: max(49px, calc(env(safe-area-inset-bottom) + 32px)); animation: mobile-controls-enter 1s ease both; }
  .journey-heading { margin: 0 3px 7px; }
  #sceneName { font-size: 19px; }
  .guidance { font-size: 11px; margin: 0 3px 13px; }
  .magic-button { min-height: 88px; padding: 11px 4px 10px; }
  .magic-button svg { width: 23px; height: 23px; margin-bottom: 4px; }
  .magic-button span { font-size: 13px; }
  .magic-button small { font-size: 8px; margin-top: 4px; }
  .magic-toolbar { background: linear-gradient(130deg, rgba(18, 49, 66, .9), rgba(5, 25, 39, .91)); }
  .journey-heading, .guidance { text-shadow: 0 2px 10px #03111b; }
  .gesture-note { font-size: 9px; margin-top: 12px; }
  .toast { top: 12%; font-size: 11px; }
  .modal-card { padding-left: 24px; padding-right: 24px; }
  .modal-close { width: 36px; height: 36px; }
}
@keyframes mobile-controls-enter { from { opacity: 0; transform: translate(-50%, 15px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (max-width: 380px) {
  .site-header { left: 18px; right: 14px; }
  .entry-controls { width: calc(100% - 48px); }
  .summon-button { gap: 10px; padding-left: 13px; padding-right: 13px; }
  .summon-copy strong { font-size: 14px; }
  .modal { padding-left: 14px; padding-right: 14px; }
  .modal-card { padding-left: 20px; padding-right: 20px; }
  .blessing-quote { font-size: 17px; }
  .share-card h2 { font-size: 20px; }
}
@media (max-height: 690px) and (max-width: 760px) {
  .site-header { top: max(10px, env(safe-area-inset-top)); }
  .invitation { top: 15%; }
  h1 { font-size: 37px; }
  .invitation .eyebrow { font-size: 7px; margin-bottom: 8px; }
  h1 span { margin-top: 8px; font-size: 12px; }
  .title-rule { margin-top: 9px; }
  .goddess-position { height: 77%; bottom: 4%; }
  .entry-controls { bottom: max(43px, calc(env(safe-area-inset-bottom) + 30px)); }
  .summon-button { min-height: 65px; }
  .entry-note { margin-top: 12px; font-size: 8px; }
  .active-controls { bottom: max(34px, calc(env(safe-area-inset-bottom) + 22px)); }
  .magic-button { min-height: 74px; padding-top: 8px; padding-bottom: 7px; }
  .magic-button small { font-size: 7px; }
  .guidance { margin-bottom: 9px; }
  .gesture-note { margin-top: 8px; }
  .scene-footer { bottom: max(10px, env(safe-area-inset-bottom)); }
  .letter-seal { width: 49px; height: 49px; margin-bottom: 20px; }
  .letter-seal svg { width: 31px; }
  .blessing-card { padding-top: 32px; }
  .blessing-signature { margin: 14px 0 22px; }
  .letter-divider { margin: 13px 0; }
  .help-list li { padding-top: 9px; padding-bottom: 9px; }
  .share-arrow { width: 60px; right: 12px; font-size: 10px; }
  .share-arrow svg { width: 50px; height: 65px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  .experience { min-height: 0; }
  .site-header { top: 10px; }
  .invitation { top: 23%; left: 7%; text-align: left; }
  .invitation h1 { font-size: 37px; padding-left: 0; }
  .invitation h1 span { font-size: 13px; }
  .invitation .title-rule { margin-left: 0; }
  .entry-controls { width: 275px; left: 7%; bottom: 43px; transform: none; }
  [data-phase="entering"] .entry-controls { transform: translateY(20px); }
  .entry-note { display: none; }
  .goddess-position { left: 68%; height: 110%; bottom: -12%; width: 50%; }
  .active-controls { left: 6%; width: 300px; bottom: 45px; transform: none; animation: controls-enter 1s both; }
  .scene-footer { bottom: 12px; }
  .toast { top: 16%; left: 65%; }
  .modal-card { max-height: 90vh; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
  .goddess, .invitation, .entry-controls { transition-duration: .1s; }
  .landscape, .goddess-depth { transform: none; }
}
/* V3: the original painted sanctuary opens into the modeled moon realm. */
#auroraCanvas{position:absolute;inset:0;width:100%;height:85%;opacity:.85;mix-blend-mode:screen;pointer-events:none}.aurora{display:none}#goddessStage{position:absolute;left:39%;bottom:1%;width:49%;height:95%;pointer-events:none;opacity:0;transition:opacity 1.4s}.experience[data-model-ready="true"][data-phase="active"] .goddess,.experience[data-model-ready="true"][data-phase="entering"] .goddess{opacity:0}.skill-deck{display:flex;gap:8px;margin:0 0 8px}.skill-deck button{flex:1;min-width:0;padding:12px 4px 10px;border:1px solid #9ac3d866;background:linear-gradient(160deg,#294759ce,#0c2234e8);border-radius:6px;box-shadow:inset 0 0 20px #9bd3e50a;transition:background .3s,transform .3s}.skill-deck b{display:block;font-size:23px;color:#e2cfab;font-weight:400}.skill-deck span{display:block;font:13px var(--serif);letter-spacing:1px;margin:4px 0}.skill-deck small{font-size:9px;color:#9cb8c8;letter-spacing:1px}.skill-deck button.casting{border-color:#e4d1a9;background:#365668}.skill-deck button:active{transform:scale(.96)}.skill-deck button:disabled{cursor:default;opacity:.65}.skill-status{margin:5px 0 12px;font-size:10px;color:#b0c9d8;letter-spacing:2px}.active-controls{bottom:15%}.magic-button{padding-top:8px;padding-bottom:8px}.magic-button svg{width:20px;height:20px}.magic-button span{font-size:11px}.palace-portal{position:absolute;right:28px;bottom:58px;z-index:35;display:flex;align-items:center;gap:12px;padding:15px 22px;border:1px solid #d7c39b77;background:linear-gradient(120deg,#122c3ee8,#263749cc);border-radius:6px;box-shadow:0 0 35px #a3d5ff16;transition:background .3s}.palace-portal:hover{background:#345067}.portal-moon{font-size:35px;color:#eeddb8;line-height:1}.palace-portal strong{display:block;font:16px var(--serif);letter-spacing:4px}.palace-portal small{display:block;color:#a9c1d0;font-size:9px;letter-spacing:1px;margin-top:4px}
@media(max-width:760px){#goddessStage{left:0;width:100%;height:77%;bottom:15%}.palace-portal{right:12px;bottom:18px;padding:8px 12px;gap:6px}.palace-portal strong{font-size:12px;letter-spacing:2px}.palace-portal small{font-size:8px}.portal-moon{font-size:24px}.active-controls{bottom:83px;width:calc(100% - 48px)}.skill-deck button{padding:7px 3px}.skill-deck b{font-size:18px}.skill-deck span{font-size:11px}.skill-deck small{font-size:8px}.skill-status{margin:3px 0 6px;font-size:9px}.magic-button{padding:5px}.magic-button small{font-size:8px}.magic-button svg{width:16px;height:16px}.guidance{margin:0 0 5px}.gesture-note{margin:5px 0}.scene-footer{bottom:20px}.scene-footer>span:last-child{display:none}.journey-heading{margin-bottom:3px}.invitation{pointer-events:none}.skill-deck{gap:6px}}
@media(max-height:700px) and (max-width:760px){.active-controls{bottom:68px}.skill-status,.gesture-note{display:none}.skill-deck button{padding:3px}.magic-button svg{display:none}#goddessStage{height:76%;bottom:18%}}
@media(max-height:550px) and (min-width:761px){.active-controls{bottom:20px}.skill-status,.gesture-note{display:none}.palace-portal{bottom:25px}}
#auroraCanvas{filter:blur(12px)}
/* Full-width stage keeps the figure present while effects breathe across the scene. */
#goddessStage{left:0;right:0;bottom:0;width:100%;height:100%}.ritual-light{background:radial-gradient(ellipse at 63% 45%,rgba(216,252,255,.28),rgba(130,213,248,.06) 40%,transparent 68%)}
.awakening-caption{position:absolute;z-index:18;left:64%;bottom:15%;transform:translateX(-50%);text-align:center;pointer-events:none;width:340px;max-width:90%;animation:awakening-caption-enter 1.5s ease both;text-shadow:0 2px 18px #051523}.awakening-caption>small{font-size:9px;letter-spacing:5px;color:#c7d8e3}.awakening-caption h2{font:36px var(--serif);letter-spacing:13px;margin:12px 0;color:#ecf5ff}.awakening-caption p{font-size:11px;letter-spacing:3px;color:#b6d4e3;margin:8px 0 18px}.awakening-progress{height:1px;width:160px;background:#a4cedb44;margin:auto;overflow:hidden}.awakening-progress span{display:block;height:100%;background:#e5e4d2;transition:width .2s linear}.experience[data-ritual=true] .scene-label{opacity:0}
@media(max-width:760px){#goddessStage{left:0;width:100%;height:100%;bottom:0}.awakening-caption{left:50%;bottom:auto;top:115px;width:300px}.awakening-caption h2{font-size:26px;letter-spacing:10px;margin:8px 0}.awakening-caption>small{font-size:8px;letter-spacing:3px}.awakening-caption p{font-size:10px;margin:4px 0 12px}.experience[data-ritual=true] .active-controls{opacity:.6}.awakening-caption .awakening-progress{width:120px}}
@media(max-height:700px) and (max-width:760px){#goddessStage{height:100%;bottom:0}.awakening-caption{top:90px}.awakening-caption h2{font-size:22px}}

/* Caption fade keeps its horizontal anchor; the generic controls animation overrides transforms. */
@keyframes awakening-caption-enter{from{opacity:0}to{opacity:1}}
@media(max-width:760px){.awakening-caption{width:calc(100% - 48px);text-align:right}.awakening-caption>small{font-size:7px;letter-spacing:2px}.awakening-caption h2{font-size:24px;letter-spacing:7px}.awakening-caption p{font-size:9px;letter-spacing:2px}.awakening-caption .awakening-progress{margin-right:0}}