/* Generated from KnobLink's mapper.html by build_site.py. */
.ctl { cursor: pointer;}
.ctl .face { stroke: #000; stroke-width: 1;}
.ctl .ring { fill: none; stroke: #2a2d33; stroke-width: 3.5; stroke-linecap: round;}
.ctl .val { fill: none; stroke: var(--accent); stroke-width: 3.5; stroke-linecap: round; filter: drop-shadow(0 0 3px rgba(255,106,43,.6)); transition: stroke-dasharray .08s linear;}
.ctl .ptr { stroke: #eef0f3; stroke-width: 2.5; stroke-linecap: round;}
.ctl .slot { fill: #07080a; stroke: #2c2f35;}
.ctl .fill { fill: var(--accent); filter: drop-shadow(0 0 4px rgba(255,106,43,.7));}
.ctl .tick { stroke: #30343a; stroke-width: 1;}
.ctl .led { fill: #2b2e33; transition: fill .1s;}
.ctl.done .led { fill: #5a3a2a;}
.ctl.hit .led, .ctl.on .led { fill: var(--accent); filter: drop-shadow(0 0 4px var(--accent));}
.ctl:hover .face { stroke: var(--accent); stroke-width: 1.5;}
.ctl.fixed { cursor: default;}
.ctl.fixed:hover .face { stroke: var(--edge);}
.ctl.done .face { stroke: #000;}
.ctl.listen .face { stroke: var(--accent); stroke-width: 3.5; animation: pulse .9s infinite alternate;}
.ctl.hit .face { filter: drop-shadow(0 0 8px rgba(255,106,43,.55));}
.ctl.listen .slot { stroke: var(--accent); stroke-width: 2; filter: drop-shadow(0 0 6px var(--accent)); animation: pulse .9s infinite alternate;}
.ctl.listen .ring { stroke: var(--accent); stroke-opacity: .5; animation: pulse .9s infinite alternate;}
.ctl.listen text.lbl { fill: var(--accent2);}
.lbl { fill: var(--label); font-size: 12px; text-anchor: middle; pointer-events: none; letter-spacing: .04em;}
body:not(.detail) .tag { display: none;}
.tag { fill: #6f747d; font-size: 9.5px; text-anchor: middle; pointer-events: none; font-family: ui-monospace, Menlo, monospace;}
.ind { fill: var(--accent);}