.demo-cta-button{--demo-button-focus-ring: var(--color-border-focus);--demo-button-focus-ring-width: var(--border-width-focus);--demo-button-focus-ring-offset: var(--border-width-focus);--demo-button-inverse-foreground: var(--color-inverse-link);--demo-button-inverse-focus-ring: var(--color-inverse-focus);--demo-button-min-target: var(--size-target-min);--demo-button-touch-target: var(--size-target-comfortable);--demo-button-icon-gap: var(--space-2);--demo-button-padding-inline: var(--space-md);--demo-button-padding-block: var(--space-sm);--demo-button-radius: var(--radius-md);--demo-button-font-family: var(--font-family-body);--demo-button-font-weight: var(--font-weight-medium);--demo-button-font-size: var(--font-size-md);--demo-button-inverse-background-hover: var(--color-inverse-foreground);--demo-button-inverse-hover-opacity: var(--opacity-disabled);--demo-button-disabled-opacity: var(--opacity-disabled);--demo-button-transition: var(--motion-duration-fast);--demo-button-loading-spin: var(--motion-duration-loop);--demo-button-spinner-size: var(--font-size-md);--demo-button-spinner-stroke: var(--border-width-focus);box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:var(--demo-button-icon-gap);min-inline-size:var(--demo-button-min-target);min-block-size:var(--demo-button-min-target);background-color:var(--demo-button-background);color:var(--demo-button-foreground);padding-inline:var(--demo-button-padding-inline);padding-block:var(--demo-button-padding-block);margin:0;border:0;border-radius:var(--demo-button-radius);font-family:var(--demo-button-font-family);font-weight:var(--demo-button-font-weight);font-size:var(--demo-button-font-size);cursor:pointer;text-decoration:none;white-space:nowrap;-webkit-appearance:none;appearance:none}.demo-cta-button--primary{--demo-button-background: var(--color-action-primary-background);--demo-button-background-hover: var(--color-action-primary-background-hover);--demo-button-foreground: var(--color-action-primary-foreground)}.demo-cta-button--secondary{--demo-button-background: var(--color-action-secondary-background);--demo-button-background-hover: var(--color-action-secondary-background-hover);--demo-button-foreground: var(--color-action-secondary-foreground)}.demo-cta-button--ghost{--demo-button-background: var(--color-action-ghost-background);--demo-button-background-hover: var(--color-action-ghost-background-hover);--demo-button-foreground: var(--color-action-ghost-foreground)}.demo-cta-button--danger{--demo-button-background: var(--color-action-danger-background);--demo-button-background-hover: var(--color-action-danger-background-hover);--demo-button-foreground: var(--color-action-danger-foreground)}.demo-cta-button:not([aria-disabled=true]):not([aria-busy=true]):is(:hover,:active){background-color:var(--demo-button-background-hover)}.demo-cta-button--sm{--demo-button-padding-inline: var(--space-sm);--demo-button-font-size: var(--font-size-sm);--demo-button-spinner-size: var(--font-size-sm)}.demo-cta-button--md{--demo-button-padding-inline: var(--space-md);--demo-button-font-size: var(--font-size-md);--demo-button-spinner-size: var(--font-size-md)}.demo-cta-button--lg{--demo-button-padding-inline: var(--space-lg);--demo-button-font-size: var(--font-size-lg);--demo-button-spinner-size: var(--font-size-lg)}.demo-cta-button--icon-only{padding-inline:var(--demo-button-padding-block)}.demo-cta-button--inverse.demo-cta-button--ghost{color:var(--demo-button-inverse-foreground)}.demo-cta-button--inverse.demo-cta-button--ghost:not([aria-disabled=true]):not([aria-busy=true]):is(:hover,:active){background-color:color-mix(in srgb,var(--demo-button-inverse-background-hover) calc(var(--demo-button-inverse-hover-opacity) * .25 * 100%),transparent)}.demo-cta-button:focus-visible{outline:var(--demo-button-focus-ring-width) solid var(--demo-button-focus-ring);outline-offset:var(--demo-button-focus-ring-offset)}.demo-cta-button--inverse:focus-visible{outline-color:var(--demo-button-inverse-focus-ring)}.demo-cta-button[aria-disabled=true]{cursor:not-allowed;opacity:var(--demo-button-disabled-opacity)}.demo-cta-button[aria-busy=true]{cursor:progress}.demo-cta-button__icon{display:inline-flex;align-items:center;justify-content:center;line-height:0}.demo-cta-button__label{display:inline-block}.demo-cta-button__visually-hidden{position:absolute;inline-size:1px;block-size:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}.demo-cta-button__spinner{display:inline-block;box-sizing:border-box;inline-size:var(--demo-button-spinner-size);block-size:var(--demo-button-spinner-size);flex:0 0 auto;border-radius:var(--radius-full);border:var(--demo-button-spinner-stroke) solid currentColor;border-block-start-color:transparent}.demo-cta-button{transition:background-color var(--demo-button-transition) var(--motion-easing-standard)}.demo-cta-button__spinner{animation:demo-cta-button-spin var(--demo-button-loading-spin) linear infinite}@media(prefers-reduced-motion:reduce){.demo-cta-button{transition:none}.demo-cta-button__spinner{animation:none}}@keyframes demo-cta-button-spin{to{transform:rotate(360deg)}}.demo-icon{--demo-icon-color: currentColor;--demo-icon-stroke-width: var(--border-width-focus);box-sizing:content-box;display:inline-block;flex-shrink:0;vertical-align:middle;color:var(--demo-icon-color);stroke-width:var(--demo-icon-stroke-width);overflow:visible}.demo-icon path{vector-effect:non-scaling-stroke}.demo-icon--xs{--demo-icon-size: var(--font-size-xs);font-size:var(--demo-icon-size)}.demo-icon--sm{--demo-icon-size: var(--font-size-sm);font-size:var(--demo-icon-size)}.demo-icon--md{--demo-icon-size: var(--font-size-md);font-size:var(--demo-icon-size)}.demo-icon--lg{--demo-icon-size: var(--font-size-lg);font-size:var(--demo-icon-size)}.demo-icon--xl{--demo-icon-size: var(--font-size-xl);font-size:var(--demo-icon-size)}.demo-icon--inline{font-size:inherit;vertical-align:-.125em}.demo-callout{--demo-alert-background: var(--color-status-info-background);--demo-alert-foreground: var(--color-status-info-foreground);--demo-alert-body-color: var(--color-foreground);--demo-alert-border: var(--color-status-info-border);--demo-alert-border-width: var(--border-width-thin);--demo-alert-radius: var(--radius-md);--demo-alert-padding: var(--space-md);--demo-alert-gap: var(--space-3);--demo-alert-part-gap: var(--space-1);--demo-alert-icon-size: var(--font-size-lg);--demo-alert-heading-size: var(--font-size-md);--demo-alert-heading-weight: var(--font-weight-semibold);--demo-alert-font-family: var(--font-family-body);--demo-alert-font-size: var(--font-size-md);--demo-alert-line-height: var(--font-line-height-normal);--demo-alert-dismiss-margin: var(--space-1);box-sizing:border-box;display:flex;align-items:flex-start;gap:var(--demo-alert-gap);padding:var(--demo-alert-padding);border:var(--demo-alert-border-width) solid var(--demo-alert-border);border-radius:var(--demo-alert-radius);background-color:var(--demo-alert-background);color:var(--demo-alert-body-color);font-family:var(--demo-alert-font-family);line-height:var(--demo-alert-line-height)}.demo-callout--info{--demo-alert-background: var(--color-status-info-background);--demo-alert-foreground: var(--color-status-info-foreground);--demo-alert-border: var(--color-status-info-border)}.demo-callout--success{--demo-alert-background: var(--color-status-success-background);--demo-alert-foreground: var(--color-status-success-foreground);--demo-alert-border: var(--color-status-success-border)}.demo-callout--warning{--demo-alert-background: var(--color-status-warning-background);--demo-alert-foreground: var(--color-status-warning-foreground);--demo-alert-border: var(--color-status-warning-border)}.demo-callout--danger{--demo-alert-background: var(--color-status-danger-background);--demo-alert-foreground: var(--color-status-danger-foreground);--demo-alert-border: var(--color-status-danger-border)}.demo-callout__icon{--demo-alert-first-line: calc(var(--demo-alert-font-size) * var(--demo-alert-line-height));display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;block-size:max(var(--demo-alert-first-line),var(--demo-alert-icon-size));line-height:0}.demo-callout[data-has-heading]>.demo-callout__icon{--demo-alert-first-line: calc(var(--demo-alert-heading-size) * var(--demo-alert-line-height))}.demo-callout__content{display:flex;flex:1 1 auto;flex-direction:column;gap:var(--demo-alert-part-gap);min-inline-size:0}.demo-callout__heading{margin:0;color:var(--demo-alert-foreground);font-size:var(--demo-alert-heading-size);font-weight:var(--demo-alert-heading-weight)}.demo-callout__body{color:var(--demo-alert-body-color);font-size:var(--demo-alert-font-size)}.demo-callout__dismiss{display:inline-flex;flex:0 0 auto;margin-block-start:calc(-1 * var(--demo-alert-dismiss-margin));margin-inline-end:calc(-1 * var(--demo-alert-dismiss-margin))}.demo-expander{--demo-disclosure-trigger-color: var(--color-foreground);--demo-disclosure-trigger-background-hover: var(--color-background-subtle);--demo-disclosure-trigger-padding-block: var(--space-sm);--demo-disclosure-trigger-padding-inline: var(--space-sm);--demo-disclosure-trigger-gap: var(--space-2);--demo-disclosure-trigger-font-family: var(--font-family-body);--demo-disclosure-trigger-font-size: var(--font-size-md);--demo-disclosure-trigger-font-weight: var(--font-weight-medium);--demo-disclosure-trigger-line-height: var(--font-line-height-normal);--demo-disclosure-trigger-radius: var(--radius-md);--demo-disclosure-icon: var(--color-foreground-muted);--demo-disclosure-panel-padding-block: var(--space-sm);--demo-disclosure-panel-padding-inline: var(--space-sm);--demo-disclosure-panel-color: var(--color-foreground);--demo-disclosure-focus-ring: var(--color-border-focus);--demo-disclosure-focus-ring-width: var(--border-width-focus);--demo-disclosure-min-target: var(--size-target-min);--demo-disclosure-disabled-opacity: var(--opacity-disabled);--demo-disclosure-transition: var(--motion-duration-base);display:flex;flex-direction:column;align-items:flex-start;min-inline-size:0}.demo-expander--full-width>.demo-expander__heading,.demo-expander--full-width>.demo-expander__trigger,.demo-expander--full-width>.demo-expander__heading>.demo-expander__trigger{align-self:stretch}.demo-expander--full-width>.demo-expander__trigger,.demo-expander--full-width>.demo-expander__heading>.demo-expander__trigger{display:flex;inline-size:100%}.demo-expander__heading{margin:0;padding:0;font:inherit}.demo-expander__trigger{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--demo-disclosure-trigger-gap);min-inline-size:var(--demo-disclosure-min-target);min-block-size:var(--demo-disclosure-min-target);margin:0;padding-block:var(--demo-disclosure-trigger-padding-block);padding-inline:var(--demo-disclosure-trigger-padding-inline);border:0;border-radius:var(--demo-disclosure-trigger-radius);background-color:transparent;color:var(--demo-disclosure-trigger-color);font-family:var(--demo-disclosure-trigger-font-family);font-size:var(--demo-disclosure-trigger-font-size);font-weight:var(--demo-disclosure-trigger-font-weight);line-height:var(--demo-disclosure-trigger-line-height);text-align:start;cursor:pointer;-webkit-appearance:none;appearance:none}.demo-expander__trigger:not([aria-disabled=true]):hover,.demo-expander__trigger:not([aria-disabled=true]):active{background-color:var(--demo-disclosure-trigger-background-hover)}.demo-expander__trigger:focus-visible{outline:var(--demo-disclosure-focus-ring-width) solid var(--demo-disclosure-focus-ring);outline-offset:var(--demo-disclosure-focus-ring-width)}.demo-expander__trigger[aria-disabled=true]{cursor:not-allowed;opacity:var(--demo-disclosure-disabled-opacity)}.demo-expander__icon{display:inline-flex;flex:none;align-items:center;color:var(--demo-disclosure-icon);transition:transform var(--demo-disclosure-transition) var(--motion-easing-standard)}[dir=rtl] .demo-expander__icon{transform:scaleX(-1)}.demo-expander__trigger[aria-expanded=true] .demo-expander__icon{transform:rotate(90deg)}[dir=rtl] .demo-expander__trigger[aria-expanded=true] .demo-expander__icon{transform:scaleX(-1) rotate(90deg)}@media(prefers-reduced-motion:reduce){.demo-expander__icon{transition:none}}.demo-expander__panel{box-sizing:border-box;align-self:stretch;padding-block:var(--demo-disclosure-panel-padding-block);padding-inline:var(--demo-disclosure-panel-padding-inline);color:var(--demo-disclosure-panel-color)}.demo-expander__panel[hidden]{display:none}.demo-text{margin:0;padding:0;--demo-text-font-family: var(--font-family-body);--demo-text-line-height: var(--font-line-height-normal);font-family:var(--demo-text-font-family);font-size:var(--demo-text-font-size);font-weight:var(--demo-text-font-weight);line-height:var(--demo-text-line-height);color:var(--demo-text-color)}.demo-text--size-xs{--demo-text-font-size: var(--font-size-xs)}.demo-text--size-sm{--demo-text-font-size: var(--font-size-sm)}.demo-text--size-md{--demo-text-font-size: var(--font-size-md)}.demo-text--size-lg{--demo-text-font-size: var(--font-size-lg)}.demo-text--size-xl{--demo-text-font-size: var(--font-size-xl)}.demo-text--weight-regular{--demo-text-font-weight: var(--font-weight-regular)}.demo-text--weight-medium{--demo-text-font-weight: var(--font-weight-medium)}.demo-text--weight-semibold{--demo-text-font-weight: var(--font-weight-semibold)}.demo-text--weight-bold{--demo-text-font-weight: var(--font-weight-bold)}.demo-text--tone-default{--demo-text-color: var(--color-foreground)}.demo-text--tone-strong{--demo-text-color: var(--color-foreground-strong)}.demo-text--tone-muted{--demo-text-color: var(--color-foreground-muted)}.demo-text--tone-danger{--demo-text-color: var(--color-foreground-danger)}.demo-text--tone-on-action{--demo-text-color: var(--color-foreground-on-action)}.demo-text--align-start{text-align:start}.demo-text--align-center{text-align:center}.demo-text--align-end{text-align:end}.demo-text--truncate{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.demo-text--truncate-inline{display:inline-block;max-inline-size:100%;vertical-align:bottom}.ds-naming-demo__pair>*>*{flex:1 1 calc(var(--layout-max-width-prose) / 2);min-inline-size:0}