@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--paper:#faf5e9;--ink:#29251f;--blue:#395bd5;--yellow:#ffd84d;--pink:#f5b5c5;--lilac:#b7c9f8;--red:#ed553b;--line:#d9d3c6;--display:"Space Grotesk",sans-serif;--body:"DM Sans",sans-serif;--scroll-thumb:#9c968b;--scroll-track:var(--paper);--scroll-hover:#625d54;--scroll-active:var(--ink);color:var(--ink);background:var(--paper);font-family:var(--body);font-synthesis:none;scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin;scrollbar-gutter:stable}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0}::selection{background:var(--yellow);color:var(--ink)}a,button{-webkit-tap-highlight-color:transparent;cursor:pointer}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit}a:focus-visible,button:focus-visible{outline:3px solid var(--blue);outline-offset:6px}a:active,button:active{transform:translateY(2px)}.page-shell{max-width:1440px;margin:auto;padding:0 6%}header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;height:108px;display:flex}.wordmark{font-family:var(--display);letter-spacing:-3px;font-size:38px;font-weight:700}.wordmark span{color:var(--red);vertical-align:middle;margin-left:4px;font-size:38px;transition:transform .3s;display:inline-block}.wordmark:hover span{transform:rotate(90deg)}.header-note{font-size:13px}.nav-link{border-bottom:2px solid var(--ink);padding:8px 0;font-size:14px;font-weight:700}.nav-link:hover{color:var(--blue);border-color:var(--blue)}.nav-link span{margin-left:14px}.hero{grid-template-columns:1.15fr 1fr;align-items:center;gap:6%;padding:76px 0 89px;display:grid}.eyebrow,.label{font-family:var(--display);letter-spacing:1.7px;font-size:10px;font-weight:600}.eyebrow{align-items:center;gap:9px;margin:0 0 24px;display:flex}.status-dot{background:var(--blue);border-radius:50%;width:8px;height:8px}h1,h2,h3,p{margin-top:0}h1{font-family:var(--display);letter-spacing:-8px;margin-bottom:29px;font-size:clamp(78px,8.8vw,124px);font-weight:700;line-height:.98}.name{color:var(--blue);display:inline-block;position:relative}.name svg{width:100%;height:23px;stroke:var(--red);stroke-width:4px;fill:none;stroke-linecap:round;position:absolute;bottom:-13px;left:0}.period{color:var(--red)}.intro{margin-top:30px;margin-bottom:28px;font-size:19px;line-height:1.55}.intro strong{font-weight:500}.primary{border:2px solid var(--ink);background:var(--yellow);box-shadow:4px 4px 0 var(--ink);border-radius:8px;align-items:center;gap:43px;padding:15px 21px;font-size:14px;font-weight:700;transition:box-shadow .15s,transform .15s;display:inline-flex}.primary:hover{box-shadow:6px 6px 0 var(--ink);transform:translate(-2px,-2px)}.tiny{color:#696259;margin:18px 0 0;font-size:11px}.portrait-scene{isolation:isolate;padding:36px 15px 32px;position:relative}.polaroid{background:#fffdf8;margin:0;padding:16px 16px 0;position:relative;transform:rotate(6deg);box-shadow:5px 9px #29251f12,0 0 0 1px #29251f12}.polaroid:before{content:"";z-index:2;clip-path:polygon(2% 0,98% 4%,100% 94%,0 100%);background:#e8bf79aa;width:110px;height:36px;position:absolute;top:-18px;left:calc(50% - 55px);transform:rotate(-9deg)}.photo-wrap{aspect-ratio:1;background:var(--blue);overflow:hidden}.photo-wrap img{object-fit:cover;width:100%;height:100%;transition:transform .5s;display:block}.polaroid:hover img{transform:scale(1.05)}figcaption{font-size:12px;font-family:var(--display);justify-content:space-between;gap:8px;padding:19px 2px 21px;display:flex}figcaption span{color:var(--red);font-size:23px;line-height:1}.photo-note{font-family:cursive;font-size:16px;position:absolute;top:-12px;right:10px;transform:rotate(7deg)}.photo-note span{vertical-align:top;margin-top:8px;font-size:38px;display:inline-block}.star{color:var(--red);z-index:3;font-size:100px;line-height:1;position:absolute;top:3px;left:-40px;transform:rotate(-12deg)}.sticker{background:var(--yellow);border:2px solid var(--ink);width:122px;height:122px;font-family:var(--display);box-shadow:3px 3px 0 var(--ink);border-radius:50%;flex-direction:column;justify-content:center;align-items:center;font-size:26px;line-height:1.1;display:flex;position:absolute;bottom:24px;right:-23px;transform:rotate(14deg)}.sticker strong{font-size:19px}.fine-print{font-size:10px;position:absolute;bottom:-14px;right:3px;transform:rotate(5deg)}.loop-doodle{width:125px;stroke:var(--blue);stroke-width:3px;stroke-linecap:round;position:absolute;bottom:-10px;left:-60px}.ticker{background:var(--blue);color:var(--paper);border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);margin:0 -6.82%;padding:16px 0;overflow:hidden;transform:rotate(-1.6deg)}.ticker div{white-space:nowrap;font-family:var(--display);letter-spacing:2px;width:max-content;font-size:14px;font-weight:600}.ticker span{color:var(--yellow);vertical-align:middle;margin:0 30px;font-size:22px}.toybox{padding:80px 0 65px;scroll-margin-top:30px}.section-heading{justify-content:space-between;align-items:end;gap:20px;margin-bottom:28px;display:flex}.section-heading .eyebrow{margin-bottom:12px}h2{font-family:var(--display);letter-spacing:-1.5px;margin-bottom:0;font-size:33px;line-height:1.15}.hand-note{margin-bottom:8px;font-family:cursive;font-size:15px;transform:rotate(-5deg)}.cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.card{border:2px solid var(--ink);min-height:317px;box-shadow:3px 4px 0 var(--ink);border-radius:15px;flex-direction:column;padding:25px;display:flex;position:relative}.thought-card{background:var(--pink);transform:rotate(-1.5deg)}.card-top{justify-content:space-between;align-items:center;margin-bottom:25px;display:flex}.card h3{font-family:var(--display);letter-spacing:-.7px;margin-bottom:17px;font-size:24px;line-height:1.1}.card p{font-size:14px;line-height:1.55}.thought-card #thought{min-height:88px}.text-button{border:0;border-bottom:1px solid var(--ink);background:0 0;justify-content:space-between;align-self:start;gap:15px;min-height:40px;margin-top:auto;padding:10px 0 7px;font-size:12px;font-weight:700;display:flex}.text-button span{font-size:18px}.text-button:hover{color:var(--blue);border-color:var(--blue)}.button-card{background:var(--yellow);text-align:center;align-items:center;transform:rotate(1deg)}.button-card .label{align-self:start}.button-card p{min-height:38px;margin:18px 0 0;font-size:12px}#big-button{border:3px solid var(--ink);background:var(--red);width:148px;height:148px;box-shadow:0 8px 0 #9a3627,0 11px 0 var(--ink);border-radius:50%;place-items:center;margin-top:24px;transition:transform .15s,box-shadow .15s;display:grid}#big-button span{font-family:var(--display);font-size:21px;font-weight:700;line-height:1.05;transform:rotate(-10deg)}#big-button:hover{background:#f36b52;transform:rotate(-5deg)}#big-button:active{box-shadow:0 1px 0 #9a3627,0 4px 0 var(--ink);transform:translateY(7px)}.mood-card{background:var(--lilac);transition:background-color .2s;transform:rotate(-1deg)}.face{align-self:center;margin:10px 0 9px;font-size:83px;line-height:1.1}.mood-card h3{margin-bottom:7px;font-size:21px}.mood-card p{margin-bottom:12px;font-size:12px}.signoff{border-bottom:1px solid var(--line);align-items:center;gap:25px;padding:33px 0 45px;display:flex}.signoff-flower{color:var(--blue);font-size:70px;line-height:1}.signoff h2{margin-bottom:10px;font-size:29px}.signoff p{margin:0;font-size:14px;line-height:1.7}.back-top{margin-left:auto;padding:12px 0;font-size:13px;font-weight:700}.back-top:hover{color:var(--blue)}.back-top span{margin-left:20px}footer{color:#696259;justify-content:space-between;align-items:center;gap:20px;min-height:90px;font-size:11px;display:flex}#secret{background:0 0;border:0;padding:12px;font-size:12px;transform:rotate(-7deg)}#secret:hover{color:var(--blue)}.announcement{background:var(--ink);color:var(--paper);opacity:0;pointer-events:none;z-index:20;border-radius:12px;width:max-content;max-width:calc(100vw - 32px);padding:16px 22px;font-size:14px;transition:opacity .2s,transform .2s;position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);box-shadow:0 5px 15px #29251f22}.announcement.visible{opacity:1;transform:translate(-50%)}#confetti{pointer-events:none;z-index:30;position:fixed;inset:0;overflow:hidden}#confetti i{left:var(--x);width:12px;height:19px;animation:fall 1.8s var(--delay) ease-in forwards;position:absolute;top:-25px}#confetti i:nth-child(3n){border-radius:50%;width:12px;height:12px}@keyframes fall{to{transform:translateY(105vh) rotate(var(--spin));opacity:.3}}.skip{background:var(--yellow);z-index:100;padding:12px;position:fixed;top:12px;left:12px;transform:translateY(-150%)}.skip:focus{transform:none}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:var(--scroll-track)}::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border:2px solid var(--scroll-track);border-radius:8px}::-webkit-scrollbar-thumb:hover{background:var(--scroll-hover)}::-webkit-scrollbar-thumb:active{background:var(--scroll-active)}@media (width>=1500px){h1{font-size:124px}}@media (width<=900px){.hero{gap:4%;padding:60px 0 70px}h1{letter-spacing:-6px;font-size:90px}.intro{font-size:17px}.cards{gap:14px}.card{padding:20px 17px}.card h3{font-size:21px}.sticker{width:100px;height:100px;right:-8px}.hand-note{display:none}.photo-note{font-size:13px;right:0}.star{font-size:75px;left:-15px}.loop-doodle{width:100px;left:-28px}figcaption{font-size:10px}.section-heading h2{font-size:30px}}@media (width<=650px){.page-shell{padding:0 7%}header{height:84px}.header-note{display:none}.wordmark{font-size:32px}.hero{grid-template-columns:1fr;gap:52px;padding:45px 0 63px}.hero-copy{position:relative}h1{letter-spacing:-6px;font-size:clamp(78px,20vw,116px)}.eyebrow{font-size:9px}.intro{font-size:18px}.portrait-scene{justify-self:center;width:min(100%,350px);padding:20px 16px 26px}.photo-note{top:-25px;right:3px}.polaroid{transform:rotate(4deg)}.star{top:-7px;left:-10px}.sticker{bottom:14px;right:-3px}.fine-print{bottom:-18px}.ticker{margin:0 -8.14%}.toybox{padding:55px 0 35px}.cards{grid-template-columns:1fr;gap:24px}.card{min-height:280px;padding:25px}.card h3{font-size:27px}.thought-card #thought{min-height:65px;font-size:16px}.card-top{margin-bottom:18px}.text-button{font-size:14px}.button-card{min-height:307px}.button-card .label{align-self:center}.mood-card{min-height:310px}.face{font-size:86px}.mood-card h3{font-size:25px}.mood-card p{font-size:14px}.section-heading h2{max-width:260px;font-size:28px}.signoff{flex-wrap:wrap;gap:16px;padding:30px 0}.signoff-flower{font-size:48px}.signoff h2{font-size:23px}.signoff p{font-size:12px}.back-top{margin-left:64px}footer{flex-wrap:wrap;gap:5px 15px;padding:22px 0}footer span:nth-child(2){flex-basis:100%;order:3}#secret{margin-left:auto}.announcement{text-align:center;font-size:12px}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,:before,:after{transition:none!important;animation:none!important}.polaroid:hover img{transform:none}}@media (forced-colors:active){:root{--scroll-thumb:ButtonText;--scroll-track:Canvas;--scroll-hover:Highlight;--scroll-active:Highlight}.status-dot{background:canvastext}.card,.primary,.polaroid,#big-button{border:2px solid canvastext}.name{color:linktext}}.sidequest{border:2px dashed var(--ink);background:#f1eddf;border-radius:15px;margin:0 0 35px;padding:29px 32px}.quest-header{justify-content:space-between;align-items:center;display:flex}.quest-header .eyebrow{margin-bottom:12px}.quest-arrow{color:var(--blue);font-size:50px;line-height:1;transform:rotate(20deg)}.quest-options{flex-wrap:wrap;gap:10px;margin:25px 0 21px;display:flex}.quest-option{border:1.5px solid var(--ink);background:var(--paper);border-radius:99px;padding:12px 17px;font-size:13px;font-weight:600;transition:background .15s,transform .15s}.quest-option:hover{background:var(--yellow);transform:rotate(-2deg)}.quest-option[aria-pressed=true]{background:var(--ink);color:var(--paper)}.quest-result{min-height:89px}.quest-result .label{color:#625d54;font-size:9px}.quest-result p{max-width:740px;margin:10px 0 0;font-size:17px;line-height:1.5}@media (width<=650px){.sidequest{padding:25px 20px}.quest-header h2{font-size:27px}.quest-option{padding:11px 12px;font-size:12px}.quest-result{min-height:136px}.quest-result p{font-size:16px}}@media (prefers-reduced-motion:reduce){.quest-option{transition:none}}
