*,*::before,*::after{
box-sizing:border-box;
border-radius:var(--radius_none);
}
html{
font-size:16px;
-webkit-text-size-adjust:100%;
}
body{
margin:0;
background:var(--color_bg);
color:var(--color_text);
font-family:var(--font_sans);
font-size:var(--text_md);
line-height:var(--line_body);
}
a{
color:var(--color_accent);
text-decoration-thickness:var(--underline_width);
text-underline-offset:var(--underline_offset);
text-decoration-color:transparent;
}
a:hover,a:focus-visible{
text-decoration-color:currentColor;
}
:focus-visible{
outline:var(--underline_width) solid var(--color_focus);
outline-offset:2px;
}
h1,h2,h3{
line-height:var(--line_tight);
margin:var(--space_6) 0 var(--space_3);
}
h1{
font-size:var(--text_xl);
margin-top:var(--space_5);
}
h2{
font-size:var(--text_lg);
}
h3{
font-size:var(--text_md);
}
p,ul,ol{
margin:0 0 var(--space_4);
}
code{
font-size:1em;
background:var(--color_surface);
padding:0 var(--space_1);
}
.page_width{
max-width:var(--width_page);
margin:0 auto;
padding:0 var(--space_4);
}
.visually_hidden{
position:absolute;
width:1px;
height:1px;
overflow:hidden;
clip-path:inset(50%);
white-space:nowrap;
}
.header_row{
display:flex;
flex-wrap:wrap;
align-items:baseline;
justify-content:space-between;
gap:var(--space_2) var(--space_5);
padding-top:var(--space_3);
padding-bottom:var(--space_3);
}
.brand{
display:inline-flex;
align-items:center;
gap:var(--space_2);
color:var(--color_text);
font-size:var(--text_lg);
font-weight:var(--weight_regular);
letter-spacing:-.02em;
text-decoration:none;
}
.brand strong{
font-weight:var(--weight_bold);
}
.brand_mark{
width:1.5rem;
height:1.5rem;
flex:none;
}
.brand_mark_lead{
fill:var(--color_accent);
}
.brand_mark_row{
fill:var(--color_logo_row);
}
.site_nav{
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:var(--space_1) var(--space_4);
}
.site_nav a{
color:var(--color_text);
font-weight:var(--weight_medium);
text-decoration-line:underline;
}
.site_nav a[aria-current=page]{
text-decoration-color:var(--color_accent);
}
button,select,input{
font:inherit;
color:inherit;
}
button,.button,.menu summary,.control_search input,.control select,.control input{
display:inline-flex;
align-items:center;
gap:var(--space_2);
background:var(--color_control);
color:var(--color_text);
border:0;
border-radius:var(--br9);
padding:var(--space_2) var(--space_4);
line-height:var(--line_tight);
text-decoration:none;
cursor:pointer;
}
button:hover,.button:hover,.menu summary:hover,.menu[open] summary,.control_search input:hover,.control select:hover,.control input:hover{
background:var(--color_control_hover);
}
.chevron{
width:.75em;
height:.5em;
flex:none;
fill:none;
stroke:currentColor;
stroke-width:2.4;
stroke-linecap:round;
stroke-linejoin:round;
}
.chevron_up{
transform:rotate(180deg);
}
.site_main{
padding-bottom:var(--space_7);
}
.detail_page{
max-width:64rem;
}
.lede{
font-size:var(--text_lg);
max-width:var(--width_text);
margin-bottom:var(--space_2);
}
.muted,.margin{
color:var(--color_muted);
}
.board_controls{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:center;
gap:var(--space_3);
margin:var(--space_5) 0;
}
.control_search input{
display:block;
width:var(--width_search);
cursor:text;
}
.control_search input::placeholder{
color:var(--color_muted);
}
.menu{
position:relative;
}
.menu summary{
list-style:none;
white-space:nowrap;
user-select:none;
}
.menu summary::-webkit-details-marker{
display:none;
}
.menu summary .chevron{
color:var(--color_muted);
}
.menu[open] summary .chevron{
transform:rotate(180deg);
}
.menu_list{
position:absolute;
top:calc(100% + var(--space_1));
left:0;
z-index:5;
min-width:100%;
max-height:22rem;
overflow-y:auto;
margin:0;
padding:var(--space_1) 0;
list-style:none;
background:var(--color_menu);
}
.menu:last-of-type .menu_list{
left:auto;
right:0;
}
.menu_list a{
display:block;
padding:var(--space_2) var(--space_4);
color:var(--color_text);
white-space:nowrap;
}
.menu_list a:hover,.menu_list a:focus-visible{
background:var(--color_control_hover);
text-decoration:none;
}
.menu_list a[aria-current]{
color:var(--color_accent);
font-weight:var(--weight_medium);
}
.control{
display:block;
width:var(--width_control);
font-size:var(--text_sm);
}
.control>span{
display:block;
color:var(--color_muted);
margin-bottom:var(--space_1);
}
.control_search{
width:var(--width_search);
}
.control select,.control input{
display:block;
width:100%;
background:var(--color_control);
border:0;
padding:var(--space_2) var(--space_3);
cursor:pointer;
}
.control input{
cursor:text;
}
.board,.data_table{
width:100%;
border-collapse:separate;
border-spacing:0;
font-size:var(--text_sm);
font-variant-numeric:tabular-nums;
}
.board th,.board td,.data_table th,.data_table td{
padding:var(--cell_pad_y) var(--cell_pad_x);
text-align:left;
vertical-align:baseline;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
.board .col_provider,.data_table .fill,.facts td{
width:100%;
max-width:0;
}
.board tbody tr:nth-child(even) td,.data_table tbody tr:nth-child(even)>*{
background:var(--color_row_alt);
}
.data_table tbody th{
font-weight:var(--weight_regular);
}
.facts tbody th{
width:13rem;
max-width:none;
color:var(--color_muted);
}
.board thead th,.data_table thead th{
position:sticky;
top:0;
z-index:2;
background:var(--color_bg);
color:var(--color_muted);
font-weight:var(--weight_medium);
white-space:nowrap;
}
.board .numeric,.data_table .numeric{
text-align:right;
width:1%;
}
.board tbody tr:hover td,.data_table tbody tr:hover>*{
background:var(--color_row_hover);
}
.col_rank{
width:var(--col_rank_width);
min-width:var(--col_rank_width);
white-space:nowrap;
}
.rank_number{
font-weight:var(--weight_bold);
}
.rank_early{
color:var(--color_warn);
}
.margin{
font-size:var(--text_xs);
}
.col_model a{
font-weight:var(--weight_medium);
}
.sort_link{
color:inherit;
text-decoration-line:underline;
}
th[aria-sort] .sort_link{
text-decoration-color:var(--color_accent);
}
.sort_arrow{
display:inline-block;
min-width:1em;
margin-left:var(--space_1);
color:var(--color_accent);
}
.missing{
color:var(--color_muted);
}
.tag{
font-size:var(--text_xs);
color:var(--color_muted);
background:var(--color_control);
padding:0 var(--space_2);
white-space:nowrap;
}
.mood_good{
color:var(--color_good);
}
.mood_bad{
color:var(--color_bad);
}
.post_list{
list-style:none;
padding:0;
max-width:var(--width_text);
}
.post_list li{
margin-bottom:var(--space_4);
}
.post_meta{
display:block;
font-size:var(--text_sm);
color:var(--color_muted);
}
.tag_new{
display:inline-block;
color:var(--color_bg);
background:var(--color_good);
border-radius:var(--br9);
font-size:.75rem;
font-weight:var(--weight_bold);
letter-spacing:.04em;
line-height:1.5;
text-transform:uppercase;
vertical-align:.1em;
}
.state_healthy{
color:var(--color_good);
}
.state_stale,.state_pending{
color:var(--color_warn);
}
.state_failing,.state_disabled{
color:var(--color_bad);
}
.load_more{
text-align:center;
margin:var(--space_5) 0;
}
.empty_state{
padding:var(--space_5) 0;
}
.prose{
max-width:var(--width_text);
}
.breadcrumbs{
font-size:var(--text_sm);
margin-top:var(--space_4);
color:var(--color_muted);
}
.section_note{
font-size:var(--text_sm);
color:var(--color_muted);
max-width:var(--width_text);
}
.data_table{
width:100%;
margin-bottom:var(--space_5);
}
.wide_scroll{
position:relative;
overflow-x:auto;
}
.board_wrap{
position:relative;
}
@media (max-width:1000px){
.board_wrap{
overflow-x:auto;
}
}
.compare_picker{
display:flex;
flex-wrap:wrap;
align-items:flex-end;
gap:var(--space_3);
margin:var(--space_4) 0;
}
.compare_picker .control{
width:var(--width_search);
}
.chip_list{
display:flex;
flex-wrap:wrap;
gap:var(--space_2);
list-style:none;
padding:0;
font-size:var(--text_sm);
}
.chip_list li{
background:var(--color_control);
border-radius:var(--br9);
padding:0 var(--space_3);
}
.is_best{
font-weight:var(--weight_bold);
}
.is_tie{
color:var(--color_muted);
}
.site_footer{
padding:var(--space_5) 0 var(--space_6);
}
.footer_nav{
display:flex;
flex-wrap:wrap;
justify-content:center;
gap:var(--space_2) var(--space_5);
}
.footer_nav a{
color:var(--color_text);
font-weight:var(--weight_medium);
text-decoration-line:underline;
}
.board .col_rank,.board .col_model{
position:sticky;
z-index:1;
background:var(--color_bg);
}
.board .col_rank{
left:0;
}
.board .col_model{
left:var(--col_rank_width);
min-width:var(--col_model_width);
max-width:var(--col_model_width);
}
.board thead .col_rank,.board thead .col_model{
z-index:3;
}
@media (max-width:760px){
.page_width{
padding:0 var(--space_3);
}
h1{
font-size:var(--text_lg);
}
.lede{
font-size:var(--text_md);
}
.control_search{
width:100%;
}
.control_search input{
width:100%;
}
.board .col_provider,.board .col_weights{
display:none;
}
.board .col_model{
min-width:11rem;
max-width:11rem;
}
.board .col_model .tag{
display:none;
}
.facts tbody th{
width:9rem;
}
}