.hm-art{width:100%;height:auto;display:block;overflow:visible}
.sp-art.narrow{max-width:760px}


.hm-wire{fill:none;stroke:var(--accent-press);stroke-opacity:.4;stroke-width:1.6}
.hm-dot{fill:var(--accent)}
.hm-name{font-family:var(--sans);font-weight:800;font-size:22px;fill:var(--ink);letter-spacing:-.01em}
.hm-in rect{fill:var(--raised);stroke:var(--line2)}
.hm-box{fill:var(--paper-soft);stroke:var(--line2)}
.hm-gtitle{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.12em;fill:var(--ink5)}
.hm-pill{fill:var(--raised);stroke:var(--line2)}
.hm-ptext{font-family:var(--sans);font-size:15px;font-weight:600;fill:var(--ink)}
.hm-trunk{stroke-width:2.4;stroke-opacity:.5}
.hm-out rect{fill:var(--ink)}
.hm-in text{font-family:var(--sans);font-size:16px;font-weight:600;fill:var(--ink)}
.hm-out text{font-family:var(--sans);font-size:16px;font-weight:700;fill:var(--paper)}
.hm-side{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;fill:var(--ink5)}
.ai-mk{fill:var(--paper);stroke:var(--paper)}
.ai-mk [fill="none"]{fill:none}


.rm-frame{fill:var(--raised);stroke:var(--line2);stroke-width:1.5}
.rm-head{fill:var(--ink)}
.rm-htext{font-family:var(--sans);font-size:15px;font-weight:700;fill:var(--paper)}
.rm-av{fill:var(--paper-soft);stroke:var(--ink);stroke-width:1.4}
.rm-avt{font-family:var(--sans);font-size:11px;font-weight:700;fill:var(--ink)}
.rm-bub{fill:var(--paper)}
.rm-bub.hb{fill:var(--sunken);stroke:var(--line2)}
.rm-hex{fill:var(--accent);stroke:var(--link);stroke-width:1.2}
.rm-div{stroke:var(--line2);stroke-width:1.2}
.rm-tag{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.12em;fill:var(--ink5)}


.hp-sheet{fill:var(--raised);stroke:var(--accent-press);stroke-width:1.5}
.hp-bar{fill:var(--ink)}
.hp-hex{fill:var(--accent)}
.hp-line{fill:var(--line2)}
.hp-page .hp-bar + .hp-bar + .hp-hex + .hp-line{fill:rgba(248,244,234,.5)}
.hp-line.b{fill:var(--ink)}
.hp-chart{fill:var(--paper-soft)}
.hp-spark{fill:none;stroke:var(--accent-press);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}


.wb-track{fill:none;stroke:var(--accent-press);stroke-opacity:.3;stroke-width:1.6;stroke-dasharray:5 7}
.wb-cell{fill:var(--accent);fill-opacity:.16;stroke:var(--accent);stroke-width:1.6}
.wb-comb polygon:nth-child(3),.wb-comb polygon:nth-child(5){fill-opacity:.42}
.wb-body{fill:var(--accent);stroke:var(--accent-press);stroke-width:1.2}
.wb-stripe{stroke:var(--ink);stroke-width:1.5;stroke-opacity:.75;fill:none;stroke-linecap:round}
.wb-eye{fill:var(--ink)}
.wb-load{fill:var(--raised);stroke:var(--accent-press);stroke-width:1.1}
.wb-wing{fill:#fff;fill-opacity:.82;stroke:var(--accent-press);stroke-opacity:.5;stroke-width:.9;transform-box:fill-box;transform-origin:50% 100%;animation:wb-flap .12s infinite alternate ease-in-out}
.wb-wing.wr{animation-delay:.06s}
@keyframes wb-flap{from{transform:scaleY(1)}to{transform:scaleY(.3)}}
.wb-petal{fill:var(--raised);stroke:var(--accent);stroke-width:1}
.wb-heart{fill:var(--accent);stroke:var(--accent-press);stroke-width:1}
.wb-fname{font-family:var(--sans);font-size:16px;font-weight:700;fill:var(--ink)}
.wb-tag rect{fill:var(--raised);stroke:var(--accent-press);stroke-width:1}
.wb-tag text{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--ink)}

.wb-web{fill:none;stroke:var(--ink5);stroke-opacity:.16;stroke-width:1}
.wb-node{fill:var(--ink5);fill-opacity:.28}
.wb-glowline{fill:none;stroke:var(--accent-press);stroke-width:2.2;stroke-linecap:round;filter:drop-shadow(0 0 2px rgba(244,175,37,.55))}
.wb-lit{fill:var(--accent);stroke:var(--link);stroke-width:1.2}
.wb-src{font-family:var(--sans);font-size:12.5px;font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-width:4px}
.wb-dash{stroke:var(--accent-press);stroke-opacity:.55;stroke-width:1.8;stroke-linecap:round}
.wb-cellbee{fill:#fbeabb;stroke:var(--accent-press);stroke-width:1.3;stroke-linejoin:round}
.wb-shine{fill:var(--paper-soft)}
.wb-hw{fill:var(--paper-soft);stroke:var(--link);stroke-width:1.1;transform-box:fill-box;animation:wb-sweep .14s infinite alternate ease-in-out}
.wb-hw.l{transform-origin:100% 50%}
.wb-hw.r{transform-origin:0% 50%;animation-name:wb-sweep-r}
@keyframes wb-sweep{from{transform:rotate(0)}to{transform:rotate(-22deg)}}
@keyframes wb-sweep-r{from{transform:rotate(0)}to{transform:rotate(22deg)}}
.wb-av{stroke:var(--accent-press);stroke-linejoin:round}
.wb-av.av2{stroke-width:.8}.wb-av.av1{stroke-width:.9}.wb-av.av0{stroke-width:1}
.wb-band{fill:none;stroke:var(--accent-press);stroke-width:2;stroke-linecap:round}
.wb-door{fill:var(--ink)}


.hy-drop{fill:url(#hy-drop);stroke:var(--link);stroke-width:2}
.hy-shine{fill:#fff;fill-opacity:.5}
.hy-drop-g{transform-box:fill-box;transform-origin:50% 70%;animation:hy-pulse 3.4s ease-in-out infinite}
@keyframes hy-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}
.hy-chip text{font-size:15px}
.hy-mk{fill:var(--accent-press)}
.hy-mk rect{fill:var(--accent-press)}
.hy-mk [fill="none"]{fill:none;stroke:var(--accent-press)}
.hm-out .hy-mk{fill:var(--accent)}
.hm-out .hy-mk [fill="none"]{stroke:var(--accent)}

@media (prefers-reduced-motion:reduce){
  .wb-wing,.wb-hw,.hy-drop-g{animation:none}
  .hm-art animateMotion{display:none}
}