:root {
  --ink: #202124 !important;
  --muted: #5f6368 !important;
  --paper: #ffffff !important;
  --line: #dadce0 !important;
  --green: #202124 !important;
  --blue: #202124 !important;
  --teal: #202124 !important;
  --violet: #202124 !important;
  --amber: #6f4e00 !important;
  --orange: #6f4e00 !important;
  --red: #8b1e1e !important;
}

html { background: #ffffff; }

body {
  background: #ffffff !important;
  color: var(--ink) !important;
  font: 15.5px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

main {
  width: min(860px, calc(100% - 36px)) !important;
  padding: 24px 0 72px !important;
}

nav {
  margin-bottom: 48px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--line) !important;
}

nav strong {
  font: 600 14px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

nav div { gap: 16px !important; }

.button {
  color: var(--ink) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

header { max-width: 800px !important; }

.eyebrow,
.tag {
  color: var(--muted) !important;
  font: 500 13px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

h1 {
  max-width: 780px !important;
  margin: 8px 0 14px !important;
  font-size: clamp(30px, 4vw, 40px) !important;
  font-weight: 600 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.025em !important;
}

.lede {
  max-width: 780px !important;
  color: #3c4043 !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}

section { margin: 50px 0 !important; }

h2 {
  margin: 0 0 16px !important;
  padding-top: 14px !important;
  border-top: 1px solid var(--line) !important;
  font-size: 21px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: -0.01em !important;
}

.grid,
.flow,
.metrics {
  margin: 32px 0 50px !important;
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

.card,
.step,
.metric-block {
  background: transparent !important;
  border-color: var(--line) !important;
}

.grid .card,
.grid .card + .card,
.card,
.card + .card,
.step,
.step + .step,
.metric-block,
.metric-block + .metric-block {
  padding-top: 15px !important;
  padding-bottom: 16px !important;
}

.metric {
  margin: 6px 0 !important;
  font-size: 26px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
}

.label,
.small,
.step span,
.section-intro,
.frame-note {
  color: var(--muted) !important;
  font-size: 13px !important;
}

section > .card:not(.decision):not(.failure):not(.gate):not(.boundary) {
  padding-left: 0 !important;
  border-left: 0 !important;
}

.decision,
.failure,
.gate,
.boundary {
  padding: 0 0 0 18px !important;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid #777 !important;
}

.decision h2,
.failure h2,
.gate h2,
.boundary h2 {
  padding-top: 0 !important;
  border-top: 0 !important;
}

table {
  border-top: 1px solid var(--line) !important;
  border-bottom: 1px solid var(--line) !important;
}

th,
td {
  padding: 11px 10px !important;
  border-bottom: 1px solid var(--line) !important;
}

th {
  color: var(--muted) !important;
  font: 600 12px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

.pass,
.ok { color: #245b2a !important; font-weight: 600 !important; }

.fail,
.bad,
.blocked { color: var(--red) !important; font-weight: 600 !important; }

.warn,
.pending { color: var(--amber) !important; font-weight: 600 !important; }

.artifacts,
.links { border-top: 1px solid var(--line) !important; }

.artifact,
.link {
  padding: 12px 0 !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-weight: 600 !important;
}

.artifact span,
.link span {
  color: var(--muted) !important;
  font-size: 13px !important;
}

.system-frame {
  border: 1px solid var(--line) !important;
  box-shadow: none !important;
}

.scope {
  padding-left: 16px !important;
  border-left: 2px solid var(--line) !important;
}

code {
  background: #f5f5f5 !important;
  color: var(--ink) !important;
}

.note {
  color: var(--muted) !important;
  border-top: 1px solid var(--line) !important;
}

@media (max-width: 760px) {
  main { width: min(100% - 28px, 860px) !important; }
  nav { margin-bottom: 36px !important; }
  section { margin: 42px 0 !important; }
  th:nth-child(n),
  td:nth-child(n) { display: table-cell !important; }
}