Spaces:
Running
Running
| /* =================================================================== | |
| K-Bench Leaderboard — Hugging Face Space Stylesheet | |
| Inherited palette from saberyu.pro/kbench/ | |
| =================================================================== */ | |
| :root { | |
| --paper: #f7f5ef; | |
| --paper-card: #ffffff; | |
| --paper-card-subtle: #faf8f2; | |
| --ink: #203a3c; | |
| --ink-light: #325557; | |
| --muted: #677371; | |
| --muted-light: #8b9795; | |
| --line: #dadfd6; | |
| --line-strong: #c2c9bd; | |
| --soft: #eeeee6; | |
| --coral: #b65137; | |
| --coral-soft: #faebe7; | |
| --coral-deep: #963520; | |
| --teal: #38655f; | |
| --teal-soft: #e7f2ef; | |
| --teal-deep: #1f4741; | |
| --amber: #b86830; | |
| --amber-soft: #fceddf; | |
| --slate: #536765; | |
| --slate-soft: #edf1f0; | |
| --font-serif: Georgia, 'Times New Roman', 'Songti SC', 'Noto Serif CJK SC', serif; | |
| --font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', monospace; | |
| --radius-sm: 4px; | |
| --radius-md: 8px; | |
| --radius-lg: 12px; | |
| --radius-pill: 9999px; | |
| --shadow-sm: 0 1px 3px rgba(32, 58, 60, 0.05); | |
| --shadow-md: 0 4px 12px rgba(32, 58, 60, 0.07); | |
| } | |
| *, *::before, *::after { | |
| box-sizing: border-box; | |
| } | |
| html { | |
| scroll-behavior: smooth; | |
| scroll-padding-top: 80px; | |
| } | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| background-color: var(--paper); | |
| color: var(--ink); | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| line-height: 1.65; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| overflow-x: hidden; | |
| } | |
| /* Numeric alignment & typography */ | |
| .num, td.num, th.num { | |
| font-variant-numeric: tabular-nums; | |
| text-align: right; | |
| } | |
| h1, h2, h3, h4 { | |
| font-family: var(--font-serif); | |
| font-weight: 500; | |
| color: var(--ink); | |
| line-height: 1.25; | |
| margin: 0; | |
| } | |
| p { | |
| margin: 0; | |
| color: var(--muted); | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| transition: color 0.15s ease, border-color 0.15s ease; | |
| } | |
| a:hover { | |
| text-decoration: underline; | |
| text-underline-offset: 3px; | |
| } | |
| button { | |
| font-family: inherit; | |
| font-size: inherit; | |
| cursor: pointer; | |
| border: none; | |
| background: none; | |
| touch-action: manipulation; | |
| } | |
| button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible { | |
| outline: 2px solid var(--coral); | |
| outline-offset: 3px; | |
| } | |
| /* Page wrapper */ | |
| .wrap { | |
| width: 100%; | |
| max-width: 1180px; | |
| margin-inline: auto; | |
| padding-inline: 24px; | |
| } | |
| @media (max-width: 640px) { | |
| .wrap { | |
| padding-inline: 16px; | |
| } | |
| } | |
| /* ------------------------------------------------------------------- | |
| Header & Top Bar | |
| ------------------------------------------------------------------- */ | |
| .site-header { | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| background: rgba(247, 245, 239, 0.94); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .nav-container { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| height: 68px; | |
| gap: 16px; | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| color: var(--ink); | |
| font-weight: 600; | |
| font-size: 18px; | |
| letter-spacing: -0.2px; | |
| } | |
| .brand:hover { | |
| text-decoration: none; | |
| } | |
| .brand-icon { | |
| font-family: var(--font-serif); | |
| font-size: 24px; | |
| font-weight: 600; | |
| background: var(--ink); | |
| color: var(--paper); | |
| width: 38px; | |
| height: 38px; | |
| display: grid; | |
| place-content: center; | |
| border-radius: var(--radius-sm); | |
| position: relative; | |
| user-select: none; | |
| } | |
| .brand-icon span { | |
| color: #e7a17f; | |
| position: absolute; | |
| right: 6px; | |
| bottom: 3px; | |
| font-size: 18px; | |
| } | |
| .brand-text { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .brand-sub { | |
| font-size: 9px; | |
| font-weight: 600; | |
| letter-spacing: 1.4px; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .header-status { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 12px; | |
| color: var(--muted); | |
| font-weight: 500; | |
| } | |
| .status-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 3px 10px; | |
| border-radius: var(--radius-pill); | |
| background: var(--teal-soft); | |
| color: var(--teal); | |
| font-size: 11px; | |
| font-weight: 600; | |
| border: 1px solid rgba(56, 101, 95, 0.2); | |
| } | |
| .status-badge::before { | |
| content: ""; | |
| display: inline-block; | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--teal); | |
| } | |
| /* ------------------------------------------------------------------- | |
| Hero Section | |
| ------------------------------------------------------------------- */ | |
| .hero-section { | |
| padding-block: 42px 28px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .eyebrow { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| letter-spacing: 1.5px; | |
| text-transform: uppercase; | |
| color: var(--teal); | |
| margin-bottom: 14px; | |
| } | |
| .eyebrow-dot { | |
| width: 7px; | |
| height: 7px; | |
| border-radius: 50%; | |
| background: var(--coral); | |
| } | |
| .hero-title { | |
| font-size: clamp(32px, 4.2vw, 46px); | |
| letter-spacing: -0.8px; | |
| line-height: 1.15; | |
| margin-bottom: 16px; | |
| color: var(--ink); | |
| } | |
| .hero-title span { | |
| color: var(--coral); | |
| } | |
| .hero-desc { | |
| font-size: clamp(16px, 1.8vw, 19px); | |
| line-height: 1.55; | |
| color: var(--ink-light); | |
| max-width: 820px; | |
| margin-bottom: 24px; | |
| } | |
| /* Pill styling matching project site */ | |
| .pills-group { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px; | |
| margin-bottom: 32px; | |
| } | |
| .pill-link { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 5px 14px; | |
| border-radius: var(--radius-pill); | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-decoration: none ; | |
| transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease; | |
| } | |
| .pill-link:hover { | |
| transform: translateY(-1px); | |
| } | |
| .pill-teal { | |
| background: #ffffff; | |
| color: var(--teal-deep); | |
| border: 1px solid rgba(56, 101, 95, 0.35); | |
| } | |
| .pill-teal:hover { | |
| background: var(--teal-soft); | |
| border-color: var(--teal); | |
| } | |
| .pill-coral { | |
| background: #ffffff; | |
| color: var(--coral-deep); | |
| border: 1px solid rgba(182, 81, 55, 0.35); | |
| } | |
| .pill-coral:hover { | |
| background: var(--coral-soft); | |
| border-color: var(--coral); | |
| } | |
| .pill-link span.arrow { | |
| font-size: 11px; | |
| opacity: 0.8; | |
| } | |
| /* Stat Tiles */ | |
| .facts-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 16px; | |
| margin-top: 10px; | |
| } | |
| .fact-tile { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| padding: 16px 20px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .fact-tile strong { | |
| font-family: var(--font-serif); | |
| font-size: 34px; | |
| line-height: 1; | |
| color: var(--ink); | |
| display: block; | |
| margin-bottom: 6px; | |
| } | |
| .fact-tile .fact-label { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--ink-light); | |
| display: block; | |
| } | |
| .fact-tile .fact-sub { | |
| font-size: 11px; | |
| color: var(--muted); | |
| margin-top: 2px; | |
| display: block; | |
| } | |
| /* ------------------------------------------------------------------- | |
| Section Typography & Layout | |
| ------------------------------------------------------------------- */ | |
| .section { | |
| padding-block: 48px; | |
| border-bottom: 1px solid var(--line); | |
| } | |
| .section-head { | |
| margin-bottom: 24px; | |
| } | |
| .section-title { | |
| font-size: clamp(24px, 2.8vw, 32px); | |
| letter-spacing: -0.5px; | |
| margin-bottom: 8px; | |
| } | |
| .section-subtitle { | |
| font-size: 15px; | |
| color: var(--muted); | |
| max-width: 760px; | |
| line-height: 1.6; | |
| } | |
| /* ------------------------------------------------------------------- | |
| Controls & Selectors | |
| ------------------------------------------------------------------- */ | |
| .controls-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| justify-content: space-between; | |
| gap: 14px; | |
| margin-bottom: 20px; | |
| } | |
| .control-group { | |
| display: flex; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 8px; | |
| } | |
| .control-label { | |
| font-size: 12px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--muted); | |
| margin-right: 4px; | |
| } | |
| .btn-pill-group { | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| max-width: 100%; | |
| background: var(--soft); | |
| border: 1px solid var(--line); | |
| padding: 3px; | |
| border-radius: var(--radius-pill); | |
| } | |
| .btn-pill { | |
| padding: 6px 14px; | |
| font-size: 12px; | |
| font-weight: 600; | |
| color: var(--muted); | |
| border-radius: var(--radius-pill); | |
| transition: all 0.15s ease; | |
| white-space: nowrap; | |
| } | |
| .btn-pill:hover { | |
| color: var(--ink); | |
| } | |
| .btn-pill.active { | |
| background: var(--ink); | |
| color: #ffffff; | |
| box-shadow: 0 1px 4px rgba(32, 58, 60, 0.2); | |
| } | |
| /* ------------------------------------------------------------------- | |
| Substrate Matrix (Hero Table) | |
| ------------------------------------------------------------------- */ | |
| .matrix-container { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-sm); | |
| overflow: hidden; | |
| } | |
| .matrix-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 14px 20px; | |
| padding: 14px 18px; | |
| background: var(--paper-card-subtle); | |
| border-bottom: 1px solid var(--line); | |
| font-size: 11px; | |
| } | |
| .legend-title { | |
| font-weight: 600; | |
| letter-spacing: 0.6px; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .legend-items { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 10px 16px; | |
| } | |
| .legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--ink-light); | |
| } | |
| .legend-tag { | |
| display: inline-block; | |
| padding: 2px 7px; | |
| font-size: 10px; | |
| font-weight: 700; | |
| border-radius: 3px; | |
| line-height: 1.2; | |
| } | |
| /* Table Scroll Container */ | |
| .table-scroll { | |
| width: 100%; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| } | |
| .kbench-table { | |
| width: 100%; | |
| border-collapse: collapse; | |
| font-size: 13.5px; | |
| white-space: nowrap; | |
| } | |
| .kbench-table th { | |
| background: var(--paper-card-subtle); | |
| padding: 12px 16px; | |
| font-weight: 600; | |
| font-size: 12px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| color: var(--muted); | |
| border-bottom: 2px solid var(--line); | |
| text-align: left; | |
| user-select: none; | |
| } | |
| .kbench-table th.sortable { | |
| cursor: pointer; | |
| transition: color 0.15s ease; | |
| } | |
| .kbench-table th.sortable:hover { | |
| color: var(--ink); | |
| background: var(--soft); | |
| } | |
| .kbench-table th .sort-icon { | |
| margin-left: 4px; | |
| font-size: 10px; | |
| opacity: 0.4; | |
| } | |
| .kbench-table th.sorted .sort-icon { | |
| opacity: 1; | |
| color: var(--coral); | |
| } | |
| .kbench-table td { | |
| padding: 13px 16px; | |
| border-bottom: 1px solid var(--line); | |
| color: var(--ink); | |
| vertical-align: middle; | |
| } | |
| .kbench-table tbody tr { | |
| transition: background-color 0.12s ease; | |
| } | |
| .kbench-table tbody tr:hover { | |
| background-color: rgba(247, 245, 239, 0.7); | |
| } | |
| .kbench-table tbody tr:last-child td { | |
| border-bottom: none; | |
| } | |
| /* Matrix Column Headers */ | |
| .th-substrate { | |
| text-align: center ; | |
| min-width: 170px; | |
| } | |
| .th-substrate-code { | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: var(--ink); | |
| display: block; | |
| } | |
| .th-substrate-name { | |
| font-size: 10px; | |
| font-weight: 500; | |
| color: var(--muted); | |
| text-transform: none; | |
| letter-spacing: 0; | |
| display: block; | |
| margin-top: 2px; | |
| } | |
| /* Matrix Cell Content */ | |
| .matrix-cell { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 4px; | |
| padding: 4px; | |
| } | |
| .matrix-score { | |
| font-family: var(--font-sans); | |
| font-size: 15px; | |
| font-weight: 700; | |
| font-variant-numeric: tabular-nums; | |
| line-height: 1; | |
| } | |
| .matrix-na { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| width: 100%; | |
| padding: 8px 12px; | |
| border-radius: var(--radius-sm); | |
| background: #f4f4ee; | |
| border: 1px dashed var(--line); | |
| color: var(--muted-light); | |
| font-size: 12px; | |
| font-style: normal; | |
| user-select: none; | |
| cursor: help; | |
| } | |
| .matrix-na span.dash { | |
| font-weight: bold; | |
| margin-right: 5px; | |
| } | |
| .matrix-method { | |
| font-weight: 700; | |
| color: var(--ink); | |
| font-size: 14px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .matrix-method-sub { | |
| font-size: 11px; | |
| font-weight: 400; | |
| color: var(--muted); | |
| } | |
| /* Method Reference Links */ | |
| .method-link { | |
| color: inherit; | |
| font-weight: inherit; | |
| text-decoration: underline; | |
| text-decoration-color: var(--line-strong); | |
| text-underline-offset: 3px; | |
| text-decoration-thickness: 1px; | |
| transition: color 0.15s ease, text-decoration-color 0.15s ease; | |
| } | |
| .method-link:hover { | |
| color: var(--teal); | |
| text-decoration-color: var(--teal); | |
| } | |
| .method-link:focus-visible { | |
| outline: 2px solid var(--coral); | |
| outline-offset: 2px; | |
| border-radius: var(--radius-sm); | |
| } | |
| .table-note { | |
| margin-top: 10px; | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| line-height: 1.5; | |
| } | |
| /* Matrix Callout explanation */ | |
| .matrix-callout { | |
| margin-top: 14px; | |
| padding: 12px 18px; | |
| border-radius: var(--radius-md); | |
| background: var(--paper-card); | |
| border-left: 3px solid var(--teal); | |
| border-top: 1px solid var(--line); | |
| border-right: 1px solid var(--line); | |
| border-bottom: 1px solid var(--line); | |
| font-size: 13px; | |
| color: var(--ink-light); | |
| display: flex; | |
| align-items: flex-start; | |
| gap: 12px; | |
| } | |
| .matrix-callout-icon { | |
| font-size: 16px; | |
| color: var(--teal); | |
| line-height: 1.3; | |
| } | |
| /* ------------------------------------------------------------------- | |
| K-Class Semantic Badges & Pills | |
| ------------------------------------------------------------------- */ | |
| .k-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 2px 8px; | |
| font-size: 10.5px; | |
| font-weight: 700; | |
| border-radius: 4px; | |
| letter-spacing: 0.2px; | |
| line-height: 1.3; | |
| white-space: nowrap; | |
| } | |
| /* K-REF Tier (Teal Scale - Success) */ | |
| .k-class-ref-inf { | |
| background: #23524b; | |
| color: #ffffff; | |
| border: 1px solid #1c423c; | |
| } | |
| .k-class-ref-10x { | |
| background: #e1f2ee; | |
| color: #245851; | |
| border: 1px solid #a8d5cc; | |
| } | |
| .k-class-ref-2x { | |
| background: #ebf5f2; | |
| color: #2e6860; | |
| border: 1px solid #badfd7; | |
| } | |
| /* Channel Leakage (Warm Amber) */ | |
| .k-class-sup { | |
| background: var(--amber-soft); | |
| color: #8c4717; | |
| border: 1px solid #ebd0bc; | |
| } | |
| /* Measured Failure & Below Gate (Coral Scale) */ | |
| .k-class-mf { | |
| background: var(--coral-soft); | |
| color: var(--coral-deep); | |
| border: 1px solid #f0cac1; | |
| } | |
| .k-class-below-gate { | |
| background: #f7deda; | |
| color: #882414; | |
| border: 1px solid #eabcb4; | |
| } | |
| /* Neutral & Baseline (Inert Grays) */ | |
| .k-class-noop { | |
| background: #eeeee9; | |
| color: var(--slate); | |
| border: 1px solid #d4d8d3; | |
| } | |
| .k-class-base { | |
| background: #f1f1eb; | |
| color: var(--muted); | |
| border: 1px solid #dadfd7; | |
| } | |
| /* Base Model Tag */ | |
| .model-tag { | |
| display: inline-block; | |
| padding: 2px 7px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| border-radius: 3px; | |
| background: var(--soft); | |
| color: var(--ink-light); | |
| border: 1px solid var(--line); | |
| } | |
| /* ------------------------------------------------------------------- | |
| Per-Substrate Leaderboard Table | |
| ------------------------------------------------------------------- */ | |
| .ranking-container { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-sm); | |
| overflow: hidden; | |
| } | |
| .ranking-meta-bar { | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| padding: 10px 18px; | |
| background: var(--paper-card-subtle); | |
| border-bottom: 1px solid var(--line); | |
| font-size: 12px; | |
| color: var(--muted); | |
| } | |
| .ranking-count { | |
| font-weight: 600; | |
| color: var(--ink-light); | |
| } | |
| .rank-cell { | |
| font-weight: 700; | |
| font-size: 13px; | |
| color: var(--muted); | |
| width: 40px; | |
| } | |
| tr:nth-child(1) .rank-cell { | |
| color: var(--coral); | |
| } | |
| tr:nth-child(2) .rank-cell { | |
| color: var(--teal); | |
| } | |
| tr:nth-child(3) .rank-cell { | |
| color: var(--ink); | |
| } | |
| /* ------------------------------------------------------------------- | |
| Observation-Budget Charts (Section 4) | |
| ------------------------------------------------------------------- */ | |
| .budget-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |
| gap: 20px; | |
| margin-top: 16px; | |
| } | |
| .chart-card { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| padding: 20px; | |
| box-shadow: var(--shadow-sm); | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .chart-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| margin-bottom: 12px; | |
| } | |
| .chart-title { | |
| font-size: 18px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .chart-note { | |
| font-size: 11px; | |
| color: var(--muted); | |
| margin-bottom: 14px; | |
| } | |
| .chart-svg-container { | |
| width: 100%; | |
| position: relative; | |
| } | |
| .chart-svg { | |
| width: 100%; | |
| height: auto; | |
| display: block; | |
| } | |
| .chart-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px 14px; | |
| margin-top: 14px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--line); | |
| font-size: 11px; | |
| } | |
| .chart-legend-item { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| color: var(--ink-light); | |
| } | |
| .chart-legend-line { | |
| width: 14px; | |
| height: 3px; | |
| border-radius: 2px; | |
| } | |
| .chart-legend-flips { | |
| font-size: 10px; | |
| color: var(--muted); | |
| } | |
| /* Interactive SVG tooltip */ | |
| .chart-tooltip { | |
| position: absolute; | |
| pointer-events: none; | |
| background: var(--ink); | |
| color: #ffffff; | |
| padding: 6px 10px; | |
| border-radius: var(--radius-sm); | |
| font-size: 11px; | |
| font-variant-numeric: tabular-nums; | |
| line-height: 1.35; | |
| box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); | |
| opacity: 0; | |
| transition: opacity 0.1s ease; | |
| z-index: 10; | |
| transform: translate(-50%, -120%); | |
| } | |
| /* ------------------------------------------------------------------- | |
| How to Submit (Section 5) | |
| ------------------------------------------------------------------- */ | |
| .submit-card { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| padding: 28px 32px; | |
| box-shadow: var(--shadow-sm); | |
| } | |
| .submit-prose { | |
| font-size: 15px; | |
| line-height: 1.7; | |
| color: var(--ink-light); | |
| margin-bottom: 24px; | |
| } | |
| .submit-prose p { | |
| margin-bottom: 12px; | |
| color: var(--ink-light); | |
| } | |
| .submit-prose strong { | |
| color: var(--ink); | |
| } | |
| .code-box { | |
| background: #1e3335; | |
| color: #e8ece9; | |
| padding: 16px 20px; | |
| border-radius: var(--radius-md); | |
| font-family: var(--font-mono); | |
| font-size: 12.5px; | |
| line-height: 1.7; | |
| overflow-x: auto; | |
| margin-bottom: 24px; | |
| } | |
| .code-box .comment { | |
| color: #8da29c; | |
| } | |
| .code-box .cmd { | |
| color: #f7a685; | |
| } | |
| .code-box .arg { | |
| color: #b5ded4; | |
| } | |
| .submit-actions { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| align-items: center; | |
| } | |
| .btn-primary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: var(--ink); | |
| color: #ffffff; | |
| padding: 10px 20px; | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| font-weight: 600; | |
| text-decoration: none ; | |
| transition: background 0.15s ease, transform 0.15s ease; | |
| } | |
| .btn-primary:hover { | |
| background: var(--teal-deep); | |
| transform: translateY(-1px); | |
| } | |
| .btn-secondary { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background: #ffffff; | |
| color: var(--ink); | |
| padding: 10px 18px; | |
| border-radius: var(--radius-sm); | |
| font-size: 13px; | |
| font-weight: 600; | |
| border: 1px solid var(--line); | |
| text-decoration: none ; | |
| transition: background 0.15s ease; | |
| } | |
| .btn-secondary:hover { | |
| background: var(--soft); | |
| } | |
| /* ------------------------------------------------------------------- | |
| Footer | |
| ------------------------------------------------------------------- */ | |
| .site-footer { | |
| padding-block: 40px; | |
| background: var(--paper); | |
| border-top: 1px solid var(--line); | |
| font-size: 13px; | |
| color: var(--muted); | |
| } | |
| .footer-content { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .footer-links { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| font-size: 12px; | |
| } | |
| .footer-links a:hover { | |
| color: var(--ink); | |
| } | |
| /* ------------------------------------------------------------------- | |
| Responsive & Accessibility Rules | |
| ------------------------------------------------------------------- */ | |
| @media (max-width: 800px) { | |
| .hero-section { | |
| padding-block: 32px 20px; | |
| } | |
| .controls-bar { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| @media (prefers-reduced-motion: reduce) { | |
| *, *::before, *::after { | |
| animation-duration: 0.01ms ; | |
| animation-iteration-count: 1 ; | |
| transition-duration: 0.01ms ; | |
| scroll-behavior: auto ; | |
| } | |
| } | |
| /* ------------------------------------------------------------------- | |
| Cross-Model Generality Section Styles | |
| ------------------------------------------------------------------- */ | |
| .cross-model-totals-bar { | |
| display: flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 10px; | |
| margin-bottom: 20px; | |
| font-size: 13px; | |
| } | |
| .roster-stat-pill { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 12px; | |
| border-radius: var(--radius-pill); | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| font-weight: 500; | |
| color: var(--ink-light); | |
| } | |
| .roster-stat-pill strong { | |
| color: var(--ink); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .roster-stat-pill.stat-coral { | |
| border-color: var(--line-strong); | |
| color: var(--coral-deep); | |
| background: var(--coral-soft); | |
| } | |
| .roster-stat-pill.stat-teal { | |
| border-color: var(--line-strong); | |
| color: var(--teal-deep); | |
| background: var(--teal-soft); | |
| } | |
| .roster-gate-breakdown { | |
| font-size: 12px; | |
| color: var(--muted); | |
| display: inline-flex; | |
| flex-wrap: wrap; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .roster-gate-breakdown strong { | |
| color: var(--ink); | |
| } | |
| .cross-model-alerts { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| margin-bottom: 22px; | |
| } | |
| .reading-rule-callout { | |
| border-left: 3px solid var(--teal) ; | |
| } | |
| .diff-callout { | |
| border-left: 3px solid var(--amber) ; | |
| } | |
| .cross-model-rule-line { | |
| display: flex; | |
| align-items: baseline; | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| font-size: 12.5px; | |
| color: var(--ink-light); | |
| line-height: 1.5; | |
| } | |
| .collapse-rule-line { | |
| margin-top: 14px; | |
| margin-bottom: 0; | |
| } | |
| .rule-badge { | |
| display: inline-block; | |
| font-size: 10px; | |
| font-weight: 700; | |
| text-transform: uppercase; | |
| letter-spacing: 0.6px; | |
| padding: 2px 8px; | |
| border-radius: var(--radius-sm); | |
| background: var(--teal-soft); | |
| color: var(--teal-deep); | |
| border: 1px solid var(--line); | |
| white-space: nowrap; | |
| } | |
| .rule-badge-coral { | |
| background: var(--coral-soft); | |
| color: var(--coral-deep); | |
| } | |
| .cross-model-container { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-sm); | |
| padding: 20px; | |
| margin-bottom: 24px; | |
| overflow: hidden; | |
| } | |
| .cross-model-rarity-banner { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| padding: 10px 16px; | |
| background: var(--teal-soft); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| margin-bottom: 16px; | |
| font-size: 12.5px; | |
| color: var(--teal-deep); | |
| } | |
| .rarity-method-pill { | |
| font-weight: 700; | |
| padding: 1px 7px; | |
| border-radius: var(--radius-sm); | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| color: var(--ink); | |
| } | |
| .cross-model-chart-scroll { | |
| width: 100%; | |
| overflow-x: auto; | |
| -webkit-overflow-scrolling: touch; | |
| position: relative; | |
| } | |
| .cross-model-svg { | |
| width: 100%; | |
| min-width: 680px; | |
| height: auto; | |
| display: block; | |
| user-select: none; | |
| } | |
| /* SVG Internal Slope Chart Elements */ | |
| .slope-method-track { | |
| cursor: pointer; | |
| transition: opacity 0.15s ease; | |
| } | |
| .slope-method-track.dimmed { | |
| opacity: 0.12 ; | |
| } | |
| .slope-method-track.highlighted { | |
| opacity: 1 ; | |
| } | |
| .slope-method-track.highlighted line.slope-seg { | |
| stroke-width: 3.8px ; | |
| stroke: var(--coral) ; | |
| } | |
| .slope-method-track.highlighted text.slope-label { | |
| font-weight: 700 ; | |
| fill: var(--ink) ; | |
| } | |
| .slope-method-track.highlighted circle.slope-pt { | |
| r: 6px ; | |
| stroke-width: 2.5px ; | |
| } | |
| .slope-method-label { | |
| font-size: 11px; | |
| font-weight: 500; | |
| fill: var(--ink-light); | |
| cursor: pointer; | |
| transition: font-weight 0.15s ease, fill 0.15s ease; | |
| } | |
| .slope-method-label:hover { | |
| fill: var(--teal-deep); | |
| font-weight: 700; | |
| } | |
| .axis-title { | |
| font-family: var(--font-serif); | |
| font-size: 15px; | |
| font-weight: 600; | |
| fill: var(--ink); | |
| } | |
| .axis-subtitle { | |
| font-size: 11px; | |
| fill: var(--muted); | |
| } | |
| .axis-line { | |
| stroke: var(--line-strong); | |
| stroke-width: 1.5; | |
| } | |
| .axis-tick-line { | |
| stroke: var(--line); | |
| stroke-dasharray: 3,3; | |
| stroke-width: 1; | |
| } | |
| .axis-tick-text { | |
| font-size: 10px; | |
| fill: var(--muted); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .collapse-band-rect { | |
| fill: var(--coral-soft); | |
| stroke: var(--coral); | |
| stroke-width: 1.5; | |
| stroke-opacity: 0.35; | |
| } | |
| .collapse-band-title { | |
| font-size: 11px; | |
| font-weight: 700; | |
| fill: var(--coral-deep); | |
| } | |
| .collapse-band-sub { | |
| font-size: 9.5px; | |
| fill: var(--muted); | |
| } | |
| .collapse-boundary-line { | |
| stroke: var(--line-strong); | |
| stroke-dasharray: 3,3; | |
| stroke-width: 1; | |
| } | |
| .collapse-boundary-text { | |
| font-size: 10px; | |
| font-weight: 700; | |
| fill: var(--coral); | |
| letter-spacing: 0.8px; | |
| text-transform: uppercase; | |
| } | |
| /* Inspector Card */ | |
| .cross-model-inspector-wrap { | |
| margin-bottom: 24px; | |
| } | |
| .cross-model-card { | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-md); | |
| box-shadow: var(--shadow-sm); | |
| padding: 20px; | |
| cursor: pointer; | |
| transition: border-color 0.15s ease, box-shadow 0.15s ease; | |
| } | |
| .cross-model-card:hover { | |
| border-color: var(--teal); | |
| box-shadow: var(--shadow-md); | |
| } | |
| .card-header { | |
| display: flex; | |
| flex-wrap: wrap; | |
| justify-content: space-between; | |
| align-items: baseline; | |
| gap: 10px; | |
| margin-bottom: 14px; | |
| } | |
| .card-title-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| } | |
| .card-method-name { | |
| font-family: var(--font-serif); | |
| font-size: 22px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| text-decoration: underline; | |
| text-decoration-color: var(--line-strong); | |
| text-underline-offset: 3px; | |
| } | |
| .card-method-name:hover { | |
| color: var(--teal); | |
| text-decoration-color: var(--teal); | |
| } | |
| .card-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| padding: 2px 8px; | |
| font-size: 11px; | |
| font-weight: 600; | |
| border-radius: var(--radius-sm); | |
| background: var(--soft); | |
| color: var(--ink-light); | |
| border: 1px solid var(--line); | |
| } | |
| .card-badge.card-ref { | |
| background: var(--amber-soft); | |
| color: var(--amber); | |
| border-color: var(--line); | |
| } | |
| .card-bases-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); | |
| gap: 14px; | |
| margin-bottom: 16px; | |
| } | |
| .card-base-col { | |
| background: var(--paper-card-subtle); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 12px 14px; | |
| } | |
| .card-base-col.is-collapsed { | |
| border-left: 3px solid var(--coral); | |
| } | |
| .card-base-col.has-gate { | |
| border-left: 3px solid var(--teal); | |
| } | |
| .card-base-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 8px; | |
| } | |
| .card-base-title { | |
| font-size: 13px; | |
| font-weight: 600; | |
| color: var(--ink); | |
| } | |
| .card-metric-row { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 12px; | |
| line-height: 1.6; | |
| color: var(--muted); | |
| } | |
| .card-metric-row .val { | |
| font-weight: 600; | |
| color: var(--ink); | |
| font-variant-numeric: tabular-nums; | |
| } | |
| .card-gate-box { | |
| margin-top: 8px; | |
| padding-top: 6px; | |
| border-top: 1px dashed var(--line); | |
| font-size: 11px; | |
| } | |
| .card-footer { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| padding-top: 12px; | |
| border-top: 1px solid var(--line); | |
| } | |
| .card-hint { | |
| font-size: 11.5px; | |
| color: var(--muted); | |
| } | |
| /* Quick-select chips */ | |
| .cross-model-chips-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 24px; | |
| } | |
| .chips-label { | |
| font-size: 11px; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.8px; | |
| color: var(--muted); | |
| } | |
| .cross-model-chips { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 6px; | |
| } | |
| .method-chip { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 6px; | |
| padding: 4px 10px; | |
| font-size: 12px; | |
| font-weight: 500; | |
| border-radius: var(--radius-pill); | |
| background: var(--paper-card); | |
| border: 1px solid var(--line); | |
| color: var(--ink); | |
| cursor: pointer; | |
| transition: all 0.15s ease; | |
| } | |
| .method-chip:hover { | |
| background: var(--teal-soft); | |
| border-color: var(--teal); | |
| } | |
| .method-chip.active { | |
| background: var(--ink); | |
| color: var(--paper-card); | |
| border-color: var(--ink); | |
| } | |
| .chip-gate-dot { | |
| width: 6px; | |
| height: 6px; | |
| border-radius: 50%; | |
| background: var(--teal); | |
| } | |
| .chip-link { | |
| font-size: 10px; | |
| opacity: 0.6; | |
| text-decoration: none ; | |
| } | |
| /* Reference baseline wrap */ | |
| .cross-model-ref-wrap { | |
| margin-bottom: 20px; | |
| } | |
| .cross-model-ref-card { | |
| background: var(--paper-card); | |
| border: 1px dashed var(--line-strong); | |
| border-radius: var(--radius-md); | |
| padding: 18px 22px; | |
| } | |
| .ref-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| flex-wrap: wrap; | |
| margin-bottom: 6px; | |
| } | |
| .ref-title { | |
| font-weight: 700; | |
| font-size: 14px; | |
| color: var(--ink); | |
| } | |
| .ref-desc { | |
| font-size: 12.5px; | |
| color: var(--muted); | |
| margin-bottom: 12px; | |
| } | |
| .ref-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 10px; | |
| } | |
| .ref-base-col { | |
| background: var(--paper-card-subtle); | |
| border: 1px solid var(--line); | |
| border-radius: var(--radius-sm); | |
| padding: 10px 12px; | |
| font-size: 12px; | |
| } | |
| @media (max-width: 768px) { | |
| .cross-model-totals-bar { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| .card-footer { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| } | |
| } | |
| /* Cross-model: the rarity statement is the chart's lede, not another alert box. */ | |
| .cross-model-lede { | |
| margin: 16px 0 20px; | |
| font-family: var(--font-serif); | |
| font-size: 19px; | |
| line-height: 1.45; | |
| color: var(--ink); | |
| max-width: 62ch; | |
| } | |
| .cross-model-lede strong { font-weight: 700; } | |
| .cross-model-lede .lede-method { | |
| font-family: var(--font-mono); | |
| font-size: 0.82em; | |
| padding: 1px 6px; | |
| border: 1px solid var(--line-strong); | |
| border-radius: var(--radius-sm); | |
| background: var(--paper-card-subtle); | |
| white-space: nowrap; | |
| } | |
| /* Stroke key, so the solid / thin / dashed encoding is not guesswork. */ | |
| .cross-model-legend { | |
| display: flex; | |
| flex-wrap: wrap; | |
| gap: 8px 20px; | |
| margin: 0 0 12px; | |
| font-size: 11.5px; | |
| color: var(--muted); | |
| } | |
| .cross-model-legend .cm-key { display: inline-flex; align-items: center; gap: 7px; } | |
| .cross-model-legend svg { flex: none; } | |
| /* Methodology notes sit under the chart so the chart itself is what loads first. */ | |
| .cross-model-notes { margin-top: 18px; } | |
| .cross-model-notes-head { | |
| margin: 0 0 10px; | |
| font-family: var(--font-sans); | |
| font-size: 11px; | |
| font-weight: 700; | |
| letter-spacing: 0.08em; | |
| text-transform: uppercase; | |
| color: var(--muted); | |
| } | |
| .cross-model-notes .cross-model-rule-line { margin-bottom: 10px; } | |