.testnet-section { padding: 24px; background: #0E1C36; }
.testnet-card { max-width: 1184px; margin: 0 auto; padding: 32px; border: 1px solid #31415b; border-radius: 16px; background: #12223d; color: #F4F7FB; font-family: 'Space Grotesk', sans-serif; }
.testnet-card-heading, .testnet-card-bottom { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.testnet-card h2 { margin: 8px 0 0; font-size: 28px; line-height: 1.2; letter-spacing: -.01em; }
.testnet-eyebrow, .testnet-metrics dt { font-size: 12px; letter-spacing: .06em; color: #bbc7d9; }
.testnet-state { border: 1px solid #536781; border-radius: 24px; padding: 6px 12px; color: #E1E6EE; font-size: 13px; white-space: nowrap; }
.testnet-state[data-state="ready"] { border-color: #1BE7FF; color: #1BE7FF; }
.testnet-state[data-state="stale"], .testnet-state[data-state="indexing"], .testnet-state[data-state="error"] { border-color: #F5A623; color: #F5A623; }
.testnet-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 32px 0; }
.testnet-metrics dt { margin-bottom: 8px; }
.testnet-metrics dd { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 28px; overflow-wrap: anywhere; }
.testnet-metrics [data-status-indexed] { font-size: 16px; line-height: 1.6; }
.testnet-metrics .testnet-small-value { font-family: 'Space Grotesk', sans-serif; font-size: 16px; line-height: 1.5; }
.testnet-card-bottom p, .testnet-cache-note { color: #bbc7d9; font-size: 14px; line-height: 1.5; margin: 0; }
.testnet-link { color: #1BE7FF; text-decoration: none; white-space: nowrap; }
.testnet-link:hover { text-decoration: underline; }
.testnet-link:focus-visible { outline: 2px solid #1BE7FF; outline-offset: 6px; border-radius: 2px; }
.testnet-cache-note { margin-top: 12px; font-size: 12px; }
@media (max-width: 800px) { .testnet-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); } .testnet-card-bottom { align-items: flex-start; flex-direction: column; gap: 16px; } }
@media (max-width: 480px) { .testnet-section { padding: 16px; } .testnet-card { padding: 24px 16px; } .testnet-card-heading { gap: 12px; } .testnet-card h2 { font-size: 24px; } .testnet-metrics { gap: 24px 16px; } .testnet-metrics dd { font-size: 24px; } }