/* Paint only the silhouette. Layout, text, focus, and hit targets remain normal
   HTML. These two pseudo-elements are reserved for the paper surface. */
[data-paper] {
  isolation: isolate;
  position: relative;
  --surface-color: #fbfaf6;
  --surface-edge: #e9e6df;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  -webkit-mask-image: none;
  mask-image: none;
}
[data-paper]::before,
[data-paper]::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: 24px;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
[data-paper]::before {
  background: var(--surface-edge);
  -webkit-mask-image: var(--paper-mask);
  mask-image: var(--paper-mask);
}
[data-paper]::after {
  background: var(--surface-color);
  -webkit-mask-image: var(--paper-inner);
  mask-image: var(--paper-inner);
}
[data-paper-ready]::before,
[data-paper-ready]::after { border-radius: 0; }