dialog[data-demo-dialog] { box-sizing: border-box; width: min(960px, calc(100vw - 24px)); max-width: none; height: min(900px, calc(100dvh - 24px)); max-height: calc(100dvh - 24px); margin: auto; padding: 16px; border: 1px solid #dce5e2; border-radius: 16px; background: #fff; color: #163b35; overflow: auto; }
dialog[data-demo-dialog]::backdrop { background: rgb(4 24 20 / 65%); }
dialog[data-demo-dialog] header { position: sticky; top: 0; z-index: 1; background: #fff; display: flex; align-items: center; gap: 12px; justify-content: space-between; }
dialog[data-demo-dialog] h2 { margin: 0; font: 600 clamp(18px, 3vw, 24px)/1.3 sans-serif; }
dialog[data-demo-dialog] p { margin: 10px 0; font: 14px/1.5 sans-serif; }
dialog[data-demo-dialog] a { color: #006957; text-decoration: underline; }
dialog[data-demo-dialog] button { flex-shrink: 0; min-height: 44px; padding: 8px 14px; border: 1px solid #9bacaa; border-radius: 8px; background: #fff; color: #163b35; cursor: pointer; }
dialog[data-demo-dialog] [data-demo-embed] { height: max(530px, calc(100% - 140px)); width: 100%; }
dialog[data-demo-dialog] iframe { width: 100%; height: 100%; border: 0; }
@media (max-width: 400px) { dialog[data-demo-dialog] { width: calc(100vw - 8px); padding: 8px; } }