:root { color-scheme: dark; font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #000; color: #f4f2ef; }
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; }
.page { min-height: 100svh; display: grid; place-items: center; padding: 24px 20px; }
.spin-viewer { width: min(100%, 520px); }
.viewer-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 0 12px 12px; }
.viewer-heading h1 { margin: 0; font-size: 17px; font-weight: 650; letter-spacing: .14em; }
.viewer-heading span { font-size: 12px; color: #aaaeb0; letter-spacing: .04em; }
.spin-stage { position: relative; width: min(100%, calc((100svh - 210px) * .8)); min-width: min(240px, 100%); aspect-ratio: 4 / 5; margin: 0 auto; touch-action: pan-y; cursor: grab; border-radius: 8px; user-select: none; -webkit-user-select: none; outline-offset: 4px; }
.spin-stage.is-dragging { cursor: grabbing; }
.spin-stage img { width: 100%; height: 100%; display: block; object-fit: contain; pointer-events: none; user-select: none; -webkit-user-drag: none; }
.spin-stage:focus-visible, button:focus-visible { outline: 2px solid #e66000; outline-offset: 4px; }
.viewer-controls { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 12px; }
.viewer-controls button, .viewer-message button { appearance: none; border: 1px solid #424749; background: #1d2123; color: #f4f2ef; border-radius: 999px; min-width: 44px; min-height: 44px; padding: 8px 16px; cursor: pointer; font-size: 13px; }
.viewer-controls button:first-child, .viewer-controls button:last-child { font-size: 21px; padding: 5px 12px; }
button:hover { background: #2b3032; }
button:disabled { opacity: .45; cursor: default; }
.viewer-help { text-align: center; margin: 15px 0 0; color: #a7adb0; font-size: 12px; line-height: 1.5; }
.viewer-message { display: flex; justify-content: center; align-items: center; gap: 10px; min-height: 40px; margin-top: 3px; color: #c2c6c8; font-size: 12px; text-align: center; }
.viewer-message button { min-height: 44px; padding: 6px 12px; }
.loading-indicator { position: absolute; bottom: 4px; left: 50%; width: 6px; height: 6px; border-radius: 50%; background: #e66000; }
[hidden] { display: none !important; }
@media (max-width: 480px) { .page { padding: 20px 12px; } .viewer-heading { padding-inline: 12px; } .viewer-help { font-size: 11px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }