@font-face{font-family:"Heliotrope";src:url("/fonts/b2c35d273a.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Heliotrope";src:url("/fonts/71346a4c4b.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Heliotrope";src:url("/fonts/a2efeae192.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Heliotrope";src:url("/fonts/fcc5d87c94.woff2") format("woff2");font-weight:700;font-style:italic;font-display:swap}
@font-face{font-family:"Berkeley Mono";src:url("/fonts/32e525f557.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Berkeley Mono";src:url("/fonts/3bb032834d.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap}

/* ---------- palette ---------- */
:root{
  color-scheme:light dark;
  --bg:oklch(97% 0.012 308);
  --bg-raised:oklch(99.2% 0.005 308);
  --bg-sunk:oklch(94.6% 0.016 308);
  --rule:oklch(89% 0.02 308);
  --rule-strong:oklch(78% 0.03 308);
  --text:oklch(24% 0.03 308);
  --text-muted:oklch(44% 0.03 308);
  --text-faint:oklch(53% 0.025 308);
  --accent:oklch(61.7% 0.12 308);
  --accent-ink:oklch(48% 0.14 308);
  --accent-wash:oklch(92.5% 0.04 308);
  --tip-bg:oklch(23% 0.035 308);
  --tip-fg:oklch(97% 0.012 308);
  --tip-dim:oklch(78% 0.03 308);
  --c-b3:var(--accent);
  --c-simd:oklch(70% 0.075 308);
  --c-purego:oklch(75% 0.04 308);
  --c-luke:oklch(58% 0.13 150);
  --c-zeebo:oklch(54% 0.13 252);
  --c-c:oklch(45% 0.012 308);
  --c-rust:oklch(64% 0.2 38);
  --c-zig:oklch(72% 0.15 70);
  --c-b3sum:var(--accent);
  --c-upstream:var(--c-rust);
  --sans:"Heliotrope",ui-sans-serif,system-ui,sans-serif;
  --mono:"Berkeley Mono",ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:oklch(16% 0.035 308);
    --bg-raised:oklch(19.5% 0.04 308);
    --bg-sunk:oklch(13.5% 0.03 308);
    --rule:oklch(29% 0.04 308);
    --rule-strong:oklch(39% 0.045 308);
    --text:oklch(93% 0.015 308);
    --text-muted:oklch(77% 0.03 308);
    --text-faint:oklch(65% 0.03 308);
    --accent:oklch(80% 0.08 308);
    --accent-ink:oklch(83% 0.09 308);
    --accent-wash:oklch(28% 0.06 308);
    --tip-bg:oklch(91% 0.02 308);
    --tip-fg:oklch(17% 0.035 308);
    --tip-dim:oklch(42% 0.03 308);
    --c-simd:oklch(63% 0.06 308);
    --c-purego:oklch(53% 0.035 308);
    --c-luke:oklch(76% 0.13 150);
    --c-zeebo:oklch(72% 0.11 252);
    --c-c:oklch(80% 0.01 308);
    --c-rust:oklch(70% 0.18 42);
    --c-zig:oklch(81% 0.15 75);
  }
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 18px/1.6 var(--sans);font-kerning:normal;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-wash);color:var(--text)}
a{color:var(--accent-ink);text-decoration-thickness:1px;text-underline-offset:.18em}
a:where(:hover){color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
code,pre,kbd{font-family:var(--mono);font-size:.84em}
h1,h2,h3,h4{margin:0;font-weight:700;line-height:1.15}
p{margin:0}
body > header,main > section,body > footer{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.label{font:400 12.5px/1.4 var(--mono);color:var(--text-faint);letter-spacing:.02em}
[id]{scroll-margin-top:24px}
sec-label,sec-body,readme-body,bench-views,bench-view,fig-chart,fig-plot,doc-item,doc-type,doc-value,doc-text,doc-sub,rel-notes{display:block}

/* ---------- top bar ---------- */
body > header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;padding-top:20px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
header > a{font:400 15px/1 var(--mono);color:var(--text);text-decoration:none}
header > a b{color:var(--accent-ink);font-weight:400}
header nav{display:flex;flex-wrap:wrap;gap:0 4px;margin:0 -10px}
header nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 10px;font-size:16px;color:var(--text-muted);text-decoration:none}
header nav a:hover{color:var(--accent-ink)}

/* ---------- hero / readme ---------- */
#readme{display:flex;flex-wrap:wrap;gap:40px clamp(40px,6vw,88px);align-items:flex-start;padding-top:clamp(36px,6vw,80px);padding-bottom:clamp(40px,6vw,72px)}
#readme > div{flex:999 1 520px;min-width:0}
title-row{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
h1 + a{font:400 13px/1 var(--mono);padding:6px 9px;background:var(--accent-wash);color:var(--accent-ink);text-decoration:none;margin-bottom:.45em}
h1 + a:hover{color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--accent)}
h1{font-size:clamp(64px,11vw,132px);line-height:.8;letter-spacing:-.05em;margin-left:-.03em}
h1 span{color:var(--accent)}
readme-body{margin-top:clamp(24px,3vw,36px)}
readme-body > *{max-width:62ch}
readme-body > * + *{margin-top:16px}
readme-body h2,readme-body h3{margin-top:32px;font-size:22px}
readme-body pre{max-width:none;padding:14px 18px;background:var(--bg-sunk);border:1px solid var(--rule);overflow-x:auto;font-size:14.5px;line-height:1.6}
readme-body ul,readme-body ol{padding-left:1.2em}
readme-body table{border-collapse:collapse;font-size:15.5px;line-height:1.4}
readme-body th,readme-body td{padding:6px 20px 6px 0;border-bottom:1px solid var(--rule)}
readme-body th{font:400 12.5px/1.4 var(--mono);color:var(--text-faint);text-align:left}
readme-body td+td{font:400 14.5px/1.4 var(--mono)}
#readme > aside{flex:1 1 320px;min-width:0;padding-top:18px;border-top:1px solid var(--rule)}
#readme > aside > .label{margin-bottom:12px}
cmd-list{display:flex;flex-direction:column;gap:8px;max-width:520px}
cmd-list > pre{display:flex;gap:12px;align-items:center;margin:0;padding:12px 16px;border:1px solid var(--rule);background:var(--bg-raised);font:400 15px/1.3 var(--mono);overflow-x:auto;white-space:nowrap}
cmd-list > pre::before{content:"$";color:var(--text-faint);user-select:none}
dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 20px;margin:24px 0 0;font-size:15.5px;line-height:1.4}
dt{font:400 12.5px/1.6 var(--mono);color:var(--text-faint)}
dd{margin:0}

/* ---------- sections ---------- */
main > section + section{display:flex;flex-wrap:wrap;gap:12px 56px;padding-top:56px;padding-bottom:56px;border-top:1px solid var(--rule)}
sec-label{flex:0 0 190px}
sec-label h2{font-size:30px;letter-spacing:-.01em}
sec-label h2 a{color:var(--text);text-decoration:none}
sec-label h2 a:hover{color:var(--accent-ink)}
sec-label .label{margin-top:8px}
sec-body{flex:999 1 560px;min-width:0;max-width:780px}
sec-body[prose] p{max-width:66ch}
sec-body[prose] > * + *{margin-top:16px}

/* ---------- godoc ---------- */
#pkg-index ul{list-style:none;margin:0;padding:0;font:400 14.5px/1.5 var(--mono)}
#pkg-index li{padding:3px 0 3px 4ch;text-indent:-4ch}
#pkg-index ul ul{list-style:none;margin:2px 0 6px -4ch;padding-left:2.2ch}
#pkg-index li a{text-decoration:none}
#pkg-index li a:hover{text-decoration:underline}
:is(doc-item,doc-type,doc-value) > pre{margin:14px 0 0;padding:14px 18px;background:var(--bg-sunk);border:1px solid var(--rule);font:400 14.5px/1.6 var(--mono);overflow-x:auto;tab-size:4;-moz-tab-size:4;color:var(--text)}
pre a{text-decoration:none}
pre a:hover{text-decoration:underline}
.cm{color:var(--text-faint);font-style:italic}
.st{color:var(--accent-ink)}
doc-text{margin-top:12px}
doc-text p{max-width:66ch}
doc-text > * + *{margin-top:12px}
doc-item{padding-top:36px}
sec-body > doc-item:first-child{padding-top:4px}
h4{display:flex;align-items:baseline;gap:10px;font:400 17px/1.4 var(--mono)}
h4 > span{color:var(--text-faint)}
h4 > span + a{color:var(--text);text-decoration:none}
h4 > a + a{opacity:0;color:var(--text-faint);text-decoration:none;font-size:15px}
h4:hover > a + a,h4 > a + a:focus-visible{opacity:1}
doc-sub{margin-left:clamp(0px,2.5vw,28px);padding-left:clamp(14px,2vw,22px);border-left:1px solid var(--rule)}
doc-sub > doc-item{padding-top:26px}
doc-sub h4{font-size:15.5px}
doc-type{padding-top:44px}
doc-type:first-child{padding-top:4px}
doc-type > h4{font-size:20px}

/* ---------- benchmarks ---------- */
#benchmarks{display:block}
bench-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px;margin-bottom:24px}
bench-head sec-label{flex:0 0 auto}
bench-head > a,rel-files a{font:400 13px/1 var(--mono);text-decoration:none}
bench-head > a:hover,rel-files a:hover{text-decoration:underline}

/* one bench-view per machine × bench × measure; the url fragment picks which, no fragment →
   the default. inactive views stay laid out (hidden, stacked on the active one) so each
   view's own size is always known: see the target anchor below. */
bench-views{position:relative;--fig-pad:clamp(16px,2.4vw,28px)}
bench-view{position:absolute;top:0;left:0;right:0;visibility:hidden}
bench-view[default],bench-views > bench-view:has(> a:target){position:relative;visibility:visible}
bench-views:has(> bench-view:not([default]) > a:target) > bench-view[default]{position:absolute;visibility:hidden}
/* the fragment target is an invisible box over its view. while that view would be fully
   on screen, a scroll-driven animation slides the box so its top sits at the viewport top
   (less the 24px gap), so following the link leaves the page where it is; otherwise it
   scrolls the view to the top as usual, which is also what browsers without
   scroll-driven animations do. */
bench-view > a[id]{position:absolute;inset:-24px 0 0;visibility:hidden;pointer-events:none;scroll-margin-top:0;
  animation:tgt-stay linear none;animation-timeline:view();animation-range:contain}
@keyframes tgt-stay{from{translate:0 min(0px,calc(100% - 100vh))}to{translate:0 0}}

figure{margin:0;padding:var(--fig-pad);background:var(--bg-raised);border:1px solid var(--rule)}
fig-tabs{display:flex;flex-direction:column;gap:10px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
tab-row{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px}
tab-row > span{flex:0 0 72px;font:400 12.5px/1 var(--mono);color:var(--text-faint)}
tab-row > nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 300px;min-width:0}
tab-row a{position:relative;display:inline-flex;align-items:center;min-height:40px;padding:0 13px;font-size:16px;line-height:1;color:var(--text-muted);text-decoration:none;white-space:nowrap}
tab-row a:hover{background:var(--bg-sunk);color:var(--text)}
tab-row a[aria-current]{background:var(--accent-wash);color:var(--accent-ink);box-shadow:inset 0 0 0 1px color-mix(in oklch,var(--accent) 45%,transparent)}
/* machine tooltips exist once, not per view: an invisible copy of the machine row lies
   exactly over the visible view's, and shows a machine's tip while any tab for it is
   hovered or focused. the copy lines up because every view's machine row is the same. */
tab-row[tips]{position:absolute;top:calc(1px + var(--fig-pad));left:calc(1px + var(--fig-pad));right:calc(1px + var(--fig-pad));visibility:hidden;pointer-events:none}
bench-views:has(a[aria-describedby=tip-zen5-desktop]:hover,a[aria-describedby=tip-zen5-desktop]:focus-visible) #tip-zen5-desktop{opacity:1;visibility:visible}
bench-views:has(a[aria-describedby=tip-zen5-laptop]:hover,a[aria-describedby=tip-zen5-laptop]:focus-visible) #tip-zen5-laptop{opacity:1;visibility:visible}
bench-views:has(a[aria-describedby=tip-panther-lake]:hover,a[aria-describedby=tip-panther-lake]:focus-visible) #tip-panther-lake{opacity:1;visibility:visible}
bench-views:has(a[aria-describedby=tip-granite-rapids]:hover,a[aria-describedby=tip-granite-rapids]:focus-visible) #tip-granite-rapids{opacity:1;visibility:visible}
bench-views:has(a[aria-describedby=tip-apple-m6]:hover,a[aria-describedby=tip-apple-m6]:focus-visible) #tip-apple-m6{opacity:1;visibility:visible}
bench-views:has(a[aria-describedby=tip-graviton5]:hover,a[aria-describedby=tip-graviton5]:focus-visible) #tip-graviton5{opacity:1;visibility:visible}
fig-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px 24px;padding:22px 0 14px}
fig-head > p{font-size:15.5px;color:var(--text-muted)}
fig-head > p > span{font-family:var(--mono);font-size:13px;color:var(--text-faint)}
fig-note{display:flex;align-items:baseline;gap:12px;font:400 13px/1 var(--mono);color:var(--text-faint)}
fig-note > a{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1px solid var(--rule);text-decoration:none;color:var(--text-muted)}
fig-note > a:hover{border-color:var(--accent);color:var(--accent-ink)}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0 -8px 10px}
.li{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 8px;border:0;background:none;font:400 15px/1 var(--sans);color:var(--text);cursor:default}
.li:hover{background:var(--bg-sunk)}
.sw{width:18px;height:0;border-top:3px solid var(--sc)}
.star{position:relative;top:-.3em;margin-left:-4px;color:var(--accent-ink);font:400 14px/1 var(--mono)}
.legend.sq .sw{width:12px;height:12px;border:0;background:var(--sc)}

/* line chart */
fig-chart{position:relative;padding:14px 10px 30px 46px}
fig-plot{position:relative;height:clamp(250px,36vw,420px)}
y-tick{position:absolute;left:0;right:0;height:0;border-top:1px solid var(--rule)}
y-tick span{position:absolute;right:calc(100% + 10px);top:0;transform:translateY(-50%);font:400 12px/1 var(--mono);color:var(--text-faint);white-space:nowrap}
x-tick{position:absolute;top:100%;width:0;height:6px;border-left:1px solid var(--rule-strong)}
x-tick span{position:absolute;top:10px;left:0;transform:translateX(-50%);font:400 12px/1 var(--mono);color:var(--text-faint);white-space:nowrap}
x-tick[minor]{height:4px}
x-tick[minor] span{display:none}
fig-chart > p{margin-top:30px;text-align:right;font:400 12px/1.3 var(--mono);color:var(--text-faint)}
figure svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ln{fill:none;stroke:var(--sc);stroke-width:calc(1.75px + var(--em,0) * 1.75px);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round;transition:stroke-width .12s}
.hit{fill:none;stroke:transparent;stroke-width:16px;vector-effect:non-scaling-stroke;pointer-events:stroke}
.pt{position:absolute;width:22px;height:22px;margin:-11px 0 0 -11px;padding:0;border:0;background:none;cursor:default;z-index:1}
.pt::before{content:"";position:absolute;inset:7px;border-radius:50%;background:var(--sc);box-shadow:0 0 0 2px var(--bg-raised);transition:inset .1s}
.pt:hover,.pt:focus-visible{z-index:6}
.pt:hover::before,.pt:focus-visible::before{inset:4px}

/* vertical grouped bars */
.vgroups{position:absolute;inset:0;display:flex;gap:clamp(14px,4vw,56px);padding:0 clamp(4px,2vw,28px)}
.vg{position:relative;flex:1 1 0;min-width:0}
.vbars{position:absolute;inset:0;display:flex;align-items:flex-end;gap:clamp(2px,.5vw,6px)}
.vb{position:relative;flex:1 1 0;min-width:0;min-height:2px;padding:0;border:0;background:var(--sc);cursor:default}
.vg-l{position:absolute;top:calc(100% + 10px);left:50%;transform:translateX(-50%);font:400 12.5px/1 var(--mono);color:var(--text-muted);white-space:nowrap}
fig-chart[bars] > p{margin-top:36px}

/* horizontal bars */
.barlist,.glist{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.brow{display:grid;grid-template-columns:minmax(120px,170px) minmax(0,1fr);align-items:center;gap:4px 16px}
.brow .legend{margin:0}
.btrack{position:relative;padding-right:calc(var(--lw) * 1ch + 16px);min-height:30px;display:flex;align-items:center;font:400 13px/1 var(--mono)}
.bin{position:relative;flex:1 1 auto;height:22px}
.bar{position:absolute;left:0;top:0;bottom:0;background:var(--sc)}
.bval{position:absolute;top:50%;transform:translateY(-50%);margin-left:10px;color:var(--text);white-space:nowrap}
.bval em{font-style:normal;color:var(--accent-ink);margin-left:6px}
.grp{display:grid;grid-template-columns:minmax(140px,190px) minmax(0,1fr);gap:4px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--rule)}
.grp:first-child{border-top:0}
.ghead b{display:block;font-size:16px;line-height:1.25}
.ghead small{font:400 12px/1.3 var(--mono);color:var(--text-faint)}
.gbars{display:flex;flex-direction:column;gap:3px}
.gbars .btrack{min-height:24px}
.gbars .bin{height:18px}

/* tooltips: hover or focus, no script */
.tip{position:absolute;z-index:20;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);display:flex;flex-direction:column;gap:3px;padding:7px 10px;background:var(--tip-bg);color:var(--tip-fg);font:400 12.5px/1.3 var(--mono);text-align:left;white-space:nowrap;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .1s;box-shadow:0 6px 20px -8px oklch(20% 0.05 308 / .45)}
.tip b{font-weight:400;font-size:14px}
.tip small{font-size:12px;color:var(--tip-dim)}
.tip small.why{white-space:normal;width:max-content;max-width:280px;color:var(--tip-fg)}
.pt:hover > .tip,.pt:focus-visible > .tip,.vb:hover > .tip,.vb:focus-visible > .tip{opacity:1;visibility:visible}
.pt .tip{bottom:calc(100% + 2px)}
.pt.below .tip{bottom:auto;top:calc(100% + 2px)}
.pt.start .tip,.vb.start .tip{left:0;transform:none}
.pt.end .tip,.vb.end .tip{left:auto;right:0;transform:none}
.li .tip{left:0;transform:none;bottom:calc(100% + 4px)}
tab-row .tip{top:calc(100% + 6px);bottom:auto;left:0;transform:none;white-space:normal;width:max-content;max-width:min(360px,80vw);gap:5px}
kv-row{display:grid;grid-template-columns:8ch 1fr;gap:10px;color:var(--tip-dim)}
kv-row > span{color:var(--tip-fg);overflow-wrap:anywhere}
/* a series' legend tooltip (its version) shows whenever that series is emphasized */
.legend .li > .tip{opacity:var(--em,0);visibility:inherit}
.legend .li:hover > .tip,.legend .li:focus-visible > .tip{opacity:1}
figure:has(.pt:hover,.pt:focus-visible,.vb:hover,.vb:focus-visible) .legend .li > .tip{opacity:0}

