/* Fixed glass frames; the original moving inner caps keep their own material. */
.glass-frame {
  position: absolute;
  inset: var(--glass-inset, 0);
  display: block;
  padding: var(--glass-rim-width, 4px);
  border-radius: inherit;
  pointer-events: none;
  z-index: 1;
  background: transparent;
  -webkit-backdrop-filter: blur(var(--glass-blur, 4px));
  backdrop-filter: blur(var(--glass-blur, 4px));
  /* Only the annulus is glass. The center neither paints nor blurs the caps. */
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
.glass-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
}
.glass-frame-sampled canvas { opacity: .3; }
.glass-frame-ellipse {
  padding: 0;
  border-radius: 50%;
  -webkit-mask: none;
  mask: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* The original SVG remains the translucent Figma material tint above sampling. */
.key-layer:first-child .glass-material-ready > img { z-index: 2; }
.glass-frame::before,
.glass-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.glass-frame::before {
  /* -45° source light: upper-right ridge and opposing lower-left reflection. */
  box-shadow: inset -.5px .5px .35px #ffffff8c, inset .3px -.3px .4px #00000018;
}
.glass-frame::after {
  box-shadow: inset .2px -.15px .25px #ffba8a24, inset -.2px .2px .25px #afe8ff30;
}
.character-switch.glass-material-ready {
  background: transparent;
  box-shadow: 0 .4px .4px #ffffff66;
}
.character-switch.glass-material-ready::before { opacity: .12; }
.character-switch .glass-frame-sampled canvas { opacity: .24; }
.character-switch.glass-material-ready > .character-switch-bed,
.bw-switch.glass-material-ready > .font-key {
  position: relative;
  z-index: 2;
}
/* No effect overlays the rainbow track, range hit area or moving slider cap. */
.color-slider.glass-material-ready > .slider-thumb { z-index: 2; }