@font-face {
  font-family: "Hanken Grotesk";
  src: local("Hanken Grotesk"), url("./fonts/hanken-grotesk-variable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

@font-face {
  font-family: "Hanken Grotesk";
  src: local("Hanken Grotesk Italic"), url("./fonts/hanken-grotesk-variable-italic.woff2") format("woff2-variations");
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --fd-color-background: #fff;
  --fd-color-surface: #f8f6f2;
  --fd-color-surface-strong: #f1ede6;
  --fd-color-text: #2b2d33;
  --fd-color-text-subtle: rgba(43, 45, 51, .7);
  --fd-color-text-disabled: rgba(43, 45, 51, .4);
  --fd-accent: #2a8288;
  --fd-accent-hover: #236f74;
  --fd-accent-contrast: #fff;
  --fd-accent-soft: #92cfae;
  --fd-accent-soft-contrast: #173f42;
  --fd-color-primary: var(--fd-accent);
  --fd-color-primary-hover: var(--fd-accent-hover);
  --fd-color-primary-soft: var(--fd-accent-soft);
  --fd-color-link: #2a8288;
  --fd-color-link-hover: #236f74;
  --fd-color-focus: var(--fd-accent);
  --fd-color-info: #ddf4fb;
  --fd-color-info-text: #2b2d33;
  --fd-color-success: #147d4f;
  --fd-color-success-soft: #dff5e9;
  --fd-color-success-text: #0e5938;
  --fd-color-warning-soft: #fff0a6;
  --fd-color-warning-text: #2b2d33;
  --fd-color-danger: #b70017;
  --fd-color-danger-contrast: #fff;
  --fd-color-danger-soft: rgba(255, 166, 161, .3);
  --fd-color-danger-text: #7d0010;
  --fd-color-chip: #2a8288;
  --fd-color-chip-text: #fff;
  --fd-color-border: rgba(43, 45, 51, .3);
  --fd-color-border-soft: rgba(43, 45, 51, .08);
  --fd-color-border-disabled: rgba(43, 45, 51, .15);
  --fd-color-disabled: rgba(43, 45, 51, .05);
  --fd-font-family: "Hanken Grotesk", Inter, "Segoe UI", Arial, Helvetica, sans-serif;
  --fd-font-size: 1rem;
  --fd-line-height: 1.5;
  --fd-radius: .5rem;
  --fd-shadow: 0 1px 3px rgba(43, 45, 51, .2);
  --fd-shadow-hover: 0 5px 16px -4px rgba(0, 0, 0, .3);
  --fd-shadow-navigation: 0 4px 8px rgba(0, 0, 0, .1);
  --fd-control-height: 3rem;
  --fd-button-height: 3.1875rem;
  --fd-focus: 0 0 0 3px color-mix(in srgb, var(--fd-accent) 24%, transparent);
  --fd-control-border: var(--fd-color-border);
  --fd-control-border-hover: var(--fd-color-text);
  --fd-control-border-focus: var(--fd-accent);
  --fd-control-focus-ring: var(--fd-focus);
  --fd-page-gutter: 2.25rem;
  --fd-grid-gap: 2.25rem;
  --fd-content-max: 84.5625rem;
  --fd-simple-card-width: 25.375rem;
  --fd-standard-card-width: 25.1875rem;
  --fd-feature-card-width: 41.1875rem;
}

.fd-accent--teal { --fd-accent: #2a8288; --fd-accent-hover: #236f74; --fd-accent-contrast: #fff; --fd-accent-soft: #92cfae; --fd-accent-soft-contrast: #173f42; }
.fd-accent--blue { --fd-accent: #2563eb; --fd-accent-hover: #1d4ed8; --fd-accent-contrast: #fff; --fd-accent-soft: #dbeafe; --fd-accent-soft-contrast: #172554; }
.fd-accent--violet { --fd-accent: #7c3aed; --fd-accent-hover: #6d28d9; --fd-accent-contrast: #fff; --fd-accent-soft: #ede9fe; --fd-accent-soft-contrast: #2e1065; }
.fd-accent--coral { --fd-accent: #e84a5f; --fd-accent-hover: #cc344b; --fd-accent-contrast: #fff; --fd-accent-soft: #ffe4e6; --fd-accent-soft-contrast: #4c0519; }
.fd-accent--green { --fd-accent: #16835f; --fd-accent-hover: #11694c; --fd-accent-contrast: #fff; --fd-accent-soft: #dff5e9; --fd-accent-soft-contrast: #052e16; }

.fd-theme-light {
  color-scheme: light;
  --fd-color-background: #fff;
  --fd-color-surface: #f8f6f2;
  --fd-color-surface-strong: #f1ede6;
  --fd-color-text: #2b2d33;
  --fd-color-text-subtle: rgba(43, 45, 51, .7);
  --fd-color-text-disabled: rgba(43, 45, 51, .4);
  --fd-accent: #2a8288;
  --fd-accent-hover: #236f74;
  --fd-accent-contrast: #fff;
  --fd-accent-soft: #92cfae;
  --fd-accent-soft-contrast: #173f42;
  --fd-color-link: #2a8288;
  --fd-color-link-hover: #236f74;
  --fd-color-info: #ddf4fb;
  --fd-color-info-text: #2b2d33;
  --fd-color-success: #147d4f;
  --fd-color-success-soft: #dff5e9;
  --fd-color-success-text: #0e5938;
  --fd-color-warning-soft: #fff0a6;
  --fd-color-warning-text: #2b2d33;
  --fd-color-danger: #b70017;
  --fd-color-danger-contrast: #fff;
  --fd-color-danger-soft: rgba(255, 166, 161, .3);
  --fd-color-danger-text: #7d0010;
  --fd-color-chip: #2a8288;
  --fd-color-chip-text: #fff;
  --fd-color-border: rgba(43, 45, 51, .3);
  --fd-color-border-soft: rgba(43, 45, 51, .08);
  --fd-color-border-disabled: rgba(43, 45, 51, .15);
  --fd-color-disabled: rgba(43, 45, 51, .05);
}

.fd-theme-dark {
  color-scheme: dark;
  --fd-color-background: #1f1f24;
  --fd-color-surface: #2b2d33;
  --fd-color-surface-strong: #404248;
  --fd-color-text: #fafafa;
  --fd-color-text-subtle: rgba(250, 250, 250, .72);
  --fd-color-text-disabled: rgba(250, 250, 250, .4);
  --fd-accent: #92cfae;
  --fd-accent-hover: #aadbc0;
  --fd-accent-contrast: #173f42;
  --fd-accent-soft: rgba(42, 130, 136, .28);
  --fd-accent-soft-contrast: #c8f1da;
  --fd-color-border: rgba(250, 250, 250, .32);
  --fd-color-border-soft: rgba(250, 250, 250, .12);
  --fd-color-disabled: rgba(250, 250, 250, .08);
  --fd-color-link: #92cfae;
  --fd-color-link-hover: #aadbc0;
  --fd-color-info: #173b46;
  --fd-color-info-text: #bfefff;
  --fd-color-success: #72d8a7;
  --fd-color-success-soft: rgba(20, 125, 79, .35);
  --fd-color-success-text: #b7f7d6;
  --fd-color-warning-soft: rgba(176, 136, 0, .28);
  --fd-color-warning-text: #ffe985;
  --fd-color-danger: #ff8a91;
  --fd-color-danger-contrast: #2b2d33;
  --fd-color-danger-soft: rgba(183, 0, 23, .35);
  --fd-color-danger-text: #ffb4b8;
}

.fd-theme-light,
.fd-theme-dark,
.fd-accent--teal,
.fd-accent--blue,
.fd-accent--violet,
.fd-accent--coral,
.fd-accent--green,
.fd-accent-demo {
  --fd-color-focus: var(--fd-accent);
  --fd-control-border-focus: var(--fd-accent);
  --fd-focus: 0 0 0 3px color-mix(in srgb, var(--fd-accent) 24%, transparent);
  --fd-control-focus-ring: var(--fd-focus);
}

.fd-icon {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}

.fd-skip-link {
  position: fixed;
  z-index: 999;
  top: -6rem;
  left: 1rem;
  padding: .75rem 1rem;
  color: var(--fd-accent-contrast);
  background: var(--fd-accent);
  border-radius: var(--fd-radius);
}
.fd-skip-link:focus { top: 1rem; }

.fd-button,
.fd-icon-button {
  display: inline-flex;
  min-height: var(--fd-button-height);
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .75rem 1rem;
  color: var(--fd-color-text);
  font: 500 1rem/1.5 var(--fd-font-family);
  border: 1.5px solid transparent;
  border-radius: var(--fd-radius);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.fd-button:focus-visible,
.fd-icon-button:focus-visible,
.fd-input:focus,
.fd-select:focus,
.fd-textarea:focus { outline: none; box-shadow: var(--fd-focus); }
.fd-button.is-focus,
.fd-icon-button.is-focus { outline: 2px solid var(--fd-color-focus); outline-offset: 3px; box-shadow: var(--fd-focus); }
.fd-button--primary { background: var(--fd-accent); border-color: rgba(43, 45, 51, .2); color: var(--fd-accent-contrast); }
.fd-button--primary.is-hover { background: var(--fd-accent-hover); }
.fd-button--primary:active,
.fd-button--primary.is-active { background: var(--fd-accent); transform: translateY(1px); }
.fd-button--secondary { border-color: var(--fd-color-border); }
.fd-button--tertiary { color: var(--fd-color-link); }
.fd-button--danger { color: #fff; background: var(--fd-color-danger); }
.fd-button--small { min-height: 2.5rem; padding: .45rem .75rem; font-size: .875rem; }
.fd-button--loading { cursor: progress; }
.fd-button.is-loading { cursor: wait; }
.fd-button[disabled],
.fd-icon-button[disabled] { color: var(--fd-color-text-disabled); background: var(--fd-color-disabled); border-color: var(--fd-color-border-soft); cursor: not-allowed; }
.fd-icon-button { width: var(--fd-button-height); padding: 0; }

.fd-link { display: inline-flex; align-items: center; gap: .25rem; color: var(--fd-color-link); text-decoration: underline; text-underline-offset: .18em; }

.fd-field { display: grid; gap: .375rem; color: var(--fd-color-text); font-family: var(--fd-font-family); }
.fd-label { font-size: .875rem; font-weight: 500; }
.fd-label__required { color: var(--fd-color-danger); }
.fd-description { color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-input,
.fd-select,
.fd-textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--fd-control-height);
  padding: .6875rem .75rem;
  color: var(--fd-color-text);
  font: 500 1rem/1.5 var(--fd-font-family);
  border: 1px solid var(--fd-control-border);
  border-radius: var(--fd-radius);
  background: color-mix(in srgb, var(--fd-color-background) 40%, transparent);
}
.fd-input:not(:placeholder-shown),
.fd-input.is-filled,
.fd-select.is-filled,
.fd-textarea.is-filled { border-color: var(--fd-control-border-hover); }
.fd-input.is-hover,
.fd-select.is-hover,
.fd-textarea.is-hover { border-color: var(--fd-control-border-hover); outline: 0; box-shadow: inset 0 0 0 1px var(--fd-control-border-hover); }
.fd-input:focus,
.fd-input.is-focus,
.fd-select:focus,
.fd-select.is-focus,
.fd-textarea:focus,
.fd-textarea.is-focus { border-color: var(--fd-control-border-focus); outline: 0; box-shadow: inset 0 0 0 1px var(--fd-control-border-focus), var(--fd-control-focus-ring); }
.fd-input[readonly],
.fd-select[readonly],
.fd-textarea[readonly] { background: var(--fd-color-surface); }
.fd-input:disabled,
.fd-select:disabled,
.fd-textarea:disabled { color: var(--fd-color-text-disabled); background: var(--fd-color-disabled); border-color: var(--fd-color-border-disabled); }
.fd-input[aria-invalid="true"],
.fd-select[aria-invalid="true"],
.fd-textarea[aria-invalid="true"] { border-color: var(--fd-color-danger); background: var(--fd-color-danger-soft); }
.fd-validation { color: var(--fd-color-danger); font-size: .875rem; }
.fd-select { appearance: none; padding-right: 2.5rem; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: calc(100% - 1.15rem) 1.25rem, calc(100% - .84rem) 1.25rem; background-size: .32rem .32rem; background-repeat: no-repeat; }
.fd-select:focus,
.fd-select.is-focus,
.fd-select.is-hover { padding-right: 2.5rem; }
.fd-textarea { min-height: 8rem; resize: vertical; }
.fd-input-group { display: flex; min-height: var(--fd-control-height); overflow: hidden; border: 1px solid var(--fd-control-border); border-radius: var(--fd-radius); background: color-mix(in srgb, var(--fd-color-background) 40%, transparent); }
.fd-input-group:focus-within { border-color: var(--fd-control-border-focus); box-shadow: inset 0 0 0 1px var(--fd-control-border-focus), var(--fd-control-focus-ring); }
.fd-input-group > span { display: grid; place-items: center; padding: 0 .75rem; background: var(--fd-color-surface-strong); font-weight: 500; }
.fd-input-group .fd-input { border: 0; border-radius: 0; box-shadow: none; }
.fd-input-group .fd-input:focus { border: 0; box-shadow: none; }
.fd-input--small { min-height: 2.75rem; padding-block: .5rem; font-size: .875rem; }
.fd-input--large { min-height: 3.5rem; padding: .875rem 1rem; font-size: 1.0625rem; }
.fd-input.is-valid { border-color: var(--fd-color-success); background: var(--fd-color-success-soft); }
.fd-validation--success { display: inline-flex; align-items: center; gap: .35rem; color: var(--fd-color-success-text); }
.fd-validation--success .fd-icon { width: 1rem; height: 1rem; }
.fd-input-control { display: grid; min-height: var(--fd-control-height); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; overflow: hidden; color: var(--fd-color-text-subtle); border: 1px solid var(--fd-control-border); border-radius: var(--fd-radius); background: color-mix(in srgb, var(--fd-color-background) 40%, transparent); }
.fd-input-control:focus-within { color: var(--fd-color-text); border-color: var(--fd-control-border-focus); box-shadow: inset 0 0 0 1px var(--fd-control-border-focus), var(--fd-control-focus-ring); }
.fd-input-control > .fd-icon { margin-left: .875rem; }
.fd-input-control .fd-input,
.fd-input-control .fd-input:focus { min-width: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
.fd-input-control .fd-icon-button { width: 3rem; min-height: 3rem; border: 0; border-radius: 0; }
.fd-input-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--fd-color-text-subtle); font-size: .75rem; }
.fd-input-anatomy { display: grid; width: min(100%, 52rem); grid-template-columns: minmax(18rem, 1fr) minmax(14rem, .75fr); align-items: start; gap: 1.5rem; }
.fd-input-anatomy > .fd-field { padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-input-anatomy dl { display: grid; margin: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-input-anatomy dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-input-anatomy dt { color: var(--fd-color-text-subtle); }
.fd-input-anatomy dd { margin: 0; font-weight: 700; text-align: right; }
.fd-input-grid { display: grid; width: min(100%, 52rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fd-input-example-width { width: min(100%, 34rem); }
.fd-input-size-stack { display: grid; width: min(100%, 42rem); gap: 1rem; }
.fd-input-size-stack .fd-field { grid-template-columns: 8rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.fd-input-state-grid { display: grid; grid-template-columns: repeat(4, minmax(10rem, 1fr)); gap: .75rem; }
.fd-input-state-grid article { display: grid; min-width: 0; align-content: center; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-input-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
.fd-file-upload:focus-within { border-color: var(--fd-control-border-focus); box-shadow: inset 0 0 0 1px var(--fd-control-border-focus), var(--fd-control-focus-ring); }
.fd-file-upload input[type="file"]:focus-visible { outline: 0; }
@container (max-width: 46rem) {
  .fd-input-anatomy,
  .fd-input-grid { grid-template-columns: 1fr; }
  .fd-input-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 30rem) {
  .fd-input-size-stack .fd-field { grid-template-columns: 1fr; }
  .fd-input-state-grid { grid-template-columns: 1fr; }
}


.fd-checkbox,
.fd-radio,
.fd-switch { display: flex; align-items: flex-start; gap: .625rem; color: var(--fd-color-text); cursor: pointer; }
.fd-checkbox input,
.fd-radio input,
.fd-switch input { position: absolute; opacity: 0; pointer-events: none; }
.fd-checkbox__control,
.fd-radio__control { position: relative; width: 1rem; height: 1rem; margin-top: .25rem; flex: 0 0 auto; border: 1px solid var(--fd-color-text); background: var(--fd-color-background); }
.fd-checkbox__control { border-radius: .25rem; }
.fd-radio__control { border-radius: 50%; }
.fd-checkbox input:checked + .fd-checkbox__control { background: var(--fd-accent); border-color: var(--fd-accent); }
.fd-checkbox input:checked + .fd-checkbox__control::after { content: ""; position: absolute; left: .25rem; top: .05rem; width: .3rem; height: .55rem; border: solid var(--fd-accent-contrast); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.fd-checkbox input:indeterminate + .fd-checkbox__control { border-color: var(--fd-accent); background: var(--fd-accent); }
.fd-checkbox input:indeterminate + .fd-checkbox__control::after { content: ""; position: absolute; top: calc(50% - 1px); right: .2rem; left: .2rem; height: 2px; border: 0; background: var(--fd-accent-contrast); transform: none; }
.fd-radio input:checked + .fd-radio__control { border-color: var(--fd-color-text); box-shadow: inset 0 0 0 4px var(--fd-color-background); background: var(--fd-color-text); }
.fd-checkbox input:focus-visible + span,
.fd-radio input:focus-visible + span,
.fd-switch input:focus-visible + span { box-shadow: var(--fd-focus); }
.fd-checkbox.is-focus .fd-checkbox__control,
.fd-radio.is-focus .fd-radio__control,
.fd-switch.is-focus .fd-switch__control { outline: 2px solid var(--fd-color-focus); outline-offset: 3px; box-shadow: var(--fd-focus); }
.fd-checkbox.is-hover .fd-checkbox__control,
.fd-radio.is-hover .fd-radio__control { border-color: var(--fd-color-link); background-color: color-mix(in srgb, var(--fd-color-link) 10%, transparent); }
.fd-checkbox.is-error .fd-checkbox__control,
.fd-radio.is-error .fd-radio__control { border-color: var(--fd-color-danger); background: var(--fd-color-danger-soft); }
.fd-checkbox:has(input:disabled),
.fd-radio:has(input:disabled),
.fd-switch:has(input:disabled) { opacity: .45; cursor: not-allowed; }
.fd-switch__control { position: relative; width: 2.625rem; height: 1.5rem; flex: 0 0 auto; border-radius: 99px; background: rgba(43, 45, 51, .2); box-shadow: var(--fd-shadow); }
.fd-switch__control::after { content: ""; position: absolute; top: .1875rem; left: .1875rem; width: 1.125rem; height: 1.125rem; border-radius: 50%; background: #fff; transition: left .16s; }
.fd-switch input:checked + .fd-switch__control { background: var(--fd-color-link); }
.fd-switch input:checked + .fd-switch__control::after { left: 1.3125rem; }

.fd-toggle-group { display: inline-flex; max-width: 100%; }
.fd-toggle-group button { display: inline-flex; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; padding: .5rem .875rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border); background: var(--fd-color-background); font: 600 .9375rem/1.3 var(--fd-font-family); cursor: pointer; }
.fd-toggle-group button + button { margin-left: -1px; }
.fd-toggle-group button:first-child { border-radius: var(--fd-radius) 0 0 var(--fd-radius); }
.fd-toggle-group button:last-child { border-radius: 0 var(--fd-radius) var(--fd-radius) 0; }
.fd-toggle-group button:only-child { border-radius: var(--fd-radius); }
.fd-toggle-group button[aria-pressed="true"] { position: relative; z-index: 1; color: var(--fd-accent-contrast); border-color: var(--fd-accent); background: var(--fd-accent); }
.fd-toggle-group button:focus-visible,
.fd-toggle-group button.is-focus { position: relative; z-index: 2; outline: none; box-shadow: var(--fd-focus); }
.fd-toggle-group button.is-hover { color: var(--fd-color-link); background: var(--fd-color-surface-strong); }
.fd-toggle-group button.is-active { background: var(--fd-color-surface-strong); transform: translateY(1px); }
.fd-toggle-group button:disabled { color: var(--fd-color-text-disabled); border-color: var(--fd-color-border-disabled); background: var(--fd-color-disabled); cursor: not-allowed; }
.fd-toggle-group--small button { min-height: 2.75rem; padding: .375rem .75rem; font-size: .8125rem; }
.fd-toggle-group--large button { min-height: 3.5rem; padding: .75rem 1.125rem; font-size: 1rem; }
.fd-toggle-group--icons button { width: 3rem; padding-inline: 0; }
.fd-toggle-group--icons .fd-icon { width: 1.25rem; height: 1.25rem; }
.fd-toggle-group--wrap { flex-wrap: wrap; gap: .5rem; }
.fd-toggle-group--wrap button,
.fd-toggle-group--wrap button:first-child,
.fd-toggle-group--wrap button:last-child { margin: 0; border-radius: var(--fd-radius); }
.fd-toggle-group--full { display: flex; width: 100%; }
.fd-toggle-group--full button { min-width: 0; flex: 1 1 0; }
.fd-toggle-anatomy { display: grid; width: min(100%, 48rem); grid-template-columns: minmax(17rem, 1fr) minmax(14rem, .85fr); gap: 1.5rem; }
.fd-toggle-anatomy__stage { display: grid; min-height: 13rem; place-items: center; padding: 1.5rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-toggle-anatomy dl { display: grid; align-content: start; margin: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-toggle-anatomy dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-toggle-anatomy dt { color: var(--fd-color-text-subtle); }
.fd-toggle-anatomy dd { margin: 0; font-weight: 700; text-align: right; }
.fd-toggle-size-stack { display: grid; width: min(100%, 48rem); gap: .75rem; }
.fd-toggle-size-stack article { display: flex; min-height: 5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-toggle-size-stack article > span { color: var(--fd-color-text-subtle); font-size: .8125rem; font-weight: 700; }
.fd-toggle-responsive-demo,
.fd-toggle-availability { display: grid; width: min(100%, 46rem); gap: .625rem; }
.fd-toggle-availability .fd-description { margin: 0; }
.fd-toggle-state-grid { display: grid; grid-template-columns: repeat(3, minmax(8rem, 1fr)); gap: .75rem; }
.fd-toggle-state-grid article { display: grid; min-height: 8rem; place-items: center; align-content: center; gap: .875rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-toggle-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
@container (max-width: 38rem) {
  .fd-toggle-anatomy { grid-template-columns: 1fr; }
  .fd-toggle-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-toggle-size-stack article { align-items: flex-start; flex-direction: column; }
}
@container (max-width: 28rem) {
  .fd-toggle-group--full { display: grid; }
  .fd-toggle-group--full button,
  .fd-toggle-group--full button:first-child,
  .fd-toggle-group--full button:last-child { width: 100%; margin: -1px 0 0; border-radius: 0; }
  .fd-toggle-group--full button:first-child { margin-top: 0; border-radius: var(--fd-radius) var(--fd-radius) 0 0; }
  .fd-toggle-group--full button:last-child { border-radius: 0 0 var(--fd-radius) var(--fd-radius); }
  .fd-toggle-state-grid { grid-template-columns: 1fr; }
}

.fd-alert { display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: .75rem; padding: 1rem; border-radius: var(--fd-radius); }
.fd-alert--info { color: var(--fd-color-info-text); background: var(--fd-color-info); }
.fd-alert--success { color: var(--fd-color-success-text); background: var(--fd-color-success-soft); }
.fd-alert--warning { color: var(--fd-color-warning-text); background: var(--fd-color-warning-soft); }
.fd-alert--danger { color: var(--fd-color-danger-text); background: var(--fd-color-danger-soft); }
.fd-alert__content { display: grid; gap: .15rem; }
.fd-alert__close { min-height: auto; width: 2rem; height: 2rem; border: 0; background: transparent; }

.fd-badge,
.fd-tag,
.fd-chip { display: inline-flex; align-items: center; gap: .375rem; width: fit-content; border-radius: 99px; font: 700 .75rem/1.25 var(--fd-font-family); }
.fd-badge { padding: .25rem .5625rem; color: var(--fd-color-text); background: var(--fd-color-surface-strong); }
.fd-badge--success { color: var(--fd-color-success-text); background: var(--fd-color-success-soft); }
.fd-badge--danger { color: var(--fd-color-danger-text); background: var(--fd-color-danger-soft); }
.fd-chip { padding: .25rem .625rem; color: var(--fd-color-chip-text); background: var(--fd-color-chip); text-transform: uppercase; letter-spacing: .04em; }
.fd-tag { padding: .375rem .625rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border); background: var(--fd-color-background); }
.fd-tag button { display: grid; place-items: center; padding: 0; border: 0; background: transparent; }

.fd-card { overflow: hidden; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow); }
.fd-card--interactive { transition: transform .16s, box-shadow .16s; cursor: pointer; }
.fd-card.is-hover { transform: translateY(-2px); box-shadow: var(--fd-shadow-hover); }
.fd-card.is-focus { outline: 2px solid var(--fd-color-focus); outline-offset: 3px; box-shadow: var(--fd-focus); }
.fd-card.is-selected { outline: 2px solid var(--fd-color-link); outline-offset: 2px; }
.fd-card.is-loading { pointer-events: none; }
.fd-card__media { min-height: 11rem; background: linear-gradient(135deg, var(--fd-accent), var(--fd-accent-soft)); }
.fd-card__body { display: grid; gap: .75rem; padding: 1.5rem; }
.fd-card__body > * { margin: 0; }
.fd-card__category { color: var(--fd-color-text-subtle); font-size: .875rem; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.fd-simple-card { display: flex; min-height: 6.125rem; align-items: center; gap: 1rem; padding: 1rem; }
.fd-simple-card .fd-icon-button { margin-left: auto; }

.fd-surface-banner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(12rem, .6fr); align-items: center; gap: 2rem; min-height: 20rem; padding: 2.75rem; color: #fafafa; border-radius: var(--fd-radius); background: #2b2d33; }
.fd-surface-banner__art { display: grid; place-items: center; min-height: 14rem; color: var(--fd-accent-contrast); border-radius: var(--fd-radius); background: var(--fd-accent); font-size: 4rem; font-weight: 700; }

.fd-breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: 0; list-style: none; font-size: .875rem; }
.fd-breadcrumbs li { display: flex; align-items: center; gap: .5rem; }
.fd-tabs { display: grid; width: 100%; min-width: 0; align-content: start; }
.fd-tabs__list { display: flex; min-width: 0; overflow-x: auto; border-bottom: 1px solid var(--fd-color-border); scrollbar-width: thin; }
.fd-tabs__list button { display: inline-flex; min-width: max-content; min-height: 2.75rem; flex: 0 0 auto; align-items: center; justify-content: center; gap: .5rem; padding: .75rem 1rem; color: var(--fd-color-text); border: 0; border-bottom: 3px solid transparent; background: transparent; cursor: pointer; }
.fd-tabs__list button.is-hover { color: var(--fd-color-link-hover); border-radius: var(--fd-radius) var(--fd-radius) 0 0; background: color-mix(in srgb, var(--fd-color-link) 10%, transparent); }
.fd-tabs__list button[aria-selected="true"] { color: var(--fd-accent-contrast); border-bottom-color: var(--fd-accent); background: var(--fd-accent); font-weight: 500; }
.fd-tabs__list button:focus-visible,
.fd-tabs__list button.is-focus { position: relative; z-index: 1; outline: 3px solid var(--fd-color-focus); outline-offset: -3px; }
.fd-tabs__list button:disabled { color: var(--fd-color-text-disabled); background: var(--fd-color-disabled); cursor: not-allowed; }
.fd-tabs__panel { min-height: 5.25rem; padding: 1.25rem 0 0; }
.fd-tabs__panel[hidden] { display: none; }
.fd-tab-content { display: grid; gap: .375rem; }
.fd-tab-content > * { margin: 0; }
.fd-tab-content p,
.fd-subnav-content p { color: var(--fd-color-text-subtle); }
.fd-tabs--contained { overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-tabs--contained .fd-tabs__list { gap: .25rem; padding: .5rem; border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-tabs--contained .fd-tabs__list button { border: 0; border-radius: calc(var(--fd-radius) - .125rem); }
.fd-tabs--contained .fd-tabs__panel { min-height: 7rem; padding: 1.25rem; }
.fd-tabs--icons .fd-icon { width: 1rem; height: 1rem; }
.fd-tabs__badge { display: inline-grid; min-width: 1.375rem; min-height: 1.375rem; place-items: center; padding: 0 .375rem; color: var(--fd-color-text); border-radius: 99px; background: var(--fd-color-surface-strong); font-size: .75rem; font-weight: 700; }
.fd-tabs__list button[aria-selected="true"] .fd-tabs__badge { color: var(--fd-accent-soft-contrast); background: var(--fd-accent-soft); }
.fd-tabs--scroll .fd-tabs__list { padding-bottom: .125rem; overscroll-behavior-inline: contain; }
.fd-subnav { display: flex; min-width: 0; flex-wrap: wrap; gap: .25rem 1.5rem; border-bottom: 1px solid var(--fd-color-border); }
.fd-subnav a { min-height: 2.75rem; padding: .75rem 0; color: var(--fd-color-text); border-bottom: 3px solid transparent; text-decoration: none; }
.fd-subnav a[aria-current="page"] { color: var(--fd-color-link); border-bottom-color: var(--fd-accent); font-weight: 700; }
.fd-subnav a:focus-visible { outline: 3px solid var(--fd-color-focus); outline-offset: 2px; }
.fd-subnav-content { display: grid; gap: .375rem; min-height: 5.25rem; padding-top: 1.25rem; }
.fd-subnav-content > * { margin: 0; }
.fd-tab-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fd-tab-state-grid article { display: grid; min-width: 0; gap: .75rem; align-content: start; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-tab-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fd-tab-state-grid .fd-tabs__list { overflow: hidden; }
.fd-tabs__list--fade { mask-image: linear-gradient(to right, #000 65%, transparent); }
.fd-details { border-top: 1px solid var(--fd-color-border-soft); }
.fd-details:last-child { border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-details summary { display: flex; min-height: 3rem; align-items: center; justify-content: space-between; gap: .75rem; padding: 1.25rem .5rem; font-weight: 700; cursor: pointer; list-style: none; }
.fd-details summary::-webkit-details-marker { display: none; }
.fd-details summary::marker { content: ''; }
.fd-details summary:focus-visible,
.fd-details.is-focus summary { position: relative; z-index: 1; outline: 2px solid var(--fd-color-focus); outline-offset: 2px; box-shadow: var(--fd-focus); }
.fd-details.is-hover summary { color: var(--fd-color-link); background: var(--fd-color-surface); }
.fd-details summary > .fd-icon { margin-left: auto; transition: none; }
.fd-details__summary { display: grid; min-width: 0; flex: 1 1 auto; gap: .15rem; }
.fd-details__summary small { color: var(--fd-color-text-subtle); font-size: .8125rem; font-weight: 500; line-height: 1.4; }
.fd-details__content { padding: 0 .5rem 1.25rem; color: var(--fd-color-text-subtle); }
.fd-details__content > :first-child { margin-top: 0; }
.fd-details__content > :last-child { margin-bottom: 0; }
.fd-details-group { width: min(100%, 52rem); }
.fd-details-group--cards { display: grid; gap: .75rem; }
.fd-details--card { overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-details--card:last-child { border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-details--card summary { padding: 1rem 1.125rem; }
.fd-details--card[open] summary { border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-details--card .fd-details__content { padding: 1.125rem; }
.fd-details-anatomy { display: grid; width: min(100%, 54rem); grid-template-columns: minmax(20rem, 1fr) minmax(14rem, .7fr); align-items: start; gap: 1.5rem; }
.fd-details-anatomy dl { display: grid; margin: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-details-anatomy dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-details-anatomy dt { color: var(--fd-color-text-subtle); }
.fd-details-anatomy dd { margin: 0; font-weight: 700; text-align: right; }
.fd-details--rich { width: min(100%, 56rem); }
.fd-details--rich summary > .fd-badge { flex: 0 0 auto; }
.fd-details-rich-grid { display: grid; grid-template-columns: minmax(12rem, .8fr) minmax(16rem, 1.2fr); gap: 2rem; }
.fd-details-rich-grid h4 { margin: 0 0 .5rem; color: var(--fd-color-text); }
.fd-details-rich-grid p { margin-top: 0; }
.fd-details--nested { width: min(100%, 48rem); }
.fd-details--nested > .fd-details__content > .fd-details { margin-left: 1rem; }
.fd-details-group--compact { width: min(100%, 32rem); }
.fd-details-group--compact summary { min-height: 2.75rem; padding: .625rem .5rem; font-size: .875rem; }
.fd-details-group--compact .fd-details__content { padding-bottom: .875rem; font-size: .875rem; }
.fd-details-state-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fd-details-state-grid article { display: grid; min-width: 0; align-content: start; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-details-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
@container (max-width: 44rem) {
  .fd-details-anatomy,
  .fd-details-rich-grid { grid-template-columns: 1fr; }
  .fd-details--rich summary { align-items: flex-start; flex-wrap: wrap; }
  .fd-details--rich summary > .fd-icon { margin-left: 0; }
}
@container (max-width: 28rem) {
  .fd-details-state-grid { grid-template-columns: 1fr; }
  .fd-details--nested > .fd-details__content > .fd-details { margin-left: .5rem; }
}
.fd-divider { height: 1px; border: 0; background: var(--fd-color-border-soft); }

.fd-pagination { display: flex; max-width: 100%; flex-wrap: wrap; align-items: center; gap: .3125rem; }
.fd-pagination button:not(.fd-button) { display: inline-grid; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; color: var(--fd-color-text); border: 1px solid transparent; border-radius: .375rem; background: transparent; }
.fd-pagination button[aria-current="page"] { color: var(--fd-accent-contrast); border-color: var(--fd-accent); background: var(--fd-accent); font-weight: 700; }
.fd-pagination button:focus-visible { outline: 2px solid var(--fd-color-focus); outline-offset: 2px; box-shadow: var(--fd-focus); }
.fd-pagination button:active:not(:disabled) { border-color: var(--fd-color-text); transform: translateY(1px); }
.fd-pagination button:disabled { opacity: .38; cursor: not-allowed; }
.fd-pagination__ellipsis { display: inline-grid; width: 2rem; height: 2.75rem; place-items: center; color: var(--fd-color-text-subtle); }
.fd-pagination--compact { width: min(100%, 34rem); justify-content: space-between; gap: 1rem; }
.fd-pagination--compact > span,
.fd-pagination--mobile > span { color: var(--fd-color-text-subtle); white-space: nowrap; }
.fd-pagination--compact > span strong,
.fd-pagination--mobile > span strong { color: var(--fd-color-text); }
.fd-pagination--simple { flex-wrap: nowrap; }
.fd-pagination__label { margin: 0 0 .75rem; color: var(--fd-color-text-subtle); font-size: .875rem; font-weight: 700; }
.fd-pagination--mobile { display: grid; width: min(100%, 24rem); grid-template-columns: 2.75rem minmax(0, 1fr) 2.75rem; text-align: center; }
.fd-pagination--mobile .fd-button { width: 2.75rem; min-width: 2.75rem; height: 2.75rem; padding: 0; }
.fd-stepper { display: grid; grid-template-columns: repeat(var(--fd-steps, 4), 1fr); padding: 0; list-style: none; }
.fd-stepper li { position: relative; display: grid; justify-items: center; gap: .5rem; color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-stepper li::before { content: ""; position: absolute; z-index: 0; top: 1rem; right: 50%; width: 100%; height: 2px; background: var(--fd-color-border-soft); }
.fd-stepper li:first-child::before { display: none; }
.fd-stepper span { z-index: 1; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--fd-color-border); border-radius: 50%; background: var(--fd-color-background); }
.fd-stepper [aria-current="step"] span,
.fd-stepper .is-complete span { color: var(--fd-accent-contrast); border-color: var(--fd-color-text); background: var(--fd-accent); }

.fd-table-wrap { contain: inline-size; max-width: 100%; overflow: auto; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-table { width: 100%; border-collapse: collapse; color: var(--fd-color-text); background: var(--fd-color-background); }
.fd-table caption { padding: 1rem; color: var(--fd-color-text); background: var(--fd-color-surface); font-weight: 700; text-align: left; }
.fd-table th,
.fd-table td { padding: .9375rem; text-align: left; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-table th { background: var(--fd-color-surface-strong); font-size: .875rem; }
.fd-table tbody th { background: transparent; }
.fd-table tbody tr:last-child > * { border-bottom: 0; }
.fd-table--striped tbody tr:nth-child(even) { background: var(--fd-color-surface); }

.fd-progress { overflow: hidden; height: .5rem; border-radius: 99px; background: color-mix(in srgb, var(--fd-color-text) 10%, transparent); }
.fd-progress span { display: block; height: 100%; background: var(--fd-accent); }
.fd-spinner { display: inline-block; width: 1.25rem; height: 1.25rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: fd-spin .7s linear infinite; }
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fd-skeleton { min-height: 1rem; border-radius: .25rem; background: linear-gradient(90deg, var(--fd-color-surface-strong), var(--fd-color-background), var(--fd-color-surface-strong)); background-size: 200% 100%; animation: fd-shimmer 1.3s infinite; }
@keyframes fd-shimmer { to { background-position: -200% 0; } }

.fd-tooltip-wrap { position: relative; display: inline-flex; }
.fd-tooltip { position: absolute; z-index: 4; bottom: calc(100% + .5rem); left: 50%; width: max-content; max-width: 14rem; padding: .5rem .625rem; color: #fff; border-radius: .375rem; background: #2b2d33; font-size: .75rem; opacity: 0; pointer-events: none; transform: translate(-50%, .25rem); transition: opacity .15s, transform .15s; }
.fd-tooltip-wrap:focus-within .fd-tooltip { opacity: 1; transform: translate(-50%, 0); }
.fd-popover { width: min(20rem, 90vw); padding: 1rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow-hover); }
.fd-dialog { width: min(34rem, calc(100% - 2rem)); padding: 1.875rem; color: var(--fd-color-text); border: 0; border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: 0 1.25rem 4rem rgba(0, 0, 0, .35); }
.fd-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.fd-dialog__actions { display: flex; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }

.fd-error-summary { padding: 1.25rem; border-left: .3rem solid var(--fd-color-danger); background: var(--fd-color-danger-soft); }
.fd-error-summary h3 { margin-top: 0; }
.fd-error-summary a { color: var(--fd-color-danger-text); }
.fd-file-upload { display: grid; gap: .5rem; padding: 1.5rem; text-align: center; border: 1.5px dashed var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-file-upload input::file-selector-button { margin-right: .75rem; padding: .5rem .75rem; border: 1px solid var(--fd-color-border); border-radius: .375rem; background: var(--fd-color-background); }
.fd-search { display: flex; }
.fd-search .fd-input { border-radius: var(--fd-radius) 0 0 var(--fd-radius); }
.fd-search .fd-button { border-radius: 0 var(--fd-radius) var(--fd-radius) 0; }
.fd-date-input { position: relative; }
.fd-date-input .fd-input { padding-right: 3rem; }
.fd-date-input .fd-icon { position: absolute; right: .875rem; top: .875rem; pointer-events: none; }

.fd-header { color: var(--fd-color-text); background: var(--fd-color-background); box-shadow: var(--fd-shadow-navigation); }
.fd-header__service,
.fd-header__main { display: flex; align-items: center; gap: 1.5rem; padding: .625rem 1.5rem; }
.fd-header__service { font-size: .75rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-header__service > :last-child { margin-left: auto; }
.fd-header__main { min-height: 5rem; }
.fd-wordmark { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; }
.fd-wordmark__mark { display: grid; width: 2.625rem; height: 2.625rem; place-items: center; color: var(--fd-accent-contrast); background: var(--fd-accent); font-size: 1.5rem; }
.fd-header__nav { display: flex; gap: 1.25rem; margin-left: auto; }
.fd-footer { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.25rem; padding: 3rem; color: var(--fd-color-text); background: var(--fd-color-surface); }
.fd-footer__group { display: grid; align-content: start; gap: .5rem; }
.fd-footer__group h3 { margin: 0 0 .5rem; font-size: 1rem; }
.fd-footer__meta { grid-column: 1 / -1; padding-top: 1.25rem; border-top: 1px solid var(--fd-color-border); color: var(--fd-color-text-subtle); font-size: .875rem; }

@media (max-width: 48rem) {
  .fd-surface-banner { grid-template-columns: 1fr; padding: 1.5rem; }
  .fd-header__service,
  .fd-header__nav { display: none; }
  .fd-footer { grid-template-columns: 1fr 1fr; padding: 2rem 1.25rem; }
}

/* Extended isolated primitives */
.fd-accent-grid { display: grid; grid-template-columns: repeat(3, minmax(6rem, 1fr)); gap: .75rem; width: 100%; }
.fd-accent-grid span { display: grid; min-height: 5rem; place-items: center; padding: .75rem; border-radius: var(--fd-radius); background: var(--accent); font-weight: 700; }
.fd-list { display: grid; gap: .5rem; margin: .75rem 0; padding-left: 1.4rem; }
.fd-list--ordered li::marker { color: var(--fd-color-link); font-weight: 700; }
.fd-list--rich,
.fd-list--steps { width: min(100%, 46rem); margin: 0; padding: 0; list-style: none; }
.fd-list--rich li,
.fd-list--steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-list--rich li:first-child,
.fd-list--steps li:first-child { padding-top: 0; }
.fd-list--rich li:last-child,
.fd-list--steps li:last-child { padding-bottom: 0; border-bottom: 0; }
.fd-list--rich li > span:last-child,
.fd-list--steps li > span { display: grid; gap: .25rem; }
.fd-list--rich small,
.fd-list--steps small { color: var(--fd-color-text-subtle); line-height: 1.5; }
.fd-list__marker { width: .625rem; height: .625rem; margin-top: .4rem; border: 2px solid var(--fd-accent); border-radius: 50%; background: var(--fd-accent-soft); }
.fd-list--steps { counter-reset: fd-list-step; }
.fd-list--steps li { counter-increment: fd-list-step; }
.fd-list--steps li::before { content: counter(fd-list-step); display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--fd-accent-contrast); border-radius: 50%; background: var(--fd-accent); font-size: .875rem; font-weight: 700; }
.fd-checklist { width: min(100%, 46rem); overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-checklist__summary { display: grid; grid-template-columns: minmax(0, 1fr) minmax(8rem, 14rem); align-items: center; gap: 1.5rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-checklist__summary > span { display: grid; }
.fd-checklist__summary small { color: var(--fd-color-text-subtle); }
.fd-checklist ul,
.fd-action-list,
.fd-activity-list,
.fd-people-list { margin: 0; padding: 0; list-style: none; }
.fd-checklist li { border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-checklist li:last-child { border-bottom: 0; }
.fd-checklist label { width: 100%; padding: 1rem 1.25rem; }
.fd-checklist label > span:last-child { display: grid; gap: .2rem; }
.fd-checklist label small { color: var(--fd-color-text-subtle); }
.fd-action-list { width: min(100%, 48rem); overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-action-list li { border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-action-list li:last-child { border-bottom: 0; }
.fd-action-list a,
.fd-action-list li > span { display: grid; min-height: 4.75rem; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .875rem 1rem; color: var(--fd-color-text); text-decoration: none; }
.fd-action-list a:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--fd-color-focus); outline-offset: -3px; }
.fd-action-list a > span:nth-child(2),
.fd-action-list li > span > span:nth-child(2) { display: grid; gap: .2rem; }
.fd-action-list small { color: var(--fd-color-text-subtle); }
.fd-action-list .fd-icon:last-child { width: 1rem; height: 1rem; }
.fd-list__icon,
.fd-activity-list__icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--fd-color-link); border-radius: var(--fd-radius); background: var(--fd-accent-soft); }
.fd-list__icon .fd-icon,
.fd-activity-list__icon .fd-icon { width: 1.125rem; height: 1.125rem; }
.fd-action-list .is-selected { background: var(--fd-accent-soft); }
.fd-action-list .is-disabled { color: var(--fd-color-text-disabled); background: var(--fd-color-disabled); }
.fd-action-list .is-disabled small { color: inherit; }
.fd-activity-list { width: min(100%, 48rem); }
.fd-activity-list li { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: 1rem; padding: 0 0 1.5rem; }
.fd-activity-list li:not(:last-child)::after { content: ""; position: absolute; top: 2.75rem; bottom: .25rem; left: 1.25rem; width: 1px; background: var(--fd-color-border-soft); }
.fd-activity-list li > span:nth-child(2) { display: grid; gap: .2rem; padding-top: .15rem; }
.fd-activity-list small,
.fd-activity-list time { color: var(--fd-color-text-subtle); font-size: .8125rem; }
.fd-people-list { width: min(100%, 48rem); overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-people-list li { display: grid; min-height: 4.75rem; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-background); }
.fd-people-list li:last-child { border-bottom: 0; }
.fd-people-list li > span:nth-child(2) { display: grid; }
.fd-people-list small { color: var(--fd-color-text-subtle); }
.fd-avatar { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--fd-accent-contrast); border-radius: 50%; background: var(--fd-accent); font-size: .75rem; font-weight: 700; }
.fd-presence { display: inline-flex; align-items: center; gap: .375rem; color: var(--fd-color-success-text); font-size: .8125rem; }
.fd-presence i { width: .5rem; height: .5rem; border-radius: 50%; background: var(--fd-color-success); }
.fd-presence.is-away { color: var(--fd-color-warning-text); }
.fd-presence.is-away i { background: #b08800; }
.fd-list-empty { display: grid; width: min(100%, 40rem); min-height: 17rem; place-items: center; align-content: center; gap: .5rem; padding: 2rem; text-align: center; border: 1px dashed var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-list-empty > .fd-icon { width: 2rem; height: 2rem; color: var(--fd-color-text-subtle); }
.fd-list-empty > span { max-width: 28rem; color: var(--fd-color-text-subtle); }
.fd-list-empty .fd-button { margin-top: .5rem; }
.fd-list-skeleton { display: grid; width: min(100%, 46rem); gap: 0; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-list-skeleton > div { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-list-skeleton > div:last-child { border-bottom: 0; }
.fd-list-skeleton i { width: 2.5rem; height: 2.5rem; border-radius: 50%; }
.fd-list-skeleton span { display: grid; gap: .5rem; }
.fd-list-skeleton b { display: block; width: 70%; height: .875rem; }
.fd-list-skeleton b:last-child { width: 45%; height: .75rem; }
.fd-heading { margin: .5rem 0; color: var(--fd-color-text); font-family: var(--fd-font-family); font-weight: 700; text-wrap: balance; }
.fd-heading--display { font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1.14; letter-spacing: -.03em; }
.fd-heading--1 { font-size: clamp(2.5rem, 5vw, 3rem); line-height: 1.25; letter-spacing: -.025em; }
.fd-heading--2 { font-size: clamp(2rem, 4vw, 2.375rem); line-height: 1.26; letter-spacing: -.02em; }
.fd-heading--3 { font-size: clamp(1.625rem, 3vw, 1.875rem); line-height: 1.2; letter-spacing: -.015em; }
.fd-heading--4 { font-size: 1.5rem; line-height: 1.25; letter-spacing: -.01em; }
.fd-heading--5 { font-size: 1.25rem; line-height: 1.3; }
.fd-heading--6 { font-size: 1rem; line-height: 1.5; }
.fd-type-scale { display: grid; width: 100%; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-type-scale > div { display: grid; grid-template-columns: 7rem minmax(14rem, 1fr) minmax(11rem, auto) 12rem; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-type-scale > div:last-child { border-bottom: 0; }
.fd-type-scale > div > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.fd-type-scale .fd-heading { margin: 0; }
.fd-type-scale code,
.fd-heading-specimen code { padding: .2rem .375rem; border-radius: .25rem; background: var(--fd-color-surface-strong); font-size: .8125rem; white-space: nowrap; }
.fd-type-scale small { color: var(--fd-color-text-subtle); font-variant-numeric: tabular-nums; }
.fd-heading-specimen { display: grid; width: 100%; grid-template-columns: minmax(0, 1.35fr) minmax(19rem, .65fr); overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-heading-specimen__preview { display: grid; min-width: 0; min-height: 20rem; align-content: center; gap: .75rem; padding: clamp(1.5rem, 5cqw, 3rem); border-right: 1px solid var(--fd-color-border-soft); }
.fd-heading-specimen__preview > * { max-width: 44rem; margin-block: 0; }
.fd-heading-specimen__preview .fd-heading { margin: 0; }
.fd-heading-specimen__preview .fd-text-lead,
.fd-heading-specimen__preview > p:not(.fd-kicker) { color: var(--fd-color-text-subtle); }
.fd-kicker { color: var(--fd-color-link); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.fd-heading-context { display: flex; flex-wrap: wrap; align-items: center; gap: .375rem; color: var(--fd-color-text-subtle); font-size: .8125rem; }
.fd-heading-context .fd-icon { width: .875rem; height: .875rem; }
.fd-heading-specimen__metrics { display: grid; min-width: 0; align-content: center; margin: 0; padding: 1.25rem; }
.fd-heading-specimen__metrics > div { display: grid; grid-template-columns: minmax(7rem, .8fr) minmax(0, 1.2fr); gap: .75rem; padding: .625rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-heading-specimen__metrics > div:last-child { border-bottom: 0; }
.fd-heading-specimen__metrics dt { color: var(--fd-color-text-subtle); font-size: .8125rem; }
.fd-heading-specimen__metrics dd { min-width: 0; margin: 0; font-size: .875rem; font-weight: 600; overflow-wrap: anywhere; }
.fd-heading-specimen__preview--surface { align-content: end; border-radius: 0; background: var(--fd-color-surface); }
.fd-heading-specimen__preview--module { min-height: 13rem; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; align-content: center; }
.fd-heading-specimen__preview--module > .fd-icon { width: 2rem; height: 2rem; color: var(--fd-color-link); }
.fd-heading-specimen__preview--module > div { display: grid; gap: .375rem; }
.fd-heading-specimen__preview--compact { min-height: 18rem; align-content: center; }
.fd-heading-specimen__preview--compact > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fd-heading-specimen__preview--compact .fd-list { width: 100%; }
.fd-heading-specimen__preview--label { min-height: 10rem; align-content: center; }
@container (max-width: 60rem) {
  .fd-type-scale > div { grid-template-columns: minmax(0, 1fr) auto; }
  .fd-type-scale > div > span,
  .fd-type-scale > div > strong { grid-column: 1 / -1; }
}
@container (max-width: 48rem) {
  .fd-heading-specimen { grid-template-columns: 1fr; }
  .fd-heading-specimen__preview { min-height: 16rem; border-right: 0; border-bottom: 1px solid var(--fd-color-border-soft); }
}
@container (max-width: 30rem) {
  .fd-heading-specimen__preview { min-height: 14rem; padding: 1.25rem; }
  .fd-heading-specimen__metrics > div { grid-template-columns: 1fr; gap: .2rem; }
  .fd-type-scale > div { grid-template-columns: 1fr; }
  .fd-type-scale > div > * { grid-column: 1; }
  .fd-heading-specimen__preview--module { grid-template-columns: auto minmax(0, 1fr); }
  .fd-heading-specimen__preview--module .fd-icon-button { grid-column: 2; justify-self: end; }
}

/* Icon button documentation and public variants */
.fd-icon-button .fd-icon { width: 1.25rem; height: 1.25rem; }
.fd-icon-button--subtle { border-color: var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-icon-button--primary { color: var(--fd-accent-contrast); border-color: var(--fd-accent); background: var(--fd-accent); }
.fd-icon-button--danger { color: var(--fd-color-danger-contrast); border-color: var(--fd-color-danger); background: var(--fd-color-danger); }
.fd-icon-button--danger-quiet { color: var(--fd-color-danger-text); }
.fd-icon-button--small { width: 2.75rem; min-height: 2.75rem; }
.fd-icon-button--small .fd-icon { width: 1.125rem; height: 1.125rem; }
.fd-icon-button--large { width: 3.5rem; min-height: 3.5rem; }
.fd-icon-button--large .fd-icon { width: 1.5rem; height: 1.5rem; }
.fd-icon-button--square { border-radius: .25rem; }
.fd-icon-button--circle { border-radius: 50%; }
.fd-icon-button[aria-pressed="true"] { color: var(--fd-accent-soft-contrast); border-color: var(--fd-accent); background: var(--fd-accent-soft); }
.fd-icon-button.is-hover { color: var(--fd-color-link); border-color: var(--fd-color-border); background: var(--fd-color-surface-strong); }
.fd-icon-button.is-active { color: var(--fd-accent-soft-contrast); border-color: var(--fd-accent); background: var(--fd-accent-soft); transform: translateY(1px); }
.fd-icon-button.is-loading { cursor: wait; }
.fd-icon-anatomy { display: grid; width: min(100%, 48rem); grid-template-columns: minmax(17rem, 1fr) minmax(14rem, .85fr); gap: 1.5rem; }
.fd-icon-anatomy__stage { position: relative; display: grid; min-height: 16rem; place-items: center; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-icon-anatomy__line { position: absolute; color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; }
.fd-icon-anatomy__line::before { content: ''; position: absolute; top: 50%; width: 3rem; border-top: 1px solid var(--fd-color-border); }
.fd-icon-anatomy__line--icon { top: calc(50% - 3.25rem); left: calc(50% + 2.5rem); }
.fd-icon-anatomy__line--icon::before { right: calc(100% + .5rem); }
.fd-icon-anatomy__line--target { top: calc(50% + 3rem); right: calc(50% + 2.5rem); }
.fd-icon-anatomy__line--target::before { left: calc(100% + .5rem); }
.fd-icon-anatomy dl { display: grid; align-content: start; margin: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-icon-anatomy dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-icon-anatomy dt { color: var(--fd-color-text-subtle); }
.fd-icon-anatomy dd { margin: 0; font-weight: 700; text-align: right; }
.fd-icon-specimens { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.fd-icon-specimens--baseline { align-items: end; }
.fd-icon-specimens article { display: grid; min-width: 8.5rem; min-height: 7.5rem; place-items: center; align-content: center; gap: .875rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-icon-specimens article > span:last-child { color: var(--fd-color-text-subtle); font-size: .8125rem; font-weight: 700; text-align: center; }
.fd-icon-button-wrap { position: relative; display: inline-grid; }
.fd-icon-button__badge { position: absolute; top: -.35rem; right: -.5rem; display: grid; min-width: 1.35rem; height: 1.35rem; place-items: center; padding: 0 .25rem; color: #fff; border: 2px solid var(--fd-color-surface); border-radius: 999px; background: var(--fd-color-danger); font-size: .6875rem; font-weight: 700; }
.fd-icon-button__dot { position: absolute; top: .1rem; right: .1rem; width: .65rem; height: .65rem; border: 2px solid var(--fd-color-surface); border-radius: 50%; background: var(--fd-color-success); }
.fd-icon-toolbar { display: inline-flex; max-width: 100%; align-items: center; gap: .25rem; padding: .25rem; border: 1px solid var(--fd-color-border-soft); border-radius: calc(var(--fd-radius) + .25rem); background: var(--fd-color-surface); }
.fd-icon-toolbar > [role="separator"] { width: 1px; height: 2rem; margin: 0 .25rem; background: var(--fd-color-border-soft); }
.fd-icon-toolbar .fd-icon-button { flex: 0 0 auto; }
.fd-icon-tooltip-grid { grid-template-columns: repeat(3, minmax(8rem, 1fr)); padding-block: 4rem; }
.fd-icon-tooltip-grid .fd-tooltip-wrap { justify-content: center; }
.fd-icon-tooltip-grid .fd-tooltip-wrap:hover .fd-tooltip { opacity: 1; transform: translate(-50%, 0); }
.fd-icon-fab-stage { position: relative; display: grid; min-height: 18rem; align-content: center; overflow: hidden; padding: 2rem 6rem 2rem 2rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: linear-gradient(135deg, var(--fd-color-surface), var(--fd-accent-soft)); }
.fd-icon-fab-stage > div { max-width: 28rem; }
.fd-icon-fab-stage h4 { margin: .75rem 0 .25rem; font-size: 1.5rem; }
.fd-icon-fab-stage p { margin: 0; color: var(--fd-color-text-subtle); }
.fd-icon-button--floating { position: absolute; right: 1.5rem; bottom: 1.5rem; box-shadow: var(--fd-shadow-hover); }
.fd-icon-state-grid { display: grid; grid-template-columns: repeat(4, minmax(7rem, 1fr)); gap: .75rem; }
.fd-icon-state-grid article { display: grid; min-height: 8rem; place-items: center; align-content: center; gap: .875rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-icon-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
@container (max-width: 42rem) {
  .fd-icon-anatomy { grid-template-columns: 1fr; }
  .fd-icon-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-icon-tooltip-grid { grid-template-columns: 1fr; gap: 4rem; }
}
@container (max-width: 26rem) {
  .fd-icon-specimens article { min-width: calc(50% - .5rem); flex: 1 1 calc(50% - .5rem); }
  .fd-icon-state-grid { grid-template-columns: 1fr; }
  .fd-icon-toolbar { width: 100%; justify-content: space-between; }
}
.fd-section { display: grid; gap: 1.5rem; padding: clamp(1.5rem, 4vw, 3rem); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-section__header { display: flex; align-items: end; justify-content: space-between; }
.fd-tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.fd-tile { display: flex; min-height: 6rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow); text-decoration: none; }
.fd-overlay-demo { position: relative; min-height: 18rem; width: min(100%, 40rem); overflow: hidden; border-radius: var(--fd-radius); background: linear-gradient(135deg, #6f7480, #202228); }
.fd-overlay { position: absolute; inset: auto 0 0; padding: 3rem 1.5rem 1.5rem; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.8)); }
.fd-marker { position: absolute; top: 25%; right: 20%; display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--fd-accent-contrast); border: 2px solid #fff; border-radius: 50% 50% 50% .25rem; background: var(--fd-accent); box-shadow: var(--fd-shadow-hover); transform: rotate(-45deg); }
.fd-marker .fd-icon { transform: rotate(45deg); }
.fd-dotnav { display: flex; align-items: center; justify-content: center; gap: .125rem; }
.fd-dotnav button { position: relative; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: pointer; }
.fd-dotnav button::before { content: ""; width: .625rem; height: .625rem; border: 1px solid var(--fd-color-border); border-radius: 99px; background: transparent; transition: width .16s, background .16s; }
.fd-dotnav button[aria-current="true"]::before { width: 1.375rem; border-color: var(--fd-accent); background: var(--fd-accent); }
.fd-dotnav button:focus-visible,
.fd-dotnav button.is-focus { outline: 3px solid var(--fd-color-focus); outline-offset: -3px; }
.fd-slidenav { display: grid; width: 2.75rem; min-width: 2.75rem; height: 2.75rem; place-items: center; padding: 0; color: var(--fd-color-text); border: 1px solid var(--fd-color-border); border-radius: 50%; background: var(--fd-color-background); cursor: pointer; }
.fd-slidenav:focus-visible { outline: 3px solid var(--fd-color-focus); outline-offset: 2px; }
.fd-slidenav:active:not(:disabled) { border-color: var(--fd-color-text); transform: translateY(1px); }
.fd-slidenav:disabled { color: var(--fd-color-text-disabled); border-color: var(--fd-color-border-disabled); background: var(--fd-color-disabled); cursor: not-allowed; }
.fd-carousel { display: grid; width: min(100%, 54rem); min-width: 0; gap: 1rem; outline: none; touch-action: pan-y; }
.fd-carousel:focus-visible { outline: 3px solid var(--fd-color-focus); outline-offset: 4px; }
.fd-carousel__stage { position: relative; display: grid; min-width: 0; min-height: 21rem; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-carousel__slide { display: grid; min-width: 0; grid-template-columns: minmax(10rem, .8fr) minmax(0, 1.2fr); align-items: stretch; }
.fd-carousel__slide[hidden] { display: none; }
.fd-carousel__visual { display: grid; min-height: 21rem; place-items: center; color: var(--fd-accent-contrast); background: var(--fd-accent); }
.fd-carousel__visual .fd-icon { width: 4rem; height: 4rem; }
.fd-carousel__slide > div { display: grid; min-width: 0; align-content: center; gap: .75rem; padding: clamp(1.5rem, 5cqw, 3rem); }
.fd-carousel__slide > div > * { margin: 0; }
.fd-carousel__slide h4 { font-size: clamp(1.75rem, 4cqw, 2.75rem); line-height: 1.08; letter-spacing: -.025em; }
.fd-carousel__slide p { color: var(--fd-color-text-subtle); line-height: 1.55; }
.fd-carousel__footer { display: flex; min-height: 2.75rem; align-items: center; justify-content: center; gap: 1rem; }
.fd-carousel__status { min-width: 4rem; color: var(--fd-color-text-subtle); font-size: .875rem; font-variant-numeric: tabular-nums; text-align: center; }
.fd-carousel--dots .fd-carousel__footer { justify-content: space-between; }
.fd-carousel--slidenav .fd-carousel__footer { justify-content: center; }
.fd-carousel__stage-wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; }
.fd-carousel--combined .fd-carousel__stage { min-height: 24rem; }
.fd-carousel--combined .fd-carousel__visual { min-height: 24rem; }
.fd-carousel-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fd-carousel-state-grid article { display: grid; min-height: 8rem; place-items: center; align-content: center; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-carousel-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
@container (max-width: 36rem) {
  .fd-carousel__slide { grid-template-columns: 1fr; }
  .fd-carousel__visual,
  .fd-carousel--combined .fd-carousel__visual { min-height: 10rem; }
  .fd-carousel__stage,
  .fd-carousel--combined .fd-carousel__stage { min-height: 25rem; }
  .fd-carousel__stage-wrap { grid-template-columns: 1fr; }
  .fd-carousel__stage-wrap > .fd-slidenav { grid-row: 2; }
  .fd-carousel__stage-wrap > .fd-slidenav:first-child { justify-self: start; }
  .fd-carousel__stage-wrap > .fd-slidenav:last-child { justify-self: end; margin-top: -3.75rem; }
  .fd-carousel-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.fd-text-lead { font-size: 1.25rem; line-height: 1.6; }
.fd-text-muted { color: var(--fd-color-text-subtle); }
.fd-text-small { font-size: .875rem; line-height: 1.5; }
.fd-text-caption { color: var(--fd-color-text-subtle); font-size: .75rem; line-height: 1.4; }
.fd-font-regular { font-weight: 400; }
.fd-font-medium { font-weight: 500; }
.fd-font-semibold { font-weight: 600; }
.fd-font-bold { font-weight: 700; }
.fd-text-uppercase { font-size: .875rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.fd-text-truncate { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fd-typeface-specimen { display: grid; width: 100%; grid-template-columns: minmax(0, 1.35fr) minmax(18rem, .65fr); overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-typeface-specimen__sample { display: grid; min-width: 0; gap: .35rem; padding: clamp(1.5rem, 5cqw, 3rem); border-right: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-typeface-specimen__sample strong { font-size: clamp(5rem, 16cqw, 9rem); font-weight: 650; line-height: .9; letter-spacing: -.06em; }
.fd-typeface-specimen__sample p { min-width: 0; margin: 0; font-size: clamp(.875rem, 2.5cqw, 1.25rem); letter-spacing: .04em; overflow-wrap: anywhere; }
.fd-typeface-specimen__metrics { display: grid; align-content: center; margin: 0; padding: 1.25rem; }
.fd-typeface-specimen__metrics div { display: grid; gap: .2rem; padding: .75rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-typeface-specimen__metrics div:last-child { border-bottom: 0; }
.fd-typeface-specimen__metrics dt { color: var(--fd-color-text-subtle); font-size: .75rem; text-transform: uppercase; }
.fd-typeface-specimen__metrics dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.fd-body-scale { display: grid; width: 100%; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-body-scale article { display: grid; grid-template-columns: 6rem minmax(0, 1fr) auto; align-items: baseline; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-body-scale article:last-child { border-bottom: 0; }
.fd-body-scale article > span,
.fd-type-weight-grid article > span,
.fd-link-specimens article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.fd-body-scale p { max-width: 62ch; margin: 0; }
.fd-body-scale code { color: var(--fd-color-text-subtle); font-size: .75rem; white-space: nowrap; }
.fd-type-weight-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fd-type-weight-grid article { display: grid; min-height: 8rem; align-content: center; gap: .75rem; padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-type-weight-grid p { margin: 0; font-size: clamp(1.125rem, 3cqw, 1.5rem); }
.fd-prose { width: min(100%, 65ch); color: var(--fd-color-text); font-size: 1rem; line-height: 1.65; }
.fd-prose h4 { margin: 0 0 1rem; font-size: 1.5rem; line-height: 1.25; text-wrap: balance; }
.fd-prose p { margin: 0 0 1.1em; }
.fd-prose > :last-child { margin-bottom: 0; }
.fd-inline-specimens { display: grid; width: min(100%, 54rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-inline-specimens p { margin: .625rem 0; }
.fd-inline-specimens mark { padding: .1em .25em; color: var(--fd-color-warning-text); border-radius: .2rem; background: var(--fd-color-warning-soft); }
.fd-inline-specimens abbr { text-decoration-style: dotted; text-underline-offset: .2em; cursor: help; }
.fd-inline-specimens code,
.fd-inline-specimens kbd,
.fd-technical-type code { padding: .15rem .35rem; border: 1px solid var(--fd-color-border-soft); border-radius: .25rem; background: var(--fd-color-surface-strong); font: 600 .8125rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.fd-inline-specimens kbd { box-shadow: 0 2px 0 var(--fd-color-border); }
.fd-inline-specimens del { color: var(--fd-color-danger-text); }
.fd-inline-specimens ins { color: var(--fd-color-success-text); text-decoration-thickness: .12em; text-underline-offset: .18em; }
.fd-link-specimens { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.fd-link-specimens article { display: grid; min-width: 0; align-content: center; gap: .75rem; padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-link-specimens p { margin: 0; }
.fd-link-specimens .fd-link { width: fit-content; max-width: 100%; overflow-wrap: anywhere; }
.fd-type-list-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.fd-type-list-grid article { padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-type-list-grid h4 { margin: 0 0 .75rem; }
.fd-type-list-grid ul,
.fd-type-list-grid ol { display: grid; gap: .5rem; margin: 0; padding-left: 1.25rem; }
.fd-type-list-grid dl { display: grid; margin: 0; }
.fd-type-list-grid dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-type-list-grid dl div:last-child { border-bottom: 0; }
.fd-type-list-grid dd { margin: 0; font-weight: 600; text-align: right; }
.fd-quote { width: min(100%, 50rem); margin: 0; padding: clamp(1.5rem, 5cqw, 3rem); border-left: .3rem solid var(--fd-accent); border-radius: 0 var(--fd-radius) var(--fd-radius) 0; background: var(--fd-color-surface); }
.fd-quote blockquote { margin: 0; }
.fd-quote blockquote p { margin: 0; font-size: clamp(1.5rem, 4cqw, 2.25rem); font-weight: 600; line-height: 1.3; letter-spacing: -.02em; text-wrap: balance; }
.fd-quote figcaption { display: grid; gap: .1rem; margin-top: 1.5rem; color: var(--fd-color-text-subtle); }
.fd-quote figcaption strong { color: var(--fd-color-text); }
.fd-technical-type { display: grid; width: min(100%, 52rem); gap: 1rem; }
.fd-technical-type > p { margin: 0; }
.fd-code-block { max-width: 100%; overflow: auto; margin: 0; padding: 1.25rem; color: #f8fafc; border-radius: var(--fd-radius); background: #202228; font: .875rem/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.fd-code-block code { padding: 0; border: 0; background: transparent; font: inherit; white-space: pre; }
.fd-technical-type dl { display: grid; margin: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-technical-type dl div { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-technical-type dd { min-width: 0; margin: 0; overflow-wrap: anywhere; }
.fd-editorial-specimen { display: grid; width: 100%; grid-template-columns: minmax(0, 1.1fr) minmax(20rem, .9fr); overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-editorial-specimen > header { display: grid; align-content: center; gap: .75rem; padding: clamp(1.5rem, 5cqw, 3rem); border-right: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-editorial-specimen > header > * { margin-block: 0; }
.fd-editorial-specimen > .fd-prose { align-self: center; padding: clamp(1.5rem, 4cqw, 2.5rem); }
.fd-editorial-specimen__meta { display: flex; flex-wrap: wrap; gap: .5rem 1rem; color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 600; }
.fd-editorial-specimen__meta span + span::before { content: '·'; margin-right: 1rem; }
@container (max-width: 48rem) {
  .fd-typeface-specimen,
  .fd-editorial-specimen { grid-template-columns: 1fr; }
  .fd-typeface-specimen__sample,
  .fd-editorial-specimen > header { border-right: 0; border-bottom: 1px solid var(--fd-color-border-soft); }
  .fd-body-scale article { grid-template-columns: 5rem minmax(0, 1fr); }
  .fd-body-scale code { grid-column: 2; }
  .fd-type-list-grid { grid-template-columns: 1fr; }
}
@container (max-width: 32rem) {
  .fd-type-weight-grid,
  .fd-inline-specimens,
  .fd-link-specimens { grid-template-columns: 1fr; }
  .fd-body-scale article { grid-template-columns: 1fr; }
  .fd-body-scale code { grid-column: 1; }
  .fd-editorial-specimen > header,
  .fd-editorial-specimen > .fd-prose { padding: 1.25rem; }
  .fd-editorial-specimen__meta { display: grid; gap: .25rem; }
  .fd-editorial-specimen__meta span + span::before { content: none; }
}
.fd-u-flex { display: flex; }
.fd-u-gap-3 { gap: .75rem; }
.fd-u-items-center { align-items: center; }
.fd-u-p-4 { padding: 1rem; }
.fd-u-surface { border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-u-grow { flex: 1; }

/* Extended isolated patterns */
.fd-masthead { display: flex; min-height: 5rem; align-items: center; gap: 2rem; padding: 1rem 1.5rem; color: var(--fd-color-text); border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-background); box-shadow: var(--fd-shadow-navigation); }
.fd-masthead nav { display: flex; gap: 1.25rem; margin-left: auto; }
.fd-masthead nav a { color: var(--fd-color-text); text-decoration: none; }
.fd-inputfield-wrapper { min-width: min(100%, 28rem); }
.fd-inputfield-wrapper .fd-icon-button { min-height: auto; border: 0; border-radius: 0; }
.fd-module { display: grid; gap: 1.25rem; width: min(100%, 36rem); padding: 1.5rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow); }
.fd-module h2 { margin: .5rem 0 0; }
.fd-module footer { padding-top: 1rem; border-top: 1px solid var(--fd-color-border-soft); }
.fd-workspace { display: grid; grid-template-columns: minmax(12rem, .35fr) minmax(18rem, 1fr); width: 100%; min-height: 20rem; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-workspace > aside { display: grid; align-content: start; gap: 1rem; padding: 1rem; border-right: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-workspace__canvas { display: grid; min-height: 100%; place-items: center; padding: 2rem; background-image: radial-gradient(var(--fd-color-border-soft) .75px, transparent .75px); background-size: 1rem 1rem; }
.fd-offcanvas-demo { display: grid; grid-template-columns: 1fr minmax(15rem, .55fr); width: 100%; min-height: 18rem; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-offcanvas-demo > main { display: grid; place-items: center; padding: 2rem; }
.fd-offcanvas { display: grid; align-content: start; gap: 1rem; padding: 1.25rem; border-left: 1px solid var(--fd-color-border-soft); background: var(--fd-color-background); box-shadow: -4px 0 16px rgba(0,0,0,.12); }
.fd-offcanvas header { display: flex; align-items: center; justify-content: space-between; }
.fd-dropdown-demo { display: flex; width: 100%; align-items: start; gap: 1rem; }
.fd-dropdown { position: relative; }
.fd-dropdown summary { list-style: none; }
.fd-dropdown__menu { position: absolute; z-index: 3; top: calc(100% + .5rem); left: 0; display: grid; min-width: 12rem; padding: .5rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow-hover); }
.fd-dropdown__menu button { padding: .625rem; color: var(--fd-color-text); text-align: left; border: 0; border-radius: .375rem; background: transparent; }
.fd-navbar-dd { display: grid; grid-template-columns: 1fr 1fr; flex: 1; gap: 2rem; padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow-navigation); }
.fd-navbar-dd div { display: grid; align-content: start; gap: .5rem; }
.fd-lightbox { position: relative; display: grid; width: min(100%, 42rem); justify-items: center; gap: 1rem; padding: 1.25rem; color: #fff; border-radius: var(--fd-radius); background: #1f1f24; box-shadow: 0 1.5rem 4rem rgba(0,0,0,.4); }
.fd-lightbox__close { position: absolute; top: .75rem; right: .75rem; color: #fff; border-color: rgba(255,255,255,.4); background: rgba(0,0,0,.45); }
.fd-lightbox__media { display: grid; width: 100%; min-height: 16rem; place-items: center; color: var(--fd-accent-soft-contrast); border-radius: .375rem; background: var(--fd-accent-soft); font-size: 2rem; font-weight: 700; }
.fd-lightbox .fd-slidenav { margin: 0 .25rem; }
.fd-notifications { display: grid; width: min(100%, 34rem); gap: .75rem; }
.fd-notification { display: grid; grid-template-columns: auto 1fr auto; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow); }
.fd-notification p { margin: .25rem 0 0; color: var(--fd-color-text-subtle); }
.fd-description-list { display: grid; width: min(100%, 34rem); margin: 0; }
.fd-description-list div { display: grid; grid-template-columns: 1fr 1.5fr; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-description-list dt { color: var(--fd-color-text-subtle); }
.fd-description-list dd { margin: 0; font-weight: 500; }
.fd-search-pattern { display: grid; width: min(100%, 36rem); gap: 1rem; }
.fd-comment { display: grid; grid-template-columns: auto 1fr; gap: .875rem; width: min(100%, 38rem); padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-comment__avatar { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--fd-accent-contrast); border-radius: 50%; background: var(--fd-accent); font-size: .75rem; font-weight: 700; }
.fd-comment header { display: flex; justify-content: space-between; gap: 1rem; }
.fd-comment time { color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-comment p { margin: .5rem 0; }
.fd-panel { overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-panel > header { display: flex; align-items: center; justify-content: space-between; padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-panel > header h2 { margin: 0; font-size: 1.25rem; }
.fd-panel__scrollable { max-height: 10rem; padding: 0 1rem; overflow: auto; scrollbar-color: var(--fd-color-border) transparent; }
.fd-panel__scrollable p { padding-bottom: .75rem; border-bottom: 1px solid var(--fd-color-border-soft); }

.fd-accent-playground { display: grid; width: min(100%, 48rem); gap: 1.5rem; }
.fd-accent-picker { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-accent-picker input[type="color"] { width: 3rem; height: 3rem; padding: .2rem; border: 1px solid var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-background); cursor: pointer; }
.fd-accent-picker output { min-width: 5.5rem; font: 600 .875rem/1.5 ui-monospace, SFMono-Regular, Menlo, monospace; text-transform: uppercase; }
.fd-accent-presets { display: flex; flex-wrap: wrap; gap: .5rem; }
.fd-accent-swatch { width: 2.25rem; height: 2.25rem; border: 2px solid var(--fd-color-background); border-radius: 50%; background: var(--swatch); box-shadow: 0 0 0 1px var(--fd-color-border); cursor: pointer; }
.fd-accent-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--fd-color-background), 0 0 0 4px var(--fd-color-text); }
.fd-accent-demo { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; padding: 1.5rem; color: var(--fd-accent-soft-contrast); border-radius: var(--fd-radius); background: var(--fd-accent-soft); }
.fd-accent-demo .fd-checkbox,
.fd-accent-demo .fd-radio,
.fd-accent-demo .fd-switch { color: inherit; }

/* Production example layouts */
.fd-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.fd-component-sections { display: grid; width: 100%; gap: clamp(2.5rem, 6vw, 5rem); align-self: start; }
.fd-demo-section { display: grid; min-width: 0; gap: 1.25rem; }
.fd-demo-section > header { display: grid; gap: .375rem; max-width: 46rem; }
.fd-demo-section > header > * { margin: 0; }
.fd-demo-section > header > p:not(.fd-eyebrow) { color: var(--fd-color-text-subtle); }
.fd-demo-section--split { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }
.fd-demo-section--split > article { display: grid; min-width: 0; align-content: start; gap: 1rem; }
.fd-demo-section--split header > * { margin: 0; }
.fd-eyebrow { color: var(--fd-color-link); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }

.fd-choice-group { display: flex; min-width: 0; gap: 1rem; }
.fd-choice-group--horizontal { flex-wrap: wrap; align-items: flex-start; }
.fd-choice-group--vertical { width: min(100%, 36rem); flex-direction: column; gap: 0; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-choice-group--vertical > label { width: 100%; padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-choice-group--vertical > label:last-child { border-bottom: 0; }
.fd-choice-group label > span:last-child { display: grid; }
.fd-choice-group label small { margin-top: .125rem; color: var(--fd-color-text-subtle); font-size: .8125rem; line-height: 1.4; }

.fd-table--interactive { min-width: 42rem; }
.fd-table--interactive tbody tr { transition: background .15s, opacity .15s; }
.fd-table--interactive tbody tr.is-hover { background: color-mix(in srgb, var(--fd-color-link) 8%, var(--fd-color-background)); }
.fd-table--interactive tbody tr.is-selected { background: var(--fd-accent-soft); color: var(--fd-accent-soft-contrast); }
.fd-table--interactive tbody tr.is-disabled { opacity: .45; background: var(--fd-color-disabled); }
.fd-table--interactive td:first-child,
.fd-table--interactive th:first-child { width: 3.25rem; }
.fd-table--interactive td:last-child,
.fd-table--interactive th:last-child { width: 4rem; text-align: right; }
.fd-table--interactive .fd-checkbox { width: fit-content; }
.fd-table__sort { display: inline-flex; align-items: center; gap: .375rem; padding: 0; color: inherit; border: 0; background: transparent; font-weight: 700; cursor: pointer; }
.fd-table__sort .fd-icon { width: .875rem; height: .875rem; }
.fd-table__meta { display: block; margin-top: .125rem; color: var(--fd-color-text-subtle); font-size: .8125rem; }
.fd-table-empty { display: grid; min-height: 15rem; place-items: center; align-content: center; gap: .5rem; padding: 2rem; text-align: center; border: 1px dashed var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-table-empty > .fd-icon { width: 2rem; height: 2rem; color: var(--fd-color-text-subtle); }
.fd-table-empty span { color: var(--fd-color-text-subtle); }
.fd-table-empty .fd-button { margin-top: .5rem; }
.fd-table-skeleton { display: grid; min-height: 15rem; align-content: center; gap: 1rem; padding: 2rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-table-skeleton .fd-skeleton { height: 1.5rem; }

.fd-search--labelled,
.fd-search--compact { width: min(100%, 42rem); }
.fd-search--compact .fd-input { border-radius: var(--fd-radius) 0 0 var(--fd-radius); }
.fd-search__submit { min-height: var(--fd-control-height); border-radius: 0 var(--fd-radius) var(--fd-radius) 0; border-left: 0; }

.fd-card-grid { display: grid; min-width: 0; gap: 1.5rem; align-items: stretch; }
.fd-card-grid--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fd-card-grid--three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-card-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fd-card__image { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.fd-card__topline { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 1rem; }
.fd-card__meta { color: var(--fd-color-text-subtle); font-size: .8125rem; white-space: nowrap; }
.fd-card__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: .25rem 0; padding: 1rem 0; border-top: 1px solid var(--fd-color-border-soft); border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-card__facts > div { display: grid; min-width: 0; gap: .25rem; }
.fd-card__facts dt { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.fd-card__facts dd { margin: 0; font-weight: 700; line-height: 1.35; }
.fd-card__price { display: block; margin-top: auto; font-size: 1.75rem; line-height: 1.15; }
.fd-card__price small,
.fd-card--price > strong small { color: var(--fd-color-text-subtle); font-size: .875rem; font-weight: 400; }
.fd-card--product { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.fd-card--interactive.fd-card--product { width: min(100%, 28rem); }
.fd-card--product .fd-card__body { min-height: 18.5rem; align-content: start; gap: 1rem; }
.fd-card--product h3,
.fd-card--product h4 { font-size: 1.375rem; line-height: 1.2; }
.fd-card--product .fd-card__body > p { color: var(--fd-color-text-subtle); line-height: 1.55; }
.fd-card--product .fd-button { align-self: end; margin-top: auto; }
.fd-card__visual { display: grid; min-height: 12rem; place-items: center; align-content: center; gap: .75rem; color: var(--fd-accent-soft-contrast); background: var(--fd-accent-soft); }
.fd-card__visual .fd-icon { width: 3rem; height: 3rem; }
.fd-card__visual span { font-weight: 700; }
.fd-card__visual--dark { color: #fff; background: #242631; }
.fd-card--article { display: grid; grid-template-rows: auto 1fr; }
.fd-card--article .fd-card__body { align-content: start; }
.fd-card--article footer { display: flex; align-items: center; gap: .75rem; margin-top: auto; padding-top: .75rem; }
.fd-card--article footer > span:last-child { display: grid; }
.fd-card--article footer small { color: var(--fd-color-text-subtle); }
.fd-card__avatar { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--fd-accent-contrast); border-radius: 50%; background: var(--fd-accent); font-size: .75rem; font-weight: 700; }
.fd-card--article-horizontal { grid-template-columns: minmax(10rem, .85fr) 1.15fr; grid-template-rows: 1fr; }
.fd-card--article-horizontal .fd-card__image { height: 100%; aspect-ratio: auto; }
.fd-card--offer { display: grid; grid-template-columns: minmax(18rem, 1.1fr) minmax(18rem, .9fr); }
.fd-card--offer .fd-card__image { height: 100%; min-height: 27rem; aspect-ratio: auto; }
.fd-card--offer .fd-card__body { align-content: center; padding: clamp(2rem, 5vw, 4rem); }
.fd-card--offer h4 { font-size: clamp(2rem, 4vw, 3.25rem); line-height: 1.05; letter-spacing: -.025em; }
.fd-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .75rem !important; }
.fd-card--task { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; min-height: 7rem; padding: 1.25rem; color: var(--fd-color-text); text-decoration: none; transition: transform .16s, box-shadow .16s; }
.fd-card--task > span:nth-child(2) { display: grid; }
.fd-card--task small { margin-top: .125rem; color: var(--fd-color-text-subtle); }
.fd-card__icon { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; color: var(--fd-accent-contrast); border-radius: var(--fd-radius); background: var(--fd-accent); }
.fd-card--price { display: grid; align-content: start; gap: 1rem; padding: 1.5rem; }
.fd-card--price > * { margin: 0; }
.fd-card--price > strong { font-size: 2rem; }
.fd-card--price .fd-button { margin-top: auto; }
.fd-card--state { display: grid; min-height: 9rem; align-content: end; gap: .25rem; padding: 1.25rem; }
.fd-card--state > span { color: var(--fd-color-text-subtle); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.fd-card--state.is-loading { align-content: center; gap: .75rem; }

.fd-masthead-demo { width: 100%; min-height: 31rem; }
.fd-masthead { position: relative; display: grid; width: 100%; gap: 0; padding: 0; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); box-shadow: var(--fd-shadow-navigation); }
.fd-masthead a { color: inherit; text-decoration: none; }
.fd-masthead__service { display: flex; min-height: 2.5rem; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 1.5rem; border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); font-size: .75rem; }
.fd-masthead__service nav,
.fd-masthead__service > div { display: flex; align-items: center; gap: 1.25rem; }
.fd-masthead__service a[aria-current="page"] { font-weight: 700; }
.fd-masthead__main { position: relative; display: flex; min-height: 5rem; align-items: center; gap: 2rem; padding: .75rem 1.5rem; background: var(--fd-color-background); }
.fd-masthead .fd-wordmark { color: var(--fd-color-text); }
.fd-masthead .fd-wordmark > span:last-child { display: grid; line-height: 1.05; }
.fd-masthead .fd-wordmark small { margin-top: .2rem; color: var(--fd-color-text-subtle); font-size: .625rem; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.fd-masthead__nav { display: flex; height: 100%; align-items: center; gap: 1.5rem; margin-left: auto; }
.fd-masthead__nav > a,
.fd-mega-menu > summary { display: flex; min-height: 3rem; align-items: center; gap: .25rem; font-weight: 500; cursor: pointer; }
.fd-mega-menu > summary { list-style: none; }
.fd-mega-menu > summary::-webkit-details-marker { display: none; }
.fd-mega-menu[open] > summary { color: var(--fd-color-link); }
.fd-mega-menu[open] > summary .fd-icon { transform: rotate(180deg); }
.fd-mega-menu__panel { position: absolute; z-index: 5; top: 100%; right: 0; left: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(15rem, .85fr); gap: 2rem; padding: 2rem; color: var(--fd-color-text); border-top: 1px solid var(--fd-color-border-soft); border-radius: 0 0 var(--fd-radius) var(--fd-radius); background: var(--fd-color-background); box-shadow: 0 .75rem 1.5rem rgba(0,0,0,.16); }
.fd-mega-menu__panel > div { display: grid; align-content: start; gap: .5rem; }
.fd-mega-menu__panel > div > a { display: grid; gap: .125rem; padding: .625rem; border-radius: .375rem; }
.fd-mega-menu__panel a span { color: var(--fd-color-text-subtle); font-size: .8125rem; }
.fd-mega-menu__panel aside { display: grid; align-content: start; gap: .75rem; padding: 1.25rem; border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-mega-menu__panel aside > * { margin: 0; }
.fd-masthead__actions { display: flex; align-items: center; gap: .5rem; }
.fd-masthead__menu { display: none; }

@container (max-width: 52rem) {
  .fd-card-grid--four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-tab-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-card--offer { grid-template-columns: 1fr; }
  .fd-card--offer .fd-card__image { min-height: 18rem; max-height: 24rem; }
  .fd-masthead__service nav { display: none; }
  .fd-masthead__nav { display: none; }
  .fd-masthead__menu { display: grid; }
  .fd-masthead-demo { min-height: auto; }
}

@container (max-width: 44rem) {
  .fd-card-grid--three { grid-template-columns: 1fr; }
}

@container (max-width: 34rem) {
  .fd-demo-section--split,
  .fd-card-grid--two,
  .fd-card-grid--three,
  .fd-card-grid--four,
  .fd-tab-state-grid { grid-template-columns: 1fr; }
  .fd-choice-group--horizontal { flex-direction: column; }
  .fd-card--article-horizontal { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .fd-card--article-horizontal .fd-card__image { height: auto; aspect-ratio: 3 / 2; }
  .fd-card--offer .fd-card__image { min-height: 14rem; }
  .fd-card--offer .fd-card__body { padding: 1.5rem; }
  .fd-card--offer h4 { font-size: 2rem; }
  .fd-card__facts { grid-template-columns: 1fr; }
  .fd-masthead__service { display: none; }
  .fd-masthead__main { padding: .75rem 1rem; }
  .fd-masthead__actions .fd-button { display: none; }
  .fd-checklist__summary { grid-template-columns: 1fr; gap: .75rem; }
  .fd-activity-list li { grid-template-columns: auto minmax(0, 1fr); }
  .fd-activity-list time { grid-column: 2; }
  .fd-people-list li { grid-template-columns: auto minmax(0, 1fr) auto; gap: .75rem; }
  .fd-people-list .fd-presence { grid-column: 2; }
  .fd-people-list .fd-icon-button { grid-column: 3; grid-row: 1 / span 2; }
}

/* Audited grid, state matrix, and card compositions */
.fd-layout-audit,
.fd-card-audit { display: grid; width: min(100%, var(--fd-content-max)); gap: 2.25rem; }
.fd-grid-demo { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--fd-grid-gap); min-height: 12rem; padding: 0; }
.fd-grid-demo span { display: grid; place-items: center; color: var(--fd-accent-contrast); border-radius: .25rem; background: var(--fd-accent); font-size: .75rem; font-weight: 700; }
.fd-metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--fd-grid-gap); }
.fd-metric-grid article { display: grid; gap: .25rem; min-height: 7.5rem; align-content: center; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow); }
.fd-metric-grid strong { font-size: 1.5rem; }
.fd-metric-grid span { color: var(--fd-color-text-subtle); font-size: .875rem; }

.fd-state-matrix { display: grid; width: min(100%, 68rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.25rem; align-items: start; }
.fd-state-matrix section { display: grid; align-content: start; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-state-matrix h3 { margin: 0; padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-surface); }
.fd-state-row { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: center; gap: 1rem; min-height: 4.75rem; padding: .75rem 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-state-row:last-child { border-bottom: 0; }
.fd-state-row > span:first-child { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; }
.fd-state-row .fd-input { min-width: 0; }
.fd-state-row .fd-details { width: 100%; }
.fd-state-row .fd-details summary { padding: .75rem .5rem; }
.fd-state-row .fd-tabs__list { width: 100%; }

.fd-card-audit > section { display: grid; gap: 1rem; }
.fd-card-audit > section > h3 { margin: 0; color: var(--fd-color-text-subtle); font-size: .875rem; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.fd-simple-card-grid,
.fd-standard-card-grid,
.fd-feature-card-grid { display: grid; gap: var(--fd-grid-gap); align-items: stretch; }
.fd-simple-card-grid { grid-template-columns: repeat(3, minmax(0, var(--fd-simple-card-width))); }
.fd-standard-card-grid { grid-template-columns: repeat(3, minmax(0, var(--fd-standard-card-width))); }
.fd-feature-card-grid { grid-template-columns: repeat(2, minmax(0, var(--fd-feature-card-width))); }
.fd-simple-card-grid .fd-simple-card { width: 100%; min-height: 6.125rem; }
.fd-product-card { display: grid; grid-template-rows: minmax(11rem, 18.6875rem) 1fr; min-height: 36.125rem; }
.fd-product-card .fd-card__media { min-height: 0; }
.fd-product-card .fd-card__body { align-content: start; }
.fd-product-card .fd-button { align-self: end; margin-top: auto; }
.fd-feature-card { display: grid; grid-template-rows: minmax(15rem, 30.5625rem) 1fr; min-height: 44.75rem; }
.fd-feature-card .fd-card__media { min-height: 0; background: linear-gradient(135deg, var(--fd-color-surface-strong), var(--fd-accent)); }
.fd-feature-card .fd-card__body { align-content: start; }

@container (max-width: 52rem) {
  .fd-grid-demo { gap: .5rem; }
  .fd-metric-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .fd-state-matrix { grid-template-columns: 1fr; gap: 1rem; }
  .fd-feature-card-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fd-feature-card { min-height: auto; grid-template-rows: 18rem auto; }
}

@container (max-width: 30rem) {
  .fd-layout-audit, .fd-card-audit { gap: 1.5rem; }
  .fd-grid-demo { min-height: 8rem; grid-template-columns: repeat(4, 1fr); }
  .fd-grid-demo span:nth-child(n+5) { display: none; }
  .fd-metric-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fd-state-row { grid-template-columns: 4.5rem minmax(0, 1fr); padding: .75rem; }
  .fd-simple-card-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fd-standard-card-grid { grid-template-columns: repeat(3, 17.125rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: thin; }
  .fd-standard-card-grid .fd-card { min-height: 29.4375rem; scroll-snap-align: start; }
  .fd-product-card { grid-template-rows: 12rem 1fr; }
  .fd-feature-card { grid-template-rows: 15rem auto; }
  .fd-card__body { padding: 1.5rem; }
}

@media (max-width: 48rem) {
  :root { --fd-page-gutter: 1rem; --fd-grid-gap: 1rem; }
  .fd-accent-grid, .fd-tile-grid { grid-template-columns: 1fr 1fr; }
  .fd-masthead nav { display: none; }
  .fd-workspace, .fd-offcanvas-demo { grid-template-columns: 1fr; }
  .fd-workspace > aside, .fd-offcanvas { border: 0; border-bottom: 1px solid var(--fd-color-border-soft); }
  .fd-navbar-dd { grid-template-columns: 1fr; }
  .fd-grid-demo { grid-template-columns: repeat(4, 1fr); gap: .5rem; }
  .fd-grid-demo span:nth-child(n+5) { display: none; }
  .fd-metric-grid, .fd-state-matrix { grid-template-columns: 1fr; }
  .fd-simple-card-grid, .fd-feature-card-grid { grid-template-columns: 1fr; gap: 1rem; }
  .fd-standard-card-grid { grid-template-columns: repeat(3, 17.125rem); gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; }
  .fd-surface-banner .fd-button--primary { width: 100%; color: #fff; border-color: #2b2d33; background: #2b2d33; }
}

/* Interactive production component catalog */
.fd-button-row,
.fd-badge-row,
.fd-tag-row { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .75rem; }
.fd-button-stack { display: grid; width: min(100%, 26rem); gap: .75rem; }
.fd-button--large { min-height: 3.75rem; padding: .875rem 1.25rem; font-size: 1.0625rem; }
.fd-button--block { width: 100%; }
.fd-control-state-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.fd-control-state-grid article { display: grid; min-width: 0; min-height: 8rem; place-items: center; align-content: center; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-control-state-grid article > span { color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

.fd-badge--info { color: var(--fd-color-info-text); background: var(--fd-color-info); }
.fd-badge--warning { color: var(--fd-color-warning-text); background: var(--fd-color-warning-soft); }
.fd-badge--outline { border: 1px solid var(--fd-color-border); background: transparent; }
.fd-badge--strong { color: var(--fd-accent-contrast); background: var(--fd-accent); }
.fd-badge--small { padding: .125rem .4375rem; font-size: .6875rem; }
.fd-badge--large { padding: .375rem .75rem; font-size: .875rem; }
.fd-badge--dot i { width: .45rem; height: .45rem; border-radius: 50%; background: var(--fd-color-success); }
.fd-badge-context { display: grid; overflow: hidden; width: min(100%, 36rem); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-badge-context > span { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .875rem 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-badge-context > span:last-child { border-bottom: 0; }

.fd-alert-stack { display: grid; gap: .75rem; }
.fd-alert--compact { align-items: center; padding: .625rem .875rem; }
.fd-alert--compact .fd-icon { width: 1rem; height: 1rem; }
.fd-alert--action .fd-link { margin-top: .5rem; color: inherit; }
.fd-alert__close { color: inherit; }

.fd-tag { max-width: 100%; }
.fd-tag .fd-icon { width: .875rem; height: .875rem; }
.fd-tag button { color: inherit; cursor: pointer; }
.fd-tag--selectable { cursor: pointer; }
.fd-tag--selectable[aria-pressed="true"] { color: var(--fd-accent-contrast); border-color: var(--fd-accent); background: var(--fd-accent); }
.fd-tag--success { color: var(--fd-color-success-text); border-color: transparent; background: var(--fd-color-success-soft); }
.fd-tag--warning { color: var(--fd-color-warning-text); border-color: transparent; background: var(--fd-color-warning-soft); }
.fd-tag--truncate { display: grid; width: min(100%, 24rem); grid-template-columns: minmax(0, 1fr) auto; }
.fd-tag--truncate > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.fd-tooltip-grid { display: grid; min-height: 18rem; grid-template-columns: repeat(2, minmax(8rem, 1fr)); place-items: center; gap: 5rem; padding: 4rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-tooltip::after { content: ""; position: absolute; width: .5rem; height: .5rem; background: inherit; transform: rotate(45deg); }
.fd-tooltip-wrap.is-visible .fd-tooltip { opacity: 1; }
.fd-tooltip-wrap[data-side="top"] .fd-tooltip { top: auto; right: auto; bottom: calc(100% + .625rem); left: 50%; transform: translate(-50%, .25rem); }
.fd-tooltip-wrap[data-side="top"]:focus-within .fd-tooltip,
.fd-tooltip-wrap[data-side="top"].is-visible .fd-tooltip { transform: translate(-50%, 0); }
.fd-tooltip-wrap[data-side="top"] .fd-tooltip::after { top: calc(100% - .25rem); left: calc(50% - .25rem); }
.fd-tooltip-wrap[data-side="bottom"] .fd-tooltip { top: calc(100% + .625rem); right: auto; bottom: auto; left: 50%; transform: translate(-50%, -.25rem); }
.fd-tooltip-wrap[data-side="bottom"]:focus-within .fd-tooltip,
.fd-tooltip-wrap[data-side="bottom"].is-visible .fd-tooltip { transform: translate(-50%, 0); }
.fd-tooltip-wrap[data-side="bottom"] .fd-tooltip::after { bottom: calc(100% - .25rem); left: calc(50% - .25rem); }
.fd-tooltip-wrap[data-side="left"] .fd-tooltip { top: 50%; right: calc(100% + .625rem); bottom: auto; left: auto; transform: translate(.25rem, -50%); }
.fd-tooltip-wrap[data-side="left"]:focus-within .fd-tooltip,
.fd-tooltip-wrap[data-side="left"].is-visible .fd-tooltip { transform: translate(0, -50%); }
.fd-tooltip-wrap[data-side="left"] .fd-tooltip::after { top: calc(50% - .25rem); left: calc(100% - .25rem); }
.fd-tooltip-wrap[data-side="right"] .fd-tooltip { top: 50%; right: auto; bottom: auto; left: calc(100% + .625rem); transform: translate(-.25rem, -50%); }
.fd-tooltip-wrap[data-side="right"]:focus-within .fd-tooltip,
.fd-tooltip-wrap[data-side="right"].is-visible .fd-tooltip { transform: translate(0, -50%); }
.fd-tooltip-wrap[data-side="right"] .fd-tooltip::after { top: calc(50% - .25rem); right: calc(100% - .25rem); }

.fd-toast-stage { position: relative; min-height: 18rem; overflow: hidden; border: 1px dashed var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-toast-viewport { position: absolute; z-index: 2; right: 1rem; bottom: 1rem; display: grid; width: min(25rem, calc(100% - 2rem)); gap: .75rem; }
.fd-toast { display: grid; width: min(100%, 25rem); grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: .75rem; padding: 1rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-left: .25rem solid var(--fd-color-link); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow-hover); animation: fd-toast-in .2s ease-out; }
.fd-toast > div { display: grid; gap: .125rem; }
.fd-toast > div span { color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-toast > .fd-icon { margin-top: .125rem; }
.fd-toast .fd-icon-button { width: 2rem; min-height: 2rem; border: 0; }
.fd-toast--success { border-left-color: var(--fd-color-success); }
.fd-toast--warning { border-left-color: #b58a00; }
.fd-toast--danger { border-left-color: var(--fd-color-danger); }
@keyframes fd-toast-in { from { opacity: 0; transform: translateY(.75rem); } }

.fd-numeric-stepper { display: grid; width: min(100%, 34rem); grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .5rem; }
.fd-numeric-stepper label { min-width: 0; }
.fd-numeric-stepper .fd-input { text-align: center; font-size: 1.25rem; font-weight: 700; }
.fd-numeric-stepper output { grid-column: 1 / -1; justify-self: center; color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-numeric-stepper--compact { width: min(100%, 24rem); }

.fd-date-input { display: block; width: min(100%, 28rem); }
.fd-date-input .fd-input { box-sizing: border-box; padding-right: 3.5rem; }
.fd-date-input .fd-input:focus { padding-right: 3.5rem; }
.fd-date-input input::-webkit-calendar-picker-indicator { opacity: 1; cursor: pointer; }
.fd-date-input .fd-icon-button { position: absolute; top: 50%; right: .25rem; width: 2.5rem; min-height: 2.5rem; border: 0; transform: translateY(-50%); }
.fd-date-input .fd-icon-button .fd-icon { position: static; width: 1.25rem; height: 1.25rem; }
.fd-date-range { display: grid; width: min(100%, 44rem); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 1rem; }
.fd-date-range > span { display: grid; height: var(--fd-control-height); place-items: center; }
.fd-description--error { color: var(--fd-color-danger-text); }
.fd-theme-dark input:is([type="date"], [type="datetime-local"], [type="month"], [type="week"]) { color-scheme: dark; }
.fd-label__optional { margin-left: .35rem; color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 500; }
.fd-date-example-width { width: min(100%, 30rem); }
.fd-date-anatomy { display: grid; width: min(100%, 52rem); grid-template-columns: minmax(18rem, 1fr) minmax(14rem, .75fr); align-items: start; gap: 1.5rem; }
.fd-date-anatomy > .fd-field { padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-date-anatomy dl { display: grid; margin: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-date-anatomy dl div { display: grid; grid-template-columns: 1fr auto; gap: 1rem; padding: .875rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-date-anatomy dt { color: var(--fd-color-text-subtle); }
.fd-date-anatomy dd { margin: 0; font-weight: 700; text-align: right; }
.fd-date-range-demo { display: grid; width: min(100%, 44rem); gap: .75rem; }
.fd-date-range-demo > .fd-description { margin: 0; }
.fd-date-optional { display: grid; width: min(100%, 36rem); grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: .75rem; }
.fd-date-optional > .fd-button { margin-bottom: 1.75rem; }
.fd-date-precision-grid { display: grid; width: min(100%, 44rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
@container (max-width: 42rem) {
  .fd-date-anatomy { grid-template-columns: 1fr; }
  .fd-date-optional { grid-template-columns: 1fr; align-items: stretch; }
  .fd-date-optional > .fd-button { width: 100%; margin-bottom: 0; }
  .fd-date-precision-grid { grid-template-columns: 1fr; }
}

.fd-file-demo { display: grid; width: min(100%, 44rem); min-width: 0; gap: 1rem; }
.fd-file-upload { box-sizing: border-box; min-height: 15rem; place-items: center; align-content: center; transition: border-color .15s, background .15s; }
.fd-file-upload.is-dragover { color: var(--fd-accent-soft-contrast); border-color: var(--fd-accent); background: var(--fd-accent-soft); }
.fd-file-upload__icon { display: grid; width: 3.5rem; height: 3.5rem; place-items: center; color: var(--fd-accent-contrast); border-radius: 50%; background: var(--fd-accent); }
.fd-file-upload__icon .fd-icon { width: 1.5rem; height: 1.5rem; }
.fd-file-upload input[type="file"] { width: 100%; min-width: 0; max-width: 100%; font-size: .75rem; }
.fd-file-demo > * { min-width: 0; max-width: 100%; }
.fd-file-list { display: grid; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.fd-file-list li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-file-list li > span:nth-child(2) { display: grid; }
.fd-file-list li small { color: var(--fd-color-text-subtle); }
.fd-file-list .fd-file-list__empty { display: block; color: var(--fd-color-text-subtle); text-align: center; border-style: dashed; }
.fd-file-progress { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-file-progress > div { display: grid; min-width: 0; gap: .375rem; }
.fd-file-progress strong { overflow-wrap: anywhere; }
.fd-file-progress small { color: var(--fd-color-text-subtle); }
.fd-file-progress.is-error { grid-template-columns: auto minmax(0, 1fr) auto; color: var(--fd-color-danger-text); background: var(--fd-color-danger-soft); }

.fd-table-demo { width: 100%; min-width: 0; overflow: hidden; }
.fd-table-toolbar { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: .75rem; margin-bottom: .75rem; }
.fd-table-toolbar .fd-search { position: relative; flex: 1 1 16rem; }
.fd-table-toolbar .fd-search > .fd-icon { position: absolute; z-index: 1; top: 50%; left: .875rem; transform: translateY(-50%); }
.fd-table-toolbar .fd-search .fd-input { padding-left: 2.75rem; border-radius: var(--fd-radius); }
.fd-table-toolbar .fd-field { min-width: 9rem; }
.fd-table-toolbar .fd-select { min-height: 2.75rem; padding-block: .5rem; }
.fd-table--compact th,
.fd-table--compact td { padding: .5rem .75rem; }
.fd-table.hide-updated [data-col="updated"] { display: none; }
.fd-table--comparison { min-width: 36rem; text-align: center; }
.fd-table--comparison th:not(:first-child),
.fd-table--comparison td:not(:first-child) { text-align: center; }
.fd-table--comparison .fd-icon { color: var(--fd-color-success); }
.fd-table tr[hidden] { display: none; }
.fd-table--states tbody tr.is-hover { background: color-mix(in srgb, var(--fd-color-link) 8%, var(--fd-color-background)); }
.fd-table--states tbody tr.is-selected { background: var(--fd-accent-soft); color: var(--fd-accent-soft-contrast); }
.fd-table--states tbody tr.is-warning { color: var(--fd-color-warning-text); background: var(--fd-color-warning-soft); }
.fd-table--states tbody tr.is-error { color: var(--fd-color-danger-text); background: var(--fd-color-danger-soft); }
.fd-table--states tbody tr.is-disabled { color: var(--fd-color-text-disabled); background: var(--fd-color-disabled); }
.fd-table--states tbody tr > * { background: transparent; }
.fd-table-wrap--scroll { max-height: 21rem; }
.fd-table-wrap--scroll:focus-visible { outline: 3px solid var(--fd-color-focus); outline-offset: 2px; }
.fd-table--sticky { min-width: 42rem; }
.fd-table--sticky thead { position: sticky; z-index: 2; top: 0; }
.fd-table--sticky thead th { box-shadow: 0 1px 0 var(--fd-color-border-soft); }
.fd-table__numeric { text-align: right !important; font-variant-numeric: tabular-nums; }
.fd-table--summary tfoot > tr > * { border-top: 2px solid var(--fd-color-border); border-bottom: 0; background: var(--fd-color-surface-strong); font-weight: 700; }

@container (max-width: 42rem) {
  .fd-table-wrap--responsive { overflow: visible; border: 0; }
  .fd-table--responsive caption { border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius) var(--fd-radius) 0 0; }
  .fd-table--responsive thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
  .fd-table--responsive,
  .fd-table--responsive tbody,
  .fd-table--responsive tr,
  .fd-table--responsive th,
  .fd-table--responsive td { display: block; width: 100%; }
  .fd-table--responsive tbody { display: grid; gap: .75rem; }
  .fd-table--responsive tr { overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
  .fd-table--responsive th,
  .fd-table--responsive td { display: grid; min-height: 2.75rem; grid-template-columns: minmax(7rem, .7fr) minmax(0, 1fr); align-items: center; gap: 1rem; padding: .625rem 1rem; border-bottom: 1px solid var(--fd-color-border-soft); background: transparent; font-size: .875rem; }
  .fd-table--responsive th::before,
  .fd-table--responsive td::before { content: attr(data-label); color: var(--fd-color-text-subtle); font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
}

.fd-media-demo { display: grid; width: min(100%, 54rem); gap: 1rem; }
.fd-media-demo audio,
.fd-media-demo video { display: block; width: 100%; border-radius: var(--fd-radius); background: #16171b; }
.fd-media-demo video { aspect-ratio: 16 / 9; }
.fd-media-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 1rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-media-card__art { display: grid; width: 5rem; height: 5rem; place-items: center; color: var(--fd-accent-contrast); border-radius: var(--fd-radius); background: var(--fd-accent); }
.fd-media-card__art .fd-icon { width: 2rem; height: 2rem; }
.fd-media-demo > .fd-description { margin: -.375rem 0 0; }
.fd-media-transcript { width: 100%; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-media-transcript summary { min-height: 2.75rem; align-items: center; padding-inline: 0; }
.fd-media-transcript .fd-details__content { max-width: 52rem; padding-inline: 0; line-height: 1.6; }
.fd-media-transcript .fd-details__content p { margin: 0; }
.fd-media-compatibility { display: grid; width: min(100%, 54rem); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.fd-media-compatibility article { display: grid; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-media-compatibility article > .fd-icon { color: var(--fd-color-success); }
.fd-media-compatibility article > span { display: grid; gap: .2rem; }
.fd-media-compatibility small { color: var(--fd-color-text-subtle); line-height: 1.45; }
@container (max-width: 34rem) { .fd-media-compatibility { grid-template-columns: 1fr; } }
.fd-media-card h3,
.fd-media-card p { margin: .25rem 0 0; }
.fd-media-source { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: .75rem; }
.fd-media-state { display: grid; min-height: 13rem; place-items: center; align-content: center; gap: .5rem; padding: 1.5rem; color: var(--fd-color-text); text-align: center; border: 1px dashed var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-media-state > span:not(.fd-spinner) { color: var(--fd-color-text-subtle); }
.fd-media-state.is-error { color: var(--fd-color-danger-text); background: var(--fd-color-danger-soft); }
.fd-video-poster { position: relative; display: grid; min-height: 18rem; place-items: center; align-content: end; overflow: hidden; padding: 1.5rem; color: #fff; border-radius: var(--fd-radius); background: radial-gradient(circle at 70% 20%, #7c3aed, transparent 32%), linear-gradient(145deg, #172554, #111827); }
.fd-video-poster > div { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; }
.fd-media-play { position: absolute; top: 50%; left: 50%; display: grid; width: 4rem; height: 4rem; place-items: center; color: var(--fd-accent-contrast); border-radius: 50%; background: var(--fd-accent); transform: translate(-50%, -50%); }
.fd-media-play .fd-icon { width: 1.5rem; height: 1.5rem; fill: currentColor; }

@container (max-width: 42rem) {
  .fd-control-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fd-table-toolbar { align-items: stretch; }
  .fd-table-toolbar > * { flex: 1 1 10rem; }
  .fd-media-source { grid-template-columns: 1fr; align-items: stretch; }
  .fd-media-source .fd-button { width: 100%; }
}

@container (max-width: 30rem) {
  .fd-control-state-grid { grid-template-columns: 1fr; }
  .fd-tooltip-grid { grid-template-columns: 1fr; gap: 5rem; padding: 4rem 2rem; }
  .fd-date-range { grid-template-columns: 1fr; align-items: stretch; }
  .fd-date-range > span { height: auto; transform: rotate(90deg); }
  .fd-file-progress.is-error { grid-template-columns: auto minmax(0, 1fr); }
  .fd-file-progress.is-error .fd-button { grid-column: 1 / -1; }
  .fd-media-card { grid-template-columns: 1fr; text-align: center; }
  .fd-media-card__art { justify-self: center; }
  .fd-pagination:not(.fd-pagination--compact, .fd-pagination--mobile, .fd-pagination--simple) button:not([aria-current="page"]):not(:first-child):not(:last-child),
  .fd-pagination:not(.fd-pagination--compact, .fd-pagination--mobile, .fd-pagination--simple) .fd-pagination__ellipsis { display: none; }
  .fd-pagination--compact { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .fd-pagination--compact .fd-button { min-width: 0; padding-inline: .75rem; }
}

/* Expanded documentation compositions */
.fd-showcase-grid,
.fd-token-role-grid,
.fd-geometry-grid,
.fd-palette-grid,
.fd-tile-grid,
.fd-stat-tile-grid,
.fd-marker-grid,
.fd-marker-positions,
.fd-progress-circles,
.fd-position-grid,
.fd-lightbox-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; width: 100%; }
.fd-showcase-grid > article,
.fd-token-role-grid > article,
.fd-geometry-grid > article,
.fd-palette-grid > article,
.fd-tile-grid > *,
.fd-stat-tile-grid > article,
.fd-marker-grid > article,
.fd-position-grid > span { display: grid; min-width: 0; align-content: start; gap: .5rem; padding: 1rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-showcase-grid > article > .fd-icon { width: 1.5rem; height: 1.5rem; }
.fd-showcase-grid small,
.fd-token-role-grid code,
.fd-geometry-grid code,
.fd-palette-grid code,
.fd-stat-tile-grid small { color: var(--fd-color-text-subtle); }
.fd-showcase-grid .is-selected,
.fd-showcase-grid > article.is-selected { border-color: var(--fd-accent); background: var(--fd-accent-soft); }
.fd-showcase-grid [aria-disabled="true"],
.fd-showcase-grid > article[aria-disabled="true"] { opacity: .52; }
.fd-state-danger { color: var(--fd-color-danger-text) !important; background: var(--fd-color-danger-soft) !important; }
.fd-state-success { color: var(--fd-color-success-text) !important; background: var(--fd-color-success-soft) !important; }

.fd-palette-grid article { grid-template-columns: 2rem minmax(0, 1fr); align-items: center; }
.fd-palette-grid article i { grid-row: 1 / 3; width: 2rem; height: 2rem; border-radius: 50%; background: var(--fd-accent); }
.fd-accent-application { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.fd-accent-application .fd-progress { flex: 1 1 12rem; }
.fd-theme-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; overflow: hidden; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-theme-pair > article { display: grid; align-content: center; gap: .75rem; min-height: 14rem; padding: clamp(1.25rem, 4vw, 2.5rem); color: var(--fd-color-text); background: var(--fd-color-background); }
.fd-theme-pair h4, .fd-theme-pair p { margin: 0; }
.fd-token-role-grid article i { width: 100%; height: 4rem; border: 1px solid var(--fd-color-border-soft); border-radius: calc(var(--fd-radius) / 2); background: var(--sample); }
.fd-space-scale { display: grid; gap: .5rem; width: 100%; }
.fd-space-scale article { display: grid; grid-template-columns: minmax(3rem, 1fr) auto auto; align-items: center; gap: 1rem; padding: .75rem 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-space-scale i { display: block; justify-self: end; height: 1rem; background: var(--fd-accent); }
.fd-geometry-grid article i { display: block; height: 5rem; background: var(--fd-color-surface-strong); }
.fd-token-radius { border-radius: 1.5rem; }
.fd-token-border { border: 2px solid var(--fd-color-border); }
.fd-token-shadow { box-shadow: var(--fd-shadow-hover); }
.fd-token-focus { border: 1px solid var(--fd-accent); box-shadow: var(--fd-focus); }
.fd-token-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)) auto; align-items: end; gap: 1rem; width: 100%; }
.fd-token-controls dl { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1rem; margin: 0; }
.fd-token-controls dl div { display: flex; gap: .5rem; }

.fd-container-demo { display: grid; grid-template-columns: minmax(4rem, .25fr) minmax(0, 1fr) minmax(4rem, .25fr); min-height: 10rem; border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-container-demo > * { display: grid; place-items: center; text-align: center; }
.fd-container-demo main { align-content: center; gap: .25rem; padding: 1rem; color: var(--fd-accent-soft-contrast); background: var(--fd-accent-soft); }
.fd-layout-compositions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.fd-layout-compositions article { display: grid; min-height: 8rem; gap: .5rem; padding: .75rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
.fd-layout-compositions article.is-halves { grid-template-columns: repeat(2, 1fr); }
.fd-layout-compositions article.is-thirds { grid-template-columns: repeat(3, 1fr); }
.fd-layout-compositions article.is-sidebar { grid-template-columns: 1fr 2fr; }
.fd-layout-compositions i { border-radius: calc(var(--fd-radius) / 2); background: var(--fd-accent-soft); }
.fd-breakpoint-table { display: grid; gap: .5rem; width: 100%; }
.fd-breakpoint-table div { display: grid; grid-template-columns: minmax(7rem, .5fr) minmax(8rem, .5fr) 1fr; gap: 1rem; padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-order-demo { display: grid; grid-template-columns: 2fr 1fr; gap: .5rem; width: 100%; }
.fd-order-demo > * { padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-order-demo > :first-child, .fd-order-demo > :last-child { grid-column: 1 / -1; }

.fd-form-specimen { width: min(100%, 38rem); }
.fd-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.fd-form-grid__wide { grid-column: 1 / -1; }
.fd-filter-bar { display: flex; align-items: end; flex-wrap: wrap; gap: 1rem; width: 100%; }
.fd-filter-bar .fd-field { flex: 1 1 12rem; }
.fd-input-group { display: grid; grid-template-columns: auto minmax(0, 1fr); }
.fd-input-group > * { border-radius: 0; }
.fd-input-group > :first-child { border-radius: var(--fd-radius) 0 0 var(--fd-radius); }
.fd-input-group > :last-child { border-radius: 0 var(--fd-radius) var(--fd-radius) 0; }
.fd-input-meta { display: flex; justify-content: space-between; gap: 1rem; color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-link-stack, .fd-chip-cloud, .fd-actions, .fd-inline-status, .fd-toolbar-divider { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.fd-link-measure { max-width: 34rem; }
.fd-link.is-disabled { color: var(--fd-color-text-disabled); text-decoration: none; cursor: not-allowed; }
.fd-upload-queue, .fd-notification-stack { display: grid; gap: .5rem; width: 100%; padding: 0; margin: 0; list-style: none; }
.fd-upload-queue li, .fd-notification-stack article { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .75rem; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-upload-queue li > span:not(.fd-badge), .fd-notification-stack article { min-width: 0; }
.fd-upload-queue li > span { display: grid; }
.fd-validation-summary { width: min(100%, 42rem); padding: 1.25rem; color: var(--fd-color-danger-text); border-inline-start: .25rem solid var(--fd-color-danger); background: var(--fd-color-danger-soft); }
.fd-validation-summary h4 { margin: 0 0 .5rem; }
.fd-validation-summary ul { margin: 0; padding-inline-start: 1.25rem; }

.fd-spinner-sizes { display: flex; align-items: center; gap: 2rem; min-height: 7rem; }
.fd-spinner--small { width: 1rem; height: 1rem; }
.fd-spinner--large { width: 3rem; height: 3rem; }
.fd-loading-button { min-width: 9rem; }
.fd-loading-surface, .fd-empty-surface { display: grid; width: 100%; min-height: 15rem; place-items: center; align-content: center; gap: .75rem; padding: 2rem; text-align: center; border: 1px dashed var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-skeleton-text, .fd-skeleton-list, .fd-skeleton-card { display: grid; gap: .75rem; width: min(100%, 36rem); padding: 1rem; }
.fd-skeleton-text i, .fd-skeleton-list i, .fd-skeleton-card i { display: block; height: 1rem; border-radius: .25rem; background: linear-gradient(90deg, var(--fd-color-surface-strong), var(--fd-color-surface), var(--fd-color-surface-strong)); background-size: 200% 100%; animation: fd-skeleton 1.6s linear infinite; }
.fd-skeleton-text i:nth-child(2) { width: 92%; }
.fd-skeleton-text i:nth-child(3), .fd-skeleton-card i.short { width: 62%; }
.fd-skeleton-card .media { width: 100%; height: 12rem; }
.fd-skeleton-list i { height: 3.5rem; }
@keyframes fd-skeleton { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fd-skeleton-text i, .fd-skeleton-list i, .fd-skeleton-card i { animation: none; } }

.fd-popover, .fd-dropdown, .fd-mega-menu, .fd-offcanvas, .fd-breadcrumb__more { position: relative; width: fit-content; }
.fd-popover > summary, .fd-dropdown > summary, .fd-mega-menu > summary, .fd-offcanvas > summary, .fd-breadcrumb__more > summary { list-style: none; cursor: pointer; }
.fd-popover > summary::-webkit-details-marker, .fd-dropdown > summary::-webkit-details-marker, .fd-mega-menu > summary::-webkit-details-marker, .fd-offcanvas > summary::-webkit-details-marker, .fd-breadcrumb__more > summary::-webkit-details-marker { display: none; }
.fd-popover__panel, .fd-dropdown__menu, .fd-mega-menu > div, .fd-breadcrumb__more > div { z-index: 10; display: grid; min-width: 15rem; gap: .5rem; padding: 1rem; margin-top: .5rem; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow-hover); }
.fd-popover__panel p { margin: 0; }
.fd-popover__menu button, .fd-dropdown__menu button, .fd-dropdown__menu a, .fd-breadcrumb__more a { display: flex; align-items: center; gap: .5rem; min-height: 2.5rem; padding: .5rem; color: var(--fd-color-text); text-align: start; border: 0; background: transparent; }
.fd-popover__menu .is-danger, .fd-dropdown__menu .is-danger { color: var(--fd-color-danger-text); }
.fd-position-grid span { min-height: 6rem; place-items: center; border-style: dashed; }
.fd-dialog-demo { display: grid; justify-items: start; gap: 1rem; }
.fd-dialog { width: min(calc(100% - 2rem), 34rem); max-height: calc(100dvh - 2rem); padding: 0; color: var(--fd-color-text); border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow-hover); }
.fd-dialog::backdrop { background: rgba(15, 18, 24, .66); }
.fd-dialog form { display: grid; gap: 1.25rem; padding: clamp(1.25rem, 5vw, 2rem); }
.fd-dialog form > h3, .fd-dialog form > p { margin: 0; }
.fd-dialog-anatomy, .fd-offcanvas-anatomy { display: grid; width: min(100%, 30rem); min-height: 20rem; grid-template-rows: auto 1fr auto; overflow: hidden; border: 1px solid var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-background); box-shadow: var(--fd-shadow); }
.fd-dialog-anatomy span, .fd-offcanvas-anatomy span { padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-simple-card, .fd-metric-card, .fd-module { display: grid; min-width: 0; align-content: start; gap: 1rem; padding: 1.25rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-simple-card > .fd-icon { width: 2rem; height: 2rem; color: var(--fd-accent); }
.fd-simple-card h4, .fd-simple-card p { margin: 0; }
.fd-metric-card { width: min(100%, 18rem); }
.fd-metric-card strong { font-size: clamp(2rem, 8vw, 3.5rem); line-height: 1; }
.fd-surface-banner { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; color: var(--fd-accent-soft-contrast); border-radius: var(--fd-radius); background: var(--fd-accent-soft); }
.fd-surface-banner > div, .fd-surface-banner p { display: flex; align-items: center; gap: .75rem; margin: 0; }
.fd-surface-banner p span { color: inherit; opacity: .82; }
.fd-feature-banner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(12rem, .65fr); gap: 1rem; width: 100%; overflow: hidden; border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-feature-banner > div:first-child { display: grid; align-content: center; justify-items: start; gap: 1rem; padding: clamp(1.5rem, 5vw, 3.5rem); }
.fd-feature-banner h3, .fd-feature-banner p { margin: 0; }
.fd-feature-banner__art { display: grid; min-height: 18rem; place-items: center; color: var(--fd-accent-contrast); background: linear-gradient(145deg, var(--fd-accent), var(--fd-accent-hover)); }
.fd-feature-banner__art .fd-icon { width: 5rem; height: 5rem; }
.fd-banner-stack { display: grid; gap: .75rem; width: 100%; }

.fd-divider-demo { width: 100%; }
.fd-divider { margin: 1.5rem 0; border: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-divider-label { display: flex; align-items: center; gap: 1rem; width: 100%; color: var(--fd-color-text-subtle); }
.fd-divider-label::before, .fd-divider-label::after { content: ""; flex: 1; border-top: 1px solid var(--fd-color-border-soft); }
.fd-inset-list { display: grid; width: min(100%, 38rem); }
.fd-inset-list > div { display: flex; align-items: center; gap: 1rem; }
.fd-inset-list p { display: grid; margin: 0; }
.fd-inset-list hr { width: calc(100% - 3.5rem); margin-inline-start: 3.5rem; border: 0; border-top: 1px solid var(--fd-color-border-soft); }
.fd-toolbar-divider > i { align-self: stretch; border-inline-start: 1px solid var(--fd-color-border-soft); }
.fd-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: .5rem; min-height: 2.75rem; }
.fd-breadcrumb > .fd-icon { width: 1rem; height: 1rem; color: var(--fd-color-text-subtle); }
.fd-breadcrumb__more > div { position: absolute; }
.fd-workflow-steps { display: flex; width: 100%; gap: 0; padding: 0; margin: 0; list-style: none; }
.fd-workflow-steps li { position: relative; display: grid; flex: 1; min-width: 0; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .65rem; color: var(--fd-color-text-subtle); }
.fd-workflow-steps li::after { content: ""; position: absolute; top: 1rem; inset-inline: 2.5rem .5rem; border-top: 2px solid var(--fd-color-border-soft); }
.fd-workflow-steps li:last-child::after { display: none; }
.fd-workflow-steps li > :first-child { z-index: 1; display: grid; width: 2rem; height: 2rem; place-items: center; border: 1px solid var(--fd-color-border); border-radius: 50%; background: var(--fd-color-background); }
.fd-workflow-steps li > span:last-child { display: grid; }
.fd-workflow-steps li.is-complete, .fd-workflow-steps li[aria-current="step"] { color: var(--fd-color-text); }
.fd-workflow-steps li.is-complete > :first-child { color: var(--fd-accent-contrast); border-color: var(--fd-accent); background: var(--fd-accent); }
.fd-workflow-steps li.is-error { color: var(--fd-color-danger-text); }
.fd-workflow-steps--vertical { display: grid; gap: 1.25rem; }
.fd-workflow-steps--vertical li::after { top: 2.5rem; bottom: -1rem; inset-inline-start: 1rem; width: 0; border-top: 0; border-inline-start: 2px solid var(--fd-color-border-soft); }
.fd-step-compact { display: grid; gap: .5rem; width: min(100%, 28rem); }

.fd-footer { display: flex; width: 100%; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 1.5rem; padding: clamp(1.25rem, 4vw, 2rem); border-top: 1px solid var(--fd-color-border-soft); background: var(--fd-color-background); }
.fd-footer nav, .fd-footer__brand { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; color: var(--fd-color-text); }
.fd-footer--columns { display: grid; grid-template-columns: minmax(14rem, 1.5fr) repeat(3, minmax(8rem, 1fr)); align-items: start; }
.fd-footer--columns nav { display: grid; justify-items: start; }
.fd-masthead { display: grid; width: 100%; justify-items: start; gap: 1rem; padding: clamp(1.5rem, 5vw, 4rem); border-radius: var(--fd-radius); background: var(--fd-color-surface); }
.fd-masthead > h2, .fd-masthead > p, .fd-masthead > div > h2, .fd-masthead > div > p { max-width: 42rem; margin: 0; }
.fd-masthead h2 { font-size: clamp(2rem, 6vw, 4.75rem); line-height: 1; letter-spacing: -.04em; }
.fd-masthead--split { grid-template-columns: minmax(0, 1.2fr) minmax(14rem, .8fr); align-items: stretch; padding: 0; overflow: hidden; }
.fd-masthead--split > div:first-child { display: grid; align-content: center; justify-items: start; gap: 1rem; padding: clamp(1.5rem, 5vw, 4rem); }
.fd-masthead__art { display: grid; min-height: 22rem; place-items: center; align-content: center; gap: 1rem; color: var(--fd-accent-contrast); background: linear-gradient(145deg, var(--fd-accent), var(--fd-accent-hover)); }
.fd-masthead__art .fd-icon { width: 5rem; height: 5rem; }
.fd-masthead--compact { grid-template-columns: minmax(0, 1fr) auto; align-items: end; padding: 1.5rem; }
.fd-masthead--compact h2 { font-size: clamp(2rem, 4vw, 3rem); }

.fd-app-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 4.5rem; padding: .75rem 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-app-header > nav, .fd-app-header > div { display: flex; align-items: center; gap: .75rem; }
.fd-app-header nav a, .fd-nav-state { padding: .65rem .75rem; color: var(--fd-color-text); text-decoration: none; border-bottom: 2px solid transparent; }
.fd-app-header nav a[aria-current="page"], .fd-nav-state[aria-current="page"] { border-color: var(--fd-accent); }
.fd-app-header__brand { display: flex; align-items: center; gap: .65rem; color: var(--fd-color-text); text-decoration: none; }
.fd-app-header__brand span, .fd-app-header--compact > div { display: grid; }
.fd-app-header__brand small, .fd-app-header--compact small { color: var(--fd-color-text-subtle); }
.fd-app-header--stacked { display: grid; padding: 0; }
.fd-app-header--stacked > div { justify-content: space-between; padding: .75rem 1rem; }
.fd-app-header--stacked nav { width: 100%; padding: 0 .5rem; border-top: 1px solid var(--fd-color-border-soft); }
.fd-app-header--compact { justify-content: start; min-height: 3.75rem; }
.fd-app-header--compact > .fd-badge { margin-inline-start: auto; }
.fd-app-header--mobile { max-width: 28rem; }
.fd-icon-button-wrap { position: relative; }
.fd-icon-button__badge { position: absolute; top: -.25rem; inset-inline-end: -.25rem; display: grid; min-width: 1.25rem; height: 1.25rem; place-items: center; padding: 0 .25rem; color: #fff; font-size: .7rem; border-radius: 999px; background: var(--fd-color-danger); }

.fd-progress-block { display: grid; gap: .5rem; width: min(100%, 42rem); }
.fd-progress-block > div:first-child { display: flex; justify-content: space-between; gap: 1rem; }
.fd-progress--small { height: .25rem; }
.fd-progress--large { height: 1rem; }
.fd-progress-sizes { display: grid; gap: 1rem; width: 100%; }
.fd-progress-sizes article { display: grid; grid-template-columns: 6rem minmax(0, 1fr); align-items: center; gap: 1rem; }
.fd-segmented-progress { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; width: 100%; }
.fd-segmented-progress i { height: .65rem; border-radius: 999px; background: var(--fd-color-surface-strong); }
.fd-segmented-progress i.is-complete { background: var(--fd-accent); }
.fd-segmented-progress span { grid-column: 1 / -1; color: var(--fd-color-text-subtle); }
.fd-progress-circle { display: grid; width: 7rem; height: 7rem; place-items: center; border-radius: 50%; background: radial-gradient(circle, var(--fd-color-background) 58%, transparent 59%), conic-gradient(var(--fd-accent) calc(var(--value) * 1%), var(--fd-color-surface-strong) 0); }
.fd-progress-circles article { display: grid; justify-items: center; gap: .75rem; }
.fd-progress.is-paused > span { background: var(--fd-color-warning-text); }
.fd-progress.is-complete > span { background: var(--fd-color-success); }
.fd-progress.is-error > span { background: var(--fd-color-danger); }

.fd-content-section { display: grid; gap: 1.5rem; width: 100%; }
.fd-content-section > header { display: flex; justify-content: space-between; align-items: end; gap: 1rem; }
.fd-content-section h3, .fd-content-section p { margin: 0; }
.fd-tile-grid > a { position: relative; color: var(--fd-color-text); text-decoration: none; }
.fd-tile-grid > a > .fd-icon:first-child { width: 2rem; height: 2rem; color: var(--fd-accent); }
.fd-tile-grid > a > .fd-icon:last-child { position: absolute; inset-inline-end: 1rem; bottom: 1rem; }
.fd-selectable-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; width: 100%; padding: 0; border: 0; }
.fd-selectable-tiles legend { grid-column: 1 / -1; }
.fd-selectable-tiles label { position: relative; }
.fd-selectable-tiles input { position: absolute; opacity: 0; }
.fd-selectable-tiles label > span { display: grid; gap: .5rem; min-height: 8rem; padding: 1rem; border: 1px solid var(--fd-color-border); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-selectable-tiles input:checked + span { border-color: var(--fd-accent); box-shadow: var(--fd-focus); }
.fd-stat-tile-grid strong { font-size: 2rem; }
.fd-overlay-card { position: relative; min-height: 22rem; overflow: hidden; color: #fff; border-radius: var(--fd-radius); background: #172554; }
.fd-overlay-card__art { position: absolute; inset: 0; background: radial-gradient(circle at 72% 24%, #7c3aed, transparent 25%), linear-gradient(145deg, #2a8288, #172554); }
.fd-overlay-card > div:last-child { position: absolute; inset: auto 0 0; display: grid; gap: .5rem; padding: 5rem 1.5rem 1.5rem; background: linear-gradient(transparent, rgba(0,0,0,.78)); }
.fd-overlay-card h3, .fd-overlay-card p { margin: 0; }
.fd-marker-grid article { position: relative; min-height: 10rem; align-content: end; }
.fd-marker { position: absolute; top: .75rem; inset-inline-end: .75rem; display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .55rem; border-radius: 999px; background: var(--fd-color-surface-strong); }
.fd-marker--success { color: var(--fd-color-success-text); background: var(--fd-color-success-soft); }
.fd-marker--warning { color: var(--fd-color-warning-text); background: var(--fd-color-warning-soft); }
.fd-marker--danger { color: var(--fd-color-danger-text); background: var(--fd-color-danger-soft); }
.fd-annotation-demo { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(14rem, .5fr); gap: 1rem; width: 100%; }
.fd-annotation-canvas { position: relative; min-height: 20rem; border-radius: var(--fd-radius); background: linear-gradient(145deg, var(--fd-color-surface-strong), var(--fd-color-surface)); }
.fd-annotation-canvas button { position: absolute; top: var(--y); left: var(--x); display: grid; width: 2rem; height: 2rem; place-items: center; color: var(--fd-accent-contrast); border: 2px solid var(--fd-color-background); border-radius: 50%; background: var(--fd-accent); transform: translate(-50%, -50%); }
.fd-annotation-demo ol { display: grid; align-content: start; gap: 1rem; margin: 0; }
.fd-annotation-demo li span { display: block; color: var(--fd-color-text-subtle); }
.fd-marker-positions article { position: relative; min-height: 8rem; border: 1px dashed var(--fd-color-border); border-radius: var(--fd-radius); }
.fd-marker-positions span { position: absolute; padding: .35rem .5rem; border-radius: .25rem; background: var(--fd-accent-soft); }
.fd-marker-positions .is-top-start { top: .5rem; inset-inline-start: .5rem; }
.fd-marker-positions .is-top-end { top: .5rem; inset-inline-end: .5rem; }
.fd-marker-positions .is-bottom-start { bottom: .5rem; inset-inline-start: .5rem; }
.fd-marker-positions .is-bottom-end { right: .5rem; bottom: .5rem; }

.fd-utility-specimens, .fd-text-alignment, .fd-wrap-grid, .fd-utility-demo, .fd-spacing-demo { display: grid; gap: 1rem; width: 100%; }
.fd-utility-specimens p { margin: 0; }
.fd-text-start { text-align: start; }.fd-text-center { text-align: center; }.fd-text-end { text-align: end; }
.fd-text-nowrap { white-space: nowrap; }
.fd-wrap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fd-wrap-grid article, .fd-spacing-demo article, .fd-auto-grid article, .fd-utility-demo > div { min-width: 0; padding: 1rem; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-numeric-text { display: grid; grid-template-columns: minmax(10rem, 1fr) auto; gap: .75rem 2rem; width: min(100%, 24rem); font-variant-numeric: tabular-nums; }
.fd-display-block { display: block; }.fd-display-inline { display: inline-block; width: fit-content; }
.fd-flex { display: flex; }.fd-items-center { align-items: center; }.fd-justify-between { justify-content: space-between; }.fd-wrap { flex-wrap: wrap; }.fd-gap-2 { gap: .5rem; }.fd-gap-4 { gap: 1rem; }
.fd-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 1rem; width: 100%; }
.fd-spacing-demo { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.fd-p-2 { padding: .5rem !important; }.fd-p-4 { padding: 1rem !important; }.fd-p-6 { padding: 1.5rem !important; }

.fd-module > header, .fd-module > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.fd-module h3, .fd-module h4, .fd-module p { margin: 0; }
.fd-module--compact { gap: .65rem; padding: .875rem; }
.fd-module-grid, .fd-workspace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; }
.fd-workspace-grid { grid-template-columns: minmax(0, 1.5fr) minmax(16rem, .5fr); }
.fd-activity-list { display: grid; }
.fd-activity-list > p { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; margin: 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-activity-list > p > span:last-child { display: grid; min-width: 0; }
.fd-check-list { display: grid; gap: .75rem; }
.fd-offcanvas[open]::before { content: ""; position: fixed; z-index: 20; inset: 0; background: rgba(15,18,24,.55); }
.fd-offcanvas > aside { position: fixed; z-index: 21; top: 0; bottom: 0; inset-inline-start: 0; display: grid; width: min(88vw, 22rem); grid-template-rows: auto 1fr auto; gap: 1rem; padding: 1.25rem; overflow-y: auto; color: var(--fd-color-text); background: var(--fd-color-background); box-shadow: var(--fd-shadow-hover); }
.fd-offcanvas--end > aside { inset-inline: auto 0; }
.fd-offcanvas aside nav { display: grid; align-content: start; gap: .35rem; }
.fd-offcanvas aside nav a { padding: .75rem; color: var(--fd-color-text); text-decoration: none; border-radius: var(--fd-radius); }
.fd-offcanvas aside nav a[aria-current="page"] { background: var(--fd-accent-soft); }
.fd-navbar-demo { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.fd-navbar-demo > a, .fd-navbar-demo summary { color: var(--fd-color-text); text-decoration: none; }
.fd-mega-menu > div { grid-template-columns: repeat(3, minmax(9rem, 1fr)); min-width: min(42rem, calc(100vw - 3rem)); }
.fd-mega-menu section { display: grid; align-content: start; gap: .5rem; }
.fd-lightbox-grid button { display: grid; gap: .75rem; padding: .75rem; color: var(--fd-color-text); text-align: start; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-art { display: block; width: 100%; min-height: 10rem; border-radius: calc(var(--fd-radius) / 2); }
.fd-art--one { background: radial-gradient(circle at 72% 24%, #7c3aed, transparent 22%), linear-gradient(145deg, #2a8288, #172554); }
.fd-art--two { background: radial-gradient(circle at 25% 70%, #92cfae, transparent 24%), linear-gradient(145deg, #312e81, #111827); }
.fd-art--three { background: radial-gradient(circle at 60% 40%, #e84a5f, transparent 18%), linear-gradient(145deg, #713f12, #1f2937); }
.fd-lightbox-viewer { width: min(100%, 48rem); }
.fd-lightbox-viewer article { display: grid; gap: .75rem; }
.fd-lightbox-viewer .fd-art { min-height: 24rem; }
.fd-lightbox-viewer p, .fd-lightbox-caption figcaption { display: grid; margin: 0; }
.fd-lightbox-caption { display: grid; gap: .75rem; width: min(100%, 42rem); margin: 0; }
.fd-comment-thread { display: grid; width: min(100%, 48rem); }
.fd-comment { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; width: min(100%, 48rem); padding: 1rem 0; border-bottom: 1px solid var(--fd-color-border-soft); }
.fd-comment > div { display: grid; gap: .75rem; }
.fd-comment header, .fd-comment footer { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.fd-comment header .fd-icon-button { margin-inline-start: auto; }
.fd-comment p { margin: 0; }
.fd-comment time { color: var(--fd-color-text-subtle); font-size: .875rem; }
.fd-comment.is-reply { width: calc(100% - 3rem); margin-inline-start: 3rem; }
.fd-comment.is-resolved { opacity: .72; }
.fd-comment-composer { display: grid; gap: 1rem; width: min(100%, 48rem); }
.fd-comment-composer > div { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .75rem; }
.fd-scroll-panel { display: grid; width: min(100%, 42rem); max-height: 20rem; overflow: auto; border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); background: var(--fd-color-background); }
.fd-scroll-panel > header, .fd-scroll-panel > legend { position: sticky; z-index: 1; top: 0; display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1rem; border-bottom: 1px solid var(--fd-color-border-soft); background: var(--fd-color-background); }
.fd-scroll-panel > .fd-activity-list, .fd-scroll-panel > .fd-choice-group { padding: 0 1rem 1rem; }

@container (max-width: 42rem) {
  .fd-theme-pair, .fd-feature-banner, .fd-masthead--split, .fd-workspace-grid, .fd-module-grid, .fd-annotation-demo { grid-template-columns: 1fr; }
  .fd-token-controls, .fd-form-grid, .fd-footer--columns { grid-template-columns: 1fr; }
  .fd-form-grid__wide, .fd-token-controls dl { grid-column: auto; }
  .fd-layout-compositions, .fd-wrap-grid, .fd-spacing-demo { grid-template-columns: 1fr; }
  .fd-breakpoint-table div { grid-template-columns: 1fr; gap: .25rem; }
  .fd-app-header:not(.fd-app-header--mobile, .fd-app-header--compact) > nav { display: none; }
  .fd-feature-banner__art { min-height: 12rem; }
  .fd-workflow-steps:not(.fd-workflow-steps--vertical) { display: grid; gap: 1rem; }
  .fd-workflow-steps:not(.fd-workflow-steps--vertical) li::after { display: none; }
  .fd-surface-banner { align-items: flex-start; flex-direction: column; }
  .fd-masthead--compact { grid-template-columns: 1fr; align-items: start; }
  .fd-mega-menu > div { grid-template-columns: 1fr; min-width: min(20rem, calc(100vw - 3rem)); }
}

@container (max-width: 30rem) {
  .fd-theme-pair { border: 0; gap: 1rem; background: transparent; }
  .fd-theme-pair > article { border: 1px solid var(--fd-color-border-soft); border-radius: var(--fd-radius); }
  .fd-container-demo { grid-template-columns: 1rem minmax(0, 1fr) 1rem; }
  .fd-container-demo > span { font-size: 0; }
  .fd-order-demo { grid-template-columns: 1fr; }
  .fd-order-demo > :first-child, .fd-order-demo > :last-child { grid-column: auto; }
  .fd-app-header--compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
  .fd-app-header--compact > .fd-badge { display: none; }
  .fd-app-header--compact > .fd-button { grid-column: 1 / -1; width: 100%; }
  .fd-progress-sizes article { grid-template-columns: 1fr; }
  .fd-content-section > header, .fd-footer, .fd-footer nav { align-items: flex-start; flex-direction: column; }
  .fd-upload-queue li, .fd-notification-stack article { grid-template-columns: auto minmax(0, 1fr); }
  .fd-upload-queue li > :last-child, .fd-notification-stack article > :last-child { grid-column: 2; justify-self: start; }
  .fd-lightbox-viewer .fd-art { min-height: 16rem; }
  .fd-comment.is-reply { width: 100%; margin-inline-start: 0; padding-inline-start: 1rem; border-inline-start: 2px solid var(--fd-color-border-soft); }
}

.fd-component-sections,
.fd-demo-section,
.fd-demo-section > *,
.fd-masthead,
.fd-masthead > * { min-width: 0; max-width: 100%; }
.fd-masthead { overflow: hidden; }
.fd-masthead h2 { overflow-wrap: anywhere; }
.fd-masthead nav { margin-inline-start: 0; flex-wrap: wrap; }