:root {
  color-scheme: light;
  --studio-header-sticky-offset: 0px;
  --control-deck-sticky-offset: 0px;
  --studio-bg: #e9e8e4;
  --studio-panel: rgba(248, 248, 245, 0.82);
  --studio-ink: #171715;
  --studio-muted: #696964;
  --studio-line: rgba(23, 23, 21, 0.14);
  --studio-control: rgba(255, 255, 255, 0.72);
  --studio-shadow: 0 24px 80px rgba(34, 32, 28, 0.12);
  --font-core: "Proxima Nova", "Inter", "Avenir Next", "Segoe UI", sans-serif;
  --font-modern: var(--font-core);
  --font-editorial: "Playfair Display", Georgia, serif;
  --font-technical-text: "IBM Plex Sans", "Inter", sans-serif;
  --font-technical: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
  --font-conversation: "Source Sans 3", "Inter", sans-serif;
  --font-marketing: "Manrope", "Inter", sans-serif;
  --font-friendly: "Nunito Sans", "Avenir Next", sans-serif;
  --selected-font: var(--font-core);
  --selected-display: var(--font-core);
  --selected-ui: var(--font-core);
  --selected-mono: var(--font-technical);
  --radius-none: 0px;
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: 999px;
  --radius-control: 999px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  min-width: 320px;
  background:
    radial-gradient(circle at 15% -10%, rgba(255,255,255,.95), transparent 30rem),
    var(--studio-bg);
  color: var(--studio-ink);
  font-family: var(--font-modern);
  font-size: 16px;
  line-height: 1.5;
  transition: background-color 300ms ease, color 300ms ease;
}

body[data-type="core"] { --selected-font: var(--font-core); --selected-display: var(--font-core); --selected-ui: var(--font-core); }
body[data-type="editorial"] { --selected-font: var(--font-core); --selected-display: var(--font-editorial); --selected-ui: var(--font-core); }
body[data-type="technical"] { --selected-font: var(--font-technical-text); --selected-display: var(--font-technical-text); --selected-ui: var(--font-technical-text); }
body[data-type="conversation"] { --selected-font: var(--font-conversation); --selected-display: var(--font-conversation); --selected-ui: var(--font-conversation); }
body[data-type="marketing"] { --selected-font: var(--font-core); --selected-display: var(--font-marketing); --selected-ui: var(--font-core); }
body[data-type="friendly"] { --selected-font: var(--font-friendly); --selected-display: var(--font-friendly); --selected-ui: var(--font-friendly); }

body[data-theme="dark"] {
  color-scheme: dark;
  --studio-bg: #11110f;
  --studio-panel: rgba(28, 28, 25, 0.86);
  --studio-ink: #f3f2ec;
  --studio-muted: #aaa9a2;
  --studio-line: rgba(255, 255, 255, 0.14);
  --studio-control: rgba(255, 255, 255, 0.08);
  --studio-shadow: 0 28px 90px rgba(0, 0, 0, 0.35);
  background:
    radial-gradient(circle at 15% -10%, rgba(255,255,255,.07), transparent 30rem),
    var(--studio-bg);
}

button, select, a { font: inherit; }
button, select { color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }

button:focus-visible, a:focus-visible, select:focus-visible {
  outline: 3px solid #5a4af4;
  outline-offset: 3px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

body.loader-pending {
  overflow: hidden;
  overscroll-behavior: none;
}

.site-loader {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #fbf8f1;
  color: #171715;
  isolation: isolate;
}

.site-loader[hidden] { display: none; }

.site-loader__art {
  position: absolute;
  inset-block: 0;
  left: 50%;
  height: 100%;
  aspect-ratio: 1122 / 1402;
  transform: translateX(-50%);
}

.site-loader__art img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.site-loader__balloon {
  transform-origin: 55% 21%;
  will-change: transform;
}

.site-loader__prompt {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: clamp(20px, 4vh, 46px);
  min-width: 148px;
  padding: 12px 18px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(23, 23, 21, .16);
  border-radius: var(--radius-full);
  background: rgba(255, 255, 255, .8);
  color: #171715;
  box-shadow: 0 10px 32px rgba(23, 23, 21, .08);
  backdrop-filter: blur(14px);
  font: 700 14px/1.25 var(--font-core);
  cursor: pointer;
  transform: translateX(-50%);
}

.site-loader__prompt:hover { background: #fff; }
.site-loader__prompt:focus-visible { outline-color: #5a4af4; }

.site-loader__arrow {
  display: inline-block;
  animation: site-loader-cue 1.25s ease-in-out infinite;
}

body.loader-playing .site-loader__prompt {
  animation: site-loader-prompt-out 220ms ease-out forwards;
}

body.loader-playing .site-loader__balloon {
  animation: site-loader-balloon-rise 3.25s cubic-bezier(.34, .02, .22, 1) .36s forwards;
}

body.loader-playing .site-loader__base {
  animation: site-loader-child-out .7s cubic-bezier(.4, 0, .2, 1) 3.45s forwards;
}

body.loader-playing .site-loader {
  animation: site-loader-curtain-out .86s cubic-bezier(.2, .72, .18, 1) 3.72s forwards;
}

@keyframes site-loader-cue {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(4px); }
}

@keyframes site-loader-prompt-out {
  to { opacity: 0; transform: translate(-50%, 8px); }
}

@keyframes site-loader-balloon-rise {
  0%, 9% { transform: translate3d(0, 0, 0) rotate(0deg); }
  24% { transform: translate3d(-1.5%, -8%, 0) rotate(-.65deg); }
  46% { transform: translate3d(4%, -27%, 0) rotate(1.25deg); }
  68% { transform: translate3d(-3%, -49%, 0) rotate(-1deg); }
  84% { transform: translate3d(4.5%, -65%, 0) rotate(.7deg); }
  100% { transform: translate3d(1%, -86%, 0) rotate(-.3deg); }
}

@keyframes site-loader-child-out {
  from { opacity: 1; }
  to { opacity: 0; }
}

@keyframes site-loader-curtain-out {
  0% { opacity: 1; visibility: visible; }
  100% { opacity: 0; visibility: hidden; }
}

@media (prefers-reduced-motion: reduce) {
  .site-loader__arrow { animation: none; }
}

.studio-header {
  position: sticky;
  top: 0;
  z-index: 30;
  min-height: 108px;
  padding: 12px clamp(18px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(560px, auto) minmax(38px, 1fr);
  align-items: center;
  gap: 24px;
  border-bottom: 1px solid var(--studio-line);
  background: color-mix(in srgb, var(--studio-bg) 94%, transparent);
  backdrop-filter: blur(20px);
}

.studio-mark { display: inline-flex; width: fit-content; align-items: center; gap: 10px; }
.studio-mark__glyph {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 42px;
}
.studio-mark__glyph svg { display: block; width: 36px; height: 36px; overflow: visible; }
.studio-mark strong, .studio-mark small { display: block; }
.studio-mark strong { font: 800 17px/.95 var(--font-marketing); letter-spacing: -.045em; }
.studio-mark small { margin-top: 4px; color: var(--studio-muted); font: 500 10px/1 var(--font-technical); letter-spacing: .025em; }
.studio-principle { margin: 0; color: var(--studio-muted); font-size: 13px; letter-spacing: .015em; }
.site-navigation {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-width: 0;
  max-width: min(760px, 66vw);
}
.nav-primary {
  display: flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--studio-line);
  border-radius: 14px;
  background: var(--studio-control);
}
.nav-primary button {
  min-height: 34px;
  padding: 0 13px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 700;
}
.nav-primary button.is-active { background: var(--studio-ink); color: var(--studio-bg); }
.nav-secondary { min-width: 0; max-width: 100%; min-height: 29px; }
.nav-secondary__group { display: flex; justify-content: center; align-items: center; gap: 3px; min-width: 0; }
.nav-secondary__group[hidden] { display: none; }
.nav-secondary__group button {
  min-height: 29px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--studio-muted);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
}
.nav-secondary__group button:hover { background: color-mix(in srgb, var(--studio-ink) 6%, transparent); color: var(--studio-ink); }
.nav-secondary__group button.is-active { background: color-mix(in srgb, var(--studio-ink) 9%, transparent); color: var(--studio-ink); }
.nav-secondary__group button span { margin-left: 4px; opacity: .55; font: 500 12px/1.25 var(--font-technical); }
.mobile-nav-trigger { display: none; }
.icon-button {
  justify-self: end;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--studio-line);
  border-radius: 50%;
  background: var(--studio-control);
  font-weight: 700;
}

.mobile-nav-sheet {
  width: 100%;
  max-width: none;
  max-height: 90dvh;
  margin: auto 0 0;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: var(--studio-ink);
}
.mobile-nav-sheet::backdrop { background: rgba(18, 18, 16, .48); backdrop-filter: blur(5px); }
.mobile-nav-sheet__surface {
  max-height: 90dvh;
  overflow-y: auto;
  padding: 20px 18px max(24px, env(safe-area-inset-bottom));
  border: 1px solid var(--studio-line);
  border-bottom: 0;
  border-radius: 28px 28px 0 0;
  background: var(--studio-bg);
  box-shadow: 0 -24px 80px rgba(23, 23, 21, .2);
}
.mobile-nav-sheet__surface > header { display: flex; align-items: start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.mobile-nav-sheet__surface > header .eyebrow { color: var(--studio-muted); }
.mobile-nav-sheet__surface > header h2 { margin: 5px 0 0; font: 500 30px/1.05 var(--font-editorial); letter-spacing: -.035em; }
.mobile-nav-sheet__surface > header button { flex: 0 0 auto; width: 42px; height: 42px; border: 1px solid var(--studio-line); border-radius: 50%; background: var(--studio-control); font-size: 24px; }
.mobile-nav-categories { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; margin-bottom: 14px; padding: 4px; border: 1px solid var(--studio-line); border-radius: 999px; background: color-mix(in srgb, var(--studio-ink) 4%, transparent); }
.mobile-nav-categories button { min-width: 0; min-height: 42px; padding: 8px 10px; border: 0; border-radius: 999px; background: transparent; color: var(--studio-muted); font: 600 13px/1.25 var(--font-ui); }
.mobile-nav-categories button.is-active { background: var(--studio-ink); color: var(--studio-bg); }
.mobile-nav-category-select-wrap { display: none; margin-bottom: 14px; }
.mobile-nav-category-select-wrap > span { display: block; margin: 0 0 6px 4px; color: var(--studio-muted); font: 600 12px/1.35 var(--font-technical); letter-spacing: .08em; text-transform: uppercase; }
.mobile-nav-category-select-wrap select { width: 100%; min-height: 50px; padding: 10px 42px 10px 14px; border: 1px solid var(--studio-line); border-radius: 14px; background: var(--studio-control); color: var(--studio-ink); font: 600 16px/1.35 var(--font-ui); }
.mobile-nav-sheet nav { display: block; }
.mobile-nav-sheet section { min-width: 0; padding: 12px; border: 1px solid var(--studio-line); border-radius: 18px; background: var(--studio-panel); }
.mobile-nav-sheet section[hidden] { display: none; }
.mobile-nav-sheet section button { display: block; width: 100%; min-height: 54px; padding: 9px 11px; border: 0; border-radius: 12px; background: transparent; color: var(--studio-ink); text-align: left; }
.mobile-nav-sheet section button + button { margin-top: 2px; }
.mobile-nav-sheet section button:hover { background: color-mix(in srgb, var(--studio-ink) 6%, transparent); }
.mobile-nav-sheet section button.is-active { background: var(--studio-ink); color: var(--studio-bg); }
.mobile-nav-sheet section button strong, .mobile-nav-sheet section button small { display: block; }
.mobile-nav-sheet section button strong { font-size: 14px; line-height: 1.25; }
.mobile-nav-sheet section button small { margin-top: 3px; color: var(--studio-muted); font-size: 12px; line-height: 1.4; }
.mobile-nav-sheet section button.is-active small { color: currentColor; opacity: .68; }

.about-panel {
  position: fixed;
  z-index: 20;
  top: 20px;
  right: 20px;
  width: min(420px, calc(100vw - 40px));
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  padding: 28px;
  border: 1px solid var(--studio-line);
  border-radius: 24px;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow);
  backdrop-filter: blur(24px);
}
.about-panel[hidden] { display: none; }
.about-panel__close { position: absolute; top: 16px; right: 18px; border: 0; background: none; font-size: 24px; }
.about-panel h2 { margin: 8px 0 20px; max-width: 8ch; font: 500 36px/1.02 var(--font-editorial); letter-spacing: -.035em; }
.about-panel > p:last-child { margin: 22px 0 0; color: var(--studio-muted); font-size: 14px; line-height: 1.55; }
.eyebrow, .panel-label, .control-label { text-transform: uppercase; letter-spacing: .09em; font-size: 12px; line-height: 1.35; font-weight: 700; }
.north-stars { border-top: 1px solid var(--studio-line); }
.north-stars article { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding: 13px 0; border-bottom: 1px solid var(--studio-line); }
.north-stars span { color: var(--studio-muted); font-size: 12px; }
.control-deck {
  position: sticky;
  z-index: 20;
  top: var(--studio-header-sticky-offset);
  display: flex;
  align-items: end;
  gap: 12px;
  padding: 14px clamp(18px, 3vw, 44px);
  border-bottom: 1px solid var(--studio-line);
  background: color-mix(in srgb, var(--studio-bg) 86%, transparent);
  backdrop-filter: blur(20px);
}
.control-group { display: grid; gap: 7px; }
.control-group--expression { margin-right: auto; }
.expression-select-wrap { display: none; }
.component-mode-label, .illustration-mode-label, .icon-mode-label { margin-right: auto; align-self: center; }
.component-mode-label span, .component-mode-label strong, .illustration-mode-label span, .illustration-mode-label strong, .icon-mode-label span, .icon-mode-label strong { display: block; }
.component-mode-label span, .illustration-mode-label span, .icon-mode-label span { margin-bottom: 4px; color: var(--studio-muted); font: 500 12px/1.35 var(--font-technical); text-transform: uppercase; letter-spacing: .09em; }
.component-mode-label strong, .illustration-mode-label strong, .icon-mode-label strong { font: 500 18px var(--font-editorial); }
.control-group--compact { flex: 0 0 auto; }
.control-label { padding-left: 5px; color: var(--studio-muted); }
.segmented, .icon-segmented {
  display: flex;
  align-items: center;
  padding: 4px;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: var(--studio-control);
}
.segment {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--studio-muted);
  font-size: 13px;
  font-weight: 600;
  transition: color 180ms ease, background 180ms ease, box-shadow 180ms ease;
}
.segment:is(.is-active,[aria-pressed="true"]) { background: var(--studio-ink); color: var(--studio-bg); box-shadow: 0 4px 14px rgba(0,0,0,.12); }
.segment__number { margin-right: 7px; opacity: .55; font-family: var(--font-technical); font-size: 12px; }
.icon-segmented button {
  display: grid;
  place-items: center;
  width: 39px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: var(--studio-muted);
}
.icon-segmented button:is(.is-active,[aria-pressed="true"]) { background: var(--studio-ink); color: var(--studio-bg); }
.icon-segmented svg { width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.select-wrap { position: relative; }
.select-wrap select {
  min-width: 205px;
  height: 48px;
  padding: 0 38px 0 14px;
  appearance: none;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: var(--studio-control);
  font-size: 13px;
  font-weight: 600;
}
.select-wrap > span { position: absolute; top: 13px; right: 14px; pointer-events: none; }
.mode-toggle, .text-toggle {
  height: 48px;
  border: 1px solid var(--studio-line);
  border-radius: 16px;
  background: var(--studio-control);
}
.mode-toggle { width: 62px; padding: 5px; }
.mode-toggle__track { display: block; position: relative; height: 36px; }
.mode-toggle__thumb {
  position: absolute;
  left: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--studio-ink);
  color: var(--studio-bg);
  transition: transform 250ms cubic-bezier(.2,.8,.2,1);
}
body[data-theme="dark"] .mode-toggle__thumb { transform: translateX(16px); }
.moon { display: none; }
body[data-theme="dark"] .sun { display: none; }
body[data-theme="dark"] .moon { display: inline; }
.text-toggle { min-width: 84px; padding: 0 13px; color: var(--studio-muted); font-size: 13px; font-weight: 700; }
.motion-dot { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: #5e50ec; }
.text-toggle:not(.is-active) .motion-dot { background: var(--studio-muted); }

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
  gap: 16px;
  padding: clamp(18px, 3vw, 44px);
  max-width: 1800px;
  margin: 0 auto;
}
.preview-column { min-width: 0; }
.preview-meta { display: flex; align-items: end; justify-content: space-between; gap: 32px; min-height: 78px; margin-bottom: 16px; }
.preview-meta h1 { margin: 4px 0 0; font: 500 clamp(25px, 2.5vw, 38px)/1 var(--font-editorial); letter-spacing: -.035em; }
.preview-kicker { color: var(--studio-muted); font: 500 12px/1.35 var(--font-technical); text-transform: uppercase; letter-spacing: .1em; }
.preview-meta p { max-width: 500px; margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.55; text-align: left; }

.preview-stage {
  position: relative;
  display: grid;
  justify-items: center;
  min-height: 800px;
  padding: 48px 28px 28px;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 28px;
  background:
    linear-gradient(var(--studio-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--studio-line) 1px, transparent 1px),
    color-mix(in srgb, var(--studio-panel) 60%, transparent);
  background-size: 24px 24px;
  box-shadow: inset 0 1px rgba(255,255,255,.25);
}
.viewport-label { position: absolute; top: 15px; left: 20px; color: var(--studio-muted); font: 500 10px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.specimen {
  container-type: inline-size;
  width: 100%;
  max-width: 1180px;
  min-height: 720px;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  border-radius: var(--radius-shell);
  box-shadow: 0 24px 80px var(--shadow);
  font-family: var(--body-font);
  transition: width 500ms cubic-bezier(.2,.85,.2,1), background-color 300ms ease, color 300ms ease, border-radius 300ms ease;
}
.preview-stage.is-mobile .specimen { width: 390px; max-width: 100%; }
.preview-stage.is-mobile { padding-inline: 14px; }

/* Shared specimen anatomy */
.specimen-nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 74px;
  padding: 0 var(--page-x);
  border-bottom: var(--line-width) solid var(--line);
}
.specimen-logo { display: flex; align-items: center; gap: 9px; width: fit-content; font-weight: 700; letter-spacing: var(--label-track); }
.logo-sigil { width: 17px; height: 17px; background: var(--accent); border-radius: var(--radius-mark); transform: rotate(var(--mark-rotate)); }
.specimen-links { display: flex; align-items: center; gap: 26px; font-size: 13px; }
.specimen-links a { position: relative; color: var(--muted); }
.specimen-links .is-current { color: var(--ink); }
.specimen-links .is-current::after { content: ""; position: absolute; right: 0; bottom: -9px; left: 0; height: 2px; background: var(--accent); transform-origin: left; animation: line-in 700ms var(--ease) both; }
.specimen-menu { justify-self: end; display: grid; gap: 5px; width: 38px; height: 38px; place-content: center; border: var(--line-width) solid var(--line); border-radius: var(--radius-button); background: transparent; }
.specimen-menu span { display: block; width: 15px; height: 1.5px; background: currentColor; }
.specimen-hero { display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(340px, .98fr); min-height: 520px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(42px, 7vw, 94px) var(--page-x); }
.specimen-eyebrow { margin: 0 0 20px; color: var(--accent); font: 600 11px/1 var(--label-font); letter-spacing: .11em; text-transform: uppercase; }
.hero-copy h2 { max-width: 100%; margin: 0; font: var(--display-weight) clamp(44px, 6.4cqw, 78px)/var(--display-leading) var(--display-font); letter-spacing: var(--display-track); overflow-wrap: normal; word-break: normal; hyphens: none; text-wrap: balance; }
.hero-copy h2 em { color: var(--display-em); font-style: var(--em-style); }
.hero-deck { max-width: 460px; margin: 28px 0 0; color: var(--muted); font-size: 17px; line-height: 1.55; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 34px; }
.primary-action, .secondary-action, .mini-button {
  min-height: 45px;
  border-radius: var(--radius-button);
  padding: 0 18px;
  font-weight: 700;
  font-size: 13px;
  transition: transform 180ms var(--ease), background-color 180ms ease;
}
.primary-action { border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink); box-shadow: var(--button-shadow); }
.primary-action span { display: inline-block; margin-left: 10px; }
.secondary-action { border: var(--line-width) solid var(--line); background: transparent; color: var(--ink); }
.primary-action:hover, .secondary-action:hover { transform: translateY(-2px); }
.hero-art { position: relative; min-height: 500px; overflow: hidden; background: var(--art-bg); }
.art-frame { position: absolute; display: flex; align-items: end; overflow: hidden; border-radius: var(--radius-art); color: var(--art-ink); box-shadow: var(--art-shadow); }
.art-frame::before { content: ""; position: absolute; inset: 0; background: var(--art-pattern); }
.art-frame span { position: relative; z-index: 1; margin: 20px; padding: 8px 10px; background: var(--art-label); color: var(--art-ink); font: 600 10px var(--label-font); letter-spacing: .08em; text-transform: uppercase; }
.art-frame--one { top: 12%; left: 10%; width: 60%; height: 64%; background: var(--visual-a); transform: rotate(var(--art-one-rotate)); animation: frame-in 850ms var(--ease) both; }
.art-frame--two { right: 5%; bottom: 7%; width: 43%; height: 45%; background: var(--visual-b); transform: rotate(var(--art-two-rotate)); animation: frame-in 850ms 100ms var(--ease) both; }
.joy-mark { position: absolute; top: 9%; right: 12%; display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; background: var(--joy); color: var(--joy-ink); box-shadow: 0 12px 34px color-mix(in srgb, var(--joy) 35%, transparent); animation: joy-float 4s ease-in-out infinite; }
.joy-mark span { width: 10px; height: 10px; border-radius: 50%; background: currentColor; box-shadow: -17px 4px 0 currentColor, 17px 4px 0 currentColor; }
.art-caption { position: absolute; right: 8%; bottom: 4%; z-index: 2; max-width: 190px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.4; }
.art-caption span { display: block; margin-bottom: 4px; color: var(--ink); font: 500 10px var(--label-font); }

.collection { padding: clamp(60px, 8vw, 112px) var(--page-x); border-top: var(--line-width) solid var(--line); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(180px, .9fr); column-gap: 40px; align-items: end; margin-bottom: 44px; }
.section-heading .specimen-eyebrow { grid-column: 1 / -1; }
.section-heading h3 { max-width: 13ch; margin: 0; font: var(--heading-weight) clamp(34px, 4vw, 56px)/1.02 var(--display-font); letter-spacing: -.035em; }
.section-heading > p:last-child { max-width: 310px; margin: 0 0 4px; color: var(--muted); line-height: 1.55; }
.collection-grid { display: grid; grid-template-columns: 1.25fr .75fr; grid-template-rows: auto auto; gap: var(--grid-gap); }
.collection-card { min-width: 0; }
.collection-card--large { grid-row: span 2; }
.card-visual { position: relative; min-height: 260px; overflow: hidden; border-radius: var(--radius-card); background: var(--visual-a); }
.collection-card--large .card-visual { min-height: 550px; }
.visual-b { background: var(--visual-b); }
.visual-shape { position: absolute; inset: 18% 22%; display: block; border: var(--shape-border) solid var(--shape-color); border-radius: var(--shape-radius); transform: rotate(var(--shape-rotate)); box-shadow: var(--shape-shadow); }
.visual-b .visual-shape { inset: 26% 34%; border-radius: 50% 50% 12% 12%; transform: rotate(calc(var(--shape-rotate) * -1)); }
.visual-number { position: absolute; z-index: 1; top: 18px; left: 18px; color: var(--visual-label); font: 500 10px var(--label-font); letter-spacing: .08em; }
.card-copy { display: flex; justify-content: space-between; align-items: start; gap: 16px; padding: 17px 2px 0; }
.card-copy h4 { margin: 0; font: 600 17px var(--display-font); }
.card-copy p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.save-button { width: 38px; height: 38px; border: var(--line-width) solid var(--line); border-radius: var(--radius-button); background: transparent; color: var(--ink); font-size: 20px; line-height: 1; }
.save-button[aria-pressed="true"] { background: var(--joy); border-color: var(--joy); color: var(--joy-ink); animation: pop 350ms var(--ease); }
.collection-card--note { display: flex; flex-direction: column; justify-content: center; min-height: 230px; padding: 30px; border-radius: var(--radius-card); background: var(--note-bg); color: var(--note-ink); }
.note-mark { margin: 0; color: var(--joy); font: 500 52px/0.7 var(--font-editorial); }
.collection-card--note blockquote { margin: 22px 0; font: 500 25px/1.18 var(--display-font); letter-spacing: -.025em; }
.note-credit { margin: auto 0 0; opacity: .65; font: 500 10px var(--label-font); text-transform: uppercase; letter-spacing: .1em; }
.specimen-footer { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; min-height: 100px; padding: 0 var(--page-x); border-top: var(--line-width) solid var(--line); color: var(--muted); font-size: 11px; }
.specimen-footer p { margin: 0; text-align: center; }
.footer-mark { justify-self: end; width: 38px; height: 38px; border: var(--line-width) solid var(--line); border-radius: var(--radius-button); background: transparent; color: var(--ink); }

/* Editorial: quiet, tactile, composed */
body[data-expression="editorial"] .specimen {
  --paper: #ffffff;
  --ink: #111111;
  --muted: #686868;
  --line: rgba(17, 17, 17, .11);
  --accent: #111111;
  --accent-ink: #ffffff;
  --joy: #111111;
  --joy-ink: #ffffff;
  --display-em: #111111;
  --display-font: var(--selected-display);
  --body-font: var(--selected-font);
  --label-font: var(--font-modern);
  --display-weight: 500;
  --heading-weight: 500;
  --display-leading: .94;
  --display-track: -.055em;
  --label-track: -.01em;
  --em-style: italic;
  --page-x: clamp(30px, 6.5vw, 84px);
  --line-width: 1px;
  --radius-shell: 24px;
  --radius-button: 999px;
  --radius-card: var(--radius-sm);
  --radius-art: 20px;
  --radius-mark: 50%;
  --mark-rotate: 0deg;
  --art-bg: #f2f2f0;
  --art-ink: #111111;
  --art-label: rgba(255,255,255,.9);
  --art-pattern: linear-gradient(145deg, transparent 44%, rgba(255,255,255,.27) 44% 56%, transparent 56%);
  --visual-a: linear-gradient(145deg, #101010, #767676);
  --visual-b: linear-gradient(145deg, #e4e4e2, #777777);
  --visual-label: rgba(255,255,255,.8);
  --art-one-rotate: -1deg;
  --art-two-rotate: 1deg;
  --art-shadow: 0 22px 55px rgba(0,0,0,.14);
  --button-shadow: 0 9px 24px rgba(0,0,0,.12);
  --grid-gap: 28px;
  --shape-border: 1.5px;
  --shape-color: rgba(255,255,255,.67);
  --shape-radius: 18px;
  --shape-rotate: -2deg;
  --shape-shadow: inset 0 0 0 18px rgba(255,255,255,.07);
  --note-bg: #111111;
  --note-ink: #ffffff;
  --shadow: rgba(0,0,0,.16);
}
body[data-theme="dark"][data-expression="editorial"] .specimen {
  --paper: #0d0d0d;
  --ink: #f7f7f5;
  --muted: #a2a2a0;
  --line: rgba(247,247,245,.14);
  --accent: #f7f7f5;
  --accent-ink: #0d0d0d;
  --joy: #f7f7f5;
  --joy-ink: #0d0d0d;
  --display-em: #f7f7f5;
  --art-bg: #202020;
  --art-ink: #f7f7f5;
  --art-label: rgba(13,13,13,.86);
  --visual-a: linear-gradient(145deg, #020202, #4c4c4c);
  --visual-b: linear-gradient(145deg, #c4c4c1, #555555);
  --note-bg: #f7f7f5;
  --note-ink: #0d0d0d;
  --shadow: rgba(0,0,0,.55);
}

/* Frameset: graphic, architectural, high-contrast */
body[data-expression="frameset"] .specimen {
  --paper: #f7f8fa;
  --ink: #101315;
  --muted: #515b66;
  --line: rgba(16, 19, 21, .22);
  --accent: #155eef;
  --accent-ink: #ffffff;
  --joy: #ff6933;
  --joy-ink: #160b06;
  --display-em: #155eef;
  --display-font: var(--selected-display);
  --body-font: var(--selected-font);
  --label-font: var(--font-technical);
  --display-weight: 700;
  --heading-weight: 700;
  --display-leading: .94;
  --display-track: -.07em;
  --label-track: -.035em;
  --em-style: normal;
  --page-x: clamp(24px, 4vw, 54px);
  --line-width: 1px;
  --radius-shell: 0;
  --radius-button: 0;
  --radius-card: var(--radius-none);
  --radius-art: 0;
  --radius-mark: 0;
  --mark-rotate: 0deg;
  --art-bg: #edf1f6;
  --art-ink: #101315;
  --art-label: #ffffff;
  --art-pattern: repeating-linear-gradient(90deg, transparent 0 23px, rgba(16,19,21,.14) 23px 24px);
  --visual-a: linear-gradient(125deg, #83a9ff, #155eef 72%);
  --visual-b: linear-gradient(125deg, #ff8d63, #ff4f12 72%);
  --visual-label: #101315;
  --art-one-rotate: 0deg;
  --art-two-rotate: 0deg;
  --art-shadow: 2px 3px 0 rgba(16,19,21,.34);
  --button-shadow: 0 3px 10px -8px rgba(24,45,86,.28);
  --grid-gap: 18px;
  --shape-border: 3px;
  --shape-color: #101315;
  --shape-radius: 0;
  --shape-rotate: 0deg;
  --shape-shadow: none;
  --note-bg: #101315;
  --note-ink: #f7f8fa;
  --shadow: rgba(24,45,86,.12);
}
body[data-expression="frameset"] .specimen-hero { border-bottom: var(--line-width) solid var(--line); }
body[data-expression="frameset"] .hero-copy { border-right: var(--line-width) solid var(--line); }
body[data-expression="frameset"] .collection-card .card-visual { border: var(--line-width) solid var(--line); }
body[data-expression="frameset"] .collection-card--note { border: var(--line-width) solid var(--line); }
body[data-expression="frameset"] .joy-mark { border: 1.5px solid #101315; }
body[data-theme="dark"][data-expression="frameset"] .specimen {
  --paper: #0d1117;
  --ink: #f4f4ee;
  --muted: #a5abad;
  --line: rgba(244, 244, 238, .24);
  --accent: #7da5ff;
  --accent-ink: #07142b;
  --joy: #ff7040;
  --joy-ink: #1b0802;
  --display-em: #7da5ff;
  --art-bg: #181e27;
  --art-ink: #f4f4ee;
  --art-label: #0d1117;
  --art-pattern: repeating-linear-gradient(90deg, transparent 0 23px, rgba(244,244,238,.13) 23px 24px);
  --visual-a: linear-gradient(125deg, #1a3272, #4679ff 72%);
  --visual-b: linear-gradient(125deg, #68230e, #ff6530 72%);
  --visual-label: #f4f4ee;
  --art-shadow: 2px 3px 0 rgba(244,244,238,.28);
  --button-shadow: 0 4px 12px -8px rgba(0,0,0,.62);
  --shape-color: #f4f4ee;
  --note-bg: #f4f4ee;
  --note-ink: #0d1012;
  --shadow: rgba(0,0,0,.6);
}
body[data-theme="dark"][data-expression="frameset"] .joy-mark { border-color: #f4f4ee; }

/* Play: optimistic, soft, controlled */
body[data-expression="play"] .specimen {
  --paper: #ffffff;
  --ink: #222222;
  --muted: #6a6a6a;
  --line: rgba(34,34,34,.1);
  --accent: #e45f57;
  --accent-ink: #ffffff;
  --joy: #ffd34d;
  --joy-ink: #2a2100;
  --display-em: #e45f57;
  --display-font: var(--selected-display);
  --body-font: var(--selected-font);
  --label-font: var(--font-friendly);
  --display-weight: 800;
  --heading-weight: 800;
  --display-leading: .96;
  --display-track: -.045em;
  --label-track: -.02em;
  --em-style: normal;
  --page-x: clamp(32px, 6vw, 76px);
  --line-width: 1px;
  --radius-shell: 30px;
  --radius-button: 999px;
  --radius-card: var(--radius-lg);
  --radius-art: 22px;
  --radius-mark: 50%;
  --mark-rotate: 0deg;
  --art-bg: #f3f3f1;
  --art-ink: #222222;
  --art-label: rgba(255,255,255,.9);
  --art-pattern: radial-gradient(circle at 76% 20%, rgba(255,255,255,.58) 0 9%, transparent 9.2%), radial-gradient(circle at 22% 78%, rgba(255,255,255,.32) 0 12%, transparent 12.2%);
  --visual-a: linear-gradient(145deg, #ee746d, #d94d65);
  --visual-b: linear-gradient(145deg, #6f96e8, #91c6c0);
  --visual-label: #222222;
  --art-one-rotate: -1.5deg;
  --art-two-rotate: 2deg;
  --art-shadow: 0 24px 58px rgba(62,52,50,.17);
  --button-shadow: 0 10px 24px rgba(191,66,58,.2);
  --grid-gap: 30px;
  --shape-border: 4px;
  --shape-color: rgba(255,255,255,.76);
  --shape-radius: 22px;
  --shape-rotate: 4deg;
  --shape-shadow: inset 0 0 0 16px rgba(34,34,34,.06);
  --note-bg: #e45f57;
  --note-ink: #ffffff;
  --shadow: rgba(35,31,30,.17);
}
body[data-expression="play"] .specimen-hero { grid-template-columns: minmax(0,.95fr) minmax(360px,1.05fr); padding: 22px; gap: 8px; }
body[data-expression="play"] .hero-copy { padding-left: calc(var(--page-x) - 22px); }
body[data-expression="play"] .hero-art { min-height: 520px; border-radius: 26px; }
body[data-expression="play"] .art-frame--one { border-radius: 24px; }
body[data-expression="play"] .art-frame--two { border-radius: 20px; }
body[data-expression="play"] .logo-sigil { box-shadow: 8px -2px 0 #7ca4ee, 4px 8px 0 #ffd34d; }
body[data-expression="play"] .collection-card .card-visual { box-shadow: 0 22px 52px rgba(40,35,34,.11); }
body[data-expression="play"] .primary-action:hover span { transform: rotate(12deg) translate(1px,-1px); }
body[data-theme="dark"][data-expression="play"] .specimen {
  --paper: #181818;
  --ink: #fafafa;
  --muted: #b1b1b1;
  --line: rgba(250,250,250,.12);
  --accent: #f27b73;
  --accent-ink: #1b1211;
  --joy: #ffd34c;
  --joy-ink: #251e04;
  --display-em: #f27b73;
  --art-bg: #292929;
  --art-ink: #fafafa;
  --art-label: rgba(24,24,24,.86);
  --visual-a: linear-gradient(145deg, #9a373d, #d85c64);
  --visual-b: linear-gradient(145deg, #425f9d, #578b86);
  --visual-label: #fafafa;
  --note-bg: #f27b73;
  --note-ink: #1b1211;
  --shadow: rgba(0,0,0,.5);
}

/* System inspector */
.system-panel {
  position: sticky;
  top: 110px;
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 24px;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow);
  backdrop-filter: blur(18px);
}
.system-section { padding: 19px; border-bottom: 1px solid var(--studio-line); }
.system-section:last-child { border-bottom: 0; }
.panel-label { display: block; margin-bottom: 15px; color: var(--studio-muted); }
.system-section--identity { padding-top: 20px; }
.dna-line { display: flex; justify-content: space-between; align-items: baseline; margin: 9px 0; }
.dna-line span { font: 500 17px var(--font-editorial); }
.dna-line small { color: var(--studio-muted); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.swatch-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.swatch-grid > div { min-width: 0; }
.swatch { display: block; width: 100%; aspect-ratio: 1; margin-bottom: 7px; border: 1px solid var(--studio-line); border-radius: 8px; }
.swatch-grid small { display: block; overflow: hidden; color: var(--studio-muted); font-size: 9px; text-overflow: ellipsis; }
.swatch--ink { background: var(--swatch-ink); }
.swatch--paper { background: var(--swatch-paper); }
.swatch--accent { background: var(--swatch-accent); }
.swatch--joy { background: var(--swatch-joy); }
body[data-expression="editorial"] { --swatch-ink:#111111; --swatch-paper:#ffffff; --swatch-accent:#111111; --swatch-joy:#d8d8d5; }
body[data-expression="frameset"] { --swatch-ink:#101315; --swatch-paper:#f7f8fa; --swatch-accent:#155eef; --swatch-joy:#ff6933; }
body[data-expression="play"] { --swatch-ink:#222222; --swatch-paper:#ffffff; --swatch-accent:#e45f57; --swatch-joy:#ffd34d; }
.display-sample { font: 500 64px/.9 var(--selected-display); letter-spacing: -.06em; }
.type-name { margin: 13px 0 4px; font-weight: 700; }
.type-meta { margin: 0; color: var(--studio-muted); font: 500 9px var(--font-technical); }
.component-samples { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-button { min-height: 34px; padding: 0 12px; border: 1px solid var(--studio-ink); border-radius: 9px; background: var(--studio-ink); color: var(--studio-bg); font-size: 11px; }
.mini-button--ghost { background: transparent; color: var(--studio-ink); }
.sample-switch { display: flex; flex-basis: 100%; align-items: center; gap: 9px; margin-top: 3px; }
.sample-switch input { position: absolute; opacity: 0; pointer-events: none; }
.sample-switch span { position: relative; width: 34px; height: 20px; border-radius: 99px; background: var(--studio-ink); }
.sample-switch span::after { content:""; position:absolute; top:3px; right:3px; width:14px; height:14px; border-radius:50%; background:var(--studio-bg); }
.sample-switch small { color: var(--studio-muted); }
.motion-track { height: 5px; margin: 12px 0 10px; overflow: hidden; border-radius: 99px; background: var(--studio-line); }
.motion-track span { display: block; width: 35%; height: 100%; border-radius: inherit; background: var(--swatch-accent); animation: motion-demo 2.1s cubic-bezier(.2,.85,.2,1) infinite; }
.motion-values { display: flex; justify-content: space-between; color: var(--studio-muted); font-family: var(--font-technical); }
.principle-card { background: var(--studio-ink); color: var(--studio-bg); }
.principle-card .panel-label { color: color-mix(in srgb, var(--studio-bg) 65%, transparent); }
.principle-card p { margin: 0 0 10px; font: 500 22px/1.08 var(--font-editorial); letter-spacing: -.025em; }
.principle-card small { opacity: .64; }

.toast {
  position: fixed;
  z-index: 30;
  right: 24px;
  bottom: 24px;
  padding: 13px 17px;
  border-radius: 12px;
  background: var(--studio-ink);
  color: var(--studio-bg);
  box-shadow: var(--studio-shadow);
  font-size: 13px;
  font-weight: 700;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease;
}
.toast.is-visible { opacity: 1; transform: translateY(0); }

/* Component Lab */
.component-lab {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  gap: 16px;
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(18px, 3vw, 44px);
}
.component-lab[hidden] { display: none; }
.component-nav, .contract-panel {
  align-self: start;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 24px;
  background: var(--studio-panel);
  box-shadow: var(--studio-shadow);
}
.component-nav { position: sticky; top: 110px; }
.component-nav__heading { padding: 22px 20px 18px; border-bottom: 1px solid var(--studio-line); }
.component-nav__heading h1 { margin: 8px 0 7px; font: 500 24px/1 var(--font-editorial); letter-spacing: -.03em; }
.component-nav__heading p { margin: 0; color: var(--studio-muted); font-size: 12px; line-height: 1.45; }
.batch-switch { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 8px; border-bottom: 1px solid var(--studio-line); }
.batch-switch button { min-height: 46px; padding: 5px 4px; border: 0; border-radius: 10px; background: transparent; color: var(--studio-muted); font-size: 10px; font-weight: 700; }
.batch-switch button:is(.is-active,[aria-pressed="true"]) { background: var(--studio-ink); color: var(--studio-bg); }
.batch-switch button span { display: block; margin: 0 0 2px; opacity: .55; font: 500 7px var(--font-technical); }
.batch-switch [data-batch="application"] { grid-column: 1 / -1; }
.component-nav nav { padding: 8px; }
.component-nav nav[hidden] { display: none; }
.component-nav nav button {
  display: grid;
  grid-template-columns: 24px 1fr;
  width: 100%;
  min-height: 50px;
  padding: 8px 10px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--studio-muted);
  text-align: left;
  transition: background 160ms ease, color 160ms ease;
}
.component-nav nav button:hover { color: var(--studio-ink); background: color-mix(in srgb, var(--studio-ink) 5%, transparent); }
.component-nav nav button:is(.is-active,[aria-pressed="true"]) { background: var(--studio-ink); color: var(--studio-bg); box-shadow: inset 3px 0 0 currentColor; }
.component-nav nav button > span { grid-row: span 2; padding-top: 2px; opacity: .55; font: 500 9px var(--font-technical); }
.component-nav nav button small { margin-top: 2px; opacity: .6; font-size: 10px; }
.component-canvas { min-width: 0; }
.component-canvas__header { display: flex; align-items: end; justify-content: space-between; gap: 28px; min-height: 78px; margin-bottom: 16px; }
.component-canvas__header h2 { margin: 4px 0 0; font: 500 clamp(28px, 3vw, 40px)/1 var(--font-editorial); letter-spacing: -.04em; }
.component-canvas__header > p { max-width: 420px; margin: 0 0 2px; color: var(--studio-muted); font-size: 14px; line-height: 1.5; text-align: left; }
.component-comparison { display: grid; grid-template-columns: repeat(3, minmax(250px, 1fr)); gap: 12px; align-items: stretch; }
.component-expression {
  --c-bg: #fff;
  --c-surface: #f6f6f4;
  --c-ink: #111;
  --c-muted: #696966;
  --c-line: rgba(17,17,17,.17);
  --c-accent: #111;
  --c-on-accent: #fff;
  --c-danger: #b42318;
  --c-focus: #4b0082;
  --c-radius: var(--radius-md);
  --c-card-radius: var(--radius-sm);
  --c-button-radius: var(--radius-full);
  --c-shadow: 0 12px 26px rgba(0,0,0,.1);
  --c-font: var(--selected-font);
  min-width: 0;
  container-type: inline-size;
  overflow: hidden;
  border: 1px solid var(--studio-line);
  border-radius: 22px;
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--c-font);
  box-shadow: 0 18px 45px rgba(23,23,21,.08);
}
.component-expression > header {
  display: grid;
  grid-template-columns: 24px 1fr;
  align-items: center;
  min-height: 64px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--c-line);
}
.component-expression > header > span { grid-row: span 2; color: var(--c-muted); font: 500 9px var(--font-technical); }
.component-expression > header strong { font-size: 13px; }
.component-expression > header small { color: var(--c-muted); font-size: 10px; }
.component-expression[data-expression="frameset"] {
  --c-bg: #f7f8fa;
  --c-surface: #fff;
  --c-ink: #111416;
  --c-muted: #515b66;
  --c-line: rgba(17,20,22,.22);
  --c-accent: #155eef;
  --c-on-accent: #fff;
  --c-danger: #c23b22;
  --c-focus: #155eef;
  --c-radius: var(--radius-none);
  --c-card-radius: var(--radius-none);
  --c-button-radius: var(--radius-none);
  --c-shadow: 0 8px 24px -20px rgba(24,45,86,.22), 0 1px 2px rgba(24,45,86,.04);
}
.component-expression[data-expression="play"] {
  --c-bg: #fff;
  --c-surface: #f7f6f3;
  --c-ink: #222;
  --c-muted: #6b6967;
  --c-line: rgba(34,34,34,.14);
  --c-accent: #e45f57;
  --c-on-accent: #fff;
  --c-danger: #c9324a;
  --c-focus: #526fe4;
  --c-radius: var(--radius-lg);
  --c-card-radius: var(--radius-lg);
  --c-button-radius: 14px;
  --c-shadow: 0 10px 24px rgba(191,66,58,.18);
}
body[data-theme="dark"] .component-expression[data-expression="editorial"] {
  --c-bg: #0d0d0d;
  --c-surface: #191919;
  --c-ink: #f7f7f5;
  --c-muted: #aaa9a5;
  --c-line: rgba(247,247,245,.19);
  --c-accent: #f7f7f5;
  --c-on-accent: #0d0d0d;
  --c-danger: #ff8b82;
  --c-focus: #c998ed;
  --c-shadow: 0 12px 28px rgba(0,0,0,.5);
}
body[data-theme="dark"] .component-expression[data-expression="frameset"] {
  --c-bg: #0d1117;
  --c-surface: #181d24;
  --c-ink: #f4f4ee;
  --c-muted: #a8adae;
  --c-line: rgba(244,244,238,.24);
  --c-accent: #7da5ff;
  --c-on-accent: #07142b;
  --c-danger: #ff765b;
  --c-focus: #7da5ff;
  --c-shadow: 0 10px 28px -22px rgba(0,0,0,.72), 0 1px 2px rgba(255,255,255,.04);
}
body[data-theme="dark"] .component-expression[data-expression="play"] {
  --c-bg: #181818;
  --c-surface: #252525;
  --c-ink: #fafafa;
  --c-muted: #b1b0ad;
  --c-line: rgba(250,250,250,.18);
  --c-accent: #f27b73;
  --c-on-accent: #1b1211;
  --c-danger: #ff8095;
  --c-focus: #8ca2ff;
  --c-shadow: 0 10px 26px rgba(0,0,0,.42);
}
.component-expression[data-expression="frameset"] :is(.ds-menu__panel,.ds-popover > div,.ds-command,.ds-combobox > div) { box-shadow:var(--c-shadow); }
.component-demo-slot { min-height: 620px; padding: 22px 18px 26px; }
.demo-set[hidden] { display: none; }
.demo-block + .demo-block { margin-top: 30px; }
.demo-label { margin: 0 0 12px; color: var(--c-muted); font: 600 10px var(--font-technical); text-transform: uppercase; letter-spacing: .09em; }
.demo-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.demo-row--baseline { align-items: baseline; }
.ds-button, .ds-icon-button, .ds-field input, .ds-field textarea, .ds-field select, .ds-segmented button {
  font-family: var(--c-font);
}
.ds-button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: var(--c-button-radius);
  background: transparent;
  color: var(--c-ink);
  font-size: 13px;
  font-weight: 700;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms ease, box-shadow 160ms ease;
}
.ds-button:hover:not(:disabled), .ds-icon-button:hover:not(:disabled) { transform: translateY(-2px); }
.ds-button:active:not(:disabled), .ds-icon-button:active:not(:disabled) { transform: translateY(0) scale(.98); }
.ds-button:focus-visible, .ds-icon-button:focus-visible, .ds-field input:focus-visible, .ds-field textarea:focus-visible, .ds-field select:focus-visible, .ds-choice input:focus-visible + .choice-mark, .ds-switch input:focus-visible + .switch-track, .ds-segmented button:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 3px;
}
.ds-button--primary { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--c-shadow); }
.ds-button--secondary { border-color: var(--c-line); background: var(--c-bg); }
.ds-button--quiet { color: var(--c-accent); }
.ds-button--danger { border-color: color-mix(in srgb, var(--c-danger) 34%, transparent); color: var(--c-danger); }
.ds-button--small { min-height: 36px; padding-inline: 12px; font-size: 12px; }
.ds-button--large { min-height: 52px; padding-inline: 21px; font-size: 14px; }
.ds-button:disabled, .ds-icon-button:disabled, .ds-field :disabled, .ds-choice input:disabled ~ *, .ds-switch input:disabled ~ * { cursor: not-allowed; opacity: .44; }
.ds-button--loading { display: inline-flex; align-items: center; gap: 8px; }
.ds-button--loading > span { width: 13px; height: 13px; border: 1.5px solid var(--c-line); border-top-color: var(--c-ink); border-radius: 50%; animation: component-spin 900ms linear infinite; }
.ds-icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--c-button-radius);
  background: transparent;
  color: var(--c-ink);
  font-size: 18px;
  font-weight: 600;
  transition: transform 160ms cubic-bezier(.2,.8,.2,1), background 160ms ease, box-shadow 160ms ease;
}
.ds-icon-button--primary { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--c-shadow); }
.ds-icon-button--secondary { border-color: var(--c-line); background: var(--c-bg); }
.ds-icon-button--quiet { color: var(--c-accent); }
.ds-icon-button--danger { border-color: color-mix(in srgb, var(--c-danger) 35%, transparent); color: var(--c-danger); }
.ds-icon-button--small { width: 36px; height: 36px; font-size: 15px; }
.ds-icon-button--large { width: 52px; height: 52px; font-size: 22px; }
.ds-field { display: grid; gap: 8px; }
.ds-field > span { font-size: 13px; font-weight: 700; }
.ds-field input, .ds-field textarea, .ds-field select {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--c-line);
  border-radius: var(--c-radius);
  background: var(--c-bg);
  color: var(--c-ink);
  font-size: 16px;
  line-height: 1.4;
  transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.ds-field textarea { min-height: 112px; padding-block: 12px; resize: vertical; }
.ds-field select { appearance: none; padding-right: 42px; background-image: linear-gradient(45deg,transparent 50%,var(--c-ink) 50%),linear-gradient(135deg,var(--c-ink) 50%,transparent 50%); background-position: calc(100% - 18px) 21px,calc(100% - 13px) 21px; background-size: 5px 5px,5px 5px; background-repeat: no-repeat; }
.ds-field input::placeholder, .ds-field textarea::placeholder { color: var(--c-muted); opacity: .8; }
.ds-field input:focus, .ds-field textarea:focus, .ds-field select:focus { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 18%, transparent); }
.ds-field small { color: var(--c-muted); font-size: 11px; line-height: 1.4; }
.ds-field--error input, .ds-field--error textarea, .ds-field--error select { border-color: var(--c-danger); }
.ds-field--error small { color: var(--c-danger); }
.component-expression[data-expression="play"] .ds-field input, .component-expression[data-expression="play"] .ds-field textarea, .component-expression[data-expression="play"] .ds-field select { background: var(--c-surface); }
.ds-choice-group { display: grid; gap: 4px; min-width: 0; padding: 0; border: 0; }
.ds-choice-group legend { margin-bottom: 16px; padding: 0; font-size: 15px; font-weight: 800; }
.ds-choice { position: relative; display: grid; grid-template-columns: 24px 1fr; gap: 10px; align-items: start; min-height: 48px; padding: 9px 0; cursor: pointer; }
.ds-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-mark { position: relative; display: block; width: 21px; height: 21px; margin-top: 1px; border: 1.5px solid var(--c-line); background: var(--c-bg); }
.ds-checkbox .choice-mark { border-radius: calc(var(--c-radius) * .45); }
.ds-radio .choice-mark { border-radius: 50%; }
.ds-choice input:checked + .choice-mark, .ds-choice input[data-indeterminate] + .choice-mark { border-color: var(--c-accent); background: var(--c-accent); }
.ds-checkbox input:checked + .choice-mark::after { content: ""; position: absolute; top: 3px; left: 6px; width: 5px; height: 9px; border: solid var(--c-on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ds-checkbox input[data-indeterminate] + .choice-mark::after { content: ""; position: absolute; top: 9px; left: 5px; width: 9px; height: 2px; background: var(--c-on-accent); }
.ds-radio input:checked + .choice-mark::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--c-on-accent); }
.ds-choice strong, .ds-choice small { display: block; }
.ds-choice strong { font-size: 13px; line-height: 1.4; }
.ds-choice small { margin-top: 3px; color: var(--c-muted); font-size: 11px; line-height: 1.4; }
.ds-switch-list { display: grid; gap: 2px; }
.ds-switch { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; min-height: 66px; border-bottom: 1px solid var(--c-line); cursor: pointer; }
.ds-switch:last-child { border-bottom: 0; }
.ds-switch > span:first-child strong, .ds-switch > span:first-child small { display: block; }
.ds-switch strong { font-size: 13px; }
.ds-switch small { margin-top: 4px; color: var(--c-muted); font-size: 11px; line-height: 1.35; }
.ds-switch input { position: absolute; opacity: 0; }
.switch-track { position: relative; display: block; width: 44px; height: 26px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); transition: background 160ms ease; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--c-muted); transition: transform 200ms cubic-bezier(.2,.8,.2,1), background 160ms ease; }
.ds-switch input:checked + .switch-track { border-color: var(--c-accent); background: var(--c-accent); }
.ds-switch input:checked + .switch-track::after { background: var(--c-on-accent); transform: translateX(18px); }
.component-expression[data-expression="frameset"] .switch-track, .component-expression[data-expression="frameset"] .switch-track::after { border-radius: 0; }
.ds-segmented { display: flex; width: fit-content; padding: 4px; border: 1px solid var(--c-line); border-radius: calc(var(--c-radius) + 2px); background: var(--c-surface); }
.ds-segmented button { min-height: 40px; padding: 0 13px; border: 0; border-radius: var(--c-radius); background: transparent; color: var(--c-muted); font-size: 12px; font-weight: 700; }
.ds-segmented button.is-active { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--c-shadow); }
.ds-segmented--small button { min-height: 34px; padding-inline: 10px; }
.ds-segmented--full { width: 100%; }
.ds-segmented--full button { flex: 1; }

/* Navigation components */
.demo-stack { display: grid; justify-items: start; gap: 13px; }
.link-copy { margin: 0; color: var(--c-muted); font-size: 15px; line-height: 1.65; }
.ds-link { position: relative; color: var(--c-ink); font-size: 14px; font-weight: 700; text-decoration-line: underline; text-decoration-color: color-mix(in srgb, var(--c-accent) 55%, transparent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.ds-link:hover { color: var(--c-accent); text-decoration-color: currentColor; }
.ds-link:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; border-radius: 2px; }
.ds-link--standalone { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
.ds-link--standalone::after { content: ""; position: absolute; right: 0; bottom: -4px; left: 0; height: 1px; background: currentColor; transform: scaleX(.22); transform-origin: left; transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.ds-link--standalone:hover::after { transform: scaleX(1); }
.ds-link--standalone span { transition: transform 180ms cubic-bezier(.2,.8,.2,1); }
.ds-link--standalone:hover span { transform: translate(2px,-2px); }
.ds-link--quiet { color: var(--c-muted); text-decoration-color: var(--c-line); }
.ds-link--danger { color: var(--c-danger); text-decoration-color: color-mix(in srgb, var(--c-danger) 45%, transparent); }
.ds-link[aria-disabled="true"] { pointer-events: none; opacity: .42; }
.component-expression[data-expression="frameset"] .ds-link { font-family: var(--font-technical); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.component-expression[data-expression="play"] .ds-link--standalone { padding: 8px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 9%, transparent); }

.ds-tabs { display: flex; min-width: 0; gap: 20px; border-bottom: 1px solid var(--c-line); }
.ds-tabs button { position: relative; min-height: 44px; padding: 0 1px; border: 0; background: transparent; color: var(--c-muted); font-size: 13px; font-weight: 700; white-space: nowrap; }
.ds-tabs button::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; background: var(--c-accent); transform: scaleX(0); transition: transform 180ms ease; }
.ds-tabs button.is-active { color: var(--c-ink); }
.ds-tabs button.is-active::after { transform: scaleX(1); }
.ds-tabs button span { margin-left: 4px; color: var(--c-muted); font-size: 10px; }
.ds-tabs--contained { width: fit-content; gap: 3px; padding: 4px; border: 1px solid var(--c-line); border-radius: calc(var(--c-radius) + 2px); background: var(--c-surface); }
.ds-tabs--contained button { min-height: 38px; padding-inline: 12px; border-radius: var(--c-radius); }
.ds-tabs--contained button::after { display: none; }
.ds-tabs--contained button.is-active { background: var(--c-bg); box-shadow: var(--c-shadow); }
.ds-tabs--vertical { display: grid; width: 100%; gap: 2px; border: 0; }
.ds-tabs--vertical button { min-height: 42px; padding: 0 12px; border-radius: var(--c-radius); text-align: left; }
.ds-tabs--vertical button::after { inset: 8px auto 8px 0; width: 2px; height: auto; transform: scaleY(0); }
.ds-tabs--vertical button.is-active { background: var(--c-surface); }
.ds-tabs--vertical button.is-active::after { transform: scaleY(1); }
.component-expression[data-expression="frameset"] .ds-tabs { gap: 0; border: 1px solid var(--c-line); }
.component-expression[data-expression="frameset"] .ds-tabs button { min-height: 42px; padding-inline: 10px; border-right: 1px solid var(--c-line); font-family: var(--font-technical); font-size: 11px; text-transform: uppercase; }
.component-expression[data-expression="frameset"] .ds-tabs button:last-child { border-right: 0; }
.component-expression[data-expression="frameset"] .ds-tabs button::after { right: -1px; bottom: -1px; left: -1px; height: 3px; }
.component-expression[data-expression="frameset"] .ds-tabs button.is-active { background: color-mix(in srgb, var(--c-accent) 9%, transparent); }
.component-expression[data-expression="frameset"] .ds-tabs--vertical { display: grid; }
.component-expression[data-expression="frameset"] .ds-tabs--vertical button { border-right: 0; border-bottom: 1px solid var(--c-line); }
.component-expression[data-expression="frameset"] .ds-tabs--vertical button:last-child { border-bottom: 0; }
.component-expression[data-expression="play"] .ds-tabs { width: fit-content; gap: 3px; padding: 4px; border: 0; border-radius: 999px; background: var(--c-surface); }
.component-expression[data-expression="play"] .ds-tabs button { min-height: 38px; padding-inline: 13px; border-radius: 999px; }
.component-expression[data-expression="play"] .ds-tabs button::after { display: none; }
.component-expression[data-expression="play"] .ds-tabs button.is-active { background: var(--c-bg); box-shadow: 0 5px 15px rgba(30,25,24,.09); }
.component-expression[data-expression="play"] .ds-tabs--vertical { width: 100%; border-radius: 18px; }
.component-expression[data-expression="play"] .ds-tabs--vertical button { text-align: left; }

.ds-breadcrumbs { display: flex; align-items: center; min-width: 0; gap: 8px; color: var(--c-muted); font-size: 12px; }
.ds-breadcrumbs a { color: var(--c-muted); text-decoration: none; }
.ds-breadcrumbs a:hover { color: var(--c-accent); text-decoration: underline; text-underline-offset: 3px; }
.ds-breadcrumbs > span[aria-current="page"] { min-width: 0; overflow: hidden; color: var(--c-ink); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.ds-breadcrumbs > span[aria-hidden="true"] { opacity: .45; }
.ds-breadcrumbs button { min-width: 32px; min-height: 32px; padding: 0 8px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-surface); color: var(--c-ink); }
.ds-breadcrumbs--truncate { max-width: 100%; }
.component-expression[data-expression="frameset"] .ds-breadcrumbs { font-family: var(--font-technical); font-size: 10px; text-transform: uppercase; }
.component-expression[data-expression="play"] .ds-breadcrumbs { padding: 9px 12px; border-radius: 999px; background: var(--c-surface); }

.ds-pagination { display: flex; align-items: center; gap: 5px; }
.ds-pagination button { display: grid; place-items: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--c-button-radius); background: transparent; color: var(--c-muted); font-size: 12px; font-weight: 700; }
.ds-pagination button:hover:not(:disabled) { border-color: var(--c-line); color: var(--c-ink); }
.ds-pagination button.is-active { background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--c-shadow); }
.ds-pagination button:disabled { cursor: not-allowed; opacity: .4; }
.ds-pagination > span { color: var(--c-muted); font-size: 11px; }
.ds-pagination--compact { justify-content: space-between; width: 100%; }
.ds-pagination--compact button { border-color: var(--c-line); color: var(--c-ink); }
.component-expression[data-expression="frameset"] .ds-pagination button { font-family: var(--font-technical); border-color: var(--c-line); }
.component-expression[data-expression="frameset"] .ds-pagination button + button { margin-left: -6px; }
.component-expression[data-expression="play"] .ds-pagination { padding: 5px; border-radius: 999px; background: var(--c-surface); }

.ds-menu { position: relative; width: 100%; }
.ds-menu summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-bg); color: var(--c-ink); font-size: 13px; font-weight: 700; cursor: pointer; list-style: none; }
.ds-menu summary::-webkit-details-marker { display: none; }
.ds-menu[open] summary { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 15%, transparent); }
.ds-menu__panel { margin-top: 8px; padding: 6px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); box-shadow: 0 22px 55px rgba(0,0,0,.16); }
.ds-menu__panel button { display: grid; grid-template-columns: 22px 1fr; align-items: center; width: 100%; min-height: 42px; padding: 6px 9px; border: 0; border-radius: calc(var(--c-radius) * .7); background: transparent; color: var(--c-ink); text-align: left; }
.ds-menu__panel button:hover:not(:disabled) { background: var(--c-surface); }
.ds-menu__panel button > span:last-child { display: flex; justify-content: space-between; gap: 10px; min-width: 0; }
.ds-menu__panel button strong { font-size: 12px; }
.ds-menu__panel button small { color: var(--c-muted); font: 500 9px var(--font-technical); }
.ds-menu__panel button:disabled { opacity: .4; }
.ds-menu__panel button.is-danger { color: var(--c-danger); }
.ds-menu__panel hr { height: 1px; margin: 5px 3px; border: 0; background: var(--c-line); }
.component-expression[data-expression="frameset"] .ds-menu__panel { box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-ink) 75%, transparent); }
.component-expression[data-expression="play"] .ds-menu__panel { padding: 8px; border-radius: 18px; }

.ds-top-nav { display: grid; grid-template-columns: auto 1fr auto; align-items: center; min-height: 58px; padding: 8px 10px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); }
.ds-nav-brand { display: flex; align-items: center; gap: 7px; }
.ds-nav-brand > span { display: grid; place-items: center; width: 26px; height: 26px; border-radius: var(--c-button-radius); background: var(--c-accent); color: var(--c-on-accent); font: 600 12px var(--font-editorial); }
.ds-nav-brand strong { font-size: 12px; }
.ds-top-nav__links { display: flex; justify-content: center; gap: 13px; }
.ds-top-nav__links a { color: var(--c-muted); font-size: 10px; font-weight: 700; }
.ds-top-nav__links a.is-active { color: var(--c-ink); }
.ds-nav-avatar { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); color: var(--c-ink); font-size: 9px; font-weight: 800; }
.ds-nav-menu { display: none; place-content: center; gap: 4px; width: 36px; height: 36px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: transparent; }
.ds-nav-menu span { display: block; width: 14px; height: 1px; background: var(--c-ink); }
.ds-top-nav--marketing { grid-template-columns: auto 1fr auto; }
.ds-top-nav--marketing .ds-button { min-height: 36px; }
.component-expression[data-expression="frameset"] .ds-top-nav { border-color: var(--c-line); border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-nav-brand > span, .component-expression[data-expression="frameset"] .ds-nav-avatar { border-radius: 0; }
.component-expression[data-expression="play"] .ds-top-nav { padding-inline: 12px; border-radius: 999px; box-shadow: 0 8px 22px rgba(30,25,24,.08); }
.component-lab.is-mobile-preview .ds-top-nav { grid-template-columns: 1fr auto; }
.component-lab.is-mobile-preview .ds-top-nav__links, .component-lab.is-mobile-preview .ds-nav-avatar, .component-lab.is-mobile-preview .ds-top-nav > .ds-button { display: none; }
.component-lab.is-mobile-preview .ds-nav-menu { display: grid; }

.ds-sidebar-shell { display: grid; grid-template-columns: 150px 1fr; min-height: 490px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); }
.ds-sidebar { display: flex; flex-direction: column; min-width: 0; padding: 12px 8px 8px; border-right: 1px solid var(--c-line); background: var(--c-bg); }
.ds-sidebar__brand { display: flex; align-items: center; gap: 7px; min-height: 42px; padding: 0 8px; }
.ds-sidebar__brand > span { display: grid; place-items: center; width: 25px; height: 25px; border-radius: var(--c-button-radius); background: var(--c-accent); color: var(--c-on-accent); font: 600 11px var(--font-editorial); }
.ds-sidebar__brand strong { font-size: 12px; }
.ds-sidebar__section { display: grid; gap: 3px; margin-top: 18px; }
.ds-sidebar__section > small { margin: 0 8px 4px; color: var(--c-muted); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-sidebar__section a { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; min-height: 36px; padding: 0 8px; border-radius: calc(var(--c-radius) * .65); color: var(--c-muted); font-size: 10px; font-weight: 700; }
.ds-sidebar__section a.is-active { background: var(--c-surface); color: var(--c-ink); }
.ds-sidebar__section a b { display: grid; place-items: center; min-width: 18px; height: 18px; border-radius: 999px; background: color-mix(in srgb, var(--c-accent) 12%, transparent); color: var(--c-accent); font-size: 8px; }
.ds-sidebar__account { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 6px; width: 100%; min-height: 46px; margin-top: auto; padding: 5px 6px; border: 0; border-top: 1px solid var(--c-line); background: transparent; color: var(--c-ink); text-align: left; }
.ds-sidebar__account > span:first-child { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 8px; font-weight: 800; }
.ds-sidebar__account strong, .ds-sidebar__account small { display: block; font-size: 9px; }
.ds-sidebar__account small { margin-top: 2px; color: var(--c-muted); }
.ds-sidebar__account b { color: var(--c-muted); font-size: 8px; }
.ds-sidebar-content { display: flex; flex-direction: column; justify-content: center; padding: 18px; }
.ds-sidebar-content > span { color: var(--c-accent); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-sidebar-content strong { margin-top: 8px; font: 500 22px/1.05 var(--selected-display); letter-spacing: -.03em; }
.ds-sidebar-content p { margin: 8px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.45; }
.component-expression[data-expression="frameset"] .ds-sidebar-shell, .component-expression[data-expression="frameset"] .ds-sidebar { border-radius: 0; }
.component-expression[data-expression="play"] .ds-sidebar__section a.is-active { background: color-mix(in srgb, var(--c-accent) 11%, var(--c-surface)); color: var(--c-accent); }

.ds-phone { position: relative; width: min(100%, 280px); height: 520px; margin: 0 auto; overflow: hidden; border: 7px solid var(--c-ink); border-radius: 32px; background: var(--c-bg); box-shadow: 0 22px 55px rgba(0,0,0,.18); }
.ds-phone__status { display: flex; justify-content: space-between; padding: 10px 16px 8px; font-size: 8px; font-weight: 800; }
.ds-phone__content { display: flex; flex-direction: column; min-height: calc(100% - 34px); padding: 22px 18px 92px; }
.ds-phone__content > small { color: var(--c-accent); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .09em; }
.ds-phone__content > strong { margin-top: 8px; font: 600 26px/1 var(--selected-display); letter-spacing: -.04em; }
.ds-phone__content > p { margin: 9px 0 0; color: var(--c-muted); font-size: 11px; line-height: 1.45; }
.ds-phone__card { height: 210px; margin-top: 25px; border-radius: var(--c-radius); background: linear-gradient(145deg, color-mix(in srgb, var(--c-accent) 72%, #fff), color-mix(in srgb, var(--c-accent) 20%, var(--c-surface))); }
.ds-mobile-nav { position: absolute; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(4,1fr); min-height: 68px; padding: 7px 6px 9px; border-top: 1px solid var(--c-line); background: color-mix(in srgb, var(--c-bg) 94%, transparent); backdrop-filter: blur(14px); }
.ds-mobile-nav button { display: grid; place-items: center; align-content: center; gap: 3px; border: 0; border-radius: var(--c-radius); background: transparent; color: var(--c-muted); }
.ds-mobile-nav button > span { font-size: 17px; line-height: 1; }
.ds-mobile-nav button small { font-size: 8px; font-weight: 800; }
.ds-mobile-nav button.is-active {
  background: color-mix(in srgb, var(--c-ink) 8%, transparent);
  color: var(--c-ink);
}
.component-expression[data-expression="frameset"] .ds-phone { border-radius: 0; border-width: 3px; }
.component-expression[data-expression="frameset"] .ds-mobile-nav button.is-active { background: var(--c-accent); color: var(--c-on-accent); }
.component-expression[data-expression="play"] .ds-mobile-nav { right: 9px; bottom: 9px; left: 9px; min-height: 62px; border: 0; border-radius: 20px; box-shadow: 0 10px 28px rgba(0,0,0,.13); }
.component-expression[data-expression="play"] .ds-mobile-nav button.is-active { background: color-mix(in srgb, var(--c-accent) 11%, transparent); }

.ds-drawer-demo .ds-phone__content { padding-bottom: 24px; }
.ds-drawer-trigger { align-self: flex-start; min-height: 42px; margin-bottom: 38px; padding: 0 14px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-bg); color: var(--c-ink); font-size: 11px; font-weight: 800; }
.ds-drawer-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.44); opacity: 0; pointer-events: none; transition: opacity 220ms ease; }
.ds-drawer { position: absolute; top: 0; bottom: 0; left: 0; display: flex; flex-direction: column; width: 82%; padding: 16px 12px; background: var(--c-bg); color: var(--c-ink); transform: translateX(-102%); transition: transform 260ms cubic-bezier(.2,.8,.2,1); }
.ds-drawer-demo.is-open .ds-drawer-overlay { opacity: 1; pointer-events: auto; }
.ds-drawer-demo.is-open .ds-drawer { transform: translateX(0); }
.ds-drawer header { display: flex; justify-content: space-between; align-items: center; min-height: 46px; margin-bottom: 18px; padding: 0 8px 10px; border-bottom: 1px solid var(--c-line); }
.ds-drawer header strong { font: 600 18px var(--selected-display); }
.ds-drawer-close { width: 38px; height: 38px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: transparent; color: var(--c-ink); font-size: 20px; }
.ds-drawer > a { min-height: 42px; padding: 12px 10px; border-radius: var(--c-radius); color: var(--c-muted); font-size: 12px; font-weight: 700; }
.ds-drawer > a.is-active { background: var(--c-surface); color: var(--c-accent); }
.ds-drawer footer { display: flex; align-items: center; gap: 9px; margin-top: auto; padding: 12px 8px 0; border-top: 1px solid var(--c-line); }
.ds-drawer footer span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 9px; font-weight: 800; }
.ds-drawer footer strong { font-size: 11px; }
.component-expression[data-expression="frameset"] .ds-drawer { width: 74%; border-right: 1px solid var(--c-line); }
.component-expression[data-expression="play"] .ds-drawer { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; height: 76%; border-radius: 24px; transform: translateY(105%); }
.component-expression[data-expression="play"] .ds-drawer-demo.is-open .ds-drawer { transform: translateY(0); }

.ds-stepper { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; margin: 0; padding: 0; list-style: none; }
.ds-stepper li { position: relative; display: grid; justify-items: center; gap: 7px; text-align: center; color: var(--c-muted); }
.ds-stepper li::before { content: ""; position: absolute; z-index: 0; top: 15px; right: 50%; left: -50%; height: 1px; background: var(--c-line); }
.ds-stepper li:first-child::before { display: none; }
.ds-stepper li > span { position: relative; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-bg); font-size: 10px; font-weight: 800; }
.ds-stepper li > div strong, .ds-stepper li > div small { display: block; }
.ds-stepper li > div strong { color: var(--c-ink); font-size: 10px; }
.ds-stepper li > div small { margin-top: 3px; font-size: 8px; }
.ds-stepper li.is-complete > span, .ds-stepper li.is-current > span { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.ds-stepper li.is-complete::before, .ds-stepper li.is-current::before { background: var(--c-accent); }
.ds-stepper--vertical { grid-template-columns: 1fr; gap: 0; }
.ds-stepper--vertical li { grid-template-columns: 34px 1fr; justify-items: stretch; gap: 10px; min-height: 78px; text-align: left; }
.ds-stepper--vertical li::before { top: -48px; bottom: auto; left: 15px; width: 1px; height: 48px; }
.ds-stepper--vertical li > div { padding-top: 2px; }
.ds-stepper--vertical li > div strong { font-size: 12px; }
.ds-stepper--vertical li > div small { margin-top: 5px; font-size: 10px; line-height: 1.35; }
.component-expression[data-expression="frameset"] .ds-stepper li > span { border-radius: 0; }
.component-expression[data-expression="play"] .ds-stepper li.is-current > span { box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-accent) 13%, transparent); }

