/* inline */
@scope (html[data-site-styles~="72c54f9595e2ba85"]) {
.datagramdepth-shell:where(:scope, *) {
  display: grid;
  gap: 1.25rem;
}

.datagramdepth-hero:where(:scope, *) {
  border: 1px solid #d8e2ea;
  border-radius: 8px;
  padding: 1rem;
  background: #f8fbfd;
}

.datagramdepth-grid:where(:scope, *) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.datagramdepth-card:where(:scope, *) {
  border: 1px solid #dde6ed;
  border-radius: 8px;
  padding: 1rem;
  background: #ffffff;
}

.datagramdepth-card h4:where(:scope, *) {
  margin-top: 0;
}

.datagramdepth-figure:where(:scope, *) {
  margin: 1rem 0;
}

.datagramdepth-figure img:where(:scope, *) {
  display: block;
  width: 100%;
  max-width: 920px;
  height: auto;
  margin: 0 auto;
}

.datagramdepth-figure figcaption:where(:scope, *) {
  margin-top: 0.5rem;
  color: #4b5b66;
  font-size: 0.95rem;
}

.datagramdepth-table:where(:scope, *) {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0;
}

.datagramdepth-table th:where(:scope, *),
.datagramdepth-table td:where(:scope, *) {
  border: 1px solid #d8e2ea;
  padding: 0.65rem;
  vertical-align: top;
}

.datagramdepth-table th:where(:scope, *) {
  background: #eef5f8;
}

.datagramdepth-flow:where(:scope, *) {
  display: grid;
  gap: 0.75rem;
  counter-reset: datagramstep;
}

.datagramdepth-step:where(:scope, *) {
  border-left: 4px solid #246b78;
  padding: 0.75rem 1rem;
  background: #f7fafb;
}

.datagramdepth-step:where(:scope, *)::before {
  counter-increment: datagramstep;
  content: "Step " counter(datagramstep) ": ";
  font-weight: 700;
}
}