.modal{
  --cut-ms:280ms;
  background:
    repeating-linear-gradient(
      135deg,
      transparent 0 3px,
      rgba(0,229,255,.045) 3px 4px
    ),
    radial-gradient(rgba(255,46,136,.16) 1px,transparent 1.5px) 0 0/5px 5px,
    rgba(4,3,7,.93);
}

.modal::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(to bottom,rgba(11,10,16,.96) 0,transparent 12%,transparent 88%,rgba(11,10,16,.96) 100%),
    linear-gradient(to right,rgba(11,10,16,.96) 0,transparent 7%,transparent 93%,rgba(11,10,16,.96) 100%);
}

.sheet{
  position:relative;z-index:2;
  animation:panelcut-drop var(--cut-ms) cubic-bezier(.16,.84,.32,1) both;
  will-change:transform,opacity;
  box-shadow:
    12px 12px 0 var(--ink),
    0 0 0 3px var(--paper),
    0 0 0 9px var(--ink);
}

@keyframes panelcut-drop{
  0%{opacity:0;transform:translateY(-14px) scale(1);}
  62%{opacity:1;transform:translateY(0) scale(1.004);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}

.modal.is-closing{
  animation:panelcut-gutter-out 180ms ease-in both;
  pointer-events:none;
}

.modal.is-closing .sheet{
  animation:panelcut-lift 180ms cubic-bezier(.5,0,.85,.4) both;
}

@keyframes panelcut-lift{
  0%{opacity:1;transform:translateY(0) scale(1);}
  100%{opacity:0;transform:translateY(14px) scale(.96);}
}

@keyframes panelcut-gutter-out{
  0%{opacity:1;}
  100%{opacity:0;}
}

@media(prefers-reduced-motion:reduce){
  .sheet,
  .modal.is-closing,
  .modal.is-closing .sheet{animation:none !important;}
}

@media print{
  .sheet,.modal.is-closing .sheet,.modal.is-closing{animation:none !important;}
  .modal::before{display:none;}
}

.is-capture .sheet,
.is-capture .modal.is-closing,
.is-capture .modal.is-closing .sheet{animation:none !important;}