:root{--bg:#fff6f8;--white:#fffdfd;--ink:#4d3041;--muted:#8e7985;--pink:#c46f92;--pink-dark:#a75177;--blush:#f8dce7;--blush-soft:#fff0f5;--line:#f0dbe4;--serif:'Playfair Display',Georgia,serif;--sans:'DM Sans',Arial,sans-serif}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}body{font-family:var(--sans);color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased}button,textarea{font:inherit}button{cursor:pointer}button:focus-visible,textarea:focus-visible{outline:3px solid #bf6f96;outline-offset:3px}button{-webkit-tap-highlight-color:transparent}[hidden]{display:none!important}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-weight:400}em{font-family:var(--serif);font-weight:400}::selection{background:#f5cada;color:var(--ink)}
.site-shell{height:100dvh;min-height:0;display:flex;flex-direction:column}.site-header{height:75px;flex:0 0 75px;background:#fffafb;border-bottom:1px solid var(--line);padding:0 clamp(20px,5vw,72px);display:flex;align-items:center;justify-content:space-between;gap:16px}.brand{display:flex;align-items:center;gap:9px;font:600 22px var(--serif);letter-spacing:-.055em;white-space:nowrap}.brand-emoji{font:23px var(--sans)}.brand-period{color:var(--pink)}.page-dots{display:flex;gap:8px;align-items:center}.page-dots span{width:6px;height:6px;border-radius:50%;background:#edd1dc;transition:.3s}.page-dots span.active{width:24px;border-radius:20px;background:var(--pink)}.music-button{min-width:121px;border:1px solid #efd3df;background:#fff3f7;color:#a35f7b;font-size:11px;font-weight:700;padding:11px 14px;border-radius:50px;display:flex;gap:8px;justify-content:center;align-items:center}.music-button span:first-child{font-size:16px}.music-button.playing{background:#fbe2eb;border-color:#e6b4c7}.stage{position:relative;flex:1;min-height:0;overflow:hidden}.screen{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;padding:24px clamp(24px,6vw,86px);overflow:hidden;background:#fff6f8}.screen.active{animation:screenEnter .4s ease both}.screen-welcome{background:#fff6f8}.screen-letter{background:#fffaf9}.screen-friends{background:#fff4f7}.screen-quiz{background:#fff7fa}.screen-results{background:#fff5f8}.screen-final{background:#fff7f9}@keyframes screenEnter{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:translateX(0)}}
.capsule,.kicker,.card-top,.quiz-meta,.question-tag,.results-top,.microcopy,.screen-foot,.soft-note{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase}.capsule{display:inline-flex;align-items:center;gap:8px;border:1px solid #eecbd9;background:#fffafa;color:#ad6382;padding:12px 17px;border-radius:50px;letter-spacing:.08em}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;border-radius:9px;border:1px solid transparent;font-size:13px;font-weight:700;min-height:46px;padding:12px 20px;transition:background .2s,transform .2s,box-shadow .2s}.button:hover:not(:disabled){transform:translateY(-2px)}.button-primary{background:#bd6b8d;color:#fff;box-shadow:0 7px 18px #b75d8024}.button-primary:hover:not(:disabled){background:#a9547a;box-shadow:0 10px 22px #b75d8036}.button-primary:disabled{opacity:.38;cursor:not-allowed;box-shadow:none}.button-secondary{background:#fffafc;color:#a65b7e;border-color:#eccbd9}.button-secondary:hover{background:#ffedf3}.button-quiet,.button-text{color:#ab8091;background:transparent;padding-left:8px;padding-right:8px}.button-quiet:hover,.button-text:hover{color:#7f405e}.button span{font-family:Arial,sans-serif}.button-wide{min-width:255px;min-height:55px}
/* Opening */
.welcome-card{text-align:center;width:min(850px,100%);padding:10px 0 30px}.welcome-flower{font-size:63px;margin:24px auto 7px;line-height:1.1}.mini-line{font:italic 19px var(--serif);color:#ad8291;margin:0 0 12px}.welcome-card h1{font:400 clamp(72px,11vw,145px)/1.12 var(--serif);letter-spacing:-.075em;margin:0 0 14px}.welcome-card h1 em{color:#c87997}.lead{color:#82707d;font:400 clamp(17px,1.7vw,21px)/1.65 var(--serif);margin:0 auto 27px}.lead i{color:#b97d95}.microcopy{text-transform:none;letter-spacing:.03em;color:#af8d9d;font-size:11px;margin:17px 0 0}.screen-foot{position:absolute;bottom:23px;left:6%;right:6%;display:flex;justify-content:space-between;color:#b593a2;font-size:9px}
/* Letter and friendship views */
.screen-inner{width:min(1150px,100%)}.story-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(30px,6vw,90px)}.kicker{color:#bb7795;letter-spacing:.13em}.heading-emoji{font-size:52px;margin:24px 0 9px;line-height:1.1}.story-heading h2,.quiz-intro h2,.results-heading h2,.final-card h2{font:400 clamp(43px,4.8vw,67px)/1.22 var(--serif);letter-spacing:-.055em;margin:0 0 20px}.story-heading h2 em,.quiz-intro h2 em,.results-heading h2 em,.final-card h2 em{color:#c77696}.story-side{color:#977d8c;font:italic 20px/1.5 var(--serif)}.story-card{border:1px solid #f0dce4;background:#fffdfd;border-radius:18px;padding:clamp(26px,3.3vw,43px);box-shadow:0 20px 55px #a14f7514}.card-top{display:flex;justify-content:space-between;gap:16px;border-bottom:1px solid #f1dce5;padding-bottom:17px;margin-bottom:22px;color:#b8869a}.letter-card>p{font-size:15px;line-height:1.86;color:#695763;margin-bottom:18px}.letter-card strong,.friendship-card strong{color:#a4567a}.signed{display:flex;justify-content:space-between;align-items:center;color:#b38c9d;font:italic 16px var(--serif);border-top:1px solid #f2e1e7;padding-top:15px;margin-top:23px}.signed em{font-size:22px;color:#a9597b}.screen-actions{margin-top:25px;border-top:1px solid #f0dfe6;padding-top:17px;display:flex;justify-content:space-between;align-items:center;gap:8px}.friendship-card .friend-lead{font:italic 24px var(--serif);color:#a65b80;margin-bottom:11px}.friendship-card>p:not(.friend-lead){font-size:14px;line-height:1.75;color:#705c69;margin-bottom:16px}.promise-list{border-top:1px solid #f0e0e7;border-bottom:1px solid #f0e0e7;padding:5px 0;margin:17px 0}.promise-list>div{display:flex;align-items:center;gap:15px;padding:10px 0}.promise-list>div+div{border-top:1px solid #f6e9ee}.promise-list>div>span{font-size:24px;width:36px;text-align:center}.promise-list p{margin:0;display:flex;flex-direction:column;gap:3px}.promise-list strong{font-size:13px}.promise-list small{font-size:12px;color:#927d89;line-height:1.4}.friendship-card .friend-close{font:italic 15px/1.6 var(--serif);color:#a66a85!important;margin:0}
/* Question-by-question view */
.quiz-layout{display:grid;grid-template-columns:.85fr 1.15fr;align-items:center;gap:clamp(25px,5vw,75px)}.quiz-intro h2{font-size:clamp(42px,4.4vw,65px)}.quiz-intro>p{font-size:15px;line-height:1.8;color:#877081;max-width:340px;margin-bottom:22px}.soft-note{text-transform:none;letter-spacing:0;font:italic 20px var(--serif);color:#c4859f}.quiz-card{border:1px solid #efcfdd;background:#fffdfd;border-radius:18px;padding:clamp(25px,3vw,37px);box-shadow:0 20px 50px #b3638a1c}.quiz-meta{display:flex;justify-content:space-between;gap:10px;color:#b58c9f;font-size:10px;letter-spacing:.09em;margin-bottom:17px}.progress-track{width:100%;height:5px;border-radius:20px;background:#f8e1eb;overflow:hidden;margin-bottom:20px}.progress-track span{display:block;width:14.3%;height:100%;background:#c46f92;transition:width .25s}.question-emoji{display:block;font-size:31px;margin-bottom:9px}.question-tag{display:block;color:#ba8299;font-size:9px;margin-bottom:8px}.quiz-card h3{font:400 clamp(23px,2.5vw,32px)/1.4 var(--serif);letter-spacing:-.035em;min-height:87px;margin:0 0 8px}.question-hint{font:italic 14px var(--serif);color:#af9ca5;margin-bottom:17px}.answer-options{display:grid;gap:9px}.option-button{width:100%;min-height:47px;display:flex;justify-content:space-between;align-items:center;text-align:left;gap:10px;padding:11px 15px;border:1px solid #f0dce5;border-radius:9px;background:#fff8fa;color:#795d6e;font-size:13px;transition:.2s}.option-button:after{content:'';width:16px;height:16px;flex-shrink:0;border:1px solid #d8b7c8;border-radius:50%;background:white}.option-button:hover{background:#fff0f5}.option-button.selected{background:#fae0eb;border-color:#cf90aa;color:#8e4368;font-weight:700}.option-button.selected:after{content:'✓';display:grid;place-items:center;background:#bd6b8d;color:white;border-color:#bd6b8d;font-size:10px}.quiz-actions{margin-top:21px}.quiz-actions .button-primary{min-width:100px}
/* Responses */
.result-layout{width:min(860px,100%)}.results-heading{text-align:center;margin-bottom:21px}.results-heading h2{font-size:clamp(39px,4.5vw,58px);margin:5px 0 8px}.results-heading>p{color:#8b7180;font-size:13px;line-height:1.55;max-width:620px;margin:0 auto}.results-card{background:#fffdfd;border:1px solid #eed4df;border-radius:18px;padding:24px 30px 20px;box-shadow:0 18px 45px #ae648219}.results-top{display:flex;justify-content:space-between;gap:12px;color:#b27994;font-size:10px;letter-spacing:.1em;border-bottom:1px solid #f1dce5;padding-bottom:13px;margin-bottom:13px}.answer-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px}.summary-item{display:flex;gap:9px;align-items:flex-start;min-height:36px;background:#fff5f8;border:1px solid #f5e1e9;padding:8px 10px;border-radius:8px;overflow:hidden}.summary-number{flex:0 0 18px;color:#c17999;font-weight:700;font-size:11px}.summary-answer{color:#785e6e;font-size:11px;line-height:1.35;white-space:normal}.summary-answer.muted{color:#b3a0ab}.extra-label{display:block;color:#a66e89;font-size:12px;font-weight:700;margin:17px 0 7px}.results-card textarea{display:block;width:100%;height:61px;resize:none;border:1px solid #edd3df;background:#fff9fb;border-radius:8px;padding:12px 13px;color:#68485b;font-size:13px}.results-card textarea::placeholder{color:#b9a2ae}.response-buttons{display:flex;gap:11px;margin-top:13px}.response-buttons .button{flex:1}.copy-status{text-align:center;min-height:0;font-size:11px;color:#a35b7f;margin:9px 0 0}.copy-status:empty{display:none}.results-actions{margin-top:12px;padding-top:10px}
/* Final note */
.final-card{text-align:center;width:min(720px,100%)}.final-emoji{font-size:76px;line-height:1;margin:25px 0 18px}.final-card h2{font-size:clamp(43px,5.2vw,66px);margin-bottom:10px}.final-card>p{color:#987d8a;font:italic 20px var(--serif);margin-bottom:25px}.secret-message{background:#fffdfd;border:1px solid #eac6d6;border-radius:16px;padding:20px 26px;margin:20px auto 0;max-width:600px;color:#6b5361;font:400 18px/1.65 var(--serif);animation:screenEnter .3s ease}.secret-message em{color:#b45a7e}.secret-message span{display:block;color:#bf7e98;font:italic 17px var(--serif);margin-top:9px}.final-actions{display:flex;justify-content:center;gap:22px;margin-top:23px}.final-signoff{font:italic 14px var(--serif)!important;margin:20px 0 0!important;color:#b597a5!important}
/* Tablet */
@media(max-width:900px){.story-layout,.quiz-layout{gap:26px}.story-heading h2{font-size:45px}.quiz-intro h2{font-size:42px}.quiz-card{padding:24px}.letter-card>p{font-size:14px;line-height:1.7}}
/* Phones: every screen is a compact view, changed only by buttons. */
@media(max-width:700px){.site-header{height:59px;flex-basis:59px;padding:0 18px}.brand{font-size:18px;gap:5px}.brand-emoji{font-size:20px}.page-dots{gap:5px}.page-dots span{width:5px;height:5px}.page-dots span.active{width:17px}.music-button{min-width:47px;padding:9px 10px}.music-button span:last-child{display:none}.screen{padding:18px 19px}.welcome-card{padding-bottom:28px}.welcome-flower{font-size:55px;margin:22px 0 6px}.welcome-card h1{font-size:clamp(65px,16vw,90px)}.lead{font-size:17px}.screen-foot{left:20px;right:20px;font-size:8px;bottom:18px}.story-layout,.quiz-layout{display:flex;flex-direction:column;gap:12px;justify-content:center;align-items:stretch}.story-heading{text-align:center}.story-heading h2,.quiz-intro h2{font-size:clamp(33px,8vw,43px);margin:4px 0 4px}.story-heading h2 br,.quiz-intro h2 br{display:none}.heading-emoji{font-size:27px;margin:9px 0 4px}.kicker{font-size:9px}.story-side{font-size:15px;margin:0}.story-card{border-radius:14px;padding:21px 22px;box-shadow:0 10px 28px #ae648216}.card-top{font-size:9px;padding-bottom:11px;margin-bottom:14px}.letter-card>p{font-size:13px;line-height:1.62;margin-bottom:10px}.signed{margin-top:13px;padding-top:11px;font-size:14px}.signed em{font-size:18px}.screen-actions{margin-top:14px;padding-top:11px}.screen-actions .button{font-size:12px;min-height:41px;padding:9px 12px}.friendship-card .friend-lead{font-size:19px}.friendship-card>p:not(.friend-lead){font-size:12px;line-height:1.55;margin-bottom:9px}.promise-list{margin:10px 0;padding:3px 0}.promise-list>div{padding:6px 0;gap:10px}.promise-list>div>span{font-size:20px;width:28px}.promise-list strong{font-size:12px}.promise-list small{font-size:11px}.friendship-card .friend-close{font-size:13px;line-height:1.4}.quiz-intro{text-align:center}.quiz-intro>p{margin:5px auto 0;max-width:350px;font-size:12px;line-height:1.45}.soft-note{display:none}.quiz-card{width:100%;padding:19px 20px;border-radius:14px;box-shadow:0 8px 22px #ae648216}.quiz-meta{font-size:9px;margin-bottom:11px}.progress-track{margin-bottom:12px}.question-emoji{font-size:26px;margin-bottom:6px}.question-tag{font-size:8px;margin-bottom:5px}.quiz-card h3{font-size:clamp(22px,5.6vw,27px);min-height:0;margin-bottom:6px;line-height:1.32}.question-hint{font-size:12px;margin-bottom:12px}.answer-options{gap:7px}.option-button{font-size:12px;min-height:44px;padding:9px 12px}.quiz-actions{margin-top:13px}.results-heading{margin-bottom:11px}.results-heading h2{font-size:38px;margin:4px 0}.results-heading>p{font-size:12px;line-height:1.45}.results-card{padding:16px 17px;border-radius:14px}.results-top{font-size:8px;padding-bottom:9px;margin-bottom:9px}.answer-summary{gap:6px}.summary-item{padding:7px;gap:5px;min-height:33px}.summary-number,.summary-answer{font-size:10px}.summary-number{flex-basis:14px}.extra-label{margin:11px 0 5px;font-size:11px}.results-card textarea{height:49px;padding:9px;font-size:12px}.response-buttons{margin-top:9px;gap:8px}.response-buttons .button{min-height:40px;padding:8px 11px;font-size:12px}.copy-status{font-size:10px;margin-top:5px}.results-actions{margin-top:7px;padding-top:7px}.final-emoji{font-size:62px;margin:20px 0 13px}.final-card h2{font-size:40px}.final-card>p{font-size:17px;margin-bottom:20px}.secret-message{font-size:16px;padding:16px 20px}.secret-message span{font-size:14px}.final-actions{margin-top:15px}.final-signoff{font-size:12px!important}}
@media(max-width:380px){.screen{padding:11px 13px}.story-card{padding:16px 17px}.letter-card>p{font-size:12px}.story-heading h2,.quiz-intro h2{font-size:32px}.heading-emoji{font-size:24px;margin:6px 0 3px}.quiz-card{padding:15px 16px}.answer-options{gap:5px}.option-button{min-height:40px}.results-card{padding:12px}.summary-answer{font-size:9px}.response-buttons .button{font-size:11px}}
@media(max-height:660px){.site-header{height:54px;flex-basis:54px}.screen{padding-top:8px;padding-bottom:8px}.welcome-flower{font-size:43px;margin:12px 0 5px}.welcome-card h1{font-size:68px}.story-heading h2,.quiz-intro h2{font-size:32px}.heading-emoji{font-size:23px;margin:5px 0 2px}.story-layout,.quiz-layout{gap:7px}.story-card{padding-top:14px;padding-bottom:14px}.letter-card>p{font-size:12px;line-height:1.5;margin-bottom:8px}.promise-list>div{padding:4px 0}.quiz-card{padding-top:12px;padding-bottom:12px}.question-emoji{display:none}.option-button{min-height:38px;padding:7px 10px}.quiz-card h3{font-size:22px}.results-heading h2{font-size:32px}.results-card{padding-top:10px;padding-bottom:10px}.summary-item{min-height:28px;padding:5px}.results-card textarea{height:40px}.final-emoji{font-size:50px;margin:12px 0}}
@media(max-height:520px){.screen{overflow-y:auto;align-items:flex-start}.screen-inner,.welcome-card,.final-card{margin:auto 0}.screen-foot{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
.screen h1:focus,.screen h2:focus{outline:none}
.response-buttons{display:grid;grid-template-columns:1.35fr 1fr 1fr;gap:9px}
.response-buttons .button{width:100%;min-width:0;white-space:nowrap;padding-left:10px;padding-right:10px}
.save-disclosure{margin:8px 0 0;color:#a88395;font-size:10px;line-height:1.35;text-align:center}
@media(max-width:700px){.response-buttons{grid-template-columns:1.3fr .8fr .8fr;gap:6px}.response-buttons .button{font-size:11px;padding:7px 5px;gap:5px}.save-disclosure{font-size:9px;margin-top:6px}}