:root { font-family: 'DM Sans', system-ui, sans-serif; color: #252724; background: #f7f6f3; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
:focus-visible { outline: 2px solid #9b7d55; outline-offset: 3px; }
.viewer-page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.viewer-header { min-height: 62px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e6e2dc; gap: 20px; }
.viewer-header a { color: #6b6b65; font-size: .8rem; font-weight: 700; text-decoration: none; }
.viewer-header a:hover { color: #252724; }
.viewer-header strong { font-size: .85rem; text-align: right; }
.viewer-main { min-height: 0; flex: 1; display: flex; flex-direction: column; }
.viewer-stage { min-height: 340px; flex: 1; position: relative; background: radial-gradient(ellipse at center, #fff 0, #f6f4ef 68%, #eeeae2 100%); }
model-viewer { display: block; position: absolute; inset: 0; width: 100%; height: 100%; background: transparent; --progress-bar-color: #a48762; }
.ar-button { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); min-height: 42px; padding: 0 20px; border: 1px solid #292b28; border-radius: 6px; background: #292b28; color: white; cursor: pointer; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.ar-button:hover { background: #41443e; }
.viewer-controls { min-height: 82px; padding: 12px 22px; display: flex; align-items: center; justify-content: center; gap: 9px; border-top: 1px solid #e6e2dc; }
.viewer-tool { min-height: 42px; padding: 0 16px; border: 1px solid #d9d6cf; border-radius: 5px; background: #fff; color: #292b28; cursor: pointer; font-size: .76rem; font-weight: 700; }
.viewer-tool:hover:not(:disabled) { background: #eae7e0; }
.viewer-tool:disabled { opacity: .5; cursor: wait; }
.viewer-hint { margin: 0; padding: 0 18px 16px; color: #81827b; font-size: .73rem; line-height: 1.5; text-align: center; }
.is-embedded .viewer-header { display: none; }
.is-embedded .viewer-page { min-height: 100dvh; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@media (max-width: 640px) { .viewer-controls { min-height: 68px; padding: 9px 10px; gap: 5px; } .viewer-tool { min-height: 42px; padding: 0 10px; font-size: .72rem; } .viewer-hint { padding-bottom: 12px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }