.figure-viewer{position:relative;aspect-ratio:1;cursor:grab;touch-action:pan-y;background:#050505;isolation:isolate;overflow:hidden;container-type:inline-size}
.figure-viewer>canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block;opacity:0;transition:opacity .28s ease;z-index:2}
.figure-viewer.figure-ready>canvas{opacity:1}
.figure-viewer:not(.figure-ready) canvas{visibility:hidden!important}
.figure-viewer.figure-warming>canvas{visibility:visible!important;opacity:.001;transition:none}
.figure-viewer.figure-ready>img{opacity:0;transition:opacity 0s .28s}
.figure-viewer>.r360,.figure-viewer>.spin-hint,.figure-viewer>.scale-badge{display:none}
.figure-viewer>img{width:100%;height:100%;object-fit:contain;opacity:1;transition:none}
.figure-viewer.figure-direct>canvas{transition:none}
.figure-viewer.figure-ready.figure-direct>img{transition:none}
@media(prefers-reduced-motion:reduce){.figure-viewer>canvas,.figure-viewer.figure-ready>img{transition:none}}
.figure-dragging{cursor:grabbing}
.figure-viewer:focus-visible{outline:3px solid #f5a623;outline-offset:3px}
.figure-controls{position:absolute;inset:0;z-index:4;pointer-events:none;color:#e5dfd3;font:12px/1.4 system-ui,sans-serif;text-align:left;cursor:default}
.figure-topbar{position:absolute;top:12px;left:12px;right:12px;display:flex;flex-wrap:wrap;align-items:flex-start;gap:8px}
.figure-controls button{pointer-events:auto;background:rgba(32,28,22,.96);border:1px solid #605038;border-radius:6px;box-shadow:0 2px 8px #0008;color:#eee6d8}
.figure-controls button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;flex-shrink:0;font:inherit;cursor:pointer;touch-action:manipulation}
.figure-controls button:hover{background:#3b3020;color:#ffc15b;border-color:#bb8840}
.figure-controls button:focus-visible{outline:2px solid #f5a623;outline-offset:2px}
.figure-controls button[aria-pressed=true]{background:#f5a623;border-color:#f5a623;color:#14110e}
.figure-controls svg{display:block;width:20px;height:20px;flex-shrink:0}
.figure-finishes{display:grid;grid-template-columns:repeat(4,44px);gap:4px}
.figure-controls .figure-finish-button{position:relative;width:44px;height:44px}
.figure-swatch{display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid #fff5;border-radius:4px;box-shadow:inset 0 1px 3px #0005}
.figure-swatch-grey{background:#74797d}
.figure-swatch-painted{background:conic-gradient(#bc4238 0 25%,#cbab56 25% 50%,#487653 50% 75%,#426f99 75%)}
.figure-swatch-bronze{background:linear-gradient(135deg,#cbaa70,#9b7545 55%,#634729)}
.figure-swatch-auto{background:linear-gradient(135deg,#74797d 0 50%,#426f99 50% 67%,#cbab56 67% 83%,#487653 83%)}
.figure-swatch-auto svg{width:18px;height:18px;color:#fff;filter:drop-shadow(0 1px 2px #000)}
.figure-controls .figure-finish-button[aria-pressed=true]{background:#3b2d19;border-color:#f5a623;box-shadow:inset 0 0 0 1px #f5a623,0 2px 8px #0008}
.figure-finish-button[aria-pressed=true]::after{content:'✓';position:absolute;right:1px;bottom:0;width:14px;height:14px;border-radius:50%;background:#f5a623;color:#14110e;font-size:11px;font-weight:700;line-height:14px}
.figure-controls button:disabled{opacity:.4;cursor:not-allowed}
@container(max-width:332px){.figure-finishes{grid-template-columns:repeat(2,44px)}}
.figure-expand{margin-left:auto}
.figure-navigation{position:absolute;right:12px;bottom:12px;display:flex;flex-direction:column;pointer-events:auto}
.figure-controls .figure-reset{margin-bottom:8px}
.figure-controls .figure-zoom-in{border-radius:6px 6px 0 0;border-bottom-color:#494033;box-shadow:0 2px 8px #0008}
.figure-controls .figure-zoom-out{border-radius:0 0 6px 6px;border-top:0;box-shadow:0 5px 8px #0006}
.figure-controls .figure-inspect{position:absolute;bottom:48px;left:12px;width:auto;padding:0 12px;color:#ffc15b}
.figure-ready .figure-inspect{display:none}
.figure-status{position:absolute;bottom:12px;left:12px;max-width:calc(100% - 78px);padding:4px 7px;border-radius:4px;background:#080808bf;color:#c8c2b8;font-size:10px;line-height:1.4;pointer-events:none}
.figure-controls [hidden]{display:none!important}
.figure-fullscreen{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#050505;color:#eee;box-sizing:border-box}
.figure-fullscreen[open]{display:block}
.figure-fullscreen::backdrop{background:#000}
.figure-fullscreen .figure-viewer{width:100%;height:100%;aspect-ratio:auto;max-height:none;margin:0;border:0;border-radius:0;touch-action:none}
.figure-fullscreen .figure-topbar{top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right))}
.figure-fullscreen .figure-navigation{right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom))}
.figure-fullscreen .figure-status{left:max(20px,env(safe-area-inset-left));bottom:max(20px,env(safe-area-inset-bottom));font-size:12px}
.figure-fullscreen .figure-inspect{left:20px;bottom:64px}
@media(pointer:coarse){.figure-controls button{width:44px;height:44px}.figure-controls .figure-inspect{width:auto}.figure-status{max-width:calc(100% - 82px)}}