opencode/packages/stats/app/src/routes/index.css
opencode-agent[bot] e916b99742
chore: merge dev into v2 (#37370)
Co-authored-by: Aiden Cline <aidenpcline@gmail.com>
Co-authored-by: Adam <2363879+adamdotdevin@users.noreply.github.com>
Co-authored-by: opencode-agent[bot] <opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: Aarav Sareen <96787824+arvsrn@users.noreply.github.com>
Co-authored-by: Brendan Allan <git@brendonovich.dev>
Co-authored-by: James Long <longster@gmail.com>
Co-authored-by: James Long <jlongster@users.noreply.github.com>
Co-authored-by: opencode-agent[bot] <219766164+opencode-agent[bot]@users.noreply.github.com>
Co-authored-by: Jay <53023+jayair@users.noreply.github.com>
Co-authored-by: Brendan Allan <14191578+Brendonovich@users.noreply.github.com>
Co-authored-by: Luke Parker <10430890+Hona@users.noreply.github.com>
Co-authored-by: Dustin Deus <deusdustin@gmail.com>
Co-authored-by: Aiden Cline <63023139+rekram1-node@users.noreply.github.com>
Co-authored-by: 冯基魁 <56265583+fengjikui@users.noreply.github.com>
Co-authored-by: opencode <opencode@sst.dev>
Co-authored-by: Frank <frank@anoma.ly>
Co-authored-by: Aiden Cline <rekram1-node@users.noreply.github.com>
Co-authored-by: Kit Langton <kit.langton@gmail.com>
Co-authored-by: David Hill <1879069+iamdavidhill@users.noreply.github.com>
Co-authored-by: usrnk1 <7547651+usrnk1@users.noreply.github.com>
Co-authored-by: Victor Navarro <vn4varro@gmail.com>
Co-authored-by: Dax Raad <d@ironbay.co>
Co-authored-by: Dax <mail@thdxr.com>
Co-authored-by: Nabs <nabil@instafork.com>
Co-authored-by: Vladimir Glafirov <vglafirov@gitlab.com>
Co-authored-by: AidenGeunGeun <eastlandwyvern@gmail.com>
Co-authored-by: Mark <geraint0923@users.noreply.github.com>
Co-authored-by: Jay <air@live.ca>
Co-authored-by: BB84 <110078428+BB-84C@users.noreply.github.com>
2026-07-16 15:44:26 -05:00

8566 lines
212 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
unicode-range:
U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E,
U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Medium-Latin1.woff2") format("woff2");
unicode-range:
U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E,
U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 600;
font-display: swap;
src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-SemiBold-Latin1.woff2") format("woff2");
unicode-range:
U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E,
U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 700;
font-display: swap;
src: url("@ibm/plex/IBM-Plex-Mono/fonts/split/woff2/IBMPlexMono-Bold-Latin1.woff2") format("woff2");
unicode-range:
U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E,
U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212, U+FB01-FB02;
}
body {
min-width: 320px;
margin: 0;
}
[data-page="stats"] {
color-scheme: light;
--color-background: #ffffff;
--color-background-weak: #fafafa;
--color-background-weak-hover: #eeeeee;
--color-background-strong: #161616;
--color-background-strong-hover: #242424;
--color-text: #5c5c5c;
--color-text-weak: #808080;
--color-text-strong: #161616;
--color-text-inverted: #ffffff;
--color-border-weak: #0000001a;
--stats-bg: #ffffff;
--stats-layer: #fafafa;
--stats-layer-2: #eeeeee;
--stats-line: #0000001a;
--stats-line-strong: #00000033;
--stats-text: #161616;
--stats-muted: #5c5c5c;
--stats-faint: #808080;
--stats-theme-icon-active: #3a3a3a;
--stats-accent: #3b5cf6;
--stats-accent-text: #6c7dff;
--stats-bar-idle: #d4d4d4;
--stats-dot: #d4d4d4;
--stats-hero-muted: #5c5c5c;
--stats-hero-pattern: #eeeeee;
--stats-logo-bg: #161616;
--stats-logo-fill: #454545;
--stats-logo-stroke: #e2e2e2;
--stats-page-padding: 5rem;
--stats-section-padding: 6rem;
min-height: 100vh;
display: flex;
flex-direction: column;
font-synthesis: none;
overflow-x: clip;
padding-bottom: 0;
background: var(--stats-bg);
}
[data-page="stats"] [hidden] {
display: none !important;
}
[data-page="stats"][data-layout="compare-detail"] {
/* The table contains its own wide rows; keep the page itself out of the horizontal scroll chain. */
overflow-x: visible;
}
[data-page="stats"] section[id],
[data-page="stats"] [data-component="leaderboard"][id] {
scroll-margin-top: 88px;
}
[data-page="stats"] [data-component="content"] {
color: var(--stats-text);
font-family:
"IBM Plex Mono",
var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}
[data-page="stats"] [data-component="container"] {
box-sizing: border-box;
width: 100%;
max-width: 80rem;
margin: 0 auto;
}
[data-page="stats"] [data-component="top"] {
position: sticky;
top: 0;
z-index: 10;
box-sizing: border-box;
width: 100%;
color: var(--stats-text);
background: var(--stats-bg);
font-family:
"IBM Plex Mono",
var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}
[data-page="stats"] [data-component="top"] * {
box-sizing: border-box;
}
[data-page="stats"] [data-slot="header-bar"] {
display: flex;
align-items: center;
gap: 16px;
min-height: 72px;
padding: 20px 20px 20px 24px;
overflow: hidden;
}
[data-page="stats"] [data-component="top"] a {
text-decoration: none;
}
[data-page="stats"] [data-component="top"] a:hover {
text-decoration: none;
}
[data-page="stats"] [data-slot="brand"] {
flex: 0 0 auto;
min-width: 0;
display: flex;
align-items: center;
margin-right: auto;
color: var(--stats-text);
}
[data-page="stats"] [data-slot="stats-wordmark"] {
display: block;
flex-shrink: 0;
width: 66px;
height: 20px;
}
[data-page="stats"] [data-component="section-nav"] {
display: none;
align-items: center;
justify-content: center;
min-width: 0;
}
[data-page="stats"] [data-component="section-nav"] ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}
[data-page="stats"] [data-component="section-nav"] a {
display: flex;
align-items: center;
justify-content: center;
height: 32px;
padding: 0 15px;
color: var(--stats-muted);
font-size: 13px;
line-height: 1;
white-space: nowrap;
}
[data-page="stats"] [data-component="section-nav"] a:hover {
color: var(--stats-text);
}
[data-page="stats"] [data-slot="header-actions"] {
flex: 0 0 auto;
display: flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
}
[data-page="stats"] [data-slot="header-button"],
[data-page="stats"] [data-slot="menu-button"] {
position: relative;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
overflow: hidden;
margin: 0;
border: 0;
border-radius: 0;
appearance: none;
font: inherit;
font-size: 13px;
line-height: 1.1;
cursor: pointer;
}
[data-page="stats"] [data-slot="header-button"]::before,
[data-page="stats"] [data-slot="menu-button"]::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 16px;
pointer-events: none;
content: "";
background: linear-gradient(180deg, #ffffff00 0%, #ffffff12 100%);
}
[data-page="stats"] [data-slot="header-button"] {
padding: 0 12px;
}
[data-page="stats"] [data-slot="header-button"] strong,
[data-page="stats"] [data-slot="header-button"] span,
[data-page="stats"] [data-slot="menu-button"] svg {
position: relative;
z-index: 1;
}
[data-page="stats"] [data-slot="header-button"] strong {
font-weight: 500;
white-space: nowrap;
}
[data-page="stats"] [data-slot="header-button"][data-variant="neutral"] {
display: none;
gap: 6px;
color: #161616;
background: #ffffff;
box-shadow:
0 0 0 0 #00000024,
0 0 0 0.5px #00000024,
0 1px 1.5px 0 #0000001a;
}
[data-page="stats"] [data-slot="header-button"][data-variant="neutral"] span {
color: #5c5c5c;
font-weight: 400;
font-variant-numeric: tabular-nums;
}
[data-page="stats"] [data-slot="header-button"][data-variant="contrast"] {
gap: 8px;
color: #ffffff;
background: #242424;
box-shadow:
0 0 0 0 #00000000,
0 0 0 0.5px #3a3a3a,
0 1px 1.5px 0 #00000033,
inset 0 -1px 2px 0 #0000000f,
inset 0 1px 2px 0 #ffffff24;
}
[data-page="stats"] [data-slot="menu-button"] {
display: inline-flex;
width: 32px;
padding: 0;
color: #3a3a3a;
background: #ffffff;
box-shadow:
0 0 0 0 #00000024,
0 0 0 0.5px #00000024,
0 1px 1.5px 0 #0000001a;
}
[data-page="stats"] [data-slot="header-button"]:focus-visible,
[data-page="stats"] [data-slot="menu-button"]:focus-visible,
[data-page="stats"] [data-component="section-nav"] a:focus-visible,
[data-page="stats"] [data-slot="mobile-menu-item"]:focus-visible,
[data-page="stats"] [data-slot="brand"]:focus-visible {
outline: 2px solid var(--stats-accent);
outline-offset: 2px;
}
[data-page="stats"] [data-slot="mobile-menu"] {
position: fixed;
top: 72px;
right: 0;
bottom: 0;
left: 0;
z-index: 9;
display: none;
overflow: auto;
background: var(--stats-bg);
border-top: 1px solid var(--stats-line);
}
[data-page="stats"] [data-menu-open="true"] [data-slot="mobile-menu"]:not([hidden]) {
display: block;
}
[data-page="stats"] [data-slot="mobile-menu-item"] {
display: flex;
align-items: center;
gap: 12px;
min-height: 65px;
padding: 24px;
color: var(--stats-text);
border-bottom: 1px solid var(--stats-line);
font-size: 13px;
line-height: 16px;
white-space: nowrap;
}
[data-page="stats"] [data-slot="mobile-menu-item"]:hover {
color: var(--stats-text);
background: var(--stats-layer);
}
[data-page="stats"] [data-slot="mobile-menu-item"] strong {
font-weight: 400;
}
[data-page="stats"] [data-slot="mobile-menu-item"] span {
min-width: 0;
overflow: hidden;
color: var(--stats-muted);
font-variant-numeric: tabular-nums;
text-overflow: ellipsis;
}
[data-page="stats"] [data-component="footer"] {
position: relative;
display: grid;
gap: 56px;
box-sizing: border-box;
min-height: 0;
padding: 112px clamp(32px, 4vw, 48px) 24px;
color: var(--stats-text);
font-family:
"IBM Plex Mono",
var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
font-size: 11px;
}
[data-page="stats"] [data-slot="footer-grid"] {
display: grid;
grid-template-columns: 120px repeat(4, minmax(0, 1fr));
gap: 72px;
align-items: start;
}
[data-page="stats"] [data-slot="footer-mark"] {
display: block;
width: fit-content;
color: var(--stats-text);
}
[data-page="stats"] [data-slot="footer-mark"] [data-slot="opencode-mark"] {
display: block;
width: 40px;
height: 40px;
}
[data-page="stats"] [data-slot="footer-column"] {
display: grid;
align-content: start;
gap: 18px;
min-width: 0;
}
[data-page="stats"] [data-slot="footer-column"] h2 {
color: var(--stats-text);
font-size: 11px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="footer-column"] nav {
display: grid;
gap: 12px;
}
[data-page="stats"] [data-slot="footer-column"] a,
[data-page="stats"] [data-slot="footer-column"] p {
color: var(--stats-text);
font-size: 11px;
font-weight: 400;
line-height: 1.5;
text-decoration: none;
}
[data-page="stats"] [data-slot="footer-column"] a,
[data-page="stats"] [data-slot="footer-column"] p,
[data-page="stats"] [data-slot="footer-bottom"] {
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="footer-column"] a:hover {
color: var(--stats-text);
text-decoration: none;
}
[data-page="stats"] [data-slot="subscribe-button"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: fit-content;
height: 28px;
margin: 0;
padding: 0 12px;
border: 1px solid var(--stats-line);
border-radius: 0;
appearance: none;
background: var(--stats-bg);
color: var(--stats-text) !important;
font: inherit;
font-size: 11px;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="subscribe-button"]:hover {
border-color: var(--stats-line-strong);
background: var(--stats-layer);
}
[data-page="stats"] [data-slot="subscribe-button"]:focus-visible,
[data-page="stats"] [data-slot="theme-option"]:focus-visible,
[data-page="stats"] [data-component="subscribe-modal"] button:focus-visible,
[data-page="stats"] [data-component="subscribe-modal"] input:focus-visible {
outline: 2px solid var(--stats-accent);
outline-offset: 2px;
}
[data-page="stats"] [data-component="subscribe-modal"] {
position: fixed;
inset: 0;
z-index: 80;
display: grid;
place-items: center;
box-sizing: border-box;
padding: 8px;
color: var(--stats-text);
font-family:
"IBM Plex Mono",
var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
}
[data-page="stats"] [data-slot="modal-scrim"] {
position: absolute;
inset: 0;
background: #00000066;
backdrop-filter: blur(2px);
}
[data-page="stats"] [data-slot="modal-panel"] {
position: relative;
z-index: 1;
width: min(374px, calc(100vw - 16px));
max-height: calc(100dvh - 16px);
overflow: auto;
background: #fafafa;
box-shadow:
0 0 0 0.5px #0000001f,
0 4px 8px #00000014,
0 8px 16px #0000000a;
}
[data-page="stats"] [data-slot="modal-brand"] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 122px;
background: #242424;
color: #ffffff;
}
[data-page="stats"] [data-slot="modal-logo"] {
display: block;
width: 234px;
height: 42px;
}
[data-page="stats"] [data-slot="modal-close"] {
position: absolute;
top: 0;
right: 0;
display: grid;
place-items: center;
width: 32px;
height: 32px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
appearance: none;
background: transparent;
color: #808080;
cursor: pointer;
}
[data-page="stats"] [data-slot="modal-close"]:hover {
background: #ffffff1a;
}
[data-page="stats"] [data-slot="modal-body"] {
display: grid;
gap: 24px;
padding: 24px 12px 12px;
background: #fafafa;
}
[data-page="stats"] [data-slot="modal-intro"] {
display: grid;
gap: 4px;
text-align: center;
}
[data-page="stats"] [data-slot="modal-intro"] h2 {
color: #161616;
font-size: 16px;
font-weight: 500;
line-height: 24px;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="modal-intro"] p {
color: #5c5c5c;
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
[data-page="stats"] [data-slot="subscribe-form"] {
display: grid;
gap: 12px;
}
[data-page="stats"] [data-slot="subscribe-form"] input,
[data-page="stats"] [data-slot="subscribe-form"] button {
box-sizing: border-box;
width: 100%;
height: 40px;
margin: 0;
border-radius: 0;
appearance: none;
font: inherit;
font-size: 13px;
line-height: 1;
}
[data-page="stats"] [data-slot="subscribe-form"] input {
padding: 0 12px;
border: 0;
background: #ffffff;
color: #161616;
box-shadow:
0 0 0 0.5px #00000024,
0 1px 1.5px #0000001a;
}
[data-page="stats"] [data-slot="subscribe-form"] input::placeholder {
color: #808080;
}
[data-page="stats"] [data-slot="subscribe-form"] button {
position: relative;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: 0;
background: #242424;
color: #ffffff;
font-weight: 500;
cursor: pointer;
box-shadow:
0 0 0 0.5px #3a3a3a,
0 1px 1.5px #00000033,
inset 0 -1px 2px #0000000f,
inset 0 1px 2px #ffffff24;
}
[data-page="stats"] [data-slot="subscribe-form"] button::before {
position: absolute;
top: 0.25px;
right: 0;
left: 0;
height: 20px;
pointer-events: none;
content: "";
background: linear-gradient(180deg, #ffffff00 0%, #ffffff12 100%);
}
[data-page="stats"] [data-slot="subscribe-form"] button span {
position: relative;
}
[data-page="stats"] [data-slot="subscribe-form"] button:disabled {
cursor: progress;
opacity: 0.7;
}
[data-page="stats"] [data-slot="subscribe-feedback"]:empty {
display: none;
}
[data-page="stats"] [data-slot="subscribe-feedback"] p {
text-align: center;
font-size: 11px;
font-weight: 500;
line-height: 16px;
}
[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="success"] {
color: #198b43;
}
[data-page="stats"] [data-slot="subscribe-feedback"] p[data-state="error"] {
color: #b82d35;
}
[data-page="stats"] [data-slot="footer-pattern"] {
height: 16px;
overflow: hidden;
background: var(--stats-hero-pattern);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-slot="footer-bottom"],
[data-page="stats"] [data-slot="footer-bottom"] > div {
display: flex;
align-items: center;
}
[data-page="stats"] [data-slot="footer-bottom"] {
justify-content: space-between;
gap: 24px;
font-size: 11px;
line-height: 1;
}
[data-page="stats"] [data-slot="footer-bottom"] > div:first-child {
gap: 24px;
}
[data-page="stats"] [data-slot="footer-controls"] {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
}
[data-page="stats"] [data-slot="footer-language"] {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
color: var(--stats-muted);
font-size: 11px;
line-height: 1;
}
[data-page="stats"] [data-slot="footer-language"] select {
height: 24px;
min-width: 136px;
margin: 0;
padding: 0 8px;
border: 1px solid var(--stats-line);
border-radius: 0;
background: var(--stats-bg);
color: var(--stats-text);
font: inherit;
font-size: 11px;
line-height: 1;
}
[data-page="stats"] [data-slot="theme-toggle"] {
display: flex;
align-items: center;
gap: 1px;
padding: 1px;
background: var(--stats-layer-2);
}
[data-page="stats"] [data-slot="theme-option"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 20px;
margin: 0;
padding: 0;
border: 0;
border-radius: 0;
appearance: none;
background: transparent;
color: var(--stats-faint);
font: inherit;
font-size: 11px;
line-height: 1;
cursor: pointer;
}
[data-page="stats"] [data-slot="theme-icon"] {
display: block;
width: 16px;
height: 16px;
pointer-events: none;
}
[data-page="stats"] [data-slot="theme-option"]:hover {
color: var(--stats-text);
}
[data-page="stats"] [data-slot="theme-option"][aria-pressed="true"] {
background: var(--stats-bg);
color: var(--stats-theme-icon-active);
box-shadow:
0 0 0 0 #0000,
0 0 0 0.5px #0000001f,
0 1px 2px -1px #00000014,
0 2px 4px 0 #0000000a;
}
[data-page="stats"] [data-slot="status"] {
display: flex;
align-items: center;
gap: 10px;
}
[data-page="stats"] [data-slot="status"]::before {
content: "";
width: 6px;
height: 6px;
background: #198b43;
}
[data-page="stats"] [data-component="content"] a {
color: var(--stats-text);
text-decoration: none;
}
[data-page="stats"] [data-component="content"] a:hover {
color: var(--stats-text);
text-decoration: none;
}
[data-page="stats"] [data-section="chart"] {
border-bottom: 1px solid var(--stats-line);
box-shadow:
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
padding: var(--stats-section-padding) var(--stats-page-padding);
}
[data-page="stats"] [data-section="hero"] {
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-end;
gap: 24px;
min-height: 0;
overflow: hidden;
padding: 128px 24px 48px;
border-bottom: 0;
box-shadow: none;
}
[data-page="stats"] h1,
[data-page="stats"] h2,
[data-page="stats"] p {
margin: 0;
}
[data-page="stats"] h1 {
font-size: 38px;
line-height: 1;
letter-spacing: normal;
font-weight: 600;
max-width: none;
}
[data-page="stats"] h2 {
font-size: 24px;
line-height: 1;
letter-spacing: -0.03em;
font-weight: 500;
}
[data-page="stats"] [data-slot="section-header"] p {
color: var(--stats-muted);
font-size: 16px;
line-height: 1.5;
}
[data-page="stats"] [data-slot="hero-canvas"] {
display: flex;
flex-direction: column;
gap: 24px;
width: 100%;
min-width: 0;
}
[data-page="stats"] [data-section="hero"] h1 {
order: 1;
color: var(--stats-text);
font-size: 64px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="hero-copy"] {
order: 3;
color: var(--stats-hero-muted);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
[data-page="stats"] [data-slot="hero-copy-break"] {
display: none;
}
[data-page="stats"] [data-slot="hero-pattern"] {
order: 2;
flex: 0 0 auto;
width: 100%;
height: 16px;
overflow: hidden;
background: var(--stats-hero-pattern);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-slot="hero-meta"] {
display: flex;
align-items: center;
gap: 4px;
width: fit-content;
max-width: 100%;
height: 24px;
padding: 0 8px 0 4px;
background: var(--stats-layer-2);
color: var(--stats-hero-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
overflow: hidden;
white-space: nowrap;
}
[data-page="stats"] [data-slot="hero-meta"] svg {
width: 16px;
height: 16px;
flex: 0 0 auto;
}
[data-page="stats"] [data-slot="hero-meta-label"],
[data-page="stats"] [data-slot="hero-meta-empty"] {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
[data-page="stats"] [data-slot="hero-meta-time"] {
display: inline-flex;
align-items: center;
min-width: 0;
overflow: hidden;
}
[data-page="stats"] [data-slot="hero-meta-separator"] {
flex: 0 0 auto;
margin-right: 0.35em;
}
[data-page="stats"] [data-slot="hero-meta-ticker"] {
position: relative;
flex: 0 1 auto;
min-width: 0;
height: 1.1em;
overflow: hidden;
line-height: 1.1;
}
[data-page="stats"] [data-slot="hero-meta-ticker-track"] {
display: flex;
min-width: 0;
flex-direction: column;
transform: translateY(0);
will-change: transform;
}
[data-page="stats"] [data-slot="hero-meta-ticker"][data-ticking="true"] [data-slot="hero-meta-ticker-track"] {
animation: stats-hero-meta-ticker 680ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
[data-page="stats"] [data-slot="hero-meta-ticker-item"] {
display: block;
min-width: 0;
overflow: hidden;
line-height: 1.1;
text-overflow: ellipsis;
}
@keyframes stats-hero-meta-ticker {
0%,
18% {
transform: translateY(0);
}
82%,
100% {
transform: translateY(-50%);
}
}
@media (prefers-reduced-motion: reduce) {
[data-page="stats"] [data-slot="hero-meta-ticker"][data-ticking="true"] [data-slot="hero-meta-ticker-track"] {
animation: none;
transform: translateY(-50%);
}
}
@media (min-width: 48rem) {
[data-page="stats"] [data-section="hero"] {
gap: 16px;
padding: 128px 32px 32px;
}
[data-page="stats"] [data-slot="hero-canvas"] {
position: relative;
display: block;
height: 232px;
overflow: hidden;
}
[data-page="stats"] [data-slot="hero-pattern"] {
position: absolute;
top: 50%;
left: 50%;
width: 1280px;
height: 351px;
transform: translate(-50%, -50%);
}
[data-page="stats"] [data-section="hero"] h1 {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: max-content;
max-width: 100%;
padding: 0 12px 12px 0;
background: var(--stats-bg);
white-space: nowrap;
}
[data-page="stats"] [data-slot="hero-copy"] {
position: absolute;
right: 0;
bottom: 0;
z-index: 1;
width: min(563px, 100%);
padding: 12px 0 0 16px;
background: var(--stats-bg);
text-align: right;
}
[data-page="stats"] [data-slot="hero-copy-break"] {
display: block;
}
}
@media (min-width: 75rem) {
[data-page="stats"] [data-section="hero"] {
padding: 128px 40px 24px;
}
}
@media (min-width: 90rem) {
[data-page="stats"] [data-section="hero"] {
padding-right: 0;
padding-left: 0;
}
}
[data-page="stats"] [data-section="chart"] {
min-height: 0;
}
[data-page="stats"] [data-section="top-models"] {
box-sizing: border-box;
margin-top: 1px;
box-shadow:
0 -1px var(--stats-line),
inset 0 -1px var(--stats-line),
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
padding: 80px 40px;
color: var(--stats-text);
}
[data-page="stats"] [data-slot="top-models-title"] {
max-width: 1200px;
margin-bottom: 40px;
color: var(--stats-muted);
font-size: 28px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="top-models-title"] strong {
color: var(--stats-text);
font-weight: 500;
}
[data-page="stats"] [data-slot="top-models-title"] span {
color: var(--stats-muted);
font-weight: 400;
}
[data-page="stats"] [data-slot="top-models-mobile-controls"] {
display: none;
}
[data-page="stats"] [data-component="top-models-chart"] {
--top-models-bar-gap: 12px;
--top-models-dot-size: 6px;
--top-models-dot-offset: 2px;
position: relative;
display: grid;
grid-template-rows: 34px minmax(0, 1fr);
gap: 12px;
width: 100%;
height: clamp(320px, 44vh, 400px);
}
[data-page="stats"] [data-slot="top-models-axis"],
[data-page="stats"] [data-slot="top-models-bars"] {
display: flex;
min-width: 0;
}
[data-page="stats"] [data-slot="top-models-axis"] {
gap: var(--top-models-bar-gap);
}
[data-page="stats"] [data-slot="top-models-axis"] > div {
flex: 1 1 0;
min-width: 0;
color: var(--stats-faint);
font-size: 11px;
font-weight: 500;
line-height: 1.5;
}
[data-page="stats"] [data-slot="top-models-axis"] > div[data-active="true"] {
color: var(--stats-text);
font-weight: 500;
}
[data-page="stats"] [data-slot="axis-label"] {
display: flex;
flex-direction: column;
}
[data-page="stats"]
[data-slot="top-models-axis"]
> div[data-label-hidden="true"]:not([data-active="true"])
[data-slot="axis-label"],
[data-page="stats"]
[data-slot="market-labels"]
button[data-label-hidden="true"]:not([data-active="true"])
[data-slot="market-axis-label"] {
visibility: hidden;
}
[data-page="stats"] [data-slot="axis-date-mobile"] {
display: none;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] {
--top-models-bar-gap: 8px;
grid-template-rows: 40px minmax(0, 1fr);
}
[data-page="stats"] [data-component="top-models-chart"][data-range="2M"] {
--top-models-bar-gap: 6px;
}
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] {
--market-gap: 8px;
grid-template-rows: 40px minmax(0, 1fr);
}
[data-page="stats"] [data-component="market-share"][data-range="2M"] {
--market-gap: 6px;
}
[data-page="stats"] [data-component="market-share"][data-range="2M"] [data-slot="market-labels"],
[data-page="stats"] [data-component="market-share"][data-range="2M"] [data-slot="market-bars"] {
gap: var(--market-gap);
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-axis"] > div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
font-weight: 600;
}
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-labels"] button {
position: relative;
align-items: center;
justify-content: center;
height: 40px;
line-height: 1.2;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-label"],
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-axis-label"] {
position: absolute;
left: 50%;
width: max-content;
max-width: 72px;
transform: rotate(-90deg) translateX(-50%);
transform-origin: left center;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-total"],
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-date-full"],
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-total"],
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-date-full"] {
display: none;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="axis-date-mobile"],
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-date-mobile"] {
display: block;
}
[data-page="stats"] [data-slot="top-models-bars"] {
width: calc(100% + var(--top-models-bar-gap));
margin-inline: calc(var(--top-models-bar-gap) / -2);
min-height: 0;
}
[data-page="stats"] [data-slot="top-models-bar"] {
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
height: 100%;
padding-inline: calc(var(--top-models-bar-gap) / 2);
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="top-models-bar"]::before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: calc(100% - var(--top-models-bar-gap));
transform: translateX(-50%);
content: "";
background: var(--stats-dot);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: var(--top-models-dot-offset) top;
mask-repeat: repeat;
mask-size: var(--top-models-dot-size) var(--top-models-dot-size);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: var(--top-models-dot-offset) top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--top-models-dot-size) var(--top-models-dot-size);
}
@supports (width: round(down, 100%, 1px)) {
[data-page="stats"] [data-slot="top-models-bar"]::before {
width: round(down, calc(100% - var(--top-models-bar-gap)), var(--top-models-dot-size));
}
}
[data-page="stats"] [data-slot="top-models-stack"] {
position: absolute;
right: calc(var(--top-models-bar-gap) / 2);
bottom: 0;
left: calc(var(--top-models-bar-gap) / 2);
z-index: 1;
display: grid;
height: var(--top-models-bar-height);
min-height: 0;
overflow: hidden;
background: var(--stats-bg);
box-shadow: 0 -4px 0 var(--stats-bg);
}
[data-page="stats"] [data-slot="top-models-stack"] i {
box-sizing: border-box;
display: block;
min-height: 0;
transition: background 120ms ease;
}
[data-page="stats"] [data-slot="top-models-stack"] i + i {
border-top: 2px solid var(--stats-bg);
}
[data-page="stats"] [data-slot="mobile-filter-button"] {
display: inline-flex;
flex: 1 1 0;
align-items: center;
justify-content: center;
gap: 6px;
height: 32px;
min-width: 0;
overflow: hidden;
padding: 0 12px;
color: var(--stats-text);
background: var(--stats-bg);
border: 0;
border-radius: 0;
box-shadow:
0 0 0 0 #00000024,
0 0 0 0.5px #00000024,
0 1px 1.5px 0 #0000001a;
font-size: 13px;
font-weight: 600;
line-height: 1.1;
}
[data-page="stats"] [data-slot="mobile-filter-button"] svg {
flex: 0 0 auto;
color: var(--stats-muted);
}
[data-page="stats"] [data-component="mobile-filter-sheet"] {
position: fixed;
inset: 0;
z-index: 30;
display: flex;
align-items: flex-end;
padding: 0 8px 8px;
background: #00000066;
backdrop-filter: blur(3px);
}
[data-page="stats"] [data-slot="filter-sheet-panel"] {
width: 100%;
background: var(--stats-bg);
box-shadow: 0 8px 24px #00000026;
}
[data-page="stats"] [data-slot="filter-sheet-panel"] button {
position: relative;
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
padding: 0 42px;
color: var(--stats-faint);
background: transparent;
border: 0;
border-radius: 0;
border-bottom: 1px solid var(--stats-line);
font-size: 13px;
font-weight: 600;
line-height: 1.1;
text-align: left;
}
[data-page="stats"] [data-slot="filter-sheet-panel"] button:last-child {
border-bottom: 0;
}
[data-page="stats"] [data-slot="filter-sheet-panel"] button[data-active="true"] {
color: var(--stats-text);
background: transparent;
}
[data-page="stats"] [data-slot="filter-sheet-panel"] button[data-active="true"]::before {
position: absolute;
left: 20px;
width: 6px;
height: 6px;
content: "";
background: currentColor;
}
[data-page="stats"] [data-slot="section-header"] {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 32px;
margin-bottom: 32px;
}
[data-page="stats"] [data-slot="section-header"] > div {
display: grid;
gap: 18px;
max-width: 460px;
}
[data-page="stats"] [data-component="controls"] {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 10px;
}
[data-page="stats"] [data-component="pills"],
[data-page="stats"] [data-component="toggle"] {
display: flex;
gap: 4px;
padding: 4px;
background: var(--stats-layer);
border: 1px solid var(--stats-line);
border-radius: 6px;
}
[data-page="stats"] [data-component="content"] button {
font: inherit;
color: var(--stats-muted);
background: transparent;
border: 0;
border-radius: 4px;
padding: 7px 10px;
cursor: pointer;
}
[data-page="stats"] [data-component="content"] button[data-active="true"] {
color: #fff;
background: var(--stats-text);
}
[data-page="stats"] button[data-slot="mobile-filter-button"] {
padding: 0 12px;
color: var(--stats-text);
background: var(--stats-bg);
border-radius: 0;
}
[data-page="stats"] [data-slot="filter-sheet-panel"] button {
padding: 0 42px;
color: var(--stats-faint);
background: transparent;
border-radius: 0;
}
[data-page="stats"] [data-slot="filter-sheet-panel"] button[data-active="true"] {
color: var(--stats-text);
background: transparent;
}
[data-page="stats"] [data-component="usage-chart"] {
position: relative;
}
[data-page="stats"] [data-component="usage-chart"] {
display: grid;
}
[data-page="stats"] [data-component="empty-state"] {
display: grid;
place-content: center;
gap: 12px;
min-height: 280px;
padding: 32px;
background: var(--stats-layer);
border: 1px solid var(--stats-line);
color: var(--stats-muted);
text-align: center;
}
[data-page="stats"] [data-component="empty-state"] strong {
color: var(--stats-text);
font-weight: 600;
}
[data-page="stats"] [data-component="empty-state"] p {
max-width: 34rem;
color: var(--stats-muted);
font-size: 13px;
line-height: 1.5;
}
[data-page="stats"] [data-component="empty-state"][data-compact="true"] {
min-height: 172px;
}
[data-page="stats"] [data-component="usage-chart"] svg {
display: block;
width: 100%;
overflow: visible;
}
[data-page="stats"] .chart-total,
[data-page="stats"] .chart-date {
font-size: 14px;
fill: var(--stats-faint);
}
[data-page="stats"] .chart-date {
font-size: 12px;
}
[data-page="stats"] [data-component="usage-chart"] g[role="button"] {
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-component="usage-chart"] g[role="button"] rect {
transition:
fill 120ms ease,
opacity 120ms ease;
}
[data-page="stats"] [data-component="usage-chart"] g[role="button"][data-active="true"] .chart-total,
[data-page="stats"] [data-component="usage-chart"] g[role="button"][data-active="true"] .chart-date {
fill: var(--stats-text);
}
[data-page="stats"] [data-slot="chart-footer"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 32px;
}
[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] {
margin-top: 32px;
}
[data-page="stats"] [data-component="usage-filter"] {
display: flex;
align-items: center;
}
[data-page="stats"] [data-component="usage-filter"][data-variant="product"] {
gap: 24px;
}
[data-page="stats"] [data-component="usage-filter"][data-variant="range"] {
gap: 6px;
}
[data-page="stats"] [data-component="usage-filter"] button {
color: var(--stats-faint);
background: transparent;
border: 0;
border-radius: 0;
padding: 0;
font-size: 13px;
font-weight: 500;
line-height: 17px;
}
[data-page="stats"] [data-component="usage-filter"] button:hover {
color: var(--stats-text);
}
[data-page="stats"] [data-component="usage-filter"] button[data-active="true"] {
color: var(--stats-text);
background: transparent;
font-weight: 500;
}
[data-page="stats"] [data-component="usage-filter"][data-variant="product"] button[data-active="true"] {
display: flex;
align-items: center;
gap: 6px;
}
[data-page="stats"] [data-component="usage-filter"][data-variant="product"] button[data-active="true"]::before {
content: "";
width: 16px;
height: 16px;
background: linear-gradient(var(--stats-text), var(--stats-text)) center / 6px 6px no-repeat;
}
[data-page="stats"] [data-component="usage-filter"][data-variant="range"] button {
height: 24px;
width: 36px;
padding: 0;
}
[data-page="stats"] [data-component="usage-filter"][data-variant="range"] button[data-active="true"] {
background: var(--stats-layer-2);
}
[data-page="stats"] [data-component="chart-tooltip"] {
position: absolute;
right: auto;
top: 96px;
display: grid;
gap: 8px;
min-width: 220px;
padding: 16px;
background: #fffffff2;
border: 1px solid var(--stats-line-strong);
box-shadow:
0 8px 16px #0000000a,
0 4px 8px #00000014;
pointer-events: none;
z-index: 2;
}
[data-page="stats"] [data-component="chart-tooltip"] p {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 18px;
margin: 0 -4px;
padding: 2px 4px;
color: var(--stats-muted);
font-size: 12px;
line-height: 17px;
}
[data-page="stats"] [data-component="chart-tooltip"] p[data-active="true"] {
background: var(--stats-layer-2);
color: var(--stats-text);
}
[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-label"] {
display: grid;
grid-template-columns: 9px minmax(0, 1fr);
gap: 8px;
min-width: 0;
align-items: center;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="chart-tooltip"] [data-slot="tooltip-divider"] {
height: 1px;
margin: 4px -16px 2px;
background: var(--stats-line);
}
[data-page="stats"] [data-component="chart-tooltip"] i {
width: 9px;
height: 9px;
}
[data-page="stats"] [data-component="chart-tooltip"] b {
color: var(--stats-text);
}
[data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] {
top: 110px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0;
width: 192px;
min-width: 192px;
padding: 0;
background: #fffffff2;
border: 0;
box-shadow:
0 0 0 0.5px #00000024,
0 8px 16px #0000000f,
0 4px 8px #00000014;
color: var(--stats-text);
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"][data-placement="right"] {
right: auto;
left: calc(100% + 8px);
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"][data-placement="left"] {
right: calc(100% + 8px);
left: auto;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
strong,
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
> span {
display: block;
font-size: 11px;
line-height: 12px;
white-space: nowrap;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
strong {
padding: 8px 8px 0;
font-weight: 500;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
> span {
padding: 4px 8px 8px;
color: var(--stats-muted);
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
[data-slot="tooltip-divider"] {
height: 0.5px;
margin: 0;
}
[data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] p {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px;
height: 16px;
margin: 4px 0 0;
padding: 0 8px;
font-size: 11px;
font-weight: 500;
line-height: 12px;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
p[data-muted="true"] {
opacity: 0.46;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
[data-slot="tooltip-divider"]
+ p {
margin-top: 8px;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
p:last-child {
margin-bottom: 8px;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
[data-slot="tooltip-label"] {
grid-template-columns: 16px minmax(0, 1fr);
gap: 4px;
}
[data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] i {
width: 6px;
height: 6px;
justify-self: center;
}
[data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] b {
font-weight: 500;
}
[data-page="stats"]
:is(
[data-section="leaderboard"],
[data-section="unique-users"],
[data-section="market-share"],
[data-section="geo-breakdown"],
[data-section="token-cost"],
[data-section="cache-ratio"],
[data-section="session-cost"]
) {
position: relative;
box-sizing: border-box;
box-shadow:
inset 0 -1px var(--stats-line),
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
padding: 80px 40px;
color: var(--stats-text);
}
[data-page="stats"] [data-component="section-bridge"] {
position: absolute;
top: 0;
left: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 6px;
height: 24px;
padding: 0 10px;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
color: var(--stats-faint);
font-size: 10px;
font-weight: 500;
line-height: 1;
text-decoration: none;
transform: translate(-50%, -50%);
white-space: nowrap;
}
[data-page="stats"] [data-component="section-bridge"]:hover {
color: var(--stats-text);
text-decoration: none;
}
[data-page="stats"] [data-component="section-bridge"] i {
width: 1px;
height: 10px;
background: var(--stats-line-strong);
}
[data-page="stats"] [data-component="section-bridge"] strong,
[data-page="stats"] [data-component="section-bridge"] b {
color: var(--stats-muted);
font-weight: 600;
}
[data-page="stats"] [data-component="section-bridge"] {
display: none;
}
[data-page="stats"] [data-slot="section-title"] {
max-width: 1200px;
margin-bottom: 40px;
color: var(--stats-muted);
font-size: 28px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="section-title"] strong {
color: var(--stats-text);
font-weight: 500;
}
[data-page="stats"] [data-slot="section-title"] span {
color: var(--stats-muted);
font-weight: 400;
}
[data-page="stats"] [data-slot="heading-link"] {
position: relative;
color: inherit;
text-decoration: none;
}
[data-page="stats"] [data-slot="heading-link"]:hover {
text-decoration: none;
}
[data-page="stats"] [data-slot="heading-link"]:focus-visible {
outline: 1px solid var(--stats-accent);
outline-offset: 4px;
}
[data-page="stats"] [data-slot="heading-anchor"] {
position: absolute;
top: -0.08em;
right: 100%;
margin-right: 0.48em;
color: var(--stats-accent);
opacity: 0;
}
[data-page="stats"] [data-slot="heading-link"]:hover [data-slot="heading-anchor"],
[data-page="stats"] [data-slot="heading-link"]:focus-visible [data-slot="heading-anchor"] {
opacity: 1;
}
[data-page="stats"] [data-component="leaderboard"],
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-compact"],
[data-page="stats"] [data-slot="leaderboard-mobile"] {
display: grid;
}
[data-page="stats"] [data-component="leaderboard"] {
gap: 0;
width: 100%;
margin-top: 36px;
scroll-margin-top: 88px;
}
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-compact"] {
grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
gap: 8px;
}
[data-page="stats"] [data-slot="leaderboard-pattern"] {
height: 16px;
margin: 16px 0;
overflow: hidden;
background: var(--stats-hero-pattern);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] {
display: none;
}
[data-page="stats"] [data-component="leader-card"] {
position: relative;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
min-width: 0;
overflow: hidden;
padding: 16px;
border: 1px solid var(--stats-line);
background: linear-gradient(180deg, #ffffff0a 0%, #ffffff00 100%), var(--stats-layer);
font-size: 13px;
line-height: 1.1;
outline: none;
transition:
background 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
transform 140ms ease;
}
[data-page="stats"] a[data-component="leader-card"],
[data-page="stats"] a[data-component="leader-card"]:hover {
text-decoration: none;
}
[data-page="stats"] [data-slot="rank"],
[data-page="stats"] [data-slot="delta"][data-negative="true"] {
color: var(--stats-faint);
}
[data-page="stats"] [data-component="leader-card"][data-size="featured"] {
justify-content: flex-start;
gap: 17px;
min-height: 154px;
}
[data-page="stats"] [data-component="leader-card"][data-size="compact"] {
min-height: 88px;
box-shadow:
0 0 0 0.5px #0000001f,
0 1px 2px -1px #00000014,
0 2px 4px #0000000a;
}
[data-page="stats"] [data-slot="leader-watermark"] {
position: absolute;
right: -20px;
top: 50%;
display: none;
width: 168px;
height: 168px;
transform: translateY(-50%);
color: var(--stats-line);
opacity: 0.58;
pointer-events: none;
transition:
color 140ms ease,
opacity 140ms ease;
}
[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-watermark"] {
display: block;
}
[data-page="stats"] [data-slot="leader-body"] {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
z-index: 1;
}
[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-body"] {
flex-direction: column;
align-items: flex-start;
gap: 12px;
width: 100%;
}
[data-page="stats"] [data-slot="leader-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
box-sizing: border-box;
width: 20px;
height: 20px;
padding: 3px;
border: 0.5px solid var(--stats-line-strong);
border-radius: 4px;
background: var(--stats-bg);
color: var(--stats-muted);
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
}
[data-page="stats"] [data-slot="leader-copy"] {
display: grid;
gap: 4px;
flex: 1;
min-width: 0;
width: 100%;
}
[data-page="stats"] [data-slot="leader-copy"] div {
display: flex;
gap: 8px;
min-width: 0;
}
[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-copy"] div {
gap: 4px;
}
[data-page="stats"] [data-slot="leader-copy"] strong,
[data-page="stats"] [data-slot="leader-copy"] div > span:first-child {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="leader-copy"] strong {
color: var(--stats-text);
font-weight: 600;
line-height: 1.3;
}
[data-page="stats"] [data-slot="leader-copy"] span {
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="leader-copy"] [data-slot="delta"] {
color: #198b43;
}
[data-page="stats"] [data-slot="leader-copy"] [data-slot="delta"][data-negative="true"] {
color: #b82d35;
}
[data-page="stats"] [data-component="leader-card"][data-active="true"] {
border-color: var(--stats-line-strong);
background: #ffffff;
box-shadow:
0 0 0 0.5px #00000024,
0 6px 16px #0000000d,
0 2px 6px #0000000f;
transform: translateY(-1px);
}
[data-page="stats"] [data-component="leader-card"][data-active="true"] [data-slot="leader-watermark"] {
color: var(--stats-layer-2);
opacity: 0.86;
}
[data-page="stats"] [data-component="leader-card"][data-active="true"] [data-slot="leader-avatar"] {
border-color: var(--stats-line-strong);
color: var(--stats-text);
}
@media (hover: hover) {
[data-page="stats"] [data-component="leader-card"]:hover,
[data-page="stats"] [data-component="leader-card"]:focus-visible {
border-color: var(--stats-line-strong);
background: #ffffff;
box-shadow:
0 0 0 0.5px #00000024,
0 6px 16px #0000000d,
0 2px 6px #0000000f;
transform: translateY(-1px);
}
[data-page="stats"] [data-component="leader-card"]:hover [data-slot="leader-watermark"],
[data-page="stats"] [data-component="leader-card"]:focus-visible [data-slot="leader-watermark"] {
color: var(--stats-layer-2);
opacity: 0.86;
}
[data-page="stats"] [data-component="leader-card"]:hover [data-slot="leader-avatar"],
[data-page="stats"] [data-component="leader-card"]:focus-visible [data-slot="leader-avatar"] {
border-color: var(--stats-line-strong);
color: var(--stats-text);
}
}
[data-page="stats"] [data-component="market-share"] {
--market-gap: 12px;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
gap: 12px;
height: 348px;
}
[data-page="stats"] [data-slot="market-labels"],
[data-page="stats"] [data-slot="market-bars"] {
display: grid;
grid-template-columns: repeat(var(--market-count), minmax(0, 1fr));
gap: var(--market-gap);
}
[data-page="stats"] [data-slot="market-labels"] button,
[data-page="stats"] [data-slot="market-bars"] button {
display: flex;
min-width: 0;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
text-align: left;
}
[data-page="stats"] [data-slot="market-labels"] button {
flex-direction: column;
align-items: flex-start;
color: var(--stats-faint);
font-size: 10px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="market-labels"] button[data-active="true"] {
color: var(--stats-text);
background: transparent;
font-weight: 600;
}
[data-page="stats"] [data-slot="market-axis-label"] {
display: grid;
}
[data-page="stats"] [data-slot="market-date-mobile"] {
display: none;
}
[data-page="stats"] [data-slot="market-bars"] {
flex: 1;
min-height: 0;
}
[data-page="stats"] [data-slot="market-bars"] button {
flex-direction: column;
gap: 2px;
height: 100%;
overflow: hidden;
}
[data-page="stats"] [data-slot="market-bars"] button[data-active="true"] {
background: transparent;
}
[data-page="stats"] [data-slot="market-bars"] span {
width: 100%;
min-height: 1px;
background: var(--stats-layer-2);
cursor: pointer;
transition:
background-color 140ms ease,
opacity 140ms ease;
}
[data-page="stats"] [data-component="market-share-list"] {
display: grid;
grid-auto-flow: column;
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: repeat(3, auto);
gap: 8px 10px;
margin: 36px 0 0;
padding: 0;
list-style: none;
}
[data-page="stats"] [data-component="market-share-list"] li {
min-width: 0;
}
[data-page="stats"] [data-component="market-share-list"] li > a,
[data-page="stats"] [data-component="market-share-list"] li > button {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
min-width: 0;
height: 28px;
box-sizing: border-box;
padding: 0 8px;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
color: inherit;
font: inherit;
font-size: 11px;
line-height: 1;
cursor: pointer;
outline: none;
text-decoration: none;
transition:
border-color 120ms ease,
box-shadow 120ms ease,
background 120ms ease;
}
[data-page="stats"] [data-component="market-share-list"] li > button {
appearance: none;
}
[data-page="stats"] [data-component="market-share-list"] li[data-active="true"] > :is(a, button),
[data-page="stats"] [data-component="market-share-list"] li > :is(a, button):focus-visible {
border-color: var(--stats-text);
background: var(--stats-layer);
box-shadow:
0 0 0 0.5px color-mix(in srgb, var(--stats-text) 70%, transparent),
0 1px 2px -1px #00000014,
0 2px 4px #0000000a;
}
[data-page="stats"] [data-component="market-share-list"] span {
width: 22px;
flex: 0 0 auto;
color: var(--stats-muted);
font-weight: 500;
text-align: center;
}
[data-page="stats"] [data-component="market-share-list"] i {
width: 6px;
height: 6px;
flex: 0 0 auto;
}
[data-page="stats"] [data-component="market-share-list"] strong {
flex: 1;
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-weight: 600;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="market-share-list"] em,
[data-page="stats"] [data-component="market-share-list"] b,
[data-page="stats"] [data-slot="market-footer"] span {
color: var(--stats-faint);
font-style: normal;
}
[data-page="stats"] [data-component="market-share-list"] b {
color: var(--stats-muted);
font-weight: 500;
}
[data-page="stats"] [data-slot="market-footer"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 64px;
margin-top: 40px;
}
[data-page="stats"] [data-slot="market-footer"] p {
display: flex;
align-items: center;
gap: 8px;
width: 240px;
color: var(--stats-text);
font-size: 11px;
font-weight: 500;
line-height: 1.1;
white-space: nowrap;
}
[data-page="stats"] [data-component="geo-breakdown"] {
display: grid;
gap: 16px;
align-items: start;
}
[data-page="stats"] [data-slot="geo-map-panel"] {
position: relative;
min-width: 0;
overflow: hidden;
background: var(--stats-layer);
border: 1px solid var(--stats-line);
}
[data-page="stats"] [data-component="geo-world-map"] {
display: block;
width: 100%;
height: auto;
}
[data-page="stats"] [data-slot="geo-countries"] path {
fill: var(--stats-layer-2);
stroke: var(--stats-bg);
stroke-width: 0.45px;
transition:
fill 140ms ease,
opacity 140ms ease;
}
[data-page="stats"] [data-slot="geo-countries"] path[data-has-data="true"] {
fill: var(--stats-accent);
opacity: var(--geo-country-opacity);
cursor: pointer;
}
[data-page="stats"] [data-slot="geo-countries"] path[data-active="true"] {
fill: color-mix(in srgb, var(--stats-accent) 70%, var(--stats-text));
opacity: 1;
}
[data-page="stats"] [data-slot="geo-country-markers"] circle {
fill: var(--stats-accent);
stroke: var(--stats-bg);
stroke-width: 1.1px;
opacity: var(--geo-country-opacity);
cursor: pointer;
transition:
fill 140ms ease,
opacity 140ms ease,
r 140ms ease;
}
[data-page="stats"] [data-slot="geo-country-markers"] circle[data-active="true"] {
fill: color-mix(in srgb, var(--stats-accent) 70%, var(--stats-text));
opacity: 1;
}
[data-page="stats"] [data-slot="geo-borders"] {
fill: none;
stroke: var(--stats-line-strong);
stroke-linejoin: round;
stroke-width: 0.6px;
pointer-events: none;
}
[data-page="stats"] [data-slot="geo-active-country"] {
position: absolute;
bottom: 16px;
left: 16px;
display: grid;
gap: 8px;
min-width: 168px;
max-width: calc(100% - 32px);
box-sizing: border-box;
padding: 12px;
background: color-mix(in srgb, var(--stats-bg) 92%, transparent);
box-shadow:
0 0 0 0.5px var(--stats-line-strong),
0 6px 16px #0000000d,
0 2px 6px #0000000f;
}
[data-page="stats"] [data-slot="geo-active-country"] span,
[data-page="stats"] [data-slot="geo-active-country"] em {
color: var(--stats-faint);
font-style: normal;
}
[data-page="stats"] [data-slot="geo-active-country"] span {
font-size: 10px;
font-weight: 600;
line-height: 1;
}
[data-page="stats"] [data-slot="geo-active-country"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 16px;
font-weight: 600;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="geo-active-country"] p {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1;
}
[data-page="stats"] [data-slot="geo-active-country"] b {
color: var(--stats-accent-text);
font-weight: 600;
}
[data-page="stats"] [data-component="geo-country-list"] {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 212px), 1fr));
align-content: start;
gap: 8px 10px;
min-width: 0;
margin: 20px 0 0;
padding: 0;
list-style: none;
}
[data-page="stats"] [data-component="geo-country-list"] li {
min-width: 0;
}
[data-page="stats"] [data-component="geo-country-list"] button {
display: grid;
grid-template-columns: 28px 8px minmax(0, 1fr) auto auto;
align-items: center;
gap: 10px;
width: 100%;
min-width: 0;
height: 32px;
padding: 0 8px;
border: 1px solid var(--stats-line);
border-radius: 0;
background: var(--stats-layer);
color: var(--stats-muted);
font-size: 11px;
line-height: 1.25;
text-align: left;
transition:
border-color 120ms ease,
background 120ms ease,
box-shadow 120ms ease;
}
[data-page="stats"] [data-component="geo-country-list"] button[data-active="true"],
[data-page="stats"] [data-component="geo-country-list"] button:focus-visible {
border-color: var(--stats-text);
background: var(--stats-layer);
color: var(--stats-text);
box-shadow:
0 0 0 0.5px color-mix(in srgb, var(--stats-text) 70%, transparent),
0 1px 2px -1px #00000014,
0 2px 4px #0000000a;
}
[data-page="stats"] [data-component="geo-country-list"] span {
color: var(--stats-faint);
font-weight: 500;
text-align: center;
}
[data-page="stats"] [data-component="geo-country-list"] i {
width: 8px;
height: 8px;
background: var(--stats-accent);
opacity: var(--geo-row-opacity);
}
[data-page="stats"] [data-component="geo-country-list"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-weight: 600;
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="geo-country-list"] em,
[data-page="stats"] [data-component="geo-country-list"] b {
color: var(--stats-faint);
font-style: normal;
}
[data-page="stats"] [data-component="geo-country-list"] b {
color: var(--stats-muted);
font-weight: 500;
}
[data-page="stats"] [data-component="token-cost"],
[data-page="stats"] [data-component="cache-ratio"] {
position: relative;
display: grid;
gap: 8px;
width: 100%;
margin-top: 4px;
}
[data-page="stats"] button[data-component="token-row"] {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
height: 28px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--stats-text);
font-size: 11px;
line-height: 16px;
text-align: left;
}
[data-page="stats"] button[data-component="token-row"][data-active="true"] {
background: #0000000a;
color: var(--stats-text);
}
[data-page="stats"] [data-component="token-row"] strong {
flex: 0 0 56px;
color: var(--stats-text);
font-weight: 500;
white-space: nowrap;
}
[data-page="stats"] button[data-component="token-row"][data-active="true"] strong {
color: var(--stats-accent-text);
}
[data-page="stats"] [data-component="token-row"] > span {
flex: 0 0 132px;
overflow: hidden;
color: var(--stats-muted);
font-weight: 400;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="token-row"][data-variant="session"] > span {
flex-basis: 150px;
}
[data-page="stats"] [data-component="metric-bar"] {
position: relative;
display: block;
flex: 1;
min-width: 0;
height: 5px;
background: var(--stats-layer-2);
font-style: normal;
}
[data-page="stats"] [data-component="metric-bar"] b {
position: absolute;
inset: 0 auto 0 0;
display: block;
width: var(--metric-bar-fill);
height: 5px;
background: var(--stats-text);
}
[data-page="stats"] [data-component="metric-bar"][data-active="true"] b {
background: var(--stats-accent);
}
[data-page="stats"] [data-component="metric-bar"] em {
display: none;
}
[data-page="stats"] [data-component="metric-bar"][data-active="true"] {
background: var(--stats-line-strong);
}
[data-page="stats"] [data-slot="session-heading"] {
display: flex;
align-items: flex-end;
gap: 12px;
width: 100%;
height: 18px;
}
[data-page="stats"] [data-slot="session-heading"] strong {
flex: 0 0 56px;
}
[data-page="stats"] [data-slot="session-heading"] span {
flex: 0 0 150px;
}
[data-page="stats"] [data-slot="session-heading"] p {
flex: 1;
min-width: 0;
color: var(--stats-faint);
font-size: 9px;
font-weight: 600;
line-height: 1;
}
[data-page="stats"] [data-component="token-tooltip"] {
position: absolute;
left: 44%;
z-index: 2;
display: grid;
gap: 6px;
width: 150px;
box-sizing: border-box;
padding: 8px;
background: var(--stats-layer);
box-shadow:
0 0 0 0.5px #0000001f,
0 4px 8px #00000014,
0 8px 16px #0000000a;
pointer-events: none;
}
[data-page="stats"] [data-component="token-tooltip"] p {
display: flex;
justify-content: space-between;
gap: 10px;
font-size: 9px;
font-weight: 600;
line-height: 1.1;
}
[data-page="stats"] [data-component="token-tooltip"] span {
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="cache-ratio-heading"] {
display: grid;
grid-template-columns: 56px minmax(96px, 180px) minmax(160px, 1fr);
align-items: center;
gap: 12px;
height: 18px;
padding: 0 12px;
color: var(--stats-faint);
font-size: 9px;
font-weight: 600;
line-height: 1;
text-transform: uppercase;
}
[data-page="stats"] [data-slot="cache-ratio-heading"] b {
justify-self: end;
font-weight: 600;
}
[data-page="stats"] [data-slot="cache-ratio-rows"] {
display: grid;
gap: 8px;
}
[data-page="stats"] button[data-component="cache-ratio-row"] {
display: grid;
grid-template-columns: 56px minmax(96px, 180px) minmax(160px, 1fr);
align-items: center;
gap: 12px;
width: 100%;
height: 28px;
padding: 0 12px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--stats-text);
font-size: 10px;
line-height: 14px;
text-align: left;
}
[data-page="stats"] button[data-component="cache-ratio-row"][data-active="true"] {
background: #0000000a;
}
[data-page="stats"] [data-component="cache-ratio-row"] strong {
color: var(--stats-text);
font-weight: 500;
white-space: nowrap;
}
[data-page="stats"] [data-component="cache-ratio-row"][data-active="true"] strong {
color: var(--stats-accent-text);
}
[data-page="stats"] [data-component="cache-ratio-row"] > span {
overflow: hidden;
color: var(--stats-muted);
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="cache-ratio-marker"] {
position: relative;
display: block;
min-width: 0;
height: 7px;
overflow: visible;
background:
linear-gradient(
90deg,
transparent calc(20% - 0.5px),
var(--stats-line) calc(20% - 0.5px) calc(20% + 0.5px),
transparent calc(20% + 0.5px) calc(40% - 0.5px),
var(--stats-line) calc(40% - 0.5px) calc(40% + 0.5px),
transparent calc(40% + 0.5px) calc(60% - 0.5px),
var(--stats-line) calc(60% - 0.5px) calc(60% + 0.5px),
transparent calc(60% + 0.5px) calc(80% - 0.5px),
var(--stats-line) calc(80% - 0.5px) calc(80% + 0.5px),
transparent calc(80% + 0.5px)
),
linear-gradient(
90deg,
var(--stats-line) 0 1px,
transparent 1px calc(100% - 1px),
var(--stats-line) calc(100% - 1px)
),
var(--stats-layer-2);
font-style: normal;
}
[data-page="stats"] [data-component="cache-ratio-marker"] em {
position: absolute;
top: 50%;
left: var(--cache-ratio-fill);
display: block;
width: 7px;
height: 13px;
transform: translate(-50%, -50%);
background: var(--stats-text);
}
[data-page="stats"] [data-component="cache-ratio-row"][data-active="true"] [data-component="cache-ratio-marker"] {
background: var(--stats-line-strong);
}
[data-page="stats"] [data-component="cache-ratio-row"][data-active="true"] [data-component="cache-ratio-marker"] em {
background: var(--stats-accent);
}
[data-page="stats"] [data-component="token-tooltip"][data-variant="cache-ratio"] {
left: 30%;
}
[data-page="stats"] [data-slot="token-footer"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
margin-top: 40px;
}
[data-page="stats"] [data-component="live-filter"] {
display: none;
align-items: center;
gap: 6px;
padding: 0;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.1;
}
[data-page="stats"] [data-component="live-filter"]::before {
content: "";
width: 6px;
height: 6px;
background: #198b43;
}
[data-page="stats"] [data-component="session-cost"] {
position: relative;
display: grid;
gap: 8px;
width: 100%;
margin-top: 4px;
}
[data-page="stats"] [data-component="toggle"] {
width: fit-content;
}
[data-page="stats"] [data-section="model-hero"],
[data-page="stats"] [data-section="lab-hero"],
[data-page="stats"] [data-section="model-panel"] {
position: relative;
box-sizing: border-box;
box-shadow:
inset 0 -1px var(--stats-line),
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
color: var(--stats-text);
}
[data-page="stats"] [data-section="model-hero"],
[data-page="stats"] [data-section="lab-hero"] {
display: grid;
gap: 28px;
padding: 120px 40px 64px;
}
[data-page="stats"] [data-slot="model-hero-grid"] {
display: grid;
grid-template-columns: minmax(0, 1fr) 240px;
gap: 40px;
align-items: end;
}
[data-page="stats"] [data-slot="model-hero-copy"] {
display: grid;
gap: 20px;
min-width: 0;
}
[data-page="stats"] [data-slot="model-back-link"] {
width: fit-content;
color: var(--stats-faint);
font-size: 11px;
font-weight: 500;
line-height: 1;
text-decoration: none;
text-transform: uppercase;
}
[data-page="stats"] [data-slot="model-back-link"]::before {
content: " ";
}
[data-page="stats"] [data-slot="model-back-link"]:hover,
[data-page="stats"] [data-slot="model-back-link"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-section="model-hero"] [data-slot="hero-meta"],
[data-page="stats"] [data-section="lab-hero"] [data-slot="hero-meta"] {
display: inline-flex;
align-items: center;
gap: 8px;
padding-left: 6px;
color: var(--stats-hero-muted);
text-decoration: none;
}
[data-page="stats"] [data-section="model-hero"] a[data-slot="hero-meta"]:hover,
[data-page="stats"] [data-section="model-hero"] a[data-slot="hero-meta"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-section="model-hero"] [data-slot="hero-meta"] svg,
[data-page="stats"] [data-section="lab-hero"] [data-slot="hero-meta"] svg {
width: 14px;
height: 14px;
}
[data-page="stats"] [data-slot="model-hero-tags"] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
}
[data-page="stats"] [data-slot="model-id-tag"] {
display: inline-flex;
align-items: center;
max-width: 100%;
height: 24px;
padding: 0 8px;
overflow: hidden;
color: var(--stats-hero-muted);
background: var(--stats-layer-2);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-section="model-hero"] h1,
[data-page="stats"] [data-section="lab-hero"] h1 {
max-width: 980px;
color: var(--stats-text);
font-size: clamp(38px, 7vw, 72px);
font-weight: 500;
line-height: 0.95;
letter-spacing: 0;
overflow-wrap: anywhere;
}
[data-page="stats"] [data-slot="model-hero-pattern"] {
width: 100%;
height: 18px;
overflow: hidden;
background: var(--stats-hero-pattern);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-slot="model-hero-copy"] p:not([data-slot="hero-meta"]) {
max-width: 720px;
color: var(--stats-muted);
font-size: 16px;
font-weight: 400;
line-height: 1.5;
}
[data-page="stats"] [data-section="lab-hero"] {
align-content: start;
gap: 24px;
min-height: 312px;
padding: 128px 0 40px;
box-shadow: none;
}
[data-page="stats"] [data-component="lab-hero-breadcrumb"] {
display: flex;
align-items: center;
gap: 8px;
height: 24px;
min-width: 0;
}
[data-page="stats"] [data-slot="lab-hero-crumb"] {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: min(100%, 280px);
height: 24px;
box-sizing: border-box;
padding: 0 8px;
overflow: hidden;
background: var(--stats-layer-2);
color: var(--stats-hero-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-decoration: none;
white-space: nowrap;
}
[data-page="stats"] a[data-slot="lab-hero-crumb"] {
color: var(--stats-hero-muted);
}
[data-page="stats"] [data-slot="lab-hero-crumb"][data-current="true"] {
padding-right: 4px;
color: var(--stats-text);
}
[data-page="stats"] a[data-slot="lab-hero-crumb"]:hover,
[data-page="stats"] a[data-slot="lab-hero-crumb"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="lab-hero-crumb"] span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
[data-page="stats"] [data-slot="lab-hero-crumb"] svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: currentColor;
}
[data-page="stats"] [data-slot="lab-hero-separator"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 8px;
height: 24px;
color: var(--stats-faint);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
}
[data-page="stats"] [data-slot="lab-hero-title-row"] {
display: flex;
align-items: center;
gap: 40px;
height: 96px;
min-width: 0;
overflow: hidden;
}
[data-page="stats"] [data-slot="lab-hero-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 64px;
height: 64px;
background: var(--stats-accent-text);
box-shadow: inset 0 0 0 1px #0000001a;
color: #ffffff;
}
[data-page="stats"] [data-slot="lab-hero-avatar"][data-empty="true"] {
background: var(--stats-layer-2);
}
[data-page="stats"] [data-slot="lab-hero-avatar"] svg {
width: 42px;
height: 42px;
}
[data-page="stats"] [data-section="lab-hero"] h1 {
flex: 0 1 auto;
min-width: 0;
max-width: 100%;
overflow: hidden;
color: var(--stats-text);
font-size: 64px;
font-weight: 500;
line-height: 96px;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-hero-pattern"] {
flex: 1 1 0;
min-width: 64px;
height: 64px;
overflow: hidden;
background: color-mix(in srgb, var(--stats-text) 10%, transparent);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-slot="lab-hero-state"] {
max-width: 480px;
color: var(--stats-muted);
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
[data-page="stats"] [data-section="model-hero"] {
align-content: start;
gap: 24px;
min-height: 372px;
padding: 128px 0 40px;
overflow: visible;
box-shadow: none;
}
@media (max-width: 80rem) and (min-width: 74.001rem) {
[data-page="stats"] [data-section="model-hero"] {
padding-right: 40px;
padding-left: 40px;
}
}
[data-page="stats"] [data-component="model-hero-breadcrumb"] {
display: flex;
align-items: center;
gap: 8px;
height: 24px;
min-width: 0;
}
[data-page="stats"] [data-slot="model-hero-crumb"] {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: min(100%, 280px);
height: 24px;
box-sizing: border-box;
padding: 0 8px;
overflow: hidden;
background: var(--stats-layer-2);
color: var(--stats-hero-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-decoration: none;
white-space: nowrap;
}
[data-page="stats"] a[data-slot="model-hero-crumb"] {
color: var(--stats-hero-muted);
}
[data-page="stats"] [data-slot="model-hero-crumb"][data-menu="true"] {
padding-right: 4px;
}
[data-page="stats"] [data-slot="model-hero-crumb"][data-current="true"] {
color: var(--stats-text);
}
[data-page="stats"] [data-component="stats-breadcrumb-select"] {
display: inline-flex;
min-width: 0;
}
[data-page="stats"] button[data-slot="stats-breadcrumb-select-trigger"] {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
flex: 0 1 auto;
max-width: min(100%, 280px);
height: 24px;
box-sizing: border-box;
margin: 0;
padding: 0 4px 0 8px;
overflow: hidden;
border: 0;
border-radius: 0;
appearance: none;
background: var(--stats-layer-2);
color: var(--stats-hero-muted);
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-align: center;
white-space: nowrap;
cursor: pointer;
}
[data-page="stats"] button[data-slot="stats-breadcrumb-select-trigger"][data-current="true"],
[data-page="stats"] button[data-slot="stats-breadcrumb-select-trigger"]:hover,
[data-page="stats"] button[data-slot="stats-breadcrumb-select-trigger"][data-expanded] {
color: var(--stats-text);
}
[data-page="stats"] button[data-slot="stats-breadcrumb-select-trigger"]:focus-visible {
color: var(--stats-text);
outline: 1px solid var(--stats-text);
outline-offset: 2px;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-value"] {
min-width: 0;
overflow: hidden;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-value"] span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-icon"] {
display: inline-flex;
flex: 0 0 auto;
color: var(--stats-faint);
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-icon"] svg {
width: 16px;
height: 16px;
color: currentColor;
}
[data-page="stats"]
button[data-slot="stats-breadcrumb-select-trigger"][data-expanded]
[data-slot="stats-breadcrumb-select-icon"] {
transform: rotate(180deg);
}
[data-page="stats"] [data-popper-positioner]:has([data-component="stats-breadcrumb-select-content"]) {
z-index: 20;
}
[data-page="stats"] [data-component="stats-breadcrumb-select-content"] {
z-index: 20;
width: max-content;
min-width: 180px;
max-width: min(360px, calc(100vw - 48px));
overflow: hidden;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
box-shadow: 0 12px 32px #0000001a;
}
[data-page="stats"] [data-component="stats-breadcrumb-select-content"][data-variant="lab"] {
max-width: min(280px, calc(100vw - 48px));
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-listbox"] {
display: grid;
max-height: min(360px, calc(100vh - 160px));
box-sizing: border-box;
margin: 0;
padding: 6px;
overflow: auto;
list-style: none;
outline: none;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"] {
display: flex;
align-items: center;
min-width: 0;
height: 30px;
box-sizing: border-box;
padding: 0 8px;
overflow: hidden;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
outline: none;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"][data-highlighted],
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"][data-selected] {
background: var(--stats-layer-2);
color: var(--stats-text);
}
[data-page="stats"] a[data-slot="model-hero-crumb"]:hover,
[data-page="stats"] a[data-slot="model-hero-crumb"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-hero-crumb"] span {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
[data-page="stats"] [data-slot="model-hero-crumb"] svg {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: currentColor;
}
[data-page="stats"] [data-slot="model-hero-separator"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 8px;
height: 24px;
color: var(--stats-faint);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
}
[data-page="stats"] [data-slot="model-hero-title-row"] {
display: flex;
align-items: center;
gap: 24px;
min-width: 0;
min-height: 60px;
}
[data-page="stats"] [data-slot="model-hero-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 40px;
height: 40px;
background: var(--stats-accent-text);
box-shadow: inset 0 0 0 1px #0000001a;
color: #ffffff;
}
[data-page="stats"] [data-slot="model-hero-avatar"] svg {
width: 28px;
height: 28px;
}
[data-page="stats"] [data-section="model-hero"] h1 {
flex: 1 1 auto;
min-width: 0;
max-width: none;
overflow: hidden;
color: var(--stats-text);
font-size: 40px;
font-weight: 500;
line-height: 60px;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-hero-actions"] {
display: flex;
align-items: center;
gap: 8px;
flex: 0 0 auto;
margin-left: auto;
}
[data-page="stats"] [data-slot="model-hero-action"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 32px;
box-sizing: border-box;
padding: 0 12px;
background: var(--stats-bg);
color: var(--stats-text);
font-size: 13px;
font-weight: 500;
line-height: 1;
box-shadow:
0 0 0 0 #00000024,
0 0 0 0.5px #00000024,
0 1px 1.5px 0 #0000001a;
text-decoration: none;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-hero-action"]:hover,
[data-page="stats"] [data-slot="model-hero-action"]:focus-visible {
background: var(--stats-layer-2);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-hero-action-icon"] {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: currentColor;
}
[data-page="stats"] [data-section="model-hero"] [data-slot="model-hero-pattern"] {
width: 100%;
height: 16px;
overflow: hidden;
background: color-mix(in srgb, var(--stats-text) 10%, transparent);
mask-position: center top;
-webkit-mask-position: center top;
}
[data-page="stats"] [data-slot="model-hero-rankline"],
[data-page="stats"] [data-slot="model-hero-state"] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
min-height: 24px;
margin: 0;
color: var(--stats-muted);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
[data-page="stats"] [data-slot="model-hero-pill"],
[data-page="stats"] [data-slot="model-hero-sparkline"] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
box-sizing: border-box;
padding: 0 8px;
background: var(--stats-layer-2);
color: var(--stats-hero-muted);
font-size: 13px;
font-weight: 700;
line-height: 1.1;
}
[data-page="stats"] [data-slot="model-hero-rank-group"] {
display: inline-flex;
align-items: center;
gap: 2px;
}
[data-page="stats"] [data-slot="model-hero-sparkline"] {
width: 36px;
padding: 0;
color: #198b43;
}
[data-page="stats"] [data-slot="model-hero-sparkline"] svg {
width: 36px;
height: 24px;
}
[data-page="stats"] [data-section="model-specs"] {
position: relative;
box-sizing: border-box;
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
min-height: 144px;
color: var(--stats-text);
box-shadow:
inset 0 1px var(--stats-line),
inset 0 -1px var(--stats-line),
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
}
[data-page="stats"] [data-component="model-spec"] {
display: grid;
align-content: start;
gap: 8px;
min-width: 0;
min-height: 144px;
box-sizing: border-box;
padding: 40px;
border-left: 1px solid var(--stats-line);
}
[data-page="stats"] [data-component="model-spec"]:first-child {
border-left: 0;
}
[data-page="stats"] [data-component="model-spec"] span {
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
}
[data-page="stats"] [data-component="model-spec"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 28px;
font-weight: 500;
line-height: 1.5;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-section="model-momentum"] {
position: relative;
box-sizing: border-box;
display: grid;
gap: 40px;
min-height: 938px;
padding: 80px 40px;
color: var(--stats-text);
box-shadow:
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
}
[data-page="stats"] [data-slot="model-momentum-title"] {
min-width: 0;
height: 42px;
margin: 0;
overflow: hidden;
color: var(--stats-muted);
font-size: 28px;
font-weight: 400;
line-height: 42px;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-momentum-title"] a {
color: var(--stats-text);
font-weight: 700;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-momentum-title"] a:hover,
[data-page="stats"] [data-slot="model-momentum-title"] a:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-momentum-title"] span {
margin-left: 12px;
}
[data-page="stats"] [data-slot="model-momentum-pattern"] {
width: 100%;
height: 16px;
overflow: hidden;
background: var(--stats-line);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-component="model-momentum-chart"] {
position: relative;
display: grid;
grid-template-rows: 64px 370px 14px;
gap: 16px;
height: 480px;
min-width: 0;
}
[data-page="stats"] [data-slot="model-momentum-summary"] {
display: grid;
align-content: start;
gap: 8px;
width: fit-content;
min-width: 0;
}
[data-page="stats"] [data-slot="model-momentum-total"] {
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
height: 42px;
}
[data-page="stats"] [data-slot="model-momentum-total"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 28px;
font-weight: 700;
line-height: 42px;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-momentum-total"] span,
[data-page="stats"] [data-slot="model-momentum-end"] {
display: inline-flex;
align-items: center;
justify-content: center;
height: 24px;
box-sizing: border-box;
padding: 0 8px;
background: #198b4324;
color: #198b43;
font-size: 13px;
font-weight: 700;
line-height: 14px;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-momentum-total"] span[data-state="negative"],
[data-page="stats"] [data-slot="model-momentum-end"][data-state="negative"] {
background: #b82d3524;
color: #b82d35;
}
[data-page="stats"] [data-slot="model-momentum-summary"] p {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
margin: 0;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 14px;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-momentum-plot"] {
position: relative;
min-width: 0;
height: 370px;
}
[data-page="stats"] [data-slot="model-momentum-plot"] svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
[data-page="stats"] [data-slot="model-momentum-line-muted"],
[data-page="stats"] [data-slot="model-momentum-line-active"] {
fill: none;
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="model-momentum-line-muted"] {
stroke: var(--stats-bar-idle);
}
[data-page="stats"] [data-slot="model-momentum-line-active"] {
stroke: #198b43;
}
[data-page="stats"] [data-slot="model-momentum-marker"] {
fill: var(--stats-bar-idle);
}
[data-page="stats"] [data-slot="model-momentum-marker"][data-active="true"] {
fill: #198b43;
}
[data-page="stats"] [data-slot="model-momentum-end"] {
position: absolute;
top: var(--momentum-end-y);
left: var(--momentum-end-x);
gap: 8px;
height: 14px;
padding: 0;
background: transparent;
transform: translateY(-50%);
}
[data-page="stats"] [data-slot="model-momentum-end"] i {
display: block;
width: 6px;
height: 6px;
background: currentColor;
}
[data-page="stats"] [data-slot="model-momentum-months"] {
position: relative;
height: 14px;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="model-momentum-months"] span {
position: absolute;
top: 0;
transform: translateX(-50%);
}
[data-page="stats"] [data-slot="model-momentum-months"] span:first-child {
transform: none;
}
[data-page="stats"] [data-slot="model-momentum-months"] span:last-child {
transform: translateX(-100%);
}
[data-page="stats"] [data-slot="model-momentum-metrics"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
[data-page="stats"] [data-component="model-momentum-metric"] {
position: relative;
display: grid;
align-content: space-between;
min-width: 0;
min-height: 120px;
box-sizing: border-box;
padding: 16px;
overflow: hidden;
border: 1px solid var(--stats-line);
background:
linear-gradient(180deg, color-mix(in srgb, var(--stats-bg) 76%, transparent), transparent), var(--stats-layer);
}
[data-page="stats"] [data-component="model-momentum-metric"] span {
position: relative;
z-index: 1;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-component="model-momentum-metric"] strong {
position: relative;
z-index: 1;
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 28px;
font-weight: 500;
line-height: 42px;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="model-momentum-metric"] em {
position: absolute;
top: -90px;
left: -69px;
color: var(--stats-text);
font-size: 200px;
font-style: normal;
font-weight: 700;
line-height: 300px;
opacity: 0.04;
pointer-events: none;
white-space: nowrap;
}
[data-page="stats"] [data-section="lab-overview"] {
position: relative;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 720fr) repeat(2, minmax(0, 280fr));
min-height: 192px;
overflow: hidden;
color: var(--stats-text);
box-shadow:
inset 0 1px var(--stats-line),
inset 0 -1px var(--stats-line);
}
[data-page="stats"] [data-section="lab-overview"]::before,
[data-page="stats"] [data-section="lab-overview"]::after {
position: absolute;
top: 1px;
bottom: 1px;
z-index: 2;
width: 1px;
background: var(--stats-line);
content: "";
pointer-events: none;
}
[data-page="stats"] [data-section="lab-overview"]::before {
left: 0;
}
[data-page="stats"] [data-section="lab-overview"]::after {
right: 0;
}
[data-page="stats"] [data-slot="lab-overview-copy"] {
position: relative;
box-sizing: border-box;
min-width: 0;
min-height: 192px;
padding: 60px 40px;
overflow: hidden;
}
[data-page="stats"] [data-slot="lab-overview-copy"] p {
position: relative;
z-index: 1;
max-width: 640px;
color: var(--stats-muted);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
[data-page="stats"] [data-slot="lab-overview-watermark"] {
position: absolute;
top: -224px;
left: 40px;
width: 640px;
height: 640px;
color: var(--stats-layer-2);
opacity: 0.72;
pointer-events: none;
}
[data-page="stats"] [data-component="lab-overview-metric"] {
display: grid;
align-content: start;
box-sizing: border-box;
min-width: 0;
min-height: 192px;
padding: 40px;
position: relative;
}
[data-page="stats"] [data-component="lab-overview-metric"]::before {
position: absolute;
top: 1px;
bottom: 1px;
left: 0;
width: 1px;
background: var(--stats-line);
content: "";
pointer-events: none;
}
[data-page="stats"] [data-component="lab-overview-metric"] span {
min-width: 0;
overflow: hidden;
color: var(--stats-muted);
font-size: 13px;
font-weight: 400;
line-height: 24px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="lab-overview-metric"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: clamp(36px, 5.4vw, 76px);
font-weight: 500;
line-height: 1.15;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-weight-link"] {
width: fit-content;
color: var(--stats-muted);
font-size: 12px;
font-weight: 500;
line-height: 1.3;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-weight-link"]::after {
content: " ↗";
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="model-weight-link"]:hover,
[data-page="stats"] [data-slot="model-weight-link"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-weight-link"]:hover::after,
[data-page="stats"] [data-slot="model-weight-link"]:focus-visible::after {
color: var(--stats-text);
}
[data-page="stats"] [data-component="model-rank-panel"] {
display: grid;
gap: 10px;
min-height: 164px;
padding: 18px;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
}
[data-page="stats"] [data-component="model-rank-panel"] span,
[data-page="stats"] [data-component="model-rank-panel"] p {
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.4;
}
[data-page="stats"] [data-component="model-rank-panel"] strong {
color: var(--stats-text);
font-size: 64px;
font-weight: 500;
line-height: 0.95;
letter-spacing: 0;
}
[data-page="stats"] [data-component="model-catalog"] {
min-width: 0;
}
[data-page="stats"] [data-component="model-catalog-datum"] span {
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
[data-page="stats"] [data-slot="model-catalog-grid"] {
display: flex;
flex-wrap: wrap;
row-gap: 18px;
min-width: 0;
}
[data-page="stats"] [data-component="model-catalog-datum"] {
display: grid;
align-content: start;
flex: 1 1 132px;
gap: 7px;
max-width: 220px;
min-width: 0;
padding: 0 24px;
border-left: 1px solid var(--stats-line);
}
[data-page="stats"] [data-component="model-catalog-datum"]:first-child {
padding-left: 0;
border-left: 0;
}
[data-page="stats"] [data-component="model-catalog-datum"] strong {
min-width: 0;
color: var(--stats-text);
font-size: 20px;
font-weight: 500;
line-height: 1;
overflow-wrap: anywhere;
}
[data-page="stats"] [data-section="model-panel"] {
padding: 80px 40px;
}
[data-page="stats"] [data-component="model-metric-grid"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
}
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"] {
grid-template-columns: repeat(5, minmax(0, 1fr));
}
[data-page="stats"] [data-component="model-metric"] {
display: grid;
gap: 16px;
min-width: 0;
min-height: 132px;
padding: 16px;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
}
[data-page="stats"] [data-component="model-metric"] span,
[data-page="stats"] [data-component="model-metric"] p {
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.3;
}
[data-page="stats"] [data-component="model-metric"] strong {
min-width: 0;
color: var(--stats-text);
font-size: 28px;
font-weight: 500;
line-height: 1;
letter-spacing: 0;
overflow-wrap: anywhere;
}
[data-page="stats"] [data-component="model-metric"][data-state="positive"] strong {
color: #198b43;
}
[data-page="stats"] [data-component="model-metric"][data-state="negative"] strong {
color: #b82d35;
}
[data-page="stats"] [data-slot="model-efficiency-pattern"] {
width: 100%;
height: 16px;
margin-bottom: 40px;
overflow: hidden;
background: color-mix(in srgb, var(--stats-text) 10%, transparent);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] {
display: flex;
align-items: flex-start;
flex-direction: column;
box-sizing: border-box;
gap: 0;
height: 120px;
min-height: 120px;
padding: 16px;
background: var(--stats-layer);
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] span {
line-height: 14px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] strong {
margin-top: 32px;
font-size: 28px;
line-height: 42px;
}
[data-page="stats"] [data-section="model-panel"][data-variant="lab-models"] {
overflow: hidden;
}
[data-page="stats"] [data-slot="lab-model-heading"] {
display: flex;
align-items: center;
justify-content: space-between;
gap: 40px;
min-height: 42px;
margin-bottom: 40px;
}
[data-page="stats"] [data-slot="lab-model-heading"] [data-slot="section-title"] {
min-width: 0;
margin: 0;
}
[data-page="stats"] [data-slot="lab-model-compare"] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
gap: 8px;
height: 32px;
padding: 0 12px 0 8px;
border: 0;
border-radius: 0;
color: var(--stats-text);
background: var(--stats-bg);
box-shadow:
0 0 0 0.5px var(--stats-line-strong),
0 1px 1.5px #0000001a;
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 14px;
white-space: nowrap;
cursor: pointer;
}
[data-page="stats"] [data-slot="lab-model-compare"][hidden] {
display: none;
}
[data-page="stats"] [data-slot="lab-model-compare"]::before {
position: absolute;
top: 0;
right: 0;
left: 0;
height: 16px;
pointer-events: none;
content: "";
background: linear-gradient(180deg, #ffffff00 0%, #ffffff16 100%);
}
[data-page="stats"] [data-slot="lab-model-compare"] span {
position: relative;
z-index: 1;
}
[data-page="stats"] [data-slot="lab-model-compare-icon"] {
width: 16px;
height: 16px;
color: var(--stats-muted);
background:
linear-gradient(currentColor 0 0) 3px 3px / 3px 3px no-repeat,
linear-gradient(currentColor 0 0) 10px 3px / 3px 3px no-repeat,
linear-gradient(currentColor 0 0) 3px 10px / 3px 3px no-repeat,
linear-gradient(currentColor 0 0) 10px 10px / 3px 3px no-repeat;
}
[data-page="stats"] [data-slot="lab-model-compare"]:hover,
[data-page="stats"] [data-slot="lab-model-compare"]:focus-visible {
color: var(--stats-text);
outline: none;
box-shadow:
0 0 0 0.5px var(--stats-text),
0 1px 1.5px #0000001a;
}
[data-page="stats"] [data-slot="lab-model-pattern"] {
height: 16px;
margin-bottom: 40px;
overflow: hidden;
background: color-mix(in srgb, var(--stats-text) 10%, transparent);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-component="lab-model-table"] {
--lab-model-row-bleed: 16px;
box-sizing: border-box;
width: calc(100% + 32px);
margin-inline: -16px;
padding-inline: 16px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
[data-page="stats"] [data-component="lab-model-table"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-slot="lab-model-table-track"] {
--lab-model-column-template: 240px repeat(4, 200px) minmax(160px, 1fr);
--lab-model-table-width: 1200px;
position: relative;
display: grid;
width: 100%;
min-width: var(--lab-model-table-width);
}
[data-page="stats"] [data-slot="lab-model-table-track"]::before {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
content: "";
background:
linear-gradient(var(--stats-line), var(--stats-line)) 240px 0 / 1px 100% no-repeat,
linear-gradient(var(--stats-line), var(--stats-line)) 440px 0 / 1px 100% no-repeat,
linear-gradient(var(--stats-line), var(--stats-line)) 640px 0 / 1px 100% no-repeat,
linear-gradient(var(--stats-line), var(--stats-line)) 840px 0 / 1px 100% no-repeat,
linear-gradient(var(--stats-line), var(--stats-line)) 1040px 0 / 1px 100% no-repeat;
}
[data-page="stats"] [data-slot="lab-model-table-head"],
[data-page="stats"] [data-component="lab-model-row"] {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: var(--lab-model-column-template);
}
[data-page="stats"] [data-slot="lab-model-table-head"] {
align-items: start;
height: 20px;
margin-bottom: 20px;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 20px;
text-transform: uppercase;
}
[data-page="stats"] [data-slot="lab-model-table-head"] span,
[data-page="stats"] [data-slot="lab-model-cell"] {
min-width: 0;
}
[data-page="stats"] [data-slot="lab-model-table-head"] span:not([data-column="model"]) {
padding-left: 40px;
}
[data-page="stats"] [data-component="lab-model-row"] {
align-items: center;
height: 64px;
color: var(--stats-text);
text-decoration: none;
isolation: isolate;
}
[data-page="stats"] [data-component="lab-model-row"]::before {
position: absolute;
top: 8px;
right: calc(var(--lab-model-row-bleed) * -1);
bottom: 8px;
left: calc(var(--lab-model-row-bleed) * -1);
z-index: 0;
content: "";
background: transparent;
pointer-events: none;
}
[data-page="stats"] [data-component="lab-model-row"]:hover,
[data-page="stats"] [data-component="lab-model-row"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-component="lab-model-row"]:hover::before,
[data-page="stats"] [data-component="lab-model-row"]:focus-visible::before {
background: var(--stats-layer);
}
[data-page="stats"] [data-slot="lab-model-cell"] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
height: 24px;
color: var(--stats-text);
font-size: 16px;
font-weight: 400;
line-height: 24px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-model-cell"][data-column="model"] {
gap: 16px;
}
[data-page="stats"] [data-slot="lab-model-cell"]:not([data-column="model"]):not([data-column="release"]) {
justify-content: flex-end;
padding-right: 40px;
text-align: right;
}
[data-page="stats"] [data-slot="lab-model-cell"][data-column="release"] {
padding-left: 40px;
}
[data-page="stats"] [data-slot="lab-model-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 20px;
height: 20px;
color: #ffffff;
background: var(--stats-accent-text);
box-shadow: inset 0 0 0 1px #0000001a;
}
[data-page="stats"] [data-slot="lab-model-avatar"] svg {
width: 15px;
height: 15px;
}
[data-page="stats"] [data-slot="lab-model-cell"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: inherit;
font-weight: 500;
line-height: inherit;
text-overflow: ellipsis;
}
[data-page="stats"] [data-component="lab-model-tooltip"] {
position: fixed;
top: var(--lab-model-tooltip-y);
left: var(--lab-model-tooltip-x);
z-index: 40;
width: 240px;
color: var(--stats-text);
background: var(--stats-bg);
border: 1px solid var(--stats-line);
box-shadow: 0 12px 24px #0000001f;
pointer-events: none;
transform: translate(12px, -50%);
}
[data-page="stats"] [data-component="lab-model-tooltip"][data-placement="left"] {
transform: translate(calc(-100% - 12px), -50%);
}
[data-page="stats"] [data-slot="lab-model-tooltip-summary"] {
display: grid;
gap: 6px;
min-width: 0;
padding: 12px;
}
[data-page="stats"] [data-slot="lab-model-tooltip-head"] {
display: flex;
align-items: center;
gap: 8px;
min-width: 0;
}
[data-page="stats"] [data-slot="lab-model-tooltip-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 16px;
height: 16px;
color: #ffffff;
background: var(--stats-accent-text);
box-shadow: inset 0 0 0 1px #0000001a;
}
[data-page="stats"] [data-slot="lab-model-tooltip-avatar"] svg {
width: 12px;
height: 12px;
}
[data-page="stats"] [data-slot="lab-model-tooltip-head"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 12px;
font-weight: 500;
line-height: 17px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-model-tooltip-summary"] > p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
margin: 0;
color: var(--stats-muted);
font-size: 12px;
font-weight: 400;
line-height: 17px;
}
[data-page="stats"] [data-component="lab-model-tooltip"] [data-slot="tooltip-divider"] {
height: 0.5px;
background: var(--stats-line);
}
[data-page="stats"] [data-slot="lab-model-tooltip-metrics"] {
display: grid;
padding: 12px;
}
[data-page="stats"] [data-slot="lab-model-tooltip-metrics"] p {
display: grid;
grid-template-columns: minmax(0, 100px) minmax(0, 1fr);
align-items: center;
column-gap: 16px;
min-width: 0;
height: 17px;
margin: 0;
padding: 0;
color: var(--stats-muted);
font-size: 12px;
font-weight: 400;
line-height: 17px;
}
[data-page="stats"] [data-slot="lab-model-tooltip-metrics"] span,
[data-page="stats"] [data-slot="lab-model-tooltip-metrics"] b {
min-width: 0;
overflow: hidden;
font: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-model-tooltip-metrics"] b {
color: var(--stats-text);
font-weight: 500;
font-variant-numeric: tabular-nums;
text-align: right;
}
[data-page="stats"] [data-section="model-panel"][data-variant="lab-related"] {
min-height: 465px;
}
[data-page="stats"] [data-component="lab-related-list"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
min-width: 0;
}
[data-page="stats"] [data-component="lab-related-card"] {
position: relative;
display: grid;
grid-template-rows: 42px 40px 20px 1px 24px;
gap: 16px;
min-width: 0;
height: 223px;
overflow: hidden;
box-sizing: border-box;
padding: 16px;
color: var(--stats-text);
background: var(--stats-layer);
border: 1px solid var(--stats-line);
box-shadow: 0 1px 2px #00000008;
text-decoration: none;
transition:
background 140ms ease,
border-color 140ms ease,
box-shadow 140ms ease,
transform 140ms ease;
}
[data-page="stats"] [data-component="lab-related-card"]:hover,
[data-page="stats"] [data-component="lab-related-card"]:focus-visible {
color: var(--stats-text);
background: var(--stats-bg);
border-color: var(--stats-line-strong);
outline: none;
box-shadow:
0 0 0 0.5px #00000014,
0 6px 16px #0000000d,
0 2px 6px #0000000f;
transform: translateY(-1px);
}
[data-page="stats"] [data-slot="lab-related-watermark"] {
position: absolute;
top: -128px;
right: -132px;
width: 480px;
height: 480px;
color: var(--stats-bg);
opacity: 0.82;
pointer-events: none;
}
[data-page="stats"] [data-slot="lab-related-heading"] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 16px;
min-width: 0;
}
[data-page="stats"] [data-slot="lab-related-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 28px;
height: 28px;
color: #ffffff;
background: var(--stats-accent-text);
box-shadow: inset 0 0 0 1px #0000001a;
}
[data-page="stats"] [data-slot="lab-related-avatar"] svg {
width: 21px;
height: 21px;
}
[data-page="stats"] [data-slot="lab-related-heading"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 28px;
font-weight: 500;
line-height: 42px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-related-copy"],
[data-page="stats"] [data-slot="lab-related-models"] {
position: relative;
z-index: 1;
min-width: 0;
overflow: hidden;
margin: 0;
color: var(--stats-muted);
font-size: 13px;
font-weight: 400;
line-height: 20px;
}
[data-page="stats"] [data-slot="lab-related-copy"] {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
[data-page="stats"] [data-slot="lab-related-models"] {
color: var(--stats-text);
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-related-divider"] {
position: relative;
z-index: 1;
align-self: center;
height: 1px;
background: var(--stats-line);
}
[data-page="stats"] [data-slot="lab-related-usage"] {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 2px;
min-width: 0;
}
[data-page="stats"] [data-slot="lab-related-usage"] > span {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
height: 24px;
padding: 0 8px;
color: var(--stats-text);
background: var(--stats-layer-2);
font-size: 13px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="lab-related-usage"] i {
display: flex;
align-items: center;
gap: 2px;
flex: 0 0 auto;
height: 24px;
padding: 0 6px;
background: var(--stats-layer-2);
font-style: normal;
}
[data-page="stats"] [data-slot="lab-related-usage"] b {
display: block;
width: 3px;
height: 12px;
background: var(--stats-bar-idle);
}
[data-page="stats"]
[data-component="lab-related-card"][data-tone="high"]
[data-slot="lab-related-usage"]
b[data-active="true"] {
background: #198b43;
}
[data-page="stats"]
[data-component="lab-related-card"][data-tone="mid"]
[data-slot="lab-related-usage"]
b[data-active="true"] {
background: #d69a00;
}
[data-page="stats"]
[data-component="lab-related-card"][data-tone="low"]
[data-slot="lab-related-usage"]
b[data-active="true"] {
background: #b82d35;
}
[data-page="stats"] [data-component="model-usage-chart"] {
--model-usage-bar-gap: 6px;
--model-usage-dot-size: 6px;
--model-usage-dot-offset: 2px;
position: relative;
display: grid;
grid-template-rows: 40px minmax(0, 1fr);
gap: 12px;
height: clamp(320px, 42vh, 392px);
min-width: 0;
}
[data-page="stats"] [data-slot="model-usage-axis"],
[data-page="stats"] [data-slot="model-usage-bars"] {
display: flex;
min-width: 0;
}
[data-page="stats"] [data-slot="model-usage-axis"] {
gap: var(--model-usage-bar-gap);
}
[data-page="stats"] [data-slot="model-usage-axis"] > div {
flex: 1 1 0;
min-width: 0;
color: var(--stats-faint);
font-size: 11px;
font-weight: 500;
line-height: 1.35;
}
[data-page="stats"] [data-slot="model-usage-axis"] > div[data-active="true"] {
color: var(--stats-text);
}
[data-page="stats"] [data-slot="model-usage-label"] {
display: flex;
flex-direction: column;
min-width: 0;
}
[data-page="stats"] [data-slot="model-usage-total"] {
color: var(--stats-muted);
font-weight: 600;
}
[data-page="stats"] [data-slot="model-usage-date"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-usage-column"] {
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
height: 100%;
padding-inline: calc(var(--model-usage-bar-gap) / 2);
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="model-usage-column"]::before {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: calc(100% - var(--model-usage-bar-gap));
transform: translateX(-50%);
content: "";
background: var(--stats-dot);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: var(--model-usage-dot-offset) top;
mask-repeat: repeat;
mask-size: var(--model-usage-dot-size) var(--model-usage-dot-size);
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: var(--model-usage-dot-offset) top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: var(--model-usage-dot-size) var(--model-usage-dot-size);
}
@supports (width: round(down, 100%, 1px)) {
[data-page="stats"] [data-slot="model-usage-column"]::before {
width: round(down, calc(100% - var(--model-usage-bar-gap)), var(--model-usage-dot-size));
}
}
[data-page="stats"] [data-slot="model-usage-bar"] {
position: absolute;
right: calc(var(--model-usage-bar-gap) / 2);
bottom: 0;
left: calc(var(--model-usage-bar-gap) / 2);
z-index: 1;
height: var(--model-usage-fill);
min-height: 0;
background: var(--stats-accent);
box-shadow: 0 -4px 0 var(--stats-bg);
transition:
background 120ms ease,
opacity 120ms ease;
}
[data-page="stats"] [data-slot="model-usage-column"][data-muted="true"] [data-slot="model-usage-bar"] {
background: var(--stats-layer-2);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-dense-labels="true"]
[data-slot="model-usage-axis"]
> div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
font-weight: 600;
}
[data-page="stats"] [data-component="model-usage-chart"][data-dense-labels="true"] [data-slot="model-usage-label"] {
position: absolute;
left: 50%;
width: max-content;
max-width: 72px;
transform: rotate(-90deg) translateX(-50%);
transform-origin: left center;
}
[data-page="stats"] [data-component="model-usage-chart"][data-dense-labels="true"] [data-slot="model-usage-total"] {
display: none;
}
[data-page="stats"]
[data-slot="model-usage-axis"]
> div[data-label-hidden="true"]:not([data-active="true"])
[data-slot="model-usage-label"] {
visibility: hidden;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] {
top: 12px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 0;
width: 176px;
min-width: 176px;
padding: 0;
border: 0;
box-shadow:
0 0 0 0.5px #00000024,
0 8px 16px #0000000f,
0 4px 8px #00000014;
color: var(--stats-text);
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"][data-placement="right"] {
right: auto;
left: calc(100% + 8px);
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"][data-placement="left"] {
right: calc(100% + 8px);
left: auto;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] strong,
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] > span {
display: block;
font-size: 11px;
line-height: 12px;
white-space: nowrap;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] strong {
padding: 8px 8px 0;
font-weight: 500;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] > span {
padding: 4px 8px 8px;
color: var(--stats-muted);
}
[data-page="stats"]
[data-component="model-usage-chart"]
[data-component="chart-tooltip"]
[data-slot="tooltip-divider"] {
height: 0.5px;
margin: 0;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] p {
grid-template-columns: minmax(0, 1fr) auto;
gap: 4px;
height: 20px;
margin: 8px 0;
padding: 0 8px;
font-size: 11px;
font-weight: 500;
line-height: 12px;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] [data-slot="tooltip-label"] {
grid-template-columns: 16px minmax(0, 1fr);
gap: 4px;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] i {
width: 6px;
height: 6px;
justify-self: center;
background: var(--stats-accent);
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] b {
font-weight: 500;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] {
--lab-usage-gap: 4px;
--lab-usage-column-gutter: calc(var(--lab-usage-gap) / 2);
--lab-usage-bar-height: 76px;
--lab-usage-line-bottom: 124px;
--lab-usage-bar: #dbdbdb;
--lab-usage-line: #808080;
--lab-usage-active: #3b5cf6;
--lab-usage-band: #f2f2f2;
grid-template-rows: minmax(0, 450px) 14px;
gap: 40px;
height: 504px;
}
[data-page="stats"] [data-slot="lab-usage-plot"] {
position: relative;
min-width: 0;
min-height: 0;
overflow: visible;
}
[data-page="stats"] [data-slot="lab-usage-plot"]::after {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--stats-text) 3%, transparent));
content: "";
pointer-events: none;
}
[data-page="stats"] [data-slot="lab-usage-line"] {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
display: block;
width: 100%;
height: calc(100% - var(--lab-usage-line-bottom));
overflow: visible;
pointer-events: none;
}
[data-page="stats"] [data-slot="lab-usage-line"][data-layer="base"] {
z-index: 2;
}
[data-page="stats"] [data-slot="lab-usage-line"][data-layer="active"] {
z-index: 4;
}
[data-page="stats"] [data-slot="lab-usage-line"] path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="lab-usage-line-base"] {
stroke: var(--lab-usage-line);
}
[data-page="stats"] [data-slot="lab-usage-line-active"] {
stroke: var(--lab-usage-active);
}
[data-page="stats"] [data-slot="lab-usage-bars"] {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
gap: 0;
min-width: 0;
}
[data-page="stats"] [data-slot="lab-usage-column"] {
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
height: 100%;
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="lab-usage-column"]::before {
position: absolute;
inset: 0;
z-index: 1;
background: transparent;
content: "";
pointer-events: none;
transition: background 120ms ease;
}
[data-page="stats"] [data-slot="lab-usage-column"][data-active="true"]::before,
[data-page="stats"] [data-slot="lab-usage-column"]:focus-visible::before {
background: var(--lab-usage-band);
box-shadow:
inset var(--lab-usage-column-gutter) 0 0 var(--stats-bg),
inset calc(var(--lab-usage-column-gutter) * -1) 0 0 var(--stats-bg);
}
[data-page="stats"] [data-slot="lab-usage-token-bar"] {
position: absolute;
right: var(--lab-usage-column-gutter);
bottom: 0;
left: var(--lab-usage-column-gutter);
z-index: 2;
height: var(--lab-usage-token-height);
background: var(--lab-usage-bar);
transition:
background 120ms ease,
opacity 120ms ease;
}
[data-page="stats"] [data-slot="lab-usage-column"][data-active="true"] [data-slot="lab-usage-token-bar"] {
background: var(--lab-usage-active);
}
[data-page="stats"] [data-slot="lab-usage-column"][data-muted="true"] [data-slot="lab-usage-token-bar"] {
opacity: 0.64;
}
[data-page="stats"] [data-slot="lab-usage-months"] {
position: relative;
height: 14px;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="lab-usage-months"] span {
position: absolute;
top: 0;
left: var(--lab-usage-month-left);
transform: translateX(-50%);
}
[data-page="stats"] [data-slot="lab-usage-months"] span[data-align="start"] {
transform: none;
}
[data-page="stats"] [data-slot="lab-usage-months"] span[data-align="end"] {
transform: translateX(-100%);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] {
z-index: 6;
top: clamp(12px, calc(var(--lab-usage-user-y) * 1% - 46px), calc(100% - 108px));
width: 192px;
min-width: 192px;
background: var(--stats-bg);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"][data-placement="right"] {
right: auto;
left: calc(var(--lab-usage-tooltip-right) + 8px);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"][data-placement="left"] {
right: calc(100% - var(--lab-usage-tooltip-left) + 8px);
left: auto;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] p {
height: 16px;
margin: 4px 0;
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"]
i[data-kind="tokens"] {
background: var(--lab-usage-active);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"]
i[data-kind="users"] {
background: var(--lab-usage-line);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] {
--model-trend-gap: 4px;
--model-trend-column-gutter: calc(var(--model-trend-gap) / 2);
--model-trend-bar-height: 76px;
--model-trend-line-bottom: 124px;
--model-trend-bar: #dbdbdb;
--model-trend-line: #808080;
--model-trend-active: #3b5cf6;
--model-trend-band: #f2f2f2;
grid-template-rows: minmax(0, 450px) 14px;
gap: 40px;
height: 504px;
}
[data-page="stats"] [data-slot="model-trend-plot"] {
position: relative;
min-width: 0;
min-height: 0;
overflow: visible;
}
[data-page="stats"] [data-slot="model-trend-plot"]::after {
position: absolute;
inset: 0;
z-index: 0;
background: linear-gradient(to bottom, transparent 42%, color-mix(in srgb, var(--stats-text) 3%, transparent));
content: "";
pointer-events: none;
}
[data-page="stats"] [data-slot="model-trend-line"] {
position: absolute;
top: 0;
right: 0;
bottom: auto;
left: 0;
display: block;
width: 100%;
height: calc(100% - var(--model-trend-line-bottom));
overflow: visible;
pointer-events: none;
}
[data-page="stats"] [data-slot="model-trend-line"][data-layer="base"] {
z-index: 2;
}
[data-page="stats"] [data-slot="model-trend-line"][data-layer="active"] {
z-index: 4;
}
[data-page="stats"] [data-slot="model-trend-area-layer"] {
position: absolute;
inset: 0;
z-index: 1;
display: block;
width: 100%;
height: 100%;
overflow: visible;
pointer-events: none;
}
[data-page="stats"] [data-slot="model-trend-area-layer"] [data-slot="model-trend-area"] {
stroke: none;
}
[data-page="stats"] [data-slot="model-trend-line"] path {
fill: none;
stroke-linecap: round;
stroke-linejoin: round;
stroke-width: 1.5;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="model-trend-line-base"] {
stroke: var(--model-trend-line);
}
[data-page="stats"] [data-slot="model-trend-line-base"][data-tone="active"] {
stroke: var(--model-trend-active);
}
[data-page="stats"] [data-slot="model-trend-line-active"] {
stroke: var(--model-trend-active);
}
[data-page="stats"] [data-slot="model-trend-end-marker"] {
position: absolute;
top: var(--model-trend-end-top);
left: var(--model-trend-end-x);
z-index: 3;
width: 6px;
height: 6px;
background: var(--model-trend-bar);
transform: translate(-50%, -50%);
pointer-events: none;
}
[data-page="stats"] [data-slot="model-trend-end-marker"][data-tone="active"] {
background: var(--model-trend-active);
}
[data-page="stats"] [data-slot="model-trend-bars"] {
position: absolute;
inset: 0;
z-index: 3;
display: flex;
gap: 0;
min-width: 0;
}
[data-page="stats"] [data-slot="model-trend-column"] {
position: relative;
box-sizing: border-box;
flex: 1 1 0;
min-width: 0;
height: 100%;
outline: none;
cursor: pointer;
}
[data-page="stats"] [data-slot="model-trend-column"]::before {
position: absolute;
inset: 0;
z-index: 1;
background: transparent;
content: "";
pointer-events: none;
transition: background 120ms ease;
}
[data-page="stats"] [data-slot="model-trend-column"][data-active="true"]::before,
[data-page="stats"] [data-slot="model-trend-column"]:focus-visible::before {
background: var(--model-trend-band);
box-shadow:
inset var(--model-trend-column-gutter) 0 0 var(--stats-bg),
inset calc(var(--model-trend-column-gutter) * -1) 0 0 var(--stats-bg);
}
[data-page="stats"] [data-slot="model-trend-token-band"] {
position: absolute;
right: var(--model-trend-column-gutter);
bottom: 0;
left: var(--model-trend-column-gutter);
z-index: 2;
height: var(--model-trend-bar-height);
}
[data-page="stats"] [data-slot="model-trend-token-bar"] {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: var(--model-trend-token-height);
background: var(--model-trend-bar);
transition:
background 120ms ease,
opacity 120ms ease;
}
[data-page="stats"]
[data-component="model-usage-chart"][data-highlight-bars="true"]
[data-slot="model-trend-column"][data-active="true"]
[data-slot="model-trend-token-bar"] {
background: var(--model-trend-active);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-highlight-bars="true"]
[data-slot="model-trend-column"][data-muted="true"]
[data-slot="model-trend-token-bar"] {
opacity: 0.64;
}
[data-page="stats"] [data-slot="model-trend-months"] {
position: relative;
height: 14px;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="model-trend-months"] span {
position: absolute;
top: 0;
left: var(--model-trend-month-left);
transform: translateX(-50%);
}
[data-page="stats"] [data-slot="model-trend-months"] span[data-align="start"] {
transform: none;
}
[data-page="stats"] [data-slot="model-trend-months"] span[data-align="end"] {
transform: translateX(-100%);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] [data-component="chart-tooltip"] {
z-index: 6;
top: clamp(12px, calc(var(--model-trend-tooltip-y) * 1% - 46px), calc(100% - 108px));
width: 192px;
min-width: 192px;
background: var(--stats-bg);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"][data-placement="right"] {
right: auto;
left: calc(var(--model-trend-tooltip-right) + 8px);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"][data-placement="left"] {
right: calc(100% - var(--model-trend-tooltip-left) + 8px);
left: auto;
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"]
p {
height: 16px;
margin: 8px 0;
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"]
i[data-kind="tokens"] {
background: var(--model-trend-active);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"]
i[data-kind="users"] {
background: var(--model-trend-active);
}
[data-page="stats"] [data-component="model-peer-list"] {
display: grid;
grid-auto-flow: column;
grid-auto-columns: minmax(0, 1fr);
grid-template-rows: repeat(5, 64px);
gap: 12px 40px;
margin: 0;
padding: 0;
list-style: none;
}
[data-page="stats"] [data-component="model-peer-list"] a {
display: grid;
grid-template-columns: 32px 32px minmax(0, 1fr) minmax(64px, auto);
gap: 16px;
align-items: center;
box-sizing: border-box;
height: 64px;
padding: 15px 16px;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
color: var(--stats-text);
text-decoration: none;
}
[data-page="stats"] [data-component="model-peer-list"] a:hover,
[data-page="stats"] [data-component="model-peer-list"] a[data-active="true"] {
border-color: var(--stats-text);
background: var(--stats-bg);
text-decoration: none;
}
[data-page="stats"] [data-slot="model-peer-rank"],
[data-page="stats"] [data-component="model-peer-list"] em,
[data-page="stats"] [data-component="model-peer-list"] b {
color: var(--stats-muted);
font-size: 13px;
font-style: normal;
font-weight: 500;
line-height: 16px;
font-variant-numeric: tabular-nums;
}
[data-page="stats"] [data-slot="model-peer-rank"] {
position: relative;
display: grid;
place-items: center;
width: 32px;
height: 32px;
}
[data-page="stats"] [data-component="model-peer-list"] a[data-active="true"] [data-slot="model-peer-rank"]::before {
width: 6px;
height: 6px;
content: "";
background: var(--stats-text);
}
[data-page="stats"] [data-slot="model-peer-avatar"] {
display: grid;
place-items: center;
width: 32px;
height: 32px;
color: var(--stats-muted);
background: var(--stats-bg);
box-shadow: inset 0 0 0 1px var(--stats-line);
}
[data-page="stats"] [data-slot="model-peer-avatar"] svg {
width: 18px;
height: 18px;
}
[data-page="stats"] [data-slot="model-peer-copy"] {
display: grid;
gap: 2px;
min-width: 0;
}
[data-page="stats"] [data-component="model-peer-list"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 13px;
font-weight: 600;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="model-peer-list"] b {
justify-self: end;
color: var(--stats-text);
}
[data-page="stats"] [data-section="model-panel"][data-variant="compact"] {
padding-top: 56px;
padding-bottom: 56px;
}
[data-page="stats"] [data-component="comparison-card-grid"] {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 8px;
}
[data-page="stats"] [data-component="comparison-card"] {
display: grid;
align-content: space-between;
gap: 18px;
min-height: 168px;
min-width: 0;
padding: 16px;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
color: var(--stats-text);
text-decoration: none;
}
[data-page="stats"] [data-component="comparison-card"]:hover,
[data-page="stats"] [data-component="comparison-card"]:focus-visible {
border-color: var(--stats-text);
outline: none;
background: var(--stats-bg);
text-decoration: none;
}
[data-page="stats"] [data-component="comparison-card"] span,
[data-page="stats"] [data-component="comparison-card"] p,
[data-page="stats"] [data-component="comparison-card"] small {
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.35;
}
[data-page="stats"] [data-component="comparison-card"] strong {
min-width: 0;
color: var(--stats-text);
font-size: 20px;
font-weight: 500;
line-height: 1.08;
overflow-wrap: anywhere;
}
[data-page="stats"] [data-component="comparison-card"] em {
color: var(--stats-faint);
font: inherit;
}
[data-page="stats"] [data-component="comparison-card"] p {
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
[data-page="stats"] [data-component="comparison-card"] b {
min-width: 0;
overflow: hidden;
font: inherit;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-component="comparison-card"] i {
flex: 0 0 auto;
width: 16px;
height: 1px;
background: var(--stats-line-strong);
}
[data-page="stats"] [data-component="comparison-selector"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
gap: 8px;
align-items: end;
max-width: 920px;
}
[data-page="stats"] [data-component="comparison-selector"] label {
display: grid;
gap: 8px;
min-width: 0;
}
[data-page="stats"] [data-component="comparison-selector"] label span {
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.2;
}
[data-page="stats"] [data-component="comparison-selector"] select,
[data-page="stats"] [data-component="comparison-selector"] button {
box-sizing: border-box;
height: 40px;
min-width: 0;
border: 1px solid var(--stats-line);
border-radius: 0;
appearance: none;
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1;
}
[data-page="stats"] [data-component="comparison-selector"] select {
width: 100%;
padding: 0 36px 0 12px;
background:
linear-gradient(45deg, transparent 50%, var(--stats-muted) 50%) calc(100% - 18px) 17px / 5px 5px no-repeat,
linear-gradient(135deg, var(--stats-muted) 50%, transparent 50%) calc(100% - 13px) 17px / 5px 5px no-repeat,
var(--stats-bg);
color: var(--stats-text);
}
[data-page="stats"] [data-component="comparison-selector"] button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 14px;
background: var(--stats-text);
color: var(--stats-bg);
cursor: pointer;
text-decoration: none;
white-space: nowrap;
}
[data-page="stats"] [data-component="comparison-selector"] button:disabled {
cursor: not-allowed;
opacity: 0.45;
}
[data-page="stats"] [data-component="comparison-selector"] select:focus-visible,
[data-page="stats"] [data-component="comparison-selector"] button:focus-visible {
outline: 2px solid var(--stats-accent);
outline-offset: 2px;
}
[data-page="stats"] [data-component="comparison-table-wrap"] {
overflow-x: auto;
border: 1px solid var(--stats-line);
background: var(--stats-layer);
}
[data-page="stats"] [data-component="comparison-table"] {
width: 100%;
min-width: 720px;
border-collapse: collapse;
color: var(--stats-text);
font-size: 13px;
line-height: 1.35;
}
[data-page="stats"] [data-component="comparison-table"] caption {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
}
[data-page="stats"] [data-component="comparison-table"] th,
[data-page="stats"] [data-component="comparison-table"] td {
min-width: 0;
padding: 14px 16px;
border-bottom: 1px solid var(--stats-line);
border-left: 1px solid var(--stats-line);
text-align: left;
vertical-align: top;
}
[data-page="stats"] [data-component="comparison-table"] th:first-child {
border-left: 0;
}
[data-page="stats"] [data-component="comparison-table"] thead th {
color: var(--stats-muted);
font-size: 11px;
font-weight: 600;
line-height: 1.2;
text-transform: uppercase;
}
[data-page="stats"] [data-component="comparison-table"] tbody tr:last-child th,
[data-page="stats"] [data-component="comparison-table"] tbody tr:last-child td {
border-bottom: 0;
}
[data-page="stats"] [data-component="comparison-table"] tbody th {
width: 34%;
background: var(--stats-bg);
}
[data-page="stats"] [data-component="comparison-table"] tbody th strong,
[data-page="stats"] [data-component="comparison-table"] td strong {
display: block;
color: var(--stats-text);
font-size: 13px;
font-weight: 600;
line-height: 1.25;
overflow-wrap: anywhere;
}
[data-page="stats"] [data-component="comparison-table"] tbody th span,
[data-page="stats"] [data-component="comparison-table"] td span {
display: block;
margin-top: 5px;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.35;
}
[data-page="stats"] [data-component="comparison-table"] td[data-best="true"] {
position: relative;
background: var(--stats-bg);
box-shadow: inset 0 0 0 1px var(--stats-accent);
}
[data-page="stats"] [data-component="comparison-table"] td[data-best="true"]::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
content: "";
background: var(--stats-accent);
}
[data-page="stats"] [data-section="compare-home-hero"],
[data-page="stats"] [data-section="compare-home-selector"],
[data-page="stats"] [data-section="compare-home-related"] {
position: relative;
box-sizing: border-box;
color: var(--stats-text);
}
[data-page="stats"] [data-section="compare-home-hero"] {
display: grid;
align-content: end;
gap: 24px;
min-height: 316px;
padding: 128px 40px 40px;
}
[data-page="stats"] [data-component="compare-home-breadcrumb"] {
display: flex;
align-items: center;
gap: 8px;
height: 24px;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-home-crumb"] {
display: inline-flex;
align-items: center;
height: 24px;
box-sizing: border-box;
padding: 0 8px;
color: var(--stats-hero-muted);
background: var(--stats-layer-2);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-decoration: none;
white-space: nowrap;
}
[data-page="stats"] a[data-slot="compare-home-crumb"] {
color: var(--stats-hero-muted);
}
[data-page="stats"] [data-component="compare-home-breadcrumb"] [data-slot="compare-home-crumb"][data-current="true"] {
color: var(--stats-text);
}
[data-page="stats"] a[data-slot="compare-home-crumb"]:hover,
[data-page="stats"] a[data-slot="compare-home-crumb"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="compare-home-separator"] {
color: var(--stats-faint);
font-size: 13px;
font-weight: 500;
line-height: 1;
}
[data-page="stats"] [data-slot="compare-home-hero-grid"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(320px, 519px);
gap: 24px;
align-items: center;
}
[data-page="stats"] [data-section="compare-home-hero"] h1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
min-width: 0;
margin: 0;
color: var(--stats-text);
font-size: 40px;
font-weight: 500;
line-height: 60px;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="compare-home-avatar-stack"] {
display: inline-flex;
align-items: center;
height: 46px;
padding-inline: 2px;
}
[data-page="stats"] [data-slot="compare-home-avatar-frame"] {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
padding: 3px;
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-home-avatar-frame"] + [data-slot="compare-home-avatar-frame"] {
margin-left: -16px;
}
[data-page="stats"] [data-slot="compare-home-avatar"] {
display: grid;
place-items: center;
flex: 0 0 auto;
color: #ffffff;
background: var(--stats-accent-text);
box-shadow: inset 0 0 0 1px #0000001a;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-lab="deepseek"] {
background: #5d6ff4;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-lab="openai"] {
background: #252525;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-lab="anthropic"] {
background: #c99b75;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-size="large"] {
width: 40px;
height: 40px;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-size="large"] svg {
width: 28px;
height: 28px;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-size="small"] {
width: 20px;
height: 20px;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-size="small"] svg {
width: 15px;
height: 15px;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-size="tiny"] {
width: 16px;
height: 16px;
}
[data-page="stats"] [data-slot="compare-home-avatar"][data-size="tiny"] svg {
width: 12px;
height: 12px;
}
[data-page="stats"] [data-slot="compare-home-hero-grid"] > p {
max-width: 520px;
margin: 0;
color: var(--stats-muted);
font-size: 16px;
font-weight: 400;
line-height: 24px;
}
[data-page="stats"] [data-slot="compare-home-pattern"] {
width: calc(100% + 80px);
height: 16px;
margin-inline: -40px;
overflow: hidden;
background: color-mix(in srgb, var(--stats-text) 10%, transparent);
mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
mask-position: center top;
mask-repeat: repeat;
mask-size: 6px 6px;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0H2V2H0V0Z' fill='black'/%3E%3C/svg%3E");
-webkit-mask-position: center top;
-webkit-mask-repeat: repeat;
-webkit-mask-size: 6px 6px;
}
[data-page="stats"] [data-section="compare-home-selector"] {
min-height: 98px;
border-top: 1px solid var(--stats-line);
border-bottom: 1px solid var(--stats-line);
box-shadow:
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
}
[data-page="stats"] [data-component="compare-home-selector"] {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 96px;
}
[data-page="stats"] [data-component="compare-home-selector"] button[data-slot="compare-home-select-panel"] {
position: relative;
display: grid;
place-items: center;
min-width: 0;
min-height: 96px;
padding: 0;
border: 0;
appearance: none;
border-radius: 0;
color: var(--stats-text);
background: var(--stats-bg);
cursor: pointer;
font: inherit;
text-align: inherit;
}
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]:first-child::before,
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]:last-child::after {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
content: "";
background: var(--stats-line);
pointer-events: none;
}
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]:first-child::before {
left: 0;
}
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]:last-child::after {
right: 0;
}
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]
+ button[data-slot="compare-home-select-panel"] {
box-shadow: inset 1px 0 var(--stats-line);
}
[data-page="stats"] [data-component="compare-home-selector"] button[data-slot="compare-home-select-panel"]:hover,
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]:focus-within {
background: var(--stats-layer);
}
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]:focus-visible {
z-index: 1;
outline: 1px solid var(--stats-line-strong);
outline-offset: -1px;
}
[data-page="stats"] [data-slot="compare-home-select-copy"] {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
max-width: calc(100% - 48px);
pointer-events: none;
}
[data-page="stats"] [data-slot="compare-home-plus"],
[data-page="stats"] [data-slot="compare-home-select-name"] {
min-width: 0;
color: inherit;
font-size: 13px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="compare-home-select-name"] {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-home-select-panel"][data-selected="true"] [data-slot="compare-home-plus"] {
display: none;
}
[data-page="stats"] [data-section="compare-home-related"] {
min-height: 425px;
margin-top: 40px;
padding: 80px 40px;
box-shadow:
inset 0 1px var(--stats-line),
inset 0 -1px var(--stats-line),
inset 1px 0 var(--stats-line),
inset -1px 0 var(--stats-line);
}
[data-page="stats"] [data-section="compare-home-related"] [data-slot="section-title"] {
margin-bottom: 40px;
}
[data-page="stats"] [data-component="compare-home-card-grid"] {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
}
[data-page="stats"] [data-component="compare-home-card"] {
position: relative;
display: grid;
grid-template-rows: 62px 1px 20px 20px;
gap: 16px;
min-width: 0;
height: 184px;
box-sizing: border-box;
padding: 16px;
overflow: hidden;
color: var(--stats-text);
background: var(--stats-layer);
border: 1px solid var(--stats-line);
box-shadow: 0 1px 2px #00000008;
text-decoration: none;
}
[data-page="stats"] [data-component="compare-home-card"]:hover,
[data-page="stats"] [data-component="compare-home-card"]:focus-visible {
border-color: var(--stats-line-strong);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="compare-home-card-head"] {
display: grid;
grid-template-columns: minmax(0, 1fr) 32px;
gap: 16px;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-home-card-head"] > span {
display: grid;
gap: 8px;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-home-card-head"] strong,
[data-page="stats"] [data-slot="compare-home-card-head"] em,
[data-page="stats"] [data-slot="compare-home-card-models"] {
min-width: 0;
overflow: hidden;
font-size: 13px;
line-height: 20px;
text-overflow: ellipsis;
}
[data-page="stats"] [data-slot="compare-home-card-head"] strong {
color: var(--stats-text);
font-weight: 500;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-home-card-head"] em {
display: -webkit-box;
color: var(--stats-muted);
font-style: normal;
font-weight: 400;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
[data-page="stats"] [data-slot="compare-home-card-head"] b {
display: grid;
place-items: center;
width: 32px;
height: 32px;
box-sizing: border-box;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
box-shadow: 0 1px 1.5px #0000000f;
}
[data-page="stats"] [data-slot="compare-home-card-head"] b svg {
display: block;
width: 16px;
height: 16px;
}
[data-page="stats"] [data-slot="compare-home-card-divider"] {
height: 1px;
min-width: 0;
background: var(--stats-line);
}
[data-page="stats"] [data-slot="compare-home-card-models"] {
display: flex;
align-items: center;
gap: 6px;
color: var(--stats-muted);
font-weight: 400;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-home-card-models"] span {
flex: 0 0 auto;
}
[data-page="stats"] [data-slot="compare-home-card-models"] i {
flex: 0 0 auto;
color: var(--stats-faint);
font-style: normal;
}
[data-page="stats"] [data-slot="compare-home-card-avatars"] {
display: inline-flex;
align-items: center;
gap: 8px;
min-width: 0;
}
[data-page="stats"] [data-section="compare-detail-hero"] {
position: relative;
display: grid;
align-content: end;
gap: 24px;
min-height: 316px;
box-sizing: border-box;
padding: 128px 40px 40px;
color: var(--stats-text);
}
[data-page="stats"] [data-slot="compare-detail-hero-grid"] {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 24px;
align-items: center;
}
[data-page="stats"] [data-section="compare-detail-hero"] h1 {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 16px;
min-width: 0;
margin: 0;
color: var(--stats-text);
font-size: 40px;
font-weight: 500;
line-height: 60px;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="compare-detail-actions"] {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 8px;
min-width: 0;
}
[data-page="stats"] button[data-slot="compare-detail-action"],
[data-page="stats"] a[data-slot="compare-detail-action"] {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 32px;
box-sizing: border-box;
padding: 0 12px 0 8px;
overflow: hidden;
border: 0;
border-radius: 0;
color: var(--stats-text);
background: var(--stats-bg);
box-shadow:
0 0 0 0.5px color-mix(in srgb, var(--stats-text) 14%, transparent),
0 1px 1.5px color-mix(in srgb, #000000 10%, transparent);
cursor: pointer;
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-decoration: none;
white-space: nowrap;
}
[data-page="stats"] button[data-slot="compare-detail-action"]::before,
[data-page="stats"] a[data-slot="compare-detail-action"]::before {
position: absolute;
inset: 0 0 auto;
height: 16px;
background: linear-gradient(to bottom, rgb(255 255 255 / 7%), transparent);
content: "";
pointer-events: none;
}
[data-page="stats"] [data-slot="compare-detail-action"] > * {
position: relative;
z-index: 1;
}
[data-page="stats"] button[data-slot="compare-detail-action"][aria-pressed] {
gap: 12px;
}
[data-page="stats"] button[data-slot="compare-detail-action"]:hover,
[data-page="stats"] button[data-slot="compare-detail-action"]:focus-visible,
[data-page="stats"] a[data-slot="compare-detail-action"]:hover,
[data-page="stats"] a[data-slot="compare-detail-action"]:focus-visible {
background: var(--stats-layer);
outline: none;
text-decoration: none;
}
[data-page="stats"] button[data-slot="compare-detail-action"]:disabled {
color: var(--stats-muted);
background: var(--stats-bg);
cursor: not-allowed;
}
[data-page="stats"] button[data-slot="compare-detail-action"][data-active="true"] {
color: var(--stats-text);
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-detail-highlight-icon"] {
display: flex;
align-items: center;
gap: 1px;
width: 31px;
height: 16px;
box-sizing: border-box;
padding: 1px;
overflow: hidden;
background: var(--stats-line-strong);
}
[data-page="stats"] [data-slot="compare-detail-highlight-icon"] i {
flex: 0 0 14px;
width: 14px;
height: 14px;
background: transparent;
}
[data-page="stats"]
[data-slot="compare-detail-action"][aria-pressed="true"]
[data-slot="compare-detail-highlight-icon"] {
background: var(--stats-accent);
}
[data-page="stats"]
[data-slot="compare-detail-action"][aria-pressed="false"]
[data-slot="compare-detail-highlight-icon"]
i:first-child,
[data-page="stats"]
[data-slot="compare-detail-action"][aria-pressed="true"]
[data-slot="compare-detail-highlight-icon"]
i:last-child {
background: #fafafa;
box-shadow:
0 0 0 0.5px rgb(0 0 0 / 12%),
0 1px 2px -1px rgb(0 0 0 / 8%),
0 2px 4px rgb(0 0 0 / 4%);
}
[data-page="stats"] [data-slot="compare-detail-action"] [data-slot="compare-home-plus"] {
display: grid;
place-items: center;
width: 16px;
height: 16px;
font-size: 16px;
line-height: 16px;
}
[data-page="stats"] [data-section="compare-radar"] {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) 800px minmax(0, 1fr);
width: 100%;
height: 800px;
box-sizing: border-box;
border-right: 1px solid var(--stats-line);
border-bottom: 1px solid var(--stats-line);
border-left: 1px solid var(--stats-line);
color: var(--stats-text);
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-radar-legend"] {
display: flex;
flex-direction: column;
gap: 14px;
min-width: 0;
margin: 0;
padding: 40px;
list-style: none;
}
[data-page="stats"] [data-slot="compare-radar-legend"] li {
display: grid;
grid-template-columns: 6px minmax(0, 1fr);
gap: 12px;
align-items: start;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-radar-legend"] li > i {
width: 6px;
height: 6px;
margin-top: 6px;
}
[data-page="stats"] [data-slot="compare-radar-legend"] li > span {
display: grid;
gap: 2px;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-radar-legend"] strong,
[data-page="stats"] [data-slot="compare-radar-legend"] small {
overflow: hidden;
font-size: 13px;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-radar-legend"] strong {
color: var(--stats-text);
font-weight: 500;
}
[data-page="stats"] [data-slot="compare-radar-legend"] small {
color: var(--stats-muted);
font-weight: 400;
}
[data-page="stats"] [data-slot="compare-radar-chart"] {
position: relative;
width: 800px;
height: 800px;
}
[data-page="stats"] [data-slot="compare-radar-plot"] {
position: absolute;
inset: 17.5%;
}
[data-page="stats"] [data-slot="compare-radar-plot"] svg {
display: block;
width: 100%;
height: 100%;
overflow: visible;
}
[data-page="stats"] [data-slot="compare-radar-grid"] polygon,
[data-page="stats"] [data-slot="compare-radar-grid"] line {
fill: none;
stroke: var(--stats-line);
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="compare-radar-area"],
[data-page="stats"] [data-slot="compare-radar-line"] {
stroke: currentColor;
stroke-width: 1.5px;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="compare-radar-area"] {
fill: currentColor;
fill-opacity: 0.09;
}
[data-page="stats"] [data-slot="compare-radar-line"] {
fill: none;
}
[data-page="stats"] [data-slot="compare-radar-point"] {
fill: currentColor;
stroke: currentColor;
stroke-width: 1px;
vector-effect: non-scaling-stroke;
}
[data-page="stats"] [data-slot="compare-radar-point-hit"] {
fill: transparent;
cursor: pointer;
}
[data-page="stats"] [data-slot="compare-radar-axis"] {
position: absolute;
top: var(--compare-radar-axis-y);
left: var(--compare-radar-axis-x);
max-width: 160px;
color: var(--stats-text);
font-size: 16px;
font-weight: 400;
line-height: 20px;
text-align: center;
cursor: pointer;
transform: translate(var(--compare-radar-axis-translate-x), -50%);
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-radar-axis"]:focus-visible {
outline: none;
}
[data-page="stats"] [data-slot="compare-radar-axis-label"] {
display: inline-flex;
align-items: center;
height: 24px;
box-sizing: border-box;
padding: 0 8px;
margin: 0 -8px;
}
[data-page="stats"] [data-slot="compare-radar-axis"][data-active="true"] [data-slot="compare-radar-axis-label"] {
background: var(--stats-layer-2);
}
[data-page="stats"] [data-slot="compare-radar-axis"]:focus-visible [data-slot="compare-radar-axis-label"] {
outline: 1px solid var(--stats-text);
outline-offset: 2px;
}
[data-page="stats"] [data-slot="compare-radar-tooltip"] {
position: absolute;
z-index: 5;
top: var(--compare-radar-tooltip-y);
left: clamp(104px, var(--compare-radar-tooltip-x), calc(100% - 104px));
display: flex;
flex-direction: column;
gap: 4px;
width: 192px;
box-sizing: border-box;
padding: 8px;
color: var(--stats-text);
background: var(--stats-layer);
box-shadow:
0 0 0 0.5px color-mix(in srgb, var(--stats-text) 12%, transparent),
0 4px 8px color-mix(in srgb, #000000 8%, transparent),
0 8px 16px color-mix(in srgb, #000000 4%, transparent);
pointer-events: none;
transform: translate(-50%, var(--compare-radar-tooltip-translate-y));
}
[data-page="stats"] [data-slot="compare-radar-tooltip"] strong,
[data-page="stats"] [data-slot="compare-radar-tooltip"] p {
margin: 0;
font-size: 11px;
letter-spacing: 0;
}
[data-page="stats"] [data-slot="compare-radar-tooltip"] strong {
color: var(--stats-text);
font-weight: 500;
line-height: 12px;
}
[data-page="stats"] [data-slot="compare-radar-tooltip"] p {
color: var(--stats-muted);
font-weight: 400;
line-height: 16px;
}
[data-page="stats"] [data-slot="compare-radar-data"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
overflow: hidden;
border: 0;
clip-path: inset(50%);
white-space: nowrap;
}
[data-page="stats"] [data-component="compare-detail-comparison"] {
--compare-detail-label-column: 292px;
--compare-detail-model-column-min: 360px;
position: relative;
}
[data-page="stats"] [data-component="compare-detail-heading-scroll"] {
position: sticky;
top: 72px;
z-index: 9;
overflow-x: auto;
overscroll-behavior-x: none;
background: var(--stats-bg);
scrollbar-width: none;
}
[data-page="stats"] [data-component="compare-detail-heading-scroll"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-component="compare-detail-body-scroll"] {
overflow-x: auto;
overscroll-behavior-x: none;
}
[data-page="stats"] [data-section="compare-detail-selector"],
[data-page="stats"] [data-section="compare-detail-matrix"] {
min-width: calc(
var(--compare-detail-label-column) + var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min)
);
}
[data-page="stats"] [data-section="compare-detail-selector"] {
position: relative;
height: 98px;
min-height: 98px;
box-sizing: border-box;
border: 0;
}
[data-page="stats"] [data-section="compare-detail-selector"]::after {
position: absolute;
z-index: 5;
inset: 0;
border-top: 1px solid var(--stats-line);
border-bottom: 1px solid var(--stats-line);
content: "";
pointer-events: none;
}
[data-page="stats"] [data-component="compare-detail-selector-grid"] {
display: grid;
grid-template-columns: var(--compare-detail-grid);
height: 100%;
}
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="3"]
[data-section="compare-detail-selector"],
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="3"]
[data-section="compare-detail-matrix"] {
min-width: calc(
var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min)
);
}
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="4"]
[data-section="compare-detail-selector"],
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="4"]
[data-section="compare-detail-matrix"] {
min-width: calc(
var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min)
);
}
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="5"]
[data-section="compare-detail-selector"],
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="5"]
[data-section="compare-detail-matrix"] {
min-width: calc(
var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min)
);
}
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="6"]
[data-section="compare-detail-selector"],
[data-page="stats"]
[data-component="compare-detail-comparison"][data-model-count="6"]
[data-section="compare-detail-matrix"] {
min-width: calc(
var(--compare-detail-label-column) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min) + var(--compare-detail-model-column-min) +
var(--compare-detail-model-column-min)
);
}
[data-page="stats"] [data-slot="compare-detail-selector-spacer"] {
position: sticky;
left: 0;
z-index: 3;
min-width: 0;
box-sizing: border-box;
border-right: 1px solid var(--stats-line);
border-left: 1px solid var(--stats-line);
background: var(--stats-bg);
}
[data-page="stats"] button[data-slot="compare-detail-select-model"] {
position: relative;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
height: 100%;
box-sizing: border-box;
padding: 0 40px;
border: 0;
appearance: none;
border-radius: 0;
color: var(--stats-text);
background: var(--stats-bg);
cursor: pointer;
font: inherit;
text-align: left;
}
[data-page="stats"] button[data-slot="compare-detail-select-model"][data-column]:not([data-column="0"]) {
border-left: 1px solid var(--stats-line);
}
[data-page="stats"] button[data-slot="compare-detail-select-model"][data-last="true"] {
border-right: 1px solid var(--stats-line);
}
[data-page="stats"] button[data-slot="compare-detail-select-model"]:hover,
[data-page="stats"] button[data-slot="compare-detail-select-model"]:focus-visible {
background: var(--stats-layer);
outline: none;
}
[data-page="stats"] [data-slot="compare-detail-select-name"] {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 13px;
font-weight: 500;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] button[data-slot="compare-detail-select-model"] > svg {
flex: 0 0 auto;
color: var(--stats-muted);
}
[data-page="stats"] [data-section="compare-detail-matrix"] {
position: relative;
color: var(--stats-text);
border-bottom: 1px solid var(--stats-line);
}
[data-page="stats"] [data-component="compare-detail-matrix"] {
position: relative;
}
[data-page="stats"] [data-slot="compare-detail-group"] {
display: grid;
grid-template-columns: var(--compare-detail-grid);
}
[data-page="stats"] [data-slot="compare-detail-group"] + [data-slot="compare-detail-group"] {
border-top: 1px solid var(--stats-line);
}
[data-page="stats"] [data-slot="compare-detail-label"],
[data-page="stats"] [data-slot="compare-detail-value"] {
display: flex;
align-items: center;
min-width: 0;
min-height: 56px;
box-sizing: border-box;
padding: 0 40px;
font-size: 14px;
line-height: 24px;
}
[data-page="stats"] [data-slot="compare-detail-label"] {
position: sticky;
left: 0;
z-index: 3;
border-right: 1px solid var(--stats-line);
border-left: 1px solid var(--stats-line);
color: var(--stats-muted);
background: var(--stats-bg);
font-weight: 400;
}
[data-page="stats"] [data-slot="compare-detail-value"][data-column]:not([data-column="0"]) {
border-left: 1px solid var(--stats-line);
}
[data-page="stats"] [data-slot="compare-detail-value"][data-last="true"] {
border-right: 1px solid var(--stats-line);
}
[data-page="stats"] [data-slot="compare-detail-label"][data-spacer="true"],
[data-page="stats"] [data-slot="compare-detail-value"][data-spacer="true"] {
min-height: 40px;
padding: 0;
}
[data-page="stats"] [data-slot="compare-detail-label"][data-heading="true"] {
gap: 12px;
color: var(--stats-text);
font-weight: 500;
}
[data-page="stats"] [data-slot="compare-detail-label"][data-heading="true"] strong {
font-weight: 600;
}
[data-page="stats"] [data-slot="compare-detail-label"][data-heading="true"] span {
display: inline-flex;
align-items: center;
flex: 0 0 auto;
height: 24px;
padding: 0 8px;
color: var(--stats-muted);
background: var(--stats-layer-2);
font-size: 12px;
font-weight: 500;
line-height: 1;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-detail-value"] {
justify-content: flex-end;
color: var(--stats-text);
font-weight: 400;
text-align: right;
}
[data-page="stats"] [data-slot="compare-detail-value"][data-best="true"] {
background: color-mix(in srgb, #198b43 8%, transparent);
}
[data-page="stats"] [data-slot="compare-detail-value-main"],
[data-page="stats"] [data-slot="compare-detail-value-link"] {
display: inline-flex;
align-items: center;
justify-content: flex-end;
gap: 12px;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-detail-value-link"] {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--stats-text) 30%, transparent);
text-underline-offset: 2px;
}
[data-page="stats"] [data-slot="compare-detail-unit"] {
color: var(--stats-muted);
}
[data-page="stats"] [data-slot="compare-detail-trend"] {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 5px;
color: var(--stats-muted);
background: var(--stats-layer-2);
font-size: 11px;
font-weight: 600;
line-height: 1;
}
[data-page="stats"] [data-slot="compare-detail-trend"][data-trend="up"] {
color: #198b43;
background: #e2f8e9;
}
[data-page="stats"] [data-slot="compare-detail-trend"][data-trend="down"] {
color: #c93737;
background: #fae8e8;
}
[data-page="stats"] [data-slot="compare-detail-boolean"] {
display: inline-flex;
align-items: center;
height: 24px;
padding: 0 8px;
font-size: 12px;
font-weight: 700;
line-height: 1;
}
[data-page="stats"] [data-slot="compare-detail-boolean"][data-value="true"] {
color: #198b43;
background: #e2f8e9;
}
[data-page="stats"] [data-slot="compare-detail-boolean"][data-value="false"] {
color: #c93737;
background: #fae8e8;
}
[data-page="stats"] [data-slot="compare-detail-value"][data-chart="true"] {
display: grid;
align-content: center;
gap: 12px;
min-height: 102px;
}
[data-page="stats"] [data-slot="compare-detail-bars"] {
display: flex;
align-items: flex-end;
gap: 2px;
width: 100%;
height: 40px;
}
[data-page="stats"] [data-slot="compare-detail-bars"] i {
flex: 1 1 0;
min-width: 2px;
max-width: 6px;
background: color-mix(in srgb, var(--stats-text) 18%, transparent);
}
[data-page="stats"] [data-slot="compare-detail-bar-dates"] {
display: flex;
justify-content: space-between;
gap: 16px;
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 14px;
}
[data-page="stats"] [data-slot="compare-detail-no-chart"] {
justify-self: end;
color: var(--stats-muted);
font-size: 12px;
}
@media (max-width: 80rem) {
[data-page="stats"] [data-section="compare-detail-hero"] {
min-height: 280px;
padding: 104px 32px 40px;
}
[data-page="stats"] [data-slot="compare-detail-hero-grid"] {
grid-template-columns: 1fr;
align-items: start;
}
[data-page="stats"] [data-slot="compare-detail-actions"] {
justify-content: flex-start;
}
[data-page="stats"] [data-section="compare-radar"] {
grid-template-columns: minmax(180px, 208px) minmax(0, 1fr);
}
[data-page="stats"] [data-slot="compare-radar-legend"] {
padding-right: 24px;
padding-left: 32px;
}
[data-page="stats"] [data-slot="compare-radar-chart"] {
align-self: center;
width: min(100%, 800px);
height: auto;
aspect-ratio: 1;
}
[data-page="stats"] [data-component="compare-detail-comparison"] {
--compare-detail-label-column: 220px;
--compare-detail-model-column-min: 320px;
}
[data-page="stats"] button[data-slot="compare-detail-select-model"],
[data-page="stats"] [data-slot="compare-detail-label"],
[data-page="stats"] [data-slot="compare-detail-value"] {
padding-right: 32px;
padding-left: 32px;
}
}
@media (max-width: 60rem) {
[data-page="stats"] [data-section="compare-detail-hero"] {
gap: 20px;
min-height: 316px;
padding: 72px 24px 40px;
}
[data-page="stats"] [data-section="compare-detail-hero"] h1 {
gap: 12px;
font-size: 32px;
line-height: 42px;
}
[data-page="stats"] [data-slot="compare-detail-actions"] {
flex-wrap: wrap;
}
[data-page="stats"] [data-section="compare-radar"] {
grid-template-columns: minmax(0, 1fr);
height: auto;
padding: 32px 24px 24px;
}
[data-page="stats"] [data-slot="compare-radar-legend"] {
flex-direction: row;
flex-wrap: wrap;
gap: 16px 32px;
padding: 0 0 16px;
}
[data-page="stats"] [data-slot="compare-radar-legend"] li {
flex: 1 1 180px;
}
[data-page="stats"] [data-slot="compare-radar-chart"] {
justify-self: center;
width: min(100%, 720px);
}
}
@media (max-width: 40rem) {
[data-page="stats"] [data-section="compare-detail-hero"] h1 {
align-items: flex-start;
flex-direction: column;
}
[data-page="stats"] [data-slot="compare-detail-action"] {
width: 100%;
}
[data-page="stats"] [data-section="compare-radar"] {
padding-right: 16px;
padding-left: 16px;
}
[data-page="stats"] [data-slot="compare-radar-legend"] {
gap: 12px;
}
[data-page="stats"] [data-slot="compare-radar-legend"] li {
flex-basis: 140px;
}
[data-page="stats"] [data-slot="compare-radar-axis"] {
left: var(--compare-radar-axis-mobile-x);
max-width: 104px;
font-size: 13px;
line-height: 16px;
white-space: normal;
}
[data-page="stats"] [data-slot="compare-radar-axis-label"] {
padding-right: 6px;
padding-left: 6px;
margin-right: -6px;
margin-left: -6px;
}
[data-page="stats"] [data-component="compare-detail-comparison"] {
--compare-detail-label-column: 188px;
--compare-detail-model-column-min: 246px;
}
[data-page="stats"] button[data-slot="compare-detail-select-model"],
[data-page="stats"] [data-slot="compare-detail-label"],
[data-page="stats"] [data-slot="compare-detail-value"] {
padding-right: 24px;
padding-left: 24px;
}
}
[data-page="stats"] [data-component="compare-model-modal-scrim"] {
position: fixed;
inset: 0;
z-index: 1000;
display: grid;
place-items: center;
box-sizing: border-box;
padding: 24px;
background: rgb(0 0 0 / 40%);
}
[data-page="stats"] [data-component="compare-model-modal"] {
display: grid;
grid-template-columns: minmax(0, 440px) 1px minmax(0, 279px);
width: min(720px, calc(100vw - 48px));
height: min(480px, calc(100vh - 48px));
overflow: hidden;
color: var(--stats-text);
background: var(--stats-bg);
box-shadow:
0 0 0 0.5px rgb(0 0 0 / 12%),
0 8px 16px rgb(0 0 0 / 8%),
0 16px 32px rgb(0 0 0 / 4%);
}
[data-page="stats"] [data-slot="compare-model-modal-list"] {
display: grid;
grid-template-rows: 52px minmax(0, 1fr);
min-width: 0;
min-height: 0;
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-model-modal-search"] {
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
height: 52px;
padding: 16px;
border-bottom: 1px solid var(--stats-line);
color: var(--stats-muted);
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-model-modal-search-icon"] {
position: relative;
flex: 0 0 auto;
width: 16px;
height: 16px;
color: var(--stats-faint);
}
[data-page="stats"] [data-slot="compare-model-modal-search-icon"]::before {
position: absolute;
top: 3px;
left: 3px;
width: 6px;
height: 6px;
border: 1.5px solid currentColor;
border-radius: 999px;
content: "";
}
[data-page="stats"] [data-slot="compare-model-modal-search-icon"]::after {
position: absolute;
top: 10px;
left: 9px;
width: 5px;
height: 1.5px;
background: currentColor;
content: "";
transform: rotate(45deg);
transform-origin: left center;
}
[data-page="stats"] [data-slot="compare-model-modal-search"] input {
width: 100%;
min-width: 0;
height: 20px;
padding: 0;
border: 0;
outline: 0;
color: var(--stats-text);
background: transparent;
font: inherit;
font-size: 13px;
font-weight: 400;
line-height: 1.1;
}
[data-page="stats"] [data-slot="compare-model-modal-search"] input::placeholder {
color: var(--stats-faint);
opacity: 1;
}
[data-page="stats"] [data-slot="compare-model-modal-results"] {
min-width: 0;
min-height: 0;
overflow-y: auto;
background: var(--stats-layer);
}
[data-page="stats"] [data-component="compare-model-modal"] button[data-slot="compare-model-modal-row"] {
display: flex;
align-items: center;
gap: 16px;
width: 100%;
height: 49px;
box-sizing: border-box;
padding: 0 16px;
border: 0;
border-bottom: 1px solid var(--stats-line);
appearance: none;
border-radius: 0;
color: var(--stats-text);
background: transparent;
cursor: pointer;
font: inherit;
text-align: left;
}
[data-page="stats"] [data-component="compare-model-modal"] button[data-slot="compare-model-modal-row"]:hover,
[data-page="stats"] [data-component="compare-model-modal"] button[data-slot="compare-model-modal-row"]:focus-visible,
[data-page="stats"]
[data-component="compare-model-modal"]
button[data-slot="compare-model-modal-row"][data-active="true"] {
color: var(--stats-text);
background: var(--stats-layer-2);
outline: none;
}
[data-page="stats"] [data-slot="compare-model-modal-row-main"] {
display: flex;
align-items: center;
flex: 1 1 auto;
gap: 12px;
min-width: 0;
}
[data-page="stats"] [data-slot="compare-model-modal-row-main"] > span:last-child {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-model-modal-badge"] {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 16px;
padding: 0 6px;
color: var(--stats-muted);
background: var(--stats-layer-2);
font-size: 11px;
font-weight: 500;
line-height: 1.1;
}
[data-page="stats"] [data-slot="compare-model-modal-empty"] {
display: grid;
gap: 8px;
padding: 24px 16px;
color: var(--stats-muted);
font-size: 13px;
line-height: 1.4;
}
[data-page="stats"] [data-slot="compare-model-modal-empty"] strong {
color: var(--stats-text);
font-weight: 500;
}
[data-page="stats"] [data-slot="compare-model-modal-divider"] {
width: 1px;
min-height: 0;
background: var(--stats-line);
}
[data-page="stats"] [data-slot="compare-model-modal-detail"] {
display: grid;
grid-template-rows: 52px minmax(0, 1fr) auto;
min-width: 0;
min-height: 0;
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-model-modal-detail-header"] {
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
height: 52px;
padding: 16px;
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-model-modal-detail-header"] strong {
min-width: 0;
overflow: hidden;
color: var(--stats-text);
font-size: 13px;
font-weight: 500;
line-height: 1.1;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-model-modal-description"] {
position: relative;
min-width: 0;
min-height: 0;
padding: 0 16px 16px;
overflow: hidden;
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-model-modal-description"] p {
margin: 0;
color: var(--stats-muted);
font-size: 11px;
font-weight: 400;
line-height: 1.5;
white-space: pre-wrap;
}
[data-page="stats"] [data-slot="compare-model-modal-description"] > span {
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 32px;
background: linear-gradient(to bottom, transparent, var(--stats-bg));
pointer-events: none;
}
[data-page="stats"] [data-slot="compare-model-modal-facts"] {
display: grid;
gap: 8px;
box-sizing: border-box;
min-width: 0;
margin: 0;
padding: 16px;
overflow: hidden;
background: var(--stats-bg);
}
[data-page="stats"] [data-slot="compare-model-modal-fact"] {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: 16px;
min-width: 0;
padding-bottom: 8px;
border-bottom: 1px solid var(--stats-line);
color: var(--stats-muted);
font-size: 11px;
font-weight: 500;
line-height: 1.5;
}
[data-page="stats"] [data-slot="compare-model-modal-fact"]:last-child {
padding-bottom: 0;
border-bottom: 0;
}
[data-page="stats"] [data-slot="compare-model-modal-fact"] dt,
[data-page="stats"] [data-slot="compare-model-modal-fact"] dd {
min-width: 0;
margin: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="compare-model-modal-fact"] dd {
color: var(--stats-text);
text-align: right;
}
[data-page="stats"] [data-slot="compare-model-modal-fact"] a {
color: inherit;
text-decoration: underline;
text-decoration-color: color-mix(in srgb, var(--stats-text) 20%, transparent);
text-underline-offset: 2px;
}
[data-page="stats"] [data-slot="compare-model-modal-uptime"] {
display: inline-flex;
justify-content: flex-end;
gap: 2px;
}
[data-page="stats"] [data-slot="compare-model-modal-uptime"] span {
width: 3px;
height: 12px;
background: var(--stats-layer-2);
}
[data-page="stats"] [data-slot="compare-model-modal-uptime"] span[data-active="true"] {
background: #198b43;
}
[data-page="stats"][data-theme="dark"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) {
color-scheme: dark;
--color-background: #161616;
--color-background-weak: #242424;
--color-background-weak-hover: #303030;
--color-background-strong: #ffffff;
--color-background-strong-hover: #eeeeee;
--color-text: #d4d4d4;
--color-text-weak: #808080;
--color-text-strong: #ffffff;
--color-text-inverted: #161616;
--color-border-weak: #ffffff1a;
--stats-bg: #161616;
--stats-layer: #242424;
--stats-layer-2: #303030;
--stats-line: #ffffff1a;
--stats-line-strong: #ffffff33;
--stats-text: #ffffff;
--stats-muted: #d4d4d4;
--stats-faint: #808080;
--stats-theme-icon-active: #fafafa;
--stats-bar-idle: #303030;
--stats-dot: #303030;
--stats-hero-muted: #808080;
--stats-hero-pattern: #303030;
--stats-logo-bg: #f1ecec;
--stats-logo-fill: #b7b1b1;
--stats-logo-stroke: #211e1e;
}
[data-page="stats"][data-theme="dark"] [data-component="model-usage-chart"][data-variant="lab-usage"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"] {
--lab-usage-bar: #3a3a3a;
--lab-usage-line: #a3a3a3;
--lab-usage-band: #242424;
}
[data-page="stats"][data-theme="dark"] [data-component="model-usage-chart"][data-variant="model-trend"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="model-trend"] {
--model-trend-bar: #3a3a3a;
--model-trend-line: #a3a3a3;
--model-trend-band: #242424;
}
[data-page="stats"][data-theme="dark"] [data-component="chart-tooltip"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] {
background: #242424f2;
}
[data-page="stats"][data-theme="dark"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"] {
background: #242424f2;
box-shadow:
0 0 0 0.5px #ffffff24,
0 8px 16px #0000003d,
0 4px 8px #00000052;
}
[data-page="stats"][data-theme="dark"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
> span,
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"]
> span {
color: var(--stats-faint);
}
[data-page="stats"][data-theme="dark"] [data-component="leader-card"][data-size="compact"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"][data-size="compact"] {
box-shadow:
0 0 0 0.5px #ffffff1f,
0 1px 2px -1px #00000052,
0 2px 4px #0000003d;
}
[data-page="stats"][data-theme="dark"] [data-component="leader-card"][data-active="true"],
[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:hover,
[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:focus-visible,
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"][data-active="true"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-component="leader-card"]:hover,
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:focus-visible {
background: #303030;
box-shadow:
0 0 0 0.5px #ffffff24,
0 6px 16px #0000003d,
0 2px 6px #00000052;
}
[data-page="stats"][data-theme="dark"]
[data-component="leader-card"][data-active="true"]
[data-slot="leader-watermark"],
[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:hover [data-slot="leader-watermark"],
[data-page="stats"][data-theme="dark"] [data-component="leader-card"]:focus-visible [data-slot="leader-watermark"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"][data-active="true"]
[data-slot="leader-watermark"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:hover
[data-slot="leader-watermark"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:focus-visible
[data-slot="leader-watermark"] {
color: var(--stats-line-strong);
opacity: 0.78;
}
[data-page="stats"][data-theme="dark"] [data-slot="lab-related-watermark"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-slot="lab-related-watermark"] {
color: var(--stats-line-strong);
opacity: 0.28;
}
[data-page="stats"][data-theme="dark"] button[data-component="cache-ratio-row"][data-active="true"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
button[data-component="cache-ratio-row"][data-active="true"] {
background: #ffffff0d;
}
[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="neutral"],
[data-page="stats"][data-theme="dark"] [data-slot="menu-button"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="neutral"],
:root[data-stats-theme="dark"] [data-page="stats"]:not([data-theme="light"]) [data-slot="menu-button"] {
color: #fafafa;
background: #ffffff0f;
box-shadow:
0 -0.5px 0 0 #ffffff33,
0 0 0 0.5px #ffffff33,
0 1px 2px 0 #00000066;
}
[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="neutral"] span,
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="neutral"]
span {
color: #aeaeae;
}
[data-page="stats"][data-theme="dark"] [data-slot="header-button"][data-variant="contrast"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="contrast"] {
color: #ffffff;
background: #5c5c5c;
box-shadow:
0 -0.5px 0 0 #ffffff4d,
0 0 0 0.5px #ffffff66,
0 1px 2px 0 #00000066;
}
@media (prefers-color-scheme: dark) {
:root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) {
color-scheme: dark;
--color-background: #161616;
--color-background-weak: #242424;
--color-background-weak-hover: #303030;
--color-background-strong: #ffffff;
--color-background-strong-hover: #eeeeee;
--color-text: #d4d4d4;
--color-text-weak: #808080;
--color-text-strong: #ffffff;
--color-text-inverted: #161616;
--color-border-weak: #ffffff1a;
--stats-bg: #161616;
--stats-layer: #242424;
--stats-layer-2: #303030;
--stats-line: #ffffff1a;
--stats-line-strong: #ffffff33;
--stats-text: #ffffff;
--stats-muted: #d4d4d4;
--stats-faint: #808080;
--stats-theme-icon-active: #fafafa;
--stats-bar-idle: #303030;
--stats-dot: #303030;
--stats-hero-muted: #808080;
--stats-hero-pattern: #303030;
--stats-logo-bg: #f1ecec;
--stats-logo-fill: #b7b1b1;
--stats-logo-stroke: #211e1e;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"] {
--lab-usage-bar: #3a3a3a;
--lab-usage-line: #a3a3a3;
--lab-usage-band: #242424;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="model-trend"] {
--model-trend-bar: #3a3a3a;
--model-trend-line: #a3a3a3;
--model-trend-band: #242424;
}
:root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) [data-component="chart-tooltip"] {
background: #242424f2;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-section="top-models"]
[data-component="chart-tooltip"] {
background: #242424f2;
box-shadow:
0 0 0 0.5px #ffffff24,
0 8px 16px #0000003d,
0 4px 8px #00000052;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-section="top-models"]
[data-component="chart-tooltip"]
> span {
color: var(--stats-faint);
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"][data-size="compact"] {
box-shadow:
0 0 0 0.5px #ffffff1f,
0 1px 2px -1px #00000052,
0 2px 4px #0000003d;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"][data-active="true"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:hover,
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:focus-visible {
background: #303030;
box-shadow:
0 0 0 0.5px #ffffff24,
0 6px 16px #0000003d,
0 2px 6px #00000052;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"][data-active="true"]
[data-slot="leader-watermark"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:hover
[data-slot="leader-watermark"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="leader-card"]:focus-visible
[data-slot="leader-watermark"] {
color: var(--stats-line-strong);
opacity: 0.78;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="neutral"],
:root:not([data-stats-theme="light"]) [data-page="stats"]:not([data-theme="light"]) [data-slot="menu-button"] {
color: #fafafa;
background: #ffffff0f;
box-shadow:
0 -0.5px 0 0 #ffffff33,
0 0 0 0.5px #ffffff33,
0 1px 2px 0 #00000066;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="neutral"]
span {
color: #aeaeae;
}
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-slot="header-button"][data-variant="contrast"] {
color: #ffffff;
background: #5c5c5c;
box-shadow:
0 -0.5px 0 0 #ffffff4d,
0 0 0 0.5px #ffffff66,
0 1px 2px 0 #00000066;
}
}
[data-page="stats"][data-theme="dark"]
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"],
[data-page="stats"][data-theme="dark"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"],
:root[data-stats-theme="dark"]
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="lab-usage"]
[data-component="chart-tooltip"],
:root:not([data-stats-theme="light"])
[data-page="stats"]:not([data-theme="light"])
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"],
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"],
[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] [data-component="chart-tooltip"] {
background: var(--stats-bg);
}
@media (min-width: 48rem) {
[data-page="stats"] [data-slot="header-button"][data-variant="neutral"] {
display: inline-flex;
}
}
@media (min-width: 90rem) {
[data-page="stats"] [data-slot="header-bar"] {
gap: 32px;
}
[data-page="stats"] [data-slot="brand"],
[data-page="stats"] [data-component="section-nav"],
[data-page="stats"] [data-slot="header-actions"] {
flex: 1 1 0;
}
[data-page="stats"] [data-slot="brand"] {
margin-right: 0;
}
[data-page="stats"] [data-component="section-nav"] {
display: flex;
}
[data-page="stats"] [data-slot="menu-button"] {
display: none;
}
[data-page="stats"] [data-slot="mobile-menu"] {
display: none !important;
}
}
@media (min-width: 90rem) {
[data-page="stats"] [data-component="footer"] {
padding-right: 0;
padding-left: 0;
}
}
@media (max-width: 74rem) {
[data-page="stats"] [data-section="top-models"],
[data-page="stats"] [data-section="leaderboard"],
[data-page="stats"] [data-section="unique-users"],
[data-page="stats"] [data-section="market-share"],
[data-page="stats"] [data-section="geo-breakdown"],
[data-page="stats"] [data-section="token-cost"],
[data-page="stats"] [data-section="cache-ratio"],
[data-page="stats"] [data-section="session-cost"],
[data-page="stats"] [data-section="model-hero"],
[data-page="stats"] [data-section="lab-hero"],
[data-page="stats"] [data-section="model-momentum"],
[data-page="stats"] [data-section="model-panel"],
[data-page="stats"] [data-section="compare-home-hero"],
[data-page="stats"] [data-section="compare-home-related"] {
padding: 64px 32px;
}
[data-page="stats"] [data-section="compare-home-hero"] {
min-height: 280px;
padding: 104px 32px 40px;
}
[data-page="stats"] [data-slot="compare-home-pattern"] {
width: calc(100% + 64px);
margin-inline: -32px;
}
[data-page="stats"] [data-section="lab-hero"] {
min-height: 280px;
padding: 104px 32px 40px;
}
[data-page="stats"] [data-section="model-hero"] {
min-height: 340px;
padding: 104px 32px 40px;
}
[data-page="stats"] [data-slot="lab-overview-copy"] {
padding-right: 32px;
padding-left: 32px;
}
[data-page="stats"] [data-slot="lab-overview-watermark"] {
left: 32px;
}
[data-page="stats"] [data-component="lab-overview-metric"] {
padding-right: 32px;
padding-left: 32px;
}
}
@media (max-width: 58rem) {
[data-page="stats"] {
--stats-page-padding: 24px;
--stats-section-padding: 4rem;
}
[data-page="stats"] [data-section="chart"] {
padding-left: 24px;
padding-right: 24px;
}
[data-page="stats"] [data-slot="section-header"] {
flex-direction: column;
}
[data-page="stats"] [data-component="controls"] {
align-items: flex-start;
}
[data-page="stats"] [data-component="pills"] {
flex-wrap: wrap;
}
[data-page="stats"] [data-slot="model-hero-grid"] {
grid-template-columns: 1fr;
align-items: start;
}
[data-page="stats"] [data-slot="compare-home-hero-grid"] {
grid-template-columns: 1fr;
align-items: start;
}
[data-page="stats"] [data-component="compare-home-card-grid"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-page="stats"] [data-section="lab-overview"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-page="stats"] [data-slot="lab-overview-copy"] {
grid-column: 1 / -1;
min-height: 168px;
padding-top: 48px;
padding-bottom: 48px;
}
[data-page="stats"] [data-slot="lab-overview-watermark"] {
top: -236px;
}
[data-page="stats"] [data-component="lab-overview-metric"] {
min-height: 144px;
padding: 28px 40px;
border-top: 1px solid var(--stats-line);
}
[data-page="stats"] [data-component="lab-overview-metric"]:nth-of-type(1) {
border-left: 0;
}
[data-page="stats"] [data-component="lab-overview-metric"]:nth-of-type(1)::before {
display: none;
}
[data-page="stats"] [data-component="model-rank-panel"] {
min-height: 0;
}
[data-page="stats"] [data-section="model-specs"] {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
[data-page="stats"] [data-component="model-spec"] {
min-height: 132px;
padding: 32px;
}
[data-page="stats"] [data-component="model-spec"]:nth-child(3n + 1) {
border-left: 0;
}
[data-page="stats"] [data-component="model-spec"]:nth-child(n + 4) {
border-top: 1px solid var(--stats-line);
}
[data-page="stats"] [data-section="model-momentum"] {
min-height: auto;
}
[data-page="stats"] [data-slot="model-momentum-title"] {
height: auto;
overflow: visible;
line-height: 1.5;
text-overflow: clip;
white-space: normal;
}
[data-page="stats"] [data-component="model-momentum-chart"] {
grid-template-rows: auto 320px 14px;
height: 434px;
}
[data-page="stats"] [data-slot="model-momentum-plot"] {
height: 320px;
}
[data-page="stats"] [data-slot="model-momentum-metrics"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-page="stats"] [data-component="model-metric-grid"],
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
[data-page="stats"] [data-component="model-efficiency-grid"],
[data-page="stats"] [data-component="lab-model-grid"],
[data-page="stats"] [data-component="comparison-card-grid"] {
grid-template-columns: 1fr 1fr;
}
[data-page="stats"] [data-component="comparison-selector"] {
grid-template-columns: 1fr;
}
[data-page="stats"] [data-component="comparison-selector"] button {
width: 100%;
}
[data-page="stats"] [data-component="model-peer-list"] a {
grid-template-columns: 32px 32px minmax(0, 1fr) minmax(64px, auto);
gap: 12px;
}
[data-page="stats"] [data-component="model-peer-list"] em {
display: block;
}
[data-page="stats"] [data-slot="chart-footer"] {
align-items: flex-start;
flex-direction: column;
}
[data-page="stats"] [data-component="usage-filter"] {
flex-wrap: wrap;
}
[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] {
align-items: center;
flex-direction: row;
}
[data-page="stats"] [data-section="top-models"] [data-component="usage-filter"] {
flex-wrap: nowrap;
}
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-compact"] {
grid-template-columns: 1fr;
}
[data-page="stats"] [data-component="leader-card"][data-size="featured"],
[data-page="stats"] [data-component="leader-card"][data-size="compact"] {
min-height: 96px;
}
[data-page="stats"] [data-component="leader-card"][data-size="featured"] [data-slot="leader-body"] {
flex-direction: row;
align-items: center;
gap: 12px;
}
[data-page="stats"] [data-slot="leader-watermark"] {
right: -64px;
width: 180px;
height: 180px;
font-size: 96px;
}
[data-page="stats"] [data-slot="session-heading"] {
display: none;
}
[data-page="stats"] [data-slot="market-labels"],
[data-page="stats"] [data-slot="market-bars"] {
gap: 8px;
}
[data-page="stats"] [data-component="market-share-list"] {
grid-auto-flow: row;
grid-template-columns: 1fr;
grid-template-rows: none;
}
[data-page="stats"] [data-component="token-tooltip"] {
position: static;
order: -1;
width: 100%;
margin-bottom: 8px;
}
[data-page="stats"] [data-slot="market-footer"] {
align-items: flex-start;
flex-direction: column;
gap: 24px;
}
[data-page="stats"] [data-component="chart-tooltip"] {
position: static;
margin-top: 16px;
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"] {
position: absolute;
margin-top: 0;
}
[data-page="stats"] [data-component="footer"] {
padding: 88px 24px 24px;
}
[data-page="stats"] [data-slot="footer-grid"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 40px 32px;
}
[data-page="stats"] [data-slot="footer-mark"] {
grid-column: 1 / -1;
}
[data-page="stats"] [data-slot="footer-bottom"],
[data-page="stats"] [data-slot="footer-bottom"] > div:first-child {
align-items: flex-start;
flex-direction: column;
}
[data-page="stats"] [data-slot="footer-bottom"] {
line-height: 1.5;
}
[data-page="stats"] [data-slot="footer-controls"] {
justify-content: flex-start;
flex-wrap: wrap;
}
}
@media (max-width: 47.999rem) {
[data-page="stats"] [data-section="top-models"],
[data-page="stats"] [data-section="leaderboard"],
[data-page="stats"] [data-section="unique-users"],
[data-page="stats"] [data-section="market-share"],
[data-page="stats"] [data-section="geo-breakdown"],
[data-page="stats"] [data-section="token-cost"],
[data-page="stats"] [data-section="cache-ratio"],
[data-page="stats"] [data-section="session-cost"],
[data-page="stats"] [data-section="model-hero"],
[data-page="stats"] [data-section="lab-hero"],
[data-page="stats"] [data-section="model-momentum"],
[data-page="stats"] [data-section="model-panel"],
[data-page="stats"] [data-section="compare-home-hero"],
[data-page="stats"] [data-section="compare-home-related"] {
padding: 48px 24px;
}
[data-page="stats"] [data-section="compare-home-hero"] {
gap: 20px;
min-height: 316px;
padding: 72px 24px 40px;
}
[data-page="stats"] [data-slot="compare-home-pattern"] {
width: calc(100% + 48px);
margin-inline: -24px;
}
[data-page="stats"] [data-section="compare-home-hero"] h1 {
gap: 12px;
font-size: 32px;
line-height: 42px;
}
[data-page="stats"] [data-component="compare-home-breadcrumb"] {
flex-wrap: wrap;
height: auto;
}
[data-page="stats"] [data-component="compare-home-selector"] {
grid-template-columns: 1fr;
}
[data-page="stats"] [data-component="compare-home-selector"] button[data-slot="compare-home-select-panel"]::before,
[data-page="stats"] [data-component="compare-home-selector"] button[data-slot="compare-home-select-panel"]::after {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
content: "";
background: var(--stats-line);
pointer-events: none;
}
[data-page="stats"] [data-component="compare-home-selector"] button[data-slot="compare-home-select-panel"]::before {
left: 0;
}
[data-page="stats"] [data-component="compare-home-selector"] button[data-slot="compare-home-select-panel"]::after {
right: 0;
}
[data-page="stats"] [data-component="compare-model-modal-scrim"] {
padding: 16px;
}
[data-page="stats"] [data-component="compare-model-modal"] {
grid-template-columns: 1fr;
width: calc(100vw - 32px);
height: min(520px, calc(100vh - 32px));
}
[data-page="stats"] [data-slot="compare-model-modal-detail"],
[data-page="stats"] [data-slot="compare-model-modal-divider"] {
display: none;
}
[data-page="stats"]
[data-component="compare-home-selector"]
button[data-slot="compare-home-select-panel"]
+ button[data-slot="compare-home-select-panel"] {
box-shadow: inset 0 1px var(--stats-line);
}
[data-page="stats"] [data-section="compare-home-related"] {
margin-top: 24px;
}
[data-page="stats"] [data-component="compare-home-card-grid"] {
grid-template-columns: 1fr;
}
[data-page="stats"] [data-slot="top-models-title"],
[data-page="stats"] [data-slot="section-title"] {
margin-bottom: 32px;
font-size: 16px;
}
[data-page="stats"] [data-slot="cache-ratio-heading"],
[data-page="stats"] button[data-component="cache-ratio-row"] {
grid-template-columns: 44px minmax(72px, 1fr) minmax(86px, 1.2fr);
gap: 8px;
}
[data-page="stats"] [data-slot="top-models-mobile-controls"] {
display: flex;
gap: 8px;
width: 100%;
}
[data-page="stats"] [data-section="model-hero"] {
gap: 20px;
min-height: 316px;
padding: 72px 24px 40px;
}
[data-page="stats"] [data-component="model-hero-breadcrumb"] {
flex-wrap: wrap;
height: auto;
}
[data-page="stats"] [data-slot="model-hero-crumb"] {
max-width: min(100%, 240px);
}
[data-page="stats"] [data-component="model-hero-breadcrumb"] button[data-slot="stats-breadcrumb-select-trigger"] {
max-width: min(100%, 240px);
}
[data-page="stats"] [data-slot="model-hero-title-row"] {
flex-wrap: wrap;
gap: 16px;
min-height: 0;
}
[data-page="stats"] [data-slot="model-hero-avatar"] {
display: none;
}
[data-page="stats"] [data-slot="model-hero-actions"] {
flex: 1 1 100%;
margin-left: 0;
}
[data-page="stats"] [data-slot="model-hero-action"] {
flex: 0 0 auto;
}
[data-page="stats"] [data-section="lab-hero"] {
gap: 20px;
min-height: 232px;
padding: 72px 24px 40px;
}
[data-page="stats"] [data-section="lab-overview"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-page="stats"] [data-slot="lab-overview-copy"] {
min-height: 168px;
padding: 48px 24px;
}
[data-page="stats"] [data-slot="lab-overview-copy"] p {
font-size: 15px;
line-height: 23px;
}
[data-page="stats"] [data-slot="lab-overview-watermark"] {
top: -168px;
left: 24px;
width: 480px;
height: 480px;
}
[data-page="stats"] [data-component="lab-overview-metric"] {
min-height: 120px;
padding: 24px;
border-top: 1px solid var(--stats-line);
border-left: 0;
}
[data-page="stats"] [data-component="lab-overview-metric"]::before {
display: block;
}
[data-page="stats"] [data-component="lab-overview-metric"]:nth-of-type(1)::before {
display: none;
}
[data-page="stats"] [data-component="lab-overview-metric"] strong {
font-size: clamp(36px, 10vw, 52px);
line-height: 1.08;
}
[data-page="stats"] [data-slot="lab-hero-title-row"] {
gap: 16px;
height: 72px;
}
[data-page="stats"] [data-slot="lab-hero-avatar"] {
width: 48px;
height: 48px;
}
[data-page="stats"] [data-slot="lab-hero-avatar"] svg {
width: 32px;
height: 32px;
}
[data-page="stats"] [data-section="lab-hero"] h1 {
font-size: 42px;
line-height: 72px;
}
[data-page="stats"] [data-slot="lab-hero-pattern"] {
height: 48px;
min-width: 48px;
}
[data-page="stats"] [data-component="lab-related-list"] {
grid-auto-columns: minmax(320px, 392px);
grid-auto-flow: column;
grid-template-columns: none;
width: calc(100% + 48px);
margin-inline: -24px;
padding-inline: 24px;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
[data-page="stats"] [data-component="lab-related-list"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-section="model-hero"] h1 {
flex-basis: 100%;
font-size: 38px;
line-height: 44px;
overflow-wrap: anywhere;
white-space: normal;
}
[data-page="stats"] [data-slot="model-hero-pattern"] {
height: 16px;
}
[data-page="stats"] [data-slot="model-hero-rankline"],
[data-page="stats"] [data-slot="model-hero-state"] {
gap: 6px;
font-size: 14px;
line-height: 22px;
}
[data-page="stats"] [data-section="model-specs"] {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
[data-page="stats"] [data-component="model-spec"] {
min-height: 116px;
padding: 24px;
}
[data-page="stats"] [data-component="model-spec"]:nth-child(n) {
border-left: 1px solid var(--stats-line);
border-top: 0;
}
[data-page="stats"] [data-component="model-spec"]:nth-child(2n + 1) {
border-left: 0;
}
[data-page="stats"] [data-component="model-spec"]:nth-child(n + 3) {
border-top: 1px solid var(--stats-line);
}
[data-page="stats"] [data-component="model-spec"]:last-child:nth-child(odd) {
grid-column: 1 / -1;
}
[data-page="stats"] [data-component="model-spec"] strong {
font-size: 24px;
line-height: 1.35;
}
[data-page="stats"] [data-section="model-momentum"] {
gap: 28px;
}
[data-page="stats"] [data-slot="model-momentum-title"] {
font-size: 20px;
line-height: 30px;
}
[data-page="stats"] [data-slot="model-momentum-title"] span {
margin-left: 8px;
}
[data-page="stats"] [data-component="model-momentum-chart"] {
grid-template-rows: auto 260px 14px;
gap: 14px;
height: 380px;
}
[data-page="stats"] [data-slot="model-momentum-total"] {
align-items: flex-start;
flex-direction: column;
gap: 6px;
height: auto;
}
[data-page="stats"] [data-slot="model-momentum-total"] strong {
font-size: 24px;
line-height: 32px;
}
[data-page="stats"] [data-slot="model-momentum-summary"] p {
flex-wrap: wrap;
white-space: normal;
}
[data-page="stats"] [data-slot="model-momentum-plot"] {
height: 260px;
}
[data-page="stats"] [data-slot="model-momentum-end"] {
display: none;
}
[data-page="stats"] [data-component="model-momentum-metric"] {
min-height: 112px;
}
[data-page="stats"] [data-component="model-momentum-metric"] strong {
font-size: clamp(20px, 5.5vw, 24px);
line-height: 34px;
}
[data-page="stats"] [data-slot="model-catalog-grid"] {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 18px 24px;
}
[data-page="stats"] [data-component="model-catalog-datum"] {
max-width: none;
padding: 0;
border-left: 0;
}
[data-page="stats"] [data-component="model-catalog-datum"] strong {
font-size: 18px;
}
[data-page="stats"] [data-slot="model-hero-copy"] p:not([data-slot="hero-meta"]) {
font-size: 13px;
}
[data-page="stats"] [data-slot="lab-model-heading"] {
align-items: flex-start;
flex-direction: column;
gap: 16px;
margin-bottom: 32px;
}
[data-page="stats"] [data-slot="lab-model-pattern"] {
margin-bottom: 32px;
}
[data-page="stats"] [data-component="lab-model-table"] {
--lab-model-row-bleed: 24px;
box-sizing: border-box;
width: calc(100% + 48px);
margin-inline: -24px;
padding-inline: 24px;
}
[data-page="stats"] [data-component="model-metric-grid"],
[data-page="stats"] [data-component="model-metric-grid"][data-variant="dense"],
[data-page="stats"] [data-component="model-efficiency-grid"],
[data-page="stats"] [data-component="lab-model-grid"],
[data-page="stats"] [data-component="comparison-card-grid"] {
grid-template-columns: 1fr;
}
[data-page="stats"] [data-component="comparison-table"] {
min-width: 640px;
}
[data-page="stats"] [data-component="model-metric"] {
min-height: 112px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] {
height: 112px;
min-height: 112px;
}
[data-page="stats"] [data-component="model-efficiency-grid"] [data-component="model-metric"] strong {
margin-top: 24px;
}
[data-page="stats"] [data-component="model-usage-chart"] {
--model-usage-mobile-bar-width: 16px;
--model-usage-mobile-edge-space: 48px;
--model-usage-mobile-track-width: calc(
var(--model-usage-count) * (var(--model-usage-mobile-bar-width) + var(--model-usage-bar-gap)) +
var(--model-usage-mobile-edge-space)
);
width: calc(100% + 48px);
height: 360px;
margin-inline: -24px;
padding-inline: 24px;
direction: rtl;
overflow-x: auto;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
[data-page="stats"] [data-component="model-usage-chart"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-slot="model-usage-axis"],
[data-page="stats"] [data-slot="model-usage-bars"] {
direction: ltr;
width: var(--model-usage-mobile-track-width);
min-width: var(--model-usage-mobile-track-width);
}
[data-page="stats"] [data-slot="model-usage-bars"] {
gap: var(--model-usage-bar-gap);
}
[data-page="stats"] [data-slot="model-usage-axis"] > div,
[data-page="stats"] [data-slot="model-usage-column"] {
flex: 0 0 var(--model-usage-mobile-bar-width);
}
[data-page="stats"] [data-slot="model-usage-column"] {
padding-inline: 0;
}
[data-page="stats"] [data-slot="model-usage-column"]::before {
width: 100%;
}
[data-page="stats"] [data-slot="model-usage-bar"] {
right: 0;
left: 0;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] {
--model-usage-mobile-bar-width: 20px;
--model-usage-mobile-edge-space: 48px;
--model-usage-mobile-track-width: calc(
var(--model-usage-count) * var(--model-usage-mobile-bar-width) + var(--model-usage-mobile-edge-space)
);
--lab-usage-bar-height: 64px;
--lab-usage-line-bottom: 104px;
grid-template-rows: minmax(0, 360px) 14px;
gap: 24px;
height: 398px;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-slot="lab-usage-plot"],
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-slot="lab-usage-months"] {
direction: ltr;
width: var(--model-usage-mobile-track-width);
min-width: var(--model-usage-mobile-track-width);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-slot="lab-usage-column"] {
flex: 0 0 var(--model-usage-mobile-bar-width);
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="lab-usage"] [data-component="chart-tooltip"] {
top: auto;
width: auto;
min-width: 0;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] {
--model-usage-mobile-bar-width: 20px;
--model-usage-mobile-edge-space: 48px;
--model-usage-mobile-track-width: calc(
var(--model-usage-count) * var(--model-usage-mobile-bar-width) + var(--model-usage-mobile-edge-space)
);
--model-trend-bar-height: 64px;
--model-trend-line-bottom: 104px;
grid-template-rows: minmax(0, 360px) 14px;
gap: 24px;
height: 398px;
}
[data-page="stats"] [data-component="model-usage-chart"][data-variant="model-trend"] [data-slot="model-trend-plot"],
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-slot="model-trend-months"] {
direction: ltr;
width: var(--model-usage-mobile-track-width);
min-width: var(--model-usage-mobile-track-width);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-slot="model-trend-column"] {
flex: 0 0 var(--model-usage-mobile-bar-width);
}
[data-page="stats"]
[data-component="model-usage-chart"][data-variant="model-trend"]
[data-component="chart-tooltip"] {
top: auto;
width: auto;
min-width: 0;
}
[data-page="stats"] [data-component="model-peer-list"] {
grid-auto-flow: row;
grid-auto-columns: auto;
grid-template-rows: none;
gap: 12px;
}
[data-page="stats"] [data-component="model-peer-list"] a {
grid-template-columns: 28px 32px minmax(0, 1fr) minmax(56px, auto);
gap: 12px;
}
[data-page="stats"] [data-slot="model-peer-rank"] {
width: 28px;
}
[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] {
display: flex;
margin-top: 24px;
}
[data-page="stats"] [data-section="top-models"] [data-slot="chart-footer"] [data-component="usage-filter"] {
display: none;
}
[data-page="stats"] [data-slot="leaderboard-featured"],
[data-page="stats"] [data-slot="leaderboard-pattern"],
[data-page="stats"] [data-slot="leaderboard-compact"] {
display: none;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] {
box-sizing: border-box;
display: flex;
gap: 12px;
width: calc(100% + 48px);
margin-inline: -24px;
padding-inline: 24px;
padding-block-start: 2px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-padding-inline: 24px;
scroll-snap-type: x proximity;
scrollbar-width: none;
}
[data-page="stats"] [data-slot="leaderboard-mobile"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-component="leader-card"] {
flex: 0 0 240px;
width: 240px;
min-height: 156px;
gap: 32px;
scroll-snap-align: start;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-body"] {
flex-direction: column;
align-items: flex-start;
gap: 16px;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-avatar"] {
width: 28px;
height: 28px;
padding: 4px;
border-radius: 6px;
}
[data-page="stats"] [data-slot="leaderboard-mobile"] [data-slot="leader-watermark"] {
right: -68px;
width: 240px;
height: 240px;
}
[data-page="stats"] [data-component="top-models-chart"] {
grid-template-rows: 40px minmax(0, 1fr);
height: 360px;
}
[data-page="stats"] [data-component="market-share"] {
grid-template-rows: 40px minmax(0, 1fr);
height: 400px;
}
[data-page="stats"] [data-slot="geo-active-country"] {
position: static;
min-width: 0;
max-width: none;
margin: 0 12px 12px;
}
[data-page="stats"] [data-component="geo-country-list"] button {
grid-template-columns: 26px 8px minmax(0, 1fr) auto;
}
[data-page="stats"] [data-component="geo-country-list"] b {
display: none;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"],
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] {
overflow-x: auto;
overflow-y: visible;
overscroll-behavior-x: contain;
scrollbar-width: none;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"]::-webkit-scrollbar,
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"]::-webkit-scrollbar {
display: none;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] {
--top-models-mobile-bar-width: 12px;
}
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-axis"],
[data-page="stats"] [data-component="top-models-chart"][data-dense-labels="true"] [data-slot="top-models-bars"] {
min-width: calc(var(--top-models-count) * (var(--top-models-mobile-bar-width) + var(--top-models-bar-gap)));
}
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] {
--market-mobile-bar-width: 12px;
}
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-labels"],
[data-page="stats"] [data-component="market-share"][data-dense-labels="true"] [data-slot="market-bars"] {
min-width: calc(var(--market-count) * (var(--market-mobile-bar-width) + var(--market-gap)));
}
[data-page="stats"] [data-slot="top-models-axis"] > div {
position: relative;
display: flex;
align-items: center;
justify-content: center;
height: 40px;
font-weight: 600;
}
[data-page="stats"] [data-slot="market-labels"] button {
position: relative;
align-items: center;
justify-content: center;
height: 40px;
line-height: 1.2;
}
[data-page="stats"] [data-slot="axis-label"] {
position: absolute;
left: 50%;
width: max-content;
max-width: 72px;
transform: rotate(-90deg) translateX(-50%);
transform-origin: left center;
}
[data-page="stats"] [data-slot="market-axis-label"] {
position: absolute;
left: 50%;
width: max-content;
max-width: 72px;
transform: rotate(-90deg) translateX(-50%);
transform-origin: left center;
}
[data-page="stats"] [data-slot="top-models-axis"] > div[data-mobile-hidden="true"] [data-slot="axis-label"],
[data-page="stats"] [data-slot="axis-total"],
[data-page="stats"] [data-slot="axis-date-full"] {
display: none;
}
[data-page="stats"] [data-slot="market-labels"] button[data-mobile-hidden="true"] [data-slot="market-axis-label"],
[data-page="stats"] [data-slot="market-total"],
[data-page="stats"] [data-slot="market-date-full"] {
display: none;
}
[data-page="stats"] [data-slot="axis-date-mobile"] {
display: block;
}
[data-page="stats"] [data-slot="market-date-mobile"] {
display: block;
}
[data-page="stats"] :is([data-section="top-models"], [data-section="unique-users"]) [data-component="chart-tooltip"] {
position: fixed;
top: auto;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 40;
width: auto;
min-width: 0;
max-height: min(320px, 48vh);
overflow: auto;
transform: none;
}
[data-page="stats"]
:is([data-section="top-models"], [data-section="unique-users"])
[data-component="chart-tooltip"][data-placement] {
right: 12px;
left: 12px;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"] {
position: fixed;
top: auto;
right: 12px;
bottom: 12px;
left: 12px;
z-index: 40;
width: auto;
min-width: 0;
transform: none;
}
[data-page="stats"] [data-component="model-usage-chart"] [data-component="chart-tooltip"][data-placement] {
right: 12px;
left: 12px;
}
}
@media (max-width: 30rem) {
[data-page="stats"] [data-component="lab-related-list"] {
grid-auto-columns: calc(100vw - 48px);
}
[data-page="stats"] [data-slot="lab-related-heading"] strong {
font-size: 24px;
}
[data-page="stats"] [data-slot="lab-hero-pattern"] {
display: none;
}
[data-page="stats"] [data-section="lab-hero"] h1 {
flex: 1 1 auto;
}
}
@media (max-width: 24rem) {
[data-page="stats"] [data-slot="lab-hero-title-row"] {
height: auto;
min-height: 72px;
}
[data-page="stats"] [data-slot="lab-hero-avatar"] {
display: none;
}
[data-page="stats"] [data-section="lab-hero"] h1 {
overflow: visible;
line-height: 1.05;
text-overflow: clip;
white-space: normal;
}
}
@media (max-width: 40rem) {
[data-page="stats"] [data-section="compare-home-hero"] h1 {
align-items: flex-start;
flex-direction: column;
}
[data-page="stats"] [data-slot="compare-home-hero-grid"] > p {
font-size: 14px;
line-height: 22px;
}
[data-page="stats"] [data-slot="footer-grid"] {
grid-template-columns: 1fr;
}
}