*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:        #faf8f5;
  --bg-subtle: #f5f3ef;
  --text:      #2c2c2c;
  --text-sec:  #737373;
  --text-ter:  #9a9a9a;
  --accent:    #8a7355;
  --accent-lt: #a99478;
  --border:    #e5e0d8;
  --border-lt: #ebe7e0;
  --link:      #6b8a94;
}

html { font-size: 17px; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1rem;
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  letter-spacing: 0.02em;
  line-height: 1.25;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--accent); }

code {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 0.83em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 2px;
  padding: 0 3px;
}

nav {
  border-bottom: 1px solid var(--border-lt);
  padding: 0 2rem;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 100;
}

.nav-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: 1.15rem;
  color: var(--text);
  letter-spacing: 0.04em;
  text-decoration: none;
}

a.nav-title:hover {
  color: var(--accent);
}

.nav-links {
  display: flex;
  flex-wrap: nowrap;
  gap: clamp(0.65rem, 1.2vw, 1.5rem);
  align-items: center;
  min-width: 0;
}

.nav-links a {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  white-space: nowrap;
  flex: 0 0 auto;
}

.nav-links a:hover { color: var(--accent); }

.nav-links a.nav-active {
  color: var(--accent);
  border-bottom: 1px solid var(--accent);
  padding-bottom: 2px;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  padding: 10px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text);
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 20px;
  height: 1px;
  background: currentColor;
  transition: transform 0.22s ease, opacity 0.18s ease;
}

.container { max-width: 860px; margin: 0 auto; padding: 0 2rem; }

section { padding: 3.5rem 0; border-bottom: 1px solid var(--border-lt); }
section:last-of-type { border-bottom: none; }
/* Keep a single rule between sections - never stack with a child's border-top. */
section > .container > :first-child { border-top: none; }

.hero {
  padding: 5.5rem 0 4.5rem;
  text-align: center;
  border-bottom: 1px solid var(--border-lt);
}

.hero h1 {
  font-size: 3.4rem;
  font-weight: 300;
  color: var(--accent);
  letter-spacing: 0.04em;
  margin-bottom: 0.5rem;
}

.hero-subtitle {
  font-size: 1.2rem;
  color: var(--text-sec);
  font-style: italic;
  margin-bottom: 0.6rem;
}

.hero-desc {
  font-size: 0.97rem;
  color: var(--text-sec);
  max-width: 620px;
  margin: 0 auto 1rem;
  line-height: 1.7;
}

.hero-note { font-size: 0.95rem; opacity: 0.9; }

.hero-btns { display: flex; justify-content: center; gap: 0.9rem; flex-wrap: wrap; }

.btn {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.84rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 0.5rem 1.4rem;
  border-radius: 2px;
  transition: all 0.18s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  cursor: pointer;
}

.btn-primary { background: var(--accent); color: #fff; border: 1px solid var(--accent); }
.btn-primary:hover { background: var(--accent-lt); border-color: var(--accent-lt); color: #fff; }
.btn-outline { background: transparent; color: var(--accent); border: 1px solid var(--border); }
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn[hidden] { display: none; }

.pill-btn { border-radius: 999px; }

.pill-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.pill-icon svg { width: 100%; height: 100%; fill: currentColor; }

.hero-note-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.1rem;
  max-width: 620px;
  margin: 0 auto 1rem;
  padding: 0;
  font-size: 0.95rem;
  color: var(--text-sec);
  opacity: 0.9;
}

.hero-note-list li { position: relative; padding-left: 0.9rem; }

.story-beats {
  margin: 0.5rem 0 1rem 1.15rem;
  padding: 0;
}

.story-beats li {
  margin: 0.85rem 0;
  color: var(--text-sec);
}

.story-beats strong {
  color: var(--text);
  font-weight: 500;
}

.hero-note-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--accent-lt);
}

.section-title { font-size: 1.75rem; color: var(--text); margin-bottom: 1.4rem; }
.subsection-title { font-size: 1.2rem; color: var(--text); margin: 1.75rem 0 0.6rem; font-weight: 400; }

.prose p { margin-bottom: 1rem; color: var(--text-sec); font-size: 0.97rem; line-height: 1.75; }
.prose p:last-child { margin-bottom: 0; }
.prose strong { color: var(--text); font-weight: 500; }
.prose ul, .prose ol { padding-left: 1.2rem; margin-bottom: 1rem; }
.prose li { color: var(--text-sec); font-size: 0.95rem; margin-bottom: 0.35rem; line-height: 1.65; }
.prose li strong { color: var(--text); font-weight: 500; }

table { width: 100%; border-collapse: collapse; font-size: 0.93rem; margin: 1rem 0; }

th {
  text-align: left;
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-ter);
  border-bottom: 1px solid var(--border);
  padding: 0.45rem 0.75rem;
}

td {
  padding: 0.65rem 0.75rem;
  border-bottom: 1px solid var(--border-lt);
  vertical-align: top;
  color: var(--text);
  font-size: 0.93rem;
}

td:first-child { font-weight: 500; white-space: nowrap; width: 32%; }
td:last-child { color: var(--text-sec); }
tr:last-child td { border-bottom: none; }

pre[class*="language-"], pre {
  background: var(--bg) !important;
  border: 1px solid var(--border-lt) !important;
  border-radius: 2px !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.76rem !important;
  line-height: 1.6 !important;
  overflow-x: auto;
  margin: 1rem 0;
  box-shadow: none !important;
  text-shadow: none !important;
}

code[class*="language-"], pre[class*="language-"] *, pre code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-size: inherit !important;
  font-family: "SF Mono", "Fira Code", Consolas, monospace !important;
  color: var(--text-sec) !important;
  text-shadow: none !important;
}

pre[class*="language-"] .token.comment,
pre[class*="language-"] .token.prolog { color: var(--text-ter) !important; font-style: italic; }
pre[class*="language-"] .token.keyword,
pre[class*="language-"] .token.builtin { color: var(--accent) !important; font-weight: 600; }
pre[class*="language-"] .token.string,
pre[class*="language-"] .token.attr-value,
pre[class*="language-"] .token.number,
pre[class*="language-"] .token.boolean { color: #6e8c6a !important; }
pre[class*="language-"] .token.function { color: var(--text) !important; }
pre[class*="language-"] .token.operator { color: var(--text-sec) !important; }
pre[class*="language-"] .token.punctuation { color: var(--text-ter) !important; }

.callout {
  border-left: 2px solid var(--accent);
  padding: 0.75rem 1rem;
  margin: 1.25rem 0;
  background: var(--bg-subtle);
  font-size: 0.93rem;
  color: var(--text-sec);
  line-height: 1.6;
}

.callout strong { color: var(--text); font-weight: 500; }

/* Academic figures: tables + box diagrams (not AI bitmaps) */
.academic-fig {
  margin: 1.75rem 0 2rem;
  padding: 0;
  border: 0;
}
.academic-fig > figcaption {
  margin: 0.85rem auto 0;
  max-width: 720px;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-sec);
  text-align: center;
}
.table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--bg);
}
.compare-table th,
.compare-table td {
  border: 1px solid var(--border);
  padding: 0.55rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
.compare-table thead th {
  background: var(--bg-subtle);
  font-weight: 500;
  color: var(--text);
}
.compare-table tbody th {
  font-weight: 500;
  background: var(--bg-subtle);
  white-space: nowrap;
}
.compare-table tbody td { color: var(--text-sec); }

.arch-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.75rem 1rem;
  padding: 1.25rem 1rem;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
}

/* Fig. 1: animated horizontal flow */
.arch-flow {
  margin: 0.35rem 0 0.75rem;
  padding: 1rem 0.5rem 0.35rem;
}
.arch-flow .arch-anim {
  opacity: 0;
  transform: translateY(10px);
  animation: arch-step-in 0.55s ease forwards;
  animation-delay: calc(var(--i, 0) * 0.12s + 0.08s);
}
.arch-flow .flow-arrow-h {
  opacity: 0;
  animation: arch-step-in 0.4s ease forwards;
  animation-delay: 0.35s;
}
@keyframes arch-step-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .arch-flow .arch-anim,
  .arch-flow .flow-arrow-h {
    opacity: 1;
    transform: none;
    animation: none;
  }
}
.viz-shared-caption {
  margin-top: 0.85rem;
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.5;
  text-align: center;
}
.viz-card .viz-caption strong {
  color: var(--text);
  font-weight: 600;
}
.arch-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  min-width: 11rem;
  flex: 1 1 11rem;
  max-width: 16rem;
}
.arch-box {
  width: 100%;
  text-align: center;
  padding: 0.65rem 0.75rem;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  background: var(--bg-subtle);
  font-size: 0.9rem;
  line-height: 1.35;
  color: var(--text);
}
.arch-box-accent {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}
.arch-sub {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.8rem;
  color: var(--text-sec);
}
.arch-arrow {
  color: var(--text-ter);
  font-size: 0.95rem;
  line-height: 1;
}
.arch-bridge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 5.5rem;
  color: var(--text-sec);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.arch-bridge-line {
  display: block;
  width: 2.5rem;
  height: 1px;
  background: var(--border);
}
.arch-bridge-label { white-space: nowrap; }

