/* Letta's research palette and type: Roobert for reading, Fira Code for
   labels and data, square hairline panels rather than filled rounded cards. */

@font-face { font-family: 'Roobert'; src: url('/assets/fonts/Roobert-Regular.otf') format('opentype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Roobert'; src: url('/assets/fonts/Roobert-Medium.otf') format('opentype'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Fira Code'; src: url('/assets/fonts/FiraCode-VF.ttf') format('truetype'); font-weight: 300 700; font-display: swap; }

:root {
  --bg: #ECEEF0;
  --card: #ECEEF0;
  --ink: #17181A;
  --accent: #2200CC;
  --selection-bg: #EC6242;
  color-scheme: light;
  --sans: 'Roobert', -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Helvetica, Arial, sans-serif;
  --mono: 'Fira Code', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --page-max: 1152px;
  --gutter: 24px;
}
:root[data-theme="dark"] {
  --bg: #202020;
  --card: #202020;
  --ink: #C9CDD1;
  --accent: #EC6242;
  --selection-bg: #2200CC;
  color-scheme: dark;
}
:root { --trace-user: #7468AE; --trace-assistant: #478263; --trace-tool-call: #626DB1; --trace-tool-result: #855CA2; }
:root[data-theme="dark"] { --trace-user: #A7A7FF; --trace-assistant: #7EE787; --trace-tool-call: #A7A7FF; --trace-tool-result: #B998E4; }
:root {
  --ink-70: color-mix(in srgb, var(--ink) 70%, transparent);
  --ink-45: color-mix(in srgb, var(--ink) 45%, transparent);
  --ink-25: color-mix(in srgb, var(--ink) 25%, transparent);
  --ink-12: color-mix(in srgb, var(--ink) 12%, transparent);
  --ink-6: color-mix(in srgb, var(--ink) 6%, transparent);
}
/* Chart series retain distinct, readable hues on both brand backgrounds. */
:root { --c-dreams-max: #2200CC; --c-dreams: #EC6242; --c-hermes: #4E7D6A; --c-prime: #9C6830; --c-claude-code: #7C6AA6; --c-codex: #4F7A8C; --c-none: #8E8B84; }
:root[data-theme="dark"] { --c-dreams-max: #8D9BFF; --c-dreams: #F2876C; --c-hermes: #7FB59E; --c-prime: #D6A15E; --c-claude-code: #B0A2D8; --c-codex: #86B3C6; --c-none: #7D7A73; }
/* Provider colors match deepswe.datacurve.ai's light/dark --family-* palette. */
:root { --c-m-gpt: oklch(58% .13 155); --c-m-opus: oklch(62% .15 50); --c-m-muse: oklch(70% .15 85); --c-m-gemini: oklch(58% .17 255); --c-m-glm: oklch(62% .12 195); --c-m-kimi: oklch(60% .18 20); --c-m-grok: oklch(56% .08 265); }
:root[data-theme="dark"] { --c-m-gpt: oklch(75% .14 155); --c-m-opus: oklch(78% .14 50); --c-m-muse: oklch(82% .14 85); --c-m-gemini: oklch(74% .16 255); --c-m-glm: oklch(78% .12 195); --c-m-kimi: oklch(74% .17 20); --c-m-grok: oklch(74% .08 265); }

* { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-padding-top: 88px; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
::selection { background: var(--selection-bg); color: var(--ink); }
:focus-visible { outline: 1.5px solid var(--accent); outline-offset: 3px; }

.container { max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); width: 100%; }

/* Mono utilities */
.mono { font-family: var(--mono); }
.label { font-family: var(--mono); font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--ink-70); }
.caption { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--ink-45); }
.index { font-family: var(--mono); font-size: 11px; color: var(--ink-45); font-variant-numeric: tabular-nums; }

/* Header */
.site-header { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--ink-25); }
.site-header .container { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.wordmark { display: inline-flex; align-items: center; gap: 14px; font-size: 16px; font-weight: 500; letter-spacing: -0.01em; }
.wordmark .mark { width: 20px; height: 20px; flex: none; }
.wordmark .divider { width: 1px; height: 20px; background: var(--ink-25); }
/* Small hairline tag: "Preview" in the header, "coming soon" notes beside section headings. */
.badge { padding: 4px 7px; border: 1px solid var(--ink-25); font-family: var(--sans); font-size: 12px; font-weight: 400; line-height: 1; letter-spacing: 0; color: var(--ink-45); white-space: nowrap; }
.wordmark .badge { margin-left: -4px; }
.section-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
/* Centre tags on the heading's optical middle (between x-height and cap height), not its
   cap height: about 0.08 of the heading size lower than plain centring. */
.section-head .badge { position: relative; top: var(--badge-nudge, 0px); }
.panel .section-head, .section .section-head, .card-head { --badge-nudge: 2.5px; }
.page-head .section-head { --badge-nudge: clamp(3.3px, 0.415vw, 4.6px); }
/* The nav uses the buttons' type, so the header reads in one voice with the wordmark and CTAs. */
.site-nav { display: flex; align-items: center; gap: 28px; font-family: var(--sans); font-size: 14px; font-weight: 500; }
.site-nav a { color: var(--ink-45); }
.site-nav a[aria-current="page"] { color: var(--ink); }
.site-nav a:hover { color: var(--accent); }
.theme-toggle, .nav-toggle { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-45); background: none; border: 0; padding: 0; cursor: pointer; }
.theme-toggle:hover, .nav-toggle:hover { color: var(--accent); }
.nav-toggle { display: none; font-size: 14px; font-weight: 500; }

/* Hero: centered layout, same type as before */
.hero { position: relative; overflow: hidden; }
.hero-field { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0; transition: opacity .4s ease; }
.hero-field.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-field { transition: none; } }
.hero-inner { --title: clamp(40px, 6.4vw, 92px); position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "title tagline" "by actions"; align-items: last baseline; gap: 12px 64px; padding-block: 120px 339px; }
/* Two shared baselines at every width: the tagline's last line sits on the title's baseline, and the
   button labels on the credit's. The buttons align on their first baseline (the label), since their
   last one is the icon's bottom edge. The wrappers only group the markup; their children are the items. */
.hero-title, .hero-side { display: contents; }
/* Roobert's F carries about 0.084em of space before its stem; pull the title left by that, less the
   16px credit's own 1.2px, so the F and the b of "by" share one left edge at every size. */
.hero h1 { grid-area: title; font-size: var(--title); font-weight: 400; line-height: 0.95; letter-spacing: -0.045em; margin-left: calc(1.2px - 0.084em); }
.hero-by { grid-area: by; justify-self: start; align-self: baseline; display: inline-block; font-size: 16px; color: var(--ink-45); transition: color .15s; }
.hero-by:hover { color: var(--ink); }
/* Letta's lockup (mark + wordmark), sized so its capitals match the 16px text and dropped by
   its own descent (72 of 360 units) so the wordmark sits on the same baseline as "by". */
.hero-lockup { display: inline-block; width: 3.96em; height: 1.17em; margin-left: 0.15em; vertical-align: -0.234em; background: var(--ink); mask: url('/assets/images/letta-lockup.svg') left center / contain no-repeat; -webkit-mask: url('/assets/images/letta-lockup.svg') left center / contain no-repeat; }
.hero .tagline { grid-area: tagline; font-size: clamp(18px, 1.67vw, 24px); line-height: 1.3; letter-spacing: -0.01em; color: var(--ink-70); max-width: 15em; }
.hero .actions { grid-area: actions; align-self: baseline; display: flex; flex-wrap: wrap; gap: 10px; }
.button { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 500; line-height: 1.5; padding: 9px 14px 9px 16px; background: var(--bg); color: var(--ink); border: 1px solid var(--ink-25); }
.button.filled { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.button { transition: color .15s, background-color .15s, border-color .15s; }
.button.filled:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
:root[data-theme="dark"] .button.filled:hover { color: var(--bg); }
.button:not(.filled):hover { border-color: var(--accent); color: var(--accent); }
.button .icon { width: 16px; height: 16px; flex: none; }
.button .cursor { transform-origin: center; }
.button:hover .icon-terminal .cursor { animation: blink 1s steps(1) infinite; }
.button:hover .icon-blog .line { stroke-dasharray: 8; animation: write 1.4s ease-in-out infinite; }
.button:hover .icon-blog .l2 { animation-delay: 0.2s; }
.button:hover .icon-blog .l3 { animation-delay: 0.4s; }
/* A button for something that isn't live yet: no link, a tooltip says so on hover or focus. */
.button.soon { cursor: default; color: var(--ink-70); }
.button.soon:hover { border-color: var(--ink-25); color: var(--ink-70); }
.button.soon:hover .icon-blog .line { animation: none; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes write { 0% { stroke-dashoffset: 8; } 40%, 70% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -8; } }
@media (prefers-reduced-motion: reduce) { .button:hover .icon * { animation: none; } }


/* Pareto chart */
.card-sub { margin-top: 12px; }
.chart-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; padding: 0 12px 0 44px; }
.chart-title { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); }
.pareto-wrap { position: relative; margin-top: 12px; }
.chart-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 16px 0 0; padding: 0 12px 0 44px; list-style: none; font-size: 13px; color: var(--ink-70); }
.chart-legend li { display: inline-flex; align-items: center; gap: 8px; }
.chart-legend .swatch { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.marker-legend svg { width: 14px; height: 14px; flex: none; }
.pareto { width: 100%; height: auto; display: block; font-family: var(--sans); }
.pareto .grid { stroke: var(--ink-12); stroke-width: 1; }
.pareto .tick { font-family: var(--mono); font-size: 11px; fill: var(--ink-45); }
.pareto .axis { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; fill: var(--ink-45); }
.pareto .series-label { font-size: 13.5px; font-weight: 400; letter-spacing: -0.01em; }
.pareto .effort { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.8; }
.pareto .series { transition: opacity .15s; }
.pareto.hovering .series:not(.active) { opacity: 0.22; }
.pareto .dot { transition: r .15s; }
.pareto .dot.dominated { opacity: .45; }
.pareto .dot.active { r: 6.5; opacity: 1; }
.pareto .point-shape { transform-origin: 0 0; transition: transform .15s; }
.pareto .dot.active .point-shape { transform: scale(1.4); }
.pareto .efficiency-cue { font: 11px var(--sans); fill: var(--ink-45); }
.pareto-frontier { fill: none; pointer-events: none; }
.pareto .guide { stroke-width: 1; stroke-dasharray: 4 4; }
.pareto .guide-label { font-family: var(--mono); font-size: 11px; font-weight: 500; }
.pareto.hovering .tick { opacity: 0.6; }

/* Intro: two-column card, headline left and body right, like the Submit card */
.intro-section .intro-body { max-width: 46em; }
.intro-section .intro-body p { font-size: 17px; }
.intro-lede { font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; text-wrap: balance; }
.intro-body p { font-size: 16px; line-height: 1.6; color: var(--ink-70); }
.intro-body p + p { margin-top: 14px; }
.intro-body strong { font-weight: 500; color: var(--ink); }
.intro-body a:not(.button), .closing-card > p a { text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.intro-body a:not(.button):hover, .closing-card > p a:hover { color: var(--accent); }

/* Section cards */
.card { background: var(--card); border: 1px solid var(--ink-25); padding: 40px; margin-bottom: 20px; }
.closing { margin-bottom: 20px; }
.card-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 24px; }
/* A head's button sits on the title's optical middle like the badge, without making the head taller. */
.card-head > .button { position: relative; top: var(--badge-nudge); margin-block: -6px; }
.section-title { font-family: var(--sans); font-size: 32px; font-weight: 500; line-height: 1.15; letter-spacing: -0.02em; color: var(--ink); }
.panel { margin-bottom: 56px; }
.panel > .section-head { margin-bottom: 20px; }
/* Section subtitles and the notes under a section's card are sentences, so they're set in Roobert like the
   body; mono stays for data labels (table headers, axes, tags). */
.panel > .panel-sub { margin: -10px 0 20px; font-family: var(--sans); font-size: 15px; line-height: 1.5; color: var(--ink-70); }
.panel > .card ~ .caption { margin-top: 12px; font-family: var(--sans); font-size: 13px; line-height: 1.5; color: var(--ink-45); }
.panel > .card { margin-bottom: 0; }
.card > .table-wrap:first-child, .card > .chart-row:first-child { margin-top: 0; }
.card-head .caption { flex-basis: 100%; margin-top: 4px; }

/* Tables */
.table-wrap { overflow-x: auto; margin-top: 28px; }
table { width: 100%; border-collapse: collapse; font-family: var(--mono); font-size: 11.5px; font-variant-numeric: tabular-nums; }
th { text-align: left; font-weight: 400; font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-45); padding: 0 12px 10px 0; border-bottom: 1px solid var(--ink-12); white-space: nowrap; }
td { padding: 13px 12px 13px 0; border-bottom: 1px solid var(--ink-6); vertical-align: middle; white-space: nowrap; color: var(--ink-70); }
tr:last-child td { border-bottom: 0; }
th.num, td.num { text-align: right; padding-right: 0; padding-left: 12px; }
th:first-child, td.index:first-child { padding-right: 32px; }
.leaderboard th:not(.num), .leaderboard td:not(.num):not(.bar) { padding-right: 40px; }
/* Rank shrinks to its content, so stacked boards start their name columns on one line. */
.leaderboard th:first-child, .leaderboard td.index { width: 1%; }
.leaderboard th.num, .leaderboard td.num { padding-left: 32px; }
td.wide { white-space: normal; min-width: 12em; }
.entry-name { display: block; font-family: var(--sans); font-size: 14.5px; color: var(--ink); letter-spacing: -0.01em; }
.entry-name[data-tip] { display: inline; text-decoration: underline dotted var(--ink-25); text-decoration-thickness: 1px; text-underline-offset: 5px; cursor: default; outline: none; }
.entry-name[data-tip]:hover, .entry-name[data-tip]:focus-visible { text-decoration-color: var(--ink-70); }
.model-hover { text-decoration: underline dotted var(--ink-25); text-underline-offset: 4px; cursor: default; }
.model-hover:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.entry-sub { display: block; font-size: 10.5px; color: var(--ink-45); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.08em; }
.score { color: var(--ink); font-weight: 500; font-size: 13px; }
.effort-tag { color: var(--ink-45); font-size: 11px; }
.score-cell { width: 1%; }
tr.control td { border-top: 1px solid var(--ink-12); }
tr.control .entry-name { color: var(--ink-70); }
.best { color: var(--ink); font-weight: 500; }

/* Inline bar with 20% gridlines */
td.bar { width: 40%; min-width: 220px; padding-left: 16px; }
.bar-track { position: relative; height: 20px; background-image: repeating-linear-gradient(to right, var(--ink-6) 0 1px, transparent 1px 20%); }
.bar-track::after { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: var(--ink-6); }
.bar-fill { position: absolute; top: 6px; height: 8px; background: var(--ink-25); opacity: .55; }
.bar-axis { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono); font-size: 10px; color: var(--ink-25); }

/* Pills */
.pills { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pill { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 8px; border: 1px solid var(--ink-25); color: var(--ink-70); white-space: nowrap; }

/* Task grid */
.page-head { padding: 88px 0 40px; }
.page-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.page-head h1 { font-size: clamp(40px, 5vw, 56px); line-height: 1; letter-spacing: -0.03em; }
.page-head p { margin-top: 16px; color: var(--ink-70); max-width: 34em; font-size: 17px; }
.page-head .caption { margin-top: 12px; font-size: 11px; }
.task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 14px; margin: 32px 0 96px; }
/* Task cards follow the outline buttons: a neutral border at rest that takes the accent on hover. */
.task-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 20px; border: 1px solid var(--ink-25); background: var(--card); min-width: 0; transition: border-color .15s; }
.task-card:hover, .task-card:focus-visible { border-color: var(--accent); }
.task-card .meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.task-card h3 { font-size: 17px; font-weight: 500; line-height: 1.3; letter-spacing: -0.01em; }
.task-card p { font-size: 14px; line-height: 1.5; color: var(--ink-70); }
.highlights-section { padding: 16px 0 8px; margin-bottom: 20px; }
.highlights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-top: 24px; }
.highlight { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 18px 14px 30px; border: 1px solid var(--ink-25); background: var(--card); transition: border-color .15s; }
.highlight:hover, .highlight:focus-visible { border-color: var(--accent); }
.highlight-head, .highlight p { margin-inline: 8px; }
.highlight-head { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.highlight-head .pill { align-self: flex-start; }
.highlight-title { font-size: 18px; font-weight: 400; line-height: 1.3; color: var(--ink); }
.highlight p { font-size: 15.5px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }

/* About FrontierMemory: two panels following one detail, drawn in the accent colour */
.how-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; counter-reset: step; }
.how-steps li { counter-increment: step; }
.how-figure { position: relative; border: 1px solid var(--ink-25); background: var(--bg); }
.how-figure::before { content: counter(step, decimal-leading-zero); position: absolute; left: 12px; top: 10px; font-family: var(--mono); font-size: 10.5px; color: var(--ink-45); }
.how-figure svg { display: block; width: 100%; height: auto; }
.how-steps p { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--ink-70); text-wrap: pretty; }
.s-paper { fill: var(--card); stroke: var(--ink-12); }
.s-line { fill: var(--ink-25); }
.s-head { fill: var(--ink-45); }
.s-key, .s-key-fill { fill: var(--accent); }
.s-arrow { fill: none; stroke: var(--ink-45); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.s-pass { fill: var(--ink); }
.s-tick { fill: none; stroke: var(--card); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Task sources: one field of trajectory squares, tinted by benchmark, solved in solid ink. The text starts under
   the heading, as in every section, rather than centred on the taller field; the field drops 3px so its first row
   of squares (inset 4px by its padding) lines up with the capitals of the text's first line. */
.sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: start; }
.sources-figure { display: grid; place-items: center; margin-top: 3px; }
/* 21 equal columns that fill the figure, up to 16px squares; never wider than its column. */
.field { display: grid; gap: 6px; padding: 4px; width: 100%; max-width: 464px; }
.field i { display: block; width: 100%; aspect-ratio: 1; border: 1px solid var(--ink-25); }
.field i { cursor: default; transition: opacity .25s; }
[data-source="1"] { --fill: var(--ink-25); }
[data-source="2"] { --fill: var(--ink-12); }
[data-source="3"] { --fill: var(--ink-6); }
.field i { background: var(--fill); }
.field i[data-solved] { background: var(--ink); border-color: var(--ink); }
.field.focus i:not(.on) { opacity: 0.55; }
.field.intro i { animation: dot-in .5s cubic-bezier(.2, .7, .3, 1) both; animation-delay: calc((var(--x) + var(--y)) * 22ms); }
@keyframes dot-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .field.intro i { animation: none; } }

/* Questions and answers */
.faq-list { max-width: 46em; }
.faq details { border-top: 1px solid var(--ink-12); }
.faq details:last-child { border-bottom: 1px solid var(--ink-12); }
.faq summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 18px 0; font-size: 16px; line-height: 1.4; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--ink-45); }
.faq details[open] summary::after { content: "−"; }
.faq summary:hover, .faq summary:hover::after { color: var(--accent); }
.faq .intro-body { padding-bottom: 20px; }
.faq .intro-body p { font-size: 15px; }

/* Narrow reading pages */
.narrow { max-width: 680px; margin-inline: auto; padding: 88px 0 120px; }
.narrow h1 { font-size: clamp(34px, 4.5vw, 46px); line-height: 1.05; letter-spacing: -0.03em; }
.lede { margin-top: 20px; font-size: 18px; line-height: 1.45; color: var(--ink-70); }
.prose { margin-top: 28px; font-size: 16.5px; line-height: 1.6; }
.prose > * + * { margin-top: 1em; }
.prose h2 { font-size: 22px; font-weight: 500; letter-spacing: -0.01em; margin-top: 2em; }
.prose h3 { font-size: 17px; font-weight: 500; margin-top: 1.6em; }
.prose a { text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.prose a:hover { color: var(--accent); text-decoration-color: currentColor; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li + li { margin-top: 0.4em; }
.prose code { font-family: var(--mono); font-size: 0.85em; background: var(--ink-6); padding: 0.1em 0.35em; }
.prose pre { font-family: var(--mono); font-size: 13px; line-height: 1.55; overflow-x: auto; padding: 16px 20px; background: var(--card); border: 1px solid var(--ink-25); }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: 1px solid var(--ink-12); margin: 2.5em 0; }
.prose blockquote { margin: 0; padding-left: 1em; border-left: 2px solid var(--ink-12); color: var(--ink-70); }
.prose table { font-size: 13px; }
.prose th, .prose td { white-space: normal; }
.pager { display: flex; justify-content: space-between; margin-bottom: 48px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.pager a { color: var(--ink-45); }
.pager a:hover { color: var(--accent); }
.kv { display: grid; grid-template-columns: max-content 1fr; gap: 12px 28px; font-family: var(--mono); font-size: 12.5px; margin-top: 24px; }
.kv dt { color: var(--ink-45); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; padding-top: 2px; }
.kv dd { color: var(--ink-70); overflow-wrap: anywhere; }
.kv dd a:hover { color: var(--accent); }
.instruction { margin-top: 20px; padding: 28px 32px; border: 1px solid var(--ink-25); background: var(--card); font-size: 15.5px; }
.notice { margin-top: 20px; padding: 14px 18px; border: 1px solid var(--ink-25); background: var(--card); font-size: 14px; line-height: 1.55; color: var(--ink-70); }

/* Task results and information tabs */
.task-page, .trace-page { padding-top: 64px; padding-bottom: 100px; }
.task-page .pager, .trace-page .pager { margin-bottom: 44px; }
.task-header { max-width: 780px; margin-bottom: 42px; }
.trace-header { margin-bottom: 42px; }
.task-meta-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.task-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.task-meta-row .task-tags { margin-top: 0; }
.task-header h1, .trace-header h1 { font-size: clamp(34px, 4vw, 48px); line-height: 1.1; letter-spacing: -0.025em; margin-top: 12px; }
.task-header h1 { margin-top: 0; font-size: clamp(40px, 5vw, 56px); line-height: 1; letter-spacing: -0.03em; }
.task-header > p, .trace-header > p { font-size: 18px; line-height: 1.5; color: var(--ink-70); margin-top: 16px; }
.trace-header > .trace-model-line { font-size: 21px; color: var(--ink); margin-top: 14px; }
.trace-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin-top: 14px; }
.trace-outcome { display: inline-block; padding: 4px 9px; border-radius: 4px; font: 11px var(--mono); text-transform: capitalize; }
.trace-links .source-link { margin-top: 0; }
.trace-outcome.pass { color: #2A7649; background: color-mix(in srgb, #2A7649 12%, transparent); }
.trace-outcome.fail { color: #B44736; background: color-mix(in srgb, #B44736 12%, transparent); }
.trace-outcome.unscored { color: var(--ink-70); background: var(--ink-6); }
:root[data-theme="dark"] .trace-outcome.pass { color: #7EE787; }
:root[data-theme="dark"] .trace-outcome.fail { color: #F2876C; }
.source-link { display: inline-block; margin-top: 14px; font: 11px var(--mono); color: var(--ink-70); text-decoration: underline; text-underline-offset: 3px; }
.source-link:hover { color: var(--accent); }
.trace-header > .source-link + .source-link { margin-left: 14px; }
.task-results { margin-bottom: 48px; }
.task-results h2, .detail-prose h2 { font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; }
.results-table, .source-table { min-width: 600px; }
.results-more { display: block; margin: 12px 0; padding: 6px 10px; border: 1px solid var(--ink-25); background: none; color: var(--ink-70); font: 12px var(--sans); cursor: pointer; }
.results-more:hover { border-color: var(--ink-70); color: var(--ink); background: var(--ink-6); }
.results-table { table-layout: fixed; }
.results-table th:nth-child(1) { width: 23%; }
.results-table th:nth-child(2) { width: 27%; }
.results-table th:nth-child(3) { width: 12%; }
.results-table th:nth-child(4), .results-table th:nth-child(5) { width: 14%; }
.results-table th:nth-child(6) { width: 10%; }
.results-table[data-memory-models] { min-width: 1100px; }
.results-table[data-memory-models] th:nth-child(1) { width: 16%; }
.results-table[data-memory-models] th:nth-child(2) { width: 20%; }
.results-table[data-memory-models] th:nth-child(3) { width: 18%; }
.results-table[data-memory-models] th:nth-child(4),
.results-table[data-memory-models] th:nth-child(5),
.results-table[data-memory-models] th:nth-child(6) { width: 12%; }
.results-table[data-memory-models] th:nth-child(7) { width: 10%; }
/* Both task tables inset their first and last columns so a hovered row's fill clears the text. */
.results-table th:first-child, .results-table td:first-child, .source-table th:first-child, .source-table td:first-child { padding-left: 16px; }
.results-table th:last-child, .results-table td:last-child, .source-table th:last-child, .source-table td:last-child { padding-right: 16px; }
.results-table td.run-name:first-child { padding-left: 28px; }
.results-table .result-summary td { border-bottom: 1px solid var(--ink-12); }
.result-summary, .source-table .linked-row { cursor: pointer; }
.result-summary:hover, .linked-row:hover { background: var(--ink-6); }
.result-toggle { border: 0; padding: 4px 0; background: none; color: var(--ink); font: inherit; cursor: pointer; text-align: left; }
.result-toggle:hover, .result-toggle[aria-expanded="true"] { text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 4px; }
/* Baseline-align on the text, not the mark, so following tags like (max) line up in every row. */
.brand-label { display: inline-flex; align-items: baseline; gap: 8px; color: var(--ink); }
.brand-label svg { width: 14px; height: 14px; flex: none; align-self: center; color: var(--ink-45); }
.harness-hover { display: inline-flex; cursor: pointer; }
.harness-hover:focus-visible { outline: 1px solid var(--accent); outline-offset: 3px; }
.result-runs td { padding-block: 10px; border-bottom: 1px solid var(--ink-6); color: var(--ink-45); }
.result-runs[hidden], [role="tabpanel"][hidden] { display: none; }
.run-name { padding-left: 20px; }
.run-name a, .source-table a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.run-name a:hover, .source-table a:hover { color: var(--accent); }

.detail-tabs { border: 1px solid var(--ink-25); background: var(--card); overflow: hidden; }
.tab-list { display: flex; gap: 28px; padding-inline: 28px; border-bottom: 1px solid var(--ink-25); overflow-x: auto; }
.tab-list button { flex: none; padding: 16px 0 14px; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--ink-45); font: 12px var(--mono); cursor: pointer; white-space: nowrap; }
.tab-list button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--accent); }
.tab-list button:hover { color: var(--ink); }
.tab-list button:focus-visible { outline: 1px solid var(--accent); outline-offset: -4px; }
.results-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.results-header h2 { margin: 0; }
.results-subheader { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: -10px 0 20px; }
.results-subheader > .caption { margin: 0; color: var(--ink-70); font: 15px/1.5 var(--sans); }
.results-switch { display: inline-flex; flex: none; border: 1px solid var(--ink-25); }
.results-switch button { padding: 7px 11px; border: 0; background: none; color: var(--ink-45); font: 11px/1.2 var(--mono); text-transform: uppercase; cursor: pointer; }
.results-switch button + button { border-left: 1px solid var(--ink-25); }
.results-switch button[aria-selected="true"] { color: var(--ink); background: var(--ink-6); }
.results-switch button:hover { color: var(--ink); }
.results-switch button:focus-visible { outline: 1px solid var(--accent); outline-offset: -3px; }
.pareto-options { display: flex; flex: none; align-items: center; gap: 4px; color: var(--ink-45); font: 12px var(--sans); }
.pareto-options[hidden] { display: flex; visibility: hidden; pointer-events: none; }
.compare-menu { position: relative; }
.compare-trigger { display: inline-flex; min-width: 92px; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 5px; border: 0; background: none; color: var(--ink); font: inherit; cursor: pointer; }
.compare-trigger:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }
.compare-trigger svg { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.compare-menu [role="listbox"] { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; min-width: 150px; margin: 0; padding: 4px 0; border: 1px solid var(--ink-25); background: var(--bg); box-shadow: 0 8px 24px rgba(0, 0, 0, .08); list-style: none; font: 13px/1.4 var(--sans); }
.compare-menu [role="listbox"][hidden] { display: none; }
.compare-menu [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 8px 12px; color: var(--ink-70); cursor: pointer; white-space: nowrap; outline: none; }
.compare-menu [role="option"]:hover, .compare-menu [role="option"]:focus { background: var(--ink-6); color: var(--ink); }
.compare-menu [role="option"][aria-selected="true"] { color: var(--ink); }
.compare-menu [role="option"][aria-selected="true"]::after { content: ""; width: 8px; height: 4px; margin-bottom: 3px; border-left: 1.4px solid currentColor; border-bottom: 1.4px solid currentColor; transform: rotate(-45deg); }

/* Keep the shared top edge fixed, but let only the active view determine card height. */
.results-views > [role="tabpanel"][hidden], .pareto-views > [data-pareto-panel][hidden] { display: none; }
.results-card .table-wrap { margin-top: 0; }
.results-card .panel > .caption { margin-top: 12px; font: 13px/1.5 var(--sans); color: var(--ink-45); }
.results-tabs .panel { margin-bottom: 0; }
.unified-leaderboard td.wide { min-width: 10em; }
.unified-leaderboard td.bar { width: 30%; min-width: 150px; }
.tab-list .trace-toggle { position: relative; display: grid; grid-template-columns: 1fr 1fr; margin-left: auto; align-self: center; min-width: 126px; padding: 3px; border: 1px solid var(--ink-25); background: var(--ink-6); color: var(--ink-45); overflow: hidden; }
.trace-toggle::before { content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 2); background: var(--card); box-shadow: 0 1px 4px var(--ink-12); transition: transform .2s ease; }
.trace-toggle[aria-checked="true"]::before { transform: translateX(100%); }
.trace-toggle span { position: relative; z-index: 1; padding: 3px 5px; font-size: 10px; text-align: center; }
.trace-toggle[aria-checked="false"] span:first-child, .trace-toggle[aria-checked="true"] span:last-child { color: var(--ink); }
.tab-list .trace-toggle[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .trace-toggle::before { transition: none; } }
.detail-tabs [role="tabpanel"] { padding: 32px 28px 40px; }
.detail-prose > p { max-width: 70ch; margin-top: 12px; color: var(--ink-70); }
.detail-prose > p.modification-copy { max-width: none; }
.detail-prose > h2:not(:first-child) { margin-top: 42px; }
.detail-prose .instruction { background: var(--bg); }
.detail-prose .instruction pre { background: var(--ink-6); }
.overview-copy > .source-link { margin-top: 0; }
.overview-section { margin-top: 28px; }
.overview-section h2 { font-size: 20px; line-height: 1.3; letter-spacing: -0.01em; }
.overview-section p { margin-top: 8px; color: var(--ink-70); font-size: 16px; line-height: 1.55; }
.overview-disclosures { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: 10px; margin-top: 28px; }
.overview-disclosure { min-width: 0; border: 1px solid var(--ink-25); background: var(--bg); }
.overview-disclosure summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; color: var(--ink); font: 12px var(--mono); cursor: pointer; list-style: none; }
.overview-disclosure summary::-webkit-details-marker { display: none; }
.overview-disclosure summary::after { content: '+'; color: var(--ink-45); font-size: 14px; }
.overview-disclosure[open] summary::after { content: '−'; }
.overview-disclosure-body { padding: 20px 22px; border-top: 1px solid var(--ink-12); }
.overview-disclosure-body .instruction { margin: 0; padding: 0; border: 0; background: none; max-height: 70vh; overflow: auto; }
.overview-disclosure-body .instruction > :first-child { margin-top: 0; }
.workspace-context { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.workspace-context > :first-child { margin-top: 0; }
.workspace-context table { display: block; overflow-x: auto; }
.workspace-context blockquote { margin-top: 12px; }
.workspace-context blockquote > * + * { margin-top: 0.7em; }
.workspace-context blockquote ul { margin-top: 0.7em; }
.overview-disclosure-body ul { margin: 0; padding-left: 18px; color: var(--ink-70); font-size: 14px; line-height: 1.6; }
.overview-evidence { display: grid; gap: 14px; }
.overview-evidence .overview-evidence-lead { color: var(--ink); font-size: 15.5px; line-height: 1.5; }
.overview-evidence section + section { padding-top: 14px; border-top: 1px solid var(--ink-12); }
.overview-evidence p { margin-top: 6px; color: var(--ink-70); font-size: 14px; line-height: 1.55; }
.overview-evidence pre { margin: 8px 0 0; padding: 12px 14px; background: var(--ink-6); color: var(--ink-70); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); }
.overview-evidence > .source-link { justify-self: start; margin-top: 0; }
.overview-message-group { display: grid; gap: 10px; margin-top: 8px; }
.overview-message-group pre { margin-top: 5px; }
.failure-excerpt { display: grid; gap: 9px; }
.failure-excerpt .source-link { justify-self: start; margin-top: 0; }
.failure-excerpt .failure-context { margin-bottom: 6px; color: var(--ink-70); font-size: 14px; line-height: 1.55; }
.failure-excerpt .source-feedback { margin: 0 0 12px; color: var(--ink-70); font-size: 14px; line-height: 1.55; }
.failure-excerpt pre { margin: 0 0 12px; padding: 14px; max-height: 240px; overflow: auto; background: var(--ink-6); color: var(--ink-70); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); }

/* Actor and source trace pages */
.trace-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 40px; }
.trace-metric { padding: 16px; min-width: 0; border: 1px solid var(--ink-25); background: var(--card); }
.trace-metric dt { font-family: var(--mono); font-size: 10px; color: var(--ink-45); text-transform: uppercase; letter-spacing: 0.08em; }
.trace-metric dd { font-size: 21px; margin-top: 8px; overflow-wrap: anywhere; }
.trace-metric .trace-outcome { padding: 5px 9px; font-size: 14px; }
.trace-step, .compact-message { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 14px 12px; border-top: 1px solid var(--ink-12); border-left: 3px solid transparent; }
.trace-step.role-user, .compact-message.role-user { border-left-color: var(--trace-user); }
.trace-step.role-assistant, .compact-message.role-assistant { border-left-color: var(--trace-assistant); }
.trace-role { color: var(--ink-45); font: 11px/1.6 var(--mono); text-align: left; }
.trace-role strong, .trace-role .index { display: block; }
.trace-role strong { font-weight: 600; }
.trace-role .index { margin-top: 4px; text-align: left; }
.role-user .trace-role strong { color: var(--trace-user); }
.role-assistant .trace-role strong { color: var(--trace-assistant); }
.trace-step-body { min-width: 0; }
.trace-step-body section + section { margin-top: 14px; }
.trace-step-body h3 { font: 11px var(--mono); color: var(--ink-45); margin-bottom: 6px; }
.trace-step-body pre { margin: 0; padding: 0; color: var(--ink-70); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); }
.trace-step-body .reasoning-section { margin-left: 16px; padding-top: 10px; border-top: 1px solid var(--ink-12); }
.trace-step-body .reasoning-section pre { color: color-mix(in srgb, var(--ink) 60%, transparent); }
.trace-tool { overflow: hidden; border: 1px solid var(--ink-25); background: var(--bg); }
.trace-tool.call { border-left: 3px solid var(--trace-tool-call); }
.trace-tool.result { border-left: 3px solid var(--trace-tool-result); }
.trace-tool-heading { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--ink-12); background: var(--ink-6); color: var(--ink-45); font: 10px var(--mono); text-transform: uppercase; }
.trace-tool-heading strong { color: var(--trace-tool-call); font-size: 11px; font-weight: 500; text-transform: none; }
.trace-step-body .trace-tool pre { max-height: 520px; padding: 12px; overflow: auto; color: var(--ink-70); }
.trace-full-view[hidden], .trace-compact-view[hidden] { display: none; }
.memory-browser { display: grid; grid-template-columns: minmax(190px, 28%) minmax(0, 1fr); min-height: 500px; margin-top: 22px; border: 1px solid var(--ink-25); }
.dream-page .memory-browser { margin-top: 0; }
.dream-page .memory-page-title { font-size: clamp(28px, 3vw, 38px); line-height: 1.18; }
.memory-page-title span { color: var(--ink-70); }
.memory-tree { overflow: auto; max-height: 78vh; padding: 14px; border-right: 1px solid var(--ink-25); font: 12px/1.6 var(--mono); }
.memory-tree ul { list-style: none; padding-left: 14px; margin: 0; }
.memory-tree > ul { padding-left: 0; }
.memory-tree summary { cursor: pointer; padding: 5px 4px; color: var(--ink-70); }
.memory-file { width: 100%; padding: 5px 8px; border: 0; background: none; color: var(--ink-70); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
.memory-file:hover, .memory-file[aria-pressed="true"] { color: var(--ink); background: var(--ink-6); }
.memory-file[aria-pressed="true"] { border-left: 2px solid var(--accent); }
.memory-preview { min-width: 0; max-height: 78vh; overflow: auto; }
.memory-preview article[hidden] { display: none; }
.memory-preview article > h2 { position: sticky; top: 0; margin: 0; padding: 14px 18px; border-bottom: 1px solid var(--ink-25); background: var(--card); font: 12px var(--mono); overflow-wrap: anywhere; }
.memory-markdown { margin: 0; padding: 18px; color: var(--ink-70); font-size: 14px; overflow-wrap: anywhere; }
.memory-markdown h1 { font-size: 24px; line-height: 1.2; color: var(--ink); }
.memory-markdown h2 { margin-top: 1.5em; color: var(--ink); }
.memory-markdown pre { white-space: pre; overflow: auto; }
.memory-markdown table { display: block; overflow-x: auto; border-collapse: collapse; }
.memory-markdown th, .memory-markdown td { padding: 6px 10px; border: 1px solid var(--ink-25); }
.leaderboard a.entry-name { color: var(--ink); text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.leaderboard a.entry-name:hover { color: var(--accent); }
.dream-memory-section { padding: 28px; }
.compact-message-body { display: grid; min-width: 0; gap: 8px; }
.compact-message-body pre { margin: 0; color: var(--ink-70); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); }
.compact-message-body .tool-summary-line { color: var(--ink-45); font: italic 11px var(--mono); }
.grader-output { max-height: 75vh; overflow: auto; margin: 0; padding: 18px; border: 1px solid var(--ink-25); background: var(--bg); color: var(--ink-70); white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.55 var(--mono); }
.grader-output.pass { border-color: #2A7649; }
.grader-output.fail { border-color: #B44736; }
:root[data-theme="dark"] .grader-output.pass { border-color: #7EE787; }
:root[data-theme="dark"] .grader-output.fail { border-color: #F2876C; }

/* Tooltip: one shared element, positioned by site.js above its anchor */
.tip { position: fixed; z-index: 20; max-width: min(420px, calc(100vw - 16px)); width: max-content; padding: 9px 12px 10px; background: var(--bg); border: 1px solid var(--ink-25); box-shadow: 0 6px 24px color-mix(in srgb, #000 14%, transparent); font-family: var(--sans); font-size: 13.5px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); pointer-events: none; opacity: 0; transform: translateY(3px); transition: opacity .12s, transform .12s; }
.tip.visible { opacity: 1; transform: none; }
.tip .tip-meta { margin-left: 8px; color: var(--ink-70); }
.tip .tip-sub { display: block; margin-top: 4px; font-family: var(--mono); font-size: 11px; color: var(--ink-45); }

/* Closing row: Submit and the sign-up side by side, each headline, a sentence and an action */
.closing { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.closing-card { display: flex; flex-direction: column; margin-bottom: 0; }
.closing-card h2 { font-size: 28px; font-weight: 500; line-height: 1.2; letter-spacing: -0.02em; }
.closing-card > p { margin-top: 12px; max-width: 34em; font-size: 15.5px; line-height: 1.55; color: var(--ink-70); }
.closing-action { margin-top: auto; padding-top: 28px; }
.signup-form { display: flex; gap: 10px; width: 100%; max-width: 440px; }
.signup-form input { flex: 1; min-width: 0; font-family: var(--sans); font-size: 14px; line-height: 1.5; padding: 9px 14px; border: 1px solid var(--ink-25); background: var(--bg); color: var(--ink); transition: border-color .15s; }
.signup-form input::placeholder { color: var(--ink-45); }
.signup-form input:focus { border-color: var(--accent); }
.signup-form .button { cursor: pointer; }
.signup-form .button:disabled { opacity: 0.6; cursor: default; }
.button:hover .icon-arrow { transform: translateX(2px); }
.icon-arrow { transition: transform .15s; }
.signup-status { min-height: 1.5em; margin-top: 10px; font-family: var(--mono); font-size: 11.5px; color: var(--ink-45); }
.signup-status:empty { min-height: 0; margin-top: 0; }
.signup-status a { color: var(--ink-70); text-decoration: underline; text-decoration-color: var(--ink-25); text-underline-offset: 3px; }
.signup-status a:hover { color: var(--accent); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Footer */
.site-footer { margin-top: 64px; border-top: 1px solid var(--ink-12); }
.site-footer .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-block: 36px 40px; font-size: 14px; color: var(--ink-45); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; }
.footer-links a + a::before { content: ""; display: inline-block; width: 2px; height: 2px; background: var(--ink-25); margin: 0 12px; vertical-align: middle; }
.footer-links a:hover { color: var(--accent); }

/* Home sections follow one rule: the title sits on the page above its content, boxes hold only
   objects (table, chart, diagrams, cards), and every section is the same distance from the next. */
.home-sections > * { margin-top: 0; margin-bottom: 0; }
.home-sections > * + * { margin-top: 96px; }
.home-sections > .highlights-section { padding: 0; }
.section > .section-head { margin-bottom: 20px; }
.section > .how-steps { margin-top: 0; }

@media (max-width: 900px) {
  .sources, .closing { grid-template-columns: 1fr; }
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "title" "by" "tagline" "actions"; row-gap: 0; padding-block: 80px 206px; }
  .hero-by { margin-top: 20px; }
  .task-grid, .highlights { grid-template-columns: 1fr 1fr; }
  .trace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card { padding: 28px 24px; }
}
@media (max-width: 640px) {
  .home-sections > * + * { margin-top: 64px; }
  :root { --gutter: 16px; }
  .site-nav { position: absolute; top: 64px; left: 0; right: 0; flex-direction: column; align-items: flex-end; gap: 22px; padding: 20px var(--gutter) 32px; background: var(--bg); border-bottom: 1px solid var(--ink-12); display: none; }
  .site-header[data-open="true"] .site-nav { display: flex; }
  .nav-toggle { display: inline-block; }
  .chart-row { flex-direction: column; align-items: flex-start; gap: 12px; padding: 0; }
  .chart-legend { padding: 0; }
  .results-tabs .pareto-wrap { overflow-x: auto; }
  .results-tabs .pareto { min-width: 720px; }
  .task-grid, .highlights { grid-template-columns: 1fr; }
  .how-steps { grid-template-columns: 1fr; }
  .hero .tagline { margin-top: 40px; font-size: 20px; }
  .hero .actions { margin-top: 20px; }
  .field { gap: 4px; padding: 2px; }
  .signup-form { flex-direction: column; }
  .signup-form .button { justify-content: center; }
  td.bar, th.bar, .bar-axis { display: none; }
  .leaderboard th:first-child, .leaderboard td.index { display: none; }
  .leaderboard th:not(.num), .leaderboard td:not(.num):not(.bar) { padding-right: 12px; white-space: normal; }
  .leaderboard td.wide { min-width: 0; }
  .leaderboard th { font-size: 9px; letter-spacing: 0.08em; }
  .leaderboard .score-cell { white-space: nowrap !important; padding-right: 0 !important; }
  .task-page, .trace-page { padding-top: 42px; }
  .trace-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tab-list { padding-inline: 18px; gap: 20px; }
  .detail-tabs [role="tabpanel"] { padding: 24px 18px 32px; }
  .detail-prose .instruction { padding: 20px; }
  .trace-step, .compact-message { grid-template-columns: 68px minmax(0, 1fr); gap: 8px; }
  .memory-browser { grid-template-columns: minmax(0, 1fr); }
  .memory-tree { max-height: 260px; border-right: 0; border-bottom: 1px solid var(--ink-25); }
  .memory-preview { max-height: 65vh; }
  .dream-memory-section { padding: 18px; }
}

/* Blog post: one 680px reading column, set like letta.com research posts for long reading: near-black
   17/27 Roobert with slight negative tracking, 23px between paragraphs, 23px and 18px headings, links in
   the text colour with a half-strength underline. Figures break out to 960px where there is room; a sticky
   contents list sits in the left margin on wide screens; draft notes and TBD values read as unfinished. */
.post { max-width: 680px; margin-inline: auto; padding: 96px var(--gutter) 128px; box-sizing: content-box; }
.post-header { padding-bottom: 40px; border-bottom: 1px solid var(--ink-12); }
/* The title pulls left by its F's side bearing so its stem lines up with the dek and body. */
.post-header h1 { margin-left: -0.084em; font-size: clamp(40px, 5vw, 60px); font-weight: 400; line-height: 1; letter-spacing: -0.04em; }
.post-dek { margin-top: 20px; max-width: 30em; text-wrap: balance; font-size: 21px; line-height: 1.4; letter-spacing: -0.01em; color: var(--ink-70); }
.post-byline { margin-top: 24px; font-size: 14px; color: var(--ink-45); }
.post-layout { position: relative; }
.post .post-body { margin-top: 40px; font-size: 17px; line-height: 27px; letter-spacing: -0.011em; color: color-mix(in srgb, var(--ink) 95%, transparent); }
.post .post-body > * + * { margin-top: 23px; }
.post .post-body h2 { margin-top: 50px; font-size: 23px; font-weight: 500; line-height: 32px; letter-spacing: -0.015em; color: var(--ink); }
.post .post-body h3 { margin-top: 40px; font-size: 18px; font-weight: 500; line-height: 26px; letter-spacing: -0.011em; color: var(--ink); }
.post .post-body h2 + * { margin-top: 19px; }
.post .post-body h3 + * { margin-top: 12px; }
.post .post-body strong { font-weight: 500; color: var(--ink); }
.post .post-body a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ink) 48%, transparent); text-decoration-thickness: 1px; text-underline-offset: 4px; transition: color .15s, text-decoration-color .15s; }
.post .post-body a:hover { color: var(--accent); text-decoration-color: currentColor; }
.post .post-body li + li { margin-top: 8px; }
.post .post-body li::marker { color: var(--ink-45); }
.post .post-body mark.tbd { padding: 0 3px; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--ink); }
.post .post-body .post-figure { width: min(960px, 100vw - 2 * var(--gutter)); margin-block: 48px; margin-left: 50%; translate: -50% 0; line-height: 1.5; letter-spacing: 0; }
.post-figure .card { margin: 0; padding: 28px 24px 16px; }
.post-figure figcaption { margin-top: 12px; font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--ink-45); }
/* Paired panels inside a figure: side by side, each titled; half-width charts set their text a little larger so it
   stays legible at the smaller scale. */
/* A figure's legend leads its card and lines up with the panel titles below it. Figures keep the charts' own
   leading and tracking, and the legend's items sit in one row rather than taking the post's list spacing. */
.post-figure .chart-legend { margin-top: 0; padding: 0; }
.post .post-body .chart-legend li + li { margin-top: 0; }
.post-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; margin-top: 16px; }
.post .post-body .post-panel-title { margin: 0 0 6px; font-size: 14px; line-height: 1.4; letter-spacing: 0; color: var(--ink); }
.post-panel .pareto .tick { font-size: 13px; }
.post-panel .pareto .axis { font-size: 11.5px; }
.post .post-body .post-chart-title { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: 0; color: var(--ink); }
.post .post-body .post-chart-subtitle { margin: 8px 0 24px; font-size: 13px; line-height: 1.5; letter-spacing: 0; color: var(--ink-45); }
.harness-bar-plot { display: block; width: 100%; height: auto; font-family: var(--sans); }
.harness-bar-plot .grid { stroke: var(--ink-12); stroke-width: 1; }
.harness-bar-plot .tick { font: 11px var(--mono); fill: var(--ink-45); }
.harness-bar-plot .axis { font: 10px var(--mono); letter-spacing: .06em; fill: var(--ink-45); }
.harness-bar-plot .bar-name { font-size: 14px; fill: var(--ink); }
.harness-bar-plot .bar-sub { font-size: 11px; fill: var(--ink-45); }
.harness-bar-plot .bar-value { font: 13px var(--mono); fill: var(--ink); }
.post .post-body .draft-note { padding: 14px 18px; border: 1px dashed var(--ink-25); font-size: 14px; line-height: 1.6; letter-spacing: 0; color: var(--ink-45); }
.draft-note > * + * { margin-top: 6px; }
.draft-note ul { padding-left: 1.2em; }
/* Contents, as on letta.com research posts: the section headings, sticky in the left margin 80px clear of the text.
   The section being read is full ink with an accent square beside it, centred between the x-height and cap height.
   Figures break out into the margin, so the list fades out while one passes it. */
.post-toc { position: absolute; top: 40px; bottom: 0; right: calc(100% + 80px); width: 180px; display: none; }
.post-toc ol { position: sticky; top: 104px; margin: 0; padding: 0 0 0 20px; list-style: none; transition: opacity .18s ease-in-out, visibility 0s linear; }
.post-toc.is-collision-hidden ol { opacity: 0; visibility: hidden; transition: opacity .18s ease-in-out, visibility 0s linear .18s; }
.post-toc li + li { margin-top: 12px; }
.post-toc a { position: relative; display: block; font-size: 13px; line-height: 18px; color: var(--ink-45); transition: color .15s; }
.post-toc a:hover, .post-toc a[aria-current="true"] { color: var(--ink); }
.post-toc a[aria-current="true"]::before { content: ""; position: absolute; left: -20px; top: 7px; width: 6px; height: 6px; background: var(--accent); }
@media (min-width: 1280px) { .post-toc { display: block; } }
/* Citation, as on letta.com research posts: a bordered box with a copy button over the BibTeX entry. */
.post-cite { margin-top: 72px; border: 1px solid var(--ink-25); background: var(--card); }
.post-cite-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--ink-25); }
.post-cite-head h2 { font-size: 13px; font-weight: 400; color: var(--ink-45); }
.post-cite-copy { padding: 0; border: 0; background: none; font: 13px var(--sans); color: var(--ink-45); cursor: pointer; transition: color .15s; }
.post-cite-copy:hover { color: var(--accent); }
.post-cite pre { margin: 0; padding: 16px; white-space: pre-wrap; overflow-wrap: anywhere; font: 12.5px/21px var(--mono); color: color-mix(in srgb, var(--ink) 80%, transparent); }
@media (max-width: 720px) {
  .post { padding-top: 56px; }
  .post-panels { grid-template-columns: 1fr; }
}