/* Content + data components */
.ds-content-card { padding: 18px; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); background: var(--c-bg); color: var(--c-ink); }
.ds-content-card > small, .ds-card-copy > small { color: var(--c-muted); font: 600 9px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-content-card h3 { margin: 9px 0 7px; font: 600 18px/1.12 var(--selected-display); letter-spacing: -.025em; }
.ds-content-card p { margin: 0; color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.ds-content-card--feature { padding: 0; overflow: hidden; }
.ds-card-art { position: relative; display: grid; align-content: end; min-height: 190px; padding: 14px; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--c-accent) 82%, #fff), color-mix(in srgb, var(--c-accent) 16%, var(--c-surface))); }
.ds-card-art::before { content: ""; position: absolute; top: 18%; right: 17%; width: 43%; aspect-ratio: 1; border: 1px solid color-mix(in srgb, var(--c-on-accent) 75%, transparent); border-radius: 50%; }
.ds-card-art::after { content: ""; position: absolute; right: -12%; bottom: -24%; width: 78%; height: 70%; border: 1px solid color-mix(in srgb, var(--c-on-accent) 60%, transparent); rotate: -10deg; }
.ds-card-art span { position: relative; z-index: 1; width: fit-content; padding: 6px 8px; background: var(--c-bg); color: var(--c-ink); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-card-copy { padding: 18px; }
.ds-card-copy h3 { font-size: 22px; }
.ds-card-copy a { display: inline-flex; gap: 7px; margin-top: 15px; color: var(--c-ink); font-size: 11px; font-weight: 800; }
.ds-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 9px; }
.ds-content-card--selected { border-color: var(--c-accent); box-shadow: inset 0 0 0 1px var(--c-accent); }
.component-expression[data-expression="editorial"] .ds-content-card { border-width: 1px; padding-inline: 18px; }
.component-expression[data-expression="editorial"] .ds-content-card--feature { padding: 0; }
.component-expression[data-expression="editorial"] .ds-card-art { filter: grayscale(1); }
.component-expression[data-expression="editorial"] .ds-card-grid { grid-template-columns: 1fr; }
.component-expression[data-expression="frameset"] .ds-card-art::before, .component-expression[data-expression="frameset"] .ds-card-art::after { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-content-card h3 { font-family: var(--font-technical); text-transform: uppercase; letter-spacing: -.02em; }
.component-expression[data-expression="play"] .ds-content-card { border-color: transparent; background: var(--c-surface); box-shadow: 0 12px 30px rgba(30,25,24,.07); }
.component-expression[data-expression="play"] .ds-card-art { margin: 8px; border-radius: 12px; }

.ds-list { margin: 0; padding: 0; border-top: 1px solid var(--c-line); list-style: none; }
.ds-list-row { display: grid; grid-template-columns: 36px minmax(0,1fr) auto 16px; gap: 10px; align-items: center; width: 100%; min-height: 66px; padding: 8px 4px; border: 0; border-bottom: 1px solid var(--c-line); background: transparent; color: var(--c-ink); text-align: left; }
.ds-list-row:hover:not(:disabled), .ds-list-row.is-selected { background: var(--c-surface); }
.ds-list-row:disabled { opacity: .42; }
.ds-list-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: var(--c-button-radius); background: color-mix(in srgb, var(--c-accent) 11%, var(--c-surface)); color: var(--c-accent); font: 700 11px var(--font-technical); }
.ds-list-row strong, .ds-list-row small { display: block; }
.ds-list-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.ds-list-row small { margin-top: 4px; color: var(--c-muted); font-size: 9px; }
.ds-list-row b { color: var(--c-muted); font-size: 8px; font-weight: 700; }
.ds-list-row i { color: var(--c-muted); font-style: normal; }
.component-expression[data-expression="editorial"] .ds-list-row { padding-block: 13px; }
.component-expression[data-expression="frameset"] .ds-list-row { padding-inline: 9px; }
.component-expression[data-expression="frameset"] .ds-list-icon { border: 1px solid var(--c-line); }
.component-expression[data-expression="play"] .ds-list { display: grid; gap: 7px; border: 0; }
.component-expression[data-expression="play"] .ds-list-row { padding-inline: 9px; border: 0; border-radius: 15px; background: var(--c-surface); }
.component-expression[data-expression="play"] .ds-list-row.is-selected { background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); }

.ds-accordion { border-top: 1px solid var(--c-line); }
.ds-accordion details { border-bottom: 1px solid var(--c-line); }
.ds-accordion summary { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; min-height: 60px; color: var(--c-ink); cursor: pointer; list-style: none; }
.ds-accordion summary::-webkit-details-marker { display: none; }
.ds-accordion summary span { font-size: 12px; font-weight: 800; line-height: 1.35; }
.ds-accordion summary i { font-style: normal; transition: rotate 180ms ease; }
.ds-accordion details[open] summary i { rotate: 45deg; }
.ds-accordion details > div { padding: 0 26px 18px 0; }
.ds-accordion p { margin: 0; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.component-expression[data-expression="frameset"] .ds-accordion { border: 1px solid var(--c-line); }
.component-expression[data-expression="frameset"] .ds-accordion details, .component-expression[data-expression="frameset"] .ds-accordion summary, .component-expression[data-expression="frameset"] .ds-accordion details > div { padding-inline: 10px; }
.component-expression[data-expression="play"] .ds-accordion { display: grid; gap: 8px; border: 0; }
.component-expression[data-expression="play"] .ds-accordion details { padding-inline: 13px; border: 0; border-radius: 16px; background: var(--c-surface); }

.ds-avatar-group { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; }
.ds-avatar { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid var(--c-line); border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 13%, var(--c-surface)); color: var(--c-accent); font: 800 11px var(--font-technical); }
.ds-avatar--sm { width: 34px; height: 34px; font-size: 8px; }
.ds-avatar--lg { width: 62px; height: 62px; font-size: 13px; }
.ds-avatar--xl { width: 80px; height: 80px; font-size: 16px; }
.ds-avatar--portrait { background: var(--c-accent); color: var(--c-on-accent); }
.ds-avatar i { position: absolute; right: 1px; bottom: 1px; width: 11px; height: 11px; border: 2px solid var(--c-bg); border-radius: 50%; background: #2e8b57; }
.ds-avatar--add { border-style: dashed; background: transparent; color: var(--c-muted); }
.ds-avatar-stack { display: flex; margin-top: 34px; padding-left: 8px; }
.ds-avatar-stack span { display: grid; place-items: center; width: 38px; height: 38px; margin-left: -8px; border: 2px solid var(--c-bg); border-radius: 50%; background: var(--c-surface); color: var(--c-ink); font: 700 8px var(--font-technical); }
.component-expression[data-expression="frameset"] .ds-avatar, .component-expression[data-expression="frameset"] .ds-avatar-stack span { border-radius: 0; }
.component-expression[data-expression="play"] .ds-avatar--xl { rotate: -3deg; box-shadow: 0 9px 24px color-mix(in srgb, var(--c-accent) 18%, transparent); }

.ds-badge-row, .ds-tag-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ds-badge { display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-surface); color: var(--c-muted); font-size: 9px; font-weight: 800; line-height: 1; white-space: nowrap; }
.ds-badge--accent { border-color: color-mix(in srgb, var(--c-accent) 30%, transparent); background: color-mix(in srgb, var(--c-accent) 10%, transparent); color: var(--c-accent); }
.ds-badge--success { border-color: rgba(46,139,87,.28); background: rgba(46,139,87,.1); color: color-mix(in srgb, #2e8b57 82%, var(--c-ink)); }
.ds-badge--warning { border-color: rgba(181,107,0,.3); background: rgba(181,107,0,.1); color: color-mix(in srgb, #b56b00 88%, var(--c-ink)); }
.ds-badge--danger { border-color: color-mix(in srgb, var(--c-danger) 30%, transparent); background: color-mix(in srgb, var(--c-danger) 9%, transparent); color: var(--c-danger); }
.ds-badge-copy { margin: 0; color: var(--c-muted); font-size: 12px; line-height: 1.5; }
.ds-badge-copy .ds-badge { margin-right: 6px; }
.component-expression[data-expression="frameset"] .ds-badge { border-radius: 0; font-family: var(--font-technical); text-transform: uppercase; }
.component-expression[data-expression="play"] .ds-badge--accent { box-shadow: 0 4px 10px color-mix(in srgb, var(--c-accent) 12%, transparent); }

.ds-tag { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-bg); color: var(--c-muted); font: 700 11px var(--c-font); text-decoration: none; }
.ds-tag:hover, .ds-tag.is-selected { border-color: var(--c-accent); color: var(--c-accent); }
.ds-tag.is-selected { background: color-mix(in srgb, var(--c-accent) 9%, transparent); }
.ds-tag--add { border-style: dashed; }
.component-expression[data-expression="frameset"] .ds-tag { font-family: var(--font-technical); text-transform: uppercase; }
.component-expression[data-expression="play"] .ds-tag { min-height: 44px; }

.ds-table-wrap { overflow-x: auto; border: 1px solid var(--c-line); border-radius: var(--c-radius); }
.ds-table { width: 100%; min-width: 430px; border-collapse: collapse; color: var(--c-ink); }
.ds-table th, .ds-table td { height: 54px; padding: 9px 11px; border-bottom: 1px solid var(--c-line); font-size: 10px; text-align: left; white-space: nowrap; }
.ds-table thead th { height: 42px; background: var(--c-surface); color: var(--c-muted); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-table tbody th { font-weight: 800; }
.ds-table tbody tr:last-child > * { border-bottom: 0; }
.ds-table tbody tr:hover { background: color-mix(in srgb, var(--c-accent) 5%, transparent); }
.component-expression[data-expression="editorial"] .ds-table-wrap { border-width: 1px 0; border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-table-wrap { border-radius: 0; box-shadow: 3px 3px 0 color-mix(in srgb, var(--c-ink) 70%, transparent); }
.component-expression[data-expression="play"] .ds-table-wrap { border-color: transparent; box-shadow: 0 12px 30px rgba(30,25,24,.08); }

.ds-description-list { margin: 0; border-top: 1px solid var(--c-line); }
.ds-description-list div { display: grid; grid-template-columns: minmax(90px,.7fr) 1fr; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--c-line); }
.ds-description-list dt { color: var(--c-muted); font-size: 10px; }
.ds-description-list dd { margin: 0; color: var(--c-ink); font-size: 11px; font-weight: 600; }
.ds-description-list--inline { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 28px; border: 0; }
.ds-description-list--inline div { display: block; padding: 12px; border: 1px solid var(--c-line); border-radius: var(--c-radius); }
.ds-description-list--inline dd { margin-top: 7px; }
.component-expression[data-expression="frameset"] .ds-description-list--inline { gap: 0; }
.component-expression[data-expression="frameset"] .ds-description-list--inline div { border-radius: 0; }
.component-expression[data-expression="play"] .ds-description-list--inline div { border-color: transparent; background: var(--c-surface); }

.ds-timeline { margin: 0; padding: 0; list-style: none; }
.ds-timeline li { position: relative; display: grid; grid-template-columns: 18px 1fr; gap: 12px; min-height: 112px; }
.ds-timeline li::before { content: ""; position: absolute; top: 14px; bottom: -3px; left: 6px; width: 1px; background: var(--c-line); }
.ds-timeline li:last-child::before { display: none; }
.ds-timeline li > span { position: relative; z-index: 1; width: 13px; height: 13px; margin-top: 2px; border: 2px solid var(--c-bg); border-radius: 50%; background: var(--c-muted); box-shadow: 0 0 0 1px var(--c-line); }
.ds-timeline li.is-current > span { background: var(--c-accent); box-shadow: 0 0 0 5px color-mix(in srgb, var(--c-accent) 12%, transparent); }
.ds-timeline small, .ds-timeline strong { display: block; }
.ds-timeline small { color: var(--c-muted); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .06em; }
.ds-timeline strong { margin-top: 7px; font-size: 12px; }
.ds-timeline p { margin: 5px 0 0; color: var(--c-muted); font-size: 10px; line-height: 1.5; }
.component-expression[data-expression="frameset"] .ds-timeline li > span { border-radius: 0; }
.component-expression[data-expression="play"] .ds-timeline strong { font-family: var(--selected-display); font-size: 14px; }

.ds-stat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.ds-stat { position: relative; min-height: 150px; padding: 16px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); }
.ds-stat:first-child { grid-column: span 2; min-height: 205px; }
.ds-stat small, .ds-stat strong, .ds-stat span { display: block; }
.ds-stat small { color: var(--c-muted); font: 600 9px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-stat strong { margin-top: 28px; font: 600 54px/1 var(--selected-display); letter-spacing: -.06em; }
.ds-stat:first-child strong { font-size: 84px; }
.ds-stat span { margin-top: 8px; color: var(--c-muted); font-size: 10px; }
.ds-stat i { position: absolute; right: 14px; bottom: 14px; left: 14px; height: 3px; background: var(--c-line); }
.ds-stat i::after { content: ""; display: block; width: var(--value); height: 100%; background: var(--c-accent); }
.component-expression[data-expression="editorial"] .ds-stat { border-width: 1px 0 0; border-radius: 0; padding-inline: 2px; }
.component-expression[data-expression="frameset"] .ds-stat { background: var(--c-surface); }
.component-expression[data-expression="frameset"] .ds-stat strong { font-family: var(--font-technical); }
.component-expression[data-expression="play"] .ds-stat { border-color: transparent; background: var(--c-surface); }
.component-expression[data-expression="play"] .ds-stat:first-child::after { content: "↗"; position: absolute; top: 15px; right: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: color-mix(in srgb, var(--c-accent) 13%, transparent); color: var(--c-accent); animation: joy-float 4s ease-in-out infinite; }

/* Feedback + overlay components */
.ds-alert { --alert-color: var(--c-accent); display: grid; grid-template-columns: 28px minmax(0,1fr) auto; gap: 11px; align-items: start; margin-bottom: 9px; padding: 13px; border: 1px solid color-mix(in srgb, var(--alert-color) 28%, var(--c-line)); border-radius: var(--c-radius); background: color-mix(in srgb, var(--alert-color) 7%, var(--c-bg)); color: var(--c-ink); }
.ds-alert > span { display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid color-mix(in srgb, var(--alert-color) 42%, transparent); border-radius: 50%; color: var(--alert-color); font: 800 11px var(--font-technical); }
.ds-alert strong, .ds-alert p { display: block; }
.ds-alert strong { font-size: 11px; line-height: 1.35; }
.ds-alert p { margin: 4px 0 0; color: var(--c-muted); font-size: 10px; line-height: 1.45; }
.ds-alert button { min-height: 32px; padding: 0 8px; border: 0; background: transparent; color: var(--alert-color); font: 800 9px var(--c-font); }
.ds-alert--success { --alert-color: #2e8b57; }
.ds-alert--warning { --alert-color: #b56b00; }
.ds-alert--danger { --alert-color: var(--c-danger); }
.component-expression[data-expression="editorial"] .ds-alert { border-width: 0 0 1px; border-radius: 0; background: transparent; padding-inline: 0; }
.component-expression[data-expression="frameset"] .ds-alert > span { border-radius: 0; }
.component-expression[data-expression="play"] .ds-alert { border-color: transparent; box-shadow: 0 8px 18px color-mix(in srgb, var(--alert-color) 8%, transparent); }

.ds-toast-stage { position: relative; display: grid; place-items: center; min-height: 280px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); }
.ds-toast-specimen { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 10px; align-items: center; width: min(92%, 340px); min-height: 64px; padding: 11px 12px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); color: var(--c-ink); box-shadow: 0 18px 45px rgba(0,0,0,.16); opacity: 0; transform: translateY(14px); pointer-events: none; transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.8,.2,1); }
.ds-toast-stage .ds-toast-specimen { position: absolute; right: 10px; bottom: 10px; left: 10px; width: auto; }
.ds-toast-specimen.is-visible, .ds-toast-specimen--inline { opacity: 1; transform: none; pointer-events: auto; }
.ds-toast-specimen > span { color: #2e8b57; font-size: 15px; }
.ds-toast-specimen strong, .ds-toast-specimen small { display: block; }
.ds-toast-specimen strong { font-size: 11px; }
.ds-toast-specimen small { margin-top: 4px; color: var(--c-muted); font-size: 9px; line-height: 1.35; }
.ds-toast-specimen button { min-height: 34px; padding: 0 8px; border: 0; background: transparent; color: var(--c-accent); font: 800 10px var(--c-font); }
.ds-toast-specimen--inline { position: static; grid-template-columns: minmax(0,1fr) auto; width: 100%; }
.component-expression[data-expression="frameset"] .ds-toast-stage, .component-expression[data-expression="frameset"] .ds-toast-specimen { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-toast-specimen { box-shadow: 4px 4px 0 color-mix(in srgb, var(--c-ink) 72%, transparent); }
.component-expression[data-expression="play"] .ds-toast-specimen { border-color: transparent; border-radius: var(--radius-lg); }

.ds-progress-label { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; color: var(--c-ink); }
.ds-progress-label strong { font-size: 11px; }
.ds-progress-label span { color: var(--c-muted); font: 600 9px var(--font-technical); }
.ds-progress { height: 8px; overflow: hidden; border-radius: var(--radius-full); background: var(--c-surface); }
.ds-progress i { display: block; width: var(--value); height: 100%; border-radius: inherit; background: var(--c-accent); }
.ds-progress--indeterminate i { width: 34%; animation: progress-slide 1.5s cubic-bezier(.6,0,.3,1) infinite; }
.ds-progress-steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 4px; margin: 0; padding: 0; list-style: none; }
.ds-progress-steps li { min-height: 48px; padding: 8px 5px; border-top: 3px solid var(--c-line); color: var(--c-muted); font-size: 8px; font-weight: 700; }
.ds-progress-steps li.is-complete, .ds-progress-steps li.is-current { border-color: var(--c-accent); color: var(--c-ink); }
.component-expression[data-expression="frameset"] .ds-progress, .component-expression[data-expression="frameset"] .ds-progress i { border-radius: 0; }
.component-expression[data-expression="play"] .ds-progress { height: 12px; padding: 3px; }
.component-expression[data-expression="play"] .ds-progress i { box-shadow: 0 3px 10px color-mix(in srgb, var(--c-accent) 25%, transparent); }

.ds-skeleton { display: block; overflow: hidden; border-radius: var(--c-radius); background: color-mix(in srgb, var(--c-muted) 13%, var(--c-surface)); }
.ds-skeleton::after { content: ""; display: block; width: 48%; height: 100%; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-bg) 72%, transparent), transparent); animation: skeleton-sweep 1.6s ease-in-out infinite; }
.ds-skeleton-card { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); }
.ds-skeleton-card > div { padding: 16px; }
.ds-skeleton--art { height: 210px; border-radius: 0; }
.ds-skeleton--line { height: 12px; margin-bottom: 10px; }
.ds-skeleton--short { width: 34%; }
.ds-skeleton--medium { width: 68%; }
.ds-skeleton-list { margin-top: 24px; border-top: 1px solid var(--c-line); }
.ds-skeleton-list > div { display: grid; grid-template-columns: 44px 1fr; gap: 12px; align-items: center; min-height: 70px; border-bottom: 1px solid var(--c-line); }
.ds-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.ds-skeleton-list i { display: block; }
.component-expression[data-expression="frameset"] .ds-skeleton { border-radius: 0; }
.component-expression[data-expression="play"] .ds-skeleton-card { border-color: transparent; background: var(--c-surface); }

.ds-empty-state, .ds-error-state { display: grid; justify-items: center; align-content: center; min-height: 480px; padding: 34px 22px; text-align: center; }
.ds-empty-mark { display: grid; place-items: center; width: 104px; height: 104px; margin-bottom: 25px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-surface); }
.ds-empty-mark span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 20px; }
.ds-empty-state > small, .ds-error-state > small { color: var(--c-accent); font: 600 9px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-empty-state h3, .ds-error-state h3 { max-width: 330px; margin: 10px 0 9px; font: 600 25px/1.05 var(--selected-display); letter-spacing: -.035em; }
.ds-empty-state p, .ds-error-state p { max-width: 360px; margin: 0; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.ds-empty-state > div:last-child, .ds-error-state > div:last-child { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 22px; }
.component-expression[data-expression="editorial"] .ds-empty-mark { width: 88px; height: 88px; border-radius: var(--radius-sm); }
.component-expression[data-expression="frameset"] .ds-empty-mark, .component-expression[data-expression="frameset"] .ds-empty-mark span { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-empty-state h3, .component-expression[data-expression="frameset"] .ds-error-state h3 { font-family: var(--font-technical); text-transform: uppercase; }
.component-expression[data-expression="play"] .ds-empty-mark { rotate: -4deg; border: 0; border-radius: 30% 70% 58% 42% / 44% 38% 62% 56%; background: color-mix(in srgb, var(--c-accent) 10%, var(--c-surface)); animation: joy-float 4s ease-in-out infinite; }
.ds-error-state > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 22px; border: 1px solid color-mix(in srgb, var(--c-danger) 38%, transparent); border-radius: 50%; background: color-mix(in srgb, var(--c-danger) 9%, transparent); color: var(--c-danger); font: 800 16px var(--font-technical); }
.ds-error-state > small { color: var(--c-danger); }
.ds-error-state.is-recovered > span { border-color: rgba(46,139,87,.34); background: rgba(46,139,87,.1); color: #2e8b57; }
.ds-error-state.is-recovered > small { color: #2e8b57; }
.component-expression[data-expression="frameset"] .ds-error-state > span { border-radius: 0; }

.ds-overlay-stage { position: relative; display: grid; place-items: center; min-height: 500px; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-surface); }
.ds-overlay-scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 48%, transparent); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.ds-dialog, .ds-sheet { position: absolute; z-index: 1; background: var(--c-bg); color: var(--c-ink); box-shadow: 0 24px 70px rgba(0,0,0,.28); transition: opacity 180ms ease, transform 240ms cubic-bezier(.2,.8,.2,1); }
.ds-dialog { right: 18px; left: 18px; max-width: 390px; padding: 22px; border-radius: var(--c-card-radius); opacity: 0; transform: translateY(14px) scale(.98); pointer-events: none; }
.ds-dialog > small, .ds-sheet small { color: var(--c-accent); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-dialog h3, .ds-sheet h3 { margin: 8px 0 9px; font: 600 22px/1.08 var(--selected-display); letter-spacing: -.03em; }
.ds-dialog p, .ds-sheet p { margin: 0; color: var(--c-muted); font-size: 11px; line-height: 1.5; }
.ds-overlay-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: transparent; color: var(--c-ink); font-size: 17px; }
.ds-dialog-actions { display: flex; justify-content: end; gap: 8px; margin-top: 25px; }
.ds-overlay-stage.is-open .ds-overlay-scrim { opacity: 1; pointer-events: auto; }
.ds-overlay-stage.is-open .ds-dialog { opacity: 1; transform: none; pointer-events: auto; }
.ds-sheet { top: 0; right: 0; bottom: 0; width: min(82%, 360px); padding: 23px 18px; transform: translateX(102%); }
.ds-sheet header { position: relative; padding-right: 38px; }
.ds-sheet header .ds-overlay-close { top: -8px; right: -4px; }
.ds-sheet > p { margin-top: 22px; }
.ds-sheet dl { margin: 22px 0; border-top: 1px solid var(--c-line); }
.ds-sheet dl div { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--c-line); }
.ds-sheet dt { color: var(--c-muted); font-size: 10px; }
.ds-sheet dd { margin: 0; font-size: 10px; font-weight: 700; }
.ds-overlay-stage.is-open .ds-sheet { transform: none; }
.component-expression[data-expression="frameset"] .ds-overlay-stage, .component-expression[data-expression="frameset"] .ds-dialog { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-dialog, .component-expression[data-expression="frameset"] .ds-sheet { border: 1px solid var(--c-ink); box-shadow: 5px 5px 0 color-mix(in srgb, var(--c-ink) 72%, transparent); }
.component-expression[data-expression="play"] .ds-dialog { border-radius: var(--radius-xl); }
.component-expression[data-expression="play"] .ds-sheet { top: auto; right: 8px; bottom: 8px; left: 8px; width: auto; height: 78%; border-radius: var(--radius-xl); transform: translateY(105%); }
.component-expression[data-expression="play"] .ds-overlay-stage.is-open .ds-sheet { transform: none; }

.ds-popover-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: start; }
.ds-popover { position: relative; min-width: 150px; }
.ds-popover summary { display: flex; justify-content: space-between; align-items: center; min-height: 42px; padding: 0 12px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-bg); color: var(--c-ink); font-size: 10px; font-weight: 800; cursor: pointer; list-style: none; }
.ds-popover summary::-webkit-details-marker { display: none; }
.ds-popover > div { position: relative; z-index: 1; display: grid; gap: 10px; margin-top: 8px; padding: 13px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); box-shadow: 0 18px 45px rgba(0,0,0,.15); }
.ds-popover > div strong { font-size: 10px; }
.ds-popover > div label { display: flex; align-items: center; gap: 8px; min-height: 30px; color: var(--c-muted); font-size: 10px; }
.ds-popover > div p { width: 190px; margin: 0; color: var(--c-muted); font-size: 10px; line-height: 1.45; }
.component-expression[data-expression="frameset"] .ds-popover summary, .component-expression[data-expression="frameset"] .ds-popover > div { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-popover > div { box-shadow: 0 3px 10px rgba(24,45,86,.045); }
.component-expression[data-expression="play"] .ds-popover > div { border-color: transparent; border-radius: var(--radius-lg); }

.ds-tooltip-stage { display: flex; justify-content: center; gap: 30px; min-height: 240px; padding-top: 110px; }
.ds-tooltip-target { position: relative; width: 48px; height: 48px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-bg); color: var(--c-ink); font-size: 17px; }
.ds-tooltip-target::after { content: attr(data-tooltip); position: absolute; z-index: 2; bottom: calc(100% + 11px); left: 50%; width: max-content; max-width: 150px; padding: 7px 9px; border-radius: var(--radius-xs); background: var(--c-ink); color: var(--c-bg); font: 700 9px var(--c-font); opacity: 0; transform: translate(-50%,4px); pointer-events: none; transition: opacity 140ms ease, transform 160ms ease; }
.ds-tooltip-target:hover::after, .ds-tooltip-target:focus-visible::after { opacity: 1; transform: translate(-50%,0); }
.ds-tooltip-note { margin: 0; color: var(--c-muted); font-size: 10px; line-height: 1.5; text-align: center; }
.component-expression[data-expression="frameset"] .ds-tooltip-target { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-tooltip-target::after { border-radius: 0; font-family: var(--font-technical); text-transform: uppercase; }
.component-expression[data-expression="play"] .ds-tooltip-target:hover { color: var(--c-accent); transform: translateY(-2px) rotate(-2deg); }

@keyframes progress-slide { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@keyframes skeleton-sweep { from { transform: translateX(-120%); } to { transform: translateX(310%); } }

/* Application + AI patterns */
.ds-command { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); background: var(--c-bg); box-shadow: 0 22px 55px rgba(0,0,0,.12); }
.ds-command > label { display: grid; grid-template-columns: 22px minmax(0,1fr) auto; gap: 8px; align-items: center; min-height: 54px; padding: 0 13px; border-bottom: 1px solid var(--c-line); }
.ds-command input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: 600 12px var(--c-font); }
.ds-command input::placeholder { color: var(--c-muted); }
.ds-command kbd { padding: 4px 6px; border: 1px solid var(--c-line); border-radius: var(--radius-xs); color: var(--c-muted); font: 600 8px var(--font-technical); }
.ds-command-group { padding: 8px; border-bottom: 1px solid var(--c-line); }
.ds-command-group:last-of-type { border-bottom: 0; }
.ds-command-group > small { display: block; padding: 6px 8px; color: var(--c-muted); font: 600 8px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.ds-command-group button { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: 8px; align-items: center; width: 100%; min-height: 44px; padding: 0 8px; border: 0; border-radius: var(--c-radius); background: transparent; color: var(--c-ink); text-align: left; }
.ds-command-group button:hover, .ds-command-group button:focus-visible { background: var(--c-surface); }
.ds-command-group button > span { color: var(--c-muted); }
.ds-command-group strong { font-size: 10px; }
.ds-command-empty { margin: 0; padding: 30px 14px; color: var(--c-muted); font-size: 11px; text-align: center; }
.component-expression[data-expression="editorial"] .ds-command { box-shadow: 0 18px 44px rgba(0,0,0,.08); }
.component-expression[data-expression="frameset"] .ds-command, .component-expression[data-expression="frameset"] .ds-command kbd, .component-expression[data-expression="frameset"] .ds-command-group button { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-command { box-shadow: none; }
.component-expression[data-expression="play"] .ds-command { border-color: transparent; box-shadow: 0 18px 44px color-mix(in srgb, var(--c-accent) 12%, transparent); }

.ds-combobox { position: relative; width: 100%; }
.ds-combobox summary { display: flex; align-items: center; justify-content: space-between; min-height: 48px; padding: 0 13px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); color: var(--c-ink); font-size: 11px; font-weight: 700; cursor: pointer; list-style: none; }
.ds-combobox summary::-webkit-details-marker { display: none; }
.ds-combobox[open] summary { border-color: var(--c-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-focus) 14%, transparent); }
.ds-combobox > div { margin-top: 7px; padding: 7px; border: 1px solid var(--c-line); border-radius: var(--c-radius); background: var(--c-bg); box-shadow: 0 16px 40px rgba(0,0,0,.13); }
.ds-combobox > div > label { display: grid; grid-template-columns: 20px 1fr; align-items: center; min-height: 40px; padding: 0 8px; border-bottom: 1px solid var(--c-line); color: var(--c-muted); }
.ds-combobox input { min-width: 0; border: 0; outline: 0; background: transparent; color: var(--c-ink); font: 600 11px var(--c-font); }
.ds-combobox [role="option"] { display: block; width: 100%; min-height: 48px; padding: 7px 9px; border: 0; border-radius: calc(var(--c-radius) * .7); background: transparent; color: var(--c-ink); text-align: left; }
.ds-combobox [role="option"]:hover, .ds-combobox [role="option"][aria-selected="true"] { background: var(--c-surface); }
.ds-combobox b, .ds-combobox small { display: block; }
.ds-combobox b { font-size: 10px; }
.ds-combobox small { margin-top: 3px; color: var(--c-muted); font-size: 9px; }
.component-expression[data-expression="frameset"] .ds-combobox summary, .component-expression[data-expression="frameset"] .ds-combobox > div, .component-expression[data-expression="frameset"] .ds-combobox [role="option"] { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-combobox > div { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.component-expression[data-expression="play"] .ds-combobox > div { border-color: transparent; border-radius: var(--radius-lg); }

.ds-date-picker { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); background: var(--c-bg); }
.ds-date-picker > header { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; min-height: 58px; padding: 5px 8px; border-bottom: 1px solid var(--c-line); text-align: center; }
.ds-date-picker > header strong { font-size: 11px; }
.ds-date-picker > header button { width: 36px; height: 36px; border: 0; border-radius: var(--c-button-radius); background: transparent; color: var(--c-ink); }
.ds-calendar { display: grid; grid-template-columns: repeat(7,1fr); gap: 3px; padding: 12px 9px; }
.ds-calendar > span { display: grid; place-items: center; height: 28px; color: var(--c-muted); font: 600 8px var(--font-technical); text-transform: uppercase; }
.ds-calendar > i { min-height: 36px; }
.ds-calendar > button { min-width: 0; min-height: 38px; padding: 0; border: 0; border-radius: var(--c-button-radius); background: transparent; color: var(--c-ink); font-size: 10px; }
.ds-calendar > button:hover { background: var(--c-surface); }
.ds-calendar > button.is-selected { background: var(--c-accent); color: var(--c-on-accent); }
.ds-calendar > button.is-today:not(.is-selected) { box-shadow: inset 0 0 0 1px var(--c-accent); color: var(--c-accent); }
.ds-date-picker > footer { display: flex; justify-content: space-between; align-items: center; min-height: 50px; padding: 0 13px; border-top: 1px solid var(--c-line); }
.ds-date-picker > footer span { color: var(--c-muted); font-size: 9px; }
.ds-date-picker > footer strong { font-size: 10px; }
.component-expression[data-expression="frameset"] .ds-date-picker, .component-expression[data-expression="frameset"] .ds-date-picker button { border-radius: 0; }
.component-expression[data-expression="play"] .ds-date-picker { border-color: transparent; box-shadow: 0 14px 36px rgba(30,25,24,.09); }

.ds-upload-zone { display: grid; justify-items: center; align-content: center; min-height: 260px; padding: 24px; border: 1px dashed var(--c-line); border-radius: var(--c-card-radius); background: var(--c-surface); color: var(--c-ink); text-align: center; cursor: pointer; }
.ds-upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ds-upload-zone > span { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 16px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-bg); color: var(--c-accent); font-size: 18px; }
.ds-upload-zone strong { font-size: 12px; }
.ds-upload-zone small { margin-top: 7px; color: var(--c-muted); font-size: 9px; }
.ds-upload-list { margin-top: 12px; }
.ds-upload-list > div { display: grid; grid-template-columns: 38px minmax(0,1fr) 18px 34px; gap: 9px; align-items: center; min-height: 66px; padding: 8px 9px; border: 1px solid var(--c-line); border-radius: var(--c-radius); }
.ds-upload-list > div > span { display: grid; place-items: center; width: 36px; height: 42px; background: var(--c-surface); color: var(--c-accent); font: 700 8px var(--font-technical); }
.ds-upload-list strong, .ds-upload-list small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds-upload-list strong { font-size: 10px; }
.ds-upload-list small { margin-top: 4px; color: var(--c-muted); font-size: 9px; }
.ds-upload-list i { color: #2e8b57; font-style: normal; }
.ds-upload-remove { width: 32px; height: 32px; border: 0; background: transparent; color: var(--c-muted); }
.component-expression[data-expression="frameset"] .ds-upload-zone, .component-expression[data-expression="frameset"] .ds-upload-zone > span, .component-expression[data-expression="frameset"] .ds-upload-list > div { border-radius: 0; }
.component-expression[data-expression="play"] .ds-upload-zone { border-color: color-mix(in srgb, var(--c-accent) 35%, var(--c-line)); background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface)); }

.ds-conversation { display: grid; gap: 20px; }
.ds-message { max-width: 92%; color: var(--c-ink); }
.ds-message header { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; }
.ds-message header > span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: var(--c-button-radius); background: var(--c-accent); color: var(--c-on-accent); font: 700 8px var(--font-technical); }
.ds-message header strong { font-size: 10px; }
.ds-message time { margin-left: auto; color: var(--c-muted); font-size: 8px; }
.ds-message > p { margin: 0; font-size: 12px; line-height: 1.6; }
.ds-message--user { justify-self: end; padding: 13px 15px; border-radius: var(--c-card-radius); background: var(--c-surface); }
.ds-message--assistant { justify-self: start; }
.ds-message--assistant footer { display: flex; gap: 4px; margin-top: 10px; }
.ds-message--assistant footer button { min-height: 32px; padding: 0 8px; border: 0; border-radius: var(--c-button-radius); background: transparent; color: var(--c-muted); font-size: 9px; }
.ds-message--assistant footer button:hover { background: var(--c-surface); color: var(--c-ink); }
.ds-message--system { display: grid; grid-template-columns: 20px 1fr; gap: 7px; max-width: 100%; padding-top: 14px; border-top: 1px solid var(--c-line); color: var(--c-muted); }
.ds-message--system p { font-size: 9px; line-height: 1.45; }
.component-expression[data-expression="editorial"] .ds-message--assistant { padding: 15px; border-radius: var(--c-card-radius); background: color-mix(in srgb, var(--c-ink) 4%, var(--c-bg)); }
.component-expression[data-expression="editorial"] .ds-message--assistant > p { font-family: var(--selected-display); font-size: 14px; }
.component-expression[data-expression="frameset"] .ds-message--user, .component-expression[data-expression="frameset"] .ds-message header > span { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-message--assistant { padding: 15px; border-left: 2px solid var(--c-accent); background: color-mix(in srgb, var(--c-accent) 6%, var(--c-surface)); }
.component-expression[data-expression="play"] .ds-message--assistant { padding: 15px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c-accent) 7%, var(--c-surface)); }

.ds-composer { padding: 9px; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); background: var(--c-bg); box-shadow: 0 14px 35px rgba(0,0,0,.08); }
.ds-composer textarea { width: 100%; min-height: 130px; padding: 9px; border: 0; outline: 0; resize: vertical; background: transparent; color: var(--c-ink); font: 500 13px/1.5 var(--c-font); }
.ds-composer textarea::placeholder { color: var(--c-muted); }
.ds-composer > div { display: grid; grid-template-columns: 38px minmax(0,1fr) 42px; gap: 8px; align-items: center; border-top: 1px solid var(--c-line); padding-top: 8px; }
.ds-composer-add, .ds-composer-send { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: transparent; color: var(--c-ink); }
.ds-composer-send { width: 42px; height: 42px; border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.ds-composer-send:disabled { opacity: .35; }
.ds-composer-hint { color: var(--c-muted); font-size: 8px; line-height: 1.3; text-align: center; }
.ds-composer-status { margin-top: 10px; color: var(--c-muted); font-size: 9px; text-align: center; }
.component-expression[data-expression="frameset"] .ds-composer, .component-expression[data-expression="frameset"] .ds-composer button { border-radius: 0; box-shadow: none; }
.component-expression[data-expression="play"] .ds-composer { border-color: transparent; box-shadow: 0 16px 40px color-mix(in srgb, var(--c-accent) 10%, transparent); }

.ds-ai-suggestion { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); background: var(--c-bg); }
.ds-ai-suggestion > header { display: flex; justify-content: space-between; align-items: center; min-height: 48px; padding: 0 14px; border-bottom: 1px solid var(--c-line); }
.ds-ai-suggestion > header span { color: var(--c-accent); font: 700 9px var(--font-technical); text-transform: uppercase; letter-spacing: .07em; }
.ds-ai-suggestion > header b { color: var(--c-muted); font-size: 8px; }
.ds-ai-context { padding: 18px 16px; }
.ds-ai-context small { color: var(--c-muted); font-size: 9px; }
.ds-ai-context h3 { margin: 8px 0; font: 600 20px/1.12 var(--selected-display); letter-spacing: -.025em; }
.ds-ai-context p { margin: 0; color: var(--c-muted); font-size: 11px; line-height: 1.55; }
.ds-ai-suggestion dl { margin: 0; padding: 0 16px; }
.ds-ai-suggestion dl div { padding: 12px 0; border-top: 1px solid var(--c-line); }
.ds-ai-suggestion dt { color: var(--c-accent); font: 700 8px var(--font-technical); text-transform: uppercase; letter-spacing: .06em; }
.ds-ai-suggestion dd { margin: 5px 0 0; color: var(--c-muted); font-size: 10px; line-height: 1.45; }
.ds-ai-suggestion > footer { display: flex; justify-content: end; gap: 8px; padding: 16px; border-top: 1px solid var(--c-line); }
.ds-ai-suggestion.is-accepted { border-color: rgba(46,139,87,.45); }
.ds-ai-suggestion.is-rejected { opacity: .58; }
.component-expression[data-expression="frameset"] .ds-ai-suggestion { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-ai-context h3 { font-family: var(--font-technical); text-transform: uppercase; }
.component-expression[data-expression="play"] .ds-ai-suggestion { border-color: transparent; background: var(--c-surface); }

.ds-disclosure-prompts { display: grid; gap: 9px; padding: 14px; border-radius: var(--c-card-radius); background: color-mix(in srgb, var(--c-ink) 2.5%, var(--c-bg)); }
.ds-disclosure-prompts > header { display: grid; grid-template-columns: 31px minmax(0,1fr); gap: 11px; align-items: start; margin-bottom: 4px; }
.ds-disclosure-prompts > header > span { display: grid; place-items: center; width: 31px; height: 31px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); font-size: 13px; }
.ds-disclosure-prompts > header small { display: block; margin-bottom: 5px; color: var(--c-accent); font: 700 8px var(--font-technical); text-transform: uppercase; letter-spacing: .07em; }
.ds-disclosure-prompts > header h3 { margin: 0; color: var(--c-ink); font: 600 15px/1.2 var(--selected-display); letter-spacing: -.02em; }
.ds-disclosure-card { overflow: hidden; margin-left: 42px; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); background: var(--c-bg); box-shadow: 0 8px 20px rgba(0,0,0,.045); }
.ds-disclosure-card summary { display: grid; grid-template-columns: minmax(0,1fr) 24px; gap: 9px; align-items: center; min-height: 76px; padding: 13px 15px; color: var(--c-ink); cursor: pointer; list-style: none; }
.ds-disclosure-card summary::-webkit-details-marker { display: none; }
.ds-disclosure-card summary span, .ds-disclosure-card summary strong, .ds-disclosure-card summary small { display: block; }
.ds-disclosure-card summary strong { font-size: 11px; line-height: 1.25; }
.ds-disclosure-card summary small { margin-top: 5px; color: var(--c-muted); font-size: 9px; line-height: 1.4; }
.ds-disclosure-card summary i { font-style: normal; font-size: 15px; transition: transform .18s ease; }
.ds-disclosure-card[open] summary i { transform: rotate(90deg); }
.ds-disclosure-panel { padding: 0 15px 15px; border-top: 1px solid var(--c-line); }
.ds-disclosure-panel p { margin: 12px 0; color: var(--c-muted); font-size: 9px; line-height: 1.5; }
.ds-disclosure-panel .ds-button { min-height: 36px; padding: 0 12px; font-size: 9px; }
.ds-lens-list { display: flex; flex-wrap: wrap; gap: 6px; }
.ds-lens-list button { min-height: 32px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-surface); color: var(--c-ink); font-size: 8px; font-weight: 700; }
.ds-evidence-section { margin-top: 24px; }
.ds-evidence-section > .demo-label { margin-bottom: 8px; }
.ds-evidence-list { border-top: 1px solid var(--c-line); }
.ds-evidence-list details { border-bottom: 1px solid var(--c-line); }
.ds-evidence-list summary { display: grid; grid-template-columns: auto minmax(0,1fr) auto 14px; gap: 8px; align-items: center; min-height: 56px; color: var(--c-ink); cursor: pointer; list-style: none; }
.ds-evidence-list summary::-webkit-details-marker { display: none; }
.ds-evidence-list summary strong { font-size: 10px; }
.ds-evidence-list summary small { color: var(--c-muted); font-size: 8px; }
.ds-evidence-list summary i { font-style: normal; }
.ds-evidence-kind { padding: 5px 7px; border-radius: var(--radius-full); background: rgba(46,139,87,.1); color: #2e8b57; font: 700 7px var(--font-technical); text-transform: uppercase; }
.ds-evidence-kind--inferred { background: color-mix(in srgb, var(--c-accent) 10%, transparent); color: var(--c-accent); }
.ds-evidence-kind--unknown { background: color-mix(in srgb, var(--c-muted) 10%, transparent); color: var(--c-muted); }
.ds-evidence-list details > div { padding: 0 0 16px 74px; }
.ds-evidence-list details p { margin: 0; color: var(--c-muted); font-size: 10px; line-height: 1.5; }
.ds-evidence-list details footer { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-top: 10px; }
.ds-evidence-list details footer span { color: var(--c-muted); font-size: 8px; }
.ds-evidence-list details footer button { min-height: 32px; border: 0; background: transparent; color: var(--c-accent); font-size: 9px; font-weight: 800; }
.component-expression[data-expression="frameset"] .ds-disclosure-prompts > header h3 { font-family: var(--font-technical); text-transform: uppercase; letter-spacing: .01em; }
.component-expression[data-expression="frameset"] .ds-disclosure-prompts { background: color-mix(in srgb, var(--c-accent) 1.5%, var(--c-surface)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-accent) 11%, var(--c-line)); }
.component-expression[data-expression="frameset"] .ds-disclosure-card, .component-expression[data-expression="frameset"] .ds-lens-list button { border-radius: 0; box-shadow: 0 4px 14px rgba(0,0,0,.035); }
.component-expression[data-expression="frameset"] .ds-evidence-kind { border-radius: 0; }
.component-expression[data-expression="play"] .ds-disclosure-prompts { padding: 14px; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c-accent) 5%, var(--c-surface)); }
.component-expression[data-expression="play"] .ds-disclosure-card { border-color: transparent; background: var(--c-bg); box-shadow: 0 12px 28px color-mix(in srgb, var(--c-accent) 9%, transparent); }
.component-expression[data-expression="play"] .ds-evidence-list { display: grid; gap: 8px; border: 0; }
.component-expression[data-expression="play"] .ds-evidence-list details { padding: 0 12px; border: 0; border-radius: var(--radius-lg); background: var(--c-surface); }

