.apogeo-demo-dialog {
  --demo-bg: #f5f3ee; --demo-ink: #171717; --demo-gap: 24px;
  color: var(--demo-ink); background: var(--demo-bg); border: 1px solid currentColor;
  margin: auto; padding: var(--demo-gap); width: min(540px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px); overflow: auto; font-family: inherit; font-size: 16px; line-height: 1.5;
}
.apogeo-demo-dialog::backdrop { background: #0009; }
.apogeo-demo-dialog[open] { animation: apogeo-demo-in .22s ease-out both; }
.apogeo-demo-dialog h2 { font: inherit; font-weight: 600; margin: 0 0 16px; }
.apogeo-demo-dialog p { font-size: 14px; line-height: 1.55; margin: 0 0 16px; }
.apogeo-demo-dialog div { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; }
.apogeo-demo-dialog a { color: inherit; text-decoration: underline; }
.apogeo-demo-dialog button { color: inherit; font: inherit; border: 1px solid currentColor; padding: 8px 12px; cursor: pointer; background: transparent; }
.apogeo-demo-dialog :focus-visible { outline: 3px solid currentColor; outline-offset: 4px; }
@keyframes apogeo-demo-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .apogeo-demo-dialog[open] { animation: none; } }
@media print { .apogeo-demo-dialog { display: none !important; } }