| :root { |
| --ink: #142535; |
| --muted: #60717f; |
| --line: #dce3e8; |
| --soft-line: #edf1f4; |
| --paper: #ffffff; |
| --canvas: #f7f8f9; |
| --prediction: #1565c0; |
| --robustness: #2e7d32; |
| --compute: #e65100; |
| --consistency: #007c91; |
| --feature: #6a51a3; |
| --trial: #6a1b9a; |
| --shadow: 0 5px 18px rgba(24, 43, 59, 0.055); |
| --radius: 10px; |
| } |
|
|
| * { |
| box-sizing: border-box; |
| } |
|
|
| html { |
| scroll-behavior: smooth; |
| } |
|
|
| body { |
| margin: 0; |
| background: var(--canvas); |
| color: var(--ink); |
| font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; |
| font-size: 15px; |
| line-height: 1.5; |
| text-rendering: optimizeLegibility; |
| -webkit-font-smoothing: antialiased; |
| } |
|
|
| a { |
| color: #0b5da8; |
| text-underline-offset: 3px; |
| } |
|
|
| a:hover { |
| color: #083e70; |
| } |
|
|
| :focus-visible { |
| outline: 3px solid rgba(21, 101, 192, 0.34) !important; |
| outline-offset: 2px !important; |
| } |
|
|
| h1, |
| h2, |
| h3, |
| p { |
| margin-top: 0; |
| } |
|
|
| .app-shell { |
| min-height: 100vh; |
| padding: 0 28px 34px; |
| } |
|
|
| .hero, |
| .toolbar, |
| .tabs, |
| .provenance-footer { |
| width: min(100%, 1380px); |
| margin-right: auto; |
| margin-left: auto; |
| } |
|
|
| .hero { |
| padding-bottom: 32px; |
| border-bottom: 1px solid var(--line); |
| } |
|
|
| .site-nav { |
| display: flex; |
| min-height: 68px; |
| align-items: center; |
| justify-content: space-between; |
| gap: 24px; |
| border-bottom: 1px solid var(--soft-line); |
| } |
|
|
| .site-brand { |
| color: #12334a; |
| font-size: 18px; |
| font-weight: 800; |
| letter-spacing: -0.015em; |
| text-decoration: none; |
| } |
|
|
| .site-brand:hover { |
| color: #12334a; |
| } |
|
|
| .hero-copy { |
| max-width: 980px; |
| padding-top: 46px; |
| } |
|
|
| .eyebrow, |
| .section-eyebrow { |
| font-size: 11px; |
| font-weight: 800; |
| letter-spacing: 0.105em; |
| text-transform: uppercase; |
| } |
|
|
| .eyebrow { |
| margin-bottom: 10px; |
| color: #b9d7e7; |
| } |
|
|
| h1 { |
| max-width: 960px; |
| margin-bottom: 14px; |
| font-size: clamp(34px, 4.1vw, 50px); |
| font-weight: 760; |
| line-height: 1.08; |
| letter-spacing: -0.032em; |
| } |
|
|
| .lede { |
| max-width: 820px; |
| margin-bottom: 0; |
| color: #526777; |
| font-size: 17px; |
| line-height: 1.6; |
| } |
|
|
| .hero-links { |
| display: flex; |
| gap: 22px; |
| align-items: center; |
| flex-wrap: wrap; |
| } |
|
|
| .hero-links a { |
| color: #244d69; |
| font-size: 13px; |
| font-weight: 680; |
| text-decoration: none; |
| } |
|
|
| .hero-links a::after { |
| margin-left: 5px; |
| content: "↗"; |
| font-size: 11px; |
| } |
|
|
| .nav-placeholder { |
| display: flex; |
| gap: 7px; |
| align-items: center; |
| color: #586b79; |
| font-size: 13px; |
| font-weight: 650; |
| } |
|
|
| .nav-placeholder small { |
| padding: 2px 6px; |
| border: 1px solid #d5dde3; |
| border-radius: 999px; |
| background: #ffffff; |
| color: #71808b; |
| font-size: 9px; |
| font-weight: 750; |
| letter-spacing: 0.035em; |
| line-height: 1.4; |
| text-transform: uppercase; |
| } |
|
|
| .toolbar { |
| position: sticky; |
| top: 10px; |
| z-index: 20; |
| display: grid; |
| grid-template-columns: minmax(300px, 0.72fr) minmax(420px, 1.28fr); |
| gap: 18px; |
| margin-top: 18px; |
| margin-bottom: 14px; |
| padding: 13px 16px 14px; |
| border: 1px solid var(--line); |
| border-radius: var(--radius); |
| background: rgba(255, 255, 255, 0.96); |
| box-shadow: 0 5px 18px rgba(18, 38, 53, 0.07); |
| backdrop-filter: blur(10px); |
| } |
|
|
| .control { |
| min-width: 0; |
| } |
|
|
| .control label { |
| display: block; |
| margin-bottom: 6px; |
| color: #344452; |
| font-size: 11px; |
| font-weight: 800; |
| letter-spacing: 0.075em; |
| text-transform: uppercase; |
| } |
|
|
| .dash-dropdown-grid-container { |
| min-height: 39px; |
| border: 1px solid #cbd5dd; |
| border-radius: 7px; |
| background: #ffffff; |
| box-shadow: none; |
| } |
|
|
| .dash-dropdown:focus-within .dash-dropdown-grid-container { |
| border-color: var(--prediction); |
| box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.14); |
| } |
|
|
| .dash-dropdown-value, |
| .dash-dropdown-value-item, |
| .dash-dropdown-trigger { |
| font-size: 13px; |
| } |
|
|
| .dash-dropdown-value-item { |
| border-color: #c9d9e7; |
| border-radius: 5px; |
| color: #154f7b; |
| } |
|
|
| .tabs { |
| display: flex; |
| flex-direction: row !important; |
| flex-wrap: nowrap; |
| overflow-x: auto; |
| border: 1px solid var(--line); |
| border-radius: 11px; |
| background: #ffffff; |
| box-shadow: 0 5px 16px rgba(24, 43, 59, 0.045); |
| scrollbar-width: thin; |
| -webkit-overflow-scrolling: touch; |
| } |
|
|
| .tab { |
| display: flex !important; |
| flex: 1 0 auto !important; |
| width: auto !important; |
| align-items: center !important; |
| justify-content: center !important; |
| min-height: 50px; |
| padding: 12px 20px !important; |
| border: 0 !important; |
| border-right: 1px solid #edf1f4 !important; |
| border-bottom: 3px solid transparent !important; |
| background: #ffffff !important; |
| color: #61717f !important; |
| font-size: 13px; |
| font-weight: 700; |
| white-space: nowrap; |
| } |
|
|
| .tab:last-child { |
| border-right: 0 !important; |
| } |
|
|
| .tab:hover { |
| background: #f8fafb !important; |
| color: #213442 !important; |
| } |
|
|
| .tab-selected { |
| border-bottom-color: var(--prediction) !important; |
| background: #f7fafc !important; |
| color: #102d41 !important; |
| } |
|
|
| .panel { |
| position: relative; |
| margin-top: 16px; |
| overflow: hidden; |
| padding: 25px 27px 27px; |
| border: 1px solid var(--line); |
| border-top: 3px solid #71808d; |
| border-radius: var(--radius); |
| background: var(--paper); |
| box-shadow: var(--shadow); |
| } |
|
|
| .panel.axis-prediction { |
| border-top-color: var(--prediction); |
| } |
|
|
| .panel.axis-robustness { |
| border-top-color: var(--robustness); |
| } |
|
|
| .panel.axis-compute { |
| border-top-color: var(--compute); |
| } |
|
|
| .panel.axis-consistency { |
| border-top-color: var(--consistency); |
| } |
|
|
| .panel.axis-feature { |
| border-top-color: var(--feature); |
| } |
|
|
| .panel.axis-trial { |
| border-top-color: var(--trial); |
| } |
|
|
| .panel.axis-methods { |
| border-top-color: #455a64; |
| } |
|
|
| .panel-heading { |
| max-width: 1120px; |
| margin-bottom: 20px; |
| } |
|
|
| .section-eyebrow { |
| margin-bottom: 5px; |
| color: var(--muted); |
| } |
|
|
| .axis-prediction .section-eyebrow { |
| color: var(--prediction); |
| } |
|
|
| .axis-robustness .section-eyebrow { |
| color: var(--robustness); |
| } |
|
|
| .axis-compute .section-eyebrow { |
| color: var(--compute); |
| } |
|
|
| .axis-consistency .section-eyebrow { |
| color: var(--consistency); |
| } |
|
|
| .axis-feature .section-eyebrow { |
| color: var(--feature); |
| } |
|
|
| .axis-trial .section-eyebrow { |
| color: var(--trial); |
| } |
|
|
| h2 { |
| margin-bottom: 7px; |
| font-size: 22px; |
| font-weight: 750; |
| line-height: 1.2; |
| letter-spacing: -0.018em; |
| } |
|
|
| .panel-subtitle { |
| max-width: 1080px; |
| margin-bottom: 0; |
| color: #526473; |
| font-size: 13px; |
| line-height: 1.55; |
| } |
|
|
| .metric-strip { |
| display: grid; |
| grid-template-columns: repeat(3, minmax(180px, 1fr)); |
| gap: 11px; |
| margin-bottom: 14px; |
| } |
|
|
| .metric-card { |
| position: relative; |
| min-width: 0; |
| overflow: hidden; |
| padding: 15px 16px 14px; |
| border: 1px solid #dce4e9; |
| border-radius: 9px; |
| background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%); |
| } |
|
|
| .metric-card::before { |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| height: 3px; |
| background: #7b8995; |
| content: ""; |
| } |
|
|
| .metric-card-prediction::before { |
| background: var(--prediction); |
| } |
|
|
| .metric-card-robustness::before { |
| background: var(--robustness); |
| } |
|
|
| .metric-card-compute::before { |
| background: var(--compute); |
| } |
|
|
| .metric-card-consistency::before { |
| background: var(--consistency); |
| } |
|
|
| .metric-card-feature::before { |
| background: var(--feature); |
| } |
|
|
| .metric-card-trial::before { |
| background: var(--trial); |
| } |
|
|
| .metric-label { |
| color: #657582; |
| font-size: 10px; |
| font-weight: 800; |
| letter-spacing: 0.075em; |
| text-transform: uppercase; |
| } |
|
|
| .metric-value { |
| margin-top: 7px; |
| overflow-wrap: anywhere; |
| color: #101820; |
| font-size: 20px; |
| font-weight: 800; |
| line-height: 1.15; |
| } |
|
|
| .metric-detail { |
| margin-top: 6px; |
| color: #647583; |
| font-size: 11px; |
| line-height: 1.4; |
| } |
|
|
| .method-note { |
| border-radius: 8px; |
| font-size: 12px; |
| line-height: 1.5; |
| } |
|
|
| .method-note { |
| margin: 12px 0; |
| padding: 11px 13px; |
| border-left: 3px solid #6f8190; |
| background: #f6f8fa; |
| color: #445664; |
| } |
|
|
| .axis-consistency .method-note { |
| border-left-color: var(--consistency); |
| } |
|
|
| .axis-feature .method-note { |
| border-left-color: var(--feature); |
| } |
|
|
| .axis-trial .method-note { |
| border-left-color: var(--trial); |
| } |
|
|
| .chart-grid { |
| display: grid; |
| gap: 18px; |
| align-items: start; |
| } |
|
|
| .chart-grid.two { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .graph-box { |
| min-width: 0; |
| overflow: hidden; |
| border: 1px solid #e3e9ed; |
| border-radius: 9px; |
| background: #ffffff; |
| } |
|
|
| .graph-box + .graph-box, |
| .chart-grid + .graph-box, |
| .graph-box + .chart-grid { |
| margin-top: 0; |
| } |
|
|
| .panel > .graph-box { |
| margin-top: 12px; |
| } |
|
|
| .chart-grid > .graph-box { |
| margin-top: 0; |
| } |
|
|
| .latent-graph { |
| margin-top: 14px !important; |
| } |
|
|
| .inline-controls { |
| display: grid; |
| grid-template-columns: minmax(240px, 420px) minmax(200px, 300px); |
| gap: 14px; |
| align-items: end; |
| margin-bottom: 12px; |
| padding: 13px 14px; |
| border: 1px solid #e0e6ea; |
| border-radius: 9px; |
| background: #fafbfc; |
| } |
|
|
| .details-table { |
| margin-top: 15px; |
| border: 1px solid #e1e7eb; |
| border-radius: 8px; |
| background: #ffffff; |
| } |
|
|
| .details-table summary { |
| cursor: pointer; |
| padding: 11px 14px; |
| color: #344a59; |
| font-size: 12px; |
| font-weight: 800; |
| user-select: none; |
| } |
|
|
| .details-table summary:hover { |
| background: #f7f9fa; |
| } |
|
|
| .details-table[open] summary { |
| border-bottom: 1px solid #e5eaee; |
| } |
|
|
| .details-body { |
| padding: 9px; |
| } |
|
|
| .source-link { |
| display: inline-flex; |
| align-items: center; |
| gap: 5px; |
| margin-top: 12px; |
| padding: 6px 10px; |
| border: 1px solid #cdd9e1; |
| border-radius: 6px; |
| background: #ffffff; |
| color: #355b77; |
| font-size: 11px; |
| font-weight: 750; |
| text-decoration: none; |
| } |
|
|
| .source-link::before { |
| content: "↓"; |
| font-size: 13px; |
| } |
|
|
| .source-link:hover { |
| border-color: #93adbf; |
| background: #f4f8fa; |
| } |
|
|
| .download-grid { |
| display: flex; |
| gap: 8px; |
| flex-wrap: wrap; |
| margin-top: 4px; |
| } |
|
|
| .download-grid .source-link { |
| margin-top: 0; |
| } |
|
|
| .dash-table-container { |
| color: var(--ink); |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th { |
| overflow: visible !important; |
| padding: 0 !important; |
| border-right: 1px solid #d8e1e7 !important; |
| background: #f3f6f8 !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:last-child { |
| border-right: 0 !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th.dash-header > div { |
| display: flex !important; |
| gap: 7px !important; |
| align-items: center !important; |
| justify-content: flex-start !important; |
| min-height: 42px; |
| padding: 9px 10px !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header-name { |
| flex: 1 1 auto !important; |
| min-width: 0; |
| color: #263844; |
| line-height: 1.2; |
| white-space: normal; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-actions { |
| order: -1; |
| display: inline-flex !important; |
| flex: 0 0 auto !important; |
| align-items: center; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--sort, |
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner .column-header--hide { |
| display: inline-flex !important; |
| align-items: center; |
| justify-content: center; |
| width: 21px; |
| height: 21px; |
| border: 1px solid #c7d3dc; |
| border-radius: 4px; |
| background: #ffffff; |
| color: #526171 !important; |
| font-size: 12px; |
| opacity: 1 !important; |
| } |
|
|
| .dash-table-container .dash-spreadsheet-container .dash-spreadsheet-inner th:hover .column-header--sort { |
| border-color: var(--prediction); |
| background: #edf6ff; |
| color: var(--prediction) !important; |
| } |
|
|
| .dash-table-container .dash-filter input { |
| min-height: 29px; |
| padding: 5px 7px !important; |
| border: 1px solid #d5dee4 !important; |
| border-radius: 4px; |
| background: #ffffff !important; |
| font-family: Arial, Helvetica, sans-serif !important; |
| font-size: 11px !important; |
| } |
|
|
| .dash-table-container .previous-next-container { |
| margin-top: 8px; |
| color: #526171; |
| font-size: 11px; |
| } |
|
|
| .dash-table-container .previous-next-container button { |
| border: 1px solid #d4dde3; |
| border-radius: 5px; |
| background: #ffffff; |
| } |
|
|
| .provenance-footer { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| margin-top: 18px; |
| padding: 18px 2px 4px; |
| border-top: 1px solid var(--line); |
| color: #62727e; |
| font-size: 12px; |
| line-height: 1.55; |
| } |
|
|
| .provenance-footer a { |
| font-weight: 700; |
| text-decoration: none; |
| } |
|
|
| [data-dash-is-loading="true"] { |
| opacity: 0.56; |
| transition: opacity 140ms ease; |
| } |
|
|
| @media (max-width: 1180px) { |
| .metric-strip { |
| grid-template-columns: repeat(2, minmax(180px, 1fr)); |
| } |
|
|
| .chart-grid.two { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| @media (max-width: 820px) { |
| .app-shell { |
| padding: 0 14px 24px; |
| } |
|
|
| .hero { |
| padding-bottom: 25px; |
| } |
|
|
| .site-nav { |
| min-height: 62px; |
| } |
|
|
| .hero-copy { |
| padding-top: 34px; |
| } |
|
|
| .hero-links { |
| gap: 14px; |
| } |
|
|
| .nav-placeholder small { |
| display: none; |
| } |
|
|
| .toolbar { |
| position: relative; |
| grid-template-columns: 1fr; |
| gap: 12px; |
| padding: 12px; |
| } |
|
|
| .tabs { |
| justify-content: flex-start; |
| } |
|
|
| .tab { |
| flex: 0 0 auto !important; |
| min-width: 148px; |
| } |
|
|
| .panel { |
| padding: 20px 17px; |
| } |
|
|
| .inline-controls { |
| grid-template-columns: 1fr; |
| } |
|
|
| .heatmap-graph, |
| .latent-graph { |
| overflow-x: auto; |
| } |
|
|
| .heatmap-graph > div, |
| .latent-graph > div { |
| min-width: 660px; |
| } |
| } |
|
|
| @media (max-width: 560px) { |
| .site-nav { |
| align-items: flex-start; |
| padding: 15px 0; |
| } |
|
|
| .site-brand { |
| padding-top: 1px; |
| } |
|
|
| .hero-links { |
| flex-direction: column; |
| gap: 4px; |
| align-items: flex-end; |
| } |
|
|
| .hero-links a, |
| .nav-placeholder { |
| font-size: 11px; |
| } |
|
|
| h1 { |
| font-size: 32px; |
| } |
|
|
| .lede { |
| font-size: 14px; |
| } |
|
|
| .metric-strip { |
| grid-template-columns: 1fr; |
| } |
|
|
| .metric-card { |
| padding: 13px 14px; |
| } |
|
|
| h2 { |
| font-size: 20px; |
| } |
|
|
| .panel-subtitle, |
| .method-note { |
| font-size: 12px; |
| } |
|
|
| .tab { |
| min-width: 134px; |
| padding-right: 12px !important; |
| padding-left: 12px !important; |
| font-size: 12px; |
| } |
|
|
| .details-body { |
| padding: 4px; |
| } |
|
|
| .source-link { |
| width: 100%; |
| justify-content: center; |
| } |
| } |
|
|
| @media (prefers-reduced-motion: reduce) { |
| html { |
| scroll-behavior: auto; |
| } |
|
|
| *, |
| *::before, |
| *::after { |
| transition-duration: 0.01ms !important; |
| animation-duration: 0.01ms !important; |
| animation-iteration-count: 1 !important; |
| } |
| } |
|
|
| @media print { |
| body, |
| .app-shell { |
| background: #ffffff; |
| } |
|
|
| .toolbar, |
| .tabs, |
| .source-link { |
| display: none !important; |
| } |
|
|
| .hero { |
| padding: 18px 0; |
| background: #ffffff; |
| color: #000000; |
| } |
|
|
| .eyebrow, |
| .lede, |
| .hero-links a { |
| color: #333333; |
| } |
|
|
| .panel { |
| break-inside: avoid; |
| box-shadow: none; |
| } |
| } |
|
|
