:root {
  --obsidian: #0a0f13;
  --ink: #0d1519;
  --ink-light: #152127;
  --paper: #e7d6ad;
  --paper-light: #f4e8c6;
  --gold: #c7a15a;
  --gold-light: #f1d991;
  --cinnabar: #a84132;
  --cinnabar-bright: #d65b43;
  --jade: #75a596;
  --muted: #879196;
  --border: rgba(199, 161, 90, .28);
  --serif: 'STSong', 'SimSun', 'Songti SC', serif;
  --display: 'STKaiti', 'KaiTi', 'Songti SC', 'STSong', serif;
  --sans: 'Segoe UI', 'Microsoft YaHei', sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; background: var(--obsidian); }
body { margin: 0; color: var(--paper); font-family: var(--sans); background: var(--obsidian); overflow-x: hidden; }
button, input { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 3px; }

body::before, body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: -2; }
body::before { background: radial-gradient(circle at 78% 14%, rgba(166, 58, 39, .17), transparent 28%), radial-gradient(circle at 18% 70%, rgba(55, 104, 103, .13), transparent 26%), linear-gradient(125deg, #090d10 0%, #101b20 55%, #090c0f 100%); }
body::after { opacity: .7; background-image: radial-gradient(rgba(255,255,255,.23) .6px, transparent .8px), radial-gradient(rgba(199,161,90,.18) .6px, transparent .8px); background-size: 137px 137px, 211px 211px; background-position: 10px 30px, 80px 100px; animation: drift 22s linear infinite; }

.sky-glow { position: fixed; width: 580px; height: 580px; border: 1px solid rgba(199, 161, 90, .07); border-radius: 50%; right: -210px; top: -180px; box-shadow: 0 0 90px rgba(167, 63, 43, .13), inset 0 0 90px rgba(199,161,90,.04); pointer-events: none; }
.sky-glow::before, .sky-glow::after { content: ''; position: absolute; border: 1px solid rgba(199, 161, 90, .08); border-radius: 50%; inset: 58px; }
.sky-glow::after { inset: 124px; }
.grain { position: fixed; inset: 0; z-index: 5; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }

.app-shell { width: min(1240px, calc(100% - 80px)); margin: 0 auto; padding: 38px 0 32px; }
.masthead { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid rgba(199,161,90,.18); padding-bottom: 20px; }
.brand-mark { display: flex; gap: 12px; align-items: center; color: var(--gold-light); }
.brand-symbol { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--gold); color: var(--gold-light); font-family: var(--display); font-size: 18px; transform: rotate(45deg); }
.brand-symbol::first-letter { transform: rotate(-45deg); }
.brand-word { font: 500 17px var(--serif); letter-spacing: 2px; }
.brand-word small { display: block; margin-top: 3px; color: var(--muted); font: 9px var(--sans); letter-spacing: 1.8px; }
.masthead-meta { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 10px; letter-spacing: 1px; }
.status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--cinnabar-bright); box-shadow: 0 0 12px var(--cinnabar-bright); animation: pulse 2s ease-in-out infinite; }

