@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@300;400;500;600&display=swap');
:root{--navy:#071b39;--blue:#10325c;--cream:#f6f0e6;--gold:#d6c299;--pink:#e8bec9}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y proximity}body{margin:0;background:var(--navy);color:#f5f2ec;font-family:'Noto Serif SC','Songti SC',serif;font-weight:300}a,button{color:inherit}section{min-height:100svh;position:relative;overflow:hidden;scroll-snap-align:start}.hero,.ending{background:radial-gradient(ellipse at 50% 105%,#12436c 0,#0b2a4e 35%,#071b39 75%)}#stars,#sea{position:absolute;inset:0;width:100%;height:100%}.hero-copy,.end-copy{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);text-align:center;width:min(90%,700px);z-index:1}.eyebrow,.folio,.folio span{font:10px/1.5 Arial,sans-serif;letter-spacing:.25em;color:#a4b5c7}.reveal{font-size:clamp(21px,4vw,34px);line-height:2;margin:45px 0 26px}.reveal span{font-size:.68em;color:#bac8d5}.hidden{display:none!important}.birthday{animation:rise 1.2s both}.birthday span{color:var(--gold);letter-spacing:.18em}.birthday h1{font-size:clamp(48px,11vw,100px);font-weight:300;margin:22px 0}.birthday p{letter-spacing:.22em}.pill{border:1px solid #7186a0;background:#102c4c88;border-radius:99px;padding:13px 23px;font:12px inherit;letter-spacing:.12em;cursor:pointer;transition:.3s}.pill:hover{background:#24476c;transform:translateY(-2px)}.pill b{margin-left:20px;color:var(--gold)}.scroll-hint{position:absolute;bottom:32px;left:50%;transform:translateX(-50%);font-size:11px;letter-spacing:.12em;text-decoration:none;color:#b4c2d0}.progress{position:fixed;z-index:10;right:22px;top:22px;display:flex;align-items:center;gap:10px;font:10px Arial;letter-spacing:.15em}.progress div{height:1px;width:80px;background:#ffffff40}.progress i{display:block;height:1px;background:#e4d5b1;width:16.6%;transition:width .5s}.progress a{text-decoration:none;color:var(--gold)}.panel{padding:10vh 11vw;background:#0b2344}.folio{display:flex;justify-content:space-between}.split{height:75vh;display:grid;grid-template-columns:1fr 1px 1.2fr;align-items:center;gap:8vw}.split h2{font-weight:300;font-size:clamp(48px,8vw,100px);line-height:1.35;transform:translateX(-40px);opacity:0;transition:1s}.split .rule{height:40%;background:#e5d9c655}.copy{opacity:0;transform:translateX(35px);transition:1s .2s;max-width:400px;white-space:pre-line}.seen .split h2,.seen .copy{opacity:1;transform:none}.copy small{color:var(--gold);letter-spacing:.15em}.copy p{font-size:16px;line-height:2.2}.copy em{font-size:12px;color:#afbdcc}.memories{background:#102d4a;display:grid;place-items:center;padding:10vh 8vw}.memory-bg{position:absolute;inset:-20%;background-position:center;background-size:cover;filter:blur(30px);opacity:.22;transition:background-image .4s}.memory-card{position:relative;width:min(740px,90vw)}.photo{height:min(58vh,560px);background:linear-gradient(140deg,#294e6b,#182f4e 60%,#465d73);display:grid;place-content:center;text-align:center;color:#c1d2df;letter-spacing:.3em}.photo span{font-size:54px;color:#d8c797}.photo small{font:10px Arial;margin-top:12px}.photo.has-image{background-size:cover;background-position:center}.caption{display:flex;gap:25px;align-items:center;padding:18px 0;border-bottom:1px solid #ffffff33}.caption>span{font:11px Arial;color:var(--gold)}.caption h2{font-size:20px;font-weight:400;margin:0}.caption p,.swipe-hint{font-size:12px;color:#b6c5d2}.caption p{margin:7px 0 0}.arrows{margin-left:auto;display:flex;gap:8px}.arrows button{border:1px solid #ffffff55;background:none;border-radius:50%;width:36px;height:36px;cursor:pointer}.swipe-hint{text-align:center}.cake{background:#0c2342;display:grid;place-items:center;padding:10vh 20px;text-align:center}.cake-scene{position:relative;z-index:1}.cake h2{font-size:clamp(25px,5vw,44px);font-weight:300}.cake-art{width:270px;height:190px;position:relative;margin:22px auto 5px}.plate{position:absolute;width:270px;height:33px;border-radius:50%;background:#e6bdca;bottom:5px;box-shadow:0 8px #dbaebc}.cake-body{position:absolute;bottom:30px;left:28px;width:214px;height:102px;border-radius:50% 50% 16px 16px;background:linear-gradient(#fff9ed 0 18%,#e9dfd1 19% 100%);box-shadow:inset 0 -9px #d7c8b8}.flower{position:absolute;color:#b84d7f;font-size:27px;font-style:normal}.f1{left:36px;top:12px}.f2{left:92px;top:1px}.f3{right:30px;top:16px}.candle{position:absolute;width:14px;height:58px;background:repeating-linear-gradient(135deg,#f8e5d8 0 7px,#be6688 7px 12px);left:128px;top:12px}.flame{position:absolute;color:#ffd681;font-size:20px;top:-24px;left:1px;transform:rotate(180deg);cursor:pointer;filter:drop-shadow(0 0 12px #ffc46d);animation:flicker .8s infinite alternate}#wish-hint,.blessing{font-size:13px;color:#d2c9bd}.blessing{min-height:20px;color:var(--gold)}.wish-mode:before{content:'';position:absolute;inset:0;background:#020817b8}.confetti{position:absolute;inset:0;pointer-events:none}.confetti i{position:absolute;top:-10%;width:8px;height:12px;background:#d8c299;animation:fall 3s ease-in forwards}.letter{background:radial-gradient(ellipse,#102d4c,#071b39 70%);display:grid;place-items:center}.letter-scene{text-align:center;position:relative;min-height:60vh;display:flex;align-items:center;flex-direction:column;justify-content:center}.envelope{width:230px;height:145px;background:#d8d2c7;position:relative;margin:28px auto;box-shadow:0 10px 40px #0005}.envelope:after{content:'';position:absolute;inset:0;background:linear-gradient(35deg,transparent 49%,#c4bdb2 50%) left/50% 100% no-repeat,linear-gradient(-35deg,transparent 49%,#c4bdb2 50%) right/50% 100% no-repeat}.flap{position:absolute;inset:0;background:#e9e2d5;clip-path:polygon(0 0,100% 0,50% 63%);z-index:1;transition:.7s}.seal{position:absolute;z-index:2;top:53px;left:calc(50% - 17px);border-radius:50%;width:34px;height:34px;background:#456383;display:grid;place-items:center}.paper{display:none;position:absolute;z-index:3;width:min(470px,90vw);min-height:430px;background:#f5f0e7;color:#263950;padding:38px;text-align:left;box-shadow:0 20px 70px #0008;animation:rise .9s}.letter-scene.open .paper{display:block}.letter-scene.open .flap{transform:rotateX(180deg);opacity:.2}.letter-scene.open #open-letter{visibility:hidden}.paper small,.paper time{font:10px Arial;letter-spacing:.16em;color:#71839a}.paper h2{font-weight:400;margin-top:35px}.paper p{white-space:pre-line;line-height:2}.paper p:nth-last-of-type(1){margin-top:25px}.paper time{display:block;text-align:right}.ending{background:linear-gradient(#071b39,#0b3150);display:grid;place-items:center}.end-copy{top:45%}.constellation{font-size:25px;line-height:2.5;color:#e4d8ba;margin:28px}.constellation span{font-size:16px;letter-spacing:.2em}.end-copy h2{font-weight:300;font-size:27px}.end-copy>p{color:#d7c79d}.end-copy small{color:#aabbc9}@keyframes rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}@keyframes flicker{to{transform:rotate(180deg) scale(.8);filter:drop-shadow(0 0 4px #ffc46d)}}@keyframes fall{to{transform:translateY(110vh) rotate(600deg);opacity:0}}@media(max-width:650px){.progress{right:12px;top:12px}.progress div{width:42px}.panel{padding:9vh 8vw}.split{height:auto;min-height:75vh;grid-template-columns:1fr;gap:15px;align-content:center}.split h2{margin:10px 0;font-size:57px}.split .rule{width:45px;height:1px}.copy p{font-size:15px}.photo{height:48svh}.caption{gap:12px}.caption h2{font-size:16px}.caption p{font-size:11px}.paper{padding:27px;min-height:400px}.cake-art{transform:scale(.9)}.ending .end-copy{width:90%}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
.photo.has-image>span,.photo.has-image>small{display:none}
.wish-mode:before{background:radial-gradient(ellipse at 50% 48%,rgba(1,5,17,.84) 0%,rgba(2,9,24,.72) 42%,rgba(4,14,34,.44) 78%,rgba(7,20,43,.28) 100%)}
.wish-mode .cake-body,.wish-mode .plate,.wish-mode .flower{filter:brightness(.36) saturate(.68);transition:filter 1s}
.wish-mode .flame{filter:brightness(1.25) drop-shadow(0 0 15px #ffc46d)}
.wish-mode .candle{z-index:2}
.wish-mode .candle:before{content:'';position:absolute;z-index:-1;left:50%;top:-20px;width:290px;height:290px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(255,225,168,.5) 0%,rgba(255,205,132,.34) 13%,rgba(255,191,121,.19) 32%,rgba(155,177,235,.09) 52%,rgba(128,157,224,.025) 68%,transparent 73%);filter:blur(2px);pointer-events:none}
.confetti .firework-glow{position:absolute;width:46px;height:46px;border:1px solid var(--tone);border-radius:50%;box-shadow:0 0 12px var(--tone),inset 0 0 8px var(--tone);transform:translate(-50%,-50%) scale(.15);opacity:0;animation:glow-ring 1.25s ease-out var(--delay) forwards;pointer-events:none}
.confetti i{position:absolute;top:auto;width:var(--size);height:var(--size);border-radius:50%;transform:translate(-50%,-50%) scale(.2);opacity:0;box-shadow:0 0 8px currentColor;animation:firework-spark 1.7s cubic-bezier(.12,.7,.28,1) var(--delay) forwards;clip-path:none}
.confetti i.star{border-radius:0;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);box-shadow:0 0 10px currentColor}
.confetti{left:50%;top:50%;inset:auto;width:100vw;height:100svh;transform:translate(-50%,-50%);overflow:hidden;z-index:4}
.confetti i.confetti-square{top:-12%;border-radius:1px;clip-path:none;background:var(--confetti-color);box-shadow:0 0 8px var(--confetti-color);opacity:0;transform:translate3d(0,-10vh,0) rotate(0deg);animation:confetti-fall var(--duration,4s) ease-in var(--delay) forwards}
@keyframes confetti-fall{0%{opacity:0;transform:translate3d(0,-10vh,0) rotate(0deg)}10%{opacity:.95}100%{opacity:0;transform:translate3d(var(--fall-drift),112vh,0) rotate(var(--spin))}}
@keyframes glow-ring{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}18%{opacity:.75}100%{opacity:0;transform:translate(-50%,-50%) scale(3.4)}}
@keyframes firework-spark{0%{opacity:0;transform:translate(-50%,-50%) scale(.15)}14%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(.15)}}
.paper{width:min(650px,92vw);min-height:min(560px,78svh);max-height:84svh;overflow-y:auto;padding:clamp(26px,5vw,52px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.paper p{font-size:15px;line-height:2.05}

/* 中等屏幕：平板与小尺寸笔记本 */
@media (min-width: 651px) and (max-width: 1099px) {
  .panel { padding-inline: 7vw; }
  .split {
    grid-template-columns: minmax(170px, .85fr) 1px minmax(250px, 1.15fr);
    gap: clamp(28px, 5vw, 58px);
  }
  .memories { padding-inline: 6vw; }
  .memory-card { width: min(860px, 88vw); }
  .photo { height: min(58svh, 570px); min-height: 340px; }
  .paper { width: min(700px, 88vw); }
}

/* 桌面宽屏：增加内容宽度与字号，让照片和长信更舒展 */
@media (min-width: 1100px) {
  .hero-copy, .end-copy { width: min(84vw, 1000px); }
  .reveal { font-size: clamp(30px, 3vw, 44px); }
  .birthday h1 { font-size: clamp(72px, 8vw, 132px); }
  .birthday p { font-size: 18px; }

  #preface.panel { padding: 9vh clamp(90px, 10vw, 190px); }
  .split {
    width: min(100%, 1380px);
    height: min(76vh, 850px);
    margin-inline: auto;
    grid-template-columns: minmax(220px, .9fr) 1px minmax(360px, 1.1fr);
    gap: clamp(42px, 6vw, 110px);
  }
  .split h2 { font-size: clamp(64px, 6vw, 112px); }
  .copy { max-width: 560px; }
  .copy p { font-size: 18px; }

  .memories { padding: 9vh 8vw; }
  .memory-card { width: min(100%, 1100px); }
  .photo { height: min(64svh, 720px); min-height: clamp(360px, 46svh, 560px); }
  .caption { gap: 32px; padding-block: 22px; }
  .caption h2 { font-size: 22px; }
  .caption p { font-size: 14px; }
  .swipe-hint { font-size: 13px; }

  .cake-scene { width: min(90vw, 900px); }
  .cake-art { transform: scale(1.1); margin-block: 42px 30px; }

  .letter-scene { width: min(100%, 900px); min-height: 82svh; }
  .paper {
    width: min(780px, 80vw);
    min-height: min(620px, 76svh);
    max-height: 82svh;
    padding: clamp(42px, 5vw, 68px);
  }
  .paper p { font-size: 17px; line-height: 2.1; }

  .constellation { font-size: 34px; }
  .constellation span { font-size: 20px; }
  .end-copy h2 { font-size: 34px; }
}

/* 屏幕较矮时留出更多滚动空间，避免信件遮住交互内容 */
@media (min-width: 900px) and (max-height: 760px) {
  .photo { height: min(54svh, 500px); min-height: 300px; }
  .letter-scene { min-height: 78svh; }
  .paper { min-height: min(500px, 68svh); max-height: 76svh; }
}