.mode-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.mode-card {
  margin: 0;
  padding: 1rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.mode-card strong {
  display: block;
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 400;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.mode-card span {
  display: block;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-sec);
}
@media (max-width: 720px) {
  .mode-grid { grid-template-columns: 1fr; }
  .arch-bridge {
    flex-direction: row;
    width: 100%;
    min-width: 0;
  }
  .arch-bridge-line { width: 1.25rem; }
}

/* Compact feature tiles (less text-dense than long prose lists) */
.feature-tiles {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem 1rem;
}
.feature-tiles li {
  margin: 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg);
}
.feature-tiles strong {
  display: block;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.35rem;
}
.feature-tiles span {
  display: block;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text-sec);
}
@media (max-width: 720px) {
  .feature-tiles { grid-template-columns: 1fr; }
}

.flowchart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 1.75rem 0;
}

.flow-step {
  width: 100%;
  max-width: 520px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-subtle);
  padding: 0.85rem 1.1rem;
  text-align: center;
}

.flow-step-label {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}

.flow-step-title,
.flow-step-detail {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text);
}

.flow-step-title {
  font-weight: 500;
  margin-bottom: 0.2rem;
}

.flow-step-detail {
  color: var(--text-sec);
  margin-top: 0;
}

.flow-step-detail code { font-size: 0.9em; }

.flow-arrow {
  width: 2px;
  height: 1.75rem;
  background: var(--border);
  position: relative;
}

.flow-arrow::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--border);
}

.flow-branch {
  display: flex;
  gap: 1.25rem;
  width: 100%;
  max-width: 620px;
  justify-content: center;
  flex-wrap: wrap;
}

.flow-branch .flow-step { max-width: 280px; flex: 1 1 260px; }

.muted-note,
.docs-intro {
  margin-top: 1rem;
  font-size: 0.9rem;
  color: var(--text-ter);
}

.learn-more-wrap {
  margin-top: 1.4rem;
  display: flex;
  justify-content: flex-start;
}

.docs-list { list-style: none; padding: 0; }

.docs-list li {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border-lt);
  font-size: 0.95rem;
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
}

.docs-list li:last-child { border-bottom: none; }
.docs-list li a { color: var(--accent); font-weight: 500; }
.docs-list li a:hover { color: var(--accent-lt); }
.docs-list li span { color: var(--text-sec); font-size: 0.9rem; }

.publish-note { max-width: 540px; margin: 0 auto; }

.kofi-wrap {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.55rem;
  line-height: 0;
}

.kofi-wrap > a {
  display: block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.18));
  transition: transform 0.15s ease, filter 0.15s ease;
}

.kofi-wrap > a:hover {
  transform: translateY(-1px);
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.22));
}

.kofi-wrap img {
  display: block;
  width: 196px;
  height: auto;
  max-width: min(196px, calc(100vw - 2rem));
}

@media (max-width: 640px) {
  .kofi-wrap {
    right: 0.75rem;
    bottom: 0.75rem;
    gap: 0.4rem;
  }
  .kofi-wrap img {
    width: auto;
    height: 2rem;
  }
}

footer {
  padding: 2.5rem 0;
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-ter);
}

footer a { color: var(--text-ter); }
footer a:hover { color: var(--accent); }
.footer-links { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 0.75rem; }
footer .footnote { font-size: 0.78rem; margin-top: 0.35rem; }

.video-summary-frame {
  width: min(100%, 960px);
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: #000;
}

.video-summary-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.hf-cta {
  margin-top: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  background: var(--bg-subtle);
  text-align: center;
}

.hf-cta p { margin-bottom: 1rem; }

.example-pair {
  display: flex;
  gap: 1.25rem;
  margin: 1.25rem 0;
  flex-wrap: wrap;
}

.example-pair figure {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}

.example-pair img {
  display: block;
  width: 100%;
  height: 220px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border-lt);
}

.example-pair figcaption {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-top: 0.4rem;
  text-align: center;
}

.public-example-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1.75rem;
  margin-top: 1rem;
  align-items: start;
}

.public-example {
  border-top: 1px solid var(--border-lt);
  padding-top: 1.1rem;
  min-width: 0;
}

.public-example-meta {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.35rem;
  flex-wrap: wrap;
}

.public-example-cat {
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text);
}

.public-example-id {
  color: var(--text-ter);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.public-example-diff {
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-ter);
}

.public-example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.55rem;
}

.public-example-run {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
}

.public-example-steps {
  font-size: 0.78rem;
  color: var(--text-sec);
  letter-spacing: 0.03em;
}

.tag {
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-sec);
  border: 1px solid var(--border-lt);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.tag.tag-ask { color: var(--accent); border-color: var(--accent-lt); }
.tag.tag-cross { color: var(--link); border-color: var(--border); }
.tag.tag-run { color: var(--accent); border-color: var(--accent-lt); font-style: italic; }
.tag.tag-run-ok { color: var(--accent); border-color: var(--accent-lt); }
.tag.tag-run-fail { color: #a05656; border-color: #dcc2c2; }

/* Placeholder tokens in task prompts - italic, no quotes */
.placeholder {
  font-style: italic;
  color: var(--accent);
}

/* Model-run selector for the Public Tasks section */
.public-runs-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0 0 1.1rem;
  flex-wrap: wrap;
}

.public-example-prompt { margin: 0.5rem 0 0.85rem; }

.public-example-img {
  display: block;
  width: 100%;
  height: 260px;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border-lt);
  cursor: zoom-in;
  transition: opacity 0.15s ease;
}

.public-example-img:hover { opacity: 0.8; }

.public-example-img-pair {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.public-example-img-pair figure {
  flex: 1 1 260px;
  min-width: 0;
  margin: 0;
}

.public-example-img-pair img {
  height: 220px;
}

.public-example-img-pair figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-top: 0.3rem;
  text-align: center;
}

.lightbox-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 15, 0.92);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 2.5rem;
}

.lightbox-overlay.active { display: flex; }

.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.lightbox-close {
  position: fixed;
  top: 1.25rem;
  right: 1.75rem;
  font-size: 2.4rem;
  line-height: 1;
  color: #fff;
  background: none;
  border: none;
  cursor: pointer;
  font-family: Georgia, serif;
  opacity: 0.85;
}

.lightbox-close:hover { opacity: 1; }

/* Leaderboard */

.lb-disclaimer {
  font-size: 0.85rem;
  color: var(--text-ter);
  margin-bottom: 1rem;
}

.lb-disclaimer .info-btn {
  margin-top: 0;
  scroll-margin-top: 4.5rem;
}

.lb-notes-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  list-style: none;
  counter-reset: lb-note;
  margin: 1.25rem 0 0;
  padding: 0.85rem 0 0;
  border-top: none;
  font-size: 0.9rem;
  color: var(--text-sec);
}

.lb-notes-row > li {
  counter-increment: lb-note;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 0;
}

.lb-notes-row > li::before {
  content: counter(lb-note) ".";
  font-variant-numeric: tabular-nums;
  color: var(--text-ter);
  min-width: 1.1em;
}

.lb-empty {
  font-size: 0.9rem;
  color: var(--text-ter);
  padding: 1.5rem 0;
}

.info-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  color: var(--text-sec);
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  padding: 0.45rem 0.8rem;
  margin-top: 0.6rem;
  cursor: help;
}

.info-btn:hover,
.info-btn:focus-visible {
  color: var(--text);
  border-color: var(--border);
}

