.material-paper,
.material-paint,
.material-ink,
.material-wash {
  isolation: isolate;
  position: relative;
}

.material-paper::before,
.material-paint::before,
.material-ink::before,
.material-wash::before {
  border-radius: inherit;
  content: "";
  inset: 0;
  opacity: var(--material-opacity, .14);
  pointer-events: none;
  position: absolute;
  z-index: 1;
}

.material-paper::before {
  background-image:
    radial-gradient(circle at 15% 23%, rgb(18 48 56 / .18) 0 .45px, transparent .7px),
    radial-gradient(circle at 73% 61%, rgb(255 255 255 / .92) 0 .55px, transparent .85px),
    repeating-linear-gradient(96deg, transparent 0 8px, rgb(38 136 161 / .035) 9px 10px);
  background-size: 11px 13px, 17px 19px, 100% 100%;
  mix-blend-mode: multiply;
}

.material-paint::before {
  background-image:
    repeating-linear-gradient(101deg, transparent 0 21px, rgb(255 255 255 / .15) 22px 24px, transparent 25px 43px),
    radial-gradient(ellipse at 18% 32%, rgb(255 255 255 / .25), transparent 31%),
    radial-gradient(ellipse at 82% 72%, rgb(0 35 43 / .22), transparent 35%);
  mix-blend-mode: soft-light;
  opacity: var(--material-opacity, .22);
}

.material-ink::before {
  background-image:
    radial-gradient(circle, transparent 0 .7px, rgb(241 243 244 / .56) .85px 1.2px, transparent 1.35px),
    repeating-linear-gradient(88deg, transparent 0 25px, rgb(241 243 244 / .22) 26px 27px);
  background-size: 13px 15px, 100% 100%;
  mix-blend-mode: screen;
  opacity: var(--material-opacity, .1);
}

.material-wash::before {
  background:
    radial-gradient(ellipse at 12% 18%, rgb(255 255 255 / .22), transparent 38%),
    radial-gradient(ellipse at 88% 82%, rgb(0 24 31 / .3), transparent 44%);
  mix-blend-mode: overlay;
}

.console-surface {
  background-color: #061b22;
  background-image:
    linear-gradient(rgb(56 165 190 / .055) 1px, transparent 1px),
    linear-gradient(90deg, rgb(56 165 190 / .055) 1px, transparent 1px),
    repeating-linear-gradient(0deg, transparent 0 3px, rgb(255 255 255 / .018) 4px);
  background-size: 24px 24px, 24px 24px, 100% 4px;
}

.technical-cut {
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px));
}
