.amati-spin{position:relative;width:100%;max-width:100%;background:#fff;user-select:none;-webkit-user-select:none;touch-action:pan-y;outline:none;font-family:inherit;color:#616450;border-radius:4px;overflow:hidden}
.amati-spin:focus-visible{box-shadow:0 0 0 3px rgba(148,116,55,.55)}
.amati-spin .as-stage{position:relative;width:100%;overflow:hidden;cursor:grab;background:#fff}
.amati-spin.as-dragging .as-stage{cursor:grabbing}
.amati-spin.as-zoomed .as-stage{cursor:move}
.amati-spin .as-stage canvas{display:block;width:100%;height:100%}
.amati-spin .as-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;transition:opacity .25s}
.amati-spin .as-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(97,100,80,.85);color:#fff;font-size:13px;letter-spacing:.02em;pointer-events:none;opacity:0;transition:opacity .4s;white-space:nowrap}
.amati-spin .as-hint.as-show{opacity:1}
.amati-spin .as-hint-icon{width:26px;height:26px;animation:as-nudge 1.6s ease-in-out infinite}
@keyframes as-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.amati-spin .as-progress{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:conic-gradient(#947437 var(--p,0%),rgba(97,100,80,.15) 0);display:grid;place-items:center;font-size:11px;font-weight:600;color:#616450;transition:opacity .3s;pointer-events:none}
.amati-spin .as-progress::before{content:"";position:absolute;inset:5px;border-radius:50%;background:#fff}
.amati-spin .as-progress span{position:relative}
.amati-spin .as-progress.as-hide{opacity:0}
.amati-spin .as-badge{position:absolute;top:10px;left:10px;padding:4px 9px;border-radius:999px;background:rgba(97,100,80,.85);color:#fff;font-size:11px;letter-spacing:.06em;text-transform:uppercase;pointer-events:none;opacity:0;transition:opacity .3s}
.amati-spin .as-badge.as-show{opacity:1}
.amati-spin .as-bar{display:flex;align-items:center;gap:6px;padding:8px 10px;background:#fff;border-top:1px solid rgba(97,100,80,.15)}
.amati-spin .as-strip{position:relative;flex:1;height:34px;border-radius:3px;overflow:hidden;cursor:pointer;background:rgba(97,100,80,.08)}
.amati-spin .as-strip canvas{display:block;width:100%;height:100%}
.amati-spin .as-strip .as-mark{position:absolute;top:0;bottom:0;width:3px;margin-left:-1.5px;background:#947437;pointer-events:none;box-shadow:0 0 0 1px #fff}
.amati-spin .as-strip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.amati-spin .as-btn{flex:none;width:34px;height:34px;display:grid;place-items:center;border:0;border-radius:3px;background:transparent;color:#616450;cursor:pointer;padding:0}
.amati-spin .as-btn:hover{background:rgba(97,100,80,.1)}
.amati-spin .as-btn:focus-visible{outline:2px solid #947437;outline-offset:-2px}
.amati-spin .as-btn svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.amati-spin .as-btn[disabled]{opacity:.35;cursor:default}
.amati-spin .as-zoomlvl{flex:none;min-width:38px;text-align:center;font-size:12px;color:#616450;opacity:.8;font-variant-numeric:tabular-nums}
.amati-spin:fullscreen{background:#fff;display:flex;flex-direction:column;border-radius:0}
.amati-spin:fullscreen .as-stage{flex:1;height:auto!important}
.amati-spin .as-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (max-width:600px){.amati-spin .as-bar{padding:6px 4px;gap:2px}.amati-spin .as-zoomlvl{display:none}}
@media (prefers-reduced-motion:reduce){.amati-spin .as-hint-icon{animation:none}}