.builder.steps{max-width:1120px;padding-block:4px calc(96px + env(safe-area-inset-bottom,0px));gap:14px}.steps-form{gap:14px;display:grid}.steps-preview{gap:10px;min-width:0;display:grid}.steps-form>section[data-step]:not(.on){display:none}.steps-form>section.enter{animation:.32s cubic-bezier(.2,.7,.2,1) both stepIn}@keyframes stepIn{0%{opacity:0;transform:translateY(10px)}}@media (prefers-reduced-motion:reduce){.steps-form>section.enter{animation:none}}@media (width<=599px){.hero:has(+.builder.steps){gap:4px;padding-block:18px 6px}.hero:has(+.builder.steps) h1{font-size:36px}.hero:has(+.builder.steps) .sub{font-size:17px}.hero:has(+.builder.steps) .deliv{font-size:13px}}.progress{align-items:flex-end;gap:6px;display:flex;position:relative}.progress button{border:0;border-top:3px solid var(--line);text-align:left;min-width:0;min-height:44px;font:inherit;color:var(--muted);cursor:pointer;-webkit-tap-highlight-color:transparent;background:0 0;flex:1;align-items:baseline;gap:6px;padding:7px 2px 0;font-size:13px;display:flex}.progress button .k{font-family:var(--display);font-size:17px;font-weight:600}.progress button .t{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.progress button[data-state=done]{border-color:var(--peach);color:var(--brown)}.progress button[data-state=current]{border-color:var(--brown);color:var(--ink);font-weight:600}.progress button:disabled{cursor:default}.progress button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}.progress .of{display:none}@media (width<=599px){.progress{padding-top:18px}.progress button:not([aria-current]) .t{display:none}.progress button[aria-current]{flex:3}.progress .of{color:var(--muted);font-size:12px;display:block;position:absolute;top:0;right:0}}.builder.steps :is(.step-h .n,.progress .k,.count,.size .p,.size .t,.sum,.qty output,.acct b,.recap .rv,.peek-t,.done .ref,.stage .dim),.pack :is(.pk-ref,.pk-sum){font-variant-numeric:lining-nums tabular-nums}.builder.steps .step-h .n,.builder.steps .progress .k{font-family:var(--sans);font-weight:500}.builder.steps .step-h .n{background:color-mix(in srgb, var(--peach) 28%, transparent);width:26px;height:26px;color:var(--brown);border-radius:50%;align-self:center;place-items:center;font-size:15px;display:inline-grid}.builder.steps .progress .k{font-size:13px}.builder.steps .done .ref{font-family:var(--sans);letter-spacing:.02em;font-size:28px;font-weight:500}.builder.steps [tabindex="-1"]:focus:not(:focus-visible),.builder.steps .step-h h2[tabindex="-1"]:focus{outline:none}.step-nav{z-index:5;padding:10px 20px calc(10px + env(safe-area-inset-bottom,0px));background:color-mix(in srgb, var(--paper) 92%, transparent);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);align-items:center;gap:10px;display:flex;position:fixed;bottom:0;left:0;right:0}.step-nav .cta{flex:1;min-height:50px}.step-nav .btn-ghost{min-width:88px;min-height:50px}.step-nav [hidden]{display:none}.builder.steps[data-at=pay] .step-nav{-webkit-backdrop-filter:none;background:0 0;border-top:0;margin-inline:0;padding-inline:0;position:static}.builder.steps.typing .step-nav{position:static}.builder.steps .qty button,.builder.steps .seg label,.builder.steps .drop .go,.builder.steps .btn-ghost{min-height:44px}.builder.steps .drop .go,.builder.steps .btn-ghost,.builder.steps .qty button{justify-content:center;align-items:center;display:inline-flex}.builder.steps .seg label{align-items:center;display:inline-flex}.builder.steps .qty button{min-width:44px}.peek{border:1px solid var(--line);background:var(--card);border-radius:6px;align-items:center;gap:12px;padding:8px 12px;display:none}.peek canvas{border-radius:50%;flex:none;width:52px;height:52px}.peek-t{color:var(--muted);min-width:0;font-size:13px;display:grid}.peek-t b{color:var(--ink);font-size:14px;font-weight:500}@media (width<=899px){.builder.steps .steps-preview .stage:not(.mini){aspect-ratio:auto;width:100%;min-width:0;height:clamp(240px,34svh,340px)}.builder.steps .steps-preview .stage:not(.mini) canvas.puzzle{width:auto;height:calc(var(--pz,.8) * 75% + 12%);transition:height .45s cubic-bezier(.2,.7,.2,1)}.builder.steps:not([data-at=frame]):not([data-at=photo]) .steps-preview .preview{display:none}.builder.steps:not([data-at=frame]):not([data-at=photo]) .peek{display:flex}.builder.steps .card-bar{display:none}}@media (width>=900px){.builder.steps{grid-template-columns:minmax(0,1fr) minmax(0,520px);align-items:start;gap:32px;padding-block:12px 64px}.builder.steps .progress{grid-column:1/-1}.steps-preview{position:sticky;top:16px}.step-nav{-webkit-backdrop-filter:none;background:0 0;border-top:0;margin-inline:0;padding-inline:0;position:static}}.recap{border:1px solid var(--line);border-radius:6px;display:grid;overflow:hidden}.rc{border:0;border-top:1px solid var(--line);min-height:48px;font:inherit;text-align:left;color:var(--ink);cursor:pointer;-webkit-tap-highlight-color:transparent;background:#fff;grid-template-columns:88px minmax(0,1fr) auto;align-items:baseline;gap:10px;padding:12px 14px;font-size:14px;display:grid}.rc:first-child{border-top:0}.rc:hover,.rc:focus-visible{background:var(--paper)}.rc .rl{color:var(--muted);font-size:13px}.rc .rv{overflow-wrap:anywhere;unicode-bidi:plaintext}.rc-edit{color:var(--brown);text-underline-offset:3px;font-size:13px;font-weight:500;text-decoration:underline}.cta.to-sum{background:var(--navy)}.builder.steps #done:not([hidden]){animation:.45s cubic-bezier(.2,.7,.2,1) both stepIn}@media (prefers-reduced-motion:reduce){.builder.steps #done:not([hidden]){animation:none}}canvas.confetti{z-index:120;pointer-events:none;width:100%;height:100%;position:fixed;inset:0}.builder.steps[data-at=frame] #stage canvas.puzzle{pointer-events:none}.builder.steps[data-at=frame] #stage .hint{display:none}
