:root{
  --bg:#f4f6f9;--fg:#0f1b2d;--muted:#5a6678;--line:#e1e6ee;--card:#fff;--card-2:#f8fafc;
  --accent:#1f6fd1;--accent-ink:#fff;--hero1:#0a1a31;--hero2:#123c68;--hero-fg:#eef4fb;
  --b1:#2a78d6;--b2:#eb6834;--c-lang:#2a78d6;--c-db:#eb6834;--c-web:#1baf7a;--c-os:#7a8394;
  --crit:#d03b3b;--high:#ec835a;--med:#fab219;--low:#8a96a8;--unk:#c3c8d0;--good:#0ca30c;--good-bg:#e5f5e5;--good-ink:#0a6b0a;
  --grid:#e7ebf1;--shadow:0 1px 2px rgba(15,27,45,.06),0 8px 24px rgba(15,27,45,.06);
  --mono:ui-monospace,SFMono-Regular,"JetBrains Mono",Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0c121b;--fg:#e8edf4;--muted:#9aa6b6;--line:#232d3b;--card:#141c27;--card-2:#18212d;
  --accent:#5aa2f0;--accent-ink:#06121f;--b1:#3987e5;--b2:#d95926;--c-lang:#3987e5;--c-db:#d95926;--c-web:#199e70;--c-os:#8d97a8;
  --low:#7d8899;--unk:#5a6270;--good-bg:#10301a;--good-ink:#7fd67f;--grid:#202a37;--shadow:0 1px 2px rgba(0,0,0,.5);
  color-scheme:dark}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.6 ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
a{color:var(--accent)}
img{max-width:100%;display:block}
code,.mono,.ref{font-family:var(--mono)}
code{font-size:.9em}
.wrap{max-width:1160px;margin:0 auto;padding:0 16px}
.small{font-size:.88rem}.muted{color:var(--muted)}.dim{opacity:.6;font-size:.6em;font-weight:500}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{line-height:1.2;letter-spacing:-.015em}
h1{font-size:clamp(1.8rem,4.2vw,2.9rem);margin:.15em 0 .3em}
h2{font-size:1.4rem;margin:44px 0 14px}
h3{font-size:1.05rem}
.ref{font-weight:600;color:var(--fg);text-decoration:none;word-break:break-word}
a.ref:hover{color:var(--accent)}

/* header */
.top{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--card) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
.brand{display:flex;align-items:center;gap:9px;font-weight:600;font-size:1.18rem;color:var(--fg);text-decoration:none;letter-spacing:-.01em}
.brand b{font-weight:800;color:var(--accent)}
nav{display:flex;gap:4px}
nav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:600;font-size:.95rem}
nav a:hover{color:var(--fg);background:var(--card-2)}
nav a[aria-current]{color:var(--fg);background:var(--card-2)}

/* hero */
.hero{position:relative;color:var(--hero-fg);background:
  radial-gradient(1200px 400px at 85% -10%,rgba(90,162,240,.35),transparent 60%),
  linear-gradient(160deg,var(--hero1),var(--hero2));overflow:hidden;padding:56px 0 48px}
