:root {
  --bg: #f9f5ef;
  --paper: #fffdfa;
  --ink: #442d35;
  --muted: #897780;
  --rose: rgb(161, 5, 15);
  --rose-dark: rgb(133, 5, 14);
  --rose-soft: #f9e8eb;
  --line: #eadde0;
  --success: #376d59;
  --danger: #a3314f;
  --font-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; min-height: 100svh; color: var(--ink); background: var(--bg); font-family: var(--font-sans); font-size: 14px; -webkit-font-smoothing: antialiased; }
body::before { content:""; position: fixed; inset:0; z-index:-1; opacity:.29; pointer-events:none; background-image:radial-gradient(#dcb8c1 .7px, transparent .7px); background-size: 20px 20px; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline:3px solid #d97e98; outline-offset:3px; }
.ambient { position:fixed; z-index:-2; border-radius:50%; filter:blur(3px); pointer-events:none; }
.ambient-one { width:340px; height:340px; left:-170px; top:-120px; background:radial-gradient(circle,#f5dce0,transparent 72%); }
.ambient-two { width:430px; height:430px; right:-210px; bottom:-170px; background:radial-gradient(circle,#f4dfe3,transparent 72%); }
.app-shell { max-width: 610px; padding:22px 16px 20px; margin:0 auto; min-height:100svh; display:flex; flex-direction:column; justify-content:center; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:20px; padding:0 3px; }
.brand { display:flex; align-items:center; gap:10px; }
.brand-icon { width:39px; height:39px; display:grid; place-items:center; border-radius:12px; color:var(--rose); background:#f7e3e7; flex:none; }
.brand-icon svg { width:22px; height:22px; }
.brand-copy { display:flex; flex-direction:column; gap:2px; }
.brand-copy strong { font-family:var(--font-serif); font-size:17px; letter-spacing:-.7px; font-weight:600; }
.brand-copy small { font-size:10px; color:var(--muted); letter-spacing:.12px; }
.edition { font-weight:700; letter-spacing:1.05px; font-size:9px; white-space:nowrap; border:1px solid #e9d5da; padding:8px 9px; border-radius:6px; color:var(--rose); transform:rotate(3deg); }
.main-card { background:var(--paper); border:1px solid #efe5e4; border-radius:21px; padding:23px 21px 26px; box-shadow:0 12px 35px rgba(92,51,63,.06), 0 32px 80px rgba(92,51,63,.055); overflow:hidden; }
.card-topbar { display:flex; justify-content:space-between; align-items:center; font-size:9px; color:var(--muted); font-weight:700; letter-spacing:1.15px; margin-bottom:12px; }
.tiny-heart { font-size:14px; color:#c6798d; }
.progress-track { width:100%; height:4px; background:#f5ecee; border-radius:10px; overflow:hidden; }
#progress-fill { width:20%; height:100%; border-radius:10px; background:var(--rose); transition:width .45s cubic-bezier(.22,.7,.24,1); }
.screen { animation:enter .48s both; padding-top:28px; }
.screen[hidden], [hidden] { display:none !important; }
@keyframes enter { from { opacity:0; transform:translateY(12px) } to { opacity:1; transform:translateY(0) } }
.hero-intro { position:relative; padding-right:16px; }
.anniversary-seal { position:absolute; right:0; top:-14px; width:77px; height:77px; border:1.5px dashed #cc94a1; border-radius:50%; transform:rotate(13deg); color:var(--rose); display:flex; align-items:center; justify-content:center; flex-direction:column; background:#fdf5f4; }
.anniversary-seal::before { content:""; position:absolute; inset:5px; border:1px solid #e7c6ce; border-radius:50%; }
.anniversary-seal span { font-family:var(--font-serif); font-weight:600; font-size:30px; line-height:1; }
.anniversary-seal small { font-size:6px; letter-spacing:.45px; font-weight:700; margin-top:3px; }
.eyebrow { color:var(--rose); font-size:9px; font-weight:700; letter-spacing:1.65px; text-transform:uppercase; line-height:1.6; }
h1, h2, h3, p { margin-top:0; }
h1,h2 { font-family:var(--font-serif); font-weight:500; letter-spacing:-1.65px; }
h1 { font-size:clamp(43px,10vw,60px); line-height:1.07; margin:13px 0 17px; }
h1 em,h2 em { font-weight:500; color:var(--rose); }
.lead { color:#7b6971; font-size:13.5px; line-height:1.85; max-width:395px; }
.hero-intro .eyebrow { max-width:calc(100% - 90px); }
.hero-intro .lead { margin-bottom:27px; }
.document { border:1px solid var(--line); border-radius:12px; background:#fffdfc; box-shadow:inset 0 0 0 5px #fcf8f6; padding:22px 18px 19px; }
.document-head,.decision-paper-top { display:flex; justify-content:space-between; gap:8px; font-size:8px; letter-spacing:1.2px; font-weight:700; color:#ac8690; }
.document-title { font-family:var(--font-serif); font-size:21px; line-height:1.25; margin:5px 0 19px; letter-spacing:-.5px; }
.document-title span { color:var(--rose); font-style:italic; }
.terms-list { counter-reset: terms; list-style:none; margin:0; padding:0; }
.terms-list li { display:flex; gap:13px; border-top:1px dashed #e9dcde; padding:13px 0 12px; }
.terms-list li::before { counter-increment:terms; content:counter(terms,decimal-leading-zero); color:var(--rose); font-family:var(--font-serif); font-size:17px; line-height:1.1; flex:none; width:22px; }
.term-title { font-weight:700; font-size:12px; margin-bottom:5px; }
.term-description { font-size:11.5px; line-height:1.7; color:#877680; }
.fine-print { border-top:1px dashed #e9dcde; padding-top:13px; font-size:10px; line-height:1.7; color:#98848b; font-style:italic; }
.signature-row { display:flex; gap:15px; margin-top:20px; }
.signature-row>div { flex:1; min-width:0; padding-top:9px; border-top:1px solid #c8b4b9; }
.signature-row span { display:block; color:#ac929a; font-size:9px; margin-bottom:4px; }
.signature-row strong { font-family:var(--font-serif); font-size:12px; font-style:italic; font-weight:500; }
.action-stack { margin-top:20px; }
.btn { width:100%; min-height:53px; padding:15px 18px; display:flex; align-items:center; justify-content:center; gap:11px; border-radius:11px; border:1px solid transparent; font-weight:700; font-size:12.5px; transition:transform .15s ease, background .15s ease, box-shadow .15s ease; }
.btn:not(:disabled):active { transform:scale(.987); }
.btn:disabled { opacity:.7; cursor:wait; }
.btn-primary { background:var(--rose); color:white; box-shadow:0 5px 15px rgba(173,66,94,.16); }
.btn-primary:hover:not(:disabled) { background:var(--rose-dark); box-shadow:0 8px 18px rgba(173,66,94,.22); }
.btn-primary span { font-size:18px; line-height:1; font-weight:400; }
.btn-outline { background:white; border:1px solid var(--line); color:#917982; margin-top:11px; box-shadow:none; }
.btn-outline:hover { background:#fcf5f6; border-color:#dec5cd; }
.below-button { display:block; margin-top:12px; text-align:center; color:#a08e94; font-size:10px; }
.site-footer { display:flex; justify-content:space-between; gap:10px; margin:19px 4px 0; color:#aa949b; font-size:9.5px; }
.footer-heart { color:var(--rose); }
.screen-heading { position:relative; padding-right:16px; margin-bottom:24px; }
.step-chip { font-size:9px; letter-spacing:1.35px; font-weight:700; color:var(--rose); background:#faedef; border:1px solid #f1dfe3; padding:7px 10px; border-radius:50px; display:inline-flex; gap:5px; }
.step-illustration { position:absolute; top:27px; right:8px; width:69px; height:69px; border-radius:19px; background:#f7e7e9; color:var(--rose); display:grid; place-items:center; font-size:44px; transform:rotate(10deg); font-family:var(--font-serif); }
h2 { font-size:clamp(36px,8vw,48px); line-height:1.12; margin:20px 0 14px; }
.screen-heading p { color:#82717a; font-size:12px; line-height:1.8; max-width:345px; }
.challenge-box { border:1px solid #eadce0; border-radius:14px; padding:17px; background:#fcf8f7; margin-bottom:15px; }
.challenge-label { text-transform:uppercase; color:#b07988; font-weight:700; letter-spacing:1.25px; font-size:9px; margin-bottom:8px; }
.challenge-box h3 { font-family:var(--font-serif); font-size:20px; font-weight:500; line-height:1.3; letter-spacing:-.5px; margin:0 0 7px; }
.challenge-hint { color:var(--muted); font-size:10.5px; line-height:1.6; margin:0 0 16px; }
.image-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.image-choice { position:relative; display:block; aspect-ratio:1; padding:0; overflow:hidden; background:#f7e9e5; border:2px solid transparent; border-radius:9px; transition:border-color .13s ease, transform .13s ease; }
.image-choice:hover { transform:translateY(-1px); }
.image-choice.selected { border-color:var(--rose); }
.image-choice img { width:100%; height:100%; object-fit:cover; display:block; }
.choice-marker { display:grid; place-items:center; position:absolute; right:6px; top:6px; width:23px; height:23px; border:1px solid #e8d8dc; background:#fffdf9ed; border-radius:50%; color:transparent; font-size:13px; font-weight:700; transition:all .15s; }
.image-choice.selected .choice-marker { color:white; background:var(--rose); border-color:var(--rose); }
.feedback { border-radius:9px; padding:12px 14px; margin:0 0 14px; font-size:11.5px; font-weight:600; line-height:1.6; }
.feedback.error { color:var(--danger); background:#fff0f1; border:1px solid #f5d7dc; }
.feedback.success { color:var(--success); background:#ecf8f1; border:1px solid #cfe5d8; }
.back-button { display:block; padding:12px 5px 3px; border:0; background:none; color:#a08992; text-align:center; margin:10px auto 0; font-size:11px; }
.back-button:hover { color:var(--rose); }
.slider-box { padding:23px 20px 28px; }
.slider-value-wrap { display:flex; align-items:baseline; justify-content:center; gap:8px; margin:27px 0 24px; }
.slider-value-wrap strong { font-family:var(--font-serif); font-size:88px; font-weight:500; letter-spacing:-5px; line-height:1; color:var(--rose); font-variant-numeric:lining-nums; }
.slider-value-wrap span { color:#9a838d; font-size:13px; }
input[type=range] { appearance:none; -webkit-appearance:none; width:100%; height:8px; background:linear-gradient(to right, var(--rose) 0%, var(--rose) var(--range-progress,0%), #ebdce0 var(--range-progress,0%), #ebdce0 100%); border-radius:20px; display:block; margin:0; cursor:pointer; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:25px; height:25px; background:var(--paper); border:7px solid var(--rose); border-radius:50%; box-shadow:0 2px 6px #ad425e33; }
input[type=range]::-moz-range-thumb { width:12px; height:12px; background:var(--paper); border:7px solid var(--rose); border-radius:50%; box-shadow:0 2px 6px #ad425e33; }
.slider-ticks { display:flex; justify-content:space-between; margin-top:14px; color:#a08f95; font-size:9.5px; }
.captcha-art { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; background:#f1e5e5; background-image:repeating-linear-gradient(151deg,#f4e7e6,#f4e7e6 8px,#eedfdf 9px,#eedfdf 10px); border:1px solid #e3ced3; min-height:125px; border-radius:9px; margin:19px 0 24px; user-select:none; isolation:isolate; }
.captcha-art::before, .captcha-art::after { content:""; position:absolute; width:125%; left:-10%; border-top:2px solid rgba(166,73,102,.31); top:45%; transform:rotate(-11deg); z-index:2; pointer-events:none; }
.captcha-art::after { top:70%; transform:rotate(9deg); border-top:1.5px solid rgba(100,61,74,.32); }
.captcha-noise { position:absolute; inset:0; opacity:.4; background-image:radial-gradient(#ab7480 1px, transparent 1px); background-size:17px 19px; transform:rotate(-8deg) scale(1.4); }
.captcha-letters { position:relative; z-index:1; display:flex; align-items:center; justify-content:center; gap:3px; padding:5px 15px; font-family:var(--font-serif); font-size:clamp(32px,9vw,53px); font-weight:600; letter-spacing:-2px; color:#713b50; line-height:1; font-style:italic; white-space:nowrap; }
.captcha-letters span { display:inline-block; text-shadow:2px 1px 0 #ddb3bb; }
.input-label { font-size:10.5px; font-weight:700; color:#765965; display:block; margin-bottom:10px; }
.text-input { width:100%; min-height:52px; border:1px solid #e2d1d5; border-radius:10px; background:white; color:var(--ink); font-size:16px; padding:14px; outline:0; text-transform:uppercase; letter-spacing:2px; transition:border-color .15s; }
.text-input:focus { border-color:var(--rose); box-shadow:0 0 0 3px #ad425e16; outline:0; }
.text-input::placeholder { letter-spacing:0; text-transform:none; color:#b9a8ae; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.decision-screen, .success-screen { text-align:center; }
.decision-art { position:relative; height:170px; margin:10px auto 0; width:230px; display:grid; place-items:center; }
.big-heart { font-size:128px; line-height:1; color:var(--rose); transform:rotate(-10deg); filter:drop-shadow(8px 13px 0 #f5dce2); animation:heartbeat 3s ease-in-out infinite; }
.orbit-heart { position:absolute; color:#d799a9; font-size:26px; }
.heart-a { top:33px; left:16px; transform:rotate(-22deg); }
.heart-b { bottom:19px; right:10px; transform:rotate(22deg); font-size:19px; }
.orbit-spark { position:absolute; right:20px; top:21px; color:#c88962; font-size:34px; }
@keyframes heartbeat { 0%,100% { transform:rotate(-10deg) scale(1); } 50% { transform:rotate(-10deg) scale(1.04); } }
.decision-screen h2 { margin:13px 0 16px; }
.decision-screen .lead, .success-screen .lead { margin-left:auto; margin-right:auto; }
.decision-paper { border-radius:11px; border:1px solid var(--line); background:#fcf8f7; margin:26px 0 18px; padding:20px 20px 22px; text-align:left; }
.decision-paper-top { border-bottom:1px dashed #e5d1d6; padding-bottom:12px; }
.decision-paper p { font-family:var(--font-serif); font-size:21px; line-height:1.36; margin:17px 0 10px; }
.decision-paper small { font-size:10.5px; line-height:1.7; color:#99868d; }
.yes-button { font-size:13px; }
.success-screen { padding-top:13px; }
.approved-stamp { width:157px; height:157px; border:3px double #c78393; border-radius:50%; margin:8px auto 25px; color:var(--rose); transform:rotate(-10deg); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; box-shadow:inset 0 0 0 6px #fffdfa, inset 0 0 0 7px #eac6cf; }
.approved-stamp span { font-size:44px; line-height:1; }
.approved-stamp strong { font-size:15px; letter-spacing:1.2px; font-weight:700; }
.approved-stamp small { font-size:8px; font-weight:700; letter-spacing:1.25px; }
.success-screen h2 { margin:15px 0 17px; }
.receipt { margin:29px 0 23px; text-align:left; padding:14px 19px; background:#fcf8f7; border:1px dashed #d9b8c1; border-radius:11px; }
.receipt-line { display:flex; justify-content:space-between; gap:8px; padding:11px 0; font-size:11px; border-bottom:1px solid #f0e3e6; }
.receipt-line:last-child { border-bottom:0; }
.receipt-line span { color:#99818b; }
.receipt-line strong { font-weight:700; text-align:right; }
.receipt-line .approved-text { color:var(--success); }
.final-note { font-family:var(--font-serif); font-style:italic; font-size:20px; color:var(--rose); }
.restart { margin-top:23px; }
.modal-backdrop { position:fixed; inset:0; background:rgba(51,29,39,.53); z-index:30; display:flex; align-items:center; justify-content:center; padding:20px; backdrop-filter:blur(5px); }
.modal { background:#fffdfa; border:1px solid #f4e4e7; border-radius:21px; padding:30px 26px 25px; width:min(100%,400px); text-align:center; box-shadow:0 23px 80px #3217223d; animation:pop .24s both; }
@keyframes pop { from { opacity:0; transform:translateY(10px) scale(.97) } to { opacity:1; transform:translateY(0) scale(1) } }
.modal-icon { display:grid; place-items:center; width:55px; height:55px; border-radius:50%; background:#ffe9ee; color:var(--rose); margin:0 auto 17px; font-family:var(--font-serif); font-size:35px; }
.modal h2 { font-size:32px; margin:12px 0 12px; }
.modal p:not(.eyebrow) { color:#8c7880; line-height:1.85; font-size:12px; margin-bottom:24px; }
.confetti-layer { position:fixed; inset:0; pointer-events:none; z-index:50; overflow:hidden; }
.confetti { position:absolute; top:-25px; width:9px; height:15px; opacity:0; border-radius:2px; animation:fall var(--duration,4s) linear forwards; animation-delay:var(--delay,0s); }
@keyframes fall { 0% { transform:translate3d(0,-30px,0) rotate(0); opacity:1; } 90% { opacity:1; } 100% { transform:translate3d(var(--drift,70px),108vh,0) rotate(var(--rotation,700deg)); opacity:0; } }
@media (min-width:600px) { .app-shell { padding:36px 18px; } .main-card { padding:30px 39px 36px; border-radius:24px; } .screen { padding-top:32px; } .document { padding:26px 24px 24px; } .challenge-box { padding:22px; } .image-grid { gap:9px; } .site-header { margin-bottom:22px; } }
@media (max-width:370px) { .site-header { gap:4px; } .edition { font-size:8px; padding:7px 6px; } .brand-copy strong { font-size:15px; } .brand-copy small { font-size:9px; } .main-card { padding:21px 16px; } .anniversary-seal { width:67px; height:67px; } .anniversary-seal span { font-size:25px; } .hero-intro { padding-right:0; } .document { padding:17px 13px; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } }