:root{font-family:Inter,"Segoe UI",sans-serif;color:#283f39;background:#f5f4ef;font-size:14px;--ink:#283f39;--accent:#b9583e;--line:#dddeda;--muted:#77847c}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,.button,select{cursor:pointer}button{color:inherit}button:disabled{cursor:wait;opacity:.5}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
header{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 40px;background:#fafaf7}.brand{display:flex;gap:12px;align-items:center;font-size:25px;font-weight:700;letter-spacing:-1px}.brand-icon{background:var(--ink);color:#f6f4eb;border-radius:10px;padding:0px 13px 5px;font:italic 38px Georgia}.brand-sub{display:block;font-size:8px;letter-spacing:2.5px;margin-top:3px;font-weight:500}.local{font-size:12px;color:#61746a;display:flex;align-items:center;gap:8px}.local i{width:7px;height:7px;background:#668c6c;border-radius:50%}
main{max-width:1600px;margin:auto;display:grid;grid-template-columns:340px minmax(0,1fr);gap:36px;padding:32px 40px}aside{background:#fffefa;border:1px solid var(--line);border-radius:14px;overflow:hidden}.intro{padding:26px 24px 20px;background:#eeefe7}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:650;color:#819083}h1{font:32px Georgia,serif;letter-spacing:-1px;margin:10px 0}p{line-height:1.5}.intro p{font-size:13px;color:#6e7f72;margin:0}section{padding:22px 24px;border-top:1px solid var(--line)}.section-title{display:flex;gap:10px;align-items:center;margin-bottom:18px}.section-title>span{font-size:10px;color:#9baba0}h2{font-size:14px;margin:0;font-weight:600}.drop{border:1px dashed #b7c4b6;border-radius:8px;display:flex;align-items:center;flex-direction:column;padding:16px;gap:5px;cursor:pointer;background:#f6f8f2}.drop.over{background:#e2eddf}.drop input{display:none}.drop strong{font-size:12px}.drop>span:last-child{font-size:11px;color:#819083}.upload-icon{font-size:25px;color:#6c826d}.source{display:flex;align-items:center;gap:14px;margin-top:16px}.source img{width:66px;height:52px;object-fit:contain;background:white}.source strong{font-size:12px;display:block;overflow-wrap:anywhere}.text-button{border:0;padding:6px 0 0;background:none;color:var(--accent);font-size:11px}.hint{font-size:11px;color:#859087;margin:12px 0 0;line-height:1.6}
.control{margin:18px 0}.control-head{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-bottom:9px}.number-wrap{display:flex;gap:5px;align-items:center;color:#8b958d;font-size:10px}.number-wrap input{width:58px;border:1px solid #dce1d7;border-radius:4px;background:#fffefa;text-align:right;padding:5px;color:#3b5143}.control input[type=range]{width:100%;height:4px;accent-color:var(--accent);display:block;cursor:pointer}.presets{display:flex;gap:7px}.presets button{flex:1;padding:7px 0;border:1px solid var(--line);background:transparent;border-radius:5px;font-size:12px}.presets span{font-size:9px}.presets button.active,.choices button.active{border-color:#c9a18d;background:#f7eae0;color:#a55139}.toggle{display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:10px;margin-top:16px}.toggle small{display:block;color:#89948a;font-size:10px;margin-top:4px}input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;cursor:pointer}.choices{display:flex;gap:6px}.choices button{border:1px solid var(--line);background:#fffefa;border-radius:6px;flex:1;padding:10px 2px;font-size:10px}.choices span{font-size:22px;display:block;margin-bottom:4px}select{width:100%;padding:10px;border:1px solid var(--line);border-radius:6px;background:#fffefa;font-size:12px;color:var(--ink)}.field-label{font-size:12px;display:block;margin-bottom:9px}.settings-actions{display:flex;gap:8px;margin-top:15px}.settings-actions button,.button{font-size:11px;background:none;border:1px solid var(--line);padding:8px;border-radius:5px}
.workspace{position:sticky;top:20px;align-self:start;min-width:0}.workspace-top{display:flex;align-items:center;justify-content:space-between;padding:3px 0 22px}.workspace-top h2{font:27px Georgia,serif;margin-top:8px}.pill{border:1px solid #cfdbca;background:#e9efdf;color:#59704f;padding:6px 10px;font-size:10px;border-radius:20px}.pill.error{background:#fae7df;color:#a24930;border-color:#e8c6b7}.preview{position:relative;height:clamp(390px,59vh,750px);background:#e9ece4;border:1px solid #d6dccf;border-radius:12px;overflow:hidden}#canvas{position:absolute;inset:0}#canvas canvas{display:block;width:100%;height:100%}.viewbar{position:absolute;top:18px;left:18px;z-index:2;display:flex;background:#fffef9e6;border:1px solid #d7ddcf;border-radius:6px;padding:3px}.viewbar button{border:0;background:none;padding:7px 12px;font-size:11px;border-radius:4px}.viewbar button.active{background:#dfe6d6;color:#34513d}.preview-options{position:absolute;right:16px;top:20px;z-index:2;font-size:11px;display:flex;gap:12px}.preview-options label{display:flex;align-items:center;gap:5px}.canvas-caption{position:absolute;bottom:16px;left:20px;right:20px;display:flex;justify-content:space-between;font-size:10px;color:#7a8b78;pointer-events:none}.canvas-caption span:first-child{letter-spacing:1.5px}.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;background:#e9ece4aa;z-index:3;color:#456048;font-size:12px}.spinner{width:18px;height:18px;border:2px solid #bbcab1;border-top-color:#49654b;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.stats{display:grid;grid-template-columns:1.4fr 1fr 1fr;margin-top:16px;border:1px solid var(--line);border-radius:9px;background:#fffefa}.stats>div{padding:18px 20px;border-right:1px solid var(--line)}.stats>div:last-child{border:0}.stats span{display:block;font-size:10px;color:#81907e;margin-bottom:7px}.stats strong{font-size:15px;font-weight:550}.warning{background:#f7eee0;border:1px solid #e9d7b8;color:#866737;padding:11px 14px;border-radius:7px;font-size:12px;line-height:1.6;margin-top:10px}.warning.error{background:#fae5df;color:#a34129;border-color:#efc8bc}.export{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:24px}.export>div{flex:1;min-width:180px}.export strong{font-size:13px}.export p{font-size:11px;color:#879184;margin:5px 0}.primary{background:var(--accent);border:1px solid var(--accent);color:white;padding:13px 20px;border-radius:7px;font-size:12px}.secondary{background:transparent;border:1px solid #cbd4c5;padding:13px 14px;border-radius:7px;font-size:12px}.footer-note{font-size:10px;color:#8d9887;margin-top:24px;line-height:1.8}[hidden]{display:none!important}
@media(max-width:1050px){main{padding:24px;gap:22px;grid-template-columns:300px minmax(0,1fr)}.preview-options{top:65px}.stats>div{padding:14px 10px}.stats strong{font-size:12px}}
@media(max-width:760px){header{padding:0 20px;height:70px}main{display:flex;flex-direction:column;padding:16px}.workspace{position:relative;top:0;order:-1;width:100%}aside{width:100%}.preview{height:380px}.workspace-top h2{font-size:23px}.canvas-caption span:last-child{display:none}}


.color-controls{display:flex;gap:18px;margin:16px 0}.color-controls label{display:flex;align-items:center;gap:8px;font-size:12px}.color-controls input{width:42px;height:32px;padding:2px;border:1px solid var(--line);border-radius:5px;background:#fffefa;cursor:pointer}#colorHint{margin-bottom:20px}
.version{font-size:11px;color:#7d897e;margin-left:12px;margin-right:auto;border:1px solid var(--line);border-radius:5px;padding:4px 7px}

/* Fluid workspace: use the available window rather than a fixed-width page. */
main{max-width:none;grid-template-columns:clamp(290px,23vw,360px) minmax(0,1fr);padding:24px clamp(16px,2.4vw,40px);gap:24px}
.preview{height:max(400px,calc(100dvh - 300px))}
.viewbar{max-width:calc(100% - 32px);flex-wrap:wrap}
.preview-options{top:68px}
#exitViewer{position:absolute;top:16px;right:16px;z-index:10;border:1px solid #c1ccba;border-radius:7px;background:#fffef9d9;padding:10px 14px;color:var(--ink);opacity:.25;transition:opacity .2s}
#exitViewer:hover,#exitViewer:focus-visible{opacity:1}
body.viewer-only{overflow:hidden}
.viewer-only>header,.viewer-only aside,.viewer-only .workspace-top,.viewer-only .stats,.viewer-only #warnings,.viewer-only .export,.viewer-only .footer-note{display:none}
.viewer-only main{display:block;padding:0;margin:0}
.viewer-only .workspace{position:fixed;inset:0;z-index:50;width:100%;height:100dvh}
.viewer-only .preview{width:100%;height:100dvh;border:0;border-radius:0}
.viewer-only .viewbar,.viewer-only .preview-options,.viewer-only .canvas-caption{display:none}
@media(min-width:1000px){aside{max-height:calc(100dvh - 125px);overflow-y:auto;position:sticky;top:16px}.workspace{top:16px}}
@media(max-width:760px){main{display:flex;padding:12px;gap:18px}.preview{height:clamp(350px,65dvh,650px)}.workspace{position:relative;top:0}}
@media(max-width:440px){header{padding:0 12px}.local{font-size:10px}.brand{font-size:21px}.viewbar button{padding:7px 8px;font-size:10px}.stats>div{padding:10px 7px}.stats strong{font-size:11px}}

#displayMode{width:auto;min-width:112px;padding:6px 26px 6px 9px;font-size:11px;background:#fffef9e6;border-color:#c8d1c0}

/* Stable viewer with an independently scrolling settings column. */
.settings-section{border-top:1px solid var(--line)}
.settings-section summary{display:flex;gap:10px;align-items:center;cursor:pointer;padding:16px 20px;list-style:none}
.settings-section summary::-webkit-details-marker{display:none}
.settings-section summary:after{content:'+';margin-left:auto;color:var(--muted)}
.settings-section[open] summary:after{content:'−'}
.settings-section summary>span{font-size:10px;color:#9baba0}
.settings-section summary:focus-visible{outline:2px solid var(--accent);outline-offset:-3px}
.section-content{padding:0 20px 20px}.detail-toggle{display:flex;align-items:center;gap:5px;font-size:11px;margin-top:6px}
main{height:calc(100dvh - 82px);min-height:0;overflow:hidden;padding:14px 20px}
aside{height:100%;max-height:none;min-height:0;overflow-y:auto;position:static;overscroll-behavior:contain;scrollbar-gutter:stable}
.workspace{height:100%;min-height:0;position:static;display:flex;flex-direction:column;overflow:auto}
.workspace-top{padding-bottom:10px}.workspace-top h2{font-size:23px}
.preview{flex:1 0 240px;height:auto;min-height:240px}
.stats{flex-shrink:0;margin-top:5px}.stats>div{padding:9px 12px}
#warnings{max-height:80px;overflow:auto;flex-shrink:0}.warning{margin-top:5px;padding:6px 10px;font-size:11px}
.export{margin-top:10px;gap:7px;flex-shrink:0}.export>div{flex-basis:100%}.export button{padding:8px 10px;font-size:11px}
.footer-note{margin:8px 0}.intro{padding:16px 20px}.intro h1{font-size:26px}
#previewParts{width:auto;padding:6px 9px;font-size:11px}
@media(max-width:760px){main{height:calc(100dvh - 70px);gap:10px;padding:8px 12px}.workspace{height:auto;overflow:visible;flex:0 0 auto}.workspace-top{padding:0 0 5px}.workspace-top .eyebrow{display:none}.workspace-top h2{font-size:18px;margin:0}.preview{flex:none;height:clamp(210px,33dvh,360px);min-height:210px}aside{flex:1;min-height:100px;height:auto}.intro{display:none}#warnings{max-height:48px}.export>div{display:none}.export{margin-top:5px}.detail-toggle{margin-top:3px}.stats>div{padding:5px 8px}.canvas-caption{bottom:9px}}
.viewer-only .detail-toggle{display:none}.viewer-only main{height:100dvh}.viewer-only .workspace{overflow:hidden}.viewer-only .preview{flex:none;height:100dvh;min-height:0}

/* Model details live inside the canvas and never shrink the viewing area. */
.viewer-details{position:absolute;left:16px;bottom:12px;z-index:2;display:flex;flex-direction:column-reverse;align-items:flex-start;gap:5px;max-width:calc(100% - 32px);pointer-events:none}
.viewer-toggles{display:flex;align-items:center;gap:5px;pointer-events:auto}
.viewer-details .detail-toggle{margin:0;padding:3px 7px;border-radius:5px;background:#fffef9d9;pointer-events:auto;color:#40564a}
.viewer-details .stats{display:flex;flex-wrap:wrap;gap:5px 14px;border:0;background:#fffef9df;margin:0;padding:7px 9px;border-radius:5px;box-shadow:none}
.viewer-details .stats>div{padding:0;border:0;display:flex;align-items:baseline;gap:5px}
.viewer-details .stats span{display:inline;font-size:10px;margin:0;color:#607366}
.viewer-details .stats strong{font-size:11px;font-weight:500}
.viewer-only .viewer-details{display:none}
#warnings:empty{display:none}
.export{margin-top:7px}.export>div[hidden]{display:none}

header{height:auto;min-height:70px;padding:12px 20px;gap:10px;flex-wrap:wrap}
header .export{margin:0;margin-left:auto;flex:0 1 auto;justify-content:flex-end}
header .export button{white-space:nowrap}
main{height:calc(100dvh - var(--header-height,82px));padding-bottom:0}
#warnings{position:absolute;left:50%;transform:translateX(-50%);bottom:72px;width:min(540px,65%);max-height:140px;overflow:auto;z-index:3;padding:2px;pointer-events:none}
.warning{display:flex;align-items:center;gap:8px;padding:9px 10px;background:#f8e9d5d9;backdrop-filter:blur(5px);border-color:#dabf99aa;box-shadow:0 2px 10px #0000000c;pointer-events:auto}
.warning>span{flex:1;min-width:0}.warning.error{background:#fae5dfd9}
.warning-info,.warning-close{border:0;background:transparent;color:inherit;padding:3px;flex-shrink:0}.warning-info{text-decoration:underline;font-size:11px}.warning-close{font-size:19px;line-height:1}
#warningDialog{max-width:min(520px,90vw);border:1px solid var(--line);border-radius:12px;padding:24px;background:#fffefa;color:var(--ink)}
#warningDialog::backdrop{background:#152b2466}#warningDialog h2{font-size:20px}#warningExplanation{white-space:pre-line;line-height:1.65;font-size:13px}
@media(max-width:1000px){#warnings{bottom:82px;width:min(540px,90%);max-height:110px}}
@media(max-width:760px){header{padding:8px 12px}header .export{flex-basis:100%;justify-content:flex-start}header .export button{font-size:10px;padding:7px 8px}main{height:calc(100dvh - var(--header-height,110px));padding-bottom:0}.preview{height:clamp(250px,43dvh,420px)}#warnings{bottom:66px;max-height:110px}}

/* Compact header and one aligned viewer toolbar. */
.header-tagline{flex:1;text-align:center;font-size:13px;letter-spacing:2px;color:#819083;font-weight:650}
.version{margin-right:0}header .export{margin-left:0}
.viewer-toolbar{position:absolute;top:18px;left:18px;right:16px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.viewer-toolbar .viewbar{position:static;max-width:none}
.viewer-toolbar .preview-options{position:static;margin-left:auto;gap:8px}
.viewer-only .viewer-toolbar{display:none}
#warnings{bottom:12px;display:flex;flex-direction:column-reverse;gap:6px;max-height:160px;width:min(540px,calc(100% - 300px))}
.warning{margin:0;flex-shrink:0}
aside>.settings-actions{padding:14px 12px;margin:0;flex-wrap:wrap;border-top:1px solid var(--line)}
@media(max-width:1100px){.header-tagline{font-size:11px;letter-spacing:1px}}
@media(max-width:760px){.header-tagline{flex:1;min-width:140px}#warnings{width:calc(100% - 170px);left:auto;right:12px;transform:none;bottom:12px;max-height:120px}.viewer-toolbar{top:12px;left:12px;right:12px;gap:6px}.viewer-toolbar .viewbar button{padding:7px 8px}.warning{font-size:10px;padding:6px;gap:4px}}

.artwork-actions{display:flex;justify-content:flex-end;margin-bottom:8px}#emptyPreview{position:absolute;inset:45% 20px auto;text-align:center;color:#607366;font-size:13px;pointer-events:none}

.artwork-drop{padding:8px;gap:5px;min-height:90px;background:#fff;cursor:pointer}
.artwork-drop img{width:100%;height:90px;object-fit:contain;pointer-events:none}
.artwork-drop #dropHint{font-size:10px;color:#819083}
.artwork-file-row{display:flex;align-items:center;gap:10px;margin-top:7px}
.artwork-file-row strong{font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0}
.artwork-file-row .text-button{padding:3px 0;font-size:11px;flex-shrink:0}
#replaceArtworkDialog,#resetSettingsDialog{max-width:min(440px,90vw);border:1px solid var(--line);border-radius:12px;padding:24px;background:#fffefa;color:var(--ink)}
#replaceArtworkDialog::backdrop,#resetSettingsDialog::backdrop{background:#152b2466}.replace-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:20px}

#exportFormat{width:auto;max-width:170px;padding:7px 9px;font-size:11px}

#publishDialog{width:min(520px,92vw);max-height:88vh;overflow:auto;border:1px solid var(--line);border-radius:12px;padding:24px;background:#fffefa;color:var(--ink)}
#publishDialog::backdrop{background:#152b2466}#publishDialog h2{font-size:20px;margin-top:0}#publishForm{display:grid;gap:12px}#publishForm label{display:grid;gap:5px;font-size:12px;font-weight:600}#publishForm input,#publishForm textarea,#publishForm select{width:100%;box-sizing:border-box}#publishForm textarea{min-height:72px;resize:vertical}#publishedLink{display:flex;gap:8px;align-items:end}#publishedLink label{flex:1}#publishStatus{min-height:18px;margin:0}

.orca-export{display:flex;align-items:center;gap:4px;font-size:10px;color:#61746a}