@property --story-ring-a{syntax:"<angle>";inherits:false;initial-value:0deg}@keyframes story-ring-draw{to{--story-ring-a:360deg}}.story-ring-draw,.story-ring-static{--story-ring-w:4px}@media (max-width:767px){.story-ring-thin.story-ring-draw,.story-ring-thin.story-ring-static{--story-ring-w:2.75px}}.story-ring-static{-webkit-mask:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - var(--story-ring-w) - .75px),#000 calc(100% - var(--story-ring-w)),#000 calc(100% - .5px),rgba(0,0,0,0) 100%);mask:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - var(--story-ring-w) - .75px),#000 calc(100% - var(--story-ring-w)),#000 calc(100% - .5px),rgba(0,0,0,0) 100%)}.story-ring-draw{-webkit-mask-composite:source-in;-webkit-mask:conic-gradient(from -90deg,#000 var(--story-ring-a),rgba(0,0,0,0) var(--story-ring-a)),radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - var(--story-ring-w) - .75px),#000 calc(100% - var(--story-ring-w)),#000 calc(100% - .5px),rgba(0,0,0,0) 100%);mask:conic-gradient(from -90deg,#000 var(--story-ring-a),rgba(0,0,0,0) var(--story-ring-a)),radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - var(--story-ring-w) - .75px),#000 calc(100% - var(--story-ring-w)),#000 calc(100% - .5px),rgba(0,0,0,0) 100%);-webkit-mask-composite:source-in,xor;mask-composite:intersect;animation:story-ring-draw var(--story-ring-duration,1s) cubic-bezier(.6,0,1,1) forwards}@media (prefers-reduced-motion:reduce){.story-ring-draw{-webkit-mask:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - var(--story-ring-w) - .75px),#000 calc(100% - var(--story-ring-w)),#000 calc(100% - .5px),rgba(0,0,0,0) 100%);mask:radial-gradient(closest-side,rgba(0,0,0,0) calc(100% - var(--story-ring-w) - .75px),#000 calc(100% - var(--story-ring-w)),#000 calc(100% - .5px),rgba(0,0,0,0) 100%);animation:none}}