:root{color-scheme:dark;font-family:system-ui,sans-serif;background:#10171e;color:#e6edf2}*{box-sizing:border-box}body{margin:0}main{max-width:1160px;margin:auto;padding:32px 20px}header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:32px}h1{font-size:clamp(28px,5vw,42px);margin:8px 0}h2{margin-top:0}p{color:#abbcc9;line-height:1.55}.eyebrow{font-size:11px;letter-spacing:.18em;color:#71d8bb}section{margin:28px 0}.login,.pair,.metrics article{background:#19242f;border:1px solid #304453;border-radius:12px;padding:22px}.login{max-width:500px}label{display:grid;gap:9px}input{width:100%;margin-bottom:18px;padding:12px;border:1px solid #65808f;border-radius:6px;background:#10171e;color:#fff}button{background:#8ee2c5;border:0;border-radius:6px;padding:12px 18px;color:#10251e;font-weight:700;cursor:pointer}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.metrics article{padding:16px}.metrics strong{font-size:20px}.metrics p{margin:0 0 8px}.pair{margin:18px 0}.pictures{display:grid;grid-template-columns:1fr 1fr;gap:18px}img{width:100%;height:auto;border-radius:8px}pre{max-height:420px;overflow:auto;background:#080e13;border-radius:10px;padding:16px;font-size:12px;line-height:1.7}#state{padding:14px;border-left:3px solid #71d8bb}a{color:#8ee2c5}@media(max-width:720px){.metrics{grid-template-columns:1fr 1fr}.pictures{grid-template-columns:1fr}header{align-items:flex-start}.metrics strong{font-size:16px}}