.info-tooltip {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 20;
  width: min(34rem, 90vw);
  max-height: min(60vh, 26rem);
  overflow-y: auto;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 0.85rem 1rem;
  text-align: left;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-sec);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.12s ease, transform 0.12s ease;
}

.info-btn:hover .info-tooltip,
.info-btn:focus-visible .info-tooltip,
.info-btn:focus-within .info-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}

.info-tooltip ul {
  margin: 0;
  padding-left: 1.1rem;
}

.info-tooltip li {
  margin-bottom: 0.45rem;
}

.info-tooltip li:last-child {
  margin-bottom: 0;
}

.info-tooltip .info-tooltip-note {
  margin: 0.6rem 0 0;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border-lt);
  font-size: 0.78rem;
}

.info-tooltip code {
  font-size: 0.78rem;
  white-space: normal;
}

/* Compact ⓘ on interrupted leaderboard model names, and the per-column ⓘ that
   expands a relaxed ÷60 figure to the tasks that actually ran. */
.lb-model-cell .lb-model-name {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.lb-model-cell a.lb-model-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.lb-model-cell a.lb-model-link:hover,
.lb-model-cell a.lb-model-link:focus-visible {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.lb-cov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 0.95rem;
  height: 0.95rem;
  padding: 0;
  margin-left: 0.3rem;
  border: 1px solid var(--border-lt);
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-ter);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.62rem;
  font-style: italic;
  line-height: 1;
  vertical-align: baseline;
  cursor: help;
}

/* Note ⓘ: a column's long inline note, collapsed behind a button. Reuses
   .lb-cov-btn's shape so the table keeps one ⓘ language, but upright rather
   than italic so it reads as "more detail" instead of "real denominator". */
.lb-note-btn {
  font-style: normal;
  font-size: 0.68rem;
}

.lb-cov-btn-model {
  width: 1.1rem;
  height: 1.1rem;
  margin-left: 0.15rem;
  font-size: 0.7rem;
}

/* Dead-battery badge: marks a run the phone battery killed, so the ÷60 figure in
   the row is never mistaken for a completed-suite score. */
.lb-batt-dead {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-left: 0.25rem;
  color: var(--text-ter);
  vertical-align: baseline;
  cursor: help;
}

.lb-batt-dead svg {
  display: block;
  overflow: visible;
}

/* Reasoning/thinking-mode flag. Every scored run is reasoning-off, so the cell
   reads as a muted cross; a future reasoning-on run would show an accent tick. */
.lb-reason {
  text-align: center;
}

.lb-reason-mark {
  display: inline-block;
  font-size: 0.95rem;
  line-height: 1;
  cursor: help;
}

.lb-reason-off {
  color: var(--text-ter);
}

.lb-reason-on {
  color: var(--accent);
  font-weight: 700;
}

/* --- Blog ---------------------------------------------------------------- */
.blog-kicker {
  font-family: "Cormorant Garamond", Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.72rem;
  color: var(--text-ter);
  margin-bottom: 0.4rem;
}

.blog-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 1rem;
}

.blog-card {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-subtle);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.blog-card:hover {
  border-color: var(--accent-lt);
  transform: translateY(-1px);
}

.blog-card-link {
  display: block;
  padding: 1.1rem 1.25rem;
  text-decoration: none;
}

.blog-card-date {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--text-ter);
  margin: 0 0 0.3rem;
}

.blog-card-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.22rem;
  font-weight: 500;
  color: var(--text);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}

.blog-card-model {
  font-size: 0.8rem;
  color: var(--accent);
  margin: 0 0 0.5rem;
}

.blog-card-sum {
  font-size: 0.9rem;
  color: var(--text-sec);
  line-height: 1.6;
  margin: 0 0 0.6rem;
}

.blog-card-more {
  font-size: 0.8rem;
  color: var(--link);
}

/* Report body: the reports are table-heavy (audit verdicts, telemetry). */
.blog-prose {
  max-width: 76ch;
}

.blog-prose h2 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text);
  margin: 2.4rem 0 0.9rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border-lt);
}

.blog-prose h3 {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  margin: 1.7rem 0 0.6rem;
}

.blog-prose p,
.blog-prose li {
  color: var(--text-sec);
  line-height: 1.75;
}

.blog-prose a {
  color: var(--link);
}

.blog-prose blockquote {
  margin: 1.2rem 0;
  padding: 0.7rem 1rem;
  border-left: 3px solid var(--accent-lt);
  background: var(--bg-subtle);
}

.blog-prose blockquote p {
  margin-bottom: 0.5rem;
}

.blog-prose blockquote p:last-child {
  margin-bottom: 0;
}

.blog-prose code {
  font-size: 0.85em;
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  padding: 0.1em 0.35em;
}

.blog-prose pre {
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
  padding: 0.9rem 1rem;
  overflow-x: auto;
}

.blog-prose pre code {
  background: none;
  border: none;
  padding: 0;
}

.blog-prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.2rem 0;
  font-size: 0.85rem;
  display: block;
  overflow-x: auto;
}

.blog-prose th,
.blog-prose td {
  border: 1px solid var(--border-lt);
  padding: 0.45rem 0.6rem;
  text-align: left;
  vertical-align: top;
  color: var(--text-sec);
}

.blog-prose th {
  background: var(--bg-subtle);
  color: var(--text);
  font-weight: 600;
  white-space: nowrap;
}

.blog-prose hr {
  border: none;
  border-top: 1px solid var(--border-lt);
  margin: 2rem 0;
}

.lb-cov-btn:hover,
.lb-cov-btn:focus-visible {
  color: var(--accent);
  border-color: var(--accent);
  outline: none;
}

/* Appended to <body>, not nested in the cell: #mcq-table scrolls on both axes
   and would clip an absolutely-positioned child. */
.lb-cov-tooltip {
  position: absolute;
  z-index: 60;
  width: min(21rem, 88vw);
  padding: 0.7rem 0.85rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
  text-align: left;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-sec);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.1s ease;
  pointer-events: none;
}

.lb-cov-tooltip.active {
  visibility: visible;
  opacity: 1;
}

.lb-cov-tooltip strong {
  display: block;
  margin-bottom: 0.3rem;
  color: var(--text);
  font-size: 0.86rem;
}

.lb-cov-tooltip p {
  margin: 0 0 0.25rem;
}

.lb-cov-tooltip .lb-cov-main {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.lb-cov-tooltip .lb-cov-sub {
  font-size: 0.78rem;
}

.lb-cov-tooltip .lb-cov-note {
  font-size: 0.75rem;
  color: var(--text-ter);
}

.lb-cov-tooltip .lb-cov-list {
  margin: 0.3rem 0 0.35rem;
  padding-left: 1rem;
  font-size: 0.78rem;
}

.lb-cov-tooltip .lb-cov-list li {
  margin-bottom: 0.15rem;
}

.lb-cov-tooltip .lb-cov-why {
  margin-top: 0.45rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--border-lt);
  font-size: 0.75rem;
  color: var(--text-ter);
}

.lb-controls-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}

.lb-controls-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.lb-mode-filter {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.lb-filter-label {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-ter);
}

.lb-select-wrap {
  position: relative;
}

.lb-filter-select {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 2.2rem 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
  min-width: 140px;
}

.lb-filter-select:hover,
.lb-filter-select:focus { border-color: var(--accent); outline: none; }

.lb-select-wrap::after {
  content: "";
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-ter);
  pointer-events: none;
}

.lb-search-bar {
  display: inline-flex;
}

.lb-search-input {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  min-width: 200px;
  transition: border-color 0.15s ease;
}

.lb-search-input::placeholder {
  color: var(--text-ter);
  font-style: italic;
}

.lb-search-input:hover,
.lb-search-input:focus { border-color: var(--accent); outline: none; }

.lb-search-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  height: 14px;
  width: 14px;
  background: var(--text-ter);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/%3E%3C/svg%3E");
  mask-size: contain;
  cursor: pointer;
}

.lb-tabs {
  display: inline-flex;
  gap: 0.3rem;
  padding: 0.3rem;
  border: 1px solid var(--border);
  border-radius: 3px;
  flex-wrap: wrap;
}

.lb-tab {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 1.1rem;
  border: none;
  border-radius: 2px;
  background: none;
  color: var(--text-sec);
  cursor: pointer;
}

