@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Italiana&family=Noto+Naskh+Arabic:wght@500&display=swap";:root{color:#f8fff9;font-synthesis:none;background:#03271f;font-family:DM Sans,sans-serif}*{box-sizing:border-box}html,body,#app{min-height:100%;margin:0}body{background:#03271f;min-width:320px;min-height:100svh;overflow:hidden}button{font:inherit;color:inherit}main{isolation:isolate;background:radial-gradient(circle at 50% 110%,#18755855,#0000 38%),linear-gradient(145deg,#03271f,#063b2e 48%,#021f19);min-height:100svh;position:relative;overflow:hidden}.atmo,.rain{pointer-events:none;position:fixed;inset:0;overflow:hidden}.atmo{z-index:-1}.rain{z-index:20}.atmo>i{aspect-ratio:1;filter:blur(80px);opacity:.22;background:#2ab180;border-radius:50%;width:42vw;animation:15s ease-in-out infinite alternate drift;position:absolute;top:-20vw;left:-18vw}.atmo>i:nth-child(2){opacity:.12;background:#b69a4e;animation-direction:alternate-reverse;inset:auto -18vw -22vw auto}.pattern{opacity:.055;background-image:linear-gradient(30deg,#eadba9 12%,#0000 12.5% 87%,#eadba9 87.5%,#eadba9),linear-gradient(150deg,#eadba9 12%,#0000 12.5% 87%,#eadba9 87.5%,#eadba9),linear-gradient(30deg,#eadba9 12%,#0000 12.5% 87%,#eadba9 87.5%,#eadba9),linear-gradient(150deg,#eadba9 12%,#0000 12.5% 87%,#eadba9 87.5%,#eadba9);background-position:0 0,0 0,40px 70px,40px 70px;background-size:80px 140px;position:absolute;inset:-20%;-webkit-mask-image:linear-gradient(120deg,#000,#0000 35% 65%,#000);mask-image:linear-gradient(120deg,#000,#0000 35% 65%,#000)}.stars{opacity:.5;background:radial-gradient(circle at 9% 19%,#fff 0 1px,#0000 1.5px),radial-gradient(circle at 22% 73%,#eadba9 0 1px,#0000 1.5px),radial-gradient(circle at 70% 13%,#fff 0 1px,#0000 1.5px),radial-gradient(circle at 91% 68%,#fff 0 1px,#0000 1.5px);animation:5s infinite pulse;position:absolute;inset:0}@keyframes drift{to{transform:translate(10vw,10vh)scale(1.15)}}@keyframes pulse{50%{opacity:.2}}.intro{text-align:center;flex-direction:column;justify-content:center;align-items:center;min-height:100svh;padding:25px;display:flex}.orn{color:#d8b765;align-items:center;gap:12px;font-size:11px;display:flex}.orn span{background:linear-gradient(90deg,#0000,#d8b765);width:52px;height:1px}.orn span:last-child{transform:rotate(180deg)}.arabic{color:#eadba9;margin:8px 0 0;font-family:Noto Naskh Arabic,serif;font-size:28px}.intro>small{color:#ffffff70;letter-spacing:.25em;margin:2px 0 22px;font-size:9px}.envelope{aspect-ratio:1.45;cursor:pointer;filter:drop-shadow(0 28px 34px #0005);background:0 0;border:0;width:min(285px,76vw);padding:0;transition:all .45s;position:relative;transform:rotate(-2deg)}.envelope:hover{transform:translateY(-7px)rotate(0)scale(1.02)}.envelope>span{position:absolute}.paper{z-index:1;color:#174b3a;background:#fbfaf1;border-radius:5px;flex-direction:column;justify-content:center;align-items:center;transition:all .5s;display:flex;inset:-8% 10% 18%}.envelope:hover .paper{transform:translateY(-10px)}.paper small{letter-spacing:.22em;font-size:7px}.paper strong{margin:6px;font:24px Italiana,serif}.paper em{color:#64766e;font:12px Italiana,serif}.front{z-index:3;clip-path:polygon(0 28%,50% 68%,100% 28%,100% 100%,0 100%);background:linear-gradient(145deg,#f7f4e6,#dcd5bf);border-radius:7px;inset:0}.flap{z-index:2;clip-path:polygon(0 0,100% 0,50% 61%);background:linear-gradient(165deg,#fbf8eb,#dbd3bc);border-radius:7px;inset:0}.seal{z-index:4;color:#eadba9;background:radial-gradient(circle at 35% 25%,#277a5d,#0a4031);border-radius:50%;place-items:center;width:45px;height:45px;font:22px Noto Naskh Arabic;display:grid;top:53%;left:50%;transform:translate(-50%,-50%);box-shadow:0 5px 12px #0004,inset 0 0 0 2px #eadba944}.intro h1{letter-spacing:-.04em;margin:25px 0 0;font:400 clamp(42px,7vw,66px)/.95 Italiana,serif}.intro h1 em{color:#eadba9}.intro>p:not(.arabic){color:#eef8f099;margin:13px auto 19px;font-size:13px}.open{color:#123c30;cursor:pointer;background:linear-gradient(135deg,#fffef5,#e6dfc6);border:1px solid #eadba966;border-radius:99px;align-items:center;gap:13px;min-height:47px;padding:0 17px 0 22px;font-size:13px;font-weight:700;transition:all .25s;display:flex;box-shadow:0 12px 25px #0003}.open:hover{transform:translateY(-2px)}.open b{font-size:22px;font-weight:400}.story{width:min(100%,1100px);min-height:100svh;padding:max(22px,env(safe-area-inset-top)) 26px max(13px,env(safe-area-inset-bottom));grid-template-rows:auto 1fr auto auto;margin:auto;display:grid}.story header{color:#f1f9f3b8;letter-spacing:.17em;justify-content:space-between;align-items:center;font-size:10px;font-weight:700;display:flex}.story header div{align-items:center;gap:9px;display:flex}.story header>span{color:#eadba9}.moon{background:#d8b765;border-radius:50%;width:17px;height:17px;position:relative}.moon:after{content:"";background:#06382c;border-radius:50%;width:15px;height:15px;position:absolute;top:-2px;left:5px}.stage{place-items:center;min-height:0;display:grid;position:relative}.arch{border:1px solid #eadba933;border-radius:52% 52% 24px 24px/35% 35% 24px 24px;width:min(76vw,570px);position:absolute;top:3%;bottom:2%;left:50%;transform:translate(-50%)}.arch:after{content:"";border-radius:inherit;border:1px solid #eadba914;position:absolute;inset:12px}.arch>i{color:#d8b765;background:#06362b;padding:0 13px;font-style:normal;position:absolute;top:-8px;left:50%;transform:translate(-50%)}article{z-index:2;text-align:center;width:min(100%,600px);padding:43px 30px 31px;position:relative}.tag{color:#eadba9;letter-spacing:.24em;text-transform:uppercase;justify-content:center;align-items:center;gap:10px;margin-bottom:17px;font-size:8px;font-weight:700;display:flex}.tag span{background:#d8b76588;width:24px;height:1px}.symbol{color:#eadba9;background:radial-gradient(circle at 35% 28%,#fff2,#0f5b4544);border:1px solid #eadba944;border-radius:50%;place-items:center;width:84px;height:84px;margin:0 auto 21px;font:43px Italiana,serif;display:grid;position:relative;box-shadow:0 16px 35px #0003,inset 0 0 0 7px #fff1}.symbol:after{content:"";border:1px solid #eadba919;border-radius:50%;position:absolute;inset:7px}.symbol>i{font:11px serif;position:absolute;top:10px;right:12px}.symbol.heart{animation:1.7s infinite beat}@keyframes beat{15%,35%{transform:scale(1.1)}25%,45%{transform:scale(1)}}article h2{letter-spacing:-.04em;margin:0;font:400 clamp(40px,6vw,65px)/.94 Italiana,serif}article h2 em{color:#eadba9}article>p{color:#eff8f1ad;text-wrap:balance;max-width:535px;margin:20px auto 0;font-size:clamp(14px,1.6vw,16px);line-height:1.7}.note{margin-top:14px;font:italic 15px Italiana,serif;display:block}.sign{color:#eadba9;margin-top:13px;font:italic 19px Italiana,serif;display:block}footer{z-index:4;grid-template-columns:46px 1fr 46px;align-items:center;gap:16px;width:min(100%,530px);margin:auto;display:grid}footer>button{color:#eadba9;cursor:pointer;background:#fff1;border:1px solid #eadba944;border-radius:50%;width:46px;height:46px;padding:0;font:28px Georgia;transition:all .2s}footer>button:hover:not(:disabled){color:#174838;background:#f7f7ec}footer>button:disabled{opacity:.17}nav{gap:7px;display:flex}nav button{cursor:pointer;background:0 0;border:0;flex:1;height:22px;padding:0;position:relative}nav i{background:#ffffff20;border-radius:9px;height:2px;position:absolute;top:10px;left:0;right:0;overflow:hidden}nav i:after{content:"";transform-origin:0;background:#d8b765;transition:all .5s;position:absolute;inset:0;transform:scaleX(0)}nav button.on i:after{transform:scaleX(1)}nav button.now i{height:3px;box-shadow:0 0 9px #d8b76577}.hint{text-align:center;color:#fff4;letter-spacing:.12em;margin-top:7px;font-size:8px}.rain b{top:-25px;left:var(--x);color:var(--c);font-size:var(--s);opacity:0;animation:fall var(--d) linear forwards;font-weight:400;position:absolute}@keyframes fall{8%{opacity:.8}to{opacity:0;transform:translate3d(var(--v),110svh,0) rotate(480deg)}}.intro-leave-active{transition:all .7s}.intro-leave-to{opacity:0;filter:blur(14px);transform:scale(1.08)}.story-enter-active{transition:all .8s .25s}.story-enter-from{opacity:0;transform:scale(.96)}.page-next-enter-active,.page-next-leave-active,.page-prev-enter-active,.page-prev-leave-active{transition:all .4s cubic-bezier(.22,1,.36,1)}.page-next-enter-from,.page-prev-leave-to{opacity:0;filter:blur(5px);transform:translate(30px)}.page-next-leave-to,.page-prev-enter-from{opacity:0;filter:blur(5px);transform:translate(-30px)}@media (height<=750px){.orn,.arabic{display:none}.intro>small{margin-bottom:14px}.envelope{width:min(225px,64vw)}.intro h1{margin-top:18px;font-size:44px}.intro>p:not(.arabic){margin:9px auto 14px}.story{padding-top:14px}article{padding-top:25px;padding-bottom:18px}.symbol{width:66px;height:66px;margin-bottom:13px;font-size:34px}article h2{font-size:clamp(34px,5vw,51px)}article>p{margin-top:13px;line-height:1.53}.note{margin-top:9px}}@media (width<=600px){.story{padding-left:14px;padding-right:14px}.arch{width:calc(100% - 7px);top:5%}article{padding:32px 24px 25px}.symbol{width:74px;height:74px;margin-bottom:16px}article h2{font-size:clamp(38px,11vw,50px)}article>p{font-size:14px;line-height:1.62}footer{gap:9px}.pattern{-webkit-mask-image:linear-gradient(120deg,#000,#0000 45% 55%,#000);mask-image:linear-gradient(120deg,#000,#0000 45% 55%,#000)}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:.01ms!important;animation-duration:.01ms!important}}