:root{
--ink:#172c27;
--muted:#66766e;
--teal:#176f54;
--line:#dfe7e1;
--paper:#fff;
--background:#f7f9f6;
--plot-height:190px;
--motion-fast:160ms;
--motion-medium:280ms;
--motion-ease:cubic-bezier(.22,1,.36,1);
--serif:Newsreader,Georgia,serif;
--sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC",sans-serif
}
*{
box-sizing:border-box
}
html{
scroll-behavior:auto;
scrollbar-gutter:stable;
scroll-padding-top:100px
}
body{
margin:0;
background:var(--background);
color:var(--ink);
font-family:var(--sans);
font-size:15px;
line-height:1.6;
-webkit-font-smoothing:antialiased
}
[hidden]{
display:none!important
}
a{
color:inherit
}
button,input,select{
font:inherit
}
button,a,input,select,summary{
-webkit-tap-highlight-color:transparent
}
button{
cursor:pointer
}
button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{
outline:2px solid var(--teal);
outline-offset:4px
}
p,h1,h2,h3{
margin:0
}
h1,h2{
font-family:var(--serif);
font-weight:400;
letter-spacing:-.035em;
line-height:1.08
}
h2{
font-size:clamp(27px,2.7vw,34px)
}
h3{
font-size:19px;
font-weight:600;
letter-spacing:-.025em;
line-height:1.4
}
img{
max-width:100%;
object-fit:contain
}
.container{
max-width:1280px;
margin:0 auto;
padding:0 clamp(18px,4vw,48px)
}
.num,.leader-score,.leader-rank,.rank-cell,.score-cell,.detail-score,.audit-number{
font-variant-numeric:tabular-nums
}
.skip-link{
position:absolute;
top:-100px;
left:20px;
z-index:120;
padding:12px 20px;
background:#fff
}
.skip-link:focus{
top:12px
}
.eyebrow{
font-size:10px;
font-weight:600;
letter-spacing:.13em;
color:var(--teal);
line-height:1.6
}
.fine-print{
font-size:12px;
line-height:1.65;
color:var(--muted)
}
.site-header{
height:70px;
position:sticky;
top:0;
background:rgba(247,249,246,.96);
border-bottom:1px solid var(--line);
z-index:30;
backdrop-filter:blur(12px)
}
.header-inner{
height:100%;
max-width:1280px;
padding:0 clamp(18px,4vw,48px);
margin:auto;
display:flex;
align-items:center;
justify-content:space-between;
gap:28px
}
.brand{
/* Embedded SVGs must match the header's light surface, even in system dark mode. */
color-scheme:light;
display:flex;
flex-shrink:0;
align-items:center;
gap:10px;
text-decoration:none
}
.brand-symbol{
width:34px;
height:34px
}
.brand-wordmark{
display:block;
width:150px;
height:24px;
overflow:hidden
}
.primary-nav{
display:flex;
gap:26px;
font-size:12px;
font-weight:500
}
.primary-nav a{
text-decoration:none
}
.primary-nav a:hover{
color:var(--teal)
}
.header-actions{
display:flex;
align-items:center;
gap:18px;
font-size:12px;
white-space:nowrap
}
.header-actions a{
text-decoration:none
}
.language-toggle{
display:flex;
padding:3px;
border:1px solid var(--line);
border-radius:30px;
gap:2px
}
.language-toggle button{
background:none;
border:0;
color:var(--muted);
font-size:11px;
line-height:1;
padding:8px 9px;
border-radius:30px
}
.language-toggle .is-active{
background:#e4eee6;
color:#164b38
}
.github-link{
color:var(--teal)
}
.hero{
padding:32px 0 36px;
text-align:center
}
.hero-copy{
max-width:1060px;
margin:0 auto
}
.hero-contrast{
font-size:16px;
line-height:1.7;
color:var(--muted);
text-wrap:balance
}
.hero h1{
font-size:clamp(29px,3.05vw,39px);
margin:9px 0 22px;
line-height:1.18;
text-wrap:balance
}
.hero-question{
color:var(--teal)
}
.hero-capability{
display:inline-flex;
flex-direction:column;
align-items:center;
gap:8px
}
.capability-formula{
display:flex;
flex-wrap:wrap;
justify-content:center;
align-items:baseline;
column-gap:10px;
row-gap:6px;
font-size:18px;
font-weight:500;
line-height:1.7
}
.capability-formula span{
white-space:nowrap
}
.capability-formula b{
font-weight:400;
color:#8d9b91
}
.capability-note,.mission-note{
font-size:15px;
line-height:1.75;
color:var(--muted);
text-wrap:balance
}
.hero-mission{
margin-top:22px;
font-size:17px;
line-height:1.75;
text-wrap:balance
}
.hero-mission .mission-note{
margin-top:7px
}
.hero-body{
font-size:15px;
color:var(--muted);
max-width:450px;
line-height:1.75
}
.hero-links{
display:flex;
flex-wrap:wrap;
gap:22px;
align-items:center;
margin-top:27px
}
.button{
text-decoration:none;
display:inline-flex;
align-items:center;
padding:12px 20px;
border-radius:8px;
font-size:12px;
font-weight:600;
min-height:44px
}
.button-primary{
background:var(--teal);
color:white;
box-shadow:0 3px 8px rgba(23,111,84,.1)
}
.button-primary:hover{
background:#125a43
}
.text-link{
font-size:12px;
font-weight:500;
color:var(--teal);
text-decoration:none;
border-bottom:1px solid #b1cbbc;
padding-bottom:2px
}
.leaders-card{
background:white;
border:1px solid var(--line);
border-radius:14px;
padding:28px 28px 24px;
box-shadow:0 8px 26px rgba(36,68,47,.035)
}
.leader{
display:flex;
gap:14px;
align-items:center;
padding:23px 0;
border-bottom:1px solid #edf1ed
}
.leader-rank{
font-size:12px;
color:#99a59c
}
.provider-logo{
width:24px;
height:24px;
object-fit:contain;
flex-shrink:0
}
.leader-model{
flex:1;
min-width:0
}
.leader-model strong{
display:block;
font-size:14px;
font-weight:600;
margin-bottom:4px
}
.leader-score{
font-size:28px;
line-height:1.15;
text-align:right;
letter-spacing:-.04em
}
.leader-score small{
display:block;
font-size:10px;
letter-spacing:0;
color:var(--muted);
margin-top:6px
}
.leaders-card>.fine-print{
margin-top:19px
}
.mode-chip{
display:inline-block;
font-size:10px;
line-height:1.4;
font-weight:500;
color:#627367;
background:#eff4ee;
border:1px solid #e3ebe1;
border-radius:5px;
padding:3px 7px;
white-space:normal
}
.stats-strip{
display:grid;
grid-template-columns:repeat(4,1fr);
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
padding:26px 0
}
.stat{
display:flex;
align-items:baseline;
gap:14px;
padding:0 26px;
border-right:1px solid var(--line)
}
.stat:first-child{
padding-left:0
}
.stat:last-child{
border:0
}
.stat strong{
font-size:33px;
font-weight:500;
letter-spacing:-.05em;
font-variant-numeric:tabular-nums;
line-height:1.2
}
.stat span{
font-size:11px;
line-height:1.4;
color:var(--muted);
max-width:110px
}
.section{
padding-top:64px
}
#overview{
padding-top:0
}
#overview .section-heading{
margin-bottom:17px;
align-items:center
}
#overview .section-heading h2{
font-family:var(--sans);
font-size:21px;
font-weight:600;
letter-spacing:-.025em;
line-height:1.3
}
#overview .section-intro{
margin-top:5px;
font-size:11px
}
.methodology .stats-strip{
margin-bottom:25px;
padding:19px 0
}
.methodology .stat strong{
font-size:25px
}
.section-heading{
display:flex;
align-items:flex-end;
gap:30px;
justify-content:space-between;
margin-bottom:30px
}
.section-heading .eyebrow{
margin-bottom:14px
}
.section-intro{
color:var(--muted);
font-size:13px;
line-height:1.75;
max-width:720px;
margin-top:14px
}
.download-link{
font-size:11px;
color:var(--teal);
white-space:nowrap;
text-underline-offset:5px;
align-self:flex-end;
padding-bottom:4px
}
.chart-panel{
background:white;
border:1px solid var(--line);
border-radius:14px;
padding:18px 22px 17px;
overflow:hidden
}
.chart-meta{
display:flex;
align-items:center;
justify-content:space-between;
gap:16px;
margin-bottom:9px
}
.chart-scale{
font-size:11px;
font-weight:500;
color:var(--muted);
margin-bottom:0
}
.chart-content{
padding-top:6px
}
.score-chart{
display:flex;
min-width:0;
height:auto;
gap:12px;
padding-right:6px
}
.axis{
width:26px;
flex-shrink:0;
display:flex;
flex-direction:column;
justify-content:space-between;
height:var(--plot-height);
font-size:10px;
color:#829087;
line-height:1
}
.axis span{
transform:translateY(-5px)
}
.axis span:last-child{
transform:translateY(5px)
}
.chart-body{
position:relative;
display:grid;
grid-template-columns:repeat(15,minmax(0,1fr));
gap:7px;
flex:1
}
.chart-grid{
position:absolute;
pointer-events:none;
top:0;
left:0;
right:0;
height:var(--plot-height);
border-top:1px solid #e8ede8;
background:repeating-linear-gradient(to top,#e8ede8 0,#e8ede8 1px,transparent 1px,transparent calc(var(--plot-height) / 4))
}
.chart-item{
position:relative;
display:flex;
flex-direction:column;
align-items:center;
min-width:0
}
.bar-visual{
display:block;
position:relative;
height:var(--plot-height);
width:100%;
flex-shrink:0;
transition:filter var(--motion-fast) ease;
text-decoration:none
}
.bar-visual:hover{
filter:brightness(1.06)
}
.bar-visual:focus-visible{
outline-offset:1px;
border-radius:6px
}
.bar-fill{
position:absolute;
bottom:0;
left:17%;
width:66%;
height:var(--score);
background:var(--bar-color);
border:1px solid var(--bar-edge);
border-radius:6px 6px 0 0;
opacity:.94
}
.bar-value{
position:absolute;
bottom:calc(var(--score) + 26px);
width:100%;
text-align:center;
font-size:13px;
font-weight:600;
line-height:1;
letter-spacing:-.03em;
font-variant-numeric:tabular-nums
}
.bar-ci{
position:absolute;
left:50%;
bottom:var(--ci-low);
height:var(--ci-range);
width:1px;
background:#25382e;
opacity:.5
}
.bar-ci:before,.bar-ci:after{
content:"";
position:absolute;
height:1px;
width:7px;
left:-3px;
background:#25382e
}
.bar-ci:before{
top:0
}
.bar-ci:after{
bottom:0
}
.chart-item>.provider-logo{
margin:12px auto 8px;
width:22px;
height:22px
}
.chart-model{
font-size:10px;
font-weight:500;
text-align:center;
line-height:1.35;
min-height:31px;
max-width:95%
}
.chart-item>.mode-chip{
margin-top:3px;
font-size:9px;
text-align:center;
line-height:1.35;
background:none;
border:0;
padding:0 1px
}
.chart-note{
padding-top:12px;
border-top:1px solid #edf1ed;
margin-top:5px;
max-width:950px
}
.result-count{
font-size:11px;
color:var(--muted);
white-space:nowrap
}
.ranking-toolbar{
display:flex;
justify-content:space-between;
gap:20px;
align-items:center;
margin-bottom:18px
}
.search-field{
display:flex;
align-items:center;
gap:11px;
border:1px solid var(--line);
border-radius:8px;
background:white;
padding:0 14px;
width:380px;
height:44px;
color:var(--muted)
}
.search-field:focus-within{
border-color:#8cb9a2
}
.search-field input{
outline:none;
border:0;
background:none;
flex:1;
min-width:0;
font-size:12px;
color:var(--ink);
height:100%
}
.search-field input:focus-visible{
outline:none
}
.search-field input::placeholder{
color:#819087
}
.sort-control{
display:flex;
gap:3px;
padding:4px;
border:1px solid var(--line);
border-radius:8px;
background:#edf2ec
}
.sort-control button{
border:0;
background:transparent;
font-size:11px;
padding:8px 16px;
border-radius:5px;
color:var(--muted);
line-height:1.5
}
.sort-control .is-active{
background:#fff;
color:var(--teal);
box-shadow:0 1px 3px #1b362511
}
.ranking-frame{
border:1px solid var(--line);
border-radius:12px;
background:#fff;
overflow:hidden
}
.ranking-table{
width:100%;
border-collapse:collapse
}
.ranking-table th{
font-weight:500;
text-align:left;
font-size:10px;
white-space:nowrap;
color:var(--muted);
padding:16px 18px;
border-bottom:1px solid var(--line);
background:#f0f5ef
}
.ranking-table td{
padding:14px 18px;
border-bottom:1px solid #eaf0e8;
vertical-align:middle;
font-size:13px
}
.ranking-table tr:last-child td{
border-bottom:0
}
.ranking-table tbody tr:hover{
background:#fafcf8
}
.ranking-table .rank-cell{
color:#809185;
font-size:11px;
width:70px
}
.model-button{
display:flex;
align-items:center;
gap:12px;
text-align:left;
border:0;
padding:0;
background:none;
min-width:0;
color:var(--ink);
line-height:1.4
}
.model-button strong{
display:block;
font-size:13px;
font-weight:500
}
.model-button small{
display:block;
color:var(--muted);
font-size:10px;
margin-top:4px
}
.model-button:hover strong{
color:var(--teal);
text-decoration:underline;
text-underline-offset:3px
}
.model-button .provider-logo{
width:22px;
height:22px
}
.ranking-table .mode-chip{
max-width:135px
}
.score-cell strong{
display:block;
font-size:19px;
font-weight:600;
line-height:1.2;
color:var(--teal);
letter-spacing:-.04em
}
.score-cell small{
display:block;
color:var(--muted);
font-size:9px;
margin-top:5px;
white-space:nowrap
}
.ranking-table .num{
white-space:nowrap;
font-size:12px
}
#empty-state{
text-align:center;
padding:40px 20px;
color:var(--muted)
}
.table-note{
margin-top:16px;
max-width:1060px
}
.thinking-grid{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:24px
}
.analysis-panel{
padding:26px;
background:#fff;
border:1px solid var(--line);
border-radius:12px
}
.analysis-panel h3{
margin-bottom:22px
}
.heat-table{
width:100%;
border-collapse:separate;
border-spacing:5px;
font-variant-numeric:tabular-nums;
font-size:13px
}
.heat-table th{
font-size:10px;
font-weight:500;
line-height:1.4;
text-align:center;
padding:0 3px 7px;
color:var(--muted)
}
.heat-table tbody th{
text-align:left;
width:98px;
padding-right:8px
}
.heat-table td{
padding:0;
text-align:center;
min-width:58px
}
.heat-cell{
background:rgba(36,124,95,var(--heat));
color:#113b2e;
border:0;
display:block;
min-height:47px;
width:100%;
font-size:15px;
font-weight:600;
border-radius:5px;
padding:10px 6px;
font-variant-numeric:tabular-nums
}
.heat-cell:hover{
outline:1px solid var(--teal);
outline-offset:1px
}
.heat-missing{
background:#f0f4ed;
border-radius:5px;
color:#98a29b
}
.heat-default th,.heat-default td{
border-top:12px solid white
}
.heat-default th{
font-weight:600
}
.heat-legend{
margin:17px 5px;
display:flex;
align-items:center;
justify-content:flex-end;
gap:10px;
font-size:10px;
color:var(--muted)
}
.heat-ramp{
height:8px;
width:92px;
border-radius:3px;
background:linear-gradient(90deg,rgba(36,124,95,.1),rgba(36,124,95,.86))
}
.switch-table{
width:100%;
border-collapse:collapse;
font-size:13px;
font-variant-numeric:tabular-nums
}
.switch-table th{
font-size:10px;
text-align:right;
font-weight:500;
color:var(--muted);
padding:5px 7px 16px
}
.switch-table td{
padding:18px 7px;
text-align:right;
border-top:1px solid #edf1eb;
font-size:13px
}
.switch-table tbody th{
text-align:left;
color:var(--ink);
font-size:12px;
border-top:1px solid #edf1eb;
padding:18px 7px;
white-space:nowrap
}
.switch-table button{
border:0;
padding:0;
background:none;
color:var(--ink);
font-size:13px;
font-variant-numeric:tabular-nums
}
.switch-table button:hover{
color:var(--teal);
text-decoration:underline;
text-underline-offset:4px
}
.delta{
font-weight:600
}
.positive{
color:var(--teal)
}
.negative{
color:#ad654e
}
.select-label{
display:block;
font-size:11px;
color:var(--muted);
margin-bottom:9px
}
#model-select{
display:block;
width:100%;
padding:13px 16px;
border:1px solid #cfdacf;
border-radius:8px;
background:#fff;
color:var(--ink);
font-size:13px;
margin-bottom:18px
}
.detail-panel{
border:1px solid var(--line);
border-radius:12px;
padding:30px;
background:#fff
}
.detail-summary{
display:flex;
justify-content:space-between;
align-items:center;
gap:30px;
border-bottom:1px solid #edf1eb;
padding-bottom:24px
}
.detail-model{
display:flex;
align-items:center;
gap:16px
}
.detail-model .provider-logo{
width:32px;
height:32px
}
.detail-model h3{
font-size:24px;
margin-bottom:7px
}
.detail-score{
text-align:right
}
.detail-score>strong{
display:block;
font-size:47px;
font-weight:500;
letter-spacing:-.07em;
line-height:1.1;
margin-top:5px;
color:var(--teal)
}
.detail-score>span{
font-size:10px;
color:var(--muted);
display:block;
margin-top:9px
}
.detail-grid{
display:grid;
grid-template-columns:1.35fr 1fr;
gap:55px;
padding-top:26px
}
.category-row{
display:grid;
grid-template-columns:148px 1fr 48px;
gap:16px;
align-items:center;
margin-bottom:22px
}
.category-label{
font-size:11px;
line-height:1.4
}
.category-label small{
display:block;
font-size:9px;
color:var(--muted);
margin-top:6px
}
.category-track{
height:7px;
background:#eaf1e7;
border-radius:10px;
overflow:hidden
}
.category-track span{
display:block;
height:100%;
background:#579777;
border-radius:10px
}
.category-row strong{
font-size:13px;
font-weight:600;
text-align:right
}
.repeat-diagnostics>div{
display:flex;
justify-content:space-between;
align-items:center;
gap:18px;
padding:0 0 17px;
margin-bottom:17px;
border-bottom:1px solid #edf1eb
}
.repeat-diagnostics span{
font-size:11px;
color:var(--muted)
}
.repeat-diagnostics strong{
font-size:21px;
font-weight:500;
font-variant-numeric:tabular-nums;
letter-spacing:-.04em
}
.provenance{
margin-top:26px;
border-top:1px solid #edf1eb;
padding-top:17px;
font-size:11px;
color:var(--muted)
}
.provenance summary{
cursor:pointer;
color:var(--teal)
}
.provenance code{
display:block;
overflow-wrap:anywhere;
padding:14px 0;
font-size:10px;
color:var(--ink)
}
.provenance p{
margin-top:10px;
line-height:1.75
}
.provenance a{
text-underline-offset:3px;
color:var(--teal)
}
.scoring-panel{
background:#fff;
border:1px solid var(--line);
border-radius:12px;
padding:30px
}
.formula{
display:flex;
align-items:center;
justify-content:center;
gap:14px;
font-family:Georgia,serif;
font-size:25px;
line-height:1.5;
padding:27px 10px;
margin:23px 0 16px;
border:1px solid #e5eee2;
border-radius:8px;
background:#f6faf2;
white-space:nowrap
}
.fraction{
display:inline-flex;
flex-direction:column;
align-items:center;
line-height:1.35;
vertical-align:middle;
font-size:.85em
}
.fraction>span:first-child{
border-bottom:1px solid currentColor;
padding:0 5px 3px
}
.fraction>span:last-child{
padding-top:3px
}
.type-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:14px;
margin:26px 0
}
.type-card{
border:1px solid #e8eee4;
border-radius:8px;
padding:18px 20px;
font-size:11px;
color:var(--muted)
}
.type-card>span:first-child{
display:block;
min-height:32px;
line-height:1.4
}
.type-card strong{
display:block;
color:var(--ink);
font-size:35px;
font-weight:500;
letter-spacing:-.05em;
line-height:1.4;
margin-top:8px
}
.type-card strong small{
font-size:10px;
letter-spacing:0;
font-weight:400;
margin-left:9px;
color:var(--muted)
}
.type-card>span:last-child{
display:block;
margin-top:8px;
font-size:10px
}
.scoring-panel>p{
margin-top:16px;
font-size:12px;
line-height:1.8;
color:var(--muted)
}
.method-grid{
display:grid;
grid-template-columns:1.25fr 1fr;
gap:60px;
margin-top:45px
}
.method-grid h3{
margin-bottom:17px
}
.method-grid p{
font-size:12px;
color:var(--muted);
line-height:1.85;
margin-top:15px
}
.method-grid .budget-note{
color:var(--teal);
font-size:11px
}
.audit-card{
background:#edf5e9;
border:1px solid #dfebd8;
border-radius:12px;
padding:29px
}
.audit-number{
font-size:64px;
letter-spacing:-.065em;
line-height:1.2;
color:#306442;
font-weight:500
}
.audit-number span{
font-size:32px;
letter-spacing:-.03em
}
.audit-denominator{
font-size:10px!important;
color:#60765f!important
}
.audit-card .text-link{
display:inline-block;
margin-top:16px
}
.methodology{
padding-bottom:75px
}
footer{
border-top:1px solid var(--line);
background:#eef3ed;
padding:34px 0
}
.footer-inner{
display:flex;
align-items:center;
justify-content:space-between;
gap:24px;
font-size:11px
}
.footer-inner p{
margin:0
}
.footer-inner .fine-print{
margin-top:5px;
font-size:10px
}
.footer-inner nav{
display:flex;
gap:23px;
flex-wrap:wrap;
font-size:11px
}
.footer-inner nav a{
text-decoration:none;
color:var(--muted)
}
.footer-inner nav a:hover{
color:var(--teal)
}
html[lang="zh-CN"] h1,html[lang="zh-CN"] h2{
font-family:var(--sans);
font-weight:500;
letter-spacing:-.035em;
line-height:1.25
}
html[lang="zh-CN"] h1{
font-size:clamp(27px,2.65vw,34px)
}
html[lang="zh-CN"] h2{
font-size:clamp(26px,2.4vw,31px)
}
html[lang="zh-CN"] .eyebrow{
letter-spacing:.08em
}
@media(min-width:701px) and (max-width:1000px){
.ranking-frame{
overflow-x:auto
}
.ranking-table{
min-width:830px
}
.stat{
padding:0 14px;
gap:10px
}
.stat strong{
font-size:29px
}
.stat span{
font-size:10px
}
}
@media(max-width:1000px){
.primary-nav{
display:none
}
.leaders-card{
padding:23px
}
.leader{
gap:11px
}
.leader-model strong{
font-size:12px
}
.leader-score{
font-size:24px
}
.thinking-grid{
gap:17px
}
.analysis-panel{
padding:20px
}
.detail-grid{
gap:25px
}
.category-row{
grid-template-columns:125px 1fr 46px;
gap:12px
}
.method-grid{
gap:34px
}
.type-card{
padding:16px
}
.type-card strong small{
display:block;
margin-left:0;
margin-top:4px
}
.heat-table tbody th{
width:86px
}
.heat-cell{
font-size:13px
}
.heat-table th{
font-size:9px
}
}
@media(max-width:760px){
:root{
--plot-height:170px
}
.hero{
padding:22px 0 25px
}
.hero h1{
font-size:30px
}
.hero-copy .eyebrow{
font-size:9px
}
.hero-body{
max-width:540px
}
.leaders-card{
padding:23px
}
.leader-model strong{
font-size:14px
}
.leader-score{
font-size:27px
}
.leader{
padding:18px 0
}
.leaders-card>.fine-print{
font-size:11px
}
.stats-strip{
grid-template-columns:repeat(2,1fr);
row-gap:25px;
padding:24px 0
}
.stat{
padding:0 20px;
gap:16px
}
.stat:nth-child(2){
border-right:0
}
.stat:nth-child(3){
padding-left:0
}
.stat strong{
font-size:33px
}
.stat span{
font-size:11px;
max-width:100px
}
.section{
padding-top:49px
}
.section-heading{
margin-bottom:23px;
gap:18px;
align-items:flex-start
}
.section-heading .eyebrow{
margin-bottom:11px
}
.section-intro{
font-size:12px
}
.section-heading>.download-link{
align-self:flex-start;
margin-top:24px
}
.chart-panel{
padding:20px 16px 17px
}
.chart-note{
font-size:11px
}
.thinking-grid{
grid-template-columns:1fr;
gap:20px
}
.analysis-panel{
padding:24px
}
.heat-table tbody th{
width:105px
}
.heat-table th{
font-size:11px
}
.heat-cell{
font-size:16px
}
.switch-table tbody th{
font-size:13px
}
.switch-table td,.switch-table button{
font-size:14px
}
.detail-panel{
padding:23px
}
.detail-grid{
grid-template-columns:1fr;
gap:30px
}
.category-row{
grid-template-columns:145px 1fr 50px;
gap:15px
}
.detail-model h3{
font-size:21px
}
.detail-score>strong{
font-size:40px
}
.detail-score>span{
max-width:160px
}
.repeat-diagnostics{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:15px
}
.repeat-diagnostics>div{
flex-direction:column;
gap:10px;
align-items:flex-start;
margin:0;
padding-bottom:16px
}
.repeat-diagnostics span{
font-size:10px;
line-height:1.5
}
.type-grid{
grid-template-columns:repeat(2,1fr)
}
.type-card strong small{
display:inline;
margin-left:8px
}
.method-grid{
grid-template-columns:1fr;
gap:27px
}
.scoring-panel{
padding:23px
}
.methodology{
padding-bottom:49px
}
.footer-inner{
align-items:flex-start;
flex-direction:column;
gap:23px
}
.formula{
font-size:23px
}
}
@media(max-width:700px){
.ranking-toolbar{
flex-direction:column;
align-items:stretch;
gap:12px
}
.search-field{
width:100%
}
.sort-control{
align-self:flex-end
}
.ranking-table,.ranking-table tbody{
display:block
}
.ranking-table thead{
position:absolute;
clip:rect(0 0 0 0);
width:1px;
height:1px;
overflow:hidden;
white-space:nowrap
}
.ranking-table tbody tr{
display:grid;
grid-template-columns:27px minmax(0,1fr) 87px;
gap:7px 11px;
padding:18px 16px;
border-bottom:1px solid #eaf0e8
}
.ranking-table td{
padding:0;
border:0
}
.ranking-table tr:last-child{
border-bottom:0
}
.ranking-table .rank-cell{
grid-column:1;
grid-row:1/4;
width:auto;
font-size:10px;
padding-top:3px
}
.ranking-table td:nth-child(2){
grid-column:2;
grid-row:1
}
.model-button{
gap:10px;
align-items:flex-start
}
.model-button strong{
font-size:12px;
line-height:1.45
}
.model-button small{
font-size:9px
}
.model-button .provider-logo{
width:20px;
height:20px;
margin-top:2px
}
.ranking-table td:nth-child(3){
grid-column:2;
grid-row:2;
padding-left:30px
}
.ranking-table .mode-chip{
font-size:9px;
padding:2px 6px
}
.ranking-table .score-cell{
grid-column:3;
grid-row:1/3;
text-align:right;
padding-top:2px
}
.ranking-table .score-cell strong{
font-size:23px
}
.ranking-table .score-cell small{
font-size:9px;
margin-top:7px
}
.ranking-table td:nth-child(5){
grid-column:2;
grid-row:3;
padding-left:30px;
margin-top:3px;
font-size:11px
}
.ranking-table td:nth-child(6){
grid-column:3;
grid-row:3;
text-align:right;
margin-top:3px;
font-size:11px
}
.ranking-table td[data-mobile-label]:before{
content:attr(data-mobile-label) " ";
color:var(--muted);
font-size:9px
}
.ranking-table tbody tr:hover{
background:white
}
.table-note{
font-size:11px
}
}
@media(max-width:480px){
.site-header{
height:64px
}
.header-inner{
gap:10px
}
.brand{
gap:8px
}
.brand-symbol{
width:30px;
height:30px
}
.brand-wordmark{
width:124px;
height:20px
}
.header-actions{
gap:12px;
font-size:11px
}
.github-link{
display:none
}
.language-toggle button{
padding:7px 8px
}
.hero h1{
font-size:27px
}
.hero-body{
font-size:13px
}
.hero-links{
gap:17px
}
.button{
font-size:11px;
padding:11px 16px
}
.text-link{
font-size:11px
}
.section-heading{
display:block
}
.section-heading>.download-link{
display:inline-block;
margin-top:15px
}
.result-count{
display:block;
margin-top:13px
}
.stats-strip{
row-gap:22px
}
.stat{
gap:12px
}
.stat strong{
font-size:31px
}
.stat span{
font-size:10px
}
.leader{
gap:11px
}
.leader-score{
font-size:25px
}
.leader-model strong{
font-size:13px
}
.leaders-card{
padding:21px
}
.section-heading h2{
font-size:28px
}
.analysis-panel{
padding:20px 14px
}
.analysis-panel h3{
padding-left:5px;
font-size:17px
}
.heat-table tbody th{
width:91px
}
.heat-table th{
font-size:9px
}
.heat-cell{
font-size:13px;
min-height:43px
}
.switch-table th,.switch-table td{
padding-left:5px;
padding-right:5px
}
.switch-table tbody th{
font-size:11px
}
.switch-table td,.switch-table button{
font-size:12px
}
.detail-summary{
flex-direction:column;
align-items:flex-start;
gap:21px
}
.detail-score{
text-align:left;
display:flex;
flex-wrap:wrap;
align-items:baseline;
gap:9px;
width:100%
}
.detail-score>.eyebrow{
width:100%
}
.detail-score>strong{
margin:0;
font-size:42px
}
.detail-score>span{
max-width:180px
}
.detail-model h3{
font-size:22px
}
.detail-model .provider-logo{
width:28px;
height:28px
}
.category-row{
grid-template-columns:113px minmax(0,1fr) 43px;
gap:10px
}
.category-label{
font-size:10px
}
.category-row strong{
font-size:12px
}
.repeat-diagnostics strong{
font-size:19px
}
.repeat-diagnostics{
gap:11px
}
.scoring-panel{
padding:21px 17px
}
.formula{
font-size:18px;
gap:10px;
padding:21px 5px
}
.type-grid{
gap:10px
}
.type-card{
padding:14px 12px
}
.type-card strong{
font-size:30px
}
.type-card strong small{
font-size:9px;
margin-left:6px
}
.type-card>span:first-child{
font-size:10px
}
.type-card>span:last-child{
font-size:9px
}
.audit-card{
padding:23px
}
.audit-number{
font-size:58px
}
.eyebrow{
font-size:9px
}
html[lang="zh-CN"] h1{
font-size:26px
}
html[lang="zh-CN"] .section-heading h2{
font-size:28px
}
.footer-inner nav{
gap:20px
}
}
@media(prefers-reduced-motion:reduce){
html{
scroll-behavior:auto
}
*{
animation-duration:.01ms!important;
transition-duration:.01ms!important;
transition-delay:0ms!important
}
}

