@font-face{font-family:Pacifico;src:url("../../assets/fonts/Pacifico-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap}
:root{color-scheme:dark;font-family:Inter,"Segoe UI",Arial,sans-serif;color:var(--tone-f7efff,#f7efff);background:var(--tone-030106,#030106);font-synthesis:none;--accent:var(--tone-d5b2ff,#d5b2ff)}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;overflow:hidden}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible{outline:2px solid var(--accent);outline-offset:5px}
#experience,canvas,.vignette{position:fixed;inset:0;width:100%;height:100%}
#experience{background:var(--tone-030106,#030106);touch-action:manipulation;outline:none}
canvas{pointer-events:none}
.preview-watermark{position:absolute;inset:0;pointer-events:none;user-select:none;background:url("../../assets/demo-watermark.svg") repeat;opacity:.13}
#entrance .preview-watermark{opacity:.18;transition:opacity .8s ease}
body[data-entrance="opening"] #entrance .preview-watermark{opacity:0}
@media(prefers-reduced-motion:reduce){#entrance .preview-watermark{transition:none}}
.vignette{pointer-events:none;background:radial-gradient(ellipse at center,transparent 42%,rgba(3,1,6,.4) 100%)}
.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}
#toast{position:fixed;z-index:25;bottom:32px;left:50%;transform:translate(-50%,10px);background:var(--tone-1b1025e8,#1b1025e8);border:1px solid var(--tone-d5b2ff40,#d5b2ff40);border-radius:14px;padding:12px 18px;max-width:85vw;font-size:12px;text-align:center;pointer-events:none;opacity:0;transition:opacity .3s,transform .3s}
#toast.visible{opacity:1;transform:translate(-50%,0)}
noscript{position:fixed;z-index:30;padding:32px}
@media(prefers-reduced-motion:reduce){#toast{transition:none}}
/* Layered, slow-moving mist stays behind the wishes with a clear central reading area. */
.matrix-corner-light{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:0;transition:opacity .9s ease;-webkit-mask-image:linear-gradient(to bottom,#000 24%,transparent 39%,transparent 63%,#000 78%);mask-image:linear-gradient(to bottom,#000 24%,transparent 39%,transparent 63%,#000 78%)}
.matrix-corner-light::before,.matrix-corner-light::after{content:"";position:absolute;width:clamp(240px,38vw,490px);aspect-ratio:1.1;background:radial-gradient(ellipse at 31% 43%,var(--tone-b58ce866,#b58ce866),transparent 48%),radial-gradient(ellipse at 65% 47%,var(--tone-9a6ad54d,#9a6ad54d),transparent 44%),radial-gradient(ellipse at 48% 67%,var(--tone-8761c833,#8761c833),transparent 45%);pointer-events:none;animation:matrix-cloud-drift 20s ease-in-out infinite;animation-play-state:paused}
.matrix-corner-light::before{top:-5%;left:-14%;animation-delay:-6s}
.matrix-corner-light::after{bottom:-5%;right:-14%;animation-duration:24s;animation-delay:-16s;animation-direction:reverse}
.matrix-light-patch{position:absolute;width:clamp(80px,15vw,180px);aspect-ratio:1.1;pointer-events:none;background:radial-gradient(ellipse at 38% 42%,var(--tone-bd94ed66,#bd94ed66),transparent 58%),radial-gradient(ellipse at 65% 60%,var(--tone-9b68d936,#9b68d936),transparent 48%);animation:matrix-patch-breathe 16s ease-in-out infinite;animation-play-state:paused;opacity:.4}
.matrix-light-patch:nth-child(1){left:3%;top:24%;animation-delay:-4s}
.matrix-light-patch:nth-child(2){right:2%;top:19%;animation-duration:20s;animation-delay:-11s;aspect-ratio:1.2}
.matrix-light-patch:nth-child(3){left:5%;bottom:13%;animation-duration:18s;animation-delay:-6s;aspect-ratio:1.2}
.matrix-light-patch:nth-child(4){left:51%;bottom:3%;animation-duration:22s;animation-delay:-14s}
.matrix-light-patch:nth-child(5){left:51%;top:3%;width:clamp(64px,12vw,140px);animation-duration:19s;animation-delay:-5s;aspect-ratio:1.2}
body:is([data-chapter="intro"],[data-chapter="complete"])[data-entrance="complete"] .matrix-corner-light{opacity:1}
body:is([data-chapter="intro"],[data-chapter="complete"])[data-entrance="complete"] .matrix-corner-light::before,body:is([data-chapter="intro"],[data-chapter="complete"])[data-entrance="complete"] .matrix-corner-light::after,body:is([data-chapter="intro"],[data-chapter="complete"])[data-entrance="complete"] .matrix-light-patch{animation-play-state:running}
@keyframes matrix-cloud-drift{0%,100%{opacity:.5;transform:translate3d(-8px,6px,0) rotate(-6deg) scale(.94,1.03)}50%{opacity:.86;transform:translate3d(12px,-7px,0) rotate(5deg) scale(1.08,.98)}}
@keyframes matrix-patch-breathe{0%,100%{opacity:.32;transform:translate3d(-4px,4px,0) scale(.94)}50%{opacity:.78;transform:translate3d(6px,-5px,0) scale(1.08)}}
@media(min-width:700px){.matrix-corner-light::before{top:-7%;left:-6%}.matrix-corner-light::after{bottom:-7%;right:-6%}}
@media(prefers-reduced-motion:reduce){.matrix-corner-light{transition:none}.matrix-corner-light::before,.matrix-corner-light::after,.matrix-light-patch{animation:none;opacity:.55}}
#wish-ending{position:absolute;z-index:5;left:0;right:0;bottom:max(24px,env(safe-area-inset-bottom));text-align:center}
#wish-ending[hidden]{display:none}
body:has(.preview-return) #wish-ending{bottom:48px}
#wish-replay{min-height:44px;padding:0 8px;border:0;border-bottom:1px solid #d8c4e733;background:transparent;color:#e5d5ef;font:13px/1.5 "Segoe UI",sans-serif;cursor:pointer}
#wish-replay span{padding-left:8px}
#wish-replay:focus-visible{outline:2px solid #dfc5f4;outline-offset:4px}