.tryon-steps,.tryon-step-dock,.tryon-step-status{display:none}
header>a.brand{font-size:22px;letter-spacing:.02em}header>a.brand small{font-size:8px;letter-spacing:.1em}header>.studio-home{font-size:12px}
.tryon-step-status[data-model]:not([data-model=""]):not([data-model="initial"]){display:flex;align-items:center;gap:14px;padding:12px 16px;margin:0 0 18px;background:#eeeae1;border:1px solid #dbd5c9;border-radius:8px;color:#514b40}
.tryon-step-status img{width:56px;height:56px;object-fit:cover;border-radius:4px;flex:none}
.tryon-step-status>div{flex:1;min-width:0}
.tryon-step-status small{display:block;font-size:10px;letter-spacing:.08em;margin-bottom:5px}
.tryon-step-status strong{font-size:16px;font-weight:500}
.tryon-step-status button{width:auto;min-height:40px;padding:8px 12px;border:0;background:transparent;color:inherit;font-size:12px;text-decoration:underline;text-underline-offset:4px}
.more-feedback{font-size:12px;line-height:1.6;color:#596443;min-height:0;margin:8px 0}.more-feedback:empty{display:none}.fabric-new{animation:swatch-arrive .7s ease-out}@keyframes swatch-arrive{from{opacity:.3;box-shadow:0 0 0 3px #b5a371;transform:translateY(8px)}to{opacity:1;box-shadow:none;transform:translateY(0)}}@media(prefers-reduced-motion:reduce){.fabric-new{animation:none}}
@media(max-width:800px){
 body.tryon-mobile-flow{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
 .tryon-mobile-flow .intro{padding:15px 0!important}.tryon-mobile-flow .intro h1{font-size:25px;margin:4px 0}.tryon-mobile-flow .intro .eyebrow{display:none}.tryon-mobile-flow .intro aside{display:none}.tryon-mobile-flow .intro>div>p:last-child{margin-bottom:0}
 .tryon-steps{display:flex;position:sticky;top:0;z-index:12;gap:6px;background:var(--paper);padding:10px 0;scroll-margin-top:0}
 .tryon-steps button{flex:1;min-width:0;min-height:46px;font-size:12px;line-height:1.4;padding:8px 5px;border:1px solid #d5d7ca;border-radius:10px;background:#efeee6;color:#56624f}
 .tryon-steps button[aria-current=step]{background:#344a37;color:white;border-color:#344a37}
 .tryon-step-status{display:block;font-size:12px;margin:0 0 12px;color:#6c735f}
 .tryon-mobile-flow .studio,.tryon-mobile-flow .workspace{display:block}
 .tryon-mobile-flow[data-tryon-step="0"] [data-mobile-step]:not([data-mobile-step="0"]),.tryon-mobile-flow[data-tryon-step="1"] [data-mobile-step]:not([data-mobile-step="1"]),.tryon-mobile-flow[data-tryon-step="2"] [data-mobile-step]:not([data-mobile-step="2"]){display:none}
 .tryon-mobile-flow .demo,.tryon-mobile-flow .mobile-next-step,.tryon-mobile-flow .mobile-selection,.tryon-mobile-flow #prepare{display:none}
 .tryon-mobile-flow:not([data-tryon-step="2"]) #live-result{display:none}
 .tryon-mobile-flow .fabrics .fabric-grid{max-height:38svh!important}.tryon-mobile-flow .fabrics>.hint{margin:8px 0 12px}.tryon-mobile-flow .results-line{margin:10px 0}
 .tryon-step-dock{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:25;gap:12px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:#faf8f2;border-top:1px solid #d8d6c9;box-shadow:0 -4px 18px #302a1f0a}
 .tryon-step-dock button{min-height:48px;margin:0}.tryon-step-dock .primary{flex:1;min-width:0;font-size:14px}
 .tryon-mobile-flow #drop{position:relative}.tryon-mobile-flow #drop input{position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0}.tryon-mobile-flow #drop:focus-within{outline:2px solid #95733d;outline-offset:3px}
 .tryon-has-photo #drop{min-height:0;padding:10px;font-size:12px}.tryon-has-photo #drop small,.tryon-has-photo #drop span{display:none}
 .tryon-has-photo:not(.tryon-manual-selection) .preview .mask-stage img{max-height:42svh;object-fit:contain}
 html[lang=en] .tryon-mobile-flow .intro h1{letter-spacing:0;font-size:25px}.tryon-mobile-flow .intro h1 br{display:inline}.tryon-mobile-flow .intro h1 br:after{content:' '}
 .tryon-mobile-flow .mask-editor{margin:8px 0}.tryon-mobile-flow #upload-status{margin:8px 0}.tryon-mobile-flow .mask-viewport{max-height:45svh}.tryon-mobile-flow #live-result{margin-top:16px;scroll-margin-top:75px}.tryon-mobile-flow footer{padding:20px 4px;font-size:11px}
}
header>.badge,.fabrics>.hint{display:none}
.case-picker{width:min(720px,calc(100vw - 28px));max-height:80dvh;border:0;border-radius:22px;padding:24px;background:#f8f5ef;color:#403b33;overflow:auto}
.case-picker::backdrop{background:#24232170;backdrop-filter:blur(4px)}
.case-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.case-picker-head button{font-size:26px}
.case-picker button{background:transparent;border:0;color:inherit;font:inherit;cursor:pointer}.case-picker-head button{font-size:26px;width:36px;height:36px}
.case-picker-brands{display:flex;gap:6px;flex-wrap:wrap;margin:12px 0}.case-picker-brands button{padding:7px 12px;background:#eee7db;border-radius:20px;font-size:12px}.case-picker-brands button[aria-pressed=true]{background:#827158;color:white}
.case-picker-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.case-picker-grid button{min-width:0;padding:0;text-align:left}.case-picker-grid img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:10px;background:#eae4d9}.case-picker-grid span{display:block;font-size:12px;margin-top:6px}.case-picker [role=status]{font-size:12px;color:#877b69}
@media(max-width:800px){
 body header{padding:10px 14px!important;gap:6px!important;line-height:1.25}
 header>a.brand{font-size:19px!important}header>a.brand small{font-size:6px;margin-top:5px;letter-spacing:1px}
 header .site-language select{font-size:12px!important;min-height:32px;height:32px;padding-top:5px;padding-bottom:5px}
 header>a:last-of-type:not(.brand){font-size:10px}header .studio-home{font-size:11px}
 body.tryon-mobile-flow .intro{padding:10px 0!important;gap:8px}
 body.tryon-mobile-flow .intro h1{font-size:22px;line-height:1.2}
 body.tryon-mobile-flow .intro>div>p:last-child{font-size:10px;line-height:1.4}
 body .tryon-steps button{min-height:34px;padding:6px 3px}
 body .panel{padding:13px!important}.section-title{margin-bottom:8px;gap:8px}body h2{font-size:15px}
 .fabrics label{font-size:11px;line-height:1.5}.fabrics input[type=search],.fabrics select{height:38px;min-height:38px;padding:6px 10px;font-size:16px!important}
 .fabrics .filters{margin-top:9px}.case-picker{padding:18px}.case-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
/* Keep the brand and navigation aligned regardless of language injection order. */
body>header{display:flex;flex-wrap:nowrap;justify-content:flex-start;align-items:center;gap:12px!important}
body>header>.brand{order:0;flex:1;min-width:0}
body>header>.studio-home{order:1!important;display:inline-flex!important;align-items:center;justify-content:center;flex:none;margin:0;padding:0 12px;height:36px;font-size:12px!important;line-height:1;border:1px solid #ded6c8;border-radius:8px;background:#faf8f2}
body>header>.site-language{order:2!important;flex:none;margin:0}
body>header>.site-language select{height:36px;min-height:36px;border-radius:8px;margin:0;font-size:12px!important}
@media(max-width:800px){body>header{gap:10px!important;padding:12px 14px!important}body>header>.site-language select{height:36px;min-height:36px;width:82px}}
body>header>.studio-desktop-nav{order:1;display:flex;align-items:center;justify-content:center;gap:18px;flex:1;white-space:nowrap;font-size:12px}
body>header:has(.studio-desktop-nav)>.brand{flex:0 0 auto;margin-right:8px}
body>header>.studio-desktop-nav a[aria-current=page]{color:#987e58}
body>header>.studio-menu{order:4;display:none;flex:none;width:36px;height:36px;padding:8px 5px;border:0;background:transparent;color:#403b33}
.studio-menu span{display:block;height:1px;width:25px;margin:6px 0;background:currentColor}
.studio-nav-dialog{width:min(440px,calc(100vw - 28px));max-height:85dvh;margin:70px auto auto;padding:22px;border:1px solid #e5ddcf;border-radius:20px;background:#f8f5ef;color:#403b33;overflow:auto}
.studio-nav-dialog::backdrop{background:#25231f66;backdrop-filter:blur(5px)}.studio-nav-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.studio-nav-top small{font-size:10px;letter-spacing:2px;color:#91836c}.studio-nav-top button{width:36px;height:36px;border:0;background:transparent;color:inherit;font-size:26px}
.studio-mobile-links{display:grid}.studio-mobile-links a{padding:12px 4px;border-bottom:1px solid #e3dbce;font-size:18px;line-height:1.5}.studio-mobile-links a:after{content:'↗';float:right;color:#9a8c76;font-size:15px}.studio-mobile-links a[aria-current=page]{color:#9a7c50}
@media(max-width:1180px){body>header>.studio-desktop-nav{display:none}body>header:has(.studio-desktop-nav)>.brand{flex:1;margin:0}body>header>.studio-menu{display:block}}
@media(max-width:360px){body>header{gap:7px!important}body>header>.studio-home{padding:0 8px}body>header>.site-language select{width:72px}}
.fabric small{display:block;padding:0 3px 5px;font-size:10px;color:#91816a}.series-back{display:block;padding:6px 0 10px;font-size:12px}
@media(max-width:800px){#more{display:none}.fabrics .more-feedback{font-size:10px;margin:6px 0 0}}
/* Warm neutral studio and compact mobile introduction. */
:root{--paper:#f6f3ed;--ink:#403b33;--muted:#888073;--line:#e0d9cd;--accent:#8a765a}
.intro h1{white-space:nowrap;font-family:Arial,"PingFang SC","Microsoft YaHei",sans-serif;font-weight:500;font-size:clamp(28px,3.3vw,44px);letter-spacing:.02em}
.intro h1 br{display:none!important}
.intro{padding:38px 0 30px;gap:30px}.intro aside{border-color:#ddd4c5}.intro aside strong{font-weight:500}
.badge,.notice,.selection{background:#eee8dc;color:#716553}
.panel{background:#fffdf8;border-color:#e8e1d5;box-shadow:0 5px 24px #65563e04}
.primary{background:#817057;border-color:#817057;color:#fffdf8}.primary:hover:not(:disabled){background:#6f5f49}
.secondary{background:#f5f0e6;border-color:#ded4c4;color:#6b5c48}
.fabric{background:#f1ece3}.fabric[aria-pressed=true]{background:#e9dfcd;border-color:#a48a62}
.upload{background:#f3eee4;border-color:#cfc1ab}.upload.drag{background:#e8decc}
.more-feedback{color:#817057}.tryon-step-status{color:#817565}
@media(max-width:800px){
 .tryon-mobile-flow .intro{display:grid;grid-template-columns:1fr;gap:10px;padding:14px 0 12px!important}
 .tryon-mobile-flow .intro h1{font-size:25px;line-height:1.3;margin:0 0 4px;white-space:nowrap}
 .tryon-mobile-flow .intro>div>p:last-child{font-size:11px;margin:0;line-height:1.5}
 .tryon-mobile-flow .intro .tryon-steps{position:static;padding:0;gap:7px;background:transparent}
 .tryon-steps button{min-height:38px;padding:8px 4px;border:1px solid #e3dacb;border-radius:12px;background:#eee8dc;color:#887c69;font-size:11px}
 .tryon-steps button[aria-current=step]{background:#827158;border-color:#827158;color:#fffdf8}
 .tryon-steps button:disabled{opacity:.6}
 .tryon-step-status[data-model=""]{display:none}
 .tryon-step-status[data-model]:not([data-model=""]):not([data-model="initial"]){padding:8px 12px;margin-bottom:10px;border-radius:12px}
 .tryon-step-status img{width:42px;height:42px}.tryon-step-dock{background:#fbf8f2;border-color:#e4dacb}
 .tryon-step-dock button{border-radius:14px}
 html[lang=en] .tryon-mobile-flow .intro h1{font-size:clamp(17px,4.7vw,25px);letter-spacing:0}
}