:root { color-scheme: light; font: 15px/1.6 Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #263024; background: #fff; }
* { box-sizing: border-box; } body { margin: 0; } [hidden] { display: none !important; }
header, main { width: min(1000px, calc(100% - 40px)); margin-inline: auto; } header { padding-block: 20px; border-bottom: 1px solid #e2e7dc; } a { color: #466c32; text-decoration: none; } h1 { margin: 30px 0 6px; font-size: 2rem; font-weight: 600; letter-spacing: -.04em; } .intro { color: #737c6c; margin: 0 0 24px; }
.viewer-card { position: relative; background: #fff; overflow: hidden; border: 1px solid #dce3d5; border-radius: 12px; margin-bottom: 30px; }
.viewer-toolbar { position: absolute; inset: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; z-index: 1; pointer-events: none; } .viewer-toolbar > * { pointer-events: auto; }
.model-switch { display: flex; gap: 4px; } button { min-height: 36px; padding: 5px 11px; border: 1px solid #dbe2d4; border-radius: 6px; background: rgb(255 255 255 / .95); color: #354c28; font: inherit; font-size: .8rem; cursor: pointer; } button:hover { background: #f0f5eb; } button:focus-visible { outline: 3px solid #9aaa52; outline-offset: 3px; } .model-switch button[aria-pressed="true"] { color: #fff; background: #466c32; border-color: #466c32; }
#viewport { background: #fff; aspect-ratio: 1; } #turntable { display: block; width: 100%; height: 100%; object-fit: contain; background: #fff; filter: brightness(1.01); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body.embedded { height: 100vh; overflow: hidden; } .embedded .viewer-card { height: 100%; margin: 0; border: 0; border-radius: 0; } .embedded #viewport { height: 100%; aspect-ratio: auto; }
@media (max-width: 480px) { button { min-height: 44px; } .viewer-toolbar { gap: 8px; padding: 10px; } }