.lb-tab:hover { color: var(--text); }
.lb-tab.active { background: var(--accent); color: #fff; }

.lb-panel { display: none; }
.lb-panel.active { display: block; }

#mcq-table { overflow-x: auto; }

table.lb-table {
  width: 100%;
  min-width: 1040px;
  border-collapse: collapse;
  font-size: 0.93rem;
}

table.lb-table th {
  text-align: left;
  font-family: "Crimson Pro", Georgia, serif;
  font-weight: 500;
  font-size: 0.78rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-ter);
  border-bottom: 1px solid var(--border);
  padding: 0.6rem 0.9rem;
}

.lb-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  text-transform: inherit;
  cursor: pointer;
}

.lb-sort-btn:hover,
.lb-sort-btn:focus-visible,
.lb-sort-btn.active {
  color: var(--accent);
}

.lb-sort-btn:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.lb-sort-arrow {
  flex: 0 0 auto;
  min-width: 0.75rem;
  font-size: 0.9rem;
  line-height: 1;
  text-align: center;
}

table.lb-table td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--border-lt);
  color: var(--text);
}

table.lb-table tr:last-child td {
  border-bottom: none;
}

table.lb-table td.lb-na {
  color: var(--text-ter);
  cursor: help;
}

table.lb-table tr.lb-row-rank1 td { background: var(--bg-subtle); }
table.lb-table td.lb-rank { font-weight: 500; color: var(--accent); width: 4rem; }
table.lb-table td.lb-score { font-variant-numeric: tabular-nums; white-space: nowrap; }
table.lb-table td.lb-params {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 0.82rem;
  color: var(--text-sec);
  white-space: nowrap;
}

.lb-chart-card {
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 3px;
  padding: 1.75rem 1.75rem 1.25rem;
}

.lb-chart-card svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  font-family: "Crimson Pro", Georgia, serif;
}
.lb-chart-card .lb-axis-label { fill: var(--text-ter); font-size: 11px; letter-spacing: 0.02em; }
.lb-chart-card .lb-grid-line { stroke: var(--border-lt); stroke-width: 1; }
.lb-chart-card .lb-cost-band-divider { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 5; }
.lb-chart-card .lb-tick-label { fill: var(--text-ter); font-size: 11.5px; }

.lb-dot {
  stroke: var(--bg-subtle);
  stroke-width: 2;
  cursor: pointer;
}

/* Brand-logo chart markers (smolbenchmark-style): a light disc with the org /
   model-family logo clipped into a circle. Falls back to .lb-dot when no logo. */
.lb-dot-logo-bg {
  fill: #faf8f5;
  stroke: var(--border);
  stroke-width: 1;
  cursor: pointer;
}

.lb-dot-logo {
  pointer-events: none;
}

/* Small brand mark before the model name in the leaderboard table. */
.lb-model-logo {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  border-radius: 3px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border-lt);
  flex: none;
  align-self: center;
}

/* Brand legend under the leaderboard: decodes the marks used as chart markers
   and in the model column - logo : family name (company). */
.lb-brand-legend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
  margin: 1.5rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border-lt);
}

.lb-brand-legend:empty {
  display: none;
}

.lb-brand-legend-title {
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-ter);
}

.lb-brand-legend-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lb-brand-legend-list li {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}

.lb-brand-logo {
  width: 1.05rem;
  height: 1.05rem;
  object-fit: contain;
  border-radius: 3px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--border-lt);
  align-self: center;
}

.lb-brand-family {
  color: var(--text);
  font-size: 0.92rem;
}

.lb-brand-org {
  color: var(--text-sec);
  font-size: 0.88rem;
}

.lb-brand-org::before {
  content: "·";
  margin-right: 0.4rem;
  color: var(--text-ter);
}

.lb-brand-count {
  color: var(--text-ter);
  font-size: 0.78rem;
}

.lb-whisker {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.45;
}

.lb-whisker-cap {
  stroke: var(--accent);
  stroke-width: 2;
  opacity: 0.45;
}

.lb-hit {
  fill: transparent;
  cursor: pointer;
}

.lb-hit:focus-visible {
  stroke: var(--text);
  stroke-width: 1;
  outline: none;
}

.lb-tooltip {
  position: absolute;
  pointer-events: none;
  background: var(--accent);
  color: #fff;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(44, 44, 44, 0.16);
  transform: translate(-50%, calc(-100% - 10px));
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.12s ease;
  z-index: 10;
}

.lb-tooltip.active { opacity: 1; }
.lb-tooltip.below { transform: translate(-50%, 10px); }
.lb-tooltip strong { font-weight: 600; }
.lb-tooltip span { display: block; opacity: 0.85; font-size: 0.76rem; margin-top: 0.2rem; }


/* "Columns" dropdown - checkbox toggles for which metric columns to show */
.lb-metrics-toggle {
  display: inline-flex;
}

.lb-metrics {
  position: relative;
}

.lb-metrics-btn {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: transparent;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.15s ease;
}

.lb-metrics-btn:hover,
.lb-metrics-btn:focus-visible {
  border-color: var(--accent);
  outline: none;
  color: var(--accent);
}

.lb-metrics-arrow {
  font-size: 0.7rem;
  line-height: 1;
  color: var(--text-ter);
}

.lb-metrics-panel {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 40;
  min-width: 230px;
  max-height: min(70vh, 24rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  padding: 0.6rem 0.75rem;
  display: grid;
  gap: 0.25rem;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}

.lb-metrics-panel[hidden] {
  display: none;
}

.lb-metrics-option {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-sec);
  cursor: pointer;
  padding: 0.18rem 0.2rem;
  border-radius: 4px;
}

.lb-metrics-option:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.lb-metrics-option input {
  accent-color: var(--accent);
  cursor: pointer;
}

/* Charts tab - axis pickers + scatter */
.lb-chart-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  align-items: flex-end;
  margin-bottom: 1.5rem;
}

.lb-chart-controls .filter-label {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-ter);
}

.lb-dot-label {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

.lb-grid-line-v {
  stroke: var(--border-lt);
  stroke-width: 1;
}

/* Sub-lines under cells (task-set label, agent elapsed, HC detail) */
table.lb-table td .lb-sub {
  display: block;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--text-ter);
  margin-top: 0.12rem;
  font-variant-numeric: tabular-nums;
}

table.lb-table td .lb-elapsed {
  white-space: nowrap;
}

