.demo-tools { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 18px 0; }
.demo-tools input, .demo-form input, .demo-form select, .demo-form textarea { width: 100%; border: 1px solid var(--line); border-radius: 5px; background: var(--surface); color: var(--ink); padding: 10px 12px; font: inherit; }
.demo-tools input { flex: 1; min-width: 180px; }
.demo-tools span { color: var(--muted); font-size: 13px; }
.demo-dialog { width: min(680px, calc(100% - 32px)); max-height: calc(100dvh - 40px); border: 1px solid var(--line); border-radius: 8px; padding: 0; background: var(--surface); color: var(--ink); box-shadow: var(--shadow); }
.demo-dialog::backdrop { background: color-mix(in srgb, var(--head) 65%, transparent); }
.demo-dialog header { display: flex; align-items: start; gap: 16px; padding: 20px 24px; border-bottom: 1px solid var(--line); }
.demo-dialog header div { flex: 1; min-width: 0; }
.demo-dialog h2 { margin: 4px 0; font-size: 23px; overflow-wrap: anywhere; }
.demo-dialog .demo-body { padding: 24px; }
.demo-dialog footer { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px 24px; border-top: 1px solid var(--line); }
.demo-form { display: grid; gap: 14px; }
.demo-form label { display: grid; gap: 5px; color: var(--muted); font-size: 13px; }
.demo-form textarea { min-height: 140px; resize: vertical; color: var(--ink); }
.demo-preview { white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.7; margin: 0 0 20px; }
.demo-sort { background: transparent; border: 0; padding: 0; text-align: left; font: inherit; color: inherit; }
.demo-record { background: transparent; border: 0; padding: 0; text-align: left; text-decoration: underline; text-underline-offset: 3px; color: var(--accent); }
.demo-notice { color: var(--muted); font-size: 13px; margin-top: 18px; }
.demo-success { color: var(--good); }