zdp-design-system 0.43.8

package/dist/styles/components.css

@@ -0,0 +1,4686 @@
+.zdp-user-select-control,
+.zdp-user-select-decorative,
+.zdp-user-select-dragging,
+.zdp-brand-lockup__mark,
+.zdp-button,
+.zdp-confirm-action,
+.zdp-avatar__initials,
+.zdp-kbd,
+.zdp-shortcut-hint,
+.zdp-shortcut-hint__separator,
+.zdp-tooltip__content,
+.zdp-disclosure__trigger,
+.zdp-disclosure__mark,
+.zdp-segmented-control__item,
+.zdp-popover__trigger,
+.zdp-menu__trigger,
+.zdp-menu__trigger-mark,
+.zdp-menu__item,
+.zdp-combobox__toggle,
+.zdp-combobox__mark,
+.zdp-combobox__option,
+.zdp-command-field__shortcut,
+.zdp-icon,
+.zdp-icon-button,
+.zdp-icon-button__glyph,
+.zdp-theme-toggle,
+.zdp-theme-toggle__icon,
+.zdp-locale-switcher,
+.zdp-locale-switcher__item,
+.zdp-locale-switcher__label,
+.zdp-text-scale-control,
+.zdp-text-scale-control__item,
+.zdp-text-scale-control__sample,
+.zdp-label__required,
+.zdp-choice,
+.zdp-switch,
+.zdp-choice__mark,
+.zdp-switch__track,
+.zdp-callout__mark,
+.zdp-toast__mark,
+.zdp-toast__action,
+.zdp-toast__close,
+.zdp-progress__track,
+.zdp-progress__bar,
+.zdp-spinner,
+.zdp-spinner__mark,
+.zdp-skeleton,
+.zdp-skeleton__line,
+.zdp-breadcrumb__separator,
+.zdp-pagination__link,
+.zdp-pagination__ellipsis,
+.zdp-sort-header,
+.zdp-sort-header__mark,
+.zdp-code-block__copy,
+.zdp-tabs__tab,
+.zdp-dialog__close,
+.zdp-sheet__close,
+.zdp-share-action,
+.zdp-share-action__mark,
+.zdp-share-icon {
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.zdp-button {
+  align-items: center;
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-medium);
+  gap: var(--zdp-space-2);
+  justify-content: center;
+  font-size: var(--zdp-type-control-size);
+  line-height: var(--zdp-type-control-line-height);
+  min-height: var(--zdp-control-height-md);
+  text-decoration: none;
+  text-align: center;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-button--sm {
+  font-size: var(--zdp-font-size-sm);
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-3);
+}
+
+.zdp-button--md {
+  font-size: var(--zdp-type-control-size);
+  min-height: var(--zdp-control-height-md);
+  padding: 0 var(--zdp-space-4);
+}
+
+.zdp-button--primary {
+  background: var(--zdp-color-accent-primary);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-button--primary:hover:not(:disabled) {
+  background: var(--zdp-color-accent-primary-strong);
+  border-color: var(--zdp-color-accent-primary-strong);
+}
+
+.zdp-button--primary:active:not(:disabled) {
+  background: var(--zdp-color-accent-primary-strong);
+  border-color: var(--zdp-color-accent-primary-strong);
+}
+
+[data-zdp-theme="dark"] .zdp-button--primary {
+  color: var(--zdp-color-ink-inverse);
+}
+
+.zdp-button--secondary {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-button--secondary:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-button--secondary:active:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+[data-zdp-theme="dark"] .zdp-button--secondary {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-muted);
+}
+
+[data-zdp-theme="dark"] .zdp-button--secondary:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-button--danger {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-accent-danger);
+  color: var(--zdp-color-accent-danger);
+}
+
+[data-zdp-theme="dark"] .zdp-button--danger {
+  background: transparent;
+  border-color: var(--zdp-color-accent-danger);
+  color: var(--zdp-color-accent-danger);
+}
+
+.zdp-button--danger:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+}
+
+[data-zdp-theme="dark"] .zdp-button--danger:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-accent-danger);
+  color: var(--zdp-color-accent-danger);
+}
+
+.zdp-button--danger:active:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-accent-danger);
+  color: var(--zdp-color-accent-danger);
+}
+
+.zdp-button:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-confirm-action {
+  --zdp-confirm-action-progress: 0;
+  --zdp-confirm-action-fill: var(--zdp-color-accent-primary);
+
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  cursor: pointer;
+  display: inline-grid;
+  font-family: var(--zdp-font-family-sans);
+  grid-template-columns: var(--zdp-control-height-sm) minmax(0, 1fr);
+  isolation: isolate;
+  min-height: calc(var(--zdp-control-height-md) + var(--zdp-space-3));
+  min-width: min(100%, 18rem);
+  overflow: hidden;
+  padding: var(--zdp-space-2) var(--zdp-space-4) var(--zdp-space-2) var(--zdp-space-2);
+  position: relative;
+  text-align: start;
+  touch-action: none;
+  vertical-align: middle;
+}
+
+.zdp-confirm-action__fill {
+  background: var(--zdp-confirm-action-fill);
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: calc(var(--zdp-confirm-action-progress) * 100%);
+  z-index: -1;
+}
+
+.zdp-confirm-action__thumb {
+  align-items: center;
+  background: var(--zdp-color-accent-primary);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-accent-primary-strong);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  display: inline-flex;
+  font-size: var(--zdp-control-glyph-sm);
+  height: var(--zdp-control-height-sm);
+  justify-content: center;
+  line-height: 1;
+  width: var(--zdp-control-height-sm);
+}
+
+.zdp-confirm-action__glyph {
+  display: block;
+  fill: none;
+  height: var(--zdp-control-glyph-sm);
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 2.25;
+  width: var(--zdp-control-glyph-sm);
+}
+
+[data-zdp-theme="dark"] .zdp-confirm-action__thumb {
+  color: var(--zdp-color-ink-inverse);
+}
+
+[data-zdp-theme="dark"] .zdp-confirm-action {
+  --zdp-confirm-action-fill: var(--zdp-color-accent-primary-soft);
+}
+
+.zdp-confirm-action__body {
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+  padding-left: var(--zdp-space-3);
+}
+
+.zdp-confirm-action__label {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-control-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-control-line-height);
+}
+
+.zdp-confirm-action__hint {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+}
+
+.zdp-confirm-action:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-confirm-action:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-confirm-action--danger {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-confirm-action--danger .zdp-confirm-action__fill {
+  background: var(--zdp-color-accent-danger);
+  opacity: 0.24;
+}
+
+.zdp-confirm-action--danger .zdp-confirm-action__thumb {
+  background: var(--zdp-color-accent-danger);
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-confirm-action[data-active="true"],
+.zdp-confirm-action[data-confirmed="true"] {
+  border-color: var(--zdp-color-focus-line);
+}
+
+.zdp-confirm-action[data-confirmed="true"] .zdp-confirm-action__thumb {
+  background: var(--zdp-color-accent-success);
+  border-color: var(--zdp-color-accent-success);
+}
+
+.zdp-confirm-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-badge {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: 1px solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-medium);
+  justify-content: center;
+  line-height: var(--zdp-type-caption-line-height);
+  max-width: 100%;
+  min-width: 0;
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.zdp-badge--sm {
+  font-size: var(--zdp-font-size-xs);
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-2);
+}
+
+.zdp-badge--md {
+  font-size: var(--zdp-type-caption-size);
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-3);
+}
+
+.zdp-badge--primary {
+  background: var(--zdp-color-accent-primary-soft);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-badge--success {
+  border-color: var(--zdp-color-accent-success);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-badge--warning {
+  border-color: var(--zdp-color-accent-warning);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-badge--danger {
+  border-color: var(--zdp-color-accent-danger);
+  color: var(--zdp-color-accent-danger);
+}
+
+.zdp-avatar {
+  align-items: center;
+  background: var(--zdp-color-surface-raised);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: 50%;
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-medium);
+  justify-content: center;
+  line-height: 1;
+  overflow: hidden;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.zdp-avatar--sm {
+  font-size: var(--zdp-font-size-xs);
+  height: var(--zdp-control-height-sm);
+  width: var(--zdp-control-height-sm);
+}
+
+.zdp-avatar--md {
+  font-size: var(--zdp-type-caption-size);
+  height: var(--zdp-control-height-md);
+  width: var(--zdp-control-height-md);
+}
+
+.zdp-avatar--lg {
+  font-size: var(--zdp-type-body-size);
+  height: calc(var(--zdp-control-height-md) + var(--zdp-space-4));
+  width: calc(var(--zdp-control-height-md) + var(--zdp-space-4));
+}
+
+.zdp-avatar--primary {
+  background: var(--zdp-color-accent-primary-soft);
+  border-color: var(--zdp-color-accent-primary-strong);
+}
+
+.zdp-avatar__image {
+  display: block;
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+}
+
+.zdp-avatar__initials {
+  display: block;
+  max-width: 100%;
+  overflow: hidden;
+  padding: 0 var(--zdp-space-1);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.zdp-identity-chip {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-2);
+  max-width: 100%;
+  min-width: 0;
+  text-align: start;
+  text-decoration: none;
+  vertical-align: middle;
+}
+
+.zdp-identity-chip--sm {
+  min-height: var(--zdp-control-height-md);
+  padding: var(--zdp-space-1) var(--zdp-space-2);
+}
+
+.zdp-identity-chip--md {
+  min-height: calc(var(--zdp-control-height-md) + var(--zdp-space-2));
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+}
+
+.zdp-identity-chip--link {
+  cursor: pointer;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-identity-chip--link:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-identity-chip--link:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-identity-chip[data-selected="true"],
+.zdp-identity-chip[aria-current] {
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-identity-chip__body {
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-identity-chip__label,
+.zdp-identity-chip__description {
+  display: block;
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-identity-chip__label {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-body-small-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-body-small-line-height);
+}
+
+.zdp-identity-chip__description {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+}
+
+.zdp-link {
+  border-bottom: var(--zdp-control-focus-underline-width) solid transparent;
+  color: var(--zdp-color-ink-normal);
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-medium);
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  text-decoration-line: none;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-link:hover {
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-link:focus-visible {
+  background: var(--zdp-color-focus-surface);
+  border-bottom-color: var(--zdp-color-focus-line);
+  color: var(--zdp-color-focus-text);
+  outline: 0;
+}
+
+.zdp-link[aria-current] {
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-link--primary {
+  color: var(--zdp-color-ink-normal);
+}
+
+.zdp-link--muted {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-skip-link {
+  background: var(--zdp-color-focus-surface);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-focus-line);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-focus-text);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  font-weight: var(--zdp-font-weight-medium);
+  left: var(--zdp-space-3);
+  line-height: var(--zdp-type-control-line-height);
+  opacity: 0;
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+  pointer-events: none;
+  position: fixed;
+  text-decoration-line: none;
+  top: var(--zdp-space-3);
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease,
+    opacity var(--zdp-motion-fast) ease;
+  z-index: 10000;
+}
+
+.zdp-skip-link:focus-visible {
+  opacity: 1;
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+  pointer-events: auto;
+}
+
+.zdp-visually-hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.zdp-brand-lockup {
+  align-items: center;
+  color: var(--zdp-color-ink-strong);
+  display: inline-flex;
+  gap: var(--zdp-space-4);
+  min-width: 0;
+}
+
+.zdp-brand-lockup__mark {
+  align-items: center;
+  color: currentColor;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  line-height: 1;
+}
+
+.zdp-brand-lockup__mark svg {
+  block-size: calc(var(--zdp-control-icon-md) + var(--zdp-space-2));
+  display: block;
+  inline-size: calc(var(--zdp-control-icon-md) + var(--zdp-space-2));
+}
+
+.zdp-brand-wordmark {
+  color: currentColor;
+  font-family: var(--zdp-font-family-brand);
+  font-size: calc(var(--zdp-type-page-title-size) - 0.8rem);
+  font-weight: var(--zdp-font-weight-semibold);
+  letter-spacing: 0;
+  line-height: var(--zdp-type-page-title-line-height);
+  margin: 0;
+  min-width: 0;
+}
+
+.zdp-surface-reset .zdp-brand-wordmark {
+  font-family: var(--zdp-font-family-brand);
+  font-weight: var(--zdp-font-weight-semibold);
+  letter-spacing: 0;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.zdp-brand-wordmark--compact {
+  font-size: calc(var(--zdp-type-page-title-compact-size) - 0.5rem);
+}
+
+.zdp-page {
+  background: var(--zdp-color-surface-canvas);
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  min-block-size: 100%;
+  min-width: 0;
+}
+
+.zdp-page--canvas {
+  background: var(--zdp-color-surface-canvas);
+}
+
+.zdp-page--panel {
+  background: var(--zdp-color-surface-panel);
+}
+
+.zdp-container {
+  inline-size: 100%;
+  margin-inline: auto;
+  min-width: 0;
+}
+
+.zdp-container--sm {
+  max-inline-size: var(--zdp-breakpoint-mobile);
+}
+
+.zdp-container--md {
+  max-inline-size: var(--zdp-breakpoint-tablet);
+}
+
+.zdp-container--lg {
+  max-inline-size: var(--zdp-breakpoint-desktop);
+}
+
+.zdp-container--xl {
+  max-inline-size: var(--zdp-breakpoint-wide);
+}
+
+.zdp-container--full {
+  max-inline-size: none;
+}
+
+.zdp-container--padding-none {
+  padding-inline: 0;
+}
+
+.zdp-container--padding-sm {
+  padding-inline: var(--zdp-space-3);
+}
+
+.zdp-container--padding-md {
+  padding-inline: var(--zdp-space-4);
+}
+
+.zdp-container--padding-lg {
+  padding-inline: var(--zdp-space-6);
+}
+
+.zdp-section {
+  min-width: 0;
+}
+
+.zdp-section--spacing-sm {
+  padding-block: var(--zdp-space-4);
+}
+
+.zdp-section--spacing-md {
+  padding-block: var(--zdp-space-6);
+}
+
+.zdp-section--spacing-lg {
+  padding-block: var(--zdp-space-8);
+}
+
+.zdp-section--spacing-xl {
+  padding-block: var(--zdp-space-12);
+}
+
+.zdp-section--plain {
+  background: transparent;
+}
+
+.zdp-section--panel {
+  background: var(--zdp-color-surface-panel);
+  border-block: 1px solid var(--zdp-color-line-subtle);
+}
+
+.zdp-section--raised {
+  background: var(--zdp-color-surface-raised);
+  border-block: 1px solid var(--zdp-color-line-subtle);
+}
+
+.zdp-page-header {
+  align-items: start;
+  display: grid;
+  gap: var(--zdp-space-4);
+  grid-template-columns: minmax(0, 1fr) auto;
+  min-width: 0;
+}
+
+.zdp-page-header--align-center {
+  align-items: center;
+}
+
+.zdp-page-header__body {
+  display: grid;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-page-header__title {
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-display);
+  line-height: var(--zdp-type-title-line-height);
+  min-width: 0;
+}
+
+.zdp-page-header__title :where(h1, h2, h3) {
+  color: inherit;
+  font: inherit;
+  margin: 0;
+}
+
+.zdp-page-header__summary {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-body-size);
+  line-height: var(--zdp-type-body-line-height);
+  max-inline-size: 42rem;
+  min-width: 0;
+}
+
+.zdp-page-header__summary :where(p) {
+  margin: 0;
+}
+
+.zdp-page-header__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+@media (max-width: 48rem) {
+  .zdp-page-header {
+    grid-template-columns: 1fr;
+  }
+
+  .zdp-page-header__actions {
+    justify-content: flex-start;
+  }
+}
+
+.zdp-card {
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-radius-lg);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-4);
+  min-width: 0;
+}
+
+.zdp-card--panel {
+  background: var(--zdp-color-surface-panel);
+}
+
+.zdp-card--raised {
+  background: var(--zdp-color-surface-raised);
+}
+
+.zdp-card--outline {
+  background: transparent;
+}
+
+.zdp-card--padding-none {
+  padding: 0;
+}
+
+.zdp-card--padding-sm {
+  padding: var(--zdp-space-3);
+}
+
+.zdp-card--padding-md {
+  padding: var(--zdp-space-4);
+}
+
+.zdp-card--padding-lg {
+  padding: var(--zdp-space-6);
+}
+
+  .zdp-card--hover {
+    cursor: pointer;
+    transition: border-color var(--zdp-motion-fast) ease;
+  }
+
+  .zdp-card--hover:hover {
+    border-color: var(--zdp-color-line-strong);
+  }
+
+.zdp-card--hover:focus-visible {
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-line);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-card__header {
+  display: grid;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-card__body {
+  display: grid;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-card__body :where(h1, h2, h3, h4, h5, h6) {
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-display);
+  font-size: var(--zdp-type-title-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-title-line-height);
+  margin: 0;
+}
+
+.zdp-card__body :where(p) {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-body-small-size);
+  line-height: var(--zdp-type-body-small-line-height);
+  margin: 0;
+}
+
+.zdp-card__footer {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+  min-width: 0;
+}
+
+.zdp-card__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-card-header {
+  align-items: start;
+  display: grid;
+  gap: var(--zdp-space-1);
+  grid-template-columns: 1fr auto;
+  min-width: 0;
+}
+
+.zdp-card-header__title {
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-display);
+  font-size: var(--zdp-type-title-size);
+  font-weight: var(--zdp-font-weight-medium);
+  grid-column: 1 / -1;
+  line-height: var(--zdp-type-title-line-height);
+  margin: 0;
+}
+
+.zdp-card-header__subtitle {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-body-small-size);
+  grid-column: 1 / -1;
+  line-height: var(--zdp-type-body-small-line-height);
+  margin: 0;
+}
+
+.zdp-card-header__badge {
+  align-self: center;
+  grid-column: 2;
+  grid-row: 1;
+  justify-self: end;
+  min-width: 0;
+}
+
+.zdp-stack {
+  align-items: stretch;
+  display: grid;
+  gap: var(--zdp-space-4);
+  min-width: 0;
+}
+
+.zdp-stack--gap-xs {
+  gap: var(--zdp-space-1);
+}
+
+.zdp-stack--gap-sm {
+  gap: var(--zdp-space-2);
+}
+
+.zdp-stack--gap-md {
+  gap: var(--zdp-space-4);
+}
+
+.zdp-stack--gap-lg {
+  gap: var(--zdp-space-6);
+}
+
+.zdp-stack--gap-xl {
+  gap: var(--zdp-space-8);
+}
+
+.zdp-stack--align-stretch {
+  align-items: stretch;
+}
+
+.zdp-stack--align-start {
+  align-items: start;
+}
+
+.zdp-stack--align-center {
+  align-items: center;
+}
+
+.zdp-stack--align-end {
+  align-items: end;
+}
+
+.zdp-inline {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-3);
+  justify-content: flex-start;
+  min-width: 0;
+}
+
+.zdp-inline--gap-xs {
+  gap: var(--zdp-space-1);
+}
+
+.zdp-inline--gap-sm {
+  gap: var(--zdp-space-2);
+}
+
+.zdp-inline--gap-md {
+  gap: var(--zdp-space-3);
+}
+
+.zdp-inline--gap-lg {
+  gap: var(--zdp-space-4);
+}
+
+.zdp-inline--gap-xl {
+  gap: var(--zdp-space-6);
+}
+
+.zdp-inline--align-stretch {
+  align-items: stretch;
+}
+
+.zdp-inline--align-start {
+  align-items: flex-start;
+}
+
+.zdp-inline--align-center {
+  align-items: center;
+}
+
+.zdp-inline--align-end {
+  align-items: flex-end;
+}
+
+.zdp-inline--align-baseline {
+  align-items: baseline;
+}
+
+.zdp-inline--justify-start {
+  justify-content: flex-start;
+}
+
+.zdp-inline--justify-center {
+  justify-content: center;
+}
+
+.zdp-inline--justify-end {
+  justify-content: flex-end;
+}
+
+.zdp-inline--justify-between {
+  justify-content: space-between;
+}
+
+.zdp-grid {
+  display: grid;
+  gap: var(--zdp-space-4);
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+  min-width: 0;
+}
+
+.zdp-grid--columns-one {
+  grid-template-columns: 1fr;
+}
+
+.zdp-grid--columns-two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.zdp-grid--columns-three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.zdp-grid--columns-four {
+  grid-template-columns: repeat(4, minmax(0, 1fr));
+}
+
+.zdp-grid--columns-auto {
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
+}
+
+.zdp-grid--gap-sm {
+  gap: var(--zdp-space-2);
+}
+
+.zdp-grid--gap-md {
+  gap: var(--zdp-space-4);
+}
+
+.zdp-grid--gap-lg {
+  gap: var(--zdp-space-6);
+}
+
+.zdp-grid--gap-xl {
+  gap: var(--zdp-space-8);
+}
+
+.zdp-toolbar {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-3);
+  justify-content: space-between;
+  min-width: 0;
+}
+
+.zdp-toolbar--gap-sm {
+  gap: var(--zdp-space-2);
+}
+
+.zdp-toolbar--gap-md {
+  gap: var(--zdp-space-3);
+}
+
+.zdp-toolbar--gap-lg {
+  gap: var(--zdp-space-4);
+}
+
+.zdp-toolbar--align-start {
+  align-items: flex-start;
+}
+
+.zdp-toolbar--align-center {
+  align-items: center;
+}
+
+.zdp-toolbar--align-end {
+  align-items: flex-end;
+}
+
+.zdp-toolbar__main,
+.zdp-toolbar__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-toolbar__main {
+  flex: 1 1 16rem;
+}
+
+.zdp-toolbar__actions {
+  flex: 0 1 auto;
+  justify-content: flex-end;
+}
+
+.zdp-kbd {
+  box-sizing: border-box;
+  display: inline-grid;
+  min-width: 1.45em;
+  min-height: 1.45em;
+  place-items: center;
+  padding: 0 0.35em;
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-radius-sm);
+  background: var(--zdp-color-surface-raised);
+  color: var(--zdp-color-ink-muted);
+  font-family: ui-monospace, "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+  font-size: 0.86em;
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: 1;
+  vertical-align: middle;
+  white-space: nowrap;
+}
+
+.zdp-kbd__sr-label {
+  block-size: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.zdp-kbd--sm {
+  font-size: 0.78em;
+}
+
+.zdp-kbd--md {
+  font-size: 0.86em;
+}
+
+.zdp-inline-code {
+  background: var(--zdp-color-surface-raised);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-radius-sm);
+  box-decoration-break: clone;
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-mono);
+  font-size: 0.92em;
+  line-height: 1.4;
+  padding: 0.05em 0.36em;
+  word-break: break-word;
+}
+
+.zdp-code-block {
+  --zdp-code-block-surface: var(--zdp-color-surface-panel);
+
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: 0;
+  min-width: 0;
+  overflow: hidden;
+}
+
+.zdp-code-block--muted {
+  --zdp-code-block-surface: var(--zdp-color-surface-raised);
+
+  background: var(--zdp-color-surface-raised);
+}
+
+.zdp-code-block__header {
+  align-items: center;
+  border-block-end: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  justify-content: space-between;
+  min-width: 0;
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+}
+
+.zdp-code-block__meta {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-code-block__title {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-body-small-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-body-small-line-height);
+}
+
+.zdp-code-block__language {
+  color: var(--zdp-color-ink-muted);
+  font-family: var(--zdp-font-family-mono);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+}
+
+.zdp-code-block__copy {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-strong);
+  cursor: pointer;
+  font: inherit;
+  font-size: var(--zdp-type-caption-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-caption-line-height);
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-3);
+}
+
+.zdp-code-block__copy:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-code-block__copy:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-code-block__scroller {
+  background: var(--zdp-code-block-surface);
+  color: var(--zdp-color-ink-strong);
+  min-width: 0;
+  overscroll-behavior-inline: contain;
+  overflow-x: auto;
+  padding: var(--zdp-space-4);
+  scrollbar-gutter: stable;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x pan-y;
+}
+
+.zdp-code-block__scroller:focus-visible {
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: calc(var(--zdp-control-focus-outline-offset) * -1);
+}
+
+.zdp-code-block__pre {
+  background: var(--zdp-code-block-surface);
+  font-family: var(--zdp-font-family-mono);
+  font-size: var(--zdp-type-data-size);
+  line-height: var(--zdp-font-line-height-normal);
+  margin: 0;
+  min-width: max-content;
+  tab-size: 2;
+  white-space: pre;
+}
+
+.zdp-code-block__code {
+  background: var(--zdp-code-block-surface);
+  color: inherit;
+  font: inherit;
+}
+
+.zdp-code-block[data-wrap="true"] .zdp-code-block__pre {
+  min-width: 0;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.zdp-code-block__caption {
+  border-block-start: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+  margin: 0;
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+}
+
+.zdp-code-block--sm .zdp-code-block__scroller {
+  padding: var(--zdp-space-3);
+}
+
+.zdp-code-block--sm .zdp-code-block__pre {
+  font-size: var(--zdp-type-caption-size);
+}
+
+.zdp-shortcut-hint {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+  color: var(--zdp-color-ink-muted);
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.zdp-shortcut-hint--sm {
+  font-size: var(--zdp-type-caption-size);
+}
+
+.zdp-shortcut-hint--md {
+  font-size: var(--zdp-type-label-size);
+}
+
+.zdp-shortcut-hint__separator {
+  color: var(--zdp-color-ink-muted);
+  font-size: 0.85em;
+  line-height: 1;
+}
+
+.zdp-tooltip {
+  display: inline-flex;
+  min-width: 0;
+  position: relative;
+  vertical-align: middle;
+}
+
+.zdp-tooltip__trigger {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.zdp-tooltip__content,
+.zdp-share-action__tooltip {
+  background: var(--zdp-color-ink-strong);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  bottom: var(--zdp-tooltip-bottom, auto);
+  color: var(--zdp-color-surface-panel);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-caption-size);
+  left: var(--zdp-tooltip-left, auto);
+  line-height: var(--zdp-type-caption-line-height);
+  opacity: 0;
+  padding: var(--zdp-space-1) var(--zdp-space-2);
+  pointer-events: none;
+  position: absolute;
+  right: var(--zdp-tooltip-right, auto);
+  top: var(--zdp-tooltip-top, auto);
+  transform: var(--zdp-tooltip-transform, none);
+  white-space: nowrap;
+  z-index: 30;
+}
+
+.zdp-tooltip--top {
+  --zdp-tooltip-bottom: calc(100% + var(--zdp-space-2));
+  --zdp-tooltip-left: 0;
+  --zdp-tooltip-right: auto;
+  --zdp-tooltip-top: auto;
+  --zdp-tooltip-transform: none;
+}
+
+.zdp-tooltip--top .zdp-tooltip__content {
+  bottom: var(--zdp-tooltip-bottom);
+  left: var(--zdp-tooltip-left);
+}
+
+.zdp-tooltip--right {
+  --zdp-tooltip-bottom: auto;
+  --zdp-tooltip-left: calc(100% + var(--zdp-space-2));
+  --zdp-tooltip-right: auto;
+  --zdp-tooltip-top: 0;
+  --zdp-tooltip-transform: none;
+}
+
+.zdp-tooltip--right .zdp-tooltip__content {
+  left: var(--zdp-tooltip-left);
+  top: var(--zdp-tooltip-top);
+}
+
+.zdp-tooltip--bottom {
+  --zdp-tooltip-bottom: auto;
+  --zdp-tooltip-left: 0;
+  --zdp-tooltip-right: auto;
+  --zdp-tooltip-top: calc(100% + var(--zdp-space-2));
+  --zdp-tooltip-transform: none;
+}
+
+.zdp-tooltip--bottom .zdp-tooltip__content {
+  left: var(--zdp-tooltip-left);
+  top: var(--zdp-tooltip-top);
+}
+
+.zdp-tooltip--left {
+  --zdp-tooltip-bottom: auto;
+  --zdp-tooltip-left: auto;
+  --zdp-tooltip-right: calc(100% + var(--zdp-space-2));
+  --zdp-tooltip-top: 0;
+  --zdp-tooltip-transform: none;
+}
+
+.zdp-tooltip--left .zdp-tooltip__content {
+  right: var(--zdp-tooltip-right);
+  top: var(--zdp-tooltip-top);
+}
+
+.zdp-tooltip:hover .zdp-tooltip__content,
+.zdp-tooltip:focus-within .zdp-tooltip__content {
+  opacity: 1;
+}
+
+.zdp-tooltip[data-disabled="true"] {
+  cursor: default;
+}
+
+.zdp-disclosure {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  min-width: 0;
+}
+
+.zdp-disclosure__heading {
+  margin: 0;
+  min-width: 0;
+}
+
+.zdp-disclosure__trigger {
+  align-items: center;
+  background: transparent;
+  border: 0;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  font-weight: var(--zdp-font-weight-medium);
+  gap: var(--zdp-space-3);
+  grid-template-columns: minmax(0, 1fr) auto;
+  line-height: var(--zdp-type-control-line-height);
+  min-block-size: var(--zdp-control-height-md);
+  min-width: 0;
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+  text-align: left;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  width: 100%;
+}
+
+.zdp-disclosure__trigger:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-disclosure__trigger:focus-visible {
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-disclosure__trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-disclosure__title {
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-disclosure__mark {
+  align-items: center;
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-muted);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--zdp-type-caption-size);
+  inline-size: var(--zdp-control-glyph-md);
+  justify-content: center;
+  line-height: 1;
+  min-block-size: var(--zdp-control-glyph-md);
+}
+
+.zdp-disclosure__panel {
+  border-block-start: 1px solid var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  gap: var(--zdp-space-2);
+  line-height: var(--zdp-type-body-line-height);
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  padding: var(--zdp-space-3);
+}
+
+.zdp-disclosure__panel * {
+  margin-block: 0;
+}
+
+.zdp-accordion {
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-accordion__item {
+  min-width: 0;
+}
+
+.zdp-segmented-control {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: inline-flex;
+  flex-wrap: wrap;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-1);
+  max-width: 100%;
+  min-width: 0;
+  padding: var(--zdp-space-1);
+}
+
+.zdp-segmented-control__item {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-medium);
+  justify-content: center;
+  line-height: var(--zdp-type-control-line-height);
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  text-align: center;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-segmented-control--sm .zdp-segmented-control__item {
+  font-size: var(--zdp-font-size-sm);
+  min-block-size: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-2);
+}
+
+.zdp-segmented-control--md .zdp-segmented-control__item {
+  font-size: var(--zdp-type-control-size);
+  min-block-size: var(--zdp-control-height-md);
+  padding: 0 var(--zdp-space-3);
+}
+
+.zdp-segmented-control__item:hover:not(:disabled):not([aria-checked="true"]) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-segmented-control__item:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-segmented-control__item--selected,
+.zdp-segmented-control__item[aria-checked="true"] {
+  background: var(--zdp-color-accent-primary-soft);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-segmented-control__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-popover,
+.zdp-menu {
+  align-self: start;
+  display: inline-flex;
+  justify-self: start;
+  min-width: 0;
+  position: relative;
+  vertical-align: middle;
+}
+
+.zdp-popover__trigger {
+  display: inline-flex;
+  min-width: 0;
+}
+
+.zdp-popover__panel,
+.zdp-menu__panel {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  inline-size: max-content;
+  max-block-size: min(24rem, calc(100vh - var(--zdp-space-8)));
+  max-inline-size: min(22rem, calc(100vw - var(--zdp-space-6)));
+  min-inline-size: 12rem;
+  overflow: auto;
+  position: absolute;
+  z-index: 40;
+}
+
+.zdp-popover__panel {
+  gap: var(--zdp-space-3);
+  padding: var(--zdp-space-3);
+}
+
+.zdp-menu__panel {
+  gap: var(--zdp-space-1);
+  max-inline-size: min(18rem, calc(100vw - var(--zdp-space-6)));
+  padding: var(--zdp-space-1);
+}
+
+.zdp-popover__panel:focus-visible,
+.zdp-menu__panel:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-popover--top .zdp-popover__panel,
+.zdp-menu--top .zdp-menu__panel {
+  bottom: calc(100% + var(--zdp-space-2));
+}
+
+.zdp-popover--right .zdp-popover__panel,
+.zdp-menu--right .zdp-menu__panel {
+  left: calc(100% + var(--zdp-space-2));
+  top: 0;
+}
+
+.zdp-popover--bottom .zdp-popover__panel,
+.zdp-menu--bottom .zdp-menu__panel {
+  top: calc(100% + var(--zdp-space-2));
+}
+
+.zdp-popover--left .zdp-popover__panel,
+.zdp-menu--left .zdp-menu__panel {
+  right: calc(100% + var(--zdp-space-2));
+  top: 0;
+}
+
+.zdp-popover--align-start .zdp-popover__panel,
+.zdp-menu--align-start .zdp-menu__panel {
+  left: 0;
+}
+
+.zdp-popover--align-center .zdp-popover__panel,
+.zdp-menu--align-center .zdp-menu__panel {
+  left: 50%;
+  translate: -50% 0;
+}
+
+.zdp-popover--align-end .zdp-popover__panel,
+.zdp-menu--align-end .zdp-menu__panel {
+  right: 0;
+}
+
+.zdp-popover--right.zdp-popover--align-end .zdp-popover__panel,
+.zdp-popover--left.zdp-popover--align-end .zdp-popover__panel,
+.zdp-menu--right.zdp-menu--align-end .zdp-menu__panel,
+.zdp-menu--left.zdp-menu--align-end .zdp-menu__panel {
+  bottom: 0;
+  top: auto;
+}
+
+.zdp-popover--right.zdp-popover--align-center .zdp-popover__panel,
+.zdp-popover--left.zdp-popover--align-center .zdp-popover__panel,
+.zdp-menu--right.zdp-menu--align-center .zdp-menu__panel,
+.zdp-menu--left.zdp-menu--align-center .zdp-menu__panel {
+  top: 50%;
+  translate: 0 -50%;
+}
+
+.zdp-menu__trigger {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  font-weight: var(--zdp-font-weight-medium);
+  gap: var(--zdp-space-2);
+  justify-content: center;
+  line-height: var(--zdp-type-control-line-height);
+  min-height: var(--zdp-control-height-md);
+  min-width: 0;
+  padding: 0 var(--zdp-space-3);
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-menu__trigger:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-menu__trigger:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-menu__trigger-label {
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-menu__trigger-mark {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  line-height: 1;
+}
+
+.zdp-menu__trigger-mark::before {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  content: '';
+  display: inline-block;
+  height: 0;
+  width: 0;
+}
+
+.zdp-menu__item {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  gap: var(--zdp-space-2);
+  line-height: var(--zdp-type-control-line-height);
+  min-height: var(--zdp-control-height-sm);
+  min-width: 0;
+  padding: var(--zdp-space-1) var(--zdp-space-2);
+  text-align: left;
+  text-decoration-line: none;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-menu__item:hover:not(:disabled):not([aria-disabled="true"]),
+.zdp-menu__item:focus-visible {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+  outline: 0;
+}
+
+.zdp-menu__item--danger {
+  color: var(--zdp-color-accent-danger);
+}
+
+.zdp-menu__item:disabled,
+.zdp-menu__item[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-menu__separator {
+  border-block-start: 1px solid var(--zdp-color-line-subtle);
+  display: block;
+  margin: var(--zdp-space-1) 0;
+}
+
+.zdp-share-action .zdp-share-action__tooltip {
+  bottom: calc(100% + var(--zdp-space-2));
+  left: 0;
+  right: auto;
+  top: auto;
+  transform: none;
+}
+
+.zdp-share-dock--side .zdp-share-action__tooltip,
+.zdp-share-dock--rail .zdp-share-action__tooltip {
+  bottom: auto;
+  left: auto;
+  right: calc(100% + var(--zdp-space-2));
+  top: 0;
+  transform: none;
+}
+
+.zdp-share-action:hover .zdp-share-action__tooltip,
+.zdp-share-action:focus-visible .zdp-share-action__tooltip {
+  opacity: 1;
+}
+
+.zdp-command-field-shell {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--zdp-space-2);
+  inline-size: 100%;
+  min-width: 0;
+}
+
+.zdp-command-field-shell--sm {
+  gap: var(--zdp-space-1);
+}
+
+.zdp-command-field-shell--md {
+  gap: var(--zdp-space-2);
+}
+
+.zdp-command-field__label {
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-label-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-label-line-height);
+}
+
+.zdp-command-field__label--hidden {
+  block-size: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.zdp-command-field {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-radius-md);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  display: flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  gap: var(--zdp-space-2);
+  inline-size: 100%;
+  min-width: 0;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-command-field--sm {
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-2);
+}
+
+.zdp-command-field--md {
+  min-height: var(--zdp-control-height-md);
+  padding: 0 var(--zdp-space-2) 0 var(--zdp-space-3);
+}
+
+.zdp-command-field:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-command-field:focus-within {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-command-field-shell[data-invalid="true"] .zdp-command-field {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-command-field-shell[data-disabled="true"] .zdp-command-field {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-command-field__input {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  flex: 1 1 auto;
+  font: inherit;
+  min-height: calc(var(--zdp-control-height-md) - 2px);
+  min-width: 0;
+  padding: 0;
+}
+
+.zdp-command-field--sm .zdp-command-field__input {
+  min-height: calc(var(--zdp-control-height-sm) - 2px);
+}
+
+.zdp-command-field__input::placeholder {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-command-field__input:focus {
+  outline: 0;
+}
+
+.zdp-command-field__input::-webkit-calendar-picker-indicator {
+  display: none !important;
+}
+
+.zdp-command-field__shortcut {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  pointer-events: none;
+}
+
+.zdp-combobox {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--zdp-space-2);
+  inline-size: 100%;
+  min-width: 0;
+  position: relative;
+}
+
+.zdp-combobox__label {
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-label-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-label-line-height);
+}
+
+.zdp-combobox__label--hidden {
+  block-size: 1px;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  inline-size: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+}
+
+.zdp-combobox__control {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  display: flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  gap: var(--zdp-space-1);
+  inline-size: 100%;
+  min-width: 0;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-combobox--sm .zdp-combobox__control {
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-1) 0 var(--zdp-space-2);
+}
+
+.zdp-combobox--md .zdp-combobox__control {
+  min-height: var(--zdp-control-height-md);
+  padding: 0 var(--zdp-space-1) 0 var(--zdp-space-3);
+}
+
+.zdp-combobox__control:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-combobox__control:focus-within {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-combobox[data-invalid="true"] .zdp-combobox__control {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-combobox[data-disabled="true"] .zdp-combobox__control {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-combobox__input {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  flex: 1 1 auto;
+  font: inherit;
+  min-height: calc(var(--zdp-control-height-md) - 2px);
+  min-width: 0;
+  padding: 0;
+}
+
+.zdp-combobox--sm .zdp-combobox__input {
+  min-height: calc(var(--zdp-control-height-sm) - 2px);
+}
+
+.zdp-combobox__input::placeholder {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-combobox__input:focus {
+  outline: 0;
+}
+
+.zdp-combobox__toggle {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  min-height: calc(var(--zdp-control-height-sm) - 2px);
+  min-width: calc(var(--zdp-control-height-sm) - 2px);
+  padding: 0;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-combobox__toggle:hover:not(:disabled),
+.zdp-combobox__toggle:focus-visible {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+  outline: 0;
+}
+
+.zdp-combobox__toggle:disabled {
+  cursor: not-allowed;
+}
+
+.zdp-combobox__mark {
+  align-items: center;
+  display: inline-flex;
+  justify-content: center;
+  line-height: 1;
+}
+
+.zdp-combobox__mark::before {
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 4px solid currentColor;
+  content: '';
+  display: inline-block;
+  height: 0;
+  width: 0;
+}
+
+.zdp-combobox__panel {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  inline-size: 100%;
+  left: 0;
+  max-block-size: min(18rem, calc(100vh - var(--zdp-space-8)));
+  min-width: 0;
+  overflow: auto;
+  padding: var(--zdp-space-1);
+  position: absolute;
+  top: calc(100% + var(--zdp-space-2));
+  z-index: 40;
+}
+
+.zdp-combobox__listbox {
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-combobox__option {
+  align-items: start;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  gap: var(--zdp-space-1);
+  line-height: var(--zdp-type-control-line-height);
+  min-height: var(--zdp-control-height-sm);
+  min-width: 0;
+  padding: var(--zdp-space-1) var(--zdp-space-2);
+  text-align: left;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-combobox__option:hover:not(:disabled),
+.zdp-combobox__option[data-active="true"] {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-combobox__option[data-selected="true"] {
+  background: var(--zdp-color-focus-surface);
+  border-color: var(--zdp-color-focus-line);
+  color: var(--zdp-color-focus-text);
+}
+
+.zdp-combobox__option:disabled,
+.zdp-combobox__option[aria-disabled="true"] {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-combobox__option-label {
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-combobox__option-description,
+.zdp-combobox__empty {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-body-small-size);
+  line-height: var(--zdp-type-body-small-line-height);
+}
+
+.zdp-combobox__empty {
+  padding: var(--zdp-space-2);
+}
+
+.zdp-divider {
+  border: 0;
+  box-sizing: border-box;
+  min-width: 0;
+}
+
+.zdp-divider--horizontal {
+  border-block-start: 1px solid var(--zdp-color-line-subtle);
+  inline-size: 100%;
+}
+
+.zdp-divider--vertical {
+  align-self: stretch;
+  border-inline-start: 1px solid var(--zdp-color-line-subtle);
+  min-block-size: var(--zdp-control-height-md);
+}
+
+.zdp-divider--subtle {
+  border-color: var(--zdp-color-line-subtle);
+}
+
+.zdp-divider--strong {
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-icon {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  line-height: 1;
+  text-align: center;
+}
+
+.zdp-icon--sm {
+  font-size: var(--zdp-control-glyph-sm);
+  height: var(--zdp-control-glyph-sm);
+  width: var(--zdp-control-glyph-sm);
+}
+
+.zdp-icon--md {
+  font-size: var(--zdp-control-glyph-md);
+  height: var(--zdp-control-glyph-md);
+  width: var(--zdp-control-glyph-md);
+}
+
+.zdp-icon svg {
+  display: block;
+  flex: 0 0 auto;
+  height: 100%;
+  width: 100%;
+}
+
+.zdp-icon-button {
+  align-items: center;
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-regular);
+  justify-content: center;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-icon-button--sm {
+  height: var(--zdp-control-icon-sm);
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-icon-button--md {
+  height: var(--zdp-control-icon-md);
+  width: var(--zdp-control-icon-md);
+}
+
+.zdp-icon-button--ghost {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-normal);
+}
+
+.zdp-icon-button--ghost:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+[data-zdp-theme="dark"] .zdp-icon-button--ghost {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-muted);
+}
+
+[data-zdp-theme="dark"] .zdp-icon-button--ghost:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-icon-button--ghost:active:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-icon-button--solid {
+  background: var(--zdp-color-accent-primary);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-icon-button--solid:hover:not(:disabled) {
+  background: var(--zdp-color-accent-primary-strong);
+  border-color: var(--zdp-color-accent-primary-strong);
+}
+
+.zdp-icon-button--solid:active:not(:disabled) {
+  background: var(--zdp-color-accent-primary-strong);
+  border-color: var(--zdp-color-accent-primary-strong);
+}
+
+[data-zdp-theme="dark"] .zdp-icon-button--solid {
+  color: var(--zdp-color-ink-inverse);
+}
+
+.zdp-icon-button:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-icon-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-icon-button__glyph {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  line-height: 1;
+  text-align: center;
+}
+
+.zdp-icon-button__glyph svg {
+  display: block;
+  flex: 0 0 auto;
+  height: 100%;
+  width: 100%;
+}
+
+.zdp-theme-toggle {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: inline-grid;
+  flex: 0 0 auto;
+  font-family: var(--zdp-font-family-sans);
+  justify-items: center;
+  line-height: 1;
+  padding: 0;
+  place-items: center;
+  position: relative;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  vertical-align: middle;
+}
+
+.zdp-theme-toggle--sm {
+  height: var(--zdp-control-icon-sm);
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-theme-toggle--md {
+  height: var(--zdp-control-icon-md);
+  width: var(--zdp-control-icon-md);
+}
+
+.zdp-theme-toggle:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-theme-toggle:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-theme-toggle:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-theme-toggle__icon {
+  color: currentColor;
+  display: grid;
+  grid-area: 1 / 1;
+  height: var(--zdp-control-glyph-md);
+  place-items: center;
+  transition: opacity var(--zdp-motion-fast) ease;
+  width: var(--zdp-control-glyph-md);
+}
+
+.zdp-theme-toggle--sm .zdp-theme-toggle__icon {
+  height: var(--zdp-control-glyph-sm);
+  width: var(--zdp-control-glyph-sm);
+}
+
+.zdp-theme-toggle__icon svg {
+  display: block;
+  fill: none;
+  height: 100%;
+  stroke: currentColor;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  stroke-width: 1.8;
+  width: 100%;
+}
+
+.zdp-theme-toggle__icon--moon svg {
+  fill: currentColor;
+  stroke: currentColor;
+  transform: translate(0.08rem, -0.04rem);
+}
+
+.zdp-theme-toggle[data-zdp-theme-state="light"] .zdp-theme-toggle__icon--moon,
+.zdp-theme-toggle[data-zdp-theme-state="dark"] .zdp-theme-toggle__icon--sun {
+  opacity: 0;
+}
+
+.zdp-theme-toggle[data-zdp-theme-state="dark"] {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-locale-switcher {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-1);
+  max-width: 100%;
+  min-width: 0;
+  padding: var(--zdp-space-1);
+}
+
+.zdp-locale-switcher__item {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  display: inline-grid;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-semibold);
+  justify-content: center;
+  letter-spacing: 0;
+  line-height: 1;
+  min-width: 0;
+  padding: 0 var(--zdp-space-2);
+  place-items: center;
+  text-align: center;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-locale-switcher--sm .zdp-locale-switcher__item {
+  height: var(--zdp-control-icon-sm);
+  min-width: calc(var(--zdp-control-icon-sm) + var(--zdp-space-2));
+}
+
+.zdp-locale-switcher--md .zdp-locale-switcher__item {
+  height: var(--zdp-control-icon-md);
+  min-width: calc(var(--zdp-control-icon-md) + var(--zdp-space-2));
+}
+
+.zdp-locale-switcher__item:hover:not(:disabled):not([aria-checked="true"]) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-locale-switcher__item:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-locale-switcher__item--selected,
+.zdp-locale-switcher__item[aria-checked="true"] {
+  background: var(--zdp-color-accent-primary-soft);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-locale-switcher__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-locale-switcher__label {
+  display: inline-block;
+  line-height: 1;
+  white-space: nowrap;
+}
+
+.zdp-text-scale-control {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-1);
+  max-width: 100%;
+  min-width: 0;
+  padding: var(--zdp-space-1);
+}
+
+.zdp-text-scale-control__item {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  display: inline-grid;
+  font-family: var(--zdp-font-family-sans);
+  font-weight: var(--zdp-font-weight-medium);
+  justify-content: center;
+  line-height: 1;
+  min-width: 0;
+  padding: 0;
+  place-items: center;
+  text-align: center;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-text-scale-control--sm .zdp-text-scale-control__item {
+  height: var(--zdp-control-icon-sm);
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-text-scale-control--md .zdp-text-scale-control__item {
+  height: var(--zdp-control-icon-md);
+  width: var(--zdp-control-icon-md);
+}
+
+.zdp-text-scale-control__item:hover:not(:disabled):not([aria-checked="true"]) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-text-scale-control__item:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-text-scale-control__item--selected,
+.zdp-text-scale-control__item[aria-checked="true"] {
+  background: var(--zdp-color-accent-primary-soft);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-text-scale-control__item:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-text-scale-control__sample {
+  display: inline-block;
+  line-height: 1;
+}
+
+.zdp-text-scale-control__item[data-zdp-text-scale-option-value="base"] .zdp-text-scale-control__sample {
+  font-size: var(--zdp-font-size-sm);
+}
+
+.zdp-text-scale-control__item[data-zdp-text-scale-option-value="large"] .zdp-text-scale-control__sample {
+  font-size: var(--zdp-font-size-md);
+}
+
+.zdp-text-scale-control__item[data-zdp-text-scale-option-value="larger"] .zdp-text-scale-control__sample {
+  font-size: var(--zdp-font-size-lg);
+}
+
+.zdp-field {
+  display: grid;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-field--sm {
+  gap: var(--zdp-space-1);
+}
+
+.zdp-field--md {
+  gap: var(--zdp-space-2);
+}
+
+.zdp-field[data-disabled="true"] .zdp-label,
+.zdp-field[data-disabled="true"] .zdp-help-text {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-label {
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-label-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-label-line-height);
+}
+
+.zdp-label__required {
+  color: var(--zdp-color-accent-danger);
+  margin-left: var(--zdp-space-1);
+}
+
+.zdp-label__required-text {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.zdp-help-text,
+.zdp-error-text {
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+  margin: 0;
+}
+
+.zdp-help-text {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-error-text {
+  color: var(--zdp-color-accent-danger);
+}
+
+.zdp-input,
+.zdp-textarea,
+.zdp-select {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-strong);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  width: 100%;
+}
+
+.zdp-input,
+.zdp-select {
+  line-height: var(--zdp-type-control-line-height);
+  min-height: var(--zdp-control-height-md);
+  padding: 0 var(--zdp-space-3);
+}
+
+.zdp-textarea {
+  line-height: var(--zdp-font-line-height-normal);
+  min-height: 7rem;
+  padding: var(--zdp-space-3);
+  resize: vertical;
+}
+
+.zdp-input::placeholder,
+.zdp-textarea::placeholder {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-input:hover:not(:disabled),
+.zdp-textarea:hover:not(:disabled),
+.zdp-select:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-input:focus-visible,
+.zdp-textarea:focus-visible,
+.zdp-select:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-input[aria-invalid="true"],
+.zdp-textarea[aria-invalid="true"],
+.zdp-select[aria-invalid="true"] {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-input[readonly],
+.zdp-textarea[readonly] {
+  background: var(--zdp-color-surface-raised);
+  color: var(--zdp-color-ink-normal);
+}
+
+.zdp-input[readonly]:hover,
+.zdp-textarea[readonly]:hover {
+  background: var(--zdp-color-surface-raised);
+}
+
+.zdp-input:disabled,
+.zdp-textarea:disabled,
+.zdp-select:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-choice,
+.zdp-switch {
+  align-items: start;
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-3);
+  line-height: var(--zdp-type-body-small-line-height);
+  min-width: 0;
+}
+
+.zdp-choice {
+  grid-template-columns: var(--zdp-control-choice-size) minmax(0, 1fr);
+}
+
+.zdp-switch {
+  grid-template-columns: var(--zdp-control-switch-width) minmax(0, 1fr);
+}
+
+.zdp-choice__input,
+.zdp-switch__input {
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  position: absolute;
+  width: 1px;
+}
+
+.zdp-choice__mark,
+.zdp-switch__track {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  box-sizing: border-box;
+  margin-top: var(--zdp-control-switch-thumb-offset);
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-choice__mark {
+  align-items: center;
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-strong);
+  display: inline-flex;
+  height: var(--zdp-control-choice-size);
+  justify-content: center;
+  width: var(--zdp-control-choice-size);
+}
+
+.zdp-choice--radio .zdp-choice__mark {
+  border-radius: 50%;
+}
+
+.zdp-choice--checkbox .zdp-choice__mark::after {
+  border-bottom: 2px solid currentcolor;
+  border-left: 2px solid currentcolor;
+  content: "";
+  display: none;
+  height: 0.3rem;
+  margin-bottom: 0.0625rem;
+  rotate: -45deg;
+  width: 0.6rem;
+}
+
+.zdp-choice--radio .zdp-choice__mark::after {
+  background: currentcolor;
+  border-radius: 50%;
+  content: "";
+  display: none;
+  height: var(--zdp-control-choice-indicator-size);
+  width: var(--zdp-control-choice-indicator-size);
+}
+
+.zdp-switch__track {
+  border-radius: var(--zdp-control-radius);
+  display: inline-flex;
+  height: var(--zdp-control-switch-height);
+  position: relative;
+  width: var(--zdp-control-switch-width);
+}
+
+.zdp-switch__track::after {
+  background: var(--zdp-color-ink-muted);
+  border-radius: var(--zdp-radius-sm);
+  content: "";
+  height: var(--zdp-control-switch-thumb-size);
+  left: var(--zdp-control-switch-thumb-offset);
+  position: absolute;
+  top: var(--zdp-control-switch-thumb-offset);
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    left var(--zdp-motion-fast) ease;
+  width: var(--zdp-control-switch-thumb-size);
+}
+
+.zdp-choice:hover .zdp-choice__input:not(:checked):not(:disabled) + .zdp-choice__mark,
+.zdp-switch:hover .zdp-switch__input:not(:checked):not(:disabled) + .zdp-switch__track {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-choice__input:checked + .zdp-choice__mark,
+.zdp-switch__input:checked + .zdp-switch__track {
+  background: var(--zdp-color-accent-primary);
+  border-color: var(--zdp-color-accent-primary-strong);
+}
+
+[data-zdp-theme="dark"] .zdp-choice__input:checked + .zdp-choice__mark {
+  color: var(--zdp-color-ink-inverse);
+}
+
+.zdp-choice__input:checked + .zdp-choice__mark::after {
+  display: block;
+}
+
+.zdp-switch__input:checked + .zdp-switch__track::after {
+  background: var(--zdp-color-ink-inverse);
+  left: var(--zdp-control-switch-thumb-checked-offset);
+}
+
+.zdp-choice__input:focus-visible + .zdp-choice__mark,
+.zdp-switch__input:focus-visible + .zdp-switch__track {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-choice__input[aria-invalid="true"] + .zdp-choice__mark,
+.zdp-choice[data-invalid="true"] .zdp-choice__mark,
+.zdp-switch__input[aria-invalid="true"] + .zdp-switch__track {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-choice:has(.zdp-choice__input:disabled),
+.zdp-switch:has(.zdp-switch__input:disabled) {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-choice__body,
+.zdp-switch__body {
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-choice__label,
+.zdp-switch__label {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-body-small-size);
+  line-height: var(--zdp-type-body-small-line-height);
+}
+
+.zdp-callout {
+  align-items: start;
+  background: var(--zdp-color-surface-panel);
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-3);
+  grid-template-columns: var(--zdp-space-2) minmax(0, 1fr);
+  line-height: var(--zdp-type-body-small-line-height);
+  min-width: 0;
+  padding: var(--zdp-space-4);
+}
+
+.zdp-callout__mark {
+  align-self: start;
+  background: var(--zdp-color-line-strong);
+  border-radius: var(--zdp-radius-sm);
+  display: block;
+  height: calc(var(--zdp-type-body-small-size) * var(--zdp-type-body-small-line-height));
+  width: var(--zdp-space-2);
+}
+
+.zdp-callout__body {
+  display: grid;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-callout__body * {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.zdp-callout__body strong {
+  color: var(--zdp-color-ink-strong);
+  font-weight: var(--zdp-font-weight-semibold);
+}
+
+.zdp-callout--info .zdp-callout__mark {
+  background: var(--zdp-color-accent-primary);
+}
+
+.zdp-callout--success .zdp-callout__mark {
+  background: var(--zdp-color-accent-success);
+}
+
+.zdp-callout--warning .zdp-callout__mark {
+  background: var(--zdp-color-accent-warning);
+}
+
+.zdp-callout--danger {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-callout--danger .zdp-callout__mark {
+  background: var(--zdp-color-accent-danger);
+}
+
+.zdp-toast {
+  align-items: start;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-3);
+  grid-template-columns: var(--zdp-space-2) minmax(0, 1fr) auto;
+  inline-size: min(100%, 28rem);
+  line-height: var(--zdp-type-body-small-line-height);
+  min-width: 0;
+  padding: var(--zdp-space-4);
+}
+
+.zdp-toast__mark {
+  align-self: stretch;
+  background: var(--zdp-color-line-strong);
+  border-radius: var(--zdp-radius-sm);
+  display: block;
+  min-block-size: calc(var(--zdp-type-body-small-size) * var(--zdp-type-body-small-line-height));
+  width: var(--zdp-space-2);
+}
+
+.zdp-toast__body {
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-toast__body * {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.zdp-toast__body strong,
+.zdp-toast__title {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-body-small-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-body-small-line-height);
+}
+
+.zdp-toast__body p,
+.zdp-toast__message {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-toast__action {
+  align-items: center;
+  align-self: start;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-strong);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-caption-size);
+  font-weight: var(--zdp-font-weight-medium);
+  justify-content: center;
+  line-height: var(--zdp-type-caption-line-height);
+  margin-block-start: var(--zdp-space-3);
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-3);
+  text-decoration-line: none;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-toast__action:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+}
+
+.zdp-toast__action:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-toast__close {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-title-size);
+  height: var(--zdp-control-height-sm);
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  width: var(--zdp-control-height-sm);
+}
+
+.zdp-toast__close:hover {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-toast__close:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-toast--info .zdp-toast__mark {
+  background: var(--zdp-color-accent-primary);
+}
+
+.zdp-toast--success .zdp-toast__mark {
+  background: var(--zdp-color-accent-success);
+}
+
+.zdp-toast--warning .zdp-toast__mark {
+  background: var(--zdp-color-accent-warning);
+}
+
+.zdp-toast--danger {
+  border-color: var(--zdp-color-accent-danger);
+}
+
+.zdp-toast--danger .zdp-toast__mark {
+  background: var(--zdp-color-accent-danger);
+}
+
+.zdp-status-toast {
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--zdp-space-3);
+  inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
+  max-inline-size: 100%;
+  pointer-events: none;
+  z-index: 50;
+}
+
+.zdp-status-toast .zdp-toast {
+  pointer-events: auto;
+}
+
+.zdp-status-toast--inline {
+  inline-size: min(100%, 28rem);
+  position: static;
+}
+
+.zdp-status-toast--top-start,
+.zdp-status-toast--top-end,
+.zdp-status-toast--bottom-start,
+.zdp-status-toast--bottom-end {
+  position: fixed;
+}
+
+.zdp-status-toast--top-start {
+  left: var(--zdp-space-4);
+  top: var(--zdp-space-4);
+}
+
+.zdp-status-toast--top-end {
+  right: var(--zdp-space-4);
+  top: var(--zdp-space-4);
+}
+
+.zdp-status-toast--bottom-start {
+  bottom: var(--zdp-space-4);
+  left: var(--zdp-space-4);
+}
+
+.zdp-status-toast--bottom-end {
+  bottom: var(--zdp-space-4);
+  right: var(--zdp-space-4);
+}
+
+@media (max-width: 42rem) {
+  .zdp-status-toast--top-start,
+  .zdp-status-toast--top-end,
+  .zdp-status-toast--bottom-start,
+  .zdp-status-toast--bottom-end {
+    left: var(--zdp-space-3);
+    right: var(--zdp-space-3);
+  }
+}
+
+.zdp-progress {
+  --zdp-progress-accent: var(--zdp-color-accent-primary);
+  --zdp-progress-value: 0%;
+
+  box-sizing: border-box;
+  display: grid;
+  inline-size: min(100%, 28rem);
+  min-width: 0;
+}
+
+.zdp-progress__track {
+  background: var(--zdp-color-surface-raised);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  display: block;
+  inline-size: 100%;
+  overflow: hidden;
+}
+
+.zdp-progress--sm .zdp-progress__track {
+  block-size: var(--zdp-space-2);
+}
+
+.zdp-progress--md .zdp-progress__track {
+  block-size: var(--zdp-space-3);
+}
+
+.zdp-progress__bar {
+  background: var(--zdp-progress-accent);
+  block-size: 100%;
+  display: block;
+  inline-size: var(--zdp-progress-value);
+  min-inline-size: 0;
+  transition: inline-size var(--zdp-motion-fast) ease;
+}
+
+.zdp-progress[data-indeterminate="true"] .zdp-progress__bar {
+  inline-size: 100%;
+  opacity: 0.64;
+}
+
+.zdp-progress--neutral {
+  --zdp-progress-accent: var(--zdp-color-line-strong);
+}
+
+.zdp-progress--primary {
+  --zdp-progress-accent: var(--zdp-color-accent-primary);
+}
+
+.zdp-progress--success {
+  --zdp-progress-accent: var(--zdp-color-accent-success);
+}
+
+.zdp-progress--warning {
+  --zdp-progress-accent: var(--zdp-color-accent-warning);
+}
+
+.zdp-progress--danger {
+  --zdp-progress-accent: var(--zdp-color-accent-danger);
+}
+
+.zdp-spinner {
+  --zdp-spinner-accent: var(--zdp-color-accent-primary);
+
+  align-items: center;
+  box-sizing: border-box;
+  color: var(--zdp-spinner-accent);
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+.zdp-spinner__mark {
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-block-start-color: currentColor;
+  border-inline-end-color: currentColor;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: block;
+}
+
+.zdp-spinner--sm .zdp-spinner__mark {
+  block-size: var(--zdp-control-glyph-sm);
+  inline-size: var(--zdp-control-glyph-sm);
+}
+
+.zdp-spinner--md .zdp-spinner__mark {
+  block-size: var(--zdp-control-glyph-md);
+  inline-size: var(--zdp-control-glyph-md);
+}
+
+.zdp-spinner--lg .zdp-spinner__mark {
+  block-size: var(--zdp-control-height-sm);
+  inline-size: var(--zdp-control-height-sm);
+}
+
+.zdp-spinner--neutral {
+  --zdp-spinner-accent: var(--zdp-color-line-strong);
+}
+
+.zdp-spinner--primary {
+  --zdp-spinner-accent: var(--zdp-color-accent-primary-strong);
+}
+
+.zdp-spinner--success {
+  --zdp-spinner-accent: var(--zdp-color-accent-success);
+}
+
+.zdp-spinner--warning {
+  --zdp-spinner-accent: var(--zdp-color-accent-warning);
+}
+
+.zdp-spinner--danger {
+  --zdp-spinner-accent: var(--zdp-color-accent-danger);
+}
+
+.zdp-skeleton {
+  --zdp-skeleton-fill: var(--zdp-color-surface-raised);
+  --zdp-skeleton-line: var(--zdp-color-line-subtle);
+
+  box-sizing: border-box;
+  display: grid;
+  gap: var(--zdp-space-2);
+  inline-size: 100%;
+  max-inline-size: 100%;
+  min-width: 0;
+}
+
+.zdp-skeleton__line {
+  background: var(--zdp-skeleton-fill);
+  border: var(--zdp-control-border-width) solid var(--zdp-skeleton-line);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  display: block;
+  inline-size: 100%;
+  min-width: 0;
+}
+
+.zdp-skeleton--text .zdp-skeleton__line {
+  block-size: calc(var(--zdp-type-body-small-size) * var(--zdp-type-body-small-line-height));
+}
+
+.zdp-skeleton--text .zdp-skeleton__line--last {
+  inline-size: 72%;
+}
+
+.zdp-skeleton--block .zdp-skeleton__line {
+  block-size: min(9rem, 28vw);
+}
+
+.zdp-skeleton--avatar {
+  inline-size: var(--zdp-control-height-md);
+}
+
+.zdp-skeleton--avatar .zdp-skeleton__line {
+  aspect-ratio: 1;
+  border-radius: 50%;
+}
+
+.zdp-skeleton[data-animated="false"] .zdp-skeleton__line {
+  opacity: 0.72;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .zdp-progress__bar {
+    transition: none;
+  }
+}
+
+.zdp-breadcrumb {
+  color: var(--zdp-color-ink-muted);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-body-small-size);
+  line-height: var(--zdp-type-body-small-line-height);
+  min-width: 0;
+}
+
+.zdp-breadcrumb__list {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+}
+
+.zdp-breadcrumb__item {
+  align-items: center;
+  display: inline-flex;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-breadcrumb__link {
+  border-bottom: var(--zdp-control-focus-underline-width) solid transparent;
+  color: var(--zdp-color-ink-normal);
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+  text-decoration-line: none;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-breadcrumb__link:hover {
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-breadcrumb__link:focus-visible {
+  background: var(--zdp-color-focus-surface);
+  border-bottom-color: var(--zdp-color-focus-line);
+  color: var(--zdp-color-focus-text);
+  outline: 0;
+}
+
+.zdp-breadcrumb__current {
+  color: var(--zdp-color-ink-strong);
+  font-weight: var(--zdp-font-weight-medium);
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-breadcrumb__separator {
+  color: var(--zdp-color-line-strong);
+}
+
+.zdp-pagination {
+  --zdp-pagination-focus-bleed: calc(var(--zdp-control-focus-outline-width) + var(--zdp-control-focus-outline-offset));
+
+  color: var(--zdp-color-ink-normal);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  line-height: var(--zdp-type-control-line-height);
+  max-width: 100%;
+  min-width: 0;
+  overscroll-behavior-inline: contain;
+  overflow-x: auto;
+  padding-block: var(--zdp-pagination-focus-bleed);
+  padding-inline: var(--zdp-pagination-focus-bleed);
+  scrollbar-gutter: stable;
+  scroll-padding-inline: var(--zdp-pagination-focus-bleed);
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x pan-y;
+}
+
+.zdp-pagination__list {
+  align-items: center;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: var(--zdp-space-2);
+  list-style: none;
+  margin: 0;
+  min-width: 0;
+  padding: 0;
+  width: max-content;
+}
+
+.zdp-pagination__item {
+  display: inline-flex;
+  flex: 0 0 auto;
+  min-width: 0;
+}
+
+.zdp-pagination__link,
+.zdp-pagination__ellipsis {
+  align-items: center;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  font-weight: var(--zdp-font-weight-medium);
+  justify-content: center;
+  line-height: var(--zdp-type-control-line-height);
+  min-block-size: var(--zdp-control-height-sm);
+  min-inline-size: var(--zdp-control-height-sm);
+  padding: var(--zdp-space-1) var(--zdp-space-2);
+  text-align: center;
+  white-space: nowrap;
+}
+
+.zdp-pagination__link {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  text-decoration-line: none;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-pagination__link--control {
+  padding-inline: var(--zdp-space-3);
+}
+
+.zdp-pagination__link:hover:not(:disabled):not([aria-current="page"]) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-pagination__link:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-pagination__link[aria-current="page"] {
+  background: var(--zdp-color-accent-primary-soft);
+  border-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+  cursor: default;
+}
+
+.zdp-pagination__link:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-pagination__link[aria-current="page"]:disabled {
+  opacity: 1;
+}
+
+.zdp-pagination__ellipsis {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-table-wrap {
+  background: var(--zdp-color-surface-panel);
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  overscroll-behavior-inline: contain;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  touch-action: pan-x pan-y;
+}
+
+.zdp-table {
+  background: var(--zdp-color-surface-panel);
+  border-collapse: collapse;
+  color: var(--zdp-color-ink-normal);
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-body-small-size);
+  inline-size: 100%;
+  line-height: var(--zdp-type-body-small-line-height);
+  min-inline-size: 36rem;
+}
+
+.zdp-table__caption {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-label-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-label-line-height);
+  padding: var(--zdp-space-3) var(--zdp-space-4);
+  text-align: start;
+}
+
+.zdp-table__caption--hidden {
+  border: 0;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.zdp-table th,
+.zdp-table td {
+  background: var(--zdp-color-surface-panel);
+  border-block-start: 1px solid var(--zdp-color-line-subtle);
+  overflow-wrap: normal;
+  padding: var(--zdp-space-3) var(--zdp-space-4);
+  text-align: start;
+  vertical-align: top;
+  white-space: nowrap;
+  word-break: normal;
+}
+
+.zdp-table th {
+  color: var(--zdp-color-ink-strong);
+  font-weight: var(--zdp-font-weight-medium);
+}
+
+.zdp-table thead th {
+  background: var(--zdp-color-surface-raised);
+}
+
+.zdp-table--density-compact th,
+.zdp-table--density-compact td {
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+}
+
+.zdp-sort-header {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: inherit;
+  font-weight: inherit;
+  gap: var(--zdp-space-2);
+  justify-content: space-between;
+  line-height: inherit;
+  margin: calc(var(--zdp-space-1) * -1);
+  max-width: 100%;
+  min-block-size: var(--zdp-control-height-sm);
+  min-width: 0;
+  padding: var(--zdp-space-1) var(--zdp-space-2);
+  text-align: start;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  vertical-align: middle;
+}
+
+.zdp-sort-header:hover:not(:disabled) {
+  background: var(--zdp-color-surface-panel);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-sort-header:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-sort-header:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-sort-header__label {
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-sort-header__mark {
+  align-items: center;
+  color: var(--zdp-color-ink-muted);
+  display: inline-flex;
+  flex: 0 0 auto;
+  font-size: var(--zdp-type-caption-size);
+  justify-content: center;
+  line-height: 1;
+  min-inline-size: 1em;
+}
+
+.zdp-sort-header__mark::before {
+  content: '↕';
+}
+
+.zdp-sort-header--ascending .zdp-sort-header__mark::before {
+  content: '↑';
+}
+
+.zdp-sort-header--descending .zdp-sort-header__mark::before {
+  content: '↓';
+}
+
+.zdp-sort-header--ascending .zdp-sort-header__mark,
+.zdp-sort-header--descending .zdp-sort-header__mark {
+  color: var(--zdp-color-accent-primary-strong);
+}
+
+.zdp-table-toolbar {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: flex;
+  flex-wrap: wrap;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-3);
+  justify-content: space-between;
+  min-width: 0;
+  padding: var(--zdp-space-3);
+}
+
+.zdp-table-toolbar__body {
+  display: grid;
+  flex: 1 1 16rem;
+  gap: var(--zdp-space-1);
+  min-inline-size: min(100%, 16rem);
+}
+
+.zdp-table-toolbar__title {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-body-small-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-body-small-line-height);
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-table-toolbar__summary,
+.zdp-table-toolbar__selection {
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+  margin: 0;
+  min-width: 0;
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-table-toolbar__summary {
+  color: var(--zdp-color-ink-muted);
+}
+
+.zdp-table-toolbar__selection {
+  color: var(--zdp-color-ink-strong);
+  font-weight: var(--zdp-font-weight-medium);
+}
+
+.zdp-table-toolbar__controls,
+.zdp-table-toolbar__actions,
+.zdp-table-toolbar__density {
+  align-items: center;
+  display: flex;
+  flex: 0 1 auto;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-table-toolbar__controls:empty,
+.zdp-table-toolbar__actions:empty {
+  display: none;
+}
+
+.zdp-table-toolbar__actions {
+  justify-content: flex-end;
+  margin-inline-start: auto;
+}
+
+.zdp-table-toolbar__density-label {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-caption-line-height);
+}
+
+.zdp-key-value {
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-body-small-size);
+  line-height: var(--zdp-type-body-small-line-height);
+  margin: 0;
+  min-width: 0;
+}
+
+.zdp-key-value dt,
+.zdp-key-value dd {
+  border-block-start: 1px solid var(--zdp-color-line-subtle);
+  margin: 0;
+  min-width: 0;
+  padding: var(--zdp-space-3) var(--zdp-space-4);
+}
+
+.zdp-key-value dt:first-child,
+.zdp-key-value dt:first-child + dd {
+  border-block-start: 0;
+}
+
+.zdp-key-value dt {
+  color: var(--zdp-color-ink-muted);
+  font-weight: var(--zdp-font-weight-medium);
+}
+
+.zdp-key-value dd {
+  color: var(--zdp-color-ink-strong);
+  overflow-wrap: var(--zdp-i18n-overflow-wrap);
+}
+
+.zdp-key-value--columns-two {
+  grid-template-columns: minmax(10rem, 0.42fr) minmax(0, 1fr);
+}
+
+.zdp-key-value--columns-one {
+  grid-template-columns: 1fr;
+}
+
+.zdp-key-value--density-compact dt,
+.zdp-key-value--density-compact dd {
+  padding: var(--zdp-space-2) var(--zdp-space-3);
+}
+
+.zdp-empty-state {
+  background: var(--zdp-color-surface-panel);
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-4);
+  min-width: 0;
+  padding: var(--zdp-space-6);
+}
+
+.zdp-empty-state--raised {
+  background: var(--zdp-color-surface-raised);
+}
+
+.zdp-empty-state--align-center {
+  justify-items: center;
+  text-align: center;
+}
+
+.zdp-empty-state__body {
+  display: grid;
+  gap: var(--zdp-space-2);
+  max-inline-size: 36rem;
+  min-width: 0;
+}
+
+.zdp-empty-state__body * {
+  margin-block: 0;
+}
+
+.zdp-empty-state__body strong,
+.zdp-empty-state__body h2,
+.zdp-empty-state__body h3 {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-body-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-body-line-height);
+}
+
+.zdp-empty-state__body p {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-body-small-size);
+  line-height: var(--zdp-type-body-small-line-height);
+}
+
+.zdp-empty-state__actions {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+}
+
+.zdp-empty-state--align-center .zdp-empty-state__actions {
+  justify-content: center;
+}
+
+@media (max-width: 64rem) {
+  .zdp-grid--columns-four {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (max-width: 42rem) {
+  .zdp-grid--columns-two,
+  .zdp-grid--columns-three,
+  .zdp-grid--columns-four {
+    grid-template-columns: 1fr;
+  }
+
+  .zdp-key-value--columns-two {
+    grid-template-columns: 1fr;
+  }
+
+  .zdp-key-value--columns-two dd {
+    border-block-start: 0;
+    padding-block-start: 0;
+  }
+
+  .zdp-toolbar__main,
+  .zdp-toolbar__actions,
+  .zdp-table-toolbar__actions {
+    inline-size: 100%;
+    justify-content: flex-start;
+  }
+
+  .zdp-table-toolbar__actions {
+    margin-inline-start: 0;
+  }
+}
+
+.zdp-tabs {
+  display: grid;
+  gap: var(--zdp-space-3);
+  min-width: 0;
+}
+
+.zdp-tabs__list {
+  align-items: center;
+  border-bottom: 1px solid var(--zdp-color-line-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-tabs__tab {
+  background: transparent;
+  border: 0;
+  border-bottom: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  font-weight: var(--zdp-font-weight-medium);
+  line-height: var(--zdp-type-control-line-height);
+  min-height: var(--zdp-control-height-md);
+  padding: 0 var(--zdp-space-3);
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+}
+
+.zdp-tabs__tab:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-tabs__tab--active {
+  border-bottom-color: var(--zdp-color-accent-primary-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-tabs__tab:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-tabs__tab:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-tabs__panel {
+  background: var(--zdp-color-surface-panel);
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  gap: var(--zdp-space-2);
+  min-width: 0;
+  padding: var(--zdp-space-4);
+}
+
+.zdp-tabs__panel:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-term-trigger {
+  align-items: baseline;
+  appearance: none;
+  background: transparent;
+  border: 0;
+  border-block-end: var(--zdp-control-border-width) solid var(--zdp-color-focus-line);
+  border-radius: var(--zdp-radius-sm);
+  color: inherit;
+  cursor: pointer;
+  display: inline;
+  font: inherit;
+  line-height: inherit;
+  margin: 0;
+  padding: 0 0.2rem;
+  text-align: inherit;
+  text-decoration: none;
+  text-underline-offset: 0.14em;
+}
+
+.zdp-term-trigger:hover:not(:disabled) {
+  background: var(--zdp-color-accent-primary-soft);
+  color: inherit;
+}
+
+.zdp-term-trigger:focus-visible {
+  background: var(--zdp-color-focus-surface);
+  color: var(--zdp-color-focus-text);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-term-trigger:disabled {
+  cursor: not-allowed;
+  opacity: 0.58;
+}
+
+.zdp-term-sheet__backdrop {
+  background: rgb(47 36 24 / 0.28);
+  border: 0;
+  cursor: pointer;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  z-index: 900;
+}
+
+[data-zdp-theme="dark"] .zdp-term-sheet__backdrop {
+  background: rgb(10 8 5 / 0.64);
+}
+
+.zdp-term-sheet {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-4);
+  max-block-size: calc(100vh - var(--zdp-space-6));
+  overflow: auto;
+  padding: var(--zdp-space-5);
+  position: fixed;
+  z-index: 901;
+}
+
+.zdp-term-sheet--right {
+  block-size: calc(100vh - var(--zdp-space-6));
+  border-radius: var(--zdp-control-radius);
+  inline-size: min(28rem, calc(100vw - var(--zdp-space-6)));
+  inset-block: var(--zdp-space-3);
+  inset-inline-end: var(--zdp-space-3);
+}
+
+.zdp-term-sheet--bottom {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+  inset-block-end: 0;
+  inset-inline: 0;
+  max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+}
+
+.zdp-term-sheet:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-term-sheet__header {
+  align-items: start;
+  display: grid;
+  gap: var(--zdp-space-3);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.zdp-term-sheet__heading {
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-term-sheet__eyebrow {
+  color: var(--zdp-color-ink-muted);
+  font-size: var(--zdp-type-caption-size);
+  line-height: var(--zdp-type-caption-line-height);
+  margin: 0;
+}
+
+.zdp-term-sheet__title {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-title-size);
+  line-height: var(--zdp-type-title-line-height);
+  margin: 0;
+  overflow-wrap: anywhere;
+}
+
+.zdp-term-sheet__close {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  height: var(--zdp-control-icon-sm);
+  justify-content: center;
+  line-height: 1;
+  -webkit-user-select: none;
+  user-select: none;
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-term-sheet__close:hover:not(:disabled),
+.zdp-term-sheet__related-button:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-term-sheet__close:focus-visible,
+.zdp-term-sheet__related-button:focus-visible,
+.zdp-term-sheet__detail-link:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-term-sheet__body {
+  display: grid;
+  gap: var(--zdp-space-3);
+  line-height: var(--zdp-type-body-line-height);
+  min-width: 0;
+}
+
+.zdp-term-sheet__body p,
+.zdp-term-sheet__section h3 {
+  margin: 0;
+}
+
+.zdp-term-sheet__short {
+  color: var(--zdp-color-ink-strong);
+  font-weight: var(--zdp-font-weight-semibold);
+}
+
+.zdp-term-sheet__section {
+  display: grid;
+  gap: var(--zdp-space-2);
+}
+
+.zdp-term-sheet__section h3 {
+  color: var(--zdp-color-ink-strong);
+  font-size: var(--zdp-type-control-size);
+  line-height: var(--zdp-type-control-line-height);
+}
+
+.zdp-term-sheet__related {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-2);
+}
+
+.zdp-term-sheet__related-button {
+  background: var(--zdp-color-surface-raised);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-normal);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  font: inherit;
+  min-height: var(--zdp-control-height-sm);
+  padding: 0 var(--zdp-space-2);
+  -webkit-user-select: none;
+  user-select: none;
+}
+
+.zdp-term-sheet__footer {
+  border-block-start: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  padding-block-start: var(--zdp-space-3);
+}
+
+.zdp-term-sheet__detail-link {
+  color: var(--zdp-color-ink-strong);
+  font-weight: var(--zdp-font-weight-semibold);
+  text-decoration: underline;
+  text-underline-offset: 0.16em;
+}
+
+@media (max-width: 720px) {
+  .zdp-term-sheet,
+  .zdp-term-sheet--right {
+    block-size: auto;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+    inline-size: auto;
+    inset-block: auto 0;
+    inset-inline: 0;
+    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+    padding: var(--zdp-space-4);
+  }
+}
+
+.zdp-sheet-layer {
+  display: contents;
+}
+
+.zdp-sheet__backdrop {
+  background: rgb(47 36 24 / 0.32);
+  border: 0;
+  cursor: pointer;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+  z-index: 940;
+}
+
+[data-zdp-theme="dark"] .zdp-sheet__backdrop {
+  background: rgb(10 8 5 / 0.66);
+}
+
+.zdp-sheet {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  font-family: var(--zdp-font-family-sans);
+  gap: var(--zdp-space-4);
+  max-block-size: calc(100vh - var(--zdp-space-6));
+  min-width: 0;
+  overflow: auto;
+  padding: var(--zdp-space-5);
+  position: fixed;
+  z-index: 941;
+}
+
+.zdp-sheet--right,
+.zdp-sheet--left {
+  block-size: calc(100vh - var(--zdp-space-6));
+  border-radius: var(--zdp-control-radius);
+  inset-block: var(--zdp-space-3);
+}
+
+.zdp-sheet--right {
+  inset-inline-end: var(--zdp-space-3);
+}
+
+.zdp-sheet--left {
+  inset-inline-start: var(--zdp-space-3);
+}
+
+.zdp-sheet--bottom {
+  border-end-end-radius: 0;
+  border-end-start-radius: 0;
+  border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+  inset-block-end: 0;
+  inset-inline: 0;
+  max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+}
+
+.zdp-sheet--sm {
+  inline-size: min(24rem, calc(100vw - var(--zdp-space-6)));
+}
+
+.zdp-sheet--md {
+  inline-size: min(30rem, calc(100vw - var(--zdp-space-6)));
+}
+
+.zdp-sheet--lg {
+  inline-size: min(38rem, calc(100vw - var(--zdp-space-6)));
+}
+
+.zdp-sheet--bottom.zdp-sheet--sm,
+.zdp-sheet--bottom.zdp-sheet--md,
+.zdp-sheet--bottom.zdp-sheet--lg {
+  inline-size: auto;
+}
+
+.zdp-sheet--bottom.zdp-sheet--lg {
+  max-block-size: min(42rem, calc(100vh - var(--zdp-space-6)));
+}
+
+.zdp-sheet:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-sheet__header {
+  align-items: start;
+  display: grid;
+  gap: var(--zdp-space-3);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.zdp-sheet__title {
+  color: var(--zdp-color-ink-strong);
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-sheet__title * {
+  margin: 0;
+}
+
+.zdp-sheet__body {
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  gap: var(--zdp-space-3);
+  line-height: var(--zdp-type-body-line-height);
+  min-width: 0;
+}
+
+.zdp-sheet__body * {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.zdp-sheet__footer {
+  align-items: center;
+  border-block-start: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-3);
+  justify-content: end;
+  min-width: 0;
+  padding-block-start: var(--zdp-space-3);
+}
+
+.zdp-sheet__close {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  height: var(--zdp-control-icon-sm);
+  justify-content: center;
+  line-height: 1;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-sheet__close:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-sheet__close:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+@media (max-width: 720px) {
+  .zdp-sheet,
+  .zdp-sheet--right,
+  .zdp-sheet--left {
+    block-size: auto;
+    border-end-end-radius: 0;
+    border-end-start-radius: 0;
+    border-radius: var(--zdp-control-radius) var(--zdp-control-radius) 0 0;
+    inline-size: auto;
+    inset-block: auto 0;
+    inset-inline: 0;
+    max-block-size: min(34rem, calc(100vh - var(--zdp-space-6)));
+    padding: var(--zdp-space-4);
+  }
+}
+
+.zdp-dialog {
+  align-items: center;
+  box-sizing: border-box;
+  display: grid;
+  inset: 0;
+  justify-items: center;
+  padding: var(--zdp-space-4);
+  position: fixed;
+  z-index: 1000;
+}
+
+.zdp-dialog__backdrop {
+  background: rgb(47 36 24 / 0.42);
+  border: 0;
+  cursor: pointer;
+  inset: 0;
+  margin: 0;
+  padding: 0;
+  position: fixed;
+}
+
+[data-zdp-theme="dark"] .zdp-dialog__backdrop {
+  background: rgb(10 8 5 / 0.72);
+}
+
+.zdp-dialog__panel {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  gap: var(--zdp-space-4);
+  max-height: min(42rem, calc(100vh - var(--zdp-space-8)));
+  min-width: 0;
+  overflow: auto;
+  padding: var(--zdp-space-5);
+  position: relative;
+  width: min(100%, 34rem);
+}
+
+.zdp-dialog__panel--sm {
+  width: min(100%, 26rem);
+}
+
+.zdp-dialog__panel--md {
+  width: min(100%, 34rem);
+}
+
+.zdp-dialog__panel--lg {
+  width: min(100%, 46rem);
+}
+
+.zdp-dialog__panel:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-dialog__header {
+  align-items: start;
+  display: grid;
+  gap: var(--zdp-space-3);
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+
+.zdp-dialog__title {
+  color: var(--zdp-color-ink-strong);
+  display: grid;
+  gap: var(--zdp-space-1);
+  min-width: 0;
+}
+
+.zdp-dialog__title * {
+  margin: 0;
+}
+
+.zdp-dialog__body {
+  color: var(--zdp-color-ink-normal);
+  display: grid;
+  gap: var(--zdp-space-3);
+  line-height: var(--zdp-type-body-line-height);
+  min-width: 0;
+}
+
+.zdp-dialog__body * {
+  margin-bottom: 0;
+  margin-top: 0;
+}
+
+.zdp-dialog__footer {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--zdp-space-3);
+  justify-content: end;
+  min-width: 0;
+}
+
+.zdp-dialog__close {
+  align-items: center;
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-strong);
+  border-radius: var(--zdp-control-radius);
+  color: var(--zdp-color-ink-normal);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--zdp-font-family-sans);
+  font-size: var(--zdp-type-control-size);
+  height: var(--zdp-control-icon-sm);
+  justify-content: center;
+  line-height: 1;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-dialog__close:hover:not(:disabled) {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-strong);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-dialog__close:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+@media (max-width: 520px) {
+  .zdp-dialog {
+    align-items: end;
+    padding: var(--zdp-space-3);
+  }
+
+  .zdp-dialog__panel {
+    max-height: calc(100vh - var(--zdp-space-6));
+    padding: var(--zdp-space-4);
+  }
+}
+
+.zdp-surface {
+  border: 1px solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-radius-lg);
+  color: var(--zdp-color-ink-normal);
+}
+
+.zdp-surface--panel {
+  background: var(--zdp-color-surface-panel);
+}
+
+[data-zdp-theme="dark"] .zdp-surface--panel {
+  background: var(--zdp-color-surface-panel);
+}
+
+.zdp-surface--raised {
+  background: var(--zdp-color-surface-raised);
+}
+
+.zdp-surface--inverse {
+  background: var(--zdp-color-surface-inverse);
+  color: var(--zdp-color-ink-inverse);
+}
+
+.zdp-surface--padding-none {
+  padding: 0;
+}
+
+.zdp-surface--padding-sm {
+  padding: var(--zdp-space-3);
+}
+
+.zdp-surface--padding-md {
+  padding: var(--zdp-space-4);
+}
+
+.zdp-surface--padding-lg {
+  padding: var(--zdp-space-6);
+}
+
+.zdp-share-dock {
+  color: var(--zdp-color-ink-normal);
+  font-family: var(--zdp-font-family-sans);
+  z-index: 20;
+}
+
+.zdp-share-dock--side {
+  position: fixed;
+  right: max(var(--zdp-space-3), calc((100vw - var(--zdp-breakpoint-desktop)) / 2 + var(--zdp-space-4)));
+  top: 40vh;
+}
+
+.zdp-share-dock--rail {
+  align-self: start;
+  position: sticky;
+  top: var(--zdp-space-5);
+}
+
+.zdp-share-dock--bottom {
+  bottom: var(--zdp-space-3);
+  left: var(--zdp-space-3);
+  position: fixed;
+  right: var(--zdp-space-3);
+}
+
+.zdp-share-dock--inline {
+  position: static;
+  transform: none;
+}
+
+.zdp-share-dock__list {
+  background: var(--zdp-color-surface-panel);
+  border: var(--zdp-control-border-width) solid var(--zdp-color-line-subtle);
+  border-radius: var(--zdp-radius-lg);
+  display: grid;
+  gap: var(--zdp-space-1);
+  padding: var(--zdp-space-1);
+}
+
+.zdp-share-dock--bottom .zdp-share-dock__list,
+.zdp-share-dock--inline .zdp-share-dock__list {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.zdp-share-action {
+  align-items: center;
+  background: transparent;
+  border: var(--zdp-control-border-width) solid transparent;
+  border-radius: var(--zdp-control-radius);
+  box-sizing: border-box;
+  color: var(--zdp-color-ink-muted);
+  cursor: pointer;
+  display: inline-flex;
+  height: var(--zdp-control-icon-sm);
+  justify-content: center;
+  position: relative;
+  text-decoration-line: none;
+  transition:
+    background-color var(--zdp-motion-fast) ease,
+    border-color var(--zdp-motion-fast) ease,
+    color var(--zdp-motion-fast) ease;
+  width: var(--zdp-control-icon-sm);
+}
+
+.zdp-share-action:hover:not(:disabled),
+.zdp-share-action:focus-visible {
+  background: var(--zdp-color-surface-raised);
+  border-color: var(--zdp-color-line-subtle);
+  color: var(--zdp-color-ink-strong);
+}
+
+.zdp-share-action:focus-visible {
+  border-color: var(--zdp-color-focus-line);
+  outline: var(--zdp-control-focus-outline-width) solid var(--zdp-color-focus-surface);
+  outline-offset: var(--zdp-control-focus-outline-offset);
+}
+
+.zdp-share-action:disabled {
+  cursor: not-allowed;
+  opacity: 0.56;
+}
+
+.zdp-share-action__mark,
+.zdp-share-icon {
+  height: var(--zdp-control-glyph-sm);
+  width: var(--zdp-control-glyph-sm);
+}
+
+.zdp-share-action__mark {
+  align-items: center;
+  display: inline-flex;
+  flex: 0 0 auto;
+  justify-content: center;
+  line-height: 1;
+}
+
+.zdp-share-icon {
+  display: block;
+  overflow: visible;
+}
+
+@media (max-width: 57.5rem) {
+  .zdp-share-dock--side {
+    bottom: var(--zdp-space-3);
+    left: var(--zdp-space-3);
+    right: var(--zdp-space-3);
+    top: auto;
+  }
+
+  .zdp-share-dock--side .zdp-share-dock__list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    max-inline-size: calc(100vw - var(--zdp-space-6));
+  }
+
+  .zdp-share-dock--rail {
+    inline-size: 100%;
+  }
+
+  .zdp-share-dock--rail .zdp-share-dock__list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+  }
+
+  .zdp-share-dock--side .zdp-tooltip.zdp-tooltip--left,
+  .zdp-share-dock--rail .zdp-tooltip.zdp-tooltip--left {
+    --zdp-tooltip-bottom: calc(100% + var(--zdp-space-2));
+    --zdp-tooltip-left: 50%;
+    --zdp-tooltip-right: auto;
+    --zdp-tooltip-top: auto;
+    --zdp-tooltip-transform: translateX(-50%);
+  }
+
+  .zdp-share-dock--side .zdp-tooltip:first-child,
+  .zdp-share-dock--rail .zdp-tooltip:first-child {
+    --zdp-tooltip-left: 0;
+    --zdp-tooltip-transform: none;
+  }
+
+  .zdp-share-dock--side .zdp-tooltip:last-child,
+  .zdp-share-dock--rail .zdp-tooltip:last-child {
+    --zdp-tooltip-left: auto;
+    --zdp-tooltip-right: 0;
+    --zdp-tooltip-transform: none;
+  }
+
+  .zdp-share-dock--side .zdp-share-action__tooltip,
+  .zdp-share-dock--rail .zdp-share-action__tooltip {
+    bottom: calc(100% + var(--zdp-space-2));
+    left: 50%;
+    right: auto;
+    top: auto;
+    transform: translateX(-50%);
+  }
+
+  .zdp-share-dock--side .zdp-share-action:first-child .zdp-share-action__tooltip,
+  .zdp-share-dock--rail .zdp-share-action:first-child .zdp-share-action__tooltip {
+    left: 0;
+    transform: none;
+  }
+
+  .zdp-share-dock--side .zdp-share-action:last-child .zdp-share-action__tooltip,
+  .zdp-share-dock--rail .zdp-share-action:last-child .zdp-share-action__tooltip {
+    left: auto;
+    right: 0;
+    transform: none;
+  }
+
+}
+
+@media (max-width: 42rem) {
+  .zdp-share-dock--side,
+  .zdp-share-dock--bottom {
+    bottom: var(--zdp-space-2);
+  }
+
+  .zdp-share-dock__list {
+    gap: var(--zdp-space-1);
+    padding: var(--zdp-space-1);
+  }
+
+}