:root { color-scheme:light; --ink:#101010; --paper:#f5f8ff; font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:#e8eefb; }
body { color:var(--ink); font-family:inherit; -webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; text-size-adjust:100%; }
.invite { width:min(100%,780px); margin:0 auto; overflow:hidden; background:var(--paper); box-shadow:0 0 40px rgba(42,74,125,.12); }
.board { position:relative; width:100%; aspect-ratio:780/6574; overflow:hidden; }
.board-art { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }
.hero-base-clean { position:absolute; z-index:1; inset:0 auto auto 0; display:block; width:100%; height:auto; pointer-events:none; }
.location-cut { position:absolute; z-index:1; left:0; top:17.45%; display:block; width:100%; height:auto; pointer-events:none; }
.copy-rsvp-cut { position:absolute; z-index:1; left:0; top:39.63%; display:block; width:100%; height:auto; pointer-events:none; }
.hero-name-motion { position:absolute; z-index:2; display:block; height:auto; pointer-events:none; transform-origin:center; will-change:transform; }
.hero-name-left { left:15.25%; top:7.82%; width:22.34%; animation:hero-left-rotate 2s linear infinite; }
.hero-name-right { left:60.38%; top:8.03%; width:23.08%; animation:hero-right-rotate 2s linear infinite; }
.map-hit { position:absolute; z-index:2; left:10.77%; top:20.4%; width:79.49%; height:3.67%; padding:0; border:0; border-radius:3vw; background:transparent; cursor:pointer; }
.map-hit:active { background:rgba(255,228,93,.16); }
.rsvp { position:absolute; z-index:3; left:10.26%; top:50.61%; width:79.49%; height:0; pointer-events:none; container-type:inline-size; }
.rsvp label { position:absolute; left:0; display:block; width:100%; height:auto; aspect-ratio:620/87; pointer-events:auto; background:transparent; }
.rsvp label:first-of-type { top:0; }
.rsvp label:nth-of-type(2) { top:21.45cqw; }
.rsvp label span { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.rsvp label.has-value::before { content:""; position:absolute; z-index:1; left:32%; top:24%; width:36%; height:52%; background:#e7edff; }
.rsvp input,.submit-button { appearance:none; -webkit-appearance:none; width:100%; height:100%; border:0; border-radius:0; outline:none; background:transparent; color:#111; text-align:center; font:400 clamp(1rem,4.1vw,2rem)/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.rsvp input { position:relative; z-index:2; padding:0 16%; caret-color:#111; }
.rsvp input::placeholder { color:transparent; }
.rsvp input[type="number"]::-webkit-outer-spin-button,.rsvp input[type="number"]::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.rsvp input[type="number"] { -moz-appearance:textfield; }
.submit-button { position:absolute; top:43.06cqw; left:0; width:100%; height:auto; aspect-ratio:620/87; pointer-events:auto; cursor:pointer; color:transparent; }
.submit-button:not([disabled]):active { transform:scale(.99); }
.submit-button[disabled] { cursor:default; opacity:1; }
.rsvp.is-uploading .submit-button,.rsvp.is-submitted .submit-button { color:transparent; background:transparent; }
.rsvp.is-uploading .submit-button::before,.rsvp.is-submitted .submit-button::before { content:""; position:absolute; z-index:0; left:-.78%; right:-.62%; top:-5.65%; bottom:-9.8%; background:center/100% 100% no-repeat; pointer-events:none; }
.rsvp.is-uploading .submit-button::before { background-image:url("/assets/rsvp-submitting-frame47.svg"); }
.rsvp.is-submitted .submit-button::before { background-image:url("/assets/rsvp-success-frame47.svg"); }
.rsvp.is-uploading .submit-button::after,.rsvp.is-submitted .submit-button::after { position:absolute; z-index:1; inset:0; display:grid; place-items:center; color:#111; font:400 6.54cqw/1 "Arita Heiti",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; white-space:nowrap; pointer-events:none; }
.rsvp.is-uploading .submit-button::after { content:"提交中..."; }
.rsvp.is-submitted .submit-button::after { content:"提交成功，婚礼见"; }
.refill-button { appearance:none; -webkit-appearance:none; position:absolute; top:61.5cqw; left:0; width:100%; border:0; padding:0; pointer-events:auto; background:transparent; color:#668ddb; text-align:center; text-decoration:underline; text-underline-offset:2px; font:400 min(1.625rem,3.34vw)/1.3 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; cursor:pointer; }
.refill-button[hidden] { display:none; }
.gallery-base { position:absolute; z-index:2; top:57.67%; left:0; width:100%; aspect-ratio:780/1226; background:#f5f8ff; pointer-events:none; }
.gallery { position:absolute; z-index:3; left:0; width:100%; aspect-ratio:780/1226; overflow:hidden; background:transparent; container-type:inline-size; }
.gallery-frame47 { top:57.67%; }
.gallery-row { position:absolute; left:0; width:100%; overflow-x:auto; overflow-y:hidden; background:transparent; scrollbar-width:none; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; touch-action:pan-x pan-y; cursor:grab; }
.gallery-row::-webkit-scrollbar { display:none; }
.gallery-row.is-dragging { cursor:grabbing; }
.gallery-row-top { top:7.0962%; height:42.8222%; }
.gallery-row-bottom { top:57.0147%; height:42.8222%; transform:translateY(2px); }
.gallery-track { display:flex; width:max-content; height:100%; }
.gallery-track img { display:block; flex:none; width:auto; max-width:none; height:100%; }
.food-motion { position:absolute; z-index:3; display:block; pointer-events:none; background-position:0 0; background-repeat:no-repeat; background-size:2400% 100%; animation:food-sprite .8s steps(23,end) infinite; }
.food-section-base { position:absolute; z-index:2; top:76.057195%; left:0; display:block; width:100%; height:auto; pointer-events:none; }
.food-motion-eat-left,.food-motion-eat-right { -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 2.5%,#000 97.5%,transparent 100%); }
.food-motion-eat-left { left:14.403%; top:79.59%; width:37.037%; height:5.371%; background-image:url("/assets/food-sprite-eat-left.png"); }
.food-motion-eat-right { left:50.412%; top:79.59%; width:37.037%; height:5.371%; background-image:url("/assets/food-sprite-eat-right.png"); }
.food-motion-stroll-left { left:0; top:90.5%; width:53%; height:7.5%; background-image:url("/assets/food-sprite-stroll-left.png"); }
.food-motion-stroll-right { left:47%; top:90.5%; width:53%; height:7.5%; background-image:url("/assets/food-sprite-stroll-right.png"); }
.food-link { position:absolute; z-index:4; display:block; border-radius:12px; }
.food-link-dianping { left:11.666667%; top:80.818375%; width:77.564103%; height:7.940523%; }
.food-link-xiaohongshu { left:5.769231%; top:90.933982%; width:88.617949%; height:5.763158%; }
.toast { position:fixed; z-index:20; left:50%; bottom:max(24px,env(safe-area-inset-bottom)); max-width:calc(100% - 40px); padding:11px 18px; border-radius:999px; transform:translate(-50%,16px); background:rgba(17,17,17,.9); color:#fff; font-size:14px; opacity:0; pointer-events:none; transition:.25s; white-space:nowrap; }
.toast.show { transform:translate(-50%,0); opacity:1; }
.map-modal[hidden] { display:none; }
.map-modal { position:fixed; z-index:30; inset:0; display:flex; align-items:flex-end; justify-content:center; }
.map-backdrop { position:absolute; inset:0; width:100%; height:100%; border:0; background:rgba(19,28,46,.45); backdrop-filter:blur(2px); }
.map-sheet { position:relative; width:min(100%,520px); padding:10px 18px max(18px,env(safe-area-inset-bottom)); border-radius:24px 24px 0 0; background:var(--paper); box-shadow:0 -12px 40px rgba(26,43,74,.2); font-family:inherit; animation:sheet-up .24s ease-out; }
.map-handle { width:42px; height:5px; margin:0 auto 12px; border-radius:9px; background:#c7d1e5; }
.map-sheet h2 { margin:0; text-align:center; font-size:28px; line-height:1.25; }
.map-sheet > p { margin:9px 0 20px; color:#5d6574; text-align:center; font-size:20px; line-height:1.35; }
.map-options { overflow:hidden; border:2px solid #171717; border-radius:16px; background:#fff; }
.map-options button { display:grid; grid-template-columns:54px 1fr auto; align-items:center; gap:15px; width:100%; min-height:82px; padding:12px 18px; border:0; border-bottom:1px solid #e7eaf0; background:#fff; color:#111; text-align:left; font-family:inherit; font-size:20px; font-weight:500; line-height:1.2; }
.map-options button:last-child { border-bottom:0; }
.map-options button:active { background:#f0f4ff; }
.map-options i { color:#111; font-family:inherit; font-size:20px; font-style:normal; font-weight:500; line-height:1.2; }
.map-logo { display:block; width:54px; height:54px; border-radius:12px; object-fit:contain; }
.map-cancel { width:100%; height:58px; margin-top:16px; border:0; border-radius:16px; background:#e6eeff; color:#111; font-family:inherit; font-size:20px; font-weight:500; line-height:1.2; }
body.modal-open { overflow:hidden; }
@keyframes sheet-up { from { transform:translateY(24px); opacity:.4; } }
@keyframes food-sprite { to { background-position-x:100%; } }
@keyframes hero-left-rotate {
  0% { transform:rotate(-0.244rad); animation-timing-function:cubic-bezier(.5,0,.5,1); }
  50% { transform:rotate(.134rad); animation-timing-function:cubic-bezier(.5,0,.5,1); }
  100% { transform:rotate(-0.244rad); }
}
@keyframes hero-right-rotate {
  0% { transform:rotate(.227rad); animation-timing-function:cubic-bezier(.5,0,.5,1); }
  50% { transform:rotate(-.227rad); animation-timing-function:cubic-bezier(.5,0,.5,1); }
  100% { transform:rotate(.227rad); }
}
@media (prefers-reduced-motion:reduce) {
  .hero-name-motion { animation:none; }
  .food-motion { display:none; }
  .gallery-row { scroll-behavior:auto; }
}
@media (min-width:781px) { .rsvp input,.submit-button { border-radius:12px; } }