@import url("tokens.css?v=lvg-brand-1");

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { color: var(--color-ink); background: var(--color-paper-2); font-family: var(--font-body); }
.viewer { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 360px; }
.viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1rem 0; }
.eyebrow { font-size: 0.625rem; letter-spacing: 0.16em; color: var(--color-ink-2); }
h1 { margin: 0.25rem 0 0; font-size: 1.25rem; font-weight: 600; }
model-viewer { display: block; flex: 1; width: 100%; min-height: 0; --progress-bar-color: var(--color-ink); --progress-bar-height: 2px; }
button { min-width: 44px; min-height: 44px; border: 1px solid var(--color-rule); border-radius: var(--radius-control); padding: 0.5rem 0.75rem; background: var(--color-paper); color: var(--color-ink); font: inherit; cursor: pointer; }
button:hover { background: var(--color-accent); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--color-ink); outline-offset: 3px; }
button:disabled { opacity: 0.4; cursor: wait; }
#expand { font-size: 0.875rem; white-space: nowrap; }
.viewer-footer { padding: 0 0.75rem 0.75rem; text-align: center; }
.controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.25rem; }
.controls button { font-size: 1.25rem; }
.controls .reset { font-size: 0.75rem; }
#instructions { margin: 0.5rem 0 0; color: var(--color-ink-2); font-size: 0.6875rem; line-height: 1.5; }
.touch-help { display: none; }
.load-state { position: absolute; top: 45%; left: 1rem; right: 1rem; display: grid; justify-items: center; gap: 0.75rem; font-size: 0.875rem; text-align: center; }
.load-state[hidden], [hidden] { display: none; }
progress { width: min(12rem, 80%); height: 3px; accent-color: var(--color-ink); }
.no-script { position: absolute; inset: 35% 1rem auto; padding: 1rem; background: var(--color-paper); text-align: center; }
.no-script a { color: inherit; }
@media (pointer: coarse) { .desktop-help { display: none; } .touch-help { display: inline; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }