.spin{width:100%;height:100%;position:relative}.spin-stage{cursor:grab;-webkit-user-select:none;user-select:none;touch-action:pan-y;outline:none;position:absolute;inset:0}.spin-stage.is-dragging{cursor:grabbing}.spin-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--marigold);border-radius:inherit}.spin-stage img{object-fit:contain;opacity:0;-webkit-user-drag:none;pointer-events:none;width:86%;height:81%;transition:opacity .18s ease-out;position:absolute;inset:7% 7% 12%}.spin-stage img.on{opacity:1}.spin-dots{border-radius:var(--r-pill);z-index:2;background:#ffffffbf;gap:2px;padding:4px;display:flex;position:absolute;bottom:12px;left:50%;transform:translate(-50%)}.spin-dots button{cursor:pointer;background:0 0;border:0;border-radius:50%;width:40px;height:40px;padding:0;position:relative}.spin-dots button:after{content:"";transition:transform .3s var(--ease-spring), background .3s;background:#2a211e47;border-radius:50%;position:absolute;inset:14px}.spin-dots button.on:after{background:var(--lagoon);transform:scale(1.4)}.spin-dots button:hover:after{background:var(--walnut)}.spin-thumbs .spin-dots{border-radius:var(--r-md);justify-content:center;gap:6px;padding:6px;left:12px;right:12px;transform:none}.spin-thumbs .spin-dots button{background:var(--linen);width:64px;height:52px;box-shadow:inset 0 0 0 1px var(--line);border-radius:10px;overflow:hidden}.spin-thumbs .spin-dots button:after{display:none}.spin-thumbs .spin-dots button img{object-fit:cover;width:100%;height:100%}.spin-thumbs .spin-dots button.on{box-shadow:inset 0 0 0 2px var(--lagoon)}.spin-hint{font:600 12px var(--body);color:var(--cocoa);border-radius:var(--r-pill);pointer-events:none;background:#ffffffbf;align-items:center;gap:8px;padding:8px 12px;display:inline-flex;position:absolute;top:16px;left:16px}.spin-hint i{border:2px solid var(--cocoa);border-radius:50%;width:14px;height:14px;animation:1.6s ease-in-out infinite nf-nudge}@keyframes nf-nudge{0%,to{transform:translate(-4px)}50%{transform:translate(4px)}}@media (prefers-reduced-motion:reduce){.spin-hint i{animation:none}.spin-stage img{transition:none}}@media (max-width:600px){.spin-thumbs .spin-dots button{width:48px;height:40px}}.spin-stage img.macro{object-fit:cover;border-radius:0;width:100%;height:100%;inset:0}