:root { font-family: system-ui, sans-serif; color: #272727; background: var(--viewer-background, #ffffff); }
body, #viewer, #viewer-canvas { background: var(--viewer-background, #ffffff); }
* { box-sizing: border-box; }
body { margin: 0; }
#viewer { position: relative; width: 100%; height: 100vh; height: 100dvh; overflow: hidden; }
#viewer-canvas { display: block; width: 100%; height: 100%; touch-action: none; }
#status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 24px; text-align: center; }
#status-message { max-width: 36rem; line-height: 1.6; }
#status:not([data-error="true"]) #status-message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#status[data-error="true"] { color: #8a2929; }
#spinner { position: relative; width: 52px; height: 52px; flex: none; animation: loader-orbit 1.4s linear infinite; }
#spinner > span { position: absolute; inset: 0; transform: rotate(calc(var(--i) * 45deg)); }
#spinner > span::after { content: ""; position: absolute; top: 0; left: calc(50% - 4.5px); width: 9px; height: 9px; border-radius: 50%; background: #003b57; animation: loader-chase 1.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.175s); }
#controls-hint { position: absolute; bottom: 16px; left: 0; width: 100%; padding: 0 16px; text-align: center; font-size: 13px; pointer-events: none; }
[hidden] { display: none !important; }
#metal-controls { position: absolute; top: 12px; left: 12px; padding: 8px 10px; background: #fffffff0; border: 1px solid #ddd; border-radius: 4px; font-size: 13px; }
#metal-color { margin-left: 6px; padding: 4px; }
#metal-feedback { display: block; color: #8a2929; }
noscript { position: absolute; inset: 40% 20px auto; text-align: center; background: #f5f5f3; }
@keyframes loader-orbit { to { transform: rotate(360deg); } }
@keyframes loader-chase { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.4444); opacity: 0.45; } }
@media (prefers-reduced-motion: reduce) {
  #spinner { animation: none; }
  #spinner > span::after { animation: none; transform: scale(calc(0.45 + var(--i) * 0.075)); opacity: 0.75; }
}