:root{--color-blue-50: #eff6ff;--color-blue-100: #dbeafe;--color-blue-300: #93c5fd;--color-blue-400: #60a5fa;--color-blue-500: #0ea5e9;--color-blue-600: #0284c7;--color-blue-700: #0369a1;--color-slate-50: #f8fafc;--color-slate-100: #f1f5f9;--color-slate-200: #e2e8f0;--color-slate-500: #64748b;--color-slate-700: #334155;--color-slate-900: #0f172a;--color-slate-950: #020617;--color-red-50: #fef2f2;--color-red-500: #ef4444;--color-red-700: #b91c1c;--color-orange-50: #fff7ed;--color-orange-500: #f97316;--color-orange-700: #c2410c;--color-green-50: #f0fdf4;--color-green-500: #22c55e;--color-green-700: #15803d;--color-white: #ffffff;--color-black: #000000;--spacing-1: 4px;--spacing-2: 8px;--spacing-3: 12px;--spacing-4: 16px;--spacing-6: 24px;--spacing-8: 32px;--spacing-12: 48px;--spacing-16: 64px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-full: 9999px;--target-size-min: 24px;--target-size-comfort: 44px;--focus-ring-width: 2px;--focus-ring-offset: 2px;--breakpoint-sm: 640px;--breakpoint-md: 768px;--breakpoint-lg: 1024px;--breakpoint-xl: 1280px;--font-size-xs: 12px;--font-size-sm: 14px;--font-size-base: 16px;--font-size-lg: 20px;--font-size-xl: 24px;--font-size-2xl: 32px;--font-family-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-family-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;--motion-duration-instant: 0ms;--motion-duration-fast: .12s;--motion-duration-base: .2s;--motion-duration-slow: .32s;--motion-easing-standard: cubic-bezier(.2, 0, 0, 1);--motion-easing-in: cubic-bezier(.4, 0, 1, 1);--motion-easing-out: cubic-bezier(0, 0, .2, 1);--color-action-primary: var(--color-blue-600);--color-action-primary-hover: var(--color-blue-700);--color-action-destructive: var(--color-red-700);--color-surface-default: var(--color-white);--color-surface-subtle: var(--color-slate-50);--color-surface-elevated: var(--color-slate-100);--color-text-primary: var(--color-slate-900);--color-text-secondary: var(--color-slate-500);--color-text-disabled: var(--color-slate-200);--color-text-on-primary: var(--color-white);--color-border-default: var(--color-slate-200);--color-border-strong: var(--color-slate-700);--color-feedback-success: var(--color-green-700);--color-feedback-warning: var(--color-orange-700);--color-feedback-error: var(--color-red-700);--color-focus-ring: var(--color-slate-900)}[data-theme=dark]{--color-action-primary: var(--color-blue-400);--color-action-primary-hover: var(--color-blue-300);--color-action-destructive: var(--color-red-500);--color-surface-default: var(--color-slate-900);--color-surface-subtle: var(--color-slate-950);--color-surface-elevated: var(--color-slate-700);--color-text-primary: var(--color-slate-50);--color-text-secondary: var(--color-slate-200);--color-text-disabled: var(--color-slate-700);--color-text-on-primary: var(--color-slate-950);--color-border-default: var(--color-slate-700);--color-border-strong: var(--color-slate-200);--color-feedback-success: var(--color-green-500);--color-feedback-warning: var(--color-orange-500);--color-feedback-error: var(--color-red-500);--color-focus-ring: var(--color-slate-50)}@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--color-action-primary: var(--color-blue-400);--color-action-primary-hover: var(--color-blue-300);--color-action-destructive: var(--color-red-500);--color-surface-default: var(--color-slate-900);--color-surface-subtle: var(--color-slate-950);--color-surface-elevated: var(--color-slate-700);--color-text-primary: var(--color-slate-50);--color-text-secondary: var(--color-slate-200);--color-text-disabled: var(--color-slate-700);--color-text-on-primary: var(--color-slate-950);--color-border-default: var(--color-slate-700);--color-border-strong: var(--color-slate-200);--color-feedback-success: var(--color-green-500);--color-feedback-warning: var(--color-orange-500);--color-feedback-error: var(--color-red-500);--color-focus-ring: var(--color-slate-50)}}.dil-stack{display:flex}.dil-stack[data-direction=col]{flex-direction:column}.dil-stack[data-direction=row]{flex-direction:row}.dil-stack[data-gap=sm]{gap:var(--spacing-2)}.dil-stack[data-gap=md]{gap:var(--spacing-4)}.dil-stack[data-gap=lg]{gap:var(--spacing-8)}.dil-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);border-radius:var(--radius-md);font-weight:600;line-height:1;border:1px solid transparent;cursor:pointer;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),border-color var(--motion-duration-fast) var(--motion-easing-standard),color var(--motion-duration-fast) var(--motion-easing-standard),box-shadow var(--motion-duration-fast) var(--motion-easing-standard);text-decoration:none;min-height:var(--target-size-min);min-width:var(--target-size-min)}.dil-button:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset);box-shadow:0 0 0 calc(var(--focus-ring-width) + var(--focus-ring-offset)) var(--color-surface-default)}.dil-button[disabled],.dil-button[aria-disabled=true]{opacity:.55;cursor:not-allowed}.dil-button[data-size=sm]{padding:var(--spacing-2) var(--spacing-3);font-size:var(--font-size-sm);min-height:var(--target-size-min)}.dil-button[data-size=md]{padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);min-height:var(--target-size-comfort)}.dil-button[data-size=lg]{padding:var(--spacing-4) var(--spacing-6);font-size:var(--font-size-lg);min-height:var(--target-size-comfort)}.dil-button[data-variant=primary]{background:var(--color-action-primary);color:var(--color-text-on-primary)}.dil-button[data-variant=primary]:hover:not([disabled]){background:var(--color-action-primary-hover)}.dil-button[data-variant=secondary]{background:var(--color-surface-default);color:var(--color-text-primary);border-color:var(--color-border-default)}.dil-button[data-variant=secondary]:hover:not([disabled]){background:var(--color-surface-subtle)}.dil-button[data-variant=destructive]{background:var(--color-action-destructive);color:var(--color-text-on-primary)}.dil-card{background:var(--color-surface-default);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);padding:var(--spacing-6)}.dil-card[data-variant=elevated]{background:var(--color-surface-elevated);border-color:transparent;box-shadow:0 1px 2px #0000000a,0 4px 12px #0000000f}.dil-card[data-variant=glass]{background:color-mix(in srgb,var(--color-surface-default) 70%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-color:color-mix(in srgb,var(--color-border-default) 50%,transparent)}.dil-input{display:block;width:100%;min-height:var(--target-size-comfort);padding:var(--spacing-3) var(--spacing-4);font-size:var(--font-size-base);color:var(--color-text-primary);background:var(--color-surface-default);border:1px solid var(--color-border-default);border-radius:var(--radius-md);transition:border-color var(--motion-duration-fast) var(--motion-easing-standard),box-shadow var(--motion-duration-fast) var(--motion-easing-standard)}.dil-input::placeholder{color:var(--color-text-secondary)}.dil-input:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset);border-color:var(--color-action-primary)}.dil-input[aria-invalid=true]{border-color:var(--color-feedback-error)}.dil-input[aria-invalid=true]:focus-visible{outline-color:var(--color-feedback-error)}.dil-badge{display:inline-flex;align-items:center;gap:var(--spacing-1);padding:var(--spacing-1) var(--spacing-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;line-height:1}.dil-badge[data-variant=info]{background:var(--color-blue-50);color:var(--color-blue-700)}.dil-badge[data-variant=success]{background:var(--color-green-50);color:var(--color-green-700)}.dil-badge[data-variant=warning]{background:var(--color-orange-50);color:var(--color-orange-700)}.dil-badge[data-variant=error]{background:var(--color-red-50);color:var(--color-red-700)}.dil-theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:var(--target-size-comfort);height:var(--target-size-comfort);border-radius:var(--radius-full);border:1px solid var(--color-border-default);background:var(--color-surface-default);color:var(--color-text-primary);cursor:pointer;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),border-color var(--motion-duration-fast) var(--motion-easing-standard)}.dil-theme-toggle:hover{background:var(--color-surface-subtle)}.dil-theme-toggle:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset)}.dil-theme-toggle__icon{display:none}:root[data-theme=light] .dil-theme-toggle__icon--moon,:root:not([data-theme]) .dil-theme-toggle__icon--moon{display:block}:root[data-theme=dark] .dil-theme-toggle__icon--sun{display:block}.dil-navbar{width:100%;background:color-mix(in srgb,var(--color-surface-default) 85%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--color-border-default);z-index:50}.dil-navbar[data-sticky=true]{position:sticky;top:0}.dil-navbar__inner{max-width:72rem;margin-inline:auto;padding:var(--spacing-3) var(--spacing-6);display:flex;align-items:center;justify-content:space-between;gap:var(--spacing-6)}.dil-navbar__brand{font-weight:700;font-size:var(--font-size-lg);color:var(--color-text-primary);text-decoration:none;letter-spacing:-.02em}.dil-navbar__links{list-style:none;display:flex;align-items:center;gap:var(--spacing-6);margin:0;padding:0}.dil-navbar__links a{color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;min-height:var(--target-size-min);display:inline-flex;align-items:center;transition:color var(--motion-duration-fast) var(--motion-easing-standard)}.dil-navbar__links a:hover{color:var(--color-text-primary)}.dil-navbar__links a:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset);border-radius:var(--radius-sm)}.dil-navbar__actions{display:inline-flex;gap:var(--spacing-2)}.dil-navbar__toggle{display:none;width:var(--target-size-comfort);height:var(--target-size-comfort);background:transparent;border:0;cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:4px}.dil-navbar__toggle span{width:22px;height:2px;background:var(--color-text-primary);border-radius:2px;transition:transform var(--motion-duration-base) var(--motion-easing-standard),opacity var(--motion-duration-fast) var(--motion-easing-standard)}@media(max-width:767.98px){.dil-navbar__toggle{display:inline-flex}.dil-navbar__links{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:var(--spacing-4);padding:var(--spacing-6);background:var(--color-surface-default);border-bottom:1px solid var(--color-border-default);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity var(--motion-duration-base) var(--motion-easing-standard),transform var(--motion-duration-base) var(--motion-easing-standard)}.dil-navbar__links[data-open=true]{opacity:1;transform:translateY(0);pointer-events:auto}}.dil-tabs__list{display:inline-flex;gap:var(--spacing-1);padding:var(--spacing-1);background:var(--color-surface-subtle);border-radius:var(--radius-lg);border:1px solid var(--color-border-default)}.dil-tabs__tab{appearance:none;background:transparent;border:0;padding:var(--spacing-2) var(--spacing-4);border-radius:var(--radius-md);color:var(--color-text-secondary);font-weight:500;font-size:var(--font-size-sm);cursor:pointer;min-height:var(--target-size-min);transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),color var(--motion-duration-fast) var(--motion-easing-standard)}.dil-tabs__tab[aria-selected=true]{background:var(--color-surface-default);color:var(--color-text-primary);box-shadow:0 1px 2px #0000000d}.dil-tabs__tab:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:var(--focus-ring-offset)}.dil-tabs__panels{margin-top:var(--spacing-6)}.dil-accordion{display:flex;flex-direction:column;gap:var(--spacing-2)}.dil-accordion__item{background:var(--color-surface-default);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);overflow:hidden;transition:border-color var(--motion-duration-fast) var(--motion-easing-standard)}.dil-accordion__item[open]{border-color:var(--color-action-primary)}.dil-accordion__summary{list-style:none;cursor:pointer;padding:var(--spacing-4) var(--spacing-6);font-weight:600;color:var(--color-text-primary);display:flex;justify-content:space-between;align-items:center;min-height:var(--target-size-comfort)}.dil-accordion__summary::-webkit-details-marker{display:none}.dil-accordion__summary:focus-visible{outline:var(--focus-ring-width) solid var(--color-focus-ring);outline-offset:calc(var(--focus-ring-offset) * -1)}.dil-accordion__chevron{transition:transform var(--motion-duration-base) var(--motion-easing-standard);color:var(--color-text-secondary)}.dil-accordion__item[open] .dil-accordion__chevron{transform:rotate(180deg)}.dil-accordion__content{padding:0 var(--spacing-6) var(--spacing-4);color:var(--color-text-secondary);line-height:1.6}.dil-code{position:relative;background:var(--color-slate-950);color:var(--color-slate-50);border-radius:var(--radius-lg);padding:var(--spacing-4);font-family:var(--font-family-mono);font-size:var(--font-size-sm);line-height:1.6;overflow:hidden}.dil-code pre{margin:0;overflow-x:auto}.dil-code code{font-family:inherit;color:inherit}.dil-code__copy{position:absolute;top:var(--spacing-3);right:var(--spacing-3);display:inline-flex;align-items:center;gap:var(--spacing-2);padding:var(--spacing-2) var(--spacing-3);background:color-mix(in srgb,var(--color-slate-50) 10%,transparent);border:1px solid color-mix(in srgb,var(--color-slate-50) 15%,transparent);border-radius:var(--radius-md);color:var(--color-slate-50);font-size:var(--font-size-xs);cursor:pointer;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard)}.dil-code__copy:hover{background:color-mix(in srgb,var(--color-slate-50) 20%,transparent)}.dil-code__copy:focus-visible{outline:var(--focus-ring-width) solid var(--color-slate-50);outline-offset:var(--focus-ring-offset)}:root{color-scheme:light dark}html,body{margin:0;padding:0}body{font-family:var(--font-family-sans);color:var(--color-text-primary);background:var(--color-surface-default);min-height:100vh;line-height:1.5}*,*:before,*:after{box-sizing:border-box}.layout{max-width:80rem;margin-inline:auto;padding:var(--spacing-12) var(--spacing-6)}.layout[data-has-sidebar=true]{display:grid;grid-template-columns:220px 1fr;gap:var(--spacing-12)}.layout[data-has-sidebar=false]{padding-inline:0;padding-top:0}.content{min-width:0}.sidebar{position:sticky;top:80px;height:max-content}.sidebar__heading{font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:.08em;color:var(--color-text-secondary);margin:0 0 var(--spacing-3)}.sidebar__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--spacing-1)}.sidebar__list a{display:block;padding:var(--spacing-2) var(--spacing-3);border-radius:var(--radius-md);color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-sm);font-weight:500;transition:background-color var(--motion-duration-fast) var(--motion-easing-standard),color var(--motion-duration-fast) var(--motion-easing-standard)}.sidebar__list a:hover{background:var(--color-surface-subtle);color:var(--color-text-primary)}.sidebar__list a[data-active=true]{background:var(--color-surface-subtle);color:var(--color-action-primary)}@media(max-width:767.98px){.layout{grid-template-columns:1fr;padding:var(--spacing-8) var(--spacing-4);gap:var(--spacing-8)}.sidebar{position:static}}:where(.content) h1{font-size:clamp(var(--font-size-2xl),4vw,48px);line-height:1.1;margin:0 0 var(--spacing-3);letter-spacing:-.02em}:where(.content)>p:first-of-type{font-size:var(--font-size-lg);color:var(--color-text-secondary);margin:0 0 var(--spacing-12);max-width:56ch}.section{margin-bottom:var(--spacing-12)}.section>h2{font-size:var(--font-size-xl);margin:0 0 var(--spacing-2);letter-spacing:-.01em}.section>p.section__desc{color:var(--color-text-secondary);margin:0 0 var(--spacing-6)}.demo{padding:var(--spacing-8) var(--spacing-6);background:var(--color-surface-subtle);border:1px solid var(--color-border-default);border-radius:var(--radius-lg);display:flex;flex-wrap:wrap;gap:var(--spacing-4);align-items:center}.demo--block{display:block}.demo+.dil-code{border-top-left-radius:0;border-top-right-radius:0;margin-top:-1px}.demo[data-attached=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}::selection{background:var(--color-action-primary);color:var(--color-text-on-primary)}