@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:light;--ink:#433747;--muted:#8b7e8c;--purple:#8b65b8;--paper:#fffdf9;--line:#e9dfe8;font-family:'DM Sans',system-ui,sans-serif;color:var(--ink);background:#faf7f5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 25% 46%,#f5e8ed 0,transparent 46%),radial-gradient(ellipse at 88% 75%,#eee7f4 0,transparent 45%),#faf7f5}button,a{-webkit-tap-highlight-color:transparent}button{font:600 15px/1.3 'DM Sans',system-ui,sans-serif;cursor:pointer;touch-action:manipulation;border:0;min-height:50px;padding:15px 24px;border-radius:15px;transition:transform .2s,box-shadow .2s,background .2s}button:focus-visible,a:focus-visible{outline:3px solid #b292cf;outline-offset:5px}button:not(.secondary,.text-button,.sound){color:#fff;background:linear-gradient(145deg,#a184c9,#835bb2);box-shadow:0 5px 15px #8660ad24,inset 0 1px #ffffff30}button span{margin-left:7px}.secondary{background:#ffffffa8;border:1px solid #ded0e1;color:#826c8a}.text-button{color:#9a729e;background:transparent;padding:12px 16px}.hidden{display:none!important}main{position:relative;isolation:isolate;max-width:1180px;margin:0 auto;min-height:100svh;padding:0 48px;display:grid;grid-template-columns:1.1fr 1fr;grid-template-rows:88px 1fr 80px;column-gap:24px;align-items:center}.site-header,.site-footer{position:relative;z-index:5;grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;width:100%}.brand{display:flex;align-items:center;gap:11px;font-size:13px;font-weight:500;letter-spacing:.15px}.brand-mark{display:grid;place-items:center;width:33px;height:33px;border:1px solid #e2d4e5;border-radius:12px;color:#a77aa8;font-size:21px;background:#ffffff85}.header-note{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:#b399ae}.site-footer{align-self:end;min-height:80px;border-top:1px solid #cbbbd326;padding-bottom:env(safe-area-inset-bottom,0px)}.model-credit{font-size:10px;color:#9d8a9e;text-decoration:none;padding:12px 0}.sound{display:flex;align-items:center;gap:7px;min-height:44px;padding:8px 0 8px 16px;background:transparent;color:#a28aa3;font-size:22px}.sound span{font:11px 'DM Sans',system-ui,sans-serif;margin:0}.sound[aria-pressed=true]{color:#825da4}#scene{position:relative;grid-column:1;grid-row:2;width:100%;height:min(72svh,680px);min-height:310px;opacity:0;transition:opacity .6s;align-self:center}#scene.visible{opacity:1}#scene:not(.visible){display:none}canvas{display:block;width:100%;height:100%;outline:none}#model-loading{position:absolute;inset:45% 0 auto;text-align:center;font:22px 'Caveat',cursive;color:#a587a5}.question,.unsure,.success{grid-column:2;grid-row:2;position:relative;z-index:2;width:100%;max-width:430px;animation:appear .65s both}.eyebrow{font:500 11px/1.6 'DM Sans',sans-serif;color:#a383a6;letter-spacing:1.3px;margin:0 0 16px}.question h2{font:600 clamp(38px,4.3vw,52px)/1.13 'Caveat','Segoe Print',cursive;letter-spacing:-.6px;margin:0 0 26px;max-width:400px;text-wrap:balance}.choices{display:flex;align-items:center;gap:12px}.choices button:first-child{min-width:169px}.choices .secondary{min-width:101px}.hint{color:#a08d9f;font-size:12px;line-height:1.8;max-width:280px;margin:21px 0 0}.panel{z-index:2;animation:appear .65s both}.airmail{border:5px solid transparent;border-radius:24px;background:linear-gradient(var(--paper),var(--paper)) padding-box,repeating-linear-gradient(130deg,#d8a1b7 0 10px,var(--paper) 10px 21px,#95b1c4 21px 31px,var(--paper) 31px 42px) border-box;box-shadow:0 20px 70px #79608212,0 3px 8px #79608206}.script{font-family:'Caveat','Segoe Print',cursive;font-size:29px;line-height:1.3}.pink{color:#bd7c9b;margin:0 0 14px}#letter{grid-column:1/-1;grid-row:2;justify-self:center;width:min(100%,600px);padding:35px 43px 29px;margin:32px 0 48px;text-align:left}#letter h2{font:600 35px/1.2 'Caveat','Segoe Print',cursive;margin:0 0 22px;color:#57455c}.letter-copy{font-size:14px;line-height:1.95;letter-spacing:.05px;color:#7c6d7c;margin:0 0 16px}.signature{color:#a180ac;margin:23px 0 15px}.letter-action{border-top:1px solid #eee5ec;margin-top:20px;padding-top:14px;text-align:right}.letter-action button{font-size:13px;color:#9869a3;padding-right:0}.unsure{padding:27px 28px;max-width:410px}.unsure h2{font:600 36px/1.2 'Caveat',cursive;margin:0 0 10px}.unsure p{font-size:13px;line-height:1.8;color:#9a879b;margin:0 0 22px}.unsure .choices{gap:6px}.unsure .choices button:first-child{min-width:140px}.unsure .text-button{font-size:12px;padding-left:12px;padding-right:8px}.success{padding:34px 29px;background:#fffdfbd9;border:1px solid #fff;border-radius:28px;box-shadow:0 18px 70px #a486ac12;text-align:center}.heart-badge{display:grid;place-items:center;width:59px;height:59px;margin:0 auto 22px;background:#f5e0eb;color:#d48baa;border-radius:22px;font:29px Arial}.success h1{font:600 42px/1.1 'Caveat',cursive;margin:0 0 18px;text-wrap:balance}.success>p:not(.script){font-size:14px;line-height:1.85;color:#968196;margin:0 0 17px}.success .signature{font-size:25px;margin:16px 0}.success button{font-size:12px}#hearts{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:-1}.floating{position:absolute;color:#e9b1c8;opacity:0;animation:float 7s ease-in infinite;font:15px Arial}.confetti{position:absolute;width:7px;height:10px;animation:fall 4s ease-in forwards;top:-20px}#error{position:fixed;z-index:10;bottom:80px;left:50%;translate:-50% 0;max-width:320px;width:calc(100% - 32px);background:#fff6fa;border:1px solid #ecd5e3;padding:15px;border-radius:14px;font-size:12px;line-height:1.7;text-align:center;color:#a36880}main[data-view=letter]{grid-template-rows:88px auto 80px}@media(hover:hover){button:hover{transform:translateY(-2px)}button:not(.secondary,.text-button,.sound):hover{box-shadow:0 8px 20px #8660ad34}.secondary:hover{background:#fff}.model-credit:hover{text-decoration:underline}}@keyframes appear{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}@keyframes float{0%{opacity:0;transform:translateY(35px) rotate(-10deg)}30%{opacity:.4}100%{opacity:0;transform:translateY(-130px) rotate(20deg)}}@keyframes fall{to{transform:translateY(110vh) rotate(800deg)}}
@media(max-width:899px){main{display:flex;flex-direction:column;gap:0;padding:0 28px;min-height:100svh}.site-header{min-height:70px;flex:none}.header-note{font-size:9px;letter-spacing:1.6px}#scene{height:clamp(280px,46svh,450px);min-height:0;max-width:570px;flex:none}.question,.unsure,.success{max-width:460px;text-align:center;flex:none}.question{padding:6px 8px 27px}.question h2{font-size:42px;max-width:370px;margin:0 auto 23px}.eyebrow{font-size:10px;letter-spacing:1px;margin-bottom:12px}.choices{justify-content:center}.hint{margin:18px auto 0;max-width:300px}.site-footer{min-height:70px;margin-top:auto;flex:none}#letter{margin:16px 0 30px;padding:32px;max-width:600px}.unsure{margin:6px 0 28px;padding:23px}.success{margin:5px 0 28px;max-width:390px}.success h1{font-size:40px}main[data-view=letter] .site-footer{margin-top:auto}main[data-view=letter] .header-note{display:none}}
@media(max-width:480px){main{padding:0 20px}.site-header{min-height:63px}.brand{font-size:11px;gap:9px}.brand-mark{width:30px;height:30px;border-radius:11px;font-size:19px}.header-note{font-size:8px;letter-spacing:1.4px}#scene{height:clamp(245px,44svh,385px)}.question{padding:5px 0 27px}.question h2{font-size:36px;line-height:1.14;max-width:330px;margin-bottom:23px}.eyebrow{font-size:9px;letter-spacing:.7px;margin-bottom:11px}.choices{gap:10px}.choices button{padding:14px 20px;font-size:14px;min-height:50px}.choices button:first-child{min-width:164px}.choices .secondary{min-width:99px}.hint{font-size:11px;max-width:265px;margin-top:17px}.site-footer{min-height:64px}.model-credit{font-size:9px}.sound span{font-size:10px}.sound{font-size:20px}#letter{margin:13px 0 28px;padding:25px 22px 19px;border-width:4px;border-radius:21px}#letter h2{font-size:30px;margin-bottom:20px}.script{font-size:27px}.letter-copy{font-size:13px;line-height:1.95;margin-bottom:16px}.signature{margin-top:20px;font-size:27px}.letter-action{margin-top:18px;padding-top:10px}.letter-action button{font-size:12px}.unsure{padding:20px 16px;border-width:4px;border-radius:21px}.unsure h2{font-size:33px}.unsure p{font-size:12px;margin-bottom:18px}.unsure .choices button:first-child{min-width:130px}.unsure .text-button{font-size:11px}.success{padding:28px 23px;border-radius:24px}.success h1{font-size:36px}.success>p:not(.script){font-size:13px}.success .signature{font-size:24px}}
@media(max-width:350px){main{padding:0 15px}.header-note{display:none}.question h2{font-size:33px}.eyebrow{letter-spacing:.3px}.choices button:first-child{min-width:149px}.choices .secondary{min-width:88px}.choices button{padding:13px 15px}#letter{padding:23px 19px}.letter-copy{font-size:13px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
.site-header{padding-top:env(safe-area-inset-top,0px)}@media(max-width:899px){.site-header{min-height:calc(70px + env(safe-area-inset-top,0px))}}@media(max-width:480px){.site-header{min-height:calc(63px + env(safe-area-inset-top,0px))}}
button:disabled{cursor:wait;filter:saturate(.8)}#scene{overflow:hidden;contain:layout paint}#scene canvas{touch-action:pan-y}.letter-copy{animation:ink-in .65s ease both}.letter-copy:nth-of-type(3){animation-delay:.10s}.letter-copy:nth-of-type(4){animation-delay:.18s}#letter{transform-origin:50% 20%;animation:letter-open .65s cubic-bezier(.22,.8,.25,1) both}.success .heart-badge{animation:heart-arrive .7s cubic-bezier(.2,.9,.3,1) both}@keyframes letter-open{from{opacity:0;transform:perspective(1200px) rotateX(-9deg) translateY(20px) scale(.97)}to{opacity:1;transform:perspective(1200px) rotateX(0) translateY(0) scale(1)}}@keyframes ink-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}@keyframes heart-arrive{0%{transform:scale(.7)}60%{transform:scale(1.09)}100%{transform:scale(1)}}