.design-system-root {
  max-width: 100%;
  overflow-x: clip;
}

.design-system-root,
.design-system-root * {
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
}

.design-system-root::-webkit-scrollbar,
.design-system-root *::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.design-system-root::-webkit-scrollbar-track,
.design-system-root *::-webkit-scrollbar-track {
  background: transparent;
}

.design-system-root::-webkit-scrollbar-thumb,
.design-system-root *::-webkit-scrollbar-thumb {
  border-radius: var(--radius-pill);
  background: var(--color-border);
}

.design-system-root::-webkit-scrollbar-thumb:hover,
.design-system-root *::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

.design-system-page {
  background: var(--color-page);
}

.ds-shell {
  min-height: 100vh;
}

.ds-sidebar {
  position: fixed;
  z-index: 10;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  padding: 28px 24px;
  overflow: hidden;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.ds-brand img { width: 118px; height: auto; }
.ds-sidebar__intro { display: grid; gap: 4px; margin-top: 44px; }
.ds-eyebrow { color: var(--color-accent); font-size: var(--font-size-small); font-weight: var(--font-weight-medium); }
.ds-sidebar__version { color: var(--color-text-muted); font-size: 13px; }
.ds-search { margin-top: 24px; }
.ds-search input { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-page); color: var(--color-text); font: inherit; font-size: 14px; outline: 0; }
.ds-search input:focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(48, 12, 255, 0.12); }
.ds-nav {
  display: grid;
  flex: 1;
  align-content: start;
  gap: 4px;
  min-height: 0;
  margin-top: 24px;
  padding-right: 6px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: var(--color-border) transparent;
  scrollbar-width: thin;
}
.ds-nav::-webkit-scrollbar { width: 6px; }
.ds-nav::-webkit-scrollbar-track { background: transparent; }
.ds-nav::-webkit-scrollbar-thumb { border-radius: var(--radius-pill); background: var(--color-border); }
.ds-nav::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.ds-nav__group { margin: 18px 10px 6px; color: var(--color-text-muted); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.ds-nav a { padding: 8px 10px; border-radius: var(--radius-xs); font-size: 14px; }
.ds-nav a:hover, .ds-nav a.is-active { background: var(--color-media-surface); color: var(--color-accent); }
.ds-sidebar__back { display: flex; gap: 10px; margin-top: auto; padding-top: 28px; color: var(--color-text-muted); font-size: 14px; }

.ds-main { min-width: 0; margin-left: 280px; padding: 24px; }
.ds-hero, .ds-section { max-width: 1240px; margin-inline: auto; }
.ds-hero { display: grid; gap: 24px; min-height: 620px; align-content: end; padding: clamp(36px, 6vw, 88px); overflow: hidden; border-radius: var(--radius-xl); background: radial-gradient(circle at 78% 20%, var(--color-hero-radial-core), transparent 34%), linear-gradient(135deg, var(--color-hero-gradient-start), var(--color-hero-gradient-mid) 58%, var(--color-hero-gradient-end)); color: var(--color-white); }
.ds-hero .ds-eyebrow { color: var(--color-hero-text-muted); }
.ds-hero h1 { max-width: 980px; font-size: var(--font-size-h1); }
.ds-hero > p:not(.ds-eyebrow) { max-width: 760px; color: var(--color-hero-text-muted); font-size: var(--font-size-content-copy); }
.ds-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ds-hero__actions .button--primary { background: var(--color-white); color: var(--color-text); }
.ds-hero__actions .button--primary:hover,
.ds-hero__actions .button--primary:focus-visible { background: var(--color-surface-hover); color: var(--color-text); }
.ds-hero .button--outline { border-color: rgba(255,255,255,.44); color: var(--color-white); }

.ds-section { display: grid; gap: 40px; padding: 112px 0; border-bottom: 1px solid var(--color-border); }
.ds-section__intro { display: grid; gap: 14px; max-width: 760px; }
.ds-section__intro h2 { font-size: var(--font-size-h2); }
.ds-section__intro > p:last-child { color: var(--color-text-muted); font-size: var(--font-size-content-copy); }
.ds-section code { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .86em; }
.ds-file-map { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-file-map article { display: grid; align-content: start; gap: 12px; min-height: 220px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ds-file-map code { color: var(--color-accent); }
.ds-file-map strong { font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); }
.ds-file-map p { color: var(--color-text-muted); font-size: 14px; }
.ds-principles { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-principles article { display: grid; align-content: start; gap: 12px; padding-top: 20px; border-top: 1px solid var(--color-border); }
.ds-principles span { color: var(--color-accent); font-size: 13px; font-weight: var(--font-weight-medium); }
.ds-principles strong { font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); }
.ds-principles p { color: var(--color-text-muted); font-size: 14px; }
.ds-flow { display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 16px; }
.ds-flow article { display: grid; gap: 8px; min-height: 132px; align-content: center; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ds-flow code { color: var(--color-accent); }
.ds-flow span { color: var(--color-text-muted); font-size: 13px; }
.ds-flow i { color: var(--color-text-muted); font-size: 24px; font-style: normal; }
.ds-note { display: grid; grid-template-columns: minmax(140px,.8fr) minmax(0,3fr); gap: var(--grid-gutter); padding: 28px; border-radius: var(--radius-lg); background: var(--color-media-surface); }
.ds-note strong { color: var(--color-accent); font-weight: var(--font-weight-medium); }
.ds-note p { font-size: var(--font-size-content-copy); }
.ds-logo-caption { font-size: var(--font-size-logo-caption); line-height: 1.2; }

.ds-token-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.ds-token { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ds-token__swatch { height: 104px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--token-color); }
.ds-token__name { overflow-wrap: anywhere; font-size: 13px; font-weight: var(--font-weight-medium); }
.ds-token__value { overflow-wrap: anywhere; color: var(--color-text-muted); font-size: 12px; }
.ds-token__copy { justify-self: start; padding: 0; background: none; color: var(--color-text); font-size: 12px; }

.ds-type-stack { display: grid; border-top: 1px solid var(--color-border); }
.ds-type-stack article { display: grid; grid-template-columns: 180px minmax(0,1fr) auto; align-items: baseline; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--color-border); }
.ds-type-stack article > span, .ds-type-stack code { color: var(--color-text-muted); font-size: 13px; }
.ds-type-stack .case-story-section__subtitle { max-width: none; }
.ds-type-display--h1 { font-size: var(--font-size-h1); font-weight: var(--font-weight-medium); line-height: var(--line-height-tight); letter-spacing: var(--letter-spacing-heading); }
.ds-weight-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-weight-grid article { display: grid; gap: 8px; padding: 28px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ds-weight-grid span { color: var(--color-accent); font-size: 13px; }
.ds-weight-grid strong { font-size: var(--font-size-h4); font-weight: inherit; }
.ds-weight-grid p { color: var(--color-text-muted); font-size: 14px; font-weight: 400; }
.ds-subheading { margin-top: 16px; font-size: var(--font-size-h4); }
.ds-spacing-list { display: grid; border-top: 1px solid var(--color-border); }
.ds-spacing-token { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,2fr); align-items: center; gap: 28px; width: 100%; padding: 18px 0; border-bottom: 1px solid var(--color-border); background: transparent; color: var(--color-text); text-align: left; }
.ds-spacing-token__meta { display: grid; gap: 4px; }
.ds-spacing-token small, .ds-radius-token small { color: var(--color-text-muted); font-size: 12px; }
.ds-spacing-token i { display: block; max-width: 100%; height: 18px; border-radius: var(--radius-pill); background: var(--color-accent); }
.ds-radius-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.ds-radius-token { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; }
.ds-radius-token i { display: block; height: 100px; border: 2px solid var(--color-accent); background: var(--color-media-surface); }
.ds-radius-token code { overflow-wrap: anywhere; font-size: 11px; }
.ds-grid-demo { display: grid; grid-template-columns: var(--grid-columns); gap: var(--grid-gutter); padding: 28px; border-radius: var(--radius-lg); background: var(--color-media-surface); }
.ds-grid-demo span { display: grid; place-items: center; min-height: 180px; border-radius: var(--radius-sm); background: rgba(48,12,255,.12); color: var(--color-accent); font-weight: var(--font-weight-medium); }
.ds-breakpoints { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-breakpoints article { display: grid; gap: 8px; padding-top: 18px; border-top: 2px solid var(--color-text); }
.ds-breakpoints strong { font-size: var(--font-size-h4); font-weight: var(--font-weight-medium); }
.ds-breakpoints span { color: var(--color-accent); font-size: 13px; }
.ds-breakpoints p { color: var(--color-text-muted); font-size: 13px; }
.ds-token-table, .ds-token-reference { display: grid; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface); }
.ds-token-reference { max-height: 780px; overflow-y: auto; }
.ds-token-row { display: grid; grid-template-columns: minmax(220px,1fr) minmax(0,2fr) auto; align-items: center; gap: 20px; padding: 13px 16px; border-bottom: 1px solid var(--color-border); }
.ds-token-row:last-child { border-bottom: 0; }
.ds-token-row code, .ds-token-row span { overflow-wrap: anywhere; font-size: 12px; }
.ds-token-row span { color: var(--color-text-muted); }
.ds-token-row button { padding: 6px 9px; border-radius: var(--radius-xs); background: var(--color-media-surface); color: var(--color-text); font-size: 11px; }
.ds-motion-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-motion-grid article { display: grid; gap: 12px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ds-motion-grid strong { font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); }
.ds-motion-grid p { color: var(--color-text-muted); font-size: 14px; }
.ds-motion-grid code { color: var(--color-accent); }
.ds-motion-sample { position: relative; height: 130px; overflow: hidden; border-radius: var(--radius-md); background: var(--color-media-surface); }
.ds-motion-sample::after { position: absolute; top: 42px; left: calc(50% - 23px); width: 46px; height: 46px; border-radius: var(--radius-sm); background: var(--color-accent); content: ""; }
.ds-motion-sample--reveal::after { opacity: .32; transform: translateY(var(--motion-distance-md)); }
.ds-motion-sample--hover::after { transition: transform var(--motion-duration-fast) ease, background var(--motion-duration-fast) ease; }
.ds-motion-sample--hover:hover::after { background: var(--color-accent-hover); transform: scale(1.12); }
.ds-motion-sample--slide::after { transform: translateX(-56px); }
.ds-motion-grid article:hover .ds-motion-sample--reveal::after,
.ds-motion-grid article:focus-within .ds-motion-sample--reveal::after { animation: ds-reveal var(--motion-duration-reveal) var(--motion-ease-emphasized) both; }
.ds-motion-grid article:hover .ds-motion-sample--slide::after,
.ds-motion-grid article:focus-within .ds-motion-sample--slide::after { animation: ds-slide 720ms var(--motion-ease-emphasized) both; }
@keyframes ds-reveal { from{opacity:.32;transform:translateY(var(--motion-distance-md))} to{opacity:1;transform:none} }
@keyframes ds-slide { from{transform:translateX(-56px)} to{transform:translateX(56px)} }
.ds-icon-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 14px; }
.ds-icon-card { display: grid; gap: 10px; min-width: 0; padding: 12px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); text-align: left; }
.ds-icon-card__visual { display: grid; place-items: center; height: 104px; border-radius: var(--radius-sm); background: var(--color-media-surface); }
[data-ds-icon-gallery="ui"] .ds-icon-card__visual { background: conic-gradient(from 90deg, var(--color-surface-strong) 0 25%, var(--color-media-surface) 0 50%, var(--color-surface-strong) 0 75%, var(--color-media-surface) 0); }
.ds-icon-card__visual img { width: 46px; height: 46px; object-fit: contain; }
.ds-icon-card code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.ds-icon-card small { color: var(--color-accent); font-size: 11px; }
.ds-glyph-preview { align-items: stretch; }
.ds-glyph { position: relative; display: grid; place-items: center; align-content: center; gap: 18px; width: 150px; min-height: 140px; padding: 18px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ds-glyph .contact-icon { width: 26px; height: 26px; }
.ds-glyph .case-contents__icon { position: relative; }
.ds-glyph .case-card__stat-value { font-size: var(--font-size-h4); }
.ds-glyph small { color: var(--color-text-muted); font-size: 11px; text-align: center; }
.ds-glyph--dark { background: var(--color-surface-strong); color: var(--color-white); }
.ds-glyph--dark .hero-card__play { position: relative; inset: auto; transform: none; }
.ds-api-table { display: grid; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ds-api-table > div { display: grid; grid-template-columns: minmax(140px,.75fr) minmax(260px,1.5fr) minmax(0,1fr); gap: var(--grid-gutter); align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--color-border); }
.ds-api-table > div:last-child { border-bottom: 0; }
.ds-api-table__head { background: var(--color-media-surface); color: var(--color-text-muted); font-size: 12px; }
.ds-api-table strong { font-weight: var(--font-weight-medium); }
.ds-api-table code { overflow-wrap: anywhere; color: var(--color-accent); font-size: 12px; }
.ds-api-table p { color: var(--color-text-muted); font-size: 13px; }

.ds-example { display: grid; width: 100%; min-width: 0; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ds-example__preview { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; width: 100%; min-width: 0; min-height: 220px; padding: 40px; background-image: linear-gradient(45deg, rgba(38,38,38,.025) 25%, transparent 25%), linear-gradient(-45deg, rgba(38,38,38,.025) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, rgba(38,38,38,.025) 75%), linear-gradient(-45deg, transparent 75%, rgba(38,38,38,.025) 75%); background-size: 24px 24px; background-position: 0 0, 0 12px, 12px -12px, -12px 0; }
.ds-example__preview--column { flex-direction: column; align-items: stretch; }
.ds-example__preview--block { display: block; }
.ds-example__preview--flush { max-width: 100%; padding: 0; overflow: hidden; background: none; }
.ds-example__preview--flush .hero-section { padding: 0; }
.ds-example__preview--flush .hero-card, .ds-example__preview--flush .case-card { border-radius: 0; }
.ds-example .section-tabs { position: relative; inset: auto; z-index: 1; display: block; width: 100%; opacity: 1; visibility: visible; transform: none; }
.ds-example .section-tabs__list { justify-content: flex-start; }
.ds-language-demo { align-self: flex-start; min-height: 150px; }
.ds-example .case-study-stats { width: 100%; }
.ds-example .case-study-facts { width: 100%; }
.ds-example .altprof-insights { width: 100%; }
.ds-example .case-media { margin-top: 0; }
#media .case-media { --case-media-ratio: 16 / 9 !important; }
.ds-case-section-demo { padding-top: 0; }
.ds-example .contact-links { width: 100%; }
.ds-contact-cta-demo { align-self: flex-start; }
.ds-example .about-slider { position: relative; display: block; width: 100%; max-width: 620px; height: 540px; margin-inline: auto; overflow: hidden; border-radius: var(--radius-lg); background: var(--color-media-surface); }
.ds-example .marquee { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
.ds-status { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 18px 20px; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.ds-status strong { margin-right: auto; font-weight: var(--font-weight-medium); }
.ds-status span { padding: 7px 10px; border-radius: var(--radius-pill); background: var(--color-media-surface); color: var(--color-text-muted); font-size: 12px; }
.ds-case-contents-demo { position: relative; top: auto; width: min(100%, 320px); height: auto; max-height: none; padding: 22px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-page); }
.ds-case-contents-demo .case-contents__nav { max-height: none; opacity: 1; visibility: visible; }
.ds-contact-footer-demo { position: relative; inset: auto; width: 100%; padding: 24px 0; color: var(--color-text); }
.ds-error-demo { --error-panel-start: var(--color-hero-gradient-mid); --error-panel-end: var(--color-hero-gradient-end); min-height: 560px; }
.ds-example--code-only .ds-example__code { border-top: 0; }
.ds-example__code { min-width: 0; border-top: 1px solid var(--color-border); background: var(--color-surface-strong); color: var(--color-white); }
.ds-codebar { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.62); font-size: 12px; }
.ds-codebar button { padding: 7px 10px; border-radius: var(--radius-xs); background: rgba(255,255,255,.1); color: var(--color-white); font-size: 12px; }
.ds-example pre { max-height: 360px; margin: 0; padding: 20px; overflow: auto; white-space: pre; }
.ds-example pre code { font-size: 13px; line-height: 1.6; }
.ds-guideline-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-guideline-grid article { display: grid; gap: 10px; padding: 22px; border-left: 3px solid var(--color-accent); background: var(--color-surface); }
.ds-guideline-grid p { color: var(--color-text-muted); font-size: 14px; }
.ds-builder-steps { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--color-border); }
.ds-builder-steps li { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--color-border); }
.ds-builder-steps li > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-white); }
.ds-builder-steps div { display: grid; gap: 6px; }
.ds-builder-steps p { color: var(--color-text-muted); font-size: 14px; }
.ds-checklist { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-checklist article { display: grid; align-content: start; gap: 14px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.ds-checklist strong { font-size: var(--font-size-h5); font-weight: var(--font-weight-medium); }
.ds-checklist ul { display: grid; gap: 8px; margin: 0; padding-left: 1.1em; color: var(--color-text-muted); font-size: 14px; }
.ds-coverage { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--grid-gutter); }
.ds-coverage > div { display: grid; align-content: start; gap: 10px; padding: 22px; border-radius: var(--radius-md); background: var(--color-media-surface); }
.ds-coverage strong { font-weight: var(--font-weight-medium); }
.ds-coverage p { color: var(--color-text-muted); font-size: 13px; }
.ds-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; max-width: 1240px; margin: 0 auto; padding: 36px 0 12px; color: var(--color-text-muted); font-size: 13px; }
.ds-footer a { color: var(--color-accent); }

