:root { --cream:#fffaf2; --paper:#fffdf9; --ink:#3e3030; --muted:#806c6b; --rose:#c85d6f; --rose-dark:#a84356; --blush:#f6dfe1; --peach:#f7dfce; --lavender:#e8e0f0; --line:rgba(99,67,67,.12); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--cream); color:var(--ink); font-family:Arial,Helvetica,sans-serif; -webkit-font-smoothing:antialiased; }
button,input,textarea { font:inherit; }
button { -webkit-tap-highlight-color:transparent; }
main { position:relative; min-height:100vh; overflow:hidden; }
.wrap { width:min(100% - 32px,720px); margin-inline:auto; }
.ambient { position:absolute; border-radius:999px; filter:blur(4px); opacity:.55; pointer-events:none; }
.ambient-one { width:290px; height:290px; background:var(--blush); top:-130px; right:-120px; }
.ambient-two { width:220px; height:220px; background:var(--lavender); top:680px; left:-150px; }
.hero { min-height:91svh; display:flex; flex-direction:column; justify-content:center; position:relative; padding-block:74px 86px; }
.eyebrow,.section-number { margin:0 0 14px; color:var(--rose-dark); font-size:11px; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(62px,19vw,108px); line-height:.92; letter-spacing:-.06em; font-weight:500; }
h1 span { display:inline-block; font-size:.46em; transform:rotate(-7deg) translateY(-5px); }
.hero-copy { margin:28px 0 0; max-width:620px; font-family:Georgia,'Times New Roman',serif; font-size:clamp(24px,7vw,38px); line-height:1.16; letter-spacing:-.025em; }
.monitor { margin-top:34px; padding:16px 18px; border-left:3px solid var(--rose); background:rgba(255,255,255,.42); max-width:510px; }
.monitor strong,.monitor span { display:block; }
.monitor strong { font-size:12px; letter-spacing:.02em; }
.monitor span { margin-top:5px; color:var(--muted); font-size:11px; }
.doodle { position:absolute; color:var(--rose); font-family:Georgia,serif; }
.star-one { right:10%; top:15%; font-size:28px; animation:float 4s ease-in-out infinite; }
.heart-one { right:2%; bottom:18%; font-size:52px; transform:rotate(14deg); opacity:.7; }
.scroll-hint { position:absolute; left:0; bottom:24px; display:flex; align-items:center; gap:10px; color:var(--muted); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.scroll-hint span { display:block; width:34px; height:1px; background:var(--rose); }
.content { display:grid; gap:16px; padding-bottom:18px; }
.photo-break { margin:14px 0 18px; padding:7px 7px 18px; border-radius:20px; background:#fff; box-shadow:0 15px 38px rgba(79,49,49,.14); }
.photo-break img { display:block; width:100%; border-radius:14px; object-fit:cover; }
.photo-one { width:72%; justify-self:end; transform:rotate(2deg); }
.photo-one img { aspect-ratio:1/1.12; object-position:62% 62%; }
.photo-two { width:88%; justify-self:start; transform:rotate(-1.5deg); }
.photo-two img { aspect-ratio:4/3; object-position:52% 54%; }
.photo-three { width:78%; justify-self:center; transform:rotate(1deg); }
.photo-three img { aspect-ratio:4/3; object-position:44% 50%; }
.card { position:relative; border:1px solid var(--line); border-radius:28px; padding:27px 22px; background:rgba(255,253,249,.9); box-shadow:0 16px 50px rgba(77,42,42,.07); }
.card:nth-child(2) { background:linear-gradient(145deg,#fffdf9,#fff7f4); }
.card:nth-child(3) { background:linear-gradient(145deg,#fffdf9,#fbf8ff); }
h2 { margin:0; font-family:Georgia,'Times New Roman',serif; font-size:clamp(31px,9vw,46px); line-height:1.03; letter-spacing:-.035em; font-weight:500; text-wrap:balance; }
.mood-value { display:flex; align-items:baseline; justify-content:center; margin:27px 0 7px; }
.mood-value span { font-family:Georgia,serif; font-size:66px; color:var(--rose-dark); line-height:1; }
.mood-value small { color:var(--muted); font-size:13px; }
.slider-row { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; }
.slider-row>span { font-size:24px; }
input[type='range'] { appearance:none; width:100%; height:7px; border-radius:10px; outline:none; background:linear-gradient(to right,var(--rose) 0 var(--mood),var(--blush) var(--mood) 100%); }
input[type='range']::-webkit-slider-thumb { appearance:none; width:26px; height:26px; border:5px solid var(--paper); border-radius:50%; background:var(--rose); box-shadow:0 3px 14px rgba(120,50,60,.28); }
input[type='range']::-moz-range-thumb { width:18px; height:18px; border:5px solid var(--paper); border-radius:50%; background:var(--rose); box-shadow:0 3px 14px rgba(120,50,60,.28); }
.choice-grid { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:26px; }
.choice { min-height:62px; padding:10px 11px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:5px; color:var(--ink); border:1px solid var(--line); border-radius:17px; background:rgba(255,255,255,.66); font-size:13px; font-weight:700; text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease,box-shadow .18s ease; }
.choice span { font-size:22px; }
.choice:hover { transform:translateY(-2px); border-color:rgba(200,93,111,.35); }
.choice:active { transform:scale(.97); }
.choice.selected { border-color:rgba(200,93,111,.5); background:var(--blush); box-shadow:inset 0 0 0 1px rgba(255,255,255,.7); }
.answer { margin-top:18px; padding:17px 18px; border-radius:17px; background:var(--peach); animation:reveal .32s ease both; }
.answer strong,.answer span { display:block; }
.answer strong { font-family:Georgia,serif; font-size:18px; line-height:1.28; font-weight:600; }
.answer span { margin-top:6px; white-space:pre-line; color:var(--muted); font-size:12px; line-height:1.5; }
.mood-answer { min-height:77px; display:flex; align-items:center; }
.note-card textarea { width:100%; margin-top:25px; padding:18px; resize:vertical; min-height:160px; color:var(--ink); border:1px solid var(--line); border-radius:18px; outline:none; background:rgba(255,255,255,.75); line-height:1.5; transition:border-color .2s,box-shadow .2s; }
.note-intro { margin:13px 0 -10px; color:var(--muted); font-size:14px; }
.sms-hint { margin:10px 3px 0; color:var(--muted); font-size:11px; }
.note-card textarea:focus { border-color:rgba(200,93,111,.55); box-shadow:0 0 0 4px rgba(200,93,111,.1); }
.note-card textarea::placeholder { color:#ab9997; }
.save-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:12px; }
.primary { border:0; border-radius:999px; padding:15px 20px; background:var(--rose); color:white; font-weight:800; font-size:13px; cursor:pointer; box-shadow:0 8px 24px rgba(168,67,86,.22); transition:transform .18s,background .18s; }
.primary:hover { background:var(--rose-dark); transform:translateY(-1px); }
.primary:active { transform:scale(.97); }
.saved { opacity:0; color:var(--rose-dark); font-size:12px; transform:translateY(4px); transition:.25s; }
.saved.visible { opacity:1; transform:translateY(0); }
.distance-card { overflow:hidden; min-height:330px; transition:background .7s ease; }
.distance-card.complete { background:linear-gradient(160deg,#3f344a,#6d4956); color:#fffaf2; }
.distance-card.complete .section-number { color:#f3bdc7; }
.moon-button { margin-top:25px; }
.stars { position:absolute; inset:0; pointer-events:none; opacity:.16; }
.stars i { position:absolute; font-style:normal; color:var(--rose); animation:twinkle 3s infinite ease-in-out; }
.stars i:nth-child(1){top:12%;right:10%;font-size:24px}.stars i:nth-child(2){top:28%;right:31%;font-size:30px;animation-delay:.6s}.stars i:nth-child(3){bottom:14%;left:10%;font-size:22px;animation-delay:1.2s}.stars i:nth-child(4){bottom:20%;right:13%;font-size:38px;animation-delay:.2s}.stars i:nth-child(5){top:11%;left:39%;font-size:13px;animation-delay:1.6s}
.complete .stars { opacity:.55; }.complete .stars i { color:#ffe3c8; }
.distance-sequence { position:relative; margin-top:23px; }
.distance-sequence p { margin:7px 0; color:var(--muted); font-size:14px; }
.complete .distance-sequence p { color:#ddceda; }
.distance-sequence .latest { color:var(--ink); font-family:Georgia,serif; font-size:19px; animation:reveal .4s ease both; }
.complete .distance-sequence .latest { color:white; }
.distance-sequence strong { display:block; margin-top:26px; font-family:Georgia,serif; font-size:clamp(38px,11vw,58px); line-height:1; animation:reveal .8s .25s ease both; }
.finale { margin-top:16px; padding:86px 0 30px; background:#49383b; color:#fffaf2; }
.finale .section-number { color:#f3bdc7; }
.finale h2 { font-size:clamp(36px,10vw,57px); }
.finale>.wrap>p:not(.section-number):not(.made-with) { max-width:630px; margin:27px 0 0; color:#e7dada; font-family:Georgia,serif; font-size:19px; line-height:1.55; }
.signoff { margin-top:55px; padding:22px 0; border-top:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.signoff span,.signoff strong { display:block; }.signoff span { color:#cdbabb; font-size:12px; }.signoff strong { margin-top:8px; font-family:Georgia,serif; font-size:21px; }
.made-with { margin:64px 0 0; color:#a99194; font-size:9px; letter-spacing:.12em; text-align:center; text-transform:uppercase; }
@keyframes reveal { from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes float { 50%{transform:translateY(8px) rotate(8deg)} }
@keyframes twinkle { 50%{opacity:.25;transform:scale(.75)} }
@media (min-width:620px) { .wrap{width:min(100% - 64px,720px)}.card{padding:38px;border-radius:34px}.choice-grid{grid-template-columns:repeat(3,1fr)}.choice{min-height:76px;padding:13px}.mood-card{padding-inline:50px} }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} }