/* Hamburger before links wrap/crush (tablet + phone). */
@media (max-width: 1100px) {
  nav {
    height: auto;
    min-height: 56px;
    padding: 0 1rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .nav-title {
    min-width: 0;
    min-height: 56px;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-toggle {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    justify-self: end;
  }

  .nav-toggle:hover,
  .nav-toggle:focus-visible {
    background: var(--bg-subtle);
    outline: none;
  }

  nav.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  nav.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
  nav.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .nav-links {
    grid-column: 1 / -1;
    display: grid;
    flex-wrap: unset;
    gap: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    border-top: 1px solid transparent;
    transition: max-height 0.26s ease, opacity 0.18s ease, padding 0.26s ease, border-color 0.26s ease;
  }

  nav.nav-open .nav-links {
    max-height: 420px;
    padding: 0.35rem 0 0.65rem;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    border-top-color: var(--border-lt);
  }

  .nav-links a {
    display: block;
    padding: 0.72rem 0.25rem;
    font-size: 0.82rem;
    white-space: nowrap;
  }
}

@media (max-width: 740px) {
  .container { padding: 0 1rem; }
  .hero { padding: 4.25rem 0 3.5rem; }
  .hero h1 { font-size: 2.65rem; }
  .docs-list li { display: block; }
  .lb-controls-row { flex-direction: column; align-items: stretch; }
  .lb-controls-left { flex-direction: column; align-items: stretch; width: 100%; }
  .lb-tabs { width: 100%; }
  .lb-tab { flex: 1; text-align: center; }
  .lb-mode-filter { width: 100%; }
  .lb-select-wrap { flex: 1; }
  .lb-filter-select { width: 100%; }
  .lb-search-bar { width: 100%; }
  .lb-search-input { width: 100%; }
  .lb-tab { padding: 0.34rem 0.65rem; font-size: 0.76rem; }
  .lb-chart-card { padding: 1rem 0.75rem 0.8rem; }
  .lb-tooltip {
    width: max-content;
    max-width: min(145px, calc(100vw - 2rem));
    padding: 0.3rem 0.42rem;
    font-size: 0.58rem;
    line-height: 1.3;
    white-space: normal;
  }
  .lb-tooltip strong { font-size: 0.64rem; }
  .lb-tooltip span {
    font-size: 0.54rem;
    margin-top: 0.14rem;
    overflow-wrap: anywhere;
  }
}

/* --- Task browser (all 530 tasks + filters) --- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem 1.5rem;
  padding: 1rem 0 1.25rem;
  border-bottom: 1px solid var(--border-lt);
  margin-bottom: 1.25rem;
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.filter-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  opacity: 0.7;
}
.filter-options {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.filter-btn {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-sec);
  cursor: pointer;
  opacity: 0.8;
  transition: opacity 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.filter-btn:hover { opacity: 1; color: var(--text); border-color: var(--accent-lt); }
.filter-btn.active {
  opacity: 1;
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-subtle);
}
.filter-search input {
  font: inherit;
  font-size: 0.85rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: inherit;
  min-width: 14rem;
}
.filter-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.filter-search input::placeholder { color: var(--text-ter); opacity: 0.8; }

/* Custom selects - closed control matches site pills; open menu is a custom
   panel (native <option> popups can't be themed on macOS/Chromium). */
.select-wrap {
  position: relative;
  display: inline-block;
}
.select-wrap select,
.select-wrap .site-select {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 2.1rem 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color 0.15s ease;
  min-width: 8rem;
}
.select-wrap select:hover,
.select-wrap select:focus,
.select-wrap .site-select:hover,
.select-wrap .site-select:focus { border-color: var(--accent); outline: none; }
.select-wrap::after {
  content: "";
  position: absolute;
  right: 0.8rem;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-ter);
  pointer-events: none;
  z-index: 1;
}
.select-wrap.select-wrap-enhanced::after { display: none; }
.select-wrap select option,
.select-wrap .site-select option { background: var(--bg); color: var(--text); }

.site-select-enhanced {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.site-select-trigger {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  padding: 0.4rem 2.1rem 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg);
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 8rem;
  max-width: min(28rem, 92vw);
  transition: border-color 0.15s ease, background 0.15s ease;
  text-align: left;
  line-height: 1.35;
}
.site-select-trigger:hover,
.site-select-trigger:focus,
.select-wrap.is-open .site-select-trigger {
  border-color: var(--accent);
  outline: none;
}
.site-select-trigger-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.site-select-caret {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text-ter);
  transition: transform 0.15s ease;
}
.select-wrap.is-open .site-select-caret { transform: rotate(180deg); }

.site-select-menu {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 80;
  min-width: 100%;
  width: max-content;
  max-width: min(32rem, 92vw);
  max-height: min(18rem, 60vh);
  overflow-y: auto;
  margin: 0;
  padding: 0.35rem;
  list-style: none;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 10px 28px rgba(44, 44, 44, 0.08), 0 2px 6px rgba(44, 44, 44, 0.04);
}
.site-select-menu[hidden] { display: none !important; }
.site-select-option {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  color: var(--text);
  cursor: pointer;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.35;
  white-space: nowrap;
}
.site-select-option:hover,
.site-select-option.is-active {
  background: var(--bg-subtle);
  color: var(--text);
}
.site-select-option.is-selected {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.site-select-option-check {
  width: 0.85rem;
  flex: 0 0 auto;
  color: var(--accent);
  font-size: 0.75rem;
  line-height: 1;
  opacity: 0;
}
.site-select-option.is-selected .site-select-option-check { opacity: 1; }

.public-run-combo .site-select-trigger { min-width: 16rem; }

/* Typed model filter leftover (no longer used; keep harmless). */
.public-run-combo::after { display: none; }
.select-wrap.public-run-combo.select-wrap-enhanced::after { display: none; }
.select-wrap .public-run-input {
  min-width: 15rem;
  cursor: text;
}
.public-run-input::placeholder {
  color: var(--text-ter);
  font-style: italic;
}
.task-count {
  font-size: 0.9rem;
  opacity: 0.8;
  margin: 0 0 1rem;
}
.task-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  align-items: stretch;
}
.task-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  padding: 1rem 1.1rem 1.1rem;
}
.task-card .public-example-meta { margin-bottom: 0.4rem; }
.task-card .public-example-tags { margin-bottom: 0.6rem; }
.task-card .public-example-prompt {
  margin: 0.35rem 0 0;
  flex: 1 1 auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  overflow: visible;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  font-size: 0.82rem !important;
  line-height: 1.55 !important;
  font-family: inherit !important;
}
.task-card .public-example-prompt code {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
  color: var(--text) !important;
  white-space: pre-wrap;
}
.tag-det {
  color: var(--text-sec);
  border-color: var(--border);
}

.card-footer {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border-lt);
  display: flex;
  justify-content: flex-end;
}

.card-trajectory-link {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent-lt);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
}

.card-trajectory-link:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.tag.tag-has-traj { color: var(--accent); border-color: var(--accent-lt); }

/* --- Homepage "Benchmark Summary" cards + per-day table --- */
.bench-summary-cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
  margin: 1.25rem 0;
}

.bench-card {
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  background: var(--bg-subtle);
  padding: 0.85rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.bench-card-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.1;
  color: var(--accent);
  font-weight: 500;
}

.bench-card-label {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text);
}

.bench-card-sub {
  font-size: 0.78rem;
  color: var(--text-sec);
  line-height: 1.45;
}

.bench-day-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
}

.bench-day-table {
  width: 100%;
  max-width: 900px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.bench-day-table th,
.bench-day-table td {
  text-align: left;
  padding: 0.5rem 0.8rem;
  border-bottom: 1px solid var(--border-lt);
}

.bench-day-table th {
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-ter);
}

@media (max-width: 900px) {
  .bench-summary-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .bench-summary-cards { grid-template-columns: 1fr; }
}

/* Task detail page */

.section-desc {
  font-size: 0.92rem;
  color: var(--text-sec);
  margin: -0.7rem 0 1.4rem;
}

.task-state-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.task-state-item {
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  padding: 0.7rem 0.9rem;
  background: var(--bg-subtle);
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.task-state-label {
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-ter);
}

.task-state-value {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.4;
}

.task-prompt-block {
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  padding: 1.1rem 1.2rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text);
}

.task-prompt-block code {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

.trajectory-viewer {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}

.trajectory-gif-wrap {
  flex: 0 1 auto;
  min-width: 0;
  margin: 0;
}

.trajectory-gif {
  display: block;
  height: min(72vh, 620px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 1080 / 2412;
  object-fit: contain;
  background: #fff;
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  cursor: zoom-in;
  margin-inline: auto;
}

.trajectory-gif-wrap figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-top: 0.4rem;
  text-align: center;
}

.trajectory-meta {
  flex: 1 1 300px;
  min-width: 0;
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  padding: 1rem 1.1rem;
  background: var(--bg-subtle);
}

.trajectory-meta h3 {
  font-size: 1.05rem;
  margin-bottom: 0.7rem;
}

.trajectory-meta-list {
  list-style: none;
  display: grid;
  gap: 0.35rem;
  margin-bottom: 0.9rem;
}

.trajectory-meta-list li {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  font-size: 0.86rem;
}

.tm-key {
  color: var(--text-ter);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.7rem;
  align-self: center;
}

.tm-val { text-align: right; color: var(--text); }

.run-ok { color: #3f7d4e; font-weight: 600; }
.run-fail { color: #a04b3c; font-weight: 600; }

.section-tag {
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--link);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.12rem 0.5rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}

.step-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}

.step-counter {
  font-size: 0.86rem;
  color: var(--text-sec);
  padding: 0 0.3rem;
  min-width: 7.5rem;
  text-align: center;
}

.step-view {
  border: 1px solid var(--border-lt);
  border-radius: 8px;
  background: var(--bg-subtle);
  padding: 1.1rem 1.2rem;
}

.step-view-card {
  display: grid;
  grid-template-columns: min(240px, 30%) 1fr;
  gap: 1.4rem;
  align-items: start;
}

/* Phone-frame screenshot for the current step - left column. Anchored to the
   TOP of the card and never re-centred/sticky, so the phone canvas stays
   pixel-fixed while the step text on the right grows or shrinks. */
.step-shot-figure {
  margin: 0;
  grid-column: 1;
  grid-row: 1 / span 10;
  align-self: start;
  position: relative;
  width: min(240px, 100%);
  margin-inline: auto;
}

/* The marker SVG and the loading overlay are absolutely positioned, so they need
   a containing block that is exactly the phone image - NOT the figure, which now
   also holds the legend below the frame. Binding them to the figure would stretch
   the 1080x2412 viewBox over the legend and throw every marker off. */
.step-shot-frame {
  position: relative;
}

/* Legend for the marker vocabulary. Always visible rather than appearing only on
   steps that have a tap or swipe: toggling it per step would shift the layout
   under the frame on every tick of playback. */
.step-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.85rem;
  margin-top: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-sec);
}

