:root { font-family: Arial, Helvetica, sans-serif; line-height: 1.5; color: #161616; background: #f6f7f8; }
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #173a63; }
.wrap { width: min(1100px, 92vw); margin: 0 auto; }
.site-header { background: #111827; color: white; padding: 1rem 0; }
.site-header .wrap { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.site-header a { color: white; text-decoration: none; }
.brand { font-weight: 700; }
.testing-brand { letter-spacing: .04em; }
.testing-badge { display: inline-block; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; background: #8b1e1e; color: white; padding: .45rem .7rem; border-radius: 4px; }
.testing-hero { border-top: 6px solid #8b1e1e; }
main { padding: 2rem 0 4rem; }
.card { background: white; border: 1px solid #d9dde3; border-radius: 8px; padding: 1.25rem; margin-bottom: 1rem; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }
label { display: block; font-weight: 700; margin-top: 0.75rem; }
input, textarea, select { width: 100%; padding: 0.7rem; margin-top: 0.25rem; border: 1px solid #aab2bd; border-radius: 5px; font: inherit; }
textarea { min-height: 140px; }
button, .button { display: inline-block; border: 0; border-radius: 5px; background: #173a63; color: white; padding: 0.7rem 1rem; text-decoration: none; cursor: pointer; margin-top: 0.75rem; }
button.danger { background: #8b1e1e; }
.alert { padding: 1rem; border-radius: 5px; margin: 1rem 0; background: #eef2f7; }
.alert.error { border-left: 4px solid #8b1e1e; }
.alert.success { border-left: 4px solid #236b3a; }
.alert.key code { display: block; margin-top: 0.75rem; overflow-wrap: anywhere; background: #111827; color: white; padding: 0.75rem; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #111827; color: #f8fafc; padding: 1rem; border-radius: 6px; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; border-bottom: 1px solid #d9dde3; padding: 0.6rem; vertical-align: top; }
.badge { display: inline-block; padding: 0.15rem 0.45rem; border-radius: 999px; background: #e5e7eb; font-size: 0.85rem; }
.site-footer { border-top: 1px solid #d9dde3; padding: 1.5rem 0; color: #4b5563; background: white; }
.hero { padding: 2rem 0; }
.hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 0.5rem; }
.small { color: #4b5563; font-size: 0.9rem; }
.check { font-weight: 400; display: flex; gap: 0.5rem; align-items: flex-start; }
.check input { width: auto; margin-top: 0.35rem; }
.card.warning { border-left: 4px solid #a16207; }
.button.secondary { background: #475569; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }