.surface {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  color-scheme: light dark;
  background: #fff;
}

.disc {
  font-size: clamp(192px, 28vmin, 288px);
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: #a47eff;
  background-image: linear-gradient(
    150deg,
    lab(100 0 0 / 12%) 0%,
    lab(100 0 0 / 0%) 44%,
    lab(17.319 35.8335 -48.676 / 10%) 100%
  );
  box-shadow:
    inset 0 0.007em 0.012em #ffffff73,
    inset 0 -0.009em 0.016em #3e19784d,
    0 0.04em 0.07em #240e4b33;
}

@media (prefers-color-scheme: dark) {
  .surface {
    background-color: #242426;
    background-image: linear-gradient(
      160deg,
      lab(100 0 0 / 7.5%) 0%,
      lab(100 0 0 / 0%) 50%,
      lab(0 0 0 / 13%) 100%
    );
  }
}