:root {
  color-scheme: dark;
  --bg: #060606;
  --panel: rgba(18, 18, 18, 0.9);
  --panel-strong: rgba(10, 10, 10, 0.96);
  --panel-soft: rgba(28, 28, 28, 0.8);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #f1eee8;
  --muted: #b1aaa0;
  --accent: #d6cfc2;
  --accent-soft: rgba(214, 207, 194, 0.14);
  --success: #b8c7b4;
  --warning: #d8c3a4;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.35);
  --page-radial: rgba(255, 255, 255, 0.05);
  --page-gradient-start: #0b0b0b;
  --page-gradient-end: #040404;
  --sidebar-surface: rgba(7, 7, 7, 0.94);
  --block-surface-top: rgba(24, 24, 24, 0.96);
  --block-surface-bottom: rgba(10, 10, 10, 0.94);
  --nav-surface: rgba(255, 255, 255, 0.03);
  --nav-surface-subtle: rgba(255, 255, 255, 0.02);
  --nav-active-top: rgba(214, 207, 194, 0.18);
  --nav-active-bottom: rgba(214, 207, 194, 0.06);
  --nav-active-border: rgba(214, 207, 194, 0.32);
  --registry-secondary-600: #165ec5;
  --registry-secondary-600-outline: rgba(22, 94, 197, 0.32);
  --registry-secondary-600-outline-strong: rgba(22, 94, 197, 0.72);
  --registry-secondary-600-shadow: rgba(22, 94, 197, 0.16);
  --color-swatch-width: 27px;
  --color-swatch-gap: 4px;
  --color-runway-width: 430px;
  --color-runway-third-width: 140.6667px;
  --color-runway-quarter-width: 104.5px;
  --color-runway-margin-inline: 10px;
  --color-runway-padding: 5px;
  --registry-sidebar-column-width: 216px;
  --registry-detail-column-width: 420px;
  --registry-input-detail-column-width: 620px;
  --registry-artifact-choice-column-width: 200px;
  --registry-input-pattern-column-min-width: 240px;
  --registry-input-pattern-column-width: 440px;
  --registry-input-preview-column-min-width: 360px;
  --registry-input-preview-card-min-width: 30%;
  --registry-input-preview-card-max-width: 45%;
  --registry-input-settings-title-column-width: 172px;
  --registry-input-settings-toggle-column-width: 52px;
  --registry-input-settings-control-column-width: 136px;
  --registry-input-settings-swatch-column-width: 30px;
  --registry-icon-group-column-width: 220px;
  --icon-picker-surface-top: rgba(90, 90, 90, 0.96);
  --icon-picker-surface-bottom: rgba(58, 58, 58, 0.98);
  --icon-picker-surface-hover-top: rgba(104, 104, 104, 0.98);
  --icon-picker-surface-hover-bottom: rgba(68, 68, 68, 1);
  --icon-picker-image-filter: brightness(0) invert(1);
  font-family: "SF Pro Display", "Segoe UI", sans-serif;
}

:root[data-app-theme="light"] {
  color-scheme: light;
  --bg: #f5f1ea;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-strong: rgba(255, 255, 255, 0.98);
  --panel-soft: rgba(242, 238, 231, 0.86);
  --line: rgba(17, 17, 17, 0.12);
  --line-strong: rgba(17, 17, 17, 0.2);
  --text: #181614;
  --muted: #6a655d;
  --accent: #4e4942;
  --accent-soft: rgba(78, 73, 66, 0.1);
  --success: #2f6b4e;
  --warning: #8c6a21;
  --shadow: 0 24px 80px rgba(40, 30, 20, 0.08);
  --page-radial: rgba(17, 17, 17, 0.04);
  --page-gradient-start: #faf8f4;
  --page-gradient-end: #f0ebe4;
  --sidebar-surface: rgba(250, 248, 244, 0.94);
  --block-surface-top: rgba(255, 255, 255, 0.98);
  --block-surface-bottom: rgba(245, 241, 234, 0.94);
  --nav-surface: rgba(17, 17, 17, 0.03);
  --nav-surface-subtle: rgba(17, 17, 17, 0.02);
  --nav-active-top: rgba(78, 73, 66, 0.14);
  --nav-active-bottom: rgba(78, 73, 66, 0.06);
  --nav-active-border: rgba(78, 73, 66, 0.24);
  --icon-picker-surface-top: rgba(228, 223, 214, 0.98);
  --icon-picker-surface-bottom: rgba(204, 197, 186, 0.98);
  --icon-picker-surface-hover-top: rgba(234, 229, 220, 1);
  --icon-picker-surface-hover-bottom: rgba(212, 205, 194, 1);
  --icon-picker-image-filter: brightness(0) saturate(100%);
}

* {
  box-sizing: border-box;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

*::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background:
    radial-gradient(circle at top left, var(--page-radial), transparent 24%),
    linear-gradient(180deg, var(--page-gradient-start) 0%, var(--page-gradient-end) 100%);
  color: var(--text);
}

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

button,
a {
  font: inherit;
}

.app-shell {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  overflow: hidden;
}

.sidebar-shell {
  display: flex;
  flex-direction: column;
  justify-self: stretch;
  gap: 0;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: 8px 4px;
  border-right: 1px solid var(--line);
  background: var(--sidebar-surface);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}

.brand-block,
.sidebar-block {
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, var(--block-surface-top), var(--block-surface-bottom));
  box-shadow: var(--shadow);
}

.brand-eyebrow,
.sidebar-label,
.view-eyebrow,
.section-eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.brand-title,
.view-title,
.section-title,
.family-title {
  margin: 0;
  letter-spacing: -0.03em;
}

.brand-title {
  font-size: 20px;
}

.brand-copy,
.view-copy,
.section-copy,
.family-copy,
.artifact-summary,
.input-rule-list,
.note-list,
.sidebar-link,
.helper-copy,
.facts-copy {
  color: var(--muted);
}

.brand-copy {
  margin: 10px 0 0;
  line-height: 1.55;
}

.sidebar-nav {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.sidebar-nav--rail {
  gap: 0;
  width: 100%;
}

.sidebar-divider {
  height: 1px;
  margin: 6px 0;
  background: var(--line);
}

.nav-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-width: 0;
  min-height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  border-left: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  font-size: 13px;
  line-height: 1.15;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;
}

.nav-button:hover,
.nav-button:focus-visible {
  border-left-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}

.nav-button.is-active {
  border-left-color: var(--registry-secondary-600-outline-strong);
  background: rgba(255, 255, 255, 0.05);
  color: color-mix(in srgb, var(--registry-secondary-600) 74%, var(--text) 26%);
}

.nav-button--subtle {
  color: var(--muted);
}

.nav-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.nav-button.is-active .nav-count {
  background: rgba(214, 207, 194, 0.14);
  color: var(--text);
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.stat-card {
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.03);
}

.stat-value {
  font-size: 26px;
  font-weight: 700;
}

.stat-label {
  font-size: 12px;
  color: var(--muted);
}

.note-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  line-height: 1.45;
}

.sidebar-link {
  display: inline-flex;
  margin-top: 14px;
  color: var(--accent);
  text-decoration: none;
}

.shell-nav,
.main-header,
.main-banner,
.main-content-shell,
.main-footer {
  min-width: 0;
}

.shell-nav[hidden],
.main-header[hidden],
.main-banner[hidden],
.main-footer[hidden] {
  display: none !important;
}

.shell-nav {
  padding: 0 8px;
}

.main-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 16px;
  min-height: 46px;
  max-height: 46px;
  padding: 2px 8px 4px;
  border-bottom: 1px solid var(--line);
  overflow: hidden;
}

.main-header-title-block {
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.main-header-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 700;
}

.main-header-context {
  margin: 0;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--muted);
  min-width: 0;
  overflow: hidden;
}

.main-header-context-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.main-header-context-crumb {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.main-header-context-separator {
  flex: 0 0 auto;
  color: var(--line-strong);
}

.main-header-context-crumb--id {
  color: var(--accent);
}

.main-header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
}

.main-banner {
  padding: 10px 8px 12px;
}

.main-banner-copy {
  min-width: 0;
}

.main-content-shell {
  display: grid;
  grid-template-columns:
    fit-content(var(--registry-sidebar-column-width))
    minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  min-height: 0;
  padding: 0 8px 20px;
  overflow: hidden;
}

.main-content-shell > * {
  min-height: 0;
  max-height: 100%;
}

.main-content-shell--inputs {
  grid-template-columns:
    fit-content(200px)
    fit-content(var(--registry-input-pattern-column-min-width))
    minmax(0, 1fr);
}

.main-content-shell--buttons,
.main-content-shell--choices,
.main-content-shell--selectors,
.main-content-shell--feedback,
.main-content-shell--navigation,
.main-content-shell--data,
.main-content-shell--overlays {
  grid-template-columns:
    200px
    fit-content(var(--registry-artifact-choice-column-width))
    fit-content(var(--registry-detail-column-width))
    minmax(0, 1fr);
}

.main-content-shell--icons {
  grid-template-columns:
    200px
    fit-content(var(--registry-icon-group-column-width))
    fit-content(var(--registry-detail-column-width))
    minmax(0, 1fr);
}

.main-footer {
  padding: 0 8px 8px;
}

.view-content {
  grid-column: 2 / -1;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  padding: 0;
}

.view-content--family-grid {
  display: contents !important;
}

.view-content--family-grid > .family-block {
  display: contents;
}

.view-content:not(.view-content--family-grid) {
  display: grid;
  gap: 24px;
}

.main-content-shell--inputs > .sidebar-shell,
.main-content-shell--buttons > .sidebar-shell,
.main-content-shell--choices > .sidebar-shell,
.main-content-shell--selectors > .sidebar-shell,
.main-content-shell--feedback > .sidebar-shell,
.main-content-shell--navigation > .sidebar-shell,
.main-content-shell--data > .sidebar-shell,
.main-content-shell--overlays > .sidebar-shell,
.main-content-shell--icons > .sidebar-shell {
  grid-column: 1;
}

.main-content-shell--inputs .input-pattern-column,
.main-content-shell--buttons .family-artifact-rail,
.main-content-shell--choices .family-artifact-rail,
.main-content-shell--selectors .family-artifact-rail,
.main-content-shell--feedback .family-artifact-rail,
.main-content-shell--navigation .family-artifact-rail,
.main-content-shell--data .family-artifact-rail,
.main-content-shell--overlays .family-artifact-rail,
.main-content-shell--icons .icon-group-rail {
  grid-column: 2;
}

.main-content-shell--inputs .input-detail-panel,
.main-content-shell--buttons .button-detail-panel,
.main-content-shell--choices .button-detail-panel,
.main-content-shell--selectors .button-detail-panel,
.main-content-shell--feedback .button-detail-panel,
.main-content-shell--navigation .button-detail-panel,
.main-content-shell--data .button-detail-panel,
.main-content-shell--overlays .button-detail-panel,
.main-content-shell--icons .icon-detail-panel {
  grid-column: 3;
}

.main-content-shell--inputs .input-detail-panel {
  justify-self: stretch;
  width: 100%;
  min-width: 0;
}

.main-content-shell--buttons .family-preview-stage,
.main-content-shell--choices .family-preview-stage,
.main-content-shell--selectors .family-preview-stage,
.main-content-shell--feedback .family-preview-stage,
.main-content-shell--navigation .family-preview-stage,
.main-content-shell--data .family-preview-stage,
.main-content-shell--overlays .family-preview-stage,
.main-content-shell--icons .icon-browser-stage {
  grid-column: 4;
}

.sync-control {
  display: flex;
  align-items: flex-start;
  flex-shrink: 0;
  gap: 0;
  padding: 3px 8px 4px 9px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0)),
    var(--panel-soft);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

.sync-control-copy {
  display: grid;
  width: auto;
  max-width: 152px;
  gap: 1px;
  min-width: 0;
}

.sync-control-label {
  margin: 0;
  font-size: 7px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.sync-control-status {
  margin: 0;
  font-size: 8px;
  line-height: 1.15;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sync-control[data-sync-state="synced"] {
  border-color: rgba(184, 199, 180, 0.24);
}

.sync-control[data-sync-state="synced"] .sync-control-status {
  color: var(--success);
}

.sync-control[data-sync-state="save"],
.sync-control[data-sync-state="updates"] {
  border-color: var(--registry-secondary-600-outline);
}

.sync-control[data-sync-state="save"] .sync-control-status,
.sync-control[data-sync-state="updates"] .sync-control-status {
  color: var(--registry-secondary-600);
}

.sync-control[data-sync-state="conflict"] {
  border-color: rgba(216, 195, 164, 0.34);
}

.sync-control[data-sync-state="conflict"] .sync-control-status {
  color: var(--warning);
}

.sync-control[data-sync-state="unavailable"] {
  border-color: rgba(177, 170, 160, 0.26);
}

.sync-control-actions {
  display: none;
  align-items: center;
  gap: 6px;
}

.sync-control[data-sync-mode="full"] .sync-control-actions {
  display: inline-flex;
}

.sync-control[data-sync-mode="status"] {
  gap: 0;
  padding-right: 8px;
}

.sync-control[data-sync-mode="status"] .sync-control-copy {
  min-width: 0;
}

.sync-control[data-sync-mode="status"] .sync-control-label {
  font-size: 8px;
  letter-spacing: 0.1em;
}

.sync-control[data-sync-mode="status"] .sync-control-status {
  font-size: 8px;
  line-height: 1.15;
}

.sync-control-button {
  min-width: 68px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  font-size: 11px;
  cursor: pointer;
  transition:
    background 140ms ease,
    border-color 140ms ease,
    color 140ms ease;
  align-self: center;
}

.sync-control-button:hover {
  border-color: var(--registry-secondary-600-outline);
  background: rgba(255, 255, 255, 0.08);
}

.sync-control-button:disabled {
  opacity: 0.55;
  cursor: default;
}

.sync-control-button--secondary {
  background: transparent;
  color: var(--muted);
}

.site-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 24px;
  padding: 1px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--panel-soft);
}

