.styleguide {
  max-width: 60rem;
  margin: 0 auto;
  padding: max(env(safe-area-inset-top), var(--space-5)) var(--space-4)
    var(--space-7);
}

.styleguide > header {
  margin-bottom: var(--space-5);
}

.styleguide > header p {
  margin-top: var(--space-2);
  color: var(--ink-soft);
  max-width: 34rem;
}

.styleguide__panels {
  display: grid;
  gap: var(--space-5);
}

@media (width >= 52rem) {
  .styleguide__panels {
    grid-template-columns: 1fr 1fr;
  }
}

.styleguide__panel {
  background: var(--bg);
  color: var(--ink);
  border: 1.5px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-4) var(--space-6);
}

.styleguide__panel--light {
  color-scheme: light;
}

.styleguide__panel--dark {
  color-scheme: dark;
}

.styleguide__panel > h2 {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-5);
}

.specimen {
  margin-bottom: var(--space-6);
}

.specimen > * + * {
  margin-top: var(--space-3);
}

.swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
  gap: var(--space-2);
}

.swatch {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 600;
}

.swatch--bg {
  background: var(--bg);
  color: var(--ink);
}

.swatch--surface {
  background: var(--surface);
  color: var(--ink);
}

.swatch--surface-muted {
  background: var(--surface-muted);
  color: var(--ink);
}

.swatch--ink {
  background: var(--ink);
  color: var(--bg);
}

.swatch--ink-soft {
  background: var(--ink-soft);
  color: var(--bg);
}

.swatch--ink-faint {
  background: var(--ink-faint);
  color: var(--bg);
}

.swatch--accent {
  background: var(--accent);
  color: var(--on-accent);
}

.swatch--accent-strong {
  background: var(--accent-strong);
  color: var(--bg);
}

.swatch--accent-soft {
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.swatch--success {
  background: var(--success);
  color: var(--bg);
}

.spacing-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.spacing-step {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--ink-soft);
}

.spacing-step__bar {
  display: block;
  height: 0.9rem;
  background: var(--accent-soft);
  border-radius: var(--radius-pill);
}

.type-line {
  color: var(--ink);
}

.type-line + .type-line {
  margin-top: var(--space-2);
}

.icon-row {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  color: var(--ink-soft);
}

.state-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-2xs);
  font-weight: 600;
  color: var(--ink-soft);
}

.state-legend > span {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}