.bd-svg { width: 100%; height: 100%; display: block; overflow: hidden; touch-action: manipulation; }
.bd-svg .shape { fill: #fff; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }
.bd-svg .tube-o { fill: none; stroke: var(--ink); stroke-linecap: round; stroke-linejoin: round; }
.bd-svg .tube-i { fill: none; stroke: #fff; stroke-linecap: round; stroke-linejoin: round; }
.bd-svg .deco { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.bd-svg .silhouette { opacity: .16; }
.bd-svg .silhouette path { fill: var(--ink); }
.bd-svg .ctx .shape, .bd-svg .ctx .tube-o { stroke-opacity: .35; }
.bd-svg .ctx .deco { opacity: .3; }
.bd-svg .found .shape, .bd-svg .found .tube-i { fill: var(--yellow); stroke: var(--bg); }
.bd-svg .found .tube-i { stroke: var(--yellow); fill: none; }
.bd-svg .found .shape { stroke: var(--ink); }
.bd-svg .hit { fill: transparent; stroke: transparent; cursor: pointer; stroke-linejoin: round; stroke-linecap: round; }
.bd-svg .hit:focus { outline: none; }
.bd-svg .hit:focus-visible { stroke: var(--ink); stroke-opacity: .55; stroke-dasharray: 5 4; }
html.dnd-active .bd-svg .hit { cursor: grabbing; }
.bd-svg .sel .shape { fill: rgba(253, 227, 88, .6); }
.bd-svg .sel .tube-i { stroke: rgba(253, 227, 88, .8); }
.bd-svg .pulse .shape { animation: bd-pulse .55s steps(1) infinite alternate; }
.bd-svg .pulse .tube-i { animation: bd-pulse-t .55s steps(1) infinite alternate; }
.bd-svg .wrong .shape, .bd-svg .wrong .tube-i { animation: bd-wrong .6s; }
.bd-svg .dnd-over, .bd-svg .hit.dnd-over { stroke: rgba(253, 227, 88, .7); }
@keyframes bd-pulse { from { fill: var(--bg); } to { fill: var(--yellow); } }
@keyframes bd-pulse-t { from { stroke: var(--bg); } to { stroke: var(--yellow); } }
@keyframes bd-wrong { 0%, 40% { fill: #f4c7bd; stroke: #f4c7bd; } 100% { } }