@font-face {
  font-family: "ABC Diatype Variable";
  src: url("./assets/fonts/ABCDiatype-Variable.ttf") format("truetype");
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --system-brand: #6442c0;
  --system-brand-soft: #e1daf7;
  --system-panel: var(--background-subtle);
  --system-panel-strong: #202022;
  --component-system-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
}

:root .design-system-page :is(
  .button-preview-canvas,
  .input-preview-canvas,
  .selection-preview-canvas,
  .form-preview-canvas,
  .dialog-preview-canvas,
  .feedback-preview-canvas
) {
  --font: var(--component-system-font);
  --font-cjk: var(--component-system-font);
  --font-latin: var(--component-system-font);
  font-family: var(--component-system-font);
}

html.has-js:not(.preview-modes-ready) .shadow-module,
html.has-js:not(.preview-modes-ready) .button-configurator,
html.has-js:not(.preview-modes-ready) .input-configurator,
html.has-js:not(.preview-modes-ready) .selection-configurator,
html.has-js:not(.preview-modes-ready) .form-configurator,
html.has-js:not(.preview-modes-ready) .dialog-preview,
html.has-js:not(.preview-modes-ready) .feedback-configurator {
  visibility: hidden;
}

html.has-js.preview-modes-syncing :is(
  .shadow-module,
  .button-configurator,
  .input-configurator,
  .selection-configurator,
  .form-configurator,
  .dialog-preview,
  .feedback-configurator
),
html.has-js.preview-modes-syncing :is(
  .shadow-module,
  .button-configurator,
  .input-configurator,
  .selection-configurator,
  .form-configurator,
  .dialog-preview,
  .feedback-configurator
) * {
  transition: none !important;
}

.design-system-page [hidden] {
  display: none !important;
}

.design-system-page .case-header {
  padding-top: 4px;
}

.case-eyebrow,
.section-kicker {
  margin: 0 0 12px;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
}

.system-hero {
  position: relative;
  min-height: 470px;
  margin: 40px 0 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background-subtle);
  isolation: isolate;
}

.system-hero::after {
  content: "COMPONENTS / TOKENS";
  position: absolute;
  right: 18px;
  bottom: 14px;
  color: var(--text-subtler);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.system-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--grid-default) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-default) 1px, transparent 1px);
  background-size: 25% 50%;
  pointer-events: none;
}

.system-hero-item {
  position: absolute;
  display: block;
  height: auto;
  filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.07));
  transform: translateZ(0);
}

.hero-toast { top: 28px; right: 26px; width: 34%; animation: system-float 8s ease-in-out infinite; }
.hero-input { top: 115px; right: 55px; width: 42%; animation: system-float 9s 1s ease-in-out infinite reverse; }
.hero-navigation { top: 174px; right: 26px; width: 54%; }
.hero-upload { top: 236px; right: 24px; width: 53%; }
.hero-image { bottom: 24px; left: 28px; width: 31%; }
.hero-video { bottom: 24px; right: 24px; width: 53%; }

@keyframes system-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

.system-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.system-summary > div {
  display: flex;
  min-height: 130px;
  flex-direction: column;
  justify-content: space-between;
  padding: 16px;
  background: var(--background-subtle);
}

.system-summary > div + div { border-left: 1px solid var(--line); }
.system-summary span { color: var(--quiet); font-size: 10px; }
.system-summary strong { font-size: 14px; font-weight: 650; }
.system-summary small { color: var(--muted); font-size: 10px; line-height: 1.4; }

.atomic-demo,
.token-demo,
.component-demo {
  margin-top: 28px;
}

.atomic-stage {
  position: relative;
  display: grid;
  min-height: 330px;
  grid-template-columns: minmax(180px, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: 32px;
  overflow: hidden;
  padding: 34px;
  border-radius: 10px;
  background: #202022;
  color: #f5f5f5;
}

.atomic-orbit {
  position: absolute;
  top: -36%;
  left: -20%;
  width: 66%;
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  box-shadow: 0 0 0 52px rgba(255, 255, 255, 0.025), 0 0 0 104px rgba(255, 255, 255, 0.018);
}

.atomic-preview {
  position: relative;
  z-index: 1;
  display: grid;
  min-height: 180px;
  place-items: center;
}

.atomic-preview::before {
  content: "";
  position: absolute;
  width: 156px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(100, 66, 192, 0.34), rgba(100, 66, 192, 0));
  filter: blur(12px);
}

.atomic-preview img {
  position: relative;
  width: 126px;
  height: 126px;
  object-fit: contain;
}

.atomic-copy {
  position: relative;
  z-index: 1;
}

.atomic-copy span { color: rgba(255, 255, 255, 0.45); font-size: 10px; letter-spacing: 0.08em; }
.atomic-copy h3 { margin: 24px 0 8px; font-size: 26px; letter-spacing: -0.04em; }
.atomic-copy p { max-width: 340px; margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 13px; line-height: 1.75; }

.atomic-controls {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 4px;
  margin-top: 8px;
  padding: 4px;
  border-radius: 8px;
  background: var(--tabbar-bg);
}

.atomic-controls button {
  min-width: 0;
  padding: 10px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.atomic-controls button[aria-selected="false"]:hover,
.atomic-controls button[aria-selected="false"]:focus-visible {
  color: var(--ink);
}

.atomic-controls button.is-active {
  background: var(--tabbar-fg);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.atomic-controls button:focus-visible,
.token-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--system-brand) 38%, transparent);
  outline-offset: 2px;
}

.token-workbench {
  display: grid;
  grid-template-columns: 176px minmax(0, 1fr);
  grid-template-rows: auto 310px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background-subtle);
}

.token-tabs {
  display: flex;
  grid-row: 1 / 3;
  flex-direction: column;
  gap: 4px;
  padding: 8px;
  border-right: 1px solid var(--line);
  background: var(--background-subtle);
}

.token-tabs button {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto auto;
  min-width: 0;
  min-height: 80px;
  align-content: center;
  gap: 3px 8px;
  padding: 12px 14px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  transition: background-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.token-tabs button::after {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 12px;
  left: 0;
  width: 2px;
  border-radius: 999px;
  background: transparent;
}

.token-tabs button[aria-selected="false"]:hover,
.token-tabs button[aria-selected="false"]:focus-visible {
  background: var(--navigation-bg-hover);
}

.token-tabs button.is-active {
  background: var(--tabbar-fg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.token-tabs button.is-active::after { background: var(--system-brand); }
.token-tabs span { grid-row: 1 / 3; align-self: center; color: var(--quiet); font-size: 9px; }
.token-tabs strong { align-self: end; font-size: 13px; font-weight: 650; line-height: 1.2; }
.token-tabs small { align-self: start; color: var(--muted); font-size: 9px; line-height: 1.3; }

.token-output {
  min-width: 0;
  min-height: 210px;
  padding: 24px 26px;
}

.token-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(190px, 0.9fr);
  align-items: end;
  gap: 28px;
  animation: token-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.token-panel[hidden],
.token-reference img[hidden] {
  display: none !important;
}

.token-panel header p {
  margin: 0 0 12px;
  color: var(--quiet);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.token-panel header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.035em;
  line-height: 1.3;
}

.token-panel header > span {
  display: block;
  max-width: 290px;
  margin-top: 8px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.token-examples {
  display: grid;
  gap: 8px;
}

.token-example {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 12px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--background-default);
}

.token-example p { display: flex; min-width: 0; flex-direction: column; gap: 3px; margin: 0; }
.token-example strong { overflow: hidden; font-size: 10px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.token-example code { color: var(--quiet); font-family: var(--font-mono); font-size: 9px; }

.token-swatch { display: block; width: 34px; height: 34px; flex: 0 0 34px; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 6px; }
.token-swatch.is-brand, .token-swatch.is-button { background: #6442c0; }
.token-swatch.is-gray { background: #7b7980; }
.token-swatch.is-surface { background: #e1daf7; }
.token-swatch.is-text { background: #1d1c1f; }
.token-swatch.is-focus { border: 2px solid #8063cf; background: #fff; }

.token-reference {
  min-width: 0;
  min-height: 310px;
  margin: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  background: #f7f7f8;
}

.token-reference img {
  display: block;
  width: 100%;
  height: 310px;
  object-fit: contain;
  padding: 16px 20px;
  animation: token-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.token-hint {
  margin: 10px 2px 0;
  color: var(--quiet);
  font-size: 10px;
  line-height: 1.5;
}

@keyframes token-enter {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.foundation-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 28px;
}

.typography-module {
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background-subtle);
}

.typography-module-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 0.9fr);
  gap: 28px;
  align-items: end;
  padding: 24px 26px;
  border-bottom: 1px solid var(--line);
}

.typography-module-head h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.035em;
}

.typography-module-head > div > p {
  max-width: 350px;
  margin: 9px 0 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.65;
}

.typography-families {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--background);
}

.typography-families > div {
  display: flex;
  min-width: 0;
  min-height: 96px;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
}

.typography-families > div + div { border-left: 1px solid var(--line); }
.typography-families span { color: var(--quiet); font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; }
.typography-families strong { overflow: hidden; font-size: 11px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.typography-families small { color: var(--muted); font-size: 9px; line-height: 1.4; }

.type-scale {
  padding: 0 26px;
  background: var(--background);
}

.type-scale-row {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) 56px;
  min-height: 82px;
  align-items: center;
  gap: 20px;
}

.type-scale-row + .type-scale-row { border-top: 1px solid var(--line); }
.type-scale-row > span,
.type-scale-row > small {
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 9px;
}
.type-scale-row > small { text-align: right; }
.type-scale-row > p { min-width: 0; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-scale-row.is-display > p,
.type-scale-row.is-heading > p,
.type-scale-row.is-title > p { font-family: "ABC Diatype Variable", var(--font); }
.type-scale-row.is-display > p { font-size: 36px; font-weight: 520; letter-spacing: -0.045em; }
.type-scale-row.is-heading > p { font-size: 28px; font-weight: 520; letter-spacing: -0.04em; }
.type-scale-row.is-title > p { font-size: 24px; font-weight: 520; letter-spacing: -0.035em; }
.type-scale-row.is-subtitle > p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); font-size: 20px; font-weight: 600; }
.type-scale-row.is-body-large > p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); font-size: 18px; }
.type-scale-row.is-body > p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); font-size: 16px; }
.type-scale-row.is-supporting > p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); color: var(--muted); font-size: 14px; }
.type-scale-row.is-caption > p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); color: var(--muted); font-size: 12px; }
.type-scale-row.is-micro > p { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font); color: var(--quiet); font-size: 10px; }

.foundation-card {
  display: flex;
  min-width: 0;
  min-height: 320px;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--background-subtle);
}

.foundation-card.is-wide { grid-column: 1 / -1; min-height: 280px; }
.foundation-card figcaption { display: flex; flex-direction: column; gap: 5px; padding: 16px; }
.foundation-card figcaption span { color: var(--quiet); font-size: 9px; letter-spacing: 0.1em; }
.foundation-card figcaption strong { font-size: 13px; font-weight: 650; }
.foundation-card img { width: 100%; min-height: 0; flex: 1; object-fit: contain; padding: 14px; }
.foundation-card.is-wide img { max-height: 230px; }

.shadow-module {
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background);
}

.shadow-module-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.shadow-module-head > div:first-child > span {
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.shadow-module-head h3 { margin: 12px 0 7px; font-size: 20px; font-weight: 650; letter-spacing: -0.025em; }
.shadow-module-head p { max-width: 540px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.shadow-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(68px, 1fr));
  gap: 4px;
  padding: 4px;
  border-radius: 8px;
  background: var(--tabbar-bg);
}

.shadow-mode-switch button {
  min-height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 10px;
  font-weight: 650;
}

.shadow-mode-switch button[aria-pressed="true"] {
  background: var(--tabbar-fg);
  color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.shadow-mode-switch button:focus-visible { outline: 2px solid color-mix(in srgb, var(--system-brand) 36%, transparent); outline-offset: 2px; }

.shadow-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
}

.shadow-preview-stage {
  display: flex;
  min-width: 0;
  min-height: 390px;
  flex-direction: column;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: #e8e8ea;
  transition: background-color 160ms ease;
}

.shadow-preview-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.shadow-preview-toolbar > span {
  color: #747378;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}
.shadow-preview-canvas { display: grid; min-height: 0; flex: 1; place-items: center; padding: 36px 20px; }

.shadow-preview-card {
  display: flex;
  width: min(220px, 72%);
  aspect-ratio: 1 / 1.04;
  flex-direction: column;
  justify-content: flex-end;
  padding: 18px;
  border: 0;
  border-radius: 2px;
  background: #ffffff;
  color: #1d1c1f;
  box-shadow: var(--preview-shadow, 0 0 4px 0 rgba(0, 0, 0, 0.12));
  transition: background-color 160ms ease, color 160ms ease, box-shadow 180ms ease;
}

.shadow-preview-name {
  color: #696e6c;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
}

.shadow-module[data-shadow-mode="dark"] .shadow-preview-stage { background: #202022; }
.shadow-module[data-shadow-mode="dark"] .shadow-preview-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: #1c1c1c;
  color: #f5f4f6;
  box-shadow: var(--preview-shadow);
}

.shadow-control-panel { min-width: 0; padding: 22px; background: var(--background); }
.shadow-control-row { display: grid; grid-template-columns: minmax(70px, 0.7fr) minmax(130px, 1.3fr); align-items: center; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 11px; }
.shadow-control-row select { width: 100%; height: 36px; padding: 0 30px 0 10px; border: 1px solid var(--line-strong); border-radius: 7px; outline: 0; background: var(--background-subtle); color: var(--ink); font: inherit; }
.shadow-control-row select:focus-visible { border-color: var(--system-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--system-brand) 18%, transparent); }

.shadow-parameters { margin: 14px 0 0; }
.shadow-parameters > div { display: grid; grid-template-columns: minmax(70px, 0.7fr) minmax(130px, 1.3fr); min-height: 44px; align-items: center; gap: 12px; }
.shadow-parameters dt { color: var(--muted); font-size: 11px; }
.shadow-parameters dd { min-width: 0; margin: 0; overflow: hidden; color: var(--ink); font-family: var(--font-mono); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.blur-module {
  margin-top: 28px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background);
}

.blur-module-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 28px;
  padding: 24px;
  border-bottom: 1px solid var(--line);
}

.blur-module-head h3 { margin: 0 0 7px; font-size: 20px; font-weight: 650; letter-spacing: -0.025em; }
.blur-module-head p { max-width: 540px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.65; }

.blur-current {
  display: flex;
  min-width: 168px;
  flex-direction: column;
  align-items: flex-end;
  gap: 7px;
}

.blur-current span { color: var(--muted); font-family: var(--font-mono); font-size: 9px; }
.blur-current strong { color: var(--ink); font-family: var(--font-mono); font-size: 16px; font-weight: 550; }

.blur-preview-stage {
  position: relative;
  min-height: 410px;
  overflow: hidden;
  background: #dfe2dd;
  isolation: isolate;
}

.blur-preview-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  transform: scale(1.02);
}

.blur-preview-panel {
  position: absolute;
  inset: 38px auto 38px 38px;
  display: flex;
  width: calc(50% - 48px);
  min-width: 250px;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.54);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.42);
  color: #1d1c1f;
  -webkit-backdrop-filter: blur(var(--blur-preview, 8px));
  backdrop-filter: blur(var(--blur-preview, 8px));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.36);
}

.blur-preview-panel small { color: rgba(29, 28, 31, 0.58); font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.08em; }
.blur-preview-panel strong { margin-top: 9px; font-size: 18px; font-weight: 650; }
.blur-preview-panel span { margin-top: 3px; font-family: var(--font-mono); font-size: 12px; }

.blur-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px;
  background: var(--line);
}

.blur-options button {
  display: flex;
  min-width: 0;
  min-height: 70px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border: 0;
  background: var(--background);
  color: var(--muted);
  text-align: left;
}

.blur-options button span { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.blur-options button strong { flex: 0 0 auto; color: var(--ink); font-family: inherit; font-size: 10px; font-weight: 550; }
.blur-options button[aria-pressed="true"] { background: color-mix(in srgb, var(--system-brand) 9%, var(--background)); color: var(--ink); }
.blur-options button[aria-pressed="true"] strong { color: var(--system-brand); }
.blur-options button:focus-visible { position: relative; z-index: 1; outline: 2px solid color-mix(in srgb, var(--system-brand) 42%, transparent); outline-offset: -3px; }

:root[data-theme="dark"] .blur-preview-panel {
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(28, 27, 30, 0.48);
  color: #f5f4f6;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

:root[data-theme="dark"] .blur-preview-panel small { color: rgba(245, 244, 246, 0.6); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .blur-preview-panel { background: rgba(255, 255, 255, 0.9); }
  :root[data-theme="dark"] .blur-preview-panel { background: rgba(28, 27, 30, 0.92); }
}

.component-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background);
}

.button-preview-stage {
  display: flex;
  min-width: 0;
  min-height: 450px;
  flex-direction: column;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: var(--background-subtle);
}

.button-preview-stage > span {
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
}

.button-preview-canvas {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 36px 20px;
}

.configurable-button {
  --button-bg: #111112;
  --button-fg: #ffffff;
  --button-border: transparent;
  position: relative;
  display: inline-flex;
  min-width: 0;
  max-width: 100%;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid var(--button-border);
  border-radius: 6px;
  background: var(--button-bg);
  color: var(--button-fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
  transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.configurable-button:not(:disabled):hover { filter: brightness(0.94); }
.configurable-button:not(:disabled):active { transform: scale(0.98); }
.configurable-button:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(128, 99, 207, 0.25); }
.button-preview-icon { font-size: 1.05em; font-weight: 500; line-height: 1; }

/* Shared loading indicator using HeroUI's two-path SVG gradient. */
.ds-loading-spinner {
  --loading-spinner-size: 20px;
  display: grid;
  width: var(--loading-spinner-size);
  height: var(--loading-spinner-size);
  flex: 0 0 var(--loading-spinner-size);
  place-items: center;
  transform-origin: center;
  animation: ds-loading-spinner-rotate 750ms linear infinite;
}

.ds-loading-spinner svg {
  display: block;
  width: calc(var(--loading-spinner-size) * 0.8);
  height: calc(var(--loading-spinner-size) * 0.8);
}

.ds-loading-spinner[hidden] { display: none !important; }

@keyframes ds-loading-spinner-rotate { to { transform: rotate(360deg); } }

.button-preview-icon[hidden],
.button-icon-only[hidden],
.button-energy[hidden],
.button-loading-spinner[hidden] { display: none !important; }
.button-icon-only { font-size: 1.18em; font-weight: 450; line-height: 1; }
.button-configurator[data-button-kind="icon-button"] .button-preview-label { display: none; }
.button-loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--button-spinner-size, 20px);
  height: var(--button-spinner-size, 20px);
  transform: translate(-50%, -50%);
}

.button-loading-spinner .ds-loading-spinner { --loading-spinner-size: var(--button-spinner-size, 20px); }
.button-energy {
  padding-left: 8px;
  border-left: 1px solid currentColor;
  font-family: var(--font-mono);
  font-size: 0.78em;
  font-weight: 500;
  opacity: 0.72;
}

.button-configurator[data-button-size="2xl"] .configurable-button { --button-spinner-size: 24px; min-height: 52px; padding: 0 24px; font-size: 16px; }
.button-configurator[data-button-size="xl"] .configurable-button { --button-spinner-size: 22px; min-height: 48px; padding: 0 21px; font-size: 15px; }
.button-configurator[data-button-size="lg"] .configurable-button { --button-spinner-size: 20px; min-height: 44px; padding: 0 18px; font-size: 14px; }
.button-configurator[data-button-size="md"] .configurable-button { --button-spinner-size: 18px; min-height: 40px; padding: 0 16px; font-size: 13px; }
.button-configurator[data-button-size="sm"] .configurable-button { --button-spinner-size: 16px; min-height: 34px; padding: 0 14px; font-size: 12px; }

.button-configurator[data-button-kind="icon-button"][data-button-size="2xl"] .configurable-button { width: 52px; min-width: 52px; padding: 0; }
.button-configurator[data-button-kind="icon-button"][data-button-size="xl"] .configurable-button { width: 48px; min-width: 48px; padding: 0; }
.button-configurator[data-button-kind="icon-button"][data-button-size="lg"] .configurable-button { width: 44px; min-width: 44px; padding: 0; }
.button-configurator[data-button-kind="icon-button"][data-button-size="md"] .configurable-button { width: 40px; min-width: 40px; padding: 0; }
.button-configurator[data-button-kind="icon-button"][data-button-size="sm"] .configurable-button { width: 34px; min-width: 34px; padding: 0; }

