.ds-modal-open{
  overflow: hidden;
  scrollbar-gutter: stable;
}
.ds-modal-open body{ overflow: hidden; }

.ds-modal{
  position: fixed;
  inset: 0;
  z-index: 900;

  display: grid;
  place-items: center;

  opacity: 0;
  transition: opacity .22s ease;
}

.ds-modal.is-on{ opacity: 1; }
.ds-modal.is-going{ opacity: 0; }

.ds-modal__veil{
  --ds-veil-px: 12px;

  position: absolute;
  inset: 0;
  background-color: rgb(0 0 0 / .66);
  --ds-pixel-tile: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20width=%2712%27%20height=%2712%27%20shape-rendering=%27crispEdges%27%3E%3Crect%20x=%270%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%271%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%272%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%273%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%274%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%275%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%276%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%278%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%279%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%2710%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%2711%27%20y=%270%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%272%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%273%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%276%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%277%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.09%27/%3E%3Crect%20x=%278%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%2710%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%2711%27%20y=%271%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%270%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%271%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%272%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.09%27/%3E%3Crect%20x=%273%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%274%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%276%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%278%27%20y=%272%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%270%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%271%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%272%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%274%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%275%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%276%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%277%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%278%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%279%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%2710%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%2711%27%20y=%273%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%270%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%271%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%273%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%275%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%276%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%277%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%278%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%279%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%2711%27%20y=%274%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.09%27/%3E%3Crect%20x=%270%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%271%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%272%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%273%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%274%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%277%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%279%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%2711%27%20y=%275%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%270%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%273%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%275%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%276%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%278%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%279%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%2710%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.09%27/%3E%3Crect%20x=%2711%27%20y=%276%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%270%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%272%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%273%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%274%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%275%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%276%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%277%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%279%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%2710%27%20y=%277%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%270%27%20y=%278%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%273%27%20y=%278%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%274%27%20y=%278%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.09%27/%3E%3Crect%20x=%278%27%20y=%278%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%279%27%20y=%278%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%2711%27%20y=%278%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%270%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%271%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%272%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%273%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.42%27/%3E%3Crect%20x=%274%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%275%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.09%27/%3E%3Crect%20x=%277%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%278%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%279%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%2711%27%20y=%279%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%270%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%271%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%273%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%274%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%275%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%277%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%279%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%2710%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%2711%27%20y=%2710%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%270%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%274%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%275%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3Crect%20x=%276%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%278%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(255,255,255)%27%20fill-opacity=%270.05%27/%3E%3Crect%20x=%279%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%2710%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.14%27/%3E%3Crect%20x=%2711%27%20y=%2711%27%20width=%271%27%20height=%271%27%20fill=%27rgb(0,0,0)%27%20fill-opacity=%270.28%27/%3E%3C/svg%3E");
  background-image: var(--ds-pixel-tile);
  background-size: calc(12 * var(--ds-veil-px)) calc(12 * var(--ds-veil-px));
  image-rendering: pixelated;
}

.ds-modal__frame{
  position: relative;
  width: min(86vw, calc(86vh * 1440 / 760));
  max-width: 1440px;

  filter: drop-shadow(0 30px 50px rgb(0 0 0 / .55));
}

.ds-modal__panel,
.ds-modal__close{
  clip-path: polygon(
    calc(2 * var(--ds-step)) 0, calc(100% - 2 * var(--ds-step)) 0,
    calc(100% - 2 * var(--ds-step)) var(--ds-step), calc(100% - var(--ds-step)) var(--ds-step),
    calc(100% - var(--ds-step)) calc(2 * var(--ds-step)), 100% calc(2 * var(--ds-step)),
    100% calc(100% - 2 * var(--ds-step)), calc(100% - var(--ds-step)) calc(100% - 2 * var(--ds-step)),
    calc(100% - var(--ds-step)) calc(100% - var(--ds-step)), calc(100% - 2 * var(--ds-step)) calc(100% - var(--ds-step)),
    calc(100% - 2 * var(--ds-step)) 100%, calc(2 * var(--ds-step)) 100%,
    calc(2 * var(--ds-step)) calc(100% - var(--ds-step)), var(--ds-step) calc(100% - var(--ds-step)),
    var(--ds-step) calc(100% - 2 * var(--ds-step)), 0 calc(100% - 2 * var(--ds-step)),
    0 calc(2 * var(--ds-step)), var(--ds-step) calc(2 * var(--ds-step)),
    var(--ds-step) var(--ds-step), calc(2 * var(--ds-step)) var(--ds-step));
}

.ds-modal__panel{
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #00164C;
  --ds-step: clamp(5px, .6vw, 9px);
}

.ds-modal__panel--game{
  aspect-ratio: 1440 / 760;
  touch-action: manipulation;
  cursor: pointer;
}

@media (max-width: 720px) and (orientation: portrait){
  .ds-modal--game .ds-modal__frame{ width: min(92vw, 26rem); }
  .ds-modal__panel--game{
    aspect-ratio: auto;
    height: min(78svh, 40rem);
  }
}

.ds-modal__close{
  --ds-step: 3px;

  position: absolute;
  z-index: 2;
  top:   12px;
  right: 12px;

  width:  calc(11 * var(--ds-step));
  height: calc(11 * var(--ds-step));
  padding: 0;
  border: 0;
  background: var(--ds-red, #E63E3E);
  cursor: pointer;
  transition: filter .2s ease;
}

.ds-modal__close span{
  position: absolute;
  inset: calc(3 * var(--ds-step));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5' shape-rendering='crispEdges'%3E%3Cpath fill='%23F0F0F0' d='M0 0h1v1H0zM1 1h1v1H1zM2 2h1v1H2zM3 3h1v1H3zM4 4h1v1H4zM4 0h1v1H4zM3 1h1v1H3zM1 3h1v1H1zM0 4h1v1H0z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  image-rendering: pixelated;
}

.ds-modal__close:hover{ filter: brightness(1.15); }
.ds-modal__close:active{ transform: translateY(var(--ds-step)); }

.ds-modal__close:focus-visible{
  outline: 2px solid var(--ds-paper, #F0F0F0);
  outline-offset: -6px;
}

.ds-modal--note{
  padding: 1.25rem;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.ds-modal--note .ds-modal__veil{
  background-color: rgb(0 0 0 / .66);
  background-image: none;
  cursor: pointer;
}
.ds-modal--note .ds-modal__veil::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: var(--ds-pixel-tile);
  background-size: calc(12 * 34px) calc(12 * 34px);
  image-rendering: pixelated;
  opacity: .34;
}

.ds-modal--note .ds-modal__frame{
  width: min(54rem, 100%);
  filter: none;
  transform: translateY(14px) scale(.98);
  transition: transform .32s cubic-bezier(.2, .8, .2, 1);
}
.ds-modal--note.is-on .ds-modal__frame{ transform: none; }
.ds-modal--note.is-going .ds-modal__frame{ transform: translateY(8px) scale(.99); }

.ds-modal__panel--note{
  clip-path: none;
  overflow: visible;
  background: var(--ds-ink, #171717);
  box-shadow: 0 18px 44px rgb(0 0 0 / .32), 0 3px 10px rgb(0 0 0 / .18);
  padding: clamp(3rem, 4.2vw, 3.5rem) clamp(1.75rem, 5.6vw, 4.75rem);
}

.ds-modal__notes{ display: grid; }
.ds-modal__note{
  grid-area: 1 / 1;
  align-self: center;
  margin: 0;
  font-family: var(--ds-font-alt, "Funnel Display", system-ui, sans-serif);
  font-weight: 300;
  font-size: clamp(1.05rem, .88rem + .62vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: .005em;
  color: var(--ds-paper, #F0F0F0);
  text-wrap: pretty;
}
.ds-modal__note p{ margin: 0; }
.ds-modal__note strong{ font-weight: 600; }
.ds-modal__note.is-ghost{ visibility: hidden; }

.ds-note__title{
  display: table;
  margin: 0 0 .75em;
  font-family: var(--ds-font-display, "Zalando Sans", system-ui, sans-serif);
  font-weight: var(--ds-fw-bold, 800);
  font-size: 1.45em;
  line-height: 1.15;
  letter-spacing: .005em;
  color: var(--ds-paper, #F0F0F0);
  background: linear-gradient(var(--ds-red, #E63E3E), var(--ds-red, #E63E3E)) 0 100% / 100% .36em no-repeat;
  padding: 0 .08em .02em;
  margin-left: -.08em;
}

.ds-modal--note .ds-modal__close{
  clip-path: none;
  top: clamp(.5rem, 1.1vw, .9rem);
  right: clamp(.5rem, 1.1vw, .9rem);
  width: 2.75rem;
  height: 2.75rem;
  background: none;
  color: var(--ds-paper, #F0F0F0);
  transition: color .2s ease, transform .25s ease;
}
.ds-modal--note .ds-modal__close span{
  inset: 50% auto auto 50%;
  width: 1.4rem;
  height: 1.4rem;
  translate: -50% -50%;
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
  rotate: 45deg;
  image-rendering: auto;
}
.ds-modal--note .ds-modal__close:hover{ filter: none; color: var(--ds-red, #E63E3E); transform: rotate(90deg); }
.ds-modal--note .ds-modal__close:active{ transform: rotate(90deg) scale(.9); }
.ds-modal--note .ds-modal__close:focus-visible{ outline-offset: 2px; }

@media (prefers-reduced-motion: reduce){
  .ds-modal{ transition: none; }
  .ds-modal__close{ transition: none; }
  .ds-modal__close:active{ transform: none; }
  .ds-modal--note .ds-modal__frame{ transition: none; transform: none; }
  .ds-modal--note .ds-modal__close:hover,
  .ds-modal--note .ds-modal__close:active{ transform: none; }
}