1@import 'tailwindcss';23/*4 AI Atlas design tokens — institutional, dense, readable. Two themes on <html data-theme="light|dark">.5 Light: warm paper canvas, near-black ink, atlas blue accent. Dark: graphite canvas, off-white ink, brighter blue.6 Amber (accent-2) is reserved for money and change; positive/warning/danger are semantic only.7 Tier colours grade source quality (1 official → 4 unverified); entity-type colours identify badges everywhere.8*/910:root,11[data-theme='light'] {12 color-scheme: light;13 --canvas: #f6f6f3;14 --surface: #ffffff;15 --surface-2: #eeeeea;16 --surface-3: #e3e4de;17 --ink: #101216;18 --ink-2: #4b5161;19 --ink-3: #7c8293;20 --rule: rgba(16, 18, 22, 0.1);21 --rule-strong: rgba(16, 18, 22, 0.22);22 --accent: #1f4fd8;23 --accent-ink: #ffffff;24 --accent-soft: rgba(31, 79, 216, 0.1);25 --accent-2: #a8600a;26 --accent-2-soft: rgba(212, 130, 22, 0.14);27 --positive: #1d7a4a;28 --positive-soft: rgba(29, 122, 74, 0.12);29 --warning: #b4700e;30 --warning-soft: rgba(212, 130, 22, 0.14);31 --danger: #c0333d;32 --danger-soft: rgba(192, 51, 61, 0.12);3334 --tier-1: #1d7a4a;35 --tier-2: #1f4fd8;36 --tier-3: #b4700e;37 --tier-4: #7c8293;3839 --type-model: #1f4fd8;40 --type-company: #6d3fc7;41 --type-paper: #b6337e;42 --type-provider: #0d7c86;43 --type-benchmark: #c2560f;44 --type-hardware: #3d7a1d;45 --type-framework: #0f6fa8;46 --type-dataset: #8a3fb0;47 --type-tool: #5b6478;4849 --series-1: #1f4fd8;50 --series-2: #c2560f;51 --series-3: #1d7a4a;52 --series-4: #6d3fc7;53 --series-5: #0d7c86;54 --series-6: #b6337e;55 --series-7: #7c8293;56 --series-8: #c0333d;5758 --radius: 4px;59 --radius-lg: 8px;60 --header-h: 56px;61 --tabbar-h: 58px;62}6364[data-theme='dark'] {65 color-scheme: dark;66 --canvas: #0b0d11;67 --surface: #12151b;68 --surface-2: #191d25;69 --surface-3: #222732;70 --ink: #e9ebf0;71 --ink-2: #a3a9b8;72 --ink-3: #6f7688;73 --rule: rgba(190, 200, 225, 0.11);74 --rule-strong: rgba(190, 200, 225, 0.26);75 --accent: #6d95ff;76 --accent-ink: #061024;77 --accent-soft: rgba(109, 149, 255, 0.14);78 --accent-2: #f2b04a;79 --accent-2-soft: rgba(242, 176, 74, 0.14);80 --positive: #45c47f;81 --positive-soft: rgba(69, 196, 127, 0.14);82 --warning: #f2b04a;83 --warning-soft: rgba(242, 176, 74, 0.14);84 --danger: #ff6b74;85 --danger-soft: rgba(255, 107, 116, 0.14);8687 --tier-1: #45c47f;88 --tier-2: #6d95ff;89 --tier-3: #f2b04a;90 --tier-4: #8b92a5;9192 --type-model: #6d95ff;93 --type-company: #b08cff;94 --type-paper: #ff7ab6;95 --type-provider: #3fc3cf;96 --type-benchmark: #ff9a4d;97 --type-hardware: #8fd35b;98 --type-framework: #57b7f0;99 --type-dataset: #d38cff;100 --type-tool: #9aa3b8;101102 --series-1: #6d95ff;103 --series-2: #ff9a4d;104 --series-3: #45c47f;105 --series-4: #b08cff;106 --series-5: #3fc3cf;107 --series-6: #ff7ab6;108 --series-7: #9aa3b8;109 --series-8: #ff6b74;110}111112@theme inline {113 --color-canvas: var(--canvas);114 --color-surface: var(--surface);115 --color-surface-2: var(--surface-2);116 --color-surface-3: var(--surface-3);117 --color-ink: var(--ink);118 --color-ink-2: var(--ink-2);119 --color-ink-3: var(--ink-3);120 --color-rule: var(--rule);121 --color-rule-strong: var(--rule-strong);122 --color-accent: var(--accent);123 --color-accent-ink: var(--accent-ink);124 --color-accent-soft: var(--accent-soft);125 --color-accent-2: var(--accent-2);126 --color-accent-2-soft: var(--accent-2-soft);127 --color-positive: var(--positive);128 --color-positive-soft: var(--positive-soft);129 --color-warning: var(--warning);130 --color-warning-soft: var(--warning-soft);131 --color-danger: var(--danger);132 --color-danger-soft: var(--danger-soft);133 --color-tier-1: var(--tier-1);134 --color-tier-2: var(--tier-2);135 --color-tier-3: var(--tier-3);136 --color-tier-4: var(--tier-4);137 --color-type-model: var(--type-model);138 --color-type-company: var(--type-company);139 --color-type-paper: var(--type-paper);140 --color-type-provider: var(--type-provider);141 --color-type-benchmark: var(--type-benchmark);142 --color-type-hardware: var(--type-hardware);143 --color-type-framework: var(--type-framework);144 --color-type-dataset: var(--type-dataset);145 --color-type-tool: var(--type-tool);146 --color-series-1: var(--series-1);147 --color-series-2: var(--series-2);148 --color-series-3: var(--series-3);149 --color-series-4: var(--series-4);150 --color-series-5: var(--series-5);151 --color-series-6: var(--series-6);152 --color-series-7: var(--series-7);153 --color-series-8: var(--series-8);154155 --font-sans: var(--font-geist-sans), ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;156 --font-mono: var(--font-geist-mono), ui-monospace, SFMono-Regular, Menlo, monospace;157158 --radius-sm: var(--radius);159 --radius-md: var(--radius);160 --radius-lg: var(--radius-lg);161 --radius-xl: 12px;162163 --text-2xs: 0.6875rem;164 --text-2xs--line-height: 1rem;165}166167@layer base {168 html {169 background: var(--canvas);170 color: var(--ink);171 -webkit-text-size-adjust: 100%;172 text-rendering: optimizeLegibility;173 font-feature-settings: 'cv11', 'ss01';174 scroll-padding-top: calc(var(--header-h) + 12px);175 }176 body {177 font-family: var(--font-sans);178 font-size: 15px;179 line-height: 1.5;180 background: var(--canvas);181 color: var(--ink);182 }183 ::selection {184 background: var(--accent-soft);185 }186 :focus-visible {187 outline: 2px solid var(--accent);188 outline-offset: 2px;189 }190 h1,191 h2,192 h3,193 h4 {194 letter-spacing: -0.01em;195 text-wrap: balance;196 }197 code,198 kbd,199 pre,200 samp {201 font-family: var(--font-mono);202 }203 table {204 font-variant-numeric: tabular-nums;205 }206 a {207 text-underline-offset: 3px;208 }209 button {210 cursor: pointer;211 }212 input,213 select,214 textarea {215 font: inherit;216 color: inherit;217 }218 input::placeholder {219 color: var(--ink-3);220 }221 input[type='search']::-webkit-search-decoration,222 input[type='search']::-webkit-search-cancel-button {223 -webkit-appearance: none;224 }225}226227/* ---------------------------------------------------------------------------------------------------------- utilities */228.container-x {229 padding-left: max(1rem, env(safe-area-inset-left));230 padding-right: max(1rem, env(safe-area-inset-right));231}232@media (min-width: 768px) {233 .container-x {234 padding-left: 2rem;235 padding-right: 2rem;236 }237}238239.eyebrow {240 font-size: 0.6875rem;241 line-height: 1rem;242 letter-spacing: 0.1em;243 text-transform: uppercase;244 font-weight: 600;245 color: var(--ink-3);246}247.display {248 font-weight: 600;249 letter-spacing: -0.03em;250 line-height: 1.02;251 text-wrap: balance;252}253.mono {254 font-family: var(--font-mono);255 font-feature-settings: 'tnum', 'zero';256}257.tnum {258 font-variant-numeric: tabular-nums;259 font-feature-settings: 'tnum';260}261.hairline {262 border-top: 1px solid var(--rule);263}264.hairline-strong {265 border-top: 1px solid var(--rule-strong);266}267.link {268 color: var(--accent);269 text-decoration: none;270}271.link:hover {272 text-decoration: underline;273}274/* Bordered surface — use sparingly (dialogs, sheets, the odd callout). Prefer hairlines and spatial composition. */275.panel {276 background: var(--surface);277 border: 1px solid var(--rule);278 border-radius: var(--radius-lg);279}280.grid-bg {281 background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px), linear-gradient(to bottom, var(--rule) 1px, transparent 1px);282 background-size: 48px 48px;283 mask-image: radial-gradient(ellipse at 50% 0%, rgba(0, 0, 0, 0.9), transparent 75%);284}285.scrollbar-thin {286 scrollbar-width: thin;287 scrollbar-color: var(--rule-strong) transparent;288}289.scrollbar-thin::-webkit-scrollbar {290 height: 6px;291 width: 6px;292}293.scrollbar-thin::-webkit-scrollbar-thumb {294 background: var(--rule-strong);295 border-radius: 3px;296}297.no-scrollbar {298 scrollbar-width: none;299}300.no-scrollbar::-webkit-scrollbar {301 display: none;302}303.safe-bottom {304 padding-bottom: env(safe-area-inset-bottom, 0px);305}306.prose-atlas p + p {307 margin-top: 0.75rem;308}309.prose-atlas a {310 color: var(--accent);311}312.prose-atlas a:hover {313 text-decoration: underline;314}315316/* Live indicator */317.dot {318 display: inline-block;319 width: 7px;320 height: 7px;321 border-radius: 999px;322 background: var(--positive);323 vertical-align: middle;324}325.pulse {326 position: relative;327}328.pulse::after {329 content: '';330 position: absolute;331 inset: -3px;332 border-radius: 999px;333 border: 1px solid var(--positive);334 animation: pulse-ring 1.8s ease-out infinite;335}336@keyframes pulse-ring {337 0% {338 transform: scale(0.6);339 opacity: 0.9;340 }341 100% {342 transform: scale(1.8);343 opacity: 0;344 }345}346347/* ---------------------------------------------------------------------------------------------------------- data tables */348.data-table {349 width: 100%;350 border-collapse: collapse;351 font-variant-numeric: tabular-nums;352 font-size: 0.875rem;353}354.data-table th {355 text-align: left;356 font-weight: 600;357 font-size: 0.6875rem;358 letter-spacing: 0.08em;359 text-transform: uppercase;360 color: var(--ink-3);361 padding: 0.5rem 0.75rem;362 border-bottom: 1px solid var(--rule-strong);363 white-space: nowrap;364 vertical-align: bottom;365}366.data-table th:first-child,367.data-table td:first-child {368 padding-left: 0;369}370.data-table th:last-child,371.data-table td:last-child {372 padding-right: 0;373}374.data-table td {375 padding: 0.55rem 0.75rem;376 border-bottom: 1px solid var(--rule);377 vertical-align: middle;378}379.data-table tbody tr:hover {380 background: var(--surface-2);381}382.data-table .num {383 text-align: right;384 font-variant-numeric: tabular-nums;385}386.data-table th.num {387 text-align: right;388}389.data-table .primary {390 font-weight: 500;391 color: var(--ink);392}393.data-table.compact td {394 padding-top: 0.35rem;395 padding-bottom: 0.35rem;396}397.data-table a.row-link {398 color: inherit;399 text-decoration: none;400}401.data-table a.row-link:hover {402 color: var(--accent);403}404@media (max-width: 767px) {405 .data-table.stack thead {406 display: none;407 }408 .data-table.stack tr {409 display: grid;410 grid-template-columns: 1fr 1fr;411 gap: 0.25rem 0.75rem;412 padding: 0.75rem 0;413 border-bottom: 1px solid var(--rule);414 }415 .data-table.stack tbody tr:hover {416 background: transparent;417 }418 .data-table.stack td {419 display: block;420 border: 0;421 padding: 0;422 min-width: 0;423 overflow-wrap: anywhere;424 }425 .data-table.stack td[data-label]::before {426 content: attr(data-label);427 display: block;428 font-size: 0.625rem;429 letter-spacing: 0.08em;430 text-transform: uppercase;431 color: var(--ink-3);432 font-weight: 600;433 margin-bottom: 0.1rem;434 }435 .data-table.stack td.primary {436 grid-column: 1 / -1;437 font-size: 0.9375rem;438 }439 .data-table.stack td.num {440 text-align: left;441 }442 .data-table.stack td.wide {443 grid-column: 1 / -1;444 }445 .data-table.stack td.hide-stack {446 display: none;447 }448}449/* Horizontal scroll wrapper for wide tables that must not stack. */450.table-scroll {451 overflow-x: auto;452 -webkit-overflow-scrolling: touch;453 scrollbar-width: thin;454}455.table-scroll .data-table th,456.table-scroll .data-table td {457 white-space: nowrap;458}459460/* ---------------------------------------------------------------------------------------------------------- key–value */461.kv {462 display: grid;463 grid-template-columns: minmax(0, 1fr);464 font-size: 0.875rem;465}466.kv > div {467 display: grid;468 grid-template-columns: 9.5rem minmax(0, 1fr);469 gap: 0.25rem 1rem;470 padding: 0.5rem 0;471 border-bottom: 1px solid var(--rule);472 align-items: baseline;473}474.kv > div > dt {475 color: var(--ink-3);476 font-size: 0.8125rem;477}478.kv > div > dd {479 min-width: 0;480 overflow-wrap: anywhere;481}482@media (max-width: 480px) {483 .kv > div {484 grid-template-columns: 7.5rem minmax(0, 1fr);485 }486}487488@media (prefers-reduced-motion: reduce) {489 *,490 *::before,491 *::after {492 animation-duration: 0.01ms !important;493 transition-duration: 0.01ms !important;494 }495}496