@import 'tailwindcss'; /* AI Atlas design tokens — institutional, dense, readable. Two themes on . Light: warm paper canvas, near-black ink, atlas blue accent. Dark: graphite canvas, off-white ink, brighter blue. Amber (accent-2) is reserved for money and change; positive/warning/danger are semantic only. Tier colours grade source quality (1 official → 4 unverified); entity-type colours identify badges everywhere. */ :root, [data-theme='light'] { color-scheme: light; --canvas: #f6f6f3; --surface: #ffffff; --surface-2: #eeeeea; --surface-3: #e3e4de; --ink: #101216; --ink-2: #4b5161; --ink-3: #7c8293; --rule: rgba(16, 18, 22, 0.1); --rule-strong: rgba(16, 18, 22, 0.22); --accent: #1f4fd8; --accent-ink: #ffffff; --accent-soft: rgba(31, 79, 216, 0.1); --accent-2: #a8600a; --accent-2-soft: rgba(212, 130, 22, 0.14); --positive: #1d7a4a; --positive-soft: rgba(29, 122, 74, 0.12); --warning: #b4700e; --warning-soft: rgba(212, 130, 22, 0.14); --danger: #c0333d; --danger-soft: rgba(192, 51, 61, 0.12); --tier-1: #1d7a4a; --tier-2: #1f4fd8; --tier-3: #b4700e; --tier-4: #7c8293; --type-model: #1f4fd8; --type-company: #6d3fc7; --type-paper: #b6337e; --type-provider: #0d7c86; --type-benchmark: #c2560f; --type-hardware: #3d7a1d; --type-framework: #0f6fa8; --type-dataset: #8a3fb0; --type-tool: #5b6478; --series-1: #1f4fd8; --series-2: #c2560f; --series-3: #1d7a4a; --series-4: #6d3fc7; --series-5: #0d7c86; --series-6: #b6337e; --series-7: #7c8293; --series-8: #c0333d; /* Brand plate (LogoMark): inverted per theme so the mark always reads as a solid plate with a bright "now" node. */ --brand-plate: #101216; --brand-ink: #f6f6f3; --brand-grid: rgba(246, 246, 243, 0.22); --brand-accent: #7fa3ff; --radius: 4px; --radius-lg: 8px; --header-h: 56px; --tabbar-h: 58px; /* Density (html[data-density]) — comfortable by default. Tables, key–value rows, sections and the base size scale. */ --d-base: 15px; --d-cell-y: 0.55rem; --d-cell-x: 0.75rem; --d-kv-y: 0.5rem; --d-row-y: 0.625rem; --d-section-y: 1.75rem; --d-section-y-md: 2.5rem; --d-table-fs: 0.875rem; } [data-density='compact'] { --d-base: 14px; --d-cell-y: 0.38rem; --d-cell-x: 0.625rem; --d-kv-y: 0.32rem; --d-row-y: 0.45rem; --d-section-y: 1.25rem; --d-section-y-md: 1.75rem; --d-table-fs: 0.8125rem; } [data-density='dense'] { --d-base: 13.5px; --d-cell-y: 0.22rem; --d-cell-x: 0.5rem; --d-kv-y: 0.2rem; --d-row-y: 0.3rem; --d-section-y: 0.875rem; --d-section-y-md: 1.25rem; --d-table-fs: 0.78rem; } [data-theme='dark'] { --brand-plate: #e9ebf0; --brand-ink: #0b0d11; --brand-grid: rgba(11, 13, 17, 0.2); --brand-accent: #1f4fd8; color-scheme: dark; --canvas: #0b0d11; --surface: #12151b; --surface-2: #191d25; --surface-3: #222732; --ink: #e9ebf0; --ink-2: #a3a9b8; --ink-3: #6f7688; --rule: rgba(190, 200, 225, 0.11); --rule-strong: rgba(190, 200, 225, 0.26); --accent: #6d95ff; --accent-ink: #061024; --accent-soft: rgba(109, 149, 255, 0.14); --accent-2: #f2b04a; --accent-2-soft: rgba(242, 176, 74, 0.14); --positive: #45c47f; --positive-soft: rgba(69, 196, 127, 0.14); --warning: #f2b04a; --warning-soft: rgba(242, 176, 74, 0.14); --danger: #ff6b74; --danger-soft: rgba(255, 107, 116, 0.14); --tier-1: #45c47f; --tier-2: #6d95ff; --tier-3: #f2b04a; --tier-4: #8b92a5; --type-model: #6d95ff; --type-company: #b08cff; --type-paper: #ff7ab6; --type-provider: #3fc3cf; --type-benchmark: #ff9a4d; --type-hardware: #8fd35b; --type-framework: #57b7f0; --type-dataset: #d38cff; --type-tool: #9aa3b8; --series-1: #6d95ff; --series-2: #ff9a4d; --series-3: #45c47f; --series-4: #b08cff; --series-5: #3fc3cf; --series-6: #ff7ab6; --series-7: #9aa3b8; --series-8: #ff6b74; } @theme inline { --color-canvas: var(--canvas); --color-surface: var(--surface); --color-surface-2: var(--surface-2); --color-surface-3: var(--surface-3); --color-ink: var(--ink); --color-ink-2: var(--ink-2); --color-ink-3: var(--ink-3); --color-rule: var(--rule); --color-rule-strong: var(--rule-strong); --color-accent: var(--accent); --color-accent-ink: var(--accent-ink); --color-accent-soft: var(--accent-soft); --color-accent-2: var(--accent-2); --color-accent-2-soft: var(--accent-2-soft); --color-positive: var(--positive); --color-positive-soft: var(--positive-soft); --color-warning: var(--warning); --color-warning-soft: var(--warning-soft); --color-danger: var(--danger); --color-danger-soft: var(--danger-soft); --color-tier-1: var(--tier-1); --color-tier-2: var(--tier-2); --color-tier-3: var(--tier-3); --color-tier-4: var(--tier-4); --color-type-model: var(--type-model); --color-type-company: var(--type-company); --color-type-paper: var(--type-paper); --color-type-provider: var(--type-provider); --color-type-benchmark: var(--type-benchmark); --color-type-hardware: var(--type-hardware); --color-type-framework: var(--type-framework); --color-type-dataset: var(--type-dataset); --color-type-tool: var(--type-tool); --color-series-1: var(--series-1); --color-series-2: var(--series-2); --color-series-3: var(--series-3); --color-series-4: var(--series-4); --color-series-5: var(--series-5); --color-series-6: var(--series-6); --color-series-7: var(--series-7); --color-series-8: var(--series-8); --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace; --radius-sm: var(--radius); --radius-md: var(--radius); --radius-lg: var(--radius-lg); --radius-xl: 12px; --text-2xs: 0.6875rem; --text-2xs--line-height: 1rem; } @layer base { html { background: var(--canvas); color: var(--ink); -webkit-text-size-adjust: 100%; text-rendering: optimizeLegibility; font-feature-settings: 'cv11', 'ss01'; scroll-padding-top: calc(var(--header-h) + 12px); } body { font-family: var(--font-sans); font-size: var(--d-base, 15px); line-height: 1.5; background: var(--canvas); color: var(--ink); } ::selection { background: var(--accent-soft); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } h1, h2, h3, h4 { letter-spacing: -0.01em; text-wrap: balance; } code, kbd, pre, samp { font-family: var(--font-mono); } table { font-variant-numeric: tabular-nums; } a { text-underline-offset: 3px; } button { cursor: pointer; } input, select, textarea { font: inherit; color: inherit; } input::placeholder { color: var(--ink-3); } input[type='search']::-webkit-search-decoration, input[type='search']::-webkit-search-cancel-button { -webkit-appearance: none; } } /* ---------------------------------------------------------------------------------------------------------- utilities */ .container-x { padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); } @media (min-width: 768px) { .container-x { padding-left: 2rem; padding-right: 2rem; } } .eyebrow { font-size: 0.6875rem; line-height: 1rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); } .display { font-weight: 600; letter-spacing: -0.03em; line-height: 1.02; text-wrap: balance; } .mono { font-family: var(--font-mono); font-feature-settings: 'tnum', 'zero'; } .tnum { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; } .hairline { border-top: 1px solid var(--rule); } .hairline-strong { border-top: 1px solid var(--rule-strong); } .link { color: var(--accent); text-decoration: none; } .link:hover { text-decoration: underline; } /* Bordered surface — use sparingly (dialogs, sheets, the odd callout). Prefer hairlines and spatial composition. */ .panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius-lg); } .grid-bg { background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%); } .scrollbar-thin { scrollbar-width: thin; scrollbar-color: var(--rule-strong) transparent; } .scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 3px; } .no-scrollbar { scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { display: none; } .safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .prose-atlas p + p { margin-top: 0.75rem; } .prose-atlas a { color: var(--accent); } .prose-atlas a:hover { text-decoration: underline; } /* Live indicator */ .dot { display: inline-block; width: 7px; height: 7px; border-radius: 999px; background: var(--positive); vertical-align: middle; } .pulse { position: relative; } .pulse::after { content: ''; position: absolute; inset: -3px; border-radius: 999px; border: 1px solid var(--positive); animation: pulse-ring 1.8s ease-out infinite; } @keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(1.8); opacity: 0; } } /* ---------------------------------------------------------------------------------------------------------- data tables */ .data-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: var(--d-table-fs, 0.875rem); } .data-table th { text-align: left; font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); padding: calc(var(--d-cell-y) * 0.9) var(--d-cell-x); border-bottom: 1px solid var(--rule-strong); white-space: nowrap; vertical-align: bottom; } .data-table th:first-child, .data-table td:first-child { padding-left: 0; } .data-table th:last-child, .data-table td:last-child { padding-right: 0; } .data-table td { padding: var(--d-cell-y) var(--d-cell-x); border-bottom: 1px solid var(--rule); vertical-align: middle; } .data-table tbody tr:hover { background: var(--surface-2); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; } .data-table th.num { text-align: right; } .data-table .primary { font-weight: 500; color: var(--ink); } .data-table.compact td { padding-top: calc(var(--d-cell-y) * 0.65); padding-bottom: calc(var(--d-cell-y) * 0.65); } .data-table a.row-link { color: inherit; text-decoration: none; } .data-table a.row-link:hover { color: var(--accent); } @media (max-width: 767px) { .data-table.stack thead { display: none; } .data-table.stack tr { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); } .data-table.stack tbody tr:hover { background: transparent; } .data-table.stack td { display: block; border: 0; padding: 0; min-width: 0; overflow-wrap: anywhere; } .data-table.stack td[data-label]::before { content: attr(data-label); display: block; font-size: 0.625rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; margin-bottom: 0.1rem; } .data-table.stack td.primary { grid-column: 1 / -1; font-size: 0.9375rem; } .data-table.stack td.num { text-align: left; } .data-table.stack td.wide { grid-column: 1 / -1; } .data-table.stack td.hide-stack { display: none; } } /* Horizontal scroll wrapper for wide tables that must not stack. */ .table-scroll { position: relative; /* clip absolutely positioned .sr-only / caption children so they never widen the document */ overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .table-scroll .data-table th, .table-scroll .data-table td { white-space: nowrap; } /* ---------------------------------------------------------------------------------------------------------- key–value */ .kv { display: grid; grid-template-columns: minmax(0, 1fr); font-size: 0.875rem; } .kv > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 0.25rem 1rem; padding: var(--d-kv-y) 0; border-bottom: 1px solid var(--rule); align-items: baseline; } .kv > div > dt { color: var(--ink-3); font-size: 0.8125rem; } .kv > div > dd { min-width: 0; overflow-wrap: anywhere; } @media (max-width: 480px) { .kv > div { grid-template-columns: 7.5rem minmax(0, 1fr); } } /* ---------------------------------------------------------------------------------------------------------- density-aware layout */ /* Section vertical padding follows the density variables (Section component uses `.section-y`). */ .section-y { padding-top: var(--d-section-y); padding-bottom: var(--d-section-y); } @media (min-width: 768px) { .section-y { padding-top: var(--d-section-y-md); padding-bottom: var(--d-section-y-md); } } /* Dense feed rows (ChangeRow, lists): vertical padding from density. */ .row-y { padding-top: var(--d-row-y); padding-bottom: var(--d-row-y); } /* ---------------------------------------------------------------------------------------------------------- evidence trigger */ /* A displayed value that can open the evidence drawer: subtle dotted underline, no button chrome. */ .evidence { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: inherit; cursor: help; text-decoration: underline dotted; text-decoration-color: var(--rule-strong); text-decoration-thickness: 1px; text-underline-offset: 3px; border-radius: 2px; } .evidence:hover { text-decoration-color: var(--accent); color: var(--accent); } .evidence:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------------------------------------------------------------------------------------------------------- hint tooltip (pure CSS) */ .hint { position: relative; display: inline-flex; } .hint > .hint-bubble { position: absolute; left: 0; top: calc(100% + 6px); z-index: 60; width: max-content; max-width: 18rem; padding: 0.45rem 0.6rem; font-size: 0.75rem; line-height: 1.35; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--ink-2); background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18); opacity: 0; pointer-events: none; transform: translateY(-2px); transition: opacity 120ms ease, transform 120ms ease; } .hint.hint-right > .hint-bubble { left: auto; right: 0; } .hint:hover > .hint-bubble, .hint:focus-within > .hint-bubble { opacity: 1; pointer-events: auto; transform: translateY(0); } /* ---------------------------------------------------------------------------------------------------------- ticker */ .ticker { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); } .ticker-track { display: flex; width: max-content; gap: 2.5rem; animation: ticker-scroll var(--ticker-duration, 60s) linear infinite; } .ticker:hover .ticker-track, .ticker[data-paused='true'] .ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------------------------------------------------------------------------------------------------------- heatmap */ .heatmap { border-collapse: separate; border-spacing: 2px; font-size: 0.75rem; } .heatmap th { position: sticky; background: var(--canvas); z-index: 2; font-weight: 500; color: var(--ink-2); white-space: nowrap; } .heatmap thead th { top: 0; vertical-align: bottom; padding: 0.25rem 0.3rem; } .heatmap tbody th { left: 0; text-align: left; padding: 0 0.6rem 0 0; z-index: 3; } .heatmap thead th:first-child { left: 0; z-index: 4; } .heatmap td { min-width: 2.6rem; height: 1.7rem; text-align: center; font-variant-numeric: tabular-nums; border-radius: 2px; color: var(--ink); } .heatmap td a { display: block; color: inherit; text-decoration: none; } .heatmap td.empty { background: var(--surface-2); color: var(--ink-3); } /* ---------------------------------------------------------------------------------------------------------- terminal layout */ .terminal-rail { position: sticky; top: calc(var(--header-h) + 0.75rem); max-height: calc(100dvh - var(--header-h) - 1.5rem); overflow-y: auto; scrollbar-width: thin; } .sheet-enter { animation: sheet-in 160ms ease-out; } @keyframes sheet-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .ticker-track { animation: none; width: 100%; overflow-x: auto; } }