:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { margin: 0; background: #10171e; color: #edf3f4; font-family: "Segoe UI", Arial, sans-serif; font-size: 20px; line-height: 1.55; }
main { max-width: 1440px; margin: auto; padding: 58px 64px; }
.eyebrow { color: #83dfb8; letter-spacing: .16em; font-size: 14px; font-weight: 700; }
h1 { font-size: 52px; line-height: 1.15; letter-spacing: -.035em; margin: 20px 0; }
.intro { max-width: 950px; color: #b6c7ce; font-size: 24px; }
.target { border-left: 3px solid #83dfb8; padding: 10px 18px; margin: 30px 0; font-size: 14px; letter-spacing: .04em; }
.target strong { margin: 0 15px; font-size: 18px; }
.target span { color: #b6c7ce; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 24px 0; }
button { background: #20333c; color: #edf3f4; border: 2px solid #4a646e; border-radius: 10px; padding: 15px 22px; font: inherit; cursor: pointer; min-height: 60px; }
#run { background: #83dfb8; color: #101e1b; border-color: #83dfb8; font-weight: 700; }
button:hover { border-color: #edf3f4; }
button:focus, section:focus { outline: 4px solid #ffe3a0; outline-offset: 5px; }
#status { font-size: 16px; color: #b6c7ce; }
.notice { background: #29291f; color: #f2deb1; border: 1px solid #655c3c; border-radius: 10px; padding: 16px 20px; font-size: 17px; }
nav { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 40px; }
section { margin-top: 28px; background: #17232c; border: 1px solid #354650; padding: 26px; border-radius: 16px; scroll-margin-top: 20px; }
h2 { margin: 0; font-size: 28px; }
h2 span { color: #83dfb8; font-size: 19px; margin-right: 14px; }
section > p { color: #b6c7ce; font-size: 17px; margin: 8px 0 22px; }
.row { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; border-top: 1px solid #354650; padding: 14px 0; }
.label { min-width: 32%; overflow-wrap: anywhere; }
.value { color: #c1d0d7; text-align: right; overflow-wrap: anywhere; max-width: 65%; }
.value.good { color: #83dfb8; }
.value.unknown { color: #f2cf8c; }
.explanation p { color: #c1d0d7; font-size: 18px; }
footer { color: #8fa8b4; font-size: 13px; letter-spacing: .12em; padding: 30px 0; }
@media (max-width: 760px) { main { padding: 28px 22px; } h1 { font-size: 36px; } .row { display: block; } .value { text-align: left; max-width: 100%; } .target span { display: block; } }