*{box-sizing:border-box}body{margin:0;font:15px system-ui,sans-serif;color:#203235;background:#f6f5f1}button,input,select{font:inherit}button{cursor:pointer}header{display:flex;justify-content:space-between;padding:22px 4%;border-bottom:1px solid #ddd;background:#fff}header b{letter-spacing:2px}header span{color:#727b77;font-size:12px}main{max-width:1380px;margin:auto;padding:30px}h1{font-size:32px;margin:0 0 8px}h2{font-size:18px;margin:0 0 18px}.lead{color:#687571}.layout{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(320px,1fr);gap:24px;margin-top:26px}.viewer{position:sticky;top:15px;align-self:start;background:#e9e7df;border:1px solid #dedbd1;border-radius:20px;overflow:hidden}.tools{display:flex;gap:8px;padding:15px;flex-wrap:wrap}button{padding:10px 15px;border:1px solid #d4d8d3;background:#fff;border-radius:9px;color:#203235}button.active,.primary{background:#244e47;color:white;border-color:#244e47}canvas{width:100%;height:490px;display:block;touch-action:none}.foot{padding:16px 20px;background:#f0eee7;display:flex;justify-content:space-between;font-size:13px}.panel{background:#fff;padding:24px;border-radius:17px;border:1px solid #e0e3dd;margin-bottom:16px}.types{display:flex;gap:7px;flex-wrap:wrap}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}label{display:block;color:#61716b;font-size:12px;margin-bottom:15px}input,select{display:block;width:100%;padding:10px;margin-top:6px;border:1px solid #cdd3ce;border-radius:7px;background:#fff;color:#203235}input[type=checkbox]{width:auto;display:inline}input[type=color]{height:40px;padding:3px}.msg{padding:14px;border-radius:8px;background:#fff1da;color:#77501e;font-size:13px}.ok{color:#235747;background:#e9f2eb}.error{background:#fce6df;color:#923c2d}.price{font-size:22px;font-weight:700;margin:10px 0}.muted{font-size:12px;color:#718079;line-height:1.6}.section{background:#f5f6f2;padding:12px;border-radius:9px;margin:10px 0}.section b{font-size:13px}.section .grid{margin-top:8px}details summary{cursor:pointer;font-weight:600;margin-bottom:16px}form .grid{grid-template-columns:1fr 1fr}button:disabled{opacity:.5;cursor:not-allowed}.actions{display:flex;gap:8px;flex-wrap:wrap}.status{white-space:pre-line;font-size:13px;line-height:1.6}#file{display:none}@media(max-width:850px){main{padding:18px}.layout{grid-template-columns:1fr}.viewer{position:relative;top:0}canvas{height:350px}h1{font-size:26px}.panel{padding:18px}header span{display:none}}
/* Original supplied logo, centered in a compact header. Image bytes are unmodified. */
header{align-items:center;gap:16px}.mb-brand{display:flex;align-items:center;justify-content:flex-start;width:270px;max-width:calc(100% - 106px);height:46px;overflow:hidden;flex-shrink:1}.mb-brand img{display:block;width:270px;max-width:100%;height:auto;flex-shrink:0}.mb-brand:focus-visible{outline:2px solid #244e47;outline-offset:3px}

.pal-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:8px;max-height:250px;overflow:auto;margin:12px 0 20px;padding:3px}.pal-card{padding:6px;text-align:left;min-width:0;display:flex;flex-direction:column;gap:6px;min-height:100px}.pal-card img,.pal-chip{width:100%;height:58px;object-fit:cover;border-radius:5px;background:#eee}.pal-card span:last-child{font-size:11px;line-height:1.3;overflow-wrap:anywhere}.pal-card[aria-pressed=true]{outline:2px solid #244e47;border-color:#244e47;background:#eef4ef}.pal-card:focus-visible{outline:2px solid #244e47}.pal-card small{color:#8b4728;font-size:10px}.panel h3{font-size:14px;margin:14px 0 4px}#palLoading{margin:10px 0;min-height:20px}

/* Desktop workspace: stable panes, independent settings scrolling. */
.viewer{user-select:none;-webkit-user-select:none}
#scene{cursor:grab;overscroll-behavior:contain}
#scene:active{cursor:grabbing}
.settings:focus-visible{outline:2px solid #244e47;outline-offset:3px;border-radius:17px}
.pal-list{overscroll-behavior-y:contain}
@media(min-width:851px){
 html{height:100%;overflow:hidden}
 body{height:100vh;height:100dvh;display:flex;flex-direction:column;overflow:hidden}
 header{flex:0 0 auto;padding-top:12px;padding-bottom:12px}
 main{width:100%;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;padding:18px 30px}
 main>h1,main>.lead{flex:0 0 auto}
 main>.lead{margin:0}
 .layout{flex:1 1 auto;min-height:0;margin-top:18px;align-items:stretch}
 .viewer{position:relative;top:auto;align-self:stretch;min-height:0;display:flex;flex-direction:column}
 .viewer .tools,.viewer .foot{flex:0 0 auto}
 .viewer #validation{flex:0 0 auto;max-height:20%;overflow-y:auto;overscroll-behavior:contain}
 #scene{flex:1 1 0;height:0;min-height:0}
 .settings{min-width:0;min-height:0;height:100%;overflow-y:auto;overflow-x:hidden;overscroll-behavior-y:contain;scrollbar-gutter:stable;overflow-anchor:none;padding-right:6px}
 .settings>.panel:last-child{margin-bottom:0}
}
@media(min-width:851px) and (max-height:650px){
 header{padding-top:6px;padding-bottom:6px}.mb-brand{height:32px}
 main{padding-top:10px;padding-bottom:10px}h1{font-size:24px}.layout{margin-top:10px}
 .viewer .tools{padding:8px;gap:6px}.viewer button{padding:7px 10px}.viewer .foot{padding:8px 12px}
}

/* Explicit hit area: canvas bitmap resizing cannot collapse the flex item. */
.scene-stage{position:relative;height:490px;min-width:0;overflow:hidden;touch-action:none}
.scene-stage #scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;pointer-events:auto}
.orbit-tools{display:flex;flex:0 0 auto;gap:6px;justify-content:center;flex-wrap:wrap;padding:5px 10px}
.orbit-tools button{padding:6px 10px;font-size:12px}
@media(min-width:851px){.scene-stage{flex:1 1 0;height:auto;min-height:80px}.viewer #scene{flex:none;height:100%;min-height:0}}
@media(max-width:850px){.scene-stage{height:350px}}

#scene.panning,#scene.panning:active{cursor:move}.mouse-help{flex:0 0 auto;margin:0;padding:2px 12px 6px;text-align:center;font-size:11px;line-height:1.4;color:#536059}@media(pointer:coarse){.mouse-help{display:none}}

.angle-label{display:flex;align-items:center;gap:6px;margin:0}.angle-label select{width:132px;margin:0;padding:5px;font-size:12px}.edit-history{display:flex;gap:8px;margin-bottom:12px}.edit-history button{padding:6px 12px;font-size:12px}.orbit-tools{align-items:center}.viewer #validation.ok{max-height:none;padding:8px 12px;font-size:11px}.mouse-help{font-size:10px}

/* Model-first workspace, compact primary controls and optional secondary controls. */
.viewer-toolbar{position:relative;align-items:center;gap:6px;padding:7px 9px;z-index:2}
.view-buttons{display:flex;gap:4px;flex-wrap:wrap}
.viewer-toolbar button,.viewer-toolbar summary{padding:6px 9px;font-size:12px;line-height:1.3;min-height:30px}
.viewer-toolbar .angle-label{margin-left:auto}
.angle-label>span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
.viewer-toolbar .angle-label select{width:122px;padding:5px 6px;min-height:30px}
.extra-controls{position:relative;margin:0}
.extra-controls summary{margin:0;border:1px solid #d4d8d3;border-radius:7px;background:#fff;color:#203235;font-weight:400;cursor:pointer;white-space:nowrap}
.extra-controls[open] summary{border-color:#244e47;background:#eef4ef}
.extra-menu{position:absolute;right:0;top:calc(100% + 6px);width:270px;padding:10px;background:#fff;border:1px solid #d4d8d3;border-radius:10px;box-shadow:0 8px 24px #20323522;z-index:3}
.extra-menu .orbit-tools{padding:0;display:grid;grid-template-columns:1fr 1fr}
.extra-menu .mouse-help{display:block;margin-top:8px;padding:0;line-height:1.5}
.viewer .slider-tools{padding:6px 12px;gap:14px;align-items:end}
.slider-tools label{font-size:11px;line-height:1.2}
.slider-tools input[type=range]{margin-top:3px;padding:0;min-height:20px}
.viewer .foot{padding:7px 12px;font-size:11px}
.viewer #validation.ok{padding:5px 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:24px}
@media(min-width:851px){
 header{padding:8px 24px}.mb-brand{height:34px;width:230px}.mb-brand img{width:230px}
 main{max-width:1760px;padding:12px 20px}main>h1{font-size:23px;line-height:1.2;margin-bottom:4px}main>.lead{font-size:12px;line-height:1.4}
 .layout{grid-template-columns:minmax(0,1.9fr) minmax(330px,.85fr);gap:16px;margin-top:10px}
 .viewer{border-radius:14px}.settings .panel{padding:18px;margin-bottom:12px}.settings h2{font-size:16px;margin-bottom:12px}
}
@media(min-width:851px) and (max-width:1150px){.layout{grid-template-columns:minmax(0,1fr) 330px}.viewer-toolbar .angle-label{margin-left:0}}
@media(max-width:850px){
 .viewer-toolbar{gap:6px;padding:8px}.viewer-toolbar button,.viewer-toolbar summary{min-height:40px;padding:8px 10px}.viewer-toolbar .angle-label{margin-left:0}.viewer-toolbar .angle-label select{min-height:40px}
 .scene-stage{height:430px;height:clamp(380px,55svh,600px)}
 .extra-menu{position:fixed;right:16px;top:30%;width:min(280px,calc(100vw - 32px))}
}