.site-theme-button {
  min-width: 42px;
  min-height: 20px;
  padding: 0 8px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  cursor: pointer;
}

.site-theme-button.is-active {
  background: var(--text);
  color: var(--bg);
}

.view-title {
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.04;
}

.view-copy {
  margin: 8px 0 0;
  max-width: 72ch;
  line-height: 1.45;
}

.section-block,
.family-block {
  display: grid;
  gap: 18px;
}

.section-heading,
.family-heading {
  display: grid;
  gap: 8px;
}

.section-title,
.family-title {
  font-size: 28px;
}

.section-copy,
.family-copy {
  margin: 0;
  line-height: 1.6;
}

.artifact-grid {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
}

.artifact-card {
  overflow: hidden;
  display: grid;
  min-height: 100%;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(28, 28, 28, 0.96), rgba(11, 11, 11, 0.98));
}

.artifact-card--directory {
  min-height: 0;
}

.artifact-preview {
  display: grid;
  place-items: center;
  min-height: 170px;
  padding: 10px;
  border-bottom: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0)),
    rgba(8, 8, 8, 0.94);
}

.artifact-preview--specimen {
  background:
    linear-gradient(180deg, rgba(255, 250, 243, 0.96), rgba(246, 239, 230, 0.94));
}

.artifact-preview--input-specimen {
  align-items: start;
}

.artifact-preview img {
  width: 100%;
  height: 100%;
  max-height: 360px;
  object-fit: cover;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.artifact-body {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.artifact-meta-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  order: 4;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

.artifact-type,
.artifact-status,
.artifact-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.artifact-type {
  background: none;
  color: var(--muted);
}

.artifact-status {
  background: none;
  color: var(--muted);
}

.artifact-title {
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
}

.artifact-summary {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
}

.artifact-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  margin: 0;
}

.artifact-facts div {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
}

.artifact-facts dt {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.artifact-facts dd {
  margin: 0;
  line-height: 1.35;
  color: var(--text);
  word-break: break-word;
}

.artifact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.artifact-link {
  display: inline-flex;
  align-items: center;
  min-height: auto;
  padding: 0;
  border-radius: 0;
  border: 0;
  color: var(--accent);
  text-decoration: none;
  background: none;
  font-size: 13px;
}

.artifact-link--primary {
  font-weight: 700;
}

.artifact-link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

.family-board-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(430px, 1fr));
}

.family-block--icons {
  gap: 22px;
}

.family-block--inputs {
  gap: 22px;
}

.family-block--buttons {
  gap: 22px;
}

.icon-browser-layout {
  display: contents;
}

.button-browser-layout {
  display: contents;
}

.input-browser-layout {
  display: contents;
}

.input-pattern-column {
  --registry-input-settings-control-column-width: 116px;
  display: flex;
  flex-direction: column;
  align-content: start;
  align-self: stretch;
  width: auto;
  min-width: min(100%, var(--registry-input-pattern-column-min-width));
  max-width: var(--registry-input-pattern-column-min-width);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  padding: 6px 4px 18px 2px;
  border-right: 1px solid var(--line);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  gap: 10px;
}

.input-pattern-selector-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.input-pattern-size-panel {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  align-content: start;
  min-width: 0;
}

.input-artifact-rail,
.family-artifact-rail {
  display: grid;
  gap: 0;
  align-content: start;
  align-self: stretch;
  min-height: 0;
  padding-right: 4px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.input-artifact-rail,
.family-artifact-rail {
  width: min(100%, var(--registry-artifact-choice-column-width));
}

.input-artifact-rail--pattern {
  width: 100%;
  flex: 0 0 auto;
  min-height: 90px;
  max-height: 105px;
  padding-right: 0;
  border-right: 0;
}

.input-artifact-button,
.family-artifact-button {
  display: grid;
  width: 100%;
  min-height: 30px;
  padding: 4px 6px;
  border: 0;
  border-radius: 0;
  border-left: 1px solid transparent;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition:
    border-color 120ms ease,
    background 120ms ease,
    color 120ms ease;
}

.input-artifact-button,
.family-artifact-button {
  gap: 2px;
}

.input-artifact-button:hover,
.input-artifact-button:focus-visible,
.family-artifact-button:hover,
.family-artifact-button:focus-visible {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.input-artifact-button.is-selected,
.family-artifact-button.is-selected {
  border-left-color: var(--registry-secondary-600-outline-strong);
  background: rgba(255, 255, 255, 0.05);
  color: color-mix(in srgb, var(--registry-secondary-600) 74%, var(--text) 26%);
}

.input-artifact-title,
.family-artifact-title {
  font-size: 8px;
  line-height: 1.1;
  font-weight: 600;
}

.input-artifact-code,
.family-artifact-code {
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.input-preview-panel {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.input-preview-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  align-content: start;
  padding-right: 4px;
  border-right: 1px solid var(--line);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.input-size-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  align-content: start;
  padding: 0 8px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.input-size-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.input-detail-preview-tab {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.input-detail-preview-card {
  display: grid;
  gap: 8px;
  width: max-content;
  min-width: max-content;
  max-width: none;
  justify-self: start;
  padding: 10px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.input-preview-panel--detail,
.input-size-panel--detail {
  gap: 10px;
  min-height: auto;
  align-self: auto;
  padding: 0;
  border-right: 0;
  overflow: visible;
}

.input-preview-panel--detail .input-preview-body,
.input-size-panel--detail .input-size-ladder {
  gap: 10px;
}

.input-size-ladder {
  display: grid;
  gap: 12px;
  align-content: start;
  min-width: 0;
}

.input-size-item {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 0 0 12px 18px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}

.input-size-item:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.input-size-item:hover,
.input-size-item:focus-within {
  background: transparent;
}

.input-size-item.is-selected::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 12px;
  width: 3px;
  border-radius: 999px;
  background: var(--registry-secondary-600);
  box-shadow: 0 0 0 1px var(--registry-secondary-600-outline);
}

.input-size-meta {
  display: flex;
  align-items: baseline;
  gap: 4px;
  min-width: 0;
}

.input-size-code {
  flex: 0 0 auto;
  font-size: 9px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--text);
}

.input-size-purpose {
  min-width: 0;
  font-size: 7px;
  line-height: 1.1;
  color: var(--muted);
  white-space: nowrap;
}

.input-size-preview {
  min-width: 0;
}

.input-size-preview .input-state-stack {
  width: 100%;
}

.input-size-item.is-selected .input-size-code {
  color: color-mix(in srgb, var(--registry-secondary-600) 74%, var(--text) 26%);
}

.family-preview-stage {
  display: grid;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.family-preview-panel {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.family-preview-body {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.input-preview-heading {
  display: grid;
  gap: 6px;
}

.input-preview-title-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.input-preview-body {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.input-browser-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 420px));
  gap: 14px;
  min-width: 0;
  justify-content: start;
  align-content: start;
}

.input-stack-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 420px);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  color: var(--text);
  cursor: default;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.input-stack-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.input-stack-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.artifact-size-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
}

.artifact-size-rail--panel {
  width: auto;
  justify-content: flex-start;
}

.artifact-size-chip {
  min-width: 0;
  height: 18px;
  padding: 0 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  cursor: pointer;
  transition:
    color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.artifact-size-chip:hover,
.artifact-size-chip:focus-visible {
  color: var(--text);
  background: rgba(255, 255, 255, 0.035);
  outline: none;
}

.artifact-size-chip.is-active {
  background: transparent;
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--registry-secondary-600);
}

.artifact-size-copy {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
}

.artifact-size-copy--panel {
  text-align: right;
  align-self: end;
}

.input-stack-item:hover,
.input-stack-item:focus-visible {
  --field-row-surface: transparent;
  background: transparent;
  outline: none;
}

.input-stack-item.is-selected {
  --field-row-surface: transparent;
  background: transparent;
}

:root[data-app-theme="light"] .input-stack-item:hover,
:root[data-app-theme="light"] .input-stack-item:focus-visible {
  border-color: var(--registry-secondary-600-outline);
  box-shadow:
    inset 0 0 0 1px var(--registry-secondary-600-outline),
    0 8px 18px var(--registry-secondary-600-shadow);
}

:root[data-app-theme="light"] .input-stack-item.is-selected {
  border-color: var(--registry-secondary-600-outline-strong);
  box-shadow:
    inset 0 0 0 1px var(--registry-secondary-600),
    0 12px 24px var(--registry-secondary-600-shadow);
}

:root[data-app-theme="dark"] .input-stack-item:hover,
:root[data-app-theme="dark"] .input-stack-item:focus-visible {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

:root[data-app-theme="dark"] .input-stack-item.is-selected {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.input-stack-specimen {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}

.input-stack-specimen .input-field-preview {
  width: 100%;
  max-width: 420px;
}

.input-state-stack {
  display: grid;
  gap: 14px;
  width: 100%;
}

.input-state-item {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0 12px 0 18px;
  border-radius: 12px;
}

.input-state-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.input-state-item.is-editing {
  background: transparent;
  box-shadow: none;
}

.input-state-item.is-editing::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--registry-secondary-600);
  box-shadow: 0 0 0 1px var(--registry-secondary-600-outline);
}

.input-state-shell {
  position: relative;
}

.input-state-shell-preview {
  opacity: 1;
}

.input-state-shell--unavailable .input-state-shell-preview {
  opacity: 0.35;
  filter: saturate(0.5);
}

.input-state-shell-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background:
    repeating-linear-gradient(
      -45deg,
      rgba(255, 255, 255, 0.08) 0,
      rgba(255, 255, 255, 0.08) 10px,
      rgba(255, 255, 255, 0.02) 10px,
      rgba(255, 255, 255, 0.02) 20px
    );
  pointer-events: none;
}

.input-state-shell-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: rgba(12, 12, 12, 0.82);
  color: var(--text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.24);
}

:root[data-app-theme="light"] .input-state-shell--unavailable .input-state-shell-preview {
  opacity: 0.5;
  filter: saturate(0.55);
}

:root[data-app-theme="light"] .input-state-shell-overlay {
  background:
    linear-gradient(rgba(245, 241, 234, 0.42), rgba(245, 241, 234, 0.42)),
    repeating-linear-gradient(
      -45deg,
      rgba(22, 94, 197, 0.16) 0,
      rgba(22, 94, 197, 0.16) 10px,
      rgba(24, 22, 20, 0.08) 10px,
      rgba(24, 22, 20, 0.08) 20px
    );
  box-shadow: inset 0 0 0 1px rgba(22, 94, 197, 0.14);
}

:root[data-app-theme="light"] .input-state-shell-badge {
  border-color: rgba(22, 94, 197, 0.26);
  background: rgba(255, 255, 255, 0.94);
  color: #1f1b16;
  box-shadow: 0 10px 24px rgba(40, 30, 20, 0.12);
}

.input-stack-meta {
  display: grid;
  gap: 4px;
}

.input-stack-title {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
}

.input-stack-refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition:
    color 140ms ease,
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease;
}

.input-stack-refresh svg {
  width: 14px;
  height: 14px;
}

.input-stack-refresh:hover,
.input-stack-refresh:focus-visible {
  border-color: var(--line-strong);
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.input-stack-refresh:active {
  transform: translateY(1px);
}

.input-stack-header .button-grid-code {
  flex-shrink: 0;
  text-align: right;
}

.button-browser-stack {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 420px));
  gap: 14px;
  min-width: 0;
  justify-content: start;
  align-content: start;
}

.button-browser-layout > .button-detail-panel,
.icon-browser-layout > .icon-detail-panel,
.color-lab-layout > .color-lab-rail {
  justify-self: start;
}

.button-stack-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: min(100%, 420px);
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 16px;
  background: transparent;
  box-shadow: inset 0 0 0 1px transparent;
  color: var(--text);
  cursor: default;
  transition:
    border-color 140ms ease,
    box-shadow 140ms ease,
    background 140ms ease;
}

.button-stack-item:hover,
.button-stack-item:focus-visible {
  background: transparent;
  outline: none;
}

.button-stack-item.is-selected {
  background: transparent;
}

:root[data-app-theme="light"] .button-stack-item:hover,
:root[data-app-theme="light"] .button-stack-item:focus-visible {
  border-color: var(--registry-secondary-600-outline);
  box-shadow:
    inset 0 0 0 1px var(--registry-secondary-600-outline),
    0 8px 18px var(--registry-secondary-600-shadow);
}

:root[data-app-theme="light"] .button-stack-item.is-selected {
  border-color: var(--registry-secondary-600-outline-strong);
  box-shadow:
    inset 0 0 0 1px var(--registry-secondary-600),
    0 12px 24px var(--registry-secondary-600-shadow);
}

:root[data-app-theme="dark"] .button-stack-item:hover,
:root[data-app-theme="dark"] .button-stack-item:focus-visible {
  border-color: var(--line-strong);
  box-shadow: inset 0 0 0 1px var(--line-strong);
}

:root[data-app-theme="dark"] .button-stack-item.is-selected {
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.2);
}

.button-stack-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.button-stack-title-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.button-stack-specimen {
  display: flex;
  align-items: stretch;
  width: 100%;
  min-height: 0;
}

.button-stack-specimen .control-preview--button {
  justify-items: start;
}

.button-state-stack {
  display: grid;
  gap: 14px;
  width: 100%;
}

.button-state-item {
  position: relative;
  display: grid;
  gap: 0;
  padding: 0 12px 0 18px;
  border-radius: 12px;
}

.button-state-item.is-editing {
  background: transparent;
  box-shadow: none;
}

.button-state-item.is-editing::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 999px;
  background: var(--registry-secondary-600);
  box-shadow: 0 0 0 1px var(--registry-secondary-600-outline);
}

.button-state-item .control-preview,
.button-stack-specimen .control-preview,
.button-detail-preview .control-preview {
  width: auto;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.button-state-item .control-preview--button,
.button-stack-specimen .control-preview--button,
.button-detail-preview .control-preview--button {
  justify-items: start;
  align-items: start;
}

.button-detail-heading {
  display: grid;
  gap: 6px;
}

.button-stack-title {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text);
}

.button-grid-code {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.button-stack-header .button-grid-code {
  flex-shrink: 0;
  text-align: right;
}

.icon-group-rail {
  display: grid;
  gap: 8px;
  align-content: start;
  align-self: stretch;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.icon-group-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  text-align: left;
  font: inherit;
  cursor: pointer;
}

.icon-group-button:hover,
.icon-group-button:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.icon-group-button.is-selected {
  background: rgba(255, 255, 255, 0.08);
}

.icon-group-title {
  font-size: 13px;
  line-height: 1.2;
}

.icon-group-count {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-browser-stage {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.icon-browser-stage-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}

.icon-browser-stage-title {
  margin: 0;
  font-size: 20px;
  line-height: 1.1;
}

.icon-browser-stage-count {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(92px, 1fr));
  gap: 16px 12px;
}

.icon-grid-item {
  display: grid;
  justify-items: center;
  gap: 8px;
  padding: 10px 8px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  text-align: center;
  font: inherit;
}

.icon-grid-item:hover,
.icon-grid-item:focus-visible {
  background: rgba(255, 255, 255, 0.04);
  outline: none;
}

.icon-grid-item.is-selected {
  background: rgba(255, 255, 255, 0.08);
}

.icon-grid-glyph {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
}

.icon-grid-image,
.icon-detail-image {
  width: 36px;
  height: 36px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.icon-grid-image--brand,
.icon-detail-image--brand {
  filter: none;
}

.icon-grid-name {
  font-size: 12px;
  line-height: 1.2;
}

.icon-grid-code {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.button-detail-panel,
.icon-detail-panel {
  display: grid;
  gap: 12px;
  align-content: start;
  align-self: stretch;
  padding: 6px 8px 18px 4px;
  border-right: 1px solid var(--line);
  height: 100%;
  min-height: 0;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.detail-tab-strip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  flex-wrap: wrap;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

.detail-tab-button {
  min-height: 20px;
  padding: 0 0 3px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  line-height: 1.1;
  cursor: pointer;
  transition:
    color 120ms ease,
    box-shadow 120ms ease;
}

.detail-tab-button:hover,
.detail-tab-button:focus-visible {
  color: var(--text);
  outline: none;
}

.detail-tab-button.is-active {
  color: var(--text);
  box-shadow: inset 0 -1px 0 var(--registry-secondary-600);
}

.detail-tab-panel {
  display: grid;
  gap: 10px;
  min-width: 0;
  align-self: stretch;
}

.detail-settings {
  display: grid;
  gap: 10px;
}

.detail-settings--input-grid {
  gap: 8px;
}

.detail-settings-group {
  display: grid;
  gap: 4px;
}

.detail-settings-group--grid {
  gap: 6px;
}

.detail-settings-label {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-settings-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-settings-buttons--inline {
  justify-content: flex-end;
}

.detail-settings-grid {
  display: grid;
  grid-template-columns: max-content auto minmax(0, 1fr);
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
}

.detail-settings-grid--input {
  grid-template-columns:
    var(--registry-input-settings-swatch-column-width)
    var(--registry-input-settings-title-column-width)
    minmax(0, 1fr)
    var(--registry-input-settings-control-column-width)
    var(--registry-input-settings-toggle-column-width);
  align-items: center;
  column-gap: 4px;
  row-gap: 4px;
}

.detail-settings-grid--two-column {
  grid-template-columns: minmax(0, 1fr);
  row-gap: 2px;
}

.detail-settings-grid--input-top {
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: 8px;
  row-gap: 8px;
  margin-bottom: 10px;
}

.detail-size-panel {
  display: grid;
  gap: 6px;
  margin-bottom: 0;
  width: 100%;
  min-width: 0;
}

.detail-state-panel {
  display: grid;
  gap: 6px;
  width: 100%;
  min-width: 0;
  margin: 0;
  padding-top: 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.detail-state-panel-header {
  display: grid;
  gap: 6px;
}

.detail-state-panel-selection {
  gap: 3px;
}

.detail-state-panel .artifact-size-rail {
  gap: 2px;
}

.detail-settings-accordion {
  display: grid;
  gap: 0;
  width: 100%;
  min-width: 0;
}

.detail-settings-accordion-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
}

.detail-settings-summary-title-line,
.detail-two-column-title-line {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.detail-settings-accordion-summary::-webkit-details-marker {
  display: none;
}

.detail-settings-accordion-summary::after {
  content: none;
}

.detail-settings-accordion-summary:focus-visible {
  outline: none;
}

.detail-settings-accordion-body {
  padding: 2px 0 6px;
}

.detail-size-panel-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: end;
  gap: 6px 12px;
}

.detail-size-panel-meta {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: 6px;
}

.detail-size-reset-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  appearance: none;
}

.detail-size-reset-button:hover,
.detail-size-reset-button:focus-visible {
  color: var(--text);
  outline: none;
}

.detail-size-reset-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
}

.detail-size-reset-icon svg {
  display: block;
  width: 10px;
  height: 10px;
}

.detail-size-panel-selection {
  display: grid;
  justify-items: start;
  gap: 3px;
  min-width: 0;
}

.detail-section-heading-block {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.detail-section-heading-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.detail-section-heading-row {
  grid-column: 1 / -1;
}

.detail-section-heading-row--standalone {
  width: 100%;
  justify-content: flex-start;
  gap: 6px;
}

.detail-section-heading-row--standalone .detail-section-context-note {
  margin-left: 0;
}

.detail-section-heading-row--top-grid {
  align-self: center;
}

.detail-section-context-note {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  font-size: 9px;
  line-height: 1;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
  white-space: nowrap;
}

.detail-size-anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: 6px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.detail-size-anatomy-section {
  display: grid;
  gap: 2px;
  align-content: start;
  min-width: 0;
  padding: 0;
}

.detail-size-anatomy--accordion {
  gap: 0;
}

.detail-size-anatomy-section--accordion {
  gap: 0;
}

.detail-size-anatomy-summary {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  padding: 3px 0;
  cursor: pointer;
  list-style: none;
}

.detail-size-anatomy-summary::-webkit-details-marker {
  display: none;
}

.detail-size-anatomy-summary::after {
  content: none;
}

.detail-size-anatomy-summary:hover .detail-size-anatomy-heading,
.detail-size-anatomy-summary:focus-visible .detail-size-anatomy-heading {
  color: var(--text);
}

.detail-settings-accordion-summary:hover .detail-settings-section-label,
.detail-settings-accordion-summary:focus-visible .detail-settings-section-label {
  color: var(--text);
}

.detail-size-anatomy-summary:focus-visible {
  outline: none;
}

.detail-size-anatomy-section-body {
  display: grid;
  gap: 4px;
  padding: 0 0 6px;
}

.detail-size-anatomy-heading {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--registry-secondary-600) 74%, var(--text) 26%);
}

.detail-size-anatomy-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 2px;
}

.detail-size-anatomy-row--derived {
  opacity: 0.9;
}

.detail-size-anatomy-label-wrap {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.detail-size-anatomy-label-line {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.detail-size-anatomy-label {
  font-size: 10px;
  line-height: 1.2;
  color: var(--muted);
  white-space: nowrap;
}

.detail-accordion-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  color: var(--muted);
}

.detail-accordion-toggle-icon {
  display: none;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
}

.detail-settings-accordion:not([open]) > .detail-settings-accordion-summary .detail-accordion-toggle-icon--expand,
.detail-size-anatomy-section--accordion:not([open]) > .detail-size-anatomy-summary .detail-accordion-toggle-icon--expand {
  display: inline-flex;
}

.detail-settings-accordion[open] > .detail-settings-accordion-summary .detail-accordion-toggle-icon--collapse,
.detail-size-anatomy-section--accordion[open] > .detail-size-anatomy-summary .detail-accordion-toggle-icon--collapse {
  display: inline-flex;
}

.detail-settings-accordion[open] > .detail-settings-accordion-summary .detail-accordion-toggle,
.detail-size-anatomy-section--accordion[open] > .detail-size-anatomy-summary .detail-accordion-toggle,
.detail-settings-accordion-summary:hover .detail-accordion-toggle,
.detail-settings-accordion-summary:focus-visible .detail-accordion-toggle,
.detail-size-anatomy-summary:hover .detail-accordion-toggle,
.detail-size-anatomy-summary:focus-visible .detail-accordion-toggle {
  color: var(--text);
}

.artifact-symbol--accordion-toggle {
  width: 10px;
  height: 10px;
}

.artifact-symbol--accordion-toggle.artifact-symbol--mask {
  width: 10px;
  height: 10px;
  background: currentColor;
}

.detail-info-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  color: var(--muted);
  cursor: help;
  transition: color 120ms ease, opacity 120ms ease;
}

.detail-info-help:hover,
.detail-info-help:focus-visible {
  color: var(--text);
  outline: none;
}

.artifact-symbol--inline-info {
  width: 10px;
  height: 10px;
}

.artifact-symbol--inline-info.artifact-symbol--mask {
  width: 10px;
  height: 10px;
  background: currentColor;
}

.detail-size-anatomy-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 1px;
}

.detail-size-anatomy-controls .detail-stepper-button,
.detail-size-anatomy-button {
  width: 14px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
  transition:
    background 120ms ease,
    border-color 120ms ease,
    color 120ms ease,
    box-shadow 120ms ease,
    transform 120ms ease;
}

.detail-size-anatomy-controls .detail-stepper-button:hover:not(:disabled),
.detail-size-anatomy-controls .detail-stepper-button:focus-visible:not(:disabled) {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  outline: none;
}

.detail-size-anatomy-controls .detail-stepper-button:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--registry-secondary-600);
  transform: scale(0.96);
}

.detail-size-anatomy-inline-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 1px;
  text-align: center;
  font-size: 9px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}

.detail-settings-section-label {
  margin: 4px 0 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--registry-secondary-600) 74%, var(--text) 26%);
}

.detail-settings-section-label:first-child {
  margin-top: 0;
}

.detail-settings-section-label--top-grid {
  margin-top: 2px;
}

.detail-settings-section-label--standalone {
  margin: 0;
}

.detail-setting-top-row {
  display: contents;
}

.detail-setting-top-title {
  grid-column: 1;
  font-size: 13px;
  line-height: 1.2;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
}

.detail-setting-top-title:empty {
  min-height: 0;
}

.detail-setting-top-controls {
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 6px;
  min-height: 24px;
}

.detail-setting-grid-row {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 10px;
  row-gap: 4px;
}

.detail-setting-grid-swatch {
  grid-column: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

.detail-setting-grid-title-wrap {
  grid-column: 2;
  display: grid;
  gap: 2px;
  min-width: 0;
}

.detail-setting-grid-title {
  font-size: 10px;
  line-height: 1.1;
  color: var(--text);
  min-width: 0;
  white-space: nowrap;
}

.detail-setting-grid-hint {
  font-size: 9px;
  line-height: 1.1;
  color: var(--muted);
  white-space: nowrap;
}

.detail-setting-grid-toggle {
  grid-column: 5;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}

.detail-setting-grid-controls {
  grid-column: 4;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  width: var(--registry-input-settings-control-column-width);
  min-width: 0;
  min-height: 20px;
  gap: 4px;
  flex-wrap: nowrap;
}

.detail-inline-controls-combo {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.detail-inline-controls-combo .detail-stepper-controls {
  width: auto;
  flex: 0 0 auto;
}

.detail-inline-controls-combo .icon-picker-inline-trigger {
  flex: 1 1 auto;
  min-width: 0;
}

.detail-setting-grid-row--control-wide .detail-setting-grid-controls {
  grid-column: 3 / 5;
  width: min(100%, calc(var(--registry-input-settings-control-column-width) + 88px));
  justify-self: end;
}

.detail-setting-grid-row--availability .detail-setting-grid-controls {
  grid-column: 2 / 6;
  width: auto;
  justify-self: start;
}

.detail-two-column-item {
  display: grid;
  gap: 1px;
}

.detail-two-column-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--registry-input-settings-control-column-width);
  align-items: center;
  gap: 8px;
}

