/* Generated by scripts/lib/help-diagram-css.mjs from handbook/styles/handbook-print.css. Do not edit. */
.help-diagram {
  --hb-font: var(--font-family);
  --hb-text: var(--concept-ink);
  --hb-muted: var(--concept-muted);
  --hb-border: var(--concept-line);
  --hb-border-strong: var(--concept-line-strong);
  --hb-accent: var(--color-primary);
  --hb-accent-tint: color-mix(in srgb, var(--color-primary) 85%, var(--concept-surface));
  --hb-accent-shade: var(--color-primary-text);
  --hb-accent-subtle: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --hb-accent-wash: color-mix(in srgb, var(--color-primary) 8%, transparent);
  --hb-secondary: var(--color-secondary);
  --hb-secondary-subtle: color-mix(in srgb, var(--color-secondary) 10%, transparent);
  --hb-tertiary: var(--color-tertiary);
  --hb-tertiary-subtle: color-mix(in srgb, var(--color-tertiary) 12%, transparent);
  --hb-success: var(--color-success);
  --hb-warning: var(--color-warning);
  --hb-danger: var(--color-danger);
  --hb-danger-subtle: color-mix(in srgb, var(--color-danger) 10%, transparent);
  --hb-accent-text: var(--color-primary-text);
  --hb-secondary-text: color-mix(in srgb, var(--color-secondary) 55%, var(--concept-ink));
  --hb-tertiary-text: color-mix(in srgb, var(--color-tertiary) 55%, var(--concept-ink));
  --hb-surface: var(--concept-surface);
  --hb-surface-elevated: var(--concept-soft);
  --hb-callout-bg: color-mix(in srgb, var(--color-primary) 6%, transparent);
  --hb-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-warning) 100%);
  --app-radius-sm: var(--radius-sm);
  --app-radius-md: var(--radius-md);
  --app-shadow-subtle: none;
  --app-border-width-emphasis: 2px;
  --visual-max: none;
}

.help-diagram .diagram-canvas,
.help-diagram .dg {
  background: linear-gradient(180deg, var(--hb-surface) 0%, var(--hb-surface-elevated) 100%);
  border: 1px solid var(--hb-border);
  border-radius: var(--app-radius-md, 12px);
  box-shadow: var(--app-shadow-subtle);
  box-sizing: border-box;
  font-family: var(--hb-font);
  font-size: 0.9375rem;
  line-height: 1.35;
  overflow: hidden;
  padding: 1.1812rem 1.3289rem 1.0335rem;
  width: 100%;
}

.help-diagram .dg-header {
  margin: 0 0 1.0335rem;
  text-align: center;
}

.help-diagram .dg-title {
  font-size: 1.1459rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0 0 0.2953rem;
}

.help-diagram .dg-subtitle {
  color: var(--hb-muted);
  font-size: 0.8854rem;
  margin: 0;
}

.help-diagram .dg-pipeline {
  align-items: flex-start;
  display: flex;
  gap: 0;
  justify-content: center;
  margin: 0 0 0.8859rem;
  padding: 0 0.2953rem;
}

.help-diagram .dg-step {
  flex: 0 0 28%;
  max-width: 30%;
  text-align: center;
}

.help-diagram .dg-icon-ring {
  align-items: center;
  border-radius: 50%;
  display: flex;
  height: 3.2483rem;
  justify-content: center;
  margin: 0 auto 0.443rem;
  width: 3.2483rem;
}

.help-diagram .dg-icon-ring svg {
  height: 1.6241rem;
  width: 1.6241rem;
}

.help-diagram .dg-icon-ring--neutral {
  background: var(--hb-surface);
  border: 1.5px solid var(--hb-border-strong);
  color: var(--hb-muted);
}

.help-diagram .dg-icon-ring--gold {
  background: var(--hb-gradient);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--hb-accent) 22%, transparent);
  color: var(--color-primary-contrast);
}

.help-diagram .dg-icon-ring--sm {
  height: 2.6577rem;
  width: 2.6577rem;
}

.help-diagram .dg-icon-ring--sm svg {
  height: 1.3289rem;
  width: 1.3289rem;
}

.help-diagram .dg-step-title {
  font-size: 0.8854rem;
  font-weight: 600;
  margin: 0 0 0.1477rem;
}

.help-diagram .dg-step-desc {
  color: var(--hb-muted);
  font-size: 0.7813rem;
  line-height: 1.3;
  margin: 0;
}

