/* Dressing room: independent illustrated layers, scoped to this route. */
.styling-studio{--studio-ink:#3a3442;--studio-rose:#b88791;color:var(--studio-ink);max-width:1440px;margin:auto;padding:36px 48px 0}.studio-heading{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:26px}.studio-heading .eyebrow{font-size:10px;letter-spacing:.22em;color:#8b6974}.studio-heading h1{font:normal clamp(38px,4.4vw,64px)/1.05 Georgia,serif;margin:10px 0}.studio-heading p{margin:8px 0;color:#786a74;font-size:16px}.studio-prototype{display:flex;gap:8px;align-items:center;color:#85737a;font-size:12px;max-width:240px}.studio-prototype i{width:6px;height:6px;flex:none;background:#bb989d;border-radius:50%}.studio-workspace{display:grid;grid-template-columns:190px minmax(350px,1fr)210px;gap:26px;align-items:start}.studio-left,.studio-right{padding-top:64px}.studio-step{font-size:10px;letter-spacing:.2em;color:#ac9198}.studio-workspace h2{font:normal 24px/1.2 Georgia,serif;margin:12px 0 14px}.studio-left>p{font-size:14px;color:#8a7c82;line-height:1.65}.studio-access-toggle{display:flex;align-items:center;gap:12px;width:100%;background:#fff8;border:1px solid #d8c9cb;padding:14px 12px;margin-top:26px;color:inherit;text-align:left;cursor:pointer;min-height:48px}.studio-access-toggle span:last-child{margin-left:auto}.styling-studio svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.25}.studio-access-toggle[aria-expanded=true]{background:#e9d9dd}.studio-access-toggle[aria-expanded=true] span:last-child{transform:rotate(45deg)}.studio-small{font-size:12px;color:#84777c;line-height:1.6;margin:14px 0}.studio-access-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.studio-access-card{position:relative;border:1px solid #e4d7d7;background:#fff7;padding:8px;color:inherit;cursor:pointer;text-align:center;font-size:12px;line-height:1.5;border-radius:3px}.access-thumb{display:block;height:110px;margin:2px 0 8px}.access-thumb img{width:100%;height:100%;object-fit:contain}.studio-access-card[aria-pressed=true]{border-color:#9e6f7e;background:#f1e4e8}.access-check{display:none;position:absolute;right:6px;top:4px}.studio-access-card[aria-pressed=true] .access-check{display:block}.studio-source-note{margin-top:26px!important;font-size:12px!important}.studio-center{min-width:0}.studio-view-tabs{display:flex;justify-content:center;gap:2px;position:relative;z-index:2;background:#ede5e4;border-radius:30px;padding:4px;width:max-content;max-width:100%;margin:0 auto 12px}.studio-view-tabs button{background:none;border:0;border-radius:24px;font:inherit;font-size:12px;letter-spacing:.02em;padding:11px 19px;color:#85757c;cursor:pointer;min-height:44px}.studio-view-tabs button[aria-pressed=true]{background:#fffc;color:#423540;box-shadow:0 2px 6px #66445d0a}.studio-stage{position:relative;height:650px;isolation:isolate;overflow:clip;border-radius:48% 48% 2px 2px;background:radial-gradient(ellipse at 50% 46%,#fffdf9 5%,#f1e6e2 58%,#eee5df 100%)}.studio-arch{position:absolute;inset:18px 30px 15px;border:1px solid #c6a8a730;border-radius:49% 49% 0 0;pointer-events:none}.studio-figure{position:absolute;width:420px;height:630px;max-width:100%;aspect-ratio:2/3;left:50%;top:10px;transform:translateX(-50%);pointer-events:none}.doll-stack{position:relative;width:100%;height:100%;transform-origin:50% 0;transition:transform .65s cubic-bezier(.2,.8,.2,1)}.studio-base{position:absolute;inset:0;width:100%;height:100%;object-fit:fill}.studio-layers{position:absolute;inset:0}.studio-layer{position:absolute;object-fit:fill;animation:studio-layer-in .32s ease both;pointer-events:none}.studio-stage:after{content:'';position:absolute;bottom:6px;left:32%;right:32%;height:10px;background:#7e626c20;filter:blur(8px);z-index:-1}.studio-head-hotspot{position:absolute;left:36%;top:1%;width:28%;height:18%;border:1px dashed #b68e8b66;border-radius:46%;color:#74626a;cursor:zoom-in;background:transparent;z-index:4}.studio-head-hotspot span{position:absolute;top:95%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:11px;background:#fffaf3e6;padding:5px 9px;border-radius:12px}.studio-head-hotspot:hover{background:#fff3;border-color:#aa7085}.studio-control{position:absolute;top:var(--row);left:12px;right:12px;display:flex;justify-content:space-between;align-items:center;transform:translateY(-50%);pointer-events:none;z-index:5}.studio-control button{width:44px;height:44px;background:#fffaf7e8;border:1px solid #d4bfc46b;border-radius:50%;color:#876874;display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;flex:none;box-shadow:0 3px 12px #69434b08;transition:background .2s,transform .2s}.studio-control button:first-child svg{transform:rotate(180deg)}.studio-control button:hover{background:#ead4dc;transform:scale(1.08)}.studio-control-name{position:absolute;left:52px;top:50%;transform:translateY(-50%);max-width:115px;display:flex;flex-direction:column;gap:4px;font-size:12px;color:#775b68;pointer-events:none;text-shadow:0 1px #fffd}.studio-control-name small{font-size:10px;color:#a08a91}.studio-body-controls [data-control=shoes] .studio-control-name{max-width:140px}.studio-head-controls .studio-control-name{max-width:88px}.studio-hint{font-size:12px;line-height:1.6;text-align:center;color:#887780;min-height:38px;padding:0 20px;margin:14px 0}.studio-right h2{margin-bottom:23px}.studio-selection{font-size:12px;margin:0}.studio-selection>div{padding:10px 0;border-bottom:1px solid #cbbabe50;display:grid;grid-template-columns:75px 1fr;gap:10px}.studio-selection dt{color:#a18c94;font-size:11px}.studio-selection dd{margin:0;line-height:1.5;text-align:right}.studio-reset{border:0;background:none;padding:16px 0;min-height:44px;font:inherit;font-size:12px;color:#8a6777;cursor:pointer}.studio-save-state{font-size:11px;line-height:1.6;color:#94818a;min-height:36px;margin:0}.studio-continue{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #947283;font-size:14px;margin-top:16px;padding:14px 0}.studio-dress-note{font-size:11px;line-height:1.6;color:#a17282;padding:8px;background:#efdee54d}.studio-caption{border-top:1px solid #d7c7c7;padding:19px 0;display:flex;align-items:baseline;gap:26px;color:#9b858e}.studio-caption>span{font-size:9px;letter-spacing:.18em;white-space:nowrap}.studio-caption p{margin:0;font-size:12px;line-height:1.65;max-width:680px}.studio-spark{position:absolute;color:#c29b93;pointer-events:none;animation:studio-spark 5s ease-in-out infinite;z-index:2}.spark-a{left:23%;top:20%;font-size:19px}.spark-b{right:20%;bottom:21%;font-size:25px;animation-delay:1s}.studio-back{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);border:1px solid #d8c5cc;background:#fff9f5e8;color:#795e6e;padding:12px 18px;border-radius:25px;font:inherit;font-size:12px;cursor:pointer;z-index:6;white-space:nowrap;min-height:44px}.styling-studio[data-view=head] .doll-stack{transform:translateY(64px) scale(3.2)}.styling-studio[data-view=head] .studio-head-hotspot{display:none}.studio-image-error{position:absolute;left:20px;right:20px;bottom:70px;background:#fff5ed;border:1px solid #cfb3b4;padding:18px;z-index:10;font-size:13px;line-height:1.6}.studio-image-error button{margin:10px 0 0;padding:10px;background:#3d3441;color:white;border:0;display:block;cursor:pointer}.studio-inquiry{max-width:1120px;margin:20px auto 60px;padding:0 36px;scroll-margin-top:130px}.studio-inquiry>summary{font:normal 29px/1.3 Georgia,serif;cursor:pointer;list-style:none;padding:24px 0;border-bottom:1px solid #dfd3cf;display:flex;align-items:center;justify-content:space-between;gap:18px}.studio-inquiry>summary:after{content:'＋';font:20px sans-serif}.studio-inquiry[open]>summary:after{content:'−'}.studio-inquiry .form-layout{padding-top:30px;grid-template-columns:280px 1fr;gap:44px}.studio-inquiry #base-photo{max-height:340px;width:100%;object-fit:contain}.studio-inquiry .photo-note{font-size:12px}.studio-transfer{background:#ede1e4;padding:16px;margin-bottom:24px}.studio-transfer button{background:none;border:0;color:#745562;text-decoration:underline;font:inherit;font-size:14px;cursor:pointer;min-height:44px}.studio-transfer-status{font-size:12px}.styling-studio [hidden]{display:none!important}.styling-studio button:focus-visible,.studio-inquiry summary:focus-visible{outline:3px solid #a46e85;outline-offset:4px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
@keyframes studio-layer-in{from{opacity:0}to{opacity:1}}@keyframes studio-spark{0%,100%{opacity:.35;transform:translateY(0)}50%{opacity:.8;transform:translateY(-6px)}}
@media(max-width:1100px){.styling-studio{padding:28px 24px 0}.studio-workspace{grid-template-columns:155px minmax(350px,1fr)175px;gap:14px}.studio-control-name{max-width:75px;font-size:11px;left:48px}.studio-control-name small{display:none}.studio-selection>div{grid-template-columns:60px 1fr;gap:4px}.studio-workspace h2{font-size:21px}.studio-stage{height:620px}.studio-figure{width:400px;height:600px}.studio-control{left:8px;right:8px}}
@media(max-width:850px){.studio-workspace{grid-template-columns:140px minmax(300px,1fr)}.studio-right{grid-column:1/-1;padding:0 16px 16px}.studio-right .studio-step,.studio-right h2{display:none}.studio-selection{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 18px}.studio-selection>div{display:block;padding:8px 0}.studio-selection dd{text-align:left;margin-top:5px}.studio-save-state{display:inline;margin-left:18px}.studio-continue{float:right;gap:25px;margin:0}.studio-heading{align-items:flex-start}.studio-prototype{font-size:10px;max-width:150px}.studio-inquiry .form-layout{grid-template-columns:200px 1fr;gap:24px}}
@media(max-width:600px){.styling-studio{padding:23px 14px 0}.studio-heading{display:block;margin-bottom:20px}.studio-heading h1{font-size:43px}.studio-heading p{font-size:14px}.studio-heading .eyebrow{font-size:8px}.studio-prototype{max-width:none;margin-top:15px;font-size:10px}.studio-workspace{display:flex;flex-direction:column;gap:0}.studio-left{padding:0;width:100%;position:relative;margin-bottom:12px}.studio-left>.studio-step,.studio-left>h2,.studio-left>p{display:none}.studio-access-toggle{width:auto;min-width:145px;margin:0;padding:8px 12px;font-size:13px;min-height:44px}.studio-access-toggle svg{width:19px}.studio-access-grid{grid-template-columns:repeat(2,minmax(90px,150px));gap:10px}.access-thumb{height:90px}.studio-small{margin:10px 0}.studio-center{width:100%}.studio-view-tabs{margin-top:-57px;margin-right:0;margin-bottom:16px}.studio-view-tabs button{font-size:10px;padding:8px 12px;min-height:36px}.studio-stage{height:580px;border-radius:46% 46% 2px 2px}.studio-figure{width:380px;height:570px;max-width:none;top:0}.studio-head-hotspot{width:25%;left:37.5%;height:17.5%}.studio-control-name{font-size:10px;max-width:65px;left:46px}.studio-control button{width:44px;height:44px}.studio-control{left:3px;right:3px}.studio-control-name small{display:none}.studio-head-controls .studio-control-name{max-width:65px}.studio-right{width:100%;padding:6px 0 18px}.studio-selection{grid-template-columns:repeat(2,1fr);gap:0 18px}.studio-selection>div{display:grid;grid-template-columns:65px 1fr;gap:4px}.studio-selection dd{text-align:right;margin:0;font-size:11px}.studio-selection dt{font-size:10px}.studio-continue{font-size:13px}.studio-save-state{margin:0;display:block;min-height:20px}.studio-caption{display:block;padding:14px 0}.studio-caption p{font-size:11px;margin-top:8px}.studio-inquiry{padding:0 18px;scroll-margin-top:100px}.studio-inquiry>summary{font-size:24px}.studio-inquiry .form-layout{display:flex;flex-direction:column;gap:24px}.studio-inquiry #base-photo{max-height:220px}.studio-inquiry .form-layout>div{display:none}.studio-inquiry .form-grid{width:100%}.studio-hint{font-size:11px;padding:0 8px}.styling-studio[data-view=head] .doll-stack{transform:translateY(56px) scale(2.8)}.studio-head-controls [data-control=hat]{top:15%}.studio-head-controls [data-control=hair]{top:28%}.studio-head-controls [data-control=eyes]{top:42%}.studio-head-controls [data-control=makeup]{top:56%}}
@media(max-width:370px){.studio-stage{height:540px}.studio-figure{width:353px;height:530px}.studio-view-tabs button{padding:8px}.studio-access-toggle{min-width:120px;font-size:11px;gap:6px}.studio-control-name{max-width:54px;font-size:9px}.studio-head-controls .studio-control-name{max-width:54px}}
@media(prefers-reduced-motion:reduce){.styling-studio *{animation:none!important;transition:none!important}}html[data-motion=off] .styling-studio *{animation:none!important;transition:none!important}

/* Keep the accessories drawer below its toolbar, without colliding with the view tabs. */
@media(max-width:600px){.studio-left:has(#studio-accessories:not([hidden]))+.studio-center .studio-view-tabs{margin-top:0}.studio-stage{overflow:clip}.studio-control-name{background:#faf5f0c9;border-radius:8px;padding:4px}.studio-head-controls .studio-control-name{background:#faf5f0d9}}
/* Clip enlarged illustrated layers to a rectangle; the arch is decorative so controls remain clickable. */
.studio-stage{border-radius:0;background:none}
.studio-stage:before{content:'';position:absolute;inset:0;border-radius:48% 48% 2px 2px;background:radial-gradient(ellipse at 50% 46%,#fffdf9 5%,#f1e6e2 58%,#eee5df 100%);z-index:-1;pointer-events:none}
.studio-head-controls .studio-control-name{left:54px;max-width:115px}
@media(max-width:600px){.studio-head-controls .studio-control-name{left:0;top:100%;transform:none;margin-top:5px;max-width:70px;padding:0 3px;font-size:10px}}
.styling-studio[data-outfit=layered] .studio-base{mask:url('assets/studio-illustrated/base-outfit-mask.svg') 0 0/100% 100%;-webkit-mask:url('assets/studio-illustrated/base-outfit-mask.svg') 0 0/100% 100%}
/* Head fitting: calibrated contours and separate front/back hair. */
.studio-base{z-index:1}
.studio-layers{z-index:2}
.studio-fit-layer{position:absolute;left:0;top:0;width:100%;height:52.083333%;pointer-events:none;display:none}
.fit-back{z-index:0}.fit-shade{z-index:3}.fit-front{z-index:4}.fit-cap{z-index:5}
.styling-studio[data-fit-ready=true] .studio-fit-layer{display:block}
.styling-studio[data-fit-ready=true] .layer-hair,.styling-studio[data-fit-ready=true] .layer-hat{visibility:hidden;animation:none}
/* The contact shade must not tint free background beyond the head and torso. */
.fit-shade{clip-path:polygon(40% 2%,60% 2%,65% 32%,63% 45%,68% 81%,32% 81%,37% 45%,35% 32%)}

/* Illustrated edition: one shared puppet keeps all fitted layers moving together. */
.studio-puppet{position:relative;width:100%;height:100%;transform-origin:50% 95%;animation:studio-breathe 9s ease-in-out infinite}
.styling-studio[data-view=head] .studio-puppet{animation:none;transform:none}
.studio-stage:before{background:radial-gradient(ellipse at 50% 42%,#fffdf8 15%,#f4e9e5 70%,#e8dcd8 100%);border:1px solid #ddc5c740}
.studio-arch{inset:21px 29px 18px;border-style:dashed;border-color:#bd909c40}
.studio-petals{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden;border-radius:48% 48% 0 0}
.studio-petals i{position:absolute;width:7px;height:12px;background:#d4a5b570;border-radius:90% 10% 90% 10%;left:16%;top:12%;animation:studio-petal 12s ease-in-out infinite}
.studio-petals i:nth-child(2){left:81%;top:30%;animation-delay:-4s;animation-duration:15s;background:#c7b6cc60}
.studio-petals i:nth-child(3){left:22%;top:67%;animation-delay:-8s;width:5px;height:8px}
.studio-petals i:nth-child(4){left:74%;top:78%;animation-delay:-2s;animation-duration:17s}
.studio-petals i:nth-child(5){left:62%;top:8%;animation-delay:-6s;width:4px;height:7px;background:#c7af7e60}
.studio-view-tabs button{transition:background .25s,color .25s,box-shadow .25s}
.studio-access-card{transition:transform .2s,background .2s,border-color .2s}
.studio-access-card:hover{transform:translateY(-3px)}.studio-access-card:active{transform:scale(.97)}
.studio-control button:active{transform:scale(.91)}
.studio-head-hotspot{transition:border-color .2s,box-shadow .2s}
.studio-head-hotspot:hover{box-shadow:0 0 0 5px #b8879112}
.styling-studio[data-view=head] .studio-petals{opacity:.4}
@keyframes studio-breathe{0%,100%{transform:rotate(-.22deg) translateY(0)}50%{transform:rotate(.22deg) translateY(-1.5px)}}
@keyframes studio-petal{0%,100%{transform:translate(0,0) rotate(-20deg);opacity:.25}50%{transform:translate(12px,24px) rotate(75deg);opacity:.65}}
@media(max-width:600px){.studio-inquiry .form-layout>div{display:block}.studio-inquiry #base-photo{max-height:260px}.studio-inquiry .form-layout>div{width:100%;text-align:center}}
@media(prefers-reduced-motion:reduce){.styling-studio *{animation:none!important;transition:none!important}}html[data-motion=off] .styling-studio *{animation:none!important;transition:none!important}