

.sd-mark {
  width: 1em;
  height: 1em;
  position: relative;
  flex: none;
  display: block;
  border-radius: .29em;
  box-shadow: var(--sd-mark-shadow);
}
.sd-mark__body {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: .29em;
  clip-path: inset(0 round .29em);
  background: var(--sd-mark-base);
  box-shadow: var(--sd-mark-rim);
}
.sd-mark__body::before {
  content: "";
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(38% 34% at 24% 26%, var(--sd-mark-spot-1) 0%, transparent 62%),
    radial-gradient(42% 36% at 78% 30%, var(--sd-mark-spot-2) 0%, transparent 64%),
    radial-gradient(46% 40% at 54% 86%, var(--sd-mark-spot-3) 0%, transparent 62%),
    radial-gradient(34% 30% at 88% 78%, var(--sd-mark-spot-4) 0%, transparent 60%);
  filter: blur(.055em);
}
.sd-mark svg {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
}
.sd-mark__body::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: .29em;
  background: linear-gradient(166deg, var(--sd-mark-gloss) 0%, transparent 30%);
  mix-blend-mode: screen;
}
