| |
| :root { |
| --bg: #0B1527; |
| --bg-opaque: rgba(11, 21, 39, 0.45); |
| --bg-surface: #1a1a2e; |
| --teal: #58b1c3; |
| --green: #6fcf97; |
| --red: #ff4d6d; |
| --pink: #ff6ec7; |
| --purple: #9b5de5; |
| --blue: #007F9E; |
| --neutral: #667788; |
| --text: #e8e8e8; |
| --text-muted: #8899aa; |
| --text-dim: #5a6a7a; |
| --border: rgba(255, 255, 255, 0.15); |
| --btn-hover-bg: rgba(255, 255, 255, 0.03); |
| --btn-active-bg: rgba(88, 177, 195, 0.12); |
| --btn-active-border: rgba(88, 177, 195, 0.3); |
| --sidebar-active-bg: rgba(88, 177, 195, 0.04); |
| --row-hover-bg: rgba(255, 255, 255, 0.02); |
| --row-border: rgba(255, 255, 255, 0.03); |
| --code-bg: rgba(88, 177, 195, 0.1); |
| --tooltip-bg: #2c3e50; |
| --tooltip-text: #f1f1f1; |
| --tooltip-body: #d9d9d9; |
| } |
|
|
| |
| *, *::before, *::after { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| html { |
| font-size: 16px; |
| background: radial-gradient( |
| 800px 500px at 50% -40px, |
| rgba(0, 226, 213, 0.25), |
| rgba(18, 208, 254, 0.15) 30%, |
| transparent 70% |
| ), var(--bg); |
| } |
|
|
| body { |
| font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| color: var(--text); |
| line-height: 1.6; |
| -webkit-font-smoothing: antialiased; |
| position: relative; |
| } |
|
|
| code { |
| background: var(--code-bg); |
| color: var(--teal); |
| padding: 0.15em 0.45em; |
| border-radius: 4px; |
| font-size: 0.95em; |
| } |
|
|
| |
| .page { |
| position: relative; |
| z-index: 1; |
| display: flex; |
| flex-direction: row; |
| min-height: 100vh; |
| max-width: 1440px; |
| margin: 0 auto; |
| } |
|
|
| |
| .sidebar { |
| width: 280px; |
| max-width: 300px; |
| flex-shrink: 0; |
| padding: 2rem 0; |
| position: sticky; |
| top: 0; |
| height: 100vh; |
| overflow-y: auto; |
| } |
|
|
| .sidebar-logo { |
| display: block; |
| padding: 0 1.25rem 3.25rem; |
| } |
|
|
| .sidebar-nav { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .sidebar-item { |
| display: block; |
| padding: 0.5rem 1.25rem; |
| font-size: 1.25rem; |
| font-weight: 400; |
| color: var(--text-dim); |
| text-decoration: none; |
| cursor: pointer; |
| border-left: 2px solid transparent; |
| transition: color 0.15s, background 0.15s, border-color 0.15s; |
| } |
|
|
| .sidebar-item:hover { |
| color: var(--text-muted); |
| } |
|
|
| .sidebar-item.active { |
| color: var(--teal); |
| font-weight: 600; |
| } |
|
|
| |
| .main { |
| flex: 1; |
| min-width: 0; |
| } |
|
|
| .main-inner { |
| max-width: 1100px; |
| width: 100%; |
| padding: 0 2rem 2rem; |
| } |
|
|
| |
| .hero { |
| position: relative; |
| padding: 2rem 0 2.5rem; |
| } |
|
|
| .hero-badge { |
| display: inline-block; |
| padding: 1px; |
| border-radius: 999px; |
| background: linear-gradient(90deg, var(--teal), var(--blue)); |
| margin-bottom: 1rem; |
| } |
|
|
| .hero-badge span { |
| display: inline-block; |
| padding: 0.35rem 1rem; |
| border-radius: 999px; |
| background: var(--bg-opaque); |
| color: var(--teal); |
| font-size: 1rem; |
| font-weight: 600; |
| letter-spacing: 0.03em; |
| text-transform: uppercase; |
| } |
|
|
| .hero h1 { |
| font-size: clamp(1.8rem, 3.5vw, 3.0rem); |
| font-weight: 700; |
| margin-bottom: 0.5rem; |
| letter-spacing: -0.02em; |
| } |
|
|
| .hero .accent { |
| color: var(--teal); |
| } |
|
|
| .hero-sub { |
| color: var(--text-muted); |
| font-size: 1.1rem; |
| max-width: 620px; |
| line-height: 1.6; |
| } |
|
|
| |
| .filters-bar { |
| display: flex; |
| flex-wrap: wrap; |
| gap: 1.25rem; |
| padding: 1rem 0; |
| top: 0; |
| z-index: 10; |
| } |
|
|
| .filter-group label { |
| display: block; |
| font-size: 0.8rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--text-dim); |
| margin-bottom: 0.25rem; |
| } |
|
|
| .btn-group { |
| display: flex; |
| } |
|
|
| .btn { |
| background: transparent; |
| border: 1px solid var(--border); |
| color: var(--text-muted); |
| font-size: 1rem; |
| font-weight: 400; |
| padding: 0.45rem 1rem; |
| cursor: pointer; |
| transition: all 0.15s; |
| } |
|
|
| .btn:first-child { |
| border-radius: 6px 0 0 6px; |
| } |
|
|
| .btn:last-child { |
| border-radius: 0 6px 6px 0; |
| } |
|
|
| .btn:not(:first-child) { |
| margin-left: -1px; |
| } |
|
|
| .btn:hover { |
| color: var(--text); |
| background: var(--btn-hover-bg); |
| } |
|
|
| .btn.active { |
| background: var(--btn-active-bg); |
| color: var(--teal); |
| border-color: var(--btn-active-border); |
| font-weight: 600; |
| z-index: 1; |
| position: relative; |
| } |
|
|
| |
| .chart-block { |
| margin: 1.5rem 0; |
| } |
|
|
| .chart-heading { |
| font-size: 1.25rem; |
| font-weight: 600; |
| color: var(--text); |
| margin-bottom: 0.25rem; |
| } |
|
|
| .chart-subtitle { |
| font-size: 1rem; |
| color: var(--text-muted); |
| margin-bottom: 0.75rem; |
| } |
|
|
| .chart-wrap { |
| height: 340px; |
| } |
|
|
| |
| .table-card { |
| margin: 1.5rem 0 2rem; |
| } |
|
|
| .table-card h3 { |
| font-size: 1.15rem; |
| font-weight: 600; |
| color: var(--text); |
| margin-bottom: 0.5rem; |
| padding-bottom: 0.5rem; |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| .table-scroll { |
| overflow-x: auto; |
| scrollbar-color: var(--text-dim) var(--border); |
| scrollbar-width: thin; |
| } |
|
|
| .table-scroll::-webkit-scrollbar { |
| height: 8px; |
| } |
|
|
| .table-scroll::-webkit-scrollbar-track { |
| background: var(--border); |
| border-radius: 4px; |
| } |
|
|
| .table-scroll::-webkit-scrollbar-thumb { |
| background: var(--text-dim); |
| border-radius: 4px; |
| } |
|
|
| .table-scroll::-webkit-scrollbar-thumb:hover { |
| background: var(--text-muted); |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 1rem; |
| } |
|
|
| thead th { |
| text-align: left; |
| font-weight: 600; |
| font-size: 0.8rem; |
| text-transform: uppercase; |
| letter-spacing: 0.05em; |
| color: var(--text-dim); |
| padding: 0.5rem 0.75rem; |
| border-bottom: 1px solid var(--border); |
| white-space: nowrap; |
| } |
|
|
| tbody td { |
| padding: 0.5rem 0.75rem; |
| border-bottom: 1px solid var(--row-border); |
| white-space: nowrap; |
| color: var(--text-muted); |
| } |
|
|
| tbody tr:last-child td { |
| border-bottom: 1px solid var(--border); |
| } |
|
|
| tbody tr:hover { |
| background: var(--row-hover-bg); |
| } |
|
|
| .model-cell { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| font-weight: 500; |
| color: var(--text); |
| } |
|
|
| .model-cell a { |
| color: var(--teal); |
| text-decoration: none; |
| transition: color 0.15s; |
| } |
|
|
| .model-cell a:hover { |
| text-decoration: underline; |
| } |
|
|
| .model-dot { |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| flex-shrink: 0; |
| } |
|
|
| th.first-metric, td.first-metric { |
| padding-left: 2.5rem; |
| } |
|
|
| .oom { |
| color: var(--red); |
| font-weight: 600; |
| } |
|
|
| tbody tr.row-group-break td { |
| border-top: 2px solid var(--border); |
| } |
|
|
| |
| .legend-section { |
| margin: 2rem 0; |
| padding-top: 1.5rem; |
| } |
|
|
| .legend-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 0.25rem; |
| font-size: 0.8rem; |
| color: var(--text-dim); |
| } |
|
|
| .legend-grid strong { |
| color: var(--text-muted); |
| font-weight: 500; |
| } |
|
|
| .experiment-setup { |
| margin-top: 0.75rem; |
| font-size: 0.95rem; |
| color: var(--text-dim); |
| font-style: italic; |
| line-height: 1.6; |
| } |
|
|
| .experiment-setup p { |
| margin-bottom: 0.25rem; |
| } |
|
|
| |
| .footer { |
| padding: 2.5rem 0; |
| margin-top: 2rem; |
| } |
|
|
| .footer-inner { |
| max-width: 1440px; |
| margin: 0 auto; |
| padding: 0 2rem; |
| } |
|
|
| .footer-grid { |
| display: flex; |
| gap: 3rem; |
| flex-wrap: wrap; |
| } |
|
|
| .footer-col { |
| font-size: 1rem; |
| color: var(--text-dim); |
| line-height: 1.7; |
| } |
|
|
| .footer-col p { |
| margin: 0; |
| } |
|
|
| .footer-col-title { |
| font-size: 0.85rem; |
| font-weight: 600; |
| text-transform: uppercase; |
| letter-spacing: 0.08em; |
| color: var(--text); |
| } |
|
|
| .footer-logo-img { |
| display: block; |
| margin-bottom: 0.5rem; |
| } |
|
|
| .footer-logo { |
| font-size: 1rem; |
| color: var(--text-muted); |
| margin-bottom: 1.2rem; |
| } |
|
|
| .footer-logo a { |
| color: var(--text-muted); |
| text-decoration: none; |
| } |
|
|
| .footer-logo a:hover { |
| text-decoration: underline; |
| } |
|
|
| .footer-social { |
| display: flex; |
| gap: 0.75rem; |
| } |
|
|
| .footer-social a { |
| color: var(--text-dim); |
| transition: color 0.15s; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .footer-social a:hover { |
| color: var(--teal); |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .page { |
| flex-direction: column; |
| } |
|
|
| .sidebar { |
| width: 100%; |
| max-width: none; |
| height: auto; |
| position: static; |
| border-right: none; |
| border-bottom: 1px solid var(--border); |
| padding: 0.75rem 0; |
| } |
|
|
| .sidebar-nav { |
| flex-direction: row; |
| flex-wrap: wrap; |
| padding: 0 0.75rem; |
| } |
|
|
| .sidebar-item { |
| border-left: none; |
| border-bottom: 2px solid transparent; |
| padding: 0.4rem 0.75rem; |
| font-size: 0.9rem; |
| } |
|
|
| .sidebar-item.active { |
| border-left-color: transparent; |
| border-bottom-color: var(--teal); |
| } |
|
|
| .main-inner { |
| padding: 0 1rem 2rem; |
| } |
|
|
| .filters-bar { |
| gap: 0.75rem; |
| } |
|
|
| .btn { |
| font-size: 0.85rem; |
| padding: 0.35rem 0.7rem; |
| } |
|
|
| .chart-wrap { |
| height: 260px; |
| } |
| } |
|
|
