:root{--ink:#181713;--paper:#f6f3eb;--panel:#fff;--line:#d9d6ce;--muted:#6d6a62;--accent:#ef553d;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif}*{box-sizing:border-box}body{margin:0;min-width:320px;min-height:100vh;color:var(--ink);background:var(--paper);font-size:16px}button,input,textarea,select{font:inherit}button{color:inherit;cursor:pointer}header{height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:var(--ink);color:#fff}.brand{color:inherit;text-decoration:none;display:flex;align-items:center;gap:11px;font-weight:800}.brand b{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;background:var(--accent)}nav{display:flex;align-items:center;gap:10px}nav small{color:#bbb7ae}nav button{height:40px;padding:0 15px;border:1px solid var(--accent);border-radius:4px;background:var(--accent);color:#fff;font-weight:750}nav .ghost{border-color:#4b4942;background:transparent}main{min-height:calc(100vh - 72px);display:grid;grid-template-columns:minmax(290px,350px) minmax(480px,1fr) minmax(230px,286px)}aside{padding:28px 24px;background:#fff;overflow:auto}.editor{border-right:1px solid var(--line)}.templates{border-left:1px solid var(--line)}.eyebrow{margin:0 0 4px;color:var(--accent);font-size:.74rem;letter-spacing:.14em;font-weight:800;text-transform:uppercase}h1,.templates h2{margin:0;font-family:Georgia,serif;font-weight:500;letter-spacing:-.04em}h1{font-size:2.3rem}.templates h2{font-size:1.65rem;margin-bottom:18px}.tabs{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line);margin:22px 0}.tabs button{height:44px;border:0;background:transparent;color:var(--muted);font-weight:750;position:relative}.tabs .active{color:var(--ink)}.tabs .active:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent)}#detailsPanel,#stylePanel{display:grid;gap:16px}#detailsPanel[hidden],#stylePanel[hidden]{display:none}label{display:grid;gap:7px;color:#4e4b45;font-size:.82rem;font-weight:750}input,textarea,select{width:100%;min-height:44px;padding:10px 11px;border:1px solid #c9c6bd;border-radius:4px;background:#fbfaf7;color:var(--ink);outline:0}textarea{height:76px;resize:vertical;line-height:1.4}input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px #ef553d22;background:#fff}.row{display:grid;grid-template-columns:1.25fr .85fr;gap:10px}fieldset{border:0;padding:0;margin:0}legend{margin-bottom:10px;color:#4e4b45;font-size:.82rem;font-weight:750}.swatches{display:flex;gap:11px}.swatches button{width:38px;height:38px;border-radius:50%;background:var(--c);border:4px solid #fff;box-shadow:0 0 0 1px #bcb8ae}.swatches .chosen{box-shadow:0 0 0 2px var(--ink)}input[type=range]{padding:0;min-height:22px;accent-color:var(--accent);border:0;box-shadow:none}.check{display:flex;align-items:center;gap:9px}.check input{width:20px;min-height:20px;accent-color:var(--accent)}output{float:right;color:var(--muted)}
.stage{padding:22px 30px;display:flex;min-width:0;flex-direction:column;align-items:center;justify-content:center;background-color:#e7e3da;background-image:radial-gradient(#bbb6aa .8px,transparent .8px);background-size:14px 14px;overflow:hidden}.stageMeta{width:min(100%,510px);display:flex;justify-content:space-between;margin-bottom:12px;color:#5f5b52;font-size:.73rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase}.shell{width:min(100%,510px);aspect-ratio:4/5;filter:drop-shadow(0 24px 50px #1817132e)}.invitation{--a:#ef553d;--bg:#fff9ed;--fg:#171612;width:100%;height:100%;padding:11% 12%;position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg);color:var(--fg);container-type:size;isolation:isolate}.frame{position:absolute;inset:4.7%;border:1px solid color-mix(in srgb,var(--fg),transparent 72%);z-index:-1}.orb{position:absolute;border-radius:50%;background:var(--a);z-index:-2}.one{width:45%;aspect-ratio:1;left:-21%;top:-12%}.two{width:29%;aspect-ratio:1;right:-13%;bottom:-10%}.kicker{margin:1% 0 5%;font-size:clamp(.65rem,2.25cqw,.9rem);letter-spacing:.2em;font-weight:800;text-transform:uppercase}.rule{width:34px;height:4px;background:var(--a);margin-bottom:10%}.invitation h2{max-width:100%;margin:0;font-family:Georgia,serif;font-size:clamp(2.2rem,11cqw,4.5rem);line-height:.92;letter-spacing:-.06em;font-weight:500;text-wrap:balance;overflow-wrap:anywhere}.message{max-width:82%;margin:8% auto 6%;font-family:Georgia,serif;font-size:clamp(.78rem,3cqw,1.1rem);line-height:1.55}.when{width:82%;display:grid;grid-template-columns:1.3fr .7fr;border-block:1px solid;margin-top:auto}.when b{padding:5% 2%;font-size:clamp(.64rem,2.35cqw,.9rem);letter-spacing:.07em;text-transform:uppercase}.when b+b{border-left:1px solid}.place{margin:6% 0 4%;display:grid;gap:3px;font-size:clamp(.7rem,2.4cqw,.92rem)}.rsvp{margin:0;font-size:clamp(.56rem,2.05cqw,.78rem);letter-spacing:.08em;text-transform:uppercase}.invitation>em{position:absolute;left:8%;bottom:7%;writing-mode:vertical-rl;font-style:normal;font-size:clamp(.53rem,1.8cqw,.7rem);font-weight:800;letter-spacing:.12em}.stage>small{margin-top:14px;color:#5f5b52}.palette-cobalt{--a:#2855d9;--bg:#f8f7f2;--fg:#172350}.palette-forest{--a:#174f3d;--bg:#f4eedf;--fg:#15372d}.palette-plum{--a:#6f294e;--bg:#f8e9eb;--fg:#321c28}.palette-midnight{--a:#d6ad54;--bg:#171d36;--fg:#f9efd9}.font-modern h2{font-family:Inter,sans-serif;font-weight:900}.font-classic h2{font-family:Baskerville,Georgia,serif;letter-spacing:-.03em}.uppercase h2{text-transform:uppercase}.template-minimal{padding:14%}.template-minimal .frame{inset:7%;border-color:var(--a)}.template-minimal .orb{display:none}.template-minimal .rule{width:2px;height:13%}.template-minimal h2{text-transform:uppercase;letter-spacing:.03em}.template-classic .orb{border-radius:0;transform:rotate(45deg);background:transparent;border:1px solid var(--a)}.template-playful .frame{border:3px solid}.template-playful h2{font-family:Inter,sans-serif;font-weight:900;text-transform:uppercase}.template-playful .one{width:56%;left:-29%;top:-18%}.template-playful .two{width:41%;right:-20%;bottom:-16%}
.templateList{display:grid;gap:10px}.templateList>button{width:100%;padding:8px;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:11px;text-align:left;border:1px solid var(--line);border-radius:5px;background:#fff}.templateList>button.selected{border:2px solid var(--ink);padding:7px}.templateList span{display:grid;gap:3px}.templateList small{color:var(--muted);font-size:.7rem}.thumb{height:74px;display:grid;place-items:center;font-family:Georgia,serif;font-size:.85rem;font-style:normal}.red{background:#fff5e5;border-left:10px solid #ef553d}.blue{background:#f8f7f2;border:1px solid #2855d9}.green{background:#f4eedf;color:#15372d;border-block:1px solid}.pink{background:#f8e9eb;color:#6f294e;border:3px solid;font-family:Inter,sans-serif;font-weight:900}.print{margin-top:22px;padding:14px;border:1px dashed #b9b5ab;background:#f8f6f1;color:var(--muted);font-size:.75rem;line-height:1.5}.print b{color:var(--ink)}#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);padding:11px 16px;border-radius:4px;background:var(--ink);color:#fff;opacity:0;pointer-events:none;transition:.2s;z-index:9;font-size:.85rem}#toast.show{opacity:1;transform:translate(-50%,0)}button:focus-visible{outline:3px solid #7aa7ff;outline-offset:2px}@media(max-width:1050px){main{grid-template-columns:minmax(270px,340px) 1fr}.templates{grid-column:1/-1;border:0;border-top:1px solid var(--line)}.templateList{grid-template-columns:repeat(4,minmax(180px,1fr));overflow:auto}.print{display:none}}@media(max-width:700px){header{height:68px;padding:10px 16px}.brand span,nav>small{display:none}nav button{padding:0 12px}main{display:flex;flex-direction:column}.stage{order:1;min-height:520px;padding:20px 22px}.shell{width:min(100%,410px)}.editor{order:2;border:0;border-top:1px solid var(--line)}.templates{order:3}.stage>small{display:none}}@media(max-width:420px){nav button:last-child{font-size:0}nav button:last-child:first-letter{font-size:1rem}.stage{min-height:450px;padding-inline:15px}aside{padding-inline:18px}}@media(prefers-reduced-motion:reduce){*{transition:none!important}}