:root { --ink:#4f2636; --berry:#a92f59; --rose:#d8527a; --blush:#f7dce3; --paper:#fffaf8; }
* { box-sizing:border-box; }
html { background:#fbe7eb; }
body { margin:0; color:var(--ink); font-family:"Avenir Next",Avenir,"Segoe UI",system-ui,sans-serif; }
button { font:inherit; }
button:focus-visible,a:focus-visible { outline:3px solid rgba(158,43,82,.4); outline-offset:5px; }
[hidden] { display:none !important; }
.proposal-shell { --sadness:0; position:relative; display:flex; min-height:100svh; flex-direction:column; align-items:center; overflow:hidden; padding:24px clamp(18px,5vw,72px) 20px; background:radial-gradient(circle at 16% 15%,rgba(255,255,255,.96) 0 8%,transparent 31%),radial-gradient(circle at 88% 80%,rgba(255,255,255,.68) 0 6%,transparent 29%),linear-gradient(145deg,#fff4f5 0%,#fbe1e7 46%,#f8d6e1 100%); isolation:isolate; transition:background .5s ease; }
.proposal-shell::before { position:absolute; inset:18px; z-index:-1; border:1px solid rgba(126,50,75,.11); border-radius:34px; content:""; pointer-events:none; }
.proposal-shell::after { position:absolute; inset:0; z-index:-1; background:rgba(69,39,52,calc(var(--sadness) * .14)); content:""; pointer-events:none; transition:background .35s ease; }
.proposal-shell.is-celebrating { background:radial-gradient(circle at 15% 15%,rgba(255,255,255,.98),transparent 30%),radial-gradient(circle at 85% 82%,rgba(255,255,255,.8),transparent 30%),linear-gradient(145deg,#fff0f2,#ffd9e3 52%,#f8c9d9); }
.soft-light { position:absolute; z-index:-1; width:420px; height:420px; border-radius:50%; filter:blur(15px); pointer-events:none; }
.light-one { top:-300px; left:28%; background:rgba(255,255,255,.52); }
.light-two { right:-280px; bottom:-260px; background:rgba(218,82,122,.08); }
.proposal-header { z-index:4; display:grid; width:min(1120px,100%); grid-template-columns:1fr auto 1fr; align-items:center; }
.home-link { display:inline-flex; width:max-content; align-items:center; gap:9px; color:rgba(79,38,54,.62); font-family:Georgia,serif; font-size:12px; text-decoration:none; }
.couple-mark { display:grid; width:52px; height:52px; cursor:pointer; place-items:center; border:1px solid rgba(105,36,60,.18); border-radius:50%; color:#6b3448; background:rgba(255,255,255,.35); box-shadow:inset 0 1px 0 rgba(255,255,255,.7); font-family:Georgia,serif; font-size:12px; letter-spacing:.04em; transition:transform .18s ease,background .18s ease; }
.couple-mark:hover { background:rgba(255,255,255,.72); transform:rotate(-5deg); }
.couple-mark span { color:#bb4267; font-size:9px; }
.sound-toggle { display:inline-flex; cursor:pointer; align-items:center; justify-self:end; gap:8px; border:1px solid rgba(105,36,60,.12); border-radius:999px; padding:9px 13px; color:rgba(79,38,54,.57); background:rgba(255,255,255,.36); font-size:9px; font-weight:800; letter-spacing:.1em; text-transform:uppercase; }
.sound-toggle b { font:inherit; }
.sound-toggle span { color:#b94469; font-size:14px; }
.proposal-card { position:relative; display:flex; width:min(650px,100%); min-height:510px; align-items:center; justify-content:center; flex:0 1 auto; margin:auto; border:1px solid rgba(255,255,255,.9); border-radius:40px; padding:95px clamp(25px,6vw,62px) 34px; text-align:center; background:linear-gradient(rgba(255,252,250,.88),rgba(255,252,250,.88)),repeating-linear-gradient(0deg,transparent 0 5px,rgba(114,61,71,.025) 6px 7px); box-shadow:0 34px 90px rgba(101,33,57,.15),inset 0 1px 0 #fff; backdrop-filter:blur(18px); }
.proposal-card::before,.proposal-card::after { position:absolute; border:1px solid rgba(173,71,104,.12); border-radius:50%; background:#efb5c4; content:""; }
.proposal-card::before { top:24px; left:24px; width:9px; height:9px; }
.proposal-card::after { right:25px; bottom:25px; width:6px; height:6px; }
.mascot-orbit { position:absolute; top:-66px; left:50%; z-index:3; display:grid; width:132px; height:132px; place-items:center; border:9px solid #fffaf8; border-radius:50%; background:linear-gradient(145deg,#ffe8ec,#f8cad5); box-shadow:0 18px 38px rgba(105,36,60,.17),inset 0 1px 0 white; transform:translateX(-50%); transition:.25s ease; }
.mascot-orbit img { position:relative; z-index:2; width:88px; height:88px; object-fit:contain; filter:drop-shadow(0 8px 9px rgba(109,41,63,.09)); transition:transform .25s ease; }
.mascot-orbit.mood-happy { background:linear-gradient(145deg,#fff0df,#ffd6dc); transform:translateX(-50%) translateY(-4px) rotate(2deg); }
.mascot-orbit.mood-happy img { transform:scale(1.08); }
.mascot-orbit.mood-sad { background:linear-gradient(145deg,#f3e8eb,#ddc9d0); }
.mascot-orbit.mood-sad img { transform:translateY(3px) rotate(-2deg); }
.mascot-glow { position:absolute; inset:10px; border:1px solid rgba(255,255,255,.6); border-radius:50%; }
.mascot-heart { position:absolute; top:2px; right:5px; z-index:3; color:#c9466d; font-family:Georgia,serif; font-size:21px; animation:heartbeat 1.8s ease-in-out infinite; }
.question-view,.success-view { width:100%; animation:view-in .42s ease both; }
.proposal-kicker { margin:0 0 15px; color:#b65070; font-size:10px; font-weight:850; letter-spacing:.22em; text-transform:uppercase; }
.question-view h1,.success-view h1 { margin:0; color:#52263a; font-family:Georgia,"Times New Roman",serif; font-size:clamp(39px,5.2vw,58px); font-weight:400; letter-spacing:-.045em; line-height:1.02; text-wrap:balance; }
.question-view h1 em { color:#c64069; font-weight:400; }
.proposal-copy { max-width:440px; margin:18px auto 0; color:rgba(79,38,54,.6); font-size:13px; line-height:1.65; text-wrap:balance; }
.message-bubble { min-height:38px; margin:16px auto 0; border:1px solid transparent; border-radius:999px; padding:9px 15px; opacity:0; color:#a64362; font-family:Georgia,serif; font-size:12px; font-style:italic; transition:.24s ease; }
.message-bubble.is-visible { border-color:rgba(180,70,104,.11); opacity:1; background:rgba(250,226,231,.52); }
.button-playground { position:relative; width:100%; min-height:128px; margin-top:1px; }
.answer-button { position:absolute; cursor:pointer; border:0; border-radius:999px; font-size:13px; font-weight:850; white-space:nowrap; transition:left .34s cubic-bezier(.2,.75,.2,1),top .34s cubic-bezier(.2,.75,.2,1),transform .26s ease,box-shadow .18s ease; touch-action:manipulation; }
.yes-button { top:50%; left:50%; z-index:1; padding:15px 27px; color:white; background:linear-gradient(135deg,#dc5b81,#a92f59); box-shadow:0 14px 30px rgba(169,47,89,.26); transform:translate(-50%,-50%) scale(var(--yes-scale)); }
.no-button { top:var(--no-top); left:var(--no-left); z-index:2; padding:11px 18px; color:#97506a; background:#f6dfe5; box-shadow:0 8px 20px rgba(118,49,71,.1); transform:translate(-50%,-50%) scale(var(--no-scale)); }
.heart-meter { display:flex; min-height:10px; justify-content:center; gap:5px; margin-top:-2px; }
.heart-meter span { color:rgba(175,67,101,.14); font-family:Georgia,serif; font-size:9px; transition:.22s ease; }
.heart-meter span.is-filled { color:#d46b8b; transform:scale(1.15); }
.success-view h1 { color:#a92f59; font-size:clamp(51px,7vw,72px); }
.success-lead { margin:12px 0 0; color:#6c354a; font-family:Georgia,serif; font-size:20px; }
.tiny-love-note { display:grid; max-width:410px; grid-template-columns:22px 1fr 22px; gap:5px; margin:25px auto 0; border-block:1px solid rgba(175,67,101,.13); padding:17px 0; color:rgba(79,38,54,.7); }
.tiny-love-note span { color:#cf6f8b; font-family:Georgia,serif; font-size:31px; line-height:.8; }
.tiny-love-note p { margin:0; font-family:Georgia,serif; font-size:15px; font-style:italic; line-height:1.55; }
.screenshot-note { margin:20px 0 0; color:rgba(79,38,54,.52); font-size:12px; }
.again-button { cursor:pointer; margin-top:23px; border:0; border-radius:999px; padding:12px 21px; color:white; background:#53263a; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.proposal-footer { display:flex; align-items:center; gap:9px; margin-top:auto; padding-top:13px; color:rgba(79,38,54,.38); font-family:Georgia,serif; font-size:11px; font-style:italic; }
.proposal-footer i { color:#b33f64; font-size:10px; }
.floating-hearts span { position:absolute; z-index:-1; color:rgba(159,51,86,.12); font-family:Georgia,serif; animation:float-heart 7s ease-in-out infinite; }
.floating-hearts span:nth-child(1){top:13%;left:11%;font-size:25px}.floating-hearts span:nth-child(2){top:24%;right:13%;font-size:14px;animation-delay:-1.2s}.floating-hearts span:nth-child(3){right:7%;bottom:20%;font-size:21px;animation-delay:-2.4s}.floating-hearts span:nth-child(4){bottom:13%;left:17%;font-size:16px;animation-delay:-3.5s}.floating-hearts span:nth-child(5){top:49%;left:6%;font-size:11px;animation-delay:-.7s}.floating-hearts span:nth-child(6){top:9%;right:32%;font-size:9px;animation-delay:-4s}.floating-hearts span:nth-child(7){right:22%;bottom:8%;font-size:12px;animation-delay:-5s}.floating-hearts span:nth-child(8){bottom:31%;left:24%;font-size:8px;animation-delay:-1.8s}.floating-hearts span:nth-child(9){top:32%;left:20%;font-size:10px;animation-delay:-3.1s}.floating-hearts span:nth-child(10){top:58%;right:20%;font-size:8px;animation-delay:-4.6s}
.confetti-field { position:fixed; inset:0; z-index:15; overflow:hidden; pointer-events:none; }
.confetti-field span { position:absolute; bottom:-45px; left:var(--confetti-left); color:#d64f78; font-family:Georgia,serif; font-size:var(--confetti-size); opacity:0; animation:confetti-rise var(--confetti-duration) cubic-bezier(.16,.72,.24,1) var(--confetti-delay) both; }
@keyframes heartbeat { 0%,100%{transform:scale(1)}15%{transform:scale(1.22)}28%{transform:scale(1)} }
@keyframes view-in { from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)} }
@keyframes float-heart { 0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-13px) rotate(6deg)} }
@keyframes confetti-rise { 0%{opacity:0;transform:translate3d(0,0,0) rotate(-12deg) scale(.7)}12%{opacity:.9}100%{opacity:0;transform:translate3d(25px,-112vh,0) rotate(32deg) scale(1.25)} }
@media (max-width:560px) { .proposal-shell{min-height:100svh;overflow-y:auto;padding:14px}.proposal-shell::before{inset:8px;border-radius:25px}.proposal-header{grid-template-columns:1fr auto 1fr}.home-link span{display:none}.couple-mark{width:45px;height:45px}.sound-toggle{width:42px;height:42px;justify-content:center;border-radius:50%;padding:0}.sound-toggle b{display:none}.proposal-card{min-height:515px;margin:70px 0 20px;border-radius:30px;padding:77px 19px 28px}.mascot-orbit{top:-56px;width:112px;height:112px;border-width:7px}.mascot-orbit img{width:76px;height:76px}.question-view h1{font-size:clamp(37px,10.8vw,48px)}.proposal-copy{max-width:330px;font-size:12px}.button-playground{min-height:136px}.proposal-footer{padding-bottom:5px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }