:root{color-scheme:dark;
--bg:#0B1620;--bg2:#0F1E2B;--card:#13242F;--card2:#192E3C;--line:#26414f;--text:#EAF3F7;--muted:#A3B8C4;--link:#4FE3A6;
--g1:#3DDC97;--g2:#22D3EE;--g3:#8B5CF6;--grad:linear-gradient(100deg,#3DDC97,#22D3EE 55%,#8B5CF6);--on-grad:#04141c;
--pass:#3DDC97;--fail:#FF6B6B;--crash:#F25CF0;--limited:#FF7A1A;--inc:#FFB938;--none:#6F8796;
--shadow:0 8px 28px rgba(0,0,0,.35);--glow:0 0 0 1px rgba(61,220,151,.25),0 10px 30px rgba(34,211,238,.12);
--hero-a:rgba(61,220,151,.16);--hero-b:rgba(139,92,246,.20);
--gold:#FFC93C;--teal:#2DD4BF;--grey:#9AAAB5;
--mono:ui-monospace,"JetBrains Mono",Menlo,Consolas,monospace;--sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
--a1:#64748B;--a2:#94A3B8}
@media (prefers-color-scheme:light){:root{color-scheme:light;
--bg:#F2F7FA;--bg2:#E8F0F5;--card:#FFFFFF;--card2:#F4F8FB;--line:#cbdbe4;--text:#0B1620;--muted:#425968;--link:#0A6B8F;
--on-grad:#04141c;--pass:#0E8A57;--fail:#C62828;--crash:#A21CAF;--limited:#E8590C;--inc:#B26A00;--none:#64798A;
--shadow:0 6px 22px rgba(20,50,70,.10);--glow:0 0 0 1px rgba(14,138,87,.25),0 10px 28px rgba(34,160,200,.15);
--hero-a:rgba(61,220,151,.28);--hero-b:rgba(139,92,246,.18);--gold:#8A5A00;--teal:#0B7F74;--grey:#4F6472}}
.fam-adreno{--a1:#FF5A5F;--a2:#FF9F43}.fam-mali{--a1:#3B82F6;--a2:#22D3EE}.fam-powervr{--a1:#8B5CF6;--a2:#C084FC}
.fam-xclipse{--a1:#EC4899;--a2:#F9A8D4}.fam-other{--a1:#64748B;--a2:#94A3B8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--text);font:16px/1.55 var(--sans);overflow-wrap:anywhere;min-height:100vh;display:flex;flex-direction:column}
main{flex:1}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--g2);outline-offset:2px;border-radius:6px}
.mono,code{font-family:var(--mono)}code{font-size:.9em}
.wrap{max-width:1120px;margin:0 auto;padding:0 18px}
header.site{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--bg) 85%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header.site::after{content:"";display:block;height:2px;background:var(--grad)}
header.site .wrap{display:flex;align-items:center;gap:8px;min-height:60px}
.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:1.2rem;color:var(--text);text-decoration:none;margin-right:auto;min-height:44px;letter-spacing:-.01em}
.brand svg{width:32px;height:32px;flex:none}.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
nav{display:flex;gap:4px}
nav a{color:var(--text);text-decoration:none;padding:0 14px;display:inline-flex;align-items:center;min-height:44px;border-radius:999px;font-weight:600;transition:background .15s}
nav a:hover{background:var(--card2)}
main{padding:28px 0 56px}
footer.site{border-top:1px solid var(--line);color:var(--muted);padding:24px 0;font-size:.95rem;background:var(--bg2)}
h1{font-size:2rem;line-height:1.2;margin:0 0 8px;letter-spacing:-.02em}
h2{font-size:1.35rem;margin:40px 0 14px;letter-spacing:-.01em;display:flex;align-items:center;gap:10px}
h2::before{content:"";width:5px;height:1.1em;border-radius:3px;background:linear-gradient(var(--a1,var(--g1)),var(--a2,var(--g2)))}
h3{font-size:1.1rem;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 20px;font-size:1.05rem}
.crumbs{font-size:.95rem;color:var(--muted);margin-bottom:12px;display:flex;flex-wrap:wrap;gap:2px 6px}.crumbs a{color:var(--muted);display:inline-flex;align-items:center;min-height:32px}.crumbs a:hover{color:var(--text)}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;min-width:0;box-shadow:var(--shadow);position:relative}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(min(100%,290px),1fr))}
.grid>*{min-width:0}
/* hero */
.hero{position:relative;border-radius:22px;padding:40px 28px 30px;margin-bottom:26px;overflow:hidden;border:1px solid var(--line);
background:radial-gradient(600px 260px at 10% 0%,var(--hero-a),transparent 70%),radial-gradient(600px 300px at 100% 100%,var(--hero-b),transparent 70%),var(--card)}
.hero h1{font-size:clamp(2rem,6vw,3.3rem);line-height:1.08;font-weight:800;margin:0 0 14px;max-width:18ch}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
:root:not(.x) .hero .sub{max-width:60ch;font-size:1.12rem;color:var(--text);opacity:.85}
.search{display:flex;gap:10px;margin:18px 0 0;max-width:680px}
.search input{flex:1;min-width:0;min-height:56px;border-radius:16px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 18px;font:inherit;font-size:1.05rem;box-shadow:var(--shadow)}
.search input:focus{border-color:var(--g2);outline:3px solid color-mix(in srgb,var(--g2) 50%,transparent)}
.btn{min-height:48px;padding:0 22px;border-radius:14px;border:0;background:var(--grad);color:var(--on-grad);font:700 1rem var(--sans);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;box-shadow:0 6px 18px rgba(34,211,238,.25);transition:transform .15s,filter .15s}
.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.search .btn{min-height:56px}
.btn.alt{background:transparent;color:var(--text);border:1px solid var(--line);box-shadow:none}.btn.alt:hover{background:var(--card2);border-color:var(--g2)}
.btn svg{width:18px;height:18px}
/* stats */
.stats{display:grid;gap:14px;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 8px}
.stat{display:flex;align-items:center;gap:14px;overflow:hidden}
.stat::before{content:"";position:absolute;inset:0;background:radial-gradient(180px 80px at 0 0,color-mix(in srgb,var(--c) 22%,transparent),transparent);pointer-events:none}
.stat .ic{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,var(--c) 20%,transparent);color:var(--c)}
.stat .ic svg{width:24px;height:24px}
.stat .n{font:800 1.8rem/1.1 var(--mono);color:var(--text)}.stat .l{color:var(--muted);font-size:.9rem;font-weight:600}
.stat.c1{--c:#3DDC97}.stat.c2{--c:#22D3EE}.stat.c3{--c:#8B5CF6}.stat.c4{--c:#FF9F43}
:root{--cc:1}
@media (prefers-color-scheme:light){.stat.c1{--c:#0E8A57}.stat.c2{--c:#0A7FA0}.stat.c3{--c:#6D3FD8}.stat.c4{--c:#C2610A}}
/* gpu cards */
a.card{display:block;text-decoration:none;color:var(--text);transition:transform .15s,box-shadow .15s,border-color .15s}
a.card:hover{transform:translateY(-3px);border-color:var(--a1,var(--g2));box-shadow:var(--shadow),0 0 0 1px var(--a1,var(--g2)),0 12px 34px color-mix(in srgb,var(--a1,var(--g2)) 28%,transparent)}
.accent-card{padding-top:22px;overflow:hidden}
.accent-card::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.gcard-top{display:flex;gap:12px;align-items:flex-start}
.glyph{flex:none;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,var(--a1),var(--a2));color:#fff;box-shadow:0 4px 14px color-mix(in srgb,var(--a1) 40%,transparent)}
.glyph svg{width:26px;height:26px}
.gcard-top h3{margin:0;font-size:1.1rem;line-height:1.3}
.pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 11px;border-radius:999px;font-size:.88rem;font-weight:600;background:color-mix(in srgb,var(--a1,var(--g2)) 16%,var(--card2));border:1px solid color-mix(in srgb,var(--a1,var(--g2)) 30%,transparent)}
.pill b{font-family:var(--mono)}
.meta{color:var(--muted);font-size:.92rem;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:8px}
.fam-title{display:flex;align-items:center;gap:12px}
.fam-title i{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 0 12px var(--a1)}
.fam-title::before{display:none}
/* chips */
.chip{display:inline-flex;align-items:center;padding:2px 11px;border-radius:999px;font:700 .82rem/1.6 var(--sans);white-space:nowrap;background:color-mix(in srgb,var(--none) 22%,transparent);color:var(--text);border:1px solid color-mix(in srgb,var(--none) 45%,transparent);letter-spacing:.01em}
.v-pass,.v-valid{--k:var(--pass)}.v-fail,.v-invalid{--k:var(--fail)}.v-crash{--k:var(--crash)}.v-limited{--k:var(--limited)}.v-inconclusive,.v-unstable{--k:var(--inc)}
.t-reference{--k:var(--gold)}.t-attested_locked{--k:var(--pass)}.t-attested_modified{--k:var(--teal)}.t-unverified{--k:var(--grey)}.t-unattested{--k:var(--inc)}
.v-pass,.v-valid,.v-fail,.v-invalid,.v-crash,.v-limited,.v-inconclusive,.v-unstable,.t-reference,.t-attested_locked,.t-attested_modified,.t-unverified,.t-unattested{background:color-mix(in srgb,var(--k) 18%,transparent);border-color:color-mix(in srgb,var(--k) 55%,transparent);color:color-mix(in srgb,var(--k) 78%,var(--text))}
.chips{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.status{font-size:.8rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.s-confirmed{color:var(--pass)}.s-leading{color:var(--inc)}.s-disputed{color:var(--fail)}
.counts{font:.88rem var(--mono);color:var(--muted);display:inline-block;white-space:nowrap}
.cs{display:inline-flex;flex-wrap:wrap;gap:0 8px;justify-content:flex-end}
/* A counts line that holds a list ("unverified: fail 1 reports") may break between its parts; one part never breaks. */
.counts:has(.cs){white-space:normal;max-width:100%}
/* stacked bar */
.sbar{display:flex;height:14px;border-radius:999px;overflow:hidden;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);margin:12px 0 8px}
.sbar.big{height:22px}
.sbar i{display:block;min-width:3px}
.sg-pass{background:var(--pass)}.sg-fail{background:var(--fail)}.sg-crash{background:var(--crash)}.sg-inconclusive{background:var(--inc)}.sg-unsupported{background:color-mix(in srgb,var(--none) 70%,transparent)}.sg-untested{background:color-mix(in srgb,var(--none) 35%,transparent)}
.legend{font-size:.92rem;color:var(--muted)}
.legend b{color:var(--text)}
.vp{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:999px;font-weight:700;font-size:.92rem;background:color-mix(in srgb,var(--k) 16%,transparent);border:1px solid color-mix(in srgb,var(--k) 50%,transparent)}
.vp::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--k)}
.vp b{font-family:var(--mono)}
.vp.pass{--k:var(--pass)}.vp.fail{--k:var(--fail)}.vp.crash{--k:var(--crash)}.vp.inconclusive{--k:var(--inc)}.vp.unsupported,.vp.untested{--k:var(--none)}
/* summary panel */
.panel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 28px;align-items:center;padding:22px;border-radius:20px;background:radial-gradient(500px 200px at 0 0,color-mix(in srgb,var(--a1) 20%,transparent),transparent),var(--card);border:1px solid var(--line);box-shadow:var(--shadow);position:relative;overflow:hidden;margin:18px 0 6px}
.panel::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:linear-gradient(var(--a1),var(--a2))}
.bignum{font:800 3.4rem/1 var(--mono);color:var(--pass)}.bignum small{font-size:1.4rem;color:var(--muted);font-weight:600}
.bigl{color:var(--muted);font-weight:600;font-size:.95rem}
.panel .chips{margin-top:8px}
/* page head */
.pagehead{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.pagehead .glyph{width:56px;height:56px;border-radius:16px}.pagehead .glyph svg{width:32px;height:32px}
.pagehead h1{margin:0}
.head-actions{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
/* problems */
.prob{border-left:6px solid var(--fail);margin-bottom:12px;background:linear-gradient(90deg,color-mix(in srgb,var(--fail) 12%,var(--card)),var(--card) 60%)}
.prob.leading{border-left-color:var(--inc);border-left-style:dashed;background:linear-gradient(90deg,color-mix(in srgb,var(--inc) 10%,var(--card)),var(--card) 60%)}
.prob.disputed{border-left-width:9px;border-left-style:double}
.prob .name{font:700 1.05rem var(--mono);margin:8px 0 2px}
.prob .meta{margin-top:4px}
.empty{color:var(--muted);padding:22px;border:1px dashed var(--line);border-radius:16px;background:var(--card)}
/* tables */
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.95rem}
th{color:var(--muted);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;background:var(--card2);white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:color-mix(in srgb,var(--card2) 70%,transparent)}
td.num,th.num{text-align:right;font-family:var(--mono)}
td.first{font-size:.95rem}
.tablewrap{background:var(--card);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
#ft tbody tr{box-shadow:inset 5px 0 0 var(--k,var(--none))}
#ft tr[data-v=pass]{--k:var(--pass)}#ft tr[data-v=fail]{--k:var(--fail)}#ft tr[data-v=crash]{--k:var(--crash)}#ft tr[data-v=inconclusive]{--k:var(--inc)}
#ft td.first{padding-left:20px;font-size:.98rem}
.filter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.filter button{min-height:44px;padding:0 18px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--text);font:600 .95rem var(--sans);cursor:pointer;transition:background .15s}
.filter button:hover{background:var(--card2)}
.filter button[aria-pressed=true]{background:var(--grad);color:var(--on-grad);border-color:transparent}
/* scene bars */
.scene{display:flex;align-items:center;gap:10px;min-width:0}
.scene .track{flex:1;min-width:60px;height:14px;border-radius:999px;background:var(--card2);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}
.scene .track i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--a1,var(--g1)),var(--a2,var(--g2)))}
.scene .val{font:700 .95rem var(--mono);min-width:7ch;text-align:right}
.scenes{display:grid;gap:12px;padding:18px;list-style:none;margin:0}
.scenes li{display:grid;grid-template-columns:minmax(0,13rem) minmax(0,1fr);gap:6px 16px;align-items:center}
.scenes .sn{font:600 .95rem var(--mono)}
.scenes .sd{grid-column:2;color:var(--muted);font-size:.85rem}
.scenes+.tablewrap,.scenebox{margin-bottom:0}
/* misc */
details{margin:10px 0}summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font-weight:600}
details.card{padding:6px 18px 14px}
details[open]>summary{margin-bottom:6px}
.feat{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:4px 12px 4px 0}
pre{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;overflow:auto;max-width:100%;font-size:.85rem}
dl.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:0;margin:0}
dl.kv dt{color:var(--muted);font-weight:600;padding:10px 20px 10px 0;border-bottom:1px solid var(--line)}
dl.kv dd{margin:0;font-family:var(--mono);min-width:0;padding:10px 0;border-bottom:1px solid var(--line)}
dl.kv dt:last-of-type,dl.kv dd:last-of-type{border-bottom:0}
.tierbadge{display:inline-flex;align-items:center;gap:10px;padding:8px 18px;border-radius:14px;font-size:1.15rem;font-weight:800;background:color-mix(in srgb,var(--k) 18%,transparent);border:2px solid var(--k);color:color-mix(in srgb,var(--k) 75%,var(--text));box-shadow:0 0 22px color-mix(in srgb,var(--k) 25%,transparent)}
.tierbadge svg{width:22px;height:22px}
.tierbadge.t-reference{--k:var(--gold)}.tierbadge.t-attested_locked{--k:var(--pass)}.tierbadge.t-attested_modified{--k:var(--teal)}.tierbadge.t-unverified{--k:var(--grey)}.tierbadge.t-unattested{--k:var(--inc)}
.prose{max-width:72ch}.prose h1{font-size:2.2rem}
.prose .card p{margin:0 0 14px}.prose .card p:last-child{margin:0}
.prose .card .chip{margin-right:8px}
.prose li{margin-bottom:8px}
@media (max-width:860px){.stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
 .wrap{padding:0 14px}
 h1{font-size:1.65rem}
 main{padding-top:18px}
 .hero{padding:28px 18px 22px;border-radius:18px}
 .search{flex-direction:column}.search .btn{width:100%}
 .stat{gap:10px;padding:14px}.stat .ic{width:38px;height:38px}.stat .n{font-size:1.4rem}
 .panel{grid-template-columns:minmax(0,1fr);padding:18px 18px 18px 22px}
 .bignum{font-size:2.8rem}
 .pagehead .glyph{width:46px;height:46px}
 table.stack thead{position:absolute;left:-9999px}
 table.stack,table.stack tbody,table.stack tr,table.stack td{display:block;width:100%}
 table.stack tr{padding:12px 16px;border-bottom:1px solid var(--line)}
 table.stack tbody tr:last-child{border-bottom:0}
 table.stack td{border:0;padding:4px 0;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px 12px;text-align:right;font-size:1rem}
 table.stack td::before{content:attr(data-label);color:var(--muted);font:600 .85rem var(--sans);text-align:left;flex:none}
 table.stack td.first{display:block;text-align:left;font-weight:700}table.stack td.first::before{display:none}
 table.stack td .counts{margin-left:0}
 #ft td.first{padding-left:0}
 dl.kv{grid-template-columns:minmax(0,1fr)}dl.kv dt{border:0;padding:10px 0 0}dl.kv dd{padding:2px 0 10px}
 .scenes li{grid-template-columns:minmax(0,1fr)}.scenes .sd{grid-column:1}
 .scene .val{min-width:6ch}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}a.card:hover,.btn:hover{transform:none}}
