.story-ring{display:inline-flex;cursor:pointer;line-height:0;vertical-align:top;border-radius:50%;transition:transform .15s ease,box-shadow .2s ease}.story-ring:hover{transform:var(--perf-hover-transform,scale(1.04))}@property --sr-angle{syntax:"<angle>";initial-value:210deg;inherits:false}.story-ring.is-unseen{background:conic-gradient(from var(--sr-angle),#8b5cf6,#a855f7,#c026d3,#a855f7,#8b5cf6);box-shadow:0 0 8px rgba(168,85,247,.45),0 0 18px rgba(168,85,247,.22)}.story-ring.is-unseen.is-live{animation:sr-spin 8s linear infinite}@keyframes sr-spin{to{--sr-angle:570deg}}@media (prefers-reduced-motion:reduce){.story-ring.is-unseen.is-live{animation:none}}.story-ring.is-unseen:hover{box-shadow:0 0 10px rgba(168,85,247,.6),0 0 24px rgba(168,85,247,.32)}.story-ring.is-seen{background:rgba(255,255,255,.42)}.story-ring.is-unseen.is-private{background:conic-gradient(from var(--sr-angle),#4a3200 0deg,#b47b00 42deg,#ffc93c 92deg,#fff0b8 122deg,#ffc93c 152deg,#b47b00 202deg,#4a3200 250deg,#4a3200 1turn);box-shadow:0 0 8px rgba(255,201,60,.5),0 0 18px rgba(255,201,60,.24)}.story-ring.is-unseen.is-private:hover{box-shadow:0 0 10px rgba(255,201,60,.66),0 0 24px rgba(255,201,60,.36)}.story-ring.is-seen.is-private{background:rgba(255,201,60,.42)}.story-ring__inner{display:inline-flex;overflow:hidden;line-height:0;border:1.5px solid rgba(255,255,255,.9);background:transparent;box-sizing:border-box}