.demo-container[data-astro-cid-uatefubo]{max-width:1000px;margin:var(--spacing-2xl) auto;padding:0 var(--spacing-md)}h1[data-astro-cid-uatefubo]{margin-top:0;margin-bottom:var(--spacing-md)}.intro[data-astro-cid-uatefubo]{font-size:1.05rem;color:var(--color-text-soft);margin-bottom:var(--spacing-2xl);line-height:var(--line-height-body)}.intro[data-astro-cid-uatefubo] code[data-astro-cid-uatefubo]{background-color:var(--color-accent-soft);color:var(--color-accent-dark);padding:.125rem .375rem;border-radius:3px}.demo-section[data-astro-cid-uatefubo]{margin-bottom:var(--spacing-2xl);padding-bottom:var(--spacing-2xl);border-bottom:1px solid var(--color-border-subtle)}.demo-section[data-astro-cid-uatefubo]:last-of-type{border-bottom:none}.demo-section[data-astro-cid-uatefubo] h2[data-astro-cid-uatefubo]{margin-top:0;margin-bottom:var(--spacing-md)}.demo-code-and-preview[data-astro-cid-uatefubo]{display:grid;grid-template-columns:1fr 1fr;gap:var(--spacing-lg);margin-bottom:var(--spacing-lg)}.preview[data-astro-cid-uatefubo]{background-color:var(--color-surface);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--spacing-lg);display:flex;flex-direction:column;gap:var(--spacing-md)}.code-block[data-astro-cid-uatefubo]{background-color:#f5f5f5;border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);padding:var(--spacing-md)}[data-astro-cid-uatefubo][data-theme=dark] .code-block[data-astro-cid-uatefubo]{background-color:#2a2a2a}.code-block[data-astro-cid-uatefubo] summary[data-astro-cid-uatefubo]{cursor:pointer;font-weight:500;color:var(--color-accent);user-select:none;padding:var(--spacing-sm);margin:calc(var(--spacing-sm) * -1)}.code-block[data-astro-cid-uatefubo] summary[data-astro-cid-uatefubo]:hover{text-decoration:underline}.code-block[data-astro-cid-uatefubo] pre[data-astro-cid-uatefubo]{margin-top:var(--spacing-md);overflow-x:auto;font-size:.9rem}.code-block[data-astro-cid-uatefubo] code[data-astro-cid-uatefubo]{display:block;padding:var(--spacing-md);background-color:inherit;border-radius:var(--radius-sm)}.test-notes[data-astro-cid-uatefubo]{background-color:var(--color-accent-soft);border-left:4px solid var(--color-accent);padding:var(--spacing-md);border-radius:var(--radius-sm)}.test-notes[data-astro-cid-uatefubo] h3[data-astro-cid-uatefubo]{margin-top:0;margin-bottom:var(--spacing-sm);color:var(--color-accent-dark)}.test-notes[data-astro-cid-uatefubo] ul[data-astro-cid-uatefubo]{margin:0;padding-left:var(--spacing-lg)}.test-notes[data-astro-cid-uatefubo] li[data-astro-cid-uatefubo]{margin-bottom:var(--spacing-sm)}.form-group[data-astro-cid-uatefubo]{display:flex;flex-direction:column;gap:var(--spacing-sm);margin-bottom:var(--spacing-md)}.form-group[data-astro-cid-uatefubo] label[data-astro-cid-uatefubo]{font-weight:500}.form-group[data-astro-cid-uatefubo] input[data-astro-cid-uatefubo]{padding:var(--spacing-sm) var(--spacing-md);border:1px solid var(--color-border-subtle);border-radius:var(--radius-sm);font-family:inherit;font-size:inherit}.form-group[data-astro-cid-uatefubo] input[data-astro-cid-uatefubo]:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}.form-actions[data-astro-cid-uatefubo]{display:flex;gap:var(--spacing-sm);margin-top:var(--spacing-lg)}dialog[data-astro-cid-uatefubo]{padding:var(--spacing-lg);border:1px solid var(--color-border-subtle);border-radius:var(--radius-md);box-shadow:0 10px 40px #00000029}dialog[data-astro-cid-uatefubo]::backdrop{background-color:#00000080}.back-link[data-astro-cid-uatefubo]{margin-top:var(--spacing-2xl);padding-top:var(--spacing-lg);border-top:1px solid var(--color-border-subtle)}.back-link[data-astro-cid-uatefubo] a[data-astro-cid-uatefubo]{color:var(--color-accent);text-decoration:none;font-weight:500}.back-link[data-astro-cid-uatefubo] a[data-astro-cid-uatefubo]:hover{text-decoration:underline}.back-link[data-astro-cid-uatefubo] a[data-astro-cid-uatefubo]:focus-visible{outline:var(--focus-width) solid var(--focus-color);outline-offset:var(--focus-offset)}@media(max-width:768px){.demo-code-and-preview[data-astro-cid-uatefubo]{grid-template-columns:1fr}.form-actions[data-astro-cid-uatefubo]{flex-direction:column}.form-actions[data-astro-cid-uatefubo] button[data-astro-cid-uatefubo]{width:100%}}@media(prefers-reduced-motion:reduce){dialog[data-astro-cid-uatefubo]{animation:none}}