:root{--cream:#f7f1e5;--blue:#243fc5;--pink:#f79fc5;--yellow:#f4da54;--ink:#253db0}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Arial,Helvetica,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:3px solid #e94d91;outline-offset:6px}header{height:106px;max-width:1320px;margin:auto;padding:0 58px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #243fc522}.wordmark{display:flex;align-items:center;font-size:36px;font-weight:900;letter-spacing:-3px;gap:6px}.wordmark>span{font-size:43px}.wordmark small{font-size:10px;letter-spacing:0;line-height:1.2;font-weight:400;margin-left:9px}.edition{font-size:10px;letter-spacing:2px}.music{border:1px solid #243fc54d;border-radius:40px;background:transparent;color:var(--blue);display:flex;gap:10px;align-items:center;padding:12px 17px;font-size:11px}.sound{font-size:22px}.music i{width:7px;height:7px;border-radius:50%;background:#abb1ca}.music[aria-pressed=true] i{background:#e7528c;box-shadow:0 0 0 4px #f79fc533}.hero{max-width:1320px;min-height:690px;margin:auto;padding:55px 80px 60px;display:grid;grid-template-columns:1.05fr 1fr;position:relative;gap:30px}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;display:flex;gap:8px;align-items:center}.eyebrow>span{width:6px;height:6px;border-radius:50%;background:#f06d9c}h1{font-size:clamp(70px,7.3vw,110px);font-weight:800;letter-spacing:-6px;line-height:.97;margin:30px 0 20px;position:relative;width:max-content}h1 em{font-family:Georgia,serif;font-weight:400;letter-spacing:-5px;font-size:1.1em}h1 svg{position:absolute;bottom:-25px;left:-10px;width:95%;height:40px;fill:none;stroke:var(--pink);stroke-width:7;z-index:-1}h1+p{font-size:16px;line-height:1.55;margin:30px 0 25px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:38px;background:var(--blue);color:white;border:0;padding:19px 24px;border-radius:50px;font-size:14px}.primary span{font-size:22px}.primary:hover{background:#172d9b;transform:translateY(-2px)}.handnote{font-family:Georgia,serif;font-style:italic;font-size:16px;margin:16px 0 0 40px;transform:rotate(-6deg)}.handnote span{font-size:30px;margin-left:10px}.hero-art{position:relative;align-self:center;height:530px}.photo-frame{position:absolute;width:330px;left:58px;top:82px;padding:12px 12px 22px;background:#fffdf8;box-shadow:0 8px 14px #39280012;transform:rotate(7deg)}.photo{position:relative;height:337px;background:#eee}.photo img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;filter:saturate(.82)}.photo-caption{font-family:Georgia,serif;font-style:italic;font-size:13px;text-align:center;padding-top:17px;color:#31419c}.photo-caption span{font-size:20px;margin-left:5px}.hat{position:absolute;top:-61px;left:88px;width:100px;height:115px;background:repeating-linear-gradient(75deg,var(--yellow) 0 15px,#f49bc2 15px 30px);clip-path:polygon(46% 0,0 100%,100% 100%);transform:rotate(-13deg);filter:drop-shadow(0 2px 1px #0004)}.hat b{position:absolute;top:0;left:36px;width:20px;height:20px;background:var(--blue);border-radius:50%}.balloon{position:absolute;width:92px;height:115px;border-radius:50% 50% 48% 48%;z-index:2;box-shadow:inset -12px -7px 0 #0000000b}.balloon:after{content:'';position:absolute;top:114px;left:47px;height:160px;width:38px;border-left:1px solid #55619d;border-radius:50%;transform:rotate(-15deg)}.balloon:before{content:'';position:absolute;bottom:-5px;left:41px;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:10px solid currentColor}.b1{background:var(--pink);color:var(--pink);top:10px;right:0;transform:rotate(20deg)}.b2{background:var(--yellow);color:var(--yellow);top:75px;right:-33px;width:79px;height:99px;transform:rotate(-8deg);z-index:1}.b2:after{top:98px}.spark{position:absolute}.s1{font-size:75px;top:0;left:2px;color:var(--blue);transform:rotate(10deg)}.s2{font-size:50px;right:10px;bottom:70px}.s3{font-size:52px;color:#e9699c;bottom:18px;left:110px}.seal{width:116px;height:116px;background:var(--yellow);border-radius:50%;position:absolute;bottom:73px;left:0;z-index:3;transform:rotate(-15deg);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:31px;font-weight:800;border:1px dashed var(--blue);outline:7px solid var(--yellow)}.seal small{font-size:11px;font-weight:400;text-align:center;line-height:1.3}.art-note{position:absolute;top:0;left:129px;font-family:Georgia,serif;font-style:italic;font-size:15px;transform:rotate(5deg)}.arrow{width:80px;height:66px;position:absolute;top:-4px;left:245px;stroke:var(--blue);stroke-width:1.5;fill:none}.ribbon{background:var(--pink);padding:17px 0;transform:rotate(-2deg);overflow:hidden;margin:5px -1px 0}.ribbon>div{display:flex;align-items:center;gap:36px;white-space:nowrap;font-size:15px;font-weight:700;letter-spacing:1px;justify-content:center}.ribbon b{font-size:32px;font-weight:400}.surprises{padding:95px 70px 75px;max-width:1320px;margin:auto}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:40px}h2{font-size:57px;line-height:1.03;letter-spacing:-2.5px;font-weight:600;margin:20px 0 0}h2 em{font-family:Georgia,serif;font-weight:400}.section-heading>p{font-size:14px;line-height:1.65;margin-bottom:5px;margin-right:30px}.box{border:1px solid #243fc533;border-radius:16px;padding:24px 30px 17px;background:#eee8dc;box-shadow:inset 0 0 0 7px var(--cream)}.box-top,.box-bottom{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px}.box-top{padding-bottom:20px;border-bottom:1px solid #243fc522}.box-bottom{padding-top:18px;border-top:1px solid #243fc522;align-items:center}.box-bottom>span:last-child{font-size:25px}.candy-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px 20px;padding:37px 0}.candy-card{background:transparent;border:0;color:var(--blue);padding:0 2px 15px;position:relative}.candy-card svg{width:100%;height:130px;overflow:visible;transition:transform .3s}.candy-card:nth-child(odd) svg{transform:rotate(-8deg)}.candy-card:nth-child(even) svg{transform:rotate(6deg)}.candy-card:hover svg{transform:translateY(-9px) rotate(0)}.candy-card .title{display:block;font-size:15px;font-weight:600;margin-top:18px}.candy-card small{display:block;font-size:10px;margin-top:7px;opacity:.66}.candy-card .opened{position:absolute;right:9px;top:3px;background:var(--blue);color:white;width:25px;height:25px;border-radius:50%;display:grid;place-items:center}.small-note{text-align:center;font-size:11px;margin-top:22px;opacity:.75}.final-section{background:var(--pink);padding:70px max(70px,calc((100vw - 1160px)/2));display:grid;grid-template-columns:1fr 1.2fr;gap:55px;position:relative;overflow:hidden}.final-section h2{margin-top:18px}.final-section p{font-size:14px;line-height:1.6;margin:22px 0}.primary:disabled{background:transparent;color:var(--blue);border:1px solid #243fc55e;cursor:default;transform:none}.gift-art{position:relative;align-self:center;justify-self:center;transform:rotate(-9deg);width:250px;padding-top:65px}.gift-box{height:208px;background:var(--blue);border-radius:8px;display:grid;place-items:center;font-size:90px;color:var(--pink);position:relative;box-shadow:13px 15px 0 #dc83aa}.gift-box:before{content:'';position:absolute;top:0;bottom:0;left:105px;width:33px;background:var(--yellow)}.gift-box:after{content:'';position:absolute;left:-8px;right:-8px;top:-6px;height:44px;background:var(--blue);border-bottom:2px solid #192e90}.gift-bow{position:absolute;top:-28px;left:53px;font-family:Georgia,serif;font-size:150px;line-height:1;color:var(--yellow);z-index:2}.final-star{position:absolute;right:60px;top:45px;font-size:90px;color:var(--yellow)}.closing{text-align:center;padding:70px 20px 65px}.closing>span{font-size:52px;color:#e66e9c}.closing p{font-family:Georgia,serif;font-style:italic;font-size:37px;margin:16px 0 22px;letter-spacing:-1px}.closing small{font-size:9px;letter-spacing:2px}footer{display:flex;justify-content:space-between;border-top:1px solid #243fc522;padding:23px 58px;font-size:9px;letter-spacing:1px;gap:20px}dialog{border:0;border-radius:12px;padding:55px 40px 40px;background:var(--cream);color:var(--blue);max-width:510px;width:calc(100% - 32px);box-shadow:0 20px 90px #18235f33;text-align:center}dialog::backdrop{background:#152b7c88;backdrop-filter:blur(7px)}.close{position:absolute;right:15px;top:10px;border:0;background:transparent;font-size:30px;color:var(--blue)}dialog .modal-icon{font-size:65px;color:#ea75a2}dialog h3{font-size:32px;line-height:1.05;letter-spacing:-1px;margin:20px 0}dialog p{font-size:16px;line-height:1.6}dialog .demo{font-size:10px;opacity:.6;margin-top:25px}.answers{display:grid;gap:9px;margin-top:25px}.answers button{background:white;border:1px solid #243fc533;color:var(--blue);border-radius:30px;padding:14px}.answers button:hover{background:var(--yellow)}.result{background:var(--pink);border-radius:12px;padding:16px;margin-top:20px}.confetto{position:fixed;top:-20px;width:9px;height:15px;z-index:30;animation:fall 2.7s linear forwards;pointer-events:none}@keyframes fall{to{transform:translate(var(--drift),105vh) rotate(680deg)}}@media(min-width:1450px){.hero{min-height:760px;padding-top:80px}}@media(max-width:900px){header{padding:0 25px}.edition{display:none}.hero{padding:45px 35px;gap:0;min-height:610px}h1{font-size:82px}.hero-art{transform:scale(.8);transform-origin:center right;left:-25px;width:410px}.surprises{padding:75px 30px 50px}h2{font-size:45px}.section-heading>p{margin-right:0}.final-section{padding:60px 40px;gap:25px}.final-star{right:20px;font-size:50px}.candy-grid{gap:20px 5px}.box{padding:22px 18px}.gift-art{transform:scale(.85) rotate(-9deg)}}@media(max-width:620px){header{height:82px;padding:0 20px}.wordmark{font-size:28px}.wordmark>span{font-size:34px}.wordmark small{font-size:8px}.music{padding:8px 12px;font-size:10px;gap:7px}.hero{display:flex;flex-direction:column;padding:35px 25px 25px;gap:10px;overflow:hidden}.hero-copy{position:relative;z-index:4}.eyebrow{font-size:8px;letter-spacing:1.6px}h1{font-size:78px;letter-spacing:-4px;margin-top:24px}h1 em{letter-spacing:-4px}h1+p{font-size:14px;margin-top:29px}.primary{font-size:12px;padding:16px 22px}.handnote{position:absolute;left:205px;bottom:2px;font-size:12px;margin:0;max-width:100px}.handnote span{font-size:24px}.hero-art{transform:scale(.86);transform-origin:top center;align-self:center;height:470px;left:-12px;width:385px;margin-top:30px;margin-bottom:-50px}.photo-frame{width:285px;left:52px}.photo{height:292px}.photo-caption{font-size:11px}.hat{left:72px;top:-57px}.seal{bottom:45px;left:13px;width:100px;height:100px;font-size:27px}.s3{bottom:0}.b1{right:5px}.b2{right:-17px}.s2{right:0;bottom:38px}.art-note{left:120px}.arrow{left:238px}.ribbon{padding:10px 0;margin-top:14px}.ribbon>div{font-size:11px;gap:23px}.ribbon b{font-size:25px}.surprises{padding:60px 18px 40px}.section-heading{display:block;padding:0 7px;margin-bottom:25px}h2{font-size:39px;letter-spacing:-1.7px}.section-heading>p{font-size:12px;line-height:1.6;margin-top:20px}.section-heading>p br{display:none}.box{padding:18px 12px 12px;border-radius:12px}.box-top{font-size:7px;letter-spacing:1px}.candy-grid{grid-template-columns:repeat(2,1fr);gap:25px 8px;padding:27px 0}.candy-card svg{height:92px}.candy-card .title{font-size:12px;margin-top:10px}.candy-card small{font-size:9px}.candy-card .opened{right:4px;width:20px;height:20px;font-size:11px}.box-bottom{font-size:6px;letter-spacing:.8px}.small-note{font-size:9px;line-height:1.5;padding:0 15px}.final-section{display:flex;flex-direction:column;gap:20px;padding:35px 27px 45px}.gift-art{height:224px;transform:scale(.7) rotate(-9deg);transform-origin:top center;margin-bottom:-30px}.final-section h2{font-size:43px}.final-section p{font-size:13px}.final-star{top:28px;right:25px;font-size:60px}.closing{padding:45px 20px}.closing p{font-size:27px}.closing small{font-size:7px;letter-spacing:1.5px}footer{padding:20px;flex-direction:column;font-size:7px;gap:10px}dialog{padding:44px 25px 30px}dialog h3{font-size:29px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{overflow-x:clip}
/* Stable artwork on iOS and Android: vectors, never system emoji. */
.star-vector{display:inline-block;width:1em;height:1em;vertical-align:middle;flex:none}.wordmark>span{width:43px;height:43px;display:flex;align-items:center}.spark{display:block;line-height:1;width:1em;height:1em}.sound{width:22px;height:22px;display:block}.sound svg{display:block;width:100%;height:100%}.ribbon b{display:flex;align-items:center}.candy-illustration{display:block;max-width:100%;aspect-ratio:28/13}.candy-card{min-width:0;touch-action:manipulation}.close{min-width:44px;min-height:44px}dialog{max-height:calc(100dvh - 32px);overflow:auto}.photo-caption{position:relative;z-index:1}.final-star{width:1em;height:1em}.music{min-height:44px}body{overflow-x:hidden;overflow-x:clip}
@media(max-width:620px){header{padding:0 16px;gap:12px}.wordmark>span{width:32px;height:32px}.wordmark small{display:none}.hero{padding:28px 22px 25px}.hero-copy{width:100%}h1{font-size:clamp(62px,18vw,78px);max-width:100%;letter-spacing:-3.5px}h1 em{letter-spacing:-3px}.hero-art{width:330px;height:425px;left:0;transform:none;margin:23px 0 0;max-width:100%}.photo-frame{top:61px;width:260px;left:29px;padding:10px 10px 18px}.photo{height:266px}.photo-caption{font-size:10px;padding-top:14px}.hat{left:65px;top:-54px;width:84px;height:103px}.art-note{left:90px;top:-2px;font-size:12px}.arrow{width:60px;top:-5px;left:196px}.s1{left:0;top:0;font-size:45px}.s2{right:0;bottom:25px;font-size:40px}.s3{left:210px;bottom:8px;font-size:36px}.b1{width:64px;height:83px;right:5px;top:27px}.b1:after{top:82px;left:32px;height:110px}.b1:before{left:27px}.b2{width:53px;height:69px;right:-9px;top:80px}.b2:after{top:69px;left:27px;height:95px}.b2:before{left:22px}.seal{width:85px;height:85px;font-size:25px;bottom:35px;left:4px;outline-width:5px}.seal small{font-size:9px}.handnote{left:auto;right:0;bottom:-2px;font-size:11px;max-width:86px}.ribbon{margin-top:0}.surprises{padding-top:48px}.candy-grid{gap:24px 6px}.candy-card svg{height:auto;width:100%;min-height:67px}.candy-card .title{line-height:1.25;font-size:12px;min-height:30px;display:flex;align-items:center;justify-content:center;margin-top:8px}.candy-card small{line-height:1.4;min-height:26px;padding:0 3px}.box{padding:18px 11px 12px}.section-heading h2{font-size:clamp(32px,9.6vw,43px)}.box-top{letter-spacing:.7px;font-size:7px}.box-bottom{letter-spacing:.5px;font-size:6px}.final-section{padding:32px 24px 40px}.final-section h2{font-size:clamp(35px,10.3vw,43px)}.closing p{font-size:clamp(24px,6.7vw,29px)}.music{padding:8px 11px;gap:6px;font-size:10px}.music i{width:6px;height:6px}.primary{min-height:52px}.answers button{min-height:48px}}
@media(max-width:350px){.hero{padding-left:18px;padding-right:18px}.hero-art{transform:scale(.89);transform-origin:top center;max-width:none;margin-bottom:-42px}.music{font-size:9px}.music .sound{width:18px}.box-top{font-size:6px}.candy-card .title{font-size:11px}}
main{overflow:hidden}
@media(max-width:350px){.handnote{position:static;max-width:none;margin:14px 0 0 32px;transform:rotate(-4deg)}.handnote span{display:inline-block;margin-left:7px}.hero-art{margin-top:28px}}
/* Personal letters, with complete text at every screen size. */
.box-top{justify-content:flex-end}.hero-copy>h1{margin-top:45px}.box-bottom>span:first-child{line-height:1.6}.closing{border-top:1px solid #243fc522;padding:85px 20px 95px}dialog{width:calc(100% - 32px);max-width:640px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);padding:48px 40px 36px;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin}dialog:focus{outline:none}.close{position:sticky;top:-40px;float:right;margin-top:-35px;margin-right:-28px;background:var(--cream);border-radius:50%;z-index:2}.letter-number{font-size:9px;letter-spacing:2px;opacity:.65;margin-top:9px}dialog h3{font-size:30px;line-height:1.15;margin:16px 0 20px;overflow-wrap:anywhere}.letter-rule{width:50px;height:3px;background:var(--pink);margin:0 auto 25px;border-radius:5px}.greeting-text{white-space:pre-wrap;overflow-wrap:break-word;text-align:left;font-size:17px;line-height:1.7;margin:0;max-height:none;display:block}.quiz-question{font-size:18px;font-weight:600;text-align:left}.answers button{text-align:left;line-height:1.5;padding:14px 18px;font-size:15px}.answers button:disabled{cursor:default;opacity:.6}.answers button.correct-answer{background:var(--yellow);opacity:1;border-color:var(--blue)}.answers button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--blue)}.quiz-reveal{background:var(--pink);padding:20px;border-radius:12px;text-align:left;margin-top:22px}.quiz-reveal p{margin:0 0 12px;font-size:15px}.quiz-reveal .correct-label{font-weight:700}.quiz-reveal .gift-reveal{padding-top:16px;border-top:1px solid #243fc533;font-weight:700;margin-bottom:0}.candy-card .title{line-height:1.3;min-height:39px;display:flex;align-items:center;justify-content:center}.candy-card small{font-size:10px}.candy-grid{row-gap:30px}.music{transition:background .2s}.music[aria-pressed=true]{background:#f79fc533}
@media(max-width:620px){.hero-copy>h1{margin-top:12px}.closing{padding:55px 16px 65px}dialog{max-width:calc(100% - 24px);width:calc(100% - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:42px 24px 28px;border-radius:14px}.close{top:-34px;margin-top:-31px;margin-right:-15px;min-width:44px;min-height:44px}.letter-number{font-size:8px;letter-spacing:1.5px}dialog h3{font-size:26px;line-height:1.15}.greeting-text{font-size:16px;line-height:1.65}.candy-card .title{font-size:12px;min-height:34px;margin-top:10px}.candy-card small{font-size:9px}.box-bottom>span:first-child{font-size:7px;max-width:85%}.quiz-question{font-size:16px}.answers button{font-size:14px;padding:13px 15px;border-radius:20px}.quiz-reveal{padding:16px}.quiz-reveal p{font-size:14px}}
/* The sender is a surprise until the candy opens. */
.candy-card{padding-bottom:5px}.candy-grid{row-gap:30px}.final-gift-photo{display:block;width:100%;height:auto;max-height:65vh;object-fit:contain;border-radius:10px;background:#fff;margin-top:8px}#modal:has(.final-gift-photo){max-width:860px}.final-section+.closing{border-top:0}.final-section .final-star{width:1em;height:1em}
@media(max-width:620px){.candy-grid{row-gap:24px}.candy-card{padding-bottom:0}.final-gift-photo{max-height:55dvh}.final-section{margin-top:0}}
.rocks-caption{font-size:11px;letter-spacing:1px;opacity:.7;margin:16px 0 20px}#modal .gift-wish{max-width:620px;margin:18px auto 0;font-size:17px;line-height:1.65;text-align:center}@media(max-width:620px){#modal .gift-wish{font-size:15px;line-height:1.6}.rocks-caption{font-size:10px;margin:14px 0 18px}}