@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#254bc0;--dark:#25396d;--paper:#fffef9;--pink:#f583a3;--yellow:#ffe58d;--line:#d7e2ef;font-family:'DM Sans',sans-serif;color:var(--dark);background:#edf2f9;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background-image:radial-gradient(#bdcbe0 .7px,transparent .7px);background-size:9px 9px}button,input{font:inherit}button,a,input,summary{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #d74b7d;outline-offset:5px}button:disabled{cursor:wait;opacity:.7}[hidden]{display:none!important}.svg-library{position:absolute;width:0;height:0;overflow:hidden}.topbar{max-width:1280px;margin:auto;padding:29px 48px;display:flex;align-items:center;justify-content:space-between}.brand{display:flex;align-items:center;gap:8px;text-decoration:none;font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-1px}.brand svg{width:29px;height:29px;color:var(--pink);transform:rotate(-13deg)}.brand span{font-size:11px;letter-spacing:0;font-weight:500;margin-left:4px;align-self:flex-start;margin-top:2px}.about-link{font-size:13px;text-decoration:none;border-bottom:1px solid #9aafd9;padding-bottom:4px}.about-link span{margin-left:12px}main{max-width:1130px;margin:auto}.intro{position:relative;text-align:center;padding:42px 20px 0}.eyebrow{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;color:#536a91;margin:0 0 18px}.eyebrow span{width:7px;height:7px;background:var(--pink);border-radius:50%}h1{font-family:'Caveat',cursive;font-size:clamp(64px,7.1vw,92px);line-height:.98;font-weight:700;color:var(--ink);letter-spacing:-3px;margin:0;position:relative;display:inline-block}h1>span{position:relative}h1>span:after{content:'';position:absolute;bottom:4px;left:5%;width:91%;height:12px;background:#f7afc9;z-index:-1;transform:rotate(-2deg)}.title-star{position:absolute;width:44px;height:44px;right:-65px;top:40px;color:var(--yellow);transform:rotate(12deg)}.lead{font-size:14px;line-height:1.9;margin:22px 0 8px}.lead s{text-decoration-color:#c85b83}.school-stamp{position:absolute;font-family:'Caveat',cursive;font-size:20px;color:#6379a4;text-align:left;transform:rotate(-10deg);left:25px;top:77px;border-bottom:1px dashed #8397b9;padding:0 0 7px}.doodle-caption{font-family:'Caveat',cursive;color:var(--ink);font-size:23px;transform:rotate(-4deg);margin-top:21px;margin-bottom:18px}.doodle-caption span{display:inline-block;font-size:42px;vertical-align:middle;transform:rotate(20deg);margin-left:6px}.play-area{display:grid;grid-template-columns:1fr minmax(0,660px) 1fr;align-items:start;gap:23px;padding:0 18px}.notebook{position:relative;background:var(--paper);border:1px solid #d0d7e0;box-shadow:4px 6px 0 #fffef9,5px 7px 0 #cdd5e0,10px 14px 28px #25396d0b;transform:rotate(-.7deg)}.paper-body{padding:22px 31px 12px 49px;background:repeating-linear-gradient(transparent,transparent 31px,#d7e2ef80 31px,#d7e2ef80 32px)}.paper-body:before{content:'';position:absolute;left:30px;top:0;bottom:0;width:1px;background:#efb5c5}.paper-holes{position:absolute;left:10px;top:28px;bottom:28px;display:flex;flex-direction:column;justify-content:space-between}.paper-holes i{width:9px;height:9px;background:#e4ebf4;border-radius:50%;box-shadow:inset 0 1px 2px #9bacc0}.paper-header{display:flex;justify-content:space-between;font-family:'Caveat',cursive;color:#667b9b;font-size:19px;margin-bottom:23px}.mode-picker{display:flex;padding:4px;border:1px solid #cbd5e7;border-radius:8px;background:#edf1f9;gap:5px;margin-bottom:28px}.mode{width:50%;border:0;padding:11px 6px;background:transparent;border-radius:5px;color:#5b6d92;font-weight:700;font-size:14px}.mode small{font-size:11px;font-weight:400;margin-left:6px}.mode.active{background:var(--ink);color:white;box-shadow:0 2px 3px #254bc020}.name-fields{display:grid;grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr);gap:13px;align-items:start}.person label{display:block;font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px}.person input{width:100%;min-width:0;border:0;border-bottom:2px solid #9ab0d9;padding:12px 5px;background:#fffef9b8;border-radius:0;color:var(--dark);outline:none;font-size:15px}.person input::placeholder{font-size:13px;color:#7b89a4}.person input:focus{border-color:var(--ink);background:#edf3ff}.plus{font-family:'Caveat',cursive;font-size:35px;color:#cf5a81;margin-top:28px;text-align:center}.birthday{margin-top:23px}.birthday input{font-size:14px}.error{font-size:13px;color:#a12549;line-height:1.5;margin:16px 0}.error:empty{margin:23px 0 0}.calculate{display:flex;align-items:center;justify-content:center;gap:13px;width:100%;background:var(--ink);color:white;border:1px solid #163d99;border-radius:6px;box-shadow:0 4px 0 #17398d;padding:14px 16px;font-weight:600;font-size:14px;transition:transform .15s,box-shadow .15s}.calculate:hover{background:#2042ad;transform:translateY(-1px)}.calculate:active{transform:translateY(3px);box-shadow:0 1px 0 #17398d}.calculate svg{width:23px;height:23px;color:#f89ab5;transform:rotate(12deg)}.privacy,.share-note{text-align:center;font-size:10px;color:#63738d;margin:17px 0 0;line-height:1.5}.paper-footer{border-top:1px dashed #b9c7da;padding-top:11px;display:flex;justify-content:space-between;font-family:'Caveat',cursive;font-size:20px;color:#7484a0;margin-top:25px}.paper-footer>span:last-child{font-size:25px;color:#c46183}.margin-notes{text-align:center;transform:rotate(-9deg);padding-top:54px}.flower{width:100px;margin:auto}.margin-notes p{font-family:'Caveat',cursive;font-size:25px;line-height:1.1;color:var(--ink);margin:5px 0}.note-arrow{font-size:60px;color:var(--ink);display:inline-block;transform:rotate(-20deg);margin-left:50px;line-height:1}.sticky-note{position:relative;background:var(--yellow);box-shadow:3px 6px 9px #23396b12;padding:21px 17px 20px;transform:rotate(8deg);margin-top:62px;color:#554e2a}.tape{position:absolute;width:65px;height:24px;background:#c7d6ec99;top:-13px;left:calc(50% - 32px);transform:rotate(-7deg)}.sticky-note>svg{width:34px;height:34px;color:#f48da7;transform:rotate(-12deg)}.sticky-note p{font-family:'Caveat',cursive;font-size:27px;font-weight:600;line-height:1.05;margin:8px 0 18px}.sticky-sign{font-family:'Caveat',cursive;font-size:15px}.explanation{text-align:center;margin:67px auto 0;padding:0 24px;max-width:640px}.mini-doodle{font-family:'Caveat',cursive;font-size:29px;transform:rotate(-5deg);color:#8392b5;margin-bottom:13px}.explanation h2{font-size:17px;letter-spacing:-.5px}.explanation>p{font-size:12px;color:#66758e;line-height:1.9}details{margin-top:22px;text-align:left;font-size:12px;line-height:1.8;color:#536582}summary{cursor:pointer;list-style:none;padding:13px 0;border-top:1px solid #ccd6e5;display:flex;justify-content:space-between;color:var(--ink)}summary::-webkit-details-marker{display:none}details[open] summary span{transform:rotate(45deg)}.site-footer{max-width:1184px;margin:56px auto 0;border-top:1px solid #ccd6e5;padding:20px 0 26px;display:flex;justify-content:space-between;font-size:11px;color:#6e7f9a}.result-top{display:flex;justify-content:space-between;font-size:12px;color:#677d9f}.pair{font-family:'Caveat',cursive;font-size:30px;text-align:center;color:var(--ink);overflow-wrap:anywhere;margin:20px 0 0}.score-wrap{position:relative;text-align:center;width:max-content;margin:auto}.score{font-family:'Caveat',cursive;font-weight:700;color:var(--ink);font-size:112px;line-height:1.05;margin:3px 0 0;letter-spacing:-5px}.score>span:last-child{font-size:52px}.score-spark{position:absolute;right:-45px;top:15px;width:37px;height:37px;color:var(--yellow)}.score-note{font-family:'Caveat',cursive;font-size:20px;background:#f9bbcf;display:inline-block;transform:rotate(-4deg);padding:0 12px}#result h2{text-align:center;font-family:'Caveat',cursive;font-size:32px;color:var(--ink);margin:22px 0 7px}#result-copy{text-align:center;font-size:13px;line-height:1.8;max-width:400px;margin:0 auto}.metrics{display:grid;gap:14px;margin:24px 0}.metric-row{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}.track{height:7px;background:#e3e8f4;border-radius:5px;overflow:hidden}.track i{display:block;height:100%;background:#db7698;border-radius:5px}.result-disclaimer{font-size:10px;text-align:center;margin:22px 0;color:#697c98}.share-actions{display:grid;grid-template-columns:1.2fr 1fr;gap:10px}.secondary{background:var(--paper);color:var(--ink);border:1px solid #a4b6d4;border-radius:6px;font-size:12px;padding:12px}.text-button{display:block;margin:19px auto 0;border:0;background:none;color:var(--ink);font-size:12px;text-decoration:underline;text-underline-offset:4px}#status{font-size:12px;text-align:center;color:var(--ink);line-height:1.5;overflow-wrap:anywhere}#status:empty{display:none}.reveal{animation:reveal .5s ease-out}.thinking svg{animation:beat .55s ease-in-out infinite alternate}@keyframes reveal{from{opacity:0;transform:translateY(12px) rotate(2deg)}to{opacity:1;transform:none}}@keyframes beat{to{transform:scale(1.3) rotate(-10deg)}}@media(min-width:1400px){.intro{padding-top:65px}}@media(max-width:950px){.school-stamp{display:none}.play-area{grid-template-columns:1fr minmax(0,620px) 1fr;gap:10px}.sticky-note{padding:15px 10px}.sticky-note p{font-size:21px}.sticky-sign{font-size:12px}.margin-notes p{font-size:21px}.flower{width:75px}.site-footer{margin-left:30px;margin-right:30px}}@media(max-width:720px){.topbar{padding:22px}.brand{font-size:18px}.brand span{font-size:9px}.about-link{font-size:12px}.intro{padding-top:30px}h1{font-size:69px;letter-spacing:-2px}.title-star{right:-30px;top:20px;width:27px;height:27px}.eyebrow{font-size:10px}.lead{font-size:12px;line-height:1.9;margin-top:19px}.doodle-caption{font-size:22px;margin-top:12px;margin-bottom:12px}.play-area{display:block;padding:0 21px;max-width:600px;margin:auto}.margin-notes,.sticky-note{display:none}.paper-body{padding:20px 20px 12px 39px}.paper-body:before{left:25px}.paper-holes{left:8px}.paper-header{font-size:16px}.mode{font-size:13px}.mode small{font-size:10px;margin-left:2px}.name-fields{gap:8px;grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr)}.person input::placeholder{font-size:11px}.person label{font-size:12px}.plus{font-size:27px}.explanation{margin-top:47px}.site-footer{gap:12px;flex-direction:column;text-align:center;margin-top:35px}.score{font-size:100px}}@media(max-width:380px){h1{font-size:59px}.paper-body{padding-right:15px}.name-fields{grid-template-columns:1fr}.plus{margin:0;line-height:1;text-align:center}.birthday{margin-top:15px}.name-fields .person:last-child{margin-top:4px}.mode small{display:block;margin-top:3px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep the hand-drawn star inside narrow screens without clipping content. */
@media(max-width:720px){.title-star{right:0;top:-7px}}
@media(min-width:721px) and (max-width:1100px){.play-area{display:block;max-width:700px;margin:auto;padding:0 25px}.margin-notes,.sticky-note{display:none}}

