| @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: #707070; |
| --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: #707070; |
| --stats-theme-icon-active: #3a3a3a; |
| --stats-accent: #3b5cf6; |
| --stats-accent-text: #3b5cf6; |
| --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-slot="visually-hidden"] { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| padding: 0; |
| margin: -1px; |
| overflow: hidden; |
| clip: rect(0 0 0 0); |
| white-space: nowrap; |
| border: 0; |
| } |
|
|
| [data-page="stats"][data-layout="compare-detail"] { |
| |
| 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-name"] { |
| min-width: 0; |
| 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: 1ch; |
| 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="retention"], |
| [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="retention-chart"] { |
| display: grid; |
| gap: 8px; |
| min-width: 0; |
| margin-top: 40px; |
| } |
|
|
| [data-page="stats"] [data-slot="retention-heading"], |
| [data-page="stats"] [data-component="retention-chart"] a { |
| display: grid; |
| grid-template-columns: 40px minmax(160px, 260px) minmax(180px, 1fr) 64px 84px; |
| align-items: center; |
| gap: 16px; |
| min-width: 0; |
| } |
|
|
| [data-page="stats"] [data-slot="retention-heading"] { |
| box-sizing: border-box; |
| min-height: 28px; |
| padding: 0 12px; |
| color: var(--stats-faint); |
| font-size: 11px; |
| font-style: normal; |
| font-weight: 500; |
| line-height: 14px; |
| text-transform: uppercase; |
| } |
|
|
| [data-page="stats"] [data-slot="retention-heading"] :is(strong, b, em, i) { |
| font: inherit; |
| font-style: normal; |
| } |
|
|
| [data-page="stats"] [data-slot="retention-heading"] :is(b, em) { |
| text-align: right; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] ol { |
| display: grid; |
| gap: 4px; |
| min-width: 0; |
| margin: 0; |
| padding: 0; |
| list-style: none; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a { |
| box-sizing: border-box; |
| min-height: 48px; |
| padding: 8px 12px; |
| border: 1px solid var(--stats-line); |
| color: var(--stats-text); |
| background: var(--stats-layer); |
| text-decoration: none; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a:hover, |
| [data-page="stats"] [data-component="retention-chart"] a:focus-visible, |
| [data-page="stats"] [data-component="retention-chart"] a[data-active="true"] { |
| border-color: var(--stats-line-strong); |
| background: var(--stats-layer-2); |
| outline: none; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > span { |
| color: var(--stats-faint); |
| font-size: 13px; |
| font-weight: 400; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > strong { |
| min-width: 0; |
| overflow-wrap: anywhere; |
| font-size: 13px; |
| font-weight: 600; |
| line-height: 18px; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > b, |
| [data-page="stats"] [data-component="retention-chart"] a > em { |
| font-size: 13px; |
| font-style: normal; |
| font-weight: 500; |
| text-align: right; |
| white-space: nowrap; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > em { |
| color: var(--stats-muted); |
| } |
|
|
| [data-page="stats"] [data-component="retention-marker"] { |
| position: relative; |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| align-items: center; |
| height: 16px; |
| background: linear-gradient(var(--stats-line-strong), var(--stats-line-strong)) center / 100% 1px no-repeat; |
| } |
|
|
| [data-page="stats"] [data-component="retention-marker"] > span { |
| justify-self: end; |
| width: 1px; |
| height: 8px; |
| background: var(--stats-line-strong); |
| } |
|
|
| [data-page="stats"] [data-component="retention-marker"] > em { |
| position: absolute; |
| top: 50%; |
| left: var(--retention-position); |
| width: 7px; |
| height: 16px; |
| background: var(--stats-muted); |
| transform: translate(-50%, -50%); |
| } |
|
|
| [data-page="stats"] [data-component="retention-marker"][data-active="true"] > em { |
| background: var(--stats-accent); |
| } |
|
|
| [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; |
| position: relative; |
| 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; |
| text-align: left; |
| 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-component="market-share"] > [data-component="chart-tooltip"] { |
| top: 52px; |
| box-sizing: border-box; |
| display: flex; |
| flex-direction: column; |
| gap: 0; |
| width: 228px; |
| min-width: 228px; |
| padding: 0; |
| border: 0; |
| background: #fffffff2; |
| 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="market-share"] > [data-component="chart-tooltip"][data-placement="right"] { |
| right: auto; |
| left: calc(var(--market-tooltip-left) + 8px); |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"][data-placement="left"] { |
| right: calc(var(--market-tooltip-right) + 8px); |
| left: auto; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] strong, |
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] > span { |
| display: block; |
| font-size: 11px; |
| line-height: 12px; |
| white-space: nowrap; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] strong { |
| padding: 8px 8px 0; |
| font-weight: 500; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] > span { |
| padding: 4px 8px 8px; |
| color: var(--stats-muted); |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] [data-slot="tooltip-divider"] { |
| height: 0.5px; |
| margin: 0; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] p { |
| grid-template-columns: minmax(0, 1fr) auto auto; |
| gap: 8px; |
| height: 16px; |
| margin: 4px 0 0; |
| padding: 0 8px; |
| font-size: 11px; |
| font-weight: 500; |
| line-height: 12px; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] p[data-muted="true"] { |
| opacity: 0.46; |
| } |
|
|
| [data-page="stats"] |
| [data-component="market-share"] |
| > [data-component="chart-tooltip"] |
| [data-slot="tooltip-divider"] |
| + p { |
| margin-top: 8px; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] p:last-child { |
| margin-bottom: 8px; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] [data-slot="tooltip-label"] { |
| grid-template-columns: 16px minmax(0, 1fr); |
| gap: 4px; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] i { |
| width: 6px; |
| height: 6px; |
| justify-self: center; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] em, |
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] b { |
| font-style: normal; |
| font-weight: 500; |
| white-space: nowrap; |
| } |
|
|
| [data-page="stats"] [data-component="market-share"] > [data-component="chart-tooltip"] em { |
| color: var(--stats-muted); |
| } |
|
|
| [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-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(5, 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: 1ch; |
| 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[data-providerless="true"] { |
| grid-template-columns: 32px minmax(0, 1fr) minmax(64px, auto); |
| } |
|
|
| [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; |
| font: inherit; |
| overflow-wrap: anywhere; |
| } |
|
|
| [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-wrap: anywhere; |
| } |
|
|
| [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 auto 20px; |
| gap: 16px; |
| min-width: 0; |
| min-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; |
| flex-wrap: wrap; |
| gap: 6px; |
| color: var(--stats-muted); |
| font-weight: 400; |
| overflow-wrap: anywhere; |
| } |
|
|
| [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; |
| align-self: stretch; |
| 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 { |
| font-size: 13px; |
| line-height: 18px; |
| overflow-wrap: break-word; |
| word-break: normal; |
| } |
|
|
| [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; |
| color: var(--stats-text); |
| font-size: 13px; |
| font-weight: 500; |
| line-height: 18px; |
| overflow-wrap: anywhere; |
| } |
|
|
| [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; |
| } |
| } |
|
|
| @media (max-width: 74rem) { |
| [data-page="stats"] [data-slot="retention-heading"], |
| [data-page="stats"] [data-component="retention-chart"] a { |
| grid-template-columns: 40px minmax(140px, 220px) minmax(140px, 1fr) 60px 76px; |
| gap: 12px; |
| } |
| } |
|
|
| @media (max-width: 47.999rem) { |
| [data-page="stats"] [data-component="retention-chart"] { |
| margin-top: 28px; |
| } |
|
|
| [data-page="stats"] [data-slot="retention-heading"] { |
| display: none; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a { |
| grid-template-columns: 28px minmax(0, 1fr) 58px 62px; |
| grid-template-rows: auto 16px; |
| gap: 8px 10px; |
| min-height: 68px; |
| padding: 10px; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > span { |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > strong { |
| grid-column: 2; |
| grid-row: 1; |
| } |
|
|
| [data-page="stats"] [data-component="retention-marker"] { |
| grid-column: 2 / -1; |
| grid-row: 2; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > b { |
| grid-column: 3; |
| grid-row: 1; |
| } |
|
|
| [data-page="stats"] [data-component="retention-chart"] a > em { |
| grid-column: 4; |
| grid-row: 1; |
| } |
| } |
|
|
| [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; |
| color: var(--stats-text); |
| font-size: 13px; |
| font-weight: 500; |
| line-height: 1.1; |
| overflow-wrap: anywhere; |
| } |
|
|
| [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; |
| color: var(--stats-text); |
| font-size: 13px; |
| font-weight: 500; |
| line-height: 1.1; |
| overflow-wrap: anywhere; |
| } |
|
|
| [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: #a3a3a3; |
| --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: #a3a3a3; |
| --stats-accent-text: #8190ff; |
| --stats-theme-icon-active: #fafafa; |
| --stats-bar-idle: #303030; |
| --stats-dot: #303030; |
| --stats-hero-muted: #a3a3a3; |
| --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"]) |
| [data-component="market-share"] |
| > [data-component="chart-tooltip"], |
| [data-page="stats"][data-theme="dark"] [data-component="market-share"] > [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: #a3a3a3; |
| --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: #a3a3a3; |
| --stats-accent-text: #8190ff; |
| --stats-theme-icon-active: #fafafa; |
| --stats-bar-idle: #303030; |
| --stats-dot: #303030; |
| --stats-hero-muted: #a3a3a3; |
| --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"] { |
| display: grid; |
| grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); |
| gap: 32px; |
| } |
|
|
| [data-page="stats"] [data-slot="brand"], |
| [data-page="stats"] [data-component="section-nav"], |
| [data-page="stats"] [data-slot="header-actions"] { |
| min-width: 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="retention"], |
| [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-momentum-metric"]:last-child:nth-child(odd) { |
| grid-column: 1 / -1; |
| } |
|
|
| [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="retention"], |
| [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-component="model-peer-list"] a[data-providerless="true"] { |
| grid-template-columns: 28px minmax(0, 1fr) minmax(56px, auto); |
| } |
|
|
| [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-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: 18px; |
| } |
|
|
| [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: 18px; |
| } |
|
|
| [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"] [data-component="market-share"] > [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"] [data-component="market-share"] > [data-component="chart-tooltip"][data-placement] { |
| right: 12px; |
| left: 12px; |
| } |
|
|
| [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; |
| } |
| } |
|
|
