:where(.example__stage) .btn{font:inherit;color:inherit;cursor:pointer;appearance:none;background:0 0;border:none;margin:0;padding:0}:where(.example__stage) .btn:focus-visible{outline:2px solid var(--color-accent,#2563eb);outline-offset:2px}:where(.example__stage) .btn{padding:var(--button-padding-y) var(--button-padding-x);min-height:var(--button-min-height);border:var(--button-border-width) solid var(--button-border);border-radius:var(--button-border-radius);background:var(--button-bg);color:var(--button-color)}@media (prefers-reduced-motion:no-preference){:where(.example__stage) .btn{transition:background-color var(--framework-transition-duration,.15s) var(--framework-transition-easing,ease-in-out), color var(--framework-transition-duration,.15s) var(--framework-transition-easing,ease-in-out), border-color var(--framework-transition-duration,.15s) var(--framework-transition-easing,ease-in-out)}}:where(.example__stage) .btn{font-size:var(--button-font-size);font-weight:var(--button-font-weight);cursor:pointer;justify-content:center;align-items:center;gap:.25em;display:inline-flex}:where(.example__stage) .btn:disabled,:where(.example__stage) .btn[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none}:where(.example__stage) .btn{--button-bg:var(--button-secondary-bg);--button-color:var(--button-secondary-color);--button-border:var(--button-secondary-border)}@media (hover:hover){:where(.example__stage) .btn:hover{--button-bg:var(--button-secondary-hover-bg);--button-border:var(--button-secondary-hover-border)}}:where(.example__stage) .btn--primary{--button-bg:var(--button-primary-bg);--button-color:var(--button-primary-color);--button-border:var(--button-primary-border)}@media (hover:hover){:where(.example__stage) .btn--primary:hover{--button-bg:var(--button-primary-hover-bg);--button-border:var(--button-primary-hover-border)}}:where(.example__stage) .btn--secondary{--button-bg:var(--button-secondary-bg);--button-color:var(--button-secondary-color);--button-border:var(--button-secondary-border)}@media (hover:hover){:where(.example__stage) .btn--secondary:hover{--button-bg:var(--button-secondary-hover-bg);--button-border:var(--button-secondary-hover-border)}}:where(.example__stage) .btn--danger{--button-bg:var(--button-danger-bg);--button-color:var(--button-danger-color);--button-border:var(--button-danger-border)}@media (hover:hover){:where(.example__stage) .btn--danger:hover{--button-bg:var(--button-danger-hover-bg);--button-border:var(--button-danger-hover-border)}}:where(.example__stage) .btn--ghost{--button-bg:var(--button-ghost-bg);--button-color:var(--button-ghost-color);--button-border:var(--button-ghost-border)}@media (hover:hover){:where(.example__stage) .btn--ghost:hover{--button-bg:var(--button-ghost-hover-bg)}}:where(.example__stage) .btn--brand{--button-bg:var(--button-brand-bg);--button-color:var(--button-brand-color);--button-border:var(--button-brand-border)}:where(.example__stage) .btn--brand:hover:not(:disabled){--button-bg:var(--button-brand-hover-bg);--button-border:var(--button-brand-hover-border)}:where(.example__stage) .btn--sm{--button-padding-y:var(--button-padding-y-sm);--button-padding-x:var(--button-padding-x-sm);--button-font-size:var(--button-font-size-sm);--button-min-height:var(--button-min-height-sm)}:where(.example__stage) .btn--lg{--button-padding-y:var(--button-padding-y-lg);--button-padding-x:var(--button-padding-x-lg);--button-font-size:var(--button-font-size-lg);--button-min-height:var(--button-min-height-lg)}:where(.example__stage) :where(button){font:inherit;color:inherit;cursor:pointer;appearance:none;background:0 0;border:none;margin:0;padding:0}:where(.example__stage) :where(button):focus-visible{outline:2px solid var(--color-accent,#2563eb);outline-offset:2px}:where(.example__stage) :where(button){padding:var(--button-padding-y) var(--button-padding-x);min-height:var(--button-min-height);border:var(--button-border-width) solid var(--button-border);border-radius:var(--button-border-radius);background:var(--button-bg);color:var(--button-color)}@media (prefers-reduced-motion:no-preference){:where(.example__stage) :where(button){transition:background-color var(--framework-transition-duration,.15s) var(--framework-transition-easing,ease-in-out), color var(--framework-transition-duration,.15s) var(--framework-transition-easing,ease-in-out), border-color var(--framework-transition-duration,.15s) var(--framework-transition-easing,ease-in-out)}}:where(.example__stage) :where(button){font-size:var(--button-font-size);font-weight:var(--button-font-weight);cursor:pointer;justify-content:center;align-items:center;gap:.25em;display:inline-flex}:where(.example__stage) :where(button):disabled,:where(.example__stage) :where(button)[disabled]{opacity:.3;cursor:not-allowed;pointer-events:none}:where(.example__stage) :where(button){--button-bg:var(--button-secondary-bg);--button-color:var(--button-secondary-color);--button-border:var(--button-secondary-border)}@media (hover:hover){:where(.example__stage) :where(button):hover{--button-bg:var(--button-secondary-hover-bg);--button-border:var(--button-secondary-hover-border)}}:where(.example__stage) :where(.form input){border:var(--surface-control-border-width) solid var(--surface-control-border-color);background:var(--surface-control-color-bg);color:var(--surface-control-color-text);font:inherit;border-radius:6px;padding:.45rem .6rem}:where(.example__stage) :where(.form input.is-invalid){border-color:var(--color-danger)}:where(.example__stage) :where(.form button){justify-self:start}:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--color-text:currentColor;--color-accent:var(--brand-primary,#2563eb);--color-accent-hover:var(--brand-primary-hover,#1d4ed8);--color-accent-contrast:var(--brand-primary-contrast,#fff);--color-secondary:var(--brand-secondary,var(--color-accent));--color-secondary-hover:var(--brand-secondary-hover,var(--color-accent-hover));--color-secondary-contrast:var(--brand-secondary-contrast,var(--color-accent-contrast));--color-complementary:var(--brand-complementary,var(--color-accent));--color-complementary-hover:var(--brand-complementary-hover,var(--color-accent-hover));--color-complementary-contrast:var(--brand-complementary-contrast,var(--color-accent-contrast));--color-text-muted:#0000008c;--color-surface:#fff;--color-surface-muted:#f5f5f5;--color-hover:#0000000d;--color-border:#0000001a;--color-border-strong:#d4d4d4;--color-control-border:#00000073;--color-overlay:#00000080;--color-shadow:#0000001f;--color-danger:#dc2626;--color-danger-tint:#fee2e2;--color-danger-contrast:#fff;--color-danger-text:#b91c1c;--color-success-contrast:#fff;--color-success-text:#166534;--color-warning-contrast:#431407;--color-warning-text:#9a3412;--color-success:#15803d;--color-success-tint:#dcfce7;--color-warning:#f97316;--color-warning-tint:#ffedd5;--color-inverse-surface:#111827;--color-inverse-text:#fff;--color-success-strong:#065f46;--color-warning-strong:#7c2d12;--color-danger-strong:#7f1d1d;--color-on-status:#fff}@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-text:#e4e8ee;--color-accent:var(--brand-primary,#60a5fa);--color-accent-hover:var(--brand-primary-hover,#93c5fd);--color-accent-contrast:var(--brand-primary-contrast,#0b1220);--color-text-muted:#fff9;--color-surface:#171d26;--color-surface-muted:#202733;--color-hover:#ffffff14;--color-border:#ffffff24;--color-border-strong:#3a4350;--color-control-border:#ffffff5c;--color-overlay:#0009;--color-shadow:#00000080;--color-danger:#f87171;--color-danger-tint:#f8717129;--color-danger-contrast:#1a0a0a;--color-danger-text:#f87171;--color-success-contrast:#052e16;--color-success-text:#4ade80;--color-warning-contrast:#431407;--color-warning-text:#fb923c;--color-success:#4ade80;--color-success-tint:#4ade8029;--color-warning:#fb923c;--color-warning-tint:#fb923c29;--color-inverse-surface:#2a3342;--color-inverse-text:#e4e8ee;--color-success-strong:#166534;--color-warning-strong:#9a3412;--color-danger-strong:#991b1b}}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--color-text:#e4e8ee;--color-accent:var(--brand-primary,#60a5fa);--color-accent-hover:var(--brand-primary-hover,#93c5fd);--color-accent-contrast:var(--brand-primary-contrast,#0b1220);--color-text-muted:#fff9;--color-surface:#171d26;--color-surface-muted:#202733;--color-hover:#ffffff14;--color-border:#ffffff24;--color-border-strong:#3a4350;--color-control-border:#ffffff5c;--color-overlay:#0009;--color-shadow:#00000080;--color-danger:#f87171;--color-danger-tint:#f8717129;--color-danger-contrast:#1a0a0a;--color-danger-text:#f87171;--color-success-contrast:#052e16;--color-success-text:#4ade80;--color-warning-contrast:#431407;--color-warning-text:#fb923c;--color-success:#4ade80;--color-success-tint:#4ade8029;--color-warning:#fb923c;--color-warning-tint:#fb923c29;--color-inverse-surface:#2a3342;--color-inverse-text:#e4e8ee;--color-success-strong:#166534;--color-warning-strong:#9a3412;--color-danger-strong:#991b1b}:root{--surface-control-radius:.25em;--surface-control-border-width:1px;--surface-control-border-color:var(--color-control-border);--surface-control-color-bg:var(--color-surface);--surface-control-color-text:var(--color-text,currentColor);--surface-button-radius:.25em;--surface-button-border-width:1px;--surface-panel-radius:.5em;--surface-panel-border-width:1px;--surface-panel-border-color:var(--color-border);--surface-panel-color-bg:var(--color-surface);--surface-panel-color-text:var(--color-text,currentColor);--surface-panel-shadow:0 4px 6px var(--color-shadow);--surface-dialog-radius:.75em;--surface-dialog-border-width:1px;--surface-dialog-border-color:var(--color-border);--surface-dialog-color-bg:var(--color-surface);--surface-dialog-color-text:var(--color-text,currentColor);--surface-dialog-shadow:0 1.25em 3em var(--color-shadow);--surface-dropdown-radius:.25em;--surface-dropdown-border-width:var(--surface-panel-border-width);--surface-dropdown-border-color:var(--surface-panel-border-color);--surface-dropdown-color-bg:var(--surface-panel-color-bg);--surface-dropdown-shadow:var(--surface-panel-shadow);--surface-dropdown-item-hover-bg:var(--color-hover);--surface-dropdown-item-selected-bg:color-mix(in srgb, var(--color-accent) 12%, transparent);--surface-dropdown-item-current-bg:var(--color-surface-muted);--surface-item-border-color:var(--color-border);--surface-item-color-text:var(--color-text,currentColor);--surface-card-radius:.125em;--surface-card-border-width:1px;--surface-card-color-bg:var(--color-surface);--surface-card-color-text:var(--color-text,currentColor);--surface-card-shadow:none;--surface-touch-radius:.125em;--surface-touch-border-width:1px;--surface-touch-shadow:none;--form-control-padding-y:.25em;--form-control-padding-x:.75em;--form-control-padding-y-sm:.125em;--form-control-padding-x-sm:.5em;--form-control-padding-y-lg:.5em;--form-control-padding-x-lg:1.25em;--form-control-border-width:var(--surface-control-border-width);--form-control-border-color:var(--surface-control-border-color);--form-control-border-radius:var(--surface-control-radius);--form-control-bg:var(--surface-control-color-bg);--form-control-color:var(--surface-control-color-text);--form-control-placeholder-color:var(--color-text-muted);--form-control-focus-ring-width:2px;--form-control-focus-ring-color:var(--color-accent);--form-control-focus-border-color:var(--color-accent);--form-control-hover-border-color:var(--color-text-muted);--form-control-disabled-opacity:.3;--form-control-disabled-bg:var(--color-surface-muted);--form-control-font-size:.875em;--form-control-font-size-sm:.75em;--form-control-font-size-lg:1em;--form-control-font-family:inherit;--button-padding-y:.25em;--button-padding-x:.75em;--button-padding-y-sm:.125em;--button-padding-x-sm:.5em;--button-padding-y-lg:.5em;--button-padding-x-lg:1.25em;--button-font-size:.875em;--button-font-size-sm:.75em;--button-font-size-lg:1em;--button-font-weight:600;--button-border-width:var(--surface-button-border-width);--button-border-radius:var(--surface-button-radius);--button-min-height:2.5em;--button-min-height-sm:2em;--button-min-height-lg:3em;--button-primary-bg:var(--color-accent-hover);--button-primary-color:var(--color-accent-contrast);--button-primary-border:var(--color-accent-hover);--button-primary-hover-bg:color-mix(in srgb, var(--color-accent-hover) 85%, black);--button-primary-hover-border:color-mix(in srgb, var(--color-accent-hover) 85%, black);--button-secondary-bg:transparent;--button-secondary-color:currentColor;--button-secondary-border:var(--color-control-border);--button-secondary-hover-bg:var(--color-surface-muted);--button-secondary-hover-border:var(--color-control-border);--button-danger-bg:var(--color-danger);--button-danger-color:var(--color-danger-contrast);--button-danger-border:var(--color-danger);--button-danger-hover-bg:color-mix(in srgb, var(--color-danger) 85%, black);--button-danger-hover-border:color-mix(in srgb, var(--color-danger) 85%, black);--button-ghost-bg:transparent;--button-ghost-color:currentColor;--button-ghost-border:currentColor;--button-ghost-hover-bg:var(--color-hover);--button-brand-bg:var(--color-secondary);--button-brand-color:var(--color-secondary-contrast);--button-brand-border:var(--color-secondary);--button-brand-hover-bg:var(--color-secondary-hover);--button-brand-hover-border:var(--color-secondary-hover);--panel-bg:var(--surface-panel-color-bg);--panel-border-width:var(--surface-panel-border-width);--panel-border-color:var(--surface-panel-border-color);--panel-border-radius:var(--surface-panel-radius);--panel-shadow:var(--surface-panel-shadow);--panel-padding:.75em;--panel-padding-sm:.5em;--panel-padding-lg:1.25em;--panel-header-padding:.5em .75em;--panel-header-border:1px solid var(--color-border);--panel-footer-padding:.5em .75em;--panel-footer-border:1px solid var(--color-border);--modal-bg:var(--surface-dialog-color-bg);--modal-border-width:var(--surface-dialog-border-width);--modal-border-color:var(--surface-dialog-border-color);--modal-border-radius:var(--surface-dialog-radius);--modal-color:var(--surface-dialog-color-text);--modal-shadow:var(--surface-dialog-shadow);--modal-backdrop-bg:var(--color-overlay);--accordion-duration:.3s;--accordion-easing:ease;--accordion-border-color:var(--surface-item-border-color,var(--color-border,#e2e8f0));--accordion-summary-padding:1rem 1.25rem;--accordion-summary-color:var(--surface-item-color-text,#111827);--accordion-summary-hover-bg:var(--color-hover,#f9fafb);--accordion-content-padding:0 1.25rem 1.25rem;--accordion-content-color:var(--surface-item-color-text,#374151);--accordion-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");--accordion-icon-size:1.25rem;--accordion-icon-color:currentColor;--accordion-icon-rotation:45deg}[data-accordion]{border-bottom:1px solid var(--accordion-border-color)}[data-accordion]:not([data-accordion]+[data-accordion]){border-top:1px solid var(--accordion-border-color)}[data-accordion]>summary{padding:var(--accordion-summary-padding);color:var(--accordion-summary-color);cursor:pointer;justify-content:space-between;align-items:center;gap:1rem;font-weight:500;list-style:none;display:flex}[data-accordion]>summary::-webkit-details-marker{display:none}[data-accordion]>summary:after{content:"";width:var(--accordion-icon-size);height:var(--accordion-icon-size);background-color:var(--accordion-icon-color);-webkit-mask:var(--accordion-icon) center/contain no-repeat;mask:var(--accordion-icon) center/contain no-repeat;flex:none}[data-accordion]>summary:hover{background:var(--accordion-summary-hover-bg)}[data-accordion]>summary:focus-visible{outline:var(--framework-focus-width,2px) solid var(--framework-focus-color,var(--color-accent,#2563eb));outline-offset:calc(-1 * var(--framework-focus-width,2px))}@media (prefers-reduced-motion:no-preference){[data-accordion]>summary{transition:background-color var(--framework-transition-duration,.2s) var(--framework-transition-easing,ease-in-out)}}[data-accordion][open]:not([data-accordion-state=closing])>summary:after{rotate:var(--accordion-icon-rotation)}[data-accordion]>summary~*{padding:var(--accordion-content-padding);color:var(--accordion-content-color);margin:0;display:flow-root}[data-accordion]>summary~*>:first-child{margin-top:0}[data-accordion]>summary~*>:last-child{margin-bottom:0}@media (prefers-reduced-motion:no-preference){[data-accordion]>summary:after{transition:rotate var(--accordion-duration) var(--accordion-easing)}}@media (forced-colors:active){[data-accordion]>summary:after{background-color:canvastext}}:root[data-focus-source=pointer] [data-accordion]:focus,:root[data-focus-source=pointer] [data-accordion] :focus{outline:none}:where(.datatable-filter){margin-bottom:1rem}:where(.datatable-search){border:1px solid var(--datatable-border-color,var(--surface-control-border-color,var(--color-control-border,#00000073)));background:var(--surface-control-color-bg,var(--color-surface,#fff));width:100%;max-width:300px;color:var(--surface-control-color-text,#171717);border-radius:4px;padding:.5rem;font-size:.875rem}:where(.datatable-search)::placeholder{color:var(--form-control-placeholder-color,var(--color-text-muted,#0000008c));opacity:1}.datatable-search:focus-visible,.datatable__sort:focus-visible,.datatable__pagination button:focus-visible{outline:2px solid var(--framework-focus-color,var(--color-accent,#2563eb));outline-offset:1px}.datatable-search:focus-visible{border-color:var(--framework-focus-color,var(--color-accent,#2563eb))}:where(th.sortable):hover{background-color:var(--datatable-header-hover-bg,var(--color-hover,#8080801f))}:where(.datatable__sort){color:inherit;font:inherit;text-align:inherit;cursor:pointer;background:0 0;border:0;align-items:center;gap:.5rem;margin:0;padding:0;display:inline-flex}:where(.sort-icon){color:var(--datatable-muted-color,var(--color-text-muted,#6b7280));font-size:.8em}:where(.sort-icon svg){vertical-align:middle}:where([aria-sort] .sort-icon){color:currentColor}:where(.datatable__pagination:not([hidden])){flex-wrap:wrap;justify-content:center;align-items:center;gap:.5rem;margin-top:1rem;display:flex}:where(.datatable__pagination button){min-width:2.5rem;min-height:var(--button-min-height,2.5em);padding:var(--button-padding-y,.5rem) var(--button-padding-x,.75rem);border:var(--button-border-width,1px) solid var(--datatable-border-color,var(--button-secondary-border,var(--color-control-border,#00000073)));border-radius:var(--button-border-radius,4px);background:var(--datatable-button-bg,var(--button-secondary-bg,transparent));color:var(--datatable-button-color,var(--button-secondary-color,inherit));font:inherit;font-size:var(--button-font-size,.875rem);cursor:pointer}:where(.datatable__pagination button:hover:not(:disabled)){background:var(--datatable-button-hover-bg,var(--button-secondary-hover-bg,var(--color-hover,#80808026)));border-color:var(--datatable-button-hover-border-color,var(--button-secondary-hover-border,var(--color-control-border,#00000073)))}:where(.datatable__pagination button:disabled){opacity:.3;cursor:not-allowed}:where(.datatable__pagination button[aria-current=page]){background:var(--datatable-current-bg,var(--color-accent-hover,#1d4ed8));border-color:var(--datatable-current-bg,var(--color-accent-hover,#1d4ed8));color:var(--datatable-current-color,var(--color-accent-contrast,#fff))}:where(.datatable__gap){color:var(--datatable-muted-color,var(--color-text-muted,#6b7280));padding:0 .25rem}:where(.datatable__message td){text-align:center;color:var(--datatable-muted-color,var(--color-text-muted,#6b7280));padding:2rem 1rem;font-style:italic}:where(.datatable__message td[role=alert]){color:var(--datatable-error-color,var(--brand-danger,var(--datatable-error-default,#b91c1c)));font-style:normal;font-weight:500}.datatable__status{color:var(--datatable-muted-color,var(--color-text-muted,#6b7280));margin-top:.5rem;font-size:.875em}:root{--datatable-error-default:var(--color-danger-text,#b91c1c)}:where([data-datatable-state=loading]){opacity:.6;cursor:progress}:where([data-datatable-state=error]){outline:2px solid var(--brand-danger,var(--color-danger,#ef4444));outline-offset:-2px}@media (prefers-reduced-motion:no-preference){:where(.datatable__pagination button){transition:background-color .2s,border-color .2s,color .2s}}@media (forced-colors:active){.datatable__pagination button[aria-current=page]{forced-color-adjust:none;color:highlighttext;background:highlight;border-color:highlight}}:root[data-focus-source=pointer] [data-datatable]:focus,:root[data-focus-source=pointer] [data-datatable] :focus{outline:none}:root{--lightbox-transition-duration:.3s;--lightbox-transition-easing:ease-out}.lightbox__overlay{background:var(--lightbox-overlay-bg,#000000e6);width:100%;max-width:none;height:100%;max-height:none;color:var(--lightbox-color,white);transition:opacity var(--lightbox-transition-duration) var(--lightbox-transition-easing);border:0;justify-content:center;align-items:center;margin:0;padding:0;position:fixed;inset:0}.lightbox__overlay[open]{display:flex}.lightbox__overlay::backdrop{background:0 0}.lightbox__container{justify-content:center;align-items:center;max-width:90vw;max-height:90vh;display:flex;position:relative}.lightbox__content{position:relative;overflow:hidden}.lightbox__image{object-fit:contain;max-width:100%;max-height:90vh;transition:transform .3s ease-out,opacity .3s ease-out}.lightbox__image.slide-left{opacity:0;will-change:transform, opacity;transform:translate(-100%)}.lightbox__image.slide-right{opacity:0;will-change:transform, opacity;transform:translate(100%)}.lightbox__close,.lightbox__nav{color:var(--lightbox-color,white);cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;display:flex}.lightbox__close svg,.lightbox__nav svg{display:block}.lightbox__close:focus-visible,.lightbox__nav:focus-visible{outline:2px solid var(--lightbox-color,white);outline-offset:2px}.lightbox__close{background:var(--lightbox-close-bg,transparent);opacity:.85;width:44px;height:44px;transition:background-color .2s,opacity .2s;position:absolute;top:1rem;right:1rem}.lightbox__close:hover{background:var(--lightbox-close-hover-bg,transparent);opacity:1}.lightbox__nav{background:var(--lightbox-nav-bg,#00000080);width:50px;height:50px;transition:background-color .2s,opacity .2s;position:absolute;top:50%;transform:translateY(-50%)}.lightbox__nav:hover:not(:disabled){background:var(--lightbox-nav-hover-bg,#000000b3)}.lightbox__nav:disabled{opacity:var(--form-control-disabled-opacity,.3);cursor:not-allowed}.lightbox__nav--prev{left:1rem}.lightbox__nav--next{right:1rem}.lightbox__counter{background:var(--lightbox-counter-bg,#000000b3);color:var(--lightbox-color,white);white-space:nowrap;border-radius:20px;padding:.5rem 1rem;font-size:.875rem;position:absolute;bottom:1rem;left:50%;transform:translate(-50%)}.lightbox__counter-name{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.lightbox__error{text-align:center;margin:0;padding:1rem}[data-lightbox-state=opening]{opacity:0;will-change:opacity;animation:lightboxFadeIn var(--lightbox-transition-duration) var(--lightbox-transition-easing) forwards}[data-lightbox-state=open]{opacity:1}[data-lightbox-state=transitioning]{opacity:1;will-change:opacity}[data-lightbox-state=closing]{opacity:1;animation:lightboxFadeOut var(--lightbox-transition-duration) var(--lightbox-transition-easing) forwards;pointer-events:none}@keyframes lightboxFadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes lightboxFadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}@media (width<=768px){.lightbox__nav{width:40px;height:40px}.lightbox__nav--prev{left:10px}.lightbox__nav--next{right:10px}.lightbox__close{top:10px;right:10px}.lightbox__counter{font-size:.75rem;bottom:10px}}@media (prefers-reduced-motion:reduce){[data-lightbox-state],.lightbox__image{transition:none!important;animation:none!important}[data-lightbox-state=opening],[data-lightbox-state=closing]{will-change:auto}[data-lightbox-state=opening]{opacity:1;transform:none}[data-lightbox-state=closing]{opacity:0;transform:none}}:root[data-focus-source=pointer] :is([data-lightbox],[data-lightbox-action],[data-lightbox-state]):focus,:root[data-focus-source=pointer] :is([data-lightbox],[data-lightbox-action],[data-lightbox-state]) :focus{outline:none}:root{--lazy-transition-duration:.3s;--lazy-transition-easing:ease-in-out;--lazy-placeholder-bg:var(--color-surface-muted,#f3f4f6);--lazy-error-bg:var(--color-danger-tint,#fef2f2);--lazy-error-color:var(--color-danger,#dc2626);--lazy-loading-opacity:.7}[data-lazysrc-state=loading]{opacity:var(--lazy-loading-opacity);background-color:var(--lazy-placeholder-bg)}[data-lazysrc-state=loaded]{opacity:1}[data-lazysrc-state=error]{opacity:1;background-color:var(--lazy-error-bg);outline:2px solid var(--lazy-error-color);outline-offset:-2px}@media (prefers-reduced-motion:no-preference){[data-lazysrc-state]{transition:opacity var(--lazy-transition-duration) var(--lazy-transition-easing)}[data-lazysrc-state=loading]{background-image:linear-gradient(45deg,#0000 49%,#ffffff1a 49% 51%,#0000 51%),linear-gradient(-45deg,#0000 49%,#ffffff1a 49% 51%,#0000 51%);background-size:20px 20px;animation:1.5s ease-in-out infinite lazysrc-shimmer}}@keyframes lazysrc-shimmer{0%{background-position:0 0,10px 10px}to{background-position:20px 20px,30px 30px}}:root[data-focus-source=pointer] [data-lazysrc]:focus,:root[data-focus-source=pointer] [data-lazysrc] :focus{outline:none}:root{--toast-z-index:2147480000;--toast-padding:12px;--toast-gap:8px;--toast-min-width:300px;--toast-max-width:500px;--toast-item-padding:10px 12px;--toast-border-radius:8px;--toast-bg-info:var(--color-inverse-surface);--toast-bg-success:var(--color-success);--toast-bg-warning:var(--color-warning);--toast-bg-error:var(--color-danger);--toast-shadow:0 6px 20px #00000040, inset 0 0 0 1px var(--color-border);--toast-font:14px/1.4 system-ui, -apple-system, sans-serif;--toast-animation-duration:.18s}:root[data-focus-source=pointer] :is(p-toasts):focus,:root[data-focus-source=pointer] :is(p-toasts) :focus{outline:none}:root{--reveal-transition-duration:.6s;--reveal-transition-easing:ease;--reveal-distance:1rem}@media (scripting:enabled) and (prefers-reduced-motion:no-preference){[data-reveal]:not([data-reveal-enhanced],.component-error){opacity:0;transform:translateY(var(--reveal-distance))}}[data-reveal-state=hidden],[data-reveal-state=hiding]{opacity:0;transform:translateY(var(--reveal-distance))}[data-reveal-state=revealing],[data-reveal-state=visible]{opacity:1;transform:none}@media (prefers-reduced-motion:no-preference){[data-reveal-state=revealing],[data-reveal-state=hiding]{transition:opacity var(--reveal-transition-duration) var(--reveal-transition-easing), transform var(--reveal-transition-duration) var(--reveal-transition-easing)}}@media (prefers-reduced-motion:reduce){[data-reveal][data-reveal-state]{opacity:1;transform:none}}:root{--tabs-border-color:var(--surface-panel-border-color,var(--color-border,#e2e8f0));--tabs-color:var(--color-text-muted,#6b7280);--tabs-hover-color:var(--surface-panel-color-text,#374151);--tabs-hover-bg:var(--color-hover,#f9fafb);--tabs-selected-color:var(--color-accent-hover,#0369a1);--tabs-selected-bg:transparent;--tabs-transition-duration:.2s}[data-tabs-list]{border-bottom:1px solid var(--tabs-border-color);margin-bottom:1rem;display:flex}[data-tab]{color:var(--tabs-color);cursor:pointer;background:0 0;border:none;border-bottom:2px solid #0000;padding:1rem 1.5rem;font-weight:500;text-decoration:none}[data-tab]:hover{color:var(--tabs-hover-color);background:var(--tabs-hover-bg)}[data-tab][aria-selected=true]{color:var(--tabs-selected-color);background:var(--tabs-selected-bg);border-bottom-color:currentColor}[data-tab]:focus-visible{outline:var(--framework-focus-width,2px) solid var(--framework-focus-color,var(--color-accent,#2563eb));outline-offset:calc(-1 * var(--framework-focus-width,2px))}[data-tab-panel]{padding:1rem 0}[data-tab-panel][hidden]{display:none!important}@media (scripting:enabled){[data-tabs]:not([data-tabs-enhanced],.component-error) [data-tab-panel]~[data-tab-panel]:not([data-tab-panel=active]){display:none}[data-tabs]:not([data-tabs-enhanced],.component-error) [data-tab-panel]:has(~[data-tab-panel=active]){display:none}}@media (prefers-reduced-motion:no-preference){[data-tab]{transition:color var(--tabs-transition-duration) ease, background-color var(--tabs-transition-duration) ease, border-color var(--tabs-transition-duration) ease}[data-tab-panel=entering]{animation:tabs-panel-in var(--tabs-transition-duration) ease-out}}@keyframes tabs-panel-in{0%{opacity:0}}@media (forced-colors:active){[data-tab][aria-selected=true]{border-bottom-color:highlight}}:root[data-focus-source=pointer] [data-tabs]:focus,:root[data-focus-source=pointer] [data-tabs] :focus{outline:none}:root{--toggle-transition-duration:.75s;--toggle-transition-easing:ease-in-out}[data-toggle]{cursor:pointer;-webkit-user-select:none;user-select:none}[data-toggle-state][hidden]{display:none!important}@media (scripting:enabled){:root:not(:has([data-toggle].component-error)) [data-toggle-state=closed]{display:none!important}}[data-toggle-state=closing]{pointer-events:none}@media (prefers-reduced-motion:no-preference){[data-toggle-state=opening]{animation:toggle-open var(--toggle-transition-duration) var(--toggle-transition-easing)}[data-toggle-state=closing]{animation:toggle-close var(--toggle-transition-duration) var(--toggle-transition-easing) forwards}}@keyframes toggle-open{0%{opacity:0;transform:translateY(-10px)}}@keyframes toggle-close{to{opacity:0;transform:translateY(-10px)}}:root[data-focus-source=pointer] :is([data-toggle],[data-toggle-state]):focus,:root[data-focus-source=pointer] :is([data-toggle],[data-toggle-state]) :focus{outline:none}[data-dropdown-state]{z-index:var(--dropdown-z-index,1000);box-sizing:border-box;min-width:var(--dropdown-min-width,10rem);max-height:var(--dropdown-max-height,60vh);padding:var(--dropdown-padding,.25rem);border:var(--surface-dropdown-border-width,1px) solid var(--surface-dropdown-border-color,#e2e8f0);border-radius:var(--surface-dropdown-radius,.25em);background:var(--surface-dropdown-color-bg,#fff);color:var(--surface-panel-color-text,inherit);box-shadow:var(--surface-dropdown-shadow,0 8px 24px #00000026);margin:0;position:fixed;overflow:auto}[data-dropdown-state] [role^=menuitem]{box-sizing:border-box;width:100%;padding:var(--dropdown-item-padding,.45rem .6rem);border-radius:var(--dropdown-item-radius,.2em);color:inherit;font:inherit;text-align:left;white-space:nowrap;cursor:pointer;background:0 0;border:0;justify-content:flex-start;align-items:center;gap:.5rem;margin:0;text-decoration:none;display:flex}@media (prefers-reduced-motion:no-preference){[data-dropdown-state] [role^=menuitem]{transition:background-color var(--framework-transition-duration,.2s) var(--framework-transition-easing,ease-in-out)}}[data-dropdown-state] [role^=menuitem]>svg,[data-dropdown-state] [role^=menuitem]>img{flex:none}[data-dropdown-state] [role^=menuitem]:hover,[data-dropdown-state] [role^=menuitem]:focus-visible{background:var(--surface-dropdown-item-hover-bg,#f1f5f9)}[data-dropdown-state] [role^=menuitem]:focus-visible{outline:2px solid var(--framework-focus-color,var(--color-accent,#2563eb));outline-offset:-2px}[data-dropdown-state] [role=menuitemcheckbox]:before,[data-dropdown-state] [role=menuitemradio]:before{content:"";opacity:.5;border:1px solid;border-radius:.2em;flex:none;width:.85em;height:.85em}[data-dropdown-state] [role=menuitemradio]:before{border-radius:50%}[data-dropdown-state] [role^=menuitem][aria-checked=true]{background:var(--surface-dropdown-item-selected-bg,#e0e7ff)}[data-dropdown-state] [role^=menuitem][aria-checked=true]:before{opacity:1;background:currentColor}[data-dropdown-state] [role^=menuitem]:disabled,[data-dropdown-state] [role^=menuitem][aria-disabled=true]{opacity:.5;cursor:not-allowed}[data-dropdown-state] hr{border:0;border-top:1px solid var(--surface-dropdown-border-color,#e2e8f0);margin:.25rem 0}[data-dropdown-state][hidden]{display:none!important}@media (scripting:enabled){:root:not(:has([data-dropdown].component-error)) [data-dropdown-state=closed]{display:none!important}}[data-dropdown-state=closing]{pointer-events:none}[data-dropdown-side=bottom]{--dropdown-from:translateY(calc(-1 * var(--dropdown-shift,4px)))}[data-dropdown-side=top]{--dropdown-from:translateY(var(--dropdown-shift,4px))}[data-dropdown-side=right]{--dropdown-from:translateX(calc(-1 * var(--dropdown-shift,4px)))}[data-dropdown-side=left]{--dropdown-from:translateX(var(--dropdown-shift,4px))}@media (prefers-reduced-motion:no-preference){[data-dropdown-state=opening]{animation:dropdown-in var(--dropdown-transition-duration,var(--framework-transition-duration,.2s)) ease-out}[data-dropdown-state=closing]{animation:dropdown-out var(--dropdown-transition-duration,var(--framework-transition-duration,.2s)) ease-in forwards}}@keyframes dropdown-in{0%{opacity:0;transform:var(--dropdown-from,none)}}@keyframes dropdown-out{to{opacity:0;transform:var(--dropdown-from,none)}}:root[data-focus-source=pointer] :is([data-dropdown],[data-dropdown-state]):focus,:root[data-focus-source=pointer] :is([data-dropdown],[data-dropdown-state]) :focus{outline:none}.tooltip{--tooltip-bg:var(--color-inverse-surface,#111827);--tooltip-color:var(--color-inverse-text,#fff);--tooltip-radius:var(--surface-control-radius,.25em);--tooltip-padding:.35em .6em;--tooltip-font-size:.8125rem;--tooltip-max-width:18rem;--tooltip-arrow-size:.5rem;--tooltip-shadow:var(--surface-panel-shadow,0 4px 12px #0003);--tooltip-z-index:2147480000;--tooltip-transition-duration:var(--framework-transition-duration,.2s);z-index:var(--tooltip-z-index);max-width:var(--tooltip-max-width);padding:var(--tooltip-padding);border-radius:var(--tooltip-radius);background:var(--tooltip-bg);color:var(--tooltip-color);font-size:var(--tooltip-font-size);box-shadow:var(--tooltip-shadow);pointer-events:none;opacity:1;line-height:1.4;position:fixed;transform:none}.tooltip:before{content:"";width:var(--tooltip-arrow-size);height:var(--tooltip-arrow-size);background:var(--tooltip-bg);position:absolute;transform:rotate(45deg)}.tooltip[data-tooltip-arrow=false]:before{content:none}.tooltip[data-tooltip-placement=top]:before{top:100%;left:var(--tooltip-arrow-offset,50%);translate:-50% -50%}.tooltip[data-tooltip-placement=bottom]:before{bottom:100%;left:var(--tooltip-arrow-offset,50%);translate:-50% 50%}.tooltip[data-tooltip-placement=left]:before{left:100%;top:var(--tooltip-arrow-offset,50%);translate:-50% -50%}.tooltip[data-tooltip-placement=right]:before{right:100%;top:var(--tooltip-arrow-offset,50%);translate:50% -50%}.tooltip[data-tooltip-state=closed]{opacity:0}.tooltip[data-tooltip-state=closed][data-tooltip-placement=top]{transform:translateY(4px)}.tooltip[data-tooltip-state=closed][data-tooltip-placement=bottom]{transform:translateY(-4px)}.tooltip[data-tooltip-state=closed][data-tooltip-placement=left]{transform:translate(4px)}.tooltip[data-tooltip-state=closed][data-tooltip-placement=right]{transform:translate(-4px)}@media (prefers-reduced-motion:no-preference){.tooltip{transition:opacity var(--tooltip-transition-duration) var(--framework-transition-easing,ease-in-out), transform var(--tooltip-transition-duration) var(--framework-transition-easing,ease-in-out)}}@media (forced-colors:active){.tooltip{border:1px solid canvastext}}:root[data-focus-source=pointer] [data-tooltip]:focus,:root[data-focus-source=pointer] [data-tooltip] :focus{outline:none}:root{--framework-transition-duration:var(--transition-normal,.2s);--framework-transition-easing:var(--ease-in-out,ease-in-out)}@media (prefers-reduced-motion:reduce){:root{--framework-transition-duration:0s}}:root{--framework-focus-color:var(--color-accent);--framework-focus-offset:2px;--framework-focus-width:2px}.overflow--hidden{padding-right:var(--scrollbar-width,0px);overflow:hidden}@media (scripting:enabled){:is(p-select,p-datetime,p-modal,p-uploader,p-toasts):not(:defined){display:none}}:root[data-focus-source=pointer] :is([data-lazysrc],[data-modal],[data-lightbox],[data-form-enhancer],[data-copytoclipboard],[data-datatable],[data-lightbox-action],[data-toggle],[data-dropdown],[data-dropdown-state],[data-tooltip],[data-tabs],[data-accordion],[data-selectloader],p-select,p-datetime,p-modal,p-uploader,p-toasts):focus,:root[data-focus-source=pointer] :is([data-lazysrc],[data-modal],[data-lightbox],[data-form-enhancer],[data-copytoclipboard],[data-datatable],[data-lightbox-action],[data-toggle],[data-dropdown],[data-dropdown-state],[data-tooltip],[data-tabs],[data-accordion],[data-selectloader],p-select,p-datetime,p-modal,p-uploader,p-toasts) :focus{outline:none}[data-lazysrc]:focus-visible,[data-modal]:focus-visible,[data-lightbox]:focus-visible,[data-form-enhancer]:focus-visible,[data-copytoclipboard]:focus-visible,[data-datatable]:focus-visible{outline:var(--framework-focus-width) solid var(--framework-focus-color);outline-offset:var(--framework-focus-offset);transition:outline var(--framework-transition-duration) var(--framework-transition-easing)}@font-face{font-family:Haffer;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/Haffer-Regular.woff2)format("woff2")}@font-face{font-family:Haffer;font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/Haffer-SemiBold.woff2)format("woff2")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/IBMPlexMono-Regular.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:IBM Plex Mono;font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/IBMPlexMono-Medium.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--site-ground:#f4f5f8;--site-surface:#fff;--site-ink:#161b24;--site-muted:#586273;--site-line:#dce0e7;--site-accent:#00f;--site-accent-soft:#e6e6ff;--site-code-bg:#eceef3;--site-code-ink:#262c38;--site-warn:#9a3412;--site-font:Haffer, system-ui, -apple-system, "Segoe UI", sans-serif;--site-display:Haffer, system-ui, -apple-system, "Segoe UI", sans-serif;--site-mono:"IBM Plex Mono", ui-monospace, sfmono-regular, menlo, monospace;--site-header:3.5rem;--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}@media (prefers-color-scheme:dark){:root{--site-ground:#10141b;--site-surface:#171d26;--site-ink:#e4e8ee;--site-muted:#9aa3b1;--site-line:#29313d;--site-accent:#8f8fff;--site-accent-soft:#1d1f4d;--site-code-bg:#1e2531;--site-code-ink:#d7dce5;--site-warn:#fdba74;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}*,:before,:after{box-sizing:border-box}strong,b{font-weight:600}body{background:var(--site-ground);color:var(--site-ink);font:1rem/1.6 var(--site-font);margin:0}a{color:var(--site-accent)}code,pre{font-family:var(--site-mono);font-size:.875em}:not(pre)>code{background:var(--site-code-bg);color:var(--site-code-ink);overflow-wrap:anywhere;border-radius:4px;padding:.1em .35em}pre{scrollbar-width:thin;background:var(--site-code-bg);color:var(--site-code-ink);border-radius:8px;margin:0;padding:1rem;line-height:1.5;overflow-x:auto}:focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}.skip-link{z-index:20;background:var(--site-accent);color:var(--site-surface);border-radius:6px;padding:.5rem .75rem;position:absolute;top:-4rem;left:1rem}.skip-link:focus{top:.5rem}.site-header{z-index:10;height:var(--site-header);border-bottom:1px solid var(--site-line);background:var(--site-surface);align-items:center;gap:1rem;padding-inline:1.25rem;display:flex;position:sticky;top:0}.brand{color:var(--site-ink);font:600 1.1rem/1 var(--site-display);align-items:center;gap:.65rem;text-decoration:none;display:inline-flex}.brand__mark{flex:none;width:auto;height:1.6rem}.site-header__version{border:1px solid var(--site-line);color:var(--site-muted);font:500 .75rem var(--site-mono);border-radius:99px;padding:.1rem .5rem}.site-header__link{color:var(--site-muted);margin-left:auto;display:inline-flex}.site-header__link:hover{color:inherit}.site-header__link svg{display:block}.site{grid-template-columns:15rem minmax(0,1fr);display:grid}.sidebar{top:var(--site-header);max-height:calc(100vh - var(--site-header));border-right:1px solid var(--site-line);align-self:start;padding:.5rem 1rem 3rem;position:sticky;overflow-y:auto}.sidebar__heading{color:var(--site-muted);font:600 .72rem/1 var(--site-font);letter-spacing:.06em;text-transform:uppercase;margin:1.25rem 0 .4rem}.sidebar__list{gap:1px;margin:0;padding:0;list-style:none;display:grid}.sidebar__list a{color:var(--site-ink);border-radius:6px;padding:.3rem .6rem;font-size:.92rem;text-decoration:none;display:block}.sidebar__list a:hover{background:var(--site-code-bg)}.sidebar__list a[aria-current=page]{background:var(--site-accent-soft);color:var(--site-accent);font-weight:600}.content{outline:none;padding:2.5rem clamp(1rem,4vw,3rem) 5rem;transition:opacity .2s .45s}.router-loading .content{opacity:.55}:root[data-focus-source=pointer] .content [tabindex="-1"]:focus{outline:none}@media (prefers-reduced-motion:no-preference){.page-leave{animation:.18s cubic-bezier(.4,0,1,1) forwards page-leave}.page-enter{animation:.26s cubic-bezier(.22,1,.36,1) page-enter}}@keyframes page-leave{to{opacity:0;transform:translateY(-.35rem)}}@keyframes page-enter{0%{opacity:0;transform:translateY(.5rem)}}.doc{max-width:62rem}.doc h1:not(:where(.example__stage *)){font:600 clamp(2rem, 4vw, 2.75rem)/1.1 var(--site-display);letter-spacing:-.01em;text-wrap:balance;margin:.35rem 0 .75rem}.doc h2:not(:where(.example__stage *)){font:600 1.4rem/1.25 var(--site-display);text-wrap:balance;margin:0 0 .75rem}.doc h3:not(:where(.example__stage *)){margin:1.5rem 0 .5rem;font-size:1.05rem}.doc p,.doc li{max-width:44rem}.doc__header{gap:.5rem;display:grid}.doc__columns{gap:2.5rem;display:grid}.doc__aside{min-width:0}.doc__aside .example{margin-top:0}.doc__aside-title{color:var(--site-accent);font:600 .75rem var(--site-font);letter-spacing:.06em;text-transform:uppercase;margin:0 0 1rem}.doc__main{min-width:0}@media (width>=80rem){.doc--split{max-width:96rem}.doc--split .doc__columns{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:clamp(1rem,4vw,3rem)}.doc--split .doc__header{grid-area:1/1}.doc--split .doc__main{grid-area:2/1}.doc--split .doc__aside{top:calc(var(--site-header) + 1.5rem);max-height:calc(100vh - var(--site-header) - 3rem);overscroll-behavior:contain;grid-area:1/2/span 2;position:sticky;overflow-y:auto}.doc--split .doc__summary{margin-bottom:0}.doc--split .doc__main>.doc__section:first-child{margin-top:2rem}.doc--split .doc__reference{grid-area:3/1/auto/-1}}.playground{margin-top:2.5rem}.playground [data-tabs-panels]{margin-top:1rem}.playground__tabs{flex-wrap:wrap}.doc__eyebrow{color:var(--site-accent);font:600 .75rem var(--site-font);letter-spacing:.06em;text-transform:uppercase;margin:0}.doc__summary{color:var(--site-muted);margin:0 0 1.5rem;font-size:1.15rem}.doc__facts{flex-wrap:wrap;gap:.75rem 1.5rem;margin:1.25rem 0 0;display:flex}.doc__facts div{gap:.15rem;display:grid}.doc__facts dt{color:var(--site-muted);font-size:.75rem}.doc__facts dd{margin:0}.doc__section{margin-top:3rem}.doc__section>p+pre,.doc__section>pre+p{margin-top:.75rem}.tool-button{border:1px solid var(--site-line);background:var(--site-surface);color:var(--site-ink);font:400 .8rem var(--site-font);cursor:pointer;border-radius:6px;padding:.3rem .7rem}.tool-button:hover{border-color:var(--site-accent)}.example{border:1px solid var(--site-line);background:var(--site-surface);border-radius:12px;margin-top:2.5rem}.example__header{padding:1rem 1.25rem 0}.example__header h2{margin:0;font-size:1.15rem}.example__header p{color:var(--site-muted);margin:.25rem 0 0}.example__stage{border:1px dashed var(--color-border);background:var(--color-surface);color:var(--color-text);border-radius:8px;margin:1rem 1.25rem;padding:1.5rem}.example__stage img,.example__stage video{border-radius:6px;max-width:100%;height:auto}.example__stage .menu:not([data-dropdown-state]){border:var(--surface-dropdown-border-width) solid var(--surface-dropdown-border-color);background:var(--surface-dropdown-color-bg);border-radius:8px;width:max-content;margin-top:.5rem;padding:.5rem}.example__stage .menu:not([data-dropdown-state]) a{padding:.25rem .5rem;display:block}.example__stage .accordion{gap:.5rem;display:grid}.example__stage .accordion>button{text-align:left}.example__stage .card-grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr));gap:.75rem;display:grid}.example__stage .card{background:var(--site-accent-soft);border-radius:8px;padding:1.25rem}.example__stage .hero{color:#fff;background-color:#1f2a44;background-position:50%;background-size:cover;border-radius:8px;place-items:end start;min-height:12rem;padding:1rem;font-weight:600;display:grid}.example__stage .demo-header{top:calc(var(--site-header) + .5rem);color:#fff;background:#1f2a44;border-radius:8px;justify-content:space-between;align-items:center;padding:.75rem 1rem;transition:transform .25s,opacity .25s;display:flex;position:sticky}.example__stage .demo-header a{color:#c7d0ff}.example__stage .demo-header.scrollhide{opacity:0;transform:translateY(-120%)}.example__stage .demo-header.scrolloverlay{box-shadow:0 8px 20px #0003}.example__stage .button-row,.example__stage .gallery{flex-wrap:wrap;gap:.75rem;display:flex}.example__stage .gallery img{width:12rem;display:block}.example__stage .form{--form-label-width:7rem;--form-gap:.75rem;gap:var(--form-gap);max-width:32rem;display:grid}.example__stage .form label{font-size:.9rem;font-weight:400}.example__stage .form [data-error-for]{color:var(--color-danger-text);margin:0;font-size:.85rem}.example__stage .form__group{grid-template-columns:var(--form-label-width) minmax(0, 1fr);gap:.25rem var(--form-gap);align-items:start;display:grid}.example__stage .form__label{padding-block:calc(.45rem + 1px);font-size:.9rem}.example__stage .form__control{gap:.25rem;display:grid}.example__stage .form__actions{padding-left:calc(var(--form-label-width) + var(--form-gap));gap:.5rem;display:flex}.example__stage .form--stacked .form__group{grid-template-columns:minmax(0,1fr)}.example__stage .form--stacked .form__actions{padding-left:0}.example__stage .panel{border:var(--surface-panel-border-width) solid var(--surface-panel-border-color);border-radius:8px;min-height:5rem;margin-top:.75rem;padding:1rem}.example__stage table{width:100%}.example__views [data-tabs-list]{padding:0 1.25rem}.example__views .example__code,.example__views .example__state,.example__views .example__log{border-top:0}.example__controls{border-top:1px solid var(--site-line);grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem 1.25rem;padding:1rem 1.25rem;display:grid}.example__controls .tool-button{place-self:end start}.control{align-content:start;gap:.3rem;display:grid}.control label{font-size:.8rem}.control input:not([type=checkbox]),.control select{border:1px solid var(--site-line);background:var(--site-ground);color:var(--site-ink);font:inherit;border-radius:6px;padding:.35rem .5rem;font-size:.9rem}.control input[type=checkbox]{justify-self:start;width:1.1rem;height:1.1rem}.control__hint{color:var(--site-muted);margin:0;font-size:.78rem}.example__code{border-top:1px solid var(--site-line);position:relative}.example__code pre{border-radius:0;max-height:22rem;padding-right:8rem}.example__state{border-top:1px solid var(--site-line);padding:.75rem 1.25rem 1rem}.example__state h3{color:var(--site-muted);letter-spacing:.05em;text-transform:uppercase;margin:0 0 .5rem;font-size:.78rem}.example__state dl{font:.8rem/1.4 var(--site-mono);grid-template-columns:max-content minmax(0,1fr);gap:.25rem 1rem;margin:0;display:grid}.example__state dt{color:var(--site-muted)}.example__state dd{margin:0;font-weight:400}.example__copy{position:absolute;top:.6rem;right:.75rem}.example__log{border-top:1px solid var(--site-line);grid-template-columns:1fr auto;align-items:center;gap:.5rem;padding:.75rem 1.25rem 1rem;display:grid}.example__log h3{color:var(--site-muted);letter-spacing:.05em;text-transform:uppercase;margin:0;font-size:.78rem}.example__log ol{max-height:12rem;font:.8rem/1.4 var(--site-mono);grid-column:1/-1;gap:.3rem;margin:0;padding:0;list-style:none;display:grid;overflow:auto}.example__log li{grid-template-columns:3.5rem max-content minmax(0,1fr);gap:.75rem;display:grid}.example__log [data-example-log-empty]{color:var(--site-muted);grid-column:1/-1;margin:0;font-size:.85rem}.log__time,.log__detail{color:var(--site-muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}.table-wrap{border:1px solid var(--site-line);border-radius:8px;overflow-x:auto}table{border-collapse:collapse;background:var(--site-surface);width:100%;font-size:.9rem}th,td{border-bottom:1px solid var(--site-line);text-align:left;vertical-align:top;padding:.6rem .75rem}thead th{background:var(--site-ground);color:var(--site-muted);letter-spacing:.05em;text-transform:uppercase;font-size:.72rem}tbody tr:last-child>*{border-bottom:0}tbody th{white-space:nowrap;font-weight:400}.badge{background:var(--site-code-bg);color:var(--site-muted);font:600 .66rem/1.5 var(--site-font);letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border-radius:99px;margin-left:.4rem;padding:.05rem .45rem;display:inline-block}.badge--required{background:var(--site-accent-soft);color:var(--site-accent)}.type,.none,.note{color:var(--site-muted)}.is-deprecated th code{text-decoration:line-through}.deprecated{color:var(--site-warn);margin:.25rem 0 0;font-size:.85rem}.component-grid{grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.component-card{border:1px solid var(--site-line);background:var(--site-surface);height:100%;color:var(--site-ink);border-radius:10px;gap:.2rem;padding:1rem;text-decoration:none;display:grid}.component-card:hover{border-color:var(--site-accent)}.component-card small{color:var(--site-accent);letter-spacing:.05em;text-transform:uppercase;font-size:.7rem}.component-card strong{font-family:var(--site-display);font-size:1.05rem}.component-card span{color:var(--site-muted);font-size:.9rem}@media (width<=56rem){.site{grid-template-columns:minmax(0,1fr)}.sidebar{border-right:0;border-bottom:1px solid var(--site-line);max-height:none;position:static}.sidebar__list{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}}.sidebar__trigger,.sidebar__close{color:var(--site-ink);cursor:pointer;background:0 0;border:1px solid #0000;border-radius:6px;padding:.35rem;display:none}.sidebar__trigger:hover,.sidebar__close:hover{border-color:var(--site-line)}.sidebar__close{background:var(--site-surface)}@media (width<=56rem){.sidebar__trigger[aria-expanded]{display:inline-flex}.sidebar[data-toggle-state] .sidebar__close[aria-expanded]{z-index:1;align-self:flex-end;margin-bottom:-2rem;display:inline-flex;position:sticky;top:0}.sidebar__trigger[aria-expanded=true]:after{content:"";z-index:11;inset:var(--site-header) 0 0 0;background:#00000073;position:fixed}.sidebar[data-toggle-state]{--toggle-transition-duration:.5s;--toggle-transition-easing:cubic-bezier(.85, 0, .15, 1);z-index:12;inset:var(--site-header) auto 0 0;border-right:1px solid var(--site-line);background:var(--site-surface);overscroll-behavior:contain;border-bottom:0;flex-direction:column;width:min(20rem,82vw);max-height:none;padding-bottom:2rem;display:flex;position:fixed;overflow-y:auto;box-shadow:0 0 2rem #0003}}@media (width<=56rem) and (prefers-reduced-motion:no-preference){.sidebar[data-toggle-state=opening]{animation-name:sidebar-in}.sidebar[data-toggle-state=closing]{animation-name:sidebar-out}.sidebar__trigger[aria-expanded=true]:after{animation:.25s cubic-bezier(.85,0,.15,1) sidebar-scrim}}@media (width>=56.01rem){:root .site .sidebar[hidden]{display:block!important}:root:not(:has([data-toggle].component-error)) .sidebar[data-toggle-state]{display:block!important}}@keyframes sidebar-in{0%{transform:translate(-100%)}}@keyframes sidebar-out{to{transform:translate(-100%)}}@keyframes sidebar-scrim{0%{opacity:0}}.example__tabs{overscroll-behavior-x:contain;overflow-x:auto}.example__tabs a{white-space:nowrap;flex:none}@media (width<=1200px){.workbench__layout{grid-template-columns:minmax(0,1fr)}.workbench__panel{max-height:none;position:static}}@media (width<=760px){.workbench__frames{grid-template-columns:minmax(0,1fr)}}.tokens{padding:1.5rem clamp(1rem,4vw,3rem) 5rem}.tokens .doc__header{max-width:62rem}.tokens__bar{top:var(--site-header);z-index:2;border-bottom:1px solid var(--site-line);background:var(--site-ground);flex-wrap:wrap;align-items:center;gap:.5rem .75rem;padding:.75rem 0;display:flex;position:sticky}.tokens__count{color:var(--site-muted);font-size:.85rem}.tokens__layer{max-width:74rem;margin-top:3rem}.tokens__layer h2{font:600 1.35rem/1.2 var(--site-display);align-items:baseline;gap:.6rem;margin:0 0 .4rem;display:flex}.tokens__step{color:var(--site-accent);font:600 .8rem/1 var(--site-mono)}.tokens__note{max-width:60ch;color:var(--site-muted);margin:0 0 1.25rem}.tokens__rows{border:1px solid var(--site-line);background:var(--site-line);border-radius:10px;gap:1px;display:grid;overflow:hidden}.tokens__control{border:1px solid var(--site-line);border-radius:7px;align-items:stretch;min-width:0;display:flex;overflow:hidden}.tokens__control:focus-within{outline:2px solid var(--site-accent);outline-offset:2px}.tokens__control :is(input,button):focus-visible{outline:none}.tokens__control input{border:0;border-left:1px solid var(--site-line);background:var(--site-ground);min-width:0;color:var(--site-ink);font:.78rem var(--site-mono);flex:auto;padding:.35rem .5rem}.tokens__control input:disabled{opacity:.6}.tokens__picker{border:0;border-right:1px solid var(--site-line);cursor:pointer;background:0 0;flex:none;width:2.25rem;padding:0}.tokens__picker::-webkit-color-swatch-wrapper{padding:2px}.tokens__picker::-webkit-color-swatch{border:0;border-radius:4px}.tokens__picker::-moz-color-swatch{border:0;border-radius:4px}.tokens__slider{width:100%;accent-color:var(--site-accent);margin:.35rem 0 0}.tokens__follows{color:var(--site-muted);margin:.2rem 0 0;font-size:.72rem}.tokens__follows code{font-size:.95em}.tokens__follows button{color:var(--site-accent);font:inherit;cursor:pointer;background:0 0;border:0;padding:0;text-decoration:underline}.tokens__copy{border:0;border-left:1px solid var(--site-line);background:var(--site-surface);color:var(--site-muted);cursor:pointer;flex:none;padding:0 .5rem;font-size:.85rem}.tokens__copy:hover{color:var(--site-ink);background:var(--site-code-bg)}.tokens__copy:focus-visible{background:var(--site-code-bg);color:var(--site-ink);box-shadow:inset 0 0 0 2px var(--site-accent)}.visually-hidden{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.tokens__swatch{background-image:linear-gradient(var(--demo,transparent), var(--demo,transparent)), repeating-conic-gradient(var(--site-code-bg) 0% 25%, transparent 0% 50%);background-size:auto,8px 8px;flex:none;width:2.25rem}.tokens__row{background:var(--site-surface);grid-template-columns:minmax(0,26rem) minmax(0,1fr);align-items:start;gap:1.25rem;padding:.9rem;display:grid}.tokens__field{gap:.5rem;min-width:0;display:grid}.tokens__family{font:600 .95rem/1.2 var(--site-font);margin:0}.tokens__list{gap:.5rem;display:grid}.tokens__token{gap:.2rem;min-width:0;display:grid}.tokens__token--unread .tokens__label{color:var(--site-warn)}.tokens__label{overflow-wrap:anywhere;font-size:.75rem}.tokens__demo{background:var(--site-ground);border-radius:10px;flex-wrap:wrap;justify-content:center;align-items:center;gap:.6rem;min-height:4.5rem;padding:.9rem;display:flex}.tokens__sample{min-width:7rem;min-height:2.4rem;font:500 .82rem var(--site-font);border:1px solid #0000;border-radius:7px;justify-content:center;align-items:center;padding:0 1rem;display:inline-flex}[data-token-demo=button] .tokens__sample{background:var(--demo-base,var(--demo-bg,var(--button-primary-bg)));color:var(--demo-text,var(--button-primary-color));cursor:pointer}[data-token-demo=button] .tokens__sample:hover{background:var(--demo-hover,var(--demo-base))}[data-token-demo=status] .tokens__sample[data-part=solid]{background:var(--demo-base);color:var(--demo-text,#fff)}[data-token-demo=status] .tokens__sample[data-part=tint]{border-left:4px solid var(--demo-base);background:var(--demo-bg,var(--demo-muted));color:var(--demo-tint-text,var(--demo-strong));border-radius:0 7px 7px 0}[data-token-demo=on-status] .tokens__sample{background:var(--color-danger-strong);color:var(--demo-base)}[data-token-demo=surface] .tokens__sample{border-color:var(--demo-border,var(--site-line));border-width:var(--demo-width,1px);border-radius:var(--demo-radius,7px);background:var(--demo-bg,var(--demo-muted,var(--site-surface)));box-shadow:var(--demo-shadow,none);color:var(--demo-text,inherit)}[data-token-demo=text] .tokens__sample{background:var(--site-surface);color:var(--demo-text,var(--demo-muted,var(--demo-base)))}[data-token-demo=field] .tokens__sample{border-color:var(--demo-border,var(--site-line));border-width:var(--demo-width,1px);background:var(--site-surface);color:var(--demo-text,var(--site-muted));outline:var(--demo-width,2px) solid var(--demo-base,transparent);outline-offset:1px}[data-token-demo=focus] .tokens__sample{background:var(--site-surface);outline:var(--demo-width,2px) solid var(--demo-base,var(--site-accent));outline-offset:var(--demo-offset,2px)}[data-token-demo=inverse] .tokens__sample{background:var(--demo-bg,var(--demo-base));color:var(--demo-text,#fff)}[data-token-demo=overlay] .tokens__sample{background:var(--demo-base);color:#fff}[data-token-demo=shadow] .tokens__sample{background:var(--site-surface);box-shadow:0 .5rem 1.5rem var(--demo-base)}[data-token-demo=motion] .tokens__sample{background:var(--site-accent-soft);transition:translate var(--demo-duration,.2s) var(--demo-easing,ease)}[data-token-demo=motion] .tokens__sample:hover{translate:1.5rem}.tokens__read{color:var(--site-muted);margin:0;font-size:.75rem}.tokens__read--none{color:var(--site-warn)}@media (width<=56rem){.tokens__row{grid-template-columns:minmax(0,1fr)}}.tokens__export{gap:.5rem;max-width:74rem;margin-top:3rem;display:grid}.tokens__export h2{font:600 1.35rem/1.2 var(--site-display);margin:0}.tokens__export .tool-button{justify-self:start}:root[data-theme=dark]{--site-ground:#10141b;--site-surface:#171d26;--site-ink:#e4e8ee;--site-muted:#9aa3b1;--site-line:#29313d;--site-accent:#9aa6ff;--site-accent-soft:#232a48;--site-code-bg:#1e2531;--site-code-ink:#d7dce5;--site-warn:#fdba74;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}