/* bl-thumbs.css - the tools' drawn thumbnails (.hm-pv) and their moments, for pages other than the home page (the subject
   hubs, includes/hub.php; owner, 25 Oct 2026: "we already have animated thumbs for on the homepage"). The drawings are
   components/tool-thumbs.php, shared with the home page. These rules are COPIED from bl-home.css lines 502-699 (the
   home page keeps its own copy, inside its critical CSS); a change to a thumb's style goes in both until the home page
   loads this file too. A tile sets --c, --ci, --ct (its tone) and gets .hm-play to run the moment (assets/js/bl-thumbs.js).
   Reduced motion or html[data-motion="off"]: the still drawing, nothing moves. */
.hm-pv .hm-pv-gl{fill:none;stroke:var(--ci);stroke-width:2.6}
.hm-pv .hm-pv-gl [fill="currentColor"]{fill:var(--ci);stroke:none}
.hm-pv{width:150px;height:120px;display:block;overflow:visible}
.hm-pv .hm-pv-gd{fill:var(--ci);opacity:.16}
.hm-pv .hm-pv-face{fill:var(--surface)}
.hm-pv .hm-pv-tone{fill:var(--c)}
.hm-pv .hm-pv-ln{fill-opacity:1;stroke:var(--ci);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.hm-pv path.hm-pv-ln:not(.hm-pv-face):not(.hm-pv-tone):not(.hm-pv-lite),.hm-pv circle.hm-pv-ln:not(.hm-pv-face):not(.hm-pv-tone){fill:none}
.hm-pv .hm-pv-tl{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.hm-pv .hm-pv-ax{fill:none;stroke:var(--ci);stroke-width:5;stroke-linecap:round;opacity:.35}
.hm-pv .hm-pv-curve{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:0}
/* The Focus Timer thumb counts DOWN, as the tool does (owner, 10 Oct: "counting down? time going up?"): the ring is the
   time left, from the hand clockwise round to 12; it empties clockwise from 12 o'clock, and the hand rides its leading
   edge. A negative offset on a 100-unit path does that (the tool's #arc uses the same rule); the gap is one unit longer
   than the path, so at empty no sliver of the pattern wraps round to 12. At rest: a third used,
   about 2/3 inset-inline-start: offset -33.333, the hand turned 120deg clockwise from 12 (also the reduced-motion frame). */
.hm-pv .hm-pv-ring{fill:none;stroke:var(--c);stroke-width:8;stroke-dasharray:100 101;stroke-dashoffset:-33.333;transform-box:view-box;transform-origin:60px 52px;transform:rotate(-90deg)}
.hm-pv .hm-pv-arm{transform-box:view-box;transform-origin:60px 72px;transform:rotate(-10deg)}
.hm-pv .hm-pv-card{transform-box:view-box;transform-origin:60px 55px}
.hm-pv .hm-pv-cb{opacity:0}
.hm-pv .hm-pv-dot{fill:var(--c)}   /* the flashcard: the front reads "?", the back a tick and an answer line */
:root[data-theme="dark"] .hm-pv .hm-pv-face{fill:var(--paper)}
/* moving only once seen, and only with motion on */
.hm-js .hm-pv-curve{stroke-dashoffset:100}
.hm-pv .hm-pv-hand{transform-box:view-box;transform-origin:60px 52px;rotate:120deg}
.hm-pv .hm-pv-cap{transform-box:view-box}
/* One play at a time (owner, 10 Oct: the Focus Timer thumb "snaps"): a thumb's moment runs once on arrival and again on
   hover or keyboard focus, always to its end, and every moment ENDS on the still drawing. bl-home.js adds .hm-play and
   takes it off when the last part has finished, so leaving the card mid-way never cuts it short or jumps it back, and
   nothing restarts on the way out (before: hover-out removed the hover animation, the thumb jumped to rest and the
   arrival animation replayed). Easing is the house in-out (cubic-bezier(.45,0,.55,1)); no overshoot snaps.
   Metronome: the pendulum swings to each side and back to rest (2.6 s). Timer (3.2 s): the block runs out (the ring empties
   clockwise and the hand sweeps to 12 at one steady rate), the cap presses, ring and hand fade, a fresh full ring fades
   in and counts down to rest. Time only ever runs down; the jump from empty to full happens while both are invisible. Flashcard: it turns over, shows its back, and turns
   back (1.9 s). Graph: the curve plots itself while a point rides its pen tip (1.3 s). Static under reduced motion. */
.hm-js .is-in .hm-pv-curve{stroke-dashoffset:0}
.hm-js .hm-play .hm-pv-arm{animation:hm-swing 2.4s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-ring{animation:hm-cd 3.2s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-hand{animation:hm-cdh 3.2s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-cap{animation:hm-press 3.2s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-card{animation:hm-flip 1.9s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-cf{animation:hm-cfout 1.9s steps(1,end) var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-cb{animation:hm-cbin 1.9s steps(1,end) var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-curve{animation:hm-plotc 1.1s linear var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-pt{animation:hm-glide 1.3s linear var(--hm-d,0s) both}
.hm-js .hm-play.hm-first{--hm-d:.3s}
/* the metronome (owner, 11 Oct: "moves too slowly?"): about 109 bpm, each swing extreme to extreme 0.55 s, sine
   in-out on every segment so it slows into each end like a real pendulum (where the click falls) and speeds through
   the middle: rest -> +16, three full swings, back to rest (2.4 s). Rotation only: nothing fades or flashes. */
@keyframes hm-swing{0%{transform:rotate(-10deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}19.6%{transform:rotate(16deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}42.5%{transform:rotate(-16deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}65.4%{transform:rotate(16deg);animation-timing-function:cubic-bezier(.37,0,.63,1)}88.3%{transform:rotate(-16deg);animation-timing-function:cubic-bezier(.22,1,.36,1)}100%{transform:rotate(-10deg)}}
/* the countdown: 0-50% a steady sweep from a third used to empty (2/3 of a turn), 50-56% hold at 12, 56-64% fade
   out, 65% (invisible) back to full, 65-75% fade in full, 75-100% a steady sweep to rest (1/3 of a turn): both sweeps
   at nearly the same rate (1.33 and 1.33 turns per run), linear like the tool's own ring */
@keyframes hm-cd{0%{stroke-dashoffset:-33.333;opacity:1;animation-timing-function:linear}50%{stroke-dashoffset:-100.5}56%{stroke-dashoffset:-100.5;opacity:1;animation-timing-function:cubic-bezier(.45,0,.55,1)}64%{stroke-dashoffset:-100.5;opacity:0}65%{stroke-dashoffset:0;opacity:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}75%{stroke-dashoffset:0;opacity:1;animation-timing-function:linear}100%{stroke-dashoffset:-33.333;opacity:1}}
@keyframes hm-cdh{0%{rotate:120deg;opacity:1;animation-timing-function:linear}50%{rotate:360deg}56%{rotate:360deg;opacity:1;animation-timing-function:cubic-bezier(.45,0,.55,1)}64%{rotate:360deg;opacity:0}65%{rotate:0deg;opacity:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}75%{rotate:0deg;opacity:1;animation-timing-function:linear}100%{rotate:120deg;opacity:1}}
@keyframes hm-press{0%,50%{translate:0 0;animation-timing-function:cubic-bezier(.45,0,.55,1)}53%{translate:0 3px;animation-timing-function:cubic-bezier(.45,0,.55,1)}58%,100%{translate:0 0}}
@keyframes hm-flip{0%{transform:scaleX(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}13%{transform:scaleX(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}26%{transform:scaleX(1)}70%{transform:scaleX(1);animation-timing-function:cubic-bezier(.45,0,.55,1)}83%{transform:scaleX(0);animation-timing-function:cubic-bezier(.45,0,.55,1)}96%,100%{transform:scaleX(1)}}
/* the flashcard's faces swap while the card is edge-on (scaleX 0), so each frame shows a face with content. Own names:
   a later @keyframes hm-in (the entrances) used to replace the back's, which kept the back blank (owner, 11 Oct) */
@keyframes hm-cfout{0%{opacity:1}13%{opacity:0}83%,100%{opacity:1}}
@keyframes hm-cbin{0%{opacity:0}13%{opacity:1}83%,100%{opacity:0}}
@keyframes hm-plotc{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
/* the graphing calculator's point (owner, 9 Oct: "a hover animation for the graphing calculator thumb too") */
.hm-pv .hm-pv-pt{fill:var(--surface);stroke:var(--ci);stroke-width:3.5;opacity:0;translate:82px 28px}
:root[data-theme="dark"] .hm-pv .hm-pv-pt{fill:var(--paper)}   /* rides the curve by equal arc-length keys */
@keyframes hm-glide{0.0%{translate:46.0px 28.0px}7.08%{translate:47.6px 35.8px}14.17%{translate:49.3px 43.4px}21.25%{translate:51.4px 51.0px}28.33%{translate:53.9px 58.5px}35.42%{translate:57.3px 65.6px}42.5%{translate:63.3px 70.0px}49.58%{translate:69.2px 65.1px}56.67%{translate:72.8px 58.2px}63.75%{translate:75.6px 50.8px}70.83%{translate:78.0px 43.3px}77.92%{translate:80.1px 35.7px}85.0%{translate:82.0px 28.0px}0%,85%{opacity:1}100%{translate:82px 28px;opacity:0}}
/* The nine drawn 23 Oct (owner, about 23:00: the card-and-icon thumbs were "too compact for the thickness", did not move
   and were one colour per tab): periodic table, physics formulas, chemistry calculator, Ohm's law and circuits,
   scientific calculator, equation solver, fractions, revision planner, exam countdown. The same family as the four above
   (the 5-unit line in the tile ink, a white face, the tile colour as the second tone, the ground shadow), small parts in
   flat fills, and the same one-play moment (bl-home.js .hm-play, always ending on the still drawing; static under
   reduced motion). Transforms and opacity only, apart from two dash offsets on one short path each. */
.hm-pv .hm-pv-tx{fill:var(--ci);font-family:var(--f-display);font-weight:700}
.hm-pv .hm-pv-key{fill:var(--ci);opacity:.2}
.hm-pv .hm-pv-soft{fill:var(--c);opacity:.5}
.hm-pv .hm-pv-scr{fill:var(--ct)}
.hm-pv .hm-pv-slot{fill:none;stroke:var(--ci);stroke-width:1.6;stroke-dasharray:2.4 2.2;opacity:.45}
.hm-pv .hm-pv-thin{stroke-width:3}
.hm-pv .hm-pv-cell{stroke-width:7}
.hm-pv .hm-pv-pcl{fill:none}
.hm-pv .hm-pv-pale{fill:var(--c);opacity:.28}
.hm-pv .hm-pv-today{fill:none;stroke:var(--c);stroke-width:3}
.hm-pv .hm-pv-tick{fill:none;stroke:var(--c);stroke-width:4.5;stroke-linecap:round;stroke-linejoin:round}
/* four beads round the 246.8-unit loop, inside the wire in the tile tint (light on navy, dark on the light dark-theme
   line); the mask stops them 5 units short of the battery, the resistor and the ammeter, so they never cross a symbol */
.hm-pv .hm-pv-flow{fill:none;stroke:var(--ct);stroke-width:3.2;stroke-linecap:round;stroke-dasharray:0 61.71}
.hm-pv .hm-pv-stream{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linecap:round;stroke-dasharray:0 5.25}
.hm-pv .hm-pv-c0,.hm-pv .hm-pv-c1,.hm-pv .hm-pv-c2,.hm-pv .hm-pv-c3,.hm-pv .hm-pv-c4,.hm-pv .hm-pv-c5,.hm-pv .hm-pv-el,.hm-pv .hm-pv-push,.hm-pv .hm-pv-bub,.hm-pv .hm-pv-tag,.hm-pv .hm-pv-pl,.hm-pv .hm-pv-pr,.hm-pv .hm-pv-pc{transform-box:view-box}
.hm-pv .hm-pv-el{transform-origin:59px 39px}
.hm-pv .hm-pv-beam{transform-box:view-box;transform-origin:60px 44px}
.hm-pv .hm-pv-slice{transform-box:view-box;transform-origin:48px 52px;translate:8.5px -8.5px}
.hm-pv .hm-pv-sh{fill:var(--ci);opacity:.22}
.hm-pv .hm-pv-hg{transform-box:view-box;transform-origin:60px 46px}
.hm-pv .hm-pv-st{transform-box:view-box;transform-origin:60px 47px}
.hm-pv .hm-pv-sb{transform-box:view-box;transform-origin:60px 76px}
.hm-pv .hm-pv-k1,.hm-pv .hm-pv-k2,.hm-pv .hm-pv-k3,.hm-pv .hm-pv-k4,.hm-pv .hm-pv-tick,.hm-pv .hm-pv-today{transform-box:fill-box;transform-origin:center}
/* periodic table: the columns hop in a wave, then the lifted element (Fe) bobs as it lands */
.hm-js .hm-play .hm-pv-c0{animation:hm-hop .7s var(--ease-io) var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-c1{animation:hm-hop .7s var(--ease-io) calc(var(--hm-d,0s) + .08s) both}
.hm-js .hm-play .hm-pv-c2{animation:hm-hop .7s var(--ease-io) calc(var(--hm-d,0s) + .16s) both}
.hm-js .hm-play .hm-pv-c3{animation:hm-hop .7s var(--ease-io) calc(var(--hm-d,0s) + .24s) both}
.hm-js .hm-play .hm-pv-c4{animation:hm-hop .7s var(--ease-io) calc(var(--hm-d,0s) + .32s) both}
.hm-js .hm-play .hm-pv-c5{animation:hm-hop .7s var(--ease-io) calc(var(--hm-d,0s) + .40s) both}
.hm-js .hm-play .hm-pv-el{animation:hm-bob 1.1s calc(var(--hm-d,0s) + .3s) both}
/* physics formulas: the force pushes the mass along and it settles back */
.hm-js .hm-play .hm-pv-push{animation:hm-push 1.6s var(--hm-d,0s) both}
/* chemistry calculator: three bubbles rise up the neck in turn, the number tag hops */
.hm-js .hm-play .hm-pv-b1{animation:hm-rise 1.5s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-b2{animation:hm-rise 1.5s calc(var(--hm-d,0s) + .35s) both}
.hm-js .hm-play .hm-pv-b3{animation:hm-rise 1.5s calc(var(--hm-d,0s) + .7s) both}
.hm-js .hm-play .hm-pv-tag{animation:hm-hop .6s var(--ease-io) calc(var(--hm-d,0s) + .6s) both}
/* circuits: four dots of current run clockwise from the + plate, through the resistor and the ammeter (two spacings) */
.hm-js .hm-play .hm-pv-flow{animation:hm-flow 2.4s linear var(--hm-d,0s) both}
/* scientific calculator: the answer clears, three keys and = are pressed, the answer comes back */
.hm-js .hm-play .hm-pv-out{animation:hm-out 2.2s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-k1{animation:hm-tap .32s var(--ease-io) calc(var(--hm-d,0s) + .35s) both}
.hm-js .hm-play .hm-pv-k2{animation:hm-tap .32s var(--ease-io) calc(var(--hm-d,0s) + .7s) both}
.hm-js .hm-play .hm-pv-k3{animation:hm-tap .32s var(--ease-io) calc(var(--hm-d,0s) + 1.05s) both}
.hm-js .hm-play .hm-pv-k4{animation:hm-tap .32s var(--ease-io) calc(var(--hm-d,0s) + 1.4s) both}
/* equation solver: the scales tip and settle level (x = 3), the pans hanging from the beam's ends */
.hm-js .hm-play .hm-pv-beam{animation:hm-tip 2.2s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-pl{animation:hm-tipl 2.2s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-pr{animation:hm-tipr 2.2s var(--hm-d,0s) both}
/* fractions: the quarter slides back into the pie and out again (it rests clearly apart, with its shadow); the % hops */
.hm-js .hm-play .hm-pv-slice{animation:hm-slice 1.8s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-pc{animation:hm-hop .6s var(--ease-io) calc(var(--hm-d,0s) + .9s) both}
/* revision planner: the ticked days pop in turn, then today's ring */
.hm-js .hm-play .hm-pv-t1{animation:hm-pop .45s var(--ease-io) var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-t2{animation:hm-pop .45s var(--ease-io) calc(var(--hm-d,0s) + .14s) both}
.hm-js .hm-play .hm-pv-t3{animation:hm-pop .45s var(--ease-io) calc(var(--hm-d,0s) + .28s) both}
.hm-js .hm-play .hm-pv-t4{animation:hm-pop .45s var(--ease-io) calc(var(--hm-d,0s) + .42s) both}
.hm-js .hm-play .hm-pv-today{animation:hm-pop .6s var(--ease-io) calc(var(--hm-d,0s) + .62s) both}
/* exam countdown: the sand falls (the top runs down, the heap grows), then the glass turns over and starts again */
.hm-js .hm-play .hm-pv-st{animation:hm-st 3s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-sb{animation:hm-sb 3s var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-stream{animation:hm-stream 3s linear var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-hg{animation:hm-turn 3s var(--hm-d,0s) both}
@keyframes hm-hop{0%,100%{translate:0 0}45%{translate:0 -4px}}
@keyframes hm-pop{0%,100%{scale:1}45%{scale:1.3}}
@keyframes hm-bob{0%{translate:0 0;scale:1;animation-timing-function:var(--ease-io)}22%{translate:0 2px;scale:1.05 .94;animation-timing-function:var(--ease-io)}52%{translate:0 -6px;scale:.98 1.03;animation-timing-function:var(--ease-io)}78%{translate:0 1px;scale:1;animation-timing-function:var(--ease-io)}100%{translate:0 0;scale:1}}
@keyframes hm-push{0%{translate:0 0;animation-timing-function:cubic-bezier(.55,0,.9,.5)}45%{translate:12px 0}58%{translate:12px 0;animation-timing-function:var(--ease-io)}100%{translate:0 0}}
@keyframes hm-rise{0%{translate:0 0;opacity:1;animation-timing-function:cubic-bezier(.5,0,.8,.6)}55%{translate:0 -40px;opacity:0}56%{translate:0 8px;opacity:0;animation-timing-function:var(--ease-out)}100%{translate:0 0;opacity:1}}
@keyframes hm-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-123.42}}
@keyframes hm-out{0%{opacity:1}10%,72%{opacity:0}84%,100%{opacity:1}}
@keyframes hm-tap{0%,100%{scale:1}45%{scale:.72}}
@keyframes hm-tip{0%{rotate:0deg;animation-timing-function:var(--ease-io)}22%{rotate:-7deg;animation-timing-function:var(--ease-io)}48%{rotate:5deg;animation-timing-function:var(--ease-io)}70%{rotate:-2.5deg;animation-timing-function:var(--ease-io)}86%{rotate:1deg;animation-timing-function:var(--ease-io)}100%{rotate:0deg}}
@keyframes hm-tipl{0%{translate:0 0;animation-timing-function:var(--ease-io)}22%{translate:0 4.4px;animation-timing-function:var(--ease-io)}48%{translate:0 -3.1px;animation-timing-function:var(--ease-io)}70%{translate:0 1.6px;animation-timing-function:var(--ease-io)}86%{translate:0 -.6px;animation-timing-function:var(--ease-io)}100%{translate:0 0}}
@keyframes hm-tipr{0%{translate:0 0;animation-timing-function:var(--ease-io)}22%{translate:0 -4.4px;animation-timing-function:var(--ease-io)}48%{translate:0 3.1px;animation-timing-function:var(--ease-io)}70%{translate:0 -1.6px;animation-timing-function:var(--ease-io)}86%{translate:0 .6px;animation-timing-function:var(--ease-io)}100%{translate:0 0}}
@keyframes hm-slice{0%{translate:8.5px -8.5px;animation-timing-function:var(--ease-io)}32%{translate:0 0;animation-timing-function:var(--ease-io)}45%{translate:0 0;animation-timing-function:var(--ease-out)}75%{translate:12px -12px;animation-timing-function:var(--ease-io)}100%{translate:8.5px -8.5px}}
@keyframes hm-st{0%{scale:1 1;animation-timing-function:linear}70%{scale:1 .45;animation-timing-function:var(--ease-io)}100%{scale:1 1}}
@keyframes hm-sb{0%{scale:1 1;animation-timing-function:linear}70%{scale:1 1.3;animation-timing-function:var(--ease-io)}100%{scale:1 1}}
@keyframes hm-stream{0%{stroke-dashoffset:0;opacity:1}66%{stroke-dashoffset:-21;opacity:1}72%,94%{stroke-dashoffset:-21;opacity:0}100%{stroke-dashoffset:-21;opacity:1}}
@keyframes hm-turn{0%,70%{rotate:0deg;animation-timing-function:var(--ease-io)}100%{rotate:360deg}}
/* the music three (owner, 23 Oct: the tuner "too small", the circle of fifths "misleading", the keyboard hidden) */
.hm-pv .hm-pv-fork{stroke-width:7}
.hm-pv .hm-pv-div{fill:none;stroke:var(--ci);stroke-width:2;opacity:.55}
.hm-pv .hm-pv-bk{fill:var(--ci)}
.hm-pv .hm-pv-kl{font-weight:800}
.hm-pv .hm-pv-ta{fill:var(--c)}
.hm-pv .hm-pv-vib,.hm-pv .hm-pv-ndl,.hm-pv .hm-pv-wedge{transform-box:view-box}
.hm-pv .hm-pv-ndl{transform-origin:60px 84px}
.hm-pv .hm-pv-wedge{transform-origin:60px 47px}
.hm-pv .hm-pv-v1,.hm-pv .hm-pv-v2{transform-box:fill-box;transform-origin:center}
/* tuner: the fork rings (the lines pulse out) and the needle swings in to the middle, in tune */
.hm-js .hm-play .hm-pv-v1{animation:hm-ring .55s var(--ease-io) var(--hm-d,0s) 3 both}
.hm-js .hm-play .hm-pv-v2{animation:hm-ring .55s var(--ease-io) calc(var(--hm-d,0s) + .12s) 3 both}
.hm-js .hm-play .hm-pv-ndl{animation:hm-needle 1.9s var(--hm-d,0s) both}
/* circle of fifths: the lit key steps round the twelve, one fifth at a time, back to C */
.hm-js .hm-play .hm-pv-wedge{animation:hm-fifths 2.4s steps(12,end) var(--hm-d,0s) both}
@keyframes hm-ring{0%,100%{opacity:1;scale:1}50%{opacity:.25;scale:1.12}}
@keyframes hm-needle{0%{rotate:0deg;animation-timing-function:var(--ease-io)}20%{rotate:-38deg;animation-timing-function:var(--ease-io)}45%{rotate:24deg;animation-timing-function:var(--ease-io)}68%{rotate:-9deg;animation-timing-function:var(--ease-io)}86%{rotate:3deg;animation-timing-function:var(--ease-io)}100%{rotate:0deg}}
@keyframes hm-fifths{from{rotate:0deg}to{rotate:360deg}}
@keyframes hm-note{0%,100%{translate:0 0}45%{translate:0 -6px}}
.hm-pv .hm-pv-stv{opacity:.6}
.hm-pv .hm-pv-ldg{fill:none;stroke:var(--ci);stroke-width:2;stroke-linecap:round}
.hm-pv .hm-pv-hd path{fill:var(--c)}
.hm-pv .hm-pv-hk path{fill:var(--ci)}
.hm-pv .hm-pv-hd,.hm-pv .hm-pv-hk{transform-box:fill-box;transform-origin:center}
.hm-pv .hm-pv-blk{fill:color-mix(in srgb,var(--c) 24%,#fff)}   /* the balance's blocks: a pale tint of the tile's hue in both themes (owner, 23 Oct: white glared in dark), the figure in the deep accent */
.hm-pv .hm-pv-bt{fill:color-mix(in srgb,var(--c) 45%,#0b1626);font-family:var(--f-display);font-weight:800}
.hm-pv .hm-pv-q{fill:var(--c)}
.hm-pv .hm-pv-lite{fill:color-mix(in srgb,var(--c) 16%,#fff)}   /* the pie lighter than its accent slice; in dark a mid tint, never white or a hole */
:root[data-theme="dark"] .hm-pv .hm-pv-lite{fill:color-mix(in srgb,var(--c) 42%,var(--ct))}
.hm-pv .hm-pv-pcl{stroke-width:5.5}
/* scale and chord finder: the chord lights note by note from the bottom, then the scale steps up */
.hm-js .hm-play .hm-pv-n1{animation:hm-lit .5s var(--ease-io) var(--hm-d,0s) both}
.hm-js .hm-play .hm-pv-n2{animation:hm-lit .5s var(--ease-io) calc(var(--hm-d,0s) + .2s) both}
.hm-js .hm-play .hm-pv-n3{animation:hm-lit .5s var(--ease-io) calc(var(--hm-d,0s) + .4s) both}
.hm-js .hm-play .hm-pv-s1{animation:hm-note .45s var(--ease-io) calc(var(--hm-d,0s) + .8s) both}
.hm-js .hm-play .hm-pv-s2{animation:hm-note .45s var(--ease-io) calc(var(--hm-d,0s) + .98s) both}
.hm-js .hm-play .hm-pv-s3{animation:hm-note .45s var(--ease-io) calc(var(--hm-d,0s) + 1.16s) both}
.hm-js .hm-play .hm-pv-s4{animation:hm-note .45s var(--ease-io) calc(var(--hm-d,0s) + 1.34s) both}
@keyframes hm-lit{0%,100%{scale:1;opacity:1}20%{opacity:.35;scale:1}55%{opacity:1;scale:1.3}}
/* equation solver: while the scales settle level, the ? turns into the answer and back */
.hm-js .hm-play .hm-pv-q{animation:hm-qa 2.2s var(--hm-d,0s) both}
@keyframes hm-qa{0%,100%{opacity:1}12%,80%{opacity:.15}}
/* still under reduced motion: the end state at once */
@media (prefers-reduced-motion:reduce){.bl-thumb *{animation:none!important;transition:none!important}.hm-js .bl-thumb .hm-pv-curve{stroke-dashoffset:0}}
html[data-motion="off"] .bl-thumb *{animation:none!important;transition:none!important}
html[data-motion="off"].hm-js .bl-thumb .hm-pv-curve{stroke-dashoffset:0}