:root{--serif:"Playfair Display",serif;--body-font:"Be Vietnam Pro",sans-serif;--name-font:"Dancing Script",cursive;--fs-h1:clamp(2rem,5vw + 1rem,4.2rem);--fs-h2:clamp(1.6rem,3vw + 1rem,2.8rem);--fs-label:.85rem;--fs-body:1rem;--space-1:8px;--space-2:16px;--space-3:28px;--space-4:48px;--ease:cubic-bezier(.16,1,.3,1)}
body,input,textarea,button{font-family:var(--body-font)}
a{min-width:44px}
h1{font-size:var(--fs-h1)}h2{font-size:var(--fs-h2)}h1 .script,h2 .script,h3 .script{font-family:var(--serif);font-style:italic}
:focus-visible{outline:2px solid var(--rose,#f58ab8);outline-offset:3px}
button,summary,.actions a,.palette-sample,.letter-actions a,.to-top,.wordmark,.hero-jumps a,.summary-qr a,.skip,.fresh,.link{min-height:44px}
.skip{position:fixed;top:-100px;left:var(--space-2);z-index:40;display:flex;align-items:center;padding:8px 16px;background:#fff4ec;color:#4c2939}.skip:focus{top:var(--space-2)}
.progress-words{display:flex;flex-wrap:wrap;gap:var(--space-2);list-style:none;padding:0;margin:var(--space-3) 0;color:var(--dim);font-size:var(--fs-label)}
.progress-words a{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:inherit;text-decoration:none}.progress-words i{font:italic 500 1.2rem var(--serif)}.progress-words .is-done,.progress-words [aria-current=step]{color:var(--gold)}
.step-state{display:none}
@media(max-width:760px){
  .hero-links .progress-words{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:16px 0 0;color:var(--soft)}
  .progress-words li{min-width:0}
  .progress-words a{display:flex;gap:8px;min-height:58px;width:100%;border-bottom:1px solid var(--line);font-size:var(--fs-label);transition:color 150ms ease,transform 150ms ease}
  .progress-words a:active{transform:translateY(1px)}
  .progress-words i{flex:none;font-size:1.2rem;color:var(--dim)}
  .step-copy{display:grid;gap:3px}.step-label{font-weight:500}.step-state{display:block;font-size:.75rem;line-height:1.3;color:var(--soft)}
  .progress-words .is-done i{color:var(--accent)}
  .progress-words [aria-current=step]{border-color:var(--accent);color:var(--cream)}
  .progress-words [aria-current=step] i,.progress-words [aria-current=step] .step-state{color:var(--accent)}
}
.poster-name{position:fixed;z-index:3;left:50%;top:40%;transform:translateX(-50%);max-width:80vw;margin:0;font:700 clamp(1.8rem,4vw,3rem) var(--name-font);color:#fff4ec;text-shadow:0 2px 10px #462637;pointer-events:none;transition:opacity .3s}.stage-ready .poster-name{opacity:0}
.ink-live span{display:inline-block}.ink-live .is-new{animation:ink-write .35s var(--ease) both}@keyframes ink-write{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}
.letter-stack{isolation:isolate;margin-bottom:16px}.letter-stack:after{content:"";position:absolute;inset:0;z-index:-1;background:#ecd4d0;transform:translate(8px,10px) rotate(1.2deg);border-radius:14px;box-shadow:4px 6px 0 #ceacba}
.gets{counter-reset:g;list-style:none;max-width:680px;padding:0;margin:var(--space-3) auto var(--space-4);text-align:left}.gets li{display:grid;grid-template-columns:3ch 1fr;gap:var(--space-2);padding:14px 0;border-top:1px solid var(--line)}.gets li:before{content:counter(g,decimal-leading-zero);counter-increment:g;font:italic 500 1.2rem var(--serif);color:var(--rose)}
.device-art img[data-device=phone]{border:10px solid #120914;border-radius:34px;box-shadow:0 24px 48px #0006;overflow:hidden}.device-art img[data-device=desktop]{border:1px solid var(--line)}
.side-summary{display:none}.side-summary h3{margin:0 0 var(--space-2);font:600 1.2rem var(--serif)}.side-summary p{overflow-wrap:anywhere}.side-summary .name{font:700 1.8rem var(--name-font);color:var(--rose)}
@media(min-width:1100px){.personalize-wrap{display:grid;grid-template-columns:minmax(0,1fr) 240px;gap:var(--space-3);max-width:1200px;padding-inline:24px;margin:auto}.personalize-wrap .block{padding-inline:0}.side-summary{display:block;position:sticky;top:96px;align-self:start;padding:var(--space-3) 0;border-block:1px solid var(--line)}}
@supports(interpolate-size:allow-keywords){:root{interpolate-size:allow-keywords}details::details-content{height:0;overflow:clip;transition:height .25s var(--ease),content-visibility .25s allow-discrete}details[open]::details-content{height:auto}}
@media(max-width:760px){.palette-strip{display:grid;grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:100%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:11%;padding-inline:11%;padding-bottom:12px}.palette-strip .palette-option{display:block;scroll-snap-align:center;min-width:0;white-space:normal;text-align:left;padding:0 0 12px;background:transparent;border-radius:0;border:0;border-bottom:1px solid var(--line)}.palette-strip .swatch{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:12px;object-fit:cover;margin:0 0 10px}.palette-strip [aria-pressed=true]{border-color:var(--gold);color:var(--gold)}}
.receipt{background:#fff4ec;color:#4c2939;border:0;border-radius:14px;box-shadow:0 20px 60px #0007;padding-top:56px}.receipt .ref{font-family:monospace;letter-spacing:.06em;color:#624352}.receipt .note,.receipt .pay-close,.receipt .row dt,.receipt .fresh,.receipt .copy,.receipt .channels a{color:#624352}.receipt .row{border-color:#ce9aad}.receipt .amount,.receipt .review-total{font-family:var(--serif);color:#4c2939}.receipt .btn{color:#fff4ec;background:#60334e}.receipt .btn--ghost{background:transparent;color:#4c2939;border-color:#ce9aad}.receipt .paysteps{color:#624352}.receipt .paysteps li.is-on{color:#4c2939;border-color:#a6547a}.receipt .review-content{border-color:#ce9aad}
.preorder-checks{padding-left:20px;text-align:left;line-height:1.5}.preorder-checks button{border:0;padding:8px 0;background:transparent;text-align:left;text-decoration:underline;text-underline-offset:4px;color:inherit}.preorder-checks [data-blocking=true]{font-weight:600;color:#852c50}
.studio .field--title input{font-family:var(--serif);font-size:1.15rem}.studio .pager{gap:3px;flex:1;min-width:0}.studio .pager button{display:grid;align-content:center;gap:2px;flex:1;width:auto;min-width:44px;height:62px;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:4px 1px}.studio .pager i{font:italic 500 1.3rem var(--serif)}.studio .pager small{font-size:.6rem;white-space:nowrap;min-height:1em}.studio .pager [aria-selected=true]{color:var(--gold);border-color:var(--gold);background:transparent}.studio .pager-row{flex-wrap:wrap}.studio .grip{height:44px;flex:none;margin:0;padding:0;border:0;background:transparent;color:var(--soft);font-size:.72rem;cursor:grab}.studio .grip:before{display:none}.studio.is-dragging .sheet{transition:none}
.insert-highlight{color:#852c50;background:#ffe1ed;padding:10px 12px;border-radius:8px;font-size:.85rem;overflow-wrap:anywhere}.preview-devices{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:7;display:flex;gap:8px;padding:4px 12px;background:#241329;border-radius:12px}.preview-devices button{border:0;background:none;color:#fff4ec;padding:0 10px}.preview-devices [aria-pressed=true]{color:var(--gold)}.studio .card{transition:width .3s var(--ease),height .3s var(--ease),left .3s var(--ease),top .3s var(--ease)}.studio.is-full .card[data-device=phone]{width:min(390px,100vw);height:min(844px,calc(100dvh - 80px));left:50%;top:50%;transform:translate(-50%,-50%)}.studio.is-full .card[data-device=desktop]{width:min(1280px,100vw);height:min(820px,calc(100dvh - 80px));left:50%;top:50%;transform:translate(-50%,-50%)}
.load-progress{display:block;width:180px;max-width:80%;height:2px;margin:12px auto;border:0;accent-color:var(--rose)}.load-progress::-webkit-progress-bar{background:#ffffff30}.load-progress::-webkit-progress-value{background:var(--rose)}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.ink-live .is-new{clip-path:none}}
.motion-reduced *,.motion-reduced *::before,.motion-reduced *::after{animation:none!important;transition:none!important}.motion-reduced .ink-live .is-new{clip-path:none}
.block a,footer a,.bar a{display:inline-flex;align-items:center;min-height:44px}
.studio.is-full .card[data-device=phone]{width:min(390px,100vw,calc((100dvh - 80px)*.4621));height:auto;aspect-ratio:390/844}
.studio.is-full .card[data-device=desktop]{width:min(1280px,100vw,calc((100dvh - 80px)*1.56));height:auto;aspect-ratio:1280/820}
.ready-page{margin:0;background:#241329;color:#fff4ec;font:400 1rem/1.6 var(--body-font);padding:var(--space-4) var(--space-2)}.ready-paper{max-width:640px;margin:auto;padding:clamp(24px,5vw,48px);background:#fff4ec;color:#4c2939;border-radius:14px}.ready-paper h1{font-family:var(--serif);font-size:var(--fs-h2);line-height:1.2}.ready-paper .name{font:700 2rem var(--name-font)}.ready-paper canvas{display:block;width:min(320px,100%);height:auto;margin:28px auto;background:#fff}.ready-paper a{color:#60334e;display:inline-flex;align-items:center;min-height:44px}.ready-paper button{min-height:44px;padding:10px 16px;background:#60334e;color:#fff4ec;border:0;border-radius:12px;cursor:pointer}.ready-paper input,.ready-paper textarea{display:block;width:100%;box-sizing:border-box;padding:12px;margin:8px 0 20px;background:#ffffff70;border:1px solid #ce9aad;border-radius:8px;color:#4c2939;font:inherit}.ready-actions{display:flex;flex-wrap:wrap;gap:12px}.ready-paper hr{border:0;border-top:1px solid #ce9aad;margin:28px 0}
.suggestion-wrap{position:relative}.insertion-mirror{position:absolute;inset:0;overflow:hidden;box-sizing:border-box;color:transparent;pointer-events:none;overflow-wrap:break-word;border-color:transparent}.insertion-mirror mark{color:#4c2939;background:#ffe1ed;border-radius:2px}
.letter-pages button,.recipient-choice,.more,.detail-close,.copy{min-width:44px}.detail-dialog a,.create-guide a,.buybar a{display:inline-flex;align-items:center;min-height:44px}
.studio :is(input,textarea):focus-visible,.name-field input:focus-visible{outline:2px solid var(--rose);outline-offset:3px}
.letter-outgoing{pointer-events:none}
.receipt .review-content p,.receipt .soon-note,.receipt .paysteps li.is-done{color:#624352}.receipt .review-content h3{font-family:var(--serif)}.receipt .review-content .review-total{color:#4c2939}.receipt #payTo{font:700 1em var(--name-font);color:#60334e}
.letter-sign,.gift-summary .summary-sign{font-family:var(--serif);font-style:italic}.step-art--name>span{font-family:var(--body-font)}.step-art--name [data-recipient]{font-family:var(--name-font)}
.rail a{min-width:44px;min-height:44px}.preview-devices button{min-width:44px}
html:has(.motion-reduced){scroll-behavior:auto!important}

/* Buttons feel the same everywhere: no wait for a double tap, a quick press that settles back with a small spring, hover only with a real pointer */
:root{--press-in:70ms;--press-out:360ms;--spring:cubic-bezier(.3,1.5,.5,1)}
button,summary,a.btn,.palette-option,.detail-card{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button,a.btn,summary{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
:focus:not(:focus-visible){outline:none}
.btn,.recipient-choice,.palette-option,.text-action,.wish-suggestions button,.letter-controls button,.letter-pages button,.detail-card,.detail-close,.guide-steps button,.replay,summary{
  transition:background-color var(--tap,150ms) ease,border-color var(--tap,150ms) ease,color var(--tap,150ms) ease,opacity var(--tap,150ms) ease,box-shadow var(--tap,150ms) ease,scale var(--press-out) var(--spring)}
.btn:active,.recipient-choice:active,.palette-option:active,.text-action:active,.wish-suggestions button:active,.letter-controls button:active,.letter-pages button:active,.detail-card:active,.detail-close:active,.guide-steps button:active,.replay:active,summary:active{
  transform:none;scale:.97;transition-duration:var(--tap,150ms),var(--tap,150ms),var(--tap,150ms),var(--tap,150ms),var(--tap,150ms),var(--press-in);transition-timing-function:ease,ease,ease,ease,ease,ease-out}
.btn:active{scale:.96}
.palette-option:active,.detail-card:active{scale:.985}
.btn--main:active{filter:brightness(.94)}
/* a choice that has just been made settles in */
.recipient-choice[aria-pressed="true"],.palette-option[aria-pressed="true"]{animation:choice-settle 320ms var(--spring)}
@keyframes choice-settle{from{scale:.95}to{scale:1}}
button:disabled,[aria-disabled="true"]{cursor:not-allowed}
button:disabled:active,.btn[aria-disabled="true"]:active{scale:1;filter:none}
[data-state="busy"]{cursor:progress}
@media(prefers-reduced-motion:reduce){.recipient-choice[aria-pressed="true"],.palette-option[aria-pressed="true"]{animation:none}.btn:active,.recipient-choice:active,.palette-option:active,.text-action:active,.detail-card:active,summary:active{scale:1}}