.spin-viewer{background:radial-gradient(ellipse at 50% 44%,#fafbf7 0,#e2e8dc 65%,#d5dece 100%);isolation:isolate}
.spin-stage{position:relative;height:clamp(320px,44vw,600px);cursor:grab;touch-action:pan-y;outline-offset:-4px;direction:ltr;overflow:hidden}
.spin-stage.is-dragging{cursor:grabbing;touch-action:none}
.spin-stage img{position:relative;z-index:1;width:100%;height:100%;object-fit:contain;object-position:center;user-select:none;-webkit-user-drag:none;pointer-events:none;padding:15px 4% 35px;filter:drop-shadow(0 18px 12px #27311b20)}
.spin-watermark{position:absolute;inset-block-start:20px;inset-inline-end:30px;font-size:clamp(90px,14vw,190px);line-height:1;color:#c4cebc55;letter-spacing:-.08em;font-weight:500;z-index:0;pointer-events:none}
.spin-hint{position:absolute;bottom:18px;left:15px;right:15px;text-align:center;font-size:11px;color:var(--muted);z-index:2;pointer-events:none}
.spin-controls{display:flex;align-items:center;gap:17px;padding:12px clamp(15px,4vw,55px);max-width:850px;margin:auto;direction:ltr}
.spin-controls .icon-button{background:#f5f7f0aa;border:1px solid #bbc8b2;flex-shrink:0;width:42px;height:42px;border-radius:50%}
.spin-controls input{min-width:0;flex:1;accent-color:#384934;cursor:ew-resize;height:30px;direction:ltr}
.spin-controls output{font-size:10px;min-width:82px;text-align:end;font-variant-numeric:tabular-nums}
.spin-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:19px 28px;border-top:1px solid #c9d3c155;font-size:10px;letter-spacing:.1em}
.spin-bottom .text-link{font-size:11px;letter-spacing:0}
.spin-viewer:fullscreen{display:flex;flex-direction:column;justify-content:center;width:100vw;height:100dvh;padding:20px}.spin-viewer:fullscreen .spin-stage{height:72dvh}.spin-viewer:fullscreen .spin-controls{width:min(850px,100%)}
.spin-expanded{overflow:hidden}.spin-viewer.is-expanded{position:fixed;inset:0;z-index:10000;display:flex;flex-direction:column;justify-content:center;padding:20px}.spin-viewer.is-expanded .spin-stage{height:72dvh}.spin-viewer.is-expanded .spin-controls{width:min(850px,100%)}
@media(max-width:560px){.spin-stage{height:300px}.spin-stage img{padding:10px 0 35px}.spin-controls{gap:10px;padding:7px 14px 15px}.spin-controls output{min-width:68px;font-size:9px}.spin-controls .icon-button{width:36px;height:36px}.spin-bottom{padding:18px 15px;font-size:8px}.spin-hint{font-size:10px;bottom:16px}.spin-watermark{inset-inline-end:18px}.spin-bottom .text-link{font-size:10px}}