/* Launch post results and native task disclosures use the site's own type. */
.post-results table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; }
.post-results caption { text-align: left; font-size: 17px; font-weight: 500; padding-bottom: 16px; }
.post-results th, .post-results td { padding: 12px 16px; border-bottom: 1px solid var(--ink-12); text-align: right; }
.post-results th:first-child { text-align: left; }
.post-results thead th { font-size: 12px; font-weight: 400; color: var(--ink-70); }
.post-results tbody th { font-weight: 400; }
.post-results td { font-family: var(--mono); }
.post-results td:nth-child(2) { font-weight: 600; }
.post-results .post-result-note { margin-top: 8px; font-size: 12px; line-height: 1.5; color: var(--ink-70); }
.post-task-categories { border-top: 1px solid var(--ink-12); }
.post-task-categories details { border-bottom: 1px solid var(--ink-12); }
.post-task-categories summary { display: flex; align-items: center; gap: 16px; padding: 20px 0; cursor: pointer; list-style: none; }
.post-task-categories summary::-webkit-details-marker { display: none; }
.post-task-categories .task-count { margin-left: auto; font: 12px var(--mono); color: var(--ink-70); white-space: nowrap; }
.task-chevron { width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; transform: rotate(45deg); margin: -4px 4px 0 0; }
 details[open] > summary .task-chevron { transform: rotate(225deg); margin-top: 4px; }