.button-configurator[data-button-hierarchy="primary"] .configurable-button { --button-bg: #111112; --button-fg: #ffffff; }
.button-configurator[data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #6442c0; --button-fg: #ffffff; }
.button-configurator[data-button-hierarchy="secondary"] .configurable-button { --button-bg: #faf9ff; --button-fg: #5234a5; --button-border: #a994e3; box-shadow: none; }
.button-configurator[data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #ececed; --button-fg: #1d1c1f; box-shadow: none; }
.button-configurator[data-button-hierarchy="ghost"] .configurable-button { --button-bg: transparent; --button-fg: var(--ink); --button-border: var(--border-subtler); box-shadow: none; }
.button-configurator[data-button-hierarchy="static"] .configurable-button { --button-bg: transparent; --button-fg: var(--ink); box-shadow: none; }
.button-configurator[data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(29, 28, 31, 0.52); --button-fg: #ffffff; box-shadow: none; }
.button-configurator[data-button-hierarchy="error"] .configurable-button { --button-bg: #d92119; --button-fg: #ffffff; }
.button-configurator[data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #fff2f1; --button-fg: #d92119; --button-border: #f33a32; box-shadow: none; }

.button-configurator[data-button-state="hover"] .configurable-button { filter: brightness(0.9); }
.button-configurator[data-button-state="press"] .configurable-button { filter: brightness(0.82); transform: scale(0.98); }
.button-configurator[data-button-state="focus"] .configurable-button { box-shadow: 0 0 0 3px rgba(128, 99, 207, 0.25); }
.button-configurator[data-button-state="loading"] .configurable-button {
  filter: none;
  transform: none;
  cursor: wait;
  opacity: 0.4;
}
.button-configurator[data-button-state="loading"][data-button-hierarchy="primary"] .configurable-button {
  --button-bg: #ececed;
  --button-fg: #1d1c1f;
  --button-border: #ececed;
  opacity: 1;
}
.button-configurator[data-button-state="loading"] .button-preview-label,
.button-configurator[data-button-state="loading"] .button-preview-icon,
.button-configurator[data-button-state="loading"] .button-icon-only,
.button-configurator[data-button-state="loading"] .button-energy { visibility: hidden; }
.button-configurator[data-button-state="disabled"] .configurable-button {
  --button-bg: #e7e7e8;
  --button-fg: #9c9aa0;
  --button-border: #e7e7e8;
  filter: none;
  transform: none;
  box-shadow: none;
  cursor: not-allowed;
}

.button-configurator[data-button-mode="dark"] .button-preview-stage { background: #202022; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #f5f4f6; --button-fg: #1d1c1f; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #7354c7; --button-fg: #f5f4f6; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #292332; --button-fg: #c9bbf1; --button-border: #8066ca; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #363438; --button-fg: #f5f4f6; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="ghost"] .configurable-button { --button-bg: transparent; --button-fg: #f5f4f6; --button-border: #4a474e; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="static"] .configurable-button { --button-bg: transparent; --button-fg: #f5f4f6; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(245, 244, 246, 0.18); --button-fg: #f5f4f6; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="error"] .configurable-button { --button-bg: #f33a32; --button-fg: #f5f4f6; }
.button-configurator[data-button-mode="dark"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #321f20; --button-fg: #ff8b85; --button-border: #f33a32; }
.button-configurator[data-button-mode="dark"][data-button-state="disabled"] .configurable-button,
.button-configurator[data-button-mode="dark"][data-button-state="loading"][data-button-hierarchy="primary"] .configurable-button {
  --button-bg: #363438;
  --button-fg: #8d8a91;
  --button-border: #363438;
}

.button-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.button-preview-meta code,
.button-preview-meta span {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.button-preview-meta span { color: var(--quiet); }

.button-control-panel {
  min-width: 0;
  padding: 22px;
  background: var(--background);
}

.button-control-panel header { margin-bottom: 22px; }
.button-control-panel h3 { margin: 0; font-size: 17px; font-weight: 650; }
.button-control-panel header p { margin: 7px 0 0; color: var(--muted); font-size: 11px; }

.button-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 3px;
  padding: 3px;
  border-radius: 7px;
  background: var(--tabbar-bg);
}

.button-mode-switch button {
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
}

.button-mode-switch button[aria-pressed="true"] { background: var(--tabbar-fg); color: var(--ink); box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); }
.button-mode-switch button:focus-visible { outline: 2px solid color-mix(in srgb, var(--system-brand) 36%, transparent); outline-offset: 1px; }

.button-control-row {
  display: grid;
  grid-template-columns: minmax(90px, 0.8fr) minmax(116px, 1.2fr);
  min-height: 50px;
  align-items: center;
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}

.button-control-row select {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 7px;
  outline: 0;
  background: var(--background-subtle);
  color: var(--ink);
  font: inherit;
}

.button-control-row select:focus-visible {
  border-color: var(--system-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--system-brand) 18%, transparent);
}

.property-switch {
  position: relative;
  width: 38px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--background-subtle);
  transition: border-color 140ms ease, background-color 140ms ease;
}

.property-switch i {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--quiet);
  transition: transform 160ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms ease;
}

.property-switch[aria-checked="true"] { border-color: var(--system-brand); background: var(--system-brand); }
.property-switch[aria-checked="true"] i { background: #ffffff; transform: translateX(16px); }
.property-switch:focus-visible { outline: 2px solid color-mix(in srgb, var(--system-brand) 36%, transparent); outline-offset: 2px; }
.property-switch:disabled { cursor: not-allowed; opacity: 0.42; }

.input-configurator {
  --input-surface: #ececed;
  --input-border: transparent;
  --input-border-hover: #dddce0;
  --input-focus: #6442c0;
  --input-critical: #ef3b2e;
  --input-text: #1d1c1f;
  --input-placeholder: #89878e;
  --input-label: #1d1c1f;
  --input-helper: #68676c;
  --input-disabled-bg: #e1e1e4;
  --input-disabled-fg: #aaa7b0;
  margin-top: 28px;
}

.input-preview-stage {
  display: flex;
  min-width: 0;
  min-height: 500px;
  flex-direction: column;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: var(--background-subtle);
}

.input-preview-stage > span,
.input-preview-toolbar > span {
  color: var(--quiet);
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
}

.input-preview-toolbar {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
}

.input-preview-canvas {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 42px 20px;
}

.input-field-block {
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 6px;
  color: var(--input-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font);
}

.input-title-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.input-title-block > label {
  display: block;
  margin: 0;
  color: var(--input-label);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.input-title-block > p,
.input-hint {
  margin: 0;
  color: var(--input-helper);
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.input-shell {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 0 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  background: var(--input-surface);
  box-shadow: none;
  box-sizing: border-box;
  font-size: 16px;
  line-height: 24px;
  transition: border-color 140ms ease, box-shadow 140ms ease, background-color 140ms ease;
}

.input-shell input {
  min-width: 0;
  height: 100%;
  flex: 1;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--input-text);
  font: inherit;
}

.input-shell input::placeholder { color: var(--input-placeholder); opacity: 1; }
.input-leading,
.input-trailing-icon,
.input-error-icon {
  display: inline-flex;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  align-items: center;
  justify-content: center;
  color: var(--input-placeholder);
}
.input-leading { color: var(--input-text); }
.input-leading svg,
.input-trailing-icon svg,
.input-error-icon svg,
.input-dropdown-prefix svg,
.input-dropdown-suffix svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.input-error-icon { color: var(--input-critical); }
.input-trailing-text,
.input-dropdown-prefix,
.input-dropdown-suffix,
.input-currency-prefix {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  color: var(--input-placeholder);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
}
.input-dropdown-prefix,
.input-dropdown-suffix {
  position: relative;
  gap: 0;
  color: var(--input-text);
}

.input-dropdown-trigger {
  display: inline-flex;
  height: 40px;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.input-dropdown-trigger svg { transition: transform 140ms ease; }
.input-dropdown-trigger[aria-expanded="true"] svg { transform: rotate(180deg); }

.input-dropdown-trigger:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}

.input-configurator .input-inline-select__menu {
  top: calc(100% + 6px);
  width: 104px;
  color: var(--input-text);
}

.input-dropdown-prefix .input-inline-select__menu {
  right: auto;
  left: -13px;
}

.input-dropdown-suffix .input-inline-select__menu {
  right: -13px;
  left: auto;
}

.input-configurator .input-inline-select__menu button {
  color: var(--input-text);
  font-size: 14px;
}
.input-configurator .input-inline-select__menu button:hover { background: #f0f0f1; }
.input-inline-select__menu[hidden] { display: none !important; }

.input-configurator[data-input-mode="dark"] .input-inline-select__menu,
.input-configurator[data-input-mode="dark"] .input-inline-select__menu button {
  background: #1d1c1f;
  color: var(--input-text);
}

.input-configurator[data-input-mode="dark"] .input-inline-select__menu button:hover { background: #303034; }
.input-configurator[data-input-mode="dark"] .input-inline-select__menu button img { filter: invert(1) brightness(1.65); }

.input-configurator[data-input-state="disabled"] .input-dropdown-trigger {
  color: var(--input-disabled-fg);
  cursor: not-allowed;
}

.input-title-block[hidden],
.input-title-block > p[hidden],
.input-hint[hidden],
.input-leading[hidden],
.input-trailing-icon[hidden],
.input-error-icon[hidden],
.input-trailing-text[hidden],
.input-dropdown-prefix[hidden],
.input-dropdown-suffix[hidden],
.input-currency-prefix[hidden] { display: none !important; }

.input-shell:hover,
.input-configurator[data-input-state="hover"] .input-shell { border-color: var(--input-border-hover); }
.input-shell:focus-within,
.input-configurator[data-input-state="focus"] .input-shell {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-focus) 24%, transparent);
}
.input-configurator[data-input-destructive="true"] .input-shell {
  border-color: var(--input-critical);
}
.input-configurator[data-input-destructive="true"][data-input-state="focus"] .input-shell {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--input-critical) 24%, transparent);
}
.input-configurator[data-input-destructive="true"] .input-hint { color: var(--input-critical); }
.input-configurator[data-input-state="disabled"] .input-shell {
  border-color: transparent;
  background: var(--input-disabled-bg);
  box-shadow: none;
  cursor: not-allowed;
}
.input-configurator[data-input-state="disabled"] .input-shell input,
.input-configurator[data-input-state="disabled"] .input-leading,
.input-configurator[data-input-state="disabled"] .input-trailing-icon,
.input-configurator[data-input-state="disabled"] .input-trailing-text,
.input-configurator[data-input-state="disabled"] .input-dropdown-prefix,
.input-configurator[data-input-state="disabled"] .input-dropdown-suffix,
.input-configurator[data-input-state="disabled"] .input-currency-prefix { color: var(--input-disabled-fg); cursor: not-allowed; }
.input-configurator[data-input-state="disabled"] .input-shell input::placeholder { color: var(--input-disabled-fg); }

.input-preview-meta {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.input-preview-meta code,
.input-preview-meta span {
  overflow: hidden;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-preview-meta span { color: var(--quiet); }

.input-configurator[data-input-mode="dark"] {
  --input-surface: #242426;
  --input-border: transparent;
  --input-border-hover: #313133;
  --input-focus: #8962f6;
  --input-critical: #ef3b2e;
  --input-text: #f5f5f6;
  --input-placeholder: #89878e;
  --input-label: #f5f5f6;
  --input-helper: #96949c;
  --input-disabled-bg: #1a1a1c;
  --input-disabled-fg: #5c5c5c;
}
.input-configurator[data-input-mode="dark"] .input-preview-stage { background: #0e0e0f; }
.input-configurator[data-input-mode="dark"] .input-shell { box-shadow: none; }
.input-configurator[data-input-mode="dark"][data-input-state="focus"] .input-shell { box-shadow: 0 0 0 2px rgba(137, 98, 246, 0.28); }
.input-configurator[data-input-mode="dark"][data-input-destructive="true"][data-input-state="focus"] .input-shell { box-shadow: 0 0 0 2px rgba(243, 58, 50, 0.28); }

.component-specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.component-specs figure {
  display: flex;
  min-width: 0;
  min-height: 380px;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.component-specs img { width: 100%; min-height: 0; flex: 1; object-fit: contain; padding: 16px; }
.component-specs figcaption { padding: 12px 16px 16px; color: var(--muted); font-size: 11px; line-height: 1.5; }

.system-components .gallery-card { flex-basis: 320px; width: 320px; }
.system-components .gallery-phone {
  display: grid;
  min-height: 270px;
  place-items: center;
  overflow: hidden;
  border-radius: 8px;
  background: #f7f7f8;
}
.system-components .gallery-phone img { width: 100%; height: 270px; object-fit: contain; padding: 22px; }

:root[data-theme="dark"] {
  --system-panel: var(--background-subtle);
}

:root[data-theme="dark"] .system-hero {
  border-color: var(--line);
  background: var(--background-subtle);
}

:root[data-theme="dark"] .system-hero-grid {
  background-image:
    linear-gradient(var(--grid-default) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-default) 1px, transparent 1px);
}

:root[data-theme="dark"] .system-hero-item { filter: drop-shadow(0 16px 24px rgba(0, 0, 0, 0.2)); }
:root[data-theme="dark"] .token-reference,
:root[data-theme="dark"] .component-specs figure,
:root[data-theme="dark"] .system-components .gallery-phone { background: #f5f5f5; }
:root[data-theme="dark"] .token-tabs button.is-active { background: color-mix(in srgb, var(--system-brand) 16%, var(--background)); }
:root[data-theme="dark"] .token-swatch { border-color: rgba(255, 255, 255, 0.12); }

.atomic-copy span,
.token-tabs span,
.token-panel header p,
.token-example code,
.foundation-card figcaption span,
.button-preview-meta code,
.button-preview-meta span,
.input-preview-meta code,
.input-preview-meta span {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-synthesis: none;
}

@media (max-width: 760px) {
  .case-eyebrow { margin-bottom: 10px; }
  .system-hero { min-height: 330px; margin-top: 28px; }
  .hero-toast { top: 18px; right: 16px; width: 48%; }
  .hero-input { top: 77px; right: 27px; width: 57%; }
  .hero-navigation { top: 119px; right: 16px; width: 72%; }
  .hero-upload { top: 165px; right: 14px; width: 69%; }
  .hero-image { bottom: 16px; left: 16px; width: 37%; }
  .hero-video { bottom: 16px; right: 14px; width: 63%; }

  .system-summary { grid-template-columns: 1fr; }
  .system-summary > div { min-height: 104px; }
  .system-summary > div + div { border-top: 1px solid var(--line); border-left: 0; }

  .atomic-stage { min-height: 390px; grid-template-columns: 1fr; gap: 12px; padding: 28px 22px; }
  .atomic-preview { min-height: 140px; }
  .atomic-preview img { width: 104px; height: 104px; }
  .atomic-copy h3 { margin-top: 16px; font-size: 22px; }
  .atomic-controls { grid-auto-flow: column; grid-auto-columns: minmax(68px, 1fr); overflow-x: auto; scrollbar-width: none; }
  .atomic-controls::-webkit-scrollbar { display: none; }

  .token-workbench { grid-template-columns: 1fr; grid-template-rows: auto auto 240px; }
  .token-tabs {
    grid-row: auto;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .token-tabs button {
    grid-template-columns: 1fr;
    min-height: 66px;
    padding: 9px 8px;
    text-align: center;
  }
  .token-tabs button::after {
    top: auto;
    right: 10px;
    bottom: 0;
    left: 10px;
    width: auto;
    height: 2px;
  }
  .token-tabs span { display: none; }
  .token-tabs strong { align-self: end; font-size: 11px; }
  .token-tabs small { font-size: 8px; }
  .token-output { min-height: 0; padding: 20px; }
  .token-panel { grid-template-columns: 1fr; align-items: start; gap: 18px; }
  .token-panel header > span { max-width: none; }
  .token-examples { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .token-example { gap: 8px; padding: 8px; }
  .token-swatch { width: 30px; height: 30px; flex-basis: 30px; }
  .token-reference { min-height: 240px; }
  .token-reference img { height: 240px; padding: 12px; }

  .typography-module-head { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .typography-module-head > div > p { max-width: none; }
  .typography-families > div { min-height: 88px; }
  .type-scale { padding: 0 20px; }
  .type-scale-row { grid-template-columns: 1fr auto; min-height: 78px; gap: 8px 12px; padding: 12px 0; }
  .type-scale-row > span { grid-column: 1; grid-row: 1; }
  .type-scale-row > small { grid-column: 2; grid-row: 1; }
  .type-scale-row > p { grid-column: 1 / -1; grid-row: 2; }
  .type-scale-row.is-display > p { font-size: 30px; }
  .type-scale-row.is-heading > p { font-size: 25px; }
  .type-scale-row.is-title > p { font-size: 21px; }

  .foundation-grid,
  .component-specs { grid-template-columns: 1fr; }
  .foundation-card.is-wide { grid-column: auto; }
  .foundation-card { min-height: 280px; }
  .shadow-module-head { grid-template-columns: 1fr; align-items: start; gap: 20px; padding: 20px; }
  .shadow-mode-switch { width: 100%; }
  .shadow-workbench { grid-template-columns: 1fr; }
  .shadow-preview-stage { min-height: 330px; border-right: 0; border-bottom: 1px solid var(--line); }
  .shadow-preview-canvas { min-height: 230px; padding: 30px 12px; }
  .shadow-control-panel { padding: 20px; }
  .blur-module-head { grid-template-columns: 1fr; align-items: start; gap: 18px; padding: 20px; }
  .blur-current { min-width: 0; align-items: flex-start; }
  .blur-preview-stage { min-height: 330px; }
  .blur-preview-panel { inset: 24px; width: auto; min-width: 0; padding: 20px; }
  .blur-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .blur-options button { min-height: 62px; padding: 14px; }
  .button-configurator { grid-template-columns: 1fr; }
  .button-preview-stage { min-height: 340px; border-right: 0; border-bottom: 1px solid var(--line); }
  .button-preview-canvas { min-height: 210px; padding: 30px 12px; }
  .button-control-panel { padding: 20px; }
  .button-control-row { grid-template-columns: minmax(92px, 0.9fr) minmax(0, 1.1fr); }
  .input-configurator { grid-template-columns: 1fr; }
  .input-preview-stage { min-height: 360px; border-right: 0; border-bottom: 1px solid var(--line); }
  .input-preview-canvas { min-height: 230px; padding: 34px 12px; }
  .component-specs figure { min-height: 310px; }

  .system-components .gallery-card { flex-basis: min(82vw, 310px); width: min(82vw, 310px); }
}

@media (prefers-reduced-motion: reduce) {
  .system-hero-item { animation: none !important; }
  .ds-loading-spinner { animation: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .blur-preview-panel {
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  :root[data-theme="dark"] .blur-preview-panel { background: rgba(28, 27, 30, 0.94); }
}

/* —— MyShell Design System project detail page framework overrides —— */

.design-system-page .section { margin-top: 64px; padding-top: 64px; }
.design-system-page .section:first-of-type { margin-top: 50px; }

.design-system-page .section-title { font-size: 22px; }
.design-system-page .section-desc { margin-top: 12px; font-size: 14px; line-height: 1.65; }

/* Generic top tab bar used by color, button, selection, form, feedback */
.component-tabs {
  display: flex;
  gap: 20px;
  padding: 0 22px;
  border-bottom: 1px solid var(--line);
  background: var(--background);
}

.component-tabs button {
  position: relative;
  padding: 14px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  transition: color 160ms ease;
}

.component-tabs button[aria-selected="true"],
.component-tabs button.is-active {
  color: var(--ink);
}

.component-tabs button[aria-selected="true"]::after,
.component-tabs button.is-active::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1.5px;
  background: var(--ink);
}

.component-tabs button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--system-brand) 38%, transparent);
  outline-offset: 3px;
}

/* Component demo wrapper */
.component-demo {
  display: block;
  overflow: hidden;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--background);
}

.component-workbench,
.dialog-preview {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(250px, 0.85fr);
}

/* Color system — top tabs, stacked workbench */
.token-demo { margin-top: 22px; }

.token-workbench {
  display: block;
  overflow: hidden;
  border-top: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  background: var(--background-subtle);
}

.token-output { padding: 22px 24px 10px; }

.token-panel {
  display: block;
  animation: token-enter 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.token-panel header p { margin: 0 0 8px; }
.token-panel header h3 { font-size: 16px; }
.token-panel header > span { max-width: none; margin-top: 6px; }

.token-reference {
  min-height: 0;
  border-top: 1px solid var(--line);
  background: var(--background);
}

.token-reference img {
  display: block;
  width: 100%;
  height: auto;
  padding: 20px 24px;
  object-fit: contain;
}

/* Atomic design — card tabs */
.atomic-demo { margin-top: 22px; }

.atomic-controls {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-top: 12px;
  padding: 0 0 4px;
  border-radius: 0;
  background: transparent;
  scrollbar-width: thin;
}

.atomic-controls::-webkit-scrollbar { height: 4px; }
.atomic-controls::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 2px; }

.atomic-controls button {
  display: flex;
  min-width: 112px;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--background);
  color: var(--muted);
  text-align: left;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease;
}

.atomic-controls button img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.atomic-controls button strong {
  color: var(--ink);
  font-size: 13px;
  font-weight: 650;
}

.atomic-controls button span { font-size: 11px; line-height: 1.35; }

.atomic-controls button[aria-selected="true"],
.atomic-controls button.is-active {
  border-color: var(--ink);
  background: var(--background);
  color: var(--muted);
  box-shadow: none;
}

.atomic-controls button[aria-selected="true"] strong,
.atomic-controls button.is-active strong { color: var(--ink); }

/* Icon standards placeholder */
.icon-card {
  overflow: hidden;
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #111112;
  color: #f5f5f5;
}

.icon-card-head {
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.icon-card-head span {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 10px;
  letter-spacing: 0.1em;
}

.icon-card-head strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  font-weight: 650;
}

.icon-grid-placeholder {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  padding: 1px;
}

.icon-grid-placeholder span {
  aspect-ratio: 1;
  background: rgba(255, 255, 255, 0.06);
}

/* Selection components */
.selection-configurator .selection-preview-stage,
.form-configurator .form-preview-stage,
.feedback-configurator .feedback-preview-stage {
  display: flex;
  min-width: 0;
  min-height: 420px;
  flex-direction: column;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: var(--background-subtle);
}

.selection-preview-canvas,
.form-preview-canvas,
.feedback-preview-canvas {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 36px 20px;
}

.selection-configurator {
  --selection-border-default: #dddce0;
  --selection-border-hover: #96949c;
  --radio-border-hover: #b6babf;
  --selection-brand-default: #6442c0;
  --selection-brand-hover: #4e3593;
  --selection-check-foreground: #ffffff;
  --selection-focus-ring: rgb(100 66 192 / 16%);
  --selection-disabled-border: #ececed;
  --selection-disabled-checked-border: #dddce0;
  --selection-disabled-surface: #f0f0f1;
  --selection-disabled-foreground: #96949c;
  --selection-preview-background: #fafafa;
  --switch-track-default: #dddce0;
  --switch-track-on: #0e0e0f;
  --switch-track-disabled: #ececed;
  --switch-thumb-default: #fafafa;
  --switch-thumb-on: #ffffff;
  --switch-thumb-disabled: rgb(255 255 255 / 60%);
  --switch-focus-gap: #f5f5f6;
  --switch-focus-ring: rgb(100 66 192 / 16%);
}

.selection-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  cursor: pointer;
  font-size: 14px;
  line-height: 20px;
  user-select: none;
}

.selection-row.is-checkbox,
.selection-row.is-radio {
  align-items: flex-start;
}

.selection-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 2px;
}

.selection-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.selection-row input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  opacity: 0;
  white-space: nowrap;
}

.selection-control {
  position: relative;
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 1.5px solid var(--selection-border-default);
  background: transparent;
  transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease, transform 120ms ease;
}

.selection-row input[type="checkbox"] + .selection-control { border-radius: 4px; }
.selection-row input[type="radio"] + .selection-control { border-radius: 50%; }

.selection-row input:checked + .selection-control {
  border-color: var(--selection-brand-default);
  background: var(--selection-brand-default);
}

.selection-check-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  display: none;
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  color: var(--selection-check-foreground);
  transform: translate(-50%, -50%);
}

.selection-row.is-checkbox input:checked + .selection-control .selection-check-icon {
  display: block;
}

.selection-row.is-radio input:checked + .selection-control::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 7px;
  height: 7px;
  border: 0;
  border-radius: 50%;
  background: var(--selection-check-foreground);
  transform: translate(-50%, -50%);
}

.selection-configurator[data-selection-state="hover"] .selection-control,
.selection-configurator[data-selection-state="default"] .selection-row:hover .selection-control {
  border-color: var(--selection-border-hover);
}

.selection-configurator[data-selection-state="hover"] .selection-row input:checked + .selection-control,
.selection-configurator[data-selection-state="default"] .selection-row:hover input:checked + .selection-control {
  border-color: var(--selection-brand-hover);
  background: var(--selection-brand-hover);
}

.selection-configurator[data-selection-state="hover"] .selection-row.is-toggle input:checked + .selection-control,
.selection-configurator[data-selection-state="default"] .selection-row.is-toggle:hover input:checked + .selection-control {
  border-color: transparent;
}

.selection-configurator[data-selection-state="focused"] .selection-control,
.selection-row input:focus-visible + .selection-control {
  box-shadow: 0 0 0 2px var(--selection-focus-ring);
}

.selection-configurator[data-selection-state="disabled"] .selection-row {
  color: var(--selection-disabled-foreground);
  cursor: not-allowed;
}


.selection-configurator[data-selection-state="disabled"] .selection-control {
  border-color: var(--selection-disabled-border);
  background: var(--selection-disabled-surface);
  box-shadow: none;
}

.selection-configurator[data-selection-state="disabled"] .selection-row input:checked + .selection-control {
  border-color: var(--selection-disabled-checked-border);
  background: var(--selection-disabled-surface);
}

.selection-configurator[data-selection-state="disabled"] .selection-row input:checked + .selection-control .selection-check-icon { color: var(--selection-disabled-foreground); }

.selection-configurator[data-selection-state="disabled"] .selection-row.is-radio input:checked + .selection-control::after {
  background: var(--selection-disabled-foreground);
}

.selection-configurator[data-selection-state="disabled"] .selection-row.is-toggle .selection-control::before {
  background: var(--selection-disabled-foreground);
  box-shadow: none;
}

/* Figma Radio: checked states use a 6px ring with a transparent center. */
.selection-configurator[data-selection-kind="radio"] .selection-row.is-radio input:checked + .selection-control {
  border-width: 6px;
  background: transparent;
}

.selection-configurator[data-selection-kind="radio"] .selection-row.is-radio input:checked + .selection-control::after {
  content: none;
}

.selection-configurator[data-selection-kind="radio"][data-selection-state="hover"] .selection-row.is-radio input:not(:checked) + .selection-control,
.selection-configurator[data-selection-kind="radio"][data-selection-state="default"] .selection-row.is-radio:hover input:not(:checked) + .selection-control {
  border-color: var(--radio-border-hover);
}

.selection-configurator[data-selection-kind="radio"][data-selection-state="focused"] .selection-row.is-radio input:not(:checked) + .selection-control,
.selection-configurator[data-selection-kind="radio"] .selection-row.is-radio input:not(:checked):focus-visible + .selection-control {
  border-width: 2.5px;
}

.selection-configurator[data-selection-kind="radio"][data-selection-state="disabled"] .selection-row.is-radio input:checked + .selection-control {
  border-color: var(--selection-disabled-border);
  background: var(--selection-disabled-surface);
}

.selection-configurator:not([data-selection-state="disabled"]) .selection-row:active .selection-control {
  transform: scale(0.96);
}

.selection-configurator[data-selection-mode="dark"] {
  --selection-border-default: #303030;
  --selection-border-hover: #474747;
  --selection-brand-default: #ffffff;
  --selection-brand-hover: #dedede;
  --selection-check-foreground: #111111;
  --selection-focus-ring: rgb(255 255 255 / 40%);
  --selection-disabled-border: #303030;
  --selection-disabled-checked-border: #303030;
  --selection-disabled-surface: #212121;
  --selection-disabled-foreground: #5c5c5c;
  --selection-preview-background: #1c1c1c;
  --switch-track-default: #313133;
  --switch-track-on: #6442c0;
  --switch-track-disabled: #242426;
  --switch-thumb-default: #fafafa;
  --switch-thumb-on: #ffffff;
  --switch-thumb-disabled: rgb(255 255 255 / 30%);
  --switch-focus-gap: #0e0e0f;
  --switch-focus-ring: rgb(255 255 255 / 40%);
}

/* Figma Switch: S 32×20, M 38×24, L 44×28. */
.selection-row.is-toggle {
  align-items: center;
  gap: 6px;
}

.selection-row.is-toggle .selection-label { font-weight: 500; line-height: 20px; }

.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle .selection-control {
  --switch-width: 32px;
  --switch-height: 20px;
  --switch-thumb-size: 12px;
  --switch-travel: 12px;
  width: var(--switch-width);
  height: var(--switch-height);
  flex: 0 0 var(--switch-width);
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.selection-configurator[data-selection-kind="toggle"][data-selection-size="m"] .selection-row.is-toggle .selection-control {
  --switch-width: 38px;
  --switch-height: 24px;
  --switch-thumb-size: 16px;
  --switch-travel: 14px;
}

.selection-configurator[data-selection-kind="toggle"][data-selection-size="l"] .selection-row.is-toggle .selection-control {
  --switch-width: 44px;
  --switch-height: 28px;
  --switch-thumb-size: 20px;
  --switch-travel: 16px;
}

.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle .selection-control::after,
.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle .selection-control::before {
  content: "";
  position: absolute;
  border-radius: 999px;
}

.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle .selection-control::after {
  inset: 2px;
  display: block;
  background: var(--switch-track-default);
  transition: background-color 140ms ease;
}

.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle .selection-control::before {
  z-index: 1;
  top: 4px;
  left: 4px;
  width: var(--switch-thumb-size);
  height: var(--switch-thumb-size);
  background: var(--switch-thumb-default);
  box-shadow: 0 2px 4px -2px rgb(17 12 34 / 12%);
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms ease;
}

.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle input:checked + .selection-control {
  border: 0;
  background: transparent;
}

.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle input:checked + .selection-control::after { background: var(--switch-track-on); }
.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle input:checked + .selection-control::before {
  background: var(--switch-thumb-on);
  transform: translateX(var(--switch-travel));
}

.selection-configurator[data-selection-kind="toggle"][data-selection-state="focused"] .selection-row.is-toggle .selection-control,
.selection-configurator[data-selection-kind="toggle"] .selection-row.is-toggle input:focus-visible + .selection-control {
  box-shadow: 0 0 0 1px var(--switch-focus-gap), 0 0 0 3px var(--switch-focus-ring);
}

.selection-configurator[data-selection-kind="toggle"][data-selection-state="disabled"] .selection-row.is-toggle .selection-control {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.selection-configurator[data-selection-kind="toggle"][data-selection-state="disabled"] .selection-row.is-toggle .selection-control::after { background: var(--switch-track-disabled); }
.selection-configurator[data-selection-kind="toggle"][data-selection-state="disabled"] .selection-row.is-toggle input:checked + .selection-control::after { background: var(--switch-track-disabled); }
.selection-configurator[data-selection-kind="toggle"][data-selection-state="disabled"] .selection-row.is-toggle .selection-control::before {
  background: var(--switch-thumb-disabled);
  box-shadow: 0 2px 4px -2px rgb(17 12 34 / 12%);
}
.selection-configurator[data-selection-kind="toggle"][data-selection-state="disabled"] .selection-row.is-toggle input:checked + .selection-control::before { background: var(--switch-thumb-disabled); }

.selection-configurator[data-selection-kind="checkbox"] .selection-row:not(.is-checkbox),
.selection-configurator[data-selection-kind="radio"] .selection-row:not(.is-radio),
.selection-configurator[data-selection-kind="toggle"] .selection-row:not(.is-toggle) {
  display: none;
}

/* Form components */
.form-configurator {
  --form-ink: #1d1c1f;
  --form-muted: #68676c;
  --form-quiet: #89878e;
  --form-disabled: #96949c;
  --form-input: #ececed;
  --form-input-active: #fafafa;
  --form-surface: #f0f0f1;
  --form-border: #dddce0;
  --form-active: #96949c;
  --form-brand: #6442c0;
  --form-brand-soft: #f1eefc;
  --form-focus: rgb(100 66 192 / 16%);
  --form-error: #ef3b2e;
}

.form-preview-canvas > [data-form-preview] {
  width: min(100%, 320px);
}

.form-preview-canvas > [data-form-preview="upload"] {
  width: min(100%, 546px);
}

.form-preview-canvas [hidden],
.design-system-page .form-scope .property-workbench__panel [hidden] {
  display: none !important;
}

.form-upload-component,
.form-textarea-component,
.form-select-component {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  color: var(--form-ink);
}

.form-upload-component {
  gap: 6px;
}

.form-field-heading {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  line-height: 20px;
}

.form-field-heading strong {
  font-size: 14px;
  font-weight: 500;
}

.form-field-heading span {
  color: var(--form-muted);
  font-size: 14px;
}

.form-upload-dropzone {
  position: relative;
  display: flex;
  width: 100%;
  height: 160px;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  border: 1px dashed var(--form-border);
  border-radius: 6px;
  background: var(--form-input);
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.form-upload-hit {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.form-upload-hit:focus-visible {
  outline: 2px solid var(--form-focus);
  outline-offset: -2px;
}

.form-upload-empty,
.form-upload-media {
  position: relative;
  z-index: 0;
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.form-upload-media {
  z-index: 2;
  pointer-events: none;
}

.form-upload-dropzone [data-upload-status] {
  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;
}

.form-upload-empty { gap: 16px; }

.form-upload-icon {
  display: grid;
  width: 40px;
  height: 40px;
  place-items: center;
  border-radius: 6px;
  background: var(--form-upload-icon-surface, rgb(0 0 0 / 5%));
}

.form-upload-icon img { width: 24px; height: 24px; }

.form-upload-instructions {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  text-align: center;
}

.form-upload-instructions strong {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
}

.form-upload-instructions span {
  color: var(--form-quiet);
  font-size: 14px;
  line-height: 20px;
}

.form-upload-copy-mobile { display: none; }

.form-upload-media { display: none; }

.form-upload-image-frame {
  position: relative;
  width: clamp(56px, var(--upload-preview-width, 63px), 498px);
  max-width: min(498px, calc(100% + 2px));
  height: 112px;
  flex: 0 0 auto;
}

.form-upload-image {
  display: block;
  width: 100%;
  height: 100%;
  border: 1px solid rgb(255 255 255 / 95%);
  border-radius: 8px;
  object-fit: cover;
}

.form-upload-remove {
  position: absolute;
  z-index: 3;
  top: -10px;
  right: -10px;
  display: grid;
  width: 20px;
  height: 20px;
  padding: 0;
  place-items: center;
  border: 1px solid var(--form-border);
  border-radius: 50%;
  background: #ffffff;
  cursor: pointer;
  pointer-events: auto;
}

.form-upload-remove::before {
  position: absolute;
  inset: -10px;
  content: "";
}

.form-upload-remove img { width: 12px; height: 12px; }

.form-upload-status-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  display: none;
  width: 24px;
  height: 24px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  transform: translate(-50%, -50%);
}

.form-upload-status-icon img { width: 18px; height: 18px; }
.form-upload-status-icon.is-loading { color: #ffffff; }
.form-upload-status-icon.is-loading .ds-loading-spinner { --loading-spinner-size: 24px; }

.form-upload-status-icon.is-error {
  width: 28px;
  height: 28px;
  background: var(--form-error);
  color: #ffffff;
  cursor: pointer;
  pointer-events: auto;
  transition: transform 120ms ease;
}

.form-upload-status-icon.is-error img { width: 18px; height: 18px; }

.form-upload-status-icon.is-error::before {
  position: absolute;
  inset: -6px;
  content: "";
}

.form-upload-status-icon.is-error:focus-visible {
  outline: 2px solid var(--form-focus);
  outline-offset: 2px;
}

.form-upload-status-icon.is-error:active {
  transform: translate(-50%, -50%) scale(0.96);
}

.form-configurator[data-form-kind="upload"][data-form-state="active"] .form-upload-dropzone {
  border-color: var(--form-brand);
  background: var(--form-brand-soft);
}

@media (hover: hover) and (pointer: fine) {
  .form-configurator[data-form-kind="upload"][data-form-state="default"] .form-upload-dropzone:has(.form-upload-hit:hover) {
    border-color: var(--form-brand);
    background: var(--form-brand-soft);
  }
}

.form-configurator[data-form-kind="upload"][data-form-state="loading"] .form-upload-empty,
.form-configurator[data-form-kind="upload"][data-form-state="uploaded"] .form-upload-empty,
.form-configurator[data-form-kind="upload"][data-form-state="error"] .form-upload-empty { display: none; }

.form-configurator[data-form-kind="upload"][data-form-state="error"][data-upload-has-preview="false"] .form-upload-empty {
  display: flex;
}

.form-configurator[data-form-kind="upload"][data-form-state="loading"] .form-upload-dropzone,
.form-configurator[data-form-kind="upload"][data-form-state="uploaded"] .form-upload-dropzone,
.form-configurator[data-form-kind="upload"][data-form-state="error"] .form-upload-dropzone { background: var(--form-surface); }

.form-configurator[data-form-kind="upload"][data-form-state="loading"] .form-upload-media,
.form-configurator[data-form-kind="upload"][data-form-state="uploaded"] .form-upload-media,
.form-configurator[data-form-kind="upload"][data-form-state="error"] .form-upload-media { display: flex; }

.form-configurator[data-form-kind="upload"][data-form-state="error"][data-upload-has-preview="false"] .form-upload-media {
  display: none;
}

.form-configurator[data-form-kind="upload"][data-form-state="loading"] .form-upload-status-icon.is-loading,
.form-configurator[data-form-kind="upload"][data-form-state="error"] .form-upload-status-icon.is-error { display: flex; }

.form-configurator[data-form-kind="upload"][data-form-state="loading"] .form-upload-image,
.form-configurator[data-form-kind="upload"][data-form-state="error"] .form-upload-image {
  border: 0;
}

.form-configurator[data-form-kind="upload"][data-form-state="loading"] .form-upload-image,
.form-configurator[data-form-kind="upload"][data-form-state="error"] .form-upload-image { filter: brightness(0.6); }

.form-textarea-shell {
  position: relative;
  display: flex;
  width: 100%;
  height: 220px;
  min-height: 120px;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
  overflow: hidden;
  resize: vertical;
  border: 0;
  border-radius: 6px;
  background: var(--form-input);
  transition: background-color 160ms ease, box-shadow 160ms ease;
}

.form-textarea-shell textarea {
  width: 100%;
  min-height: 0;
  flex: 1;
  padding: 0;
  resize: none;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--form-ink);
  font: 400 16px/24px var(--font);
}

.form-textarea-shell textarea::placeholder { color: var(--form-quiet); opacity: 1; }

.form-textarea-count {
  height: 16px;
  align-self: flex-end;
  color: var(--form-quiet);
  font-size: 12px;
  line-height: 16px;
}

.form-textarea-bottom {
  display: flex;
  width: 100%;
  height: 16px;
  flex: 0 0 16px;
  flex-direction: column;
}

.form-field-hint {
  width: 100%;
  margin: 0;
  color: var(--form-quiet);
  font-size: 14px;
  line-height: 20px;
}

.form-configurator[data-form-kind="textarea"][data-form-state="hover"] .form-textarea-shell { border-color: var(--form-border); }

.form-configurator[data-form-kind="textarea"][data-form-state="focus"] .form-textarea-shell {
  background: var(--form-input-active);
  box-shadow: 0 0 0 2px var(--form-focus), 0 0 4px rgb(0 0 0 / 12%);
}

.form-configurator[data-form-kind="textarea"][data-form-state="disabled"] .form-textarea-shell textarea,
.form-configurator[data-form-kind="textarea"][data-form-state="disabled"] .form-textarea-count { color: var(--form-disabled); }

.form-configurator[data-form-kind="textarea"][data-form-destructive="true"] .form-textarea-shell { border-color: var(--form-error); }
.form-configurator[data-form-kind="textarea"][data-form-destructive="true"][data-form-state="focus"] .form-textarea-shell { box-shadow: 0 0 0 2px var(--form-error); }
.form-configurator[data-form-kind="textarea"][data-form-destructive="true"] .form-field-hint { color: var(--form-error); }

.form-select-component { position: relative; }
.form-select-component .form-field-heading { gap: 6px; }
.form-select-control { position: relative; width: 100%; }

.form-select-trigger {
  display: flex;
  width: 100%;
  height: 40px;
  align-items: center;
  gap: 8px;
  padding: 12px;
  border: 0;
  border-radius: 6px;
  outline: 0;
  background: var(--form-input);
  color: var(--form-ink);
  font: 400 16px/24px var(--font);
  text-align: left;
  cursor: pointer;
}

.form-select-trigger[aria-expanded="true"],
.form-select-trigger:focus-visible {
  outline: 2px solid var(--form-focus);
  outline-offset: 2px;
  box-shadow: none;
}
.form-select-leading { width: 20px; height: 20px; flex: 0 0 20px; }
.form-select-value { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.form-configurator[data-form-kind="select"] .form-select-value:not([data-selected-value]) { color: var(--form-quiet); }
.form-select-extra { font-size: 12px; }
.form-select-tips { width: 18px; height: 18px; flex: 0 0 18px; }
.form-select-chevron {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.form-select-trigger[aria-expanded="true"] .form-select-chevron { transform: rotate(180deg); }

.form-select-menu {
  position: absolute;
  z-index: 5;
  top: calc(100% + 6px);
  left: 0;
  display: flex;
  width: 100%;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  background: #ffffff;
  box-shadow: 2px 6px 18px 0 rgb(0 0 0 / 12%);
}

.form-select-menu button {
  display: flex;
  width: 100%;
  min-height: 32px;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border: 0;
  border-radius: 6px;
  background: #ffffff;
  color: var(--form-ink);
  font: 400 16px/24px var(--font);
  text-align: left;
  cursor: pointer;
}

.form-select-menu button:hover { background: var(--form-surface); }

.form-select-option-check {
  display: none;
  width: 16px;
  height: 16px;
  margin-left: auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.form-select-menu button[aria-selected="true"] .form-select-option-check { display: block; }

:root[data-theme="dark"] .form-configurator {
  --form-ink: #f5f4f6;
  --form-muted: #aaa7b0;
  --form-quiet: #85838a;
  --form-disabled: #77747c;
  --form-input: #202022;
  --form-input-active: #29292b;
  --form-surface: #303034;
  --form-border: #47474c;
  --form-active: #85838a;
  --form-brand: #8066ca;
  --form-brand-soft: #2b2440;
  --form-focus: rgb(128 102 202 / 32%);
}

:root[data-theme="dark"] .form-upload-remove,
:root[data-theme="dark"] .form-select-menu,
:root[data-theme="dark"] .form-select-menu button {
  background: #202022;
  color: var(--form-ink);
}

:root[data-theme="dark"] .form-select-menu button:hover { background: var(--form-surface); }

:root[data-theme="dark"] .form-upload-icon img,
:root[data-theme="dark"] .form-upload-remove img,
:root[data-theme="dark"] .form-select-leading,
:root[data-theme="dark"] .form-select-tips,
:root[data-theme="dark"] .form-select-chevron,
:root[data-theme="dark"] .form-select-menu button img,
:root[data-theme="dark"] .form-textarea-resizer {
  filter: invert(1) brightness(1.65);
}

/* Feedback notifications */
.feedback-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #ffffff;
  color: #1d1c1f;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  font-size: 11px;
}

.feedback-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: var(--system-brand);
}

.feedback-toast button {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  margin-left: 6px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--quiet);
  font-size: 16px;
  line-height: 1;
}

.feedback-toast button:hover { color: var(--ink); }

.feedback-toast-card {
  box-sizing: border-box;
  display: flex;
  position: relative;
  width: 286px;
  min-width: 286px;
  max-width: 286px;
  height: 64px;
  align-items: flex-start;
  gap: 12px;
  overflow: hidden;
  padding: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.8);
  color: rgba(0, 0, 0, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  transition: opacity 160ms ease-in, transform 160ms ease-in;
}

.feedback-toast-card.is-entering {
  animation: feedback-notification-enter 220ms cubic-bezier(0.2, 0, 0, 1) both;
  will-change: transform, opacity;
}

@keyframes feedback-notification-enter {
  from {
    opacity: 0;
    transform: translateX(16px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.feedback-toast-card__leading {
  display: grid;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  place-items: center;
  border-radius: 50%;
  background: rgba(53, 127, 233, 0.16);
}

.feedback-toast-card[data-feedback-type="success"] .feedback-toast-card__leading { background: rgba(23, 169, 102, 0.16); }
.feedback-toast-card[data-feedback-type="warning"] .feedback-toast-card__leading { background: rgba(237, 153, 8, 0.16); }
.feedback-toast-card[data-feedback-type="error"] .feedback-toast-card__leading { background: rgba(239, 59, 46, 0.16); }
.feedback-toast-card[data-feedback-type="image"] .feedback-toast-card__leading,
.feedback-toast-card[data-feedback-type="loading"] .feedback-toast-card__leading {
  position: relative;
  display: block;
  width: 40px;
  height: 40px;
  flex-basis: 40px;
  overflow: hidden;
  border-radius: 4px;
  background: transparent;
}

.feedback-toast-card[data-feedback-type="loading"] .feedback-toast-card__leading {
  border-radius: 5px;
}

.feedback-toast-card[data-feedback-type="loading"] .feedback-toast-card__leading::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  content: "";
  pointer-events: none;
}

.feedback-toast-card__image {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: cover;
}

.feedback-toast-card__image[hidden] { display: none; }

.feedback-toast-card__status {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.feedback-toast-card__leading .feedback-loading-spinner { --loading-spinner-size: 18px; }

.feedback-toast-card[data-feedback-type="loading"] .feedback-loading-spinner {
  --loading-spinner-size: 20px;
  position: absolute;
  z-index: 2;
  top: 10px;
  left: 10px;
  color: #ffffff !important;
}

.feedback-toast-card[data-feedback-type="loading"] .feedback-loading-spinner svg {
  width: 20px;
  height: 20px;
}

.feedback-toast-card__copy {
  display: flex;
  min-width: 0;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}

.feedback-toast-card__copy strong {
  overflow: hidden;
  width: 100%;
  max-width: 186px;
  color: rgba(0, 0, 0, 0.95);
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-toast-card__copy span {
  overflow: hidden;
  width: 100%;
  color: rgba(0, 0, 0, 0.6);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.feedback-toast-card__close {
  display: grid;
  position: absolute;
  top: 11px;
  left: 253px;
  width: 20px;
  height: 20px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.13);
  color: #1d1c1f;
  cursor: pointer;
}

.feedback-toast-card__close svg {
  width: 12px;
  height: 12px;
  fill: currentColor;
}

.feedback-toast-card__close:hover { background: rgba(120, 120, 128, 0.2); }

.feedback-toast-card__close:focus-visible {
  outline: 2px solid rgba(100, 66, 192, 0.34);
  outline-offset: 2px;
}

.feedback-toast-card.is-dismissed {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

.feedback-notification {
  box-sizing: border-box;
  display: flex;
  width: 172px;
  height: 40px;
  min-height: 40px;
  flex: 0 0 40px;
  align-items: center;
  gap: 12px;
  padding: 0 12px;
  border: 0 solid transparent;
  border-radius: 999px;
  background: #ffffff;
  color: #1d1c1f;
  box-shadow: 2px 6px 18px rgba(0, 0, 0, 0.12);
  font-size: 14px;
  line-height: 20px;
  white-space: nowrap;
  transition: opacity 180ms ease, transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.feedback-notification.is-entering {
  animation: feedback-toast-enter 200ms cubic-bezier(0.2, 0, 0, 1) both;
  will-change: transform, opacity;
}

@keyframes feedback-toast-enter {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.feedback-notification-stack {
  box-sizing: border-box;
  display: flex;
  width: 299px;
  height: 380px;
  flex: 0 0 380px;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
}

.feedback-notification[data-feedback-type="success"],
.feedback-notification[data-feedback-type="warning"],
.feedback-notification[data-feedback-type="error"],
.feedback-notification[data-feedback-type="loading"] { width: 172px; }

.feedback-notification.is-dismissed {
  opacity: 0;
  transform: translateY(-4px) scale(0.98);
}

.feedback-notification__content,
.feedback-notification__action,
.feedback-notification__buttons {
  display: flex;
  align-items: center;
}

.feedback-notification__content {
  width: 148px;
  flex: 0 0 148px;
  gap: 6px;
}

.feedback-notification__content > span {
  width: 122px;
  flex: 0 0 122px;
}

.feedback-notification__status {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  object-fit: contain;
}

.feedback-notification__content > .feedback-loading-spinner {
  --loading-spinner-size: 20px;
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
}

.feedback-notification__action {
  width: 23px;
  gap: 6px;
  flex: 0 0 23px;
}

.feedback-notification[data-feedback-type="success"] .feedback-notification__action,
.feedback-notification[data-feedback-type="warning"] .feedback-notification__action,
.feedback-notification[data-feedback-type="error"] .feedback-notification__action,
.feedback-notification[data-feedback-type="loading"] .feedback-notification__action {
  width: 23px;
  flex-basis: 23px;
}

.feedback-notification__action > i {
  width: 1px;
  height: 12px;
  flex: 0 0 1px;
  background: rgba(0, 0, 0, 0.08);
}

.feedback-notification__buttons { gap: 4px; }

.feedback-notification__open,
.feedback-notification__close {
  display: grid;
  min-width: 0;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: #1d1c1f;
  font: inherit;
  cursor: pointer;
}

.feedback-notification__open {
  height: 24px;
  padding: 2px 6px;
  border-radius: 999px;
}

.feedback-notification[data-feedback-type="info"] .feedback-notification__open { padding-inline: 2px; }

.feedback-notification__close {
  width: 16px;
  height: 16px;
  border-radius: 4px;
}

.feedback-notification__close img {
  width: 16px;
  height: 16px;
}

.feedback-notification__open:hover,
.feedback-notification__close:hover { background: rgba(0, 0, 0, 0.06); }

.feedback-notification__open:focus-visible,
.feedback-notification__close:focus-visible {
  outline: 2px solid rgba(100, 66, 192, 0.34);
  outline-offset: 2px;
}

:root[data-theme="dark"] .feedback-notification {
  border-color: rgba(255, 255, 255, 0.08);
  background: #29292b;
  color: #f7f7f8;
  box-shadow: 2px 6px 18px rgba(0, 0, 0, 0.34);
}

:root[data-theme="dark"] .feedback-notification__action > i { background: rgba(255, 255, 255, 0.14); }
:root[data-theme="dark"] .feedback-notification__open { color: #f7f7f8; }
:root[data-theme="dark"] .feedback-notification__close img { filter: invert(1); }
:root[data-theme="dark"] .feedback-notification__open:hover,
:root[data-theme="dark"] .feedback-notification__close:hover { background: rgba(255, 255, 255, 0.1); }

/* Dialog */
.dialog-preview { margin-top: 22px; }

.dialog-preview-stage {
  display: flex;
  min-width: 0;
  min-height: 420px;
  flex-direction: column;
  padding: 22px;
  border-right: 1px solid var(--line);
  background: #141414;
}

.dialog-preview-canvas {
  display: grid;
  min-width: 0;
  flex: 1;
  place-items: center;
  padding: 36px 20px;
}

.dialog-card {
  width: min(100%, 280px);
  padding: 20px;
  border-radius: 10px;
  background: #ffffff;
  color: #1d1c1f;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

.dialog-card strong {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
}

.dialog-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.dialog-actions .configurable-button {
  min-height: 34px;
  padding: 0 14px;
  font-size: 12px;
}

.dialog-controls {
  min-width: 0;
  padding: 22px;
  background: var(--background);
}

/* More components — placeholder figures */
.component-specs figure.is-placeholder { background: var(--background-subtle); }

.component-spec-placeholder {
  display: grid;
  min-height: 0;
  flex: 1;
  place-items: center;
  padding: 16px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

/* Mobile */
@media (max-width: 760px) {
  .design-system-page .section { margin-top: 48px; padding-top: 48px; }

  .component-workbench,
  .dialog-preview { grid-template-columns: 1fr; }

  .component-tabs { padding: 0 16px; gap: 16px; overflow-x: auto; }
  .component-tabs button { font-size: 12px; }

  .token-output { padding: 18px 16px 8px; }
  .token-reference img { padding: 16px; }

  .atomic-controls button { min-width: 96px; padding: 12px; }

  .button-preview-stage,
  .input-preview-stage,
  .selection-configurator .selection-preview-stage,
  .form-configurator .form-preview-stage,
  .feedback-configurator .feedback-preview-stage,
  .dialog-preview-stage {
    min-height: 340px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .button-control-panel,
  .dialog-controls { padding: 18px; }

  .icon-grid-placeholder { grid-template-columns: repeat(4, 1fr); }

  .dialog-card { width: 100%; }
}

/* Figma aligned project page */
.case-eyebrow,
.system-summary {
  display: none !important;
}

.page.design-system-page {
  width: 700px;
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: 70px 0 102px;
}

.design-system-page .case-header {
  position: relative;
  gap: 0;
  padding: 0 0 50px;
  border-bottom: 0;
}

.design-system-page .case-header::after {
  content: "";
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  height: 1px;
  background: var(--line);
}

.design-system-page .case-title {
  margin: 0;
  padding: 0 8px;
  font-family: var(--font);
  font-size: 35px;
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1.4;
}

.design-system-page .case-subtitle {
  max-width: none;
  margin: 10px 0 0;
  padding: 0 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.design-system-page .system-hero {
  display: block;
  width: 700px;
  height: 393.75px;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.design-system-page .system-hero::after { display: none; }
.design-system-page .figma-hero-image { display: block; width: 100%; height: 100%; object-fit: cover; }

.design-system-page .section {
  position: relative;
  margin: 50px 0 0;
  padding: 50px 0 0;
  border-top: 0;
}

.design-system-page .section:not(:first-of-type)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 8px;
  left: 8px;
  height: 1px;
  background: var(--line);
}

.design-system-page .section:first-of-type {
  margin-top: 0;
  padding-top: 50px;
  border-top: 0;
}

.design-system-page .section-title {
  margin: 0;
  padding: 0 8px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.4;
}

.design-system-page .body-text { max-width: 700px; }

.design-system-page .section-desc,
.design-system-page .body-text {
  margin: 15px 0 0;
  padding: 0 8px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}

.design-system-page .body-text p { margin: 0; }
.design-system-page .body-text p + p { margin-top: 15px; }

/* Atomic design */
.design-system-page .section-head { align-items: flex-end; }
.design-system-page .atomic-demo { margin-top: 0; }
.design-system-page .atomic-stage { display: none; }
.design-system-page .atomic-controls {
  --gallery-edge: max(var(--page-padding), calc((100vw - var(--content)) / 2));
  position: relative;
  left: 50%;
  display: flex;
  align-items: stretch;
  width: 100vw;
  gap: 12px;
  margin: 24px 0 0 -50vw;
  padding: 0 var(--gallery-edge) 4px;
  overflow-x: auto;
  overflow-y: hidden;
  border-radius: 0;
  background: transparent;
  scroll-padding-inline: var(--gallery-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.design-system-page .atomic-controls::-webkit-scrollbar { display: none; }
.design-system-page .atomic-controls button {
  display: flex;
  width: 321px;
  min-width: 0;
  flex: 0 0 321px;
  height: auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 0;
  background: #e1e5e5;
  color: #696e6c;
  scroll-snap-align: start;
}
.design-system-page .atomic-controls button img {
  width: 54px;
  height: 54px;
  margin-bottom: 14px;
}
.design-system-page .atomic-controls button .atomic-icon-dark { display: none; }
.design-system-page .atomic-controls button strong {
  color: #202322;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  margin-bottom: 7px;
}
.design-system-page .atomic-controls button span {
  display: -webkit-box;
  overflow: hidden;
  color: #696e6c;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.45;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
}
.design-system-page .atomic-controls button.is-active,
.design-system-page .atomic-controls button[aria-selected="true"] {
  border-color: var(--line);
  background: #e1e5e5;
  box-shadow: none;
}

:root[data-theme="dark"] .design-system-page .atomic-controls button,
:root[data-theme="dark"] .design-system-page .atomic-controls button.is-active,
:root[data-theme="dark"] .design-system-page .atomic-controls button[aria-selected="true"] {
  border-color: transparent;
  background: #171818;
  box-shadow: none;
}

:root[data-theme="dark"] .design-system-page .atomic-controls button strong {
  color: #f2f2f2;
}

:root[data-theme="dark"] .design-system-page .atomic-controls button span {
  color: #8f9391;
}

:root[data-theme="dark"] .design-system-page .atomic-controls button .atomic-icon-light { display: none; }
:root[data-theme="dark"] .design-system-page .atomic-controls button .atomic-icon-dark { display: block; }

/* Color architecture */
.design-system-page #colors .token-demo { margin-top: 30px; }
.design-system-page .token-demo .component-tabs {
  height: 31px;
  padding: 0 8px;
  border-bottom: 0;
}
.design-system-page .token-workbench {
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.design-system-page .token-output {
  position: relative;
  min-height: 68px;
  padding: 15px 8px 0;
}
.design-system-page .token-panel header p,
.design-system-page .token-panel header h3 { display: none; }
.design-system-page .token-panel header > span {
  display: block;
  max-width: calc(100% - 100px);
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.design-system-page #colors .token-output > .gallery-controls {
  position: absolute;
  top: 12px;
  right: 0;
  margin: 0;
}
.design-system-page #colors .token-reference {
  margin-top: 15px;
  border: 0;
  background: transparent;
}
:root[data-theme="dark"] .design-system-page .token-reference {
  border: 0;
  background: transparent;
}
.design-system-page .token-reference img[hidden] { display: none; }
.design-system-page .design-system-gallery {
  --gallery-edge: max(var(--page-padding), calc((100vw - var(--content)) / 2));
  position: relative;
  left: 50%;
  display: flex;
  width: 100vw;
  min-height: 0;
  flex-direction: row;
  gap: 12px;
  margin: 24px 0 0 -50vw;
  padding: 0 var(--gallery-edge);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-padding-inline: var(--gallery-edge);
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.design-system-page .design-system-gallery::-webkit-scrollbar { display: none; }
.design-system-page #spacing-track,
.design-system-page #radius-track {
  flex-flow: row nowrap;
  align-items: stretch;
}
.design-system-page .design-system-gallery > .gallery-card {
  display: block;
  width: min(84vw, 600px);
  min-width: 0;
  height: auto;
  max-height: none;
  flex: 0 0 min(84vw, 600px);
  padding: 0;
  aspect-ratio: 1200 / 837;
  border: 0;
  background: transparent;
  object-fit: contain;
  scroll-snap-align: start;
}

/* Foundation image galleries */
.design-system-page .grid-overview-visual {
  display: block;
  width: 700px;
  height: 489px;
  margin: 30px 0 0;
  overflow: hidden;
  background: #111112;
}
.design-system-page .grid-overview-visual img { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-system-page .foundation-grid {
  display: grid;
  width: 700px;
  height: 418px;
  grid-template-columns: minmax(0, 3.2fr) minmax(0, 1fr);
  gap: 0;
  margin-top: 30px;
  padding: 34px 30px;
  overflow: hidden;
  background: #0b0b0c;
}
.design-system-page .foundation-grid .foundation-card {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.design-system-page .foundation-grid .foundation-card figcaption { display: none; }
.design-system-page .foundation-grid .foundation-card img {
  width: 100%;
  height: 350px;
  max-height: none;
  padding: 12px;
  object-fit: contain;
}
.design-system-page .typography-module { display: none; }
.design-system-page .figma-foundation-visual,
.design-system-page #spacing > .foundation-card,
.design-system-page #radius > .foundation-card {
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.design-system-page #spacing > .foundation-card figcaption,
.design-system-page #radius > .foundation-card figcaption { display: none; }

/* Shared component framing */
.design-system-page .component-demo,
.design-system-page .shadow-module,
.design-system-page .blur-module {
  margin-top: 30px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.design-system-page .component-tabs {
  position: relative;
  display: flex;
  height: 31px;
  gap: 20px;
  padding: 0 8px;
  overflow-x: auto;
  border: 0;
  border-bottom: 0;
  background: transparent;
  scrollbar-width: none;
}
.design-system-page .component-tabs::before {
  display: none;
  position: absolute;
  right: 8px;
  bottom: 0;
  left: 8px;
  z-index: 0;
  height: 1px;
  content: "";
  background: var(--border-default);
}
.design-system-page .component-tabs::-webkit-scrollbar { display: none; }
.design-system-page .component-tabs button {
  z-index: 1;
  min-width: max-content;
  padding: 0 0 10px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 400;
}
.design-system-page .component-tabs button[aria-selected="false"]:hover,
.design-system-page .component-tabs button[aria-selected="false"]:focus-visible {
  color: var(--ink);
}
.design-system-page .component-tabs button:focus-visible {
  outline: 0 !important;
  box-shadow: none !important;
}
.design-system-page .component-tabs button[aria-selected="false"]:focus-visible {
  box-shadow: inset 0 0 0 2px var(--site-focus-ring) !important;
}
.design-system-page .component-tabs button.is-active,
.design-system-page .component-tabs button[aria-selected="true"] {
  color: var(--ink);
  font-weight: 500;
}
.design-system-page .component-tabs button.is-active::after,
.design-system-page .component-tabs button[aria-selected="true"]::after { height: 1.5px; }

.design-system-page #input .input-family-tabs { margin-top: 30px; }

.design-system-page #input .component-demo[data-input-family-panel],
.design-system-page #input .input-family-panel .component-demo {
  margin-top: 15px;
}

.design-system-page #input [data-input-family-panel] .component-workbench { margin-top: 0; }
.design-system-page #input [data-input-family-panel][hidden] { display: none; }
.design-system-page #form.form-scope .form-configurator .component-workbench { margin-top: 0; }

.design-system-page .component-workbench {
  display: grid;
  width: 700px;
  grid-template-columns: 398px 300px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid #d8dddd;
  border-radius: 0;
  background: var(--background);
}
.design-system-page .button-preview-stage,
.design-system-page .input-preview-stage,
.design-system-page .selection-preview-stage,
.design-system-page .form-preview-stage,
.design-system-page .feedback-preview-stage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  padding: 21px 22px;
  border-right: 1px solid var(--line);
  background: #ffffff;
}
.design-system-page .button-preview-stage > span,
.design-system-page .button-preview-toolbar > span,
.design-system-page .input-preview-stage > span,
.design-system-page .selection-preview-stage > span,
.design-system-page .form-preview-stage > span,
.design-system-page .feedback-preview-stage > span {
  color: #969b99;
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0;
}
.design-system-page .button-control-panel {
  min-width: 0;
  padding: 9px 22px;
  background: var(--background);
}
.design-system-page .button-control-panel > header { display: none; }
.design-system-page .button-control-row {
  min-height: 51px;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 12px;
  color: var(--muted);
  font-size: 11px;
}
.design-system-page .button-control-row select {
  height: 36px;
  border-radius: 5px;
  background: var(--background-subtle);
}
.design-system-page .button-mode-switch {
  height: 36px;
  padding: 2px;
  border-radius: 5px;
}
.design-system-page .button-mode-switch button { min-height: 30px; border-radius: 4px; }
.design-system-page .property-switch { width: 38px; height: 22px; }
.design-system-page .button-preview-meta {
  gap: 10px;
  padding: 0;
  border: 0;
}
.design-system-page .input-preview-meta {
  gap: 10px;
  padding: 0;
  border: 0;
}

/* Button */
.design-system-page #button .component-workbench { height: 374px; }
.design-system-page #button .button-preview-stage {
  min-height: 372px;
  padding: 15px;
  border-right: 1px solid #d8dddd;
  background: #ffffff;
  transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1), color 300ms cubic-bezier(0.2, 0, 0, 1);
}
.design-system-page #button .button-control-panel {
  padding: 18px 30px;
  background: #f7f7f8;
}
.design-system-page #button .button-control-row {
  min-height: 48px;
  grid-template-columns: 108px 120px;
  gap: 12px;
  color: #6c706f;
  font-size: 13px;
}
.design-system-page #button .button-control-row select {
  height: 36px;
  border-color: #d8dddd;
  background: #eef0f0;
  color: #1d1c1f;
  font-size: 12px;
}
.design-system-page #button .property-switch {
  width: 38px;
  height: 22px;
  border-color: #d8dddd;
  background: #e5eaea;
}
.design-system-page #button .property-switch i {
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background: #ffffff;
}
.design-system-page #button .property-switch[aria-checked="true"] {
  border-color: #6538ea;
  background: #6538ea;
}
.design-system-page #button .property-switch[aria-checked="true"] i {
  background: #ffffff;
  transform: translateX(16px);
}
.design-system-page .button-preview-toolbar {
  display: flex;
  min-height: 26px;
  align-items: center;
  justify-content: space-between;
  color: #969b99;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 13px;
}
.design-system-page #button .button-mode-switch {
  width: 60px;
  height: 26px;
  flex: 0 0 60px;
  grid-template-columns: repeat(2, 28px);
  gap: 0;
  padding: 2px;
  border-radius: 999px;
  background: #eef0f0;
}
.design-system-page #button .button-mode-switch button {
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  place-items: center;
  border-radius: 999px;
  color: #6c706f;
}
.design-system-page #button .button-mode-switch button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.design-system-page #button .button-mode-switch button[aria-pressed="true"] {
  background: #ffffff;
  color: #1d1c1f;
}
.design-system-page .button-preview-canvas { min-height: 0; flex: 1; padding: 20px; }
.design-system-page .configurable-button {
  --button-icon-size: 24px;
  --button-radius: 8px;
  --button-padding-x: 20px;
  --button-font-size: 18px;
  --button-line-height: 28px;
  height: 56px;
  min-height: 0;
  gap: 6px;
  padding: 0 var(--button-padding-x);
  border-radius: var(--button-radius);
  font-weight: 500;
  font-size: var(--button-font-size);
  line-height: var(--button-line-height);
  box-shadow: none;
  backdrop-filter: var(--button-backdrop, none);
  -webkit-backdrop-filter: var(--button-backdrop, none);
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
:root .design-system-page .button-configurator .configurable-button {
  font-family: var(--component-system-font);
}
.design-system-page .button-preview-icon,
.design-system-page .button-icon-only {
  display: inline-flex;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  align-items: center;
  justify-content: center;
  flex: 0 0 var(--button-icon-size);
  font-size: var(--button-icon-size);
  font-weight: 400;
}
.design-system-page .button-preview-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.design-system-page .button-energy {
  display: inline-flex;
  height: 16px;
  align-items: flex-end;
  gap: 2px;
  margin-left: 0;
  padding-left: 6px;
  border-left: 0.5px solid color-mix(in srgb, currentColor 20%, transparent);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", var(--font);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  opacity: 1;
}
.design-system-page .button-energy img { display: block; width: 16px; height: 16px; flex: 0 0 16px; }
.design-system-page .button-configurator[data-button-size="2xl"] .configurable-button { --button-spinner-size: 24px; --button-icon-size: 24px; --button-padding-x: 20px; --button-radius: 8px; --button-font-size: 18px; --button-line-height: 28px; height: 56px; min-height: 56px; padding: 0 20px; font-size: 18px; line-height: 28px; }
.design-system-page .button-configurator[data-button-size="xl"] .configurable-button { --button-spinner-size: 20px; --button-icon-size: 20px; --button-padding-x: 18px; --button-radius: 6px; --button-font-size: 16px; --button-line-height: 24px; height: 48px; min-height: 48px; padding: 0 18px; font-size: 16px; line-height: 24px; }
.design-system-page .button-configurator[data-button-size="lg"] .configurable-button { --button-spinner-size: 20px; --button-icon-size: 20px; --button-padding-x: 16px; --button-radius: 6px; --button-font-size: 16px; --button-line-height: 24px; height: 44px; min-height: 44px; padding: 0 16px; font-size: 16px; line-height: 24px; }
.design-system-page .button-configurator[data-button-size="md"] .configurable-button { --button-spinner-size: 18px; --button-icon-size: 18px; --button-padding-x: 14px; --button-radius: 6px; --button-font-size: 14px; --button-line-height: 20px; height: 36px; min-height: 36px; padding: 0 14px; font-size: 14px; line-height: 20px; }
.design-system-page .button-configurator[data-button-size="sm"] .configurable-button { --button-spinner-size: 16px; --button-icon-size: 16px; --button-padding-x: 12px; --button-radius: 6px; --button-font-size: 14px; --button-line-height: 20px; height: 28px; min-height: 28px; padding: 0 12px; font-size: 14px; line-height: 20px; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="2xl"] .configurable-button { width: 56px; min-width: 56px; padding: 0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="xl"] .configurable-button { width: 48px; min-width: 48px; padding: 0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="lg"] .configurable-button { width: 44px; min-width: 44px; padding: 0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="md"] .configurable-button { width: 36px; min-width: 36px; padding: 0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="sm"] .configurable-button { width: 28px; min-width: 28px; padding: 0; }
.design-system-page .button-configurator[data-button-hierarchy="primary"] .configurable-button { --button-bg: #0e0e0f; --button-fg: #ffffff; --button-border: transparent; }
.design-system-page .button-configurator[data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #6442c0; --button-fg: #f7f5fd; --button-border: transparent; }
.design-system-page .button-configurator[data-button-hierarchy="secondary"] .configurable-button { --button-bg: #ffffff; --button-fg: #6442c0; --button-border: #a994e3; }
.design-system-page .button-configurator[data-button-hierarchy="tertiary"] .configurable-button { --button-bg: rgba(120, 120, 128, 0.13); --button-fg: #1d1c1f; --button-border: transparent; --button-backdrop: blur(12px); }
.design-system-page .button-configurator[data-button-hierarchy="ghost"] .configurable-button { --button-bg: #ffffff; --button-fg: #1d1c1f; --button-border: #dddce0; }
.design-system-page .button-configurator[data-button-hierarchy="static"] .configurable-button { --button-bg: #ffffff; --button-fg: #1d1c1f; --button-border: transparent; }
.design-system-page .button-configurator[data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.3); --button-fg: #ffffff; --button-border: rgba(255, 255, 255, 0.01); --button-backdrop: blur(20px); }
.design-system-page .button-configurator[data-button-hierarchy="error"] .configurable-button { --button-bg: #ef3b2e; --button-fg: #fffafa; --button-border: transparent; }
.design-system-page .button-configurator[data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #fff2f2; --button-fg: #d11e13; --button-border: #ef3b2e; }
.design-system-page .button-configurator[data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-hierarchy="plain-brand"] .configurable-button {
  box-sizing: border-box;
  min-width: 0;
  padding: 0 4px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--button-bg, transparent);
  box-shadow: none;
  font-weight: 400;
  transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.design-system-page .button-configurator[data-button-hierarchy="plain"][data-button-size="lg"] .configurable-button,
.design-system-page .button-configurator[data-button-hierarchy="plain-brand"][data-button-size="lg"] .configurable-button {
  height: 28px;
  min-height: 28px;
  font-size: 16px;
  line-height: 24px;
}
.design-system-page .button-configurator[data-button-hierarchy="plain"][data-button-size="md"] .configurable-button,
.design-system-page .button-configurator[data-button-hierarchy="plain-brand"][data-button-size="md"] .configurable-button {
  height: 24px;
  min-height: 24px;
  font-size: 14px;
  line-height: 20px;
}
.design-system-page .button-configurator[data-button-hierarchy="plain"][data-button-size="sm"] .configurable-button,
.design-system-page .button-configurator[data-button-hierarchy="plain-brand"][data-button-size="sm"] .configurable-button {
  height: 20px;
  min-height: 20px;
  font-size: 12px;
  line-height: 16px;
}
.design-system-page .button-configurator[data-button-hierarchy="plain"] .configurable-button { --button-bg: transparent; --button-fg: #1d1c1f; }
.design-system-page .button-configurator[data-button-hierarchy="plain-brand"] .configurable-button { --button-bg: transparent; --button-fg: #6442c0; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #242426; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #1d1c1f; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #5234a5; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #412783; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #f7f5fd; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #efeafa; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: rgba(120, 120, 128, 0.2); }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: rgba(120, 120, 128, 0.28); }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="ghost"] .configurable-button,
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="plain-brand"] .configurable-button { --button-bg: #f5f4f6; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="ghost"] .configurable-button,
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="plain-brand"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="static"] .configurable-button { --button-bg: #f5f4f6; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="static"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.4); }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.5); }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="error"] .configurable-button { --button-bg: #d92d20; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="error"] .configurable-button { --button-bg: #c5261c; }
.design-system-page .button-configurator[data-button-state="hover"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #ffe7e5; }
.design-system-page .button-configurator[data-button-state="press"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #ffd9d6; }
.design-system-page .button-configurator[data-button-state="hover"] .configurable-button { filter: none; transform: none; }
.design-system-page .button-configurator[data-button-state="press"] .configurable-button { filter: none; transform: scale(0.96); }
.design-system-page .button-configurator[data-button-state="focus"] .configurable-button { box-shadow: 0 0 0 2px rgba(100, 66, 192, 0.16); }
.design-system-page .button-configurator[data-button-state="focus"][data-button-hierarchy="error"] .configurable-button,
.design-system-page .button-configurator[data-button-state="focus"][data-button-hierarchy="error-secondary"] .configurable-button { box-shadow: 0 0 0 2px rgba(239, 59, 46, 0.2); }
.design-system-page .button-configurator[data-button-state="disabled"] .configurable-button,
.design-system-page .button-configurator[data-button-state="loading"] .configurable-button {
  --button-bg: #ececed;
  --button-fg: #96949c;
  --button-border: #ececed;
  filter: none;
  transform: none;
  opacity: 1;
}
.design-system-page .button-configurator[data-button-state="disabled"] .button-energy { opacity: 0.5; }
.design-system-page .button-configurator[data-button-state="loading"] .configurable-button { cursor: wait; }
.design-system-page .button-configurator[data-button-state="default"][data-button-hierarchy="plain"] .configurable-button:not(:disabled):hover,
.design-system-page .button-configurator[data-button-state="default"][data-button-hierarchy="plain-brand"] .configurable-button:not(:disabled):hover {
  --button-bg: #f5f4f6;
  filter: none;
}
.design-system-page .button-configurator[data-button-state="default"][data-button-hierarchy="opacity"] .configurable-button:not(:disabled):hover {
  --button-bg: rgba(0, 0, 0, 0.4);
  filter: none;
}
.design-system-page .button-configurator[data-button-state="default"][data-button-hierarchy="plain"] .configurable-button:not(:disabled):active,
.design-system-page .button-configurator[data-button-state="default"][data-button-hierarchy="plain-brand"] .configurable-button:not(:disabled):active {
  --button-bg: #ececed;
  filter: none;
  transform: scale(0.98);
}
.design-system-page .button-configurator[data-button-hierarchy="plain"] .configurable-button:focus-visible,
.design-system-page .button-configurator[data-button-hierarchy="plain-brand"] .configurable-button:focus-visible,
.design-system-page .button-configurator[data-button-state="focus"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-state="focus"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: transparent;
  --button-border: transparent;
  box-shadow: 0 0 0 2px #ded7f4;
}
.design-system-page .button-configurator[data-button-state="disabled"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-state="disabled"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: transparent;
  --button-fg: #96949c;
  --button-border: transparent;
}
.design-system-page .button-configurator[data-button-state="loading"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-state="loading"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: transparent;
  --button-border: transparent;
}
.design-system-page .button-configurator[data-button-state="loading"][data-button-hierarchy="plain"] .configurable-button {
  --button-fg: #6c706f;
}
.design-system-page .button-configurator[data-button-state="loading"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-fg: #d7ccf5;
}
.design-system-page .button-configurator[data-button-state="loading"] .button-preview-label,
.design-system-page .button-configurator[data-button-state="loading"] .button-preview-icon,
.design-system-page .button-configurator[data-button-state="loading"] .button-icon-only,
.design-system-page .button-configurator[data-button-state="loading"] .button-energy {
  visibility: hidden;
}
.design-system-page #button .button-configurator[data-button-mode="dark"] .button-preview-stage { background: #141414; }
.design-system-page #button .button-configurator[data-button-mode="dark"] .button-mode-switch { background: #303034; }
.design-system-page #button .button-configurator[data-button-mode="dark"] .button-mode-switch button { color: #aaa7b0; }
.design-system-page #button .button-configurator[data-button-mode="dark"] .button-mode-switch button[aria-pressed="true"] { background: #47474c; color: #ffffff; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #f5f4f6; --button-fg: #1d1c1f; --button-border: transparent; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #7354c7; --button-fg: #f5f4f6; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #292332; --button-fg: #c9bbf1; --button-border: #8066ca; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #363438; --button-fg: #f5f4f6; --button-border: transparent; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="ghost"] .configurable-button { --button-bg: #202022; --button-fg: #f5f4f6; --button-border: #4a474e; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="static"] .configurable-button { --button-bg: #ffffff; --button-fg: #1d1c1f; --button-border: transparent; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="static"] .configurable-button { --button-bg: #f5f4f6; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="static"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.3); --button-fg: #ffffff; --button-border: rgba(255, 255, 255, 0.01); }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="error"] .configurable-button { --button-bg: #f33a32; --button-fg: #fffafa; --button-border: transparent; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #321f20; --button-fg: #ff8b85; --button-border: #f33a32; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.4); }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.5); }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="plain"] .configurable-button { --button-fg: #f5f4f6; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="plain-brand"] .configurable-button { --button-fg: #b9a8e8; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #dddce0; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #8066ca; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #6442c0; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #332a40; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #3d3150; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #47444a; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #555158; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="ghost"] .configurable-button { --button-bg: #2a292c; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="ghost"] .configurable-button { --button-bg: #363438; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="plain"] .configurable-button { --button-bg: #202022; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="plain"] .configurable-button { --button-bg: #363438; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="plain-brand"] .configurable-button { --button-bg: #242426; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="plain-brand"] .configurable-button { --button-bg: #282331; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="error"] .configurable-button { --button-bg: #ff5149; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="error"] .configurable-button { --button-bg: #d92d26; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #412426; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="press"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #51292b; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="focus"][data-button-hierarchy="error"] .configurable-button,
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="focus"][data-button-hierarchy="error-secondary"] .configurable-button { box-shadow: 0 0 0 2px rgba(243, 58, 50, 0.28); }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="disabled"] .configurable-button,
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="loading"] .configurable-button { --button-bg: #363438; --button-fg: #8d8a91; --button-border: #363438; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="default"][data-button-hierarchy="plain"] .configurable-button:not(:disabled):hover { --button-bg: #202022; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="default"][data-button-hierarchy="plain-brand"] .configurable-button:not(:disabled):hover { --button-bg: #242426; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="default"][data-button-hierarchy="plain"] .configurable-button:not(:disabled):active { --button-bg: #363438; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="default"][data-button-hierarchy="plain-brand"] .configurable-button:not(:disabled):active { --button-bg: #282331; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="focus"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="focus"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: transparent;
  --button-border: transparent;
  box-shadow: 0 0 0 2px #5a477f;
}
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="focus"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: #282331;
}
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="disabled"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="disabled"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: transparent;
  --button-fg: #77747c;
  --button-border: transparent;
}
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="loading"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="loading"][data-button-hierarchy="plain-brand"] .configurable-button {
  --button-bg: transparent;
  --button-border: transparent;
}
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="loading"][data-button-hierarchy="plain"] .configurable-button { --button-fg: #aaa7b0; }
.design-system-page .button-configurator[data-button-mode="dark"][data-button-state="loading"][data-button-hierarchy="plain-brand"] .configurable-button { --button-fg: #8066ca; }
.design-system-page .button-configurator[data-button-hierarchy="opacity"][data-button-state="disabled"] .configurable-button,
.design-system-page .button-configurator[data-button-hierarchy="opacity"][data-button-state="loading"] .configurable-button {
  --button-bg: rgba(0, 0, 0, 0.3);
  --button-fg: rgba(255, 255, 255, 0.4);
  --button-border: rgba(255, 255, 255, 0.01);
}

/* Icon Button */
.design-system-page #button .button-control-row[hidden] { display: none !important; }
.design-system-page .button-configurator[data-button-kind="icon-button"] .configurable-button {
  --button-icon-size: 24px;
  --button-spinner-size: 24px;
  position: relative;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  gap: 0;
  overflow: visible;
  border-radius: 6px;
  transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}
.design-system-page .button-configurator[data-button-kind="icon-button"] .button-preview-label,
.design-system-page .button-configurator[data-button-kind="icon-button"] .button-preview-icon,
.design-system-page .button-configurator[data-button-kind="icon-button"] .button-energy { display: none !important; }
.design-system-page .button-configurator[data-button-kind="icon-button"] .button-icon-only {
  display: inline-flex;
  width: var(--button-icon-size);
  height: var(--button-icon-size);
  flex: 0 0 var(--button-icon-size);
  align-items: center;
  justify-content: center;
  padding: 0;
}
.design-system-page .button-configurator[data-button-kind="icon-button"] .button-icon-only[hidden] { display: none !important; }
.design-system-page .button-configurator[data-button-kind="icon-button"] .button-icon-only svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="xl"] .configurable-button {
  --button-icon-size: 24px;
  --button-spinner-size: 24px;
  width: 48px;
  min-width: 48px;
  height: 48px;
  min-height: 48px;
  padding: 0;
  border-radius: 6px;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="lg"] .configurable-button {
  --button-icon-size: 24px;
  --button-spinner-size: 24px;
  width: 44px;
  min-width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border-radius: 6px;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="md"] .configurable-button {
  --button-icon-size: 20px;
  --button-spinner-size: 20px;
  width: 36px;
  min-width: 36px;
  height: 36px;
  min-height: 36px;
  padding: 0;
  border-radius: 6px;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-size="sm"] .configurable-button {
  --button-icon-size: 16px;
  --button-spinner-size: 16px;
  width: 28px;
  min-width: 28px;
  height: 28px;
  min-height: 28px;
  padding: 0;
  border-radius: 6px;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #6442c0; --button-fg: #f7f5fd; --button-border: transparent; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #0e0e0f; --button-fg: #ffffff; --button-border: transparent; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #ffffff; --button-fg: #6442c0; --button-border: #a994e3; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: rgba(120, 120, 128, 0.13); --button-fg: #1d1c1f; --button-border: transparent; --button-backdrop: blur(12px); }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="ghost"] .configurable-button { --button-bg: transparent; --button-fg: #1d1c1f; --button-border: #dddce0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="plain"] .configurable-button { --button-bg: transparent; --button-fg: #1d1c1f; --button-border: transparent; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: transparent; --button-fg: #6442c0; --button-border: transparent; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="static"] .configurable-button { --button-bg: #ffffff; --button-fg: #1d1c1f; --button-border: transparent; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.3); --button-fg: #ffffff; --button-border: rgba(255, 255, 255, 0.01); --button-backdrop: blur(20px); }

.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #4e3593; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #3b2a6c; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #242426; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #353539; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #f7f5fd; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #efeafa; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: rgba(120, 120, 128, 0.2); }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: rgba(120, 120, 128, 0.28); }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="ghost"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: #f5f4f6; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="ghost"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="static"] .configurable-button { --button-bg: #f5f4f6; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="static"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.5); }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="error"] .configurable-button { --button-bg: #c5261c; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #ffd9d6; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"] .configurable-button { filter: none; transform: none; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="active"] .configurable-button { filter: none; transform: scale(0.96); }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="focus"] .configurable-button { box-shadow: 0 0 0 2px rgba(100, 66, 192, 0.18); }

.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #f5f4f6; --button-fg: #1d1c1f; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #7354c7; --button-fg: #f5f4f6; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #292332; --button-fg: #c9bbf1; --button-border: #8066ca; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #363438; --button-fg: #f5f4f6; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="ghost"] .configurable-button { --button-bg: transparent; --button-fg: #f5f4f6; --button-border: #4a474e; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="plain"] .configurable-button { --button-bg: transparent; --button-fg: #f5f4f6; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: transparent; --button-fg: #b9a8e8; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="static"] .configurable-button { --button-bg: #ffffff; --button-fg: #1d1c1f; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-hierarchy="opacity"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.3); --button-fg: #ffffff; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #ececed; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="primary"] .configurable-button { --button-bg: #dddce0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #8066ca; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="primary-brand"] .configurable-button { --button-bg: #6442c0; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #332a40; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="secondary"] .configurable-button { --button-bg: #3d3150; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #47444a; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="tertiary"] .configurable-button { --button-bg: #555158; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="ghost"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="plain"] .configurable-button { --button-bg: #202022; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="ghost"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="plain"] .configurable-button { --button-bg: #363438; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="hover"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: #292332; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: #3d3150; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="error"] .configurable-button { --button-bg: #d92d26; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="active"][data-button-hierarchy="error-secondary"] .configurable-button { --button-bg: #51292b; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"][data-button-hierarchy="opacity"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="default"][data-button-hierarchy="opacity"] .configurable-button:not(:disabled):hover {
  --button-bg: rgba(0, 0, 0, 0.4);
  filter: none;
}

.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="disabled"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="loading"] .configurable-button {
  --button-bg: #ececed;
  --button-fg: #96949c;
  --button-border: #ececed;
  filter: none;
  transform: none;
  opacity: 1;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="disabled"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-mode="dark"][data-button-state="loading"] .configurable-button { --button-bg: #363438; --button-fg: #8d8a91; --button-border: #363438; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="disabled"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="disabled"][data-button-hierarchy="plain-gray"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="loading"][data-button-hierarchy="plain"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="loading"][data-button-hierarchy="plain-gray"] .configurable-button { --button-bg: transparent; --button-border: transparent; }
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="opacity"][data-button-state="disabled"] .configurable-button,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-hierarchy="opacity"][data-button-state="loading"] .configurable-button { --button-bg: rgba(0, 0, 0, 0.3); --button-fg: rgba(255, 255, 255, 0.4); --button-border: rgba(255, 255, 255, 0.01); }

.design-system-page .button-configurator[data-button-kind="icon-button"] .configurable-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  z-index: 4;
  width: max-content;
  max-width: 200px;
  padding: 8px 12px;
  border-radius: 6px;
  background: #1f1f21;
  color: #f5f4f6;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 120ms ease, transform 120ms ease;
  white-space: nowrap;
}
.design-system-page .button-configurator[data-button-kind="icon-button"] .configurable-button::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 3px);
  z-index: 3;
  width: 0;
  height: 0;
  border-right: 5px solid transparent;
  border-top: 5px solid #1f1f21;
  border-left: 5px solid transparent;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 3px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"] .configurable-button::after,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="default"] .configurable-button:hover::after {
  opacity: 1;
  transform: translate(-50%, 0);
}
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="hover"] .configurable-button::before,
.design-system-page .button-configurator[data-button-kind="icon-button"][data-button-state="default"] .configurable-button:hover::before {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Keep the focus ring visually separate from every button and icon button. */
.design-system-page .button-configurator {
  --button-focus-outline: rgba(100, 66, 192, 0.28);
}
.design-system-page .button-configurator[data-button-hierarchy="error"],
.design-system-page .button-configurator[data-button-hierarchy="error-secondary"] {
  --button-focus-outline: rgba(239, 59, 46, 0.3);
}
.design-system-page .button-configurator[data-button-mode="dark"],
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="error"],
.design-system-page .button-configurator[data-button-mode="dark"][data-button-hierarchy="error-secondary"] {
  --button-focus-outline: rgb(255 255 255 / 40%);
}
.design-system-page .button-configurator[data-button-state="focus"] .configurable-button,
.design-system-page .button-configurator[data-button-focus-held="true"] .configurable-button,
.design-system-page .button-configurator .configurable-button:focus-visible {
  outline: 2px solid var(--button-focus-outline) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.design-system-page .button-configurator[data-button-state="focus"] .configurable-button:not(:disabled):active {
  filter: brightness(0.88);
  transform: scale(0.96);
}
.design-system-page .button-configurator .configurable-button:not(:disabled):active {
  transform: scale(0.98);
}

/* Input */
.design-system-page #input .component-workbench { height: 527px; margin-top: 0; }
.design-system-page #input .input-preview-stage {
  min-height: 525px;
  padding: 15px;
  border-right: 1px solid #d8dddd;
  background: #ffffff;
  transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1), color 300ms cubic-bezier(0.2, 0, 0, 1);
}
.design-system-page #input .input-preview-toolbar {
  color: #969b99;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 13px;
}
.design-system-page #input .button-mode-switch {
  width: 60px;
  height: 26px;
  flex: 0 0 60px;
  grid-template-columns: repeat(2, 28px);
  gap: 0;
  padding: 2px;
  border-radius: 999px;
  background: #eef0f0;
}
.design-system-page #input .button-mode-switch button {
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  place-items: center;
  border-radius: 999px;
  color: #6c706f;
}
.design-system-page #input .button-mode-switch button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.design-system-page #input .button-mode-switch button[aria-pressed="true"] {
  background: #ffffff;
  color: #1d1c1f;
}
.design-system-page #input .input-preview-canvas { min-height: 0; flex: 1; padding: 20px; }
.design-system-page #input .input-field-block { width: 100%; }
.design-system-page #input .input-shell { height: 40px; border-radius: 6px; }
.design-system-page #input .input-configurator {
  --input-focus-outline: rgba(100, 66, 192, 0.16);
}
.design-system-page #input .input-configurator[data-input-mode="dark"] {
  --input-focus-outline: rgb(255 255 255 / 40%);
}
.design-system-page #input .input-configurator[data-input-destructive="true"] {
  --input-focus-outline: #ef3b2e;
}
.design-system-page #input .input-configurator[data-input-mode="dark"][data-input-destructive="true"] {
  --input-focus-outline: #ef3b2e;
}
.design-system-page #input .input-shell:focus-within,
.design-system-page #input .input-configurator[data-input-state="focus"] .input-shell {
  border-color: var(--input-border-hover) !important;
  background: transparent !important;
  outline: 2px solid var(--input-focus-outline) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.design-system-page #input .input-configurator[data-input-destructive="true"] .input-shell,
.design-system-page #input .input-configurator[data-input-destructive="true"][data-input-state="focus"] .input-shell {
  border-color: var(--input-critical) !important;
}
.design-system-page #input .input-configurator[data-input-destructive="true"] .input-shell:focus-within,
.design-system-page #input .input-configurator[data-input-destructive="true"][data-input-state="focus"] .input-shell {
  outline: 2px solid var(--input-critical) !important;
  outline-offset: 2px !important;
  box-shadow: none !important;
}
.design-system-page #input .input-shell input:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}
.design-system-page #input .input-control-panel {
  padding: 18px 30px;
  background: #f7f7f8;
}
.design-system-page #input .button-control-row {
  min-height: 54px;
  grid-template-columns: 108px 120px;
  gap: 12px;
  color: #6c706f;
  font-size: 13px;
}
.design-system-page #input .button-control-row select {
  height: 36px;
  border-color: #d8dddd;
  border-radius: 5px;
  background: #eef0f0;
  color: #1d1c1f;
  font-size: 12px;
}
.design-system-page #input .property-switch {
  width: 38px;
  height: 22px;
  border-color: #d8dddd;
  background: #e5eaea;
}
.design-system-page #input .property-switch i {
  top: 1px;
  left: 1px;
  width: 18px;
  height: 18px;
  background: #ffffff;
}
.design-system-page #input .property-switch[aria-checked="true"] {
  border-color: #6538ea;
  background: #6538ea;
}
.design-system-page #input .property-switch[aria-checked="true"] i {
  background: #ffffff;
  transform: translateX(16px);
}
.design-system-page #input .input-configurator[data-input-mode="light"] .input-preview-stage { background: #fafafa; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .input-preview-stage { background: #0e0e0f; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .button-mode-switch { background: #303034; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .button-mode-switch button { color: #aaa7b0; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .button-mode-switch button[aria-pressed="true"] { background: #47474c; color: #ffffff; }
.design-system-page #input .input-configurator[data-input-mode="light"] .input-inline-select__menu,
.design-system-page #input .input-configurator[data-input-mode="light"] .input-inline-select__menu button {
  background: #ffffff;
  color: var(--input-text);
}
.design-system-page #input .input-configurator[data-input-mode="light"] .input-inline-select__menu button:hover { background: #f0f0f1; }
.design-system-page #input .input-configurator[data-input-mode="light"] .input-inline-select__menu button img { filter: none; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .input-inline-select__menu,
.design-system-page #input .input-configurator[data-input-mode="dark"] .input-inline-select__menu button {
  background: #1d1c1f;
  color: #f5f4f6;
}
.design-system-page #input .input-configurator[data-input-mode="dark"] .input-inline-select__menu button:hover { background: #303034; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .input-inline-select__menu button img { filter: invert(1) brightness(1.65); }

