/* Optional generated-cap study. Fixed sprite; only the face indicator moves. */
html:is([data-controls="angled"],[data-controls="foreshortened"],[data-controls="flatter"],[data-controls="front"],[data-controls^="detail-"]) .knob {
  background-image:url('./materials/angled/knob-05-clean.png');
  background-size:64px 64px;
  image-rendering:pixelated;
}
html[data-controls="foreshortened"] .knob {background-image:url('./materials/angled/knob-05-short.png')}
html[data-controls="flatter"] .knob {background-image:url('./materials/angled/knob-05-flatter.png')}
html:is([data-controls="angled"],[data-controls="foreshortened"],[data-controls="flatter"],[data-controls="front"],[data-controls^="detail-"]) .knob::after {display:none}
html:is([data-controls="angled"],[data-controls="foreshortened"],[data-controls="flatter"],[data-controls="front"],[data-controls^="detail-"]) .knob::before {opacity:.45}
html:is([data-controls="angled"],[data-controls="foreshortened"],[data-controls="flatter"],[data-controls="front"],[data-controls^="detail-"]) .angled-indicator {
  display:block;position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;shape-rendering:crispEdges;
}
/* The source has its own seating ring and shadow. Keep the original hit target. */
html:is([data-controls="angled"],[data-controls="foreshortened"],[data-controls="flatter"],[data-controls="front"],[data-controls^="detail-"]) .cell .rotary-input {inset:-8px;width:80px;height:80px}

html[data-controls="front"] .knob{background-image:url('./materials/angled/knob-straight-01.png')}