:root{--config-width:374px}
#canvas{width:calc(100% - var(--config-width) - 32px)!important;height:100%!important;right:auto}
#config{right:16px;top:76px;width:var(--config-width);max-height:calc(100dvh - 92px);background:rgba(17,22,23,.96)}
.top-bar{padding-right:22px}
.grp>label{color:#b8c4bf;font-size:12px;letter-spacing:1px}
.hint,.price-bar .pb-l small{color:#aab7b1;font-size:13px}
.tg{font-size:12px;min-height:44px;color:#c8d2cd}
.sw{width:38px;height:38px}
.sw.active:after{content:'✓';position:absolute;inset:0;display:grid;place-items:center;color:white;font:700 19px sans-serif;text-shadow:0 1px 3px #000,0 0 4px #000}
.stepper button{width:44px;height:44px}
input[type=range]{margin:12px 0;height:6px;cursor:pointer}
input[type=range]::-webkit-slider-thumb{width:24px;height:24px}
input[type=range]::-moz-range-thumb{width:22px;height:22px}
:is(button,a,input,[role=button]):focus-visible{outline:3px solid #7dffc0;outline-offset:4px}
.acc-h{min-height:48px;font-size:13px}
.acc-h .ico,.acc-h .chev{pointer-events:none}
.grp.dim [role=button]{cursor:not-allowed}
#configClose{display:none}
#configurationWarning{font-size:14px;line-height:1.45}
#configurationWarning[hidden]{display:none}
.price-bar[data-incomplete=true]{border-color:#ffb454}
.view-help{position:absolute;bottom:18px;left:20px;padding:9px 13px;border-radius:8px;background:#111918cf;color:#d3dfd8;font-size:14px;pointer-events:none;max-width:calc(100% - var(--config-width) - 70px)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#sceneTools{position:absolute;z-index:11;left:18px;bottom:18px;max-width:calc(100% - var(--config-width) - 64px);display:flex;flex-wrap:wrap;gap:6px;padding:8px;border:1px solid #ffffff26;border-radius:13px;background:rgba(14,24,20,.92);box-shadow:0 6px 20px #0003;backdrop-filter:blur(14px)}
#sceneTools button{min-height:44px;padding:8px 13px;border:1px solid #ffffff26;border-radius:7px;color:#e4eee8;background:#ffffff08;font:600 14px 'Barlow Condensed',sans-serif;white-space:nowrap;cursor:pointer}
#sceneTools button:hover{background:#3aa76d44;border-color:#3aa76d}
#sceneTools button[aria-pressed=true]{background:#235c40;border-color:#68e5a4;color:#baffd8}
#sceneTools button[hidden]{display:none}
.view-help{bottom:96px}
@media(min-width:821px) and (max-width:1100px){.view-help{display:none}}
@media(max-width:820px){
 #canvas{width:100%!important;height:100%!important}
 #app.panel-open #canvas{height:46%!important}
 #config{top:auto;bottom:0;right:0;left:0;width:auto;height:54dvh;max-height:54dvh;padding:12px 16px calc(20px + env(safe-area-inset-bottom));border-radius:18px 18px 0 0;transition:none}
 #config.collapsed{display:none;transform:none}
 #config::before,.cfg-title::after{display:none}
 .cfg-title{position:sticky;top:-12px;background:#111617;z-index:2;margin:-12px -16px 0;padding:12px 16px;min-height:55px;cursor:default}
 #configClose{display:inline-flex;margin-left:auto;align-items:center;justify-content:center;min-height:40px;padding:6px 10px;background:#203d30;color:#d8ffe9;border:1px solid #3b805b;border-radius:7px;font:600 13px 'Barlow Condensed',sans-serif;cursor:pointer}
 #panelBtn{width:auto;height:48px;padding:0 20px;border-radius:24px;font:600 16px 'Barlow Condensed',sans-serif;bottom:calc(18px + env(safe-area-inset-bottom));display:none}
 #config.collapsed + #panelBtn{display:flex}
 .view-help{left:12px;bottom:calc(78px + env(safe-area-inset-bottom));max-width:calc(100% - 24px);font-size:12px}
 #app.panel-open .view-help{bottom:calc(54dvh + 8px);padding:5px 9px}
 .top-bar{padding:12px}.studio-link{font-size:10px;padding:8px}.brand span{letter-spacing:1px}
 .sw{width:42px;height:42px}
 #sceneTools{left:10px;right:10px;bottom:calc(80px + env(safe-area-inset-bottom));max-width:none;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:thin;padding:6px;gap:5px}
 #sceneTools button{flex:0 0 auto;padding:7px 12px}
 #app.panel-open #sceneTools{bottom:calc(54dvh + 8px)}
 .view-help{bottom:calc(148px + env(safe-area-inset-bottom))}
 #app.panel-open .view-help{display:none}
}
@media(max-width:360px){
 .cfg-title{font-size:12px;letter-spacing:.7px;gap:7px}
 .cfg-title::before{width:10px;flex:0 0 10px}
 #configClose{font-size:12px;padding:6px 8px;flex-shrink:0}
 .price-bar{padding:12px 10px;gap:7px}
 .price-bar .pb-l{font-size:10px;letter-spacing:.7px}
 .price-bar b{font-size:20px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

@media(min-width:821px){.view-help{top:78px;bottom:auto}}
@media(max-width:820px){.view-help{display:none}}

.top-bar{background:linear-gradient(180deg,#101a18ed 0%,#101a1880 65%,transparent 100%);padding-bottom:22px}
#sceneTools{scrollbar-color:#537062 #17251f;scrollbar-width:thin}
#exportStatus{font-size:14px;line-height:1.4;color:#cbe9d8}