/* Selection and form */
.design-system-page #selection .component-workbench { height: 372px; }
.design-system-page .form-scope .component-workbench { height: 520px; }
.design-system-page .selection-configurator .selection-preview-stage { min-height: 370px; }
.design-system-page .form-configurator .form-preview-stage { min-height: 372px; }
.design-system-page .selection-preview-canvas,
.design-system-page .form-preview-canvas,
.design-system-page .feedback-preview-canvas { min-height: 0; flex: 1; padding: 24px 20px; }

/* Shadow */
.design-system-page .shadow-workbench {
  display: grid;
  width: 700px;
  height: 374px;
  grid-template-columns: 398px 300px;
  overflow: hidden;
  border: 1px solid var(--line);
}
.design-system-page .shadow-preview-stage {
  min-height: 372px;
  padding: 15px;
  border-right: 1px solid var(--line);
  background: #e1e5e5;
}
.design-system-page .shadow-preview-canvas { padding: 20px; }
.design-system-page .shadow-preview-card {
  width: 160px;
  aspect-ratio: 1;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: #fafafa;
}
.design-system-page .shadow-control-panel { padding: 64px 30px 24px; }
.design-system-page .shadow-control-row {
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  padding-bottom: 20px;
  font-size: 12px;
}
.design-system-page .shadow-control-row select {
  width: 100%;
  height: 36px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  line-height: 1.2;
  appearance: none;
  -webkit-appearance: none;
}
.design-system-page .shadow-select {
  position: relative;
  display: block;
  width: 150px;
  justify-self: end;
}
.design-system-page .shadow-select-chevron {
  position: absolute;
  top: 50%;
  right: 12px;
  width: 12px;
  height: 12px;
  pointer-events: none;
  transform: translateY(-50%) rotate(90deg);
  filter: invert(1);
}
:root[data-theme="dark"] .design-system-page .shadow-select-chevron {
  filter: none;
}
.design-system-page .shadow-parameters { margin-top: 14px; }
.design-system-page .shadow-parameters > div {
  grid-template-columns: 76px minmax(0, 1fr);
  min-height: 36px;
  gap: 10px;
}
.design-system-page .shadow-parameters dt { font-size: 13px; }
.design-system-page .shadow-parameters dd {
  overflow: visible;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 400;
  text-align: right;
  text-overflow: clip;
}
.design-system-page .shadow-module[data-shadow-mode="dark"] .shadow-preview-stage { background: #111111; }
.design-system-page .shadow-module[data-shadow-mode="dark"] .shadow-preview-card {
  background: #2b2b2b;
}
/* Blur */
.design-system-page .blur-module { border: 1px solid var(--line); }
.design-system-page .blur-module-head { display: none; }
.design-system-page .blur-module-head h3 { font-size: 20px; }
.design-system-page .blur-preview-stage { min-height: 362px; }
.design-system-page .blur-preview-panel {
  inset: 40px auto 40px 40px;
  width: 240px;
  min-width: 0;
  border-radius: 0;
}
.design-system-page .blur-options button { min-height: 55px; }

/* Icons */
.design-system-page .icon-card {
  display: block;
  width: 700px;
  height: 393px;
  margin: 30px 0 0;
  border: 0;
  border-radius: 0;
  background: #000000;
}
.design-system-page .icon-card-head { display: none; }
.design-system-page .icon-card > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.design-system-page .icon-library {
  --icon-column-width: 116.6667px;
  --icon-library-gap: 4px;
  --icon-library-bg: #000000;
  --icon-library-cell: rgba(255, 255, 255, 0.06);
  --icon-library-muted: rgba(245, 245, 245, 0.48);
  --icon-library-ink: #f5f5f5;
  position: relative;
  isolation: isolate;
  color: var(--icon-library-ink);
}
.design-system-page .icon-library-item:focus-visible {
  outline: 1.5px solid #8962f6;
  outline-offset: -2px;
}
.design-system-page .icon-library-viewport {
  box-sizing: border-box;
  overflow: hidden;
  width: 100%;
  height: 100%;
  padding-block: 4px;
  background: var(--icon-library-bg);
}
.design-system-page .icon-library-track {
  display: grid;
  width: 100%;
  height: 100%;
  grid-template-rows: repeat(3, 1fr);
  gap: var(--icon-library-gap);
}
.design-system-page .icon-library-row {
  position: relative;
  overflow: hidden;
  min-width: 0;
  min-height: 0;
}
.design-system-page .icon-library-row-track {
  display: flex;
  width: max-content;
  height: 100%;
  gap: var(--icon-library-gap);
  animation: icon-library-marquee 30s linear infinite;
  will-change: transform;
}
.design-system-page .icon-library-row:nth-child(2) .icon-library-row-track {
  animation-direction: reverse;
}
.design-system-page .icon-library.is-paused .icon-library-row-track,
.design-system-page .icon-library:focus-within .icon-library-row-track {
  animation-play-state: paused;
}
@keyframes icon-library-marquee {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(-50% - (var(--icon-library-gap) / 2)), 0, 0); }
}
.design-system-page .icon-library-item {
  --icon-item-bg: var(--icon-library-cell);
  position: relative;
  display: grid;
  flex: 0 0 var(--icon-column-width);
  min-width: 0;
  min-height: 0;
  padding: 0;
  place-items: center;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: var(--icon-item-bg);
  color: #ffffff;
  cursor: default;
  transition: background-color 220ms ease, color 220ms ease;
}
.design-system-page .icon-library-item.is-featured,
.design-system-page .icon-library-item.is-active-icon {
  background: #6538ea;
  color: #fff;
}
.design-system-page .icon-library.has-active-icon .icon-library-item.is-featured:not(.is-active-icon) {
  background: var(--icon-item-bg);
  color: #ffffff;
}
.design-system-page .icon-library-item > svg {
  position: relative;
  z-index: 2;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: translate3d(0, 0, 0) scale(1);
  transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), color 180ms ease;
}
.design-system-page .icon-library-item > span {
  position: absolute;
  z-index: 2;
  right: 7px;
  bottom: 8px;
  left: 7px;
  overflow: hidden;
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.2;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0;
  transform: translate3d(0, 5px, 0);
  transition: opacity 180ms ease, transform 260ms cubic-bezier(0.16, 1, 0.3, 1);
}
.design-system-page .icon-library-item.is-active-icon > svg {
  transform: translate3d(0, -8px, 0) scale(1.12);
}
.design-system-page .icon-library-item.is-active-icon > span {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.design-system-page .icon-grid-placeholder {
  grid-template-columns: repeat(6, 1fr);
  gap: 1px;
  padding: 1px;
}
.design-system-page .icon-grid-placeholder span {
  aspect-ratio: 1;
  background: #101011;
  border: 1px solid rgba(255, 255, 255, 0.035);
}

/* Dialog and feedback */
.design-system-page .dialog-preview {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 30px;
  border: 1px solid var(--line);
}
.design-system-page .dialog-preview-stage {
  min-height: 393px;
  padding: 22px;
  border: 0;
  background: #29292b;
}
.design-system-page .dialog-card { border-radius: 6px; }
.design-system-page .dialog-controls {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  padding: 15px 22px;
  border-top: 1px solid var(--line);
}
.design-system-page #feedback .component-workbench {
  grid-template-columns: 1fr;
  margin-top: 0;
}
.design-system-page #feedback .feedback-preview-stage {
  min-height: 393px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}
.design-system-page #selection .selection-preview-stage,
.design-system-page .form-scope .form-preview-stage,
.design-system-page #feedback .feedback-preview-stage {
  background: var(--background);
}
:root[data-theme="dark"] .design-system-page #selection .selection-preview-stage,
:root[data-theme="dark"] .design-system-page .form-scope .form-preview-stage,
:root[data-theme="dark"] .design-system-page #feedback .feedback-preview-stage {
  background: #141414;
}
.design-system-page #feedback .button-control-panel { min-height: 68px; }

/* Shared property workbench: preview, property panel, controls, and mode switch. */
.design-system-page .property-workbench {
  display: grid;
  width: 700px;
  height: 374px;
  grid-template-columns: 398px 300px;
  margin-top: 15px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--background);
}
.design-system-page #input .property-workbench--tall { height: 527px; margin-top: 30px; }
.design-system-page #selection .property-workbench { height: 372px; }
.design-system-page #feedback .property-workbench {
  height: 374px;
  grid-template-columns: 398px 300px;
  margin-top: 15px;
}
.design-system-page #selection .property-workbench__panel {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding: 20px 30px;
  background: var(--background-default);
}
.design-system-page #selection .property-workbench__panel .button-control-row {
  grid-template-columns: 110px 120px;
  gap: 10px;
}
.design-system-page #selection .property-workbench > .property-workbench__preview { min-height: 370px; }
.design-system-page #selection .selection-preview-toolbar {
  color: #969b99;
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 13px;
}
.design-system-page #selection .selection-configurator[data-selection-mode="light"] .property-workbench__preview {
  background: #fafafa;
}
.design-system-page #selection .selection-configurator[data-selection-mode="light"] .selection-row {
  color: #1d1c1f;
}
.design-system-page #selection .selection-configurator[data-selection-mode="dark"] .property-workbench__preview {
  background: #0e0e0f;
}
.design-system-page #selection .selection-configurator[data-selection-mode="dark"] .selection-row { color: #ffffff; }
.design-system-page #selection .selection-configurator[data-selection-kind="toggle"][data-selection-mode="dark"]:not([data-selection-state="disabled"]) .selection-row {
  color: #f5f5f6;
}
.design-system-page #selection .selection-configurator[data-selection-state="disabled"] .selection-row {
  color: var(--selection-disabled-foreground);
}
.design-system-page #selection .property-text-input {
  box-sizing: border-box;
  width: 120px;
  height: 36px;
  padding: 0 10px;
  border: 0;
  border-radius: 5px;
  outline: 0;
  background: var(--background-subtle);
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  transition: box-shadow 160ms ease, background-color 160ms ease, opacity 160ms ease;
}
.design-system-page #selection .property-text-input:hover:not(:disabled) { background: var(--background-subtle); }
.design-system-page #selection .property-text-input:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--system-brand) 18%, transparent);
}
.design-system-page #selection .property-text-input:disabled {
  cursor: not-allowed;
  opacity: 0.42;
}
.design-system-page #selection .button-control-row[hidden] { display: none; }
:root[data-theme="dark"] .design-system-page #selection .property-workbench__panel {
  background: var(--background-default);
}
.design-system-page .property-workbench > .property-workbench__preview,
.design-system-page #button .property-workbench > .property-workbench__preview,
.design-system-page #input .property-workbench > .property-workbench__preview,
.design-system-page #feedback .property-workbench > .property-workbench__preview {
  min-height: 372px;
  padding: 15px;
  border-right: 1px solid var(--line);
  border-bottom: 0;
  background: #ffffff;
  transition: background-color 300ms cubic-bezier(0.2, 0, 0, 1), color 300ms cubic-bezier(0.2, 0, 0, 1);
}
.design-system-page #input .property-workbench > .property-workbench__preview { min-height: 525px; }
.design-system-page #selection .property-workbench > .property-workbench__preview { min-height: 370px; }
.design-system-page .property-workbench > .property-workbench__panel,
.design-system-page #button .property-workbench > .property-workbench__panel,
.design-system-page #input .property-workbench > .property-workbench__panel,
.design-system-page #feedback .property-workbench > .property-workbench__panel {
  min-width: 0;
  min-height: 0;
  padding: 64px 30px 24px;
  background: var(--background);
}
.design-system-page .property-workbench--compact > .property-workbench__panel,
.design-system-page #button .property-workbench--compact > .property-workbench__panel,
.design-system-page #input .property-workbench--compact > .property-workbench__panel {
  padding: 18px 30px;
}
.design-system-page .property-workbench__panel .button-control-row,
.design-system-page #button .property-workbench__panel .button-control-row,
.design-system-page #input .property-workbench__panel .button-control-row {
  min-height: 51px;
  grid-template-columns: 76px minmax(0, 1fr);
  gap: 10px;
  color: var(--muted);
  font-size: 13px;
}
.design-system-page .property-workbench--compact .button-control-row,
.design-system-page #button .property-workbench--compact .button-control-row,
.design-system-page #input .property-workbench--compact .button-control-row { min-height: 48px; }
.design-system-page .property-workbench__panel .button-control-row select,
.design-system-page #button .property-workbench__panel .button-control-row select,
.design-system-page #input .property-workbench__panel .button-control-row select {
  width: 100%;
  height: 36px;
  padding: 0 30px 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  outline: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 400;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.design-system-page .property-workbench__panel .button-control-row select:hover { border-color: color-mix(in srgb, var(--line-strong) 72%, var(--ink)); }