@media (max-width: 1080px) {
  .ds-sidebar { width: 230px; }
  .ds-main { margin-left: 230px; }
  .ds-file-map, .ds-token-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ds-principles, .ds-breakpoints { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ds-flow { grid-template-columns: 1fr; }
  .ds-flow i { transform: rotate(90deg); justify-self: center; }
  .ds-radius-grid, .ds-icon-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ds-checklist { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 767.98px) {
  .ds-shell { display: block; }
  .ds-sidebar { position: relative; inset: auto; width: auto; height: auto; padding: 18px 20px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--color-border); }
  .ds-sidebar__intro, .ds-search, .ds-nav, .ds-sidebar__back { display: none; }
  .ds-main { margin-left: 0; padding: 12px; }
  .ds-hero { min-height: 560px; padding: 28px 20px; border-radius: 24px; }
  .ds-section { gap: 28px; padding: 72px 8px; }
  .ds-file-map, .ds-token-grid { grid-template-columns: 1fr; }
  .ds-principles, .ds-weight-grid, .ds-breakpoints, .ds-motion-grid, .ds-guideline-grid, .ds-checklist, .ds-coverage { grid-template-columns: 1fr; }
  .ds-note { grid-template-columns: 1fr; }
  .ds-api-table__head { display: none !important; }
  .ds-api-table > div { grid-template-columns: 1fr; gap: 8px; }
  .ds-spacing-token { grid-template-columns: 1fr; }
  .ds-radius-grid, .ds-icon-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .ds-grid-demo { gap: 8px; padding: 14px; }
  .ds-grid-demo span { min-height: 90px; }
  .ds-token-row { grid-template-columns: 1fr auto; gap: 8px; }
  .ds-token-row span { grid-column: 1 / -1; grid-row: 2; }
  .ds-type-stack article { grid-template-columns: 1fr; gap: 12px; }
  .ds-example__preview { min-height: 0; padding: 24px 18px; }
  .ds-example__preview--flush { padding: 0; }
  .ds-footer { flex-direction: column; align-items: flex-start; padding-inline: 8px; }
}