.ds-approval-flow { display: grid; gap: 0; }
.ds-approval-flow article { position: relative; display: grid; grid-template-columns: 32px 1fr; gap: 11px; min-height: 145px; color: var(--c-muted); }
.ds-approval-flow article::before { content: ""; position: absolute; top: 30px; bottom: 0; left: 15px; width: 1px; background: var(--c-line); }
.ds-approval-flow article:last-child::before { display: none; }
.ds-approval-flow article > span { position: relative; z-index: 1; display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-bg); font: 700 9px var(--font-technical); }
.ds-approval-flow article.is-current > span, .ds-approval-flow article.is-complete > span { border-color: var(--c-accent); background: var(--c-accent); color: var(--c-on-accent); }
.ds-approval-flow article small, .ds-approval-flow article strong { display: block; }
.ds-approval-flow article small { color: var(--c-accent); font: 700 8px var(--font-technical); text-transform: uppercase; letter-spacing: .07em; }
.ds-approval-flow article strong { margin-top: 7px; color: var(--c-ink); font-size: 11px; }
.ds-approval-flow article p { margin: 6px 0 10px; color: var(--c-muted); font-size: 10px; line-height: 1.45; }
.ds-approval-flow article.is-current > div { align-self: start; margin: -9px 0 18px; padding: 18px 18px 20px; border: 1px solid color-mix(in srgb, var(--c-ink) 5%, var(--c-line)); border-radius: var(--c-card-radius); background: color-mix(in srgb, var(--c-ink) 2%, var(--c-bg)); box-shadow: 0 8px 22px rgba(0,0,0,.025); }
.component-expression[data-expression="frameset"] .ds-approval-flow article > span { border-radius: 0; }
.component-expression[data-expression="frameset"] .ds-approval-flow article.is-current > div { border-color: color-mix(in srgb, var(--c-accent) 13%, var(--c-line)); border-radius: 0; background: color-mix(in srgb, var(--c-accent) 2%, var(--c-surface)); box-shadow: 0 4px 14px rgba(0,0,0,.03); }
.component-expression[data-expression="play"] .ds-approval-flow article.is-current > div { padding: 20px 20px 22px; border-color: transparent; border-radius: var(--radius-lg); background: color-mix(in srgb, var(--c-accent) 9%, var(--c-surface)); box-shadow: 0 12px 28px color-mix(in srgb, var(--c-accent) 8%, transparent); }

