:root{
  --canopy:#173a2a;--leaf:#2f6b45;--lichen:#e3ebdc;--moss:#c7d6bd;--paper:#ffffff;--ink:#1c2420;--muted:#55635b;
  --pollen:#f2b632;--alarm:#b8321f;--line:#cfd9c8;
  --d-harmless:#2f6b45;--d-nuisance:#5d6f7c;--d-caution:#b57a0b;--d-danger:#b8321f;
  --fs-body:1.0625rem;--measure:70ch;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--canopy:#0f2a1e;--leaf:#7cc295;--lichen:#1c2a23;--moss:#2b3d33;--paper:#121a16;--ink:#e6eee8;--muted:#a9b8ae;--line:#2d3d34;--d-harmless:#6fbf8b;--d-nuisance:#9fb0bc;--d-caution:#e3a93b;--d-danger:#ef7a66}}
:root[data-theme="dark"]{--canopy:#0f2a1e;--leaf:#7cc295;--lichen:#1c2a23;--moss:#2b3d33;--paper:#121a16;--ink:#e6eee8;--muted:#a9b8ae;--line:#2d3d34}
:root{box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
*,*:before,*:after{box-sizing:inherit}
body{margin:0;background:var(--paper);color:var(--ink);font:400 var(--fs-body)/1.65 "Literata",Georgia,"Times New Roman",serif}
h1,h2,h3,.brand,legend,.btn,.chip,.side-h,.answer-h,.cta-h,.fh,.fbrand,.ptag,.grp,.mainnav,.opt,.rcount,.toc p,summary,th{font-family:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif}
h1{font-size:clamp(2rem,1.3rem + 3vw,3.4rem);line-height:1.05;letter-spacing:-.02em;font-weight:800;margin:.2em 0 .25em}
h2{font-size:clamp(1.4rem,1.1rem + 1vw,1.85rem);line-height:1.15;letter-spacing:-.01em;font-weight:700;margin:2.2rem 0 .6rem}
h3{font-size:1.2rem;line-height:1.25;font-weight:700;margin:1.6rem 0 .4rem}
p,li{max-width:var(--measure)}
a{color:var(--leaf);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--pollen);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--pollen);color:#000;padding:.5rem 1rem;z-index:9}
.top{background:var(--canopy);color:#fff;position:sticky;top:env(safe-area-inset-top,0px);z-index:5}
.bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:62px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;font-weight:800;font-size:1.2rem;letter-spacing:-.01em}
.brand-ico{width:30px;height:30px;color:var(--pollen)}
.mainnav{display:flex;gap:.25rem;flex-wrap:wrap}
.mainnav a{color:#e9f1ea;text-decoration:none;padding:.45rem .7rem;border-radius:6px;font-weight:500}
.mainnav a:hover,.mainnav a.on{background:rgba(255,255,255,.12);color:#fff}
.crumbs{font-size:.9rem;color:var(--muted);margin:1.1rem 0 0;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.crumbs a{color:var(--muted)}.crumbs .sep{margin:0 .3rem;opacity:.6}
main{min-height:60vh;padding-bottom:3rem}
/* hero + tool */
.hero{display:grid;gap:1rem;padding:2.2rem 0 1rem}
.hero h1{max-width:16ch}
.hero .lede{font-size:1.15rem;color:var(--muted);max-width:56ch;margin:0}
.tool{display:grid;grid-template-columns:minmax(0,380px) minmax(0,1fr);gap:1.5rem;margin:1rem 0 2rem;align-items:start}
.filters{background:var(--lichen);border-radius:14px;padding:1.1rem 1.1rem 1rem;position:sticky;top:78px}
.fg{border:0;margin:0 0 .9rem;padding:0}
legend{font-weight:700;font-size:1rem;margin-bottom:.4rem}
.opts{display:flex;flex-wrap:wrap;gap:.35rem}
.opt input{position:absolute;opacity:0;pointer-events:none}
.opt span{display:inline-flex;align-items:center;gap:.35rem;padding:.35rem .7rem;border-radius:999px;border:1.5px solid var(--moss);background:var(--paper);font-size:.9rem;cursor:pointer;line-height:1.2}
.opt input:checked+span{background:var(--canopy);border-color:var(--canopy);color:#fff}
.opt input:focus-visible+span{outline:3px solid var(--pollen);outline-offset:2px}
.reset{font:600 .9rem "Bricolage Grotesque",system-ui,sans-serif;background:none;border:0;color:var(--leaf);text-decoration:underline;cursor:pointer;padding:.2rem 0}
.rcount{font-weight:600;margin:.2rem 0 .8rem}
.rlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:.7rem}
.rmore{margin-top:1rem}
.sw{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;border:1px solid rgba(0,0,0,.25);vertical-align:middle}
/* bug card */
.bcard{display:flex;gap:.75rem;align-items:flex-start;padding:.75rem;border:1.5px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);background:var(--paper)}
.bcard:hover{border-color:var(--leaf)}
.bc-ico{flex:none;width:52px;height:52px;border-radius:10px;display:grid;place-items:center;background:var(--lichen);color:var(--canopy)}
.bc-ico .ico{width:38px;height:38px}
.bc-body{display:flex;flex-direction:column;min-width:0}
.bc-body strong{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.02rem;line-height:1.2}
.bc-body em{color:var(--muted);font-size:.85rem}
.bc-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem;margin-top:.35rem;font-size:.82rem;color:var(--muted)}
.bc-meta .sw{width:.7rem;height:.7rem}
.chip{display:inline-block;font-size:.78rem;font-weight:700;padding:.1rem .5rem;border-radius:999px;color:#fff;line-height:1.5}
.d-harmless{background:var(--d-harmless)}.d-nuisance{background:var(--d-nuisance)}.d-caution{background:var(--d-caution)}.d-danger{background:var(--d-danger)}
/* sections on home */
.band{margin:2.5rem 0}
.cats{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:.7rem}
.cat{display:flex;gap:.7rem;align-items:center;padding:.8rem;border-radius:12px;background:var(--lichen);text-decoration:none;color:var(--ink)}
.cat .ico{width:40px;height:40px;color:var(--canopy);flex:none}
.cat strong{font-family:"Bricolage Grotesque",system-ui,sans-serif;display:block;line-height:1.2}
.cat small{color:var(--muted)}
.plist{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 1.5rem}
.plist li{border-top:1px solid var(--line);padding:.7rem 0;max-width:none}
.plist a{text-decoration:none;color:var(--ink);font-weight:600}
.plist a:hover{color:var(--leaf)}
.plist small{display:block;color:var(--muted);font-family:"Bricolage Grotesque",system-ui,sans-serif}
/* articles */
.phead{padding:1.2rem 0 .5rem;max-width:860px}
.ptag,.grp{display:inline-block;font-weight:700;font-size:.9rem;color:var(--leaf)}
.grp a{color:inherit}
.pmeta{color:var(--muted);font-size:.92rem;margin:.2rem 0 1rem}
.lede{font-size:1.17rem;line-height:1.6}
.pgrid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:2.5rem;align-items:start}
.pside{position:sticky;top:80px;display:flex;flex-direction:column;gap:.6rem}
.side-h{font-weight:700;margin:.8rem 0 .1rem}
.rel{padding-left:1.1rem;margin:0;font-size:.95rem}.rel li{margin:.25rem 0}
.toc{border-left:4px solid var(--pollen);padding:.3rem 0 .3rem 1rem;margin:1.2rem 0}
.toc p{font-weight:700;margin:0 0 .3rem}.toc ol{margin:0;padding-left:1.2rem;font-size:.95rem}
.answer{background:var(--lichen);border-radius:14px;padding:1rem 1.25rem;margin:1.2rem 0}
.answer-h{font-weight:800;font-size:1.1rem;margin:0 0 .4rem}
.answer ol,.answer ul{margin:.3rem 0}
.cols{columns:2 220px;column-gap:2rem}
.meter{display:flex;gap:.3rem;margin:.4rem 0 .6rem;flex-wrap:wrap}
.meter .m{flex:1 1 90px;text-align:center;font:600 .82rem "Bricolage Grotesque",system-ui,sans-serif;padding:.35rem .4rem;border-radius:6px;background:var(--paper);color:var(--muted);border:1px solid var(--line)}
.meter .m.on{color:#fff;border-color:transparent}
.meter .m.on.d-harmless{background:var(--d-harmless)}.meter .m.on.d-nuisance{background:var(--d-nuisance)}.meter .m.on.d-caution{background:var(--d-caution)}.meter .m.on.d-danger{background:var(--d-danger)}
.meter .m:not(.on){background:var(--paper)!important}
.entry{margin:1rem 0 1.4rem}.entry .bcard{max-width:520px;margin:.4rem 0 .6rem}
.tscroll{overflow-x:auto;margin:1rem 0}
table{border-collapse:collapse;width:100%;font-size:.95rem}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--line);vertical-align:top}
th{font-weight:600;color:var(--muted)}
.cmp thead th{color:var(--ink);font-weight:700}
.facts th{width:38%}
.faq{border-top:1px solid var(--line);padding:.2rem 0}
.faq summary{cursor:pointer;font-weight:600;padding:.6rem 0;font-size:1.05rem}
.faq[open] summary{color:var(--leaf)}
.cta{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;background:var(--canopy);color:#fff;border-radius:14px;padding:1.2rem 1.4rem;margin:2.5rem 0 0}
.cta p{margin:.1rem 0}.cta-h{font-weight:800;font-size:1.2rem}
.btn{display:inline-block;background:var(--pollen);color:#1b1a12;font-weight:700;text-decoration:none;padding:.65rem 1.1rem;border-radius:10px;text-align:center}
.btn:hover{filter:brightness(1.05);text-decoration:none}
/* bug page specimen card */
.bhead{padding:1.2rem 0 .4rem}
.sci{font-style:italic;color:var(--muted);font-size:1.15rem;margin:0}
.specimen{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:1.5rem;border:1.5px solid var(--line);border-radius:18px;padding:1.2rem;margin:1rem 0 1.5rem}
.spec-art{background:var(--lichen);border-radius:14px;display:grid;place-items:center;min-height:260px;color:var(--canopy);background-image:radial-gradient(var(--moss) 1px,transparent 1px);background-size:16px 16px}
.ico.big{width:70%;height:auto;max-width:220px}
.ruler{margin:0 0 .6rem}
.ruler svg{width:100%;height:auto;display:block}
.ruler .range{fill:var(--pollen)}
.ruler line{stroke:var(--ink);stroke-width:1.2}
.ruler .base{stroke-width:1.6}
.ruler text{font:500 11px "Bricolage Grotesque",system-ui,sans-serif;fill:var(--muted);text-anchor:middle}
.ruler figcaption{font-size:.85rem;color:var(--muted)}
.looks{display:grid;gap:1rem}
.look p{margin:.4rem 0 0;font-size:.95rem}
/* lists */
.az{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.7rem}
.search{width:100%;max-width:420px;font:inherit;padding:.65rem .9rem;border-radius:10px;border:1.5px solid var(--moss);background:var(--paper);color:var(--ink);margin:.5rem 0 1.2rem}
.pager{display:flex;gap:.4rem;flex-wrap:wrap;margin:2rem 0}
.pager a,.pager span{padding:.4rem .8rem;border-radius:8px;border:1.5px solid var(--line);text-decoration:none;font-family:"Bricolage Grotesque",system-ui,sans-serif}
.pager span{background:var(--canopy);color:#fff;border-color:var(--canopy)}
.prose{max-width:760px}
/* footer */
.foot{background:var(--canopy);color:#dfe9e1;padding:2.5rem 0 1.5rem;margin-top:2rem}
.fcols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:1.5rem}
.fcols a{display:block;color:#dfe9e1;text-decoration:none;margin:.25rem 0;font-size:.95rem}
.fcols a:hover{color:#fff;text-decoration:underline}
.fbrand{font-weight:800;font-size:1.2rem;color:#fff;margin:0 0 .4rem}.fh{font-weight:700;color:#fff;margin:0 0 .4rem}
.fine{font-size:.85rem;opacity:.8;margin-top:2rem;max-width:none}
@media (max-width:900px){.tool,.pgrid,.specimen{grid-template-columns:1fr}.filters,.pside{position:static}.fcols{grid-template-columns:1fr 1fr}.spec-art{min-height:200px}}
@media (max-width:520px){.fcols{grid-template-columns:1fr}.mainnav a{padding:.35rem .5rem;font-size:.95rem}}
@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}