.dress-workbench{display:grid;grid-template-columns:.8fr 1.35fr;align-items:start;gap:40px}
.dress-stage{position:sticky;top:20px;text-align:center;background:var(--white,#fff);border-radius:var(--radius);padding:20px 20px 16px}
.person-switch{display:flex;justify-content:center;gap:8px;margin-bottom:12px}
.person-switch button{min-width:100px;min-height:46px;border:1px solid #a8bad4;border-radius:12px;background:var(--sky);font:850 17px "Nunito Sans",sans-serif;color:var(--ink)}
.person-switch [aria-pressed=true]{background:var(--violet);color:#fff;border-color:var(--violet)}
/* Scale the person and every registered worn plate as one 578 by 1494 canvas. */
.dress-person{position:relative;width:147px;height:380px;max-width:100%;margin:0 auto}
.person-base{display:block;width:100%;height:100%;object-fit:fill}.person-base[hidden]{display:none}
/* Every worn plate is registered on the full actor canvas, with native contact contours. */
.dress-layer,.dress-occlusion{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;pointer-events:none;max-width:none}
.dress-layer.head{z-index:6}.dress-layer.top{z-index:4}.dress-layer.bottom{z-index:3}.dress-layer.feet{z-index:2}.dress-layer.extra{z-index:5}.dress-layer.full-actor{z-index:1}.dress-occlusion{z-index:4}
.dress-description{font-size:15px;font-weight:700;line-height:1.5;margin:12px auto 0;max-width:34ch;min-height:45px}
.dress-stage .plain-button{margin:10px auto 0;font-size:13px}
.dress-help{font-size:15px;line-height:1.5;max-width:48ch;margin:0 0 22px}
.clothing-groups{display:grid;gap:20px}.clothing-group{border:0;padding:0;margin:0;min-width:0}
.clothing-group legend{font-size:18px;font-weight:850;margin-bottom:10px}
.clothing-choices{display:flex;flex-wrap:wrap;gap:10px}
.clothing-choice{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:108px;min-width:88px;flex:1 1 88px;max-width:130px;padding:8px;border:2px solid transparent;border-radius:12px;background:#fff;color:var(--ink);font:850 14px/1.3 "Nunito Sans",sans-serif;transition:transform 160ms var(--ease)}
.clothing-choice img{display:block;width:62px;height:66px;object-fit:contain}
.clothing-choice small{font-size:12px;font-weight:650;color:var(--muted);line-height:1.3}
.clothing-choice[aria-pressed=true]{border-color:var(--violet-deep);background:#e9e6fa}
.clothing-choice[aria-pressed=true] .clothing-selected{visibility:visible}
.clothing-selected{font-size:11px;font-weight:850;color:var(--violet-deep);visibility:hidden}
.clothing-choice:disabled{cursor:default}.clothing-choice:active:not(:disabled){transform:scale(.97)}
.clothing-choice:focus-visible,.person-switch button:focus-visible{outline:3px solid var(--violet-deep);outline-offset:3px;transform:none;transition:none}
.dress-app .lesson-feedback.success{background:#e0f1e8}
.dress-app .lesson-task h2:focus{outline:0}.dress-app .lesson-task h2:focus-visible{outline:3px solid var(--violet-deep);outline-offset:4px}
.dress-app .lesson-feedback,.dress-app .lesson-task{scroll-margin-top:24px}
.dress-app .lesson-task{margin-block:20px}.dress-app .lesson-task h2{font-size:28px}.dress-app .lesson-toolbar{margin-top:20px}
@media(hover:hover) and (pointer:fine){.clothing-choice:hover:not(:disabled){border-color:var(--violet);transform:translateY(-2px)}.person-switch button:hover:not([aria-pressed=true]){background:#e9e6fa}}
@media(max-width:1050px){.dress-workbench{gap:24px;grid-template-columns:.8fr 1.1fr}.dress-person{width:139px;height:360px}.clothing-choice{min-width:78px;flex-basis:78px;font-size:13px}}
/* The doll stays visible when the wardrobe scrolls. Action buttons remain in flow. */
@media(max-width:760px){
 .lesson-main:has(.dress-app){padding-top:8px}.dress-app{padding:14px 16px}.dress-app .lesson-heading h1{margin-block:8px;font-size:29px}.dress-app .lesson-toolbar{margin-top:12px;gap:0 16px}.dress-app .lesson-levels span{display:none}.dress-app .lesson-toolbar>.plain-button{font-size:13px;min-height:44px}.dress-app .lesson-task{margin-block:12px;padding-top:12px}.dress-app .round-count{margin-bottom:6px}.dress-app .lesson-task h2{font-size:23px}
 .dress-workbench{grid-template-columns:1fr;gap:18px}
 .dress-stage{position:sticky;top:8px;z-index:4;display:grid;grid-template-columns:105px minmax(0,1fr);gap:6px 12px;align-items:center;padding:12px}
 .dress-person{grid-column:1;grid-row:1/4;width:85px;height:220px}
 .person-switch{grid-column:2;grid-row:1;display:grid;grid-template-columns:1fr 1fr;margin:0;gap:5px}
 .person-switch button{font-size:14px;min-height:44px;min-width:0;width:100%}
 .dress-description{grid-column:2;grid-row:2;margin:0;font-size:13px;text-align:left;min-height:0}
 .dress-stage .plain-button{grid-column:2;grid-row:3;margin:0;font-size:12px;text-align:left;line-height:1.4}
 .dress-help{font-size:14px;margin-bottom:14px}.clothing-groups{gap:18px}.clothing-group legend{font-size:17px}
 .clothing-choice{min-height:100px;flex-basis:76px;min-width:76px;max-width:none;font-size:13px;padding:7px 5px}.clothing-choice img{width:55px;height:56px}
 .dress-app .lesson-actions{position:static}.dress-app .lesson-control-help{margin-top:10px}
}
@media(max-width:360px){.dress-stage{grid-template-columns:85px minmax(0,1fr);gap:6px 10px;padding:10px}.dress-person{width:68px;height:175px}.person-switch button{font-size:13px}.dress-description{font-size:12px}.clothing-choice{min-width:65px;flex-basis:65px}.clothing-choice img{width:48px;height:52px}}
@media(prefers-reduced-motion:reduce){.clothing-choice{transition:none}.clothing-choice:hover:not(:disabled),.clothing-choice:active:not(:disabled){transform:none}}

/* Weather is one contextual view within the existing model stage. */
.dress-modes{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.dress-modes button{min-height:44px;padding:10px 16px;border:1px solid #a8bad4;border-radius:12px;background:var(--sky);color:var(--ink);font:750 15px/1.35 "Nunito Sans",sans-serif}
.dress-modes [aria-pressed=true]{background:var(--violet);border-color:var(--violet);color:#fff}
.dress-modes button:focus-visible{outline:3px solid var(--violet-deep);outline-offset:3px}
.dress-weather{margin:0 auto 14px;max-width:280px}
.dress-weather[hidden]{display:none}
.weather-window{position:relative;height:128px;overflow:hidden;border:5px solid #cad8eb;border-radius:8px;background:var(--sky)}
.weather-window img{display:block;width:100%;height:100%;object-fit:cover}
.weather-window::before,.weather-window::after{content:"";position:absolute;background:#cad8eb;z-index:2;pointer-events:none}
.weather-window::before{left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%)}
.weather-window::after{left:0;right:0;top:44%;height:4px}
.dress-weather figcaption{margin-top:6px;color:var(--ink);font-size:14px;font-weight:800;line-height:1.3}
.weather-motion{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.weather-motion span{position:absolute;left:var(--drop-x);top:-12px;background:#fff;opacity:.85;animation-delay:var(--drop-delay);animation-fill-mode:forwards}
[data-weather=snow] .weather-motion span{width:4px;height:4px;border-radius:50%;animation-name:dress-snow;animation-duration:4.5s;animation-timing-function:linear}
[data-weather=rain] .weather-motion span{width:1px;height:12px;animation-name:dress-rain;animation-duration:4.5s;animation-timing-function:linear}
@keyframes dress-snow{from{transform:translate(0,0)}to{transform:translate(15px,155px)}}
@keyframes dress-rain{from{transform:translate(0,0)}to{transform:translate(-35px,160px)}}
@media(hover:hover) and (pointer:fine){.dress-modes button:hover:not([aria-pressed=true]){background:#e9e6fa}}
@media(max-width:760px){
 .dress-modes{gap:6px;margin-top:12px}
 .dress-modes button{flex:1 1 120px;padding:9px 10px;font-size:13px}
 .dress-stage:has(.dress-weather:not([hidden])) .dress-person{grid-row:1/5}
 .dress-weather{grid-column:2;grid-row:2;width:100%;max-width:none;margin:0}
 .weather-window{height:78px;border-width:4px}
 .dress-weather figcaption{font-size:12px;margin-top:4px}
 .dress-stage:has(.dress-weather:not([hidden])) .dress-description{grid-row:3}
 .dress-stage:has(.dress-weather:not([hidden])) .plain-button{grid-row:4}
}
@media(max-width:360px){.weather-window{height:62px}.dress-stage:has(.dress-weather:not([hidden])) .dress-person{width:76px;height:197px}}
@media(prefers-reduced-motion:reduce){.weather-motion span{animation:none;display:none}}