:root { --ink:#422931; --pink:#f7ccd4; --deep-pink:#ee8fa5; --cream:#fffaf6; --red:#d94f68; }
* { box-sizing:border-box; } body { margin:0; min-height:100vh; color:var(--ink); background:#f3bfc9; font-family:"Noto Serif SC", serif; overflow-x:hidden; }
.paper-grain { display:none; }
.scrapbook { display:grid; grid-template-columns:245px minmax(0,1fr); min-height:100vh; }
.sidebar { z-index:5; padding:38px 26px 24px; background:#fff8f4; border-right:2px solid #e9aab7; display:flex; flex-direction:column; position:relative; }
.sidebar:after { content:""; position:absolute; right:-6px; top:0; height:100%; border-right:2px dashed #e7a3b2; }
.logo { color:var(--ink); text-decoration:none; font:47px "ZCOOL KuaiLe","Noto Serif SC",serif; line-height:1; letter-spacing:1px; transform:rotate(-4deg); display:inline-block; }
.logo span { color:var(--red); font-family:sans-serif; font-size:23px; vertical-align:top; margin-left:9px; }
.side-note,.side-date { font:11px/1.5 "DM Mono",monospace; letter-spacing:.08em; color:#aa7581; }.side-note { margin:19px 0 52px; }.side-date { margin-top:auto; }
nav { display:grid; gap:12px; }.tab { width:100%; font:600 19px "Noto Serif SC",serif; cursor:pointer; text-align:left; color:var(--ink); border:0; background:none; padding:12px 10px; transition:.2s transform,.2s background; }.tab i { display:inline-grid; place-items:center; width:25px; height:25px; margin-right:12px; color:#fff; background:var(--deep-pink); border-radius:50%; font:10px "DM Mono",monospace; font-style:normal; }.tab:hover,.tab.active { transform:translateX(5px) rotate(-1deg); background:#ffdce2; }.tab.active { box-shadow:3px 3px 0 #e59baa; }
.page { display:none; position:relative; min-height:100vh; overflow:hidden; padding:clamp(42px,8vw,100px); background:var(--cream); }.page.active { display:block; animation:appear .35s ease both; } @keyframes appear { from { opacity:0; transform:translateY(5px) } }
#home { min-height:800px; background:linear-gradient(120deg,#fffdf9 0 62%,#f8d8dd 62%); }.eyebrow { margin:0 0 13px; color:#c76b81; font:12px "DM Mono",monospace; letter-spacing:.18em; }.page h1 { position:relative; z-index:2; max-width:none; margin:0; text-align:center; font-family:"ZCOOL KuaiLe","Noto Serif SC",serif; font-size:clamp(50px,5.7vw,85px); line-height:1.18; letter-spacing:.06em; font-weight:400; }.page h1 span { color:#ec8197; text-shadow:3px 3px 0 #fff, 5px 5px 0 #e9b7bd; }.intro { position:relative; z-index:2; margin:26px 0; font-size:17px; line-height:1.85; }
.polaroid { position:relative; padding:12px 12px 30px; background:#fff; box-shadow:8px 10px 17px #8f62693b; margin:0; }.hero-photo { position:absolute; left:50%; top:37%; width:min(50vw,600px); transform:translateX(-50%) rotate(4deg); z-index:1; }.photo-placeholder { display:grid; min-height:170px; place-items:center; text-align:center; color:#c98d99; background:linear-gradient(135deg,#f7ccd5,#fff3ee 55%,#ecc2c9); border:1px dashed #db9ca9; font:16px/1.5 "DM Mono",monospace; }.photo-placeholder small { font-size:10px; }.hero-photo .photo-placeholder { min-height:390px; }.hero-photo img { display:block; width:100%; height:390px; object-fit:cover; object-position:68% center; }.polaroid figcaption { margin-top:9px; font:15px "DM Mono",monospace; color:#795660; }.tape { position:absolute; background:#f9d5b9c9; width:110px; height:32px; z-index:2; }.tape-one { left:calc(50% - 355px); top:35%; transform:rotate(-38deg); }.tape-two { left:calc(50% + 220px); top:calc(37% + 395px); transform:rotate(15deg); }.doodle { position:absolute; z-index:2; color:var(--red); font-family:serif; }.star { top:31%; left:15%; font-size:49px; transform:rotate(20deg); }.heart { bottom:12%; left:18%; font-size:78px; }.flower { right:14%; bottom:12%; font-size:46px; }.sticker { position:absolute; z-index:3; display:grid; place-items:center; background:transparent; box-shadow:none; pointer-events:none; }.donut-sticker { left:9%; bottom:8%; width:72px; height:62px; transform:rotate(-13deg); font-size:42px; }.bow-sticker { right:10%; top:47%; width:62px; height:62px; transform:rotate(9deg); font-size:35px; }.cake-sticker { left:7%; top:49%; width:165px; height:175px; transform:rotate(-6deg); }.cake-sticker i { position:absolute; display:block; }.cake-body { left:15px; bottom:14px; width:135px; height:82px; background:#f8a6b9; border:3px solid #c95d77; border-radius:14px 14px 24px 24px; box-shadow:inset 0 -16px #ee829d, 3px 4px 0 #e8a4b1; }.cake-cream { left:11px; bottom:77px; width:143px; height:38px; background:#fff8ef; border:3px solid #c95d77; border-radius:50% 50% 12px 12px; }.cake-cream:after { content:""; position:absolute; left:13px; right:13px; bottom:-14px; height:25px; background:radial-gradient(circle at 12px 0,#fff8ef 11px,transparent 12px) 0 0/32px 25px repeat-x; }.cake-cherry { left:71px; bottom:112px; width:20px; height:20px; background:#e4516d; border:3px solid #c95d77; border-radius:50%; }.cake-cherry:after { content:""; position:absolute; width:18px; height:11px; border-top:3px solid #76a474; border-radius:50%; left:9px; top:-12px; transform:rotate(-35deg); }.cake-candle { bottom:128px; width:9px; height:34px; background:repeating-linear-gradient(45deg,#fff9ec 0 5px,#ee86a2 5px 9px); border:2px solid #c95d77; border-radius:5px; }.cake-candle:before { content:""; position:absolute; left:-2px; top:-15px; width:9px; height:14px; background:#ffca62; border:2px solid #d98a47; border-radius:70% 30% 70% 30%; transform:rotate(45deg); }.candle-one { left:43px; }.candle-two { left:78px; bottom:132px; }.candle-three { left:112px; }.berry-sticker { right:8%; bottom:7%; width:55px; height:55px; transform:rotate(12deg); font-size:35px; }.cherry-sticker { right:10%; top:30%; width:83px; height:39px; color:#f1849a; font:24px "Ma Shan Zheng",serif; transform:rotate(-9deg); }
.page-heading h2 { margin:0; font-size:clamp(52px,6vw,82px); letter-spacing:-.1em; }.page-heading h2 span { color:#ed89a0; }.birthday-layout { display:flex; gap:clamp(30px,8vw,110px); align-items:center; margin-top:40px; }.letter { position:relative; width:min(570px,100%); min-height:350px; padding:48px 52px 38px; background:repeating-linear-gradient(#fffdf9 0 34px,#eccbd0 35px 36px); box-shadow:6px 7px 0 #e6aebb; transform:rotate(-1.5deg); }.pushpin { position:absolute; top:-15px; left:50%; color:#dd6d84; font-size:35px; }.letter-label,.letter-sign { font:13px "DM Mono",monospace; color:#bb6f7e; }.letter-copy { font-size:16px; line-height:2.2; }.letter-sign { text-align:right; margin-top:20px; }.birthday-decor { color:#d86279; text-align:center; transform:rotate(4deg); }.cake { display:grid; place-items:center; width:160px; height:130px; margin:auto; border-radius:30% 30% 15% 15%; background:#f6abb9; color:#fff7e8; font-size:27px; box-shadow:inset 0 -15px #df7f95; }.cake span { font:900 55px "DM Mono",monospace; }.birthday-decor p { font:20px "DM Mono",monospace; }.ribbon { font-size:50px; letter-spacing:8px; color:#eda0ae; }
#us { background:#fffafa; }.timeline { max-width:600px; margin-top:31px; border-left:2px dashed #dc8fa0; padding-left:30px; }.timeline-item { position:relative; display:flex; gap:18px; padding:0 0 30px; }.timeline-item:before { content:""; position:absolute; width:13px; height:13px; background:#ef91a6; border-radius:50%; left:-38px; top:5px; border:3px solid #fff; }.timeline-item b { color:#e77c94; font:14px "DM Mono",monospace; }.timeline-item h3 { margin:0 0 5px; font-size:20px; }.timeline-item p { margin:0; color:#8d6971; font-size:14px; }.mini-photos { position:absolute; right:9%; top:20%; display:flex; gap:24px; align-items:center; }.mini-photos .polaroid { width:190px; }.mini-photos .tilted { transform:rotate(8deg) translateY(120px); }.mini-photos .photo-placeholder { min-height:205px; }
@media (max-width:850px) { .scrapbook { grid-template-columns:1fr; }.sidebar { position:sticky; top:0; padding:14px 18px; min-height:auto; flex-direction:row; align-items:center; gap:15px; border-right:0; border-bottom:2px solid #e9aab7; }.sidebar:after,.side-note,.side-date { display:none; }.logo { font-size:41px; } nav { margin-left:auto; display:flex; gap:4px; }.tab { width:auto; font-size:14px; padding:8px; }.tab i { display:none; }.page { min-height:calc(100vh - 73px); padding:45px 28px; }.hero-photo { position:relative; top:auto; right:auto; width:min(80vw,360px); margin:44px auto 10px; }.hero-photo .photo-placeholder { min-height:290px; }.hero-photo img { height:290px; }.tape-one,.tape-two,.corner-word,.cherry-sticker { display:none; }.donut-sticker { left:8%; bottom:4%; }.bow-sticker { right:9%; bottom:2%; }.birthday-layout { flex-direction:column; align-items:flex-start; }.mini-photos { position:relative; top:auto; right:auto; margin:20px 0; }.mini-photos .tilted { transform:rotate(6deg) translateY(35px); }.mini-photos .polaroid { width:45%; } }

/* 放到拍立得左上方的留白，避免和胶带叠在一起。 */
.star { top:18%; left:7%; }

#birthday .page-heading h2 { font-family:"ZCOOL KuaiLe","Noto Serif SC",serif; font-weight:400; letter-spacing:.12em; }
#us .page-heading h2 { font-family:"ZCOOL KuaiLe","Noto Serif SC",serif; font-weight:400; letter-spacing:.12em; }

#birthday { overflow:visible; }
#birthday .birthday-layout { align-items:flex-start; }
#birthday .letter { min-height:0; }
#birthday .letter-copy p { margin:0 0 22px; }
#birthday .letter-copy { font-family:"ZCOOL XiaoWei","Noto Serif SC",serif; font-size:18px; line-height:2.1; letter-spacing:.12em; }
#birthday .letter-opening, #birthday .letter-sign { font-family:"Ma Shan Zheng","Noto Serif SC",serif; }
#birthday .letter-opening { font-size:28px; color:#c7657c; }
#birthday .letter-sign { font-size:22px; line-height:1.35; }

.donut-sticker { left:auto; right:9%; bottom:17%; width:122px; height:122px; border:4px solid #9c5b42; border-radius:47% 53% 48% 52%; background:#bd7951; box-shadow:inset -9px -11px #9f5e42, 3px 4px 0 #efbdc7; transform:rotate(12deg); }
.donut-sticker i { position:absolute; display:block; }
.donut-frosting { inset:6px; border:3px solid #d7668a; border-radius:49% 51% 46% 54%; background:radial-gradient(circle at 19% 29%,#78c9a9 0 3px,transparent 4px),radial-gradient(circle at 68% 19%,#f6d75e 0 3px,transparent 4px),radial-gradient(circle at 78% 43%,#74bce1 0 3px,transparent 4px),radial-gradient(circle at 25% 70%,#f5cf55 0 3px,transparent 4px),radial-gradient(circle at 73% 77%,#8fcdab 0 3px,transparent 4px),radial-gradient(circle at 42% 15%,#fff7ec 0 2px,transparent 3px),radial-gradient(circle at 15% 52%,#fff7ec 0 2px,transparent 3px),radial-gradient(circle at 60% 62%,#fff7ec 0 2px,transparent 3px),#f38eae; box-shadow:inset -5px -6px #e47498; }
.donut-sticker { -webkit-mask:radial-gradient(circle 19px at center,transparent 95%,#000 100%); mask:radial-gradient(circle 19px at center,transparent 95%,#000 100%); }
.donut-hole { display:none !important; }
.cloud-sticker { position:absolute; z-index:3; left:2%; bottom:2%; width:86px; height:27px; background:#fff; border:3px solid #fff; border-radius:24px 26px 17px 17px; box-shadow:0 0 0 2px #efb8c5, 2px 3px 0 #f5d6dd; transform:rotate(-5deg); }
.cloud-sticker:before,.cloud-sticker:after { content:""; position:absolute; bottom:-3px; background:#fff; border:3px solid #fff; border-bottom:0; border-radius:50% 50% 0 0; box-shadow:0 -2px 0 #efb8c5; }
.cloud-sticker:before { left:12px; width:35px; height:32px; }
.cloud-sticker:after { right:10px; width:41px; height:40px; }
.cloud-face { position:absolute; z-index:1; left:37px; top:13px; width:11px; height:6px; border:2px solid #df7892; border-top:0; border-radius:0 0 10px 10px; }
.cloud-face:before { content:""; position:absolute; left:-16px; top:-6px; width:7px; height:7px; border-radius:50%; background:#df7892; box-shadow:32px 0 #df7892; }

.cloud-sticker { left:2%; bottom:2%; width:98px; height:72px; background:none; border:0; box-shadow:none; filter:drop-shadow(2px 3px 0 #f3c7d1); transform:rotate(-5deg); }
.cloud-sticker:before,.cloud-sticker:after { display:none; }
.cloud-outline { fill:#fff; stroke:#fff; stroke-width:6; stroke-linejoin:round; }
.cloud-eye { fill:#df7892; }
.cloud-smile { fill:none; stroke:#df7892; stroke-width:5; stroke-linecap:round; }

#us { padding-right:clamp(42px,6vw,90px); }
#us .page-heading { position:relative; z-index:2; }
.wall-hint { margin:7px 0 26px; color:#c57b8b; font:13px "DM Mono",monospace; letter-spacing:.05em; }
.photo-wall-wrap { position:relative; display:flex; align-items:center; gap:15px; }
.photo-wall { display:flex; gap:26px; width:100%; padding:26px 8px 36px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; cursor:grab; }
.photo-wall::-webkit-scrollbar { display:none; }
.flip-card { flex:0 0 245px; height:330px; scroll-snap-align:center; perspective:1100px; cursor:pointer; outline:none; }
.flip-card:focus-visible .flip-card-inner { box-shadow:0 0 0 4px #ef9eaf; }
.flip-card-inner { position:relative; width:100%; height:100%; transition:transform .65s cubic-bezier(.2,.7,.2,1); transform-style:preserve-3d; }
.flip-card.flipped .flip-card-inner { transform:rotateY(180deg); }
.card-face { position:absolute; inset:0; display:flex; flex-direction:column; padding:11px 11px 24px; background:#fff; box-shadow:7px 8px 0 #ebbac4, 10px 14px 18px #8f62692b; backface-visibility:hidden; }
.card-front { transform:rotate(-2deg); }.flip-card:nth-child(even) .card-front { transform:rotate(3deg); }
.photo-slot { flex:1; display:grid; place-items:center; color:#c98494; border:2px dashed #e9a4b3; background:linear-gradient(135deg,#f9dbe0,#fff7f3 50%,#f1cbd3); font:20px "Ma Shan Zheng","Noto Serif SC",serif; }
.photo-slot img { display:block; width:100%; height:100%; object-fit:cover; object-position:center; }
.flip-card:nth-child(9) .photo-slot { padding:8px; }
.flip-card:nth-child(9) .photo-slot img { object-fit:contain; }
.end-card { flex:0 0 190px; align-self:center; display:grid; place-items:center; min-height:235px; padding:28px 12px; color:#d86d86; border:2px dashed #e899aa; background:#fff7f8; box-shadow:5px 6px 0 #f1c5ce; font:30px/1.15 "Ma Shan Zheng","Noto Serif SC",serif; text-align:center; transform:rotate(4deg); }
.end-card span { font-size:36px; }.end-card small { margin-top:14px; font:25px "Ma Shan Zheng",serif; color:#ef9aab; }
.music-player { position:fixed; z-index:10; right:25px; bottom:22px; display:flex; align-items:center; gap:10px; min-width:245px; padding:9px 13px 9px 9px; color:#8a5964; border:2px solid #efa6b5; border-radius:40px; background:#fff9faed; box-shadow:4px 5px 0 #eebac4; backdrop-filter:blur(5px); }
.music-toggle { display:grid; flex:0 0 38px; place-items:center; width:38px; height:38px; padding-left:3px; color:#fff; border:0; border-radius:50%; background:#eb849b; font:16px/1 sans-serif; cursor:pointer; }.music-toggle:hover { background:#d96780; }
.music-info { display:grid; gap:1px; line-height:1.1; }.music-info span { color:#bc7c89; font:9px "DM Mono",monospace; }.music-info b { font:17px "Ma Shan Zheng","Noto Serif SC",serif; font-weight:400; }
.music-wave { display:none; align-items:center; gap:2px; height:20px; margin-left:auto; }.music-wave i { width:3px; height:7px; border-radius:3px; background:#eb849b; animation:music-wave 1s ease-in-out infinite alternate; }.music-wave i:nth-child(2) { height:15px; animation-delay:-.25s; }.music-wave i:nth-child(3) { height:11px; animation-delay:-.5s; }.music-wave i:nth-child(4) { height:17px; animation-delay:-.75s; }.music-player.playing .music-wave { display:flex; }
@keyframes music-wave { to { transform:scaleY(.4); } }
@media (max-width:850px) { .music-player { right:15px; bottom:15px; min-width:215px; }.music-info b { font-size:15px; } }
.card-face small { margin-top:10px; color:#805d66; font:12px "DM Mono",monospace; }
.card-back { justify-content:space-between; padding:36px 28px 24px; color:#8d5260; background:repeating-linear-gradient(#fffaf6 0 34px,#f3c9d1 35px 36px); border:2px solid #efb2bf; transform:rotateY(180deg) rotate(-1deg); }
.card-back p { margin:0; font:23px/1.7 "Ma Shan Zheng","Noto Serif SC",serif; }.card-back small { text-align:right; }
.wall-control { flex:0 0 42px; width:42px; height:42px; border:2px solid #e88ca1; border-radius:50%; color:#d96982; background:#fff8f8; font:25px/1 sans-serif; cursor:pointer; transition:transform .2s,background .2s; }.wall-control:hover { background:#f9cad3; transform:scale(1.08); }
@media (max-width:850px) { #us { padding-right:28px; }.photo-wall-wrap { gap:8px; }.flip-card { flex-basis:220px; height:300px; }.wall-control { flex-basis:34px; width:34px; height:34px; font-size:20px; }.photo-wall { gap:18px; padding-top:20px; }.wall-control.previous { margin-left:-20px; }.wall-control.next { margin-right:-20px; } }

.cake-candle:before { transform-origin:bottom center; animation:candle-flicker 1.35s ease-in-out infinite alternate; }
.candle-two:before { animation-delay:-.45s; }
.candle-three:before { animation-delay:-.9s; }
@keyframes candle-flicker {
  0% { transform:rotate(37deg) scale(.86,.98); opacity:.72; }
  35% { transform:rotate(51deg) scale(1.1,.9); opacity:1; }
  70% { transform:rotate(41deg) scale(.93,1.08); opacity:.82; }
  100% { transform:rotate(57deg) scale(1.06,.94); opacity:1; }
}

.hand-heart { position:absolute; z-index:3; top:11%; right:9%; color:#fff8fa; font:92px/1 "Ma Shan Zheng","Noto Serif SC",serif; -webkit-text-stroke:2px #e8758d; text-shadow:3px 3px 0 #f7c4cf; transform-origin:center; animation:heart-beat 1.15s ease-in-out infinite; }
@keyframes heart-beat {
  0%, 100% { transform:rotate(-10deg) scale(1); }
  18% { transform:rotate(-10deg) scale(1.18); }
  36% { transform:rotate(-10deg) scale(1.02); }
  54% { transform:rotate(-10deg) scale(1.13); }
  72% { transform:rotate(-10deg) scale(1); }
}

#birthday .birthday-decor { position:sticky; top:calc(50vh - 140px); align-self:flex-start; }
@media (max-width:850px) { #birthday .birthday-decor { position:static; } }

@media (min-width:851px) { #home h1 { transform:translateY(-22px); } #home .hero-photo { top:34%; } }