/* F2 dial, light face: a stand-alone copy of the live What If Machine dial (what-if-machine-f2.html, light theme).
   Turned-steel bezel (the CSS ring the live page shows), dark gasket, printed card with the graduated scale and the
   three tier arcs, tapered needle on a polished hub, one glass reflection. Values copied from F2's computed styles.
   The container (.f2d-host) is a square; f2-dial.js sizes the bezel, gasket and card from its width like F2 does. */
.f2d-host{position:relative}
.f2d{position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:1;
  box-shadow:0 0 0 1px rgba(24,34,50,.42),0 14px 26px -14px rgba(24,34,50,.55)}
.f2d .f2d-bezel{position:absolute;inset:0;border-radius:50%;
  background:
    radial-gradient(circle closest-side,#808080 calc(100% - var(--b)),#d2d2d2 calc(100% - var(--b) + 1px),#7a7a7a calc(100% - var(--b) + 3px),#808080 calc(100% - var(--b)*.62),#c4c4c4 calc(100% - var(--b)*.42),#808080 calc(100% - var(--b)*.2),#e0e0e0 calc(100% - 2px),#3a3a3a 100%),
    repeating-radial-gradient(circle,#8a8a8a 0 .6px,#767676 .6px 1.3px),
    conic-gradient(from 0deg,#aeb6bf 0deg,#87919d 28deg,#59636f 68deg,#76818c 104deg,#c7ced4 122deg,#eef1f4 130deg,#a2abb4 142deg,#626c78 172deg,#47505b 212deg,#64707b 248deg,#a3acb6 280deg,#e6eaee 298deg,#ffffff 310deg,#eef1f4 322deg,#bfc6cd 340deg,#aeb6bf 360deg);
  background-blend-mode:overlay,overlay,normal;
  box-shadow:inset 1px 1.5px .5px rgba(255,255,255,.85),inset -1px -1.5px 1px rgba(40,50,62,.42),0 0 0 .75px rgba(40,50,62,.45),2px 6px 14px -4px rgba(38,52,74,.26)}
.f2d .f2d-gasket{position:absolute;border-radius:50%;background:#121822;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
.f2d .f2d-well{position:absolute;border-radius:50%;overflow:hidden;
  background:radial-gradient(circle at 40% 34%,#f2f3f5 0,#eff1f3 52%,#e4e7eb 100%);box-shadow:inset 0 0 0 1px rgba(20,28,40,.32)}
.f2d svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.f2d .f2d-face line{shape-rendering:geometricPrecision}
.f2d .f2d-lip{position:absolute;inset:0;border-radius:50%;box-shadow:inset 3px 5px 9px -5px rgba(16,24,38,.5)}

/* The shared input on the dial's left rim (F2's .wires .input): an 18px turned collar, its slot on the outer side.
   The lamp sits in the slot and flashes when a source plugs in. */
.f2d-input{position:absolute;z-index:2;pointer-events:none;overflow:visible}
.f2d-input .sh{fill:rgba(38,52,74,.18)}
.f2d-input .bd{fill:#c3c9d1;stroke:rgba(38,52,74,.55);stroke-width:.75}
.f2d-input .sl{fill:#11161d}
.f2d-input .lamp{fill:#3d9ef7;opacity:0}

/* the needle's own layers: turned by a GPU transform about the dial's centre (f2-dial.js) */
.f2d .f2d-nsh,.f2d .f2d-ndl{transform-origin:50% 50%;will-change:transform}