.tp-tech-note,
.tp-tech-danger,
.tp-tech-good {
  margin: 22px 0;
  padding: 18px 20px;
  border-radius: 14px;
  line-height: 1.75;
}

.tp-tech-note {
  color: #29476f;
  border: 1px solid #bfd2f5;
  background: #eef5ff;
}

.tp-tech-danger {
  color: #713d2f;
  border: 1px solid #f1c8bc;
  background: #fff3ef;
}

.tp-tech-good {
  color: #245b46;
  border: 1px solid #bfe3d1;
  background: #effaf4;
}

.tp-tech-flow {
  display: grid;
  gap: 12px;
  margin: 22px 0;
  padding: 0 !important;
  list-style: none;
}

.tp-tech-step,
.tp-tech-flow > li {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  gap: 15px;
  align-items: start;
  margin: 0 !important;
  padding: 17px 18px;
  border: 1px solid #dce5f2;
  border-radius: 14px;
  background: #f8faff;
}

.tp-tech-step b,
.tp-tech-flow > li strong {
  color: #1769ff;
}

.tp-tech-step span {
  color: #4d5e79;
  line-height: 1.7;
}

.tp-tech-status {
  display: inline-flex;
  padding: 4px 9px;
  border-radius: 999px;
  font-family: "SFMono-Regular", Consolas, monospace;
  font-size: 12px;
  font-weight: 750;
}

.tp-tech-status.pending {
  color: #675311;
  background: #fff4c7;
}

.tp-tech-status.success {
  color: #176343;
  background: #dff7eb;
}

.tp-tech-status.failed {
  color: #8a3429;
  background: #ffe5df;
}

.tp-tech-status.unknown {
  color: #4f5c72;
  background: #e9edf4;
}

.tp-tech-metric-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 22px 0;
}

.tp-tech-metric-grid > div {
  padding: 18px;
  border: 1px solid #dce5f2;
  border-radius: 15px;
  background: #f8faff;
}

.tp-tech-metric-grid strong {
  display: block;
  margin-bottom: 6px;
  color: #183454;
}

.tp-tech-metric-grid span {
  color: #62718a;
  font-size: 14px;
  line-height: 1.6;
}

.tp-cn-center-section {
  margin-top: 45px;
}

.tp-cn-center-section__head {
  margin-bottom: 20px;
}

.tp-cn-center-section__head small {
  color: #1769ff;
  font-weight: 800;
  letter-spacing: .07em;
}

.tp-cn-center-section__head h2 {
  margin: 8px 0;
  font-size: clamp(27px, 4vw, 40px);
}

.tp-cn-center-section__head p {
  max-width: 820px;
  margin: 0;
  color: #5e6d86;
  line-height: 1.75;
}

@media (max-width: 650px) {
  .tp-tech-metric-grid {
    grid-template-columns: 1fr;
  }

  .tp-tech-step,
  .tp-tech-flow > li {
    grid-template-columns: 1fr;
  }
}