.closet-demo{max-width:780px;margin:36px auto;padding:20px;border-radius:28px;border:1px solid #e3c58f;background:linear-gradient(145deg,#fae2cc,#fce8ef 48%,#ebbed2);box-shadow:0 14px 40px #be789122}.closet-demo *{box-sizing:border-box}.closet-demo button{font:inherit;cursor:pointer}.demo-top{display:flex;justify-content:space-between;align-items:center;gap:12px}.demo-top small{font-weight:700;letter-spacing:.12em;color:#a25976}.demo-top button,.demo-controls button{background:#fff9fc;border:1px solid #d6b575;border-radius:24px;color:#734455;padding:9px 15px}.demo-steps{display:grid;grid-template-columns:repeat(6,1fr);list-style:none;padding:12px 4px;margin:16px 0;background:#fff9fbd9;border-radius:24px;gap:2px}.demo-steps li{text-align:center;font-size:13px;font-weight:700;padding:10px 0;border-radius:18px}.demo-steps li.active{background:#f265aa;color:white;box-shadow:0 0 0 2px #edcb89}.demo-screen{height:540px;overflow:auto;position:relative;background:linear-gradient(#fffafc,#f9e5ed);border:2px solid white;border-radius:26px;padding:20px;text-align:center}.demo-screen h3{font-size:25px;margin:0 0 10px}.demo-screen p{font-size:15px;margin:8px 0;line-height:1.5}.demo-photo{width:100%;height:360px;object-fit:contain;border-radius:18px;display:block;margin:auto}.demo-main{display:block;border:2px solid #e4c17c;border-radius:30px;background:linear-gradient(110deg,#ff94c4,#e04491);color:white;font-weight:700;font-size:18px;padding:15px 24px;margin:16px auto 0;min-width:210px}.demo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px auto}.demo-grid figure{margin:0;background:white;border-radius:16px;padding:6px;border:2px solid transparent}.demo-grid figure.chosen{border-color:#f05c9d;box-shadow:0 0 0 3px #ffd5e7}.demo-grid img{width:100%;height:170px;object-fit:cover;border-radius:12px}.demo-grid figcaption{font-size:13px}.demo-summary{display:grid;grid-template-columns:1fr 1fr;gap:12px}.demo-summary>div{padding:10px;border:1px solid #eed2df;border-radius:18px;background:white}.demo-summary img,.demo-summary svg{width:100%;height:145px;object-fit:contain}.demo-crop{display:block;width:100%;height:330px}.demo-controls{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:16px}.demo-note{text-align:center;font-size:14px!important}.demo-progress{height:12px;background:#f0d4e0;border-radius:20px;overflow:hidden;margin:32px 0}.demo-progress span{display:block;height:100%;width:100%;background:linear-gradient(90deg,#f58ab9,#d8b779);animation:closet-progress 2s linear}.demo-saved{display:inline-block;border:1px solid #d6b575;background:#fff7e8;padding:8px 16px;border-radius:24px;font-size:14px}.demo-screen:focus{outline:none}@keyframes closet-progress{from{width:0}to{width:100%}}@media(max-width:650px){.closet-demo{padding:12px;margin:20px auto}.demo-screen{height:510px;padding:16px 10px}.demo-photo{height:335px}.demo-grid img{height:140px}.demo-steps li{font-size:12px}.demo-screen h3{font-size:22px}.demo-summary img,.demo-summary svg{height:125px}}@media(prefers-reduced-motion:reduce){.demo-progress span{animation:none}}
body{background:#faeaf0}header{max-width:560px;padding:12px 18px}header b{font-size:20px}header a{font-size:14px}main{max-width:560px;padding:0 12px 16px}.launch-guide{text-align:center;font-size:15px;margin:8px 0 12px}.closet-demo{position:relative;max-width:470px;width:100%;padding:0;margin:0 auto;aspect-ratio:870/1536;border-radius:20px;overflow:hidden;background:#f9dbe7}.app-home-image{display:block;width:100%;height:100%;object-fit:cover}.closet-hotspot{position:absolute;left:20.1%;top:88.4%;width:19.8%;height:10.8%;border:3px solid #ee54a0;border-radius:18px;background:#ffc4df22;box-shadow:0 0 0 5px #ffeff477;cursor:pointer}.closet-hotspot span{position:absolute;bottom:115%;left:50%;transform:translateX(-50%);white-space:nowrap;background:#b73971;color:white;padding:7px 10px;border-radius:12px;font-size:13px}.closet-hotspot.pressed{background:#f261ac99;box-shadow:0 0 0 8px #ff7ebb88}.app-overlay{position:absolute;inset:0;display:flex;flex-direction:column;padding:12px;background:linear-gradient(#fff4e8f5,#f3c8dbfa);overflow:hidden}.app-overlay[hidden],.closet-hotspot[hidden]{display:none}.demo-top{flex-shrink:0}.demo-steps{margin:10px 0;padding:6px 2px;flex-shrink:0}.demo-screen{height:auto;min-height:0;flex:1;padding:14px 10px}.demo-photo{height:clamp(210px,65vw,360px);max-height:65%;object-fit:contain}.demo-crop{height:clamp(200px,58vw,315px)}.demo-controls{margin-top:8px}.demo-note{font-size:12px!important;line-height:1.4;margin:8px 0}.demo-grid img{height:clamp(95px,24vw,145px)}.demo-summary img,.demo-summary svg{height:95px;max-height:none}.demo-screen h3{font-size:21px}.demo-screen p{font-size:14px}.demo-top small{font-size:12px}.demo-steps li{font-size:11px}.demo-screen .demo-summary p{font-size:12px}.app-overlay .demo-note{margin:4px 0}@media(max-width:650px){.closet-demo{padding:0;margin:0 auto}.demo-screen{height:auto}.demo-photo{height:65vw}.demo-controls button,.demo-top button{font-size:13px;padding:7px 13px}.demo-steps li{padding:7px 0}}

.pose-list-preview{display:block;width:100%;height:auto;border-radius:18px}.demo-screen:has(.pose-list-preview){padding:0}.demo-screen:has(.pose-list-preview)>h3{display:none}