/* src/web-components/color-palette/styles.css */
color-palette:not(:defined) {
  display: block;
}
color-palette {
  display: block;
}
color-palette .palette {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-xs, 0.5rem);
}
color-palette .palette.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
}
color-palette .palette.list {
  flex-direction: column;
}
color-palette .palette.list .swatch-wrap {
  flex-direction: row;
  align-items: center;
  gap: var(--size-s, 0.75rem);
}
color-palette .palette.list .color-box {
  inline-size: 36px !important;
  block-size: 36px !important;
}
color-palette .swatch-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--size-2xs, 0.25rem);
}
color-palette .color-box {
  position: relative;
  border: 1px solid oklch(0% 0 0 / 0.15);
  border-radius: var(--radius-s, 0.25rem);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-family: var(--font-mono, monospace);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  overflow: hidden;
}
color-palette .color-box:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px oklch(0% 0 0 / 0.15);
  z-index: 1;
}
color-palette .color-box:focus-visible {
  outline: 2px solid var(--color-focus-ring, currentColor);
  outline-offset: 2px;
}
color-palette .color-value {
  font-size: 0.625rem;
  line-height: 1.2;
  opacity: 0;
  transition: opacity 0.15s ease;
  text-align: center;
  padding: 2px 4px;
  word-break: break-all;
}
color-palette .color-box:hover .color-value,
color-palette .color-box:focus-visible .color-value,
color-palette .color-value.visible {
  opacity: 1;
}
color-palette .color-box.copied::after {
  content: "Copied!";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: oklch(0% 0 0 / 0.6);
  color: white;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  font-family: var(--font-sans, system-ui);
  border-radius: inherit;
}
color-palette .color-name {
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #666);
  text-align: center;
  max-inline-size: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src/web-components/palette-generator/styles.css */
palette-generator {
  display: block;
}
palette-generator .pg-seed-label {
  display: block;
  font-size: var(--font-size-sm, 0.875rem);
  font-weight: 600;
  color: var(--color-text-muted, #666);
  margin-block-end: var(--size-2xs, 0.25rem);
}
palette-generator > color-picker,
palette-generator > input[type=color] {
  margin-block-end: var(--size-s, 0.75rem);
  padding-block-end: var(--size-s, 0.75rem);
  border-block-end: 1px solid var(--color-border-subtle, #e5e5e5);
}
palette-generator .pg-export {
  margin-block-start: var(--size-s, 0.75rem);
}
palette-generator .pg-export button:hover {
  background: var(--surface-hover, #f5f5f5);
}
palette-generator .pg-export button:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);
  outline-offset: 2px;
}

/* src/web-components/type-specimen/styles.css */
type-specimen:not(:defined) {
  display: block;
}
type-specimen {
  display: block;
}
type-specimen .specimen-header {
  margin-block-end: var(--size-s, 0.75rem);
}
type-specimen .specimen-label {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #666);
  margin-block-end: var(--size-2xs, 0.25rem);
  font-family: var(--font-sans, system-ui);
}
type-specimen .specimen-sample {
  font-size: var(--font-size-3xl, 1.875rem);
  line-height: 1.2;
  margin: 0;
  padding: var(--size-xs, 0.5rem);
  border: 1px dashed transparent;
  border-radius: var(--radius-s, 0.25rem);
  transition: border-color 0.15s ease;
  cursor: text;
}
type-specimen .specimen-sample:hover {
  border-color: var(--color-border, #ddd);
}
type-specimen .specimen-sample:focus {
  outline: none;
  border-color: var(--color-primary, #333);
}
type-specimen .specimen-chars {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs, 0.25rem);
  margin-block-end: var(--size-s, 0.75rem);
  padding: var(--size-xs, 0.5rem);
  background: var(--color-surface-raised, #f8f8f8);
  border-radius: var(--radius-s, 0.25rem);
}
type-specimen .char-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  font-size: var(--font-size-sm, 0.875rem);
}
type-specimen .char-label {
  font-family: var(--font-sans, system-ui);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 600;
  color: var(--color-text-muted, #666);
  inline-size: 3.5rem;
  flex-shrink: 0;
}
type-specimen .char-row span:not(.char-label) {
  inline-size: 1.25em;
  text-align: center;
}
type-specimen .specimen-weights {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-s, 0.75rem);
  margin-block-end: var(--size-s, 0.75rem);
}
type-specimen .weight-sample {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
type-specimen .weight-label {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #666);
}
type-specimen .weight-text {
  font-size: var(--font-size-2xl, 1.5rem);
}
type-specimen .specimen-scale {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs, 0.25rem);
}
type-specimen .scale-step {
  display: flex;
  align-items: baseline;
  gap: var(--size-s, 0.75rem);
  line-height: 1.3;
}
type-specimen .scale-label {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #666);
  inline-size: 2.5rem;
  flex-shrink: 0;
  text-align: end;
}
type-specimen .scale-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* src/web-components/spacing-specimen/styles.css */
spacing-specimen:not(:defined) {
  display: block;
}
spacing-specimen {
  display: block;
}
spacing-specimen .specimen-label {
  display: block;
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted, #666);
  margin-block-end: var(--size-s, 0.75rem);
  font-family: var(--font-sans, system-ui);
}
spacing-specimen .specimen-scale {
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs, 0.25rem);
}
spacing-specimen .scale-step {
  display: grid;
  grid-template-columns: 3rem 1fr auto;
  align-items: center;
  gap: var(--size-s, 0.75rem);
  min-block-size: 1.75rem;
}
spacing-specimen .scale-name {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm, 0.875rem);
  color: var(--color-text-muted, #666);
  text-align: end;
}
spacing-specimen .scale-bar {
  display: block;
  block-size: var(--size-m, 1rem);
  min-inline-size: 2px;
  background: var(--color-interactive, oklch(55% 0.2 260));
  border-radius: var(--radius-s, 0.25rem);
  transition: inline-size 0.3s ease;
}
spacing-specimen .scale-value {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-text-muted, #666);
  font-variant-numeric: tabular-nums;
  min-inline-size: 3.5rem;
  text-align: end;
}

/* src/web-components/token-specimen/styles.css */
token-specimen:not(:defined) {
  display: block;
  min-height: 2rem;
}
token-specimen {
  display: block;
}

/* src/web-components/component-sampler/styles.css */
component-sampler:not(:defined) {
  display: block;
}
component-sampler {
  display: block;
}

/* src/web-components/semantic-palette/styles.css */
semantic-palette[data-upgraded] > dl,
semantic-palette[data-upgraded] > ul,
semantic-palette[data-upgraded] > ol {
  display: none;
}
semantic-palette .sp-export button:hover {
  background: var(--color-surface-hover, var(--color-surface-raised, #f5f5f5));
}
semantic-palette .sp-export button:focus-visible {
  outline: var(--focus-ring-width, 2px) solid var(--focus-ring-color, currentColor);
  outline-offset: 2px;
}

/* src/web-components/motion-specimen/styles.css */
@keyframes ms-slide {
  from {
    inset-inline-start: 0;
  }
  to {
    inset-inline-start: calc(100% - 1rem);
  }
}
@keyframes ms-fill {
  0% {
    transform: scaleX(0);
  }
  60% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
    opacity: 0.3;
  }
}
@media (prefers-reduced-motion: reduce) {
  motion-specimen .ms-dot {
    animation: none !important;
    inset-inline-start: calc(50% - 0.5rem) !important;
  }
  motion-specimen .ms-bar-fill {
    animation: none !important;
    transform: scaleX(0.6) !important;
    opacity: 0.6 !important;
  }
}

/* src/web-components/accessibility-specimen/styles.css */
accessibility-specimen {
  display: block;
  font: inherit;
}
accessibility-specimen .as-contrast-table {
  inline-size: 100%;
  border-collapse: collapse;
  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
  border-radius: var(--radius-m, 0.5rem);
  overflow: hidden;
  font-size: 0.95em;
}
accessibility-specimen .as-contrast-table th,
accessibility-specimen .as-contrast-table td {
  padding-block: var(--size-2xs, 0.375rem);
  padding-inline: var(--size-s, 0.5rem);
  text-align: start;
  border-block-end: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
}
accessibility-specimen .as-contrast-table tr:last-child th,
accessibility-specimen .as-contrast-table tr:last-child td {
  border-block-end: none;
}
accessibility-specimen .as-contrast-table thead {
  background: var(--color-surface-raised, var(--color-surface, #fff));
  font-size: 0.85em;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted, currentColor);
}
accessibility-specimen .as-pair-label {
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--size-2xs, 0.375rem);
  font-variant-numeric: tabular-nums;
}
accessibility-specimen .as-swatch {
  display: inline-block;
  inline-size: 1.25rem;
  block-size: 1.25rem;
  border-radius: var(--radius-s, 0.25rem);
  border: var(--border-width-thin, 1px) solid currentColor;
  flex-shrink: 0;
}
accessibility-specimen .as-pair-sample {
  font-weight: 500;
  font-size: 1em;
  white-space: nowrap;
  text-align: center;
}
accessibility-specimen .as-pair-ratio {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
accessibility-specimen .as-badge {
  text-align: center;
  font-weight: 600;
  font-size: 1.1em;
  inline-size: 3em;
}
accessibility-specimen .as-pass {
  color: var(--color-success, #2e7d32);
}
accessibility-specimen .as-fail {
  color: var(--color-error, #c62828);
}
accessibility-specimen .as-empty {
  text-align: center;
  font-style: italic;
  color: var(--color-text-muted, currentColor);
  padding-block: var(--size-l, 1.5rem) !important;
}
accessibility-specimen .as-checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--size-2xs, 0.375rem);
}
accessibility-specimen .as-checklist > li {
  display: flex;
  align-items: flex-start;
  gap: var(--size-xs, 0.5rem);
  padding-block: var(--size-2xs, 0.375rem);
  padding-inline: var(--size-s, 0.5rem);
  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
  border-radius: var(--radius-s, 0.25rem);
}
accessibility-specimen .as-checklist-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  border-radius: var(--radius-full, 999px);
  font-weight: 700;
  line-height: 1;
}
accessibility-specimen .as-status-pass {
  border-color: var(--color-success, #2e7d32);
}
accessibility-specimen .as-status-pass .as-checklist-icon {
  background: var(--color-success, #2e7d32);
  color: var(--color-text-on-success, white);
}
accessibility-specimen .as-status-fail {
  border-color: var(--color-error, #c62828);
}
accessibility-specimen .as-status-fail .as-checklist-icon {
  background: var(--color-error, #c62828);
  color: var(--color-text-on-error, white);
}
accessibility-specimen .as-status-warn {
  border-color: var(--color-warning, #b8860b);
}
accessibility-specimen .as-status-warn .as-checklist-icon {
  background: var(--color-warning, #b8860b);
  color: var(--color-text-on-warning, white);
}
accessibility-specimen .as-status-na .as-checklist-icon {
  background: var(--color-text-muted, oklch(60% 0 0));
  color: var(--color-surface, white);
}
accessibility-specimen .as-sr-only {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* src/web-components/breakpoint-specimen/styles.css */
breakpoint-specimen:not(:defined) {
  display: block;
}
breakpoint-specimen {
  display: block;
  font-family: var(--font-sans, system-ui);
  color: var(--color-text, #1a1a1a);
}
@scope (breakpoint-specimen) {
  .bps-label {
    display: block;
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted, #666);
    margin-block-end: var(--size-s, 0.75rem);
  }
  .bps-readout {
    display: inline-flex;
    align-items: baseline;
    gap: var(--size-s, 0.75rem);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-variant-numeric: tabular-nums;
    margin-block-end: var(--size-m, 1rem);
  }
  .bps-width {
    font-size: var(--font-size-l, 1.25rem);
    font-weight: 600;
  }
  .bps-active {
    font-size: var(--font-size-sm, 0.875rem);
    padding: var(--size-3xs, 0.125rem) var(--size-xs, 0.5rem);
    border-radius: var(--radius-s, 0.25rem);
    background: var(--color-surface-raised, oklch(96% 0 0));
    color: var(--color-text-muted, #666);
    border: 1px solid var(--color-border, oklch(85% 0 0));
  }
  .bps-active[data-active]:not([data-active=""]) {
    background: var(--color-accent-soft, oklch(94% 0.04 260));
    color: var(--color-accent, oklch(45% 0.18 260));
    border-color: currentColor;
  }
  .bps-ruler {
    position: relative;
    block-size: var(--size-xl, 2.5rem);
    margin: var(--size-s, 0.75rem) 0 var(--size-l, 1.5rem);
    border-block-start: 2px solid var(--color-border, oklch(85% 0 0));
  }
  .bps-cursor {
    position: absolute;
    inset-block: -0.5rem auto;
    inline-size: 2px;
    block-size: calc(100% + 1rem);
    background: var(--color-accent, oklch(45% 0.18 260));
    inset-inline-start: var(--bps-pos, 0%);
    transform: translateX(-1px);
    transition: inset-inline-start 0.12s linear;
    z-index: 1;
  }
  .bps-stop {
    position: absolute;
    inset-block-start: -2px;
    inset-inline-start: var(--bps-pos, 0%);
    display: block;
  }
  .bps-tick {
    display: block;
    inline-size: 1px;
    block-size: var(--size-xs, 0.5rem);
    background: var(--color-text-muted, #666);
  }
  .bps-stop-label {
    position: absolute;
    inset-block-start: var(--size-s, 0.75rem);
    inset-inline-start: 0;
    transform: translateX(-50%);
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: var(--font-size-xs, 0.75rem);
    color: var(--color-text-muted, #666);
    text-align: center;
    white-space: nowrap;
    line-height: 1.2;
  }
  .bps-stop[data-current] .bps-stop-label {
    color: var(--color-accent, oklch(45% 0.18 260));
    font-weight: 600;
  }
  .bps-stop[data-current] .bps-tick {
    background: var(--color-accent, oklch(45% 0.18 260));
    inline-size: 2px;
  }
  .bps-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--size-2xs, 0.25rem) var(--size-m, 1rem);
    margin: 0;
    font-size: var(--font-size-sm, 0.875rem);
  }
  .bps-row {
    display: contents;
  }
  .bps-row dt {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-weight: 600;
    color: var(--color-text-muted, #666);
  }
  .bps-row dd {
    margin: 0;
    color: var(--color-text-muted, #666);
  }
  .bps-row[data-current] dt,
  .bps-row[data-current] dd {
    color: var(--color-accent, oklch(45% 0.18 260));
    font-weight: 600;
  }
}
breakpoint-specimen:not([data-observe]) [data-bp=sm] {
  font-style: italic;
}
@media (width >= 37.5rem) {
  breakpoint-specimen:not([data-observe]) [data-bp=sm] {
    font-style: normal;
  }
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dt,
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=sm] dd {
    color: var(--color-text, currentColor);
  }
}
@media (width >= 48rem) {
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dt,
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=md] dd {
    color: var(--color-text, currentColor);
  }
}
@media (width >= 64rem) {
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dt,
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=lg] dd {
    color: var(--color-text, currentColor);
  }
}
@media (width >= 87.5rem) {
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dt,
  breakpoint-specimen:not([data-observe]) .bps-row[data-bp=xl] dd {
    color: var(--color-text, currentColor);
  }
}
@media print {
  breakpoint-specimen .bps-readout,
  breakpoint-specimen .bps-ruler {
    display: none;
  }
}

/* src/web-components/layout-specimen/styles.css */
layout-specimen {
  display: flex;
  flex-direction: column;
  gap: var(--size-l, 1.5rem);
  font: inherit;
}
layout-specimen .ls-entry {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--size-s, 0.75rem);
  padding: var(--size-s, 0.75rem);
  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
  border-radius: var(--radius-m, 0.5rem);
  background: var(--color-surface, #fff);
}
layout-specimen .ls-entry-head {
  display: flex;
  flex-direction: column;
  gap: var(--size-3xs, 0.125rem);
}
layout-specimen .ls-entry-name {
  margin: 0;
  font-size: 1em;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--color-text, #1a1a1a);
}
layout-specimen .ls-entry-desc {
  margin: 0;
  font-size: 0.875em;
  color: var(--color-text-muted, currentColor);
}
layout-specimen .ls-live {
  padding: var(--size-s, 0.75rem);
  background: var(--color-surface-sunken, oklch(94% 0 0));
  border-radius: var(--radius-s, 0.25rem);
  min-block-size: 4rem;
}
layout-specimen .ls-snippet {
  margin: 0;
  padding: var(--size-2xs, 0.375rem) var(--size-s, 0.5rem);
  background: var(--color-surface-sunken, oklch(94% 0 0));
  border-radius: var(--radius-s, 0.25rem);
  font-size: 0.8em;
  line-height: 1.4;
  font-family: var(--font-mono, ui-monospace, monospace);
  color: var(--color-text, #1a1a1a);
  overflow-x: auto;
  white-space: pre;
}
layout-specimen .ls-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--size-xs, 0.5rem);
  background: var(--color-action-subtle, color-mix(in oklch, var(--color-interactive, oklch(55% 0.2 260)) 15%, transparent));
  color: var(--color-text, #1a1a1a);
  border: var(--border-width-thin, 1px) solid var(--color-interactive, currentColor);
  border-radius: var(--radius-s, 0.25rem);
  font-size: 0.85em;
  font-weight: 500;
  min-block-size: 2rem;
}
layout-specimen .ls-box-main {
  background: var(--color-surface, #fff);
  border-style: dashed;
}
layout-specimen .ls-box-reel {
  inline-size: 5rem;
  flex-shrink: 0;
}
layout-specimen .ls-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--size-3xs, 0.125rem) var(--size-2xs, 0.375rem);
  background: var(--color-surface-raised, var(--color-surface, #fff));
  border: var(--border-width-thin, 1px) solid var(--color-border, #ddd);
  border-radius: var(--radius-full, 999px);
  font-size: 0.85em;
}

/* src/web-components/font-pairer/styles.css */
font-pairer {
  display: block;
  max-inline-size: 56rem;
}
font-pairer:not(:defined) {
  display: none;
}

/* src/web-components/gradient-builder/styles.css */
gradient-builder {
  display: block;
  max-inline-size: 32rem;
}
gradient-builder:not(:defined) {
  display: none;
}

/* src/web-components/brand-specimen/styles.css */
.brand-specimen {
  display: grid;
  gap: var(--size-l, 1.5rem);
}
.bs-surfaces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--size-m, 1rem);
}
.bs-surfaces figure {
  margin: 0;
  padding: var(--size-l, 1.5rem);
  border-radius: var(--radius-m, 0.5rem);
  display: grid;
  place-items: center;
  gap: var(--size-s, 0.75rem);
}
.bs-surfaces [data-surface=light] {
  background: #fff;
  color: #111;
}
.bs-surfaces [data-surface=dark] {
  background: #111;
  color: #fff;
}
.bs-scale {
  display: flex;
  align-items: end;
  gap: var(--size-l, 1.5rem);
  flex-wrap: wrap;
}
.bs-scale span {
  display: grid;
  justify-items: center;
  gap: var(--size-2xs, 0.25rem);
}
.bs-clear-box {
  display: inline-block;
  padding: 1em;
  outline: 1px dashed var(--color-border, #d4d4d8);
  outline-offset: 0.25em;
}

/* src/web-components/icon-set/styles.css */
icon-set:not(:defined) {
  display: block;
}
icon-set {
  display: block;
  font-family: var(--font-sans, system-ui);
  color: var(--color-text, #1a1a1a);
}
@scope (icon-set) {
  .icon-set__search input {
    inline-size: 100%;
    padding: var(--size-s, 0.5rem);
    border: 1px solid var(--color-border, #d4d4d8);
    border-radius: var(--radius-s, 0.25rem);
    font: inherit;
    color: inherit;
    background: var(--color-surface, #fff);
  }
  .icon-set__grid {
    list-style: none;
    margin: var(--size-m, 1rem) 0 0;
    padding: 0;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: var(--size-2xs, 0.25rem);
  }
  .icon-set__grid [hidden] {
    display: none;
  }
  .icon-set__grid button {
    inline-size: 100%;
    block-size: 100%;
    display: grid;
    align-content: start;
    justify-items: center;
    gap: var(--size-2xs, 0.25rem);
    padding: var(--size-s, 0.75rem);
    background: none;
    border: 1px solid transparent;
    border-radius: var(--radius-s, 0.25rem);
    cursor: pointer;
    font-size: var(--font-size-xs, 0.75rem);
    color: inherit;
  }
  .icon-set__grid button > span:last-child {
    min-block-size: 2lh;
    text-align: center;
    overflow-wrap: anywhere;
  }
  .icon-set__grid button:hover {
    border-color: var(--color-border, #d4d4d8);
    background: var(--color-surface-2, #f4f4f5);
  }
  .icon-set__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.5rem;
    block-size: 1.5rem;
  }
  .icon-set__grid [data-icon] {
    font-size: 1.5rem;
  }
}

/* src/web-components/icon-specimen/styles.css */
icon-specimen:not(:defined) {
  display: block;
}
icon-specimen {
  display: block;
  font-family: var(--font-sans, system-ui);
  color: var(--color-text, #1a1a1a);
}
@scope (icon-specimen) {
  .icon-specimen {
    inline-size: 100%;
    border-collapse: collapse;
  }
  .icon-specimen th,
  .icon-specimen td {
    text-align: start;
    padding: var(--size-s, 0.75rem);
    border-block-end: 1px solid var(--color-border, #d4d4d8);
  }
  .icon-specimen thead th {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-muted, #71717a);
  }
  .icon-specimen td [data-icon] {
    color: inherit;
    vertical-align: middle;
  }
}

/* src/patterns/do-dont.css */
[data-list=do-dont],
[data-list=pro-con] {
  list-style: none;
  padding-inline-start: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--size-s, 0.5rem);
}
[data-list] > [data-do],
[data-list] > [data-pro] {
  padding: var(--size-s, 0.5rem) var(--size-m, 1rem);
  border-inline-start: 4px solid var(--color-success, oklch(55% 0.2 145));
  background: var(--color-success-subtle, oklch(95% 0.03 145));
  border-radius: var(--radius-s, 0.25rem);
}
[data-list] > [data-dont],
[data-list] > [data-con] {
  padding: var(--size-s, 0.5rem) var(--size-m, 1rem);
  border-inline-start: 4px solid var(--color-error, oklch(55% 0.22 25));
  background: var(--color-error-subtle, oklch(95% 0.03 25));
  border-radius: var(--radius-s, 0.25rem);
}
[data-list=do-dont] > [data-do]::before {
  content: "Do";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-success, oklch(45% 0.2 145));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-list=do-dont] > [data-dont]::before {
  content: "Don\2019t";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error, oklch(45% 0.22 25));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-list=pro-con] > [data-pro]::before {
  content: "Pro";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-success, oklch(45% 0.2 145));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
[data-list=pro-con] > [data-con]::before {
  content: "Con";
  display: block;
  font-weight: 700;
  font-size: var(--font-size-xs, 0.75rem);
  color: var(--color-error, oklch(45% 0.22 25));
  margin-block-end: var(--size-2xs, 0.25rem);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* src/patterns/token-table.css */
.ds-token-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-s, 0.875rem);
}
.ds-token-table thead {
  border-block-end: 2px solid var(--color-border, #ddd);
}
.ds-token-table th {
  text-align: start;
  padding: var(--size-xs, 0.25rem) var(--size-s, 0.5rem);
  font-size: var(--font-size-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted, #666);
}
.ds-token-table td {
  padding: var(--size-xs, 0.25rem) var(--size-s, 0.5rem);
  border-block-end: 1px solid var(--color-border, #eee);
  vertical-align: middle;
}
.ds-token-table code {
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-xs, 0.75rem);
}
.ds-token-table .ds-swatch {
  display: inline-block;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--radius-s, 0.25rem);
  border: 1px solid var(--color-border, #ddd);
  vertical-align: middle;
}
.ds-token-table token-swatch {
  display: inline-flex;
}
.ds-token-table token-swatch > [data-preview] {
  width: 2.5rem;
  height: 1.5rem;
  border-radius: var(--radius-s, 0.25rem);
  border: 1px solid var(--color-border, #ddd);
}

/* src/index.css */