/* Polkodot's readable greeting cards and playful paper shapes. */
.wordmark{gap:7px;letter-spacing:-2px}
.wordmark .brand-mark{width:60px;height:60px;display:block}
.wordmark .brand-name{font:inherit;color:inherit;margin:0;letter-spacing:inherit}
footer .wordmark .brand-mark{width:47px;height:47px}
.hero-art{min-height:560px}
.hero-card{aspect-ratio:auto;border:10px solid var(--paper);padding-bottom:8px;overflow:hidden}
.hero-card>img{height:340px;object-position:50% 35%}
.hero-greeting{position:static;display:block;background:var(--paper);padding:15px 10px 10px;font:800 38px/1.12 var(--body);letter-spacing:-1px;text-align:center;color:var(--ink)}
.hero-card .card-signature{position:static;display:block;font-size:12px;letter-spacing:0;margin-top:5px}
.mini-card{padding:0;width:240px;height:345px;overflow:hidden;border-radius:15px}
.mini-card>img{width:100%;height:76%;object-fit:cover;object-position:50% 30%;display:block}
.mini-card>span{display:block;font:800 24px/1.15 var(--body);padding:10px;text-align:center;background:var(--teal);color:var(--paper);letter-spacing:0}
.art-seal{display:none}
.gallery{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px;align-items:start}
.template:nth-child(n){margin-top:0}
.template{--card-tint:#f3e7cf;--card-ink:#402c29}
.template[data-tone=teal]{--card-tint:#c9ddd5}
.template[data-tone=rose]{--card-tint:#eed5c9}
.template[data-tone=gold]{--card-tint:#e6bf78}
.template-picture{aspect-ratio:4/5;border:9px solid var(--paper);border-radius:22px;background:var(--card-tint)}
.template-picture>img{height:64%;object-fit:cover;object-position:50% 32%}
.template-title{position:absolute;inset:64% 0 0;height:36%;display:flex;align-items:center;justify-content:center;padding:12px 18px;font:800 38px/1.12 var(--body);text-align:center;letter-spacing:0;color:var(--card-ink);background:var(--card-tint);overflow-wrap:anywhere}
.template:nth-child(4n+2) .template-picture{border-radius:90px 90px 22px 22px}
.template:nth-child(4n+3) .template-picture{border-radius:22px 65px 22px 22px}
.template:hover .template-picture{transform:translateY(-4px)}
.template-footer{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:110px;padding:18px 14px;margin-top:15px;border:2px solid var(--teal);border-radius:22px;background:var(--teal);color:var(--paper);text-align:center;box-shadow:0 4px 0 #193f3b;transition:background .18s,transform .18s}
.template-footer strong{font-size:26px;line-height:1.2}
.template-footer small{font-size:19px;line-height:1.35;color:var(--paper)}
.template:hover .template-footer,.template:focus-visible .template-footer{background:var(--wine);border-color:var(--wine);transform:translateY(-2px)}
.template:active .template-footer{transform:translateY(3px);box-shadow:none}
.gallery[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr));max-width:920px;margin:auto}
.how-section{padding:80px 56px 100px;overflow:hidden}
.how-section ol{gap:0;margin-top:60px;align-items:stretch;max-width:1260px}
.how-section li{padding:46px 28px 48px;border-radius:40px;background:#285a54;color:#fffaf1;transform:rotate(-4deg);box-shadow:0 9px 0 #254e4930;position:relative}
.how-section li:nth-child(2){background:#edcfc2;color:#402c29;transform:rotate(3deg) translateY(14px);z-index:1;margin-left:-10px;margin-right:-10px}
.how-section li:nth-child(3){background:#e7bd70;color:#402c29;transform:rotate(-3deg)}
.how-section h3{font:800 33px/1.15 var(--body);letter-spacing:-.6px;margin-bottom:18px}
.how-section li p{font-size:23px;line-height:1.4}
.how-section li:before{content:'';display:block;width:24px;height:24px;border-radius:50%;background:currentColor;opacity:.55;margin:0 auto 26px;box-shadow:38px 0 0 currentColor,-38px 0 0 currentColor}
.upload-box{min-height:220px;padding:18px 12px}
.upload-box strong{font-size:23px;line-height:1.35}
.reference-use{margin-top:22px!important;border:1px solid var(--line)!important;border-radius:16px;padding:20px!important;background:var(--paper)}
.reference-use legend{font-size:24px}
.reference-use label{display:flex;align-items:flex-start;gap:12px;font-size:22px;padding:12px 0;cursor:pointer}
.reference-use input{width:23px;height:23px;accent-color:var(--teal);flex-shrink:0;margin-top:5px}
.message-choices{display:grid;gap:12px;margin:20px 0}
.message-choice{padding:20px 24px;text-align:left;min-height:76px;border:2px solid #a89780;border-radius:18px;background:var(--paper);font-size:25px;line-height:1.3;font-weight:800}
.message-choice[aria-pressed=true]{border-color:var(--teal);background:#e2ebe0;box-shadow:inset 5px 0 var(--teal)}
.message-choice[aria-pressed=true]:before{content:'✓ ';color:var(--teal)}
.suggestion-preview{background:#fffaf1;border-left:5px solid #c79a48;padding:22px;border-radius:0 20px 20px 0}
#chosen-message{font-size:29px;line-height:1.3;font-weight:800;color:var(--ink);margin-bottom:8px}
.suggestion-preview .field-hint{margin-bottom:0;font-size:18px}
.style-options{gap:18px}
.style-options .look-option{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0 0 18px;overflow:hidden;border-radius:20px;border:2px solid #a89780;font-size:25px;background:var(--paper);min-width:0}
.look-option>input{position:absolute;top:14px;left:14px;z-index:1;width:27px;height:27px;margin:0;box-shadow:0 0 0 5px var(--paper);border-radius:50%}
.look-option>img{width:100%;aspect-ratio:1;object-fit:cover;object-position:50% 30%;display:block}
.look-option>.look-name{padding:16px 15px 5px;font-size:25px;line-height:1.2;font-weight:800}
.look-option>small{font-size:18px;line-height:1.35;font-weight:400;padding:0 15px}
.style-options .look-option:has(:checked){border:3px solid var(--teal);background:#e2ebe0;padding-bottom:17px}
.style-options .look-option:has(:focus-visible){outline:4px solid var(--teal);outline-offset:4px}
.picture-frame .live-preview{border:0;background:var(--paper);isolation:isolate}
#preview-ground,#preview-backdrop{position:absolute;z-index:0;object-fit:cover}
.picture-frame .preview-art{position:absolute;inset:auto;z-index:1;width:auto;height:auto;opacity:1!important;mix-blend-mode:normal!important;object-fit:contain;object-position:center}
#message-panel{position:absolute;background:#fffaf1;z-index:2}
.picture-frame .preview-message{font-family:var(--body);font-weight:800;color:#402c29;line-height:1.12;z-index:3;letter-spacing:0;overflow:hidden}
.picture-frame .preview-message>span{line-height:1.12}
.picture-frame .card-signature{left:0;right:0;z-index:3;color:#402c29;letter-spacing:0;font-weight:800}
.live-preview:after{display:none}
.shape-stage{height:420px}
.field-hint,.preview-label,.optional{color:#59463f}
.category{font-weight:800}
body.extra-large .message-choice{font-size:29px}
body.extra-large .template-footer small{font-size:23px}
@media(min-width:701px) and (max-width:1050px){.gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-card>img{height:280px}.hero-greeting{font-size:31px}.hero-card .card-signature{font-size:10px}.mini-card{width:190px;height:300px}.mini-card>span{font-size:20px}.how-section{padding-left:30px;padding-right:30px}.how-section h3{font-size:29px}.how-section li{padding:38px 18px}.how-section li p{font-size:21px}}
@media(max-width:700px){
  .shape-options{grid-template-columns:1fr;gap:10px}.shape-option{display:grid;grid-template-columns:46px 1fr auto;min-height:76px;gap:12px;padding:12px 15px;text-align:left;font-size:23px}.shape-icon{margin:0 auto!important}
  .wordmark .brand-mark{width:44px;height:44px}.wordmark{gap:3px;font-size:35px}
  .hero-art{min-height:485px;padding-left:65px}.hero-card>img{height:260px}.hero-greeting{font-size:29px;padding:12px 3px 5px}.hero-card .card-signature{font-size:9px;line-height:1.5}
  .mini-card{width:185px;height:280px;top:105px}.mini-card>span{font-size:20px}.art-seal{right:4px;bottom:70px}
  .gallery,.gallery[data-count="2"]{display:flex;gap:22px;max-width:none;margin:0}.template:nth-child(n){margin:0}.template-picture{aspect-ratio:4/5;border-width:8px}.template-footer{min-height:108px;margin-top:12px}.template-footer strong{font-size:26px}.template-footer small{font-size:19px}
  .how-section{padding:55px 28px 70px}.how-section ol{gap:24px;margin-top:42px;text-align:center}.how-section li{padding:40px 24px;border-radius:32px;transform:rotate(-3deg)}.how-section li:nth-child(2){margin:0;transform:rotate(3deg)}.how-section li:nth-child(3){transform:rotate(-2deg)}.how-section h3{font-size:33px}.how-section li p{font-size:23px}
  .upload-grid{grid-template-columns:1fr}.upload-box{min-height:170px}.upload-box strong{font-size:25px}.secondary-upload{min-height:155px}
  .style-options .look-option{flex-direction:column;align-items:stretch;gap:0}.look-option>.look-name{font-size:23px;padding:14px 12px 5px}.look-option>small{font-size:18px;padding:0 12px}.style-options{gap:12px}
  .shape-stage{height:330px}.message-choice{font-size:24px;padding:20px}#chosen-message{font-size:27px}.reference-use label{font-size:22px}
}
@media(max-width:360px){.wordmark .brand-mark{width:36px;height:36px}.wordmark{font-size:30px}.site-header{padding:18px 15px}.hero-art{padding-left:45px}.hero-card>img{height:225px}.hero-art{min-height:440px}.mini-card{width:160px;height:245px}.mini-card>span{font-size:18px}.hero-greeting{font-size:25px}.style-options{grid-template-columns:1fr 1fr}.look-option>.look-name{font-size:21px}.look-option>small{font-size:16px}.shape-stage{height:290px}.template-footer small{font-size:18px}}