.hero-note[data-handwriting] .note-copy{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.note-ink{display:block;line-height:1.02}
.direction .hero-note .note-word{display:inline-block;position:static;height:1.26em;vertical-align:middle;margin:0 -.04em;transform:none;fill:currentColor;stroke:none;overflow:visible}
.note-pen{fill:none;stroke:white;stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1}
.hero-note[data-handwriting=waiting] .note-arrow path{stroke-dasharray:1;stroke-dashoffset:1}
.hero-note[data-handwriting=playing] .note-arrow path{animation:pen-write 280ms linear both;stroke-dasharray:1}
.hero-note[data-handwriting=playing] .note-pen{animation:pen-write 160ms linear var(--pen-delay) both}
.hero-note[data-pen-paused] .note-pen,.hero-note[data-pen-paused] .note-arrow path{animation-play-state:paused}
.hero-note[data-handwriting=done] .note-pen{stroke-dashoffset:0}
.direction .spending-statement .hero-note,.direction .spending-statement .hero-note:hover{text-decoration:none}
.direction .spending-statement .hero-note{transform-origin:60% 50%;transition:transform 160ms var(--ease-out)}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){body:not([data-input=keyboard]) .direction .spending-statement .hero-note:hover{transform:rotate(-3deg)}}
@keyframes pen-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.note-pen,.hero-note .note-arrow path{animation:none!important;stroke-dashoffset:0!important}.direction .spending-statement .hero-note{transition:none}}
body[data-input=keyboard] .direction .spending-statement .hero-note{transition:none}
@media(forced-colors:active){.hero-note[data-handwriting] .note-copy{position:static;width:auto;height:auto;margin:0;overflow:visible;clip-path:none;white-space:normal}.note-ink{display:none}.hero-note .note-arrow path{stroke:LinkText}}