:root{--ink:#18231f;--muted:#68736d;--cream:#f7f4ec;--paper:#fffdf8;--green:#174b3d;--mint:#dcebe1;--coral:#e96e4b;--line:#d8ded6;--shadow:0 12px 35px #193b2c18;--summary-reserve:112px}*,*:before,*:after{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-bottom:var(--summary-reserve)}body{margin:0;background:var(--cream);color:var(--ink);font-family:DM Sans,system-ui,sans-serif;padding-bottom:calc(var(--summary-reserve) + env(safe-area-inset-bottom))}button,input,select{font:inherit}button{cursor:pointer}a{color:inherit}.shell{width:min(100% - 32px,760px);margin:auto}.topbar{height:70px;display:flex;align-items:center;justify-content:space-between}.brand{text-decoration:none;font-weight:700;letter-spacing:-.04em}.brand b{display:inline-grid;place-items:center;background:var(--coral);color:#fff;border-radius:50%;width:30px;height:30px;margin-right:7px}.back{color:var(--muted);font-size:14px;text-decoration:none}.back:hover{text-decoration:underline}.intro{padding:24px 0 20px}.eyebrow,.step-label{color:var(--coral);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}.intro h1{font:700 clamp(38px,11vw,58px)/.98 Fraunces,Georgia,serif;letter-spacing:-.06em;margin:10px 0 14px}.intro p{color:var(--muted);line-height:1.5;margin:0;max-width:570px}.progress{display:flex;gap:7px;margin:24px 0 18px}.progress span{height:5px;flex:1;background:var(--line);border-radius:99px}.progress span.active{background:var(--coral)}.panel{background:var(--paper);border:1px solid var(--line);border-radius:24px;padding:20px;box-shadow:var(--shadow);margin-bottom:18px}.panel h2{font:700 31px/1.05 Fraunces,Georgia,serif;letter-spacing:-.05em;margin:8px 0}.hint{color:var(--muted);font-size:14px;line-height:1.5;margin:0 0 18px}.pet-types{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.type-button{min-height:76px;border:1px solid var(--line);border-radius:15px;background:#fff;color:var(--ink);font-weight:700}.type-button span{display:block;font-size:30px;margin-bottom:3px}.type-button:active{transform:scale(.98)}.type-button:focus-visible,.choice-card:focus-visible,.primary:focus-visible,.ghost:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #173dff;outline-offset:2px}.pet-list{display:grid;gap:12px;margin-top:18px}.pet-card{border:1px solid var(--line);border-radius:17px;padding:14px;background:#fff}.pet-head{display:flex;justify-content:space-between;align-items:center;gap:10px}.pet-title{font-weight:700}.remove{border:0;background:transparent;color:var(--muted);font-size:13px;text-decoration:underline;padding:8px 0}.remove:hover{color:var(--coral)}.field{display:block;margin-top:14px}.field span{display:block;color:var(--muted);font-size:12px;font-weight:700;margin-bottom:6px}.picker-help{display:block;color:var(--muted);font-size:11px;line-height:1.35;margin-top:7px}.field input,.field select{width:100%;min-height:52px;border:1px solid var(--line);border-radius:13px;background:var(--paper);padding:10px 12px;color:var(--ink)}.style-quick-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:12px}.style-chip{min-width:0;min-height:70px;padding:7px 4px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:10px;font-weight:700;line-height:1.1;text-align:center}.style-chip-art{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--mint);font-size:22px;line-height:1;box-shadow:inset 0 0 0 2px #fff}.style-chip.selected{border:2px solid var(--green);background:#edf5ee;box-shadow:0 2px 0 var(--green)}.style-chip.selected .style-chip-art{background:#f6c18f}.style-chip:active{transform:scale(.97)}.style-chip:focus-visible{outline:3px solid #173dff;outline-offset:2px}.preview-wrap{background:var(--green);border-radius:20px;padding:16px;color:#fff}.preview-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:12px}.preview-head b{font-size:13px}.preview{background:var(--paper);color:var(--ink);border:2px dashed #174b3d66;border-radius:18px;min-height:220px;padding:23px 16px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.preview-pets{display:flex;align-items:end;justify-content:center;gap:4px;min-height:90px}.preview-pet{display:inline-grid;place-items:end;width:92px;height:86px;filter:drop-shadow(0 5px 3px #193b2c22);animation:pet-in .22s ease-out}.preview-pet svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 2px 0 #fff8)}.preview-pet.style-black-cat svg,.preview-pet.style-black-pig svg{filter:saturate(.85)}@keyframes pet-in{0%{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:none}}.preview-pets{font-size:clamp(42px,13vw,65px);letter-spacing:-.13em;max-width:100%;overflow-wrap:anywhere;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}.preview-pet{display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:42%;padding:.08em;letter-spacing:0;font-size:1em;line-height:1;background:var(--mint);box-shadow:0 0 0 3px var(--paper),0 0 0 5px var(--green);transition:transform .18s ease,background .18s ease}.preview-pet[class*=style-labrador],.preview-pet[class*=style-golden],.preview-pet[class*=style-orange],.preview-pet[class*=style-pink],.preview-pet[class*=style-brown]{background:#f5c58f}.preview-pet[class*=style-german],.preview-pet[class*=style-black],.preview-pet[class*=style-tuxedo],.preview-pet[class*=style-black-pig]{background:#b8c0bb}.preview-pet[class*=style-white],.preview-pet[class*=style-domestic],.preview-pet[class*=style-mixed],.preview-pet[class*=style-gray],.preview-pet[class*=style-mini]{background:#eef0e8}.preview-pet[class*=style-calico],.preview-pet[class*=style-spotted],.preview-pet[class*=style-tabby]{background:#e7aa76}.preview-pet[class*=style-french],.preview-pet[class*=style-dachshund],.preview-pet[class*=style-corgi],.preview-pet[class*=style-pot-bellied]{background:#f0b2a0}.preview-pet[class*=style-siamese],.preview-pet[class*=style-persian],.preview-pet[class*=style-husky],.preview-pet[class*=style-poodle]{background:#c9d9e6}.preview-pet[class*=style-terrier],.preview-pet[class*=style-beagle],.preview-pet[class*=style-chihuahua],.preview-pet[class*=style-pit-bull]{background:#d7c298}.preview-pet[class*=style-betta],.preview-pet[class*=style-guppy]{background:#b9d9e8}.preview-pet[class*=style-tropical],.preview-pet[class*=style-koi]{background:#f4b2a3}.preview-pet:hover{transform:translateY(-3px) rotate(-3deg)}.preview strong{font:700 25px/1.02 Fraunces,Georgia,serif;margin-top:14px}.preview small{color:var(--coral);font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;margin-top:10px}.option-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.choice-card{min-height:48px;border:1px solid var(--line);border-radius:12px;background:#fff;text-align:left;padding:10px}.choice-card.selected{border-color:var(--green);background:var(--mint)}.choice-card b{display:block;font-size:14px}.choice-card small{color:var(--muted);font-size:11px}.proof{display:flex;gap:10px;align-items:flex-start;margin:18px 0;color:var(--muted);font-size:13px;line-height:1.4}.proof input{width:20px;height:20px;flex:0 0 auto;accent-color:var(--green)}.primary,.ghost{width:100%;min-height:52px;border:0;border-radius:999px;font-weight:700}.primary{background:var(--coral);color:#fff;box-shadow:0 5px #c84e32}.primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.ghost{background:transparent;color:var(--green);border:1px solid var(--green);margin-top:10px}.status{min-height:20px;color:var(--muted);font-size:13px;margin:12px 0 0}.sticky-summary{position:fixed;z-index:5;bottom:0;left:0;right:0;background:#fffdf8ee;border-top:1px solid var(--line);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);padding:10px max(16px,calc((100% - 760px)/2)) calc(10px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:12px}.summary-copy{min-width:0;flex:1}.summary-copy b,.summary-copy span{display:block}.summary-copy b{font-size:14px}.summary-copy span{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.summary-button{width:auto;min-width:145px;padding:0 18px}@media(min-width:700px){body{padding-bottom:30px}.topbar{height:82px}.intro{padding-top:42px}.panel{padding:28px}.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}.preview-wrap{position:static}.sticky-summary{position:static;background:transparent;border:0;padding:0;-webkit-backdrop-filter:none;backdrop-filter:none}.summary-button{display:none}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.type-button:active{transform:none}}.preview{position:relative;overflow:hidden;background:#eadfca;border:0;border-radius:28px;min-height:300px;padding:18px;box-shadow:inset 0 0 0 1px #fff8,inset 0 -12px 30px #a1683820}.preview:before,.preview:after{content:"";position:absolute;border-radius:50%;pointer-events:none}.preview:before{width:180px;height:180px;right:-78px;top:-78px;background:#e96e4b30}.preview:after{width:130px;height:130px;left:-70px;bottom:-60px;background:#174b3d18}.preview-pets{display:block;min-height:0;width:100%;max-width:none;overflow:visible}.sticker-proof{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;width:100%;min-height:260px;padding:18px 10px 12px;background:#fffaf0;border:3px solid var(--green);border-radius:48% 52% 46% 54%/15% 13% 17% 14%;box-shadow:0 7px #174b3d,0 12px 20px #193b2c20;transform:rotate(-1.5deg)}.sticker-eyebrow{color:var(--coral);font-size:9px;font-weight:800;letter-spacing:.16em;margin-bottom:5px}.sticker-message{max-width:92%;color:var(--green);font:700 clamp(24px,7vw,35px)/.95 Fraunces,Georgia,serif;letter-spacing:-.055em;text-align:center;text-wrap:balance}.preview-pet-group{display:flex;align-items:end;justify-content:center;width:100%;min-height:116px;margin:5px 0 0}.preview-pet{position:relative;display:inline-grid;place-items:end;width:92px;height:102px;margin-left:calc(var(--pet-index) * -10px);filter:drop-shadow(0 5px 3px #193b2c22);animation:pet-in .22s ease-out;z-index:calc(10 - var(--pet-index));transform:rotate(calc((var(--pet-index) - 1) * 3deg)) translateY(calc(var(--pet-index) * 2px))}.preview-pet:first-child{margin-left:0}.preview-pet svg{display:block;width:100%;height:100%;overflow:visible}.pet-name{position:absolute;bottom:0;left:50%;z-index:3;max-width:92px;padding:3px 8px;border:2px solid var(--green);border-radius:999px;background:#fffaf0;color:var(--green);font-size:10px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transform:translate(-50%) rotate(calc((1 - var(--pet-index)) * 2deg))}.sticker-brand{margin-top:auto;color:var(--muted);font-size:9px;font-weight:700;letter-spacing:.04em;text-align:center}.empty-paw{display:grid;place-items:center;width:68px;height:68px;margin:22px auto 8px;border:2px dashed var(--coral);border-radius:50%;color:var(--coral);font-size:28px}.empty-preview-copy{display:block;max-width:190px;margin:auto;color:var(--muted);font-size:12px;line-height:1.35;text-align:center}@keyframes pet-in{0%{opacity:0;transform:translateY(7px) scale(.94)}to{opacity:1;transform:rotate(calc((var(--pet-index) - 1) * 3deg)) translateY(calc(var(--pet-index) * 2px))}}@media(max-width:430px){.preview-pet{width:76px;height:90px}.preview-pet-group{min-height:105px}.sticker-proof{min-height:250px}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@media(max-width:380px){.shell{width:min(100% - 24px,760px)}.panel{padding:16px;border-radius:20px}.pet-types{gap:6px}.type-button{min-height:82px}.style-quick-pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.style-chip{min-height:64px;flex-direction:row;justify-content:flex-start;padding:8px 10px;text-align:left;font-size:11px}.style-chip-art{flex:0 0 34px}.pet-card{padding:12px}}@media(min-width:381px)and (max-width:699px){.style-quick-pick{gap:8px}.style-chip{min-height:76px;font-size:10px}}@media(max-width:699px){:root{--summary-reserve:124px}body{padding-bottom:calc(var(--summary-reserve) + env(safe-area-inset-bottom))}#step-style{scroll-margin-bottom:var(--summary-reserve)}.sticky-summary{min-height:76px;padding-bottom:max(10px,env(safe-area-inset-bottom))}}@media(min-width:700px){html{scroll-padding-bottom:0}body{padding-bottom:30px}}.summary-label{color:var(--coral);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}.summary-copy b{font-size:18px;line-height:1}.summary-copy span:last-child{margin-top:3px}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