.design-system-page .property-workbench__panel .button-control-row select:focus-visible {
  border-color: var(--system-brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--system-brand) 18%, transparent);
}
.design-system-page .property-workbench__panel .property-switch,
.design-system-page #button .property-workbench__panel .property-switch,
.design-system-page #input .property-workbench__panel .property-switch {
  border-color: var(--line-strong);
  background: var(--background-subtle);
}
.design-system-page .property-workbench__panel .property-switch[aria-checked="true"],
.design-system-page #button .property-workbench__panel .property-switch[aria-checked="true"],
.design-system-page #input .property-workbench__panel .property-switch[aria-checked="true"] {
  border-color: var(--system-brand);
  background: var(--system-brand);
}
.design-system-page .property-workbench__panel .property-switch:active:not(:disabled) { transform: scale(0.96); }

.design-system-page .property-mode-switch {
  --navigation-control-bg: rgb(2 48 48 / 8%);
  --navigation-control-fg: #696e6c;
  --navigation-control-hover: rgb(0 0 0 / 4%);
  --navigation-control-hover-fg: #151716;
  --navigation-control-selected: #ffffff;
  --navigation-control-selected-fg: #151716;
  box-sizing: border-box;
  position: relative;
  display: grid;
  width: 60px;
  height: 26px;
  flex: 0 0 60px;
  grid-template-columns: repeat(2, 28px);
  gap: 0;
  padding: 2px;
  border-radius: 16px;
  background: var(--navigation-control-bg);
}
.design-system-page .property-mode-switch.tabbar-control::before {
  position: absolute;
  z-index: 0;
  top: 2px;
  left: 0;
  width: var(--tabbar-slider-width, 22px);
  height: 22px;
  border-radius: 50%;
  background: var(--navigation-control-selected);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  content: "";
  pointer-events: none;
  transform: translateX(var(--tabbar-slider-x, 4px));
  transition: transform 240ms cubic-bezier(0.2, 0, 0, 1), width 240ms cubic-bezier(0.2, 0, 0, 1);
}
.design-system-page .property-mode-switch button,
.design-system-page #button .property-mode-switch button,
.design-system-page #input .property-mode-switch button {
  box-sizing: border-box;
  position: relative;
  z-index: 1;
  display: grid;
  width: 22px;
  height: 22px;
  min-height: 22px;
  padding: 0;
  justify-self: center;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--navigation-control-fg);
  box-shadow: none;
  transition: background-color 160ms ease, color 160ms ease, transform 120ms ease;
}
.design-system-page .property-mode-switch button svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
}
.design-system-page .property-mode-switch button[aria-pressed="true"],
.design-system-page #button .property-mode-switch button[aria-pressed="true"],
.design-system-page #input .property-mode-switch button[aria-pressed="true"] {
  background: transparent;
  color: var(--navigation-control-selected-fg);
  box-shadow: none;
}
.design-system-page .property-mode-switch button[aria-pressed="false"]:hover,
.design-system-page .property-mode-switch button[aria-pressed="false"]:focus-visible {
  background: var(--navigation-control-hover);
  color: var(--navigation-control-hover-fg);
}
.design-system-page .property-mode-switch button:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--system-brand) 48%, transparent);
  outline-offset: 2px;
}
.design-system-page .property-mode-switch button:active { transform: scale(0.96); }
.design-system-page .button-configurator[data-button-mode="dark"] .property-mode-switch,
.design-system-page .input-configurator[data-input-mode="dark"] .property-mode-switch,
.design-system-page .selection-configurator[data-selection-mode="dark"] .property-mode-switch,
.design-system-page .shadow-module[data-shadow-mode="dark"] .property-mode-switch,
.design-system-page .form-configurator[data-form-mode="dark"] .property-mode-switch,
.design-system-page .dialog-preview[data-dialog-mode="dark"] .property-mode-switch,
.design-system-page .feedback-configurator[data-feedback-mode="dark"] .property-mode-switch {
  --navigation-control-bg: rgb(255 255 255 / 10%);
  --navigation-control-fg: #aeb0af;
  --navigation-control-hover: rgb(255 255 255 / 6%);
  --navigation-control-hover-fg: #ffffff;
  --navigation-control-selected: #ffffff;
  --navigation-control-selected-fg: #151716;
}

