@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');

:root{font-family:'DM Sans',sans-serif;color:#3f2a2c;background:#f7f3ed}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:radial-gradient(circle at 95% 0,#f3e4db 0,transparent 34%),#f7f3ed}
button,input,textarea,select{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid #c9826b;outline-offset:2px}
header{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(32px,calc((100vw - 1510px)/2));background:#49252b;color:#f9f0e9;border-bottom:1px solid #ffffff24}
.brand{font-family:'Instrument Serif',serif;font-size:37px;letter-spacing:-1.4px;line-height:1;color:#fff7ee;white-space:nowrap}
.brand .brand-lead{color:#fff7ee}
.brand .brand-highlight{color:#e7af91;font-style:italic}
.brand .brand-dot{color:#fff7ee}
header small{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#ead7cd}
.shell{max-width:1510px;margin:auto;padding:40px 32px 72px}
.top{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:28px}
.eyebrow{text-transform:uppercase;letter-spacing:.24em;font-weight:700;font-size:10px;color:#a75f53;margin-bottom:11px}
h1{font-family:'Instrument Serif',serif;font-size:clamp(39px,4.1vw,62px);font-weight:400;line-height:.99;letter-spacing:-.025em;margin:0;color:#4b292e}
.top p{color:#816d69;font-size:13px;margin:10px 0 0}
.workspace{display:grid;grid-template-columns:minmax(350px,440px) minmax(450px,1fr);gap:28px;align-items:start}
.editor{border:1px solid #e9ddd4;border-radius:14px;overflow:hidden;background:#fffcf8;box-shadow:0 8px 36px #6741370c}
.section{padding:23px 26px;border-bottom:1px solid #eee5de}
.section:last-child{border:0}
.section-title{display:flex;align-items:center;gap:11px;margin:0 0 17px;font-size:12px;font-weight:700;letter-spacing:.02em;color:#50383a}
.num{width:23px;height:23px;border-radius:50%;display:grid;place-items:center;background:#f1e2d8;color:#975c51;font-size:11px;font-weight:700}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.chip{padding:9px 12px;border-radius:100px;border:1px solid #e2d8d0;background:#fffaf6;color:#765d5b;font-size:11px;font-weight:700;transition:background .2s,color .2s,transform .2s}
.chip:hover{transform:translateY(-1px);border-color:#bd8b7c}
.chip.active{background:#5a3037;color:#fff7ef;border-color:#5a3037;box-shadow:0 3px 10px #5a30372d}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:14px 12px}
.field{min-width:0}
.field.full{grid-column:1/-1}
label{display:block;margin:0 0 7px;color:#6a5552;font-size:10px;font-weight:700;letter-spacing:.03em}
.field input,.field textarea,.field select{width:100%;border:1px solid #e7dbd2;border-radius:7px;background:#fff;color:#3f2a2c;padding:11px 12px;outline:none;font-size:12px;transition:border-color .15s,box-shadow .15s}
.field input::placeholder,.field textarea::placeholder{color:#ac9a93}
.field textarea{min-height:66px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{border-color:#b97867;box-shadow:0 0 0 3px #b9786724}
.palette{display:flex;gap:11px;align-items:center}
.swatch{width:32px;height:32px;border-radius:50%;border:3px solid #fffcf8;box-shadow:0 0 0 1px #d9cbc2;transition:transform .2s}
.swatch:hover{transform:scale(1.12)}
.swatch.active{box-shadow:0 0 0 2px #6b3940}
.photo-controls{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.photo-controls input{position:absolute;width:1px;height:1px;opacity:0}
.upload-button,.photo-controls button{display:inline-block;border:1px solid #d9c7bd;background:#fff9f4;color:#6b3940;border-radius:7px;padding:10px 14px;font-size:11px;font-weight:700;cursor:pointer;margin:0}
.upload-button:hover,.photo-controls button:hover{background:#f3e7de}
.upload-button:has(+ input:focus-visible){outline:3px solid #c9826b}
.photo-controls button[hidden],.invite-photo[hidden]{display:none}
.field-note{font-size:10px;color:#96837c;margin:9px 0 0}
.ai-section{background:#fff9f4}
.ai-tag{margin-left:auto;border:1px solid #e1cec1;border-radius:20px;padding:4px 8px;color:#9b6256;font-size:9px;text-transform:uppercase;letter-spacing:.1em}
.ai-intro{margin:-5px 0 17px;color:#7c6862;font-size:11px;line-height:1.5}
.ai-actions{display:flex;align-items:end;gap:10px;margin-top:12px}
.ai-actions .field{min-width:120px;flex:1}
.ai-actions button{flex:1;border:0;border-radius:7px;background:#5a3037;color:#fff7ef;padding:12px;font-size:11px;font-weight:700}
.ai-actions button:disabled{opacity:.6;cursor:wait}
.ai-status{min-height:1.4em;margin:9px 0 0;color:#6b3940;font-size:11px;line-height:1.5}
.ai-section .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.preview-wrap{position:sticky;top:20px}
.preview-heading{display:flex;justify-content:space-between;align-items:center;margin:0 2px 14px}
.preview-heading strong{font-size:12px;letter-spacing:.03em}
.preview-heading span{font-size:11px;color:#9a8580}
.stage{min-height:662px;padding:28px;display:grid;place-items:center;border:1px solid #e5d7cf;border-radius:14px;background:radial-gradient(circle at 6% 8%,#f7eae0 0,transparent 35%),linear-gradient(135deg,#e9d7cf,#f0e4dc 55%,#dec8c2);overflow:hidden}
.invite{--base:#fff7ec;--ink:#512f32;--accent:#ae6d53;width:min(100%,460px);min-height:594px;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:54px 43px 38px;text-align:center;background:var(--base);color:var(--ink);box-shadow:0 20px 48px #4e2f2e30,0 0 0 1px #ffffff75 inset}
.invite:before,.invite:after{content:'';position:absolute;pointer-events:none;border:1px solid var(--accent);opacity:.38;width:220px;height:220px;border-radius:50%}
.invite:before{top:-135px;left:-100px}
.invite:after{right:-110px;bottom:-150px}
.ornament{font-family:'Instrument Serif',serif;color:var(--accent);font-size:26px;line-height:1}
.invite .overline{font-size:9px;font-weight:700;letter-spacing:.29em;text-transform:uppercase;margin-top:25px}
.invite h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:clamp(48px,5vw,67px);letter-spacing:-.035em;line-height:.99;margin:31px 0 23px;overflow-wrap:anywhere}
.divider{width:42px;height:1px;background:var(--accent);margin:0 auto 21px}
.invite .message{font-family:'Instrument Serif',serif;font-style:italic;font-size:20px;line-height:1.35;max-width:330px;margin:0 auto 27px;white-space:pre-wrap;overflow-wrap:anywhere}
.invite-photo{display:block;width:100%;max-width:300px;height:155px;object-fit:cover;border:5px solid color-mix(in srgb,var(--base) 75%,white);box-shadow:0 7px 18px #0002;margin:0 auto 24px}
.details{margin-top:auto;width:100%;border-top:1px solid color-mix(in srgb,var(--ink) 24%,transparent);padding-top:21px}
.date{font-family:'Instrument Serif',serif;font-size:27px;line-height:1.15}
.time,.place{font-size:11px;letter-spacing:.06em;margin-top:10px}
.host{font-size:9px;text-transform:uppercase;letter-spacing:.16em;margin-top:24px;line-height:1.5}
#p-rsvp{margin-top:10px}
.actions{display:flex;gap:9px;margin-top:16px}
.actions button{border-radius:7px;padding:14px 16px;font-size:11px;font-weight:700;letter-spacing:.02em;border:1px solid #d7c7bd;transition:transform .2s,background .2s}
.actions button:hover{transform:translateY(-2px)}
.primary{background:#5a3037;color:#fff7ef;flex:1;border-color:#5a3037!important}
.primary:hover{background:#6c3a43}
.secondary{background:#fffaf6;color:#5a3037}
.secondary:hover{background:#f2e8e0}
.hint{font-size:10px;line-height:1.5;color:#947f78;margin:11px 0 0;text-align:center}
.toast{position:fixed;z-index:4;bottom:22px;left:50%;transform:translateX(-50%);background:#49252b;color:#fff7ef;padding:11px 17px;border-radius:8px;font-size:12px;box-shadow:0 6px 24px #0003;opacity:0;pointer-events:none;transition:opacity .2s}
.toast.show{opacity:1}
.rsvp-card{margin-top:22px;padding:28px;border:1px solid #e9ddd4;border-radius:14px;background:#fffcf8;box-shadow:0 8px 36px #6741370c}
.rsvp-card[hidden],.host-tools[hidden]{display:none}
.rsvp-card h2{font-family:'Instrument Serif',serif;font-weight:400;font-size:36px;margin:0 0 20px}
.rsvp-fields{display:grid;gap:8px}
.rsvp-fields input,.rsvp-fields select,.rsvp-fields textarea{width:100%;border:1px solid #e7dbd2;border-radius:7px;background:#fff;color:#3f2a2c;padding:11px 12px;font-size:13px;margin-bottom:8px}
.rsvp-fields button{border:0;border-radius:7px;padding:13px 18px;font-weight:700}
.rsvp-fields button:disabled{opacity:.6;cursor:wait}
.rsvp-fields .honeypot{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
#rsvp-status{min-height:1.4em;margin:4px 0 0;font-size:12px;color:#6b3940}
.host-tools{display:flex;gap:15px;align-items:flex-start;margin-top:16px;padding:18px 20px;border:1px solid #d8c9bc;border-radius:12px;background:#fffaf3;color:#6a5552;font-size:12px}
.host-tools-icon{display:grid;place-items:center;flex:none;width:36px;height:36px;border-radius:50%;background:#f1e2d8;color:#8b524c;font-size:19px}
.host-tools strong{display:block;color:#4b292e;font-size:13px}
.host-tools p{margin:6px 0 11px;line-height:1.5}
.host-tools button{border:1px solid #c9aa99;border-radius:7px;background:#fff;color:#5a3037;padding:9px 12px;font-size:11px;font-weight:700}
.host-tools button:hover{background:#f6eee8}
.host-tools small{display:block;margin-top:10px;color:#927e76;font-size:10px}
.host-tools code{overflow-wrap:anywhere;color:#654343;font-size:10px}
.guest-mode .editor,.guest-mode .actions,.guest-mode .hint,.guest-mode .host-tools{display:none}
.guest-mode .workspace{grid-template-columns:minmax(0,1fr)}
.guest-mode .preview-wrap{position:static;max-width:740px;margin:auto;width:100%}
.guest-mode .top{justify-content:center;text-align:center}
.guest-mode .top .eyebrow{display:none}
.guest-mode .top h1{font-size:clamp(32px,4vw,46px)}
.guest-mode .top p{display:none}
@media(max-width:900px){.workspace{grid-template-columns:1fr}.preview-wrap{position:static}.stage{min-height:0}.invite{min-height:580px}}
@media(max-width:550px){header{height:65px;padding:0 18px}header small{display:none}.brand{font-size:clamp(26px,8vw,34px)}.shell{padding:28px 15px 50px}.top{margin-bottom:23px}.top p{line-height:1.45}.workspace{gap:23px}.section{padding:20px}.fields{gap:12px}.stage{padding:17px}.invite{padding:48px 27px 34px;min-height:560px}.invite h2{font-size:52px}.actions{flex-wrap:wrap}.actions button{flex:1 1 100%}}