.help-diagram .dg-connector {
  align-self: center;
  background: var(--hb-gradient);
  flex: 1 1 1.7718rem;
  height: 2px;
  margin-top: -2.0671rem;
  max-width: 3.5436rem;
  min-width: 1.1812rem;
  opacity: 0.85;
  position: relative;
}

.help-diagram .dg-connector::after {
  border: 3px solid transparent;
  border-left: 5px solid var(--hb-warning);
  content: '';
  position: absolute;
  right: -4px;
  top: -2.5px;
}

.help-diagram .dg-highlight {
  align-items: center;
  background: var(--hb-accent-subtle);
  border: 1px solid color-mix(in srgb, var(--hb-accent) 22%, var(--hb-border));
  border-radius: var(--app-radius-sm, 8px);
  display: flex;
  gap: 0.8859rem;
  margin: 0 0 0.7383rem;
  padding: 0.7383rem 0.8859rem;
}

.help-diagram .dg-highlight-icon {
  align-items: center;
  background: var(--hb-gradient);
  border-radius: 50%;
  color: var(--color-primary-contrast);
  display: flex;
  flex: 0 0 auto;
  height: 2.6577rem;
  justify-content: center;
  width: 2.6577rem;
}

.help-diagram .dg-highlight-icon svg {
  height: 1.3289rem;
  width: 1.3289rem;
}

.help-diagram .dg-highlight-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.1477rem;
  text-align: left;
}

.help-diagram .dg-highlight-text strong {
  color: var(--hb-accent-shade);
  font-size: 0.8854rem;
  font-weight: 600;
  line-height: 1.3;
}

.help-diagram .dg-highlight-text span {
  color: var(--hb-muted);
  font-size: 0.7813rem;
  line-height: 1.35;
}

.help-diagram .dg-metrics {
  display: flex;
  gap: 0.5906rem;
}

.help-diagram .dg-metric {
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: var(--app-radius-sm, 8px);
  flex: 1 1 0;
  padding: 0.5906rem 0.443rem;
  text-align: center;
}

.help-diagram .dg-metric-icon {
  align-items: center;
  color: var(--hb-accent-text);
  display: flex;
  justify-content: center;
  margin: 0 auto 0.2953rem;
}

.help-diagram .dg-metric-icon svg {
  height: 1.1812rem;
  width: 1.1812rem;
}

.help-diagram .dg-metric-title {
  font-size: 0.7813rem;
  font-weight: 600;
  margin: 0 0 0.1477rem;
}

.help-diagram .dg-metric-desc {
  color: var(--hb-muted);
  font-size: 0.7292rem;
  line-height: 1.3;
  margin: 0;
}

.help-diagram .dg-hub {
  align-items: stretch;
  display: flex;
  gap: 0.443rem;
  justify-content: center;
  margin: 0 0 0.8859rem;
}

.help-diagram .dg-device-card {
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: var(--app-radius-sm, 8px);
  box-shadow: var(--app-shadow-subtle);
  flex: 0 0 22%;
  padding: 0.5906rem 0.443rem;
  text-align: center;
}

.help-diagram .dg-device-name {
  font-size: 0.8334rem;
  font-weight: 600;
  margin: 0 0 0.0886rem;
}

.help-diagram .dg-device-hint {
  color: var(--hb-muted);
  font-size: 0.7292rem;
  margin: 0;
}

.help-diagram .dg-hub-core {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}

.help-diagram .dg-hub-center {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.2953rem;
  padding: 0 0.2953rem;
}

.help-diagram .dg-hub-line {
  background: var(--hb-gradient);
  flex: 1 1 2.3624rem;
  height: 2px;
  max-width: 4.1342rem;
  opacity: 0.75;
}

.help-diagram .dg-chip {
  background: var(--hb-gradient);
  border-radius: 10px;
  color: var(--color-primary-contrast);
  font-size: 0.7292rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 0.2953rem 0.7383rem;
  white-space: nowrap;
}

.help-diagram .dg-chip--muted {
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  color: var(--hb-accent-shade);
  font-weight: 500;
}

.help-diagram .dg-route {
  border-radius: var(--app-radius-sm, 8px);
  margin-top: 0.5906rem;
  padding: 0.7383rem 0.8859rem 0.5906rem;
}

