:root { --ink:#fff6ef; --muted:#d9bdc4; --rose:#f09a9f; --deep:#24161f; --plum:#4b263b; --cream:#fff2e6; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:#160d14; font-family:Manrope,Arial,sans-serif; }
button { font:inherit; cursor:pointer; }
.page-shell { max-width:520px; min-height:100vh; margin:auto; overflow:hidden; position:relative; background:radial-gradient(circle at 18% 14%, #713655 0, transparent 34%), radial-gradient(circle at 84% 78%, #663244 0, transparent 39%), linear-gradient(145deg,#24161f,#170f1a 70%); }
.screen { display:none; min-height:100vh; padding:34px 27px; position:relative; flex-direction:column; }
.screen.active { display:flex; animation:appear .55s ease both; }
@keyframes appear { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
.welcome-screen { align-items:center; text-align:center; justify-content:center; }
.eyebrow,.question-tag,.result-topline { margin:0; color:#f4bec2; font-size:10px; letter-spacing:2px; font-weight:800; }
.heart-wrap { width:88px; height:88px; display:grid; place-items:center; margin:25px 0 19px; border:1px solid rgba(255,236,225,.35); border-radius:50%; background:rgba(255,223,216,.08); box-shadow:0 0 45px rgba(239,121,143,.22); }
.heart-wrap span,.letter-heart { color:#f4a2aa; font-family:'Playfair Display',serif; font-size:61px; line-height:1; }
h1,h2 { margin:0; font-family:'Playfair Display',Georgia,serif; font-weight:600; letter-spacing:-2px; line-height:.98; }
h1 { font-size:68px; } h2 { font-size:43px; } em { color:#f6a6ab; font-weight:600; }
.intro { max-width:330px; color:var(--muted); font-size:14px; line-height:1.7; margin:25px 0 32px; }
.primary-btn { border:0; border-radius:100px; padding:16px 21px; background:var(--cream); color:#2b1720; font-size:13px; font-weight:800; box-shadow:0 12px 30px rgba(0,0,0,.22); transition:transform .2s; }
.secondary-btn { border:1px solid rgba(111,215,205,.5); border-radius:100px; padding:14px 20px; background:transparent; color:#bce8e0; font-size:12px; font-weight:800; transition:transform .2s,background .2s; }.secondary-btn:hover { transform:translateY(-2px); background:#133033; }.secondary-btn span { margin-left:8px; }
.primary-btn:hover { transform:translateY(-2px); }.primary-btn span { margin-left:9px; font-size:17px; }
.tiny-note { margin:19px 0 0; color:#ab8793; font-size:10px; }.spark { position:absolute; color:#f5a1a6; opacity:.75; }.spark-one { top:14%; left:12%; }.spark-two { top:23%; right:13%; font-size:30px; }.spark-three { bottom:18%; right:18%; }
.quiz-header { display:flex; align-items:center; justify-content:space-between; color:#dfc3c8; font-size:11px; font-weight:800; letter-spacing:1.5px; }.back-btn { color:var(--cream); background:none; border:0; font-size:26px; padding:0; }.progress-track { width:100%; height:3px; margin:23px 0 0; background:rgba(255,255,255,.12); border-radius:5px; }.progress-fill { width:12.5%; height:100%; border-radius:inherit; background:#f3a0a6; transition:width .4s; }
.question-card { flex:1; display:flex; flex-direction:column; justify-content:center; padding-bottom:42px; }.question-tag { margin-bottom:17px; }.question-card h2 { font-size:36px; line-height:1.12; letter-spacing:-1.5px; }.answers { display:grid; gap:11px; margin-top:31px; }.answer { width:100%; color:#fff6ef; text-align:left; background:rgba(255,244,238,.08); border:1px solid rgba(255,244,238,.18); border-radius:15px; padding:16px 18px; transition:background .2s,border-color .2s; }.answer:hover { background:rgba(255,244,238,.16); }.answer.correct { background:#a95665; border-color:#f5b4b5; }.answer.wrong { opacity:.42; }.answer:disabled { cursor:default; }.answer-message { min-height:23px; color:#f5b4b5; font-size:12px; margin:17px 5px 0; }.quiz-decoration { position:absolute; bottom:22px; right:29px; font:70px 'Playfair Display',serif; color:rgba(244,150,160,.12); }
.result-screen { text-align:center; align-items:center; justify-content:center; }.score-orbit { width:164px; height:164px; display:flex; flex-direction:column; justify-content:center; align-items:center; border:1px solid rgba(247,205,198,.5); border-radius:50%; margin:25px 0; box-shadow:inset 0 0 35px rgba(240,135,150,.14), 0 0 50px rgba(245,128,147,.15); }.score-orbit span { font:600 60px 'Playfair Display',serif; color:#fff4ed; line-height:.8; }.score-orbit small { color:#e2bbc0; margin-top:10px; }.result-screen h2 { font-size:42px; }.result-screen p { color:var(--muted); font-size:14px; line-height:1.7; max-width:340px; margin:22px 0 20px; }.relationship-stats { width:100%; max-width:350px; margin:0 0 24px; border:1px solid rgba(255,242,232,.16); border-radius:15px; overflow:hidden; background:rgba(255,242,232,.055); }.stat-row { display:grid; grid-template-columns:1fr auto; column-gap:16px; padding:11px 15px; text-align:left; align-items:center; }.stat-row + .stat-row { border-top:1px solid rgba(255,242,232,.12); }.stat-row span { color:#f0c1c4; font-size:11px; font-weight:800; }.stat-row strong { color:#fff3e9; font-size:13px; }.stat-row small { grid-column:1 / -1; color:#a98791; font-size:10px; margin-top:3px; }
.letter-screen { overflow-y:auto; text-align:center; align-items:center; padding-top:52px; background:linear-gradient(155deg,#321a29,#190e17); }.letter-heart { margin:26px 0 13px; }.letter-screen h2 { font-size:40px; }.letter-text { color:#e0c6c8; max-width:370px; text-align:left; font-size:13px; line-height:1.8; margin:28px 0 17px; }.signature { color:#f5a9ad; font:italic 22px 'Playfair Display',serif; }.date-card { width:100%; padding:16px; display:flex; flex-direction:column; gap:5px; border-radius:14px; color:#e5c6c8; background:rgba(255,242,232,.08); border:1px solid rgba(255,242,232,.15); font-size:11px; }.date-card strong { color:#fff2e7; font:600 27px 'Playfair Display',serif; }.date-card small { color:#bd969e; }.ghost-btn { border:0; color:#dcbfc3; padding:20px 0 6px; background:transparent; font-size:11px; }
.dashboard-screen { padding:25px 20px 34px; overflow-y:auto; }.dashboard-header { display:flex; align-items:center; gap:13px; color:#e3c5c8; font-size:9px; font-weight:800; letter-spacing:1.35px; }.dashboard-header .back-btn { font-size:22px; }.total-card { margin:22px 0 25px; padding:21px; border:1px solid rgba(255,241,232,.2); border-radius:19px; text-align:center; background:linear-gradient(125deg,rgba(245,162,168,.17),rgba(255,255,255,.045)); }.total-card p,.person-card p,.facts-card>p { margin:0; color:#ecb8bd; font-size:9px; font-weight:800; letter-spacing:1.3px; }.total-card strong { display:block; margin:7px 0 3px; color:#fff5eb; font:600 49px 'Playfair Display',serif; line-height:1; }.total-card span { color:#c9a8af; font-size:10px; }.dashboard-screen h2 { font-size:35px; letter-spacing:-1.4px; margin-bottom:17px; }.people-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; }.person-card { min-height:181px; padding:15px 12px; border:1px solid rgba(255,241,232,.14); border-radius:15px; background:rgba(255,244,238,.055); }.person-card.accent { background:rgba(240,143,155,.12); border-color:rgba(244,174,179,.29); }.person-card>strong { display:block; color:#fff4eb; font:600 28px 'Playfair Display',serif; margin-top:9px; }.person-card>span { color:#cba7ae; font-size:10px; }.person-card dl { margin:16px 0 0; }.person-card dl div + div { margin-top:9px; }.person-card dt { color:#f1b3b8; font-size:12px; font-weight:800; }.person-card dd { margin:1px 0 0; color:#bb969e; font-size:9px; }.facts-card { margin:16px 0 21px; padding:16px; border-radius:15px; background:rgba(255,244,238,.055); border:1px solid rgba(255,241,232,.12); }.facts-card>p { margin-bottom:11px; }.facts-card div { display:flex; gap:11px; align-items:baseline; padding:8px 0; border-top:1px solid rgba(255,241,232,.1); }.facts-card strong { min-width:62px; color:#f5b4b9; font:600 22px 'Playfair Display',serif; }.facts-card span { color:#d5b6ba; font-size:11px; }
@media (min-width:521px) { body { padding:20px; }.page-shell { min-height:calc(100vh - 40px); border-radius:25px; box-shadow:0 25px 80px #000; }.screen { min-height:calc(100vh - 40px); } }

@keyframes drift { 50% { transform:translateY(-14px) rotate(8deg); } }
@keyframes bloom { 50% { transform:scale(1.08); opacity:.78; } }
@keyframes rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@media (min-width:800px) {
  body { padding:26px; display:grid; place-items:center; background:radial-gradient(circle at 13% 12%,#54243f,transparent 25%),radial-gradient(circle at 84% 87%,#3f2340,transparent 29%),#0e0910; }
  .page-shell { width:min(1360px,100%); max-width:none; min-height:min(860px,calc(100vh - 52px)); border-radius:31px; background:radial-gradient(circle at 10% 11%,#703854 0,transparent 23%),radial-gradient(circle at 84% 20%,#512d4b 0,transparent 26%),linear-gradient(135deg,#24151f,#160d17 66%); box-shadow:0 35px 110px #000a; }
  .page-shell::before,.page-shell::after { content:''; position:absolute; width:430px; height:430px; border:1px solid rgba(251,195,198,.09); border-radius:50%; pointer-events:none; }.page-shell::before { left:-240px; bottom:-245px; }.page-shell::after { right:-230px; top:-250px; }
  .screen { min-height:min(860px,calc(100vh - 52px)); padding:58px 72px; }.welcome-screen { align-items:flex-start; text-align:left; padding-left:13%; }.welcome-screen .eyebrow { animation:rise .7s .05s both; }.welcome-screen h1 { font-size:112px; margin-top:2px; animation:rise .7s .14s both; }.welcome-screen .intro { max-width:410px; font-size:15px; margin:28px 0 34px; animation:rise .7s .24s both; }.welcome-screen .primary-btn { animation:rise .7s .34s both; }.heart-wrap { position:absolute; right:18%; width:180px; height:180px; margin:0; top:calc(50% - 90px); animation:bloom 4s ease-in-out infinite; }.heart-wrap span { font-size:118px; }.welcome-orbit { position:absolute; right:calc(18% - 90px); top:calc(50% - 180px); width:360px; height:360px; border:1px solid rgba(249,203,203,.18); border-radius:50%; animation:drift 7s ease-in-out infinite; }.welcome-orbit i { position:absolute; width:9px; height:9px; border-radius:50%; background:#f7acb3; box-shadow:0 0 17px #f4a1a9; }.welcome-orbit i:nth-child(1){top:7px;left:102px}.welcome-orbit i:nth-child(2){right:23px;bottom:74px}.welcome-orbit i:nth-child(3){left:17px;bottom:68px;width:5px;height:5px}.spark-one{left:8%;top:15%}.spark-two{right:11%;top:23%}.spark-three{right:15%;bottom:14%}
  .dashboard-screen { padding:36px 60px 43px; }.dashboard-header { animation:rise .5s both; }.dashboard-hero { display:grid; grid-template-columns:340px 1fr; gap:66px; align-items:center; margin:45px 0 32px; }.total-card { margin:0; padding:30px 25px; border-radius:24px; box-shadow:inset 0 1px rgba(255,255,255,.18),0 18px 55px #08040a3b; animation:rise .65s .1s both; }.total-card strong { font-size:67px; }.hero-copy { animation:rise .65s .2s both; }.hero-copy .eyebrow { margin-bottom:18px; }.dashboard-screen h2 { font-size:62px; margin:0; }.stats-layout { display:grid; grid-template-columns:1.4fr .9fr; gap:18px; align-items:stretch; }.people-grid { gap:15px; }.person-card { min-height:214px; padding:22px; border-radius:20px; transition:transform .3s ease,background .3s ease,border-color .3s ease; animation:rise .65s .3s both; }.person-card.accent { animation-delay:.39s; }.person-card:hover { transform:translateY(-7px); background:rgba(255,244,238,.12); border-color:rgba(248,190,193,.5); }.person-card>strong { font-size:42px; margin-top:12px; }.person-card dl { margin-top:22px; }.person-card dt { font-size:14px; }.person-card dd { font-size:10px; }.facts-card { margin:0; padding:21px 23px; border-radius:20px; animation:rise .65s .48s both; }.facts-card>p { margin-bottom:15px; }.facts-card div { padding:12px 0; }.facts-card strong { font-size:27px; min-width:85px; }.facts-card span { font-size:12px; }.dashboard-screen>.primary-btn { display:block; margin:28px auto 0; animation:rise .65s .57s both; }
  .letter-screen { padding-top:64px; }.letter-screen h2 { font-size:58px; }.letter-text { max-width:570px; font-size:14px; }.date-card { max-width:440px; }
}

/* Our palette: clear blue and deep green, with intentionally flat surfaces. */
:root { --ink:#e8f7f4; --muted:#a9c8c2; --rose:#70d7c2; --deep:#071313; --plum:#103031; --cream:#ddf7f0; }
body { background:#050d0e; }
.page-shell { background:#0a1819; }
.page-shell::before,.page-shell::after { border-color:rgba(93,206,208,.16); }
.eyebrow,.question-tag,.result-topline,.total-card p,.person-card p,.facts-card>p { color:#75d7d0; }
em { color:#79cfb2; }.heart-wrap { border-color:rgba(124,216,205,.42); background:#103031; box-shadow:0 0 45px rgba(72,189,180,.16); }.heart-wrap span,.letter-heart,.spark { color:#79cfb2; }.spark { opacity:.6; }
.primary-btn { background:#d8f4ed; color:#0b2524; box-shadow:0 12px 30px rgba(0,0,0,.24); }.tiny-note { color:#729892; }
.dashboard-screen,.letter-screen { background:#0a1819; }.letter-screen { background:#0c1d1d; }.letter-text { color:#c7ddd8; }.signature { color:#80d8c2; }.date-card,.relationship-stats,.facts-card,.person-card { background:#102324; border-color:rgba(123,207,204,.2); }.date-card { color:#c7ddd8; }.date-card strong { color:#e4f8f3; }.date-card small { color:#82aaa5; }
.total-card { background:#102526; border-color:rgba(115,214,210,.33); }.total-card strong,.person-card>strong { color:#e6f8f4; }.total-card span,.person-card>span { color:#9bc5bf; }.person-card.accent { background:#123033; border-color:rgba(107,209,202,.42); }.person-card dt,.facts-card strong { color:#78d8cd; }.person-card dd,.facts-card span { color:#a7c8c3; }.facts-card div,.person-card { border-color:rgba(117,205,201,.16); }
.dashboard-header { color:#c4e5df; }.progress-fill { background:#73d3c8; }.answer.correct { background:#21665d; border-color:#86e5d6; }.answer-message { color:#8ce0d3; }.quiz-decoration { color:rgba(98,206,196,.12); }
.answer { color:#e6f8f4; background:#102829; border-color:rgba(123,207,204,.25); }.answer:hover { background:#173536; }.answer.wrong { opacity:.45; }.result-screen { background:#0a1819; }.score-orbit { border-color:rgba(120,217,208,.5); box-shadow:inset 0 0 35px rgba(82,190,181,.13),0 0 50px rgba(70,183,175,.12); }.score-orbit span { color:#e6f8f4; }.score-orbit small { color:#abd1cb; }.result-screen p { color:#b5d1cc; }.dashboard-screen>.secondary-btn { display:block; margin:22px auto 0; }.dashboard-screen>.secondary-btn + .primary-btn { margin-top:12px; }
.words-card { grid-column:1 / -1; padding:16px; border:1px solid rgba(123,207,204,.2); border-radius:15px; background:#102324; }.words-card p { margin:0 0 12px; color:#75d7d0; font-size:9px; font-weight:800; letter-spacing:1.3px; }.word-chips { display:flex; gap:9px; flex-wrap:wrap; }.word-chips span { padding:8px 11px; border-radius:999px; border:1px solid rgba(123,207,204,.22); color:#d8f1eb; font-size:11px; }.word-chips b { color:#79cfb2; margin-left:4px; }.words-card small { display:block; margin-top:10px; color:#8eb4ae; font-size:10px; }
.stickers-card { grid-column:1 / -1; padding:16px; border:1px solid rgba(123,207,204,.2); border-radius:15px; background:#102324; }.stickers-card p { margin:0 0 8px; color:#75d7d0; font-size:9px; font-weight:800; letter-spacing:1.3px; }.stickers-card div { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:8px 0; border-top:1px solid rgba(123,207,204,.12); }.stickers-card span { color:#9ec7c0; font-size:11px; }.stickers-card strong { color:#dff5ef; font-size:16px; letter-spacing:1px; white-space:nowrap; }.stickers-card b { color:#78d8cd; font:700 10px Manrope,Arial,sans-serif; vertical-align:middle; }
.stickers-card .sticker-people { display:grid; grid-template-columns:1fr 1fr; gap:14px; padding:0; border:0; }.sticker-people article { min-width:0; }.sticker-people>article+article { border-left:1px solid rgba(123,207,204,.14); padding-left:14px; }.stickers-card .sticker-list { display:flex; gap:7px; justify-content:flex-start; padding:7px 0 0; border:0; }.sticker-list figure { position:relative; display:grid; place-items:center; width:46px; height:46px; margin:0; overflow:hidden; border:1px solid rgba(123,207,204,.17); border-radius:10px; background:#0b1b1c; }.sticker-list img,.sticker-list video { width:100%; height:100%; object-fit:contain; }.sticker-list b { position:absolute; right:3px; bottom:2px; padding:1px 3px; border-radius:4px; color:#dff6f0; background:#0a1d1e; font-size:8px; }
.tiktok-card { grid-column:1 / -1; display:flex; gap:14px; align-items:center; padding:16px; border:1px solid rgba(123,207,204,.25); border-radius:15px; background:#102324; }.tiktok-card>span { display:grid; place-items:center; width:38px; height:38px; border:1px solid rgba(121,216,205,.36); border-radius:50%; color:#79d8cd; font-size:21px; }.tiktok-card p { margin:0 0 2px; color:#75d7d0; font-size:9px; font-weight:800; letter-spacing:1.3px; }.tiktok-card strong { display:block; color:#e5f8f3; font:600 21px 'Playfair Display',serif; }.tiktok-card small { color:#9cbfb9; font-size:10px; }
@media (min-width:800px) { body { background:#050d0e; }.page-shell { background:#0a1819; }.page-shell::before,.page-shell::after { border-color:rgba(93,206,208,.16); }.total-card { background:#102526; box-shadow:inset 0 1px rgba(231,255,251,.12),0 18px 55px rgba(0,0,0,.18); }.person-card:hover { background:#163033; border-color:rgba(128,220,211,.58); }.welcome-orbit { border-color:rgba(107,218,208,.28); }.welcome-orbit i { background:#74d9d0; box-shadow:0 0 17px #55c8c0; } }