.hero-copy { position: relative; padding: 85px 0 65px; }
.eyebrow, .section-kicker { margin: 0; color: var(--gold); font-size: 10px; letter-spacing: 2.2px; }
.eyebrow span { display: inline-block; margin-right: 8px; color: var(--cinnabar-bright); font-size: 9px; }
h1 { margin: 19px 0 20px; color: var(--paper-light); font: 400 clamp(56px, 7vw, 100px)/.98 var(--display); letter-spacing: 3px; text-shadow: 0 10px 45px rgba(0,0,0,.25); }
h1 em { color: var(--gold-light); font-style: normal; }
.hero-intro { margin: 0; color: #aeb4b4; font: 14px/2 var(--serif); letter-spacing: 1px; }
.hero-ribbon { position: absolute; top: 90px; right: 8%; display: flex; gap: 17px; color: rgba(199,161,90,.4); font: 25px var(--display); writing-mode: vertical-rl; }
.hero-ribbon span:nth-child(2) { color: rgba(168,65,50,.65); transform: translateY(32px); }
.hero-ribbon span:nth-child(3) { transform: translateY(8px); }

.experience-grid { display: grid; grid-template-columns: minmax(270px, .72fr) minmax(470px, 1.28fr); gap: clamp(40px, 8vw, 120px); align-items: start; }
.control-panel { border-top: 1px solid var(--border); padding-top: 20px; }
.section-heading, .preview-topline, .guest-heading { display: flex; align-items: flex-start; justify-content: space-between; }
.section-heading h2 { margin: 8px 0 36px; font: 500 24px var(--serif); letter-spacing: 2px; color: var(--paper-light); }
.seal { display: grid; place-items: center; width: 43px; height: 43px; color: var(--cinnabar-bright); border: 1px solid var(--cinnabar-bright); font: 22px var(--display); transform: rotate(-7deg); }
.seal-small { width: 34px; height: 34px; font-size: 18px; }
.field-group { padding: 18px 0 28px; border-bottom: 1px solid rgba(199,161,90,.14); }
.field-group > label, .guest-heading label { color: var(--paper-light); font: 14px var(--serif); letter-spacing: 1px; }
.stepper-wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; }
.icon-button { width: 35px; height: 35px; border: 1px solid rgba(199,161,90,.5); color: var(--gold-light); background: transparent; font-size: 19px; line-height: 1; transition: background .2s, border-color .2s; }
.icon-button:hover { background: rgba(199,161,90,.12); border-color: var(--gold-light); }
#party-size-output { color: var(--paper-light); font: 34px var(--display); }
#party-size-output span { color: var(--muted); font: 12px var(--sans); }
#party-size { width: 100%; height: 2px; margin: 20px 0 0; accent-color: var(--cinnabar-bright); }
.guest-heading { margin: 24px 0 13px; }
.guest-heading span { color: var(--muted); font-size: 9px; letter-spacing: 1.2px; text-transform: uppercase; }
.guest-fields { display: grid; gap: 8px; }
.guest-field { display: flex; gap: 13px; align-items: center; border-bottom: 1px solid rgba(199,161,90,.13); padding: 3px 0; }
.guest-field > span { width: 20px; color: var(--cinnabar-bright); font: 10px var(--sans); }
.guest-input { width: 100%; border: 0; outline: 0; padding: 8px 0; color: var(--paper-light); background: transparent; font: 13px var(--serif); letter-spacing: 1px; }
.guest-input::placeholder { color: #677175; }
.primary-action { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-top: 30px; padding: 15px 17px; border: 1px solid var(--cinnabar-bright); color: var(--paper-light); background: var(--cinnabar); font: 14px var(--serif); letter-spacing: 2px; transition: transform .2s, box-shadow .2s, background .2s; }
.primary-action:hover { background: #bd4e3b; box-shadow: 0 10px 30px rgba(168,65,50,.22); transform: translateY(-2px); }
.action-arrow { font: 20px var(--sans); }
.form-note { color: var(--muted); font-size: 10px; line-height: 1.7; }
.form-note span { color: var(--gold); margin-right: 5px; }

.preview-panel { position: relative; }
.preview-topline { margin-bottom: 14px; color: var(--muted); font-size: 9px; letter-spacing: 1.5px; }
.preview-topline .section-kicker { color: var(--muted); }
.invitation-card { position: relative; min-height: 620px; overflow: hidden; padding: 34px; color: var(--ink); background: radial-gradient(circle at 76% 17%, rgba(255,255,255,.58), transparent 19%), linear-gradient(135deg, #ecdcb7, #d4bc82 58%, #c4a765); box-shadow: 14px 18px 0 rgba(0,0,0,.15), 0 26px 65px rgba(0,0,0,.26); isolation: isolate; }
.invitation-card::before { content: ''; position: absolute; inset: 12px; border: 1px solid rgba(75,53,23,.38); z-index: -1; }
.invitation-card::after { content: ''; position: absolute; inset: 20px; border: 1px solid rgba(75,53,23,.16); z-index: -1; }
.card-content { position: relative; height: 100%; min-height: 552px; display: flex; flex-direction: column; z-index: 2; }
.card-top-row { display: flex; justify-content: space-between; color: rgba(45,36,22,.68); font: 10px var(--sans); letter-spacing: 2px; }
.card-number { color: var(--cinnabar); font: 26px var(--display); }
.card-title-wrap { margin: 48px 0 25px; text-align: center; }
.card-pretitle { margin: 0 0 14px; color: var(--cinnabar); font: 17px var(--serif); letter-spacing: 7px; }
.card-title-wrap h2 { margin: 0; color: #32271b; font: 500 60px/.98 var(--display); letter-spacing: 6px; }
.card-title-wrap h2 span { color: var(--cinnabar); }
.card-subtitle { margin: 16px 0 0; color: rgba(45,36,22,.67); font: 11px var(--serif); letter-spacing: 3px; }
.card-divider { display: flex; align-items: center; gap: 10px; margin: 0 auto 23px; width: 70%; color: var(--cinnabar); }
.card-divider::before, .card-divider::after { content: ''; height: 1px; flex: 1; background: rgba(115,72,39,.4); }
.event-details { display: grid; gap: 15px; width: min(100%, 340px); margin: 0 auto; }
.event-details > div { display: grid; grid-template-columns: 35px 1fr; gap: 16px; align-items: start; }
.event-details dt { padding-top: 3px; color: var(--cinnabar); font: 11px var(--serif); writing-mode: vertical-rl; letter-spacing: 3px; }
.event-details dd { margin: 0; border-bottom: 1px solid rgba(115,72,39,.23); padding-bottom: 8px; }
.event-details strong { display: block; color: #372b1c; font: 16px var(--serif); letter-spacing: 1px; }
.event-details small { display: block; margin-top: 4px; color: rgba(54,47,35,.7); font-size: 10px; letter-spacing: .5px; }
.card-footer { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: 25px; }
.footer-label { display: block; margin-bottom: 7px; color: var(--cinnabar); font: 10px var(--serif); letter-spacing: 2px; }
.card-footer strong { display: block; max-width: 270px; color: #433524; font: 13px var(--serif); letter-spacing: 1px; line-height: 1.7; }
.card-stars { position: absolute; inset: 0; opacity: .45; background-image: radial-gradient(#5d4526 1px, transparent 1.5px), radial-gradient(#a84132 1px, transparent 1.5px); background-position: 35px 72px, 120px 175px; background-size: 145px 125px, 213px 187px; }
.card-orbit { position: absolute; border: 1px solid rgba(128,86,32,.25); border-radius: 50%; transform: rotate(28deg); }
.orbit-one { width: 680px; height: 230px; right: -230px; top: 84px; }
.orbit-two { width: 540px; height: 180px; left: -240px; bottom: 80px; transform: rotate(-21deg); }
.card-corner { position: absolute; width: 26px; height: 26px; border-color: var(--cinnabar); border-style: solid; opacity: .85; }
.corner-tl { top: 31px; left: 31px; border-width: 1px 0 0 1px; }.corner-tr { top: 31px; right: 31px; border-width: 1px 1px 0 0; }.corner-bl { bottom: 31px; left: 31px; border-width: 0 0 1px 1px; }.corner-br { bottom: 31px; right: 31px; border-width: 0 1px 1px 0; }
.preview-actions { display: flex; gap: 10px; margin-top: 19px; }
.secondary-action, .share-action { border: 1px solid rgba(199,161,90,.43); color: var(--paper); background: rgba(199,161,90,.08); transition: background .2s, border-color .2s; }
.secondary-action { flex: 1; padding: 12px; font-size: 11px; letter-spacing: 1px; }.share-action { width: 48px; font-size: 18px; }
.secondary-action:hover, .share-action:hover { border-color: var(--gold-light); background: rgba(199,161,90,.18); }
.button-icon { margin-right: 5px; color: var(--gold-light); }
.status-message { min-height: 18px; margin: 12px 0 0; color: var(--jade); text-align: right; font-size: 11px; letter-spacing: .4px; }.status-message[data-tone='error'] { color: #df866d; }
.invitation-card.is-generated { animation: card-arrival .75s cubic-bezier(.2,.8,.2,1); }
.footer-note { display: flex; align-items: center; gap: 15px; margin-top: 70px; color: #657075; font: 10px var(--serif); letter-spacing: 2px; }.footer-line { width: 70px; height: 1px; background: rgba(199,161,90,.35); }

@keyframes drift { from { transform: translate(0, 0); } to { transform: translate(-22px, 16px); } }
@keyframes pulse { 0%,100% { opacity: .4; } 50% { opacity: 1; } }
@keyframes card-arrival { 0% { opacity: .45; transform: translateY(9px) rotateX(4deg); } 100% { opacity: 1; transform: translateY(0) rotateX(0); } }

@media (max-width: 800px) {
  .app-shell { width: min(100% - 38px, 620px); padding-top: 24px; }
  .masthead-meta { display: none; }
  .hero-copy { padding: 67px 0 52px; }
  .hero-ribbon { top: 72px; right: 2%; font-size: 19px; gap: 10px; }
  .experience-grid { grid-template-columns: 1fr; gap: 54px; }
  .control-panel { order: 2; }.preview-panel { order: 1; }
  .invitation-card { min-height: 560px; padding: 28px; }.card-content { min-height: 500px; }.card-title-wrap { margin-top: 38px; }.card-title-wrap h2 { font-size: 53px; }
  .footer-note { margin-top: 50px; justify-content: center; }
}

@media (max-width: 460px) {
  .app-shell { width: min(100% - 28px, 390px); }
  .brand-word { font-size: 14px; }.hero-copy { padding-top: 58px; }.hero-intro { font-size: 12px; }
  .invitation-card { min-height: 525px; padding: 23px; box-shadow: 8px 11px 0 rgba(0,0,0,.15), 0 18px 35px rgba(0,0,0,.25); }.invitation-card::before { inset: 9px; }.invitation-card::after { inset: 15px; }.card-content { min-height: 475px; }.card-title-wrap { margin: 31px 0 20px; }.card-title-wrap h2 { font-size: 46px; }.card-pretitle { margin-bottom: 10px; font-size: 14px; }.card-subtitle { margin-top: 12px; font-size: 9px; }.event-details { gap: 11px; }.event-details strong { font-size: 14px; }.event-details small { font-size: 9px; }.card-footer strong { max-width: 205px; font-size: 11px; }.card-number { font-size: 21px; }.corner-tl { top: 22px; left: 22px; }.corner-tr { top: 22px; right: 22px; }.corner-bl { bottom: 22px; left: 22px; }.corner-br { bottom: 22px; right: 22px; }
}