: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; }
.light-sweep { position:absolute; inset:-20%; pointer-events:none; z-index:1; opacity:.28; background:radial-gradient(ellipse 24% 55% at 22% 50%,rgba(255,255,255,.34),rgba(255,255,255,.08) 35%,transparent 70%); animation:light-sweep 28s ease-in-out infinite alternate; will-change:transform; }
@keyframes light-sweep { from { transform:translateX(-18%); } to { transform:translateX(34%); } }
@media (prefers-reduced-motion: reduce) { .light-sweep { animation:none; } }
.vignette { position:absolute; inset:0; pointer-events:none; z-index:2; }
.vignette-none { display:none; }
.vignette-dark { background:radial-gradient(ellipse at center, transparent 42%, rgba(0,0,0,.16) 68%, rgba(0,0,0,.52) 100%); }
.vignette-light { background:radial-gradient(ellipse at center, transparent 42%, rgba(255,255,255,.16) 68%, rgba(255,255,255,.55) 100%); }
.controls { position: absolute; right: 12px; bottom: 12px; z-index:3; display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
button { border: 0; border-radius: 6px; padding: 9px 12px; background: #142f52; color: #fff; cursor: pointer; font-weight: 600; }
button:hover { background: #204b7c; }
button:focus-visible { outline: 3px solid #f8d45a; outline-offset: 2px; }
button:disabled { cursor: wait; opacity: .72; }
.animation-action { background: #b45309; }
.animation-action:hover { background: #d97706; }
.animation-status { min-height: 1.5em; margin: 8px 0 0; color: #405166; font-weight: 600; }
.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; } }