/* ---------- series: color, emphasis, isolation ---------- */
[data-s]{transition:opacity .14s}
[data-s="b3"]{--sc:var(--c-b3)}
figure:has([data-s="b3"]:hover,[data-s="b3"]:focus-visible) [data-s]:not([data-s="b3"]){opacity:.14}
figure:has([data-s="b3"]:hover,[data-s="b3"]:focus-visible) [data-s="b3"]{--em:1}
g[data-s="b3"] .ln{stroke-width:calc(3.25px + var(--em,0) * 1.25px)}
.pt[data-s="b3"]::before{inset:6px}
.li[data-s="b3"] .sw{border-top-width:4px}
[data-s="simd"]{--sc:var(--c-simd)}
figure:has([data-s="simd"]:hover,[data-s="simd"]:focus-visible) [data-s]:not([data-s="simd"]){opacity:.14}
figure:has([data-s="simd"]:hover,[data-s="simd"]:focus-visible) [data-s="simd"]{--em:1}
[data-s="purego"]{--sc:var(--c-purego)}
figure:has([data-s="purego"]:hover,[data-s="purego"]:focus-visible) [data-s]:not([data-s="purego"]){opacity:.14}
figure:has([data-s="purego"]:hover,[data-s="purego"]:focus-visible) [data-s="purego"]{--em:1}
g[data-s="purego"] .ln{stroke-dasharray:5 5}
.pt[data-s="purego"]::before{background:var(--bg-raised);box-shadow:inset 0 0 0 1.75px var(--sc),0 0 0 2px var(--bg-raised)}
.li[data-s="purego"] .sw{border-top-style:dashed;border-top-width:2px}
.legend.sq .li[data-s="purego"] .sw,.brow[data-s="purego"] .bar,.vb[data-s="purego"]{background:repeating-linear-gradient(135deg,var(--sc) 0 2.5px,transparent 2.5px 6px);box-shadow:inset 0 0 0 1.5px var(--sc)}
[data-s="luke"]{--sc:var(--c-luke)}
figure:has([data-s="luke"]:hover,[data-s="luke"]:focus-visible) [data-s]:not([data-s="luke"]){opacity:.14}
figure:has([data-s="luke"]:hover,[data-s="luke"]:focus-visible) [data-s="luke"]{--em:1}
[data-s="zeebo"]{--sc:var(--c-zeebo)}
figure:has([data-s="zeebo"]:hover,[data-s="zeebo"]:focus-visible) [data-s]:not([data-s="zeebo"]){opacity:.14}
figure:has([data-s="zeebo"]:hover,[data-s="zeebo"]:focus-visible) [data-s="zeebo"]{--em:1}
[data-s="c"]{--sc:var(--c-c)}
figure:has([data-s="c"]:hover,[data-s="c"]:focus-visible) [data-s]:not([data-s="c"]){opacity:.14}
figure:has([data-s="c"]:hover,[data-s="c"]:focus-visible) [data-s="c"]{--em:1}
[data-s="rust"]{--sc:var(--c-rust)}
figure:has([data-s="rust"]:hover,[data-s="rust"]:focus-visible) [data-s]:not([data-s="rust"]){opacity:.14}
figure:has([data-s="rust"]:hover,[data-s="rust"]:focus-visible) [data-s="rust"]{--em:1}
[data-s="zig"]{--sc:var(--c-zig)}
figure:has([data-s="zig"]:hover,[data-s="zig"]:focus-visible) [data-s]:not([data-s="zig"]){opacity:.14}
figure:has([data-s="zig"]:hover,[data-s="zig"]:focus-visible) [data-s="zig"]{--em:1}
[data-s="b3sum"]{--sc:var(--c-b3sum)}
figure:has([data-s="b3sum"]:hover,[data-s="b3sum"]:focus-visible) [data-s]:not([data-s="b3sum"]){opacity:.14}
figure:has([data-s="b3sum"]:hover,[data-s="b3sum"]:focus-visible) [data-s="b3sum"]{--em:1}
[data-s="upstream"]{--sc:var(--c-upstream)}
figure:has([data-s="upstream"]:hover,[data-s="upstream"]:focus-visible) [data-s]:not([data-s="upstream"]){opacity:.14}
figure:has([data-s="upstream"]:hover,[data-s="upstream"]:focus-visible) [data-s="upstream"]{--em:1}

