@import url('https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&family=Cairo:wght@400;500;600;700&display=swap');
:root{--night:#080910;--navy:#10172b;--violet:#30204d;--purple:#7655a8;--lav:#b9a6d8;--moon:#e8e5f0;--silver:#a9a7b5}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--night)}body{margin:0;min-height:100%;background:var(--night);color:var(--moon);font-family:'Cairo',sans-serif;overflow-x:hidden}
.universe{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(48,32,77,.38),transparent 45%),linear-gradient(160deg,#080910 5%,#0c1020 52%,#090910)}
#starfield{position:absolute;inset:0;width:100%;height:100%;opacity:.9}.nebula{position:absolute;border-radius:50%;filter:blur(65px);mix-blend-mode:screen;opacity:.22;animation:drift 24s ease-in-out infinite alternate}
.n1{width:55vw;height:42vw;min-width:300px;min-height:260px;top:7%;left:-18%;background:radial-gradient(ellipse,rgba(118,85,168,.55),transparent 68%)}
.n2{width:60vw;height:48vw;min-width:330px;min-height:270px;right:-22%;top:36%;background:radial-gradient(ellipse,rgba(48,32,77,.85),transparent 68%);animation-delay:-8s}
.n3{width:50vw;height:38vw;min-width:280px;min-height:240px;left:24%;bottom:-20%;background:radial-gradient(ellipse,rgba(32,49,87,.65),transparent 70%);animation-delay:-13s}
.horizon{position:absolute;width:100%;height:38%;bottom:-25%;background:radial-gradient(ellipse,rgba(118,85,168,.12),transparent 70%);filter:blur(35px)}
.grain{position:absolute;inset:0;opacity:.05;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='.35'/%3E%3C/svg%3E")}
.shell{position:relative;z-index:1;width:min(100% - 36px,780px);margin:auto}.topmark{display:flex;justify-content:center;align-items:center;gap:13px;padding:28px 0 0;color:rgba(185,166,216,.56);font-size:9px;letter-spacing:3px;direction:ltr}.topmark i{font-style:normal;color:var(--lav)}
.intro{min-height:calc(100svh - 70px);min-height:650px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;position:relative;padding:65px 0 85px}
.eyebrow,.section-kicker{color:var(--lav);font-size:13px;letter-spacing:1px;margin:0 0 18px}.intro h1{font:400 clamp(48px,9vw,82px)/1.25 'Amiri',serif;margin:0;color:#f0edf7;text-shadow:0 0 35px rgba(185,166,216,.12)}
h1 em,h2 em{font-style:normal;color:#c6b2e4;text-shadow:0 0 30px rgba(118,85,168,.35)}.intro-copy{font:clamp(20px,4vw,25px)/1.9 'Amiri',serif;color:rgba(232,229,240,.67);margin:22px 0 32px}
.open-button{border:1px solid rgba(185,166,216,.48);color:var(--moon);background:linear-gradient(135deg,rgba(118,85,168,.2),rgba(16,23,43,.35));border-radius:999px;padding:13px 28px;min-height:52px;display:flex;align-items:center;gap:14px;cursor:pointer;box-shadow:0 0 28px rgba(118,85,168,.12),inset 0 0 18px rgba(185,166,216,.04);transition:.3s}
.open-button:active{transform:scale(.97)}.open-button:hover{border-color:rgba(213,196,239,.8);box-shadow:0 0 38px rgba(118,85,168,.24)}.open-button b{font-size:19px;color:var(--lav)}
.hint{position:absolute;bottom:27px;color:rgba(169,167,181,.55);font-size:11px}.hint span{display:block;color:var(--lav);font-size:18px;margin-top:4px;animation:bob 2s infinite}
.orbit{position:absolute;border:1px solid rgba(185,166,216,.08);border-radius:50%;pointer-events:none}.o1{width:min(80vw,650px);height:210px;transform:rotate(-25deg)}.o2{width:min(92vw,760px);height:290px;transform:rotate(24deg);border-color:rgba(118,85,168,.07)}
.floating-star{position:absolute;top:19%;right:16%;font-size:28px;color:rgba(211,196,239,.8);text-shadow:0 0 22px var(--lav);animation:twinkle 4s infinite}
.hidden{display:none}.letter-section{padding:10px 0 35px;animation:sectionIn 1.1s ease both}.divider{display:flex;align-items:center;justify-content:center;gap:15px;margin:5px auto 30px;color:var(--lav)}.divider span{height:1px;width:75px;background:linear-gradient(90deg,transparent,rgba(185,166,216,.45))}
.section-kicker{text-align:center;margin-bottom:5px}.letter-section>h2{text-align:center;font:400 37px 'Amiri',serif;margin:0}.soft-intro{text-align:center;color:rgba(169,167,181,.78);font-size:13px;margin:4px 0 34px}
.photo-frame{width:min(100%,470px);margin:0 auto 42px;padding:11px;border:1px solid rgba(202,184,231,.42);border-radius:23px;background:linear-gradient(135deg,rgba(255,255,255,.10),rgba(118,85,168,.08) 45%,rgba(255,255,255,.025));box-shadow:0 18px 65px rgba(0,0,0,.28),0 0 40px rgba(118,85,168,.12),inset 0 0 24px rgba(255,255,255,.035);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);position:relative;overflow:hidden}
.photo-frame:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 15%,rgba(255,255,255,.13) 48%,transparent 66%);transform:translateX(-120%);animation:sweep 9s ease-in-out infinite}
.photo-placeholder{aspect-ratio:4/3;min-height:180px;border-radius:15px;border:1px dashed rgba(185,166,216,.35);background:radial-gradient(ellipse at 50% 45%,rgba(118,85,168,.19),rgba(8,9,16,.35) 72%);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--lav);text-align:center}
.photo-placeholder span{font-size:30px;text-shadow:0 0 22px rgba(185,166,216,.7)}.photo-placeholder strong{font-size:15px;font-weight:500;color:#e5dcef}.photo-placeholder small{font-size:11px;color:rgba(185,166,216,.65)}
.photo-frame img{display:block;width:100%;height:auto;max-height:560px;object-fit:cover;border-radius:15px}.photo-frame figcaption{text-align:center;padding:13px 4px 3px;font:19px 'Amiri',serif;color:#d7c8eb}
.letter-card{position:relative;padding:clamp(23px,5vw,48px);border:1px solid rgba(185,166,216,.16);border-radius:24px;background:linear-gradient(145deg,rgba(20,23,40,.78),rgba(11,12,22,.83));box-shadow:0 25px 90px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.045);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.letter-topline{display:flex;justify-content:space-between;color:rgba(185,166,216,.7);font-size:12px;padding-bottom:17px;border-bottom:1px solid rgba(185,166,216,.13);margin-bottom:25px}.letter-topline span:last-child{font-size:20px}
.letter-copy{font:clamp(19px,3.4vw,22px)/2.05 'Amiri',serif;color:rgba(240,237,247,.88)}.letter-copy p{margin:0 0 23px}.letter-copy strong{font-weight:700;color:#d7c3f0;text-shadow:0 0 22px rgba(118,85,168,.2)}
.letter-copy .highlight{margin:32px 0;padding:18px 20px;border-right:2px solid rgba(185,166,216,.65);background:linear-gradient(90deg,rgba(118,85,168,.04),rgba(118,85,168,.13));border-radius:12px;color:#eee7f8;font-size:1.08em}
.letter-copy .last-love{color:#d9c7ef;font-size:1.1em;margin-bottom:0}.signoff{display:flex;gap:12px;color:rgba(185,166,216,.7);font:16px 'Amiri',serif;margin-top:28px;padding-top:17px;border-top:1px solid rgba(185,166,216,.13)}.signoff b{font-size:21px;font-weight:400;color:#c9aee9}
.ending{text-align:center;padding:75px 0 65px}.end-star{font-size:31px;color:#d4c3eb;text-shadow:0 0 30px #a98ad1;animation:twinkle 4s infinite}.ending p{color:rgba(185,166,216,.68);font-size:13px;margin:17px 0 0}.ending h2{font:400 clamp(42px,8vw,64px) 'Amiri',serif;margin:0}.end-love{font:24px 'Amiri',serif;color:#d8c8ec;margin:7px 0}.end-love span{color:#c5a4e8}.constellation{color:rgba(185,166,216,.55);letter-spacing:5px;margin-top:28px}
.site-footer{text-align:center;padding:20px 0 28px;color:rgba(169,167,181,.35);font-size:8px;letter-spacing:3px;direction:ltr}.site-footer span{color:rgba(185,166,216,.6);margin:0 7px}
@keyframes drift{from{transform:translate3d(-2%,0,0) scale(1)}to{transform:translate3d(4%,5%,0) scale(1.12)}}@keyframes twinkle{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.12)}}@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}@keyframes sweep{0%,65%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}@keyframes sectionIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:520px){.shell{width:min(100% - 28px,780px)}.topmark{padding-top:21px;font-size:8px;letter-spacing:2.2px}.intro{min-height:calc(100svh - 48px);min-height:590px;padding:45px 0 75px}.floating-star{top:17%;right:8%}.o1{height:170px}.o2{height:240px}.letter-section>h2{font-size:33px}.soft-intro{font-size:12px;line-height:1.9}.photo-frame{padding:8px;border-radius:19px;margin-bottom:32px}.photo-placeholder{min-height:160px}.letter-card{border-radius:19px;padding:22px 19px}.letter-copy{line-height:2;font-size:19px}.letter-copy p{margin-bottom:19px}.letter-copy .highlight{padding:15px;margin:26px 0}.ending{padding:58px 0 48px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}