@import "https://fonts.googleapis.com/css2?family=Neucha&family=Nunito+Sans:wght@400;600&display=swap";:root{font-synthesis:none;text-rendering:optimizelegibility}*{box-sizing:border-box}body{min-width:320px;margin:0}#root{min-height:100dvh}.night{--ink:#f9ebcf;--paper-blue:#26345d;color:var(--ink);isolation:isolate;background:radial-gradient(at 78% 8%,#526399 0,#3b4e83 14%,#0000 36%),radial-gradient(at 50% 100%,#343a68 0,#0000 40%),linear-gradient(165deg,#303d70 0%,#202d55 45%,#111a34 100%);min-height:100dvh;position:relative;overflow:hidden}.night__grain{mix-blend-mode:soft-light;opacity:.18;pointer-events:none;z-index:4;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");position:absolute;inset:0}.night__horizon{opacity:.56;z-index:0;background:linear-gradient(#0000,#0f173029),#1d294d;border-radius:50% 50% 0 0/20% 20% 0 0;width:128%;height:28vh;position:absolute;bottom:-8vh;left:-14%;transform:rotate(-3deg)}.night__horizon:after{content:"";background:#15203c;border-radius:50% 50% 0 0/18% 18% 0 0;width:116%;height:22vh;position:absolute;top:6vh;left:-8%;transform:rotate(5deg)}.night__clouds{pointer-events:none;z-index:0;position:absolute;inset:0;overflow:hidden}.night__clouds i{filter:blur(1px);background:#b5c3e817;border-radius:50%;width:210px;height:70px;position:absolute;top:33%;left:-32px}.night__clouds i:after{background:inherit;content:"";border-radius:50%;width:140px;height:88px;position:absolute;top:-25px;left:76px}.night__clouds i:nth-child(2){opacity:.7;top:46%;left:auto;right:-95px;transform:scale(.72)}.night__moon{background:#fff2c8;border-radius:50%;width:48px;height:48px;position:absolute;top:9%;right:13%;box-shadow:0 0 0 10px #fff2c80d,0 0 55px 6px #ffe7aa33}.night__moon:after{content:"";background:#33436f;border-radius:50%;width:46px;height:46px;position:absolute;top:-7px;left:17px}.night__stars{pointer-events:none;position:absolute;inset:0}.night__star{opacity:.86;background:#fff3ca;border-radius:50%;width:3px;height:3px;position:absolute;top:17%;left:13%;box-shadow:0 0 9px #fff3ca}.night__star:nth-child(2){top:30%;left:77%}.night__star:nth-child(3){top:39%;left:26%}.night__star:nth-child(4){top:55%;left:89%}.night__star:nth-child(5){top:58%;left:8%}.night__star:nth-child(6){top:17%;left:64%}.night__star--large{width:5px;height:5px}.night__copy{text-align:center;z-index:5;width:min(90%,440px);position:absolute;top:max(12vh,84px);left:50%;transform:translate(-50%)}.night__caption{color:#e4bad0;letter-spacing:.12em;opacity:0;text-transform:uppercase;margin:0 0 16px;font-family:Nunito Sans,sans-serif;font-size:.76rem;font-weight:600;transform:translateY(12px)}.night h1{letter-spacing:.01em;text-shadow:0 2px 1px #080f2426;margin:0;font-family:Neucha,cursive;font-size:clamp(2rem,8.7vw,3.2rem);font-weight:400;line-height:1.04}.night__copy h1{opacity:0;transform:translateY(18px)}.night__house{opacity:.98;z-index:1;width:min(90vw,500px);height:27vh;position:absolute;bottom:-1px;left:50%;transform:translate(-50%)}.night__wall{background:#303456;width:70%;height:72%;position:absolute;bottom:0;left:15%;box-shadow:inset 0 8px #ffffff0a}.night__roof{clip-path:polygon(0 100%,50% 0,100% 100%);background:#252946;width:86%;height:112px;position:absolute;bottom:69%;left:7%}.night__chimney{background:#292d4c;width:37px;height:64px;position:absolute;top:4%;right:21%}.night__window{background:#171c37;border:5px solid #272b4a;width:46px;height:57px;position:absolute;top:32%;left:28%;box-shadow:inset 0 0 0 2px #4d4a68}.night__window:before,.night__window:after{content:"";background:#4d4a68;position:absolute}.night__window:before{width:100%;height:3px;top:23px;left:0}.night__window:after{width:3px;height:100%;top:0;left:18px}.night__window-glow{opacity:0;background:#ffd47e;left:auto;right:28%;box-shadow:0 0 25px 5px #ffbe5f4d}.night__bush{background:#1a2440;border-radius:50% 50% 0 0;width:130px;height:60px;position:absolute;bottom:0}.night__bush--left{left:0}.night__bush--right{right:0}.night__envelope-wrap{z-index:3;width:min(56vw,310px);position:absolute;top:59%;left:50%;transform:translate(-50%,-50%)}.night__envelope-flight{opacity:0;transform-origin:50% 100%;will-change:transform, opacity}.night__envelope{filter:drop-shadow(0 14px 16px #070c1e52);width:100%;display:block;position:relative}.night__envelope-shadow{filter:blur(9px);background:#070c1e66;border-radius:50%;width:68%;height:18px;position:absolute;bottom:-11px;left:16%;transform:scaleX(.94)}.night__wax-seal-anchor{aspect-ratio:1;opacity:0;will-change:transform, opacity;z-index:7;width:19%;position:absolute;top:71.5%;left:50%;transform:translate(-50%,-50%)}.night__wax-seal{aspect-ratio:1;touch-action:none;will-change:transform, opacity;background:radial-gradient(circle at 34% 28%,#f0a4a7,#c8697d 58%,#9f4965);border:3px solid #e58b98;border-radius:48% 52% 45% 55%/52% 44% 56% 48%;justify-content:center;align-items:center;width:100%;display:flex;position:absolute;box-shadow:inset 0 0 0 2px #84375359,0 5px 8px #3a1a3047}.night__wax-seal--ready{cursor:grab;filter:drop-shadow(0 0 7px #f5beaa6b);animation:1.8s ease-in-out infinite seal-ready}.night__wax-seal--ready:active{cursor:grabbing}.night__wax-seal:before{content:"";border:1px solid #ffd2bc80;border-radius:50%;position:absolute;inset:5px}.night__wax-seal span{color:#f5ce9c;text-shadow:0 1px #6a2d457a;font-family:Neucha,cursive;font-size:clamp(1rem,4.8vw,1.42rem);line-height:1;transform:rotate(-8deg)}.night__seal-instruction{color:#f4d6db;opacity:0;pointer-events:none;text-align:center;text-shadow:0 2px 8px #0d122a61;white-space:nowrap;z-index:8;margin:0;font-family:Neucha,cursive;font-size:clamp(1rem,4.5vw,1.28rem);position:absolute;top:104%;left:50%;transform:translate(-50%,9px)}@keyframes seal-ready{50%{filter:drop-shadow(0 0 12px #ffc6b3ad)brightness(1.06)}}.night__opened-envelope{opacity:0;perspective:900px;pointer-events:none;transform-origin:50% 100%;position:absolute;inset:0}.night__open-pocket{filter:drop-shadow(0 14px 16px #070c1e52);transform-origin:50% 100%;z-index:3;background:linear-gradient(160deg,#f8e8c9,#dfc091);border-radius:0 0 4px 4px;width:100%;height:82%;position:absolute;top:18%;left:0;overflow:hidden}.night__open-pocket:before,.night__open-pocket:after{content:"";position:absolute;inset:0}.night__open-pocket:before{clip-path:polygon(0 0,53% 53%,0 100%);background:linear-gradient(150deg,#fff2d7,#e5c79b)}.night__open-pocket:after{clip-path:polygon(100% 0,47% 53%,100% 100%);background:linear-gradient(210deg,#f6e4c4,#dbb987)}.night__flap{clip-path:polygon(0 0,100% 0,50% 100%);filter:drop-shadow(0 5px 4px #66403a1f);transform-origin:50% 0;will-change:transform, opacity;z-index:4;background:linear-gradient(158deg,#fff4dc,#e4c394);width:100%;height:55%;position:absolute;top:18%;left:0}.night__letter{opacity:0;transform-origin:50% 100%;z-index:2;width:72%;position:absolute;bottom:8%;left:14%}.night__letter img{filter:drop-shadow(0 10px 13px #070c1e40);width:100%;display:block}.night__letter-message{color:#875166;opacity:0;text-align:center;width:78%;margin:0;font-family:Neucha,cursive;font-size:clamp(1.4rem,6vw,2rem);line-height:.95;position:absolute;top:49%;left:50%;transform:translate(-50%,12px)}.story{opacity:0;z-index:8;position:absolute;inset:0;overflow:hidden}.story__paper{filter:drop-shadow(0 -8px 22px #060a1d33);z-index:1;width:min(92vw,520px);position:absolute;bottom:-8dvh;left:50%;transform:translate(-50%)rotate(-1deg)}.story__card{box-sizing:border-box;max-width:490px;height:100%;padding:max(3.5vh, 24px) 8vw calc(76px + env(safe-area-inset-bottom));z-index:3;margin:0 auto;position:relative}.story__stamp{width:52vw;max-width:210px;height:min(27dvh,230px);margin:0 auto;position:relative;transform:rotate(-3deg)}.story__photo{object-fit:cover;background:linear-gradient(140deg,#d7c6a7,#af9c80);width:78%;height:84%;position:absolute;top:8%;left:50%;transform:translate(-50%)}.story__photo--empty{color:#5c413ead;text-align:center;justify-content:center;align-items:center;font-family:Neucha,cursive;font-size:1.5rem;line-height:.9;display:flex}.story__frame{object-fit:fill;pointer-events:none;width:100%;height:100%;position:absolute;inset:0}.story__pin{z-index:2;background:#c66e81;border:2px solid #f3b7bb;border-radius:50%;width:18px;height:18px;position:absolute;top:3%;left:11%;transform:rotate(11deg);box-shadow:0 3px 5px #32182a47}.story__pin:after{content:"";background:#8e5966;width:2px;height:28px;position:absolute;top:12px;left:7px;transform:rotate(19deg)}.story__copy{color:#765265;text-align:center;max-width:345px;margin:0 auto;padding-top:min(3dvh,24px);position:relative}.story__meta{color:#9a6376;letter-spacing:.08em;text-transform:uppercase;justify-content:center;align-items:baseline;gap:7px;margin:0 auto 8px;font-family:Nunito Sans,sans-serif;font-size:.64rem;font-weight:700;display:flex}.story__meta:before,.story__meta:after{content:"";background:linear-gradient(90deg,#0000,#a15e7280);width:16px;height:1px}.story__meta:after{background:linear-gradient(90deg,#a15e7280,#0000)}.story__meta span{isolation:isolate;white-space:nowrap;z-index:0;padding-bottom:2px;position:relative}.story__meta span:after{content:"";z-index:-1;background:#ebaeb694;width:62%;height:.26em;position:absolute;bottom:1px;left:1px;transform:rotate(-1.5deg)}.story__meta strong{color:#6d3853;letter-spacing:0;text-transform:none;padding:0 4px 2px;font-family:Neucha,cursive;font-size:1.34rem;font-weight:400;line-height:1}.story h2{color:#74465c;margin:0 0 9px;font-family:Neucha,cursive;font-size:clamp(1.72rem,7.8vw,2.55rem);font-weight:400;line-height:.96}.story__text-scroll{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;scrollbar-color:#975d7273 transparent;max-height:38dvh;padding:2px 7px 12px;overflow-y:auto}.story__text{white-space:pre-line;margin:0;font-family:Neucha,cursive;font-size:clamp(1.1rem,5vw,1.5rem);line-height:1.14}.story__next{bottom:max(18px, calc(env(safe-area-inset-bottom) + 10px));color:#74465ccc;cursor:pointer;z-index:12;background:#fff5ded1;border:0;border-radius:48% 52% 46% 54%/58% 42%;padding:8px 15px;font-family:Neucha,cursive;font-size:1.12rem;position:fixed;left:50%;transform:translate(-50%);box-shadow:0 3px 12px #5934481f}.story__next span{font-family:Nunito Sans,sans-serif;transition:transform .2s;display:inline-block}.story__next:active span{transform:translate(3px)}.story--final:after{content:"";pointer-events:none;z-index:2;background:linear-gradient(#ffd5dc0d,#fcbfca21);position:absolute;inset:0}.final-effects{pointer-events:none;z-index:5;position:absolute;inset:0;overflow:hidden}.final-effects__wash{opacity:0;background:radial-gradient(circle at 50% 42%,#ffe0be57,#0000 46%),linear-gradient(#f6b7cd26,#ffdab138);position:absolute;inset:0}.final-effects__glow{filter:blur(5px);opacity:0;background:radial-gradient(circle,#ffeeccb3,#f4a6c242 42%,#0000 72%);border-radius:50%;width:min(118vw,650px);height:min(118vw,650px);position:absolute;top:40%;left:50%;transform:translate(-50%,-50%)}.final-burst{width:150px;height:150px;position:absolute;top:48%;left:50%;transform:translate(-50%,-50%)}.final-burst__heart{color:#e87198;filter:drop-shadow(0 0 14px #ffdecce6);opacity:0;font-family:Georgia,serif;font-size:4.4rem;line-height:1;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.final-burst__ring{opacity:0;border:2px solid #ffd2c8b8;border-radius:50%;width:100%;height:100%;position:absolute;inset:0}.final-heart{color:#f08ca9;filter:drop-shadow(0 0 6px #ffdcbe9e);mix-blend-mode:screen;opacity:0;will-change:transform, opacity;font-family:Georgia,serif;line-height:1;position:absolute;bottom:0}.final-heart:nth-child(3n){color:#ffc2bd}.final-heart:nth-child(4n){color:#e6709c}.final-heart:nth-child(5n){color:#ffd09e}.final-heart--spark{color:#ffe2a8;filter:drop-shadow(0 0 8px #ffe29ee6)}.night__hint-wrap{opacity:0;will-change:transform, opacity;z-index:7;position:absolute;bottom:max(7vh,36px);left:50%;transform:translate(-50%,14px)}.night__hint{color:#542d43;cursor:pointer;background:#efc4a9;border:0;border-radius:47% 53% 46% 54%/55% 45%;min-height:57px;padding:10px 26px 13px;font-family:Neucha,cursive;font-size:1.38rem;position:relative;transform:rotate(-1.5deg);box-shadow:2px 4px #9f5d68,-2px -2px #ffdfbd,0 8px 18px #05091b33}.night__hint:before{border-radius:inherit;content:"";pointer-events:none;border:1.5px solid #70374b85;position:absolute;inset:4px}.night__hint span{position:relative}@media (height<=690px){.night__copy{top:9vh}.night__house{height:25vh}.night__envelope-wrap{width:min(52vw,285px);top:56%}.night__hint-wrap{bottom:22px}.story__card{padding-top:max(2.2dvh,14px)}.story__stamp{width:min(46vw,176px);height:min(23dvh,178px)}.story__copy{padding-top:10px}.story__meta{margin-bottom:5px}.story h2{margin-bottom:6px;font-size:clamp(1.55rem,7vw,2.1rem)}.story__text-scroll{max-height:43dvh}.story__text{font-size:clamp(1.04rem,4.7vw,1.34rem)}}@media (width<=370px){.story__card{padding-left:7vw;padding-right:7vw}.story__stamp{width:48vw}.story__text-scroll{padding-left:4px;padding-right:4px}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}