/* Research graphics share warm charcoal, cream text, sage, and orange accents. */
:root { --research-bg: #191b19; --research-panel: #20231f; --research-line: rgba(238,232,219,.17); --research-text: #eee8db; --research-muted: #b1b5a9; --research-orange: #ff885f; }
.work-section { padding-top: clamp(2rem,3vw,3rem); color: var(--research-text); background: var(--research-bg); }
.work-section .section-number, .work-section .case-index { color: var(--research-orange); }
.work-section .section-heading > p, .case-intro > div:last-child > p { color: var(--research-muted); font-size: 1rem; line-height: 1.75; }
.work-section .section-heading { margin-bottom: 4.5rem; }
.case-study { padding: 4.5rem 0; border-color: var(--research-line); }
.case-intro { grid-template-columns: minmax(260px,.85fr) minmax(0,1.15fr); gap: 3rem; align-items: start; margin-bottom: 2.5rem; }
.case-intro h3 { font-size: clamp(2.6rem,3.8vw,4rem); }
.case-link { max-width: 17rem; color: var(--research-text); border-color: var(--research-line); font-size: .72rem; line-height: 1.4; }
.case-link span { color: var(--research-orange); }
.case-link:hover { color: var(--research-orange); border-color: var(--research-orange); }
.research-figure { margin: 0; border-block: 1px solid var(--research-line); min-width: 0; }
.research-figure [hidden] { display: none !important; }
.figure-heading { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.1rem 0; font: 400 .67rem/1.5 var(--mono); letter-spacing: .04em; text-transform: uppercase; }
.figure-heading > span:first-child { color: var(--research-text); }
.figure-heading > span:last-child { color: var(--research-muted); }
.status-dot { display: inline-block; width: 6px; height: 6px; margin-right: .45rem; background: var(--research-orange); border-radius: 50%; box-shadow: 0 0 12px #ff885f70; }
.research-figure figcaption { display: flex; align-items: center; gap: 1.1rem; padding: 1rem 0; border-top: 1px solid var(--research-line); font-size: .73rem; line-height: 1.6; color: var(--research-muted); }
.research-figure figcaption > span { margin-right: auto; max-width: 52rem; }
.research-figure button, .research-figure figcaption a { min-height: 36px; flex-shrink: 0; padding: .45rem .65rem; border: 1px solid transparent; background: transparent; color: inherit; font: 400 .68rem/1.4 var(--mono); cursor: pointer; }
.research-figure button:hover, .research-figure figcaption a:hover { color: var(--research-orange); border-color: var(--research-line); }
.research-figure button:focus-visible, .research-figure a:focus-visible { outline-color: var(--research-orange); }
.research-figure .icon-control { min-width: 36px; font: 500 1rem/1 var(--body); }
.research-figure canvas { width: 100%; height: 100%; display: block; }
.research-reading { display: grid; grid-template-columns: .85fr 1.15fr; gap: 3rem; margin-top: 2rem; }
.research-reading h4 { max-width: 24rem; margin: 0; font-size: clamp(1.15rem,1.6vw,1.5rem); line-height: 1.4; font-weight: 500; letter-spacing: -.035em; }
.research-reading > p { margin: 0; color: var(--research-muted); font-size: .91rem; line-height: 1.75; }
.micro-label { color: var(--research-muted); margin: 0 0 1rem; font: 400 .65rem/1.5 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.canvas-fallback { position: absolute; inset: 45% 1rem auto; text-align: center; color: var(--research-muted); font-size: .85rem; pointer-events: none; }
.canvas-fallback[hidden] { display: none; }

/* Native replay: original coordinates, objects, relationships, and event sequence. */
.sol-layout { display: grid; grid-template-columns: minmax(0,1fr) 250px; gap: 1.5rem; align-items: stretch; }
.sol-map { height: 475px; position: relative; min-width: 0; }
.sol-map canvas { cursor: crosshair; }
.map-key { position: absolute; bottom: .5rem; left: 0; display: flex; gap: 1.2rem; font: 400 .6rem/1.5 var(--mono); color: var(--research-muted); }
.map-key i { display: inline-block; width: 6px; height: 6px; margin-right: .4rem; border-radius: 50%; background: #9fb49c; }
.map-key span:last-child i { background: var(--research-orange); }
.replay-detail { padding: 2rem 0 1rem 1.5rem; border-left: 1px solid var(--research-line); }
.replay-detail h4 { color: var(--research-orange); margin: 0 0 .8rem; font-size: 1.4rem; font-weight: 500; letter-spacing: -.04em; }
.replay-explanation { margin: 0; color: var(--research-muted); font-size: .8rem; line-height: 1.65; }
.mutation-record { margin: 1.5rem 0 1.25rem; padding-block: 1rem; border-block: 1px solid var(--research-line); }
.mutation-record > span:first-child { display: block; color: var(--research-orange); margin-bottom: .85rem; font: 400 .61rem/1.4 var(--mono); text-transform: uppercase; }
.mutation-record code { display: block; overflow-wrap: anywhere; font: 400 .78rem/1.65 var(--mono); }
.mutation-record code:first-of-type { color: #91968b; }
.mutation-arrow { display: block; padding: .25rem 0; color: var(--research-orange); }
.mutation-record small { display: block; margin-top: 1rem; font: 400 .62rem/1.6 var(--mono); color: #9da292; overflow-wrap: anywhere; }
.replay-progress { color: var(--research-muted); font: 400 .69rem/1.5 var(--mono); }
.replay-progress strong { color: var(--research-text); font-weight: 400; }
.replay-controls { display: flex; gap: 1rem; align-items: center; padding: .6rem 0; border-top: 1px solid var(--research-line); }
.replay-controls input { min-width: 0; flex: 1; accent-color: var(--research-orange); cursor: ew-resize; }
.replay-controls button { min-width: 5rem; }

/* A compact experiment with its full outcome, including the tradeoff. */
.memory-study { padding: 0; color: var(--research-text); background: var(--research-bg); }
.memory-study .figure-heading { border-bottom: 1px solid var(--research-line); }
.memory-controls { display: flex; align-items: center; gap: .5rem; }
.figure-switch { display: flex; gap: .2rem; padding: .15rem; background: var(--research-panel); border-radius: 3px; }
.memory-study .figure-switch button { color: var(--research-muted); padding: .45rem .7rem; }
.memory-study .figure-switch button[aria-pressed="true"] { color: var(--research-orange); background: #ff885f14; border-color: #ff885f38; border-radius: 2px; }
.memory-layout { display: grid; grid-template-columns: .95fr 1.05fr; gap: 3rem; padding: 1.7rem 0; }
.memory-tokens { min-height: 88px; display: grid; grid-template-columns: repeat(14,1fr); gap: 4px; align-content: start; padding-block: .4rem; }
.memory-tokens i { height: 13px; border-radius: 1px; background: #9fb49c; transition: opacity .65s, background .65s, transform .65s; transition-delay: calc(var(--i) * 9ms); }
.memory-tokens i:nth-child(5n) { background: #b08b68; }
.is-compacted .memory-tokens i:nth-child(n+9) { opacity: .12; transform: scale(.65); }
.is-compacted .memory-tokens i:nth-child(-n+8) { background: var(--research-orange); }
.memory-state { max-width: 24rem; min-height: 3.3rem; margin: .8rem 0 1rem; color: var(--research-muted); font-size: .85rem; line-height: 1.65; }
.evidence-store { border-top: 1px solid var(--research-line); padding-top: .9rem; }
.evidence-store > span { font-size: .77rem; font-weight: 600; color: var(--research-text); }
.evidence-store p { margin: .4rem 0 0; font-size: .72rem; line-height: 1.6; color: var(--research-muted); }
.memory-results { min-width: 0; }
.result-bar { margin-bottom: .85rem; }
.result-bar > div:first-child { display: flex; justify-content: space-between; margin-bottom: .4rem; font-size: .79rem; }
.result-bar strong { color: var(--research-orange); font-weight: 600; }
.bar-track { height: 19px; position: relative; background: #2d332a; }
.bar-track i { display: block; height: 100%; width: 100%; background: #9fb49c; transition: width 1.15s cubic-bezier(.2,.8,.2,1), background .8s; }
.is-compacted .bar-track i { width: var(--target); background: var(--research-orange); }
.bar-track b { position: absolute; right: .45rem; top: 2px; color: var(--research-text); font: 500 .66rem/1.3 var(--mono); opacity: 0; transition: opacity .7s; }
.is-compacted .bar-track b { opacity: 1; }
.score-note { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem; padding-top: .8rem; margin: 1.2rem 0 0; border-top: 1px solid var(--research-line); font-size: .76rem; }
.score-note strong { color: #b8c5a5; font-weight: 600; }
.memory-study button:hover { color: var(--research-orange); }

/* Measured co-deployment, with deliberately explicit denominators. */
.population-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 2.2rem; }
.population-map { position: relative; min-width: 0; height: 435px; }
.population-labels { position: absolute; inset: 0; pointer-events: none; }
.population-labels button { position: absolute; min-width: 4.3rem; max-width: 8rem; padding: .3rem .55rem; transform: translate(-50%,-50%); pointer-events: auto; text-align: center; transition: opacity .6s, color .2s; border: 0; }
.population-labels button strong { display: block; color: var(--research-text); font: 500 .9rem/1.3 var(--body); letter-spacing: -.03em; }
.population-labels button span { display: block; color: #d8b28f; margin-top: .2rem; font: 400 .68rem/1.2 var(--mono); }
.population-labels button:hover { border: 0; color: var(--research-orange); }
.population-labels button[aria-pressed="true"] strong { color: var(--research-orange); }
.population-detail { padding: 1.5rem 0 0; }
.family-list button { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; min-height: 32px; margin-bottom: .2rem; padding: .45rem .5rem; color: var(--research-text); text-align: left; border: 0; isolation: isolate; }
.family-list button::before { content: ""; position: absolute; z-index: -1; inset: 0 auto 0 0; width: var(--share); background: #87977a16; transition: background .3s; }
.family-list button:hover::before, .family-list button[aria-pressed="true"]::before { background: #ff885f24; }
.family-list button strong { font-weight: 400; color: #d3af8b; }
.population-selection { margin: 1.1rem 0 0; padding-top: 1rem; border-top: 1px solid var(--research-line); font-size: .78rem; color: var(--research-muted); line-height: 1.65; }
.population-selection strong { display: block; color: var(--research-text); font-weight: 500; margin-bottom: .35rem; }
.finding-deck { display: grid; min-height: 7.3rem; }
.finding-copy { grid-area: 1 / 1; margin: 0; opacity: 0; visibility: hidden; transition: opacity 1.3s ease, visibility 1.3s; }
.finding-copy.is-active { opacity: 1; visibility: visible; }
.family-selection { min-height: 7.3rem; margin: 0; }
.finding-nav { display: flex; align-items: center; gap: .2rem; margin: .3rem 0; }
.research-figure .finding-nav button { display: grid; place-items: center; min-width: 28px; min-height: 32px; padding: .5rem; }
.finding-nav button::after { content: ""; display: block; width: 5px; height: 5px; border-radius: 50%; background: #72786b; transition: background .4s, box-shadow .4s; }
.finding-nav button[aria-pressed="true"]::after { background: var(--research-orange); box-shadow: 0 0 8px #ff885f44; }
.population-stats, .hunt-stats { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--research-line); padding: 1.25rem 0; gap: 1.5rem; }
.population-stats > div, .hunt-stats > div { display: flex; flex-direction: column; gap: .4rem; }
.population-stats strong, .hunt-stats strong { color: var(--research-orange); font: 500 clamp(1.4rem,2.3vw,2rem)/1.15 var(--display); letter-spacing: -.04em; }
.population-stats span, .hunt-stats span { color: var(--research-muted); font-size: .76rem; line-height: 1.5; }

/* Source code stays text: a guided lens follows the execution boundary. */
.prompt-layout { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(240px,.8fr); gap: 2rem; padding: 1rem 0 1.8rem; }
.prompt-steps { display: flex; gap: .3rem; }
.prompt-steps button[aria-pressed="true"] { color: var(--research-orange); border-bottom-color: var(--research-orange); }
.code-window { height: 370px; overflow: auto; position: relative; background: #101510; border: 1px solid #ffffff0c; scrollbar-width: thin; scrollbar-color: #535a49 #101510; scroll-behavior: smooth; }
.code-track { padding: 1.2rem .9rem 5.5rem; width: calc(100% / 1.06); transform: scale(1.06); transform-origin: top left; transition: transform 1.2s ease; }
[data-prompt-step="1"] .code-track { transform: scale(1); }
.code-track pre { margin: 0; }
.yara-track { padding: .85rem 1.3rem; }
.yara-track pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.yara-track code { font: 400 .73rem/1.7 var(--mono); color: #a7b09f; }
.yara-track mark { color: #ffc19c; background: #ff885f0b; }
.code-track code { font: 400 .76rem/1.9 var(--mono); color: #a7b09f; }
.code-line { position: relative; display: block; padding-left: 2.3rem; white-space: pre-wrap; overflow-wrap: anywhere; opacity: .32; transition: opacity .7s, background .7s; }
.code-line > i { position: absolute; left: .2rem; top: 0; font-style: normal; color: #606c58; font-size: .61rem; }
.code-line mark { color: inherit; background: transparent; transition: color .7s; }
.syntax-keyword { color: #caab88; }
.syntax-string { color: #a4bb95; }
[data-prompt-step="0"] .focus-prompt, [data-prompt-step="1"] .focus-model, [data-prompt-step="2"] .focus-execute { opacity: 1; background: #ff885f0b; }
[data-prompt-step="0"] .focus-prompt mark, [data-prompt-step="1"] .focus-model mark, [data-prompt-step="2"] .focus-execute mark { color: #ffc19c; }
.prompt-explainer { padding: .6rem 0; }
.prompt-explainer .micro-label { color: var(--research-orange); }
.prompt-explainer h4 { margin: 0 0 1rem; font-size: clamp(1.2rem,1.8vw,1.6rem); font-weight: 500; line-height: 1.35; letter-spacing: -.035em; }
.prompt-explainer > p:not(.micro-label) { min-height: 5.5rem; margin: 0; color: var(--research-muted); font-size: .84rem; line-height: 1.7; }
.prompt-discovery { margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--research-line); }
.prompt-discovery > span { display: block; font: 400 .6rem/1.5 var(--mono); text-transform: uppercase; color: #929b86; }
.prompt-discovery > strong { display: block; margin: .5rem 0; font-size: 1rem; font-weight: 500; color: #dfb793; }
.prompt-discovery > p { margin: 0; font-size: .75rem; line-height: 1.65; color: var(--research-muted); }

/* The smaller pieces use the same palette and readable annotation sizes. */
.research-index { border-color: var(--research-line); padding-top: 3.5rem; }
.index-card { --green: #c4c9a2; --blue: #9fafbd; --orange: #ff885f; border-color: var(--research-line); }
.index-card > p { font-size: .62rem; line-height: 1.5; color: var(--research-orange); }
.index-card > span { font-size: .82rem; line-height: 1.65; color: var(--research-muted); }
.index-card h3 { line-height: 1.12; margin-bottom: 1rem; }
.index-card .loop-visual, .index-card .benchmark-visual, .index-card .eval-visual { background: #111710; }
.loop-core { color: #161c12; background: #b4c99f; box-shadow: 0 0 25px #b4c99f19; }
.index-card figure { margin-bottom: 1.3rem; }
.loop-core { font-size: .62rem; }
.loop-visual > span { font-size: .56rem; }
.loop-visual > p, .benchmark-visual > p { font-size: .47rem; letter-spacing: 0; }
.benchmark-visual > div span { font-size: .57rem; }
.benchmark-visual > i::after { font-size: .52rem; }
.benchmark-visual { grid-template-columns: 1fr .35fr 1fr; gap: .55rem; }
.index-card .eval-visual { grid-template-columns: .85fr 1fr .85fr; gap: .5rem; padding: .9rem; }
.eval-input small, .eval-output small, .eval-system > p { font-size: .51rem; }
.eval-input, .eval-output { min-height: 6rem; padding: .6rem; }
.eval-input strong, .eval-output strong { font-size: .82rem; }
.eval-system { padding: .6rem; }
.eval-system ol { grid-template-columns: 1fr; }
.eval-system li { font-size: .52rem; padding: .35rem .2rem; }
.public-section { border-top: 1px solid var(--research-line); }
.public-row { min-height: 7.1rem; padding-block: 1.1rem; grid-template-columns: 5.6rem .65fr 1.7fr 5rem; gap: 1.6rem; }
.public-row time, .public-row > p, .public-row > span { font-size: .6rem; line-height: 1.6; }
.public-row > div { min-width: 0; }
.public-row h3 { font-size: clamp(1.05rem,1.5vw,1.35rem); line-height: 1.3; }
.public-row > div > p { margin: .4rem 0 0; color: var(--muted); font-size: .8rem; line-height: 1.55; letter-spacing: 0; }
.public-row:hover, .public-row > span { color: var(--research-orange); }
.profile-section { color: var(--research-text); background: var(--research-bg); border-block: 1px solid var(--research-line); }
.profile-section .section-number, .profile-section .section-heading h2 em, .profile-section .timeline article p { color: var(--research-orange); }
.profile-section .section-heading > p, .profile-section .timeline time, .profile-section .timeline-detail { color: var(--research-muted); }
.profile-section .timeline, .profile-section .timeline article { border-color: var(--research-line); }
.timeline time, .timeline article p { font-size: .65rem; line-height: 1.5; }
.timeline-detail { font-size: .83rem; line-height: 1.7; }
.contact-links a { font-size: .69rem; }
.text-link { font-size: .69rem; }

@media (max-width: 1150px) {
  .sol-layout { grid-template-columns: minmax(0,1fr) 225px; }
  .population-layout { grid-template-columns: minmax(0,1fr) 260px; gap: 1.5rem; }
  .memory-layout { gap: 2rem; }
}
@media (max-width: 900px) {
  .case-intro { grid-template-columns: 1fr; gap: 1.5rem; }
  .case-intro > div:last-child { max-width: 45rem; }
  .sol-map { height: 390px; }
  .sol-layout { grid-template-columns: minmax(0,1fr) 210px; gap: 1rem; }
  .replay-detail { padding-left: 1rem; }
  .population-layout { grid-template-columns: minmax(0,1fr) 230px; }
  .population-map { height: 400px; }
  .research-reading { grid-template-columns: 1fr; gap: .8rem; }
  .research-reading h4 { max-width: 40rem; }
  .research-reading > p { max-width: 45rem; }
  .prompt-layout { grid-template-columns: minmax(0,1.2fr) minmax(220px,.8fr); gap: 1.5rem; }
  .code-track code { font-size: .68rem; }
}
@media (max-width: 620px) {
  .work-section .section-heading { margin-bottom: 3.2rem; }
  .case-study { padding: 3.4rem 0; }
  .case-intro { margin-bottom: 1.5rem; }
  .case-intro > div:last-child > p { font-size: .95rem; }
  .figure-heading { flex-wrap: wrap; gap: .7rem; font-size: .62rem; padding-block: .9rem; }
  .figure-heading > span:last-child { font-size: .58rem; }
  .sol-layout { display: flex; flex-direction: column; gap: 0; }
  .sol-map { height: 305px; }
  .map-key { font-size: .54rem; gap: .8rem; }
  .replay-detail { display: grid; grid-template-columns: .8fr 1.2fr; column-gap: 1.1rem; border-left: 0; border-top: 1px solid var(--research-line); padding: 1.2rem 0; }
  .replay-detail .micro-label { grid-column: 1; margin-bottom: .4rem; }
  .replay-detail h4 { grid-column: 1; font-size: 1.13rem; }
  .replay-explanation { grid-column: 1; font-size: .73rem; }
  .mutation-record { grid-column: 2; grid-row: 1 / span 4; margin: 0; padding: 0; border: 0; }
  .mutation-record code { font-size: .69rem; }
  .replay-progress { font-size: .6rem; }
  .research-figure figcaption { flex-wrap: wrap; gap: .5rem; font-size: .7rem; }
  .research-figure figcaption > span { flex-basis: 100%; }
  .research-figure figcaption button:first-of-type { margin-left: auto; }
  .memory-layout { grid-template-columns: 1fr; gap: 1.4rem; padding: 1.3rem 0; }
  .memory-tokens { min-height: 68px; }
  .memory-tokens i { height: 10px; }
  .memory-state { min-height: 0; }
  .memory-results { padding-top: 1.2rem; border-top: 1px solid var(--research-line); }
  .figure-switch { width: 100%; }
  .memory-controls { width: 100%; }
  .figure-switch button { flex: 1; }
  .population-layout { grid-template-columns: 1fr; gap: 0; }
  .population-map { height: 340px; }
  .population-detail { padding: 1rem 0 0; }
  .population-labels button strong { font-size: .74rem; }
  .population-labels button span { font-size: .6rem; }
  .family-list { display: grid; grid-template-columns: 1fr 1fr; gap: .25rem .8rem; }
  .family-list button { font-size: .62rem; }
  .population-selection { min-height: 0; }
  .finding-deck, .family-selection { min-height: 6.5rem; }
  .population-stats, .hunt-stats { gap: .8rem; }
  .population-stats strong, .hunt-stats strong { font-size: 1.3rem; }
  .population-stats span, .hunt-stats span { font-size: .68rem; }
  .prompt-layout { grid-template-columns: 1fr; gap: 1.2rem; padding-top: 0; }
  .prompt-steps { width: 100%; }
  .prompt-steps button { flex: 1; padding-inline: .3rem; font-size: .63rem; }
  .code-window { height: 390px; }
  .code-track { padding: .9rem .4rem 4rem; }
  .code-track code { font-size: .66rem; }
  .yara-track { padding: 1rem .8rem 1.5rem; }
  .yara-track code { font-size: .65rem; }
  .code-line { padding-left: 1.7rem; }
  .prompt-explainer > p:not(.micro-label) { min-height: 0; }
  .prompt-discovery { margin-top: 1.1rem; }
  .research-reading { margin-top: 1.6rem; }
  .research-reading > p { font-size: .86rem; }
  .public-row { grid-template-columns: 1fr auto; gap: .5rem 1rem; min-height: 0; padding-block: 1.5rem; }
  .public-row > div { grid-column: 1; }
  .public-row > span { grid-row: 1 / span 3; }
  .public-row > div > p { font-size: .78rem; }
}
@media (prefers-reduced-motion: reduce) {
  .code-window { scroll-behavior: auto; }
  .memory-tokens i, .bar-track i, .finding-copy { transition: none; }
}