.design-system-page .dialog-preview .dialog-preview-toolbar .property-mode-switch {
  --navigation-control-bg: rgb(255 255 255 / 10%);
  --navigation-control-fg: #aeb0af;
  --navigation-control-hover: rgb(255 255 255 / 6%);
  --navigation-control-hover-fg: #ffffff;
  --navigation-control-selected: #ffffff;
  --navigation-control-selected-fg: #151716;
}
.design-system-page #button .button-configurator[data-button-mode="dark"] .property-workbench__preview { background: #141414; }
.design-system-page #input .input-configurator[data-input-mode="light"] .property-workbench__preview { background: #fafafa; }
.design-system-page #input .input-configurator[data-input-mode="dark"] .property-workbench__preview { background: #0e0e0f; }
.design-system-page #button .button-configurator[data-button-hierarchy="static"] .button-preview-stage,
.design-system-page #button .button-configurator[data-button-hierarchy="opacity"] .button-preview-stage {
  background-color: #eef0ec;
  background-image: url("./assets/projects/design-system/button-preview-plant.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.design-system-page #button .button-configurator[data-button-mode="dark"][data-button-hierarchy="static"] .button-preview-stage,
.design-system-page #button .button-configurator[data-button-mode="dark"][data-button-hierarchy="opacity"] .button-preview-stage {
  background-image:
    linear-gradient(rgb(0 0 0 / 20%), rgb(0 0 0 / 20%)),
    url("./assets/projects/design-system/button-preview-plant.webp");
}
.design-system-page .shadow-module .property-workbench__preview { background: #e1e5e5; }
.design-system-page .shadow-module[data-shadow-mode="dark"] .property-workbench__preview { background: #111111; }

/* More components */
.design-system-page .more-components-media {
  width: 700px;
  margin: 30px 0 0;
  background: transparent;
}
.design-system-page .more-components-media > img {
  display: block;
  width: 100%;
  height: auto;
  padding: 0;
  object-fit: contain;
}

@media (max-width: 760px) {
  .page.design-system-page { max-width: calc(100% - 40px); padding-top: 20px; }
  .design-system-page .case-title { font-size: 30px; }
  .design-system-page .system-hero,
  .design-system-page .grid-overview-visual,
  .design-system-page .icon-card,
  .design-system-page .foundation-grid,
  .design-system-page .component-workbench,
  .design-system-page .shadow-workbench,
  .design-system-page .more-components-media { width: 100%; }
  .design-system-page .system-hero { height: auto; aspect-ratio: 16 / 9; }
  .design-system-page .grid-overview-visual { height: auto; aspect-ratio: 700 / 489; }
  .design-system-page .icon-card { height: auto; aspect-ratio: 5 / 3; }
  .design-system-page .icon-library-item > svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.25;
  }
  .design-system-page .icon-library-item > span { font-size: 8px; }
  .design-system-page .section { margin-top: 42px; padding-top: 42px; }
  .design-system-page .section:first-of-type { padding-top: 42px; }
  .design-system-page .atomic-controls button { width: 78vw; flex-basis: 78vw; }
  .design-system-page .foundation-grid { height: 330px; padding: 20px 12px; }
  .design-system-page .foundation-grid .foundation-card img { height: 288px; padding: 6px; }
  .design-system-page .component-workbench,
  .design-system-page .shadow-workbench { height: auto !important; grid-template-columns: 1fr; }
  .design-system-page .property-workbench,
  .design-system-page #feedback .property-workbench {
    height: auto !important;
    grid-template-columns: 1fr;
  }
  .design-system-page .button-preview-stage,
  .design-system-page .input-preview-stage,
  .design-system-page .selection-preview-stage,
  .design-system-page .form-preview-stage,
  .design-system-page .feedback-preview-stage,
  .design-system-page .shadow-preview-stage { min-height: 330px !important; border-right: 0; border-bottom: 1px solid var(--line); }
  .design-system-page .property-workbench > .property-workbench__preview,
  .design-system-page #button .property-workbench > .property-workbench__preview,
  .design-system-page #input .property-workbench > .property-workbench__preview,
  .design-system-page #feedback .property-workbench > .property-workbench__preview {
    min-height: 330px !important;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .design-system-page .button-control-panel { padding: 14px 18px; }
  .design-system-page .shadow-control-panel { padding: 30px 22px; }
  .design-system-page .property-workbench > .property-workbench__panel,
  .design-system-page #button .property-workbench > .property-workbench__panel,
  .design-system-page #input .property-workbench > .property-workbench__panel,
  .design-system-page #feedback .property-workbench > .property-workbench__panel { padding: 22px; }
  .design-system-page .button-control-row { grid-template-columns: minmax(104px, 0.9fr) minmax(0, 1.1fr); }
  .design-system-page .dialog-controls { grid-template-columns: 1fr; }
  .design-system-page .icon-grid-placeholder { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .design-system-page .icon-library-row-track { animation: none; }
  .design-system-page .icon-library-item > svg,
  .design-system-page .icon-library-item > span,
  .design-system-page .property-workbench__preview,
  .design-system-page .property-mode-switch.tabbar-control::before,
  .design-system-page .property-mode-switch button,
  .design-system-page .property-switch,
  .design-system-page .property-switch i { transition-duration: 0.01ms; }
  .ds-loading-spinner { animation: none; }
  .feedback-notification,
  .feedback-toast-card { transition-duration: 0.01ms; }
  .feedback-notification.is-entering,
  .feedback-toast-card.is-entering { animation-duration: 0.01ms; }
}

.design-system-page .icon-library.is-motion-reduced .icon-library-row-track { animation: none; }

/* Shared Dropdown — mirrors the portfolio Figma component */
.design-system-page .ds-dropdown {
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;
  color: var(--ink);
  font-family: var(--font);
}

.design-system-page .ds-dropdown__native {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.design-system-page .ds-dropdown__trigger {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 36px;
  margin: 0;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  outline: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease, color 160ms ease;
}

.design-system-page .ds-dropdown:not(.is-open) .ds-dropdown__trigger:hover {
  border-color: #c8cccc;
}

.design-system-page .ds-dropdown__trigger:focus-visible,
.design-system-page .ds-dropdown.is-open .ds-dropdown__trigger {
  outline: 2px solid var(--site-focus-ring);
  outline-offset: 2px;
  box-shadow: none;
}

.design-system-page .ds-dropdown__trigger:disabled {
  color: var(--muted-soft);
  cursor: not-allowed;
  opacity: 0.55;
}

.design-system-page .ds-dropdown__value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-system-page .ds-dropdown__chevron,
.design-system-page .ds-dropdown__chevron svg {
  display: block;
  width: 16px;
  height: 16px;
}

.design-system-page .ds-dropdown__chevron svg,
.design-system-dropdown-menu svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.design-system-page .ds-dropdown__chevron {
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1);
}

.design-system-page .ds-dropdown.is-open .ds-dropdown__chevron { transform: rotate(180deg); }

.design-system-dropdown-menu {
  box-sizing: border-box;
  position: fixed;
  z-index: 10000;
  display: grid;
  gap: 0;
  width: max-content;
  min-width: 0;
  max-width: calc(100vw - 16px);
  padding: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  border: 0;
  border-radius: 5px;
  background: rgb(255 255 255 / 94%);
  color: #171918;
  box-shadow:
    0 2px 4px rgb(0 0 0 / 6%),
    0 -6px 6px rgb(0 0 0 / 3%),
    0 14px 14px rgb(0 0 0 / 8%),
    inset 0 0 0 1px rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  overscroll-behavior: contain;
  animation: design-system-dropdown-in 160ms cubic-bezier(0.2, 0, 0, 1) both;
  scrollbar-color: var(--border-default) transparent;
}

.design-system-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
}

