:root{
  --bg1:#fff1ec; --bg2:#ffd9d6; --bg3:#ffc7c2;
  --ink:#5a3a42; --ink-soft:#8d6670; --accent:#ff6b8b; --accent2:#ff9a8b;
  --card:rgba(255,255,255,.72); --card-border:rgba(255,255,255,.9);
  --paper:#fffaf6; --line:rgba(255,107,139,.18);
  --shadow:0 10px 30px rgba(214,98,120,.18);
  --env:#ffb3b8; --env-dark:#ff9aa5; --env-flap:#ffa6b0;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC",sans-serif;
  --serif:"Songti SC","STSong","Noto Serif CJK SC","Source Han Serif SC","SimSun",serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --bg1:#2a1a24; --bg2:#3a2030; --bg3:#4a2438;
    --ink:#ffe3e8; --ink-soft:#d9aab6; --accent:#ff7f9b; --accent2:#ffab9b;
    --card:rgba(60,30,45,.62); --card-border:rgba(255,160,185,.18);
    --paper:#3a2632; --line:rgba(255,127,155,.2);
    --shadow:0 10px 30px rgba(0,0,0,.35);
    --env:#c76a80; --env-dark:#a95469; --env-flap:#b85e74;
  }
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--sans);color:var(--ink);
  background:linear-gradient(160deg,var(--bg1) 0%,var(--bg2) 55%,var(--bg3) 100%) fixed;
  min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
button{font:inherit;cursor:pointer}

/* ---------- floating hearts / petals ---------- */
#sky{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.float{position:absolute;bottom:-40px;will-change:transform,opacity;opacity:0;
  animation:rise linear infinite}