.detail-two-column-title-wrap {
  display: grid;
  gap: 1px;
  min-width: 0;
}

.detail-two-column-title {
  font-size: 10px;
  line-height: 1.1;
  color: var(--text);
  white-space: nowrap;
}

.detail-two-column-hint {
  font-size: 9px;
  line-height: 1.1;
  color: var(--muted);
  white-space: nowrap;
}

.detail-two-column-controls {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  justify-self: end;
  gap: 4px;
  width: var(--registry-input-settings-control-column-width);
  min-width: 0;
}

.detail-two-column-controls .theme-token-picker,
.detail-two-column-controls .theme-token-swatch {
  width: 18px;
  height: 12px;
}

.detail-two-column-controls .detail-stepper-controls {
  width: auto;
  justify-content: flex-end;
  gap: 1px;
}

.detail-two-column-controls .detail-stepper-button {
  width: 14px;
  min-width: 14px;
  height: 14px;
  border-radius: 999px;
  font-size: 9px;
  line-height: 1;
}

.detail-two-column-controls .detail-stepper-button:hover:not(:disabled),
.detail-two-column-controls .detail-stepper-button:focus-visible:not(:disabled) {
  border-color: var(--line-strong);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);
  outline: none;
}

.detail-two-column-controls .detail-stepper-button:active:not(:disabled) {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--registry-secondary-600);
  transform: scale(0.96);
}

.detail-two-column-controls .detail-stepper-value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  padding: 0 1px;
  text-align: center;
  font-size: 9px;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  white-space: nowrap;
}

.detail-two-column-controls .icon-picker-inline-trigger {
  min-width: 0;
  width: auto;
  min-width: 58px;
  max-width: 72px;
  margin-left: auto;
}

.detail-two-column-popup {
  padding-top: 2px;
}

#picker-modal-root[hidden] {
  display: none;
}

.picker-modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
}

.picker-modal-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(12, 10, 8, 0.56);
  cursor: pointer;
}

.picker-modal-panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 16px;
  width: min(94vw, 780px);
  max-height: min(86vh, 820px);
  padding: 18px 20px 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34);
  overflow: hidden;
}

.picker-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.picker-modal-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.picker-modal-kicker {
  margin: 0;
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.picker-modal-title {
  margin: 0;
  font-size: 18px;
  line-height: 1.05;
  color: var(--text);
}

.picker-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--panel-soft);
  color: var(--muted);
  cursor: pointer;
}

.picker-modal-close .artifact-symbol,
.picker-modal-close .artifact-symbol-image {
  width: 12px;
  height: 12px;
}

.picker-modal-close:hover,
.picker-modal-close:focus-visible {
  color: var(--text);
  border-color: var(--line);
  background: color-mix(in srgb, var(--panel-soft) 82%, var(--line) 18%);
  outline: none;
}

.picker-modal-body {
  min-height: 0;
  min-width: 0;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  padding-right: 6px;
}

.picker-modal .theme-token-popup,
.picker-modal .icon-library-picker,
.picker-modal .color-role-picker {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.picker-modal .color-role-picker-list,
.picker-modal .icon-library-picker-list {
  display: grid;
  align-content: start;
  gap: 12px;
  width: 100%;
  max-height: none;
  padding-right: 0;
}

.picker-modal .color-role-picker-code {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  padding-top: 0;
  align-self: center;
}

.detail-setting-grid-row--control-wide .detail-select-wrap {
  width: 100%;
}

.detail-setting-grid-popup {
  grid-column: 1 / -1;
  padding-top: 4px;
}

.detail-option-button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.detail-option-button.is-active {
  border-color: rgba(255, 255, 255, 0.2);
  background: rgba(255, 255, 255, 0.08);
}

.detail-select-wrap {
  display: flex;
  justify-content: flex-end;
  width: var(--registry-input-settings-control-column-width);
}

.detail-select-control {
  width: 100%;
  min-height: 16px;
  padding: 0 22px 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) calc(50% - 2px),
    calc(100% - 9px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--text);
  font: inherit;
  font-size: 9px;
  cursor: pointer;
  appearance: none;
}

.detail-select-control:hover,
.detail-select-control:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
}

.detail-text-control {
  width: 100%;
  min-height: 16px;
  padding: 0 6px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 9px;
}

.detail-text-control:hover,
.detail-text-control:focus-visible {
  border-color: rgba(255, 255, 255, 0.22);
  outline: none;
}

.detail-text-control::placeholder {
  color: var(--muted);
}

.detail-text-control--align-right {
  text-align: right;
}

.detail-code-block {
  display: block;
  margin: 0;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
  padding: 12px;
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-soft);
  color: var(--text);
  font-size: 10px;
  line-height: 1.35;
}

.detail-code-block code {
  color: inherit;
}

.theme-token-list {
  display: grid;
  gap: 10px;
}

.detail-stepper-list {
  display: grid;
  gap: 8px;
}

.detail-stepper-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.detail-stepper-name {
  font-size: 13px;
  line-height: 1.2;
}

.detail-stepper-controls {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 4px;
}

.detail-stepper-button {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

.detail-stepper-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.detail-stepper-value {
  min-width: 48px;
  text-align: center;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.detail-setting-grid-controls .detail-stepper-button {
  width: 20px;
  height: 20px;
  font-size: 11px;
}

.detail-setting-grid-controls .detail-stepper-value {
  min-width: 42px;
}

.detail-inline-setting {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.detail-inline-setting-label {
  font-size: 13px;
  line-height: 1.2;
}

.detail-inline-setting-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-content: flex-end;
}

.detail-inline-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.detail-inline-toggle--compact {
  width: 20px;
  height: 12px;
}

.detail-setting-grid-toggle .detail-inline-toggle {
  width: 28px;
  height: 16px;
}

.detail-inline-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel-soft);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition:
    border-color 140ms ease,
    background 140ms ease,
    box-shadow 140ms ease;
}

.detail-inline-toggle--compact .detail-inline-toggle-track {
  width: 20px;
  height: 12px;
  padding: 2px;
}

.detail-setting-grid-toggle .detail-inline-toggle-track {
  width: 28px;
  height: 16px;
  padding: 2px;
}

.detail-inline-toggle-thumb {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: var(--panel-strong);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition:
    transform 140ms ease,
    background 140ms ease;
}

.detail-inline-toggle--compact .detail-inline-toggle-thumb {
  width: 6px;
  height: 6px;
}

.detail-setting-grid-toggle .detail-inline-toggle-thumb {
  width: 10px;
  height: 10px;
}

.detail-inline-toggle:hover .detail-inline-toggle-track,
.detail-inline-toggle:focus-visible .detail-inline-toggle-track {
  border-color: var(--line-strong);
  outline: none;
}

.detail-inline-toggle.is-on .detail-inline-toggle-track {
  border-color: var(--registry-secondary-600-outline-strong);
  background: color-mix(in srgb, var(--registry-secondary-600) 28%, var(--panel-soft) 72%);
}

.detail-inline-toggle.is-on .detail-inline-toggle-thumb {
  background: #fff;
  transform: translateX(18px);
}

.detail-inline-toggle--compact.is-on .detail-inline-toggle-thumb {
  transform: translateX(10px);
}

.detail-setting-grid-toggle .detail-inline-toggle.is-on .detail-inline-toggle-thumb {
  transform: translateX(12px);
}

.detail-status-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
}

.detail-status-toggle-label {
  font-size: 10px;
  line-height: 1;
  font-weight: 600;
  color: var(--muted);
}

.icon-picker-inline-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 1px;
  width: 100%;
  min-width: 0;
  height: 12px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--icon-picker-surface-top), var(--icon-picker-surface-bottom));
  color: var(--text);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease,
    opacity 140ms ease;
}

.icon-picker-inline-trigger:hover,
.icon-picker-inline-trigger:focus-visible {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--icon-picker-surface-hover-top), var(--icon-picker-surface-hover-bottom));
  outline: none;
}

.icon-picker-inline-trigger:active {
  transform: translateY(1px);
}

.icon-picker-inline-trigger.is-open {
  border-color: var(--registry-secondary-600-outline-strong);
  box-shadow: inset 0 0 0 1px var(--registry-secondary-600-outline);
}

.icon-picker-inline-trigger.is-muted {
  opacity: 0.72;
}

.icon-picker-inline-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
}

.icon-picker-inline-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 6px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.theme-token-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.theme-token-row {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}

.theme-token-swatch {
  display: block;
  width: 100%;
  height: 18px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 6px 14px rgba(0, 0, 0, 0.12);
}

.theme-token-picker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  appearance: none;
}

.detail-setting-swatch-trigger {
  width: 24px;
}

.detail-setting-grid-swatch .theme-token-picker,
.detail-setting-grid-swatch .theme-token-swatch {
  width: 24px;
  height: 16px;
}

.detail-setting-swatch-trigger.is-open .theme-token-swatch,
.detail-setting-grid-row.is-open .detail-setting-swatch-trigger .theme-token-swatch {
  outline: 1px solid var(--line-strong);
  outline-offset: 2px;
}

.theme-token-card.is-open .theme-token-swatch {
  outline: 1px solid var(--line-strong);
  outline-offset: 2px;
}

.theme-token-popup {
  margin-left: 0;
}

.icon-picker-card {
  display: grid;
  gap: 6px;
}

.icon-picker-card.is-open .icon-picker-trigger {
  outline: 1px solid var(--line-strong);
  outline-offset: 2px;
}

.icon-picker-row {
  align-items: center;
}

.icon-picker-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 68px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--icon-picker-surface-top), var(--icon-picker-surface-bottom));
  color: var(--text);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    0 6px 14px rgba(0, 0, 0, 0.08);
  cursor: pointer;
  transition:
    border-color 140ms ease,
    background 140ms ease,
    transform 140ms ease,
    box-shadow 140ms ease;
}

.icon-picker-trigger:hover,
.icon-picker-trigger:focus-visible {
  border-color: var(--line-strong);
  background: linear-gradient(180deg, var(--icon-picker-surface-hover-top), var(--icon-picker-surface-hover-bottom));
  outline: none;
}

.icon-picker-trigger:active {
  transform: translateY(1px);
}

.icon-picker-trigger-glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.icon-picker-trigger .artifact-symbol {
  width: 18px;
  height: 18px;
}

.icon-library-picker {
  width: fit-content;
  max-width: min(100%, 470px);
}

.icon-library-picker-list {
  display: grid;
  gap: 8px;
  max-height: 348px;
  overflow: auto;
  padding-right: 2px;
}

.icon-library-row {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
}

.icon-library-track {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.icon-library-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text);
  box-shadow: none;
  opacity: 0.78;
  cursor: pointer;
  transition:
    opacity 140ms ease,
    transform 140ms ease,
    color 140ms ease;
}

.icon-library-button::after {
  content: "";
  position: absolute;
  left: 7px;
  right: 7px;
  bottom: 0;
  height: 2px;
  background: transparent;
}

.icon-library-button:hover,
.icon-library-button:focus-visible {
  opacity: 1;
  color: var(--text-strong, var(--text));
  outline: none;
  transform: translateY(-1px);
}

.icon-library-button:hover::after,
.icon-library-button:focus-visible::after {
  background: color-mix(in srgb, var(--line-strong) 70%, transparent);
}

.icon-library-button.is-selected {
  opacity: 1;
  color: var(--accent);
  background: transparent;
  box-shadow: none;
}

.icon-library-button.is-selected::after {
  background: var(--accent);
}

.icon-library-button .artifact-symbol,
.icon-library-button .artifact-symbol-image,
.icon-library-button .field-action-glyph {
  width: 22px;
  height: 22px;
}

.icon-picker-trigger .artifact-symbol-image {
  width: 18px;
  height: 18px;
}

.icon-picker-inline-trigger .artifact-symbol,
.icon-picker-inline-trigger .artifact-symbol-image,
.icon-picker-inline-trigger .field-action-glyph {
  width: 8px;
  height: 8px;
}

.icon-library-button .artifact-symbol-image:not(.artifact-symbol-image--brand),
.icon-picker-trigger .artifact-symbol-image:not(.artifact-symbol-image--brand),
.icon-picker-inline-trigger .artifact-symbol-image:not(.artifact-symbol-image--brand) {
  filter: var(--icon-picker-image-filter);
}

.theme-token-picker::-webkit-color-swatch-wrapper {
  padding: 0;
}

.theme-token-picker::-webkit-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.theme-token-picker::-moz-color-swatch {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
}

.theme-token-name {
  font-size: 13px;
  line-height: 1.2;
}

