:root{--ink:#223c50;--blue:#335fc5;--border:#d8e1e7;--muted:#5c6e7a;color:var(--ink);font-family:'Segoe UI',Arial,sans-serif}.workspace{grid-template-columns:370px minmax(320px,1fr) 260px}.topbar{flex-basis:74px}.brand{font-family:Georgia,serif}.settings{position:relative;padding:16px 18px;overflow:hidden}.settings>.panel-heading{height:44px;margin:0}.settings>.tool-section{position:absolute;inset:65px 0 0 100px;margin:0!important;border:0!important;display:none}.settings>.tool-section[open]{display:block}.settings>.tool-section>summary{display:none}.settings .tool-content{height:100%;max-height:none!important;overflow-y:auto;padding:18px 18px 24px;background:#fff}.tool-navigation{position:absolute;left:0;top:65px;bottom:0;width:100px;overflow-y:auto;scrollbar-width:thin;background:#eef3f6;border-right:1px solid #d8e1e7;padding:6px}.tool-navigation button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;width:100%;padding:11px 4px;min-height:62px;font-size:10px;line-height:1.3;border-radius:6px;margin:3px 0}.tool-navigation button>span:first-child{font-size:23px;line-height:1;color:#536d83}.tool-navigation button[aria-pressed=true]{background:#fff;color:#234ead;box-shadow:inset 3px 0 #335fc5;font-weight:600}.tool-navigation button[aria-pressed=true]>span:first-child{color:#335fc5}.active-tool-title{font-size:16px;margin:0 0 19px;line-height:1.4}.tool-content h4{font-size:13px;margin-top:24px}.tool-content .field,.tool-content .range-label,.tool-content .check{font-size:12px}.tool-content .hint{font-size:11px;line-height:1.6}.tool-content input[type=range]{height:20px;margin:4px 0 10px}.tool-content button{min-height:36px}.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}.model-card{border:1px solid #d5dfe7;border-radius:7px;text-align:left;padding:8px;background:#f7f9fb}.model-card:hover,.cover-choice:hover{outline:2px solid #335fc5}.model-card svg{width:100%;height:75px;display:block}.model-card span{font-size:11px;font-weight:600;display:block}.model-card small{font-size:9px;color:#5c6e7a}.cover-choice{background:var(--cover-bg);color:var(--cover-ink);border-radius:4px;padding:16px 6px;text-align:center}.cover-choice>span{display:block;font:36px Georgia;margin:8px}.cover-choice strong{font-size:10px}.export-panel .tool-content{max-height:none!important}.export-panel{padding:20px 18px}.export-panel .panel-heading h2{font-size:17px}.crop-grid input{min-height:38px}.settings .asset-library{max-height:220px}.settings .art-actions{gap:7px}.settings .art-actions button{font-size:11px}.settings .transform-bar input{min-height:38px}.editor-help{font-size:11px}.preview-bottom{font-size:11px}.footer{flex-basis:30px;min-height:30px}.settings .mobile-project-actions{display:none}@media(max-width:1200px) and (min-width:851px){.workspace{grid-template-columns:335px minmax(260px,1fr) 230px}.settings>.tool-section{left:88px}.tool-navigation{width:88px}.settings .tool-content{padding:16px 12px}}@media(max-width:850px){.workspace{display:block}.settings{width:min(430px,96vw);padding:16px}.settings>.panel-heading{margin-top:48px}.settings>.tool-section{inset:115px 0 0 88px}.tool-navigation{top:115px;width:88px}.settings .tool-content{padding:16px 12px 30px}.settings .mobile-project-actions{display:flex;position:absolute;top:7px;left:15px;margin:0}.settings .mobile-project-actions button{font-size:10px;padding:9px}.settings .mobile-close{z-index:2;top:10px;right:10px}.export-panel{width:min(360px,95vw)}.topbar{flex-basis:68px}.tool-navigation button{min-height:64px}.preview-bar{left:14px;right:14px}.editor-toolbar{padding:9px}.model-card svg{height:64px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}
.scene-gallery{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:14px 0}.scene-card{background:#edf3f6;border:1px solid #cddbe2;border-radius:6px;padding:5px}.scene-card svg{display:block;width:100%;height:62px}.scene-card span{display:block;font-size:10px;margin:3px}.scene-card:hover{border-color:#335fc5;background:#e0e9f5}
/* Explicit scroll boxes also work with the native <details> content wrapper. */
.settings>.tool-section[open]>.tool-content{position:absolute;inset:0;height:auto;min-height:0;overflow:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;padding-bottom:36px;scrollbar-gutter:stable}
.settings,.preview,.export-panel{min-height:0}
.export-panel .tool-content{height:auto;overflow:visible}
.manual-controls{display:flex;align-items:center;justify-content:center;gap:4px;flex-shrink:0;margin:0 8px 8px;font-size:11px}
.manual-controls>span{margin-right:6px;color:var(--muted)}
.manual-controls button{background:#fff9;border:1px solid #cbd5df;border-radius:5px;padding:7px 12px;min-height:32px}
.manual-controls button[aria-pressed=true]{background:#335fc5;color:#fff;border-color:#335fc5}
.view-controls,.preview-bottom,.scene-caption{flex-shrink:0}
.editing-cover .manual-controls{display:none}
@media(max-width:850px){
 .topbar{flex-basis:56px;height:56px}.footer{display:none}
 .workspace{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;isolation:isolate}
 .preview{grid-row:1;order:0;width:100%;height:100%;min-height:0!important;padding-top:48px}
 .viewport{flex:1 1 0;min-height:0!important;width:100%}
 .preview-bar{top:8px;left:10px;right:10px}
 .settings{grid-row:2;position:relative;inset:auto;width:100%;height:calc(78px + env(safe-area-inset-bottom));padding:0;display:block;visibility:visible;transform:none;box-shadow:0 -3px 18px #25334015;overflow:hidden;border-top:1px solid var(--border)}
 body[data-panel="tools"] .settings{height:clamp(170px,42dvh,390px)}
 .settings>.panel-heading,.settings .mobile-project-actions{display:none}
 .settings .mobile-close{display:none}
 body[data-panel="tools"] .settings .mobile-close{display:block;top:6px;right:8px;width:30px;height:30px;font-size:22px}
 .settings>.tool-section{inset:0 0 calc(78px + env(safe-area-inset-bottom)) 0;visibility:hidden}
 body[data-panel="tools"] .settings>.tool-section[open]{visibility:visible}
 .settings>.tool-section[open]>.tool-content{padding:12px 18px 28px;touch-action:pan-y}
 .active-tool-title{padding-right:34px;margin-bottom:14px}
 .tool-navigation{position:absolute;top:auto;left:0;right:0;bottom:0;width:100%;height:calc(78px + env(safe-area-inset-bottom));display:flex;gap:4px;overflow-x:auto;overflow-y:hidden;border:0;border-top:1px solid var(--border);padding:4px 6px calc(4px + env(safe-area-inset-bottom));touch-action:pan-x;background:#eef3f6}
 .tool-navigation button{flex:0 0 82px;width:82px;min-height:64px;margin:0;font-size:10px;padding:5px 3px}
 .tool-navigation button[aria-pressed=true]{box-shadow:inset 0 -3px #335fc5}
 .scene-caption{display:none}.view-controls{max-width:calc(100% - 12px);margin-bottom:5px;padding:3px;gap:1px}
 .view-controls button{padding:7px 10px;min-height:32px;font-size:10px}
 .manual-controls{margin-bottom:5px}.manual-controls button{padding:5px 12px}
 .preview-bottom{min-height:36px;padding:3px 10px;gap:6px}.preview-bottom>span{font-size:9px;max-width:190px;line-height:1.3}
 .export-panel{inset:auto 0 calc(78px + env(safe-area-inset-bottom));width:100%;height:min(52dvh,480px);max-height:calc(100% - 120px);padding:44px 20px 24px;transform:translateY(110%);border-radius:14px 14px 0 0;overflow:auto}
 body[data-panel="export"] .export-panel{transform:none}
 .editing-cover .cover-editor{inset:48px 0 0}
 .editing-cover #viewport{display:block;position:absolute;width:80px;height:94px!important;bottom:40px;right:10px;z-index:3}
 .editing-cover .editor-toolbar{min-height:44px;flex-shrink:0}.editing-cover .editor-help{font-size:9px;padding:5px 10px}
 .settings input[type=number],.settings select{font-size:16px!important}
}
@media(max-width:850px) and (max-height:500px){
 body[data-panel="tools"] .settings{height:170px}.topbar{height:44px;flex-basis:44px}
 .preview-bottom>span{display:none}.manual-controls{position:absolute;right:8px;top:8px}.manual-controls>span{display:none}
 .preview-bottom{position:absolute;right:5px;bottom:3px;border:0}.view-controls{align-self:flex-start;margin-left:6px}
}
#exportKindBox{padding-bottom:18px;border-bottom:1px solid var(--border)}
#exportKindBox .hint{font-size:11px;line-height:1.55}
.download-actions{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0}
.download-actions a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px}
#readyFileName{overflow-wrap:anywhere}#downloadReadyStatus{font-size:12px;color:var(--muted)}
#downloadReady{max-height:90dvh;overflow:auto}
[aria-busy=true]{cursor:progress}
.layer-list{display:flex;flex-direction:column;gap:7px;margin:14px 0}.layer-row{display:grid;grid-template-columns:28px minmax(0,1fr) 44px 32px;gap:4px;align-items:center;padding:6px;border:1px solid var(--border);border-radius:7px;background:#f5f7fa}.layer-row.selected{border-color:#335fc5;box-shadow:inset 3px 0 #335fc5;background:#edf2ff}.layer-row input{min-width:0;width:100%;font-size:11px;border:0;background:transparent;padding:6px 2px;color:var(--ink)}.layer-row button{font-size:10px;min-height:32px;padding:3px}.scope-controls{display:flex;justify-content:center;gap:4px;margin:0 6px 7px;flex-shrink:0}.scope-controls button{font-size:11px;padding:7px 12px;border:1px solid #bac8d7;border-radius:5px;background:#ffffffb5}.scope-controls button[aria-pressed=true]{color:#244caa;border-color:#335fc5;background:#edf2ff;font-weight:600}.editing-cover .scope-controls{display:none}@media(max-width:850px){.scope-controls{margin-bottom:4px}.scope-controls button{padding:5px 10px;font-size:10px}.layer-row input{font-size:16px}.layer-row{grid-template-columns:28px minmax(0,1fr) 50px 34px}}@media(max-width:850px) and (max-height:500px){.scope-controls{position:absolute;right:10px;top:45px}}