#loading{padding:24px;gap:18px;justify-items:center;align-content:center;background:radial-gradient(ellipse at 50% 45%,#30181e,transparent 65%),#111216;color:#eee;font:400 16px/1.5 Arial,sans-serif}#loading:before{display:none}#loading .loading-logo{display:block;width:min(340px,75vw);height:auto;object-fit:contain}#loading strong{font-size:clamp(16px,3vw,20px);font-weight:500}#loading small{margin:0;color:#bdbec6;font-size:14px}#loading .loading-progress{width:160px;height:3px;border-radius:4px;background:#3a2a2e;overflow:hidden}#loading .loading-progress:after{content:'';display:block;width:40%;height:100%;background:#d8202a;animation:model-progress 1.5s ease-in-out infinite alternate}#loading[data-error] .loading-progress{display:none}@keyframes model-progress{to{transform:translateX(150%)}}@media(prefers-reduced-motion:reduce){#loading .loading-progress:after{animation:none;width:100%}}.caption{padding:8px 12px!important;border-radius:8px;background:#111216c9;color:#f2f2f5!important;backdrop-filter:blur(6px);max-width:calc(100% - 24px)}.caption .model-name{color:#fff!important}.caption #background-note{display:block;color:#eee;font-size:12px}.caption #background-note[hidden]{display:none}
#loading:not([data-error])>strong,#loading:not([data-error])>small{display:none!important}

