@layer components{.hsp{--hsp-step:.42s;--hsp-draw:.7s}.motion.hsp-col{--motion-stagger:var(--hsp-step)}.hsp-spark{font-variant-numeric:tabular-nums;max-width:232px}.hsp-base{stroke:var(--color-border);stroke-width:1px}.hsp-curve{fill:none;stroke:var(--color-text);stroke-width:1.5px;stroke-linecap:round;stroke-linejoin:round}.hsp-peak-dot{fill:var(--color-gold-on-light);stroke:var(--color-surface-sunken);stroke-width:2px;paint-order:stroke}.hsp-peak-value,.hsp-at-value{font-size:11px;font-weight:700}.hsp-peak-value{fill:var(--color-gold-on-light)}.hsp-hour{fill:var(--color-text-muted);font-size:11px;font-weight:500}.hsp-at,.hsp-at-dot{opacity:0}.hsp-at-line{stroke:var(--color-text-muted);stroke-width:1px}.hsp-at-value{fill:var(--color-text)}.hsp-at-dot{fill:var(--color-surface-sunken);stroke:var(--color-text);stroke-width:1.5px}@media (hover:hover){.hsp:has(.hsp-col:hover) :is(.hsp-at,.hsp-at-dot){opacity:1}.hsp:has(.hsp-col:hover) .hsp-peak-value{opacity:0}.hsp-col:hover .hsp-curve{stroke-width:2.5px}}@media (prefers-reduced-motion:no-preference){.hsp-curve{transition:stroke-width .2s var(--motion-ease)}:is(.hsp-at,.hsp-at-dot,.hsp-peak-value){transition:opacity .2s var(--motion-ease)}.hsp-peak-dot{transform-box:fill-box;transform-origin:50%}.motion[data-anim]:not([data-anim=reset]) .hsp-curve{animation:hsp-draw var(--hsp-draw) var(--motion-ease) var(--motion-delay) both}.motion[data-anim]:not([data-anim=reset]) .hsp-peak-dot{animation:motion-pop-in .4s var(--motion-ease) calc(var(--motion-delay) + var(--hsp-draw) - .12s) both}.motion[data-anim]:not([data-anim=reset]) .hsp-peak{animation:motion-fade .4s var(--motion-ease) calc(var(--motion-delay) + var(--hsp-draw) - .12s) both}}}@keyframes hsp-draw{0%{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0)}}