.theme-token-value {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.button-detail-preview {
  display: grid;
  justify-items: stretch;
  gap: 12px;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.input-detail-preview {
  display: grid;
  justify-items: start;
  gap: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.input-detail-preview .input-field-preview {
  width: 100%;
  max-width: 420px;
}

.button-detail-preview * {
  pointer-events: none;
}

.button-detail-preview-card {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.button-detail-preview-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.button-detail-preview .control-preview--button {
  min-height: auto;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  place-items: start;
}

.button-detail-preview .spec-button,
.button-detail-preview .button-live-status {
  pointer-events: auto;
}

.button-detail-preview .spec-button {
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    filter 160ms ease,
    background 160ms ease,
    border-color 160ms ease;
}

.button-detail-preview .spec-button:not(:disabled):hover,
.button-detail-preview .spec-button:not(:disabled):focus-visible {
  outline: none;
  transform: translateY(-1px);
  box-shadow: 0 10px 18px rgba(15, 15, 15, 0.24);
  filter: brightness(1.04);
}

.button-detail-preview .spec-button:not(:disabled):active,
.button-detail-preview .spec-button.spec-button--clicked {
  transform: translateY(1px) scale(0.985);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
  filter: brightness(0.95);
}

.button-live-status {
  margin: 0;
  min-height: 17px;
  font-size: 12px;
  line-height: 1.4;
  color: var(--muted);
}

.icon-detail-preview {
  display: grid;
  place-items: center;
  min-height: 148px;
  background: transparent;
}

.icon-detail-heading {
  display: grid;
  gap: 6px;
}

.icon-detail-title {
  margin: 0;
  font-size: 22px;
  letter-spacing: -0.02em;
}

.icon-detail-list {
  display: grid;
  gap: 6px;
  margin: 0;
}

.icon-detail-list div {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.icon-detail-list div:first-child {
  padding-top: 0;
  border-top: 0;
}

.icon-detail-list dt {
  margin: 0;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.icon-detail-list dd {
  margin: 0;
  font-size: 9px;
  line-height: 1.2;
  word-break: break-word;
}

.icon-detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.icon-detail-links .artifact-link {
  font-size: 9px;
  line-height: 1.2;
}

.family-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: -4px;
}

.family-variant-section {
  display: grid;
  gap: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.family-variant-section:first-of-type {
  padding-top: 8px;
}

.family-variant-heading {
  display: grid;
  gap: 6px;
}

.family-variant-title {
  margin: 0;
  font-size: 17px;
  letter-spacing: -0.02em;
}

.family-fact-copy,
.helper-copy,
.facts-copy {
  margin: 0;
  line-height: 1.55;
}

.input-rule-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 8px;
  line-height: 1.55;
}

.reference-preview,
.empty-preview {
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015));
}

.reference-preview-title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.input-field-preview {
  --field-host-surface: var(--field-row-surface, var(--bg));
  width: 100%;
  max-width: 100%;
  display: grid;
  gap: 0;
  padding: 2px 0 2px;
  border-radius: 0;
  background: var(--field-preview-surface, #f0eeea);
  border: 0;
  box-shadow: none;
}

.input-field-preview[data-field-theme="light"],
.artifact-field[data-field-theme="light"],
.artifact-input-field[data-field-theme="light"] {
  --field-preview-surface: #f0eeea;
  --field-border-default: #646464;
  --field-label-color: #646464;
  --field-text: #646464;
  --field-placeholder: #bbbbbb;
  --field-helper: #646464;
  --field-counter: #646464;
  --field-fill: transparent;
  --field-icon: #646464;
  --field-active-border: #2f2f2f;
  --field-active-label-color: #646464;
  --field-active-text: #646464;
  --field-active-placeholder: #bbbbbb;
  --field-active-helper-color: #646464;
  --field-active-counter-color: #646464;
  --field-active-fill: transparent;
  --field-active-icon: #646464;
  --field-error: #ef2b2b;
  --field-error-label-color: #ef2b2b;
  --field-error-text: #646464;
  --field-error-placeholder: #bbbbbb;
  --field-error-helper-color: #ef2b2b;
  --field-error-counter-color: #ef2b2b;
  --field-error-fill: transparent;
  --field-error-icon: #ef2b2b;
  --field-disabled-border: #9a9a9a;
  --field-disabled-label-color: #9a9a9a;
  --field-disabled-text: #9a9a9a;
  --field-disabled-placeholder: #b8b8b8;
  --field-disabled-helper-color: #9a9a9a;
  --field-disabled-counter-color: #9a9a9a;
  --field-disabled-fill: transparent;
  --field-disabled-icon: #9a9a9a;
  --field-action-text: #ffffff;
  --field-dropdown-border: #2f2f2f;
  --field-dropdown-label-color: #646464;
  --field-dropdown-text: #646464;
  --field-dropdown-placeholder: #bbbbbb;
  --field-dropdown-helper-color: #646464;
  --field-dropdown-counter-color: #646464;
  --field-dropdown-fill: transparent;
  --field-dropdown-icon: #646464;
  --field-menu-surface: #f3eee6;
  --field-menu-line: #cec4b7;
  --field-menu-item-surface: #fcf8f2;
  --field-menu-text: #1d1a16;
}

.input-field-preview[data-field-theme="dark"],
.artifact-field[data-field-theme="dark"],
.artifact-input-field[data-field-theme="dark"] {
  --field-preview-surface: #171717;
  --field-border-default: #9f9f9f;
  --field-label-color: #f3f3f3;
  --field-text: #f3f3f3;
  --field-placeholder: #8f8f8f;
  --field-helper: #b8b8b8;
  --field-counter: #b8b8b8;
  --field-fill: transparent;
  --field-icon: #f3f3f3;
  --field-active-border: #f3f3f3;
  --field-active-label-color: #f3f3f3;
  --field-active-text: #f3f3f3;
  --field-active-placeholder: #8f8f8f;
  --field-active-helper-color: #b8b8b8;
  --field-active-counter-color: #b8b8b8;
  --field-active-fill: transparent;
  --field-active-icon: #f3f3f3;
  --field-error: #ff7c7c;
  --field-error-label-color: #ff7c7c;
  --field-error-text: #f3f3f3;
  --field-error-placeholder: #8f8f8f;
  --field-error-helper-color: #ff7c7c;
  --field-error-counter-color: #ff7c7c;
  --field-error-fill: transparent;
  --field-error-icon: #ff7c7c;
  --field-disabled-border: #5f5f5f;
  --field-disabled-label-color: #7e7e7e;
  --field-disabled-text: #7e7e7e;
  --field-disabled-placeholder: #666666;
  --field-disabled-helper-color: #7e7e7e;
  --field-disabled-counter-color: #7e7e7e;
  --field-disabled-fill: transparent;
  --field-disabled-icon: #7e7e7e;
  --field-action-text: #111111;
  --field-dropdown-border: #f3f3f3;
  --field-dropdown-label-color: #f3f3f3;
  --field-dropdown-text: #f3f3f3;
  --field-dropdown-placeholder: #8f8f8f;
  --field-dropdown-helper-color: #b8b8b8;
  --field-dropdown-counter-color: #b8b8b8;
  --field-dropdown-fill: transparent;
  --field-dropdown-icon: #f3f3f3;
  --field-menu-surface: #1e1e1e;
  --field-menu-line: #4c4c4c;
  --field-menu-item-surface: #262626;
  --field-menu-text: #f3f3f3;
}

.input-field-preview--compact {
  max-width: 100%;
}

.input-field-preview--wide {
  max-width: 100%;
}

.field-live {
  --field-border-color: var(--field-border-default);
  --field-border-width: var(--field-stroke-width);
  margin: 0;
  min-width: 0;
  display: block;
  height: var(--field-control-min-height);
  padding-block: var(--field-control-padding-y);
  padding-inline: var(--field-control-padding-x);
  border-radius: var(--field-control-radius);
  border: var(--field-border-width) solid var(--field-border-color);
  background: var(--field-current-fill);
  box-sizing: border-box;
}

.field-live--with-label {
  border-radius: var(--field-control-radius);
}

.field-live--plain {
  border-radius: var(--field-control-radius);
}

.field-live--compact {
  padding-block: var(--field-control-padding-y);
  padding-inline: var(--field-control-padding-x);
}

.field-live--plain.field-live--compact {
  padding-top: var(--field-control-padding-y);
}

.field-live--active {
  --field-border-color: var(--field-active-border);
  --field-border-width: 2px;
}

.field-live--error {
  --field-border-color: var(--field-error);
}

.field-live--disabled {
  --field-border-color: var(--field-disabled-border);
}

.field-live--dropdown {
  --field-border-color: var(--field-dropdown-border);
}

.artifact-field.artifact-field--active {
  --field-current-label-color: var(--field-active-label-color);
  --field-current-text: var(--field-active-text);
  --field-current-placeholder: var(--field-active-placeholder);
  --field-current-helper: var(--field-active-helper-color);
  --field-current-counter: var(--field-active-counter-color);
  --field-current-fill: var(--field-active-fill);
  --field-current-icon: var(--field-active-icon);
}

.artifact-field.artifact-field--error {
  --field-current-label-color: var(--field-error-label-color);
  --field-current-text: var(--field-error-text);
  --field-current-placeholder: var(--field-error-placeholder);
  --field-current-helper: var(--field-error-helper-color);
  --field-current-counter: var(--field-error-counter-color);
  --field-current-fill: var(--field-error-fill);
  --field-current-icon: var(--field-error-icon);
}

.artifact-field.artifact-field--disabled {
  --field-current-label-color: var(--field-disabled-label-color);
  --field-current-text: var(--field-disabled-text);
  --field-current-placeholder: var(--field-disabled-placeholder);
  --field-current-helper: var(--field-disabled-helper-color);
  --field-current-counter: var(--field-disabled-counter-color);
  --field-current-fill: var(--field-disabled-fill);
  --field-current-icon: var(--field-disabled-icon);
}

.artifact-field.artifact-field--dropdown {
  --field-current-label-color: var(--field-dropdown-label-color);
  --field-current-text: var(--field-dropdown-text);
  --field-current-placeholder: var(--field-dropdown-placeholder);
  --field-current-helper: var(--field-dropdown-helper-color);
  --field-current-counter: var(--field-dropdown-counter-color);
  --field-current-fill: var(--field-dropdown-fill);
  --field-current-icon: var(--field-dropdown-icon);
}

.artifact-field {
  position: relative;
  display: block;
  width: 100%;
  color: var(--field-current-text);
  --field-control-padding-y: 16px;
  --field-control-padding-x: 16px;
  --field-control-radius: 8px;
  --field-control-font-size: 16px;
  --field-control-line-height: 24px;
  --field-control-min-height: 56px;
  --field-label-font-size: 14px;
  --field-current-label-color: var(--field-label-color);
  --field-current-text: var(--field-text);
  --field-current-placeholder: var(--field-placeholder);
  --field-current-helper: var(--field-helper);
  --field-current-counter: var(--field-counter);
  --field-current-fill: var(--field-fill);
  --field-current-icon: var(--field-icon);
  --field-label-lane: 5px;
  --field-label-line-height: 14px;
  --field-label-offset-x: 18px;
  --field-helper-padding-inline: 16px;
  --field-support-gap: 4px;
  --field-leading-icon-gap: 12px;
  --field-trailing-icon-gap: 8px;
  --field-helper-font-size: 12px;
  --field-helper-line-height: 18px;
  --field-menu-padding: 8px;
  --field-menu-radius: 14px;
  --field-menu-item-padding-y: 10px;
  --field-menu-item-padding-x: 12px;
  --field-menu-item-radius: 10px;
  --field-stacked-font-size: 12px;
  --field-stacked-line-height: 14px;
  --field-stroke-width: 1px;
}

.artifact-field--with-label {
  padding-top: var(--field-label-lane);
}

.field-label {
  position: absolute;
  top: calc(var(--field-label-lane) + (var(--field-stroke-width) / 2) - (var(--field-label-line-height) / 2));
  left: var(--field-label-offset-x);
  display: inline-flex;
  align-items: center;
  min-height: var(--field-label-line-height);
  padding-block: 0;
  padding-inline: 7px;
  font-size: var(--field-label-font-size);
  font-weight: 500;
  line-height: var(--field-label-line-height);
  color: var(--field-current-label-color);
  white-space: nowrap;
  background: var(--field-host-surface, transparent);
  z-index: 1;
}

.field-label::before {
  content: none;
}

.field-label-text {
  display: block;
  padding: 0;
  background: inherit;
  color: inherit;
  transform: translateY(-1px);
}

.artifact-field--active {
  --field-stroke-width: 2px;
}

.field-label--error {
  color: var(--field-current-label-color);
}

.helper-copy--error {
  color: var(--field-current-helper);
}

.field-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--field-control-line-height);
}

.input-value {
  font-size: var(--field-control-font-size);
  font-weight: 500;
  line-height: var(--field-control-line-height);
  color: #646464;
}

.field-text {
  font-size: var(--field-control-font-size);
  font-weight: 500;
  line-height: var(--field-control-line-height);
  color: var(--field-current-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.field-text--placeholder {
  color: var(--field-current-placeholder);
}

.field-inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: var(--field-control-line-height);
  margin-right: calc(var(--field-leading-icon-gap, 12px) - 12px);
  padding: 0;
  border-radius: 0;
  border: 0;
  color: var(--field-current-icon);
}

.field-cursor {
  width: 2px;
  height: 16px;
  border-radius: 999px;
  background: #222;
}

.field-actions {
  display: flex;
  align-items: center;
  gap: var(--field-trailing-icon-gap, 8px);
  flex-shrink: 0;
}

.field-action-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: var(--field-control-line-height);
  padding: 0;
  border-radius: 0;
  border: 0;
  background: transparent;
  color: var(--field-current-icon);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.field-action-glyph {
  position: relative;
  display: inline-block;
  width: 18px;
  height: 18px;
  color: currentColor;
}

.field-action-glyph--placeholder::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 1.5px dashed currentColor;
  border-radius: 5px;
}

.field-action-glyph--placeholder::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  width: 1.5px;
  height: 8px;
  background: currentColor;
  box-shadow: -3px 3px 0 0 currentColor;
  transform: rotate(45deg);
  transform-origin: center;
}

.artifact-symbol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.artifact-symbol--stacked {
  width: 26px;
}

.artifact-symbol-image {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
}

.icon-library-button .artifact-symbol,
.icon-library-button .artifact-symbol-image,
.icon-library-button .field-action-glyph,
.icon-library-button .artifact-symbol-image--stacked {
  width: 22px;
  height: 22px;
}

.artifact-symbol-image--stacked {
  width: 15px;
  height: 15px;
}

.artifact-symbol-image--stacked:first-child {
  transform: translateX(3px);
  z-index: 1;
}

.artifact-symbol-image--stacked:last-child {
  transform: translateX(-3px);
}

.artifact-symbol--mask {
  display: inline-block;
  background: currentColor;
  -webkit-mask-image: var(--artifact-symbol-src);
  mask-image: var(--artifact-symbol-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.field-inline-icon .artifact-symbol-image,
.field-action-pill .artifact-symbol-image,
.spec-feedback .artifact-symbol-image,
.spec-top-nav-item .artifact-symbol-image,
.spec-side-nav-item .artifact-symbol-image,
.spec-page-control .artifact-symbol-image,
.spec-icon-tile .artifact-symbol-image,
.spec-icon-button .artifact-symbol-image {
  width: 18px;
  height: 18px;
}

.spec-button .artifact-symbol-image {
  width: var(--button-icon-size, 18px);
  height: var(--button-icon-size, 18px);
  filter: brightness(0) invert(1);
}

.spec-button .artifact-symbol--button,
.spec-button .field-action-glyph {
  color: var(--control-icon, currentColor);
}

.spec-button--secondary .artifact-symbol-image,
.spec-button--ghost .artifact-symbol-image,
.spec-page-control .artifact-symbol-image,
.spec-top-nav-item .artifact-symbol-image,
.spec-side-nav-item .artifact-symbol-image,
.field-inline-icon .artifact-symbol-image,
.field-action-pill .artifact-symbol-image,
.spec-feedback .artifact-symbol-image,
.spec-icon-tile .artifact-symbol-image {
  filter: none;
}

.artifact-symbol-image--brand {
  filter: none !important;
}

.field-action-glyph::before,
.field-action-glyph::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}

.field-action-glyph--off::before {
  inset: 3px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}

.field-action-glyph--on::before {
  inset: 3px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
  background: currentColor;
}

.field-action-glyph--clear::before,
.field-action-glyph--clear::after {
  top: 8px;
  left: 3px;
  width: 12px;
  border-top: 1.5px solid currentColor;
}

.field-action-glyph--clear::before {
  transform: rotate(45deg);
}

.field-action-glyph--clear::after {
  transform: rotate(-45deg);
}

.field-action-glyph--picker::before {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
}

.field-action-glyph--picker::after {
  left: 8px;
  top: 5px;
  width: 1.5px;
  height: 8px;
  background: currentColor;
  box-shadow: -3px 3px 0 0 currentColor;
  transform: rotate(90deg);
}

.field-action-glyph--reveal::before {
  left: 1px;
  top: 4px;
  width: 16px;
  height: 10px;
  border: 1.5px solid currentColor;
  border-radius: 10px / 7px;
}

.field-action-glyph--reveal::after {
  left: 7px;
  top: 7px;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: currentColor;
}

.field-action-glyph--chevron::before,
.field-action-glyph--chevron-up::before {
  left: 5px;
  top: 6px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.field-action-glyph--chevron::before {
  transform: rotate(45deg);
}

.field-action-glyph--chevron-up::before {
  top: 8px;
  transform: rotate(225deg);
}

.field-action-glyph--chevron-left::before,
.field-action-glyph--chevron-right::before {
  top: 5px;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
}

.field-action-glyph--chevron-left::before {
  left: 7px;
  transform: rotate(135deg);
}

.field-action-glyph--chevron-right::before {
  left: 4px;
  transform: rotate(-45deg);
}

.field-action-glyph--brand::before {
  left: 2px;
  top: 4px;
  width: 14px;
  height: 10px;
  border-radius: 4px;
  border: 1.5px solid currentColor;
}

.field-action-glyph--brand::after {
  left: 4px;
  top: 8px;
  width: 10px;
  border-top: 1.5px solid currentColor;
}

.field-action-glyph--brand-wide::before,
.field-action-glyph--brand-wide::after {
  width: 10px;
  height: 8px;
  border-radius: 3px;
  border: 1.5px solid #646464;
}

.field-action-glyph--brand-wide::before {
  left: 2px;
  top: 5px;
  background: #fff;
}

.field-action-glyph--brand-wide::after {
  left: 6px;
  top: 3px;
  background: #fff;
}

.field-action-glyph--scan::before {
  inset: 2px;
  border-radius: 4px;
  border: 1.5px dashed #646464;
}

.field-action-glyph--scan::after {
  left: 5px;
  top: 8px;
  width: 8px;
  border-top: 1.5px solid #646464;
}

.field-action-glyph--search::before {
  left: 2px;
  top: 2px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  border: 1.5px solid currentColor;
}

.field-action-glyph--search::after {
  left: 11px;
  top: 11px;
  width: 6px;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  transform-origin: left center;
}

.field-action-glyph--calendar::before {
  left: 2px;
  top: 3px;
  width: 14px;
  height: 12px;
  border-radius: 4px;
  border: 1.5px solid #646464;
}

.field-action-glyph--calendar::after {
  left: 5px;
  top: 1px;
  width: 8px;
  height: 4px;
  border-top: 1.5px solid #646464;
  border-left: 1.5px solid transparent;
  border-right: 1.5px solid transparent;
  box-shadow: 0 5px 0 0 #646464;
}

.field-action-glyph--clock::before {
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 1.5px solid #646464;
}

.field-action-glyph--clock::after {
  left: 8px;
  top: 5px;
  width: 1.5px;
  height: 6px;
  background: #646464;
  box-shadow: 3px 2px 0 0 #646464;
  transform-origin: bottom center;
}

.field-action-glyph--menu::before,
.field-action-glyph--menu::after {
  left: 3px;
  width: 12px;
  border-top: 1.5px solid #646464;
}

.field-action-glyph--menu::before {
  top: 6px;
  box-shadow: 0 4px 0 0 #646464;
}

.field-action-glyph--menu::after {
  top: 14px;
}

.field-action-glyph--plus::before,
.field-action-glyph--plus::after {
  left: 8px;
  top: 3px;
  width: 1.5px;
  height: 12px;
  background: #646464;
}

.field-action-glyph--plus::after {
  left: 3px;
  top: 8px;
  width: 12px;
  height: 1.5px;
}

.field-action-glyph--warning::before {
  left: 3px;
  top: 2px;
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 12px solid #d7a441;
}

.field-action-glyph--warning::after {
  left: 8px;
  top: 7px;
  width: 1.5px;
  height: 4px;
  background: #fff;
  box-shadow: 0 6px 0 0 #fff;
}

.field-action-glyph--success::before {
  inset: 2px;
  border-radius: 999px;
  background: #cfe2c7;
  border: 1.5px solid #6d8a63;
}

.field-action-glyph--success::after {
  left: 5px;
  top: 8px;
  width: 7px;
  height: 3px;
  border-left: 1.5px solid #4f6a47;
  border-bottom: 1.5px solid #4f6a47;
  transform: rotate(-45deg);
}

.field-action-glyph--info::before {
  inset: 2px;
  border-radius: 999px;
  border: 1.5px solid #646464;
}

.field-action-glyph--info::after {
  left: 8px;
  top: 5px;
  width: 1.5px;
  height: 6px;
  background: #646464;
  box-shadow: 0 -3px 0 0 #646464;
}

.field-action-glyph--filter::before {
  left: 3px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid #646464;
}

.field-action-glyph--user::before {
  left: 5px;
  top: 2px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 1.5px solid #646464;
}

.field-action-glyph--user::after {
  left: 3px;
  top: 11px;
  width: 12px;
  height: 5px;
  border-radius: 7px 7px 3px 3px;
  border: 1.5px solid #646464;
}

.helper-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.helper-row--field {
  margin-top: var(--field-support-gap);
  padding: 0 var(--field-helper-padding-inline) 0;
}

.helper-row span {
  font-size: var(--field-helper-font-size);
  font-weight: 500;
  line-height: var(--field-helper-line-height);
  color: var(--field-current-helper);
}

.helper-row span + span {
  color: var(--field-current-counter);
}

.artifact-input,
.artifact-select {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--field-current-text);
  font: inherit;
  font-size: var(--field-control-font-size);
  font-weight: 500;
  line-height: var(--field-control-line-height);
  outline: none;
}

.artifact-input::placeholder {
  color: var(--field-current-placeholder);
}

.artifact-select-trigger.artifact-select--placeholder {
  color: var(--field-current-placeholder);
}

.artifact-input[readonly],
.artifact-input:disabled,
.artifact-select:disabled {
  cursor: default;
}

.artifact-select {
  appearance: none;
}

.artifact-select-trigger {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--field-current-text);
  font: inherit;
  font-size: var(--field-control-font-size);
  font-weight: 500;
  line-height: var(--field-control-line-height);
  text-align: left;
  cursor: pointer;
}

.artifact-select-trigger span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.field-menu {
  display: grid;
  gap: 4px;
  margin-top: 4px;
  padding: var(--field-menu-padding);
  border: 1px solid var(--field-menu-line);
  border-radius: var(--field-menu-radius);
  background: var(--field-menu-surface);
}

.field-menu-item {
  display: block;
  width: 100%;
  padding: var(--field-menu-item-padding-y) var(--field-menu-item-padding-x);
  border: 0;
  border-radius: var(--field-menu-item-radius);
  background: var(--field-menu-item-surface);
  color: var(--field-menu-text);
  font-size: var(--field-control-font-size);
  line-height: var(--field-control-line-height);
  text-align: left;
  cursor: pointer;
}

.field-menu-item.is-selected {
  outline: 1px solid var(--field-border-default);
}

.split-search {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
  height: var(--field-control-min-height);
}

.split-search--compact {
  gap: 0;
}

.split-search--narrow {
  grid-template-columns: minmax(0, 5fr) minmax(0, 1fr);
}

.split-search-input {
  display: flex;
  align-items: center;
  min-width: 0;
  padding-block: var(--field-control-padding-y);
  padding-inline: var(--field-control-padding-x);
}

.split-search-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 100%;
  padding-block: var(--field-control-padding-y);
  padding-inline: var(--field-control-padding-x);
  border: 0;
  border-left: var(--field-border-width) solid var(--field-border-color);
  background: var(--field-border-color);
  color: var(--field-action-text);
  font-size: var(--field-control-font-size);
  font-weight: 500;
  line-height: var(--field-control-line-height);
  cursor: pointer;
}

