:root{
  --bg:#0F1317; --panel:#171D24; --panel2:#1F2731; --line:#2A3440;
  --ink:#E9EEF3; --ink-dim:#9AA7B4; --ink-faint:#5F6E7C;
  --accent:#FFB042; --accent-ink:#1A1204;
  --ok:#46D48A; --warn:#FFC94D; --bad:#FF6161;
  --ok-bg:rgba(70,212,138,.13); --warn-bg:rgba(255,201,77,.13); --bad-bg:rgba(255,97,97,.13);
  --radius:10px;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#F3F5F7; --panel:#FFFFFF; --panel2:#EAEEF2; --line:#D5DCE3;
    --ink:#18222C; --ink-dim:#54626F; --ink-faint:#8593A0;
    --accent:#E08900; --accent-ink:#FFFFFF;
    --ok:#0F9D58; --warn:#B07C00; --bad:#D63232;
    --ok-bg:rgba(15,157,88,.10); --warn-bg:rgba(176,124,0,.12); --bad-bg:rgba(214,50,50,.10);
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif;font-size:16px;line-height:1.6;-webkit-tap-highlight-color:transparent}
.wrap{max-width:760px;margin:0 auto;padding:0 16px 48px}
a{color:var(--accent)}
header.site{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 0;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{width:32px;height:32px;flex:none}
.brand b{font-family:"Chakra Petch",sans-serif;font-size:1.25rem;font-weight:700}
.brand b span{color:var(--accent)}
nav.main{display:flex;gap:14px;align-items:center;font-size:.88rem}
nav.main a{color:var(--ink-dim);text-decoration:none;font-weight:500}
nav.main a:hover{color:var(--accent)}
nav.main a.lang-sw{border:1px solid var(--line);border-radius:6px;padding:3px 9px;font-family:"IBM Plex Mono",monospace;font-size:.75rem}
h1{font-family:"Chakra Petch",sans-serif;font-size:1.65rem;line-height:1.2;margin:18px 0 8px}
h2{font-family:"Chakra Petch",sans-serif;font-size:1.2rem;margin:32px 0 8px}
h3{font-size:1rem;margin:20px 0 6px}
p{max-width:70ch}
.lede{color:var(--ink-dim);font-size:1.02rem;margin-top:0}
ul,ol{max-width:68ch}
li{margin:.3em 0}
.tool{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin:20px 0}
.tool h2{margin:0 0 10px;font-size:1.05rem}
.hint{font-size:.88rem;color:var(--ink-dim);max-width:62ch}
.btn{display:inline-block;background:var(--accent);color:var(--accent-ink);border:none;border-radius:8px;font:inherit;font-weight:600;font-size:.9rem;padding:10px 18px;cursor:pointer;text-decoration:none}
.btn.ghost{background:none;border:1px solid var(--line);color:var(--ink)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.mono{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.readout{font-family:"IBM Plex Mono",monospace;font-size:.9rem;background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:10px;white-space:pre-wrap}
.big-num{font-family:"Chakra Petch",sans-serif;font-size:3rem;font-weight:700;text-align:center;color:var(--accent);font-variant-numeric:tabular-nums}
.meter{height:14px;border-radius:7px;background:var(--panel2);overflow:hidden;margin-top:10px}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .08s linear}
video{width:100%;max-height:55vh;border-radius:var(--radius);background:#000;margin-top:12px}
.level-wrap{display:flex;align-items:center;justify-content:center;margin-top:14px}
.level{width:170px;height:170px;border-radius:50%;border:2px solid var(--line);position:relative;background:var(--panel2)}
.level .dot{width:22px;height:22px;border-radius:50%;background:var(--accent);position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.level::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;border:1.5px solid var(--ink-faint);border-radius:50%;transform:translate(-50%,-50%)}
.verdict{display:flex;gap:8px;margin-top:14px}
.verdict button{flex:1;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--ink);font:inherit;font-size:.82rem;font-weight:600;padding:10px 4px;cursor:pointer}
.verdict button.v-ok.sel{background:var(--ok-bg);border-color:var(--ok);color:var(--ok)}
.verdict button.v-warn.sel{background:var(--warn-bg);border-color:var(--warn);color:var(--warn)}
.verdict button.v-bad.sel{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px;margin:16px 0}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:var(--ink);transition:border-color .15s}
.card:hover{border-color:var(--accent)}
.card b{font-family:"Chakra Petch",sans-serif;font-size:.95rem}
.card small{color:var(--ink-dim);font-size:.76rem;line-height:1.4}
.chip{align-self:flex-start;font-family:"IBM Plex Mono",monospace;font-size:.68rem;padding:2px 8px;border-radius:99px;background:var(--panel2);color:var(--ink-faint)}
.chip.ok{background:var(--ok-bg);color:var(--ok)}
.chip.warn{background:var(--warn-bg);color:var(--warn)}
.chip.bad{background:var(--bad-bg);color:var(--bad)}
.testnav{display:flex;justify-content:space-between;align-items:stretch;gap:8px;margin:18px 0}
.testnav a{flex:1;display:flex;flex-direction:column;justify-content:center;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:10px 12px;text-decoration:none;color:var(--ink);font-size:.85rem;min-width:0}
.testnav a:hover{border-color:var(--accent)}
.testnav a.home{flex:0 0 auto;justify-content:center;text-align:center;color:var(--ink-dim)}
.testnav a small{color:var(--ink-faint);font-size:.68rem;text-transform:uppercase;letter-spacing:.05em}
.testnav a b{font-family:"Chakra Petch",sans-serif;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.testnav a.next{text-align:right;align-items:flex-end}
.faq{margin:24px 0}
.faq h3{font-size:.98rem;margin:18px 0 4px}
.faq p{color:var(--ink-dim);font-size:.92rem}
.notice{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--warn);border-radius:var(--radius);padding:12px 16px;margin:18px 0;font-size:.9rem}
.crumbs{font-size:.78rem;color:var(--ink-faint);margin-top:14px}
.crumbs a{color:var(--ink-dim);text-decoration:none}
.ad-slot{min-height:90px;display:flex;align-items:center;justify-content:center;border:1px dashed var(--line);border-radius:var(--radius);color:var(--ink-faint);font-size:.75rem;margin:22px 0}
footer.site{margin-top:44px;padding-top:18px;border-top:1px solid var(--line);font-size:.8rem;color:var(--ink-faint)}
footer.site nav{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
footer.site a{color:var(--ink-dim);text-decoration:none}
table{border-collapse:collapse;width:100%;font-size:.9rem;margin:12px 0}
th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
th{font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-dim)}
.tbl-wrap{overflow-x:auto}
#fs-layer{position:fixed;inset:0;z-index:60;background:var(--bg);display:none}
#fs-layer.on{display:block}
#fs-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
#fs-exit{position:fixed;top:10px;right:10px;z-index:61;background:rgba(0,0,0,.5);color:#fff;border:none;border-radius:8px;font:inherit;font-size:.8rem;padding:8px 12px;cursor:pointer}
#disp-screen{position:fixed;inset:0;z-index:60;display:none}
#disp-screen.on{display:block}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}