/* Independent, accessible illustrations for the hardware lessons. */
.hw-diagram { margin: 24px 0; overflow: hidden; border: 1px solid #344560; border-radius: 18px; background: #101c31; color: #e7f1fc; box-shadow: 0 12px 28px rgba(9, 17, 34, .13); }
.hw-diagram figcaption { display: flex; flex-wrap: wrap; gap: 5px 12px; align-items: baseline; padding: 16px 20px 0; color: #eaf3ff; font: 600 15px/1.5 system-ui, "Microsoft YaHei", sans-serif; }
.hw-diagram figcaption small { color: #9aacc5; font-size: 12px; font-weight: 400; }
.hw-diagram .diagram-canvas { overflow-x: auto; padding: 8px 12px 14px; }
.hw-diagram svg { display: block; width: 100%; min-width: 600px; height: auto; font-family: system-ui, "Microsoft YaHei", sans-serif; }
.hw-diagram .hw-wire { fill: none; stroke: #aac9dc; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hw-diagram .hw-part { fill: #1d3350; stroke: #7fdddc; stroke-width: 2.5; stroke-linejoin: round; }
.hw-diagram .hw-node { fill: #7ee8d9; }
.hw-diagram .hw-label { fill: #eef6ff; font-size: 17px; font-weight: 600; }
.hw-diagram .hw-muted { fill: #a9bdd1; font-size: 14px; }
.hw-diagram .hw-accent { fill: #7ee8d9; font-size: 14px; font-weight: 700; }
.hw-diagram .hw-zone { fill: #172a45; stroke: #405877; stroke-width: 1.5; }
.hw-diagram .hw-danger { fill: #ffce80; font-size: 14px; font-weight: 700; }
@media (max-width: 640px) { .hw-diagram figcaption { padding: 14px 14px 0; } .hw-diagram .diagram-canvas { padding: 8px 8px 12px; } }