.step-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.32rem;
}

.step-legend-icon {
  width: 1rem;
  height: 1rem;
  flex: none;
  color: var(--accent);
}

.step-legend-halo {
  fill: rgba(138, 115, 85, 0.22);
}

.step-legend-dot {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 1.6;
}

/* Long press: a closed ring with a smaller dot, mirroring .step-action-ring-longpress. */
.step-legend-ring {
  fill: none;
  stroke: var(--accent);
}

.step-legend-ring-press {
  stroke-width: 1.6;
}

/* Type: the focus tap that precedes typing, drawn dashed like the marker. */
.step-legend-ring-dashed {
  stroke-width: 1.4;
  stroke-dasharray: 2.6 2;
}

.step-legend-area {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.4;
  stroke-dasharray: 2.6 2;
}

.step-legend-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-dasharray: 3.4 2.6;
}

.step-legend-head {
  fill: var(--accent);
}

.step-screenshot {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1080 / 2412;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  box-shadow: 0 6px 18px rgba(44, 40, 34, 0.12);
}

/* Keep the phone box reserved (never collapse) so the canvas cannot jump
   between steps that have no screenshot. */
.step-screenshot.is-empty {
  visibility: hidden;
}

/* Loading state for the phone frame. Step PNGs are multi-MB files pulled from
   HF, and the viewer deliberately holds the previous frame until the next one
   has decoded so the phone image and the transcript always advance together -
   which meant clicking Play looked like the page had frozen. This overlay makes
   that wait legible instead: previous frame stays as a dimmed backdrop, spinner
   and the step being fetched sit on top. */
.step-shot-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.75rem;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(250, 248, 245, 0.88);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  color: var(--text-sec);
  text-align: center;
}

/* display:flex above would otherwise defeat the hidden attribute. */
.step-shot-loading[hidden] {
  display: none;
}

.step-spinner {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  /* Translucent accent track rather than a solid --border one: the overlay wash
     is itself near --bg, so a --border ring has almost no contrast against it
     and the spinner read as a lone arc. */
  border: 2px solid rgba(138, 115, 85, 0.28);
  border-top-color: var(--accent);
  animation: step-spin 0.7s linear infinite;
}

@keyframes step-spin {
  to { transform: rotate(360deg); }
}

@keyframes step-spinner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

.step-shot-loading-text {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.4;
}

@media (prefers-reduced-motion: reduce) {
  .step-spinner {
    border-color: transparent;
    background: var(--accent-lt);
    animation: step-spinner-pulse 1.5s ease-in-out infinite;
  }
}

/* Click / swipe markers drawn over the phone frame. The SVG's viewBox is the
   native 1080x2412 device space that the screenshots, the GIF and the trajectory
   coordinates all share, so marker coordinates need no client-side math and stay
   correct at any rendered width. */
.step-action {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.step-action[hidden] {
  display: none;
}

/* Tap: one expanding ring that fires as the step appears, plus a persistent dot
   so the tap stays legible after the animation ends. */
.step-action-ring {
  fill: none;
  stroke: var(--accent);
  stroke-width: 10;
  transform-box: fill-box;
  transform-origin: center;
  animation: step-tap-ring 900ms cubic-bezier(0.2, 0.6, 0.3, 1) forwards;
}

@keyframes step-tap-ring {
  from { transform: scale(0.5); opacity: 0.95; }
  to { transform: scale(2.4); opacity: 0; }
}

/* Long press: heavier ring that breathes rather than fading out. It must never
   reach opacity 0 - playback is paused by default, so most viewers meet a
   marker as a still frame, and the ring is the only thing separating a press
   from the plain tap above. */
.step-action-ring-longpress {
  stroke-width: 16;
  animation: step-press-ring 1500ms ease-in-out infinite;
}

@keyframes step-press-ring {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 0.5; }
}

/* Focus tap: the tap type/type_secret performs on the field before typing.
   Dashed, and deliberately static: the dashes are what say "typed into" in a
   frozen frame, so this ring does not animate away the way the tap ripple
   does. Matches the dashed swatch in the legend. */
.step-action-ring-focus {
  stroke-dasharray: 16 12;
  animation: none;
  opacity: 0.8;
}

.step-action-dot-halo { fill: rgba(138, 115, 85, 0.22); }

.step-action-dot {
  fill: var(--accent);
  stroke: #fff;
  stroke-width: 6;
}

/* Swipe: dashed path, static start ring, solid arrowhead at the destination. */
.step-action-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 9;
  stroke-dasharray: 26 20;
  animation: step-swipe-dash 900ms linear infinite;
}

@keyframes step-swipe-dash {
  to { stroke-dashoffset: -46; }
}

.step-action-head { fill: var(--accent); }

.step-action-from {
  fill: #fff;
  stroke: var(--accent);
  stroke-width: 8;
}

.step-action-area {
  fill: rgba(138, 115, 85, 0.16);
  stroke: var(--accent);
  stroke-width: 8;
  stroke-dasharray: 22 16;
}

/* Reduced motion: no ripple, but every kind keeps a static ring of its own, so
   the marks stay distinguishable without any movement. */
@media (prefers-reduced-motion: reduce) {
  .step-action-ring { animation: none; }
  /* Tap is the dot alone (its ripple is decoration); hiding the ring keeps it
     matching both the moving version and the legend swatch. */
  .step-action-ring-tap { display: none; }
  .step-action-ring-longpress { opacity: 0.85; transform: none; stroke-width: 12; }
  .step-action-ring-focus { opacity: 0.8; }
  .step-action-path { animation: none; }
}

/* All step data (heading, thought, code, tools, output) lives in the right
   column, next to the phone. */
.step-heading,
.step-thought,
.step-code,
.step-tools,
.step-output {
  grid-column: 2;
}

.step-heading {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 0.6rem;
}

.step-thought-text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  font-style: italic;
  margin-bottom: 0.6rem;
  /* The renderer emits block markup (paragraphs, lists, code) and never leaves
     raw newlines in its output, so normal collapsing is correct here. */
  white-space: normal;
}

/* Rendered agent prose. Kept tight: thoughts are long and the column is narrow,
   so generous margins would push the transcript out of step with the phone. */
.step-thought-text > :first-child { margin-top: 0; }
.step-thought-text > :last-child { margin-bottom: 0; }
.step-thought-text p {
  margin: 0 0 0.55rem;
}
.step-thought-text ul,
.step-thought-text ol {
  margin: 0 0 0.55rem;
  padding-left: 1.15rem;
}
.step-thought-text li {
  margin: 0.1rem 0;
}
.step-thought-text li > ul,
.step-thought-text li > ol {
  margin: 0.1rem 0 0.15rem;
}
/* A bolded standalone line reads as a heading in the corpus, so give it the
   weight and spacing of one. */
.step-thought-text .md-heading {
  margin: 0.7rem 0 0.4rem;
  font-weight: 700;
  font-style: normal;
}
.step-thought-text .md-heading:first-child {
  margin-top: 0;
}
.step-thought-text code,
.step-tool-summary code {
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 0.88em;
  font-style: normal;
  background: var(--accent-lt);
  border-radius: 3px;
  padding: 0.05em 0.3em;
}
.step-thought-text .md-pre {
  margin: 0 0 0.55rem;
  padding: 0.5rem 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  overflow-x: auto;
  white-space: pre;
}
.step-thought-text .md-pre code {
  background: none;
  padding: 0;
  font-size: 0.8rem;
}
.step-thought-text strong {
  font-style: normal;
}

.step-thought-empty {
  font-size: 0.85rem;
  color: var(--text-ter);
  font-style: italic;
  margin-bottom: 0.6rem;
}

.step-usage {
  font-size: 0.74rem;
  letter-spacing: 0.05em;
  color: var(--text-ter);
  margin-bottom: 0.7rem;
}

.step-tools { display: grid; gap: 0.55rem; }

.step-tool {
  border: 1px solid var(--border-lt);
  border-left-width: 3px;
  border-radius: 5px;
  background: #fff;
  padding: 0.55rem 0.75rem;
}

.step-tool-ok { border-left-color: #3f7d4e; }
.step-tool-fail { border-left-color: #a04b3c; }

.step-tool-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}

.step-tool-name { font-size: 0.82rem; }

.tool-ok { color: #3f7d4e; font-size: 0.7rem; }
.tool-fail { color: #a04b3c; font-size: 0.7rem; }

.step-tool-summary {
  font-size: 0.82rem;
  color: var(--text-sec);
  margin-top: 0.2rem;
}

.step-code { margin-top: 0.7rem; }
.step-output { margin-top: 0.7rem; }

.step-block-label {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 0.3rem;
}

.step-code-block,
.step-output-text {
  font-size: 0.8rem;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  padding: 0.5rem 0.7rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-height: 360px;
  overflow: auto;
  line-height: 1.5;
}

.step-tool-args {
  font-size: 0.78rem;
  margin: 0.2rem 0;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: 5px;
  padding: 0.45rem 0.65rem;
  white-space: pre-wrap;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  max-height: 300px;
  overflow: auto;
  line-height: 1.5;
}

/* Syntax highlight tokens - muted, fits the site palette */
.tok-key  { color: #8a5a3b; }        /* warm brown for JSON keys */
.tok-str  { color: #3f6b57; }        /* soft green for strings */
.tok-num  { color: #7a6a2f; }        /* muted olive for numbers */
.tok-kw   { color: #5c7a8a; }        /* muted teal for true/false/null */
.tok-tag  { color: #6b8a94; }        /* teal for XML tag names */
.tok-attr { color: #8a7355; }        /* accent brown for attr names */

.step-controls .btn[disabled] { opacity: 0.45; cursor: default; }

/* Task-set picker (Tasks landing) - two square-ish choice cards */
.task-set-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.4rem;
  margin-top: 1.25rem;
}

.task-set-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg-subtle);
  padding: 1.6rem 1.5rem 1.4rem;
  text-decoration: none;
  color: var(--text);
  aspect-ratio: 1 / 1;
  max-height: 420px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
  gap: 0.7rem;
}

.task-set-card:hover,
.task-set-card:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(44, 40, 34, 0.1);
  outline: none;
}

.task-set-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-ter);
}

.task-set-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--accent);
  font-weight: 500;
}

.task-set-desc {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text-sec);
  flex: 1;
}

.task-set-cta {
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: var(--link);
  margin-top: 0.5rem;
}

@media (max-width: 900px) {
  .task-set-picker { grid-template-columns: 1fr; }
  .task-set-card {
    aspect-ratio: auto;
    max-height: none;
  }
}
@media (max-width: 900px) {
  .task-state-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .public-example-list { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .task-state-grid { grid-template-columns: 1fr; }
  .trajectory-viewer { flex-direction: column; }
  .step-view-card {
    grid-template-columns: 1fr;
    gap: 0.9rem;
  }
  .step-shot-figure {
    grid-column: 1;
    grid-row: auto;
    position: relative;
    max-width: 200px;
    margin: 0 auto;
  }
  .step-heading,
  .step-thought,
  .step-code,
  .step-tools,
  .step-output {
    grid-column: 1;
  }
}

/* Tweet-style "New on the board" cards (homepage) */
.tweet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.2rem;
  margin-top: 1.1rem;
}
.tweet-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  font-size: 0.95rem;
  line-height: 1.55;
}
.tweet-head {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-bottom: 0.7rem;
}
.tweet-avatar {
  font-size: 1.7rem;
  line-height: 1;
}
.tweet-name {
  font-weight: 600;
}
.tweet-handle {
  display: block;
  color: var(--text-ter);
  font-size: 0.8rem;
}
.tweet-body strong {
  color: var(--accent);
}
.tweet-cta {
  margin-top: 0.8rem;
  font-weight: 600;
}
.tweet-cta a {
  color: var(--accent);
  text-decoration: none;
}
.tweet-cta a:hover {
  text-decoration: underline;
}

/* Footnote references + footnotes section (superscript links + bottom list) */
.fn-ref {
  font-size: 0.72em;
  line-height: 0;
  vertical-align: super;
  padding-left: 0.1em;
}
.fn-ref a {
  color: var(--accent);
  text-decoration: none;
}
.fn-ref a:hover {
  text-decoration: underline;
}
.footnotes {
  margin-top: 2.5rem;
}
.footnotes-list {
  font-size: 0.85rem;
  color: var(--text-ter);
  padding-left: 1.4rem;
}
.footnotes-list li {
  margin-bottom: 0.55rem;
}
.footnotes-list code {
  font-size: 0.85em;
}
.footnotes-list a {
  color: var(--accent);
}
.fn-back {
  margin-left: 0.25rem;
  text-decoration: none;
}

/* Typical public-run file tree (Evaluation) */
pre.run-tree {
  margin: 0.85rem 0 0.4rem;
  padding: 1rem 1.15rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border-lt);
  border-radius: 4px;
  overflow-x: auto;
  font-family: "SF Mono", "Fira Code", Consolas, monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  color: var(--text-sec);
  white-space: pre;
}
pre.run-tree a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
pre.run-tree a:hover { text-decoration: underline; }
pre.run-tree a:target {
  background: rgba(138, 115, 85, 0.14);
  border-radius: 2px;
  outline: 1px solid var(--accent-lt);
  scroll-margin-top: 4.5rem;
}
pre.run-tree .run-tree-note {
  color: var(--text-ter);
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.86em;
}

/* Browse Apps (Interaction Mining-style grid, site cream theme) */
.container-wide { max-width: 1080px; }

.app-page-header {
  padding: 1.75rem 0 1.4rem;
  border-bottom: 1px solid var(--border-lt);
  text-align: left;
}
.app-page-header-list { padding-top: 2.4rem; padding-bottom: 1.75rem; }
.app-back-link {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 1rem;
}
.app-back-link:hover { color: var(--accent); }
.app-kicker {
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-ter);
  margin-bottom: 0.45rem;
}
.app-hero-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
}
.app-hero-text { min-width: 0; }
.app-title-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
}
.app-page-title {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.65rem;
  letter-spacing: 0.01em;
  color: var(--text);
  line-height: 1.2;
  margin: 0;
}
.app-page-title-lg { font-size: 2.1rem; margin-bottom: 0.35rem; }
.app-platform-pill {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-sec);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.15rem 0.55rem;
}
.app-page-meta {
  margin: 0.35rem 0 0;
  font-size: 0.92rem;
  color: var(--text-sec);
  line-height: 1.5;
}
.app-page-lead { max-width: 42rem; }

.apps-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.apps-search input {
  min-width: 220px;
  padding: 0.45rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #fff;
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.apps-search input:focus {
  outline: none;
  border-color: var(--accent);
}
.apps-empty { margin: 0.5rem 0 2rem; }
.apps-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.35rem 1.75rem;
  margin-bottom: 2.5rem;
}
a.app-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: inherit;
  text-decoration: none;
  min-width: 0;
  padding: 0.35rem 0.25rem;
  border-radius: 6px;
  transition: background 0.15s ease;
}
a.app-card:hover {
  background: var(--bg-subtle);
  color: inherit;
}
.app-icon {
  --app-color: var(--accent);
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--app-color) 14%, #fff);
  border: 1px solid color-mix(in srgb, var(--app-color) 22%, var(--border-lt));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35);
}
.app-icon-letter {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--app-color);
  line-height: 1;
  user-select: none;
}
.app-icon-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 7px;
  background: #fff;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.app-icon-img.is-loaded { opacity: 1; }
.app-icon-lg {
  flex-basis: 56px;
  width: 56px;
  height: 56px;
  border-radius: 14px;
}
.app-icon-lg .app-icon-letter { font-size: 1.55rem; }
.app-icon-lg .app-icon-img { padding: 8px; }
.app-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  gap: 0.1rem;
}
.app-card-name {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-card-publisher {
  font-size: 0.82rem;
  color: var(--text-sec);
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-card-meta {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-ter);
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}
@media (max-width: 1100px) {
  .apps-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .apps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.1rem; }
  .app-icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 10px; }
  .app-page-title { font-size: 1.4rem; }
  .app-page-title-lg { font-size: 1.75rem; }
}
@media (max-width: 480px) {
  .apps-grid { grid-template-columns: 1fr; }
}


