:root{color-scheme:light dark;--bg:#f4f7fb;--card:#fff;--text:#17283e;--muted:#526377;--border:#d9e1ec;--primary:#1755c6}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.6 system-ui,sans-serif}header,main,footer{max-width:1200px;margin:auto;padding:24px}header{border-bottom:1px solid var(--border)}a{color:var(--primary)}.brand{text-decoration:none;font-size:20px}.brand strong{margin-left:16px}.eyebrow{font-size:12px;letter-spacing:.12em;color:var(--primary);font-weight:700}h1{font-size:clamp(28px,4vw,40px);line-height:1.2;max-width:750px}h2{font-size:21px;line-height:1.3}p{color:var(--muted)}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin:32px 0}article,.explanation,#results{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:24px;margin-bottom:24px}.step{display:inline-grid;place-items:center;width:36px;height:36px;background:var(--primary);color:white;border-radius:50%;font-weight:700}button,.button{display:inline-block;font:inherit;font-weight:600;padding:12px 16px;min-height:48px;border:1px solid var(--primary);border-radius:8px;color:var(--primary);background:var(--card);cursor:pointer;text-decoration:none;margin:8px 8px 0 0}.primary{background:var(--primary);color:white}button:disabled,.button[aria-disabled=true]{opacity:.55;cursor:not-allowed;pointer-events:none}button:focus-visible,a:focus-visible{outline:3px solid #e09c00;outline-offset:4px}#message:not(:empty){padding:16px;border:1px solid var(--border);border-radius:8px;background:var(--card)}.table-wrap{overflow:auto;max-height:420px;border:1px solid var(--border)}table{border-collapse:collapse;font-size:14px;white-space:nowrap}td,th{padding:12px;border-bottom:1px solid var(--border);text-align:left}th{position:sticky;top:0;background:var(--card)}footer{display:flex;gap:24px;flex-wrap:wrap}#disconnect{display:block}@media(max-width:800px){.steps{grid-template-columns:1fr}header,main,footer{padding:16px}}@media(prefers-color-scheme:dark){:root{--bg:#111923;--card:#1b2635;--text:#edf2fb;--muted:#bbc7d7;--border:#39485b;--primary:#91b6ff}.step,.primary{color:#111923}}
.brand{display:flex;align-items:center;gap:12px}.brand img{border-radius:10px}.brand strong{margin-left:8px}
[hidden]{display:none!important}