@import url("../tokens/legion-tokens.css?v=20260729-animation-editorial-52");
@import url("https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:wght@400;500;600;700;800&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=IBM+Plex+Sans:wght@400;500;600;700&family=Inter:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=Geist:wght@400;500;600;700;800&family=Hanken+Grotesk:wght@400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
@import url("https://api.fontshare.com/v2/css?f[]=general-sans@400,500,600,700&f[]=satoshi@400,500,700,900&display=swap");

* { box-sizing: border-box; }

@property --color-page-sidebar-current-width {
  syntax: "<length>";
  inherits: true;
  initial-value: 300px;
}

/* Elevation & Shadow — relationship specimens.
   Dark elevation follows the shared tonal contract: shadows remain dark and
   neutral surfaces gather On Surface illumination as they rise. Colored and
   nacreous components retain their own material treatment. */
body[data-route="foundation-elevation"] {
  --elevation-stage-bg:var(--color-bg-inset);
  --elevation-stage-line:var(--color-border-subtle);
  --elevation-stage-grid:color-mix(in srgb,var(--color-border-subtle) 42%,transparent);
  --elevation-demo-surface:var(--lds-elevation-dark-surface);
  --elevation-level-0:linear-gradient(rgb(255 255 255 / var(--lds-elevation-overlay-0)),rgb(255 255 255 / var(--lds-elevation-overlay-0))),var(--elevation-demo-surface);
  --elevation-level-1:linear-gradient(rgb(255 255 255 / var(--lds-elevation-overlay-1)),rgb(255 255 255 / var(--lds-elevation-overlay-1))),var(--elevation-demo-surface);
  --elevation-level-2:linear-gradient(rgb(255 255 255 / var(--lds-elevation-overlay-2)),rgb(255 255 255 / var(--lds-elevation-overlay-2))),var(--elevation-demo-surface);
  --elevation-level-3:linear-gradient(rgb(255 255 255 / var(--lds-elevation-overlay-3)),rgb(255 255 255 / var(--lds-elevation-overlay-3))),var(--elevation-demo-surface);
  --elevation-demo-border:var(--color-border-subtle);
  --elevation-demo-muted:var(--color-text-secondary);
  --elevation-shadow-raised:var(--lds-shadow-1);
  --elevation-shadow-popover:var(--lds-shadow-2);
  --elevation-shadow-overlay:var(--lds-shadow-3);
}

body[data-route="foundation-elevation"][data-color-theme="light"] {
  --elevation-demo-surface:var(--color-bg-inset,#f7f9fc);
  --elevation-level-0:var(--color-bg-inset,#f7f9fc);
  --elevation-level-1:var(--color-bg-elevated,#fff);
  --elevation-level-2:var(--color-bg-elevated,#fff);
  --elevation-level-3:var(--color-bg-elevated,#fff);
}

body[data-route="foundation-elevation"] .foundation-standard-demo {
  padding:0;
  border:0;
  background:none;
}

body[data-route="foundation-elevation"] .elevation-depth-system {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-elevation"] .elevation-depth-row {
  display:grid;
  grid-template-columns:minmax(230px,.34fr) minmax(420px,.66fr);
  gap:var(--lds-section-gap-major);
  align-items:center;
  min-width:0;
  padding:var(--lds-space-8) 0;
}

body[data-route="foundation-elevation"] .elevation-depth-row + .elevation-depth-row {
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-elevation"] .elevation-depth-copy {
  display:grid;
  align-content:start;
  min-width:0;
}

body[data-route="foundation-elevation"] .elevation-depth-copy > span,
body[data-route="foundation-elevation"] .elevation-visual-label {
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-guide-label-size,13px);
  font-weight:var(--lds-guide-label-weight,800);
  line-height:1.35;
  letter-spacing:var(--lds-guide-label-tracking,.09em);
  text-transform:uppercase;
}

body[data-route="foundation-elevation"] .elevation-depth-copy h3 {
  max-width:15ch;
  margin:var(--lds-space-4) 0 var(--lds-space-3);
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(28px,3.2vw,44px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
  text-wrap:balance;
}

body[data-route="foundation-elevation"] .elevation-depth-copy p {
  max-width:44ch;
  margin:0;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16px;
  line-height:1.58;
  letter-spacing:0;
}

body[data-route="foundation-elevation"] .elevation-depth-copy code {
  width:max-content;
  max-width:100%;
  margin-top:var(--lds-space-5);
  color:var(--lds-type-token-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
}

body[data-route="foundation-elevation"] .elevation-stage {
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  min-width:0;
  min-height:320px;
  overflow:hidden;
  padding:var(--lds-preview-padding-spacious);
  border:1px solid var(--elevation-stage-line);
  background:var(--elevation-stage-bg);
}

body[data-route="foundation-elevation"] .elevation-stage::before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(90deg,transparent 49.8%,var(--elevation-stage-grid) 50%,transparent 50.2%),
    linear-gradient(0deg,transparent 49.8%,var(--elevation-stage-grid) 50%,transparent 50.2%);
  background-size:64px 64px;
  opacity:.7;
}

body[data-route="foundation-elevation"] .elevation-page-plane {
  display:grid;
  align-content:center;
  width:100%;
  min-height:210px;
  padding:var(--lds-preview-padding-spacious);
  border-block:1px solid var(--elevation-demo-border);
  color:var(--color-text-primary);
  background:var(--elevation-level-0);
  box-shadow:none;
}

body[data-route="foundation-elevation"] .elevation-page-plane .lds-component-title {
  margin:var(--lds-space-3) 0 0;
  font-size:clamp(19px,2vw,28px);
}

body[data-route="foundation-elevation"] .elevation-plane-layout {
  display:grid;
  grid-template-columns:1.4fr .8fr .55fr;
  gap:var(--lds-space-3);
  margin-top:var(--lds-space-6);
}

body[data-route="foundation-elevation"] .elevation-plane-layout i,
body[data-route="foundation-elevation"] .elevation-stage-keylines i {
  display:block;
  min-height:34px;
  border-top:1px solid var(--elevation-demo-border);
  border-bottom:1px solid var(--elevation-demo-border);
  background:color-mix(in srgb,var(--elevation-demo-surface) 42%,transparent);
}

body[data-route="foundation-elevation"] .elevation-stage-keylines {
  position:absolute;
  inset:var(--lds-space-6);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--lds-space-4);
  opacity:.55;
}

body[data-route="foundation-elevation"] .elevation-stage-keylines i {
  min-height:100%;
  border:1px solid var(--elevation-stage-grid);
  background:none;
}

body[data-route="foundation-elevation"] .elevation-raised-surface {
  position:relative;
  z-index:1;
  width:min(78%,460px);
  background:var(--elevation-level-1);
  box-shadow:var(--elevation-shadow-raised);
  transform:translateY(-6px);
}

body[data-route="foundation-elevation"] .elevation-card-status {
  display:flex;
  gap:var(--lds-space-2);
  align-items:center;
  margin-top:var(--lds-space-5);
  padding-top:var(--lds-space-4);
  border-top:1px solid var(--elevation-demo-border);
  color:var(--elevation-demo-muted);
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--lds-font-base);
  line-height:1.5;
  letter-spacing:0;
}

body[data-route="foundation-elevation"] .elevation-card-status i {
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--color-success);
}

body[data-route="foundation-elevation"] .elevation-component-actions {
  justify-content:flex-end;
}

body[data-route="foundation-elevation"] .elevation-page-plane .elevation-component-actions {
  justify-content:flex-start;
}

body[data-route="foundation-elevation"] .elevation-component-actions .lds-button,
body[data-route="foundation-elevation"] .elevation-anchor.lds-button {
  position:relative;
  z-index:1;
}

body[data-route="foundation-elevation"] .elevation-stage-popover {
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:center;
  gap:var(--lds-space-3);
}

body[data-route="foundation-elevation"] .elevation-anchor-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--lds-space-5);
  padding:0 0 var(--lds-space-5);
  border-bottom:1px solid var(--elevation-demo-border);
}

body[data-route="foundation-elevation"] .elevation-anchor-copy {
  display:grid;
  gap:var(--lds-space-1);
  min-width:0;
}

body[data-route="foundation-elevation"] .elevation-anchor-copy .lds-component-title,
body[data-route="foundation-elevation"] .elevation-anchor-copy .lds-component-body {
  margin:0;
}

body[data-route="foundation-elevation"] .elevation-popover-surface {
  align-self:flex-end;
  width:min(100%,360px);
  background:var(--elevation-level-2);
  box-shadow:var(--elevation-shadow-popover);
}

body[data-route="foundation-elevation"] .elevation-popover-caret {
  position:absolute;
  top:-7px;
  right:34px;
  width:13px;
  height:13px;
  border-top:1px solid var(--elevation-demo-border);
  border-left:1px solid var(--elevation-demo-border);
  background:var(--elevation-level-2);
  transform:rotate(45deg);
}

body[data-route="foundation-elevation"] .elevation-modal-underlay {
  position:absolute;
  inset:var(--lds-space-6);
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--lds-space-4);
  padding:var(--lds-space-5);
  border:1px solid var(--elevation-demo-border);
}

body[data-route="foundation-elevation"] .elevation-modal-underlay i {
  min-height:58px;
  border:1px solid var(--elevation-stage-grid);
  background:color-mix(in srgb,var(--elevation-demo-surface) 46%,transparent);
}

body[data-route="foundation-elevation"] .elevation-modal-scrim {
  position:absolute;
  inset:0;
  background:var(--lds-overlay-scrim);
  backdrop-filter:blur(1.5px);
}

body[data-route="foundation-elevation"] .elevation-modal-surface {
  position:relative;
  width:min(76%,470px);
  border-radius:var(--lds-radius-lg);
  background:var(--elevation-level-3);
  box-shadow:var(--elevation-shadow-overlay);
}

body[data-route="foundation-elevation"] .elevation-modal-actions {
  justify-content:flex-end;
}

@media (max-width:900px) {
  body[data-route="foundation-elevation"] .elevation-depth-row {
    grid-template-columns:minmax(0,1fr);
    gap:var(--lds-section-gap-standard);
  }

  body[data-route="foundation-elevation"] .elevation-depth-copy h3 {
    max-width:22ch;
  }
}

@media (max-width:560px) {
  body[data-route="foundation-elevation"] .elevation-stage {
    min-height:280px;
    padding:var(--lds-preview-padding-standard) var(--lds-space-4);
  }

  body[data-route="foundation-elevation"] .elevation-raised-surface,
  body[data-route="foundation-elevation"] .elevation-modal-surface {
    width:92%;
  }

  body[data-route="foundation-elevation"] .elevation-stage-popover {
    gap:var(--lds-space-4);
  }

  body[data-route="foundation-elevation"] .elevation-anchor-row {
    align-items:flex-start;
  }

  body[data-route="foundation-elevation"] .elevation-popover-surface {
    width:100%;
  }
}

/* Shared shell semantic-material contract.
   This final layer intentionally wins over the retired light-only atmosphere
   variables above. Documentation surfaces consume roles; routes do not choose
   their own shell palette. */
body[data-lds-shell="shared"] {
  --lds-shell-brand-width: 300px;
  --lds-line-display-tight: 1.08;
  --lds-line-display-editable: 1.08;
  --lds-type-token-color: color-mix(in srgb, var(--color-text-secondary) 76%, var(--color-text-primary));
}

body[data-lds-shell="shared"][data-color-theme="dark"] {
  --lds-atmosphere-bg:
    radial-gradient(ellipse 76% 54% at -18% 8%, rgba(116, 88, 184, .12), transparent 72%),
    radial-gradient(ellipse 68% 46% at 112% 20%, rgba(51, 178, 215, .10), transparent 74%),
    radial-gradient(ellipse 74% 44% at 24% 112%, rgba(188, 72, 153, .07), transparent 76%),
    linear-gradient(138deg, #080a0f, #10141d 52%, #090c12);
  --lds-glass-border: rgba(176, 205, 255, .16);
  --lds-glass-orb-a: rgba(196, 215, 255, .06);
  --lds-glass-orb-b: rgba(66, 183, 218, .05);
  --lds-glass-hero-orb: rgba(83, 176, 222, .08);
  --lds-glass-surface:
    radial-gradient(ellipse 88% 54% at -10% -18%, rgba(218, 230, 255, .075), transparent 64%),
    radial-gradient(ellipse 68% 48% at 112% 8%, rgba(57, 177, 211, .055), transparent 68%),
    radial-gradient(ellipse 72% 42% at 18% 116%, rgba(185, 72, 153, .04), transparent 72%),
    linear-gradient(142deg, rgba(34, 39, 53, .88), rgba(17, 21, 30, .86) 58%, rgba(18, 27, 33, .80));
  --lds-glass-hero:
    radial-gradient(ellipse 82% 80% at 92% 4%, rgba(62, 181, 218, .075), transparent 64%),
    linear-gradient(140deg, rgba(38, 44, 60, .90), rgba(17, 21, 30, .86));
  --lds-glass-shell: var(--lds-glass-surface);
  --lds-glass-inner:
    linear-gradient(142deg, rgba(42, 48, 64, .72), rgba(18, 22, 32, .68));
  --lds-glass-shadow: 0 32px 84px -38px rgba(0, 0, 0, .88);
  --lds-glass-shadow-soft: 0 18px 48px -30px rgba(0, 0, 0, .78);
  --color-text-primary: #f8fbff;
  --color-text-secondary: #c3cada;
  --color-text-muted: #9da7ba;
  --color-text-inverse: #f8fbff;
}

body[data-lds-shell="shared"][data-color-theme="light"] {
  --lds-atmosphere-bg:
    radial-gradient(ellipse 82% 48% at -18% 4%, rgba(255,255,255,.82), transparent 68%),
    radial-gradient(ellipse 72% 46% at 112% 20%, rgba(111,166,229,.15), transparent 72%),
    radial-gradient(ellipse 76% 42% at 22% 112%, rgba(213,129,174,.10), transparent 74%),
    linear-gradient(138deg, #f4f5f8, #e9edf4 54%, #f5f6f8);
  --lds-glass-border: rgba(82, 103, 132, .24);
  --lds-glass-orb-a: rgba(255,255,255,.48);
  --lds-glass-orb-b: rgba(91,145,218,.10);
  --lds-glass-hero-orb: rgba(91,145,218,.12);
  --lds-glass-surface:
    radial-gradient(ellipse 92% 56% at -12% -18%, rgba(255,255,255,.86), transparent 64%),
    radial-gradient(ellipse 70% 50% at 112% 10%, rgba(127,174,229,.13), transparent 68%),
    radial-gradient(ellipse 70% 42% at 18% 116%, rgba(218,139,180,.08), transparent 72%),
    linear-gradient(142deg, rgba(255,255,255,.88), rgba(237,240,246,.86));
  --lds-glass-hero:
    radial-gradient(ellipse 82% 80% at 92% 4%, rgba(112,168,231,.14), transparent 64%),
    linear-gradient(140deg, rgba(255,255,255,.94), rgba(235,239,246,.88));
  --lds-glass-shell: var(--lds-glass-surface);
  --lds-glass-inner: linear-gradient(142deg, rgba(255,255,255,.76), rgba(229,234,243,.72));
  --lds-glass-shadow: 0 30px 76px -38px rgba(38, 44, 54, .38);
  --lds-glass-shadow-soft: 0 18px 44px -30px rgba(38, 44, 54, .30);
}

body[data-lds-shell="shared"] {
  background: var(--lds-atmosphere-bg);
  background-attachment: fixed;
}

body[data-lds-shell="shared"] :is(.lds-page-header, .lds-page-section-nav) {
  grid-template-columns: var(--lds-shell-brand-width) minmax(0, 1fr) auto;
}

body[data-lds-shell="shared"] .lds-page-section-nav {
  grid-template-columns: var(--lds-shell-brand-width) minmax(0, 1fr);
}

body[data-lds-shell="shared"] .lds-page-brand {
  min-width: var(--lds-shell-brand-width);
}

body[data-lds-shell="shared"] .lds-page-brand-crest {
  width: 58px;
  min-width: 58px;
}

body[data-lds-shell="shared"] .lds-page-brand .brand-lockup-text {
  width: auto;
  min-width: 0;
}

body[data-lds-shell="shared"] .foundation-page-grid > .panel-card,
body[data-lds-shell="shared"] .foundation-value-grid,
body[data-lds-shell="shared"] .foundation-swatch-group {
  color: var(--color-text-primary);
  background: var(--lds-glass-surface);
}

body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-page-grid > .panel-card::before,
body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-value-grid::before,
body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-swatch-group::before {
  opacity: .22;
}

body[data-lds-shell="shared"] .foundation-page-grid > .panel-card :is(h2, h3, h4, strong, li),
body[data-lds-shell="shared"] .foundation-example-card > h2 {
  color: var(--color-text-primary);
}

body[data-lds-shell="shared"] .foundation-page-grid > .panel-card :is(p, small, dd),
body[data-lds-shell="shared"] .foundation-page-grid > .panel-card code {
  color: var(--color-text-secondary);
}

body[data-lds-shell="shared"] .lds-page-section-nav .section-nav-track {
  scrollbar-width: none;
  mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 28px), transparent 100%);
}

body[data-lds-shell="shared"] .lds-page-section-nav .section-nav-track::-webkit-scrollbar {
  display: none;
}

@media (max-width: 899px) {
  body[data-lds-shell="shared"] { --lds-shell-brand-width: 0px; }
  body[data-lds-shell="shared"] .lds-page-brand { min-width: 0; }
}

:root {
  --component-icon-text-gap: 8px;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Shared LDS documentation shell
   Extracted from the completed Color reference. Route content remains owned by
   its existing renderer; chrome, theme, navigation and elevation live here. */
body[data-lds-shell="shared"] {
  --color-page-sidebar-current-width: 300px;
  --lds-shell-header-height: 208px;
  --lds-shell-nav-height: 80px;
  --lds-shell-chrome-height: calc(var(--lds-shell-header-height) + var(--lds-shell-nav-height));
  --lds-shell-rail-max: 1240px;
  --lds-shell-motion: 720ms cubic-bezier(.22, 1, .36, 1);
  /* Interaction-state color is semantic, never component-owned. Components
     may consume the edge, surface, icon, and glow roles differently because
     their anatomy differs, but they may not invent another hover hue. */
  --lds-interaction-hover-duration: var(--lds-motion-fast, 120ms);
  --lds-interaction-hover-ease: cubic-bezier(.4, 0, .2, 1);
  min-width: 320px;
  background: var(--lds-shell-app);
  transition: background 320ms ease;
}

body[data-lds-shell="shared"][data-color-theme="dark"] {
  color-scheme: dark;
  --lds-shell-app: #090b11;
  --color-bg-app: #090b11;
  --color-bg-surface: #151923;
  --color-bg-panel: #11151e;
  --color-bg-elevated: #1b202c;
  --color-bg-inset: #0d1017;
  --lds-relief-surface:var(--lds-relief-dark-surface);
  --lds-relief-shadow:var(--lds-relief-dark-shadow);
  --lds-relief-light:var(--lds-relief-dark-highlight);
  --color-text-primary: #f8fbff;
  --color-text-secondary: #c3cada;
  --color-text-muted: #9da7ba;
  --color-border-subtle: rgba(176, 205, 255, .15);
  --color-border-standard: rgba(176, 205, 255, .24);
  --color-divider: rgba(176, 205, 255, .14);
  --color-focus-border: #79a9ff;
  --color-focus-ring: #a8c8ff;
  --lds-interaction-hover-edge: #5ce6ff;
  --lds-interaction-hover-surface: #20cdef;
  --lds-interaction-hover-icon: #72ebff;
  --lds-interaction-hover-highlight: rgba(238, 252, 255, .18);
  --lds-interaction-hover-glow: rgba(37, 216, 248, .46);
  --lds-selection-accent: #5ce6ff;
  --lds-selection-surface: color-mix(in srgb,#20cdef 14%,#11151e);
  --lds-selection-text: #d8fbff;
  --lds-interaction-press-edge: color-mix(in srgb,var(--lds-interaction-hover-edge) 68%,var(--color-bg-panel));
  --lds-interaction-press-surface: color-mix(in srgb,var(--lds-interaction-hover-surface) 18%,var(--color-bg-inset));
  --lds-interaction-press-icon: #d8fbff;
  --lds-interaction-press-highlight: color-mix(in srgb,var(--lds-interaction-hover-highlight) 52%,transparent);
  --lds-interaction-press-shadow: color-mix(in srgb,#020b12 72%,transparent);
  --lds-specimen-cue-color: var(--color-text-primary);
  --lds-specimen-cue-glow: color-mix(in srgb,var(--lds-specimen-cue-color) 18%,transparent);
  --color-selected-bg: var(--lds-selection-surface);
  --color-selected-border: var(--lds-selection-accent);
  --color-selected-text: var(--lds-selection-text);
  --color-nav-selected-bg: var(--color-selected-bg);
  --color-nav-selected-text: var(--color-selected-text);
  --color-list-item-accent: var(--color-selected-border);
  --color-list-item-hover-surface: color-mix(in srgb,var(--lds-interaction-hover-surface) 9%,var(--color-bg-panel));
  --color-list-item-selected-surface: var(--color-selected-bg);
  --lds-shell-heading: #f8fbff;
  --lds-shell-copy: #c3cada;
  --lds-shell-kicker: #a8c7ff;
  --lds-shell-edge: rgba(176, 205, 255, .18);
  --lds-shell-chrome:
    radial-gradient(ellipse 72% 126% at -22% -38%, rgba(229,240,255,.23), transparent 80%),
    radial-gradient(ellipse 74% 134% at 122% -26%, rgba(64,195,225,.23), transparent 82%),
    radial-gradient(ellipse 78% 122% at -18% 142%, rgba(222,72,172,.18), transparent 82%),
    radial-gradient(ellipse 92% 146% at 54% -68%, rgba(125,92,205,.24), transparent 82%),
    rgba(11,14,21,.86);
  --lds-shell-card:
    radial-gradient(ellipse at 8% 0%, rgba(222,234,255,.055), transparent 30%),
    radial-gradient(ellipse at 92% 8%, rgba(72,184,221,.045), transparent 36%),
    linear-gradient(138deg, rgba(37,41,55,.72), rgba(17,21,30,.68) 58%, rgba(19,28,34,.60));
}

body[data-lds-shell="shared"][data-color-theme="light"] {
  color-scheme: light;
  --lds-shell-app: #eef0f5;
  --color-bg-app: #eef0f5;
  --color-bg-surface: #fbfbfd;
  --color-bg-panel: #f6f7fa;
  --color-bg-elevated: #fff;
  --color-bg-inset: #e9ecf2;
  --lds-relief-surface:var(--lds-relief-light-surface);
  --lds-relief-shadow:var(--lds-relief-light-shadow);
  --lds-relief-light:var(--lds-relief-light-highlight);
  --color-text-primary: #15161b;
  --color-text-secondary: #555d69;
  --color-text-muted: #687180;
  --color-border-subtle: rgba(82,103,132,.20);
  --color-border-standard: rgba(82,103,132,.32);
  --color-divider: rgba(82,103,132,.18);
  --color-accent: var(--lds-light-system-indigo);
  --color-accent-hover: var(--lds-light-system-indigo-hover);
  --color-accent-active: var(--lds-light-system-indigo-active);
  --color-link: var(--lds-light-system-indigo);
  --color-link-hover: var(--lds-light-system-indigo-hover);
  --color-action-secondary-text: var(--lds-light-system-indigo);
  --color-focus-border: var(--lds-light-focus-border);
  --color-focus-ring: var(--lds-light-focus-ring);
  --lds-interaction-hover-edge: var(--lds-light-interaction-hover-edge);
  --lds-interaction-hover-surface: var(--lds-light-interaction-hover-surface);
  --lds-interaction-hover-icon: var(--lds-light-interaction-hover-icon);
  --lds-interaction-hover-highlight: var(--lds-light-interaction-hover-highlight);
  --lds-interaction-hover-glow: var(--lds-light-interaction-hover-glow);
  --lds-selection-accent: var(--lds-light-selection-accent);
  --lds-selection-surface: var(--lds-light-selection-surface);
  --lds-selection-text: var(--lds-light-selection-text);
  --lds-interaction-press-edge: color-mix(in srgb,var(--lds-interaction-hover-edge) 68%,var(--color-border-strong));
  --lds-interaction-press-surface: color-mix(in srgb,var(--lds-interaction-hover-surface) 13%,var(--color-bg-inset));
  --lds-interaction-press-icon: var(--lds-light-selection-text);
  --lds-interaction-press-highlight: color-mix(in srgb,var(--lds-interaction-hover-highlight) 62%,transparent);
  --lds-interaction-press-shadow: color-mix(in srgb,var(--lds-light-interaction-hover-icon) 24%,transparent);
  --lds-specimen-cue-color: var(--color-text-primary);
  --lds-specimen-cue-glow: color-mix(in srgb,var(--lds-specimen-cue-color) 18%,transparent);
  --color-selected-bg: var(--lds-selection-surface);
  --color-selected-border: var(--lds-selection-accent);
  --color-selected-text: var(--lds-selection-text);
  --color-nav-selected-bg: var(--color-selected-bg);
  --color-nav-selected-text: var(--color-selected-text);
  --color-list-item-accent: var(--color-selected-border);
  --color-list-item-hover-surface: color-mix(in srgb,var(--lds-interaction-hover-surface) 9%,var(--color-bg-panel));
  --color-list-item-selected-surface: var(--color-selected-bg);
  --lds-shell-heading: #15161b;
  --lds-shell-copy: #555d69;
  --lds-shell-kicker: #174fba;
  --lds-shell-edge: rgba(82,103,132,.28);
  --lds-shell-chrome:
    radial-gradient(ellipse at 8% 18%, rgba(255,255,255,.82), transparent 31%),
    radial-gradient(ellipse at 30% 92%, rgba(230,126,107,.12), transparent 34%),
    radial-gradient(ellipse at 55% 2%, rgba(196,187,232,.22), transparent 36%),
    radial-gradient(ellipse at 77% 18%, rgba(11,92,255,.14), transparent 36%),
    radial-gradient(ellipse at 96% 82%, rgba(46,184,154,.16), transparent 38%),
    rgba(244,245,249,.86);
  --lds-shell-card:
    radial-gradient(ellipse at 8% 0%, rgba(255,255,255,.92), transparent 34%),
    radial-gradient(ellipse at 94% 12%, rgba(141,181,235,.12), transparent 38%),
    linear-gradient(138deg, rgba(255,255,255,.92), rgba(242,244,249,.84));
}

@media (min-width: 900px) {
  body[data-lds-shell="shared"] .app-shell {
    grid-template-columns: var(--color-page-sidebar-current-width) minmax(0, 1fr);
    transition: grid-template-columns var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"].documentation-nav-collapsed {
    --color-page-sidebar-current-width: 80px;
  }

  body[data-lds-shell="shared"] .app-nav {
    z-index: 30;
    display: block;
    padding: calc(var(--lds-shell-chrome-height) + 32px) 16px 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    scrollbar-width: none;
    transition: padding var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"] .app-nav > .brand-panel { display: none; }
}

body[data-lds-shell="shared"] .lds-page-chrome {
  position: sticky;
  top: 0;
  z-index: 25;
  display: grid;
  grid-template-rows: var(--lds-shell-header-height) var(--lds-shell-nav-height);
  width: calc(100% + var(--color-page-sidebar-current-width));
  margin-left: calc(-1 * var(--color-page-sidebar-current-width));
  color: var(--lds-shell-heading);
  background: var(--lds-shell-chrome);
  border-bottom: 1px solid var(--lds-shell-edge);
  box-shadow: 0 44px 104px rgba(0,0,0,.22);
  backdrop-filter: blur(36px) saturate(170%);
  -webkit-backdrop-filter: blur(36px) saturate(170%);
  transition: width var(--lds-shell-motion), margin-left var(--lds-shell-motion);
}

.lds-page-header,
.lds-page-section-nav {
  display: grid;
  grid-template-columns: var(--color-page-sidebar-current-width) minmax(0, 1fr) auto;
  align-items: center;
  min-width: 0;
}

.lds-page-brand {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 100%;
  padding: 24px 32px;
  color: var(--lds-shell-heading);
  text-decoration: none;
}

.lds-page-brand-crest { width: 58px; height: 58px; fill: currentColor; filter: drop-shadow(0 8px 16px rgba(11,92,255,.18)); }
.lds-page-brand .brand-lockup-text { display: grid; gap: 2px; min-width: 0; }
.lds-page-brand strong { font: 700 1.25rem/1.15 var(--lds-font-display, var(--font)); white-space: nowrap; }
.lds-page-brand .version-chip { width: max-content; margin-top: 4px; }

.lds-page-heading { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:24px; min-width:0; max-width:var(--lds-shell-rail-max); padding:28px 32px; }
.lds-page-heading-copy { min-width:0; }
.lds-page-heading h1 { margin: 6px 0 8px; color: var(--lds-shell-heading); font-family: var(--lds-font-display, var(--font)); font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; letter-spacing: var(--lds-heading-tracking-display, -.012em); }
.lds-page-heading p { max-width: 74ch; margin: 0; color: var(--lds-shell-copy); font-size: 1.02rem; line-height: 1.5; }
.lds-page-heading .eyebrow, .lds-page-brand .eyebrow { color: var(--lds-shell-kicker); }
.lds-page-theme { padding: 24px 40px 24px 16px; }

.lds-page-section-nav { grid-template-columns: var(--color-page-sidebar-current-width) minmax(0, 1fr); }
.lds-page-section-nav .section-nav-track { grid-column: 2; display: flex; align-items: center; gap: 8px; min-width: 0; margin: 0 auto; width: min(calc(100% - 64px), var(--lds-shell-rail-max)); padding: 10px 0 24px; overflow-x: auto; }
.lds-page-section-nav .section-nav-link { position: relative; z-index: 1; flex: 0 0 auto; min-height: 44px; padding: 10px 16px; border: 0; border-radius: 999px; color: var(--lds-shell-copy); background: transparent; cursor: pointer; }
.lds-page-section-nav .section-nav-link:hover { color: var(--lds-shell-heading); background: color-mix(in srgb, var(--color-bg-elevated) 28%, transparent); }
.lds-page-section-nav .section-nav-link.is-active { color: var(--lds-shell-heading); background: color-mix(in srgb, var(--color-bg-elevated) 46%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 10px 28px rgba(11,92,255,.13); }
.lds-page-section-nav .section-nav-indicator { display: none; }
.lds-page-section-nav.is-empty { visibility: hidden; }

body[data-lds-shell="shared"] .nav-rail-card {
  display: block;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--lds-shell-edge);
  border-radius: 24px;
  background: var(--lds-shell-card);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 28px 54px -30px rgba(0,0,0,.58), 0 12px 28px -18px rgba(68,126,230,.26);
  backdrop-filter: blur(28px) saturate(178%);
  -webkit-backdrop-filter: blur(28px) saturate(178%);
}
body[data-lds-shell="shared"] .nav-rail-head { display:flex; align-items:center; justify-content:space-between; min-height:56px; padding:10px 12px 8px 20px; }
body[data-lds-shell="shared"] .nav-rail-label { color:var(--lds-shell-kicker); font-size:var(--font-size-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
body[data-lds-shell="shared"] .nav-rail-toggle { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--lds-shell-edge); border-radius:50%; color:var(--lds-shell-heading); background:color-mix(in srgb,var(--color-bg-elevated) 44%,transparent); cursor:pointer; }
body[data-lds-shell="shared"] .nav-rail-toggle svg { width:20px; height:20px; transition:transform var(--lds-shell-motion); }
body[data-lds-shell="shared"] .nav-rail-card .nav-tree { gap:24px; padding:0 20px 24px; border:0; background:transparent; box-shadow:none; }
body[data-lds-shell="shared"] .nav-rail-card .nav-group { gap:8px; }
body[data-lds-shell="shared"] .nav-rail-card .nav-group a { min-height:44px; padding:10px 16px; border-radius:14px; }
body[data-lds-shell="shared"] .nav-rail-card .nav-group a.active { color:var(--lds-shell-heading); background:color-mix(in srgb,var(--color-bg-elevated) 48%,transparent); box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 10px 24px rgba(11,92,255,.12); }
body[data-lds-shell="shared"].documentation-nav-collapsed .nav-rail-card .nav-tree,
body[data-lds-shell="shared"].documentation-nav-collapsed .nav-rail-label { display:none; }
body[data-lds-shell="shared"].documentation-nav-collapsed .nav-rail-head { justify-content:center; padding:6px; }
body[data-lds-shell="shared"].documentation-nav-collapsed .nav-rail-toggle svg { transform:rotate(180deg); }

body[data-lds-shell="shared"] .lds-page-content { width:min(100%, calc(var(--lds-shell-rail-max) + 64px)); margin-inline:auto; padding:40px 32px 80px; }
body[data-lds-shell="shared"] .lds-page-content > :is(.page, .component-page, .buttons-page, .input-source-page, .foundation-iconography) { max-width:none; margin:0; }
body[data-lds-shell="shared"] .lds-page-content :is(.page-header, .buttons-hero) { margin-top:0; background:var(--lds-shell-card); border-color:var(--lds-shell-edge); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 30px 76px -42px rgba(0,0,0,.52); }
body[data-lds-shell="shared"] .lds-page-content :is(.panel-card,.hero-card,.spec-card,.foundation-card,.component-card,.fi-card) { border-color:var(--lds-shell-edge); background-color:var(--color-bg-surface); box-shadow:0 20px 54px -38px rgba(0,0,0,.48); }
body[data-lds-shell="shared"] .app-footer { color:var(--lds-shell-copy); background:transparent; }

@media (max-width: 899px) {
  body[data-lds-shell="shared"] { --color-page-sidebar-current-width: 0px; --lds-shell-header-height:auto; --lds-shell-nav-height:auto; }
  body[data-lds-shell="shared"] .lds-page-chrome { position:relative; width:100%; margin-left:0; grid-template-rows:auto auto; }
  .lds-page-header { grid-template-columns:minmax(0,1fr) auto; padding:16px; }
  .lds-page-brand { grid-column:1 / -1; height:auto; padding:8px 0 16px; }
  .lds-page-brand-crest { width:44px; height:44px; }
  .lds-page-heading { padding:16px 12px 20px 0; }
  .lds-page-heading p { font-size:.94rem; }
  .lds-page-theme { padding:12px 0; }
  .lds-page-section-nav { display:block; }
  .lds-page-section-nav .section-nav-track { width:100%; padding:8px 16px 20px; }
  body[data-lds-shell="shared"] .lds-page-content { padding:24px 16px 64px; overflow-wrap:anywhere; }
}

@media (max-width: 520px) {
  .lds-page-header { display:block; }
  .lds-page-heading { display:block; }
  .lds-page-theme { display:flex; justify-content:flex-start; }
  .lds-page-heading .lds-page-theme { margin-top:16px; }
  .lds-page-heading h1 { font-size:2.25rem; }
}

body[data-lds-shell="shared"] .lds-page-content > .page > .page-header {
  display: none;
}

body[data-lds-shell="shared"] .lds-page-content [id] {
  scroll-margin-top: calc(var(--lds-shell-nav-height) + 32px);
}

body {
  margin: 0;
  color: var(--color-text-primary);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-info-bg) 42%, var(--color-bg-app)), var(--color-bg-app) 420px);
  font-family: var(--font);
  font-size: var(--font-size-base);
  line-height: var(--lds-line-body);
}

.legion-vivid-light-scope {
  --color-bg-app: #F1F2F6;
  --color-bg-surface: #FFFFFF;
  --color-bg-panel: #FFFFFF;
  --color-bg-elevated: #FFFFFF;
  --color-bg-inset: #EEF0F5;
  --color-scrim: rgba(13, 17, 23, 0.45);

  --color-text-primary: #15161B;
  --color-text-secondary: #5C616B;
  --color-text-muted: #6B7079;
  --color-text-helper: #5B7A95;
  --color-text-placeholder: #5B7A95;
  --color-text-instructional: #5B7A95;
  --color-text-helper-on-tinted: #54708A;
  --color-text-placeholder-on-tinted: #54708A;
  --color-text-instructional-on-tinted: #54708A;
  --color-text-disabled: #C4C8CE;
  --color-text-inverse: #FFFFFF;

  --color-border-subtle: #E7EAEE;
  --color-border-standard: #D3D7DD;
  --color-border-strong: #9AA0A8;
  --color-divider: #E7EAEE;

  --color-accent: var(--lds-light-system-indigo);
  --color-accent-hover: var(--lds-light-system-indigo-hover);
  --color-accent-active: var(--lds-light-system-indigo-active);
  --color-accent-text: #FFFFFF;
  --color-action-secondary-border: #CDD2D9;
  --color-action-secondary-text: var(--lds-light-system-indigo);
  --color-link: var(--lds-light-system-indigo);
  --color-link-hover: var(--lds-light-system-indigo-hover);
  --color-selected-bg: var(--lds-selection-surface);
  --color-selected-border: var(--lds-selection-accent);
  --color-selected-text: var(--lds-selection-text);

  --color-focus-border: var(--lds-light-focus-border);
  --color-focus-ring: var(--lds-light-focus-ring);
  --color-focus: var(--lds-light-focus-ring);

  --color-success: #10B255;
  --color-success-bg: #E2F7EC;
  --color-success-border: #ABE6C2;
  --color-success-text: #0A7A3C;

  --color-warning: #FF8A00;
  --color-warning-bg: #FFF0DC;
  --color-warning-border: #F8D49E;
  --color-warning-text: #B46200;

  --color-danger: #F5251B;
  --color-danger-bg: #FFEAE7;
  --color-danger-border: #F6C6C0;
  --color-danger-text: #D6160C;

  --color-info: #00AEDE;
  --color-info-bg: #E0F6FC;
  --color-info-border: #ABE4F2;
  --color-info-text: #0A7388;

  --color-code-surface: #F1F2F6;
  --color-code-text: #15161B;
  --color-tooltip-surface: #15161B;
  --color-tooltip-text: #FFFFFF;
  --color-modal-overlay: rgba(13, 17, 23, 0.45);
  --color-modal-surface: #FFFFFF;
  --color-table-header: #F1F2F6;
  --color-table-row-hover: #F7F8FB;
  --color-nav-selected-bg: var(--color-selected-bg);
  --color-nav-selected-text: var(--color-selected-text);

  --lds-tooltip-bg: var(--color-tooltip-surface);
  --lds-tooltip-text: var(--color-tooltip-text);
  --lds-table-row-hover: var(--color-table-row-hover);
  --lds-overlay-scrim: var(--color-scrim);
}

button,
input,
select,
textarea {
  font: inherit;
}

a {
  color: inherit;
}

:where(a, button, input, select, textarea, [tabindex]):focus-visible,
.focus-demo {
  outline: none;
  border-color: var(--color-focus-border, var(--lds-light-system-indigo));
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.skip-link {
  position: fixed;
  left: var(--lds-space-3);
  top: var(--lds-space-3);
  z-index: var(--lds-z-modal);
  padding: var(--lds-space-2) var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.app-shell {
  min-height: 100vh;
  min-width: 0;
  display: grid;
}

.app-nav {
  --nav-section-color: var(--color-selected-text, #006D84);
  position: sticky;
  top: 0;
  z-index: var(--lds-z-sticky);
  display: grid;
  gap: var(--lds-space-4);
  max-height: 100vh;
  padding: var(--lds-space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-panel) 96%, white);
  overflow: auto;
}

.brand-panel {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.brand-panel strong {
  font-size: var(--font-size-xl);
  line-height: var(--lds-line-tight);
}

/* Legion Leo crest — founder identity mark crowning the sidebar masthead. */
.brand-crest-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: visible;
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: var(--lds-space-3);
  text-decoration: none;
  color: var(--color-text-primary);
  transition: border-color 140ms ease, background 140ms ease;
}

.brand-lockup:hover {
  border-color: var(--color-border-strong);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--color-accent));
}

.brand-lockup:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .brand-panel.brand-lockup {
  align-items: flex-start;
  gap: 14px;
  padding: 18px 20px 16px;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
}

.brand-crest {
  flex: 0 0 auto;
  width: auto;
  height: 46px;
  color: var(--color-text-primary);
  fill: currentColor;
  object-fit: contain;
  opacity: 0.92;
  transition: opacity 140ms ease;
}

.brand-lockup:hover .brand-crest {
  opacity: 1;
}

.brand-lockup-text {
  display: grid;
  row-gap: 1px;
  min-width: 0;
}

.brand-lockup-text .eyebrow {
  position: relative;
  order: 0;
  top: -2px;
  margin-bottom: 7px;
}

.brand-lockup-text strong {
  order: 1;
}

.brand-subheader {
  order: 2;
  margin-top: 2px;
  color: color-mix(in srgb, var(--color-text-secondary) 82%, var(--color-text-primary));
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.28;
  letter-spacing: .006em;
  text-transform: none;
  white-space: nowrap;
}

.brand-lockup-text .version-chip {
  order: 3;
  margin-top: 6px;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .brand-panel .brand-crest {
  margin-top: 18px;
}

/* Quiet founder's signature in the footer. */
.app-footer-signature {
  display: inline-flex;
  align-items: center;
  gap: var(--lds-space-2);
  margin-inline-start: auto;
  color: var(--color-text-secondary);
}

.footer-crest {
  flex: 0 0 auto;
  width: auto;
  height: 18px;
  color: var(--color-text-muted);
  opacity: 0.8;
}

.version-chip,
.chip,
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.warning { border-color: var(--color-warning-border); color: var(--color-warning-text); background: var(--color-warning-bg); }

/* Version is metadata and follows the LDS Badge contract, not pill-chip
   geometry. Keep this scoped so semantic chips retain their own anatomy. */
.version-chip {
  min-height: 20px;
  padding: 2px var(--lds-space-1);
  border-radius: 4px;
  line-height: 16px;
}
.success { border-color: var(--color-success-border); color: var(--color-success-text); background: var(--color-success-bg); }
.danger { border-color: var(--color-danger-border); color: var(--color-danger-text); background: var(--color-danger-bg); }
.info { border-color: var(--color-info-border); color: var(--color-info-text); background: var(--color-info-bg); }

.eyebrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.nav-tree {
  display: flex;
  gap: var(--lds-space-5);
  overflow: visible;
  padding-bottom: var(--lds-space-1);
}

.nav-rail-card {
  display: contents;
}

.nav-rail-head {
  display: none;
}

.nav-group {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 190px;
  align-content: start;
}

.nav-group h2 {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0 0 var(--lds-space-2);
  padding: var(--lds-space-2) 0 var(--lds-space-1);
  color: var(--nav-section-color);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.nav-group h2::after {
  content: '';
  flex: 1 1 auto;
  min-width: 24px;
  height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--nav-section-color) 34%, transparent), transparent);
}

.nav-group a {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 0 var(--lds-space-3);
  border: 1px solid transparent;
  border-radius: var(--lds-radius-md);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
  white-space: nowrap;
}

.nav-group + .nav-group {
  padding-left: var(--lds-space-4);
  border-left: 1px solid color-mix(in srgb, var(--color-border-subtle) 86%, transparent);
}

.nav-group a:hover,
.nav-group a.active {
  border-color: var(--color-info-border);
  color: var(--color-text-primary);
  background: var(--color-info-bg);
}

.legion-vivid-light-scope .nav-group a:hover {
  border-color: var(--color-border-standard);
  color: var(--color-link-hover);
  background: var(--color-bg-inset);
}

.legion-vivid-light-scope .nav-group a.active {
  border-color: color-mix(in srgb, var(--color-selected-text) 24%, var(--color-selected-bg));
  color: var(--color-selected-text);
  background: var(--color-selected-bg);
}

.app-main {
  min-width: 0;
  display: grid;
  grid-template-rows: 1fr auto;
}

/* SPA route changes move focus to the main landmark for screen-reader
   continuity. It is not an interactive control, so it must not inherit the
   global 3px control focus ring (whose left edge reads as a page-height line). */
.page-host[tabindex="-1"]:focus,
.page-host[tabindex="-1"]:focus-visible {
  outline: none;
  box-shadow: none;
}

.app-topbar,
.app-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-panel) 94%, transparent);
}

.app-topbar strong {
  display: block;
  margin-top: 2px;
  font-size: var(--font-size-xl);
}

.app-footer {
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 0;
  color: var(--color-text-secondary);
}

.page-host {
  min-width: 0;
  padding: var(--lds-page-gutter-mobile);
}

.page {
  --lds-content-rail-gutter: var(--lds-page-gutter-mobile);
  display: grid;
  gap: var(--lds-section-gap-compact);
  width: 100%;
  min-width: 0;
  max-width: 1180px;
  margin: 0 auto;
}

.page-header {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-card-padding-spacious);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(135deg, var(--color-bg-surface), var(--color-info-bg));
}

.page-header h1 {
  margin: 0;
  font-size: clamp(2.45rem, 10vw, var(--lds-display-lg));
  line-height: 1.02;
  letter-spacing: 0;
}

.page-lead {
  max-width: 860px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.status-row,
.variant-strip,
.state-strip,
.button-row,
.decision-row,
.runtime-row,
.example-stack {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lds-space-2);
}

.overview-grid,
.content-grid,
.component-layout,
.ratification-grid {
  display: grid;
  gap: var(--lds-grid-gutter-mobile);
}

.panel-card,
.hero-card,
.review-card {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-card-padding-compact);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.hero-card {
  border-color: var(--color-info-border);
}

.panel-card h2,
.hero-card h2,
.review-card h2 {
  margin: 0;
  font-size: var(--lds-display-sm);
  line-height: var(--lds-line-tight);
}

.panel-card p,
.hero-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

.metric-list {
  display: grid;
  gap: var(--lds-space-2);
}

.system-room {
  display: grid;
  gap: var(--lds-section-gap-standard);
}

.system-room-hero {
  padding: clamp(32px, 7vw, 72px);
  gap: var(--lds-space-5);
}

.system-room-hero h2 {
  max-width: 920px;
  font-size: clamp(48px, 9vw, 112px);
  line-height: 0.92;
}

.system-room-hero p {
  max-width: 760px;
  font-size: clamp(18px, 2vw, 24px);
  line-height: var(--lds-line-relaxed);
  color: var(--color-text-secondary);
}

.system-vitals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--lds-space-3);
}

.system-vitals div {
  display: grid;
  gap: var(--lds-space-1);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.system-vitals span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.system-vitals strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-tight);
}

.system-door {
  align-content: start;
}

.component-ruling-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--lds-space-3);
}

.component-intent-card,
.component-ruling-card {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: color-mix(in srgb, var(--color-bg-surface) 88%, var(--color-bg-panel));
}

.component-intent-card {
  border-left: 3px solid var(--color-accent);
}

.component-intent-card p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--lds-line-body);
}

.component-ruling-card dl {
  display: grid;
  gap: var(--lds-space-2);
  margin: 0;
}

.component-ruling-card div {
  display: grid;
  gap: var(--lds-space-1);
}

.component-ruling-card dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
}

.component-ruling-card dd {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.metric-list div {
  display: flex;
  justify-content: space-between;
  gap: var(--lds-space-3);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
}

.bullet-list {
  margin: 0;
  padding-left: var(--lds-space-4);
}

.bullet-list li + li {
  margin-top: var(--lds-space-1);
}

.meta-text,
small {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.preview-frame,
.device-preview,
.anatomy-demo {
  min-width: 0;
  padding: var(--lds-preview-padding-compact);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-lg);
  background: var(--color-info-bg);
}

.desktop-preview {
  min-height: 240px;
}

.mobile-preview {
  width: min(100%, 390px);
  min-height: 360px;
  margin-inline: auto;
  border-width: 8px;
  border-color: var(--color-border-strong);
  background: var(--color-bg-panel);
}

.visual-anatomy {
  display: grid;
  gap: var(--lds-space-3);
}

.anatomy-part {
  min-height: 54px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  text-align: center;
  font-weight: var(--font-weight-semibold);
}

.grid.visual-anatomy,
.grid-visual,
.rail-demo,
.shell-mini {
  display: grid;
  gap: var(--lds-space-3);
}

.grid-visual > *,
.rail-demo > *,
.shell-mini > *,
.shell-mini main span {
  min-height: 72px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.shell-mini {
  grid-template-columns: 120px minmax(0, 1fr);
}

.shell-mini main {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
}

.shell-mini main span {
  min-height: 36px;
}

.token-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-2);
}

.token-grid span {
  min-height: 72px;
  display: grid;
  place-items: end start;
  padding: var(--lds-space-3);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  font-weight: var(--font-weight-semibold);
}

.type-demo {
  display: grid;
  gap: var(--lds-space-2);
}

.type-demo h2,
.type-demo h3,
.type-demo p {
  margin: 0;
}

.type-demo h2 { font-size: var(--lds-display-md); }
.type-demo h3 { font-size: var(--lds-display-sm); }

.icon-demo,
.labeled-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-2);
}

.foundation-page-grid {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.foundation-page-grid .wide {
  min-width: 0;
}

.foundation-example-card {
  overflow: hidden;
}

.foundation-swatch-grid,
.foundation-spacing-demo,
.foundation-grid-demo,
.foundation-radius-demo,
.foundation-focus-demo,
.foundation-elevation-demo,
.foundation-icon-demo,
.foundation-motion-demo,
.foundation-breakpoint-demo,
.foundation-darkmode-demo {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.foundation-swatch-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.foundation-swatch-group {
  display: grid;
  gap: var(--lds-space-2);
  align-content: start;
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.foundation-swatch-group h3,
.foundation-type-demo h2,
.foundation-type-demo h3,
.foundation-type-demo h4,
.foundation-type-demo p,
.foundation-type-demo small,
.foundation-type-demo label {
  margin: 0;
}

.foundation-swatch-row {
  display: grid;
  grid-template-columns: 34px minmax(70px, .5fr) minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: center;
  min-width: 0;
  font-size: var(--font-size-sm);
}

.foundation-swatch {
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
}

.foundation-swatch-row code,
.foundation-type-demo code,
.foundation-spacing-demo code {
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
}

.color-foundation {
  display: grid;
  gap: var(--lds-section-gap-compact);
  min-width: 0;
  --glass-ink: #12151C;
  --glass-muted: #566070;
  --color-page-text: var(--color-text-primary);
  --color-page-muted: var(--color-text-secondary);
  --color-page-panel: var(--color-bg-panel);
  --color-page-border: var(--color-border-subtle);
}

.color-onpage-nav {
  margin-block: var(--lds-section-gap-compact);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
  border-radius: var(--lds-radius-lg);
}

.color-section-nav {
  margin-block: 0 var(--lds-section-gap-compact);
  --glass-ink: #12151C;
  --glass-muted: #566070;
  --nav-ind-1: #6a3dff;
  --nav-ind-2: #2f6bff;
  --nav-ind-3: #0b84ff;
}

.color-page-shell {
  gap: var(--lds-space-4);
  --color-example-light-value-bg:
    linear-gradient(145deg, rgba(33, 41, 54, .98), rgba(9, 16, 26, .98)),
    #0B1118;
  --color-example-light-value-text: #F3F7FF;
  --color-example-light-value-muted: rgba(243,247,255,.78);
  --color-example-dark-value-bg:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(226,232,244,.86)),
    #F7FAFF;
  --color-example-dark-value-text: #111827;
  --color-example-dark-value-muted: #374151;
}

.color-page-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
  flex-wrap: wrap;
}

#color-all,
#color-philosophy,
#color-modes,
#color-buttons,
#color-text,
#color-status,
#color-use,
#color-grayscale,
#color-grayscale-roles,
#color-adoption {
  scroll-margin-top: 290px;
}

.color-foundation-hero,
.color-foundation-card {
  min-width: 0;
  padding: var(--lds-card-inner-padding);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.86), rgba(226,236,255,.22)),
    var(--color-bg-panel);
}

.color-foundation-hero {
  padding: var(--lds-section-padding-y) var(--lds-section-padding-x);
}

.color-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
  flex-wrap: wrap;
}

.color-page-shell .page-theme-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(120, 140, 170, .35);
  border-radius: var(--lds-radius-pill);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.color-page-shell .page-theme-btn {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--lds-radius-pill);
  background: transparent;
  color: var(--glass-muted);
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.color-page-shell .page-theme-btn[aria-pressed="true"] {
  background: var(--glass-ink);
  color: #FFFFFF;
}

.color-page-shell .page-theme-btn:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

/* ============================================================================
   Liquid Glass Switch (.lgs-switch) — Dark/Light theme toggle.
   The glass does not paint a flare. A clipped, pixel-identical copy of the
   pill is optically displaced beneath a clear moving lens.
   ============================================================================ */
@property --lgs-x {
  syntax: "<length>";
  inherits: true;
  initial-value: -11.5px;
}

.lgs-switch {
  --lgs-x: -11.5px;
  position: relative;
  display: inline-block;
  width: 147px;
  height: 81px;
  padding: 0;
  border: 0;
  border-radius: 41px;
  background: transparent;
  cursor: pointer;
  transition: --lgs-x 900ms linear(0, 1 30%, 1.064 44%, 1.044 54%, 1.006 72%, 1);
  -webkit-tap-highlight-color: transparent;
}

.lgs-switch[data-active-theme="dark"] {
  --lgs-x: 68.5px;
}

.lgs-switch:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

.lgs-switch .lgs-visual {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lgs-switch .lgs-svg-label {
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: .01em;
}

.lgs-switch .lgs-svg-label-light {
  filter: drop-shadow(0 1px 1px rgba(56, 62, 72, .28));
}

.lgs-switch .lgs-svg-label-dark {
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .28));
}

.lgs-switch .lgs-theme-layer {
  opacity: 0;
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1);
}

.lgs-switch[data-active-theme="light"] .lgs-theme-light,
.lgs-switch[data-active-theme="dark"] .lgs-theme-dark {
  opacity: 1;
}

.lgs-switch .lgs-lens {
  transform: translate(var(--lgs-x), -18.5px);
  transform-origin: 0 0;
}

.lgs-switch .lgs-base-cutout {
  transform: translate(var(--lgs-x), -18.5px);
  transform-origin: 0 0;
}

.lgs-switch .lgs-optical-clip {
  opacity: 0;
  transition: opacity 260ms ease;
}

.lgs-switch[data-active-theme="light"] .lgs-optical-clip-light,
.lgs-switch[data-active-theme="dark"] .lgs-optical-clip-dark {
  opacity: 1;
}

.lgs-switch .lgs-scene-copy {
  transform: translate(calc(0px - var(--lgs-x)), 18.5px);
  transform-origin: 0 0;
}

.lgs-switch .lgs-horn-bevel,
.lgs-switch .lgs-horn-chroma {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lgs-switch .lgs-horn-fill {
  stroke: none;
}

.lgs-switch .lgs-horn-bevel-outer {
  stroke-width: 4.8;
}

.lgs-switch .lgs-horn-bevel-outer.lgs-theme-light {
  stroke: url(#lgs-color-horn-bevel-outer-light);
}

.lgs-switch .lgs-horn-bevel-outer.lgs-theme-dark {
  stroke: url(#lgs-color-horn-bevel-outer-dark);
}

.lgs-switch .lgs-horn-bevel-inner {
  stroke-width: 2.4;
}

.lgs-switch .lgs-horn-bevel-inner.lgs-theme-light {
  stroke: url(#lgs-color-horn-bevel-inner-light);
}

.lgs-switch .lgs-horn-bevel-inner.lgs-theme-dark {
  stroke: url(#lgs-color-horn-bevel-inner-dark);
}

.lgs-switch .lgs-horn-bottom-bevel.lgs-horn-bevel-outer.lgs-theme-light {
  stroke: url(#lgs-color-horn-bottom-bevel-outer-light);
}

.lgs-switch .lgs-horn-bottom-bevel.lgs-horn-bevel-outer.lgs-theme-dark {
  stroke: url(#lgs-color-horn-bottom-bevel-outer-dark);
}

.lgs-switch .lgs-horn-bottom-bevel.lgs-horn-bevel-inner.lgs-theme-light {
  stroke: url(#lgs-color-horn-bottom-bevel-inner-light);
}

.lgs-switch .lgs-horn-bottom-bevel.lgs-horn-bevel-inner.lgs-theme-dark {
  stroke: url(#lgs-color-horn-bottom-bevel-inner-dark);
}

.lgs-switch .lgs-horn-chroma {
  stroke-width: 4;
}

.lgs-switch .lgs-svg-icon {
  color: #FFFFFF;
  filter: drop-shadow(0 0 1px rgba(255, 255, 255, .98));
}

.lgs-switch .lgs-svg-icon.lgs-theme-light {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .98))
    drop-shadow(0 0 3px rgba(255, 255, 255, .98))
    drop-shadow(0 0 8px rgba(255, 246, 199, .82))
    drop-shadow(0 0 15px rgba(103, 151, 211, .42));
}

.lgs-switch .lgs-svg-icon.lgs-theme-dark {
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .92))
    drop-shadow(0 0 2.5px rgba(255, 255, 255, .86))
    drop-shadow(0 0 6px rgba(213, 233, 255, .58))
    drop-shadow(0 0 12px rgba(114, 170, 240, .32));
}

.lgs-switch .lgs-lens-edge {
  fill: none;
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .26));
  transition: opacity 560ms cubic-bezier(.22, 1, .36, 1), filter 420ms ease;
}

.lgs-switch[data-active-theme="light"] .lgs-lens-edge {
  filter: drop-shadow(0 10px 14px rgba(45, 66, 92, .24));
}

.lgs-switch[data-active-theme="dark"]:hover .lgs-lens-edge {
  filter: drop-shadow(0 12px 17px rgba(43, 76, 122, .32));
}

.lgs-switch[data-active-theme="light"]:hover .lgs-lens-edge {
  filter: drop-shadow(0 12px 17px rgba(43, 76, 122, .28));
}

@media (prefers-reduced-motion: reduce) {
  .lgs-switch {
    transition-duration: 180ms;
  }

  .lgs-switch .lgs-theme-layer,
  .lgs-switch .lgs-lens-edge {
    transition-duration: 180ms;
    animation-duration: 180ms;
  }
}

/* ============================================================================
   Living Glass Switch v2 (.lgs2-switch)

   Production study: one material silhouette and one continuous pill rim per
   endpoint. The moving lens cuts the native track out, then restores the
   refracted material and its native bevel inside its own clip. The glass never
   draws a pill outline of its own.
   ============================================================================ */
.color-theme-toggle-stack {
  grid-area: toggle;
  display: grid;
  place-items: center end;
  align-self: center;
  gap: 0;
}

/* One shell slot owns every instance of the protected Living Glass toggle.
   Route wrappers may describe their local markup, but never its geometry. */
.lds-theme-toggle-slot {
  display:grid;
  place-items:center;
  width:var(--lds-theme-toggle-width,132px);
  height:var(--lds-theme-toggle-height,73px);
  margin:0;
  padding:0;
}

.color-theme-toggle-stack > .lgs-switch[hidden] {
  display: none;
}

.lgs2-switch {
  --lgs2-width: var(--lds-theme-toggle-width,132px);
  --lgs2-height: var(--lds-theme-toggle-height,73px);
  --lgs2-lens-size: 67px;
  --lgs2-lens-travel: 80px;
  --lgs2-lens-x: 0px;
  --lgs2-duration: 520ms;
  --lgs2-ease: cubic-bezier(.65, 0, .35, 1);
  position:relative;
  display: block;
  width: var(--lgs2-width);
  height: var(--lgs2-height);
  padding: 0;
  border: 0;
  border-radius: calc(var(--lgs2-height) / 2);
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* The SVG's pearl and cast shadow extend beyond the nominal 132×73 control.
   Match that visible optical envelope without changing protected geometry or
   consuming additional header layout space. */
.lgs2-switch::before {
  content:"";
  position:absolute;
  z-index:2;
  inset:-4px -4px -14px;
  border-radius:calc(var(--lgs2-height) / 2 + 12px);
  background:transparent;
}

.lgs2-switch[data-active-theme="dark"] {
  --lgs2-lens-x: var(--lgs2-lens-travel);
}

.lgs2-switch:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

.lgs2-visual {
  position:relative;
  z-index:1;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.lgs2-state,
.lgs2-optical {
  opacity: 0;
  transition: opacity var(--lgs2-duration) var(--lgs2-ease);
}

.lgs2-switch[data-active-theme="light"] :is(.lgs2-state-light, .lgs2-optical-light),
.lgs2-switch[data-active-theme="dark"] :is(.lgs2-state-dark, .lgs2-optical-dark) {
  opacity: 1;
}

.lgs2-lens-cutout,
.lgs2-lens-shell {
  transform: translateX(var(--lgs2-lens-x));
  transform-origin: 0 0;
  transition: transform var(--lgs2-duration) var(--lgs2-ease);
  will-change: transform;
}

.lgs2-lens-morph {
  transform-box: fill-box;
  transform-origin: center;
}

.lgs2-track rect {
  transition: filter 220ms ease, stroke-opacity 220ms ease;
}

.lgs2-label {
  fill: rgba(255, 255, 255, .78);
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  dominant-baseline: middle;
  transition: opacity 260ms ease;
}

.lgs2-state-light .lgs2-label {
  fill: #FEFEFE;
  font-weight: var(--font-weight-medium);
}

.lgs2-state-dark .lgs2-label {
  fill: rgba(218, 224, 232, .78);
}

.lgs2-rim {
  fill: none;
  stroke-width: 5.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lgs2-hook-chroma {
  fill: none;
  stroke-width: 4.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .92;
}

.lgs2-underlight {
  mix-blend-mode: screen;
}

.lgs2-glass {
  mix-blend-mode: screen;
}

.lgs2-icon {
  mix-blend-mode: normal;
  filter:none;
  shape-rendering: geometricPrecision;
}

.lgs2-icon use {
  vector-effect:non-scaling-stroke;
  transition:color 180ms ease,opacity 180ms ease;
}

.lgs2-icon-etch {
  --lgs2-icon-stroke:2;
  filter:none!important;
  opacity:1;
}

.lgs2-icon-edge-shadow {
  --lgs2-icon-stroke:2;
  color:rgba(3,10,20,.62);
  opacity:0;
  transform:translateY(.5px);
  filter:none!important;
  pointer-events:none;
}

.lgs2-switch[data-lgs2-switch] .lgs2-icon-edge-shadow {
  opacity:.28;
}

.lgs2-icon--light .lgs2-icon-etch {
  color:#fff;
}

.lgs2-icon--dark .lgs2-icon-etch {
  color:#fff;
}

.lgs2-bulb-glow {
  pointer-events:none;
  mix-blend-mode:normal;
  transform-box:fill-box;
  transform-origin:center;
  opacity:.035;
  transition:opacity 820ms cubic-bezier(.2,.72,.2,1);
}

.lgs2-bulb-glow path {
  transform-box:fill-box;
  transform-origin:center;
  transition:opacity 700ms cubic-bezier(.2,.72,.2,1),transform 940ms cubic-bezier(.16,.72,.18,1);
}

.lgs2-bulb-glow .lgs2-bulb-field {
  opacity:.15;
  transform:translate(-1px,1px);
}

.lgs2-bulb-glow .lgs2-bulb-field--cross {
  opacity:.08;
  transform:translate(1px,-1px);
}

.lgs2-bulb-glow .lgs2-bulb-plume {
  opacity:.2;
  transform:scale(.92,.96) translate(.8px,1px);
}

.lgs2-bulb-glow .lgs2-bulb-plume--secondary {
  opacity:.12;
  transform:scale(.9,1) translate(-1px,-.4px);
}

.lgs2-bulb-glow .lgs2-bulb-plume--pearl {
  opacity:.06;
  transform:translate(-1px,1px);
}

.lgs2-bulb-glow .lgs2-bulb-lit-rim {
  opacity:.04;
  stroke-width:1.15;
}

.lgs2-bulb-glow .lgs2-bulb-lit-rim--lower {
  stroke-width:1.35;
}

.lgs2-switch[data-active-theme="light"] .lgs2-bulb-glow--light {
  opacity:.04;
}

.lgs2-switch[data-active-theme="dark"] .lgs2-bulb-glow--dark {
  opacity:.035;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light {
  opacity:.54;
  animation:lgs2-solar-pulse 6.4s cubic-bezier(.37,0,.63,1) 850ms infinite;
}

.lgs2-switch[data-active-theme="dark"]:is(:hover,:focus-visible) .lgs2-bulb-glow--dark {
  opacity:.84;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-field--main {
  opacity:.72;
  transform:translate(.4px,-.4px);
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-field--cross {
  opacity:.48;
  transform:translate(-.5px,.4px);
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-plume--primary {
  opacity:.82;
  transform:scale(.99,1.04) translate(-.5px,-.8px);
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-plume--secondary {
  opacity:.58;
  transform:scale(.96,1.03) translate(.8px,.2px);
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-field--main {
  opacity:.66;
  transform:translate(-.6px,.2px);
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-field--cross {
  opacity:.42;
  transform:translate(.8px,-.5px);
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-plume--primary {
  opacity:.76;
  transform:scale(.98,1.05) translate(-.8px,-.5px);
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-plume--secondary {
  opacity:.44;
  transform:scale(.95,1.02) translate(1px,.5px);
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-plume--pearl {
  opacity:.46;
  transform:translate(.5px,-.4px);
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-lit-rim {
  opacity:.58;
  transition-delay:150ms;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-lit-rim--side {
  opacity:.36;
  transition-delay:220ms;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-lit-rim--lower {
  opacity:.72;
  transition-delay:260ms;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-field--main {
  animation:lgs2-bulb-field-main 5.2s cubic-bezier(.42,0,.24,1) 900ms infinite alternate;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-field--cross {
  animation:lgs2-bulb-field-cross 6.4s cubic-bezier(.42,0,.24,1) 1.35s infinite alternate-reverse;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-plume--primary {
  animation:lgs2-bulb-plume-primary 4.1s cubic-bezier(.38,0,.25,1) 720ms infinite alternate;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-plume--secondary {
  animation:lgs2-bulb-plume-secondary 5.3s cubic-bezier(.38,0,.25,1) 1.1s infinite alternate-reverse;
}

/* Light uses one synchronized solar breath plus a shared circulation period.
   The layers travel along different smooth paths so the clear area migrates
   through the lens instead of remaining a fixed hole in the illumination. */
.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-field--main {
  animation:lgs2-solar-field-drift 9.6s cubic-bezier(.45,0,.55,1) 850ms infinite;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-field--cross {
  animation:lgs2-solar-cross-drift 9.6s cubic-bezier(.45,0,.55,1) 850ms infinite;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-plume--primary {
  animation:lgs2-solar-primary-drift 9.6s cubic-bezier(.45,0,.55,1) 850ms infinite;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-plume--secondary {
  animation:lgs2-solar-secondary-drift 9.6s cubic-bezier(.45,0,.55,1) 850ms infinite;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-bulb-glow--light .lgs2-bulb-plume--pearl {
  animation:lgs2-solar-pearl-drift 9.6s cubic-bezier(.45,0,.55,1) 850ms infinite;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-lit-rim--upper {
  animation:lgs2-bulb-rim-shimmer 3.8s ease-in-out 1.1s infinite alternate;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-lit-rim--side {
  animation:lgs2-bulb-rim-shimmer 4.6s ease-in-out 1.45s infinite alternate-reverse;
}

.lgs2-switch:is(:hover,:focus-visible) .lgs2-bulb-glow .lgs2-bulb-lit-rim--lower {
  animation:lgs2-bulb-lower-shimmer 4.1s ease-in-out 1.25s infinite alternate;
}

@keyframes lgs2-bulb-field-main {
  0% { transform:translate(-.8px,.4px); opacity:.45; }
  46% { transform:translate(.7px,-.8px); opacity:.62; }
  100% { transform:translate(-.2px,-.1px); opacity:.51; }
}

@keyframes lgs2-bulb-field-cross {
  0% { transform:translate(.9px,-.6px); opacity:.26; }
  54% { transform:translate(-.6px,.5px); opacity:.4; }
  100% { transform:translate(.2px,.8px); opacity:.3; }
}

@keyframes lgs2-bulb-plume-primary {
  0% { transform:scale(.96,1.01) translate(-.8px,-.2px); opacity:.52; }
  55% { transform:scale(1,1.045) translate(.3px,-1.1px); opacity:.74; }
  100% { transform:scale(.97,.995) translate(.7px,.2px); opacity:.58; }
}

@keyframes lgs2-bulb-plume-secondary {
  0% { transform:scale(.94,1.02) translate(.9px,.4px); opacity:.32; }
  48% { transform:scale(.98,1.05) translate(-.5px,-.8px); opacity:.52; }
  100% { transform:scale(.95,.99) translate(.2px,.6px); opacity:.38; }
}

@keyframes lgs2-solar-pulse {
  0%,100% {
    opacity:.54;
    transform:scale(.972,.982) translate(-.35px,.25px);
    filter:saturate(.94) brightness(.9);
  }
  43%,57% {
    opacity:1;
    transform:scale(1.04,1.03) translate(.4px,-.35px);
    filter:saturate(1.36) brightness(1.25);
  }
}

@keyframes lgs2-solar-field-drift {
  0%,100% { transform:translate(-.6px,.2px) scale(1,.99); }
  33% { transform:translate(3.2px,-1.8px) scale(.98,1.025); }
  66% { transform:translate(-2.4px,-2.1px) scale(1.025,1); }
}

@keyframes lgs2-solar-cross-drift {
  0%,100% { transform:translate(.8px,-.5px) scale(1,1); }
  33% { transform:translate(-3px,1.9px) scale(1.03,.98); }
  66% { transform:translate(2.5px,2.1px) scale(.97,1.025); }
}

@keyframes lgs2-solar-primary-drift {
  0%,100% { transform:scale(.98,1.05) translate(-.8px,-.5px); }
  33% { transform:scale(1.03,.99) translate(2.1px,-1.6px); }
  66% { transform:scale(.96,1.04) translate(-2px,1.8px); }
}

@keyframes lgs2-solar-secondary-drift {
  0%,100% { transform:scale(.95,1.02) translate(1px,.5px); }
  33% { transform:scale(1.02,.97) translate(-2.4px,1.5px); }
  66% { transform:scale(.98,1.04) translate(2.2px,-1.8px); }
}

@keyframes lgs2-solar-pearl-drift {
  0%,100% { transform:translate(.5px,-.4px) scale(1,.98); opacity:.34; }
  33% { transform:translate(-2.8px,1.7px) scale(1.04,1); opacity:.5; }
  66% { transform:translate(2.6px,-1.9px) scale(.97,1.04); opacity:.4; }
}

@keyframes lgs2-bulb-rim-shimmer {
  0% { opacity:.3; }
  52% { opacity:.62; }
  100% { opacity:.42; }
}

@keyframes lgs2-bulb-lower-shimmer {
  0% { opacity:.48; }
  45% { opacity:.78; }
  100% { opacity:.58; }
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-icon--light .lgs2-icon-etch {
  color:#fff;
}

.lgs2-switch[data-active-theme="dark"]:is(:hover,:focus-visible) .lgs2-icon--dark .lgs2-icon-etch {
  color:#fff;
}

.lgs2-edge {
  fill: none;
  stroke-width: 1.35;
  transition: opacity var(--lgs2-duration) var(--lgs2-ease), filter 220ms ease;
}

.lgs2-edge.lgs2-state-light {
  filter: drop-shadow(0 9px 12px rgba(59, 70, 86, .4));
}

.lgs2-edge.lgs2-state-dark {
  stroke-width: 1.55;
  filter: drop-shadow(0 8px 10px rgba(0, 4, 10, .48));
}

/* The illuminated material catches the physical glass boundary in fragments.
   Two separated reflections preserve the clear orb instead of drawing a
   synthetic orange ring around it. */
.lgs2-edge-illumination {
  pointer-events:none;
  fill:none;
}

.lgs2-edge-catch {
  fill:none;
  stroke-linecap:round;
  stroke-width:1.15;
  opacity:.06;
  transition:opacity 760ms cubic-bezier(.4,0,.2,1), filter 900ms cubic-bezier(.4,0,.2,1);
}

.lgs2-edge-catch--lower {
  stroke-width:1.35;
  opacity:.08;
}

.lgs2-edge-catch--side {
  stroke-width:1.25;
  opacity:.07;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-edge-illumination--light .lgs2-edge-catch--upper {
  opacity:.7;
  filter:drop-shadow(0 0 1.5px rgba(255,165,72,.22));
  animation:lgs2-edge-catch-upper 4.3s ease-in-out 1.15s infinite alternate;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-edge-illumination--light .lgs2-edge-catch--lower {
  opacity:.9;
  filter:drop-shadow(0 0 1.8px rgba(255,130,48,.28));
  animation:lgs2-edge-catch-lower 5.1s ease-in-out 1.45s infinite alternate;
}

.lgs2-switch[data-active-theme="light"]:is(:hover,:focus-visible) .lgs2-edge-illumination--light .lgs2-edge-catch--side {
  opacity:.78;
  filter:drop-shadow(0 0 2px rgba(255,145,54,.26));
  animation:lgs2-edge-catch-upper 4.8s ease-in-out 1.3s infinite alternate-reverse;
}

.lgs2-switch[data-active-theme="dark"]:is(:hover,:focus-visible) .lgs2-edge-illumination--dark .lgs2-edge-catch--upper {
  opacity:.7;
  filter:drop-shadow(0 0 1.4px rgba(255,148,58,.18));
  animation:lgs2-edge-catch-upper 4.7s ease-in-out 1.25s infinite alternate;
}

.lgs2-switch[data-active-theme="dark"]:is(:hover,:focus-visible) .lgs2-edge-illumination--dark .lgs2-edge-catch--lower {
  opacity:.86;
  filter:drop-shadow(0 0 1.7px rgba(255,112,38,.22));
  animation:lgs2-edge-catch-lower 5.4s ease-in-out 1.6s infinite alternate;
}

.lgs2-switch[data-active-theme="dark"]:is(:hover,:focus-visible) .lgs2-edge-illumination--dark .lgs2-edge-catch--side {
  opacity:.8;
  filter:drop-shadow(0 0 2px rgba(255,116,38,.24));
  animation:lgs2-edge-catch-upper 5s ease-in-out 1.4s infinite alternate-reverse;
}

@keyframes lgs2-edge-catch-upper {
  0% { opacity:.34; }
  47% { opacity:.62; }
  100% { opacity:.46; }
}

@keyframes lgs2-edge-catch-lower {
  0% { opacity:.46; }
  58% { opacity:.74; }
  100% { opacity:.56; }
}

.lgs2-switch:hover .lgs2-edge {
  filter: brightness(1.18) drop-shadow(0 8px 11px rgba(83, 125, 174, .42));
}

.lgs2-switch:hover .lgs2-track rect {
  filter: brightness(1.045);
}

/* Light appearance reverses its former rest/hover emphasis: the selected
   state carries the luminous material, while hover settles it momentarily.
   The icon glow is a separate layer beneath the unfiltered sun glyph. */
.lgs2-switch[data-active-theme="light"] .lgs2-edge.lgs2-state-light {
  filter:brightness(1.18) drop-shadow(0 8px 11px rgba(83,125,174,.42));
}

.lgs2-switch[data-active-theme="light"] .lgs2-track rect {
  filter:brightness(1.045);
}

.lgs2-switch[data-active-theme="light"]:hover .lgs2-edge.lgs2-state-light {
  filter:drop-shadow(0 9px 12px rgba(59,70,86,.4));
}

.lgs2-switch[data-active-theme="light"]:hover .lgs2-track rect {
  filter:none;
}

.lgs2-switch[data-transition="to-dark"] .lgs2-optical-light,
.lgs2-switch[data-transition="to-light"] .lgs2-optical-dark {
  animation: lgs2-optical-out var(--lgs2-duration) linear both;
}

.lgs2-switch[data-transition="to-dark"] .lgs2-optical-dark,
.lgs2-switch[data-transition="to-light"] .lgs2-optical-light {
  animation: lgs2-optical-in var(--lgs2-duration) linear both;
}

@keyframes lgs2-optical-out {
  0%, 40% { opacity: 1; }
  44% { opacity: .96; }
  48% { opacity: .75; }
  50% { opacity: .5; }
  52% { opacity: .25; }
  56% { opacity: .04; }
  60%, 100% { opacity: 0; }
}

@keyframes lgs2-optical-in {
  0%, 40% { opacity: 0; }
  44% { opacity: .04; }
  48% { opacity: .25; }
  50% { opacity: .5; }
  52% { opacity: .75; }
  56% { opacity: .96; }
  60%, 100% { opacity: 1; }
}

@media (max-width: 720px) {
  .color-theme-toggle-stack {
    gap: 2px;
  }

  .lgs2-switch,
  .color-theme-toggle-stack > .lgs-switch {
    transform: scale(.86);
    transform-origin: right center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .lgs2-lens-cutout,
  .lgs2-lens-shell,
  .lgs2-state,
  .lgs2-optical,
  .lgs2-edge,
  .lgs2-edge-catch,
  .lgs2-bulb-glow,
  .lgs2-bulb-glow path {
    transition-duration: 180ms;
  }

  .lgs2-switch[data-transition] .lgs2-optical {
    animation: none;
  }

  .lgs2-switch:is(:hover,:focus-visible) :is(.lgs2-bulb-glow,.lgs2-bulb-glow path,.lgs2-edge-catch) {
    animation:none;
  }
}

/*
  Legacy Color page toggle is preserved above through the shared
  .page-theme-toggle / .page-theme-btn rules. The water-theme-toggle below is
  the Color page Living Glass / Live Water study.
*/
body[data-route="foundation-color"] .water-theme-toggle {
  --water-toggle-width: 128px;
  --water-toggle-height: 42px;
  --water-drop-width: 52px;
  --water-drop-height: 42px;
  --water-drop-travel: calc(var(--water-toggle-width) - var(--water-drop-width));
  --water-track-surface:
    radial-gradient(ellipse at 50% 0%, rgba(255, 255, 255, .62), transparent 55%),
    radial-gradient(ellipse at 50% 118%, rgba(64, 82, 102, .18), transparent 42%),
    linear-gradient(180deg, rgba(230, 235, 242, .74), rgba(151, 160, 174, .72)),
    rgba(164, 173, 185, .82);
  --water-track-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .66),
    inset 0 -1px 0 rgba(54, 62, 74, .18),
    inset 0 0 0 1px rgba(255, 255, 255, .16),
    0 8px 18px rgba(38, 50, 65, .12);
  --water-track-label: rgba(255, 255, 255, .92);
  --water-track-hover: rgba(255, 255, 255, .34);
  --water-drop-surface:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .72), rgba(255, 255, 255, .26) 20%, transparent 42%),
    radial-gradient(circle at 72% 76%, rgba(71, 190, 242, .18), transparent 32%),
    radial-gradient(circle at 28% 82%, rgba(255, 255, 255, .20), transparent 34%),
    linear-gradient(145deg, rgba(247, 252, 255, .34), rgba(124, 139, 158, .18) 58%, rgba(255, 255, 255, .12)),
    rgba(194, 211, 226, .24);
  --water-drop-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .46),
    inset 5px 7px 14px rgba(255, 255, 255, .10),
    inset -8px -10px 18px rgba(35, 49, 65, .14),
    0 8px 18px rgba(38, 51, 67, .15),
    0 0 16px rgba(255, 255, 255, .10);
  --water-drop-icon: rgba(255, 255, 255, .96);
  --water-drop-icon-filter:
    drop-shadow(0 1px 1px rgba(45, 58, 78, .48))
    drop-shadow(0 0 10px rgba(45, 72, 102, .24))
    drop-shadow(0 0 14px rgba(255, 255, 255, .48));
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  width: var(--water-toggle-width);
  height: var(--water-toggle-height);
  padding: 0;
  overflow: visible;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  isolation: isolate;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

body[data-route="foundation-color"][data-color-theme="dark"] .water-theme-toggle {
  --water-track-surface:
    radial-gradient(ellipse at 52% 0%, rgba(255, 255, 255, .08), transparent 54%),
    radial-gradient(ellipse at 50% 118%, rgba(42, 123, 158, .14), transparent 44%),
    linear-gradient(180deg, rgba(35, 40, 48, .84), rgba(8, 11, 16, .80)),
    rgba(10, 13, 18, .82);
  --water-track-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    inset 0 -1px 0 rgba(0, 0, 0, .46),
    0 8px 18px rgba(0, 0, 0, .26);
  --water-track-label: rgba(238, 242, 249, .52);
  --water-track-hover: rgba(214, 238, 255, .12);
  --water-drop-surface:
    radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08) 22%, transparent 43%),
    radial-gradient(circle at 72% 78%, rgba(66, 177, 227, .16), transparent 34%),
    radial-gradient(circle at 25% 82%, rgba(255, 255, 255, .10), transparent 34%),
    linear-gradient(145deg, rgba(76, 84, 98, .30), rgba(17, 22, 31, .22) 58%, rgba(105, 126, 148, .10)),
    rgba(34, 43, 55, .24);
  --water-drop-shadow:
    inset 0 1px 1px rgba(255, 255, 255, .12),
    inset 5px 7px 14px rgba(255, 255, 255, .04),
    inset -8px -10px 18px rgba(0, 0, 0, .24),
    0 8px 18px rgba(0, 0, 0, .28),
    0 0 18px rgba(140, 213, 255, .05);
  --water-drop-icon: rgba(255, 255, 255, .98);
  --water-drop-icon-filter:
    drop-shadow(0 0 13px rgba(255, 255, 255, .72))
    drop-shadow(0 0 24px rgba(255, 255, 255, .26));
}

body[data-route="foundation-color"] .water-theme-track,
body[data-route="foundation-color"] .water-theme-flow,
body[data-route="foundation-color"] .water-theme-drop,
body[data-route="foundation-color"] .water-theme-label {
  pointer-events: none;
}

body[data-route="foundation-color"] .water-theme-track {
  position: absolute;
  inset: 6px 5px;
  z-index: 0;
  border-radius: 999px;
  background: var(--water-track-surface);
  box-shadow: var(--water-track-shadow);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

body[data-route="foundation-color"] .water-theme-flow {
  position: absolute;
  top: 12px;
  left: 36px;
  z-index: 1;
  width: 48px;
  height: 18px;
  border-radius: 999px;
  opacity: 0;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, .46), rgba(255, 255, 255, .18) 34%, transparent 70%);
  filter: blur(8px) saturate(112%);
  transform: scaleX(.34);
  transform-origin: 18% 50%;
  transition:
    opacity 520ms ease,
    transform 620ms cubic-bezier(.22, 1, .36, 1),
    transform-origin 620ms cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform, filter;
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-flow {
  transform-origin: 82% 50%;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-flow {
  opacity: .46;
  transform: scaleX(1);
  animation: water-toggle-flow-pulse 920ms cubic-bezier(.34, 0, .2, 1) both;
}

body[data-route="foundation-color"] .water-theme-label {
  position: absolute;
  inset-block: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--water-track-label);
  opacity: 0;
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .20);
  transition:
    opacity 240ms ease,
    transform 520ms cubic-bezier(.22, 1, .36, 1);
}

body[data-route="foundation-color"] .water-theme-label-light {
  right: 15px;
  transform: translateX(-6px);
}

body[data-route="foundation-color"] .water-theme-label-dark {
  left: 16px;
  transform: translateX(6px);
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="light"] .water-theme-label-light,
body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-label-dark {
  opacity: 1;
  transform: translateX(0);
}

body[data-route="foundation-color"] .water-theme-drop {
  position: absolute;
  top: calc((var(--water-toggle-height) - var(--water-drop-height)) / 2);
  left: 0;
  z-index: 2;
  width: var(--water-drop-width);
  height: var(--water-drop-height);
  overflow: hidden;
  border-radius: 64% 38% 50% 64% / 54% 42% 58% 46%;
  clip-path: path("M 2 21 C 2 8 14 1 28 1 C 39 1 47 8 52 21 C 47 34 39 41 28 41 C 14 41 2 34 2 21 Z");
  background: var(--water-drop-surface);
  box-shadow: var(--water-drop-shadow);
  backdrop-filter: blur(14px) saturate(136%) contrast(104%);
  -webkit-backdrop-filter: blur(14px) saturate(136%) contrast(104%);
  transform: translate3d(0, 0, 0);
  transition:
    transform 900ms cubic-bezier(.34, 0, .2, 1),
    clip-path 900ms cubic-bezier(.34, 0, .2, 1),
    border-radius 900ms cubic-bezier(.34, 0, .2, 1),
    filter 420ms ease,
    box-shadow 360ms ease,
    background 360ms ease;
  will-change: transform, filter;
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-drop {
  transform: translate3d(var(--water-drop-travel), 0, 0);
  border-radius: 38% 64% 64% 50% / 42% 54% 46% 58%;
  clip-path: path("M 50 21 C 50 34 38 41 24 41 C 13 41 5 34 0 21 C 5 8 13 1 24 1 C 38 1 50 8 50 21 Z");
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-drop {
  filter: saturate(116%) brightness(106%);
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing[data-active-theme="light"] .water-theme-drop {
  animation: water-toggle-drop-to-light 920ms cubic-bezier(.34, 0, .2, 1) both;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing[data-active-theme="dark"] .water-theme-drop {
  animation: water-toggle-drop-to-dark 920ms cubic-bezier(.34, 0, .2, 1) both;
}

body[data-route="foundation-color"] .water-theme-drop::before,
body[data-route="foundation-color"] .water-theme-drop::after {
  content: "";
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

body[data-route="foundation-color"] .water-theme-drop::before {
  inset: 4px;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, .38), transparent 27%),
    radial-gradient(circle at 74% 78%, rgba(86, 203, 247, .15), transparent 31%),
    linear-gradient(145deg, rgba(255, 255, 255, .12), transparent 54%);
  filter: blur(2.2px);
  opacity: .58;
  transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.04);
  transform-origin: 50% 50%;
  animation: water-drop-caustic-drift 12s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

body[data-route="foundation-color"] .water-theme-drop::after {
  inset: 6px 14px auto 11px;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(95deg, transparent, rgba(255, 255, 255, .46) 46%, transparent);
  filter: blur(2px);
  opacity: .32;
  transform: translate3d(-6%, 0, 0) rotate(-4deg);
  transform-origin: 50% 50%;
  animation: water-drop-sheen-drift 8.5s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-drop::before {
  animation:
    water-drop-caustic-drift 12s ease-in-out infinite alternate,
    water-drop-caustic-pulse 920ms cubic-bezier(.34, 0, .2, 1) both;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-drop::after {
  animation:
    water-drop-sheen-drift 8.5s ease-in-out infinite alternate,
    water-drop-sheen-pulse 920ms cubic-bezier(.34, 0, .2, 1) both;
}

body[data-route="foundation-color"] .water-theme-drop-icon {
  position: absolute;
  inset: 0;
  margin: auto;
  z-index: 2;
  width: 18px;
  height: 18px;
  opacity: 0;
  background: var(--water-drop-icon);
  filter: var(--water-drop-icon-filter);
  transform: scale(.84) rotate(-8deg);
  transition:
    opacity 260ms ease,
    transform 520ms cubic-bezier(.22, 1, .36, 1);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

body[data-route="foundation-color"] .water-theme-drop-icon-light {
  -webkit-mask-image: url("../source/figma_icon_SVGs/ico_Sun-Light_outline.svg");
  mask-image: url("../source/figma_icon_SVGs/ico_Sun-Light_outline.svg");
}

body[data-route="foundation-color"] .water-theme-drop-icon-dark {
  -webkit-mask-image: url("../source/figma_icon_SVGs/ico_Moon-Dark_outline.svg");
  mask-image: url("../source/figma_icon_SVGs/ico_Moon-Dark_outline.svg");
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="light"] .water-theme-drop-icon-light,
body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-drop-icon-dark {
  opacity: 1;
  transform: scale(1) rotate(0deg);
}

body[data-route="foundation-color"] .water-theme-toggle:hover .water-theme-track {
  box-shadow:
    var(--water-track-shadow),
    inset 0 0 0 999px var(--water-track-hover);
}

body[data-route="foundation-color"] .water-theme-toggle:hover .water-theme-flow {
  opacity: .20;
  transform: scaleX(.58);
}

body[data-route="foundation-color"] .water-theme-toggle:hover .water-theme-label {
  color: rgba(255, 255, 255, .96);
}

body[data-route="foundation-color"] .water-theme-toggle:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--color-focus-ring) 72%, transparent);
  outline-offset: 5px;
}

@keyframes water-toggle-drop-to-light {
  0% {
    transform: translate3d(var(--water-drop-travel), 0, 0) scale(1);
    border-radius: 38% 64% 64% 50% / 42% 54% 46% 58%;
    clip-path: path("M 50 21 C 50 34 38 41 24 41 C 13 41 5 34 0 21 C 5 8 13 1 24 1 C 38 1 50 8 50 21 Z");
    filter: saturate(104%) brightness(100%);
  }

  28% {
    transform: translate3d(calc(var(--water-drop-travel) - (var(--water-drop-travel) / 3)), 0, 0) scale(.92);
    border-radius: 54% 54% 54% 54% / 48% 48% 52% 52%;
    clip-path: path("M 4 21 C 4 9 15 2 27 2 C 39 2 48 9 50 21 C 48 33 39 40 27 40 C 15 40 4 33 4 21 Z");
    filter: saturate(110%) brightness(104%);
  }

  46% {
    transform: translate3d(calc(var(--water-drop-travel) / 2), 0, 0) scale(.82);
    border-radius: 56% 56% 56% 56% / 48% 48% 52% 52%;
    clip-path: path("M 6 21 C 6 10 16 3 27 3 C 38 3 46 10 48 21 C 46 32 38 39 27 39 C 16 39 6 32 6 21 Z");
    filter: saturate(116%) brightness(107%);
  }

  62% {
    transform: translate3d(calc(var(--water-drop-travel) / 3), 0, 0) scale(.88);
    border-radius: 58% 48% 54% 58% / 50% 46% 54% 50%;
    clip-path: path("M 3 21 C 3 9 15 2 28 2 C 39 2 47 8 51 21 C 47 34 39 40 28 40 C 15 40 3 33 3 21 Z");
    filter: saturate(112%) brightness(105%);
  }

  82% {
    transform: translate3d(calc(var(--water-drop-travel) / 8), 0, 0) scale(.96);
    border-radius: 62% 40% 52% 62% / 53% 43% 57% 47%;
    clip-path: path("M 2 21 C 2 8 14 1 28 1 C 39 1 47 8 52 21 C 47 34 39 41 28 41 C 14 41 2 34 2 21 Z");
    filter: saturate(106%) brightness(102%);
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 64% 38% 50% 64% / 54% 42% 58% 46%;
    clip-path: path("M 2 21 C 2 8 14 1 28 1 C 39 1 47 8 52 21 C 47 34 39 41 28 41 C 14 41 2 34 2 21 Z");
    filter: saturate(104%) brightness(100%);
  }
}

@keyframes water-toggle-drop-to-dark {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 64% 38% 50% 64% / 54% 42% 58% 46%;
    clip-path: path("M 2 21 C 2 8 14 1 28 1 C 39 1 47 8 52 21 C 47 34 39 41 28 41 C 14 41 2 34 2 21 Z");
    filter: saturate(104%) brightness(100%);
  }

  28% {
    transform: translate3d(calc(var(--water-drop-travel) / 3), 0, 0) scale(.92);
    border-radius: 54% 54% 54% 54% / 48% 48% 52% 52%;
    clip-path: path("M 4 21 C 4 9 15 2 27 2 C 39 2 48 9 50 21 C 48 33 39 40 27 40 C 15 40 4 33 4 21 Z");
    filter: saturate(110%) brightness(104%);
  }

  46% {
    transform: translate3d(calc(var(--water-drop-travel) / 2), 0, 0) scale(.82);
    border-radius: 56% 56% 56% 56% / 48% 48% 52% 52%;
    clip-path: path("M 6 21 C 6 10 16 3 27 3 C 38 3 46 10 48 21 C 46 32 38 39 27 39 C 16 39 6 32 6 21 Z");
    filter: saturate(116%) brightness(107%);
  }

  62% {
    transform: translate3d(calc(var(--water-drop-travel) - (var(--water-drop-travel) / 3)), 0, 0) scale(.88);
    border-radius: 48% 58% 58% 54% / 46% 50% 50% 54%;
    clip-path: path("M 49 21 C 49 33 37 40 24 40 C 13 40 5 34 1 21 C 5 8 13 2 24 2 C 37 2 49 9 49 21 Z");
    filter: saturate(112%) brightness(105%);
  }

  82% {
    transform: translate3d(calc(var(--water-drop-travel) - (var(--water-drop-travel) / 8)), 0, 0) scale(.96);
    border-radius: 40% 62% 62% 52% / 43% 53% 47% 57%;
    clip-path: path("M 50 21 C 50 34 38 41 24 41 C 13 41 5 34 0 21 C 5 8 13 1 24 1 C 38 1 50 8 50 21 Z");
    filter: saturate(106%) brightness(102%);
  }

  100% {
    transform: translate3d(var(--water-drop-travel), 0, 0) scale(1);
    border-radius: 38% 64% 64% 50% / 42% 54% 46% 58%;
    clip-path: path("M 50 21 C 50 34 38 41 24 41 C 13 41 5 34 0 21 C 5 8 13 1 24 1 C 38 1 50 8 50 21 Z");
    filter: saturate(104%) brightness(100%);
  }
}

@keyframes water-toggle-flow-pulse {
  0% {
    opacity: 0;
    transform: scaleX(.24);
    filter: blur(8px) saturate(112%);
  }

  34% {
    opacity: .34;
    transform: scaleX(.72);
    filter: blur(8px) saturate(122%);
  }

  56% {
    opacity: .48;
    transform: scaleX(.94);
    filter: blur(9px) saturate(128%);
  }

  78% {
    opacity: .24;
    transform: scaleX(.62);
    filter: blur(8px) saturate(118%);
  }

  100% {
    opacity: 0;
    transform: scaleX(.18);
    filter: blur(7px) saturate(112%);
  }
}

@keyframes water-drop-caustic-drift {
  0% {
    transform: translate3d(-3%, -2%, 0) rotate(-5deg) scale(1.04);
    opacity: .78;
  }

  47% {
    transform: translate3d(3%, 2%, 0) rotate(7deg) scale(1.09);
    opacity: .92;
  }

  100% {
    transform: translate3d(-1%, 3%, 0) rotate(-3deg) scale(1.06);
    opacity: .82;
  }
}

@keyframes water-drop-sheen-drift {
  0% {
    transform: translate3d(-7%, 0, 0) rotate(-5deg);
    opacity: .38;
  }

  52% {
    transform: translate3d(7%, 1px, 0) rotate(4deg);
    opacity: .52;
  }

  100% {
    transform: translate3d(-2%, -1px, 0) rotate(-2deg);
    opacity: .42;
  }
}

@keyframes water-drop-caustic-pulse {
  0% {
    transform: translate3d(-2%, -1%, 0) rotate(0deg) scale(1.04);
    opacity: .82;
  }

  45% {
    transform: translate3d(6%, 4%, 0) rotate(18deg) scale(1.20);
    opacity: .98;
  }

  100% {
    transform: translate3d(1%, 0, 0) rotate(6deg) scale(1.06);
    opacity: .84;
  }
}

@keyframes water-drop-sheen-pulse {
  0% {
    transform: translate3d(-8%, 0, 0) rotate(-5deg);
    opacity: .34;
  }

  45% {
    transform: translate3d(14%, 1px, 0) rotate(9deg);
    opacity: .62;
  }

  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
    opacity: .42;
  }
}

/* Color page theme switch — rebuilt as a beveled pill plus a clear glass lens.
   The label and filled icon belong to the pill; the lens is a separate,
   translucent pane that slides over the icon and refracts the material below. */
body[data-route="foundation-color"] .water-theme-toggle {
  --water-toggle-width: 132px;
  --water-toggle-height: 44px;
  --water-drop-width: 58px;
  --water-drop-height: 58px;
  --water-drop-travel: calc(var(--water-toggle-width) - var(--water-drop-width));
  --water-track-label: rgba(255, 255, 255, .86);
  --water-track-hover: rgba(255, 255, 255, .16);
  --water-pill-surface:
    linear-gradient(180deg, rgba(246, 248, 250, .92), rgba(179, 183, 188, .88) 56%, rgba(149, 154, 161, .90)),
    rgba(190, 194, 199, .88);
  --water-pill-edge:
    inset 0 1px 1px rgba(255, 255, 255, .92),
    inset 0 -2px 3px rgba(84, 90, 99, .34),
    inset 0 0 0 1px rgba(255, 255, 255, .34),
    0 17px 34px rgba(93, 100, 111, .30),
    0 30px 54px rgba(93, 100, 111, .18);
  --water-pill-backlight: rgba(255, 255, 255, .48);
  --water-label-fill: rgba(255, 255, 255, .88);
  --water-label-shadow:
    0 1px 1px rgba(255, 255, 255, .42),
    0 -1px 1px rgba(74, 80, 88, .20);
  --water-lens-surface:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .56), transparent 28%),
    radial-gradient(circle at 86% 82%, rgba(119, 221, 255, .16), transparent 24%),
    linear-gradient(145deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .07) 48%, rgba(210, 219, 229, .16)),
    rgba(255, 255, 255, .10);
  --water-lens-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .62),
    inset 0 1px 1px rgba(255, 255, 255, .46),
    inset -9px -10px 22px rgba(70, 78, 88, .16),
    inset 8px 9px 18px rgba(255, 255, 255, .13),
    0 10px 28px rgba(69, 78, 91, .22),
    0 0 26px rgba(255, 255, 255, .16);
  --water-icon-fill: rgba(255, 255, 255, .98);
  --water-icon-filter:
    drop-shadow(0 0 7px rgba(255, 255, 255, .74))
    drop-shadow(0 0 15px rgba(255, 255, 255, .36));
  width: var(--water-toggle-width);
  height: var(--water-toggle-height);
  overflow: visible;
}

body[data-route="foundation-color"][data-color-theme="dark"] .water-theme-toggle {
  --water-track-label: rgba(190, 192, 198, .78);
  --water-track-hover: rgba(255, 255, 255, .07);
  --water-pill-surface:
    linear-gradient(180deg, rgba(51, 55, 61, .96), rgba(29, 32, 37, .94) 56%, rgba(18, 20, 24, .96)),
    rgba(25, 28, 33, .94);
  --water-pill-edge:
    inset 0 1px 1px rgba(255, 255, 255, .16),
    inset 0 -2px 3px rgba(0, 0, 0, .58),
    inset 0 0 0 1px rgba(255, 255, 255, .06),
    0 17px 34px rgba(0, 0, 0, .30),
    0 30px 54px rgba(0, 0, 0, .20);
  --water-pill-backlight: rgba(165, 178, 196, .11);
  --water-label-fill: rgba(185, 187, 193, .74);
  --water-label-shadow:
    0 1px 1px rgba(255, 255, 255, .08),
    0 -1px 1px rgba(0, 0, 0, .42);
  --water-lens-surface:
    radial-gradient(circle at 24% 16%, rgba(255, 255, 255, .18), transparent 30%),
    radial-gradient(circle at 84% 82%, rgba(64, 169, 215, .12), transparent 25%),
    linear-gradient(145deg, rgba(255, 255, 255, .11), rgba(255, 255, 255, .035) 48%, rgba(122, 143, 162, .08)),
    rgba(255, 255, 255, .045);
  --water-lens-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .20),
    inset 0 1px 1px rgba(255, 255, 255, .14),
    inset -9px -10px 22px rgba(0, 0, 0, .22),
    inset 8px 9px 18px rgba(255, 255, 255, .05),
    0 10px 28px rgba(0, 0, 0, .30),
    0 0 24px rgba(185, 213, 238, .08);
  --water-icon-fill: rgba(255, 255, 255, .98);
  --water-icon-filter:
    drop-shadow(0 0 8px rgba(255, 255, 255, .70))
    drop-shadow(0 0 18px rgba(255, 255, 255, .28));
}

body[data-route="foundation-color"] .water-theme-track {
  position: absolute;
  inset: 5px 3px;
  z-index: 1;
  border-radius: 999px;
  background: var(--water-pill-surface);
  box-shadow: var(--water-pill-edge);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition:
    background 620ms ease,
    box-shadow 620ms ease,
    filter 620ms ease;
}

body[data-route="foundation-color"] .water-theme-track::before,
body[data-route="foundation-color"] .water-theme-track::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

body[data-route="foundation-color"] .water-theme-track::before {
  inset: -16px -18px -22px;
  z-index: -1;
  background:
    radial-gradient(ellipse at 50% 14%, var(--water-pill-backlight), transparent 52%),
    radial-gradient(ellipse at 50% 115%, rgba(52, 59, 70, .24), transparent 60%);
  filter: blur(16px);
  opacity: .78;
}

body[data-route="foundation-color"] .water-theme-track::after {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .32), transparent 34%),
    linear-gradient(0deg, rgba(0, 0, 0, .18), transparent 30%);
  opacity: .56;
}

body[data-route="foundation-color"] .water-theme-flow {
  position: absolute;
  inset: 8px 7px;
  z-index: 0;
  width: auto;
  height: auto;
  opacity: .72;
  border-radius: 999px;
  background: radial-gradient(ellipse at 50% 50%, var(--water-pill-backlight), transparent 70%);
  filter: blur(18px);
  transform: none;
  animation: none;
  transition: opacity 620ms ease, filter 620ms ease;
}

body[data-route="foundation-color"] .water-theme-label {
  z-index: 3;
  font-size: 13px;
  font-weight: 650;
  letter-spacing: -.02em;
  color: var(--water-label-fill);
  text-shadow: var(--water-label-shadow);
  transition:
    opacity 360ms ease,
    transform 760ms cubic-bezier(.19, 1, .22, 1),
    color 620ms ease,
    text-shadow 620ms ease;
}

body[data-route="foundation-color"] .water-theme-label-dark {
  left: 23px;
  transform: translateX(5px);
}

body[data-route="foundation-color"] .water-theme-label-light {
  right: 22px;
  transform: translateX(-5px);
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="light"] .water-theme-label-light,
body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-label-dark {
  opacity: 1;
  transform: translateX(0);
}

body[data-route="foundation-color"] .water-theme-drop {
  top: calc((var(--water-toggle-height) - var(--water-drop-height)) / 2);
  left: 0;
  z-index: 4;
  width: var(--water-drop-width);
  height: var(--water-drop-height);
  overflow: hidden;
  border-radius: 22px;
  clip-path: none;
  background: var(--water-lens-surface);
  box-shadow: var(--water-lens-shadow);
  backdrop-filter: blur(12px) saturate(145%) contrast(112%);
  -webkit-backdrop-filter: blur(12px) saturate(145%) contrast(112%);
  transform: translate3d(0, 0, 0);
  transition:
    transform 1040ms cubic-bezier(.19, 1, .22, 1),
    border-radius 1040ms cubic-bezier(.19, 1, .22, 1),
    background 620ms ease,
    box-shadow 620ms ease,
    filter 620ms ease;
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-drop {
  transform: translate3d(var(--water-drop-travel), 0, 0);
  border-radius: 22px;
  clip-path: none;
}

body[data-route="foundation-color"] .water-theme-drop::before,
body[data-route="foundation-color"] .water-theme-drop::after {
  content: "";
  position: absolute;
  border-radius: 18px;
  pointer-events: none;
}

body[data-route="foundation-color"] .water-theme-drop::before {
  inset: 1px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 58 58' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.5 8.5 C16 2.2 29.5 1.8 40 7.9 C48.4 12.8 54.1 23 54.1 34 C54.1 47.5 43.8 56 29 56 C14.4 56 4 47.5 4 33.4 C4 22.3 5.1 13.4 8.5 8.5' stroke-opacity='.18' stroke-width='1'/%3E%3Cpath d='M9.2 20.6 C13.4 12.1 22.5 9.8 33.6 10.2 L42.5 10.5 C47.7 10.6 51.4 6.6 53 2.4' stroke-opacity='.54' stroke-width='1.32'/%3E%3Cpath d='M8.6 31.2 C8.6 24.1 13.5 19.7 21.4 19.7 L38.2 19.7 C47.8 19.7 53.1 25.2 53.1 33.2 C53.1 41.3 47.4 47 38.1 47 L22.2 47 C14.3 47 8.9 42.3 8.6 35.7' stroke-opacity='.31' stroke-width='1.16'/%3E%3Cpath d='M10.3 43.4 C14.5 51.4 24.2 53.8 34.2 50.9 C42 48.6 47.8 43.9 51.4 38.2' stroke-opacity='.28' stroke-width='1.16'/%3E%3Cpath d='M13.7 49.5 C18.2 53.3 25 54.4 31.4 52.9' stroke-opacity='.18' stroke-width='1.05'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
  box-shadow: none;
  filter:
    drop-shadow(0 0 1px rgba(255, 255, 255, .26))
    drop-shadow(0 0 7px rgba(255, 255, 255, .10));
  opacity: .78;
  transform: none;
  animation: none;
  mix-blend-mode: screen;
}

body[data-route="foundation-color"] .water-theme-drop::after {
  inset: 0;
  height: auto;
  background:
    radial-gradient(circle at 80% 16%, rgba(255, 232, 174, .76), rgba(255, 232, 174, .22) 3.5%, transparent 8.5%),
    radial-gradient(circle at 82% 78%, rgba(74, 218, 255, .68), rgba(74, 218, 255, .22) 4%, transparent 10%),
    radial-gradient(ellipse 46% 72% at 23% 50%, rgba(255, 255, 255, .19), transparent 61%),
    radial-gradient(ellipse 62% 28% at 57% 18%, rgba(255, 255, 255, .18), transparent 62%),
    radial-gradient(ellipse 70% 24% at 52% 84%, rgba(255, 255, 255, .13), transparent 64%);
  filter: blur(1.05px);
  opacity: .58;
  transform: none;
  animation: water-lens-sheen-drift 10s ease-in-out infinite alternate;
  mix-blend-mode: screen;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-drop {
  animation: water-lens-slide-to-light 1040ms cubic-bezier(.19, 1, .22, 1) both;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing[data-active-theme="light"] .water-theme-drop {
  animation: water-lens-slide-to-light 1040ms cubic-bezier(.19, 1, .22, 1) both;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing[data-active-theme="dark"] .water-theme-drop {
  animation: water-lens-slide-to-dark 1040ms cubic-bezier(.19, 1, .22, 1) both;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-drop::before {
  animation: none;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-drop::after {
  animation: water-lens-sheen-drift 10s ease-in-out infinite alternate;
}

body[data-route="foundation-color"] .water-theme-toggle.is-morphing .water-theme-track {
  animation: water-pill-breathe 1040ms cubic-bezier(.19, 1, .22, 1) both;
}

body[data-route="foundation-color"] .water-theme-drop-icon {
  z-index: 2;
  width: 22px;
  height: 22px;
  background: var(--water-icon-fill);
  filter: var(--water-icon-filter);
  transform: scale(.94);
  transition:
    opacity 360ms ease,
    transform 820ms cubic-bezier(.19, 1, .22, 1),
    filter 620ms ease;
}

body[data-route="foundation-color"] .water-theme-drop-icon-light {
  -webkit-mask-image: url("../source/figma_icon_SVGs/ico_Sun-Light_filled.svg");
  mask-image: url("../source/figma_icon_SVGs/ico_Sun-Light_filled.svg");
}

body[data-route="foundation-color"] .water-theme-drop-icon-dark {
  -webkit-mask-image: url("../source/figma_icon_SVGs/ico_Moon-Dark_filled.svg");
  mask-image: url("../source/figma_icon_SVGs/ico_Moon-Dark_filled.svg");
}

body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="light"] .water-theme-drop-icon-light,
body[data-route="foundation-color"] .water-theme-toggle[data-active-theme="dark"] .water-theme-drop-icon-dark {
  opacity: 1;
  transform: scale(1);
}

body[data-route="foundation-color"] .water-theme-toggle:hover .water-theme-track {
  filter: brightness(1.04);
  box-shadow:
    var(--water-pill-edge),
    inset 0 0 0 999px var(--water-track-hover);
}

body[data-route="foundation-color"] .water-theme-toggle:hover .water-theme-flow {
  opacity: .92;
  filter: blur(20px);
  transform: none;
}

body[data-route="foundation-color"] .water-theme-toggle:hover .water-theme-drop {
  filter: brightness(1.05) saturate(108%);
}

@keyframes water-lens-slide-to-light {
  0% {
    transform: translate3d(var(--water-drop-travel), 0, 0) scale(1);
    border-radius: 22px;
  }

  42% {
    transform: translate3d(calc(var(--water-drop-travel) / 2), 0, 0) scaleX(1.06) scaleY(.985);
    border-radius: 24px;
  }

  72% {
    transform: translate3d(calc(var(--water-drop-travel) / 7), 0, 0) scaleX(.992) scaleY(1.006);
    border-radius: 22px;
  }

  100% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 22px;
  }
}

@keyframes water-lens-slide-to-dark {
  0% {
    transform: translate3d(0, 0, 0) scale(1);
    border-radius: 22px;
  }

  42% {
    transform: translate3d(calc(var(--water-drop-travel) / 2), 0, 0) scaleX(1.06) scaleY(.985);
    border-radius: 24px;
  }

  72% {
    transform: translate3d(calc(var(--water-drop-travel) - (var(--water-drop-travel) / 7)), 0, 0) scaleX(.992) scaleY(1.006);
    border-radius: 22px;
  }

  100% {
    transform: translate3d(var(--water-drop-travel), 0, 0) scale(1);
    border-radius: 22px;
  }
}

@keyframes water-pill-breathe {
  0%, 100% {
    filter: brightness(1);
  }

  50% {
    filter: brightness(1.055) saturate(1.03);
  }
}

@keyframes water-lens-sheen-drift {
  0% {
    transform: translate3d(-7%, 0, 0);
    opacity: .44;
  }

  55% {
    transform: translate3d(8%, 1px, 0);
    opacity: .64;
  }

  100% {
    transform: translate3d(-2%, -1px, 0);
    opacity: .52;
  }
}

.color-foundation-hero :is(.eyebrow, h3, p),
.color-foundation-card h3,
.color-status-card h4 {
  margin: 0;
}

.color-foundation-hero h3 {
  max-width: 12ch;
  margin-top: var(--lds-space-2);
  color: var(--color-text-primary);
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(38px, 7vw, 88px);
  font-weight: 900;
  line-height: .95;
}

.color-foundation-hero p:not(.eyebrow) {
  max-width: 72ch;
  margin-top: var(--lds-space-5);
  color: var(--color-text-secondary);
  font-size: clamp(16px, 1.7vw, 19px);
  line-height: 1.55;
}

.color-foundation-hero > .eyebrow {
  color: var(--lds-direction-label-color, var(--color-text-muted));
}

.color-foundation-duo,
.color-foundation-grid-large,
.color-status-grid {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.color-foundation-duo {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.color-foundation-grid-large {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.color-foundation-card {
  display: grid;
  align-content: start;
  gap: var(--lds-space-4);
}

.color-foundation-card h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-heading);
}

.color-pearl-philosophy {
  position: relative;
  isolation: isolate;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr);
  gap: clamp(28px, 4vw, 56px);
  overflow: hidden;
}

.color-pearl-philosophy::before {
  content: "";
  position: absolute;
  inset: -32% -14% 36%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 92% 72% at -18% 8%, rgba(139, 101, 208, .14) 0%, rgba(139, 101, 208, .055) 42%, transparent 78%),
    radial-gradient(ellipse 88% 76% at 118% 28%, rgba(52, 177, 208, .12) 0%, rgba(52, 177, 208, .045) 44%, transparent 80%),
    radial-gradient(ellipse 96% 68% at -14% 94%, rgba(207, 69, 160, .10) 0%, transparent 78%),
    radial-gradient(ellipse 84% 74% at 112% 112%, rgba(171, 184, 90, .065) 0%, transparent 82%);
  filter: blur(44px) saturate(132%);
  opacity: .78;
}

.color-pearl-philosophy-copy {
  display: grid;
  align-content: start;
  gap: clamp(18px, 2vw, 24px);
  min-width: 0;
}

.color-pearl-philosophy-copy :is(h3, p),
.color-pearl-method :is(h4, p),
.color-pearl-specimen {
  margin: 0;
}

.color-pearl-philosophy-copy h3 {
  max-width: 14ch;
  color: var(--color-text-primary);
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(34px, 4.8vw, 64px);
  font-weight: 900;
  line-height: var(--lds-line-tight);
  letter-spacing: var(--lds-heading-tracking-display, -.012em);
}

.color-pearl-philosophy-copy > p:not(.eyebrow) {
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(17px, 1.35vw, 20px);
  font-weight: 450;
  line-height: 1.62;
  letter-spacing: -.006em;
}

.color-pearl-philosophy-copy > p.color-pearl-lede:not(.eyebrow) {
  max-width: 58ch;
  color: var(--color-text-primary);
  font-size: clamp(20px, 1.8vw, 24px);
  font-weight: var(--font-weight-semibold);
  line-height: 1.48;
  letter-spacing: -.012em;
}

.color-pearl-method {
  display: grid;
  align-content: start;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
  border-radius: var(--lds-radius-xl);
  background:
    radial-gradient(ellipse 110% 88% at -18% -12%, rgba(255, 255, 255, .48) 0%, rgba(255, 255, 255, .12) 52%, transparent 84%),
    radial-gradient(ellipse 96% 82% at 118% 112%, rgba(201, 232, 240, .18) 0%, transparent 82%),
    color-mix(in srgb, var(--color-bg-surface) 58%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .46),
    0 24px 54px rgba(15, 23, 42, .10);
  backdrop-filter: blur(24px) saturate(152%);
  -webkit-backdrop-filter: blur(24px) saturate(152%);
}

.color-pearl-method h4 {
  color: var(--color-text-primary);
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.04;
}

.color-pearl-method > p:not(.eyebrow) {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}

.color-pearl-angle-diagram {
  min-width: 0;
  margin-block: var(--lds-space-2);
  padding: var(--lds-space-4);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--color-page-lens-edge) 72%, transparent);
  border-radius: var(--lds-radius-lg);
  background:
    radial-gradient(ellipse 118% 92% at -24% -18%, rgba(139, 101, 208, .16) 0%, rgba(139, 101, 208, .04) 52%, transparent 84%),
    radial-gradient(ellipse 116% 96% at 124% 118%, rgba(52, 177, 208, .15) 0%, rgba(52, 177, 208, .035) 52%, transparent 84%),
    color-mix(in srgb, var(--color-bg-surface) 74%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .22),
    0 16px 34px rgba(15, 23, 42, .08);
}

.color-pearl-angle-diagram svg {
  display: block;
  width: 100%;
  height: auto;
  min-height: 216px;
  overflow: visible;
}

.color-pearl-angle-axis {
  fill: none;
  stroke: color-mix(in srgb, var(--color-text-muted) 62%, transparent);
  stroke-width: 1;
  stroke-dasharray: 2 6;
  vector-effect: non-scaling-stroke;
}

.color-pearl-angle-axis-y {
  opacity: .48;
}

.color-pearl-angle-ray {
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-dasharray: 6 7;
  vector-effect: non-scaling-stroke;
}

.color-pearl-angle-ray-38,
.color-pearl-angle-arc-38 {
  stroke: #44C4DC;
}

.color-pearl-angle-ray-71,
.color-pearl-angle-arc-71 {
  stroke: #8370CE;
}

.color-pearl-angle-ray-127,
.color-pearl-angle-arc-127 {
  stroke: #CD579C;
}

.color-pearl-angle-ray-161,
.color-pearl-angle-arc-161 {
  stroke: #A8B96A;
}

.color-pearl-angle-arc {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  opacity: .88;
  vector-effect: non-scaling-stroke;
}

.color-pearl-angle-origin {
  fill: var(--color-text-primary);
  stroke: color-mix(in srgb, var(--color-text-primary) 38%, transparent);
  stroke-width: 5;
}

.color-pearl-angle-point {
  fill: var(--color-text-primary);
  opacity: .88;
}

.color-pearl-angle-label,
.color-pearl-angle-reference {
  fill: var(--color-text-primary);
  font-family: var(--lds-font-mono);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.color-pearl-angle-reference {
  fill: var(--color-text-muted);
  font-size: 9px;
  font-weight: var(--font-weight-medium);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.color-pearl-method-list {
  display: grid;
  gap: 0;
  margin: 0;
}

.color-pearl-method-list div {
  display: grid;
  grid-template-columns: minmax(84px, .42fr) minmax(0, 1fr);
  gap: var(--lds-space-3);
  padding-block: var(--lds-space-3);
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 68%, transparent);
}

.color-pearl-method-list dt {
  color: var(--color-page-kicker);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.color-pearl-method-list dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.color-pearl-specimens {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-6);
}

.color-mode-philosophy {
  display: grid;
  gap: var(--lds-space-7);
}

.color-mode-heading {
  max-width: 78ch;
}

.color-mode-heading h3 {
  text-wrap: balance;
}

.color-mode-grid {
  display: grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(32px,5vw,64px);
}

.color-mode-story {
  position:relative;
  display:grid;
  min-width:0;
}

.color-mode-copy {
  position:relative;
  z-index:3;
  grid-area:1 / 1;
  align-self:center;
  justify-self:end;
  display:grid;
  gap:var(--lds-space-4);
  width:50%;
  padding:clamp(40px,6vw,84px);
}

.color-mode-story-dark .color-mode-copy {
  justify-self:start;
}

.color-mode-copy :is(h4, p) {
  margin: 0;
}

.color-mode-copy h4 {
  font-family:"Satoshi",var(--lds-font-family);
  font-size:clamp(38px,4.7vw,64px);
  font-weight:820;
  line-height:1.02;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
  text-wrap:balance;
}

.color-mode-copy > p:not(.eyebrow) {
  max-width:46ch;
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(17px, 1.25vw, 19px);
  font-weight: 450;
  line-height: 1.58;
  letter-spacing: -.005em;
}

.color-mode-heading .color-foundation-note {
  max-width: 66ch;
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.58;
}

.color-mode-philosophy {
  --color-pearl-specimen-diameter:clamp(280px,32vw,420px);
  --color-light-pearl-stage-surface:
    radial-gradient(ellipse 96% 88% at -14% -8%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .34) 48%, transparent 78%),
    radial-gradient(ellipse 92% 84% at 116% 4%, rgba(185, 231, 242, .72) 0%, rgba(185, 231, 242, .20) 48%, transparent 82%),
    radial-gradient(ellipse 88% 82% at -10% 112%, rgba(238, 199, 221, .60) 0%, rgba(238, 199, 221, .18) 50%, transparent 84%),
    radial-gradient(ellipse 94% 86% at 114% 108%, rgba(217, 231, 190, .50) 0%, rgba(217, 231, 190, .14) 52%, transparent 84%),
    radial-gradient(ellipse 120% 110% at 48% 52%, #F1F2F5 0%, #D9DCE3 62%, #C9CDD5 100%),
    #D9DCE3;
  --color-light-pearl-stage-aura:
    radial-gradient(ellipse 86% 72% at -16% 22%, rgba(166, 139, 221, .26) 0%, rgba(166, 139, 221, .08) 46%, transparent 82%),
    radial-gradient(ellipse 92% 76% at 118% 72%, rgba(70, 190, 218, .23) 0%, rgba(70, 190, 218, .07) 46%, transparent 82%),
    radial-gradient(ellipse 78% 68% at 72% -12%, rgba(255, 255, 255, .72) 0%, transparent 78%);
  --color-light-pearl-stage-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 30px 64px -30px rgba(51, 62, 82, .42),
    20px 24px 52px -38px rgba(57, 162, 188, .28),
    -18px 22px 48px -38px rgba(133, 96, 191, .24);
}

.color-pearl-specimen {
  position: relative;
  display: grid;
  grid-area:1 / 1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  place-items: center;
  min-height:clamp(640px,58vw,720px);
  margin:0;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius:0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .68),
    0 32px 72px -26px rgba(15, 23, 42, .28);
}

.color-pearl-specimen::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  filter: blur(16px) saturate(112%);
}

.color-pearl-specimen-light {
  background:var(--color-light-pearl-stage-surface);
  box-shadow:var(--color-light-pearl-stage-shadow);
}

.color-pearl-specimen-light::before {
  background:var(--color-light-pearl-stage-aura);
}

.color-pearl-specimen-dark {
  border-color: rgba(205, 225, 255, .22);
  background:
    radial-gradient(ellipse 104% 94% at -18% -14%, rgba(196, 215, 242, .20) 0%, rgba(196, 215, 242, .04) 50%, transparent 82%),
    radial-gradient(ellipse 102% 92% at 120% 2%, rgba(110, 75, 178, .18) 0%, rgba(110, 75, 178, .035) 52%, transparent 84%),
    radial-gradient(ellipse 100% 96% at 122% 112%, rgba(39, 164, 187, .15) 0%, rgba(39, 164, 187, .03) 52%, transparent 86%),
    radial-gradient(ellipse 106% 92% at -18% 116%, rgba(177, 50, 132, .12) 0%, rgba(177, 50, 132, .025) 54%, transparent 86%),
    #080A10;
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 255, .20),
    0 34px 72px -28px rgba(0, 0, 0, .72),
    22px 26px 58px -40px rgba(35, 168, 196, .34),
    -20px 24px 56px -40px rgba(133, 77, 190, .32);
}

.color-pearl-specimen-dark::before {
  background:
    radial-gradient(ellipse 108% 88% at -24% 14%, rgba(139, 91, 207, .18) 0%, rgba(139, 91, 207, .035) 54%, transparent 86%),
    radial-gradient(ellipse 106% 94% at 124% 42%, rgba(49, 194, 220, .16) 0%, rgba(49, 194, 220, .03) 52%, transparent 86%),
    radial-gradient(ellipse 102% 90% at -20% 96%, rgba(213, 68, 162, .13) 0%, rgba(213, 68, 162, .025) 54%, transparent 86%),
    radial-gradient(ellipse 98% 88% at 116% 120%, rgba(174, 189, 89, .08) 0%, transparent 86%);
  filter: blur(20px) saturate(104%);
}

.color-pearl-orb {
  position: relative;
  width: var(--color-pearl-specimen-diameter);
  aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 48% 52% 50% 46% / 52% 46% 54% 48%;
  background:
    radial-gradient(ellipse at 28% 18%, rgba(255, 255, 255, .72), transparent 24%),
    radial-gradient(ellipse at 72% 76%, rgba(70, 205, 224, .18), transparent 32%),
    radial-gradient(ellipse 118% 106% at 48% 46%, rgba(255, 255, 255, .20) 0%, rgba(4, 7, 12, .14) 100%);
  box-shadow:
    inset -18px -22px 34px rgba(5, 8, 15, .16),
    inset 12px 10px 24px rgba(255, 255, 255, .24),
    0 22px 38px rgba(9, 13, 23, .24);
  transform: rotate(-7deg);
}

.color-mode-story-light .color-pearl-orb {
  grid-column:1;
}

.color-mode-story-dark .color-pearl-orb {
  grid-column:2;
}

.color-pearl-specimen-light .color-pearl-orb {
  border-color: rgba(255, 255, 255, .82);
  background:
    radial-gradient(ellipse 54% 42% at 27% 17%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .48) 34%, transparent 70%),
    radial-gradient(ellipse 68% 62% at 16% 78%, rgba(171, 130, 220, .34) 0%, rgba(171, 130, 220, .085) 46%, transparent 80%),
    radial-gradient(ellipse 70% 66% at 88% 70%, rgba(56, 187, 214, .34) 0%, rgba(56, 187, 214, .085) 46%, transparent 82%),
    radial-gradient(ellipse 64% 56% at 82% 6%, rgba(238, 162, 191, .26) 0%, rgba(238, 162, 191, .06) 48%, transparent 82%),
    radial-gradient(ellipse 116% 108% at 35% 28%, #FBFCFF 0%, #E8EBF2 44%, #C9D0DB 76%, #9BA6B5 100%);
  box-shadow:
    inset 16px 12px 30px rgba(255, 255, 255, .72),
    inset -24px -30px 42px rgba(57, 70, 94, .30),
    inset 8px -10px 30px rgba(115, 190, 211, .14),
    0 42px 62px -16px rgba(30, 39, 55, .62),
    0 18px 44px -20px rgba(255, 255, 255, .68),
    -20px 22px 44px -28px rgba(126, 91, 187, .48),
    20px 22px 46px -28px rgba(43, 164, 193, .46);
}

.color-pearl-specimen-dark .color-pearl-orb {
  border-color: rgba(219, 235, 255, .34);
  filter: saturate(128%) contrast(102%);
  background:
    radial-gradient(ellipse 66% 52% at 13% 4%, rgba(224, 236, 255, .76) 0%, rgba(224, 236, 255, .16) 38%, transparent 70%),
    radial-gradient(ellipse 70% 64% at 96% 4%, rgba(126, 76, 194, .78) 0%, rgba(126, 76, 194, .24) 42%, transparent 78%),
    radial-gradient(ellipse 76% 68% at 102% 98%, rgba(41, 183, 207, .68) 0%, rgba(41, 183, 207, .20) 46%, transparent 80%),
    radial-gradient(ellipse 72% 64% at -2% 100%, rgba(199, 61, 151, .62) 0%, rgba(199, 61, 151, .18) 46%, transparent 80%),
    radial-gradient(ellipse 58% 54% at 80% 82%, rgba(178, 191, 95, .36) 0%, rgba(178, 191, 95, .08) 52%, transparent 78%),
    radial-gradient(ellipse 118% 108% at 36% 30%, #343B4C 0%, #181D29 42%, #090C14 72%, #020307 100%);
  box-shadow:
    inset -28px -34px 46px rgba(0, 0, 0, .68),
    inset 14px 12px 28px rgba(196, 217, 247, .22),
    inset 10px -12px 34px rgba(43, 167, 194, .12),
    0 44px 64px -16px rgba(0, 0, 0, .88),
    0 16px 48px -22px rgba(187, 215, 255, .38),
    0 0 44px -18px rgba(83, 168, 211, .30),
    -20px 24px 48px -28px rgba(128, 75, 190, .58),
    20px 24px 50px -28px rgba(38, 169, 197, .54);
}

.color-pearl-specimen figcaption {
  position: absolute;
  right:50%;
  bottom: 0;
  left: 0;
  z-index: 1;
  align-self: end;
  display: grid;
  gap: var(--lds-space-1);
  padding:var(--lds-space-7);
  color: #111827;
  background: linear-gradient(180deg, transparent, rgba(244, 247, 252, .76));
}

.color-pearl-specimen-dark figcaption {
  right:0;
  left:50%;
  text-align:right;
  color: #F4F8FF;
  background: linear-gradient(180deg, transparent, rgba(5, 8, 14, .78));
}

.color-pearl-specimen figcaption strong {
  font-size: var(--font-size-md);
}

.color-pearl-specimen figcaption span {
  font-size: var(--font-size-sm);
  line-height: 1.4;
  opacity: .88;
}

.color-pearl-specimen-light figcaption :is(strong, span) {
  color: #111827;
}

body[data-route="foundation-color"][data-color-theme] .color-pearl-specimen-light figcaption strong {
  color: #111827;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .68);
}

body[data-route="foundation-color"][data-color-theme] .color-pearl-specimen-light figcaption span {
  color: #364152;
  opacity: 1;
}

.color-pearl-specimen-dark figcaption :is(strong, span) {
  color: #F4F8FF;
}

body[data-route="foundation-color"][data-color-theme] .color-pearl-specimen-dark figcaption span {
  color: #D5DCE8;
  opacity: .92;
}

.color-mode-story-light .color-mode-copy :is(h4,p) {
  color:#17202C;
}

.color-mode-story-light .color-mode-copy > p:not(.eyebrow) {
  color:#354456;
}

.color-mode-story-light .color-mode-copy .eyebrow {
  color:#2C5272;
}

.color-mode-story-dark .color-mode-copy :is(h4,p) {
  color:#F6F9FF;
}

.color-mode-story-dark .color-mode-copy > p:not(.eyebrow) {
  color:#D4DCE9;
}

.color-mode-story-dark .color-mode-copy .eyebrow {
  color:#A7C8FF;
}

/* The four specimens share one diameter while retaining independent contour,
   material, lighting, and motion recipes. */
.color-third-pearl {
  position:relative;
  display: grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;
}

.color-third-pearl-stage {
  position: relative;
  display: grid;
  grid-area:1 / 1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  place-items: center;
  min-width: 0;
  min-height:clamp(640px,58vw,720px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(ellipse 60% 48% at 22% 22%, rgba(235, 37, 147, .15), transparent 72%),
    radial-gradient(ellipse 62% 50% at 82% 70%, rgba(15, 201, 235, .13), transparent 74%),
    radial-gradient(ellipse 74% 64% at 50% 48%, rgba(67, 35, 103, .16), transparent 76%),
    #070811;
}

.color-third-pearl-stage::before {
  content: "";
  position: absolute;
  inset: 14% 12%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 24% 50%, rgba(241, 36, 145, .20), transparent 62%),
    radial-gradient(ellipse at 76% 54%, rgba(23, 207, 235, .18), transparent 64%);
  filter: blur(38px);
}

.color-third-pearl-stage figcaption {
  position: absolute;
  right: var(--lds-space-5);
  bottom: var(--lds-space-4);
  left: var(--lds-space-5);
  color: rgba(231, 237, 250, .70);
  font-family: var(--lds-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.color-third-pearl-orb {
  position: relative;
  width: var(--color-pearl-specimen-diameter);
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid rgba(211, 229, 255, .30);
  border-radius: 49% 51% 47% 53% / 52% 46% 54% 48%;
  background:
    radial-gradient(ellipse 62% 46% at 22% 10%, rgba(232, 242, 255, .82) 0%, rgba(232, 242, 255, .12) 42%, transparent 72%),
    radial-gradient(ellipse 48% 42% at 70% 16%, rgba(255, 157, 66, .28) 0%, rgba(255, 132, 61, .065) 48%, transparent 78%),
    radial-gradient(ellipse 82% 74% at 4% 72%, rgba(241, 35, 146, .48) 0%, rgba(241, 35, 146, .10) 50%, transparent 80%),
    radial-gradient(ellipse 84% 76% at 96% 64%, rgba(14, 206, 236, .48) 0%, rgba(14, 206, 236, .10) 50%, transparent 80%),
    radial-gradient(ellipse 66% 58% at 74% 4%, rgba(255, 100, 116, .34) 0%, rgba(255, 100, 116, .07) 48%, transparent 78%),
    radial-gradient(ellipse 118% 110% at 40% 28%, #34304b 0%, #171725 42%, #080912 72%, #020309 100%);
  box-shadow:
    inset 18px 14px 30px rgba(224, 237, 255, .14),
    inset -32px -38px 50px rgba(0, 0, 0, .70),
    0 48px 62px -18px rgba(0, 0, 0, .92),
    -26px 22px 54px -28px rgba(235, 36, 145, .60),
    28px 24px 56px -28px rgba(15, 199, 231, .56),
    0 0 50px -26px rgba(147, 89, 220, .64);
  filter: saturate(118%) contrast(103%);
  transform: rotate(-4deg);
  animation: color-third-pearl-contour 13s ease-in-out infinite alternate;
  grid-column:1;
}

.color-third-pearl-orb::before,
.color-third-pearl-orb::after,
.color-third-pearl-field {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(15px);
  mix-blend-mode: screen;
}

.color-third-pearl-orb::before {
  inset: -18% 18% 30% -24%;
  background: radial-gradient(ellipse, rgba(255, 42, 153, .62), rgba(124, 35, 179, .24) 48%, transparent 76%);
  animation: color-third-pearl-magenta 9s ease-in-out infinite alternate;
}

.color-third-pearl-orb::after {
  inset: 16% -22% -20% 22%;
  background: radial-gradient(ellipse, rgba(19, 218, 240, .66), rgba(20, 107, 211, .24) 48%, transparent 76%);
  animation: color-third-pearl-cyan 11s ease-in-out infinite alternate;
}

.color-third-pearl-field-cyan {
  inset: -12% -10% 44% 34%;
  background: radial-gradient(ellipse, rgba(82, 220, 255, .50), transparent 72%);
  animation: color-third-pearl-field-a 8s ease-in-out infinite alternate;
}

.color-third-pearl-field-magenta {
  inset: 36% 42% -14% -14%;
  background: radial-gradient(ellipse, rgba(255, 31, 151, .48), transparent 72%);
  animation: color-third-pearl-field-b 10s ease-in-out infinite alternate;
}

.color-third-pearl-field-coral {
  inset: -8% 4% 52% 44%;
  background: radial-gradient(ellipse, rgba(255, 151, 66, .42), rgba(255, 91, 112, .14) 48%, transparent 74%);
  animation: color-third-pearl-field-c 12s ease-in-out infinite alternate;
}

.color-third-pearl-copy {
  position:relative;
  z-index:3;
  grid-area:1 / 1;
  align-self:center;
  justify-self:end;
  display:grid;
  gap:var(--lds-space-4);
  width:50%;
  min-width:0;
  padding:clamp(40px,6vw,84px);
}

.color-third-pearl-copy :is(h4, p) {
  margin: 0;
}

.color-third-pearl-copy h4 {
  color:#F6F9FF;
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 820;
  line-height: 1.02;
  letter-spacing: var(--lds-heading-tracking-section, -.008em);
  text-wrap: balance;
}

.color-third-pearl-copy > p:not(.eyebrow) {
  max-width:46ch;
  color:#D4DCE9;
  font-family: "Hanken Grotesk", var(--lds-font-ui, var(--lds-font-family));
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.58;
}

.color-third-pearl-copy .eyebrow {
  color:#A7C8FF;
}

.color-fourth-pearl {
  position:relative;
  display: grid;
  grid-template-columns:minmax(0,1fr);
  min-width:0;
}

.color-fourth-pearl-stage {
  position: relative;
  display: grid;
  grid-area:1 / 1;
  grid-template-columns:repeat(2,minmax(0,1fr));
  place-items: center;
  min-width: 0;
  min-height:clamp(640px,58vw,720px);
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  border:1px solid rgba(255,255,255,.42);
  background:var(--color-light-pearl-stage-surface);
  box-shadow:var(--color-light-pearl-stage-shadow);
}

.color-fourth-pearl-stage::before {
  content: "";
  position: absolute;
  inset:-20%;
  z-index: -1;
  border-radius: 50%;
  background:var(--color-light-pearl-stage-aura);
  filter:blur(16px) saturate(112%);
}

.color-fourth-pearl-stage figcaption {
  position: absolute;
  right: var(--lds-space-5);
  bottom: var(--lds-space-4);
  left: var(--lds-space-5);
  color: rgba(37, 48, 66, .72);
  font-family: var(--lds-font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.color-fourth-pearl-orb {
  position: relative;
  width: var(--color-pearl-specimen-diameter);
  aspect-ratio: 1;
  overflow: hidden;
  border:1px solid rgba(244,255,255,.72);
  border-radius: 51% 49% 53% 47% / 48% 54% 46% 52%;
  background:
    radial-gradient(ellipse 56% 44% at 24% 14%,rgba(255,255,255,.98) 0%,rgba(255,255,255,.54) 36%,transparent 72%),
    radial-gradient(ellipse 74% 64% at 88% 18%,rgba(80,198,190,.38) 0%,rgba(80,198,190,.10) 50%,transparent 80%),
    radial-gradient(ellipse 82% 72% at 8% 58%,rgba(60,155,211,.34) 0%,rgba(60,155,211,.09) 52%,transparent 82%),
    radial-gradient(ellipse 76% 68% at 92% 72%,rgba(104,94,190,.32) 0%,rgba(104,94,190,.08) 52%,transparent 82%),
    radial-gradient(ellipse 72% 62% at 32% 94%,rgba(83,205,173,.28) 0%,rgba(83,205,173,.07) 54%,transparent 82%),
    radial-gradient(ellipse 118% 108% at 38% 28%,#FEFFFF 0%,#ECF4F3 43%,#CFDADB 76%,#93A7AE 100%);
  box-shadow:
    inset 18px 14px 34px rgba(255,255,255,.84),
    inset -30px -36px 46px rgba(48,72,84,.30),
    inset 12px -14px 32px rgba(67,182,180,.15),
    0 44px 64px -16px rgba(37,47,66,.58),
    -22px 22px 48px -28px rgba(78,109,205,.42),
    24px 24px 50px -28px rgba(35,176,182,.44),
    8px -12px 42px -28px rgba(102,82,185,.38);
  filter:saturate(112%) contrast(100%);
  transform: rotate(3deg);
  animation: color-fourth-pearl-contour 14s ease-in-out infinite alternate;
  grid-column:2;
}

.color-fourth-pearl-orb::before,
.color-fourth-pearl-orb::after,
.color-fourth-pearl-field {
  content: "";
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(13px);
  mix-blend-mode:soft-light;
}

.color-fourth-pearl-orb::before {
  inset:-14% 28% 34% -22%;
  background:radial-gradient(ellipse,rgba(40,155,214,.62),rgba(67,210,192,.22) 48%,transparent 78%);
  animation: color-fourth-pearl-flow-a 11s ease-in-out infinite alternate;
}

.color-fourth-pearl-orb::after {
  inset:34% -22% -18% 20%;
  background:radial-gradient(ellipse,rgba(98,78,194,.52),rgba(79,187,195,.18) 50%,transparent 80%);
  animation: color-fourth-pearl-flow-b 13s ease-in-out infinite alternate;
}

.color-fourth-pearl-field-sea {
  inset:4% -18% 46% 30%;
  background:radial-gradient(ellipse,rgba(43,184,151,.54),rgba(63,211,196,.15) 54%,transparent 82%);
  animation: color-fourth-pearl-field-a 9s ease-in-out infinite alternate;
}

.color-fourth-pearl-field-blue {
  inset:30% 38% 10% -20%;
  background:radial-gradient(ellipse,rgba(44,125,207,.48),rgba(89,193,218,.13) 52%,transparent 82%);
  animation: color-fourth-pearl-field-b 12s ease-in-out infinite alternate;
}

.color-fourth-pearl-field-violet {
  inset:48% -10% -16% 30%;
  background:radial-gradient(ellipse,rgba(112,88,199,.44),rgba(154,130,213,.12) 52%,transparent 82%);
  animation: color-fourth-pearl-field-c 15s ease-in-out infinite alternate;
}

.color-fourth-pearl-copy {
  position:relative;
  z-index:3;
  grid-area:1 / 1;
  align-self:center;
  justify-self:start;
  display:grid;
  gap:var(--lds-space-4);
  width:50%;
  min-width:0;
  padding:clamp(40px,6vw,84px);
}

.color-fourth-pearl-copy :is(h4, p) {
  margin: 0;
}

.color-fourth-pearl-copy h4 {
  color:#17202C;
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 820;
  line-height: 1.02;
  letter-spacing: var(--lds-heading-tracking-section, -.008em);
  text-wrap: balance;
}

.color-fourth-pearl-copy > p:not(.eyebrow) {
  max-width:46ch;
  color:#354456;
  font-family: "Hanken Grotesk", var(--lds-font-ui, var(--lds-font-family));
  font-size: clamp(17px, 1.25vw, 19px);
  line-height: 1.58;
}

.color-fourth-pearl-copy .eyebrow {
  color:#2C5272;
}

@keyframes color-third-pearl-contour {
  0% { border-radius: 49% 51% 47% 53% / 52% 46% 54% 48%; transform: rotate(-4deg) scale(1); }
  52% { border-radius: 52% 48% 53% 47% / 47% 54% 46% 53%; transform: rotate(2deg) scale(1.018); }
  100% { border-radius: 47% 53% 50% 50% / 54% 48% 52% 46%; transform: rotate(-1deg) scale(.992); }
}

@keyframes color-third-pearl-magenta {
  from { transform: translate3d(-6%, -4%, 0) scale(.92); opacity: .64; }
  to { transform: translate3d(22%, 18%, 0) scale(1.18); opacity: .92; }
}

@keyframes color-third-pearl-cyan {
  from { transform: translate3d(8%, 12%, 0) scale(1.12); opacity: .78; }
  to { transform: translate3d(-18%, -14%, 0) scale(.90); opacity: .98; }
}

@keyframes color-third-pearl-field-a {
  from { transform: translate(-10%, 8%) scale(.86); opacity: .56; }
  to { transform: translate(10%, 22%) scale(1.16); opacity: .88; }
}

@keyframes color-third-pearl-field-b {
  from { transform: translate(8%, -10%) scale(1.10); opacity: .54; }
  to { transform: translate(22%, -24%) scale(.88); opacity: .86; }
}

@keyframes color-third-pearl-field-c {
  from { transform: translate(-18%, 12%) scale(.82); opacity: .42; }
  to { transform: translate(10%, 28%) scale(1.18); opacity: .76; }
}

@keyframes color-fourth-pearl-contour {
  0% { border-radius: 51% 49% 53% 47% / 48% 54% 46% 52%; transform: rotate(3deg) scale(1); }
  50% { border-radius: 48% 52% 49% 51% / 53% 47% 52% 48%; transform: rotate(-2deg) scale(1.014); }
  100% { border-radius: 53% 47% 51% 49% / 46% 52% 48% 54%; transform: rotate(1deg) scale(.994); }
}

@keyframes color-fourth-pearl-flow-a {
  from { transform: translate(-12%, -4%) scale(.92) rotate(-7deg); opacity: .48; }
  to { transform: translate(18%, 20%) scale(1.18) rotate(5deg); opacity: .78; }
}

@keyframes color-fourth-pearl-flow-b {
  from { transform: translate(8%, 16%) scale(1.12) rotate(4deg); opacity: .46; }
  to { transform: translate(-18%, -10%) scale(.90) rotate(-6deg); opacity: .76; }
}

@keyframes color-fourth-pearl-field-a {
  from { transform: translate(-16%, 8%) scale(.86); opacity: .42; }
  to { transform: translate(14%, 20%) scale(1.14); opacity: .70; }
}

@keyframes color-fourth-pearl-field-b {
  from { transform: translate(8%, -8%) scale(1.08); opacity: .44; }
  to { transform: translate(20%, -20%) scale(.90); opacity: .72; }
}

@keyframes color-fourth-pearl-field-c {
  from { transform: translate(-12%, 12%) scale(.88); opacity: .38; }
  to { transform: translate(12%, -18%) scale(1.16); opacity: .66; }
}

@media (prefers-reduced-motion: reduce) {
  .color-third-pearl-orb,
  .color-third-pearl-orb::before,
  .color-third-pearl-orb::after,
  .color-third-pearl-field,
  .color-fourth-pearl-orb,
  .color-fourth-pearl-orb::before,
  .color-fourth-pearl-orb::after,
  .color-fourth-pearl-field {
    animation: none;
  }
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-pearl-method {
  background:
    radial-gradient(ellipse 112% 96% at -22% -16%, rgba(122, 93, 188, .17) 0%, rgba(122, 93, 188, .045) 50%, transparent 84%),
    radial-gradient(ellipse 108% 92% at 124% 118%, rgba(36, 131, 155, .13) 0%, rgba(36, 131, 155, .035) 50%, transparent 84%),
    rgba(8, 12, 20, .44);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 28px 64px rgba(0, 0, 0, .28);
}

@media (max-width: 840px) {
  .color-pearl-philosophy {
    grid-template-columns: 1fr;
  }

  .color-pearl-specimens { grid-template-columns:1fr; }

  .color-mode-story,
  .color-third-pearl,
  .color-fourth-pearl {
    min-height:1140px;
  }

  .color-pearl-specimen,
  .color-third-pearl-stage,
  .color-fourth-pearl-stage {
    grid-template-columns:1fr;
    min-height:1140px;
  }

  :is(.color-mode-story-light,.color-mode-story-dark) .color-pearl-orb,
  .color-third-pearl-orb,
  .color-fourth-pearl-orb {
    grid-column:1;
    align-self:start;
    margin-top:64px;
  }

  .color-mode-copy,
  .color-mode-story-dark .color-mode-copy,
  .color-third-pearl-copy,
  .color-fourth-pearl-copy {
    align-self:end;
    justify-self:stretch;
    width:100%;
    padding:32px 28px 54px;
  }

  .color-mode-copy h4,
  .color-third-pearl-copy h4,
  .color-fourth-pearl-copy h4 {
    font-size:clamp(38px,12vw,52px);
  }

  .color-mode-copy > p:not(.eyebrow),
  .color-third-pearl-copy > p:not(.eyebrow),
  .color-fourth-pearl-copy > p:not(.eyebrow) {
    font-size:16px;
    line-height:1.55;
  }

  .color-pearl-specimen figcaption,
  .color-pearl-specimen-dark figcaption,
  .color-third-pearl-stage figcaption,
  .color-fourth-pearl-stage figcaption {
    display:none;
  }
}

.color-foundation-note {
  max-width: 78ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.color-section-heading {
  display: grid;
  gap: var(--lds-space-2);
  max-width: 900px;
}

.color-section-heading :is(h3, p) {
  margin: 0;
}

.color-section-heading h3 {
  color: var(--color-text-primary);
  font-size: clamp(28px, 4vw, 48px);
  line-height: 1.04;
}

.color-system-section {
  gap: var(--lds-space-6);
}

.color-system-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lds-space-6);
}

.color-system-card {
  display: grid;
  gap: 0;
  min-width: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 78%, var(--color-bg-surface));
  border-radius: var(--lds-radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,255,.86)),
    var(--color-bg-surface);
  box-shadow:
    0 1px 0 rgba(255,255,255,.86) inset,
    0 20px 44px rgba(15,23,42,.08);
}

.color-system-card-title {
  display: grid;
  gap: var(--lds-space-1);
  padding: var(--lds-space-5);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 66%, transparent);
  border-radius: calc(var(--lds-radius-xl) - 1px) calc(var(--lds-radius-xl) - 1px) 0 0;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, .06), rgba(15, 23, 42, .015)),
    rgba(255, 255, 255, .38);
}

.color-system-card-title h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(22px, 2.2vw, 30px);
  font-weight: var(--font-weight-bold);
  line-height: 1.05;
}

.color-system-spec-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-5);
  align-items: start;
  min-width: 0;
  padding: var(--lds-space-5);
}

.color-system-spec-panel {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--lds-space-3);
  align-self: stretch;
  min-width: 0;
}

.color-system-spec-panel h5 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
}

.color-system-spec-preview {
  position: relative;
  display: grid;
  place-items: center;
  min-height: clamp(220px, 26vw, 310px);
  overflow: hidden;
  border: 0;
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(180deg, transparent 0 50%, #0B1118 50% 100%),
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    #FFFFFF;
  background-position: 0 0, 0 0, 10px 10px, 0 0;
  background-size: auto, 20px 20px, 20px 20px, auto;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .18),
    0 22px 46px rgba(15,23,42,.18);
}

.color-system-spec-preview::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background:
    linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}

.color-system-spec-orb {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(138px, 17vw, 204px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background:
    linear-gradient(180deg, var(--swatch-light) 0 50%, var(--swatch-dark) 50% 100%);
  box-shadow:
    0 0 0 1px rgba(15,23,42,.12),
    0 26px 58px rgba(15,23,42,.20);
}

.color-system-value-list {
  display: grid;
  gap: var(--lds-space-3);
}

.color-system-value-row {
  display: grid;
  grid-template-columns: 64px 56px minmax(168px, max-content);
  gap: var(--lds-space-4);
  align-items: center;
  justify-content: start;
  min-width: 0;
  min-height: 76px;
  padding: var(--lds-space-3) var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: #FFFFFF;
}

.color-system-value-row > strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.color-system-value-swatch {
  display: block;
  justify-self: start;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 8px 18px rgba(15,23,42,.08);
}

.color-system-value-row dl {
  display: grid;
  gap: 2px;
  margin: 0;
  min-width: 0;
  justify-self: end;
  text-align: left;
}

.color-system-value-row dl div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px;
  min-width: 0;
}

.color-system-value-row dt {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.color-system-value-row dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  min-width: 0;
}

.color-system-value-row code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.color-foundation-chip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(118px, 1fr));
  gap: var(--lds-space-3);
}

.color-foundation-chip {
  display: grid;
  min-width: 0;
  gap: var(--lds-space-2);
}

.color-foundation-chip strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  line-height: 1.2;
}

.color-foundation-chip code,
.color-status-card code {
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: 11px;
}

.color-foundation-swatch {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 50%;
  background:
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    #fff;
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.color-foundation-swatch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--swatch);
}

.color-grayscale-ramp {
  display: grid;
  gap: var(--lds-space-6);
  min-width: 0;
  padding: var(--lds-space-5);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: var(--lds-radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.88), rgba(246,249,255,.72)),
    rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.66),
    0 18px 44px rgba(15,23,42,.1);
}

.color-grayscale-ramp h4 {
  margin: 0;
  padding-bottom: var(--lds-space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 64%, transparent);
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-heading);
}

.color-grayscale-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: var(--lds-space-5);
}

.color-grayscale-chip {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  min-height: 196px;
  padding: var(--lds-space-5);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,255,.88)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 18px 44px rgba(15,23,42,.12);
}

.color-grayscale-swatch {
  display: block;
  width: 88px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 20px 40px rgba(15,23,42,.18);
}

.color-grayscale-chip div {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.color-grayscale-chip strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.color-grayscale-chip code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.color-chroma-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: var(--lds-space-3);
}

.color-chroma-chip {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
}

.color-chroma-chip strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  line-height: 1.2;
}

.color-chroma-chip code {
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: 11px;
}

.color-chroma-context {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 74px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94) 0 50%, #111820 50% 100%),
    #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}

.color-chroma-context::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%);
  background-position: 0 0, 8px 8px;
  background-size: 16px 16px;
  opacity: .75;
}

.color-chroma-context i {
  position: absolute;
  left: 50%;
  z-index: 1;
  width: 42px;
  height: 42px;
  border-radius: var(--lds-radius-full);
  box-shadow:
    0 0 0 1px rgba(13,17,23,.12),
    0 10px 24px rgba(13,17,23,.16);
}

.color-chroma-context i.light {
  top: 50%;
  transform: translate(-50%, -78%);
  background: var(--swatch-light);
}

.color-chroma-context i.dark {
  top: 50%;
  transform: translate(-50%, -22%);
  background: var(--swatch-dark);
}

.color-role-matrix {
  gap: var(--lds-space-5);
}

.color-role-row-list {
  display: grid;
  gap: var(--lds-space-4);
}

.color-role-row {
  display: grid;
  grid-template-columns: minmax(110px, .22fr) minmax(0, 1fr);
  gap: var(--lds-space-4);
  align-items: start;
  min-width: 0;
}

.color-role-surface {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.color-role-cell-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
  gap: var(--lds-space-3);
  min-width: 0;
}

.color-role-cell {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
}

.color-role-cell strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
}

.color-neutral-family-list {
  display: grid;
  gap: var(--lds-space-8);
}

.color-neutral-family {
  display: grid;
  gap: var(--lds-space-5);
  min-width: 0;
  padding: var(--lds-space-6);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: var(--lds-radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.92), rgba(246,249,255,.76)),
    rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.68),
    0 22px 54px rgba(15,23,42,.1);
}

.color-neutral-family > header {
  padding-bottom: var(--lds-space-4);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 64%, transparent);
}

.color-neutral-family h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: var(--lds-line-heading);
}

.color-neutral-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-6);
  align-items: start;
}

.color-neutral-variant {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.color-neutral-variant h5 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-heading);
}

.color-neutral-row-list {
  display: grid;
  gap: var(--lds-space-4);
}

.color-neutral-row {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: var(--lds-space-4);
  align-items: center;
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(33, 41, 54, .98), rgba(9, 16, 26, .98)),
    #0B1118;
}

.color-neutral-surface {
  color: var(--color-text-primary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.color-neutral-row .color-neutral-surface {
  color: #F3F7FF;
}

.color-neutral-row-dark-value,
.color-neutral-row-light-value {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(22, 28, 39, .96), rgba(8, 13, 21, .96)),
    #0B1118;
}

.color-neutral-row-dark-value .color-neutral-surface,
.color-neutral-row-light-value .color-neutral-surface {
  color: #F3F7FF;
}

.color-neutral-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--lds-space-4);
  min-width: 0;
}

.color-neutral-cell {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--lds-space-4);
  align-items: center;
  min-width: 0;
  min-height: 82px;
  padding: var(--lds-space-4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.032)),
    rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.14);
}

.color-neutral-swatch {
  display: block;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--swatch);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.24),
    0 12px 24px rgba(0,0,0,.2);
}

.color-neutral-cell div {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.color-neutral-cell strong {
  color: #F3F7FF;
  font-size: var(--font-size-sm);
}

.color-neutral-cell code {
  color: rgba(243,247,255,.78);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.color-fill-variant-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-6);
  align-items: start;
}

.color-fill-variant {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.color-fill-variant h5 {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-heading);
}

.color-fill-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--lds-space-6);
  min-width: 0;
}

.color-fill-card {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-space-5);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.07), rgba(255,255,255,.032)),
    rgba(255,255,255,.045);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.18);
}

.color-fill-card header {
  display: flex;
  align-items: center;
  min-height: 24px;
}

.color-fill-card h6 {
  margin: 0;
  color: #F3F7FF;
  font-size: var(--font-size-base);
  line-height: var(--lds-line-heading);
}

.color-fill-preview {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  min-height: clamp(220px, 24vw, 290px);
  border: 0;
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(180deg, transparent 0 50%, #0B1118 50% 100%),
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    linear-gradient(45deg, rgba(17,24,39,.08) 25%, transparent 25% 75%, rgba(17,24,39,.08) 75%),
    #FFFFFF;
  background-position: 0 0, 0 0, 10px 10px, 0 0;
  background-size: auto, 20px 20px, 20px 20px, auto;
  box-shadow:
    0 0 0 1px rgba(15, 23, 42, .18),
    0 22px 46px rgba(0,0,0,.22);
}

.color-fill-preview::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  pointer-events: none;
}

.color-fill-orb {
  position: relative;
  z-index: 1;
  display: block;
  width: clamp(132px, 15vw, 184px);
  aspect-ratio: 1;
  height: auto;
  border-radius: 50%;
  clip-path: circle(50% at 50% 50%);
  background: linear-gradient(180deg, var(--swatch-light) 0 50%, var(--swatch-dark) 50% 100%);
  box-shadow:
    0 0 0 1px rgba(15,23,42,.12),
    0 26px 58px rgba(0,0,0,.24);
}

.color-fill-meta {
  display: grid;
  gap: var(--lds-space-3);
  margin: 0;
}

.color-fill-meta div {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: var(--lds-space-4);
  align-items: center;
  min-width: 0;
  min-height: 54px;
  padding: var(--lds-space-3) var(--lds-space-4);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: var(--lds-radius-md);
  background: rgba(255,255,255,.045);
}

.color-fill-meta dt {
  color: #F3F7FF;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.color-fill-meta dd {
  min-width: 0;
  margin: 0;
}

.color-fill-meta code {
  color: rgba(243,247,255,.78);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.color-text-section .color-foundation-grid-large {
  gap: var(--lds-space-8);
}

.color-text-section .color-role-matrix {
  gap: var(--lds-space-6);
}

.color-text-section .color-role-row-list {
  gap: var(--lds-space-7);
}

.color-text-section .color-role-row {
  grid-template-columns: 1fr;
  gap: var(--lds-space-3);
}

.color-text-section .color-role-surface {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  letter-spacing: .12em;
}

.color-text-section .color-role-cell-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--lds-space-5);
}

.color-text-section .color-role-cell {
  min-height: 188px;
  padding: var(--lds-space-5);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 76%, transparent);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,255,.9)),
    #FFFFFF;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    0 18px 44px rgba(15, 23, 42, .12);
}

.color-text-section .color-role-row:nth-child(2) .color-role-cell {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(22, 28, 39, .96), rgba(8, 13, 21, .96)),
    #0B1118;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 48px rgba(0, 0, 0, .32);
}

.color-text-section .color-role-cell .color-foundation-swatch {
  width: 72px;
  max-width: 72px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.26),
    0 18px 32px rgba(15, 23, 42, .16);
}

.color-text-section .color-role-cell strong {
  margin-top: var(--lds-space-2);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.color-text-section .color-role-row:nth-child(2) .color-role-cell strong {
  color: #F3F7FF;
}

.color-text-section .color-role-cell code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  white-space: nowrap;
}

.color-text-section .color-role-row:nth-child(2) .color-role-cell code {
  color: rgba(243, 247, 255, .78);
}

.color-grayscale-section .color-foundation-grid-large {
  gap: var(--lds-space-7);
}

.color-grayscale-section .color-role-matrix {
  gap: var(--lds-space-5);
}

.color-grayscale-section .color-role-matrix h3 {
  padding-bottom: var(--lds-space-3);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 66%, transparent);
}

.color-grayscale-section .color-role-row-list {
  gap: var(--lds-space-6);
}

.color-grayscale-section .color-role-row {
  grid-template-columns: 1fr;
  gap: var(--lds-space-3);
}

.color-grayscale-section .color-role-surface {
  color: var(--color-text-secondary);
  letter-spacing: .12em;
}

.color-grayscale-section .color-role-cell-grid {
  grid-template-columns: repeat(auto-fit, minmax(176px, 1fr));
  gap: var(--lds-space-4);
}

.color-grayscale-section .color-role-cell {
  display: grid;
  gap: var(--lds-space-3);
  min-height: 168px;
  padding: var(--lds-space-5);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,255,.88)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 16px 38px rgba(15,23,42,.1);
}

.color-grayscale-section .color-role-cell .color-foundation-swatch {
  width: 64px;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 18px 34px rgba(15,23,42,.16);
}

.color-grayscale-section .color-role-cell strong {
  margin-top: auto;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.color-grayscale-section .color-role-cell code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  white-space: normal;
  overflow-wrap: anywhere;
}

.color-status-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.color-status-card {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--status-border);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-primary);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--status-bg) 45%, transparent), transparent),
    var(--color-bg-surface);
}

.color-status-card-head {
  display: flex;
  gap: var(--lds-space-2);
  align-items: center;
  min-width: 0;
}

.color-status-card h4 {
  color: var(--status-text);
  font-size: var(--font-size-base);
}

.color-status-preview-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.color-status-surface {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: #fff;
}

.color-status-surface.dark {
  border-color: #384150;
  background: #1C1D22;
}

.color-status-surface small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
}

.color-status-surface.dark small {
  color: #C6CCD5;
}

.color-status-message {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--lds-space-1) var(--lds-space-2);
  align-items: start;
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--status-border);
  border-radius: var(--lds-radius-md);
  color: var(--status-text);
  background: var(--status-bg);
}

.color-status-surface.dark .color-status-message {
  border-color: color-mix(in srgb, var(--status-color) 58%, #FFFFFF);
  color: color-mix(in srgb, var(--status-color) 78%, #FFFFFF);
  background: color-mix(in srgb, var(--status-color) 15%, #20242C);
}

.color-status-message strong {
  color: inherit;
}

.color-status-message > span:last-child {
  grid-column: 2;
  color: inherit;
  font-size: var(--font-size-xs);
  line-height: 1.35;
}

.color-status-icon {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border: 1.5px solid currentColor;
  border-radius: var(--lds-radius-full);
}

.color-status-token-list {
  display: grid;
  gap: var(--lds-space-2);
  margin: 0;
}

.color-status-token-list div {
  display: grid;
  grid-template-columns: minmax(94px, .42fr) minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: baseline;
  min-width: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.color-status-token-list dt,
.color-status-token-list dd {
  min-width: 0;
  margin: 0;
}

.color-status-dot {
  width: 18px;
  height: 18px;
  border-radius: var(--lds-radius-full);
  background: var(--status-color);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--status-color) 48%, transparent);
}

.color-component-role-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: var(--lds-space-5);
}

.color-status-section .color-component-role-grid {
  grid-template-columns: 1fr;
  gap: var(--lds-space-4);
}

.color-role-group {
  display: grid;
  gap: var(--lds-space-5);
  min-width: 0;
  padding: var(--lds-space-5);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 70%, transparent);
  border-radius: var(--lds-radius-xl);
  background:
    linear-gradient(145deg, rgba(255,255,255,.9), rgba(246,249,255,.76)),
    rgba(255,255,255,.7);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 18px 44px rgba(15,23,42,.1);
}

.color-role-group h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-heading);
}

.color-status-section .color-role-group h4 {
  padding-bottom: var(--lds-space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border-subtle) 64%, transparent);
}

.color-component-role {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--lds-space-4);
  align-items: center;
  min-width: 0;
  min-height: 178px;
  padding: var(--lds-space-5);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 76%, transparent);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,255,.88)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 16px 36px rgba(15,23,42,.1);
}

.color-component-role .color-foundation-swatch {
  width: 64px;
  height: 64px;
  min-height: 0;
  align-self: start;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 18px 34px rgba(15,23,42,.16);
}

.color-component-role div {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.color-component-role strong {
  color: var(--color-text-primary);
}

.color-component-role-meta {
  display: grid;
  gap: var(--lds-space-1);
  margin: 0;
  min-width: 0;
}

.color-component-role-meta div {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: baseline;
}

.color-component-role-meta dt,
.color-component-role-meta dd {
  margin: 0;
  min-width: 0;
}

.color-component-role-meta dt {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.color-component-role-meta code {
  color: var(--color-text-primary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  white-space: normal;
  overflow-wrap: anywhere;
}

.color-component-role-list {
  display: grid;
  gap: var(--lds-space-1);
  margin: 0;
  padding-left: 1.1em;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.color-component-role-list li {
  padding-left: .2em;
}

.color-status-section .color-component-role {
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  min-height: 0;
  padding: var(--lds-space-5);
}

.color-status-section .color-component-role > div {
  grid-template-columns: 1fr;
  align-content: start;
}

.color-status-section .color-component-role strong {
  font-size: var(--font-size-base);
}

.color-status-section .color-component-role-meta {
  gap: var(--lds-space-2);
}

.color-status-section .color-component-role-meta div {
  grid-template-columns: 52px minmax(0, 1fr);
}

.color-status-section .color-component-role-list {
  gap: var(--lds-space-1);
  margin-top: var(--lds-space-1);
}

.color-use-table-wrap {
  overflow: visible;
}

.color-use-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
}

.color-use-table th,
.color-use-table td {
  padding: var(--lds-space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.color-use-table thead th {
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.color-use-table tbody th {
  width: 220px;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.color-use-table td {
  color: var(--color-text-secondary);
  line-height: var(--lds-line-body);
}

body[data-color-theme="dark"] .color-foundation {
  --glass-ink: #FFFFFF;
  --glass-muted: #C6D2E2;
  --color-page-text: #E9EFF8;
  --color-page-muted: rgba(233, 239, 248, .72);
  --color-page-panel: rgba(18, 22, 32, .66);
  --color-page-border: rgba(255, 255, 255, .13);
  color: var(--color-page-text);
}

body[data-color-theme="dark"] .color-foundation::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 14%, rgba(58, 118, 230, .26), transparent 30%),
    radial-gradient(circle at 78% 8%, rgba(94, 210, 255, .14), transparent 28%),
    radial-gradient(circle at 76% 78%, rgba(125, 90, 255, .16), transparent 34%),
    linear-gradient(135deg, #0B0E14 0%, #111721 52%, #090C12 100%);
}

body[data-color-theme="dark"] .color-page-header,
body[data-color-theme="dark"] .color-foundation :is(.color-foundation-hero, .color-foundation-card) {
  border-color: var(--color-page-border);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .64), rgba(20, 24, 34, .48)),
    var(--color-page-panel);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 24px 70px rgba(0, 0, 0, .36);
}

body[data-color-theme="dark"] .color-foundation :is(h3, h4, h5, p, strong, th, td, code, dt, dd, li, .eyebrow) {
  color: var(--color-page-text);
}

body[data-lds-shell-standard="nacreous"] :is(.color-foundation-hero > .eyebrow, .type-kicker) {
  color: var(--lds-direction-label-color);
}

body[data-color-theme="dark"] .color-foundation :is(.color-foundation-note, .color-section-heading p, .color-foundation-hero p:not(.eyebrow), .color-component-role p, .color-use-table td, .color-system-value-row dd) {
  color: var(--color-page-muted);
}

/* Pearl studies own their foreground contrast because every stage depicts a
   distinct material field, independent of the surrounding page appearance. */
body[data-route="foundation-color"][data-color-theme] .color-mode-story-light .color-mode-copy :is(h4, p),
body[data-route="foundation-color"][data-color-theme] .color-fourth-pearl-copy :is(h4, p) {
  color: #17202C;
}

body[data-route="foundation-color"][data-color-theme] .color-mode-story-light .color-mode-copy > p:not(.eyebrow),
body[data-route="foundation-color"][data-color-theme] .color-fourth-pearl-copy > p:not(.eyebrow) {
  color: #354456;
}

body[data-route="foundation-color"][data-color-theme] .color-mode-story-light .color-mode-copy .eyebrow,
body[data-route="foundation-color"][data-color-theme] .color-fourth-pearl-copy .eyebrow {
  color: #2C5272;
}

body[data-route="foundation-color"][data-color-theme] .color-mode-story-dark .color-mode-copy :is(h4, p),
body[data-route="foundation-color"][data-color-theme] .color-third-pearl-copy :is(h4, p) {
  color: #F6F9FF;
}

body[data-route="foundation-color"][data-color-theme] .color-mode-story-dark .color-mode-copy > p:not(.eyebrow),
body[data-route="foundation-color"][data-color-theme] .color-third-pearl-copy > p:not(.eyebrow) {
  color: #D4DCE9;
}

body[data-route="foundation-color"][data-color-theme] .color-mode-story-dark .color-mode-copy .eyebrow,
body[data-route="foundation-color"][data-color-theme] .color-third-pearl-copy .eyebrow {
  color: #A7C8FF;
}

body[data-color-theme="dark"] .color-page-shell .page-theme-toggle {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}

body[data-color-theme="dark"] .color-page-shell .page-theme-btn {
  color: #C6D2E2;
}

body[data-color-theme="dark"] .color-page-shell .page-theme-btn[aria-pressed="true"] {
  background: #FFFFFF;
  color: #12151C;
}

body[data-color-theme="dark"] .color-section-nav::before {
  background: linear-gradient(to bottom, rgba(13, 16, 23, .62), rgba(13, 16, 23, 0) 92%);
}

body[data-color-theme="dark"] .color-section-nav .section-nav-track {
  border-color: rgba(255, 255, 255, .14);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .72), rgba(20, 24, 34, .58)),
    rgba(18, 22, 32, .68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 16px 40px rgba(0, 0, 0, .4);
}

body[data-color-theme="dark"] .color-section-nav .section-nav-link {
  color: rgba(233, 239, 248, .66);
}

body[data-color-theme="dark"] .color-section-nav .section-nav-link:hover,
body[data-color-theme="dark"] .color-section-nav .section-nav-link.is-active {
  color: #FFFFFF;
}

body[data-color-theme="dark"] .color-foundation :is(.color-system-spec-preview, .color-system-value-row, .color-component-role, .color-role-group, .color-role-cell, .color-status-surface, .color-use-table-wrap) {
  border-color: rgba(255, 255, 255, .13);
}

body[data-color-theme="dark"] .color-system-spec-panel h5 {
  color: rgba(233, 239, 248, .86);
}

body[data-color-theme="dark"] .color-system-card-title {
  border-bottom-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(135deg, rgba(5, 9, 15, .46), rgba(11, 17, 28, .28)),
    rgba(8, 12, 20, .36);
}

body[data-color-theme="dark"] .color-system-spec-preview {
  box-shadow:
    0 0 0 1px rgba(120, 145, 175, .18),
    0 26px 58px rgba(0, 0, 0, .38);
}

body[data-color-theme="dark"] .color-component-role,
body[data-color-theme="dark"] .color-role-group {
  background: rgba(255, 255, 255, .055);
}

body[data-color-theme="dark"] .color-neutral-family {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(40, 48, 64, .46), rgba(14, 18, 27, .54)),
    rgba(18, 22, 32, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 58px rgba(0,0,0,.28);
}

body[data-color-theme="dark"] .color-neutral-family > header {
  border-bottom-color: rgba(255,255,255,.12);
}

body[data-color-theme="dark"] .color-neutral-family h4 {
  color: #F3F7FF;
}

body[data-color-theme="dark"] .color-neutral-variant h5 {
  color: rgba(233, 239, 248, .86);
}

body[data-color-theme="dark"] .color-grayscale-chip {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(255,255,255,.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 20px 46px rgba(0,0,0,.28);
}

body[data-color-theme="dark"] .color-grayscale-chip :is(strong, code) {
  color: #F3F7FF;
}

body[data-color-theme="dark"] .color-grayscale-ramp {
  border-color: rgba(255,255,255,.12);
  background:
    linear-gradient(145deg, rgba(40, 48, 64, .46), rgba(14, 18, 27, .54)),
    rgba(18, 22, 32, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 58px rgba(0,0,0,.28);
}

body[data-color-theme="dark"] .color-grayscale-ramp h4 {
  border-bottom-color: rgba(255,255,255,.12);
  color: #F3F7FF;
}

body[data-color-theme="dark"] .color-role-group {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(145deg, rgba(40, 48, 64, .46), rgba(14, 18, 27, .54)),
    rgba(18, 22, 32, .62);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 24px 58px rgba(0,0,0,.28);
}

body[data-color-theme="dark"] .color-status-section .color-role-group h4 {
  border-bottom-color: rgba(255, 255, 255, .12);
}

body[data-color-theme="dark"] .color-component-role {
  border-color: rgba(255, 255, 255, .14);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(255,255,255,.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.24);
}

body[data-color-theme="dark"] .color-component-role-meta dt,
body[data-color-theme="dark"] .color-component-role-list {
  color: rgba(233, 239, 248, .74);
}

body[data-color-theme="dark"] .color-component-role-meta code {
  color: #F3F7FF;
}

body[data-color-theme="dark"] .color-text-section .color-role-row:nth-child(1) .color-role-cell {
  background:
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(246,249,255,.9)),
    #FFFFFF;
}

body[data-color-theme="dark"] .color-text-section .color-role-row:nth-child(1) .color-role-cell strong,
body[data-color-theme="dark"] .color-text-section .color-role-row:nth-child(1) .color-role-cell code {
  color: #111827;
}

body[data-color-theme="dark"] .color-text-section .color-role-row:nth-child(2) .color-role-cell {
  background:
    linear-gradient(145deg, rgba(22, 28, 39, .96), rgba(8, 13, 21, .96)),
    #0B1118;
}

body[data-color-theme="dark"] .color-grayscale-section .color-role-matrix h3 {
  border-bottom-color: rgba(255,255,255,.12);
}

body[data-color-theme="dark"] .color-grayscale-section .color-role-cell {
  border-color: rgba(255,255,255,.13);
  background:
    linear-gradient(145deg, rgba(255,255,255,.075), rgba(255,255,255,.035)),
    rgba(255,255,255,.035);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 42px rgba(0,0,0,.24);
}

body[data-color-theme="dark"] .color-grayscale-section .color-role-cell :is(strong, code) {
  color: #F3F7FF;
}

body[data-color-theme="dark"] .color-foundation .color-system-value-row {
  background: #F7FAFF;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .72),
    0 12px 28px rgba(0, 0, 0, .18);
}

body[data-color-theme="dark"] .color-foundation .color-system-value-row-dark {
  border-color: rgba(255, 255, 255, .12);
  background: #0B1118;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .08),
    0 16px 34px rgba(0, 0, 0, .34);
}

body[data-color-theme="dark"] .color-foundation .color-system-value-row :is(strong, code, dt, dd) {
  color: #111827;
}

body[data-color-theme="dark"] .color-foundation .color-system-value-row dd {
  color: #374151;
}

body[data-color-theme="dark"] .color-foundation .color-system-value-row-dark :is(strong, code, dt) {
  color: #F3F7FF;
}

body[data-color-theme="dark"] .color-foundation .color-system-value-row-dark dd {
  color: rgba(243, 247, 255, .78);
}

.color-foundation .color-neutral-row-light-value .color-neutral-cell-light-value {
  border-color: rgba(255,255,255,.12);
  background: var(--color-example-light-value-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 14px 30px rgba(0,0,0,.18);
}

.color-foundation .color-neutral-row-light-value .color-neutral-cell-light-value :is(strong, code) {
  color: var(--color-example-light-value-text);
}

.color-foundation .color-neutral-row-light-value .color-neutral-cell-light-value code {
  color: var(--color-example-light-value-muted);
}

.color-foundation .color-neutral-row-dark-value .color-neutral-cell-dark-value {
  border-color: rgba(15,23,42,.14);
  background: var(--color-example-dark-value-bg);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 14px 30px rgba(0,0,0,.16);
}

.color-foundation .color-neutral-row-dark-value .color-neutral-cell-dark-value :is(strong, code) {
  color: var(--color-example-dark-value-text);
}

.color-foundation .color-neutral-row-dark-value .color-neutral-cell-dark-value code {
  color: var(--color-example-dark-value-muted);
}

/* Contextual neutral roles are surface studies, not stacks of nested cards.
 * System Backgrounds, Grouped Backgrounds, and Separators share one pattern:
 * the row carries the named Light/Base/Elevated environment, while its values
 * sit on transparent comparison bands so their relationship stays legible. */
.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) > header {
  padding: 0 0 var(--lds-space-4);
  border-bottom-color: color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-row {
  padding: var(--lds-space-5);
  border-radius: var(--lds-radius-xl);
  overflow: hidden;
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-cell {
  min-height: 72px;
  padding: var(--lds-space-3) var(--lds-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-cell + .color-neutral-cell {
  border-top: 1px solid var(--color-neutral-context-rule);
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-row-surface-light {
  --color-neutral-context-rule: rgba(44, 53, 67, .14);
  border-color: rgba(78, 91, 110, .20);
  background:
    radial-gradient(ellipse 94% 82% at -12% -10%, rgba(255, 255, 255, .94) 0%, rgba(255, 255, 255, .22) 54%, transparent 84%),
    radial-gradient(ellipse 88% 78% at 112% 8%, rgba(179, 220, 235, .30) 0%, rgba(179, 220, 235, .06) 52%, transparent 84%),
    radial-gradient(ellipse 90% 80% at -12% 112%, rgba(221, 187, 215, .22) 0%, rgba(221, 187, 215, .04) 54%, transparent 86%),
    linear-gradient(145deg, #F8FAFD 0%, #E9EDF4 58%, #DCE2EA 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .92),
    0 24px 50px -34px rgba(41, 52, 69, .48);
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-row-surface-light :is(.color-neutral-surface, .color-neutral-cell strong) {
  color: #111827;
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-row-surface-light .color-neutral-cell code {
  color: #374151;
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) .color-neutral-row-surface-dark-elevated {
  --color-neutral-context-rule: rgba(223, 234, 255, .12);
  border-color: rgba(190, 213, 245, .18);
  background:
    radial-gradient(ellipse 96% 84% at -14% -12%, rgba(184, 206, 239, .18) 0%, rgba(184, 206, 239, .035) 52%, transparent 84%),
    radial-gradient(ellipse 88% 80% at 114% 6%, rgba(122, 82, 186, .16) 0%, rgba(122, 82, 186, .03) 54%, transparent 86%),
    radial-gradient(ellipse 90% 82% at 112% 110%, rgba(42, 154, 181, .13) 0%, rgba(42, 154, 181, .025) 54%, transparent 86%),
    linear-gradient(145deg, #252D3A 0%, #171E29 54%, #0F151F 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .16),
    0 30px 62px -38px rgba(0, 0, 0, .82),
    18px 20px 46px -40px rgba(42, 154, 181, .44),
    -16px 18px 42px -38px rgba(122, 82, 186, .38);
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) :is(.color-neutral-row-surface-dark-base, .color-neutral-row-surface-dark) {
  --color-neutral-context-rule: rgba(223, 234, 255, .09);
  border-color: rgba(190, 213, 245, .13);
  background:
    radial-gradient(ellipse 96% 84% at -14% -12%, rgba(146, 170, 208, .09) 0%, rgba(146, 170, 208, .018) 54%, transparent 86%),
    radial-gradient(ellipse 92% 84% at 114% 108%, rgba(36, 132, 156, .08) 0%, rgba(36, 132, 156, .014) 56%, transparent 88%),
    linear-gradient(145deg, #111721 0%, #090E16 58%, #05080D 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .09),
    0 24px 50px -40px rgba(0, 0, 0, .90);
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) :is(.color-neutral-row-surface-dark-elevated, .color-neutral-row-surface-dark-base, .color-neutral-row-surface-dark)
  :is(.color-neutral-surface, .color-neutral-cell strong) {
  color: #F3F7FF;
}

.color-foundation .color-neutral-family:is(
  .color-neutral-family-system-backgrounds,
  .color-neutral-family-grouped-backgrounds,
  .color-neutral-family-separators
) :is(.color-neutral-row-surface-dark-elevated, .color-neutral-row-surface-dark-base, .color-neutral-row-surface-dark)
  .color-neutral-cell code {
  color: rgba(243, 247, 255, .78);
}

.color-foundation .color-fill-card h6,
.color-foundation .color-fill-meta dt {
  color: #F3F7FF;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-foundation .color-fill-meta code {
  color: #F8FBFF;
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 760px) {
  .color-foundation-duo {
    grid-template-columns: 1fr;
  }

  .color-neutral-variant-grid {
    grid-template-columns: 1fr;
  }

  .color-fill-variant-grid {
    grid-template-columns: 1fr;
  }

  .color-neutral-row {
    grid-template-columns: 1fr;
  }

  .color-neutral-value-grid {
    grid-template-columns: 1fr;
  }

  .color-foundation-chip-grid,
  .color-status-grid,
  .color-chroma-grid {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }

  .color-role-row {
    grid-template-columns: 1fr;
  }

  .color-status-preview-grid {
    grid-template-columns: 1fr;
  }

  .color-system-grid {
    grid-template-columns: 1fr;
  }

  .color-system-spec-grid,
  .color-system-value-row {
    grid-template-columns: 1fr;
  }

  .color-system-value-row {
    justify-items: start;
  }

  .color-system-value-swatch,
  .color-system-value-row dl {
    justify-self: start;
  }

  .color-status-section .color-component-role {
    grid-template-columns: 1fr;
  }

  .color-system-spec-panel {
    grid-template-rows: auto auto 1fr;
  }

  .color-system-spec-preview {
    min-height: 220px;
  }
}

.foundation-type-demo {
  display: grid;
  gap: var(--lds-space-4);
  max-width: 760px;
}

.foundation-type-demo span {
  display: block;
  margin-bottom: var(--lds-space-1);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.foundation-type-demo h2 {
  font-size: var(--lds-display-lg);
  line-height: var(--lds-line-tight);
}

.foundation-type-demo h3 {
  font-size: var(--lds-display-sm);
  line-height: var(--lds-line-tight);
}

.foundation-type-demo h4 {
  font-size: var(--font-size-xl);
  line-height: var(--lds-line-tight);
}

.foundation-type-demo p {
  color: var(--color-text-secondary);
  font-size: var(--font-size-base);
  line-height: var(--lds-line-body);
}

.foundation-type-demo small {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.foundation-type-demo label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.foundation-type-page {
  display: grid;
  gap: var(--lds-space-6);
  min-width: 0;
}

.type-current-stack,
.type-candidate,
.type-direction-banner,
.type-finalist-section,
.type-live-specimen-section,
.type-row-compare-section,
.type-role-section,
.type-scale-section,
.type-stack-section,
.type-usage-section,
.type-guidance-grid > div {
  min-width: 0;
  padding: var(--lds-card-padding-standard);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-current-stack {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--lds-space-4);
  align-items: start;
}

.type-current-stack h3,
.type-current-stack p,
.type-direction-banner h3,
.type-direction-banner p,
.type-section-head h3,
.type-section-head p,
.type-candidate p,
.type-candidate header,
.type-finalist-card p,
.type-finalist-card header,
.type-role-section h3,
.type-guidance-grid h3,
.type-guidance-grid p {
  margin: 0;
}

.type-current-stack p,
.type-direction-banner p,
.type-section-head p,
.type-note,
.type-guidance-grid p {
  color: var(--color-text-secondary);
}

.type-kicker {
  display: inline-block;
  margin-bottom: var(--lds-space-2);
  color: var(--lds-direction-label-color, var(--color-text-muted));
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-current-stack code,
.type-candidate code,
.type-role-row code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
}

.type-finalist-section,
.type-specimen-section,
.type-live-specimen-section,
.type-row-compare-section,
.type-role-section,
.type-scale-section,
.type-stack-section,
.type-readiness-section,
.type-usage-section {
  display: grid;
  gap: var(--lds-space-4);
}

.type-section-head {
  display: grid;
  gap: var(--lds-space-1);
}

.type-candidate-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.type-direction-banner {
  display: grid;
  gap: var(--lds-space-4);
}

.type-direction-banner h3 {
  color: var(--color-text-primary);
  font-size: 28px;
  line-height: 1.16;
}

.type-direction-grid,
.type-readiness-summary,
.type-stack-grid,
.type-usage-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.type-direction-item,
.type-readiness-card,
.type-stack-card,
.type-usage-card {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.type-direction-item span,
.type-stack-card span,
.type-usage-card span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-direction-item strong,
.type-readiness-card strong,
.type-stack-card strong,
.type-usage-card strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: 1.25;
}

.type-stack-card code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  line-height: 1.45;
}

.type-stack-card p,
.type-readiness-card p,
.type-usage-card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.type-readiness-section {
  min-width: 0;
  padding: var(--lds-card-padding-standard);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-readiness-note {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.type-readiness-note p {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: var(--lds-line-body);
}

.type-readiness-note strong {
  color: var(--color-text-primary);
}

.foundation-editorial-grid,
.foundation-type-ii-grid {
  grid-template-columns: 1fr;
}

.foundation-type-ii-page {
  display: grid;
  grid-column: 1 / -1;
  gap: 0;
  min-width: 0;
}

.type2-hero,
.type2-band {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: clamp(28px, 4vw, 48px);
  min-width: 0;
  overflow: visible;
  padding: clamp(44px, 6vw, 84px) 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.type2-hero {
  min-height: 0;
  align-content: space-between;
  padding-top: clamp(24px, 4vw, 56px);
}

.type2-band {
  border-top: 1px solid var(--color-border-subtle);
}

.type2-hero-copy {
  display: grid;
  gap: var(--lds-space-5);
  max-width: 980px;
}

.type2-hero h3 {
  max-width: 13ch;
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(56px, 7vw, 92px);
  font-weight: 850;
  line-height: 1.04;
  letter-spacing: var(--lds-heading-tracking-display, -.012em);
}

.type2-hero p {
  max-width: 760px;
  margin: 0;
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: clamp(19px, 1.55vw, 23px);
  line-height: 1.5;
}

.type2-meter {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--color-border-subtle);
}

.type2-meter span {
  min-width: 0;
  padding-top: var(--lds-space-5);
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(20px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.08;
}

.type2-section-head {
  display: grid;
  grid-template-columns: 72px minmax(0, .62fr) minmax(260px, .38fr);
  gap: var(--lds-space-6);
  align-items: start;
  min-width: 0;
}

.type2-section-number {
  display:grid;
  gap:6px;
  align-content:start;
  min-width:0;
  font-variant-numeric:tabular-nums;
}

.type2-section-number small {
  color:var(--color-text-muted);
  font-family:"Hanken Grotesk",var(--lds-font-family);
  font-size:9px;
  font-weight:800;
  line-height:1;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.type2-section-number strong {
  color:var(--lds-type-token-color);
  font-family:var(--lds-font-mono);
  font-size:16px;
  font-weight:700;
  line-height:1;
  letter-spacing:.06em;
}

.type2-section-head h3,
.type2-section-head p {
  margin: 0;
}

.type2-section-head h3 {
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(38px, 4.2vw, 64px);
  font-weight: 820;
  line-height: 1.04;
  letter-spacing: var(--lds-heading-tracking-section, -.008em);
}

.type2-section-head p {
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: clamp(16px, 1.25vw, 18px);
  line-height: 1.58;
}

.type2-rows,
.type2-hierarchy-rows,
.type2-stack-list {
  display: grid;
  min-width: 0;
  border-top: 1px solid var(--color-border-subtle);
}

.type2-voice-row,
.type2-hierarchy-row,
.type2-stack-list div {
  display: grid;
  min-width: 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.type2-voice-row {
  grid-template-columns: minmax(280px, .34fr) minmax(0, 1fr) minmax(150px, .20fr);
  gap: clamp(24px, 3.5vw, 56px);
  align-items: center;
  padding: clamp(22px, 3vw, 36px) 0;
}

.type2-voice-identity {
  display:grid;
  gap:clamp(12px,1.4vw,20px);
  min-width:0;
}

.type2-voice-row span,
.type2-hierarchy-row span,
.type2-stack-list dt {
  color: var(--color-text-muted);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type2-voice-identity strong {
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(28px, 2.9vw, 42px);
  font-weight: 800;
  line-height: 1.04;
}

.type2-font-ui .type2-voice-identity strong {
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
}

.type2-font-a11y .type2-voice-identity strong {
  font-family:"Atkinson Hyperlegible Next","Atkinson Hyperlegible",var(--lds-font-a11y,var(--lds-font-family));
  font-weight:760;
}

.type2-font-fallback .type2-voice-identity strong {
  font-family:"Inter",system-ui,sans-serif;
}

.type2-font-mono .type2-voice-identity strong {
  font-family:var(--lds-font-mono);
  font-size:clamp(24px,2.3vw,34px);
  font-weight:650;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

.type2-voice-row p {
  max-width: 58ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.48;
}

.type2-voice-row code,
.type2-stack-list dd {
  min-width: 0;
  color: var(--lds-type-token-color);
  font-family: var(--lds-font-mono);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.type2-hierarchy-row {
  grid-template-columns: minmax(176px, .22fr) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
  padding: clamp(22px, 3.2vw, 42px) 0;
}

.type2-subsection-meta {
  display: grid;
  gap: var(--lds-space-2);
  align-content: start;
  min-width: 0;
  padding: 5px 0 5px var(--lds-space-4);
  border-left: 2px solid color-mix(in srgb, var(--lds-type-token-color) 44%, transparent);
}

.type2-subsection-meta span {
  color: var(--color-text-secondary);
  font-size: 11px;
  line-height: 1.25;
}

.type2-subsection-meta small {
  color: var(--color-text-muted);
  font-family: var(--lds-font-mono);
  font-size: 11px;
  line-height: 1.4;
}

.type2-hierarchy-row strong {
  color: var(--color-text-primary);
  font-family: var(--type2-row-family, "Hanken Grotesk", var(--lds-font-family));
  font-size: var(--type2-row-size, clamp(24px, 3vw, 46px));
  font-weight: var(--type2-row-weight, 650);
  line-height: var(--type2-row-line, 1.12);
  letter-spacing: var(--type2-row-spacing, -.02em);
}

.type2-hierarchy-row:nth-child(1) {
  --type2-row-family: "Satoshi", var(--lds-font-family);
  --type2-row-size: clamp(70px, 8vw, 112px);
  --type2-row-weight: 850;
  --type2-row-line: 1.02;
  --type2-row-spacing: -.055em;
}

.type2-hierarchy-row:nth-child(2) {
  --type2-row-family: "Satoshi", var(--lds-font-family);
  --type2-row-size: clamp(48px, 5.2vw, 76px);
  --type2-row-weight: 820;
  --type2-row-line: 1.04;
  --type2-row-spacing: -.045em;
}

.type2-hierarchy-row:nth-child(3) {
  --type2-row-family: "Satoshi", var(--lds-font-family);
  --type2-row-size: clamp(32px, 3.4vw, 52px);
  --type2-row-weight: 760;
  --type2-row-line: 1.08;
}

.type2-hierarchy-row:nth-child(4) {
  --type2-row-size: clamp(18px, 1.6vw, 23px);
  --type2-row-weight: 460;
  --type2-row-line: 1.55;
  --type2-row-spacing: -.006em;
}

.type2-hierarchy-row:nth-child(5) {
  --type2-row-size: clamp(14px, 1.2vw, 16px);
  --type2-row-weight: 700;
  --type2-row-line: 1.45;
  --type2-row-spacing: .01em;
}

.type2-hierarchy-row:nth-child(6) {
  --type2-row-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", var(--lds-font-family);
  --type2-row-size: clamp(20px, 1.8vw, 27px);
  --type2-row-weight: 760;
}

.type2-hierarchy-row:nth-child(7) {
  --type2-row-family: var(--lds-font-mono);
  --type2-row-size: clamp(12px, 1vw, 14px);
  --type2-row-weight: 560;
  --type2-row-line: 1.55;
  --type2-row-spacing: 0;
}

.type2-measure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--color-border-subtle);
}

.type2-measure-grid div {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-space-6) var(--lds-space-5) 0 0;
}

.type2-measure-grid div + div {
  padding-left: var(--lds-space-5);
  border-left: 1px solid var(--color-border-subtle);
}

.type2-measure-grid strong {
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(24px, 2.4vw, 38px);
  line-height: 1.05;
}

.type2-measure-grid p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}

.type2-measure-grid code {
  color: var(--lds-type-token-color);
  font-family: var(--lds-font-mono);
  font-size: 12px;
}

.type2-stack-list {
  margin: 0;
}

.type2-stack-list div {
  grid-template-columns: minmax(160px, .28fr) minmax(0, 1fr);
  gap: var(--lds-space-5);
  align-items: baseline;
  padding: var(--lds-space-5) 0;
}

.type2-stack-list dt,
.type2-stack-list dd {
  margin: 0;
}

.type2-mono-proof {
  display:grid;
  grid-template-columns:minmax(280px,.42fr) minmax(0,.58fr);
  gap:clamp(32px,6vw,88px);
  align-items:start;
  padding:clamp(28px,4vw,48px) 0;
  border-top:1px solid var(--color-border-subtle);
  border-bottom:1px solid var(--color-border-subtle);
}

.type2-mono-intro {
  display:grid;
  gap:var(--lds-space-4);
  min-width:0;
}

.type2-mono-intro > span,
.type2-mono-specimens dt {
  color:var(--color-text-muted);
  font-family:"Hanken Grotesk",var(--lds-font-family);
  font-size:12px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.type2-mono-intro > strong {
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:clamp(38px,5.4vw,76px);
  font-weight:600;
  line-height:1.04;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
}

.type2-mono-intro > p {
  max-width:42ch;
  margin:0;
  color:var(--color-text-secondary);
  font-family:var(--lds-font-mono);
  font-size:clamp(14px,1.3vw,18px);
  font-weight:500;
  line-height:1.65;
}

.type2-mono-specimens {
  display:grid;
  min-width:0;
  margin:0;
  border-top:1px solid var(--color-border-subtle);
}

.type2-mono-specimens div {
  display:grid;
  grid-template-columns:minmax(96px,.24fr) minmax(0,.76fr);
  gap:var(--lds-space-5);
  align-items:baseline;
  padding:var(--lds-space-4) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.type2-mono-specimens dt,
.type2-mono-specimens dd {
  min-width:0;
  margin:0;
}

.type2-mono-specimens dd {
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:clamp(14px,1.25vw,18px);
  font-weight:500;
  line-height:1.5;
  overflow-wrap:anywhere;
}

.type2-mono-doctrine {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(28px,5vw,72px);
}

.type2-mono-doctrine > div {
  display:grid;
  gap:var(--lds-space-3);
  min-width:0;
}

.type2-mono-doctrine strong {
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:clamp(18px,1.8vw,26px);
  font-weight:600;
  line-height:1.25;
}

.type2-mono-doctrine p {
  max-width:58ch;
  margin:0;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk",var(--lds-font-family);
  font-size:16px;
  line-height:1.6;
}

/* Spacing foundation — full-width editorial migration.
   Rhythm, scale, and alignment carry the page; containment appears only where
   parallel relationships need to be compared. */
.foundation-spacing-editorial-grid {
  grid-template-columns:1fr;
}

.foundation-spacing-editorial-page {
  display:grid;
  grid-column:1 / -1;
  gap:0;
  min-width:0;
}

.spacing-foundation-hero {
  display:grid;
  gap:clamp(32px,5vw,64px);
  min-height:0;
  align-content:space-between;
}

.spacing-foundation-hero .foundation-editorial-hero-copy {
  max-width:1040px;
}

.spacing-foundation-hero .foundation-editorial-hero-title {
  max-width:13ch;
}

.spacing-foundation-hero .foundation-editorial-hero-copy > p {
  max-width:68ch;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:clamp(19px,1.55vw,23px);
  line-height:1.5;
}

.spacing-hero-meter {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--color-border-subtle);
}

.spacing-hero-meter span {
  display:grid;
  gap:var(--lds-space-2);
  min-width:0;
  padding:var(--lds-space-5) var(--lds-space-4) 0 0;
  color:var(--color-text-muted);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:12px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.spacing-hero-meter strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(26px,2.8vw,40px);
  font-weight:820;
  line-height:1;
  letter-spacing:-.035em;
}

.spacing-editorial-band {
  display:grid;
  gap:clamp(32px,5vw,64px);
  min-width:0;
}

.spacing-section-head {
  display:grid;
  grid-template-columns:72px minmax(0,.62fr) minmax(260px,.38fr);
  gap:var(--lds-space-6);
  align-items:start;
  min-width:0;
}

.spacing-section-head :is(h3,p) {
  margin:0;
}

.spacing-section-head h3 {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(38px,4.2vw,64px);
  font-weight:820;
  line-height:1.04;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
  text-wrap:balance;
}

.spacing-section-head p {
  max-width:52ch;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:clamp(16px,1.25vw,18px);
  line-height:1.58;
}

.spacing-scale-calibrator {
  display:grid;
  gap:clamp(48px,7vw,88px);
  min-width:0;
}

.spacing-scale-group {
  display:grid;
  grid-template-columns:minmax(190px,.28fr) minmax(0,.72fr);
  gap:clamp(28px,5vw,72px);
  min-width:0;
}

.spacing-scale-group-head {
  display:grid;
  align-content:start;
  gap:var(--lds-space-5);
  min-width:0;
  padding-top:var(--lds-space-4);
  border-top:1px solid var(--color-border-subtle);
}

.spacing-scale-group-head > div {
  display:grid;
  gap:var(--lds-space-2);
}

.spacing-scale-group-head :is(h4,p) {
  margin:0;
}

.spacing-scale-group-head .eyebrow {
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.1em;
}

.spacing-scale-group-head h4 {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(28px,3vw,42px);
  font-weight:800;
  line-height:1;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

.spacing-scale-group-head > p {
  max-width:30ch;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:15px;
  line-height:1.55;
}

.spacing-scale-ledger,
.spacing-role-ledger,
.spacing-token-ledger {
  display:grid;
  min-width:0;
  border-top:1px solid var(--color-border-subtle);
}

.spacing-scale-ledger-row {
  display:grid;
  grid-template-columns:86px minmax(128px,1fr) minmax(180px,.72fr);
  gap:clamp(20px,2.8vw,44px);
  align-items:center;
  min-width:0;
  min-height:72px;
  padding:var(--lds-space-3) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.spacing-scale-ledger-row > strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(24px,2.4vw,34px);
  font-weight:760;
  line-height:1;
  font-variant-numeric:tabular-nums;
}

.spacing-scale-ledger-row > strong small {
  margin-left:3px;
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.04em;
}

.spacing-scale-measure {
  display:flex;
  align-items:center;
  min-width:0;
  min-height:32px;
  padding-left:1px;
}

.spacing-scale-interval {
  position:relative;
  display:block;
  width:var(--spacing-measure);
  max-width:100%;
  height:30px;
  border-inline:1px solid color-mix(in srgb,var(--color-accent) 72%,var(--color-text-primary));
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--color-accent) 7%,transparent),
    color-mix(in srgb,#20cfe7 6%,transparent) 54%,
    color-mix(in srgb,#ef4fa8 5%,transparent));
}

.spacing-scale-interval::before {
  content:"";
  position:absolute;
  top:50%;
  right:0;
  left:0;
  height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--color-accent) 86%,var(--color-text-primary)),
    color-mix(in srgb,#20cfe7 58%,var(--color-accent)) 55%,
    color-mix(in srgb,#ef4fa8 44%,var(--color-accent)));
  box-shadow:0 0 12px color-mix(in srgb,var(--color-accent) 22%,transparent);
}

.spacing-scale-interval::after {
  content:"";
  position:absolute;
  top:5px;
  bottom:5px;
  left:0;
  border-left:1px solid color-mix(in srgb,var(--color-accent) 38%,transparent);
}

.spacing-scale-interval.is-zero {
  border-right:0;
  background:none;
}

.spacing-scale-interval.is-zero::before {
  width:0;
  box-shadow:none;
}

.spacing-scale-ledger-row > p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(15px,1.15vw,17px);
  line-height:1.45;
}

.spacing-role-row {
  display:grid;
  grid-template-columns:minmax(100px,.18fr) minmax(150px,.25fr) 92px minmax(0,.57fr);
  gap:clamp(20px,3vw,48px);
  align-items:baseline;
  min-width:0;
  padding:clamp(20px,2.6vw,32px) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.spacing-role-row > span {
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.spacing-role-row > strong,
.spacing-role-row > b {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  line-height:1.08;
}

.spacing-role-row > strong {
  font-size:clamp(22px,2.1vw,30px);
  font-weight:760;
}

.spacing-role-row > b {
  font-size:clamp(28px,3vw,42px);
  font-weight:820;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
  font-variant-numeric:tabular-nums;
}

.spacing-role-row > p {
  max-width:56ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;
}

.spacing-relationship-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-width:0;
  border-top:1px solid var(--color-border-subtle);
  border-bottom:1px solid var(--color-border-subtle);
}

.spacing-relationship-example {
  display:grid;
  align-content:start;
  gap:var(--lds-space-5);
  min-width:0;
  padding:clamp(24px,3.4vw,44px) clamp(20px,3vw,40px);
}

.spacing-relationship-example:first-child {
  padding-left:0;
}

.spacing-relationship-example:last-child {
  padding-right:0;
}

.spacing-relationship-example + .spacing-relationship-example {
  border-left:1px solid var(--color-border-subtle);
}

.spacing-relationship-example header {
  display:flex;
  justify-content:space-between;
  gap:var(--lds-space-4);
  align-items:baseline;
}

.spacing-relationship-example header span {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(21px,2vw,30px);
  font-weight:760;
  line-height:1.08;
}

.spacing-relationship-example header strong {
  color:var(--lds-type-token-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
}

.spacing-relationship-proof {
  display:grid;
  gap:var(--relationship-gap);
  min-height:178px;
  align-content:center;
  padding:var(--lds-space-5);
  border:1px solid var(--color-border-subtle);
  background:color-mix(in srgb,var(--color-bg-surface) 62%,transparent);
}

.spacing-relationship-proof i {
  display:block;
  height:18px;
  border-radius:999px;
  background:linear-gradient(90deg,
    color-mix(in srgb,var(--color-text-primary) 16%,transparent),
    color-mix(in srgb,var(--color-accent) 34%,transparent));
}

.spacing-relationship-proof i:nth-child(2) { width:76%; }
.spacing-relationship-proof i:nth-child(3) { width:52%; }

.spacing-relationship-example > p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.55;
}

.spacing-token-ledger {
  margin:0;
}

.spacing-token-ledger > div {
  display:grid;
  grid-template-columns:minmax(180px,.35fr) minmax(0,.65fr);
  gap:var(--lds-space-6);
  align-items:baseline;
  min-width:0;
  padding:var(--lds-space-4) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.spacing-token-ledger :is(dt,dd) {
  min-width:0;
  margin:0;
}

.spacing-token-ledger dt {
  color:var(--color-text-primary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:16px;
  font-weight:700;
}

.spacing-token-ledger dd {
  display:grid;
  grid-template-columns:80px minmax(0,1fr);
  gap:var(--lds-space-5);
  align-items:baseline;
}

.spacing-token-ledger dd strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(22px,2vw,30px);
  font-variant-numeric:tabular-nums;
}

.spacing-token-ledger code {
  color:var(--lds-type-token-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  overflow-wrap:anywhere;
}

.spacing-compatibility-note {
  max-width:76ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.6;
}

.spacing-compatibility-note strong {
  color:var(--color-text-primary);
}

.spacing-accessibility-promises {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  min-width:0;
  border-top:1px solid var(--color-border-subtle);
  border-bottom:1px solid var(--color-border-subtle);
}

.spacing-accessibility-promises article {
  display:grid;
  gap:var(--lds-space-3);
  min-width:0;
  padding:clamp(24px,3.4vw,44px) clamp(20px,3vw,40px);
}

.spacing-accessibility-promises article:first-child { padding-left:0; }
.spacing-accessibility-promises article:last-child { padding-right:0; }

.spacing-accessibility-promises article + article {
  border-left:1px solid var(--color-border-subtle);
}

.spacing-accessibility-promises strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(38px,4.8vw,68px);
  font-weight:820;
  line-height:1;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
}

.spacing-accessibility-promises span {
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.spacing-accessibility-promises p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.55;
}

.spacing-accessibility-band blockquote {
  max-width:19ch;
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(36px,5vw,72px);
  font-weight:820;
  line-height:1.05;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
}

@media (max-width:840px) {
  .spacing-section-head,
  .spacing-scale-group,
  .spacing-role-row,
  .spacing-token-ledger > div {
    grid-template-columns:1fr;
  }

  .spacing-scale-group {
    gap:var(--lds-space-5);
  }

  .spacing-scale-group-head {
    grid-template-columns:minmax(150px,.35fr) minmax(0,.65fr);
    align-items:start;
  }

  .spacing-section-head {
    gap:var(--lds-space-4);
  }

  .spacing-scale-ledger-row {
    grid-template-columns:66px minmax(0,1fr);
    gap:var(--lds-space-3);
  }

  .spacing-scale-ledger-row > p {
    grid-column:1 / -1;
  }

  .spacing-relationship-grid,
  .spacing-accessibility-promises {
    grid-template-columns:1fr;
  }

  .spacing-relationship-example,
  .spacing-relationship-example:first-child,
  .spacing-relationship-example:last-child,
  .spacing-accessibility-promises article,
  .spacing-accessibility-promises article:first-child,
  .spacing-accessibility-promises article:last-child {
    padding-inline:0;
  }

  .spacing-relationship-example + .spacing-relationship-example,
  .spacing-accessibility-promises article + article {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  .spacing-token-ledger dd {
    grid-template-columns:72px minmax(0,1fr);
  }
}

@media (max-width:560px) {
  .spacing-hero-meter {
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:var(--lds-space-5);
  }

  .spacing-scale-ledger-row {
    grid-template-columns:58px minmax(0,1fr);
  }

  .spacing-scale-group-head {
    grid-template-columns:1fr;
    gap:var(--lds-space-3);
  }

  .spacing-relationship-proof {
    min-height:160px;
    padding:var(--lds-space-4);
  }

  .spacing-token-ledger dd {
    grid-template-columns:1fr;
    gap:var(--lds-space-2);
  }
}

.type-stack-card em {
  color: var(--lds-type-token-color);
  font-size: var(--font-size-xs);
  font-style: normal;
  font-weight: var(--font-weight-bold);
}

.type-live-specimen-list,
.type-scale-table {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.type-specimen-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, .45fr);
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-space-4);
}

.type-specimen-row + .type-specimen-row,
.type-scale-row + .type-scale-row {
  border-top: 1px solid var(--color-border-subtle);
}

.type-specimen-text {
  min-width: 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.type-specimen-meta {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
}

.type-specimen-meta strong {
  color: var(--color-text-primary);
  font-family: var(--lds-font-family);
  font-size: var(--font-size-sm);
}

.type-role-table-expanded .type-role-row {
  grid-template-columns: minmax(120px, .5fr) minmax(80px, .3fr) minmax(130px, .45fr) minmax(0, 1fr) minmax(0, 1fr);
}

.type-scale-row {
  display: grid;
  grid-template-columns: minmax(110px, .45fr) repeat(5, minmax(70px, .28fr)) minmax(0, 1.1fr);
  gap: var(--lds-space-3);
  align-items: start;
  min-width: 0;
  padding: var(--lds-space-3) var(--lds-space-4);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
}

.type-scale-row strong {
  color: var(--color-text-primary);
}

.type-scale-row span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.type-finalist-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.type-finalist-card {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.type-finalist-card header {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.type-finalist-card header strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.type-finalist-card header code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
}

.type-finalist-copy {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.type-finalist-display {
  color: var(--color-text-primary);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.type-finalist-title {
  color: var(--color-text-primary);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.28;
}

.type-finalist-body {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.type-finalist-meta {
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.type-candidate {
  display: grid;
  gap: var(--lds-space-4);
  align-content: start;
}

.type-candidate header {
  display: grid;
  gap: var(--lds-space-1);
}

.type-candidate header span {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
}

.type-specimen {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.type-font-system { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.type-font-inter { font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.type-font-atkinson { font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", sans-serif; }
.type-font-plex { font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif; }
.type-font-source { font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, sans-serif; }
.type-font-geist { font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.type-font-general { font-family: "General Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.type-font-satoshi { font-family: "Satoshi", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.type-font-hanken { font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.type-font-bricolage { font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.type-font-space { font-family: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.type-font-mono { font-family: var(--lds-font-mono); }

.type-editorial-page {
  gap: var(--lds-section-gap-standard);
  --type-content-inset: clamp(32px, 6vw, 72px);
}

.type-editorial-page .type-section-head h3 {
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
}

.type-editorial-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(24px, 3vw, 36px);
  align-items: start;
  min-width: 0;
  padding: clamp(32px, 5vw, 64px);
  border: 1px solid var(--type-hero-edge, var(--lds-shell-edge, var(--color-border-subtle)));
  border-radius: var(--lds-radius-lg);
  background: var(--type-hero-surface, var(--lds-shell-card, var(--color-bg-panel)));
  box-shadow: var(--type-hero-shadow, inset 0 1px 0 rgba(255,255,255,.10), 0 24px 58px -42px rgba(0,0,0,.44));
  backdrop-filter: blur(22px) saturate(150%);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
}

.foundation-type-page,
.typography-foundation-hero {
  grid-column: 1 / -1;
}

.type-editorial-hero::before {
  content: "";
  position: absolute;
  inset: -18% -10% 38%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 78% 54% at 12% 18%, rgba(118, 156, 255, .16), transparent 72%),
    radial-gradient(ellipse 58% 48% at 86% 8%, rgba(36, 202, 235, .13), transparent 74%),
    radial-gradient(ellipse 74% 54% at 20% 88%, rgba(232, 51, 164, .10), transparent 78%),
    radial-gradient(ellipse 64% 52% at 88% 94%, rgba(194, 211, 67, .08), transparent 78%);
  filter: blur(34px) saturate(132%);
  opacity: .78;
}

.type-hero-copy,
.type-hero-stack,
.type-principle-intro,
.type-role-card,
.type-editorial-specimen,
.type-weight-row,
.type-product-example {
  min-width: 0;
}

.type-hero-copy {
  display: grid;
  gap: clamp(12px, 1.6vw, 20px);
}

.type-hero-copy h3 {
  max-width: 860px;
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(52px, 6.4vw, 82px);
  font-weight: 800;
  line-height: var(--lds-line-display-tight);
}

.type-hero-copy p {
  max-width: 720px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 21px;
  line-height: 1.45;
}

.type-hero-copy .type-hero-lede {
  max-width: 760px;
  color: var(--color-text-primary);
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(21px, 1.9vw, 25px);
  font-weight: 520;
  line-height: 1.38;
  letter-spacing: -.014em;
}

.type-hero-copy .type-direction-statement {
  max-width: 720px;
  color: var(--color-text-primary);
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.58;
}

.type-direction-statement strong {
  color: inherit;
  font-weight: 800;
}

.type-opening-orchestra {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-4);
  align-items: start;
  min-width: 0;
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid color-mix(in srgb, var(--color-border-strong) 76%, transparent);
}

.type-voice-card {
  position: relative;
  isolation: isolate;
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  overflow: hidden;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
  border-radius: var(--lds-surface-card-radius, var(--lds-radius-md));
  background:
    linear-gradient(135deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    color-mix(in srgb, var(--color-bg-panel) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 18px 42px -34px rgba(0,0,0,.54);
  align-self: start;
}

.type-voice-card::before {
  content: "";
  position: absolute;
  inset: -26% -18% 42%;
  z-index: -1;
  pointer-events: none;
  background: var(--type-voice-aura, radial-gradient(ellipse at 20% 24%, rgba(148,185,255,.18), transparent 70%));
  filter: blur(24px) saturate(130%);
  opacity: .82;
}

.type-voice-card span {
  color: var(--lds-direction-label-color, var(--color-text-muted));
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.type-voice-card h4,
.type-voice-card p {
  margin: 0;
}

.type-voice-card h4 {
  color: var(--color-text-primary);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 850;
  line-height: var(--lds-line-display-tight);
  letter-spacing: var(--lds-heading-tracking-section, -.008em);
}

.type-voice-card:not(.type-voice-satoshi) {
  gap: 12px;
  padding: clamp(18px, 2.2vw, 26px);
}

.type-voice-card:not(.type-voice-satoshi) h4 {
  font-size: clamp(21px, 2vw, 28px);
  line-height: var(--lds-line-display-tight);
}

.type-voice-line {
  color: var(--color-text-primary);
  font-size: var(--type-voice-line-size, clamp(32px, 5vw, 68px));
  font-weight: var(--type-voice-line-weight, 850);
  line-height: var(--type-voice-line-height, var(--lds-line-display-tight));
  letter-spacing: var(--type-voice-line-spacing, -.045em);
}

.type-voice-philosophy {
  max-width: 54ch;
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.48;
}

.type-voice-satoshi {
  grid-column: 1 / -1;
  grid-row: auto;
  grid-template-columns: minmax(0, .92fr) minmax(260px, .58fr);
  align-items: end;
  --type-voice-aura:
    radial-gradient(ellipse 60% 46% at 18% 18%, rgba(148,185,255,.22), transparent 74%),
    radial-gradient(ellipse 62% 52% at 92% 26%, rgba(137,75,226,.18), transparent 78%),
    radial-gradient(ellipse 70% 52% at 14% 110%, rgba(232,51,164,.10), transparent 78%);
}

.type-voice-satoshi span {
  grid-column: 1 / -1;
}

.type-voice-satoshi h4 {
  grid-column: 1;
  align-self: start;
}

.type-voice-satoshi .type-voice-line {
  grid-column: 1;
  max-width: 10.5ch;
  font-size: clamp(44px, 5vw, 62px);
}

.type-voice-satoshi .type-voice-philosophy {
  grid-column: 2;
  grid-row: 2 / span 2;
  align-self: end;
}

.type-voice-hanken {
  --type-voice-aura:
    radial-gradient(ellipse 64% 42% at 12% 22%, rgba(36,202,235,.16), transparent 76%),
    radial-gradient(ellipse 70% 48% at 94% 84%, rgba(148,185,255,.11), transparent 78%);
  --type-voice-line-size: clamp(18px, 1.45vw, 21px);
  --type-voice-line-weight: 620;
  --type-voice-line-height: 1.22;
  --type-voice-line-spacing: -.018em;
}

.type-voice-atkinson {
  --type-voice-aura:
    radial-gradient(ellipse 62% 46% at 10% 18%, rgba(194,211,67,.12), transparent 74%),
    radial-gradient(ellipse 70% 52% at 92% 88%, rgba(36,202,235,.10), transparent 76%);
  --type-voice-line-size: clamp(18px, 1.55vw, 22px);
  --type-voice-line-weight: 720;
  --type-voice-line-height: 1.18;
  --type-voice-line-spacing: -.01em;
}

.type-voice-inter {
  --type-voice-aura:
    radial-gradient(ellipse 64% 44% at 14% 22%, rgba(255,255,255,.08), transparent 74%),
    radial-gradient(ellipse 70% 48% at 92% 90%, rgba(148,185,255,.10), transparent 78%);
  --type-voice-line-size: clamp(16px, 1.25vw, 18px);
  --type-voice-line-weight: 650;
  --type-voice-line-height: 1.38;
  --type-voice-line-spacing: -.006em;
}

.type-hero-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--lds-space-4);
  align-items: center;
  align-content: start;
  padding-top: var(--lds-space-6);
  border-top: 1px solid var(--color-border-strong);
}

.type-hero-stack span,
.type-hero-stack code {
  display: flex;
  min-height: 64px;
  align-items: center;
  min-width: 0;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.type-hero-stack span:nth-child(1) {
  font-size: 28px;
  font-weight: 820;
  line-height: 1.05;
}

.type-hero-stack span:nth-child(2) {
  font-size: 24px;
  font-weight: 720;
  line-height: 1.1;
}

.type-hero-stack span:nth-child(3) {
  font-size: 18px;
  font-weight: 720;
  line-height: 1.18;
}

.type-hero-stack code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}

.type-principle-band {
  position: relative;
  display: grid;
  gap: var(--lds-space-6);
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px) var(--type-content-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-surface-card-radius, var(--lds-radius-md));
  background:
    radial-gradient(ellipse 92% 56% at 14% 0%, rgba(118, 156, 255, .085), transparent 72%),
    radial-gradient(ellipse 70% 54% at 96% 104%, rgba(36, 202, 235, .07), transparent 74%),
    color-mix(in srgb, var(--color-bg-panel) 88%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 22px 58px -46px rgba(0,0,0,.56);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.type-live-lab {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px) var(--type-content-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-surface-card-radius, var(--lds-radius-md));
  background:
    radial-gradient(ellipse 86% 52% at 10% 0%, rgba(232, 51, 164, .07), transparent 74%),
    radial-gradient(ellipse 78% 58% at 96% 102%, rgba(118, 156, 255, .085), transparent 76%),
    color-mix(in srgb, var(--color-bg-panel) 90%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 22px 58px -46px rgba(0,0,0,.56);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.type-principle-intro {
  display: grid;
  gap: var(--lds-space-2);
  max-width: 860px;
}

.type-principle-intro strong {
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: 26px;
  line-height: 1.15;
}

.type-principle-intro p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 17px;
  line-height: 1.55;
}

.type-principle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lds-space-6);
}

.type-principle-card {
  min-width: 0;
}

.type-principle-card h4 {
  margin: 0 0 var(--lds-space-3);
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: 20px;
  font-weight: 700;
}

.type-principle-card ul {
  display: grid;
  gap: var(--lds-space-3);
  margin: 0;
  padding-left: 18px;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}

.type-live-lab {
  display: grid;
  gap: var(--lds-space-5);
  min-width: 0;
  padding-inline: var(--type-content-inset);
}

.type-role-showcase {
  position: relative;
  display: grid;
  gap: var(--lds-space-5);
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px) var(--type-content-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-surface-card-radius, var(--lds-radius-md));
  background:
    radial-gradient(ellipse 86% 52% at 8% 0%, rgba(118, 156, 255, .078), transparent 74%),
    radial-gradient(ellipse 74% 58% at 94% 104%, rgba(36, 202, 235, .064), transparent 76%),
    color-mix(in srgb, var(--color-bg-panel) 90%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 22px 58px -46px rgba(0,0,0,.56);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.type-specimen-showcase,
.type-measure-lab,
.type-weight-lab,
.type-character-proof,
.type-product-canvas {
  position: relative;
  display: grid;
  gap: var(--lds-space-5);
  min-width: 0;
  overflow: hidden;
  padding: clamp(28px, 4vw, 44px) var(--type-content-inset);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-surface-card-radius, var(--lds-radius-md));
  background:
    radial-gradient(ellipse 82% 50% at 10% 0%, rgba(118, 156, 255, .07), transparent 74%),
    radial-gradient(ellipse 74% 56% at 94% 104%, rgba(36, 202, 235, .058), transparent 76%),
    color-mix(in srgb, var(--color-bg-panel) 90%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 22px 58px -46px rgba(0,0,0,.56);
  backdrop-filter: blur(18px) saturate(132%);
  -webkit-backdrop-filter: blur(18px) saturate(132%);
}

.type-stack-section,
.type-readiness-section,
.type-editorial-page > .type-guidance-grid {
  margin-inline: var(--type-content-inset);
}

.type-live-lab-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, .36fr);
  gap: var(--lds-space-6);
  align-items: stretch;
  min-width: 0;
  padding: clamp(28px, 5vw, 56px);
  border-radius: var(--lds-radius-lg);
  background: var(--color-text-primary);
  color: var(--color-bg-surface);
}

.type-live-lab-copy {
  display: grid;
  gap: var(--lds-space-5);
  align-content: center;
  min-width: 0;
}

.type-live-lab-copy span {
  color: var(--color-bg-panel);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-live-lab-copy h4 {
  max-width: 820px;
  margin: 0;
  color: var(--color-bg-surface);
  font-size: clamp(48px, 7vw, 88px);
  font-weight: 850;
  line-height: var(--lds-line-display-editable);
  outline: 0;
}

.type-live-lab-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--color-bg-panel);
  font-size: 20px;
  line-height: 1.55;
  outline: 0;
}

.type-live-lab-copy [contenteditable="true"]:focus {
  outline: 2px dashed var(--color-accent);
  outline-offset: 8px;
}

.type-live-lab-controls {
  display: grid;
  gap: var(--lds-space-3);
  align-content: center;
  min-width: 0;
  padding-left: var(--lds-space-5);
  border-left: 1px solid var(--color-border-strong);
}

.type-live-chip {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.type-live-chip span {
  color: var(--color-bg-panel);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-live-chip strong {
  color: var(--color-bg-surface);
  font-size: 18px;
  line-height: 1.25;
}

.type-role-showcase-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--lds-space-4);
}

.type-role-card {
  display: grid;
  grid-template-columns: minmax(176px, .78fr) minmax(300px, 1.35fr) minmax(220px, .87fr);
  gap: var(--lds-space-6) var(--lds-space-8);
  align-items: center;
  min-height: 188px;
  padding: var(--lds-space-7) var(--lds-space-8);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-role-card-a11y {
  min-height: 204px;
}

.type-role-heading,
.type-role-voice,
.type-role-usage {
  display: grid;
  align-content: center;
  min-width: 0;
}

.type-role-heading {
  gap: var(--lds-space-2);
}

.type-role-voice {
  gap: var(--lds-space-4);
}

.type-role-usage {
  gap: var(--lds-space-5);
}

.type-role-card span {
  color: var(--color-text-muted);
  font-family: var(--lds-font-family);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-role-card h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(26px, 2.3vw, 36px);
  font-weight: 760;
  line-height: 1.06;
}

.type-role-card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-family);
  font-size: 14px;
  line-height: 1.5;
}

.type-role-card .type-role-sample {
  color: var(--color-text-primary);
  font-family: inherit;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 620;
  line-height: 1.18;
}

.type-role-card .type-role-glyph-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: baseline;
  min-width: 0;
  color: var(--color-text-primary);
  font-family: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", var(--lds-font-family);
  font-size: clamp(20px, 1.7vw, 26px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: none;
  white-space: normal;
}

.type-role-card .type-role-glyph-proof em {
  min-width: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: none;
  white-space: nowrap;
}

.type-role-card code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--lds-type-token-color);
  font-family: var(--lds-font-mono);
  font-size: 12px;
}

.type-specimen-stage {
  display: grid;
  gap: var(--lds-space-3);
}

.type-measure-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-4);
  align-items: stretch;
}

.type-measure-card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--lds-space-4);
  align-content: stretch;
  min-width: 0;
  min-height: 260px;
  padding: var(--lds-space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-measure-card span {
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: 22px;
  font-weight: 800;
}

.type-measure-card p {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: 17px;
  line-height: 1.58;
}

.type-measure-wide p {
  max-width: 100%;
}

.type-measure-good p {
  max-width: 34em;
}

.type-measure-tight p {
  max-width: 22em;
}

.type-measure-card code {
  align-self: end;
  color: var(--color-text-muted);
  font-family: var(--lds-font-mono);
  font-size: 12px;
}

.type-editorial-specimen {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .28fr);
  gap: var(--lds-space-6);
  align-items: center;
  min-width: 0;
  padding: clamp(22px, 3.4vw, 40px);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(255,255,255,.045), transparent 72%),
    color-mix(in srgb, var(--color-bg-panel) 78%, transparent);
}

.type-editorial-specimen-copy {
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.type-editorial-specimen-meta {
  display: grid;
  gap: var(--lds-space-1);
  align-content: center;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-family);
  font-size: 13px;
  line-height: 1.4;
}

.type-editorial-specimen-meta strong {
  color: var(--color-text-primary);
  font-size: 14px;
}

.type-editorial-specimen-meta code {
  color: var(--color-text-muted);
  font-family: var(--lds-font-mono);
  font-size: 12px;
}

.type-weight-list {
  display: grid;
  gap: var(--lds-space-3);
}

.type-weight-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(120px, .2fr) minmax(150px, .24fr);
  gap: var(--lds-space-5);
  align-items: baseline;
  padding: var(--lds-space-3) 0;
  border-bottom: 1px solid var(--color-border-subtle);
}

.type-weight-row div {
  color: var(--color-text-primary);
  font-weight: 800;
  line-height: 1.08;
  overflow-wrap: anywhere;
}

.type-weight-row span {
  color: var(--color-text-secondary);
  font-size: 14px;
}

.type-weight-row code {
  color: var(--color-text-muted);
  font-family: var(--lds-font-mono);
  font-size: 12px;
}

.type-character-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.type-character-card {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-space-6);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-character-card span {
  color: var(--color-text-muted);
  font-family: var(--lds-font-family);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-character-card strong {
  color: var(--color-text-primary);
  font-size: clamp(26px, 3vw, 36px);
  font-weight: 700;
  line-height: 1.18;
  overflow-wrap: anywhere;
}

.type-product-grid,
.type-product-spread {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: var(--lds-space-4);
}

.type-product-brief {
  display: grid;
  gap: var(--lds-space-5);
  align-content: start;
  min-width: 0;
  padding: clamp(28px, 5vw, 56px);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-product-brief > span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-product-brief h4 {
  max-width: 640px;
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(42px, 5vw, 68px);
  font-weight: 850;
  line-height: 1.04;
}

.type-product-brief p {
  max-width: 560px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 18px;
  line-height: 1.55;
}

.type-product-metadata {
  display: grid;
  grid-template-columns: minmax(120px, .3fr) minmax(0, 1fr);
  gap: var(--lds-space-2) var(--lds-space-4);
  max-width: 560px;
  padding-top: var(--lds-space-5);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 14px;
}

.type-product-metadata strong {
  color: var(--color-text-primary);
}

.type-product-stack {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.type-product-example {
  display: grid;
  gap: var(--lds-space-3);
  align-content: start;
  padding: var(--lds-space-5);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.type-product-example span {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: var(--lds-label-tracking);
  text-transform: uppercase;
}

.type-product-example h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: 24px;
  font-weight: 800;
}

.type-product-example strong {
  color: var(--color-text-primary);
  font-size: 17px;
  line-height: 1.3;
}

.type-product-example p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 15px;
  line-height: 1.55;
}

.type-product-proof {
  display: grid;
  grid-template-columns: minmax(76px, .35fr) minmax(0, 1fr);
  gap: var(--lds-space-2) var(--lds-space-4);
  margin-top: var(--lds-space-3);
  padding-top: var(--lds-space-4);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-secondary);
  font-size: 13px;
}

.type-product-proof strong {
  color: var(--color-text-primary);
  font-size: 13px;
  line-height: 1.4;
}

.type-product-proof span {
  color: var(--color-text-secondary);
  font-family: "Atkinson Hyperlegible Next", var(--lds-font-family);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

.type-display {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 32px;
  font-weight: 800;
  line-height: 1.12;
}

.type-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
}

.type-body {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1.55;
}

.type-ui-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-2);
  align-items: center;
}

.type-ui-row span,
.type-ui-row strong {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  padding: 0 var(--lds-space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-panel);
  font-size: 13px;
}

.type-ui-row span {
  color: var(--color-text-primary);
  font-weight: 700;
}

.type-ui-row strong {
  color: var(--color-accent);
  font-weight: 700;
}

.type-glyph-test {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
}

.type-note {
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.type-row-compare {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.type-compare-row {
  display: grid;
  grid-template-columns: minmax(190px, .36fr) minmax(0, 1fr);
  gap: var(--lds-space-4);
  align-items: start;
  min-width: 0;
  padding: var(--lds-space-4);
}

.type-compare-row + .type-compare-row {
  border-top: 1px solid var(--color-border-subtle);
}

.type-compare-row header {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.type-compare-row header strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.type-compare-row header code {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
}

.type-compare-copy {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
}

.type-compare-title {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.22;
}

.type-compare-body {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 16px;
  line-height: 1.55;
}

.type-role-table {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  overflow: hidden;
}

.type-role-row {
  display: grid;
  grid-template-columns: minmax(130px, .6fr) minmax(110px, .35fr) minmax(0, 1fr);
  gap: var(--lds-space-3);
  align-items: center;
  padding: var(--lds-space-3) var(--lds-space-4);
  background: var(--color-bg-surface);
}

.type-role-row + .type-role-row {
  border-top: 1px solid var(--color-border-subtle);
}

.type-role-row strong {
  color: var(--color-text-primary);
}

.type-role-row span {
  color: var(--color-text-secondary);
}

.type-guidance-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

@media (max-width: 860px) {
  .type-current-stack,
  .type-candidate-grid,
  .type-direction-grid,
  .type-finalist-grid,
  .type-principle-grid,
  .type-readiness-summary,
  .type-opening-orchestra,
  .type-role-showcase-grid,
  .type-live-lab-stage,
  .type-measure-grid,
  .type-stack-grid,
  .type-character-grid,
  .type-product-spread,
  .type-product-grid,
  .type-usage-grid,
  .type-guidance-grid,
  .type-compare-row,
  .type-editorial-hero,
  .type-specimen-row,
  .type-role-card {
    grid-template-columns: 1fr;
  }

  .type-role-card {
    min-height: 0;
    padding: var(--lds-space-6);
  }

  .type-voice-satoshi {
    grid-template-columns: 1fr;
  }

  .type-hero-copy h3 {
    font-size: clamp(44px, 14vw, 62px);
  }

  .type-hero-copy p {
    font-size: 18px;
  }

  .type-live-lab-controls {
    padding-left: 0;
    padding-top: var(--lds-space-5);
    border-top: 1px solid var(--color-border-strong);
    border-left: 0;
  }

  .type-editorial-specimen,
  .type-weight-row {
    grid-template-columns: 1fr;
    gap: var(--lds-space-3);
  }

  .type-role-row,
  .type-role-table-expanded .type-role-row,
  .type-scale-row {
    grid-template-columns: 1fr;
    gap: var(--lds-space-1);
  }

  .type2-section-head,
  .type2-voice-row,
  .type2-hierarchy-row,
  .type2-stack-list div {
    grid-template-columns: 1fr;
  }

  .type2-meter,
  .type2-measure-grid {
    grid-template-columns: 1fr;
  }

  .type2-measure-grid div + div {
    padding-left: 0;
    border-left: 0;
    border-top: 1px solid var(--color-border-subtle);
  }

  .type2-mono-proof,
  .type2-mono-doctrine {
    grid-template-columns:1fr;
  }

  .type2-hero {
    min-height: 0;
  }
}

.foundation-spacing-demo > div:not(.spacing-comparison) {
  display: grid;
  grid-template-columns: minmax(0, 72px) minmax(80px, .35fr) minmax(0, 1fr);
  gap: var(--lds-space-3);
  align-items: center;
}

.foundation-spacing-demo > div > span {
  display: block;
  height: 18px;
  min-width: 4px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-accent);
}

.spacing-comparison {
  display: grid;
  gap: var(--lds-space-3);
}

.spacing-good,
.spacing-bad {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.spacing-bad {
  gap: 2px;
  padding: var(--lds-space-2);
}

.spacing-good p,
.spacing-bad p,
.grid-break-demo p,
.foundation-icon-demo p,
.foundation-motion-demo p,
.foundation-breakpoint-demo p,
.foundation-darkmode-demo p {
  margin: 0;
  color: var(--color-text-secondary);
}

.grid-shell-demo {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.grid-shell-demo > * {
  min-height: 100px;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.grid-shell-demo main {
  min-height: 180px;
  color: var(--color-text-primary);
}

.foundation-layout-refresh {
  display: grid;
  gap: var(--lds-section-gap-compact);
}

.foundation-layout-refresh .foundation-value-grid {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-card-padding-standard);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.foundation-layout-refresh .foundation-value-grid h3,
.foundation-layout-refresh .foundation-value-grid p {
  margin: 0;
}

.foundation-layout-refresh .foundation-value-grid p {
  color: var(--color-text-secondary);
}

.spacing-scale-strip {
  display: grid;
  gap: var(--lds-space-2);
}

.spacing-scale-item {
  display: grid;
  grid-template-columns: 112px 48px minmax(0, 1fr);
  gap: var(--lds-space-3);
  align-items: center;
  min-width: 0;
}

.spacing-scale-item span {
  display: block;
  block-size: 14px;
  min-inline-size: 2px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-accent);
}

.spacing-scale-item strong,
.foundation-token-table strong,
.layout-grid-card strong,
.breakpoint-rail strong {
  color: var(--color-text-primary);
}

.foundation-token-table {
  display: grid;
  gap: var(--lds-space-2);
}

.foundation-token-table > div {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) 70px minmax(0, 1.5fr);
  gap: var(--lds-space-3);
  align-items: center;
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-surface);
}

.foundation-token-table span {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.foundation-token-table code,
.spacing-scale-item code,
.layout-grid-card code,
.breakpoint-rail code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
  font-size: var(--font-size-xs);
  overflow-wrap: anywhere;
}

.layout-grid-spec {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-grid-gutter-mobile);
}

.layout-grid-card {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-card-padding-compact);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.layout-grid-card p {
  color: var(--color-text-secondary);
}

.layout-columns {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.layout-columns span {
  display: grid;
  place-items: center;
  min-height: 42px;
  border-radius: var(--lds-radius-sm);
  background: var(--color-selected-bg);
  color: var(--color-selected-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.breakpoint-rail {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--lds-space-2);
}

.breakpoint-rail span {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-surface);
}

.grid-break-demo,
.foundation-breakpoint-demo,
.foundation-icon-demo,
.foundation-elevation-demo,
.foundation-radius-demo {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.grid-break-demo span,
.foundation-breakpoint-demo > div,
.foundation-icon-demo > div,
.elevation-sample,
.radius-sample,
.border-sample,
.motion-overlay-future,
.darkmode-card,
.darkmode-steps span {
  display: grid;
  gap: var(--lds-space-1);
  align-content: center;
  min-height: 84px;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.radius-sample.sm { border-radius: var(--lds-radius-sm); }
.radius-sample.md { border-radius: var(--lds-radius-md); }
.radius-sample.lg { border-radius: var(--lds-radius-lg); }
.radius-sample.pill { border-radius: var(--lds-radius-pill); }
.border-sample.subtle { border-color: var(--color-border-subtle); }
.border-sample.strong { border-color: var(--color-border-strong); border-width: 2px; }
.border-sample.focus { border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-focus-ring); }

.foundation-focus-demo {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  align-items: start;
}

.focus-demo-button,
.motion-sample {
  min-height: var(--lds-touch-target-min);
  padding: 0 var(--lds-space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  font: inherit;
  font-weight: var(--font-weight-semibold);
}

.focus-demo-button,
.focus-demo-link,
.focus-demo-field input,
.focus-demo-tabs .focused {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 3px;
}

.focus-demo-link {
  width: fit-content;
  color: var(--color-text-primary);
  text-underline-offset: 4px;
  font-weight: var(--font-weight-semibold);
}

.focus-demo-field {
  display: grid;
  gap: var(--lds-space-2);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.focus-demo-field input {
  min-height: var(--lds-touch-target-min);
  padding: 0 var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-primary);
  font: inherit;
}

.focus-demo-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-2);
}

.focus-demo-tabs span {
  padding: var(--lds-space-2) var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
}

.focus-demo-tabs .selected {
  border-color: var(--color-accent);
  background: var(--color-success-bg);
}

.elevation-sample.flat { box-shadow: var(--lds-shadow-0); }
.elevation-sample.raised { box-shadow: var(--lds-shadow-1); }
.elevation-sample.overlay { box-shadow: var(--lds-shadow-3); }
.elevation-sample.tooltip {
  color: var(--lds-tooltip-text);
  background: var(--lds-tooltip-bg);
  box-shadow: var(--lds-shadow-2);
}

.foundation-icon-demo > div {
  justify-items: start;
}

.demo-icon,
.icon-hit-demo {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-primary);
  background: var(--color-bg-panel);
  font-weight: var(--font-weight-bold);
}

.demo-icon.sm { width: var(--lds-icon-sm); height: var(--lds-icon-sm); font-size: 11px; }
.demo-icon.md { width: var(--lds-icon-md); height: var(--lds-icon-md); font-size: 13px; }
.demo-icon.lg { width: var(--lds-icon-lg); height: var(--lds-icon-lg); font-size: 15px; }

.icon-hit-demo {
  width: var(--lds-touch-target-min);
  height: var(--lds-touch-target-min);
  font: inherit;
  font-size: 22px;
}

.foundation-motion-demo {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  align-items: center;
}

.motion-sample {
  transition: background var(--lds-motion-fast) ease, transform var(--lds-motion-fast) ease;
}

.motion-sample.active {
  transform: translateY(1px);
  background: var(--color-success-bg);
}

.motion-overlay-future {
  border-style: dashed;
  color: var(--color-text-secondary);
}

.foundation-breakpoint-demo span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.foundation-darkmode-demo {
  grid-template-columns: minmax(0, 1fr);
}

.darkmode-card.future {
  color: var(--color-text-secondary);
  border-style: dashed;
  background: var(--color-bg-panel);
}

.darkmode-card strong {
  color: var(--color-text-primary);
}

.darkmode-steps {
  display: grid;
  gap: var(--lds-space-2);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

.labeled-example {
  display: grid;
  gap: var(--lds-space-3);
}

.atom-spec-layout,
.atom-state-grid {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.atom-state-grid {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.atom-state-card {
  display: grid;
  gap: var(--lds-space-3);
  align-content: center;
  min-height: 132px;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.atom-state-demo {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--lds-space-2);
}

.legion-vivid-light-scope .atom-text-link {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.atom-inline-example {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.legion-vivid-light-scope .atom-text-link-lg {
  font-size: var(--font-size-lg);
}

.legion-vivid-light-scope .atom-text-link-sm {
  font-size: var(--font-size-sm);
}

.legion-vivid-light-scope .atom-text-link:hover,
.legion-vivid-light-scope .atom-text-link.state-hover {
  color: var(--color-link-hover);
  text-decoration-thickness: 2px;
}

.legion-vivid-light-scope .atom-text-link:focus-visible,
.legion-vivid-light-scope .atom-text-link.state-focus {
  border-radius: var(--lds-radius-sm);
  box-shadow: 0 0 0 3px var(--color-focus-ring);
  outline: none;
}

.legion-vivid-light-scope .atom-text-link:active,
.legion-vivid-light-scope .atom-text-link.state-active {
  color: var(--color-accent-active);
}

.legion-vivid-light-scope .atom-text-link.is-disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
  text-decoration-color: var(--color-text-disabled);
}

.text-link-spec {
  display: grid;
  gap: var(--lds-space-5);
}

.source-component-page {
  display: grid;
  gap: var(--lds-space-5);
}

.source-component-page,
.table-source-page,
.tabs-source-page,
.input-source-page,
.notification-source-page {
  padding-inline: var(--lds-content-rail-gutter);
}

.tl-standard-notice {
  border-style: dashed;
}

.source-text-link {
  --tl-link: var(--color-link);
  --tl-link-hover: var(--color-link-hover);
  --tl-link-active: var(--color-accent-active);
  --tl-focus: var(--color-focus-ring);
  --tl-disabled: var(--color-text-disabled);
  position: relative;
  display: inline;
  color: var(--tl-link);
  font-weight: var(--font-weight-semibold);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition:
    color var(--lds-motion-fast) ease,
    text-decoration-thickness var(--lds-motion-fast) ease,
    background-size var(--lds-motion-fast) ease;
}

.source-text-link:hover,
.source-text-link.state-hover {
  color: var(--tl-link-hover);
  text-decoration-thickness: 2px;
}

.source-text-link:focus-visible,
.source-text-link.state-focus {
  outline: 2px dashed var(--tl-focus);
  outline-offset: 4px;
  border-radius: 2px;
  box-shadow: none;
}

.source-text-link:active,
.source-text-link.state-active {
  color: var(--tl-link-active);
  background-size: 100% 1px;
}

.source-text-link.state-active-hover {
  color: var(--tl-link-hover);
  text-decoration-thickness: 2px;
  background-size: 100% 2px;
}

.source-text-link.is-disabled {
  color: var(--tl-disabled);
  cursor: not-allowed;
  text-decoration-color: currentColor;
  background-size: 0 1px;
}

.source-text-link.size-large {
  font-size: var(--font-size-lg);
  line-height: 1.35;
}

.source-text-link.size-small {
  font-size: var(--font-size-sm);
  line-height: 1.35;
}

.source-text-link.truncate {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  text-decoration-line: none;
  background-size: 100% 1px;
}

.source-text-link.wrap {
  white-space: normal;
}

.source-text-link.truncate:hover,
.source-text-link.truncate.state-hover {
  background-size: 100% 2px;
}

.tl-anatomy-grid,
.tl-layout-grid,
.tl-config-grid,
.tl-behavior-grid,
.tl-two-column,
.tl-token-grid {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.tl-anatomy-grid {
  grid-template-columns: minmax(280px, 1fr) minmax(240px, .8fr);
}

.tl-anatomy-stage {
  position: relative;
  min-height: 220px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: 0;
  background: var(--color-bg-surface);
}

.tl-anatomy-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
}

.tl-svg-link-label {
  fill: var(--color-link);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}

.tl-svg-link-underline {
  stroke: var(--color-link);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tl-svg-callout-number {
  fill: var(--color-link);
}

.tl-svg-callout-digit {
  fill: var(--color-accent-text);
  font-size: 13px;
  font-weight: 800;
  dominant-baseline: central;
  alignment-baseline: middle;
  transform: translateY(0.75px);
}

.tl-svg-pointer {
  stroke: var(--color-link);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tl-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--color-link);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tl-spec-list,
.tl-anatomy-key,
.tl-history-list {
  display: grid;
  gap: var(--lds-space-3);
}

.tl-spec-list p,
.tl-history-list p {
  margin: 0;
  display: grid;
  gap: 4px;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.tl-spec-list span,
.tl-history-list span {
  color: var(--color-text-secondary);
}

.tl-spec-list strong {
  display: inline-flex;
  align-items: center;
  gap: var(--lds-space-2);
}

.tl-inline-number {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--lds-radius-pill);
  color: var(--color-accent-text);
  background: var(--color-link);
  font-size: 13px;
  line-height: 1;
}

.tl-spec-list strong .tl-inline-number {
  color: var(--color-accent-text);
}

.tl-anatomy-key {
  align-self: center;
  align-content: center;
}

.tl-anatomy-key section {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  column-gap: var(--lds-space-2);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tl-anatomy-key h3,
.tl-anatomy-key p {
  margin: 0;
}

.tl-anatomy-key-copy {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.tl-anatomy-key h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  line-height: 16px;
}

.tl-anatomy-key p {
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.tl-anatomy-key .anatomy-number {
  width: 18px;
  height: 18px;
  display: block;
  overflow: visible;
  border: 0;
  border-radius: 0;
  color: var(--color-link);
  background: transparent;
}

.tl-anatomy-key .anatomy-number circle {
  fill: var(--color-bg-surface);
  stroke: var(--color-link);
  stroke-width: 1;
}

.tl-anatomy-key .anatomy-number text {
  fill: var(--color-link);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: middle;
  alignment-baseline: middle;
}

.tl-config-groups {
  display: grid;
  gap: var(--lds-space-5);
}

.tl-config-group {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.tl-config-group > h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.tl-config-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.tl-config-card,
.tl-behavior-card,
.tl-measure-card,
.tl-state-card,
.tl-token-grid section {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.tl-config-card > *,
.tl-behavior-card > *,
.tl-measure-card > *,
.tl-state-card > * {
  min-width: 0;
}

.tl-config-card .bullet-list {
  overflow-wrap: anywhere;
}

.tl-config-card h3,
.tl-behavior-card h3,
.tl-measure-card figcaption {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.tl-config-demo {
  min-height: 72px;
  display: flex;
  align-items: center;
  margin: 0;
}

.tl-inline-copy {
  margin: 0;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.tl-measure {
  display: inline-block;
  max-width: 210px;
  min-width: 0;
}

.tl-measure.truncate {
  display: block;
  width: 210px;
}

.tl-measure.wrap {
  max-width: 230px;
}

.tl-layout-grid {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tl-layout-stack {
  display: grid;
  gap: var(--lds-space-4);
}

.tl-underline-panel,
.tl-inline-panel {
  min-height: 220px;
}

.tl-source-value-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--lds-space-3);
  margin-bottom: var(--lds-space-4);
}

.tl-source-value-grid div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-inset);
}

.tl-source-value-grid strong {
  color: var(--color-text-primary);
}

.tl-source-value-grid span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.tl-measure-card {
  margin: 0;
}

.tl-baseline-demo {
  display: grid;
  gap: 6px;
  align-content: start;
}

.tl-baseline-label {
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
}

.tl-baseline-rule {
  width: 56px;
  height: 1px;
  background: var(--color-link);
}

.tl-baseline-rule.hover {
  height: 2px;
}

.tl-baseline-note,
.tl-hitbox-note {
  color: var(--color-text-helper);
  font-size: var(--font-size-sm);
}

.tl-hitarea-spec {
  display: grid;
  gap: var(--lds-space-4);
}

.tl-hitarea-panel {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: var(--lds-space-6);
  align-items: center;
  min-height: 180px;
  padding: var(--lds-space-6);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.tl-hitarea-figure {
  margin: 0;
  display: grid;
  place-items: center;
  min-width: 0;
}

.tl-hitarea-svg {
  display: block;
  width: min(100%, 280px);
  height: auto;
  overflow: visible;
}

.tl-hitarea-target {
  fill: color-mix(in srgb, var(--color-selected-bg) 20%, transparent);
  stroke: var(--color-link);
  stroke-width: 1;
  stroke-dasharray: 3 2;
}

.tl-hitarea-measure-line {
  stroke: var(--color-link);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tl-hitarea-label {
  fill: var(--color-link);
  font-size: 12px;
  line-height: 1;
}

.tl-hitarea-label.left {
  font-size: 12px;
}

.tl-hitarea-link {
  fill: var(--color-link);
  font-size: 16px;
  font-weight: var(--font-weight-regular);
}

.tl-hitarea-link-rule {
  stroke: var(--color-link);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tl-hitarea-box {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px dashed var(--color-link);
  background: color-mix(in srgb, var(--color-selected-bg) 28%, transparent);
}

.tl-hitarea-natural {
  position: relative;
  display: grid;
  gap: var(--lds-space-2);
  min-height: 96px;
  align-content: center;
  justify-items: start;
  padding-left: 0;
}

.tl-hitarea-box.natural-min {
  position: absolute;
  left: 0;
  top: 6px;
  width: 100%;
  max-width: 168px;
  pointer-events: none;
}

.tl-hitarea-natural-target {
  min-width: var(--lds-touch-target-min);
  min-height: var(--lds-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--lds-space-3);
  border: 1px dashed var(--color-link);
  background: color-mix(in srgb, var(--color-selected-bg) 20%, transparent);
}

.tl-hitarea-table {
  display: grid;
  gap: var(--lds-space-2);
  margin: 0;
  max-width: 520px;
}

.tl-hitarea-table div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(96px, auto);
  gap: var(--lds-space-3);
}

.tl-hitarea-table dt,
.tl-hitarea-table dd {
  margin: 0;
  font-size: var(--font-size-sm);
}

.tl-hitarea-table dt {
  color: var(--color-text-secondary);
}

.tl-hitarea-table dd {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.tl-overflow-spec {
  display: grid;
  gap: var(--lds-space-5);
  padding-top: var(--lds-space-5);
  border-top: 1px solid var(--color-border-subtle);
}

.tl-overflow-spec h3,
.tl-overflow-spec h4,
.tl-overflow-case h5,
.tl-overflow-case p {
  margin: 0;
}

.tl-overflow-spec h3 {
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
}

.tl-overflow-spec h4 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.tl-overflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(260px, 1fr));
  gap: var(--lds-space-5);
}

.tl-overflow-case {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.tl-overflow-art {
  min-height: 150px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.tl-overflow-constrain {
  display: block;
  width: 96px;
}

.tl-overflow-wrap-demo {
  display: block;
  width: 72px;
}

.tl-overflow-case h5 {
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.tl-overflow-case p {
  color: var(--color-text-secondary);
}

.tl-offset-panel,
.tl-keyframe-panel {
  display: grid;
  gap: var(--lds-space-3);
  margin-top: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.tl-offset-panel h3,
.tl-keyframe-panel h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
}

.tl-offset-table {
  width: 100%;
  border-collapse: collapse;
  overflow-wrap: anywhere;
}

.tl-offset-table th,
.tl-offset-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: top;
}

.tl-offset-table th {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.tl-offset-table td {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.tl-state-surface {
  display: grid;
  gap: var(--lds-space-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-inset);
}

.tl-state-surface.dark {
  --color-bg-surface: #14161B;
  --color-bg-panel: #1D2026;
  --color-bg-inset: #0E1014;
  --color-border-subtle: #232830;
  --color-border-standard: #333942;
  --color-text-primary: #F4F6F9;
  --color-text-secondary: #AEB4BD;
  --color-text-disabled: #5A616A;
  --color-link: #6FB0FF;
  --color-link-hover: #93C4FF;
  --color-accent-active: #0A4FE0;
  --color-focus-ring: #2E86FF;
  background: #0A0C10;
}

.tl-state-surface.dark .source-text-link {
  --tl-link: #6FB0FF;
  --tl-link-hover: #93C4FF;
  --tl-link-active: #0A4FE0;
  --tl-focus: #2E86FF;
  --tl-disabled: #5A616A;
}

.tl-state-card > span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.tl-state-card > div {
  min-height: 44px;
  display: flex;
  align-items: center;
}

.tl-behavior-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tl-keyframe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--lds-space-4);
}

.tl-keyframe-grid section {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-inset);
}

.tl-keyframe-grid h4,
.tl-keyframe-grid p {
  margin: 0;
}

.tl-keyframe-grid h4 {
  color: var(--color-text-primary);
}

.tl-keyframe-grid p {
  color: var(--color-text-secondary);
}

.tl-keyframe-steps {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tl-keyframe-steps li {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: center;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.tl-keyframe-steps span {
  color: var(--color-text-helper);
}

.tl-keyframe-steps b {
  color: var(--color-text-primary);
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
}

.tl-two-column {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.tl-token-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.tl-token-grid code {
  color: var(--color-link);
  white-space: normal;
  word-break: break-word;
}

.tl-token-grid span {
  color: var(--color-text-secondary);
}

.tl-implementation-notes {
  padding: var(--lds-space-4);
  border: 1px dashed var(--color-border-standard);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.source-text-link-caret {
  --tlc-link: var(--color-link);
  --tlc-link-hover: var(--color-link-hover);
  --tlc-focus: var(--color-focus-ring);
  --tlc-disabled: var(--color-text-disabled);
  min-width: var(--lds-touch-target-min);
  min-height: var(--lds-touch-target-min);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--component-icon-text-gap);
  color: var(--tlc-link);
  font-weight: var(--font-weight-semibold);
  line-height: 1.25;
  text-decoration: none;
  background: transparent;
  border-radius: var(--lds-radius-sm);
  cursor: pointer;
}

.source-text-link-caret.inline {
  min-width: 0;
  min-height: 0;
  display: inline-flex;
  vertical-align: baseline;
}

.source-text-link-caret.diagram {
  min-width: 0;
  min-height: 0;
  height: 20px;
  padding: 0;
  justify-content: flex-start;
  color: var(--color-link);
  font-size: 16px;
  line-height: 20px;
}

.source-text-link-caret.caret-left {
  gap: 4px;
}

.source-text-link-caret .tlc-caret {
  flex: 0 0 auto;
  width: 12px;
  height: 12px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  line-height: 1;
  transform: translateX(0);
  transition: transform var(--lds-motion-fast) ease;
}

.tlc-caret-svg {
  width: 12px;
  height: 12px;
  display: block;
  overflow: visible;
}

.tlc-caret-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.source-text-link-caret:hover,
.source-text-link-caret.state-hover,
.source-text-link-caret.state-active {
  color: var(--tlc-link-hover);
}

@media (hover: hover) and (pointer: fine) {
  .source-text-link-caret:hover .tlc-caret,
  .source-text-link-caret.state-hover .tlc-caret,
  .source-text-link-caret.state-active .tlc-caret {
    transform: translateX(4px);
  }

  .source-text-link-caret.caret-left:hover .tlc-caret,
  .source-text-link-caret.caret-left.state-hover .tlc-caret,
  .source-text-link-caret.caret-left.state-active .tlc-caret {
    transform: translateX(-4px);
  }
}

.source-text-link-caret.state-active-hover .tlc-caret {
  transform: translateX(0);
}

.source-text-link-caret.state-focus,
.source-text-link-caret:focus-visible {
  outline: 2px dashed var(--tlc-focus);
  outline-offset: 3px;
}

.source-text-link-caret.is-disabled {
  color: var(--tlc-disabled);
  cursor: default;
  opacity: 0.5;
}

.source-text-link-caret.size-large {
  font-size: var(--font-size-lg);
}

.source-text-link-caret.size-small {
  min-height: 32px;
  font-size: var(--font-size-sm);
}

.source-text-link-caret.native-small {
  min-height: var(--lds-touch-target-min);
  font-size: 13px;
  line-height: 16px;
}

.source-text-link-caret.native-small .tlc-caret,
.source-text-link-caret.native-small .tlc-caret-svg {
  width: 9px;
  height: 9px;
}

.source-text-link-caret.native-default {
  min-height: var(--lds-touch-target-min);
  font-size: 16px;
  line-height: 20px;
}

.source-text-link-caret.native-large {
  min-height: 44px;
  font-size: 33px;
  line-height: 41px;
}

.source-text-link-caret.native-large .tlc-caret,
.source-text-link-caret.native-large .tlc-caret-svg {
  width: 25px;
  height: 25px;
}

.source-text-link-caret.truncate {
  display: flex;
  width: 210px;
  min-width: 0;
  justify-content: flex-start;
}

.source-text-link-caret.truncate .tlc-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 1px;
}

.source-text-link-caret.wrap {
  max-width: 156px;
  min-width: 0;
  min-height: var(--lds-touch-target-min);
  color: var(--color-link);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

.source-text-link-caret.wrap .tlc-label {
  min-width: 0;
  white-space: normal;
}

.source-text-link-caret.wrap-right {
  display: block;
  text-align: left;
}

.source-text-link-caret.wrap-right .tlc-label {
  display: inline;
}

.source-text-link-caret.wrap-right .tlc-caret {
  display: inline-grid;
  margin-left: 6px;
  vertical-align: -1px;
}

.source-text-link-caret.caret-left.wrap-left {
  display: inline-flex;
  align-items: flex-start;
  gap: 4px;
  text-align: left;
}

.source-text-link-caret.caret-left.wrap-left .tlc-caret {
  margin-top: calc((20px - 12px) / 2);
}

.source-text-link-caret.wrap-left .tlc-label {
  display: block;
}

.tlc-anatomy-stage {
  background: var(--color-bg-surface);
}

.tlc-svg-foreign {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: visible;
}

.tlc-svg-label,
.tlc-diagram-label {
  fill: var(--color-text-primary);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}

.tlc-svg-caret {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.tl-hitarea-svg .tlc-svg-caret {
  stroke: var(--color-link);
}

.tlc-layout-grid {
  display: grid;
  grid-template-columns: minmax(280px, 1.1fr) minmax(220px, 0.9fr);
  gap: var(--lds-space-4);
  align-items: center;
}

.tlc-layout-art {
  margin: 0;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 190px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.tlc-layout-svg {
  width: min(100%, 360px);
  height: auto;
  overflow: visible;
}

.tlc-guide-line {
  stroke: var(--color-link);
  stroke-width: 1;
  stroke-dasharray: 2 2;
  vector-effect: non-scaling-stroke;
}

.tlc-measure-orange {
  stroke: var(--color-warning);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.tlc-spacing-strip {
  fill: color-mix(in srgb, var(--color-warning) 42%, transparent);
}

.tlc-measure-bracket {
  stroke: var(--color-link);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.tlc-measure-red {
  fill: var(--color-danger);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.tlc-note-list {
  align-self: center;
  align-content: center;
  display: grid;
  gap: var(--lds-space-3);
}

.tlc-config-card {
  gap: 14px;
}

.tlc-config-card .tl-config-demo {
  min-height: 44px;
  align-items: center;
  margin-block: 0;
}

.tlc-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.tlc-info-list p {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--color-link);
  color: var(--color-text-secondary);
  background: color-mix(in srgb, var(--color-link) 7%, transparent);
}

.tlc-info-icon {
  position: relative;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--color-link);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.tlc-info-icon > span {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: translateY(0.5px);
}

.tlc-info-icon img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.tlc-measure {
  display: block;
  min-width: 0;
}

.tlc-dynamic-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--lds-space-4);
}

.tlc-dynamic-card {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.tlc-dynamic-card h3,
.tlc-scaling-rule h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.tlc-dynamic-demo {
  min-height: 72px;
  display: flex;
  align-items: center;
}

.tlc-dynamic-card dl,
.tlc-dynamic-card dt,
.tlc-dynamic-card dd {
  margin: 0;
}

.tlc-dynamic-card dl {
  display: grid;
  gap: var(--lds-space-2);
}

.tlc-dynamic-card dl div {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: var(--lds-space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.tlc-dynamic-card dd {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.tlc-scaling-rule {
  display: grid;
  gap: var(--lds-space-2);
  margin-top: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.tlc-scaling-rule p {
  margin: 0;
  color: var(--color-text-secondary);
}

.tlc-scaling-rule code {
  color: var(--color-link);
  white-space: normal;
  overflow-wrap: anywhere;
}

.tlc-wrapping-spec .tl-overflow-art {
  min-height: 170px;
}

.tlc-state-surface.dark .source-text-link-caret {
  --tlc-link: #F4F6F9;
  --tlc-link-hover: #FFFFFF;
  --tlc-focus: #2E86FF;
  --tlc-disabled: #6B727C;
}

@media (max-width: 720px) {
  .tl-anatomy-grid {
    grid-template-columns: 1fr;
  }

  .tl-anatomy-stage {
    min-height: 260px;
  }

  .tl-hitarea-panel {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: var(--lds-space-4);
    overflow: hidden;
    padding: var(--lds-space-4) var(--lds-space-2);
  }

  .tl-hitarea-natural {
    padding-left: 56px;
  }

  .tl-hitarea-table div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .tl-overflow-grid {
    grid-template-columns: 1fr;
  }

  .tl-overflow-art {
    min-height: 128px;
  }

  .tlc-layout-grid {
    grid-template-columns: 1fr;
  }

  .tlc-layout-art {
    min-height: 190px;
  }

  .source-text-link-caret.truncate {
    width: min(210px, 100%);
  }
}

.badge-spec {
  display: grid;
  gap: var(--lds-space-5);
  --badge-info-bg: var(--color-info-bg);
  --badge-info-border: var(--color-info-border);
  --badge-info-text: var(--color-info-text);
  --badge-success-bg: var(--color-success-bg);
  --badge-success-border: var(--color-success-border);
  --badge-success-text: var(--color-success-text);
  --badge-warning-bg: var(--color-warning-bg);
  --badge-warning-border: var(--color-warning-border);
  --badge-warning-text: var(--color-warning-text);
  --badge-danger-bg: var(--color-danger-bg);
  --badge-danger-border: var(--color-danger-border);
  --badge-danger-text: var(--color-danger-text);
}

.source-badge {
  --badge-bg: var(--color-bg-inset);
  --badge-border: var(--color-border-standard);
  --badge-text: var(--color-text-secondary);
  --badge-mark-bg: var(--color-bg-surface);
  --badge-mark-text: var(--badge-text);
  min-width: 24px;
  min-height: 20px;
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-1);
  padding: 2px var(--lds-space-1);
  border: 1px solid var(--badge-border);
  border-radius: 4px;
  color: var(--badge-text);
  background: var(--badge-bg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 16px;
  vertical-align: middle;
}

.source-badge .badge-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.source-badge.wrap {
  max-width: 180px;
  align-items: flex-start;
}

.source-badge.wrap .badge-text {
  white-space: normal;
}

.source-badge.truncate {
  max-width: 126px;
}

.source-badge.info {
  --badge-bg: var(--badge-info-bg);
  --badge-border: var(--badge-info-border);
  --badge-text: var(--badge-info-text);
}

.source-badge.success {
  --badge-bg: var(--badge-success-bg);
  --badge-border: var(--badge-success-border);
  --badge-text: var(--badge-success-text);
}

.source-badge.warning {
  --badge-bg: var(--badge-warning-bg);
  --badge-border: var(--badge-warning-border);
  --badge-text: var(--badge-warning-text);
}

.source-badge.danger {
  --badge-bg: var(--badge-danger-bg);
  --badge-border: var(--badge-danger-border);
  --badge-text: var(--badge-danger-text);
}

.badge-status-mark,
.badge-tooltip-mark {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  border-radius: 50%;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.badge-status-mark {
  width: 14px;
  height: 14px;
  color: var(--badge-bg);
  background: var(--badge-text);
  font-size: 9px;
}

.badge-tooltip-mark {
  width: 16px;
  height: 16px;
  border: 1px solid currentColor;
  color: var(--badge-text);
  background: transparent;
  font-size: 11px;
}

.badge-anatomy-svg {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 220px;
}

.badge-svg-container {
  fill: var(--color-bg-inset);
  stroke: var(--color-border-standard);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.badge-svg-text {
  fill: var(--color-text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-semibold);
}

.badge-svg-tooltip {
  fill: none;
  stroke: var(--color-text-secondary);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.badge-svg-tooltip-text {
  fill: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

.badge-state-surface .tl-state-card > div {
  min-height: 48px;
  display: flex;
  align-items: center;
}

.badge-state-surface.dark .source-badge {
  --badge-bg: #20242C;
  --badge-border: #4B5563;
  --badge-text: #F4F6F9;
}

.badge-state-surface.dark .source-badge.info {
  --badge-bg: #102A43;
  --badge-border: #2E86FF;
  --badge-text: #D9E9FF;
}

.badge-state-surface.dark .source-badge.success {
  --badge-bg: #143226;
  --badge-border: #32C48D;
  --badge-text: #DDF8EC;
}

.badge-state-surface.dark .source-badge.warning {
  --badge-bg: #3A2C10;
  --badge-border: #F2B84B;
  --badge-text: #FFF3D6;
}

.badge-state-surface.dark .source-badge.danger {
  --badge-bg: #3A161A;
  --badge-border: #FF6B7A;
  --badge-text: #FFE0E4;
}

.badge-config-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  align-items: stretch;
}

.badge-config-card {
  --badge-config-title-row: 24px;
  --badge-config-demo-row: 52px;
  gap: var(--lds-space-3);
  grid-template-rows:
    var(--badge-config-title-row)
    var(--badge-config-demo-row)
    auto;
  align-content: start;
}

.badge-config-card h3 {
  min-height: var(--badge-config-title-row);
  display: flex;
  align-items: flex-start;
}

.badge-config-card .tl-config-demo {
  min-height: var(--badge-config-demo-row);
  display: flex;
  align-items: center;
  margin: 0;
}

.badge-config-card .tlc-info-list {
  gap: var(--lds-space-2);
}

.badge-layout-stack {
  display: grid;
  gap: var(--lds-space-4);
}

.badge-measure-card {
  display: grid;
  gap: var(--lds-space-4);
}

.badge-value-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(160px, 100%), 1fr));
}

.badge-diagram-frame {
  margin: 0;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.badge-padding-svg {
  display: block;
  width: 100%;
  height: auto;
}

.badge-svg-pad-strip {
  fill: color-mix(in srgb, var(--color-warning) 38%, transparent);
}

.badge-svg-text-zone {
  fill: color-mix(in srgb, var(--color-info-bg) 38%, transparent);
  stroke: var(--color-border-subtle);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.badge-center-guide {
  stroke: var(--color-link);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  opacity: .55;
  vector-effect: non-scaling-stroke;
}

.badge-svg-caption {
  fill: var(--color-text-secondary);
  font-size: 13px;
}

.badge-measure-note,
.badge-measure-card p {
  margin: 0;
  color: var(--color-text-secondary);
}

.badge-min-grid,
.badge-hitarea-panel {
  display: grid;
  gap: var(--lds-space-4);
  align-items: center;
}

.badge-min-grid {
  grid-template-columns: minmax(220px, .8fr) minmax(240px, 1fr);
}

.badge-min-grid figure {
  margin: 0;
  overflow: visible;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.badge-size-svg {
  display: block;
  width: 100%;
  height: auto;
}

.badge-overflow-grid,
.badge-responsive-grid {
  display: grid;
  gap: var(--lds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.badge-overflow-grid article,
.badge-responsive-grid section {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.badge-overflow-grid h4,
.badge-responsive-grid h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
}

.badge-overflow-grid .tl-overflow-art {
  min-height: 112px;
}

.badge-hitarea-svg {
  width: min(100%, 540px);
  height: auto;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.badge-hitarea-badge {
  fill: var(--color-danger);
}

.badge-hitarea-text,
.badge-hitarea-icon-text {
  fill: var(--color-accent-text);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.badge-hitarea-icon {
  fill: none;
  stroke: var(--color-accent-text);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.badge-responsive-grid section {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.badge-responsive-grid dl,
.badge-responsive-grid dt,
.badge-responsive-grid dd {
  margin: 0;
}

.badge-responsive-grid dl {
  display: grid;
  gap: var(--lds-space-2);
}

.badge-responsive-grid dl div {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) auto;
  gap: var(--lds-space-3);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.badge-responsive-grid dd {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

@media (max-width: 720px) {
  .badge-min-grid {
    grid-template-columns: 1fr;
  }

  .badge-anatomy-stage {
    min-height: 240px;
  }
}

.atom-text-link-caret {
  display: inline-flex;
  align-items: center;
  gap: var(--component-icon-text-gap);
}

.atom-text-link-caret::after {
  content: "›";
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 140ms ease;
}

.atom-text-link-caret.caret-left::before {
  content: "‹";
  display: inline-block;
  font-size: 1.1em;
  line-height: 1;
  transition: transform 140ms ease;
}

.atom-text-link-caret.caret-left::after {
  content: none;
}

@media (hover: hover) and (pointer: fine) {
  .legion-vivid-light-scope .atom-text-link-caret:hover::after,
  .legion-vivid-light-scope .atom-text-link-caret.state-hover::after {
    transform: translateX(3px);
  }

  .legion-vivid-light-scope .atom-text-link-caret.caret-left:hover::before,
  .legion-vivid-light-scope .atom-text-link-caret.caret-left.state-hover::before {
    transform: translateX(-3px);
  }
}

.legion-vivid-light-scope .atom-icon-button {
  min-width: var(--lds-touch-target-min);
  min-height: var(--lds-touch-target-min);
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border-standard);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  cursor: pointer;
  font: inherit;
  font-size: 22px;
  font-weight: var(--font-weight-semibold);
}

.legion-vivid-light-scope .atom-icon-button:hover,
.legion-vivid-light-scope .atom-icon-button.state-hover {
  border-color: var(--color-accent-hover);
  color: var(--color-link-hover);
  background: var(--color-bg-inset);
}

.legion-vivid-light-scope .atom-icon-button:focus-visible,
.legion-vivid-light-scope .atom-icon-button.state-focus {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 6px var(--color-focus-ring);
  outline: none;
}

.legion-vivid-light-scope .atom-icon-button:active,
.legion-vivid-light-scope .atom-icon-button.state-active {
  border-color: var(--color-accent-active);
  color: var(--color-accent-active);
  background: var(--color-selected-bg);
  transform: scale(.96);
}

.legion-vivid-light-scope .atom-icon-button.is-selected {
  border-color: var(--color-selected-text);
  color: var(--color-selected-text);
  background: var(--color-selected-bg);
}

.legion-vivid-light-scope .atom-icon-button:disabled {
  border-color: var(--color-border-standard);
  color: var(--color-text-disabled);
  background: var(--color-bg-inset);
  cursor: not-allowed;
}

.icon-button-spec {
  display: grid;
  gap: var(--lds-space-5);
  --ib-button-size: 44px;
  --ib-icon-size: 24px;
  --ib-hit-size: 44px;
  --ib-radius: var(--lds-radius-pill);
  --ib-color: var(--color-text-primary);
  --ib-bg: transparent;
  --ib-border: transparent;
  --ib-hover-bg: var(--color-bg-inset);
  --ib-hover-border: var(--color-border-standard);
  --ib-selected-bg: var(--color-selected-bg);
  --ib-selected-border: var(--color-selected-border);
  --ib-selected-color: var(--color-selected-text);
  --bdi-bg: var(--color-danger);
  --bdi-border: var(--color-bg-surface);
  --bdi-text: var(--color-bg-surface);
  --bdi-dot: var(--color-bg-surface);
}

.icon-button-spec .tlc-info-list p {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
}

.icon-button-spec .tlc-info-list p > span:last-child {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.icon-button-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: var(--lds-space-4);
  align-items: stretch;
}

.icon-button-anatomy-stage {
  display: grid;
  place-items: center;
  min-height: 320px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.icon-button-anatomy-svg {
  width: 100%;
  height: auto;
  display: block;
}

.ib-hit-area-guide,
.ib-svg-focus {
  fill: none;
  stroke: var(--color-focus-ring);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.ib-svg-container {
  fill: var(--color-bg-inset);
  stroke: var(--color-border-standard);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.ib-svg-icon {
  color: var(--color-text-primary);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

.ib-svg-badge {
  fill: var(--color-danger);
  stroke: var(--color-bg-surface);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.ib-svg-badge-text {
  fill: var(--color-bg-surface);
  font-size: 10px;
  font-weight: 800;
}

.ib-svg-selected {
  fill: none;
  stroke: var(--color-selected-text);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.icon-button-anatomy-key {
  align-self: center;
}

.icon-button-state-surface {
  grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 1fr));
}

.icon-button-state-surface .tl-state-card > div {
  min-height: 70px;
  display: flex;
  align-items: center;
}

.icon-button-dark-surface {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: #0A0C10;
}

.icon-button-dark-surface .tl-state-card {
  border: 0;
  color: #F4F6F9;
  background: #1F232B;
}

.icon-button-dark-surface .tl-state-card > span {
  color: #CAD1DC;
}

.source-icon-button-wrap {
  position: relative;
  width: var(--ib-hit-size);
  height: var(--ib-hit-size);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  color: var(--ib-color);
}

.source-icon-button-wrap.dark {
  --ib-color: #F4F6F9;
  --ib-bg: transparent;
  --ib-border: transparent;
  --ib-hover-bg: #262C36;
  --ib-hover-border: #4B5563;
  --ib-selected-bg: var(--color-selected-bg);
  --ib-selected-border: var(--color-selected-border);
  --ib-selected-color: var(--color-selected-text);
  --bdi-border: #05070A;
}

.source-icon-button-wrap.small {
  --ib-button-size: 32px;
  --ib-icon-size: 20px;
}

.source-icon-button {
  width: var(--ib-button-size);
  height: var(--ib-button-size);
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--ib-border);
  border-radius: var(--ib-radius);
  color: var(--ib-color);
  background: var(--ib-bg);
  cursor: pointer;
  line-height: 1;
  overflow: visible;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.source-icon-button-icon {
  width: var(--ib-icon-size);
  height: var(--ib-icon-size);
  display: block;
  overflow: visible;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(var(--ib-icon-fit, 1));
}

.source-icon-button.variant-tonal,
.source-icon-button.variant-solid,
.source-icon-button.variant-high-contrast {
  --ib-icon-size: 20px;
}

.source-icon-button.size-small.variant-tonal,
.source-icon-button.size-small.variant-solid,
.source-icon-button.size-small.variant-high-contrast {
  --ib-icon-size: 16px;
}

.source-icon-button.variant-tonal {
  --ib-bg: var(--color-bg-inset);
  --ib-border: transparent;
}

.source-icon-button.variant-solid {
  --ib-bg: var(--color-bg-surface);
  --ib-border: var(--color-border-standard);
}

.source-icon-button.variant-high-contrast {
  --ib-bg: var(--color-text-primary);
  --ib-border: var(--color-text-primary);
  --ib-color: var(--color-bg-surface);
}

.source-icon-button-wrap.dark .source-icon-button.variant-tonal {
  --ib-bg: #262C36;
  --ib-border: transparent;
}

.source-icon-button-wrap.dark .source-icon-button.variant-solid {
  --ib-bg: #1F232B;
  --ib-border: #4B5563;
}

.source-icon-button-wrap.dark .source-icon-button.variant-high-contrast {
  --ib-bg: #F4F6F9;
  --ib-border: #F4F6F9;
  --ib-color: #0A0C10;
}

.source-icon-button:hover,
.source-icon-button.state-hover,
.source-icon-button.state-active-hover {
  border-color: var(--ib-hover-border);
  background: var(--ib-hover-bg);
}

.source-icon-button:focus-visible,
.source-icon-button.state-focus {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.source-icon-button.focus-inside:focus-visible,
.source-icon-button.state-focus.focus-inside {
  outline-offset: -4px;
}

.source-icon-button:active,
.source-icon-button.state-active,
.source-icon-button.state-active-hover {
  transform: scale(.96);
}

.source-icon-button.is-selected {
  border-color: var(--ib-selected-border);
  color: var(--ib-selected-color);
  background: var(--ib-selected-bg);
}

.source-icon-button.is-disabled,
.source-icon-button:disabled {
  border-color: var(--color-border-standard);
  color: var(--color-text-disabled);
  background: var(--color-bg-inset);
  cursor: not-allowed;
  opacity: .72;
}

.source-icon-button.elevation-middle {
  box-shadow: 0 8px 18px rgba(21, 22, 27, .12);
}

.source-icon-button.elevation-high {
  box-shadow: 0 16px 32px rgba(21, 22, 27, .18);
}

.source-icon-button.has-icon-offset .source-icon-button-icon {
  transform: translate(3px, 0) scale(var(--ib-icon-fit, 1));
}

.source-icon-button-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  display: inline-grid;
  place-items: center;
  pointer-events: none;
  transition: transform 120ms ease;
  transform-origin: center;
}

.source-icon-button-wrap.small .source-icon-button-badge {
  top: 4px;
  right: 4px;
}

.source-icon-button:active + .source-icon-button-badge,
.source-icon-button.state-active + .source-icon-button-badge,
.source-icon-button.state-active-hover + .source-icon-button-badge {
  transform: scale(.96);
}

.icon-button-config-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
}

.icon-button-config-card {
  min-width: 0;
}

.icon-button-config-card .tl-config-demo {
  min-height: 58px;
}

.icon-button-local-dark-demo {
  display: inline-grid;
  place-items: center;
  padding: var(--lds-space-3);
  border-radius: var(--lds-radius-md);
  background: #0A0C10;
}

.icon-button-layout-stack {
  display: grid;
  gap: var(--lds-space-4);
}

.icon-button-value-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}

.icon-button-value-grid span,
.icon-button-spec .tl-token-grid,
.icon-button-spec .tl-token-grid * {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.icon-button-measure-card {
  display: grid;
  gap: var(--lds-space-4);
}

.icon-button-size-rail {
  display: grid;
  gap: var(--lds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr));
}

.icon-button-size-card {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.icon-button-size-card h4,
.icon-button-size-card dl,
.icon-button-size-card dt,
.icon-button-size-card dd {
  margin: 0;
}

.icon-button-size-demo {
  min-height: 76px;
  display: flex;
  align-items: center;
}

.icon-button-size-card dl {
  display: grid;
  gap: var(--lds-space-2);
}

.icon-button-size-card dl div {
  display: grid;
  grid-template-columns: minmax(96px, 1fr) auto;
  gap: var(--lds-space-3);
  font-size: var(--font-size-sm);
}

.icon-button-size-card dt {
  color: var(--color-text-secondary);
}

.icon-button-size-card dd {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.icon-button-focus-demo {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-5);
  align-items: center;
  min-height: 88px;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

@media (max-width: 720px) {
  .icon-button-anatomy-grid {
    grid-template-columns: 1fr;
  }

  .icon-button-anatomy-stage {
    min-height: 260px;
  }

  .icon-button-state-surface {
    grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  }

  .icon-button-focus-demo {
    gap: var(--lds-space-4);
  }
}

.legion-vivid-light-scope .atom-badge,
.legion-vivid-light-scope .atom-status-chip {
  min-height: 28px;
  display: inline-flex;
  align-items: center;
  gap: var(--component-icon-text-gap);
  width: fit-content;
  padding: 0 var(--lds-space-3);
  border: 1px solid var(--color-border-standard);
  border-radius: 4px;
  color: var(--color-text-secondary);
  background: var(--color-bg-inset);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.legion-vivid-light-scope .atom-badge.info {
  border-color: var(--color-info-border);
  color: var(--color-info-text);
  background: var(--color-info-bg);
}

.legion-vivid-light-scope .atom-badge.success,
.legion-vivid-light-scope .atom-status-chip.success {
  border-color: var(--color-success-border);
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.legion-vivid-light-scope .atom-badge.warning {
  border-color: var(--color-warning-border);
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
}

.legion-vivid-light-scope .atom-badge.danger {
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.badge-indicator-row {
  display: inline-flex;
  align-items: center;
  gap: var(--component-icon-text-gap);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.legion-vivid-light-scope .atom-badge-indicator {
  display: inline-grid;
  place-items: center;
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border: 1px solid var(--color-bg-surface);
  border-radius: var(--lds-radius-pill);
  background: var(--color-text-muted);
  box-shadow: 0 0 0 1px var(--color-border-standard);
}

.legion-vivid-light-scope .atom-badge-indicator.info { background: var(--color-info); box-shadow: 0 0 0 1px var(--color-info-border); }
.legion-vivid-light-scope .atom-badge-indicator.success { background: var(--color-success); box-shadow: 0 0 0 1px var(--color-success-border); }
.legion-vivid-light-scope .atom-badge-indicator.warning { background: var(--color-warning); box-shadow: 0 0 0 1px var(--color-warning-border); }
.legion-vivid-light-scope .atom-badge-indicator.danger { background: var(--color-danger); box-shadow: 0 0 0 1px var(--color-danger-border); }

.legion-vivid-light-scope .atom-badge-indicator.count {
  min-width: 18px;
  width: auto;
  height: 18px;
  padding: 0 5px;
  border: 1px solid var(--color-border-standard);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-primary);
  background: var(--color-bg-inset);
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
}

.source-badge-indicator-page {
  display: grid;
  gap: var(--lds-space-5);
}

.source-badge-indicator-page {
  --bdi-bg: var(--color-danger);
  --bdi-border: var(--color-bg-surface);
  --bdi-text: var(--color-accent-text);
  --bdi-dot: var(--color-accent-text);
}

.source-badge-indicator-page .danger {
  --bdi-bg: var(--color-danger);
  --bdi-border: var(--color-bg-surface);
  --bdi-text: var(--color-accent-text);
  --bdi-dot: var(--color-accent-text);
}

.source-badge-indicator-page .neutral {
  --bdi-bg: var(--color-bg-inset);
  --bdi-border: var(--color-border-standard);
  --bdi-text: var(--color-text-secondary);
  --bdi-dot: var(--color-text-secondary);
}

.source-badge-indicator-page .warning {
  --bdi-bg: var(--color-warning);
  --bdi-border: var(--color-bg-surface);
  --bdi-text: var(--color-bg-surface);
  --bdi-dot: var(--color-bg-surface);
}

.source-badge-indicator-page .success {
  --bdi-bg: var(--color-success);
  --bdi-border: var(--color-bg-surface);
  --bdi-text: var(--color-bg-surface);
  --bdi-dot: var(--color-bg-surface);
}

.source-badge-indicator-page .info {
  --bdi-bg: var(--color-info);
  --bdi-border: var(--color-bg-surface);
  --bdi-text: var(--color-bg-surface);
  --bdi-dot: var(--color-bg-surface);
}

.bdi-example-row {
  display: inline-flex;
  align-items: center;
  gap: var(--lds-space-2);
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-semibold);
}

.source-badge-indicator {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  box-sizing: border-box;
  border: 1px solid var(--bdi-border);
  border-radius: var(--lds-radius-pill);
  color: var(--bdi-text);
  background: var(--bdi-bg);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  vertical-align: middle;
}

.source-badge-indicator.simple {
  width: 16px;
  height: 16px;
  min-width: 16px;
}

.source-badge-indicator.simple span {
  width: 6px;
  height: 6px;
  border-radius: var(--lds-radius-pill);
  background: var(--bdi-dot);
}

.source-badge-indicator.simple.no-border {
  border: 0;
}

.source-badge-indicator.simple.no-dot span {
  display: none;
}

.source-badge-indicator.numbered {
  min-width: 18px;
  min-height: 18px;
  width: fit-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  box-sizing: border-box;
  padding: 2px 5px;
  font-size: 12px;
  line-height: 14px;
  white-space: nowrap;
}

.source-badge-indicator.numbered.count-single {
  width: 20px;
  min-width: 20px;
  min-height: 20px;
  padding-inline: 0;
}

.source-badge-indicator.numbered.count-overflow {
  min-width: 26px;
  padding-inline: 5px;
}

.source-badge-indicator.numbered.count-with-text {
  min-width: 0;
  padding-inline: 6px;
  gap: 4px;
}

.source-badge-indicator .bdi-count-main,
.source-badge-indicator .bdi-count-trailing {
  display: inline-block;
  line-height: inherit;
}

.source-badge-indicator.numbered.md,
.source-badge-indicator.numbered.lg,
.source-badge-indicator.numbered.xl {
  padding-inline: 6px;
}

.source-badge-indicator.numbered.md {
  min-height: 20px;
  min-width: 20px;
  font-size: 14px;
  line-height: 16px;
}

.source-badge-indicator.numbered.lg {
  min-height: 24px;
  min-width: 24px;
  font-size: 16px;
  line-height: 20px;
}

.source-badge-indicator.numbered.xl {
  min-height: 28px;
  min-width: 28px;
  font-size: 20px;
  line-height: 24px;
}

.source-badge-indicator.numbered.xxl {
  min-height: 32px;
  min-width: 32px;
  padding-inline: 8px;
  font-size: 24px;
  line-height: 28px;
}

.bdi-state-grid {
  display: grid;
  gap: var(--lds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

.bdi-state-grid .tl-state-card > div {
  min-height: 54px;
  display: flex;
  align-items: center;
}

.bdi-dark-preview {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: #0A0C10;
}

.bdi-dark-preview .tl-state-card {
  border: 0;
  background: #1F232B;
}

.bdi-dark-preview .bdi-example-row,
.bdi-dark-preview .tl-state-card > span {
  color: #E8EDF4;
}

.bdi-dark-preview .source-badge-indicator {
  border: 1px solid #05070A;
}

.bdi-anatomy-stage {
  display: grid;
  place-items: center;
  min-height: 360px;
}

.source-badge-indicator-page .bdi-anatomy-svg .tl-svg-callout-number {
  r: 12px;
}

.source-badge-indicator-page .bdi-anatomy-svg .tl-svg-callout-digit {
  font-size: 14px;
  dominant-baseline: central;
  alignment-baseline: middle;
}

.bdi-anatomy-svg,
.bdi-layout-svg {
  display: block;
  width: 100%;
  height: auto;
}

.bdi-svg-bg {
  fill: var(--bdi-bg);
  stroke: var(--bdi-border);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.bdi-svg-indicator.anatomy {
  --bdi-border: var(--color-bg-surface);
}

.bdi-svg-dot {
  fill: var(--bdi-dot);
}

.bdi-svg-text {
  fill: var(--bdi-text);
  font-size: 14px;
  font-weight: 700;
}

.bdi-diagram-frame {
  margin: 0;
  display: grid;
  place-items: center;
  min-height: 340px;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.bdi-diagram-frame .bdi-layout-svg {
  width: min(100%, 760px);
}

.bdi-config-card {
  --bdi-config-title-row: 28px;
  --bdi-config-demo-row: 64px;
  gap: var(--lds-space-4);
  grid-template-rows:
    var(--bdi-config-title-row)
    var(--bdi-config-demo-row)
    auto;
  padding: var(--lds-space-4) var(--lds-space-5);
}

.bdi-config-card h3 {
  min-height: var(--bdi-config-title-row);
  display: flex;
  align-items: flex-start;
}

.bdi-config-card .tl-config-demo {
  min-height: var(--bdi-config-demo-row);
}

.bdi-config-card .tlc-info-list {
  gap: var(--lds-space-3);
}

.bdi-spacing-strip {
  fill: color-mix(in srgb, var(--color-warning) 42%, transparent);
}

.bdi-measure-bracket {
  stroke: var(--color-link);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.source-badge-indicator-page .tl-behavior-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
}

.source-badge-indicator-page .tl-behavior-card,
.source-badge-indicator-page .tl-behavior-card li {
  overflow-wrap: anywhere;
}

.bdi-layout-stack .tl-measure-card {
  display: grid;
  gap: var(--lds-space-4);
}

.bdi-container-grid .source-badge-indicator.simple {
  width: var(--bdi-demo-size);
  height: var(--bdi-demo-size);
  min-width: var(--bdi-demo-size);
}

.bdi-container-grid .source-badge-indicator.simple span {
  width: var(--bdi-demo-dot);
  height: var(--bdi-demo-dot);
}

@media (max-width: 720px) {
  .bdi-anatomy-stage {
    min-height: 260px;
  }

  .bdi-dark-preview {
    padding: var(--lds-space-3);
  }
}

.btn,
.icon-button {
  min-height: var(--control-height-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-2);
  padding: 0 var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--control-radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  cursor: pointer;
  font-weight: var(--font-weight-semibold);
}

.btn.primary {
  border-color: var(--color-accent);
  background: var(--color-accent);
  color: var(--color-bg-surface);
}

.btn.ghost {
  border-color: transparent;
  color: var(--color-text-secondary);
  background: transparent;
}

.btn.danger {
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.btn:disabled,
.muted {
  cursor: not-allowed;
  opacity: .55;
}

.icon-button {
  width: var(--control-height-md);
  padding: 0;
}

label,
.example-form {
  display: grid;
  gap: var(--lds-space-2);
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--lds-space-2) var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--control-radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
}

input.error,
.field-error input {
  border-color: var(--color-danger-border);
  color: var(--color-danger-text);
  background: var(--color-danger-bg);
}

.example-stack.compact,
.example-form.compact {
  display: grid;
}

.mini-table,
.data-table {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  overflow: hidden;
  background: var(--color-bg-surface);
}

.mini-table {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mini-table > *,
.data-table > div > * {
  padding: var(--lds-space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.data-table > div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.data-table > div:nth-child(even) {
  background: var(--color-info-bg);
}

.record-stack {
  display: grid;
  gap: var(--lds-space-3);
}

.record-stack article {
  display: grid;
  gap: var(--lds-space-1);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.modal-card,
.modal-surface {
  display: grid;
  gap: var(--lds-space-3);
  max-width: 560px;
  margin-inline: auto;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--lds-shadow-2);
}

.modal-surface.compact {
  min-height: 320px;
  align-content: end;
}

.modal-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
}

.notice {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-lg);
  color: var(--color-info-text);
  background: var(--color-info-bg);
}

.notice p {
  margin: 0;
}

.tabs,
.tab-example {
  display: grid;
  gap: var(--lds-space-3);
}

.tabs {
  grid-auto-flow: column;
  grid-auto-columns: max-content;
  justify-content: start;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border-subtle);
}

.tabs button {
  min-height: var(--control-height-md);
  padding: 0 var(--lds-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  color: var(--color-text-secondary);
  background: transparent;
  font-weight: var(--font-weight-semibold);
}

.tabs button.active {
  border-bottom-color: var(--color-accent);
  color: var(--color-text-primary);
}

.tab-example section {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.toggle-row,
.settings-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
}

.settings-list {
  display: grid;
}

.switch {
  position: relative;
  flex: 0 0 auto;
  width: 54px;
  height: 32px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  background: var(--color-bg-panel);
}

.switch::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 22px;
  height: 22px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-text-muted);
  transition: transform var(--lds-motion-fast);
}

.switch.on {
  border-color: var(--color-accent);
  background: var(--color-info-bg);
}

.switch.on::after {
  transform: translateX(22px);
  background: var(--color-accent);
}

.status-card {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-success-border);
  border-radius: var(--lds-radius-lg);
  color: var(--color-success-text);
  background: var(--color-success-bg);
}

.rail-demo {
  display: grid;
}

.rail-demo > main,
.rail-demo > aside {
  min-height: 180px;
}

.rail-demo aside {
  display: grid;
  gap: var(--lds-space-2);
  align-content: start;
  padding: var(--lds-space-3);
}

.rail-demo aside div {
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.pause-card {
  min-height: 260px;
  align-content: center;
  border-color: var(--color-warning-border);
  background: var(--color-warning-bg);
}

.review-card {
  align-content: space-between;
}

.decision-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.decision-row .btn {
  width: 100%;
}

.buttons-hero {
  border-color: var(--color-border-strong);
  background:
    linear-gradient(135deg, var(--color-bg-surface), color-mix(in srgb, var(--color-info-bg) 72%, var(--color-bg-surface)));
}

.source-confidence,
.source-note {
  max-width: 900px;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.benchmark-section {
  display: grid;
  gap: var(--lds-section-gap-standard);
  min-width: 0;
  padding: var(--lds-card-padding-spacious);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.benchmark-section h2,
.benchmark-section h3,
.benchmark-section p {
  margin: 0;
}

.section-title-row {
  display: flex;
  align-items: flex-start;
  gap: var(--lds-space-3);
  min-width: 0;
}

.section-title-row h2 {
  font-size: var(--lds-display-sm);
  line-height: var(--lds-line-tight);
  overflow-wrap: anywhere;
}

.section-title-row p {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.section-number {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-pill);
  color: var(--color-info-text);
  background: var(--color-info-bg);
  font-weight: var(--font-weight-bold);
}

.legion-button {
  --button-bg: var(--color-bg-surface);
  --button-fg: var(--color-text-primary);
  --button-border: var(--color-border-strong);
  min-width: 136px;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-2);
  padding: 0 var(--lds-space-5);
  border: 1px solid var(--button-border);
  border-radius: var(--control-radius-md);
  color: var(--button-fg);
  background: var(--button-bg);
  cursor: pointer;
  font-weight: var(--font-weight-bold);
  line-height: var(--lds-line-tight);
  text-align: center;
  text-decoration: none;
  transition:
    transform var(--lds-motion-fast) ease,
    border-color var(--lds-motion-fast) ease,
    background-color var(--lds-motion-fast) ease,
    box-shadow var(--lds-motion-fast) ease;
}

.legion-button.primary {
  --button-bg: var(--color-accent);
  --button-fg: var(--color-bg-surface);
  --button-border: var(--color-accent);
}

.legion-button.secondary {
  --button-bg: var(--color-bg-surface);
  --button-fg: var(--color-text-primary);
  --button-border: var(--color-border-strong);
}

.legion-button.tertiary {
  --button-bg: transparent;
  --button-fg: var(--color-text-secondary);
  --button-border: transparent;
}

.legion-button.destructive {
  --button-bg: var(--color-danger-bg);
  --button-fg: var(--color-danger-text);
  --button-border: var(--color-danger-border);
}

.legion-button.destructive:hover,
.legion-button.destructive.state-hover {
  border-color: var(--color-danger-border);
  background: color-mix(in srgb, var(--color-danger-bg) 88%, var(--color-bg-panel));
  box-shadow: 0 0 0 2px var(--color-danger-border);
}

.legion-button.destructive:focus-visible,
.legion-button.destructive.state-focus {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 6px color-mix(in srgb, var(--color-danger-border) 42%, transparent);
}

.legion-button.small {
  min-width: 112px;
  min-height: 40px;
  padding-inline: var(--lds-space-4);
  font-size: var(--font-size-sm);
}

.legion-button.large {
  min-width: 168px;
  min-height: 56px;
  padding-inline: var(--lds-space-6);
  font-size: var(--font-size-lg);
}

.legion-button:hover,
.legion-button.state-hover {
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--button-bg) 88%, var(--color-bg-panel));
  box-shadow: var(--lds-shadow-1);
}

.legion-button:focus-visible,
.legion-button.state-focus {
  outline: none;
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 6px var(--color-focus-ring);
}

.legion-button:active,
.legion-button.state-active {
  transform: scale(.97);
  box-shadow: inset 0 0 0 999px color-mix(in srgb, var(--color-text-primary) 10%, transparent);
}

.legion-button.state-active-hover {
  transform: scale(.97);
  border-color: var(--color-accent);
  background: color-mix(in srgb, var(--button-bg) 82%, var(--color-bg-panel));
  box-shadow:
    inset 0 0 0 999px color-mix(in srgb, var(--color-text-primary) 8%, transparent),
    var(--lds-shadow-1);
}

.legion-button:disabled {
  cursor: not-allowed;
  opacity: .46;
  box-shadow: none;
  transform: none;
}

.legion-vivid-light-scope .btn.primary,
.legion-vivid-light-scope .legion-button.primary {
  --button-bg: rgba(11, 92, 255, .72);
  --button-fg: var(--color-accent-text);
  --button-border: rgba(133, 181, 255, .68);
  color: var(--color-accent-text);
}

.legion-vivid-light-scope .btn.primary {
  background:
    linear-gradient(180deg, rgba(255,255,255,.24), transparent 42%),
    linear-gradient(135deg, rgba(11,92,255,.72), rgba(4,45,130,.50));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.48),
    inset 0 -1px 0 rgba(3,34,104,.30),
    0 10px 24px rgba(4,58,170,.20);
  backdrop-filter: blur(16px) saturate(172%);
  -webkit-backdrop-filter: blur(16px) saturate(172%);
}

.legion-vivid-light-scope .legion-button.primary:hover,
.legion-vivid-light-scope .legion-button.primary.state-hover {
  --button-bg: rgba(9, 79, 224, .80);
  --button-border: rgba(159, 199, 255, .78);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), transparent 42%),
    linear-gradient(135deg, rgba(9,79,224,.80), rgba(3,39,119,.56));
}

.legion-vivid-light-scope .legion-button.primary:active,
.legion-vivid-light-scope .legion-button.primary.state-active,
.legion-vivid-light-scope .legion-button.primary.state-active-hover {
  --button-bg: rgba(8, 69, 194, .86);
  --button-border: rgba(123, 169, 242, .72);
  background:
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 38%),
    linear-gradient(135deg, rgba(8,69,194,.86), rgba(2,31,96,.64));
}

.legion-vivid-light-scope .legion-button.secondary {
  --button-bg: var(--color-bg-surface);
  --button-fg: var(--color-action-secondary-text);
  --button-border: var(--color-action-secondary-border);
}

.legion-vivid-light-scope .legion-button.secondary:hover,
.legion-vivid-light-scope .legion-button.secondary.state-hover {
  --button-border: var(--color-accent-hover);
  background: var(--color-bg-inset);
}

.legion-vivid-light-scope .legion-button.secondary:active,
.legion-vivid-light-scope .legion-button.secondary.state-active,
.legion-vivid-light-scope .legion-button.secondary.state-active-hover {
  --button-border: var(--color-accent-active);
  background: var(--color-selected-bg);
}

.legion-vivid-light-scope .legion-button.tertiary {
  --button-fg: var(--color-link);
}

.legion-vivid-light-scope .legion-button.tertiary:hover,
.legion-vivid-light-scope .legion-button.tertiary.state-hover {
  --button-fg: var(--color-link-hover);
  --button-border: transparent;
  background: var(--color-bg-inset);
}

.legion-vivid-light-scope .legion-button:focus-visible,
.legion-vivid-light-scope .legion-button.state-focus {
  box-shadow:
    0 0 0 3px var(--color-bg-surface),
    0 0 0 6px var(--color-focus-ring);
}

.legion-vivid-light-scope .legion-button:disabled {
  --button-fg: var(--color-text-disabled);
  --button-border: var(--color-border-standard);
  background: var(--color-bg-inset);
  opacity: 1;
}

.full-width {
  width: 100%;
}

.button-anatomy-stage {
  position: relative;
  display: grid;
  gap: var(--lds-space-4);
  min-height: 560px;
  padding: var(--lds-space-5);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(180deg, var(--color-info-bg), var(--color-bg-panel));
  overflow: hidden;
}

.hit-area-frame {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  min-height: 280px;
  padding: var(--lds-space-6);
  border: 2px dashed var(--color-warning-border);
  border-radius: var(--lds-radius-lg);
  background: color-mix(in srgb, var(--color-warning-bg) 42%, transparent);
}

.hit-area-frame::before {
  content: "Hit area";
  position: absolute;
  top: var(--lds-space-3);
  left: var(--lds-space-3);
  color: var(--color-warning-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.anatomy-button {
  min-width: 240px;
  min-height: 64px;
  font-size: var(--font-size-lg);
}

.anatomy-button::after {
  content: "";
  position: absolute;
}

.callout-list {
  display: grid;
  gap: var(--lds-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px var(--lds-space-2);
  align-items: start;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
  box-shadow: var(--lds-shadow-1);
}

.callout span {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--lds-radius-pill);
  color: var(--color-bg-surface);
  background: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.callout strong {
  line-height: var(--lds-line-tight);
}

.callout em {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-style: normal;
}

.purpose-section p {
  max-width: 820px;
  color: var(--color-text-secondary);
  font-size: var(--font-size-lg);
}

.variant-matrix,
.state-matrix,
.interaction-grid,
.responsive-proof {
  display: grid;
  gap: var(--lds-space-3);
}

.matrix-row {
  display: grid;
  gap: var(--lds-space-3);
  align-items: center;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.matrix-label,
.state-card > span,
.responsive-proof span {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.state-matrix {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.state-card {
  display: grid;
  gap: var(--lds-space-3);
  min-height: 154px;
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.relationship-card {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-lg);
  background: var(--color-info-bg);
}

.action-row-demo,
.desktop-actions,
.icon-relation-visual,
.accessibility-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--lds-space-3);
}

.icon-relation-visual > span {
  color: var(--color-text-muted);
  font-size: var(--lds-display-sm);
  font-weight: var(--font-weight-bold);
}

.icon-button-example {
  width: 48px;
  height: 48px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--control-radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.desktop-action-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-5);
  min-height: 176px;
  padding: var(--lds-space-5);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(135deg, var(--color-bg-panel), var(--color-info-bg));
}

.desktop-action-preview h3,
.mobile-sheet h3 {
  margin: var(--lds-space-1) 0 0;
  font-size: var(--lds-display-sm);
}

.mobile-button-frame {
  width: min(100%, 390px);
  margin-inline: auto;
  padding: var(--lds-space-3);
  border: 8px solid var(--color-border-strong);
  border-radius: 28px;
  background: var(--color-bg-panel);
}

.mobile-sheet {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: 20px;
  background: var(--color-bg-surface);
}

.mobile-sheet p {
  color: var(--color-text-secondary);
}

.interaction-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.interaction-grid > div {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.split-section {
  grid-template-columns: 1fr;
}

.split-section > section {
  display: grid;
  gap: var(--lds-space-3);
}

.responsive-proof {
  grid-template-columns: 1fr;
}

.responsive-desktop-sample,
.responsive-mobile-sample {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.responsive-mobile-sample {
  max-width: 390px;
}

.evidence-table {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  overflow: hidden;
}

.evidence-table > div {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.evidence-table > div:nth-child(even) {
  background: var(--color-bg-surface);
}

.evidence-table > div:last-child {
  border-bottom: 0;
}

.evidence-table code {
  color: var(--color-text-secondary);
  font-family: var(--lds-font-mono);
}

.buttons-pdf-spec .benchmark-section {
  scroll-margin-top: var(--lds-space-5);
}

.change-history-card {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.change-history-card summary {
  cursor: pointer;
  font-weight: var(--font-weight-bold);
}

.change-history-card p {
  margin: var(--lds-space-3) 0 0;
  color: var(--color-text-secondary);
}

.quiet-details {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.quiet-details summary {
  cursor: pointer;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.quiet-details > * + * {
  margin-top: var(--lds-space-3);
}

.quiet-details code {
  overflow-wrap: anywhere;
}

.kind-grid,
.kind-surface-grid,
.usage-grid,
.extension-state-row {
  display: grid;
  gap: var(--lds-space-3);
}

.kind-surface-grid {
  gap: var(--lds-section-gap-compact);
}

.kind-surface {
  display: grid;
  gap: var(--lds-space-6);
  padding: var(--lds-card-padding-spacious);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
}

.kind-surface h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--lds-line-tight);
}

.kind-grid {
  align-items: stretch;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lds-space-7);
}

.button-kind-item {
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: var(--lds-space-4);
  align-content: start;
  justify-items: start;
  min-width: 0;
  padding-block: var(--lds-space-2);
}

.button-kind-item strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  line-height: var(--lds-line-tight);
}

.dark-surface .button-kind-item strong,
.dark-surface .button-kind-item span,
.dark-surface h4 {
  color: var(--color-bg-surface);
}

.dark-surface .button-kind-item span {
  opacity: .76;
}

.button-kind-item span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-regular);
  line-height: var(--lds-line-body);
  max-width: 18ch;
}

.button-kind-item > span {
  max-width: 22ch;
}

.button-kind-item .spec-button {
  margin-block: var(--lds-space-1);
}

.kind-state-stack {
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--lds-space-2) var(--lds-space-3);
  align-items: center;
  min-width: 0;
}

.kind-state-stack > span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--lds-line-tight);
  text-transform: uppercase;
}

.dark-surface .kind-state-stack > span {
  color: color-mix(in srgb, var(--color-text-inverse) 74%, transparent);
}

.button-color-values {
  width: 100%;
  min-width: 0;
  padding-top: var(--lds-space-1);
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 72%, transparent);
}

.button-color-values-glass {
  display: none;
}

.button-color-values[data-button-colors="glass"] .button-color-values-standard {
  display: none;
}

.button-color-values[data-button-colors="glass"] .button-color-values-glass {
  display: grid;
}

.button-color-values-standard,
.button-color-values-glass {
  display: grid;
  gap: var(--lds-space-2);
}

.button-color-values dl {
  display: grid;
  gap: var(--lds-space-1);
  margin: 0;
}

.button-color-values dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--lds-line-tight);
  text-transform: uppercase;
}

.button-color-values dd {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: baseline;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  line-height: var(--lds-line-tight);
}

.button-color-values code {
  min-width: 0;
  color: var(--color-text-primary);
  font-family: var(--lds-font-mono);
  font-size: 11px;
  line-height: var(--lds-line-tight);
  overflow-wrap: anywhere;
}

.dark-surface .button-color-values {
  border-top-color: color-mix(in srgb, var(--color-text-inverse) 20%, transparent);
}

.dark-surface .button-color-values dt,
.dark-surface .button-color-values dd {
  color: color-mix(in srgb, var(--color-text-inverse) 72%, transparent);
}

.dark-surface .button-color-values code {
  color: var(--color-text-inverse);
}

.spec-rule-list {
  display: grid;
  gap: var(--lds-space-2);
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.spec-rule-list li {
  padding-left: var(--lds-space-1);
}

.spec-property-list {
  display: grid;
  gap: var(--lds-space-2);
  margin: 0;
  padding-left: 1.1rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.spec-property-list li {
  padding-left: var(--lds-space-1);
}

.component-status-footer {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  font-weight: var(--font-weight-semibold);
}

.component-spec-hero {
  border-color: var(--color-border-strong);
  background: var(--color-bg-surface);
}

.component-anatomy-layout,
.responsive-spec-grid,
.state-grid,
.spec-note-grid,
.density-grid {
  display: grid;
  gap: var(--lds-space-3);
}

.component-anatomy-layout {
  align-items: center;
}

.spec-note-grid p,
.density-grid > div,
.state-grid > section {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.density-grid span,
.field-helper,
.spec-field-label,
.field-message,
.mobile-record-list span,
.spec-toggle-row small {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.field-spec-stack,
.spec-field-label {
  display: grid;
  gap: var(--lds-space-2);
}

.field-help,
.field-trailing,
.notification-close,
.modal-close {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
}

.field-help {
  display: inline-grid;
  width: 24px;
  height: 24px;
  margin-left: var(--lds-space-1);
  font-size: var(--font-size-xs);
}

.spec-input-shell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lds-space-2);
  min-height: 44px;
  padding: 0 var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.spec-input-shell input {
  min-width: 0;
  border: 0;
  outline: 0;
  color: var(--color-text-primary);
  background: transparent;
}

.spec-input-shell.focus {
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.spec-input-shell.error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.spec-input-shell.success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.spec-input-shell.readonly {
  background: var(--color-bg-panel);
}

.spec-input-shell.disabled {
  opacity: .48;
}

.field-leading {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.field-message.error {
  color: var(--color-danger-text);
}

.field-message.success {
  color: var(--color-success-text);
}

.mobile-spec-frame {
  max-width: 360px;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: 24px;
  background: var(--color-bg-surface);
}

.spec-data-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  font-size: var(--font-size-sm);
}

.spec-data-table th,
.spec-data-table td {
  padding: var(--lds-space-3);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
}

.spec-data-table th {
  background: var(--color-bg-panel);
  font-weight: var(--font-weight-bold);
}

.spec-data-table.compact th,
.spec-data-table.compact td {
  padding: var(--lds-space-2);
}

.spec-data-table.striped tbody tr:nth-child(even) {
  background: var(--color-bg-panel);
}

.mobile-record-list {
  display: grid;
  gap: var(--lds-space-2);
}

.mobile-record-list article {
  display: grid;
  gap: var(--lds-space-1);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.modal-preview {
  padding: var(--lds-space-3);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.modal-scrim {
  display: grid;
  place-items: center;
  min-height: 320px;
  padding: var(--lds-space-4);
  background: color-mix(in srgb, var(--color-text-primary) 18%, transparent);
}

.spec-modal {
  display: grid;
  width: min(100%, 520px);
  max-height: 280px;
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--lds-shadow-2);
}

.modal-preview.mobile .spec-modal {
  width: min(100%, 340px);
  min-height: 420px;
  border-radius: var(--lds-radius-md);
}

.spec-modal header,
.spec-modal footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border-bottom: 1px solid var(--color-border-subtle);
}

.spec-modal footer {
  justify-content: flex-end;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 0;
}

.spec-modal h3 {
  margin: 0;
}

.spec-modal-body {
  display: grid;
  gap: var(--lds-space-3);
  max-height: 160px;
  overflow: auto;
  padding: var(--lds-space-4);
}

.notification-source-page {
  --notification-gap: var(--lds-space-3);
  --notification-padding: var(--lds-space-4);
}

.notification-source-page .notification-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: var(--lds-space-4);
  align-items: stretch;
}

.notification-source-page .notification-anatomy-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
  overflow: hidden;
}

.notification-source-page .notification-anatomy-svg {
  width: 100%;
  max-width: 680px;
  height: auto;
  display: block;
}

.notification-source-page .notification-anatomy-svg .tl-svg-callout-number {
  fill: var(--color-link);
}

.notification-source-page .notification-anatomy-svg .tl-svg-callout-digit {
  fill: var(--color-accent-text);
  font-size: 14px;
  font-weight: 800;
  dominant-baseline: central;
  alignment-baseline: middle;
}

.notification-source-page .notification-anatomy-svg .tl-svg-pointer {
  stroke: var(--color-link);
}

.notification-source-page .notification-anatomy-svg .tl-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--color-link);
}

.notification-source-page .notification-svg-container {
  fill: var(--color-info-bg);
  stroke: var(--color-info-border);
  stroke-width: 1;
}

.notification-source-page .notification-svg-icon {
  color: var(--color-info-text);
}

.notification-source-page .notification-svg-icon circle {
  fill: var(--color-bg-surface);
  stroke: currentColor;
  stroke-width: 1.5;
}

.notification-source-page .notification-svg-icon use,
.notification-source-page .notification-svg-close use {
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-source-page .notification-svg-title {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

.notification-source-page .notification-svg-body {
  fill: var(--color-text-secondary);
  font-size: 13px;
}

.notification-source-page .notification-svg-link {
  fill: var(--color-link);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
}

.notification-source-page .notification-svg-link-line {
  stroke: var(--color-link);
  stroke-width: 1.5;
}

.notification-source-page .notification-svg-secondary {
  fill: transparent;
  stroke: var(--color-border-strong);
}

.notification-source-page .notification-svg-primary {
  fill: var(--color-accent);
  stroke: var(--color-accent);
}

.notification-source-page .notification-svg-button-label {
  fill: var(--color-text-primary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.notification-source-page .notification-svg-primary-label {
  fill: var(--color-bg-surface);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.notification-source-page .notification-svg-close {
  color: var(--color-text-primary);
}

.notification-source-page .notification-svg-close rect {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-standard);
}

.notification-source-page .notification-anatomy-key {
  align-content: center;
  display: grid;
  gap: var(--lds-space-3);
}

.notification-source-page .notification-anatomy-key p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--lds-space-2);
  align-items: start;
  margin: 0;
}

.notification-source-page .notification-anatomy-key p > span:last-child {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.notification-source-page .notification-anatomy-key p strong,
.notification-source-page .notification-anatomy-key p span span {
  display: block;
}

.notification-source-page .tl-key-num {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-link);
  border-radius: 999px;
  color: var(--color-link);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.notification-source-page .spec-notification {
  --notification-bg: var(--color-info-bg);
  --notification-fg: var(--color-info-text);
  --notification-border: var(--color-info-border);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: var(--notification-gap);
  align-items: start;
  width: 100%;
  padding: var(--notification-padding);
  border: 1px solid var(--notification-border);
  border-radius: var(--lds-radius-md);
  color: var(--notification-fg);
  background: var(--notification-bg);
}

.notification-source-page .spec-notification.tone-success {
  --notification-bg: var(--color-success-bg);
  --notification-fg: var(--color-success-text);
  --notification-border: var(--color-success-border);
}

.notification-source-page .spec-notification.tone-warning {
  --notification-bg: var(--color-warning-bg);
  --notification-fg: var(--color-warning-text);
  --notification-border: var(--color-warning-border);
}

.notification-source-page .spec-notification.tone-danger {
  --notification-bg: var(--color-danger-bg);
  --notification-fg: var(--color-danger-text);
  --notification-border: var(--color-danger-border);
}

.notification-source-page .spec-notification.dark {
  --notification-bg: #1F232B;
  color: #F4F6F9;
}

.notification-source-page .spec-notification.dark.tone-info {
  --notification-fg: #6FB0FF;
  --notification-border: #2E86FF;
}

.notification-source-page .spec-notification.dark.tone-success {
  --notification-fg: #52D787;
  --notification-border: #16B85F;
}

.notification-source-page .spec-notification.dark.tone-warning {
  --notification-fg: #FFC15A;
  --notification-border: #FF8A00;
}

.notification-source-page .spec-notification.dark.tone-danger {
  --notification-fg: #FF8B7C;
  --notification-border: #FF211A;
}

.notification-source-page .notification-status-icon {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--notification-fg);
  flex: 0 0 auto;
}

.notification-source-page .notification-status-icon svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-source-page .notification-copy {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
  color: var(--color-text-primary);
}

.notification-source-page .spec-notification.dark .notification-copy {
  color: #F4F6F9;
}

.notification-source-page .notification-copy strong {
  line-height: 1.35;
}

.notification-source-page .notification-copy p {
  margin: 0;
  color: var(--color-text-secondary);
}

.notification-source-page .spec-notification.dark .notification-copy p {
  color: #AEB4BD;
}

.notification-source-page .notification-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-2);
  align-items: center;
  justify-content: flex-end;
}

.notification-source-page .notification-close-control {
  display: inline-flex;
  align-items: start;
  justify-content: end;
}

.notification-source-page .spec-notification.vertical {
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.notification-source-page .spec-notification.vertical .notification-actions {
  grid-column: 2 / -1;
  justify-content: start;
}

.notification-source-page .notification-state-surface .tl-state-card {
  min-height: 178px;
}

.notification-source-page .notification-state-surface .tl-state-grid {
  grid-template-columns: repeat(2, minmax(260px, 1fr));
}

.notification-source-page .notification-dark-surface {
  background: #0A0C10;
}

.notification-source-page .notification-layout-stack {
  display: grid;
  gap: var(--lds-space-4);
}

.notification-source-page .notification-variant-stack {
  display: grid;
  gap: var(--lds-space-3);
}

.notification-source-page .notification-measure-card {
  display: grid;
  gap: var(--lds-space-4);
}

.notification-source-page .notification-info-icon {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-link);
  flex: 0 0 auto;
}

.notification-source-page .notification-info-icon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.notification-source-page .notification-source-details {
  margin-top: 0;
}

@media (max-width: 720px) {
  .notification-source-page .notification-anatomy-grid {
    grid-template-columns: 1fr;
  }

  .notification-source-page .notification-anatomy-stage {
    min-height: 260px;
    overflow-x: auto;
    place-items: start;
    padding: var(--lds-space-3);
  }

  .notification-source-page .notification-anatomy-svg {
    min-width: 620px;
  }

  .notification-source-page .spec-notification,
  .notification-source-page .spec-notification.vertical {
    grid-template-columns: auto minmax(0, 1fr) auto;
  }

  .notification-source-page .notification-actions {
    grid-column: 2 / -1;
    justify-content: start;
  }

  .notification-source-page .notification-state-surface .tl-state-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .notification-source-page .spec-notification,
  .notification-source-page .spec-notification.vertical {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .notification-source-page .notification-close-control {
    grid-column: 2;
    justify-content: start;
  }

  .notification-source-page .notification-actions {
    grid-column: 1 / -1;
    align-items: stretch;
  }
}

/* Form Elements - source-faithful v0 page (DESIGN-LANGUAGE-48A) */
.form-elements-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --form-elements-accent: var(--color-accent);
  --form-elements-error: var(--color-danger);
  --form-elements-success: var(--color-success);
}

.form-elements-source-page .form-elements-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.form-elements-source-page .form-elements-anatomy-stage,
.form-elements-source-page .form-elements-config-card,
.form-elements-source-page .form-elements-layout-card,
.form-elements-source-page .form-elements-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.form-elements-source-page .form-elements-anatomy-stage {
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.form-elements-source-page .form-elements-anatomy-svg,
.form-elements-source-page .form-elements-spacing-svg {
  width: min(100%, 760px);
  height: auto;
  display: block;
}

.form-elements-source-page .form-elements-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.form-elements-source-page .form-elements-svg-label {
  fill: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.form-elements-source-page .form-elements-svg-optional,
.form-elements-source-page .form-elements-svg-helper,
.form-elements-source-page .form-elements-svg-value {
  fill: var(--color-text-secondary);
  font-size: 14px;
}

.form-elements-source-page .form-elements-svg-status {
  fill: var(--form-elements-error);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.form-elements-source-page .form-elements-svg-field {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.form-elements-source-page .form-elements-svg-tooltip {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.form-elements-source-page .form-elements-svg-tooltip-text {
  fill: var(--color-text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.form-elements-source-page .form-elements-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 74%, transparent);
}

.form-elements-source-page .form-elements-svg-measure {
  fill: var(--form-elements-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.form-elements-source-page .form-elements-svg-pointer {
  stroke: var(--form-elements-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.form-elements-source-page .form-elements-svg-callout-number {
  fill: var(--form-elements-accent);
}

.form-elements-source-page .form-elements-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.form-elements-source-page .form-elements-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--form-elements-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.form-elements-source-page .form-elements-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.form-elements-source-page .form-elements-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.form-elements-source-page .form-elements-anatomy-key strong,
.form-elements-source-page .form-elements-anatomy-key span span {
  display: block;
}

.form-elements-source-page .form-elements-anatomy-key strong {
  color: var(--color-text-primary);
}

.form-elements-source-page .form-elements-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.form-elements-source-page .form-elements-key-num,
.form-elements-source-page .form-elements-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--form-elements-accent);
  border-radius: 50%;
  color: var(--form-elements-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.form-elements-source-page .form-elements-info-icon::before,
.form-elements-source-page .form-elements-info-icon::after {
  content: "";
  display: block;
  background: currentColor;
  border-radius: 999px;
}

.form-elements-source-page .form-elements-info-icon::before {
  width: 2px;
  height: 7px;
  align-self: end;
  justify-self: center;
  margin-bottom: 3px;
}

.form-elements-source-page .form-elements-info-icon::after {
  width: 2px;
  height: 2px;
  align-self: start;
  justify-self: center;
  margin-top: 3px;
}

.form-elements-source-page .form-elements-card-grid,
.form-elements-source-page .form-elements-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.form-elements-source-page .form-elements-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.form-elements-source-page .form-elements-config-card,
.form-elements-source-page .form-elements-layout-card,
.form-elements-source-page .form-elements-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.form-elements-source-page .form-elements-config-card h3,
.form-elements-source-page .form-elements-layout-card h3,
.form-elements-source-page .form-elements-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.form-elements-source-page .form-elements-config-demo {
  min-height: 158px;
  display: grid;
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.form-elements-source-page .form-element-field {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  color: var(--color-text-primary);
}

.form-elements-source-page .form-element-label-row {
  display: flex;
  align-items: center;
  gap: var(--lds-space-2);
  min-width: 0;
}

.form-elements-source-page .form-element-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lds-space-2);
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-semibold);
}

.form-elements-source-page .form-element-required,
.form-elements-source-page .form-element-optional {
  color: var(--color-text-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-regular);
}

.form-elements-source-page .form-element-required::before {
  content: "(";
}

.form-elements-source-page .form-element-required::after {
  content: ")";
}

.form-elements-source-page .form-element-tooltip {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border-strong);
  border-radius: 999px;
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
}

.form-elements-source-page .form-element-control {
  min-width: 0;
  min-height: 44px;
  padding: 0 var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
}

.form-elements-source-page .form-element-control:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.form-elements-source-page .form-element-helper,
.form-elements-source-page .form-element-status {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.form-elements-source-page .form-element-helper {
  color: var(--color-text-secondary);
}

.form-elements-source-page .form-element-status.error {
  color: var(--form-elements-error);
  font-weight: var(--font-weight-semibold);
}

.form-elements-source-page .form-element-status.success {
  color: var(--form-elements-success);
  font-weight: var(--font-weight-semibold);
}

.form-elements-source-page .form-element-field.is-disabled {
  opacity: .48;
}

.form-elements-source-page .form-elements-state-surface .tl-state-card {
  min-height: 196px;
}

.form-elements-source-page .form-elements-state-surface.dark .form-element-label,
.form-elements-source-page .form-element-field.is-dark .form-element-label {
  color: #F4F6F9;
}

.form-elements-source-page .form-elements-state-surface.dark .form-element-required,
.form-elements-source-page .form-elements-state-surface.dark .form-element-optional,
.form-elements-source-page .form-elements-state-surface.dark .form-element-helper,
.form-elements-source-page .form-element-field.is-dark .form-element-required,
.form-elements-source-page .form-element-field.is-dark .form-element-optional,
.form-elements-source-page .form-element-field.is-dark .form-element-helper {
  color: #C8D0DA;
}

.form-elements-source-page .form-elements-state-surface.dark .form-element-control,
.form-elements-source-page .form-element-field.is-dark .form-element-control {
  border-color: #D7DEE8;
  color: #F4F6F9;
  background: #1F232B;
}

.form-elements-source-page .form-elements-state-surface.dark .form-element-tooltip,
.form-elements-source-page .form-element-field.is-dark .form-element-tooltip {
  border-color: #D7DEE8;
  color: #F4F6F9;
  background: #1F232B;
}

.form-elements-source-page .form-elements-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.form-elements-source-page .form-elements-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--form-elements-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.form-elements-source-page .form-elements-side-example {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(180px, .8fr);
  gap: var(--lds-space-3);
  align-items: start;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.form-elements-source-page .form-elements-side-helper {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.form-elements-source-page .form-elements-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .form-elements-source-page .form-elements-anatomy-grid,
  .form-elements-source-page .form-elements-card-grid,
  .form-elements-source-page .form-elements-card-grid.compact,
  .form-elements-source-page .form-elements-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .form-elements-source-page .form-elements-anatomy-stage,
  .form-elements-source-page .form-elements-config-card,
  .form-elements-source-page .form-elements-layout-card,
  .form-elements-source-page .form-elements-rule-card,
  .form-elements-source-page .form-elements-config-demo {
    padding: var(--lds-space-3);
  }

  .form-elements-source-page .form-elements-side-example {
    grid-template-columns: 1fr;
    padding: var(--lds-space-3);
  }
}

/* Text Area - source-faithful v0 page (DESIGN-LANGUAGE-49A) */
.text-area-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --text-area-accent: var(--color-accent);
  --text-area-error: var(--color-danger);
}

.text-area-source-page .text-area-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.text-area-source-page .text-area-anatomy-stage,
.text-area-source-page .text-area-config-card,
.text-area-source-page .text-area-layout-card,
.text-area-source-page .text-area-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.text-area-source-page .text-area-anatomy-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.text-area-source-page .text-area-anatomy-svg,
.text-area-source-page .text-area-spacing-svg {
  width: min(100%, 780px);
  height: auto;
  display: block;
}

.text-area-source-page .text-area-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.text-area-source-page .text-area-svg-label {
  fill: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.text-area-source-page .text-area-svg-container {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.text-area-source-page .text-area-svg-input,
.text-area-source-page .text-area-svg-helper,
.text-area-source-page .text-area-svg-count {
  fill: var(--color-text-secondary);
  font-size: 14px;
}

.text-area-source-page .text-area-svg-error-text,
.text-area-source-page .text-area-svg-error-icon {
  fill: var(--text-area-error);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.text-area-source-page .text-area-svg-error-dot {
  fill: var(--color-bg-surface);
  stroke: var(--text-area-error);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.text-area-source-page .text-area-svg-overflow,
.text-area-source-page .text-area-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 72%, transparent);
}

.text-area-source-page .text-area-svg-measure {
  fill: var(--text-area-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.text-area-source-page .text-area-svg-pointer {
  stroke: var(--text-area-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.text-area-source-page .text-area-svg-callout-number {
  fill: var(--text-area-accent);
}

.text-area-source-page .text-area-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.text-area-source-page .text-area-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--text-area-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.text-area-source-page .text-area-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.text-area-source-page .text-area-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.text-area-source-page .text-area-anatomy-key strong,
.text-area-source-page .text-area-anatomy-key span span {
  display: block;
}

.text-area-source-page .text-area-anatomy-key strong {
  color: var(--color-text-primary);
}

.text-area-source-page .text-area-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.text-area-source-page .text-area-key-num,
.text-area-source-page .text-area-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--text-area-accent);
  border-radius: 50%;
  color: var(--text-area-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.text-area-source-page .text-area-info-icon::before,
.text-area-source-page .text-area-info-icon::after {
  content: "";
  display: block;
  background: currentColor;
  border-radius: 999px;
}

.text-area-source-page .text-area-info-icon::before {
  width: 2px;
  height: 7px;
  align-self: end;
  justify-self: center;
  margin-bottom: 3px;
}

.text-area-source-page .text-area-info-icon::after {
  width: 2px;
  height: 2px;
  align-self: start;
  justify-self: center;
  margin-top: 3px;
}

.text-area-source-page .text-area-card-grid,
.text-area-source-page .text-area-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.text-area-source-page .text-area-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.text-area-source-page .text-area-config-card,
.text-area-source-page .text-area-layout-card,
.text-area-source-page .text-area-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.text-area-source-page .text-area-config-card h3,
.text-area-source-page .text-area-layout-card h3,
.text-area-source-page .text-area-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.text-area-source-page .text-area-config-demo {
  min-height: 220px;
  display: grid;
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.text-area-source-page .text-area-field {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  color: var(--color-text-primary);
}

.text-area-source-page .text-area-label {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--lds-space-2);
  color: var(--color-text-primary);
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-semibold);
}

.text-area-source-page .text-area-optional {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-regular);
}

.text-area-source-page .text-area-control-wrap {
  position: relative;
  min-width: 0;
}

.text-area-source-page .text-area-control {
  width: 100%;
  min-width: 0;
  min-height: 88px;
  display: block;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  font: inherit;
  line-height: 20px;
  resize: vertical;
}

.text-area-source-page .text-area-field.is-filled .text-area-control {
  background: var(--color-bg-panel);
}

.text-area-source-page .text-area-field.is-compact .text-area-control {
  min-height: 88px;
}

.text-area-source-page .text-area-field.is-tall .text-area-control {
  min-height: 124px;
}

.text-area-source-page .text-area-field.state-hover .text-area-control,
.text-area-source-page .text-area-field:hover .text-area-control {
  border-color: var(--color-text-secondary);
}

.text-area-source-page .text-area-control:focus-visible,
.text-area-source-page .text-area-field.state-focus .text-area-control {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
  border-color: var(--color-accent);
}

.text-area-source-page .text-area-field.is-error .text-area-control,
.text-area-source-page .text-area-field.is-overflow .text-area-control {
  border-color: var(--text-area-error);
  background:
    linear-gradient(transparent, transparent),
    var(--color-bg-surface);
}

.text-area-source-page .text-area-error-icon {
  position: absolute;
  top: var(--lds-space-3);
  right: var(--lds-space-3);
  width: 20px;
  height: 20px;
  color: var(--text-area-error);
  pointer-events: none;
}

.text-area-source-page .text-area-error-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}

.text-area-source-page .text-area-support-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--lds-space-3);
  align-items: start;
}

.text-area-source-page .text-area-support-copy {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.text-area-source-page .text-area-helper,
.text-area-source-page .text-area-error-text,
.text-area-source-page .text-area-count {
  margin: 0;
  font-size: 14px;
  line-height: 20px;
}

.text-area-source-page .text-area-helper,
.text-area-source-page .text-area-count {
  color: var(--color-text-secondary);
}

.text-area-source-page .text-area-error-text,
.text-area-source-page .text-area-field.is-overflow .text-area-count {
  color: var(--text-area-error);
  font-weight: var(--font-weight-semibold);
}

.text-area-source-page .text-area-field.is-disabled {
  opacity: .48;
}

.text-area-source-page .text-area-field.is-readonly .text-area-control {
  cursor: default;
}

.text-area-source-page .text-area-state-surface .tl-state-card {
  min-height: 292px;
}

.text-area-source-page .text-area-state-surface.dark .text-area-label,
.text-area-source-page .text-area-field.is-dark .text-area-label {
  color: #F4F6F9;
}

.text-area-source-page .text-area-state-surface.dark .text-area-optional,
.text-area-source-page .text-area-state-surface.dark .text-area-helper,
.text-area-source-page .text-area-state-surface.dark .text-area-count,
.text-area-source-page .text-area-field.is-dark .text-area-optional,
.text-area-source-page .text-area-field.is-dark .text-area-helper,
.text-area-source-page .text-area-field.is-dark .text-area-count {
  color: #C8D0DA;
}

.text-area-source-page .text-area-state-surface.dark .text-area-control,
.text-area-source-page .text-area-field.is-dark .text-area-control {
  border-color: #D7DEE8;
  color: #F4F6F9;
  background: #1F232B;
}

.text-area-source-page .text-area-state-surface.dark .text-area-field.is-filled .text-area-control,
.text-area-source-page .text-area-field.is-dark.is-filled .text-area-control {
  background: #2A3039;
}

.text-area-source-page .text-area-state-surface.dark .text-area-field.is-error .text-area-control,
.text-area-source-page .text-area-state-surface.dark .text-area-field.is-overflow .text-area-control,
.text-area-source-page .text-area-field.is-dark.is-error .text-area-control,
.text-area-source-page .text-area-field.is-dark.is-overflow .text-area-control {
  border-color: #FFB4AB;
}

.text-area-source-page .text-area-state-surface.dark .text-area-error-text,
.text-area-source-page .text-area-state-surface.dark .text-area-error-icon,
.text-area-source-page .text-area-state-surface.dark .text-area-field.is-overflow .text-area-count,
.text-area-source-page .text-area-field.is-dark .text-area-error-text,
.text-area-source-page .text-area-field.is-dark .text-area-error-icon,
.text-area-source-page .text-area-field.is-dark.is-overflow .text-area-count {
  color: #FFB4AB;
}

.text-area-source-page .text-area-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.text-area-source-page .text-area-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--text-area-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.text-area-source-page .text-area-flex-stack {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.text-area-source-page .text-area-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .text-area-source-page .text-area-anatomy-grid,
  .text-area-source-page .text-area-card-grid,
  .text-area-source-page .text-area-card-grid.compact,
  .text-area-source-page .text-area-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .text-area-source-page .text-area-anatomy-stage,
  .text-area-source-page .text-area-config-card,
  .text-area-source-page .text-area-layout-card,
  .text-area-source-page .text-area-rule-card,
  .text-area-source-page .text-area-config-demo,
  .text-area-source-page .text-area-flex-stack {
    padding: var(--lds-space-3);
  }

  .text-area-source-page .text-area-support-row {
    grid-template-columns: 1fr;
  }
}

.image-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --image-accent: var(--color-accent);
}

.image-source-page .image-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.image-source-page .image-anatomy-stage,
.image-source-page .image-config-card,
.image-source-page .image-layout-card,
.image-source-page .image-rule-card,
.image-source-page .image-accessibility-figure {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.image-source-page .image-anatomy-stage {
  min-height: 320px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.image-source-page .image-anatomy-svg,
.image-source-page .image-fit-svg {
  width: min(100%, 780px);
  height: auto;
  display: block;
}

.image-source-page .image-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.image-source-page .image-svg-box {
  fill: transparent;
  stroke: var(--color-border-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.image-source-page .image-svg-sun,
.image-source-page .image-svg-mountain,
.image-source-page .image-svg-art {
  fill: var(--color-text-primary);
}

.image-source-page .image-svg-art-wide,
.image-source-page .image-svg-art-tall {
  opacity: .9;
}

.image-source-page .image-svg-caption {
  fill: var(--color-text-secondary);
  font-size: 14px;
  text-anchor: middle;
}

.image-source-page .image-svg-pointer {
  stroke: var(--image-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.image-source-page .image-svg-callout-number {
  fill: var(--image-accent);
}

.image-source-page .image-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.image-source-page .image-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--image-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.image-source-page .image-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.image-source-page .image-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.image-source-page .image-anatomy-key strong,
.image-source-page .image-anatomy-key span span {
  display: block;
}

.image-source-page .image-anatomy-key strong {
  color: var(--color-text-primary);
}

.image-source-page .image-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.image-source-page .image-key-num,
.image-source-page .image-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--image-accent);
  border-radius: 50%;
  color: var(--image-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.image-source-page .image-info-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.image-source-page .image-card-grid,
.image-source-page .image-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.image-source-page .image-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.image-source-page .image-config-card,
.image-source-page .image-layout-card,
.image-source-page .image-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.image-source-page .image-config-card h3,
.image-source-page .image-layout-card h3,
.image-source-page .image-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.image-source-page .image-config-demo,
.image-source-page .image-size-strip {
  min-height: 220px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.image-source-page .image-frame {
  display: grid;
  justify-items: center;
  gap: var(--lds-space-2);
  min-width: 0;
}

.image-source-page .image-box {
  width: 116px;
  aspect-ratio: var(--image-ratio);
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
}

.image-source-page .image-frame.size-small .image-box {
  width: 72px;
}

.image-source-page .image-frame.size-large .image-box {
  width: 116px;
}

.image-source-page .image-frame.has-border .image-box {
  border: 1px solid var(--color-border-subtle);
}

.image-source-page .image-box img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-source-page .image-frame.fit-wide .image-box img {
  width: 100%;
  height: auto;
}

.image-source-page .image-frame.fit-tall .image-box img {
  width: auto;
  height: 100%;
}

.image-source-page .image-frame-label {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 13px;
  font-weight: var(--font-weight-semibold);
  text-align: center;
}

.image-source-page .image-state-surface .tl-state-card {
  min-height: 212px;
}

.image-source-page .image-state-surface.dark .image-frame-label,
.image-source-page .image-frame.is-dark .image-frame-label {
  color: #C8D0DA;
}

.image-source-page .image-state-surface.dark .image-frame.has-border .image-box,
.image-source-page .image-frame.is-dark.has-border .image-box {
  border-color: #6F7A89;
}

.image-source-page .image-state-surface.dark .image-box img,
.image-source-page .image-frame.is-dark .image-box img {
  filter: invert(1);
}

.image-source-page .image-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.image-source-page .image-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--image-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.image-source-page .image-accessibility-figure {
  display: grid;
  justify-items: center;
  gap: var(--lds-space-3);
  margin: 0;
  padding: var(--lds-card-padding-standard);
}

.image-source-page .image-accessibility-figure figcaption {
  color: var(--color-text-secondary);
  font-size: 14px;
  text-align: center;
}

.image-source-page .image-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .image-source-page .image-anatomy-grid,
  .image-source-page .image-card-grid,
  .image-source-page .image-card-grid.compact,
  .image-source-page .image-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .image-source-page .image-anatomy-stage,
  .image-source-page .image-config-card,
  .image-source-page .image-layout-card,
  .image-source-page .image-rule-card,
  .image-source-page .image-config-demo,
  .image-source-page .image-size-strip,
  .image-source-page .image-accessibility-figure {
    padding: var(--lds-space-3);
  }
}

.title-lockup-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --title-lockup-accent: var(--color-accent);
}

.title-lockup-source-page .title-lockup-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.title-lockup-source-page .title-lockup-anatomy-stage,
.title-lockup-source-page .title-lockup-config-card,
.title-lockup-source-page .title-lockup-layout-card,
.title-lockup-source-page .title-lockup-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.title-lockup-source-page .title-lockup-anatomy-stage {
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.title-lockup-source-page .title-lockup-anatomy-svg,
.title-lockup-source-page .title-lockup-spacing-svg {
  width: min(100%, 780px);
  height: auto;
  display: block;
}

.title-lockup-source-page .title-lockup-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.title-lockup-source-page .title-lockup-svg-box {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.title-lockup-source-page .title-lockup-svg-eyebrow {
  fill: var(--color-text-primary);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  letter-spacing: .04em;
}

.title-lockup-source-page .title-lockup-svg-title {
  fill: var(--color-text-primary);
  font-size: 28px;
  font-weight: var(--font-weight-bold);
}

.title-lockup-source-page .title-lockup-svg-subtitle {
  fill: var(--color-text-secondary);
  font-size: 15px;
}

.title-lockup-source-page .title-lockup-svg-deferred {
  fill: var(--color-bg-muted);
  stroke: var(--color-border-subtle);
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.title-lockup-source-page .title-lockup-svg-deferred-text {
  fill: var(--color-text-secondary);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.title-lockup-source-page .title-lockup-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 72%, transparent);
}

.title-lockup-source-page .title-lockup-svg-measure {
  fill: var(--title-lockup-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.title-lockup-source-page .title-lockup-svg-pointer {
  stroke: var(--title-lockup-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.title-lockup-source-page .title-lockup-svg-callout-number {
  fill: var(--title-lockup-accent);
}

.title-lockup-source-page .title-lockup-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.title-lockup-source-page .title-lockup-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--title-lockup-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.title-lockup-source-page .title-lockup-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.title-lockup-source-page .title-lockup-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.title-lockup-source-page .title-lockup-anatomy-key strong,
.title-lockup-source-page .title-lockup-anatomy-key span span {
  display: block;
}

.title-lockup-source-page .title-lockup-anatomy-key strong {
  color: var(--color-text-primary);
}

.title-lockup-source-page .title-lockup-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.title-lockup-source-page .title-lockup-key-num,
.title-lockup-source-page .title-lockup-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--title-lockup-accent);
  border-radius: 50%;
  color: var(--title-lockup-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.title-lockup-source-page .title-lockup-info-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.title-lockup-source-page .title-lockup-card-grid,
.title-lockup-source-page .title-lockup-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.title-lockup-source-page .title-lockup-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.title-lockup-source-page .title-lockup-config-card,
.title-lockup-source-page .title-lockup-layout-card,
.title-lockup-source-page .title-lockup-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.title-lockup-source-page .title-lockup-config-card h3,
.title-lockup-source-page .title-lockup-layout-card h3,
.title-lockup-source-page .title-lockup-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.title-lockup-source-page .title-lockup-config-demo {
  display: grid;
  gap: var(--lds-space-3);
  align-content: start;
  min-width: 0;
}

.title-lockup-source-page .title-lockup-example {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  max-width: 100%;
}

.title-lockup-source-page .title-lockup-example.align-center {
  text-align: center;
}

.title-lockup-source-page .title-lockup-eyebrow,
.title-lockup-source-page .title-lockup-title,
.title-lockup-source-page .title-lockup-subtitle {
  margin: 0;
}

.title-lockup-source-page .title-lockup-eyebrow {
  margin-bottom: var(--lds-space-1);
  color: currentColor;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--font-weight-bold);
}

.title-lockup-source-page .title-lockup-title {
  color: currentColor;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

.title-lockup-source-page .title-lockup-subtitle {
  margin-top: var(--lds-space-2);
  color: var(--color-text-secondary);
}

.title-lockup-source-page .title-lockup-example.size-compact .title-lockup-title {
  font-size: 20px;
  line-height: 24px;
}

.title-lockup-source-page .title-lockup-example.size-medium .title-lockup-title {
  font-size: 32px;
  line-height: 36px;
}

.title-lockup-source-page .title-lockup-example.size-large .title-lockup-title {
  font-size: 40px;
  line-height: 44px;
}

.title-lockup-source-page .title-lockup-example.size-compact .title-lockup-subtitle {
  font-size: 14px;
  line-height: 20px;
}

.title-lockup-source-page .title-lockup-example.size-medium .title-lockup-subtitle,
.title-lockup-source-page .title-lockup-example.size-large .title-lockup-subtitle {
  font-size: 20px;
  line-height: 24px;
}

.title-lockup-source-page .title-lockup-example.color-secondary {
  color: var(--color-text-secondary);
}

.title-lockup-source-page .title-lockup-state-surface .tl-state-card {
  align-content: center;
}

.title-lockup-source-page .title-lockup-state-surface.dark .title-lockup-example,
.title-lockup-source-page .title-lockup-example.is-dark {
  background: var(--color-bg-inverse);
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
}

.title-lockup-source-page .title-lockup-state-surface.dark .title-lockup-example .title-lockup-subtitle,
.title-lockup-source-page .title-lockup-example.is-dark .title-lockup-subtitle {
  color: var(--color-text-inverse);
}

.title-lockup-source-page .title-lockup-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.title-lockup-source-page .title-lockup-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-3);
  border-left: 3px solid var(--title-lockup-accent);
  background: var(--color-bg-muted);
  color: var(--color-text-secondary);
}

.title-lockup-source-page .title-lockup-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .title-lockup-source-page .title-lockup-anatomy-grid,
  .title-lockup-source-page .title-lockup-card-grid,
  .title-lockup-source-page .title-lockup-card-grid.compact,
  .title-lockup-source-page .title-lockup-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .title-lockup-source-page .title-lockup-anatomy-stage,
  .title-lockup-source-page .title-lockup-config-card,
  .title-lockup-source-page .title-lockup-layout-card,
  .title-lockup-source-page .title-lockup-rule-card,
  .title-lockup-source-page .title-lockup-config-demo {
    padding: var(--lds-space-3);
  }

  .title-lockup-source-page .title-lockup-example.size-large .title-lockup-title,
  .title-lockup-source-page .title-lockup-example.size-medium .title-lockup-title {
    font-size: 28px;
    line-height: 34px;
  }
}

.unordered-list-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --unordered-list-accent: var(--color-accent);
}

.unordered-list-source-page .unordered-list-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.unordered-list-source-page .unordered-list-anatomy-stage,
.unordered-list-source-page .unordered-list-config-card,
.unordered-list-source-page .unordered-list-layout-card,
.unordered-list-source-page .unordered-list-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.unordered-list-source-page .unordered-list-anatomy-stage {
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.unordered-list-source-page .unordered-list-anatomy-svg,
.unordered-list-source-page .unordered-list-spacing-svg {
  width: min(100%, 780px);
  height: auto;
  display: block;
}

.unordered-list-source-page .unordered-list-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.unordered-list-source-page .unordered-list-svg-list-box {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.unordered-list-source-page .unordered-list-svg-lead {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
}

.unordered-list-source-page .unordered-list-svg-text {
  fill: var(--color-text-primary);
  font-size: 14px;
}

.unordered-list-source-page .unordered-list-svg-glyph {
  fill: var(--color-text-primary);
}

.unordered-list-source-page .unordered-list-svg-nested-glyph {
  fill: var(--color-text-primary);
  font-size: 18px;
  font-weight: var(--font-weight-regular);
  text-anchor: middle;
}

.unordered-list-source-page .unordered-list-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 72%, transparent);
}

.unordered-list-source-page .unordered-list-svg-measure {
  fill: var(--unordered-list-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.unordered-list-source-page .unordered-list-svg-pointer {
  stroke: var(--unordered-list-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.unordered-list-source-page .unordered-list-svg-callout-number {
  fill: var(--unordered-list-accent);
}

.unordered-list-source-page .unordered-list-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.unordered-list-source-page .unordered-list-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--unordered-list-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.unordered-list-source-page .unordered-list-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.unordered-list-source-page .unordered-list-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.unordered-list-source-page .unordered-list-anatomy-key strong,
.unordered-list-source-page .unordered-list-anatomy-key span span {
  display: block;
}

.unordered-list-source-page .unordered-list-anatomy-key strong {
  color: var(--color-text-primary);
}

.unordered-list-source-page .unordered-list-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.unordered-list-source-page .unordered-list-key-num,
.unordered-list-source-page .unordered-list-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--unordered-list-accent);
  border-radius: 50%;
  color: var(--unordered-list-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.unordered-list-source-page .unordered-list-info-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.unordered-list-source-page .unordered-list-card-grid,
.unordered-list-source-page .unordered-list-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.unordered-list-source-page .unordered-list-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.unordered-list-source-page .unordered-list-config-card,
.unordered-list-source-page .unordered-list-layout-card,
.unordered-list-source-page .unordered-list-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.unordered-list-source-page .unordered-list-config-card h3,
.unordered-list-source-page .unordered-list-layout-card h3,
.unordered-list-source-page .unordered-list-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.unordered-list-source-page .unordered-list-config-demo {
  min-height: 220px;
  display: grid;
  gap: var(--lds-space-4);
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.unordered-list-source-page .unordered-list-example {
  min-width: 0;
  color: var(--color-text-primary);
}

.unordered-list-source-page .unordered-list-lead {
  margin: 0 0 var(--lds-space-4);
  color: currentColor;
  font-weight: var(--font-weight-semibold);
}

.unordered-list-source-page .unordered-list {
  margin: 0;
  padding-inline-start: 1.45em;
  list-style-type: disc;
}

.unordered-list-source-page .unordered-list li {
  padding-inline-start: var(--lds-space-1);
}

.unordered-list-source-page .unordered-list li::marker {
  color: currentColor;
  font-weight: var(--font-weight-bold);
}

.unordered-list-source-page .unordered-list ul {
  margin: var(--lds-space-3) 0 0;
  padding-inline-start: 1.45em;
}

.unordered-list-source-page .unordered-list ul li::marker {
  content: "\\2013  ";
  font-weight: var(--font-weight-regular);
}

.unordered-list-source-page .unordered-list-example.spacing-standard .unordered-list > li + li {
  margin-top: var(--lds-space-3);
}

.unordered-list-source-page .unordered-list-example.spacing-standard .unordered-list-lead {
  margin-bottom: var(--lds-space-4);
}

.unordered-list-source-page .unordered-list-example.spacing-compact .unordered-list > li + li {
  margin-top: var(--lds-space-1);
}

.unordered-list-source-page .unordered-list-example.spacing-compact .unordered-list ul {
  margin-top: var(--lds-space-1);
}

.unordered-list-source-page .unordered-list-example.spacing-compact .unordered-list-lead {
  margin-bottom: var(--lds-space-2);
}

.unordered-list-source-page .unordered-list-example.size-large {
  font-size: 16px;
  line-height: 24px;
}

.unordered-list-source-page .unordered-list-example.size-medium {
  font-size: 15px;
  line-height: 22px;
}

.unordered-list-source-page .unordered-list-example.size-small {
  font-size: 14px;
  line-height: 20px;
}

.unordered-list-source-page .unordered-list-example.size-micro {
  font-size: 12px;
  line-height: 16px;
}

.unordered-list-source-page .unordered-list-example.color-secondary {
  color: var(--color-text-secondary);
}

.unordered-list-source-page .unordered-list-example.color-custom {
  color: var(--color-accent);
}

.unordered-list-source-page .unordered-list-state-surface .tl-state-card {
  min-height: 260px;
}

.unordered-list-source-page .unordered-list-state-surface.dark .unordered-list-example,
.unordered-list-source-page .unordered-list-example.is-dark {
  color: #F4F6F9;
}

.unordered-list-source-page .unordered-list-state-surface.dark .unordered-list-example.color-secondary,
.unordered-list-source-page .unordered-list-example.is-dark.color-secondary {
  color: #C8D0DA;
}

.unordered-list-source-page .unordered-list-state-surface.dark .unordered-list-example.color-custom,
.unordered-list-source-page .unordered-list-example.is-dark.color-custom {
  color: #BBD3FF;
}

.unordered-list-source-page .unordered-list-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.unordered-list-source-page .unordered-list-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--unordered-list-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.unordered-list-source-page .unordered-list-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .unordered-list-source-page .unordered-list-anatomy-grid,
  .unordered-list-source-page .unordered-list-card-grid,
  .unordered-list-source-page .unordered-list-card-grid.compact,
  .unordered-list-source-page .unordered-list-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .unordered-list-source-page .unordered-list-anatomy-stage,
  .unordered-list-source-page .unordered-list-config-card,
  .unordered-list-source-page .unordered-list-layout-card,
  .unordered-list-source-page .unordered-list-rule-card,
  .unordered-list-source-page .unordered-list-config-demo {
    padding: var(--lds-space-3);
  }
}

.icon-list-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --icon-list-accent: var(--color-accent);
}

.icon-list-source-page .icon-list-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.icon-list-source-page .icon-list-anatomy-stage,
.icon-list-source-page .icon-list-config-card,
.icon-list-source-page .icon-list-layout-card,
.icon-list-source-page .icon-list-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.icon-list-source-page .icon-list-anatomy-stage {
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.icon-list-source-page .icon-list-anatomy-svg,
.icon-list-source-page .icon-list-spacing-svg {
  width: min(100%, 780px);
  height: auto;
  display: block;
}

.icon-list-source-page .icon-list-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.icon-list-source-page .icon-list-svg-list-box {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.icon-list-source-page .icon-list-svg-icon-ring {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
}

.icon-list-source-page .icon-list-svg-icon {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.icon-list-source-page .icon-list-svg-title {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

.icon-list-source-page .icon-list-svg-subtitle {
  fill: var(--color-text-secondary);
  font-size: 13px;
}

.icon-list-source-page .icon-list-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 72%, transparent);
}

.icon-list-source-page .icon-list-svg-measure {
  fill: var(--icon-list-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.icon-list-source-page .icon-list-svg-pointer {
  stroke: var(--icon-list-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.icon-list-source-page .icon-list-svg-callout-number {
  fill: var(--icon-list-accent);
}

.icon-list-source-page .icon-list-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.icon-list-source-page .icon-list-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--icon-list-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.icon-list-source-page .icon-list-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.icon-list-source-page .icon-list-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.icon-list-source-page .icon-list-anatomy-key strong,
.icon-list-source-page .icon-list-anatomy-key span span {
  display: block;
}

.icon-list-source-page .icon-list-anatomy-key strong {
  color: var(--color-text-primary);
}

.icon-list-source-page .icon-list-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.icon-list-source-page .icon-list-key-num,
.icon-list-source-page .icon-list-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--icon-list-accent);
  border-radius: 50%;
  color: var(--icon-list-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.icon-list-source-page .icon-list-info-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.icon-list-source-page .icon-list-card-grid,
.icon-list-source-page .icon-list-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.icon-list-source-page .icon-list-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.icon-list-source-page .icon-list-config-card,
.icon-list-source-page .icon-list-layout-card,
.icon-list-source-page .icon-list-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.icon-list-source-page .icon-list-config-card h3,
.icon-list-source-page .icon-list-layout-card h3,
.icon-list-source-page .icon-list-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.icon-list-source-page .icon-list-config-demo {
  min-height: 220px;
  display: grid;
  gap: var(--lds-space-4);
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.icon-list-source-page .icon-list-example {
  display: grid;
  gap: var(--lds-space-4);
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-primary);
}

.icon-list-source-page .icon-list-example.spacing-compact {
  gap: var(--lds-space-3);
}

.icon-list-source-page .icon-list-example.spacing-expanded {
  gap: var(--lds-space-6);
}

.icon-list-source-page .icon-list-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-3);
  min-width: 0;
}

.icon-list-source-page .icon-list-example.align-top .icon-list-item {
  align-items: start;
}

.icon-list-source-page .icon-list-example.spacing-compact .icon-list-item {
  gap: var(--lds-space-2);
}

.icon-list-source-page .icon-list-example.spacing-expanded .icon-list-item {
  gap: var(--lds-space-4);
}

.icon-list-source-page .icon-list-mark {
  width: 24px;
  height: 24px;
  display: inline-grid;
  place-items: center;
  color: currentColor;
  flex: 0 0 auto;
}

.icon-list-source-page .icon-list-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

.icon-list-source-page .icon-list-copy {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.icon-list-source-page .icon-list-copy strong,
.icon-list-source-page .icon-list-copy span {
  display: block;
}

.icon-list-source-page .icon-list-copy strong {
  color: currentColor;
  font-size: 15px;
  line-height: 20px;
}

.icon-list-source-page .icon-list-copy span {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.icon-list-source-page .icon-list-example.size-medium .icon-list-mark {
  width: 28px;
  height: 28px;
}

.icon-list-source-page .icon-list-example.size-medium .icon-list-copy strong {
  font-size: 16px;
  line-height: 22px;
}

.icon-list-source-page .icon-list-example.size-large .icon-list-mark {
  width: 32px;
  height: 32px;
}

.icon-list-source-page .icon-list-example.size-large .icon-list-copy strong {
  font-size: 18px;
  line-height: 24px;
}

.icon-list-source-page .icon-list-example.size-xlarge .icon-list-mark {
  width: 40px;
  height: 18px;
}

.icon-list-source-page .icon-list-example.size-xlarge .icon-list-copy strong {
  font-size: 20px;
  line-height: 26px;
}

.icon-list-source-page .icon-list-state-surface .tl-state-card {
  min-height: 260px;
}

.icon-list-source-page .icon-list-state-surface.dark .icon-list-example,
.icon-list-source-page .icon-list-example.is-dark {
  color: #F4F6F9;
}

.icon-list-source-page .icon-list-state-surface.dark .icon-list-copy span,
.icon-list-source-page .icon-list-example.is-dark .icon-list-copy span {
  color: #C8D0DA;
}

.icon-list-source-page .icon-list-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.icon-list-source-page .icon-list-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--icon-list-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.icon-list-source-page .icon-list-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .icon-list-source-page .icon-list-anatomy-grid,
  .icon-list-source-page .icon-list-card-grid,
  .icon-list-source-page .icon-list-card-grid.compact,
  .icon-list-source-page .icon-list-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .icon-list-source-page .icon-list-anatomy-stage,
  .icon-list-source-page .icon-list-config-card,
  .icon-list-source-page .icon-list-layout-card,
  .icon-list-source-page .icon-list-rule-card,
  .icon-list-source-page .icon-list-config-demo {
    padding: var(--lds-space-3);
  }
}

.tooltip-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --tooltip-accent: var(--color-accent);
  --tooltip-popover-width: 232px;
}

.tooltip-source-page .tooltip-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.tooltip-source-page .tooltip-anatomy-stage,
.tooltip-source-page .tooltip-config-card,
.tooltip-source-page .tooltip-layout-card,
.tooltip-source-page .tooltip-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.tooltip-source-page .tooltip-anatomy-stage {
  min-height: 340px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.tooltip-source-page .tooltip-anatomy-svg {
  width: min(100%, 780px);
  height: auto;
  display: block;
}

.tooltip-source-page .tooltip-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.tooltip-source-page .tooltip-svg-popover {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1.25;
  filter: drop-shadow(0 8px 18px rgb(17 22 31 / 14%));
  vector-effect: non-scaling-stroke;
}

.tooltip-source-page .tooltip-svg-pointer {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.tooltip-source-page .tooltip-svg-trigger {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tooltip-source-page .tooltip-svg-trigger-text {
  fill: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.tooltip-source-page .tooltip-svg-title {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

.tooltip-source-page .tooltip-svg-body {
  fill: var(--color-text-primary);
  font-size: 13px;
}

.tooltip-source-page .tooltip-svg-scroll {
  fill: var(--color-border-strong);
}

.tooltip-source-page .tooltip-svg-line {
  stroke: var(--tooltip-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.tooltip-source-page .tooltip-svg-callout-number {
  fill: var(--tooltip-accent);
}

.tooltip-source-page .tooltip-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.tooltip-source-page .tooltip-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--tooltip-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.tooltip-source-page .tooltip-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.tooltip-source-page .tooltip-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.tooltip-source-page .tooltip-anatomy-key strong,
.tooltip-source-page .tooltip-anatomy-key span span {
  display: block;
}

.tooltip-source-page .tooltip-anatomy-key strong {
  color: var(--color-text-primary);
}

.tooltip-source-page .tooltip-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.tooltip-source-page .tooltip-key-num,
.tooltip-source-page .tooltip-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--tooltip-accent);
  border-radius: 50%;
  color: var(--tooltip-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.tooltip-source-page .tooltip-info-icon::before {
  content: "";
  width: 6px;
  height: 6px;
  display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
}

.tooltip-source-page .tooltip-card-grid,
.tooltip-source-page .tooltip-placement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.tooltip-source-page .tooltip-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tooltip-source-page .tooltip-config-card,
.tooltip-source-page .tooltip-layout-card,
.tooltip-source-page .tooltip-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.tooltip-source-page .tooltip-config-card h3,
.tooltip-source-page .tooltip-layout-card h3,
.tooltip-source-page .tooltip-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.tooltip-source-page .tooltip-config-demo,
.tooltip-source-page .tooltip-placement-demo {
  min-height: 220px;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--lds-space-4);
  padding: var(--lds-space-5) var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.tooltip-source-page .tooltip-demo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-1);
  min-width: min(100%, 320px);
  padding: 88px 0;
  color: var(--color-text-primary);
}

.tooltip-source-page .tooltip-inline-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-1);
  margin: 0;
  min-width: 0;
}

.tooltip-source-page .tooltip-inline-demo .tooltip-demo {
  min-width: 0;
  padding: 76px 0;
}

.tooltip-source-page .tooltip-inline-text {
  font-weight: var(--font-weight-semibold);
}

.tooltip-source-page .tooltip-trigger {
  flex: 0 0 auto;
}

.tooltip-source-page .tooltip-popover {
  position: absolute;
  z-index: 1;
  width: min(var(--tooltip-popover-width), calc(100vw - 48px));
  display: grid;
  gap: var(--lds-space-1);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  box-shadow: 0 10px 24px rgb(17 22 31 / 14%);
  font-size: 13px;
  line-height: 18px;
  text-align: left;
}

.tooltip-source-page .tooltip-popover strong,
.tooltip-source-page .tooltip-popover span {
  display: block;
}

.tooltip-source-page .tooltip-popover strong {
  font-size: 14px;
  line-height: 18px;
}

.tooltip-source-page .tooltip-pointer {
  position: absolute;
  width: 16px;
  height: 16px;
  display: block;
  background: inherit;
  border-right: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  border-bottom-right-radius: 3px;
  transform: rotate(45deg);
}

.tooltip-source-page .tooltip-demo.placement-above .tooltip-popover {
  left: 50%;
  bottom: calc(50% + 24px);
  transform: translateX(-50%);
}

.tooltip-source-page .tooltip-demo.placement-above .tooltip-pointer {
  left: 50%;
  bottom: -9px;
  transform: translateX(-50%) rotate(45deg);
}

.tooltip-source-page .tooltip-demo.placement-below .tooltip-popover {
  left: 50%;
  top: calc(50% + 24px);
  transform: translateX(-50%);
}

.tooltip-source-page .tooltip-demo.placement-below .tooltip-pointer {
  left: 50%;
  top: -9px;
  transform: translateX(-50%) rotate(225deg);
}

.tooltip-source-page .tooltip-demo.align-left .tooltip-popover {
  left: 0;
  transform: none;
}

.tooltip-source-page .tooltip-demo.align-left .tooltip-pointer {
  left: 28px;
}

.tooltip-source-page .tooltip-demo.align-right .tooltip-popover {
  right: 0;
  left: auto;
  transform: none;
}

.tooltip-source-page .tooltip-demo.align-right .tooltip-pointer {
  right: 28px;
  left: auto;
}

.tooltip-source-page .tooltip-demo.size-small {
  --tooltip-popover-width: 208px;
}

.tooltip-source-page .tooltip-demo.size-small .tooltip-popover {
  font-size: 12px;
  line-height: 17px;
}

.tooltip-source-page .tooltip-demo.has-overflow .tooltip-popover {
  max-height: 212px;
  overflow: auto;
}

.tooltip-source-page .tooltip-state-surface .tl-state-card {
  min-height: 280px;
}

.tooltip-source-page .tooltip-state-surface.dark .tooltip-demo,
.tooltip-source-page .tooltip-demo.is-dark {
  color: #F4F6F9;
}

.tooltip-source-page .tooltip-state-surface.dark .tooltip-popover,
.tooltip-source-page .tooltip-demo.is-dark .tooltip-popover {
  background: var(--color-bg-inverse);
  border-color: var(--color-border-inverse);
  color: var(--color-text-inverse);
  box-shadow: 0 12px 28px rgb(0 0 0 / 32%);
}

.tooltip-source-page .tooltip-state-surface.dark .tooltip-pointer,
.tooltip-source-page .tooltip-demo.is-dark .tooltip-pointer {
  border-color: var(--color-border-inverse);
}

.tooltip-source-page .tooltip-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.tooltip-source-page .tooltip-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--tooltip-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.tooltip-source-page .tooltip-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .tooltip-source-page .tooltip-anatomy-grid,
  .tooltip-source-page .tooltip-card-grid,
  .tooltip-source-page .tooltip-card-grid.compact,
  .tooltip-source-page .tooltip-placement-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .tooltip-source-page .tooltip-anatomy-stage,
  .tooltip-source-page .tooltip-config-card,
  .tooltip-source-page .tooltip-layout-card,
  .tooltip-source-page .tooltip-rule-card,
  .tooltip-source-page .tooltip-config-demo,
  .tooltip-source-page .tooltip-placement-demo {
    padding: var(--lds-space-3);
  }

  .tooltip-source-page .tooltip-demo {
    min-width: min(100%, 272px);
  }
}

.spec-tabs {
  display: grid;
  gap: var(--lds-space-3);
}

.spec-tab-list {
  display: flex;
  gap: var(--lds-space-1);
  border-bottom: 1px solid var(--color-border-subtle);
  overflow-x: auto;
}

.spec-tab-list button {
  position: relative;
  min-height: 44px;
  padding: 0 var(--lds-space-3);
  border: 0;
  color: var(--color-text-secondary);
  background: transparent;
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.spec-tab-list button.selected {
  color: var(--color-text-primary);
}

.spec-tab-list button.selected::after {
  content: "";
  position: absolute;
  left: var(--lds-space-3);
  right: var(--lds-space-3);
  bottom: -1px;
  height: 3px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-accent);
}

.spec-tab-list button.hover {
  background: var(--color-bg-panel);
}

.spec-tabs.vertical {
  grid-template-columns: 160px minmax(0, 1fr);
}

.spec-tabs.vertical .spec-tab-list {
  display: grid;
  align-content: start;
  border-right: 1px solid var(--color-border-subtle);
  border-bottom: 0;
}

.spec-tabs.highlight .spec-tab-list {
  padding: var(--lds-space-1);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  background: var(--color-bg-panel);
}

.spec-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-4);
  min-height: 56px;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.spec-toggle-row > span:first-child {
  display: grid;
  gap: var(--lds-space-1);
}

.spec-toggle-row.large {
  min-height: 72px;
}

.spec-toggle-row.disabled {
  opacity: .48;
}

.spec-switch {
  display: inline-flex;
  align-items: center;
  width: 46px;
  height: 26px;
  padding: 3px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-border-strong);
  transition: background var(--lds-motion-fast) ease;
}

.spec-switch span {
  width: 20px;
  height: 20px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-bg-surface);
  transition: transform var(--lds-motion-fast) ease;
}

.spec-switch.selected {
  background: var(--color-accent);
}

.spec-switch.selected span {
  transform: translateX(20px);
}

.pdf-anatomy-stage {
  display: grid;
  gap: var(--lds-space-5);
  padding: clamp(var(--lds-space-4), 4vw, var(--lds-space-7));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg-panel) 92%, var(--color-bg-surface)), var(--color-bg-surface));
}

.pdf-anatomy-svg-wrap {
  overflow-x: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.pdf-anatomy-svg {
  display: block;
  width: 100%;
  height: auto;
}

.svg-diagram-bg {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1.5;
}

.svg-button-container {
  fill: var(--color-text-primary);
  stroke: var(--color-text-primary);
  stroke-width: 2;
}

.svg-label-box {
  fill: transparent;
  stroke: color-mix(in srgb, var(--color-bg-surface) 82%, transparent);
  stroke-dasharray: 4 4;
  stroke-width: 1.5;
}

.svg-button-label {
  fill: var(--color-bg-surface);
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: middle;
}

.svg-padding-bracket {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: square;
  stroke-width: 2.5;
}

.svg-callout circle,
#anatomy-dot circle {
  fill: var(--color-accent);
}

.svg-callout path {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.75;
}

.svg-callout text {
  fill: var(--color-bg-surface);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: middle;
}

.svg-callout .svg-callout-label {
  fill: var(--color-text-primary);
  font-size: 15px;
}

.buttons-pdf-spec .button-anatomy-svg {
  min-width: 0;
}

.buttons-pdf-spec .button-svg-surface {
  fill: var(--color-text-primary);
  cursor: pointer;
  pointer-events: all;
  transition:
    fill 160ms ease,
    filter 160ms ease,
    transform 160ms ease;
}

.buttons-pdf-spec .button-svg-border {
  fill: none;
  stroke: var(--color-bg-surface);
  stroke-width: 2;
  pointer-events: none;
  transition:
    stroke 160ms ease,
    stroke-width 160ms ease;
}

.buttons-pdf-spec .button-svg-label {
  fill: var(--color-bg-surface);
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: middle;
  pointer-events: none;
  transition: fill 160ms ease;
}

.buttons-pdf-spec .button-svg-hit-area {
  fill: color-mix(in srgb, var(--color-accent) 14%, transparent);
  stroke: none;
  cursor: pointer;
  pointer-events: all;
  transition: fill 160ms ease;
}

.buttons-pdf-spec .button-svg-spec {
  cursor: pointer;
}

.buttons-pdf-spec .button-svg-spec:hover .button-svg-hit-area {
  fill: color-mix(in srgb, var(--color-accent) 20%, transparent);
}

.buttons-pdf-spec .button-svg-surface:hover,
.buttons-pdf-spec .button-svg-spec:hover .button-svg-surface {
  fill: var(--color-accent-hover);
  filter: drop-shadow(0 12px 18px rgba(10, 79, 224, .24));
  transform: translateY(-1px);
}

.buttons-pdf-spec .button-svg-surface:hover ~ .button-svg-border,
.buttons-pdf-spec .button-svg-spec:hover .button-svg-border {
  stroke: color-mix(in srgb, var(--color-bg-surface) 72%, var(--color-accent-hover));
  stroke-width: 2.5;
}

.buttons-pdf-spec .button-svg-focus-border {
  fill: none;
  stroke: var(--color-focus-ring);
  stroke-dasharray: 6 4;
  stroke-width: 2;
}

.buttons-pdf-spec .button-svg-focus-label {
  fill: var(--color-text-primary);
  font-size: 17px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: middle;
}

.buttons-pdf-spec .button-svg-min-demo {
  fill: color-mix(in srgb, var(--color-accent) 9%, transparent);
  stroke: var(--color-accent);
  stroke-width: 2;
}

.buttons-pdf-spec .button-svg-min-label {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: middle;
}

.buttons-pdf-spec .button-svg-callout-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: square;
  stroke-width: 2;
}

.buttons-pdf-spec .button-svg-callout-number {
  fill: var(--color-accent);
}

.buttons-pdf-spec .button-svg-callout-digit {
  fill: var(--color-bg-surface);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.buttons-pdf-spec .button-svg-callout-label {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: central;
}

.buttons-pdf-spec .button-svg-callout-end {
  fill: var(--color-bg-surface);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.buttons-pdf-spec .button-svg-measure-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-dasharray: 5 5;
  stroke-linecap: square;
  stroke-width: 2;
}

.buttons-pdf-spec .button-svg-margin-line {
  fill: none;
  stroke: var(--color-accent);
  stroke-linecap: square;
  stroke-width: 2;
}

.buttons-pdf-spec .button-svg-measure-label {
  fill: var(--color-text-primary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: central;
}

.buttons-pdf-spec .button-svg-measure-note {
  fill: var(--color-text-secondary);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  dominant-baseline: central;
}

.pdf-anatomy-legend,
.configuration-grid,
.button-surface-grid,
.layout-spec-grid,
.behaviors-grid,
.dynamic-type-grid,
.behavioral-note-grid {
  display: grid;
  gap: var(--lds-space-3);
}

.pdf-anatomy-legend {
  align-content: start;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.numbered-explanation-list {
  list-style: none;
  margin: 0;
  padding: var(--lds-space-4);
}

.numbered-explanation-list li {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.numbered-explanation-list li + li {
  margin-top: var(--lds-space-3);
}

.numbered-explanation-list li > span {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: start;
  margin-top: 1px;
  border: 1.5px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.pdf-anatomy-legend p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.pdf-anatomy-legend strong {
  color: var(--color-text-primary);
}

.configuration-card,
.layout-spec-card,
.behavior-card,
.pdf-state-surface {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.buttons-pdf-spec .configuration-card .spec-button,
.buttons-pdf-spec .layout-spec-card .spec-button,
.buttons-pdf-spec .surface-demo .spec-button,
.buttons-pdf-spec .button-size-grid .spec-button {
  justify-self: start;
  width: auto;
}

.buttons-pdf-spec .parent-container .spec-button.full-width {
  justify-self: stretch;
  width: 100%;
}

.configuration-card h3,
.layout-spec-card h3,
.behavior-card h3,
.pdf-state-surface h3 {
  margin: 0;
  font-size: var(--font-size-xl);
}

.spec-button {
  --spec-bg: var(--color-accent);
  --spec-fg: var(--color-bg-surface);
  --spec-border: var(--color-accent);
  min-width: 66px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  border: 1px solid var(--spec-border);
  border-radius: var(--lds-radius-pill);
  color: var(--spec-fg);
  background: var(--spec-bg);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  transition:
    transform var(--lds-motion-fast) ease,
    box-shadow var(--lds-motion-fast) ease,
    border-color var(--lds-motion-fast) ease;
}

.spec-button.small {
  min-width: 44px;
  min-height: 32px;
  padding: 0 16px;
  font-size: var(--font-size-sm);
}

.spec-button.large {
  min-width: 66px;
  min-height: 44px;
  padding: 0 24px;
}

.spec-button.primary.light {
  --spec-bg: var(--color-accent);
  --spec-fg: var(--color-bg-surface);
  --spec-border: var(--color-accent);
}

.spec-button.secondary.light {
  --spec-bg: transparent;
  --spec-fg: var(--color-text-primary);
  --spec-border: var(--color-border-strong);
}

.spec-button.primary.dark {
  --spec-bg: var(--color-bg-surface);
  --spec-fg: var(--color-text-primary);
  --spec-border: var(--color-bg-surface);
}

.spec-button.secondary.dark {
  --spec-bg: transparent;
  --spec-fg: var(--color-bg-surface);
  --spec-border: var(--color-bg-surface);
}

.spec-button.tertiary.light {
  --spec-bg: transparent;
  --spec-fg: var(--color-text-secondary);
  --spec-border: transparent;
}

.spec-button.tertiary.dark {
  --spec-bg: transparent;
  --spec-fg: var(--color-bg-surface);
  --spec-border: transparent;
}

.spec-button.destructive.light {
  --spec-bg: var(--color-danger-bg);
  --spec-fg: var(--color-danger-text);
  --spec-border: var(--color-danger-border);
}

.spec-button.destructive.dark {
  --spec-bg: color-mix(in srgb, var(--color-danger-bg) 16%, var(--color-bg-surface));
  --spec-fg: var(--color-danger-text);
  --spec-border: color-mix(in srgb, var(--color-danger-border) 72%, var(--color-bg-surface));
}

.spec-button.destructive.light:hover,
.spec-button.destructive.light.pdf-hover,
.spec-button.destructive.light.destructive-hover-demo {
  border-color: var(--color-danger-border);
  box-shadow: 0 0 0 2px var(--color-danger-border);
}

.spec-button.destructive.light:focus-visible,
.spec-button.destructive.light.destructive-focus-demo {
  border-color: var(--color-danger-border);
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.surface-demo {
  display: grid;
  grid-template-rows: auto minmax(96px, 1fr);
  gap: var(--lds-space-4);
  align-content: stretch;
  align-items: stretch;
  min-height: 168px;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
}

.surface-button-stack {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--lds-space-3);
  min-width: 0;
}

.buttons-pdf-spec .surface-button-stack .spec-button {
  justify-self: center;
}

.light-surface {
  background: var(--color-bg-panel);
}

.dark-surface {
  color: var(--color-bg-surface);
  background: var(--color-text-primary);
}

.dark-surface h3 {
  color: var(--color-text-inverse);
}

.compact-dl {
  display: grid;
  gap: var(--lds-space-2);
  margin: 0;
}

.compact-dl div {
  display: grid;
  gap: var(--lds-space-1);
}

.compact-dl dt {
  font-weight: var(--font-weight-bold);
}

.compact-dl dd {
  margin: 0;
  color: var(--color-text-secondary);
}

.property-table {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  overflow: hidden;
}

.property-table > div {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.property-table span,
.property-table strong {
  padding: var(--lds-space-2);
  border-bottom: 1px solid var(--color-border-subtle);
  font-size: var(--font-size-sm);
}

.fixed-107 {
  width: 107px;
  padding-inline: 0;
}

.fixed-160 {
  width: 160px;
}

.button-width-stack {
  display: grid;
  justify-items: start;
  gap: var(--lds-space-3);
}

.parent-container {
  width: min(100%, 360px);
  padding: var(--lds-space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--lds-radius-md);
}

.min-large {
  width: 66px;
  padding-inline: 0;
}

.min-small {
  width: 44px;
  padding-inline: 0;
}

.overflow-demo {
  width: 214px;
  justify-content: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.overflow-demo span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.label-integrity-demo {
  max-width: min(100%, 360px);
  height: auto;
  min-height: 44px;
  padding-block: var(--lds-space-2);
  line-height: var(--lds-line-tight);
  white-space: normal;
}

.label-integrity-demo span {
  overflow-wrap: anywhere;
}

.wide-layout-card {
  grid-column: 1 / -1;
}

.pdf-state-surface.dark-surface .pdf-state-card {
  border-color: color-mix(in srgb, var(--color-bg-surface) 24%, transparent);
  background: color-mix(in srgb, var(--color-bg-surface) 6%, transparent);
}

.pdf-state-grid {
  display: grid;
  gap: var(--lds-space-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.pdf-state-card {
  display: grid;
  gap: var(--lds-space-3);
  align-content: center;
  justify-items: start;
  min-height: 176px;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.pdf-state-card .spec-button {
  justify-self: start;
}

.pdf-state-card > span {
  display: flex;
  align-items: flex-end;
  min-height: 34px;
  color: inherit;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

.pdf-hover {
  box-shadow: 0 0 0 2px var(--spec-border);
}

.pdf-active {
  transform: scale(.96);
}

.pdf-active-hover {
  transform: scale(.96);
  box-shadow: 0 0 0 2px var(--spec-border);
}

.pdf-focus {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.spec-button:disabled {
  opacity: .44;
  cursor: not-allowed;
  pointer-events: none;
}

.buttons-pdf-spec .spec-button:not(:disabled) {
  cursor: pointer;
}

.button-size-grid {
  display: grid;
  gap: var(--lds-space-3);
}

.button-size-grid article {
  display: grid;
  align-content: start;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-card-padding-standard);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.button-size-grid article .spec-button {
  margin-block: var(--lds-space-1);
}

.button-size-grid strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.button-size-grid span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.legion-vivid-light-scope .spec-button.primary.light {
  --spec-bg: var(--color-accent);
  --spec-fg: var(--color-accent-text);
  --spec-border: var(--color-accent);
}

.legion-vivid-light-scope .spec-button.primary.light:not(:disabled):hover,
.legion-vivid-light-scope .spec-button.primary.light.pdf-hover {
  --spec-bg: var(--color-accent-hover);
  --spec-border: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  box-shadow: 0 0 0 2px var(--color-accent-hover);
}

.legion-vivid-light-scope .spec-button.primary.light:not(:disabled):active,
.legion-vivid-light-scope .spec-button.primary.light.pdf-active,
.legion-vivid-light-scope .spec-button.primary.light.pdf-active-hover {
  --spec-bg: var(--color-accent-active);
  --spec-border: var(--color-accent-active);
}

.legion-vivid-light-scope .spec-button.secondary.light {
  --spec-bg: transparent;
  --spec-fg: var(--color-action-secondary-text);
  --spec-border: var(--color-action-secondary-border);
}

.legion-vivid-light-scope .spec-button.secondary.light:not(:disabled):hover,
.legion-vivid-light-scope .spec-button.secondary.light.pdf-hover {
  --spec-bg: var(--color-bg-inset);
  --spec-border: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  background: var(--color-bg-inset);
  box-shadow: 0 0 0 2px var(--color-accent-hover);
}

.legion-vivid-light-scope .spec-button.secondary.light:not(:disabled):active,
.legion-vivid-light-scope .spec-button.secondary.light.pdf-active,
.legion-vivid-light-scope .spec-button.secondary.light.pdf-active-hover {
  --spec-bg: var(--color-selected-bg);
  --spec-border: var(--color-accent-active);
}

.legion-vivid-light-scope .spec-button.primary.dark {
  --spec-bg: var(--color-bg-surface);
  --spec-fg: var(--color-text-primary);
  --spec-border: var(--color-bg-surface);
}

.legion-vivid-light-scope .spec-button.primary.dark:not(:disabled):hover,
.legion-vivid-light-scope .spec-button.primary.dark.pdf-hover {
  --spec-bg: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
  --spec-border: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
  border-color: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
  background: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
}

.legion-vivid-light-scope .spec-button.primary.dark:not(:disabled):active,
.legion-vivid-light-scope .spec-button.primary.dark.pdf-active,
.legion-vivid-light-scope .spec-button.primary.dark.pdf-active-hover {
  --spec-bg: color-mix(in srgb, var(--color-bg-surface) 82%, var(--color-accent));
  --spec-border: color-mix(in srgb, var(--color-bg-surface) 82%, var(--color-accent));
}

.legion-vivid-light-scope .spec-button.secondary.dark {
  --spec-bg: transparent;
  --spec-fg: var(--color-bg-surface);
  --spec-border: var(--color-bg-surface);
}

.legion-vivid-light-scope .spec-button.secondary.dark:not(:disabled):hover,
.legion-vivid-light-scope .spec-button.secondary.dark.pdf-hover {
  --spec-bg: color-mix(in srgb, var(--color-bg-surface) 10%, transparent);
  --spec-border: color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-accent));
  border-color: color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-accent));
  background: color-mix(in srgb, var(--color-bg-surface) 10%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-accent));
}

.legion-vivid-light-scope .spec-button.secondary.dark:not(:disabled):active,
.legion-vivid-light-scope .spec-button.secondary.dark.pdf-active,
.legion-vivid-light-scope .spec-button.secondary.dark.pdf-active-hover {
  --spec-bg: color-mix(in srgb, var(--color-bg-surface) 16%, transparent);
  --spec-border: var(--color-bg-surface);
}

.legion-vivid-light-scope .spec-button.tertiary.light {
  --spec-fg: var(--color-link);
}

.legion-vivid-light-scope .spec-button.tertiary.light:hover,
.legion-vivid-light-scope .spec-button.tertiary.light.pdf-hover {
  --spec-bg: var(--color-bg-inset);
  --spec-fg: var(--color-link-hover);
}

.legion-vivid-light-scope .spec-button.destructive.light:hover,
.legion-vivid-light-scope .spec-button.destructive.light.pdf-hover,
.legion-vivid-light-scope .spec-button.destructive.light.destructive-hover-demo {
  background: color-mix(in srgb, var(--color-danger-bg) 82%, var(--color-bg-panel));
}

.legion-vivid-light-scope .spec-button.tertiary.dark:hover,
.legion-vivid-light-scope .spec-button.tertiary.dark.pdf-hover {
  --spec-bg: color-mix(in srgb, var(--color-bg-surface) 10%, transparent);
  --spec-fg: var(--color-text-inverse);
}

.legion-vivid-light-scope .spec-button.destructive.dark:hover,
.legion-vivid-light-scope .spec-button.destructive.dark.pdf-hover {
  --spec-bg: color-mix(in srgb, var(--color-danger-bg) 22%, var(--color-bg-surface));
  --spec-border: color-mix(in srgb, var(--color-danger-border) 88%, var(--color-bg-surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-danger-border) 70%, transparent);
}

.legion-vivid-light-scope .spec-button.pdf-focus,
.legion-vivid-light-scope .spec-button:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.legion-vivid-light-scope .spec-button:disabled {
  --spec-bg: var(--color-bg-inset);
  --spec-fg: var(--color-text-disabled);
  --spec-border: var(--color-border-standard);
  opacity: 1;
}

.legion-vivid-light-scope .spec-button.primary.light:disabled,
.legion-vivid-light-scope .spec-button.secondary.light:disabled,
.legion-vivid-light-scope .spec-button.primary.light:disabled:hover,
.legion-vivid-light-scope .spec-button.secondary.light:disabled:hover {
  --spec-bg: var(--color-bg-inset);
  --spec-fg: var(--color-text-disabled);
  --spec-border: var(--color-border-standard);
  box-shadow: none;
  transform: none;
}

.legion-vivid-light-scope .spec-button.primary.dark:disabled,
.legion-vivid-light-scope .spec-button.secondary.dark:disabled,
.legion-vivid-light-scope .spec-button.primary.dark:disabled:hover,
.legion-vivid-light-scope .spec-button.secondary.dark:disabled:hover {
  --spec-bg: color-mix(in srgb, var(--color-bg-surface) 18%, transparent);
  --spec-fg: color-mix(in srgb, var(--color-bg-surface) 45%, transparent);
  --spec-border: color-mix(in srgb, var(--color-bg-surface) 36%, transparent);
  box-shadow: none;
  transform: none;
}

.behavioral-note-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.behavioral-note-grid p {
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.hit-area-spec {
  display: grid;
  gap: var(--lds-space-3);
  align-items: start;
}

.hit-box {
  display: grid;
  place-items: center;
  width: fit-content;
  min-height: 44px;
  padding-inline: 0;
  border: 2px dashed var(--color-warning-border);
  border-radius: var(--lds-radius-md);
  background: color-mix(in srgb, var(--color-warning-bg) 48%, transparent);
}

.hit-box.small {
  min-height: 44px;
}

.dynamic-type-grid > div,
.usage-grid > section {
  display: grid;
  gap: var(--lds-space-3);
  align-content: start;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.dynamic-default-demo,
.dynamic-large-demo {
  width: fit-content;
}

.dynamic-large-demo {
  max-width: 214px;
  height: auto;
  min-height: 44px;
  padding-block: var(--lds-space-2);
  line-height: var(--lds-line-tight);
  white-space: normal;
}

.spec-button.small.dynamic-large-demo {
  min-height: 32px;
  max-width: 150px;
}

.extension-state-row {
  grid-template-columns: repeat(auto-fit, minmax(180px, max-content));
}

/* Button Group - source-faithful v0 page (DESIGN-LANGUAGE-47B) */
.button-group-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --button-group-callout: var(--color-accent);
  --button-group-gap-button: var(--lds-space-3);
  --button-group-gap-link: var(--lds-space-4);
  --button-group-gap-caret: var(--lds-space-6);
}

.button-group-source-page .button-group-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.button-group-source-page .button-group-anatomy-stage,
.button-group-source-page .button-group-config-card,
.button-group-source-page .button-group-layout-card,
.button-group-source-page .button-group-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.button-group-source-page .button-group-anatomy-stage {
  display: grid;
  place-items: center;
  min-height: 300px;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.button-group-source-page .button-group-anatomy-svg,
.button-group-source-page .button-group-spacing-svg {
  width: min(100%, 760px);
  height: auto;
  display: block;
}

.button-group-source-page .button-group-svg-stage {
  fill: var(--color-bg-panel);
  stroke: var(--color-border-subtle);
  stroke-width: 1;
}

.button-group-source-page .button-group-svg-container {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
  stroke-width: 1;
}

.button-group-source-page .button-group-svg-button {
  fill: var(--color-accent);
  stroke: var(--color-accent);
  stroke-width: 1;
}

.button-group-source-page .button-group-svg-button.secondary {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
}

.button-group-source-page .button-group-svg-button-label {
  fill: var(--color-accent-text);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.button-group-source-page .button-group-svg-secondary-label {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.button-group-source-page .button-group-svg-link,
.button-group-source-page .button-group-svg-caret-link {
  fill: var(--color-link);
  font-size: 15px;
  font-weight: var(--font-weight-semibold);
  dominant-baseline: central;
}

.button-group-source-page .button-group-svg-link-underline,
.button-group-source-page .button-group-svg-caret {
  fill: none;
  stroke: var(--color-link);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-group-source-page .button-group-svg-gap {
  fill: color-mix(in srgb, var(--color-warning-bg) 72%, transparent);
}

.button-group-source-page .button-group-svg-measure {
  fill: var(--button-group-callout);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
}

.button-group-source-page .button-group-svg-pointer {
  stroke: var(--button-group-callout);
  stroke-width: 1.2;
  vector-effect: non-scaling-stroke;
}

.button-group-source-page .button-group-svg-callout-number {
  fill: var(--button-group-callout);
}

.button-group-source-page .button-group-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.button-group-source-page .button-group-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--button-group-callout);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.button-group-source-page .button-group-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.button-group-source-page .button-group-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: start;
  margin: 0;
}

.button-group-source-page .button-group-anatomy-key strong,
.button-group-source-page .button-group-anatomy-key span span {
  display: block;
}

.button-group-source-page .button-group-anatomy-key strong {
  color: var(--color-text-primary);
}

.button-group-source-page .button-group-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.button-group-source-page .button-group-key-num {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.button-group-source-page .button-group-card-grid,
.button-group-source-page .button-group-layout-grid {
  display: grid;
  gap: var(--lds-card-gap-standard);
}

.button-group-source-page .button-group-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.button-group-source-page .button-group-card-grid.compact,
.button-group-source-page .button-group-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.button-group-source-page .button-group-config-card,
.button-group-source-page .button-group-layout-card,
.button-group-source-page .button-group-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  align-content: start;
  min-width: 0;
  padding: var(--lds-card-padding-standard);
}

.button-group-source-page .button-group-config-card h3,
.button-group-source-page .button-group-layout-card h3,
.button-group-source-page .button-group-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.button-group-source-page .button-group-config-demo,
.button-group-source-page .button-group-row-stage {
  display: grid;
  gap: var(--lds-space-4);
  min-height: 128px;
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  background: var(--color-bg-panel);
  overflow-x: auto;
}

.button-group-source-page .button-group-demo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--button-group-gap-button);
  max-width: 100%;
  min-width: 0;
}

.button-group-source-page .button-group-demo.orientation-vertical {
  flex-direction: column;
  align-items: flex-start;
}

.button-group-source-page .button-group-demo.align-center {
  justify-content: center;
}

.button-group-source-page .button-group-demo.align-right {
  justify-content: flex-end;
}

.button-group-source-page .button-group-demo.button-width-fixed .spec-button {
  width: 136px;
}

.button-group-source-page .button-group-demo.group-width-half {
  width: min(100%, 360px);
  padding: var(--lds-space-3);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--lds-radius-md);
}

.button-group-source-page .button-group-demo.row-limit {
  max-width: 340px;
}

.button-group-source-page .button-group-link {
  flex: 0 1 auto;
}

.button-group-source-page .button-group-caret {
  flex: 0 0 auto;
}

.button-group-source-page .button-group-state-surface {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.button-group-source-page .button-group-state-surface .tl-state-card {
  min-height: 150px;
  align-content: center;
}

.button-group-source-page .button-group-state-surface.dark .button-group-config-demo,
.button-group-source-page .button-group-state-surface.dark .button-group-row-stage {
  background: color-mix(in srgb, var(--color-bg-surface) 8%, transparent);
}

.button-group-source-page .button-group-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.button-group-source-page .button-group-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.button-group-source-page .button-group-info-icon {
  width: 8px;
  height: 8px;
  display: inline-block;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg-surface);
}

.button-group-source-page .button-group-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 980px) {
  .button-group-source-page .button-group-card-grid,
  .button-group-source-page .button-group-state-surface {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .button-group-source-page .button-group-anatomy-grid,
  .button-group-source-page .button-group-card-grid,
  .button-group-source-page .button-group-card-grid.compact,
  .button-group-source-page .button-group-layout-grid,
  .button-group-source-page .button-group-state-surface {
    grid-template-columns: 1fr;
  }

  .button-group-source-page .button-group-anatomy-stage,
  .button-group-source-page .button-group-config-card,
  .button-group-source-page .button-group-layout-card,
  .button-group-source-page .button-group-rule-card,
  .button-group-source-page .button-group-config-demo,
  .button-group-source-page .button-group-row-stage {
    padding: var(--lds-space-3);
  }

  .button-group-source-page .button-group-demo.align-right {
    justify-content: flex-start;
  }
}

.input-source-page {
  --input-border: var(--color-border-standard);
  --input-focus: var(--color-link);
  --input-focus-ring: var(--color-focus-ring);
}

.input-source-preface,
.input-config-stack,
.input-elements-stack,
.input-layout-stack,
.input-state-matrix,
.credit-card-state-stack,
.input-behavior-stack,
.change-log-list {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.input-source-section {
  min-width: 0;
  max-width: 100%;
  scroll-margin-top: var(--lds-space-5);
}

.input-anatomy-board {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.anatomy-example-stack {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.input-source-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.input-source-field.compact {
  font-size: var(--font-size-sm);
}

.input-label,
.input-helper,
.input-validation {
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.input-helper {
  color: var(--color-text-helper, #5B7A95);
}

.input-label {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.input-container {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--lds-space-2);
  min-height: 44px;
  width: 100%;
  padding: 0 var(--lds-space-3);
  border: 1px solid var(--input-border);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
}

.input-source-field.tone-error .input-container {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.input-source-field.tone-success .input-container {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.input-value {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-value.typeover {
  color: var(--color-text-placeholder, #5B7A95);
}

.input-action {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
  cursor: pointer;
}

.input-action:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.card-art-placeholder,
.input-status-icon,
.anatomy-callout-badge {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.card-art-placeholder {
  min-width: 44px;
  height: 26px;
  padding: 0 var(--lds-space-2);
  border: 1px solid currentColor;
  border-radius: var(--lds-radius-sm);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

.input-status-icon {
  width: 22px;
  height: 22px;
  color: currentColor;
}

.input-status-icon svg,
.af-icon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.error-icon,
.error-text {
  color: var(--color-danger-text);
}

.success-icon,
.success-text {
  color: var(--color-success-text);
}

.anatomy-callout-badge {
  width: 22px;
  height: 22px;
  margin-right: 6px;
  border-radius: var(--lds-radius-pill);
  color: var(--color-bg-surface);
  background: var(--color-accent);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  vertical-align: middle;
}

.anatomy-source-key {
  align-content: start;
}

.source-backed-note {
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-secondary);
  background: var(--color-bg-panel);
}

.input-config-group,
.input-elements-stack > section,
.input-layout-stack > section,
.input-state-surface,
.inline-action-focus,
.credit-card-surface,
.behavior-panel,
.input-spacing-panel {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.input-config-group,
.input-elements-stack > section,
.input-layout-stack > section,
.input-state-surface,
.inline-action-focus,
.credit-card-surface,
.behavior-panel {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.input-config-grid,
.card-icon-grid,
.security-tooltip-grid,
.spacing-demo-grid,
.input-overflow-grid,
.input-state-grid,
.input-info-grid,
.behavior-list {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
}

.input-config-card,
.input-layout-rule-card,
.card-icon-example,
.input-info-grid > div,
.behavior-list > div {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.input-config-card h4,
.input-layout-rule-card h4,
.card-icon-example strong,
.input-state-card h4,
.behavior-list strong {
  margin: 0;
  font-size: var(--font-size-sm);
}

.input-config-card p,
.input-state-card p,
.behavior-list p,
.fluid-width-demo span,
.spacing-demo-grid span,
.input-info-grid span {
  margin: 0;
  color: var(--color-text-instructional, #5B7A95);
  font-size: var(--font-size-sm);
}

.input-source-page .input-variant-card,
.input-source-page .input-presentation-card,
.input-source-page .input-layout-rule-card {
  align-content: start;
  gap: var(--lds-space-4);
  padding: var(--lds-card-inner-padding);
}

.input-source-page .input-variant-card > h4,
.input-source-page .input-presentation-card > h4,
.input-source-page .input-layout-rule-card > h4 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  line-height: var(--lds-line-heading);
}

.input-source-page .input-variant-card .input-source-field,
.input-source-page .input-presentation-card .input-source-field {
  align-self: start;
  width: 100%;
}

.input-source-page .input-variant-card .input-container,
.input-source-page .input-presentation-card .input-container {
  min-height: 54px;
  border: 1.5px solid color-mix(in srgb, var(--input-anatomy-focus) 22%, var(--color-border-standard));
  border-radius: var(--lds-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 10px 28px rgba(38, 56, 74, .06);
}

.input-source-page .input-variant-card .input-source-field.filled .input-container,
.input-source-page .input-presentation-card .input-source-field.filled .input-container {
  background:
    linear-gradient(180deg, rgba(226,236,255,.55), rgba(255,255,255,.82)),
    var(--color-bg-panel);
}

.input-source-page .input-variant-card .input-source-field.transparent .input-container,
.input-source-page .input-presentation-card .input-source-field.transparent .input-container {
  background: color-mix(in srgb, var(--color-bg-surface) 64%, transparent);
}

.input-source-page .input-variant-card ul,
.input-source-page .input-presentation-card ul,
.input-source-page .input-layout-rule-card ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.input-source-page .input-variant-card li + li,
.input-source-page .input-presentation-card li + li,
.input-source-page .input-layout-rule-card li + li {
  margin-top: var(--lds-space-1);
}

.input-source-page .input-layout-stack > section {
  gap: var(--lds-space-4);
}

.input-source-page .input-layout-stack > section > h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-lg);
  line-height: var(--lds-line-heading);
}

.input-source-page .input-layout-rule-card {
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.76)),
    var(--color-bg-panel);
}

.input-source-page .input-layout-rule-card .input-live-field {
  width: 100%;
}

.input-source-page .input-layout-rule-card .input-live-shell {
  border-color: var(--color-info-border);
}

.input-source-page .input-layout-rule-card .input-live-shell input {
  text-overflow: ellipsis;
}

.input-source-page .input-overflow-grid {
  align-items: stretch;
}

.input-live-field {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
}

.input-live-label {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.input-live-shell {
  --input-live-border: color-mix(in srgb, var(--input-anatomy-focus) 22%, var(--color-border-standard));
  display: flex;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  border: 1.5px solid var(--color-info-border);
  border-radius: var(--lds-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.76)),
    var(--color-bg-surface);
  box-shadow: 0 12px 32px rgba(17, 31, 54, .08);
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}

.input-live-field:focus-within .input-live-shell {
  border-color: var(--input-anatomy-focus);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 0 0 3px var(--input-anatomy-focus-ring),
    0 14px 34px rgba(38, 56, 74, .1);
}

.input-live-field.is-focus-demo .input-live-shell {
  border-color: var(--input-anatomy-focus);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 0 0 3px var(--input-anatomy-focus-ring),
    0 14px 34px rgba(38, 56, 74, .1);
}

.input-live-field.is-keyboard-focus-demo .input-live-shell {
  border-color: var(--input-anatomy-focus);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.88),
    0 0 0 2px var(--color-bg-surface),
    0 0 0 5px var(--input-anatomy-focus-ring),
    0 14px 34px rgba(38, 56, 74, .1);
}

.input-live-field.is-disabled {
  pointer-events: none;
}

.input-live-field.is-disabled .input-live-shell {
  border-color: var(--color-border-subtle);
  background:
    linear-gradient(180deg, rgba(255,255,255,.62), rgba(238,243,248,.5)),
    var(--color-bg-inset);
  box-shadow: none;
}

.input-live-field.is-disabled :is(.input-live-label, .input-live-helper, .input-live-shell input) {
  color: var(--color-text-disabled);
  -webkit-text-fill-color: var(--color-text-disabled);
}

.input-live-field.is-disabled .input-live-shell input {
  opacity: 1;
}

.input-live-field.is-readonly .input-live-shell {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--color-text-secondary) 72%, var(--color-border-standard));
  background:
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(245,248,252,.72)),
    var(--color-bg-panel);
}

.input-live-field.is-readonly .input-live-shell input {
  cursor: default;
}

.input-live-field.is-filled .input-live-shell {
  background:
    linear-gradient(180deg, rgba(226,236,255,.62), rgba(255,255,255,.86)),
    var(--color-bg-panel);
}

.input-live-field.is-invalid .input-live-shell {
  border-color: color-mix(in srgb, var(--color-danger-text) 54%, var(--color-danger-border));
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,234,231,.72)),
    var(--color-danger-bg);
}

.input-live-field.is-valid .input-live-shell {
  border-color: color-mix(in srgb, var(--color-success-text) 54%, var(--color-success-border));
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,247,236,.72)),
    var(--color-success-bg);
}

.input-live-field.is-transparent .input-live-shell {
  background: color-mix(in srgb, var(--color-bg-surface) 66%, transparent);
}

.input-live-shell input {
  -webkit-appearance: none;
  appearance: none;
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  outline: 0;
  box-shadow: none;
  padding: 0 var(--lds-space-4);
  caret-color: var(--input-anatomy-focus);
  color: var(--color-text-primary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
}

.input-live-shell input:focus,
.input-live-shell input:focus-visible {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.input-live-shell input::placeholder {
  color: var(--color-text-placeholder, #5B7A95);
}

.input-live-clear-action {
  display: none;
  align-items: center;
  justify-content: center;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  margin-right: var(--lds-space-1);
  border: 0;
  border-radius: var(--lds-radius-full);
  color: color-mix(in srgb, var(--lds-tabs-active-color) 68%, var(--color-text-secondary));
  background: transparent;
  cursor: pointer;
  transition:
    background var(--lds-motion-fast) ease,
    color var(--lds-motion-fast) ease,
    box-shadow var(--lds-motion-fast) ease;
}

.input-live-field.has-value .input-live-clear-action {
  display: inline-flex;
}

.input-live-clear-action svg {
  display: block;
  width: 16px;
  height: 16px;
}

.input-live-clear-action:hover {
  color: var(--lds-tabs-hover-color);
  background: color-mix(in srgb, var(--color-selected-bg) 72%, transparent);
}

.input-live-clear-action:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 2px color-mix(in srgb, var(--color-bg-surface) 78%, transparent),
    0 0 0 4px var(--input-anatomy-focus);
}

.input-live-card {
  align-self: center;
  margin-left: var(--lds-space-4);
  margin-right: var(--lds-space-3);
  min-width: 44px;
  height: 26px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-border-standard);
  border-radius: var(--lds-radius-sm);
  color: var(--color-text-secondary);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
}

.input-live-action {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  min-width: 104px;
  overflow: hidden;
  border: 0;
  border-inline-start: 1px solid var(--color-border-standard);
  border-radius: 0 var(--lds-radius-md) var(--lds-radius-md) 0;
  color: var(--lds-tabs-active-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(226,236,255,.56)),
    color-mix(in srgb, var(--lds-tabs-selected-bg) 76%, transparent);
  font: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    inset 0 -1px 0 rgba(255,255,255,.22);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  transition:
    transform var(--lds-motion-fast) ease,
    box-shadow var(--lds-motion-fast) ease,
    color var(--lds-motion-fast) ease,
    background var(--lds-motion-fast) ease;
}

.input-live-action::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 46%);
  opacity: .32;
  mix-blend-mode: screen;
  transform: none;
  transition: opacity var(--lds-motion-fast) ease;
}

.input-live-action > * {
  position: relative;
  z-index: 1;
}

.input-live-action:hover {
  color: var(--lds-tabs-hover-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(226,236,255,.62)),
    color-mix(in srgb, var(--color-selected-bg) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px color-mix(in srgb, var(--input-anatomy-focus) 24%, transparent);
  transform: none;
}

.input-live-action:hover::after {
  opacity: .46;
}

.input-live-action:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 0 0 2px var(--input-anatomy-focus),
    inset 0 0 0 5px color-mix(in srgb, var(--input-anatomy-focus) 12%, transparent);
}

.input-live-icon-action {
  min-width: 72px;
}

.input-live-icon-action svg {
  display: block;
  width: 24px;
  height: 24px;
}

.input-live-helper {
  color: var(--color-text-helper, #5B7A95);
  font-size: var(--font-size-sm);
  line-height: 1.3;
}

.input-live-feedback {
  --input-live-feedback-color: var(--color-warning);
  display: inline-flex;
  align-items: center;
  gap: var(--lds-space-2);
  min-height: 1.3em;
  color: var(--input-live-feedback-color);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  line-height: 1.3;
}

.input-live-feedback:empty {
  display: none;
}

.input-live-feedback.is-success {
  --input-live-feedback-color: var(--color-success);
}

.input-live-feedback-icon {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}

.input-live-feedback :is(.input-live-feedback-icon, .input-live-feedback-text) {
  color: currentColor;
}

.input-presentation-surfaces {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.input-presentation-card {
  display: grid;
  min-width: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(226,236,255,.2)),
    var(--color-bg-panel);
}

.input-surface-demo,
.card-surface-set {
  padding: var(--lds-space-3);
  border-radius: var(--lds-radius-md);
}

.input-surface-demo.dark,
.card-surface-set.dark,
.input-state-surface.dark,
.credit-card-surface.dark,
.input-state-card.dark,
.security-tooltip.dark {
  --color-text-primary: #f5f5f5;
  --color-text-secondary: #c9c9c9;
  --color-text-muted: #969696;
  --color-bg-surface: #090909;
  --color-bg-panel: #1d1d1d;
  --color-border-subtle: #555;
  --color-border-strong: #d8d8d8;
  color: var(--color-text-primary);
  background: #090909;
}

.input-surface-demo.brand,
.card-surface-set.brand,
.input-state-surface.brand,
.credit-card-surface.brand,
.input-state-card.brand {
  --color-text-primary: #fff;
  --color-text-secondary: #fff;
  --color-bg-surface: #e60000;
  --color-bg-panel: #f21818;
  --color-border-subtle: rgba(255, 255, 255, .55);
  --color-border-strong: #fff;
  color: #fff;
  background: #e60000;
}

.input-surface-demo.transparent .input-container,
.input-state-card.transparent .input-container {
  background: transparent;
}

.input-surface-demo.filled .input-container,
.input-state-card.filled .input-container {
  background: var(--color-bg-surface);
}

.helper-right-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--lds-space-3);
  align-items: center;
}

.input-prop-table {
  display: grid;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  overflow: hidden;
}

.input-prop-table > div {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}

.input-prop-table > div:last-child {
  border-bottom: 0;
}

.card-surface-set h4,
.input-state-surface h3,
.credit-card-surface h3 {
  margin: 0;
}

.security-tooltip {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.tooltip-art {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.tooltip-art > div {
  display: grid;
  gap: var(--lds-space-1);
  padding: var(--lds-space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
}

.tooltip-art p {
  margin: 0;
  font-size: var(--font-size-xs);
}

.tooltip-art button {
  min-height: 34px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
  color: var(--color-text-primary);
  background: var(--color-bg-panel);
}

.fluid-width-demo {
  display: grid;
  gap: var(--lds-space-2);
}

.fluid-width-demo > span {
  display: block;
  padding-block: var(--lds-space-1);
  border-top: 2px solid var(--color-accent);
  text-align: center;
  color: var(--color-accent);
  font-weight: var(--font-weight-bold);
}

.input-state-card {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.input-state-card h4 {
  color: var(--color-text-primary);
}

.input-state-card.error .input-container {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.input-state-card.success .input-container {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.input-state-card.disabled,
.input-state-card.readonly {
  opacity: .78;
}

.behavior-list > div {
  grid-template-columns: minmax(140px, .35fr) minmax(0, 1fr);
}

.modal-spec-page,
.modal-legion-section,
.modal-anatomy-board,
.modal-layout-grid,
.modal-variant-grid,
.modal-state-grid,
.modal-behavior-grid,
.modal-mobile-section {
  min-width: 0;
}

.modal-anatomy-board {
  display: grid;
  gap: var(--lds-space-4);
}

.modal-anatomy-board.source-shaped {
  align-items: stretch;
  scroll-margin-top: 84px;
}

.modal-spec-tabs {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-2);
  padding: var(--lds-space-2) 0;
  border-bottom: 1px solid var(--color-border-subtle);
  background: color-mix(in srgb, var(--color-bg-panel) 94%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.modal-spec-tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-secondary);
  background: var(--color-bg-surface);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-decoration: none;
}

.modal-spec-tabs a:hover,
.modal-spec-tabs a:focus-visible {
  border-color: var(--color-accent);
  color: var(--color-text-primary);
  outline: none;
}

.modal-source-svg-frame {
  min-width: 0;
  padding: var(--lds-space-4);
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.modal-source-svg {
  display: block;
  width: 100%;
  height: auto;
}

.modal-svg-stage {
  fill: #fff;
}

.modal-svg-scrim {
  fill: #a3a3a3;
}

.modal-svg-dialog {
  fill: #fff;
  stroke: #16283a;
  stroke-width: 1.4;
}

.modal-svg-title-outline {
  fill: none;
  stroke: #0070c9;
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

.modal-svg-eyebrow {
  fill: #557392;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 2px;
}

.modal-svg-title {
  fill: #000;
  font-size: 32px;
  font-weight: 800;
}

.modal-svg-subtitle,
.modal-svg-body {
  fill: #000;
  font-size: 21px;
  line-height: 1.35;
}

.modal-svg-body.strong {
  font-weight: 800;
}

.modal-svg-close-ring {
  fill: #fff;
  stroke: #0070c9;
  stroke-width: 1.2;
  stroke-dasharray: 3 3;
}

.modal-svg-close-x {
  stroke: #16283a;
  stroke-width: 2;
  stroke-linecap: round;
}

.modal-svg-divider {
  stroke: #d9e1e8;
  stroke-width: 1;
}

.modal-svg-scroll-track {
  fill: #8d8d8d;
}

.modal-svg-secondary,
.modal-svg-primary {
  stroke-width: 1.4;
}

.modal-svg-secondary {
  fill: #000;
  stroke: #000;
}

.modal-svg-primary {
  fill: #fff;
  stroke: #000;
}

.modal-svg-secondary-text,
.modal-svg-primary-text {
  font-size: 18px;
  font-weight: 800;
}

.modal-svg-secondary-text {
  fill: #fff;
}

.modal-svg-primary-text {
  fill: #000;
}

.modal-svg-callout path {
  fill: none;
  stroke: #0070c9;
  stroke-width: 1.2;
}

.modal-svg-endpoint {
  fill: #0070c9;
}

.modal-svg-number {
  fill: #0070c9;
}

.modal-svg-callout text {
  fill: #fff;
  font-size: 12px;
  font-weight: 800;
  pointer-events: none;
}

.modal-spec-canvas {
  position: relative;
  min-height: 968px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(180deg, var(--color-bg-surface), color-mix(in srgb, var(--color-bg-panel) 82%, var(--color-bg-surface)));
}

.modal-spec-scrim {
  position: absolute;
  left: 32px;
  right: 32px;
  top: 32px;
  height: 468px;
  border-radius: 10px;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 255, 255, .22), transparent 32%),
    linear-gradient(135deg, #c9ced2, #e1e4e6 54%, #c5c9cc);
}

.modal-spec-dialog {
  position: absolute;
  left: 64px;
  top: 64px;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(426px, calc(100% - 128px));
  height: 404px;
  overflow: hidden;
  border: 1px solid #17324d;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(12, 31, 49, .16);
}

.modal-spec-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 16px 14px;
  border-bottom: 1px solid #dbe3ea;
}

.modal-spec-title-group {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.modal-spec-eyebrow {
  color: #557392;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.modal-spec-title-group h3 {
  margin: 0;
  color: #16283a;
  font-size: 22px;
  line-height: 1.05;
}

.modal-spec-title-group p,
.modal-spec-body p {
  margin: 0;
  color: #344a61;
  font-size: 15px;
  line-height: 1.42;
}

.modal-spec-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid #d7e2ea;
  border-radius: 999px;
  color: #16283a;
  background: #fff;
  box-shadow: 0 2px 8px rgba(12, 31, 49, .1);
  font-size: 24px;
  line-height: 1;
}

.modal-spec-body {
  position: relative;
  display: grid;
  gap: 14px;
  align-content: start;
  min-height: 0;
  padding: 18px 18px 20px 16px;
  overflow: hidden;
}

.modal-spec-scrollbar {
  position: absolute;
  right: 5px;
  top: 6px;
  width: 8px;
  height: 78%;
  border-radius: 999px;
  background: linear-gradient(180deg, #bcc4cb 0 56%, transparent 56%);
}

.modal-spec-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px;
  border-top: 1px solid #dbe3ea;
}

.modal-spec-secondary,
.modal-spec-primary {
  min-width: 98px;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  font-weight: 800;
}

.modal-spec-secondary {
  border: 1px solid #17324d;
  color: #16283a;
  background: #fff;
}

.modal-spec-primary {
  border: 1px solid var(--color-accent);
  color: var(--color-accent-text);
  background: var(--color-accent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
}

.modal-spec-callout {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--component-icon-text-gap);
  min-height: 28px;
  max-width: 190px;
  padding: 3px 10px 3px 4px;
  border: 1px solid #d7e2ea;
  border-radius: 999px;
  color: #385979;
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 2px 8px rgba(12, 31, 49, .1);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
  pointer-events: none;
}

.modal-spec-callout b {
  display: inline-grid;
  place-items: center;
  width: 19px;
  height: 19px;
  border-radius: 999px;
  color: #fff;
  background: var(--color-accent);
  font-size: 12px;
}

.modal-spec-callout-1 { left: 16px; top: 80px; }
.modal-spec-callout-2 { left: 42px; top: 486px; }
.modal-spec-callout-3 { left: 132px; top: 128px; }
.modal-spec-callout-4 { left: 176px; top: 24px; }
.modal-spec-callout-5 { left: 260px; top: 80px; }
.modal-spec-callout-6 { right: 28px; top: 152px; }
.modal-spec-callout-7 { left: 106px; bottom: 284px; }
.modal-spec-callout-8 { right: 18px; bottom: 370px; }
.modal-spec-callout-9 { right: 100px; bottom: 78px; }
.modal-spec-callout-10 { left: 132px; bottom: 8px; }
.modal-spec-callout-11 { right: 28px; bottom: 8px; }
.modal-spec-callout-12 { right: 18px; top: 62px; }

.modal-anatomy-stage {
  position: relative;
  min-width: 0;
  padding: clamp(var(--lds-space-4), 4vw, var(--lds-space-6));
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background:
    radial-gradient(circle at 18% 16%, color-mix(in srgb, var(--color-info-bg) 60%, transparent), transparent 34%),
    var(--color-bg-panel);
}

.legion-modal-demo {
  min-width: 0;
}

.legion-modal-scrim {
  display: grid;
  place-items: center;
  min-height: 360px;
  padding: clamp(var(--lds-space-4), 4vw, var(--lds-space-6));
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--color-text-primary) 20%, transparent), color-mix(in srgb, var(--color-text-primary) 10%, transparent)),
    var(--color-bg-panel);
}

.legion-modal-window {
  display: grid;
  width: min(100%, 592px);
  max-height: min(620px, 90vh);
  overflow: hidden;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
  box-shadow: var(--lds-shadow-2);
}

.legion-modal-header,
.legion-modal-footer {
  display: flex;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
}

.legion-modal-header {
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
  min-width: 0;
}

.legion-modal-footer {
  align-items: center;
  justify-content: flex-end;
  border-top: 1px solid var(--color-border-subtle);
}

.legion-modal-title-group {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
  flex: 1 1 auto;
}

.legion-modal-eyebrow {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.legion-modal-title-group h3,
.legion-mobile-modal h3 {
  margin: 0;
  font-size: var(--font-size-xl);
  line-height: var(--lds-line-tight);
}

.legion-modal-title-group p,
.legion-modal-body p,
.legion-mobile-modal p,
.modal-rule-list p {
  margin: 0;
  color: var(--color-text-secondary);
}

.legion-modal-close {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-primary);
  background: var(--color-bg-surface);
  box-shadow: var(--lds-shadow-1);
  font-size: 20px;
  line-height: 1;
}

.legion-modal-body {
  display: grid;
  gap: var(--lds-space-3);
  min-height: 0;
  padding: var(--lds-space-4);
}

.legion-modal-body.scrollable {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

.modal-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--lds-space-1);
  max-width: 190px;
  padding: 5px 8px;
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-pill);
  color: var(--color-info-text);
  background: color-mix(in srgb, var(--color-bg-surface) 92%, var(--color-info-bg));
  box-shadow: var(--lds-shadow-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  pointer-events: none;
}

.modal-callout b {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: var(--lds-radius-pill);
  color: var(--color-bg-surface);
  background: var(--color-accent);
  font-size: 11px;
}

.modal-callout-1 { left: 3%; top: 8%; }
.modal-callout-2 { left: 8%; top: 50%; }
.modal-callout-3 { left: 23%; top: 13%; }
.modal-callout-4 { left: 32%; top: 2%; }
.modal-callout-5 { left: 46%; top: 8%; }
.modal-callout-6 { right: 13%; top: 22%; }
.modal-callout-7 { left: 18%; bottom: 29%; }
.modal-callout-8 { right: 3%; bottom: 38%; }
.modal-callout-9 { right: 18%; bottom: 8%; }
.modal-callout-10 { left: 24%; bottom: 1%; }
.modal-callout-11 { right: 5%; bottom: 1%; }
.modal-callout-12 { right: 3%; top: 6%; }

.modal-anatomy-key,
.modal-rule-list {
  display: grid;
  gap: var(--lds-space-2);
}

.modal-anatomy-key {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.modal-anatomy-key p {
  display: grid;
  gap: 2px;
  margin: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.modal-anatomy-key span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.modal-variant-grid,
.modal-layout-grid,
.modal-state-grid,
.modal-behavior-grid {
  display: grid;
  gap: var(--lds-space-4);
}

.modal-variant-grid > article,
.modal-layout-panel,
.modal-state-grid > article,
.modal-behavior-card {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
}

.modal-variant-grid h3,
.modal-layout-panel h3,
.modal-state-grid h3,
.modal-behavior-card h3 {
  margin: 0;
}

.modal-variant-grid .legion-modal-scrim,
.modal-state-grid .legion-modal-scrim {
  min-height: 300px;
  padding: var(--lds-space-3);
}

.modal-variant-grid .legion-modal-window,
.modal-state-grid .legion-modal-window {
  width: min(100%, 430px);
}

.modal-variant-grid .legion-modal-body,
.modal-state-grid .legion-modal-body {
  padding: var(--lds-space-3);
}

.modal-rule-list {
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.modal-spacing-diagram {
  display: grid;
  gap: var(--lds-space-2);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}

.modal-spacing-diagram span {
  padding: var(--lds-space-3);
  border: 1px dashed var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  color: var(--color-text-secondary);
  background: var(--color-bg-panel);
}

.modal-spacing-diagram .close-placement {
  justify-self: end;
  border-style: solid;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.legion-mobile-frame {
  max-width: 390px;
  min-width: 0;
  margin-inline: auto;
  padding: var(--lds-space-2);
  border: 1px solid var(--color-border-strong);
  border-radius: 28px;
  background: var(--color-bg-surface);
  box-shadow: var(--lds-shadow-1);
}

.legion-mobile-modal {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  min-height: 620px;
  overflow: hidden;
  border: 1px solid var(--color-border-subtle);
  border-radius: 22px;
  background: var(--color-bg-surface);
}

.legion-mobile-modal header,
.legion-mobile-modal footer {
  display: flex;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
}

.legion-mobile-modal header {
  align-items: flex-start;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border-subtle);
}

.legion-mobile-modal header span {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
}

.legion-mobile-body {
  display: grid;
  align-content: start;
  gap: var(--lds-space-3);
  min-height: 0;
  overflow-y: auto;
  padding: var(--lds-space-4);
}

.legion-mobile-modal footer {
  align-items: center;
  justify-content: stretch;
  border-top: 1px solid var(--color-border-subtle);
}

.legion-mobile-modal footer .spec-button {
  flex: 1 1 0;
}

.modal-mobile-section {
  display: grid;
  gap: var(--lds-space-4);
  align-items: start;
}

@media (max-width: 719px) {
  .nav-tree {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow-x: visible;
  }

  .nav-group {
    min-width: 0;
    padding-left: 0;
    border-left: 0;
  }

  .nav-group + .nav-group {
    padding-top: var(--lds-space-3);
    border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 86%, transparent);
  }

  .nav-group a {
    white-space: normal;
  }

  .behavior-list > div {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-anatomy-stage .legion-modal-scrim,
  .modal-variant-grid .legion-modal-scrim,
  .modal-state-grid .legion-modal-scrim {
    padding: var(--lds-space-2);
  }

  .legion-modal-window > * {
    min-width: 0;
  }

  .modal-anatomy-stage .legion-modal-eyebrow,
  .modal-anatomy-stage .legion-modal-title-group p {
    display: none;
  }

  .legion-modal-header,
  .legion-modal-footer {
    padding: var(--lds-space-3);
  }

  .modal-spec-canvas {
    min-height: 820px;
  }

  .modal-spec-scrim {
    left: 10px;
    right: 10px;
    top: 36px;
    height: 405px;
  }

  .modal-spec-dialog {
    left: 18px;
    top: 78px;
    width: calc(100% - 36px);
    height: 356px;
  }

  .modal-spec-header {
    padding: 18px 12px 12px;
  }

  .modal-spec-title-group h3 {
    font-size: 18px;
  }

  .modal-spec-title-group p,
  .modal-spec-body p {
    font-size: 13px;
  }

  .modal-spec-body {
    gap: 10px;
    padding: 14px 16px 14px 12px;
  }

  .modal-spec-footer {
    padding: 12px;
  }

  .modal-spec-secondary,
  .modal-spec-primary {
    min-width: 0;
    flex: 1 1 0;
    padding-inline: 12px;
  }

  .modal-spec-callout {
    max-width: 150px;
    font-size: 10px;
  }

  .modal-spec-callout-1 { left: 8px; top: 86px; }
  .modal-spec-callout-2 { left: 28px; top: 430px; }
  .modal-spec-callout-3 { left: 72px; top: 142px; }
  .modal-spec-callout-4 { left: 120px; top: 20px; }
  .modal-spec-callout-5 { left: 180px; top: 86px; }
  .modal-spec-callout-6 { right: 8px; top: 168px; }
  .modal-spec-callout-7 { left: 70px; bottom: 230px; }
  .modal-spec-callout-8 { right: 8px; bottom: 320px; }
  .modal-spec-callout-9 { right: 62px; bottom: 72px; }
  .modal-spec-callout-10 { left: 48px; bottom: 10px; }
  .modal-spec-callout-11 { right: 8px; bottom: 10px; }
  .modal-spec-callout-12 { right: 8px; top: 56px; }

  .modal-source-svg-frame {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .modal-source-svg {
    width: 760px;
    max-width: none;
  }
}

@media (min-width: 720px) {
  .page-host {
    padding: var(--lds-page-gutter-tablet);
  }

  .page {
    --lds-content-rail-gutter: var(--lds-page-gutter-tablet);
  }

  .overview-grid,
  .system-room,
  .content-grid,
  .foundation-page-grid,
  .component-layout,
  .ratification-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wide,
  .hero-card,
  .system-room-hero {
    grid-column: span 2;
  }

  .component-ruling-grid {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  }

  .visual-anatomy,
  .grid-visual,
  .rail-demo:not(.compact) {
    grid-template-columns: 180px minmax(0, 1fr) 240px;
  }

  .token-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .decision-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .button-anatomy-stage {
    grid-template-columns: minmax(360px, 1fr) minmax(300px, .8fr);
    align-items: center;
  }

  .matrix-row {
    grid-template-columns: 120px repeat(4, minmax(0, 1fr));
  }

  .split-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .responsive-proof {
    grid-template-columns: minmax(0, 1fr) 390px;
  }

  .evidence-table > div {
    grid-template-columns: 180px minmax(0, 1fr);
  }

  .pdf-anatomy-stage {
    grid-template-columns: minmax(360px, 1fr) minmax(240px, .62fr);
    align-items: center;
  }

  .configuration-grid,
  .button-surface-grid,
  .layout-spec-grid,
  .button-size-grid,
  .behaviors-grid,
  .dynamic-type-grid,
  .usage-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .input-source-preface,
  .input-anatomy-board,
  .security-tooltip-grid,
  .spacing-demo-grid,
  .input-overflow-grid,
  .input-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .input-config-grid,
  .card-icon-grid,
  .input-state-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .input-prop-table > div {
    grid-template-columns: minmax(140px, .7fr) minmax(120px, .6fr) minmax(160px, .8fr) minmax(0, 1fr);
  }

  .modal-anatomy-board,
  .modal-layout-grid,
  .modal-state-grid,
  .modal-behavior-grid,
  .modal-mobile-section {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-anatomy-board.source-shaped {
    grid-template-columns: minmax(0, 1fr);
  }

  .modal-variant-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .modal-variant-grid .mobile-variant-card {
    grid-column: 1 / -1;
  }
}

@media (min-width: 1040px) {
  .page-host {
    padding: var(--lds-page-gutter-desktop);
  }

  .page {
    --lds-content-rail-gutter: var(--lds-page-gutter-desktop);
  }

  .app-shell {
    grid-template-columns: 300px minmax(0, 1fr);
  }

  .app-nav {
    border-right: 1px solid var(--color-border-subtle);
    border-bottom: 0;
    align-content: start;
  }

  .nav-tree {
    display: grid;
    overflow: visible;
    gap: var(--lds-space-5);
  }

  .nav-group {
    min-width: 0;
    padding-left: 0;
    border-left: 0;
  }

  .nav-group + .nav-group {
    padding-top: var(--lds-space-5);
    border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 86%, transparent);
  }

  .page-header h1 {
    font-size: var(--lds-display-lg);
  }

  .component-layout {
    grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  }
}

@media (min-width: 1280px) {
  .page-host {
    padding: var(--lds-page-gutter-wide);
  }

  .page {
    --lds-content-rail-gutter: var(--lds-page-gutter-wide);
  }
}

/* ============================================================================
 * Input Field — complex-component page model (DESIGN-LANGUAGE-15/07)
 * Sticky on-page section nav, tabbed state explorers, behavior accordion.
 * ==========================================================================*/

.component-section-nav,
.input-onpage-nav {
  position: sticky;
  top: calc(72px + var(--lds-space-3));
  z-index: 40;
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  margin: 0;
  padding: 0 var(--lds-section-padding-x);
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--color-border-subtle);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .46)),
    rgba(255, 255, 255, .66);
  box-shadow: 0 12px 34px rgba(16, 28, 56, .08);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}

.onpage-link {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 var(--lds-space-4);
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  color: var(--color-text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
  cursor: pointer;
}

.onpage-link:first-child,
.onpage-link.is-active {
  color: var(--lds-tabs-active-color);
  border-bottom-color: var(--lds-tabs-active-color);
}

.onpage-link:hover {
  color: var(--lds-tabs-hover-color);
  border-bottom-color: var(--lds-tabs-hover-color);
  background: color-mix(in srgb, var(--lds-tabs-selected-bg) 44%, transparent);
}

.onpage-link:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: -5px;
}

/* Larger scroll offset so anchored sections clear the sticky on-page nav. */
.input-source-section,
.source-evidence-section {
  scroll-margin-top: 120px;
}

/* Tabbed / segmented explorers (states, credit-card states) */
.ds-explorer {
  display: grid;
  gap: var(--lds-space-4);
  min-width: 0;
}

.ds-tabbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  width: fit-content;
  max-width: 100%;
  padding: 4px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  background: var(--color-bg-panel);
}

.ds-subtabbar {
  border-radius: var(--lds-radius-md);
}

.ds-tab {
  flex: 0 0 auto;
  padding: 8px var(--lds-space-4);
  border: 1px solid transparent;
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
}

.ds-subtabbar .ds-tab {
  border-radius: var(--lds-radius-sm);
}

.ds-tab:hover {
  color: var(--color-link-hover);
  background: color-mix(in srgb, var(--color-selected-bg) 44%, transparent);
}

.ds-tab.active {
  border-color: color-mix(in srgb, var(--color-selected-border, #00A8D8) 42%, var(--color-selected-bg, #E0F8FC));
  color: var(--color-selected-text, #006D84);
  background: var(--color-selected-bg, #E0F8FC);
}

.ds-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-focus-ring);
}

.ds-panel {
  display: none;
  min-width: 0;
}

.ds-panel.active {
  display: block;
}

/* Behaviors accordion */
.input-behavior-accordion {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
}

.behavior-module {
  min-width: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
  overflow: hidden;
}

.behavior-module > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
  padding: var(--lds-space-3) var(--lds-space-4);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  cursor: pointer;
  list-style: none;
}

.behavior-module > summary::-webkit-details-marker {
  display: none;
}

.behavior-module > summary::after {
  content: '+';
  color: var(--color-text-muted);
  font-weight: var(--font-weight-bold);
}

.behavior-module[open] > summary::after {
  content: '\2013';
}

.behavior-module[open] > summary {
  border-bottom: 1px solid var(--color-border-subtle);
}

.behavior-module .behavior-list {
  padding: var(--lds-space-4);
}

@media (max-width: 1039px) {
  .component-section-nav,
  .input-onpage-nav {
    top: var(--lds-space-3);
    padding-inline: var(--lds-section-padding-x);
  }

  .ds-tabbar {
    width: 100%;
  }
}

/* ============================================================================
 * Input Field — Legion-normalized spec (DESIGN-LANGUAGE-16/07)
 * Overlay anatomy callouts, visible state modifiers, mobile + specialized.
 * ==========================================================================*/

.if-section { scroll-margin-top: 120px; min-width: 0; }

/* ---- Anatomy: callouts overlay parts without entering the layout ------- */
.input-source-page .anat-board {
  display: grid;
  gap: var(--lds-space-6);
  padding: var(--lds-card-inner-padding);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(255,255,255,.36)),
    var(--color-bg-panel);
}

/* Left side: a single calm column of annotated field examples. */
.anat-fields {
  display: grid;
  gap: var(--lds-space-7);
  min-width: 0;
}

.anat-field2 { display: grid; gap: var(--lds-space-2); min-width: 0; }

/* Each part is a row: [left rail] [part] [right rail]. */
.anat-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 46px;
  align-items: center;
  min-width: 0;
}

.anat-rail {
  display: flex;
  align-items: center;
  height: 100%;
  min-width: 0;
}
.anat-rail.left { justify-content: flex-end; }
.anat-rail.right { justify-content: flex-start; }

/* Numbered badge — shared by rails and the spec panel. */
.anat-cn {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--lds-radius-pill);
  border: 1.5px solid var(--color-link);
  background: var(--color-link);
  color: #fff;
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  box-shadow: var(--lds-shadow-1);
}

/* Leader line connecting the badge to the exact part. */
.anat-leader {
  position: relative;
  flex: 0 0 18px;
  height: 5px;
  background: transparent;
}

.anat-rail.left .anat-leader::before,
.anat-rail.right .anat-leader::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 1px;
  background: var(--color-link);
  opacity: .7;
  transform: translateY(-50%);
}

.anat-rail.left .anat-leader::before {
  left: 0;
  right: 10px;
}

.anat-rail.right .anat-leader::after {
  left: 10px;
  right: 0;
}

.anat-rail.left .anat-leader::after,
.anat-rail.right .anat-leader::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-accent);
  transform: translateY(-50%);
}

.anat-rail.left .anat-leader::after {
  right: 5px;
}

.anat-rail.right .anat-leader::before {
  left: 5px;
}

.anat-cell {
  min-width: 0;
  padding-inline: 6px;
}

.af-label {
  display: inline-flex;
  align-items: center;
  gap: var(--component-icon-text-gap);
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-md);
}
.af-opt { color: var(--color-text-helper, #5B7A95); font-weight: var(--font-weight-regular); }
.af-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--color-link);
  border-radius: var(--lds-radius-pill);
  color: var(--color-link);
  font-size: 10px;
  font-style: italic;
}

.af-helper { margin: 0; color: var(--color-text-helper, #5B7A95); font-size: var(--font-size-sm); }
.af-valid { margin: 0; font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }
.af-valid.error { color: var(--color-danger-text); }
.af-valid.success { color: var(--color-success-text); }

.af-box {
  display: flex;
  align-items: center;
  gap: var(--lds-space-2);
  min-height: 52px;
  padding: 0 var(--lds-space-4);
  border: 1px solid var(--input-border);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}
.af-box.error { border-color: var(--color-danger-border); background: var(--color-danger-bg); }
.af-box.success { border-color: var(--color-success-border); background: var(--color-success-bg); }

.af-value { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.af-value.typeover { color: var(--color-text-placeholder, #5B7A95); }
.af-value.masked { letter-spacing: 2px; }

.af-card {
  flex: 0 0 auto;
  width: 30px;
  height: 20px;
  border: 1px solid var(--color-text-muted);
  border-radius: 4px;
  background:
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) left 3px top 5px / 14px 2px no-repeat,
    linear-gradient(var(--color-text-muted), var(--color-text-muted)) left 3px top 11px / 9px 2px no-repeat;
  opacity: .6;
}

.af-icon { flex: 0 0 auto; display: grid; place-items: center; width: 22px; height: 22px; font-size: 13px; font-weight: var(--font-weight-bold); }
.af-icon.error { color: var(--color-danger-text); }
.af-icon.success { color: var(--color-success-text); }

.af-action {
  flex: 0 0 auto;
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

/* Right side: Legion-normalized per-part specification. */
.anat-spec { display: grid; gap: var(--lds-space-3); align-content: start; }
.anat-spec > h3 { margin: 0 0 var(--lds-space-1); }
.anat-spec-item {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--lds-space-3);
  padding-bottom: var(--lds-space-3);
  border-bottom: 1px solid var(--color-border-subtle);
}
.anat-cn.static { box-shadow: none; }
.anat-spec-body { min-width: 0; display: grid; gap: 4px; }
.anat-spec-body > strong { font-size: var(--font-size-base); color: var(--color-text-primary); }
.anat-spec-body dl { margin: 0; display: grid; gap: 2px; }
.anat-spec-body dl > div { display: grid; grid-template-columns: minmax(80px, .5fr) minmax(0, 1fr); gap: var(--lds-space-2); }
.anat-spec-body dt { margin: 0; color: var(--color-text-muted); font-size: var(--font-size-sm); }
.anat-spec-body dd { margin: 0; color: var(--color-text-secondary); font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); }

/* ---- Field state modifiers (visibly distinct) ------------------------- */
.input-value.masked { letter-spacing: 2px; }
.input-source-field.transparent .input-container { background: transparent; }
.input-source-field.is-focus .input-container { border-color: var(--color-accent); }
.input-source-field.is-kfocus .input-container {
  border-color: var(--input-focus);
  box-shadow: 0 0 0 3px var(--input-focus-ring);
}
/* Focus ring follows the validation tone (no green ring on an error field). */
.input-source-field.tone-error.is-focus .input-container { border-color: var(--color-danger-border); }
.input-source-field.tone-error.is-kfocus .input-container {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-danger) 40%, transparent);
}
.input-source-field.tone-success.is-focus .input-container { border-color: var(--color-success-border); }
.input-source-field.tone-success.is-kfocus .input-container {
  border-color: var(--color-success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 45%, transparent);
}
.input-source-field.is-disabled { opacity: .55; }
.input-source-field.is-disabled .input-container { background: var(--color-info-bg); }
.input-source-field.is-readonly .input-container {
  border-style: dashed;
  background: transparent;
  color: var(--color-text-secondary);
}

/* ---- Variants: filled vs transparent on a tinted surface -------------- */
.tinted-surface {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-info-border);
  border-radius: var(--lds-radius-md);
  background: var(--color-info-bg);
}
.tinted-surface > div { display: grid; gap: var(--lds-space-2); min-width: 0; }

.tinted-surface p {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.tinted-surface .input-helper {
  color: var(--color-text-helper-on-tinted, #54708A);
}

.tinted-surface .input-value.typeover {
  color: var(--color-text-placeholder-on-tinted, #54708A);
}

.field-tag {
  width: fit-content;
  color: var(--color-text-instructional, #5B7A95);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-label);
  text-transform: uppercase;
}

/* ---- Layout / overflow ------------------------------------------------ */
.if-overflow-demo { display: grid; gap: var(--lds-space-3); }
.if-overflow-demo > div { display: grid; gap: var(--lds-space-2); }
.if-overflow-demo .input-source-field { max-width: 280px; }

/* ---- States explorer panels ------------------------------------------- */
.if-state-panel {
  display: grid;
  gap: var(--lds-space-3);
  max-width: 420px;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-surface);
}
.if-state-note { margin: 0; color: var(--color-text-instructional, #5B7A95); font-size: var(--font-size-sm); }

/* ---- Specialized ------------------------------------------------------ */
.if-cardtype-list { display: flex; flex-wrap: wrap; gap: var(--lds-space-2); margin: 0; padding: 0; list-style: none; }
.if-cardtype-list li {
  padding: 5px var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-pill);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.if-note { margin: 0; color: var(--color-text-instructional, #5B7A95); font-size: var(--font-size-sm); font-style: italic; }

.security-help-demo { display: grid; gap: var(--lds-space-3); align-items: start; }
.security-popover {
  display: grid;
  gap: 4px;
  max-width: 320px;
  padding: var(--lds-space-3) var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--lds-tooltip-bg);
  color: var(--lds-tooltip-text);
  box-shadow: var(--lds-shadow-2);
}
.security-popover p { margin: 0; color: inherit; opacity: .92; font-size: var(--font-size-sm); }

/* ---- Mobile ----------------------------------------------------------- */
.if-mobile { display: grid; gap: var(--lds-space-4); align-items: start; }
.if-mobile-frame {
  display: grid;
  gap: var(--lds-space-4);
  width: 240px;
  max-width: 100%;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-lg);
  background: var(--color-bg-panel);
  box-shadow: var(--lds-shadow-2);
}

/* ---- Implementation notes (quiet) ------------------------------------- */
.if-impl { border: 0; padding: 0; }
.impl-notes { display: grid; gap: var(--lds-space-3); }

@media (min-width: 760px) {
  .anat-board { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); align-items: start; }
  .tinted-surface { grid-template-columns: 1fr 1fr; }
  .security-help-demo { grid-template-columns: minmax(0, 1fr) auto; }
  .if-mobile { grid-template-columns: auto minmax(0, 1fr); }
}

/* ---- Overflow board (annotated, matches anatomy technique) ------------- */
.overflow-board .anat-fields { gap: var(--lds-space-5); }
.overflow-field { max-width: 320px; }
.overflow-notes { align-content: start; }
.overflow-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--lds-space-3); }
.overflow-list li {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--lds-space-3);
  align-items: start;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

/* ---- Validation: clean 2x2 comparison grid ---------------------------- */
.validation-grid { display: grid; gap: var(--lds-space-3); min-width: 0; }
.validation-grid .input-state-card { align-content: start; }
@media (min-width: 760px) {
  .validation-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ============================================================================
 * Iconography Foundation route (DESIGN-LANGUAGE-29A/07)
 * Ported verbatim from site/iconography/foundation-iconography.module.css.
 * Every rule is scoped under `.foundation-iconography`. No :root, no global
 * body, no resets, no `*`, no token/proposal imports, no retired accent. Local
 * variables are namespaced `--fi-*`; `.fi-dark` is a local preview only.
 * ==========================================================================*/
.foundation-iconography {
  --fi-bg-app: #F1F2F6;
  --fi-surface: #FFFFFF;
  --fi-inset: #EEF0F5;
  --fi-text: #15161B;
  --fi-text-secondary: #5C616B;
  --fi-text-muted: #6B7079;
  --fi-disabled: #C4C8CE;
  --fi-border-subtle: #E7EAEE;
  --fi-border: #D3D7DD;
  --fi-border-strong: #9AA0A8;

  --fi-accent: var(--lds-light-system-indigo);
  --fi-link: var(--lds-light-system-indigo);
  --fi-focus: var(--lds-light-focus-border);
  --fi-selected-bg: var(--color-selected-bg);
  --fi-selected-text: var(--color-selected-text);

  --fi-success: var(--color-success); --fi-success-text: var(--color-success-text); --fi-success-bg: var(--color-success-bg); --fi-success-border: var(--color-success-border);
  --fi-warning: var(--color-warning); --fi-warning-text: var(--color-warning-text); --fi-warning-bg: var(--color-warning-bg); --fi-warning-border: var(--color-warning-border);
  --fi-danger: var(--color-danger); --fi-danger-text: var(--color-danger-text); --fi-danger-bg: var(--color-danger-bg); --fi-danger-border: var(--color-danger-border);
  --fi-info: var(--color-info); --fi-info-text: var(--color-info-text); --fi-info-bg: var(--color-info-bg); --fi-info-border: var(--color-info-border);

  --fi-space-1: 4px; --fi-space-2: 8px; --fi-space-3: 12px; --fi-space-4: 16px;
  --fi-space-5: 24px; --fi-space-6: 32px; --fi-space-7: 48px;

  --fi-icon-box: 20px;
  --fi-icon-color: var(--fi-text);

  --fi-guide: #B7BDC6;
  --fi-hit: 44px;
  --fi-radius: 8px;
  --fi-radius-sm: 4px;

  color: var(--fi-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

body[data-lds-shell="shared"] .foundation-iconography {
  --fi-surface: var(--color-bg-surface);
  --fi-inset: color-mix(in srgb, var(--color-bg-surface) 76%, var(--color-text-primary) 6%);
  --fi-text: var(--color-text-primary);
  --fi-text-secondary: var(--color-text-secondary);
  --fi-text-muted: var(--color-text-muted);
  --fi-border-subtle: color-mix(in srgb, var(--color-border-subtle) 82%, transparent);
  --fi-border: var(--color-border-subtle);
  --fi-accent: var(--color-accent);
  --fi-link: var(--color-accent);
}

body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-iconography .fi-dashboard-primary {
  color: #f5f8ff;
  background:
    radial-gradient(ellipse 86% 70% at 92% -8%, rgba(42, 177, 207, .20), transparent 66%),
    radial-gradient(ellipse 78% 62% at -8% 110%, rgba(157, 58, 139, .19), transparent 68%),
    linear-gradient(142deg, #20263a 0%, #131a28 52%, #10282e 100%);
  border-right-color: rgba(190, 213, 255, .15);
}

body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-iconography .fi-dashboard-primary::before {
  background: radial-gradient(circle at 35% 35%, rgba(218, 231, 255, .20), rgba(49, 166, 194, .13) 42%, rgba(160, 72, 190, .12) 68%, transparent 72%);
}

body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-iconography .fi-dashboard-primary :is(.fi-dashboard-label, p) {
  color: #c3cede;
}

body[data-lds-shell="shared"][data-color-theme="dark"] .foundation-iconography .fi-dashboard-proof > span {
  color: #f4f8ff;
  border-color: rgba(188, 214, 255, .18);
  background: rgba(225, 236, 255, .055);
}

.foundation-iconography .fi-eyebrow { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fi-text-muted); margin-bottom: var(--fi-space-2); }
.foundation-iconography .fi-title { font-size: 30px; line-height: 1.15; margin: 0 0 var(--fi-space-3); }
.foundation-iconography .fi-summary { font-size: 17px; color: var(--fi-text-secondary); margin: 0; max-width: 62ch; }
.foundation-iconography .fi-hero-list { margin: var(--fi-space-3) 0 0; padding-left: 1.2em; color: var(--fi-text-secondary); font-size: 15px; line-height: 1.5; max-width: 68ch; }
.foundation-iconography .fi-hero-list li + li { margin-top: 2px; }
.foundation-iconography .fi-pill { display: inline-block; margin-top: var(--fi-space-4); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--fi-inset); color: var(--fi-text-secondary); border: 1px solid var(--fi-border-subtle); }

.foundation-iconography .fi-section { margin-top: var(--fi-space-7); }
.foundation-iconography .fi-section > h2 { font-size: 22px; margin: 0 0 var(--fi-space-2); display: flex; align-items: baseline; gap: var(--fi-space-2); }
.foundation-iconography .fi-section > h2 .fi-num { font-size: 13px; font-weight: 700; color: var(--fi-accent); background: var(--fi-selected-bg); border-radius: 6px; padding: 1px 7px; }
.foundation-iconography .fi-lead { color: var(--fi-text-secondary); margin: 0 0 var(--fi-space-4); max-width: 64ch; }

.foundation-iconography .fi-card { background: var(--fi-surface); border: 1px solid var(--fi-border-subtle); border-radius: var(--fi-radius); padding: var(--fi-space-5); margin-bottom: var(--fi-space-4); }
.foundation-iconography .fi-card h3 { margin: 0 0 var(--fi-space-3); font-size: 16px; }

.foundation-iconography .fi-anatomy-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(220px, .8fr); gap: var(--fi-space-5); align-items: center; }
.foundation-iconography .fi-anatomy-svg { display: block; width: 100%; max-width: 520px; height: auto; background: var(--fi-inset); border-radius: 6px; }
.foundation-iconography .fi-anatomy-list { display: grid; gap: var(--fi-space-3); }
.foundation-iconography .fi-anatomy-row { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: var(--component-icon-text-gap); align-items: start; }
.foundation-iconography .fi-anatomy-row strong { display: block; font-size: 14px; line-height: 20px; }
.foundation-iconography .fi-anatomy-row p { margin: 2px 0 0; color: var(--fi-text-secondary); font-size: 13px; }
.foundation-iconography .fi-explain-num { display: grid; place-items: center; width: 18px; height: 18px; margin-top: 1px; border: 1.5px solid var(--fi-accent); border-radius: 50%; background: #fff; color: var(--fi-accent); font-size: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; text-align: center; box-sizing: border-box; }

.foundation-iconography .fi-grid { display: grid; gap: var(--fi-space-4); }
.foundation-iconography .fi-grid.cols-2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.foundation-iconography .fi-grid.cols-3 { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.foundation-iconography .fi-grid.cols-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.foundation-iconography .fi-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--fi-space-3); margin-top: var(--fi-space-4); }
.foundation-iconography .fi-mini-spec { min-width: 0; display: grid; gap: 4px; padding: var(--fi-space-3); border: 1px solid var(--fi-border-subtle); border-radius: 6px; background: var(--fi-inset); }
.foundation-iconography .fi-mini-spec strong { font-size: 13px; }
.foundation-iconography .fi-mini-spec span { color: var(--fi-text-secondary); font-size: 13px; line-height: 1.35; }
.foundation-iconography .fi-section,
.foundation-iconography .fi-card,
.foundation-iconography .fi-grid,
.foundation-iconography .fi-role,
.foundation-iconography .fi-role-meta,
.foundation-iconography .fi-tile,
.foundation-iconography .fi-dark,
.foundation-iconography .fi-table-wrap { min-width: 0; max-width: 100%; box-sizing: border-box; }

.foundation-iconography .fi-note { font-size: 13px; color: var(--fi-text-muted); margin: var(--fi-space-2) 0 0; }
.foundation-iconography .fi-blocked { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: var(--fi-warning-text); background: var(--fi-warning-bg); border: 1px solid var(--fi-warning-border); border-radius: 4px; padding: 1px 6px; }

.foundation-iconography .fi-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--fi-icon-box); height: var(--fi-icon-box); flex: 0 0 auto; color: var(--fi-icon-color); }
.foundation-iconography .fi-icon svg { width: 100%; height: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foundation-iconography .fi-icon.solid svg { fill: currentColor; stroke: none; }
.foundation-iconography .size-16 { --fi-icon-box: 16px; }
.foundation-iconography .size-20 { --fi-icon-box: 20px; }
.foundation-iconography .size-24 { --fi-icon-box: 24px; }
.foundation-iconography .size-28 { --fi-icon-box: 28px; }
.foundation-iconography .size-32 { --fi-icon-box: 32px; }

.foundation-iconography .fi-status-circle { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; background: currentColor; }
.foundation-iconography .fi-status-circle .fi-icon { --fi-icon-box: 10px; color: #fff; }

.foundation-iconography .fi-hit-wrap { position: relative; display: inline-flex; }
.foundation-iconography .fi-hit-area { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--fi-hit); height: var(--fi-hit); border: 1px dashed var(--fi-accent); border-radius: 6px; pointer-events: none; }
.foundation-iconography .fi-hit-area::after { content: "44×44"; position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--fi-accent); white-space: nowrap; }

.foundation-iconography .fi-guide-svg { width: 100%; max-width: 420px; height: auto; background: var(--fi-inset); border-radius: 6px; }
.foundation-iconography .fi-guide-line { stroke: var(--fi-guide); stroke-width: 1; stroke-dasharray: 4 3; }
.foundation-iconography .fi-guide-label { font-size: 9px; fill: var(--fi-text-muted); font-family: ui-monospace, monospace; }
.foundation-iconography .fi-optical-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px); gap: var(--fi-space-4); align-items: stretch; }
.foundation-iconography .fi-optical-panel .fi-guide-svg { max-width: none; min-height: 180px; background: var(--fi-surface); border: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-guide-word { fill: var(--fi-text); font-size: 28px; font-weight: 800; letter-spacing: 0; }
.foundation-iconography .fi-guide-icon { fill: none; stroke: var(--fi-link); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foundation-iconography .fi-guide-measure { stroke: var(--fi-link); stroke-width: 1.25; stroke-dasharray: 3 3; }
.foundation-iconography .fi-guide-caption { fill: var(--fi-text-secondary); font-size: 10px; font-weight: 700; text-anchor: middle; }
.foundation-iconography .fi-optical-standalone { min-width: 0; display: grid; place-items: center; align-content: center; gap: var(--fi-space-3); padding: var(--fi-space-4); background: var(--fi-inset); border-radius: 6px; text-align: center; color: var(--fi-text-secondary); font-size: 13px; line-height: 1.4; }
.foundation-iconography .fi-optical-standalone .fi-icon { --fi-icon-box: 32px; color: var(--fi-text); }
.foundation-iconography .fi-optical-rules { margin-top: var(--fi-space-4); }
.foundation-iconography .fi-optical-rules .fi-tile { align-items: flex-start; text-align: left; }
.foundation-iconography .fi-optical-rules .fi-icon { --fi-icon-box: 24px; color: var(--fi-text); }

.foundation-iconography .fi-diagram-svg { width: 100%; max-width: 460px; height: auto; background: var(--fi-inset); border-radius: 6px; }
.foundation-iconography .fi-box-asset { fill: none; stroke: var(--fi-border-strong); stroke-width: 1; stroke-dasharray: 5 4; }
.foundation-iconography .fi-box-icon { fill: none; stroke: var(--fi-accent); stroke-width: 1.5; }
.foundation-iconography .fi-box-danger { fill: none; stroke: var(--fi-danger); stroke-width: 1.5; stroke-dasharray: 6 4; }
.foundation-iconography .fi-optical { stroke: var(--fi-danger); stroke-width: 1; }
.foundation-iconography .fi-callout-line { stroke: var(--fi-border-strong); stroke-width: 1; }
.foundation-iconography .fi-callout-dot { fill: var(--fi-accent); }
.foundation-iconography .fi-callout-end { fill: #fff; stroke: var(--fi-accent); stroke-width: 1.5; }
.foundation-iconography .fi-callout-num { fill: var(--fi-accent); }
.foundation-iconography .fi-callout-num-text { fill: #fff; font-size: 12px; font-weight: 700; text-anchor: middle; dominant-baseline: central; }
.foundation-iconography .fi-dim { stroke: var(--fi-text-muted); stroke-width: 1; }
.foundation-iconography .fi-dim-label { font-size: 10px; fill: var(--fi-text); font-family: ui-monospace, monospace; }
.foundation-iconography .fi-center-text { text-anchor: middle; }
.foundation-iconography .fi-danger-dim { stroke: var(--fi-danger); stroke-width: 1; }
.foundation-iconography .fi-danger-label { font-size: 10px; fill: var(--fi-danger-text); font-family: ui-monospace, monospace; }
.foundation-iconography .fi-glyph-danger { fill: var(--fi-text); font-size: 78px; font-weight: 800; text-anchor: middle; dominant-baseline: central; font-family: Arial, Helvetica, sans-serif; }
.foundation-iconography .fi-legend { display: flex; flex-wrap: wrap; gap: var(--fi-space-3); margin-top: var(--fi-space-3); font-size: 12px; color: var(--fi-text-secondary); }
.foundation-iconography .fi-legend span { display: inline-flex; align-items: center; gap: var(--component-icon-text-gap); }
.foundation-iconography .fi-swatch-line { width: 18px; height: 0; border-top: 2px solid; display: inline-block; }
.foundation-iconography .fi-vector-example { min-width: 0; display: grid; gap: var(--fi-space-3); align-content: start; }
.foundation-iconography .fi-vector-example h3 { margin: 0; font-size: 14px; line-height: 1.25; }
.foundation-iconography .fi-vector-rule-list { margin: 0; padding-left: 18px; color: var(--fi-text-secondary); font-size: 13px; line-height: 1.45; }
.foundation-iconography .fi-vector-rule-list li + li { margin-top: 4px; }

.foundation-iconography .fi-tile { display: flex; flex-direction: column; align-items: center; gap: var(--fi-space-2); padding: var(--fi-space-4); background: var(--fi-inset); border-radius: 6px; text-align: center; }
.foundation-iconography .fi-tile-label { font-size: 12px; color: var(--fi-text-secondary); }
.foundation-iconography .fi-tile-meta { font-size: 11px; color: var(--fi-text-muted); font-family: ui-monospace, monospace; }
.foundation-iconography .fi-usage-grid { align-items: stretch; }
.foundation-iconography .fi-usage-card { min-height: 148px; justify-content: flex-start; }
.foundation-iconography .fi-usage-visual { min-height: 52px; display: grid; place-items: center; color: inherit; }
.foundation-iconography .fi-usage-card strong { margin-top: var(--fi-space-1); }
.foundation-iconography .fi-usage-card.fi-dark { padding: var(--fi-space-4); color: var(--fi-text); }
.foundation-iconography .fi-usage-card.fi-dark .fi-icon,
.foundation-iconography .fi-usage-card.fi-dark .fi-usage-visual { color: var(--fi-text); }
.foundation-iconography .fi-forbidden { border: 1px solid var(--fi-danger-border); background: var(--fi-danger-bg); border-radius: 6px; padding: var(--fi-space-3); }
.foundation-iconography .fi-forbidden .fi-diagram-svg { background: rgba(255, 255, 255, .55); }
.foundation-iconography .fi-forbidden h3,
.foundation-iconography .fi-forbidden .fi-vector-rule-list,
.foundation-iconography .fi-forbidden .fi-tile-label,
.foundation-iconography .fi-forbidden .fi-tag { color: var(--fi-danger-text); }
.foundation-iconography .fi-tag { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.foundation-iconography .fi-tag.ok { color: var(--fi-success-text); }
.foundation-iconography .fi-glyph-stand-in { font-size: 40px; line-height: 1; font-weight: 700; color: var(--fi-text); }

.foundation-iconography .fi-role { display: flex; align-items: center; gap: var(--fi-space-3); padding: var(--fi-space-3); border: 1px solid var(--fi-border-subtle); border-radius: 6px; background: var(--fi-surface); }
.foundation-iconography .fi-role .fi-icon { --fi-icon-box: 24px; }
.foundation-iconography .fi-role-meta { display: flex; flex-direction: column; }
.foundation-iconography .fi-role-name { font-size: 13px; font-weight: 600; }
.foundation-iconography .fi-role-token { font-size: 11px; color: var(--fi-text-muted); font-family: ui-monospace, monospace; }

.foundation-iconography .fi-source-icon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--fi-space-4); }
.foundation-iconography .fi-source-icon-card { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-areas: "icon name" "icon symbol" "icon status"; column-gap: var(--fi-space-3); row-gap: 2px; align-items: center; min-width: 0; padding: var(--fi-space-3); border: 1px solid var(--fi-border-subtle); border-radius: 6px; background: var(--fi-surface); }
.foundation-iconography .fi-source-icon { grid-area: icon; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 6px; background: var(--fi-inset); color: var(--fi-text); }
.foundation-iconography .fi-source-icon svg { width: 26px; height: 26px; display: block; }
.foundation-iconography .fi-source-icon-card strong { grid-area: name; font-size: 13px; line-height: 1.25; }
.foundation-iconography .fi-source-icon-card code { grid-area: symbol; min-width: 0; color: var(--fi-text-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; overflow-wrap: anywhere; }
.foundation-iconography .fi-source-icon-card span:last-child { grid-area: status; color: var(--fi-info-text); font-size: 10px; font-weight: 700; overflow-wrap: anywhere; }

.foundation-iconography .fi-library-section { margin-top: clamp(56px, 7vw, 96px); }
.foundation-iconography .fi-library-heading { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--fi-space-3); align-items: start; margin-bottom: clamp(28px, 4vw, 48px); }
.foundation-iconography .fi-library-heading > .fi-num { display: inline-grid; place-items: center; width: 30px; min-height: 26px; margin-top: 5px; border-radius: 5px; background: var(--fi-selected-bg); color: var(--fi-selected-text); font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.foundation-iconography .fi-library-heading h2 { margin: 3px 0 10px; color: var(--fi-text); font-family: "Satoshi", var(--lds-font-family); font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; line-height: 1.06; letter-spacing: 0; }
.foundation-iconography .fi-library-heading .fi-lead { max-width: 66ch; margin: 0; font-size: clamp(16px, 1.45vw, 19px); line-height: 1.55; }
.foundation-iconography .fi-dashboard-label { color: var(--fi-text-muted); font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; font-weight: 700; letter-spacing: .12em; line-height: 1.3; text-transform: uppercase; }

.foundation-iconography .fi-library-dashboard { border-block: 1px solid var(--fi-border); }
.foundation-iconography .fi-dashboard-stage { display: grid; grid-template-columns: minmax(290px, .9fr) minmax(0, 1.55fr); min-height: 310px; }
.foundation-iconography .fi-dashboard-primary { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto; gap: var(--fi-space-5); min-width: 0; overflow: hidden; padding: clamp(28px, 4vw, 52px); color: #102033; background: linear-gradient(145deg, rgba(247, 249, 255, .96) 4%, rgba(224, 236, 251, .94) 42%, rgba(239, 223, 246, .90) 72%, rgba(218, 244, 241, .94) 100%); border-right: 1px solid rgba(96, 113, 142, .25); }
.foundation-iconography .fi-dashboard-primary::before { content: ""; position: absolute; z-index: -1; width: 62%; aspect-ratio: 1; top: -38%; right: -16%; border-radius: 48% 52% 43% 57% / 58% 42% 58% 42%; background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .92), rgba(112, 200, 225, .24) 42%, rgba(171, 106, 204, .18) 68%, transparent 72%); filter: blur(5px); }
.foundation-iconography .fi-dashboard-primary .fi-dashboard-label { color: #53657a; }
.foundation-iconography .fi-dashboard-primary-copy { align-self: center; }
.foundation-iconography .fi-dashboard-value { display: flex; align-items: baseline; gap: 10px; margin: 5px 0 7px; }
.foundation-iconography .fi-dashboard-value strong { font-family: "Satoshi", var(--lds-font-family); font-size: clamp(72px, 9vw, 116px); font-weight: 800; line-height: .88; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.foundation-iconography .fi-dashboard-value span { font-family: "Satoshi", var(--lds-font-family); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700; }
.foundation-iconography .fi-dashboard-primary p { max-width: 34ch; margin: 0; color: #45586d; font-size: 15px; font-weight: 550; line-height: 1.45; }
.foundation-iconography .fi-dashboard-proof { display: grid; grid-template-columns: repeat(3, 44px); gap: 10px; align-items: center; }
.foundation-iconography .fi-dashboard-proof > span { display: grid; place-items: center; width: 44px; height: 44px; color: #17263a; border: 1px solid rgba(50, 72, 101, .19); background: rgba(255, 255, 255, .42); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transform: translateY(calc((var(--fi-proof-order) - 2.5) * 1px)); }
.foundation-iconography .fi-dashboard-proof svg,
.foundation-iconography .fi-dashboard-acceptance svg,
.foundation-iconography .fi-family-mark svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.foundation-iconography .fi-dashboard-contract { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; background: var(--fi-surface); }
.foundation-iconography .fi-dashboard-contract > div { display: grid; align-content: center; min-width: 0; padding: clamp(26px, 3.2vw, 44px); border-bottom: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-dashboard-contract > div:nth-child(odd) { border-right: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-dashboard-contract > div:nth-child(n+3) { border-bottom: 0; }
.foundation-iconography .fi-dashboard-contract dt { order: 2; margin-top: 8px; color: var(--fi-text); font-size: 14px; font-weight: 750; }
.foundation-iconography .fi-dashboard-contract dd { order: 1; margin: 0; color: var(--fi-text); font-family: "Satoshi", var(--lds-font-family); font-size: clamp(28px, 3vw, 42px); font-weight: 800; line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.foundation-iconography .fi-dashboard-contract > div:nth-child(3) dd { font-size: clamp(24px, 2.35vw, 34px); white-space: nowrap; overflow-wrap: normal; }
.foundation-iconography .fi-dashboard-contract small { order: 3; margin-top: 4px; color: var(--fi-text-secondary); font-size: 12px; line-height: 1.4; }

.foundation-iconography .fi-dashboard-governance { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: 22px clamp(24px, 4vw, 48px); color: var(--fi-text); background: color-mix(in srgb, var(--fi-inset) 58%, transparent); border-top: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-dashboard-acceptance { display: inline-flex; align-items: center; gap: 9px; color: var(--fi-success-text); white-space: nowrap; }
.foundation-iconography .fi-dashboard-acceptance strong { color: inherit; font-size: 13px; letter-spacing: .01em; }
.foundation-iconography .fi-dashboard-governance p { max-width: 76ch; margin: 0; color: var(--fi-text-secondary); font-size: 13px; line-height: 1.5; }

.foundation-iconography .fi-family-distribution { padding: clamp(36px, 5vw, 64px) 0 clamp(42px, 6vw, 72px); }
.foundation-iconography .fi-family-distribution-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: clamp(28px, 6vw, 88px); align-items: end; margin-bottom: 26px; }
.foundation-iconography .fi-family-distribution-head h3 { margin: 7px 0 0; color: var(--fi-text); font-family: "Satoshi", var(--lds-font-family); font-size: clamp(24px, 2.5vw, 34px); font-weight: 800; line-height: 1.08; letter-spacing: 0; }
.foundation-iconography .fi-family-distribution-head p { margin: 0; color: var(--fi-text-secondary); font-size: 14px; line-height: 1.55; }
.foundation-iconography .fi-family-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fi-border); }
.foundation-iconography .fi-family-row { display: grid; grid-template-columns: 38px minmax(150px, .75fr) minmax(80px, 1fr) 30px; gap: 14px; align-items: center; min-width: 0; min-height: 74px; padding: 14px 18px 14px 0; color: var(--fi-text); border-bottom: 1px solid var(--fi-border-subtle); text-decoration: none; }
.foundation-iconography .fi-family-row:nth-child(odd) { padding-right: clamp(24px, 4vw, 54px); border-right: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-family-row:nth-child(even) { padding-left: clamp(24px, 4vw, 54px); }
.foundation-iconography .fi-family-row:hover { background: color-mix(in srgb, var(--fi-selected-bg) 32%, transparent); }
.foundation-iconography .fi-family-row:focus-visible { outline: 2px solid var(--fi-focus); outline-offset: -2px; }
.foundation-iconography .fi-family-mark { display: grid; place-items: center; width: 38px; height: 38px; color: var(--fi-text); }
.foundation-iconography .fi-family-name { min-width: 0; font-size: 13px; font-weight: 700; line-height: 1.3; }
.foundation-iconography .fi-family-row > strong { color: var(--fi-text); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.foundation-iconography .fi-family-measure { display: block; height: 4px; overflow: hidden; background: var(--fi-inset); }
.foundation-iconography .fi-family-measure i { display: block; width: var(--fi-family-width); height: 100%; background: linear-gradient(90deg, #7056d9 0%, #178eb5 56%, #ef5b8d 100%); }

@media (max-width: 900px) {
  .foundation-iconography .fi-dashboard-stage { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-dashboard-primary { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--fi-border-subtle); }
  .foundation-iconography .fi-family-distribution-head { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-family-list { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-family-row:nth-child(n) { padding-inline: 0; border-right: 0; }
}

@media (max-width: 620px) {
  .foundation-iconography .fi-library-heading { grid-template-columns: 32px minmax(0, 1fr); gap: 8px; }
  .foundation-iconography .fi-dashboard-contract { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-dashboard-contract > div:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--fi-border-subtle); }
  .foundation-iconography .fi-dashboard-contract > div:last-child { border-bottom: 0; }
  .foundation-iconography .fi-dashboard-governance { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .foundation-iconography .fi-family-row { grid-template-columns: 38px minmax(0, 1fr) 30px; }
  .foundation-iconography .fi-family-measure { grid-column: 2 / -1; }
}
.foundation-iconography .fi-group-nav { display: flex; flex-wrap: wrap; gap: var(--fi-space-2); margin-top: var(--fi-space-4); }
.foundation-iconography .fi-group-nav a { display: inline-flex; min-height: 32px; align-items: center; padding: 4px 10px; border: 1px solid var(--fi-border-subtle); border-radius: 999px; background: var(--fi-surface); color: var(--fi-link); font-size: 13px; font-weight: 700; text-decoration: none; }
.foundation-iconography .fi-group-nav a:hover { border-color: var(--fi-link); text-decoration: underline; }
.foundation-iconography .fi-library-tools { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px clamp(20px, 4vw, 56px); align-items: end; margin: clamp(18px, 3vw, 36px) 0 0; padding: clamp(22px, 3vw, 36px) 0; border-block: 1px solid var(--fi-border); }
.foundation-iconography .fi-library-search { display: grid; gap: 10px; min-width: 0; max-width: 760px; }
.foundation-iconography .fi-library-search-field { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 52px; padding: 0 16px; color: var(--fi-text-secondary); background: color-mix(in srgb, var(--fi-surface) 82%, transparent); border: 1px solid var(--fi-border); }
.foundation-iconography .fi-library-search-field:focus-within { color: var(--fi-text); border-color: var(--fi-focus); box-shadow: 0 0 0 2px color-mix(in srgb, var(--fi-focus) 22%, transparent); }
.foundation-iconography .fi-library-search-field svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foundation-iconography .fi-library-search-field input { min-width: 0; width: 100%; padding: 0; color: var(--fi-text); font: inherit; font-size: 15px; line-height: 1.4; background: transparent; border: 0; outline: 0; }
.foundation-iconography .fi-library-search-field input::placeholder { color: var(--fi-text-muted); opacity: 1; }
.foundation-iconography .fi-library-tools > p { grid-column: 1; max-width: 66ch; margin: 0; color: var(--fi-text-secondary); font-size: 13px; line-height: 1.5; }
.foundation-iconography .fi-library-result-count { grid-column: 2; grid-row: 1; align-self: end; padding-bottom: 15px; color: var(--fi-text); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.foundation-iconography .fi-library-empty { margin: 32px 0 0; padding: 32px; color: var(--fi-text-secondary); text-align: center; border: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-native-groups { display: grid; gap: var(--fi-space-5); margin-top: var(--fi-space-5); }
.foundation-iconography .fi-native-group { border: 1px solid var(--fi-border-subtle); border-radius: var(--fi-radius); padding: var(--fi-space-4); background: var(--fi-surface); min-width: 0; }
.foundation-iconography .fi-native-group-head { margin-bottom: var(--fi-space-4); }
.foundation-iconography .fi-native-group-head h3 { margin: 0; font-size: 18px; line-height: 1.2; }
.foundation-iconography .fi-native-group-head p { margin: 6px 0 0; color: var(--fi-text-secondary); font-size: 13px; line-height: 1.4; }
.foundation-iconography .fi-native-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--fi-space-3); }
.foundation-iconography .fi-native-icon-card { min-width: 0; border: 1px solid var(--fi-border-subtle); border-radius: 6px; padding: var(--fi-space-3); background: var(--fi-surface); display: grid; gap: var(--fi-space-2); }
.foundation-iconography .fi-native-icon-preview { min-height: 54px; display: grid; place-items: center; background: var(--fi-inset); border-radius: 6px; color: var(--fi-text); }
.foundation-iconography .fi-native-icon-preview svg,
.foundation-iconography .fi-native-size-icon svg { display: block; overflow: visible; }
.foundation-iconography .fi-native-icon-head { display: grid; gap: 2px; }
.foundation-iconography .fi-native-icon-head strong { font-size: 14px; line-height: 1.2; }
.foundation-iconography .fi-native-icon-head code { font-size: 11px; color: var(--fi-text-muted); overflow-wrap: anywhere; }
.foundation-iconography .fi-native-icon-meta { display: grid; gap: 2px; color: var(--fi-text-secondary); font-size: 11px; line-height: 1.35; }
.foundation-iconography .fi-native-size-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.foundation-iconography .fi-native-size-strip > span { min-width: 0; min-height: 64px; padding: 8px 4px 7px; border: 1px solid var(--fi-border-subtle); border-radius: 6px; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--fi-text); }
.foundation-iconography .fi-native-size-strip em { font-style: normal; color: var(--fi-text-muted); font-size: 10px; font-weight: 700; }
.foundation-iconography .fi-native-status-row { display: flex; flex-wrap: wrap; gap: 6px; }
.foundation-iconography .fi-native-status { display: inline-flex; align-items: center; min-height: 20px; border-radius: var(--fi-radius-sm); padding: 2px 7px; font-size: 10px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.foundation-iconography .fi-native-status.ready { color: var(--fi-success-text); background: var(--fi-success-bg); border: 1px solid var(--fi-success-border); }
.foundation-iconography .fi-native-status.pending { color: var(--fi-warning-text); background: var(--fi-warning-bg); border: 1px solid var(--fi-warning-border); }

.foundation-iconography .fi-optical-contract { display: grid; gap: clamp(24px, 4vw, 48px); margin-top: clamp(36px, 5vw, 64px); padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--fi-border); }
.foundation-iconography .fi-optical-contract-copy { display: grid; grid-template-columns: minmax(0, .8fr) minmax(280px, 1.2fr); column-gap: clamp(32px, 7vw, 96px); align-items: end; }
.foundation-iconography .fi-optical-contract-copy .fi-dashboard-label { grid-column: 1 / -1; margin-bottom: 8px; }
.foundation-iconography .fi-optical-contract-copy h3 { margin: 0; color: var(--fi-text); font-family: "Satoshi", var(--lds-font-family); font-size: clamp(28px, 4vw, 52px); font-weight: 800; line-height: 1.04; letter-spacing: 0; }
.foundation-iconography .fi-optical-contract-copy p { margin: 0; color: var(--fi-text-secondary); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.55; }
.foundation-iconography .fi-keyline-studies { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-block: 1px solid var(--fi-border); }
.foundation-iconography .fi-keyline-studies figure { display: grid; gap: 18px; min-width: 0; margin: 0; padding: clamp(22px, 3vw, 38px); border-right: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-keyline-studies figure:last-child { border-right: 0; }
.foundation-iconography .fi-keyline-stage { position: relative; display: grid; place-items: center; min-height: 176px; color: var(--fi-text); background-color: color-mix(in srgb, var(--fi-inset) 58%, transparent); background-image: linear-gradient(var(--fi-border-subtle) 1px, transparent 1px), linear-gradient(90deg, var(--fi-border-subtle) 1px, transparent 1px); background-size: 12px 12px; }
.foundation-iconography .fi-keyline-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: var(--fi-keyline-width); height: var(--fi-keyline-height); border: 1px solid color-mix(in srgb, var(--fi-accent) 72%, transparent); transform: translate(-50%, -50%); pointer-events: none; }
.foundation-iconography .fi-keyline-stage.keyline-square { --fi-keyline-width: 100px; --fi-keyline-height: 100px; }
.foundation-iconography .fi-keyline-stage.keyline-circle { --fi-keyline-width: 100px; --fi-keyline-height: 100px; }
.foundation-iconography .fi-keyline-stage.keyline-circle::after { border-radius: 50%; }
.foundation-iconography .fi-keyline-stage.keyline-vertical { --fi-keyline-width: 80px; --fi-keyline-height: 100px; }
.foundation-iconography .fi-keyline-stage.keyline-horizontal { --fi-keyline-width: 100px; --fi-keyline-height: 80px; }
.foundation-iconography .fi-keyline-stage svg { position: relative; z-index: 1; display: block; }
.foundation-iconography .fi-keyline-studies figcaption { display: grid; gap: 3px; }
.foundation-iconography .fi-keyline-studies figcaption strong { font-size: 14px; }
.foundation-iconography .fi-keyline-studies figcaption span { color: var(--fi-text-secondary); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; }
.foundation-iconography .fi-optical-decisions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid var(--fi-border); }
.foundation-iconography .fi-optical-decisions > div { display: grid; grid-template-columns: minmax(130px, .6fr) minmax(0, 1fr); gap: 16px; padding: 20px 24px 20px 0; border-bottom: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-optical-decisions > div:nth-child(odd) { padding-right: clamp(24px, 4vw, 56px); border-right: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-optical-decisions > div:nth-child(even) { padding-left: clamp(24px, 4vw, 56px); }
.foundation-iconography .fi-optical-decisions strong { color: var(--fi-text); font-size: 13px; }
.foundation-iconography .fi-optical-decisions span { color: var(--fi-text-secondary); font-size: 13px; line-height: 1.5; }

.foundation-iconography .fi-decision-table { border-top: 1px solid var(--fi-border); }
.foundation-iconography .fi-decision-table > div { display: grid; grid-template-columns: 38px minmax(190px, .45fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-decision-index { color: var(--fi-text-muted); font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 11px; font-weight: 700; }
.foundation-iconography .fi-decision-table strong { color: var(--fi-text); font-size: 15px; }
.foundation-iconography .fi-decision-table p { max-width: 72ch; margin: 0; color: var(--fi-text-secondary); font-size: 14px; line-height: 1.55; }
.foundation-iconography .fi-access-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-block: 1px solid var(--fi-border); }
.foundation-iconography .fi-access-grid article { display: grid; align-content: start; gap: 12px; min-width: 0; padding: clamp(26px, 4vw, 48px); border-right: 1px solid var(--fi-border-subtle); border-bottom: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-access-grid article:nth-child(even) { border-right: 0; }
.foundation-iconography .fi-access-grid article:nth-child(n+3) { border-bottom: 0; }
.foundation-iconography .fi-access-grid h3 { margin: 4px 0 0; color: var(--fi-text); font-family: "Satoshi", var(--lds-font-family); font-size: clamp(20px, 2vw, 28px); font-weight: 800; line-height: 1.1; }
.foundation-iconography .fi-access-grid p { max-width: 52ch; margin: 0; color: var(--fi-text-secondary); font-size: 14px; line-height: 1.55; }
.foundation-iconography .fi-access-example { display: flex; align-items: center; gap: 12px; min-height: 68px; color: var(--fi-text); }
.foundation-iconography .fi-access-example > svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foundation-iconography .fi-access-example > span { color: var(--fi-text-secondary); font-size: 13px; }
.foundation-iconography .fi-target-boundary { display: grid; place-items: center; width: 44px; height: 44px; color: var(--fi-text); border: 1px dashed var(--fi-accent); }
.foundation-iconography .fi-target-boundary svg { display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.foundation-iconography .fi-badge-mark-card .fi-tile { background: var(--fi-surface); border: 1px solid var(--fi-border-subtle); }
.foundation-iconography .fi-badge { --fi-badge-gap: var(--component-icon-text-gap); --fi-badge-mark-size: 20px; display: inline-flex; align-items: center; gap: var(--fi-badge-gap); padding: 2px 10px; border-radius: var(--fi-radius-sm); font-size: 13px; font-weight: 700; border: 1px solid; min-height: 24px; }
.foundation-iconography .fi-badge-mark { display: inline-flex; align-items: center; justify-content: center; width: var(--fi-badge-mark-size); height: var(--fi-badge-mark-size); flex: 0 0 var(--fi-badge-mark-size); }
.foundation-iconography .fi-badge-mark svg { width: var(--fi-badge-mark-size); height: var(--fi-badge-mark-size); display: block; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.foundation-iconography .fi-badge.info { background: var(--fi-info-bg); border-color: var(--fi-info-border); color: var(--fi-info-text); }
.foundation-iconography .fi-badge.success { background: var(--fi-success-bg); border-color: var(--fi-success-border); color: var(--fi-success-text); }
.foundation-iconography .fi-badge.warning { background: var(--fi-warning-bg); border-color: var(--fi-warning-border); color: var(--fi-warning-text); }
.foundation-iconography .fi-badge.danger { background: var(--fi-danger-bg); border-color: var(--fi-danger-border); color: var(--fi-danger-text); }

.foundation-iconography .fi-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; background: var(--fi-surface); border: 1px solid var(--fi-border); color: var(--fi-text); cursor: pointer; }
.foundation-iconography .fi-iconbtn .fi-icon { --fi-icon-box: 24px; }
.foundation-iconography .fi-iconbtn:focus-visible { outline: 2px dashed var(--fi-focus); outline-offset: 2px; }
.foundation-iconography .fi-iconbtn.is-focus { outline: 2px dashed var(--fi-focus); outline-offset: 2px; }
.foundation-iconography .fi-iconbtn.accent { background: var(--fi-accent); border-color: var(--fi-accent); color: #fff; }
.foundation-iconography .fi-iconbtn.danger { color: var(--fi-danger); border-color: var(--fi-danger-border); }
.foundation-iconography .fi-iconbtn.is-disabled { color: var(--fi-disabled); cursor: not-allowed; }

.foundation-iconography .fi-textlink { color: var(--fi-link); font-weight: 600; text-decoration: underline; display: inline-flex; align-items: center; gap: var(--component-icon-text-gap); }
.foundation-iconography .fi-textlink .fi-icon { --fi-icon-box: 12px; }

.foundation-iconography .fi-table-wrap { overflow-x: auto; }
.foundation-iconography .fi-matrix { width: 100%; border-collapse: collapse; font-size: 13px; }
.foundation-iconography .fi-matrix th, .foundation-iconography .fi-matrix td { text-align: left; padding: var(--fi-space-2) var(--fi-space-3); border-bottom: 1px solid var(--fi-border-subtle); vertical-align: top; }
.foundation-iconography .fi-matrix th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--fi-text-muted); }
.foundation-iconography .fi-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; }
.foundation-iconography .fi-chip.decorative { background: var(--fi-inset); color: var(--fi-text-secondary); }
.foundation-iconography .fi-chip.semantic { background: var(--fi-info-bg); color: var(--fi-info-text); }
.foundation-iconography .fi-chip.action { background: var(--fi-selected-bg); color: var(--fi-selected-text); }

.foundation-iconography .fi-gate { border-left: 3px solid var(--fi-border); padding-left: var(--fi-space-3); margin-bottom: var(--fi-space-2); }
.foundation-iconography .fi-gate.blocker { border-left-color: var(--fi-danger); }
.foundation-iconography .fi-gate.major { border-left-color: var(--fi-warning); }
.foundation-iconography .fi-gate.minor { border-left-color: var(--fi-info); }
.foundation-iconography .fi-sev { font-size: 11px; font-weight: 700; text-transform: uppercase; }
.foundation-iconography .fi-gate.blocker .fi-sev { color: var(--fi-danger-text); }
.foundation-iconography .fi-gate.major .fi-sev { color: var(--fi-warning-text); }
.foundation-iconography .fi-gate.minor .fi-sev { color: var(--fi-info-text); }

.foundation-iconography .fi-impl { background: var(--fi-surface); border: 1px solid var(--fi-border-subtle); border-radius: var(--fi-radius); padding: var(--fi-space-3) var(--fi-space-5); }
.foundation-iconography .fi-impl summary { cursor: pointer; font-weight: 600; }
.foundation-iconography .fi-impl[open] summary { margin-bottom: var(--fi-space-3); }
.foundation-iconography .fi-impl code, .foundation-iconography .fi-role-token code { font-family: ui-monospace, monospace; }

.foundation-iconography ul.fi-rules { margin: 0; padding-left: 1.1em; }
.foundation-iconography ul.fi-rules li { margin-bottom: var(--fi-space-2); }
.foundation-iconography .fi-note-list { margin-top: var(--fi-space-3); color: var(--fi-text-secondary); font-size: 13px; }

.foundation-iconography .fi-dark {
  --fi-surface: #1D2026; --fi-inset: #14161B; --fi-text: #F4F6F9; --fi-text-secondary: #AEB4BD; --fi-text-muted: #9CA2AA;
  --fi-border-subtle: #232830; --fi-border: #333942; --fi-border-strong: #4A515B; --fi-disabled: #5A616A;
  --fi-accent: #1F6FE6; --fi-link: #6FB0FF; --fi-focus: #2E86FF; --fi-selected-bg: var(--color-selected-bg); --fi-selected-text: var(--color-selected-text);
  --fi-success: #2BD96B; --fi-success-text: #2BD96B; --fi-success-bg: #0C2C18; --fi-success-border: #2C6440;
  --fi-warning: #FFA61F; --fi-warning-text: #FFA61F; --fi-warning-bg: #2C1D08; --fi-warning-border: #5E461C;
  --fi-danger: #FF463C; --fi-danger-text: #FF6A62; --fi-danger-bg: #2E1311; --fi-danger-border: #62292A;
  --fi-info: #2BC4F0; --fi-info-text: #2BC4F0; --fi-info-bg: #08272F; --fi-info-border: #225A66;
  background: #14161B; color: var(--fi-text); padding: var(--fi-space-5); border-radius: var(--fi-radius);
}
.foundation-iconography .fi-dark .fi-role { background: var(--fi-surface); }

@media (max-width: 480px) {
  .foundation-iconography .fi-title { font-size: 25px; }
  .foundation-iconography .fi-summary,
  .foundation-iconography .fi-pill,
  .foundation-iconography .fi-role-token,
  .foundation-iconography .fi-blocked { overflow-wrap: anywhere; }
  .foundation-iconography .fi-pill { max-width: 100%; white-space: normal; }
  .foundation-iconography .fi-section > h2 { font-size: 19px; }
  .foundation-iconography .fi-card { padding: var(--fi-space-3); overflow: hidden; }
  .foundation-iconography .fi-anatomy-layout { grid-template-columns: minmax(0, 1fr); gap: var(--fi-space-3); }
  .foundation-iconography .fi-dark { padding: var(--fi-space-3); }
  .foundation-iconography .fi-grid.cols-2,
  .foundation-iconography .fi-grid.cols-3,
  .foundation-iconography .fi-grid.cols-4 { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-diagram-svg,
  .foundation-iconography .fi-guide-svg,
  .foundation-iconography .fi-anatomy-svg { display: block; width: 100%; max-width: 100%; height: auto; }
  .foundation-iconography .fi-source-icon-grid { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-dim-label { font-size: 7.5px; }
  .foundation-iconography .fi-guide-label { font-size: 8.5px; }
  .foundation-iconography .fi-role { align-items: flex-start; }
  .foundation-iconography .fi-legend { gap: var(--fi-space-2); }
  .foundation-iconography .fi-native-summary,
  .foundation-iconography .fi-native-grid { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-native-group { padding: var(--fi-space-3); }
  .foundation-iconography .fi-native-size-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundation-iconography .fi-table-wrap { overflow-x: visible; }
  .foundation-iconography .fi-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .foundation-iconography .fi-matrix, .foundation-iconography .fi-matrix tbody, .foundation-iconography .fi-matrix tr, .foundation-iconography .fi-matrix td { display: block; width: 100%; }
  .foundation-iconography .fi-matrix tr { border: 1px solid var(--fi-border-subtle); border-radius: 6px; margin-bottom: var(--fi-space-3); padding: var(--fi-space-2); background: var(--fi-surface); }
  .foundation-iconography .fi-matrix td { border: none; padding: 4px 6px; }
  .foundation-iconography .fi-matrix td::before { content: attr(data-label); display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--fi-text-muted); }
}

@media (max-width: 900px) {
  .foundation-iconography .fi-optical-contract-copy { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .foundation-iconography .fi-keyline-studies { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foundation-iconography .fi-keyline-studies figure:nth-child(2) { border-right: 0; }
  .foundation-iconography .fi-keyline-studies figure:nth-child(-n+2) { border-bottom: 1px solid var(--fi-border-subtle); }
}

@media (max-width: 620px) {
  .foundation-iconography .fi-library-tools { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-library-result-count { grid-column: 1; grid-row: auto; padding: 0; }
  .foundation-iconography .fi-keyline-studies,
  .foundation-iconography .fi-optical-decisions,
  .foundation-iconography .fi-access-grid { grid-template-columns: minmax(0, 1fr); }
  .foundation-iconography .fi-keyline-studies figure:nth-child(n),
  .foundation-iconography .fi-access-grid article:nth-child(n) { border-right: 0; border-bottom: 1px solid var(--fi-border-subtle); }
  .foundation-iconography .fi-keyline-studies figure:last-child,
  .foundation-iconography .fi-access-grid article:last-child { border-bottom: 0; }
  .foundation-iconography .fi-optical-decisions > div:nth-child(n) { grid-template-columns: minmax(0, 1fr); padding-inline: 0; border-right: 0; }
  .foundation-iconography .fi-decision-table > div { grid-template-columns: 30px minmax(0, 1fr); gap: 10px 14px; }
  .foundation-iconography .fi-decision-table p { grid-column: 2; }
}

.table-source-page {
  --table-cell-padding-y: var(--lds-space-3);
  --table-cell-padding-x: var(--lds-space-3);
  --table-callout-color: var(--lds-light-system-indigo);
}

.table-source-page .table-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr);
  gap: var(--lds-space-4);
  align-items: stretch;
}

.table-source-page .table-anatomy-stage {
  min-height: 360px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
  overflow: hidden;
}

.table-source-page .table-anatomy-svg {
  width: 100%;
  max-width: 680px;
  height: auto;
  display: block;
}

.table-source-page .table-svg-stage {
  fill: var(--color-bg-surface);
}

.table-source-page .table-svg-surface {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.table-source-page .table-svg-header,
.table-source-page .table-svg-header-mask {
  fill: #EEF3F8;
}

.table-source-page .table-svg-rule {
  stroke: var(--color-border-subtle);
  stroke-width: 1;
}

.table-source-page .table-svg-rule.emphasized {
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
}

.table-source-page .table-svg-head-text {
  fill: var(--color-text-primary);
  font-size: 12.5px;
  font-weight: 800;
}

.table-source-page .table-svg-cell-text {
  fill: var(--color-text-primary);
  font-size: 12px;
  font-weight: var(--font-weight-medium);
}

.table-source-page .table-svg-cell-text.muted {
  fill: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.table-source-page .table-svg-badge {
  fill: var(--color-success-bg);
  stroke: var(--color-success-border);
}

.table-source-page .table-svg-badge-text {
  fill: var(--color-success-text);
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
}

.table-source-page .table-svg-callout .table-svg-pointer {
  stroke: var(--table-callout-color) !important;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.table-source-page .table-svg-callout .table-svg-pointer-dot {
  fill: var(--color-bg-surface) !important;
  stroke: var(--table-callout-color) !important;
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.table-source-page .table-svg-callout .table-svg-callout-number {
  fill: var(--table-callout-color) !important;
}

.table-source-page .table-svg-callout .table-svg-callout-digit {
  fill: #FFFFFF !important;
  font-size: 14px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  alignment-baseline: middle;
  pointer-events: none;
}

.table-source-page .table-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.table-source-page .table-anatomy-key p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  column-gap: var(--lds-space-2);
  align-items: start;
  margin: 0;
}

.table-source-page .table-anatomy-key p > span:last-child {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.table-source-page .table-anatomy-key strong {
  color: var(--color-text-primary);
}

.table-source-page .table-anatomy-key p span span {
  color: var(--color-text-secondary);
}

.table-source-page .table-key-num {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--table-callout-color);
  border-radius: 999px;
  color: var(--table-callout-color);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.table-source-page .table-config-grid {
  align-items: stretch;
}

.table-source-page .table-config-card {
  overflow: hidden;
}

.table-source-page .table-scroll-region {
  max-width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.table-source-page .table-scroll-region:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

.table-source-page .table-scroll-region.dark {
  color: #F5F7FA;
  background: #0B0F14;
  border-color: #363D47;
}

.table-source-page .source-data-table {
  min-width: 760px;
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
}

.table-source-page .source-data-table caption {
  padding: var(--lds-space-2) var(--table-cell-padding-x);
  color: var(--color-text-secondary);
  text-align: left;
  font-weight: var(--font-weight-semibold);
}

.table-source-page .source-data-table th,
.table-source-page .source-data-table td {
  padding: var(--table-cell-padding-y) var(--table-cell-padding-x);
  border-bottom: 1px solid var(--color-border-subtle);
  text-align: left;
  vertical-align: middle;
}

.table-source-page .source-data-table th {
  color: var(--color-text-primary);
  background: var(--color-bg-panel);
  font-weight: var(--font-weight-bold);
}

.table-source-page .source-data-table .table-col-text {
  text-align: left;
}

.table-source-page .source-data-table .table-col-center {
  text-align: center;
}

.table-source-page .source-data-table .table-col-number {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.table-source-page .source-data-table tbody tr:last-child td {
  border-bottom: 0;
}

.table-source-page .source-data-table.compact th,
.table-source-page .source-data-table.compact td {
  padding-top: var(--lds-space-2);
  padding-bottom: var(--lds-space-2);
}

.table-source-page .source-data-table.striped tbody tr:nth-child(even) {
  background: var(--color-bg-panel);
}

.table-source-page .source-data-table th:last-child,
.table-source-page .source-data-table td:last-child {
  width: 84px;
}

.table-source-page .table-muted {
  color: var(--color-text-secondary);
}

.table-source-page .table-scroll-region.dark .source-data-table {
  color: #F5F7FA;
}

.table-source-page .table-scroll-region.dark .source-data-table caption,
.table-source-page .table-scroll-region.dark .table-muted {
  color: #B7C0CC;
}

.table-source-page .table-scroll-region.dark .source-data-table th {
  color: #F5F7FA;
  background: #1B212A;
}

.table-source-page .table-scroll-region.dark .source-data-table th,
.table-source-page .table-scroll-region.dark .source-data-table td {
  border-color: #363D47;
}

.table-source-page .table-scroll-region.dark .source-data-table.striped tbody tr:nth-child(even) {
  background: #151B22;
}

.table-source-page .table-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .8fr);
  gap: var(--lds-space-4);
}

.table-source-page .table-layout-card,
.table-source-page .table-state-surface {
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.table-source-page .table-layout-card h3,
.table-source-page .table-state-surface h3 {
  margin: 0;
}

.table-source-page .table-spacing-diagram {
  min-height: 220px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.table-source-page .table-spacing-cell {
  position: relative;
  width: 220px;
  height: 68px;
  display: grid;
  place-items: center;
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.table-source-page .table-padding-band {
  position: absolute;
  background: rgba(255, 138, 0, .28);
}

.table-source-page .table-padding-band.left,
.table-source-page .table-padding-band.right {
  top: 0;
  bottom: 0;
  width: var(--lds-space-3);
}

.table-source-page .table-padding-band.left {
  left: 0;
}

.table-source-page .table-padding-band.right {
  right: 0;
}

.table-source-page .table-padding-band.top,
.table-source-page .table-padding-band.bottom {
  left: 0;
  right: 0;
  height: var(--lds-space-3);
}

.table-source-page .table-padding-band.top {
  top: 0;
}

.table-source-page .table-padding-band.bottom {
  bottom: 0;
}

.table-source-page .table-spacing-text {
  position: relative;
  z-index: 1;
  font-weight: var(--font-weight-semibold);
}

.table-source-page .table-row-line-demo {
  width: 220px;
  height: 1px;
  background: var(--color-border-strong);
}

.table-source-page .table-rule-list {
  margin: 0;
  padding-left: var(--lds-space-4);
  color: var(--color-text-secondary);
}

.table-source-page .table-state-stack {
  display: grid;
  gap: var(--lds-space-4);
}

.table-source-page .table-state-surface.dark {
  color: #F5F7FA;
  background: #080C11;
  border-color: #080C11;
}

.table-source-page .table-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 820px) {
  .table-source-page .table-anatomy-grid,
  .table-source-page .table-layout-grid {
    grid-template-columns: 1fr;
  }

  .table-source-page .table-anatomy-stage {
    min-height: 260px;
  }

  .table-source-page .table-layout-card,
  .table-source-page .table-state-surface {
    padding: var(--lds-space-3);
  }
}

/* ============================================================================
 * Tabs — source-faithful v0 page (DESIGN-LANGUAGE-42A)
 * ==========================================================================*/

.tabs-source-page {
  --tabs-callout-color: var(--color-accent);
  --tabs-stage-border: var(--color-border-subtle);
  --tabs-indicator: var(--color-accent);
  --tabs-item-padding-x: var(--lds-space-4);
  --tabs-item-padding-y: var(--lds-space-3);
  --tabs-panel-padding: var(--lds-space-4);
}

.tabs-source-page .tabs-section {
  display: grid;
  gap: var(--lds-space-5);
}

.tabs-source-page .tabs-anatomy-grid,
.tabs-source-page .tabs-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .85fr);
  gap: var(--lds-space-4);
  align-items: stretch;
}

.tabs-source-page .tabs-anatomy-stage,
.tabs-source-page .tabs-measure-stage {
  min-width: 0;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--tabs-stage-border);
  background: var(--color-bg-surface);
  overflow: hidden;
}

.tabs-source-page .tabs-anatomy-svg,
.tabs-source-page .tabs-measure-svg {
  width: min(100%, 680px);
  height: auto;
  display: block;
}

.tabs-source-page .tabs-svg-container,
.tabs-source-page .tabs-svg-content {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.tabs-source-page .tabs-svg-tab-item {
  fill: transparent;
  stroke: transparent;
}

.tabs-source-page .tabs-svg-tab-item.selected {
  fill: var(--color-bg-panel);
}

.tabs-source-page .tabs-svg-border-line {
  stroke: var(--color-border-strong);
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}

.tabs-source-page .tabs-svg-label {
  fill: var(--color-text-primary);
  font-size: 14px;
  font-weight: 700;
}

.tabs-source-page .tabs-svg-label.muted,
.tabs-source-page .tabs-svg-content-text.muted {
  fill: var(--color-text-secondary);
}

.tabs-source-page .tabs-svg-indicator {
  fill: var(--tabs-indicator);
}

.tabs-source-page .tabs-svg-content-text {
  fill: var(--color-text-primary);
  font-size: 14px;
  font-weight: 600;
}

.tabs-source-page .tabs-svg-callout circle:first-child {
  fill: var(--tabs-callout-color);
}

.tabs-source-page .tabs-svg-callout text {
  fill: #FFFFFF;
  font-size: 14px;
  font-weight: 800;
}

.tabs-source-page .tabs-svg-callout line {
  stroke: var(--tabs-callout-color);
  stroke-width: 1;
}

.tabs-source-page .tabs-svg-callout .endpoint {
  fill: var(--color-bg-surface);
  stroke: var(--tabs-callout-color);
  stroke-width: 1;
}

.tabs-source-page .tabs-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.tabs-source-page .tabs-key-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: start;
}

.tabs-source-page .tabs-key-row > span:last-child {
  display: grid;
  gap: 2px;
}

.tabs-source-page .tabs-key-row strong {
  color: var(--color-text-primary);
}

.tabs-source-page .tabs-key-row span span {
  color: var(--color-text-secondary);
}

.tabs-source-page .tabs-key-num {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--tabs-callout-color);
  border-radius: 999px;
  color: var(--tabs-callout-color);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.tabs-source-page .tabs-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.tabs-source-page .tabs-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tabs-source-page .tabs-config-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.tabs-source-page .tabs-config-card,
.tabs-source-page .tabs-rule-card,
.tabs-source-page .tabs-layout-card,
.tabs-source-page .tabs-live-card,
.tabs-source-page .tabs-state-surface,
.tabs-source-page .tabs-state-card {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.tabs-source-page .tabs-config-card h3,
.tabs-source-page .tabs-rule-card h3,
.tabs-source-page .tabs-layout-card h3,
.tabs-source-page .tabs-state-surface h3,
.tabs-source-page .tabs-state-card strong {
  margin: 0;
  color: var(--color-text-primary);
}

.tabs-source-page .tabs-demo {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-3);
}

.tabs-source-page .tabs-demo.live {
  max-width: 640px;
}

.tabs-source-page .tabs-tab-scroll {
  max-width: 100%;
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border-subtle);
}

.tabs-source-page .tabs-tablist {
  min-width: max-content;
  display: flex;
  align-items: flex-end;
  gap: var(--lds-space-1);
}

.tabs-source-page .tabs-demo.compact .tabs-tablist {
  min-width: 360px;
}

.tabs-source-page .tabs-source-tab {
  position: relative;
  min-height: 44px;
  padding: var(--tabs-item-padding-y) var(--tabs-item-padding-x);
  border: 0;
  border-radius: var(--lds-radius-sm) var(--lds-radius-sm) 0 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.tabs-source-page .tabs-source-tab::after {
  content: '';
  position: absolute;
  left: var(--tabs-item-padding-x);
  right: var(--tabs-item-padding-x);
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: transparent;
}

.tabs-source-page .tabs-source-tab:hover {
  color: var(--color-link-hover);
  background: color-mix(in srgb, var(--color-selected-bg) 44%, transparent);
}

.tabs-source-page .tabs-source-tab.active {
  color: var(--color-accent);
  background: var(--color-bg-surface);
}

.tabs-source-page .tabs-source-tab.active::after {
  background: var(--tabs-indicator);
}

.tabs-source-page .tabs-source-tab:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: -4px;
  box-shadow: none;
}

.tabs-source-page .tabs-source-panel {
  min-height: 106px;
  padding: var(--tabs-panel-padding);
  border: 1px solid var(--color-border-subtle);
  border-radius: 0 0 var(--lds-radius-md) var(--lds-radius-md);
  border-top: 0;
  background: var(--color-bg-surface);
}

.tabs-source-page .tabs-source-panel p {
  margin: 0;
  color: var(--color-text-secondary);
}

.tabs-source-page .tabs-note-stack {
  display: grid;
  gap: var(--lds-space-2);
}

.tabs-source-page .tabs-info-note {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: center;
  padding: var(--lds-space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-panel);
  color: var(--color-text-secondary);
}

.tabs-source-page .tabs-info-note span {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.tabs-source-page .tabs-info-note p {
  margin: 0;
}

.tabs-source-page .tabs-rule-card .tabs-rules {
  margin: 0;
}

.tabs-source-page .tabs-rules {
  margin: 0;
  padding-left: var(--lds-space-4);
  color: var(--color-text-secondary);
}

.tabs-source-page .tabs-measure-line {
  stroke: var(--color-accent);
  stroke-width: 1;
  fill: none;
  vector-effect: non-scaling-stroke;
}

.tabs-source-page .tabs-measure-text {
  fill: var(--color-accent);
  font-size: 12px;
  font-weight: 700;
}

.tabs-source-page .tabs-state-stack {
  display: grid;
  gap: var(--lds-space-4);
}

.tabs-source-page .tabs-state-surface.dark {
  --tabs-dark-card: #1B212A;
  --tabs-dark-border: #363D47;
  --tabs-dark-panel: #111820;
  --tabs-dark-text: #F5F7FA;
  --tabs-dark-muted: #AEB7C4;
  --tabs-dark-disabled: #717B89;
  color: #F5F7FA;
  background: #080C11;
  border-color: #080C11;
}

.tabs-source-page .tabs-state-surface.dark h3,
.tabs-source-page .tabs-state-surface.dark .tabs-state-card strong {
  color: #F5F7FA;
}

.tabs-source-page .tabs-state-surface.dark .tabs-state-card {
  background: var(--tabs-dark-card);
  border-color: var(--tabs-dark-border);
}

.tabs-source-page .tabs-state-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.tabs-source-page .tabs-state-card {
  min-width: 0;
  align-content: start;
  min-height: 244px;
}

.tabs-source-page .tabs-state-specimen {
  min-width: 0;
  display: grid;
  align-content: start;
  min-height: 176px;
}

.tabs-source-page .tabs-state-tabrow {
  min-width: 0;
  min-height: 56px;
  display: flex;
  align-items: flex-end;
  gap: var(--lds-space-1);
  border-bottom: 1px solid var(--color-border-subtle);
}

.tabs-source-page .tabs-static-tab {
  position: relative;
  flex: 0 0 auto;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: var(--tabs-item-padding-y) var(--tabs-item-padding-x);
  border-radius: var(--lds-radius-sm) var(--lds-radius-sm) 0 0;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.tabs-source-page .tabs-static-tab.hover {
  color: var(--color-text-primary);
  background: var(--color-bg-panel);
}

.tabs-source-page .tabs-static-tab.focus {
  color: var(--color-accent);
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: -5px;
}

.tabs-source-page .tabs-static-tab.selected {
  color: var(--color-accent);
}

.tabs-source-page .tabs-static-tab.selected::after {
  content: '';
  position: absolute;
  left: var(--tabs-item-padding-x);
  right: var(--tabs-item-padding-x);
  bottom: -1px;
  height: 3px;
  border-radius: 999px 999px 0 0;
  background: var(--tabs-indicator);
}

.tabs-source-page .tabs-static-tab.disabled {
  color: var(--color-text-disabled);
  cursor: not-allowed;
}

.tabs-source-page .tabs-state-panel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 104px;
  padding: var(--tabs-panel-padding);
  border: 1px solid var(--color-border-subtle);
  border-top: 0;
  border-radius: 0 0 var(--lds-radius-md) var(--lds-radius-md);
  background: var(--color-bg-surface);
  color: var(--color-text-secondary);
}

.tabs-source-page .tabs-state-panel p {
  margin: 0;
}

.tabs-source-page .tabs-state-panel p + p {
  margin-top: var(--lds-space-2);
}

.tabs-source-page .tabs-state-panel strong {
  color: var(--color-text-primary);
}

.tabs-source-page .tabs-state-surface.dark .tabs-state-tabrow {
  border-bottom-color: var(--tabs-dark-border);
}

.tabs-source-page .tabs-state-surface.dark .tabs-static-tab {
  color: var(--tabs-dark-muted);
}

.tabs-source-page .tabs-state-surface.dark .tabs-static-tab.hover {
  color: var(--tabs-dark-text);
  background: var(--tabs-dark-panel);
}

.tabs-source-page .tabs-state-surface.dark .tabs-static-tab.selected {
  color: #72A7FF;
}

.tabs-source-page .tabs-state-surface.dark .tabs-static-tab.disabled {
  color: var(--tabs-dark-disabled);
}

.tabs-source-page .tabs-state-surface.dark .tabs-state-panel {
  background: var(--tabs-dark-panel);
  border-color: var(--tabs-dark-border);
  color: var(--tabs-dark-muted);
}

.tabs-source-page .tabs-state-surface.dark .tabs-state-panel strong {
  color: var(--tabs-dark-text);
}

.tabs-source-page .tabs-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .tabs-source-page .tabs-card-grid,
  .tabs-source-page .tabs-card-grid.compact,
  .tabs-source-page .tabs-config-summary,
  .tabs-source-page .tabs-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .tabs-source-page .tabs-anatomy-grid,
  .tabs-source-page .tabs-layout-grid,
  .tabs-source-page .tabs-card-grid,
  .tabs-source-page .tabs-card-grid.compact,
  .tabs-source-page .tabs-config-summary,
  .tabs-source-page .tabs-state-grid {
    grid-template-columns: 1fr;
  }

  .tabs-source-page .tabs-anatomy-stage,
  .tabs-source-page .tabs-measure-stage {
    padding: var(--lds-space-2);
  }

  .tabs-source-page .tabs-config-card,
  .tabs-source-page .tabs-rule-card,
  .tabs-source-page .tabs-layout-card,
  .tabs-source-page .tabs-live-card,
  .tabs-source-page .tabs-state-surface,
  .tabs-source-page .tabs-state-card {
    padding: var(--lds-space-3);
  }
}

/* Breadcrumbs - source-faithful v0 page (DESIGN-LANGUAGE-44A) */
.breadcrumbs-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --bc-callout-color: var(--color-accent);
}

.breadcrumbs-source-page .breadcrumbs-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.breadcrumbs-source-page .breadcrumbs-anatomy-stage,
.breadcrumbs-source-page .breadcrumbs-layout-card,
.breadcrumbs-source-page .breadcrumbs-config-card,
.breadcrumbs-source-page .breadcrumbs-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.breadcrumbs-source-page .breadcrumbs-anatomy-stage {
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.breadcrumbs-source-page .breadcrumbs-anatomy-svg,
.breadcrumbs-source-page .breadcrumbs-spacing-svg {
  width: min(100%, 720px);
  height: auto;
  display: block;
}

.breadcrumbs-source-page .breadcrumbs-svg-stage {
  fill: var(--color-bg-panel);
  stroke: var(--color-border-subtle);
  stroke-width: 1;
}

.breadcrumbs-source-page .breadcrumbs-svg-item,
.breadcrumbs-source-page .breadcrumbs-svg-current,
.breadcrumbs-source-page .breadcrumbs-svg-separator {
  fill: var(--color-link);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
  dominant-baseline: alphabetic;
}

.breadcrumbs-source-page .breadcrumbs-svg-current {
  fill: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.breadcrumbs-source-page .breadcrumbs-svg-baseline {
  stroke: var(--color-border-strong);
  stroke-dasharray: 4 4;
}

.breadcrumbs-source-page .breadcrumbs-svg-spacing {
  fill: rgba(255, 184, 77, .34);
}

.breadcrumbs-source-page .breadcrumbs-svg-measure {
  fill: var(--bc-callout-color);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
}

.breadcrumbs-source-page .breadcrumbs-svg-pointer {
  stroke: var(--bc-callout-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.breadcrumbs-source-page .breadcrumbs-svg-callout-number {
  fill: var(--bc-callout-color);
}

.breadcrumbs-source-page .breadcrumbs-svg-callout-digit {
  fill: var(--color-bg-surface);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
}

.breadcrumbs-source-page .breadcrumbs-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--bc-callout-color);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.breadcrumbs-source-page .breadcrumbs-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.breadcrumbs-source-page .breadcrumbs-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.breadcrumbs-source-page .breadcrumbs-anatomy-key strong,
.breadcrumbs-source-page .breadcrumbs-anatomy-key span span {
  display: block;
}

.breadcrumbs-source-page .breadcrumbs-anatomy-key strong {
  color: var(--color-text-primary);
}

.breadcrumbs-source-page .breadcrumbs-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.breadcrumbs-source-page .breadcrumbs-key-num {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--color-accent);
  border-radius: 999px;
  color: var(--color-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
}

.breadcrumbs-source-page .breadcrumbs-card-grid,
.breadcrumbs-source-page .breadcrumbs-layout-grid {
  display: grid;
  gap: var(--lds-card-gap-standard);
}

.breadcrumbs-source-page .breadcrumbs-card-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.breadcrumbs-source-page .breadcrumbs-card-grid.compact,
.breadcrumbs-source-page .breadcrumbs-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.breadcrumbs-source-page .breadcrumbs-config-card,
.breadcrumbs-source-page .breadcrumbs-layout-card,
.breadcrumbs-source-page .breadcrumbs-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
}

.breadcrumbs-source-page .breadcrumbs-config-card h3,
.breadcrumbs-source-page .breadcrumbs-layout-card h3,
.breadcrumbs-source-page .breadcrumbs-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.breadcrumbs-source-page .breadcrumbs-config-demo,
.breadcrumbs-source-page .breadcrumbs-measure-stage,
.breadcrumbs-source-page .breadcrumbs-wrap-stage {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
  overflow-x: auto;
  overflow-y: hidden;
}

.breadcrumbs-source-page .breadcrumbs-wrap-stage {
  justify-items: start;
}

.breadcrumbs-source-page .breadcrumbs-trail {
  max-width: 100%;
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  line-height: 1.45;
}

.breadcrumbs-source-page .breadcrumbs-trail ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: var(--lds-space-1);
  column-gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.breadcrumbs-source-page .breadcrumbs-trail li {
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  min-width: 0;
}

.breadcrumbs-source-page .breadcrumb-link,
.breadcrumbs-source-page .breadcrumb-current {
  min-width: 0;
  overflow-wrap: anywhere;
}

.breadcrumbs-source-page .breadcrumb-current {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-bold);
}

.breadcrumbs-source-page .breadcrumb-separator {
  flex: 0 0 auto;
  margin: 0 var(--lds-space-1);
  color: var(--color-link);
  font-weight: var(--font-weight-semibold);
}

.breadcrumbs-source-page .breadcrumbs-trail.surface {
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.breadcrumbs-source-page .breadcrumbs-state-surface {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.breadcrumbs-source-page .breadcrumbs-state-surface .tl-state-card {
  min-height: 132px;
  align-content: center;
  overflow: hidden;
}

.breadcrumbs-source-page .breadcrumbs-state-surface.dark .breadcrumb-current {
  color: #F4F6F9;
}

.breadcrumbs-source-page .breadcrumbs-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.breadcrumbs-source-page .breadcrumbs-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.breadcrumbs-source-page .breadcrumbs-info-mark {
  width: 8px;
  height: 8px;
  display: inline-block;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg-surface);
}

.breadcrumbs-source-page .breadcrumbs-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .breadcrumbs-source-page .breadcrumbs-card-grid,
  .breadcrumbs-source-page .breadcrumbs-card-grid.compact,
  .breadcrumbs-source-page .breadcrumbs-layout-grid,
  .breadcrumbs-source-page .breadcrumbs-state-surface {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .breadcrumbs-source-page .breadcrumbs-anatomy-grid,
  .breadcrumbs-source-page .breadcrumbs-card-grid,
  .breadcrumbs-source-page .breadcrumbs-card-grid.compact,
  .breadcrumbs-source-page .breadcrumbs-layout-grid,
  .breadcrumbs-source-page .breadcrumbs-state-surface {
    grid-template-columns: 1fr;
  }

  .breadcrumbs-source-page .breadcrumbs-anatomy-stage,
  .breadcrumbs-source-page .breadcrumbs-config-card,
  .breadcrumbs-source-page .breadcrumbs-layout-card,
  .breadcrumbs-source-page .breadcrumbs-rule-card,
  .breadcrumbs-source-page .breadcrumbs-config-demo,
  .breadcrumbs-source-page .breadcrumbs-measure-stage,
  .breadcrumbs-source-page .breadcrumbs-wrap-stage {
    padding: var(--lds-space-3);
  }
}

/* Line - source-ready v0 page (DESIGN-LANGUAGE-45A) */
.line-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --line-subtle: var(--color-border-subtle);
  --line-strong: var(--color-border-strong);
  --line-custom: #9CD0E5;
  --line-thickness: 1px;
}

.line-source-page .line-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(240px, 0.65fr);
  gap: var(--lds-space-4);
  align-items: center;
}

.line-source-page .line-anatomy-stage,
.line-source-page .line-config-card,
.line-source-page .line-layout-card,
.line-source-page .line-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.line-source-page .line-anatomy-stage {
  padding: var(--lds-space-4);
  min-width: 0;
}

.line-source-page .line-anatomy-svg,
.line-source-page .line-spacing-svg {
  display: block;
  width: 100%;
  height: auto;
}

.line-source-page .line-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.line-source-page .line-svg-line {
  stroke: var(--line-subtle);
  stroke-width: var(--line-thickness);
  vector-effect: non-scaling-stroke;
}

.line-source-page .line-svg-measure {
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.line-source-page .line-svg-pointer {
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.line-source-page .line-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.line-source-page .line-svg-callout-number {
  fill: var(--color-accent);
}

.line-source-page .line-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.line-source-page .line-svg-label,
.line-source-page .line-svg-content {
  fill: var(--color-text-secondary);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.line-source-page .line-svg-label {
  text-anchor: middle;
}

.line-source-page .line-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 74%, transparent);
}

.line-source-page .line-svg-note {
  fill: var(--color-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.line-source-page .line-anatomy-key {
  display: grid;
  gap: var(--lds-space-3);
}

.line-source-page .line-key-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lds-space-2);
  align-items: start;
}

.line-source-page .line-key-item p {
  margin: var(--lds-space-1) 0 0;
  color: var(--color-text-secondary);
}

.line-source-page .line-key-num {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.line-source-page .line-card-grid,
.line-source-page .line-layout-grid,
.line-source-page .line-state-surface {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.line-source-page .line-card-grid.compact,
.line-source-page .line-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.line-source-page .line-config-card,
.line-source-page .line-layout-card,
.line-source-page .line-rule-card,
.line-source-page .line-state-card {
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.line-source-page .line-config-card h3,
.line-source-page .line-layout-card h3,
.line-source-page .line-rule-card h3 {
  margin: 0 0 var(--lds-space-4);
}

.line-source-page .line-config-demo {
  display: grid;
  place-items: center;
  min-height: 104px;
  margin-bottom: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.line-source-page .line-config-stack {
  display: grid;
  width: 100%;
  gap: var(--lds-space-4);
}

.line-source-page .line-example {
  display: block;
  width: 100%;
  min-width: 48px;
  height: var(--line-thickness);
  background: var(--line-subtle);
}

.line-source-page .line-example.strong {
  background: var(--line-strong);
}

.line-source-page .line-example.custom {
  background: var(--line-custom);
}

.line-source-page .line-example.dark {
  background: #4A5563;
}

.line-source-page .line-example.strong.dark {
  background: #D7DEE8;
}

.line-source-page .line-example.custom.dark {
  background: #9CD0E5;
}

.line-source-page .line-example.vertical {
  width: var(--line-thickness);
  min-width: 0;
  height: 72px;
}

.line-source-page .line-orientation-demo {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: minmax(80px, 1fr) auto;
  gap: var(--lds-space-5);
  align-items: center;
}

.line-source-page .line-surface-pair {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.line-source-page .line-surface-demo {
  display: grid;
  gap: var(--lds-space-3);
  align-content: center;
  min-height: 84px;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-sm);
}

.line-source-page .line-surface-demo.light {
  background: var(--color-bg-surface);
}

.line-source-page .line-surface-demo.dark,
.line-source-page .line-state-surface.dark {
  color: #F4F6F9;
  background: #080C11;
}

.line-source-page .line-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.line-source-page .line-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.line-source-page .line-info-icon {
  width: 16px;
  height: 16px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--color-accent);
  border-radius: 50%;
  color: var(--color-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.line-source-page .line-content-demo {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-surface);
}

.line-source-page .line-content-demo p {
  margin: 0;
  color: var(--color-text-secondary);
}

.line-source-page .line-state-surface {
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-inset);
}

.line-source-page .line-state-card {
  display: grid;
  gap: var(--lds-space-4);
  align-content: center;
  min-height: 116px;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-panel);
}

.line-source-page .line-state-card > span {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.line-source-page .line-state-surface.dark .line-state-card {
  border-color: #27303B;
  background: #20252D;
}

.line-source-page .line-state-surface.dark .line-state-card > span {
  color: #C8D0DA;
}

@media (max-width: 920px) {
  .line-source-page .line-anatomy-grid,
  .line-source-page .line-card-grid,
  .line-source-page .line-layout-grid,
  .line-source-page .line-state-surface {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .line-source-page .line-surface-pair {
    grid-template-columns: 1fr;
  }

  .line-source-page .line-anatomy-stage,
  .line-source-page .line-config-demo,
  .line-source-page .line-state-surface {
    padding: var(--lds-space-3);
  }
}

/* Checkbox - source-faithful v0 page (DESIGN-LANGUAGE-45A) */
.checkbox-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --checkbox-box: 20px;
  --checkbox-hit: 44px;
  --checkbox-radius: var(--lds-radius-sm);
  --checkbox-accent: var(--color-accent);
  --checkbox-error: var(--color-danger);
}

.checkbox-source-page .checkbox-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.checkbox-source-page .checkbox-anatomy-stage,
.checkbox-source-page .checkbox-config-card,
.checkbox-source-page .checkbox-layout-card,
.checkbox-source-page .checkbox-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.checkbox-source-page .checkbox-anatomy-stage {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.checkbox-source-page .checkbox-anatomy-svg,
.checkbox-source-page .checkbox-spacing-svg {
  width: min(100%, 720px);
  height: auto;
  display: block;
}

.checkbox-source-page .checkbox-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.checkbox-source-page .checkbox-svg-hit,
.checkbox-source-page .checkbox-svg-label-hit {
  fill: transparent;
  stroke: var(--checkbox-accent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.checkbox-source-page .checkbox-svg-label-hit {
  fill: color-mix(in srgb, var(--color-focus-ring) 8%, transparent);
}

.checkbox-source-page .checkbox-svg-box {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.checkbox-source-page .checkbox-svg-label {
  fill: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.checkbox-source-page .checkbox-svg-sublabel {
  fill: var(--color-text-secondary);
  font-size: 14px;
}

.checkbox-source-page .checkbox-svg-error {
  fill: var(--checkbox-error);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.checkbox-source-page .checkbox-svg-pointer,
.checkbox-source-page .checkbox-svg-measure-line {
  stroke: var(--checkbox-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.checkbox-source-page .checkbox-svg-callout-number {
  fill: var(--checkbox-accent);
}

.checkbox-source-page .checkbox-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.checkbox-source-page .checkbox-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--checkbox-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.checkbox-source-page .checkbox-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 74%, transparent);
}

.checkbox-source-page .checkbox-svg-measure {
  fill: var(--checkbox-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.checkbox-source-page .checkbox-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.checkbox-source-page .checkbox-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.checkbox-source-page .checkbox-anatomy-key strong,
.checkbox-source-page .checkbox-anatomy-key span span {
  display: block;
}

.checkbox-source-page .checkbox-anatomy-key strong {
  color: var(--color-text-primary);
}

.checkbox-source-page .checkbox-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.checkbox-source-page .checkbox-key-num,
.checkbox-source-page .checkbox-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--checkbox-accent);
  border-radius: 50%;
  color: var(--checkbox-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.checkbox-source-page .checkbox-info-icon::before,
.checkbox-source-page .checkbox-info-icon::after {
  content: "";
  display: block;
  background: currentColor;
  border-radius: 999px;
}

.checkbox-source-page .checkbox-info-icon::before {
  width: 2px;
  height: 7px;
  align-self: end;
  justify-self: center;
  margin-bottom: 3px;
}

.checkbox-source-page .checkbox-info-icon::after {
  width: 2px;
  height: 2px;
  align-self: start;
  justify-self: center;
  margin-top: 3px;
}

.checkbox-source-page .checkbox-card-grid,
.checkbox-source-page .checkbox-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.checkbox-source-page .checkbox-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.checkbox-source-page .checkbox-config-card,
.checkbox-source-page .checkbox-layout-card,
.checkbox-source-page .checkbox-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.checkbox-source-page .checkbox-config-card h3,
.checkbox-source-page .checkbox-layout-card h3,
.checkbox-source-page .checkbox-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.checkbox-source-page .checkbox-config-demo {
  min-height: 132px;
  display: grid;
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.checkbox-source-page .checkbox-item {
  display: grid;
  grid-template-columns: var(--checkbox-hit) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--lds-space-1);
  min-width: 0;
  color: var(--color-text-primary);
  cursor: pointer;
}

.checkbox-source-page .checkbox-control {
  position: relative;
  width: var(--checkbox-hit);
  height: var(--checkbox-hit);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.checkbox-source-page .checkbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.checkbox-source-page .checkbox-box {
  width: var(--checkbox-box);
  height: var(--checkbox-box);
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: var(--checkbox-radius);
  background: transparent;
  color: var(--color-text-inverse);
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease, outline-color .14s ease;
}

.checkbox-source-page .checkbox-check {
  width: 16px;
  height: 16px;
  display: none;
}

.checkbox-source-page .checkbox-input:checked + .checkbox-box,
.checkbox-source-page .checkbox-item.is-checked .checkbox-box {
  border-color: var(--checkbox-accent);
  background: var(--checkbox-accent);
}

.checkbox-source-page .checkbox-input:checked + .checkbox-box .checkbox-check,
.checkbox-source-page .checkbox-item.is-checked .checkbox-check {
  display: block;
}

.checkbox-source-page .checkbox-item:hover .checkbox-box,
.checkbox-source-page .checkbox-item.state-hover .checkbox-box {
  outline: 1.5px solid var(--color-border-strong);
  outline-offset: 2px;
}

.checkbox-source-page .checkbox-item:active .checkbox-box {
  transform: scale(.96);
}

.checkbox-source-page .checkbox-input:focus-visible + .checkbox-box,
.checkbox-source-page .checkbox-item.state-focus .checkbox-box {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.checkbox-source-page .checkbox-item.is-disabled {
  cursor: not-allowed;
  opacity: .48;
}

.checkbox-source-page .checkbox-item.is-error .checkbox-box {
  border-color: var(--checkbox-error);
  background: color-mix(in srgb, var(--color-danger-bg) 72%, transparent);
}

.checkbox-source-page .checkbox-copy {
  display: grid;
  gap: var(--lds-space-1);
  padding-top: 10px;
  min-width: 0;
}

.checkbox-source-page .checkbox-label {
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 20px;
}

.checkbox-source-page .checkbox-sublabel {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.checkbox-source-page .checkbox-error {
  margin-top: var(--lds-space-1);
  color: var(--checkbox-error);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

.checkbox-source-page .checkbox-item.is-filled {
  padding: var(--lds-space-2);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.checkbox-source-page .checkbox-state-surface .tl-state-card {
  min-height: 160px;
  overflow: visible;
}

.checkbox-source-page .checkbox-state-surface.dark .checkbox-item,
.checkbox-source-page .checkbox-item.is-dark {
  color: #F4F6F9;
}

.checkbox-source-page .checkbox-state-surface.dark .checkbox-label,
.checkbox-source-page .checkbox-item.is-dark .checkbox-label {
  color: #F4F6F9;
}

.checkbox-source-page .checkbox-state-surface.dark .checkbox-sublabel,
.checkbox-source-page .checkbox-item.is-dark .checkbox-sublabel {
  color: #C8D0DA;
}

.checkbox-source-page .checkbox-state-surface.dark .checkbox-box,
.checkbox-source-page .checkbox-item.is-dark .checkbox-box {
  border-color: #D7DEE8;
}

.checkbox-source-page .checkbox-state-surface.dark .checkbox-item.is-error .checkbox-box,
.checkbox-source-page .checkbox-item.is-dark.is-error .checkbox-box {
  border-color: #FFB5B2;
  background: rgba(255, 59, 48, .18);
}

.checkbox-source-page .checkbox-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.checkbox-source-page .checkbox-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--checkbox-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.checkbox-source-page .checkbox-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .checkbox-source-page .checkbox-anatomy-grid,
  .checkbox-source-page .checkbox-card-grid,
  .checkbox-source-page .checkbox-card-grid.compact,
  .checkbox-source-page .checkbox-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .checkbox-source-page .checkbox-anatomy-stage,
  .checkbox-source-page .checkbox-config-card,
  .checkbox-source-page .checkbox-layout-card,
  .checkbox-source-page .checkbox-rule-card,
  .checkbox-source-page .checkbox-config-demo {
    padding: var(--lds-space-3);
  }

  .checkbox-source-page .checkbox-item {
    column-gap: 0;
  }
}

/* Radio - source-faithful v0 page (DESIGN-LANGUAGE-46A) */
.radio-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --radio-box: 20px;
  --radio-hit: 44px;
  --radio-accent: var(--color-accent);
  --radio-error: var(--color-danger);
}

.radio-source-page .radio-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.radio-source-page .radio-anatomy-stage,
.radio-source-page .radio-config-card,
.radio-source-page .radio-layout-card,
.radio-source-page .radio-rule-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.radio-source-page .radio-anatomy-stage {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.radio-source-page .radio-anatomy-svg,
.radio-source-page .radio-spacing-svg {
  width: min(100%, 720px);
  height: auto;
  display: block;
}

.radio-source-page .radio-svg-stage {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-subtle);
}

.radio-source-page .radio-svg-group {
  fill: var(--color-bg-panel);
  stroke: var(--color-border-subtle);
}

.radio-source-page .radio-svg-hit,
.radio-source-page .radio-svg-label-hit {
  fill: transparent;
  stroke: var(--radio-accent);
  stroke-width: 1;
  stroke-dasharray: 4 4;
  vector-effect: non-scaling-stroke;
}

.radio-source-page .radio-svg-label-hit {
  fill: color-mix(in srgb, var(--color-focus-ring) 8%, transparent);
}

.radio-source-page .radio-svg-dot {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-strong);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.radio-source-page .radio-svg-inner {
  fill: var(--radio-accent);
}

.radio-source-page .radio-svg-label {
  fill: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.radio-source-page .radio-svg-sublabel {
  fill: var(--color-text-secondary);
  font-size: 14px;
}

.radio-source-page .radio-svg-pointer,
.radio-source-page .radio-svg-measure-line {
  stroke: var(--radio-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.radio-source-page .radio-svg-callout-number {
  fill: var(--radio-accent);
}

.radio-source-page .radio-svg-callout-digit {
  fill: var(--color-text-inverse);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: central;
}

.radio-source-page .radio-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--radio-accent);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

.radio-source-page .radio-svg-space {
  fill: color-mix(in srgb, var(--color-warning-bg) 74%, transparent);
}

.radio-source-page .radio-svg-measure {
  fill: var(--radio-accent);
  font-size: 13px;
  font-weight: var(--font-weight-bold);
}

.radio-source-page .radio-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.radio-source-page .radio-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.radio-source-page .radio-anatomy-key strong,
.radio-source-page .radio-anatomy-key span span {
  display: block;
}

.radio-source-page .radio-anatomy-key strong {
  color: var(--color-text-primary);
}

.radio-source-page .radio-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.radio-source-page .radio-key-num,
.radio-source-page .radio-info-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--radio-accent);
  border-radius: 50%;
  color: var(--radio-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.radio-source-page .radio-info-icon::before,
.radio-source-page .radio-info-icon::after {
  content: "";
  display: block;
  background: currentColor;
  border-radius: 999px;
}

.radio-source-page .radio-info-icon::before {
  width: 2px;
  height: 7px;
  align-self: end;
  justify-self: center;
  margin-bottom: 3px;
}

.radio-source-page .radio-info-icon::after {
  width: 2px;
  height: 2px;
  align-self: start;
  justify-self: center;
  margin-top: 3px;
}

.radio-source-page .radio-card-grid,
.radio-source-page .radio-layout-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-card-gap-standard);
}

.radio-source-page .radio-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radio-source-page .radio-config-card,
.radio-source-page .radio-layout-card,
.radio-source-page .radio-rule-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
  min-width: 0;
}

.radio-source-page .radio-config-card h3,
.radio-source-page .radio-layout-card h3,
.radio-source-page .radio-rule-card h3 {
  margin: 0;
  font-size: 1rem;
}

.radio-source-page .radio-config-demo {
  min-height: 184px;
  display: grid;
  align-content: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
}

.radio-source-page .radio-group {
  display: grid;
  gap: var(--lds-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.radio-source-page .radio-group legend {
  margin: 0 0 var(--lds-space-3);
  padding: 0;
  color: var(--color-text-primary);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
}

.radio-source-page .radio-options {
  display: grid;
  gap: var(--lds-space-6);
}

.radio-source-page .radio-item {
  display: grid;
  grid-template-columns: var(--radio-hit) minmax(0, 1fr);
  align-items: start;
  column-gap: var(--lds-space-1);
  min-width: 0;
  color: var(--color-text-primary);
  cursor: pointer;
}

.radio-source-page .radio-control {
  position: relative;
  width: var(--radio-hit);
  height: var(--radio-hit);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}

.radio-source-page .radio-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

.radio-source-page .radio-dot {
  width: var(--radio-box);
  height: var(--radio-box);
  display: inline-grid;
  place-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 50%;
  background: transparent;
  transition: border-color .14s ease, background-color .14s ease, transform .14s ease, outline-color .14s ease;
}

.radio-source-page .radio-dot::after {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--radio-accent);
  opacity: 0;
}

.radio-source-page .radio-input:checked + .radio-dot {
  border-color: var(--radio-accent);
}

.radio-source-page .radio-input:checked + .radio-dot::after,
.radio-source-page .radio-item.is-selected .radio-dot::after {
  opacity: 1;
}

.radio-source-page .radio-item:hover .radio-dot,
.radio-source-page .radio-item.state-hover .radio-dot {
  outline: 1.5px solid var(--color-border-strong);
  outline-offset: 2px;
}

.radio-source-page .radio-item:active .radio-dot {
  transform: scale(.96);
}

.radio-source-page .radio-input:focus-visible + .radio-dot,
.radio-source-page .radio-item.state-focus .radio-dot {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 3px;
}

.radio-source-page .radio-item.is-disabled {
  cursor: not-allowed;
  opacity: .48;
}

.radio-source-page .radio-item.is-error .radio-dot,
.radio-source-page .radio-group.is-error-group .radio-dot {
  border-color: var(--radio-error);
  background: color-mix(in srgb, var(--color-danger-bg) 72%, transparent);
}

.radio-source-page .radio-copy {
  display: grid;
  gap: var(--lds-space-1);
  padding-top: 10px;
  min-width: 0;
}

.radio-source-page .radio-label {
  color: var(--color-text-primary);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  line-height: 20px;
}

.radio-source-page .radio-sublabel {
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 20px;
}

.radio-source-page .radio-error {
  margin: 0;
  color: var(--radio-error);
  font-size: 14px;
  font-weight: var(--font-weight-semibold);
  line-height: 20px;
}

.radio-source-page .radio-group.is-filled {
  padding: var(--lds-space-3);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.radio-source-page .radio-state-surface .tl-state-card {
  min-height: 220px;
  overflow: visible;
}

.radio-source-page .radio-state-surface.dark .radio-group legend,
.radio-source-page .radio-group.is-dark legend,
.radio-source-page .radio-state-surface.dark .radio-label,
.radio-source-page .radio-item.is-dark .radio-label {
  color: #F4F6F9;
}

.radio-source-page .radio-state-surface.dark .radio-sublabel,
.radio-source-page .radio-item.is-dark .radio-sublabel {
  color: #C8D0DA;
}

.radio-source-page .radio-state-surface.dark .radio-dot,
.radio-source-page .radio-item.is-dark .radio-dot {
  border-color: #D7DEE8;
}

.radio-source-page .radio-state-surface.dark .radio-item.is-error .radio-dot,
.radio-source-page .radio-state-surface.dark .radio-group.is-error-group .radio-dot,
.radio-source-page .radio-item.is-dark.is-error .radio-dot {
  border-color: #FFB5B2;
  background: rgba(255, 59, 48, .18);
}

.radio-source-page .radio-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.radio-source-page .radio-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--radio-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.radio-source-page .radio-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .radio-source-page .radio-anatomy-grid,
  .radio-source-page .radio-card-grid,
  .radio-source-page .radio-card-grid.compact,
  .radio-source-page .radio-layout-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .radio-source-page .radio-anatomy-stage,
  .radio-source-page .radio-config-card,
  .radio-source-page .radio-layout-card,
  .radio-source-page .radio-rule-card,
  .radio-source-page .radio-config-demo {
    padding: var(--lds-space-3);
  }

  .radio-source-page .radio-item {
    column-gap: 0;
  }
}

/* Pagination - source-faithful v0 page (DESIGN-LANGUAGE-43A) */
.pagination-source-page {
  display: grid;
  gap: var(--lds-section-gap-standard);
  --pg-accent: var(--color-accent);
  --pg-text: var(--color-text-primary);
  --pg-muted: var(--color-text-secondary);
  --pg-surface: var(--color-bg-surface);
  --pg-inset: var(--color-bg-inset);
  --pg-border: var(--color-border-subtle);
  --pg-border-strong: var(--color-border-strong);
  --ib-button-size: 44px;
  --ib-icon-size: 24px;
  --ib-hit-size: 44px;
  --ib-radius: var(--lds-radius-pill);
  --ib-color: var(--color-text-primary);
  --ib-bg: transparent;
  --ib-border: transparent;
  --ib-hover-bg: var(--color-bg-inset);
  --ib-hover-border: var(--color-border-standard);
  --ib-selected-bg: var(--color-selected-bg);
  --ib-selected-border: var(--color-selected-border);
  --ib-selected-color: var(--color-selected-text);
}

.pagination-source-page .pagination-anatomy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-5);
  align-items: stretch;
}

.pagination-source-page .pagination-anatomy-stage,
.pagination-source-page .pagination-layout-card,
.pagination-source-page .pagination-config-card,
.pagination-source-page .pagination-state-card {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--color-bg-surface);
}

.pagination-source-page .pagination-anatomy-stage {
  min-height: 300px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  overflow: hidden;
}

.pagination-source-page .pagination-anatomy-svg {
  width: min(100%, 720px);
  height: auto;
  display: block;
}

.pagination-source-page .pagination-svg-surface,
.pagination-source-page .pagination-svg-control,
.pagination-source-page .pagination-svg-page {
  fill: var(--color-bg-surface);
  stroke: var(--color-border-standard);
  stroke-width: 1;
}

.pagination-source-page .pagination-svg-page-current {
  fill: var(--color-selected-bg);
  stroke: var(--color-selected-border);
  stroke-width: 1;
}

.pagination-source-page .pagination-svg-label,
.pagination-source-page .pagination-svg-count,
.pagination-source-page .pagination-svg-page-text {
  fill: var(--color-text-primary);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

.pagination-source-page .pagination-svg-page-current-text {
  fill: var(--color-selected-text);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
}

.pagination-source-page .pagination-svg-chevron {
  fill: none;
  stroke: var(--color-text-primary);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pagination-source-page .pagination-svg-pointer {
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pagination-source-page .pagination-svg-callout-number {
  fill: var(--color-accent);
}

.pagination-source-page .pagination-svg-callout-digit {
  fill: var(--color-bg-surface);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
}

.pagination-source-page .pagination-svg-pointer-dot {
  fill: var(--color-bg-surface);
  stroke: var(--color-accent);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.pagination-source-page .pagination-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.pagination-source-page .pagination-anatomy-key p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.pagination-source-page .pagination-anatomy-key strong,
.pagination-source-page .pagination-anatomy-key span span {
  display: block;
}

.pagination-source-page .pagination-anatomy-key strong {
  color: var(--color-text-primary);
}

.pagination-source-page .pagination-anatomy-key span span {
  margin-top: var(--lds-space-1);
  color: var(--color-text-secondary);
}

.pagination-source-page .pagination-card-grid,
.pagination-source-page .pagination-state-grid,
.pagination-source-page .pagination-layout-grid {
  display: grid;
  gap: var(--lds-card-gap-standard);
}

.pagination-source-page .pagination-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pagination-source-page .pagination-state-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pagination-source-page .pagination-layout-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pagination-source-page .pagination-config-card,
.pagination-source-page .pagination-state-card,
.pagination-source-page .pagination-layout-card {
  display: grid;
  gap: var(--lds-space-4);
  padding: var(--lds-card-padding-standard);
}

.pagination-source-page .pagination-config-card h3,
.pagination-source-page .pagination-layout-card h3 {
  margin: 0;
  font-size: 1rem;
}

.pagination-source-page .pagination-demo-slot,
.pagination-source-page .pagination-measure-stage,
.pagination-source-page .pagination-hit-stage {
  min-height: 112px;
  display: grid;
  place-items: center;
  padding: var(--lds-space-4);
  border: 1px solid var(--color-border-subtle);
  background: var(--color-bg-panel);
  overflow-x: auto;
  overflow-y: hidden;
}

.pagination-source-page .pagination-nav {
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-2);
  color: var(--pg-text);
}

.pagination-source-page .pagination-nav.kind-expanded {
  flex-wrap: nowrap;
  width: max-content;
  min-width: 0;
}

.pagination-source-page .pagination-pages {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-1);
  min-width: 0;
}

.pagination-source-page .pagination-nav.kind-expanded .pagination-pages {
  flex-wrap: nowrap;
}

.pagination-source-page .pagination-page {
  min-width: 44px;
  min-height: 44px;
  display: inline-grid;
  place-items: center;
  padding: 0 var(--lds-space-2);
  border: 1px solid transparent;
  border-radius: var(--lds-radius-pill);
  color: var(--pg-text);
  background: transparent;
  font: inherit;
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}

.pagination-source-page .pagination-page.is-current {
  border-color: var(--color-selected-border);
  color: var(--color-selected-text);
  background: var(--color-selected-bg);
  font-weight: var(--font-weight-bold);
  box-shadow: inset 0 -3px 0 var(--color-accent);
  cursor: default;
}

.pagination-source-page .pagination-page:hover,
.pagination-source-page .pagination-nav.state-hover .pagination-page:not(.is-current) {
  border-color: var(--pg-border);
  background: var(--pg-inset);
}

.pagination-source-page .pagination-nav.state-active .pagination-page:not(.is-current) {
  transform: scale(.96);
}

.pagination-source-page .pagination-nav.state-focus .pagination-page:not(.is-current):first-of-type {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

.pagination-source-page .pagination-compact-count {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: var(--lds-space-1);
  padding: 0 var(--lds-space-2);
  color: var(--pg-text);
  font-weight: var(--font-weight-semibold);
}

.pagination-source-page .pagination-compact-count [aria-current="page"] {
  min-width: 28px;
  min-height: 28px;
  display: inline-grid;
  place-items: center;
  padding: 0 var(--lds-space-2);
  border: 1px solid var(--color-accent);
  border-radius: var(--lds-radius-pill);
  color: var(--color-selected-text);
  background: var(--color-selected-bg);
  font-weight: var(--font-weight-bold);
  box-shadow: none;
}

.pagination-source-page .pagination-separator,
.pagination-source-page .pagination-ellipsis {
  color: var(--pg-muted);
}

.pagination-source-page .pagination-ellipsis {
  min-width: 32px;
  text-align: center;
}

.pagination-source-page .pagination-icon-control.small {
  --ib-button-size: 32px;
  --ib-icon-size: 18px;
}

.pagination-source-page .pagination-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.pagination-source-page .pagination-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--lds-space-2);
  margin: 0;
  padding: var(--lds-space-2) var(--lds-space-3);
  border-left: 3px solid var(--color-accent);
  background: var(--color-bg-inset);
  color: var(--color-text-secondary);
}

.pagination-source-page .pagination-info-mark {
  width: 8px;
  height: 8px;
  display: inline-block;
  border: 2px solid var(--color-accent);
  border-radius: 50%;
  background: var(--color-bg-surface);
}

.pagination-source-page .pagination-measure-line {
  width: min(100%, 360px);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--lds-space-2);
  color: var(--color-accent);
  font-size: .82rem;
  font-weight: var(--font-weight-bold);
}

.pagination-source-page .pagination-measure-line span {
  height: 1px;
  background: currentColor;
}

.pagination-source-page .pagination-hit-stage {
  position: relative;
  min-height: 180px;
}

.pagination-source-page .pagination-hit-box {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px dashed var(--color-accent);
}

.pagination-source-page .pagination-hit-note,
.pagination-source-page .pagination-height-note {
  color: var(--color-accent);
  font-size: .82rem;
  font-weight: var(--font-weight-bold);
}

.pagination-source-page .pagination-hit-note {
  margin-top: var(--lds-space-2);
}

.pagination-source-page .pagination-height-note {
  color: var(--color-text-secondary);
}

.pagination-source-page .pagination-state-card > span {
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-bold);
}

.pagination-source-page .pagination-state-card {
  min-height: 150px;
  align-content: center;
  overflow-x: auto;
  overflow-y: hidden;
}

.pagination-source-page .pagination-state-surface.dark {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: #0A0C10;
}

.pagination-source-page .pagination-state-surface.dark .pagination-state-card {
  border-color: #2C333E;
  color: #F4F6F9;
  background: #1F232B;
  --pg-text: #F4F6F9;
  --pg-muted: #CAD1DC;
  --pg-inset: #262C36;
  --pg-border: #4B5563;
  --pg-border-strong: #9AA4B2;
  --ib-color: #F4F6F9;
  --ib-bg: transparent;
  --ib-border: transparent;
  --ib-hover-bg: #262C36;
  --ib-hover-border: #4B5563;
}

.pagination-source-page .pagination-state-surface.dark .pagination-state-card > span {
  color: #CAD1DC;
}

.pagination-source-page .pagination-state-surface.dark .pagination-page.is-current {
  border-color: #7DB8FF;
  color: #07111F;
  background: #D9E9FF;
  box-shadow: inset 0 -3px 0 #2E86FF;
}

.pagination-source-page .pagination-state-surface.dark .pagination-compact-count [aria-current="page"] {
  border: 1px solid #7DB8FF;
  color: #F4F6F9;
  background: #102A43;
  box-shadow: none;
}

.pagination-source-page .pagination-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 920px) {
  .pagination-source-page .pagination-state-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .pagination-source-page .pagination-anatomy-grid,
  .pagination-source-page .pagination-card-grid,
  .pagination-source-page .pagination-layout-grid,
  .pagination-source-page .pagination-state-grid {
    grid-template-columns: 1fr;
  }

  .pagination-source-page .pagination-anatomy-stage,
  .pagination-source-page .pagination-demo-slot,
  .pagination-source-page .pagination-measure-stage,
  .pagination-source-page .pagination-hit-stage,
  .pagination-source-page .pagination-config-card,
  .pagination-source-page .pagination-state-card,
  .pagination-source-page .pagination-layout-card {
    padding: var(--lds-space-3);
  }

  .pagination-source-page .pagination-nav {
    justify-content: center;
  }
}

/* Footnote component styles */
.footnote-source-page {
  --fn-surface: var(--color-bg-surface);
  --fn-inset: var(--color-bg-inset);
  --fn-border: var(--color-border-subtle);
  --fn-border-strong: var(--color-border-strong);
  --fn-text: var(--color-text-primary);
  --fn-muted: var(--color-text-secondary);
  --fn-accent: var(--color-accent);
}

.footnote-source-page .footnote-anatomy-grid,
.footnote-source-page .footnote-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-4);
  align-items: stretch;
}

.footnote-source-page .footnote-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.footnote-source-page .footnote-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.footnote-source-page .footnote-anatomy-stage,
.footnote-source-page .footnote-config-card,
.footnote-source-page .footnote-layout-card,
.footnote-source-page .footnote-rule-card {
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--fn-border);
  border-radius: var(--lds-radius-md);
  background: var(--fn-surface);
}

.footnote-source-page .footnote-anatomy-stage,
.footnote-source-page .footnote-layout-card {
  display: grid;
  gap: var(--lds-space-3);
  place-items: center;
}

.footnote-source-page .footnote-config-card,
.footnote-source-page .footnote-rule-card {
  display: grid;
  gap: var(--lds-space-3);
}

.footnote-source-page .footnote-config-card h3,
.footnote-source-page .footnote-layout-card h3,
.footnote-source-page .footnote-rule-card h3 {
  margin: 0;
  color: var(--fn-text);
  font-size: .95rem;
}

.footnote-source-page .footnote-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.footnote-source-page .footnote-anatomy-key p,
.footnote-source-page .footnote-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.footnote-source-page .footnote-anatomy-key strong,
.footnote-source-page .footnote-anatomy-key span span {
  display: block;
}

.footnote-source-page .footnote-anatomy-key strong {
  color: var(--fn-text);
}

.footnote-source-page .footnote-anatomy-key span span,
.footnote-source-page .footnote-info-list,
.footnote-source-page .footnote-rule-card li {
  color: var(--fn-muted);
}

.footnote-source-page .footnote-key-num {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--fn-accent);
  border-radius: 50%;
  color: var(--fn-accent);
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
}

.footnote-source-page .footnote-demo {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-3);
  color: var(--fn-text);
}

.footnote-source-page .footnote-demo.is-dark {
  --fn-surface: #1F232B;
  --fn-inset: #151922;
  --fn-border: #384150;
  --fn-border-strong: #AAB4C2;
  --fn-text: #F4F6F9;
  --fn-muted: #CAD1DC;
  --fn-accent: #7DB8FF;
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: var(--fn-inset);
}

.footnote-source-page .footnote-demo-copy {
  margin: 0;
  color: var(--fn-text);
  line-height: 1.55;
}

.footnote-source-page .footnote-inline-marker {
  margin-left: 2px;
  font-size: .72em;
  line-height: 0;
  vertical-align: super;
}

.footnote-source-page .footnote-list {
  display: grid;
  gap: var(--lds-space-3);
  margin: 0;
  padding: var(--lds-space-3);
  border: 1px solid var(--fn-border);
  border-radius: var(--lds-radius-sm);
  background: var(--fn-inset);
  list-style: none;
}

.footnote-source-page .footnote-item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--lds-space-1);
  color: var(--fn-text);
}

.footnote-source-page .footnote-list-marker {
  min-width: 18px;
  text-align: right;
  font-weight: var(--font-weight-bold);
}

.footnote-source-page .footnote-text {
  color: var(--fn-muted);
  line-height: 1.45;
}

.footnote-source-page .footnote-tooltip-trigger {
  --ib-button-size: 28px;
  --ib-icon-size: 16px;
  align-self: center;
}

.footnote-source-page .footnote-tooltip-popover {
  position: absolute;
  z-index: 1;
  right: 0;
  bottom: calc(100% + var(--lds-space-2));
  width: min(220px, 70vw);
  padding: var(--lds-space-2) var(--lds-space-3);
  border: 1px solid var(--fn-border-strong);
  border-radius: var(--lds-radius-sm);
  background: var(--fn-surface);
  color: var(--fn-text);
  font-size: .82rem;
  box-shadow: var(--shadow-sm);
}

.footnote-source-page .footnote-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.footnote-source-page .footnote-info-mark {
  width: 8px;
  height: 8px;
  margin-top: .35em;
  border: 2px solid var(--fn-accent);
  border-radius: 50%;
  background: var(--fn-surface);
}

.footnote-source-page .footnote-anatomy-svg,
.footnote-source-page .footnote-spacing-svg {
  width: 100%;
  height: auto;
  max-width: 760px;
}

.footnote-source-page .footnote-svg-stage {
  fill: var(--fn-inset);
  stroke: var(--fn-border);
}

.footnote-source-page .footnote-svg-group {
  fill: var(--fn-surface);
  stroke: var(--fn-border);
}

.footnote-source-page .footnote-svg-body,
.footnote-source-page .footnote-svg-note {
  fill: var(--fn-text);
  font-size: 18px;
  font-weight: var(--font-weight-semibold);
}

.footnote-source-page .footnote-svg-marker,
.footnote-source-page .footnote-svg-inline,
.footnote-source-page .footnote-svg-tooltip-text {
  fill: var(--fn-accent);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: middle;
}

.footnote-source-page .footnote-svg-tooltip {
  fill: var(--fn-surface);
  stroke: var(--fn-accent);
  stroke-width: 2;
}

.footnote-source-page .footnote-svg-pointer {
  stroke: var(--fn-accent);
  stroke-width: 2;
}

.footnote-source-page .footnote-svg-callout-number {
  fill: var(--fn-accent);
}

.footnote-source-page .footnote-svg-callout-digit {
  fill: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: middle;
}

.footnote-source-page .footnote-svg-pointer-dot {
  fill: var(--fn-surface);
  stroke: var(--fn-accent);
  stroke-width: 2;
}

.footnote-source-page .footnote-svg-gap {
  fill: color-mix(in srgb, var(--fn-accent) 20%, transparent);
  stroke: var(--fn-accent);
}

.footnote-source-page .footnote-svg-measure {
  stroke: var(--fn-border-strong);
  stroke-width: 1;
  stroke-dasharray: 5 5;
}

.footnote-source-page .footnote-svg-measure-label {
  fill: var(--fn-muted);
  font-size: 14px;
  text-anchor: middle;
}

.footnote-source-page .footnote-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 860px) {
  .footnote-source-page .footnote-anatomy-grid,
  .footnote-source-page .footnote-layout-grid,
  .footnote-source-page .footnote-card-grid,
  .footnote-source-page .footnote-card-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .footnote-source-page .footnote-anatomy-stage,
  .footnote-source-page .footnote-config-card,
  .footnote-source-page .footnote-layout-card,
  .footnote-source-page .footnote-rule-card {
    padding: var(--lds-space-3);
  }

  .footnote-source-page .footnote-item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .footnote-source-page .footnote-tooltip-trigger {
    grid-column: 2;
    justify-self: start;
  }

  .footnote-source-page .footnote-tooltip-popover {
    left: 0;
    right: auto;
  }
}

/* Accordion component styles */
.accordion-source-page {
  --acc-surface: var(--color-bg-surface);
  --acc-inset: var(--color-bg-inset);
  --acc-border: var(--color-border-subtle);
  --acc-border-strong: var(--color-border-strong);
  --acc-text: var(--color-text-primary);
  --acc-muted: var(--color-text-secondary);
  --acc-accent: var(--color-accent);
}

.accordion-source-page .accordion-anatomy-grid,
.accordion-source-page .accordion-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-4);
}

.accordion-source-page .accordion-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.accordion-source-page .accordion-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.accordion-source-page .accordion-anatomy-stage,
.accordion-source-page .accordion-config-card,
.accordion-source-page .accordion-layout-card,
.accordion-source-page .accordion-rule-card {
  min-width: 0;
  padding: var(--lds-space-4);
  border: 1px solid var(--acc-border);
  border-radius: var(--lds-radius-md);
  background: var(--acc-surface);
}

.accordion-source-page .accordion-anatomy-stage,
.accordion-source-page .accordion-layout-card,
.accordion-source-page .accordion-config-card,
.accordion-source-page .accordion-rule-card {
  display: grid;
  gap: var(--lds-space-3);
}

.accordion-source-page h3 {
  margin: 0;
  color: var(--acc-text);
  font-size: .95rem;
}

.accordion-source-page .accordion-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.accordion-source-page .accordion-anatomy-key p,
.accordion-source-page .accordion-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.accordion-source-page .accordion-anatomy-key strong,
.accordion-source-page .accordion-anatomy-key span span {
  display: block;
}

.accordion-source-page .accordion-anatomy-key strong {
  color: var(--acc-text);
}

.accordion-source-page .accordion-anatomy-key span span,
.accordion-source-page .accordion-info-list,
.accordion-source-page .accordion-rule-card li {
  color: var(--acc-muted);
}

.accordion-source-page .accordion-key-num {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--acc-accent);
  border-radius: 50%;
  color: var(--acc-accent);
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
}

.accordion-source-page .accordion-demo,
.accordion-source-page .accordion-demo-group {
  width: 100%;
  min-width: 0;
  color: var(--acc-text);
}

.accordion-source-page .accordion-demo.is-dark,
.accordion-source-page .accordion-demo-group.is-dark,
.accordion-source-page .accordion-state-surface.dark {
  --acc-surface: #1F232B;
  --acc-inset: #151922;
  --acc-border: #384150;
  --acc-border-strong: #AAB4C2;
  --acc-text: #F4F6F9;
  --acc-muted: #CAD1DC;
  --acc-accent: #7DB8FF;
}

.accordion-source-page .accordion-demo.is-dark,
.accordion-source-page .accordion-demo-group.is-dark {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: var(--acc-inset);
}

.accordion-source-page .accordion-top-line,
.accordion-source-page .accordion-bottom-line,
.accordion-source-page .accordion-group-item {
  border-top: 1px solid var(--acc-border);
}

.accordion-source-page .accordion-bottom-line {
  border-bottom: 1px solid var(--acc-border);
  border-top: 0;
}

.accordion-source-page .accordion-header,
.accordion-source-page .accordion-group-header {
  width: 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4) var(--lds-space-6);
  border: 0;
  background: var(--acc-surface);
  color: var(--acc-text);
  text-align: left;
}

.accordion-source-page .accordion-demo.is-compact .accordion-header,
.accordion-source-page .accordion-demo-group.is-compact .accordion-group-header {
  padding: var(--lds-space-3) var(--lds-space-4);
}

.accordion-source-page .accordion-group-header {
  cursor: pointer;
}

.accordion-source-page .accordion-heading,
.accordion-source-page .accordion-group-header > span {
  display: grid;
  gap: var(--lds-space-1);
  min-width: 0;
}

.accordion-source-page .accordion-heading strong,
.accordion-source-page .accordion-group-header strong {
  color: var(--acc-text);
  font-weight: var(--font-weight-bold);
}

.accordion-source-page .accordion-heading span,
.accordion-source-page .accordion-group-header span span {
  color: var(--acc-muted);
}

.accordion-source-page .accordion-trigger {
  width: 32px;
  height: 32px;
  display: inline-grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: var(--lds-radius-pill);
  background: transparent;
  color: var(--acc-text);
  cursor: pointer;
}

.accordion-source-page .accordion-trigger-icon {
  width: 20px;
  height: 20px;
  color: currentColor;
  transition: transform 140ms ease;
}

.accordion-source-page [aria-expanded="true"] .accordion-trigger-icon,
.accordion-source-page .accordion-demo:has(.accordion-detail:not([hidden])) .accordion-trigger-icon {
  transform: rotate(180deg);
}

.accordion-source-page .accordion-detail {
  padding: 0 var(--lds-space-6) var(--lds-space-5);
  background: var(--acc-surface);
  color: var(--acc-muted);
}

.accordion-source-page .accordion-detail p {
  margin: 0;
  line-height: 1.5;
}

.accordion-source-page .accordion-link-trigger {
  justify-self: end;
}

.accordion-source-page .accordion-demo.state-hover .accordion-header,
.accordion-source-page .accordion-group-header:hover {
  background: var(--acc-inset);
}

.accordion-source-page .accordion-demo.state-focus .accordion-trigger,
.accordion-source-page .accordion-group-header:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

.accordion-source-page .accordion-demo.is-disabled {
  opacity: .56;
}

.accordion-source-page .accordion-demo.is-disabled .accordion-trigger {
  cursor: not-allowed;
}

.accordion-source-page .accordion-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.accordion-source-page .accordion-info-mark {
  width: 8px;
  height: 8px;
  margin-top: .35em;
  border: 2px solid var(--acc-accent);
  border-radius: 50%;
  background: var(--acc-surface);
}

.accordion-source-page .accordion-anatomy-svg {
  width: 100%;
  height: auto;
}

.accordion-source-page .accordion-svg-stage {
  fill: var(--acc-inset);
  stroke: var(--acc-border);
}

.accordion-source-page .accordion-svg-header,
.accordion-source-page .accordion-svg-detail {
  fill: var(--acc-surface);
  stroke: var(--acc-border);
}

.accordion-source-page .accordion-svg-line,
.accordion-source-page .accordion-svg-pointer {
  stroke: var(--acc-accent);
  stroke-width: 2;
}

.accordion-source-page .accordion-svg-title,
.accordion-source-page .accordion-svg-body {
  fill: var(--acc-text);
  font-size: 18px;
  font-weight: var(--font-weight-bold);
}

.accordion-source-page .accordion-svg-subtitle {
  fill: var(--acc-muted);
  font-size: 15px;
}

.accordion-source-page .accordion-svg-trigger {
  fill: var(--acc-surface);
  stroke: var(--acc-border-strong);
}

.accordion-source-page .accordion-svg-chevron {
  fill: none;
  stroke: var(--acc-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.accordion-source-page .accordion-svg-callout-number {
  fill: var(--acc-accent);
}

.accordion-source-page .accordion-svg-callout-digit {
  fill: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: middle;
}

.accordion-source-page .accordion-svg-pointer-dot {
  fill: var(--acc-surface);
  stroke: var(--acc-accent);
  stroke-width: 2;
}

.accordion-source-page .accordion-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 900px) {
  .accordion-source-page .accordion-anatomy-grid,
  .accordion-source-page .accordion-layout-grid,
  .accordion-source-page .accordion-card-grid,
  .accordion-source-page .accordion-card-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .accordion-source-page .accordion-anatomy-stage,
  .accordion-source-page .accordion-config-card,
  .accordion-source-page .accordion-layout-card,
  .accordion-source-page .accordion-rule-card,
  .accordion-source-page .accordion-header,
  .accordion-source-page .accordion-group-header {
    padding: var(--lds-space-3);
  }

  .accordion-source-page .accordion-detail {
    padding: 0 var(--lds-space-3) var(--lds-space-4);
  }
}

/* Radio Box component styles */
.radio-box-source-page {
  --rb-surface: var(--color-bg-surface);
  --rb-inset: var(--color-bg-inset);
  --rb-border: var(--color-border-strong);
  --rb-border-subtle: var(--color-border-subtle);
  --rb-text: var(--color-text-primary);
  --rb-muted: var(--color-text-secondary);
  --rb-accent: var(--color-accent);
}

.radio-box-source-page .radio-box-anatomy-grid,
.radio-box-source-page .radio-box-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-4);
}

.radio-box-source-page .radio-box-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.radio-box-source-page .radio-box-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.radio-box-source-page .radio-box-anatomy-stage,
.radio-box-source-page .radio-box-config-card,
.radio-box-source-page .radio-box-layout-card,
.radio-box-source-page .radio-box-rule-card {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--rb-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--rb-surface);
}

.radio-box-source-page h3 {
  margin: 0;
  color: var(--rb-text);
  font-size: .95rem;
}

.radio-box-source-page .radio-box-anatomy-key {
  display: grid;
  align-content: center;
  gap: var(--lds-space-3);
}

.radio-box-source-page .radio-box-anatomy-key p,
.radio-box-source-page .radio-box-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: var(--lds-space-2);
  margin: 0;
}

.radio-box-source-page .radio-box-anatomy-key strong,
.radio-box-source-page .radio-box-anatomy-key span span {
  display: block;
}

.radio-box-source-page .radio-box-anatomy-key strong {
  color: var(--rb-text);
}

.radio-box-source-page .radio-box-anatomy-key span span,
.radio-box-source-page .radio-box-info-list,
.radio-box-source-page .radio-box-rule-card li {
  color: var(--rb-muted);
}

.radio-box-source-page .radio-box-key-num {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--rb-accent);
  border-radius: 50%;
  color: var(--rb-accent);
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
}

.radio-box-source-page .radio-box-demo-group {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--rb-text);
}

.radio-box-source-page .radio-box-demo-group legend {
  margin-bottom: var(--lds-space-2);
  color: var(--rb-text);
  font-weight: var(--font-weight-bold);
}

.radio-box-source-page .radio-box-demo-group.is-dark,
.radio-box-source-page .radio-box-state-surface.dark {
  --rb-surface: #1F232B;
  --rb-inset: #151922;
  --rb-border: #AAB4C2;
  --rb-border-subtle: #384150;
  --rb-text: #F4F6F9;
  --rb-muted: #CAD1DC;
  --rb-accent: #7DB8FF;
}

.radio-box-source-page .radio-box-demo-group.is-dark {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: var(--rb-inset);
}

.radio-box-source-page .radio-box-options {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.radio-box-source-page .orientation-vertical .radio-box-options {
  grid-template-columns: 1fr;
}

.radio-box-source-page .radio-box-item {
  position: relative;
  min-width: 44px;
  min-height: 44px;
  display: grid;
  align-items: stretch;
  padding: var(--lds-space-3);
  border: 1.5px solid var(--rb-border);
  border-radius: var(--lds-radius-md);
  background: transparent;
  color: var(--rb-text);
  cursor: pointer;
  overflow: hidden;
}

.radio-box-source-page .radio-box-demo-group.is-filled .radio-box-item {
  background: var(--rb-inset);
}

.radio-box-source-page .radio-box-item input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  opacity: 0;
}

.radio-box-source-page .radio-box-content {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--lds-space-2);
  row-gap: 0;
}

.radio-box-source-page .radio-box-label {
  color: var(--rb-text);
  font-weight: var(--font-weight-bold);
}

.radio-box-source-page .radio-box-sublabel {
  grid-column: 1 / -1;
  color: var(--rb-muted);
  line-height: 1.35;
}

.radio-box-source-page .radio-box-sublabel-right {
  color: var(--rb-text);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

.radio-box-source-page .radio-box-item.is-selected,
.radio-box-source-page .radio-box-item:has(input:checked) {
  border-color: var(--rb-accent);
  box-shadow: 0 0 0 1.5px var(--rb-accent);
}

.radio-box-source-page .radio-box-item.is-selected::before,
.radio-box-source-page .radio-box-item:has(input:checked)::before {
  content: "";
  position: absolute;
  top: var(--lds-space-2);
  right: var(--lds-space-2);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--rb-accent);
}

.radio-box-source-page .radio-box-demo-group.state-hover .radio-box-item:first-of-type,
.radio-box-source-page .radio-box-item:hover {
  box-shadow: 0 0 0 2px var(--rb-border);
}

.radio-box-source-page .radio-box-demo-group.state-focus .radio-box-item:first-of-type,
.radio-box-source-page .radio-box-item:focus-within {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 4px;
}

.radio-box-source-page .radio-box-item.is-disabled {
  opacity: .52;
  cursor: not-allowed;
}

.radio-box-source-page .radio-box-stock-line {
  position: absolute;
  inset: 10px;
  border-top: 1px solid var(--rb-border);
  transform: rotate(-28deg);
  transform-origin: center;
  pointer-events: none;
}

.radio-box-source-page .radio-box-stock-text {
  margin-top: var(--lds-space-2);
  color: var(--rb-muted);
  font-size: .78rem;
  font-weight: var(--font-weight-bold);
}

.radio-box-source-page .radio-box-info-list {
  display: grid;
  gap: var(--lds-space-2);
}

.radio-box-source-page .radio-box-info-mark {
  width: 8px;
  height: 8px;
  margin-top: .35em;
  border: 2px solid var(--rb-accent);
  border-radius: 50%;
  background: var(--rb-surface);
}

.radio-box-source-page .radio-box-anatomy-svg {
  width: 100%;
  height: auto;
}

.radio-box-source-page .radio-box-svg-stage {
  fill: var(--rb-inset);
  stroke: var(--rb-border-subtle);
}

.radio-box-source-page .radio-box-svg-group {
  fill: transparent;
  stroke: var(--rb-border-subtle);
}

.radio-box-source-page .radio-box-svg-item {
  fill: var(--rb-surface);
  stroke: var(--rb-border);
  stroke-width: 1.5;
}

.radio-box-source-page .radio-box-svg-item.selected {
  stroke: var(--rb-accent);
  stroke-width: 3;
}

.radio-box-source-page .radio-box-svg-stock,
.radio-box-source-page .radio-box-svg-pointer {
  stroke: var(--rb-accent);
  stroke-width: 2;
}

.radio-box-source-page .radio-box-svg-label,
.radio-box-source-page .radio-box-svg-right {
  fill: var(--rb-text);
  font-size: 16px;
  font-weight: var(--font-weight-bold);
}

.radio-box-source-page .radio-box-svg-sublabel {
  fill: var(--rb-muted);
  font-size: 14px;
}

.radio-box-source-page .radio-box-svg-callout-number {
  fill: var(--rb-accent);
}

.radio-box-source-page .radio-box-svg-callout-digit {
  fill: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: middle;
}

.radio-box-source-page .radio-box-svg-pointer-dot {
  fill: var(--rb-surface);
  stroke: var(--rb-accent);
  stroke-width: 2;
}

.radio-box-source-page .radio-box-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 900px) {
  .radio-box-source-page .radio-box-anatomy-grid,
  .radio-box-source-page .radio-box-layout-grid,
  .radio-box-source-page .radio-box-card-grid,
  .radio-box-source-page .radio-box-card-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .radio-box-source-page .radio-box-options {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 520px) {
  .radio-box-source-page .radio-box-anatomy-stage,
  .radio-box-source-page .radio-box-config-card,
  .radio-box-source-page .radio-box-layout-card,
  .radio-box-source-page .radio-box-rule-card {
    padding: var(--lds-space-3);
  }
}

/* Dropdown component styles */
.dropdown-source-page {
  --dd-surface: var(--color-bg-surface);
  --dd-inset: var(--color-bg-inset);
  --dd-border: var(--color-border-strong);
  --dd-border-subtle: var(--color-border-subtle);
  --dd-text: var(--color-text-primary);
  --dd-muted: var(--color-text-secondary);
  --dd-accent: var(--color-accent);
  --dd-danger: var(--color-danger);
}

.dropdown-source-page .dropdown-anatomy-grid,
.dropdown-source-page .dropdown-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-4);
}

.dropdown-source-page .dropdown-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.dropdown-source-page .dropdown-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.dropdown-source-page .dropdown-anatomy-stage,
.dropdown-source-page .dropdown-config-card,
.dropdown-source-page .dropdown-layout-card,
.dropdown-source-page .dropdown-rule-card {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--dd-border-subtle);
  border-radius: var(--lds-radius-md);
  background: var(--dd-surface);
}

.dropdown-source-page h3 {
  margin: 0;
  color: var(--dd-text);
  font-size: .95rem;
}

.dropdown-source-page .dropdown-anatomy-key,
.dropdown-source-page .dropdown-info-list {
  display: grid;
  gap: var(--lds-space-3);
}

.dropdown-source-page .dropdown-anatomy-key p,
.dropdown-source-page .dropdown-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lds-space-2);
  margin: 0;
}

.dropdown-source-page .dropdown-anatomy-key strong,
.dropdown-source-page .dropdown-anatomy-key span span {
  display: block;
}

.dropdown-source-page .dropdown-anatomy-key strong {
  color: var(--dd-text);
}

.dropdown-source-page .dropdown-anatomy-key span span,
.dropdown-source-page .dropdown-info-list,
.dropdown-source-page .dropdown-rule-card li {
  color: var(--dd-muted);
}

.dropdown-source-page .dropdown-key-num {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--dd-accent);
  border-radius: 50%;
  color: var(--dd-accent);
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
}

.dropdown-source-page .dropdown-demo {
  display: grid;
  gap: var(--lds-space-2);
  min-width: 0;
  color: var(--dd-text);
}

.dropdown-source-page .dropdown-demo.is-dark,
.dropdown-source-page .dropdown-state-surface.dark {
  --dd-surface: #1F232B;
  --dd-inset: #151922;
  --dd-border: #AAB4C2;
  --dd-border-subtle: #384150;
  --dd-text: #F4F6F9;
  --dd-muted: #CAD1DC;
  --dd-accent: #7DB8FF;
  --dd-danger: #FFB4A9;
}

.dropdown-source-page .dropdown-demo.is-dark {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: var(--dd-inset);
}

.dropdown-source-page .dropdown-label {
  display: flex;
  gap: var(--lds-space-1);
  color: var(--dd-text);
  font-weight: var(--font-weight-bold);
}

.dropdown-source-page .dropdown-label span {
  color: var(--dd-muted);
  font-weight: var(--font-weight-regular);
}

.dropdown-source-page .dropdown-control-wrap {
  position: relative;
  min-width: 0;
  display: block;
}

.dropdown-source-page .dropdown-control {
  width: 100%;
  min-height: 44px;
  appearance: none;
  padding: 0 44px 0 var(--lds-space-3);
  border: 1px solid var(--dd-border);
  border-radius: var(--lds-radius-sm);
  background: transparent;
  color: var(--dd-text);
  font: inherit;
}

.dropdown-source-page .dropdown-demo.is-filled .dropdown-control {
  background: var(--dd-inset);
}

.dropdown-source-page .dropdown-caret {
  position: absolute;
  top: 50%;
  right: var(--lds-space-3);
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--dd-text);
  border-bottom: 2px solid var(--dd-text);
  transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}

.dropdown-source-page .dropdown-error-icon {
  position: absolute;
  top: 50%;
  right: var(--lds-space-3);
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border: 1px solid var(--dd-danger);
  border-radius: 50%;
  color: var(--dd-danger);
  font-size: .78rem;
  font-weight: var(--font-weight-bold);
  transform: translateY(-50%);
}

.dropdown-source-page .dropdown-demo.is-error .dropdown-caret {
  display: none;
}

.dropdown-source-page .dropdown-helper,
.dropdown-source-page .dropdown-error-text {
  margin: 0;
  color: var(--dd-muted);
  font-size: .88rem;
}

.dropdown-source-page .dropdown-error-text {
  color: var(--dd-danger);
  font-weight: var(--font-weight-semibold);
}

.dropdown-source-page .dropdown-demo.is-error .dropdown-control {
  border-color: var(--dd-danger);
}

.dropdown-source-page .dropdown-demo.state-focus .dropdown-control,
.dropdown-source-page .dropdown-control:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

.dropdown-source-page .dropdown-demo.is-disabled {
  opacity: .56;
}

.dropdown-source-page .dropdown-demo.is-inline {
  grid-template-columns: auto minmax(102px, 1fr);
  align-items: center;
}

.dropdown-source-page .dropdown-demo.is-inline .dropdown-helper,
.dropdown-source-page .dropdown-demo.is-inline .dropdown-error-text {
  grid-column: 2;
}

.dropdown-source-page .dropdown-inline-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-3);
}

.dropdown-source-page .dropdown-info-mark {
  width: 8px;
  height: 8px;
  margin-top: .35em;
  border: 2px solid var(--dd-accent);
  border-radius: 50%;
  background: var(--dd-surface);
}

.dropdown-source-page .dropdown-anatomy-svg {
  width: 100%;
  height: auto;
}

.dropdown-source-page .dropdown-svg-stage {
  fill: var(--dd-inset);
  stroke: var(--dd-border-subtle);
}

.dropdown-source-page .dropdown-svg-control,
.dropdown-source-page .dropdown-svg-list {
  fill: var(--dd-surface);
  stroke: var(--dd-border);
}

.dropdown-source-page .dropdown-svg-label,
.dropdown-source-page .dropdown-svg-value,
.dropdown-source-page .dropdown-svg-option {
  fill: var(--dd-text);
  font-size: 16px;
  font-weight: var(--font-weight-semibold);
}

.dropdown-source-page .dropdown-svg-helper {
  fill: var(--dd-muted);
  font-size: 14px;
}

.dropdown-source-page .dropdown-svg-error,
.dropdown-source-page .dropdown-svg-error-mark {
  fill: var(--dd-danger);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
}

.dropdown-source-page .dropdown-svg-error-icon {
  fill: transparent;
  stroke: var(--dd-danger);
  stroke-width: 2;
}

.dropdown-source-page .dropdown-svg-caret {
  fill: none;
  stroke: var(--dd-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dropdown-source-page .dropdown-svg-pointer {
  stroke: var(--dd-accent);
  stroke-width: 2;
}

.dropdown-source-page .dropdown-svg-callout-number {
  fill: var(--dd-accent);
}

.dropdown-source-page .dropdown-svg-callout-digit {
  fill: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: middle;
}

.dropdown-source-page .dropdown-svg-pointer-dot {
  fill: var(--dd-surface);
  stroke: var(--dd-accent);
  stroke-width: 2;
}

.dropdown-source-page .dropdown-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 900px) {
  .dropdown-source-page .dropdown-anatomy-grid,
  .dropdown-source-page .dropdown-layout-grid,
  .dropdown-source-page .dropdown-card-grid,
  .dropdown-source-page .dropdown-card-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .dropdown-source-page .dropdown-inline-group,
  .dropdown-source-page .dropdown-demo.is-inline {
    grid-template-columns: 1fr;
  }

  .dropdown-source-page .dropdown-demo.is-inline .dropdown-helper,
  .dropdown-source-page .dropdown-demo.is-inline .dropdown-error-text {
    grid-column: auto;
  }

  .dropdown-source-page .dropdown-anatomy-stage,
  .dropdown-source-page .dropdown-config-card,
  .dropdown-source-page .dropdown-layout-card,
  .dropdown-source-page .dropdown-rule-card {
    padding: var(--lds-space-3);
  }
}

/* Price Lockup component styles */
.price-lockup-source-page {
  --pl-surface: var(--color-bg-surface);
  --pl-inset: var(--color-bg-inset);
  --pl-border: var(--color-border-subtle);
  --pl-text: var(--color-text-primary);
  --pl-muted: var(--color-text-secondary);
  --pl-accent: var(--color-accent);
  --pl-saving: var(--color-success);
}

.price-lockup-source-page .price-lockup-anatomy-grid,
.price-lockup-source-page .price-lockup-layout-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr);
  gap: var(--lds-space-4);
}

.price-lockup-source-page .price-lockup-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

.price-lockup-source-page .price-lockup-card-grid.compact {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.price-lockup-source-page .price-lockup-anatomy-stage,
.price-lockup-source-page .price-lockup-config-card,
.price-lockup-source-page .price-lockup-layout-card,
.price-lockup-source-page .price-lockup-rule-card {
  min-width: 0;
  display: grid;
  gap: var(--lds-space-3);
  padding: var(--lds-space-4);
  border: 1px solid var(--pl-border);
  border-radius: var(--lds-radius-md);
  background: var(--pl-surface);
}

.price-lockup-source-page h3 {
  margin: 0;
  color: var(--pl-text);
  font-size: .95rem;
}

.price-lockup-source-page .price-lockup-anatomy-key,
.price-lockup-source-page .price-lockup-info-list {
  display: grid;
  gap: var(--lds-space-3);
}

.price-lockup-source-page .price-lockup-anatomy-key p,
.price-lockup-source-page .price-lockup-info-list p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--lds-space-2);
  margin: 0;
}

.price-lockup-source-page .price-lockup-anatomy-key strong,
.price-lockup-source-page .price-lockup-anatomy-key span span {
  display: block;
}

.price-lockup-source-page .price-lockup-anatomy-key strong {
  color: var(--pl-text);
}

.price-lockup-source-page .price-lockup-anatomy-key span span,
.price-lockup-source-page .price-lockup-info-list,
.price-lockup-source-page .price-lockup-rule-card li {
  color: var(--pl-muted);
}

.price-lockup-source-page .price-lockup-key-num {
  width: 22px;
  height: 22px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--pl-accent);
  border-radius: 50%;
  color: var(--pl-accent);
  font-size: .75rem;
  font-weight: var(--font-weight-bold);
}

.price-lockup-source-page .price-lockup-demo {
  position: relative;
  min-width: 0;
  margin: 0;
  color: var(--pl-text);
  font-size: 1rem;
  line-height: 1.25;
}

.price-lockup-source-page .price-lockup-demo.is-dark,
.price-lockup-source-page .price-lockup-state-surface.dark {
  --pl-surface: #1F232B;
  --pl-inset: #151922;
  --pl-border: #384150;
  --pl-text: #F4F6F9;
  --pl-muted: #CAD1DC;
  --pl-accent: #7DB8FF;
  --pl-saving: #8FE3B2;
}

.price-lockup-source-page .price-lockup-demo.is-dark {
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  background: var(--pl-inset);
}

.price-lockup-source-page .price-lockup-cluster {
  white-space: nowrap;
  font-weight: var(--font-weight-bold);
}

.price-lockup-source-page .price-lockup-currency,
.price-lockup-source-page .price-lockup-term {
  font-size: 1.25rem;
}

.price-lockup-source-page .price-lockup-value {
  font-size: 2.25rem;
  line-height: 1;
}

.price-lockup-source-page .price-lockup-leading,
.price-lockup-source-page .price-lockup-trailing {
  color: var(--pl-muted);
}

.price-lockup-source-page .price-lockup-superscript {
  color: var(--pl-text);
  font-size: .7em;
}

.price-lockup-source-page .price-lockup-demo.color-secondary {
  color: var(--pl-muted);
}

.price-lockup-source-page .price-lockup-demo.color-saving {
  color: var(--pl-saving);
}

.price-lockup-source-page .price-lockup-demo.is-uniform .price-lockup-currency,
.price-lockup-source-page .price-lockup-demo.is-uniform .price-lockup-value,
.price-lockup-source-page .price-lockup-demo.is-uniform .price-lockup-term {
  font-size: 1.35rem;
}

.price-lockup-source-page .price-lockup-demo.is-strike .price-lockup-cluster {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.price-lockup-source-page .price-lockup-demo.is-compact {
  max-width: 220px;
}

.price-lockup-source-page .price-lockup-tooltip-trigger {
  --ib-button-size: 28px;
  --ib-icon-size: 16px;
  margin-left: var(--lds-space-1);
  vertical-align: middle;
}

.price-lockup-source-page .price-lockup-tooltip {
  position: absolute;
  z-index: 1;
  left: 0;
  bottom: calc(100% + var(--lds-space-2));
  max-width: min(240px, 70vw);
  padding: var(--lds-space-2) var(--lds-space-3);
  border: 1px solid var(--pl-border);
  border-radius: var(--lds-radius-sm);
  background: var(--pl-surface);
  color: var(--pl-text);
  font-size: .82rem;
  box-shadow: var(--shadow-sm);
}

.price-lockup-source-page .price-lockup-info-mark {
  width: 8px;
  height: 8px;
  margin-top: .35em;
  border: 2px solid var(--pl-accent);
  border-radius: 50%;
  background: var(--pl-surface);
}

.price-lockup-source-page .price-lockup-anatomy-svg {
  width: 100%;
  height: auto;
}

.price-lockup-source-page .price-lockup-svg-stage {
  fill: var(--pl-inset);
  stroke: var(--pl-border);
}

.price-lockup-source-page .price-lockup-svg-leading,
.price-lockup-source-page .price-lockup-svg-trailing {
  fill: var(--pl-muted);
  font-size: 18px;
}

.price-lockup-source-page .price-lockup-svg-currency,
.price-lockup-source-page .price-lockup-svg-value,
.price-lockup-source-page .price-lockup-svg-term,
.price-lockup-source-page .price-lockup-svg-super {
  fill: var(--pl-text);
  font-size: 22px;
  font-weight: var(--font-weight-bold);
}

.price-lockup-source-page .price-lockup-svg-value {
  font-size: 34px;
}

.price-lockup-source-page .price-lockup-svg-tooltip {
  fill: var(--pl-surface);
  stroke: var(--pl-accent);
  stroke-width: 2;
}

.price-lockup-source-page .price-lockup-svg-tooltip-text {
  fill: var(--pl-accent);
  font-size: 15px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
}

.price-lockup-source-page .price-lockup-svg-pointer {
  stroke: var(--pl-accent);
  stroke-width: 2;
}

.price-lockup-source-page .price-lockup-svg-callout-number {
  fill: var(--pl-accent);
}

.price-lockup-source-page .price-lockup-svg-callout-digit {
  fill: #fff;
  font-size: 13px;
  font-weight: var(--font-weight-bold);
  text-anchor: middle;
  dominant-baseline: middle;
}

.price-lockup-source-page .price-lockup-svg-pointer-dot {
  fill: var(--pl-surface);
  stroke: var(--pl-accent);
  stroke-width: 2;
}

.price-lockup-source-page .price-lockup-source-details {
  margin-top: var(--lds-space-4);
}

@media (max-width: 900px) {
  .price-lockup-source-page .price-lockup-anatomy-grid,
  .price-lockup-source-page .price-lockup-layout-grid,
  .price-lockup-source-page .price-lockup-card-grid,
  .price-lockup-source-page .price-lockup-card-grid.compact {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .kind-surface-grid,
  .kind-grid {
    grid-template-columns: 1fr;
  }

  .kind-grid {
    gap: var(--lds-space-4);
  }
}

@media (max-width: 520px) {
  .price-lockup-source-page .price-lockup-anatomy-stage,
  .price-lockup-source-page .price-lockup-config-card,
  .price-lockup-source-page .price-lockup-layout-card,
  .price-lockup-source-page .price-lockup-rule-card {
    padding: var(--lds-space-3);
  }
}

@media (max-width: 520px) {
  .kind-grid {
    grid-template-columns: 1fr;
  }

  .button-kind-item span {
    max-width: none;
  }
}

/* Component documentation header standard */
.source-component-page :is(
  .tl-config-card,
  .tl-behavior-card,
  .tl-measure-card,
  .tl-state-card,
  [class*="-config-card"],
  [class*="-layout-card"],
  [class*="-rule-card"],
  [class*="-state-surface"],
  [class*="-behavior-card"],
  [class*="-measure-card"]
) > h3,
.buttons-pdf-spec :is(
  .configuration-card,
  .layout-spec-card,
  .behavior-card,
  .pdf-state-surface,
  .surface-demo,
  .button-size-grid article
) > h3 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--lds-line-tight);
  letter-spacing: 0;
}

.buttons-pdf-spec .surface-demo.dark-surface > h3,
.buttons-pdf-spec .kind-surface.dark-surface > h4,
.buttons-pdf-spec .pdf-state-surface.dark-surface > h3 {
  color: var(--color-text-inverse);
}

/* Button state parity: live hover must match the documented hover specimen. */
.buttons-pdf-spec .spec-button.primary.light:not(:disabled):hover,
.buttons-pdf-spec .spec-button.primary.light.pdf-hover {
  border-color: var(--color-accent-hover);
  background: var(--color-accent-hover);
  box-shadow: 0 0 0 2px var(--color-accent-hover);
}

.buttons-pdf-spec .spec-button.secondary.light:not(:disabled):hover,
.buttons-pdf-spec .spec-button.secondary.light.pdf-hover {
  border-color: var(--color-accent-hover);
  background: var(--color-bg-inset);
  box-shadow: 0 0 0 2px var(--color-accent-hover);
}

.buttons-pdf-spec .spec-button.primary.dark:not(:disabled):hover,
.buttons-pdf-spec .spec-button.primary.dark.pdf-hover {
  border-color: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
  background: color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-surface) 90%, var(--color-accent));
}

.buttons-pdf-spec .spec-button.secondary.dark:not(:disabled):hover,
.buttons-pdf-spec .spec-button.secondary.dark.pdf-hover {
  border-color: color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-accent));
  background: color-mix(in srgb, var(--color-bg-surface) 10%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-bg-surface) 84%, var(--color-accent));
}

/* Liquid Glass Buttons treatment. */
.buttons-liquid-glass-page {
  --glass-ink: #12151C;
  --glass-muted: #566070;
  --glass-blue: #0B63FF;
  --glass-blue-deep: #064FDB;
  --glass-red: #D6160C;
  --glass-red-fill: rgba(214, 22, 12, .14);
  --glass-red-fill-hover: rgba(214, 22, 12, .22);
  --glass-light: rgba(255, 255, 255, .64);
  --glass-light-strong: rgba(255, 255, 255, .82);
  --glass-dark: rgba(18, 21, 28, .72);
  --glass-dark-strong: rgba(18, 21, 28, .86);
  --glass-line: rgba(255, 255, 255, .48);
  --glass-shadow: 0 24px 70px rgba(16, 28, 56, .18);
  position: relative;
  isolation: isolate;
}

.buttons-liquid-glass-page::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 16%, rgba(72, 146, 255, .28), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(112, 222, 255, .24), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(255, 114, 96, .16), transparent 30%),
    linear-gradient(135deg, #F8FBFF 0%, #E9F3FF 46%, #F8FAFF 100%);
}

.buttons-liquid-glass-page .page-header,
.buttons-liquid-glass-page .benchmark-section,
.buttons-liquid-glass-page .configuration-card,
.buttons-liquid-glass-page .layout-spec-card,
.buttons-liquid-glass-page .behavior-card,
.buttons-liquid-glass-page .pdf-state-surface,
.buttons-liquid-glass-page .button-size-grid article,
.buttons-liquid-glass-page .pdf-anatomy-stage,
.buttons-liquid-glass-page .kind-surface,
.buttons-liquid-glass-page .surface-demo {
  border-color: rgba(255, 255, 255, .62);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .42);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -1px 0 rgba(255, 255, 255, .24),
    var(--glass-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.buttons-liquid-glass-page .page-header {
  overflow: hidden;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(236, 247, 255, .42)),
    radial-gradient(circle at 92% 10%, rgba(11, 99, 255, .2), transparent 34%);
}

.buttons-liquid-glass-page .page-header::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .7), transparent 28%, rgba(255, 255, 255, .24) 62%, transparent);
  opacity: .72;
}

.buttons-liquid-glass-page .dark-surface,
.buttons-liquid-glass-page .pdf-state-surface.dark-surface {
  border-color: rgba(255, 255, 255, .18);
  color: var(--color-text-inverse);
  background:
    linear-gradient(135deg, rgba(31, 36, 48, .82), rgba(14, 16, 22, .72)),
    rgba(15, 18, 25, .82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .24),
    0 24px 70px rgba(0, 0, 0, .34);
}

.buttons-liquid-glass-page :is(.button-surface-grid, .kind-surface-grid, .pdf-state-grid) {
  position: relative;
  isolation: isolate;
}

.buttons-liquid-glass-page :is(.button-surface-grid, .kind-surface-grid, .pdf-state-grid)::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(var(--radius-lg) + 12px);
  background:
    radial-gradient(circle at 24% 24%, rgba(255, 255, 255, .34), transparent 34%),
    radial-gradient(circle at 78% 70%, rgba(11, 99, 255, .14), transparent 34%);
  opacity: .76;
}

.buttons-liquid-glass-page .spec-button {
  border-width: 1px;
  position: relative;
  overflow: hidden;
  transform: translateZ(0);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .64),
    inset 0 -1px 0 rgba(255, 255, 255, .18),
    0 10px 28px rgba(12, 31, 74, .13);
  backdrop-filter: blur(18px) saturate(175%);
  -webkit-backdrop-filter: blur(18px) saturate(175%);
}

.buttons-liquid-glass-page .spec-button::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(118deg, rgba(255, 255, 255, .66), transparent 30%, rgba(255, 255, 255, .18) 58%, transparent 78%);
  opacity: .42;
  mix-blend-mode: screen;
  transform: translateX(-8px);
  transition:
    opacity 160ms ease,
    transform 160ms ease;
}

.buttons-liquid-glass-page .spec-button:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.pdf-hover {
  transform: translateY(-1px) scale(1.012);
}

.buttons-liquid-glass-page .spec-button:not(:disabled):hover::after,
.buttons-liquid-glass-page .spec-button.pdf-hover::after {
  opacity: .74;
  transform: translateX(4px);
}

.buttons-liquid-glass-page .spec-button.primary.light {
  --spec-bg: rgba(11, 99, 255, .72);
  --spec-fg: #FFFFFF;
  --spec-border: rgba(151, 194, 255, .70);
  background:
    linear-gradient(180deg, rgba(255,255,255,.28), transparent 40%, rgba(2,31,96,.18)),
    linear-gradient(135deg, rgba(11,99,255,.72), rgba(4,45,130,.50));
}

.buttons-liquid-glass-page .spec-button.secondary.light,
.buttons-liquid-glass-page .spec-button.tertiary.light {
  --spec-bg: rgba(255, 255, 255, .5);
  --spec-fg: var(--glass-blue-deep);
  --spec-border: rgba(11, 99, 255, .3);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .82), rgba(238, 246, 255, .38)),
    var(--spec-bg);
}

.buttons-liquid-glass-page .spec-button.primary.dark {
  --spec-bg: rgba(40, 126, 255, .68);
  --spec-fg: #FFFFFF;
  --spec-border: rgba(180, 215, 255, .68);
  background:
    linear-gradient(180deg, rgba(255,255,255,.30), transparent 42%, rgba(1,21,72,.22)),
    linear-gradient(135deg, rgba(40,126,255,.68), rgba(6,48,137,.52));
}

.buttons-liquid-glass-page .spec-button.secondary.dark,
.buttons-liquid-glass-page .spec-button.tertiary.dark {
  --spec-bg: rgba(255, 255, 255, .1);
  --spec-fg: #FFFFFF;
  --spec-border: rgba(255, 255, 255, .38);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .05)),
    var(--spec-bg);
}

.buttons-liquid-glass-page .spec-button.destructive.light,
.buttons-liquid-glass-page .spec-button.destructive.dark {
  --spec-bg: var(--glass-red-fill);
  --spec-fg: var(--glass-red);
  --spec-border: rgba(214, 22, 12, .36);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .16)),
    var(--glass-red-fill);
}

.buttons-liquid-glass-page .dark-surface .spec-button.destructive.dark {
  --spec-bg: rgba(214, 22, 12, .2);
  --spec-fg: #FFE8E5;
  --spec-border: rgba(255, 120, 108, .5);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04)),
    rgba(214, 22, 12, .22);
}

.buttons-liquid-glass-page .spec-button.primary.light:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.primary.light.pdf-hover {
  border-color: rgba(184, 215, 255, .82);
  background:
    linear-gradient(180deg, rgba(255,255,255,.34), transparent 40%, rgba(2,31,96,.20)),
    linear-gradient(135deg, rgba(9,84,236,.80), rgba(3,39,119,.56));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .74),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 16px 34px rgba(10, 79, 224, .2);
}

.buttons-liquid-glass-page .spec-button.secondary.light:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.secondary.light.pdf-hover,
.buttons-liquid-glass-page .spec-button.tertiary.light:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.tertiary.light.pdf-hover {
  border-color: rgba(10, 79, 224, .42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(226, 238, 255, .5)),
    rgba(255, 255, 255, .58);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .86),
    inset 0 -1px 0 rgba(10, 79, 224, .08),
    0 14px 28px rgba(10, 79, 224, .12);
}

.buttons-liquid-glass-page .spec-button.primary.dark:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.primary.dark.pdf-hover,
.buttons-liquid-glass-page .spec-button.secondary.dark:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.secondary.dark.pdf-hover,
.buttons-liquid-glass-page .spec-button.tertiary.dark:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.tertiary.dark.pdf-hover {
  border-color: rgba(255, 255, 255, .62);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .3), rgba(255, 255, 255, .08)),
    rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .34),
    inset 0 -1px 0 rgba(255, 255, 255, .08),
    0 16px 34px rgba(0, 0, 0, .24);
}

.buttons-liquid-glass-page .spec-button.destructive.light:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.destructive.light.pdf-hover,
.buttons-liquid-glass-page .spec-button.destructive.dark:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.destructive.dark.pdf-hover {
  border-color: rgba(214, 22, 12, .42);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .12)),
    rgba(214, 22, 12, .18);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(214, 22, 12, .1),
    0 16px 34px rgba(214, 22, 12, .14);
}

/* Issue 1: the Button-kinds wrapper was a third nested glass card, reading as a
   redundant grey layer. Flatten it so the surface panels sit directly in the
   Configurations section. (Scoped to configuration-card; Layout card is untouched.) */
.buttons-liquid-glass-page .configuration-card.wide-layout-card {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Tertiary is the quiet action: a borderless, fill-less ghost, clearly distinct
   from the bordered Secondary. Text carries it; hover adds only a faint wash. */
.buttons-liquid-glass-page .spec-button.tertiary.light,
.buttons-liquid-glass-page .spec-button.tertiary.dark {
  --spec-border: transparent;
  border-color: transparent;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.buttons-liquid-glass-page .spec-button.tertiary.light::after,
.buttons-liquid-glass-page .spec-button.tertiary.dark::after {
  opacity: 0;
}

.buttons-liquid-glass-page .spec-button.tertiary.light:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.tertiary.light.pdf-hover {
  border-color: transparent;
  background: rgba(255, 255, 255, .42);
  box-shadow: none;
}

.buttons-liquid-glass-page .spec-button.tertiary.dark:not(:disabled):hover,
.buttons-liquid-glass-page .spec-button.tertiary.dark.pdf-hover {
  border-color: transparent;
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
}

/* Pressed: the material settles inward under pointer/touch — a clear, brief press. */
.buttons-liquid-glass-page .spec-button:not(:disabled):active,
.buttons-liquid-glass-page .spec-button.pdf-active {
  transform: translateY(0) scale(.988);
  box-shadow:
    inset 0 2px 6px rgba(12, 31, 74, .22),
    inset 0 1px 0 rgba(255, 255, 255, .4),
    0 4px 14px rgba(12, 31, 74, .12);
}

.buttons-liquid-glass-page .spec-button:not(:disabled):active::after,
.buttons-liquid-glass-page .spec-button.pdf-active::after {
  opacity: .3;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .buttons-liquid-glass-page .spec-button,
  .buttons-liquid-glass-page .spec-button::after {
    transition: none;
  }

  .buttons-liquid-glass-page .spec-button:not(:disabled):hover,
  .buttons-liquid-glass-page .spec-button.pdf-hover,
  .buttons-liquid-glass-page .spec-button:not(:disabled):active,
  .buttons-liquid-glass-page .spec-button.pdf-active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .buttons-liquid-glass-page .page-header,
  .buttons-liquid-glass-page .benchmark-section,
  .buttons-liquid-glass-page .configuration-card,
  .buttons-liquid-glass-page .layout-spec-card,
  .buttons-liquid-glass-page .behavior-card,
  .buttons-liquid-glass-page .pdf-state-surface,
  .buttons-liquid-glass-page .button-size-grid article,
  .buttons-liquid-glass-page .pdf-anatomy-stage,
  .buttons-liquid-glass-page .kind-surface,
  .buttons-liquid-glass-page .surface-demo,
  .buttons-liquid-glass-page .spec-button {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Glass direction explainer — scoped to the Button page. */

/* The lead reads as a statement, not a caption: display voice, full size, ink —
   not small grey subtitle text. */
.buttons-liquid-glass-page .glass-direction-lead {
  margin: var(--lds-space-4) 0 0;
  max-width: 60ch;
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(17px, 1.5vw, 19px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--color-text-secondary);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .glass-direction-lead {
  color: rgba(233, 239, 248, .82);
}

.buttons-liquid-glass-page .glass-direction-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--lds-space-5);
  margin-top: var(--lds-space-6);
}

@media (max-width: 900px) {
  .buttons-liquid-glass-page .glass-direction-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .buttons-liquid-glass-page .glass-direction-grid {
    grid-template-columns: 1fr;
  }
}

.buttons-liquid-glass-page .glass-principle-card {
  padding: var(--lds-space-5);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: var(--lds-radius-lg);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .66), rgba(255, 255, 255, .3)),
    rgba(255, 255, 255, .4);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 10px 26px rgba(16, 28, 56, .1);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.buttons-liquid-glass-page .glass-principle-title {
  margin: 0 0 var(--lds-space-3);
  padding-bottom: var(--lds-space-3);
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: var(--lds-line-tight);
  color: var(--glass-ink);
  border-bottom: 1px solid color-mix(in srgb, var(--glass-ink) 12%, transparent);
}

.buttons-liquid-glass-page .glass-principle-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--lds-space-2);
}

.buttons-liquid-glass-page .glass-principle-list li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--glass-ink) 82%, transparent);
}

.buttons-liquid-glass-page .glass-principle-list li::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--glass-blue);
}

@media (prefers-reduced-transparency: reduce) {
  .buttons-liquid-glass-page .glass-principle-card {
    background: #FFFFFF;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* "Glass in the wild" — LDS light & dark glass buttons on a colorful, self-contained
   surface (layered CSS mesh gradient; no external image). Shows the material taking
   color and light from what it rests on. */
.buttons-liquid-glass-page .glass-stage {
  margin-top: var(--lds-space-6);
}

.buttons-liquid-glass-page .glass-stage {
  padding: var(--lds-space-7) var(--lds-space-5);
  border-radius: var(--lds-radius-lg);
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(120% 120% at 12% 18%, #ff6aa2 0%, rgba(255, 106, 162, 0) 42%),
    radial-gradient(120% 120% at 88% 12%, #ffd36e 0%, rgba(255, 211, 110, 0) 40%),
    radial-gradient(130% 130% at 80% 86%, #4fd1c5 0%, rgba(79, 209, 197, 0) 46%),
    radial-gradient(130% 130% at 20% 92%, #7aa5ff 0%, rgba(122, 165, 255, 0) 46%),
    linear-gradient(135deg, #ff8fb1 0%, #ffcf8f 30%, #7fd8ff 66%, #7ef0c6 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .28),
    inset 0 40px 80px rgba(0, 0, 0, .14);
}

.buttons-liquid-glass-page .glass-stage-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-6);
  max-width: 620px;
  margin: 0 auto;
}

@media (max-width: 560px) {
  .buttons-liquid-glass-page .glass-stage-grid {
    grid-template-columns: 1fr;
    gap: var(--lds-space-7);
  }
}

.buttons-liquid-glass-page .glass-stage-group {
  display: grid;
  gap: var(--lds-space-4);
  justify-items: center;
}

.buttons-liquid-glass-page .glass-stage-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.buttons-liquid-glass-page .glass-stage-group.light-group .glass-stage-label {
  color: #14161C;
  text-shadow: 0 1px 2px rgba(255, 255, 255, .55);
}

.buttons-liquid-glass-page .glass-stage-group.dark-group .glass-stage-label {
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .5);
}

.buttons-liquid-glass-page .glass-stage-stack {
  display: grid;
  gap: var(--lds-space-3);
  width: 100%;
  justify-items: stretch;
}

.buttons-liquid-glass-page .glass-stage-btn {
  position: relative;
  min-height: 54px;
  padding: 0 26px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .5);
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  cursor: pointer;
  overflow: hidden;
  transform: translateZ(0);
  backdrop-filter: blur(14px) saturate(185%);
  -webkit-backdrop-filter: blur(14px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .6),
    inset 0 -1px 0 rgba(255, 255, 255, .18),
    0 12px 30px rgba(0, 0, 0, .2);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.buttons-liquid-glass-page .glass-stage-btn::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .7), transparent 32%, rgba(255, 255, 255, .2) 60%, transparent 82%);
  opacity: .5;
  mix-blend-mode: screen;
}

/* Light mode = light material carrying dark text. */
.buttons-liquid-glass-page .glass-stage-btn.light {
  color: #14161C;
  text-shadow: 0 1px 1px rgba(255, 255, 255, .5);
}

.buttons-liquid-glass-page .glass-stage-btn.light.primary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .42));
}

.buttons-liquid-glass-page .glass-stage-btn.light.secondary {
  background: linear-gradient(180deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, .2));
  border-color: rgba(255, 255, 255, .72);
}

.buttons-liquid-glass-page .glass-stage-btn.light.tertiary {
  background: rgba(255, 255, 255, .18);
  border-color: transparent;
  box-shadow: none;
}

/* Dark mode = dark material carrying light text. */
.buttons-liquid-glass-page .glass-stage-btn.dark {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .42);
  border-color: rgba(255, 255, 255, .34);
}

.buttons-liquid-glass-page .glass-stage-btn.dark.primary {
  background: linear-gradient(180deg, rgba(18, 20, 28, .62), rgba(18, 20, 28, .42));
}

.buttons-liquid-glass-page .glass-stage-btn.dark.secondary {
  background: linear-gradient(180deg, rgba(18, 20, 28, .34), rgba(18, 20, 28, .2));
  border-color: rgba(255, 255, 255, .28);
}

.buttons-liquid-glass-page .glass-stage-btn.dark.tertiary {
  background: rgba(18, 20, 28, .18);
  border-color: transparent;
  box-shadow: none;
}

.buttons-liquid-glass-page .glass-stage-btn:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .7),
    inset 0 -1px 0 rgba(255, 255, 255, .2),
    0 18px 44px rgba(0, 0, 0, .26);
}

.buttons-liquid-glass-page .glass-stage-btn:active {
  transform: translateY(0) scale(.99);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, .28),
    0 6px 18px rgba(0, 0, 0, .2);
}

.buttons-liquid-glass-page .glass-stage-btn:focus-visible {
  outline: 2px dashed #FFFFFF;
  outline-offset: 3px;
}

/* The statement between the stage and the cards — a showpiece, not a caption.
   The lead is filled with the same living gradient as the stage: the words
   literally take their color from what they rest on. */
.buttons-liquid-glass-page .glass-statement {
  max-width: 46rem;
  margin: var(--lds-space-7) auto 0;
  text-align: center;
}

.buttons-liquid-glass-page .glass-statement-lead {
  margin: 0;
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(24px, 3vw, 33px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--glass-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .buttons-liquid-glass-page .glass-statement-lead {
    background-image: linear-gradient(100deg, #7b5cff 0%, #4f8cff 34%, #17bec0 66%, #ff8a5b 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

.buttons-liquid-glass-page .glass-statement-body {
  max-width: 54ch;
  margin: var(--lds-space-3) auto 0;
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(16px, 1.6vw, 18px);
  font-weight: 500;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--color-text-secondary);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .glass-statement-body {
  color: rgba(233, 239, 248, .88);
}

@media (prefers-reduced-motion: reduce) {
  .buttons-liquid-glass-page .glass-stage-btn {
    transition: none;
  }

  .buttons-liquid-glass-page .glass-stage-btn:hover,
  .buttons-liquid-glass-page .glass-stage-btn:active {
    transform: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .buttons-liquid-glass-page .glass-stage-btn,
  .buttons-liquid-glass-page .glass-stage-label {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    text-shadow: none;
  }

  .buttons-liquid-glass-page .glass-stage-btn.light,
  .buttons-liquid-glass-page .glass-stage-btn.light.primary,
  .buttons-liquid-glass-page .glass-stage-btn.light.secondary,
  .buttons-liquid-glass-page .glass-stage-btn.light.tertiary {
    background: #FFFFFF;
    color: #14161C;
    border-color: rgba(0, 0, 0, .16);
  }

  .buttons-liquid-glass-page .glass-stage-btn.dark,
  .buttons-liquid-glass-page .glass-stage-btn.dark.primary,
  .buttons-liquid-glass-page .glass-stage-btn.dark.secondary,
  .buttons-liquid-glass-page .glass-stage-btn.dark.tertiary {
    background: #14161C;
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, .24);
  }
}

/* Sticky section nav — a floating glass pill bar with an eased sliding indicator. */
.buttons-liquid-glass-page .benchmark-section {
  scroll-margin-top: 76px;
}

.buttons-section-nav {
  position: sticky;
  top: 0;
  z-index: 30;
  margin-top: var(--lds-space-4);
  padding-top: var(--lds-space-4);
  /* Indicator gradient as variables so it can be tuned/themed in one place. */
  --nav-ind-1: #6a3dff;
  --nav-ind-2: #2f6bff;
  --nav-ind-3: #0f9aa8;
  --nav-ind-grad: linear-gradient(100deg, var(--nav-ind-1) 0%, var(--nav-ind-2) 46%, var(--nav-ind-3) 100%);
}

/* Liquid-glass screen filling the top gap so scrolling content blurs away
   before it reaches the pill, then fades out just below it. */
.buttons-section-nav::before {
  content: "";
  position: absolute;
  inset: 0 -12px 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(to bottom, rgba(248, 250, 255, .5), rgba(248, 250, 255, 0) 92%);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
  transition: opacity 160ms ease;
}

.buttons-section-nav.is-stuck::before {
  opacity: 1;
}

.buttons-section-nav .section-nav-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--lds-space-1);
  padding: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  border-radius: var(--lds-radius-pill);
  border: 1px solid rgba(255, 255, 255, .6);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .4)),
    rgba(255, 255, 255, .5);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    0 14px 34px rgba(16, 28, 56, .16);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
}

.buttons-section-nav .section-nav-track::-webkit-scrollbar {
  display: none;
}

.buttons-section-nav .section-nav-indicator {
  position: absolute;
  top: 6px;
  left: 0;
  width: 0;
  height: calc(100% - 12px);
  border-radius: var(--lds-radius-pill);
  background-image: var(--nav-ind-grad);
  background-size: 165% 100%;
  box-shadow: 0 6px 16px rgba(79, 124, 255, .34);
  transition:
    transform 380ms cubic-bezier(.25, .8, .35, 1),
    width 380ms cubic-bezier(.25, .8, .35, 1);
  animation: nav-indicator-flow 11s ease-in-out infinite;
  will-change: transform, width, background-position;
  pointer-events: none;
}

@keyframes nav-indicator-flow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.buttons-section-nav .section-nav-link {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: var(--lds-radius-pill);
  background: transparent;
  color: var(--glass-muted);
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition: color 220ms ease;
}

.buttons-section-nav .section-nav-link:hover {
  color: var(--glass-ink);
}

.buttons-section-nav .section-nav-link.is-active {
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

.buttons-section-nav .section-nav-link:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

body[data-button-theme="dark"] .buttons-section-nav::before {
  background: linear-gradient(to bottom, rgba(13, 16, 23, .62), rgba(13, 16, 23, 0) 92%);
}

body[data-button-theme="dark"] .buttons-section-nav .section-nav-track {
  border-color: rgba(255, 255, 255, .14);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .72), rgba(20, 24, 34, .58)),
    rgba(18, 22, 32, .68);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 16px 40px rgba(0, 0, 0, .4);
}

body[data-button-theme="dark"] .buttons-section-nav .section-nav-link {
  color: rgba(233, 239, 248, .66);
}

body[data-button-theme="dark"] .buttons-section-nav .section-nav-link:hover {
  color: #FFFFFF;
}

/* Active label must win over the dark base link color (higher specificity). */
body[data-button-theme="dark"] .buttons-section-nav .section-nav-link.is-active {
  color: #FFFFFF;
}

@media (prefers-reduced-motion: reduce) {
  .buttons-section-nav .section-nav-indicator {
    transition: none;
    animation: none;
  }
}

/* Shared indicator gradient tokens (used by the sticky nav and the specimens). */
.buttons-liquid-glass-page {
  --nav-ind-1: #6a3dff;
  --nav-ind-2: #2f6bff;
  --nav-ind-3: #0f9aa8;
  --nav-ind-grad: linear-gradient(100deg, var(--nav-ind-1) 0%, var(--nav-ind-2) 46%, var(--nav-ind-3) 100%);
}

/* Navigation-pattern exploration — self-contained (works on any page). */
.nav-explore {
  --nav-ind-1: #6a3dff;
  --nav-ind-2: #2f6bff;
  --nav-ind-3: #0f9aa8;
  --nav-ind-grad: linear-gradient(100deg, var(--nav-ind-1) 0%, var(--nav-ind-2) 46%, var(--nav-ind-3) 100%);
}

.nav-explore .nav-explore-grid {
  display: grid;
  gap: var(--lds-space-6);
  margin-top: var(--lds-space-5);
}

.nav-explore .nav-pattern {
  display: grid;
  gap: var(--lds-space-4);
}

.nav-explore .nav-pattern-head h3 {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.nav-explore .nav-pattern-head p {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.nav-explore .nav-pattern-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
}

@media (max-width: 620px) {
  .nav-explore .nav-pattern-pair {
    grid-template-columns: 1fr;
  }
}

.nav-explore .nav-pattern-surface {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 100px;
  padding: var(--lds-space-6) var(--lds-space-4) var(--lds-space-4);
  border-radius: var(--lds-radius-lg);
  overflow: hidden;
}

.nav-explore .nav-pattern-surface.light {
  background: #EEF1F6;
  border: 1px solid rgba(16, 28, 56, .1);
}

.nav-explore .nav-pattern-surface.dark {
  background: #10131A;
  border: 1px solid rgba(255, 255, 255, .1);
}

.nav-explore .nav-pattern-tag {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.nav-explore .nav-pattern-surface.light .nav-pattern-tag {
  color: rgba(16, 28, 56, .4);
}

.nav-explore .nav-pattern-surface.dark .nav-pattern-tag {
  color: rgba(255, 255, 255, .4);
}

.nav-explore .nav-pattern-note {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.nav-explore .nav-explore-reco {
  margin: var(--lds-space-6) 0 0;
  padding: var(--lds-space-4);
  border-radius: var(--lds-radius-md);
  border: 1px dashed var(--color-border-strong);
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-primary);
}

/* Shared specimen tab base + surface-aware text colors. */
.nav-explore .tabspec {
  display: inline-flex;
  align-items: center;
}

.nav-explore .tabspec-tab {
  border: 0;
  background: transparent;
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.nav-explore .nav-pattern-surface.light .tabspec-tab {
  color: #5A6472;
}

.nav-explore .nav-pattern-surface.light .tabspec-tab.is-active {
  color: #14161C;
}

.nav-explore .nav-pattern-surface.dark .tabspec-tab {
  color: rgba(233, 239, 248, .6);
}

.nav-explore .nav-pattern-surface.dark .tabspec-tab.is-active {
  color: #FFFFFF;
}

.nav-explore .tabspec-tab:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
  border-radius: 6px;
}

/* 1) Underline */
.nav-explore .tabspec-underline {
  gap: 22px;
}

.nav-explore .tabspec-underline .tabspec-tab {
  position: relative;
  padding: 6px 1px;
  font-size: 14px;
}

.nav-explore .nav-pattern-surface.light .tabspec-underline {
  border-bottom: 1px solid rgba(16, 28, 56, .12);
}

.nav-explore .nav-pattern-surface.dark .tabspec-underline {
  border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.nav-explore .tabspec-underline .tabspec-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background-image: var(--nav-ind-grad);
}

/* 2) Segmented */
.nav-explore .tabspec-segmented {
  gap: 2px;
  padding: 4px;
  border-radius: var(--lds-radius-pill);
}

.nav-explore .tabspec-segmented .tabspec-tab {
  padding: 6px 14px;
  border-radius: var(--lds-radius-pill);
  font-size: 13px;
}

.nav-explore .nav-pattern-surface.light .tabspec-segmented {
  background: #E1E6EF;
}

.nav-explore .nav-pattern-surface.dark .tabspec-segmented {
  background: rgba(255, 255, 255, .07);
}

.nav-explore .nav-pattern-surface.light .tabspec-segmented .tabspec-tab.is-active {
  background: #FFFFFF;
  box-shadow: 0 1px 3px rgba(16, 28, 56, .18);
}

.nav-explore .nav-pattern-surface.dark .tabspec-segmented .tabspec-tab.is-active {
  background: rgba(255, 255, 255, .16);
}

/* 3) Liquid Glass pill */
.nav-explore .tabspec-glass {
  gap: 2px;
  padding: 5px;
  border-radius: var(--lds-radius-pill);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.nav-explore .tabspec-glass .tabspec-tab {
  padding: 7px 15px;
  border-radius: var(--lds-radius-pill);
  font-size: 13px;
}

.nav-explore .nav-pattern-surface.light .tabspec-glass {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
}

.nav-explore .nav-pattern-surface.dark .tabspec-glass {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
}

.nav-explore .nav-pattern-surface .tabspec-glass .tabspec-tab.is-active {
  color: #FFFFFF;
  background-image: var(--nav-ind-grad);
  box-shadow: 0 6px 16px rgba(79, 124, 255, .34);
}

/* 4) Glass Underline */
.nav-explore .tabspec-glass-underline {
  gap: 18px;
  padding: 8px 14px;
  border-radius: var(--lds-radius-md);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.nav-explore .nav-pattern-surface.light .tabspec-glass-underline {
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .7);
}

.nav-explore .nav-pattern-surface.dark .tabspec-glass-underline {
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .14);
}

.nav-explore .tabspec-glass-underline .tabspec-tab {
  position: relative;
  padding: 6px 1px;
  font-size: 14px;
}

.nav-explore .tabspec-glass-underline .tabspec-tab.is-active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -8px;
  height: 3px;
  border-radius: 3px;
  background-image: var(--nav-ind-grad);
}

/* Living Glass — glass with intrinsic, gentle motion: light and color drift on
   their own, even on a still surface. An evolution of static Liquid Glass. */
.buttons-liquid-glass-page .living-glass-block {
  --living-grad: linear-gradient(120deg, #6a3dff 0%, #2f6bff 38%, #17bec0 72%, #ff8a5b 100%);
  margin-top: var(--lds-space-6);
}

.buttons-liquid-glass-page .living-glass-title {
  margin: 0;
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--glass-ink);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .buttons-liquid-glass-page .living-glass-title {
    background-image: var(--living-grad);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: living-drift 12s ease-in-out infinite;
  }
}

.buttons-liquid-glass-page .living-glass-desc {
  margin: var(--lds-space-2) 0 0;
  max-width: 62ch;
  font-size: 15px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .living-glass-desc {
  color: rgba(233, 239, 248, .8);
}

.buttons-liquid-glass-page .living-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--lds-space-4);
  margin-top: var(--lds-space-4);
}

@media (max-width: 560px) {
  .buttons-liquid-glass-page .living-compare {
    grid-template-columns: 1fr;
  }
}

.buttons-liquid-glass-page .living-col {
  margin: 0;
  display: grid;
  gap: var(--lds-space-2);
}

.buttons-liquid-glass-page .living-stage {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lds-space-3);
  align-items: center;
  justify-content: center;
  min-height: 128px;
  padding: var(--lds-space-6);
  border-radius: var(--lds-radius-lg);
  border: 1px solid rgba(255, 255, 255, .14);
  background:
    radial-gradient(120% 120% at 18% 20%, rgba(120, 90, 255, .22), transparent 60%),
    radial-gradient(120% 120% at 84% 82%, rgba(23, 190, 192, .18), transparent 60%),
    #12151C;
  overflow: hidden;
}

.buttons-liquid-glass-page .living-tag {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .living-tag {
  color: rgba(233, 239, 248, .6);
}

.buttons-liquid-glass-page .living-tag.is-living {
  color: #7FB0FF;
}

.buttons-liquid-glass-page .lg-btn {
  position: relative;
  overflow: hidden;
  min-height: 52px;
  padding: 0 26px;
  border-radius: var(--lds-radius-pill);
  border: 1px solid rgba(255, 255, 255, .5);
  font-family: "Satoshi", "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .34);
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(185%);
  -webkit-backdrop-filter: blur(14px) saturate(185%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    inset 0 -1px 0 rgba(255, 255, 255, .16),
    0 10px 26px rgba(0, 0, 0, .24);
  transition: transform 160ms ease;
}

.buttons-liquid-glass-page .lg-btn:hover {
  transform: translateY(-1px);
}

.buttons-liquid-glass-page .lg-btn:active {
  transform: translateY(0) scale(.99);
}

.buttons-liquid-glass-page .lg-btn.primary {
  background-image: var(--living-grad);
  background-size: 100% 100%;
  background-position: 0% 50%;
}

.buttons-liquid-glass-page .lg-btn.secondary {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08));
  border-color: rgba(255, 255, 255, .38);
}

/* Living: the fill drifts and a slow sheen of light passes through the glass. */
.buttons-liquid-glass-page .lg-btn.living.primary {
  background-size: 220% 220%;
  animation: living-drift 9s ease-in-out infinite;
}

.buttons-liquid-glass-page .lg-btn.living.secondary {
  background-image: linear-gradient(120deg, rgba(120, 90, 255, .3), rgba(23, 190, 192, .22) 58%, rgba(255, 138, 91, .24));
  background-size: 220% 220%;
  animation: living-drift 11s ease-in-out infinite;
}

.buttons-liquid-glass-page .lg-btn.living::after {
  content: "";
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 34%;
  pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .34), transparent);
  transform: translateX(-160%) skewX(-12deg);
  animation: living-sheen 8.5s ease-in-out infinite;
}

@keyframes living-drift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes living-sheen {
  0% { transform: translateX(-160%) skewX(-12deg); }
  55%, 100% { transform: translateX(420%) skewX(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .buttons-liquid-glass-page .living-glass-title,
  .buttons-liquid-glass-page .lg-btn.living,
  .buttons-liquid-glass-page .lg-btn.living::after {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .buttons-liquid-glass-page .lg-btn {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Brand kicker above the page title — subtle, but legible on both themes. */
.buttons-liquid-glass-page .page-brand-kicker {
  display: block;
  margin-bottom: var(--lds-space-2);
  color: var(--color-text-secondary);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .page-brand-kicker {
  color: rgba(233, 239, 248, .70);
}

/* Page appearance toggle — Dark (default) / Light, scoped to the Button page. */
.buttons-liquid-glass-page .buttons-hero-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--lds-space-3);
  flex-wrap: wrap;
}

.buttons-liquid-glass-page .page-theme-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid rgba(120, 140, 170, .35);
  border-radius: var(--lds-radius-pill);
  background: rgba(255, 255, 255, .5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.buttons-liquid-glass-page .page-theme-btn {
  min-height: 30px;
  padding: 0 14px;
  border: 0;
  border-radius: var(--lds-radius-pill);
  background: transparent;
  color: var(--glass-muted);
  font: inherit;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}

.buttons-liquid-glass-page .page-theme-btn[aria-pressed="true"] {
  background: var(--glass-ink);
  color: #FFFFFF;
}

.buttons-liquid-glass-page .page-theme-btn:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: 2px;
}

/* Dark page theme (default). Restyles the Button page CHROME only — the Light and
   Dark surface demo panels keep their own backgrounds and text so both stay valid. */
body[data-button-theme="dark"] .buttons-liquid-glass-page::before {
  background:
    radial-gradient(circle at 18% 16%, rgba(60, 120, 220, .30), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(90, 180, 230, .18), transparent 30%),
    radial-gradient(circle at 72% 80%, rgba(120, 90, 200, .16), transparent 32%),
    linear-gradient(135deg, #0B0E14 0%, #10151F 48%, #0B0E14 100%);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page :is(.page-header, .benchmark-section, .pdf-anatomy-stage) {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .64), rgba(20, 24, 34, .48)),
    rgba(18, 22, 32, .6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .1),
    0 24px 70px rgba(0, 0, 0, .4);
  color: #E9EFF8;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page :is(h1, h2, h3, h4, p, dt, code, .page-lead, .section-number, .component-history-list li) {
  color: #E9EFF8;
}

/* Preserve the demo panels: every light-surface demo (Surface, Button kinds, and
   State matrices) keeps its light background, so re-assert dark text on its
   headers and labels — otherwise the blanket light text lands light-on-light. */
body[data-button-theme="dark"] .buttons-liquid-glass-page :is(.surface-demo.light-surface, .kind-surface.light-surface, .pdf-state-surface.light-surface),
body[data-button-theme="dark"] .buttons-liquid-glass-page :is(.surface-demo.light-surface, .kind-surface.light-surface, .pdf-state-surface.light-surface) :is(h3, h4, strong, span, p, dt, dd, code, li) {
  color: var(--glass-ink);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .glass-principle-card {
  border-color: rgba(255, 255, 255, .14);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .6), rgba(20, 24, 34, .42)),
    rgba(18, 22, 32, .54);
  color: #E9EFF8;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .glass-principle-title {
  color: #EAF0F8;
  border-bottom-color: rgba(255, 255, 255, .14);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .glass-principle-list li {
  color: rgba(233, 239, 248, .82);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .glass-principle-list li::before {
  background: #6EA8FF;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .page-theme-toggle {
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .08);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .page-theme-btn {
  color: #C6D2E2;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .page-theme-btn[aria-pressed="true"] {
  background: #FFFFFF;
  color: #12151C;
}

/* Issue 1: section-number badge — light digit on a dark-blue disc (was light on pale). */
body[data-button-theme="dark"] .buttons-liquid-glass-page .section-number {
  color: #C2D7FF;
  background: rgba(70, 110, 190, .22);
  border-color: rgba(150, 180, 240, .55);
}

/* Issues 2 & 3: anatomy SVG reads on dark — hit area, measurement labels/notes/lines. */
body[data-button-theme="dark"] .buttons-liquid-glass-page .button-svg-hit-area {
  fill: color-mix(in srgb, #6AA0FF 30%, transparent);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .button-svg-measure-label {
  fill: #EAF0F8;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .button-svg-measure-note {
  fill: #AEBBCE;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page :is(.button-svg-measure-line, .button-svg-margin-line) {
  stroke: #8FB0EC;
}

/* Issue 4: anatomy legend — convert the card to dark with readable label, note, and badge. */
body[data-button-theme="dark"] .buttons-liquid-glass-page .pdf-anatomy-legend {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .64), rgba(20, 24, 34, .48)),
    rgba(18, 22, 32, .6);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .pdf-anatomy-legend strong {
  color: #EAF0F8;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .pdf-anatomy-legend p {
  color: #AEBBCE;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .numbered-explanation-list li > span {
  color: #C2D7FF;
  border-color: #7FA8E8;
  background: rgba(18, 22, 32, .6);
}

/* Issue 7: accessibility note cards — convert from white to dark with light text. */
body[data-button-theme="dark"] .buttons-liquid-glass-page .behavioral-note-grid p {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .6), rgba(20, 24, 34, .42)),
    rgba(18, 22, 32, .56);
  color: #EAF0F8;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .behavioral-note-grid code {
  color: #C6D2E2;
}

/* Size, Layout, and Behaviors cards demonstrate LIGHT-surface buttons (blue primary).
   They must stay light surfaces so the button reads correctly and matches the other
   light-surface demos — only explicitly dark-surface panels show the white primary.
   Keep their base light background; re-assert dark text so nothing strands on light. */
body[data-button-theme="dark"] .buttons-liquid-glass-page :is(.button-size-grid article, .layout-spec-card, .behavior-card),
body[data-button-theme="dark"] .buttons-liquid-glass-page :is(.button-size-grid article, .layout-spec-card, .behavior-card) :is(h3, h4, strong, span, p, dt, dd, code, li) {
  color: var(--glass-ink);
}

/* Issue: the Developer/API note (quiet-details + property-table) was never darkened. */
body[data-button-theme="dark"] .buttons-liquid-glass-page .quiet-details {
  border-color: rgba(255, 255, 255, .12);
  background:
    linear-gradient(135deg, rgba(40, 48, 64, .6), rgba(20, 24, 34, .42)),
    rgba(18, 22, 32, .56);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .quiet-details summary {
  color: #E9EFF8;
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .property-table {
  border-color: rgba(255, 255, 255, .16);
}

body[data-button-theme="dark"] .buttons-liquid-glass-page .property-table :is(span, strong) {
  color: #E9EFF8;
  border-bottom-color: rgba(255, 255, 255, .14);
}

/* LDS surface system: Liquid Glass atmosphere and section elevation across the site. */
:root {
  --lds-glass-shadow: 0 24px 70px rgba(16, 28, 56, .18);
  --lds-glass-shadow-soft: 0 14px 38px rgba(16, 28, 56, .12);
  --lds-glass-border: rgba(255, 255, 255, .62);
  --lds-glass-radius-outer: var(--lds-radius-lg);
  --lds-glass-radius-inner: var(--lds-radius-md);
  --lds-atmosphere-bg:
    radial-gradient(circle at 18% 16%, rgba(72, 146, 255, .28), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(112, 222, 255, .24), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(255, 114, 96, .16), transparent 30%),
    linear-gradient(135deg, #F8FBFF 0%, #E9F3FF 46%, #F8FAFF 100%);
  --lds-glass-orb-a: rgba(255, 255, 255, .34);
  --lds-glass-orb-b: rgba(11, 99, 255, .14);
  --lds-glass-hero-orb: rgba(11, 99, 255, .2);
  --lds-glass-surface:
    linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .34)),
    rgba(255, 255, 255, .42);
  --lds-glass-hero:
    linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(236, 247, 255, .42)),
    radial-gradient(circle at 92% 10%, var(--lds-glass-hero-orb), transparent 34%);
  --lds-glass-shell:
    linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .48)),
    rgba(255, 255, 255, .58);
  --lds-glass-inner:
    linear-gradient(135deg, rgba(255, 255, 255, .56), rgba(255, 255, 255, .28)),
    rgba(255, 255, 255, .36);
}

body {
  background: var(--lds-atmosphere-bg);
  background-attachment: fixed;
}

body[data-route-group="foundations"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 16% 14%, rgba(52, 132, 255, .3), transparent 28%),
    radial-gradient(circle at 84% 10%, rgba(89, 221, 255, .22), transparent 30%),
    radial-gradient(circle at 70% 82%, rgba(150, 181, 255, .16), transparent 34%),
    linear-gradient(135deg, #F9FCFF 0%, #E8F5FF 45%, #F7FAFF 100%);
  --lds-glass-orb-b: rgba(10, 115, 255, .15);
  --lds-glass-hero-orb: rgba(10, 115, 255, .22);
}

body[data-route-group="components"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 16% 16%, rgba(72, 146, 255, .28), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(112, 222, 255, .22), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(255, 114, 96, .17), transparent 30%),
    linear-gradient(135deg, #F8FBFF 0%, #E9F3FF 46%, #F8FAFF 100%);
  --lds-glass-orb-b: rgba(11, 99, 255, .14);
  --lds-glass-hero-orb: rgba(11, 99, 255, .2);
}

body[data-route-group="patterns"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 18% 14%, rgba(115, 95, 255, .22), transparent 29%),
    radial-gradient(circle at 82% 16%, rgba(71, 214, 184, .2), transparent 30%),
    radial-gradient(circle at 72% 80%, rgba(255, 184, 108, .14), transparent 31%),
    linear-gradient(135deg, #FBFAFF 0%, #EEF7FF 44%, #F8FFFC 100%);
  --lds-glass-orb-b: rgba(115, 95, 255, .13);
  --lds-glass-hero-orb: rgba(71, 214, 184, .18);
}

body[data-route-group="rulings"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 16% 16%, rgba(255, 184, 108, .23), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(72, 146, 255, .2), transparent 29%),
    radial-gradient(circle at 74% 82%, rgba(255, 114, 96, .13), transparent 31%),
    linear-gradient(135deg, #FFFCF8 0%, #EEF5FF 48%, #FFF8F7 100%);
  --lds-glass-orb-b: rgba(255, 142, 72, .12);
  --lds-glass-hero-orb: rgba(255, 142, 72, .18);
}

body[data-route="foundation-typography"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 14% 14%, rgba(19, 23, 34, .1), transparent 28%),
    radial-gradient(circle at 86% 10%, rgba(11, 99, 255, .2), transparent 30%),
    radial-gradient(circle at 70% 84%, rgba(255, 114, 96, .14), transparent 32%),
    linear-gradient(135deg, #FFFFFF 0%, #EEF4FF 50%, #FAFBFF 100%);
  --lds-glass-hero-orb: rgba(19, 23, 34, .12);
}

body[data-route="foundation-typography"][data-color-theme="light"] {
  --type-hero-surface:
    radial-gradient(ellipse 86% 48% at 6% 4%, rgba(255,255,255,.92), transparent 74%),
    radial-gradient(ellipse 74% 46% at 104% 12%, rgba(108,170,246,.20), transparent 76%),
    radial-gradient(ellipse 82% 46% at 2% 104%, rgba(239,121,177,.13), transparent 78%),
    linear-gradient(142deg, rgba(255,255,255,.86), rgba(241,244,251,.78) 58%, rgba(250,252,255,.82));
  --type-hero-edge: rgba(82,103,132,.24);
  --type-hero-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 24px 56px -42px rgba(40,56,82,.36);
}

body[data-route="foundation-typography"][data-color-theme="dark"] {
  --type-hero-surface:
    radial-gradient(ellipse 92% 52% at 4% 0%, rgba(229,240,255,.10), transparent 72%),
    radial-gradient(ellipse 82% 48% at 108% 8%, rgba(36,202,235,.13), transparent 76%),
    radial-gradient(ellipse 92% 48% at -8% 108%, rgba(232,51,164,.11), transparent 78%),
    radial-gradient(ellipse 84% 50% at 112% 104%, rgba(137,75,226,.11), transparent 78%),
    linear-gradient(142deg, rgba(29,34,46,.92), rgba(17,22,32,.90) 58%, rgba(14,20,28,.88));
  --type-hero-edge: rgba(176,205,255,.18);
  --type-hero-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 26px 62px -42px rgba(0,0,0,.68),
    0 0 34px -24px rgba(36,202,235,.30);
}

body[data-route="foundation-color"][data-color-theme="dark"] {
  --lds-atmosphere-bg:
    radial-gradient(ellipse at 8% 2%, rgba(157, 184, 226, .22), transparent 28%),
    radial-gradient(ellipse at 27% 88%, rgba(205, 79, 168, .14), transparent 32%),
    radial-gradient(ellipse at 52% -4%, rgba(126, 94, 197, .17), transparent 35%),
    radial-gradient(ellipse at 79% 13%, rgba(59, 187, 218, .17), transparent 32%),
    radial-gradient(ellipse at 96% 82%, rgba(171, 184, 90, .09), transparent 36%),
    linear-gradient(127deg, transparent 12%, rgba(139, 101, 208, .07) 31%, transparent 49%),
    linear-gradient(41deg, transparent 33%, rgba(52, 177, 208, .06) 52%, transparent 72%),
    linear-gradient(135deg, #07080C 0%, #11141D 49%, #07090E 100%);
  --color-bg-panel: #151A23;
  --color-bg-surface: #10151F;
  --color-bg-inset: #0B0E14;
  --color-text-primary: #E9EFF8;
  --color-text-secondary: rgba(233, 239, 248, .72);
  --color-text-muted: rgba(233, 239, 248, .54);
  --color-border-subtle: rgba(255, 255, 255, .13);
  --lds-glass-border: rgba(255, 255, 255, .13);
  --lds-glass-shell:
    linear-gradient(135deg, rgba(28, 34, 47, .78), rgba(12, 16, 24, .72)),
    rgba(12, 16, 24, .76);
  --lds-glass-surface:
    linear-gradient(135deg, rgba(40, 48, 64, .64), rgba(20, 24, 34, .48)),
    rgba(18, 22, 32, .6);
  --lds-glass-hero:
    linear-gradient(135deg, rgba(40, 48, 64, .68), rgba(20, 24, 34, .5)),
    radial-gradient(circle at 88% 12%, rgba(94, 210, 255, .18), transparent 34%),
    rgba(18, 22, 32, .64);
  --lds-glass-shadow: 0 24px 70px rgba(0, 0, 0, .4);
}

body[data-route="foundation-color"][data-color-theme="dark"] :is(.app-topbar, .app-footer, .app-nav) {
  color: #E9EFF8;
}

body[data-route="foundation-color"][data-color-theme="dark"] .app-topbar {
  border-bottom-color: rgba(255, 255, 255, .10);
  background:
    linear-gradient(135deg, rgba(28, 34, 47, .78), rgba(12, 16, 24, .68)),
    rgba(12, 16, 24, .74);
  box-shadow: 0 16px 44px rgba(0, 0, 0, .24);
}

body[data-route="foundation-color"][data-color-theme="dark"] .app-nav {
  --nav-section-color: #94B9FF;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .06),
    18px 0 52px rgba(0, 0, 0, .28);
}

body[data-route="foundation-color"][data-color-theme="dark"] .brand-panel {
  border-color: rgba(148, 185, 255, .24);
  background:
    linear-gradient(135deg, rgba(46, 58, 79, .72), rgba(13, 20, 34, .72)),
    rgba(16, 24, 39, .78);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .12),
    0 18px 42px rgba(0, 0, 0, .26);
}

body[data-route="foundation-color"][data-color-theme="dark"] .brand-lockup {
  border-radius: calc(var(--lds-radius-lg) - 2px);
  color: #F4F8FF;
}

body[data-route="foundation-color"][data-color-theme="dark"] .brand-lockup:hover {
  border-color: rgba(148, 185, 255, .30);
  background:
    linear-gradient(135deg, rgba(80, 132, 255, .16), rgba(24, 190, 202, .09)),
    rgba(255, 255, 255, .045);
}

body[data-route="foundation-color"][data-color-theme="dark"] .brand-crest {
  color: #DDEBFF;
  opacity: .96;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, .32));
}

body[data-route="foundation-color"][data-color-theme="dark"] .brand-lockup-text .eyebrow {
  color: rgba(221, 235, 255, .62);
}

body[data-route="foundation-color"][data-color-theme="dark"] .version-chip {
  border-color: rgba(255, 255, 255, .14);
  color: rgba(244, 248, 255, .86);
  background: rgba(255, 255, 255, .08);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group-title {
  color: rgba(233, 239, 248, .62);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group h2 {
  color: #94B9FF;
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group h2::after {
  background: linear-gradient(90deg, rgba(148, 185, 255, .36), transparent);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group a {
  min-height: 42px;
  border-radius: var(--lds-radius-pill);
  color: rgba(233, 239, 248, .72);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, transform 160ms ease;
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group a:hover {
  border-color: rgba(148, 185, 255, .24);
  color: #FFFFFF;
  background:
    linear-gradient(135deg, rgba(148, 185, 255, .14), rgba(24, 190, 202, .08)),
    rgba(255, 255, 255, .055);
  transform: translateX(2px);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group a.active {
  border-color: rgba(125, 176, 255, .42);
  color: #FFFFFF;
  background:
    linear-gradient(135deg, rgba(80, 132, 255, .34), rgba(24, 190, 202, .20)),
    rgba(255, 255, 255, .09);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .14),
    0 10px 24px rgba(0, 0, 0, .20);
}

/* Dark navigation lens: a chromatic glass pane, not an opaque blue capsule.
   Text remains independent above the lens, so material transparency can be
   visible without weakening label contrast. */
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator {
  background:
    radial-gradient(ellipse at 26% -8%, rgba(255,255,255,.22), transparent 42%),
    radial-gradient(ellipse at 84% 118%, rgba(78,216,255,.13), transparent 52%),
    linear-gradient(108deg, rgba(126,205,255,.14), rgba(91,119,235,.10) 48%, rgba(49,194,224,.09)),
    rgba(126,190,230,.055);
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::before {
  opacity: .34;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::after {
  opacity: .42;
}

body[data-route="foundation-color"][data-color-theme="dark"] .app-topbar strong,
body[data-route="foundation-color"][data-color-theme="dark"] .app-footer-signature {
  color: #E9EFF8;
}

body[data-route="component-buttons"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 18% 16%, rgba(72, 146, 255, .28), transparent 28%),
    radial-gradient(circle at 86% 12%, rgba(112, 222, 255, .24), transparent 28%),
    radial-gradient(circle at 72% 78%, rgba(255, 114, 96, .16), transparent 30%),
    linear-gradient(135deg, #F8FBFF 0%, #E9F3FF 46%, #F8FAFF 100%);
}

body[data-route="component-notification"],
body[data-route="component-badge"],
body[data-route="component-badge-indicator"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 16% 15%, rgba(0, 174, 222, .22), transparent 28%),
    radial-gradient(circle at 84% 12%, rgba(16, 178, 85, .16), transparent 30%),
    radial-gradient(circle at 72% 80%, rgba(245, 37, 27, .1), transparent 32%),
    linear-gradient(135deg, #F8FDFF 0%, #EEF9F5 48%, #FFF8F7 100%);
  --lds-glass-hero-orb: rgba(0, 174, 222, .18);
}

body[data-route="component-table"],
body[data-route="component-tabs"],
body[data-route="component-pagination"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 16% 14%, rgba(89, 125, 255, .2), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(112, 222, 255, .18), transparent 30%),
    radial-gradient(circle at 72% 80%, rgba(13, 17, 23, .06), transparent 32%),
    linear-gradient(135deg, #F9FBFF 0%, #EEF4FF 50%, #F7FAFF 100%);
  --lds-glass-hero-orb: rgba(89, 125, 255, .18);
}

body[data-route="component-input-field"],
body[data-route="component-form-elements"],
body[data-route="component-text-area"],
body[data-route="component-checkbox"],
body[data-route="component-radio"],
body[data-route="component-radio-box"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 16% 14%, rgba(71, 214, 184, .18), transparent 30%),
    radial-gradient(circle at 86% 12%, rgba(72, 146, 255, .18), transparent 30%),
    radial-gradient(circle at 74% 82%, rgba(255, 184, 108, .12), transparent 32%),
    linear-gradient(135deg, #F8FFFC 0%, #EEF7FF 48%, #FFFDF8 100%);
  --lds-glass-hero-orb: rgba(71, 214, 184, .16);
}

.page-header,
.benchmark-section,
.source-component-page > article,
.source-component-page > section,
.foundation-page-grid > .panel-card,
.foundation-value-grid,
.foundation-swatch-group,
.type-readiness-section,
.type-direction-item,
.type-readiness-card,
.type-stack-card,
.type-usage-card {
  border-color: var(--lds-glass-border);
  border-radius: var(--lds-glass-radius-outer);
  background: var(--lds-glass-surface);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .88),
    inset 0 -1px 0 rgba(255, 255, 255, .24),
    var(--lds-glass-shadow);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.app-nav,
.app-topbar,
.app-footer {
  border-color: color-mix(in srgb, var(--lds-glass-border) 72%, transparent);
  background: var(--lds-glass-shell);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 14px 44px rgba(16, 28, 56, .1);
  backdrop-filter: blur(22px) saturate(145%);
  -webkit-backdrop-filter: blur(22px) saturate(145%);
}

.app-topbar {
  position: sticky;
  top: 0;
  z-index: var(--lds-z-sticky);
}

.brand-panel,
.nav-group a.active {
  border-color: color-mix(in srgb, var(--lds-glass-border) 76%, var(--color-border-subtle));
  background: var(--lds-glass-inner);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .74),
    var(--lds-glass-shadow-soft);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}

.nav-group a {
  transition:
    transform 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.nav-group a:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(16, 28, 56, .08);
}

.benchmark-section :is(
  .configuration-card,
  .layout-spec-card,
  .behavior-card,
  .surface-demo,
  .kind-surface,
  .pdf-state-surface,
  .tl-behavior-card,
  [class*="-config-card"],
  [class*="-layout-card"],
  [class*="-rule-card"],
  [class*="-state-surface"],
  [class*="-behavior-card"],
  [class*="-measure-card"]
) {
  border-radius: var(--lds-glass-radius-inner);
}

.page-header {
  position: relative;
  overflow: hidden;
  background: var(--lds-glass-hero);
}

.page-header::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, .7), transparent 28%, rgba(255, 255, 255, .24) 62%, transparent);
  opacity: .72;
}

.page-header > * {
  position: relative;
  z-index: 1;
}

.benchmark-section,
.source-component-page > article,
.source-component-page > section,
.foundation-page-grid > .panel-card,
.foundation-value-grid,
.foundation-swatch-group {
  position: relative;
}

.benchmark-section::before,
.source-component-page > article::before,
.source-component-page > section::before,
.foundation-page-grid > .panel-card::before,
.foundation-value-grid::before,
.foundation-swatch-group::before {
  content: "";
  position: absolute;
  inset: -12px;
  z-index: -1;
  pointer-events: none;
  border-radius: calc(var(--lds-radius-lg) + 12px);
  background:
    radial-gradient(circle at 24% 24%, var(--lds-glass-orb-a), transparent 34%),
    radial-gradient(circle at 78% 70%, var(--lds-glass-orb-b), transparent 34%);
  opacity: .62;
}

.dark-surface,
.pdf-state-surface.dark-surface,
[class*="dark"] .dark-surface {
  border-color: rgba(255, 255, 255, .18);
  color: var(--color-text-inverse);
  background:
    linear-gradient(135deg, rgba(31, 36, 48, .82), rgba(14, 16, 22, .72)),
    rgba(15, 18, 25, .82);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .24),
    0 24px 70px rgba(0, 0, 0, .34);
}

@media (prefers-reduced-transparency: reduce) {
  .app-nav,
  .app-topbar,
  .app-footer,
  .brand-panel,
  .nav-group a.active,
  .page-header,
  .benchmark-section,
  .source-component-page > article,
  .source-component-page > section,
  .foundation-page-grid > .panel-card,
  .foundation-value-grid,
  .foundation-swatch-group,
  .type-readiness-section,
  .type-direction-item,
  .type-readiness-card,
  .type-stack-card,
  .type-usage-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* LDS standardization layer: page rail, section gutters, and component documentation rhythm. */
:root {
  --lds-page-rail-max: 1180px;
  --lds-page-rail-gutter: var(--lds-page-gutter-mobile);
  --lds-section-padding-x: clamp(20px, 5vw, 40px);
  --lds-section-padding-y: clamp(24px, 4vw, 40px);
  --lds-section-inner-gap: var(--lds-section-gap-standard);
  --lds-card-inner-padding: clamp(16px, 3vw, 28px);
  --lds-card-inner-gap: var(--lds-space-4);
  --lds-doc-heading-gap: var(--lds-space-2);
  --lds-doc-item-gap: var(--lds-space-3);
  --lds-tabs-active-color: var(--color-selected-text);
  --lds-tabs-hover-color: var(--lds-interaction-hover-icon);
  --lds-tabs-selected-bg: var(--color-selected-bg);
  --lds-section-nav-gap: var(--lds-space-6);
}

.page-host {
  padding: var(--lds-page-rail-gutter);
}

.page,
.source-component-page,
.tabs-source-page,
.input-source-page,
.modal-spec-page {
  width: 100%;
  max-width: var(--lds-page-rail-max);
  margin-inline: auto;
}

.page {
  gap: var(--lds-section-gap-major);
  grid-template-columns: minmax(0, 1fr);
}

.page > * {
  min-width: 0;
  max-width: 100%;
}

.source-component-page,
.tabs-source-page,
.input-source-page,
.notification-source-page {
  padding-inline: 0;
}

.page-header,
.benchmark-section,
.source-component-page > article,
.source-component-page > section,
.component-spec-hero,
.foundation-page-grid > .panel-card,
.foundation-value-grid,
.foundation-swatch-group,
.type-readiness-section,
.type-direction-item,
.type-readiness-card,
.type-stack-card,
.type-usage-card {
  padding: var(--lds-section-padding-y) var(--lds-section-padding-x);
}

.benchmark-section,
.source-component-page > article,
.source-component-page > section,
.foundation-page-grid > .panel-card,
.foundation-value-grid,
.foundation-swatch-group {
  gap: var(--lds-section-inner-gap);
}

.source-component-page :is(
  .tl-config-card,
  .tl-behavior-card,
  .tl-measure-card,
  .tl-state-card,
  .atom-state-card,
  [class*="-config-card"],
  [class*="-layout-card"],
  [class*="-rule-card"],
  [class*="-state-surface"],
  [class*="-behavior-card"],
  [class*="-measure-card"],
  [class*="-demo-card"]
),
.buttons-pdf-spec :is(
  .configuration-card,
  .layout-spec-card,
  .behavior-card,
  .pdf-state-surface,
  .surface-demo,
  .kind-surface,
  .button-size-grid article
),
.panel-card,
.hero-card,
.review-card,
.atom-state-card {
  gap: var(--lds-card-inner-gap);
  padding: var(--lds-card-inner-padding);
}

.section-title-row,
.source-component-page .section-title-row,
.buttons-pdf-spec .section-title-row {
  align-items: start;
  gap: var(--lds-space-4);
}

.section-title-row > div {
  display: grid;
  gap: var(--lds-doc-heading-gap);
  min-width: 0;
}

.section-title-row h2,
.source-component-page .section-title-row h2,
.buttons-pdf-spec .section-title-row h2 {
  margin: 0;
  color: var(--color-text-primary);
  font-size: clamp(1.45rem, 3vw, var(--lds-display-sm));
  line-height: var(--lds-line-tight);
  letter-spacing: 0;
}

.section-title-row p,
.source-component-page .section-title-row p,
.buttons-pdf-spec .section-title-row p {
  max-width: 76ch;
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.dark-surface :is(h1, h2, h3, h4, h5, h6, strong, .eyebrow, .section-title-row h2),
.pdf-state-surface.dark-surface :is(h1, h2, h3, h4, h5, h6, strong, .eyebrow),
[class*="dark"] :is(.kind-surface h4, .surface-demo h3, .pdf-state-surface h3) {
  color: var(--color-text-inverse);
}

.dark-surface :is(p, li, span:not(.section-number):not(.chip):not(.status-chip):not(.input-live-feedback):not(.input-live-feedback-text)),
.pdf-state-surface.dark-surface :is(p, li, span:not(.section-number):not(.chip):not(.status-chip):not(.input-live-feedback):not(.input-live-feedback-text)) {
  color: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);
}

:is(
  .numbered-explanation-list,
  .tl-anatomy-key,
  [class*="-anatomy-key"],
  [class*="-info-list"],
  [class*="-history-list"]
) {
  gap: var(--lds-doc-item-gap);
}

.numbered-explanation-list li > span,
:is(
  .tl-inline-number,
  [class*="-key-num"],
  [class*="-inline-number"]
) {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1.5px solid var(--color-accent);
  border-radius: var(--lds-radius-pill);
  color: var(--color-accent);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  text-align: center;
}

:is(
  .source-component-page,
  .buttons-pdf-spec,
  .foundation-page-grid,
  .type-editorial-page
) :is(ul, ol):not(.nav-tree):not(.numbered-explanation-list):not(.tokens-list) {
  padding-left: 1.25rem;
}

:is(
  .source-component-page,
  .buttons-pdf-spec,
  .foundation-page-grid,
  .type-editorial-page
) li + li {
  margin-top: var(--lds-space-2);
}

:is(
  .source-component-page,
  .buttons-pdf-spec,
  .foundation-page-grid,
  .type-editorial-page,
  .page
) code {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 720px) {
  :root {
    --lds-page-rail-gutter: var(--lds-page-gutter-tablet);
  }
}

@media (min-width: 1040px) {
  :root {
    --lds-page-rail-gutter: var(--lds-page-gutter-desktop);
    --lds-section-padding-x: 40px;
    --lds-section-padding-y: 40px;
  }

  .page {
    gap: var(--lds-section-gap-major);
  }
}

@media (min-width: 1280px) {
  :root {
    --lds-page-rail-gutter: var(--lds-page-gutter-wide);
    --lds-section-padding-x: 48px;
  }
}

@media (max-width: 520px) {
  :root {
    --lds-section-padding-x: 20px;
    --lds-section-padding-y: 24px;
    --lds-card-inner-padding: 16px;
  }

  .section-title-row {
    gap: var(--lds-space-3);
  }

  .section-number {
    width: 36px;
    height: 36px;
  }
}

/* Input Field page QA corrections: LDS blue, sticky section tabs, attached actions, explicit state surfaces. */
.input-source-page {
  gap: 0;
  --input-anatomy-focus: var(--lds-tabs-active-color);
  --input-anatomy-focus-ring: color-mix(in srgb, var(--lds-tabs-active-color) 22%, transparent);
}

.input-source-page .input-onpage-nav {
  margin-top: var(--lds-section-nav-gap);
  margin-bottom: var(--lds-section-nav-gap);
  border: 1px solid color-mix(in srgb, var(--lds-glass-border) 72%, transparent);
  border-radius: var(--lds-radius-lg);
}

.input-source-page .onpage-link {
  color: var(--color-text-secondary);
}

.input-source-page .onpage-link:hover,
.input-source-page .onpage-link:first-child,
.input-source-page .onpage-link.is-active {
  color: var(--lds-tabs-active-color);
  border-bottom-color: var(--lds-tabs-active-color);
}

.input-source-page .onpage-link:hover {
  color: var(--lds-tabs-hover-color);
  border-bottom-color: var(--lds-tabs-hover-color);
  background: color-mix(in srgb, var(--lds-tabs-selected-bg) 44%, transparent);
}

.input-source-page .if-section + .if-section {
  margin-top: var(--lds-section-gap-compact);
}

.input-source-page .input-anatomy-preview {
  display: grid;
  gap: var(--lds-space-4);
}

.input-source-page .input-anatomy-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--lds-space-4);
}

.input-source-page .input-anatomy-mode-toggle {
  position: relative;
  display: inline-flex;
  inline-size: 148px;
  block-size: 38px;
  padding: 3px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 22%, var(--color-border-subtle));
  border-radius: var(--lds-radius-pill);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.66)),
    var(--color-bg-panel);
  box-shadow:
    inset 0 1px 2px rgba(17, 31, 54, .08),
    0 10px 28px rgba(17, 31, 54, .08);
}

.input-source-page .input-anatomy-mode-toggle::before {
  content: "";
  position: absolute;
  inset: 3px auto 3px 3px;
  inline-size: calc(50% - 3px);
  border-radius: var(--lds-radius-pill);
  background:
    linear-gradient(180deg, var(--color-accent), var(--color-accent-active));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    0 6px 16px rgba(11, 92, 255, .26);
  transition:
    transform var(--lds-motion-fast) ease,
    box-shadow var(--lds-motion-fast) ease;
}

.input-source-page .input-anatomy-mode-toggle.is-dark::before {
  transform: translateX(100%);
}

.input-source-page .input-anatomy-mode-toggle button {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  min-width: 0;
  min-height: 32px;
  border: 0;
  border-radius: var(--lds-radius-pill);
  color: var(--color-text-secondary);
  background: transparent;
  font: inherit;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
}

.input-source-page .input-anatomy-mode-toggle button:hover {
  color: var(--color-accent-hover);
  background: transparent;
}

.input-source-page .input-anatomy-mode-toggle button.is-active {
  color: var(--color-accent-text);
  background: transparent;
}

.input-source-page .input-anatomy-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
  gap: var(--lds-section-gap-compact);
  align-items: stretch;
}

.input-source-page .input-anatomy-key {
  min-width: 0;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--lds-glass-radius-inner);
  background:
    linear-gradient(135deg, rgba(255,255,255,.82), rgba(255,255,255,.48)),
    var(--color-bg-panel);
}

.input-source-page .input-anatomy-figure {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: clamp(20px, 4vw, 40px) 0;
  overflow-x: auto;
}

.input-source-page .input-anatomy-diagram {
  display: grid;
  gap: var(--lds-space-2);
  width: min(100%, 700px);
  padding: clamp(8px, 2vw, 16px) 0;
}

.input-source-page .iad-row {
  display: grid;
  grid-template-columns: 116px minmax(320px, 440px) 92px;
  align-items: center;
  min-width: 0;
}

.input-source-page .iad-label-only {
  margin-top: var(--lds-space-4);
}

.input-source-page .iad-spacer {
  height: var(--lds-space-4);
}

.input-source-page .iad-label-row {
  display: inline-flex;
  align-items: center;
  gap: var(--component-icon-text-gap);
  min-height: 28px;
  color: var(--color-text-primary);
}

.input-source-page .iad-label-row strong {
  font-weight: var(--font-weight-bold);
}

.input-source-page .iad-label-row span {
  color: var(--color-text-secondary);
}

.input-source-page .iad-info {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--lds-tabs-active-color);
  border-radius: var(--lds-radius-pill);
  color: var(--lds-tabs-active-color) !important;
  font-size: 10px;
  font-style: italic;
  font-weight: var(--font-weight-bold);
}

.input-source-page .iad-control {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  overflow: hidden;
  border: 1.5px solid var(--color-info-border);
  border-radius: var(--lds-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(255,255,255,.76)),
    var(--color-bg-surface);
  box-shadow: 0 12px 32px rgba(17, 31, 54, .08);
}

.input-source-page .iad-control.iad-error {
  border-color: var(--color-danger-border);
  background: var(--color-danger-bg);
}

.input-source-page .iad-control.iad-success {
  border-color: var(--color-success-border);
  background: var(--color-success-bg);
}

.input-source-page .iad-value {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 var(--lds-space-4);
  overflow: hidden;
  color: var(--color-text-primary);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.input-source-page .iad-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  padding: 0 var(--lds-space-4);
  color: var(--color-text-primary);
  background: transparent;
  font: inherit;
}

.input-source-page .iad-input::placeholder {
  color: var(--color-text-placeholder);
  opacity: 1;
}

.input-source-page .iad-input:focus-visible {
  outline: 0;
  box-shadow: none;
}

.input-source-page .iad-control:focus-within {
  border-color: var(--input-anatomy-focus);
  box-shadow:
    0 0 0 3px var(--input-anatomy-focus-ring),
    0 12px 32px rgba(17, 31, 54, .08);
}

.input-source-page .iad-masked {
  letter-spacing: 2px;
}

.input-source-page .iad-typeover {
  color: var(--color-text-placeholder);
  letter-spacing: 0;
}

.input-source-page .iad-action {
  position: relative;
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  overflow: hidden;
  border: 0;
  border-inline-start: 1px solid var(--color-border-standard);
  border-radius: 0 var(--lds-radius-md) var(--lds-radius-md) 0;
  color: var(--lds-tabs-active-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(226,236,255,.56)),
    color-mix(in srgb, var(--lds-tabs-selected-bg) 76%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(255, 255, 255, .22);
  backdrop-filter: blur(18px) saturate(170%);
  -webkit-backdrop-filter: blur(18px) saturate(170%);
  font: inherit;
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  transition:
    transform var(--lds-motion-fast) ease,
    box-shadow var(--lds-motion-fast) ease,
    color var(--lds-motion-fast) ease,
    background var(--lds-motion-fast) ease;
}

.input-source-page .iad-action::after {
  content: "";
  position: absolute;
  inset: -1px;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.48), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.2), transparent 46%);
  opacity: .32;
  mix-blend-mode: screen;
  transform: none;
  transition:
    opacity var(--lds-motion-fast) ease;
}

.input-source-page .iad-action:hover {
  color: var(--lds-tabs-hover-color);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(226,236,255,.62)),
    color-mix(in srgb, var(--color-selected-bg) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px color-mix(in srgb, var(--input-anatomy-focus) 24%, transparent);
  transform: none;
}

.input-source-page .iad-action:hover::after {
  opacity: .46;
}

.input-source-page .iad-icon-action {
  min-width: 56px;
  padding: 0;
}

.input-source-page .iad-calendar-action {
  cursor: pointer;
}

.input-source-page .iad-native-icon {
  width: 22px;
  height: 22px;
}

.input-password-toggle-content {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--lds-space-2);
  min-width: 0;
}

.input-password-toggle-icon {
  display: block;
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
}

.input-source-page .iad-action:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 0 0 2px var(--input-anatomy-focus),
    inset 0 0 0 5px color-mix(in srgb, var(--input-anatomy-focus) 12%, transparent);
}

.input-source-page .iad-helper,
.input-source-page .iad-validation,
.input-source-page .iad-success-text {
  margin: 0;
  color: var(--color-text-helper);
  font-size: var(--font-size-sm);
}

.input-source-page .iad-validation {
  color: var(--color-danger-text);
  font-weight: var(--font-weight-bold);
}

.input-source-page .iad-success-text {
  color: var(--color-success-text);
  font-weight: var(--font-weight-bold);
}

.input-source-page .iad-card {
  display: inline-grid;
  flex: 0 0 auto;
  width: 30px;
  height: 20px;
  margin-left: var(--lds-space-4);
  border: 1px solid var(--color-border-strong);
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-bg-surface) 88%, var(--lds-tabs-selected-bg));
}

.input-source-page .iad-card span:first-child {
  width: 16px;
  height: 2px;
  margin: 5px 0 0 5px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-text-helper);
}

.input-source-page .iad-card span:last-child {
  width: 11px;
  height: 2px;
  margin: -2px 0 0 5px;
  border-radius: var(--lds-radius-pill);
  background: var(--color-text-helper);
}

.input-source-page .iad-status-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-right: var(--lds-space-3);
  color: var(--color-danger-text);
  background: transparent;
  font-weight: var(--font-weight-bold);
}

.input-source-page .iad-status-icon svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.input-source-page .iad-status-icon.success {
  color: var(--color-success-text);
}

.input-source-page .iad-callout {
  display: inline-flex;
  align-items: center;
  color: var(--lds-tabs-active-color);
}

.input-source-page .iad-callout.left {
  justify-self: end;
}

.input-source-page .iad-callout.right {
  justify-self: start;
}

.input-source-page .iad-number {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: var(--lds-radius-pill);
  color: #fff;
  background: var(--lds-tabs-active-color);
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.input-source-page .iad-line {
  width: 54px;
  height: 2px;
  background: var(--lds-tabs-active-color);
}

.input-source-page .iad-dot {
  width: 8px;
  height: 8px;
  border: 2px solid var(--lds-tabs-active-color);
  border-radius: var(--lds-radius-pill);
  background: var(--color-bg-surface);
}

.input-source-page .iad-top-callout {
  position: absolute;
  left: calc(100% - 56px);
  bottom: calc(100% + 4px);
  display: grid;
  justify-items: center;
  gap: 0;
  color: var(--lds-tabs-active-color);
}

.input-source-page .iad-top-callout .iad-line {
  width: 2px;
  height: 34px;
}

.input-source-page .input-anatomy-preview.is-dark .input-anatomy-figure {
  border-radius: var(--lds-glass-radius-inner);
  background:
    radial-gradient(circle at 22% 0%, rgba(83, 149, 255, .18), transparent 32%),
    linear-gradient(135deg, #101720, #171C24 68%, #0D1117);
}

.input-source-page .input-anatomy-preview.is-dark .iad-label-row,
.input-source-page .input-anatomy-preview.is-dark .iad-label-row strong,
.input-source-page .input-anatomy-preview.is-dark .iad-value,
.input-source-page .input-anatomy-preview.is-dark .iad-input {
  color: #F7FAFF;
}

.input-source-page .input-anatomy-preview.is-dark .iad-label-row span,
.input-source-page .input-anatomy-preview.is-dark .iad-helper,
.input-source-page .input-anatomy-preview.is-dark .iad-typeover,
.input-source-page .input-anatomy-preview.is-dark .iad-input::placeholder {
  color: rgba(232, 240, 255, .68);
}

.input-source-page .input-anatomy-preview.is-dark .iad-control {
  border-color: rgba(171, 228, 242, .58);
  background:
    linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.04)),
    rgba(12, 20, 30, .9);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 16px 36px rgba(0,0,0,.28);
}

.input-source-page .input-anatomy-preview.is-dark .iad-control.iad-success {
  border-color: rgba(58, 191, 126, .55);
  background:
    linear-gradient(180deg, rgba(58,191,126,.18), rgba(58,191,126,.08)),
    rgba(12, 20, 30, .9);
}

.input-source-page .input-anatomy-preview.is-dark .iad-control.iad-error {
  border-color: rgba(230, 126, 107, .58);
  background:
    linear-gradient(180deg, rgba(230,126,107,.18), rgba(230,126,107,.08)),
    rgba(12, 20, 30, .9);
}

.input-source-page .input-anatomy-preview.is-dark .iad-action {
  border-inline-start-color: rgba(171, 228, 242, .38);
  color: #E8F0FF;
  background:
    linear-gradient(180deg, rgba(83,149,255,.22), rgba(83,149,255,.1)),
    rgba(255,255,255,.08);
}

.input-source-page .input-anatomy-preview.is-dark .iad-action::after {
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.34), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.14), transparent 48%);
  opacity: .28;
}

.input-source-page .input-anatomy-preview.is-dark .iad-action:hover {
  color: #FFFFFF;
  background:
    linear-gradient(180deg, rgba(83,149,255,.28), rgba(83,149,255,.16)),
    rgba(255,255,255,.12);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 0 0 1px rgba(83, 149, 255, .46);
}

.input-source-page .input-anatomy-preview.is-dark .iad-action:focus-visible {
  box-shadow:
    inset 0 0 0 2px #5395FF,
    inset 0 0 0 5px rgba(83, 149, 255, .18);
}

.input-source-page .input-anatomy-preview.is-dark .iad-card {
  border-color: rgba(232,240,255,.68);
  background: rgba(232,240,255,.12);
}

.input-source-page .input-anatomy-preview.is-dark .iad-card span {
  background: rgba(232,240,255,.7);
}

.input-source-page .input-anatomy-preview.is-dark .iad-dot {
  background: #101720;
}

.input-source-page .input-anatomy-preview.is-dark .iad-info {
  background: rgba(11, 92, 255, .18);
}

.input-source-page .input-anatomy-key {
  display: grid;
  align-content: start;
  gap: var(--lds-space-4);
  padding: var(--lds-card-inner-padding);
}

.input-source-page .input-anatomy-key h3 {
  margin: 0;
}

.input-source-page .input-anatomy-key p {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: var(--lds-space-3);
  margin: 0;
}

.input-source-page .input-anatomy-key p > span:last-child {
  display: grid;
  gap: 2px;
}

.input-source-page .input-anatomy-key strong {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.input-source-page .input-anatomy-key strong + span {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--lds-line-body);
}

.input-source-page .input-anatomy-key-num {
  display: inline-grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--lds-tabs-active-color);
  border-radius: var(--lds-radius-pill);
  color: var(--lds-tabs-active-color);
  background: var(--color-bg-surface);
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

@media (max-width: 860px) {
  .input-source-page .input-anatomy-layout {
    grid-template-columns: 1fr;
  }

  .input-source-page .input-anatomy-figure {
    justify-content: start;
  }

  .input-source-page .input-anatomy-diagram {
    min-width: 640px;
  }
}

.input-source-page .input-container {
  display: flex;
  align-items: stretch;
  gap: 0;
  min-height: 52px;
  overflow: hidden;
  padding: 0;
  border: 1px solid var(--color-border-standard);
  border-color: var(--color-border-standard);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.7)),
    var(--color-bg-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
}

.input-source-page .card-art-placeholder {
  align-self: center;
  margin-left: var(--lds-space-4);
  margin-right: var(--lds-space-3);
}

.input-source-page .input-status-icon {
  align-self: center;
  margin-inline: var(--lds-space-3);
}

.input-source-page .input-value {
  flex: 1 1 auto;
  align-self: center;
  padding: 0 var(--lds-space-4);
}

.input-source-page .card-art-placeholder + .input-value {
  padding-left: 0;
}

.input-source-page .input-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: stretch;
  justify-self: end;
  min-height: 50px;
  min-width: 96px;
  padding: 0 var(--lds-space-5);
  border: 0;
  border-inline-start-width: 1px;
  border-inline-start-style: solid;
  border-inline-start-color: var(--color-border-standard);
  color: var(--color-link);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,236,255,.72)),
    color-mix(in srgb, var(--color-selected-bg) 70%, var(--color-bg-surface));
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.input-source-page .input-action:hover {
  color: var(--color-link-hover);
  background: color-mix(in srgb, var(--color-selected-bg) 76%, var(--color-bg-surface));
}

.input-source-page .input-icon-action {
  min-width: 64px;
  padding: 0 var(--lds-space-4);
}

.input-source-page .input-icon-action svg {
  display: block;
  width: 22px;
  height: 22px;
}

.input-source-page .input-action:focus-visible {
  outline: 2px dashed var(--color-focus-ring);
  outline-offset: -5px;
}

.input-source-page .iad-control .iad-action,
.input-source-page .iad-control .iad-action:visited {
  color: var(--input-anatomy-focus);
}

.input-source-page .iad-control .iad-action:hover {
  color: var(--input-anatomy-focus);
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(226,236,255,.62)),
    color-mix(in srgb, var(--color-selected-bg) 82%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 -1px 0 rgba(255,255,255,.2),
    inset 0 0 0 1px color-mix(in srgb, var(--input-anatomy-focus) 24%, transparent);
  transform: none;
}

.input-source-page .iad-control .iad-action:hover::after {
  opacity: .72;
  transform: translateX(4px);
}

.input-source-page .iad-control .iad-action:focus-visible {
  outline: 0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    inset 0 0 0 2px var(--input-anatomy-focus),
    inset 0 0 0 5px color-mix(in srgb, var(--input-anatomy-focus) 12%, transparent);
}

.input-source-page .input-source-field.is-focus .input-container {
  border-color: var(--color-link);
}

.input-source-page .input-source-field.is-kfocus .input-container {
  border-color: var(--color-link);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-link) 32%, transparent);
}

.input-source-page .input-source-field.is-disabled {
  opacity: 1;
}

.input-source-page .input-source-field.is-disabled .input-container {
  border-color: var(--color-border-subtle);
  color: var(--color-text-disabled);
  background: color-mix(in srgb, var(--color-bg-inset) 80%, var(--color-bg-surface));
}

.input-source-page .input-source-field.is-disabled :is(.input-label, .input-helper, .input-value) {
  color: var(--color-text-disabled);
}

.input-source-page .anat-cn,
.input-source-page .anatomy-callout-badge {
  border: 1.5px solid var(--color-link);
  background: var(--color-link);
}

.input-source-page :is(.anat-rail.left .anat-leader::before, .anat-rail.right .anat-leader::after),
.input-source-page :is(.anat-rail.left .anat-leader::after, .anat-rail.right .anat-leader::before) {
  background: var(--color-link);
}

.input-source-page .anat-cn.static,
.input-source-page [class*="-key-num"] {
  color: var(--color-link);
  background: var(--color-bg-surface);
}

.input-source-page .input-state-surfaces {
  display: grid;
  gap: var(--lds-section-gap-compact);
}

.input-source-page .input-state-surface {
  padding: var(--lds-card-inner-padding);
}

.input-source-page .input-state-surface > h3 {
  margin: 0;
}

.input-source-page .input-state-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--lds-space-4);
  align-items: stretch;
}

.input-source-page .input-state-card {
  display: grid;
  grid-template-rows: minmax(20px, auto) minmax(142px, auto) 1fr;
  align-content: start;
  gap: var(--lds-space-3);
  padding: var(--lds-card-inner-padding);
  background: var(--color-bg-surface);
}

.input-source-page .input-state-card h4 {
  min-height: 20px;
  color: var(--color-text-primary);
}

.input-source-page .input-state-card .input-live-field {
  align-content: start;
  width: 100%;
}

.input-source-page .input-state-card ul {
  margin: 0;
  padding-left: 1.15rem;
  color: var(--color-text-secondary);
}

.input-source-page .dark-surface .input-state-card {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.05);
  color: #D9DEE7;
}

.input-source-page .input-state-surface.dark-surface > h3,
.input-source-page .dark-surface .input-state-card h4,
.input-source-page .dark-surface .input-state-card li {
  color: #F7F8FB;
}

.input-source-page .dark-surface .input-state-card ul {
  color: #D9DEE7;
}

.input-source-page .dark-surface .input-source-field {
  --color-text-primary: #F7F8FB;
  --color-text-secondary: #D9DEE7;
  --color-text-helper: #BBC5D2;
  --color-text-placeholder: #AEB8C6;
  --color-bg-surface: rgba(255,255,255,.08);
  --color-bg-panel: rgba(255,255,255,.05);
  --color-border-standard: rgba(255,255,255,.34);
  --color-border-subtle: rgba(255,255,255,.18);
  --color-text-disabled: rgba(255,255,255,.42);
}

.input-source-page .dark-surface .input-live-field {
  --color-text-primary: #F7F8FB;
  --color-text-secondary: #D9DEE7;
  --color-text-helper: #BBC5D2;
  --color-text-placeholder: #AEB8C6;
  --color-bg-surface: rgba(255,255,255,.08);
  --color-bg-panel: rgba(255,255,255,.05);
  --color-border-standard: rgba(255,255,255,.34);
  --color-border-subtle: rgba(255,255,255,.18);
  --color-text-disabled: rgba(255,255,255,.42);
}

.input-source-page .dark-surface .input-live-label,
.input-source-page .dark-surface .input-live-helper {
  color: var(--color-text-helper);
}

.input-source-page .dark-surface .input-live-label {
  color: var(--color-text-primary);
}

.input-source-page .dark-surface .input-live-shell {
  border-color: rgba(255,255,255,.34);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.035)),
    rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 16px 36px rgba(0,0,0,.18);
}

.input-source-page .dark-surface .input-live-shell input {
  color: #F7F8FB;
}

.input-source-page .dark-surface .input-live-field.is-disabled :is(.input-live-label, .input-live-helper, .input-live-shell input) {
  color: rgba(255,255,255,.52);
  -webkit-text-fill-color: rgba(255,255,255,.52);
}

.input-source-page .dark-surface .input-live-field.is-focus-demo .input-live-shell,
.input-source-page .dark-surface .input-live-field:focus-within .input-live-shell {
  border-color: var(--color-link);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 3px color-mix(in srgb, var(--color-link) 28%, transparent),
    0 16px 36px rgba(0,0,0,.2);
}

.input-source-page .dark-surface .input-live-field.is-keyboard-focus-demo .input-live-shell {
  border-color: var(--color-link);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 0 0 2px rgba(20,24,31,.92),
    0 0 0 5px color-mix(in srgb, var(--color-link) 32%, transparent),
    0 16px 36px rgba(0,0,0,.2);
}

.input-source-page .dark-surface .input-live-field.is-disabled .input-live-shell {
  border-color: rgba(255,255,255,.16);
  background: rgba(255,255,255,.04);
  box-shadow: none;
}

.input-source-page .dark-surface .input-live-field.is-readonly .input-live-shell {
  border-color: rgba(255,255,255,.44);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(255,255,255,.04);
}

.input-source-page .dark-surface .input-live-field.is-invalid .input-live-shell {
  border-color: color-mix(in srgb, var(--color-warning) 72%, white);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--color-danger-bg) 22%, rgba(20,24,31,.92));
}

.input-source-page .dark-surface .input-live-field.is-valid .input-live-shell {
  border-color: color-mix(in srgb, var(--color-success) 72%, white);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.025)),
    color-mix(in srgb, var(--color-success-bg) 22%, rgba(20,24,31,.92));
}

.input-source-page .dark-surface .input-live-feedback.is-success {
  --input-live-feedback-color: var(--color-success);
  color: var(--input-live-feedback-color);
}

.input-source-page .dark-surface .input-live-feedback {
  --input-live-feedback-color: var(--color-warning);
  color: var(--input-live-feedback-color);
}

.input-source-page .dark-surface .input-container {
  border-color: rgba(255,255,255,.34);
  background:
    linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(255,255,255,.06);
}

.input-source-page .dark-surface .input-action {
  border-left-color: rgba(255,255,255,.24);
  color: #101318;
  background:
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(226,236,255,.86)),
    rgba(255,255,255,.86);
}

.input-source-page .dark-surface .input-action:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(211,226,255,.92)),
    rgba(255,255,255,.94);
}

.input-source-page .tinted-surface {
  gap: var(--lds-space-5);
  padding: var(--lds-card-inner-padding);
  background:
    radial-gradient(circle at 20% 10%, rgba(11, 92, 255, .12), transparent 32%),
    color-mix(in srgb, var(--color-selected-bg) 46%, var(--color-bg-surface));
}

.input-source-page .tinted-surface > div {
  gap: var(--lds-space-3);
}

.input-source-page .input-config-card,
.input-source-page .input-config-group,
.input-source-page .input-layout-stack > section {
  gap: var(--lds-space-4);
}

.input-source-page .security-help-demo {
  align-items: stretch;
}

.input-source-page .security-help-demo .input-source-field,
.input-source-page .input-config-card .input-source-field {
  align-self: end;
}

.input-source-page .af-box {
  align-self: stretch;
  min-height: 52px;
  gap: 0;
  padding: 0;
  border: 1px solid var(--color-border-standard);
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.72)),
    var(--color-bg-surface);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.74);
  overflow: hidden;
}

.input-source-page .af-value {
  padding: 0 var(--lds-space-4);
}

.input-source-page .af-card {
  margin-left: var(--lds-space-4);
  margin-right: var(--lds-space-3);
}

.input-source-page .af-icon {
  margin-inline: var(--lds-space-3);
}

.input-source-page .af-action {
  align-self: stretch;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 96px;
  padding: 0 var(--lds-space-5);
  border: 0;
  border-inline-start: 1px solid var(--color-border-standard);
  color: var(--color-link);
  background:
    linear-gradient(180deg, rgba(255,255,255,.9), rgba(226,236,255,.72)),
    color-mix(in srgb, var(--color-selected-bg) 70%, var(--color-bg-surface));
  font: inherit;
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  cursor: pointer;
}

.input-source-page .af-action:hover {
  color: var(--color-link-hover);
  background: color-mix(in srgb, var(--color-selected-bg) 78%, var(--color-bg-surface));
}

/* ---- Input Field Variants repair -------------------------------------- */
.input-source-page .input-variant-card,
.input-source-page .input-presentation-card {
  align-content: start;
}

.input-source-page .input-variant-card .input-source-field,
.input-source-page .input-presentation-card .input-source-field {
  align-self: start;
}

.input-source-page .input-variant-card .input-container,
.input-source-page .input-presentation-card .input-container {
  min-height: 54px;
  border: 1.5px solid var(--color-info-border);
  border-radius: var(--lds-radius-md);
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,255,255,.88)),
    var(--color-bg-surface);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 10px 28px rgba(38, 56, 74, .06);
}

@media (min-width: 760px) {
  .input-source-page .input-presentation-surfaces {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ========================================================================
 * LDS component-system audit standardization — 2026-07-09
 *
 * This layer changes documentation chrome and shared presentation only.
 * Accepted component internals remain protected. Living Glass is reserved for
 * navigation, page identity, and action-adjacent surfaces; dense content stays
 * quiet and opaque enough to read.
 * ====================================================================== */

:root {
  --lds-motion-glass: 18s;
  --lds-motion-glass-slow: 26s;
  --lds-motion-ease-material: cubic-bezier(.2, .8, .2, 1);
  --lds-doc-sticky-offset: calc(72px + var(--lds-space-3));
  --lds-doc-focus-width: 3px;
  --lds-doc-glass-highlight:
    linear-gradient(112deg,
      rgba(255, 255, 255, .08) 0%,
      rgba(255, 255, 255, .72) 24%,
      rgba(112, 222, 255, .18) 48%,
      rgba(113, 91, 255, .16) 68%,
      rgba(255, 255, 255, .1) 100%);
}

body[data-route-group="components"] .page-header::after {
  background-image: var(--lds-doc-glass-highlight);
  background-size: 240% 100%;
  opacity: .58;
  animation: lds-living-glass-breathe var(--lds-motion-glass) ease-in-out infinite alternate;
}

body[data-route-group="components"] :is(
  .component-section-nav,
  .modal-spec-tabs,
  .buttons-section-nav .section-nav-track
) {
  border: 1px solid color-mix(in srgb, var(--lds-glass-border) 74%, var(--color-border-subtle));
  border-radius: var(--lds-glass-radius-outer);
  background:
    linear-gradient(128deg, rgba(255, 255, 255, .76), rgba(255, 255, 255, .38)),
    var(--lds-glass-inner);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .8),
    var(--lds-glass-shadow-soft);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  backdrop-filter: blur(18px) saturate(150%);
}

body[data-route-group="components"] :is(.component-section-nav, .modal-spec-tabs) {
  position: sticky;
  top: var(--lds-doc-sticky-offset);
  z-index: calc(var(--lds-z-sticky) - 1);
  overflow-x: auto;
  scrollbar-width: thin;
}

body[data-route-group="components"] .modal-spec-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--lds-space-1);
  margin-block: var(--lds-section-nav-gap);
  padding: var(--lds-space-1);
}

body[data-route-group="components"] .modal-spec-tabs a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: var(--lds-touch-target-min);
  padding-inline: var(--lds-space-4);
  border: 1px solid transparent;
  border-radius: var(--lds-radius-md);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  text-decoration: none;
  white-space: nowrap;
  transition:
    color var(--lds-motion-med) ease,
    border-color var(--lds-motion-med) ease,
    background var(--lds-motion-med) ease,
    box-shadow var(--lds-motion-med) ease;
}

body[data-route-group="components"] .modal-spec-tabs a:is(:hover, .is-active) {
  border-color: color-mix(in srgb, var(--color-accent) 24%, transparent);
  color: var(--color-selected-text);
  background:
    linear-gradient(120deg,
      color-mix(in srgb, var(--color-selected-bg) 78%, transparent),
      color-mix(in srgb, var(--color-info-bg) 58%, transparent));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
}

body[data-route-group="components"] :is(
  .component-section-nav .onpage-link,
  .buttons-section-nav .section-nav-link,
  .modal-spec-tabs a,
  .nav-group a
):focus-visible {
  outline: none;
  box-shadow: 0 0 0 var(--lds-doc-focus-width) var(--color-focus-ring);
}

body[data-route-group="components"] :is(
  .component-section-nav .onpage-link,
  .buttons-section-nav .section-nav-link
) {
  min-height: var(--lds-touch-target-min);
}

body[data-route-group="components"] :is(
  .benchmark-section,
  .source-component-page > article,
  .source-component-page > section,
  .modal-legion-section,
  .if-section
)[id] {
  scroll-margin-top: calc(var(--lds-doc-sticky-offset) + 72px);
}

body[data-route-group="components"] :is(
  .benchmark-section,
  .source-component-page,
  .modal-spec-page,
  .input-source-page
) :is(h1, h2, h3, h4, p, li, dd, dt, code) {
  overflow-wrap: anywhere;
}

body[data-route-group="components"] :is(img, svg, video, canvas) {
  max-width: 100%;
}

body[data-route-group="components"] :is(.table-scroll, .spec-table-wrap, [class*="table-wrap"]) {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}

body[data-route-group="components"] details > summary {
  min-height: var(--lds-touch-target-min);
}

@keyframes lds-living-glass-breathe {
  0% { background-position: 0% 50%; opacity: .48; }
  50% { opacity: .66; }
  100% { background-position: 100% 50%; opacity: .54; }
}

@media (max-width: 1039px) {
  :root { --lds-doc-sticky-offset: var(--lds-space-3); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route-group="components"] .page-header::after {
    animation: none;
    background-position: 50% 50%;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-route-group="components"] :is(
    .component-section-nav,
    .modal-spec-tabs,
    .buttons-section-nav .section-nav-track
  ) {
    background: var(--color-bg-surface);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ========================================================================
 * Color — full-width Living Glass
 *
 * The material owns the entire app-main width. A centered rail constrains
 * only the content, so glass never terminates at an artificial page gutter.
 * ====================================================================== */
html:has(body[data-route="foundation-color"]),
body[data-route="foundation-color"] {
  --color-page-header-expanded-height: 208px;
  --color-page-header-collapsed-height: 104px;
  --color-page-header-current-height: var(--color-page-header-expanded-height);
  --color-page-nav-height: 80px;
  --color-page-chrome-height: calc(var(--color-page-header-current-height) + var(--color-page-nav-height));
  --color-page-sidebar-current-width: 300px;
  --color-page-content-max: 1180px;
  --color-page-motion-duration: 1100ms;
  --color-page-motion-ease: cubic-bezier(.4, 0, .2, 1);
  overflow-x: clip;
}

body[data-route="foundation-color"].color-header-collapsed {
  --color-page-header-current-height: var(--color-page-header-collapsed-height);
}

body[data-route="foundation-color"].documentation-nav-collapsed {
  --color-page-sidebar-current-width: 80px;
  --color-page-content-max: 1400px;
}

body[data-route="foundation-color"] {
  transition: --color-page-sidebar-current-width 720ms cubic-bezier(.22, 1, .36, 1);
}

body[data-route="foundation-color"] .page-host {
  padding: 0;
  overflow-anchor: none;
}

body[data-route="foundation-color"] .color-page {
  --color-page-inline: clamp(24px, 3.4vw, 48px);
  --color-page-rail-max: 1180px;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  width: 100%;
  min-width: 0;
  overflow-anchor: none;
}

body[data-route="foundation-color"] .color-page-chrome {
  display: contents;
}

body[data-route="foundation-color"] .color-page-brand {
  display: none;
}

body[data-route="foundation-color"].color-header-collapsed .color-page {
  --color-page-header-current-height: var(--color-page-header-collapsed-height);
}

body[data-route="foundation-color"] .color-page-header {
  position: sticky;
  top: 0;
  z-index: 45;
  display: block;
  width: 100%;
  height: var(--color-page-header-current-height);
  min-height: var(--color-page-header-current-height);
  max-height: var(--color-page-header-current-height);
  padding: 0;
  overflow: hidden;
  isolation: isolate;
  border: 0;
  border-bottom: 1px solid var(--color-page-header-edge);
  border-radius: 0;
  background: var(--color-page-header-surface);
  box-shadow:
    inset 0 1px 0 var(--color-page-header-highlight),
    0 22px 64px var(--color-page-header-shadow);
  backdrop-filter: blur(34px) saturate(158%);
  -webkit-backdrop-filter: blur(34px) saturate(158%);
  transition:
    height var(--color-page-motion-duration) var(--color-page-motion-ease),
    min-height var(--color-page-motion-duration) var(--color-page-motion-ease),
    max-height var(--color-page-motion-duration) var(--color-page-motion-ease),
    background 360ms ease,
    box-shadow 360ms ease;
}

body[data-route="foundation-color"] .color-page-header::before {
  content: "";
  position: absolute;
  inset: -30% -8%;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  background:
    radial-gradient(circle at 12% 28%, rgba(198, 218, 255, .25), transparent 34%),
    radial-gradient(circle at 84% 32%, rgba(76, 211, 255, .16), transparent 32%),
    linear-gradient(108deg, transparent 20%, rgba(255, 255, 255, .12) 46%, transparent 70%);
  background-size: 150% 150%, 160% 160%, 220% 100%;
  opacity: .58;
  animation: color-page-material-breathe 24s var(--lds-motion-ease-material, cubic-bezier(.2, .8, .2, 1)) infinite alternate;
}

body[data-route="foundation-color"] .color-page-header::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: 0;
  background: var(--color-page-header-scrim);
  animation: none;
}

body[data-route="foundation-color"] .color-page-header-rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "title toggle"
    "lead toggle";
  grid-template-rows: auto auto;
  column-gap: var(--lds-space-6);
  row-gap: var(--lds-space-2);
  align-content: center;
  align-items: center;
  width: 100%;
  max-width: var(--color-page-rail-max);
  height: 100%;
  margin-inline: auto;
  padding: var(--lds-card-padding-spacious) var(--color-page-inline);
  transition:
    padding var(--color-page-motion-duration) var(--color-page-motion-ease),
    row-gap var(--color-page-motion-duration) var(--color-page-motion-ease);
}

body[data-route="foundation-color"] .color-page-header .color-page-header-top {
  display: contents;
}

body[data-route="foundation-color"] .color-page-header .eyebrow {
  grid-area: kicker;
  margin: 0;
  color: var(--color-page-kicker);
  white-space: nowrap;
}

body[data-route="foundation-color"] .color-page-header h1 {
  grid-area: title;
  margin: 0;
  color: var(--color-page-heading);
  font-size: 4.25rem;
  line-height: 1;
  transition:
    font-size var(--color-page-motion-duration) var(--color-page-motion-ease),
    line-height var(--color-page-motion-duration) var(--color-page-motion-ease);
}

body[data-route="foundation-color"] .color-page-header .page-lead {
  grid-area: lead;
  display: block;
  max-width: 860px;
  max-height: 64px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: var(--color-page-copy);
  opacity: 1;
  transition:
    max-height 900ms var(--color-page-motion-ease),
    opacity 620ms ease;
}

body[data-route="foundation-color"] .color-page-header .water-theme-toggle {
  grid-area: toggle;
  justify-self: end;
  align-self: center;
}

body[data-route="foundation-color"].color-header-collapsed .color-page-header-rail {
  padding-block: var(--lds-space-4);
  row-gap: 4px;
}

body[data-route="foundation-color"].color-header-collapsed .color-page-header h1 {
  font-size: 2.75rem;
  line-height: .95;
}

body[data-route="foundation-color"].color-header-collapsed .color-page-header .page-lead {
  max-height: 0;
  opacity: 0;
}

body[data-route="foundation-color"] .color-page-nav {
  position: sticky;
  top: var(--color-page-header-current-height);
  z-index: 44;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  isolation: isolate;
  border: 0;
  border-bottom: 1px solid var(--color-page-nav-edge);
  border-radius: 0;
  background: var(--color-page-nav-surface);
  box-shadow:
    inset 0 1px 0 var(--color-page-nav-highlight),
    0 16px 42px var(--color-page-nav-shadow);
  backdrop-filter: blur(34px) saturate(172%);
  -webkit-backdrop-filter: blur(34px) saturate(172%);
  transition:
    top var(--color-page-motion-duration) var(--color-page-motion-ease),
    background 360ms ease,
    box-shadow 360ms ease;
}

body[data-route="foundation-color"] .color-page-nav.is-stuck {
  top: var(--color-page-header-current-height);
}

body[data-route="foundation-color"] .color-page-nav::before {
  content: none;
}

body[data-route="foundation-color"] .color-page-nav::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(108deg, transparent 16%, rgba(255, 255, 255, .13) 42%, transparent 68%);
  background-size: 240% 100%;
  opacity: .48;
  animation: color-page-nav-shimmer 22s ease-in-out infinite alternate;
}

body[data-route="foundation-color"] .color-page-nav-rail {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--color-page-rail-max);
  margin-inline: auto;
  padding-inline: var(--color-page-inline);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-track {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--lds-space-3);
  margin-inline: -32px;
  padding: 5px 32px;
  overflow: visible;
  isolation: isolate;
  scrollbar-width: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  animation: none;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-track::-webkit-scrollbar {
  display: none;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-indicator {
  top: 5px;
  z-index: 1;
  height: calc(100% - 10px);
  overflow: hidden;
  isolation: isolate;
  border: 1px solid var(--color-page-lens-edge);
  border-radius: var(--lds-radius-pill);
  background: var(--color-page-lens-surface);
  background-size: 160% 120%, 170% 180%, 180% 180%, 220% 220%, 270% 100%, 100% 100%;
  box-shadow: var(--color-page-lens-shadow);
  opacity: .88;
  backdrop-filter: blur(14px) saturate(190%) contrast(108%) brightness(108%);
  -webkit-backdrop-filter: blur(14px) saturate(190%) contrast(108%) brightness(108%);
  transition:
    transform 560ms cubic-bezier(.22, 1, .36, 1),
    width 560ms cubic-bezier(.22, 1, .36, 1),
    background 360ms ease,
    backdrop-filter 360ms ease,
    -webkit-backdrop-filter 360ms ease,
    opacity 260ms ease,
    box-shadow 320ms ease,
    border-color 320ms ease;
  animation: color-nav-lens-flow var(--lds-motion-glass-slow, 26s) ease-in-out infinite alternate;
  animation-delay: -9s;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-indicator::before {
  content: "";
  position: absolute;
  inset: -18% -10%;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 22% 34%, transparent 0 34%, var(--color-page-lens-caustic) 37%, transparent 45%),
    radial-gradient(ellipse at 72% 62%, transparent 0 44%, var(--color-page-lens-ripple) 48%, transparent 58%),
    radial-gradient(ellipse at 44% 112%, var(--color-page-lens-ripple), transparent 54%),
    radial-gradient(ellipse at 50% -18%, var(--color-page-lens-caustic), transparent 38%);
  background-size: 145% 170%, 160% 150%, 100% 100%, 100% 100%;
  opacity: .58;
  filter: blur(.1px) saturate(108%);
  will-change: background-position, opacity, filter;
  animation: color-nav-lens-caustic 19s cubic-bezier(.45, 0, .25, 1) infinite alternate;
  animation-delay: -6.4s;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-indicator::after {
  content: "";
  position: absolute;
  inset: 2px;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at var(--color-page-lens-core-x, 18%) 14%, rgba(255, 255, 255, .40), transparent 36%),
    radial-gradient(ellipse at 78% 128%, var(--color-page-lens-core), transparent 48%),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 48%);
  background-size: 150% 155%, 165% 145%, 100% 100%;
  filter: blur(.18px) saturate(106%);
  opacity: .76;
  will-change: background-position, opacity, filter;
  animation: color-nav-lens-core 23s ease-in-out infinite alternate;
  animation-delay: -14.2s;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  border-color: var(--color-page-lens-hover-edge);
  background: var(--color-page-lens-hover-surface);
  box-shadow: var(--color-page-lens-hover-shadow);
  opacity: 1;
  backdrop-filter: blur(14px) saturate(260%) contrast(126%) brightness(116%);
  -webkit-backdrop-filter: blur(14px) saturate(260%) contrast(126%) brightness(116%);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator::before,
body[data-route="foundation-color"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator::before {
  opacity: .74;
  filter: blur(.16px) saturate(116%) brightness(106%);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator::after,
body[data-route="foundation-color"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator::after {
  opacity: .88;
  filter: blur(.12px) saturate(112%) brightness(105%);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-link {
  position: relative;
  z-index: 2;
  flex: 0 0 auto;
  min-height: var(--lds-touch-target-min, 44px);
  padding-inline: 16px;
  border: 0;
  border-radius: var(--lds-radius-pill);
  background: transparent;
  color: var(--color-page-nav-text);
  font-family: "Hanken Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 240ms ease,
    background-color 240ms ease,
    box-shadow 240ms ease,
    text-shadow 240ms ease;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-link:not(.is-active):hover {
  color: var(--color-page-nav-hover-text);
  background: var(--color-page-nav-hover-surface);
  box-shadow:
    inset 0 1px 0 var(--color-page-nav-hover-highlight),
    inset 0 0 0 1px var(--color-page-nav-hover-edge);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-link.is-active {
  color: var(--color-page-nav-active-text);
  background: transparent;
  text-shadow: var(--color-page-nav-active-shadow);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-link.is-active:hover,
body[data-route="foundation-color"] .color-page-nav .section-nav-link.is-active:focus-visible {
  color: var(--color-page-nav-active-hover-text);
  background: rgba(255, 255, 255, .025);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
  text-shadow: var(--color-page-nav-active-hover-shadow);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 3px var(--color-focus-ring);
}

body[data-route="foundation-color"] .color-page-content-rail {
  width: 100%;
  max-width: var(--color-page-content-max);
  min-width: 0;
  margin-inline: auto;
  padding: 48px var(--color-page-inline) 80px;
  transition: max-width 720ms cubic-bezier(.22, 1, .36, 1);
}

body[data-route="foundation-color"] .color-page-content-rail [id] {
  scroll-margin-top: calc(var(--color-page-header-collapsed-height) + 132px);
}

body[data-route="foundation-color"][data-color-theme="dark"] {
  --lds-atmosphere-bg:
    radial-gradient(ellipse 78% 62% at -18% -12%, rgba(157, 184, 226, .24) 0%, rgba(157, 184, 226, .07) 44%, transparent 80%),
    radial-gradient(ellipse 82% 68% at 118% 6%, rgba(59, 187, 218, .19) 0%, rgba(59, 187, 218, .055) 46%, transparent 82%),
    radial-gradient(ellipse 86% 72% at -16% 104%, rgba(205, 79, 168, .16) 0%, rgba(205, 79, 168, .045) 48%, transparent 82%),
    radial-gradient(ellipse 80% 66% at 116% 112%, rgba(171, 184, 90, .10) 0%, rgba(171, 184, 90, .025) 48%, transparent 82%),
    radial-gradient(ellipse 92% 78% at 52% -28%, rgba(126, 94, 197, .18) 0%, rgba(126, 94, 197, .045) 46%, transparent 84%),
    #080A10;
  --color-bg-panel: #151A23;
  --color-bg-surface: #10151F;
  --color-bg-inset: #0B0E14;
  --color-text-primary: #E9EFF8;
  --color-text-secondary: rgba(233, 239, 248, .72);
  --color-text-muted: rgba(233, 239, 248, .54);
  --color-border-subtle: rgba(255, 255, 255, .13);
  --lds-glass-border: rgba(255, 255, 255, .13);
  --lds-glass-shell:
    linear-gradient(135deg, rgba(28, 34, 47, .78), rgba(12, 16, 24, .72)),
    rgba(12, 16, 24, .76);
  --color-page-header-edge: rgba(176, 205, 255, .22);
  --color-page-header-highlight: rgba(255, 255, 255, .18);
  --color-page-header-shadow: rgba(0, 0, 0, .34);
  --color-page-header-surface:
    radial-gradient(ellipse 68% 96% at -16% -32%, rgba(226, 238, 255, .18) 0%, rgba(226, 238, 255, .055) 44%, transparent 80%),
    radial-gradient(ellipse 72% 104% at 118% -20%, rgba(72, 192, 224, .16) 0%, rgba(72, 192, 224, .045) 46%, transparent 82%),
    radial-gradient(ellipse 76% 92% at -14% 132%, rgba(195, 70, 157, .14) 0%, rgba(195, 70, 157, .04) 46%, transparent 82%),
    radial-gradient(ellipse 70% 98% at 116% 136%, rgba(162, 176, 87, .09) 0%, rgba(162, 176, 87, .02) 48%, transparent 84%),
    radial-gradient(ellipse 88% 112% at 52% -52%, rgba(126, 92, 198, .17) 0%, rgba(126, 92, 198, .04) 46%, transparent 84%),
    rgba(8, 11, 17, .58);
  --color-page-header-scrim: rgba(10, 14, 22, .30);
  --color-page-kicker: rgba(221, 235, 255, .78);
  --color-page-heading: #F4F8FF;
  --color-page-copy: rgba(244, 248, 255, .82);
  --color-page-toggle-edge: rgba(255, 255, 255, .16);
  --color-page-toggle-surface:
    linear-gradient(135deg, rgba(38, 46, 62, .64), rgba(14, 18, 26, .54)),
    rgba(14, 18, 26, .58);
  --color-page-toggle-highlight: rgba(255, 255, 255, .14);
  --color-page-toggle-shadow: rgba(0, 0, 0, .24);
  --color-page-toggle-text: rgba(233, 239, 248, .74);
  --color-page-toggle-hover: #FFFFFF;
  --color-page-nav-edge: rgba(181, 207, 255, .20);
  --color-page-nav-highlight: rgba(255, 255, 255, .20);
  --color-page-nav-shadow: rgba(0, 0, 0, .30);
  --color-page-nav-surface:
    radial-gradient(circle at 8% -42%, rgba(161, 195, 255, .20), transparent 39%),
    radial-gradient(circle at 88% 148%, rgba(64, 214, 255, .16), transparent 38%),
    linear-gradient(132deg, rgba(38, 48, 68, .46), rgba(8, 14, 24, .34)),
    rgba(12, 18, 28, .28);
  --color-page-nav-text: rgba(233, 239, 248, .78);
  --color-page-nav-hover-text: #FFFFFF;
  --color-page-nav-active-text: #FFFFFF;
  --color-page-nav-active-hover-text: #FFFFFF;
  --color-page-nav-active-shadow:
    0 1px 2px rgba(0, 0, 0, .36),
    0 0 14px rgba(218, 239, 255, .22);
  --color-page-nav-active-hover-shadow:
    0 1px 2px rgba(0, 0, 0, .34),
    0 0 18px rgba(231, 250, 255, .42);
  --color-page-nav-hover-surface: rgba(170, 210, 255, .08);
  --color-page-nav-hover-highlight: rgba(255, 255, 255, .16);
  --color-page-nav-hover-edge: rgba(143, 199, 255, .10);
  --color-page-lens-edge: rgba(218, 245, 255, .34);
  --color-page-lens-hover-edge: rgba(231, 252, 255, .54);
  --color-page-lens-core: rgba(151, 238, 255, .22);
  --color-page-lens-core-x: 26%;
  --color-page-lens-caustic: rgba(247, 253, 255, .50);
  --color-page-lens-ripple: rgba(122, 226, 255, .20);
  --color-page-lens-surface:
    radial-gradient(ellipse at 50% 7%, rgba(255, 255, 255, .44), rgba(255, 255, 255, .15) 26%, transparent 52%),
    radial-gradient(circle at 22% -8%, rgba(255, 255, 255, .42), transparent 36%),
    radial-gradient(circle at 84% 124%, rgba(89, 225, 255, .20), transparent 46%),
    radial-gradient(ellipse at 54% 112%, rgba(105, 126, 255, .16), transparent 50%),
    linear-gradient(104deg, rgba(127, 210, 255, .24) 0%, rgba(94, 129, 255, .18) 44%, rgba(14, 164, 255, .16) 72%, rgba(186, 142, 255, .18) 100%),
    rgba(224, 247, 255, .10);
  --color-page-lens-hover-surface:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, .58), rgba(255, 255, 255, .20) 26%, transparent 54%),
    radial-gradient(circle at 22% -10%, rgba(255, 255, 255, .56), transparent 36%),
    radial-gradient(circle at 84% 124%, rgba(94, 235, 255, .30), transparent 46%),
    radial-gradient(ellipse at 48% 116%, rgba(117, 139, 255, .22), transparent 50%),
    linear-gradient(104deg, rgba(137, 220, 255, .30) 0%, rgba(93, 143, 255, .24) 44%, rgba(18, 178, 255, .22) 72%, rgba(190, 150, 255, .24) 100%),
    rgba(232, 250, 255, .14);
  --color-page-lens-shadow:
    inset 0 0 0 1px rgba(7, 15, 27, .38),
    inset 0 0 0 3px rgba(255, 255, 255, .08),
    inset 0 1px 0 rgba(255, 255, 255, .42),
    inset 0 -1px 0 rgba(89, 230, 255, .20),
    inset 0 0 22px rgba(255, 255, 255, .08),
    inset 0 -9px 18px rgba(0, 0, 0, .12),
    0 8px 22px rgba(26, 82, 255, .22),
    0 0 28px rgba(59, 194, 255, .10);
  --color-page-lens-hover-shadow:
    inset 0 0 0 1px rgba(3, 10, 20, .48),
    inset 0 0 0 3px rgba(255, 255, 255, .13),
    inset 0 1px 0 rgba(255, 255, 255, .58),
    inset 0 -1px 0 rgba(101, 239, 255, .28),
    inset 0 0 26px rgba(255, 255, 255, .12),
    inset 0 -10px 20px rgba(0, 0, 0, .14),
    0 10px 26px rgba(26, 82, 255, .28),
    0 0 34px rgba(82, 215, 255, .16);
}

body[data-route="foundation-color"][data-color-theme="light"] {
  --lds-atmosphere-bg:
    radial-gradient(circle at 10% 8%, rgba(254, 254, 254, .66), transparent 30%),
    radial-gradient(circle at 28% 94%, rgba(230, 126, 107, .11), transparent 34%),
    radial-gradient(circle at 58% 8%, rgba(226, 236, 255, .52), transparent 36%),
    radial-gradient(circle at 88% 18%, rgba(46, 184, 154, .13), transparent 34%),
    radial-gradient(circle at 72% 84%, rgba(240, 180, 41, .08), transparent 38%),
    linear-gradient(135deg, #DEDEE4 0%, #CBCBD2 50%, #B5B5BC 100%);
  --color-bg-panel: #F2F2F7;
  --color-bg-surface: #F2F2F7;
  --color-bg-inset: #D2D2D8;
  --color-border-subtle: rgba(142, 143, 148, .34);
  --lds-glass-border: rgba(254, 254, 254, .48);
  --lds-glass-shell:
    linear-gradient(135deg, rgba(242, 242, 247, .74), rgba(199, 199, 205, .52)),
    rgba(210, 210, 216, .58);
  /* Light shell roles: one pearl atmosphere, three distinct elevations. */
  --color-page-sidebar-surface:
    linear-gradient(180deg, transparent 0%, transparent 22%, rgba(229, 229, 234, .32) 38%, rgba(210, 210, 216, .62) 100%),
    radial-gradient(circle at -8% 2%, rgba(254, 254, 254, .90), transparent 34%),
    radial-gradient(circle at 112% 34%, rgba(11, 92, 255, .10), transparent 40%),
    radial-gradient(circle at 72% 92%, rgba(0, 174, 222, .07), transparent 42%),
    linear-gradient(168deg, rgba(242, 242, 247, .84), rgba(229, 229, 234, .72) 48%, rgba(210, 210, 216, .70)),
    #E5E5EA;
  --color-page-brand-mark: #123A66;
  --color-page-header-edge: rgba(82, 103, 132, .34);
  --color-page-header-highlight: rgba(254, 254, 254, .84);
  --color-page-header-shadow: rgba(38, 44, 54, .16);
  --color-page-header-surface:
    radial-gradient(circle at 5% -10%, rgba(254, 254, 254, .46), transparent 34%),
    radial-gradient(circle at 26% 112%, rgba(230, 126, 107, .08), transparent 34%),
    radial-gradient(circle at 50% -18%, rgba(215, 206, 242, .13), transparent 38%),
    radial-gradient(circle at 72% 4%, rgba(11, 92, 255, .09), transparent 38%),
    radial-gradient(circle at 97% 96%, rgba(46, 184, 154, .10), transparent 42%),
    linear-gradient(112deg, rgba(250, 249, 252, .36) 0%, rgba(237, 232, 244, .29) 24%, rgba(220, 233, 248, .29) 50%, rgba(220, 242, 240, .26) 73%, rgba(244, 232, 237, .23) 100%),
    rgba(210, 210, 216, .28);
  --color-page-brand-surface: var(--color-page-header-surface);
  --color-page-header-scrim: rgba(199, 199, 205, .05);
  --color-page-kicker: #38557D;
  --color-page-heading: #111722;
  --color-page-copy: #536071;
  --color-page-toggle-edge: rgba(170, 190, 216, .42);
  --color-page-toggle-surface:
    linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(239, 246, 255, .48)),
    rgba(255, 255, 255, .52);
  --color-page-toggle-highlight: rgba(255, 255, 255, .88);
  --color-page-toggle-shadow: rgba(38, 56, 74, .12);
  --color-page-toggle-text: #405066;
  --color-page-toggle-hover: var(--lds-light-system-indigo);
  --color-page-nav-edge: rgba(106, 117, 132, .30);
  --color-page-nav-highlight: rgba(254, 254, 254, .66);
  --color-page-nav-shadow: rgba(38, 44, 54, .18);
  --color-page-nav-surface:
    radial-gradient(circle at 9% -60%, rgba(254, 254, 254, .66), transparent 46%),
    radial-gradient(circle at 88% 160%, rgba(0, 174, 222, .11), transparent 48%),
    linear-gradient(128deg, rgba(242, 242, 247, .34), rgba(199, 199, 205, .20)),
    rgba(229, 229, 234, .24);
  --color-page-nav-text: #405066;
  --color-page-nav-hover-text: var(--lds-light-system-indigo);
  --color-page-nav-active-text: var(--lds-light-system-indigo-text);
  --color-page-nav-active-hover-text: var(--lds-light-system-indigo-active);
  --color-page-nav-active-shadow:
    0 1px 0 rgba(255, 255, 255, .82),
    0 0 10px rgba(255, 255, 255, .42);
  --color-page-nav-active-hover-shadow:
    0 1px 0 rgba(255, 255, 255, .88),
    0 0 18px rgba(90, 190, 255, .36);
  --color-page-nav-hover-surface: rgba(255, 255, 255, .34);
  --color-page-nav-hover-highlight: rgba(255, 255, 255, .86);
  --color-page-nav-hover-edge: rgba(75, 143, 214, .16);
  --color-page-lens-edge: rgba(72, 134, 194, .30);
  --color-page-lens-hover-edge: rgba(56, 130, 210, .44);
  --color-page-lens-core: rgba(62, 186, 236, .22);
  --color-page-lens-core-x: 30%;
  --color-page-lens-caustic: rgba(255, 255, 255, .68);
  --color-page-lens-ripple: rgba(52, 177, 235, .22);
  --color-page-lens-surface:
    radial-gradient(ellipse at 50% 7%, rgba(255, 255, 255, .86), rgba(255, 255, 255, .30) 27%, transparent 54%),
    radial-gradient(ellipse at 30% -18%, rgba(255, 255, 255, .82), transparent 42%),
    radial-gradient(ellipse at 82% 118%, rgba(58, 196, 244, .26), transparent 50%),
    radial-gradient(ellipse at 48% 112%, rgba(64, 126, 230, .16), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, .44) 0%, rgba(236, 250, 255, .24) 48%, rgba(172, 226, 249, .24) 100%),
    rgba(238, 250, 255, .32);
  --color-page-lens-hover-surface:
    radial-gradient(ellipse at 50% 8%, rgba(255, 255, 255, .94), rgba(255, 255, 255, .38) 28%, transparent 55%),
    radial-gradient(ellipse at 30% -18%, rgba(255, 255, 255, .90), transparent 42%),
    radial-gradient(ellipse at 82% 118%, rgba(52, 205, 252, .34), transparent 50%),
    radial-gradient(ellipse at 48% 112%, rgba(54, 122, 235, .22), transparent 54%),
    linear-gradient(180deg, rgba(255, 255, 255, .52) 0%, rgba(232, 250, 255, .30) 48%, rgba(148, 216, 248, .30) 100%),
    rgba(242, 253, 255, .38);
  --color-page-lens-shadow:
    inset 0 0 0 1px rgba(44, 79, 120, .30),
    inset 0 0 0 3px rgba(255, 255, 255, .34),
    inset 0 1px 0 rgba(255, 255, 255, .78),
    inset 0 -1px 0 rgba(45, 169, 230, .28),
    inset 1px 0 0 rgba(255, 255, 255, .44),
    inset -1px 0 0 rgba(47, 134, 208, .12),
    inset 0 0 24px rgba(255, 255, 255, .18),
    inset 0 -9px 18px rgba(63, 139, 196, .10),
    0 9px 22px rgba(36, 93, 230, .20),
    0 0 26px rgba(59, 194, 255, .13);
  --color-page-lens-hover-shadow:
    inset 0 0 0 1px rgba(31, 76, 128, .40),
    inset 0 0 0 3px rgba(255, 255, 255, .44),
    inset 0 1px 0 rgba(255, 255, 255, .86),
    inset 0 -1px 0 rgba(45, 181, 238, .34),
    inset 1px 0 0 rgba(255, 255, 255, .50),
    inset -1px 0 0 rgba(47, 134, 208, .16),
    inset 0 0 28px rgba(255, 255, 255, .24),
    inset 0 -10px 20px rgba(55, 143, 208, .13),
    0 10px 26px rgba(36, 93, 230, .24),
    0 0 32px rgba(59, 194, 255, .16);
}

/* Light appearance shell composition.
 * The header carries atmosphere, the masthead concentrates identity, and the
 * navigation rail recedes one elevation while remaining visibly glass-based. */
body[data-route="foundation-color"][data-color-theme="light"] .color-page-header {
  border-bottom: 0;
  background-attachment: fixed;
  box-shadow: none;
  backdrop-filter: blur(38px) saturate(172%);
  -webkit-backdrop-filter: blur(38px) saturate(172%);
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-header::before {
  content: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-header::after {
  content: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .app-nav {
  --nav-section-color: #38557D;
  border-right: 0;
  background: var(--color-page-sidebar-surface);
  background-attachment: fixed;
  box-shadow: none;
  backdrop-filter: blur(30px) saturate(152%);
  -webkit-backdrop-filter: blur(30px) saturate(152%);
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-panel {
  isolation: isolate;
  overflow: hidden;
  border: 0;
  background: var(--color-page-brand-surface);
  background-attachment: fixed;
  box-shadow: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-panel::before {
  content: "";
  position: absolute;
  inset: 18% 8% 16% 4%;
  z-index: -1;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(ellipse at 22% 48%, rgba(254, 254, 254, .82), transparent 28%),
    radial-gradient(ellipse at 38% 52%, rgba(11, 92, 255, .12), transparent 52%);
  filter: blur(16px);
  opacity: .82;
  animation: color-page-identity-breathe 18s cubic-bezier(.2, .8, .2, 1) infinite alternate;
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-panel:hover {
  background: var(--color-page-brand-surface);
  background-attachment: fixed;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav {
  --color-page-nav-block-pad: 10px;
  border: 0;
  background: var(--color-page-header-surface);
  background-attachment: fixed;
  box-shadow:
    0 30px 72px rgba(38, 44, 54, .14),
    0 10px 30px rgba(11, 92, 255, .045);
  backdrop-filter: blur(40px) saturate(164%);
  -webkit-backdrop-filter: blur(40px) saturate(164%);
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav::after {
  content: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track {
  gap: var(--lds-space-3);
  padding-block: var(--color-page-nav-block-pad) 26px;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator {
  top: var(--color-page-nav-block-pad);
  height: var(--lds-touch-target-min, 44px);
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-crest {
  color: var(--color-page-brand-mark);
  opacity: 1;
  filter:
    drop-shadow(0 1px 0 rgba(254, 254, 254, .92))
    drop-shadow(0 8px 16px rgba(11, 92, 255, .20));
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-lockup-text .eyebrow {
  color: #38557D;
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-panel strong {
  color: #111722;
  text-shadow: 0 1px 0 rgba(254, 254, 254, .74);
}

body[data-route="foundation-color"][data-color-theme="light"] .brand-panel .version-chip {
  border-color: rgba(56, 85, 125, .22);
  color: #405066;
  background: rgba(254, 254, 254, .62);
  box-shadow:
    inset 0 1px 0 rgba(254, 254, 254, .90),
    0 6px 16px rgba(38, 44, 54, .08);
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-group h2::after {
  background: linear-gradient(90deg, rgba(56, 85, 125, .38), transparent);
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-group a {
  color: #4E5968;
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-group a:hover {
  border-color: rgba(56, 85, 125, .18);
  color: #073EAD;
  background:
    linear-gradient(135deg, rgba(254, 254, 254, .72), rgba(226, 236, 255, .58)),
    rgba(242, 242, 247, .56);
  box-shadow:
    inset 0 1px 0 rgba(254, 254, 254, .94),
    0 8px 22px rgba(38, 68, 104, .10);
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-group a.active {
  border-color: color-mix(in srgb,var(--color-selected-border) 36%,transparent);
  color: var(--color-selected-text);
  background:
    radial-gradient(circle at 88% 10%,color-mix(in srgb,var(--color-selected-border) 14%,transparent),transparent 42%),
    linear-gradient(135deg,rgba(254,254,254,.86),color-mix(in srgb,var(--color-selected-bg) 76%,transparent)),
    var(--color-selected-bg);
  box-shadow:
    inset 0 1px 0 rgba(254, 254, 254, .96),
    inset 0 -1px 0 color-mix(in srgb,var(--color-selected-border) 12%,transparent),
    0 10px 24px rgba(38, 68, 104, .12);
}

@keyframes color-page-identity-breathe {
  from {
    opacity: .68;
    transform: translate3d(-1.5%, 0, 0) scale(.98);
  }
  to {
    opacity: .88;
    transform: translate3d(2%, 1%, 0) scale(1.035);
  }
}

body[data-route="foundation-color"][data-color-theme="dark"] :is(.app-nav, .app-footer) {
  color: #E9EFF8;
  border-color: rgba(255, 255, 255, .10);
  background: var(--lds-glass-shell);
}

body[data-route="foundation-color"][data-color-theme="dark"] .app-nav {
  --nav-section-color: #94B9FF;
  box-shadow:
    inset -1px 0 0 rgba(255, 255, 255, .06),
    18px 0 52px rgba(0, 0, 0, .28);
}

body[data-route="foundation-color"][data-color-theme="dark"] .brand-panel {
  border-color: rgba(148, 185, 255, .24);
  background:
    linear-gradient(135deg, rgba(46, 58, 79, .72), rgba(13, 20, 34, .72)),
    rgba(16, 24, 39, .78);
}

body[data-route="foundation-color"][data-color-theme="dark"] :is(.brand-lockup, .app-footer-signature) {
  color: #F4F8FF;
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group h2 {
  color: #94B9FF;
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group a {
  color: rgba(233, 239, 248, .72);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group a:hover {
  border-color: rgba(148, 185, 255, .24);
  color: #FFFFFF;
  background: rgba(148, 185, 255, .10);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-group a.active {
  border-color: rgba(125, 176, 255, .42);
  color: #FFFFFF;
  background:
    linear-gradient(135deg, rgba(80, 132, 255, .34), rgba(24, 190, 202, .20)),
    rgba(255, 255, 255, .09);
}

@media (min-width: 1040px) {
  body[data-route="foundation-color"] .app-nav {
    padding: 0;
    gap: 0;
    border-right-color: var(--color-page-header-edge, var(--color-border-subtle));
    background: var(--lds-glass-shell, var(--color-bg-panel));
    box-shadow:
      inset -1px 0 0 color-mix(in srgb, var(--color-page-header-highlight, rgba(255, 255, 255, .18)) 54%, transparent),
      18px 0 52px rgba(0, 0, 0, .14);
  }

  body[data-route="foundation-color"] .brand-panel {
    display: flex;
    align-items: center;
    min-height: var(--color-page-header-current-height);
    height: var(--color-page-header-current-height);
    padding: 0 24px;
    border: 0;
    border-bottom: 1px solid var(--color-page-header-edge, var(--color-border-subtle));
    border-radius: 0;
    color: var(--color-page-heading, var(--color-text-primary));
    background: var(--color-page-header-surface, var(--color-bg-surface));
    box-shadow: inset 0 1px 0 var(--color-page-header-highlight, rgba(255, 255, 255, .16));
    backdrop-filter: blur(34px) saturate(158%);
    -webkit-backdrop-filter: blur(34px) saturate(158%);
    transition:
      height var(--color-page-motion-duration) var(--color-page-motion-ease),
      min-height var(--color-page-motion-duration) var(--color-page-motion-ease),
      background 360ms ease,
      border-color 360ms ease,
      box-shadow 360ms ease;
  }

  body[data-route="foundation-color"] .brand-panel:hover {
    background: var(--color-page-header-surface, var(--color-bg-surface));
  }

  body[data-route="foundation-color"] .brand-lockup {
    gap: 14px;
  }

  body[data-route="foundation-color"] .brand-lockup-text .eyebrow {
    color: var(--color-page-kicker, var(--color-text-muted));
  }

  body[data-route="foundation-color"] .brand-panel strong {
    font-size: 1.25rem;
  }

  body[data-route="foundation-color"] .brand-crest {
    height: 56px;
    filter: drop-shadow(0 12px 24px rgba(0, 0, 0, .22));
    transition:
      height var(--color-page-motion-duration) var(--color-page-motion-ease),
      filter 360ms ease,
      opacity 160ms ease;
  }

  body[data-route="foundation-color"].color-header-collapsed .brand-crest {
    height: 46px;
  }

  body[data-route="foundation-color"] .nav-tree {
    padding: 14px var(--lds-space-4) var(--lds-space-4);
  }
}

/* Color shell v2 — one real full-width chrome component, followed by a
 * floating documentation rail. This replaces the visually matched sibling
 * panels with a single compositional and sticky boundary. */
@media (min-width: 1040px) {
  body[data-route="foundation-color"] .app-shell {
    grid-template-columns: var(--color-page-sidebar-current-width) minmax(0, 1fr);
    transition: grid-template-columns 720ms cubic-bezier(.22, 1, .36, 1);
  }

  body[data-route="foundation-color"] .color-page-chrome {
    position: sticky;
    top: 0;
    z-index: 45;
    display: grid;
    grid-template-rows: var(--color-page-header-current-height) var(--color-page-nav-height);
    width: calc(100% + var(--color-page-sidebar-current-width));
    height: var(--color-page-chrome-height);
    margin-left: calc(-1 * var(--color-page-sidebar-current-width));
    overflow: hidden;
    isolation: isolate;
    background: var(--color-page-header-surface);
    box-shadow:
      0 4px 14px rgba(38, 44, 54, .12),
      0 44px 104px var(--color-page-header-shadow),
      0 16px 44px rgba(11, 92, 255, .10);
    backdrop-filter: blur(40px) saturate(164%);
    -webkit-backdrop-filter: blur(40px) saturate(164%);
    transition:
      height var(--color-page-motion-duration) var(--color-page-motion-ease),
      grid-template-rows var(--color-page-motion-duration) var(--color-page-motion-ease),
      background 360ms ease,
      box-shadow 360ms ease;
  }

  body[data-route="foundation-color"] .color-page-chrome::before {
    content: "";
    position: absolute;
    inset: -26% -6%;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(circle at 12% 26%, rgba(254, 254, 254, .42), transparent 30%),
      radial-gradient(circle at 68% 18%, rgba(11, 92, 255, .10), transparent 34%),
      radial-gradient(circle at 94% 70%, rgba(0, 174, 222, .10), transparent 34%),
      linear-gradient(108deg, transparent 18%, rgba(254, 254, 254, .18) 46%, transparent 72%);
    background-size: 145% 145%, 160% 160%, 150% 150%, 220% 100%;
    opacity: .66;
    animation: color-page-material-breathe 24s cubic-bezier(.2, .8, .2, 1) infinite alternate;
  }

  body[data-route="foundation-color"][data-color-theme="dark"] .color-page-chrome::before {
    background:
      radial-gradient(ellipse 72% 126% at -22% -38%, rgba(229, 240, 255, .27) 0%, rgba(229, 240, 255, .09) 42%, transparent 80%),
      radial-gradient(ellipse 74% 134% at 122% -26%, rgba(64, 195, 225, .27) 0%, rgba(64, 195, 225, .085) 44%, transparent 82%),
      radial-gradient(ellipse 78% 122% at -18% 142%, rgba(222, 72, 172, .23) 0%, rgba(222, 72, 172, .07) 46%, transparent 82%),
      radial-gradient(ellipse 72% 128% at 120% 148%, rgba(172, 187, 91, .15) 0%, rgba(172, 187, 91, .04) 48%, transparent 84%),
      radial-gradient(ellipse 92% 146% at 54% -68%, rgba(125, 92, 205, .28) 0%, rgba(125, 92, 205, .08) 44%, transparent 82%),
      radial-gradient(ellipse 130% 88% at 44% -72%, rgba(237, 243, 255, .13) 0%, rgba(237, 243, 255, .025) 46%, transparent 82%);
    background-size: 100% 100%;
    background-position: center;
    opacity: .88;
    filter: blur(22px) saturate(140%);
  }

  body[data-route="foundation-color"][data-color-theme="dark"] .color-page-chrome {
    box-shadow:
      0 1px 0 rgba(143, 155, 196, .055),
      -30px 25px 92px -58px rgba(117, 84, 183, .26),
      34px 27px 98px -60px rgba(53, 181, 217, .22),
      8px 34px 104px -68px rgba(184, 75, 158, .16),
      -6px 38px 108px -72px rgba(168, 185, 106, .10),
      0 50px 116px -42px rgba(0, 0, 0, .70);
  }

  body[data-route="foundation-color"][data-color-theme="light"] .color-page-chrome::before {
    background:
      radial-gradient(ellipse at 8% 18%, rgba(254, 254, 254, .72), transparent 31%),
      radial-gradient(ellipse at 30% 92%, rgba(230, 126, 107, .11), transparent 34%),
      radial-gradient(ellipse at 55% 2%, rgba(196, 187, 232, .19), transparent 36%),
      radial-gradient(ellipse at 77% 18%, rgba(11, 92, 255, .13), transparent 36%),
      radial-gradient(ellipse at 96% 82%, rgba(46, 184, 154, .15), transparent 38%),
      linear-gradient(104deg, transparent 12%, rgba(254, 254, 254, .28) 42%, rgba(255, 245, 237, .16) 57%, transparent 78%);
    background-size: 145% 150%, 150% 160%, 160% 150%, 165% 155%, 155% 165%, 230% 100%;
    opacity: .62;
    filter: saturate(112%);
  }

  body[data-route="foundation-color"][data-color-theme="light"] .color-page-chrome {
    backdrop-filter: blur(32px) saturate(176%);
    -webkit-backdrop-filter: blur(32px) saturate(176%);
  }

  body[data-route="foundation-color"] .color-page-chrome > * {
    position: relative;
    z-index: 1;
  }

  body[data-route="foundation-color"][data-color-theme] .color-page-header {
    position: relative;
    top: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    width: 100%;
    height: var(--color-page-header-current-height);
    min-height: var(--color-page-header-current-height);
    max-height: var(--color-page-header-current-height);
    /* The unified chrome remains the outer clipping boundary. Let optical
       effects from the compact toggle cross the header/nav row boundary. */
    overflow: visible;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-route="foundation-color"][data-color-theme] .color-page-header::before,
  body[data-route="foundation-color"][data-color-theme] .color-page-header::after {
    content: none;
  }

  body[data-route="foundation-color"] .color-page-brand {
    position: relative;
    z-index: 2;
    display: flex;
    grid-column: 1;
    align-items: center;
    gap: var(--lds-space-4);
    min-width: 0;
    height: 100%;
    padding: 0 32px;
    color: var(--color-page-heading);
    text-decoration: none;
  }

  body[data-route="foundation-color"] .color-page-brand::before {
    content: "";
    position: absolute;
    inset: 19% 7% 17% 5%;
    z-index: -1;
    pointer-events: none;
    border-radius: 50%;
    background:
      radial-gradient(ellipse at 23% 50%, rgba(254, 254, 254, .70), transparent 29%),
      radial-gradient(ellipse at 42% 52%, rgba(11, 92, 255, .10), transparent 54%);
    filter: blur(18px);
    opacity: .78;
    animation: color-page-identity-breathe 18s cubic-bezier(.2, .8, .2, 1) infinite alternate;
  }

  body[data-route="foundation-color"] .color-page-brand-crest {
    flex: 0 0 auto;
    width: auto;
    height: 56px;
    color: var(--color-page-brand-mark, #DDEBFF);
    fill: currentColor;
    filter:
      drop-shadow(0 1px 0 rgba(254, 254, 254, .72))
      drop-shadow(0 8px 16px rgba(11, 92, 255, .18));
    transition: height var(--color-page-motion-duration) var(--color-page-motion-ease);
  }

  body[data-route="foundation-color"] .color-page-brand .eyebrow {
    grid-area: auto;
    order: 0;
    color: var(--color-page-kicker);
  }

  body[data-route="foundation-color"] .color-page-brand .brand-lockup-text {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-auto-flow: row;
    justify-items: start;
    row-gap: 1px;
    min-width: 0;
  }

  body[data-route="foundation-color"] .color-page-brand strong {
    order: 1;
    color: var(--color-page-heading);
    font-size: 1.25rem;
    line-height: var(--lds-line-tight);
    white-space: nowrap;
    text-shadow: 0 1px 0 rgba(254, 254, 254, .56);
  }

  body[data-route="foundation-color"] .color-page-brand .version-chip {
    order: 3;
    margin-top: 6px;
    border-color: color-mix(in srgb, var(--color-page-kicker) 22%, transparent);
    color: var(--color-page-copy);
    background: color-mix(in srgb, var(--color-bg-surface) 62%, transparent);
    box-shadow: 0 6px 16px rgba(38, 44, 54, .08);
  }

  body[data-route="foundation-color"] .color-page-header-rail {
    grid-column: 2;
    width: 100%;
    max-width: var(--color-page-rail-max);
    margin-inline: auto;
    padding-inline: var(--lds-space-3);
  }

  body[data-route="foundation-color"][data-color-theme] .color-page-nav,
  body[data-route="foundation-color"][data-color-theme] .color-page-nav.is-stuck {
    position: relative;
    top: auto;
    z-index: 1;
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    width: 100%;
    height: var(--color-page-nav-height);
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-route="foundation-color"][data-color-theme] .color-page-nav::before,
  body[data-route="foundation-color"][data-color-theme] .color-page-nav::after {
    content: none;
  }

  body[data-route="foundation-color"] .color-page-nav-rail {
    grid-column: 2;
    width: 100%;
    max-width: var(--color-page-rail-max);
    margin-inline: auto;
    padding-inline: var(--lds-space-3);
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-track {
    margin-inline: 0;
    padding: 10px 0 26px;
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-indicator {
    top: 10px;
    height: var(--lds-touch-target-min, 44px);
  }

  body[data-route="foundation-color"][data-color-theme] .app-nav {
    z-index: 30;
    display: block;
    padding: calc(var(--color-page-chrome-height) + 32px) 16px 24px;
    border: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    scrollbar-width: none;
    transition: padding-top var(--color-page-motion-duration) var(--color-page-motion-ease);
  }

  body[data-route="foundation-color"][data-color-theme] .app-nav::-webkit-scrollbar {
    display: none;
  }

  body[data-route="foundation-color"] .color-page-content-rail {
    padding: 32px 16px 80px;
  }

  body[data-route="foundation-color"] .color-foundation {
    --lds-card-inner-padding: 40px;
    --lds-section-padding-x: 56px;
    --lds-section-padding-y: 48px;
  }

  body[data-route="foundation-color"] .color-system-card-title,
  body[data-route="foundation-color"] .color-system-spec-grid {
    padding: var(--lds-space-6);
  }

  body[data-route="foundation-color"][data-color-theme] .app-nav > .brand-panel {
    display: none;
  }

  body[data-route="foundation-color"] .nav-rail-card {
    display: block;
    min-width: 0;
    border: 1px solid color-mix(in srgb, var(--lds-glass-border) 60%, transparent);
    border-radius: 24px;
    background:
      linear-gradient(145deg, rgba(254, 254, 254, .62), rgba(229, 229, 234, .42)),
      rgba(242, 242, 247, .48);
    box-shadow:
      inset 0 1px 0 rgba(254, 254, 254, .82),
      0 22px 34px -22px rgba(38, 44, 54, .34),
      0 10px 20px -12px rgba(11, 92, 255, .14);
    backdrop-filter: blur(28px) saturate(148%);
    -webkit-backdrop-filter: blur(28px) saturate(148%);
    overflow: hidden;
    transition:
      min-height 600ms cubic-bezier(.22, 1, .36, 1),
      border-radius 600ms cubic-bezier(.22, 1, .36, 1),
      box-shadow 360ms ease;
  }

  body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card {
    position: relative;
    isolation: isolate;
    background:
      radial-gradient(ellipse 142% 38% at -24% -3%, rgba(254, 254, 254, .74), rgba(254, 254, 254, .22) 42%, transparent 78%),
      radial-gradient(ellipse 118% 44% at 126% 17%, rgba(104, 164, 244, .38), rgba(104, 164, 244, .12) 43%, transparent 80%),
      radial-gradient(ellipse 156% 34% at -38% 40%, rgba(242, 119, 175, .30), rgba(242, 119, 175, .085) 46%, transparent 82%),
      radial-gradient(ellipse 126% 34% at 118% 38%, rgba(255, 215, 66, .24), rgba(242, 184, 55, .065) 44%, transparent 81%),
      radial-gradient(ellipse 132% 42% at 132% 63%, rgba(74, 204, 178, .31), rgba(74, 204, 178, .085) 45%, transparent 82%),
      radial-gradient(ellipse 148% 38% at 18% 108%, rgba(160, 125, 231, .31), rgba(160, 125, 231, .08) 46%, transparent 84%),
      rgba(236, 237, 244, .44);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    backdrop-filter: blur(28px) saturate(188%);
    -webkit-backdrop-filter: blur(28px) saturate(188%);
  }

  body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card::before,
  body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card::after {
    content: "";
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 42%;
  }

  body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card::before {
    inset: -18% -48%;
    background:
      radial-gradient(ellipse 54% 22% at 28% 31%, rgba(254, 254, 254, .55), transparent 72%),
      radial-gradient(ellipse 48% 25% at 66% 45%, rgba(91, 157, 241, .27), transparent 74%),
      radial-gradient(ellipse 52% 23% at 48% 69%, rgba(226, 104, 190, .24), transparent 76%);
    opacity: .80;
    filter: blur(24px) saturate(136%);
    transform: rotate(17deg) scale(1.06);
  }

  body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card::after {
    inset: -12% -56%;
    background:
      radial-gradient(ellipse 48% 20% at 38% 27%, rgba(255, 205, 73, .22), transparent 74%),
      radial-gradient(ellipse 54% 24% at 62% 58%, rgba(62, 211, 190, .23), transparent 76%),
      radial-gradient(ellipse 46% 22% at 34% 78%, rgba(139, 105, 231, .21), transparent 76%);
    opacity: .74;
    filter: blur(30px) saturate(142%);
    transform: rotate(-23deg) scale(1.08);
  }

  body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card > * {
    position: relative;
    z-index: 1;
  }

  body[data-route="foundation-color"][data-color-theme="light"] .color-foundation :is(
    .color-foundation-hero,
    .color-foundation-card
  ) {
    box-shadow:
      inset 0 1px 0 rgba(254, 254, 254, .90),
      0 3px 9px rgba(38, 44, 54, .09),
      0 32px 76px rgba(38, 44, 54, .19),
      0 11px 30px rgba(11, 92, 255, .085);
  }

  body[data-route="foundation-color"][data-color-theme="dark"] .color-foundation :is(
    .color-foundation-hero,
    .color-foundation-card
  ) {
    background:
      radial-gradient(ellipse at 8% 0%, rgba(222, 234, 255, .055), transparent 30%),
      radial-gradient(ellipse at 92% 8%, rgba(72, 184, 221, .045), transparent 36%),
      radial-gradient(ellipse at 22% 100%, rgba(184, 75, 158, .035), transparent 34%),
      linear-gradient(138deg, rgba(37, 41, 55, .72), rgba(17, 21, 30, .62) 58%, rgba(19, 28, 34, .56)),
      var(--color-page-panel);
    box-shadow:
      inset 0 1px 0 rgba(143, 155, 196, .075),
      0 0 0 1px rgba(94, 108, 151, .025),
      -24px 18px 76px -52px rgba(117, 84, 183, .28),
      27px 21px 82px -54px rgba(53, 181, 217, .24),
      5px 27px 88px -60px rgba(184, 75, 158, .16),
      -3px 30px 92px -66px rgba(168, 185, 106, .09),
      0 38px 98px -34px rgba(0, 0, 0, .78);
  }

  body[data-route="foundation-color"] .nav-rail-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
    padding: 10px 12px 8px 20px;
  }

  body[data-route="foundation-color"] .nav-rail-label {
    color: var(--color-page-kicker);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
    letter-spacing: var(--letter-spacing-label);
    text-transform: uppercase;
    white-space: nowrap;
    transition: opacity 220ms ease;
  }

  body[data-route="foundation-color"] .nav-rail-toggle {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid color-mix(in srgb, var(--color-page-kicker) 24%, transparent);
    border-radius: 50%;
    color: var(--color-page-heading);
    background:
      linear-gradient(145deg, rgba(254, 254, 254, .58), rgba(226, 236, 255, .26)),
      color-mix(in srgb, var(--color-bg-surface) 42%, transparent);
    box-shadow:
      inset 0 1px 0 rgba(254, 254, 254, .72),
      0 8px 18px rgba(38, 44, 54, .12);
    cursor: pointer;
    transition:
      color 220ms ease,
      border-color 220ms ease,
      background 220ms ease,
      box-shadow 220ms ease;
  }

  body[data-route="foundation-color"] .nav-rail-toggle:hover {
    border-color: color-mix(in srgb, var(--color-page-kicker) 42%, transparent);
    color: var(--color-page-nav-active-text);
    box-shadow:
      inset 0 1px 0 rgba(254, 254, 254, .82),
      0 10px 22px rgba(11, 92, 255, .16);
  }

  body[data-route="foundation-color"] .nav-rail-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 600ms cubic-bezier(.22, 1, .36, 1);
  }

  body[data-route="foundation-color"] .nav-rail-card .nav-tree {
    gap: var(--lds-space-6);
    padding: 0 var(--lds-space-5) var(--lds-space-6);
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-route="foundation-color"] .nav-rail-card .nav-group {
    gap: var(--lds-space-2);
  }

  body[data-route="foundation-color"] .nav-rail-card .nav-group h2 {
    margin-bottom: var(--lds-space-2);
    padding: var(--lds-space-3) var(--lds-space-4) var(--lds-space-2);
  }

  body[data-route="foundation-color"] .nav-rail-card .nav-group a {
    min-height: var(--lds-touch-target-min, 44px);
    padding-inline: var(--lds-space-4);
  }

  body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-card {
    border-color: rgba(255, 255, 255, .10);
    background:
      radial-gradient(ellipse 158% 16% at -28% -6%, rgba(224, 237, 255, .26) 0%, rgba(224, 237, 255, .10) 38%, transparent 76%),
      radial-gradient(ellipse 164% 18% at 126% 14%, rgba(36, 202, 235, .42) 0%, rgba(36, 202, 235, .14) 40%, transparent 78%),
      radial-gradient(ellipse 172% 17% at -30% 30%, rgba(232, 51, 164, .40) 0%, rgba(232, 51, 164, .13) 40%, transparent 78%),
      radial-gradient(ellipse 166% 19% at 132% 48%, rgba(137, 75, 226, .39) 0%, rgba(137, 75, 226, .13) 42%, transparent 80%),
      radial-gradient(ellipse 162% 18% at -34% 66%, rgba(39, 126, 224, .34) 0%, rgba(39, 126, 224, .10) 42%, transparent 80%),
      radial-gradient(ellipse 170% 20% at 128% 84%, rgba(194, 211, 67, .29) 0%, rgba(194, 211, 67, .08) 44%, transparent 82%),
      radial-gradient(ellipse 148% 14% at -22% 104%, rgba(225, 55, 164, .24) 0%, rgba(225, 55, 164, .06) 44%, transparent 82%),
      rgba(7, 9, 14, .66);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .13),
      0 22px 34px -22px rgba(0, 0, 0, .72),
      0 10px 20px -12px rgba(102, 127, 226, .20);
    backdrop-filter: blur(30px) saturate(194%);
    -webkit-backdrop-filter: blur(30px) saturate(194%);
  }

  body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-toggle {
    border-color: rgba(255, 255, 255, .12);
    background:
      linear-gradient(145deg, rgba(255, 255, 255, .10), rgba(8, 14, 24, .16)),
      rgba(14, 20, 30, .36);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .12),
      0 8px 18px rgba(0, 0, 0, .24);
  }

  body[data-route="foundation-color"].documentation-nav-collapsed .app-nav {
    padding-inline: 12px;
  }

  body[data-route="foundation-color"].documentation-nav-collapsed .nav-rail-card {
    min-height: 56px;
    border-radius: 20px;
  }

  body[data-route="foundation-color"].documentation-nav-collapsed .nav-rail-head {
    justify-content: center;
    height: 56px;
    padding: 0;
  }

  body[data-route="foundation-color"].documentation-nav-collapsed .nav-rail-label,
  body[data-route="foundation-color"].documentation-nav-collapsed .nav-rail-card .nav-tree {
    display: none;
  }

  body[data-route="foundation-color"].documentation-nav-collapsed .nav-rail-toggle svg {
    transform: rotate(180deg);
  }
}

@keyframes color-page-material-breathe {
  from { background-position: 0% 20%, 100% 70%, 0% 50%; transform: translate3d(-1%, 0, 0) scale(1.02); }
  to { background-position: 78% 58%, 24% 32%, 100% 50%; transform: translate3d(1%, 0, 0) scale(1.035); }
}

@keyframes color-page-nav-shimmer {
  from { background-position: 112% 50%; opacity: .34; }
  to { background-position: -18% 50%; opacity: .52; }
}

@keyframes color-nav-lens-flow {
  0% {
    background-position: 0% 18%, 100% 88%, 0% 50%, 50% 50%;
    filter: saturate(104%) brightness(104%);
  }
  50% {
    background-position: 62% 4%, 38% 116%, 100% 50%, 50% 50%;
    filter: saturate(112%) brightness(108%);
  }
  100% {
    background-position: 100% 28%, 0% 96%, 22% 50%, 50% 50%;
    filter: saturate(108%) brightness(106%);
  }
}

@keyframes color-nav-lens-caustic {
  0% {
    background-position: 8% 42%, 91% 56%, 48% 104%, 50% -4%;
    filter: blur(.14px) saturate(104%) brightness(102%);
    opacity: .42;
  }
  22% {
    background-position: 24% 38%, 76% 62%, 54% 110%, 46% 2%;
    filter: blur(.18px) saturate(112%) brightness(105%);
    opacity: .54;
  }
  47% {
    background-position: 38% 46%, 58% 72%, 42% 116%, 56% -8%;
    filter: blur(.1px) saturate(118%) brightness(108%);
    opacity: .68;
  }
  73% {
    background-position: 19% 52%, 70% 48%, 58% 108%, 44% -2%;
    filter: blur(.22px) saturate(110%) brightness(104%);
    opacity: .50;
  }
  100% {
    background-position: 31% 44%, 83% 66%, 50% 114%, 52% -6%;
    filter: blur(.16px) saturate(114%) brightness(106%);
    opacity: .60;
  }
}

@keyframes color-nav-lens-core {
  0% {
    background-position: 4% 8%, 96% 98%, 50% 0%;
    filter: blur(.2px) saturate(102%) brightness(101%);
    opacity: .66;
  }
  31% {
    background-position: 18% 4%, 74% 112%, 50% 0%;
    filter: blur(.12px) saturate(110%) brightness(104%);
    opacity: .78;
  }
  68% {
    background-position: 34% 14%, 86% 92%, 50% 0%;
    filter: blur(.24px) saturate(106%) brightness(103%);
    opacity: .72;
  }
  100% {
    background-position: 12% 2%, 68% 108%, 50% 0%;
    filter: blur(.16px) saturate(112%) brightness(105%);
    opacity: .82;
  }
}

@media (max-width: 720px) {
  body[data-route="foundation-color"] .color-page {
    --color-page-inline: 20px;
    --color-page-header-expanded-height: 232px;
    --color-page-header-collapsed-height: 112px;
  }

  body[data-route="foundation-color"] .color-page-header-rail {
    grid-template-areas:
      "kicker kicker"
      "title toggle"
      "lead lead";
    column-gap: var(--lds-space-3);
  }

  body[data-route="foundation-color"] .color-page-header h1 {
    font-size: clamp(2.65rem, 13vw, 3.5rem);
  }

  body[data-route="foundation-color"] .color-page-header .page-lead {
    font-size: var(--font-size-md);
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-track {
    overflow-x: auto;
    overflow-y: hidden;
  }
}

/* System Color families live on the section surface instead of nesting
 * another card hierarchy inside it. Functional preview canvases remain
 * bounded; titles, comparison columns, and values use spacing and rules. */
body[data-route="foundation-color"] .color-system-grid {
  gap: 0;
}

body[data-route="foundation-color"] .color-system-card {
  display: grid;
  gap: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

body[data-route="foundation-color"] .color-system-card + .color-system-card {
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 76%, transparent);
}

body[data-route="foundation-color"] .color-system-card-title,
body[data-route="foundation-color"][data-color-theme="dark"] .color-system-card-title {
  padding: clamp(32px, 4vw, 48px) 0 var(--lds-space-5);
  border: 0;
  border-radius: 0;
  background: transparent;
}

body[data-route="foundation-color"] .color-system-card-title h4 {
  font-size: clamp(24px, 2.2vw, 30px);
}

body[data-route="foundation-color"] .color-system-spec-grid {
  gap: clamp(28px, 4vw, 48px);
  padding: 0 0 clamp(40px, 5vw, 64px);
}

body[data-route="foundation-color"] .color-system-spec-panel + .color-system-spec-panel {
  padding-left: clamp(28px, 4vw, 48px);
  border-left: 1px solid color-mix(in srgb, var(--color-border-subtle) 68%, transparent);
}

body[data-route="foundation-color"] .color-system-spec-panel h5 {
  font-size: clamp(17px, 1.35vw, 20px);
}

body[data-route="foundation-color"] .color-system-spec-preview,
body[data-route="foundation-color"][data-color-theme="dark"] .color-system-spec-preview {
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--color-border-subtle) 70%, transparent),
    0 16px 34px -24px rgba(15, 23, 42, .32);
}

body[data-route="foundation-color"] .color-system-value-list {
  gap: 0;
}

body[data-route="foundation-color"] .color-system-value-row,
body[data-route="foundation-color"][data-color-theme="dark"] .color-system-value-row {
  min-height: 72px;
  padding: var(--lds-space-3) 0;
  border: 0;
  border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 68%, transparent);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

/* Light and Dark value rows are semantic comparison surfaces, not cards.
 * Their backgrounds preserve the context promised by each label while the
 * family itself remains flat on the parent System Colors surface. */
body[data-route="foundation-color"][data-color-theme] .color-system-value-row-light {
  padding-inline: var(--lds-space-4);
  border-top-color: rgba(74, 86, 104, .18);
  background: linear-gradient(100deg, #F8FAFD, #EEF3F8);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .90);
}

body[data-route="foundation-color"][data-color-theme] .color-system-value-row-light :is(strong, code, dt) {
  color: #111827;
}

body[data-route="foundation-color"][data-color-theme] .color-system-value-row-light dd {
  color: #374151;
}

body[data-route="foundation-color"][data-color-theme] .color-system-value-row-dark {
  padding-inline: var(--lds-space-4);
  border-top-color: rgba(255, 255, 255, .12);
  background: linear-gradient(100deg, #101722, #080D14);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07);
}

body[data-route="foundation-color"][data-color-theme] .color-system-value-row-dark :is(strong, code, dt) {
  color: #F3F7FF;
}

body[data-route="foundation-color"][data-color-theme] .color-system-value-row-dark dd {
  color: rgba(243, 247, 255, .78);
}

@media (max-width: 760px) {
  body[data-route="foundation-color"] .color-system-spec-panel + .color-system-spec-panel {
    padding-top: var(--lds-space-5);
    padding-left: 0;
    border-top: 1px solid color-mix(in srgb, var(--color-border-subtle) 68%, transparent);
    border-left: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="foundation-color"] :is(
    .color-page-header,
    .color-page-header-rail,
    .color-page-header h1,
    .color-page-header .page-lead,
    .color-page-nav,
    .color-page-nav .section-nav-indicator,
    .color-page-nav .section-nav-indicator::before,
    .color-page-nav .section-nav-indicator::after,
    .water-theme-toggle,
    .water-theme-track,
    .water-theme-flow,
    .water-theme-drop,
    .water-theme-drop-icon,
    .water-theme-label
  ) {
    transition: none;
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-route="foundation-color"] :is(
    .color-page-header,
    .color-page-nav,
    .color-page-nav::before,
    .water-theme-track,
    .water-theme-drop,
    .color-page-nav .section-nav-indicator
  ) {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  body[data-route="foundation-color"][data-color-theme="dark"] :is(.color-page-header, .color-page-nav, .color-page-nav::before) {
    background: #111A28;
  }

  body[data-route="foundation-color"][data-color-theme="light"] :is(.color-page-header, .color-page-nav, .color-page-nav::before) {
    background: #F3F8FD;
  }
}

@media (forced-colors: active) {
  body[data-route="foundation-color"] :is(.color-page-header, .color-page-nav) {
    border-color: CanvasText;
    background: Canvas;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

body[data-route="foundation-color"] :is(.color-page-header::before, .color-page-header::after, .color-page-nav::before, .color-page-nav::after) {
    content: none;
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-indicator {
    border-color: Highlight;
    background: Highlight;
    box-shadow: none;
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-link.is-active {
    color: HighlightText;
  }
}

/* Canonical editorial hierarchy must resolve after all legacy route layers. */
body[data-route="foundation-motion"] .motion-animation-intro{padding-bottom:var(--lds-editorial-gap-thesis)}
body[data-route="foundation-motion"] .motion-animation-intro h3{font-size:var(--lds-editorial-title-section);line-height:var(--lds-line-tight)}
body[data-route="foundation-motion"] .motion-contract-heading{padding-block:var(--lds-editorial-gap-stage)}
body[data-route="foundation-motion"] .motion-contract-heading h4,
body[data-route="foundation-motion"] .motion-choreography-contract h4{max-width:24ch;font-size:var(--lds-editorial-title-specification);line-height:var(--lds-line-tight)}
body[data-route="foundation-motion"] .motion-duration-scenes{border-bottom:0}
body[data-route="foundation-motion"] .motion-duration-scene{min-height:0}
body[data-route="foundation-motion"] .motion-duration-copy{gap:var(--lds-space-5)}
body[data-route="foundation-motion"] .motion-duration-copy>header{grid-template-columns:1fr;align-items:start}
body[data-route="foundation-motion"] .motion-duration-copy>header span,
body[data-route="foundation-motion"] .motion-duration-copy>header strong,
body[data-route="foundation-motion"] .motion-duration-copy>header code{grid-column:1}
body[data-route="foundation-motion"] .motion-duration-copy>header code{padding:0;margin-top:var(--lds-space-2)}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy{padding-block:var(--lds-editorial-gap-section)}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage{min-height:0;padding:0;border-top:1px solid var(--color-border-subtle);background:transparent}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage::before{content:none}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab){border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header{padding:var(--lds-editorial-gap-stage) var(--lds-editorial-inset-stage)!important;border-bottom:1px solid var(--color-border-subtle)!important;background:linear-gradient(110deg,color-mix(in srgb,var(--color-bg-surface) 68%,transparent),color-mix(in srgb,#8b67de 4%,transparent) 48%,color-mix(in srgb,#42d4e6 4%,transparent))!important}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>strong{max-width:19ch!important;font-size:var(--lds-editorial-title-demonstration)!important;line-height:var(--lds-line-tight)}
body[data-route="foundation-motion"] .motion-local-play-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid var(--color-border-subtle);background:transparent}
body[data-route="foundation-motion"] .motion-local-play-item,
body[data-route="foundation-motion"] .motion-local-play-item--field{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto minmax(var(--lds-editorial-stage-control-min),1fr) auto;gap:var(--lds-space-5);min-height:var(--lds-editorial-stage-example-min);padding:var(--lds-editorial-inset-stage);overflow:visible;border:0!important;border-radius:0;background:transparent;box-shadow:none}
body[data-route="foundation-motion"] .motion-local-play-item::before{content:none}
body[data-route="foundation-motion"] .motion-local-play-item:not(:last-child){border-right:1px solid var(--color-border-subtle)!important}
body[data-route="foundation-motion"] .motion-local-play-item--field>header,
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control,
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{grid-column:1;grid-row:auto}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{align-self:center}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{align-self:end}
body[data-route="foundation-motion"] .motion-compact-lab>header{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)!important}
body[data-route="foundation-motion"] .motion-compact-lab::before{content:none}

@media (max-width:900px){
  body[data-route="foundation-motion"] .motion-local-play-grid{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-local-play-item:not(:last-child){border-right:0!important;border-bottom:1px solid var(--color-border-subtle)!important}
}

/* ========================================================================
 * LDS editorial hierarchy contract — 2026-07-22
 *
 * A specification and its proof form one full-width editorial section.
 * Section theses outrank demonstration titles; stages connect by rules and
 * shared rhythm rather than nested cards. Motion is the first adopter of the
 * global editorial tokens above and the reference implementation for the
 * remaining LDS routes.
 * ====================================================================== */
body[data-route="foundation-motion"] .motion-animation-intro{
  padding-bottom:var(--lds-editorial-gap-thesis);
}
body[data-route="foundation-motion"] .motion-animation-intro h3{
  font-size:var(--lds-editorial-title-section);
  line-height:var(--lds-line-tight);
}
body[data-route="foundation-motion"] .motion-contract-heading{
  padding-block:var(--lds-editorial-gap-stage);
}
body[data-route="foundation-motion"] .motion-contract-heading h4,
body[data-route="foundation-motion"] .motion-choreography-contract h4{
  max-width:24ch;
  font-size:var(--lds-editorial-title-specification);
  line-height:var(--lds-line-tight);
}
body[data-route="foundation-motion"] .motion-duration-scenes{
  border-bottom:0;
}
body[data-route="foundation-motion"] .motion-duration-scene{
  min-height:0;
}
body[data-route="foundation-motion"] .motion-duration-copy{
  gap:var(--lds-space-5);
}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy{
  padding-block:var(--lds-editorial-gap-section);
}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage{
  min-height:0;
  padding:0;
  border-top:1px solid var(--color-border-subtle);
  background:transparent;
}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage::before{
  content:none;
}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab){
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header{
  padding:var(--lds-editorial-gap-stage) var(--lds-editorial-inset-stage);
  border-bottom:1px solid var(--color-border-subtle);
  background:linear-gradient(110deg,color-mix(in srgb,var(--color-bg-surface) 68%,transparent),color-mix(in srgb,#8b67de 4%,transparent) 48%,color-mix(in srgb,#42d4e6 4%,transparent));
}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>strong{
  max-width:19ch!important;
  font-size:var(--lds-editorial-title-demonstration)!important;
  line-height:var(--lds-line-tight);
}
body[data-route="foundation-motion"] .motion-local-play-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  border-bottom:1px solid var(--color-border-subtle);
  background:linear-gradient(138deg,color-mix(in srgb,var(--color-bg-surface) 92%,transparent),color-mix(in srgb,#9064dc 4%,var(--color-bg-surface)) 44%,color-mix(in srgb,#45c8dc 4%,var(--color-bg-surface)));
}
body[data-route="foundation-motion"] .motion-local-play-item,
body[data-route="foundation-motion"] .motion-local-play-item--field{
  grid-column:auto;
  grid-template-columns:1fr;
  grid-template-rows:auto minmax(180px,1fr) auto;
  gap:var(--lds-space-5);
  min-height:360px;
  padding:var(--lds-editorial-inset-stage);
  overflow:visible;
  border:0!important;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
body[data-route="foundation-motion"] .motion-local-play-item::before{
  content:none;
}
body[data-route="foundation-motion"] .motion-local-play-item:not(:last-child){
  border-right:1px solid var(--color-border-subtle)!important;
}
body[data-route="foundation-motion"] .motion-local-play-item--field>header,
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control,
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{
  grid-column:1;
  grid-row:auto;
}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{
  align-self:center;
}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{
  align-self:end;
}
body[data-route="foundation-motion"] .motion-compact-lab>header{
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)!important;
  padding:var(--lds-editorial-gap-stage) var(--lds-editorial-inset-stage)!important;
  background:linear-gradient(110deg,color-mix(in srgb,var(--color-bg-surface) 68%,transparent),color-mix(in srgb,#8b67de 4%,transparent) 48%,color-mix(in srgb,#42d4e6 4%,transparent));
}
body[data-route="foundation-motion"] .motion-compact-lab::before{
  content:none;
}

@media (max-width:900px){
  body[data-route="foundation-motion"] .motion-local-play-grid{
    grid-template-columns:1fr;
  }
  body[data-route="foundation-motion"] .motion-local-play-item:not(:last-child){
    border-right:0!important;
    border-bottom:1px solid var(--color-border-subtle)!important;
  }
}

/* LDS interaction cursor standard
   Every exposed action advertises clickability with the platform hand cursor.
   Disabled and explicitly hidden controls remain visibly non-actionable. */
:where(
  a[href],
  area[href],
  button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"],
  input[type="image"],
  select,
  summary,
  label[for],
  [role="button"],
  [role="link"],
  [role="menuitem"],
  [role="menuitemradio"],
  [role="option"],
  [role="switch"],
  [role="tab"]
):not(:disabled):not([aria-disabled="true"]):not([aria-hidden="true"]) {
  cursor: pointer;
}

:where(
  button:disabled,
  input:disabled,
  select:disabled,
  [aria-disabled="true"]
) {
  cursor: not-allowed;
}

/* Canonical shared-theme resolution. Keep this after every legacy route layer. */
body[data-lds-shell="shared"] { --lds-shell-brand-width: 300px; background: var(--lds-atmosphere-bg); background-attachment: fixed; }
body[data-lds-shell="shared"][data-color-theme="dark"] {
  --color-label-emphasis: #72E9FF;
  --lds-label-emphasis-glow: 0 0 8px rgba(75, 222, 255, 0.22);
  --lds-atmosphere-bg: radial-gradient(ellipse 76% 54% at -18% 8%,rgba(116,88,184,.12),transparent 72%),radial-gradient(ellipse 68% 46% at 112% 20%,rgba(51,178,215,.10),transparent 74%),radial-gradient(ellipse 74% 44% at 24% 112%,rgba(188,72,153,.07),transparent 76%),linear-gradient(138deg,#080a0f,#10141d 52%,#090c12);
  --lds-glass-border: rgba(176,205,255,.16);
  --lds-glass-orb-a: rgba(196,215,255,.06);
  --lds-glass-orb-b: rgba(66,183,218,.05);
  --lds-glass-hero-orb: rgba(83,176,222,.08);
  --lds-glass-surface: radial-gradient(ellipse 88% 54% at -10% -18%,rgba(218,230,255,.075),transparent 64%),radial-gradient(ellipse 68% 48% at 112% 8%,rgba(57,177,211,.055),transparent 68%),radial-gradient(ellipse 72% 42% at 18% 116%,rgba(185,72,153,.04),transparent 72%),linear-gradient(142deg,rgba(34,39,53,.88),rgba(17,21,30,.86) 58%,rgba(18,27,33,.80));
  --lds-glass-hero: radial-gradient(ellipse 82% 80% at 92% 4%,rgba(62,181,218,.075),transparent 64%),linear-gradient(140deg,rgba(38,44,60,.90),rgba(17,21,30,.86));
  --lds-glass-shell: var(--lds-glass-surface);
  --lds-glass-inner: linear-gradient(142deg,rgba(42,48,64,.72),rgba(18,22,32,.68));
  --lds-glass-shadow: 0 32px 84px -38px rgba(0,0,0,.88);
  --lds-glass-shadow-soft: 0 18px 48px -30px rgba(0,0,0,.78);
  --color-text-primary: #f8fbff;
  --color-text-secondary: #c3cada;
  --color-text-muted: #9da7ba;
  --color-text-inverse: #f8fbff;
}
body[data-lds-shell="shared"][data-color-theme="light"] {
  --lds-atmosphere-bg: radial-gradient(ellipse 82% 48% at -18% 4%,rgba(255,255,255,.82),transparent 68%),radial-gradient(ellipse 72% 46% at 112% 20%,rgba(111,166,229,.15),transparent 72%),radial-gradient(ellipse 76% 42% at 22% 112%,rgba(213,129,174,.10),transparent 74%),linear-gradient(138deg,#f4f5f8,#e9edf4 54%,#f5f6f8);
  --lds-glass-border: rgba(82,103,132,.24);
  --lds-glass-orb-a: rgba(255,255,255,.48);
  --lds-glass-orb-b: rgba(91,145,218,.10);
  --lds-glass-hero-orb: rgba(91,145,218,.12);
  --lds-glass-surface: radial-gradient(ellipse 92% 56% at -12% -18%,rgba(255,255,255,.86),transparent 64%),radial-gradient(ellipse 70% 50% at 112% 10%,rgba(127,174,229,.13),transparent 68%),radial-gradient(ellipse 70% 42% at 18% 116%,rgba(218,139,180,.08),transparent 72%),linear-gradient(142deg,rgba(255,255,255,.88),rgba(237,240,246,.86));
  --lds-glass-hero: radial-gradient(ellipse 82% 80% at 92% 4%,rgba(112,168,231,.14),transparent 64%),linear-gradient(140deg,rgba(255,255,255,.94),rgba(235,239,246,.88));
  --lds-glass-shell: var(--lds-glass-surface);
  --lds-glass-inner: linear-gradient(142deg,rgba(255,255,255,.76),rgba(229,234,243,.72));
  --lds-glass-shadow: 0 30px 76px -38px rgba(38,44,54,.38);
  --lds-glass-shadow-soft: 0 18px 44px -30px rgba(38,44,54,.30);
}
body[data-lds-shell="shared"] :is(.lds-page-header,.lds-page-section-nav) { grid-template-columns:var(--lds-shell-brand-width) minmax(0,1fr) auto; }
body[data-lds-shell="shared"] .lds-page-section-nav { grid-template-columns:var(--lds-shell-brand-width) minmax(0,1fr); }
body[data-lds-shell="shared"] .lds-page-brand { min-width:var(--lds-shell-brand-width); }
body[data-lds-shell="shared"] .lds-page-brand-crest { width:58px; min-width:58px; }
body[data-lds-shell="shared"] .lds-page-brand .brand-lockup-text { width:auto; min-width:0; }
body[data-lds-shell="shared"] :is(.foundation-page-grid>.panel-card,.foundation-value-grid,.foundation-swatch-group) { color:var(--color-text-primary); background:var(--lds-glass-surface); }
body[data-lds-shell="shared"][data-color-theme="dark"] :is(.foundation-page-grid>.panel-card,.foundation-value-grid,.foundation-swatch-group)::before { opacity:.22; }
body[data-lds-shell="shared"] .foundation-page-grid>.panel-card :is(h2,h3,h4,strong,li),body[data-lds-shell="shared"] .foundation-example-card>h2 { color:var(--color-text-primary); }
body[data-lds-shell="shared"] .foundation-page-grid>.panel-card :is(p,small,dd,code) { color:var(--color-text-secondary); }
body[data-lds-shell="shared"] .lds-page-section-nav .section-nav-track { scrollbar-width:none; mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%); }
body[data-lds-shell="shared"] .lds-page-section-nav .section-nav-track::-webkit-scrollbar { display:none; }
@media(max-width:899px){body[data-lds-shell="shared"]{--lds-shell-brand-width:0px}body[data-lds-shell="shared"] .lds-page-brand{min-width:0}}

/* Shared narrow-shell contract. The documentation dock is represented once;
   the canonical header owns identity, page purpose, appearance, and sections. */
@media (max-width:1039px) {
  body[data-lds-shell][data-lds-shell-standard="nacreous"] .app-nav {
    position:relative;
    top:auto;
    z-index:30;
    min-height:64px;
    max-height:none;
    padding:0;
    border:0;
    background:var(--lds-chrome-surface);
    box-shadow:var(--lds-chrome-shadow-rest);
    overflow:visible;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .app-nav>.brand-panel {
    display:none;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .app-nav .nav-rail-card {
    border:0;
    border-radius:0;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .lds-page-header {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .lds-page-heading {
    grid-column:1/-1;
    width:100%;
    max-width:none;
    padding:20px 16px 24px;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .lds-page-heading-copy {
    max-width:760px;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .lds-page-heading p {
    max-width:62ch;
  }
}

@media (max-width:520px) {
  body[data-lds-shell][data-lds-shell-standard="nacreous"] .lds-page-heading {
    padding-inline:16px;
  }
}

/* Pattern and ruling comparative pass. Patterns are relationships, so the
   documentation uses editorial bands and live composition instead of a stack
   of interchangeable cards. */
.pattern-editorial,.ruling-deferred{display:grid;gap:clamp(56px,7vw,96px);min-width:0}
.pattern-editorial :is(h2,p),.ruling-deferred :is(h2,p){margin:0}
.pattern-editorial h2,.ruling-deferred h2{color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(30px,4vw,56px);line-height:1.08;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
.pattern-editorial p,.ruling-deferred p{color:var(--color-text-secondary);font-size:16px;line-height:1.58}
.pattern-proof-band,.pattern-contract-band,.pattern-variant-band,.pattern-responsive-band,.pattern-access-band{display:grid;grid-template-columns:minmax(220px,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,88px);align-items:start;padding-block:clamp(40px,6vw,72px);border-block:1px solid var(--color-border-subtle)}
.pattern-proof-band>div:first-child,.pattern-contract-band>div:first-child,.pattern-variant-band>div:first-child,.pattern-responsive-band>div:first-child,.pattern-access-band>div:first-child{display:grid;gap:18px}
.pattern-proof-stage{display:grid;align-content:center;min-height:340px;padding:clamp(24px,4vw,48px);border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-bg-surface) 76%,transparent)}
.pattern-anatomy-list{display:grid;border-top:1px solid var(--color-border-subtle)}
.pattern-anatomy-list p{display:grid;grid-template-columns:52px minmax(0,1fr);gap:18px;padding:16px 0;border-bottom:1px solid var(--color-border-subtle)}
.pattern-anatomy-list span{color:var(--lds-direction-label-color);font-family:var(--lds-font-mono);font-size:12px}
.pattern-anatomy-list strong{color:var(--color-text-primary)}
.pattern-variant-band>div:last-child{display:flex;flex-wrap:wrap;gap:10px}
.pattern-variant-band>div:last-child span{display:inline-grid;place-items:center;min-height:44px;padding:8px 16px;border:1px solid var(--color-border-standard);border-radius:var(--lds-radius-pill);color:var(--color-text-primary);background:color-mix(in srgb,var(--color-bg-surface) 72%,transparent);font-weight:700}
.pattern-responsive-proof{display:grid;grid-template-columns:1.5fr .7fr;gap:24px;align-items:end}
.pattern-responsive-proof figure{display:grid;gap:8px;min-height:250px;margin:0;padding:16px;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-bg-surface) 72%,transparent)}
.pattern-responsive-proof figure.is-wide{grid-template:28px 1fr auto/1fr .42fr}
.pattern-responsive-proof figure.is-narrow{grid-template:28px 1fr .52fr auto/1fr}
.pattern-responsive-proof figure i{grid-column:1/-1;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-accent) 14%,var(--color-bg-panel))}
.pattern-responsive-proof figure main,.pattern-responsive-proof figure aside{display:block;min-width:0;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,#ff4f7a 10%,var(--color-bg-panel))}
.pattern-responsive-proof figcaption{grid-column:1/-1;color:var(--color-text-secondary);font-family:var(--lds-font-mono);font-size:12px}
.pattern-guidance-band{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-block:1px solid var(--color-border-subtle)}
.pattern-guidance-title{grid-column:1/-1;max-width:18ch;padding:clamp(32px,5vw,64px) clamp(28px,4vw,48px) 0}
.pattern-guidance-band>div{display:grid;align-content:start;gap:0;padding:clamp(28px,4vw,48px)}
.pattern-guidance-band>div+div{border-left:1px solid var(--color-border-subtle)}
.pattern-guidance-band p,.pattern-access-band>div:last-child p{padding:16px 0;border-bottom:1px solid var(--color-border-subtle)}
.pattern-guidance-band .lds-component-kicker,.pattern-access-band .lds-component-kicker{margin-bottom:14px}
.ruling-deferred>section{display:grid;grid-template-columns:minmax(110px,.36fr) minmax(260px,1fr) minmax(220px,.8fr);gap:clamp(28px,5vw,72px);padding-block:clamp(44px,6vw,80px);border-block:1px solid var(--color-border-subtle)}
.ruling-deferred>section>p{font-size:18px;line-height:1.62}
.ruling-deferred>section>div{display:grid;border-top:1px solid var(--color-border-subtle)}
.ruling-deferred>section>div p{display:grid;gap:6px;padding:18px 0;border-bottom:1px solid var(--color-border-subtle)}
.ruling-deferred>section>div strong{color:var(--color-text-primary)}
.ruling-deferred>section>div span{color:var(--color-text-secondary)}

@media (max-width:900px){
 .pattern-proof-band,.pattern-contract-band,.pattern-variant-band,.pattern-responsive-band,.pattern-access-band,.ruling-deferred>section{grid-template-columns:1fr}
 .pattern-responsive-proof{grid-template-columns:1fr}
 .pattern-guidance-band{grid-template-columns:1fr}
 .pattern-guidance-band>div+div{border-top:1px solid var(--color-border-subtle);border-left:0}
}

/* A route may retain its historical on-page navigator for source fidelity, but
   the shared chrome is the single documentation navigator presented to users. */
body[data-lds-shell="shared"] .lds-page-content :is(
  .buttons-liquid-glass-page,
  .source-component-page,
  .input-source-page,
  .modal-spec-page,
  .tabs-source-page,
  .notification-source-page
) > :is(.buttons-section-nav, .component-section-nav, .input-onpage-nav, .modal-spec-tabs) {
  display: none;
}

@media (min-width: 900px) {
  body[data-lds-shell="shared"] .app-nav { z-index: 20; }
}

@media (min-width: 900px) and (max-width: 1199px) {
  body[data-lds-shell="shared"] .pdf-anatomy-stage {
    grid-template-columns: minmax(0, 1fr);
    min-width: 0;
  }
}

/* Final Color navigation material contract. Natural pearl supplies the color;
   shallow water supplies the geometry. The lens uses one fine edge and soft
   refraction instead of a raised, multi-ring UI bevel. */
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator {
  border-color: rgba(205, 221, 239, .18);
  background:
    radial-gradient(ellipse 94% 72% at 8% -24%, rgba(239,246,255,.16), transparent 54%),
    radial-gradient(ellipse 76% 92% at 108% 10%, rgba(55,190,218,.13), transparent 60%),
    radial-gradient(ellipse 84% 76% at -16% 112%, rgba(196,67,153,.10), transparent 62%),
    radial-gradient(ellipse 72% 88% at 104% 126%, rgba(168,184,87,.075), transparent 64%),
    radial-gradient(ellipse 82% 70% at 48% 116%, rgba(115,82,184,.11), transparent 66%),
    rgba(5,8,13,.42);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.34),
    0 7px 18px rgba(0,0,0,.24),
    0 0 18px rgba(60,170,205,.055);
  opacity: 1;
  backdrop-filter: blur(15px) saturate(152%) brightness(104%);
  -webkit-backdrop-filter: blur(15px) saturate(152%) brightness(104%);
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::before {
  inset: 1px;
  background:
    radial-gradient(ellipse 70% 46% at 24% 8%, rgba(255,255,255,.10), transparent 70%),
    radial-gradient(ellipse 64% 54% at 82% 92%, rgba(72,202,226,.07), transparent 72%);
  filter: none;
  opacity: .72;
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::after {
  inset: 1px 3px auto;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.12), transparent);
  filter: none;
  opacity: .68;
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator {
  border-color: rgba(92, 118, 148, .26);
  background:
    radial-gradient(ellipse 96% 74% at 6% -22%, rgba(255,255,255,.82), transparent 56%),
    radial-gradient(ellipse 78% 88% at 108% 8%, rgba(103,166,226,.16), transparent 62%),
    radial-gradient(ellipse 86% 76% at -18% 112%, rgba(218,132,174,.13), transparent 64%),
    radial-gradient(ellipse 74% 88% at 106% 126%, rgba(93,188,164,.12), transparent 66%),
    radial-gradient(ellipse 84% 72% at 48% 116%, rgba(156,137,207,.13), transparent 68%),
    rgba(244,246,249,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -1px 0 rgba(78,104,133,.16),
    0 7px 18px rgba(38,54,72,.13),
    0 0 16px rgba(77,157,215,.055);
  opacity: 1;
  backdrop-filter: blur(14px) saturate(148%) brightness(103%);
  -webkit-backdrop-filter: blur(14px) saturate(148%) brightness(103%);
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator::before {
  inset: 1px;
  background:
    radial-gradient(ellipse 72% 48% at 24% 6%, rgba(255,255,255,.48), transparent 72%),
    radial-gradient(ellipse 66% 54% at 82% 92%, rgba(82,177,215,.09), transparent 74%);
  filter: none;
  opacity: .76;
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator::after {
  inset: 1px 3px auto;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.48), transparent);
  filter: none;
  opacity: .72;
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  border-color: rgba(215,231,247,.26);
  background:
    radial-gradient(ellipse 94% 72% at 8% -24%, rgba(245,249,255,.20), transparent 54%),
    radial-gradient(ellipse 76% 92% at 108% 10%, rgba(55,190,218,.17), transparent 60%),
    radial-gradient(ellipse 84% 76% at -16% 112%, rgba(196,67,153,.13), transparent 62%),
    radial-gradient(ellipse 72% 88% at 104% 126%, rgba(168,184,87,.095), transparent 64%),
    radial-gradient(ellipse 82% 70% at 48% 116%, rgba(115,82,184,.14), transparent 66%),
    rgba(7,10,16,.46);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.36),
    0 9px 22px rgba(0,0,0,.28),
    0 0 20px rgba(60,170,205,.075);
  backdrop-filter: blur(13px) saturate(166%) brightness(106%);
  -webkit-backdrop-filter: blur(13px) saturate(166%) brightness(106%);
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  border-color: rgba(74,112,153,.34);
  background:
    radial-gradient(ellipse 96% 74% at 6% -22%, rgba(255,255,255,.90), transparent 56%),
    radial-gradient(ellipse 78% 88% at 108% 8%, rgba(103,166,226,.20), transparent 62%),
    radial-gradient(ellipse 86% 76% at -18% 112%, rgba(218,132,174,.16), transparent 64%),
    radial-gradient(ellipse 74% 88% at 106% 126%, rgba(93,188,164,.15), transparent 66%),
    radial-gradient(ellipse 84% 72% at 48% 116%, rgba(156,137,207,.16), transparent 68%),
    rgba(247,249,251,.52);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    inset 0 -1px 0 rgba(78,104,133,.18),
    0 9px 22px rgba(38,54,72,.15),
    0 0 18px rgba(77,157,215,.07);
  backdrop-filter: blur(12px) saturate(158%) brightness(104%);
  -webkit-backdrop-filter: blur(12px) saturate(158%) brightness(104%);
}

/* Living pearl correction. Pearl color comes from moving, low-alpha
   subsurface fields so the navigation atmosphere remains visible through it. */
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  background:
    radial-gradient(ellipse 94% 72% at 8% -24%, rgba(250,253,255,.26), transparent 53%),
    radial-gradient(ellipse 76% 92% at 108% 10%, rgba(24,220,255,.34), transparent 60%),
    radial-gradient(ellipse 84% 76% at -16% 112%, rgba(255,43,173,.29), transparent 62%),
    radial-gradient(ellipse 72% 88% at 104% 126%, rgba(213,236,63,.24), transparent 64%),
    radial-gradient(ellipse 82% 70% at 48% 116%, rgba(148,70,255,.30), transparent 66%),
    rgba(3, 6, 10, .10);
  background-size: 150% 138%, 164% 170%, 168% 164%, 170% 176%, 168% 154%, 100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.25),
    inset 0 -1px 0 rgba(0,0,0,.28),
    0 7px 18px rgba(0,0,0,.24),
    0 0 22px rgba(36,198,231,.10),
    0 0 30px rgba(213,54,174,.055);
  animation: color-nav-black-pearl-drift 12s cubic-bezier(.45, 0, .24, 1) infinite alternate;
  animation-delay: -4.5s;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  background:
    radial-gradient(ellipse 96% 74% at 6% -22%, rgba(255,255,255,.46), transparent 58%),
    radial-gradient(ellipse 78% 88% at 108% 8%, rgba(68,157,235,.22), transparent 64%),
    radial-gradient(ellipse 86% 76% at -18% 112%, rgba(232,112,174,.18), transparent 66%),
    radial-gradient(ellipse 74% 88% at 106% 126%, rgba(65,190,157,.17), transparent 68%),
    radial-gradient(ellipse 84% 72% at 48% 116%, rgba(148,116,220,.18), transparent 70%),
    rgba(255, 255, 255, .12);
  background-size: 170% 150%, 185% 190%, 190% 180%, 185% 200%, 190% 170%, 100% 100%;
  background-repeat: no-repeat;
  animation: color-nav-white-pearl-drift 18s cubic-bezier(.45, 0, .28, 1) infinite alternate;
  animation-delay: -6s;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-indicator::before {
  inset: -16% -10%;
  background:
    radial-gradient(ellipse at 20% 30%, transparent 0 30%, rgba(255,255,255,.22) 36%, transparent 47%),
    radial-gradient(ellipse at 76% 68%, transparent 0 39%, rgba(36,230,255,.26) 48%, transparent 61%),
    radial-gradient(ellipse at 42% 112%, rgba(246,53,202,.21), transparent 57%);
  background-size: 148% 174%, 164% 154%, 128% 142%;
  background-repeat: no-repeat;
  opacity: .88;
  animation: color-nav-pearl-caustic-drift 9s ease-in-out infinite alternate;
  animation-delay: -3.2s;
}

body[data-route="foundation-color"] .color-page-nav .section-nav-indicator::after {
  inset: 1px 3px;
  height: auto;
  background:
    radial-gradient(ellipse 70% 54% at 22% 4%, rgba(255,255,255,.34), transparent 64%),
    radial-gradient(ellipse 62% 48% at 84% 104%, rgba(70,216,246,.16), transparent 70%);
  background-size: 152% 162%, 168% 154%;
  background-repeat: no-repeat;
  opacity: .82;
  animation: color-nav-water-sheen-drift 10s ease-in-out infinite alternate;
  animation-delay: -6s;
}

@keyframes color-nav-black-pearl-drift {
  0% { background-position: -12% -4%, 118% 4%, -16% 116%, 116% 108%, 42% 122%, 0 0; filter: saturate(118%) brightness(102%); }
  25% { background-position: 18% 12%, 82% 30%, 8% 78%, 92% 82%, 72% 96%, 0 0; filter: saturate(152%) brightness(109%); }
  52% { background-position: 54% -2%, 48% -8%, 42% 102%, 62% 120%, 36% 80%, 0 0; filter: saturate(178%) brightness(114%); }
  76% { background-position: 88% 18%, 12% 22%, 76% 72%, 24% 90%, 8% 112%, 0 0; filter: saturate(160%) brightness(110%); }
  100% { background-position: 118% 4%, -16% 34%, 108% 116%, -12% 76%, 82% 88%, 0 0; filter: saturate(132%) brightness(105%); }
}

@keyframes color-nav-white-pearl-drift {
  0% { background-position: 2% 2%, 100% 14%, 0% 100%, 100% 96%, 48% 108%, 0 0; filter: saturate(102%) brightness(101%); }
  48% { background-position: 32% 10%, 68% 0%, 22% 84%, 80% 110%, 64% 94%, 0 0; filter: saturate(116%) brightness(104%); }
  100% { background-position: 70% 16%, 44% 22%, 44% 106%, 54% 88%, 30% 102%, 0 0; filter: saturate(108%) brightness(102%); }
}

@keyframes color-nav-pearl-caustic-drift {
  0% { background-position: -8% 24%, 112% 48%, 28% 118%; transform: translate3d(-2.2%, -.4%, 0) scale(1.015); filter: saturate(118%) brightness(102%); }
  48% { background-position: 48% 52%, 54% 78%, 70% 96%; transform: translate3d(.8%, -.8%, 0) scale(1.04); filter: saturate(154%) brightness(112%); }
  100% { background-position: 108% 30%, -10% 58%, 24% 112%; transform: translate3d(2.2%, .6%, 0) scale(1.02); filter: saturate(132%) brightness(106%); }
}

@keyframes color-nav-water-sheen-drift {
  0% { background-position: -18% -4%, 118% 108%; opacity: .58; filter: brightness(102%); }
  46% { background-position: 52% 12%, 58% 82%; opacity: .94; filter: brightness(118%); }
  100% { background-position: 118% 2%, -16% 104%; opacity: .66; filter: brightness(106%); }
}

/* The black pearl's iridescence is one continuous blurred color field. Its
   perimeter remains well outside the clipped lens, preventing tile seams or
   straight internal boundaries while neighboring hues flow into each other. */
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::before {
  inset: -78% -34%;
  background:
    conic-gradient(
      from 18deg at 50% 50%,
      rgba(77, 238, 224, .42) 0deg,
      rgba(153, 246, 91, .38) 54deg,
      rgba(225, 219, 70, .32) 96deg,
      rgba(255, 77, 181, .42) 154deg,
      rgba(146, 71, 255, .48) 218deg,
      rgba(48, 151, 255, .44) 278deg,
      rgba(77, 238, 224, .42) 360deg
    );
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .76;
  filter: blur(13px) saturate(142%) brightness(106%);
  transform-origin: 50% 50%;
  animation: color-nav-pearl-spectrum-morph 10s cubic-bezier(.45, 0, .25, 1) infinite alternate;
  animation-delay: -3.8s;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::after {
  inset: -12% -8%;
  height: auto;
  background:
    radial-gradient(ellipse 48% 36% at 24% 18%, rgba(255,255,255,.38), rgba(194,238,255,.12) 38%, transparent 74%),
    radial-gradient(ellipse 58% 48% at 78% 86%, rgba(62,224,226,.17), rgba(164,70,232,.10) 46%, transparent 78%);
  background-size: 138% 148%, 146% 142%;
  background-repeat: no-repeat;
  filter: blur(3px) saturate(132%);
  animation: color-nav-pearl-soft-light 8s ease-in-out infinite alternate;
  animation-delay: -5.1s;
}

@keyframes color-nav-pearl-spectrum-morph {
  0% {
    transform: translate3d(-8%, -3%, 0) rotate(-12deg) scale(1.06, .92);
    filter: blur(14px) saturate(132%) brightness(102%) hue-rotate(-8deg);
  }
  34% {
    transform: translate3d(5%, 4%, 0) rotate(34deg) scale(.96, 1.10);
    filter: blur(12px) saturate(176%) brightness(112%) hue-rotate(12deg);
  }
  68% {
    transform: translate3d(-2%, 7%, 0) rotate(76deg) scale(1.12, .94);
    filter: blur(15px) saturate(188%) brightness(110%) hue-rotate(30deg);
  }
  100% {
    transform: translate3d(8%, -4%, 0) rotate(118deg) scale(.94, 1.08);
    filter: blur(13px) saturate(158%) brightness(106%) hue-rotate(48deg);
  }
}

@keyframes color-nav-pearl-soft-light {
  0% { background-position: -12% -8%, 112% 108%; opacity: .60; transform: scale(1.02); }
  48% { background-position: 46% 12%, 58% 82%; opacity: .92; transform: scale(1.08); }
  100% { background-position: 112% 4%, -10% 102%; opacity: .68; transform: scale(1.03); }
}

/* Seamless black-pearl lens. Keep the physical body transparent and dark;
   iridescence lives only in soft radial blooms whose fades complete before
   their layer boundaries, so no rectangular or linear color seams can form. */
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  border-color: rgba(210, 226, 241, .20);
  background: rgba(1, 4, 8, .04);
  background-image: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 7px 18px rgba(0,0,0,.20),
    0 0 18px rgba(48,177,205,.045);
  backdrop-filter: blur(7px) saturate(152%) brightness(104%);
  -webkit-backdrop-filter: blur(7px) saturate(152%) brightness(104%);
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::before {
  inset: -72% -38%;
  background:
    radial-gradient(ellipse 34% 42% at 22% 48%, rgba(190,52,226,.27) 0%, rgba(135,43,207,.15) 34%, transparent 72%),
    radial-gradient(ellipse 38% 46% at 52% 42%, rgba(26,215,240,.26) 0%, rgba(34,151,218,.14) 38%, transparent 74%),
    radial-gradient(ellipse 32% 40% at 80% 56%, rgba(130,211,77,.22) 0%, rgba(199,198,55,.12) 36%, transparent 72%),
    radial-gradient(ellipse 26% 34% at 58% 78%, rgba(231,52,165,.18) 0%, transparent 72%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .82;
  filter: blur(10px) saturate(128%) brightness(98%);
  transform-origin: 50% 50%;
  animation: color-nav-organic-pearl-morph 12s cubic-bezier(.45, 0, .25, 1) infinite alternate;
  animation-delay: -4.4s;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator::after {
  inset: -24% -14%;
  height: auto;
  background:
    radial-gradient(ellipse 38% 30% at 25% 24%, rgba(255,255,255,.23) 0%, rgba(205,238,247,.10) 42%, transparent 76%),
    radial-gradient(ellipse 42% 34% at 76% 82%, rgba(47,204,225,.13) 0%, transparent 76%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .76;
  filter: blur(5px);
  animation: color-nav-organic-light-morph 10s ease-in-out infinite alternate;
  animation-delay: -6.2s;
}

@keyframes color-nav-organic-pearl-morph {
  0% { transform: translate3d(-5%, -2%, 0) rotate(-5deg) scale(1.04, .96); filter: blur(11px) saturate(120%) brightness(95%) hue-rotate(-6deg); }
  38% { transform: translate3d(3%, 3%, 0) rotate(15deg) scale(.98, 1.06); filter: blur(12px) saturate(148%) brightness(103%) hue-rotate(12deg); }
  72% { transform: translate3d(-1%, 5%, 0) rotate(31deg) scale(1.07, .97); filter: blur(10px) saturate(140%) brightness(101%) hue-rotate(25deg); }
  100% { transform: translate3d(5%, -3%, 0) rotate(46deg) scale(.97, 1.05); filter: blur(12px) saturate(130%) brightness(98%) hue-rotate(38deg); }
}

@keyframes color-nav-organic-light-morph {
  0% { transform: translate3d(-5%, -2%, 0) scale(1.02); opacity: .50; }
  50% { transform: translate3d(4%, 3%, 0) scale(1.08); opacity: .72; }
  100% { transform: translate3d(7%, -1%, 0) scale(1.03); opacity: .56; }
}

/* Navigation spacing contract: every link owns the same 16px inline padding
   and 16px neighboring gap. Pearl elevation is spread-constrained so its
   optical footprint cannot consume that gap or alter perceived margins. */
body[data-route="foundation-color"] .color-page-nav .section-nav-track {
  gap: var(--lds-space-4);
}

body[data-route="foundation-color"] .color-page-nav .section-nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--lds-touch-target-min, 44px);
  min-height: var(--lds-touch-target-min, 44px);
  padding-inline: var(--lds-space-4);
  padding-block: 0;
  line-height: 1;
  vertical-align: middle;
}

body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="dark"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 7px 18px -10px rgba(0,0,0,.42),
    0 0 14px -7px rgba(48,177,205,.18);
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.74),
    inset 0 -1px 0 rgba(78,104,133,.16),
    0 7px 18px -10px rgba(38,54,72,.28),
    0 0 14px -7px rgba(77,157,215,.20);
}

/* Navigation labels remain neutral across interaction states. The pearl lens,
   boundary, and focus ring communicate state; label color does not turn blue. */
body[data-route="foundation-color"][data-color-theme="light"] {
  --color-page-nav-text: #344253;
  --color-page-nav-hover-text: #172433;
  --color-page-nav-active-text: #172433;
  --color-page-nav-active-hover-text: #0F1925;
  --color-page-nav-active-shadow: 0 1px 0 rgba(255,255,255,.46);
  --color-page-nav-active-hover-shadow: 0 1px 0 rgba(255,255,255,.58);
}

/* White-pearl lens: a nearly clear body with soft blue and sun-warm yellow
   nacre. Shallow edges keep it glass-like without returning to a raised bevel. */
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:hover) .section-nav-indicator,
body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-track:has(.section-nav-link.is-active:focus-visible) .section-nav-indicator {
  border-color: rgba(88, 112, 141, .20);
  background: rgba(255, 255, 255, .06);
  background-image: none;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(76,98,123,.10),
    0 6px 16px -11px rgba(42,57,75,.30),
    0 0 13px -8px rgba(71,145,214,.22);
  backdrop-filter: blur(7px) saturate(146%) brightness(103%);
  -webkit-backdrop-filter: blur(7px) saturate(146%) brightness(103%);
  animation: none;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator::before {
  inset: -72% -38%;
  background:
    radial-gradient(ellipse 38% 46% at 22% 48%, rgba(51,139,244,.27) 0%, rgba(85,162,239,.14) 36%, transparent 73%),
    radial-gradient(ellipse 34% 42% at 52% 40%, rgba(255,215,45,.27) 0%, rgba(239,181,37,.13) 35%, transparent 72%),
    radial-gradient(ellipse 30% 38% at 68% 30%, rgba(244,103,174,.22) 0%, rgba(222,96,172,.11) 36%, transparent 72%),
    radial-gradient(ellipse 36% 44% at 80% 58%, rgba(48,193,235,.21) 0%, rgba(72,137,232,.11) 38%, transparent 74%),
    radial-gradient(ellipse 28% 36% at 58% 80%, rgba(255,230,118,.19) 0%, transparent 72%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .84;
  filter: blur(11px) saturate(132%) brightness(104%);
  transform-origin: 50% 50%;
  animation: color-nav-white-pearl-morph 9s cubic-bezier(.45, 0, .22, 1) infinite alternate;
  animation-delay: -3.4s;
}

body[data-route="foundation-color"][data-color-theme="light"] .color-page-nav .section-nav-indicator::after {
  inset: -24% -14%;
  height: auto;
  background:
    radial-gradient(ellipse 40% 30% at 24% 22%, rgba(255,255,255,.42) 0%, rgba(221,240,255,.15) 40%, transparent 76%),
    radial-gradient(ellipse 42% 34% at 76% 82%, rgba(255,218,91,.10) 0%, rgba(77,176,229,.07) 42%, transparent 76%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: .72;
  filter: blur(5px);
  animation: color-nav-white-pearl-light 8s ease-in-out infinite alternate;
  animation-delay: -4.8s;
}

@keyframes color-nav-white-pearl-morph {
  0% { transform: translate3d(-9%, -4%, 0) rotate(-10deg) scale(1.08, .92); filter: blur(12px) saturate(110%) brightness(100%); opacity: .66; }
  32% { transform: translate3d(5%, 5%, 0) rotate(18deg) scale(.94, 1.10); filter: blur(10px) saturate(144%) brightness(109%); opacity: .88; }
  68% { transform: translate3d(-3%, 8%, 0) rotate(43deg) scale(1.12, .94); filter: blur(12px) saturate(136%) brightness(106%); opacity: .80; }
  100% { transform: translate3d(9%, -5%, 0) rotate(68deg) scale(.93, 1.09); filter: blur(10px) saturate(120%) brightness(103%); opacity: .72; }
}

@keyframes color-nav-white-pearl-light {
  0% { transform: translate3d(-10%, -4%, 0) scale(1.01); opacity: .48; filter: brightness(100%); }
  46% { transform: translate3d(5%, 5%, 0) scale(1.11); opacity: .90; filter: brightness(114%); }
  100% { transform: translate3d(11%, -2%, 0) scale(1.04); opacity: .58; filter: brightness(104%); }
}

/* Shared LDS active-navigation material. Geometry remains component-specific:
   section buttons retain pill radii and documentation tabs retain their
   squarer radius. Color, typography, translucency, motion, and elevation share
   the same nacreous language. */
body[data-route="foundation-color"] .nav-rail-card .nav-group a.active {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--color-page-nav-active-text);
  text-shadow: var(--color-page-nav-active-shadow);
  backdrop-filter: blur(7px) saturate(146%) brightness(103%);
  -webkit-backdrop-filter: blur(7px) saturate(146%) brightness(103%);
}

body[data-route="foundation-color"] .nav-rail-card .nav-group a.active::before {
  content: "";
  position: absolute;
  inset: -82% -34%;
  z-index: -1;
  pointer-events: none;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card .nav-group a.active {
  border-color: rgba(88, 112, 141, .20);
  color: #172433;
  background: rgba(255, 255, 255, .06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(76,98,123,.10),
    0 6px 16px -11px rgba(42,57,75,.30),
    0 0 13px -8px rgba(71,145,214,.22);
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-card .nav-group a.active::before {
  background:
    radial-gradient(ellipse 38% 46% at 22% 48%, rgba(51,139,244,.27) 0%, rgba(85,162,239,.14) 36%, transparent 73%),
    radial-gradient(ellipse 34% 42% at 52% 40%, rgba(255,215,45,.27) 0%, rgba(239,181,37,.13) 35%, transparent 72%),
    radial-gradient(ellipse 30% 38% at 68% 30%, rgba(244,103,174,.22) 0%, rgba(222,96,172,.11) 36%, transparent 72%),
    radial-gradient(ellipse 36% 44% at 80% 58%, rgba(48,193,235,.21) 0%, rgba(72,137,232,.11) 38%, transparent 74%),
    radial-gradient(ellipse 28% 36% at 58% 80%, rgba(255,230,118,.19) 0%, transparent 72%);
  opacity: .84;
  filter: blur(11px) saturate(132%) brightness(104%);
  animation: color-nav-white-pearl-morph 9s cubic-bezier(.45, 0, .22, 1) infinite alternate;
  animation-delay: -3.4s;
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-card .nav-group a.active {
  border-color: rgba(210, 226, 241, .20);
  color: #FFFFFF;
  background: rgba(1, 4, 8, .04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 7px 18px -10px rgba(0,0,0,.42),
    0 0 14px -7px rgba(48,177,205,.18);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-card .nav-group a.active::before {
  background:
    radial-gradient(ellipse 34% 42% at 22% 48%, rgba(190,52,226,.27) 0%, rgba(135,43,207,.15) 34%, transparent 72%),
    radial-gradient(ellipse 38% 46% at 52% 42%, rgba(26,215,240,.26) 0%, rgba(34,151,218,.14) 38%, transparent 74%),
    radial-gradient(ellipse 32% 40% at 80% 56%, rgba(130,211,77,.22) 0%, rgba(199,198,55,.12) 36%, transparent 72%),
    radial-gradient(ellipse 26% 34% at 58% 78%, rgba(231,52,165,.18) 0%, transparent 72%);
  opacity: .82;
  filter: blur(10px) saturate(128%) brightness(98%);
  animation: color-nav-organic-pearl-morph 12s cubic-bezier(.45, 0, .25, 1) infinite alternate;
  animation-delay: -4.4s;
}

/* Functional pearl: the documentation collapse/expand control uses an
   irregular living contour and the same nacreous material as active controls. */
body[data-route="foundation-color"] .nav-rail-toggle {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 38px;
  height: 38px;
  border-radius: 48% 52% 46% 54% / 52% 45% 55% 48%;
  animation: lds-functional-pearl-contour 10s ease-in-out infinite alternate;
}

body[data-route="foundation-color"] .nav-rail-toggle::before,
body[data-route="foundation-color"] .nav-rail-toggle::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background-repeat: no-repeat;
  transform-origin: 50% 50%;
}

body[data-route="foundation-color"] .nav-rail-toggle::before {
  inset: -72%;
  background-size: 100% 100%;
}

body[data-route="foundation-color"] .nav-rail-toggle::after {
  inset: -22%;
  background:
    radial-gradient(ellipse 44% 34% at 26% 22%, rgba(255,255,255,.38), rgba(214,239,248,.10) 42%, transparent 76%),
    radial-gradient(ellipse 44% 36% at 76% 82%, rgba(74,191,220,.10), transparent 76%);
  filter: blur(4px);
  animation: color-nav-white-pearl-light 8s ease-in-out infinite alternate;
  animation-delay: -4.8s;
}

body[data-route="foundation-color"] .nav-rail-toggle svg {
  position: relative;
  z-index: 1;
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-toggle,
body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-toggle:hover {
  border-color: rgba(88,112,141,.24);
  color: #172433;
  background: rgba(255,255,255,.07);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.58),
    inset 0 -1px 0 rgba(76,98,123,.11),
    0 7px 18px -11px rgba(42,57,75,.34),
    0 0 14px -8px rgba(71,145,214,.25);
  backdrop-filter: blur(7px) saturate(146%) brightness(103%);
  -webkit-backdrop-filter: blur(7px) saturate(146%) brightness(103%);
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-toggle::before {
  background:
    radial-gradient(ellipse 38% 46% at 22% 48%, rgba(51,139,244,.29) 0%, rgba(85,162,239,.14) 36%, transparent 73%),
    radial-gradient(ellipse 34% 42% at 52% 40%, rgba(255,215,45,.28) 0%, rgba(239,181,37,.13) 35%, transparent 72%),
    radial-gradient(ellipse 30% 38% at 68% 30%, rgba(244,103,174,.24) 0%, rgba(222,96,172,.11) 36%, transparent 72%),
    radial-gradient(ellipse 36% 44% at 80% 58%, rgba(48,193,235,.22) 0%, rgba(72,137,232,.11) 38%, transparent 74%);
  opacity: .86;
  filter: blur(7px) saturate(136%) brightness(104%);
  animation: color-nav-white-pearl-morph 9s cubic-bezier(.45, 0, .22, 1) infinite alternate;
  animation-delay: -3.4s;
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-toggle,
body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-toggle:hover {
  border-color: rgba(210,226,241,.20);
  color: #FFFFFF;
  background: rgba(1,4,8,.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 7px 18px -10px rgba(0,0,0,.44),
    0 0 14px -7px rgba(48,177,205,.20);
  backdrop-filter: blur(7px) saturate(152%) brightness(104%);
  -webkit-backdrop-filter: blur(7px) saturate(152%) brightness(104%);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-toggle::before {
  background:
    radial-gradient(ellipse 34% 42% at 22% 48%, rgba(190,52,226,.29) 0%, rgba(135,43,207,.15) 34%, transparent 72%),
    radial-gradient(ellipse 38% 46% at 52% 42%, rgba(26,215,240,.28) 0%, rgba(34,151,218,.14) 38%, transparent 74%),
    radial-gradient(ellipse 32% 40% at 80% 56%, rgba(130,211,77,.23) 0%, rgba(199,198,55,.12) 36%, transparent 72%),
    radial-gradient(ellipse 26% 34% at 58% 78%, rgba(231,52,165,.20) 0%, transparent 72%);
  opacity: .84;
  filter: blur(7px) saturate(136%) brightness(99%);
  animation: color-nav-organic-pearl-morph 12s cubic-bezier(.45, 0, .25, 1) infinite alternate;
  animation-delay: -4.4s;
}

body[data-route="foundation-color"] .nav-rail-toggle:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 3px;
}

@keyframes lds-functional-pearl-contour {
  0% { border-radius: 48% 52% 46% 54% / 52% 45% 55% 48%; }
  34% { border-radius: 53% 47% 51% 49% / 46% 54% 47% 53%; }
  68% { border-radius: 46% 54% 48% 52% / 55% 47% 53% 45%; }
  100% { border-radius: 51% 49% 55% 45% / 48% 53% 47% 52%; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="foundation-color"] .color-page-nav .section-nav-indicator,
  body[data-route="foundation-color"] .color-page-nav .section-nav-indicator::before,
  body[data-route="foundation-color"] .color-page-nav .section-nav-indicator::after,
  body[data-route="foundation-color"] .nav-rail-card .nav-group a.active::before,
  body[data-route="foundation-color"] .nav-rail-toggle,
  body[data-route="foundation-color"] .nav-rail-toggle::before,
  body[data-route="foundation-color"] .nav-rail-toggle::after {
    animation: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-route="foundation-color"] .color-page-nav .section-nav-indicator {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Volumetric functional pearl refinement. */
body[data-route="foundation-color"] .nav-rail-toggle {
  width: 42px;
  height: 42px;
  border-radius: 50% 50% 48% 52% / 51% 48% 52% 49%;
  transition:
    transform 240ms cubic-bezier(.22, 1, .36, 1),
    border-color 240ms ease,
    color 180ms ease,
    box-shadow 280ms ease,
    backdrop-filter 280ms ease,
    -webkit-backdrop-filter 280ms ease;
}

body[data-route="foundation-color"] .nav-rail-toggle::after {
  inset: -16%;
  background:
    radial-gradient(ellipse 48% 38% at 25% 20%, rgba(255,255,255,.58), rgba(222,242,250,.16) 40%, transparent 72%),
    radial-gradient(ellipse 62% 48% at 72% 84%, rgba(36,77,111,.16), rgba(74,191,220,.08) 42%, transparent 76%);
  filter: blur(3px);
  transition: opacity 240ms ease, filter 280ms ease;
}

body[data-route="foundation-color"] .nav-rail-toggle svg {
  width: 19px;
  height: 19px;
  shape-rendering: geometricPrecision;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,.42));
  transition: transform 600ms cubic-bezier(.22, 1, .36, 1), color 180ms ease, filter 220ms ease;
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-toggle {
  border-color: rgba(88,112,141,.25);
  color: #091B2D;
  background: rgba(255,255,255,.10);
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.58),
    inset -3px -4px 8px rgba(74,105,132,.13),
    inset 0 -1px 0 rgba(76,98,123,.15),
    0 10px 22px -11px rgba(42,57,75,.42),
    0 0 16px -8px rgba(71,145,214,.29);
  backdrop-filter: blur(8px) saturate(154%) brightness(105%);
  -webkit-backdrop-filter: blur(8px) saturate(154%) brightness(105%);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-toggle {
  border-color: rgba(210,226,241,.22);
  color: #F7FBFF;
  background: rgba(1,4,8,.07);
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.18),
    inset -3px -4px 8px rgba(0,0,0,.28),
    inset 0 -1px 0 rgba(0,0,0,.24),
    0 10px 22px -10px rgba(0,0,0,.56),
    0 0 16px -7px rgba(48,177,205,.23);
  backdrop-filter: blur(8px) saturate(160%) brightness(105%);
  -webkit-backdrop-filter: blur(8px) saturate(160%) brightness(105%);
}

body[data-route="foundation-color"] .nav-rail-toggle:hover {
  transform: translateY(-1px) scale(1.055);
}

body[data-route="foundation-color"][data-color-theme="light"] .nav-rail-toggle:hover {
  border-color: rgba(68,104,145,.36);
  color: #030C16;
  background: rgba(255,255,255,.12);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.72),
    inset -3px -4px 9px rgba(69,105,137,.16),
    0 13px 26px -11px rgba(42,57,75,.48),
    0 0 20px -7px rgba(71,145,214,.38);
  backdrop-filter: blur(7px) saturate(176%) brightness(110%);
  -webkit-backdrop-filter: blur(7px) saturate(176%) brightness(110%);
}

body[data-route="foundation-color"][data-color-theme="dark"] .nav-rail-toggle:hover {
  border-color: rgba(220,237,251,.32);
  color: #FFFFFF;
  background: rgba(1,4,8,.09);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.24),
    inset -3px -4px 9px rgba(0,0,0,.34),
    0 13px 26px -10px rgba(0,0,0,.64),
    0 0 20px -6px rgba(48,190,215,.30);
  backdrop-filter: blur(7px) saturate(184%) brightness(110%);
  -webkit-backdrop-filter: blur(7px) saturate(184%) brightness(110%);
}

body[data-route="foundation-color"] .nav-rail-toggle:hover::before {
  opacity: 1;
  filter: blur(6px) saturate(158%) brightness(110%);
}

body[data-route="foundation-color"] .nav-rail-toggle:hover::after {
  opacity: .96;
  filter: blur(2px) brightness(112%);
}

body[data-route="foundation-color"] .nav-rail-toggle:active {
  transform: translateY(0) scale(.98);
}

@keyframes lds-functional-pearl-contour {
  0% { border-radius: 50% 50% 48% 52% / 51% 48% 52% 49%; }
  34% { border-radius: 52% 48% 50% 50% / 49% 52% 48% 51%; }
  68% { border-radius: 49% 51% 50% 50% / 52% 49% 51% 48%; }
  100% { border-radius: 51% 49% 52% 48% / 50% 51% 49% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  body[data-route="foundation-color"] .nav-rail-toggle,
  body[data-route="foundation-color"] .nav-rail-toggle::before,
  body[data-route="foundation-color"] .nav-rail-toggle::after {
    animation: none;
  }
}

/* Reusable nacreous documentation-shell template. Overview is the first
   adopter; future routes opt in through data-lds-shell-standard rather than
   receiving copied route CSS. Structure remains owned by sharedPageChrome and
   the persistent nav-rail-card. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] {
  --lds-shell-app:
    radial-gradient(ellipse 76% 54% at -16% 5%, rgba(255,255,255,.88), transparent 70%),
    radial-gradient(ellipse 68% 48% at 112% 18%, rgba(87,153,236,.18), transparent 72%),
    radial-gradient(ellipse 66% 44% at 18% 112%, rgba(239,121,177,.14), transparent 74%),
    radial-gradient(ellipse 58% 42% at 72% 104%, rgba(255,214,66,.10), transparent 74%),
    linear-gradient(138deg,#f4f3f7,#e8ecf3 54%,#f5f4f7);
  --lds-shell-chrome:
    radial-gradient(ellipse 72% 126% at -22% -38%, rgba(255,255,255,.90), transparent 80%),
    radial-gradient(ellipse 74% 134% at 122% -26%, rgba(80,165,239,.24), transparent 82%),
    radial-gradient(ellipse 78% 122% at -18% 142%, rgba(241,111,178,.18), transparent 82%),
    radial-gradient(ellipse 64% 118% at 74% 142%, rgba(255,215,69,.13), transparent 82%),
    radial-gradient(ellipse 92% 146% at 54% -68%, rgba(162,126,229,.20), transparent 82%),
    rgba(244,245,249,.72);
  --lds-shell-card:
    radial-gradient(ellipse 118% 44% at 126% 17%, rgba(104,164,244,.34), transparent 78%),
    radial-gradient(ellipse 156% 34% at -38% 40%, rgba(242,119,175,.27), transparent 80%),
    radial-gradient(ellipse 126% 34% at 118% 38%, rgba(255,215,66,.21), transparent 80%),
    radial-gradient(ellipse 132% 42% at 132% 63%, rgba(74,204,178,.26), transparent 82%),
    radial-gradient(ellipse 148% 38% at 18% 108%, rgba(160,125,231,.27), transparent 84%),
    rgba(236,237,244,.46);
  --lds-shell-sidebar:
    radial-gradient(ellipse 132% 34% at -28% 4%,rgba(255,255,255,.82),transparent 76%),
    radial-gradient(ellipse 146% 28% at 128% 22%,rgba(91,157,241,.30),transparent 78%),
    radial-gradient(ellipse 152% 30% at -32% 45%,rgba(226,104,190,.25),transparent 80%),
    radial-gradient(ellipse 142% 28% at 126% 68%,rgba(255,205,73,.20),transparent 80%),
    radial-gradient(ellipse 150% 30% at -24% 96%,rgba(62,211,190,.22),transparent 82%),
    rgba(233,235,242,.76);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] {
  --lds-shell-app:
    radial-gradient(ellipse 76% 54% at -18% 8%,rgba(116,88,184,.17),transparent 72%),
    radial-gradient(ellipse 68% 46% at 112% 20%,rgba(42,196,225,.14),transparent 74%),
    radial-gradient(ellipse 74% 44% at 24% 112%,rgba(218,58,161,.11),transparent 76%),
    radial-gradient(ellipse 62% 42% at 82% 108%,rgba(183,199,69,.07),transparent 76%),
    linear-gradient(138deg,#07090e,#10141d 52%,#080b11);
  --lds-shell-chrome:
    radial-gradient(ellipse 72% 126% at -22% -38%,rgba(229,240,255,.25),transparent 80%),
    radial-gradient(ellipse 74% 134% at 122% -26%,rgba(36,202,235,.27),transparent 82%),
    radial-gradient(ellipse 78% 122% at -18% 142%,rgba(232,51,164,.22),transparent 82%),
    radial-gradient(ellipse 66% 120% at 116% 142%,rgba(194,211,67,.12),transparent 82%),
    radial-gradient(ellipse 92% 146% at 54% -68%,rgba(137,75,226,.28),transparent 82%),
    rgba(8,11,17,.78);
  --lds-shell-card:
    radial-gradient(ellipse 164% 18% at 126% 14%,rgba(36,202,235,.38),transparent 78%),
    radial-gradient(ellipse 172% 17% at -30% 30%,rgba(232,51,164,.36),transparent 78%),
    radial-gradient(ellipse 166% 19% at 132% 48%,rgba(137,75,226,.35),transparent 80%),
    radial-gradient(ellipse 162% 18% at -34% 66%,rgba(39,126,224,.30),transparent 80%),
    radial-gradient(ellipse 170% 20% at 128% 84%,rgba(194,211,67,.25),transparent 82%),
    rgba(7,9,14,.68);
  --lds-shell-sidebar:
    radial-gradient(ellipse 142% 28% at -30% 2%,rgba(229,240,255,.18),transparent 76%),
    radial-gradient(ellipse 154% 30% at 130% 18%,rgba(36,202,235,.27),transparent 78%),
    radial-gradient(ellipse 162% 28% at -34% 42%,rgba(232,51,164,.25),transparent 80%),
    radial-gradient(ellipse 150% 30% at 132% 64%,rgba(137,75,226,.24),transparent 80%),
    radial-gradient(ellipse 158% 30% at -28% 92%,rgba(194,211,67,.16),transparent 82%),
    rgba(7,9,14,.84);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .page-host {
  padding: 0;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-chrome {
  z-index:40;
  background: var(--lds-shell-chrome);
  background-attachment: fixed;
  box-shadow: 0 34px 88px -42px rgba(20,28,42,.48);
  backdrop-filter: blur(36px) saturate(176%);
  -webkit-backdrop-filter: blur(36px) saturate(176%);
}

@media (min-width:900px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .app-nav {
    border-right:0;
    background:transparent;
    background-attachment:scroll;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-card {
  position: relative;
  isolation: isolate;
  background: var(--lds-shell-card);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    0 24px 42px -24px rgba(15,22,34,.48),
    0 12px 24px -16px rgba(77,134,224,.24);
  backdrop-filter: blur(28px) saturate(188%);
  -webkit-backdrop-filter: blur(28px) saturate(188%);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-section-nav .section-nav-track {
  gap:var(--lds-space-4);
  mask-image:none;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-section-nav .section-nav-link {
  max-width:none;
  overflow:visible;
  text-overflow:clip;
  white-space:nowrap;
  line-height:1;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-room-hero {
  gap:clamp(18px,2vw,24px);
  padding:clamp(36px,5vw,64px);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-room-hero h2 {
  max-width:14ch;
  font-family:"Satoshi","Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(44px,5.5vw,76px);
  font-weight:800;
  line-height:1.04;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
  text-wrap:balance;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-room-hero p {
  max-width:62ch;
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(17px,1.35vw,20px);
  font-weight:450;
  line-height:1.62;
  letter-spacing:-.006em;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-room-hero .system-room-lede {
  max-width:68ch;
  color:var(--color-text-primary);
  font-size:clamp(19px,1.55vw,23px);
  font-weight:650;
  line-height:1.5;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-room-language-line {
  color:var(--lds-shell-kicker);
  font-family:"Satoshi","Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:clamp(22px,2vw,30px);
  font-weight:800;
  line-height:1.2;
  text-wrap:balance;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a.active,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-section-nav .section-nav-link.is-active {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: var(--lds-shell-heading);
  background: color-mix(in srgb,var(--color-bg-elevated) 12%,transparent);
  border-color: var(--lds-shell-edge);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    0 8px 18px -12px rgba(28,45,70,.42);
  backdrop-filter: blur(7px) saturate(148%) brightness(104%);
  -webkit-backdrop-filter: blur(7px) saturate(148%) brightness(104%);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
  .nav-rail-card .nav-group a.active,
  .lds-page-section-nav .section-nav-link.is-active
)::before {
  content:"";
  position:absolute;
  inset:-82% -34%;
  z-index:-1;
  pointer-events:none;
  background:var(--lds-nacre-action-field);
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:.84;
  filter:blur(10px) saturate(132%);
  transform-origin:50% 50%;
  animation:color-nav-white-pearl-morph 9s cubic-bezier(.45,0,.22,1) infinite alternate;
  animation-delay:-3.4s;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(
  .nav-rail-card .nav-group a.active,
  .lds-page-section-nav .section-nav-link.is-active
)::before {
  background:var(--lds-nacre-action-field);
  animation-name:color-nav-organic-pearl-morph;
  animation-duration:12s;
  animation-delay:-4.4s;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:42px;
  height:42px;
  border-radius:50% 50% 48% 52% / 51% 48% 52% 49%;
  color:var(--lds-shell-heading);
  background:color-mix(in srgb,var(--color-bg-elevated) 10%,transparent);
  box-shadow:
    inset 2px 2px 3px rgba(255,255,255,.25),
    inset -3px -4px 8px rgba(30,49,70,.14),
    0 10px 22px -11px rgba(20,29,42,.46);
  backdrop-filter:blur(8px) saturate(158%) brightness(105%);
  -webkit-backdrop-filter:blur(8px) saturate(158%) brightness(105%);
  animation:lds-functional-pearl-contour 10s ease-in-out infinite alternate;
  transition:transform 240ms cubic-bezier(.22,1,.36,1),box-shadow 280ms ease,filter 280ms ease;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle::before {
  content:"";
  position:absolute;
  inset:-72%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 38% 46% at 22% 48%,rgba(51,139,244,.27),transparent 73%),
    radial-gradient(ellipse 34% 42% at 52% 40%,rgba(255,215,45,.26),transparent 72%),
    radial-gradient(ellipse 30% 38% at 68% 30%,rgba(244,103,174,.22),transparent 72%),
    radial-gradient(ellipse 36% 44% at 80% 58%,rgba(48,193,235,.20),transparent 74%);
  background-size:100% 100%;
  filter:blur(7px) saturate(138%);
  animation:color-nav-white-pearl-morph 9s cubic-bezier(.45,0,.22,1) infinite alternate;
  animation-delay:-3.4s;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover {
  transform:translateY(-1px) scale(1.055);
  box-shadow:
    inset 2px 2px 4px rgba(255,255,255,.36),
    inset -3px -4px 9px rgba(30,49,70,.18),
    0 13px 26px -11px rgba(20,29,42,.52),
    0 0 20px -8px rgba(71,145,214,.32);
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
    .nav-rail-toggle,
    .nav-rail-toggle::before,
    .nav-rail-card .nav-group a.active::before,
    .lds-page-section-nav .section-nav-link.is-active::before
  ) { animation:none; }
}

/* The documentation rail is one component across routes. Hover remains
   translucent and material-aware; it must never collapse into a flat fill. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a {
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    color 160ms ease,
    background 160ms ease,
    box-shadow 160ms ease;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-card .nav-group a:hover {
  border-color:rgba(148,185,255,.24);
  color:#fff;
  background:
    linear-gradient(135deg,rgba(148,185,255,.14),rgba(24,190,202,.08)),
    rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.16);
  transform:translateX(2px);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card .nav-group a:hover {
  border-color:rgba(56,85,125,.18);
  color:#123a66;
  background:
    linear-gradient(135deg,rgba(255,255,255,.70),rgba(226,236,255,.52)),
    rgba(242,242,247,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 22px rgba(38,68,104,.09);
  transform:translateX(2px);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(
  .lds-page-brand strong,
  .lds-page-brand .eyebrow,
  .color-page-brand strong,
  .color-page-brand .eyebrow
) {
  color:#C9DEFF;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.lds-page-brand,.color-page-brand) strong {
  color:#123A66;
}

body[data-lds-shell-standard="nacreous"] :is(.lds-page-brand,.color-page-brand) {
  position:relative;
  isolation:isolate;
}

body[data-lds-shell-standard="nacreous"] :is(.lds-page-brand,.color-page-brand)::before {
  content:"";
  position:absolute;
  inset:16% 4% 14% 2%;
  z-index:-1;
  pointer-events:none;
  border-radius:48%;
  background:
    radial-gradient(ellipse 42% 56% at 24% 50%,rgba(96,165,245,.22),transparent 72%),
    radial-gradient(ellipse 44% 52% at 46% 52%,rgba(151,105,223,.12),transparent 74%),
    radial-gradient(ellipse 38% 46% at 34% 70%,rgba(239,101,174,.08),transparent 76%);
  filter:blur(18px) saturate(126%);
  opacity:.48;
  animation:lds-brand-glow-breathe 7s ease-in-out infinite alternate;
}

body[data-lds-shell-standard="nacreous"] :is(.lds-page-brand-crest,.color-page-brand-crest) {
  filter:
    drop-shadow(0 1px 0 rgba(255,255,255,.42))
    drop-shadow(0 7px 14px rgba(67,130,213,.16));
}

@keyframes lds-brand-glow-breathe {
  0% { opacity:.38; transform:translate3d(-1%,0,0) scale(.98); filter:blur(19px) saturate(116%); }
  50% { opacity:.54; transform:translate3d(1%,.5%,0) scale(1.025); filter:blur(17px) saturate(132%); }
  100% { opacity:.44; transform:translate3d(2%,-.5%,0) scale(1.01); filter:blur(18px) saturate(124%); }
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell-standard="nacreous"] :is(.lds-page-brand,.color-page-brand)::before { animation:none; }
}

/* ========================================================================
 * Canonical LDS page chrome v1
 *
 * Every opted-in route consumes one geometry and one documentation-rail token
 * contract. Color and shared-shell class names are markup adapters only;
 * route names never own canonical values.
 * ====================================================================== */
body[data-lds-shell-standard="nacreous"] {
  --lds-chrome-sidebar-width: 300px;
  --lds-chrome-header-expanded: 224px;
  --lds-chrome-header-collapsed: 104px;
  --lds-chrome-header-current: var(--lds-chrome-header-expanded);
  --lds-chrome-nav-height: 80px;
  --lds-chrome-height: calc(var(--lds-chrome-header-current) + var(--lds-chrome-nav-height));
  --lds-chrome-content-gutter: var(--lds-space-6, 32px);
  --lds-chrome-edge-gutter: 40px;
  --lds-chrome-rail-max: calc(100vw - var(--lds-chrome-sidebar-width) - var(--lds-chrome-content-gutter) - var(--lds-chrome-edge-gutter));
  --lds-chrome-inline: 12px;
  --lds-chrome-collapsed-heading-inset: var(--lds-chrome-heading-text-inset);
  --lds-chrome-heading-top: 52px;
  --lds-chrome-heading-title-size: 4.25rem;
  --lds-chrome-heading-lead-gap: 16px;
  --lds-brand-title-offset: 24.5px;
  /* Expanded lockup: center the crest on the title + GEL descriptor block. */
  --lds-brand-crest-offset: 16px;
  --lds-brand-compact-text-top: 46px;
  --lds-brand-compact-crest-offset: 17px;
  --lds-brand-collapsed-optical-x: 6px;
  --lds-brand-collapse-motion: 1320ms cubic-bezier(.3,0,.15,1);
  --lds-theme-toggle-width: 132px;
  --lds-theme-toggle-height: 73px;
  --lds-theme-toggle-right-inset: var(--lds-chrome-inline);
  --lds-surface-card-radius: 12px;
  --lds-rail-card-radius: 0;
  --lds-rail-card-inset: 16px;
  --lds-rail-card-top-gap: 0px;
  --lds-rail-card-right-inset: var(--lds-space-4, 16px);
  --lds-rail-control-inset: var(--lds-space-4, 16px);
  --lds-rail-nav-top: var(--lds-space-5, 20px);
  --lds-rail-card-section-dark: #94b9ff;
  --lds-rail-card-section-light: #174fba;
  --lds-chrome-heading: #f8fbff;
  --lds-chrome-copy: #c3cada;
  --lds-chrome-brand: #ddebff;
  --lds-chrome-crest: #ddebff;
  --lds-direction-label-color: rgba(103, 116, 139, .66);
  --lds-chrome-shadow-rest:
    0 18px 46px -36px rgba(0,0,0,.72),
    0 5px 18px -16px rgba(71,170,219,.24);
  --lds-chrome-shadow-raised:
    0 34px 76px -38px rgba(0,0,0,.86),
    0 13px 34px -22px rgba(54,181,226,.38),
    0 1px 0 rgba(199,224,255,.10);
  --lds-rail-shadow:
    14px 0 30px -18px rgba(0,0,0,.88),
    10px 0 28px -21px rgba(45,185,222,.34),
    6px 0 22px -18px rgba(139,75,226,.26);
  --lds-chrome-surface:
    radial-gradient(ellipse 72% 126% at -22% -38%,rgba(229,240,255,.25),transparent 80%),
    radial-gradient(ellipse 74% 134% at 122% -26%,rgba(36,202,235,.27),transparent 82%),
    radial-gradient(ellipse 78% 122% at -18% 142%,rgba(232,51,164,.22),transparent 82%),
    radial-gradient(ellipse 66% 120% at 116% 142%,rgba(194,211,67,.12),transparent 82%),
    radial-gradient(ellipse 92% 146% at 54% -68%,rgba(137,75,226,.28),transparent 82%),
    rgba(8,11,17,.68);
  --color-page-sidebar-current-width: var(--lds-chrome-sidebar-width);
  --color-page-header-current-height: var(--lds-chrome-header-current);
  --color-page-nav-height: var(--lds-chrome-nav-height);
  --color-page-chrome-height: var(--lds-chrome-height);
  --lds-shell-header-height: var(--lds-chrome-header-current);
  --lds-shell-nav-height: var(--lds-chrome-nav-height);
  --lds-shell-chrome-height: var(--lds-chrome-height);
  --lds-shell-rail-max: var(--lds-chrome-rail-max);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] {
  --lds-chrome-heading:#15161b;
  --lds-chrome-copy:#555d69;
  --lds-chrome-brand:#123a66;
  --lds-chrome-crest:#123a66;
  --lds-direction-label-color: rgba(163, 170, 184, .76);
  --lds-chrome-shadow-rest:
    0 18px 44px -36px rgba(43,55,76,.34),
    0 5px 18px -16px rgba(65,137,203,.20);
  --lds-chrome-shadow-raised:
    0 34px 72px -38px rgba(45,56,77,.42),
    0 13px 34px -22px rgba(63,146,211,.28),
    0 1px 0 rgba(255,255,255,.72);
  --lds-rail-shadow:
    14px 0 30px -18px rgba(53,64,84,.42),
    10px 0 28px -21px rgba(74,164,220,.26),
    6px 0 22px -18px rgba(170,108,207,.18);
  --lds-chrome-surface:
    radial-gradient(ellipse at 8% 18%,rgba(255,255,255,.84),transparent 31%),
    radial-gradient(ellipse at 30% 92%,rgba(230,126,107,.12),transparent 34%),
    radial-gradient(ellipse at 55% 2%,rgba(196,187,232,.22),transparent 36%),
    radial-gradient(ellipse at 77% 18%,rgba(11,92,255,.14),transparent 36%),
    radial-gradient(ellipse at 96% 82%,rgba(46,184,154,.16),transparent 38%),
    rgba(244,245,249,.78);
}

body[data-route="foundation-color"].color-header-collapsed[data-lds-shell-standard="nacreous"] {
  --lds-chrome-header-current: var(--lds-chrome-header-collapsed);
}

body[data-lds-shell-standard="nacreous"].lds-header-collapsed {
  --lds-chrome-header-current: var(--lds-chrome-header-collapsed);
}

body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed {
  --lds-chrome-sidebar-width:80px;
}

@media (min-width:1040px) {
  body[data-lds-shell-standard="nacreous"] .app-shell {
    grid-template-columns: var(--lds-chrome-sidebar-width) minmax(0,1fr);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .app-nav {
    z-index:30;
    display:block;
    padding:
      calc(var(--lds-chrome-height) + var(--lds-rail-card-top-gap))
      var(--lds-rail-card-right-inset)
      24px
      0;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    transition:padding-top var(--lds-motion-chrome) var(--lds-ease-standard);
  }

  /* The expanded documentation rail is an architectural plane, not a
     content-height card. It reaches the viewport floor even when an accordion
     group is short, and its own scroll content may extend naturally beyond it. */
  body[data-lds-shell][data-lds-shell-standard="nacreous"]:not(.documentation-nav-collapsed) .app-nav {
    padding-bottom:0;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"]:not(.documentation-nav-collapsed) .nav-rail-card {
    min-height:calc(100vh - var(--lds-chrome-height));
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .app-nav {
    padding-left:0;
    padding-right:12px;
  }

  body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed :is(.color-page-brand,.lds-page-brand) {
    align-items:center;
    justify-content:center;
    gap:0;
    padding:0;
  }

  body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed :is(.color-page-brand,.lds-page-brand) .brand-lockup-text {
    display:none;
  }

  body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed :is(.color-page-brand-crest,.lds-page-brand-crest) {
    width:46px;
    height:46px;
    margin-top:0;
    transform:translateX(var(--lds-brand-collapsed-optical-x));
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] :is(.color-page-chrome,.lds-page-chrome) {
    position:sticky;
    top:0;
    z-index:45;
    display:grid;
    grid-template-rows:var(--lds-chrome-header-current) var(--lds-chrome-nav-height);
    width:calc(100% + var(--lds-chrome-sidebar-width));
    height:var(--lds-chrome-height);
    margin-left:calc(-1 * var(--lds-chrome-sidebar-width));
    overflow:hidden;
    isolation:isolate;
    border:0;
    background:var(--lds-chrome-surface);
    box-shadow:var(--lds-chrome-shadow-rest);
    backdrop-filter:blur(36px) saturate(176%);
    -webkit-backdrop-filter:blur(36px) saturate(176%);
    transition:
      height var(--lds-motion-chrome) var(--lds-ease-standard),
      grid-template-rows var(--lds-motion-chrome) var(--lds-ease-standard),
      box-shadow 520ms cubic-bezier(.22,1,.36,1),
      width 720ms cubic-bezier(.22,1,.36,1),
      margin-left 720ms cubic-bezier(.22,1,.36,1);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].lds-header-collapsed :is(.color-page-chrome,.lds-page-chrome) {
    box-shadow:var(--lds-chrome-shadow-raised);
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-header,.lds-page-header) {
    position:relative;
    top:auto;
    z-index:1;
    display:grid;
    grid-template-columns:var(--lds-chrome-sidebar-width) minmax(0,1fr);
    gap:0;
    align-items:center;
    width:100%;
    height:var(--lds-chrome-header-current);
    min-height:var(--lds-chrome-header-current);
    max-height:var(--lds-chrome-header-current);
    padding:0;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) {
    position:relative;
    z-index:2;
    display:flex;
    grid-column:1;
    grid-row:1;
    align-items:flex-start;
    gap:16px;
    width:100%;
    min-width:0;
    height:100%;
    padding:calc(
      var(--lds-chrome-heading-top) +
      var(--lds-chrome-heading-title-size) +
      var(--lds-chrome-heading-lead-gap) -
      var(--lds-brand-title-offset)
    ) 32px 0;
    color:var(--lds-chrome-heading);
    text-decoration:none;
    transition:
      height var(--lds-brand-collapse-motion),
      min-height var(--lds-brand-collapse-motion),
      max-height var(--lds-brand-collapse-motion),
      padding var(--lds-brand-collapse-motion);
  }

  body[data-route="foundation-color"].color-header-collapsed[data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) {
    align-items:flex-start;
    align-self:start;
    height:var(--lds-chrome-height);
    min-height:var(--lds-chrome-height);
    max-height:var(--lds-chrome-height);
    padding:var(--lds-brand-compact-text-top) 32px 0;
  }

  body[data-lds-shell-standard="nacreous"].lds-header-collapsed :is(.color-page-brand,.lds-page-brand) {
    align-items:flex-start;
    align-self:start;
    height:var(--lds-chrome-height);
    min-height:var(--lds-chrome-height);
    max-height:var(--lds-chrome-height);
    padding:var(--lds-brand-compact-text-top) 32px 0;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-brand-crest,.lds-page-brand-crest) {
    flex:0 0 auto;
    width:58px;
    height:58px;
    margin-top:var(--lds-brand-crest-offset);
    color:var(--lds-chrome-crest);
    transition:
      width var(--lds-brand-collapse-motion),
      height var(--lds-brand-collapse-motion),
      margin-top var(--lds-brand-collapse-motion),
      transform var(--lds-brand-collapse-motion),
      filter 360ms ease;
  }

  body[data-route="foundation-color"].color-header-collapsed[data-lds-shell-standard="nacreous"] :is(.color-page-brand-crest,.lds-page-brand-crest) {
    margin-top:var(--lds-brand-compact-crest-offset);
  }

  body[data-lds-shell-standard="nacreous"].lds-header-collapsed :is(.color-page-brand-crest,.lds-page-brand-crest) {
    width:58px;
    height:58px;
    margin-top:var(--lds-brand-compact-crest-offset);
  }

  body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed.lds-header-collapsed :is(.color-page-brand,.lds-page-brand) {
    align-items:flex-start;
    justify-content:center;
    padding:69px 0 0;
  }

  body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed.lds-header-collapsed :is(.color-page-brand-crest,.lds-page-brand-crest) {
    margin-top:0;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) :is(strong,.eyebrow) {
    color:var(--lds-chrome-brand);
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) .brand-lockup-text {
    display:grid;
    justify-items:start;
    row-gap:1px;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) .eyebrow {
    position:relative;
    top:-2px;
    margin:0 0 7px;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) strong {
    font:700 1.25rem/1.15 var(--lds-font-display,var(--font));
    text-shadow:none;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-brand,.lds-page-brand) .version-chip {
    margin-top:4px;
    color:var(--lds-chrome-copy);
    line-height:16px;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-header-rail,.lds-page-heading) {
    position:relative;
    grid-column:2;
    grid-row:1;
    align-self:start;
    width:min(100%,var(--lds-chrome-rail-max));
    max-width:var(--lds-chrome-rail-max);
    height:auto;
    margin:var(--lds-chrome-heading-top) 0 0 var(--lds-chrome-content-gutter);
    padding:0 calc(var(--lds-chrome-inline) + 156px) 0 var(--lds-chrome-heading-text-inset);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-heading {
    display:block;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-header-rail,.lds-page-heading) {
    transition:
      margin-top var(--lds-motion-chrome) var(--lds-ease-standard),
      padding var(--lds-motion-chrome) var(--lds-ease-standard);
  }

  body[data-lds-shell-standard="nacreous"].lds-header-collapsed :is(.color-page-header-rail,.lds-page-heading) {
    align-self:start;
    height:var(--lds-chrome-header-current);
    margin-top:0;
    padding-top:27px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .lds-page-heading {
    padding-left:var(--lds-chrome-collapsed-heading-inset);
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-header-top,.lds-page-heading) {
    min-width:0;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-header-top {
    height:100%;
    flex-wrap:nowrap;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-header-rail {
    row-gap:0;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-header h1,.lds-page-heading h1) {
    margin:0 0 var(--lds-chrome-heading-lead-gap);
    color:var(--lds-chrome-heading);
    font-family:var(--lds-font-display,var(--font));
    font-size:var(--lds-chrome-heading-title-size);
    font-weight:700;
    line-height:1;
    letter-spacing:var(--lds-heading-tracking-display,-.012em);
    transition:
      margin var(--lds-motion-chrome) var(--lds-ease-standard),
      font-size var(--lds-motion-chrome) var(--lds-ease-standard),
      line-height var(--lds-motion-chrome) var(--lds-ease-standard);
  }

  body[data-lds-shell-standard="nacreous"].lds-header-collapsed :is(.color-page-header h1,.lds-page-heading h1) {
    margin-bottom:0;
    font-size:2.75rem;
    line-height:.95;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-header .page-lead,.lds-page-heading p) {
    max-width:74ch;
    margin:0;
    color:var(--lds-chrome-copy);
    font-size:1.02rem;
    line-height:1.5;
    max-height:72px;
    overflow:hidden;
    opacity:1;
    transition:
      max-height 900ms cubic-bezier(.4,0,.2,1),
      opacity 520ms ease;
  }

  body[data-lds-shell-standard="nacreous"].lds-header-collapsed :is(.color-page-header .page-lead,.lds-page-heading p) {
    max-height:0;
    opacity:0;
  }

  body[data-lds-shell-standard="nacreous"] .lds-theme-toggle-slot {
    position:absolute;
    grid-area:auto;
    top:0;
    right:var(--lds-theme-toggle-right-inset);
    z-index:3;
    display:grid;
    place-items:center;
    width:var(--lds-theme-toggle-width);
    height:var(--lds-theme-toggle-height);
    margin:0;
    padding:0;
    transform:none;
  }

  body[data-route="foundation-color"].color-header-collapsed[data-lds-shell-standard="nacreous"] .lds-theme-toggle-slot {
    top:50%;
    transform:translateY(-50%);
  }

  body[data-lds-shell-standard="nacreous"].lds-header-collapsed .lds-theme-toggle-slot {
    top:50%;
    transform:translateY(-50%);
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) {
    position:relative;
    top:auto;
    z-index:1;
    display:grid;
    grid-template-columns:var(--lds-chrome-sidebar-width) minmax(0,1fr);
    align-items:center;
    width:100%;
    height:var(--lds-chrome-nav-height);
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-nav-rail,.lds-page-section-nav .section-nav-track) {
    grid-column:2;
    width:min(100%,var(--lds-chrome-rail-max));
    max-width:var(--lds-chrome-rail-max);
    margin:0 0 0 var(--lds-chrome-content-gutter);
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-nav-rail {
    padding-inline:0;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-track {
    gap:16px;
    width:100%;
    padding:10px var(--lds-chrome-inline) 26px;
  }

  body[data-lds-shell-standard="nacreous"] .color-page-nav .section-nav-track {
    margin:0;
  }

  body[data-lds-shell-standard="nacreous"] .lds-page-section-nav .section-nav-track {
    margin:0 0 0 var(--lds-chrome-content-gutter);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content {
    width:min(100%,var(--lds-chrome-rail-max));
    max-width:var(--lds-chrome-rail-max);
    margin:0 0 0 var(--lds-chrome-content-gutter);
    padding:32px var(--lds-content-text-inset) 80px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content [id^="lds-section-"] {
    scroll-margin-top:calc(var(--lds-chrome-height) + 24px);
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-content-rail {
    width:min(100%,var(--lds-chrome-rail-max));
    max-width:var(--lds-chrome-rail-max);
    margin:0 0 0 var(--lds-chrome-content-gutter);
    padding:32px var(--lds-content-text-inset) 80px;
  }
}

body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card {
  position:relative;
  isolation:isolate;
  display:block;
  min-width:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.10);
  border-top:0;
  border-left:0;
  border-radius:var(--lds-rail-card-radius);
  background:
    radial-gradient(ellipse 158% 16% at -28% -6%,rgba(224,237,255,.26) 0%,rgba(224,237,255,.10) 38%,transparent 76%),
    radial-gradient(ellipse 164% 18% at 126% 14%,rgba(36,202,235,.42) 0%,rgba(36,202,235,.14) 40%,transparent 78%),
    radial-gradient(ellipse 172% 17% at -30% 30%,rgba(232,51,164,.40) 0%,rgba(232,51,164,.13) 40%,transparent 78%),
    radial-gradient(ellipse 166% 19% at 132% 48%,rgba(137,75,226,.39) 0%,rgba(137,75,226,.13) 42%,transparent 80%),
    radial-gradient(ellipse 162% 18% at -34% 66%,rgba(39,126,224,.34) 0%,rgba(39,126,224,.10) 42%,transparent 80%),
    radial-gradient(ellipse 170% 20% at 128% 84%,rgba(194,211,67,.29) 0%,rgba(194,211,67,.08) 44%,transparent 82%),
    radial-gradient(ellipse 148% 14% at -22% 104%,rgba(225,55,164,.24) 0%,rgba(225,55,164,.06) 44%,transparent 82%),
    rgba(7,9,14,.66);
  background-size:100% 100%;
  background-repeat:no-repeat;
  box-shadow:var(--lds-rail-shadow);
  backdrop-filter:blur(30px) saturate(194%);
  -webkit-backdrop-filter:blur(30px) saturate(194%);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-card {
  background:
    linear-gradient(
      138deg,
      rgba(8,12,19,0) 0%,
      rgba(18,91,108,.28) 24%,
      rgba(49,43,91,.25) 45%,
      rgba(99,31,84,.23) 66%,
      rgba(14,59,70,.22) 86%,
      rgba(8,12,19,0) 100%
    ),
    linear-gradient(
      42deg,
      rgba(59,79,38,.22) 0%,
      rgba(16,25,37,.04) 36%,
      rgba(94,34,84,.17) 66%,
      rgba(12,79,94,.25) 100%
    ),
    linear-gradient(
      180deg,
      #080b12 0%,
      #0b1822 28%,
      #191121 54%,
      #0a1720 77%,
      #141910 100%
    );
  background-size:168% 128%,154% 122%,100% 100%;
  background-position:42% top,58% center,center;
}

/* Structural chrome stays square; floating page surfaces share one restrained
   radius so the rail and content read as members of the same material family. */
body[data-lds-shell-standard="nacreous"] :is(
  .color-foundation-hero,
  .color-foundation-card,
  .typography-foundation-hero,
  .panel-card,
  .hero-card,
  .review-card
) {
  border-radius:var(--lds-surface-card-radius);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card {
  border-color:rgba(87,104,132,.18);
  background:
    radial-gradient(ellipse 142% 38% at -24% -3%,rgba(255,255,255,.74),rgba(255,255,255,.22) 42%,transparent 78%),
    radial-gradient(ellipse 118% 44% at 126% 17%,rgba(104,164,244,.38),rgba(104,164,244,.12) 43%,transparent 80%),
    radial-gradient(ellipse 156% 34% at -38% 40%,rgba(242,119,175,.30),rgba(242,119,175,.085) 46%,transparent 82%),
    radial-gradient(ellipse 126% 34% at 118% 38%,rgba(255,215,66,.24),rgba(242,184,55,.065) 44%,transparent 81%),
    radial-gradient(ellipse 132% 42% at 132% 63%,rgba(74,204,178,.31),rgba(74,204,178,.085) 45%,transparent 82%),
    radial-gradient(ellipse 148% 38% at 18% 108%,rgba(160,125,231,.31),rgba(160,125,231,.08) 46%,transparent 84%),
    rgba(236,237,244,.44);
}

body[data-lds-shell-standard="nacreous"] .nav-rail-head {
  position:absolute;
  z-index:3;
  top:var(--lds-rail-control-inset);
  right:var(--lds-rail-control-inset);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  min-height:42px;
  padding:0;
}

body[data-lds-shell] .nav-rail-card .nav-tree {
  gap:4px;
  padding:var(--lds-rail-nav-top,20px) 20px 24px;
  border:0;
  background:transparent;
  box-shadow:none;
}

body[data-lds-shell] .nav-rail-card .nav-group {
  gap:0;
  min-width:0;
  padding-inline:16px;
  border-left:0;
}

body[data-lds-shell] .nav-rail-card .nav-group h2 {
  display:block;
  margin:0;
  padding:0;
  color:var(--lds-rail-card-section-dark,var(--nav-section-color));
}

body[data-lds-shell] .nav-rail-card .nav-group h2::after {
  content:none;
}

body[data-lds-shell] .nav-rail-card .nav-group + .nav-group {
  padding-left:16px;
  padding-top:0;
  border-left:0;
  border-top:0;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card .nav-group h2 {
  color:var(--lds-rail-card-section-light);
}

body[data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a {
  min-height:44px;
  padding:10px 16px;
  border-radius:14px;
  color:rgba(233,239,248,.72);
}

body[data-lds-shell] .nav-group-toggle {
  display:flex;
  align-items:center;
  width:100%;
  min-height:48px;
  margin:0;
  padding:10px 0;
  border:0;
  color:inherit;
  background:transparent;
  font:inherit;
  letter-spacing:inherit;
  text-align:left;
  text-transform:inherit;
  cursor:pointer;
}

body[data-lds-shell] .nav-group:first-child .nav-group-toggle {
  padding-right:64px;
}

body[data-lds-shell] .nav-group-label {
  flex:0 0 auto;
}

body[data-lds-shell] .nav-group-rule {
  flex:1 1 auto;
  min-width:20px;
  height:1px;
  margin-left:10px;
  background:linear-gradient(90deg,color-mix(in srgb,currentColor 34%,transparent),transparent);
}

body[data-lds-shell] .nav-group-caret {
  flex:0 0 auto;
  width:16px;
  height:16px;
  margin-left:8px;
  transform:rotate(0deg);
  transform-origin:50% 50%;
  transition:transform 280ms cubic-bezier(.22,.8,.24,1),color 220ms ease;
}

body[data-lds-shell] .nav-group.is-expanded .nav-group-caret {
  transform:rotate(90deg);
}

body[data-lds-shell] .nav-group:not(.is-expanded) .nav-group-toggle:focus-visible .nav-group-caret {
  transform:rotate(90deg);
}

body[data-lds-shell] .nav-group.is-expanded .nav-group-toggle:focus-visible .nav-group-caret {
  transform:rotate(0deg);
}

@media (hover:hover) {
  body[data-lds-shell] .nav-group:not(.is-expanded) .nav-group-toggle:hover .nav-group-caret {
    transform:rotate(90deg);
  }

  body[data-lds-shell] .nav-group.is-expanded .nav-group-toggle:hover .nav-group-caret {
    transform:rotate(0deg);
  }
}

body[data-lds-shell] .nav-group-toggle:focus-visible {
  outline:2px solid var(--color-focus-ring);
  outline-offset:3px;
  border-radius:4px;
}

body[data-lds-shell] .nav-group-panel {
  display:grid;
  grid-template-rows:0fr;
  min-width:0;
  opacity:0;
  visibility:hidden;
  transition:
    grid-template-rows 520ms cubic-bezier(.22,.8,.24,1),
    opacity 300ms ease,
    visibility 0s linear 520ms;
}

body[data-lds-shell] .nav-group.is-expanded .nav-group-panel {
  grid-template-rows:1fr;
  opacity:1;
  visibility:visible;
  transition:
    grid-template-rows 560ms cubic-bezier(.22,.8,.24,1),
    opacity 360ms ease 80ms,
    visibility 0s linear 0s;
}

body[data-lds-shell] .nav-group-links {
  display:grid;
  gap:8px;
  min-height:0;
  overflow:hidden;
}

body[data-lds-shell] .nav-group.is-expanded .nav-group-links {
  /* Preserve the antialiased pill contour inside the accordion's clipping
     layer. Links previously met the clip edge exactly, which shaved off the
     right radius and made active/hovered items look truncated. */
  padding:0 2px 12px;
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell] .nav-group-caret,
  body[data-lds-shell] .nav-group-panel {
    transition:none;
  }
}

@media (max-width:899px) {
  body[data-lds-shell] .nav-rail-card .nav-tree {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-lds-shell] .nav-rail-card .nav-group {
    grid-column:1;
    width:auto;
  }
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card .nav-group a {
  color:#4e5968;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a.active {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  color:#fff;
  border-color:rgba(210,226,241,.20);
  background:rgba(1,4,8,.04);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.20),
    0 7px 18px -10px rgba(0,0,0,.42),
    0 0 14px -7px rgba(48,177,205,.18);
  backdrop-filter:blur(7px) saturate(146%) brightness(103%);
  -webkit-backdrop-filter:blur(7px) saturate(146%) brightness(103%);
}

body[data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a.active::before {
  content:"";
  position:absolute;
  inset:-82% -34%;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 34% 42% at 22% 48%,rgba(190,52,226,.27) 0%,rgba(135,43,207,.15) 34%,transparent 72%),
    radial-gradient(ellipse 38% 46% at 52% 42%,rgba(26,215,240,.26) 0%,rgba(34,151,218,.14) 38%,transparent 74%),
    radial-gradient(ellipse 32% 40% at 80% 56%,rgba(130,211,77,.22) 0%,rgba(199,198,55,.12) 36%,transparent 72%),
    radial-gradient(ellipse 26% 34% at 58% 78%,rgba(231,52,165,.18) 0%,transparent 72%);
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:.82;
  filter:blur(10px) saturate(128%) brightness(98%);
  transform-origin:50% 50%;
  animation:color-nav-organic-pearl-morph 12s cubic-bezier(.45,0,.25,1) infinite alternate -4.4s;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-card .nav-group a.active::before {
  inset:-64% -24%;
  background:linear-gradient(
    112deg,
    rgba(120,35,137,.52) 0%,
    rgba(64,47,116,.48) 28%,
    rgba(18,125,139,.46) 58%,
    rgba(45,91,68,.34) 80%,
    rgba(115,34,83,.42) 100%
  );
  opacity:.72;
  filter:blur(13px) saturate(118%) brightness(92%);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card .nav-group a.active {
  color:#172433;
  border-color:rgba(88,112,141,.20);
  background:rgba(255,255,255,.06);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.52),
    inset 0 -1px 0 rgba(76,98,123,.10),
    0 6px 16px -11px rgba(42,57,75,.30),
    0 0 13px -8px rgba(71,145,214,.22);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card .nav-group a.active::before {
  background:
    radial-gradient(ellipse 38% 46% at 22% 48%,rgba(51,139,244,.27) 0%,rgba(85,162,239,.14) 36%,transparent 73%),
    radial-gradient(ellipse 34% 42% at 52% 40%,rgba(255,215,45,.27) 0%,rgba(239,181,37,.13) 35%,transparent 72%),
    radial-gradient(ellipse 30% 38% at 68% 30%,rgba(244,103,174,.22) 0%,rgba(222,96,172,.11) 36%,transparent 72%),
    radial-gradient(ellipse 36% 44% at 80% 58%,rgba(48,193,235,.21) 0%,rgba(72,137,232,.11) 38%,transparent 74%),
    radial-gradient(ellipse 28% 36% at 58% 80%,rgba(255,230,118,.19) 0%,transparent 72%);
  opacity:.84;
  filter:blur(11px) saturate(132%) brightness(104%);
  animation:color-nav-white-pearl-morph 9s cubic-bezier(.45,0,.22,1) infinite alternate -3.4s;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-card .nav-group a:hover {
  border-color:rgba(148,185,255,.24);
  color:#fff;
  background:
    linear-gradient(135deg,rgba(148,185,255,.14),rgba(24,190,202,.08)),
    rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 8px 22px rgba(0,0,0,.16);
  transform:none;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card .nav-group a:hover {
  border-color:rgba(56,85,125,.18);
  color:#123a66;
  background:
    linear-gradient(135deg,rgba(255,255,255,.70),rgba(226,236,255,.52)),
    rgba(242,242,247,.48);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88),0 8px 22px rgba(38,68,104,.09);
  transform:none;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle {
  width:42px;
  height:42px;
}

body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-head {
  position:static;
  justify-content:center;
  height:56px;
  padding:0;
}

/* A collapsed documentation rail is a quiet content-card dock. The pearl is
   the only expressive material in this compact state. */
body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card {
  border-color:var(--lds-shell-edge);
  background:var(--color-bg-surface);
  box-shadow:0 20px 54px -38px rgba(0,0,0,.48);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell-standard="nacreous"] :is(.color-page-chrome,.lds-page-chrome) {
    transition:none;
  }

  body[data-lds-shell-standard="nacreous"] :is(
    .color-page-brand,
    .lds-page-brand,
    .color-page-brand-crest,
    .lds-page-brand-crest
  ) {
    transition:none;
  }
}

/* Canonical functional pearl
   The subsurface color field may blur; the rim and etched icon may not. */
body[data-lds-shell-standard="nacreous"] .nav-rail-toggle {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:42px;
  height:42px;
  padding:0;
  border:1px solid;
  border-radius:50% 50% 48% 52% / 51% 48% 52% 49%;
  background:rgba(255,255,255,.025);
  filter:none;
  backdrop-filter:blur(8px) saturate(164%) brightness(106%);
  -webkit-backdrop-filter:blur(8px) saturate(164%) brightness(106%);
  animation:lds-functional-pearl-contour 10s ease-in-out infinite alternate;
  transition:border-color 220ms ease,background-color 220ms ease,box-shadow 260ms ease,backdrop-filter 260ms ease,-webkit-backdrop-filter 260ms ease;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle::before {
  content:"";
  position:absolute;
  inset:-62%;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background-size:100% 100%;
  background-repeat:no-repeat;
  opacity:.9;
  filter:blur(8px) saturate(142%);
  transform-origin:50% 50%;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle::after {
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  border-radius:inherit;
  background:
    radial-gradient(ellipse 72% 52% at 22% 5%,rgba(255,255,255,.34),transparent 66%),
    radial-gradient(ellipse 66% 54% at 86% 102%,rgba(67,207,237,.12),transparent 72%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.22);
  opacity:.82;
  filter:none;
  animation:none;
  transition:opacity 220ms ease,box-shadow 220ms ease;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle svg {
  position:relative;
  z-index:2;
  width:20px;
  height:20px;
  overflow:visible;
  color:inherit;
  filter:none;
  shape-rendering:geometricPrecision;
  transition:transform var(--lds-shell-motion),color 180ms ease;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle svg path {
  vector-effect:non-scaling-stroke;
  shape-rendering:geometricPrecision;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle {
  border-color:rgba(70,104,143,.48);
  color:#07182a;
  background:rgba(255,255,255,.12);
  box-shadow:inset 2px 2px 3px rgba(255,255,255,.62),inset -3px -4px 8px rgba(74,105,132,.12),0 10px 22px -11px rgba(42,57,75,.38),0 0 0 1px rgba(123,177,220,.08),0 0 17px -5px rgba(71,145,214,.32);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle::before {
  background:radial-gradient(ellipse 38% 46% at 22% 48%,rgba(51,139,244,.34),transparent 73%),radial-gradient(ellipse 34% 42% at 52% 40%,rgba(255,215,45,.32),transparent 72%),radial-gradient(ellipse 30% 38% at 68% 30%,rgba(244,103,174,.28),transparent 72%),radial-gradient(ellipse 36% 44% at 80% 58%,rgba(48,193,235,.27),transparent 74%);
  animation:color-nav-white-pearl-morph 9s cubic-bezier(.45,0,.22,1) infinite alternate -3.4s;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle {
  border-color:rgba(222,240,252,.38);
  border-radius:50% 50% 48% 52% / 51% 48% 52% 49%;
  color:#f8fcff;
  background:rgba(3,8,14,.20);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -2px -3px 5px rgba(0,0,0,.28),0 8px 18px -10px rgba(0,0,0,.62),0 0 11px -3px rgba(48,190,215,.24),0 0 17px -7px rgba(176,78,224,.14);
  backdrop-filter:blur(3px) saturate(154%) brightness(104%);
  -webkit-backdrop-filter:blur(3px) saturate(154%) brightness(104%);
  animation:none;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle::before {
  background:radial-gradient(ellipse 34% 42% at 22% 48%,rgba(190,52,226,.36),transparent 72%),radial-gradient(ellipse 38% 46% at 52% 42%,rgba(26,215,240,.35),transparent 74%),radial-gradient(ellipse 32% 40% at 80% 56%,rgba(130,211,77,.28),transparent 72%),radial-gradient(ellipse 26% 34% at 58% 78%,rgba(231,52,165,.27),transparent 72%);
  filter:blur(5px) saturate(148%);
  animation:color-nav-organic-pearl-morph 12s cubic-bezier(.45,0,.25,1) infinite alternate -4.4s;
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover {
  transform:none;
  filter:none;
  backdrop-filter:blur(8px) saturate(180%) brightness(110%);
  -webkit-backdrop-filter:blur(8px) saturate(180%) brightness(110%);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:hover {
  border-color:rgba(55,96,140,.64);
  box-shadow:inset 2px 2px 4px rgba(255,255,255,.74),inset -3px -4px 9px rgba(69,105,137,.15),0 13px 26px -11px rgba(42,57,75,.46),0 0 0 1px rgba(123,177,220,.13),0 0 21px -4px rgba(71,145,214,.46);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover {
  border-color:rgba(231,244,255,.54);
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.24),inset -2px -3px 6px rgba(0,0,0,.32),0 10px 20px -10px rgba(0,0,0,.68),0 0 13px -3px rgba(48,205,230,.34),0 0 20px -7px rgba(190,83,235,.20);
  backdrop-filter:blur(3px) saturate(166%) brightness(108%);
  -webkit-backdrop-filter:blur(3px) saturate(166%) brightness(108%);
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover::before {
  opacity:1;
  filter:blur(8px) saturate(164%) brightness(108%);
}

body[data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover::after {
  opacity:1;
  filter:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 -1px 0 rgba(0,0,0,.24);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle::after {
  opacity:.70;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(0,0,0,.18);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover::after {
  opacity:.84;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(0,0,0,.20);
}

body[data-lds-shell-standard="nacreous"] .footer-crest {
  fill:currentColor;
  opacity:.96;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .footer-crest {
  color:#123a66;
  filter:drop-shadow(0 2px 5px rgba(46,92,145,.14));
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .footer-crest {
  color:#ddebff;
  filter:drop-shadow(0 0 6px rgba(117,190,235,.28));
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell-standard="nacreous"] .nav-rail-toggle,
  body[data-lds-shell-standard="nacreous"] .nav-rail-toggle::before {
    animation:none;
  }
}

/* Canonical page-section navigation
   Every nacreous route uses one moving pearl lens. Labels remain layout and
   interaction targets; the shared indicator owns stroke, nacre, and elevation. */
body[data-lds-shell-standard="nacreous"] {
  --lds-section-tab-height:44px;
  --lds-section-tab-inline:16px;
  --lds-section-tab-gap:16px;
  --lds-section-tab-radius:999px;
  --lds-chrome-heading-text-inset:calc(var(--lds-chrome-inline) + var(--lds-section-tab-inline));
  --lds-content-text-inset:var(--lds-chrome-heading-text-inset);
  --lds-action-height:var(--lds-touch-target-min);
  --lds-action-inline:var(--lds-space-5);
  --lds-action-gap:var(--lds-space-3);
  --lds-action-icon-size:var(--lds-icon-md);
  --lds-action-icon-gap:var(--lds-space-2);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] {
  --lds-primary-light-edge-rest:rgba(255,255,255,.72);
  --lds-primary-light-edge-hover:rgba(255,255,255,.96);
  --lds-primary-light-shadow-rest:
    0 0 0 1px rgba(213,229,241,.18),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(120,151,174,.07),
    0 8px 18px -13px rgba(42,57,75,.28);
  --lds-primary-light-shadow-hover:
    0 0 0 1px rgba(255,255,255,.58),
    inset 0 1px 0 rgba(255,255,255,.94),
    inset 0 -1px 0 rgba(120,151,174,.06),
    0 12px 26px -15px rgba(52,96,128,.26),
    0 0 20px -11px rgba(255,255,255,.98);
  --lds-primary-light-shadow-pressed:
    0 0 0 1px rgba(220,233,242,.22),
    inset 0 2px 5px rgba(83,104,126,.16),
    inset 0 -1px 0 rgba(255,255,255,.64),
    0 4px 11px -9px rgba(42,57,75,.24);
  --lds-nacre-action-field:
    radial-gradient(ellipse 38% 46% at 22% 48%,rgba(51,139,244,.27) 0%,rgba(85,162,239,.14) 36%,transparent 73%),
    radial-gradient(ellipse 34% 42% at 52% 40%,rgba(255,215,45,.27) 0%,rgba(239,181,37,.13) 35%,transparent 72%),
    radial-gradient(ellipse 30% 38% at 68% 30%,rgba(244,103,174,.22) 0%,rgba(222,96,172,.11) 36%,transparent 72%),
    radial-gradient(ellipse 36% 44% at 80% 58%,rgba(48,193,235,.21) 0%,rgba(72,137,232,.11) 38%,transparent 74%),
    radial-gradient(ellipse 28% 36% at 58% 80%,rgba(255,230,118,.19) 0%,transparent 72%);
  --lds-nacre-action-highlight:
    radial-gradient(ellipse 42% 30% at 24% 20%,rgba(255,255,255,.56) 0%,rgba(221,240,255,.16) 42%,transparent 76%),
    radial-gradient(ellipse 42% 34% at 76% 82%,rgba(255,218,91,.11) 0%,rgba(77,176,229,.08) 42%,transparent 76%);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] {
  --lds-nacre-action-field:
    radial-gradient(ellipse 34% 42% at 22% 48%,rgba(190,52,226,.29) 0%,rgba(135,43,207,.16) 34%,transparent 72%),
    radial-gradient(ellipse 38% 46% at 52% 42%,rgba(26,215,240,.28) 0%,rgba(34,151,218,.15) 38%,transparent 74%),
    radial-gradient(ellipse 32% 40% at 80% 56%,rgba(130,211,77,.22) 0%,rgba(199,198,55,.12) 36%,transparent 72%),
    radial-gradient(ellipse 26% 34% at 58% 78%,rgba(231,52,165,.20) 0%,transparent 72%);
  --lds-nacre-action-highlight:
    radial-gradient(ellipse 38% 30% at 25% 24%,rgba(255,255,255,.26) 0%,rgba(205,238,247,.11) 42%,transparent 76%),
    radial-gradient(ellipse 42% 34% at 76% 82%,rgba(47,204,225,.14) 0%,transparent 76%);
}

/* Canonical component-content anatomy.
   Documentation specimens consume these shared UI roles; route CSS owns only
   composition, placement, and the relationship being demonstrated. */
body[data-lds-shell-standard="nacreous"] .lds-component-kicker {
  display:block;
  margin:0;
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-guide-label-size,13px);
  font-weight:var(--lds-guide-label-weight,800);
  line-height:1.35;
  letter-spacing:var(--lds-guide-label-tracking,.09em);
  text-transform:uppercase;
}

/* Canonical relationship/status label. Use this role whenever a compact
   label annotates an adjacent demonstrated state or explanatory value. */
body[data-lds-shell-standard="nacreous"] .lds-emphasis-label {
  color:var(--color-label-emphasis);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-label-emphasis-size);
  font-weight:var(--lds-label-emphasis-weight);
  line-height:var(--lds-label-emphasis-line-height);
  letter-spacing:var(--lds-label-emphasis-tracking);
  text-shadow:var(--lds-label-emphasis-glow);
  text-transform:uppercase;
}

body[data-lds-shell-standard="nacreous"] .lds-component-title {
  display:block;
  margin:var(--lds-space-3) 0 0;
  color:var(--color-text-primary);
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--lds-font-xl);
  font-weight:700;
  line-height:1.2;
  letter-spacing:0;
}

body[data-lds-shell-standard="nacreous"] .lds-component-body {
  display:block;
  margin:var(--lds-space-2) 0 0;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:var(--lds-font-base);
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
}

body[data-lds-shell-standard="nacreous"] .lds-component-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:flex-end;
  gap:var(--lds-action-gap);
  margin-top:var(--lds-space-5);
}

body[data-lds-shell-standard="nacreous"] .lds-floating-surface {
  position:relative;
  padding:var(--lds-card-padding-spacious);
  border:1px solid var(--color-border-subtle);
  border-radius:var(--lds-radius-md);
  color:var(--color-text-primary);
  background:var(--color-bg-elevated);
  box-shadow:var(--lds-shadow-2);
}

/* Canonical LDS action button.
   The same component is available to every route; specimens do not invent
   route-local button colors, geometry, spacing, or interaction states. */
body[data-lds-shell-standard="nacreous"] .lds-button {
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  min-width:88px;
  min-height:var(--lds-action-height);
  padding:0 var(--lds-action-inline);
  overflow:hidden;
  border:1px solid var(--lds-shell-edge);
  border-radius:var(--lds-radius-pill);
  color:var(--lds-shell-heading);
  background:color-mix(in srgb,var(--color-bg-elevated) 10%,transparent);
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;
  font-weight:700;
  line-height:1;
  letter-spacing:0;
  white-space:nowrap;
  cursor:pointer;
  backdrop-filter:blur(11px) saturate(158%) brightness(104%);
  -webkit-backdrop-filter:blur(11px) saturate(158%) brightness(104%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -1px 0 rgba(0,0,0,.14),0 8px 18px -12px rgba(16,25,38,.48);
  transition:transform 220ms cubic-bezier(.22,1,.36,1),border-color 220ms ease,box-shadow 240ms ease,filter 240ms ease;
}

body[data-lds-shell-standard="nacreous"] .lds-button::before,
body[data-lds-shell-standard="nacreous"] .lds-button::after {
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:inherit;
  background-repeat:no-repeat;
}

body[data-lds-shell-standard="nacreous"] .lds-button::before {
  inset:-76% -38%;
  background:var(--lds-nacre-action-field);
  background-size:100% 100%;
  opacity:.18;
  filter:blur(10px) saturate(130%);
  animation:lds-action-nacre-morph 11s cubic-bezier(.45,0,.22,1) infinite alternate -3.4s;
  transition:opacity 240ms ease,filter 240ms ease;
}

body[data-lds-shell-standard="nacreous"] .lds-button::after {
  inset:-24% -14%;
  background:var(--lds-nacre-action-highlight);
  background-size:100% 100%;
  opacity:.36;
  filter:blur(5px);
}

body[data-lds-shell-standard="nacreous"] .lds-button--primary::before {
  opacity:.88;
}

body[data-lds-shell-standard="nacreous"] .lds-button--primary::after {
  opacity:.72;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .lds-button--primary {
  color:#172433;
  border-color:var(--lds-primary-light-edge-rest);
  background:rgba(255,255,255,.24);
  box-shadow:var(--lds-primary-light-shadow-rest);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] .lds-button--primary {
  color:#fff;
  border-color:rgba(210,226,241,.24);
  background:rgba(1,4,8,.16);
  text-shadow:0 1px 0 rgba(0,0,0,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 -1px 0 rgba(0,0,0,.22),0 8px 18px -11px rgba(0,0,0,.52),0 0 14px -8px rgba(48,177,205,.22);
}

body[data-lds-shell-standard="nacreous"] .lds-button:hover {
  transform:translateY(-1px);
  border-color:color-mix(in srgb,var(--lds-shell-heading) 42%,var(--lds-shell-edge));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.16),0 11px 24px -13px rgba(16,25,38,.58);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .lds-button--primary:hover {
  border-color:var(--lds-primary-light-edge-hover);
  box-shadow:var(--lds-primary-light-shadow-hover);
}

body[data-lds-shell-standard="nacreous"] .lds-button:hover::before {
  opacity:.54;
  filter:blur(9px) saturate(146%) brightness(106%);
}

body[data-lds-shell-standard="nacreous"] .lds-button--primary:hover::before {
  opacity:1;
}

body[data-lds-shell-standard="nacreous"] .lds-button:active {
  transform:translateY(0) scale(.985);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .lds-button--primary:active {
  border-color:var(--lds-primary-light-edge-rest);
  box-shadow:var(--lds-primary-light-shadow-pressed);
}

body[data-lds-shell-standard="nacreous"] .lds-button:focus-visible {
  outline:var(--lds-focus-ring-width) solid var(--color-focus-ring);
  outline-offset:var(--lds-focus-ring-offset);
}

body[data-route="foundation-motion"] .motion-spatial-toggle-content{
  position:relative;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--lds-action-icon-gap);
}
body[data-route="foundation-motion"] .motion-spatial-toggle{
  flex:0 0 var(--lds-specimen-cue-action-width);
  width:var(--lds-specimen-cue-action-width);
  min-width:var(--lds-specimen-cue-action-width);
  justify-content:center;
}
body[data-route="foundation-motion"] .motion-spatial-toggle-content svg{
  flex:0 0 auto;
  width:var(--lds-action-icon-size);
  height:var(--lds-action-icon-size);
  color:currentColor;
  filter:none;
}

/* Canonical interactive-specimen invitation.
   The cue is static instructional annotation, never required interaction
   content. It consumes shared spacing and presentation tokens without
   competing with the control it annotates. */
body[data-lds-shell-standard="nacreous"] .lds-interaction-cue{
  display:inline-block;
  flex:0 0 auto;
  width:var(--lds-specimen-spatial-cue-art-width);
  aspect-ratio:var(--lds-specimen-cue-art-ratio);
  color:var(--lds-specimen-cue-color);
  background:currentColor;
  -webkit-mask:url("../source/Arrows/arrow_Try-me_3.svg") center/contain no-repeat;
  mask:url("../source/Arrows/arrow_Try-me_3.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 var(--lds-focus-ring-width) var(--lds-specimen-cue-glow));
}

/* Canonical action hierarchy.
   Primary actions carry the living material and a restrained warm refraction;
   secondary actions retain the geometry but recede through quieter tone,
   flatter elevation, and substantially less nacre. */
body[data-lds-shell-standard="nacreous"] .lds-button--secondary {
  color:var(--color-text-secondary);
  border-color:color-mix(in srgb,var(--lds-shell-edge) 72%,transparent);
  background:color-mix(in srgb,var(--color-bg-elevated) 7%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 6px 14px -12px rgba(16,25,38,.34);
}

body[data-lds-shell-standard="nacreous"] .lds-button--secondary::before {
  opacity:.08;
  filter:blur(12px) saturate(108%);
}

body[data-lds-shell-standard="nacreous"] .lds-button--secondary::after {
  opacity:.14;
  filter:blur(7px);
}

body[data-lds-shell-standard="nacreous"] .lds-button--secondary:hover {
  color:var(--color-text-primary);
  border-color:color-mix(in srgb,var(--lds-shell-heading) 24%,var(--lds-shell-edge));
  background:color-mix(in srgb,var(--color-bg-elevated) 11%,transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 9px 18px -13px rgba(16,25,38,.42);
}

body[data-lds-shell-standard="nacreous"] .lds-button--secondary:hover::before {opacity:.18}
body[data-lds-shell-standard="nacreous"] .lds-button--secondary:hover::after {opacity:.24}

@keyframes lds-action-nacre-morph {
  0% { transform:translate3d(-6%,-3%,0) rotate(-7deg) scale(1.06,.94); filter:blur(11px) saturate(122%) brightness(98%) hue-rotate(-5deg); }
  38% { transform:translate3d(4%,4%,0) rotate(16deg) scale(.96,1.08); filter:blur(10px) saturate(146%) brightness(106%) hue-rotate(10deg); }
  72% { transform:translate3d(-2%,6%,0) rotate(36deg) scale(1.09,.95); filter:blur(11px) saturate(138%) brightness(103%) hue-rotate(22deg); }
  100% { transform:translate3d(7%,-4%,0) rotate(56deg) scale(.95,1.07); filter:blur(10px) saturate(128%) brightness(101%) hue-rotate(34deg); }
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell-standard="nacreous"] .lds-button,
  body[data-lds-shell-standard="nacreous"] .lds-button::before {
    animation:none;
    transition:none;
  }
}

body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-track {
  position:relative;
  isolation:isolate;
  gap:var(--lds-section-tab-gap);
}

body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link {
  position:relative;
  z-index:2;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  box-sizing:border-box;
  height:var(--lds-section-tab-height);
  min-height:var(--lds-section-tab-height);
  padding:0 var(--lds-section-tab-inline);
  overflow:visible;
  border:0;
  border-radius:var(--lds-section-tab-radius);
  background:transparent;
  font-family:"Hanken Grotesk","Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  cursor:pointer;
  transition:color 240ms ease,background-color 240ms ease,box-shadow 240ms ease,text-shadow 240ms ease;
}

body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link.is-active {
  overflow:visible;
  border:0;
  color:inherit;
  background:transparent;
  box-shadow:none;
  text-shadow:0 1px 0 rgba(255,255,255,.46);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link.is-active::before {
  content:none;
}

/* The moving indicator is the sole material owner. The explicit button type
   retires the older Overview pseudo-element at equal specificity. */
body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) button.section-nav-link.is-active::before,
body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) button.section-nav-link.is-active::after {
  content:none;
  display:none;
}

body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator {
  position:absolute;
  top:10px;
  left:0;
  z-index:1;
  display:block;
  box-sizing:border-box;
  width:0;
  height:var(--lds-section-tab-height);
  overflow:hidden;
  isolation:isolate;
  contain:paint;
  clip-path:inset(0 round var(--lds-section-tab-radius));
  pointer-events:none;
  border:1px solid transparent;
  border-radius:var(--lds-section-tab-radius);
  transition:transform 560ms cubic-bezier(.22,1,.36,1),width 560ms cubic-bezier(.22,1,.36,1),border-color 320ms ease,background 360ms ease,box-shadow 320ms ease;
}

body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::before,
body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::after {
  content:"";
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:inherit;
  background-size:100% 100%;
  background-repeat:no-repeat;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link {
  color:#344253;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link.is-active {
  color:#172433;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link:not(.is-active):hover {
  color:#172433;
  background:rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 0 0 1px rgba(88,112,141,.20);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator {
  border-color:rgba(88,112,141,.20);
  background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.52),inset 0 -1px 0 rgba(76,98,123,.10),0 6px 16px -11px rgba(42,57,75,.30),0 0 13px -8px rgba(71,145,214,.22);
  backdrop-filter:blur(7px) saturate(146%) brightness(103%);
  -webkit-backdrop-filter:blur(7px) saturate(146%) brightness(103%);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::before {
  inset:-72% -38%;
  background:var(--lds-nacre-action-field);
  opacity:.84;
  filter:blur(11px) saturate(132%) brightness(104%);
  animation:color-nav-white-pearl-morph 9s cubic-bezier(.45,0,.22,1) infinite alternate -3.4s;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::after {
  inset:-24% -14%;
  background:var(--lds-nacre-action-highlight);
  opacity:.72;
  filter:blur(5px);
  animation:color-nav-white-pearl-light 8s ease-in-out infinite alternate -4.8s;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link {
  color:rgba(233,239,248,.78);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link.is-active {
  color:#fff;
  text-shadow:0 1px 0 rgba(0,0,0,.34);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-link:not(.is-active):hover {
  color:#fff;
  background:rgba(255,255,255,.055);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),inset 0 0 0 1px rgba(205,221,239,.16);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator {
  border-color:rgba(210,226,241,.20);
  background:rgba(1,4,8,.04);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.17),inset 0 -1px 0 rgba(0,0,0,.20),0 7px 18px -10px rgba(0,0,0,.42),0 0 14px -7px rgba(48,177,205,.18);
  backdrop-filter:blur(7px) saturate(152%) brightness(104%);
  -webkit-backdrop-filter:blur(7px) saturate(152%) brightness(104%);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::before {
  inset:-72% -38%;
  background:var(--lds-nacre-action-field);
  opacity:.82;
  filter:blur(10px) saturate(128%) brightness(98%);
  animation:color-nav-organic-pearl-morph 12s cubic-bezier(.45,0,.25,1) infinite alternate -4.4s;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::after {
  inset:-24% -14%;
  background:var(--lds-nacre-action-highlight);
  opacity:.76;
  filter:blur(5px);
  animation:color-nav-organic-light-morph 10s ease-in-out infinite alternate -6.2s;
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator,
  body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::before,
  body[data-lds-shell-standard="nacreous"] :is(.color-page-nav,.lds-page-section-nav) .section-nav-indicator::after {
    animation:none;
  }
}

/* Shared appearance transition
   Light and Dark are two readings of the same nacreous material, so the full
   shell crossfades as one surface while the Living Glass toggle keeps its own
   internal motion. No route owns or overrides this timing. */
:root {
  --lds-theme-transition-duration:820ms;
  --lds-theme-transition-ease:cubic-bezier(.22,1,.36,1);
}

::view-transition-group(root) {
  animation-duration:var(--lds-theme-transition-duration);
  animation-timing-function:var(--lds-theme-transition-ease);
}

::view-transition-old(root) {
  animation:lds-theme-release 680ms var(--lds-theme-transition-ease) both;
}

::view-transition-new(root) {
  animation:lds-theme-arrive var(--lds-theme-transition-duration) var(--lds-theme-transition-ease) both;
}

@keyframes lds-theme-release {
  from { opacity:1; filter:saturate(1) brightness(1); }
  to { opacity:0; filter:saturate(.88) brightness(.97); }
}

@keyframes lds-theme-arrive {
  from { opacity:0; filter:saturate(.86) brightness(1.025); }
  52% { opacity:.76; filter:saturate(.96) brightness(1.01); }
  to { opacity:1; filter:saturate(1) brightness(1); }
}

/* Browsers without View Transitions still soften the persistent shell and its
   principal materials rather than snapping between appearances. */
html.lds-theme-transition-fallback :is(
  body,
  .app-nav,
  .nav-rail-card,
  .color-page-chrome,
  .lds-page-chrome,
  .color-foundation,
  .foundation-page,
  .color-foundation-hero,
  .typography-foundation-hero,
  .color-foundation-card,
  .panel-card
) {
  transition:
    color 620ms var(--lds-theme-transition-ease),
    background-color var(--lds-theme-transition-duration) var(--lds-theme-transition-ease),
    border-color 680ms var(--lds-theme-transition-ease),
    box-shadow var(--lds-theme-transition-duration) var(--lds-theme-transition-ease),
    opacity 620ms var(--lds-theme-transition-ease),
    filter var(--lds-theme-transition-duration) var(--lds-theme-transition-ease);
}

.lds-theme-pearl-veil {
  position:fixed;
  z-index:2147483646;
  inset:0;
  pointer-events:none;
  opacity:0;
  animation:lds-theme-pearl-veil 900ms var(--lds-theme-transition-ease) both;
}

html[data-lds-theme-direction="dark-to-light"] .lds-theme-pearl-veil {
  background:
    radial-gradient(ellipse 70% 62% at 18% 12%,rgba(255,232,241,.96) 0%,transparent 68%),
    radial-gradient(ellipse 74% 68% at 84% 18%,rgba(218,237,255,.97) 0%,transparent 70%),
    radial-gradient(ellipse 62% 58% at 58% 86%,rgba(230,225,255,.92) 0%,transparent 72%),
    rgba(244,246,250,.98);
}

html[data-lds-theme-direction="light-to-dark"] .lds-theme-pearl-veil {
  background:
    radial-gradient(ellipse 68% 62% at 18% 18%,rgba(38,16,58,.94) 0%,transparent 70%),
    radial-gradient(ellipse 76% 68% at 84% 20%,rgba(6,47,62,.94) 0%,transparent 72%),
    radial-gradient(ellipse 64% 60% at 58% 88%,rgba(20,25,54,.92) 0%,transparent 72%),
    rgba(6,9,17,.98);
}

@keyframes lds-theme-pearl-veil {
  0% { opacity:0; }
  38%,46% { opacity:.96; }
  100% { opacity:0; }
}

@media (prefers-reduced-motion:reduce) {
  ::view-transition-group(root),
  ::view-transition-old(root),
  ::view-transition-new(root),
  html.lds-theme-transition-fallback :is(
    body,
    .app-nav,
    .nav-rail-card,
    .color-page-chrome,
    .lds-page-chrome,
    .color-foundation,
    .foundation-page,
    .color-foundation-hero,
    .typography-foundation-hero,
    .color-foundation-card,
    .panel-card
  ) {
    animation:none;
    transition:none;
  }

  .lds-theme-pearl-veil {
    display:none;
    animation:none;
  }
}

/* Canonical editorial foundation standard
   Used by Typography after the Typography II study proved the direction:
   the LDS shell stays standardized, while page content uses full-width
   editorial bands. Cards are reserved for comparison or containment, not for
   every thought. */
body[data-lds-shell-standard="nacreous"] .foundation-editorial-grid {
  grid-template-columns:1fr;
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-grid :is(.type2-hero,.type2-band) {
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-grid .type2-band {
  border-top:1px solid var(--color-border-subtle);
}

/* Shared full-width editorial foundation language.
   Major thoughts are bands separated by rhythm and rules. A surface remains
   only when its content needs comparison, interaction, or containment. */
body[data-lds-shell-standard="nacreous"] .foundation-editorial-page {
  --lds-editorial-hero-title-size:clamp(56px,7vw,92px);
  --lds-editorial-hero-title-line:1.04;
  --lds-editorial-hero-title-weight:850;
  --lds-editorial-hero-title-tracking:var(--lds-heading-tracking-display,-.012em);
  --lds-editorial-hero-kicker-gap:32px;
  --lds-editorial-hero-copy-gap:24px;
  --lds-editorial-hero-kicker-color:var(--lds-direction-label-color);
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  min-width:0;
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-hero-copy {
  display:grid;
  gap:0;
  min-width:0;
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-page .foundation-editorial-hero .foundation-editorial-hero-copy > .foundation-editorial-hero-kicker {
  margin:0 0 var(--lds-editorial-hero-kicker-gap);
  color:var(--lds-editorial-hero-kicker-color);
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-page .foundation-editorial-hero .foundation-editorial-hero-copy > .foundation-editorial-hero-title {
  margin:0 0 var(--lds-editorial-hero-copy-gap);
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:var(--lds-editorial-hero-title-size,clamp(56px,7vw,92px));
  font-weight:var(--lds-editorial-hero-title-weight,850);
  line-height:var(--lds-editorial-hero-title-line,1.04);
  letter-spacing:var(--lds-editorial-hero-title-tracking,var(--lds-heading-tracking-display,-.012em));
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-hero-copy > p {
  margin:0;
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-hero-copy > p + p {
  margin-top:var(--lds-editorial-hero-copy-gap);
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-page > :is(section,article) {
  position:relative;
  min-width:0;
  margin:0;
  padding:clamp(44px,6vw,84px) 0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-page > :is(section,article):first-child {
  padding-top:clamp(24px,4vw,56px);
}

body[data-lds-shell-standard="nacreous"] .foundation-editorial-page > :is(section,article) + :is(section,article) {
  border-top:1px solid var(--color-border-subtle);
}

/* Overview is an editorial map of the system. Its nested vital-sign tiles
   remain contained because they compare parallel system states. */
body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page {
  grid-template-columns:1fr;
  gap:0;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > :is(section,article) {
  grid-column:1 / -1;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page .system-room-hero {
  padding-inline:0;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .wide {
  grid-column:auto;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory {
  display:grid;
  gap:clamp(32px,4vw,56px);
  padding-block:clamp(56px,7vw,96px);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head {
  display:grid;
  grid-template-columns:minmax(150px,.22fr) minmax(320px,.48fr) minmax(260px,.30fr);
  gap:clamp(24px,4vw,64px);
  align-items:start;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head .eyebrow {
  padding-top:10px;
  color:var(--color-guide-text);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head h2 {
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi","Hanken Grotesk","Inter",system-ui,sans-serif;
  font-size:clamp(38px,4.5vw,64px);
  line-height:1.02;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head p {
  max-width:34ch;
  margin:8px 0 0;
  color:var(--color-text-secondary);
  font-size:clamp(17px,1.45vw,21px);
  line-height:1.55;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals {
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article {
  display:grid;
  grid-template-rows:auto auto 1fr;
  gap:8px;
  min-width:0;
  min-height:190px;
  padding:clamp(24px,2.5vw,36px);
  border-right:1px solid var(--color-border-subtle);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article:last-child {
  border-right:0;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals strong {
  color:var(--color-text-primary);
  font-family:"Satoshi","Hanken Grotesk","Inter",system-ui,sans-serif;
  font-size:clamp(42px,4.2vw,64px);
  font-weight:800;
  line-height:.94;
  letter-spacing:-.02em;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals span {
  color:var(--color-text-primary);
  font-size:14px;
  font-weight:750;
  line-height:1.25;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals small {
  align-self:end;
  color:var(--color-text-secondary);
  font-size:13px;
  line-height:1.45;
}

@media (max-width:1100px) {
  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head {
    grid-template-columns:150px minmax(0,1fr);
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head p {
    grid-column:2;
    margin-top:0;
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article:nth-child(3) {
    border-right:0;
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article:nth-child(n+4) {
    border-top:1px solid var(--color-border-subtle);
  }
}

@media (max-width:640px) {
  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head {
    grid-template-columns:1fr;
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-inventory-head p {
    grid-column:auto;
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article {
    min-height:168px;
    border-top:1px solid var(--color-border-subtle);
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article:nth-child(-n+2) {
    border-top:0;
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article:nth-child(odd) {
    border-right:1px solid var(--color-border-subtle);
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .system-vitals article:nth-child(even) {
    border-right:0;
  }
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > :is(.panel-card,.hero-card) {
  gap:clamp(20px,2.5vw,32px);
  border-right:0;
  border-bottom:0;
  border-left:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door {
  grid-template-columns:minmax(190px,.32fr) minmax(260px,.48fr) minmax(150px,.2fr);
  grid-template-areas:
    "title intro action"
    "title list action";
  column-gap:clamp(28px,4vw,64px);
  align-items:start;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door h2 {
  grid-area:title;
  font-family:"Satoshi","Hanken Grotesk","Inter",system-ui,sans-serif;
  font-size:clamp(34px,4vw,58px);
  line-height:1.04;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door > p {
  grid-area:intro;
  max-width:48ch;
  font-size:clamp(17px,1.25vw,19px);
  line-height:1.55;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door > ul {
  grid-area:list;
  margin:0;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door > a {
  grid-area:action;
  align-self:center;
  justify-self:end;
}

body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .panel-card:not(.system-door) h2 {
  font-family:"Satoshi","Hanken Grotesk","Inter",system-ui,sans-serif;
  font-size:clamp(30px,3.2vw,46px);
  line-height:1.06;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

/* Color keeps its protected specimens and comparisons, but the outer page
   structure is editorial rather than a stack of cards. */
body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-editorial-page {
  gap:0;
}

body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-editorial-page > :is(.color-foundation-hero,.color-foundation-card) {
  padding-inline:0;
  border-right:0;
  border-bottom:0;
  border-left:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-editorial-page > .color-foundation-hero {
  isolation:isolate;
  overflow:visible;
}

body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-editorial-page > .color-foundation-hero::before {
  content:"";
  position:absolute;
  z-index:-1;
  inset:4% -5% 0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 48% 52% at 12% 22%,rgba(148,185,255,.10),transparent 74%),
    radial-gradient(ellipse 46% 54% at 88% 72%,rgba(36,202,235,.075),transparent 76%),
    radial-gradient(ellipse 40% 46% at 46% 108%,rgba(232,51,164,.055),transparent 78%);
  filter:blur(30px) saturate(128%);
}

body[data-route="foundation-color"][data-color-theme="light"][data-lds-shell-standard="nacreous"] .color-editorial-page > .color-foundation-hero::before {
  background:
    radial-gradient(ellipse 48% 52% at 12% 22%,rgba(94,146,226,.095),transparent 74%),
    radial-gradient(ellipse 46% 54% at 88% 72%,rgba(45,173,196,.07),transparent 76%),
    radial-gradient(ellipse 40% 46% at 46% 108%,rgba(214,96,157,.05),transparent 78%);
}

@media (max-width:900px) {
  body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door {
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "intro"
      "list"
      "action";
  }

  body[data-route="overview"][data-lds-shell-standard="nacreous"] .overview-editorial-page > .system-door > a {
    justify-self:start;
  }
}

@media (max-width:1039px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content,
  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-content-rail {
    box-sizing:border-box;
    width:100%;
    max-width:none;
    margin:0;
    padding:24px 16px 64px;
  }
}

@media (min-width:1040px) {
  /* Color previously retained a hard-coded 300px first column in two legacy
     selectors. The canonical sidebar token must govern both shell states. */
  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-header,
  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-nav,
  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-nav.is-stuck {
    grid-template-columns:var(--lds-chrome-sidebar-width) minmax(0,1fr);
  }

  body[data-lds-shell-standard="nacreous"].documentation-nav-collapsed :is(.color-page-brand-crest,.lds-page-brand-crest) {
    width:58px;
    height:58px;
  }

  /* Keep one centering model while the compact header interpolates. The
     previous compact rule switched to top padding, forcing the crest through
     y=0 before animating it back down. */
  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed :is(.color-page-brand,.lds-page-brand) {
    align-items:center;
    align-self:start;
    justify-content:center;
    height:var(--lds-chrome-header-current);
    min-height:var(--lds-chrome-header-current);
    max-height:var(--lds-chrome-header-current);
    padding:0;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed :is(.color-page-brand-crest,.lds-page-brand-crest) {
    margin-top:0;
  }

  /* Collapsed documentation dock
     The rail disappears; one functional pearl remains on the same optical
     axis as the collapsed brand crest. Material belongs to the control, not
     to a miniature card around it. */
  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .app-nav {
    padding-right:0;
    overflow:visible;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card {
    width:var(--lds-chrome-sidebar-width);
    height:76px;
    min-height:76px;
    overflow:visible;
    border:0;
    background:transparent;
    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card::before,
  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card::after {
    content:none;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-head {
    position:static;
    width:100%;
    height:76px;
    min-height:76px;
    justify-content:center;
    overflow:visible;
    transform:translateX(var(--lds-brand-collapsed-optical-x));
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle {
    width:58px;
    height:58px;
    overflow:hidden;
    border-radius:52% 48% 46% 54% / 47% 54% 46% 53%;
    animation:lds-functional-pearl-contour 7.5s cubic-bezier(.42,0,.28,1) infinite alternate;
    transition:
      border-color 240ms ease,
      background-color 240ms ease,
      box-shadow 360ms cubic-bezier(.22,1,.36,1),
      filter 360ms cubic-bezier(.22,1,.36,1),
      transform 360ms cubic-bezier(.22,1,.36,1);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle::before {
    inset:-42%;
    opacity:.98;
    filter:blur(5px) saturate(172%) contrast(108%);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle::after {
    inset:0;
    background:
      radial-gradient(ellipse 70% 48% at 24% 7%,rgba(255,255,255,.52),transparent 64%),
      radial-gradient(ellipse 34% 26% at 72% 24%,rgba(255,255,255,.18),transparent 72%),
      radial-gradient(ellipse 66% 54% at 88% 102%,rgba(57,206,236,.18),transparent 70%),
      radial-gradient(ellipse 54% 48% at 8% 88%,rgba(232,75,181,.12),transparent 72%);
    opacity:.94;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle svg {
    width:22px;
    height:22px;
    filter:drop-shadow(0 1px 0 rgba(255,255,255,.22));
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:hover {
    transform:translateY(-2px) scale(1.035);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle {
    border-color:rgba(199,224,246,.34);
    color:#f6fbff;
    background:
      radial-gradient(ellipse 70% 62% at 31% 22%,rgba(62,79,111,.72),transparent 62%),
      radial-gradient(ellipse 72% 74% at 66% 70%,rgba(2,10,16,.94),transparent 76%),
      rgba(2,6,12,.76);
    box-shadow:
      inset 2px 2px 3px rgba(239,248,255,.20),
      inset -5px -7px 13px rgba(0,0,0,.58),
      0 12px 24px -15px rgba(0,0,0,.88),
      0 0 18px -7px rgba(57,211,232,.58),
      0 0 27px -10px rgba(201,72,226,.40),
      0 0 38px -16px rgba(108,214,116,.28);
    backdrop-filter:blur(7px) saturate(184%) brightness(105%);
    -webkit-backdrop-filter:blur(7px) saturate(184%) brightness(105%);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle::before {
    background:
      radial-gradient(ellipse 42% 48% at 18% 42%,rgba(209,54,232,.58),transparent 70%),
      radial-gradient(ellipse 48% 54% at 52% 28%,rgba(31,220,241,.56),transparent 72%),
      radial-gradient(ellipse 42% 48% at 86% 58%,rgba(137,226,79,.42),transparent 72%),
      radial-gradient(ellipse 36% 42% at 55% 88%,rgba(243,53,171,.43),transparent 70%),
      radial-gradient(ellipse 74% 68% at 52% 54%,rgba(4,8,15,.64),transparent 78%);
    animation:color-nav-organic-pearl-morph 8.5s cubic-bezier(.45,0,.25,1) infinite alternate -4.4s;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:hover {
    border-color:rgba(226,242,255,.48);
    box-shadow:
      inset 2px 2px 4px rgba(239,248,255,.25),
      inset -5px -7px 13px rgba(0,0,0,.62),
      0 15px 28px -15px rgba(0,0,0,.92),
      0 0 22px -6px rgba(54,221,239,.72),
      0 0 33px -9px rgba(211,75,235,.52),
      0 0 44px -15px rgba(117,224,122,.34);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle {
    border-color:rgba(91,122,154,.32);
    color:#102237;
    background:
      radial-gradient(ellipse 76% 68% at 30% 20%,rgba(255,255,255,.92),transparent 66%),
      radial-gradient(ellipse 74% 72% at 72% 78%,rgba(220,236,244,.66),transparent 76%),
      rgba(247,249,250,.48);
    box-shadow:
      inset 3px 3px 5px rgba(255,255,255,.88),
      inset -5px -7px 13px rgba(75,104,128,.16),
      0 13px 25px -15px rgba(43,61,84,.44),
      0 0 19px -7px rgba(47,155,225,.44),
      0 0 28px -10px rgba(237,91,177,.34),
      0 0 38px -16px rgba(240,197,65,.30);
    backdrop-filter:blur(9px) saturate(170%) brightness(110%);
    -webkit-backdrop-filter:blur(9px) saturate(170%) brightness(110%);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle::before {
    background:
      radial-gradient(ellipse 44% 50% at 16% 44%,rgba(52,151,244,.52),transparent 72%),
      radial-gradient(ellipse 42% 48% at 48% 26%,rgba(255,216,56,.48),transparent 70%),
      radial-gradient(ellipse 38% 44% at 76% 28%,rgba(247,104,182,.48),transparent 70%),
      radial-gradient(ellipse 44% 50% at 86% 70%,rgba(49,205,217,.43),transparent 72%),
      radial-gradient(ellipse 38% 44% at 42% 90%,rgba(168,112,232,.38),transparent 70%);
    animation:color-nav-white-pearl-morph 7.5s cubic-bezier(.45,0,.22,1) infinite alternate -3.4s;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:hover {
    border-color:rgba(67,105,144,.44);
    box-shadow:
      inset 3px 3px 6px rgba(255,255,255,.96),
      inset -5px -7px 14px rgba(70,101,128,.19),
      0 16px 29px -15px rgba(43,61,84,.48),
      0 0 23px -6px rgba(46,161,229,.56),
      0 0 34px -9px rgba(241,93,180,.43),
      0 0 45px -15px rgba(242,202,72,.38);
  }
}

/* Functional pearl material — optical reduction of the Color specimen.
   At control scale the contour and rim remain still and precise. Only the
   subsurface nacre moves, so the 42–58px edge never breaks or stipples. */
body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle,
body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover {
  border:1px solid;
  border-radius:49% 51% 50% 47% / 52% 47% 53% 48%;
  animation:none;
  filter:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle::before {
  inset:-14%;
  border-radius:inherit;
  opacity:.72;
  filter:blur(3px) saturate(118%);
  animation:lds-functional-pearl-nacre 11s cubic-bezier(.45,0,.25,1) infinite alternate;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle::after {
  inset:0;
  border-radius:inherit;
  opacity:1;
  filter:none;
  animation:none;
  background:
    radial-gradient(ellipse 58% 44% at 25% 12%,rgba(255,255,255,.72),rgba(255,255,255,.16) 38%,transparent 72%),
    radial-gradient(ellipse 76% 68% at 78% 88%,rgba(71,185,210,.10),transparent 72%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.56),
    inset 0 -1px 0 rgba(26,45,65,.12);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle svg,
body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover svg {
  filter:none;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle,
body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:hover {
  border-color:rgba(111,139,167,.18);
  color:#102337;
  background:
    radial-gradient(ellipse 58% 46% at 27% 17%,rgba(255,255,255,.94),rgba(255,255,255,.38) 38%,transparent 72%),
    radial-gradient(ellipse 74% 68% at 10% 86%,rgba(171,130,220,.11),rgba(171,130,220,.025) 50%,transparent 84%),
    radial-gradient(ellipse 74% 70% at 94% 78%,rgba(56,187,214,.12),rgba(56,187,214,.025) 50%,transparent 84%),
    radial-gradient(ellipse 68% 60% at 84% 2%,rgba(238,162,191,.09),rgba(238,162,191,.018) 52%,transparent 84%),
    radial-gradient(ellipse 116% 108% at 35% 28%,#fbfcff 0%,#edf0f4 48%,#d9e0e7 80%,#bcc6d0 100%);
  box-shadow:
    inset 5px 4px 11px rgba(255,255,255,.66),
    inset -8px -10px 16px rgba(57,70,94,.15),
    inset 3px -4px 11px rgba(115,190,211,.05),
    0 15px 20px -9px rgba(30,39,55,.36),
    -7px 8px 17px -12px rgba(126,91,187,.15),
    7px 8px 18px -12px rgba(43,164,193,.14);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle::before {
  opacity:.44;
  filter:blur(4px) saturate(104%);
  background:
    radial-gradient(ellipse 56% 54% at 14% 76%,rgba(160,119,220,.18),transparent 74%),
    radial-gradient(ellipse 60% 56% at 88% 70%,rgba(44,185,214,.18),transparent 76%),
    radial-gradient(ellipse 52% 48% at 72% 6%,rgba(242,170,195,.13),transparent 74%);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle::after {
  background:
    radial-gradient(ellipse 60% 46% at 25% 12%,rgba(255,255,255,.54),rgba(255,255,255,.10) 42%,transparent 74%),
    radial-gradient(ellipse 78% 70% at 80% 90%,rgba(71,185,210,.045),transparent 74%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle,
body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover {
  border-color:rgba(219,235,255,.32);
  color:#f7fbff;
  background:
    radial-gradient(ellipse 66% 52% at 13% 4%,rgba(224,236,255,.58),rgba(224,236,255,.12) 38%,transparent 70%),
    radial-gradient(ellipse 72% 66% at 98% 2%,rgba(126,76,194,.54),rgba(126,76,194,.14) 44%,transparent 78%),
    radial-gradient(ellipse 76% 70% at 102% 100%,rgba(41,183,207,.46),rgba(41,183,207,.12) 48%,transparent 80%),
    radial-gradient(ellipse 72% 66% at -4% 102%,rgba(199,61,151,.40),rgba(199,61,151,.10) 48%,transparent 80%),
    radial-gradient(ellipse 118% 108% at 36% 30%,#343b4c 0%,#181d29 44%,#090c14 74%,#020307 100%);
  box-shadow:
    inset -8px -10px 15px rgba(0,0,0,.56),
    inset 5px 4px 10px rgba(196,217,247,.18),
    inset 3px -4px 11px rgba(43,167,194,.09),
    0 15px 20px -9px rgba(0,0,0,.72),
    -7px 8px 17px -11px rgba(128,75,190,.40),
    7px 8px 18px -11px rgba(38,169,197,.38);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle::before {
  background:
    radial-gradient(ellipse 56% 52% at 10% 80%,rgba(211,62,162,.40),transparent 72%),
    radial-gradient(ellipse 62% 58% at 92% 72%,rgba(37,190,216,.42),transparent 74%),
    radial-gradient(ellipse 58% 54% at 78% 6%,rgba(135,78,202,.46),transparent 72%);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover {
  transform:translateY(-1px) scale(1.025);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle,
body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:hover {
  border-radius:49% 51% 50% 47% / 52% 47% 53% 48%;
  animation:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle::before {
  inset:-14%;
  opacity:.72;
  filter:blur(3px) saturate(118%);
  animation:lds-functional-pearl-nacre 11s cubic-bezier(.45,0,.25,1) infinite alternate;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle::after {
  background:
    radial-gradient(ellipse 58% 44% at 25% 12%,rgba(255,255,255,.72),rgba(255,255,255,.16) 38%,transparent 72%),
    radial-gradient(ellipse 76% 68% at 78% 88%,rgba(71,185,210,.10),transparent 72%);
  opacity:1;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle,
body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:hover {
  border-color:rgba(111,139,167,.18);
  background:
    radial-gradient(ellipse 60% 48% at 26% 16%,rgba(255,255,255,.96),rgba(255,255,255,.40) 40%,transparent 74%),
    radial-gradient(ellipse 82% 74% at 4% 92%,rgba(157,126,211,.09),rgba(157,126,211,.02) 54%,transparent 86%),
    radial-gradient(ellipse 84% 78% at 100% 84%,rgba(70,176,202,.11),rgba(70,176,202,.02) 56%,transparent 88%),
    radial-gradient(ellipse 74% 66% at 88% -8%,rgba(226,163,190,.055),rgba(226,163,190,.01) 58%,transparent 88%),
    radial-gradient(ellipse 118% 110% at 34% 26%,#fbfcff 0%,#eaedf2 48%,#ced6df 79%,#aab5c1 100%);
  box-shadow:
    inset 7px 6px 14px rgba(255,255,255,.72),
    inset -11px -14px 20px rgba(52,65,84,.22),
    inset 4px -6px 14px rgba(92,178,201,.06),
    0 23px 29px -11px rgba(34,44,59,.54),
    0 10px 20px -13px rgba(255,255,255,.46),
    -9px 11px 21px -15px rgba(124,94,179,.18),
    9px 11px 22px -15px rgba(51,151,179,.17);
}

body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle::before {
  opacity:.34;
  filter:blur(5px) saturate(100%);
  background:
    radial-gradient(ellipse 76% 72% at 2% 86%,rgba(151,118,211,.15),transparent 78%),
    radial-gradient(ellipse 82% 76% at 102% 78%,rgba(58,177,204,.16),transparent 80%),
    radial-gradient(ellipse 66% 60% at 86% -6%,rgba(226,156,190,.07),transparent 78%);
  animation:lds-functional-pearl-nacre 13s cubic-bezier(.45,0,.25,1) infinite alternate;
}

body[data-lds-shell][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle::after {
  background:
    radial-gradient(ellipse 60% 46% at 25% 12%,rgba(255,255,255,.50),rgba(255,255,255,.08) 42%,transparent 74%),
    radial-gradient(ellipse 78% 70% at 80% 90%,rgba(71,185,210,.035),transparent 74%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.24);
}

@keyframes lds-functional-pearl-nacre {
  0% { transform:translate3d(-2%,1%,0) rotate(-3deg) scale(1.06); }
  48% { transform:translate3d(2%,-1%,0) rotate(2deg) scale(1.10); }
  100% { transform:translate3d(-1%,2%,0) rotate(5deg) scale(1.07); }
}

@media (prefers-reduced-motion:reduce) {
  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-toggle::before {
    animation:none;
  }
}

/* Spacing relationships — expressive proof.
   The measured 8 / 24 / 48px gaps remain literal. Pearl III chroma gives the
   semantic transition presence without altering the underlying calibration. */
body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band {
  isolation:isolate;
  overflow:hidden;
  padding-inline:clamp(28px,5vw,72px);
  border-top:0;
  background:transparent;
  box-shadow:none;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band::before {
  content:"";
  position:absolute;
  inset:auto 3% -5%;
  height:52%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 34% 54% at 18% 52%,rgba(255,36,151,.22),transparent 74%),
    radial-gradient(ellipse 38% 58% at 82% 54%,rgba(24,214,238,.20),transparent 76%),
    radial-gradient(ellipse 26% 46% at 58% 30%,rgba(255,145,68,.10),transparent 76%);
  opacity:.18;
  filter:blur(58px) saturate(112%);
  animation:spacing-relationship-chroma 18s ease-in-out infinite alternate;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band > * {
  position:relative;
  z-index:1;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band .type2-section-number,
body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band .type2-section-number :is(small,strong) {
  color:var(--lds-type-token-color);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band .spacing-section-head h3 {
  max-width:11ch;
  color:var(--color-text-primary);
  text-shadow:none;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band .spacing-section-head > p {
  color:var(--color-text-secondary);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-grid {
  gap:var(--lds-space-4);
  border-color:transparent;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example {
  position:relative;
  grid-template-rows:64px 210px minmax(78px,auto);
  gap:var(--lds-space-5);
  padding:32px;
  overflow:hidden;
  border:1px solid rgba(203,222,248,.20);
  background:linear-gradient(145deg,#160B20 0%,#111326 58%,#09141C 100%);
  box-shadow:0 30px 64px -48px rgba(7,10,21,.92);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example + .spacing-relationship-example {
  border-left:0;
  border:1px solid rgba(203,222,248,.20);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example + .spacing-relationship-example::before {
  content:none;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example:nth-child(1) {
  background:
    radial-gradient(ellipse 94% 76% at -8% 12%,rgba(226,35,146,.32),transparent 68%),
    linear-gradient(145deg,#180B20 0%,#121126 60%,#09141C 100%);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example:nth-child(2) {
  background:
    radial-gradient(ellipse 100% 78% at 50% -12%,rgba(111,66,187,.28),transparent 70%),
    linear-gradient(145deg,#151025 0%,#0E1525 58%,#071921 100%);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example:nth-child(3) {
  background:
    radial-gradient(ellipse 92% 78% at 108% 88%,rgba(14,198,229,.30),transparent 70%),
    radial-gradient(ellipse 64% 54% at 18% -8%,rgba(255,112,76,.18),transparent 72%),
    linear-gradient(145deg,#18101C 0%,#101524 52%,#071A21 100%);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example header span {
  color:#F7F9FF;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example header strong {
  color:#A9DFFF;
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-proof {
  position:relative;
  height:210px;
  min-height:210px;
  border-color:rgba(196,219,247,.24);
  background:
    radial-gradient(ellipse 90% 72% at 12% 0%,rgba(226,40,145,.10),transparent 70%),
    radial-gradient(ellipse 92% 76% at 100% 100%,rgba(18,192,225,.11),transparent 72%),
    rgba(4,8,17,.44);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 52px -36px rgba(0,0,0,.88);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-proof i {
  height:16px;
  border-radius:2px;
  background:linear-gradient(90deg,
    rgba(236,51,153,.80) 0%,
    rgba(111,62,188,.86) 36%,
    rgba(29,135,218,.88) 70%,
    rgba(17,207,231,.82) 100%);
  box-shadow:0 8px 22px -12px rgba(31,198,228,.82);
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example:nth-child(2) .spacing-relationship-proof i {
  background:linear-gradient(90deg,rgba(113,64,190,.82),rgba(31,147,220,.86) 64%,rgba(18,207,231,.78));
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example:nth-child(3) .spacing-relationship-proof i {
  background:linear-gradient(90deg,rgba(255,105,85,.82),rgba(226,42,147,.76) 42%,rgba(20,199,230,.84));
}

body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example > p {
  color:#D8DFEA;
}

@keyframes spacing-relationship-chroma {
  0% { transform:translate3d(-2%,1%,0) rotate(-1deg) scale(1.02); opacity:.76; }
  52% { transform:translate3d(2%,-1%,0) rotate(1deg) scale(1.06); opacity:1; }
  100% { transform:translate3d(-1%,2%,0) rotate(2deg) scale(1.04); opacity:.86; }
}

@media (max-width:840px) {
  body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band {
    padding-inline:clamp(20px,5vw,36px);
  }

  body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-example {
    grid-template-rows:auto 210px auto;
    padding:28px;
  }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="foundation-spacing"][data-lds-shell-standard="nacreous"] .spacing-relationship-band::before {
    animation:none;
  }
}

/* Grid foundation — source-reconciled editorial contract.
   The page distinguishes the alignment grid, content well, and visual bleed;
   cards are reserved for comparisons that require containment. */
.foundation-grid-editorial-grid {
  grid-template-columns:1fr;
}

.foundation-grid-editorial-page {
  display:grid;
  grid-column:1 / -1;
  gap:0;
  min-width:0;
}

.grid-foundation-hero {
  display:grid;
  gap:clamp(36px,6vw,76px);
  min-height:0;
}

.grid-foundation-hero .foundation-editorial-hero-copy {
  max-width:1080px;
}

.grid-foundation-hero .foundation-editorial-hero-title {
  max-width:14ch;
}

.grid-foundation-hero .foundation-editorial-hero-copy > p {
  max-width:72ch;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:clamp(19px,1.55vw,23px);
  line-height:1.52;
}

.grid-hero-contract {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-top:1px solid var(--color-border-subtle);
}

.grid-hero-contract span {
  display:grid;
  gap:var(--lds-space-2);
  min-width:0;
  padding:var(--lds-space-5) var(--lds-space-4) 0 0;
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.grid-hero-contract strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(30px,3.2vw,48px);
  font-weight:820;
  line-height:1;
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
}

.grid-hero-keylines {
  display:grid;
  box-sizing:border-box;
  grid-template-columns:repeat(var(--grid-count),minmax(0,1fr));
  gap:var(--lds-grid-gutter-desktop);
  min-height:clamp(120px,14vw,190px);
  padding-inline:var(--lds-grid-margin-desktop);
  border-block:1px solid var(--color-border-subtle);
  background:
    radial-gradient(ellipse 54% 120% at 0% 52%,color-mix(in srgb,#ec3a9a 12%,transparent),transparent 72%),
    radial-gradient(ellipse 56% 120% at 100% 50%,color-mix(in srgb,#20cfe7 11%,transparent),transparent 74%);
}

.grid-hero-keylines i {
  min-width:0;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 16%,transparent),color-mix(in srgb,#20cfe7 6%,transparent));
  border-inline:1px solid color-mix(in srgb,var(--color-accent) 16%,transparent);
}

.grid-editorial-band {
  display:grid;
  gap:clamp(36px,5.5vw,72px);
  min-width:0;
}

.grid-section-head h3 {
  max-width:12ch;
}

.grid-viewport-ledger,
.grid-span-ledger {
  display:grid;
  min-width:0;
  border-top:1px solid var(--color-border-subtle);
}

.grid-viewport-ledger article {
  display:grid;
  grid-template-columns:minmax(100px,.16fr) minmax(150px,.22fr) minmax(120px,.18fr) minmax(0,.44fr);
  gap:clamp(20px,3vw,48px);
  align-items:baseline;
  min-width:0;
  padding:clamp(22px,2.8vw,34px) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.grid-viewport-ledger article > span {
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.grid-viewport-ledger article > strong,
.grid-viewport-ledger article > b {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  line-height:1.08;
  font-variant-numeric:tabular-nums;
}

.grid-viewport-ledger article > strong {
  font-size:clamp(21px,2vw,30px);
}

.grid-viewport-ledger article > b {
  font-size:clamp(28px,3vw,42px);
  letter-spacing:-.035em;
}

.grid-viewport-ledger article > b small {
  color:var(--color-text-muted);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.grid-viewport-ledger article > p,
.grid-doctrine-note {
  max-width:58ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(15px,1.2vw,18px);
  line-height:1.55;
}

.grid-doctrine-note strong {
  color:var(--color-text-primary);
}

.grid-stage-collection {
  display:grid;
  gap:clamp(28px,4vw,48px);
  min-width:0;
}

.grid-stage {
  display:grid;
  gap:var(--lds-space-5);
  min-width:0;
  padding-block:clamp(24px,3vw,36px);
  border-block:1px solid var(--color-border-subtle);
}

.grid-stage + .grid-stage {
  border-top:0;
}

.grid-stage header {
  display:grid;
  grid-template-columns:minmax(140px,.32fr) minmax(0,.68fr);
  gap:var(--lds-space-5);
  align-items:end;
}

.grid-stage header > div {
  display:grid;
  gap:var(--lds-space-2);
}

.grid-stage header span,
.grid-stage header dt {
  color:var(--color-text-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.grid-stage header strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(24px,2.8vw,38px);
  line-height:1;
}

.grid-stage header dl {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--lds-space-4);
  margin:0;
}

.grid-stage header dl div {
  display:grid;
  gap:4px;
}

.grid-stage header :is(dt,dd) {
  margin:0;
}

.grid-stage header dd {
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:13px;
}

.grid-stage-frame {
  display:grid;
  box-sizing:border-box;
  grid-template-columns:repeat(var(--grid-count),minmax(0,1fr));
  gap:var(--grid-stage-gap);
  min-height:clamp(132px,15vw,210px);
  padding-inline:var(--grid-stage-margin);
  background:
    linear-gradient(90deg,color-mix(in srgb,#ec3a9a 6%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,#20cfe7 7%,transparent));
  border-block:1px solid var(--color-border-subtle);
}

.grid-stage-frame i {
  display:grid;
  place-items:end center;
  min-width:0;
  padding-bottom:var(--lds-space-3);
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:10px;
  font-style:normal;
  background:linear-gradient(180deg,color-mix(in srgb,var(--color-accent) 18%,transparent),color-mix(in srgb,#20cfe7 7%,transparent));
  border-inline:1px solid color-mix(in srgb,var(--color-accent) 18%,transparent);
}

/* Pearl III grid illumination.
   Dark-mode teaching specimens carry vivid chroma while their geometry stays
   exact: the light changes, never the measured columns, margins, or gutters. */
body[data-route="foundation-grid"][data-color-theme="dark"] :is(.grid-hero-keylines,.grid-stage-frame) {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(ellipse 36% 110% at 4% 52%,rgba(255,34,151,.025),transparent 74%),
    radial-gradient(ellipse 38% 118% at 48% 22%,rgba(132,62,205,.02),transparent 76%),
    radial-gradient(ellipse 36% 112% at 96% 58%,rgba(16,209,234,.025),transparent 74%),
    linear-gradient(90deg,rgba(28,8,29,.94),rgba(13,14,34,.96) 48%,rgba(5,27,35,.94));
  border-color:rgba(226,204,245,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 26px 58px -48px rgba(238,38,151,.09),
    0 28px 62px -50px rgba(16,203,232,.08);
}

body[data-route="foundation-grid"][data-color-theme="dark"] :is(.grid-hero-keylines,.grid-stage-frame)::before {
  content:"";
  position:absolute;
  inset:-38% -12%;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 24% 48% at 18% 48%,rgba(255,49,157,.42),transparent 76%),
    radial-gradient(ellipse 22% 46% at 54% 36%,rgba(160,77,223,.30),transparent 78%),
    radial-gradient(ellipse 22% 46% at 86% 56%,rgba(31,215,238,.34),transparent 76%),
    radial-gradient(ellipse 14% 34% at 32% 34%,rgba(255,141,75,.16),transparent 78%);
  filter:blur(26px) saturate(112%);
  animation:grid-pearl-iii-light 14s ease-in-out infinite alternate;
}

body[data-route="foundation-grid"][data-color-theme="dark"] :is(.grid-hero-keylines,.grid-stage-frame) i {
  position:relative;
  z-index:1;
  color:rgba(246,240,255,.84);
  background:linear-gradient(180deg,rgba(255,72,22,.78),rgba(255,37,101,.74));
  border-color:rgba(246,209,224,.24);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -24px 44px rgba(3,7,19,.24),
    0 0 24px -22px rgba(255,82,106,.62);
  backdrop-filter:blur(8px) saturate(130%);
}

body[data-route="foundation-grid"][data-color-theme="light"] :is(.grid-hero-keylines,.grid-stage-frame) {
  background:transparent;
  border-color:rgba(74,94,122,.24);
  box-shadow:none;
}

body[data-route="foundation-grid"][data-color-theme="light"] :is(.grid-hero-keylines,.grid-stage-frame) i {
  position:relative;
  z-index:1;
  color:rgba(255,255,255,.94);
  background:linear-gradient(180deg,rgba(255,72,22,.90),rgba(255,37,101,.84));
  border-color:rgba(197,48,93,.36);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -18px 32px rgba(111,18,51,.10),
    0 16px 34px -28px rgba(255,45,105,.58);
}

@keyframes grid-pearl-iii-light {
  0% { transform:translate3d(-2%,1%,0) scale(1.02); opacity:.05; }
  52% { transform:translate3d(2%,-1%,0) scale(1.06); opacity:.08; }
  100% { transform:translate3d(-1%,2%,0) scale(1.04); opacity:.06; }
}

@media (prefers-reduced-motion:reduce) {
  body[data-route="foundation-grid"] :is(.grid-hero-keylines,.grid-stage-frame)::before {
    animation:none;
  }
}

.grid-span-ledger article {
  display:grid;
  grid-template-columns:minmax(160px,.28fr) minmax(0,.72fr);
  gap:clamp(24px,4vw,56px);
  align-items:center;
  min-width:0;
  padding:var(--lds-space-5) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.grid-span-ledger header {
  display:grid;
  gap:var(--lds-space-2);
}

.grid-span-ledger header strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(22px,2.2vw,32px);
  line-height:1.06;
}

.grid-span-ledger header span {
  color:var(--color-text-secondary);
  font-size:15px;
}

.grid-span-track {
  display:grid;
  grid-template-columns:repeat(var(--grid-count),minmax(0,1fr));
  gap:6px;
  min-width:0;
}

.grid-span-track i {
  grid-column:span var(--grid-span);
  display:grid;
  place-items:center;
  min-width:0;
  min-height:56px;
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-style:normal;
  background:linear-gradient(115deg,color-mix(in srgb,#7d55d7 18%,var(--color-bg-surface)),color-mix(in srgb,#20cfe7 12%,var(--color-bg-surface)));
  border:1px solid color-mix(in srgb,var(--color-accent) 24%,var(--color-border-subtle));
}

body[data-route="foundation-grid"][data-color-theme="dark"] .grid-span-track i {
  color:rgba(251,247,255,.92);
  background:linear-gradient(180deg,rgba(255,72,22,.88),rgba(255,37,101,.84));
  border-color:rgba(246,210,224,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    inset 0 -20px 38px rgba(8,8,28,.27),
    0 20px 42px -36px rgba(223,46,134,.66);
}

body[data-route="foundation-grid"][data-color-theme="light"] .grid-span-track i {
  color:#fff;
  background:linear-gradient(180deg,rgba(255,72,22,.94),rgba(255,37,101,.90));
  border-color:rgba(197,48,93,.38);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    0 18px 38px -30px rgba(255,45,105,.56);
}

.grid-mode-comparison {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--lds-space-4);
}

.grid-mode-comparison article {
  display:grid;
  align-content:start;
  gap:var(--lds-space-3);
  min-width:0;
  padding:var(--lds-space-5);
  border:1px solid var(--color-border-subtle);
  background:color-mix(in srgb,var(--color-bg-surface) 58%,transparent);
}

.grid-mode-comparison span,
.grid-adaptation-promises strong {
  color:var(--color-text-muted);
  font-size:11px;
  font-weight:800;
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.grid-mode-comparison strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(22px,2.2vw,30px);
  line-height:1.08;
}

.grid-mode-comparison p,
.grid-adaptation-promises p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.55;
}

.grid-well-proof {
  min-width:0;
}

.grid-bleed-field {
  display:grid;
  gap:var(--lds-space-4);
  min-width:0;
  padding:clamp(28px,5vw,72px) clamp(20px,4vw,56px);
  color:#F7F9FF;
  background:
    radial-gradient(ellipse 64% 100% at 0% 20%,rgba(231,43,146,.24),transparent 72%),
    radial-gradient(ellipse 64% 100% at 100% 82%,rgba(25,205,232,.24),transparent 72%),
    linear-gradient(135deg,#100C1C,#0A1720);
  box-shadow:0 34px 74px -54px rgba(2,6,14,.92);
}

.grid-bleed-field > span,
.grid-width-frame > span {
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  width:max-content;
  color:#E9EEF7;
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.grid-bleed-field > span::before,
.grid-width-frame > span::before {
  width:3px;
  height:18px;
  border-radius:2px;
  background:linear-gradient(180deg,#FF4816,#FF2565);
  box-shadow:0 0 16px -5px rgba(255,37,101,.72);
  content:"";
}

.grid-width-frame {
  display:grid;
  gap:var(--lds-space-4);
  width:min(88%,1280px);
  margin-inline:auto;
  padding:clamp(20px,3vw,36px);
  border:1px solid rgba(193,217,247,.26);
  background:rgba(7,13,25,.42);
}

.grid-content-well {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:var(--lds-space-3) var(--lds-space-5);
  width:min(96.25%,1232px);
  margin-inline:auto;
  padding:clamp(24px,4vw,52px);
  border-inline:2px solid rgba(90,205,235,.70);
  background:linear-gradient(90deg,rgba(126,76,211,.16),rgba(238,50,151,.11) 48%,rgba(22,201,230,.15));
}

.grid-content-well strong {
  color:#F7F9FF;
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(24px,3vw,44px);
  line-height:1.05;
}

.grid-content-well b {
  color:#A9E8FF;
  font-family:var(--lds-font-mono);
  font-size:clamp(16px,1.8vw,24px);
}

.grid-content-well p {
  grid-column:1 / -1;
  max-width:54ch;
  margin:0;
  color:#D6DEEC;
  font-size:16px;
  line-height:1.55;
}

body[data-route="foundation-grid"][data-color-theme="dark"] .grid-bleed-field {
  background:linear-gradient(180deg,rgba(255,72,22,.075),rgba(255,37,101,.045));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}

body[data-route="foundation-grid"][data-color-theme="dark"] .grid-width-frame {
  background:linear-gradient(180deg,rgba(255,72,22,.15),rgba(255,37,101,.095));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 22px 44px -38px rgba(255,37,101,.34);
}

body[data-route="foundation-grid"][data-color-theme="dark"] .grid-content-well {
  border:1px solid rgba(79,18,31,.92);
  background:
    linear-gradient(180deg,rgba(255,72,22,.82),rgba(255,37,101,.70)),
    rgba(31,14,22,.72);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.16),
    0 24px 52px -40px rgba(225,48,133,.58);
}

body[data-route="foundation-grid"][data-color-theme="light"] .grid-bleed-field {
  background:linear-gradient(180deg,rgba(255,72,22,.065),rgba(255,37,101,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.50);
}

body[data-route="foundation-grid"][data-color-theme="light"] .grid-bleed-field > span,
body[data-route="foundation-grid"][data-color-theme="light"] .grid-width-frame > span {
  color:#303746;
}

body[data-route="foundation-grid"][data-color-theme="light"] .grid-width-frame {
  background:linear-gradient(180deg,rgba(255,72,22,.135),rgba(255,37,101,.075));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.62),
    0 24px 48px -40px rgba(217,52,91,.28);
}

body[data-route="foundation-grid"][data-color-theme="light"] .grid-content-well {
  border:1px solid rgba(163,39,67,.68);
  background:linear-gradient(180deg,rgba(255,72,22,.94),rgba(255,37,101,.84));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    0 24px 52px -34px rgba(255,45,105,.52);
}

body[data-route="foundation-grid"][data-color-theme="light"] .grid-content-well :is(strong,b,p) {
  color:#fff;
}

body[data-route="foundation-grid"] .grid-bleed-field {
  border:1px solid transparent;
  border-image:linear-gradient(180deg,rgba(255,72,22,.42),rgba(255,37,101,.34)) 1;
}

body[data-route="foundation-grid"] .grid-width-frame {
  border:1px solid transparent;
  border-image:linear-gradient(180deg,rgba(255,72,22,.70),rgba(255,37,101,.58)) 1;
}

.grid-bleed-ledger {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

.grid-bleed-ledger div {
  display:grid;
  gap:var(--lds-space-2);
  min-width:0;
  padding:var(--lds-space-5) var(--lds-space-3);
}

.grid-bleed-ledger div + div {
  border-left:1px solid var(--color-border-subtle);
}

.grid-bleed-ledger strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(20px,2.2vw,32px);
  line-height:1;
}

.grid-bleed-ledger span {
  color:var(--color-text-muted);
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.grid-adaptation-promises {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-top:1px solid var(--color-border-subtle);
}

.grid-adaptation-promises article {
  display:grid;
  gap:var(--lds-space-3);
  min-width:0;
  padding:var(--lds-space-5) var(--lds-space-5) var(--lds-space-5) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

.grid-adaptation-promises article:nth-child(even) {
  padding-right:0;
  padding-left:var(--lds-space-5);
  border-left:1px solid var(--color-border-subtle);
}

.grid-accessibility-band blockquote {
  max-width:22ch;
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(38px,5vw,72px);
  font-weight:820;
  line-height:1.05;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
}

@media (max-width:900px) {
  .grid-viewport-ledger article {
    grid-template-columns:minmax(90px,.22fr) minmax(0,.78fr);
  }

  .grid-viewport-ledger article > b,
  .grid-viewport-ledger article > p {
    grid-column:2;
  }

  .grid-stage header,
  .grid-span-ledger article {
    grid-template-columns:1fr;
  }

  .grid-mode-comparison {
    grid-template-columns:1fr;
  }
}

@media (max-width:640px) {
  .grid-hero-contract {
    grid-template-columns:repeat(2,minmax(0,1fr));
    row-gap:var(--lds-space-5);
  }

  .grid-hero-keylines {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:var(--lds-grid-gutter-mobile);
    padding-inline:var(--lds-grid-margin-mobile);
  }

  .grid-hero-keylines i:nth-child(n+5) {
    display:none;
  }

  .grid-viewport-ledger article {
    grid-template-columns:1fr;
    gap:var(--lds-space-3);
  }

  .grid-viewport-ledger article > b,
  .grid-viewport-ledger article > p {
    grid-column:auto;
  }

  .grid-stage header dl {
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .grid-stage-frame {
    min-height:124px;
    /* Preserve all twelve teaching columns inside the narrow documentation
       viewport. The measured production gutter remains stated in the ledger;
       this illustration scales its keylines instead of forcing page overflow. */
    gap:min(var(--grid-stage-gap),4px);
    padding-inline:min(var(--grid-stage-margin),16px);
  }

  .grid-span-track {
    gap:3px;
  }

  .grid-span-track i {
    min-height:48px;
  }

  .grid-content-well {
    grid-template-columns:1fr;
  }

  .grid-content-well p {
    grid-column:auto;
  }

  .grid-bleed-ledger {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .grid-bleed-ledger div + div {
    border-left:0;
  }

  .grid-bleed-ledger div:nth-child(even) {
    border-left:1px solid var(--color-border-subtle);
  }

  .grid-bleed-ledger div:nth-child(n+3) {
    border-top:1px solid var(--color-border-subtle);
  }

  .grid-adaptation-promises {
    grid-template-columns:1fr;
  }

  .grid-adaptation-promises article,
  .grid-adaptation-promises article:nth-child(even) {
    padding:var(--lds-space-5) 0;
    border-left:0;
  }
}

body[data-route="foundation-iconography"][data-lds-shell="shared"] .foundation-iconography > header {
  display:none;
}

body[data-route="foundation-radius-border"] .radius-border-system {
  display:grid;
  gap:clamp(48px,6vw,80px);
}

body[data-route="foundation-radius-border"] :is(.radius-role-section,.border-role-section) {
  display:grid;
  gap:28px;
}

body[data-route="foundation-radius-border"] .radius-role-heading {
  display:grid;
  grid-template-columns:minmax(120px,.22fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}

body[data-route="foundation-radius-border"] .radius-role-heading > span {
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body[data-route="foundation-radius-border"] .radius-role-heading-copy {
  display:grid;
  gap:16px;
}

body[data-route="foundation-radius-border"] .radius-role-heading-copy h3 {
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(36px,4.6vw,64px);
  font-weight:800;
  line-height:1;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

body[data-route="foundation-radius-border"] .radius-role-heading-copy p {
  max-width:68ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:17px;
  line-height:1.58;
}

body[data-route="foundation-radius-border"] .radius-comparison-instrument {
  display:grid;
  gap:clamp(32px,4vw,48px);
}

body[data-route="foundation-radius-border"] .radius-corner-comparison {
  display:grid;
  gap:24px;
  padding:clamp(24px,3vw,36px);
  border:1px solid var(--color-border-subtle);
  background:color-mix(in srgb,var(--color-bg-surface) 54%,transparent);
}

body[data-route="foundation-radius-border"] .radius-corner-intro {
  display:grid;
  grid-template-columns:minmax(160px,.28fr) minmax(0,1fr);
  gap:24px;
  align-items:start;
}

body[data-route="foundation-radius-border"] .radius-corner-intro > span {
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:13px;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body[data-route="foundation-radius-border"] .radius-corner-intro p {
  max-width:64ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:15px;
  line-height:1.55;
}

body[data-route="foundation-radius-border"] .radius-corner-track {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .radius-corner-track figure {
  display:grid;
  gap:16px;
  min-width:0;
  margin:0;
  padding:24px clamp(12px,2vw,24px);
}

body[data-route="foundation-radius-border"] .radius-corner-track figure + figure {
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .radius-corner-frame {
  position:relative;
  width:min(100%,124px);
  aspect-ratio:1;
  justify-self:center;
}

body[data-route="foundation-radius-border"] .radius-corner-frame::before,
body[data-route="foundation-radius-border"] .radius-corner-frame::after {
  content:"";
  position:absolute;
  z-index:0;
  background:color-mix(in srgb,var(--color-border-subtle) 80%,transparent);
}

body[data-route="foundation-radius-border"] .radius-corner-frame::before {
  inset:0 0 auto;
  height:1px;
}

body[data-route="foundation-radius-border"] .radius-corner-frame::after {
  inset:0 0 0 auto;
  width:1px;
}

body[data-route="foundation-radius-border"] .radius-corner-frame > span {
  position:absolute;
  z-index:1;
  inset:16px 16px 0 0;
  border:1px solid var(--color-border-standard,var(--color-border-subtle));
  border-bottom:0;
  border-left:0;
  border-top-right-radius:var(--radius-detail);
  background:
    linear-gradient(145deg,
      color-mix(in srgb,var(--color-bg-elevated) 90%,transparent),
      color-mix(in srgb,var(--color-bg-surface) 68%,transparent));
  box-shadow:inset -1px 1px 0 color-mix(in srgb,#fff 14%,transparent);
}

body[data-route="foundation-radius-border"] .radius-corner-track figcaption {
  display:grid;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:baseline;
}

body[data-route="foundation-radius-border"] .radius-corner-track strong,
body[data-route="foundation-radius-border"] .radius-role-applications strong,
body[data-route="foundation-radius-border"] .border-role-scale strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:18px;
  line-height:1.15;
}

body[data-route="foundation-radius-border"] .radius-corner-track code,
body[data-route="foundation-radius-border"] .radius-role-applications code {
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:12px;
}

body[data-route="foundation-radius-border"] .radius-role-applications {
  display:grid;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .radius-application-row {
  display:grid;
  grid-template-columns:72px minmax(190px,.7fr) minmax(120px,.42fr) minmax(260px,1fr);
  gap:clamp(20px,3vw,40px);
  align-items:center;
  min-width:0;
  padding:24px 0;
}

body[data-route="foundation-radius-border"] .radius-application-row + .radius-application-row {
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .radius-application-row > code {
  color:var(--color-text-primary);
  font-size:14px;
  font-weight:700;
}

body[data-route="foundation-radius-border"] .radius-application-demo {
  display:flex;
  align-items:center;
  min-width:0;
  min-height:72px;
}

body[data-route="foundation-radius-border"] .radius-application-demo > span {
  border:1px solid var(--color-border-standard,var(--color-border-subtle));
  border-radius:var(--radius-role);
  background:
    linear-gradient(140deg,
      color-mix(in srgb,var(--color-bg-elevated) 86%,transparent),
      color-mix(in srgb,var(--color-bg-surface) 72%,transparent));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);
}

body[data-route="foundation-radius-border"] .radius-application-row.structural .radius-application-demo > span {
  display:block;
  width:100%;
  height:54px;
  border-inline:0;
}

body[data-route="foundation-radius-border"] .radius-application-row.compact .radius-application-demo > span {
  display:inline-grid;
  place-items:center;
  min-width:42px;
  min-height:24px;
  padding:2px 8px;
  color:var(--color-text-secondary);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
}

body[data-route="foundation-radius-border"] .radius-application-row.small .radius-application-demo {
  gap:8px;
}

body[data-route="foundation-radius-border"] .radius-application-row.small .radius-application-demo > span {
  display:inline-grid;
  place-items:center;
  min-width:72px;
  min-height:40px;
  padding:8px 14px;
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:700;
}

body[data-route="foundation-radius-border"] .radius-application-row.small .radius-application-demo > span:first-child {
  color:var(--color-text-primary);
  border-color:var(--color-border-strong);
}

body[data-route="foundation-radius-border"] .radius-application-row.medium .radius-application-demo > span {
  display:flex;
  align-items:center;
  width:100%;
  max-width:240px;
  min-height:48px;
  padding:0 16px;
  color:var(--color-text-muted);
  font-size:13px;
}

body[data-route="foundation-radius-border"] .radius-application-row.large .radius-application-demo > span {
  display:block;
  height:8px;
  border:0;
  background:color-mix(in srgb,var(--color-text-muted) 34%,transparent);
  box-shadow:none;
}

body[data-route="foundation-radius-border"] .radius-application-row.large .radius-application-demo {
  display:grid;
  align-content:center;
  gap:8px;
  width:100%;
  max-width:240px;
  min-height:76px;
  padding:16px;
  border:1px solid var(--color-border-standard,var(--color-border-subtle));
  border-radius:var(--radius-role);
  background:color-mix(in srgb,var(--color-bg-surface) 68%,transparent);
}

body[data-route="foundation-radius-border"] .radius-application-row.large .radius-application-demo > span:nth-child(1) {
  width:72%;
}

body[data-route="foundation-radius-border"] .radius-application-row.large .radius-application-demo > span:nth-child(2) {
  width:100%;
}

body[data-route="foundation-radius-border"] .radius-application-row.large .radius-application-demo > span:nth-child(3) {
  width:54%;
}

body[data-route="foundation-radius-border"] .radius-application-row.capsule .radius-application-demo > span {
  display:inline-grid;
  place-items:center;
  min-width:156px;
  min-height:46px;
  padding:10px 20px;
  color:var(--color-text-primary);
  font-size:13px;
  font-weight:700;
}

body[data-route="foundation-radius-border"] .radius-role-applications p,
body[data-route="foundation-radius-border"] .border-role-scale p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:14px;
  line-height:1.5;
}

body[data-route="foundation-radius-border"] .border-role-scale {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:20px;
}

body[data-route="foundation-radius-border"] .border-role-sample {
  display:grid;
  gap:12px;
  min-width:0;
}

body[data-route="foundation-radius-border"] .border-role-sample > span {
  display:block;
  height:112px;
  border-radius:var(--lds-radius-md);
  background:color-mix(in srgb,var(--color-bg-surface) 72%,transparent);
}

body[data-route="foundation-radius-border"] .border-role-sample.subtle > span {
  border:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .border-role-sample.standard > span {
  border:1px solid var(--color-border-standard,var(--color-border-strong));
}

body[data-route="foundation-radius-border"] .border-role-sample.strong > span {
  border:2px solid var(--color-border-strong);
}

body[data-route="foundation-radius-border"] .border-role-sample.focus > span {
  border:1px solid var(--color-border-standard,var(--color-border-subtle));
  box-shadow:0 0 0 3px var(--color-focus-ring);
}

body[data-route="foundation-radius-border"] .radius-border-pairing {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .radius-border-pairing > div {
  display:grid;
  gap:14px;
  min-width:0;
  padding:clamp(28px,4vw,48px);
}

body[data-route="foundation-radius-border"] .radius-border-pairing > div + div {
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-radius-border"] .radius-border-pairing span {
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body[data-route="foundation-radius-border"] .radius-border-pairing strong {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(24px,2.6vw,36px);
  line-height:1.08;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

body[data-route="foundation-radius-border"] .radius-border-pairing p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.58;
}

body[data-route="foundation-dark-mode"] .foundation-darkmode-demo {
  grid-template-columns:repeat(2,minmax(0,1fr));
}

body[data-route="foundation-dark-mode"] .darkmode-card {
  min-height:220px;
  padding:clamp(28px,4vw,48px);
  border-radius:var(--lds-radius-lg);
}

body[data-route="foundation-dark-mode"] .darkmode-card.light {
  color:#374151;
  border-color:rgba(77,98,125,.24);
  background:
    linear-gradient(140deg,rgba(255,255,255,.96),rgba(227,235,246,.90)),
    #eef2f7;
  box-shadow:0 24px 50px -34px rgba(30,43,60,.42);
}

body[data-route="foundation-dark-mode"] .darkmode-card.light strong {
  color:#121722;
}

body[data-route="foundation-dark-mode"] .darkmode-card.dark {
  color:#cbd5e3;
  border-color:rgba(169,198,229,.22);
  background:
    linear-gradient(140deg,rgba(50,57,76,.96),rgba(10,18,27,.94)),
    #0b1018;
  box-shadow:0 26px 56px -34px rgba(33,166,199,.30);
}

body[data-route="foundation-dark-mode"] .darkmode-card.dark strong {
  color:#f8fbff;
}

body[data-route="foundation-dark-mode"] .darkmode-steps {
  grid-column:1 / -1;
}

/* Canonical numbered example rows — global editorial demonstration contract.
   Every authored example receives one full-width row, a visible number,
   an editorial thesis, one primary stage, and an explanatory state grammar.
   Route styles may change the specimen inside the stage, but may not collapse
   examples into unequal cards or invent a second enclosing frame. */
.lds-example-series {
  display:grid;
  gap:0;
  width:100%;
  min-width:0;
}

.lds-example-row {
  display:grid;
  width:100%;
  min-width:0;
  overflow:visible;
  border:0;
  border-top:var(--lds-border-width-subtle) solid var(--color-border-subtle);
  background:transparent;
  box-shadow:none;
}

.lds-example-row + .lds-example-row {
  margin-top:var(--lds-editorial-gap-section);
}

.lds-example-heading {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:var(--lds-editorial-gap-stage);
  align-items:start;
  padding:var(--lds-editorial-gap-stage) var(--lds-editorial-inset-stage);
}

.lds-example-identity,
.lds-example-thesis {
  display:grid;
  min-width:0;
}

.lds-example-identity {
  gap:var(--lds-space-2);
}

.lds-example-number,
.lds-example-kind {
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.lds-example-number {
  color:var(--lds-selection-accent);
}

.lds-numero-sign {
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  letter-spacing:0;
  text-transform:none;
}

.lds-example-kind {
  color:var(--color-guide-text);
}

.lds-example-thesis {
  gap:var(--lds-space-3);
  max-width:var(--lds-container-standard);
}

.lds-example-thesis h4 {
  display:block;
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:var(--lds-editorial-title-demonstration);
  line-height:var(--lds-line-tight);
  letter-spacing:var(--lds-heading-tracking-section);
}

.lds-example-thesis .lds-example-duration {
  display:inline;
  margin-inline-start:var(--lds-space-3);
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-sm);
  font-weight:var(--font-weight-semibold);
  line-height:var(--lds-line-body);
  letter-spacing:var(--lds-label-tracking);
}

.lds-example-thesis p {
  max-width:var(--lds-container-narrow);
  margin:0;
  color:var(--color-text-secondary);
  font-size:var(--lds-font-base);
  line-height:var(--lds-line-body);
}

.lds-example-thesis .lds-example-statement {
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:var(--lds-font-xl);
  font-weight:var(--font-weight-semibold);
  line-height:var(--lds-line-tight);
}

.lds-example-stage {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--lds-editorial-gap-stage);
  box-sizing:border-box;
  width:100%;
  min-width:0;
  min-height:var(--lds-editorial-stage-example-min);
  padding:var(--lds-editorial-inset-stage);
}

.lds-example-stage-intro {
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:var(--lds-editorial-gap-stage);
  align-items:start;
  justify-self:stretch;
  width:auto;
  min-width:0;
}

.lds-example-stage-intro span {
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.lds-example-stage-intro p {
  max-width:var(--lds-container-narrow);
  margin:0;
  color:var(--color-text-secondary);
  font-size:var(--lds-font-sm);
  line-height:var(--lds-line-body);
}

.lds-example-grammar {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  width:100%;
  margin:0;
  padding-inline:0;
  background:transparent;
}

.lds-example-grammar > div {
  display:grid;
  gap:var(--lds-space-2);
  min-width:0;
  padding:var(--lds-space-5) var(--lds-editorial-inset-stage) var(--lds-editorial-gap-stage);
}

.lds-example-grammar > div + div {
  border-left:var(--lds-border-width-subtle) solid var(--color-border-subtle);
}

.lds-example-grammar dt {
  color:var(--lds-selection-accent);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.lds-example-grammar dd {
  margin:0;
  color:var(--color-text-secondary);
  font-size:var(--lds-font-base);
  line-height:var(--lds-line-body);
}

@media (max-width:720px) {
  .lds-example-heading {
    grid-template-columns:minmax(0,1fr);
  }

  .lds-example-stage-intro {
    grid-template-columns:minmax(0,1fr);
  }

  .lds-example-grammar {
    grid-template-columns:minmax(0,1fr);
  }

  .lds-example-grammar > div + div {
    border-top:var(--lds-border-width-subtle) solid var(--color-border-subtle);
    border-left:0;
  }
}

/* Shared application-guide band. It concludes a specification section with
   a clear decision rule and a vertically readable set of use cases. */
.lds-usage-guide {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:var(--lds-editorial-gap-thesis);
  align-items:start;
  width:100%;
  padding:var(--lds-editorial-gap-section) var(--lds-editorial-inset-stage);
  border-block:var(--lds-border-width-subtle) solid var(--color-border-subtle);
}

.lds-usage-guide > header {
  display:grid;
  grid-template-columns:minmax(0,.88fr) minmax(0,1fr);
  column-gap:var(--lds-editorial-gap-thesis);
  row-gap:var(--lds-space-4);
  align-items:end;
}

.lds-usage-guide > header > span {
  grid-column:1 / -1;
  color:var(--lds-selection-accent);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.lds-usage-guide h4 {
  max-width:var(--lds-container-narrow);
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:var(--lds-editorial-title-demonstration);
  line-height:var(--lds-line-tight);
  letter-spacing:var(--lds-heading-tracking-section);
}

.lds-usage-guide p {
  max-width:var(--lds-container-narrow);
  margin:0;
  color:var(--color-text-secondary);
  font-size:var(--lds-font-base);
  line-height:var(--lds-line-body);
}

.lds-usage-guide ul {
  counter-reset:lds-usage-case;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  align-items:stretch;
  margin:0;
  padding:0;
  border-block:var(--lds-border-width-subtle) solid var(--color-border-subtle);
  list-style:none;
}

.lds-usage-guide li {
  counter-increment:lds-usage-case;
  display:grid;
  grid-template-columns:
    minmax(8.5rem,.32fr)
    minmax(0,1fr)
    clamp(4rem,5.5vw,6rem);
  column-gap:clamp(var(--lds-space-4),3vw,var(--lds-space-7));
  row-gap:var(--lds-space-2);
  align-items:center;
  min-height:clamp(8.5rem,12vw,11rem);
  margin:0;
  padding:var(--lds-space-6) 0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.lds-usage-guide li + li {
  border-top:var(--lds-border-width-subtle) solid var(--color-border-subtle);
}

.lds-usage-guide li::after {
  content:"";
  grid-column:3;
  grid-row:1 / span 2;
  width:100%;
  aspect-ratio:150 / 64;
  background:var(--color-text-secondary);
  opacity:.34;
  -webkit-mask-position:center;
  -webkit-mask-repeat:no-repeat;
  -webkit-mask-size:contain;
  -webkit-mask-image:url("./decorative/bullet-flourish-right.svg");
  mask-position:center;
  mask-repeat:no-repeat;
  mask-size:contain;
  mask-image:url("./decorative/bullet-flourish-right.svg");
}

.lds-usage-guide li small {
  grid-column:1;
  grid-row:1 / span 2;
  display:grid;
  gap:var(--lds-space-2);
  align-content:center;
  color:var(--lds-selection-accent);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-xs);
  font-weight:var(--font-weight-bold);
  letter-spacing:var(--lds-label-tracking);
  text-transform:uppercase;
}

.lds-usage-guide li small::before {
  content:counter(lds-usage-case,decimal-leading-zero);
  color:var(--color-text-muted);
}

.lds-usage-guide li strong {
  grid-column:2;
  align-self:end;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(var(--lds-font-xl),2vw,var(--lds-editorial-title-example));
  line-height:var(--lds-line-tight);
  letter-spacing:var(--lds-heading-tracking-section);
}

.lds-usage-guide li span {
  grid-column:2;
  align-self:start;
  max-width:var(--lds-container-narrow);
  color:var(--color-text-secondary);
  font-size:var(--lds-font-base);
  line-height:var(--lds-line-body);
}

body[data-route="foundation-motion"] .lds-usage-guide li + li {
  margin-block-start:0;
}

@media (max-width:720px) {
  .lds-usage-guide {
    grid-template-columns:minmax(0,1fr);
  }

  .lds-usage-guide > header {
    grid-template-columns:minmax(0,1fr);
  }

  .lds-usage-guide > header > span {
    grid-column:1;
  }

  .lds-usage-guide ul {
    grid-template-columns:minmax(0,1fr);
  }

  .lds-usage-guide li {
    grid-template-columns:minmax(0,1fr) clamp(3.75rem,16vw,5rem);
    column-gap:var(--lds-space-4);
    padding:var(--lds-space-6) 0;
  }

  .lds-usage-guide li::after {
    grid-column:2;
    grid-row:1 / span 3;
  }

  .lds-usage-guide li small {
    grid-column:1;
    grid-row:auto;
    display:flex;
    gap:var(--lds-space-3);
  }

  .lds-usage-guide li strong,
  .lds-usage-guide li span {
    grid-column:1;
  }
}

/* Material + Apple comparative foundation pass — Motion, Breakpoints, Themes */
body[data-route="foundation-motion"] .motion-foundation-study,
body[data-route="foundation-breakpoints"] .breakpoint-foundation-study,
body[data-route="foundation-dark-mode"] .theme-foundation-study{display:grid;gap:clamp(48px,6vw,80px);min-width:0}
body[data-route="foundation-motion"] .motion-foundation-study{gap:0}
body[data-route="foundation-motion"] .motion-study{display:grid;gap:clamp(32px,4vw,56px);min-width:0;padding-block:clamp(56px,8vw,104px);border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-study-header{display:grid;grid-template-columns:minmax(180px,.38fr) minmax(0,1fr);gap:clamp(36px,7vw,112px);align-items:start}
body[data-route="foundation-motion"] .motion-study-metric{display:grid;gap:18px}
body[data-route="foundation-motion"] .motion-study-metric>span,
body[data-route="foundation-motion"] .motion-specimen-copy>span,
body[data-route="foundation-motion"] .motion-equivalence span,
body[data-route="foundation-breakpoints"] .breakpoint-composition header span,
body[data-route="foundation-dark-mode"] .theme-proof>header span,
body[data-route="foundation-dark-mode"] .theme-semantic-contract span{color:var(--lds-direction-label-color);font-family:var(--lds-font-mono);font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-study-metric>strong{display:flex;align-items:baseline;gap:6px;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(52px,7vw,84px);line-height:.9;letter-spacing:var(--lds-heading-tracking-display,-.012em)}
body[data-route="foundation-motion"] .motion-study-metric>strong small{color:var(--color-text-secondary);font-family:var(--lds-font-mono);font-size:14px;letter-spacing:.04em;text-transform:lowercase}
body[data-route="foundation-motion"] .motion-study-intro{display:grid;gap:22px;max-width:860px}
body[data-route="foundation-motion"] .motion-study-intro h3{max-width:18ch;margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(40px,5.4vw,72px);line-height:1.02;letter-spacing:var(--lds-heading-tracking-display,-.012em)}
body[data-route="foundation-motion"] .motion-study-intro p{max-width:60ch;margin:0;color:var(--color-text-secondary);font-size:clamp(17px,1.7vw,21px);line-height:1.56}
body[data-route="foundation-motion"] .motion-local-specimens{display:grid;grid-template-columns:minmax(0,1fr)}
body[data-route="foundation-motion"] .motion-local-specimens>article{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto;min-width:0}
body[data-route="foundation-motion"] .motion-local-stage{position:relative;align-content:center;justify-items:center;overflow:hidden;background:transparent}
body[data-route="foundation-motion"] .motion-local-stage--pointer{align-content:stretch;justify-items:stretch}
body[data-route="foundation-motion"] .motion-local-stage .lds-example-stage-intro{justify-self:stretch}
body[data-route="foundation-motion"] .motion-contact-control{position:relative;display:grid;place-content:center;justify-items:center;align-self:center;gap:var(--lds-space-5);min-height:var(--lds-editorial-stage-control-min)}
body[data-route="foundation-motion"] .motion-contact-action{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:var(--lds-specimen-cue-control-gap);width:calc(100% + var(--lds-editorial-inset-stage) + var(--lds-editorial-inset-stage));min-width:0;margin-inline:calc(var(--lds-editorial-inset-stage) * -1)}
body[data-route="foundation-motion"] .motion-contact-action .motion-living-button{grid-column:2;justify-self:center}
body[data-route="foundation-motion"] .motion-interactive-arrow{
  display:block;
  grid-column:1;
  justify-self:end;
  min-width:0;
  width:var(--lds-specimen-cue-art-width);
  max-width:100%;
  aspect-ratio:var(--lds-specimen-interactive-art-ratio);
  color:var(--lds-specimen-cue-color);
  background:currentColor;
  -webkit-mask:url("../source/Arrows/arrow_Interactive_2.svg") center/contain no-repeat;
  mask:url("../source/Arrows/arrow_Interactive_2.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 var(--lds-focus-ring-width) var(--lds-specimen-cue-glow));
  transform:translate(0,var(--lds-specimen-interactive-optical-offset));
}
body[data-route="foundation-motion"] .motion-specimen-copy h4,
body[data-route="foundation-motion"] .motion-spatial-panel h4{margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(22px,2.2vw,30px);line-height:1.12;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-motion"] .motion-specimen-copy p,
body[data-route="foundation-motion"] .motion-spatial-panel p{margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.58}
body[data-route="foundation-motion"] .motion-contact-grammar,
body[data-route="foundation-motion"] .motion-focus-grammar{margin:0}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div{position:relative;background:color-mix(in srgb,var(--color-bg-inset) var(--lds-example-state-inactive-surface-strength),var(--color-bg-surface));opacity:1;transition:background-color var(--lds-motion-fast) var(--lds-ease-standard),box-shadow var(--lds-motion-fast) var(--lds-ease-standard),opacity var(--lds-motion-fast) var(--lds-ease-standard)}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div+div{border-left-color:color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-divider-strength),transparent)}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div:not([data-current]) dt{color:color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-inactive-label-strength),transparent)}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div:not([data-current]) dd{color:color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-inactive-copy-strength),transparent)}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div dt{transition:color var(--lds-motion-fast) var(--lds-ease-standard)}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div[data-current]{background:color-mix(in srgb,var(--lds-selection-accent) var(--lds-example-state-surface-opacity),transparent);box-shadow:inset 0 var(--lds-example-state-accent-width) 0 var(--lds-selection-accent);opacity:var(--lds-example-state-active-opacity)}
body[data-route="foundation-motion"] :is(.motion-contact-grammar,.motion-focus-grammar)>div[data-current] dt{color:var(--lds-selection-accent)}
body[data-route="foundation-motion"] .motion-focus-demo{place-items:center;min-height:var(--lds-specimen-compose-stage-min)}
body[data-route="foundation-motion"] .motion-compose-specimen{position:relative;display:grid;gap:var(--lds-space-5);width:min(100%,var(--lds-specimen-compose-width));margin:auto;transform:translateY(calc(var(--lds-specimen-compose-shell-balance-y) + var(--lds-specimen-compose-optical-y)))}
body[data-route="foundation-motion"] .motion-compose-arrow{position:absolute;top:50%;right:calc(100% + var(--lds-specimen-cue-control-gap));display:block;width:var(--lds-specimen-compose-art-width);aspect-ratio:475/615;color:var(--lds-specimen-cue-color);background:currentColor;-webkit-mask:url("../source/Arrows/arrow_Compose_4.svg") center/contain no-repeat;mask:url("../source/Arrows/arrow_Compose_4.svg") center/contain no-repeat;filter:drop-shadow(0 0 var(--lds-focus-border-width) var(--lds-specimen-cue-glow));transform:translateY(-50%)}
body[data-route="foundation-motion"] .motion-focus-field{display:grid;gap:var(--lds-space-2);width:100%;color:var(--color-text-secondary);font-size:var(--lds-font-md);font-weight:var(--lds-weight-bold);transition:color var(--lds-motion-fast) var(--lds-ease-standard)}
body[data-route="foundation-motion"] .motion-focus-field textarea{box-sizing:border-box;width:100%;height:var(--lds-specimen-compose-height);min-height:0;padding:var(--lds-space-4);resize:none;border:var(--lds-focus-border-width) solid var(--color-border-strong);border-radius:var(--lds-radius-sm);outline:0;color:var(--color-text-primary);background:color-mix(in srgb,var(--color-bg-surface) 94%,var(--lds-selection-surface));box-shadow:var(--lds-shadow-1),inset 0 var(--lds-border-width-subtle) 0 color-mix(in srgb,var(--color-text-primary) 10%,transparent);font:var(--lds-weight-semibold) var(--lds-font-lg)/var(--lds-line-body) var(--lds-font-family);transition:border-color var(--lds-motion-fast) var(--lds-ease-standard),box-shadow var(--lds-motion-fast) var(--lds-ease-standard),background-color var(--lds-motion-fast) var(--lds-ease-standard)}
body[data-route="foundation-motion"] .motion-focus-field textarea::placeholder{color:var(--color-text-placeholder);opacity:1}
body[data-route="foundation-motion"] .motion-focus-field:has(textarea:hover){color:var(--color-text-primary)}
body[data-route="foundation-motion"] .motion-focus-field textarea:hover{border-color:var(--lds-interaction-hover-edge);background:color-mix(in srgb,var(--lds-interaction-hover-surface) var(--lds-example-state-surface-opacity),var(--color-bg-surface))}
body[data-route="foundation-motion"] .motion-focus-field textarea:focus{border-color:var(--color-focus-border);box-shadow:0 0 0 var(--lds-focus-ring-width) var(--color-focus-ring)}
body[data-route="foundation-motion"] .motion-focus-demo:focus-within .motion-focus-field{color:var(--color-text-primary)}
body[data-route="foundation-motion"] .motion-state-specimen{
  display:grid;
  gap:0;
  padding:0;
  border-block:var(--lds-border-width-subtle) solid var(--color-border-subtle);
  background:linear-gradient(135deg,color-mix(in srgb,var(--color-bg-surface) 76%,transparent),color-mix(in srgb,var(--color-accent) 3%,transparent));
}
body[data-route="foundation-motion"] .motion-state-example-heading{
  position:relative;
  z-index:2;
}
body[data-route="foundation-motion"] .motion-state-jewel{
  position:relative;
  display:grid;
  place-items:center;
  overflow:hidden;
  min-height:var(--lds-specimen-state-stage-min);
  padding:var(--lds-editorial-inset-stage);
  border:0;
  background:
    radial-gradient(ellipse 42% 34% at 50% 50%,
      color-mix(in srgb,var(--lds-interaction-hover-highlight) 7%,transparent),
      transparent 72%);
}
body[data-route="foundation-motion"] .motion-state-jewel::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:min(86vw,860px);
  height:240px;
  border-radius:50%;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--lds-interaction-hover-glow) 9%,transparent),transparent 68%);
  filter:blur(var(--lds-space-5));
  pointer-events:none;
  transform:translate(-50%,-50%);
}
body[data-route="foundation-motion"] .motion-state-control-lockup{
  position:absolute;
  top:50%;
  left:50%;
  z-index:1;
  display:grid;
  place-items:center;
  width:min(calc(100% - var(--lds-editorial-inset-stage) - var(--lds-editorial-inset-stage)),var(--lds-specimen-state-control-width));
  min-height:0;
  transform:translate(
    -50%,
    calc(
      (var(--lds-specimen-state-trigger-height) / -2)
      - var(--lds-specimen-state-open-balance)
      - var(--lds-specimen-state-stage-lift)
    )
  );
}
body[data-route="foundation-motion"] .motion-expand-arrow{
  position:absolute;
  top:calc(var(--lds-specimen-state-trigger-height) / 2);
  left:calc(100% + var(--lds-specimen-state-art-offset-x));
  width:var(--lds-specimen-state-art-width);
  aspect-ratio:415/527;
  color:var(--lds-specimen-cue-color);
  background:currentColor;
  -webkit-mask:url("../source/Arrows/Expand.svg") center/contain no-repeat;
  mask:url("../source/Arrows/Expand.svg") center/contain no-repeat;
  filter:drop-shadow(0 0 var(--lds-focus-border-width) var(--lds-specimen-cue-glow));
  transform:translateY(-48%);
}
body[data-route="foundation-motion"] .motion-state-control-lockup>.motion-context-stage{
  position:relative;
  inset:auto;
  display:grid;
  align-content:start;
  width:100%;
  min-width:0;
  margin:0;
  transform:none;
}
body[data-route="foundation-motion"] .motion-state-jewel .motion-context-trigger{
  min-height:var(--lds-specimen-state-trigger-height);
  padding:var(--lds-space-4) var(--lds-space-5);
}
body[data-route="foundation-motion"] .motion-state-jewel .motion-context-trigger small{font-size:var(--lds-font-xs)}
body[data-route="foundation-motion"] .motion-state-jewel .motion-context-trigger strong{font-size:var(--lds-font-lg)}
body[data-route="foundation-motion"] .motion-context-value{
  display:flex;
  align-items:baseline;
  gap:var(--lds-space-2);
}
body[data-route="foundation-motion"] .motion-context-value-index,
body[data-route="foundation-motion"] .motion-context-option-index,
body[data-route="foundation-motion"] .motion-state-result-index{
  color:var(--color-guide-text);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-font-xs);
  font-weight:700;
  letter-spacing:var(--lds-label-tracking);
}
body[data-route="foundation-motion"] .motion-context-value-index{color:var(--lds-selection-accent)}
body[data-route="foundation-motion"] .motion-context-menu button{
  grid-template-columns:auto minmax(0,1fr);
  gap:var(--lds-space-3);
  align-items:start;
}
body[data-route="foundation-motion"] .motion-context-option-index{padding-top:1px}
body[data-route="foundation-motion"] .motion-context-option-copy{display:grid;gap:3px;min-width:0}
body[data-route="foundation-motion"] .motion-context-menu button[aria-checked="true"] .motion-context-option-index{color:var(--lds-selection-accent)}
body[data-route="foundation-motion"] .motion-state-support{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;
  margin-top:calc(var(--lds-specimen-state-outcome-raise) * -1);
  padding:0;
}
body[data-route="foundation-motion"] .motion-state-result{
  position:relative;
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  grid-template-rows:auto auto 1fr;
  column-gap:var(--lds-space-3);
  row-gap:var(--lds-specimen-state-outcome-content-gap);
  align-content:start;
  min-width:0;
  min-height:var(--lds-specimen-state-outcome-min-height);
  padding:var(--lds-specimen-state-outcome-padding);
  color:var(--color-text-secondary);
  background:color-mix(in srgb,var(--color-bg-inset) var(--lds-example-state-inactive-surface-strength),var(--color-bg-surface));
  transition:
    color var(--lds-motion-med) var(--lds-ease-standard),
    background-color var(--lds-motion-med) var(--lds-ease-standard),
    box-shadow var(--lds-motion-med) var(--lds-ease-standard);
}
body[data-route="foundation-motion"] .motion-state-result+.motion-state-result{
  border-left:var(--lds-border-width-subtle) solid color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-divider-strength),transparent);
}
body[data-route="foundation-motion"] .motion-state-result-index{
  grid-column:1;
  grid-row:1 / span 3;
  color:color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-inactive-label-strength),transparent);
  transition:color var(--lds-motion-med) var(--lds-ease-standard);
}
body[data-route="foundation-motion"] .motion-state-result .lds-component-kicker{
  grid-column:2;
  color:color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-inactive-label-strength),transparent);
  transition:color var(--lds-motion-med) var(--lds-ease-standard);
}
body[data-route="foundation-motion"] .motion-state-result h4{
  grid-column:2;
  margin:0;
  color:color-mix(in srgb,var(--color-text-primary) 58%,transparent);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(var(--lds-font-xl),1.65vw,var(--lds-editorial-title-example));
  line-height:1.14;
  letter-spacing:var(--lds-heading-tracking-section);
  transition:color var(--lds-motion-med) var(--lds-ease-standard);
}
body[data-route="foundation-motion"] .motion-state-result p{
  grid-column:2;
  max-width:34ch;
  margin:0;
  color:color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-inactive-copy-strength),transparent);
  font-size:var(--lds-font-sm);
  line-height:1.5;
  transition:color var(--lds-motion-med) var(--lds-ease-standard);
}
body[data-route="foundation-motion"] .motion-state-result[data-current]{
  background:color-mix(in srgb,var(--lds-selection-accent) var(--lds-example-state-surface-opacity),transparent);
  box-shadow:inset 0 var(--lds-example-state-accent-width) 0 var(--lds-selection-accent);
}
body[data-route="foundation-motion"] .motion-state-result[data-current] :is(.motion-state-result-index,.lds-component-kicker){color:var(--lds-selection-accent)}
body[data-route="foundation-motion"] .motion-state-result[data-current] h4{color:var(--color-text-primary)}
body[data-route="foundation-motion"] .motion-state-result[data-current] p{color:var(--color-text-secondary)}
body[data-route="foundation-motion"][data-color-theme="dark"] .page-host{background:var(--lds-relief-dark-surface)}
@media (min-width:1040px){
body[data-route="foundation-motion"][data-color-theme="dark"]{--lds-rail-card-right-inset:0px}
body[data-route="foundation-motion"][data-color-theme="dark"] .app-nav{padding-right:0}
}
body[data-route="foundation-motion"] .motion-spatial-specimen{display:grid;gap:clamp(40px,6vw,72px);padding:clamp(36px,5vw,72px);border:0;background:transparent}
body[data-route="foundation-motion"] .motion-spatial-comparison{display:grid;grid-template-columns:minmax(0,760px);justify-content:center;align-items:start}
body[data-route="foundation-motion"] .motion-spatial-variant{display:grid;min-width:0;padding:var(--lds-relief-clearance);background:transparent}
body[data-route="foundation-motion"] .motion-spatial-stage{display:grid;grid-template-rows:auto auto;align-content:start;min-width:0;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-bg-panel) 82%,transparent);box-shadow:0 24px 56px -44px color-mix(in srgb,var(--color-text-primary) 44%,transparent)}
body[data-route="foundation-motion"] .motion-spatial-variant--veiled .motion-spatial-stage{overflow:hidden;border:0;border-radius:var(--lds-relief-radius);background:var(--lds-relief-surface);box-shadow:var(--lds-relief-offset) var(--lds-relief-offset) var(--lds-relief-blur) var(--lds-relief-shadow),calc(var(--lds-relief-offset) * -1) calc(var(--lds-relief-offset) * -1) var(--lds-relief-blur) var(--lds-relief-light)}
body[data-route="foundation-motion"] .motion-spatial-variant--veiled .motion-spatial-panel{border-top:0}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-spatial-variant--veiled .lds-button--primary{color:#172433;border-color:var(--lds-primary-light-edge-rest);background:rgba(255,255,255,.24);box-shadow:var(--lds-primary-light-shadow-rest);text-shadow:none}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-spatial-variant--veiled .lds-button--primary:hover{border-color:var(--lds-primary-light-edge-hover);box-shadow:var(--lds-primary-light-shadow-hover)}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-spatial-variant--veiled .lds-button--primary:active{border-color:var(--lds-primary-light-edge-rest);box-shadow:var(--lds-primary-light-shadow-pressed)}
body[data-route="foundation-motion"] .motion-spatial-toolbar{display:flex;justify-content:space-between;align-items:center;gap:var(--lds-space-5);padding:var(--lds-space-5) clamp(var(--lds-space-5),3vw,var(--lds-space-6))}
body[data-route="foundation-motion"] .motion-spatial-identity{display:grid;gap:var(--lds-space-2)}
body[data-route="foundation-motion"] .motion-spatial-identity>strong{color:var(--color-text-primary);font-size:var(--lds-font-lg)}
body[data-route="foundation-motion"] .motion-spatial-actions{display:flex;flex:0 0 auto;align-items:center;justify-content:flex-end;gap:var(--lds-specimen-cue-control-gap)}
body[data-route="foundation-motion"] .motion-spatial-panel{height:auto;overflow:hidden;border-top:1px solid var(--color-border-subtle);opacity:1;clip-path:inset(0 0 0 0);transform-origin:top center;will-change:clip-path,opacity}
body[data-route="foundation-motion"] .motion-spatial-panel[aria-hidden="true"]{display:none;visibility:hidden;clip-path:inset(0 0 100% 0);opacity:0;pointer-events:none}
body[data-route="foundation-motion"] .motion-spatial-panel-inner{display:grid;gap:14px;overflow:hidden;padding:clamp(28px,4vw,48px)}
body[data-route="foundation-motion"] .motion-spatial-panel-inner>div{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:8px;color:var(--color-text-muted);font-family:var(--lds-font-mono);font-size:11px}
body[data-route="foundation-breakpoints"] .breakpoint-composition header strong,
body[data-route="foundation-dark-mode"] .theme-proof>header strong,
body[data-route="foundation-dark-mode"] .theme-semantic-contract strong{color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(22px,2.4vw,32px);line-height:1.1;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-motion"] .motion-equivalence p,
body[data-route="foundation-breakpoints"] .breakpoint-continuum p,
body[data-route="foundation-breakpoints"] .breakpoint-composition>p,
body[data-route="foundation-dark-mode"] .theme-semantic-contract p,
body[data-route="foundation-dark-mode"] .theme-quality-modes p{margin:0;color:var(--color-text-secondary);font-size:16px;line-height:1.58}
body[data-route="foundation-breakpoints"] .breakpoint-pressure-test h3,
body[data-route="foundation-dark-mode"] .theme-quality-modes h3{max-width:18ch;margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(28px,3.6vw,48px);line-height:1.08;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-motion"] .motion-living-button{justify-self:start;transform:translate3d(0,0,0) scale(1);transform-origin:center center;will-change:transform,filter;transition:transform var(--lds-motion-fast,120ms) cubic-bezier(.22,1,.36,1),filter var(--lds-motion-fast,120ms) ease-out,box-shadow var(--lds-motion-fast,120ms) ease-out}
body[data-route="foundation-motion"] .motion-living-button:hover:not(:active){transform:translate3d(0,-1px,0) scale(1);filter:saturate(1.06)}
body[data-route="foundation-motion"] .motion-living-button:focus-visible{transform:translate3d(0,0,0) scale(1)}
body[data-route="foundation-motion"] .motion-living-button:active{transform:translate3d(0,1px,0) scale(.992);filter:saturate(1.02)}
body[data-route="foundation-motion"] .motion-state-caption{display:block;margin:0;color:var(--color-text-muted);font-family:var(--lds-font-mono);font-size:12px;line-height:1.5}
body[data-route="foundation-motion"] .motion-context-trigger{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:24px;width:100%;min-height:64px;padding:10px 16px;border:1px solid var(--color-border-strong);border-radius:var(--lds-radius-sm);color:var(--color-text-primary);background:var(--color-bg-surface);font:inherit;text-align:left;transition:border-color 120ms ease,background-color 120ms ease,box-shadow 120ms ease}
body[data-route="foundation-motion"] .motion-context-trigger[aria-expanded="true"]{border-bottom-right-radius:0;border-bottom-left-radius:0}
body[data-route="foundation-motion"] .motion-context-trigger:hover{border-color:color-mix(in srgb,var(--color-border-strong) 72%,var(--color-text-primary));background:color-mix(in srgb,var(--color-bg-surface) 92%,var(--color-text-primary) 8%)}
body[data-route="foundation-motion"] .motion-context-trigger:focus-visible{outline:2px solid var(--color-focus-ring);outline-offset:3px}
body[data-route="foundation-motion"] .motion-context-trigger>span{display:grid;gap:2px;min-width:0}
body[data-route="foundation-motion"] .motion-context-trigger small{color:var(--color-text-muted);font-family:var(--lds-font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-context-trigger strong{overflow:hidden;font-size:15px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}
body[data-route="foundation-motion"] .motion-context-chevron{flex:0 0 auto;color:var(--color-text-secondary);transform:none;transform-origin:center;transition:color 120ms ease}
body[data-route="foundation-motion"] .motion-context-trigger:hover .motion-context-chevron{color:var(--color-text-primary);transform:none}
body[data-route="foundation-motion"] .motion-context-menu{display:grid;grid-template-rows:1fr;opacity:1;visibility:visible;transform:translateY(0);transform-origin:top center;transition:grid-template-rows 180ms cubic-bezier(.2,.8,.2,1),opacity 120ms ease,transform 180ms cubic-bezier(.2,.8,.2,1),visibility 0s}
body[data-route="foundation-motion"] .motion-context-menu[aria-hidden="true"]{grid-template-rows:0fr;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);transition:grid-template-rows 180ms cubic-bezier(.2,.8,.2,1),opacity 120ms ease,transform 180ms cubic-bezier(.2,.8,.2,1),visibility 0s 180ms}
body[data-route="foundation-motion"] .motion-context-menu-inner{position:relative;display:grid;min-height:0;overflow:hidden;border:0;background:color-mix(in srgb,var(--color-bg-panel) 88%,transparent);box-shadow:0 18px 36px -30px color-mix(in srgb,var(--color-text-primary) 42%,transparent)}
body[data-route="foundation-motion"] .motion-context-menu-inner::after{content:"";position:absolute;inset:0;z-index:2;border:1px solid var(--color-border-subtle);border-top:0;pointer-events:none}
body[data-route="foundation-motion"] .motion-context-menu button{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--lds-space-3);align-items:start;width:100%;min-height:58px;margin:0;padding:11px 17px;border:0;font:inherit;text-align:left}
body[data-route="foundation-motion"] .motion-context-menu button+button{border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-context-menu button strong{color:var(--color-text-primary);font-size:14px;line-height:1.35}
body[data-route="foundation-motion"] .motion-context-menu button .motion-context-option-copy>span{color:var(--color-text-secondary);font-size:13px;line-height:1.4}
body[data-route="foundation-motion"] .motion-context-menu button .motion-context-option-index{color:var(--color-guide-text);font-size:var(--lds-font-xs);line-height:1.4}
body[data-route="foundation-motion"] .motion-context-menu button[aria-checked="true"] .motion-context-option-index{color:var(--lds-selection-accent)}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-context-trigger{border-color:color-mix(in srgb,var(--color-border-strong) 78%,#8ca7cc);background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(244,248,255,.82));box-shadow:inset 0 1px 0 rgba(255,255,255,.94),0 14px 30px -28px rgba(32,73,128,.52)}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-context-trigger:hover{border-color:var(--lds-interaction-hover-edge);background:linear-gradient(135deg,color-mix(in srgb,var(--lds-interaction-hover-surface) 8%,rgba(255,255,255,.80)),color-mix(in srgb,var(--lds-interaction-hover-surface) 13%,rgba(248,243,255,.72)));box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 34px -26px var(--lds-interaction-hover-glow)}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-context-chevron{color:var(--lds-interaction-hover-icon)}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-context-trigger:hover .motion-context-chevron{color:var(--lds-interaction-hover-edge)}
body[data-route="foundation-motion"] .motion-equivalence{display:grid;grid-template-columns:minmax(280px,1.2fr) repeat(2,minmax(220px,1fr));border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-equivalence>header,
body[data-route="foundation-motion"] .motion-equivalence>div{display:grid;align-content:start;gap:12px;padding:clamp(28px,4vw,48px)}
body[data-route="foundation-motion"] .motion-equivalence>header h3{max-width:16ch;margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(28px,3vw,42px);line-height:1.06;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-motion"] .motion-equivalence>div{border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-equivalence strong{color:var(--color-text-primary);font-size:22px}
body[data-route="foundation-motion"] .motion-equivalence-rule{grid-column:1/-1;padding:24px clamp(28px,4vw,48px);border-top:1px solid var(--color-border-subtle)}

body[data-route="foundation-motion"] .motion-animation-contract{display:grid;gap:0;padding-block:clamp(72px,10vw,136px);border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-animation-intro{display:grid;grid-template-columns:minmax(150px,.28fr) minmax(0,1.18fr) minmax(260px,.58fr);gap:clamp(28px,5vw,80px);align-items:start;padding-bottom:clamp(52px,7vw,88px)}
body[data-route="foundation-motion"] .motion-animation-intro h3{max-width:16ch;margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(44px,6vw,80px);line-height:1;letter-spacing:var(--lds-heading-tracking-display,-.012em)}
body[data-route="foundation-motion"] .motion-animation-intro p{max-width:48ch;margin:0;color:var(--color-text-secondary);font-size:clamp(17px,1.7vw,21px);line-height:1.56}
body[data-route="foundation-motion"] .motion-duration-lab,
body[data-route="foundation-motion"] .motion-easing-lab{display:grid;gap:0;border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-contract-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;padding:clamp(30px,4vw,48px) 0}
body[data-route="foundation-motion"] .motion-contract-heading>div{display:grid;gap:8px}
body[data-route="foundation-motion"] .motion-contract-heading span,
body[data-route="foundation-motion"] .motion-choreography-contract>header>span{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:12px;font-weight:700;letter-spacing:.11em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-contract-heading h4,
body[data-route="foundation-motion"] .motion-choreography-contract h4{margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(28px,3.5vw,44px);line-height:1.08;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-motion"] .motion-duration-scenes{display:grid;border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-duration-scene{display:grid;grid-template-columns:minmax(320px,.43fr) minmax(480px,.57fr);min-width:0;min-height:520px}
body[data-route="foundation-motion"] .motion-duration-scene+article{border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-duration-copy{display:grid;align-content:start;gap:24px;padding:clamp(32px,5vw,64px)}
body[data-route="foundation-motion"] .motion-duration-copy>header{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 24px}
body[data-route="foundation-motion"] .motion-duration-copy>header span{grid-column:1/-1;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-duration-copy>header strong{color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(46px,5vw,72px);font-weight:700;line-height:.94;letter-spacing:var(--lds-heading-tracking-display,-.012em)}
body[data-route="foundation-motion"] .motion-duration-copy>header strong small{margin-left:4px;font-size:.42em;font-weight:700}
body[data-route="foundation-motion"] .motion-duration-copy>header code{padding-bottom:7px;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:11px}
body[data-route="foundation-motion"] .motion-duration-copy>p{max-width:44ch;margin:0;color:var(--color-text-secondary);font-size:16px;line-height:1.58}
body[data-route="foundation-motion"] .motion-spec-list{display:grid;margin:4px 0 0;border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-spec-list>div{display:grid;grid-template-columns:100px minmax(0,1fr);gap:18px;padding:11px 0;border-bottom:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-spec-list dt{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-spec-list dd{margin:0;color:var(--color-text-primary);font-size:13px;font-weight:700}
body[data-route="foundation-motion"] .motion-duration-copy .motion-reduced-spec{display:grid;gap:6px;padding:16px 18px;border-left:2px solid color-mix(in srgb,#78c8ff 72%,var(--color-border-strong));background:color-mix(in srgb,#78c8ff 5%,transparent);font-size:13px;line-height:1.48}
body[data-route="foundation-motion"] .motion-reduced-spec span{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-scene-stage,
body[data-route="foundation-motion"] .motion-easing-stage{position:relative;display:grid;place-items:center;overflow:hidden;min-width:0;padding:clamp(28px,4vw,48px);border-top:1px solid var(--color-border-subtle);background:linear-gradient(145deg,color-mix(in srgb,var(--color-bg-surface) 78%,transparent),color-mix(in srgb,#3b7cff 5%,transparent) 48%,color-mix(in srgb,#ff4f87 4%,transparent))}
body[data-route="foundation-motion"] .motion-duration-scene>.motion-scene-stage{min-height:520px;border-top:0;border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-scene-stage::before,
body[data-route="foundation-motion"] .motion-easing-stage::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 52% 54%,color-mix(in srgb,#70d9ff 9%,transparent),transparent 36%),linear-gradient(115deg,transparent 28%,color-mix(in srgb,#ff6696 5%,transparent),transparent 67%)}
body[data-route="foundation-motion"] .motion-scene-button{position:relative;z-index:2}
body[data-route="foundation-motion"] :is(.motion-scene-stage--local,.motion-scene-stage--compact-state){--motion-study-inset:clamp(20px,2vw,24px);padding:var(--motion-study-inset)}
body[data-route="foundation-motion"] .motion-scene-stage--local{align-items:stretch}
body[data-route="foundation-motion"] .motion-local-playground{position:relative;z-index:1;display:grid;align-self:stretch;width:100%;overflow:hidden;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-bg-surface) 72%,transparent);box-shadow:0 24px 58px -48px color-mix(in srgb,var(--color-text-primary) 44%,transparent)}
body[data-route="foundation-motion"] .motion-local-playground>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 24px;padding:24px var(--motion-study-inset);border-bottom:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-local-playground>header>span,
body[data-route="foundation-motion"] .motion-local-play-item>header span{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-local-playground>header>strong{color:var(--color-text-primary);font-size:22px}
body[data-route="foundation-motion"] .motion-local-playground>header>p{grid-column:2;grid-row:1/3;align-self:center;max-width:30ch;margin:0;color:var(--color-text-secondary);font-size:12px;line-height:1.45}
body[data-route="foundation-motion"] .motion-local-playground kbd{padding:2px 6px;border:1px solid var(--color-border-subtle);border-radius:4px;background:color-mix(in srgb,var(--color-bg-panel) 84%,transparent);font:700 10px/1 var(--lds-font-mono)}
body[data-route="foundation-motion"] .motion-local-play-grid{display:grid;grid-template-columns:1fr}
body[data-route="foundation-motion"] .motion-local-play-item{display:grid;grid-template-columns:minmax(100px,.25fr) minmax(170px,.45fr) minmax(130px,.3fr);grid-template-rows:auto;gap:16px;align-items:center;min-width:0;min-height:156px;padding:28px var(--motion-study-inset)}
body[data-route="foundation-motion"] .motion-local-play-item+article,
body[data-route="foundation-motion"] .motion-local-play-item+section{border-top:1px solid var(--color-border-subtle);border-left:0}
body[data-route="foundation-motion"] .motion-local-play-item--field{grid-column:auto;grid-template-columns:minmax(100px,.25fr) minmax(170px,.45fr) minmax(130px,.3fr);grid-template-rows:auto;min-height:156px;border-top:1px solid var(--color-border-subtle);border-left:0!important}
body[data-route="foundation-motion"] .motion-local-play-item>header{display:grid;align-content:start;gap:5px}
body[data-route="foundation-motion"] .motion-local-play-item>header small{color:var(--color-text-secondary);font-size:11px}
body[data-route="foundation-motion"] .motion-local-control{display:grid;place-items:center;min-width:0}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{grid-column:2;grid-row:1;justify-items:stretch}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{grid-column:3;grid-row:1}
body[data-route="foundation-motion"] .motion-local-field{max-width:none}
body[data-route="foundation-motion"] .motion-local-icon-button{position:relative;isolation:isolate;display:grid;place-items:center;width:var(--lds-icon-action-size);height:var(--lds-icon-action-size);padding:0;overflow:hidden;border:var(--lds-focus-border-width) solid var(--color-border-subtle);border-radius:var(--lds-radius-sm);outline:0;color:var(--color-text-primary);background-color:color-mix(in srgb,var(--color-bg-panel) 78%,transparent);box-shadow:var(--lds-shadow-1);cursor:pointer;transition:transform var(--lds-motion-fast) var(--lds-ease-standard),color var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease),border-color var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease),background-color var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease),box-shadow var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease)}
body[data-route="foundation-motion"] .motion-local-icon-button::before,
body[data-route="foundation-motion"] .motion-local-icon-button::after{content:"";position:absolute;pointer-events:none;opacity:0;transition:opacity var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease),transform var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease)}
body[data-route="foundation-motion"] .motion-local-icon-button::before{inset:0;z-index:0;border-radius:inherit;background:linear-gradient(142deg,color-mix(in srgb,var(--lds-interaction-hover-highlight) 76%,transparent),transparent 42%),linear-gradient(318deg,color-mix(in srgb,var(--lds-interaction-hover-surface) 16%,var(--color-bg-panel)),color-mix(in srgb,var(--color-bg-panel) 88%,transparent))}
body[data-route="foundation-motion"] .motion-local-icon-button::after{inset:var(--lds-icon-action-glow-inset);z-index:1;border-radius:inherit;background:linear-gradient(128deg,transparent 8%,color-mix(in srgb,var(--lds-interaction-hover-glow) 72%,transparent) 46%,color-mix(in srgb,var(--lds-interaction-hover-surface) 34%,transparent) 68%,transparent 94%);filter:blur(var(--lds-icon-action-glow-blur));transform:scale(.84)}
body[data-route="foundation-motion"] .motion-local-icon-button>svg{position:relative;z-index:2;display:block;color:currentColor;opacity:1!important;filter:none!important;transform:none!important;mix-blend-mode:normal!important;shape-rendering:geometricPrecision}
body[data-route="foundation-motion"] .motion-local-icon-button>svg use{color:inherit;opacity:1!important;filter:none!important;transform:none!important;mix-blend-mode:normal!important}
body[data-route="foundation-motion"] .motion-local-icon-button:hover{color:var(--lds-interaction-hover-icon);border-color:var(--lds-interaction-hover-edge);background-color:color-mix(in srgb,var(--lds-interaction-hover-surface) 10%,var(--color-bg-panel));box-shadow:inset 0 var(--lds-focus-border-width) 0 var(--lds-interaction-hover-highlight),0 0 0 var(--lds-focus-border-width) color-mix(in srgb,var(--lds-interaction-hover-edge) 42%,transparent),0 var(--lds-space-2) var(--lds-space-4) calc(var(--lds-space-2) * -1) var(--lds-interaction-hover-glow)}
body[data-route="foundation-motion"] .motion-local-icon-button:hover::before{opacity:1}
body[data-route="foundation-motion"] .motion-local-icon-button:hover::after{opacity:1;transform:scale(1)}
body[data-route="foundation-motion"] .motion-local-icon-button:active{color:var(--lds-interaction-press-icon);border-color:var(--lds-interaction-press-edge);background-color:var(--lds-interaction-press-surface);transform:translateY(var(--lds-interaction-press-travel)) scale(var(--lds-interaction-press-scale));box-shadow:inset 0 var(--lds-space-1) var(--lds-space-2) var(--lds-interaction-press-shadow),inset 0 0 0 var(--lds-focus-border-width) var(--lds-interaction-press-highlight),0 var(--lds-focus-border-width) var(--lds-space-1) color-mix(in srgb,var(--color-bg-inset) 42%,transparent)}
body[data-route="foundation-motion"] .motion-local-icon-button:active::before{opacity:var(--lds-interaction-press-surface-opacity);transform:scale(var(--lds-interaction-press-scale))}
body[data-route="foundation-motion"] .motion-local-icon-button:active::after{opacity:var(--lds-interaction-press-glow-opacity);transform:scale(var(--lds-interaction-press-glow-scale))}
body[data-route="foundation-motion"] .motion-local-icon-button:focus-visible{border-color:var(--color-focus-border);box-shadow:0 0 0 3px var(--color-focus-ring)}
body[data-route="foundation-motion"] .motion-scene-stage--local :is(.motion-scene-button,.motion-local-field input){transition-duration:120ms!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}
body[data-route="foundation-motion"] .motion-scene-stage--local .motion-scene-button::before,
body[data-route="foundation-motion"] .motion-scene-stage--local .motion-scene-button::after{transition-duration:120ms!important;transition-timing-function:cubic-bezier(.4,0,.2,1)!important}
body[data-route="foundation-motion"] .motion-local-state-readout{position:relative;min-width:0;height:28px;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;font-weight:700;line-height:1.35;letter-spacing:.07em;text-align:center;text-transform:uppercase;white-space:nowrap}
body[data-route="foundation-motion"] .motion-local-state-readout span{position:absolute;inset:0;display:grid;place-items:center;opacity:1;transform:translateY(0)}
body[data-route="foundation-motion"] .motion-loop-phases{position:absolute;z-index:2;top:26px;left:clamp(24px,4vw,44px);right:clamp(24px,4vw,44px);display:grid;grid-template-columns:repeat(3,1fr);gap:12px;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-align:center;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-loop-phases span{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:8px}
body[data-route="foundation-motion"] .motion-loop-phases span::before{content:"";width:6px;height:6px;border:1px solid color-mix(in srgb,#78c8ff 74%,var(--color-border-strong));border-radius:50%;background:var(--color-bg-surface);box-shadow:0 0 0 3px color-mix(in srgb,#78c8ff 8%,transparent)}
body[data-route="foundation-motion"] .motion-loop-phases span::after{content:"";height:1px;background:var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-loop-phases span:last-child::after{display:none}
body[data-route="foundation-motion"] .motion-scene-stage--compact-state{align-items:stretch}
body[data-route="foundation-motion"] .motion-compact-lab{position:relative;z-index:1;display:grid;align-self:stretch;width:100%;overflow:hidden;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-bg-surface) 74%,transparent);box-shadow:0 24px 58px -48px color-mix(in srgb,var(--color-text-primary) 44%,transparent)}
body[data-route="foundation-motion"] .motion-compact-lab>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(200px,.65fr);gap:6px 24px;padding:24px var(--motion-study-inset);border-bottom:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-compact-lab>header>span,
body[data-route="foundation-motion"] .motion-compact-card>header span{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-compact-lab>header>strong{color:var(--color-text-primary);font-size:21px;line-height:1.2}
body[data-route="foundation-motion"] .motion-compact-lab>header>p{grid-column:2;grid-row:1/3;align-self:center;margin:0;color:var(--color-text-secondary);font-size:12px;line-height:1.45}
body[data-route="foundation-motion"] .motion-compact-grid{display:grid;grid-template-columns:1fr}
body[data-route="foundation-motion"] .motion-compact-card{display:grid;grid-template-columns:minmax(100px,.25fr) minmax(170px,.45fr) minmax(130px,.3fr);gap:16px;align-content:center;align-items:center;min-width:0;min-height:164px;padding:28px var(--motion-study-inset)}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(even){border-left:0}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(n+2){border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-compact-card>header{display:grid;gap:5px}
body[data-route="foundation-motion"] .motion-compact-card>header small{color:var(--color-text-secondary);font-size:11px}
body[data-route="foundation-motion"] .motion-compact-result,
body[data-route="foundation-motion"] .motion-validation-result{min-height:20px;margin:0;color:var(--color-text-secondary);font-size:11px;line-height:1.45}
body[data-route="foundation-motion"] .motion-compact-card>:is(.motion-compact-segmented,.motion-compact-menu,.motion-compact-field,.motion-compact-disclosure){grid-column:2}
body[data-route="foundation-motion"] .motion-compact-card>:is(.motion-compact-result,.motion-validation-result,.motion-compact-detail){grid-column:3}
body[data-route="foundation-motion"] .motion-compact-segmented{display:flex;align-items:center;justify-content:center;gap:12px;padding:0;border:0;background:transparent}
body[data-route="foundation-motion"] .motion-compact-segmented .lds-button{flex:1 1 0;min-width:0;min-height:44px;padding-inline:18px;white-space:nowrap;transition-duration:180ms}
body[data-route="foundation-motion"] .motion-compact-segmented .lds-button>span{position:relative;z-index:2}
body[data-route="foundation-motion"] .motion-compact-menu{position:relative;z-index:3;min-height:124px}
body[data-route="foundation-motion"] .motion-compact-menu-list{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 180ms cubic-bezier(.4,0,.2,1),opacity 180ms cubic-bezier(.4,0,.2,1)}
body[data-route="foundation-motion"] .motion-compact-menu-list[aria-hidden="false"]{grid-template-rows:1fr;opacity:1}
body[data-route="foundation-motion"] .motion-compact-menu-list>div{min-height:0}
body[data-route="foundation-motion"] .motion-compact-field{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 8px;align-items:end}
body[data-route="foundation-motion"] .motion-compact-field>span{grid-column:1/-1;color:var(--color-text-secondary);font-size:11px;font-weight:700;transition:color 180ms cubic-bezier(.4,0,.2,1)}
body[data-route="foundation-motion"] .motion-compact-field input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--color-border-strong);border-radius:var(--lds-radius-sm);outline:0;color:var(--color-text-primary);background:color-mix(in srgb,var(--color-bg-surface) 86%,transparent);font:700 13px/1 var(--lds-font-family);transition:border-color 180ms cubic-bezier(.4,0,.2,1),box-shadow 180ms cubic-bezier(.4,0,.2,1),background-color 180ms cubic-bezier(.4,0,.2,1)}
body[data-route="foundation-motion"] .motion-compact-field:has(input:hover)>span{color:var(--color-text-primary)}
body[data-route="foundation-motion"] .motion-compact-field button{height:44px;padding-inline:14px;font-size:11px;transition-duration:180ms}
body[data-route="foundation-motion"] .motion-compact-field button::before,
body[data-route="foundation-motion"] .motion-compact-field button::after{transition-duration:180ms}
body[data-route="foundation-motion"] .motion-compact-field button:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 7px color-mix(in srgb,var(--color-text-primary) 15%,transparent)}
body[data-route="foundation-motion"] .motion-compact-card[data-valid="true"] .motion-compact-field input{border-color:color-mix(in srgb,#48cfa2 72%,var(--color-border-strong));box-shadow:0 0 0 3px color-mix(in srgb,#48cfa2 15%,transparent)}
body[data-route="foundation-motion"] .motion-compact-card[data-valid="true"] .motion-validation-result{color:color-mix(in srgb,#31b988 76%,var(--color-text-primary))}
body[data-route="foundation-motion"] .motion-compact-detail{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows 180ms cubic-bezier(.4,0,.2,1),opacity 180ms cubic-bezier(.4,0,.2,1)}
body[data-route="foundation-motion"] .motion-compact-detail[aria-hidden="false"]{grid-template-rows:1fr;opacity:1}
body[data-route="foundation-motion"] .motion-compact-detail>div{min-height:0}
body[data-route="foundation-motion"] :is(.motion-compact-segmented button,.motion-compact-field input,.motion-compact-field button):focus-visible{position:relative;z-index:4;outline:0;border-color:var(--color-focus-border);box-shadow:0 0 0 1px var(--color-focus-border),0 0 0 4px color-mix(in srgb,var(--color-focus-ring) 58%,transparent)}

/* Duration studies are hero laboratories, not comparison tables. The copy
   establishes the contract; the full-width stage lets each interaction own
   enough atmosphere and space to make that contract visible. */
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"]){grid-template-columns:1fr}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy{grid-template-columns:minmax(240px,.7fr) minmax(340px,1.3fr);column-gap:clamp(44px,7vw,104px);padding-block:clamp(44px,6vw,72px)}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy>header{grid-column:1;grid-row:1/3;align-self:start}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy>p{grid-column:2;max-width:56ch}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy>.motion-spec-list{grid-column:2}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy>.motion-reduced-spec{grid-column:2}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage{min-height:760px;border-top:1px solid var(--color-border-subtle);border-left:0}

body[data-route="foundation-motion"] .motion-scene-stage--local,
body[data-route="foundation-motion"] .motion-scene-stage--compact-state{--motion-study-inset:clamp(26px,4vw,58px);place-items:stretch;padding:clamp(28px,5vw,72px);background:linear-gradient(138deg,color-mix(in srgb,var(--color-bg-surface) 86%,transparent),color-mix(in srgb,#9064dc 7%,var(--color-bg-surface)) 38%,color-mix(in srgb,#e7639c 6%,var(--color-bg-surface)) 67%,color-mix(in srgb,#45c8dc 8%,var(--color-bg-surface)))}
body[data-route="foundation-motion"] .motion-scene-stage--local::before,
body[data-route="foundation-motion"] .motion-scene-stage--compact-state::before{background:radial-gradient(ellipse at 14% 18%,color-mix(in srgb,#ff6a9e 12%,transparent),transparent 39%),radial-gradient(ellipse at 86% 82%,color-mix(in srgb,#45d5e8 12%,transparent),transparent 42%),linear-gradient(118deg,transparent 24%,color-mix(in srgb,#fff 5%,transparent) 49%,transparent 72%)}

body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab){position:relative;z-index:1;display:grid;align-self:stretch;width:100%;padding:0;overflow:visible;border:0;background:transparent;box-shadow:none}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.7fr);gap:10px clamp(32px,6vw,88px);padding:0 0 clamp(36px,5vw,64px);border:0}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>span{color:var(--color-guide-text);font:700 11px/1.2 var(--lds-font-mono);letter-spacing:.12em;text-transform:uppercase}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>strong{max-width:18ch;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:clamp(32px,4vw,52px);line-height:1.02;letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>p{grid-column:2;grid-row:1/3;align-self:end;max-width:40ch;margin:0;color:var(--color-text-secondary);font-size:15px;line-height:1.58}

body[data-route="foundation-motion"] :is(.motion-local-play-grid,.motion-compact-grid){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.5vw,32px)}
body[data-route="foundation-motion"] .motion-compact-grid{grid-template-columns:repeat(12,minmax(0,1fr))}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(1){grid-column:span 7}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(2){grid-column:span 5}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(3){grid-column:span 5}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(4){grid-column:span 7}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card){position:relative;isolation:isolate;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(150px,1fr) auto;align-content:stretch;align-items:start;gap:26px;min-width:0;min-height:340px;padding:clamp(26px,3.2vw,44px);overflow:hidden;border:1px solid color-mix(in srgb,var(--color-border-subtle) 76%,#9ccfe4);border-radius:var(--lds-radius-lg);background:linear-gradient(145deg,color-mix(in srgb,var(--color-bg-panel) 88%,#fff),color-mix(in srgb,var(--color-bg-panel) 92%,#d8e8ff) 48%,color-mix(in srgb,var(--color-bg-panel) 90%,#ffe0e9));box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 54%,transparent),0 34px 58px -48px color-mix(in srgb,#244460 52%,transparent)}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card)::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 20% 25%,color-mix(in srgb,#ff659b 14%,transparent),transparent 36%),radial-gradient(ellipse at 80% 72%,color-mix(in srgb,#42d4e6 15%,transparent),transparent 38%),radial-gradient(ellipse at 58% 38%,color-mix(in srgb,#8b67de 10%,transparent),transparent 42%);filter:blur(20px);opacity:.7}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card):nth-child(2)::before{transform:rotate(150deg);opacity:.58}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card):nth-child(3)::before{transform:rotate(235deg);opacity:.64}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card):nth-child(4)::before{transform:rotate(305deg);opacity:.56}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card)>header{position:relative;z-index:1;display:grid;align-content:start;gap:7px}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card)>header span{color:var(--color-guide-text);font:700 10px/1.2 var(--lds-font-mono);letter-spacing:.11em;text-transform:uppercase}
body[data-route="foundation-motion"] :is(.motion-local-play-item,.motion-compact-card)>header small{color:var(--color-text-secondary);font-size:12px;line-height:1.4}
body[data-route="foundation-motion"] :is(.motion-local-control,.motion-compact-segmented,.motion-compact-menu,.motion-compact-field,.motion-compact-disclosure){position:relative;z-index:2;grid-column:1;align-self:center;justify-self:center;width:min(100%,340px)}
body[data-route="foundation-motion"] :is(.motion-local-state-readout,.motion-compact-result,.motion-validation-result,.motion-compact-detail){position:relative;z-index:1;grid-column:1;align-self:end;justify-self:stretch;text-align:center}
body[data-route="foundation-motion"] .motion-local-play-item--field{grid-column:1/-1;grid-template-columns:minmax(180px,1fr) minmax(320px,420px) minmax(180px,1fr);grid-template-rows:1fr;align-items:center;min-height:300px;border:1px solid color-mix(in srgb,var(--color-border-subtle) 76%,#9ccfe4)!important}
body[data-route="foundation-motion"] .motion-local-play-item--field>header{grid-column:1;grid-row:1;align-self:center}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{grid-column:2;grid-row:1;align-self:center}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{grid-column:3;grid-row:1;align-self:center}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(n){border:1px solid color-mix(in srgb,var(--color-border-subtle) 76%,#9ccfe4)}
body[data-route="foundation-motion"] .motion-compact-menu{min-height:164px}
body[data-route="foundation-motion"] .motion-compact-field{grid-template-columns:minmax(0,1fr) auto}
body[data-route="foundation-motion"] .motion-compact-detail{min-height:44px}

body[data-route="foundation-motion"][data-color-theme="dark"] :is(.motion-local-play-item,.motion-compact-card){border-color:color-mix(in srgb,#a9d9ed 18%,var(--color-border-subtle));background:linear-gradient(145deg,color-mix(in srgb,var(--color-bg-panel) 92%,#351c43),color-mix(in srgb,var(--color-bg-panel) 94%,#143b48) 52%,color-mix(in srgb,var(--color-bg-panel) 94%,#421c35));box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 38px 70px -54px rgba(0,0,0,.88),0 0 42px -34px rgba(70,196,220,.34)}
body[data-route="foundation-motion"][data-color-theme="dark"] :is(.motion-local-play-item,.motion-compact-card)::before{opacity:.46;filter:blur(28px)}

/* The 180ms study is an editorial series, not a dashboard matrix.
   Every interaction receives one full-width row, the same vertical anatomy,
   and an uninterrupted center stage. */
body[data-route="foundation-motion"] .motion-scene-stage--compact-state{
  min-height:0!important;
  padding:clamp(40px,5.5vw,76px)!important;
}
body[data-route="foundation-motion"] .motion-compact-lab{
  display:grid;
  gap:0;
  border-block:1px solid color-mix(in srgb,var(--color-border-subtle) 82%,#9fcfe2);
  border-inline:0;
  border-radius:0;
  overflow:visible;
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-bg-panel) 92%,#fff),color-mix(in srgb,var(--color-bg-panel) 96%,#d8ebf4) 52%,color-mix(in srgb,var(--color-bg-panel) 94%,#f7dfe8));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 52%,transparent);
}
body[data-route="foundation-motion"] .motion-compact-lab::before{
  content:"";
  position:absolute;
  inset:-24%;
  z-index:-1;
  pointer-events:none;
  background:radial-gradient(ellipse at 8% 12%,color-mix(in srgb,#f05b91 11%,transparent),transparent 34%),radial-gradient(ellipse at 92% 88%,color-mix(in srgb,#3ac5d9 12%,transparent),transparent 36%);
  filter:blur(30px);
}
body[data-route="foundation-motion"] .motion-compact-lab>header{
  grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)!important;
  gap:12px clamp(42px,6vw,88px)!important;
  padding:clamp(34px,4.5vw,56px)!important;
  border-bottom:1px solid var(--color-border-subtle)!important;
  background:color-mix(in srgb,var(--color-bg-surface) 28%,transparent);
}
body[data-route="foundation-motion"] .motion-compact-lab>header>strong{
  max-width:16ch!important;
  font-size:clamp(34px,4vw,52px)!important;
}
body[data-route="foundation-motion"] .motion-compact-lab>header>p{
  align-self:end!important;
  max-width:44ch!important;
  font-size:15px!important;
}
body[data-route="foundation-motion"] .motion-compact-grid{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:0!important;
}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(n){
  position:relative;
  display:grid!important;
  box-sizing:border-box;
  grid-column:auto!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(260px,1fr) auto!important;
  gap:var(--lds-space-8)!important;
  min-height:520px!important;
  padding:clamp(40px,5vw,72px)!important;
  overflow:visible!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
body[data-route="foundation-motion"] .motion-compact-card:nth-child(n):not(:last-child){border-bottom:1px solid var(--color-border-subtle)!important}
body[data-route="foundation-motion"] .motion-compact-card::before{
  content:"";
  position:absolute;
  inset:0!important;
  z-index:-1;
  opacity:.34!important;
  filter:none!important;
  transform:none!important;
  background:linear-gradient(145deg,color-mix(in srgb,#f05b91 3%,transparent),transparent 42%,color-mix(in srgb,#41c4da 4%,transparent))!important;
}
body[data-route="foundation-motion"] .motion-compact-card>header{
  display:grid!important;
  grid-column:1!important;
  grid-row:1!important;
  grid-template-columns:minmax(150px,.28fr) minmax(0,1fr)!important;
  gap:var(--lds-space-3) clamp(32px,5vw,72px)!important;
  min-height:104px;
  align-content:start;
  padding:0;
}
body[data-route="foundation-motion"] .motion-compact-card>header span{
  grid-column:1;
  grid-row:1/3;
  align-self:start;
  color:var(--color-guide-text)!important;
  font:700 10px/1.2 var(--lds-font-mono)!important;
  letter-spacing:.11em!important;
}
body[data-route="foundation-motion"] .motion-compact-card>header strong{
  grid-column:2;
  grid-row:1;
  max-width:18ch;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(24px,2.2vw,31px);
  font-weight:750;
  line-height:1.08;
  letter-spacing:var(--lds-heading-tracking-compact,0);
}
body[data-route="foundation-motion"] .motion-compact-card>header small{
  grid-column:2;
  grid-row:2;
  max-width:36ch;
  color:var(--color-text-secondary)!important;
  font-size:13px!important;
  line-height:1.45!important;
}
body[data-route="foundation-motion"] .motion-compact-stage{
  position:relative;
  z-index:3;
  display:grid;
  grid-column:1!important;
  grid-row:2!important;
  align-content:center;
  justify-items:center;
  min-width:0;
  width:100%;
  box-sizing:border-box;
  height:260px;
  min-height:260px;
  padding:var(--lds-space-8) clamp(24px,4vw,56px);
  border-block:1px solid color-mix(in srgb,var(--color-border-subtle) 74%,transparent);
  background:linear-gradient(110deg,transparent,color-mix(in srgb,var(--color-bg-surface) 44%,transparent) 50%,transparent);
}
body[data-route="foundation-motion"] .motion-compact-stage>:is(.motion-compact-segmented,.motion-compact-menu,.motion-compact-field,.motion-compact-disclosure){
  grid-column:1!important;
  width:min(100%,320px)!important;
  justify-self:center!important;
}
body[data-route="foundation-motion"] .motion-compact-menu{
  align-self:center!important;
  width:min(100%,320px)!important;
  height:138px!important;
  min-height:138px!important;
}
body[data-route="foundation-motion"] .motion-compact-field{width:min(100%,360px)!important}
body[data-route="foundation-motion"] :is(.motion-compact-result,.motion-validation-result){
  display:grid;
  grid-column:1!important;
  grid-row:3!important;
  grid-template-columns:minmax(120px,.18fr) minmax(0,1fr);
  align-items:baseline!important;
  align-self:start!important;
  justify-content:stretch;
  column-gap:var(--lds-space-4);
  min-height:var(--lds-touch-target-min)!important;
  margin:0!important;
  color:var(--color-text-secondary)!important;
  font-size:12px!important;
  line-height:1.45!important;
  text-align:left!important;
}
body[data-route="foundation-motion"] :is(.motion-compact-result,.motion-validation-result)>span{
  flex:none;
  color:var(--color-label-emphasis);
  font-family:var(--lds-font-mono);
  font-size:var(--lds-label-emphasis-size);
  font-weight:var(--lds-label-emphasis-weight);
  line-height:var(--lds-label-emphasis-line-height);
  letter-spacing:var(--lds-label-emphasis-tracking);
  text-shadow:var(--lds-label-emphasis-glow);
  text-transform:uppercase;
}
body[data-route="foundation-motion"] .motion-compact-detail{
  width:100%!important;
  min-height:0!important;
}
body[data-route="foundation-motion"] .motion-compact-detail p{margin:0!important}
body[data-route="foundation-motion"] .motion-compact-card--disclosure .motion-compact-stage{
  grid-template-columns:minmax(0,320px);
  grid-template-rows:minmax(138px,auto);
  align-content:center;
  justify-content:center;
  row-gap:0;
  padding-block:28px;
}
body[data-route="foundation-motion"] .motion-compact-card--disclosure .motion-compact-disclosure-group{
  width:100%!important;
  max-width:320px;
  justify-self:center;
  align-self:start;
  height:138px;
}
body[data-route="foundation-motion"] .motion-compact-card--disclosure .motion-compact-disclosure,
body[data-route="foundation-motion"] .motion-compact-card--disclosure .motion-compact-detail{
  width:100%!important;
  height:94px;
  min-height:94px!important;
}
body[data-route="foundation-motion"] .motion-compact-card--disclosure .motion-compact-disclosure{height:44px;min-height:44px!important}
body[data-route="foundation-motion"] .motion-compact-card--disclosure .motion-compact-detail p{margin-top:0!important}
body[data-route="foundation-motion"] .motion-compact-safeguards{display:grid;grid-template-rows:repeat(2,minmax(var(--lds-touch-target-min),auto));padding:0!important}
body[data-route="foundation-motion"] .motion-compact-safeguards>span{display:grid;grid-template-columns:var(--lds-space-8) minmax(0,1fr);align-items:baseline;gap:var(--lds-space-4);padding:var(--lds-space-3) var(--lds-list-item-padding-inline) var(--lds-space-3) calc(var(--lds-list-item-padding-inline) + var(--lds-list-item-accent-width))}
body[data-route="foundation-motion"] .motion-compact-safeguards>span+span{border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-compact-safeguards strong{color:var(--color-text-primary);font-size:var(--lds-font-xs);line-height:1.4}
body[data-route="foundation-motion"] .motion-compact-safeguards small{color:var(--color-text-secondary);font-size:var(--lds-font-xs);font-weight:500;line-height:1.4}
body[data-route="foundation-motion"][data-color-theme="dark"] .motion-compact-lab{
  border-color:color-mix(in srgb,#9fd8ea 17%,var(--color-border-subtle));
  background:linear-gradient(145deg,color-mix(in srgb,var(--color-bg-panel) 96%,#32183d),color-mix(in srgb,var(--color-bg-panel) 97%,#123743) 54%,color-mix(in srgb,var(--color-bg-panel) 96%,#39182d));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 42px 84px -64px rgba(0,0,0,.92);
}
body[data-route="foundation-motion"][data-color-theme="dark"] .motion-compact-stage{background:linear-gradient(110deg,transparent,rgba(255,255,255,.018) 50%,transparent)}

/* ========================================================================
 * LDS dropdown contract — 2026-07-22
 *
 * Custom choice menus and lightweight disclosures share one structural and
 * optical language. Native <select> controls continue to delegate their open
 * list to the operating system, but every LDS-authored popup uses this exact
 * trigger → body → panel → option/detail anatomy.
 * ====================================================================== */
body[data-lds-shell="shared"] .lds-dropdown{
  --lds-dropdown-duration:180ms;
  --lds-dropdown-ease:cubic-bezier(.4,0,.2,1);
  --lds-dropdown-open-surface:var(--lds-relief-surface);
  position:relative;
  box-sizing:border-box;
  width:100%;
}
/* Shared neutral-control hover contract. The cyan family is intentionally
   separate from persistent selection blue and the accessibility focus ring:
   hover previews availability; selection records state; focus locates the
   keyboard. One restrained neon edge replaces route-specific cyan/orange. */
body[data-lds-shell="shared"] :is(
  .lds-dropdown__trigger:hover:not(:focus-visible),
  .motion-focus-field textarea:hover:not(:focus),
  .motion-compact-field input:hover:not(:focus)
){
  border-color:var(--lds-interaction-hover-edge);
  background:
    linear-gradient(135deg,
      color-mix(in srgb,var(--lds-interaction-hover-highlight) 32%,var(--color-bg-panel)),
      color-mix(in srgb,var(--lds-interaction-hover-surface) 8%,var(--color-bg-panel)) 56%,
      color-mix(in srgb,var(--lds-interaction-hover-surface) 3%,var(--color-bg-panel)));
  box-shadow:
    inset 0 1px 0 var(--lds-interaction-hover-highlight),
    0 0 0 1px color-mix(in srgb,var(--lds-interaction-hover-edge) 24%,transparent),
    0 0 7px -2px var(--lds-interaction-hover-glow),
    0 0 18px -7px color-mix(in srgb,var(--lds-interaction-hover-glow) 76%,transparent),
    0 12px 26px -22px color-mix(in srgb,var(--lds-interaction-hover-surface) 48%,transparent);
}
body[data-lds-shell="shared"] .lds-dropdown__trigger{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  margin:0;
  padding:10px 13px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--lds-radius-sm);
  outline:0;
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-panel) 86%,transparent);
  font:700 12px/1.3 var(--lds-font-family);
  text-align:left;
  cursor:pointer;
  transition:border-color var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease),background var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease),box-shadow var(--lds-interaction-hover-duration) var(--lds-interaction-hover-ease);
}
body[data-lds-shell="shared"] .lds-dropdown__trigger--rich{min-height:64px;padding:10px 16px;font:inherit}
body[data-lds-shell="shared"] .lds-dropdown__trigger[aria-expanded="true"]{border-bottom-right-radius:0;border-bottom-left-radius:0}
body[data-lds-shell="shared"] .lds-dropdown__trigger svg{flex:0 0 auto;color:var(--color-text-secondary);filter:none;transition:color var(--lds-dropdown-duration) var(--lds-dropdown-ease)}
body[data-lds-shell="shared"] .lds-dropdown__trigger:hover:not(:focus-visible) svg{color:var(--lds-interaction-hover-icon)}
body[data-lds-shell="shared"] .lds-dropdown__trigger:focus-visible{outline:0;border-color:var(--color-focus-border);box-shadow:0 0 0 1px var(--color-focus-border),0 0 0 4px color-mix(in srgb,var(--color-focus-ring) 58%,transparent)}
/* Restrained Veiled Relief: the closed trigger is receptive, not elevated.
   Opening removes most of the depth so trigger and menu read as one surface. */
body[data-lds-shell="shared"][data-color-theme] .lds-dropdown__trigger{
  border-color:color-mix(in srgb,var(--color-border-standard) 76%,transparent);
  background:var(--lds-relief-surface);
  box-shadow:
    inset var(--lds-dropdown-relief-offset) var(--lds-dropdown-relief-offset) var(--lds-dropdown-relief-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-relief-shadow-strength),transparent),
    inset calc(-1 * var(--lds-dropdown-relief-offset)) calc(-1 * var(--lds-dropdown-relief-offset)) var(--lds-dropdown-relief-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-relief-highlight-strength),transparent);
}
body[data-lds-shell="shared"][data-color-theme] .lds-dropdown__trigger:hover:not(:focus-visible){
  border-color:var(--lds-interaction-hover-edge);
  background:var(--lds-relief-surface);
  box-shadow:
    inset var(--lds-dropdown-relief-offset) var(--lds-dropdown-relief-offset) var(--lds-dropdown-relief-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-relief-shadow-strength),transparent),
    inset calc(-1 * var(--lds-dropdown-relief-offset)) calc(-1 * var(--lds-dropdown-relief-offset)) var(--lds-dropdown-relief-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-relief-highlight-strength),transparent),
    0 0 0 1px color-mix(in srgb,var(--lds-interaction-hover-edge) 24%,transparent),
    0 0 9px -3px var(--lds-interaction-hover-glow);
}
body[data-lds-shell="shared"][data-color-theme] .lds-dropdown__trigger:focus-visible{
  border-color:var(--color-focus-border);
  background:var(--lds-relief-surface);
  box-shadow:
    inset var(--lds-dropdown-relief-offset) var(--lds-dropdown-relief-offset) var(--lds-dropdown-relief-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-relief-shadow-strength),transparent),
    inset calc(-1 * var(--lds-dropdown-relief-offset)) calc(-1 * var(--lds-dropdown-relief-offset)) var(--lds-dropdown-relief-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-relief-highlight-strength),transparent),
    0 0 0 1px var(--color-focus-border),
    0 0 0 4px color-mix(in srgb,var(--color-focus-ring) 58%,transparent);
}
body[data-lds-shell="shared"][data-color-theme] .lds-dropdown__trigger[aria-expanded="true"]{
  border-color:var(--color-border-standard);
  background:var(--lds-dropdown-open-surface);
  box-shadow:
    inset var(--lds-dropdown-open-relief-offset) var(--lds-dropdown-open-relief-offset) var(--lds-dropdown-open-relief-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-open-relief-shadow-strength),transparent),
    inset calc(-1 * var(--lds-dropdown-open-relief-offset)) calc(-1 * var(--lds-dropdown-open-relief-offset)) var(--lds-dropdown-open-relief-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-open-relief-highlight-strength),transparent);
}
body[data-lds-shell="shared"][data-color-theme] .lds-dropdown__trigger[aria-expanded="true"]:hover:not(:focus-visible){
  border-color:var(--lds-interaction-hover-edge);
  background:var(--lds-dropdown-open-surface);
  box-shadow:
    inset var(--lds-dropdown-open-relief-offset) var(--lds-dropdown-open-relief-offset) var(--lds-dropdown-open-relief-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-open-relief-shadow-strength),transparent),
    inset calc(-1 * var(--lds-dropdown-open-relief-offset)) calc(-1 * var(--lds-dropdown-open-relief-offset)) var(--lds-dropdown-open-relief-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-open-relief-highlight-strength),transparent),
    0 0 0 1px color-mix(in srgb,var(--lds-interaction-hover-edge) 24%,transparent),
    0 0 9px -3px var(--lds-interaction-hover-glow);
}
body[data-lds-shell="shared"][data-color-theme] .lds-dropdown__trigger[aria-expanded="true"]:focus-visible{
  border-color:var(--color-focus-border);
  box-shadow:
    inset var(--lds-dropdown-open-relief-offset) var(--lds-dropdown-open-relief-offset) var(--lds-dropdown-open-relief-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-open-relief-shadow-strength),transparent),
    inset calc(-1 * var(--lds-dropdown-open-relief-offset)) calc(-1 * var(--lds-dropdown-open-relief-offset)) var(--lds-dropdown-open-relief-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-open-relief-highlight-strength),transparent),
    0 0 0 1px var(--color-focus-border),
    0 0 0 4px color-mix(in srgb,var(--color-focus-ring) 58%,transparent);
}
body[data-lds-shell="shared"] .lds-dropdown__body{box-sizing:border-box;width:100%;min-width:0}
body[data-lds-shell="shared"] .lds-dropdown__panel{
  position:relative;
  box-sizing:border-box;
  width:100%;
  min-width:0;
  overflow:hidden;
  border:0;
  background:var(--lds-dropdown-open-surface);
  box-shadow:
    inset var(--lds-border-width-subtle) 0 0 var(--color-border-subtle),
    inset calc(var(--lds-border-width-subtle) * -1) 0 0 var(--color-border-subtle),
    inset 0 calc(var(--lds-border-width-subtle) * -1) 0 var(--color-border-subtle),
    var(--lds-dropdown-elevation-offset) var(--lds-dropdown-elevation-offset) var(--lds-dropdown-elevation-blur)
      color-mix(in srgb,var(--lds-relief-shadow) var(--lds-dropdown-elevation-shadow-strength),transparent),
    calc(-1 * var(--lds-dropdown-elevation-offset)) calc(-1 * var(--lds-dropdown-elevation-offset)) var(--lds-dropdown-elevation-blur)
      color-mix(in srgb,var(--lds-relief-light) var(--lds-dropdown-elevation-highlight-strength),transparent);
  transition:box-shadow var(--lds-dropdown-duration) var(--lds-dropdown-ease);
}
body[data-lds-shell="shared"] .lds-dropdown__body[aria-hidden="true"]>.lds-dropdown__panel{visibility:hidden;background:transparent;box-shadow:none}
body[data-lds-shell="shared"] :is(.lds-dropdown__option,.lds-dropdown__detail){position:relative;box-sizing:border-box;width:100%;min-height:var(--lds-list-item-min-height);margin:0;padding:var(--lds-list-item-padding-block) var(--lds-list-item-padding-inline) var(--lds-list-item-padding-block) calc(var(--lds-list-item-padding-inline) + var(--lds-list-item-accent-width));border:0;border-top:1px solid var(--color-border-subtle);color:var(--color-text-secondary);background:transparent;font:700 var(--lds-font-xs)/1.45 var(--lds-font-family);text-align:left}
body[data-lds-shell="shared"] :is(.lds-dropdown__option,.lds-dropdown__detail)::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--lds-list-item-accent-width);background:var(--color-list-item-accent);opacity:0;transition:opacity var(--lds-dropdown-duration) var(--lds-dropdown-ease)}
body[data-lds-shell="shared"] .lds-dropdown__option{cursor:pointer;transition:color var(--lds-dropdown-duration) var(--lds-dropdown-ease),background-color var(--lds-dropdown-duration) var(--lds-dropdown-ease)}
body[data-lds-shell="shared"] .lds-dropdown__option:hover{color:var(--color-text-primary);background:var(--color-list-item-hover-surface)}
body[data-lds-shell="shared"] .lds-dropdown__option:hover::before{opacity:var(--lds-list-item-hover-accent-opacity)}
body[data-lds-shell="shared"] .lds-dropdown__option[aria-checked="true"]{color:var(--color-text-primary);background:var(--color-list-item-selected-surface)}
body[data-lds-shell="shared"] .lds-dropdown__option[aria-checked="true"]::before{opacity:1}
body[data-lds-shell="shared"] .lds-dropdown__option:focus-visible{position:relative;z-index:1;outline:0;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--color-focus-ring) 74%,transparent)}
body[data-lds-shell="shared"] .lds-dropdown__detail{margin:0!important;color:var(--color-text-secondary);background:transparent}
body[data-lds-shell="shared"] .lds-dropdown__detail::before{opacity:0}

@media (max-width:900px){
  body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy>:is(header,p,.motion-spec-list,.motion-reduced-spec){grid-column:1;grid-row:auto}
  body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header{grid-template-columns:1fr}
  body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>p{grid-column:1;grid-row:auto;max-width:56ch}
  body[data-route="foundation-motion"] :is(.motion-local-play-grid,.motion-compact-grid){grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-compact-card:nth-child(n){grid-column:1}
  body[data-route="foundation-motion"] .motion-local-play-item--field{grid-column:1;grid-template-columns:1fr;grid-template-rows:auto minmax(150px,1fr) auto}
  body[data-route="foundation-motion"] .motion-local-play-item--field>header{grid-column:1;grid-row:1}
  body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{grid-column:1;grid-row:2}
  body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{grid-column:1;grid-row:3}
  body[data-route="foundation-motion"] .motion-compact-lab>header{grid-template-columns:1fr!important}
  body[data-route="foundation-motion"] .motion-compact-lab>header>p{grid-column:1!important;grid-row:auto!important}
  body[data-route="foundation-motion"] .motion-compact-grid{grid-template-columns:1fr!important}
  body[data-route="foundation-motion"] .motion-compact-card:nth-child(n){border-right:0!important;border-bottom:1px solid var(--color-border-subtle)!important}
  body[data-route="foundation-motion"] .motion-compact-card:last-child{border-bottom:0!important}
}

body[data-route="foundation-motion"] .motion-scene-stage--material{align-content:center;gap:28px;min-height:620px}
body[data-route="foundation-motion"] .motion-material-aura{position:absolute;left:50%;top:50%;width:min(78%,520px);aspect-ratio:1.8;transform:translate(-50%,-52%);border-radius:50%;background:radial-gradient(ellipse at 30% 42%,color-mix(in srgb,#ffe8bc 16%,transparent),transparent 48%),radial-gradient(ellipse at 70% 56%,color-mix(in srgb,#5fd8ef 17%,transparent),transparent 50%),radial-gradient(ellipse at 52% 48%,color-mix(in srgb,#d66cff 11%,transparent),transparent 62%);filter:blur(16px);animation:motion-material-aura-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-toggle-demo{position:relative;z-index:1;display:grid;place-items:center;gap:24px;min-height:160px}
body[data-route="foundation-motion"] .motion-theme-toggle-demo--material .lgs2-switch{--lgs2-duration:520ms;--lgs2-ease:cubic-bezier(.65,0,.35,1);scale:1.42;pointer-events:none}
body[data-route="foundation-motion"] .motion-theme-toggle-demo .lgs2-lens-cutout,
body[data-route="foundation-motion"] .motion-theme-toggle-demo .lgs2-lens-shell{animation:motion-theme-lens-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-toggle-demo :is(.lgs2-state-light:not(.lgs2-bulb-glow),.lgs2-optical-light){animation:motion-theme-light-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-toggle-demo :is(.lgs2-state-dark:not(.lgs2-bulb-glow),.lgs2-optical-dark){animation:motion-theme-dark-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-toggle-demo .lgs2-bulb-glow--light{animation:motion-theme-bulb-light-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-toggle-demo .lgs2-bulb-glow--dark{animation:motion-theme-bulb-dark-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-state-label{position:relative;width:100%;height:20px;color:var(--color-text-secondary);font-size:13px;text-align:center}
body[data-route="foundation-motion"] .motion-theme-state-label span{position:absolute;inset:0;animation:motion-theme-light-loop 7.2s linear infinite}
body[data-route="foundation-motion"] .motion-theme-state-label span+span{animation-name:motion-theme-dark-loop}
body[data-route="foundation-motion"] .motion-material-sequence{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:min(88%,560px);border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-material-sequence span{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:14px 16px}
body[data-route="foundation-motion"] .motion-material-sequence span+span{border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-material-sequence i{grid-row:1/3;align-self:center;width:7px;height:7px;border:1px solid color-mix(in srgb,#78c8ff 72%,var(--color-border-strong));border-radius:50%;background:var(--color-bg-surface);box-shadow:0 0 0 3px color-mix(in srgb,#78c8ff 8%,transparent)}
body[data-route="foundation-motion"] .motion-material-sequence b{color:var(--color-text-primary);font:700 10px/1.2 var(--lds-font-mono);letter-spacing:.06em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-material-sequence small{color:var(--color-text-secondary);font-size:10px;line-height:1.35}
body[data-route="foundation-motion"] .motion-path-measure{position:absolute;z-index:2;left:50%;bottom:38px;width:min(62%,260px);height:22px;transform:translateX(-50%);color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;letter-spacing:.06em;text-align:center;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-path-measure::before{content:"";position:absolute;left:0;right:0;top:4px;height:1px;background:linear-gradient(90deg,#ff6849,#ff4f83 52%,#42c8dc)}
body[data-route="foundation-motion"] .motion-path-measure i,
body[data-route="foundation-motion"] .motion-path-measure b{position:absolute;top:0;width:8px;height:8px;border:1px solid color-mix(in srgb,#78c8ff 72%,var(--color-border-strong));border-radius:50%;background:var(--color-bg-surface)}
body[data-route="foundation-motion"] .motion-path-measure i{left:0}
body[data-route="foundation-motion"] .motion-path-measure b{right:0}
body[data-route="foundation-motion"] .motion-path-measure span{position:relative;top:12px;padding:0 8px;background:var(--color-bg-surface)}
body[data-route="foundation-motion"] .motion-scene-stage--spatial{--motion-spatial-origin-y:128px;place-items:start center}
body[data-route="foundation-motion"] .motion-mini-surface{position:absolute;z-index:1;top:var(--motion-spatial-origin-y);left:50%;width:min(calc(100% - 72px),300px);overflow:hidden;border:1px solid var(--color-border-subtle);background:color-mix(in srgb,var(--color-bg-panel) 90%,transparent);box-shadow:0 20px 40px -32px color-mix(in srgb,var(--color-text-primary) 54%,transparent);transform:translateX(-50%)}
body[data-route="foundation-motion"] .motion-mini-surface>header{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:5px 18px;padding:18px 20px}
body[data-route="foundation-motion"] .motion-mini-surface>header span{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-mini-surface>header b{color:var(--color-text-primary);font-size:14px}
body[data-route="foundation-motion"] .motion-mini-surface>header em{grid-column:2;grid-row:1/3;align-self:center;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:8px;font-style:normal;letter-spacing:.06em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-mini-detail{display:grid;gap:8px;height:116px;padding:18px 20px;border-top:1px solid var(--color-border-subtle);transform-origin:top;overflow:hidden}
body[data-route="foundation-motion"] .motion-mini-detail i{display:block;height:5px;border-radius:999px;background:linear-gradient(90deg,color-mix(in srgb,#ff527f 70%,var(--color-border-strong)),color-mix(in srgb,#46c9dc 68%,var(--color-border-strong)))}
body[data-route="foundation-motion"] .motion-mini-detail i:nth-child(2){width:78%}
body[data-route="foundation-motion"] .motion-mini-detail i:nth-child(3){width:48%}
body[data-route="foundation-motion"] .motion-mini-detail strong{color:var(--color-text-secondary);font-size:11px;line-height:1.35}
body[data-route="foundation-motion"] .motion-anchor-rule{position:absolute;z-index:2;left:calc(50% + 170px);top:calc(var(--motion-spatial-origin-y) + 34px);display:flex;align-items:center;gap:10px;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-anchor-rule i{display:block;width:46px;height:1px;background:linear-gradient(90deg,color-mix(in srgb,#78c8ff 68%,var(--color-border-strong)),transparent)}
body[data-route="foundation-motion"] .motion-easing-scenes{display:grid;border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-easing-scenes article{display:grid;grid-template-columns:minmax(250px,.34fr) minmax(240px,.28fr) minmax(340px,.38fr);min-height:310px}
body[data-route="foundation-motion"] .motion-easing-scenes article+article{border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-easing-scenes article>div:first-child{display:grid;align-content:center;gap:8px;padding:clamp(28px,4vw,48px)}
body[data-route="foundation-motion"] .motion-easing-scenes strong{color:var(--color-text-primary);font-size:22px}
body[data-route="foundation-motion"] .motion-easing-scenes code{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:12px}
body[data-route="foundation-motion"] .motion-easing-scenes p{max-width:34ch;margin:8px 0 0;color:var(--color-text-secondary);font-size:15px;line-height:1.5}
body[data-route="foundation-motion"] .motion-curve-spec{display:grid;align-content:center;gap:18px;margin:0;padding:clamp(28px,4vw,48px);border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-curve-spec svg{display:block;width:100%;height:auto;overflow:visible}
body[data-route="foundation-motion"] .motion-curve-axis{fill:none;stroke:var(--color-border-subtle);stroke-width:1}
body[data-route="foundation-motion"] .motion-curve-guide{fill:none;stroke:color-mix(in srgb,var(--color-guide-text) 36%,transparent);stroke-width:5;stroke-linecap:round}
body[data-route="foundation-motion"] .motion-curve-trace{fill:none;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:motion-curve-trace-loop var(--lds-motion-velocity-cycle) linear infinite}
body[data-route="foundation-motion"] .motion-curve-spec circle{fill:var(--color-bg-surface);stroke:color-mix(in srgb,#78c8ff 78%,var(--color-border-strong));stroke-width:1.5}
body[data-route="foundation-motion"] .motion-curve-spec figcaption{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding-top:14px;border-top:1px solid var(--color-border-subtle);font-size:11px}
body[data-route="foundation-motion"] .motion-curve-spec figcaption span{color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;letter-spacing:.07em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-curve-spec figcaption strong{font-size:11px}
body[data-route="foundation-motion"] .motion-easing-stage{container-type:inline-size;place-items:center start;border-top:0;border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-easing-stage::after{content:"";position:absolute;right:clamp(28px,5vw,72px);top:20%;bottom:20%;width:1px;background:var(--color-border-strong)}
body[data-route="foundation-motion"] .motion-easing-stage>small{position:absolute;z-index:2;right:28px;bottom:24px;color:var(--color-guide-text);font-family:var(--lds-font-mono);font-size:9px;letter-spacing:.05em;text-transform:uppercase}
body[data-route="foundation-motion"] .motion-moving-surface,
body[data-route="foundation-motion"] .motion-toast-surface{position:relative;z-index:1;display:flex;align-items:center;gap:12px;min-width:180px;padding:16px 18px;border:1px solid color-mix(in srgb,#a8d8ff 34%,var(--color-border-subtle));background:linear-gradient(135deg,color-mix(in srgb,var(--color-bg-panel) 88%,#43214e),color-mix(in srgb,var(--color-bg-panel) 90%,#103b49));box-shadow:0 18px 38px -28px color-mix(in srgb,#6bcaff 46%,transparent)}
body[data-route="foundation-motion"] .motion-moving-surface i,
body[data-route="foundation-motion"] .motion-toast-surface i{width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,#ff607e,#ff8b4b 48%,#35cee3);box-shadow:0 0 14px color-mix(in srgb,#6bcaff 42%,transparent)}
body[data-route="foundation-motion"] .motion-moving-surface b,
body[data-route="foundation-motion"] .motion-toast-surface b{color:var(--color-text-primary);font-size:14px}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-moving-surface,
body[data-route="foundation-motion"][data-color-theme="light"] .motion-toast-surface{
  border-color:color-mix(in srgb,var(--lds-light-specimen-vivid-edge) 58%,var(--color-border-standard));
  background:
    radial-gradient(ellipse 62% 110% at 4% 12%,color-mix(in srgb,var(--lds-light-specimen-vivid-start) 92%,transparent),transparent 70%),
    radial-gradient(ellipse 72% 130% at 98% 82%,color-mix(in srgb,var(--lds-light-specimen-vivid-end) 88%,transparent),transparent 72%),
    linear-gradient(112deg,var(--lds-light-specimen-vivid-start),var(--lds-light-specimen-vivid-middle) 52%,var(--lds-light-specimen-vivid-end));
  box-shadow:
    0 20px 44px -24px var(--lds-light-specimen-vivid-glow),
    inset 0 1px 0 color-mix(in srgb,var(--color-bg-elevated) 82%,transparent);
}
body[data-route="foundation-motion"][data-color-theme="light"] .motion-moving-surface b,
body[data-route="foundation-motion"][data-color-theme="light"] .motion-toast-surface b{
  color:var(--lds-light-specimen-vivid-text);
}
body[data-route="foundation-motion"] .motion-toast-surface{display:grid;grid-template-columns:auto 1fr;min-width:min(100%,280px)}
body[data-route="foundation-motion"] .motion-toast-surface i{grid-row:1/3}
body[data-route="foundation-motion"] .motion-toast-surface small{color:var(--color-text-secondary);font-size:12px}
body[data-route="foundation-motion"] [data-motion-duration-scene="spatial"] .motion-mini-detail{animation:motion-spatial-detail-loop 5.6s linear infinite}
body[data-route="foundation-motion"] [data-motion-easing-scene="standard"] .motion-moving-surface{animation:motion-standard-surface-loop var(--lds-motion-velocity-cycle) linear infinite}
body[data-route="foundation-motion"] [data-motion-easing-scene="enter"] .motion-toast-surface{animation:motion-enter-surface-loop var(--lds-motion-velocity-cycle) linear infinite}
body[data-route="foundation-motion"] [data-motion-easing-scene="exit"] .motion-toast-surface{animation:motion-exit-surface-loop var(--lds-motion-velocity-cycle) linear infinite}

@keyframes motion-theme-lens-loop{
  0%,30%{transform:translateX(0);animation-timing-function:cubic-bezier(.65,0,.35,1)}
  37.222%,67%{transform:translateX(var(--lgs2-lens-travel));animation-timing-function:cubic-bezier(.65,0,.35,1)}
  74.222%,100%{transform:translateX(0)}
}
@keyframes motion-theme-light-loop{
  0%,33.4%{opacity:1}
  35.6%,70.4%{opacity:0}
  72.6%,100%{opacity:1}
}
@keyframes motion-theme-dark-loop{
  0%,33.4%{opacity:0}
  35.6%,70.4%{opacity:1}
  72.6%,100%{opacity:0}
}
@keyframes motion-theme-bulb-light-loop{
  0%,33.4%{opacity:.04}
  35.6%,70.4%{opacity:0}
  72.6%,100%{opacity:.04}
}
@keyframes motion-theme-bulb-dark-loop{
  0%,33.4%{opacity:0}
  35.6%,70.4%{opacity:.035}
  72.6%,100%{opacity:0}
}
@keyframes motion-material-aura-loop{
  0%,30%{opacity:.7;transform:translate(-50%,-52%) scale(.96)}
  37.222%,67%{opacity:1;transform:translate(-50%,-52%) scale(1.04)}
  74.222%,100%{opacity:.7;transform:translate(-50%,-52%) scale(.96)}
}
@keyframes motion-spatial-detail-loop{
  0%{height:116px;padding-block:18px;opacity:1}
  26%{height:116px;padding-block:18px;opacity:1;animation-timing-function:cubic-bezier(.4,0,1,1)}
  31.714%{height:0;padding-block:0;opacity:0}
  63%{height:0;padding-block:0;opacity:0;animation-timing-function:cubic-bezier(.2,0,0,1)}
  68.714%,100%{height:116px;padding-block:18px;opacity:1}
}
@keyframes motion-standard-surface-loop{
  0%,14%{transform:translateX(0);animation-timing-function:var(--lds-ease-standard)}
  34%,64%{transform:translateX(max(0px,calc(100cqw - 276px)))}
  64%{animation-timing-function:var(--lds-ease-standard)}
  84%,100%{transform:translateX(0)}
}
@keyframes motion-enter-surface-loop{
  0%,14%{opacity:0;transform:translateY(40px) scale(.98);animation-timing-function:var(--lds-ease-enter)}
  34%,64%{opacity:1;transform:translateY(0) scale(1)}
  64%{animation-timing-function:var(--lds-ease-exit)}
  84%,100%{opacity:0;transform:translateY(-12px) scale(.99)}
}
@keyframes motion-exit-surface-loop{
  0%,14%{opacity:1;transform:translateY(0) scale(1);animation-timing-function:var(--lds-ease-exit)}
  34%,64%{opacity:0;transform:translateY(-40px) scale(.98)}
  64%{animation-timing-function:var(--lds-ease-enter)}
  84%,100%{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes motion-curve-trace-loop{
  0%,14%{stroke-dashoffset:320;animation-timing-function:var(--lds-ease-standard)}
  34%,64%{stroke-dashoffset:0}
  64%{animation-timing-function:var(--lds-ease-standard)}
  84%,100%{stroke-dashoffset:320}
}
body[data-route="foundation-motion"] .motion-choreography-contract{display:grid;grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);gap:clamp(44px,7vw,112px);padding-top:clamp(72px,9vw,112px)}
body[data-route="foundation-motion"] .motion-choreography-contract>header{display:grid;align-content:start;gap:14px}
body[data-route="foundation-motion"] .motion-choreography-contract dl{display:grid;margin:0;border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-choreography-contract dl>div{display:grid;grid-template-columns:minmax(120px,.3fr) minmax(0,1fr);gap:28px;padding:22px 0;border-bottom:1px solid var(--color-border-subtle)}
body[data-route="foundation-motion"] .motion-choreography-contract dt{color:var(--color-text-primary);font-weight:800}
body[data-route="foundation-motion"] .motion-choreography-contract dd{margin:0;color:var(--color-text-secondary);line-height:1.55}
body[data-route="foundation-breakpoints"] .breakpoint-continuum{display:grid;gap:18px}
body[data-route="foundation-breakpoints"] .breakpoint-ruler{display:grid;grid-template-columns:390fr 378fr 256fr 256fr;color:var(--color-text-primary);font-family:var(--lds-font-mono);font-size:12px}
body[data-route="foundation-breakpoints"] .breakpoint-ruler span{padding-left:10px;border-left:1px solid var(--color-border-strong)}
body[data-route="foundation-breakpoints"] .breakpoint-spectrum{height:18px;border:1px solid color-mix(in srgb,#ff4f7a 55%,var(--color-border-subtle));background:linear-gradient(90deg,#ff6b43 0%,#ff526b 31%,#fb3f84 61%,#cf4bb0 80%,#447acb 100%)}
body[data-route="foundation-breakpoints"] .breakpoint-compositions{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-breakpoints"] .breakpoint-composition{display:grid;grid-template-rows:auto 220px auto;gap:22px;min-width:0;padding:clamp(24px,3.5vw,40px)}
body[data-route="foundation-breakpoints"] .breakpoint-composition+article{border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-breakpoints"] .breakpoint-composition header{display:grid;gap:8px}
body[data-route="foundation-breakpoints"] .breakpoint-frame{display:grid;gap:8px;align-self:stretch;padding:12px;border:1px solid var(--color-border-strong);background:color-mix(in srgb,var(--color-bg-surface) 76%,transparent)}
body[data-route="foundation-breakpoints"] .breakpoint-frame nav,
body[data-route="foundation-breakpoints"] .breakpoint-frame aside,
body[data-route="foundation-breakpoints"] .breakpoint-frame i,
body[data-route="foundation-breakpoints"] .breakpoint-frame main{min-width:0;border:1px solid color-mix(in srgb,#ff4f7a 55%,var(--color-border-subtle));background:color-mix(in srgb,#ff4f7a 11%,var(--color-bg-panel))}
body[data-route="foundation-breakpoints"] .breakpoint-frame main{display:grid;gap:8px;align-content:start;padding:12px}
body[data-route="foundation-breakpoints"] .breakpoint-frame main b{display:block;height:10px;background:linear-gradient(90deg,#ff6849,#ff4480)}
body[data-route="foundation-breakpoints"] .breakpoint-frame main b:nth-child(2){width:78%}
body[data-route="foundation-breakpoints"] .breakpoint-frame main b:nth-child(3){width:54%}
body[data-route="foundation-breakpoints"] .is-mobile .breakpoint-frame{grid-template-rows:26px 1fr}
body[data-route="foundation-breakpoints"] .is-tablet .breakpoint-frame{grid-template:26px 1fr/1fr .55fr}
body[data-route="foundation-breakpoints"] .is-tablet .breakpoint-frame i{grid-column:1/-1}
body[data-route="foundation-breakpoints"] .is-desktop .breakpoint-frame,
body[data-route="foundation-breakpoints"] .is-wide .breakpoint-frame{grid-template-columns:.38fr 1fr .48fr}
body[data-route="foundation-breakpoints"] .is-wide .breakpoint-frame{padding-inline:24px}
body[data-route="foundation-breakpoints"] .breakpoint-pressure-test,
body[data-route="foundation-dark-mode"] .theme-quality-modes{display:grid;grid-template-columns:minmax(100px,.45fr) minmax(260px,1fr) minmax(260px,.9fr);gap:clamp(24px,4vw,56px);align-items:start;padding-block:clamp(40px,6vw,72px);border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-breakpoints"] .breakpoint-pressure-test>div{display:grid;gap:0;border-top:1px solid var(--color-border-subtle)}
body[data-route="foundation-breakpoints"] .breakpoint-pressure-test>div span{padding:14px 0;border-bottom:1px solid var(--color-border-subtle);color:var(--color-text-secondary)}
body[data-route="foundation-dark-mode"] .theme-parity-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
body[data-route="foundation-dark-mode"] .theme-proof{display:grid;gap:28px;min-width:0;padding:clamp(28px,5vw,64px)}
body[data-route="foundation-dark-mode"] .theme-proof+article{border-left:1px solid var(--color-border-subtle)}
body[data-route="foundation-dark-mode"] .theme-proof>header{display:grid;gap:8px}
body[data-route="foundation-dark-mode"] .theme-proof-surface{display:grid;gap:16px;align-content:center;min-height:320px;padding:clamp(28px,4vw,48px);border:1px solid;border-radius:var(--lds-radius-lg)}
body[data-route="foundation-dark-mode"] .theme-proof-surface h3{margin:0;font:700 clamp(26px,3vw,38px)/1.08 "Satoshi",var(--lds-font-family);letter-spacing:var(--lds-heading-tracking-section,-.008em)}
body[data-route="foundation-dark-mode"] .theme-proof-surface p{max-width:38ch;margin:0;font-size:16px;line-height:1.58}
body[data-route="foundation-dark-mode"] .theme-proof-surface>div{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px}
body[data-route="foundation-dark-mode"] .theme-proof.is-light{background:#edf1f7}
body[data-route="foundation-dark-mode"] .theme-proof.is-light>header strong{color:#121722}
body[data-route="foundation-dark-mode"] .theme-proof.is-light>header span{color:#657187}
body[data-route="foundation-dark-mode"] .theme-proof.is-light .theme-proof-surface{color:#121722;border-color:rgba(61,76,98,.22);background:rgba(255,255,255,.82);box-shadow:0 22px 46px -34px rgba(30,43,60,.54)}
body[data-route="foundation-dark-mode"] .theme-proof.is-light .theme-proof-surface p{color:#566173}
body[data-route="foundation-dark-mode"] .theme-proof.is-light .lds-component-kicker{color:#657187}
body[data-route="foundation-dark-mode"] .theme-proof.is-light .lds-button{color:#172033;border-color:rgba(75,97,128,.22)}
body[data-route="foundation-dark-mode"] .theme-proof.is-dark{background:#080e16}
body[data-route="foundation-dark-mode"] .theme-proof.is-dark .theme-proof-surface{color:#f8fbff;border-color:rgba(169,198,229,.22);background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)),#121212;box-shadow:0 18px 48px -36px rgba(0,0,0,.9)}
body[data-route="foundation-dark-mode"] .theme-proof.is-dark .theme-proof-surface p{color:#cbd5e3}
body[data-route="foundation-dark-mode"] .theme-proof.is-dark .lds-component-kicker{color:#a9bbd3}
body[data-route="foundation-dark-mode"] .theme-semantic-contract{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-block:1px solid var(--color-border-subtle)}
body[data-route="foundation-dark-mode"] .theme-semantic-contract article{display:grid;gap:12px;min-width:0;padding:clamp(24px,3.5vw,40px)}
body[data-route="foundation-dark-mode"] .theme-semantic-contract article+article{border-left:1px solid var(--color-border-subtle)}
@media (prefers-reduced-motion:reduce){body[data-route="foundation-motion"] .motion-living-button,body[data-route="foundation-motion"] .motion-focus-field,body[data-route="foundation-motion"] .motion-focus-field textarea,body[data-route="foundation-motion"] .motion-context-trigger,body[data-route="foundation-motion"] .motion-context-chevron,body[data-route="foundation-motion"] .motion-context-menu,body[data-route="foundation-motion"] .motion-context-menu button,body[data-route="foundation-motion"] .motion-context-menu button::before,body[data-route="foundation-motion"] .motion-spatial-panel,body[data-route="foundation-motion"] .motion-scene-button,body[data-route="foundation-motion"] .motion-local-icon-button,body[data-route="foundation-motion"] .motion-local-state-readout span,body[data-route="foundation-motion"] .motion-compact-lab *,body[data-route="foundation-motion"] .motion-compact-segmented button::before,body[data-route="foundation-motion"] .motion-compact-segmented button::after,body[data-route="foundation-motion"] .motion-theme-toggle-demo *,body[data-route="foundation-motion"] .motion-material-aura,body[data-route="foundation-motion"] .motion-mini-detail,body[data-route="foundation-motion"] .motion-moving-surface,body[data-route="foundation-motion"] .motion-toast-surface,body[data-route="foundation-motion"] .motion-curve-trace{transition:none!important;animation:none!important}}

@media (max-width:1040px){
  body[data-route="foundation-motion"] .motion-local-specimens{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-local-specimens>article{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto}
  body[data-route="foundation-motion"] .motion-state-control-lockup{width:min(calc(100% - var(--lds-editorial-inset-stage) - var(--lds-editorial-inset-stage)),var(--lds-specimen-state-control-width))}
  body[data-route="foundation-motion"] .motion-expand-arrow{display:none}
  body[data-route="foundation-motion"] .motion-equivalence{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-route="foundation-motion"] .motion-equivalence>header{grid-column:1/-1;border-bottom:1px solid var(--color-border-subtle)}
  body[data-route="foundation-motion"] .motion-equivalence>div:nth-of-type(1){border-left:0}
  body[data-route="foundation-motion"] .motion-animation-intro{grid-template-columns:minmax(130px,.3fr) minmax(0,1fr)}
  body[data-route="foundation-motion"] .motion-animation-intro p{grid-column:2}
  body[data-route="foundation-motion"] .motion-duration-scene{grid-template-columns:minmax(280px,.46fr) minmax(380px,.54fr)}
  body[data-route="foundation-motion"] .motion-duration-copy{padding:clamp(28px,4vw,44px)}
  body[data-route="foundation-motion"] .motion-anchor-rule{display:none}
  body[data-route="foundation-motion"] .motion-easing-scenes article{grid-template-columns:repeat(2,minmax(0,1fr))}
  body[data-route="foundation-motion"] .motion-easing-scenes article>div:first-child{grid-column:1/-1;border-bottom:1px solid var(--color-border-subtle)}
  body[data-route="foundation-motion"] .motion-curve-spec{border-left:0}
  body[data-route="foundation-motion"] .motion-choreography-contract{grid-template-columns:1fr}
}

@media (max-width:720px){
  body[data-route="foundation-motion"] .motion-equivalence,
  body[data-route="foundation-breakpoints"] .breakpoint-compositions,
  body[data-route="foundation-dark-mode"] .theme-parity-pair,
  body[data-route="foundation-dark-mode"] .theme-semantic-contract,
  body[data-route="foundation-breakpoints"] .breakpoint-pressure-test,
  body[data-route="foundation-dark-mode"] .theme-quality-modes{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-equivalence>div+div,
  body[data-route="foundation-breakpoints"] .breakpoint-composition+article,
  body[data-route="foundation-dark-mode"] .theme-proof+article,
  body[data-route="foundation-dark-mode"] .theme-semantic-contract article+article{border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-equivalence-rule{grid-column:1}
  body[data-route="foundation-motion"] .motion-study-header{grid-template-columns:1fr;gap:30px}
  body[data-route="foundation-motion"] .motion-study-metric{grid-template-columns:minmax(0,1fr) auto;align-items:end}
  body[data-route="foundation-motion"] .motion-study-metric>strong{font-size:clamp(48px,16vw,68px)}
  body[data-route="foundation-motion"] .motion-local-specimens>article{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-local-stage{min-height:var(--lds-editorial-stage-example-min)}
  body[data-route="foundation-motion"] .motion-compose-specimen{transform:none}
  body[data-route="foundation-motion"] .motion-compose-arrow{position:static;justify-self:start;transform:none}
  body[data-route="foundation-motion"] .motion-state-specimen{padding-inline:0}
  body[data-route="foundation-motion"] .motion-state-jewel,
  body[data-route="foundation-motion"] .motion-state-support{padding-inline:0}
  body[data-route="foundation-motion"] .motion-state-control-lockup{min-height:0}
  body[data-route="foundation-motion"] .motion-context-stage{width:100%}
  body[data-route="foundation-motion"] .motion-expand-arrow{display:none}
  body[data-route="foundation-motion"] .motion-state-support{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-state-result+.motion-state-result{border-top:var(--lds-border-width-subtle) solid color-mix(in srgb,var(--color-text-secondary) var(--lds-example-state-divider-strength),transparent);border-left:0}
  body[data-route="foundation-motion"] .motion-use-cases:not(.lds-usage-guide){grid-template-columns:1fr;row-gap:var(--lds-space-3)}
  body[data-route="foundation-motion"] .motion-use-cases:not(.lds-usage-guide)>strong{padding-bottom:var(--lds-space-4);border-bottom:1px solid var(--color-border-subtle)}
  body[data-route="foundation-motion"] .motion-spatial-specimen{grid-template-columns:1fr;padding-inline:clamp(20px,6vw,32px)}
  body[data-route="foundation-motion"] .motion-spatial-toolbar{align-items:stretch;flex-direction:column}
  body[data-route="foundation-motion"] .motion-spatial-actions{justify-content:space-between}
  body[data-route="foundation-motion"] .motion-animation-intro{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-animation-intro p{grid-column:1}
  body[data-route="foundation-motion"] .motion-contract-heading{align-items:flex-start;flex-direction:column}
  body[data-route="foundation-motion"] .motion-duration-scene{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-duration-scene>.motion-scene-stage{min-height:420px;border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-duration-copy>header{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-duration-copy>header span,
  body[data-route="foundation-motion"] .motion-duration-copy>header code{grid-column:1}
  body[data-route="foundation-motion"] .motion-duration-copy>header code{padding:0}
  body[data-route="foundation-motion"] .motion-loop-phases{left:20px;right:20px}
  body[data-route="foundation-motion"] .motion-local-playground>header{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-local-playground>header>p{grid-column:1;grid-row:auto;max-width:none}
  body[data-route="foundation-motion"] .motion-local-play-item{grid-template-columns:1fr;grid-template-rows:auto minmax(96px,1fr) 28px;min-height:240px}
  body[data-route="foundation-motion"] .motion-local-control{grid-column:1;grid-row:2}
  body[data-route="foundation-motion"] .motion-local-state-readout{grid-column:1;grid-row:3}
  body[data-route="foundation-motion"] .motion-local-play-item+section{border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-local-play-item--field{grid-column:1;grid-template-columns:1fr;grid-template-rows:auto minmax(96px,1fr) 28px;min-height:240px}
  body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{grid-column:1;grid-row:2}
  body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{grid-column:1;grid-row:3}
  body[data-route="foundation-motion"] .motion-compact-lab>header{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-compact-lab>header>p{grid-column:1;grid-row:auto}
  body[data-route="foundation-motion"] .motion-compact-card{grid-template-columns:1fr;gap:18px;min-height:260px}
  body[data-route="foundation-motion"] .motion-compact-card>:is(.motion-compact-segmented,.motion-compact-menu,.motion-compact-field,.motion-compact-disclosure,.motion-compact-result,.motion-validation-result,.motion-compact-detail){grid-column:1}
  body[data-route="foundation-motion"] .motion-compact-card:nth-child(n){border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-compact-card:first-child{border-top:0}
  body[data-route="foundation-motion"] .motion-compact-field{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-compact-field>span{grid-column:1}
  body[data-route="foundation-motion"] .motion-compact-field button{justify-self:start}
  body[data-route="foundation-motion"] .motion-scene-stage--material{min-height:640px;padding-inline:20px}
  body[data-route="foundation-motion"] .motion-theme-toggle-demo--material .lgs2-switch{scale:1.18}
  body[data-route="foundation-motion"] .motion-material-sequence{grid-template-columns:1fr;width:100%;margin-bottom:54px}
  body[data-route="foundation-motion"] .motion-material-sequence span+span{border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-path-measure{width:calc(100% - 40px)}
  body[data-route="foundation-motion"] .motion-mini-surface{width:calc(100% - 16px)}
  body[data-route="foundation-motion"] .motion-mini-surface>header{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-mini-surface>header em{grid-column:1;grid-row:auto;justify-self:start;margin-top:4px}
  body[data-route="foundation-motion"] .motion-easing-scenes article{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-curve-spec{border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-easing-stage{min-height:240px;border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-motion"] .motion-choreography-contract dl>div{grid-template-columns:1fr;gap:8px}
  body[data-route="foundation-motion"] .motion-equivalence>header{grid-column:1}
  body[data-route="foundation-motion"] .motion-equivalence>div{border-top:1px solid var(--color-border-subtle);border-left:0}
  body[data-route="foundation-breakpoints"] .breakpoint-composition{grid-template-rows:auto 200px auto}
}

@media (max-width:1040px) {
  body[data-route="foundation-radius-border"] .radius-application-row {
    grid-template-columns:64px minmax(180px,.8fr) minmax(0,1fr);
  }

  body[data-route="foundation-radius-border"] .radius-application-row > p {
    grid-column:2 / -1;
  }
}

@media (max-width:720px) {
  body[data-route="foundation-radius-border"] .radius-role-heading,
  body[data-route="foundation-radius-border"] .radius-corner-intro,
  body[data-route="foundation-radius-border"] .border-role-scale,
  body[data-route="foundation-radius-border"] .radius-border-pairing,
  body[data-route="foundation-dark-mode"] .foundation-darkmode-demo {
    grid-template-columns:1fr;
  }

  body[data-route="foundation-radius-border"] .radius-corner-track {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="foundation-radius-border"] .radius-corner-track figure {
    border-top:1px solid var(--color-border-subtle);
  }

  body[data-route="foundation-radius-border"] .radius-corner-track figure:nth-child(odd) {
    border-left:0;
  }

  body[data-route="foundation-radius-border"] .radius-application-row {
    grid-template-columns:56px minmax(0,1fr);
    gap:16px 20px;
  }

  body[data-route="foundation-radius-border"] .radius-application-demo {
    grid-column:2;
  }

  body[data-route="foundation-radius-border"] .radius-application-row > strong,
  body[data-route="foundation-radius-border"] .radius-application-row > p {
    grid-column:2;
  }

  body[data-route="foundation-radius-border"] .radius-border-pairing > div + div {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }
}

/* ========================================================================
 * Site-wide LDS documentation-shell adoption
 *
 * Route renderers continue to own their protected examples and component
 * internals. This contract standardizes only the surrounding documentation
 * plane: full-width content rail, top-level surfaces, spacing, and sizing.
 * ====================================================================== */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content > .page {
  min-width:0;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content > .page {
  width:100%;
  max-width:none;
  margin:0;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content > .page > :is(
  .foundation-page-grid,
  .foundation-iconography,
  .foundation-editorial-grid,
  .source-component-page,
  .buttons-liquid-glass-page,
  .input-source-page,
  .notification-source-page,
  .table-source-page,
  .tabs-source-page,
  .pagination-page,
  .tl-page,
  .source-badge-indicator-page,
  .modal-spec-page,
  .component-layout,
  .content-grid,
  .atom-spec-layout,
  .ratification-grid
) {
  box-sizing:border-box;
  width:100%;
  min-width:0;
  max-width:none;
  margin:0;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content :is(
  .foundation-page-grid,
  .component-layout,
  .content-grid,
  .atom-spec-layout,
  .ratification-grid
) {
  column-gap:var(--lds-section-gap-standard);
  row-gap:var(--lds-section-gap-standard);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content :is(
  .page > .panel-card,
  .page > .review-card,
  .page > .benchmark-section,
  .foundation-page-grid > .panel-card,
  .component-layout > .panel-card,
  .content-grid > .panel-card,
  .atom-spec-layout > .panel-card,
  .ratification-grid > .review-card,
  .source-component-page > article,
  .source-component-page > section,
  .input-source-page > article,
  .input-source-page > section,
  .notification-source-page > article,
  .notification-source-page > section,
  .table-source-page > article,
  .table-source-page > section,
  .tabs-source-page > article,
  .tabs-source-page > section,
  .modal-spec-page > article,
  .modal-spec-page > section
) {
  border-radius:var(--lds-surface-card-radius);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content :is(
  .component-layout,
  .content-grid,
  .atom-spec-layout,
  .ratification-grid
) > .wide {
  grid-column:1 / -1;
}

@media (max-width:720px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content :is(
    .foundation-page-grid,
    .component-layout,
    .content-grid,
    .atom-spec-layout,
    .ratification-grid
  ) {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content :is(
    .foundation-page-grid,
    .component-layout,
    .content-grid,
    .atom-spec-layout,
    .ratification-grid
  ) > * {
    grid-column:1;
    min-width:0;
  }
}

/* LDS editorial content architecture
   Material, Apple HIG, and Carbon converge on the same order: explain the
   human purpose, show the system in practice, then document anatomy, usage,
   behavior, accessibility, and provenance. The opening is intentionally an
   unboxed full-width composition; containment begins only when comparison or
   interactive demonstration requires it. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] {
  --lds-editorial-hero-title-size:clamp(56px,7vw,92px);
  --lds-editorial-hero-title-line:1.04;
  --lds-editorial-hero-title-weight:850;
  --lds-editorial-hero-title-tracking:var(--lds-heading-tracking-display);
  --lds-editorial-hero-copy-gap:24px;
  --lds-paragraph-gap:var(--lds-space-5,24px);
  --lds-guide-label-color:#aebdd2;
  --lds-guide-label-size:13px;
  --lds-guide-label-weight:800;
  --lds-guide-label-tracking:.09em;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] {
  --lds-guide-label-color:#586579;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-editorial-opening {
  display:grid;
  gap:0;
  min-width:0;
  padding:clamp(24px,4vw,56px) 0 clamp(44px,6vw,84px);
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-editorial-opening-kicker {
  margin:0 0 32px;
  padding:0;
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  line-height:1.3;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-editorial-opening-copy {
  display:grid;
  gap:0;
  min-width:0;
  max-width:1080px;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-editorial-opening h2 {
  max-width:14ch;
  margin:0 0 24px;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:var(--lds-editorial-hero-title-size);
  font-weight:var(--lds-editorial-hero-title-weight);
  line-height:var(--lds-editorial-hero-title-line);
  letter-spacing:var(--lds-editorial-hero-title-tracking);
  text-wrap:balance;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-editorial-opening-copy > p {
  max-width:72ch;
  margin:0;
  color:var(--color-text-secondary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:clamp(19px,1.55vw,23px);
  line-height:1.52;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
  .foundation-editorial-hero-copy,
  .lds-editorial-opening-copy
) > p + p {
  margin-top:var(--lds-paragraph-gap);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-grid {
  display:block;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-grid > .foundation-standard-band {
  display:grid;
  gap:clamp(32px,5vw,72px);
  min-width:0;
  padding:clamp(52px,7vw,96px) 0;
  border-top:0;
  border-bottom:1px solid var(--color-border-subtle);
  border-radius:0;
  background:none;
  box-shadow:none;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-section-head {
  display:grid;
  grid-template-columns:minmax(116px,.19fr) minmax(260px,.72fr) minmax(260px,.55fr);
  gap:clamp(28px,4vw,64px);
  align-items:start;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-section-head > span {
  padding-top:9px;
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-section-head h2 {
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(34px,4.4vw,60px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:var(--lds-heading-tracking-section);
  text-wrap:balance;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-section-head p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(16px,1.25vw,19px);
  line-height:1.62;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-demo {
  min-width:0;
  padding:clamp(28px,4vw,56px);
  border:1px solid var(--color-border-subtle);
  background:color-mix(in srgb,var(--color-bg-surface) 72%,transparent);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid article {
  min-width:0;
  padding:clamp(28px,4vw,48px);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid article + article {
  border-left:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid h3 {
  margin:0 0 20px;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(24px,2.4vw,34px);
  line-height:1.08;
  letter-spacing:var(--lds-heading-tracking-compact);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-accessibility > .bullet-list {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px clamp(32px,5vw,72px);
  margin:0;
  padding:clamp(28px,4vw,48px) 0 0;
  border-top:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-provenance {
  padding:28px 0 56px;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-provenance .quiet-details {
  max-width:76ch;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-section {
  display:grid;
  gap:var(--lds-section-gap-major);
  min-width:0;
  padding:var(--lds-space-8) 0;
  border-top:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-heading {
  display:grid;
  grid-template-columns:128px minmax(220px,.72fr) minmax(280px,.62fr);
  gap:var(--lds-section-gap-standard);
  align-items:start;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-heading > span {
  padding-top:8px;
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.10em;
  text-transform:uppercase;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-heading h2 {
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(34px,4.4vw,60px);
  font-weight:800;
  line-height:1.06;
  letter-spacing:var(--lds-heading-tracking-section);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-heading p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:17px;
  line-height:var(--lds-line-body);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:12px 16px;
  align-content:start;
  min-width:0;
  padding:var(--lds-space-5);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article:not(:nth-child(3n+1)) {
  border-left:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article:nth-child(n+4) {
  border-top:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid code {
  min-width:0;
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid strong {
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:600;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid p {
  grid-column:1 / -1;
  margin:0;
  color:var(--color-text-secondary);
  font-size:14px;
  line-height:1.5;
}

@media (max-width:920px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-section-head,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-heading {
    grid-template-columns:1fr;
    gap:20px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-editorial-opening-kicker,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-section-head > span {
    padding-top:0;
  }
}

@media (max-width:640px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-grid > .foundation-standard-band {
    padding-right:0;
    padding-left:0;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-demo {
    padding:24px 16px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-accessibility > .bullet-list,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid {
    grid-template-columns:1fr;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid article + article {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article:not(:nth-child(3n+1)),
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article:nth-child(n+4) {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-grid article:first-child {
    border-top:0;
  }
}

/* Canonical documentation guide labels.
   This final contract intentionally wins over legacy route-local metadata
   rules so every guide uses one readable size and theme-aware contrast. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
  .foundation-standard-section-head > span,
  .radius-role-heading > span,
  .radius-border-pairing span,
  .lds-public-token-heading > span,
  .spacing-scale-group-head .eyebrow,
  .type2-section-number small
) {
  color:var(--lds-guide-label-color);
  font-size:var(--lds-guide-label-size);
  font-weight:var(--lds-guide-label-weight);
  line-height:1.25;
  letter-spacing:var(--lds-guide-label-tracking);
}

/* Canonical principle rhythm
   Guidance and accessibility statements are parallel editorial rows, not
   scattered bullets. Numbers support scanning without inventing hierarchy. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-principle-list {
  display:grid;
  min-width:0;
  border-top:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-principle-row {
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:16px;
  align-items:start;
  min-width:0;
  padding:18px 0;
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-principle-row > span {
  padding-top:3px;
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.06em;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-principle-row p {
  max-width:68ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.55;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-guidance-grid .foundation-principle-list {
  border-top:0;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-accessibility > .foundation-principle-list {
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(36px,6vw,88px);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-accessibility > .foundation-principle-list .foundation-principle-row:nth-child(even) {
  border-left:1px solid var(--color-border-subtle);
  padding-left:clamp(24px,4vw,56px);
}

/* Canonical public-token ledger
   A token is one record. The table keeps name, resolved value, and purpose in
   one reading row across foundations, components, patterns, and rulings. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table-wrap {
  width:100%;
  min-width:0;
  overflow-x:auto;
  border-block:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table {
  width:100%;
  min-width:680px;
  border:0;
  border-collapse:collapse;
  table-layout:fixed;
  background:transparent;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table caption {
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table .token-name-column { width:38%; }
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table .token-value-column { width:20%; }
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table .token-purpose-column { width:42%; }
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-token-ledger-table .token-name-column { width:42%; }
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-token-ledger-table .token-ledger-purpose-column { width:58%; }

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table :is(th,td) {
  padding:18px 20px;
  border-right:0;
  border-bottom:1px solid var(--color-border-subtle);
  text-align:left;
  vertical-align:top;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table tr:last-child :is(th,td) {
  border-bottom:0;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table thead th {
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table tbody th code {
  color:var(--color-text-primary);
  font-size:13px;
  font-weight:650;
  overflow-wrap:anywhere;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table tbody td {
  color:var(--color-text-secondary);
  font-size:15px;
  line-height:1.5;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-public-token-table tbody td code {
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:600;
  overflow-wrap:anywhere;
}

/* Canonical list rhythm for the remaining documentation catalog. Lists keep
   their semantics while a quiet rule and aligned marker replace loose bullets. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .bullet-list {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  margin:0;
  padding:0;
  border-top:1px solid var(--color-border-subtle);
  list-style:none;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .bullet-list > li {
  position:relative;
  margin:0;
  padding:14px 0 14px 28px;
  border-bottom:1px solid var(--color-border-subtle);
  color:var(--color-text-secondary);
  font-size:15px;
  line-height:1.55;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .bullet-list > li::before {
  content:"";
  position:absolute;
  top:25px;
  left:0;
  width:10px;
  height:1px;
  background:var(--lds-guide-label-color);
}

/* Focus foundation — full-width, state-led specimens. */
body[data-route="foundation-focus"][data-color-theme="dark"] { --focus-specimen-ring:#a8c8ff; }
body[data-route="foundation-focus"][data-color-theme="light"] { --focus-specimen-ring:#8eb8ff; }

body[data-route="foundation-focus"][data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-demo {
  padding:0;
  border:0;
  background:none;
}

body[data-route="foundation-focus"] .focus-foundation-system {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:0;
  min-width:0;
}

body[data-route="foundation-focus"] .focus-foundation-axiom {
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(300px,1fr);
  gap:clamp(36px,7vw,104px);
  align-items:start;
  padding:clamp(28px,4vw,52px) 0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-focus"] .focus-foundation-axiom strong {
  max-width:18ch;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(28px,3.2vw,44px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:var(--lds-heading-tracking-section,-.008em);
}

body[data-route="foundation-focus"] .focus-foundation-axiom p {
  max-width:58ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.6;
}

body[data-route="foundation-focus"] .focus-specimen-list {
  display:grid;
  min-width:0;
}

body[data-route="foundation-focus"] .focus-specimen-row {
  display:grid;
  grid-template-columns:minmax(130px,.34fr) minmax(280px,.82fr) minmax(280px,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  min-width:0;
  padding:clamp(36px,5vw,64px) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="foundation-focus"] .focus-specimen-row > header {
  align-self:start;
}

body[data-route="foundation-focus"] .focus-specimen-row > header span,
body[data-route="foundation-focus"] .focus-state-sample > span {
  display:block;
  margin:0 0 10px;
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:750;
  line-height:1.35;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-route="foundation-focus"] .focus-specimen-row > header h3 {
  margin:0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(22px,2.2vw,30px);
  font-weight:750;
  line-height:1.12;
  letter-spacing:var(--lds-heading-tracking-compact,0);
}

body[data-route="foundation-focus"] .focus-specimen-stage {
  display:grid;
  place-items:center;
  min-width:0;
  min-height:144px;
  padding:32px;
  background:color-mix(in srgb,var(--color-bg-surface) 78%,transparent);
}

body[data-route="foundation-focus"] .focus-specimen-copy strong {
  display:block;
  margin:0 0 10px;
  color:var(--color-text-primary);
  font-size:18px;
  line-height:1.3;
}

body[data-route="foundation-focus"] .focus-specimen-copy p,
body[data-route="foundation-focus"] .focus-state-sample p {
  max-width:52ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:15px;
  line-height:1.55;
}

body[data-route="foundation-focus"] :is(
  .focus-specimen-button,
  .focus-specimen-link,
  .focus-specimen-field input,
  .focus-state-sample.is-selected-focus button
) {
  border-color:var(--color-focus-border);
  outline:var(--lds-focus-ring-width) solid var(--focus-specimen-ring);
  outline-offset:var(--lds-focus-ring-offset);
}

body[data-route="foundation-focus"] .focus-specimen-button,
body[data-route="foundation-focus"] .focus-state-sample button {
  min-height:var(--lds-touch-target-min);
  padding:0 22px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--lds-radius-pill);
  color:var(--color-text-primary);
  background:var(--color-bg-surface);
  font:inherit;
  font-weight:700;
}

body[data-route="foundation-focus"] .focus-specimen-link {
  width:max-content;
  max-width:100%;
  color:var(--color-text-primary);
  font-size:17px;
  font-weight:700;
  text-underline-offset:5px;
}

body[data-route="foundation-focus"] .focus-specimen-field {
  display:grid;
  gap:9px;
  width:min(100%,320px);
  color:var(--color-text-secondary);
  font-size:13px;
  font-weight:700;
}

body[data-route="foundation-focus"] .focus-specimen-field input {
  width:100%;
  min-height:48px;
  padding:0 15px;
  border:1px solid var(--color-border-strong);
  border-radius:var(--lds-radius-md);
  color:var(--color-text-primary);
  background:var(--color-bg-surface);
  font:inherit;
  font-size:15px;
}

body[data-route="foundation-focus"] .focus-state-comparison {
  align-items:start;
}

body[data-route="foundation-focus"] .focus-state-grid {
  grid-column:2 / -1;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-width:0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-focus"] .focus-state-sample {
  display:grid;
  align-content:start;
  gap:16px;
  min-width:0;
  padding:24px;
}

body[data-route="foundation-focus"] .focus-state-sample + .focus-state-sample {
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-focus"] .focus-state-sample > span {
  margin:0;
}

body[data-route="foundation-focus"] .focus-state-sample button {
  justify-self:start;
  min-width:104px;
}

body[data-route="foundation-focus"] .focus-state-sample.is-hovered button {
  border-color:color-mix(in srgb,var(--color-border-strong) 72%,var(--color-accent));
  background:color-mix(in srgb,var(--color-bg-surface) 88%,var(--color-accent));
}

body[data-route="foundation-focus"] .focus-state-sample:is(.is-selected,.is-selected-focus) button {
  border:1px solid color-mix(in srgb,var(--color-accent) 78%,var(--color-border-strong));
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--color-accent) 78%,var(--color-border-strong));
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-elevated) 78%,var(--color-accent));
}

body[data-route="foundation-focus"][data-color-theme="dark"] .focus-state-sample:is(.is-selected,.is-selected-focus) button {
  color:#f7fbff;
  background:color-mix(in srgb,#132437 76%,var(--color-accent));
}

body[data-route="foundation-focus"] .focus-state-comparison > .focus-specimen-copy {
  grid-column:2 / -1;
  padding-top:0;
}

@media (max-width:1040px) {
  body[data-route="foundation-focus"] .focus-specimen-row {
    grid-template-columns:112px minmax(260px,.8fr) minmax(240px,1fr);
    gap:28px;
  }

  body[data-route="foundation-focus"] .focus-state-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="foundation-focus"] .focus-state-sample:nth-child(3) {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-route="foundation-focus"] .focus-state-sample:nth-child(4) {
    border-top:1px solid var(--color-border-subtle);
  }
}

@media (max-width:760px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-accessibility > .foundation-principle-list,
  body[data-route="foundation-focus"] .focus-foundation-axiom,
  body[data-route="foundation-focus"] .focus-specimen-row {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-accessibility > .foundation-principle-list .foundation-principle-row:nth-child(even) {
    border-left:0;
    padding-left:0;
  }

  body[data-route="foundation-focus"] .focus-specimen-stage {
    justify-items:start;
    min-height:120px;
    padding:28px 20px;
  }

  body[data-route="foundation-focus"] .focus-state-grid,
  body[data-route="foundation-focus"] .focus-state-comparison > .focus-specimen-copy {
    grid-column:1;
  }

  body[data-route="foundation-focus"] .focus-state-grid {
    grid-template-columns:minmax(0,1fr);
  }

body[data-route="foundation-focus"] .focus-state-sample + .focus-state-sample,
body[data-route="foundation-focus"] .focus-state-sample:nth-child(3) {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

}

/* The Elevation comparison is an editorial progression, not a card within a
   card. Keep this route-specific release after the shared containment layer. */
body[data-route="foundation-elevation"][data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-demo {
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

/* Icon Sizing foundation — true-scale, native-symbol specimens.
   The route distinguishes four independent concerns: asset artwork, icon box,
   optical alignment, and interactive target. Measurements name the icon box;
   real LDS components demonstrate use without replacing the icon system. */
body[data-route="foundation-icon-sizing"][data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .foundation-standard-demo {
  padding:0;
  border:0;
  background:none;
  box-shadow:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-foundation,
body[data-route="foundation-icon-sizing"] .icon-sizing-context-grid {
  display:grid;
  min-width:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-glyph {
  display:block;
  flex:0 0 auto;
  color:currentColor;
  overflow:visible;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-width:0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-item {
  display:grid;
  grid-template-rows:minmax(190px,1fr) auto;
  min-width:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-item + .icon-sizing-scale-item {
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-stage {
  position:relative;
  display:grid;
  place-items:center;
  min-width:0;
  padding:var(--lds-space-6) var(--lds-space-5);
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-surface) 48%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-box {
  position:relative;
  z-index:1;
  display:grid;
  place-items:center;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-box::before {
  content:"";
  position:absolute;
  inset:0;
  border:1px solid color-mix(in srgb,var(--color-accent) 54%,var(--color-border-subtle));
  background:color-mix(in srgb,var(--color-accent) 7%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-box .icon-sizing-glyph {
  position:relative;
  z-index:1;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-measure {
  position:absolute;
  top:var(--lds-space-4);
  left:50%;
  display:grid;
  grid-template-columns:18px auto 18px;
  gap:var(--lds-space-2);
  align-items:center;
  color:var(--lds-guide-label-color);
  transform:translateX(-50%);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-measure i {
  height:1px;
  background:currentColor;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-measure em {
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-style:normal;
  font-weight:700;
  line-height:1;
  letter-spacing:.04em;
  white-space:nowrap;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-baseline {
  position:absolute;
  right:var(--lds-space-5);
  bottom:var(--lds-space-5);
  left:var(--lds-space-5);
  height:1px;
  background:var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-copy {
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:var(--lds-space-1) var(--lds-space-3);
  min-width:0;
  padding:var(--lds-space-5);
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-copy > span {
  grid-row:1 / 3;
  padding-top:3px;
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.06em;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-copy h3,
body[data-route="foundation-icon-sizing"] .icon-sizing-scale-copy p {
  margin:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-copy h3 {
  color:var(--color-text-primary);
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:17px;
  font-weight:750;
  line-height:1.25;
  letter-spacing:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-copy p {
  color:var(--color-text-secondary);
  font-size:14px;
  line-height:1.45;
}

/* Scale study: dimensions are production pixels; artwork is enlarged only for
   inspection. The true-size rail remains a literal 1:1 browser render. */
body[data-route="foundation-icon-sizing"] .icon-sizing-scale-study {
  min-width:0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-head {
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(320px,.8fr);
  gap:clamp(36px,7vw,104px);
  align-items:end;
  padding:clamp(40px,5vw,68px) clamp(24px,4vw,56px);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-head h3 {
  max-width:17ch;
  margin:var(--lds-space-3) 0 0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(32px,4vw,54px);
  font-weight:800;
  line-height:1.03;
  letter-spacing:var(--lds-heading-tracking-section);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-head p {
  max-width:58ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.58;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-head p strong {
  color:var(--color-text-primary);
  font-weight:750;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-inspection-key {
  display:inline-flex;
  gap:9px;
  align-items:center;
  margin-top:var(--lds-space-4);
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.04em;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-inspection-key i {
  width:24px;
  height:1px;
  background:linear-gradient(90deg,#7957d7,#e35b8f);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-width:0;
  padding:clamp(30px,4vw,54px) clamp(20px,3vw,44px) 0;
  border-top:1px solid var(--color-border-subtle);
  background-color:color-mix(in srgb,var(--color-bg-surface) 62%,transparent);
  background-image:radial-gradient(circle,color-mix(in srgb,var(--color-text-muted) 28%,transparent) .75px,transparent .9px);
  background-size:12px 12px;
  background-position:6px 6px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-item {
  display:grid;
  grid-template-rows:300px auto;
  min-width:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-item + .icon-sizing-scale-item {
  border-left:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-stage {
  position:relative;
  display:flex;
  justify-content:center;
  align-items:flex-end;
  min-width:0;
  min-height:300px;
  padding:42px 34px 52px;
  color:var(--color-text-primary);
  background:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-inspection-frame {
  position:relative;
  display:grid;
  place-items:center;
  width:var(--icon-inspection-size);
  height:var(--icon-inspection-size);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-box {
  display:grid;
  place-items:center;
  width:var(--icon-inspection-size);
  height:var(--icon-inspection-size);
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-accent) 5%,var(--color-bg-surface));
  border:1px solid color-mix(in srgb,var(--color-accent) 64%,var(--color-border-subtle));
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-box::before {display:none;}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension {
  position:absolute;
  z-index:2;
  display:flex;
  align-items:center;
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  line-height:1;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension em {
  font-style:normal;
  font-variant-numeric:tabular-nums;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension i {background:currentColor;}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension.dimension-x {
  right:0;
  bottom:-25px;
  left:0;
  gap:7px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension.dimension-x i {height:1px;flex:1;}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension.dimension-y {
  top:0;
  right:-27px;
  bottom:0;
  flex-direction:column;
  gap:7px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-dimension.dimension-y i {width:1px;flex:1;}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-baseline {
  right:16px;
  bottom:26px;
  left:16px;
  background:color-mix(in srgb,var(--color-text-secondary) 32%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-copy {
  grid-template-columns:34px minmax(0,1fr);
  min-height:112px;
  padding:22px 16px 28px;
  background:color-mix(in srgb,var(--color-bg-surface) 82%,transparent);
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-copy h3 {font-size:16px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-copy p {font-size:13px;}

body[data-route="foundation-icon-sizing"] .icon-sizing-true-size {
  display:grid;
  grid-template-columns:minmax(250px,.7fr) minmax(0,1.3fr);
  gap:clamp(36px,7vw,100px);
  align-items:center;
  padding:clamp(32px,4vw,52px) clamp(24px,4vw,56px);
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-copy strong {
  display:block;
  margin-top:8px;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:24px;
  line-height:1.15;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-copy p {
  margin:8px 0 0;
  color:var(--color-text-secondary);
  font-size:14px;
  line-height:1.45;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-rail {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  min-height:112px;
  border:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item {
  display:grid;
  grid-template-rows:42px auto auto;
  place-items:center;
  align-content:center;
  gap:3px;
  min-width:0;
  padding:14px 8px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item + .icon-sizing-true-size-item {border-left:1px solid var(--color-border-subtle);}
body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item i {display:grid;place-items:center;width:42px;height:42px;color:var(--color-text-primary);font-style:normal;}
body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item em {color:var(--color-text-primary);font-family:var(--lds-font-mono);font-size:11px;font-style:normal;font-weight:700;}
body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item small {color:var(--color-text-secondary);font-size:11px;}

body[data-route="foundation-icon-sizing"] :is(.icon-sizing-construction,.icon-sizing-keylines,.icon-sizing-craft,.icon-sizing-alignment,.icon-sizing-qa) {
  min-width:0;
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-construction {
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(440px,1.22fr);
  gap:clamp(48px,8vw,120px);
  align-items:center;
  padding:clamp(64px,8vw,112px) 0;
}

body[data-route="foundation-icon-sizing"] :is(.icon-sizing-construction-copy,.icon-sizing-craft-head,.icon-sizing-alignment-copy) h3,
body[data-route="foundation-icon-sizing"] .icon-sizing-keylines-head h3,
body[data-route="foundation-icon-sizing"] .icon-sizing-qa-head h3 {
  margin:var(--lds-space-3) 0 0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(32px,4vw,56px);
  font-weight:800;
  line-height:1.02;
  letter-spacing:var(--lds-heading-tracking-section);
}

body[data-route="foundation-icon-sizing"] :is(.icon-sizing-construction-copy,.icon-sizing-craft-head,.icon-sizing-alignment-copy) > p,
body[data-route="foundation-icon-sizing"] .icon-sizing-keylines-head > div > p {
  max-width:58ch;
  margin:var(--lds-space-4) 0 0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.62;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-metric-ledger {
  display:grid;
  margin:var(--lds-space-6) 0 0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-metric-ledger div {
  display:grid;
  grid-template-columns:96px minmax(0,1fr);
  gap:var(--lds-space-3);
  padding:var(--lds-space-3) 0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-metric-ledger div + div {
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-metric-ledger :is(dt,dd) {
  margin:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-metric-ledger dt {
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:13px;
  font-weight:700;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-metric-ledger dd {
  color:var(--color-text-secondary);
  font-size:14px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint {
  display:grid;
  gap:var(--lds-space-4);
  justify-items:center;
  min-width:0;
  margin:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint-stage {
  position:relative;
  display:grid;
  place-items:center;
  width:min(100%,520px);
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--color-border-strong);
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-surface) 88%,transparent);
  box-shadow:inset 0 0 0 8.333% color-mix(in srgb,var(--color-accent) 4%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-unit-grid {
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right,color-mix(in srgb,var(--color-border-strong) 30%,transparent) 1px,transparent 1px),
    linear-gradient(to bottom,color-mix(in srgb,var(--color-border-strong) 30%,transparent) 1px,transparent 1px);
  background-size:calc(100% / 24) calc(100% / 24);
  pointer-events:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-axis {
  position:absolute;
  z-index:2;
  background:color-mix(in srgb,var(--color-focus-ring) 56%,transparent);
  pointer-events:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-axis.axis-x {left:0;right:0;top:50%;height:1px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-axis.axis-y {top:0;bottom:0;left:50%;width:1px;}

body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint-glyph {
  position:relative;
  z-index:3;
  width:83.333%;
  height:83.333%;
  color:var(--color-text-primary);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-trim-label {
  position:absolute;
  z-index:4;
  top:var(--lds-space-3);
  left:var(--lds-space-3);
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:700;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-optical-point {
  position:absolute;
  z-index:5;
  top:50%;
  left:50%;
  width:9px;
  height:9px;
  border:2px solid var(--color-focus-ring);
  border-radius:50%;
  background:var(--color-bg-surface);
  transform:translate(-50%,-50%);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint figcaption {
  display:grid;
  gap:var(--lds-space-1);
  width:min(100%,520px);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint figcaption strong {color:var(--color-text-primary);font-size:15px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint figcaption span {color:var(--color-text-secondary);font-size:14px;line-height:1.45;}

body[data-route="foundation-icon-sizing"] .icon-sizing-keylines {
  padding:clamp(64px,8vw,104px) 0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keylines-head {
  display:grid;
  grid-template-columns:minmax(120px,.22fr) minmax(0,1fr);
  gap:var(--lds-space-6);
  align-items:start;
  margin-bottom:clamp(40px,6vw,72px);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keylines-head h3 {margin:0;}

body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation {
  display:grid;
  grid-template-columns:minmax(170px,.55fr) minmax(180px,.55fr) minmax(300px,1fr);
  gap:clamp(24px,4vw,56px);
  align-items:baseline;
  padding:var(--lds-space-4) 0;
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation strong {
  color:var(--color-text-primary);
  font-size:15px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation > span {
  color:var(--color-focus-ring);
  font-family:var(--lds-font-mono);
  font-size:16px;
  font-weight:700;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation p {
  margin:0;
  color:var(--color-text-secondary);
  font-size:14px;
  line-height:1.5;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item {
  display:grid;
  gap:var(--lds-space-4);
  min-width:0;
  margin:0;
  padding:var(--lds-space-5);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item + .icon-sizing-keyline-item {border-left:1px solid var(--color-border-subtle);}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-stage {
  position:relative;
  display:grid;
  place-items:center;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-surface) 62%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-stage .icon-sizing-glyph {
  position:relative;
  z-index:2;
  width:50%;
  height:50%;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-shape {
  position:absolute;
  z-index:3;
  border:1px solid color-mix(in srgb,var(--color-focus-ring) 70%,transparent);
  background:transparent;
}

body[data-route="foundation-icon-sizing"] .keyline-square .icon-sizing-keyline-shape {width:83.333%;height:83.333%;}
body[data-route="foundation-icon-sizing"] .keyline-circle .icon-sizing-keyline-shape {width:83.333%;height:83.333%;border-radius:50%;}
body[data-route="foundation-icon-sizing"] .keyline-vertical .icon-sizing-keyline-shape {width:66.667%;height:83.333%;}
body[data-route="foundation-icon-sizing"] .keyline-horizontal .icon-sizing-keyline-shape {width:83.333%;height:66.667%;}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-silhouette {
  position:relative;
  z-index:2;
  display:block;
  background:color-mix(in srgb,var(--color-focus-ring) 24%,var(--color-bg-surface));
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 20%,transparent),0 0 28px color-mix(in srgb,var(--color-focus-ring) 10%,transparent);
}

body[data-route="foundation-icon-sizing"] .keyline-square .icon-sizing-keyline-silhouette {width:83.333%;height:83.333%;}
body[data-route="foundation-icon-sizing"] .keyline-circle .icon-sizing-keyline-silhouette {width:83.333%;height:83.333%;border-radius:50%;}
body[data-route="foundation-icon-sizing"] .keyline-vertical .icon-sizing-keyline-silhouette {width:66.667%;height:83.333%;}
body[data-route="foundation-icon-sizing"] .keyline-horizontal .icon-sizing-keyline-silhouette {width:83.333%;height:66.667%;}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item figcaption {
  display:flex;
  gap:var(--lds-space-3);
  align-items:baseline;
  justify-content:space-between;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item strong {color:var(--color-text-primary);font-size:16px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item figcaption > span {display:grid;gap:4px;text-align:right;}
body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item code {color:var(--color-text-primary);font-family:var(--lds-font-mono);font-size:12px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item em {color:var(--color-text-muted);font-family:var(--lds-font-mono);font-size:11px;font-style:normal;}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-note {
  max-width:72ch;
  margin:var(--lds-space-5) 0 0;
  color:var(--color-text-secondary);
  font-size:14px;
  line-height:1.58;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-note strong {color:var(--color-text-primary);}

body[data-route="foundation-icon-sizing"] .icon-sizing-craft {
  padding:clamp(64px,8vw,104px) 0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-craft-head {
  display:grid;
  grid-template-columns:minmax(130px,.22fr) minmax(300px,.78fr) minmax(280px,.7fr);
  gap:var(--lds-space-6);
  align-items:start;
  margin-bottom:clamp(40px,6vw,72px);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-craft-head h3 {margin:0;}
body[data-route="foundation-icon-sizing"] .icon-sizing-craft-head > p {margin:0;}

body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid article {
  display:grid;
  align-content:start;
  min-width:0;
  padding:var(--lds-space-5);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid article + article {border-left:1px solid var(--color-border-subtle);}
body[data-route="foundation-icon-sizing"] .icon-sizing-craft-index {color:var(--lds-guide-label-color);font-family:var(--lds-font-mono);font-size:12px;font-weight:700;}
body[data-route="foundation-icon-sizing"] .icon-sizing-craft-diagram {display:block;width:100%;margin:var(--lds-space-4) 0;color:var(--color-text-primary);}
body[data-route="foundation-icon-sizing"] .craft-guide {fill:none;stroke:var(--color-border-subtle);stroke-width:1;}
body[data-route="foundation-icon-sizing"] .craft-mark {fill:none;stroke:currentColor;stroke-width:16;stroke-linecap:butt;stroke-linejoin:miter;}
body[data-route="foundation-icon-sizing"] .craft-measure {fill:none;stroke:var(--color-focus-ring);stroke-width:2;}
body[data-route="foundation-icon-sizing"] .corner-mark {stroke-linejoin:round;}
body[data-route="foundation-icon-sizing"] .terminal-mark {stroke-width:12;}
body[data-route="foundation-icon-sizing"] .craft-point {fill:var(--color-focus-ring);}
body[data-route="foundation-icon-sizing"] .craft-angle {fill:none;stroke:var(--color-focus-ring);stroke-width:2;}
body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid h4 {margin:0;color:var(--color-text-primary);font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));font-size:23px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid p {margin:var(--lds-space-3) 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.55;}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy {
  display:grid;
  grid-template-columns:minmax(280px,.85fr) minmax(380px,1.15fr);
  gap:clamp(40px,7vw,104px);
  align-items:center;
  min-width:0;
  padding:clamp(44px,6vw,80px) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-copy h3 {
  max-width:18ch;
  margin:var(--lds-space-3) 0 0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(28px,3.2vw,44px);
  font-weight:800;
  line-height:1.08;
  letter-spacing:var(--lds-heading-tracking-section);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-copy p {
  max-width:52ch;
  margin:var(--lds-space-4) 0 0;
  color:var(--color-text-secondary);
  font-size:16px;
  line-height:1.58;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-stage {
  display:grid;
  grid-template-columns:minmax(120px,.46fr) minmax(220px,1fr);
  gap:clamp(32px,5vw,72px);
  align-items:center;
  min-width:0;
  padding:var(--lds-space-6);
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-target-demo,
body[data-route="foundation-icon-sizing"] .icon-sizing-icon-action {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:var(--lds-touch-target-min);
  height:var(--lds-touch-target-min);
  min-width:var(--lds-touch-target-min);
  min-height:var(--lds-touch-target-min);
  padding:0;
  border:1px solid var(--color-border-strong);
  border-radius:var(--lds-radius-pill);
  color:var(--color-text-primary);
  background:var(--color-bg-elevated);
  box-shadow:var(--lds-shadow-1);
  cursor:pointer;
}

body[data-route="foundation-icon-sizing"] :is(.icon-sizing-target-demo,.icon-sizing-icon-action):focus-visible {
  outline:var(--lds-focus-ring-width) solid var(--color-focus-ring);
  outline-offset:var(--lds-focus-ring-offset);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-target-outline {
  position:absolute;
  inset:-1px;
  border:1px dashed color-mix(in srgb,var(--color-focus-ring) 72%,transparent);
  border-radius:inherit;
  pointer-events:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-box-outline {
  position:absolute;
  width:var(--lds-icon-md);
  height:var(--lds-icon-md);
  border:1px solid color-mix(in srgb,var(--color-accent) 70%,transparent);
  pointer-events:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-key {
  display:grid;
  gap:0;
  margin:0;
  padding:0;
  list-style:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-key li {
  display:grid;
  grid-template-columns:76px minmax(0,1fr);
  gap:var(--lds-space-3);
  padding:var(--lds-space-3) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-key li:first-child {
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-key b {
  color:var(--color-text-primary);
  font-family:var(--lds-font-mono);
  font-size:13px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-key span {
  color:var(--color-text-secondary);
  font-size:14px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-alignment {
  display:grid;
  grid-template-columns:minmax(280px,.72fr) minmax(520px,1.28fr);
  gap:clamp(48px,7vw,104px);
  align-items:center;
  padding:0 0 clamp(64px,8vw,104px);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens figure {
  display:grid;
  gap:var(--lds-space-4);
  min-width:0;
  margin:0;
  padding:var(--lds-space-5);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens figure + figure {border-left:1px solid var(--color-border-subtle);}

body[data-route="foundation-icon-sizing"] :is(.icon-sizing-optical-stage,.icon-sizing-type-stage) {
  position:relative;
  display:flex;
  gap:var(--lds-space-2);
  align-items:center;
  justify-content:center;
  min-height:152px;
  overflow:hidden;
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-surface) 58%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-center-cross,
body[data-route="foundation-icon-sizing"] .icon-sizing-center-cross::after {
  position:absolute;
  content:"";
  background:color-mix(in srgb,var(--color-focus-ring) 55%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-center-cross {inset:0 auto 0 50%;width:1px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-center-cross::after {top:50%;left:-76px;width:152px;height:1px;}

body[data-route="foundation-icon-sizing"] .icon-sizing-optical-stage .icon-sizing-glyph {position:relative;z-index:1;}

body[data-route="foundation-icon-sizing"] .icon-sizing-type-stage strong {
  position:relative;
  z-index:2;
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:16px;
  line-height:24px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-type-guides {
  position:absolute;
  inset:44px 12px auto;
  height:40px;
  border-block:1px solid color-mix(in srgb,var(--color-focus-ring) 48%,transparent);
  background:linear-gradient(to bottom,transparent 23px,color-mix(in srgb,var(--color-border-strong) 50%,transparent) 24px,transparent 25px);
  pointer-events:none;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens figcaption {display:grid;gap:var(--lds-space-1);}
body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens figcaption strong {color:var(--color-text-primary);font-size:15px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens figcaption span {color:var(--color-text-secondary);font-size:13px;line-height:1.45;}

body[data-route="foundation-icon-sizing"] .icon-sizing-context-grid {
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-context {
  display:grid;
  grid-template-columns:minmax(180px,.48fr) minmax(280px,.78fr) minmax(280px,1fr);
  gap:clamp(28px,5vw,72px);
  align-items:center;
  min-width:0;
  padding:clamp(28px,4vw,48px) 0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-context + .icon-sizing-context {
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-context header span {
  color:var(--lds-guide-label-color);
  font-family:var(--lds-font-mono);
  font-size:12px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-context h3 {
  margin:var(--lds-space-2) 0 0;
  color:var(--color-text-primary);
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(22px,2.2vw,30px);
  font-weight:750;
  line-height:1.12;
  letter-spacing:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-context > p {
  max-width:50ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:15px;
  line-height:1.58;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa {
  padding:clamp(64px,8vw,104px) 0 0;
  border-bottom:0;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa-head {
  display:grid;
  grid-template-columns:minmax(120px,.22fr) minmax(0,1fr);
  gap:var(--lds-space-6);
  align-items:start;
  margin-bottom:clamp(36px,5vw,56px);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa-head h3 {max-width:17ch;margin:0;}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid article {
  display:grid;
  align-content:start;
  min-width:0;
  padding:var(--lds-space-5);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid article + article {border-left:1px solid var(--color-border-subtle);}

body[data-route="foundation-icon-sizing"] .icon-sizing-qa-stage {
  display:grid;
  place-items:center;
  min-height:176px;
  margin-bottom:var(--lds-space-4);
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-surface) 62%,transparent);
}

body[data-route="foundation-icon-sizing"] .is-correct .icon-sizing-qa-stage {box-shadow:inset 0 -3px 0 var(--color-status-success-text,var(--color-accent));}
body[data-route="foundation-icon-sizing"] .is-forbidden .icon-sizing-qa-stage {box-shadow:inset 0 -3px 0 var(--color-status-danger-text,#d94c62);}
body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid strong {color:var(--color-text-primary);font-size:16px;}
body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid p {margin:var(--lds-space-2) 0 0;color:var(--color-text-secondary);font-size:14px;line-height:1.5;}
body[data-route="foundation-icon-sizing"] .icon-sizing-text-glyph {font-family:Georgia,serif;font-size:64px;line-height:1;transform:translateY(-5px);}
body[data-route="foundation-icon-sizing"] .icon-sizing-distorted {display:block;transform:scaleX(1.8);transform-origin:center;}

body[data-route="foundation-icon-sizing"] .icon-sizing-context-stage {
  display:flex;
  flex-wrap:wrap;
  gap:var(--lds-space-3);
  align-items:center;
  min-width:0;
  min-height:112px;
  padding:var(--lds-space-5);
  border:1px solid var(--color-border-subtle);
  color:var(--color-text-primary);
  background:color-mix(in srgb,var(--color-bg-surface) 64%,transparent);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-context-stage.metadata-example {
  font-family:"Hanken Grotesk",var(--lds-font-ui,var(--lds-font-family));
  font-size:14px;
  color:var(--color-text-secondary);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-labeled-action {
  gap:var(--lds-space-2);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-target-note {
  color:var(--color-text-muted);
  font-family:var(--lds-font-mono);
  font-size:12px;
  line-height:1.4;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-empty-state {
  flex-wrap:nowrap;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-empty-state > div {
  display:grid;
  gap:var(--lds-space-1);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-empty-state strong {
  color:var(--color-text-primary);
  font-size:16px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-empty-state span {
  color:var(--color-text-secondary);
  font-size:14px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  min-width:0;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison article {
  display:grid;
  align-content:start;
  gap:var(--lds-space-4);
  min-width:0;
  padding:var(--lds-space-6);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison article + article {
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-icon-sizing"] .icon-sizing-access-demo {
  display:flex;
  gap:var(--lds-space-3);
  align-items:center;
  min-height:var(--lds-touch-target-min);
  color:var(--color-text-primary);
  font-size:15px;
}

body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison p {
  max-width:54ch;
  margin:0;
  color:var(--color-text-secondary);
  font-size:15px;
  line-height:1.55;
}

@media (max-width:960px) {
  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-head,
  body[data-route="foundation-icon-sizing"] .icon-sizing-true-size {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-item:nth-child(3) {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-item:nth-child(4) {
    border-top:1px solid var(--color-border-subtle);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy,
  body[data-route="foundation-icon-sizing"] .icon-sizing-context,
  body[data-route="foundation-icon-sizing"] .icon-sizing-construction,
  body[data-route="foundation-icon-sizing"] .icon-sizing-alignment {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-grid,
  body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid,
  body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens,
  body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="foundation-icon-sizing"] :is(.icon-sizing-keyline-item,.icon-sizing-craft-grid article,.icon-sizing-alignment-specimens figure,.icon-sizing-qa-grid article):nth-child(3) {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-route="foundation-icon-sizing"] :is(.icon-sizing-keyline-item,.icon-sizing-craft-grid article,.icon-sizing-alignment-specimens figure,.icon-sizing-qa-grid article):nth-child(4) {
    border-top:1px solid var(--color-border-subtle);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-craft-head {
    grid-template-columns:minmax(120px,.3fr) minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-craft-head > p {
    grid-column:2;
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation p {
    grid-column:1 / -1;
  }
}

@media (max-width:640px) {
  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board,
  body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-rail {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board {
    padding-inline:16px;
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-board .icon-sizing-scale-item {
    grid-template-rows:280px auto;
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item {
    grid-template-columns:48px 52px minmax(0,1fr);
    grid-template-rows:auto;
    justify-items:start;
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-true-size-item + .icon-sizing-true-size-item {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale,
  body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison,
  body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-grid,
  body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid,
  body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens,
  body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-item + .icon-sizing-scale-item,
  body[data-route="foundation-icon-sizing"] .icon-sizing-scale-item:nth-child(4),
  body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison article + article,
  body[data-route="foundation-icon-sizing"] .icon-sizing-keyline-item + .icon-sizing-keyline-item,
  body[data-route="foundation-icon-sizing"] .icon-sizing-craft-grid article + article,
  body[data-route="foundation-icon-sizing"] .icon-sizing-alignment-specimens figure + figure,
  body[data-route="foundation-icon-sizing"] .icon-sizing-qa-grid article + article {
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-route="foundation-icon-sizing"] :is(.icon-sizing-keylines-head,.icon-sizing-craft-head,.icon-sizing-qa-head) {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-craft-head > p {grid-column:auto;}

  body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-area-equation p {grid-column:auto;}

  body[data-route="foundation-icon-sizing"] .icon-sizing-blueprint-stage {width:100%;}

  body[data-route="foundation-icon-sizing"] .icon-sizing-anatomy-stage {
    grid-template-columns:minmax(0,1fr);
    justify-items:start;
    padding:var(--lds-space-5);
  }

  body[data-route="foundation-icon-sizing"] .icon-sizing-context-stage,
  body[data-route="foundation-icon-sizing"] .icon-sizing-access-comparison article {
    padding:var(--lds-space-5);
  }
}

/* ===========================================================================
   Buttons II — Nacre Study  (route: component-buttons-ii)
   ---------------------------------------------------------------------------
   DESIGN STUDY — unratified. The ratified Button geometry (pill silhouette,
   44px reach, bold label) re-expressed in the LDS pearl material drawn from
   the Color foundation's Four Pearl Studies: milky nacre and black pearl,
   living interference fields, glass, and water.

   Material model per button (three optical layers):
     body      — the nacre itself: layered radial fields over a tonal core
     ::before  — the interference film: a slow-turning iridescent gradient
     ::after   — the specular pass: a light sweep released on hover
   States never change meaning: hover lifts and turns the nacre, pressed
   deepens into the material, selection holds the film awake, focus rings
   outside the body per the LDS Focus doctrine.
   ======================================================================== */

body[data-route="component-buttons-ii"] .nacre-study {
  display: grid;
  gap: 0;
}

/* ---- Editorial hero ---------------------------------------------------- */

body[data-route="component-buttons-ii"] .nacre-hero {
  display: grid;
  gap: 0;
  width: 100%;
  max-width: none;
  padding: clamp(24px, 4vw, 56px) 0 clamp(44px, 6vw, 84px);
}

body[data-route="component-buttons-ii"] .nacre-eyebrow {
  margin: 0 0 var(--lds-space-8);
  color: var(--lds-shell-kicker, var(--color-text-secondary));
  font-family: var(--lds-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body[data-route="component-buttons-ii"] .nacre-hero h2 {
  margin: 0 0 var(--lds-editorial-hero-copy-gap);
  max-width: 14ch;
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: var(--lds-editorial-hero-title-size);
  font-weight: var(--lds-editorial-hero-title-weight);
  line-height: var(--lds-editorial-hero-title-line);
  letter-spacing: var(--lds-editorial-hero-title-tracking);
  text-wrap: balance;
}

body[data-route="component-buttons-ii"] .nacre-hero-lede {
  margin: 0;
  max-width: 62ch;
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", "Inter", var(--lds-font-family);
  font-size: clamp(17px, 1.25vw, 19px);
  font-weight: 450;
  line-height: 1.58;
  letter-spacing: 0;
}

/* ---- Stages: one pearl field per appearance ----------------------------- */

body[data-route="component-buttons-ii"] .nacre-stage {
  position: relative;
  overflow: hidden;
  margin: 0 0 clamp(36px, 5vw, 56px);
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 0;
}

body[data-route="component-buttons-ii"] .nacre-stage::before {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
  filter: blur(18px) saturate(110%);
}

body[data-route="component-buttons-ii"] .nacre-stage-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(36px, 4.5vw, 56px);
  padding: clamp(44px, 6vw, 84px) clamp(24px, 5vw, 80px);
}

body[data-route="component-buttons-ii"] .nacre-stage-head {
  display: grid;
  gap: var(--lds-space-3);
  max-width: 70ch;
}

body[data-route="component-buttons-ii"] .nacre-stage-head h2 {
  margin: 0;
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(30px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.01em;
  text-wrap: balance;
}

body[data-route="component-buttons-ii"] .nacre-stage-note {
  margin: 0;
  max-width: 62ch;
  font-family: "Hanken Grotesk", "Inter", var(--lds-font-family);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 450;
  line-height: 1.6;
}

/* Light Pearl field — the Color page's milky stage vocabulary. */
body[data-route="component-buttons-ii"] .nacre-stage-light {
  --nacre-stage-surface: #EDF0F5;
  --nacre-ink: #10131A;
  --nacre-ink-soft: #45505F;
  --nacre-focus-ring: var(--lds-light-focus-ring);
  background:
    radial-gradient(ellipse 96% 88% at -14% -8%, rgba(255, 255, 255, .98) 0%, rgba(255, 255, 255, .34) 48%, transparent 78%),
    radial-gradient(ellipse 92% 84% at 116% 4%, rgba(185, 231, 242, .72) 0%, rgba(185, 231, 242, .20) 48%, transparent 82%),
    radial-gradient(ellipse 88% 82% at -10% 112%, rgba(238, 199, 221, .60) 0%, rgba(238, 199, 221, .18) 50%, transparent 84%),
    radial-gradient(ellipse 94% 86% at 114% 108%, rgba(217, 231, 190, .50) 0%, rgba(217, 231, 190, .14) 52%, transparent 84%),
    radial-gradient(ellipse 120% 110% at 48% 52%, #F1F2F5 0%, #DDE0E7 62%, #CDD1D9 100%),
    #DDE0E7;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 30px 64px -30px rgba(51, 62, 82, .42),
    20px 24px 52px -38px rgba(57, 162, 188, .28),
    -18px 22px 48px -38px rgba(133, 96, 191, .24);
}

body[data-route="component-buttons-ii"] .nacre-stage-light::before {
  background:
    radial-gradient(ellipse 86% 72% at -16% 22%, rgba(166, 139, 221, .26) 0%, rgba(166, 139, 221, .08) 46%, transparent 82%),
    radial-gradient(ellipse 92% 76% at 118% 72%, rgba(70, 190, 218, .23) 0%, rgba(70, 190, 218, .07) 46%, transparent 82%),
    radial-gradient(ellipse 78% 68% at 72% -12%, rgba(255, 255, 255, .72) 0%, transparent 78%);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-stage-head h2 { color: #10131A; }
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-eyebrow { color: #3D4A5C; }
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-stage-note { color: #45505F; }

/* Black Pearl field — the Color page's spectral dark stage vocabulary. */
body[data-route="component-buttons-ii"] .nacre-stage-dark {
  --nacre-stage-surface: #080A10;
  --nacre-ink: #F4F7FF;
  --nacre-ink-soft: #B8C2D4;
  --nacre-focus-ring: #79A9FF;
  border-color: rgba(205, 225, 255, .22);
  background:
    radial-gradient(ellipse 104% 94% at -18% -14%, rgba(196, 215, 242, .20) 0%, rgba(196, 215, 242, .04) 50%, transparent 82%),
    radial-gradient(ellipse 102% 92% at 120% 2%, rgba(110, 75, 178, .18) 0%, rgba(110, 75, 178, .035) 52%, transparent 84%),
    radial-gradient(ellipse 100% 96% at 122% 112%, rgba(39, 164, 187, .15) 0%, rgba(39, 164, 187, .03) 52%, transparent 86%),
    radial-gradient(ellipse 106% 92% at -18% 116%, rgba(177, 50, 132, .12) 0%, rgba(177, 50, 132, .025) 54%, transparent 86%),
    #080A10;
  box-shadow:
    inset 0 1px 0 rgba(214, 229, 255, .20),
    0 34px 72px -28px rgba(0, 0, 0, .72),
    22px 26px 58px -40px rgba(35, 168, 196, .34),
    -20px 24px 56px -40px rgba(133, 77, 190, .32);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark::before {
  background:
    radial-gradient(ellipse 108% 88% at -24% 14%, rgba(139, 91, 207, .18) 0%, rgba(139, 91, 207, .035) 54%, transparent 86%),
    radial-gradient(ellipse 106% 94% at 124% 42%, rgba(49, 194, 220, .16) 0%, rgba(49, 194, 220, .03) 52%, transparent 86%),
    radial-gradient(ellipse 102% 90% at -20% 96%, rgba(213, 68, 162, .13) 0%, rgba(213, 68, 162, .025) 54%, transparent 86%);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-stage-head h2 { color: #F4F7FF; }
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-eyebrow { color: #A8C7FF; }
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-stage-note { color: #B8C2D4; }

/* ---- Live row and state board ------------------------------------------ */

body[data-route="component-buttons-ii"] .nacre-live-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 36px);
  padding: clamp(28px, 4vw, 48px) 0 var(--lds-space-2);
}

body[data-route="component-buttons-ii"] .nacre-live-hint {
  margin: 0;
  justify-self: center;
  color: var(--nacre-ink-soft);
  font-family: var(--lds-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-align: center;
  text-transform: uppercase;
}

body[data-route="component-buttons-ii"] .nacre-state-board {
  display: grid;
  gap: clamp(28px, 3.5vw, 40px);
  padding-top: clamp(12px, 2vw, 24px);
  border-top: 1px solid color-mix(in srgb, var(--nacre-ink) 14%, transparent);
}

body[data-route="component-buttons-ii"] .nacre-state-group {
  display: grid;
  gap: var(--lds-space-4);
}

body[data-route="component-buttons-ii"] .nacre-state-group-label {
  color: var(--nacre-ink-soft);
  font-family: var(--lds-font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
}

body[data-route="component-buttons-ii"] .nacre-state-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
  gap: clamp(16px, 2vw, 28px);
}

body[data-route="component-buttons-ii"] .nacre-state-cell {
  display: grid;
  justify-items: center;
  gap: var(--lds-space-3);
}

body[data-route="component-buttons-ii"] .nacre-state-caption {
  color: var(--nacre-ink-soft);
  font-family: var(--lds-font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
}

/* ---- The nacre button: shared body ------------------------------------- */

@keyframes nacre-turn {
  0%   { background-position: 0% 32%; }
  50%  { background-position: 58% 68%; }
  100% { background-position: 100% 38%; }
}

@keyframes nacre-sweep {
  from { transform: translateX(-140%) skewX(-18deg); }
  to   { transform: translateX(190%) skewX(-18deg); }
}

body[data-route="component-buttons-ii"] .nacre-btn {
  --nacre-lift: 0;
  --nacre-ring: 0 0 0 0 transparent;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 132px;
  min-height: var(--lds-touch-target-min);
  padding: 0 30px;
  border: 1px solid transparent;
  border-radius: var(--lds-radius-pill);
  color: var(--nacre-ink);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: var(--lds-font-lg);
  font-weight: var(--lds-weight-bold);
  letter-spacing: .004em;
  white-space: nowrap;
  cursor: pointer;
  transform: translateY(var(--nacre-lift));
  transition:
    transform 300ms cubic-bezier(.34, 1.45, .4, 1),
    box-shadow 420ms ease,
    border-color 320ms ease,
    color 320ms ease,
    filter 420ms ease;
}

body[data-route="component-buttons-ii"] .nacre-btn-label {
  position: relative;
  z-index: 4;
}

/* Interference film — the color that lives inside the material. */
body[data-route="component-buttons-ii"] .nacre-btn::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: 1;
  border-radius: inherit;
  background: linear-gradient(115deg,
    rgba(171, 130, 220, .55) 6%,
    rgba(70, 190, 218, .48) 24%,
    rgba(238, 162, 191, .50) 42%,
    rgba(213, 227, 178, .40) 58%,
    rgba(126, 171, 255, .48) 76%,
    rgba(199, 110, 201, .52) 94%);
  background-size: 340% 340%;
  opacity: .38;
  animation: nacre-turn 16s ease-in-out infinite alternate;
  transition: opacity 480ms ease, filter 480ms ease;
  pointer-events: none;
}

/* Specular pass — a single beam of light crossing the surface on hover. */
body[data-route="component-buttons-ii"] .nacre-btn::after {
  content: "";
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: 0;
  z-index: 3;
  width: 46%;
  border-radius: inherit;
  background: linear-gradient(105deg,
    transparent 0%,
    rgba(255, 255, 255, .05) 28%,
    rgba(255, 255, 255, .55) 50%,
    rgba(255, 255, 255, .05) 72%,
    transparent 100%);
  opacity: 0;
  transform: translateX(-140%) skewX(-18deg);
  pointer-events: none;
}

body[data-route="component-buttons-ii"] .nacre-btn:hover::after {
  opacity: 1;
  animation: nacre-sweep 1050ms cubic-bezier(.3, .1, .25, 1) 60ms both;
}

body[data-route="component-buttons-ii"] .nacre-btn:hover::before,
body[data-route="component-buttons-ii"] .nacre-btn.is-hover::before,
body[data-route="component-buttons-ii"] .nacre-btn[aria-pressed="true"]::before,
body[data-route="component-buttons-ii"] .nacre-btn.is-selected::before {
  opacity: .8;
  filter: saturate(128%);
  animation-duration: 7s;
}

body[data-route="component-buttons-ii"] .nacre-btn:hover,
body[data-route="component-buttons-ii"] .nacre-btn.is-hover {
  --nacre-lift: -2px;
}

body[data-route="component-buttons-ii"] .nacre-btn:active,
body[data-route="component-buttons-ii"] .nacre-btn.is-press {
  --nacre-lift: 1px;
  transition-duration: 90ms;
}

body[data-route="component-buttons-ii"] .nacre-btn:active::before,
body[data-route="component-buttons-ii"] .nacre-btn.is-press::before {
  opacity: .95;
  filter: saturate(140%);
  background-size: 200% 200%;
}

/* Focus — an exterior ring that locates without replacing the border. */
body[data-route="component-buttons-ii"] .nacre-btn:focus-visible,
body[data-route="component-buttons-ii"] .nacre-btn.is-focus {
  outline: none;
  --nacre-ring:
    0 0 0 3px var(--nacre-stage-surface),
    0 0 0 6px var(--nacre-focus-ring);
}

/* ---- Primary · Pearl ----------------------------------------------------
   Light stage: white nacre. Dark stage: black pearl. */

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary {
  color: #10131A;
  border-color: var(--lds-primary-light-edge-rest, rgba(255, 255, 255, .72));
  background:
    radial-gradient(ellipse 96% 150% at 22% -34%, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .30) 46%, transparent 72%),
    radial-gradient(ellipse 72% 130% at 88% 122%, rgba(56, 187, 214, .30) 0%, transparent 62%),
    radial-gradient(ellipse 64% 122% at 6% 118%, rgba(171, 130, 220, .28) 0%, transparent 60%),
    radial-gradient(ellipse 58% 112% at 64% -22%, rgba(238, 162, 191, .22) 0%, transparent 58%),
    linear-gradient(162deg, #FDFEFF 0%, #EEF1F6 46%, #D8DDE7 100%);
  box-shadow:
    var(--nacre-ring),
    var(--lds-primary-light-shadow-rest);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary:hover,
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary.is-hover {
  border-color: var(--lds-primary-light-edge-hover, rgba(255, 255, 255, .96));
  box-shadow:
    var(--nacre-ring),
    var(--lds-primary-light-shadow-hover);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary:active,
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary.is-press {
  border-color: var(--lds-primary-light-edge-rest, rgba(255, 255, 255, .72));
  box-shadow:
    var(--nacre-ring),
    var(--lds-primary-light-shadow-pressed);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary[aria-pressed="true"],
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-primary.is-selected {
  border-color: #FFFFFF;
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(255, 255, 255, .96),
    inset 0 0 0 1px rgba(120, 150, 240, .35),
    inset 0 -8px 16px -10px rgba(83, 132, 224, .30),
    0 14px 30px -12px rgba(30, 39, 55, .40),
    -14px 18px 36px -18px rgba(126, 91, 187, .62),
    14px 18px 36px -18px rgba(43, 164, 193, .60);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary {
  color: #F4F7FF;
  border-color: rgba(219, 235, 255, .32);
  background:
    radial-gradient(ellipse 92% 150% at 20% -36%, rgba(224, 236, 255, .30) 0%, transparent 58%),
    radial-gradient(ellipse 72% 132% at 90% -12%, rgba(126, 76, 194, .55) 0%, transparent 62%),
    radial-gradient(ellipse 78% 142% at 96% 132%, rgba(41, 183, 207, .46) 0%, transparent 64%),
    radial-gradient(ellipse 66% 122% at 0% 128%, rgba(199, 61, 151, .40) 0%, transparent 62%),
    linear-gradient(162deg, #303748 0%, #171C28 48%, #07090F 100%);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(196, 217, 247, .30),
    inset 0 -12px 18px -14px rgba(0, 0, 0, .78),
    0 14px 30px -12px rgba(0, 0, 0, .78),
    -12px 16px 32px -18px rgba(128, 75, 190, .52),
    12px 16px 32px -18px rgba(38, 169, 197, .48);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary:hover,
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary.is-hover {
  border-color: rgba(230, 241, 255, .55);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(214, 229, 255, .44),
    inset 0 -12px 18px -14px rgba(0, 0, 0, .70),
    0 22px 46px -14px rgba(0, 0, 0, .82),
    0 0 30px -10px rgba(96, 178, 224, .35),
    -18px 22px 44px -20px rgba(128, 75, 190, .68),
    18px 22px 44px -20px rgba(38, 169, 197, .64);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary:active,
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary.is-press {
  box-shadow:
    var(--nacre-ring),
    inset 0 3px 8px rgba(0, 0, 0, .68),
    inset 0 -4px 12px -8px rgba(196, 217, 247, .26),
    0 8px 16px -10px rgba(0, 0, 0, .78),
    -10px 12px 26px -18px rgba(128, 75, 190, .55),
    10px 12px 26px -18px rgba(38, 169, 197, .50);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary[aria-pressed="true"],
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-primary.is-selected {
  border-color: rgba(230, 241, 255, .60);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(214, 229, 255, .46),
    inset 0 0 0 1px rgba(147, 189, 255, .40),
    inset 0 -10px 18px -12px rgba(60, 130, 220, .35),
    0 16px 34px -12px rgba(0, 0, 0, .80),
    0 0 36px -12px rgba(121, 169, 255, .45),
    -16px 20px 40px -18px rgba(128, 75, 190, .72),
    16px 20px 40px -18px rgba(38, 169, 197, .68);
}

/* ---- Secondary · Glass --------------------------------------------------
   Clear water over the pearl field: translucent until intent approaches. */

body[data-route="component-buttons-ii"] .nacre-btn-secondary::before {
  opacity: 0;
}

body[data-route="component-buttons-ii"] .nacre-btn-secondary:hover::before,
body[data-route="component-buttons-ii"] .nacre-btn-secondary.is-hover::before,
body[data-route="component-buttons-ii"] .nacre-btn-secondary[aria-pressed="true"]::before,
body[data-route="component-buttons-ii"] .nacre-btn-secondary.is-selected::before {
  opacity: .34;
}

body[data-route="component-buttons-ii"] .nacre-btn-secondary:active::before,
body[data-route="component-buttons-ii"] .nacre-btn-secondary.is-press::before {
  opacity: .46;
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary {
  color: #15161B;
  border-color: rgba(63, 83, 111, .38);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, .66) 0%, rgba(255, 255, 255, .30) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  backdrop-filter: blur(14px) saturate(150%);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -8px 14px -12px rgba(57, 70, 94, .22),
    0 8px 20px -12px rgba(30, 39, 55, .26);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary:hover,
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary.is-hover {
  border-color: rgba(42, 60, 86, .55);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 -8px 14px -12px rgba(57, 70, 94, .18),
    0 16px 34px -14px rgba(30, 39, 55, .32),
    -12px 16px 32px -20px rgba(126, 91, 187, .40),
    12px 16px 32px -20px rgba(43, 164, 193, .38);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary:active,
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary.is-press {
  box-shadow:
    var(--nacre-ring),
    inset 0 2px 6px rgba(37, 47, 66, .24),
    inset 0 -4px 10px -8px rgba(255, 255, 255, .70),
    0 4px 12px -8px rgba(30, 39, 55, .28);
}

body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary[aria-pressed="true"],
body[data-route="component-buttons-ii"] .nacre-stage-light .nacre-btn-secondary.is-selected {
  border-color: rgba(42, 60, 86, .62);
  background:
    linear-gradient(168deg, rgba(255, 255, 255, .82) 0%, rgba(255, 255, 255, .46) 100%);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(120, 150, 240, .30),
    0 12px 26px -12px rgba(30, 39, 55, .30),
    -10px 14px 28px -20px rgba(126, 91, 187, .42),
    10px 14px 28px -20px rgba(43, 164, 193, .40);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary {
  color: #EDF3FF;
  border-color: rgba(190, 215, 255, .32);
  background:
    linear-gradient(168deg, rgba(20, 27, 42, .55) 0%, rgba(8, 11, 18, .38) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(196, 217, 247, .22),
    inset 0 -8px 14px -12px rgba(0, 0, 0, .55),
    0 10px 22px -12px rgba(0, 0, 0, .60);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary:hover,
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary.is-hover {
  border-color: rgba(222, 237, 255, .58);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(214, 229, 255, .38),
    inset 0 -8px 14px -12px rgba(0, 0, 0, .48),
    0 18px 38px -14px rgba(0, 0, 0, .70),
    0 0 26px -10px rgba(121, 169, 255, .32),
    -12px 16px 30px -20px rgba(128, 75, 190, .48),
    12px 16px 30px -20px rgba(38, 169, 197, .44);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary:active,
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary.is-press {
  box-shadow:
    var(--nacre-ring),
    inset 0 3px 8px rgba(0, 0, 0, .58),
    inset 0 -4px 10px -8px rgba(196, 217, 247, .20),
    0 6px 14px -10px rgba(0, 0, 0, .65);
}

body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary[aria-pressed="true"],
body[data-route="component-buttons-ii"] .nacre-stage-dark .nacre-btn-secondary.is-selected {
  border-color: rgba(222, 237, 255, .62);
  background:
    linear-gradient(168deg, rgba(28, 38, 58, .68) 0%, rgba(12, 17, 28, .52) 100%);
  box-shadow:
    var(--nacre-ring),
    inset 0 1px 0 rgba(214, 229, 255, .40),
    inset 0 0 0 1px rgba(147, 189, 255, .35),
    0 14px 30px -12px rgba(0, 0, 0, .68),
    0 0 32px -12px rgba(121, 169, 255, .38),
    -10px 14px 28px -20px rgba(128, 75, 190, .52),
    10px 14px 28px -20px rgba(38, 169, 197, .48);
}

/* ---- Coda ---------------------------------------------------------------- */

body[data-route="component-buttons-ii"] .nacre-coda {
  display: grid;
  gap: var(--lds-space-5);
  padding: clamp(8px, 2vw, 24px) 0 clamp(48px, 6vw, 80px);
}

body[data-route="component-buttons-ii"] .nacre-coda-title {
  margin: 0;
  color: var(--color-text-primary);
  font-family: "Satoshi", var(--lds-font-family);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.008em;
}

body[data-route="component-buttons-ii"] .nacre-coda-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(20px, 3vw, 36px);
  margin: 0;
}

body[data-route="component-buttons-ii"] .nacre-coda-list div {
  display: grid;
  gap: var(--lds-space-2);
  align-content: start;
}

body[data-route="component-buttons-ii"] .nacre-coda-list dt {
  color: var(--color-text-primary);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: 16px;
  font-weight: 700;
}

body[data-route="component-buttons-ii"] .nacre-coda-list dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-family: "Hanken Grotesk", var(--lds-font-family);
  font-size: 15px;
  font-weight: 450;
  line-height: 1.55;
}

/* ========================================================================
 * Full-width editorial framing contract — 2026-07-22
 *
 * A documentation section is part of the page plane, never a card. A study
 * wrapper organizes reading order, never adds another material layer. Only
 * the innermost comparison, environmental stage, or interactive specimen may
 * retain a boundary. This rule removes the legacy frame → frame → demo stack
 * across foundations, components, patterns, and rulings without altering the
 * protected component internals rendered inside those stages.
 * ====================================================================== */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-band {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding-inline:0;
  border-right:0 !important;
  border-left:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-band::before,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-band::after {
  content:none !important;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-band + .lds-editorial-band {
  border-top:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-demo-plane,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-study {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin-inline:0;
  padding-inline:0;
  border:0 !important;
  border-radius:0 !important;
  background:none !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-demo-plane::before,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-demo-plane::after,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-study::before,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .lds-editorial-study::after {
  content:none !important;
}

/* Foundation studies already receive generous section rhythm from their
   editorial bands. Removing this obsolete card padding lets specimens align
   to the same content rail as the heading that introduces them. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .foundation-standard-demo.lds-editorial-demo-plane {
  padding-block:0;
}

/* Component and specification routes used glass cards for every chapter.
   Chapters now read as full-width bands; contained configuration examples are
   intentionally left untouched as the single permissible material layer. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .benchmark-section.lds-editorial-band {
  padding-block:clamp(48px,6vw,80px);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .source-component-page > .lds-editorial-band:first-child,
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .p0-spec-page > .lds-editorial-band:first-of-type {
  border-top:0;
}

/* The component ruling is doctrine, not a pair of inset cards. It shares one
   full-width editorial band across every source-backed component route. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid.lds-editorial-band {
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:0;
  padding-block:var(--lds-space-8);
  border-block:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > :is(.component-intent-card,.component-ruling-card) {
  align-content:start;
  gap:var(--lds-space-4);
  padding:0;
  border:0;
  border-radius:0;
  background:none;
  box-shadow:none;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-intent-card {
  padding-right:var(--lds-space-8);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-intent-card p {
  max-width:34ch;
  font-size:var(--font-size-xl);
  line-height:var(--lds-line-body);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-ruling-card {
  padding-left:var(--lds-space-8);
  border-left:1px solid var(--color-border-subtle);
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-ruling-card dl {
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--lds-space-5) var(--lds-space-8);
}

@media (max-width:720px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid.lds-editorial-band {
    grid-template-columns:minmax(0,1fr);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-intent-card {
    padding:0 0 var(--lds-space-6);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-ruling-card {
    padding:var(--lds-space-6) 0 0;
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .component-ruling-grid > .component-ruling-card dl {
    grid-template-columns:minmax(0,1fr);
  }
}

/* Iconography uses tiles and optical boards for comparison. The library card
   around those boards is redundant once the page section supplies rhythm. */
body[data-route="foundation-iconography"][data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .fi-section.lds-editorial-band {
  padding:clamp(48px,6vw,80px) 0;
}

body[data-route="foundation-iconography"][data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .fi-card.lds-editorial-demo-plane {
  margin-bottom:0;
  padding-block:0;
}

@media (max-width:720px) {
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-content .benchmark-section.lds-editorial-band,
  body[data-route="foundation-iconography"][data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .fi-section.lds-editorial-band {
    padding-block:40px;
  }
}

/* Mobile: stages keep their atmosphere; the state board stacks. */
@media (max-width: 560px) {
  body[data-route="component-buttons-ii"] .nacre-stage-inner {
    padding: 36px 18px 44px;
  }

  body[data-route="component-buttons-ii"] .nacre-state-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body[data-route="component-buttons-ii"] .nacre-live-row {
    flex-direction: column;
  }
}

/* Site-wide experience quality gates — 2026-07-19
   Material contributes explicit state and adaptive structure; Apple contributes
   perceptual restraint and appearance parity; Samsung One UI contributes task
   focus, visible comfort, reach, and cross-device continuity. These rules act
   on documentation structure only and do not alter protected component atoms. */

.lds-page-content :is(
  .lds-editorial-opening-copy,
  .foundation-editorial-hero-copy,
  .foundation-standard-section-head,
  .lds-public-token-heading
) > p + p {
  margin-top: var(--lds-space-4, 16px);
}

.lds-page-content :is(
  .lds-editorial-opening-copy,
  .foundation-standard-section-head,
  .lds-public-token-heading
) > p {
  max-width: 72ch;
}

.lds-public-token-table-wrap,
.lds-token-ledger-table-wrap {
  max-width: 100%;
  overscroll-behavior-inline: contain;
}

@media (max-width: 1039px) {
  body[data-route="foundation-color"] :is(
    .color-page-chrome,
    .color-page-header,
    .color-page-nav,
    .color-page-nav-rail,
    .color-page-content-rail,
    .color-foundation,
    .color-foundation-card,
    .color-use-table-wrap
  ) {
    box-sizing: border-box;
    min-width: 0;
    max-width: 100%;
  }

  body[data-route="foundation-color"] .color-page-chrome {
    width: 100%;
    overflow: clip;
  }

  body[data-route="foundation-color"] .color-page-nav {
    display: block;
    width: 100%;
    overflow: hidden;
  }

  body[data-route="foundation-color"] .color-page-nav-rail {
    width: 100%;
    overflow: hidden;
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-track {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    margin: 0;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
  }

  body[data-route="foundation-color"] .color-page-nav .section-nav-track::-webkit-scrollbar {
    display: none;
  }

  body[data-route="foundation-color"] .color-use-table-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
  }

  body[data-route="foundation-color"] .color-use-table {
    width: max-content;
    min-width: 640px;
  }
}

@media (prefers-contrast: more) {
  body[data-lds-shell-standard="nacreous"] {
    --color-border-subtle: color-mix(in srgb, currentColor 42%, transparent);
    --lds-guide-label-color: var(--color-text-primary);
    --lds-direction-label-color: var(--color-text-primary);
  }

  body[data-lds-shell-standard="nacreous"] :is(
    .lds-page-section-nav .section-nav-link,
    .nav-group a,
    .lds-public-token-table th,
    .lds-public-token-table td
  ) {
    text-shadow: none;
  }

  body[data-lds-shell-standard="nacreous"] :focus-visible {
    outline-width: 3px;
    outline-offset: 3px;
  }
}

@media (prefers-reduced-transparency: reduce) {
  body[data-lds-shell-standard="nacreous"] :is(
    .color-page-chrome,
    .lds-page-chrome,
    .nav-rail-card,
    .color-page-nav,
    .lds-page-section-nav
  ) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  body[data-lds-shell-standard="nacreous"][data-color-theme="dark"] :is(.color-page-chrome,.lds-page-chrome,.nav-rail-card) {
    background: #0c111b !important;
  }

  body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.color-page-chrome,.lds-page-chrome,.nav-rail-card) {
    background: #f3f5f9 !important;
  }

  body[data-lds-shell-standard="nacreous"] :is(.color-page-chrome,.lds-page-chrome,.nav-rail-card)::before,
  body[data-lds-shell-standard="nacreous"] :is(.color-page-chrome,.lds-page-chrome,.nav-rail-card)::after {
    content: none !important;
  }
}

@media (forced-colors: active) {
  body[data-lds-shell-standard="nacreous"] :is(
    .color-page-chrome,
    .lds-page-chrome,
    .nav-rail-card,
    .panel-card,
    .hero-card,
    .review-card,
    .lds-public-token-table
  ) {
    border-color: CanvasText;
    color: CanvasText;
    background: Canvas;
    box-shadow: none;
    forced-color-adjust: auto;
  }

  body[data-lds-shell-standard="nacreous"] :focus-visible {
    outline: 3px solid Highlight;
    outline-offset: 3px;
  }
}

/* Canonical Motion adoption of the global editorial hierarchy. This final
   layer intentionally follows every legacy route rule until those rules are
   removed in the broader site migration. */
body[data-route="foundation-motion"] .motion-animation-intro{padding-bottom:var(--lds-editorial-gap-thesis)}
body[data-route="foundation-motion"] .motion-animation-intro h3{font-size:var(--lds-editorial-title-section);line-height:var(--lds-line-tight)}
body[data-route="foundation-motion"] .motion-contract-heading{padding-block:var(--lds-editorial-gap-stage)}
body[data-route="foundation-motion"] .motion-contract-heading h4,
body[data-route="foundation-motion"] .motion-choreography-contract h4{max-width:24ch;font-size:var(--lds-editorial-title-specification);line-height:var(--lds-line-tight)}
body[data-route="foundation-motion"] .motion-duration-scenes{border-bottom:0}
body[data-route="foundation-motion"] .motion-duration-scene{min-height:0}
body[data-route="foundation-motion"] .motion-duration-scene.lds-editorial-study + .motion-duration-scene.lds-editorial-study{border-top:1px solid var(--color-border-subtle)!important}
body[data-route="foundation-motion"] .motion-duration-copy{gap:var(--lds-space-5)}
body[data-route="foundation-motion"] .motion-duration-copy>header{grid-template-columns:1fr;align-items:start}
body[data-route="foundation-motion"] .motion-duration-copy>header span,
body[data-route="foundation-motion"] .motion-duration-copy>header strong,
body[data-route="foundation-motion"] .motion-duration-copy>header code{grid-column:1}
body[data-route="foundation-motion"] .motion-duration-copy>header code{padding:0;margin-top:var(--lds-space-2)}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-duration-copy{padding-block:var(--lds-editorial-gap-section)}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage{min-height:0;padding:0;border-top:1px solid var(--color-border-subtle);background:transparent}
body[data-route="foundation-motion"] .motion-duration-scene:is([data-motion-duration-scene="local"],[data-motion-duration-scene="state"])>.motion-scene-stage::before{content:none}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab){border:0;border-radius:0;background:transparent;box-shadow:none}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header{padding:var(--lds-editorial-gap-stage) var(--lds-editorial-inset-stage)!important;border-bottom:1px solid var(--color-border-subtle)!important;background:linear-gradient(110deg,color-mix(in srgb,var(--color-bg-surface) 68%,transparent),color-mix(in srgb,#8b67de 4%,transparent) 48%,color-mix(in srgb,#42d4e6 4%,transparent))!important}
body[data-route="foundation-motion"] :is(.motion-local-playground,.motion-compact-lab)>header>strong{max-width:19ch!important;font-size:var(--lds-editorial-title-demonstration)!important;line-height:var(--lds-line-tight)}
body[data-route="foundation-motion"] .motion-local-play-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-bottom:1px solid var(--color-border-subtle);background:transparent}
body[data-route="foundation-motion"] .motion-local-play-item,
body[data-route="foundation-motion"] .motion-local-play-item--field{grid-column:auto;grid-template-columns:1fr;grid-template-rows:auto minmax(var(--lds-editorial-stage-control-min),1fr) auto;gap:var(--lds-space-5);min-height:var(--lds-editorial-stage-example-min);padding:var(--lds-editorial-inset-stage);overflow:visible;border:0!important;border-radius:0;background:transparent;box-shadow:none}
body[data-route="foundation-motion"] .motion-local-play-item::before{content:none}
body[data-route="foundation-motion"] .motion-local-play-item:not(:last-child){border-right:1px solid var(--color-border-subtle)!important}
body[data-route="foundation-motion"] .motion-local-play-item--field>header,
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control,
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{grid-column:1;grid-row:auto}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-control{align-self:center}
body[data-route="foundation-motion"] .motion-local-play-item--field .motion-local-state-readout{align-self:end}
body[data-route="foundation-motion"] .motion-compact-lab>header{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)!important}
body[data-route="foundation-motion"] .motion-compact-lab::before{content:none}

@media (max-width:900px){
  body[data-route="foundation-motion"] .motion-local-play-grid{grid-template-columns:1fr}
  body[data-route="foundation-motion"] .motion-local-play-item:not(:last-child){border-right:0!important;border-bottom:1px solid var(--color-border-subtle)!important}
}
/* Final editorial-plane enforcement. Kept after legacy Motion declarations so
   old presentation-board fills cannot reassert themselves in the cascade. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"]:not([data-route="foundation-color"]) .page-host{
  background:var(--lds-editorial-canvas-dark);
}
body[data-route="foundation-motion"] .motion-state-specimen{
  border-inline:0;
  background:transparent;
}
@media (min-width:1040px){
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"].documentation-nav-collapsed .app-shell{
    background:var(--lds-editorial-canvas-dark);
  }
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"].documentation-nav-collapsed .app-nav{
    background:transparent;
    box-shadow:none;
  }
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"].documentation-nav-collapsed .page-host{
    background:transparent;
  }
}

/* Documentation rail choreography
   One reversible motion contract replaces the legacy mixture of display
   toggles, position swaps, and 720–1100ms residual easing. The navigation
   releases before the rail closes; the pearl remains attached to the moving
   edge; expansion follows the same path in reverse. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"]{
  --lds-shell-duration:680ms;
  --lds-shell-easing:cubic-bezier(.4,0,.2,1);
  --lds-shell-motion:var(--lds-shell-duration) var(--lds-shell-easing);
  --lds-rail-content-motion:300ms cubic-bezier(.4,0,.2,1);
  --lds-brand-lockup-fade:520ms cubic-bezier(.4,0,.2,1);
}

@media (min-width:1040px){
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .app-nav{
    padding-right:0;
    padding-bottom:0;
    box-shadow:var(--lds-rail-shadow);
    transition:
      padding-top var(--lds-motion-chrome) var(--lds-ease-standard),
      box-shadow var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .app-shell{
    transition:grid-template-columns var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-chrome{
    width:100vw;
    margin-left:calc(-1 * var(--lds-chrome-sidebar-width));
    transition:
      height var(--lds-motion-chrome) var(--lds-ease-standard),
      grid-template-rows var(--lds-motion-chrome) var(--lds-ease-standard),
      box-shadow 520ms cubic-bezier(.22,1,.36,1),
      margin-left var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
    .lds-page-header,
    .lds-page-section-nav
  ){
    transition:grid-template-columns var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-heading{
    transition:
      width var(--lds-shell-motion),
      max-width var(--lds-shell-motion),
      margin-top var(--lds-motion-chrome) var(--lds-ease-standard),
      padding var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
    .section-nav-track,
    .lds-page-content
  ),
  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] .color-page-content-rail{
    transition:
      width var(--lds-shell-motion),
      max-width var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-card{
    width:100%;
    min-height:calc(100vh - var(--lds-chrome-height));
    background:transparent;
    box-shadow:none;
    transition:
      border-color var(--lds-shell-motion),
      box-shadow var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-card::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:1;
    background:
      linear-gradient(
        138deg,
        rgba(8,12,19,0) 0%,
        rgba(18,91,108,.28) 24%,
        rgba(49,43,91,.25) 45%,
        rgba(99,31,84,.23) 66%,
        rgba(14,59,70,.22) 86%,
        rgba(8,12,19,0) 100%
      ),
      linear-gradient(
        42deg,
        rgba(59,79,38,.22) 0%,
        rgba(16,25,37,.04) 36%,
        rgba(94,34,84,.17) 66%,
        rgba(12,79,94,.25) 100%
      ),
      linear-gradient(
        180deg,
        #080b12 0%,
        #0b1822 28%,
        #191121 54%,
        #0a1720 77%,
        #141910 100%
      );
    background-size:168% 128%,154% 122%,100% 100%;
    background-position:42% top,58% center,center;
    transition:opacity 520ms cubic-bezier(.4,0,.2,1);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-card::before{
    background:
      radial-gradient(ellipse 142% 38% at -24% -3%,rgba(255,255,255,.74),rgba(255,255,255,.22) 42%,transparent 78%),
      radial-gradient(ellipse 118% 44% at 126% 17%,rgba(104,164,244,.38),rgba(104,164,244,.12) 43%,transparent 80%),
      radial-gradient(ellipse 156% 34% at -38% 40%,rgba(242,119,175,.30),rgba(242,119,175,.085) 46%,transparent 82%),
      radial-gradient(ellipse 126% 34% at 118% 38%,rgba(255,215,66,.24),rgba(242,184,55,.065) 44%,transparent 81%),
      radial-gradient(ellipse 132% 42% at 132% 63%,rgba(74,204,178,.31),rgba(74,204,178,.085) 45%,transparent 82%),
      radial-gradient(ellipse 148% 38% at 18% 108%,rgba(160,125,231,.31),rgba(160,125,231,.08) 46%,transparent 84%),
      rgba(236,237,244,.44);
    background-size:100% 100%;
    background-position:center;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-tree{
    display:grid;
    opacity:1;
    visibility:visible;
    transform:translate3d(0,0,0);
    transform-origin:left top;
    transition:
      opacity var(--lds-rail-content-motion) 100ms,
      transform var(--lds-shell-motion),
      visibility 0s linear 0s;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .brand-lockup-text{
    position:absolute;
    top:111.5px;
    left:106px;
    display:grid;
    width:max-content;
    max-width:162px;
    opacity:1;
    visibility:visible;
    transform:none;
    transition:
      top var(--lds-brand-collapse-motion),
      opacity var(--lds-brand-lockup-fade) 140ms,
      visibility 0s linear 0s;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-brand{
    position:relative;
    display:block;
    padding:0;
    transition:none;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .lds-page-brand-crest{
    position:absolute;
    top:127.5px;
    left:32px;
    width:58px;
    height:58px;
    margin:0;
    transform:none;
    transition:
      top var(--lds-brand-collapse-motion),
      left var(--lds-shell-motion),
      filter 360ms ease;
  }

  /* Header compression keeps the complete brand lockup inside the compact
     chrome. The coordinates remain explicit because the rail and header
     collapse on independent axes. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].lds-header-collapsed:not(.documentation-nav-collapsed) .brand-lockup-text{
    top:46px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].lds-header-collapsed:not(.documentation-nav-collapsed) .lds-page-brand-crest{
    top:63px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-head{
    position:absolute;
    top:16px;
    right:19px;
    width:var(--lds-navigation-pearl-size);
    height:var(--lds-navigation-pearl-size);
    min-height:var(--lds-navigation-pearl-size);
    transform:none;
    transition:right var(--lds-shell-motion);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle{
    width:var(--lds-navigation-pearl-size);
    height:var(--lds-navigation-pearl-size);
    transition:
      border-color 240ms ease,
      background-color 240ms ease,
      box-shadow 360ms cubic-bezier(.22,1,.36,1),
      filter 360ms cubic-bezier(.22,1,.36,1),
      transform 240ms cubic-bezier(.22,1,.36,1);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle svg{
    width:var(--lds-navigation-pearl-glyph-size);
    height:var(--lds-navigation-pearl-glyph-size);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .app-nav{
    padding-bottom:0;
    box-shadow:none;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card{
    width:100%;
    height:auto;
    min-height:calc(100vh - var(--lds-chrome-height));
    background:transparent;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card::before{
    content:"";
    opacity:0;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-card .nav-tree{
    display:grid;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translate3d(-14px,0,0);
    transition:
      opacity 220ms cubic-bezier(.4,0,1,1),
      transform 360ms cubic-bezier(.4,0,.2,1),
      visibility 0s linear var(--lds-shell-duration);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .brand-lockup-text{
    display:grid;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:none;
    transition:
      opacity var(--lds-brand-lockup-fade),
      visibility 0s linear var(--lds-shell-duration);
  }

  /* Brand-lockup state matrix
     Header state owns the vertical coordinate; rail state owns visibility.
     Keeping the hidden lockup on the compact-header coordinate prevents it
     from travelling to the expanded-header position while it fades. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed.lds-header-collapsed .brand-lockup-text{
    top:46px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .lds-page-brand{
    padding:0;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .lds-page-brand-crest{
    top:57px;
    left:32px;
    margin:0;
    transform:none;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed.lds-header-collapsed .lds-page-brand-crest{
    top:63px;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-head{
    position:absolute;
    top:16px;
    right:-2px;
    width:var(--lds-navigation-pearl-size);
    height:var(--lds-navigation-pearl-size);
    min-height:var(--lds-navigation-pearl-size);
    padding:0;
    transform:none;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle{
    width:var(--lds-navigation-pearl-size);
    height:var(--lds-navigation-pearl-size);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle svg{
    width:var(--lds-navigation-pearl-glyph-size);
    height:var(--lds-navigation-pearl-glyph-size);
  }

  /* Canonical Navigation Pearl — ratified 2026-07-29. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:hover{
    border:0;
    background:var(--lds-navigation-pearl-surface-dark);
    box-shadow:var(--lds-navigation-pearl-rest-dark);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:hover,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:hover{
    border:0;
    background:var(--lds-navigation-pearl-surface-light);
    box-shadow:var(--lds-navigation-pearl-rest-light);
  }

  /* The pearl's light must describe volume, never redraw its perimeter.
     Earlier nacre rules include a one-pixel inset rim on this overlay. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle::after{
    background:var(--lds-navigation-pearl-overlay);
    box-shadow:none;
  }

  /* Directional edge roll: a recessed upper-left seam and a restrained
     lower-right reflection. This is material shading, not a CSS border. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:active::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:hover::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:active::after{
    box-shadow:var(--lds-navigation-pearl-edge-dark);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:hover::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:active::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:hover::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:active::after{
    box-shadow:var(--lds-navigation-pearl-edge-light);
  }

  /* One additional exterior pixel extends the elevation rim without
     thickening the pearl's internal directional edge roll. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-head::before{
    content:"";
    position:absolute;
    inset:calc(-1 * var(--lds-navigation-pearl-rim-width));
    z-index:0;
    pointer-events:none;
    border-radius:49% 51% 50% 47% / 52% 47% 53% 48%;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle{
    position:relative;
    z-index:1;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-head::before{
    background:var(--lds-navigation-pearl-rim-dark);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-head::before{
    background:var(--lds-navigation-pearl-rim-light);
  }

  /* Pearl interaction: the geometry is invariant. Hover increases only
     the external relief; press turns that relief inward. */
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle:active,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:hover,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:active{
    transform:none;
    filter:none;
    transition:
      box-shadow var(--lds-navigation-pearl-hover-duration) var(--lds-navigation-pearl-ease),
      filter var(--lds-navigation-pearl-hover-duration) var(--lds-navigation-pearl-ease);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle:active,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:active{
    transition-duration:var(--lds-navigation-pearl-press-duration);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:hover{
    box-shadow:var(--lds-navigation-pearl-hover-dark);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:hover,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:hover{
    box-shadow:var(--lds-navigation-pearl-hover-light);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:active,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:active{
    box-shadow:var(--lds-navigation-pearl-pressed-dark);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:active,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:active{
    box-shadow:var(--lds-navigation-pearl-pressed-light);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle:hover::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .nav-rail-toggle:active::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:hover::after,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed .nav-rail-toggle:active::after{
    opacity:1;
    filter:none;
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:hover::before,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .nav-rail-toggle:active::before,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:hover::before,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="dark"] .nav-rail-toggle:active::before{
    opacity:.72;
    filter:blur(3px) saturate(118%);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:hover::before,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .nav-rail-toggle:active::before{
    opacity:.44;
    filter:blur(4px) saturate(104%);
  }

  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:hover::before,
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"].documentation-nav-collapsed[data-color-theme="light"] .nav-rail-toggle:active::before{
    opacity:.34;
    filter:blur(5px) saturate(100%);
  }

  /* Full-width rail navigation — one inset belongs to the navigation well.
     Removing the group's second inset lets every destination span that well;
     the pill geometry and borderless material keep it distinct from fields. */
  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group,
  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group + .nav-group{
    box-sizing:border-box;
    width:100%;
    padding-inline:0;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group h2{
    box-sizing:border-box;
    padding-inline:16px;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group-links{
    padding-inline:0;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a{
    box-sizing:border-box;
    width:100%;
    min-height:var(--lds-navigation-rail-item-min-height);
    padding:10px var(--lds-navigation-rail-item-padding-inline);
    border:0;
    border-radius:var(--lds-navigation-rail-item-radius);
    background:transparent;
    box-shadow:none;
    transform:none;
    transition:
      color var(--lds-navigation-rail-item-duration) var(--lds-ease-standard),
      background var(--lds-navigation-rail-item-duration) var(--lds-ease-standard),
      box-shadow var(--lds-navigation-rail-item-duration) var(--lds-ease-standard);
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a:hover{
    border:0;
    transform:none;
  }

  body[data-lds-shell][data-lds-shell-standard="nacreous"] .nav-rail-card .nav-group a.active{
    border:0;
    border-radius:var(--lds-navigation-rail-item-radius);
    box-shadow:
      inset 0 1px 0 color-mix(in srgb,var(--color-text-primary) 14%,transparent),
      0 8px 18px -16px color-mix(in srgb,var(--color-text-primary) 42%,transparent);
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] :is(
    .app-shell,
    .lds-page-chrome,
    .lds-page-header,
    .lds-page-section-nav,
    .lds-page-heading,
    .section-nav-track,
    .lds-page-content,
    .color-page-content-rail,
    .nav-rail-card,
    .nav-rail-card .nav-tree,
    .brand-lockup-text,
    .nav-rail-head,
    .nav-rail-toggle
  ){
    transition:none;
  }
}

/* Inverse Veiled Relief — receptive controls are carved from the surrounding
   surface. The upper-left interior receives shadow; the lower-right interior
   catches reflected light from the canonical top-left source. */
body[data-route="foundation-motion"][data-color-theme="dark"] .motion-focus-field textarea{
  border:0;
  border-radius:var(--lds-relief-inset-radius);
  background:var(--lds-relief-dark-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-dark-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-dark-highlight);
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-focus-field textarea{
  border:0;
  border-radius:var(--lds-relief-inset-radius);
  background:var(--lds-relief-light-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-light-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-light-highlight);
}

body[data-route="foundation-motion"][data-color-theme="dark"] .motion-focus-field textarea:hover:not(:focus),
body[data-route="foundation-motion"][data-color-theme="dark"] .motion-local-specimen--focus[data-motion-focus-state="hover"] .motion-focus-field textarea{
  border:0;
  background:var(--lds-relief-dark-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-dark-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-dark-highlight),
    0 0 0 var(--lds-relief-inset-hover-stroke-width) var(--lds-interaction-hover-edge),
    0 0 12px -7px var(--lds-interaction-hover-glow);
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-focus-field textarea:hover:not(:focus),
body[data-route="foundation-motion"][data-color-theme="light"] .motion-local-specimen--focus[data-motion-focus-state="hover"] .motion-focus-field textarea{
  border:0;
  background:var(--lds-relief-light-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-light-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-light-highlight),
    0 0 0 var(--lds-relief-inset-hover-stroke-width) var(--lds-interaction-hover-edge),
    0 0 10px -7px var(--lds-interaction-hover-glow);
}

body[data-route="foundation-motion"][data-color-theme="dark"] .motion-focus-field textarea:focus,
body[data-route="foundation-motion"][data-color-theme="dark"] .motion-local-specimen--focus[data-motion-focus-state="focus"] .motion-focus-field textarea{
  border:0;
  background:var(--lds-relief-dark-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-dark-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-dark-highlight),
    0 0 0 var(--lds-focus-ring-width) color-mix(in srgb,var(--color-focus-ring) 72%,transparent),
    0 0 0 var(--lds-relief-inset-focus-halo-width) color-mix(in srgb,var(--color-focus-ring) 18%,transparent),
    0 0 22px -10px color-mix(in srgb,var(--color-focus-ring) 56%,transparent);
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-focus-field textarea:focus,
body[data-route="foundation-motion"][data-color-theme="light"] .motion-local-specimen--focus[data-motion-focus-state="focus"] .motion-focus-field textarea{
  border:0;
  background:var(--lds-relief-light-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-light-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-light-highlight),
    0 0 0 var(--lds-focus-ring-width) color-mix(in srgb,var(--color-focus-ring) 72%,transparent),
    0 0 0 var(--lds-relief-inset-focus-halo-width) color-mix(in srgb,var(--color-focus-ring) 18%,transparent),
    0 0 22px -10px color-mix(in srgb,var(--color-focus-ring) 48%,transparent);
}

/* Placeholder copy belongs to the surrounding text hierarchy. It borrows the
   active theme's secondary neutral, then recedes to a ghosted prompt rather
   than introducing the legacy solid slate-blue placeholder hue. */
body[data-lds-shell][data-lds-shell-standard="nacreous"] :is(
  .motion-focus-field textarea,
  .text-area-source-page .text-area-control
)::placeholder{
  color:color-mix(
    in srgb,
    var(--color-text-secondary) var(--lds-text-area-placeholder-ghost-strength),
    transparent
  );
  font-size:var(--lds-text-area-placeholder-font-size);
  font-weight:var(--lds-text-area-placeholder-font-weight);
  opacity:1;
  transition:color var(--lds-motion-fast) var(--lds-ease-standard);
}

/* Motion / Animation Grammar — open editorial plane
   --------------------------------------------------
   Content is composed with rhythm and rules rather than presentation cards.
   Veiled Relief belongs only to the controls and animated objects that need
   physical presence; explanatory copy and demonstration stages stay on the
   shared page canvas. */
body[data-route="foundation-motion"] :is(
  .motion-duration-scenes,
  .motion-easing-scenes,
  .motion-equivalence
){
  background:transparent;
  box-shadow:none;
}

body[data-route="foundation-motion"] .motion-duration-scene{
  background:transparent;
}

body[data-route="foundation-motion"] .motion-scene-stage,
body[data-route="foundation-motion"] .motion-easing-stage,
body[data-route="foundation-motion"] .motion-scene-stage--local,
body[data-route="foundation-motion"] .motion-scene-stage--compact-state{
  background:transparent!important;
  box-shadow:none;
}

body[data-route="foundation-motion"] .motion-scene-stage::before,
body[data-route="foundation-motion"] .motion-easing-stage::before,
body[data-route="foundation-motion"] .motion-scene-stage--local::before,
body[data-route="foundation-motion"] .motion-scene-stage--compact-state::before{
  content:none;
}

body[data-route="foundation-motion"] :is(
  .motion-local-playground,
  .motion-compact-lab
){
  border:0;
  border-radius:0;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-route="foundation-motion"] :is(
  .motion-local-playground,
  .motion-compact-lab
)>header{
  padding:var(--lds-editorial-gap-stage) var(--lds-editorial-inset-stage)!important;
  border:0!important;
  border-bottom:var(--lds-border-width-subtle) solid var(--color-border-subtle)!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-route="foundation-motion"] :is(
  .motion-local-play-item,
  .motion-local-play-item--field,
  .motion-compact-card:nth-child(n)
){
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

body[data-route="foundation-motion"] :is(
  .motion-local-play-item,
  .motion-compact-card
)::before{
  content:none!important;
}

body[data-route="foundation-motion"] .motion-compact-stage{
  border-block:var(--lds-border-width-subtle) solid var(--color-border-subtle);
  background:transparent!important;
  box-shadow:none;
}

body[data-route="foundation-motion"] .motion-duration-copy .motion-reduced-spec{
  padding:var(--lds-space-4) 0 var(--lds-space-4) var(--lds-space-5);
  background:transparent;
}

/* Receptive and actionable specimens keep physical depth without giving their
   surrounding studies a card boundary. */
body[data-route="foundation-motion"] :is(
  .motion-local-icon-button,
  .motion-mini-surface,
  .motion-moving-surface,
  .motion-toast-surface
){
  border:0;
  border-radius:var(--lds-radius-lg);
  background:var(--lds-relief-surface);
  box-shadow:
    var(--lds-relief-offset) var(--lds-relief-offset) var(--lds-relief-blur) var(--lds-relief-shadow),
    calc(var(--lds-relief-offset) * -1) calc(var(--lds-relief-offset) * -1) var(--lds-relief-blur) var(--lds-relief-light);
}

body[data-route="foundation-motion"] .motion-mini-surface{
  overflow:hidden;
}

body[data-route="foundation-motion"][data-color-theme="light"] :is(
  .motion-local-icon-button,
  .motion-mini-surface,
  .motion-moving-surface,
  .motion-toast-surface
){
  border:0;
  background:var(--lds-relief-light-surface);
  box-shadow:
    var(--lds-relief-offset) var(--lds-relief-offset) var(--lds-relief-blur) var(--lds-relief-light-shadow),
    calc(var(--lds-relief-offset) * -1) calc(var(--lds-relief-offset) * -1) var(--lds-relief-blur) var(--lds-relief-light-highlight);
}

body[data-route="foundation-motion"] :is(
  .motion-local-field input,
  .motion-compact-field input
){
  border:0;
  border-radius:var(--lds-relief-inset-radius);
  background:var(--lds-relief-surface);
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-light);
}

body[data-route="foundation-motion"] .motion-local-field input:hover:not(:focus),
body[data-route="foundation-motion"] .motion-compact-field input:hover:not(:focus){
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-light),
    0 0 0 var(--lds-relief-inset-hover-stroke-width) var(--lds-interaction-hover-edge);
}

body[data-route="foundation-motion"] .motion-local-field input:focus,
body[data-route="foundation-motion"] .motion-compact-field input:focus{
  outline:0;
  box-shadow:
    inset var(--lds-relief-inset-offset) var(--lds-relief-inset-offset) var(--lds-relief-inset-blur) var(--lds-relief-shadow),
    inset calc(-1 * var(--lds-relief-inset-offset)) calc(-1 * var(--lds-relief-inset-offset)) var(--lds-relief-inset-blur) var(--lds-relief-light),
    0 0 0 var(--lds-focus-ring-width) color-mix(in srgb,var(--color-focus-ring) 72%,transparent);
}

/* The curve and choreography sections are editorial tables, not card walls. */
body[data-route="foundation-motion"] .motion-easing-scenes article{
  background:transparent;
}

body[data-route="foundation-motion"] .motion-curve-spec,
body[data-route="foundation-motion"] .motion-easing-stage{
  background:transparent;
  box-shadow:none;
}

body[data-route="foundation-motion"] .motion-choreography-contract{
  border:0;
  background:transparent;
  box-shadow:none;
}

body[data-route="foundation-motion"] .motion-equivalence{
  border-inline:0;
}

@media (max-width:900px){
  body[data-route="foundation-motion"] .motion-compact-card:nth-child(n){
    border-right:0!important;
  }
}

/* Decorative Elements foundation
   Ornament is presented as editorial evidence, never as a card wall. */
body[data-route="foundation-decorative"] .decorative-foundation{
  display:grid;
  width:100%;
}

body[data-route="foundation-decorative"] .decorative-section{
  display:grid;
  gap:clamp(48px,7vw,88px);
  padding-block:clamp(72px,10vw,128px);
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-section:first-child{
  border-top:0;
}

body[data-route="foundation-decorative"] .decorative-section-head{
  display:grid;
  grid-template-columns:minmax(128px,.24fr) minmax(0,1fr);
  gap:clamp(32px,6vw,96px);
  align-items:start;
}

body[data-route="foundation-decorative"] .decorative-section-head > div{
  display:grid;
  gap:20px;
  max-width:760px;
}

body[data-route="foundation-decorative"] .decorative-section-index,
body[data-route="foundation-decorative"] .decorative-role-number,
body[data-route="foundation-decorative"] .decorative-specimen-number,
body[data-route="foundation-decorative"] .decorative-source-label,
body[data-route="foundation-decorative"] .decorative-divider-list figcaption,
body[data-route="foundation-decorative"] .decorative-doodle-grid figcaption,
body[data-route="foundation-decorative"] .decorative-access-list article > span{
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  line-height:1.4;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body[data-route="foundation-decorative"] .decorative-section-index,
body[data-route="foundation-decorative"] .decorative-role-number{
  color:var(--color-accent);
}

body[data-route="foundation-decorative"] .decorative-section h2{
  max-width:820px;
  margin:0;
  font-size:clamp(38px,5.2vw,68px);
  line-height:1.02;
  letter-spacing:-.035em;
}

body[data-route="foundation-decorative"] .decorative-section-head p{
  max-width:700px;
  margin:0;
  color:var(--color-text-secondary);
  font-size:clamp(16px,1.7vw,20px);
  line-height:1.55;
}

body[data-route="foundation-decorative"] .decorative-role-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-role-list article{
  display:grid;
  align-content:start;
  gap:14px;
  min-width:0;
  padding:clamp(36px,5vw,64px);
}

body[data-route="foundation-decorative"] .decorative-role-list article + article{
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-role-art{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:150px;
  margin-bottom:20px;
  color:var(--color-text-secondary);
}

body[data-route="foundation-decorative"] .decorative-role-art-pointers{
  gap:10px;
}

body[data-route="foundation-decorative"] .decorative-role-art .decorative-pointer{
  width:min(42%,92px);
}

body[data-route="foundation-decorative"] .decorative-role-art .decorative-divider{
  width:min(100%,230px);
}

body[data-route="foundation-decorative"] .decorative-role-art .decorative-doodle{
  width:min(100%,220px);
  max-height:150px;
}

body[data-route="foundation-decorative"] .decorative-role-list h3,
body[data-route="foundation-decorative"] .decorative-rule-list h3,
body[data-route="foundation-decorative"] .decorative-access-list h3{
  margin:0;
  font-size:clamp(21px,2.2vw,29px);
  line-height:1.12;
  letter-spacing:-.02em;
}

body[data-route="foundation-decorative"] :is(.decorative-role-list,.decorative-rule-list,.decorative-access-list) p{
  margin:0;
  color:var(--color-text-secondary);
  line-height:1.55;
}

body[data-route="foundation-decorative"] .decorative-pointer-list,
body[data-route="foundation-decorative"] .decorative-divider-list{
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-pointer-list article,
body[data-route="foundation-decorative"] .decorative-divider-list figure{
  display:grid;
  grid-template-columns:64px minmax(240px,1fr) minmax(150px,220px);
  gap:clamp(24px,5vw,72px);
  align-items:center;
  min-height:132px;
  margin:0;
  padding:28px clamp(8px,2vw,24px);
}

body[data-route="foundation-decorative"] .decorative-pointer-list article + article,
body[data-route="foundation-decorative"] .decorative-divider-list figure + figure{
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-pointer-pair{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:clamp(24px,5vw,64px);
}

body[data-route="foundation-decorative"] .decorative-pointer-pair img{
  width:min(42%,150px);
  height:auto;
}

body[data-route="foundation-decorative"] .decorative-divider-list .decorative-divider{
  width:min(100%,340px);
  height:auto;
  justify-self:center;
}

body[data-route="foundation-decorative"] .decorative-source-label,
body[data-route="foundation-decorative"] .decorative-divider-list figcaption,
body[data-route="foundation-decorative"] .decorative-doodle-grid figcaption{
  color:var(--color-text-muted);
}

body[data-route="foundation-decorative"] .decorative-doodle-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-doodle-grid figure{
  display:grid;
  grid-template-columns:42px minmax(0,1fr);
  grid-template-rows:minmax(220px,auto) auto;
  gap:20px;
  align-items:start;
  min-width:0;
  margin:0;
  padding:clamp(36px,5vw,64px);
}

body[data-route="foundation-decorative"] .decorative-doodle-grid figure:nth-child(even){
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-doodle-grid figure:nth-child(n+3){
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-doodle-stage{
  display:grid;
  place-items:center;
  min-height:220px;
}

body[data-route="foundation-decorative"] .decorative-doodle-stage img{
  width:min(100%,360px);
  max-height:220px;
  object-fit:contain;
}

body[data-route="foundation-decorative"] .decorative-doodle-grid figcaption{
  grid-column:2;
}

body[data-route="foundation-decorative"] :is(.decorative-pointer,.decorative-divider){
  display:block;
  filter:invert(1);
  opacity:.62;
}

body[data-route="foundation-decorative"] .decorative-doodle{
  display:block;
  opacity:.78;
}

body[data-route="foundation-decorative"][data-color-theme="light"] :is(.decorative-pointer,.decorative-divider){
  filter:none;
}

body[data-route="foundation-decorative"][data-color-theme="light"] .decorative-doodle{
  filter:invert(1);
}

body[data-route="foundation-decorative"] .decorative-rule-list{
  counter-reset:decorative-rule;
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-rule-list article{
  display:grid;
  grid-template-columns:64px minmax(220px,.55fr) minmax(0,1fr);
  gap:clamp(24px,5vw,72px);
  align-items:baseline;
  padding:32px clamp(8px,2vw,24px);
}

body[data-route="foundation-decorative"] .decorative-rule-list article + article{
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-rule-list article > span{
  color:var(--color-accent);
  font-family:var(--lds-font-mono);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
}

body[data-route="foundation-decorative"] .decorative-access-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-block:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-access-list article{
  display:grid;
  gap:16px;
  padding:clamp(36px,5vw,64px);
}

body[data-route="foundation-decorative"] .decorative-access-list article:nth-child(even){
  border-left:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-access-list article:nth-child(n+3){
  border-top:1px solid var(--color-border-subtle);
}

body[data-route="foundation-decorative"] .decorative-access-list article > span{
  color:var(--color-accent);
}

@media (max-width:900px){
  body[data-route="foundation-decorative"] .decorative-role-list{
    grid-template-columns:1fr;
  }

  body[data-route="foundation-decorative"] .decorative-role-list article + article{
    border-top:1px solid var(--color-border-subtle);
    border-left:0;
  }

  body[data-route="foundation-decorative"] .decorative-pointer-list article,
  body[data-route="foundation-decorative"] .decorative-divider-list figure{
    grid-template-columns:48px minmax(0,1fr);
  }

  body[data-route="foundation-decorative"] :is(.decorative-source-label,.decorative-divider-list figcaption){
    grid-column:2;
  }
}

@media (max-width:680px){
  body[data-route="foundation-decorative"] .decorative-section{
    gap:40px;
    padding-block:64px;
  }

  body[data-route="foundation-decorative"] .decorative-section-head{
    grid-template-columns:1fr;
    gap:20px;
  }

  body[data-route="foundation-decorative"] .decorative-doodle-grid,
  body[data-route="foundation-decorative"] .decorative-access-list{
    grid-template-columns:1fr;
  }

  body[data-route="foundation-decorative"] .decorative-doodle-grid figure:nth-child(even),
  body[data-route="foundation-decorative"] .decorative-access-list article:nth-child(even){
    border-left:0;
  }

  body[data-route="foundation-decorative"] .decorative-doodle-grid figure:nth-child(n+2),
  body[data-route="foundation-decorative"] .decorative-access-list article:nth-child(n+2){
    border-top:1px solid var(--color-border-subtle);
  }

  body[data-route="foundation-decorative"] .decorative-rule-list article{
    grid-template-columns:40px minmax(0,1fr);
    gap:16px;
  }

  body[data-route="foundation-decorative"] .decorative-rule-list article p{
    grid-column:2;
  }
}

/* Motion hierarchy refinement
   The doctrine reads vertically; tempo numerals carry the nacreous signature. */
body[data-route="foundation-motion"]{
  --motion-tempo-nacre:
    linear-gradient(
      104deg,
      #20e7ff 0%,
      #269cff 17%,
      #6655ff 33%,
      #a827f0 48%,
      #ed1dab 63%,
      #ff3f62 78%,
      #ff7926 91%,
      #ffc44f 100%
    );
}

body[data-route="foundation-motion"][data-color-theme="light"]{
  --motion-tempo-nacre:
    linear-gradient(
      104deg,
      #007f98 0%,
      #176bc4 17%,
      #4f48ce 33%,
      #7b28b8 48%,
      #b91a83 63%,
      #d73555 78%,
      #d76519 91%,
      #b97a08 100%
  );
}

body[data-route="foundation-motion"] .motion-study--state{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #7464ff 0%,
      #ad32f3 19%,
      #eb1bb8 39%,
      #ff365f 60%,
      #ff8427 81%,
      #ffd04c 100%
    );
}

body[data-route="foundation-motion"] .motion-study--spatial{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #15ead4 0%,
      #1fc8ff 20%,
      #377eff 40%,
      #6755ff 59%,
      #a52def 79%,
      #e62ac1 100%
    );
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-study--state{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #4e49c8 0%,
      #7626af 19%,
      #ac197f 39%,
      #d22d4d 60%,
      #d66e18 81%,
      #a97608 100%
    );
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-study--spatial{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #087f74 0%,
      #087fa3 20%,
      #2868bd 40%,
      #5146c0 59%,
      #7823ab 79%,
      #a71b86 100%
  );
}

body[data-route="foundation-motion"] [data-motion-duration-scene="state"]{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #7464ff 0%,
      #ad32f3 19%,
      #eb1bb8 39%,
      #ff365f 60%,
      #ff8427 81%,
      #ffd04c 100%
    );
}

body[data-route="foundation-motion"] [data-motion-duration-scene="spatial"]{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #15ead4 0%,
      #1fc8ff 20%,
      #377eff 40%,
      #6755ff 59%,
      #a52def 79%,
      #e62ac1 100%
    );
}

body[data-route="foundation-motion"] [data-motion-duration-scene="material"]{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #ffb52e 0%,
      #ff672b 18%,
      #ff315e 37%,
      #ec1db8 56%,
      #8b3df3 75%,
      #2d8dff 89%,
      #1de3ec 100%
    );
}

body[data-route="foundation-motion"][data-color-theme="light"] [data-motion-duration-scene="state"]{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #4e49c8 0%,
      #7626af 19%,
      #ac197f 39%,
      #d22d4d 60%,
      #d66e18 81%,
      #a97608 100%
    );
}

body[data-route="foundation-motion"][data-color-theme="light"] [data-motion-duration-scene="spatial"]{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #087f74 0%,
      #087fa3 20%,
      #2868bd 40%,
      #5146c0 59%,
      #7823ab 79%,
      #a71b86 100%
    );
}

body[data-route="foundation-motion"][data-color-theme="light"] [data-motion-duration-scene="material"]{
  --motion-tempo-nacre:
    linear-gradient(
      106deg,
      #a96b08 0%,
      #c04b17 18%,
      #cf294d 37%,
      #a7197e 56%,
      #6729b1 75%,
      #196bbd 89%,
      #087f8a 100%
    );
}

body[data-route="foundation-motion"] .foundation-standard-visual .foundation-standard-section-head{
  grid-template-columns:minmax(116px,.19fr) minmax(0,1fr);
  gap:clamp(20px,2.5vw,32px) clamp(32px,5vw,80px);
}

body[data-route="foundation-motion"] .foundation-standard-visual .foundation-standard-section-head > span{
  grid-column:1;
  grid-row:1 / span 2;
}

body[data-route="foundation-motion"] .foundation-standard-visual .foundation-standard-section-head > h2{
  grid-column:2;
  max-width:16ch;
}

body[data-route="foundation-motion"] .foundation-motion-practice-lead{
  display:grid;
  grid-column:2;
  gap:22px;
  max-width:56ch;
  padding-top:clamp(10px,1.5vw,18px);
}

body[data-route="foundation-motion"] .foundation-motion-practice-lead > p{
  margin:0;
}

body[data-route="foundation-motion"] .foundation-motion-practice-lead > p:first-child{
  color:var(--color-text-secondary);
  font-size:clamp(17px,1.45vw,20px);
  line-height:1.58;
}

body[data-route="foundation-motion"] .foundation-motion-practice-lead > p:last-child{
  display:grid;
  grid-template-columns:max-content minmax(0,1fr);
  gap:16px;
  align-items:baseline;
  padding-top:18px;
  border-top:1px solid var(--color-border-subtle);
  color:var(--color-text-muted);
  font-size:clamp(14px,1.1vw,16px);
  line-height:1.5;
}

body[data-route="foundation-motion"] .foundation-motion-practice-lead strong{
  color:var(--lds-direction-label-color);
  font-family:var(--lds-font-mono);
  font-size:11px;
  letter-spacing:.1em;
  text-transform:uppercase;
}

body[data-route="foundation-motion"][data-color-theme="dark"] .foundation-motion-practice-lead strong{
  color:color-mix(in srgb,var(--color-text-secondary) 86%,var(--lds-selection-accent) 14%);
  text-shadow:0 0 9px color-mix(in srgb,var(--lds-selection-accent) 10%,transparent);
}

body[data-route="foundation-motion"][data-color-theme="dark"] .motion-study-metric > span{
  padding-left:17px;
  color:#edf3fb;
  text-shadow:
    0 0 1px rgb(255 255 255 / .78),
    0 0 3px rgb(255 255 255 / .34),
    0 0 8px rgb(220 239 255 / .18),
    0 0 16px rgb(120 205 255 / .07);
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-study-metric > span{
  padding-left:17px;
  color:var(--lds-direction-label-color);
  text-shadow:none;
}

body[data-route="foundation-motion"] :is(.motion-metric-index,.lds-example-index){
  display:inline-block;
  font-size:1.35em;
  line-height:.75;
  letter-spacing:0;
  vertical-align:-.04em;
}

body[data-route="foundation-motion"] .motion-study-metric > strong{
  position:relative;
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:clamp(250px,22vw,310px);
  min-height:178px;
  padding:36px 34px;
  border:0;
  border-radius:38px;
  background:var(--lds-relief-surface);
  box-shadow:
    inset 6px 6px 15px var(--lds-relief-shadow),
    inset -6px -6px 15px var(--lds-relief-light);
  color:var(--color-text-primary);
  font-size:inherit;
  line-height:.88;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
  filter:none;
}

body[data-route="foundation-motion"] .motion-study-metric > strong::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:17px;
  border-radius:27px;
  background:var(--lds-relief-surface);
  box-shadow:
    10px 10px 24px var(--lds-relief-shadow),
    -10px -10px 24px var(--lds-relief-light);
}

body[data-route="foundation-motion"] .motion-duration-copy > header > .motion-duration-plinth{
  position:relative;
  isolation:isolate;
  display:flex;
  grid-column:1;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:clamp(228px,20vw,282px);
  min-height:154px;
  padding:30px;
  border:0;
  border-radius:34px;
  background:var(--lds-relief-surface);
  box-shadow:
    inset 5px 5px 13px var(--lds-relief-shadow),
    inset -5px -5px 13px var(--lds-relief-light);
  color:var(--color-text-primary);
  font-size:inherit;
  line-height:.88;
  letter-spacing:var(--lds-heading-tracking-display,-.012em);
}

body[data-route="foundation-motion"] .motion-duration-copy > header > .motion-duration-plinth::before{
  content:"";
  position:absolute;
  z-index:0;
  inset:14px;
  border-radius:23px;
  background:var(--lds-relief-surface);
  box-shadow:
    9px 9px 21px var(--lds-relief-shadow),
    -9px -9px 21px var(--lds-relief-light);
}

body[data-route="foundation-motion"] .motion-tempo-number{
  position:relative;
  z-index:1;
  background:var(--motion-tempo-nacre);
  background-clip:text;
  -webkit-background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  background-size:240% 100%;
  font-family:"Satoshi",var(--lds-font-display,var(--lds-font-family));
  font-size:clamp(68px,7.1vw,96px);
  font-weight:800;
  animation:motion-tempo-spectrum-shift 7.2s cubic-bezier(.45,0,.25,1) infinite alternate;
  will-change:background-position;
  filter:
    drop-shadow(0 0 6px rgb(43 206 255 / .18))
    drop-shadow(0 0 15px rgb(231 31 179 / .11));
}

body[data-route="foundation-motion"] .motion-study--state .motion-tempo-number,
body[data-route="foundation-motion"] [data-motion-duration-scene="state"] .motion-tempo-number{
  animation-delay:-2.4s;
}

body[data-route="foundation-motion"] .motion-study--spatial .motion-tempo-number,
body[data-route="foundation-motion"] [data-motion-duration-scene="spatial"] .motion-tempo-number{
  animation-delay:-4.8s;
}

body[data-route="foundation-motion"] [data-motion-duration-scene="material"] .motion-tempo-number{
  animation-delay:-1.2s;
}

@keyframes motion-tempo-spectrum-shift{
  0%{background-position:0% 50%}
  45%{background-position:58% 50%}
  100%{background-position:100% 50%}
}

body[data-route="foundation-motion"] .motion-study-metric > strong small{
  position:relative;
  z-index:1;
  color:var(--color-text-secondary);
  font-family:var(--lds-font-mono);
  font-size:clamp(16px,1.45vw,20px);
  font-weight:750;
  letter-spacing:.03em;
  line-height:1;
  margin-left:0;
  text-transform:lowercase;
  transform:translateY(24px);
  -webkit-text-fill-color:var(--color-text-secondary);
  filter:none;
}

body[data-route="foundation-motion"] .motion-duration-copy > header > .motion-duration-plinth small{
  position:relative;
  z-index:1;
  margin-left:0;
  color:var(--color-text-secondary);
  font-family:var(--lds-font-mono);
  font-size:clamp(15px,1.25vw,18px);
  font-weight:750;
  letter-spacing:.03em;
  line-height:1;
  text-transform:lowercase;
  transform:translateY(21px);
  -webkit-text-fill-color:var(--color-text-secondary);
}

body[data-route="foundation-motion"] .motion-duration-copy > header > .motion-duration-plinth .motion-tempo-number{
  font-size:clamp(62px,6vw,84px);
}

body[data-route="foundation-motion"][data-color-theme="light"] .motion-tempo-number{
  filter:drop-shadow(0 2px 5px rgb(55 77 132 / .18));
}

body[data-route="foundation-motion"] .motion-study-header{
  grid-template-columns:minmax(230px,.34fr) minmax(0,1fr);
  gap:clamp(48px,6vw,96px);
  align-items:center;
}

body[data-route="foundation-motion"] .motion-study-intro{
  order:2;
  width:auto;
  max-width:860px;
  margin:0;
}

body[data-route="foundation-motion"] .motion-study-intro h3{
  max-width:17ch;
}

body[data-route="foundation-motion"] .motion-study-metric{
  order:1;
  grid-template-columns:minmax(0,1fr);
  justify-items:start;
  width:max-content;
  max-width:100%;
  margin:0;
}

body[data-route="foundation-motion"] .motion-study-header .motion-study-metric > strong{
  width:clamp(230px,19vw,282px);
  min-height:164px;
  padding:32px 30px;
}

@media (prefers-reduced-motion:reduce){
  body[data-route="foundation-motion"] .motion-tempo-number{
    animation:none;
    background-position:50% 50%;
    will-change:auto;
  }
}

@media (max-width:920px){
  body[data-route="foundation-motion"] .foundation-standard-visual .foundation-standard-section-head{
    grid-template-columns:1fr;
  }

  body[data-route="foundation-motion"] .foundation-standard-visual .foundation-standard-section-head > :is(span,h2,.foundation-motion-practice-lead){
    grid-column:1;
    grid-row:auto;
  }
}

@media (max-width:820px){
  body[data-route="foundation-motion"] .motion-study-header{
    grid-template-columns:minmax(0,1fr);
    gap:40px;
    align-items:start;
  }

  body[data-route="foundation-motion"] .motion-study-metric{
    order:1;
  }

  body[data-route="foundation-motion"] .motion-study-intro{
    order:2;
    width:100%;
    max-width:760px;
  }
}

@media (max-width:560px){
  body[data-route="foundation-motion"] .foundation-motion-practice-lead > p:last-child{
    grid-template-columns:1fr;
    gap:8px;
  }

  body[data-route="foundation-motion"] .motion-study-metric{
    grid-template-columns:1fr;
    justify-items:start;
    margin-left:0;
  }

  body[data-route="foundation-motion"] .motion-study-metric > strong{
    width:min(100%,270px);
    min-height:154px;
    padding:28px;
  }

  body[data-route="foundation-motion"] .motion-tempo-number{
    font-size:clamp(63px,20vw,82px);
  }

  body[data-route="foundation-motion"] .motion-duration-copy > header > .motion-duration-plinth{
    width:min(100%,250px);
    min-height:144px;
    padding:26px;
  }

  body[data-route="foundation-motion"] .motion-duration-copy > header > .motion-duration-plinth .motion-tempo-number{
    font-size:clamp(58px,18vw,76px);
  }
}

/* Tempo spotlight stages
   Color belongs to the full-width atmosphere; the interactive specimen stays
   typographically neutral on one elevated, editorial instrument surface. */
body[data-route="foundation-motion"]{
  --motion-spotlight-scrim:
    linear-gradient(118deg,rgb(5 8 15 / .18),rgb(5 8 15 / .48));
  --motion-spotlight-surface:
    linear-gradient(
      142deg,
      color-mix(in srgb,var(--color-bg-panel) 95%,#1b2840 5%),
      color-mix(in srgb,var(--color-bg-surface) 96%,#28172e 4%)
    );
  --motion-spotlight-shadow:
    0 38px 72px -42px rgb(0 0 0 / .86),
    0 18px 34px -28px rgb(0 0 0 / .72),
    inset 0 1px 0 rgb(255 255 255 / .055);
}

body[data-route="foundation-motion"][data-color-theme="light"]{
  --motion-spotlight-scrim:
    linear-gradient(118deg,rgb(255 255 255 / .40),rgb(241 245 252 / .64));
  --motion-spotlight-surface:
    linear-gradient(
      142deg,
      color-mix(in srgb,var(--color-bg-panel) 96%,#e9f2ff 4%),
      color-mix(in srgb,var(--color-bg-surface) 97%,#f3eafa 3%)
    );
  --motion-spotlight-shadow:
    0 38px 72px -46px rgb(28 42 72 / .38),
    0 18px 34px -30px rgb(53 72 110 / .28),
    inset 0 1px 0 rgb(255 255 255 / .88);
}

body[data-route="foundation-motion"] .motion-example-spotlight{
  position:relative;
  isolation:isolate;
  width:100%;
  min-width:0;
  padding:clamp(34px,5.2vw,76px);
  border:0;
  border-radius:0;
  background-image:var(--motion-spotlight-scrim),var(--motion-tempo-nacre);
  background-size:100% 100%,180% 180%;
  background-position:center,0% 46%;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / .08),
    inset 0 -1px 0 rgb(0 0 0 / .24);
  animation:motion-spotlight-drift 16s cubic-bezier(.45,0,.25,1) infinite alternate;
}

@media (min-width:1040px){
  body[data-route="foundation-motion"] .motion-example-spotlight{
    width:calc(100vw - var(--lds-chrome-sidebar-width));
    max-width:none;
    margin-left:calc(
      -1 * (
        var(--lds-chrome-content-gutter)
        + var(--lds-content-text-inset)
      )
    );
    transition:
      width var(--lds-shell-motion),
      margin-left var(--lds-shell-motion);
  }
}

body[data-route="foundation-motion"] .motion-example-spotlight--local-focus{
  background-position:center,76% 54%;
  animation-delay:-5.3s;
}

body[data-route="foundation-motion"] .motion-example-spotlight--state{
  background-position:center,30% 48%;
  animation-delay:-8s;
}

body[data-route="foundation-motion"] .motion-example-spotlight--spatial{
  background-position:center,64% 52%;
  animation-delay:-11.4s;
}

body[data-route="foundation-motion"] .motion-local-specimens{
  gap:clamp(56px,8vw,112px);
}

body[data-route="foundation-motion"] .motion-example-spotlight > :is(
  .motion-local-specimen,
  .motion-state-specimen,
  .motion-spatial-specimen
){
  position:relative;
  z-index:1;
  width:100%;
  min-width:0;
  margin:0;
  border:0;
  border-radius:clamp(22px,2.4vw,34px);
  background:var(--motion-spotlight-surface);
  box-shadow:var(--motion-spotlight-shadow);
}

body[data-route="foundation-motion"] .motion-example-spotlight > .motion-local-specimen{
  overflow:hidden;
}

body[data-route="foundation-motion"] .motion-example-spotlight > .motion-state-specimen{
  border-block:0;
}

body[data-route="foundation-motion"] .motion-example-spotlight > .motion-spatial-specimen{
  gap:0;
  overflow:hidden;
  padding:0;
}

body[data-route="foundation-motion"] .motion-example-spotlight .motion-spatial-comparison{
  padding:0 clamp(36px,5vw,72px) clamp(36px,5vw,72px);
}

@keyframes motion-spotlight-drift{
  from{background-position:center,0% 44%}
  to{background-position:center,100% 56%}
}

@media (prefers-reduced-motion:reduce){
  body[data-route="foundation-motion"] .motion-example-spotlight{
    animation:none;
    background-position:center,50% 50%;
  }
}

@media (max-width:680px){
  body[data-route="foundation-motion"] .motion-example-spotlight{
    padding:clamp(20px,6vw,30px);
  }

  body[data-route="foundation-motion"] .motion-example-spotlight > :is(
    .motion-local-specimen,
    .motion-state-specimen,
    .motion-spatial-specimen
  ){
    border-radius:22px;
  }

  body[data-route="foundation-motion"] .motion-example-spotlight .motion-spatial-comparison{
    padding:0 clamp(24px,6vw,34px) clamp(24px,6vw,34px);
  }
}

/* --------------------------------------------------------------------------
   Buttons Comparison — inventory before ratification
   A single audit field for the canonical action, source hierarchy, nacre
   study, button group, icon action, and navigation controls.
   -------------------------------------------------------------------------- */
body[data-route="component-buttons-comparison"] .lds-page-content{
  padding-bottom:0;
}

body[data-route="component-buttons-comparison"] .buttons-comparison-page{
  --bc-ink:#f4f7ff;
  --bc-muted:#aeb8cb;
  --bc-line:rgba(177,196,224,.18);
  --bc-dark:#11151f;
  --bc-light:#eef2f7;
  display:grid;
  gap:0;
  margin-top:clamp(24px,4vw,56px);
}

body[data-route="component-buttons-comparison"] .bc-audit-line{
  display:flex;
  flex-wrap:wrap;
  gap:0;
  padding:0 0 clamp(28px,4vw,52px);
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="component-buttons-comparison"] .bc-audit-line span{
  padding:0 clamp(18px,3vw,40px);
  border-left:1px solid var(--color-border-subtle);
  color:var(--color-text-secondary);
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body[data-route="component-buttons-comparison"] .bc-audit-line span:first-child{
  padding-left:0;
  border-left:0;
}

body[data-route="component-buttons-comparison"] .bc-comparison{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="component-buttons-comparison"] .bc-surface{
  min-width:0;
  padding:clamp(36px,5vw,72px) clamp(24px,4vw,56px) clamp(52px,7vw,96px);
}

body[data-route="component-buttons-comparison"] .bc-light-surface{
  color:#17202d;
  background:
    radial-gradient(circle at 16% 4%,rgba(255,255,255,.96),transparent 30%),
    linear-gradient(145deg,#f5f7fa,#e2e7ed);
}

body[data-route="component-buttons-comparison"] .bc-dark-surface{
  color:var(--bc-ink);
  background:
    radial-gradient(circle at 18% 0%,rgba(48,72,112,.22),transparent 34%),
    linear-gradient(145deg,#171c27,#0c1018);
}

body[data-route="component-buttons-comparison"] .bc-surface-head,
body[data-route="component-buttons-comparison"] .bc-section-head{
  display:grid;
  gap:8px;
  margin-bottom:clamp(36px,5vw,64px);
}

body[data-route="component-buttons-comparison"] .bc-surface-head>span,
body[data-route="component-buttons-comparison"] .bc-section-head>span{
  color:#58dcfa;
  font-family:"IBM Plex Mono",monospace;
  font-size:12px;
  font-weight:700;
  letter-spacing:.13em;
  text-transform:uppercase;
}

body[data-route="component-buttons-comparison"] .bc-surface-head h2,
body[data-route="component-buttons-comparison"] .bc-section-head h2{
  margin:0;
  color:inherit;
  font-size:clamp(30px,3.2vw,52px);
  line-height:.98;
  letter-spacing:-.035em;
}

body[data-route="component-buttons-comparison"] .bc-family-stack{
  display:grid;
}

body[data-route="component-buttons-comparison"] .bc-family{
  min-width:0;
  padding:28px 0 32px;
  border-top:1px solid currentColor;
  border-color:color-mix(in srgb,currentColor 16%,transparent);
}

body[data-route="component-buttons-comparison"] .bc-family-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:24px;
}

body[data-route="component-buttons-comparison"] .bc-family-head h3{
  margin:0;
  color:inherit;
  font-size:18px;
}

body[data-route="component-buttons-comparison"] .bc-family-head>span{
  color:color-mix(in srgb,currentColor 56%,transparent);
  font-family:"IBM Plex Mono",monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

body[data-route="component-buttons-comparison"] .bc-state-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(112px,1fr));
  gap:24px 14px;
}

body[data-route="component-buttons-comparison"] .bc-state{
  display:grid;
  align-content:start;
  justify-items:start;
  gap:11px;
  min-width:0;
}

body[data-route="component-buttons-comparison"] .bc-state>span,
body[data-route="component-buttons-comparison"] .bc-group-state>span{
  color:color-mix(in srgb,currentColor 52%,transparent);
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

body[data-route="component-buttons-comparison"] :is(.bc-state,.bc-group-state) button{
  position:relative;
  z-index:0;
}

body[data-route="component-buttons-comparison"] .bc-state button>span:last-child:empty{
  display:none;
}

body[data-route="component-buttons-comparison"] .bc-is-hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.09) saturate(1.12);
}

body[data-route="component-buttons-comparison"] .bc-is-pressed:not(:disabled){
  transform:scale(.97);
  filter:brightness(.94) saturate(1.08);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.28),0 4px 10px -7px rgba(0,0,0,.46)!important;
}

body[data-route="component-buttons-comparison"] .bc-is-focus:not(:disabled){
  outline:3px solid #78a9ff!important;
  outline-offset:3px!important;
}

body[data-route="component-buttons-comparison"] .bc-is-selected:not(:disabled){
  box-shadow:inset 0 0 0 1px rgba(221,237,255,.42),0 0 0 1px rgba(114,174,255,.28),0 10px 24px -12px rgba(44,129,235,.74)!important;
}

body[data-route="component-buttons-comparison"] .bc-is-disabled,
body[data-route="component-buttons-comparison"] button:disabled{
  opacity:.38;
  cursor:not-allowed;
  filter:grayscale(.5);
}

body[data-route="component-buttons-comparison"] .bc-canonical{
  min-width:104px;
}

body[data-route="component-buttons-comparison"] .bc-light.bc-canonical{
  color:#182433;
}

body[data-route="component-buttons-comparison"] .bc-dark.bc-canonical{
  color:#f5f8ff;
}

body[data-route="component-buttons-comparison"] .bc-source{
  min-width:104px;
}

body[data-route="component-buttons-comparison"] .bc-nacre{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:112px;
  min-height:44px;
  padding:0 24px;
  overflow:hidden;
  border:1px solid rgba(220,237,255,.34);
  border-radius:999px;
  font:700 14px/1 "Hanken Grotesk",sans-serif;
  transition:transform 220ms ease,filter 220ms ease,box-shadow 240ms ease;
}

body[data-route="component-buttons-comparison"] .bc-nacre::before{
  content:"";
  position:absolute;
  inset:-70%;
  z-index:-1;
  background:conic-gradient(from 24deg,#4ddcf4,#9858df,#f0529e,#ffe7a8,#49d4e6,#9858df);
  opacity:.52;
  filter:blur(13px) saturate(1.35);
}

body[data-route="component-buttons-comparison"] .bc-nacre-light{
  color:#111824;
  background:linear-gradient(154deg,rgba(255,255,255,.9),rgba(220,227,239,.76));
  box-shadow:inset 0 1px 0 #fff,0 12px 24px -14px rgba(28,43,67,.44);
}

body[data-route="component-buttons-comparison"] .bc-nacre-dark{
  color:#fff;
  background:linear-gradient(154deg,rgba(45,54,72,.84),rgba(3,7,13,.88));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 14px 28px -14px #000;
}

body[data-route="component-buttons-comparison"] .bc-glass-light{
  color:#152033;
  background:rgba(255,255,255,.34);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}

body[data-route="component-buttons-comparison"] .bc-glass-dark{
  color:#f3f7ff;
  background:rgba(4,10,20,.28);
  backdrop-filter:blur(14px) saturate(150%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
}

body[data-route="component-buttons-comparison"] .bc-system,
body[data-route="component-buttons-comparison"] .bc-liquid,
body[data-route="component-buttons-comparison"] .bc-group-section,
body[data-route="component-buttons-comparison"] .bc-image-trials{
  padding:clamp(64px,8vw,112px) 0;
  border-bottom:1px solid var(--color-border-subtle);
}

body[data-route="component-buttons-comparison"] .bc-liquid-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0 clamp(40px,6vw,88px);
}

body[data-route="component-buttons-comparison"] .bc-liquid .bc-family{
  color:var(--color-text-primary);
}

body[data-route="component-buttons-comparison"] .bc-liquid .lg-btn{
  min-width:104px;
}

body[data-route="component-buttons-comparison"] .bc-system-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:clamp(40px,6vw,88px);
}

body[data-route="component-buttons-comparison"] .bc-system .bc-family{
  color:var(--color-text-primary);
}

body[data-route="component-buttons-comparison"] :is(.bc-pearl,.bc-nav-button,.bc-theme-button){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  border-radius:999px;
  color:var(--color-text-primary);
  font:700 13px/1 "Hanken Grotesk",sans-serif;
}

body[data-route="component-buttons-comparison"] .bc-pearl{
  isolation:isolate;
  width:42px;
  min-width:42px;
  height:42px;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(218,237,252,.38);
  border-radius:50% 50% 48% 52% / 51% 48% 52% 49%;
  background:
    radial-gradient(circle at 24% 14%,rgba(255,255,255,.42),transparent 30%),
    radial-gradient(circle at 78% 78%,rgba(23,191,214,.48),transparent 42%),
    radial-gradient(circle at 18% 72%,rgba(205,55,211,.42),transparent 44%),
    #111828;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -2px -3px 5px rgba(0,0,0,.28),0 8px 18px -10px rgba(0,0,0,.62),0 0 13px -5px rgba(48,190,215,.32);
}

body[data-route="component-buttons-comparison"] .bc-chevron{
  font-size:27px;
  font-weight:500;
  line-height:1;
}

body[data-route="component-buttons-comparison"] .bc-nav-button{
  min-width:112px;
  padding:0 20px;
  border:1px solid rgba(152,177,215,.18);
  background:rgba(22,29,43,.26);
  backdrop-filter:blur(12px);
}

body[data-route="component-buttons-comparison"] .bc-theme-button{
  min-width:84px;
  padding:0 18px;
  border:1px solid rgba(202,223,250,.22);
  background:linear-gradient(145deg,rgba(132,59,175,.28),rgba(30,158,183,.18));
}

body[data-route="component-buttons-comparison"] .bc-icon-action{
  width:44px;
  padding:0;
}

body[data-route="component-buttons-comparison"] .bc-group-states{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:32px clamp(28px,4vw,60px);
}

body[data-route="component-buttons-comparison"] .bc-group-state{
  display:grid;
  gap:14px;
}

body[data-route="component-buttons-comparison"] .bc-button-group{
  display:flex;
  align-items:center;
  gap:10px;
}

body[data-route="component-buttons-comparison"] .bc-button-group.bc-is-hover .lds-button--primary{
  transform:translateY(-1px);
  filter:brightness(1.1) saturate(1.12);
}

body[data-route="component-buttons-comparison"] .bc-button-group.bc-is-pressed .lds-button--primary{
  transform:scale(.97);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.28);
}

body[data-route="component-buttons-comparison"] .bc-button-group.bc-is-focus .lds-button--primary{
  outline:3px solid #78a9ff;
  outline-offset:3px;
}

body[data-route="component-buttons-comparison"] .bc-button-group.bc-is-selected .lds-button--primary{
  box-shadow:inset 0 0 0 1px rgba(221,237,255,.42),0 0 0 1px rgba(114,174,255,.28),0 10px 24px -12px rgba(44,129,235,.74);
}

body[data-route="component-buttons-comparison"] .bc-image-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}

body[data-route="component-buttons-comparison"] .bc-image-card{
  position:relative;
  isolation:isolate;
  display:grid;
  align-content:space-between;
  min-height:clamp(720px,68vw,980px);
  padding:clamp(24px,4vw,56px);
  overflow:hidden;
  grid-column:1/-1;
  color:#fff;
  background-image:
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.18)),
    var(--bc-image);
  background-position:center;
  background-size:cover;
}

body[data-route="component-buttons-comparison"] .bc-image-index{
  justify-self:start;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(5,9,16,.34);
  font:700 10px/1 "IBM Plex Mono",monospace;
  letter-spacing:.12em;
  backdrop-filter:blur(12px);
}

body[data-route="component-buttons-comparison"] .bc-image-specimen-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:clamp(34px,4vw,58px) clamp(20px,3vw,42px);
  align-items:end;
}

body[data-route="component-buttons-comparison"] .bc-image-specimen{
  display:grid;
  align-content:end;
  justify-items:start;
  gap:14px;
  min-width:0;
}

body[data-route="component-buttons-comparison"] .bc-image-label{
  display:grid;
  gap:3px;
  max-width:19ch;
  color:#fff;
  text-shadow:
    0 1px 2px rgba(0,0,0,.92),
    0 2px 8px rgba(0,0,0,.72),
    0 0 14px rgba(0,0,0,.54);
}

body[data-route="component-buttons-comparison"] .bc-image-label span,
body[data-route="component-buttons-comparison"] .bc-image-label em{
  font-family:"IBM Plex Mono",monospace;
  font-size:9px;
  font-style:normal;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

body[data-route="component-buttons-comparison"] .bc-image-label span{
  opacity:.78;
}

body[data-route="component-buttons-comparison"] .bc-image-label strong{
  font-size:13px;
  line-height:1.15;
}

body[data-route="component-buttons-comparison"] .bc-image-label em{
  color:#8eecff;
}

body[data-route="component-buttons-comparison"] .bc-on-image.lds-button{
  color:#fff;
  text-shadow:0 1px 1px rgba(0,0,0,.44);
}

@media (max-width:1100px){
  body[data-route="component-buttons-comparison"] .bc-comparison{
    grid-template-columns:1fr;
  }
  body[data-route="component-buttons-comparison"] .bc-system-grid{
    grid-template-columns:1fr;
  }
  body[data-route="component-buttons-comparison"] .bc-liquid-grid{
    grid-template-columns:1fr;
  }
  body[data-route="component-buttons-comparison"] .bc-image-specimen-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width:720px){
  body[data-route="component-buttons-comparison"] .bc-state-row{
    grid-template-columns:repeat(2,minmax(112px,1fr));
  }
  body[data-route="component-buttons-comparison"] .bc-group-states{
    grid-template-columns:1fr;
  }
  body[data-route="component-buttons-comparison"] .bc-image-card{
    min-height:1180px;
  }
  body[data-route="component-buttons-comparison"] .bc-image-specimen-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width:440px){
  body[data-route="component-buttons-comparison"] .bc-image-card{
    min-height:1740px;
  }
  body[data-route="component-buttons-comparison"] .bc-image-specimen-grid{
    grid-template-columns:1fr;
  }
}

@media (prefers-reduced-motion:reduce){
  body[data-route="component-buttons-comparison"] .bc-nacre::before{
    animation:none;
  }
}

@media (min-width:681px) and (max-width:1039px){
  body[data-route="foundation-motion"] .motion-example-spotlight{
    width:calc(100% + 32px);
    max-width:none;
    margin-left:-16px;
  }
}

@media (max-width:680px){
  body[data-route="foundation-motion"] .motion-example-spotlight{
    width:calc(100% + 32px);
    max-width:none;
    margin-left:-16px;
  }
}

/* Production shell repair — keep the nacreous chrome and documentation rail
   on explicit semantic surfaces. Late editorial/collapse rules intentionally
   make some child cards transparent; the owning planes must still paint. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme] .lds-page-chrome{
  background:var(--lds-chrome-surface,var(--lds-shell-chrome))!important;
  background-attachment:fixed;
}

@media (min-width:900px){
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"] .app-nav{
    background:var(--lds-shell-sidebar);
    background-attachment:fixed;
    backdrop-filter:blur(30px) saturate(174%);
    -webkit-backdrop-filter:blur(30px) saturate(174%);
  }
}

@media (min-width:1040px){
  body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme]:not(.documentation-nav-collapsed) .nav-rail-card{
    background:transparent!important;
  }
}

/* Reduced transparency must remove backdrop sampling, not the Color page's
   identity. These fully opaque stacks retain the chrome without translucency. */
@media (prefers-reduced-transparency:reduce){
  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .color-page-chrome{
    background:
      radial-gradient(ellipse 72% 126% at -22% -38%,rgba(229,240,255,.24),transparent 80%),
      radial-gradient(ellipse 74% 134% at 122% -26%,rgba(36,202,235,.25),transparent 82%),
      radial-gradient(ellipse 78% 122% at -18% 142%,rgba(232,51,164,.20),transparent 82%),
      radial-gradient(ellipse 66% 120% at 116% 142%,rgba(194,211,67,.12),transparent 82%),
      radial-gradient(ellipse 92% 146% at 54% -68%,rgba(137,75,226,.26),transparent 82%),
      #0c111b!important;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .app-nav{
    background:
      radial-gradient(ellipse 150% 32% at 126% 12%,rgba(36,202,235,.24),transparent 78%),
      radial-gradient(ellipse 158% 31% at -28% 45%,rgba(232,51,164,.22),transparent 80%),
      radial-gradient(ellipse 152% 32% at 128% 70%,rgba(137,75,226,.22),transparent 80%),
      radial-gradient(ellipse 158% 31% at -26% 96%,rgba(194,211,67,.14),transparent 82%),
      #080c14!important;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"]:not(.documentation-nav-collapsed) .nav-rail-card{
    background:transparent!important;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .color-page-nav{
    background:
      radial-gradient(circle at 8% -42%,rgba(161,195,255,.20),transparent 39%),
      radial-gradient(circle at 88% 148%,rgba(64,214,255,.16),transparent 38%),
      linear-gradient(132deg,rgba(38,48,68,.72),rgba(8,14,24,.58)),
      #0c121c!important;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .color-page-chrome{
    background:
      radial-gradient(ellipse at 8% 18%,rgba(255,255,255,.72),transparent 31%),
      radial-gradient(ellipse at 30% 92%,rgba(230,126,107,.11),transparent 34%),
      radial-gradient(ellipse at 55% 2%,rgba(196,187,232,.19),transparent 36%),
      radial-gradient(ellipse at 77% 18%,rgba(11,92,255,.13),transparent 36%),
      radial-gradient(ellipse at 96% 82%,rgba(46,184,154,.15),transparent 38%),
      #e5e5ea!important;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .app-nav{
    background:
      radial-gradient(circle at -8% 2%,rgba(255,255,255,.90),transparent 34%),
      radial-gradient(circle at 112% 34%,rgba(11,92,255,.10),transparent 40%),
      radial-gradient(circle at 72% 92%,rgba(0,174,222,.07),transparent 42%),
      linear-gradient(168deg,#f2f2f7,rgba(229,229,234,.92) 48%,rgba(210,210,216,.92)),
      #e5e5ea!important;
  }

  body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .color-page-nav{
    background:
      radial-gradient(circle at 9% -60%,rgba(255,255,255,.66),transparent 46%),
      radial-gradient(circle at 88% 160%,rgba(0,174,222,.11),transparent 48%),
      linear-gradient(128deg,rgba(242,242,247,.84),rgba(199,199,205,.62)),
      #e5e5ea!important;
  }
}

/* Living route pearl — navigation changes the atmosphere, while the content
   contract and semantic colors remain unchanged. */
body[data-lds-shell-standard="nacreous"]{
  --lds-route-pearl-dark:
    radial-gradient(ellipse 92% 72% at -12% -8%,hsl(var(--lds-route-pearl-hue-a) 62% 27%/.46),transparent 68%),
    radial-gradient(ellipse 78% 66% at 108% 12%,hsl(var(--lds-route-pearl-hue-b) 68% 30%/.34),transparent 70%),
    radial-gradient(ellipse 88% 62% at 20% 108%,hsl(var(--lds-route-pearl-hue-c) 54% 25%/.28),transparent 72%),
    radial-gradient(ellipse 72% 54% at 68% 68%,hsl(var(--lds-route-pearl-hue-a) 48% 20%/.20),transparent 74%),
    linear-gradient(138deg,hsl(var(--lds-route-pearl-hue-a) 28% 7%),#0b0e15 48%,hsl(var(--lds-route-pearl-hue-b) 24% 8%));
  --lds-route-pearl-light:
    radial-gradient(ellipse 94% 76% at -12% -10%,rgba(255,255,255,.96),transparent 64%),
    radial-gradient(ellipse 82% 68% at 110% 8%,hsl(var(--lds-route-pearl-hue-b) 72% 84%/.54),transparent 70%),
    radial-gradient(ellipse 86% 62% at 18% 110%,hsl(var(--lds-route-pearl-hue-c) 58% 86%/.46),transparent 72%),
    radial-gradient(ellipse 74% 58% at 68% 62%,hsl(var(--lds-route-pearl-hue-a) 62% 88%/.50),transparent 74%),
    linear-gradient(138deg,#fffdfb,hsl(var(--lds-route-pearl-hue-a) 34% 94%) 48%,hsl(var(--lds-route-pearl-hue-b) 32% 91%));
  background:var(--lds-route-pearl-dark)!important;
  background-attachment:fixed!important;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"]{
  background:var(--lds-route-pearl-light)!important;
  background-attachment:fixed!important;
}

body[data-lds-shell-standard="nacreous"] :is(.lds-page-chrome,.color-page-chrome){
  background:
    radial-gradient(ellipse 76% 132% at -20% -36%,hsl(var(--lds-route-pearl-hue-a) 68% 42%/.34),transparent 80%),
    radial-gradient(ellipse 78% 136% at 120% -22%,hsl(var(--lds-route-pearl-hue-b) 72% 44%/.30),transparent 82%),
    radial-gradient(ellipse 82% 126% at -16% 142%,hsl(var(--lds-route-pearl-hue-c) 58% 38%/.24),transparent 82%),
    radial-gradient(ellipse 92% 146% at 54% -68%,rgba(236,242,255,.18),transparent 82%),
    #0b0e16!important;
}

@media (min-width:900px){
  body[data-lds-shell-standard="nacreous"] .app-nav{
    background:
      radial-gradient(ellipse 152% 31% at 126% 10%,hsl(var(--lds-route-pearl-hue-b) 72% 40%/.30),transparent 78%),
      radial-gradient(ellipse 158% 31% at -28% 44%,hsl(var(--lds-route-pearl-hue-a) 68% 38%/.28),transparent 80%),
      radial-gradient(ellipse 154% 31% at 128% 72%,hsl(var(--lds-route-pearl-hue-c) 58% 34%/.24),transparent 80%),
      #080b12!important;
  }
}

body[data-lds-shell-standard="nacreous"] .color-page-nav{
  background:
    radial-gradient(circle at 8% -42%,hsl(var(--lds-route-pearl-hue-a) 72% 62%/.22),transparent 39%),
    radial-gradient(circle at 88% 148%,hsl(var(--lds-route-pearl-hue-b) 76% 58%/.18),transparent 38%),
    linear-gradient(132deg,hsl(var(--lds-route-pearl-hue-a) 32% 20%/.76),rgba(8,14,24,.66)),
    #0c121c!important;
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] :is(.lds-page-chrome,.color-page-chrome){
  background:
    radial-gradient(ellipse 78% 132% at -20% -36%,rgba(255,255,255,.92),transparent 78%),
    radial-gradient(ellipse 80% 136% at 120% -22%,hsl(var(--lds-route-pearl-hue-b) 74% 80%/.42),transparent 82%),
    radial-gradient(ellipse 82% 126% at -16% 142%,hsl(var(--lds-route-pearl-hue-c) 60% 84%/.38),transparent 82%),
    linear-gradient(135deg,#fffdfa,hsl(var(--lds-route-pearl-hue-a) 34% 91%))!important;
}

@media (min-width:900px){
  body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .app-nav{
    background:
      radial-gradient(ellipse 150% 32% at 126% 10%,hsl(var(--lds-route-pearl-hue-b) 72% 80%/.44),transparent 78%),
      radial-gradient(ellipse 158% 31% at -28% 44%,hsl(var(--lds-route-pearl-hue-a) 68% 84%/.48),transparent 80%),
      radial-gradient(ellipse 154% 31% at 128% 72%,hsl(var(--lds-route-pearl-hue-c) 58% 82%/.40),transparent 80%),
      #f5f2f0!important;
  }
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .color-page-nav{
  background:
    radial-gradient(circle at 8% -42%,rgba(255,255,255,.82),transparent 42%),
    radial-gradient(circle at 88% 148%,hsl(var(--lds-route-pearl-hue-b) 76% 78%/.38),transparent 42%),
    linear-gradient(132deg,hsl(var(--lds-route-pearl-hue-a) 38% 94%/.88),hsl(var(--lds-route-pearl-hue-b) 34% 88%/.72)),
    #f1eff2!important;
}

/* Route spectrum is the final shell owner, including reduced-transparency
   environments and the Color reference's higher-specificity legacy rules. */
body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .lds-page-chrome,
body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .color-page-chrome{
  background:
    radial-gradient(ellipse 76% 132% at -20% -36%,hsl(var(--lds-route-pearl-hue-a) 68% 42%/.34),transparent 80%),
    radial-gradient(ellipse 78% 136% at 120% -22%,hsl(var(--lds-route-pearl-hue-b) 72% 44%/.30),transparent 82%),
    radial-gradient(ellipse 82% 126% at -16% 142%,hsl(var(--lds-route-pearl-hue-c) 58% 38%/.24),transparent 82%),
    radial-gradient(ellipse 92% 146% at 54% -68%,rgba(236,242,255,.18),transparent 82%),
    #0b0e16!important;
}

body[data-lds-shell="shared"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .lds-page-chrome,
body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .color-page-chrome{
  background:
    radial-gradient(ellipse 78% 132% at -20% -36%,rgba(255,255,255,.92),transparent 78%),
    radial-gradient(ellipse 80% 136% at 120% -22%,hsl(var(--lds-route-pearl-hue-b) 74% 80%/.42),transparent 82%),
    radial-gradient(ellipse 82% 126% at -16% 142%,hsl(var(--lds-route-pearl-hue-c) 60% 84%/.38),transparent 82%),
    linear-gradient(135deg,#fffdfa,hsl(var(--lds-route-pearl-hue-a) 34% 91%))!important;
}

body[data-lds-shell-standard="nacreous"] .app-main,
body[data-lds-shell-standard="nacreous"] .page-host{
  background:transparent;
}

body[data-lds-shell-standard="nacreous"] .lds-page-content{
  position:relative;
  isolation:isolate;
}

body[data-lds-shell-standard="nacreous"] .lds-page-content::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 74% 48% at 96% 8%,hsl(var(--lds-route-pearl-hue-b) 72% 42%/.13),transparent 72%),
    radial-gradient(ellipse 64% 42% at 8% 72%,hsl(var(--lds-route-pearl-hue-a) 68% 38%/.10),transparent 74%);
}

body[data-lds-shell-standard="nacreous"][data-color-theme="light"] .lds-page-content::before{
  background:
    radial-gradient(ellipse 74% 48% at 96% 8%,hsl(var(--lds-route-pearl-hue-b) 72% 76%/.22),transparent 72%),
    radial-gradient(ellipse 64% 42% at 8% 72%,hsl(var(--lds-route-pearl-hue-a) 68% 82%/.24),transparent 74%);
}

body[data-lds-shell-standard="nacreous"].route-pearl-arrival .lds-page-content::before{
  animation:lds-route-pearl-arrival 680ms cubic-bezier(.22,1,.36,1) both;
}

@keyframes lds-route-pearl-arrival{
  from{opacity:.28;transform:scale(1.015)}
  to{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion:reduce){
  body[data-lds-shell-standard="nacreous"].route-pearl-arrival .lds-page-content::before{animation:none}
}

/* Color is the blue anchor; this final route owner supersedes its retired
   fixed reduced-transparency palette. */
body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .app-nav{
  background:
    radial-gradient(ellipse 152% 32% at 126% 10%,hsl(var(--lds-route-pearl-hue-b) 72% 40%/.30),transparent 78%),
    radial-gradient(ellipse 158% 31% at -28% 44%,hsl(var(--lds-route-pearl-hue-a) 68% 38%/.28),transparent 80%),
    radial-gradient(ellipse 154% 31% at 128% 72%,hsl(var(--lds-route-pearl-hue-c) 58% 34%/.24),transparent 80%),
    #080b12!important;
}

body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="light"] .app-nav{
  background:
    radial-gradient(ellipse 150% 32% at 126% 10%,hsl(var(--lds-route-pearl-hue-b) 72% 80%/.44),transparent 78%),
    radial-gradient(ellipse 158% 31% at -28% 44%,hsl(var(--lds-route-pearl-hue-a) 68% 84%/.48),transparent 80%),
    radial-gradient(ellipse 154% 31% at 128% 72%,hsl(var(--lds-route-pearl-hue-c) 58% 82%/.40),transparent 80%),
    #f5f2f0!important;
}

/* The Color chrome is one material plane. Its legacy masthead and section-nav
   fills must not divide the route spectrum into three unrelated bands. */
body[data-route="foundation-color"][data-lds-shell-standard="nacreous"] :is(.color-page-header,.color-page-nav){
  background:transparent!important;
  box-shadow:none;
}

body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme] .color-page-nav{
  background:transparent!important;
}

body[data-route="foundation-color"][data-lds-shell-standard="nacreous"][data-color-theme="dark"] .app-nav{
  background:
    radial-gradient(ellipse 128% 38% at 112% 8%,rgba(45,190,228,.32),transparent 74%),
    radial-gradient(ellipse 142% 40% at -18% 36%,rgba(42,103,214,.36),transparent 76%),
    radial-gradient(ellipse 136% 40% at 118% 72%,rgba(69,73,204,.30),transparent 78%),
    radial-gradient(ellipse 144% 36% at -20% 102%,rgba(24,145,190,.20),transparent 80%),
    #07101f!important;
}