@property --timer-progress{syntax:"<angle>";inherits:false;initial-value:0deg}.carousel-progress.svelte-5layh2{appearance:none;border:var(--border-1);color:var(--content-primary);font:inherit;cursor:pointer;background:0 0;border-radius:10px;grid-template:30px/26px 36px;place-items:center;padding:0 .45rem 0 .25rem;font-weight:600;transition:all .15s;display:grid}.carousel-progress.svelte-5layh2:hover{border:var(--border-2)}.carousel-progress.svelte-5layh2:focus-visible{outline:1px solid var(--content-primary);outline-offset:4px}.timer-ring.svelte-5layh2{background:conic-gradient(from -90deg, #fff 0 var(--timer-progress), #ffffff4d var(--timer-progress) 360deg);filter:drop-shadow(0 0 1px #ffffff59);width:16px;height:16px;animation:svelte-5layh2-timer-progress var(--timer-duration) linear forwards;border-radius:50%;-webkit-mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#0009 calc(100% - 2px),#000 calc(100% - .5px));mask:radial-gradient(farthest-side,#0000 calc(100% - 2px),#0009 calc(100% - 2px),#000 calc(100% - .5px))}.progress-label.svelte-5layh2{min-width:1.6rem;font-size:.72rem;font-family:var(--font-mono);text-align:center;line-height:1rem}@keyframes svelte-5layh2-timer-progress{to{--timer-progress:360deg}}@media (prefers-reduced-motion:reduce){.timer-ring.svelte-5layh2{animation:none}}