.tabletop-surface {
  position: relative;
  isolation: isolate;
  background-color: var(--color-table-base);
  background-image:
    linear-gradient(
      142deg,
      color-mix(
        in srgb,
        var(--color-table-light) 76%,
        transparent
      ) 0%,
      color-mix(
        in srgb,
        var(--color-table-light) 42%,
        transparent
      ) 28%,
      color-mix(
        in srgb,
        var(--color-table-warm-mid) 18%,
        transparent
      ) 64%,
      color-mix(
        in srgb,
        var(--color-table-shadow) 28%,
        transparent
      ) 100%
    ),
    radial-gradient(
      ellipse 76% 48% at 50% 55%,
      color-mix(
        in srgb,
        var(--color-table-cool-accent) 24%,
        transparent
      ) 0%,
      color-mix(
        in srgb,
        var(--color-table-cool-accent) 10%,
        transparent
      ) 48%,
      transparent 80%
    ),
    radial-gradient(
      ellipse 92% 78% at 14% 10%,
      color-mix(
        in srgb,
        var(--color-table-light) 28%,
        transparent
      ) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 120% 108% at 50% 48%,
      transparent 56%,
      color-mix(
        in srgb,
        var(--color-table-shadow) 24%,
        transparent
      ) 100%
    );
  background-position:
    center,
    50% 54%,
    0% 0%,
    center;
  background-repeat: no-repeat;
  background-size:
    112% 106%,
    112% 96%,
    118% 106%,
    100% 100%;
}

.tabletop-surface::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(
      114deg,
      transparent 0%,
      transparent 42%,
      var(--color-table-light) 48%,
      transparent 56%,
      transparent 100%
    ),
    linear-gradient(
      7deg,
      transparent 0%,
      transparent 44%,
      var(--color-table-shadow) 50%,
      transparent 57%,
      transparent 100%
    ),
    radial-gradient(
      circle at 28% 36%,
      var(--color-table-cool-accent) 0 0.75px,
      transparent 1.15px
    );
  background-position:
    11% 7%,
    79% 64%,
    0 0;
  background-repeat: repeat;
  background-size:
    460px 390px,
    620px 510px,
    132px 116px;
  content: "";
  opacity: var(--tabletop-texture-opacity);
  pointer-events: none;
}

.tabletop-surface::after {
  position: absolute;
  z-index: 0;
  inset: 0;
  background-image:
    linear-gradient(
      136deg,
      transparent 5%,
      var(--color-table-shadow) 34%,
      var(--color-table-cool-accent) 50%,
      transparent 74%
    ),
    radial-gradient(
      ellipse 82% 46% at 88% 12%,
      var(--color-table-shadow) 0%,
      transparent 78%
    );
  background-position:
    64% 8%,
    100% 0%;
  background-repeat: no-repeat;
  background-size:
    178% 148%,
    132% 108%;
  content: "";
  opacity: var(--tabletop-editorial-shadow-opacity);
  pointer-events: none;
}

.tabletop-surface > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 768px) {
  .tabletop-surface {
    background-position:
      center,
      50% 56%,
      -8% -6%,
      center;
    background-size:
      108% 118%,
      104% 112%,
      110% 118%,
      100% 100%;
  }

  .tabletop-surface::before {
    background-position:
      18% 12%,
      72% 58%,
      0 0;
    background-size:
      620px 520px,
      780px 640px,
      156px 138px;
  }

  .tabletop-surface::after {
    background-position:
      58% 2%,
      100% -6%;
    background-size:
      154% 164%,
      116% 124%;
  }
}