@import"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Jost:wght@300;400;500&display=swap";:root{font-family:Jost,Arial,sans-serif;color:#fff9ed;background:#0d1620;font-synthesis:none;--gold: #e9cc8e;--ease: cubic-bezier(.2,.7,.2,1)}*{box-sizing:border-box}html,body,#app{width:100%;height:100%;margin:0;overflow:hidden}body{overscroll-behavior:none}button{font:inherit}#app{position:relative}canvas{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:manipulation;outline:none}.vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(14,30,40,.32),transparent 48%),linear-gradient(0deg,rgba(12,26,36,.5),transparent 38%)}.ui{position:absolute;inset:0;z-index:5;pointer-events:none}.letterbox{position:absolute;left:0;right:0;height:0;background:#04070b;z-index:3;pointer-events:none;transition:height 1.4s var(--ease)}.letterbox.top{top:0}.letterbox.bottom{bottom:0}body.cinematic .letterbox{height:7.5vh}.vignette{background:linear-gradient(90deg,rgba(40,28,70,.22),transparent 50%),linear-gradient(0deg,rgba(36,24,64,.45),transparent 40%)}.guide,.spirit,.final-photo{position:absolute;left:0;top:0;pointer-events:none;will-change:transform}.guide{border-radius:50%;opacity:0;transition:opacity .8s ease;box-shadow:0 0 0 1px #ffecbe8c,0 0 24px 4px #ffd69659,inset 0 0 24px #ffe2aa40}.guide:before,.guide:after{content:"";position:absolute;inset:-6%;border-radius:50%;border:2px solid rgba(255,226,160,.95);box-shadow:0 0 14px #ffd282e6,inset 0 0 14px #ffd28299;animation:guide-pulse 2.4s ease-out infinite}.guide:after{animation-delay:1.2s}.guide.on{opacity:1}@keyframes guide-pulse{0%{transform:scale(.85);opacity:.9}to{transform:scale(1.35);opacity:0}}.spirit span{position:absolute;inset:0;border-radius:45% 45% 40% 40%;background:radial-gradient(circle at 50% 45%,#fffbe9 0%,#ffd98a 35%,rgba(255,170,90,.55) 60%,transparent 72%);box-shadow:0 0 40px 18px #ffc87873;animation:spirit-float 3s ease-in-out infinite}@keyframes spirit-float{50%{transform:translateY(-10%) scale(1.06)}}.final-photo{object-fit:cover;border-radius:2px;filter:saturate(.95) brightness(1.02);box-shadow:0 0 22px #ffdca08c}.photo-layer{position:absolute;inset:0;z-index:4;display:grid;place-items:center;perspective:1400px;pointer-events:none}.photo-layer[hidden]{display:none}.photo-dim{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,#24183c59,#120c22b8);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.photo-pos,.photo-arc{transform-style:preserve-3d}.photo-card{position:relative;transform-style:preserve-3d;filter:drop-shadow(0 22px 40px rgba(20,10,40,.45))}.photo-face{backface-visibility:hidden;border-radius:6px;padding:clamp(10px,2.4vw,16px);background:linear-gradient(145deg,#fffaf0,#f3e8d6);box-shadow:inset 0 0 0 2px #d9b46a,inset 0 0 0 6px #fffaf0,inset 0 0 0 7px #d9b46a99,0 0 60px #ffd69673}.photo-face.front img{display:block;max-width:min(78vw,560px);max-height:62vh;border-radius:2px}.photo-face.back{position:absolute;inset:0;transform:rotateY(180deg);background:radial-gradient(circle,transparent 28%,rgba(217,180,106,.25) 29%,transparent 31%),radial-gradient(circle,rgba(217,180,106,.35) 0 9%,transparent 10%),linear-gradient(145deg,#f8efe0,#eadbc0)}.scroll{position:absolute;left:50%;top:50%;z-index:2;width:min(80vw,540px);height:min(44vh,380px);translate:-50% -50%;--open: 0;pointer-events:none}.scroll[hidden]{display:none}.scroll-paper{position:absolute;inset:0;clip-path:inset(0 calc(50% - var(--open) * 50%));border-radius:4px;background:radial-gradient(ellipse at center,rgba(255,255,255,.65),transparent 70%),linear-gradient(180deg,#fbf3e3,#f1e3c8);box-shadow:inset 0 0 0 10px #fbf3e3e6,inset 0 0 0 11px #c9a05ab3,inset 0 0 0 15px #fbf3e3e6,inset 0 0 0 16px #c9a05a73,0 20px 60px #140a3280}.scroll-roller{position:absolute;top:-12px;bottom:-12px;width:16px;border-radius:8px;background:linear-gradient(90deg,#8a6424,#f3d68f 45%,#9c7330);box-shadow:0 6px 18px #140a2873}.scroll-roller.left{left:calc(50% - var(--open) * 50% - 8px)}.scroll-roller.right{left:calc(50% + var(--open) * 50% - 8px)}.chapter-card{position:absolute;left:50%;top:21%;z-index:4;transform:translate(-50%,14px);display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center;pointer-events:none;opacity:0;filter:blur(8px);transition:opacity 1.4s var(--ease),transform 1.8s var(--ease),filter 1.4s var(--ease);white-space:nowrap}.chapter-card.show{opacity:1;transform:translate(-50%);filter:blur(0)}.chapter-num{font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--gold);text-shadow:0 0 18px rgba(233,204,142,.7);display:flex;align-items:center;gap:16px}.chapter-num:before,.chapter-num:after{content:"";width:46px;height:1px;background:linear-gradient(90deg,transparent,var(--gold))}.chapter-num:after{background:linear-gradient(-90deg,transparent,var(--gold))}.chapter-title{font-family:Cormorant Garamond,Georgia,serif;font-style:italic;font-size:clamp(34px,4.6vw,64px);font-weight:500;letter-spacing:.02em;text-shadow:0 4px 30px rgba(15,32,44,.75),0 0 40px rgba(255,236,200,.35)}.message-panel{position:absolute;left:max(30px,7vw);top:46%;transform:translateY(-50%);max-width:min(470px,36vw);transition:opacity .7s ease,transform 1s var(--ease)}.message-panel.hidden{opacity:0;transform:translateY(-46%)}.message{font-family:Cormorant Garamond,Georgia,serif;font-size:clamp(27px,3.3vw,52px);line-height:1.14;font-weight:500;letter-spacing:.01em;margin:0;text-wrap:balance;text-shadow:0 3px 26px rgba(16,34,46,.72),0 0 2px rgba(16,34,46,.35)}.word{display:inline-block;opacity:0;filter:blur(10px);transform:translateY(.35em);animation:word-in 1.2s var(--ease) forwards;animation-delay:calc(var(--i) * 75ms + .25s)}@keyframes word-in{to{opacity:1;filter:blur(0);transform:none}}.message.final-greeting{font-size:clamp(43px,5.6vw,82px);max-width:720px}.message-panel.finale{left:50%;top:50%;width:min(440px,66vw);max-width:none;transform:translate(-50%,-50%);text-align:center}.message-panel.finale.hidden{transform:translate(-50%,-46%)}.message-panel.finale .message{color:#34515b;font-size:clamp(30px,2.9vw,43px);text-shadow:0 0 18px rgba(255,250,236,.8)}.message-panel.finale .message.final-greeting{font-size:clamp(42px,4.4vw,64px);color:#8a6a2c}.hint{position:absolute;bottom:max(46px,calc(env(safe-area-inset-bottom) + 38px));left:50%;transform:translate(-50%);text-align:center;font-size:11px;letter-spacing:.3em;text-transform:uppercase;font-weight:500;white-space:nowrap;text-shadow:0 2px 14px #173844,0 0 12px rgba(233,204,142,.5);transition:opacity .6s,transform .8s var(--ease)}.hint:before{content:"";display:block;width:1px;height:30px;background:linear-gradient(transparent,var(--gold));margin:0 auto 13px;animation:hint-line 2.4s ease-in-out infinite;transform-origin:top}@keyframes hint-line{0%,to{transform:scaleY(.45);opacity:.5}50%{transform:scaleY(1);opacity:1}}.hint.hidden{opacity:0;transform:translate(-50%,8px)}.audio-control{position:absolute;right:max(25px,4vw);top:max(23px,env(safe-area-inset-top));z-index:5;pointer-events:auto;border:1px solid rgba(233,204,142,.55);border-radius:50%;width:40px;height:40px;padding:0;background:#14242e40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:#fff9ed;display:grid;place-items:center;cursor:pointer;transition:background .3s,box-shadow .3s}.audio-control:hover,.audio-control:focus-visible{background:#14242e80;box-shadow:0 0 18px #e9cc8e73}.audio-control svg{width:18px;height:18px}.replay{position:absolute;z-index:5;pointer-events:auto;bottom:max(40px,calc(env(safe-area-inset-bottom) + 32px));left:50%;transform:translate(-50%);background:#0a141e40;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(233,204,142,.6);border-radius:999px;padding:11px 26px;color:#fff9ed;text-transform:uppercase;letter-spacing:.26em;font-size:11px;cursor:pointer;text-shadow:0 2px 14px #153440;animation:fade-up 1.6s var(--ease) both;transition:box-shadow .3s,background .3s}.replay:hover,.replay:focus-visible{box-shadow:0 0 24px #e9cc8e8c;background:#0a141e73}.replay[hidden]{display:none}@keyframes fade-up{0%{opacity:0;transform:translate(-50%,12px)}}.loading{position:absolute;inset:0;z-index:10;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#fbf6ea,#e3ecec 55%,#c9dbe0);color:#3e5b66;transition:opacity 1.6s ease,visibility 1.6s ease,filter 1.6s ease}.loading.done{opacity:0;visibility:hidden;filter:blur(10px)}.loading.ready{cursor:pointer}.loading.ready .loading-text{animation:tap-pulse 2.4s ease-in-out infinite}@keyframes tap-pulse{50%{opacity:.45}}.loading.ready .loading-line{visibility:hidden}.loading-inner{text-align:center;padding:30px}.loading-symbol{width:74px;height:74px;border:1px solid rgba(184,146,82,.45);border-radius:50%;margin:0 auto 30px;position:relative;animation:spin 9s linear infinite}.loading-symbol:before{content:"";position:absolute;top:-3px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#c9a35d;box-shadow:0 0 12px #e9cc8e}.loading-symbol:after{content:"";position:absolute;inset:16px;border:1px solid rgba(73,103,112,.45);border-radius:50%}.loading-symbol span{position:absolute;inset:31px;border-radius:50%;background:radial-gradient(#fff6dc,#e2c27f);box-shadow:0 0 20px #f0d39a;animation:breathe 2.4s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes breathe{50%{transform:scale(.7);opacity:.7}}.loading-text{font-family:Cormorant Garamond,Georgia,serif;font-style:italic;font-size:30px;letter-spacing:.02em}.loading-line{width:150px;height:1px;background:#49677038;margin:26px auto 0;overflow:hidden}.loading-line span{display:block;width:0;height:100%;background:linear-gradient(90deg,#c9a35d,#557e85);transition:width .8s}@keyframes fade-in{0%{opacity:0}}@media(max-width:700px){.audio-control{right:25px;top:max(20px,calc(env(safe-area-inset-top) + 12px))}.message-panel{top:auto;bottom:max(132px,calc(env(safe-area-inset-bottom) + 112px));left:28px;right:28px;max-width:none;transform:none}.message-panel.hidden{transform:translateY(10px)}.message{font-size:clamp(30px,8vw,42px);line-height:1.08}.message.final-greeting{font-size:clamp(43px,12vw,62px)}.message-panel.finale{inset:50% auto auto 50%;width:min(68vw,340px)}.message-panel.finale .message{font-size:clamp(25px,6vw,35px)}.message-panel.finale .message.final-greeting{font-size:clamp(32px,9vw,49px)}.hint{bottom:max(43px,calc(env(safe-area-inset-bottom) + 32px));font-size:10px}.vignette{background:linear-gradient(0deg,rgba(14,28,38,.62),transparent 50%),linear-gradient(180deg,rgba(14,28,38,.18),transparent 20%)}.chapter-card{top:17%}.chapter-num:before,.chapter-num:after{width:28px}body.cinematic .letterbox{height:5vh}}@media(prefers-reduced-motion:reduce){.message-panel,.hint,.loading,.chapter-card{transition-duration:.2s}.word{animation-duration:.3s;animation-delay:0s;filter:none}.loading-symbol,.loading-symbol span,.hint:before{animation:none}}