.cm-toggle { position: relative; display: inline-block; width: 44px; height: 20px; flex-shrink: 0; z-index: 0; }
    /* The batch shimmer used to draw a ring here and survive under the thumb. */
    .cm-toggle::before, .cm-toggle-slider::after { content: none; }

    /* PLAIN FALLBACK, and the floor everywhere. A flat white knob on a flat
       track: no glass, no scaling, no springs, no transition. Engines without
       SVG backdrop-filter get exactly this and nothing more. */
    .cm-toggle-slider::before {
      content: ''; position: absolute; top: 50%; margin-top: -7px; left: 3px;
      width: 14px; height: 14px; border-radius: 50%;
      background: #ededed; transform: translateX(0);
    }
    .cm-toggle input:checked + .cm-toggle-slider::before { transform: translateX(24px); }
    /* State colour for the fallback. On Chromium the spring writes the track
       colour inline every frame, which outranks this. The green at 55%
       (2026-09-23, the owner's pick "switch: soft": at the depth of the rest
       of the page, a touch darker, so it stops shouting). */
    .cm-toggle input:checked + .cm-toggle-slider { background: rgba(48, 209, 88, 0.55); }
    .cm-toggle-thumb { display: none; }
    .cm-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
    .cm-toggle-slider {
      position: absolute; cursor: pointer; inset: 0; border: 0;
      border-radius: 10px; background: #94949F77; touch-action: none;
    }
    .cm-toggle input:focus-visible ~ .cm-toggle-slider { outline: 1px solid rgba(237, 237, 237, 0.6); outline-offset: 2px; }

    /* Chromium is the only engine that accepts an SVG filter as a
       backdrop-filter. Elsewhere the shapes, colours, drag and states above
       are all still correct; only the refraction is missing. */
    @supports (backdrop-filter: url(#kg-switch-filter)) {
      /* Mounted only while the thumb is actually see-through, which is the only
         time the refraction can be seen at all.

         At rest the thumb paints rgba(255, 255, 255, 1) - a fully opaque fill,
         laid straight over the filtered backdrop - so the whole filter graph was
         being computed and then completely hidden. It is not free to compute: an
         SVG backdrop-filter turns the element into its own render surface and
         makes the compositor read the backdrop back out and run nine filter
         primitives, two of them feImage decodes, every frame the backdrop moves
         underneath it. Scrolling moves it every frame.

         Measured on the generator page: 34 of the 36 elements carrying an SVG
         backdrop-filter were slider and switch thumbs, every one of them resting
         and opaque, 61,619px of surface between them - and that is before a
         single LoRA is selected, each of which adds another slider.

         The loop in KG_GLASS_JS adds kg-lens the moment the alpha spring leaves
         opaque and drops it again once the spring settles back, so the glass is
         present for exactly the window it is visible in and a resting control
         carries no render surface at all. The rest of the thumb - fill, radius,
         shadow, scale, spring - is untouched, so nothing about the look at rest
         or while dragging changes. */
      /* Gated on the class the script sets once it is actually running, so a
         script that never executes still leaves a usable plain knob rather
         than a switch with nothing on it. */
      .kg-glass-on .cm-toggle-slider::before { content: none; }
      /* 50%, not the 10px that is half of the default 20px track: the
         switches on Regional Prompting, Anima Turbo and L40S Fast Mode are
         22px tall, so a fixed offset left the knob a pixel high on exactly
         those and nowhere else. The script sizes the rest of the box from the
         track it is actually in. */
      .kg-glass-on .cm-toggle-thumb {
        display: block; position: absolute; left: 0; top: 50%; width: 40px; height: 25.3px;
        margin-left: -6.04px; border-radius: 12.65px; cursor: pointer;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 4px 22px rgba(0, 0, 0, 0.1);
        transform: translateX(0px) translateY(-50%) scale(0.65);
      }
      /* Same bargain as the slider thumb above: opaque at rest, so the
         refraction only goes on once the alpha spring has made it visible. */
      .kg-glass-on .cm-toggle-thumb.kg-lens {
        backdrop-filter: url(#kg-switch-filter); -webkit-backdrop-filter: url(#kg-switch-filter);
      }
    }