/* Native adaptation of the user-supplied React Bits SlingButton interaction. */
.sling-top { position: relative; display: block; width: 56px; height: 56px; margin: 8px 7px 32px; --sling-accent: #bfc1c5; }
.sling-fx { position: absolute; width: 80px; height: 80px; left: -12px; top: -12px; overflow: visible; pointer-events: none; }
.sling-well { fill: #d7d8dc; }
.sling-band { fill: none; stroke: #c3c5c9; stroke-width: 2.5; stroke-linecap: round; }
.sling-power { fill: none; stroke: var(--sling-accent); stroke-width: 3; opacity: 0; }
.sling-top .footer-top, .sling-top .footer-top:hover { position: absolute; inset: 0; display: block; min-width: 56px; min-height: 56px; border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; text-decoration: none; }
.sling-top .footer-top:focus-visible { outline: 2px solid #000; outline-offset: 10px; }
.sling-face { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: #000; transition: background 150ms, color 150ms, scale 150ms; }
.sling-face > span { font: 800 8px/1 Arial, sans-serif; letter-spacing: .16em; padding-left: .16em; }
.sling-top[data-held] .footer-top { cursor: grabbing; }
.sling-top[data-held] .sling-face { scale: .97; }
.sling-top[data-armed] .sling-face { background: #fff; color: #000; scale: 1.04; }
.sling-top[data-armed] .sling-band { stroke: var(--sling-accent); }
.sling-dot { position: absolute; left: 25px; top: 25px; width: 6px; height: 6px; border-radius: 50%; background: var(--sling-accent); opacity: 0; pointer-events: none; }
@media (hover: hover) { .sling-top:not([data-held]) .footer-top:hover .sling-face { scale: 1.04; } }
@media (max-width: 600px) { .sling-top { margin-bottom: 24px; } }
@media (prefers-reduced-motion: reduce) { .sling-face { transition: none; scale: 1 !important; } .sling-dot { display: none; } }