Spaces:
Running
Running
| /* ── Design Tokens ── */ | |
| :root { | |
| --bg: #0d1117; | |
| --bg-paper: #161b22; | |
| --ink: #c9d1d9; | |
| --ink-light: #8b949e; | |
| --ink-muted: #6e7681; | |
| --accent-teal: #2a9d8f; | |
| --accent-coral: #e76f51; | |
| --accent-slate: #58a6ff; | |
| --accent-gold: #e9c46a; | |
| --sketch: #c9d1d9; | |
| --border-sketch: #30363d; | |
| --font-hand: 'Kalam', cursive; | |
| --font-sans: 'Inter', -apple-system, sans-serif; | |
| } | |
| /* ── Reset & Base ── */ | |
| *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } | |
| html { scroll-behavior: smooth; } | |
| body { | |
| font-family: var(--font-sans); | |
| background: var(--bg); | |
| color: var(--ink); | |
| line-height: 1.6; | |
| min-height: 100vh; | |
| overflow-x: hidden; | |
| } | |
| /* ── Paper Texture ── */ | |
| .paper-texture { | |
| position: fixed; | |
| inset: 0; | |
| pointer-events: none; | |
| z-index: 0; | |
| opacity: 0.25; | |
| background-image: | |
| radial-gradient(circle at 20% 30%, rgba(42,157,143,0.06) 0%, transparent 50%), | |
| radial-gradient(circle at 80% 70%, rgba(231,111,81,0.06) 0%, transparent 50%); | |
| } | |
| /* ── Sketch Box (hand-drawn border) ── */ | |
| .sketch-box { | |
| background: var(--bg-paper); | |
| border: 2px solid var(--border-sketch); | |
| border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; | |
| box-shadow: 3px 4px 0 rgba(0,0,0,0.3); | |
| transition: transform 0.2s ease, box-shadow 0.2s ease; | |
| } | |
| .sketch-box:hover { | |
| transform: translateY(-2px) rotate(-0.3deg); | |
| box-shadow: 5px 7px 0 rgba(0,0,0,0.4); | |
| } | |
| /* ── Sketch Underline ── */ | |
| .sketch-underline { | |
| position: relative; | |
| display: inline-block; | |
| padding-bottom: 6px; | |
| margin-bottom: 16px; | |
| } | |
| .sketch-underline::after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 100%; | |
| height: 3px; | |
| background: var(--accent-teal); | |
| border-radius: 100% 0% 100% 0% / 0% 100% 0% 100%; | |
| opacity: 0.7; | |
| transform: rotate(-0.5deg); | |
| } | |
| /* ── Container ── */ | |
| .container { | |
| max-width: 1100px; | |
| margin: 0 auto; | |
| padding: 0 24px; | |
| position: relative; | |
| z-index: 1; | |
| } | |
| /* ── Header ── */ | |
| .site-header { | |
| border-bottom: 2px solid var(--border-sketch); | |
| background: rgba(13,17,23,0.92); | |
| backdrop-filter: blur(8px); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| padding: 16px 0; | |
| } | |
| .header-content { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 14px; | |
| } | |
| .logo-sketch { | |
| width: 48px; | |
| height: 48px; | |
| color: var(--accent-slate); | |
| transform: rotate(-3deg); | |
| } | |
| .logo-sketch svg { | |
| width: 100%; height: 100%; | |
| } | |
| .brand-text h1 { | |
| font-family: var(--font-hand); | |
| font-size: 2rem; | |
| font-weight: 700; | |
| color: var(--ink); | |
| line-height: 1.1; | |
| letter-spacing: 0.02em; | |
| transform: rotate(-1deg); | |
| } | |
| .tagline { | |
| font-family: var(--font-hand); | |
| font-size: 0.95rem; | |
| color: var(--ink-muted); | |
| margin-top: 2px; | |
| transform: rotate(0.5deg); | |
| } | |
| .lede { | |
| font-family: var(--font-hand); | |
| font-size: 1.05rem; | |
| line-height: 1.5; | |
| color: var(--ink-light); | |
| max-width: 680px; | |
| margin-top: 12px; | |
| transform: rotate(0.3deg); | |
| } | |
| /* ── Stats Grid ── */ | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 20px; | |
| margin: 32px 0; | |
| } | |
| .stat-card { | |
| padding: 24px 20px; | |
| text-align: center; | |
| position: relative; | |
| } | |
| .stat-card.highlight { | |
| border-color: var(--accent-teal); | |
| background: linear-gradient(135deg, rgba(42,157,143,0.1), rgba(42,157,143,0.04)); | |
| } | |
| .stat-card.highlight::before { | |
| content: '★'; | |
| position: absolute; | |
| top: 8px; | |
| right: 14px; | |
| font-size: 1.2rem; | |
| color: var(--accent-teal); | |
| opacity: 0.5; | |
| transform: rotate(12deg); | |
| } | |
| .stat-value { | |
| font-family: var(--font-hand); | |
| font-size: 2.2rem; | |
| font-weight: 700; | |
| color: var(--ink); | |
| line-height: 1.1; | |
| } | |
| .stat-label { | |
| font-family: var(--font-hand); | |
| font-size: 0.95rem; | |
| color: var(--ink-muted); | |
| margin-top: 6px; | |
| } | |
| /* ── Controls ── */ | |
| .controls-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 16px; | |
| margin: 20px 0; | |
| flex-wrap: wrap; | |
| } | |
| .dataset-bar { | |
| display: none; | |
| margin-top: -6px; | |
| } | |
| .group-tabs, .dataset-tabs { | |
| display: flex; | |
| gap: 8px; | |
| flex-wrap: wrap; | |
| } | |
| .tab-btn { | |
| padding: 8px 18px; | |
| border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; | |
| border: 2px solid var(--border-sketch); | |
| background: var(--bg-paper); | |
| color: var(--ink-light); | |
| font-family: var(--font-hand); | |
| font-size: 0.95rem; | |
| font-weight: 700; | |
| cursor: pointer; | |
| transition: all 0.2s ease; | |
| white-space: nowrap; | |
| } | |
| .tab-btn:hover { | |
| border-color: var(--accent-teal); | |
| color: var(--accent-teal); | |
| transform: rotate(-1deg) scale(1.02); | |
| } | |
| .tab-btn.active { | |
| background: var(--accent-slate); | |
| color: var(--bg); | |
| border-color: var(--accent-slate); | |
| transform: rotate(-1deg); | |
| box-shadow: 3px 3px 0 rgba(88,166,255,0.25); | |
| } | |
| .group-tab { | |
| font-size: 1rem; | |
| padding: 10px 20px; | |
| } | |
| /* ── Search ── */ | |
| .search-box input { | |
| width: 260px; | |
| padding: 10px 16px; | |
| border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; | |
| border: 2px solid var(--border-sketch); | |
| background: var(--bg-paper); | |
| color: var(--ink); | |
| font-family: var(--font-hand); | |
| font-size: 0.95rem; | |
| outline: none; | |
| transition: all 0.2s ease; | |
| } | |
| .search-box input:focus { | |
| border-color: var(--accent-teal); | |
| box-shadow: 3px 3px 0 rgba(42,157,143,0.2); | |
| transform: rotate(0.5deg); | |
| } | |
| .search-box input::placeholder { | |
| color: var(--ink-muted); | |
| } | |
| /* ── Section Header ── */ | |
| .section-header { | |
| display: flex; | |
| align-items: baseline; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| margin-bottom: 14px; | |
| } | |
| .section-header h2 { | |
| font-family: var(--font-hand); | |
| font-size: 1.4rem; | |
| font-weight: 700; | |
| color: var(--ink); | |
| transform: rotate(-0.5deg); | |
| } | |
| .section-badge { | |
| font-family: var(--font-hand); | |
| background: var(--bg-paper); | |
| color: var(--accent-coral); | |
| padding: 4px 14px; | |
| border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; | |
| font-size: 0.8rem; | |
| font-weight: 700; | |
| border: 2px solid var(--border-sketch); | |
| transform: rotate(1deg); | |
| } | |
| .table-meta { | |
| font-family: var(--font-hand); | |
| font-size: 0.85rem; | |
| color: var(--ink-muted); | |
| } | |
| /* ── Chart ── */ | |
| .chart-section { margin: 32px 0; } | |
| .chart-container { | |
| padding: 24px; | |
| min-height: 280px; | |
| position: relative; | |
| } | |
| .chart-placeholder { | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| height: 240px; | |
| color: var(--ink-muted); | |
| font-family: var(--font-hand); | |
| font-size: 1.1rem; | |
| } | |
| .chart-svg { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| /* ── Table ── */ | |
| .table-section { margin: 32px 0 64px; } | |
| .table-wrap { | |
| overflow-x: hidden; /* No scroll needed now */ | |
| padding: 4px; | |
| } | |
| .leaderboard { | |
| width: 100%; | |
| border-collapse: separate; | |
| border-spacing: 0; | |
| font-size: 0.78rem; /* Reduced from 0.85rem to fit 12 cols */ | |
| } | |
| .leaderboard thead { | |
| position: sticky; | |
| top: 0; | |
| z-index: 10; | |
| } | |
| .leaderboard th { | |
| padding: 10px 8px; /* Tighter padding */ | |
| text-align: left; | |
| font-family: var(--font-hand); | |
| font-weight: 700; | |
| color: var(--ink); | |
| font-size: 0.88rem; | |
| border-bottom: 2px solid var(--border-sketch); | |
| cursor: pointer; | |
| user-select: none; | |
| white-space: nowrap; | |
| transition: color 0.2s ease; | |
| background: var(--bg-paper); | |
| } | |
| .leaderboard th:hover { | |
| color: var(--accent-teal); | |
| } | |
| .leaderboard th[data-sort].asc::after { content: ' ↑'; color: var(--accent-teal); } | |
| .leaderboard th[data-sort].desc::after { content: ' ↓'; color: var(--accent-teal); } | |
| .leaderboard td { | |
| padding: 10px 8px; /* Tighter padding */ | |
| border-bottom: 1.5px dashed var(--border-sketch); | |
| vertical-align: middle; | |
| } | |
| .leaderboard tbody tr { | |
| transition: background 0.15s ease; | |
| } | |
| .leaderboard tbody tr:hover { | |
| background: rgba(42,157,143,0.06); | |
| } | |
| .leaderboard tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* ── Rank Badge ── */ | |
| .col-rank { | |
| width: 40px; /* Slightly narrower */ | |
| text-align: center ; | |
| } | |
| .rank-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 26px; /* Smaller badge */ | |
| height: 26px; | |
| border-radius: 50%; | |
| font-family: var(--font-hand); | |
| font-weight: 700; | |
| font-size: 0.8rem; | |
| transform: rotate(-2deg); | |
| } | |
| .rank-1 { | |
| background: var(--accent-teal); | |
| color: #fff; | |
| box-shadow: 2px 2px 0 rgba(42,157,143,0.3); | |
| } | |
| .rank-2 { | |
| background: var(--accent-slate); | |
| color: #fff; | |
| box-shadow: 2px 2px 0 rgba(88,166,255,0.3); | |
| } | |
| .rank-3 { | |
| background: var(--accent-coral); | |
| color: #fff; | |
| box-shadow: 2px 2px 0 rgba(231,111,81,0.3); | |
| } | |
| .rank-other { | |
| background: var(--bg); | |
| color: var(--ink-muted); | |
| border: 2px solid var(--border-sketch); | |
| } | |
| /* ── Model Cell ── */ | |
| .col-model { min-width: 160px; /* Reduced from 200px */ } | |
| .model-name { | |
| font-weight: 700; | |
| color: var(--ink); | |
| font-size: 0.85rem; | |
| line-height: 1.2; | |
| } | |
| .model-id { | |
| font-family: var(--font-hand); | |
| font-size: 0.7rem; | |
| color: var(--ink-muted); | |
| margin-top: 1px; | |
| } | |
| /* ── Backend Badge ── */ | |
| .backend-badge { | |
| display: inline-block; | |
| padding: 2px 8px; | |
| border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; | |
| font-family: var(--font-hand); | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| border: 2px solid; | |
| transform: rotate(-1deg); | |
| } | |
| .backend-hf { | |
| background: rgba(42,157,143,0.12); | |
| color: var(--accent-teal); | |
| border-color: rgba(42,157,143,0.35); | |
| } | |
| .backend-tiktoken { | |
| background: rgba(88,166,255,0.12); | |
| color: var(--accent-slate); | |
| border-color: rgba(88,166,255,0.35); | |
| } | |
| .backend-google { | |
| background: rgba(231,111,81,0.12); | |
| color: var(--accent-coral); | |
| border-color: rgba(231,111,81,0.35); | |
| } | |
| .backend-anthropic { | |
| background: rgba(217,119,87,0.14); | |
| color: #c15f3c; | |
| border-color: rgba(217,119,87,0.4); | |
| } | |
| .backend-xai { | |
| background: rgba(120,120,130,0.14); | |
| color: #4a4a52; | |
| border-color: rgba(90,90,100,0.4); | |
| } | |
| /* ── Numbers ── */ | |
| .col-vocab, .col-tokens, .col-cpt { | |
| font-family: var(--font-hand); | |
| font-variant-numeric: tabular-nums; | |
| font-size: 0.92rem; | |
| } | |
| .col-cpt { | |
| font-weight: 700; | |
| color: var(--accent-coral); | |
| } | |
| /* ── Price & Throughput Columns ── */ | |
| .col-price, .col-price-adj, .col-throughput, .col-throughput-adj { | |
| font-family: var(--font-hand); | |
| font-variant-numeric: tabular-nums; | |
| white-space: nowrap; | |
| font-size: 0.92rem; | |
| } | |
| /* ── Tokenizer Tax ── same signal as C/T, so it shares its accent color */ | |
| .col-tax { | |
| font-family: var(--font-hand); | |
| font-variant-numeric: tabular-nums; | |
| font-weight: 700; | |
| color: var(--accent-coral); | |
| white-space: nowrap; | |
| font-size: 0.92rem; | |
| } | |
| /* ── Loading ── */ | |
| .loading-row td { | |
| text-align: center; | |
| padding: 48px; | |
| color: var(--ink-muted); | |
| font-family: var(--font-hand); | |
| font-size: 1rem; | |
| } | |
| .sketch-spinner { | |
| width: 36px; | |
| height: 36px; | |
| border: 3px solid var(--border-sketch); | |
| border-top-color: var(--accent-teal); | |
| border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; | |
| animation: sketchSpin 1s ease-in-out infinite; | |
| margin: 0 auto 16px; | |
| } | |
| @keyframes sketchSpin { | |
| 0% { transform: rotate(0deg) scale(1); } | |
| 50% { transform: rotate(180deg) scale(1.1); } | |
| 100% { transform: rotate(360deg) scale(1); } | |
| } | |
| /* ── Empty State ── */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 64px 24px; | |
| color: var(--ink-muted); | |
| font-family: var(--font-hand); | |
| font-size: 1.1rem; | |
| } | |
| .empty-state h3 { | |
| color: var(--ink); | |
| margin-bottom: 8px; | |
| font-family: var(--font-hand); | |
| font-size: 1.3rem; | |
| } | |
| /* ── Footer ── */ | |
| .site-footer { | |
| border-top: 2px solid var(--border-sketch); | |
| padding: 28px 0; | |
| margin-top: auto; | |
| text-align: center; | |
| color: var(--ink-muted); | |
| font-family: var(--font-hand); | |
| font-size: 0.9rem; | |
| } | |
| /* ── Responsive ── */ | |
| @media (max-width: 768px) { | |
| .stats-grid { grid-template-columns: 1fr; } | |
| .controls-bar { flex-direction: column; align-items: stretch; } | |
| .search-box input { width: 100%; } | |
| .leaderboard { font-size: 0.7rem; } | |
| .leaderboard th, .leaderboard td { padding: 8px 6px; } | |
| .col-vocab { display: none; } | |
| } | |
| @media (max-width: 480px) { | |
| .col-backend, .col-tokens { display: none; } | |
| .brand-text h1 { font-size: 1.5rem; } | |
| } | |
| /* ── Scrollbar ── */ | |
| ::-webkit-scrollbar { width: 8px; height: 8px; } | |
| ::-webkit-scrollbar-track { background: var(--bg); } | |
| ::-webkit-scrollbar-thumb { background: var(--border-sketch); border-radius: 4px; } | |
| ::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); } |