.dlg {
  width: calc(100% - 32px); max-width: 460px; max-height: calc(100dvh - 32px); padding: 0; border: 0; background: transparent; color: var(--ink); overflow: visible;
  opacity: 0; transform: translateY(48px);
  transition: opacity 160ms ease, transform 160ms var(--ease-feed), overlay 160ms allow-discrete, display 160ms allow-discrete;
}
.dlg[open] { opacity: 1; transform: none; transition-duration: 220ms; }
@starting-style { .dlg[open] { opacity: 0; transform: translateY(48px); } }
.dlg::backdrop { background: rgb(29 28 26 / .55); opacity: 0; transition: opacity 160ms ease, overlay 160ms allow-discrete, display 160ms allow-discrete; }
.dlg[open]::backdrop { opacity: 1; transition-duration: 220ms; }
@starting-style { .dlg[open]::backdrop { opacity: 0; } }
.dlg__paper {
  position: relative; padding: 52px 22px 22px; background: var(--bond) var(--tex-bond) 0 0 / 512px; box-shadow: 0 2px 0 rgb(29 28 26 / .1), 0 24px 48px -12px rgb(29 28 26 / .5);
  max-height: calc(100dvh - 32px); overflow: auto; overscroll-behavior: contain;
}
.dlg__paper > * + * { margin-top: 14px; }
.dlg h2 { font-size: 26px; line-height: 32px; }
.dlg h2:focus { outline: none; }
.dlg li { margin-top: 8px; }
.dlg a { font-weight: 700; }
.dlg--page { max-width: min(96vw, 560px); }
.dlg--page .dlg__paper { padding: 14px; display: grid; gap: 12px; justify-items: center; }
.dlg--page img { max-height: calc(100dvh - 130px); width: auto; max-width: 100%; box-shadow: var(--shadow-paper); background: var(--bond); }
html:has(dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .dlg, .dlg[open] { transform: none; transition-property: opacity, overlay, display; }
  @starting-style { .dlg[open] { transform: none; } }
}