.archive-light{position:absolute;inset:-30px;pointer-events:none;background:radial-gradient(ellipse at 53% 32%,#fff9 0,transparent 48%);will-change:transform}
.archive-type{pointer-events:none;top:32%;max-width:25vw}.archive-type h2{font-size:clamp(58px,7vw,124px)}
.dress-intro{display:block;margin-top:32px;max-width:155px;font:500 8px/1.8 ui-monospace,monospace;letter-spacing:.24em;color:#738086}
.portrait-frame{left:50%;bottom:72px;width:min(51svh,43vw,580px);perspective:1000px;filter:drop-shadow(18px 24px 28px #2b3b401c)}
.portrait-body-group,.portrait-head-group,.sticker-layer{position:absolute;inset:0;pointer-events:none}
.portrait-body-group{z-index:1}.portrait-head-group{z-index:2;transform-origin:48% 66.8%;will-change:transform;transform-style:flat}
.portrait-frame .portrait-body{mask-image:none;-webkit-mask-image:none;clip-path:polygon(0 48%,30% 48%,30.5% 57%,34% 63.5%,40% 66.1%,48% 66.8%,57% 64.9%,63% 60.6%,66.9% 52%,100% 52%,100% 100%,0 100%)}
.portrait-head-image{clip-path:polygon(0 0,100% 0,100% 52.3%,66.9% 52.3%,63% 60.9%,57% 65.2%,48% 67.1%,40% 66.4%,34% 63.8%,30.5% 57.3%,30% 48.3%,0 48.3%)}
.sticker-layer{z-index:3}
.dress-sticker{position:absolute;pointer-events:auto;cursor:grab;touch-action:none;transform-origin:50% 50%;outline:0;user-select:none;-webkit-user-select:none}
.dress-sticker::after{content:"";position:absolute;inset:-6px;border:1px solid transparent;border-radius:3px;pointer-events:none}
.dress-sticker.selected::after,.dress-sticker:focus-visible::after{border-color:#3d575b99;background:#fff03}
.portrait-frame .dress-sticker img{position:relative;inset:auto;width:100%;height:auto;pointer-events:none;display:block;filter:drop-shadow(0 2px 2px #00000018)}
.dress-sticker.dragging{cursor:grabbing;z-index:999!important;opacity:.92}
.sticker-handle{position:absolute;display:none;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid #798c8f;border-radius:50%;background:#f8faf7;color:#2f454a;box-shadow:0 3px 12px #283e4020;cursor:grab;touch-action:none;padding:0;font:18px/1 sans-serif;z-index:4}
.selected .sticker-handle{display:flex}.sticker-handle[data-handle="rotate"]{left:calc(50% - 14px);top:-39px}.sticker-handle[data-handle="scale"]{right:-19px;bottom:-19px;cursor:nwse-resize}
.sticker-handle[data-handle="rotate"]::after{content:"";position:absolute;left:50%;top:27px;width:1px;height:7px;background:#798c8f}
.dress-tray{position:absolute;right:6%;top:20%;bottom:160px;width:145px;z-index:8;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#a4b0b0 transparent;padding:5px 10px 10px;text-align:center}
.dress-eyebrow{font:500 8px/1.5 ui-monospace,monospace;letter-spacing:.14em;color:#50636a;margin-bottom:12px}.dress-eyebrow span{color:#849197;white-space:nowrap}
.dress-presets{display:grid;grid-template-columns:1fr;gap:7px}.dress-preset{position:relative;appearance:none;display:grid;place-items:center;width:100%;min-height:65px;border:0;background:transparent;border-bottom:1px solid #3e51541a;padding:11px;cursor:pointer;border-radius:0;touch-action:pan-y}
.dress-preset img{display:block;max-width:88px;max-height:58px;object-fit:contain;filter:drop-shadow(0 4px 4px #29413c1c);pointer-events:none}
.dress-preset:focus-visible,.dress-upload:focus-visible{outline:1px solid #4f686d;outline-offset:2px}
@media(hover:hover){.dress-preset:hover img{animation:accessoryJelly .75s both}}
@keyframes accessoryJelly{0%,100%{transform:rotate(0) scale(1)}20%{transform:rotate(-12deg) scale(.92,1.08)}40%{transform:rotate(9deg) scale(1.08,.94)}60%{transform:rotate(-5deg) scale(.97,1.03)}80%{transform:rotate(3deg)}}
.dress-upload{display:flex;flex-direction:column;align-items:center;gap:3px;width:100%;padding:12px 0 5px;border:0;background:transparent;color:#52676c;cursor:pointer}.dress-upload>span{font:300 30px/1 system-ui}.dress-upload small{font:500 7px/1.5 ui-monospace,monospace;letter-spacing:.13em}.dress-help{font:400 9px/1.8 system-ui,sans-serif;color:#77878c;margin:12px -4px 0}
.dress-controls{position:absolute;z-index:12;right:6%;bottom:76px;width:145px;padding:12px 8px;background:#f4f6f1e8;border:1px solid #768b8a30;border-radius:3px;box-shadow:0 7px 25px #39514b0b;backdrop-filter:blur(12px)}
.dress-controls[hidden]{display:none}.dress-controls label{display:flex;align-items:center;gap:9px;font:500 8px/1 ui-monospace,monospace;letter-spacing:.1em;margin-bottom:13px}.dress-controls input{width:85px;min-width:0;accent-color:#516b69;cursor:pointer;height:14px}.dress-controls button{display:block;margin:0 0 0 auto;background:none;border:0;color:#4b6264;font:600 8px/1.4 ui-monospace,monospace;letter-spacing:.15em;cursor:pointer;padding:3px}
.dress-tools{position:absolute;left:50%;bottom:78px;z-index:10;transform:translateX(-50%);display:flex;align-items:center;gap:25px}
.dress-tools button{color:#52696a;border:0;background:#f2f5f0cc;backdrop-filter:blur(8px);cursor:pointer;padding:9px 12px;border-radius:30px;font:400 22px/1 Georgia,serif;display:flex;align-items:center;gap:6px}.dress-tools span{font:500 7px/1 ui-monospace,monospace;letter-spacing:.12em}.dress-tools button:disabled{opacity:.3;cursor:default}
#dressTrash{min-width:88px;min-height:44px;transition:background .2s,color .2s,transform .2s}#dressTrash svg{width:20px;height:24px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}.trash-lid{transform-origin:3px 7px;transition:transform .2s}
#dressTrash.over{background:#854c4c;color:#fff;transform:scale(1.12)}#dressTrash.over .trash-lid{transform:rotate(-22deg)}
.dress-status{position:absolute;bottom:130px;left:50%;transform:translateX(-50%);z-index:12;color:#4e6569;font:400 10px/1.5 system-ui;text-align:center;max-width:60vw;pointer-events:none;margin:0;background:#eff3efdc;border-radius:3px;padding:4px 10px}.dress-status:empty{display:none}
.archive-bottom{bottom:23px;padding-left:78px;font-size:7px}.archive-bottom>span{max-width:40vw}
.in-archive .rain-control{bottom:max(21px,env(safe-area-inset-bottom));left:clamp(24px,3.4vw,62px);font-size:9px;z-index:25;filter:drop-shadow(0 3px 8px #24373924)}
@media(max-width:720px){
 .archive-type{top:16%;left:7%;max-width:70vw}.archive-type h2{font-size:65px}.archive-type p{font-size:13px;margin-top:10px}.dress-intro{font-size:6px;margin-top:13px;max-width:none}
 .portrait-frame{left:41%;bottom:83px;width:min(76vw,53svh)}
 .dress-tray{right:10px;top:27%;bottom:175px;width:77px;padding:3px 5px}.dress-eyebrow{font-size:6px;letter-spacing:.05em}.dress-presets{gap:2px}.dress-preset{min-height:55px;padding:9px 4px}.dress-preset img{max-width:58px;max-height:43px}.dress-upload{padding-top:10px}.dress-upload small{font-size:5px}.dress-help{font-size:7px;line-height:1.7;margin-top:9px}
 .dress-controls{bottom:74px;right:10px;width:115px;padding:10px 7px}.dress-controls label{font-size:7px;gap:6px;margin-bottom:10px}.dress-controls input{width:67px}
 .dress-tools{left:39%;bottom:76px;gap:9px}.dress-tools button{padding:8px;gap:4px}.dress-tools span{font-size:6px}#dressTrash{min-width:70px}.dress-status{bottom:126px;left:40%;max-width:65vw;font-size:9px}
 .archive-bottom{left:18px;right:18px;bottom:20px;padding-left:64px;font-size:6px;gap:8px}.archive-bottom>span{max-width:30vw}.archive-back{max-width:115px}
 .in-archive .rain-control{left:20px;bottom:max(20px,env(safe-area-inset-bottom));font-size:8px}
}
@media(max-height:620px) and (min-width:721px){.dress-tray{top:15%;bottom:150px}.dress-presets{grid-template-columns:1fr 1fr}.dress-preset{min-height:50px;padding:7px}.dress-preset img{max-width:48px;max-height:36px}.dress-help{display:none}.portrait-frame{width:48svh}}
@media(prefers-reduced-motion:reduce){.dress-preset:hover img{animation:none}.portrait-head-group,.archive-light{will-change:auto}}
