| |
| :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.06); |
| --chart-grid: rgba(255,255,255,0.06); |
| --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-hover-bg: rgba(255,255,255,0.02); |
| --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; } |
| body { |
| font-family: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| line-height: 1.6; |
| -webkit-font-smoothing: antialiased; |
| position: relative; |
| } |
| body::before { |
| content: ""; |
| position: fixed; |
| top: -260px; |
| left: 50%; |
| transform: translateX(-50%); |
| width: 69rem; |
| height: 42rem; |
| background: radial-gradient(circle, rgba(0,226,213,0.25) 0%, rgba(18,208,254,0.15) 30%, transparent 70%); |
| filter: blur(80px); |
| pointer-events: none; |
| z-index: 0; |
| } |
| 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; gap: 0; } |
| .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: none; } |
| 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; } |
| .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; } |
| } |
|
|