.design-system-dropdown-menu.is-above { transform-origin: bottom center; }

.design-system-dropdown-option {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 36px;
  margin: 0;
  padding: 6px 8px;
  border: 0;
  border-radius: 2px;
  outline: 0;
  background: transparent;
  color: inherit;
  font-family: "Manrope", var(--font, sans-serif);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
  text-align: left;
  white-space: nowrap;
  cursor: pointer;
}

.design-system-dropdown-option__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-system-dropdown-option:hover,
.design-system-dropdown-option:focus-visible {
  border-radius: 3px;
  background: rgb(2 48 48 / 6%);
}

.design-system-dropdown-option:disabled {
  color: rgb(23 25 24 / 34%);
  cursor: not-allowed;
}

.design-system-dropdown-option__check,
.design-system-dropdown-option__check svg {
  display: block;
  width: 16px;
  height: 16px;
}

:root[data-theme="dark"] .design-system-dropdown-menu {
  background: rgb(21 21 21 / 94%);
  color: #f5f5f5;
  box-shadow:
    0 2px 4px rgb(0 0 0 / 18%),
    0 -6px 6px rgb(0 0 0 / 12%),
    0 14px 14px rgb(0 0 0 / 28%),
    inset 0 0 0 1px rgb(255 255 255 / 10%);
  scrollbar-color: var(--border-default) transparent;
}

:root[data-theme="dark"] .design-system-dropdown-menu::-webkit-scrollbar-thumb {
  background-color: var(--border-default);
}

:root[data-theme="dark"] .design-system-page .ds-dropdown:not(.is-open) .ds-dropdown__trigger:hover {
  border-color: #343636;
}

:root[data-theme="dark"] .design-system-dropdown-option:hover,
:root[data-theme="dark"] .design-system-dropdown-option:focus-visible { background: rgb(255 255 255 / 7%); }
:root[data-theme="dark"] .design-system-dropdown-option:disabled { color: rgb(255 255 255 / 34%); }

@keyframes design-system-dropdown-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.design-system-dropdown-menu.is-above {
  animation-name: design-system-dropdown-in-above;
}

@keyframes design-system-dropdown-in-above {
  from { opacity: 0; transform: translateY(4px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .design-system-page .ds-dropdown__trigger,
  .design-system-page .ds-dropdown__chevron,
  .design-system-dropdown-menu { animation-duration: 0.01ms; transition-duration: 0.01ms; }
}

/* Property switch — shared Figma-aligned control */
.design-system-page .property-switch,
.design-system-page #button .property-switch,
.design-system-page #input .property-switch {
  width: 40px;
  height: 20px;
  border: 0;
  background: #e1e5e5;
  box-shadow: none;
}

.design-system-page .property-switch i,
.design-system-page #button .property-switch i,
.design-system-page #input .property-switch i {
  top: 2px;
  left: 2px;
  width: 22px;
  height: 16px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 0 1px rgb(0 0 0 / 6%),
    0 1px 2px rgb(0 0 0 / 6%),
    0 2px 4px rgb(0 0 0 / 4%);
  transition: transform 180ms cubic-bezier(0.2, 0, 0, 1), background-color 140ms ease;
}

.design-system-page .property-switch:hover:not(:disabled),
.design-system-page #button .property-switch:hover:not(:disabled),
.design-system-page #input .property-switch:hover:not(:disabled) { background: #c8cccc; }

.design-system-page .property-switch[aria-checked="true"],
.design-system-page #button .property-switch[aria-checked="true"],
.design-system-page #input .property-switch[aria-checked="true"] {
  border-color: transparent;
  background: var(--system-brand);
}

.design-system-page .property-switch[aria-checked="true"]:hover:not(:disabled),
.design-system-page #button .property-switch[aria-checked="true"]:hover:not(:disabled),
.design-system-page #input .property-switch[aria-checked="true"]:hover:not(:disabled) { background: #5930ce; }

.design-system-page .property-switch[aria-checked="true"] i,
.design-system-page #button .property-switch[aria-checked="true"] i,
.design-system-page #input .property-switch[aria-checked="true"] i {
  background: #ffffff;
  transform: translateX(14px);
}

:root[data-theme="dark"] .design-system-page .property-switch,
:root[data-theme="dark"] .design-system-page #button .property-switch,
:root[data-theme="dark"] .design-system-page #input .property-switch { background: #1e1f1f; }

:root[data-theme="dark"] .design-system-page .property-switch:hover:not(:disabled),
:root[data-theme="dark"] .design-system-page #button .property-switch:hover:not(:disabled),
:root[data-theme="dark"] .design-system-page #input .property-switch:hover:not(:disabled) { background: #343636; }

:root[data-theme="dark"] .design-system-page .property-switch[aria-checked="true"],
:root[data-theme="dark"] .design-system-page #button .property-switch[aria-checked="true"],
:root[data-theme="dark"] .design-system-page #input .property-switch[aria-checked="true"] { background: var(--system-brand); }

:root[data-theme="dark"] .design-system-page .property-switch[aria-checked="true"]:hover:not(:disabled),
:root[data-theme="dark"] .design-system-page #button .property-switch[aria-checked="true"]:hover:not(:disabled),
:root[data-theme="dark"] .design-system-page #input .property-switch[aria-checked="true"]:hover:not(:disabled) { background: #5930ce; }

/* Shared live-preview caption */
.design-system-page .property-workbench__preview > span,
.design-system-page .property-workbench__preview > header > span,
.design-system-page .dialog-preview-stage > span {
  font-size: 11px;
  line-height: 13px;
}

/* Property-panel dropdown widths */
.design-system-page .property-workbench__panel .ds-dropdown {
  width: 120px;
  justify-self: end;
}

.design-system-page .shadow-control-panel .ds-dropdown { width: 150px; }

.design-system-page .ds-dropdown__chevron svg { stroke-width: 0.75; }
.design-system-dropdown-option__check svg { stroke-width: 1; }

.design-system-page .property-workbench__panel .property-switch {
  justify-self: end;
  margin-right: 80px;
}

/* Input property list spacing */
.design-system-page #input .input-control-panel {
  display: flex;
  min-height: 0;
  flex-direction: column;
  gap: 15px;
}

.design-system-page #input .input-control-panel .button-control-row {
  min-height: 36px;
  height: 36px;
  flex: 0 0 36px;
}

/* Keep every Input type aligned to the Default module height. */
.design-system-page #input .component-workbench,
.design-system-page #input .property-workbench--tall {
  height: 476px;
}

.design-system-page #input .property-workbench--compact > .input-control-panel {
  padding-top: 15px;
  padding-bottom: 15px;
}

.design-system-page #input .property-workbench > .input-preview-stage {
  min-height: 0;
}

/* Backdrop blur interactive preview */
.design-system-page .blur-module {
  width: 700px;
  max-width: 100%;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 0;
  background: var(--background);
}

.design-system-page .blur-preview-stage {
  position: relative;
  height: 362px;
  min-height: 362px;
  aspect-ratio: auto;
  overflow: hidden;
  isolation: isolate;
  background: #dfe5df;
}

.design-system-page .blur-preview-stage > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 47%;
  transform: none;
}

.design-system-page .blur-preview-shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: transparent;
  pointer-events: none;
  transition: background-color 200ms ease;
}

:root[data-theme="dark"] .design-system-page .blur-preview-shade {
  background: rgb(0 0 0 / 20%);
}

.design-system-page .blur-preview-panel {
  position: absolute;
  z-index: 2;
  inset: 40px auto 40px 40px;
  display: flex;
  width: 240px;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: 16px;
  border: 1px solid rgb(255 255 255 / 54%);
  border-radius: 0;
  background: rgb(255 255 255 / 68%);
  color: #1d1c1f;
  -webkit-backdrop-filter: blur(var(--blur-preview, 8px));
  backdrop-filter: blur(var(--blur-preview, 8px));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 36%);
}

.design-system-page .blur-preview-panel strong {
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.4;
}

.design-system-page .blur-preview-panel span {
  margin-top: 6px;
  color: rgb(29 28 31 / 58%);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.4;
}

.design-system-page .blur-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding: 1px 0 0;
  background: var(--line);
}

.design-system-page .blur-options button {
  min-height: 55px;
  padding: 14px 16px;
  border: 0;
  background: var(--background);
  color: var(--muted);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.design-system-page .blur-options button:hover {
  background: color-mix(in srgb, var(--ink) 4%, var(--background));
  color: var(--ink);
}

.design-system-page .blur-options button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--ink) 7%, var(--background));
  color: var(--ink);
}

.design-system-page .blur-options button[aria-pressed="true"] strong { color: var(--ink); }

:root[data-theme="dark"] .design-system-page .blur-preview-panel {
  border-color: rgb(255 255 255 / 16%);
  background: rgb(28 27 30 / 48%);
  color: #f5f4f6;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 10%);
}

:root[data-theme="dark"] .design-system-page .blur-preview-panel span { color: rgb(245 244 246 / 60%); }

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .design-system-page .blur-preview-panel { background: rgb(255 255 255 / 92%); }
  :root[data-theme="dark"] .design-system-page .blur-preview-panel { background: rgb(28 27 30 / 92%); }
}

@media (max-width: 560px) {
  .design-system-page .blur-preview-stage {
    height: 330px;
    min-height: 330px;
  }

  .design-system-page .blur-preview-panel {
    inset: 24px;
    width: auto;
  }

  .design-system-page .blur-options { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Shared component property-list rhythm */
.design-system-page #button .property-workbench__panel,
.design-system-page #selection .property-workbench__panel,
.design-system-page .form-scope .property-workbench__panel,
.design-system-page #feedback .property-workbench__panel {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding-top: 15px;
  padding-bottom: 15px;
}

.design-system-page #button .property-workbench__panel .button-control-row,
.design-system-page #selection .property-workbench__panel .button-control-row,
.design-system-page .form-scope .property-workbench__panel .button-control-row,
.design-system-page #feedback .property-workbench__panel .button-control-row {
  min-height: 36px;
  height: 36px;
  flex: 0 0 36px;
}

@media (min-width: 761px) {
  .design-system-page #button .property-workbench__panel,
  .design-system-page #input .property-workbench__panel,
  .design-system-page #selection .property-workbench__panel {
    justify-content: center;
  }
}

.design-system-page .form-scope .property-workbench__panel {
  justify-content: center;
  padding-right: 30px;
  padding-left: 30px;
}

.design-system-page .form-scope .property-workbench__panel .button-control-row {
  grid-template-columns: 110px 120px;
  gap: 10px;
}

@media (min-width: 761px) {
  .design-system-page .form-scope .property-workbench {
    height: 580px;
    grid-template-columns: 1fr;
    grid-template-rows: 460px 118px;
  }

  .design-system-page .form-scope .property-workbench > .property-workbench__preview {
    position: relative;
    min-height: 0;
    padding: 15px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .design-system-page .form-scope .form-preview-canvas {
    width: 100%;
    min-height: 0;
    padding: 0 20px;
  }

  .design-system-page .form-scope .property-workbench__panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-rows: 36px;
    align-content: center;
    gap: 8px 18px;
    padding: 15px 24px;
  }

  .design-system-page .form-scope .property-workbench__panel .button-control-row {
    min-width: 0;
    grid-template-columns: minmax(74px, 1fr) 120px;
    gap: 10px;
  }

  .design-system-page .form-scope .property-workbench__panel .button-control-row > span {
    white-space: nowrap;
  }

  /* Textarea and Select follow the same side-by-side workbench as Input. */
  .design-system-page #input .form-scope .property-workbench {
    height: 476px;
    grid-template-columns: 398px 300px;
    grid-template-rows: 1fr;
  }

  .design-system-page #input .form-scope .property-workbench > .property-workbench__preview {
    min-height: 0;
    border-right: 1px solid var(--line);
    border-bottom: 0;
  }

  .design-system-page #input .form-scope .property-workbench__panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 15px;
    padding: 15px 30px;
  }

  .design-system-page #input .form-scope .property-workbench__panel .button-control-row {
    width: 100%;
    grid-template-columns: 110px 120px;
    gap: 10px;
  }
}

