| :root { |
| --ink: #142535; |
| --muted: #60717f; |
| --line: #dce3e8; |
| --soft-line: #edf1f4; |
| --paper: #ffffff; |
| --canvas: #f7f8f9; |
| --prediction: #1565c0; |
| --datasets: #455a64; |
| --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; |
| } |
|
|
| .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: #5f707d; |
| font-size: 10px; |
| 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-datasets { |
| border-top-color: var(--datasets); |
| } |
|
|
| .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-datasets .section-eyebrow { |
| color: var(--datasets); |
| } |
|
|
| .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; |
| } |
|
|
| .dataset-card-grid { |
| display: grid; |
| grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); |
| gap: 12px; |
| } |
|
|
| .dataset-card { |
| position: relative; |
| overflow: hidden; |
| padding: 17px 16px 15px; |
| border: 1px solid #dce4e9; |
| border-radius: 9px; |
| background: #ffffff; |
| } |
|
|
| .dataset-card::before { |
| position: absolute; |
| top: 0; |
| right: 0; |
| left: 0; |
| height: 3px; |
| background: #aeb9c1; |
| content: ""; |
| } |
|
|
| .dataset-card-selected { |
| border-color: #98aab6; |
| box-shadow: 0 4px 14px rgba(39, 58, 72, 0.08); |
| } |
|
|
| .dataset-card-selected::before { |
| background: var(--datasets); |
| } |
|
|
| .dataset-card-title { |
| color: #172938; |
| font-size: 15px; |
| font-weight: 780; |
| line-height: 1.25; |
| } |
|
|
| .dataset-card-context { |
| min-height: 36px; |
| margin-top: 5px; |
| color: #657684; |
| font-size: 11px; |
| line-height: 1.45; |
| } |
|
|
| .dataset-facts { |
| display: grid; |
| gap: 7px; |
| margin-top: 12px; |
| padding-top: 11px; |
| border-top: 1px solid var(--soft-line); |
| } |
|
|
| .dataset-facts > div { |
| display: flex; |
| align-items: baseline; |
| justify-content: space-between; |
| gap: 10px; |
| } |
|
|
| .dataset-fact-label { |
| color: #758590; |
| font-size: 10px; |
| font-weight: 800; |
| letter-spacing: 0.055em; |
| text-transform: uppercase; |
| } |
|
|
| .dataset-facts strong { |
| color: #324654; |
| font-size: 11px; |
| font-weight: 700; |
| text-align: right; |
| } |
|
|
| .dataset-source { |
| display: inline-block; |
| margin-top: 12px; |
| color: #355b77; |
| font-size: 11px; |
| font-weight: 750; |
| text-decoration: none; |
| } |
|
|
| .dataset-source::after { |
| margin-left: 4px; |
| content: "↗"; |
| } |
|
|
| .dataset-example-grid { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 18px; |
| align-items: stretch; |
| } |
|
|
| .dataset-example-card { |
| min-width: 0; |
| overflow: hidden; |
| border: 1px solid #e0e7eb; |
| border-radius: 9px; |
| background: #ffffff; |
| } |
|
|
| .dataset-neural-card { |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| .dataset-target-card { |
| grid-column: 2; |
| grid-row: 1; |
| } |
|
|
| .dataset-link-controls { |
| grid-column: 1 / -1; |
| grid-row: 2; |
| } |
|
|
| .dataset-link-controls:empty { |
| display: none; |
| } |
|
|
| .dataset-link-controls:not(:empty) { |
| display: grid; |
| grid-template-columns: minmax(210px, 0.38fr) minmax(420px, 1fr); |
| gap: 18px; |
| align-items: center; |
| padding: 11px 13px; |
| border: 1px solid #dbe4e9; |
| border-radius: 8px; |
| background: #f7f9fa; |
| } |
|
|
| .dataset-link-lead { |
| display: flex; |
| min-width: 0; |
| flex-direction: column; |
| gap: 1px; |
| } |
|
|
| .dataset-link-title { |
| color: #253b49; |
| font-size: 11px; |
| font-weight: 800; |
| letter-spacing: 0.055em; |
| text-transform: uppercase; |
| } |
|
|
| .dataset-link-hint { |
| overflow: hidden; |
| color: #647681; |
| font-size: 10px; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| .dataset-link-transport { |
| display: grid; |
| grid-template-columns: auto minmax(160px, 1fr) minmax(250px, auto); |
| gap: 12px; |
| align-items: center; |
| min-width: 0; |
| } |
|
|
| .dataset-link-button { |
| min-width: 62px; |
| min-height: 32px; |
| padding: 5px 11px; |
| border: 1px solid #b94805; |
| border-radius: 6px; |
| background: #ffffff; |
| color: #a73f04; |
| cursor: pointer; |
| font: inherit; |
| font-size: 11px; |
| font-weight: 780; |
| } |
|
|
| .dataset-link-button:hover { |
| background: #fff5ef; |
| } |
|
|
| .dataset-link-slider { |
| width: 100%; |
| min-width: 0; |
| accent-color: #d55e00; |
| cursor: ew-resize; |
| } |
|
|
| .dataset-link-readout { |
| display: flex; |
| min-width: 0; |
| justify-content: flex-end; |
| gap: 10px; |
| color: #536773; |
| font-size: 10px; |
| font-variant-numeric: tabular-nums; |
| white-space: nowrap; |
| } |
|
|
| .dataset-link-time { |
| min-width: 112px; |
| color: #2f4654; |
| font-weight: 760; |
| } |
|
|
| .dataset-link-value { |
| overflow: hidden; |
| max-width: 210px; |
| text-overflow: ellipsis; |
| } |
|
|
| .dataset-linked-playhead { |
| position: absolute; |
| z-index: 8; |
| width: 2px; |
| border-radius: 999px; |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.86); |
| pointer-events: none; |
| } |
|
|
| .dataset-viz-heading { |
| display: flex; |
| min-height: 58px; |
| align-items: baseline; |
| justify-content: space-between; |
| gap: 14px; |
| padding: 15px 16px 11px; |
| border-bottom: 1px solid #edf1f4; |
| } |
|
|
| .dataset-viz-heading strong { |
| color: #203442; |
| font-size: 14px; |
| font-weight: 780; |
| } |
|
|
| .dataset-viz-heading span { |
| color: #6c7d88; |
| font-size: 10px; |
| font-weight: 650; |
| text-align: right; |
| } |
|
|
| .dataset-example-card .graph-box, |
| .target-space-graph { |
| overflow: visible; |
| border: 0; |
| border-radius: 0; |
| } |
|
|
| .target-class-grid { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 10px; |
| padding: 16px; |
| } |
|
|
| .target-class-card { |
| position: relative; |
| display: flex; |
| min-width: 0; |
| min-height: 154px; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 8px; |
| padding: 18px 8px 12px; |
| border: 1px solid #e1e7eb; |
| border-top: 4px solid; |
| border-radius: 8px; |
| background: #fbfcfd; |
| text-align: center; |
| } |
|
|
| .target-class-card-selected { |
| border-color: #183a4e; |
| box-shadow: 0 0 0 2px #183a4e inset; |
| background: #ffffff; |
| } |
|
|
| .target-class-glyph { |
| display: flex; |
| min-height: 50px; |
| align-items: center; |
| justify-content: center; |
| } |
|
|
| .orientation-arrow { |
| position: relative; |
| width: 48px; |
| height: 5px; |
| border-radius: 999px; |
| } |
|
|
| .orientation-arrow-head { |
| position: absolute; |
| top: 50%; |
| right: -1px; |
| width: 0; |
| height: 0; |
| border-top: 7px solid transparent; |
| border-bottom: 7px solid transparent; |
| border-left: 11px solid currentColor; |
| color: inherit; |
| transform: translate(5px, -50%); |
| } |
|
|
| .speech-target-word { |
| color: #213746; |
| font-size: 17px; |
| font-weight: 780; |
| } |
|
|
| .target-class-label { |
| color: #253b49; |
| font-size: 12px; |
| font-weight: 760; |
| } |
|
|
| .target-class-count { |
| color: #74848f; |
| font-size: 10px; |
| } |
|
|
| .target-example-badge { |
| position: absolute; |
| top: 7px; |
| right: 7px; |
| padding: 2px 5px; |
| border-radius: 999px; |
| background: #183a4e; |
| color: #ffffff; |
| font-size: 8px; |
| font-weight: 800; |
| letter-spacing: 0.035em; |
| text-transform: uppercase; |
| } |
|
|
| .target-space-legend { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0, 1fr)); |
| gap: 6px 12px; |
| padding: 4px 16px 15px; |
| } |
|
|
| .target-legend-item { |
| display: flex; |
| min-width: 0; |
| gap: 6px; |
| align-items: flex-start; |
| color: #596b77; |
| font-size: 9px; |
| line-height: 1.25; |
| } |
|
|
| .target-legend-swatch { |
| width: 9px; |
| height: 9px; |
| flex: 0 0 auto; |
| margin-top: 1px; |
| border-radius: 50%; |
| } |
|
|
| .dataset-example-note { |
| margin-top: 12px; |
| color: #637581; |
| font-size: 11px; |
| } |
|
|
| .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: visible; |
| border: 1px solid #e3e9ed; |
| border-radius: 9px; |
| background: #ffffff; |
| } |
|
|
| .js-plotly-plot .plotly .hoverlayer, |
| .js-plotly-plot .plotly .hoverlayer * { |
| pointer-events: none !important; |
| transition: none !important; |
| } |
|
|
| .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; |
| } |
|
|
| .latent-hover-detail { |
| display: flex; |
| min-height: 40px; |
| align-items: center; |
| margin-top: 12px; |
| padding: 8px 12px; |
| border: 1px solid #d7e4e8; |
| border-radius: 7px; |
| background: #f4f9fa; |
| color: #38515e; |
| font-size: 12px; |
| font-weight: 650; |
| line-height: 1.35; |
| } |
|
|
| .latent-space-mobile, |
| .latent-mobile-legend { |
| display: none; |
| } |
|
|
| .latent-mobile-legend { |
| gap: 7px 12px; |
| align-items: center; |
| margin: 8px 0 14px; |
| padding: 9px 12px; |
| border: 1px solid #e2e8ec; |
| border-radius: 7px; |
| background: #fafbfc; |
| color: #536672; |
| font-size: 10px; |
| } |
|
|
| .latent-mobile-legend-title { |
| grid-column: 1 / -1; |
| font-weight: 750; |
| } |
|
|
| .latent-mobile-legend-item { |
| display: inline-flex; |
| gap: 5px; |
| align-items: center; |
| } |
|
|
| .latent-mobile-legend-dot { |
| display: inline-block; |
| width: 8px; |
| height: 8px; |
| border-radius: 50%; |
| } |
|
|
| .historical-trajectory-mobile { |
| display: none; |
| } |
|
|
| .trajectory-legend { |
| display: grid; |
| grid-template-columns: auto repeat(8, minmax(0, auto)); |
| gap: 8px 13px; |
| align-items: center; |
| margin: 8px 0 14px; |
| padding: 9px 12px; |
| border: 1px solid #e2e8ec; |
| border-radius: 7px; |
| background: #fafbfc; |
| color: #536672; |
| font-size: 10px; |
| } |
|
|
| .trajectory-legend-title { |
| font-weight: 750; |
| } |
|
|
| .trajectory-legend-item { |
| display: inline-flex; |
| gap: 5px; |
| align-items: center; |
| white-space: nowrap; |
| } |
|
|
| .trajectory-legend-swatch { |
| width: 13px; |
| height: 3px; |
| border-radius: 3px; |
| } |
|
|
| .inline-controls { |
| display: grid; |
| grid-template-columns: minmax(240px, 420px) minmax(260px, 380px); |
| gap: 14px; |
| align-items: end; |
| margin-bottom: 12px; |
| padding: 13px 14px; |
| border: 1px solid #e0e6ea; |
| border-radius: 9px; |
| background: #fafbfc; |
| } |
|
|
| .inline-controls.single { |
| grid-template-columns: minmax(240px, 420px); |
| } |
|
|
| .feature-method-control { |
| max-width: 420px; |
| margin-bottom: 14px; |
| padding: 13px 14px; |
| border: 1px solid #e0e6ea; |
| border-radius: 9px; |
| background: #fafbfc; |
| } |
|
|
| .feature-story-viz { |
| width: 100%; |
| overflow: hidden; |
| border: 1px solid #dfe6ea; |
| border-radius: 9px; |
| background: #ffffff; |
| } |
|
|
| .feature-story-viz:focus-visible { |
| outline-offset: 3px !important; |
| } |
|
|
| .feature-story-visual { |
| position: relative; |
| width: 100%; |
| overflow: hidden; |
| background: #ffffff; |
| } |
|
|
| .feature-story-canvas, |
| .feature-story-overlay { |
| position: absolute; |
| inset: 0; |
| display: block; |
| } |
|
|
| .feature-story-overlay { |
| pointer-events: none; |
| font-family: Arial, Helvetica, sans-serif; |
| } |
|
|
| .feature-story-overlay text { |
| user-select: none; |
| } |
|
|
| .feature-story-dot { |
| cursor: pointer; |
| pointer-events: all; |
| } |
|
|
| .feature-story-playback { |
| display: grid; |
| grid-template-areas: "source slider target"; |
| grid-template-columns: auto minmax(150px, 1fr) auto; |
| gap: 10px; |
| align-items: center; |
| min-height: 58px; |
| padding: 10px 14px; |
| border-top: 1px solid #edf1f3; |
| background: #fbfcfc; |
| } |
|
|
| .feature-story-playback-label { |
| color: #5b6d79; |
| font-size: 10px; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| white-space: nowrap; |
| } |
|
|
| .feature-story-playback-label.source { |
| grid-area: source; |
| } |
|
|
| .feature-story-playback-label.target { |
| grid-area: target; |
| } |
|
|
| .feature-story-slider { |
| grid-area: slider; |
| width: 100%; |
| accent-color: var(--feature); |
| cursor: ew-resize; |
| } |
|
|
| .feature-story-render-token { |
| display: none; |
| } |
|
|
| .feature-story-error { |
| padding: 40px 20px; |
| color: #607080; |
| text-align: center; |
| } |
|
|
| .feature-selection-detail { |
| min-height: 36px; |
| margin: 12px 0; |
| padding: 9px 11px; |
| border-left: 3px solid var(--feature); |
| border-radius: 6px; |
| background: #f8f6fb; |
| color: #445664; |
| font-size: 12px; |
| line-height: 1.45; |
| } |
|
|
| .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; |
| } |
|
|
| .dataset-example-grid { |
| grid-template-columns: 1fr; |
| } |
|
|
| .dataset-neural-card { |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| .dataset-link-controls { |
| grid-column: 1; |
| grid-row: 2; |
| } |
|
|
| .dataset-target-card { |
| grid-column: 1; |
| grid-row: 3; |
| } |
|
|
| .dataset-example-grid:has(.dataset-link-controls:empty) .dataset-target-card { |
| grid-row: 2; |
| } |
|
|
| } |
|
|
| @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; |
| } |
|
|
| .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; |
| } |
|
|
| .dataset-link-controls:not(:empty) { |
| grid-template-columns: 1fr; |
| gap: 8px; |
| } |
|
|
| .feature-method-control { |
| max-width: none; |
| } |
|
|
| .modebar-container { |
| display: none !important; |
| } |
|
|
| .heatmap-graph { |
| overflow: visible; |
| } |
|
|
| .heatmap-graph > div { |
| width: 100% !important; |
| min-width: 0; |
| } |
|
|
| .latent-graph { |
| overflow-x: auto; |
| padding-bottom: 7px; |
| scrollbar-color: #a9b5bd #eef2f4; |
| scrollbar-width: thin; |
| } |
|
|
| .latent-space-desktop > div { |
| min-width: 660px; |
| } |
| } |
|
|
| @media (max-width: 560px) { |
| .dataset-viz-heading { |
| align-items: flex-start; |
| flex-direction: column; |
| gap: 2px; |
| } |
|
|
| .dataset-viz-heading span { |
| text-align: left; |
| } |
|
|
| .dataset-link-controls:not(:empty) { |
| grid-template-columns: 1fr; |
| gap: 8px; |
| } |
|
|
| .dataset-link-hint { |
| white-space: normal; |
| } |
|
|
| .dataset-link-transport { |
| grid-template-columns: auto minmax(120px, 1fr); |
| gap: 8px; |
| } |
|
|
| .dataset-link-readout { |
| grid-column: 1 / -1; |
| justify-content: space-between; |
| } |
|
|
| .dataset-link-value { |
| max-width: 170px; |
| } |
|
|
| .target-class-grid, |
| .target-space-legend { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .heatmap-graph { |
| display: none; |
| } |
|
|
| .latent-space-desktop { |
| display: none; |
| } |
|
|
| .latent-space-mobile { |
| display: block; |
| overflow: visible; |
| padding-bottom: 0; |
| } |
|
|
| .latent-space-mobile > div { |
| width: 100% !important; |
| min-width: 0; |
| } |
|
|
| .latent-mobile-legend { |
| display: grid; |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| } |
|
|
| .historical-trajectory-desktop { |
| display: none; |
| } |
|
|
| .historical-trajectory-mobile { |
| display: block; |
| } |
|
|
| .trajectory-legend { |
| grid-template-columns: repeat(2, minmax(0, 1fr)); |
| gap: 7px 12px; |
| } |
|
|
| .trajectory-legend-title { |
| grid-column: 1 / -1; |
| } |
|
|
| .feature-story-playback { |
| grid-template-areas: |
| "source target" |
| "slider slider"; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px 12px; |
| padding: 11px 12px 12px; |
| } |
|
|
| .feature-story-playback-label.target { |
| text-align: right; |
| } |
|
|
| .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; |
| } |
|
|
| .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, |
| .hero-links a { |
| color: #333333; |
| } |
|
|
| .panel { |
| break-inside: avoid; |
| box-shadow: none; |
| } |
| } |
|
|
