:root{
  --bg:#0f0b13;--card:rgba(28,20,34,.72);--line:rgba(255,255,255,.12);
  --text:#fff8fc;--muted:#cdbfcf;--pink:#f6a8c8;--pink2:#d879a5;--gold:#e8c98c;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:"DM Sans",sans-serif;overflow-x:hidden}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 0%,rgba(236,133,179,.16),transparent 34%),radial-gradient(circle at 10% 80%,rgba(150,95,170,.12),transparent 28%);z-index:-3}
.ambient{position:fixed;width:420px;height:420px;border-radius:50%;filter:blur(90px);opacity:.2;z-index:-2;pointer-events:none}
.ambient-one{background:#d879a5;top:-180px;right:-140px}.ambient-two{background:#8f6bb0;bottom:-220px;left:-160px}
.topbar{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 28px;z-index:50;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(15,11,19,.45);backdrop-filter:blur(18px)}
.case-logo{font-size:11px;letter-spacing:.2em;color:#cfc2d0;font-weight:700}.case-logo span{color:var(--pink);margin:0 5px}
.icon-btn{border:1px solid var(--line);background:rgba(255,255,255,.05);color:#fff;border-radius:50%;width:38px;height:38px;cursor:pointer;font-size:17px}
.screen{min-height:100svh;padding:105px 22px 80px;display:none;align-items:center;justify-content:center;position:relative}.screen.active{display:flex;animation:screenIn .7s ease both}
@keyframes screenIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.glass{background:var(--card);border:1px solid var(--line);box-shadow:0 30px 100px rgba(0,0,0,.38);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px)}
.hero-card{width:min(760px,100%);padding:34px;border-radius:30px;position:relative;overflow:hidden}
.eyebrow,.step-tag,.tiny-label{font-size:10px;letter-spacing:.18em;font-weight:700;color:#c9bac8}
.eyebrow{display:flex;align-items:center;gap:9px}.pulse-dot{width:7px;height:7px;border-radius:50%;background:var(--pink);box-shadow:0 0 0 5px rgba(246,168,200,.1)}
.case-stamp{position:absolute;right:32px;top:30px;text-align:center;border:1px solid rgba(246,168,200,.35);color:var(--pink);padding:8px 11px;font-size:9px;line-height:1.15;letter-spacing:.15em;transform:rotate(7deg);border-radius:4px}.case-stamp strong{font-size:23px}
h1,h2{font-family:"Playfair Display",serif;letter-spacing:-.04em;line-height:.98;margin:14px 0 18px}h1{font-size:clamp(48px,8vw,86px)}h2{font-size:clamp(42px,7vw,70px)}h1 em,h2 em{font-style:normal;color:var(--pink)}
.lead{max-width:570px;color:var(--muted);font-size:16px;line-height:1.7;margin-bottom:25px}
.hero-photo{height:min(430px,58vw);min-height:300px;border-radius:20px;overflow:hidden;position:relative;margin:20px 0 22px}.hero-photo img{width:100%;height:100%;object-fit:cover;object-position:center 35%;display:block}.photo-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.16),transparent 50%);transform:translateX(-120%);animation:shine 5s ease-in-out infinite}@keyframes shine{50%,100%{transform:translateX(120%)}}
.primary-btn,.secondary-btn{border:0;border-radius:999px;padding:15px 21px;font:600 14px "DM Sans",sans-serif;cursor:pointer;transition:.25s;display:inline-flex;align-items:center;justify-content:center;gap:18px}.primary-btn{background:linear-gradient(135deg,#f8b5d1,#d87aa5);color:#24131d;box-shadow:0 12px 30px rgba(216,121,165,.22)}.primary-btn:hover{transform:translateY(-2px);box-shadow:0 16px 35px rgba(216,121,165,.3)}.secondary-btn{background:rgba(255,255,255,.07);border:1px solid var(--line);color:#fff}.secondary-btn:hover{background:rgba(255,255,255,.11)}
.micro{font-size:10px;color:#897c8b;margin:13px 0 0}
.content-wrap{width:min(940px,100%)}.content-wrap.narrow{width:min(760px,100%)}.step-tag{margin-bottom:15px;color:var(--pink)}
.evidence-card{border-radius:24px;padding:25px;margin:25px 0}.evidence-top,.letter-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:.14em;color:#988b9a;border-bottom:1px solid var(--line);padding-bottom:15px}.chat{padding:25px 0}.bubble{max-width:72%;padding:13px 16px;border-radius:17px;margin:10px 0;font-size:14px;line-height:1.45}.bubble small{display:block;font-size:9px;color:#a797a7;letter-spacing:.08em;margin-bottom:4px}.bubble.her{background:rgba(255,255,255,.07);border-bottom-left-radius:4px}.bubble.him{background:rgba(216,121,165,.14);margin-left:auto;border-bottom-right-radius:4px}.bubble p{margin:0}.verdict{display:flex;gap:15px;align-items:center;border-top:1px solid var(--line);padding-top:20px}.warning{font-size:27px}.verdict strong{font-size:10px;letter-spacing:.14em;color:var(--pink)}.verdict p{margin:4px 0 0;color:#c9bfca;font-size:13px;line-height:1.45}.side-note{color:#9c8e9e;font-size:12px;margin:0 0 22px}
.photo-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:13px;margin:25px 0}.memory{margin:0;border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#171119}.memory img{width:100%;height:320px;display:block;object-fit:cover}.memory.tall img{height:450px}.memory.wide{grid-column:1/-1}.memory.wide img{height:420px;object-position:center 35%}.memory figcaption{padding:12px 14px;font-size:11px;color:#b8a9b8}
.letter{border-radius:25px;overflow:hidden}.letter-top{padding:18px 22px}.letter-body{padding:30px 34px 35px;font-family:"DM Sans",sans-serif;font-size:16px;line-height:1.85;color:#ded3de}.letter-body p{margin:0 0 16px}.letter-body .salute{font-family:"Playfair Display",serif;font-size:25px;color:#fff}.letter-body .highlight{color:var(--pink);font-size:21px;font-weight:700}.signature{font-family:"Playfair Display",serif;font-size:26px!important;color:#fff;margin-top:28px!important}
.center-copy{max-width:550px;color:var(--muted);line-height:1.6;margin-bottom:25px}.quiz-card{max-width:650px;border-radius:25px;padding:32px}.quiz-progress{color:#9f8f9e;font-size:10px;letter-spacing:.15em}.quiz-card h3{font-family:"Playfair Display",serif;font-size:32px;margin:15px 0 24px}.answers{display:grid;gap:10px}.answer{padding:15px 17px;text-align:left;border-radius:15px;background:rgba(255,255,255,.055);border:1px solid var(--line);color:#fff;cursor:pointer;font:600 14px "DM Sans";transition:.2s}.answer:hover{border-color:rgba(246,168,200,.55);transform:translateX(3px)}.quiz-reaction{min-height:24px;margin-top:15px;color:var(--pink);font-size:13px}.final-screen{padding:0;overflow:hidden}.final-photo{position:absolute;inset:0}.final-photo img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.85)}.final-overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,11,19,.93) 0%,rgba(15,11,19,.72) 42%,rgba(15,11,19,.25) 100%)}.final-content{position:relative;z-index:2;width:min(620px,90%);margin-right:auto;margin-left:7%;padding-top:60px}.light{color:#f6c2d8}.final-content h2{font-size:clamp(60px,9vw,100px)}.final-line{font-size:17px;line-height:1.65;color:#ddd1dc;max-width:570px}.final-question{font-family:"Playfair Display",serif;font-size:26px;color:#fff;margin:28px 0}.final-actions{display:flex;flex-wrap:wrap;gap:10px}.final-response{margin-top:20px;max-width:560px;font-size:15px;line-height:1.6;color:#f5d8e6}
.footer{position:fixed;bottom:0;left:0;right:0;text-align:center;padding:12px;font-size:9px;letter-spacing:.12em;color:#665b68;pointer-events:none}
#hearts{position:fixed;inset:0;pointer-events:none;z-index:100;overflow:hidden}.heart{position:absolute;bottom:-30px;animation:floatUp linear forwards;opacity:.8}@keyframes floatUp{to{transform:translateY(-110vh) rotate(35deg);opacity:0}}
@media(max-width:700px){.topbar{padding:0 17px}.screen{padding:95px 16px 70px}.hero-card{padding:22px;border-radius:24px}.case-stamp{right:20px;top:22px}h1{font-size:47px}.hero-photo{height:470px;min-height:0}.photo-grid{grid-template-columns:1fr 1fr}.memory img,.memory.tall img{height:290px}.memory.wide img{height:330px}.letter-body{padding:25px 22px;font-size:15px}.final-content{margin-left:5%;padding-top:70px}.final-overlay{background:linear-gradient(90deg,rgba(15,11,19,.9),rgba(15,11,19,.55))}.final-photo img{object-position:62% center}.final-line{font-size:15px}.final-question{font-size:22px}}
@media(max-width:450px){.photo-grid{grid-template-columns:1fr}.memory.wide{grid-column:auto}.hero-photo{height:430px}.memory img,.memory.tall img,.memory.wide img{height:390px}.final-actions .primary-btn,.final-actions .secondary-btn{width:100%}}