:root {
  --page-height: 100dvh;
  --copper: #a77966;
  --ink: #505050;
  --red: #9f0810;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { color: var(--ink); background: #d1d0cf; font-family: "PingFang SC", "Microsoft YaHei", sans-serif; -webkit-tap-highlight-color: transparent; }
button, input, select { font: inherit; }
button, select { cursor: pointer; }
.hidden { display: none !important; }

.site-shell { position: fixed; inset: 0; overflow: hidden; touch-action: none; }
.page-deck { width: 100%; height: calc(var(--page-height) * 8); transform: translate3d(0,0,0); transition: transform .58s cubic-bezier(.22,.78,.23,1); will-change: transform; }
.invite-page { position: relative; width: 100%; height: var(--page-height); overflow: hidden; background: #e6e6e6; }
.artboard { position: absolute; top: 50%; left: 50%; width: min(100vw, calc(var(--page-height) * .56222)); aspect-ratio: 750 / 1334; overflow: hidden; container-type: inline-size; transform: translate(-50%,-50%); background: #e8e8e8; box-shadow: 0 0 45px rgba(0,0,0,.13); }

/* 首页：背景、固定书法和品牌字使用设计稿素材，其余内容保持为真实 DOM。 */
.cover-page, .cover-artboard { background: #790f14; }
.cover-artboard { overflow: visible; isolation: isolate; background: transparent; box-shadow: none; }
.cover-page::before { content: ""; position: absolute; z-index: 0; inset: 0; background: #790f14 url("/assets/cover/background.jpg") center / cover no-repeat; }
.cover-background { display: none; }
.cover-element { position: absolute; z-index: 2; margin: 0; opacity: 0; }
.cover-logos { left: 12.93%; top: 17.09%; width: 18.67%; user-select: none; -webkit-user-drag: none; }
.cover-title-art { left: 20.93%; top: 25.64%; width: 58.13%; user-select: none; -webkit-user-drag: none; }
.cover-subtitle-text { left: 10%; right: 10%; top: 50.4%; color: #dfb592; font-size: 4.2cqw; letter-spacing: .08em; text-align: center; }
.cover-ribbon { z-index: 1; left: -.13%; top: 56.67%; width: 100.27%; filter: drop-shadow(0 1.2cqw .65cqw rgba(49,0,3,.35)); transform-origin: left center; user-select: none; -webkit-user-drag: none; }
.cover-brand-art { left: 32%; top: 78.41%; width: 35.47%; user-select: none; -webkit-user-drag: none; }
.cover-page.active::before { animation: cover-background-in 1.1s ease both; }
.cover-page.active .cover-logos { animation: item-down .62s cubic-bezier(.18,.78,.22,1) .18s both; }
.cover-page.active .cover-title-art { animation: cover-title-in .92s cubic-bezier(.16,.82,.2,1) .45s both; }
.cover-page.active .cover-subtitle-text { animation: item-up .68s ease 1.02s both; }
.cover-page.active .cover-ribbon { animation: cover-ribbon-in 1.05s cubic-bezier(.2,.72,.18,1) 1.22s both; }
.cover-page.active .cover-brand-art { animation: item-up .7s ease 1.76s both; }

/* 通用内页底纹和真实文字容器 */
.paper-artboard { background: #e6e6e6; }
.paper-shell { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: fill; user-select: none; -webkit-user-drag: none; }
.page-copy { position: absolute; z-index: 2; left: 18.8%; right: 18.8%; top: 20%; bottom: 25%; color: #535353; }
.page-copy p { margin: 0; }
.page-brand-art { position: absolute; z-index: 2; left: 35.6%; top: 79.99%; width: 28.8%; opacity: 0; transform: translateY(1cqw); user-select: none; -webkit-user-drag: none; }
.invite-page.active .page-brand-art { animation: text-rise .55s ease .65s both; }
.motion-item { opacity: 0; transform: translateY(1.8cqw); }
.invite-page.active .motion-item { animation: text-rise .55s cubic-bezier(.2,.72,.2,1) both; animation-delay: calc(.13s + var(--i,0) * .075s); }
.section-title { position: relative; margin: 0 0 3.4cqw; color: var(--copper); font-size: 4.5cqw; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-align: center; }
.section-title::after { content: ""; position: absolute; z-index: -1; left: 8%; right: 8%; bottom: -.2cqw; height: 1cqw; background: linear-gradient(90deg,transparent,#b49b78 14%,#e6ded1 50%,#b49b78 86%,transparent); opacity: .72; }
.page-copy strong { color: #3c3c3c; font-weight: 700; }

.letter-copy { top: 20.1%; }
.letter-heading { margin-bottom: 5.5cqw; color: var(--copper); text-align: center; }
.letter-heading h2 { margin: 0; font-size: 3.8cqw; font-weight: 500; }
.letter-heading p { margin-top: 1cqw; font-family: Arial,sans-serif; font-size: 2.6cqw; font-style: italic; letter-spacing: .05em; }
.letter-copy > p { margin: 0 0 3.3cqw; font-size: 2.75cqw; line-height: 1.9; text-indent: 2em; text-align: justify; }
.signature { margin-top: 3cqw; color: #bb9279; font-family: Georgia,serif; font-size: 8cqw; text-align: center; transform: rotate(-12deg); }

.schedule-copy { top: 18.4%; left: 19%; right: 19%; }
.info-section { margin-bottom: 2.65cqw; }
.info-section .section-title { margin-bottom: 2.35cqw; }
.info-section p { font-size: 2.35cqw; line-height: 1.68; text-align: justify; }
.info-section.centered { margin-top: 1cqw; text-align: center; }
.info-section.centered p { text-align: center; }
.info-section .key-line { color: #333; font-size: 3.05cqw; font-weight: 700; line-height: 1.52; }

.dense-copy { top: 19.4%; left: 18.7%; right: 18.7%; }
.dense-copy .section-title { margin-bottom: 4.3cqw; font-size: 4cqw; }
.materials-list { margin: 0; padding-left: 4.1cqw; font-size: 2.1cqw; line-height: 1.58; }
.materials-list li { margin-bottom: .65cqw; padding-left: .5cqw; }
.special-note { margin-top: 1.2cqw; font-size: 2.06cqw; line-height: 1.6; text-indent: 2em; }
.special-note > strong { display: block; text-indent: 0; }

.process-copy { top: 18.7%; left: 18.5%; right: 18.5%; }
.process-copy .section-title { margin-bottom: 3.2cqw; }
.process-list { display: grid; gap: 2.55cqw; }
.process-step { position: relative; text-align: center; }
.process-step:not(:last-child)::after { content: "⌄"; position: absolute; left: 50%; bottom: -2.55cqw; color: #c4a185; font-size: 2.2cqw; transform: translateX(-50%); }
.process-step h3 { width: 67%; margin: 0 auto .8cqw; padding: .55cqw 1cqw; border: 1px solid rgba(255,255,255,.9); border-radius: 999px; color: #454545; background: linear-gradient(180deg,rgba(255,255,255,.3),rgba(206,206,206,.12)); box-shadow: 0 .5cqw 1cqw rgba(90,90,90,.12); font-size: 2.7cqw; font-weight: 500; line-height: 1; }
.process-step p { color: #3f3f3f; font-size: 1.93cqw; font-weight: 600; line-height: 1.32; }

.tips-copy { top: 18.8%; left: 18.8%; right: 18.8%; }
.tips-copy > .section-title { margin-bottom: 3cqw; }
.tips-list { margin: 0; padding-left: 4cqw; font-size: 1.88cqw; line-height: 1.48; text-align: justify; }
.tips-list li { margin-bottom: .8cqw; padding-left: .35cqw; }
.table-title { margin-top: 3.4cqw !important; margin-bottom: 3cqw !important; }
.slot-table { width: 100%; border-collapse: collapse; color: #242424; font-size: 2.45cqw; text-align: center; }
.slot-table th,.slot-table td { border: 1px solid rgba(158,158,158,.35); }
.slot-table th { padding: 1.2cqw .5cqw; color: #fff; background: #b38369; font-size: 2.65cqw; }
.slot-table td { padding: 1.25cqw .5cqw; line-height: 1.55; }
.slot-table th:nth-child(1),.slot-table td:nth-child(1) { width: 30%; }
.slot-table th:nth-child(2),.slot-table td:nth-child(2) { width: 30%; }
.mini-note { margin-top: 1.6cqw !important; font-size: 1.75cqw; line-height: 1.55; }

/* 表单：标签、占位符、按钮全部为真实 HTML 文字。 */
.form-copy { top: 19.1%; left: 18.7%; right: 18.7%; }
.form-copy .section-title { margin-bottom: 4.1cqw; }
.design-form { position: static; }
.form-row { margin-bottom: 1.85cqw; }
.form-row label { display: block; margin: 0 0 .9cqw 1cqw; color: #4a4a4a; font-size: 2.75cqw; }
.field { display: block; width: 100%; height: 5.25cqw; padding: 0 1.4cqw; border: 1px solid rgba(181,151,83,.68); border-radius: 0; outline: none; color: #3d3d3d; background: #fff; box-shadow: none; font-size: 2.65cqw; appearance: none; -webkit-appearance: none; touch-action: manipulation; }
select.field { padding-right: 6cqw; background-image: linear-gradient(45deg,transparent 50%,#8f6b5c 50%),linear-gradient(135deg,#8f6b5c 50%,transparent 50%); background-position: calc(100% - 2.8cqw) 50%,calc(100% - 2.1cqw) 50%; background-size: .8cqw .8cqw,.8cqw .8cqw; background-repeat: no-repeat; }
.field:focus { border-color: var(--red); box-shadow: 0 0 0 .35cqw rgba(157,7,16,.11); }
.booking-button { display: block; width: 38%; height: 6cqw; margin: 3.4cqw auto 0; border: 0; color: #fff; background: var(--red); box-shadow: 0 1cqw 2.2cqw rgba(110,0,7,.18); font-size: 3.1cqw; font-weight: 700; letter-spacing: .08em; }
.booking-button:active { background: #78050b; }
.booking-button:disabled { opacity: .55 !important; cursor: wait; }
.form-tips { margin-top: 3.4cqw; font-size: 1.65cqw; line-height: 1.65; }
.test-data-button { position: absolute; z-index: 4; right: 0; bottom: -1.8cqw; padding: .8cqw 1.4cqw; border: 1px solid rgba(159,8,16,.24); border-radius: 999px; color: #8d6d61; background: rgba(255,255,255,.82); font-size: 1.55cqw; }
.service-state { position: absolute; z-index: 3; left: 18%; right: 18%; bottom: 12.8%; margin: 0; color: rgba(80,80,80,.55); font-size: 1.5cqw; text-align: center; }

.result-copy { top: 19.1%; left: 18.7%; right: 18.7%; }
.result-copy .section-title { margin-bottom: 4.2cqw; }
.result-values { display: grid; gap: 1.3cqw; margin: 0; }
.result-values > div { display: grid; grid-template-columns: 27% 1fr; align-items: center; min-height: 5cqw; }
.result-values dt { color: #4a4a4a; font-size: 2.6cqw; white-space: nowrap; }
.result-values dd { display: flex; align-items: center; min-width: 0; height: 5cqw; margin: 0; padding: 0 1.5cqw; border: 1px solid rgba(181,151,83,.58); color: #3f3f3f; background: #fff; font-size: 2.6cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.route-title { margin-top: 7.5cqw !important; margin-bottom: 4.5cqw !important; }
.route-map { display: block; width: 100%; max-height: 29cqw; border: 1px solid #a67d66; object-fit: cover; }
.result-note { display: none; }

.page-dots { position: fixed; z-index: 12; top: 50%; right: max(9px,env(safe-area-inset-right)); display: grid; gap: 7px; transform: translateY(-50%); }
.page-dots button { width: 5px; height: 5px; padding: 0; border: 0; border-radius: 50%; background: rgba(124,84,70,.3); transition: height .25s,background .25s; }
.page-dots button.active { height: 17px; border-radius: 4px; background: #a37564; }
.swipe-hint { position: fixed; z-index: 11; left: 50%; bottom: max(11px,calc(var(--safe-bottom) + 7px)); display: grid; justify-items: center; gap: 2px; color: rgba(149,105,86,.8); transform: translateX(-50%); pointer-events: none; transition: opacity .25s; }
.swipe-hint i { width: 12px; height: 12px; border-top: 2px solid currentColor; border-left: 2px solid currentColor; transform: rotate(45deg); animation: swipe-up 1.45s ease-in-out infinite; }
.swipe-hint span { font-size: 8px; letter-spacing: .15em; }
body.on-last .swipe-hint { opacity: 0; }
.music-button { position: fixed; z-index: 13; top: max(12px,calc(var(--safe-top) + 8px)); right: max(12px,env(safe-area-inset-right)); display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid rgba(255,255,255,.5); border-radius: 50%; color: #fff; background: rgba(113,75,66,.28); backdrop-filter: blur(5px); font-size: 18px; animation: music-spin 4s linear infinite; }
body:not(.on-cover) .music-button { color: #a17766; border-color: rgba(161,119,102,.4); background: rgba(255,255,255,.55); }

.toast { position: fixed; z-index: 40; left: 50%; bottom: max(58px,calc(var(--safe-bottom) + 48px)); max-width: min(350px,calc(100% - 36px)); padding: 11px 17px; border-radius: 5px; color: #fff; background: rgba(83,65,60,.94); opacity: 0; transform: translate(-50%,10px); pointer-events: none; transition: .22s; font-size: 12px; text-align: center; }
.toast.show { opacity: 1; transform: translate(-50%,0); }
.toast.error { background: rgba(153,8,16,.96); }
.modal { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 24px; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(44,30,28,.5); backdrop-filter: blur(3px); }
.modal-card { position: relative; width: min(330px,100%); padding: 27px 23px 22px; color: #4c403d; background: #f3f1ef; box-shadow: 0 20px 60px rgba(0,0,0,.28); text-align: center; }
.modal-icon { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 13px; border: 1px solid #ad7b68; border-radius: 50%; color: var(--red); font-size: 22px; font-weight: 700; }
.modal-card h2 { margin: 0; color: #8c5f50; font-size: 19px; }
.modal-card p { margin: 9px 0 19px; font-size: 12px; }
.modal-button { width: 100%; height: 42px; border: 0; color: #fff; background: var(--red); }

@keyframes text-rise { from { opacity: 0; transform: translateY(1.8cqw); filter: blur(.35cqw); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes swipe-up { 0%,100% { opacity: .28; transform: translateY(5px) rotate(45deg); } 50% { opacity: 1; transform: translateY(0) rotate(45deg); } }
@keyframes music-spin { to { transform: rotate(360deg); } }
@keyframes cover-background-in { from { opacity: .72; transform: scale(1.045); } to { opacity: 1; transform: scale(1); } }
@keyframes item-down { from { opacity: 0; transform: translateY(-1.8cqw); } to { opacity: 1; transform: translateY(0); } }
@keyframes item-up { from { opacity: 0; transform: translateY(2cqw); } to { opacity: 1; transform: translateY(0); } }
@keyframes cover-title-in { 0% { opacity: 0; transform: scale(.8); filter: blur(.8cqw) drop-shadow(0 0 0 rgba(45,0,3,0)); } 72% { opacity: 1; transform: scale(1.025); } 100% { opacity: 1; transform: scale(1); filter: blur(0) drop-shadow(1.1cqw 1.4cqw .5cqw rgba(45,0,3,.45)); } }
@keyframes cover-ribbon-in { from { opacity: 0; transform: translateX(-13%) scaleX(.72); } to { opacity: 1; transform: translateX(0) scaleX(1); } }

@media (min-width: 760px) {
  .page-dots { right: calc((100% - min(100vw,calc(var(--page-height) * .56222))) / 2 + 16px); }
  .music-button { right: calc((100% - min(100vw,calc(var(--page-height) * .56222))) / 2 + 16px); }
}
@media (max-height: 620px) and (orientation: landscape) { .swipe-hint span { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .page-deck { transition-duration: .01ms !important; }
  .motion-item,.cover-page::before,.cover-element,.swipe-hint i,.music-button { animation-duration: .01ms !important; animation-delay: 0s !important; }
}