@import url('https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=Marck+Script&display=swap');

:root{--paper:#f8f7f2;--ink:#2c44ca;--blue:#344ee5;--muted:#72758a;--line:#dedfdc;--lime:#e9eea3;--font:'Golos Text',Arial,sans-serif}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font);-webkit-font-smoothing:antialiased}button,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #ed8c4f;outline-offset:6px}button{color:inherit}::selection{background:#e6b9dc;color:#243cc3}.skip-link{position:fixed;top:-100px;left:20px;z-index:100;background:white;padding:15px}.skip-link:focus{top:15px}.header{height:100px;max-width:1600px;margin:auto;padding:0 5.2%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:flex;align-items:center;gap:7px;font-size:18px;white-space:nowrap;letter-spacing:-.7px}.brand-star{font-size:39px;margin-right:7px;line-height:1}.brand-dot{align-self:flex-start;font-size:10px;margin-top:7px}.header nav{display:flex;gap:34px;font-size:12px}.header nav a{position:relative;padding:10px 0}.header nav a::after{content:'';position:absolute;left:0;bottom:3px;width:0;height:1px;background:currentColor;transition:width .2s}.header nav a:hover::after{width:100%}.header nav a span{margin-left:5px}.sound-toggle{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #cbd0e1;border-radius:25px;padding:12px 17px;font-size:11px;white-space:nowrap}.sound-bars{height:13px;display:flex;align-items:center;gap:2px}.sound-bars i{display:block;width:2px;height:5px;background:currentColor}.sound-bars i:nth-child(2){height:12px}.sound-bars i:nth-child(3){height:8px}.playing .sound-bars i{animation:equalize .7s infinite alternate}.playing .sound-bars i:nth-child(2){animation-delay:.3s}.playing .sound-bars i:nth-child(3){animation-delay:.5s}.hero{position:relative;max-width:1600px;min-height:760px;margin:auto;padding:28px 5.2% 0;overflow:hidden}.hero-topline{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}.hero-topline>span:first-child{display:flex;align-items:center;gap:8px}.live-dot{width:6px;height:6px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #344ee511}.hero-copy{position:relative;z-index:2;padding-top:85px;pointer-events:none}.hero-copy>*{pointer-events:auto}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:500;margin:0 0 25px}h1,h2,p{margin-top:0}h1{font-size:clamp(56px,6.2vw,96px);line-height:1.04;letter-spacing:-6px;font-weight:500;position:relative;margin:0 0 28px;width:max-content;max-width:100%}h1 em,h2 em{font-style:normal}h1 em{display:inline-block}h1 .title-spark{position:absolute;width:47px;fill:var(--ink);top:-9px;right:14px;transform:rotate(12deg)}.hero-description{font-size:14px;line-height:1.8;color:#777986;margin-bottom:28px}.button{display:inline-flex;align-items:center;justify-content:center;gap:28px;border-radius:50px;padding:19px 25px;font-size:12px;font-weight:500;border:0;transition:transform .2s,box-shadow .2s}.button:hover{transform:translateY(-3px);box-shadow:0 8px 20px #263eb820}.button span{font-size:22px;line-height:1}.primary{color:white;background:var(--blue)}.hero-footnote{display:block;font-size:9px;margin-top:17px;color:#878893}.universe{position:absolute;width:530px;height:550px;right:1.5%;top:85px;perspective:1000px}.planet-main{width:290px;height:290px;border-radius:50%;position:absolute;left:117px;top:132px;background:radial-gradient(circle at 31% 25%,#c8d0ff 0%,#9aaafa 19%,#7489ed 40%,#4a64d3 67%,#213a99 95%);box-shadow:inset -13px -14px 26px #23397b38,16px 35px 45px -22px #314ed83a;transform:rotate(-16deg);display:flex;align-items:center;justify-content:center;animation:float 7s ease-in-out infinite;overflow:hidden}.planet-main::before{content:'';position:absolute;inset:0;opacity:.18;background: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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' opacity='.55' filter='url(%23n)'/%3E%3C/svg%3E");mix-blend-mode:soft-light}.planet-caption{color:#f0f0fb;font-size:34px;line-height:1.1;letter-spacing:-1px;font-weight:800;text-align:center;text-shadow:0 2px 1px #223a7820}.planet-smile{position:absolute;bottom:37px;left:137px;font-size:38px;color:#dee4ff}.orbit{border:1px solid #c4c9de;border-radius:50%;position:absolute;pointer-events:none}.orbit-one{width:505px;height:230px;left:14px;top:166px;transform:rotate(-28deg)}.orbit-two{width:485px;height:400px;left:25px;top:78px;transform:rotate(34deg);border-color:#d9dce6}.orbit-three{width:358px;height:530px;left:98px;top:4px;transform:rotate(35deg);border-color:#e2e3e9}.small-planet{position:absolute;display:grid;place-items:center;border-radius:50%;transition:scale .3s}.small-planet:hover{scale:1.13}.pink-planet{width:102px;height:102px;left:20px;top:302px;background:radial-gradient(circle at 30% 25%,#ffe5e3,#eebbbf 52%,#cc939f);color:#b26780;font-size:34px;transform:rotate(-15deg);box-shadow:5px 12px 15px #ae809617}.yellow-planet{width:78px;height:78px;right:44px;top:62px;background:radial-gradient(circle at 30% 20%,#ffffd5,#e9eda2 53%,#bec269);color:#939753;font-size:37px;transform:rotate(20deg);box-shadow:5px 8px 10px #92974610}.tiny-moon{position:absolute;width:28px;height:28px;border-radius:50%;right:38px;bottom:91px;background:radial-gradient(circle at 25% 25%,#e7e9ff,#a0aedb)}.tiny-blue{position:absolute;width:12px;height:12px;border-radius:50%;left:88px;top:117px;background:#5674d6}.space-spark{position:absolute;font-size:28px}.spark-one{top:47px;left:193px;font-size:21px}.spark-two{right:13px;top:220px;font-size:42px}.spark-three{left:8px;top:245px;font-size:19px}.spark-four{left:131px;bottom:55px;font-size:17px}.orbit-label{position:absolute;font-family:'Marck Script',cursive;font-size:21px;white-space:nowrap;color:#777fac}.label-top{top:37px;left:5px;transform:rotate(-10deg)}.label-top span{display:block;text-align:center;font-size:35px;margin-bottom:-10px}.label-bottom{bottom:27px;right:29px;transform:rotate(-12deg)}.label-bottom span{font-size:36px}.birthday-sticker{position:absolute;right:72px;bottom:39px;background:var(--lime);width:110px;height:114px;padding:17px 7px;clip-path:polygon(50% 0%,58% 5%,67% 2%,73% 9%,83% 9%,86% 18%,95% 22%,94% 32%,100% 40%,95% 50%,100% 60%,94% 68%,95% 78%,86% 82%,83% 91%,73% 91%,67% 98%,58% 95%,50% 100%,42% 95%,33% 98%,27% 91%,17% 91%,14% 82%,5% 78%,6% 68%,0% 60%,5% 50%,0% 40%,6% 32%,5% 22%,14% 18%,17% 9%,27% 9%,33% 2%,42% 5%);transform:rotate(15deg);text-align:center;color:#435533}.birthday-sticker span{display:block;font-size:9px;letter-spacing:1px}.birthday-sticker span:last-child{font-size:6px;margin-top:5px}.birthday-sticker strong{display:block;font-size:26px;font-weight:900;line-height:.95;margin-top:5px;letter-spacing:-1.2px}.hero-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:99px;font-size:10px;padding:0 0 25px}.hero-bottom>a{display:flex;align-items:center;gap:12px}.scroll-icon{width:29px;height:39px;border:1px solid #c4c9df;border-radius:20px;display:grid;place-items:center;font-size:17px}.edition{letter-spacing:1.5px;color:#838694;font-size:8px}.page-count{letter-spacing:2px;font-size:9px}.ticker{background:var(--lime);overflow:hidden;padding:22px 0;color:#52604a;border-block:1px solid #dce19d}.ticker>div{white-space:nowrap;width:max-content;animation:ticker 55s linear infinite;font-size:12px;font-weight:600;letter-spacing:1.4px}.ticker span{margin:0 46px;font-size:23px;vertical-align:middle}.section{max-width:1440px;margin:auto;padding:100px 5.8%}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:25px;margin-bottom:47px}h2{font-size:clamp(34px,3.5vw,52px);font-weight:500;line-height:1.12;letter-spacing:-2px;margin-bottom:0}.section-heading>p{color:var(--muted);font-size:12px;line-height:1.8;margin-bottom:2px}.section-heading .eyebrow{margin-bottom:19px}.memory-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:33px}.memory-card{border:0;padding:13px 13px 21px;background:#fff;box-shadow:0 3px 12px #202c4910;text-align:left;transition:transform .3s,box-shadow .3s;position:relative}.memory-card:nth-child(1){transform:rotate(-3deg)}.memory-card:nth-child(2){transform:rotate(2deg);margin-top:20px;margin-bottom:-20px}.memory-card:nth-child(3){transform:rotate(-2deg)}.memory-card:hover{transform:rotate(0) translateY(-9px);box-shadow:0 16px 30px #202c4914}.memory-art{width:100%;aspect-ratio:1.26;position:relative;overflow:hidden;display:grid;place-items:center}.memory-art.lavender{background:#dee0f4}.memory-art.peach{background:#f4d8c6}.memory-art.sage{background:#dbe6ce}.memory-art svg{width:90%;height:90%}.memory-art img{width:100%;height:100%;object-fit:cover}.photo-placeholder{position:absolute;bottom:13px;left:0;right:0;text-align:center;font-size:8px;letter-spacing:1.3px;color:#535978}.memory-tag{position:absolute;top:25px;left:25px;font-size:7px;letter-spacing:1px;border:1px solid #ffffff99;background:#ffffff66;padding:7px 8px;border-radius:20px;color:#4f526e}.memory-card h3{font-size:16px;letter-spacing:-.5px;font-weight:500;margin:20px 3px 7px}.memory-card p{font-size:10px;color:var(--muted);margin:0 3px}.card-arrow{position:absolute;right:17px;bottom:23px;font-size:22px}.section-note{text-align:center;color:#93939e;font-size:10px;margin:48px 0 0}.section-note>span{font-size:23px;margin-right:7px}.awards{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1.25fr;gap:70px;padding-top:82px;padding-bottom:87px}.award-intro>p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--muted);margin:25px 0 0}.award-doodle{font-size:74px;color:#c9a3cd;line-height:1;margin:22px 0 0 2px;display:inline-block;vertical-align:middle;transform:rotate(14deg)}.handwritten{font-family:'Marck Script',cursive;font-size:24px;font-weight:400}.award-intro .handwritten{display:inline-block;max-width:170px;vertical-align:middle;font-size:22px;transform:rotate(-8deg);margin:20px 0 0 14px}.award-list{display:flex;flex-direction:column;justify-content:center}.award-item{border-bottom:1px solid #d9dce4}.award-item:first-child{border-top:1px solid #d9dce4}.award-item summary{display:flex;align-items:center;padding:26px 0;cursor:pointer;list-style:none;gap:19px}.award-item summary::-webkit-details-marker{display:none}.award-icon{border:1px solid #cdd1e5;border-radius:50%;width:52px;height:52px;display:grid;place-items:center;font-size:29px;flex-shrink:0}.award-item h3{font-size:18px;font-weight:500;letter-spacing:-.5px;margin:0 0 8px}.award-item summary p{font-size:10px;color:var(--muted);margin:0}.award-plus{font-size:25px;font-weight:400;margin-left:auto;transition:transform .2s}.award-item[open] .award-plus{transform:rotate(45deg)}.award-detail{font-size:12px;line-height:1.9;color:#646b89;margin:0 20px 26px 71px}.letters{background:#eeedf7;max-width:none;padding-top:90px;padding-bottom:70px}.letters-top{text-align:center}.letters-top>p:last-child{font-size:12px;line-height:1.8;color:var(--muted);margin:22px 0 0}.letter-grid{display:grid;grid-template-columns:repeat(3,1fr);max-width:1120px;margin:48px auto 0;gap:30px}.letter-card{border:0;background:transparent;padding:0;transition:transform .25s}.letter-card:hover{transform:translateY(-9px) rotate(-2deg)}.envelope{height:184px;position:relative;display:block;box-shadow:0 9px 12px -10px #373c7050;isolation:isolate}.envelope.lavender{--env:#d4d6f0;--fold:#e0e2f6;--flap:#e7e8f8}.envelope.peach{--env:#ecc8b8;--fold:#f4d9ca;--flap:#f8e0d3}.envelope.sage{--env:#cdd9bd;--fold:#dce5d1;--flap:#e7eddf}.envelope{background:var(--env)}.envelope::before{content:'';position:absolute;inset:0;background:var(--fold);clip-path:polygon(0 0,50% 58%,100% 0,100% 100%,0 100%)}.envelope::after{content:'';position:absolute;inset:0;background:var(--flap);clip-path:polygon(0 0,100% 0,50% 61%);filter:drop-shadow(0 2px 2px #0002)}.wax-seal{position:absolute;z-index:1;top:45%;left:calc(50% - 20px);width:40px;height:40px;border-radius:50%;background:#5565c7;color:#e5e7ff;display:grid;place-items:center;border:4px double #98a2dd;font-size:21px;box-shadow:0 2px 4px #4655af35}.letter-num{position:absolute;bottom:14px;left:17px;font-size:8px;letter-spacing:1px;z-index:2;color:#71778a}.letter-status{position:absolute;bottom:14px;right:17px;font-size:9px;z-index:2;color:#71778a}.letter-card h3{font-size:14px;font-weight:500;margin:22px 0 8px}.letter-card>p{font-size:10px;color:#808295;margin:0}.wish-section{position:relative;text-align:center;background:var(--blue);color:#fff;overflow:hidden;padding:86px 20px 67px}.wish-section>.eyebrow{color:#c4ceff;font-size:9px}.wish-section h2{font-size:56px;letter-spacing:-2px}.wish-section>p:not(.eyebrow){font-size:12px;color:#c6cefb;line-height:1.9;margin:24px 0 0}.candle-button{position:relative;display:block;height:190px;width:170px;margin:27px auto 11px;background:none;border:0}.candle-body{position:absolute;width:38px;height:112px;bottom:14px;left:66px;border-radius:5px 5px 3px 3px;background:repeating-linear-gradient(-35deg,#f7f1c5 0px,#f7f1c5 15px,#e8aaca 15px,#e8aaca 29px);box-shadow:inset -6px 0 7px #80698c25}.candle-plate{position:absolute;bottom:5px;left:25px;width:120px;height:16px;background:#b5c2f3;border-radius:50%;box-shadow:0 5px 0 #859ee0}.wick{width:3px;height:14px;position:absolute;background:#242e77;bottom:126px;left:84px}.flame{position:absolute;bottom:139px;left:73px;width:25px;height:39px;background:radial-gradient(ellipse at 50% 75%,#fffceb 15%,#ffe494 45%,#ffb268 70%);border-radius:80% 10% 65% 35%;transform:rotate(-35deg);box-shadow:0 0 18px #ffce6980,0 0 50px 15px #ffdc6135;animation:flicker 1.4s ease-in-out infinite;transition:opacity .5s,scale .5s;transform-origin:center bottom}.candle-button.blown .flame{opacity:0;scale:0}.wish-button{background:var(--lime);color:#35422f;font-size:12px;padding:17px 24px}.wish-section .wish-hint{font-size:9px!important;margin-top:17px!important;color:#b7c2f5!important}.wish-stars span{position:absolute;color:#ced4ff;font-size:34px;pointer-events:none}.wish-stars span:nth-child(1){top:20%;left:14%}.wish-stars span:nth-child(2){top:45%;right:19%;font-size:57px}.wish-stars span:nth-child(3){bottom:19%;left:24%;font-size:23px;color:var(--lime)}.wish-stars span:nth-child(4){top:16%;right:29%;font-size:54px}.wish-stars span:nth-child(5){bottom:19%;right:9%;font-size:19px}.wish-stars span:nth-child(6){top:48%;left:7%;font-size:21px}.wish-result{margin-top:20px}.wish-result .handwritten{color:var(--lime);margin:0 0 12px}.text-button{background:none;border:0;color:inherit;text-decoration:underline;text-underline-offset:4px;font-size:10px}.final-section{text-align:center;position:relative;padding-top:94px;padding-bottom:88px}.final-section h2{font-size:53px}.final-section>p:not(.eyebrow){font-size:13px;line-height:1.9;color:var(--muted);margin-top:27px}.final-star{display:inline-block;font-size:62px;line-height:1;margin:0 0 24px;color:#a8ad6a}.friend-signature{display:flex;flex-direction:column;gap:11px;align-items:center;margin:28px 0 37px;font-family:'Marck Script',cursive;font-size:26px}.signature-hearts{font-size:20px;letter-spacing:5px;color:#c995b9}.back-top{font-size:10px;border-bottom:1px solid #b8bfdf;padding-bottom:7px}.back-top span{margin-left:20px}footer{padding:28px 5.2%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}footer .brand{font-size:13px}footer .brand-star{font-size:27px}footer>span{font-size:9px;color:#8b8b96}footer>span:last-child{letter-spacing:1px;color:var(--ink)}dialog{border:0;border-radius:5px;padding:48px;max-width:540px;width:calc(100% - 36px);color:var(--ink);background:var(--paper);box-shadow:0 25px 100px #10194144}dialog::backdrop{background:#16204e88;backdrop-filter:blur(8px)}.dialog-close{position:absolute;right:15px;top:10px;font-size:29px;border:0;background:transparent;width:40px;height:40px}.dialog-eyebrow{font-size:9px;letter-spacing:1.3px;margin:8px 0 25px}.dialog-title{font-size:34px;line-height:1.1;letter-spacing:-1px;margin:20px 0}.dialog-text{font-size:14px;line-height:1.9;color:#6e7289;white-space:pre-line}.dialog-signature{font-family:'Marck Script',cursive;font-size:26px;margin:30px 0 0}.dialog-image{width:100%;max-height:280px;object-fit:cover;margin:10px 0}.demo-label{font-size:9px;color:#8c8da0;border-top:1px solid var(--line);padding-top:14px;margin:20px 0 0}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);padding:16px 22px;color:white;background:#283995;border-radius:12px;box-shadow:0 8px 30px #19276430;z-index:60;font-size:12px;max-width:calc(100% - 30px);width:max-content;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}.toast.visible{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:80}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(20px);transition:opacity .7s,transform .7s}.motion-ready .reveal.visible{opacity:1;transform:translateY(0)}[hidden]{display:none!important}@keyframes float{0%,100%{transform:translateY(0) rotate(-16deg)}50%{transform:translateY(-12px) rotate(-13deg)}}@keyframes flicker{0%,100%{transform:rotate(-35deg) scale(1)}50%{transform:rotate(-29deg) scale(.9,1.07)}}@keyframes ticker{to{transform:translateX(-50%)}}@keyframes equalize{to{height:3px}}

@media(min-width:1500px){.hero-copy{padding-top:100px}.universe{right:5%;top:80px;width:570px;transform:scale(1.1);transform-origin:right center}.hero{min-height:810px}.hero-bottom{margin-top:120px}}@media(max-width:1150px){.header nav{gap:22px}.hero{min-height:720px}.hero-copy{padding-top:85px}.universe{right:-70px;top:106px;transform:scale(.87);transform-origin:right center}h1{font-size:68px;letter-spacing:-4px}.hero-bottom{margin-top:118px}.hero-description{font-size:12px}.section-heading{align-items:start}.section-heading>p{max-width:270px}.awards{gap:35px}.award-item h3{font-size:16px}.memory-grid{gap:22px}.memory-card h3{font-size:14px}.memory-card p{font-size:9px}.letter-grid{gap:22px}.envelope{height:155px}}@media(max-width:850px){.header{height:80px}.header nav{display:none}.hero{min-height:900px}.hero-copy{padding-top:60px}.hero-topline>span:last-child{display:none}h1{font-size:72px}.hero-description{font-size:14px}.universe{top:386px;right:calc(50% - 270px);transform:scale(.76);transform-origin:center top}.hero-bottom{margin-top:414px}.edition{display:none}.section{padding:70px 6%}.section-heading{display:block}.section-heading>p{margin:22px 0 0;max-width:none}.memory-grid{gap:17px}.memory-card{padding:8px 8px 17px}.memory-card h3{font-size:12px;line-height:1.4;margin-right:10px}.memory-card p{font-size:8px}.card-arrow{right:10px;bottom:17px;font-size:17px}.memory-tag{font-size:5px;left:16px;top:16px;padding:5px}.photo-placeholder{font-size:6px}.awards{grid-template-columns:1fr;gap:35px}.award-intro{position:relative}.award-doodle,.award-intro .handwritten{display:none}.award-intro h2 br{display:none}.award-item h3{font-size:18px}.envelope{height:125px}.wax-seal{width:32px;height:32px;left:calc(50% - 16px);font-size:17px}.letter-card h3{font-size:12px}.letter-card>p{font-size:9px}.letter-num{font-size:6px;left:10px;bottom:10px}.letter-status{font-size:7px;right:10px;bottom:10px}.wish-section h2,.final-section h2{font-size:45px}.wish-stars span:nth-child(1){left:5%}.wish-stars span:nth-child(2){right:6%}}
@media(max-width:560px){.header{padding:0 6%;height:76px}.brand{font-size:15px;gap:5px}.brand-star{font-size:32px;margin-right:3px}.sound-toggle{padding:10px 12px;font-size:9px;gap:7px}.brand-dot{display:none}.hero{padding:25px 6% 0;min-height:870px}.hero-topline{font-size:8px;letter-spacing:1.2px}.hero-copy{padding-top:45px}.hero-copy>.eyebrow{font-size:8px;letter-spacing:1.25px;margin-bottom:22px}h1{font-size:clamp(42px,10.5vw,59px);letter-spacing:-2.8px;line-height:1.06;margin-bottom:23px}h1 .title-spark{width:28px;top:-4px;right:3px}.hero-description{font-size:11px;line-height:1.9;margin-bottom:23px}.hero-description br{display:none}.button{font-size:11px;padding:17px 22px;gap:23px}.hero-footnote{font-size:8px;margin-top:15px;max-width:300px;line-height:1.7}.universe{top:400px;right:calc(50% - 265px);transform:scale(.67)}.hero-bottom{margin-top:374px;font-size:9px;padding-bottom:20px}.page-count{font-size:8px}.ticker{padding:15px 0}.ticker>div{font-size:10px}.ticker span{margin:0 25px;font-size:19px}.section{padding:58px 7%}.eyebrow{font-size:8px;letter-spacing:1.4px;margin-bottom:19px}h2{font-size:35px;letter-spacing:-1.4px}.section-heading{margin-bottom:35px}.section-heading h2 em{display:block}.section-heading>p{font-size:11px}.memory-grid{grid-template-columns:1fr;gap:30px;padding:0 12px}.memory-card{padding:12px 12px 22px}.memory-card:nth-child(2){margin:0}.memory-card h3{font-size:17px;margin-top:19px}.memory-card p{font-size:10px}.memory-art{aspect-ratio:1.4}.memory-tag{top:24px;left:24px;font-size:7px}.photo-placeholder{font-size:8px}.card-arrow{right:20px;bottom:24px;font-size:22px}.section-note{font-size:9px;line-height:1.8;margin-top:32px}.award-intro h2 br{display:block}.award-intro>p:not(.eyebrow){font-size:11px}.award-item summary{padding:23px 0;gap:12px}.award-icon{width:42px;height:42px;font-size:24px}.award-item h3{font-size:15px;letter-spacing:-.4px}.award-item summary p{font-size:8px;line-height:1.6;max-width:218px}.award-detail{margin-left:54px;font-size:11px}.award-plus{font-size:20px}.letters{padding-left:8%;padding-right:8%}.letters-top>p:last-child{font-size:11px}.letter-grid{grid-template-columns:1fr;max-width:330px;gap:35px;margin-top:35px}.envelope{height:180px}.letter-card:nth-child(1){transform:rotate(-3deg)}.letter-card:nth-child(2){transform:rotate(2deg)}.letter-card:nth-child(3){transform:rotate(-2deg)}.wax-seal{width:40px;height:40px;left:calc(50% - 20px);font-size:21px}.letter-num{font-size:8px;bottom:14px;left:17px}.letter-status{font-size:9px;bottom:14px;right:17px}.letter-card h3{font-size:14px;margin-top:18px}.letter-card>p{font-size:10px}.wish-section{padding:66px 22px 52px}.wish-section>.eyebrow{font-size:7px;letter-spacing:1.2px}.wish-section h2{font-size:42px}.wish-section>p:not(.eyebrow){font-size:10px}.wish-stars span:nth-child(1){top:27%;font-size:20px}.wish-stars span:nth-child(2){top:52%;font-size:35px}.wish-stars span:nth-child(3){left:12%;bottom:25%}.wish-stars span:nth-child(4){top:10%;right:10%;font-size:25px}.wish-stars span:nth-child(6){display:none}.final-section h2{font-size:37px}.final-section>p:not(.eyebrow){font-size:11px}.final-section>p br{display:none}.final-star{font-size:49px}.friend-signature{font-size:25px}.final-section{padding-top:64px;padding-bottom:64px}footer{flex-wrap:wrap;padding:24px 7%;gap:20px}footer .brand{font-size:12px}footer>span{font-size:8px}footer>span:last-child{display:none}dialog{padding:43px 26px 30px}.dialog-title{font-size:29px}.dialog-text{font-size:12px}.dialog-signature{font-size:23px}.toast{font-size:11px;line-height:1.5;text-align:center}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}

/* Phone-first refinements: readable copy, safe areas and touch controls. */
html { -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
footer { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
dialog { max-height: calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); overscroll-behavior: contain; }
dialog::backdrop { -webkit-backdrop-filter: blur(8px); }
.dialog-close { width: 44px; height: 44px; }
.toast { bottom: max(25px, calc(env(safe-area-inset-bottom) + 12px)); }
@media (pointer: coarse) {
  .sound-toggle, .text-button, .back-top, .brand, .hero-bottom > a { min-height: 44px; }
  .text-button, .back-top { display: inline-flex; align-items: center; }
  .button:hover { transform: none; box-shadow: none; }
  .small-planet:hover { scale: 1; }
}
@media (max-width: 560px) {
  .header { gap: 12px; padding-top: env(safe-area-inset-top); height: calc(76px + env(safe-area-inset-top)); }
  .sound-toggle { font-size: 11px; min-height: 44px; }
  .hero { min-height: 0; }
  .hero-copy { padding-top: 35px; }
  .hero-description { font-size: 15px; line-height: 1.65; }
  .hero-footnote { font-size: 11px; }
  .hero .button { font-size: 13px; min-height: 52px; }
  .universe { position: relative; top: auto; right: auto; left: 50%; margin: 18px 0 -176px -265px; transform: scale(.67); }
  .hero-bottom { margin-top: 0; font-size: 11px; }
  .section-heading > p, .award-intro > p:not(.eyebrow), .letters-top > p:last-child,
  .wish-section > p:not(.eyebrow), .final-section > p:not(.eyebrow) { font-size: 14px; line-height: 1.8; }
  .section-heading > p br, .letters-top > p:last-child br, .wish-section > p:not(.eyebrow) br { display: none; }
  .memory-card p, .letter-card > p, .award-item summary p { font-size: 12px; line-height: 1.6; }
  .memory-card p { padding-right: 22px; }
  .award-detail, .dialog-text { font-size: 15px; line-height: 1.8; }
  .section-note { font-size: 12px; }
  .letter-card h3 { font-size: 16px; }
  .wish-button { font-size: 13px; min-height: 52px; }
  .wish-section .wish-hint { font-size: 11px !important; }
  .back-top, .text-button { font-size: 12px; }
  .demo-label { font-size: 11px; line-height: 1.6; }
  .dialog-close { top: 6px; right: 8px; background: var(--paper); border-radius: 50%; }
}
@media (max-width: 360px) {
  .brand { font-size: 13px; }
  .brand-star { font-size: 28px; }
  .sound-toggle { padding-inline: 9px; }
}

/* A personal invitation, tickets to the future and a final surprise. */
.pink-planet { border: 0; padding: 0; }
.intro-dialog { inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none; margin: 0; border-radius: 0; padding: max(30px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); background: radial-gradient(ellipse at 50% 48%, #e8e9f8, var(--paper) 66%); text-align: center; }
.intro-dialog::backdrop { background: var(--paper); }
.intro-content { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.intro-content h2 { font-size: clamp(36px, 4.8vw, 66px); letter-spacing: -2px; }
.intro-content h2 em { font-family: 'Marck Script', cursive; font-weight: 400; }
.intro-content > p:not(.eyebrow) { color: var(--muted); font-size: 14px; line-height: 1.7; margin: 22px 0 0; }
.intro-envelope { position: relative; display: block; flex-shrink: 0; width: min(330px, 100%); height: 207px; margin: 65px auto 5px; padding: 0; border: 0; border-radius: 5px; background: #c9cdec; perspective: 900px; box-shadow: 0 25px 60px -25px #343f8560; transform: rotate(-5deg); transition: transform 1.2s ease-in-out; }
.intro-note { position: absolute; top: 15px; left: 6%; width: 88%; height: 175px; display: grid; align-content: center; background: #faf8ef; border-radius: 4px; font-family: 'Marck Script', cursive; font-size: 28px; line-height: 1.15; transition: transform 1.5s cubic-bezier(.22,.61,.36,1) .8s; }
.intro-envelope-pocket { position: absolute; inset: 0; background: #dce0f5; clip-path: polygon(0 0, 50% 58%, 100% 0, 100% 100%, 0 100%); border-radius: 4px; z-index: 2; }
.intro-envelope-flap { position: absolute; inset: 0; background: #edf0ff; clip-path: polygon(0 0, 100% 0, 50% 61%); transform-origin: top; transition: transform 1.35s ease-in-out .25s; z-index: 3; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.intro-seal { position: absolute; z-index: 4; top: 47%; left: calc(50% - 25px); display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--blue); color: #f5dce6; border: 5px double #7f8cda; font-size: 26px; box-shadow: 0 4px 12px #344ee533; transition: opacity .6s ease, transform .7s ease; }
.intro-address { position: absolute; z-index: 3; bottom: 17px; left: 22px; text-align: left; color: #757da7; font-size: 8px; letter-spacing: 1px; line-height: 1.8; }
.opening .intro-envelope { transform: rotate(0); }
.opening .intro-envelope-flap { transform: rotateX(180deg); }
.opening .intro-note { transform: translateY(-100px); }
.opening .intro-seal { opacity: 0; transform: scale(.6); }
.intro-content .intro-instruction { font-family: 'Marck Script', cursive; font-size: 24px !important; color: var(--ink) !important; margin-top: 25px !important; }
.intro-sound { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; font-size: 11px; color: var(--muted); margin-top: 14px; cursor: pointer; }
.intro-sound input { width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; }
.intro-skip { min-height: 44px; color: #777e9d; margin-top: 5px; }
.future-section { padding-top: 86px; padding-bottom: 82px; }
.future-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.future-card { --ticket: #e4e5f6; padding: 0; border: 0; background: transparent; text-align: left; perspective: 1000px; border-radius: 12px; }
.future-card.peach { --ticket: #f4dfd3; }
.future-card.sage { --ticket: #e1e8d8; }
.future-card-inner { display: grid; transform-style: preserve-3d; transition: transform .65s cubic-bezier(.2,.65,.3,1); }
.future-card[aria-pressed=true] .future-card-inner { transform: rotateY(180deg); }
.future-face { display: flex; flex-direction: column; grid-area: 1/1; border-radius: 12px; background: var(--ticket); padding: 24px; min-height: 320px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; border: 1px solid #344ee51a; }
.future-front { transform: rotateY(0deg); }
.future-back { transform: rotateY(180deg); }
.ticket-meta, .ticket-bottom { display: flex; justify-content: space-between; gap: 8px; font-size: 8px; letter-spacing: 1px; line-height: 1.7; color: #707997; }
.future-icon { font-size: 70px; line-height: 1; margin: 34px 0 22px; font-weight: 400; }
.future-title { font-size: 23px; font-weight: 500; line-height: 1.2; letter-spacing: -.7px; }
.ticket-bottom { margin-top: auto; padding-top: 20px; border-top: 1px dashed #858daf66; }
.future-front .future-title { margin-bottom: 26px; }
.future-back .future-title { margin: 25px 0 16px; }
.future-text { font-size: 13px; line-height: 1.8; color: #69718b; padding-bottom: 22px; }
.secret-symbol { font-size: 68px; line-height: 1; color: #c58ea8; }
.secret-text { min-height: 108px; }
.surprise-invitation { margin: 28px auto 16px; max-width: 420px; border: 1px solid #b6c3ff55; border-radius: 18px; padding: 25px; background: #ffffff0c; animation: surprise-arrive .6s ease both; }
.surprise-spark { display: block; font-size: 40px; color: var(--lime); margin-bottom: 12px; }
.surprise-invitation > p { font-size: 19px; line-height: 1.5; margin-bottom: 22px; letter-spacing: -.4px; }
.surprise-invitation strong { font-weight: 500; }
.surprise-invitation .button { background: var(--paper); color: var(--ink); gap: 15px; min-height: 52px; }
.surprise-footnote { display: block; margin-top: 18px; font-size: 11px; line-height: 1.6; color: #c6cefb; }
.surprise-dedication { min-height: 230px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: #e8e7f5; padding: 25px; margin-bottom: 24px; }
.surprise-dedication > span { font-size: 58px; line-height: 1; color: #b98fa9; margin-bottom: 15px; }
.surprise-dedication strong { font-size: 19px; line-height: 1.4; font-weight: 500; }
.surprise-dedication p { color: #7c7e96; font-size: 11px; margin: 15px 0 0; }
.surprise-video { width: 100%; max-height: 52dvh; border-radius: 8px; background: #151c40; margin: 5px 0 20px; }
.video-error { font-size: 13px; line-height: 1.6; color: #77758d; }
.gift-clue { border-radius: 8px; padding: 22px; background: #eef0d5; }
.gift-clue .eyebrow { margin-bottom: 14px; }
.gift-clue > p:last-child { white-space: pre-line; line-height: 1.8; font-size: 15px; margin-bottom: 0; }
@keyframes surprise-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 850px) {
  .future-grid { gap: 15px; }
  .future-face { padding: 18px; }
  .future-title { font-size: 20px; }
  .ticket-meta, .ticket-bottom { font-size: 7px; letter-spacing: .5px; }
}
@media (max-width: 560px) {
  .intro-content > .eyebrow { font-size: 8px; letter-spacing: 1px; }
  .intro-content > p:not(.eyebrow) { font-size: 14px; }
  .intro-content h2 { font-size: 38px; letter-spacing: -1.5px; }
  .intro-envelope { width: 280px; max-width: 100%; height: 180px; margin-top: 45px; }
  .intro-note { height: 150px; font-size: 25px; }
  .opening .intro-note { transform: translateY(-65px); }
  .intro-address { font-size: 7px; left: 18px; }
  .intro-content .intro-instruction { font-size: 22px !important; }
  .intro-sound { font-size: 11px; }
  .future-section { padding: 60px 7%; }
  .future-grid { grid-template-columns: 1fr; gap: 22px; }
  .future-face { padding: 24px; min-height: 345px; }
  .future-icon { margin-top: 28px; }
  .future-title { font-size: 26px; }
  .future-text { font-size: 15px; }
  .ticket-meta, .ticket-bottom { font-size: 9px; }
  .future-section .section-heading h2 em { display: inline; }
  .surprise-invitation { padding: 22px 17px; }
  .surprise-invitation .button { font-size: 12px; padding-inline: 17px; }
  .secret-text { min-height: 140px; }
}
@media (max-height: 700px) and (min-width: 561px) {
  .intro-content { padding-block: 15px; }
  .intro-envelope { margin-top: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .future-card-inner { transform: none !important; }
  .future-back { transform: none; }
  .future-face[aria-hidden=true] { visibility: hidden; }
}

/* A living solar system: broad, slow movement with calm touch targets. */
.universe .planet-main { animation: planet-drift 6s ease-in-out infinite; }
.universe .planet-shine { position: absolute; inset: -20%; border-radius: 50%; background: radial-gradient(ellipse at 28% 25%, #ffffff55, transparent 48%); animation: planet-light 8s ease-in-out infinite alternate; pointer-events: none; }
.universe .planet-caption, .universe .planet-smile { z-index: 1; }
.universe .pink-planet { animation: pink-drift 5s ease-in-out infinite; }
.universe .pink-planet > span { animation: heart-beat 3.2s ease-in-out infinite; }
.universe .yellow-planet { animation: yellow-drift 7s ease-in-out infinite; }
.universe .space-spark { animation: star-breathe 3.6s ease-in-out infinite; }
.universe .spark-two { animation-delay: -1.8s; }
.universe .spark-three { animation-delay: -.8s; }
.universe .spark-four { animation-delay: -2.7s; }
.universe .birthday-sticker { animation: sticker-rock 5.5s ease-in-out infinite; }
.universe .orbit-one { animation: orbit-breathe 8s ease-in-out infinite; }
.universe .orbit-two { animation: orbit-breathe 8s ease-in-out -4s infinite; }
.universe .tiny-moon { animation: moon-drift 9s ease-in-out infinite; pointer-events: none; }
.universe .tiny-blue { animation: blue-drift 7s ease-in-out infinite; pointer-events: none; }
/* Pause a moving button before the visitor presses it. */
.universe .small-planet:focus-visible, .universe .small-planet:active,
.universe.touch-held .small-planet { animation-play-state: paused; }
@media (hover: hover) {
  .universe .small-planet:hover { animation-play-state: paused; }
}
@supports (offset-path: path('M 0 0 L 1 1')) {
  .universe .tiny-moon { left: 0; top: 0; right: auto; bottom: auto; offset-path: path('M 485 163 C 515 219 441 314 318 379 C 195 444 72 451 43 395 C 13 339 87 244 210 179 C 333 114 456 107 485 163 Z'); offset-rotate: 0deg; animation: orbit-travel 18s linear -4s infinite; }
  .universe .tiny-blue { left: 0; top: 0; offset-path: path('M 439 132 C 510 213 490 347 393 432 C 296 517 160 520 89 439 C 18 358 38 224 135 139 C 232 54 368 51 439 132 Z'); offset-rotate: 0deg; animation: orbit-travel 24s linear -15s infinite reverse; }
}
@keyframes planet-drift {
  0%, 100% { transform: translate(-5px, 7px) rotate(-18deg); }
  50% { transform: translate(7px, -21px) rotate(-10deg); }
}
@keyframes planet-light { from { transform: translate(-8px, -5px); opacity: .55; } to { transform: translate(25px, 12px); opacity: 1; } }
@keyframes pink-drift {
  0%, 100% { transform: translate(0, 0) rotate(-15deg); }
  50% { transform: translate(10px, -19px) rotate(-6deg); }
}
@keyframes yellow-drift {
  0%, 100% { transform: translate(0, 0) rotate(20deg); }
  50% { transform: translate(-17px, 15px) rotate(48deg); }
}
@keyframes heart-beat { 0%, 32%, 65%, 100% { scale: 1; } 43% { scale: 1.19; } 53% { scale: 1.06; } }
@keyframes star-breathe { 0%, 100% { opacity: .45; transform: scale(.75) rotate(-12deg); } 50% { opacity: 1; transform: scale(1.18) rotate(22deg); } }
@keyframes sticker-rock { 0%, 100% { transform: translateY(0) rotate(15deg); } 50% { transform: translateY(-8px) rotate(7deg); } }
@keyframes orbit-breathe { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes orbit-travel { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@keyframes moon-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(-24px, -27px); } }
@keyframes blue-drift { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(20px, 18px); } }
/* Static composition for reduced motion, including orbital path positions. */
@media (prefers-reduced-motion: reduce) {
  .universe .tiny-moon, .universe .tiny-blue { offset-path: none; }
  .universe .tiny-moon { left: auto; top: auto; right: 38px; bottom: 91px; }
  .universe .tiny-blue { left: 88px; top: 117px; }
}

/* Keep portrait photos inside the card; show the whole image in its dialog. */
.memory-art > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dialog-image { display: block; height: auto; max-height: min(60dvh, 560px); object-fit: contain; border-radius: 3px; }
.surprise-dedication p { line-height: 1.6; }
.dialog-signature { line-height: 1.4; }

/* Photos on the front of each ticket; the reverse remains a readable message. */
.future-photo { display: block; position: relative; width: 100%; aspect-ratio: 4 / 3; margin: 20px 0; border-radius: 7px; overflow: hidden; flex-shrink: 0; }
.future-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }