/* The transmitted scene supplies the bevel colour. Only the grazing glints
   are painted, so most of the circumference disappears over a dark sky. */
.ct-optic {
  --light-x: 26%;
  --light-y: 0%;
  position: relative;
  isolation: isolate;
}
.ct-optic::before, .ct-optic::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.ct-optic::before {
  z-index: 0;
  background: radial-gradient(ellipse 68% 83% at var(--light-x) var(--light-y),
    rgb(232 246 255 / .10), transparent 77%);
  box-shadow: inset 0 -2px 4px rgb(6 21 40 / .18), 0 3px 8px rgb(1 8 23 / .23);
}
.ct-optic::after {
  z-index: 1;
  padding: 1px;
  background: radial-gradient(ellipse 40% 74% at var(--light-x) var(--light-y),
      rgb(243 252 255 / .58), transparent 90%),
    radial-gradient(ellipse 25% 44% at 78% 100%, rgb(206 235 255 / .32), transparent);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
}
.ct-optic:active::before { box-shadow: inset 0 2px 4px #0a172c44; }
@media (forced-colors:active), (prefers-reduced-transparency:reduce) {
  .ct-optic::before, .ct-optic::after { display: none; }
}