.dads-h {
  margin: 0;
  color: var(--color-neutral-solid-gray-800);
  font-family: var(--font-family-sans);
}

.dads-h[dads-size="64"],
hgroup[dads-size="64"] .dads-h {
  --_shoulder-size: calc(28 / 16 * 1rem);
  --_shoulder-line-height: 1.5;
  --_shoulder-letter-spacing: 0.01em;
  font-weight: bold;
  font-size: calc(64 / 16 * 1rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.dads-h[dads-size="57"],
hgroup[dads-size="57"] .dads-h {
  --_shoulder-size: calc(24 / 16 * 1rem);
  --_shoulder-line-height: 1.5;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(57 / 16 * 1rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.dads-h[dads-size="45"],
hgroup[dads-size="45"] .dads-h {
  --_shoulder-size: calc(22 / 16 * 1rem);
  --_shoulder-line-height: 1.5;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(45 / 16 * 1rem);
  line-height: 1.4;
  letter-spacing: 0;
}

.dads-h[dads-size="36"],
hgroup[dads-size="36"] .dads-h {
  --_shoulder-size: calc(20 / 16 * 1rem);
  --_shoulder-line-height: 1.5;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(36 / 16 * 1rem);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

.dads-h[dads-size="32"],
hgroup[dads-size="32"] .dads-h {
  --_shoulder-size: calc(18 / 16 * 1rem);
  --_shoulder-line-height: 1.6;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(32 / 16 * 1rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.dads-h[dads-size="28"],
hgroup[dads-size="28"] .dads-h {
  --_shoulder-size: calc(16 / 16 * 1rem);
  --_shoulder-line-height: 1.7;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(28 / 16 * 1rem);
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.dads-h[dads-size="24"],
hgroup[dads-size="24"] .dads-h {
  --_shoulder-size: calc(16 / 16 * 1rem);
  --_shoulder-line-height: 1.7;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(24 / 16 * 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.dads-h[dads-size="20"],
hgroup[dads-size="20"] .dads-h {
  --_shoulder-size: calc(16 / 16 * 1rem);
  --_shoulder-line-height: 1.7;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(20 / 16 * 1rem);
  line-height: 1.5;
  letter-spacing: 0.02em;
}

.dads-h[dads-size="18"],
hgroup[dads-size="18"] .dads-h {
  --_shoulder-size: calc(16 / 16 * 1rem);
  --_shoulder-line-height: 1.7;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(18 / 16 * 1rem);
  line-height: 1.6;
  letter-spacing: 0.02em;
}

.dads-h[dads-size="16"],
hgroup[dads-size="16"] .dads-h {
  --_shoulder-size: calc(16 / 16 * 1rem);
  --_shoulder-line-height: 1.7;
  --_shoulder-letter-spacing: 0.02em;
  font-weight: bold;
  font-size: calc(16 / 16 * 1rem);
  line-height: 1.7;
  letter-spacing: 0.02em;
}

.dads-h[data-chip],
hgroup[data-chip] .dads-h {
  position: relative;
  padding-left: calc(1em / 3 + 0.5em);
}

.dads-h[data-chip]::before,
hgroup[data-chip] .dads-h::before {
  position: absolute;
  top: 0.2em;
  bottom: 0.1em;
  left: 0;
  width: calc(1em / 3);
  background-color: var(--color-primitive-blue-900);
  content: "";
}

@supports (top: 1lh) {
  .dads-h[data-chip]::before,
  hgroup[data-chip] .dads-h::before {
    top: calc(0.5lh - 0.45em);
    bottom: calc(0.5lh - 0.55em);
  }
}

hgroup[data-chip]:has(.dads-h-shoulder) .dads-h::before {
  top: calc((var(--_shoulder-size) * (var(--_shoulder-line-height) - 1)) / 2);
}

@media (forced-colors: active) {
  .dads-h[data-chip]::before,
  hgroup[data-chip] .dads-h::before {
    background-color: CanvasText;
  }
}

.dads-h[data-rule],
hgroup[data-rule] .dads-h {
  border-bottom: solid var(--color-primitive-blue-900);
}

.dads-h[data-rule="8"],
hgroup[data-rule="8"] .dads-h {
  border-bottom-width: calc(8 / 16 * 1rem);
  padding-bottom: calc(32 / 16 * 1rem);
}

.dads-h[data-rule="6"],
hgroup[data-rule="6"] .dads-h {
  border-bottom-width: calc(6 / 16 * 1rem);
  padding-bottom: calc(24 / 16 * 1rem);
}

.dads-h[data-rule="4"],
hgroup[data-rule="4"] .dads-h {
  border-bottom-width: calc(4 / 16 * 1rem);
  padding-bottom: calc(16 / 16 * 1rem);
}

.dads-h[data-rule="2"],
hgroup[data-rule="2"] .dads-h {
  border-bottom-width: calc(2 / 16 * 1rem);
  padding-bottom: calc(8 / 16 * 1rem);
}

.dads-h-shoulder {
  margin: 0;
  color: var(--color-neutral-solid-gray-800);
  font-family: var(--font-family-sans);
  font-weight: bold;
  font-size: var(--_shoulder-size);
  line-height: var(--_shoulder-line-height);
  letter-spacing: var(--_shoulder-letter-spacing);
}
