@font-face{font-family:WeddingSong;src:url("assets/font-script.ttf") format("truetype");font-display:swap}
@font-face{font-family:WeddingSerif;src:url("assets/font-serif.ttf") format("truetype");font-display:swap}
@font-face{font-family:WeddingHand;src:url("assets/font-hand.ttf") format("truetype");font-display:swap}
@font-face{font-family:WeddingNewYork;src:url("assets/font-newyork.ttf") format("truetype");font-display:swap}
:root{--page-scale:1;--red:#b70000;--ink:#111}
*{box-sizing:border-box}
html{background:#eef0f1;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:WeddingSong,"Noto Serif SC","Songti SC",SimSun,serif;background:#eef0f1;overflow-x:hidden}
button,input{font:inherit}
.wechat-share-thumb{position:absolute;left:-10000px;top:-10000px;width:300px;height:300px;overflow:hidden;pointer-events:none}
.wechat-share-thumb img{display:block;width:300px;height:300px;object-fit:cover}
#background-music{display:none}
.page-shell{height:calc(7350px * var(--page-scale));display:flex;justify-content:center;align-items:flex-start;overflow:hidden}
.invitation{position:relative;width:375px;height:7350px;flex:0 0 375px;background:#fff;overflow:hidden;transform:scale(var(--page-scale));transform-origin:top center;box-shadow:0 0 30px rgba(0,0,0,.08)}
.asset,.copy,.heart,.countdown,.calendar,.masked-photo,.map-link,.rsvp{position:absolute}
.asset{display:block;object-fit:fill;max-width:none}
.hero{left:-4px;top:0;width:384px;height:644px;object-position:center 45%}
.photo{object-fit:cover}
.round{border-radius:50%;overflow:hidden}
.copy{margin:0;padding:5px;z-index:2;font-size:12px;line-height:1;color:#000;letter-spacing:0;font-weight:400}
[data-content]{white-space:pre-line}
.center{text-align:center}
.left{text-align:right}.right{text-align:left}
.paragraph{line-height:2.5}
.english{font-family:WeddingNewYork,"Times New Roman",serif}
.serif{font-family:WeddingSerif,"Songti SC",serif;font-weight:700}
.red{color:var(--red)}
.muted{color:#cdcdcd}
.hero-date,.hero-subtitle{font-family:WeddingHand,"Brush Script MT",cursive;font-size:23px;line-height:1;font-weight:700;font-style:oblique;color:#fff;text-align:center}
.hero-name{font-size:16px;color:#fff;line-height:1}
.heart{width:15px;height:15px;color:var(--red);font-size:14px;line-height:15px;text-align:center}
.vertical{height:261px;writing-mode:vertical-rl;line-height:20px;letter-spacing:3px}
.masked-photo{overflow:hidden;-webkit-mask-image:url("assets/photo-shape.png");mask-image:url("assets/photo-shape.png");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.masked-photo img{display:block;width:100%;height:100%;object-fit:cover}
.countdown{height:85px;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--red);transform:scale(.855);transform-origin:center top;font-family:"PingFang SC","Microsoft YaHei",Arial,sans-serif}
.countdown div{width:43px;height:47px;display:flex;align-items:center;justify-content:center;gap:3px}
.countdown strong{font-size:20px;line-height:27px;font-weight:400;min-width:0;text-align:center}
.countdown span{font-family:SimSun,serif;font-size:12px;line-height:normal;align-self:flex-end;margin-bottom:3px}
.calendar{padding:15px 24px;color:var(--red);transform:scale(.75);transform-origin:center center;background:transparent}
.calendar header{font-family:WeddingSerif,serif;font-size:44px;text-align:center;line-height:60px;border-bottom:1px solid var(--red)}
.calendar header span{font-size:22px}
.calendar .week{display:grid;grid-template-columns:repeat(7,1fr);margin-top:10px;font-size:13px;text-align:center}
.calendar .year{margin:7px 0 2px;font-family:WeddingSerif,serif;font-size:13px}
.calendar ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(7,1fr);grid-auto-rows:31px;font-family:Arial,sans-serif;font-size:12px;color:#666;text-align:center}
.calendar li{position:relative;display:grid;place-items:center}
.calendar li.active{color:#fff}
.calendar li.active::before{content:"♥";position:absolute;z-index:-1;color:var(--red);font-size:29px;top:0px}
.map-link{display:block;overflow:hidden;color:inherit;text-decoration:none}
.map-preview{display:flex;width:100%;height:100%;align-items:center;justify-content:center;flex-direction:column;border:1px solid #dfe4e2;background:#edf1ef;color:#333;font-family:"Microsoft YaHei",sans-serif}
.map-preview strong{margin-top:8px;font-size:13px;font-weight:500}.map-preview small{margin-top:4px;color:#777;font-size:10px}
.map-pin{position:relative;width:18px;height:18px;border:5px solid #e84d5b;border-radius:50%;background:#fff}
.map-pin::after{content:"";position:absolute;left:50%;top:11px;width:7px;height:7px;background:#e84d5b;transform:translateX(-50%) rotate(45deg)}
.map-link::after{content:"▶";position:absolute;right:8px;top:50%;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#00cba9;box-shadow:0 2px 6px rgba(0,0,0,.18);font-family:Arial,sans-serif;font-size:14px;transform:translateY(-50%) rotate(-45deg)}
.rsvp{display:grid;gap:16px}
.rsvp label{height:34px;display:flex;align-items:center;background:#fff;border:1px solid #ababab}
.rsvp label span{padding-left:7px;color:#ff4b4b;font-family:Arial,sans-serif}
.rsvp input{width:100%;height:32px;border:0;outline:0;padding:0 10px;color:#6e6e6e;background:transparent;font-family:"Microsoft YaHei",sans-serif;font-size:13px}
.rsvp button{height:34px;margin-top:0;border:0;color:#fff;background:#000;font-family:"Microsoft YaHei",sans-serif;font-size:13px;cursor:pointer}
.rsvp button:active{background:#b70000}
.end-mark{position:absolute;left:0;top:7205px;width:375px;text-align:center;color:var(--red);font-size:38px;opacity:.16}
.music-toggle{position:fixed;z-index:20;top:13px;right:max(9px,calc((100vw - 375px)/2 + 9px));width:31px;height:31px;padding:5px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(211,182,148,.33);overflow:hidden;cursor:pointer}
.music-toggle img{width:100%;height:100%;object-fit:contain}
.music-toggle.playing{animation:spin 5s linear infinite}
.music-toggle.muted::after{content:"";position:absolute;left:3px;top:14px;width:25px;height:1px;background:#fff;transform:rotate(45deg)}
@keyframes spin{to{transform:rotate(360deg)}}
#toolbarNew{position:fixed;left:50%;bottom:0;z-index:101;width:375px;padding:18px 0;background:linear-gradient(90deg,rgba(25,25,25,.8),rgba(50,50,50,.72));font-family:"Microsoft YaHei",sans-serif;transform:translateX(-50%) scale(var(--page-scale));transform-origin:center bottom}
#toolbarNew button{margin:0;padding:0;border:0;color:inherit;font:inherit;background:none;cursor:pointer}
#toolbarNew .toolbar{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;height:36px;padding-right:10px;text-align:left}
#toolbarNew .bar-left{position:relative;flex:1;min-width:0;height:36px;margin-left:10px;text-align:left}
#toolbarNew .bar-mess{display:block;width:100%;height:36px;padding:0 30px 0 8px;border-radius:18px;color:#ccc;background:rgba(0,0,0,.28);font-size:12px;line-height:36px;white-space:nowrap}
#toolbarNew .bullet-list{position:absolute;right:7px;top:12px;width:15px;height:12px;border-top:2px solid #f2f2f2;border-bottom:2px solid #f2f2f2}
#toolbarNew .bullet-list::after{content:"";position:absolute;left:0;right:0;top:3px;border-top:2px solid #f2f2f2}
#toolbarNew .bar-center{display:flex;flex:0 0 168px;justify-content:space-between;margin-left:8px}
#toolbarNew .center-gift{display:flex;align-items:center;justify-content:center;width:80px;height:34px;border-radius:17px;background:rgba(0,0,0,.35);white-space:nowrap}
#toolbarNew .center-gift img{width:24px;height:24px;margin-right:2px;object-fit:contain}
#toolbarNew .center-gift span{color:#fff;font-size:11px}
#toolbarNew .bar-right{display:flex;align-items:center;flex:0 0 80px;margin-left:7px;font-size:0}
#toolbarNew .bar-r-com{position:relative;display:block;width:36px;height:36px;margin-left:8px}
#toolbarNew .bar-r-com:first-child{margin-left:0}
#toolbarNew .bar-r-gift{transform-origin:center bottom;animation:giftJump 3s ease infinite}
#toolbarNew .bar-r-gift>img{display:block;width:36px;height:36px}
#toolbarNew .bar-heart{width:36px;height:36px;text-align:center}
#toolbarNew .bar-praise{position:absolute;right:0;top:0;z-index:3;max-width:42px;height:15px;padding:0 4px;border-radius:6px;color:#fff;background:#f38200;font-size:10px;line-height:15px;white-space:nowrap;transform:translateX(40%)}
#toolbarNew .bar-zan{position:relative;z-index:2;display:block;width:33px;height:33px}
#toolbarNew .heart-icon{display:block;width:36px;height:36px}
#toolbarNew .ani-num{position:absolute;left:10px;top:0;z-index:4;color:#f07a87;font-size:15px;opacity:0}
#toolbarNew .bar-zan.active .ani-num{animation:praise 1.2s both}
#toolbarNew .zan-wrap{position:absolute;inset:0;pointer-events:none}
#toolbarNew .zan-wrap i{position:absolute;left:15px;top:15px;width:6px;height:6px;border-radius:50%;opacity:0}
#toolbarNew .zan-wrap i:nth-child(1),#toolbarNew .zan-wrap i:nth-child(5){background:#b3e5c8}
#toolbarNew .zan-wrap i:nth-child(2),#toolbarNew .zan-wrap i:nth-child(6){background:#f4ba31}
#toolbarNew .zan-wrap i:nth-child(3),#toolbarNew .zan-wrap i:nth-child(7){background:#339fef}
#toolbarNew .zan-wrap i:nth-child(4),#toolbarNew .zan-wrap i:nth-child(8){background:#e2264d}
#toolbarNew .bar-zan.active .zan-wrap i{animation:particle .6s ease-out}
#toolbarNew .bar-zan.active .zan-wrap i:nth-child(2){transform:rotate(45deg)}#toolbarNew .bar-zan.active .zan-wrap i:nth-child(3){transform:rotate(90deg)}#toolbarNew .bar-zan.active .zan-wrap i:nth-child(4){transform:rotate(135deg)}#toolbarNew .bar-zan.active .zan-wrap i:nth-child(5){transform:rotate(180deg)}#toolbarNew .bar-zan.active .zan-wrap i:nth-child(6){transform:rotate(225deg)}#toolbarNew .bar-zan.active .zan-wrap i:nth-child(7){transform:rotate(270deg)}#toolbarNew .bar-zan.active .zan-wrap i:nth-child(8){transform:rotate(315deg)}
@keyframes giftJump{0%,24%,48%,to{transform:translateY(0)}12%,36%{transform:translateY(-10px)}}
@keyframes praise{0%{opacity:1}50%{opacity:1;transform:translateY(-35px)}to{opacity:0;transform:translateY(-35px)}}
@keyframes particle{0%{opacity:1}to{opacity:0;margin-left:18px}}
.toast{position:fixed;z-index:30;left:50%;bottom:78px;transform:translate(-50%,12px);padding:9px 16px;border-radius:3px;color:#fff;background:rgba(0,0,0,.78);font-family:"Microsoft YaHei",sans-serif;font-size:12px;opacity:0;pointer-events:none;transition:.22s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
@media (min-width:700px){body{padding:28px 0}.page-shell{height:calc(7350px * var(--page-scale) + 56px)}.invitation{box-shadow:0 12px 50px rgba(0,0,0,.13)}.music-toggle{top:40px}}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.music-toggle.playing,#toolbarNew .bar-r-gift{animation:none}}