.dialogue {
  --cutout-width: 4em;
  backdrop-filter: blur(20px);
  filter: drop-shadow(var(--accent-background) 0 0 2em);
  margin: 0 auto 1em;
  position: relative;
  transition: all 400ms ease;
  width: clamp(5em, 90dvw, 1080px);
  z-index: 10;
}
.dialogue::before {
  --thickness: .3em;
  --offset: .2em;
  background-color: var(--accent);
  clip-path: polygon(
    0 var(--cutout-width),
    var(--cutout-width) 0,
    100% 0,
    100% calc(100% - var(--cutout-width)),
    calc(100% - var(--cutout-width)) 100%,
    0 100%,
    0 var(--cutout-width),
    var(--thickness) calc(var(--cutout-width) + var(--offset)),
    var(--thickness) calc(100% - var(--thickness)),
    calc(100% - var(--cutout-width) - var(--offset)) calc(100% - var(--thickness)),
    calc(100% - var(--thickness)) calc(100% - var(--cutout-width) - var(--offset)),
    calc(100% - var(--thickness)) var(--thickness),
    calc(var(--cutout-width) + var(--offset)) var(--thickness),
    var(--thickness) calc(var(--cutout-width) + var(--offset))
  );
  content: "";
  opacity: .8;
  position: absolute;
  inset: 0;
}
.dialogue::after {
  --fill-width: 3em;
  --angle: -.6em;
  --thickness: .5em;
  background-color: var(--accent);
  clip-path: polygon(
    0 0,
    0 var(--fill-width),
    var(--fill-width) 0,
    0 0,
    0 100%,
    100% 100%,
    100% calc(100% - var(--fill-width)),
    calc(100% - var(--thickness)) calc(100% - var(--fill-width) - var(--angle)),
    calc(100% - var(--thickness)) calc(100% - var(--thickness)),
    calc(100% - var(--fill-width) - var(--angle)) calc(100% - var(--thickness)),
    calc(100% - var(--fill-width)) 100%,
    0 100%
  );
  content: "";
  opacity: .3;
  position: absolute;
  inset: 0;
}

.dialogue__text-container {
  --thickness: .8em;
  --offset: .5em;
  background-color: rgba(255, 255, 255, .1);
  clip-path: polygon(
    0 var(--cutout-width),
    var(--thickness) calc(var(--cutout-width) + var(--offset)),
    var(--thickness) calc(100% - var(--thickness)),
    calc(100% - var(--cutout-width) - var(--offset)) calc(100% - var(--thickness)),
    calc(100% - var(--thickness)) calc(100% - var(--cutout-width) - var(--offset)),
    calc(100% - var(--thickness)) var(--thickness),
    calc(var(--cutout-width) + var(--offset)) var(--thickness),
    var(--thickness) calc(var(--cutout-width) + var(--offset))
  );
  padding: 2em 1em;
}
@media (min-width: 33.75em) {
  .dialogue__text-container {
    padding: 2em 3em;
  }
}
.dialogue__text-container .close {
  cursor: pointer;
  color: white;
  display: flex;
  font-size: 1.75rem;
  justify-content: flex-end;
  line-height: 1;
  padding: .5em;
}
.dialogue__text-container header {
  display: flex;
  margin-left: 1em;
}
.dialogue__text-container header img {
  align-self: center;
  clip-path: circle(50%);
  width: 4em;
  height: 4em;
}
.dialogue__text-container header h2 {
  background-image: linear-gradient(to right, transparent, var(--accent-background));
  color: var(--main);
  flex: 1;
  font-family: "SEG14";
  font-size: 2rem;
  margin-block: .5em;
  padding: .25em;
  text-align: right;
}
.dialogue__text-container p {
  --cutout-width-p: 1.5em;
  background-color: var(--main-background);
  clip-path: polygon(
    0 var(--cutout-width-p),
    var(--cutout-width-p) 0,
    100% 0,
    100% calc(100% - var(--cutout-width-p)),
    calc(100% - var(--cutout-width-p)) 100%,
    0 100%
  );
  color: white;
  padding: var(--cutout-width-p);
}
.dialogue__text-container p span {
  animation: blink 1s linear infinite;
}
.dialogue__text-container > img {
  margin-top: 2em;
  width: 75%;
  --mask: conic-gradient(from -135deg at right, #0000, #000 1deg 89deg, #0000 90deg) 50% / 100% 20px;
  -webkit-mask: var(--mask);
  mask: var(--mask);
}