| :root { |
| --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; |
| --sans: Inter, system-ui, -apple-system, sans-serif; |
| --mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace; |
| --ink: #000; |
| --mute: #737373; |
| --line: rgba(0, 0, 0, 0.08); |
| --fill: #f5f5f5; |
| --accent: #6c4fe0; |
| --bg: #fff; |
| } |
|
|
| * { box-sizing: border-box; } |
| html { scroll-behavior: smooth; } |
| body { |
| margin: 0; |
| background: var(--bg); |
| color: var(--ink); |
| font-family: var(--sans); |
| } |
|
|
| .page { max-width: 1240px; margin: 0 auto; padding: 24px 20px 72px; } |
|
|
| .eyebrow { |
| font-family: var(--mono); |
| font-size: 11px; |
| letter-spacing: 2.5px; |
| color: var(--accent); |
| text-transform: uppercase; |
| margin: 4px 0 0; |
| } |
| h1 { |
| font-family: var(--serif); |
| font-weight: 400; |
| font-size: 34px; |
| letter-spacing: -0.5px; |
| margin: 2px 0 4px; |
| } |
| .subtitle { |
| font-family: var(--mono); |
| font-size: 12px; |
| color: var(--mute); |
| margin: 0 0 16px; |
| } |
| .scope-note { |
| max-width: 760px; |
| color: var(--mute); |
| font-size: 12px; |
| margin: -8px 0 14px; |
| } |
|
|
| a { color: var(--accent); } |
| code { |
| font-family: var(--mono); |
| font-size: 12px; |
| background: #f3f2ef; |
| border-radius: 4px; |
| padding: 0 4px; |
| } |
|
|
| .legendrow, .filters, .searchrow { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| align-items: center; |
| margin: 0 0 12px; |
| } |
| .legend { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| font-family: var(--mono); |
| font-size: 12px; |
| color: var(--mute); |
| } |
| .dot { |
| width: 9px; |
| height: 9px; |
| border-radius: 3px; |
| display: inline-block; |
| } |
|
|
| .search { |
| flex: 1; |
| min-width: 220px; |
| font-size: 14px; |
| padding: 9px 12px; |
| border: 1px solid #d4d4d4; |
| border-radius: 8px; |
| background: #fff; |
| } |
| .chip { |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--mute); |
| background: var(--fill); |
| border: 1px solid transparent; |
| border-radius: 999px; |
| padding: 5px 12px; |
| cursor: pointer; |
| } |
| .chip.on, .chip:hover { color: var(--ink); border-color: #d4d4d4; background: #fff; } |
| .chip.on { outline: 1px solid rgba(108, 79, 224, 0.35); background: rgba(108, 79, 224, 0.08); } |
|
|
| .cards { |
| display: grid; |
| grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); |
| gap: 10px; |
| } |
| .card { |
| background: #fff; |
| border: 1px solid var(--line); |
| border-radius: 10px; |
| overflow: hidden; |
| cursor: pointer; |
| text-align: left; |
| padding: 0; |
| font: inherit; |
| color: inherit; |
| transition: box-shadow .12s, transform .12s; |
| } |
| .card:hover, .card.active { |
| box-shadow: 0 3px 14px rgba(11, 11, 11, 0.13); |
| transform: translateY(-1px); |
| } |
| .card.active { outline: 1px solid rgba(108, 79, 224, 0.45); } |
| .card-hero { |
| height: 64px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 8px; |
| text-align: center; |
| font-family: var(--mono); |
| font-size: 11px; |
| font-weight: 600; |
| line-height: 1.25; |
| letter-spacing: .3px; |
| text-transform: uppercase; |
| color: #fff; |
| border-bottom: 1px solid var(--line); |
| background: |
| linear-gradient(135deg, color-mix(in srgb, var(--card-color) 85%, white), var(--card-color)); |
| } |
| .card-name { |
| font-size: 11.5px; |
| font-weight: 600; |
| padding: 6px 8px 2px; |
| line-height: 1.3; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
| .card-foot { |
| display: flex; |
| align-items: center; |
| gap: 5px; |
| padding: 4px 8px 8px; |
| } |
| .card-group { |
| font-family: var(--mono); |
| font-size: 9.5px; |
| color: var(--mute); |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| flex: 1; |
| } |
| .card-metric { |
| font-family: var(--mono); |
| font-size: 9px; |
| font-weight: 700; |
| color: var(--mute); |
| background: var(--fill); |
| border-radius: 4px; |
| padding: 1px 5px; |
| white-space: nowrap; |
| } |
| .detail-summary { |
| font-size: 15px; |
| line-height: 1.5; |
| font-weight: 500; |
| } |
|
|
| .leaderboard-section { |
| margin: 18px 0; |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: #fff; |
| padding: 14px 16px 12px; |
| } |
| .leaderboard-heading { |
| display: flex; |
| justify-content: space-between; |
| align-items: baseline; |
| gap: 12px; |
| margin-bottom: 10px; |
| } |
| .leaderboard-heading h2 { |
| margin: 0 0 3px; |
| font-family: var(--mono); |
| font-size: 12px; |
| letter-spacing: .8px; |
| text-transform: uppercase; |
| } |
| .leaderboard-heading p, |
| .leaderboard-note { |
| margin: 0; |
| color: var(--mute); |
| font-size: 11.5px; |
| line-height: 1.45; |
| } |
| .leaderboard-heading a { |
| flex: none; |
| font-family: var(--mono); |
| font-size: 11px; |
| } |
| .gap-stats { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 8px; |
| margin-bottom: 10px; |
| } |
| .gap-stats div { |
| min-width: 0; |
| border-radius: 8px; |
| background: var(--fill); |
| padding: 7px 10px; |
| } |
| .gap-stats span { |
| display: block; |
| margin-bottom: 2px; |
| color: var(--mute); |
| font-family: var(--mono); |
| font-size: 9px; |
| letter-spacing: .5px; |
| text-transform: uppercase; |
| } |
| .gap-stats b { |
| display: block; |
| overflow: hidden; |
| font-size: 12px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
| .leaderboard-scroll { |
| overflow-x: auto; |
| border: 1px solid var(--line); |
| border-radius: 10px; |
| } |
| .leaderboard-table { min-width: 680px; } |
| .leaderboard-table th:first-child, |
| .leaderboard-table td:first-child { width: 54px; text-align: center; } |
| .leaderboard-table th:nth-child(2) { width: 38%; } |
| .leaderboard-table td { height: 46px; } |
| .leaderboard-table .unreported td { color: #999; } |
| .leaderboard-table .unreported b { font-weight: 500; } |
| .score-bar { |
| height: 3px; |
| margin-top: 5px; |
| overflow: hidden; |
| border-radius: 2px; |
| background: #e8e8e8; |
| } |
| .score-bar i { |
| display: block; |
| height: 100%; |
| border-radius: inherit; |
| background: var(--accent); |
| } |
| .leaderboard-note { margin-top: 9px; } |
|
|
| .examples-section { margin: 18px 0; } |
| .examples-heading { |
| display: flex; |
| align-items: baseline; |
| gap: 10px; |
| flex-wrap: wrap; |
| margin-bottom: 8px; |
| } |
| .examples-heading h2, |
| .example-number, |
| .example-answer span, |
| .example-provenance { |
| font-family: var(--mono); |
| } |
| .examples-heading h2 { |
| margin: 0; |
| font-size: 12px; |
| letter-spacing: .8px; |
| text-transform: uppercase; |
| } |
| .examples-heading p { |
| margin: 0; |
| color: var(--mute); |
| font-size: 12px; |
| } |
| .examples-grid { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(0, 1fr)); |
| gap: 10px; |
| } |
| .example-card { |
| min-width: 0; |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: #fff; |
| padding: 14px 16px 12px; |
| } |
| .example-number { |
| color: var(--mute); |
| font-size: 10px; |
| font-weight: 650; |
| letter-spacing: .8px; |
| text-transform: uppercase; |
| } |
| .example-card h3 { |
| margin: 7px 0; |
| font-size: 14px; |
| line-height: 1.35; |
| } |
| .example-prompt { |
| min-height: 84px; |
| margin: 0 0 10px; |
| color: var(--ink); |
| font-size: 13px; |
| line-height: 1.5; |
| } |
| .example-answer { |
| border-radius: 8px; |
| background: rgba(108, 79, 224, .08); |
| outline: 1px solid rgba(108, 79, 224, .22); |
| padding: 8px 10px; |
| } |
| .example-answer span { |
| color: var(--accent); |
| font-size: 9px; |
| font-weight: 700; |
| letter-spacing: .6px; |
| text-transform: uppercase; |
| } |
| .example-answer p { |
| margin: 3px 0 0; |
| font-size: 12.5px; |
| line-height: 1.45; |
| } |
| .example-meta { margin-top: 10px; } |
| .example-tag { |
| display: inline-block; |
| margin: 0 5px 5px 0; |
| border-radius: 5px; |
| background: var(--fill); |
| color: var(--mute); |
| padding: 2px 6px; |
| font-family: var(--mono); |
| font-size: 9.5px; |
| } |
| .example-provenance { |
| margin: 3px 0 0; |
| color: var(--mute); |
| font-size: 9.5px; |
| } |
|
|
| .nav { |
| display: flex; |
| gap: 10px; |
| align-items: center; |
| margin: 22px 0 14px; |
| position: sticky; |
| top: 0; |
| background: #fff; |
| padding: 10px 0; |
| z-index: 2; |
| } |
| .nav select { |
| flex: 1; |
| font-size: 14px; |
| padding: 9px 12px; |
| border: 1px solid #d4d4d4; |
| border-radius: 8px; |
| background: #fff; |
| } |
| .nav button { |
| border-radius: 999px; |
| font-size: 13px; |
| padding: 8px 16px; |
| background: #fff; |
| border: 1px solid #d4d4d4; |
| cursor: pointer; |
| } |
| .nav button:hover { background: #f3f2ef; } |
|
|
| .stats { |
| display: flex; |
| gap: 10px; |
| flex-wrap: wrap; |
| margin: 4px 0 12px; |
| } |
| .stat { |
| background: #fff; |
| border: 1px solid var(--line); |
| border-radius: 8px; |
| padding: 7px 13px; |
| } |
| .stat span { |
| font-family: var(--mono); |
| font-size: 12px; |
| color: var(--mute); |
| margin-right: 6px; |
| } |
|
|
| .meta { font-size: 12.5px; color: var(--mute); margin: 2px 0 8px; } |
|
|
| .section { |
| margin: 12px 0; |
| border: 1px solid var(--line); |
| border-radius: 14px; |
| background: #fff; |
| padding: 14px 18px 12px; |
| } |
| .section h2 { |
| font-family: var(--mono); |
| font-size: 11px; |
| font-weight: 650; |
| letter-spacing: 0.8px; |
| text-transform: uppercase; |
| color: var(--mute); |
| margin: 0 0 8px; |
| } |
| .section p, .section li { |
| font-size: 14.5px; |
| line-height: 1.55; |
| margin: 0 0 10px; |
| } |
| .section ul { margin: 0; padding-left: 18px; } |
| .retired-note { |
| background: #fafafa; |
| border-style: dashed; |
| } |
|
|
| .dl { |
| display: grid; |
| grid-template-columns: 140px 1fr; |
| gap: 6px 16px; |
| font-size: 14px; |
| } |
| .dl dt { |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--mute); |
| text-transform: uppercase; |
| letter-spacing: 0.4px; |
| } |
|
|
| table { |
| width: 100%; |
| border-collapse: collapse; |
| font-size: 13px; |
| } |
| th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); } |
| th { |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--mute); |
| font-weight: 650; |
| } |
| tr:nth-child(even) td { background: #fafafa; } |
| .table-scroll { max-height: 420px; overflow: auto; border: 1px solid var(--line); border-radius: 10px; } |
| .table-scroll thead th { position: sticky; top: 0; background: #fff; z-index: 1; } |
| .score { color: var(--accent); font-weight: 650; } |
|
|
| .mchip { |
| display: inline-block; |
| font-family: var(--mono); |
| font-size: 11px; |
| color: var(--mute); |
| background: var(--fill); |
| border-radius: 999px; |
| padding: 2px 10px; |
| margin: 0 6px 6px 0; |
| } |
|
|
| .empty { color: var(--mute); padding: 24px 4px; } |
|
|
| @media (max-width: 640px) { |
| h1 { font-size: 26px; } |
| .gap-stats { grid-template-columns: 1fr; } |
| .examples-grid { grid-template-columns: 1fr; } |
| .example-prompt { min-height: 0; } |
| .dl { grid-template-columns: 1fr; } |
| .nav { position: static; } |
| table { font-size: 12px; } |
| } |
|
|
