.pg-material {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pg-optics,
.pg-rim {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--pg-radius);
  pointer-events: none;
}
.pg-optics {
  display: block;
  z-index: 0;
  opacity: 0;
}
.pg-material[data-renderer="webgl"] .pg-optics {
  opacity: 1;
}
.pg-rim {
  z-index: 2;
  box-sizing: border-box;
  padding: var(--pg-inset);
  background: conic-gradient(
    from 155deg,
    #f4fcffb0,
    #506a8070 11%,
    #fff 19%,
    #d8f0ff60 25%,
    #f5fcff30 34%,
    #efcfae80 45%,
    #fff 48%,
    #637c9470 53%,
    #e4f3ff40 65%,
    #a1acb380 77%,
    #fff 84%,
    #f4fcffb0
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  -webkit-backdrop-filter: blur(var(--pg-frost, 2px));
  backdrop-filter: blur(var(--pg-frost, 2px));
}
.pg-material[data-renderer="webgl"] .pg-rim {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.pg-material::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: var(--pg-radius);
  border: 0.65px solid #9cabb558;
  box-shadow: inset 0 1px 1px #fff9;
  pointer-events: none;
}
.pg-island {
  position: absolute;
  z-index: 3;
  left: 36%;
  top: 3.8%;
  width: 28%;
  height: 3.75%;
  border-radius: 999px;
  background: linear-gradient(165deg, #34424de8, #141d25fa 48%, #34414aeb);
  box-shadow:
    inset 0 1px 1px #ffffff8c,
    inset 0 -1px 1px #0007,
    0 0 0 0.75px #25324055,
    0 2px 3px #2d3b4920;
}
.pg-island::before {
  content: "";
  position: absolute;
  left: 21%;
  right: 33%;
  height: 11%;
  top: 23%;
  background: #a0c1cd21;
  border-radius: 100%;
  filter: blur(0.5px);
}
.pg-island::after {
  content: "";
  position: absolute;
  right: 13%;
  top: 29%;
  height: 42%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    circle at 35% 30%,
    #8bcced 0%,
    #293f64 24%,
    #0a1420 53%,
    #2a3b52 69%,
    #14202d 75%
  );
  box-shadow: 0 0 0 1px #6e889438;
}

/* Preserve the screenshot UI layout inside the website glass geometry. */
.typography-v2 .device,.typography-v2 .space-stack{border:0;border-radius:var(--pg-radius);isolation:isolate;filter:none;background:transparent;overflow:visible;box-shadow:0 30px 48px -30px #27344042,0 9px 16px -11px #27344038}
.typography-v2 .device::before,.typography-v2 .device::after{content:none}
.typography-v2 .device-screen,.glass-content{position:absolute;z-index:1;overflow:hidden;background:#fafafa}
.pg-island{pointer-events:none}

/* Transmit through the backplate, while widgets, text and images stay opaque. */
.typography-v2 .studio-transmitting .device-screen,.studio-transmitting .hero-home-screen,.studio-transmitting .conversation-screen,.studio-transmitting .conversation-header{background:transparent!important}

.studio-gradient .opening-footer{background:transparent}