:root { color-scheme: light; font-family: system-ui, -apple-system, Segoe UI, sans-serif; color: #142033; background: #edf3f7; }
* { box-sizing: border-box; }
body { margin: 0; }
.viewer-shell { max-width: 1100px; margin: auto; padding: 16px; }
h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.8rem); }
.description, .hint { color: #405166; }
.stage { min-height: 420px; height: min(70vh, 650px); position: relative; overflow: hidden; border-radius: 12px; background: linear-gradient(#dbeef5, #f8f5dd); box-shadow: 0 4px 20px #001c3322; }
model-viewer { display: block; width: 100%; height: 100%; --poster-color: transparent; }
.controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
button { border: 0; border-radius: 6px; padding: 9px 12px; background: #142f52; color: #fff; cursor: pointer; font-weight: 600; }
button:hover { background: #204b7c; }
.error { position: absolute; inset: 10%; padding: 16px; text-align: center; overflow: auto; background: #fff; border: 1px solid #b91c1c; border-radius: 8px; color: #7f1d1d; }
.error img { display: block; max-width: min(100%, 360px); max-height: 180px; margin: 10px auto; object-fit: contain; }
@media (max-width: 600px) { .viewer-shell { padding: 8px; } .stage { min-height: 360px; height: 65vh; } }