/* The knob (cx-knob.js), the same on every device's page: a machined knob over a range input kept out of sight. A device
   sets its size and colours on it or on what holds it: --cxn-size (the dial, 56 px), --cxn-hue (its value, the device's
   accent or a voice's own), --cxn-mod (what moves it: the ring and the dot, every device's one colour for that, --cx-moved,
   cx-moved.css); its name and its value are the device's own markup beside it. */
.cxn{position:relative;display:flex;flex-direction:column;align-items:center;min-width:0;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.cxn input[type=range]{position:absolute;left:50%;top:0;width:1px;height:1px;margin:0;padding:0;opacity:0;pointer-events:none;-webkit-appearance:none;appearance:none}
.cxn-dial{display:block;flex:none;width:var(--cxn-size,56px);height:var(--cxn-size,56px);overflow:visible;cursor:ns-resize;touch-action:none;border-radius:50%}
.cxn-ticks{fill:none;stroke:#3a3632;stroke-width:1}
.cxn-track{fill:none;stroke:#24221f;stroke-width:3;stroke-linecap:round}
.cxn-val{fill:none;stroke:var(--cxn-hue,#f2875a);stroke-width:3;stroke-linecap:round}
.cxn-mod{fill:none;stroke:var(--cxn-mod,var(--cx-moved,#8d98ff));stroke-opacity:.55;stroke-width:2;stroke-linecap:round}
.cxn-cap{fill:url(#cxn-cap);stroke:#3a3632;stroke-width:1;transition:stroke .15s}
.cxn-rim{fill:none;stroke:#0e0d0c;stroke-width:1}
.cxn-ptr{fill:none;stroke:#ece7dc;stroke-width:2;stroke-linecap:round}
.cxn-dot{fill:var(--cxn-mod,var(--cx-moved,#8d98ff))}
@media (hover:hover){.cxn-dial:hover .cxn-cap{stroke:#5f584e}}
.cxn-turning .cxn-cap{stroke:var(--cxn-hue,#f2875a)}
.cxn-turning .cxn-ptr{stroke:#fff}
.cxn:has(input:focus-visible) .cxn-dial{outline:2px solid var(--cxn-hue,#f2875a);outline-offset:2px}
.cxn-off{opacity:.45}
.cxn-off .cxn-dial{cursor:default}