:root {
  --soft: #f6f8fb;
  --ink: #172033;
}

body {
  color: var(--ink);
  background: #fff;
}

.intro {
  max-width: 720px;
}

.eyebrow {
  font-size: .72rem;
  letter-spacing: .14em;
  font-weight: 700;
  color: #6c757d;
}

.ip-card {
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 1rem;
}

.badge {
  flex-shrink: 0;
}

.ip-value {
  font-size: clamp(1.7rem, 4vw, 2.6rem);
  font-weight: 700;
  letter-spacing: -.03em;
  overflow-wrap: anywhere;
}

.ip-v6 {
  font-size: clamp(1.35rem, 3.2vw, 2.1rem);
}

.range-cidr {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.range-hosts {
  color: #6c757d;
  font-size: .88rem;
  overflow-wrap: anywhere;
}

.formula {
  padding: 1rem;
  border-radius: .75rem;
  background: #111827;
  color: #f8fafc;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  overflow-x: auto;
  white-space: nowrap;
}

code {
  white-space: nowrap;
}