/* Ticking gears hero: two meshing gears that tick like a clock, a moth that sometimes
   jams them (gears.js picks when), and a pause button. The @keyframes lines are generated:
   12 teeth, each tick a quick 30deg step with a small overshoot. */
@keyframes bwgTickA{0.000%{transform:rotate(0.0deg)}1.167%{transform:rotate(32.5deg)}1.833%{transform:rotate(30.0deg)}8.333%{transform:rotate(30.0deg)}9.500%{transform:rotate(62.5deg)}10.167%{transform:rotate(60.0deg)}16.667%{transform:rotate(60.0deg)}17.833%{transform:rotate(92.5deg)}18.500%{transform:rotate(90.0deg)}25.000%{transform:rotate(90.0deg)}26.167%{transform:rotate(122.5deg)}26.833%{transform:rotate(120.0deg)}33.333%{transform:rotate(120.0deg)}34.500%{transform:rotate(152.5deg)}35.167%{transform:rotate(150.0deg)}41.667%{transform:rotate(150.0deg)}42.833%{transform:rotate(182.5deg)}43.500%{transform:rotate(180.0deg)}50.000%{transform:rotate(180.0deg)}51.167%{transform:rotate(212.5deg)}51.833%{transform:rotate(210.0deg)}58.333%{transform:rotate(210.0deg)}59.500%{transform:rotate(242.5deg)}60.167%{transform:rotate(240.0deg)}66.667%{transform:rotate(240.0deg)}67.833%{transform:rotate(272.5deg)}68.500%{transform:rotate(270.0deg)}75.000%{transform:rotate(270.0deg)}76.167%{transform:rotate(302.5deg)}76.833%{transform:rotate(300.0deg)}83.333%{transform:rotate(300.0deg)}84.500%{transform:rotate(332.5deg)}85.167%{transform:rotate(330.0deg)}91.667%{transform:rotate(330.0deg)}92.833%{transform:rotate(362.5deg)}93.500%{transform:rotate(360.0deg)}100%{transform:rotate(360deg)}}@keyframes bwgTickB{0.000%{transform:rotate(0.0deg)}1.167%{transform:rotate(-32.5deg)}1.833%{transform:rotate(-30.0deg)}8.333%{transform:rotate(-30.0deg)}9.500%{transform:rotate(-62.5deg)}10.167%{transform:rotate(-60.0deg)}16.667%{transform:rotate(-60.0deg)}17.833%{transform:rotate(-92.5deg)}18.500%{transform:rotate(-90.0deg)}25.000%{transform:rotate(-90.0deg)}26.167%{transform:rotate(-122.5deg)}26.833%{transform:rotate(-120.0deg)}33.333%{transform:rotate(-120.0deg)}34.500%{transform:rotate(-152.5deg)}35.167%{transform:rotate(-150.0deg)}41.667%{transform:rotate(-150.0deg)}42.833%{transform:rotate(-182.5deg)}43.500%{transform:rotate(-180.0deg)}50.000%{transform:rotate(-180.0deg)}51.167%{transform:rotate(-212.5deg)}51.833%{transform:rotate(-210.0deg)}58.333%{transform:rotate(-210.0deg)}59.500%{transform:rotate(-242.5deg)}60.167%{transform:rotate(-240.0deg)}66.667%{transform:rotate(-240.0deg)}67.833%{transform:rotate(-272.5deg)}68.500%{transform:rotate(-270.0deg)}75.000%{transform:rotate(-270.0deg)}76.167%{transform:rotate(-302.5deg)}76.833%{transform:rotate(-300.0deg)}83.333%{transform:rotate(-300.0deg)}84.500%{transform:rotate(-332.5deg)}85.167%{transform:rotate(-330.0deg)}91.667%{transform:rotate(-330.0deg)}92.833%{transform:rotate(-362.5deg)}93.500%{transform:rotate(-360.0deg)}100%{transform:rotate(-360deg)}}
.bwg{position:relative;width:100%;max-width:460px;margin-inline:auto}
.bwg-box{position:relative;width:100%;aspect-ratio:580/705}
.bwg-svg{display:block;width:100%;height:100%;max-width:none}
.bwg-gear{transform-box:fill-box;transform-origin:center}
.bwg-a{animation:bwgTickA 12s linear infinite}
.bwg-b{animation:bwgTickB 12s linear infinite}
.bwg .bwg-moth{position:absolute;left:50.5%;top:49.1%;width:10px;height:10px;margin:-5px 0 0 -5px;opacity:0;pointer-events:none;max-width:none}
.bwg-note{position:absolute;right:0;bottom:56px;max-width:min(72%,300px);text-align:left;margin:0;padding:8px 12px;border-radius:10px;background:rgba(20,20,20,.85);border:1px solid #333;font-family:"Fira Code",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12px;line-height:1.5;color:#A0A0A0;opacity:0;transform:translateY(4px);transition:opacity .4s ease,transform .4s ease;pointer-events:none}
.bwg.show-note .bwg-note{opacity:1;transform:none}
.bwg-note b{color:#FF7A1A;font-weight:600}
.bwg .bwg-pause{position:absolute;right:0;bottom:0;display:inline-flex;align-items:center;gap:8px;min-height:44px;min-width:44px;margin:0;padding:0 14px;border-radius:999px;border:1px solid #333;background:rgba(20,20,20,.85);color:#E8E6E3;font:700 13px/1 Manrope,system-ui,sans-serif;letter-spacing:normal;text-transform:none;cursor:pointer;box-shadow:none}
.bwg .bwg-pause:hover{border-color:#A0A0A0}
.bwg .bwg-pause:focus-visible{outline:3px solid #FF7A1A;outline-offset:2px}
.bwg-icon{font-size:11px;color:#FF7A1A}
.bwg.is-paused .bwg-gear,.bwg.is-jam .bwg-gear{animation-play-state:paused}
.bwg.is-jam .bwg-svg{animation:bwgStutter .6s linear 1}
.bwg.is-bug .bwg-moth{animation:bwgMoth 4s ease-in-out .5s forwards}
.bwg.is-bug .bwg-wings{transform-box:fill-box;transform-origin:50% 20%;animation:bwgFlap .1s linear 3.3s 8 alternate}
.bwg.is-paused .bwg-moth,.bwg.is-paused .bwg-wings,.bwg.is-paused .bwg-svg{animation-play-state:paused}
@keyframes bwgStutter{0%,100%{transform:translate(0,0)}16%{transform:translate(1.5px,-1px)}33%{transform:translate(-1px,.5px)}50%{transform:translate(1px,1px)}66%{transform:translate(-1.5px,-.5px)}83%{transform:translate(.5px,-1px)}}
@keyframes bwgMoth{0%{opacity:0;transform:translate(0,0) rotate(135deg) scale(.25)}15%{opacity:.9;transform:translate(2px,2px) rotate(135deg) scale(1)}30%{transform:translate(7px,7px) rotate(127deg) scale(1)}45%{transform:translate(13px,12px) rotate(142deg) scale(1)}62%{transform:translate(20px,19px) rotate(132deg) scale(1)}70%{opacity:.9;transform:translate(22px,19px) rotate(110deg) scale(1)}100%{opacity:0;transform:translate(120px,55px) rotate(112deg) scale(1.1)}}
@keyframes bwgFlap{from{transform:scaleX(1)}to{transform:scaleX(.35)}}
@media (max-width:781px){.bwg{max-width:320px}.bwg-note{max-width:80%}}
@media (prefers-reduced-motion:reduce){.bwg-moth,.bwg-note{display:none}.bwg:not(.is-playing) .bwg-gear{animation-play-state:paused}}
@media (forced-colors:active){.bwg .bwg-pause{border-color:ButtonText}}