.loading-tease{font-family:'Caveat',cursive;font-size:25px;font-weight:600;text-align:center;color:var(--ink);min-height:34px;margin:19px 0 0;line-height:1.35}

.support-box{margin:24px 0 0;padding:18px;background:#fff4c9;border:1px dashed #c9b87c;text-align:center}.support-box h3{font-family:'Caveat',cursive;font-size:28px;color:var(--ink);margin:0}.support-box p{font-size:12px;line-height:1.6;margin:8px 0 12px}.support-box small{display:block;font-size:10px;line-height:1.6;color:#6c6652;margin-top:10px}.support-box .secondary{background:#fffdf4}.support-box #support-status:empty{display:none}.leaderboard{max-width:660px;margin:65px auto 0;padding:26px 30px;background:#fffef9;border:1px solid #c5d2e5;border-top:5px solid var(--pink);box-shadow:5px 5px 0 #dfe7f3}.board-heading{display:flex;justify-content:space-between;align-items:center}.board-kicker{font-family:'Caveat',cursive;font-size:23px;color:#b24873;margin:0 0 10px}.leaderboard h2{font-family:'Caveat',cursive;font-size:40px;line-height:1.1;color:var(--ink);margin:0}.board-star{font-size:75px;color:#c59520;transform:rotate(12deg)}.board-intro{font-size:12px;line-height:1.8;color:#5e7395;max-width:490px}.board-meta{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:10px;color:#617495;border-bottom:1px solid #d5deed;padding:10px 0}.board-meta .text-button{margin:0;white-space:nowrap;font-size:10px}#board-list{padding:0;margin:0;list-style:none}#board-list li{display:flex;align-items:center;gap:18px;padding:17px 0;border-bottom:1px dashed #d4dceb}.board-rank{font-family:'Caveat',cursive;font-size:27px;color:#8b9cba;width:30px}.board-names{flex:1;min-width:0;overflow-wrap:anywhere}.board-names strong{display:block;font-size:15px;font-weight:600;color:var(--ink)}.board-names small{font-size:10px;color:#647594;display:block;margin-top:5px}.board-fame{font-family:'Caveat',cursive;font-size:35px;color:#ba4871}#board-empty{text-align:center;padding:26px 0 12px}#board-empty>span{font-family:'Caveat',cursive;font-size:43px;color:#a0b0cb}#board-empty p{font-size:12px;line-height:1.8;color:#70819e}.board-footnote{font-size:10px;line-height:1.7;color:#6d7f9c;margin:16px 0 0}#board-error{font-size:12px;color:#a12549}.privacy{font-size:10px;max-width:420px;margin:17px auto 0}.loading-tease{min-height:68px;display:flex;align-items:center;justify-content:center}@media(max-width:720px){.leaderboard{margin:45px 21px 0;padding:22px}.leaderboard h2{font-size:34px}.board-star{font-size:50px}.board-heading{gap:8px}.board-meta{flex-wrap:wrap}.board-names strong{font-size:13px}}