.post .post-task-categories ul { list-style: none; margin: 0; padding: 0 0 24px; }
.post .post-task-categories li + li { margin-top: 20px; }
.post-task-categories li p { margin-top: 6px; font-size: 14px; line-height: 1.6; color: var(--ink-70); }
@media (max-width: 600px) {
  .post-results th, .post-results td { padding: 10px 6px; }
  .post-results table { font-size: 13px; }
  .post-results thead th { font-size: 11px; }
}
.post-results caption { font-family: var(--sans); letter-spacing: normal; text-transform: none; }
.post-results tbody th { font-family: var(--sans); font-size: inherit; letter-spacing: normal; text-transform: none; color: var(--ink); }


/* Memory-types figure: three columns, each tracing one phrase from a trajectory into memory and a task step. */
.memory-types { --mt-hl: #F54E00; }
:root[data-theme="dark"] .memory-types { --mt-hl: #FF7A3D; }
.memory-types .mt-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.memory-types .mt-col { position: relative; padding-left: 20px; font: 12.5px/1.6 var(--mono); color: var(--ink); }
.memory-types .mt-rail { position: absolute; left: 0; width: 0; border-left: 1.5px solid var(--mt-hl); }
.memory-types .mt-title { margin: 0 0 4px; padding-bottom: 10px; border-bottom: 1px solid var(--ink-25); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.memory-types .mt-label { margin: 18px 0 8px; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-45); }
.memory-types .mt-box { position: relative; overflow-wrap: anywhere; padding: 12px 14px; border: 1px solid var(--ink-25); min-height: 52px; }
.memory-types .mt-node::before { content: ""; position: absolute; left: -24px; top: var(--y, 50%); width: 22px; border-top: 1.5px solid var(--mt-hl); }
.memory-types .mt-node::after { content: ""; position: absolute; left: -24px; top: calc(var(--y, 50%) - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--mt-hl); translate: -2px 0; }
.memory-types mark { background: none; color: var(--mt-hl); }
.memory-types code { font: inherit; background: none; padding: 0; }
.memory-types .mt-trace { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0; }
.memory-types .mt-trace dt { color: var(--ink-45); }
.memory-types .mt-trace dd { margin: 0; }
.memory-types .mt-task { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.memory-types .mt-task li { position: relative; display: flex; gap: 10px; align-items: baseline; }
.memory-types .mt-check { position: relative; flex: none; width: 13px; height: 13px; border: 1.5px solid var(--ink-45); translate: 0 2px; }
.memory-types .mt-done .mt-check::after, .memory-types .mt-hit .mt-check::after { content: ""; position: absolute; left: 3px; top: 0px; width: 3px; height: 7px; border: solid var(--bg); border-width: 0 1.5px 1.5px 0; rotate: 45deg; }
.memory-types .mt-done .mt-check { background: var(--ink); border-color: var(--ink); }
.memory-types .mt-hit .mt-check { background: var(--mt-hl); border-color: var(--mt-hl); }
.memory-types .mt-todo { color: var(--ink-45); }
.memory-types .mt-hit::before { content: ""; position: absolute; left: -39px; top: 0.8em; width: 30px; border-top: 1.5px solid var(--mt-hl); }
.memory-types .mt-hit::after { content: ""; position: absolute; left: -15px; top: calc(0.8em - 4px); border: 4.5px solid transparent; border-left-color: var(--mt-hl); }
.memory-types .mt-note { margin: 16px 0 0; text-align: right; font: 11px var(--mono); color: var(--ink-45); }
@media (max-width: 760px) { .memory-types .mt-grid { grid-template-columns: 1fr; gap: 40px; } }

.harness-leaderboard { margin-top: 32px; }
.harness-leaderboard .harness-leaderboard-title { margin: 0 0 12px; font-size: 1rem; }

/* Brand marks sit inline before the model or harness name, inheriting the ink colour. */
.leaderboard .entry-name .lb-icon { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; color: var(--ink); }
.leaderboard .entry-name .lb-initial { box-sizing: border-box; border: 1px solid var(--ink-45); border-radius: 3px; font: 9px/12px var(--mono); text-align: center; color: var(--ink-70); }
.results-card .leaderboard td.wide { padding-right: 28px; white-space: nowrap; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.table-note { margin: 12px 0 0; font: 13px/1.4 var(--sans); color: var(--ink-45); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Section header: title + question on the left, Table/Pareto toggle on the right, then the box 16px below. */
.results-tabs .results-header { align-items: flex-end; margin-bottom: 16px; }
.results-title .results-question { margin: 4px 0 0; color: var(--ink-70); font: 15px/1.5 var(--sans); }
.results-tabs .results-card { padding-top: 20px; }
@media (max-width: 760px) { .results-tabs .results-header { align-items: flex-start; flex-direction: column; gap: 12px; } }
.harness-bar { cursor: default; outline: none; }
.harness-bar:hover rect, .harness-bar:focus rect { opacity: 0.85; }

/* Cost columns sit right-aligned after the bar, compact and muted. */
.results-card .leaderboard .cost-col { width: 1%; padding-left: 20px; padding-right: 0; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-70); }
.results-card .leaderboard th.cost-col { color: var(--ink-45); }
@media (max-width: 760px) { .results-card .leaderboard .cost-col { display: none; } }
.leaderboard .lb-effort { margin-left: 4px; font: 12px var(--mono); color: var(--ink-45); white-space: nowrap; }
.tip .tip-line { display: block; white-space: nowrap; }
.tip .tip-line + .tip-line { margin-top: 2px; }
.tip .tip-label { color: var(--ink-45); }

/* Hero right block (tagline + buttons) spans both rows of the left block: the tagline's top sits at the
   wordmark's cap height and the buttons' bottom on the "by Letta" line, with a fixed gap between them. */
.hero-inner { grid-template-areas: "title side" "by side"; align-items: end; }
.hero-side { grid-area: side; display: flex; flex-direction: column; justify-content: space-between; gap: 36px; align-self: stretch; justify-self: end; width: max-content; max-width: 100%;
  padding-top: calc(var(--title) * 0.17); }
.hero .tagline { grid-area: auto; color: var(--ink); letter-spacing: -0.02em; line-height: 1.22; max-width: 16em; margin: 0; }
.hero .actions { grid-area: auto; align-self: flex-start; }
.hero h1 { align-self: end; }
.hero-by { align-self: end; }
@media (max-width: 640px) {
  .hero-inner { grid-template-columns: 1fr; grid-template-areas: "title" "by" "side"; }
  .hero-side { padding-top: 0; gap: 20px; margin-top: 40px; justify-self: stretch; width: auto; }
  .hero .tagline, .hero .actions { margin-top: 0; }
}
/* Home tables: neutral bars, only the rank-1 row is highlighted (FrontierSWE-style). Pareto colours are unchanged. */
.results-card .leaderboard .bar-fill { background: var(--ink-25); opacity: 1; }
.results-card .leaderboard tbody tr:first-child .bar-fill { background: var(--accent); }
.results-card .leaderboard .score { color: var(--ink-70); font-weight: 400; font-synthesis: none; } /* same dim as the Task cost column */
.results-card .leaderboard tbody tr:first-child .score { color: var(--ink); }

/* One grid for both home tables (fixed layout + shared colgroup). */
.results-card .leaderboard { table-layout: fixed; width: 100%; }
.results-card .leaderboard .col-rank { width: 64px; }
.results-card .leaderboard .col-name { width: 36%; }
.results-card .leaderboard .col-score { width: 88px; }
.results-card .leaderboard .col-cost { width: 96px; }
.results-card .leaderboard td.wide { overflow: hidden; text-overflow: ellipsis; }
.results-card .leaderboard td.bar { width: auto; min-width: 0; }
@media (max-width: 760px) { .results-card .leaderboard { table-layout: auto; } .results-card .leaderboard col[class] { width: auto; } .results-card .leaderboard td.wide { white-space: nowrap; } }

/* Blog harness bars: brand mark above each label; hovering one bar dims the others, like the Pareto charts. */
.harness-bar-plot .bar-mark { color: var(--ink-70); }
.harness-bar-plot .harness-bar { transition: opacity .15s; }
.harness-bar-plot:hover .harness-bar:not(:hover), .harness-bar-plot:focus-within .harness-bar:not(:focus) { opacity: .35; }

/* Blog Figure 2: harness rows in the leaderboard style (neutral bars, rank-1 accent, contrast winner score). */
.results-card .hb-table { table-layout: fixed; width: 100%; }
.results-card .hb-table .hb-name { width: 58%; }
.results-card .hb-table .hb-score { width: 56px; }
.results-card .hb-table td.wide { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; padding-right: 12px; }
.results-card .hb-table .entry-name { display: inline; }
.results-card .hb-table td.bar { width: auto; min-width: 0; padding-left: 8px; }
.results-card .hb-table tr { transition: opacity .15s; cursor: default; outline: none; }
.results-card .hb-table:hover tbody tr:not(:hover), .results-card .hb-table:focus-within tbody tr:not(:focus) { opacity: .4; }
.results-card .hb-table .entry-name .lb-icon { display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -2px; color: var(--ink); }
@media (max-width: 640px) { .results-card .hb-table { table-layout: auto; } .results-card .hb-table col[class] { width: auto; } .results-card .hb-table td.wide { white-space: normal !important; } }

/* Blog Qualitative Analysis: memory-file cards in the memory-types figure's style. */
.memory-cards { --mc-hl: #F54E00; }
:root[data-theme="dark"] .memory-cards { --mc-hl: #FF7A3D; }
.memory-cards .mc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.memory-cards .mc-card { display: flex; flex-direction: column; border: 1px solid var(--ink-25); background: var(--bg); }
.memory-cards .mc-head { margin: 0; padding: 9px 14px; border-bottom: 1px solid var(--ink-25); font: 10px/1.4 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-45); overflow-wrap: anywhere; }
.memory-cards .mc-body { flex: 1; margin: 0; padding: 14px; font: 12.5px/1.6 var(--mono); font-style: normal; color: var(--ink); overflow-wrap: anywhere; }
.memory-cards mark { background: none; color: var(--mc-hl); }
.memory-cards .mc-foot { margin: 0; padding: 0 14px 12px; font: 11px var(--mono); color: var(--ink-45); }
@media (max-width: 640px) { .memory-cards .mc-grid { grid-template-columns: 1fr; } }