/* Quiet, optional keepsakes. The saved PNG is the very same canvas you see. */
.postcard-keepsake{display:grid;grid-template-columns:minmax(220px,.82fr) minmax(0,1fr);gap:clamp(26px,4vw,65px);align-items:center;padding:35px;background:#fbf5ee;border:1px solid #e3d4df;border-radius:27px;max-width:1040px;margin:30px auto 0;text-align:left}
.postcard-preview{min-width:0;max-width:366px;width:100%;justify-self:center;aspect-ratio:4/5;border-radius:15px;background:#ecdce8;transform:rotate(-2deg);box-shadow:0 16px 35px #4c2f5915;overflow:hidden}
.postcard-preview canvas,.postcard-share-preview canvas{display:block;width:100%;height:auto}
.postcard-eyebrow{font:700 9px/1.6 var(--body,Arial,sans-serif);letter-spacing:.13em;color:#97718d;margin:0 0 16px}
.postcard-copy h3{font-family:var(--display,Georgia,serif);font-size:clamp(31px,3.2vw,43px);line-height:1.1;letter-spacing:-.04em;color:#4d3058;margin:0 0 16px;max-width:420px}
.postcard-description{font-size:14px;line-height:1.8;color:#7f6386;max-width:370px;margin:0 0 21px}
.postcard-palettes{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 25px}
.postcard-palette{display:inline-flex;align-items:center;gap:7px;border:1px solid #d6c8d5;background:transparent;border-radius:24px;padding:8px 11px;min-height:44px;font-size:10px;line-height:1.5;color:#6c4f76;transition:background .2s,border-color .2s}
.postcard-palette:before{content:'';display:block;width:17px;height:17px;background:var(--postcard-swatch);border-radius:50%;border:1px solid #5d3c6222;flex:none}
.postcard-palette[aria-pressed=true]{background:#fff;border-color:#86618f;box-shadow:0 0 0 1px #86618f}
.postcard-palette:hover{border-color:#86618f}
.postcard-actions{display:flex;align-items:flex-start;flex-direction:column;gap:12px}
.postcard-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #4e2e5a;border-radius:27px;background:#4e2e5a;color:#fffaf3;padding:13px 20px;min-height:48px;line-height:1.5;font:600 12px/1.5 var(--body,Arial,sans-serif);text-align:center;transition:background .2s,transform .2s}
.postcard-button:hover{background:#72507c;transform:translateY(-2px)}
.postcard-button-secondary{background:transparent;color:#5b3c67;border-color:#cdb8d0}
.postcard-button-secondary:hover{background:#f3e7f3}
.postcard-link{display:inline-flex;align-items:center;min-height:44px;padding:7px 0;background:none;color:#76517f;font:600 11px/1.7 var(--body,Arial,sans-serif);text-align:left;text-decoration:underline;text-decoration-color:#cdb6cf;text-underline-offset:5px}
.postcard-link:hover{text-decoration-color:currentColor}
.postcard-button:disabled,.postcard-link:disabled{opacity:.5;cursor:wait;transform:none}
.postcard-status{font-size:11px;color:#785d80;line-height:1.7;margin:10px 0 0;min-height:0}
.postcard-status:empty{display:none}
.postcard-small{font-size:10px;color:#9a849a;line-height:1.7;margin:18px 0 0}
.postcard-share-dialog{width:min(900px,calc(100% - 36px));max-width:none;max-height:calc(100dvh - 40px);padding:33px;border:1px solid #dfccde;border-radius:26px;background:#fffbf4;color:#4d3058;box-shadow:0 30px 100px #21122635;overflow:auto}
.postcard-share-dialog::backdrop{background:#3624407a;backdrop-filter:blur(7px)}
.postcard-dialog-close{position:absolute;right:13px;top:10px;border-radius:50%;width:44px;height:44px;background:#f0e5ef;color:#694a73;font:25px/1 Arial,sans-serif;z-index:1}
.postcard-share-body{display:grid;grid-template-columns:minmax(0,.83fr) minmax(0,1fr);gap:34px;align-items:center}
.postcard-share-preview{aspect-ratio:4/5;width:100%;background:#efdeea;border-radius:13px;overflow:hidden;box-shadow:0 10px 28px #482d5610}
.postcard-share-copy{padding-top:15px;min-width:0}
.postcard-share-copy h2{font-family:var(--display,Georgia,serif);font-size:36px;line-height:1.1;letter-spacing:-.04em;margin:0 0 18px}
.postcard-share-copy>p:not(.postcard-eyebrow):not(.postcard-share-note):not(.postcard-status){font-size:13px;line-height:1.8;color:#7d6284;margin-bottom:13px}
.postcard-share-note{font-size:10px;color:#957d99;line-height:1.75;margin:12px 0}
.postcard-share-actions{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:20px 0 13px}
.postcard-url{font:12px/1.5 var(--body,Arial,sans-serif);border:1px solid #cdbacf;border-radius:8px;padding:10px;width:100%;color:#5c3e66;background:#fff}
@media(max-width:680px){
  .postcard-keepsake{grid-template-columns:minmax(0,1fr);padding:25px 21px;gap:30px;margin-top:23px;border-radius:22px}
  .postcard-preview{max-width:295px;transform:rotate(-1.5deg)}
  .postcard-copy{width:100%;max-width:360px;justify-self:center}
  .postcard-copy h3{font-size:34px}
  .postcard-palettes{gap:7px;margin-bottom:21px}
  .postcard-palette{padding:8px 9px;font-size:9px}
  .postcard-share-dialog{width:calc(100% - 26px);padding:39px 22px 23px;border-radius:21px}
  .postcard-share-body{grid-template-columns:minmax(0,1fr);gap:20px}
  .postcard-share-preview{max-width:230px;justify-self:center}
  .postcard-share-copy{padding:0}
  .postcard-share-copy h2{font-size:31px}
  .postcard-share-copy>.postcard-eyebrow{font-size:8px;margin-bottom:11px}
}
@media(max-width:360px){.postcard-keepsake{padding:20px 15px}.postcard-palette{font-size:8px;padding:7px 8px}.postcard-copy h3{font-size:31px}}
@media(prefers-reduced-motion:reduce){.postcard-button,.postcard-palette{transition:none}.postcard-button:hover{transform:none}}
html[data-motion=off] .postcard-button:hover{transform:none}