/* ghost-hand demo styling; each direction sets the --h-* tokens */
svg[data-hand]{display:block;width:100%;height:auto;aspect-ratio:400/250;font-family:var(--h-font)}
.h-room{fill:var(--h-room)}
.h-beam{fill:var(--h-beam,rgba(255,240,210,.07))}
.h-frame{fill:none;stroke:var(--h-frame);stroke-width:1.5}
.h-bar{fill:rgba(255,255,255,.16)}
.h-bart{fill:var(--h-accent)}
.h-ring{fill:none;stroke:var(--h-text);stroke-width:2.2;stroke-opacity:.9}
.h-ring.is-hot{stroke:var(--h-accent);stroke-width:3.2}
.h-ringglow{fill:var(--h-accent);fill-opacity:.22}
.h-gbg{fill:rgba(0,0,0,.6);stroke:rgba(255,255,255,.35);stroke-width:1}
.h-g{fill:#fff}
.h-chipbg{fill:rgba(0,0,0,.62)}
.h-chip{fill:var(--h-text);font-size:17px;font-weight:600;letter-spacing:.08em}
.h-cur{fill:var(--h-accent)}
.h-rip{fill:none;stroke:var(--h-accent);stroke-width:2}
.h-prog{stroke:var(--h-accent);stroke-width:4;stroke-linecap:round}
.h-progbg{stroke:rgba(255,255,255,.35);stroke-width:4}
.h-hand{opacity:.94}
.h-hand path{stroke-linecap:round;stroke-linejoin:round}
.h-edge{fill:var(--h-edge);stroke:var(--h-edge)}
.h-fill{fill:var(--h-fill);stroke:var(--h-fill)}
.h-back{fill:var(--h-back);stroke:var(--h-back)}
.h-arm{fill:var(--h-fill);stroke:var(--h-edge);stroke-width:1.5;opacity:.5}
.h-tip{fill:var(--h-accent);opacity:0;transition:opacity .12s}
.h-hand.is-pinch .h-tip{opacity:1}