/* AndroidLife viz charts */
.viz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.35rem;
  margin: 1.25rem 0 1.75rem;
  align-items: stretch;
}
.viz-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  padding: 1.05rem 1.15rem 1.2rem;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}
.viz-card h4 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 400;
  font-size: 1.15rem;
  margin: 0 0 0.85rem;
  color: var(--text);
  letter-spacing: 0.01em;
}
.viz-card .viz-caption {
  font-size: 0.82rem;
  color: var(--text-ter);
  margin: auto 0 0;
  padding-top: 0.85rem;
  line-height: 1.45;
  border-top: none;
}
.pie-wrap,
.viz-chart-wrap {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  flex-wrap: wrap;
  flex: 1;
}
.pie-canvas-wrap {
  position: relative;
  width: 148px;
  height: 148px;
  flex: 0 0 auto;
}
.pie-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
}
.pie-center {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  line-height: 1.1;
  gap: 0.15rem;
}
.pie-center-value {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  font-size: 1.45rem;
  color: #4a433c;
}
.pie-center-label {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.68rem;
  color: #8a8074;
  letter-spacing: 0.02em;
}
.bar-canvas-wrap {
  position: relative;
  width: 100%;
  height: 148px;
  flex: 1 1 auto;
}
.pie {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid var(--border);
}
.pie-legend {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.88rem;
  color: var(--text-sec);
  line-height: 1.35;
  flex: 1 1 180px;
  min-width: 168px;
}
.pie-legend li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.35rem 0;
}
.pie-legend--grid {
  display: grid;
  grid-template-columns: 0.7rem minmax(0, 1fr) 2.4rem 3.4rem;
  column-gap: 0.55rem;
  row-gap: 0.55rem;
  align-items: center;
}
.pie-legend--grid li {
  display: contents;
  margin: 0;
}
.pie-legend--grid .swatch {
  margin-top: 0;
}
.pie-legend-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-sec);
  font-weight: 400;
  min-width: 0;
}
.pie-legend-name,
.pie-legend a.pie-legend-name {
  text-underline-offset: 2px;
}
.pie-legend-count {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}
.pie-legend-pct {
  font-variant-numeric: tabular-nums;
  color: var(--text-ter);
  text-align: right;
  white-space: nowrap;
}
.pie-legend a {
  text-underline-offset: 2px;
}
.swatch {
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 2px;
  flex: 0 0 auto;
  margin-top: 0;
}
.bar-chart { margin: 0.4rem 0 0; }
.bar-row {
  display: grid;
  grid-template-columns: 5.5rem 1fr 3.2rem;
  gap: 0.55rem;
  align-items: center;
  margin: 0.45rem 0;
  font-size: 0.88rem;
  color: var(--text-sec);
}
.bar-track {
  height: 0.65rem;
  background: var(--bg);
  border: 1px solid var(--border-lt);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 1px;
}
.bar-row .bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }
.citation-block {
  margin-top: 0.75rem;
  padding: 1rem 1.15rem;
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow-x: auto;
}
.citation-block pre {
  margin: 0;
  background: transparent;
  border: none;
  padding: 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
.callout ul {
  margin: 0.35rem 0 0;
  padding-left: 1.15rem;
}
.callout ul li {
  margin: 0.4rem 0;
}
.flow-h {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.1rem 0 1.4rem;
}
.flow-h .flow-step { max-width: 160px; flex: 1 1 130px; padding: 0.7rem 0.75rem; }
.flow-h .flow-arrow-h {
  align-self: center;
  color: var(--text-ter);
  font-size: 1.1rem;
  padding: 0 0.1rem;
}
@media (max-width: 640px) {
  .flow-h .flow-arrow-h { display: none; }
  .bar-row { grid-template-columns: 4.2rem 1fr 2.8rem; }
}


.task-family-list ul {
  margin: 0.4rem 0 0.6rem 1.1rem;
  padding: 0;
  list-style: disc;
}
.task-family-list ul li {
  margin: 0.25rem 0;
  color: var(--text-sec);
  font-size: 0.95em;
}
.flow-branch + .flowchart .flow-arrow:first-child {
  margin-top: 0.25rem;
}

/* Evaluation flowchart (Fig. 3) - process -> diamond -> fork -> join -> end */
.flow-figure {
  margin: 1.4rem 0 1.6rem;
  padding: 0;
  border: 0;
}
.flow-figure > figcaption,
.fig-caption {
  margin: 0.9rem auto 0;
  max-width: 640px;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text-sec);
  text-align: center;
}

.flow-chart-eval {
  --fce-line: var(--border);
  --fce-w: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--fce-w);
  margin: 0 auto;
}

.fce-node {
  width: min(100%, 300px);
  border: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
  padding: 0.7rem 0.9rem;
}
.fce-process { border-radius: 3px; }
.fce-end { width: min(100%, 340px); }
.fce-title {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.fce-detail {
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.82rem;
  line-height: 1.4;
  color: var(--text-sec);
}
.fce-detail code { font-size: 0.88em; }

.fce-vline {
  width: 1px;
  height: 1.4rem;
  background: var(--fce-line);
  position: relative;
}
.fce-vline::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--fce-line);
}

.fce-decision {
  /* square footprint; diamond drawn via ::before so text stays upright + inside */
  position: relative;
  width: 10.75rem;
  height: 10.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin: 0.45rem 0 0.65rem;
  border: none;
  background: transparent;
  clip-path: none;
}
.fce-decision::before {
  content: "";
  position: absolute;
  inset: 14%;
  border: 1px solid var(--border);
  background: var(--bg);
  transform: rotate(45deg);
  z-index: 0;
}
.fce-decision-inner {
  position: relative;
  z-index: 1;
  width: 58%;
  max-height: 58%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  text-align: center;
  overflow: hidden;
}
.fce-decision-text {
  display: block;
  font-family: "Crimson Pro", Georgia, serif;
  font-size: 0.86rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--text);
}
.fce-decision-sub {
  display: block;
  font-size: 0.62rem;
  line-height: 1.25;
  color: var(--text-ter);
}
.fce-decision-sub code {
  font-size: 0.9em;
  word-break: break-word;
}

.fce-fork {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fce-fork-stem {
  width: 1px;
  height: 0.85rem;
  background: var(--fce-line);
}
.fce-fork-bar {
  width: calc(50% + 0.5rem); /* span column centers (1fr 1fr + 1rem gap) */
  height: 1px;
  background: var(--fce-line);
}
.fce-fork-downs {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.fce-fork-down {
  width: 1px;
  height: 1.5rem;
  background: var(--fce-line);
  position: relative;
  justify-self: center;
}
.fce-fork-down::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--fce-line);
}
.fce-fork-down em {
  position: absolute;
  top: 0.15rem;
  font-style: normal;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.fce-fork-downs .fce-fork-down:first-child em { right: 0.45rem; }
.fce-fork-downs .fce-fork-down:last-child em { left: 0.45rem; }

.fce-branches {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  align-items: start;
}
.fce-branch {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.fce-branch .fce-node {
  width: 100%;
  max-width: none;
}

.fce-join {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 0.15rem;
}
.fce-join-ups {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.fce-join-up {
  width: 1px;
  height: 1.15rem;
  background: var(--fce-line);
  justify-self: center;
}
.fce-join-bar {
  width: calc(50% + 0.5rem);
  height: 1px;
  background: var(--fce-line);
}
.fce-join-stem {
  width: 1px;
  height: 1.25rem;
  background: var(--fce-line);
  position: relative;
}
.fce-join-stem::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid var(--fce-line);
}

@media (max-width: 560px) {
  .fce-branches { grid-template-columns: 1fr; gap: 0.75rem; }
  .fce-fork-bar, .fce-join-bar { display: none; }
  .fce-fork-downs, .fce-join-ups { grid-template-columns: 1fr; }
  .fce-fork-downs .fce-fork-down:last-child,
  .fce-join-ups .fce-join-up:last-child { display: none; }
  .fce-fork-down em { right: auto !important; left: 0.5rem !important; }
}

/* legacy flow-eval helpers kept for other pages */
.flow-eval { display: flex; flex-direction: column; align-items: center; }
.flow-process { border-radius: 3px; }
.flow-arrow-compact { height: 1.15rem; margin: 0.1rem 0; }