.help-diagram .dg-route--secondary {
  background: color-mix(in srgb, var(--hb-secondary) 8%, var(--hb-surface));
  border: 1px solid color-mix(in srgb, var(--hb-secondary) 28%, var(--hb-border));
}

.help-diagram .dg-route--tertiary {
  background: color-mix(in srgb, var(--hb-tertiary) 10%, var(--hb-surface));
  border: 1px solid color-mix(in srgb, var(--hb-tertiary) 28%, var(--hb-border));
}

.help-diagram .dg-route-head {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.443rem;
  margin: 0 0 0.5906rem;
}

.help-diagram .dg-route-badge {
  background: var(--hb-secondary);
  border-radius: 4px;
  color: var(--color-primary-contrast);
  font-size: 0.7292rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.1772rem 0.5906rem;
  text-transform: uppercase;
}

.help-diagram .dg-route-badge--tertiary {
  background: var(--hb-tertiary);
}

.help-diagram .dg-route-label {
  font-size: 0.9375rem;
  font-weight: 700;
}

.help-diagram .dg-route--secondary .dg-route-label {
  color: var(--hb-secondary-text);
}

.help-diagram .dg-route--tertiary .dg-route-label {
  color: var(--hb-tertiary-text);
}

.help-diagram .dg-route-tag {
  color: var(--hb-muted);
  font-size: 0.7292rem;
  margin-left: auto;
}

.help-diagram .dg-route-track {
  align-items: center;
  display: flex;
  gap: 0;
  justify-content: space-between;
}

.help-diagram .dg-route-track--pair {
  justify-content: center;
  gap: 0.5906rem;
}

.help-diagram .dg-route-node {
  align-items: center;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.1477rem;
  min-width: 3.5436rem;
  text-align: center;
}

.help-diagram .dg-route-dot {
  align-items: center;
  background: var(--hb-surface);
  border: 1.5px solid var(--hb-secondary);
  border-radius: 50%;
  color: var(--hb-secondary-text);
  display: flex;
  font-size: 0.7292rem;
  font-weight: 700;
  height: 1.4765rem;
  justify-content: center;
  width: 1.4765rem;
}

.help-diagram .dg-route--tertiary .dg-route-dot {
  border-color: var(--hb-tertiary);
  color: var(--hb-tertiary-text);
}

.help-diagram .dg-route-node-label {
  font-size: 0.7813rem;
  font-weight: 600;
  line-height: 1.2;
}

.help-diagram .dg-route-node-sub {
  color: var(--hb-muted);
  font-size: 0.6771rem;
  line-height: 1.2;
}

.help-diagram .dg-route-file {
  align-items: center;
  background: var(--hb-surface);
  border: 1.5px solid var(--hb-secondary);
  border-radius: 6px;
  color: var(--hb-secondary-text);
  display: flex;
  height: 2.0671rem;
  justify-content: center;
  width: 2.0671rem;
}

.help-diagram .dg-route-file svg {
  height: 1.1812rem;
  width: 1.1812rem;
}

.help-diagram .dg-route--tertiary .dg-route-file {
  border-color: var(--hb-tertiary);
  color: var(--hb-tertiary-text);
}

.help-diagram .dg-route-join {
  background: color-mix(in srgb, var(--hb-secondary) 50%, var(--hb-border));
  flex: 1 1 1.1812rem;
  height: 2px;
  margin-top: -1.1812rem;
  max-width: 2.953rem;
  min-width: 0.5906rem;
  position: relative;
}

.help-diagram .dg-route--tertiary .dg-route-join {
  background: color-mix(in srgb, var(--hb-tertiary) 50%, var(--hb-border));
}

.help-diagram .dg-route-join::after {
  border: 2.5px solid transparent;
  border-left: 4px solid var(--hb-secondary);
  content: '';
  position: absolute;
  right: -3px;
  top: -2px;
}

.help-diagram .dg-route--tertiary .dg-route-join::after {
  border-left-color: var(--hb-tertiary);
}

.help-diagram .dg-route-bridge {
  align-items: center;
  display: flex;
  flex: 1 1 30%;
  flex-direction: column;
  gap: 0.2362rem;
  min-width: 5.906rem;
}

