*{box-sizing:border-box}html,body{margin:0;min-width:300px;background:#fff;color:#192d39;font-family:Arial,Helvetica,sans-serif}button,input,select{font:inherit}button,select,summary,.upload-button{cursor:pointer}button{padding:9px 13px;border:1px solid #cfd9df;border-radius:7px;background:#fff;color:#24404e;font-size:13px;font-weight:600}button:hover{background:#eef3f5;border-color:#8ea8b8}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,canvas:focus-visible{outline:3px solid #1597b7;outline-offset:3px}[hidden]{display:none!important}.viewer{max-width:1600px;margin:0 auto;padding:24px;min-height:680px}.viewer-head{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:20px}.brand{font-size:13px;font-weight:800;letter-spacing:.11em}.brand span{font-size:10px;color:#7b898f;letter-spacing:.14em;margin-left:12px}h1{font-size:clamp(22px,3vw,35px);font-weight:600;letter-spacing:-.04em;margin:9px 0 0}#fullscreen{white-space:nowrap;font-size:14px}.viewer-layout{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:20px}.model-panel{border:1px solid #dde5e9;border-radius:12px;overflow:hidden;min-width:0;background:#e7ecef}.model-toolbar{padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:10px;background:#fff;border-bottom:1px solid #e1e7eb;font-size:13px}.camera-buttons{display:flex;gap:5px}.camera-buttons button{font-size:12px;padding:7px 9px}.canvas-wrap{height:clamp(380px,57vh,640px);position:relative;min-width:0}.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.model-caption{position:absolute;left:18px;right:18px;bottom:16px;display:flex;justify-content:space-between;gap:10px;color:#526875;font-size:11px;pointer-events:none}.model-caption span:first-child{font-weight:700;color:#243b49}.sample-bar{padding:14px 16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#fff;border-top:1px solid #dde5e9}.sample-bar>span{font-size:11px;color:#6e818a;margin-right:2px}.sample-bar button[aria-pressed=true]{background:#1c4358;border-color:#1c4358;color:#fff}.upload-button{padding:10px 12px;border-radius:7px;background:#1b4156;color:#fff;display:inline-flex;align-items:center;font-size:12px;font-weight:600;margin-left:auto}.upload-button input{width:1px;height:1px;position:absolute;overflow:hidden;opacity:0}.upload-button:focus-within{outline:3px solid #1597b7;outline-offset:3px}.color-panel{border:1px solid #dde5e9;border-radius:12px;overflow:hidden;display:flex;flex-direction:column;min-width:0}.large-swatch{height:132px;padding:22px;display:flex;flex-direction:column;justify-content:end;gap:6px;background:#373f43;color:#fff}.large-swatch span{font-size:12px;letter-spacing:.1em}.large-swatch strong{font-size:19px;font-weight:500}.color-controls{padding:18px;display:flex;flex-direction:column;gap:10px}.color-controls>label{font-size:12px;font-weight:700;margin-top:2px}.color-controls input,.color-controls select{width:100%;padding:10px 9px;border:1px solid #ccd8df;background:#fff;color:#223d4a;border-radius:6px;font-size:12px}.quick-colors{display:grid;grid-template-columns:repeat(6,1fr);gap:7px;margin:1px 0 10px}.quick-colors button{padding:0;height:26px;border-radius:50%;border:1px solid #b7c6ce}.quick-colors button[aria-pressed=true]{outline:2px solid #224e65;outline-offset:2px}.all-colors{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:12px;max-height:230px;overflow:auto;padding:4px}.all-colors button{font-size:10px;padding:8px 2px;border-radius:4px}.color-controls summary{font-size:12px;font-weight:600;padding:7px 0}.privacy-note{margin-top:auto;padding:15px 18px;border-top:1px solid #e2e8ec;background:#f8fafb;color:#5f727c;font-size:11px}.viewer-footer{display:flex;gap:15px;justify-content:space-between;align-items:center;font-size:11px;color:#7b8b94;padding-top:12px;min-height:30px}.viewer-footer p{margin:0;color:#416273}.viewer-footer p[data-error=true]{color:#ac3528}#busyOverlay{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:15px;background:#e7ecefe8;font-size:14px}#modelError{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:25px}.spinner{width:28px;height:28px;border:3px solid #bed0dc;border-top-color:#1c526e;border-radius:50%;animation:spin 1s linear infinite}.model-panel.drag{outline:3px solid #2c7a9c;outline-offset:-3px}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.viewer:fullscreen{max-width:none;width:100vw;height:100vh;padding:20px;background:#fff;display:flex;flex-direction:column}.viewer:fullscreen .viewer-layout{flex:1;min-height:0}.viewer:fullscreen .model-panel{display:flex;flex-direction:column}.viewer:fullscreen .canvas-wrap{height:auto;flex:1;min-height:200px}.viewer:fullscreen .sample-bar{flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:760px){.viewer{padding:14px}.viewer-layout{grid-template-columns:minmax(0,1fr)}.color-panel{display:block}.large-swatch{height:78px;padding:14px}.color-controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.color-controls input,.color-controls select,.color-controls>label{grid-column:1/-1}.quick-colors{grid-column:1/-1;max-width:250px}.color-controls details{grid-column:1/-1}.model-toolbar{flex-wrap:wrap}.canvas-wrap{height:440px}.viewer-head{margin-bottom:14px}.brand span{display:block;margin:5px 0 0}.upload-button{margin-left:0}.viewer-footer{align-items:start}.viewer-footer>span{max-width:120px;text-align:right}.viewer:fullscreen{padding:10px;overflow:auto}.viewer:fullscreen .viewer-layout{display:block}.viewer:fullscreen .canvas-wrap{height:58vh}.viewer:fullscreen .color-panel{margin-top:10px}.viewer:fullscreen .model-panel{display:block}}@media(prefers-reduced-motion:reduce){.spinner{animation:none}}
.sample-bar>label{font-size:12px;color:#526875}.sample-bar>select{border:1px solid #ccd8df;border-radius:6px;padding:9px;color:#223d4a;background:#fff;max-width:100%;font-size:13px}.upload-button:hover{background:#285b75;color:white}@media(max-width:500px){.sample-bar>select{flex:1}.upload-button{width:100%;justify-content:center}}
.db-colors{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:-6px 0 8px;grid-column:1/-1}.db-colors button{font-size:11px;padding:9px 3px;border-color:#bdcbd2}.db-colors button[aria-pressed=true]{outline:2px solid #224e65;outline-offset:2px}
.brand .new-badge{display:inline-flex;background:#e9f3f6;color:#1b526b;border-radius:12px;padding:5px 10px;letter-spacing:.06em;font-weight:700}
.canvas-logo{position:absolute;top:18px;left:18px;width:clamp(128px,18vw,180px);max-width:42%;height:auto;z-index:2;pointer-events:none;user-select:none}.viewer:fullscreen .canvas-logo{width:clamp(140px,15vw,210px)}

.file-upload{position:relative;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:auto}.file-upload input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.file-upload:focus-within{outline:2px solid #21758a;outline-offset:3px}