.ph { color: var(--color-tertiary-background, var(--line)); fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; --go: paused; }
.ph * { vector-effect: non-scaling-stroke; }
.ph:is(:hover, .play) { --go: running; }
.ph .lit { fill-opacity: 0; transition: fill-opacity .4s ease, stroke .4s ease; }
.ph:is(:hover, .play) .lit { fill-opacity: 1; stroke: transparent; }
.ph .reveal, .ph .rest { transition: opacity .4s ease; }
.ph .reveal, .ph:is(:hover, .play) .rest { opacity: 0; }
.ph:is(:hover, .play) .reveal { opacity: 1; }
.ph text { fill: currentColor; stroke: none; font-family: var(--title); font-weight: var(--title-weight); font-size: 14px; clip-path: inset(0 100% 0 0); transition: clip-path .25s steps(20) calc((var(--last, 0) - var(--i, 0)) * .05s); }
.ph:is(:hover, .play) text { clip-path: inset(0); transition-delay: calc(var(--i, 0) * .05s); }
.ph .label { font-family: var(--font); font-weight: var(--weight); font-size: 11px; }
.ph .caret { animation: ph-blink 1.1s steps(1) infinite var(--go); }
.ph .spin { animation: ph-spin 3s linear infinite var(--go); }
.ph .crank { animation-duration: 9s; }
.ph .pedal { animation-duration: 9s; animation-direction: reverse; }
.ph .bob { animation: ph-bob 7s ease-in-out infinite var(--go); }
.ph .hero:hover .spin { animation-duration: 1s; }
.ph .hero:hover :is(.crank, .pedal) { animation-duration: 3s; }
@keyframes ph-blink { 50% { opacity: 0; fill-opacity: 0; } }
@keyframes ph-spin { to { transform: rotate(1turn); } }
@keyframes ph-bob { 50% { transform: translateY(-1.5px); } }