.gA{
--g:var(--ok1);
}
.gB{
--g:var(--ok2);
}
.gC{
--g:var(--wn1);
}
.gD{
--g:var(--wn2);
}
.gF{
--g:var(--bd1);
}
.gU{
--g:var(--nu1);
}
.s-pass{
--s:var(--ok1);
}
.s-part{
--s:var(--wn1);
}
.s-fail{
--s:var(--bd1);
}
.s-unk,.s-na{
--s:var(--tx3);
}
.sr{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
}
.top{
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
gap:var(--sp2) var(--sp5);
min-height:var(--bh1);
padding:var(--sp3) var(--px1);
}
.brand{
display:flex;
align-items:center;
gap:0.3em;
font:900 var(--fz5)/1 var(--ff2);
font-stretch:var(--fs2);
letter-spacing:0.01em;
text-transform:uppercase;
color:var(--tx1);
}
.brand b{
color:var(--cl1);
}
.brand:hover,a.tile:hover,a.cat:hover,.fixes li a:hover{
text-decoration:none;
}
svg.logo{
width:1.15em;
height:1.15em;
color:var(--cl2);
}
.nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:0 var(--sp5);
}
.nav a{
color:var(--tx2);
font-size:var(--fz3);
font-weight:600;
padding:var(--sp2) 0;
white-space:nowrap;
}
.nav a:hover,.nav a[aria-current]{
color:var(--tx1);
text-decoration-line:underline;
}
.hero{
padding:var(--sp6) var(--px1) var(--sp5);
text-align:center;
}
.hero h1{
font-size:var(--fh1);
}
.hero em{
font-style:normal;
color:var(--cl1);
}
.lede{
max-width:60ch;
margin:var(--sp4) auto 0;
color:var(--tx2);
font-size:var(--fz3);
}
.stats{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:4px;
padding:0 var(--px1);
}
.tile,.avg{
background:var(--bg1);
padding:var(--sp5);
color:var(--tx1);
}
.avg,.avg+.lead{
grid-column:span 2;
}
.lbl{
display:flex;
align-items:center;
gap:var(--sp2);
color:var(--tx3);
font-size:var(--fz0);
font-weight:700;
letter-spacing:var(--ls1);
text-transform:uppercase;
}
.val{
font:800 2.6rem/1.1 var(--ff2);
margin-top:var(--sp3);
}
.val small,.big small,.pts small{
font-size:0.45em;
color:var(--tx3);
}
.sub{
color:var(--tx2);
font-size:var(--fz1);
}
.tile.lead{
box-shadow:inset 0 3px 0 var(--cl2);
}
.tile.lead .lbl{
color:var(--cl2);
}
a.tile:hover,a.cat:hover{
background:var(--bg2);
color:var(--tx1);
}
.big{
font:800 4.2rem/1 var(--ff2);
color:var(--g);
margin:var(--sp3) 0 var(--sp4);
}
.dist{
display:block;
width:100%;
height:10px;
}
.dist rect,.bar rect{
fill:var(--g);
}
.bar rect.bg{
fill:var(--bg4);
}
.dl{
display:flex;
flex-wrap:wrap;
gap:var(--sp2) var(--sp4);
margin-top:var(--sp3);
font:700 var(--fz2) var(--ff2);
color:var(--g);
}
.dl span{
color:var(--g);
}
.dl b{
color:var(--tx2);
margin-left:6px;
}
.board{
padding:var(--sp6) var(--px0) 0;
}
.tools{
display:flex;
flex-wrap:wrap;
gap:var(--sp2);
margin-bottom:var(--sp3);
}
.find{
display:flex;
align-items:center;
gap:var(--sp2);
flex:1 1 240px;
max-width:360px;
height:44px;
padding:0 var(--sp4);
background:var(--bg1);
border-radius:var(--br9);
color:var(--tx3);
}
.find input{
flex:1;
min-width:0;
height:100%;
outline:0;
color:var(--tx1);
}
.find:focus-within{
box-shadow:inset 0 0 0 2px var(--cl1);
}
.chips{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:4px;
}
.chips .lbl{
padding:0 var(--sp2);
}
.chips button{
height:44px;
padding:0 var(--sp4);
background:var(--bg1);
border-radius:var(--br9);
color:var(--tx2);
font-weight:600;
}
.chips button:hover{
color:var(--tx1);
}
.chips button[aria-pressed=true]{
background:var(--cl1);
color:var(--tx4);
}
.lb{
width:100%;
border-collapse:separate;
border-spacing:0 3px;
font-variant-numeric:tabular-nums;
}
.lb th{
position:sticky;
top:0;
z-index:1;
background:var(--bg0);
padding:0;
text-align:center;
}
.lb th button{
position:relative;
display:inline-flex;
align-items:center;
gap:6px;
padding:var(--sp3) var(--sp3) var(--sp3) var(--sp2);
color:var(--tx3);
font-size:var(--fz0);
font-stretch:var(--fs1);
font-weight:700;
letter-spacing:0.05em;
text-transform:uppercase;
white-space:nowrap;
}
.lb th button:hover{
color:var(--tx1);
}
.lb th[aria-sort] button{
color:var(--cl1);
}
.lb th button::after{
content:'\25BC';
position:absolute;
right:1px;
font-size:0.6em;
visibility:hidden;
}
.lb th[aria-sort] button::after{
visibility:visible;
}
.lb th[aria-sort=ascending] button::after{
content:'\25B2';
}
.lb th.c-name,.lb th.c-score{
text-align:left;
}
.lb td{
height:var(--rh1);
padding:0 var(--sp2);
background:var(--bg1);
white-space:nowrap;
text-align:center;
}
.lb tbody tr:nth-child(even of :not([hidden])) td{
background:var(--bg2);
}
.lb tbody tr:hover td{
background:var(--bg3);
}
.lb td:first-child{
box-shadow:inset 4px 0 0 var(--g);
}
.lb tbody tr.me td{
background:var(--bg3);
}
.lb .me .c-name a{
color:var(--cl2);
}
.c-rank{
width:56px;
}
.rk{
font:800 1.45rem/1 var(--ff2);
font-stretch:var(--fs1);
color:var(--tx2);
}
.r1{
color:var(--md1);
}
.r2{
color:var(--md2);
}
.r3{
color:var(--md3);
}
.lb td.c-name{
text-align:left;
padding-right:var(--sp4);
}
.c-name a{
color:var(--tx1);
font-size:var(--fz3);
font-stretch:92%;
font-weight:700;
}
.c-name a:hover{
color:var(--cl1);
}
.lb td.c-score{
text-align:left;
}
.gr{
display:inline-grid;
place-items:center;
width:34px;
height:34px;
border-radius:var(--br1);
background:var(--g);
color:var(--tx4);
font:800 1.35rem/1 var(--ff2);
font-stretch:var(--fs1);
vertical-align:middle;
}
.c-score .num{
display:inline-block;
width:2.4ch;
margin:0 var(--sp3) 0 var(--sp3);
font:800 1.7rem/1 var(--ff2);
font-stretch:var(--fs1);
vertical-align:middle;
text-align:right;
}
.bar{
display:inline-block;
width:96px;
height:6px;
vertical-align:middle;
}
.c-score .bar rect:not(.bg){
fill:var(--g);
}
.c-cat .num{
font:800 1.35rem/1 var(--ff2);
font-stretch:var(--fs1);
color:var(--g);
}
.st{
display:inline-grid;
place-items:center;
width:26px;
height:26px;
color:var(--s);
vertical-align:middle;
}
i.st::before{
content:'';
width:20px;
height:20px;
background:currentColor;
mask:var(--m) center/contain no-repeat;
}
.st.s-pass{
--m:url(st-pass.svg);
}
.st.s-part{
--m:url(st-part.svg);
}
.st.s-fail{
--m:url(st-fail.svg);
}
.st.s-unk,.st.s-na{
--m:url(st-unk.svg);
}
.st .i{
width:20px;
height:20px;
stroke-width:3px;
}
.c-chg span{
display:inline-flex;
align-items:center;
gap:2px;
font:800 var(--fz3) var(--ff2);
font-stretch:var(--fs1);
}
.c-chg .i{
width:14px;
height:14px;
}
.up{
color:var(--ok1);
}
.down{
color:var(--bd1);
}
.flat{
color:var(--tx3);
}
.c-pop{
color:var(--tx2);
}
.lb .none td{
color:var(--tx2);
}
.legend{
display:flex;
flex-wrap:wrap;
align-items:center;
gap:var(--sp2) var(--sp3);
margin-top:var(--sp4);
color:var(--tx2);
font-size:var(--fz1);
}
.legend .st{
width:20px;
height:20px;
}
.legend .st::before{
width:16px;
height:16px;
}
.upd{
display:inline-grid;
place-items:center;
width:48px;
height:48px;
margin-left:auto;
border-radius:var(--br1);
color:var(--tx2);
}
.upd:hover{
background:var(--bg2);
color:var(--tx1);
}
.upd .i{
width:28px;
height:28px;
}
.pop{
width:min(560px,calc(100% - 32px));
max-height:calc(100dvh - 32px);
margin:auto;
background:var(--bg2);
color:var(--tx1);
overflow:auto;
}
.pop-in{
padding:var(--sp5) var(--sp6) var(--sp6);
}
.pop::backdrop{
background:rgb(0 0 0 / .75);
}
.pop-head{
display:flex;
align-items:flex-start;
justify-content:space-between;
gap:var(--sp4);
}
.pop-head h2{
padding-top:6px;
font-size:var(--fh2);
}
.pop-x{
display:inline-grid;
place-items:center;
flex:none;
width:48px;
height:48px;
margin-right:-12px;
border-radius:var(--br1);
}
.pop-x:hover{
background:var(--bg3);
}
.pop-x .i{
width:var(--ic2);
height:var(--ic2);
}
.pop p{
margin-top:var(--sp3);
color:var(--tx2);
}
.pop .when{
color:var(--tx1);
font-size:var(--fz4);
font-weight:700;
}
.why{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
gap:var(--sp5);
padding:var(--sp7) var(--px1) 0;
}
.why h2,.fixes h2,.checks h2,.near h2,.hist h2,.prose h2{
display:flex;
align-items:center;
gap:var(--sp3);
font-size:var(--fh2);
}
.why h2{
font-size:var(--fz4);
margin-bottom:var(--sp2);
}
.why h2 .i,.fixes h2 .i,.checks h2 .i,.near h2 .i,.hist h2 .i,.prose h2 .i{
width:var(--ic2);
height:var(--ic2);
color:var(--cl1);
}
.why p{
color:var(--tx2);
}
.crumbs{
display:flex;
flex-wrap:wrap;
gap:var(--sp2);
padding:var(--sp5) var(--px1) 0;
color:var(--tx3);
font-size:var(--fz1);
}
.crumbs a::after{
content:'/';
display:inline-block;
margin-left:var(--sp2);
color:var(--tx3);
}
.head{
display:grid;
grid-template-columns:1fr auto;
align-items:end;
gap:var(--sp5) var(--sp6);
padding:var(--sp5) var(--px1) var(--sp6);
}
.head h1{
font-size:var(--fh1);
}
.meta{
display:flex;
flex-wrap:wrap;
gap:var(--sp2) var(--sp5);
margin-top:var(--sp4);
color:var(--tx2);
}
.meta span{
display:inline-flex;
align-items:center;
gap:6px;
}
.meta .i{
color:var(--tx3);
}
.score{
display:grid;
grid-template-columns:auto auto;
align-items:center;
gap:0 var(--sp4);
}
.gr.xl{
grid-row:span 3;
width:118px;
height:118px;
font-size:5.2rem;
}
.pts{
font:700 3.6rem/1 var(--ff2);
color:var(--g);
}
.rank{
display:flex;
align-items:center;
gap:6px;
margin-top:var(--sp2);
color:var(--tx2);
font-weight:600;
}
.rank .i{
color:var(--cl2);
}
.rank.up,.rank.up .i{
color:var(--ok1);
}
.rank.down,.rank.down .i{
color:var(--bd1);
}
.cats{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:4px;
padding:0 var(--px1);
}
.cat{
display:block;
background:var(--bg1);
padding:var(--sp5);
color:var(--tx1);
box-shadow:inset 0 3px 0 var(--g);
}
.cat .val{
color:var(--g);
font-size:3rem;
}
.cat .bar{
display:block;
width:100%;
margin:var(--sp3) 0;
}
.fixes,.checks,.near,.hist,.note{
padding:var(--sp6) var(--px1) 0;
}
.fixes ol{
list-style:none;
display:grid;
grid-template-columns:repeat(auto-fill,minmax(min(320px,100%),1fr));
gap:4px;
margin-top:var(--sp4);
}
.fixes li a{
display:flex;
align-items:center;
gap:var(--sp4);
height:100%;
padding:var(--sp3) var(--sp4);
background:var(--bg1);
color:var(--tx1);
font-weight:600;
}
.fixes li a:hover{
background:var(--bg2);
}
.gain{
min-width:3ch;
font:700 var(--fz4) var(--ff2);
color:var(--ok1);
}
.fixes p{
margin-top:var(--sp3);
color:var(--tx2);
}
.checks h2{
margin-top:var(--sp6);
scroll-margin-top:var(--sp5);
}
.checks h2:first-child{
margin-top:0;
}
.checks h2 span{
margin-left:auto;
color:var(--g);
}
.blurb{
margin:var(--sp2) 0 var(--sp4);
color:var(--tx2);
}
.ck{
margin-bottom:3px;
background:var(--bg1);
scroll-margin-top:var(--sp5);
}
.ck summary{
display:grid;
grid-template-columns:auto 1fr auto auto;
align-items:center;
gap:var(--sp4);
padding:var(--sp3) var(--sp4);
list-style:none;
cursor:pointer;
}
.ck summary::-webkit-details-marker{
display:none;
}
.ck summary:hover,.ck:target{
background:var(--bg2);
}
.ck .t{
min-width:0;
overflow-wrap:anywhere;
}
.ck .t b{
display:block;
}
.ck .t span{
display:block;
color:var(--tx2);
font-size:var(--fz1);
}
.ck .pt{
font:700 var(--fz3) var(--ff2);
color:var(--s);
}
.chev{
color:var(--tx3);
transition:transform .15s;
}
.ck[open] .chev{
transform:rotate(180deg);
}
.ck .body{
padding:0 var(--sp4) var(--sp4) calc(26px + var(--sp4) * 2);
color:var(--tx2);
}
.ck .body p{
margin-bottom:var(--sp3);
}
.ck .body b{
color:var(--tx1);
}
.ev-l{
color:var(--tx3);
font-size:var(--fz0);
font-weight:700;
letter-spacing:var(--ls1);
text-transform:uppercase;
}
pre{
margin-bottom:var(--sp3);
padding:var(--sp3);
background:var(--bg0);
color:var(--tx2);
white-space:pre-wrap;
overflow-wrap:anywhere;
}
.carried,.how{
display:flex;
align-items:center;
gap:6px;
font-size:var(--fz1);
}
.near .lb{
margin-top:var(--sp4);
}
.spark{
display:block;
width:100%;
height:140px;
margin-top:var(--sp4);
background:var(--bg1);
}
.spark .line{
fill:none;
stroke:var(--g);
stroke-width:2.5;
vector-effect:non-scaling-stroke;
}
.spark .area{
fill:color-mix(in srgb,var(--g) 14%,transparent);
}
.axis{
display:flex;
justify-content:space-between;
margin-top:var(--sp2);
color:var(--tx3);
font-size:var(--fz0);
}
.hist>p{
margin-top:var(--sp3);
color:var(--tx2);
}
.note{
padding-bottom:var(--sp6);
}
.note p{
display:flex;
gap:var(--sp3);
margin-bottom:var(--sp3);
color:var(--tx2);
font-size:var(--fz1);
}
.note .i{
margin-top:3px;
color:var(--tx3);
}
.prose{
padding:0 var(--px2) var(--sp5);
}
.prose h2{
margin:var(--sp6) 0 var(--sp3);
scroll-margin-top:var(--sp5);
}
.prose p,.prose li{
margin-bottom:var(--sp3);
color:var(--tx2);
}
.prose b{
color:var(--tx1);
}
.prose ul{
padding-left:1.2em;
}
.prose ul.grades{
list-style:none;
display:flex;
flex-wrap:wrap;
gap:var(--sp4);
padding:0;
}
.grades li{
display:flex;
align-items:center;
gap:var(--sp2);
}
.method .pts{
width:100%;
overflow-wrap:anywhere;
border-collapse:separate;
border-spacing:0 3px;
font:inherit;
color:inherit;
}
.method .pts th{
padding:var(--sp2) var(--sp4);
color:var(--tx3);
font-size:var(--fz0);
letter-spacing:var(--ls1);
text-align:left;
text-transform:uppercase;
}
.method .pts td{
padding:var(--sp4);
background:var(--bg1);
vertical-align:top;
}
.method .pts tr:target td{
background:var(--bg3);
}
.method .pts td p{
margin:var(--sp2) 0 0;
font-size:var(--fz1);
}
.method .pts .n,.method .pts th:last-child{
width:80px;
text-align:right;
}
.method .pts .n{
font:700 var(--fz4) var(--ff2);
color:var(--cl2);
}
.foot{
display:grid;
justify-items:center;
gap:var(--sp4);
margin-top:var(--sp7);
padding:var(--sp6) var(--px1);
color:var(--tx2);
text-align:center;
font-size:var(--fz2);
}
.foot p:not(.brand){
max-width:70ch;
}
.foot nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--sp2) var(--sp5);
font-weight:600;
}
.foot .brand{
font-size:clamp(1rem,6vw,1.9rem);
}
.fine{
margin-top:var(--sp3);
color:var(--tx3);
font-size:var(--fz1);
}
@media(max-width:1605px){
.p7{
display:none;
}
}
@media(max-width:1305px){
.p6{
display:none;
}
}
@media(max-width:1120px){
.p5{
display:none;
}
}
@media(max-width:915px){
.p4{
display:none;
}
}
@media(max-width:865px){
.head{
grid-template-columns:1fr;
}
.gr.xl{
width:88px;
height:88px;
font-size:3.8rem;
}
}
@media(max-width:760px){
.stats{
grid-template-columns:repeat(2,minmax(0,1fr));
}
.stats .lead{
grid-column:span 2;
}
}
@media(max-width:695px){
.p3{
display:none;
}
}
@media(max-width:580px){
.pop-in{
padding:var(--sp4) var(--sp5) var(--sp5);
}
.pop .when{
font-size:var(--fz3);
}
.tile,.avg{
padding:var(--sp4);
}
.val{
font-size:2rem;
}
.chips button{
padding:0 var(--sp3);
}
.chips .lbl,.lb th .tl{
display:none;
}
.lb td{
padding:0 6px;
}
.lb td.c-name{
padding-right:6px;
}
.c-name a{
font-size:var(--fz2);
}
.c-score .num{
margin:0 0 0 var(--sp2);
}
.c-rank{
width:40px;
}
.ck summary{
grid-template-columns:auto 1fr auto;
}
.chev{
display:none;
}
.ck .body{
padding-left:var(--sp4);
}
.upd{
margin-left:0;
}
}
@media(max-width:420px){
.c-name a{
font-stretch:var(--fs1);
}
.lb td{
padding:0 4px;
}
.lb td.c-name{
padding-right:4px;
}
.stats .lbl{
font-size:0.8125rem;
letter-spacing:0.04em;
}
.nav{
gap:0 var(--sp4);
}
.nav a{
font-size:var(--fz2);
}
}
@media(max-width:370px){
.p2{
display:none;
}
}
@media(max-width:330px){
.c-rank{
width:32px;
}
.c-name a{
font-size:var(--fz1);
}
}