@media (max-width: 760px) {
  .design-system-page .form-scope .form-preview-canvas {
    width: calc(100% + 18px);
    margin-right: -9px;
    margin-left: -9px;
    padding-right: 0;
    padding-left: 0;
  }
  .form-preview-canvas > [data-form-preview="upload"] { width: min(100%, 343px); }
  .form-preview-canvas > [data-form-preview="textarea"],
  .form-preview-canvas > [data-form-preview="select"] { width: min(100%, 320px); }
  .form-configurator[data-form-kind="upload"][data-form-state="active"] .form-upload-dropzone {
    border-color: var(--form-brand);
    background: var(--form-brand-soft);
  }
  .form-upload-dropzone { height: 160px; padding: 24px; }
  .form-upload-empty { gap: 12px; }
  .design-system-page .form-scope .property-workbench__panel { padding: 22px; }
  .design-system-page .form-scope .property-workbench__panel .button-control-row {
    grid-template-columns: minmax(104px, 0.9fr) minmax(0, 1.1fr);
  }
}

/* Keep the Input-family Textarea and Select aligned to the Input width. */
.design-system-page #input .form-preview-canvas > [data-form-preview="textarea"],
.design-system-page #input .form-preview-canvas > [data-form-preview="select"] {
  width: 100%;
}

@media (max-width: 760px) {
  .design-system-page #input .form-scope .form-preview-canvas {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
    padding-right: 20px;
    padding-left: 20px;
  }

  .design-system-page #form .form-preview-canvas > [data-form-preview="upload"] {
    transform: scale(0.9);
    transform-origin: center;
  }
}

/* Toast and Notification share the same documented preview frame. */
.design-system-page #feedback .property-workbench {
  height: 442px;
  grid-template-columns: 1fr;
  grid-template-rows: 374px 66px;
}

.design-system-page #feedback .property-workbench > .property-workbench__preview {
  min-height: 0;
  padding: 15px;
  border-right: 0;
  border-bottom: 1px solid var(--line);
}

.design-system-page #feedback .feedback-preview-canvas {
  min-height: 0;
  flex: 1;
  padding: 0 20px;
}

.design-system-page #feedback .feedback-notification-stack {
  width: auto;
  height: auto;
  flex: 0 0 auto;
  gap: 0;
  padding: 0;
}

.design-system-page #feedback .feedback-notification-stack .feedback-notification { display: none; }
.design-system-page #feedback .feedback-configurator[data-feedback-type="info"] .feedback-notification[data-feedback-type="info"],
.design-system-page #feedback .feedback-configurator[data-feedback-type="success"] .feedback-notification[data-feedback-type="success"],
.design-system-page #feedback .feedback-configurator[data-feedback-type="warning"] .feedback-notification[data-feedback-type="warning"],
.design-system-page #feedback .feedback-configurator[data-feedback-type="error"] .feedback-notification[data-feedback-type="error"],
.design-system-page #feedback .feedback-configurator[data-feedback-type="loading"] .feedback-notification[data-feedback-type="loading"] { display: flex; }

.design-system-page #feedback .feedback-configurator[data-feedback-type="info"] .feedback-dot { background: #357fe9; }
.design-system-page #feedback .feedback-configurator[data-feedback-type="success"] .feedback-dot { background: #17a966; }
.design-system-page #feedback .feedback-configurator[data-feedback-type="warning"] .feedback-dot { background: #ed9908; }
.design-system-page #feedback .feedback-configurator[data-feedback-type="error"] .feedback-dot { background: #ef3b2e; }
.design-system-page #feedback .feedback-configurator[data-feedback-type="loading"] .feedback-dot { background: #85838a; }

.design-system-page #feedback .property-workbench > .feedback-property-panel {
  display: flex;
  box-sizing: border-box;
  height: 66px;
  min-width: 0;
  min-height: 66px;
  align-items: center;
  padding: 15px;
  background: var(--background-default);
}

.design-system-page #feedback .feedback-property-panel .button-control-row {
  display: grid;
  width: 100%;
  min-height: 36px;
  height: 36px;
  grid-template-columns: minmax(0, 1fr) 120px;
  align-items: center;
  gap: 20px;
  color: var(--muted);
  font-size: 13px;
}

.design-system-page #feedback .feedback-property-panel .ds-dropdown,
.design-system-page #feedback .feedback-property-panel select {
  width: 120px;
  justify-self: end;
}

/* Image Upload uses the same compact, full-width property row as Feedback. */
@media (min-width: 761px) {
  .design-system-page #form.form-scope .property-workbench {
    height: 528px;
    grid-template-rows: 460px 66px;
  }

  .design-system-page #form.form-scope .property-workbench > .property-workbench__panel {
    display: flex;
    box-sizing: border-box;
    height: 66px;
    min-height: 66px;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    padding: 15px;
  }

  .design-system-page #form.form-scope .property-workbench__panel .button-control-row {
    width: 100%;
    min-height: 36px;
    height: 36px;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 20px;
  }

  .design-system-page #form.form-scope .property-workbench__panel .ds-dropdown,
  .design-system-page #form.form-scope .property-workbench__panel select {
    width: 120px;
    justify-self: end;
  }
}

@media (max-width: 760px) {
  .design-system-page #form.form-scope .property-workbench > .property-workbench__panel {
    display: flex;
    box-sizing: border-box;
    height: 66px;
    min-height: 66px;
    flex-direction: row;
    align-items: center;
    padding: 15px;
  }

  .design-system-page #form.form-scope .property-workbench__panel .button-control-row {
    width: 100%;
    flex: 1 1 auto;
    grid-template-columns: minmax(0, 1fr) 120px;
    gap: 20px;
  }

  .design-system-page #form.form-scope .property-workbench__panel .ds-dropdown,
  .design-system-page #form.form-scope .property-workbench__panel select {
    width: 120px;
    justify-self: end;
  }
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-preview-stage {
  background: #ffffff;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-preview-stage {
  background: #141414;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-notification,
.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-toast,
.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-toast-card {
  background: #ffffff;
  color: #1d1c1f;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-toast-card {
  border-color: rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.8);
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-loading-spinner {
  color: #12110e;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-notification {
  box-shadow: 2px 6px 18px 0 rgba(0, 0, 0, 0.12);
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-notification__open {
  color: #1d1c1f;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="light"] .feedback-notification__close img {
  filter: none;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-notification,
.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-toast,
.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-toast-card {
  background: #29292b;
  color: #f7f7f8;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-toast-card {
  border-color: rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.5);
  box-shadow: none;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-toast-card__copy strong {
  color: #f7f7f8;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-toast-card__copy span {
  color: #aaa7b0;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-toast-card__close {
  color: #f7f7f8;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-loading-spinner {
  color: #f5f5f6;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-notification__open {
  color: #f7f7f8;
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-notification {
  box-shadow: 2px 6px 18px 0 rgba(0, 0, 0, 0.4);
}

.design-system-page #feedback .feedback-configurator[data-feedback-mode="dark"] .feedback-notification__close img {
  filter: invert(1);
}

@media (max-width: 760px) {
  .design-system-page #feedback .property-workbench {
    grid-template-rows: minmax(374px, auto) 66px;
  }

  .design-system-page #feedback .property-workbench > .property-workbench__preview {
    min-height: 374px !important;
  }

  .design-system-page #feedback .feedback-preview-canvas {
    padding-right: 0;
    padding-left: 0;
  }

  .design-system-page #feedback .property-workbench > .feedback-property-panel { padding: 15px; }
}

/* Dialog image preview */
.design-system-page .dialog-preview {
  display: grid;
  width: 700px;
  grid-template-columns: 1fr;
  margin-top: 30px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #ffffff;
}

.design-system-page .dialog-preview-stage {
  position: relative;
  isolation: isolate;
  display: flex;
  height: 420px;
  min-height: 420px;
  flex-direction: column;
  padding: 15px;
  overflow: hidden;
  border: 0;
  background-color: #e1e5e5;
  background-image: url("./assets/projects/design-system/dialog-preview-plant.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  transition: background-color 160ms ease;
}

.design-system-page .dialog-preview-stage::before {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: rgb(0 0 0 / 70%);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  content: "";
  pointer-events: none;
}

.design-system-page .dialog-preview-stage > * {
  position: relative;
  z-index: 1;
}

.design-system-page .dialog-preview-canvas {
  display: grid;
  min-width: 0;
  min-height: 0;
  flex: 1;
  place-items: center;
  padding: 8px 20px;
}

.design-system-page .dialog-preview-image {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.design-system-page .dialog-preview-media {
  position: relative;
  width: 220px;
  max-width: 100%;
}

.design-system-page .dialog-preview:is(
  [data-dialog-variant="custom-lg"],
  [data-dialog-variant="custom-xl"]
) :is(.dialog-preview-media, .dialog-preview-image) {
  width: 300px;
}

.design-system-page .dialog-preview-video {
  position: absolute;
  z-index: 1;
  top: 2.05%;
  left: 3.8%;
  display: block;
  width: 91.4%;
  height: 50.15%;
  border-radius: 4px 4px 0 0;
  object-fit: cover;
  opacity: 0;
  transition: opacity 160ms ease;
}

.design-system-page .dialog-preview-video.is-ready {
  opacity: 1;
}

.design-system-page .dialog-preview-media-close {
  position: absolute;
  z-index: 2;
  top: 5.7%;
  right: 9.4%;
  width: 7%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgb(104 102 96 / 48%);
  pointer-events: none;
}

.design-system-page .dialog-preview[data-dialog-mode="dark"] .dialog-preview-media-close {
  background: rgb(0 0 0 / 58%);
}

.design-system-page .dialog-preview-media-close::before,
.design-system-page .dialog-preview-media-close::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 48%;
  height: 1px;
  border-radius: 999px;
  background: rgb(255 255 255 / 94%);
  content: "";
}

.design-system-page .dialog-preview-media-close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.design-system-page .dialog-preview-media-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.design-system-page .dialog-preview[data-dialog-mode="light"] .dialog-preview-stage {
  background-color: #e1e5e5;
}

.design-system-page .dialog-controls {
  display: grid;
  min-height: 78px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 15px 14px;
  border-top: 1px solid var(--line);
  background: var(--background);
  color: var(--ink);
}

.design-system-page .dialog-controls .button-control-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
}

.design-system-page .dialog-controls .button-control-row > span {
  color: var(--muted);
  font-size: 9px;
  line-height: 13px;
}

.design-system-page .dialog-controls .ds-dropdown {
  width: 100%;
}

.design-system-page .dialog-controls .ds-dropdown__trigger {
  border-color: var(--line-strong);
  background: var(--background);
  color: var(--ink);
}

/* Shared labels used by every Live Component property panel. */
.design-system-page :is(.property-workbench__panel, .shadow-control-panel, .dialog-controls)
  :is(.button-control-row, .shadow-control-row) > span {
  font-size: 13px;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .design-system-page .dialog-preview { width: 100%; }
  .design-system-page .dialog-preview-stage { height: 460px; min-height: 460px; }
  .design-system-page .dialog-preview-image { max-height: none; }
  .design-system-page .dialog-controls { grid-template-columns: 1fr; }
}

/* Shared Live Component frame: header, preview canvas, and one/two-line specs. */
.design-system-page .live-preview-frame {
  --live-preview-primary: #696e6c;
  --live-preview-secondary: #aeb0af;
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.design-system-page .live-preview-frame__header {
  display: flex;
  min-height: 26px;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.design-system-page .live-preview-frame__header > span {
  color: var(--live-preview-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
}

.design-system-page .live-preview-frame__canvas {
  min-width: 0;
  min-height: 0;
  flex: 1;
}

.design-system-page .live-preview-frame__meta {
  display: grid;
  min-height: 31px;
  flex: 0 0 auto;
  align-content: end;
  gap: 5px;
  margin-top: auto;
  color: var(--live-preview-primary);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 13px;
}

.design-system-page .live-preview-frame__meta > * {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  color: inherit;
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.design-system-page .live-preview-frame__meta > :nth-child(n + 2) {
  color: var(--live-preview-secondary);
}

.design-system-page :is(
  .shadow-module[data-shadow-mode="dark"],
  .button-configurator[data-button-mode="dark"],
  .input-configurator[data-input-mode="dark"],
  .selection-configurator[data-selection-mode="dark"],
  .form-configurator[data-form-mode="dark"],
  .dialog-preview[data-dialog-mode="dark"],
  .feedback-configurator[data-feedback-mode="dark"]
) .live-preview-frame {
  --live-preview-primary: #aaa7b0;
  --live-preview-secondary: #85838a;
}

.design-system-page .dialog-preview .dialog-preview-stage.live-preview-frame {
  --live-preview-primary: rgb(255 255 255 / 60%);
  --live-preview-secondary: rgb(255 255 255 / 40%);
}

/* Image-backed Button previews keep one fixed contrast treatment in every mode. */
.design-system-page #button .button-configurator:is(
  [data-button-hierarchy="static"],
  [data-button-hierarchy="opacity"]
) .live-preview-frame {
  --live-preview-primary: rgb(255 255 255 / 85%);
  --live-preview-secondary: rgb(255 255 255 / 70%);
}

.design-system-page #button .button-configurator:is(
  [data-button-hierarchy="static"],
  [data-button-hierarchy="opacity"]
) .property-mode-switch {
  --navigation-control-bg: rgb(2 48 48 / 8%);
  --navigation-control-fg: #696e6c;
  --navigation-control-hover: rgb(0 0 0 / 4%);
  --navigation-control-hover-fg: #151716;
  --navigation-control-selected: #ffffff;
  --navigation-control-selected-fg: #151716;
}

.design-system-page .form-scope .form-configurator[data-form-mode="light"] .form-preview-stage {
  background: #ffffff;
}

.design-system-page .form-scope .form-configurator[data-form-mode="dark"] .form-preview-stage {
  background: #141414;
}

.design-system-page #input .form-scope .form-configurator[data-form-mode="light"] .form-preview-stage {
  background: #fafafa;
}

.design-system-page #input .form-scope .form-configurator[data-form-mode="dark"] .form-preview-stage {
  background: #0e0e0f;
}

.design-system-page .form-scope .form-configurator[data-form-mode="dark"] {
  --form-ink: #f5f4f6;
  --form-muted: #aaa7b0;
  --form-quiet: #85838a;
  --form-disabled: #77747c;
  --form-input: #202022;
  --form-input-active: #29292b;
  --form-surface: #303034;
  --form-border: #47474c;
  --form-active: #85838a;
  --form-brand: #8066ca;
  --form-brand-soft: #2b2440;
  --form-focus: rgb(128 102 202 / 32%);
}

.design-system-page .form-scope .form-configurator[data-form-mode="light"] {
  --form-ink: #1d1c1f;
  --form-muted: #68676c;
  --form-quiet: #89878e;
  --form-disabled: #96949c;
  --form-input: #ececed;
  --form-input-active: #fafafa;
  --form-surface: #f0f0f1;
  --form-border: #dddce0;
  --form-active: #96949c;
  --form-brand: #6442c0;
  --form-brand-soft: #f1eefc;
  --form-focus: rgb(100 66 192 / 16%);
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="light"] {
  --form-ink: #1d1c1f;
  --form-muted: #68676c;
  --form-quiet: #89878e;
  --form-input: #ececed;
  --form-surface: #f0f0f1;
  --form-border: #dddce0;
  --form-brand: #6442c0;
  --form-brand-soft: #f1eefc;
  --form-focus: rgb(100 66 192 / 16%);
  --form-upload-icon-surface: rgb(0 0 0 / 5%);
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="dark"] {
  --form-ink: #f5f5f6;
  --form-muted: #96949c;
  --form-quiet: #89878e;
  --form-input: #242426;
  --form-surface: #242426;
  --form-border: #313133;
  --form-brand: #8962f6;
  --form-brand-soft: #1f1736;
  --form-focus: rgb(255 255 255 / 40%);
  --form-upload-icon-surface: rgb(255 255 255 / 5%);
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="light"] .form-upload-icon img,
.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="light"] .form-upload-remove img {
  filter: none;
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="light"] .form-upload-remove {
  border-color: #dddce0;
  background: #ffffff;
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="dark"] .form-upload-icon img {
  filter: brightness(0) invert(87%);
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="dark"] .form-upload-remove {
  border-color: #313133;
  background: #1d1c1f;
}

.design-system-page .form-scope .form-configurator[data-form-kind="upload"][data-form-mode="dark"] .form-upload-remove img {
  filter: brightness(0) invert(96%);
}

/* Textarea shares the same field tokens and states as Input. */
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-mode="light"] {
  --form-ink: #1d1c1f;
  --form-muted: #68676c;
  --form-quiet: #89878e;
  --form-disabled: #96949c;
  --form-input: #ececed;
  --form-input-active: #fafafa;
  --form-input-disabled: #ececed;
  --form-border: #dddce0;
  --form-focus: rgb(100 66 192 / 16%);
  --form-focus-shadow: rgb(0 0 0 / 12%);
  --form-error: #ef3b2e;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-mode="dark"] {
  --form-ink: #f5f5f6;
  --form-muted: #96949c;
  --form-quiet: #89878e;
  --form-disabled: #68676c;
  --form-input: #242426;
  --form-input-active: transparent;
  --form-input-disabled: #242426;
  --form-border: #313133;
  --form-focus: rgb(255 255 255 / 40%);
  --form-focus-shadow: rgb(255 255 255 / 5%);
  --form-error: #ef3b2e;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-mode="light"] .form-preview-stage {
  background: #fafafa;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-mode="dark"] .form-preview-stage {
  background: #0e0e0f;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"] .form-textarea-shell {
  background: var(--form-input);
  box-shadow: none;
  transition: background-color 140ms ease, box-shadow 140ms ease;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"] .form-textarea-count {
  font-variant-numeric: tabular-nums;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"] .form-field-hint {
  color: var(--form-quiet);
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"] .form-textarea-shell textarea:focus-visible {
  outline: 0 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-mode="light"] .form-textarea-resizer,
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-mode="dark"] .form-textarea-resizer {
  filter: none;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"]:not([data-form-state="disabled"]) .form-textarea-shell:hover,
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-state="hover"] .form-textarea-shell {
  box-shadow: inset 0 0 0 1px var(--form-border);
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"] .form-textarea-shell:focus-within,
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-state="focus"] .form-textarea-shell {
  background: var(--form-input-active);
  outline: 2px solid var(--form-focus);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--form-border);
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-state="disabled"] .form-textarea-shell {
  background: var(--form-input-disabled);
  outline: 0;
  box-shadow: none;
  cursor: not-allowed;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-state="disabled"] .form-textarea-shell textarea {
  cursor: not-allowed;
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-state="disabled"] .form-textarea-shell textarea::placeholder {
  color: var(--form-disabled);
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-destructive="true"] .form-textarea-shell,
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-destructive="true"][data-form-state="focus"] .form-textarea-shell {
  box-shadow: inset 0 0 0 1px var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-destructive="true"]:not([data-form-state="disabled"]) .form-textarea-shell:hover,
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-destructive="true"][data-form-state="hover"] .form-textarea-shell {
  box-shadow: inset 0 0 0 1px var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-destructive="true"] .form-textarea-shell:focus-within,
.design-system-page .form-scope .form-configurator[data-form-kind="textarea"][data-form-destructive="true"][data-form-state="focus"] .form-textarea-shell {
  outline: 2px solid var(--form-error);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="light"] {
  --form-ink: #1d1c1f;
  --form-quiet: #89878e;
  --form-input: #ececed;
  --form-surface: #f0f0f1;
  --form-focus: rgb(100 66 192 / 16%);
  --form-select-menu: #ffffff;
  --form-select-item: #ffffff;
  --form-select-shadow: rgb(0 0 0 / 12%);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="dark"] {
  --form-ink: #f5f5f6;
  --form-quiet: #89878e;
  --form-input: #242426;
  --form-surface: #313133;
  --form-focus: rgb(255 255 255 / 40%);
  --form-select-menu: #1d1c1f;
  --form-select-item: #1d1c1f;
  --form-select-shadow: rgb(0 0 0 / 40%);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"] .form-select-trigger {
  background: var(--form-input);
  color: var(--form-ink);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-destructive="true"] .form-select-trigger {
  box-shadow: inset 0 0 0 1px var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-destructive="true"] .form-field-hint {
  color: var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-destructive="true"] .form-select-trigger[aria-expanded="true"] {
  outline: 2px solid var(--form-error);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-destructive="true"] .form-select-trigger:focus-visible {
  outline: 2px solid var(--form-error);
  outline-offset: 2px;
  box-shadow: inset 0 0 0 1px var(--form-error);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"] .form-select-menu {
  background: var(--form-select-menu);
  box-shadow: 2px 6px 18px 0 var(--form-select-shadow);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"] .form-select-menu button {
  background: var(--form-select-item);
  color: var(--form-ink);
  font-size: 14px;
  line-height: 20px;
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"] .form-select-menu button:hover {
  background: var(--form-surface);
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="light"] .form-select-leading,
.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="light"] .form-select-tips,
.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="light"] .form-select-chevron,
.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="dark"] .form-select-leading,
.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="dark"] .form-select-chevron {
  filter: none;
}

.design-system-page .form-scope .form-configurator[data-form-kind="select"][data-form-mode="dark"] .form-select-tips {
  filter: invert(1) brightness(1.65);
}

@media (max-width: 760px) {
  .design-system-page .section-title {
    font-size: 18px;
  }
}