.pill-arrow{background-color:var(--primary);min-width:13.5rem;height:3.25rem;color:var(--primary-foreground);box-shadow:0 6px 14px -4px color-mix(in oklab, var(--primary) 55%, transparent);letter-spacing:.16em;text-transform:uppercase;border-radius:999px;justify-content:space-between;align-items:center;gap:.75rem;padding-left:1.5rem;padding-right:.25rem;font-size:.75rem;font-weight:600;transition:transform .25s,box-shadow .25s,filter .25s;display:inline-flex}.pill-arrow:hover{filter:brightness(1.05);box-shadow:0 10px 22px -6px color-mix(in oklab, var(--primary) 65%, transparent)}.pill-arrow:active{transform:scale(.98)}.pill-arrow-text{text-align:center;flex:1}.pill-arrow-icon{border:3px solid var(--primary);color:#2b2624;background:linear-gradient(135deg,oklch(82% .1 75) 0%,oklch(86% .06 20) 100%);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:2.75rem;height:2.75rem;display:flex;overflow:hidden}.pill-arrow:hover .pill-arrow-icon svg{animation:1s linear infinite pill-arrow-move}@keyframes pill-arrow-move{0%{opacity:0;transform:translate(-6px)}to{opacity:1;transform:translate(6px)}}@media (prefers-reduced-motion:reduce){.pill-arrow:hover .pill-arrow-icon svg{animation:none}}.pill-arrow--light{background-color:var(--card);color:var(--foreground);border:1px solid var(--border);box-shadow:0 6px 16px -8px #00000040}.pill-arrow--light:hover{filter:none;background-color:var(--muted);box-shadow:0 10px 22px -10px #0000004d}.pill-arrow--light .pill-arrow-icon{border-color:var(--card)}@property --pill-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.pill-arrow--rainbow{--pill-fill:var(--primary);background:linear-gradient(var(--pill-fill), var(--pill-fill)) padding-box, conic-gradient(from var(--pill-angle), #ff3b3b, #ff9f1c, #ffe14d, #3ddc84, #2fb8ff, #7a5cff, #ff4fd8, #ff3b3b) border-box;border:2px solid #0000;animation:3s linear infinite pill-rainbow-spin}.pill-arrow--light.pill-arrow--rainbow{--pill-fill:var(--card)}.pill-arrow--light.pill-arrow--rainbow:hover{--pill-fill:var(--muted)}.pill-arrow--rainbow:hover{background:linear-gradient(var(--pill-fill), var(--pill-fill)) padding-box, conic-gradient(from var(--pill-angle), #ff3b3b, #ff9f1c, #ffe14d, #3ddc84, #2fb8ff, #7a5cff, #ff4fd8, #ff3b3b) border-box}@keyframes pill-rainbow-spin{to{--pill-angle:360deg}}@media (prefers-reduced-motion:reduce){.pill-arrow--rainbow{animation:none}}@property --story-angle{syntax:"<angle>";inherits:false;initial-value:0deg}.story-ring{background:conic-gradient(from var(--story-angle), #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5, #d62976, #feda75);border-radius:999px;width:4.75rem;height:4.75rem;padding:3px;transition:transform .2s;animation:6s linear infinite story-spin;display:block}.story-ring>span{background:var(--background);border-radius:999px;width:100%;height:100%;padding:2px;display:block}.story-ring img{object-fit:cover;background:var(--muted);border-radius:999px;width:100%;height:100%;display:block}a:hover .story-ring{transform:scale(1.05)}a:active .story-ring{transform:scale(.95)}.story-ring--seen{background:var(--border);animation:none}@keyframes story-spin{to{--story-angle:360deg}}@media (prefers-reduced-motion:reduce){.story-ring{animation:none}}