:root { --bg:#f1f5f9; --card:#fff; --ink:#0f172a; --muted:#475569; --line:#cbd5e1; --accent:#1d4ed8;
  --ok:#166534; --okbg:#dcfce7; --bad:#991b1b; --badbg:#fee2e2; --skip:#92400e; --skipbg:#fef3c7; }
* { box-sizing: border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
.skip { position:absolute; left:-999px; } .skip:focus { left:8px; top:8px; background:#fff; padding:8px; z-index:9; }
.top, main, .foot { max-width:960px; margin:0 auto; padding:0 16px; }
.top { padding-top:24px; } h1 { font-size:2rem; margin:0 0 4px; } h2 { font-size:1.25rem; margin:0 0 12px; } h3 { margin:16px 0 4px; }
.lead { font-size:1.05rem; margin:0 0 12px; max-width:70ch; }
.note { background:var(--skipbg); color:var(--skip); border:1px solid #f59e0b; border-radius:8px; padding:8px 12px; margin:0 0 16px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; margin-bottom:16px; }
.muted { color:var(--muted); margin-top:0; }
fieldset { border:0; padding:0; margin:0 0 12px; } legend { font-weight:600; margin-bottom:4px; }
.opts { display:flex; flex-wrap:wrap; gap:8px 16px; }
.opts label { display:flex; align-items:center; gap:6px; min-height:44px; }
input[type=radio] { width:20px; height:20px; accent-color:var(--accent); }
.actions { display:flex; flex-wrap:wrap; gap:8px; }
button { font:inherit; min-height:44px; padding:0 16px; border:1px solid var(--accent); background:#fff; color:var(--accent); border-radius:8px; cursor:pointer; }
button.primary { background:var(--accent); color:#fff; } button:disabled { opacity:.5; cursor:not-allowed; }
:focus-visible { outline:3px solid #f59e0b; outline-offset:2px; }
.log { list-style:none; margin:0; padding:0; font:14px/1.5 ui-monospace,Consolas,monospace; }
.log li { display:flex; gap:10px; padding:6px 8px; border-bottom:1px solid #e2e8f0; overflow-wrap:anywhere; }
.log .tag { flex:0 0 3.2em; font-weight:700; } .log .empty { color:var(--muted); font-family:inherit; }
.log .ok .tag { color:var(--ok); } .log .bad .tag { color:var(--bad); } .log .skip .tag { color:var(--skip); }
.verdict { padding:10px 12px; border-radius:8px; margin-bottom:8px; font-weight:600; }
.verdict.pass { background:var(--okbg); color:var(--ok); } .verdict.fail { background:var(--badbg); color:var(--bad); } .verdict.skip { background:var(--skipbg); color:var(--skip); }
.alert { background:var(--badbg); color:var(--bad); border:1px solid var(--bad); padding:12px; border-radius:8px; margin-bottom:16px; }
.tablewrap { overflow-x:auto; } table { border-collapse:collapse; width:100%; }
th, td { text-align:left; padding:8px; border-bottom:1px solid var(--line); }
td.pass { color:var(--ok); font-weight:600; } td.fail { color:var(--bad); font-weight:600; } td.skip { color:var(--skip); font-weight:600; }
pre { background:#0f172a; color:#e2e8f0; padding:12px; border-radius:8px; overflow-x:auto; font-size:13px; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.foot { color:var(--muted); padding-bottom:24px; font-size:.9rem; }
@media (min-width:800px) { .top, main, .foot { padding:0 24px; } .top { padding-top:32px; } }