td.barcell{min-width:220px}
@media (max-width:640px){table.stack td.barcell{min-width:0}table.stack td.barcell .scene{flex:1 1 100%}table.stack td.barcell::before{flex:1 1 100%}}

/* Vulkan details: filter boxes and multi-column lists inside collapsible cards */
input.filter{width:100%;min-height:44px;margin:4px 0 12px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--text);padding:0 14px;font:inherit}
input.filter:focus{border-color:var(--g2);outline:3px solid color-mix(in srgb,var(--g2) 50%,transparent)}
ul.cols{list-style:none;margin:0;padding:0;columns:300px;column-gap:24px}
ul.cols li{break-inside:avoid;padding:4px 0;overflow-wrap:anywhere}
table.plain{width:100%;border-collapse:collapse}table.plain td{padding:7px 4px;border-bottom:1px solid var(--line);overflow-wrap:anywhere}
table.plain td.num{text-align:right}
[hidden]{display:none!important}
/* Stock vs custom driver */
.versus{--vs-gap:12px;--vs-mid:1.75rem;--vs-block:28px;padding:20px;margin:12px 0 18px;border-width:2px;border-color:color-mix(in srgb,var(--a1,var(--g2)) 55%,var(--line))}
.vs-head{display:grid;grid-template-columns:minmax(0,1fr) var(--vs-mid) minmax(0,1fr);column-gap:var(--vs-gap);align-items:start}
.vs-side{display:flex;flex-direction:column;gap:4px;min-width:0}.vs-side b{font-size:1.15rem;overflow-wrap:anywhere}.vs-side .meta{overflow-wrap:anywhere}
.vs-mid{font-weight:800;font-size:1.1rem;opacity:.7;align-self:center;justify-self:center;text-align:center}
.vs-tag{align-self:flex-start;font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 9px;border-radius:999px;border:1px solid var(--line);min-width:4.5rem;text-align:center}
.vs-tag.custom{background:linear-gradient(90deg,var(--g1),var(--g2));color:#fff;border-color:transparent}
.vs-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr)) var(--vs-mid) repeat(2,minmax(0,1fr));grid-template-rows:auto auto 1fr;column-gap:var(--vs-gap);row-gap:0;margin:var(--vs-block) 0 0}
.vs-tile{grid-row:1/span 3;display:grid;grid-template-rows:subgrid;row-gap:3px;align-content:start;padding:12px 14px;border-radius:14px;background:var(--card2);border:1px solid var(--line);min-width:0}
.vs-tile:nth-child(1){grid-column:1}.vs-tile:nth-child(2){grid-column:2}.vs-tile:nth-child(3){grid-column:4}.vs-tile:nth-child(4){grid-column:5}
.vs-stmts .delta{display:block}.vs-notes>span{display:block}.vs-notes>span+span{margin-top:4px}
@media (max-width:820px){.vs-tiles{grid-template-columns:minmax(0,1fr) var(--vs-mid) minmax(0,1fr);grid-template-rows:auto auto 1fr auto auto 1fr}.vs-tile:nth-child(1),.vs-tile:nth-child(3){grid-column:1}.vs-tile:nth-child(2),.vs-tile:nth-child(4){grid-column:3}.vs-tile:nth-child(1),.vs-tile:nth-child(2){grid-row:1/span 3}.vs-tile:nth-child(3),.vs-tile:nth-child(4){grid-row:4/span 3;margin-top:var(--vs-gap)}}
@media (max-width:520px){.vs-tiles{display:flex;flex-direction:column;gap:10px}.vs-tile:nth-child(n){margin-top:0}}
.vs-tile .l{font-size:.8rem;opacity:.75}.vs-tile .n{font-family:var(--mono);font-weight:700;font-size:1.05rem;overflow-wrap:anywhere}.vs-tile .n i,td i{font-style:normal;opacity:.6;font-weight:400}.vs-tile .s{font-size:.82rem;min-width:0;overflow-wrap:anywhere}.vs-tile .s .delta{white-space:normal}.vs-tile .l{overflow-wrap:anywhere}
.delta{font-weight:700;white-space:nowrap}.delta.up{color:var(--pass)}.delta.down{color:var(--fail)}.delta.same{opacity:.7}
h3.vs-gpu{margin:18px 0 0}h3.vs-gpu .meta{font-weight:400}
@media (max-width:520px){.vs-head{grid-template-columns:1fr;row-gap:var(--vs-gap)}.vs-mid{justify-self:start}}
.versus>.btn{margin-top:var(--vs-block)}
.vs-scenes{list-style:none;margin:var(--vs-block) 0 6px;padding:0;display:grid;gap:6px}.vs-tiles+p.warn,.vs-games+p.warn{margin-top:var(--vs-block)}
.vs-scenes li{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(60px,1fr) auto;gap:10px;align-items:center;font-size:.9rem}
.vs-scenes li .mono{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vs-bar{position:relative;height:10px;border-radius:999px;background:var(--card2);border:1px solid var(--line)}
.vs-bar::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--text);opacity:.45}
.vs-bar i{position:absolute;top:0;bottom:0;border-radius:999px}.vs-bar i.up{background:var(--pass)}.vs-bar i.down{background:var(--fail)}.vs-bar i.same{background:var(--line)}
p.warn{margin:10px 0;padding:10px 14px;border-radius:12px;border:1px solid color-mix(in srgb,var(--fail) 50%,var(--line));background:color-mix(in srgb,var(--fail) 9%,var(--card2));font-size:.92rem}
.cap-known{border-left:3px solid var(--warn,#d9a441);padding-left:10px}.cap{margin:0 0 14px;padding-top:12px;border-top:1px solid var(--line,rgba(127,127,127,.2))}.cap-legend+.cap,.cap-advice+.cap{border-top:0;padding-top:0}.cap details{margin-top:2px}.cap .meta{margin-top:4px}.cap-line{color:var(--muted);font-size:.92rem;margin-top:5px;max-width:78ch}.cap-intro{color:var(--muted);font-size:.95rem;margin:0 0 14px;max-width:78ch}.cap-legend{display:grid;grid-template-columns:max-content 1fr;gap:8px 14px;align-items:center;margin:0 0 16px;padding:12px 14px;border:1px solid var(--line,rgba(127,127,127,.25));border-radius:12px;font-size:.92rem;color:var(--muted)}.cap-legend .chip{justify-self:start}.cap-advice{margin:0 0 18px;padding:11px 14px;border-radius:10px;border-left:4px solid var(--inc);background:color-mix(in srgb,var(--inc) 10%,transparent);font-size:.95rem;max-width:78ch}.cap-advice strong{display:block;font-size:.8rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}.cap-more{color:var(--muted);font-size:.88rem;font-weight:600;cursor:pointer;margin-top:6px}.cap-dev{color:var(--muted);font-size:.88rem;margin-top:6px;overflow-wrap:anywhere}.cap-ref{color:var(--muted);font-size:.85rem;margin:6px 0 0;max-width:78ch}.vs-games{display:grid;grid-template-columns:minmax(0,1fr) var(--vs-mid) minmax(0,1fr);gap:6px var(--vs-gap);margin:var(--vs-block) 0 0}.vs-games-side+.vs-games-side{grid-column:3}.vs-games .l{grid-column:1/-1;color:var(--muted);font-size:.85rem}.vs-games-side{display:flex;flex-wrap:wrap;gap:6px;align-items:center}@media(max-width:640px){.vs-games{grid-template-columns:1fr}.vs-games-side+.vs-games-side{grid-column:1}.cap-legend{grid-template-columns:1fr;gap:4px 0}.cap-legend span:not(.chip){margin-bottom:8px}}
.supporter{display:inline-flex;align-items:center;vertical-align:middle;white-space:nowrap}
.supporter img{width:28px;height:28px;display:block}
.supporter img+img{margin-left:-7px}
.supporter-name{margin-left:8px;padding:2px 10px;border-radius:9px;background:#060607;border:1px solid var(--sk);color:var(--st);font-size:.8rem;font-weight:800}
.supporter.s-1{--sk:#E9B949;--st:#E9B949}.supporter.s-2{--sk:#E5392B;--st:#FF8A7E}.supporter.s-3{--sk:#2F8FF0;--st:#8CC8FF}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.v-limited.chip{background:color-mix(in srgb,var(--limited) 34%,transparent);border-color:var(--limited);border-style:dashed}.v-fail.chip{border-style:solid}
.vs-games-side .chip{white-space:normal}.cap>.chip{white-space:normal}
.newest-driver{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}.newest-driver .vs-tag{align-self:center}.newest-driver a,.newest td a{overflow-wrap:anywhere}
@media (max-width:640px){.newest-driver{justify-content:flex-end}}
/* games badges on driver rows and cards */
.gamechips{display:inline-flex;flex-wrap:wrap;align-items:center;gap:5px}.gamechips .chip{font-size:.76rem;padding:1px 9px}.gc-label{color:var(--muted);font-size:.88rem;margin-right:3px}
.gamekey{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;color:var(--muted);font-size:.95rem;margin:0 0 16px}.gamekey .chip{font-size:.76rem;padding:1px 9px}.gamekey>span:last-child{flex:1 1 320px}
.newest-gpu{display:block;color:var(--muted);font-size:.86rem;font-weight:400;text-decoration:none;margin-top:2px}.newest-gpu:hover{text-decoration:underline}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:0 0 20px}.hero-cta .meta{margin:0}
@media (max-width:640px){table.stack td .gamechips{justify-content:flex-end}}
@media (min-width:641px){.newest .gamechips{flex-wrap:nowrap}.newest td.mono{white-space:nowrap}}
/* speed board: one score per driver; the bar, the number, and the order are that score */
.speed{display:grid;gap:12px}.speed-row{display:grid;grid-template-columns:minmax(0,270px) minmax(0,1fr);gap:10px 22px;align-items:start;padding:14px 18px}
.speed-dev{display:flex;gap:10px;align-items:flex-start;min-width:0}.speed-devname{display:flex;flex-direction:column;gap:2px;min-width:0}
.speed-dev a{font-weight:700;font-size:1.08rem;overflow-wrap:anywhere}.speed-dev .meta{margin:0;overflow-wrap:anywhere}
.speed-rank{flex:none;min-width:2rem;text-align:center;font-family:var(--mono);font-weight:700;font-size:.9rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:1px 6px;margin-top:2px}
.speed-bars{display:grid;gap:12px;min-width:0}
.speed-bar{display:grid;grid-template-columns:minmax(0,1fr) 4.2rem;gap:4px 12px;align-items:center;text-decoration:none;color:var(--text)}
.speed-name{grid-column:1/-1;font-size:.9rem;overflow-wrap:anywhere;min-width:0}.speed-name .vs-tag{display:inline-block;min-width:0;margin-right:4px;letter-spacing:.06em;vertical-align:middle}.speed-drv{vertical-align:middle}
.speed-name .chip{font-size:.7rem;padding:0 6px;vertical-align:1px}.speed-ver{display:block;font-size:.78rem;color:var(--muted);overflow-wrap:anywhere}.speed-est{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.speed-track{display:block;height:16px;border-radius:999px;background:color-mix(in srgb,var(--line) 70%,transparent);overflow:hidden}
.speed-track i{display:block;height:100%;border-radius:999px;background:var(--muted)}.speed-track i.custom{background:linear-gradient(90deg,var(--g1),var(--g2))}
.speed-score{font-family:var(--mono);font-size:1.3rem;text-align:right;white-space:nowrap}
/* An estimate is drawn striped and its number lighter: it is on the device's card for comparing that device's drivers, not for ranking. */
.speed-track i.est{-webkit-mask-image:repeating-linear-gradient(135deg,#000 0 6px,transparent 6px 10px);mask-image:repeating-linear-gradient(135deg,#000 0 6px,transparent 6px 10px)}.speed-score.est{color:var(--muted);font-weight:600}
.speed-bar:hover .speed-drv{text-decoration:underline}.speed-note{margin:14px 0 16px}
.speed-hidden{margin-top:16px}.speed-out{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:10px}.speed-out li{min-width:0;overflow-wrap:anywhere}
.speed-out a{text-decoration:none;color:var(--text)}.speed-out a:hover{text-decoration:underline}.speed-out .vs-tag{display:inline-block;min-width:0}
.speed-why{display:block;font-size:.84rem;color:var(--muted)}
@media (max-width:720px){.speed-row{grid-template-columns:minmax(0,1fr)}.speed-score{font-size:1.15rem}}
/* three header links must stay on one line on a phone */
nav a,.brand span{white-space:nowrap}
@media (max-width:480px){nav{gap:0}nav a{padding:0 9px;font-size:.95rem}.brand{font-size:1.08rem;gap:8px}}

/* About: the developer's apps. The store badges keep their own artwork, at one height, with clear space around them. */
.apps .sub{margin-bottom:14px}.appgrid{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr))}
.appcard{display:grid;grid-template-columns:76px minmax(0,1fr);grid-template-rows:1fr auto;gap:14px 16px;align-items:start;padding-top:24px;overflow:hidden;transition:transform .15s,box-shadow .15s,border-color .15s;
background:radial-gradient(340px 150px at 0 0,color-mix(in srgb,var(--a1) 15%,transparent),transparent 70%),var(--card)}
.appcard::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.appcard:hover{transform:translateY(-3px);border-color:var(--a1);box-shadow:var(--shadow),0 12px 34px color-mix(in srgb,var(--a1) 26%,transparent)}
.appicon{display:block;line-height:0}.appicon img{border-radius:22%;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.appbody h3{font-size:1.25rem;margin:0 0 4px}.appbody p{margin:0}.appbody .meta{margin-top:6px}
.appstores{grid-column:1/-1;align-self:end;display:flex;flex-wrap:wrap;gap:12px;margin:2px 0 0}
.appstores a{display:block;line-height:0;border-radius:9px;transition:transform .15s,filter .15s}.appstores a:hover{transform:translateY(-1px);filter:brightness(1.15)}
.appstores img{height:48px;width:auto;display:block}
.appsoon{display:inline-flex;align-items:center;min-height:48px;padding:0 16px;border-radius:9px;border:1px dashed color-mix(in srgb,var(--a1) 60%,var(--line));color:var(--muted);font-weight:700;font-size:.92rem;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.appcard:hover,.appstores a:hover{transform:none}}
/* Section bar: links to the page's sections, inside the sticky header so it stays on screen. One row that
   scrolls sideways on a narrow screen; the faded right edge says there is more. */
.jump{border-top:1px solid var(--line)}
header.site .jump .wrap{min-height:0;gap:6px;padding-top:7px;padding-bottom:7px;overflow-x:auto;scrollbar-width:none;position:relative;
-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
.jump .wrap::-webkit-scrollbar{display:none}
.jump a{flex:none;display:inline-block;line-height:34px;max-width:15rem;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:var(--card);
color:var(--muted);font-weight:600;font-size:.9rem;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .15s,color .15s,border-color .15s}
.jump a:hover{color:var(--text);border-color:var(--g2)}
.jump a[aria-current]{background:var(--grad);color:var(--on-grad);border-color:transparent}
.jump a:last-child{margin-right:22px}
/* A jump must stop below the header, and the header is taller when it carries the bar. */
:root{--jump-off:80px}body:has(.jump){--jump-off:132px}
h2,:target{scroll-margin-top:var(--jump-off)}
html{scroll-behavior:smooth}

/* Grouped driver lists, the What differs table, Copy link, and the footer's invitation (2026-10-11). */
.grouphead{margin:26px 0 2px;font-size:1.12rem}
.grouphead .meta{font-weight:700;border:1px solid var(--line);border-radius:999px;padding:0 9px;margin-left:6px;white-space:nowrap;display:inline-block}
.head-actions:has(.copylink){margin-bottom:14px}
.groupnote{margin:0 0 12px;max-width:70ch}
.difwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dif{border-collapse:collapse;width:100%;font-size:.93rem}
table.dif th,table.dif td{padding:9px 12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;white-space:nowrap}
table.dif th{text-transform:none;letter-spacing:0}
table.dif tbody th[title]{font-family:var(--mono);font-size:.86rem;font-weight:500}
table.dif thead th{vertical-align:bottom;white-space:normal;min-width:8.5rem;max-width:12rem;overflow-wrap:anywhere;font-size:.88rem}
table.dif thead th .vs-tag{display:block;width:max-content;margin-top:6px}
table.dif tbody th{font-weight:600;position:sticky;left:0;background:var(--card);min-width:17rem;max-width:22rem;white-space:normal;overflow-wrap:anywhere;box-shadow:1px 0 0 var(--line)}
table.dif thead th:first-child{position:sticky;left:0;background:var(--card);box-shadow:1px 0 0 var(--line)}
table.dif tr.difsec th{background:var(--card2);color:var(--muted);font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;position:static;max-width:none}
table.dif tbody tr:last-child th,table.dif tbody tr:last-child td{border-bottom:0}
.difmore{margin-top:12px}.difmore summary{cursor:pointer;font-weight:600;min-height:32px}.difmore .tablewrap{margin-top:10px}
.copylink svg{width:18px;height:18px}
.foot-cta{margin:0 0 12px;color:var(--text)}
/* The language list at the foot of every page: one line that wraps, the language being read in the text colour. */
.langs{margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px}
.langs b{color:var(--text);font-weight:600}
@media (max-width:640px){table.dif tbody th{min-width:8.5rem;max-width:9.5rem}table.dif th,table.dif td{padding:8px 9px}}
.difrest{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:12px}.difrest a{overflow-wrap:anywhere}

/* A page a player can read (2026-10-11): the device index, the year on a games tag, developer details. */
.devindex{list-style:none;margin:0 0 10px;padding:0;columns:4 13rem;column-gap:22px}
@media (max-width:640px){.devindex{columns:2;column-gap:14px;font-size:.95rem}}
.devindex .meta{display:block;font-size:.82rem}
.devindex li{break-inside:avoid;padding:0}.devindex a{display:block;padding:7px 0;min-height:32px;overflow-wrap:anywhere}
.chip .gy{font-size:.82em;font-weight:600;opacity:.8;margin-left:5px}
.devdetails{margin-top:10px}.devdetails summary{cursor:pointer;font-weight:600;min-height:32px;color:var(--muted)}.devdetails .chips{margin-top:8px}
/* A translated menu can be wider than a phone ("Pruebas de velocidad"), so on a phone it sits on its own row
   under the name. English fits on one row and keeps it. */
@media (max-width:640px){html:not([lang="en"]) header.site>.wrap{flex-wrap:wrap;row-gap:0}html:not([lang="en"]) header.site>.wrap nav{flex-wrap:wrap}}
/* The language menu at the right of the header (2026-10-11): a button that names the language being read and
   opens the list of the others. Plain links inside <details>, so it needs no script. On a phone the name and
   the menu share the first row and the page links take the second: the three links and the menu are wider than a
   phone in every language, and wider than a small tablet in French and Spanish. */
.langmenu{position:relative;margin:0;flex:none}
.langmenu>summary{list-style:none;gap:7px;padding:0 12px;margin:0;border-radius:999px;color:var(--text);white-space:nowrap;transition:background .15s}
.langmenu>summary::-webkit-details-marker{display:none}
.langmenu>summary:hover,.langmenu[open]>summary{background:var(--card2)}.langmenu[open]>summary{margin-bottom:0}
.langmenu svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7}
.langmenu>summary::after{content:"";width:7px;height:7px;border:solid currentColor;border-width:0 2px 2px 0;transform:rotate(45deg);margin:-4px 2px 0 1px;opacity:.7}
.langmenu ul{position:absolute;right:0;top:calc(100% + 6px);z-index:20;margin:0;padding:6px;list-style:none;min-width:11.5rem;max-height:calc(100vh - 84px);overflow-y:auto;background:var(--card);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow)}
.langmenu li{margin:0;padding:0}
.langmenu a{display:flex;align-items:center;min-height:44px;padding:0 12px;border-radius:9px;color:var(--text);text-decoration:none;white-space:nowrap}
.langmenu a:hover{background:var(--card2)}
.langmenu a[aria-current]{color:var(--link);font-weight:700}
.langmenu a[aria-current]::after{content:"\2713";margin-left:auto;padding-left:16px}
/* The page links start under the name, not a link's padding to the right of it. A jump stops below the taller header
   (jump.js measures it on a page with a section bar; this is for the pages without one). */
header.site>.wrap:has(.langmenu){flex-wrap:wrap;row-gap:0}
@media (max-width:780px){header.site>.wrap:has(.langmenu){min-height:0;padding-top:4px}
header.site>.wrap:has(.langmenu) nav{order:2;flex:1 0 100%;flex-wrap:wrap;margin-left:-14px}
.langmenu>summary{padding-right:4px}
body:has(.langmenu){--jump-off:114px}body:has(.langmenu):has(.jump){--jump-off:166px}}
@media (max-width:480px){header.site>.wrap:has(.langmenu) nav{margin-left:-9px}}
/* Under 360 px the Spanish and French page links take two rows of their own (header 139 px): leave room for that in every language. */
@media (max-width:359px){body:has(.langmenu){--jump-off:158px}}
/* Phone widths, every language (2026-10-11). A translated label is longer than its English ("Personalizado" for
   "Custom"), and a fixed column cut it or pushed the page wider than the screen. The label column now takes the
   widest label in the card, so the bars of one device still start and end together; the headline wraps. */
/* A browser from before 2023 has no subgrid and keeps the fixed column: there a long label is cut with "…", not spilled. */
.speed-bar .vs-tag,.speed-out .vs-tag{overflow:hidden;text-overflow:ellipsis}
.prose .card .chip{white-space:normal}