/* Cabinet Studio controls shared by all model viewers. */
aside h1,#stage .sample-picker h1{font-size:22px;line-height:1.2;margin:0 0 10px}
#stage .sample-picker{width:min(260px,calc(100% - 32px));left:auto;right:24px}
#stage .tools{top:22px;z-index:3;display:grid;gap:10px}
#stage .tool-buttons{display:flex;gap:8px}
.studio-lineup{margin-top:16px}
.studio-lineup label{display:block;margin:0 0 6px;color:#f4f4f6;font-size:12px;font-weight:700}
.studio-lineup select{width:100%}
.studio-lineup button{width:100%;margin-top:12px;border:1px solid #d8202a;border-radius:8px;background:#111216;color:#fff;padding:10px;font-weight:700;cursor:pointer}
.studio-lineup button:hover,.studio-lineup button:focus-visible{background:#2b2c30}
.studio-lineup button:disabled{opacity:.55;cursor:wait}
.studio-lineup [role=status]{min-height:0;margin:6px 0 0}
.studio-lineup [role=status]:empty{display:none}
@media(max-width:760px){#stage .sample-picker{right:12px}#stage .tools{top:12px;left:12px}}

/* Keep the customer preview a consistent size and stack its controls. */
html:not([data-embedded]) main{width:min(1440px,calc(100% - 32px));height:min(760px,calc(100dvh - 108px));min-height:580px;margin:16px auto;border:1px solid #34353b;border-radius:12px;overflow:hidden;box-shadow:0 14px 42px #00000030}
#stage .studio-controls{position:absolute;z-index:3;top:22px;left:24px;display:grid;gap:10px;max-width:calc(100% - 48px)}
#stage .studio-controls .sample-picker{position:static;width:260px;max-width:100%;left:auto;right:auto;top:auto}
#stage .studio-controls .tools{position:static;display:grid;gap:10px}
@media(max-width:760px){html:not([data-embedded]) main{width:100%;height:auto;min-height:0;margin:0;border:0;border-radius:0;overflow:visible}#stage .studio-controls{top:12px;left:12px;max-width:calc(100% - 24px)}}

@media(max-width:760px){
  html:not([data-embedded]) #stage{height:auto;min-height:0;display:grid;grid-template-rows:auto minmax(430px,65vh);overflow:hidden}
  html:not([data-embedded]) #stage>.studio-controls{position:relative;grid-row:1;top:auto;left:auto;max-width:100%;padding:12px;align-content:start}
  html:not([data-embedded]) #stage>canvas{grid-row:2;width:100%}
  html:not([data-embedded]) #stage .caption{left:12px;bottom:12px}
}

/* Customer-facing controls and matching skin/background pickers. */
#stage .sample-picker #skinstatus{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
#stage .sample-picker select,#stage .sample-picker .studio-lineup{width:100%}
#stage .sample-picker .studio-lineup label{font-size:22px;line-height:1.2;font-weight:700;margin:0 0 10px}
#stage .tool-buttons{flex-wrap:wrap}
#stage .tool-buttons button{text-transform:none;letter-spacing:normal}
#stage .caption{display:flex;flex-wrap:wrap;gap:.35rem 1.2rem;padding:0!important;border-radius:0;background:transparent;backdrop-filter:none;color:#f2f2f5;font-size:14px;font-weight:700;text-shadow:0 1px 4px #000,0 0 12px #000}
@media(max-width:760px){#stage .sample-picker .studio-lineup label{font-size:22px}#stage .caption{font-size:13px;gap:.3rem .8rem}}
@media(max-width:760px){#stage .caption>span:nth-of-type(n+3){display:none!important}}

html[data-embedded] #stage .studio-controls{top:auto;bottom:18px;left:50%;width:max-content;max-width:calc(100% - 20px);transform:translateX(-50%)}
html[data-embedded] #stage .studio-controls .tools{display:block}
html[data-embedded] #stage .tool-buttons{justify-content:center;padding:6px;border:1px solid #ffffff24;border-radius:10px;background:#111216d9;backdrop-filter:blur(8px)}
html[data-embedded] #stage .tool-buttons button{min-height:36px;padding:7px 10px;font-size:11px}
html[data-embedded] #export-jpg,html[data-embedded] #close-window,html[data-embedded] #stage .caption{display:none!important}
html[data-poster] #stage .studio-controls,html[data-poster] #stage .caption{display:none!important}
@media(max-width:760px){body[data-demo-readonly="true"] #stage .studio-controls .tools{position:fixed!important;top:77px!important;right:auto!important;bottom:auto!important;left:50%!important;width:max-content!important;max-width:calc(100% - 24px)!important;transform:translateX(-50%)!important;z-index:7!important}}
html[data-embedded] #stage .studio-controls{top:auto;bottom:12px;left:auto;right:12px;width:max-content;max-width:calc(100% - 24px);transform:none}
html[data-embedded] #stage .tool-buttons>button:not(#reset){display:none!important}

#stage #close-window{position:absolute;z-index:5;top:12px;right:12px;width:40px;height:40px;padding:0;border-radius:50%;font-size:28px;line-height:1}
#stage .sample-picker h1,#stage .sample-picker .studio-lineup label{font-size:14px;line-height:1.25}
#stage .studio-controls .tools{position:fixed;bottom:30px;left:calc(50% + 130px);transform:translateX(-50%)}
.studio-lineup-actions{display:grid;gap:10px;margin-top:16px}.studio-lineup-actions button{width:100%;border:1px solid #d8202a;border-radius:8px;background:#111216;color:#fff;padding:10px;font-weight:700;cursor:pointer}.studio-lineup-actions button:hover,.studio-lineup-actions button:focus-visible{background:#2b2c30}.studio-lineup-actions button:disabled{opacity:.55;cursor:wait}
.studio-lineup-dialog{width:min(520px,calc(100% - 28px));max-width:none;max-height:min(80dvh,680px);padding:0;border:1px solid #45464d;border-radius:14px;background:#15161b;color:#f4f4f6;box-shadow:0 24px 80px #000a}.studio-lineup-dialog::backdrop{background:#050608b8;backdrop-filter:blur(3px)}.studio-lineup-dialog__panel{display:grid;gap:16px;padding:20px}.studio-lineup-dialog header,.studio-lineup-dialog footer{display:flex;align-items:center;justify-content:space-between;gap:12px}.studio-lineup-dialog header h2{margin:0;font-size:22px}.studio-lineup-dialog header p{margin:6px 0 0;color:#bdbec6;font-size:13px}.studio-lineup-dialog__close,.studio-lineup-dialog__row button,.studio-lineup-dialog__save{width:auto;margin:0;padding:8px 12px;border:1px solid #555;border-radius:7px;background:#202127;color:#fff;font-weight:700;cursor:pointer}.studio-lineup-dialog__close{width:36px;height:36px;padding:0;font-size:22px}.studio-lineup-dialog__list{display:grid;gap:8px;max-height:48dvh;overflow:auto;margin:0;padding:0;list-style:none}.studio-lineup-dialog__row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid #34353b;border-radius:8px;background:#111216}.studio-lineup-dialog__row>span{display:flex;gap:6px}.studio-lineup-dialog__row button:disabled,.studio-lineup-dialog__save:disabled{opacity:.45;cursor:default}.studio-lineup-dialog__empty{padding:18px;color:#bdbec6;text-align:center}.studio-lineup-dialog footer [role=status]{color:#bdbec6;font-size:13px}
html[data-embedded] #stage .studio-controls .tools{position:static;transform:none}
@media(max-width:760px){#stage .studio-controls .tools{position:fixed;bottom:12px;left:50%}}

html:not([data-embedded]) #stage>.tools{position:absolute;top:auto;bottom:48px;left:50%;right:auto;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px)}
html:not([data-embedded]) main{grid-template-columns:260px minmax(0,1fr)!important}
html:not([data-embedded]) aside{display:block!important;background:#15161b;color:#ececef;border-color:#34353b;padding:20px}
html:not([data-embedded]) aside> :not(label[for="export-format"]):not(#export-format):not(#saveimage):not(#export-status):not(.cabinet-specs):not(.studio-lineup-actions):not(.sample-editor-controls){display:none}
aside select,aside button{background:#24252c;color:#fff;border-color:#44454c}aside .note{background:#191a20;color:#ccc}
#stage #close-window{background:#191a20;color:#fff;border:1px solid #555}
@media(max-width:760px){html:not([data-embedded]) main{display:flex;flex-direction:column-reverse}html:not([data-embedded]) aside{width:100%}}