:root { --navy: #031f50; --blue: #0758ba; --cyan: #29d8ff; --white: #f6fbff; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: #02183d; color: var(--white); }
body { font-family: "PingFang SC", "Microsoft YaHei", "Noto Sans SC", sans-serif; overflow: hidden; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.invitation-shell { position: relative; height: 100dvh; overflow: hidden; isolation: isolate; background: #02183d url("../images/invitation-bg.png") center center / cover no-repeat; }
.invitation-shell::before { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(1, 18, 55, .08), rgba(1, 14, 42, .18)); pointer-events: none; }
.invitation-shell::after { display: none; }
.ambient { display: none; }
.ambient-a { width: 34rem; height: 34rem; left: -27rem; top: 22%; box-shadow: 7rem 0 9rem #0ae1ff; }
.ambient-b { width: 40rem; height: 40rem; right: -35rem; bottom: -8rem; box-shadow: -7rem 0 10rem #066eff; }
.star-field { display: none; }

.topbar { position: fixed; z-index: 20; top: 0; left: 0; right: 0; height: 74px; padding: 18px 28px; display: flex; align-items: center; justify-content: flex-end; pointer-events: none; }
.share-button { pointer-events: auto; }
.page-logo { position: absolute; z-index: 12; top: 18px; left: 28px; width: 132px; pointer-events: none; }
.page-logo img { display: block; width: 100%; height: auto; filter: drop-shadow(0 0 12px rgba(51, 209, 255, .16)); }
.share-button { color: #fff; background: rgba(3, 25, 67, .38); border: 1px solid rgba(255,255,255,.5); border-radius: 99px; padding: 7px 13px; font-size: 12px; backdrop-filter: blur(10px); cursor: pointer; }
.page-rail { position: fixed; z-index: 20; right: 18px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; font: 10px/1 Georgia, serif; letter-spacing: .08em; }
.page-rail i { width: 1px; height: 58px; background: linear-gradient(#fff, rgba(255,255,255,.16)); }
.side-copy { position: fixed; z-index: 10; left: 17px; top: calc(50% + 100px); transform: translate(-50%, -50%) rotate(-90deg); transform-origin: center; font: 16px/1 Georgia, serif; color: rgba(129, 228, 255, .62); letter-spacing: .26em; white-space: nowrap; }

.pages { height: 100%; overflow-y: auto; overflow-x: hidden; scroll-snap-type: y mandatory; scrollbar-width: none; }
.pages::-webkit-scrollbar { display: none; }
.invite-page { position: relative; min-height: 100dvh; padding: 92px 46px 54px; display: flex; align-items: center; justify-content: center; scroll-snap-align: start; scroll-snap-stop: always; }
.invite-page::before { content: attr(data-page) "/ 08"; position: absolute; right: 26px; bottom: 20px; font: 10px Georgia, serif; color: rgba(255,255,255,.64); }
.cover { display: block; padding: 0; text-align: center; overflow: hidden; }
.cover::before { content: "1 / 8"; }
.cover::after { display: none; }
.cover-heading { position: absolute; z-index: 2; top: 29%; left: 17%; right: 9%; height: 112px; }
.invite-script { position: absolute; left: 0; top: 0; font: italic clamp(43px, 12.5vw, 70px)/1 Georgia, "Times New Roman", serif; letter-spacing: -.035em; white-space: nowrap; text-shadow: 0 0 22px rgba(102, 226, 255, .28); }
.invite-cn { position: absolute; right: 1%; top: 55px; font-family: "STKaiti", "KaiTi", "Microsoft YaHei", serif; font-size: clamp(38px, 11vw, 60px); font-weight: 300; letter-spacing: .08em; white-space: nowrap; }
.cover-meeting { position: absolute; z-index: 2; top: 42.8%; left: 15%; right: 9%; text-align: right; }
.cover h1 { margin: 0 0 7px; font-size: clamp(16px, 4.6vw, 25px); line-height: 1.35; font-weight: 400; letter-spacing: .04em; white-space: nowrap; }
.cover-subtitle { margin: 0; color: rgba(255,255,255,.82); font-size: clamp(11px, 3.1vw, 16px); letter-spacing: .04em; white-space: nowrap; }
.cover-rule { position: absolute; z-index: 2; right: 12.4%; top: 51.3%; width: 1px; height: 22.5%; margin: 0; background: rgba(255,255,255,.74); }
.cover-rule i, .cover-rule::before { content: ""; position: absolute; left: -4px; width: 8px; height: 8px; border: solid #fff; border-width: 2px 2px 0 0; transform: rotate(-45deg); }
.cover-rule i { top: -7px; }
.cover-rule::before { top: -14px; }
.cover-vertical-note { position: absolute; z-index: 2; left: 10.5%; top: 65.5%; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: 16px; line-height: 1.5; letter-spacing: .16em; }
.cover-vertical-note span { width: 1em; writing-mode: vertical-rl; }
.cover-details { position: absolute; z-index: 2; right: 10.5%; bottom: 9.5%; width: 76%; text-align: right; }
.cover-details em { display: block; margin-bottom: 1px; font: italic 14px/1 Georgia, serif; letter-spacing: .05em; }
.cover-details p { margin: 0; }
.detail-time { margin-bottom: 17px; }
.detail-time p { display: flex; justify-content: flex-end; align-items: baseline; gap: 13px; }
.detail-time b { font: 17px/1.3 Georgia, serif; letter-spacing: .02em; }
.detail-time span { font-size: 15px; letter-spacing: .03em; }
.detail-address p { font-size: 12px; line-height: 1.75; letter-spacing: .02em; }
.scroll-cue { position: absolute; z-index: 5; left: 50%; bottom: 2.2%; width: 48px; height: 48px; padding: 0; transform: translateX(-50%); border: 0; background: transparent; display: grid; place-items: center; opacity: .9; cursor: pointer; }
.scroll-cue img { display: block; width: 44px; height: 44px; object-fit: contain; animation: bob 1.8s ease-in-out infinite; filter: drop-shadow(0 0 10px rgba(92,226,255,.42)); }

.glass-card { position: relative; width: min(100%, 470px); max-height: calc(100dvh - 140px); overflow: auto; padding: 32px 28px 27px; background: linear-gradient(145deg, rgba(21, 106, 204, .72), rgba(8, 62, 137, .64)); border: 1px solid rgba(112, 226, 255, .22); box-shadow: 0 24px 80px rgba(0, 10, 38, .34), inset 0 1px 0 rgba(255,255,255,.1); backdrop-filter: blur(16px); scrollbar-width: none; }
.letter-card { height: min(500px, calc(100dvh - 140px)); display: flex; flex-direction: column; }
.glass-card::-webkit-scrollbar { display: none; }
.glass-card::after { content: ""; position: absolute; inset: 12px; border: solid rgba(255,255,255,.14); border-width: 0 1px 1px 0; pointer-events: none; }
.section-title { display: flex; align-items: center; gap: 13px; margin-bottom: 26px; }
.section-title h2 { margin: 0; width: 58px; font-size: 21px; line-height: 1.05; font-weight: 300; letter-spacing: .08em; }
.section-title span { width: 1px; height: 42px; background: rgba(255,255,255,.55); }
.section-title p { margin: 0; font: 17px Georgia, serif; letter-spacing: .06em; }
.glass-card > p { font-size: 14px; line-height: 2; color: rgba(255,255,255,.84); text-align: justify; }
.letter-card .seal { margin: 2px auto 26px; width: 74px; height: 74px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; font: italic 24px Georgia, serif; box-shadow: inset 0 0 22px rgba(84, 231, 255, .2); }
.letter-card .salutation { margin-bottom: 0; }
.signature { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.34); display: flex; justify-content: flex-end; gap: 12px; align-items: baseline; font-size: 12px; }
.signature b { font-size: 16px; letter-spacing: .15em; }
.truck-wrap { overflow: hidden; border: 1px solid rgba(255,255,255,.55); box-shadow: 0 12px 35px rgba(0,13,46,.3); transform: translateY(-15px); }
.truck-wrap img { display: block; width: 100%; aspect-ratio: 2.26; object-fit: cover; }
.intro-card blockquote { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.45); text-align: center; font-size: 20px; line-height: 1.7; letter-spacing: .1em; }
.intro-card blockquote strong { font-weight: 300; color: #9dedff; }
.agenda-group { margin: 0 0 9px !important; color: #fff !important; font-size: 14px !important; line-height: 1.5 !important; text-align: left !important; }
.agenda-card ol { margin: 0; padding: 0; list-style: none; }
.agenda-card li { padding: 5px 0 5px 30px; font-size: 13px; line-height: 1.35; }
.agenda-card li::before { content: counter(list-item) "."; display: inline-block; width: 22px; margin-left: -22px; }
.agenda-tail { margin-top: 9px !important; }
.agenda-footer { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.55); display: flex; justify-content: flex-start; font-size: 12px; }
.agenda-footer b { font-weight: 400; letter-spacing: .06em; }

.map-card { height: 176px; position: relative; overflow: hidden; margin-bottom: 18px; background: linear-gradient(145deg,#e7f5ff,#c4e6f8); color: #144877; border: 5px solid rgba(255,255,255,.88); }
.amap-live { isolation: isolate; }
.amap-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.map-status { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; background: linear-gradient(145deg, rgba(231,245,255,.94), rgba(196,230,248,.94)); color: #175080; text-align: center; font-size: 12px; }
.map-status small { font-size: 10px; opacity: .72; }
.venue-map-label { padding: 4px 7px; border-radius: 3px; background: #0875d8; color: #fff; font: 11px/1.2 "Microsoft YaHei", sans-serif; box-shadow: 0 3px 10px rgba(0,54,112,.28); white-space: nowrap; }
.road { position: absolute; height: 5px; width: 130%; background: #fff; box-shadow: 0 0 0 1px #a6c6d9; transform-origin: left; }
.road::after { content: ""; position: absolute; inset: 2px 0; border-top: 1px dashed #85a9be; }
.road-a { left: -10%; top: 20%; transform: rotate(12deg); }
.road-b { left: -8%; top: 73%; transform: rotate(-16deg); }
.road-c { left: 50%; top: -5%; transform: rotate(84deg); }
.map-water { position: absolute; right: -8%; top: 12%; width: 44%; height: 78%; padding: 52px 0 0 15px; border-radius: 45%; background: #9ee8f1; color: rgba(6,93,135,.65); font-size: 11px; }
.map-city { position: absolute; font-size: 10px; opacity: .65; }
.city-a { left: 7%; top: 31%; }.city-b { right: 32%; bottom: 13%; }
.pin { position: absolute; z-index: 2; left: 51%; top: 43%; width: 47px; height: 47px; display: grid; place-items: center; border-radius: 50% 50% 50% 7px; transform: translate(-50%,-50%) rotate(-45deg); background: #0574dc; color: white; font: bold 11px Georgia, serif; box-shadow: 0 4px 12px rgba(3,75,140,.35); }
.pin i { position: absolute; inset: 7px; border: 1px solid rgba(255,255,255,.55); border-radius: 50%; }.pin { text-indent: 2px; }.pin::first-line { transform: rotate(45deg); }
.venue-meta { display: grid; grid-template-columns: 64px 1fr; gap: 13px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,.16); }
.venue-meta span { color: #83eaff; font-size: 11px; }.venue-meta b { font-size: 12px; line-height: 1.7; font-weight: 400; }
.primary-action { width: 100%; min-height: 44px; margin-top: 20px; border: 1px solid rgba(255,255,255,.25); border-radius: 4px; background: linear-gradient(90deg,#0795df,#2bd1f6); color: #fff; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: 13px; letter-spacing: .12em; cursor: pointer; box-shadow: 0 8px 22px rgba(0,116,205,.28); }

.form-card form { display: grid; gap: 10px; }
.form-card form > label { display: grid; grid-template-columns: 72px 1fr; align-items: center; min-height: 44px; padding: 0 12px; border: 1px solid rgba(190,236,255,.34); border-radius: 6px; background: linear-gradient(135deg,rgba(255,255,255,.2),rgba(99,190,238,.08)); color: #effaff; box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 8px 22px rgba(0,30,82,.16); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); }
.form-card form > label:focus-within { outline: 0; border-color: rgba(91,232,255,.82); box-shadow: inset 0 1px 0 rgba(255,255,255,.3),0 0 0 2px rgba(91,232,255,.14),0 8px 24px rgba(0,30,82,.2); }
.form-card form > label span { color: rgba(235,249,255,.9); font-size: 12px; }
.form-card input, .form-card select, .form-card textarea { width: 100%; border: 0; outline: 0; background: transparent; color: #fff; caret-color: #63e8ff; font-size: 12px; resize: none; }
.form-card input::placeholder, .form-card textarea::placeholder { color: rgba(226,246,255,.56); }
.form-card select option { color: #12385e; }
.form-card textarea { padding-top: 10px; min-height: 48px; }
.lodging-field { display: grid; grid-template-columns: 72px 1fr; align-items: center; min-width: 0; min-height: 44px; margin: 0; padding: 4px 7px 4px 12px; border: 1px solid rgba(190,236,255,.34); border-radius: 6px; background: linear-gradient(135deg,rgba(255,255,255,.2),rgba(99,190,238,.08)); box-shadow: inset 0 1px 0 rgba(255,255,255,.24),0 8px 22px rgba(0,30,82,.16); backdrop-filter: blur(14px) saturate(135%); -webkit-backdrop-filter: blur(14px) saturate(135%); }
.lodging-field > span { color: rgba(235,249,255,.9); font-size: 12px; }
.lodging-options { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 2px; border: 1px solid rgba(151,223,255,.22); border-radius: 5px; background: rgba(0,61,128,.26); }
.lodging-options input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.lodging-options label { min-height: 28px; display: grid; place-items: center; border-radius: 3px; color: rgba(230,247,255,.72); font-size: 12px; cursor: pointer; transition: color .2s ease,background .2s ease,box-shadow .2s ease; }
.lodging-options input:checked + label { color: #fff; background: linear-gradient(90deg,rgba(0,161,226,.88),rgba(48,213,241,.88)); box-shadow: 0 3px 10px rgba(0,173,224,.28),inset 0 1px 0 rgba(255,255,255,.3); }
.lodging-options input:focus-visible + label { outline: 2px solid #78efff; outline-offset: 1px; }
.form-card .primary-action { margin-top: 5px; }
.form-card .primary-action:disabled { cursor: wait; opacity: .72; }
.form-submit-error { padding: 8px 10px; border: 1px solid rgba(255,155,166,.42); border-radius: 5px; background: rgba(118,11,37,.24); color: #ffdbe0; text-align: center; font-size: 10px; }
.form-card small { text-align: center; color: rgba(255,255,255,.56); font-size: 9px; }
.success-state {
  width: 100%;
  padding: 24px 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.success-mark {
  width: 68px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(112,237,255,.88);
  border-radius: 50%;
  color: #70edff;
  font-size: 34px;
  line-height: 1;
  box-shadow: 0 0 28px rgba(57,214,255,.12), inset 0 0 18px rgba(57,214,255,.06);
}
.success-copy { margin-top: 13px; }
.success-copy > span {
  display: block;
  margin-bottom: 5px;
  color: rgba(137,232,255,.68);
  font: 8px/1.2 Arial, sans-serif;
  letter-spacing: .24em;
}
.success-state h3 {
  margin: 0;
  font-size: 22px;
  font-weight: 400;
  letter-spacing: .14em;
}
.success-state p {
  max-width: 300px;
  margin: 7px auto 0;
  font-size: 12px;
  line-height: 1.75;
  color: rgba(231,248,255,.72);
}
.success-deadline {
  width: min(300px,100%);
  min-height: 34px;
  margin-top: 14px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid rgba(116,220,255,.18);
  background: rgba(4,48,105,.28);
  color: rgba(218,245,255,.58);
  font-size: 9px;
}
.success-deadline b {
  color: rgba(235,250,255,.86);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: .03em;
}
.success-actions {
  width: min(300px,100%);
  margin-top: 10px;
  display: grid;
  gap: 9px;
}
.edit-registration-button {
  width: 100%;
  min-height: 40px;
  margin: 0;
  border: 1px solid rgba(117,230,255,.48);
  border-radius: 3px;
  background: linear-gradient(90deg,rgba(18,137,202,.26),rgba(29,155,210,.36));
  color: #fff;
  font-size: 12px;
  letter-spacing: .1em;
  cursor: pointer;
  transition: background .2s ease,border-color .2s ease;
}
.edit-registration-button:hover {
  border-color: rgba(135,238,255,.72);
  background: rgba(25,164,220,.44);
}
.success-phone {
  min-height: 46px;
  padding: 0 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid rgba(135,225,255,.28);
  border-bottom: 1px solid rgba(135,225,255,.28);
  color: #fff;
  text-decoration: none;
}
.success-phone span {
  color: rgba(220,245,255,.62);
  font-size: 9px;
  letter-spacing: .04em;
}
.success-phone b {
  font: 600 17px/1 Arial,"Helvetica Neue",sans-serif;
  letter-spacing: .06em;
  white-space: nowrap;
}
.registration-closed-state .success-mark {
  border-color: rgba(255,211,135,.72);
  color: #ffda93;
  font-size: 29px;
  box-shadow: 0 0 28px rgba(255,211,135,.08), inset 0 0 18px rgba(255,211,135,.04);
}

.contact-card { text-align: center; }
.contact-card .section-title { text-align: left; }
.contact-qrcode { width: 148px; margin: 12px auto 24px; }
.contact-qrcode img { display: block; width: 148px; height: 148px; padding: 6px; object-fit: contain; background: #fff; border-radius: 4px; box-shadow: 0 12px 36px rgba(0,20,60,.3), 0 0 32px rgba(38,224,255,.18); }
.contact-qrcode span { display: block; margin-top: 9px; color: rgba(255,255,255,.8); font-size: 11px; letter-spacing: .08em; white-space: nowrap; }
.contact-card > .contact-copy { margin: 0 auto; text-align: center; line-height: 1.75; }
.contact-copy span:nth-child(3) { margin-top: 7px; }
.contact-copy span { display: block; }
.phone-link { margin: 24px 0 0; padding: 17px; display: flex; flex-direction: column; gap: 7px; color: #fff; text-decoration: none; border-block: 1px solid rgba(255,255,255,.3); }
.phone-link span { font-size: 11px; opacity: .7; }
.phone-link b { font-family: "Arial", "Helvetica Neue", sans-serif; font-size: 24px; line-height: 1.2; font-weight: 600; letter-spacing: .08em; font-variant-numeric: tabular-nums; }

.closing { flex-direction: column; text-align: center; }
.closing-content { display: flex; flex-direction: column; align-items: center; justify-content: center; transform: translateY(-19px); }
.closing-en { margin: 0 0 18px; font: 11px/1.8 Georgia, serif; letter-spacing: .28em; color: #86eaff; }
.closing h2 { margin: 0; font-size: clamp(36px, 10vw, 58px); line-height: 1.3; font-weight: 300; letter-spacing: .14em; }.closing h2 span { color: #8feaff; }
.closing p { margin: 22px 0 10px; font-size: 13px; line-height: 2; opacity: .72; letter-spacing: .1em; }
.closing .primary-action { max-width: 240px; }
.next-page { position: absolute; z-index: 5; bottom: 11px; left: 50%; width: 42px; height: 42px; padding: 0; transform: translateX(-50%); border: 0; background: transparent; display: grid; place-items: center; opacity: .74; cursor: pointer; }
.next-page img { display: block; width: 36px; height: 36px; object-fit: contain; animation: bob 1.8s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(92,226,255,.32)); }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

@media (min-width: 760px) {
  .invite-page { padding-inline: 80px; }
  .glass-card { width: min(470px, 90vw); }
  .topbar { padding-inline: 45px; }
  .page-logo { left: 45px; }
  .page-rail { right: 42px; }
  .side-copy { left: 36px; }
  .invitation-shell::after { right: -19vmax; }
}
@media (max-height: 690px) {
  .invite-page { padding-top: 76px; padding-bottom: 40px; }
  .glass-card { max-height: calc(100dvh - 112px); padding-top: 24px; padding-bottom: 22px; }
  .section-title { margin-bottom: 17px; }.section-title h2 { font-size: 18px; }
  .cover-rule { height: 22.5%; margin: 0; }
  .cover-details { bottom: 8.5%; }
  .detail-time { margin-bottom: 10px; }
  .form-card form { gap: 7px; }.form-card form > label, .lodging-field { min-height: 38px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; animation: none !important; } }