.ddla-lab {
  position: relative;
  padding-block: var(--ddla-section-space-sm) var(--ddla-section-space);
}

.ddla-lab__hero {
  display: grid;
  gap: var(--ddla-space-md);
  margin-bottom: var(--ddla-space-3xl);
  text-align: center;
}

.ddla-lab__kicker {
  margin: 0;
  color: var(--ddla-gold);
  font-size: var(--ddla-text-xs);
  font-weight: var(--ddla-weight-semibold);
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.ddla-lab__title {
  max-width: 980px;
  margin: 0 auto;
  text-transform: uppercase;
}

.ddla-lab__intro {
  max-width: 860px;
  margin: 0 auto;
  color: var(--ddla-text-soft);
}

.ddla-lab__section {
  display: grid;
  gap: var(--ddla-space-xl);
  margin-block: var(--ddla-space-3xl);
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 0;
}

.ddla-lab__section-header {
  display: grid;
  gap: var(--ddla-space-sm);
  max-width: 900px;
}

.ddla-lab__section-title {
  margin: 0;
  font-size: var(--ddla-text-2xl);
}

.ddla-lab__section-text {
  margin: 0;
  color: var(--ddla-text-muted);
}

.ddla-lab__surface {
  display: grid;
  gap: var(--ddla-space-xl);
  padding: clamp(1rem, 3vw, 2rem);
  border: 1px solid var(--ddla-border-subtle);
  border-radius: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.035), transparent 44%),
    rgba(4, 8, 16, 0.48);
  box-shadow: var(--ddla-shadow-soft);
}

.ddla-lab__rules-grid,
.ddla-lab__customizer-map,
.ddla-lab__foundation-grid,
.ddla-lab__comparison,
.ddla-lab__asset-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}

.ddla-lab__rule,
.ddla-lab__foundation-box,
.ddla-lab__comparison article,
.ddla-lab__asset-grid article {
  padding: var(--ddla-space-lg);
  border: 1px solid var(--ddla-border-subtle);
  background: rgba(0, 0, 0, 0.18);
}

.ddla-lab__rule h3,
.ddla-lab__foundation-box h3,
.ddla-lab__comparison h3,
.ddla-lab__asset-grid h3,
.ddla-lab__customizer-map h3 {
  margin-top: 0;
  font-size: var(--ddla-text-lg);
}

.ddla-lab__customizer-map > div {
  padding: var(--ddla-space-lg);
  border-left: 1px solid var(--ddla-border-gold-soft);
  background: rgba(201, 168, 93, 0.035);
}

.ddla-lab__swatches {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
}

.ddla-lab__swatch {
  display: grid;
  gap: var(--ddla-space-xs);
  padding: var(--ddla-space-md);
  border: 1px solid var(--ddla-border-subtle);
  background: rgba(0, 0, 0, 0.18);
}

.ddla-lab__swatch-color {
  display: block;
  width: 100%;
  height: 72px;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

.ddla-lab__swatch strong {
  color: var(--ddla-gold-light);
}

.ddla-lab__swatch small {
  color: var(--ddla-text-muted);
}

.ddla-lab__type-specimen {
  gap: var(--ddla-space-2xl);
}

.ddla-lab__type-specimen h1,
.ddla-lab__type-specimen h2 {
  margin: 0 0 var(--ddla-space-sm);
}

.ddla-lab__mono-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ddla-space-sm);
}

.ddla-lab__spacing-bars {
  display: grid;
  gap: var(--ddla-space-sm);
  margin-block: var(--ddla-space-md);
}

.ddla-lab__spacing-bars span {
  display: block;
  height: 12px;
  background: linear-gradient(90deg, var(--ddla-gold), transparent);
}

.ddla-lab__panel-grid,
.ddla-lab__panel-family {
  display: grid;
  gap: var(--ddla-space-xl);
}

.ddla-lab__family-title {
  margin: 0;
  color: var(--ddla-text-soft);
  font-size: var(--ddla-text-sm);
  font-weight: var(--ddla-weight-semibold);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.ddla-lab__code {
  display: block;
  overflow-x: auto;
  padding: var(--ddla-space-md);
  border: 1px solid var(--ddla-border-subtle);
  border-radius: 0;
  background: rgba(0,0,0,0.28);
  color: var(--ddla-text-soft);
  font-size: var(--ddla-text-sm);
}

@media (min-width: 900px) {
  .ddla-lab__card-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ddla-lab__button-system {
  gap: var(--ddla-space-2xl);
}

.ddla-lab__button-family {
  display: grid;
  gap: var(--ddla-space-lg);
  padding-bottom: var(--ddla-space-xl);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.ddla-lab__button-family:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}

.ddla-lab__variant-heading {
  display: grid;
  gap: 0.25rem;
}

.ddla-lab__variant-heading h3 {
  margin: 0;
  color: var(--ddla-gold-light);
  font-size: var(--ddla-text-lg);
  font-weight: var(--ddla-heading-weight);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.ddla-lab__button-family--zafiro .ddla-lab__variant-heading h3 {
  color: var(--ddla-blue-light);
}

.ddla-lab__button-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
}

.ddla-lab__button-pair > div {
  display: grid;
  gap: var(--ddla-space-md);
  justify-items: start;
}

.ddla-lab__button-pair--compact {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.ddla-lab__button-state {
  margin: 0;
  color: rgba(233, 222, 197, 0.58);
  font-size: var(--ddla-text-xs);
  font-weight: var(--ddla-weight-semibold);
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.ddla-lab__card-grid {
  display: grid;
  gap: var(--ddla-space-lg);
  align-items: stretch;
}

.ddla-lab__card-grid .ddla-card {
  width: 100%;
}

.ddla-lab__button-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ddla-space-lg);
  align-items: center;
}

.ddla-lab__nav-specimen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
}

.ddla-lab__nav-item-demo {
  display: inline-grid;
  place-items: center;
  min-height: 2.4rem;
  padding-inline: 1rem;
  border-left: 1px solid color-mix(in srgb, var(--ddla-nav-border-color, var(--ddla-gold)) 52%, transparent);
  border-right: 1px solid color-mix(in srgb, var(--ddla-nav-border-color, var(--ddla-gold)) 52%, transparent);
  color: var(--ddla-nav-item-gold, var(--ddla-gold));
  font-family: var(--ddla-font-nav, var(--ddla-font-body));
  font-size: var(--ddla-nav-font-size, 0.82rem);
  font-weight: var(--ddla-nav-weight, 600);
  letter-spacing: var(--ddla-nav-letter-spacing, 0.12em);
  text-transform: uppercase;
}