.split-search-button .artifact-symbol,
.split-search-button .field-action-glyph {
  color: var(--field-current-icon);
}

.split-search-button--icon {
  min-width: 42px;
  padding: 0 10px;
}

.split-search-button--stacked {
  flex-direction: column;
  gap: 4px;
  padding: 8px 6px;
  font-size: var(--field-stacked-font-size);
  line-height: var(--field-stacked-line-height);
}

.split-search-button--stacked span {
  white-space: nowrap;
}

.field-live--split {
  padding: 0;
  overflow: hidden;
}

.control-preview {
  display: grid;
  align-items: center;
  width: 100%;
  min-height: 120px;
  padding: 14px;
  border-radius: 16px;
  background: linear-gradient(180deg, var(--control-preview-shell-top, #f9f6f0), var(--control-preview-shell-bottom, #f2ece4));
  border: 1px solid var(--control-preview-shell-border, rgba(33, 33, 33, 0.08));
  box-shadow: 0 16px 32px rgba(35, 28, 18, 0.08);
}

.control-preview--button,
.control-preview--choice,
.control-preview--feedback,
.control-preview--navigation,
.control-preview--data,
.control-preview--overlay,
.control-preview--icon {
  place-items: center;
}

.spec-button,
.spec-segmented-option,
.spec-tab,
.spec-page-pill,
.spec-page-control,
.spec-icon-button {
  font: inherit;
}

.spec-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--button-gap, 8px);
  height: var(--button-min-height, 36px);
  padding: 0 var(--button-padding-x, 16px);
  border-radius: var(--button-radius, 10px);
  border: 1px solid var(--control-accent, #1e1e1e);
  background: var(--control-accent, #1e1e1e);
  color: var(--control-surface, #fff);
  font-size: var(--button-font-size, 14px);
  font-weight: 600;
  line-height: 1;
  box-sizing: border-box;
}

.spec-button[class*="spec-button--size-"] {
  min-width: var(--button-min-height, 36px);
}

.spec-button--variant-outlined {
  background: transparent;
  color: var(--control-text, #1e1e1e);
  border-color: var(--control-border, #1e1e1e);
}

.spec-button--variant-text {
  padding-left: var(--button-text-padding-x, 6px);
  padding-right: var(--button-text-padding-x, 6px);
  border-color: transparent;
  background: transparent;
  color: var(--control-text, #1e1e1e);
}

.spec-button--secondary {
  background: var(--control-surface, #fff);
  color: var(--control-text, #1e1e1e);
  border-color: var(--control-border, #1e1e1e);
}

.spec-button--ghost {
  background: transparent;
  color: var(--control-text, #1e1e1e);
  border-color: var(--control-border, #d9d0c3);
}

.spec-button--destructive {
  background: var(--control-accent, #b93b30);
  border-color: var(--control-accent, #b93b30);
}

.spec-button--destructive.spec-button--variant-outlined,
.spec-button--destructive.spec-button--variant-text {
  background: transparent;
  color: var(--control-accent, #b93b30);
  border-color: var(--control-accent, #b93b30);
}

.spec-button--ghost.spec-button--variant-filled {
  background: transparent;
  color: var(--control-text, #1e1e1e);
  border-color: var(--control-border, #d9d0c3);
}

.spec-button--icon-only,
.spec-button--split,
.spec-icon-button,
.spec-page-control {
  width: var(--button-min-height, 36px);
  min-width: var(--button-min-height, 36px);
  padding: 0;
}

.spec-button--trailing {
  flex-direction: row;
}

.spec-button--hover {
  background: color-mix(in srgb, var(--control-accent, #303030) 88%, black 12%);
  border-color: color-mix(in srgb, var(--control-accent, #303030) 88%, black 12%);
  color: var(--control-surface, #ffffff);
}

.spec-button--pressed {
  background: color-mix(in srgb, var(--control-accent, #111111) 72%, black 28%);
  border-color: color-mix(in srgb, var(--control-accent, #111111) 72%, black 28%);
  color: var(--control-surface, #ffffff);
}

.spec-button--loading::after {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.34);
  border-top-color: #fff;
}

.spec-button:disabled {
  opacity: 0.45;
}

.spec-split-button {
  display: inline-flex;
}

.spec-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 48px;
  height: 28px;
  padding: 3px;
  border-radius: 999px;
  background: var(--control-surface-alt, #d9d0c3);
}

.spec-switch--on {
  background: var(--control-accent, #1f1f1f);
}

.spec-switch-thumb {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--control-surface, #fff);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}

.spec-switch--on .spec-switch-thumb {
  margin-left: auto;
}

.spec-switch.is-disabled,
.spec-checkbox.is-disabled,
.spec-radio.is-disabled,
.spec-token-field.is-disabled,
.spec-top-nav-item.is-disabled,
.spec-side-nav-item.is-disabled,
.spec-segmented.is-disabled {
  opacity: 0.5;
}

.choice-row {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--control-text, #1e1e1e);
}

.spec-checkbox,
.spec-radio {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 1.5px solid var(--control-border, #646464);
  background: var(--control-surface, #fff);
}

.spec-checkbox {
  border-radius: 6px;
}

.spec-radio {
  border-radius: 999px;
}

.choice-mark {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: transparent;
}

.spec-radio .choice-mark {
  border-radius: 999px;
}

.spec-checkbox.is-checked .choice-mark,
.spec-radio.is-checked .choice-mark {
  background: var(--control-accent, #1e1e1e);
}

.choice-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--control-text, #1e1e1e);
}

.spec-segmented {
  display: inline-flex;
  padding: 4px;
  border-radius: 16px;
  background: var(--control-surface-alt, #ebe3d7);
}

.spec-segmented-option {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--control-muted, #4d473e);
}

.spec-segmented-option.is-active {
  background: var(--control-surface, #fff);
  color: var(--control-text, #1e1e1e);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.spec-token-field {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-height: 52px;
  padding: 10px 12px;
  border: 1px solid var(--control-border, #646464);
  border-radius: 10px;
  background: var(--control-surface, #fff);
}

.spec-token {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--control-surface-alt, #efe6d8);
  color: var(--control-text, #1e1e1e);
  font-size: 13px;
  font-weight: 500;
}

.spec-token-placeholder {
  color: var(--control-muted, #9e978f);
  font-size: 15px;
}

.spec-feedback {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: 360px;
  padding: 16px;
  border-radius: 16px;
  background: var(--control-surface, #fff);
  border: 1px solid var(--control-border, #ddd6cb);
}

.spec-feedback--compact {
  padding: 12px;
  gap: 10px;
}

.spec-feedback--warning {
  background: color-mix(in srgb, var(--control-surface, #fff8eb) 78%, var(--control-accent, #edd9aa) 22%);
  border-color: color-mix(in srgb, var(--control-border, #edd9aa) 78%, var(--control-accent, #edd9aa) 22%);
}

.spec-feedback--success {
  background: color-mix(in srgb, var(--control-surface, #f2f8ef) 82%, var(--control-accent, #d5e2cd) 18%);
  border-color: color-mix(in srgb, var(--control-border, #d5e2cd) 82%, var(--control-accent, #d5e2cd) 18%);
}

.spec-feedback--error {
  background: color-mix(in srgb, var(--control-surface, #fff1f1) 78%, var(--control-accent, #f0c4c4) 22%);
  border-color: color-mix(in srgb, var(--control-border, #f0c4c4) 78%, var(--control-accent, #f0c4c4) 22%);
}

.spec-feedback-title,
.spec-data-row-title,
.spec-data-card-title,
.spec-overlay-title {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: var(--control-text, #1e1e1e);
}

.spec-feedback-copy,
.spec-data-row-copy,
.spec-data-card-copy,
.spec-overlay-copy {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--control-muted, #5d554c);
}

.spec-spinner {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  border: 2px solid #d9d0c3;
  border-top-color: #1e1e1e;
}

.spec-top-nav-item,
.spec-side-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--control-muted, #5b544b);
  background: var(--control-surface, #fff);
  border: 1px solid var(--control-border, #ddd6cb);
}

.spec-top-nav-item.is-active,
.spec-side-nav-item.is-active {
  color: var(--control-text, #1e1e1e);
  border-color: var(--control-accent, #1e1e1e);
}

.spec-tabs {
  display: inline-flex;
  gap: 8px;
  padding: 4px;
  border-radius: 16px;
  background: var(--control-surface-alt, #ebe3d7);
}

.spec-tab {
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--control-muted, #5d554c);
}

.spec-tab.is-active {
  background: var(--control-surface, #fff);
  color: var(--control-text, #1e1e1e);
}

.spec-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--control-muted, #7b746b);
  font-size: 13px;
}

.spec-breadcrumb-item.is-current {
  color: var(--control-text, #1e1e1e);
  font-weight: 600;
}

.spec-pagination {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.spec-page-pill,
.spec-page-control {
  height: 38px;
  border-radius: 12px;
  border: 1px solid var(--control-border, #ddd6cb);
  background: var(--control-surface, #fff);
  color: var(--control-text, #1e1e1e);
}

.spec-page-pill {
  min-width: 38px;
  padding: 0 10px;
}

.spec-page-pill.is-active {
  border-color: var(--control-accent, #1e1e1e);
  background: var(--control-accent, #1e1e1e);
  color: var(--control-surface, #fff);
}

.spec-page-pill:disabled,
.spec-tab:disabled,
.spec-segmented-option:disabled {
  opacity: 0.5;
}

.spec-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--control-surface-alt, #ece3d7);
  color: var(--control-text, #1e1e1e);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.spec-key-value {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 300px;
  margin: 0;
}

.spec-key-value div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.spec-key-value dt,
.spec-key-value dd {
  margin: 0;
  font-size: 14px;
}

.spec-key-value dt {
  color: var(--control-muted, #6a645b);
}

.spec-key-value dd,
.spec-data-row-value,
.spec-data-card-value {
  color: var(--control-text, #1e1e1e);
  font-weight: 700;
}

.spec-data-row,
.spec-data-card,
.spec-stat-tile {
  width: 100%;
  max-width: 340px;
  padding: 16px;
  border-radius: 16px;
  background: var(--control-surface, #fff);
  border: 1px solid var(--control-border, #ddd6cb);
}

.spec-data-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.spec-data-row--compact,
.spec-data-card--compact,
.spec-stat-tile--compact {
  padding: 12px;
}

.spec-data-row.is-highlighted,
.spec-data-card.is-highlighted,
.spec-stat-tile.is-highlighted {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--control-accent, #1e1e1e) 28%, transparent);
}

.spec-data-card-value {
  margin: 8px 0 0;
  font-size: 28px;
  letter-spacing: -0.04em;
}

.spec-overlay-content {
  display: grid;
  gap: 6px;
}

.spec-overlay-content--compact {
  gap: 4px;
}

.spec-overlay-content--roomy {
  gap: 10px;
}

.spec-modal,
.spec-popover,
.spec-dropdown-panel,
.spec-palette,
.spec-tooltip,
.spec-drawer {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  border-radius: 18px;
  background: var(--control-surface, #fff);
  border: 1px solid var(--control-border, #ddd6cb);
  box-shadow: 0 16px 36px rgba(35, 28, 18, 0.14);
}

.spec-drawer {
  max-width: 260px;
}

.spec-tooltip {
  max-width: 220px;
  border-radius: 12px;
}

.spec-icon-tile,
.spec-avatar,
.spec-icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  border: 0;
}

.spec-icon-tile,
.spec-icon-button {
  width: 44px;
  height: 44px;
  background: transparent;
}

.spec-icon-image {
  width: 24px;
  height: 24px;
  object-fit: contain;
  filter: brightness(0) saturate(100%);
}

.input-field-preview,
.artifact-field,
.helper-row--field {
  background: transparent;
}

.spec-avatar {
  width: 48px;
  height: 48px;
  background: #fff;
  border-color: #ddd6cb;
  color: #1e1e1e;
  font-size: 14px;
  font-weight: 700;
}

.family-block--colors {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.color-lab-layout {
  display: grid;
  grid-template-columns: fit-content(640px) minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.color-lab-stage {
  min-width: 0;
  align-self: start;
}

.color-lab-rail {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-self: start;
  width: 100%;
  max-height: none;
  overflow: visible;
  padding-right: 0;
}

.color-lab-stage-stack {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.color-lab-board {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
}

.color-lab-heading,
.color-lab-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-lab-heading .section-eyebrow,
.color-lab-section-title,
.color-lab-copy {
  margin: 0;
}

.color-lab-title {
  margin: 0;
  font-size: 28px;
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--copy);
}

.color-lab-copy,
.color-lab-section-title {
  color: var(--muted);
}

.color-packet-panel {
  display: grid;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(180deg, var(--panel-soft), transparent);
}

.color-packet-heading,
.color-packet-group,
.color-packet-group-heading {
  display: grid;
  gap: 8px;
}

.color-packet-title,
.color-packet-group-title,
.color-packet-row-title,
.color-packet-universal-title {
  margin: 0;
  color: var(--copy);
}

.color-packet-title {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.03em;
}

.color-packet-copy,
.color-packet-group-copy,
.color-packet-row-meta,
.color-packet-universal-meta {
  margin: 0;
  color: var(--muted);
}

.color-packet-groups {
  display: grid;
  gap: 16px;
}

.color-packet-group + .color-packet-group {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.color-packet-group-title {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.color-packet-group-body {
  display: grid;
  gap: 12px;
}

.color-packet-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.02);
}

.color-packet-row.is-selected {
  border-color: var(--line-strong);
  background: var(--accent-soft);
}

.color-packet-row-label {
  display: grid;
  gap: 4px;
  align-content: start;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.color-packet-row-title {
  font-size: 15px;
  font-weight: 600;
}

.color-packet-row-label .button-grid-code {
  margin: 0;
}

.color-packet-row-meta,
.color-packet-universal-meta {
  font-size: 12px;
  line-height: 1.2;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.color-packet-pill-track,
.color-packet-universal-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
}

.color-packet-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 16px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
}

.color-packet-pill-fill,
.color-packet-universal-pill {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.color-swatch-chip[data-swatch-transparent="true"],
.color-packet-universal-pill[data-swatch-transparent="true"],
.theme-token-swatch[data-swatch-transparent="true"] {
  background-color: rgba(255, 255, 255, 0.96);
  background-image:
    linear-gradient(45deg, rgba(24, 24, 24, 0.22) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(24, 24, 24, 0.22) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(24, 24, 24, 0.22) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(24, 24, 24, 0.22) 75%);
  background-position: 0 0, 0 4px, 4px -4px, -4px 0;
  background-size: 8px 8px;
  border-color: rgba(0, 0, 0, 0.16);
}

:root[data-app-theme="light"] .color-swatch-chip[data-swatch-transparent="true"],
:root[data-app-theme="light"] .color-packet-universal-pill[data-swatch-transparent="true"],
:root[data-app-theme="light"] .theme-token-swatch[data-swatch-transparent="true"] {
  background-color: rgba(255, 255, 255, 0.98);
  background-image:
    linear-gradient(45deg, rgba(24, 24, 24, 0.18) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(24, 24, 24, 0.18) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, rgba(24, 24, 24, 0.18) 75%),
    linear-gradient(-45deg, transparent 75%, rgba(24, 24, 24, 0.18) 75%);
}

.color-packet-pill.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent-soft);
}

.color-packet-row--universal {
  grid-template-columns: 1fr;
  background: transparent;
  padding: 0;
}

.color-packet-universal-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.color-packet-universal-item {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}

.color-packet-universal-pill {
  width: 100%;
  height: 16px;
}

.color-packet-universal-title {
  font-size: 14px;
  font-weight: 600;
}

.color-lab-inputs {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  width: clamp(360px, 50%, 560px);
  max-width: 100%;
}

.color-lab-inputs .input-field-preview {
  width: 100%;
  max-width: none;
}

.color-lab-controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
  align-items: start;
  max-width: 100%;
  width: 100%;
}

.color-lab-example {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.color-lab-example-heading,
.color-lab-example-title,
.color-lab-state-label {
  margin: 0;
}

.color-lab-example-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--copy);
}

.color-lab-state-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: start;
}

.color-lab-state-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.color-lab-state-label {
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.color-lab-state-specimen {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-width: 0;
}

.color-lab-state-card .input-field-preview {
  width: 100%;
  max-width: 100%;
}

.color-lab-button-demo,
.color-lab-badge-demo,
.color-lab-tab-demo,
.color-lab-check-demo,
.color-lab-switch-demo {
  font: inherit;
}

.color-lab-button-demo {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 14px;
  border: 1px solid var(--color-lab-line);
  background: transparent;
  color: var(--color-lab-text);
}

.color-lab-button-demo--active {
  border-color: var(--color-lab-accent);
  background: var(--color-lab-accent);
  color: var(--color-lab-on-accent);
}

.color-lab-button-demo--error {
  border-color: var(--color-lab-error);
  background: var(--color-lab-error);
  color: #fafafa;
}

.color-lab-button-demo--disabled {
  border-color: var(--color-lab-line);
  color: var(--color-lab-placeholder);
  opacity: 0.72;
}

.color-lab-check-demo,
.color-lab-switch-demo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-lab-text);
}

.color-lab-checkbox-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1px solid var(--color-lab-line);
  background: transparent;
}

.color-lab-checkbox-mark {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  background: transparent;
}

.color-lab-check-demo--active .color-lab-checkbox-demo {
  border-color: var(--color-lab-accent);
  background: var(--color-lab-accent);
}

.color-lab-check-demo--active .color-lab-checkbox-mark {
  background: var(--color-lab-on-accent);
}

.color-lab-check-demo--error .color-lab-checkbox-demo {
  border-color: var(--color-lab-error);
  background: var(--color-lab-error);
}

.color-lab-check-demo--error .color-lab-checkbox-mark {
  background: #fafafa;
}

.color-lab-check-demo--disabled {
  color: var(--color-lab-placeholder);
}

.color-lab-check-demo--disabled .color-lab-checkbox-demo {
  border-color: var(--color-lab-line);
  background: transparent;
}

.color-lab-switch-track-demo {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 42px;
  height: 24px;
  padding: 2px;
  border-radius: 999px;
  background: var(--color-lab-line);
}

.color-lab-switch-thumb-demo {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #fafafa;
}

.color-lab-switch-demo--active .color-lab-switch-track-demo {
  background: var(--color-lab-accent);
}

.color-lab-switch-demo--active .color-lab-switch-thumb-demo,
.color-lab-switch-demo--error .color-lab-switch-thumb-demo {
  margin-left: auto;
}

.color-lab-switch-demo--error .color-lab-switch-track-demo {
  background: var(--color-lab-error);
}

.color-lab-switch-demo--disabled {
  color: var(--color-lab-placeholder);
}

.color-lab-switch-demo--disabled .color-lab-switch-track-demo {
  background: var(--color-lab-line);
  opacity: 0.72;
}

.color-lab-badge-demo,
.color-lab-tab-demo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--color-lab-line);
  color: var(--color-lab-text);
}

.color-lab-badge-demo {
  background: transparent;
}

.color-lab-badge-demo--active {
  background: var(--color-lab-accent-soft);
  border-color: var(--color-lab-accent-soft);
  color: var(--color-lab-accent-strong);
}

.color-lab-badge-demo--error {
  background: color-mix(in srgb, var(--color-lab-error) 14%, transparent);
  border-color: color-mix(in srgb, var(--color-lab-error) 24%, transparent);
  color: var(--color-lab-error);
}

.color-lab-badge-demo--disabled,
.color-lab-tab-demo--disabled {
  color: var(--color-lab-placeholder);
}

.color-lab-tab-demo--active {
  border-color: var(--color-lab-accent);
  color: var(--color-lab-accent);
}

.color-lab-tab-demo--error {
  border-color: var(--color-lab-error);
  color: var(--color-lab-error);
}

.color-group-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-group-section:first-child {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.color-group-section + .color-group-section {
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.color-group-heading {
  display: grid;
  grid-template-columns: minmax(164px, 184px) minmax(0, 1fr);
  align-items: end;
  gap: 6px;
  margin: 0;
  padding: 0 10px 4px;
}

.color-group-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--copy);
}

.color-group-step-track {
  display: grid;
  grid-template-columns: repeat(14, var(--color-swatch-width));
  gap: var(--color-swatch-gap);
  width: var(--color-runway-width);
  margin: 0 var(--color-runway-margin-inline);
  justify-content: flex-start;
  align-items: end;
}

.color-group-step-label {
  display: block;
  margin: 0;
  width: var(--color-swatch-width);
  font-size: 8px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}

.color-group-heading--roles {
  grid-template-columns: 1fr;
  align-items: center;
}

.color-palette-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.color-role-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 10px 2px;
}

.color-role-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}

.color-role-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.color-role-swatch-button {
  width: 68px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.color-role-swatch-chip {
  height: 18px;
}

.color-role-card.is-open .color-role-swatch-chip {
  outline: 1px solid var(--line-strong);
  outline-offset: 2px;
}

.color-role-name,
.color-role-picker-code {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.color-role-name {
  color: var(--copy);
}

.color-role-picker {
  display: grid;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--panel-strong);
  box-shadow: 0 16px 36px rgba(35, 28, 18, 0.14);
}

.color-role-picker-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}

.color-role-picker-row {
  display: grid;
  grid-template-columns: 56px max-content;
  align-items: start;
  gap: 10px;
  width: fit-content;
  max-width: 100%;
}

.color-role-picker-code {
  color: var(--muted);
  line-height: 1.1;
  padding-top: 3px;
}

.color-role-picker-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: fit-content;
  max-width: 100%;
}

.color-role-picker-track {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--color-swatch-gap);
  width: var(--color-runway-width);
  min-width: 0;
}

.color-role-picker-track--utility {
  display: grid;
  grid-template-columns: repeat(4, var(--color-runway-quarter-width));
  gap: var(--color-swatch-gap);
  width: var(--color-runway-width);
}

.color-role-picker-swatch {
  flex: 0 0 var(--color-swatch-width);
  width: var(--color-swatch-width);
}

.color-role-picker-track--utility .color-role-picker-swatch {
  width: 100%;
  flex: 1 1 auto;
}

.color-role-picker-track--utility .color-role-picker-swatch .color-swatch-chip {
  width: 100%;
}

.color-palette-row {
  display: grid;
  grid-template-columns: minmax(164px, 184px) minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
}

.color-palette-row.is-selected {
  border-left: 0;
  padding-left: 0;
}

.color-palette-label {
  display: block;
  align-self: center;
  padding: 0;
  min-width: 0;
  width: 100%;
  margin: 0;
}

.color-palette-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.color-palette-base-control {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
  cursor: pointer;
}

.color-palette-base-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.color-palette-base-chip {
  width: 18px;
  height: 18px;
  border-radius: 999px;
}

.color-palette-label-button {
  appearance: none;
  text-align: left;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.color-palette-label .section-eyebrow,
.color-palette-label .button-grid-code,
.color-palette-label .color-palette-count,
.color-group-title {
  margin: 0;
}

.color-palette-title {
  margin: 0;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--copy);
  line-height: 1.1;
  white-space: nowrap;
  text-transform: uppercase;
}

.color-palette-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.color-palette-count {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.color-palette-preview,
.color-palette-track {
  width: 100%;
  align-self: start;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  overflow: visible;
  margin: 0;
  padding: 0;
}

.color-palette-track {
  flex-direction: column;
  gap: 6px;
}

.color-palette-preview {
  position: relative;
  isolation: isolate;
  overflow: visible;
  width: var(--color-runway-width);
  margin: 0 var(--color-runway-margin-inline);
  padding: 2px 0;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
}

.color-palette-preview::before,
.color-palette-preview::after {
  display: none;
}

.color-palette-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: flex-start;
  align-items: flex-start;
  align-content: flex-start;
  min-width: 0;
  width: var(--color-runway-width);
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

.color-palette-track .color-palette-preview-grid {
  gap: var(--color-swatch-gap);
  flex-wrap: nowrap;
}

.color-palette-preview--utility {
  width: var(--color-runway-width);
}

.color-palette-preview-grid--utility {
  display: grid;
  grid-template-columns: repeat(4, var(--color-runway-quarter-width));
  gap: var(--color-swatch-gap);
  width: var(--color-runway-width);
  min-width: 0;
}

.color-palette-preview-grid--utility .color-swatch-button {
  width: 100%;
  flex: 1 1 auto;
}

.color-swatch-chip {
  display: block;
  width: 100%;
  height: 16px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  justify-self: start;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 2px 4px rgba(0, 0, 0, 0.16),
    0 6px 14px rgba(0, 0, 0, 0.12);
}

.color-swatch-button {
  position: relative;
  display: grid;
  gap: 0;
  align-content: start;
  flex: 0 0 var(--color-swatch-width);
  width: var(--color-swatch-width);
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.color-swatch-button::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px);
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--panel-strong);
  border: 1px solid var(--line-strong);
  color: var(--text);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms ease, transform 120ms ease;
  z-index: 2;
}

.color-swatch-button:hover::after,
.color-swatch-button:focus-visible::after,
.color-swatch-button.is-tooltip-active::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.color-swatch-button.is-selected .color-swatch-chip {
  outline: 2px solid #fafafa;
  outline-offset: 2px;
}

.color-swatch-step,
.color-swatch-hex {
  display: none;
}

.color-palette-preview--compact {
  display: grid;
  gap: 10px;
}

.color-palette-preview-grid--compact {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.color-palette-chip-compact {
  display: block;
  width: 100%;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (max-width: 1200px) {
  .sidebar-shell {
    padding: 20px 16px;
  }

  .main-content-shell--inputs > .sidebar-shell {
    padding: 8px 4px;
  }

  .main-header {
    padding: 8px 10px 10px;
  }

  .main-banner {
    padding: 10px 10px 12px;
  }

  .main-content-shell {
    grid-template-columns: 1fr;
    padding: 0 10px 20px;
  }

  .main-content-shell--inputs {
    grid-template-columns:
      fit-content(200px)
      fit-content(var(--registry-input-pattern-column-min-width))
      minmax(0, 1fr);
  }

  .view-content--family-grid {
    display: block !important;
  }

  .view-content--family-grid > .family-block {
    display: grid;
  }

  .main-content-shell--inputs > .view-content.view-content--family-grid {
    display: contents !important;
  }

  .main-content-shell--inputs > .view-content.view-content--family-grid > .family-block--inputs {
    display: contents;
  }

  .main-footer {
    padding: 0 10px 8px;
  }

  .icon-browser-layout {
    display: grid;
    gap: 16px;
  }

  .icon-group-rail {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }

  .icon-browser-stage-heading {
    align-items: start;
    flex-direction: column;
    gap: 6px;
  }

  .button-browser-layout {
    display: grid;
    gap: 16px;
  }

  .input-browser-layout {
    display: grid;
    gap: 16px;
  }

  .main-content-shell--inputs .input-browser-layout {
    display: contents;
    gap: 0;
  }

  .input-artifact-rail,
  .family-artifact-rail {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border-right: 0;
    padding-right: 0;
  }

  .main-content-shell--inputs .input-artifact-rail {
    grid-template-columns: 1fr;
  }

  .color-lab-layout {
    grid-template-columns: 1fr;
  }

  .color-lab-inputs {
    width: 100%;
  }

  .color-packet-row {
    grid-template-columns: 1fr;
  }

  .color-packet-universal-grid {
    grid-template-columns: 1fr;
  }

  .color-palette-row {
    flex-direction: column;
  }

  .color-palette-preview-grid {
    width: 100%;
  }

  .color-role-picker-row {
    grid-template-columns: 1fr;
  }

  .color-role-picker-track,
  .color-role-picker-track--utility {
    width: 100%;
  }

  .theme-token-popup {
    margin-left: 0;
  }

  .button-detail-panel,
  .icon-detail-panel {
    position: static;
    padding: 18px 0 0;
    border-right: 0;
    border-top: 1px solid var(--line);
  }
}