.float svg{display:block;width:100%;height:100%}
.float.heart svg{fill:var(--accent);opacity:.55}
.float.petal svg{fill:#ffc2cf;opacity:.75}
@keyframes rise{
  0%{transform:translate3d(0,0,0) rotate(0deg);opacity:0}
  10%{opacity:1}
  50%{transform:translate3d(var(--sway),-55vh,0) rotate(calc(var(--spin)/2))}
  90%{opacity:.9}
  100%{transform:translate3d(calc(var(--sway)*-1),-115vh,0) rotate(var(--spin));opacity:0}
}

/* ---------- tap burst ---------- */
#burst{position:fixed;inset:0;pointer-events:none;z-index:60}
.bh{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;animation:pop .9s ease-out forwards}
.bh svg{width:100%;height:100%;fill:var(--c,#ff6b8b)}
@keyframes pop{
  0%{transform:translate(0,0) scale(.3);opacity:1}
  100%{transform:translate(var(--dx),var(--dy)) scale(1.1);opacity:0}
}

/* ---------- opening ---------- */
.opening{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  padding:24px;transition:opacity .8s ease, visibility .8s;outline:none;cursor:pointer}
.opening.gone{opacity:0;visibility:hidden}
.opening-inner{text-align:center;transform:translateY(-4vh)}
.opening-kicker{margin:0 0 6px;letter-spacing:.3em;text-transform:uppercase;font-size:12px;color:var(--ink-soft)}
.opening-title{margin:0 0 34px;font-family:var(--serif);font-weight:700;font-size:26px;letter-spacing:.06em}
.opening-hint{margin:34px 0 0;font-size:14px;color:var(--ink-soft);animation:breathe 2.4s ease-in-out infinite}
@keyframes breathe{50%{opacity:.45}}

.envelope{position:relative;width:260px;height:170px;margin:0 auto;perspective:800px;
  animation:bob 3s ease-in-out infinite;filter:drop-shadow(0 14px 22px rgba(214,98,120,.28))}
@keyframes bob{50%{transform:translateY(-8px)}}
.env-back{position:absolute;inset:0;background:var(--env-dark);border-radius:10px}
.env-paper{position:absolute;left:14px;right:14px;top:12px;height:140px;background:var(--paper);border-radius:6px;
  padding:22px 18px;transition:transform 1s cubic-bezier(.2,.8,.2,1) .45s;z-index:1}
.paper-line{display:block;height:6px;border-radius:3px;background:var(--line);margin-bottom:12px}
.paper-line.short{width:60%}
.env-front{position:absolute;inset:0;z-index:2;border-radius:10px;background:var(--env);
  clip-path:polygon(0 0,50% 56%,100% 0,100% 100%,0 100%)}
.env-flap{position:absolute;left:0;right:0;top:0;height:100px;z-index:3;background:var(--env-flap);
  clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top center;
  transition:transform .6s ease, z-index 0s .3s;border-radius:10px 10px 0 0}
.env-seal{position:absolute;left:50%;top:78px;width:44px;height:44px;margin-left:-22px;z-index:4;border-radius:50%;
  background:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 10px rgba(214,98,120,.35);
  transition:transform .4s ease, opacity .4s ease}
.env-seal svg{width:24px;height:24px;fill:var(--accent);animation:beat 1.2s ease-in-out infinite}
@keyframes beat{0%,100%{transform:scale(1)}15%{transform:scale(1.18)}30%{transform:scale(1)}45%{transform:scale(1.12)}}
.envelope.open{animation:none}
.envelope.open .env-seal{transform:scale(0);opacity:0}
.envelope.open .env-flap{transform:rotateX(180deg);z-index:0}
.envelope.open .env-paper{transform:translateY(-90px)}

/* ---------- main ---------- */
.main{position:relative;z-index:1;max-width:520px;margin:0 auto;
  padding:calc(36px + env(safe-area-inset-top)) 18px calc(40px + env(safe-area-inset-bottom))}
.main.show{animation:fadeup .9s ease both}
@keyframes fadeup{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero{text-align:center;margin:8px 0 22px}
.hero-to{margin:0;font-size:13px;letter-spacing:.35em;text-transform:uppercase;color:var(--ink-soft)}
.hero-name{margin:4px 0 6px;font-family:var(--serif);font-size:34px;letter-spacing:.06em;
  background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-sub{margin:0;font-size:14px;color:var(--ink-soft)}

.card{background:var(--card);border:1px solid var(--card-border);border-radius:22px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:22px 20px;margin-bottom:22px}

.counter{text-align:center}
.counter-label{margin:0;font-size:14px;color:var(--ink-soft)}
.counter-day{margin:4px 0 14px;font-family:var(--serif);font-size:22px}
.counter-day b{font-size:52px;line-height:1.1;color:var(--accent);font-variant-numeric:tabular-nums;margin:0 4px}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.counter-grid div{background:rgba(255,255,255,.45);border-radius:14px;padding:10px 0 8px}
@media (prefers-color-scheme:dark){.counter-grid div{background:rgba(255,255,255,.06)}}
.counter-grid b{display:block;font-size:22px;font-variant-numeric:tabular-nums;color:var(--ink)}
.counter-grid span{font-size:12px;color:var(--ink-soft)}
.counter-since{margin:12px 0 0;font-size:12px;color:var(--ink-soft)}

.letter{position:relative;background:var(--paper);
  background-image:repeating-linear-gradient(transparent 0 33px,var(--line) 33px 34px);
  background-position:0 14px;padding:26px 22px 22px;font-family:var(--serif);min-height:220px}
.letter-stamp{position:absolute;right:16px;top:14px;width:38px;height:44px;border:2px dashed var(--accent);
  border-radius:4px;color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:18px;transform:rotate(6deg);opacity:.75}
.letter-greeting{margin:0 0 6px;font-size:18px;font-weight:700;line-height:34px}
.letter-body p{margin:0;text-indent:2em;font-size:16px;line-height:34px}
.letter-body .caret{display:inline-block;width:2px;height:1.05em;background:var(--accent);vertical-align:-2px;margin-left:1px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.letter-sign{margin:10px 0 0;text-align:right;font-size:16px;line-height:34px;opacity:0;transition:opacity .8s}
.letter-sign.on{opacity:1}
.skip{position:absolute;right:14px;bottom:-14px;border:0;border-radius:999px;padding:6px 14px;font-size:12px;
  background:var(--accent);color:#fff;box-shadow:0 4px 12px rgba(255,107,139,.35);font-family:var(--sans)}
.skip[hidden]{display:none}

.section{margin:34px 0 10px}
.section-title{text-align:center;font-family:var(--serif);font-size:22px;margin:0 0 4px}
.section-title::before,.section-title::after{content:"♥";color:var(--accent);font-size:13px;margin:0 10px;vertical-align:3px}
.section-tip{text-align:center;margin:0 0 14px;font-size:13px;color:var(--ink-soft)}

.timeline{list-style:none;margin:16px 0 0;padding:0 0 0 22px;border-left:2px dashed var(--accent2)}
.timeline li{position:relative;margin:0 0 18px;padding:14px 16px;background:var(--card);border:1px solid var(--card-border);border-radius:16px;box-shadow:var(--shadow)}
.timeline li::before{content:"";position:absolute;left:-31px;top:18px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--bg2)}
.tl-date{font-size:12px;color:var(--accent);font-weight:600}
.tl-title{margin:2px 0 4px;font-size:16px;font-weight:700}
.tl-text{margin:0;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.timeline img{display:block;width:100%;border-radius:12px;margin-top:10px}

.photos{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:16px}
.photo{margin:0;background:#fff;padding:8px 8px 10px;border-radius:6px;box-shadow:var(--shadow);transform:rotate(var(--r,0deg));transition:transform .3s}
@media (prefers-color-scheme:dark){.photo{background:#4a3240}}
.photo:active{transform:rotate(0) scale(1.03)}
.photo img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:3px;background:var(--bg2)}
.photo figcaption{margin-top:6px;font-size:12px;text-align:center;color:var(--ink-soft);font-family:var(--serif)}

.notes{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.note{position:relative;min-height:92px;border:0;border-radius:14px;padding:14px 12px;color:var(--ink);
  background:var(--card);box-shadow:var(--shadow);text-align:center;font-size:14px;line-height:1.6;
  transform:rotate(var(--r,0deg));transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .3s}
.note .front{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:100%;color:var(--ink-soft);font-size:13px}
.note .front i{font-style:normal;font-size:24px}
.note .back{display:none;font-family:var(--serif)}
.note.open{background:linear-gradient(135deg,#fff 0%,#ffe9ec 100%);transform:rotate(0) scale(1.03)}
@media (prefers-color-scheme:dark){.note.open{background:linear-gradient(135deg,#4d2c3c,#5e3046)}}
.note.open .front{display:none}
.note.open .back{display:flex;align-items:center;justify-content:center;height:100%}

.footer{text-align:center;margin-top:40px;font-family:var(--serif);color:var(--ink-soft)}
.footer p{margin:0 0 12px;font-size:16px}
.ghost{border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;padding:8px 18px;font-size:13px;font-family:var(--sans)}

.music{position:fixed;z-index:50;right:14px;top:calc(14px + env(safe-area-inset-top));width:42px;height:42px;border-radius:50%;
  border:0;background:var(--card);color:var(--accent);font-size:18px;box-shadow:var(--shadow);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.music.on{animation:spin 4s linear infinite;background:var(--accent);color:#fff}
@keyframes spin{to{transform:rotate(360deg)}}

.lightbox{position:fixed;inset:0;z-index:70;background:rgba(30,10,20,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%;max-height:78vh;border-radius:8px}
.lightbox p{color:#fff;font-family:var(--serif);margin:14px 0 0}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  #sky{display:none}
}

/* ---------- first-meeting countdown ---------- */
#counter{margin-bottom:14px}
.meet{background:linear-gradient(135deg,rgba(255,255,255,.75),rgba(255,226,214,.75))}
@media (prefers-color-scheme:dark){.meet{background:linear-gradient(135deg,rgba(70,34,52,.7),rgba(90,44,58,.7))}}
.counter-grid.three{grid-template-columns:repeat(3,1fr);max-width:300px;margin:0 auto}
.meet .counter-day b{color:var(--accent2)}
.meet-nights{margin:12px 0 0;font-size:14px;color:var(--ink);font-family:var(--serif)}
.meet-done-text{margin:6px 0 4px;font-family:var(--serif);font-size:28px;font-weight:700;color:var(--accent);animation:beat 1.6s ease-in-out infinite}