:root {
  --hardware-bg: var(--color-paper, #f6f4f2);
  --hardware-surface: color-mix(in srgb, var(--color-paper, #fff) 86%, transparent);
  --hardware-line: var(--color-line, rgba(30, 28, 35, .14));
  --hardware-muted: var(--color-muted, #6b6672);
  --hardware-accent: var(--color-accent, #6750a4);
}
body.hardware-body { background: var(--hardware-bg); }
body.hardware-body .page-main { max-width: 1180px; }
.hardware-page { max-width: 1120px; margin: 0 auto; padding: clamp(32px, 6vw, 82px) 0 90px; }
.hardware-kicker { color: var(--hardware-accent); font-family: var(--font-mono); font-size: .75rem; letter-spacing: .13em; text-transform: uppercase; }
.hardware-title { color: var(--color-text); font-family: var(--font-serif); font-size: clamp(2.3rem, 6vw, 4.6rem); letter-spacing: -.055em; line-height: 1.06; margin: 12px 0 0; }
.hardware-lead { color: var(--hardware-muted); font-family: var(--font-ui); font-size: 1rem; line-height: 1.85; margin: 20px 0 0; max-width: 52rem; }
.hardware-note { border-left: 2px solid var(--hardware-accent); color: var(--hardware-muted); font-family: var(--font-ui); line-height: 1.8; margin: 30px 0 0; padding-left: 16px; }
.hardware-section { margin-top: clamp(44px, 7vw, 76px); }
.hardware-section-heading { align-items: baseline; border-bottom: 1px solid var(--hardware-line); display: flex; gap: 14px; justify-content: space-between; margin-bottom: 18px; padding-bottom: 11px; }
.hardware-section-heading h2 { color: var(--color-text); font-family: var(--font-serif); font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.025em; margin: 0; }
.hardware-section-heading span { color: var(--hardware-muted); font-family: var(--font-mono); font-size: .75rem; }
.hardware-table-wrap { background: var(--hardware-surface); border: 1px solid var(--hardware-line); border-radius: 12px; overflow-x: auto; }
.hardware-table { border-collapse: collapse; font-family: var(--font-ui); min-width: 640px; width: 100%; }
.hardware-table th, .hardware-table td { border-bottom: 1px solid var(--hardware-line); padding: 14px 16px; text-align: left; vertical-align: top; }
.hardware-table th { color: var(--hardware-muted); font-family: var(--font-mono); font-size: .73rem; font-weight: 500; letter-spacing: .04em; }
.hardware-table td { color: var(--color-text); font-size: .92rem; line-height: 1.6; }
.hardware-table th:nth-child(2), .hardware-table td:nth-child(2) { white-space: nowrap; width: 150px; }
.hardware-table tbody tr:last-child td { border-bottom: 0; }
.hardware-table tbody tr:hover { background: color-mix(in srgb, var(--hardware-accent) 6%, transparent); }
.hardware-edit { color: var(--hardware-accent); display: inline-flex; font-family: var(--font-ui); font-size: .88rem; margin-top: 14px; text-decoration: none; }
.hardware-edit:hover { text-decoration: underline; }
.hardware-live-content table { border-collapse: collapse; margin: 18px 0; min-width: 640px; width: 100%; }
.hardware-live-content { overflow-x: auto; }
.hardware-live-content th, .hardware-live-content td { border-bottom: 1px solid var(--hardware-line); padding: 12px 14px; text-align: left; vertical-align: top; }
.hardware-live-content th { color: var(--hardware-muted); font-family: var(--font-mono); font-size: .75rem; }
.hardware-live-content td { color: var(--color-text); line-height: 1.6; }
@media (max-width: 760px) {
  .hardware-page { padding: 28px 0 56px; }
  .hardware-table { min-width: 580px; }
  .hardware-table th, .hardware-table td { padding: 12px 13px; }
}

.hardware-rules { color: var(--color-text); font-family: var(--font-ui); line-height: 1.8; margin: 0; padding-left: 1.4rem; }
.hardware-rules li + li { margin-top: .55rem; }