/* Retain the supplied white Kimi mark on its dark brand background. */
.provider-logo[src$="/kimi.svg"]{background:#141c2b;border-radius:5px;padding:2px}
.mobile-section-nav{display:none}
@media(max-width:1000px){
  html{scroll-padding-top:130px}
  .mobile-section-nav{display:flex;align-items:center;gap:25px;position:sticky;top:70px;z-index:20;background:var(--background);border-bottom:1px solid var(--line);padding:13px 0;overflow-x:auto;white-space:nowrap;font-size:11px}
  .mobile-section-nav a{text-decoration:none;color:var(--muted)}
  .mobile-section-nav a:hover{color:var(--teal)}
}
@media(max-width:480px){
  html{scroll-padding-top:120px}
  .mobile-section-nav{top:64px;gap:24px}
  html[lang="zh-CN"] h1{font-size:clamp(23px,6.4vw,26px)}
}

@media(max-width:360px){.formula{font-size:16px;gap:8px}.header-actions{gap:10px}html[lang="zh-CN"] .section-heading h2{font-size:24px}}

/* Keep the mission readable while the chart begins in the first viewport. */
@media(max-width:760px){
  .hero-copy{max-width:610px}
  #overview .section-heading{display:flex;gap:18px;align-items:center;margin-bottom:14px}
  #overview .section-heading h2{font-size:19px}
  #overview .section-heading>div{min-width:0}
  #overview .section-intro{font-size:10px;line-height:1.6}
  #overview .download-link{margin:0;align-self:center;font-size:10px}
  .chart-meta{margin-bottom:7px}
  .methodology .stat strong{font-size:25px}
}
@media(max-width:360px){
  .chart-panel{padding-left:13px;padding-right:13px}
  #overview .section-heading{gap:10px}
}

/* Narrow screens use a full, naturally flowing bar chart without an inner scroll area. */
@media(max-width:1000px){
  .score-chart{
    --chart-icon:24px;
    --chart-label:122px;
    --chart-gap:12px;
    --chart-values:38px;
    --chart-label-offset:calc(var(--chart-icon) + var(--chart-label) + var(--chart-gap) * 2);
    display:block;
    padding-right:0
  }
  .axis{
    position:relative;
    display:block;
    width:calc(100% - var(--chart-label-offset) - var(--chart-values));
    height:14px;
    margin:0 0 9px var(--chart-label-offset)
  }
  .axis span,.axis span:last-child{
    position:absolute;
    top:0;
    transform:translateX(-50%)
  }
  .axis span:nth-child(1){left:100%}
  .axis span:nth-child(2){left:75%}
  .axis span:nth-child(3){left:50%}
  .axis span:nth-child(4){left:25%}
  .axis span:nth-child(5){left:0}
  .chart-body{grid-template-columns:minmax(0,1fr);gap:12px}
  .chart-grid{display:none}
  .chart-item{
    display:grid;
    grid-template-columns:var(--chart-icon) var(--chart-label) minmax(0,1fr);
    column-gap:var(--chart-gap);
    row-gap:2px;
    align-items:center
  }
  .chart-item>.provider-logo{
    grid-column:1;
    grid-row:1/3;
    width:var(--chart-icon);
    height:var(--chart-icon);
    margin:0
  }
  .chart-model{
    grid-column:2;
    grid-row:1;
    justify-self:start;
    min-height:0;
    max-width:100%;
    text-align:left;
    font-size:11px;
    line-height:1.3
  }
  .chart-item>.mode-chip{
    grid-column:2;
    grid-row:2;
    justify-self:start;
    margin:0;
    padding:0;
    text-align:left;
    font-size:9px;
    line-height:1.25
  }
  .bar-visual{
    grid-column:3;
    grid-row:1/3;
    align-self:center;
    width:calc(100% - var(--chart-values));
    height:32px;
    background:repeating-linear-gradient(to right,#e8ede8 0,#e8ede8 1px,transparent 1px,transparent 25%);
    border-right:1px solid #e8ede8
  }
  .bar-fill{
    left:0;
    top:7px;
    bottom:auto;
    width:var(--score);
    height:18px;
    border-radius:0 4px 4px 0
  }
  .bar-value{
    left:calc(100% + 8px);
    top:50%;
    bottom:auto;
    width:30px;
    transform:translateY(-50%);
    text-align:right;
    font-size:12px
  }
  .bar-ci{
    left:var(--ci-low);
    top:16px;
    bottom:auto;
    width:var(--ci-range);
    height:1px
  }
  .bar-ci:before,.bar-ci:after{
    top:-3px;
    bottom:auto;
    width:1px;
    height:7px
  }
  .bar-ci:before{left:0}
  .bar-ci:after{left:auto;right:0}
  .chart-note{margin-top:16px}
}
@media(max-width:600px){
  .score-chart{--chart-icon:20px;--chart-label:92px;--chart-gap:8px;--chart-values:34px}
  .bar-value{left:calc(100% + 6px);width:28px;font-size:11px}
  .axis{font-size:9px}
}

.chart-interval{margin:0;color:var(--muted);font-size:11px}
.heat-legend{margin-bottom:0}
.repeat-diagnostics>div:last-child{margin-bottom:0}
.formula .fraction>span:first-child{font-family:var(--font-sans,Inter,sans-serif);font-size:.7em;letter-spacing:0}

/* Interaction motion: bounded travel, stable geometry and interruptible states. */
.sort-control,.language-toggle{position:relative;isolation:isolate}
.segmented-indicator{
  position:absolute;top:0;left:0;z-index:-1;pointer-events:none;
  border-radius:5px;background:#fff;box-shadow:0 1px 3px #1b362511
}
.language-toggle .segmented-indicator{border-radius:30px;background:#e4eee6;box-shadow:none}
.motion-ready .segmented-indicator{
  transition:transform var(--motion-medium) var(--motion-ease),width var(--motion-medium) var(--motion-ease),height var(--motion-medium) var(--motion-ease)
}
.has-indicator button.is-active{background:transparent;box-shadow:none}
.sort-control button,.language-toggle button{
  position:relative;transition:color var(--motion-fast) ease
}
.ranking-frame{overflow-anchor:none}
.ranking-table tbody tr{transition:background-color var(--motion-fast) ease}
.category-track span{transition:width 340ms var(--motion-ease)}
.provenance{overflow:hidden}
.primary-nav a,.header-actions a,.mobile-section-nav a,.download-link,.text-link,
.model-button strong,.provenance summary,.chart-model{
  transition:color var(--motion-fast) ease,opacity var(--motion-fast) ease
}
.search-field,select{
  transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease
}
.search-field:focus-within{box-shadow:0 0 0 3px #176f540c}
.bar-fill{transition:opacity var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.heat-cell{transition:filter var(--motion-fast) ease,box-shadow var(--motion-fast) ease}
.switch-table button{transition:background-color var(--motion-fast) ease,color var(--motion-fast) ease}
@media(hover:hover){
  .chart-item:hover .bar-fill{opacity:1;box-shadow:0 0 0 1px var(--bar-edge)}
  .chart-item:hover .chart-model{color:var(--teal)}
  .heat-cell:hover{outline:none;filter:brightness(1.035);box-shadow:0 0 0 1px var(--teal)}
  .download-link:hover,.text-link:hover{opacity:.72}
}

@media(max-width:760px){
  .hero{padding:28px 0 32px}
  .hero-contrast{font-size:15px}
  .hero h1{margin:10px 0 22px}
  .capability-formula{font-size:16px;column-gap:8px}
  .capability-note,.mission-note{font-size:14px}
  .hero-mission{font-size:16px;margin-top:22px}
  .hero-mission .mission-note{margin-top:8px}
}
@media(max-width:600px){
  .hero-copy{max-width:440px}
  .hero-capability{gap:10px}
  .capability-formula{display:grid;grid-template-columns:repeat(2,max-content);column-gap:18px;row-gap:5px}
  .capability-formula span:first-child{grid-column:1/-1;justify-self:center}
}