@layer components{.chronicle-track{position:relative}.chronicle-track:before{content:"";background:linear-gradient(to bottom, var(--primary), var(--border) 30%, var(--border));width:1px;position:absolute;top:8px;bottom:8px;left:5px}.chronicle-track>li{position:relative}.chronicle-track>li:before{content:"";border:2px solid var(--primary);background:var(--background);width:11px;height:11px;box-shadow:0 0 0 4px color-mix(in oklch, var(--primary) calc(10% * var(--glow-marker)), transparent);border-radius:999px;position:absolute;top:8px;left:0}.chronicle-track>li:last-child:before{background:var(--primary);box-shadow:0 0 0 4px color-mix(in oklch, var(--primary) calc(10% * var(--glow-marker)), transparent), 0 0 14px color-mix(in oklch, var(--primary) min(100%, calc(100% * var(--glow-marker))), transparent)}.chronicle-track[data-animate]:before{height:calc(var(--track,0px) - 8px);background:var(--border);bottom:auto}.chronicle-track[data-animate]:after{content:"";width:1px;height:max(0px, calc(var(--fill,0px) - 8px));background:linear-gradient(to bottom, color-mix(in oklch, var(--primary) 35%, transparent), var(--primary));box-shadow:0 0 8px color-mix(in oklch, var(--primary) min(100%, calc(100% * var(--glow-marker))), transparent);position:absolute;top:8px;left:5px}.chronicle-track[data-animate]>li:before{z-index:1;border-color:color-mix(in oklch, var(--foreground) 25%, transparent);background:var(--background);box-shadow:none;transition:border-color .3s,background-color .3s,box-shadow .3s}.chronicle-track[data-animate]>li[data-on]:before{border-color:var(--primary);box-shadow:0 0 0 4px color-mix(in oklch, var(--primary) calc(10% * var(--glow-marker)), transparent);animation:.45s cubic-bezier(.22,1,.36,1) chronicle-dot-pop}.chronicle-track[data-animate]>li[data-on]:last-child:before{background:var(--primary);box-shadow:0 0 0 4px color-mix(in oklch, var(--primary) calc(10% * var(--glow-marker)), transparent), 0 0 14px color-mix(in oklch, var(--primary) min(100%, calc(100% * var(--glow-marker))), transparent)}.chronicle-track[data-animate]>li>*{opacity:.6;transition:opacity .5s,translate .5s cubic-bezier(.22,1,.36,1);translate:0 6px}.chronicle-track[data-animate]>li[data-on]>*{opacity:1;translate:none}@keyframes chronicle-dot-pop{40%{scale:1.45}}}