.hero::before{content:"";position:absolute;inset:0;opacity:.12;
  background-image:linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px);
  background-size:32px 32px;mask-image:linear-gradient(180deg,#000,transparent 85%)}
.hero>.wrap{position:relative}
.hero-sm{padding:30px 0 30px}
.hero a{color:#fff}
.hero .crumbs{color:rgba(255,255,255,.75)}
.hero .lede{color:rgba(238,244,251,.88);max-width:720px;font-size:1.1rem;margin:0 0 14px}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:40px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:700;color:#8cc2ff;margin:0}
.crumbs{font-size:.88rem;color:var(--muted);margin:18px 0 0}
.hero .crumbs{margin:0}
.crumbs a{text-decoration:none}
.lede-d{color:var(--muted);max-width:820px;font-size:1.05rem}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tiles-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px}
.tile{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;min-width:130px}
.tile b{font-size:1.55rem;line-height:1.15;color:#fff;word-break:break-word}
.tile span{font-size:.84rem;color:rgba(238,244,251,.75)}
.tiles-row .tile b{font-size:1.3rem}
.search{position:relative;display:flex;gap:8px;max-width:560px;margin-top:6px}
.search input{flex:1;min-width:0;font:inherit;padding:12px 16px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.96);color:#0f1b2d}
.search button,.btn{font:inherit;font-weight:700;padding:11px 18px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;text-decoration:none;display:inline-block}
.hero .search button{background:#5aa2f0;color:#06121f}
.suggest{position:absolute;left:0;right:0;top:100%;margin:6px 0 0;padding:6px;list-style:none;background:var(--card);color:var(--fg);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.3);z-index:30;max-height:340px;overflow:auto}
.suggest a{display:flex;justify-content:space-between;gap:10px;padding:8px 10px;border-radius:8px;text-decoration:none;color:var(--fg)}
.suggest a:hover,.suggest a.on{background:var(--card-2)}
.suggest .muted{font-size:.82rem}

/* badges */
.badges{display:flex;gap:6px;flex-wrap:wrap;margin:0}
.badge{display:inline-block;padding:2px 9px;border-radius:999px;font-size:.8rem;font-weight:700;line-height:1.6;white-space:nowrap;font-family:var(--mono)}
.hero .badge{font-size:.85rem;padding:3px 11px}
.sev-critical{background:var(--crit);color:#fff;fill:var(--crit)}
.sev-high{background:var(--high);color:#1d1004;fill:var(--high)}
.sev-medium{background:var(--med);color:#2a1d00;fill:var(--med)}
.sev-low{background:var(--low);color:#fff;fill:var(--low)}
.sev-unknown{background:var(--unk);color:#1b1b1b;fill:var(--unk)}
.ok-b{background:var(--good-bg);color:var(--good-ink)}
.warn-b{background:#fff1d6;color:#6b4300}
.muted-b{background:var(--card-2);color:var(--muted);border:1px solid var(--line)}
.hero .muted-b{background:rgba(255,255,255,.1);color:#dfe8f3;border-color:rgba(255,255,255,.2)}
.hero .ok-b{background:#1c5a2a;color:#d6f5d6}
.fresh{font-size:.85rem;white-space:nowrap}
.fresh::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;vertical-align:middle;background:var(--low)}
.f-new::before{background:var(--good)}.f-mid::before{background:var(--med)}

/* sections & cards */
.sec-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.sec-head h2{margin-bottom:10px}
.sec-head a{font-weight:600;text-decoration:none}
.card{display:flex;flex-direction:column;gap:2px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;box-shadow:var(--shadow);text-decoration:none;color:var(--fg)}
a.card{transition:transform .15s,border-color .15s}
a.card:hover{transform:translateY(-2px);border-color:var(--accent)}
.card h3{margin:0}
.card p{margin:2px 0}
.cards{display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.cards>*{flex:0 1 calc((100% - 3*14px)/4);min-width:0}/* 4/3/2/1 columns at the old auto-fill widths, short last row centred (PARK-56) */
@media (max-width:1074px){.cards>*{flex-basis:calc((100% - 2*14px)/3)}}
@media (max-width:810px){.cards>*{flex-basis:calc((100% - 14px)/2)}}
@media (max-width:546px){.cards>*{flex-basis:100%}}
.tagcard{gap:6px}
.kv{font-size:.9rem}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 0}
.chip{display:inline-block;font-size:.78rem;padding:2px 9px;border-radius:999px;background:var(--card-2);border:1px solid var(--line);color:var(--muted);font-weight:600}
button.chip{font:inherit;font-size:.85rem;cursor:pointer;padding:5px 12px}
button.chip.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}/* 4 categories: 4/2/1 columns (PARK-56) */
.catcard h3{font-size:1.15rem}
.boards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.board{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:6px 16px 12px;box-shadow:var(--shadow)}
.board h3{margin:12px 0 6px;display:flex;align-items:center;gap:8px}
.board p{margin:0 0 6px}
.ico{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--card-2);border:1px solid var(--line);font-size:.85rem;color:var(--accent)}
.board ol{margin:0;padding:0;list-style:none;counter-reset:b}
.board li{counter-increment:b;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 0;border-top:1px solid var(--line);font-size:.9rem}
.board li:first-child{border-top:0}
.board li::before{content:counter(b);color:var(--muted);font-size:.75rem;width:1.2em;flex:none}
.board li .ref{flex:1;font-size:.86rem}
.board .badge{font-size:.7rem;padding:1px 6px}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono);font-size:.88em}
.complist{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:8px}
.complist a{display:block;padding:10px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:var(--fg);font-size:.92rem}
.complist a:hover{border-color:var(--accent)}
.vs{color:var(--muted);font-weight:400;font-size:.85em;padding:0 4px}
.hero .vs{color:#8cc2ff}

/* charts */
.chartwrap{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:var(--shadow)}
.chart{width:100%;height:auto;display:block;overflow:visible}
.chart.bars{width:auto;max-width:100%}
.hbars{list-style:none;margin:0;padding:4px 2px;display:grid;grid-template-columns:minmax(80px,max-content) 1fr;gap:7px 12px;align-items:center}
.hbars li{display:contents}
.hbars .hl{font-size:.84rem;text-align:right;color:var(--fg);overflow-wrap:anywhere}
.hbars a.hl{color:var(--accent);text-decoration:none}
.ht{display:flex;flex-direction:column;gap:3px;min-width:0}
.hr{display:flex;align-items:center;gap:8px;min-width:0}
.hr i{display:block;height:16px;border-radius:4px;flex:none;cursor:pointer}
.pair .hr i{height:13px}
.hr i.b1{background:var(--b1)}.hr i.b2{background:var(--b2)}
.hr em{font-style:normal;font-family:var(--mono);font-size:.78rem;color:var(--muted);white-space:nowrap}
.hr.stack .segs{display:flex;gap:2px;flex:none;min-width:3px}
.hr.stack .segs i{height:16px;border-radius:2px;flex:none;min-width:2px}
.hr.stack .segs i:first-child{border-radius:4px 2px 2px 4px}.hr.stack .segs i:last-child{border-radius:2px 4px 4px 2px}
.chart .grid{stroke:var(--grid);stroke-width:1}
.chart .ax{fill:var(--muted);font-size:12px}
.chart .lab{fill:var(--fg);font-size:13px;font-family:var(--mono)}
.chart a .lab{fill:var(--accent)}
.chart .val{fill:var(--muted);font-size:12.5px;font-family:var(--mono)}
.chart .val.sm{font-size:11.5px}
.chart .b1{fill:var(--b1)}.chart .b2{fill:var(--b2)}
.chart rect[data-tip],.chart circle[data-tip]{cursor:pointer;transition:opacity .12s}
.chart .row:hover rect{opacity:.85}
.chart .dot{stroke:var(--card);stroke-width:2;opacity:.9}
.chart .dot:hover{opacity:1;stroke:var(--fg)}
.c-languages{fill:var(--c-lang)}.c-databases{fill:var(--c-db)}.c-web-servers{fill:var(--c-web)}.c-base-os{fill:var(--c-os)}
.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:.85rem;color:var(--muted);margin:10px 2px 0}
.key::before{content:"";display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px;background:var(--k)}
.key.b1{--k:var(--b1)}.key.b2{--k:var(--b2)}
.key.sev-critical,.key.sev-high,.key.sev-medium,.key.sev-low,.key.sev-unknown{background:none;color:var(--muted)}
.key.sev-critical{--k:var(--crit)}.key.sev-high{--k:var(--high)}.key.sev-medium{--k:var(--med)}.key.sev-low{--k:var(--low)}.key.sev-unknown{--k:var(--unk)}
.dotkey::before{border-radius:50%}
.dotkey.c-languages{--k:var(--c-lang)}.dotkey.c-databases{--k:var(--c-db)}.dotkey.c-web-servers{--k:var(--c-web)}.dotkey.c-base-os{--k:var(--c-os)}
#tip{position:fixed;z-index:50;pointer-events:none;background:#0f1b2d;color:#fff;font-size:.82rem;padding:6px 10px;border-radius:8px;max-width:320px;box-shadow:0 6px 20px rgba(0,0,0,.25);font-family:var(--mono)}

/* tables */
.tablewrap{overflow-x:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
table.data{border-collapse:collapse;width:100%;font-size:.92rem}
.data th,.data td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}
.data td{white-space:nowrap}
.data thead th{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap;background:var(--card-2)}
.data tbody tr:last-child th,.data tbody tr:last-child td{border-bottom:0}
.data tbody tr:hover{background:var(--card-2)}
.data .r{text-align:right}
.sevcell .badge{font-size:.72rem;padding:1px 7px;margin-right:3px}
.sortable th[data-sort]{cursor:pointer;user-select:none}
.sortable th[data-sort]::after{content:" ↕";opacity:.35}
.sortable th[aria-sort=ascending]::after{content:" ↑";opacity:1}
.sortable th[aria-sort=descending]::after{content:" ↓";opacity:1}
.sz-label{text-transform:none;letter-spacing:0;font-weight:500}
.data.vulns td{white-space:normal}
.vt{display:block;color:var(--muted);font-size:.82rem;max-width:520px}
.cmp td{font-family:var(--mono);font-size:.9rem;white-space:normal}
.cmp td.win{background:color-mix(in srgb,var(--good) 12%,transparent);font-weight:700}
.cmp tbody th{color:var(--muted);font-weight:600;white-space:nowrap}

/* tag page */
.pull{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0}
.pull code{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:8px 12px;max-width:100%;overflow-x:auto;white-space:nowrap}
.pull .dig{color:var(--muted);font-size:.78rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.grid2>div{min-width:0}
.sevgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin-bottom:16px}
.sevtile{border-radius:14px;padding:12px 14px;background:var(--card);border:1px solid var(--line);border-top:5px solid var(--k);display:flex;flex-direction:column}
.sevtile b{font-size:1.7rem;line-height:1.1}
.sevtile small{color:var(--muted)}
.sev-critical-t{--k:var(--crit)}.sev-high-t{--k:var(--high)}.sev-medium-t{--k:var(--med)}.sev-low-t{--k:var(--low)}.sev-unknown-t{--k:var(--unk)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.facts dt{color:var(--muted);font-size:.9rem}.facts dd{margin:0;font-weight:600;min-width:0}
.wrapit{word-break:break-all}
details.more{margin-top:10px}
details.more summary{cursor:pointer;font-weight:600;color:var(--accent)}
.layers{padding-left:22px;font-size:.85rem}
.layers li{margin:6px 0}
.layers .num{display:inline-block;min-width:6.5em;color:var(--muted)}
.layers code{word-break:break-word;white-space:pre-wrap}
.verdict{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--accent);border-radius:14px;padding:4px 20px 12px;margin-top:24px;box-shadow:var(--shadow)}
.verdict h2{margin:14px 0 8px;font-size:1.2rem}
.facts-list{padding-left:20px;margin:0}
.facts-list li{margin:6px 0}

/* interactive bits (shown by JS) */
.toggles{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:0 0 12px}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--card)}
.seg button{font:inherit;font-size:.86rem;font-weight:600;border:0;background:none;color:var(--muted);padding:6px 12px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--accent);color:var(--accent-ink)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
.filters{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:16px 0 12px}
.filters input{font:inherit;padding:9px 14px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--fg);min-width:min(320px,100%)}
.filters .chips{margin:0}
.picker{margin:18px 0}
.pick-row{display:flex;gap:12px;align-items:end;flex-wrap:wrap}
.pick-row label{display:flex;flex-direction:column;gap:4px;font-size:.85rem;font-weight:600;color:var(--muted);flex:1;min-width:200px}
.pick-row select{font:inherit;font-family:var(--mono);padding:9px 10px;border-radius:10px;border:1px solid var(--line);background:var(--card-2);color:var(--fg)}
.swap{font:inherit;font-size:1.1rem;padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:var(--card-2);color:var(--fg);cursor:pointer}
[data-result]{margin-top:14px}
.cbar{display:grid;grid-template-columns:minmax(90px,170px) 1fr;gap:4px 10px;align-items:center;font-size:.85rem;margin:6px 0}
.cbar .track{display:flex;flex-direction:column;gap:3px}
.cbar i{display:block;height:12px;border-radius:4px;min-width:3px}
.cbar i.a{background:var(--b1)}.cbar i.b{background:var(--b2)}
.method{max-width:820px}
.method table{margin:10px 0}
.method td{white-space:normal}
.note{font-size:.86rem;color:var(--muted);margin-top:36px}

/* footer */
.foot{border-top:1px solid var(--line);margin-top:64px;padding:22px 0 36px;font-size:.84rem;color:var(--muted);background:var(--card)}
.footgrid{display:grid;grid-template-columns:1.1fr 1.6fr .9fr;gap:28px}
.small-brand{font-size:1rem;margin:0 0 6px;color:var(--fg)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}
@media (max-width:980px){.boards,.cats{grid-template-columns:1fr 1fr}.hero-grid{grid-template-columns:1fr;gap:24px}}
@media (max-width:760px){
  .grid2,.footgrid,.boards,.cats{grid-template-columns:1fr}
  .hero{padding:32px 0 28px}
  .tiles{grid-template-columns:1fr 1fr}
  .tile{min-width:0;padding:10px 12px}.tile b{font-size:1.25rem}
  .tiles-row{justify-content:center}.tiles-row .tile{flex:0 1 calc((100% - 10px)/2)}/* 2 per row, odd last tile centred (PARK-56) */
  .sevgrid{display:flex;flex-wrap:wrap;justify-content:center}.sevgrid>*{flex:0 1 calc((100% - 2*10px)/3);min-width:0}/* 3 + 2 centred (PARK-56) */
  nav a{padding:6px 9px;font-size:.9rem}
  .data th,.data td{padding:7px 9px}
  .chartwrap{overflow-x:auto;padding:8px}
  .chart.scatter{min-width:560px}
  .hbars{grid-template-columns:1fr;gap:2px}
  .hbars .hl{text-align:left;margin-top:6px}
  .data.vulns thead{display:none}
  .data.vulns tr{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;padding:10px 12px;border-bottom:1px solid var(--line)}
  .data.vulns td{border:0;padding:0}
  .data.vulns td:nth-child(2){grid-column:2}
  .data.vulns td:nth-child(3),.data.vulns td:nth-child(4){grid-column:1/3}
  .data.vulns td:nth-child(4)::before{content:"Fixed in: ";color:var(--muted);font-family:ui-sans-serif,system-ui,sans-serif}
  .chartwrap:has(.scatter)::after{content:"Swipe to see the whole chart →";display:block;font-size:.78rem;color:var(--muted);padding:4px 6px 0}
  .complist{grid-template-columns:1fr}
  .data tbody th[scope=row]{white-space:normal;min-width:130px;max-width:150px;position:sticky;left:0;background:var(--card);z-index:1;box-shadow:1px 0 0 var(--line)}
  .data thead th:first-child{position:sticky;left:0;z-index:2}
  .data tbody th[scope=row] .ref{overflow-wrap:anywhere}
  .cmp tbody th{white-space:normal;font-size:.8rem;width:28%}
  .cmp td{font-size:.8rem;overflow-wrap:anywhere}
  .cmp thead th{font-size:.62rem;overflow-wrap:anywhere;white-space:normal}
  .facts{grid-template-columns:1fr;gap:0 0}.facts dd{margin-bottom:8px}
}
.verdict+.tablewrap{margin-top:18px}
.data tbody th[scope=row]{white-space:nowrap}