.help-diagram .dg-route-bridge-icon {
  align-items: center;
  background: color-mix(in srgb, var(--hb-tertiary) 14%, var(--hb-surface));
  border: 1px dashed color-mix(in srgb, var(--hb-tertiary) 45%, var(--hb-border));
  border-radius: 8px;
  color: var(--hb-tertiary-text);
  display: flex;
  height: 2.3624rem;
  justify-content: center;
  width: 100%;
}

.help-diagram .dg-route-bridge-icon svg {
  height: 1.3289rem;
  width: 1.3289rem;
}

.help-diagram .dg-route-bridge-label {
  color: var(--hb-tertiary-text);
  font-size: 0.6771rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
}

.help-diagram .dg-route-foot {
  color: var(--hb-muted);
  font-size: 0.7292rem;
  font-style: italic;
  margin: 0.443rem 0 0;
  text-align: center;
}

.help-diagram .dg-layers {
  display: flex;
  flex-direction: column;
  gap: 0.443rem;
  margin: 0 0 0.8859rem;
}

.help-diagram .dg-layer {
  align-items: center;
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-left: 3px solid var(--hb-accent);
  border-radius: var(--app-radius-sm, 8px);
  display: flex;
  gap: 0.7383rem;
  padding: 0.5315rem 0.7383rem;
}

.help-diagram .dg-layer--secondary {
  border-left-color: var(--hb-secondary);
}

.help-diagram .dg-layer--tertiary {
  border-left-color: var(--hb-tertiary);
}

.help-diagram .dg-layer-icon {
  align-items: center;
  background: var(--hb-accent-subtle);
  border-radius: 50%;
  color: var(--hb-accent-shade);
  display: flex;
  flex: 0 0 auto;
  height: 2.3624rem;
  justify-content: center;
  width: 2.3624rem;
}

.help-diagram .dg-layer--secondary .dg-layer-icon {
  background: var(--hb-secondary-subtle);
  color: var(--hb-secondary-text);
}

.help-diagram .dg-layer--tertiary .dg-layer-icon {
  background: var(--hb-tertiary-subtle);
  color: var(--hb-tertiary-text);
}

.help-diagram .dg-layer-icon svg {
  height: 1.1812rem;
  width: 1.1812rem;
}

.help-diagram .dg-layer-body {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.help-diagram .dg-layer-title {
  font-size: 0.8334rem;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 0.1181rem;
}

.help-diagram .dg-layer-desc {
  color: var(--hb-muted);
  font-size: 0.7292rem;
  line-height: 1.3;
  margin: 0;
}

.help-diagram .dg-packet {
  background: var(--hb-surface-elevated);
  border: 1px solid var(--hb-border);
  border-radius: var(--app-radius-sm, 8px);
  margin: 0 0 0.7383rem;
  overflow: hidden;
}

.help-diagram .dg-packet-row {
  align-items: center;
  border-bottom: 1px solid var(--hb-border);
  display: flex;
  gap: 0.5906rem;
  padding: 0.443rem 0.7383rem;
}

.help-diagram .dg-packet-row:last-child {
  border-bottom: 0;
}

.help-diagram .dg-packet-badge {
  background: var(--hb-accent-wash);
  border-radius: 4px;
  color: var(--hb-accent-shade);
  flex: 0 0 auto;
  font-size: 0.6771rem;
  font-weight: 700;
  line-height: 1.2;
  padding: 0.1772rem 0.443rem;
  text-transform: uppercase;
}

.help-diagram .dg-packet-badge--comm {
  background: var(--hb-secondary-subtle);
  color: var(--hb-secondary-text);
}

.help-diagram .dg-packet-badge--data {
  background: var(--hb-tertiary-subtle);
  color: var(--hb-tertiary-text);
}

.help-diagram .dg-packet-text {
  flex: 1 1 auto;
  font-size: 0.7813rem;
  line-height: 1.3;
  margin: 0;
}

.help-diagram .dg-key-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5906rem;
  justify-content: center;
  margin: 0.5906rem 0 0;
}

.help-diagram .dg-key-card {
  background: var(--hb-surface);
  border: 1px solid var(--hb-border);
  border-radius: 8px;
  flex: 1 1 42%;
  max-width: 48%;
  padding: 0.5906rem;
  text-align: center;
}

.help-diagram .dg-key-card strong {
  display: block;
  font-size: 0.7813rem;
  margin-bottom: 0.2362rem;
}

.help-diagram .dg-key-card span {
  color: var(--hb-muted);
  font-size: 0.7084rem;
  line-height: 1.3;
}