/* ---------- changelog ---------- */
#changelog > sec-body > ol{list-style:none;margin:0;padding:0}
#changelog > sec-body > ol > li{padding:22px 0;border-top:1px solid var(--rule)}
#changelog > sec-body > ol > li:first-child{padding-top:4px;border-top:0}
rel-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}
rel-head > a:first-child{font:400 18px/1.3 var(--mono);color:var(--text);text-decoration:none}
rel-head > a:first-child:hover{color:var(--accent-ink)}
rel-head > a:last-child{margin-left:auto;padding:8px 0;font:400 13px/1 var(--mono);text-decoration:none}
rel-head > a:last-child:hover{text-decoration:underline}
.latest{font:400 12px/1 var(--mono);padding:4px 7px;background:var(--accent-wash);color:var(--accent-ink)}
rel-files{display:flex;gap:16px;margin-top:6px}
rel-notes{margin-top:10px;max-width:66ch}
rel-notes ul{margin:0;padding-left:1.1em}
rel-notes li{padding:3px 0}
rel-notes li::marker{color:var(--accent)}

/* ---------- footer ---------- */
body > footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 32px;padding-top:28px;padding-bottom:48px;border-top:1px solid var(--rule)}
body > footer a{color:var(--text-muted)}

@media (max-width:640px){
  body{font-size:17px}
  main > section + section{padding-top:40px;padding-bottom:40px}
  sec-label,tab-row > span{flex-basis:100%}
  fig-chart{padding-left:38px;padding-right:4px}
  .brow,.grp{grid-template-columns:minmax(0,1fr)}
  :is(doc-item,doc-type,doc-value) > pre{font-size:13px;padding:12px 14px}
  /* narrow: tooltips hang off their row, not their tab or name, so they can't run off-screen */
  tab-row > nav,.legend{position:relative}
  tab-row a,.li{position:static}
  tab-row .tip,.li .tip{left:0;right:auto;transform:none;width:auto;max-width:100%;white-space:normal}
  .li .tip{bottom:100%}
}
/* touch screens can't hover: a tap focuses a point, bar or name instead (chromium never
   shows that as :focus-visible), and tapping anywhere else blurs it */
@media (hover:none){
  .pt:focus{z-index:6}
  .pt:focus::before{inset:4px}
  .pt:focus > .tip,.vb:focus > .tip,.legend .li:focus > .tip{opacity:1;visibility:visible}
  figure:has(.pt:focus,.vb:focus) .legend .li > .tip{opacity:0}
  figure:has([data-s="b3"]:focus) [data-s]:not([data-s="b3"]){opacity:.14}
  figure:has([data-s="b3"]:focus) [data-s="b3"]{--em:1}
  figure:has([data-s="simd"]:focus) [data-s]:not([data-s="simd"]){opacity:.14}
  figure:has([data-s="simd"]:focus) [data-s="simd"]{--em:1}
  figure:has([data-s="purego"]:focus) [data-s]:not([data-s="purego"]){opacity:.14}
  figure:has([data-s="purego"]:focus) [data-s="purego"]{--em:1}
  figure:has([data-s="luke"]:focus) [data-s]:not([data-s="luke"]){opacity:.14}
  figure:has([data-s="luke"]:focus) [data-s="luke"]{--em:1}
  figure:has([data-s="zeebo"]:focus) [data-s]:not([data-s="zeebo"]){opacity:.14}
  figure:has([data-s="zeebo"]:focus) [data-s="zeebo"]{--em:1}
  figure:has([data-s="c"]:focus) [data-s]:not([data-s="c"]){opacity:.14}
  figure:has([data-s="c"]:focus) [data-s="c"]{--em:1}
  figure:has([data-s="rust"]:focus) [data-s]:not([data-s="rust"]){opacity:.14}
  figure:has([data-s="rust"]:focus) [data-s="rust"]{--em:1}
  figure:has([data-s="zig"]:focus) [data-s]:not([data-s="zig"]){opacity:.14}
  figure:has([data-s="zig"]:focus) [data-s="zig"]{--em:1}
  figure:has([data-s="b3sum"]:focus) [data-s]:not([data-s="b3sum"]){opacity:.14}
  figure:has([data-s="b3sum"]:focus) [data-s="b3sum"]{--em:1}
  figure:has([data-s="upstream"]:focus) [data-s]:not([data-s="upstream"]){opacity:.14}
  figure:has([data-s="upstream"]:focus) [data-s="upstream"]{--em:1}
}
/* hidden tooltips still take up layout; never let one widen the page */
html{overflow-x:clip}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}