*{box-sizing:border-box}body{margin:0;background:#f2f1ee;color:#252521;font:16px/1.5 Arial,sans-serif}button,input,textarea,summary{font:inherit}button,a,summary,input,textarea{touch-action:manipulation}button{cursor:pointer;min-height:44px;border:1px solid #d4d3cb;border-radius:9px;padding:9px 15px;background:transparent;color:inherit}button:hover{background:#e7e6df}button:focus-visible,a:focus-visible,summary:focus-visible,[contenteditable]:focus-visible{outline:2px solid #496249;outline-offset:5px}.toolbar{height:82px;padding:0 4vw;display:flex;align-items:center;gap:24px;border-bottom:1px solid #deddd6}.back{font-weight:700;font-size:21px;color:inherit;text-decoration:none}.toolbar span{flex:1;color:#67675f}.toolbar button{background:#262b25;color:white;border:0}main{max-width:1320px;margin:auto;display:grid;grid-template-columns:410px minmax(0,1fr);gap:60px;padding:42px 40px}.eyebrow{font-size:16px;letter-spacing:.08em;color:#67675f}.intro h1{font-size:36px;font-weight:500;letter-spacing:-1.5px;margin:12px 0 4px}.intro p{margin:0 0 24px;color:#67675f}nav{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:28px}nav button{display:flex;align-items:center;gap:10px;text-align:left;background:#fafaf7}nav button[aria-pressed=true]{border:2px solid #31382f;padding:8px 14px}nav b{width:22px;height:22px;border-radius:50%;flex-shrink:0;border:1px solid #0002}label{display:block;margin:12px 0;color:#54564e}textarea,input:not([type=checkbox]){display:block;width:100%;margin-top:5px;border:1px solid #d6d7cc;border-radius:7px;padding:10px;background:#fcfcf9;color:#242720}textarea{resize:vertical;min-height:70px}details{margin-top:20px;border-top:1px solid #d6d7cc;padding-top:16px}summary{cursor:pointer;min-height:44px}.music-label{display:flex;gap:10px}.studio-bottom{margin-top:20px;display:flex;flex-wrap:wrap;gap:8px}.studio-bottom p,details p{color:#66695e;font-size:16px}.workspace{min-width:0;align-self:start;position:sticky;top:24px;max-width:590px;width:100%;margin:auto}.card-label{display:flex;justify-content:space-between;margin-bottom:14px;color:#66695e}.card{position:relative;isolation:isolate;overflow:hidden;min-height:690px;padding:44px 46px;display:flex;flex-direction:column;box-shadow:0 16px 40px #39362315;background:#faf7ef;color:#333b30}.card p{margin:0;white-space:pre-line;font-size:18px;line-height:1.5}.card-top{display:flex;align-items:start;justify-content:space-between;gap:16px}.card-top p{font-size:16px;letter-spacing:.08em;text-transform:uppercase;flex:1}.mark{font-size:42px;line-height:1}.card h2{font-family:Georgia,serif;font-weight:400;font-size:76px;line-height:1.03;letter-spacing:-3px;margin:60px 0 28px;white-space:pre-line}.card .message{max-width:340px;margin-bottom:36px}.event{margin-top:auto;border-top:1px solid currentColor;padding-top:20px}.card .date{font-size:24px;margin-bottom:7px}.card .closing{margin-top:28px;font-style:italic}.art{position:absolute;inset:0;pointer-events:none;z-index:-1}.under-card{display:flex;justify-content:space-between;gap:15px;margin-top:16px;color:#66695e}footer{text-align:center;margin:50px 0 12px}footer a{font-size:14px;color:#62665d;text-decoration:none}[contenteditable=true]{cursor:text;border-radius:3px}[contenteditable=true]:hover{outline:1px dashed currentColor}[contenteditable=true]:empty:before{content:attr(data-placeholder);opacity:.6}.card [contenteditable=true]:after{content:' ↗';display:inline;font:16px Arial;opacity:.45}.card[data-theme=blue]{background:#2346d8;color:#fff7bf}.card[data-theme=blue] h2{font-family:Arial,sans-serif;font-weight:800;text-transform:uppercase;font-size:70px;letter-spacing:-3px;transform:rotate(-4deg);margin:65px 0 35px}.card[data-theme=blue] .art i{position:absolute;width:240px;height:240px;border:1px solid #fff7bf55;border-radius:50%;right:-130px;top:160px}.card[data-theme=blue] .art i:nth-child(2){transform:scale(1.4)}.card[data-theme=blue] .art i:nth-child(3){transform:scale(1.8)}.card[data-theme=rose]{background:#f8cddd;color:#8b183b;border-radius:110px 110px 4px 4px;text-align:center;padding-top:54px}.card[data-theme=rose] .card-top{justify-content:center}.card[data-theme=rose] .mark{display:none}.card[data-theme=rose] h2{font-size:78px;font-style:italic;margin-top:58px}.card[data-theme=rose] .message{margin-left:auto;margin-right:auto}.card[data-theme=rose] .art{inset:13px;border:1px solid #8b183b55;border-radius:100px 100px 0 0}.card[data-theme=rose] .event{border:0}.card[data-theme=olive]{background:#e8ebd9;color:#343f2b}.card[data-theme=olive] h2{font-size:67px;font-family:Arial,sans-serif;font-weight:400;letter-spacing:-3px;max-width:360px}.card[data-theme=olive] .mark{display:none}.card[data-theme=olive] .art i{position:absolute;right:-35px;top:90px;width:140px;height:230px;border:1px solid #5a664755;border-radius:50%;transform:rotate(32deg)}.card[data-theme=olive] .art i:nth-child(2){right:-65px;top:120px}.card[data-theme=olive] .art i:nth-child(3){right:-95px;top:150px}.clean .studio,.clean .card-label,.clean #hint,.clean .toolbar span{display:none}.clean main{display:block;padding-top:32px}.clean .toolbar{justify-content:space-between}.clean .workspace{position:static}.clean [data-field]:empty,.clean .event:has(p:empty):not(:has(p:not(:empty))){display:none}.clean .card{animation:arrive .5s ease-out}@keyframes arrive{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@media(max-width:1000px){main{gap:30px;padding:30px 24px;grid-template-columns:310px minmax(0,1fr)}.card{padding:30px;min-height:650px}.card h2{font-size:60px}}@media(max-width:760px){.toolbar{height:68px;padding:0 18px;position:sticky;top:0;z-index:10;background:#f2f1ee}.toolbar span{display:none}.toolbar .back{flex:1}main{display:flex;flex-direction:column;gap:20px;padding:24px 16px}.studio{width:100%}.intro h1{font-size:30px}.eyebrow{display:none}.intro p{margin-bottom:16px}nav{margin-bottom:0}.studio details,.studio-bottom{display:none}.workspace{position:static}.card{min-height:590px;padding:32px 26px}.card h2{font-size:65px;margin-top:46px}.card[data-theme=blue] h2{font-size:58px}.card[data-theme=rose] h2{font-size:65px}.card[data-theme=olive] h2{font-size:56px}.card-label{font-size:16px}.card .message{font-size:18px}.under-card{font-size:16px}.clean main{padding:20px 12px}.studio:has(details[open]) .studio-bottom{display:flex}.studio details{display:block;margin-top:12px;padding-top:8px}.studio details:not([open]){margin-bottom:-10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media print{body{background:white}.toolbar,.studio,.card-label,.under-card{display:none!important}main{display:block;padding:0}.workspace{position:static;max-width:590px}.card{box-shadow:none;print-color-adjust:exact;-webkit-print-color-adjust:exact}footer{margin-top:28px}[contenteditable=true]:after{display:none!important}@page{size:A5;margin:10mm}}
.clean .card:not(:has([data-field]:not(:empty))){display:none}.card [contenteditable=true]:after{content:' ✎'}

/* The postcard is the only text-editing surface on every screen. */
main{display:flex;flex-direction:column;gap:24px;max-width:900px;padding-top:28px}
.studio{width:100%;max-width:720px;margin:0 auto}
.intro{text-align:center}.intro h1{margin-top:0}.intro .eyebrow{display:none}
.intro p{margin-bottom:18px}
nav{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:0}
nav button{padding:9px 10px;font-size:16px}nav button[aria-pressed=true]{padding:8px 9px}
.options{border:0;padding-top:0;margin-top:12px}.options summary{text-align:center;color:#62665d}
.options[open]{max-width:590px;margin:12px auto 0}.options .studio-bottom{display:flex}
.workspace{position:static}.card-label{margin-bottom:12px}
@media(max-width:760px){main{gap:18px;padding-top:18px}nav{grid-template-columns:1fr 1fr}.intro h1{font-size:28px}.intro p{margin-bottom:14px}.studio .options{display:block;padding-top:0;margin-top:10px}.studio .options:not([open]){margin-bottom:0}.options .studio-bottom{display:flex}}

/* Detailed stationery: each style has its own frame, ornament and print finish. */
.card{min-height:760px;padding:40px 46px 42px;box-shadow:0 2px 3px #3936230a,0 18px 45px #39362320}
.card:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.22;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.74' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23736b58' opacity='.3' filter='url(%23n)' d='M0 0h150v150H0z'/%3E%3C/svg%3E")}
.card:after{content:'';position:absolute;inset:15px;border:1px solid currentColor;opacity:.22;pointer-events:none;z-index:-1}
.card .mark{display:none}.card-top p{text-align:center;letter-spacing:.12em}
.ornament{width:100%;height:100px;flex-shrink:0;margin:25px 0 0;pointer-events:none}.motif{display:none;width:100%;height:100%}
.card[data-theme=milk] .motif-milk,.card[data-theme=blue] .motif-blue,.card[data-theme=rose] .motif-rose,.card[data-theme=olive] .motif-olive{display:block}
.card h2,.card[data-theme=blue] h2,.card[data-theme=rose] h2,.card[data-theme=olive] h2{margin-top:24px;margin-bottom:28px}
.card[data-theme=milk]{background-color:#f7f2e7;color:#4a4435;text-align:center;background-image:linear-gradient(110deg,#ffffff55,transparent 40%,#c6b89714)}
.card[data-theme=milk]:after{inset:12px;border-style:double;border-width:4px}
.card[data-theme=milk] .art{inset:23px;border:1px solid #a295734a}
.card[data-theme=milk] h2{font-size:73px;letter-spacing:-2.5px}
.card[data-theme=milk] .message{margin-left:auto;margin-right:auto}
.card[data-theme=milk] .event{border-top:1px solid #a2957366;padding-top:22px}
.card[data-theme=milk] .closing{font-family:Georgia,serif;font-size:22px}
.card[data-theme=blue]{background-color:#193ed0;background-image:radial-gradient(ellipse at 80% 0,#587cf866,transparent 55%);padding-bottom:48px}
.card[data-theme=blue]:after{border:1px dashed #fff7bf;inset:16px;opacity:.5}
.card[data-theme=blue] .card-top p{text-align:left;border-bottom:1px solid #fff7bf66;padding-bottom:14px}
.card[data-theme=blue] .ornament{height:104px;margin-top:18px}
.card[data-theme=blue] h2{transform:rotate(-3deg);font-size:69px;text-shadow:2px 3px 0 #112878}
.card[data-theme=blue] .art i{opacity:.2;top:220px}
.card[data-theme=blue] .event{border:0;border-radius:3px;background:#fff4b8;color:#18318d;padding:18px 20px;box-shadow:5px 5px 0 #0a247666;transform:rotate(1deg)}
.card[data-theme=blue] .date{font-weight:700}
.card[data-theme=blue] .closing{font-style:normal}
.card[data-theme=rose]{border-radius:120px 120px 8px 8px;background-color:#f7cfda;background-image:linear-gradient(90deg,#c7718910 50%,transparent 50%);background-size:16px 100%;padding-top:50px}
.card[data-theme=rose]:after{inset:21px;border-radius:104px 104px 2px 2px;opacity:.2}
.card[data-theme=rose] .art{inset:12px;border-radius:112px 112px 3px 3px;border-color:#8b183b70}
.card[data-theme=rose] .ornament{height:98px;margin-top:20px}
.card[data-theme=rose] h2{font-size:72px;letter-spacing:-2.5px}
.card[data-theme=rose] .event{border-top:1px solid #8b183b44;border-bottom:1px solid #8b183b44;padding:20px 8px;background:#fff4f326}
.card[data-theme=rose] .closing{font-family:Georgia,serif;font-size:23px}
.card[data-theme=olive]{background-color:#e6e8d6;background-image:linear-gradient(135deg,#ffffef44,transparent 65%);border-top:9px solid #47583a}
.card[data-theme=olive]:after{inset:12px;border-color:#47583a;opacity:.25}
.card[data-theme=olive] .card-top p{text-align:left;max-width:330px;letter-spacing:.1em}
.card[data-theme=olive] .ornament{height:112px;margin-top:18px}
.card[data-theme=olive] .art i{display:none}
.card[data-theme=olive] h2{font-family:Georgia,serif;font-size:67px;line-height:1.07;font-weight:400;letter-spacing:-2px;max-width:100%}
.card[data-theme=olive] .event{border-top:1px solid #47583a77;border-bottom:1px solid #47583a77;padding:18px 0}
.card[data-theme=olive] .date{font-family:Georgia,serif;font-size:27px}
.card[data-theme=olive] .closing{font-style:normal}
.card [contenteditable=true]:after{opacity:.35}
.card [contenteditable=true]:focus{outline:1px dashed currentColor;outline-offset:5px;background:#ffffff0d}
.clean .card:not(:has(.card-top [data-field]:not(:empty),h2:not(:empty))) .ornament{display:none}
@media(max-width:760px){
.card{min-height:690px;padding:32px 29px 36px}
.card[data-theme=rose]{padding-top:43px;border-radius:95px 95px 7px 7px}
.card[data-theme=rose] .art{border-radius:85px 85px 2px 2px}
.card[data-theme=rose]:after{border-radius:77px 77px 2px 2px}
.card .ornament,.card[data-theme=blue] .ornament,.card[data-theme=rose] .ornament,.card[data-theme=olive] .ornament{height:84px;margin-top:17px}
.card h2,.card[data-theme=blue] h2,.card[data-theme=rose] h2,.card[data-theme=olive] h2{font-size:56px;margin-top:20px;letter-spacing:-2px}
.card[data-theme=milk] h2{font-size:60px}
.card .card-top p{letter-spacing:.06em}
.card[data-theme=blue] .event{padding:16px 14px}
.card .date,.card[data-theme=olive] .date{font-size:23px}
}
@media print{.card{min-height:690px;box-shadow:none;break-inside:avoid}.ornament{height:80px}}

/* Photographic olive sprig, isolated on transparency. */
.card[data-theme=olive] .motif-olive{object-fit:contain;object-position:center;width:100%;height:100%}
.card[data-theme=olive] .ornament{height:130px}
@media(max-width:760px){.card[data-theme=olive] .ornament{height:100px}}

/* Quiet classic: ivory silk and warm engraved stationery. */
.card[data-theme=milk]{background-color:#f3ece0;color:#514538;background-image:radial-gradient(ellipse at 50% 25%,#fffdf5bb,transparent 72%);padding:42px 48px;min-height:770px}
.card[data-theme=milk]:after{inset:15px;border:1px solid #9b8460;opacity:.55}
.card[data-theme=milk] .art{inset:22px;border:1px solid #aa946d44;background:linear-gradient(#aa946d,#aa946d) top left/18px 1px no-repeat,linear-gradient(#aa946d,#aa946d) top right/18px 1px no-repeat,linear-gradient(#aa946d,#aa946d) bottom left/18px 1px no-repeat,linear-gradient(#aa946d,#aa946d) bottom right/18px 1px no-repeat}
.card[data-theme=milk] .card-top p{letter-spacing:.16em;font-size:16px}
.card[data-theme=milk] .ornament{height:115px;margin:27px auto 0;width:90%}
.card[data-theme=milk] .motif-milk{object-fit:contain;object-position:center;width:100%;height:100%;filter:drop-shadow(0 4px 3px #6e543414)}
.card[data-theme=milk] h2{font-size:70px;line-height:1.07;letter-spacing:-2.6px;margin:25px 0 25px;font-weight:400}
.card[data-theme=milk] .message{max-width:350px;line-height:1.65;margin-bottom:34px}
.card[data-theme=milk] .event{border-top:1px solid #a2957366;border-bottom:1px solid #a2957366;padding:20px 8px}
.card[data-theme=milk] .date{font-family:Georgia,serif;font-size:28px;margin-bottom:10px}
.card[data-theme=milk] .closing{font-family:Georgia,serif;font-size:23px;margin-top:29px}
@media(max-width:760px){.card[data-theme=milk]{padding:34px 30px;min-height:710px}.card[data-theme=milk] .ornament{height:90px;margin-top:22px;width:100%}.card[data-theme=milk] h2{font-size:57px;margin-top:22px;letter-spacing:-2px}.card[data-theme=milk] .date{font-size:24px}.card[data-theme=milk] .card-top p{letter-spacing:.1em}}

/* Three independent postcard designs, sharing only the inline editor. */
.card[data-theme=terracotta] .motif-terracotta,.card[data-theme=midnight] .motif-midnight,.card[data-theme=lavender] .motif-lavender{display:block}
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]){min-height:760px;text-align:center}
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]) .message{margin-left:auto;margin-right:auto;line-height:1.65;max-width:370px}
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]) h2{margin-top:24px;line-height:1.08}
.card[data-theme=terracotta]{background:#bd563c;color:#fff3db;border-radius:150px 150px 5px 5px;padding-top:62px}
.card[data-theme=terracotta]:after{inset:15px;border-radius:136px 136px 1px 1px;opacity:.48}
.card[data-theme=terracotta] .art{inset:23px;border:1px solid #fff3db33;border-radius:130px 130px 0 0}
.card[data-theme=terracotta] .ornament{height:110px;margin-top:24px}
.card[data-theme=terracotta] h2{font-size:65px;letter-spacing:-2.5px}
.card[data-theme=terracotta] .event{border-top:1px solid #fff3db88;border-bottom:1px solid #fff3db88;padding:18px 0}
.card[data-theme=terracotta] .date{font-family:Georgia,serif;font-size:27px}
.card[data-theme=terracotta] .closing{font-style:normal}
.card[data-theme=midnight]{background:#182439;color:#f5e8c8;background-image:radial-gradient(ellipse at 50% 15%,#34455a99,transparent 65%);padding-top:44px}
.card[data-theme=midnight]:after{inset:17px;border-color:#d6b77b;opacity:.6}
.card[data-theme=midnight] .art{inset:25px;border:1px solid #d6b77b33}
.card[data-theme=midnight] .ornament{height:115px;color:#dbbc80}
.card[data-theme=midnight] h2{font-size:71px;font-style:italic;letter-spacing:-2px}
.card[data-theme=midnight] .event{border-top:1px solid #d6b77b77;padding-top:22px}
.card[data-theme=midnight] .date{font-size:25px;letter-spacing:.02em;color:#efcf96}
.card[data-theme=midnight] .closing{font-family:Georgia,serif;font-size:23px}
.card[data-theme=midnight] [contenteditable]:focus-visible{outline-color:#efcf96}
.card[data-theme=lavender]{background:#eee6f0;color:#58415f;background-image:linear-gradient(120deg,#fffaf988,transparent 65%);padding-top:42px}
.card[data-theme=lavender]:after{inset:16px;border:1px solid #a78caf;opacity:.7;border-radius:70px 70px 0 0}
.card[data-theme=lavender] .art{inset:23px;border:1px solid #a78caf44;border-radius:63px 63px 0 0}
.card[data-theme=lavender] .card-top p{letter-spacing:.1em}
.card[data-theme=lavender] .ornament{height:125px;margin-top:24px}
.card[data-theme=lavender] .motif-lavender{object-fit:contain;width:100%;height:100%}
.card[data-theme=lavender] h2{font-size:66px;font-style:italic;letter-spacing:-2px}
.card[data-theme=lavender] .event{border-top:1px solid #a78caf88;border-bottom:1px solid #a78caf88;padding:20px 4px}
.card[data-theme=lavender] .date{font-family:Georgia,serif;font-size:27px}
.card[data-theme=lavender] .closing{font-family:Georgia,serif;font-size:22px}
@media(max-width:760px){
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]){min-height:700px}
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]) h2{font-size:54px;letter-spacing:-1.8px}
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]) .ornament{height:95px}
.card[data-theme=terracotta]{padding-top:47px;border-radius:100px 100px 4px 4px}
.card[data-theme=terracotta]:after{border-radius:86px 86px 0 0}
.card[data-theme=terracotta] .art{border-radius:79px 79px 0 0}
.card:is([data-theme=terracotta],[data-theme=midnight],[data-theme=lavender]) .date{font-size:23px}
}

/* Language controls and scripts with different reading directions. */
.language-control{display:flex;align-items:center;gap:8px;margin:0;flex-shrink:0}
.language-control select{font:inherit;font-size:16px;min-height:44px;max-width:180px;border:1px solid #c5c6bd;border-radius:8px;background:#fafaf7;color:#252521;padding:8px}
.toolbar>#status{min-width:0;font-size:16px}
nav button span{min-width:0;overflow-wrap:normal;hyphens:none}
#number{direction:ltr;unicode-bidi:isolate}
[dir=rtl] .card:is([data-theme=olive],[data-theme=blue]) .card-top p{text-align:start}
[dir=rtl] .card:is([data-theme=olive],[data-theme=blue]){text-align:start}
[dir=rtl] .card .card-top p,[dir=rtl] .card .date{letter-spacing:normal}
html:is([lang=ar],[lang=fa],[lang=he],[lang=ur],[lang=hi],[lang=bn],[lang=th]) .card h2{letter-spacing:normal;line-height:1.3}
html:is([lang=ja],[lang=ko],[lang=zh-hant]) .card h2{letter-spacing:normal;line-height:1.25}
@media(max-width:1000px){.toolbar{height:auto;min-height:82px;flex-wrap:wrap;padding-top:12px;padding-bottom:12px;gap:12px}.toolbar>#status{display:none}.toolbar .back{margin-inline-end:auto}}
@media(max-width:760px){.toolbar{gap:8px}.language-control>span{display:none}.language-control select{max-width:130px}.toolbar .back{flex:initial;font-size:18px}.toolbar button{font-size:16px;padding:8px 10px}nav button{min-width:0}}
@media(max-width:370px){.toolbar{padding-inline:12px}.language-control select{max-width:112px}}
@media print{.language-control{display:none}}