.ds-change-review { overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--c-card-radius); }
.ds-change-review > header { display: flex; justify-content: space-between; align-items: center; min-height: 64px; padding: 10px 14px; border-bottom: 1px solid var(--c-line); }
.ds-change-review > header small { color: var(--c-muted); font-size: 8px; }
.ds-change-review > header h3 { margin: 5px 0 0; font-size: 13px; }
.ds-change-review > header > span { padding: 5px 7px; border-radius: var(--radius-full); background: var(--c-surface); color: var(--c-muted); font-size: 8px; font-weight: 700; }
.ds-diff { display: grid; grid-template-columns: 1fr 1fr; }
.ds-diff article { min-height: 95px; padding: 13px; border-bottom: 1px solid var(--c-line); }
.ds-diff article + article { border-left: 1px solid var(--c-line); }
.ds-diff small { color: var(--c-muted); font: 700 8px var(--font-technical); text-transform: uppercase; }
.ds-diff p { margin: 12px 0 0; font-size: 10px; line-height: 1.45; }
.ds-diff del { color: var(--c-danger); text-decoration-color: color-mix(in srgb, var(--c-danger) 50%, transparent); }
.ds-diff ins { color: #2e8b57; text-decoration: none; }
.ds-change-review ul { margin: 0; padding: 0; list-style: none; }
.ds-change-review li { display: grid; grid-template-columns: 1fr .8fr .8fr 34px; gap: 8px; align-items: center; min-height: 54px; padding: 7px 12px; border-bottom: 1px solid var(--c-line); font-size: 9px; }
.ds-change-review li > span { font-weight: 800; }
.ds-change-review li del { color: var(--c-muted); }
.ds-change-review li ins { color: var(--c-ink); text-decoration: none; }
.ds-change-toggle { width: 32px; height: 32px; border: 1px solid var(--c-line); border-radius: var(--c-button-radius); background: var(--c-accent); color: var(--c-on-accent); }
.ds-change-toggle[aria-pressed="false"] { background: transparent; color: var(--c-muted); }
.ds-change-review > footer { display: flex; justify-content: end; gap: 8px; padding: 14px; }
.component-expression[data-expression="frameset"] .ds-change-review, .component-expression[data-expression="frameset"] .ds-change-toggle, .component-expression[data-expression="frameset"] .ds-change-review > header > span { border-radius: 0; }
.component-expression[data-expression="play"] .ds-change-review { border-color: transparent; background: var(--c-surface); }

.component-lab.is-mobile-preview .ds-diff { grid-template-columns: 1fr; }
.component-lab.is-mobile-preview .ds-diff article + article { border-left: 0; }
.component-lab.is-mobile-preview .ds-change-review li { grid-template-columns: 1fr 32px; }
.component-lab.is-mobile-preview .ds-change-review li del, .component-lab.is-mobile-preview .ds-change-review li ins { grid-column: 1; }
.component-lab.is-mobile-preview .ds-change-review li button { grid-column: 2; grid-row: 1 / span 3; }
.component-lab.is-mobile-preview .ds-ai-suggestion > footer, .component-lab.is-mobile-preview .ds-change-review > footer { flex-direction: column-reverse; }
.component-lab.is-mobile-preview .ds-ai-suggestion > footer .ds-button, .component-lab.is-mobile-preview .ds-change-review > footer .ds-button { width: 100%; }
.component-lab.is-mobile-preview .ds-disclosure-card { margin-left: 0; }
.component-lab.is-mobile-preview .ds-disclosure-card summary { min-height: 82px; padding: 14px; }
.component-lab.is-mobile-preview .ds-evidence-list details > div { padding-left: 0; }

.component-lab.is-mobile-preview .ds-card-grid, .component-lab.is-mobile-preview .ds-description-list--inline, .component-lab.is-mobile-preview .ds-stat-grid { grid-template-columns: 1fr; }
.component-lab.is-mobile-preview .ds-stat:first-child { grid-column: auto; }
.component-lab.is-mobile-preview .ds-list-row { grid-template-columns: 36px minmax(0,1fr) 16px; }
.component-lab.is-mobile-preview .ds-list-row b { display: none; }
.component-lab.is-mobile-preview .ds-dialog { right: 8px; left: 8px; padding: 20px 17px; }
.component-lab.is-mobile-preview .ds-dialog-actions { flex-direction: column-reverse; }
.component-lab.is-mobile-preview .ds-dialog-actions .ds-button { width: 100%; }
.component-lab.is-mobile-preview .ds-progress-steps { grid-template-columns: 1fr 1fr; }

.ds-tabs button:focus-visible, .ds-breadcrumbs a:focus-visible, .ds-breadcrumbs button:focus-visible, .ds-pagination button:focus-visible, .ds-menu summary:focus-visible, .ds-menu__panel button:focus-visible, .ds-top-nav a:focus-visible, .ds-top-nav button:focus-visible, .ds-sidebar a:focus-visible, .ds-sidebar button:focus-visible, .ds-mobile-nav button:focus-visible, .ds-drawer a:focus-visible, .ds-drawer button:focus-visible, .ds-content-card a:focus-visible, .ds-list-row:focus-visible, .ds-accordion summary:focus-visible, .ds-tag:focus-visible, .ds-alert button:focus-visible, .ds-toast-specimen button:focus-visible, .ds-overlay-stage button:focus-visible, .ds-popover summary:focus-visible, .ds-tooltip-target:focus-visible, .ds-command button:focus-visible, .ds-combobox summary:focus-visible, .ds-combobox button:focus-visible, .ds-calendar button:focus-visible, .ds-upload-zone:focus-within, .ds-message button:focus-visible, .ds-composer button:focus-visible, .ds-ai-suggestion button:focus-visible, .ds-disclosure-card summary:focus-visible, .ds-disclosure-card button:focus-visible, .ds-evidence-list summary:focus-visible, .ds-evidence-list button:focus-visible, .ds-approval-flow button:focus-visible, .ds-change-review button:focus-visible {
  outline: 3px solid var(--c-focus);
  outline-offset: 2px;
}
.comparison-note { margin: 14px 4px 0; color: var(--studio-muted); font-size: 11px; }
.comparison-note span { margin-right: 6px; color: var(--studio-ink); }
.contract-panel { position: sticky; top: 110px; padding: 20px; }
.contract-status { display: flex; align-items: center; gap: 7px; width: fit-content; margin-bottom: 24px; padding: 7px 9px; border-radius: 999px; background: color-mix(in srgb, #2e8b57 13%, transparent); color: color-mix(in srgb, #2e8b57 86%, var(--studio-ink)); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.contract-status span { width: 6px; height: 6px; border-radius: 50%; background: #2e8b57; }
.contract-status b { font: inherit; }
.contract-status.is-todo { background: color-mix(in srgb, #b56b00 14%, transparent); color: color-mix(in srgb, #b56b00 88%, var(--studio-ink)); }
.contract-status.is-todo span { background: #b56b00; }
.contract-panel > h2 { margin: 6px 0 7px; font: 500 30px/1 var(--font-editorial); letter-spacing: -.035em; }
.contract-panel > p { margin: 0 0 23px; color: var(--studio-muted); font-size: 13px; line-height: 1.5; }
.contract-panel section { padding: 15px 0; border-top: 1px solid var(--studio-line); }
.contract-panel section h3 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.contract-panel section p { margin: 0; color: var(--studio-muted); font-size: 12px; line-height: 1.55; }
.review-lens { margin: 10px -6px -6px; padding: 18px; border-radius: 16px; background: var(--studio-ink); color: var(--studio-bg); }
.review-lens .panel-label { color: color-mix(in srgb, var(--studio-bg) 58%, transparent); }
.review-lens p { margin: 0; font: 500 19px/1.18 var(--font-editorial); letter-spacing: -.02em; }

/* Icon Lab */
body[data-view="icons"] .control-group--type { display: none; }
.icon-lab { max-width: 1800px; margin: 0 auto; padding: clamp(22px, 3vw, 44px); }
.icon-lab[hidden] { display: none; }
.icon-lab__intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; min-height: 108px; margin-bottom: 24px; }
.icon-lab__intro h1 { max-width: 760px; margin: 8px 0 0; font: 500 clamp(40px, 5vw, 72px)/.92 var(--font-editorial); letter-spacing: -.055em; }
.icon-lab__intro > p { max-width: 650px; margin: 0 0 4px; color: var(--studio-muted); font-size: 16px; line-height: 1.58; text-align: left; }
.icon-standard { display: grid; grid-template-columns: 54px minmax(0,1fr) auto; gap: 16px; align-items: center; margin-bottom: 24px; padding: 18px 20px; border: 1px solid var(--studio-line); border-radius: 20px; background: linear-gradient(105deg, color-mix(in srgb, #155eef 7%, var(--studio-panel)), var(--studio-panel) 52%, color-mix(in srgb, #ed5b55 6%, var(--studio-panel))); box-shadow: 0 18px 55px rgba(23,23,21,.05); }
.icon-standard__mark { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--studio-ink); color: var(--studio-bg); font-size: 22px; }
.icon-standard strong { display: block; margin-bottom: 4px; font-size: 15px; }
.icon-standard p { max-width: 850px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.5; }
.icon-scale { display: flex; align-items: end; gap: 8px; padding-left: 16px; border-left: 1px solid var(--studio-line); }
.icon-scale span { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--studio-line); border-radius: 10px; color: var(--studio-muted); font: 600 9px var(--font-technical); }
.icon-scale span:nth-child(1) { width: 28px; height: 28px; }
.icon-scale span:nth-child(2) { width: 32px; height: 32px; }
.icon-scale span:nth-child(4) { width: 46px; height: 46px; }
.icon-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.icon-toolbar__controls { display: flex; align-items: center; gap: 10px; min-width: 0; }
.icon-style-switch, .icon-filter { display: flex; width: fit-content; padding: 4px; border: 1px solid var(--studio-line); border-radius: 999px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.icon-style-switch { flex: 0 0 auto; }
.icon-filter { overflow-x: auto; scrollbar-width: none; }
.icon-style-switch button, .icon-filter button { min-height: 38px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--studio-muted); font: 700 12px var(--font-modern); white-space: nowrap; cursor: pointer; }
.icon-style-switch button.is-active, .icon-filter button.is-active,
.icon-style-switch button[aria-pressed="true"], .icon-filter button[aria-pressed="true"] { background: var(--studio-ink); color: var(--studio-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--studio-bg) 22%, transparent); }
.icon-style-switch button:focus-visible, .icon-filter button:focus-visible { outline: 3px solid #5a4af4; outline-offset: 2px; }
.icon-filter button span { margin-left: 5px; opacity: .6; font: 600 9px var(--font-technical); }
.icon-toolbar > p { flex: 0 0 auto; margin: 0; color: var(--studio-muted); font: 500 10px var(--font-technical); text-transform: uppercase; letter-spacing: .055em; }
.icon-expression-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--studio-line); border-radius: 16px; background: var(--studio-line); }
.icon-expression-key > div { display: grid; grid-template-columns: 28px 1fr; padding: 13px 16px; background: var(--studio-panel); }
.icon-expression-key span { grid-row: span 2; padding-top: 2px; color: var(--studio-muted); font: 500 9px var(--font-technical); }
.icon-expression-key strong { font-size: 13px; }
.icon-expression-key small { margin-top: 2px; color: var(--studio-muted); font-size: 11px; }
.icon-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.icon-card { overflow: hidden; border: 1px solid var(--studio-line); border-radius: 20px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.icon-card > header { display: grid; grid-template-columns: 28px 1fr; gap: 8px; min-height: 84px; padding: 16px 17px 13px; border-bottom: 1px solid var(--studio-line); }
.icon-card > header > span { padding-top: 3px; color: var(--studio-muted); font: 500 9px var(--font-technical); }
.icon-card > header small { display: block; margin-bottom: 4px; color: var(--studio-muted); font: 600 9px var(--font-technical); text-transform: uppercase; letter-spacing: .07em; }
.icon-card > header h2 { margin: 0; font: 600 17px/1.1 var(--font-modern); letter-spacing: -.015em; }
.icon-comparison { display: grid; grid-template-columns: repeat(3,1fr); min-height: 116px; }
.icon-comparison > div { --icon-knockout: var(--studio-panel); display: grid; place-items: center; align-content: center; gap: 9px; padding: 17px 8px 13px; border-right: 1px solid var(--studio-line); }
.icon-comparison > div:last-child { border-right: 0; }
.icon-comparison small { color: var(--studio-muted); font: 500 8px var(--font-technical); text-transform: uppercase; letter-spacing: .05em; }
.icon-glyph { --icon-knockout: var(--studio-panel); display: grid; place-items: center; width: 46px; height: 46px; color: var(--studio-ink); }
.icon-svg { width: 24px; height: 24px; overflow: visible; }
.icon-svg--line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.icon-svg--filled { fill: currentColor; stroke: none; }
.icon-svg--filled .fill-stroke { fill: none; stroke: currentColor; stroke-width: 3.1; stroke-linecap: round; stroke-linejoin: round; }
.icon-svg--filled .icon-knockout { fill: var(--icon-knockout); }
[data-icon-expression="editorial"] .icon-glyph { color: var(--studio-ink); }
[data-icon-expression="editorial"] .icon-glyph--boxed { --icon-knockout: color-mix(in srgb, var(--studio-ink) 6%, var(--studio-panel)); border-radius: 8px; background: var(--icon-knockout); }
[data-icon-expression="editorial"] .icon-svg--line { stroke-width: 1.45; }
[data-icon-expression="frameset"] .icon-glyph { color: #155eef; }
[data-icon-expression="frameset"] .icon-glyph--boxed { --icon-knockout: color-mix(in srgb, #155eef 8%, var(--studio-panel)); border: 1px solid color-mix(in srgb, #155eef 18%, var(--studio-line)); border-radius: 4px; background: var(--icon-knockout); }
[data-icon-expression="frameset"] .icon-svg--line { stroke-width: 1.55; stroke-linecap: square; stroke-linejoin: miter; }
[data-icon-expression="play"] .icon-glyph { color: color-mix(in srgb, #ed5b55 88%, var(--studio-ink)); }
[data-icon-expression="play"] .icon-glyph--boxed { --icon-knockout: color-mix(in srgb, #ed5b55 10%, var(--studio-panel)); border-radius: 15px; background: var(--icon-knockout); }
[data-icon-expression="play"] .icon-svg--line { stroke-width: 2; }
.icon-method { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 22px; padding: 20px 2px 0; border-top: 1px solid var(--studio-line); }
.icon-method strong { font-size: 14px; }
.icon-method p { max-width: 900px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.55; }
.icon-lab.is-mobile-preview .icon-expression-key { display: none; }
.icon-lab.is-mobile-preview .icon-grid { grid-template-columns: 1fr; max-width: 430px; margin-inline: auto; }

@media (max-width: 1180px) {
  .icon-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .icon-toolbar { align-items: flex-start; flex-direction: column; }
  .icon-toolbar__controls { width: 100%; }
  .icon-filter { flex: 1; }
}

@media (max-width: 880px) {
  .icon-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .icon-standard { grid-template-columns: 50px 1fr; }
  .icon-scale { grid-column: 2; width: fit-content; padding: 12px 0 0; border-top: 1px solid var(--studio-line); border-left: 0; }
  .icon-toolbar__controls { align-items: flex-start; flex-direction: column; }
  .icon-filter { width: 100%; }
}

/* Illustration Lab */
body[data-view="illustrations"] .control-group--type { display: none; }
.illustration-lab { max-width: 1800px; margin: 0 auto; padding: clamp(22px, 3vw, 44px); }
.illustration-lab[hidden] { display: none; }
.illustration-lab__intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; min-height: 108px; margin-bottom: 24px; }
.illustration-lab__intro h1 { max-width: 760px; margin: 8px 0 0; font: 500 clamp(40px, 5vw, 72px)/.92 var(--font-editorial); letter-spacing: -.055em; }
.illustration-lab__intro > p { max-width: 650px; margin: 0 0 4px; color: var(--studio-muted); font-size: 16px; line-height: 1.58; text-align: left; }
.illustration-view-switch { display: flex; width: fit-content; margin: 0 0 24px; padding: 4px; border: 1px solid var(--studio-line); border-radius: 999px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.illustration-view-switch button { min-height: 42px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--studio-muted); font: 700 13px var(--font-modern); cursor: pointer; }
.illustration-view-switch button span { margin-left: 7px; opacity: .6; font: 600 10px var(--font-technical); }
.illustration-view-switch button:is(.is-active,[aria-pressed="true"]) { background: var(--studio-ink); color: var(--studio-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--studio-bg) 22%, transparent); }
.illustration-view-switch button:focus-visible { outline: 3px solid #5a4af4; outline-offset: 2px; }
.illustration-standard {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 15px;
  align-items: center;
  margin-bottom: 32px;
  padding: 18px 20px;
  border: 1px solid var(--studio-line);
  border-radius: 20px;
  background:
    linear-gradient(105deg, color-mix(in srgb, #155eef 7%, var(--studio-panel)), var(--studio-panel) 48%, color-mix(in srgb, #ed5b55 8%, var(--studio-panel)));
  box-shadow: 0 18px 55px rgba(23,23,21,.06);
}
.illustration-standard__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50% 50% 47% 53%; background: var(--studio-ink); color: var(--studio-bg); font: italic 600 22px var(--font-editorial); }
.illustration-standard strong { display: block; margin-bottom: 4px; font-size: 15px; }
.illustration-standard p { max-width: 900px; margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.52; }
.illustration-standard--objects { background: linear-gradient(105deg, color-mix(in srgb, #ffcf35 10%, var(--studio-panel)), var(--studio-panel) 50%, color-mix(in srgb, #16713f 7%, var(--studio-panel))); }
.illustration-lab__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 2px 15px; }
.illustration-lab__heading span, .illustration-lab__heading strong { display: block; }
.illustration-lab__heading span { margin-bottom: 4px; color: var(--studio-muted); font: 500 11px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.illustration-lab__heading strong { font-size: 20px; }
.illustration-lab__heading p { max-width: 600px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.5; text-align: left; }
.illustration-expression-key { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin-bottom: 16px; border: 1px solid var(--studio-line); border-radius: 16px; background: var(--studio-line); }
.illustration-expression-key > div { display: grid; grid-template-columns: 28px 1fr; padding: 13px 16px; background: var(--studio-panel); }
.illustration-expression-key span { grid-row: span 2; padding-top: 2px; color: var(--studio-muted); font: 500 9px var(--font-technical); }
.illustration-expression-key strong { font-size: 13px; }
.illustration-expression-key small { margin-top: 2px; color: var(--studio-muted); font-size: 11px; }
.illustration-grid { display: grid; gap: 18px; }
.illustration-card { overflow: hidden; border: 1px solid var(--studio-line); border-radius: 24px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.illustration-card > header { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: start; gap: 8px 12px; padding: 20px 22px 17px; }
.illustration-card > header > span { padding-top: 5px; color: var(--studio-muted); font: 500 10px var(--font-technical); }
.illustration-card > header h2 { margin: 0 0 5px; font: 500 clamp(23px, 2.4vw, 34px)/1 var(--font-editorial); letter-spacing: -.035em; }
.illustration-card > header p { margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.45; }
.illustration-card > header b { padding: 7px 10px; border: 1px solid var(--studio-line); border-radius: 999px; color: var(--studio-muted); font-size: 10px; white-space: nowrap; }
.illustration-atlas { border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); background: color-mix(in srgb, var(--studio-panel) 86%, var(--studio-bg)); }
.illustration-atlas__scroll { overflow-x: hidden; scrollbar-width: thin; }
.illustration-atlas__scroll:focus-visible { outline: 3px solid #5a4af4; outline-offset: -3px; }
.illustration-atlas__content { min-width: 100%; }
.illustration-atlas__labels { display: grid; grid-template-columns: repeat(3, 1fr); min-width: 100%; border-bottom: 1px solid var(--studio-line); }
.illustration-atlas__labels span { padding: 9px 14px; border-right: 1px solid var(--studio-line); color: var(--studio-muted); font: 600 10px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.illustration-atlas__labels span:last-child { border-right: 0; }
.illustration-atlas img { display: block; width: 100%; height: auto; object-fit: contain; background: #f6f6f2; }
.illustration-card > footer { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; padding: 15px 22px 17px; }
.illustration-card > footer > span { color: var(--studio-muted); font: 500 15px var(--font-technical); }
.illustration-card > footer p { margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.5; }
.illustration-card > footer strong { margin-right: 8px; color: var(--studio-ink); font-size: 11px; text-transform: uppercase; letter-spacing: .055em; }
.object-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.object-card { overflow: hidden; border: 1px solid var(--studio-line); border-radius: 24px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.object-card--featured { grid-column: 1 / -1; border-color: color-mix(in srgb, #16713f 42%, var(--studio-line)); box-shadow: 0 24px 70px color-mix(in srgb, #ffcf35 12%, transparent); }
.object-card > header { display: grid; grid-template-columns: 30px minmax(0,1fr) auto; gap: 10px 12px; min-height: 128px; padding: 20px 22px 17px; }
.object-card > header > span { padding-top: 3px; color: var(--studio-muted); font: 500 10px var(--font-technical); }
.object-card > header small { display: block; margin-bottom: 7px; color: var(--studio-muted); font: 600 10px var(--font-technical); text-transform: uppercase; letter-spacing: .075em; }
.object-card > header h2 { margin: 0 0 7px; font: 500 clamp(23px, 2.3vw, 32px)/1 var(--font-editorial); letter-spacing: -.035em; }
.object-card > header p { max-width: 620px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.48; }
.object-card > header b { align-self: start; padding: 7px 10px; border-radius: 999px; background: #16713f; color: #fffbd8; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; }
.object-atlas { overflow: hidden; border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); background: #faf9f5; }
.object-atlas img { display: block; width: 100%; height: auto; object-fit: contain; }
.object-card > footer { display: grid; grid-template-columns: 80px 1fr; gap: 12px; padding: 14px 22px 17px; }
.object-card > footer span { color: var(--studio-muted); font: 600 10px var(--font-technical); text-transform: uppercase; letter-spacing: .06em; }
.object-card > footer p { margin: 0; color: var(--studio-muted); font-size: 12px; line-height: 1.45; }
.illustration-method { display: grid; grid-template-columns: 240px 1fr; gap: 28px; margin-top: 20px; padding: 20px 2px 0; border-top: 1px solid var(--studio-line); }
.illustration-method strong { font-size: 14px; }
.illustration-method p { max-width: 900px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.55; }
.illustration-lab.is-mobile-preview .illustration-expression-key { display: none; }
.illustration-lab.is-mobile-preview .illustration-card { max-width: 430px; margin-inline: auto; }
.illustration-lab.is-mobile-preview .illustration-atlas__scroll { overflow-x: auto; scroll-snap-type: x mandatory; }
.illustration-lab.is-mobile-preview .illustration-atlas__content { width: 900px; }
.illustration-lab.is-mobile-preview .illustration-atlas__labels { position: sticky; left: 0; width: 900px; }
.illustration-lab.is-mobile-preview .illustration-atlas img { width: 900px; max-width: none; height: auto; }
.illustration-lab.is-mobile-preview .object-grid { grid-template-columns: 1fr; }
.illustration-lab.is-mobile-preview .object-card, .illustration-lab.is-mobile-preview .object-card--featured { grid-column: auto; max-width: 430px; margin-inline: auto; }
.illustration-lab.is-mobile-preview .object-card > header { grid-template-columns: 28px 1fr; }
.illustration-lab.is-mobile-preview .object-card > header b { grid-column: 2; width: fit-content; }

/* Color Lab */
body[data-view="color"] .control-group--type,
body[data-view="color"] .control-group--viewport,
body[data-view="color"] .control-group--motion { display: none; }
.color-lab { max-width: 1800px; margin: 0 auto; padding: clamp(22px, 3vw, 44px); }
.color-lab[hidden] { display: none; }
.color-lab__intro { display: flex; align-items: end; justify-content: space-between; gap: 32px; min-height: 94px; margin-bottom: 22px; }
.color-lab__intro h1 { margin: 8px 0 0; font: 500 clamp(34px, 4vw, 58px)/.96 var(--font-editorial); letter-spacing: -.045em; }
.color-lab__intro > p { max-width: 610px; margin: 0 0 3px; color: var(--studio-muted); font-size: 16px; line-height: 1.55; text-align: left; }
.color-standard { display: grid; grid-template-columns: minmax(220px,.55fr) 1fr; gap: 30px; align-items: center; margin-bottom: 30px; padding: 18px 20px; border: 1px solid var(--studio-line); border-radius: 18px; background: var(--studio-panel); }
.color-standard > div { display: flex; align-items: center; gap: 11px; }
.color-standard > div > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: var(--studio-ink); color: var(--studio-bg); font: 600 13px var(--font-technical); }
.color-standard strong { font-size: 15px; }
.color-standard p { margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.5; }
.color-lab__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 2px 15px; }
.color-lab__heading span, .color-lab__heading strong { display: block; }
.color-lab__heading span { margin-bottom: 4px; color: var(--studio-muted); font: 500 11px var(--font-technical); text-transform: uppercase; letter-spacing: .08em; }
.color-lab__heading strong { font-size: 20px; }
.color-lab__heading p { margin: 0; color: var(--studio-muted); font-size: 13px; }
.color-lab__heading--palettes { margin-top: 30px; }
.action-role-board { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); overflow:hidden; border:1px solid var(--studio-line); border-radius:18px; background:var(--studio-line); gap:1px; }
.action-role { min-width:0; padding:14px; background:var(--studio-panel); }
.action-role__swatch { display:grid; place-items:center; min-height:72px; margin-bottom:12px; border:1px solid var(--action-border); border-radius:10px; background:var(--action-bg); color:var(--action-fg); }
.action-role__swatch span { font-size:12px; font-weight:800; }
.action-role--focus .action-role__swatch { outline:3px solid var(--action-border); outline-offset:-6px; }
.action-role strong, .action-role small, .action-role code { display:block; }
.action-role strong { font-size:13px; }
.action-role small { min-height:34px; margin-top:3px; color:var(--studio-muted); font-size:12px; line-height:1.4; }
.action-role code { min-height:34px; margin-top:8px; color:var(--studio-muted); font:500 12px/1.4 var(--font-technical); overflow-wrap:anywhere; }
.action-role-board[data-expression="frameset"], .action-role-board[data-expression="frameset"] .action-role__swatch { border-radius:0; }
.action-role-board[data-expression="play"] .action-role__swatch { border-radius:16px; }
.palette-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.palette-card { overflow: hidden; border: 1px solid var(--studio-line); border-radius: 24px; background: var(--studio-panel); box-shadow: var(--studio-shadow); }
.palette-card__header { display: flex; align-items: start; justify-content: space-between; gap: 18px; padding: 22px 22px 10px; }
.palette-card__header span { color: var(--studio-muted); font: 500 11px var(--font-technical); text-transform: uppercase; letter-spacing: .07em; }
.palette-card__header h2 { margin: 7px 0 0; font: 500 27px/1 var(--font-editorial); letter-spacing: -.035em; }
.palette-card__badges { display: flex; flex-wrap: wrap; justify-content: end; gap: 6px; }
.palette-card__badges b, .palette-card__badges em { padding: 6px 8px; border-radius: 999px; font: 700 10px var(--font-modern); font-style: normal; white-space: nowrap; }
.palette-card__badges b { background: var(--studio-ink); color: var(--studio-bg); }
.palette-card__badges em { border: 1px solid var(--studio-line); color: var(--studio-muted); }
.palette-card__note { min-height: 60px; margin: 0; padding: 0 22px 16px; color: var(--studio-muted); font-size: 14px; line-height: 1.5; }
.palette-swatches { display: grid; grid-template-columns: repeat(6,1fr); border-top: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); }
.palette-swatches > div { min-width: 0; padding: 10px 8px 11px; border-right: 1px solid var(--studio-line); }
.palette-swatches > div:last-child { border-right: 0; }
.palette-swatches > div > span { display: block; height: 38px; margin-bottom: 8px; border: 1px solid rgba(127,127,127,.22); border-radius: 8px; }
.palette-swatches strong, .palette-swatches small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.palette-swatches strong { font-size: 11px; }
.palette-swatches small { margin-top: 3px; color: var(--studio-muted); font: 500 9px var(--font-technical); text-transform: uppercase; }
.palette-specimen { margin: 18px; padding: 20px; border: 1px solid var(--p-border); border-radius: 16px; background: var(--p-canvas); color: var(--p-text); font-family: var(--selected-font); }
.palette-specimen > header { display: flex; align-items: center; gap: 9px; }
.palette-specimen > header > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--p-accent); color: var(--p-on-accent); font: 700 10px var(--font-technical); }
.palette-specimen > header strong { font-size: 14px; }
.palette-specimen > header small { margin-left: auto; padding: 5px 7px; border-radius: 999px; background: var(--p-success-bg); color: var(--p-success-text); font-size: 11px; font-weight: 700; }
.palette-specimen h3 { max-width: 22ch; margin: 20px 0 8px; font: 600 22px/1.1 var(--selected-display); letter-spacing: -.025em; }
.palette-specimen p { max-width: 56ch; margin: 0; color: var(--p-muted); font-size: 14px; line-height: 1.55; }
.palette-specimen > button { min-height: 44px; margin-top: 18px; padding: 0 16px; border: 0; border-radius: 999px; background: var(--p-accent); color: var(--p-on-accent); font-size: 13px; font-weight: 800; }
.palette-specimen > button:focus-visible { outline-color: var(--p-focus); }
.palette-statuses { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.palette-statuses span { padding: 6px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.palette-statuses span:nth-child(1) { background: var(--p-success-bg); color: var(--p-success-text); }
.palette-statuses span:nth-child(2) { background: var(--p-warning-bg); color: var(--p-warning-text); }
.palette-statuses span:nth-child(3) { background: var(--p-danger-bg); color: var(--p-danger-text); }
.palette-statuses span:nth-child(4) { background: var(--p-info-bg); color: var(--p-info-text); }
.contrast-checks { display: grid; grid-template-columns: repeat(3,1fr); margin: 0 18px 18px; border: 1px solid var(--studio-line); border-radius: 13px; }
.contrast-checks > div { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; min-width: 0; padding: 10px; border-right: 1px solid var(--studio-line); border-bottom: 1px solid var(--studio-line); }
.contrast-checks > div:nth-child(3n) { border-right: 0; }
.contrast-checks > div:nth-last-child(-n+3) { border-bottom: 0; }
.contrast-checks span { overflow: hidden; color: var(--studio-muted); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.contrast-checks strong { grid-column: 1; font: 600 12px var(--font-technical); }
.contrast-checks small { grid-column: 2; grid-row: 1 / span 2; align-self: center; color: #1d6b45; font-size: 10px; font-weight: 800; text-transform: uppercase; }
body[data-theme="dark"] .contrast-checks small { color: #8addaf; }
.palette-card__footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; border-top: 1px solid var(--studio-line); }
.palette-card__footer > div > span { display: block; margin-bottom: 7px; color: var(--studio-muted); font: 500 10px var(--font-technical); text-transform: uppercase; letter-spacing: .05em; }
.paired-strip { display: flex; width: 138px; height: 15px; overflow: hidden; border: 1px solid var(--studio-line); border-radius: 999px; }
.paired-strip i { flex: 1; }
.palette-card__footer button { min-height: 38px; padding: 0 13px; border: 1px solid var(--studio-line); border-radius: 999px; background: transparent; color: var(--studio-ink); font-size: 12px; font-weight: 800; }
.palette-card__footer button[aria-pressed="true"] { background: var(--studio-ink); color: var(--studio-bg); }
.palette-grid[data-expression="editorial"] .palette-specimen { border-radius: 8px; }
.palette-grid[data-expression="editorial"] .palette-specimen > header > span { border-radius: 50%; }
.palette-grid[data-expression="frameset"] .palette-card,
.palette-grid[data-expression="frameset"] .palette-specimen,
.palette-grid[data-expression="frameset"] .palette-specimen > header > span,
.palette-grid[data-expression="frameset"] .palette-specimen > header small,
.palette-grid[data-expression="frameset"] .palette-specimen > button,
.palette-grid[data-expression="frameset"] .palette-statuses span { border-radius: 0; }
.palette-grid[data-expression="frameset"] .palette-specimen { box-shadow: 0 8px 24px -20px color-mix(in srgb,var(--p-accent) 24%,transparent),0 1px 2px color-mix(in srgb,var(--p-text) 5%,transparent); }
.palette-grid[data-expression="play"] .palette-specimen { border-color: color-mix(in srgb,var(--p-accent) 14%,var(--p-canvas)); border-radius: 20px; }
.palette-grid[data-expression="play"] .palette-specimen > header > span { border-radius: 50%; }
.color-method { display: grid; grid-template-columns: 220px 1fr; gap: 28px; margin-top: 20px; padding: 20px 2px 0; border-top: 1px solid var(--studio-line); }
.color-method strong { font-size: 14px; }
.color-method p { max-width: 850px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.55; }

@keyframes component-spin { to { transform: rotate(360deg); } }

@keyframes line-in { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes frame-in { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes joy-float { 0%,100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -10px; rotate: 3deg; } }
@keyframes pop { 0% { transform: scale(.8); } 60% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes motion-demo { 0% { transform: translateX(-110%); } 55%,100% { transform: translateX(290%); } }

body[data-motion="reduced"] *,
body[data-motion="reduced"] *::before,
body[data-motion="reduced"] *::after {
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  scroll-behavior: auto !important;
  transition-duration: .001ms !important;
}

@container (max-width: 620px) {
  .specimen-nav { grid-template-columns: 1fr auto; min-height: 64px; }
  .specimen-links { display: none; }
  .specimen-hero { grid-template-columns: 1fr; }
  body[data-expression="play"] .specimen-hero { grid-template-columns: 1fr; padding: 12px; }
  body[data-expression="play"] .hero-copy { padding-left: calc(var(--page-x) - 12px); padding-right: calc(var(--page-x) - 12px); }
  body[data-expression="play"] .hero-art { min-height: 430px; }
  .hero-copy { min-height: 450px; padding-top: 62px; padding-bottom: 52px; }
  .hero-copy, .hero-copy h2, .hero-deck { min-width: 0; max-width: 100%; }
  .hero-copy h2 { font-size: clamp(36px, 11.2cqw, 52px); line-height: 1; overflow-wrap: normal; word-break: normal; }
  .hero-deck { font-size: 16px; }
  .hero-actions { align-items: stretch; flex-direction: column; width: 100%; }
  .primary-action, .secondary-action { width: 100%; min-height: 49px; }
  .hero-art { min-height: 430px; }
  .art-frame--one { top: 10%; left: 8%; width: 65%; height: 58%; }
  .art-frame--two { right: 6%; bottom: 9%; width: 52%; height: 43%; }
  .joy-mark { top: 8%; right: 7%; width: 54px; height: 54px; }
  .art-caption { left: 9%; right: auto; bottom: 5%; max-width: 150px; }
  .section-heading { grid-template-columns: 1fr; }
  .section-heading h3 { margin-bottom: 20px; }
  .section-heading > p:last-child { margin-bottom: 0; }
  .collection-grid { grid-template-columns: 1fr; }
  .collection-card--large { grid-row: auto; }
  .collection-card--large .card-visual { min-height: 400px; }
  .card-visual { min-height: 330px; }
  .collection-card--note { min-height: 260px; margin-top: 8px; }
  .specimen-footer { grid-template-columns: 1fr auto; padding-block: 26px; }
  .specimen-footer p { display: none; }
}

@media (max-width: 1160px) {
  .studio-principle { display: none; }
  .studio-header { grid-template-columns: minmax(135px, 1fr) minmax(560px, auto) auto; gap: 16px; }
  .control-deck { flex-wrap: wrap; align-items: end; }
  .control-group--expression { flex-basis: 100%; }
  .workspace { grid-template-columns: 1fr; }
  .system-panel { position: static; display: grid; grid-template-columns: repeat(3, 1fr); }
  .system-section { border-right: 1px solid var(--studio-line); }
  .principle-card { grid-column: span 2; }
  .component-lab { grid-template-columns: 200px minmax(0, 1fr); }
  .contract-panel { position: static; grid-column: 2; }
  .palette-grid { grid-template-columns: 1fr; }
  .action-role-board { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (max-width: 940px) {
  .studio-header { min-height: 76px; grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-navigation { display: none; }
  .mobile-nav-trigger {
    justify-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: 10px;
    width: min(360px, 100%);
    min-width: 0;
    min-height: 48px;
    padding: 7px 12px;
    border: 1px solid var(--studio-line);
    border-radius: 15px;
    background: var(--studio-control);
    text-align: left;
  }
.mobile-nav-trigger > span { color: var(--studio-muted); font: 600 12px/1.25 var(--font-technical); letter-spacing: .08em; text-transform: uppercase; }
  .mobile-nav-trigger > strong { min-width: 0; overflow: hidden; font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-nav-trigger svg { grid-column: 2; grid-row: 1 / span 2; width: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  .component-lab { grid-template-columns: 1fr; }
  .component-nav { position: static; }
  .component-nav nav { display: flex; overflow-x: auto; scrollbar-width: thin; }
  .component-nav nav button { flex: 0 0 150px; }
  .component-nav__heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
  .component-nav__heading p { max-width: 230px; text-align: left; }
  .component-comparison { overflow-x: auto; grid-template-columns: repeat(3, minmax(290px, 1fr)); padding-bottom: 5px; scroll-snap-type: x proximity; }
  .component-expression { scroll-snap-align: start; }
  .contract-panel { grid-column: 1; }
}

.component-lab.is-mobile-preview .component-comparison {
  display: flex;
  overflow-x: auto;
  padding: 12px 12px 17px;
  border: 1px solid var(--studio-line);
  border-radius: 24px;
  background:
    linear-gradient(var(--studio-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--studio-line) 1px, transparent 1px),
    color-mix(in srgb, var(--studio-panel) 60%, transparent);
  background-size: 24px 24px;
  scroll-snap-type: x mandatory;
}
.component-lab.is-mobile-preview .component-expression { flex: 0 0 min(390px, calc(100vw - 56px)); scroll-snap-align: center; }

@media (max-width: 720px) {
  .studio-header { min-height: 66px; padding-inline: 16px; }
  .studio-mark small { display: none; }
  .control-deck { position: sticky; top: var(--studio-header-sticky-offset); max-height: calc(100dvh - var(--studio-header-sticky-offset)); overflow-y: auto; padding: 14px 16px; gap: 10px; }
  .control-group { flex: 1 1 150px; }
  .control-group--expression { overflow: visible; flex-basis: 100%; }
  .control-group--expression > .segmented { display: none; }
  .expression-select-wrap { display: block; }
  .expression-select-wrap select { width: 100%; }
  .select-wrap select { width: 100%; min-width: 0; }
  .control-group--compact { flex: 0 0 auto; }
  .workspace { padding: 22px 10px; }
  .preview-meta { align-items: start; flex-direction: column; gap: 10px; padding-inline: 8px; }
  .preview-meta p { text-align: left; }
  .preview-stage { min-height: 700px; border-radius: 20px; padding: 45px 8px 8px; }
  .system-panel { grid-template-columns: 1fr 1fr; }
  .system-section { min-width: 0; }
  .system-section--identity { grid-column: span 2; }
  .principle-card { grid-column: span 2; }
  .toast { right: 14px; bottom: 14px; }
  .component-mode-label, .illustration-mode-label, .icon-mode-label { flex-basis: 100%; }
  .component-lab { padding: 22px 10px; }
  .component-nav { border-radius: 20px; }
  .component-nav__heading { display: block; }
  .component-nav__heading p { margin-top: 7px; text-align: left; }
  .component-canvas__header { align-items: start; flex-direction: column; gap: 8px; padding-inline: 8px; }
  .component-canvas__header > p { text-align: left; }
  .component-comparison { grid-template-columns: repeat(3, minmax(310px, 1fr)); }
  .component-demo-slot { min-height: 560px; }
  .contract-panel { border-radius: 20px; }
  .icon-lab { padding: 24px 12px; }
  .icon-lab__intro { align-items: start; flex-direction: column; gap: 12px; }
  .icon-lab__intro > p { text-align: left; }
  .icon-standard { grid-template-columns: 44px 1fr; padding: 15px; }
  .icon-standard__mark { width: 42px; height: 42px; }
  .icon-toolbar__controls { width: 100%; }
  .icon-style-switch { width: 100%; }
  .icon-style-switch button { flex: 1; }
  .icon-expression-key { overflow-x: auto; grid-template-columns: repeat(3, 220px); }
  .icon-grid { grid-template-columns: 1fr; }
  .icon-method { grid-template-columns: 1fr; gap: 8px; }
  .illustration-lab { padding: 24px 12px; }
  .illustration-lab__intro { align-items: start; flex-direction: column; gap: 12px; }
  .illustration-lab__intro > p { text-align: left; }
  .illustration-standard { grid-template-columns: 46px 1fr; padding: 15px; }
  .illustration-standard__mark { width: 44px; height: 44px; }
  .illustration-lab__heading { align-items: start; flex-direction: column; gap: 7px; }
  .illustration-lab__heading p { text-align: left; }
  .illustration-expression-key { overflow-x: auto; grid-template-columns: repeat(3, 220px); }
  .illustration-card > header { grid-template-columns: 28px 1fr; padding: 17px 16px 14px; }
  .illustration-card > header b { grid-column: 2; width: fit-content; }
  .illustration-atlas__scroll { overflow-x: auto; }
  .illustration-atlas__content { width: 840px; }
  .illustration-atlas img { width: 840px; max-width: none; }
  .illustration-card > footer { padding-inline: 16px; }
  .illustration-view-switch { width: 100%; }
  .illustration-view-switch button { flex: 1; padding-inline: 10px; }
  .object-grid { grid-template-columns: 1fr; }
  .object-card--featured { grid-column: auto; }
  .object-card > header { grid-template-columns: 28px 1fr; min-height: 0; padding: 17px 16px 14px; }
  .object-card > header b { grid-column: 2; width: fit-content; }
  .object-card > footer { grid-template-columns: 70px 1fr; padding-inline: 16px; }
  .illustration-method { grid-template-columns: 1fr; gap: 8px; }
  .color-lab { padding: 24px 12px; }
  .color-lab__intro { align-items: start; flex-direction: column; gap: 12px; }
  .color-lab__intro > p { text-align: left; }
  .color-standard { grid-template-columns: 1fr; gap: 12px; }
  .color-lab__heading { align-items: start; flex-direction: column; gap: 7px; }
  .action-role-board { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .palette-card__header { flex-direction: column; }
  .palette-card__badges { justify-content: start; }
  .palette-card__note { min-height: 0; }
  .palette-swatches { grid-template-columns: repeat(3,1fr); }
  .palette-swatches > div { border-bottom: 1px solid var(--studio-line); }
  .palette-swatches > div:nth-child(3n) { border-right: 0; }
  .palette-swatches > div:nth-last-child(-n+3) { border-bottom: 0; }
  .contrast-checks { grid-template-columns: repeat(2,1fr); }
  .contrast-checks > div, .contrast-checks > div:nth-child(3n), .contrast-checks > div:nth-last-child(-n+3) { border-right: 0; border-bottom: 1px solid var(--studio-line); }
  .contrast-checks > div:nth-child(odd) { border-right: 1px solid var(--studio-line); }
  .contrast-checks > div:nth-last-child(-n+2) { border-bottom: 0; }
  .color-method { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 540px) {
  .studio-header { gap: 9px; }
  .studio-mark > span:last-child { display: none; }
  .mobile-nav-trigger { width: 100%; }
  .mobile-nav-categories { grid-template-columns: repeat(2, minmax(0, 1fr)); border-radius: 22px; }
  .icon-button { width: 35px; height: 35px; }
  .palette-specimen { margin: 12px; padding: 16px; }
  .action-role-board { grid-template-columns:1fr; }
  .contrast-checks { margin: 0 12px 12px; }
  .palette-card__footer { align-items: stretch; flex-direction: column; }
  .paired-strip { width: 100%; }
}

/* Typography Lab */
body[data-view="typography"] .control-group--motion { display: none; }
body[data-expression="editorial"] { --type-accent: var(--studio-ink); --type-on-accent: var(--studio-bg); --type-accent-soft: color-mix(in srgb, var(--studio-ink) 6%, var(--studio-panel)); --type-radius: 18px; }
body[data-expression="frameset"] { --type-accent: #155eef; --type-on-accent: #fff; --type-accent-soft: color-mix(in srgb, #155eef 8%, var(--studio-panel)); --type-radius: 5px; }
body[data-expression="play"] { --type-accent: #b93430; --type-on-accent: #fff; --type-accent-soft: color-mix(in srgb, #ed5b55 10%, var(--studio-panel)); --type-radius: 26px; }
body[data-theme="dark"][data-expression="frameset"] { --type-accent: #7da5ff; --type-on-accent: #07142b; }
body[data-theme="dark"][data-expression="play"] { --type-accent: #ff8b84; --type-on-accent: #11110f; }
.typography-lab { max-width: 1800px; margin: 0 auto; padding: clamp(22px, 3vw, 44px); font-family: var(--selected-font); }
.typography-lab[hidden] { display: none; }
.typography-lab__intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; min-height: 108px; margin-bottom: 24px; }
.typography-lab__intro h1 { max-width: 840px; margin: 8px 0 0; font: 600 clamp(42px, 5vw, 74px)/.95 var(--selected-display); letter-spacing: -.05em; }
.typography-lab__intro > p { max-width: 670px; margin: 0 0 4px; color: var(--studio-muted); font-size: 16px; line-height: 1.58; text-align: left; }
.type-lab__summary { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, .8fr); gap: 18px; margin-bottom: 18px; }
.type-system-card, .type-fit-card, .type-scale-card, .type-context-column { border: 1px solid var(--studio-line); border-radius: var(--type-radius); background: var(--studio-panel); box-shadow: 0 20px 60px rgba(23,23,21,.06); }
.type-system-card { display: grid; grid-template-columns: 54px minmax(0,1.3fr) minmax(300px,1fr); gap: 18px; align-items: start; padding: 26px; }
.type-system-card__number { display: grid; place-items: center; width: 44px; height: 44px; border-radius: calc(var(--type-radius) * .65); background: var(--type-accent); color: var(--type-on-accent); font: 600 13px var(--font-technical); }
.type-system-card__main > span, .type-fit-card__label, .type-section-heading span { color: var(--type-accent); font: 600 12px/1.35 var(--font-technical); letter-spacing: .075em; text-transform: uppercase; }
.type-system-card__main h2 { margin: 7px 0 8px; font: 600 clamp(28px, 3vw, 42px)/1 var(--selected-display); letter-spacing: -.035em; }
.type-system-card__main p { max-width: 680px; margin: 0; color: var(--studio-muted); font-size: 15px; line-height: 1.55; }
.type-system-card dl { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 20px; margin: 0; }
.type-system-card dl div { min-width: 0; padding-top: 10px; border-top: 1px solid var(--studio-line); }
.type-system-card dt { margin-bottom: 4px; color: var(--studio-muted); font: 500 10px var(--font-technical); letter-spacing: .04em; text-transform: uppercase; }
.type-system-card dd { margin: 0; font-size: 13px; font-weight: 600; line-height: 1.4; }
.type-fit-card { padding: 26px; background: var(--type-accent-soft); }
.type-fit-card > strong { display: block; margin: 11px 0 8px; font: 600 28px/1 var(--selected-display); letter-spacing: -.03em; }
.type-fit-card > p { margin: 0 0 22px; color: var(--studio-muted); font-size: 14px; line-height: 1.5; }
.type-fit-card__map { display: grid; gap: 7px; }
.type-fit-card__map div { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 34px; padding: 0 10px; border: 1px solid transparent; border-radius: calc(var(--type-radius) * .55); color: var(--studio-muted); font-size: 12px; }
.type-fit-card__map div.is-current { border-color: color-mix(in srgb, var(--type-accent) 22%, var(--studio-line)); background: var(--studio-panel); color: var(--studio-ink); }
.type-fit-card__map span { text-transform: capitalize; }
.type-fit-card__map b { font-size: 11px; }
.type-lab__body { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(330px, .65fr); gap: 18px; align-items: start; }
.type-scale-card, .type-context-column { overflow: hidden; }
.type-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; min-height: 78px; padding: 18px 22px; border-bottom: 1px solid var(--studio-line); }
.type-section-heading span, .type-section-heading strong { display: block; }
.type-section-heading strong { margin-top: 4px; font-size: 16px; }
.type-section-heading p { margin: 0; color: var(--studio-muted); font: 500 12px/1.4 var(--font-technical); }
.type-role { display: grid; grid-template-columns: 155px minmax(0,1fr) 94px; gap: 22px; align-items: center; min-height: 86px; padding: 18px 22px; border-bottom: 1px solid var(--studio-line); }
.type-role:last-child { border-bottom: 0; }
.type-role__name span, .type-role__name small, .type-role__metric strong, .type-role__metric small { display: block; }
.type-role__name span { font-size: 12px; font-weight: 700; }
.type-role__name small { margin-top: 4px; color: var(--studio-muted); font: 500 10px var(--font-technical); text-transform: uppercase; letter-spacing: .05em; }
.type-role > p { overflow-wrap: anywhere; margin: 0; }
.type-role__metric { text-align: right; }
.type-role__metric strong { font: 600 12px var(--font-technical); }
.type-role__metric small { margin-top: 4px; color: var(--studio-muted); font: 500 10px var(--font-technical); }
.type-role--label > p { text-transform: uppercase; }
.type-role--numeric > p { font-variant-numeric: tabular-nums lining-nums; }
.type-context-column > #typeContextSamples { display: grid; gap: 12px; padding: 14px; }
.type-context { padding: 20px; border: 1px solid var(--studio-line); border-radius: calc(var(--type-radius) * .78); background: color-mix(in srgb, var(--studio-panel) 88%, var(--studio-bg)); }
.type-context > span, .type-context > header span { color: var(--type-accent); font: 600 10px var(--font-technical); letter-spacing: .065em; text-transform: uppercase; }
.type-context--product h3 { margin: 20px 0 10px; font: 600 32px/1.04 var(--selected-display); letter-spacing: -.035em; }
.type-context--product p { margin: 0; color: var(--studio-muted); font-size: 16px; line-height: 1.58; }
.type-context--product button { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; margin-top: 22px; padding: 0 15px; border: 0; border-radius: calc(var(--type-radius) * .58); background: var(--type-accent); color: var(--type-on-accent); font-family: var(--selected-ui); font-size: 14px; font-weight: 700; }
.type-context--product button i { font-style: normal; }
.type-context--chat { display: grid; gap: 10px; }
.type-chat-message { padding: 14px 15px; border-radius: calc(var(--type-radius) * .7); }
.type-chat-message--user { margin-top: 10px; background: var(--type-accent-soft); }
.type-chat-message--assistant { border-left: 2px solid var(--type-accent); }
.type-chat-message small { display: block; margin-bottom: 5px; font-family: var(--selected-ui); font-size: 11px; font-weight: 700; }
.type-chat-message p { margin: 0; font-size: 16px; line-height: 1.62; }
.type-chat-message footer { margin-top: 12px; color: var(--studio-muted); font: 500 11px var(--font-technical); }
.type-context--data header { display: flex; align-items: center; justify-content: space-between; }
.type-context--data header b { padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, #16713f 12%, var(--studio-panel)); color: #16713f; font-size: 10px; }
body[data-theme="dark"] .type-context--data header b { color: #76d59d; }
.type-data-number { display: block; margin: 18px 0 1px; font: 600 38px/1 var(--selected-ui); letter-spacing: -.035em; font-variant-numeric: tabular-nums lining-nums; }
.type-context--data > small { color: var(--studio-muted); font-size: 12px; }
.type-context--data dl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0; }
.type-context--data dl div { padding-top: 10px; border-top: 1px solid var(--studio-line); }
.type-context--data dt { color: var(--studio-muted); font-size: 11px; }
.type-context--data dd { margin: 3px 0 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.type-context--data code { display: block; overflow-wrap: anywhere; padding: 10px; border-radius: calc(var(--type-radius) * .45); background: var(--type-accent-soft); font: 500 12px/1.4 var(--font-technical); }
.type-method { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 18px; padding: 20px 2px 0; border-top: 1px solid var(--studio-line); }
.type-method strong { font-size: 14px; }
.type-method p { max-width: 1080px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.55; }
.typography-lab.is-mobile-preview { max-width: 470px; }
.typography-lab.is-mobile-preview .typography-lab__intro, .typography-lab.is-mobile-preview .type-lab__summary, .typography-lab.is-mobile-preview .type-lab__body { grid-template-columns: 1fr; }
.typography-lab.is-mobile-preview .typography-lab__intro { display: block; }
.typography-lab.is-mobile-preview .typography-lab__intro > p { margin-top: 16px; text-align: left; }
.typography-lab.is-mobile-preview .type-system-card { grid-template-columns: 44px 1fr; padding: 20px; }
.typography-lab.is-mobile-preview .type-system-card dl { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
.typography-lab.is-mobile-preview .type-role { grid-template-columns: 1fr auto; gap: 10px; }
.typography-lab.is-mobile-preview .type-role > p { grid-column: 1 / -1; grid-row: 2; }
.typography-lab.is-mobile-preview .type-role__metric { grid-column: 2; grid-row: 1; }

@media (max-width: 1120px) {
  .type-lab__summary, .type-lab__body { grid-template-columns: 1fr; }
  .type-context-column > #typeContextSamples { grid-template-columns: repeat(3,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .typography-lab { padding: 24px 12px; }
  .typography-lab__intro { align-items: start; flex-direction: column; gap: 12px; }
  .typography-lab__intro > p { text-align: left; }
  .type-system-card { grid-template-columns: 44px 1fr; padding: 20px; }
  .type-system-card dl { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .type-role { grid-template-columns: 1fr auto; gap: 10px; padding: 16px; }
  .type-role > p { grid-column: 1 / -1; grid-row: 2; }
  .type-role__metric { grid-column: 2; grid-row: 1; }
  .type-context-column > #typeContextSamples { grid-template-columns: 1fr; }
  .type-method { grid-template-columns: 1fr; gap: 8px; }
}

/* Text Behavior Lab */
body[data-view="text"] .control-group--motion { display: none; }
.text-behavior-lab { --text-test-scale: 1; max-width: 1800px; margin: 0 auto; padding: clamp(22px, 3vw, 44px); font-family: var(--selected-font); }
.text-behavior-lab[hidden] { display: none; }
.text-behavior-lab[data-text-scale="200"] { --text-test-scale: 2; }
.text-behavior-lab[data-text-font="fallback"] {
  --selected-font: Arial, "Segoe UI", sans-serif;
  --selected-display: Georgia, "Times New Roman", serif;
  --selected-ui: Arial, "Segoe UI", sans-serif;
  --font-technical: "Courier New", Courier, monospace;
}
.text-behavior-lab__intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; min-height: 108px; margin-bottom: 24px; }
.text-behavior-lab__intro h1 { max-width: 840px; margin: 8px 0 0; font: 600 clamp(42px, 5vw, 74px)/.95 var(--selected-display); letter-spacing: -.05em; text-wrap: balance; }
.text-behavior-lab__intro > p { max-width: 670px; margin: 0 0 4px; color: var(--studio-muted); font-size: 16px; line-height: 1.58; text-align: left; }
.text-audit { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--studio-line); border-radius: var(--type-radius); background: var(--studio-line); gap: 1px; }
.text-audit article { display: grid; grid-template-columns: 28px 1fr; padding: 16px 18px; background: var(--studio-panel); }
.text-audit span { grid-row: span 2; padding-top: 2px; color: var(--studio-muted); font: 500 12px/1.35 var(--font-technical); }
.text-audit strong { font-size: 13px; }
.text-audit p { margin: 4px 0 0; color: var(--studio-muted); font-size: 12px; line-height: 1.45; }
.text-stress-toolbar { display: flex; align-items: end; gap: 22px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--studio-line); border-radius: var(--type-radius); background: var(--studio-panel); box-shadow: 0 16px 50px rgba(23,23,21,.05); }
.text-stress-toolbar > div > span { display: block; margin: 0 0 6px 4px; color: var(--studio-muted); font: 600 12px/1.35 var(--font-technical); letter-spacing: .06em; text-transform: uppercase; }
.text-stress-switch { display: flex; padding: 3px; border: 1px solid var(--studio-line); border-radius: 999px; background: var(--studio-control); }
.text-stress-switch button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--studio-muted); font-size: 12px; font-weight: 700; }
.text-stress-switch button:is(.is-active,[aria-pressed="true"]) { background: var(--type-accent); color: var(--type-on-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-on-accent) 24%, transparent); }
.text-stress-toolbar > p { margin: 0 0 9px auto; color: var(--studio-muted); font: 500 12px/1.4 var(--font-technical); text-align: left; }
.text-rule-banner { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: 18px; padding: 17px 20px; border: 1px solid color-mix(in srgb, var(--type-accent) 18%, var(--studio-line)); border-radius: var(--type-radius); background: var(--type-accent-soft); }
.text-rule-banner__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: calc(var(--type-radius) * .7); background: var(--type-accent); color: var(--type-on-accent); font: 600 16px var(--selected-display); }
.text-rule-banner strong { display: block; margin-bottom: 3px; font-size: 15px; }
.text-rule-banner p { max-width: 1020px; margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.5; }
.text-specimen-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; font-size: calc(16px * var(--text-test-scale)); }
.text-behavior-lab[data-text-scale="200"] .text-specimen-grid { grid-template-columns: 1fr; }
.text-specimen { overflow: hidden; min-width: 0; border: 1px solid var(--studio-line); border-radius: var(--type-radius); background: var(--studio-panel); box-shadow: 0 20px 60px rgba(23,23,21,.06); }
.text-specimen > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; padding: 0 18px; border-bottom: 1px solid var(--studio-line); font-size: max(.72em,11px); }
.text-specimen > header span { color: var(--type-accent); font-family: var(--font-technical); font-size: .9em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.text-specimen > header b { padding: .55em .75em; border-radius: 999px; background: var(--type-accent-soft); font-size: .85em; white-space: nowrap; }
.text-specimen > footer { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 12px; padding: 15px 18px; border-top: 1px solid var(--studio-line); font-size: max(.72em,11px); }
.text-specimen > footer strong { color: var(--type-accent); font-family: var(--font-technical); font-size: .9em; text-transform: uppercase; letter-spacing: .05em; }
.text-specimen > footer p { margin: 0; color: var(--studio-muted); line-height: 1.5; text-wrap: pretty; }
.copy-expanded { display: none; }
.text-behavior-lab[data-text-content="expanded"] .copy-default { display: none; }
.text-behavior-lab[data-text-content="expanded"] .copy-expanded { display: inline; }
.text-display-frame, .text-control-frame, .text-overflow-frame, .text-disclosure-frame, .text-chat-frame, .text-data-frame, .text-limits-frame { min-height: 350px; padding: 1.4em; }
.text-display-frame { display: flex; flex-direction: column; justify-content: center; }
.text-kicker { margin: 0 0 1em; color: var(--type-accent); font-family: var(--font-technical); font-size: .7em; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.text-display-frame h2 { max-width: 12ch; margin: 0; font: 600 2.7em/.96 var(--selected-display); letter-spacing: -.05em; overflow-wrap: anywhere; text-wrap: balance; }
.text-display-deck { max-width: 38ch; margin: 1.15em 0 0; color: var(--studio-muted); font-size: 1em; line-height: 1.55; text-wrap: pretty; }
.text-control-frame { display: flex; flex-direction: column; justify-content: center; gap: 1.25em; }
.text-control-frame nav { display: flex; overflow-x: auto; gap: .35em; padding-bottom: .25em; scrollbar-width: thin; }
.text-control-frame nav button { flex: 0 0 auto; min-height: 2.75em; padding: 0 .9em; border: 0; border-radius: calc(var(--type-radius) * .45); background: transparent; font-size: .78em; font-weight: 700; white-space: nowrap; }
.text-control-frame nav button:first-child { background: var(--type-accent-soft); color: var(--type-accent); }
.text-control-frame > div { display: flex; flex-wrap: wrap; gap: .65em; }
.text-demo-button { flex: 1 1 12em; min-height: 3.2em; padding: .65em 1em; border: 1px solid var(--studio-line); border-radius: calc(var(--type-radius) * .6); background: transparent; font-size: .86em; font-weight: 700; line-height: 1.25; white-space: normal; }
.text-demo-button--primary { border-color: var(--type-accent); background: var(--type-accent); color: var(--type-on-accent); }
.text-control-frame label { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1em; align-items: start; padding: 1em; border-radius: calc(var(--type-radius) * .6); background: var(--type-accent-soft); font-size: .9em; font-weight: 600; line-height: 1.45; }
.text-control-frame input { width: 1.2em; height: 1.2em; accent-color: var(--type-accent); }
.text-overflow-frame { display: flex; flex-direction: column; justify-content: center; }
.text-overflow-frame dl { display: grid; gap: 1em; margin: 0; }
.text-overflow-frame dl div { min-width: 0; padding-bottom: .85em; border-bottom: 1px solid var(--studio-line); }
.text-overflow-frame dt { margin-bottom: .35em; color: var(--studio-muted); font-family: var(--font-technical); font-size: .68em; letter-spacing: .05em; text-transform: uppercase; }
.text-overflow-frame dd { margin: 0; font-family: var(--font-technical); font-size: .76em; line-height: 1.45; overflow-wrap: anywhere; }
.text-overflow-frame pre, .text-chat-answer pre { max-width: 100%; overflow-x: auto; margin: 1em 0 0; padding: 1em; border-radius: calc(var(--type-radius) * .5); background: #171715; color: #f3f2ec; font: 500 .7em/1.55 var(--font-technical); white-space: pre; }
.text-disclosure-frame { display: flex; flex-direction: column; justify-content: center; }
.text-disclosure-frame > span { color: var(--type-accent); font-family: var(--font-technical); font-size: .68em; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.text-disclosure-frame h3 { max-width: 19ch; margin: .5em 0 .75em; font: 600 1.55em/1.12 var(--selected-display); letter-spacing: -.025em; text-wrap: balance; }
.text-clamp-copy { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; }
.text-clamp-copy.is-expanded { display: block; overflow: visible; -webkit-line-clamp: initial; line-clamp: none; }
.text-clamp-copy p { margin: 0; color: var(--studio-muted); font-size: .92em; line-height: 1.58; text-wrap: pretty; }
.text-disclosure-frame > button { align-self: flex-start; margin-top: .9em; padding: .5em 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--type-accent); font-size: .78em; font-weight: 700; }
.text-chat-frame { display: grid; align-content: center; gap: 1em; }
.text-chat-user, .text-chat-answer { min-width: 0; }
.text-chat-user { justify-self: end; max-width: 82%; padding: .85em 1em; border-radius: calc(var(--type-radius) * .7); background: var(--type-accent-soft); }
.text-chat-user strong, .text-chat-answer > strong { display: block; margin-bottom: .4em; font-size: .72em; }
.text-chat-user p, .text-chat-answer p { margin: 0; font-size: .92em; line-height: 1.58; text-wrap: pretty; }
.text-chat-answer { padding-left: 1em; border-left: 2px solid var(--type-accent); }
.text-chat-answer ul { margin: .75em 0; padding-left: 1.25em; font-size: .9em; line-height: 1.55; }
.text-chat-answer li + li { margin-top: .35em; }
.text-chat-sources { display: flex; flex-wrap: wrap; gap: .45em; margin-top: .9em; }
.text-chat-sources button { min-height: 2.3em; padding: .45em .7em; border: 1px solid var(--studio-line); border-radius: 999px; background: transparent; font-size: .68em; line-height: 1.25; white-space: normal; }
.text-data-frame { display: flex; flex-direction: column; justify-content: center; }
.text-data-heading { display: flex; align-items: center; justify-content: space-between; gap: 1em; margin-bottom: .8em; }
.text-data-heading span { font-size: 1.1em; font-weight: 700; }
.text-data-heading b { color: var(--studio-muted); font-family: var(--font-technical); font-size: .68em; }
.text-data-table { display: grid; overflow-x: auto; min-width: 0; border: 1px solid var(--studio-line); border-radius: calc(var(--type-radius) * .45); }
.text-data-table [role="row"] { display: grid; grid-template-columns: minmax(12em,1.5fr) minmax(6em,.6fr) minmax(5em,.5fr); min-width: 28em; border-bottom: 1px solid var(--studio-line); }
.text-data-table [role="row"]:last-child { border-bottom: 0; }
.text-data-table [role="row"] > * { min-width: 0; padding: .75em; font-size: .72em; line-height: 1.35; overflow-wrap: anywhere; }
.text-data-table [role="columnheader"] { color: var(--studio-muted); font-family: var(--font-technical); font-size: .62em; letter-spacing: .05em; text-transform: uppercase; }
.text-data-table [role="cell"]:last-child { color: var(--type-accent); }
.text-limits-frame { display: flex; align-items: center; }
.text-limits-frame dl { display: grid; width: 100%; gap: .35em; margin: 0; }
.text-limits-frame dl div { display: grid; grid-template-columns: 7em minmax(0,1fr); gap: 1em; padding: .8em 0; border-bottom: 1px solid var(--studio-line); }
.text-limits-frame dl div:last-child { border-bottom: 0; }
.text-limits-frame dt { color: var(--type-accent); font-family: var(--font-technical); font-size: .7em; font-weight: 600; text-transform: uppercase; }
.text-limits-frame dd { margin: 0; font-size: .82em; line-height: 1.45; }
.text-method { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 18px; padding: 20px 2px 0; border-top: 1px solid var(--studio-line); }
.text-method strong { font-size: 14px; }
.text-method p { max-width: 1080px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.55; }
.text-behavior-lab.is-mobile-preview { max-width: 470px; }
.text-behavior-lab.is-mobile-preview .text-behavior-lab__intro { display: block; }
.text-behavior-lab.is-mobile-preview .text-behavior-lab__intro > p { margin-top: 16px; text-align: left; }
.text-behavior-lab.is-mobile-preview .text-audit { overflow-x: auto; grid-template-columns: repeat(4,220px); }
.text-behavior-lab.is-mobile-preview .text-stress-toolbar { align-items: stretch; flex-direction: column; }
.text-behavior-lab.is-mobile-preview .text-stress-toolbar > p { margin: 0; text-align: left; }
.text-behavior-lab.is-mobile-preview .text-specimen-grid { grid-template-columns: 1fr; }
.text-behavior-lab.is-mobile-preview .text-specimen > header { align-items: flex-start; flex-direction: column; padding-block: 12px; }
.text-behavior-lab.is-mobile-preview .text-data-table { overflow: visible; border: 0; gap: .5em; }
.text-behavior-lab.is-mobile-preview .text-data-table [role="row"] { min-width: 0; grid-template-columns: 1fr; border: 1px solid var(--studio-line); border-radius: calc(var(--type-radius) * .4); }
.text-behavior-lab.is-mobile-preview .text-data-table [role="row"]:first-child { display: none; }
.text-behavior-lab.is-mobile-preview .text-data-table [role="row"] > * { padding: .45em .7em; }
.text-behavior-lab.is-mobile-preview .text-data-table [role="cell"]:nth-child(2)::before { content: "Owner · "; color: var(--studio-muted); }
.text-behavior-lab.is-mobile-preview .text-data-table [role="cell"]:nth-child(3)::before { content: "Status · "; color: var(--studio-muted); }

@media (max-width: 1100px) {
  .text-audit { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 720px) {
  .text-behavior-lab { padding: 24px 12px; }
  .text-behavior-lab__intro { align-items: start; flex-direction: column; gap: 12px; }
  .text-behavior-lab__intro > p { text-align: left; }
  .text-audit { overflow-x: auto; grid-template-columns: repeat(4,220px); }
  .text-stress-toolbar { align-items: stretch; flex-direction: column; }
  .text-stress-toolbar > p { margin: 0; text-align: left; }
  .text-rule-banner { grid-template-columns: 44px 1fr; padding: 14px; }
  .text-rule-banner__mark { width: 42px; height: 42px; }
  .text-specimen-grid { grid-template-columns: 1fr; }
  .text-specimen > header { align-items: flex-start; flex-direction: column; padding-block: 12px; }
  .text-method { grid-template-columns: 1fr; gap: 8px; }
}

/* Layout Lab */
body[data-view="layout"] .control-group--motion { display: none; }
.layout-lab {
  --layout-gap: 18px;
  --layout-pad: 22px;
  --layout-card-radius: var(--type-radius);
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 44px);
  font-family: var(--selected-font);
}
.layout-lab[hidden] { display: none; }
.layout-lab[data-layout-density="compact"] { --layout-gap: 10px; --layout-pad: 14px; }
.layout-lab__intro { display: flex; align-items: end; justify-content: space-between; gap: 36px; min-height: 108px; margin-bottom: 24px; }
.layout-lab__intro h1 { max-width: 900px; margin: 8px 0 0; font: 600 clamp(42px, 5vw, 74px)/.95 var(--selected-display); letter-spacing: -.05em; text-wrap: balance; }
.layout-lab__intro > p { max-width: 680px; margin: 0 0 4px; color: var(--studio-muted); font-size: 16px; line-height: 1.58; text-align: left; text-wrap: pretty; }
.layout-audit { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); overflow: hidden; margin-bottom: 16px; border: 1px solid var(--studio-line); border-radius: var(--layout-card-radius); background: var(--studio-line); gap: 1px; }
.layout-audit article { display: grid; grid-template-columns: 28px 1fr; align-content: start; min-height: 128px; padding: 17px 18px; background: var(--studio-panel); }
.layout-audit article > span { grid-row: 1 / 4; padding-top: 2px; color: var(--studio-muted); font: 500 12px/1.35 var(--font-technical); }
.layout-audit strong { font-size: 13px; }
.layout-audit p { margin: 5px 0 11px; color: var(--studio-muted); font-size: 12px; line-height: 1.45; }
.layout-audit b { align-self: end; color: var(--type-accent); font: 600 12px/1.35 var(--font-technical); letter-spacing: .05em; text-transform: uppercase; }
.layout-toolbar { display: flex; align-items: end; gap: 22px; margin-bottom: 16px; padding: 14px 16px; border: 1px solid var(--studio-line); border-radius: var(--layout-card-radius); background: var(--studio-panel); box-shadow: 0 16px 50px rgba(23,23,21,.05); }
.layout-toolbar > div > span { display: block; margin: 0 0 6px 4px; color: var(--studio-muted); font: 600 12px/1.35 var(--font-technical); letter-spacing: .06em; text-transform: uppercase; }
.layout-switch { display: flex; padding: 3px; border: 1px solid var(--studio-line); border-radius: 999px; background: var(--studio-control); }
.layout-switch button { min-height: 34px; padding: 0 13px; border: 0; border-radius: 999px; background: transparent; color: var(--studio-muted); font-size: 12px; font-weight: 700; }
.layout-switch button:is(.is-active,[aria-pressed="true"]) { background: var(--type-accent); color: var(--type-on-accent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--type-on-accent) 24%, transparent); }
.layout-toolbar > p { margin: 0 0 9px auto; color: var(--studio-muted); font: 500 12px/1.4 var(--font-technical); text-align: left; }
.layout-rule-banner { display: grid; grid-template-columns: 58px minmax(0,1fr); gap: 16px; align-items: center; margin-bottom: var(--layout-gap); padding: 17px 20px; border: 1px solid color-mix(in srgb, var(--type-accent) 18%, var(--studio-line)); border-radius: var(--layout-card-radius); background: var(--type-accent-soft); }
.layout-rule-banner__mark { display: grid; place-items: center; width: 52px; height: 52px; border-radius: calc(var(--layout-card-radius) * .7); background: var(--type-accent); color: var(--type-on-accent); font: 600 16px var(--font-technical); }
.layout-rule-banner strong { display: block; margin-bottom: 3px; font-size: 15px; }
.layout-rule-banner p { max-width: 1100px; margin: 0; color: var(--studio-muted); font-size: 14px; line-height: 1.5; text-wrap: pretty; }
.layout-foundations { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); gap: var(--layout-gap); }
.space-scale-card, .grid-profile-card { overflow: hidden; border: 1px solid var(--studio-line); border-radius: var(--layout-card-radius); background: var(--studio-panel); box-shadow: 0 20px 60px rgba(23,23,21,.05); }
.space-scale-card > header, .grid-profile-card > header { display: flex; align-items: end; justify-content: space-between; gap: 20px; min-height: 76px; padding: var(--layout-pad); border-bottom: 1px solid var(--studio-line); }
.space-scale-card > header div > span, .grid-profile-card > header div > span, .layout-atlas-heading span { display: block; margin-bottom: 5px; color: var(--type-accent); font: 600 12px/1.35 var(--font-technical); letter-spacing: .07em; text-transform: uppercase; }
.space-scale-card > header strong, .grid-profile-card > header strong, .layout-atlas-heading strong { font: 600 18px var(--selected-display); letter-spacing: -.02em; }
.space-scale-card > header p, .grid-profile-card > header p { max-width: 260px; margin: 0; color: var(--studio-muted); font-size: 11px; line-height: 1.45; text-align: left; }
.space-ruler { display: flex; align-items: end; gap: clamp(7px,1.1vw,16px); min-height: 260px; padding: var(--layout-pad); overflow-x: auto; }
.space-ruler > div { flex: 0 0 auto; display: grid; justify-items: center; gap: 4px; }
.space-ruler i { display: block; width: 14px; height: var(--space-size); max-height: 128px; border-radius: 999px 999px 2px 2px; background: var(--type-accent); opacity: calc(.34 + (var(--space-size) / 256px)); }
.space-ruler span { margin-top: 6px; font: 600 10px var(--font-technical); }
.space-ruler small { color: var(--studio-muted); font: 500 8px var(--font-technical); }
.space-roles, .grid-profile-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); margin: 0; border-top: 1px solid var(--studio-line); }
.space-roles div, .grid-profile-stats div { min-width: 0; padding: 13px var(--layout-pad); border-right: 1px solid var(--studio-line); }
.space-roles div:last-child, .grid-profile-stats div:last-child { border-right: 0; }
.space-roles dt, .grid-profile-stats dt { color: var(--studio-muted); font: 600 9px var(--font-technical); letter-spacing: .04em; text-transform: uppercase; }
.space-roles dd, .grid-profile-stats dd { margin: 5px 0 0; font-size: 11px; font-weight: 700; line-height: 1.35; }
.grid-canvas { position: relative; display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); grid-template-rows: 1fr 1fr; gap: 16px 20px; min-height: 260px; padding: var(--layout-pad); overflow: hidden; }
.grid-guides { position: absolute; inset: var(--layout-pad); display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 20px; opacity: .85; pointer-events: none; transition: opacity 180ms ease; }
.layout-lab[data-layout-guides="off"] .grid-guides { opacity: 0; }
.grid-guides i { border-inline: 1px solid color-mix(in srgb,var(--type-accent) 23%,transparent); background: color-mix(in srgb,var(--type-accent) 5%,transparent); }
.grid-block { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: end; min-width: 0; padding: 14px; border: 1px solid color-mix(in srgb,var(--type-accent) 30%,var(--studio-line)); border-radius: calc(var(--layout-card-radius) * .55); background: color-mix(in srgb,var(--studio-panel) 84%,transparent); backdrop-filter: blur(4px); }
.grid-block span { color: var(--studio-muted); font: 500 9px var(--font-technical); text-transform: uppercase; }
.grid-block strong { margin-top: 4px; font-size: 12px; }
.grid-block--title { grid-column: 1 / 9; grid-row: 1; }
.grid-block--aside { grid-column: 9 / 13; grid-row: 1; }
.grid-block--wide { grid-column: 1 / 13; grid-row: 2; }
.grid-profile-stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
.layout-atlas-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin: 32px 2px 14px; }
.layout-atlas-heading p { margin: 0; color: var(--studio-muted); font-size: 12px; }
.layout-contract-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--layout-gap); }
.layout-contract { overflow: hidden; min-width: 0; border: 1px solid var(--studio-line); border-radius: var(--layout-card-radius); background: var(--studio-panel); box-shadow: 0 18px 55px rgba(23,23,21,.05); }
.layout-contract > header { display: grid; grid-template-columns: 32px 1fr; min-height: 82px; padding: var(--layout-pad); border-bottom: 1px solid var(--studio-line); }
.layout-contract > header > span { color: var(--type-accent); font: 600 10px var(--font-technical); }
.layout-contract > header strong, .layout-contract > header small { display: block; }
.layout-contract > header strong { font-size: 13px; }
.layout-contract > header small { margin-top: 4px; color: var(--studio-muted); font-size: 10px; line-height: 1.4; }
.layout-contract > footer { display: grid; grid-template-columns: 50px 1fr; gap: 10px; min-height: 84px; padding: 14px var(--layout-pad); border-top: 1px solid var(--studio-line); }
.layout-contract > footer b { color: var(--type-accent); font: 600 9px var(--font-technical); letter-spacing: .04em; text-transform: uppercase; }
.layout-contract > footer p { margin: 0; color: var(--studio-muted); font-size: 10px; line-height: 1.48; text-wrap: pretty; }
.layout-mini { position: relative; min-height: 230px; margin: var(--layout-pad); overflow: hidden; border: 1px solid var(--studio-line); border-radius: calc(var(--layout-card-radius) * .6); background: color-mix(in srgb,var(--studio-bg) 72%,var(--studio-panel)); }
.layout-lab[data-layout-density="compact"] .layout-mini { min-height: 190px; }
.layout-mini i, .layout-mini b, .layout-mini span, .layout-mini p, .layout-mini figure, .layout-mini div, .layout-mini nav, .layout-mini main, .layout-mini aside, .layout-mini section, .layout-mini header, .layout-mini footer { box-sizing: border-box; }
.layout-mini--container { display: grid; grid-template-columns: 16px minmax(0,1fr) 16px; padding: 14px 0; }
.layout-mini--container > i { background: repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--type-accent) 18%,transparent) 5px 6px); }
.layout-mini--container > div { display: grid; align-content: center; gap: 12px; padding: 18px; border-inline: 1px dashed color-mix(in srgb,var(--type-accent) 38%,transparent); }
.layout-mini--container b { display: block; height: 46px; border-radius: calc(var(--layout-card-radius) * .35); background: var(--type-accent-soft); }
.layout-mini--container b:last-child { width: 68%; height: 74px; background: color-mix(in srgb,var(--type-accent) 16%,var(--studio-panel)); }
.layout-mini--shell { display: grid; grid-template-columns: 22% minmax(0,1fr) 17%; }
.layout-mini--shell nav { display: grid; align-content: start; gap: 9px; padding: 14px 9px; border-right: 1px solid var(--studio-line); }
.layout-mini--shell nav i { display: block; height: 7px; border-radius: 99px; background: var(--studio-line); }
.layout-mini--shell nav i:first-child { width: 80%; background: var(--type-accent); }
.layout-mini--shell main { display: grid; grid-template-rows: 38px 1fr; }
.layout-mini--shell main header { border-bottom: 1px solid var(--studio-line); }
.layout-mini--shell main section { margin: 16px; border-radius: calc(var(--layout-card-radius) * .35); background: var(--type-accent-soft); }
.layout-mini--shell aside { border-left: 1px solid var(--studio-line); background: color-mix(in srgb,var(--type-accent) 4%,var(--studio-panel)); }
.layout-mini--collection { display: grid; grid-template-columns: 1.25fr 1fr; grid-template-rows: 1fr 1fr; gap: 9px; padding: 10px; }
.layout-mini--collection i { display: block; min-height: 0; border-radius: calc(var(--layout-card-radius) * .35); background: var(--type-accent-soft); }
.layout-mini--collection i:first-child { grid-row: span 2; background: color-mix(in srgb,var(--type-accent) 17%,var(--studio-panel)); }
.layout-mini--collection i:last-child { background: var(--type-accent); opacity: .76; }
.layout-mini--conversation { display: grid; align-content: center; gap: 13px; padding: 16px; }
.layout-mini--conversation > p { justify-self: end; width: 68%; height: 46px; margin: 0; border-radius: calc(var(--layout-card-radius) * .55); background: var(--type-accent-soft); }
.layout-mini--conversation > div { display: grid; grid-template-columns: 6px 1fr; gap: 7px 11px; }
.layout-mini--conversation > div b { grid-row: 1 / 5; border-radius: 99px; background: var(--type-accent); }
.layout-mini--conversation > div i { height: 7px; border-radius: 99px; background: var(--studio-line); }
.layout-mini--conversation > div i:nth-of-type(2) { width: 92%; }
.layout-mini--conversation > div i:nth-of-type(3) { width: 72%; }
.layout-mini--conversation > div span { width: 48%; height: 30px; margin-top: 7px; border: 1px solid var(--studio-line); border-radius: 99px; }
.layout-mini--dashboard { display: grid; grid-template-columns: repeat(2,1fr); grid-template-rows: 40% 1fr; gap: 9px; padding: 10px; }
.layout-mini--dashboard > div { display: grid; align-content: center; gap: 8px; padding: 12px; border-radius: calc(var(--layout-card-radius) * .35); background: var(--type-accent-soft); }
.layout-mini--dashboard > div b { width: 55%; height: 8px; border-radius: 9px; background: var(--studio-line); }
.layout-mini--dashboard > div i { width: 72%; height: 24px; border-radius: 4px; background: var(--type-accent); opacity: .8; }
.layout-mini--dashboard section { grid-column: span 2; display: flex; align-items: end; gap: 9px; padding: 14px; border: 1px solid var(--studio-line); border-radius: calc(var(--layout-card-radius) * .35); }
.layout-mini--dashboard section i { flex: 1; height: 42%; background: color-mix(in srgb,var(--type-accent) 30%,var(--studio-panel)); }
.layout-mini--dashboard section i:nth-child(2) { height: 82%; background: var(--type-accent); }
.layout-mini--dashboard section i:nth-child(3) { height: 61%; }
.layout-mini--marketing { display: grid; grid-template-columns: 48% 1fr; padding: 13px; }
.layout-mini--marketing > div { z-index: 1; display: grid; align-content: center; gap: 10px; padding-right: 8px; }
.layout-mini--marketing > div i { width: 42%; height: 6px; border-radius: 9px; background: var(--type-accent); }
.layout-mini--marketing > div b { display: block; height: 16px; background: var(--studio-ink); }
.layout-mini--marketing > div b:nth-of-type(2) { width: 72%; }
.layout-mini--marketing > div span { width: 58%; height: 32px; border-radius: 99px; background: var(--type-accent); }
.layout-mini--marketing figure { position: relative; margin: 0; border-radius: calc(var(--layout-card-radius) * .45); background: color-mix(in srgb,var(--type-accent) 18%,var(--studio-panel)); transform: translateX(-5%); }
.layout-mini--marketing figure i { position: absolute; right: 12%; bottom: 14%; width: 54%; height: 58%; border-radius: 50% 50% 48% 5%; background: var(--type-accent); opacity: .72; }
.layout-mini--illustration { display: grid; grid-template-columns: 48% 1fr; gap: 6px; padding: 13px; }
.layout-mini--illustration > div { display: grid; align-content: center; gap: 9px; }
.layout-mini--illustration > div i { width: 38%; height: 5px; border-radius: 9px; background: var(--type-accent); }
.layout-mini--illustration > div b { display: block; height: 12px; background: var(--studio-line); }
.layout-mini--illustration > div b:last-child { width: 76%; }
.layout-mini--illustration figure { position: relative; margin: 0; border-radius: calc(var(--layout-card-radius) * .45); background: var(--type-accent-soft); }
.layout-mini--illustration figure i { position: absolute; top: 24%; left: 28%; width: 44%; aspect-ratio: 1; border-radius: 50% 50% 47% 48%; background: var(--type-accent); }
.layout-mini--illustration figure span { position: absolute; top: 62%; left: 50%; width: 1px; height: 31%; background: var(--type-accent); transform: rotate(8deg); transform-origin: top; }
.layout-mini--scroll { display: grid; grid-template-rows: 40px 1fr 48px; }
.layout-mini--scroll > header { display: flex; align-items: center; gap: 12px; padding: 0 11px; overflow: hidden; border-bottom: 1px solid var(--studio-line); }
.layout-mini--scroll > header i { flex: 0 0 44px; height: 7px; border-radius: 9px; background: var(--studio-line); }
.layout-mini--scroll > header i:first-child { background: var(--type-accent); }
.layout-mini--scroll > main { display: grid; align-content: center; gap: 10px; padding: 14px; overflow-y: auto; }
.layout-mini--scroll > main span { height: 34px; border-radius: calc(var(--layout-card-radius) * .3); background: var(--type-accent-soft); }
.layout-mini--scroll > footer { display: none; align-items: center; justify-content: space-around; border-top: 1px solid var(--studio-line); background: var(--studio-panel); }
.layout-mini--scroll > footer b { width: 22px; height: 6px; border-radius: 9px; background: var(--studio-line); }
.layout-mini--scroll > footer b:first-child { background: var(--type-accent); }
.layout-method { display: grid; grid-template-columns: 220px 1fr; gap: 24px; margin-top: 18px; padding: 20px 2px 0; border-top: 1px solid var(--studio-line); }
.layout-method strong { font-size: 14px; }
.layout-method p { max-width: 1100px; margin: 0; color: var(--studio-muted); font-size: 13px; line-height: 1.55; }
body[data-expression="editorial"] .layout-lab { --layout-card-radius: 8px; }
body[data-expression="editorial"] .layout-contract:nth-child(4) .layout-mini { background: color-mix(in srgb,var(--studio-ink) 3%,var(--studio-panel)); }
body[data-expression="frameset"] .layout-lab { --layout-card-radius: 0px; }
body[data-expression="frameset"] .layout-contract, body[data-expression="frameset"] .space-scale-card, body[data-expression="frameset"] .grid-profile-card { box-shadow: none; }
body[data-expression="frameset"] .grid-block, body[data-expression="frameset"] .layout-mini i, body[data-expression="frameset"] .layout-mini b, body[data-expression="frameset"] .layout-mini span { border-radius: 0; }
body[data-expression="play"] .layout-lab { --layout-card-radius: 24px; }
body[data-expression="play"] .layout-contract:nth-child(3), body[data-expression="play"] .layout-contract:nth-child(7) { background: color-mix(in srgb,var(--type-accent) 5%,var(--studio-panel)); }
body[data-expression="play"] .layout-mini--marketing figure { transform: translateX(-5%) rotate(2deg); }
.layout-lab.is-mobile-preview { max-width: 470px; }
.layout-lab.is-mobile-preview .layout-lab__intro { display: block; }
.layout-lab.is-mobile-preview .layout-lab__intro > p { margin-top: 16px; text-align: left; }
.layout-lab.is-mobile-preview .layout-audit { overflow-x: auto; grid-template-columns: repeat(4,230px); }
.layout-lab.is-mobile-preview .layout-toolbar { align-items: stretch; flex-direction: column; }
.layout-lab.is-mobile-preview .layout-toolbar > p { margin: 0; text-align: left; }
.layout-lab.is-mobile-preview .layout-foundations, .layout-lab.is-mobile-preview .layout-contract-grid { grid-template-columns: 1fr; }
.layout-lab.is-mobile-preview .space-scale-card > header, .layout-lab.is-mobile-preview .grid-profile-card > header { align-items: start; flex-direction: column; }
.layout-lab.is-mobile-preview .space-scale-card > header p, .layout-lab.is-mobile-preview .grid-profile-card > header p { text-align: left; }
.layout-lab.is-mobile-preview .space-ruler { min-height: 220px; }
.layout-lab.is-mobile-preview .space-roles { grid-template-columns: repeat(2,1fr); }
.layout-lab.is-mobile-preview .space-roles div:nth-child(2) { border-right: 0; }
.layout-lab.is-mobile-preview .space-roles div:nth-child(-n+2) { border-bottom: 1px solid var(--studio-line); }
.layout-lab.is-mobile-preview .grid-canvas, .layout-lab.is-mobile-preview .grid-guides { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 12px; }
.layout-lab.is-mobile-preview .grid-guides i:nth-child(n+5) { display: none; }
.layout-lab.is-mobile-preview .grid-block--title { grid-column: 1 / 5; }
.layout-lab.is-mobile-preview .grid-block--aside { display: none; }
.layout-lab.is-mobile-preview .grid-block--wide { grid-column: 1 / 5; }
.layout-lab.is-mobile-preview .grid-profile-stats { grid-template-columns: 1fr; }
.layout-lab.is-mobile-preview .grid-profile-stats div { border-right: 0; border-bottom: 1px solid var(--studio-line); }
.layout-lab.is-mobile-preview .grid-profile-stats div:last-child { border-bottom: 0; }
.layout-lab.is-mobile-preview .layout-atlas-heading { align-items: start; flex-direction: column; }
.layout-lab.is-mobile-preview .layout-mini--shell { grid-template-columns: 1fr; grid-template-rows: 42px 1fr 48px; }
.layout-lab.is-mobile-preview .layout-mini--shell nav { display: flex; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--studio-line); }
.layout-lab.is-mobile-preview .layout-mini--shell nav i { width: 34px; }
.layout-lab.is-mobile-preview .layout-mini--shell main { grid-row: 2; }
.layout-lab.is-mobile-preview .layout-mini--shell aside { grid-row: 3; border-top: 1px solid var(--studio-line); border-left: 0; }
.layout-lab.is-mobile-preview .layout-mini--collection { grid-template-columns: 1fr; grid-template-rows: repeat(4,80px); }
.layout-lab.is-mobile-preview .layout-mini--collection i:first-child { grid-row: auto; }
.layout-lab.is-mobile-preview .layout-mini--marketing, .layout-lab.is-mobile-preview .layout-mini--illustration { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
.layout-lab.is-mobile-preview .layout-mini--marketing > div, .layout-lab.is-mobile-preview .layout-mini--illustration > div { padding: 12px; }
.layout-lab.is-mobile-preview .layout-mini--marketing figure { min-height: 100px; transform: none; }
.layout-lab.is-mobile-preview .layout-mini--illustration figure { min-height: 120px; }
.layout-lab.is-mobile-preview .layout-mini--scroll { grid-template-rows: 1fr 48px; }
.layout-lab.is-mobile-preview .layout-mini--scroll > header { display: none; }
.layout-lab.is-mobile-preview .layout-mini--scroll > footer { display: flex; }

@media (max-width: 1280px) {
  .layout-contract-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 980px) {
  .layout-audit { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .layout-foundations { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .layout-lab { padding: 24px 12px; }
  .layout-lab__intro { align-items: start; flex-direction: column; gap: 12px; }
  .layout-lab__intro > p { text-align: left; }
  .layout-audit { overflow-x: auto; grid-template-columns: repeat(4,230px); }
  .layout-toolbar { align-items: stretch; flex-direction: column; }
  .layout-toolbar > p { margin: 0; text-align: left; }
  .layout-rule-banner { grid-template-columns: 44px 1fr; padding: 14px; }
  .layout-rule-banner__mark { width: 42px; height: 42px; }
  .layout-contract-grid { grid-template-columns: 1fr; }
  .layout-method { grid-template-columns: 1fr; gap: 8px; }
}

/* Depth and Elevation Lab */
body[data-view="depth"] .control-group--motion { display: none; }
.depth-lab {
  --depth-radius: var(--type-radius);
  --depth-canvas: color-mix(in srgb,var(--studio-bg) 88%,var(--studio-panel));
  --depth-sunken: color-mix(in srgb,var(--studio-ink) 4%,var(--studio-bg));
  --depth-default: var(--studio-panel);
  --depth-raised: color-mix(in srgb,#fff 82%,var(--studio-panel));
  --depth-overlay: color-mix(in srgb,#fff 92%,var(--studio-panel));
  --depth-scrim: rgba(17,17,15,.46);
  --depth-border: var(--studio-line);
  --depth-shadow-resting: 0 1px 2px rgba(23,23,21,.05);
  --depth-shadow-raised: 0 8px 24px -14px rgba(23,23,21,.22),0 1px 3px rgba(23,23,21,.07);
  --depth-shadow-overlay: 0 18px 44px -22px rgba(23,23,21,.30),0 3px 10px rgba(23,23,21,.08);
  --depth-shadow-modal: 0 32px 78px -28px rgba(23,23,21,.42),0 8px 20px rgba(23,23,21,.09);
  --depth-shadow-floating: 0 18px 38px -18px rgba(23,23,21,.36),0 2px 8px rgba(23,23,21,.08);
  max-width: 1800px;
  margin: 0 auto;
  padding: clamp(22px,3vw,44px);
  font-family: var(--selected-font);
}
.depth-lab[hidden] { display: none; }
body[data-theme="dark"] .depth-lab {
  --depth-canvas: #11110f;
  --depth-sunken: #0b0b0a;
  --depth-default: #1b1b18;
  --depth-raised: #24241f;
  --depth-overlay: #2b2b25;
  --depth-scrim: rgba(0,0,0,.68);
  --depth-border: rgba(255,255,255,.13);
  --depth-shadow-resting: 0 1px 2px rgba(0,0,0,.20);
  --depth-shadow-raised: 0 10px 26px -14px rgba(0,0,0,.60),0 1px 0 rgba(255,255,255,.035) inset;
  --depth-shadow-overlay: 0 20px 48px -20px rgba(0,0,0,.72),0 1px 0 rgba(255,255,255,.045) inset;
  --depth-shadow-modal: 0 34px 84px -26px rgba(0,0,0,.82),0 1px 0 rgba(255,255,255,.055) inset;
  --depth-shadow-floating: 0 20px 44px -18px rgba(0,0,0,.74),0 1px 0 rgba(255,255,255,.045) inset;
}
body[data-expression="editorial"] .depth-lab { --depth-radius: 8px; }
body[data-expression="frameset"] .depth-lab {
  --depth-radius: 0px;
  --depth-canvas:#f7f8fa;
  --depth-sunken:#eff3f8;
  --depth-default:#ffffff;
  --depth-raised:#fcfdff;
  --depth-overlay:#ffffff;
  --depth-border: color-mix(in srgb,var(--type-accent) 11%,var(--studio-line));
  --depth-shadow-resting: none;
  --depth-shadow-raised: 0 3px 12px -10px rgba(24,45,86,.18);
  --depth-shadow-overlay: 0 8px 24px -20px rgba(24,45,86,.22),0 1px 2px rgba(24,45,86,.04);
  --depth-shadow-modal: 0 18px 48px -32px rgba(24,45,86,.30),0 2px 8px rgba(24,45,86,.04);
  --depth-shadow-floating: 0 10px 28px -22px rgba(24,45,86,.24);
}
body[data-theme="dark"][data-expression="frameset"] .depth-lab { --depth-canvas:#0d1117; --depth-sunken:#090d12; --depth-default:#181d24; --depth-raised:#212731; --depth-overlay:#282f3a; }
body[data-expression="play"] .depth-lab {
  --depth-radius: 24px;
  --depth-raised: color-mix(in srgb,#fff 84%,var(--type-accent-soft));
  --depth-overlay: color-mix(in srgb,#fff 92%,var(--type-accent-soft));
  --depth-shadow-raised: 0 10px 28px -16px color-mix(in srgb,var(--type-accent) 30%,transparent),0 2px 5px rgba(35,25,24,.05);
  --depth-shadow-overlay: 0 22px 52px -24px color-mix(in srgb,var(--type-accent) 34%,transparent),0 4px 12px rgba(35,25,24,.07);
  --depth-shadow-modal: 0 36px 84px -30px color-mix(in srgb,var(--type-accent) 38%,transparent),0 10px 26px rgba(35,25,24,.08);
  --depth-shadow-floating: 0 20px 44px -20px color-mix(in srgb,var(--type-accent) 38%,transparent),0 3px 9px rgba(35,25,24,.06);
}
body[data-theme="dark"][data-expression="play"] .depth-lab { --depth-raised: #29211f; --depth-overlay: #332725; }
.depth-lab[data-depth-cues="surface"] { --depth-shadow-resting:none; --depth-shadow-raised:none; --depth-shadow-overlay:none; --depth-shadow-modal:none; --depth-shadow-floating:none; }
.depth-lab[data-depth-cues="surface"] .depth-popover, .depth-lab[data-depth-cues="surface"] .depth-dialog { backdrop-filter: none; }
.depth-lab__intro { display:flex; align-items:end; justify-content:space-between; gap:36px; min-height:108px; margin-bottom:24px; }
.depth-lab__intro h1 { max-width:900px; margin:8px 0 0; font:600 clamp(42px,5vw,74px)/.95 var(--selected-display); letter-spacing:-.05em; text-wrap:balance; }
.depth-lab__intro > p { max-width:700px; margin:0 0 4px; color:var(--studio-muted); font-size:16px; line-height:1.58; text-align:left; text-wrap:pretty; }
.depth-audit { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; margin-bottom:16px; border:1px solid var(--studio-line); border-radius:var(--depth-radius); background:var(--studio-line); gap:1px; }
.depth-audit article { display:grid; grid-template-columns:30px 1fr; align-content:start; min-height:148px; padding:18px; background:var(--studio-panel); }
.depth-audit article > span { grid-row:1 / 4; padding-top:2px; color:var(--studio-muted); font:500 12px var(--font-technical); }
.depth-audit strong { font-size:14px; }
.depth-audit p { margin:7px 0 13px; color:var(--studio-muted); font-size:13px; line-height:1.5; }
.depth-audit b { align-self:end; color:var(--type-accent); font:600 12px var(--font-technical); letter-spacing:.04em; text-transform:uppercase; }
.depth-toolbar { display:flex; align-items:end; gap:22px; margin-bottom:16px; padding:14px 16px; border:1px solid var(--studio-line); border-radius:var(--depth-radius); background:var(--studio-panel); box-shadow:var(--depth-shadow-resting); }
.depth-toolbar > div > span { display:block; margin:0 0 6px 4px; color:var(--studio-muted); font:600 12px var(--font-technical); letter-spacing:.06em; text-transform:uppercase; }
.depth-switch { display:flex; padding:3px; border:1px solid var(--studio-line); border-radius:999px; background:var(--studio-control); }
.depth-switch button { min-height:36px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--studio-muted); font-size:13px; font-weight:700; }
.depth-switch button:is(.is-active,[aria-pressed="true"]) { background:var(--type-accent); color:var(--type-on-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--type-on-accent) 24%,transparent); }
.depth-toolbar > p { margin:0 0 9px auto; color:var(--studio-muted); font:500 12px var(--font-technical); text-align:left; }
.depth-rule-banner { display:grid; grid-template-columns:58px minmax(0,1fr); gap:16px; align-items:center; margin-bottom:18px; padding:17px 20px; border:1px solid color-mix(in srgb,var(--type-accent) 18%,var(--studio-line)); border-radius:var(--depth-radius); background:var(--type-accent-soft); }
.depth-rule-banner__mark { display:grid; place-items:center; width:52px; height:52px; border-radius:calc(var(--depth-radius) * .7); background:var(--type-accent); color:var(--type-on-accent); font:600 16px var(--font-technical); }
.depth-rule-banner strong { display:block; margin-bottom:4px; font-size:15px; }
.depth-rule-banner p { max-width:1100px; margin:0; color:var(--studio-muted); font-size:14px; line-height:1.5; text-wrap:pretty; }
.depth-foundations { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:18px; }
.depth-stack-card, .depth-anatomy-card, .depth-scene-card { overflow:hidden; border:1px solid var(--depth-border); border-radius:var(--depth-radius); background:var(--depth-default); box-shadow:var(--depth-shadow-resting); }
.depth-stack-card > header, .depth-anatomy-card > header, .depth-scene-card > header { display:flex; align-items:end; justify-content:space-between; gap:20px; min-height:82px; padding:20px 22px; border-bottom:1px solid var(--depth-border); }
.depth-stack-card > header div > span, .depth-anatomy-card > header div > span, .depth-scene-card > header div > span, .depth-atlas-heading span { display:block; margin-bottom:5px; color:var(--type-accent); font:600 12px var(--font-technical); letter-spacing:.06em; text-transform:uppercase; }
.depth-stack-card > header strong, .depth-anatomy-card > header strong, .depth-scene-card > header strong, .depth-atlas-heading strong { font:600 19px var(--selected-display); letter-spacing:-.02em; }
.depth-stack-card > header p, .depth-anatomy-card > header p, .depth-scene-card > header p { max-width:330px; margin:0; color:var(--studio-muted); font-size:12px; line-height:1.45; text-align:left; }
.depth-stack { position:relative; min-height:390px; overflow:hidden; background:radial-gradient(circle at 50% 110%,color-mix(in srgb,var(--type-accent) 12%,transparent),transparent 56%),var(--depth-canvas); perspective:900px; }
.depth-plane { position:absolute; left:50%; display:grid; grid-template-columns:34px 1fr; align-content:center; width:min(72%,480px); height:96px; padding:16px 20px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .68); background:var(--depth-default); transform:translateX(-50%) rotateX(55deg) rotateZ(-3deg); transform-origin:center; transition:box-shadow 180ms ease,background 180ms ease; }
.depth-plane > span { grid-row:span 2; color:var(--type-accent); font:600 12px var(--font-technical); }
.depth-plane strong { font-size:14px; }
.depth-plane small { margin-top:3px; color:var(--studio-muted); font-size:12px; }
.depth-plane--modal { z-index:5; top:20px; background:var(--depth-overlay); box-shadow:var(--depth-shadow-modal); }
.depth-plane--overlay { z-index:4; top:78px; background:var(--depth-overlay); box-shadow:var(--depth-shadow-overlay); }
.depth-plane--raised { z-index:3; top:136px; background:var(--depth-raised); box-shadow:var(--depth-shadow-raised); }
.depth-plane--default { z-index:2; top:194px; box-shadow:var(--depth-shadow-resting); }
.depth-plane--sunken { z-index:1; top:252px; background:var(--depth-sunken); }
.depth-anatomy { display:grid; min-height:390px; background:var(--depth-canvas); }
.depth-anatomy article { display:grid; grid-template-columns:60px minmax(0,1fr) 28px; gap:14px; align-items:center; padding:18px 22px; border-bottom:1px solid var(--depth-border); }
.depth-anatomy article:last-child { border-bottom:0; }
.depth-anatomy article > span { color:var(--studio-muted); font:500 12px var(--font-technical); }
.depth-anatomy strong { display:block; font-size:14px; }
.depth-anatomy p { margin:4px 0 0; color:var(--studio-muted); font-size:12px; line-height:1.45; }
.depth-cue { display:block; width:54px; height:42px; border-radius:calc(var(--depth-radius) * .42); background:var(--depth-default); }
.depth-cue--tone { background:linear-gradient(90deg,var(--depth-sunken) 0 33%,var(--depth-default) 33% 66%,var(--depth-overlay) 66%); }
.depth-cue--border { border:1px solid var(--type-accent); }
.depth-cue--shadow { background:var(--depth-raised); box-shadow:var(--depth-shadow-raised); }
.depth-cue--material { border:1px solid color-mix(in srgb,var(--type-accent) 15%,var(--depth-border)); background:color-mix(in srgb,var(--depth-overlay) 72%,transparent); box-shadow:var(--depth-shadow-overlay); backdrop-filter:blur(12px); }
.depth-scene-card { margin-top:18px; }
.depth-scene { min-height:500px; }
.depth-scene--product { display:grid; grid-template-columns:170px minmax(0,1fr) 250px; background:var(--depth-canvas); }
.depth-lab[data-depth-scene="overlay"] .depth-scene--product { display:none; }
.depth-lab[data-depth-scene="product"] .depth-scene--overlay { display:none; }
.depth-product-nav { display:grid; align-content:start; gap:14px; padding:24px 18px; border-right:1px solid var(--depth-border); background:var(--depth-default); }
.depth-product-nav b { margin-bottom:24px; font:600 18px var(--selected-display); }
.depth-product-nav i { display:block; width:72%; height:10px; border-radius:99px; background:var(--studio-line); }
.depth-product-nav i.is-current { width:92%; background:var(--type-accent); }
.depth-product-main { min-width:0; padding:24px; }
.depth-product-main > header { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.depth-product-main > header span, .depth-product-context > span, .depth-popover > span, .depth-dialog > span, .depth-role-demo section > span { display:block; color:var(--type-accent); font:600 12px var(--font-technical); letter-spacing:.045em; text-transform:uppercase; }
.depth-product-main > header strong { display:block; margin-top:4px; font:600 28px var(--selected-display); letter-spacing:-.03em; }
.depth-product-main button, .depth-product-context button, .depth-dialog button, .depth-role-demo button { min-height:38px; padding:0 13px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .52); background:var(--depth-default); font-size:12px; font-weight:700; }
.depth-product-toolbar { position:sticky; z-index:2; top:12px; display:flex; align-items:center; gap:8px; margin:22px 0 16px; padding:10px 12px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .62); background:color-mix(in srgb,var(--depth-raised) 88%,transparent); box-shadow:var(--depth-shadow-raised); backdrop-filter:blur(14px); }
.depth-lab[data-depth-cues="surface"] .depth-product-toolbar { backdrop-filter:none; }
.depth-product-toolbar > span { margin-right:auto; font-size:13px; font-weight:600; }
.depth-product-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.depth-product-grid article { min-height:235px; padding:20px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .72); background:var(--depth-default); box-shadow:var(--depth-shadow-resting); }
.depth-product-grid article > span { display:inline-flex; padding:6px 8px; border-radius:999px; background:var(--type-accent-soft); color:var(--type-accent); font-size:12px; font-weight:700; }
.depth-product-grid strong { display:block; margin-top:54px; font-size:15px; }
.depth-product-grid p { margin:8px 0 0; color:var(--studio-muted); font-size:13px; line-height:1.55; }
.depth-product-context { align-self:start; margin:24px 24px 24px 0; padding:22px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .8); background:var(--depth-raised); box-shadow:var(--depth-shadow-raised); }
.depth-product-context strong { display:block; margin-top:32px; font:600 22px/1.08 var(--selected-display); letter-spacing:-.03em; }
.depth-product-context p { margin:10px 0 24px; color:var(--studio-muted); font-size:13px; line-height:1.55; }
.depth-product-context button { width:100%; border-color:var(--type-accent); background:var(--type-accent); color:var(--type-on-accent); }
.depth-scene--overlay { position:relative; overflow:hidden; background:var(--depth-canvas); }
.depth-overlay-base { position:absolute; inset:0; opacity:.58; }
.depth-overlay-base header { display:flex; gap:18px; height:64px; padding:26px; border-bottom:1px solid var(--depth-border); }
.depth-overlay-base header i { width:90px; height:10px; border-radius:99px; background:var(--studio-line); }
.depth-overlay-base header i:first-child { background:var(--type-accent); }
.depth-overlay-base main { display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:16px; padding:28px; }
.depth-overlay-base main b, .depth-overlay-base main span { display:block; min-height:230px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .58); background:var(--depth-default); }
.depth-overlay-base main b { grid-row:span 2; min-height:430px; }
.depth-popover { position:absolute; z-index:2; top:82px; left:7%; display:grid; width:250px; padding:16px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .64); background:color-mix(in srgb,var(--depth-overlay) 92%,transparent); box-shadow:var(--depth-shadow-overlay); backdrop-filter:blur(18px); }
.depth-popover strong { margin:6px 0 13px; font-size:14px; }
.depth-popover button { display:flex; align-items:center; justify-content:space-between; min-height:42px; padding:0 10px; border:0; border-radius:calc(var(--depth-radius) * .38); background:transparent; text-align:left; font-size:13px; }
.depth-popover button.is-selected { background:var(--type-accent-soft); color:var(--type-accent); font-weight:700; }
.depth-popover button i { font-style:normal; }
.depth-dialog { position:absolute; z-index:3; top:50%; left:50%; width:min(440px,calc(100% - 48px)); padding:28px; border:1px solid var(--depth-border); border-radius:var(--depth-radius); background:color-mix(in srgb,var(--depth-overlay) 94%,transparent); box-shadow:var(--depth-shadow-modal); backdrop-filter:blur(22px); transform:translate(-50%,-50%); }
.depth-dialog::before { content:""; position:fixed; z-index:-1; inset:-100vmax; background:var(--depth-scrim); pointer-events:none; }
.depth-dialog__close { position:absolute; top:14px; right:14px; width:36px; min-height:36px !important; padding:0 !important; border:0 !important; background:transparent !important; font-size:20px !important; }
.depth-dialog > strong { display:block; max-width:14ch; margin:30px 0 10px; font:600 30px/1.02 var(--selected-display); letter-spacing:-.04em; }
.depth-dialog > p { margin:0; color:var(--studio-muted); font-size:14px; line-height:1.55; }
.depth-dialog > div { display:flex; justify-content:flex-end; gap:9px; margin-top:24px; }
.depth-dialog > div button:last-child { border-color:var(--type-accent); background:var(--type-accent); color:var(--type-on-accent); }
.depth-atlas-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:32px 2px 14px; }
.depth-atlas-heading p { margin:0; color:var(--studio-muted); font-size:13px; }
.depth-role-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.depth-role { overflow:hidden; min-width:0; border:1px solid var(--depth-border); border-radius:var(--depth-radius); background:var(--depth-default); box-shadow:var(--depth-shadow-resting); }
.depth-role > header { display:grid; grid-template-columns:36px 1fr; min-height:82px; padding:20px 22px; border-bottom:1px solid var(--depth-border); }
.depth-role > header > span { color:var(--type-accent); font:600 12px var(--font-technical); }
.depth-role > header strong, .depth-role > header small { display:block; }
.depth-role > header strong { font-size:14px; }
.depth-role > header small { margin-top:5px; color:var(--studio-muted); font-size:12px; }
.depth-role > header code { font-family:var(--font-technical); }
.depth-role-demo { display:grid; place-items:center; min-height:250px; padding:24px; background:var(--depth-canvas); }
.depth-role-demo section { width:min(100%,300px); padding:18px; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .64); background:var(--depth-default); }
.depth-role > footer { display:grid; grid-template-columns:52px 1fr; gap:10px; min-height:90px; padding:15px 22px; border-top:1px solid var(--depth-border); }
.depth-role > footer b { color:var(--type-accent); font:600 12px var(--font-technical); letter-spacing:.04em; text-transform:uppercase; }
.depth-role > footer p { margin:0; color:var(--studio-muted); font-size:12px; line-height:1.5; text-wrap:pretty; }
.depth-role--sunken .depth-role-demo > section { display:flex; gap:9px; height:150px; background:var(--depth-sunken); }
.depth-role--sunken .depth-role-demo > section i { flex:1; border:1px solid var(--depth-border); border-radius:calc(var(--depth-radius) * .34); background:var(--depth-default); }
.depth-role--default .depth-role-demo > section { box-shadow:var(--depth-shadow-resting); }
.depth-role--default .depth-role-demo strong, .depth-role--default .depth-role-demo p { display:block; }
.depth-role--default .depth-role-demo strong { margin-top:32px; font-size:16px; }
.depth-role--default .depth-role-demo p { margin:7px 0 0; color:var(--studio-muted); font-size:13px; line-height:1.45; }
.depth-role--raised .depth-role-demo > section { display:flex; align-items:center; gap:8px; background:var(--depth-raised); box-shadow:var(--depth-shadow-raised); }
.depth-role--raised .depth-role-demo > section > span { margin-right:auto; }
.depth-role--overlay .depth-role-demo > section { display:grid; background:var(--depth-overlay); box-shadow:var(--depth-shadow-overlay); }
.depth-role--overlay .depth-role-demo strong { margin:7px 0 14px; font-size:14px; }
.depth-role--overlay .depth-role-demo i { display:block; height:8px; margin:5px 0; border-radius:99px; background:var(--studio-line); }
.depth-role--overlay .depth-role-demo i:nth-of-type(2) { width:84%; }
.depth-role--modal .depth-role-demo { background:color-mix(in srgb,var(--depth-scrim) 70%,var(--depth-canvas)); }
.depth-role--modal .depth-role-demo > section { background:var(--depth-overlay); box-shadow:var(--depth-shadow-modal); }
.depth-role--modal .depth-role-demo strong { display:block; max-width:16ch; margin:24px 0 18px; font:600 18px/1.12 var(--selected-display); }
.depth-role--modal .depth-role-demo button { width:100%; border-color:var(--type-accent); background:var(--type-accent); color:var(--type-on-accent); }
.depth-role--floating .depth-role-demo > section { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; background:var(--depth-overlay); box-shadow:var(--depth-shadow-floating); }
.depth-role--floating .depth-role-demo > section > i { color:var(--type-accent); font-style:normal; }
.depth-role--floating .depth-role-demo strong, .depth-role--floating .depth-role-demo span { display:block; }
.depth-role--floating .depth-role-demo strong { font-size:13px; }
.depth-role--floating .depth-role-demo span { margin-top:3px; color:var(--studio-muted); font-size:12px; }
.depth-role--floating .depth-role-demo button { border:0; background:transparent; color:var(--type-accent); }
.depth-method { display:grid; grid-template-columns:220px 1fr; gap:24px; margin-top:18px; padding:20px 2px 0; border-top:1px solid var(--studio-line); }
.depth-method strong { font-size:14px; }
.depth-method p { max-width:1100px; margin:0; color:var(--studio-muted); font-size:13px; line-height:1.55; }
body[data-expression="frameset"] .depth-stack-card, body[data-expression="frameset"] .depth-anatomy-card, body[data-expression="frameset"] .depth-scene-card, body[data-expression="frameset"] .depth-role { box-shadow:none; }
body[data-expression="frameset"] .depth-popover { border-color:color-mix(in srgb,var(--type-accent) 13%,var(--depth-border)); }
body[data-expression="play"] .depth-role--floating .depth-role-demo > section, body[data-expression="play"] .depth-product-context { transform:translateY(-2px) rotate(-.35deg); }
.depth-lab.is-mobile-preview { max-width:470px; }
.depth-lab.is-mobile-preview .depth-lab__intro { display:block; }
.depth-lab.is-mobile-preview .depth-lab__intro > p { margin-top:16px; text-align:left; }
.depth-lab.is-mobile-preview .depth-audit { overflow-x:auto; grid-template-columns:repeat(4,240px); }
.depth-lab.is-mobile-preview .depth-toolbar { align-items:stretch; flex-direction:column; }
.depth-lab.is-mobile-preview .depth-toolbar > p { margin:0; text-align:left; }
.depth-lab.is-mobile-preview .depth-foundations, .depth-lab.is-mobile-preview .depth-role-grid { grid-template-columns:1fr; }
.depth-lab.is-mobile-preview .depth-stack-card > header, .depth-lab.is-mobile-preview .depth-anatomy-card > header, .depth-lab.is-mobile-preview .depth-scene-card > header { align-items:start; flex-direction:column; }
.depth-lab.is-mobile-preview .depth-stack-card > header p, .depth-lab.is-mobile-preview .depth-anatomy-card > header p, .depth-lab.is-mobile-preview .depth-scene-card > header p { text-align:left; }
.depth-lab.is-mobile-preview .depth-plane { width:78%; }
.depth-lab.is-mobile-preview .depth-scene--product { grid-template-columns:1fr; }
.depth-lab.is-mobile-preview .depth-product-nav { display:flex; align-items:center; padding:15px 16px; overflow:hidden; border-right:0; border-bottom:1px solid var(--depth-border); }
.depth-lab.is-mobile-preview .depth-product-nav b { margin:0 auto 0 0; }
.depth-lab.is-mobile-preview .depth-product-nav i { flex:0 0 30px; width:30px; }
.depth-lab.is-mobile-preview .depth-product-main { padding:18px 16px; }
.depth-lab.is-mobile-preview .depth-product-grid { grid-template-columns:1fr; }
.depth-lab.is-mobile-preview .depth-product-grid article { min-height:170px; }
.depth-lab.is-mobile-preview .depth-product-grid strong { margin-top:28px; }
.depth-lab.is-mobile-preview .depth-product-context { grid-column:1; margin:0 16px 18px; }
.depth-lab.is-mobile-preview .depth-popover { top:40px; left:20px; width:210px; }
.depth-lab.is-mobile-preview .depth-dialog { width:calc(100% - 32px); padding:22px; }
.depth-lab.is-mobile-preview .depth-overlay-base main { grid-template-columns:1fr; }
.depth-lab.is-mobile-preview .depth-overlay-base main span:nth-of-type(n+2) { display:none; }
.depth-lab.is-mobile-preview .depth-atlas-heading { align-items:start; flex-direction:column; }

@media (max-width:1180px) {
  .depth-audit { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .depth-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .depth-scene--product { grid-template-columns:150px minmax(0,1fr); }
  .depth-product-context { grid-column:2; margin:0 24px 24px; }
}

@media (max-width:900px) {
  .depth-foundations { grid-template-columns:1fr; }
  .depth-product-grid { grid-template-columns:1fr; }
  .depth-product-grid article { min-height:180px; }
  .depth-product-grid strong { margin-top:30px; }
}

@media (max-width:720px) {
  .depth-lab { padding:24px 12px; }
  .depth-lab__intro { align-items:start; flex-direction:column; gap:12px; }
  .depth-lab__intro > p { text-align:left; }
  .depth-audit { overflow-x:auto; grid-template-columns:repeat(4,240px); }
  .depth-toolbar { align-items:stretch; flex-direction:column; }
  .depth-toolbar > p { margin:0; text-align:left; }
  .depth-rule-banner { grid-template-columns:44px 1fr; padding:14px; }
  .depth-rule-banner__mark { width:42px; height:42px; }
  .depth-foundations { grid-template-columns:1fr; }
  .depth-stack-card > header, .depth-anatomy-card > header, .depth-scene-card > header { align-items:start; flex-direction:column; }
  .depth-stack-card > header p, .depth-anatomy-card > header p, .depth-scene-card > header p { text-align:left; }
  .depth-scene--product { grid-template-columns:1fr; }
  .depth-product-nav { display:flex; align-items:center; padding:15px 16px; overflow:hidden; border-right:0; border-bottom:1px solid var(--depth-border); }
  .depth-product-nav b { margin:0 auto 0 0; }
  .depth-product-nav i { flex:0 0 30px; width:30px; }
  .depth-product-main { padding:18px 16px; }
  .depth-product-context { grid-column:1; margin:0 16px 18px; }
  .depth-popover { top:40px; left:20px; width:210px; }
  .depth-dialog { width:calc(100% - 32px); padding:22px; }
  .depth-role-grid { grid-template-columns:1fr; }
  .depth-method { grid-template-columns:1fr; gap:8px; }
}

/* Motion Lab */
.motion-lab {
  --motion-radius:8px;
  --motion-distance:8px;
  --motion-feedback:140ms;
  --motion-fast:180ms;
  --motion-enter:260ms;
  --motion-move:380ms;
  --motion-heavy:560ms;
  --motion-expressive:680ms;
  --motion-ambient:1100ms;
  --motion-ease-feedback:cubic-bezier(.35,0,.2,1);
  --motion-ease-enter:cubic-bezier(.2,0,.15,1);
  --motion-ease-exit:cubic-bezier(.4,0,1,1);
  --motion-ease-move:cubic-bezier(.4,0,.2,1);
  --motion-ease-heavy:cubic-bezier(.45,0,.15,1);
  --motion-ease-expressive:cubic-bezier(.3,0,.15,1);
  --motion-canvas:color-mix(in srgb,var(--studio-bg) 88%,var(--studio-panel));
  --motion-surface:var(--studio-panel);
  --motion-line:var(--studio-line);
  max-width:1800px;
  margin:0 auto;
  padding:clamp(22px,3vw,44px);
  font-family:var(--selected-font);
}
.motion-lab[hidden] { display:none; }
.motion-lab[data-motion-pace="brisk"] {
  --motion-feedback:110ms;
  --motion-fast:150ms;
  --motion-enter:210ms;
  --motion-move:300ms;
  --motion-heavy:440ms;
  --motion-expressive:540ms;
  --motion-ambient:850ms;
}
body[data-expression="frameset"] .motion-lab {
  --motion-radius:0px;
  --motion-distance:4px;
  --motion-ease-enter:cubic-bezier(.28,0,.2,1);
  --motion-ease-heavy:cubic-bezier(.4,0,.18,1);
  --motion-ease-expressive:cubic-bezier(.35,0,.2,1);
}
body[data-expression="play"] .motion-lab {
  --motion-radius:24px;
  --motion-distance:14px;
  --motion-heavy:620ms;
  --motion-expressive:760ms;
  --motion-ease-enter:cubic-bezier(.18,0,.12,1);
  --motion-ease-heavy:cubic-bezier(.46,0,.12,1);
}
body[data-theme="dark"] .motion-lab {
  --motion-canvas:#11110f;
  --motion-surface:#1b1b18;
  --motion-line:rgba(255,255,255,.13);
}
.motion-lab__intro { display:flex; align-items:end; justify-content:space-between; gap:36px; min-height:108px; margin-bottom:24px; }
.motion-lab__intro h1 { max-width:900px; margin:8px 0 0; font:600 clamp(42px,5vw,74px)/.95 var(--selected-display); letter-spacing:-.05em; text-wrap:balance; }
.motion-lab__intro > p { max-width:700px; margin:0 0 4px; color:var(--studio-muted); font-size:16px; line-height:1.58; text-align:left; text-wrap:pretty; }
.motion-audit { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:hidden; margin-bottom:16px; border:1px solid var(--motion-line); border-radius:var(--motion-radius); background:var(--motion-line); gap:1px; }
.motion-audit article { display:grid; grid-template-columns:30px 1fr; align-content:start; min-height:148px; padding:18px; background:var(--motion-surface); }
.motion-audit article > span { grid-row:1 / 4; padding-top:2px; color:var(--studio-muted); font:500 12px var(--font-technical); }
.motion-audit strong { font-size:14px; }
.motion-audit p { margin:7px 0 13px; color:var(--studio-muted); font-size:13px; line-height:1.5; }
.motion-audit b { align-self:end; color:var(--type-accent); font:600 12px var(--font-technical); letter-spacing:.04em; text-transform:uppercase; }
.motion-toolbar {
  position:sticky;
  z-index:9;
  top:var(--control-deck-sticky-offset);
  display:flex;
  align-items:end;
  gap:14px;
  margin-bottom:16px;
  padding:14px 16px;
  border:1px solid var(--motion-line);
  border-radius:var(--motion-radius);
  background:color-mix(in srgb,var(--motion-surface) 90%,transparent);
  box-shadow:0 16px 34px -30px rgba(20,20,18,.58);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
body[data-theme="dark"] .motion-toolbar { box-shadow:0 18px 38px -28px rgba(0,0,0,.88); }
.motion-toolbar > div > span { display:block; margin:0 0 6px 4px; color:var(--studio-muted); font:600 12px var(--font-technical); letter-spacing:.06em; text-transform:uppercase; }
.motion-switch { display:flex; padding:3px; border:1px solid var(--motion-line); border-radius:999px; background:var(--studio-control); }
.motion-switch button { min-height:36px; padding:0 14px; border:0; border-radius:999px; background:transparent; color:var(--studio-muted); font-size:13px; font-weight:700; }
.motion-switch button:is(.is-active,[aria-pressed="true"]) { background:var(--type-accent); color:var(--type-on-accent); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--type-on-accent) 24%,transparent); }
.motion-replay { display:inline-flex; align-items:center; gap:8px; min-height:42px; padding:0 16px; border:1px solid var(--motion-line); border-radius:999px; background:var(--studio-control); font-size:13px; font-weight:700; }
.motion-replay span { font-size:18px; line-height:1; }
.motion-replay:hover { border-color:var(--type-accent); color:var(--type-accent); }
.motion-toolbar > p { margin:0 0 9px auto; color:var(--studio-muted); font:500 12px var(--font-technical); text-align:left; }
.motion-rule-banner { display:grid; grid-template-columns:58px minmax(0,1fr); gap:16px; align-items:center; margin-bottom:18px; padding:17px 20px; border:1px solid color-mix(in srgb,var(--type-accent) 18%,var(--motion-line)); border-radius:var(--motion-radius); background:var(--type-accent-soft); }
.motion-rule-banner__mark { display:grid; place-items:center; width:52px; height:52px; border-radius:calc(var(--motion-radius) * .7); background:var(--type-accent); color:var(--type-on-accent); font:600 21px var(--font-technical); }
.motion-rule-banner strong { display:block; margin-bottom:4px; font-size:15px; }
.motion-rule-banner p { max-width:1100px; margin:0; color:var(--studio-muted); font-size:14px; line-height:1.5; text-wrap:pretty; }
.motion-foundations { display:grid; grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:18px; }
.motion-foundation-card, .motion-sequence-card, .motion-contract { overflow:hidden; border:1px solid var(--motion-line); border-radius:var(--motion-radius); background:var(--motion-surface); }
.motion-foundation-card > header, .motion-sequence-card > header { display:flex; align-items:end; justify-content:space-between; gap:20px; min-height:82px; padding:20px 22px; border-bottom:1px solid var(--motion-line); }
.motion-foundation-card > header div > span, .motion-sequence-card > header div > span, .motion-atlas-heading span { display:block; margin-bottom:5px; color:var(--type-accent); font:600 12px var(--font-technical); letter-spacing:.06em; text-transform:uppercase; }
.motion-foundation-card > header strong, .motion-sequence-card > header strong, .motion-atlas-heading strong { font:600 19px var(--selected-display); letter-spacing:-.02em; }
.motion-foundation-card > header p, .motion-sequence-card > header p { max-width:330px; margin:0; color:var(--studio-muted); font-size:12px; line-height:1.45; text-align:left; }
.motion-timing-scale { display:grid; gap:15px; min-height:390px; padding:25px 24px; background:var(--motion-canvas); }
.motion-timing-scale > div { display:grid; grid-template-columns:76px minmax(0,1fr) 42px; gap:12px; align-items:center; }
.motion-timing-scale span, .motion-timing-scale code { font:500 12px var(--font-technical); }
.motion-timing-scale code { color:var(--studio-muted); text-align:right; }
.motion-timing-scale i { position:relative; display:block; height:8px; border-radius:999px; background:color-mix(in srgb,var(--studio-ink) 8%,transparent); }
.motion-timing-scale i::after { content:""; position:absolute; inset:0 auto 0 0; width:max(2px,var(--bar)); border-radius:inherit; background:var(--type-accent); }
.motion-lab.is-playing .motion-timing-scale i::after { animation:motion-bar var(--motion-ambient) var(--motion-ease-move) both; }
.motion-easing-list { display:grid; gap:18px; min-height:390px; padding:26px 24px; align-content:center; background:var(--motion-canvas); }
.motion-ease { display:grid; grid-template-columns:132px minmax(0,1fr); gap:18px; align-items:center; }
.motion-ease > span b, .motion-ease > span code { display:block; }
.motion-ease > span b { font-size:13px; }
.motion-ease > span code { margin-top:4px; color:var(--studio-muted); font:500 10px var(--font-technical); }
.motion-ease > i { position:relative; display:block; height:32px; border-bottom:1px solid var(--motion-line); }
.motion-ease > i::before, .motion-ease > i::after { content:""; position:absolute; bottom:-3px; width:5px; height:5px; border-radius:50%; background:var(--studio-muted); }
.motion-ease > i::before { left:0; }
.motion-ease > i::after { right:0; }
.motion-ease em { position:absolute; bottom:-8px; left:0; display:block; width:16px; height:16px; border-radius:50%; background:var(--type-accent); box-shadow:0 0 0 5px color-mix(in srgb,var(--type-accent) 13%,transparent); }
.motion-lab.is-playing .motion-ease em { animation:motion-ease-run var(--motion-ambient) var(--motion-ease-move) both; }
.motion-lab.is-playing .motion-ease--enter em { animation-timing-function:var(--motion-ease-enter); }
.motion-lab.is-playing .motion-ease--exit em { animation-timing-function:var(--motion-ease-exit); }
.motion-lab.is-playing .motion-ease--heavy em { animation-duration:var(--motion-heavy); animation-timing-function:var(--motion-ease-heavy); }
.motion-lab.is-playing .motion-ease--expressive em { animation-timing-function:var(--motion-ease-expressive); }
.motion-sequence-card { margin-top:18px; }
.motion-sequence { display:grid; grid-template-columns:190px minmax(0,1fr); min-height:520px; background:var(--motion-canvas); }
.motion-sequence > aside { display:grid; align-content:start; gap:6px; padding:25px 18px; border-right:1px solid var(--motion-line); background:var(--motion-surface); }
.motion-sequence > aside b { margin-bottom:26px; font:600 19px var(--selected-display); }
.motion-sequence > aside span { padding:10px 12px; border-radius:calc(var(--motion-radius) * .5); color:var(--studio-muted); font-size:13px; font-weight:600; }
.motion-sequence > aside span.is-current { background:var(--type-accent-soft); color:var(--type-accent); }
.motion-sequence > main { position:relative; display:grid; grid-template-columns:minmax(0,1fr) minmax(280px,.7fr); gap:16px; align-content:center; padding:clamp(24px,4vw,52px); }
.motion-sequence__request, .motion-sequence__response, .motion-sequence__approval, .motion-sequence__success { border:1px solid var(--motion-line); background:var(--motion-surface); }
.motion-sequence__request { grid-column:1; padding:18px 20px; border-radius:calc(var(--motion-radius) * .72); }
.motion-sequence small { color:var(--studio-muted); font-size:11px; }
.motion-sequence__request strong { display:block; margin-top:9px; font-size:15px; }
.motion-sequence__response { grid-column:1; display:grid; grid-template-columns:38px 1fr; gap:13px; padding:22px; border-radius:calc(var(--motion-radius) * .72); }
.motion-sequence__response > span { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; background:var(--type-accent); color:var(--type-on-accent); font:600 11px var(--font-technical); }
.motion-sequence__response strong { display:block; margin-top:8px; font-size:16px; }
.motion-sequence__response p { margin:7px 0 0; color:var(--studio-muted); font-size:13px; }
.motion-sequence__approval { grid-column:2; grid-row:1 / 3; align-self:center; padding:24px; border-radius:var(--motion-radius); background:color-mix(in srgb,var(--type-accent-soft) 58%,var(--motion-surface)); }
.motion-sequence__approval small { color:var(--type-accent); font:600 11px var(--font-technical); letter-spacing:.05em; text-transform:uppercase; }
.motion-sequence__approval strong { display:block; max-width:15ch; margin:36px 0 26px; font:600 26px/1.05 var(--selected-display); letter-spacing:-.035em; }
.motion-sequence__approval button { width:100%; min-height:48px; border:1px solid var(--type-accent); border-radius:calc(var(--motion-radius) * .62); background:var(--type-accent); color:var(--type-on-accent); font-weight:700; }
.motion-sequence__success { position:absolute; right:30px; bottom:24px; display:grid; grid-template-columns:30px 1fr; gap:10px; align-items:center; min-width:230px; padding:13px 16px; border-radius:calc(var(--motion-radius) * .62); box-shadow:0 16px 40px -24px rgba(20,20,18,.38); }
.motion-sequence__success i { display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:var(--type-accent); color:var(--type-on-accent); font-style:normal; }
.motion-sequence__success strong, .motion-sequence__success small { display:block; }
.motion-sequence__success strong { font-size:13px; }
.motion-sequence__success small { margin-top:2px; }
.motion-lab.is-playing .motion-sequence__request { animation:motion-enter var(--motion-enter) var(--motion-ease-enter) both; }
.motion-lab.is-playing .motion-sequence__response { animation:motion-enter var(--motion-enter) var(--motion-ease-enter) 220ms both; }
.motion-lab.is-playing .motion-sequence__approval { animation:motion-heavy-enter var(--motion-heavy) var(--motion-ease-heavy) 520ms both; }
.motion-lab.is-playing .motion-sequence__success { animation:motion-success var(--motion-expressive) var(--motion-ease-expressive) 1180ms both; }
.motion-lab.is-playing :is(.motion-sequence__request,.motion-sequence__response,.motion-sequence__approval,.motion-sequence__success,.motion-contract--enter .motion-demo section,.motion-contract--navigate .motion-demo > section,.motion-contract--celebrate figure,.motion-button) { will-change:transform,opacity; backface-visibility:hidden; }
.motion-button-card { overflow:hidden; margin-top:18px; border:1px solid var(--motion-line); border-radius:var(--motion-radius); background:var(--motion-surface); }
.motion-button-card > header { display:flex; align-items:end; justify-content:space-between; gap:20px; min-height:82px; padding:20px 22px; border-bottom:1px solid var(--motion-line); }
.motion-button-card > header div > span { display:block; margin-bottom:5px; color:var(--type-accent); font:600 12px/1.35 var(--font-technical); letter-spacing:.06em; text-transform:uppercase; }
.motion-button-card > header div > strong { font:600 19px var(--selected-display); letter-spacing:-.02em; }
.motion-button-card > header p { max-width:440px; margin:0; color:var(--studio-muted); font-size:13px; line-height:1.5; text-align:left; }
.motion-button-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); background:var(--motion-line); gap:1px; }
.motion-button-grid article { display:grid; align-content:center; justify-items:start; min-width:0; min-height:220px; padding:24px; background:var(--motion-canvas); }
.motion-button-grid article > strong { margin-top:22px; font-size:14px; }
.motion-button-grid article > small { margin-top:5px; color:var(--studio-muted); font-size:12px; line-height:1.45; }
.motion-button { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:11px; min-width:150px; min-height:50px; overflow:hidden; padding:0 18px; border:1px solid var(--type-accent); border-radius:calc(var(--motion-radius) * .62); background:var(--motion-surface); color:var(--type-accent); box-shadow:0 8px 20px -18px rgba(20,20,18,.4); font-size:13px; font-weight:700; transform:translate3d(0,0,0); transform-origin:center bottom; transition:transform var(--motion-feedback) var(--motion-ease-feedback),box-shadow var(--motion-feedback) var(--motion-ease-feedback),background-color var(--motion-fast) var(--motion-ease-move),color var(--motion-fast) var(--motion-ease-move); }
.motion-button > * { position:relative; z-index:1; }
.motion-button > i { display:grid; place-items:center; width:22px; height:22px; margin:0; font-style:normal; }
.motion-button:hover { transform:translate3d(0,-3px,0); box-shadow:0 15px 28px -18px rgba(20,20,18,.48); }
.motion-button:active { transform:translate3d(0,1px,0) scale(.985); box-shadow:0 3px 10px -9px rgba(20,20,18,.38); }
.motion-button--lift { background:var(--type-accent); color:var(--type-on-accent); }
.motion-button--working::after { content:""; position:absolute; z-index:2; right:0; bottom:0; left:0; height:3px; background:var(--type-accent); transform:scaleX(0); transform-origin:left; }
.motion-button__dot { border:2px solid color-mix(in srgb,var(--type-accent) 25%,transparent); border-top-color:var(--type-accent); border-radius:50%; }
.motion-button--confirm { background:var(--type-accent); color:var(--type-on-accent); }
.motion-button--confirm::before { content:""; position:absolute; z-index:0; inset:0; background:var(--type-accent); transform:scaleX(0); transform-origin:left; }
.motion-button__check { opacity:0; transform:scale(.6) rotate(-16deg); }
.motion-lab.is-playing .motion-button--press { animation:motion-button-press var(--motion-move) var(--motion-ease-feedback) 120ms both; }
.motion-lab.is-playing .motion-button--lift { animation:motion-button-lift var(--motion-heavy) var(--motion-ease-heavy) 180ms both; }
.motion-lab.is-playing .motion-button--working::after { animation:motion-button-progress var(--motion-ambient) var(--motion-ease-move) 220ms both; }
.motion-lab.is-playing .motion-button--working .motion-button__dot { animation:motion-button-spin var(--motion-ambient) linear 220ms both; }
.motion-lab.is-playing .motion-button--confirm { animation:motion-button-confirm-color var(--motion-heavy) var(--motion-ease-heavy) 280ms both; }
.motion-lab.is-playing .motion-button--confirm::before { animation:motion-button-confirm-fill var(--motion-heavy) var(--motion-ease-heavy) 280ms both; }
.motion-lab.is-playing .motion-button--confirm .motion-button__check { animation:motion-button-check var(--motion-expressive) var(--motion-ease-expressive) 640ms both; }
.motion-atlas-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin:32px 2px 14px; }
.motion-atlas-heading p { margin:0; color:var(--studio-muted); font-size:13px; }
.motion-contract-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.motion-contract { min-width:0; }
.motion-contract > header { display:grid; grid-template-columns:36px 1fr; min-height:82px; padding:20px 22px; border-bottom:1px solid var(--motion-line); }
.motion-contract > header > span { color:var(--type-accent); font:600 12px var(--font-technical); }
.motion-contract > header strong, .motion-contract > header small { display:block; }
.motion-contract > header strong { font-size:14px; }
.motion-contract > header small { margin-top:5px; color:var(--studio-muted); font-size:12px; line-height:1.4; }
.motion-contract > header code { font-family:var(--font-technical); }
.motion-demo { position:relative; display:grid; place-items:center; min-height:270px; overflow:hidden; padding:24px; background:var(--motion-canvas); }
.motion-contract > footer { display:grid; grid-template-columns:66px 1fr; gap:10px; min-height:90px; padding:15px 22px; border-top:1px solid var(--motion-line); }
.motion-contract > footer b { color:var(--type-accent); font:600 12px/1.35 var(--font-technical); letter-spacing:.04em; text-transform:uppercase; }
.motion-contract > footer p { margin:0; color:var(--studio-muted); font-size:12px; line-height:1.5; text-wrap:pretty; }
.motion-contract--feedback .motion-demo button { position:relative; display:inline-flex; align-items:center; gap:10px; min-height:48px; padding:0 18px; border:1px solid var(--type-accent); border-radius:calc(var(--motion-radius) * .62); background:var(--type-accent); color:var(--type-on-accent); font-weight:700; }
.motion-contract--feedback .motion-demo button i { display:grid; place-items:center; width:20px; height:20px; border-radius:50%; border:1px solid currentColor; font-style:normal; font-size:11px; }
.motion-contract--feedback .motion-demo button::after { content:""; position:absolute; inset:-1px; border:2px solid var(--type-accent); border-radius:inherit; opacity:0; }
.motion-lab.is-playing .motion-contract--feedback .motion-demo button { animation:motion-button-press var(--motion-move) var(--motion-ease-feedback) 80ms both; }
.motion-lab.is-playing .motion-contract--feedback .motion-demo button::after { animation:motion-ring var(--motion-move) var(--motion-ease-exit) 210ms both; }
.motion-contract--enter .motion-demo { align-content:start; padding-top:54px; }
.motion-anchor { width:210px; padding:13px 14px; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .5); background:var(--motion-surface); font-size:13px; font-weight:700; }
.motion-anchor b { float:right; }
.motion-contract--enter .motion-demo section { position:absolute; top:108px; left:50%; display:grid; width:210px; padding:10px; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .6); background:var(--motion-surface); box-shadow:0 18px 42px -26px rgba(20,20,18,.5); transform:translateX(-50%); }
.motion-contract--enter .motion-demo section small { padding:7px 8px; color:var(--studio-muted); }
.motion-contract--enter .motion-demo section strong, .motion-contract--enter .motion-demo section span { padding:8px; border-radius:calc(var(--motion-radius) * .34); font-size:12px; }
.motion-contract--enter .motion-demo section strong { background:var(--type-accent-soft); color:var(--type-accent); }
.motion-lab.is-playing .motion-contract--enter .motion-demo section { animation:motion-popover var(--motion-enter) var(--motion-ease-enter) 140ms both; }
.motion-contract--disclose .motion-demo > section { width:min(100%,300px); overflow:hidden; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .65); background:var(--motion-surface); }
.motion-contract--disclose .motion-demo header { display:flex; align-items:center; justify-content:space-between; padding:15px 16px; font-size:12px; font-weight:700; }
.motion-contract--disclose .motion-demo header b { color:var(--type-accent); }
.motion-contract--disclose .motion-demo section > div { padding:18px 16px; border-top:1px solid var(--motion-line); }
.motion-contract--disclose .motion-demo section > div strong { font-size:13px; }
.motion-contract--disclose .motion-demo section > div p { margin:6px 0 0; color:var(--studio-muted); font-size:11px; }
.motion-lab.is-playing .motion-contract--disclose .motion-demo section > div { animation:motion-disclose var(--motion-move) var(--motion-ease-move) 140ms both; transform-origin:top; }
.motion-contract--navigate .motion-demo > section { display:flex; width:min(100%,320px); overflow:hidden; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .6); background:var(--motion-surface); }
.motion-contract--navigate .motion-demo > section > div { flex:0 0 78%; min-height:165px; padding:20px; border-right:1px solid var(--motion-line); }
.motion-contract--navigate .motion-demo small, .motion-contract--navigate .motion-demo strong { display:block; }
.motion-contract--navigate .motion-demo small { color:var(--type-accent); font:600 11px var(--font-technical); }
.motion-contract--navigate .motion-demo strong { margin:30px 0 18px; font-size:15px; }
.motion-contract--navigate .motion-demo i { display:block; width:90%; height:8px; margin:7px 0; border-radius:99px; background:var(--studio-line); }
.motion-contract--navigate .motion-demo i:last-child { width:62%; }
.motion-lab.is-playing .motion-contract--navigate .motion-demo > section { animation:motion-navigate var(--motion-move) var(--motion-ease-move) 170ms both; }
.motion-contract--reorder .motion-demo > section { display:grid; gap:8px; width:min(100%,280px); }
.motion-contract--reorder .motion-demo section > div { display:grid; grid-template-columns:28px 1fr; align-items:center; min-height:48px; padding:0 13px; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .5); background:var(--motion-surface); font-size:12px; }
.motion-contract--reorder .motion-demo section b { color:var(--studio-muted); }
.motion-lab.is-playing .motion-contract--reorder .motion-demo section > div:first-child { animation:motion-reorder-down var(--motion-move) var(--motion-ease-move) 150ms both; }
.motion-lab.is-playing .motion-contract--reorder .motion-demo section > div:nth-child(2) { z-index:2; border-color:var(--type-accent); animation:motion-reorder-up var(--motion-move) var(--motion-ease-move) 150ms both; }
.motion-contract--progress .motion-demo section { width:min(100%,290px); padding:22px; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .6); background:var(--motion-surface); }
.motion-contract--progress .motion-demo section > span, .motion-contract--progress .motion-demo section > small { display:block; }
.motion-contract--progress .motion-demo section > span { font-size:13px; font-weight:700; }
.motion-contract--progress .motion-demo section > strong { display:block; height:8px; margin:24px 0 11px; overflow:hidden; border-radius:99px; background:var(--studio-line); }
.motion-contract--progress .motion-demo section > strong i { display:block; width:72%; height:100%; border-radius:inherit; background:var(--type-accent); }
.motion-contract--progress .motion-demo section > small { color:var(--studio-muted); font-size:11px; }
.motion-lab.is-playing .motion-contract--progress .motion-demo section > strong i { animation:motion-progress var(--motion-ambient) var(--motion-ease-move) 100ms both; }
.motion-contract--celebrate { grid-column:span 2; }
.motion-contract--celebrate .motion-demo { grid-template-columns:minmax(150px,.65fr) minmax(0,1fr); gap:24px; }
.motion-contract--celebrate figure { position:relative; width:min(100%,240px); height:205px; margin:0; overflow:hidden; border:1px solid var(--motion-line); border-radius:calc(var(--motion-radius) * .7); background:#f7f4ee; }
.motion-contract--celebrate figure img { position:absolute; top:0; left:0; width:300%; max-width:none; height:100%; object-fit:cover; transform:translateX(-66.666%); }
.motion-contract--celebrate section small, .motion-contract--celebrate section strong { display:block; }
.motion-contract--celebrate section small { color:var(--type-accent); font:600 11px var(--font-technical); letter-spacing:.05em; text-transform:uppercase; }
.motion-contract--celebrate section strong { max-width:12ch; margin-top:12px; font:600 clamp(25px,3vw,42px)/.98 var(--selected-display); letter-spacing:-.04em; }
.motion-lab.is-playing .motion-contract--celebrate figure { animation:motion-celebrate var(--motion-expressive) var(--motion-ease-expressive) 180ms both; }
.motion-lab.is-playing .motion-contract--celebrate section { animation:motion-enter var(--motion-enter) var(--motion-ease-enter) 430ms both; }
.motion-method { display:grid; grid-template-columns:220px 1fr; gap:24px; margin-top:18px; padding:20px 2px 0; border-top:1px solid var(--motion-line); }
.motion-method strong { font-size:14px; }
.motion-method p { max-width:1100px; margin:0; color:var(--studio-muted); font-size:13px; line-height:1.55; }
body[data-expression="frameset"] .motion-foundation-card, body[data-expression="frameset"] .motion-sequence-card, body[data-expression="frameset"] .motion-contract { box-shadow:none; }
body[data-expression="frameset"] .motion-sequence__response > span { border-radius:0; }
body[data-expression="play"] .motion-sequence__approval { transform:rotate(-.35deg); }
body[data-expression="play"] .motion-sequence__success { transform:rotate(.5deg); }
.motion-lab.is-mobile-preview { max-width:470px; }
.motion-lab.is-mobile-preview .motion-lab__intro { align-items:start; flex-direction:column; gap:12px; }
.motion-lab.is-mobile-preview .motion-lab__intro > p { text-align:left; }
.motion-lab.is-mobile-preview .motion-audit { overflow-x:auto; grid-template-columns:repeat(4,240px); }
.motion-lab.is-mobile-preview .motion-toolbar { align-items:stretch; flex-direction:column; }
.motion-lab.is-mobile-preview .motion-toolbar > p { margin:0; text-align:left; }
.motion-lab.is-mobile-preview .motion-replay { justify-content:center; }
.motion-lab.is-mobile-preview .motion-foundations, .motion-lab.is-mobile-preview .motion-contract-grid { grid-template-columns:1fr; }
.motion-lab.is-mobile-preview .motion-foundation-card > header, .motion-lab.is-mobile-preview .motion-sequence-card > header { align-items:start; flex-direction:column; }
.motion-lab.is-mobile-preview .motion-foundation-card > header p, .motion-lab.is-mobile-preview .motion-sequence-card > header p { text-align:left; }
.motion-lab.is-mobile-preview .motion-ease { grid-template-columns:110px 1fr; }
.motion-lab.is-mobile-preview .motion-sequence { grid-template-columns:1fr; }
.motion-lab.is-mobile-preview .motion-sequence > aside { display:flex; align-items:center; overflow:hidden; padding:14px 16px; border-right:0; border-bottom:1px solid var(--motion-line); }
.motion-lab.is-mobile-preview .motion-sequence > aside b { margin:0 auto 0 0; }
.motion-lab.is-mobile-preview .motion-sequence > aside span { flex:0 0 auto; padding:7px 9px; }
.motion-lab.is-mobile-preview .motion-sequence > main { grid-template-columns:1fr; padding:20px 16px 88px; }
.motion-lab.is-mobile-preview .motion-sequence__request, .motion-lab.is-mobile-preview .motion-sequence__response, .motion-lab.is-mobile-preview .motion-sequence__approval { grid-column:1; grid-row:auto; }
.motion-lab.is-mobile-preview .motion-sequence__approval strong { margin-top:28px; }
.motion-lab.is-mobile-preview .motion-sequence__success { right:16px; bottom:16px; left:16px; min-width:0; }
.motion-lab.is-mobile-preview .motion-contract--celebrate { grid-column:auto; }
.motion-lab.is-mobile-preview .motion-contract--celebrate .motion-demo { grid-template-columns:1fr; }
.motion-lab.is-mobile-preview .motion-contract--celebrate section { text-align:center; }
.motion-lab.is-mobile-preview .motion-contract--celebrate section strong { margin-right:auto; margin-left:auto; }
body[data-motion="reduced"] .motion-lab.is-playing .motion-timing-scale i::after,
body[data-motion="reduced"] .motion-lab.is-playing .motion-ease em,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--feedback .motion-demo button,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--feedback .motion-demo button::after,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--enter .motion-demo section,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--disclose .motion-demo section > div,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--navigate .motion-demo > section,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--reorder .motion-demo section > div,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--progress .motion-demo section > strong i,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--celebrate figure,
body[data-motion="reduced"] .motion-lab.is-playing .motion-contract--celebrate section,
body[data-motion="reduced"] .motion-lab.is-playing .motion-sequence__request,
body[data-motion="reduced"] .motion-lab.is-playing .motion-sequence__response,
body[data-motion="reduced"] .motion-lab.is-playing .motion-sequence__approval,
body[data-motion="reduced"] .motion-lab.is-playing .motion-sequence__success { animation:motion-reduced-fade 120ms linear both !important; }
body[data-motion="reduced"] .motion-lab.is-playing .motion-button,
body[data-motion="reduced"] .motion-lab.is-playing .motion-button::before,
body[data-motion="reduced"] .motion-lab.is-playing .motion-button::after,
body[data-motion="reduced"] .motion-lab.is-playing .motion-button__dot,
body[data-motion="reduced"] .motion-lab.is-playing .motion-button__check { animation:none !important; transform:none !important; }
body[data-motion="reduced"] .motion-lab .motion-timing-scale i::after { width:max(2px,var(--bar)); }
body[data-motion="reduced"] .motion-lab .motion-ease em { left:calc(100% - 16px); }
body[data-motion="reduced"] .motion-lab .motion-button--confirm { background:var(--type-accent); color:var(--type-on-accent); }
body[data-motion="reduced"] .motion-lab .motion-button__check { opacity:1; }
body[data-motion="reduced"] .motion-lab .motion-contract--navigate .motion-demo > section,
body[data-motion="reduced"] .motion-lab .motion-contract--reorder .motion-demo section > div,
body[data-motion="reduced"] .motion-lab .motion-contract--celebrate figure,
body[data-motion="reduced"] .motion-lab .motion-sequence__approval,
body[data-motion="reduced"] .motion-lab .motion-sequence__success { transform:none; }

@keyframes motion-bar { from { width:2px; } to { width:max(2px,var(--bar)); } }
@keyframes motion-ease-run { from { left:0; } to { left:calc(100% - 16px); } }
@keyframes motion-enter { from { opacity:0; transform:translate3d(0,var(--motion-distance),0); } to { opacity:1; transform:translate3d(0,0,0); } }
@keyframes motion-heavy-enter { 0% { opacity:0; transform:translate3d(0,calc(var(--motion-distance) * 1.8),0) scale(.975); } 62% { opacity:1; transform:translate3d(0,-1px,0) scale(1.002); } 100% { opacity:1; transform:translate3d(0,0,0) scale(1); } }
@keyframes motion-success { 0% { opacity:0; transform:translate3d(0,calc(var(--motion-distance) * 1.5),0) rotate(-1.5deg) scale(.94); } 58% { opacity:1; transform:translate3d(0,-4px,0) rotate(.8deg) scale(1.02); } 78% { transform:translate3d(0,1px,0) rotate(-.25deg) scale(.996); } 100% { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(1); } }
@keyframes motion-button-press { 0%,100% { transform:translate3d(0,0,0) scale(1); box-shadow:0 8px 20px -18px rgba(20,20,18,.4); } 32%,46% { transform:translate3d(0,2px,0) scale(.975); box-shadow:0 2px 8px -7px rgba(20,20,18,.35); } 72% { transform:translate3d(0,-1px,0) scale(1.006); } }
@keyframes motion-button-lift { 0%,100% { transform:translate3d(0,0,0); box-shadow:0 8px 20px -18px rgba(20,20,18,.4); } 48%,62% { transform:translate3d(0,-5px,0); box-shadow:0 18px 30px -18px rgba(20,20,18,.5); } 82% { transform:translate3d(0,1px,0); } }
@keyframes motion-button-progress { 0% { transform:scaleX(0); } 18% { transform:scaleX(.14); } 72% { transform:scaleX(.74); } 100% { transform:scaleX(1); } }
@keyframes motion-button-spin { to { transform:rotate(360deg); } }
@keyframes motion-button-confirm-color { 0%,18% { background:var(--motion-surface); color:var(--type-accent); } 100% { background:var(--type-accent); color:var(--type-on-accent); } }
@keyframes motion-button-confirm-fill { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes motion-button-check { 0%,28% { opacity:0; transform:scale(.6) rotate(-16deg); } 60% { opacity:1; transform:scale(1.16) rotate(5deg); } 78% { transform:scale(.94) rotate(-2deg); } 100% { opacity:1; transform:scale(1) rotate(0); } }
@keyframes motion-ring { 0% { opacity:.55; transform:scale(1); } 100% { opacity:0; transform:scale(1.12); } }
@keyframes motion-popover { from { opacity:0; transform:translate(-50%,calc(var(--motion-distance) * -1)) scale(.98); transform-origin:top center; } to { opacity:1; transform:translate(-50%,0) scale(1); transform-origin:top center; } }
@keyframes motion-disclose { from { opacity:0; transform:scaleY(.78); } to { opacity:1; transform:scaleY(1); } }
@keyframes motion-navigate { from { transform:translateX(0); } to { transform:translateX(-39%); } }
@keyframes motion-reorder-down { from { transform:translateY(0); } to { transform:translateY(56px); } }
@keyframes motion-reorder-up { from { transform:translateY(0); box-shadow:none; } to { transform:translateY(-56px); box-shadow:0 14px 28px -20px rgba(20,20,18,.55); } }
@keyframes motion-progress { from { width:8%; } to { width:72%; } }
@keyframes motion-celebrate { 0% { opacity:0; transform:translate3d(0,calc(var(--motion-distance) * 1.8),0) rotate(-5deg) scale(.91); } 46% { opacity:1; transform:translate3d(0,-6px,0) rotate(2.6deg) scale(1.035); } 66% { transform:translate3d(0,2px,0) rotate(-1.3deg) scale(.987); } 82% { transform:translate3d(0,-1px,0) rotate(.55deg) scale(1.007); } 100% { opacity:1; transform:translate3d(0,0,0) rotate(0) scale(1); } }
@keyframes motion-reduced-fade { from { opacity:.45; } to { opacity:1; } }

@media (max-width:1180px) {
  .motion-audit { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .motion-contract-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .motion-sequence { grid-template-columns:150px minmax(0,1fr); }
  .motion-sequence > main { grid-template-columns:1fr; }
  .motion-sequence__request, .motion-sequence__response, .motion-sequence__approval { grid-column:1; grid-row:auto; }
  .motion-sequence__approval strong { max-width:none; margin:25px 0 20px; }
  .motion-sequence__success { right:24px; bottom:18px; }
  .motion-button-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:900px) {
  .motion-foundations { grid-template-columns:1fr; }
}

@media (max-width:720px) {
  .motion-lab { padding:24px 12px; }
  .motion-lab__intro { align-items:start; flex-direction:column; gap:12px; }
  .motion-lab__intro > p { text-align:left; }
  .motion-audit { overflow-x:auto; grid-template-columns:repeat(4,240px); }
  .motion-toolbar { align-items:stretch; flex-direction:column; }
  .motion-toolbar > p { margin:0; text-align:left; }
  .motion-replay { justify-content:center; }
  .motion-rule-banner { grid-template-columns:44px 1fr; padding:14px; }
  .motion-rule-banner__mark { width:42px; height:42px; }
  .motion-foundation-card > header, .motion-sequence-card > header { align-items:start; flex-direction:column; }
  .motion-foundation-card > header p, .motion-sequence-card > header p { text-align:left; }
  .motion-timing-scale { padding:22px 16px; }
  .motion-timing-scale > div { grid-template-columns:70px minmax(0,1fr) 38px; gap:8px; }
  .motion-easing-list { padding:22px 16px; }
  .motion-ease { grid-template-columns:105px 1fr; gap:12px; }
  .motion-sequence { grid-template-columns:1fr; }
  .motion-sequence > aside { display:flex; align-items:center; overflow:hidden; padding:14px 16px; border-right:0; border-bottom:1px solid var(--motion-line); }
  .motion-sequence > aside b { margin:0 auto 0 0; }
  .motion-sequence > aside span { flex:0 0 auto; padding:7px 9px; }
  .motion-sequence > main { grid-template-columns:1fr; padding:20px 16px 88px; }
  .motion-sequence__success { right:16px; bottom:16px; left:16px; min-width:0; }
  .motion-contract-grid { grid-template-columns:1fr; }
  .motion-button-card > header { align-items:start; flex-direction:column; }
  .motion-button-card > header p { text-align:left; }
  .motion-button-grid { grid-template-columns:1fr; }
  .motion-button-grid article { min-height:190px; }
  .motion-contract--celebrate { grid-column:auto; }
  .motion-contract--celebrate .motion-demo { grid-template-columns:1fr; }
  .motion-contract--celebrate section { text-align:center; }
  .motion-contract--celebrate section strong { margin-right:auto; margin-left:auto; }
  .motion-method { grid-template-columns:1fr; gap:8px; }
}

/* Accessibility Lab */
.accessibility-lab {
  --a11y-accent:#171715;
  --a11y-accent-ink:#fff;
  --a11y-wash:rgba(23,23,21,.055);
  --a11y-soft:rgba(23,23,21,.09);
  --a11y-line:var(--studio-line);
  --a11y-radius:var(--radius-sm);
  width:min(100%,1560px);
  margin:0 auto;
  padding:clamp(28px,4vw,68px);
  font-family:var(--selected-ui);
}
.accessibility-lab[hidden] { display:none; }
body[data-expression="frameset"] .accessibility-lab { --a11y-accent:#155eef; --a11y-accent-ink:#fff; --a11y-wash:rgba(21,94,239,.065); --a11y-soft:rgba(21,94,239,.12); --a11y-radius:var(--radius-none); }
body[data-expression="play"] .accessibility-lab { --a11y-accent:#c53532; --a11y-accent-ink:#fff; --a11y-wash:rgba(197,53,50,.075); --a11y-soft:rgba(197,53,50,.13); --a11y-radius:var(--radius-xl); }
body[data-theme="dark"] .accessibility-lab { --a11y-accent:#f3f2ec; --a11y-accent-ink:#171715; --a11y-wash:rgba(255,255,255,.055); --a11y-soft:rgba(255,255,255,.1); }
body[data-theme="dark"][data-expression="frameset"] .accessibility-lab { --a11y-accent:#78a8ff; --a11y-accent-ink:#0a1730; --a11y-wash:rgba(79,135,255,.1); --a11y-soft:rgba(79,135,255,.18); }
body[data-theme="dark"][data-expression="play"] .accessibility-lab { --a11y-accent:#ff7b76; --a11y-accent-ink:#28100f; --a11y-wash:rgba(255,123,118,.1); --a11y-soft:rgba(255,123,118,.18); }

.accessibility-lab__intro { display:flex; align-items:end; justify-content:space-between; gap:36px; min-height:108px; margin-bottom:24px; }
.accessibility-lab__intro h1 { max-width:900px; margin:8px 0 0; font:600 clamp(42px,5vw,74px)/.98 var(--selected-display); letter-spacing:-.05em; text-wrap:balance; }
.accessibility-lab__intro > p { max-width:700px; margin:0 0 4px; color:var(--studio-muted); font-size:16px; line-height:1.58; text-align:left; text-wrap:pretty; }

.accessibility-audit { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin:0 0 24px; border:1px solid var(--a11y-line); border-radius:calc(var(--a11y-radius) + 8px); overflow:hidden; background:var(--studio-control); }
.accessibility-audit a { display:flex; min-width:0; min-height:190px; padding:24px; flex-direction:column; border-right:1px solid var(--a11y-line); transition:background-color 180ms ease; }
.accessibility-audit a:last-child { border-right:0; }
.accessibility-audit a:hover { background:var(--a11y-wash); }
.accessibility-audit a > span { color:var(--studio-muted); font:600 12px var(--selected-mono); }
.accessibility-audit a > strong { margin:24px 0 9px; font:600 23px/1.05 var(--selected-display); }
.accessibility-audit a > p { margin:0; color:var(--studio-muted); font-size:14px; line-height:1.5; }
.accessibility-audit a > b { margin-top:auto; padding-top:18px; color:var(--a11y-accent); font-size:12px; line-height:1.35; letter-spacing:.08em; text-transform:uppercase; }

.accessibility-toolbar { position:sticky; top:var(--control-deck-sticky-offset); z-index:9; display:flex; align-items:end; gap:16px; margin:0 0 32px; padding:12px 14px; border:1px solid var(--a11y-line); border-radius:calc(var(--a11y-radius) + 8px); background:color-mix(in srgb,var(--studio-bg) 91%,transparent); box-shadow:0 14px 32px -28px rgba(0,0,0,.65); backdrop-filter:blur(18px); }
.accessibility-toolbar__group { display:grid; gap:6px; }
.accessibility-toolbar__group > span { color:var(--studio-muted); font:700 12px/1.35 var(--selected-mono); letter-spacing:.1em; text-transform:uppercase; }
.accessibility-switch { display:flex; padding:3px; border:1px solid var(--a11y-line); border-radius:var(--radius-full); background:var(--studio-control); }
.accessibility-switch button { min-height:38px; padding:0 16px; border:0; border-radius:var(--radius-full); background:transparent; color:var(--studio-muted); font-weight:700; }
.accessibility-switch button:is(.is-active,[aria-pressed="true"]) { background:var(--a11y-accent); color:var(--a11y-accent-ink); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--a11y-accent-ink) 24%,transparent); }
.accessibility-focus-toggle { display:flex; min-height:46px; padding:0 17px; align-items:center; gap:9px; border:1px solid var(--a11y-line); border-radius:var(--radius-full); background:var(--studio-control); font-weight:700; }
.accessibility-focus-toggle > span { font-size:19px; }
.accessibility-focus-toggle:is(.is-active,[aria-pressed="true"]) { border-color:var(--a11y-accent); background:var(--a11y-accent); color:var(--a11y-accent-ink); }
.accessibility-toolbar > p { margin:0 6px 10px auto; color:var(--studio-muted); font:500 12px var(--selected-mono); text-align:left; }

.accessibility-rule-banner { display:grid; grid-template-columns:62px minmax(0,1fr); gap:18px; margin:0 0 28px; padding:22px; align-items:center; border:1px solid color-mix(in srgb,var(--a11y-accent) 28%,transparent); border-radius:calc(var(--a11y-radius) + 10px); background:var(--a11y-wash); }
.accessibility-rule-banner__mark { display:grid; place-items:center; width:58px; height:58px; border-radius:var(--a11y-radius); background:var(--a11y-accent); color:var(--a11y-accent-ink); font:700 22px var(--selected-display); }
.accessibility-rule-banner strong { display:block; font-size:18px; letter-spacing:-.02em; }
.accessibility-rule-banner p { max-width:1050px; margin:5px 0 0; color:var(--studio-muted); line-height:1.5; }

.accessibility-principles { margin-bottom:28px; border:1px solid var(--a11y-line); border-radius:calc(var(--a11y-radius) + 8px); overflow:hidden; background:var(--studio-control); }
.accessibility-principles > header { display:flex; align-items:end; justify-content:space-between; gap:20px; padding:22px 24px; border-bottom:1px solid var(--a11y-line); }
.accessibility-principles > header > span { color:var(--studio-muted); font:700 11px var(--selected-mono); letter-spacing:.1em; text-transform:uppercase; }
.accessibility-principles > header > strong { font:600 22px/1.1 var(--selected-display); letter-spacing:-.02em; text-align:left; }
.accessibility-principles > div { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); }
.accessibility-principles article { min-height:164px; padding:22px; border-right:1px solid var(--a11y-line); }
.accessibility-principles article:last-child { border-right:0; }
.accessibility-principles article > span { display:grid; place-items:center; width:32px; height:32px; margin-bottom:18px; border-radius:50%; background:var(--a11y-soft); color:var(--a11y-accent); font:700 11px var(--selected-mono); }
.accessibility-principles article > strong { display:block; font-size:16px; }
.accessibility-principles article > p { margin:7px 0 0; color:var(--studio-muted); font-size:14px; line-height:1.48; }

.accessibility-task-card { margin-bottom:32px; border:1px solid var(--a11y-line); border-radius:calc(var(--a11y-radius) + 12px); overflow:hidden; background:var(--studio-control); }
.accessibility-task-card > header { display:flex; align-items:end; justify-content:space-between; gap:24px; padding:24px 28px; border-bottom:1px solid var(--a11y-line); }
.accessibility-task-card > header div > span,.accessibility-atlas-heading span { display:block; margin-bottom:6px; color:var(--studio-muted); font:700 12px/1.35 var(--selected-mono); letter-spacing:.1em; text-transform:uppercase; }
.accessibility-task-card > header div > strong,.accessibility-atlas-heading strong { display:block; font:600 25px/1.08 var(--selected-display); letter-spacing:-.025em; }
.accessibility-task-card > header > p { max-width:520px; margin:0; color:var(--studio-muted); font-size:14px; line-height:1.5; text-align:left; }
.accessibility-task-grid { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); }
.accessibility-task-grid > form { min-width:0; padding:clamp(24px,4vw,52px); border-right:1px solid var(--a11y-line); background:color-mix(in srgb,var(--studio-control) 74%,var(--a11y-wash)); }
.accessibility-form-heading { display:flex; align-items:center; gap:13px; margin-bottom:30px; }
.accessibility-form-heading > span { display:grid; place-items:center; width:42px; height:42px; flex:0 0 auto; border-radius:var(--a11y-radius); background:var(--a11y-accent); color:var(--a11y-accent-ink); }
.accessibility-form-heading small,.accessibility-form-heading strong { display:block; }
.accessibility-form-heading small { color:var(--studio-muted); font:700 10px var(--selected-mono); letter-spacing:.1em; text-transform:uppercase; }
.accessibility-form-heading strong { margin-top:3px; font-size:19px; }
.accessibility-field { margin-bottom:24px; }
.accessibility-field label,.accessibility-task-grid legend { display:block; margin-bottom:8px; font-weight:700; }
.accessibility-field label span { color:var(--studio-muted); font-size:.82em; font-weight:500; }
.accessibility-field input { width:100%; min-height:50px; padding:10px 13px; border:1px solid color-mix(in srgb,var(--studio-ink) 32%,transparent); border-radius:var(--a11y-radius); background:var(--studio-control); color:var(--studio-ink); font:inherit; }
.accessibility-field input:focus-visible,.accessibility-task-grid input:focus-visible,.accessibility-contract input:focus-visible { outline:3px solid #5a4af4; outline-offset:3px; }
.accessibility-field input[aria-invalid="true"] { border-color:#b42318; box-shadow:0 0 0 1px #b42318; }
.accessibility-field > p { margin:7px 0 0; color:var(--studio-muted); font-size:.82em; line-height:1.45; }
.accessibility-field .accessibility-error { display:flex; align-items:start; gap:7px; color:#9e241c; font-weight:700; }
.accessibility-field .accessibility-error[hidden] { display:none; }
.accessibility-error > span { display:grid; place-items:center; width:18px; height:18px; flex:0 0 auto; border-radius:50%; background:#b42318; color:#fff; font-size:11px; }
.accessibility-task-grid fieldset { display:flex; margin:0 0 22px; padding:0; flex-wrap:wrap; gap:10px; border:0; }
.accessibility-task-grid fieldset label,.accessibility-check { display:flex; min-height:44px; padding:9px 12px; align-items:center; gap:9px; border:1px solid var(--a11y-line); border-radius:var(--a11y-radius); background:var(--studio-control); }
.accessibility-task-grid fieldset label { flex:1 1 180px; }
.accessibility-task-grid input[type="radio"],.accessibility-task-grid input[type="checkbox"] { width:20px; height:20px; flex:0 0 auto; accent-color:var(--a11y-accent); }
.accessibility-check { width:fit-content; margin-bottom:22px; font-weight:600; }
.accessibility-submit { display:flex; min-height:50px; width:100%; padding:0 18px; align-items:center; justify-content:space-between; border:0; border-radius:var(--a11y-radius); background:var(--a11y-accent); color:var(--a11y-accent-ink); font-weight:800; }
.accessibility-form-status { min-height:1.4em; margin:10px 0 0; color:var(--studio-muted); font-size:.82em; line-height:1.45; }
.accessibility-task-grid > aside { padding:clamp(24px,4vw,52px); background:var(--a11y-wash); }
.accessibility-aside-kicker { color:var(--a11y-accent); font:700 11px var(--selected-mono); letter-spacing:.1em; text-transform:uppercase; }
.accessibility-task-grid > aside h3 { max-width:440px; margin:20px 0 28px; font:600 clamp(28px,3vw,46px)/1 var(--selected-display); letter-spacing:-.04em; text-wrap:balance; }
.accessibility-task-grid > aside ul { display:grid; gap:0; margin:0; padding:0; list-style:none; }
.accessibility-task-grid > aside li { display:flex; gap:12px; padding:15px 0; border-top:1px solid var(--a11y-line); }
.accessibility-task-grid > aside li > i { display:grid; place-items:center; width:30px; height:30px; flex:0 0 auto; border-radius:50%; background:var(--a11y-accent); color:var(--a11y-accent-ink); font-style:normal; font-weight:800; }
.accessibility-task-grid > aside li strong,.accessibility-task-grid > aside li small { display:block; }
.accessibility-task-grid > aside li small { margin-top:4px; color:var(--studio-muted); font-size:12px; line-height:1.42; }
.accessibility-stress-copy { display:none; margin:22px 0 0; padding:16px; border:1px solid color-mix(in srgb,var(--a11y-accent) 24%,transparent); border-radius:var(--a11y-radius); background:var(--studio-control); color:var(--studio-muted); line-height:1.55; }
.accessibility-lab[data-a11y-lens="stress"] .accessibility-stress-copy { display:block; }
.accessibility-lab[data-a11y-lens="stress"] .accessibility-task-card { box-shadow:inset 0 4px 0 var(--a11y-accent); }

.accessibility-atlas-heading { display:flex; align-items:end; justify-content:space-between; gap:28px; margin:42px 0 18px; }
.accessibility-atlas-heading > p { max-width:620px; margin:0; color:var(--studio-muted); font-size:14px; line-height:1.5; text-align:left; }
.accessibility-contract-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; }
.accessibility-contract { display:grid; min-width:0; grid-template-rows:auto minmax(220px,1fr) auto; border:1px solid var(--a11y-line); border-radius:calc(var(--a11y-radius) + 7px); overflow:hidden; background:var(--studio-control); }
.accessibility-contract > header { display:flex; gap:12px; padding:18px; border-bottom:1px solid var(--a11y-line); }
.accessibility-contract > header > span { color:var(--studio-muted); font:600 11px var(--selected-mono); }
.accessibility-contract > header strong,.accessibility-contract > header small { display:block; }
.accessibility-contract > header strong { font-size:15px; }
.accessibility-contract > header small { margin-top:4px; color:var(--studio-muted); font-size:10px; }
.accessibility-contract code { font-family:var(--selected-mono); }
.accessibility-demo { position:relative; display:grid; min-width:0; place-items:center; padding:22px; overflow:hidden; background:var(--a11y-wash); }
.accessibility-contract > footer { padding:16px 18px 18px; border-top:1px solid var(--a11y-line); }
.accessibility-contract > footer b { display:block; margin-bottom:5px; color:var(--a11y-accent); font:700 10px var(--selected-mono); letter-spacing:.1em; text-transform:uppercase; }
.accessibility-contract > footer p { margin:0; color:var(--studio-muted); font-size:13px; line-height:1.45; }

.accessibility-contract--contrast .accessibility-demo > div { display:grid; width:100%; gap:9px; }
.accessibility-contract--contrast .accessibility-demo span { display:flex; min-height:42px; padding:8px 11px; align-items:center; gap:9px; border:1px solid currentColor; border-radius:var(--a11y-radius); font-size:13px; font-weight:800; }
.accessibility-contract--contrast .accessibility-demo i { display:grid; place-items:center; width:22px; height:22px; border:1px solid currentColor; border-radius:50%; font-style:normal; }
.accessibility-contract--contrast .is-success { color:#17633a; background:#e8f5ed; }
.accessibility-contract--contrast .is-warning { color:#8d321e; background:#fff0ea; }
.accessibility-contract--contrast .is-neutral { color:#393936; background:#efefec; }
body[data-theme="dark"] .accessibility-contract--contrast .is-success { color:#9fe4bd; background:#173725; }
body[data-theme="dark"] .accessibility-contract--contrast .is-warning { color:#ffc1ad; background:#49251c; }
body[data-theme="dark"] .accessibility-contract--contrast .is-neutral { color:#ecebe5; background:#30302c; }

.accessibility-contract--focus .accessibility-demo { display:flex; flex-wrap:wrap; gap:12px; align-content:center; }
.accessibility-contract--focus button,.accessibility-contract--focus a { min-height:42px; padding:10px 13px; border:1px solid var(--a11y-line); border-radius:var(--a11y-radius); background:var(--studio-control); font-weight:700; }
.accessibility-contract--focus .is-focused { outline:3px solid #5a4af4; outline-offset:3px; }
.accessibility-contract--focus a { text-decoration:underline; text-underline-offset:3px; }

.accessibility-contract--target .accessibility-demo { display:flex; flex-wrap:wrap; gap:16px; align-content:center; }
.accessibility-contract--target button { display:grid; padding:0; place-items:center; border:1px solid var(--a11y-accent); background:var(--studio-control); color:var(--a11y-accent); }
.accessibility-contract--target button:first-child { width:24px; height:24px; border-radius:0; }
.accessibility-contract--target button:nth-child(2) { width:44px; height:44px; border-radius:10px; }
.accessibility-contract--target button i { font:700 9px var(--selected-mono); font-style:normal; }
.accessibility-contract--target p { flex-basis:100%; margin:0; color:var(--studio-muted); font-size:11px; line-height:1.55; text-align:center; }

.accessibility-contract--reflow .accessibility-demo section { width:100%; padding:18px; border:1px solid var(--a11y-line); border-radius:var(--a11y-radius); background:var(--studio-control); }
.accessibility-contract--reflow small,.accessibility-contract--reflow strong { display:block; }
.accessibility-contract--reflow small { color:var(--a11y-accent); font:700 .65em var(--selected-mono); letter-spacing:.08em; }
.accessibility-contract--reflow strong { margin:12px 0 20px; font:600 1.25em/1.12 var(--selected-display); letter-spacing:-.025em; overflow-wrap:anywhere; }
.accessibility-contract--reflow button { min-height:42px; width:100%; border:0; border-radius:var(--a11y-radius); background:var(--a11y-accent); color:var(--a11y-accent-ink); font-size:.78em; font-weight:800; }

.accessibility-contract--semantics .accessibility-demo ul { width:100%; margin:0; padding:0; list-style:none; }
.accessibility-contract--semantics .accessibility-demo li { display:grid; grid-template-columns:82px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid var(--a11y-line); font-size:11px; }
.accessibility-contract--semantics .accessibility-demo li:last-child { border-bottom:0; }
.accessibility-contract--semantics code { color:var(--a11y-accent); font-weight:700; }
.accessibility-contract--semantics span { color:var(--studio-muted); }

.accessibility-contract--motion .accessibility-demo { align-content:center; grid-template-columns:100px 1fr; gap:18px; }
.accessibility-contract--motion figure { position:relative; width:82px; height:100px; margin:0; }
.accessibility-contract--motion figure span { position:absolute; top:5px; left:19px; width:48px; height:58px; border-radius:52% 48% 49% 51%; background:var(--a11y-accent); }
.accessibility-contract--motion figure span::after { content:""; position:absolute; bottom:-6px; left:21px; border-right:4px solid transparent; border-bottom:7px solid var(--a11y-accent); border-left:4px solid transparent; }
.accessibility-contract--motion figure i { position:absolute; top:66px; left:42px; width:1px; height:30px; background:var(--a11y-accent); transform-origin:top; }
.accessibility-contract--motion p { margin:0; color:var(--studio-muted); font-size:11px; line-height:1.55; }
body[data-motion="full"] .accessibility-contract--motion figure { animation:a11y-lift 2.8s ease-in-out infinite alternate; }
body[data-motion="reduced"] .accessibility-contract--motion figure { transform:none; }

.accessibility-contract--error .accessibility-demo { align-content:center; }
.accessibility-contract--error label { display:grid; width:100%; gap:7px; font-size:12px; font-weight:700; }
.accessibility-contract--error input { min-height:42px; width:100%; padding:9px 11px; border:2px solid #b42318; border-radius:var(--a11y-radius); background:var(--studio-control); color:var(--studio-ink); font:inherit; }
.accessibility-contract--error p { display:flex; gap:7px; margin:8px 0 0; color:#9e241c; font-size:11px; font-weight:700; line-height:1.4; }
.accessibility-contract--error p i { display:grid; place-items:center; width:17px; height:17px; flex:0 0 auto; border-radius:50%; background:#b42318; color:#fff; font-style:normal; }
body[data-theme="dark"] .accessibility-contract--error p { color:#ffaaa5; }

.accessibility-contract--structure .accessibility-demo { display:block; }
.accessibility-contract--structure .accessibility-demo > div { display:grid; grid-template-columns:32px 1fr; gap:8px; padding:9px 0; border-bottom:1px solid var(--a11y-line); }
.accessibility-contract--structure .accessibility-demo small { color:var(--a11y-accent); font:700 10px var(--selected-mono); }
.accessibility-contract--structure .accessibility-demo strong,.accessibility-contract--structure .accessibility-demo span { font-size:12px; }
.accessibility-contract--structure .accessibility-demo > p { margin:20px 0 0; padding:12px; border-radius:var(--a11y-radius); background:var(--a11y-soft); font-size:14px; }

.accessibility-lab[data-a11y-scale="200"] .accessibility-task-grid { grid-template-columns:1fr; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-task-grid > form { border-right:0; border-bottom:1px solid var(--a11y-line); font-size:200%; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-form-heading > span { width:1.7em; height:1.7em; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-task-grid fieldset { display:grid; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-task-grid fieldset label { width:100%; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-check { width:100%; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-contract--reflow .accessibility-demo { font-size:200%; }
.accessibility-lab[data-a11y-scale="200"] .accessibility-contract--reflow .accessibility-demo section { padding:12px; }

.accessibility-lab[data-a11y-focus="on"] [data-focus-order] { position:relative; outline:3px solid #5a4af4 !important; outline-offset:4px !important; }
.accessibility-lab[data-a11y-focus="on"] [data-focus-order]::after { content:attr(data-focus-order); position:absolute; z-index:3; top:-10px; right:-10px; display:grid; place-items:center; width:24px; height:24px; border:2px solid #fff; border-radius:50%; background:#5a4af4; color:#fff; font:800 11px var(--selected-mono); box-shadow:0 3px 10px rgba(30,20,90,.28); }
.accessibility-lab[data-a11y-focus="on"] label[data-focus-order]::after { top:-12px; }

.accessibility-method { display:grid; grid-template-columns:220px 1fr; gap:24px; margin-top:16px; padding:24px; border:1px solid var(--a11y-line); border-radius:calc(var(--a11y-radius) + 8px); background:var(--a11y-wash); }
.accessibility-method strong { font:600 19px var(--selected-display); }
.accessibility-method p { margin:0; color:var(--studio-muted); font-size:14px; line-height:1.55; }

.accessibility-lab.is-mobile-preview { max-width:470px; }
.accessibility-lab.is-mobile-preview .accessibility-lab__intro,.accessibility-lab.is-mobile-preview .accessibility-task-card > header,.accessibility-lab.is-mobile-preview .accessibility-atlas-heading { align-items:start; flex-direction:column; gap:12px; }
.accessibility-lab.is-mobile-preview .accessibility-lab__intro > p,.accessibility-lab.is-mobile-preview .accessibility-task-card > header > p,.accessibility-lab.is-mobile-preview .accessibility-atlas-heading > p { text-align:left; }
.accessibility-lab.is-mobile-preview .accessibility-audit { overflow-x:auto; grid-template-columns:repeat(4,240px); }
.accessibility-lab.is-mobile-preview .accessibility-toolbar { align-items:stretch; flex-direction:column; }
.accessibility-lab.is-mobile-preview .accessibility-toolbar > p { margin:2px 0 0; text-align:left; }
.accessibility-lab.is-mobile-preview .accessibility-focus-toggle { justify-content:center; }
.accessibility-lab.is-mobile-preview .accessibility-principles > header { align-items:start; flex-direction:column; }
.accessibility-lab.is-mobile-preview .accessibility-principles > header > strong { text-align:left; }
.accessibility-lab.is-mobile-preview .accessibility-principles > div,.accessibility-lab.is-mobile-preview .accessibility-contract-grid,.accessibility-lab.is-mobile-preview .accessibility-task-grid { grid-template-columns:1fr; }
.accessibility-lab.is-mobile-preview .accessibility-principles article { border-right:0; border-bottom:1px solid var(--a11y-line); }
.accessibility-lab.is-mobile-preview .accessibility-principles article:last-child { border-bottom:0; }
.accessibility-lab.is-mobile-preview .accessibility-task-grid > form { border-right:0; border-bottom:1px solid var(--a11y-line); }
.accessibility-lab.is-mobile-preview .accessibility-method { grid-template-columns:1fr; gap:8px; }

@keyframes a11y-lift { from { transform:translateY(5px) rotate(-1deg); } to { transform:translateY(-5px) rotate(1deg); } }

@media (max-width:1180px) {
  .accessibility-audit,.accessibility-contract-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .accessibility-audit a:nth-child(2) { border-right:0; }
  .accessibility-audit a:nth-child(-n+2) { border-bottom:1px solid var(--a11y-line); }
}

@media (max-width:820px) {
  .accessibility-task-grid { grid-template-columns:1fr; }
  .accessibility-task-grid > form { border-right:0; border-bottom:1px solid var(--a11y-line); }
  .accessibility-principles > div { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .accessibility-principles article:nth-child(2) { border-right:0; }
  .accessibility-principles article:nth-child(-n+2) { border-bottom:1px solid var(--a11y-line); }
}

@media (max-width:720px) {
  .accessibility-lab { padding:24px 12px; }
  .accessibility-lab__intro,.accessibility-task-card > header,.accessibility-atlas-heading { align-items:start; flex-direction:column; gap:12px; }
  .accessibility-lab__intro > p,.accessibility-task-card > header > p,.accessibility-atlas-heading > p { text-align:left; }
  .accessibility-audit { overflow-x:auto; grid-template-columns:repeat(4,240px); }
  .accessibility-audit a { border-right:1px solid var(--a11y-line) !important; border-bottom:0 !important; }
  .accessibility-toolbar { align-items:stretch; flex-direction:column; }
  .accessibility-toolbar > p { margin:2px 0 0; text-align:left; }
  .accessibility-focus-toggle { justify-content:center; }
  .accessibility-principles > header { align-items:start; flex-direction:column; }
  .accessibility-principles > header > strong { text-align:left; }
  .accessibility-principles > div,.accessibility-contract-grid { grid-template-columns:1fr; }
  .accessibility-principles article { border-right:0; border-bottom:1px solid var(--a11y-line); }
  .accessibility-principles article:last-child { border-bottom:0; }
  .accessibility-method { grid-template-columns:1fr; gap:8px; }
}

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

/* Closeout QA: supporting copy follows its heading in the same reading column. */
:is(
  .preview-meta,
  .component-nav__heading,
  .component-canvas__header,
  .icon-lab__intro,
  .illustration-lab__intro,
  .illustration-lab__heading,
  .color-lab__intro,
  .color-lab__heading,
  .typography-lab__intro,
  .type-section-heading,
  .text-behavior-lab__intro,
  .layout-lab__intro,
  .layout-atlas-heading,
  .depth-lab__intro,
  .depth-atlas-heading,
  .motion-lab__intro,
  .motion-atlas-heading,
  .accessibility-lab__intro,
  .accessibility-atlas-heading
) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  align-items: start;
  gap: 10px;
}

:is(
  .preview-meta,
  .component-nav__heading,
  .component-canvas__header,
  .icon-lab__intro,
  .illustration-lab__intro,
  .illustration-lab__heading,
  .color-lab__intro,
  .color-lab__heading,
  .typography-lab__intro,
  .type-section-heading,
  .text-behavior-lab__intro,
  .layout-lab__intro,
  .layout-atlas-heading,
  .depth-lab__intro,
  .depth-atlas-heading,
  .motion-lab__intro,
  .motion-atlas-heading,
  .accessibility-lab__intro,
  .accessibility-atlas-heading
) > p {
  max-width: 72ch;
  margin: 0;
  text-align: left;
  text-wrap: pretty;
}

:is(
  .space-scale-card,
  .grid-profile-card,
  .depth-stack-card,
  .depth-anatomy-card,
  .depth-scene-card,
  .motion-foundation-card,
  .motion-sequence-card,
  .accessibility-task-card
) > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-content: start;
  align-items: start;
  gap: 8px;
}

:is(
  .space-scale-card,
  .grid-profile-card,
  .depth-stack-card,
  .depth-anatomy-card,
  .depth-scene-card,
  .motion-foundation-card,
  .motion-sequence-card,
  .accessibility-task-card
) > header > p {
  max-width: 68ch;
  margin: 0;
  text-align: left;
  text-wrap: pretty;
}

.accessibility-principles > header {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: start;
  align-items: start;
  gap: 8px;
}

.accessibility-principles > header > strong,
:is(.text-stress-toolbar, .layout-toolbar, .depth-toolbar, .motion-toolbar, .accessibility-toolbar) > p {
  text-align: left;
}

:is(
  .icon-lab__intro,
  .illustration-lab__intro,
  .color-lab__intro,
  .typography-lab__intro,
  .text-behavior-lab__intro,
  .layout-lab__intro,
  .depth-lab__intro,
  .motion-lab__intro,
  .accessibility-lab__intro
) h1 {
  line-height: .98;
}

.hero-copy, .hero-copy h2, .hero-deck, .specimen-hero > *, .collection > *, .collection-card { min-width: 0; }
.hero-copy h2 { max-width: 100%; }
.hero-actions > button { max-width: 100%; overflow-wrap: anywhere; }

/* Shared containment guardrails: quiet at normal sizes, protective under expansion. */
img, video, canvas, svg { max-inline-size: 100%; }
:where(main, .studio-header, .control-deck) :where(section, article, header, footer, nav, div) { min-inline-size: 0; }
:where(button, input, select, textarea) { max-inline-size: 100%; }
:where(h1, h2, h3, h4, p, li, dt, dd, summary) { overflow-wrap: break-word; }

/* Compact-canvas QA: wide demonstrations own their scroll; the document never does. */
:where(main, .studio-header, .control-deck) :where(form, fieldset, figure, figcaption, dl, ol, ul, pre) {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:is(
  .component-nav nav,
  .component-comparison,
  .icon-filter,
  .icon-expression-key,
  .illustration-expression-key,
  .illustration-atlas__scroll,
  .ds-table-wrap,
  .text-control-frame nav,
  .text-overflow-frame pre,
  .text-chat-answer pre,
  .text-data-table,
  .text-audit,
  .layout-audit,
  .space-ruler,
  .depth-audit,
  .motion-audit,
  .accessibility-audit
) {
  max-inline-size: 100%;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
}

.text-behavior-lab[data-text-scale="200"] .text-limits-frame dl div {
  grid-template-columns: minmax(0, 1fr);
  gap: .3em;
}

/* Text acceptance: functional labels grow vertically and never depend on clipping. */
:is(
  .nav-primary button,
  .nav-secondary button,
  .mobile-nav-sheet section button,
  .segment,
  .text-toggle,
  .component-nav nav button,
  .batch-switch button,
  .ds-button,
  .ds-segmented button,
  .ds-menu summary,
  .ds-drawer > a,
  .ds-popover summary,
  .ds-combobox summary,
  .illustration-view-switch button,
  .icon-style-switch button,
  .icon-filter button,
  .palette-card__footer button,
  .text-stress-switch button
) {
  line-height: 1.25;
  overflow-wrap: break-word;
}

:is(
  .preview-meta,
  .component-nav__heading,
  .component-canvas__header,
  .icon-lab__intro,
  .illustration-lab__intro,
  .illustration-lab__heading,
  .color-lab__intro,
  .color-lab__heading,
  .typography-lab__intro,
  .type-section-heading,
  .text-behavior-lab__intro,
  .layout-lab__intro,
  .layout-atlas-heading,
  .depth-lab__intro,
  .depth-atlas-heading,
  .motion-lab__intro,
  .motion-atlas-heading,
  .accessibility-lab__intro,
  .accessibility-atlas-heading
) > :first-child {
  min-inline-size: 0;
  max-inline-size: 100%;
}

:is(.text-overflow-frame dd, .text-data-table [role="row"] > *, .ds-upload-list strong, .ds-upload-list small) {
  overflow-wrap: anywhere;
}

.text-behavior-lab[data-text-scale="200"] :is(.text-specimen > header, .text-specimen > footer) {
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.text-behavior-lab[data-text-scale="200"] .text-specimen > header {
  flex-direction: column;
  padding-block: 12px;
}

.text-behavior-lab[data-text-scale="200"] .text-specimen > header b { white-space: normal; }
.text-behavior-lab [lang="de"] { hyphens: auto; }

@media (max-width: 420px) {
  .studio-header { padding-inline: 12px; }
  .mobile-nav-sheet__surface { padding-inline: 12px; }
  .control-deck { padding-inline: 12px; }
  .control-group--type { flex: 1 0 100%; }
  .control-group--type select { width: 100%; }
  .type-system-card dl { grid-template-columns: minmax(0, 1fr); }
  .text-limits-frame dl div { grid-template-columns: minmax(0, 1fr); gap: .3em; }
  .object-card > footer { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .depth-anatomy article { grid-template-columns: 52px minmax(0, 1fr); }
  .depth-anatomy article > :last-child { grid-column: 2; }
  .motion-ease { grid-template-columns: minmax(0, 1fr); }
  .motion-timing-scale > div { grid-template-columns: 62px minmax(0, 1fr); }
  .motion-timing-scale > div > :last-child { grid-column: 2; }
  .accessibility-contract--motion .accessibility-demo { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 360px) {
  .mobile-nav-categories { display: none; }
  .mobile-nav-category-select-wrap { display: block; }
}