/* EvoHarnessBench paper chrome — aligned with MAS-Zero / MAS-Orchestra. */

:root {
  --gradient-start: #4e54c8;
  --gradient-end: #8f94fb;
  --card-shadow: 0 12px 25px rgba(15, 23, 42, 0.12);
  --border-color: rgba(255, 255, 255, 0.3);
}

html { scroll-behavior: smooth; }

body {
  display: block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  background: var(--bg);
  color: #1f2a44;
}

.publication-title {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
}

.section-heading {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-weight: 700;
  color: #1f2a44;
}

.section, #landing, #hero, #how, #BibTeX {
  scroll-margin-top: 24px;
}

.navbar {
  z-index: 40;
  background: #fff;
}

/* ---------- Page-level tabs ----------
   Underlined tabs at the page level, pills inside a view (.rs-tab, .sv-tab),
   so the two levels of switching never look alike. */
.pv-slim[hidden] { display: none; }
.pv-slim {
  display: block;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  padding: 15px 0;
  color: #fff;
}
.pv-slim .container { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.pv-slim b {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.pv-slim span { font-size: 0.9rem; opacity: 0.88; }

.pv-bar {
  position: sticky;
  top: 0;
  z-index: 35;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 10px -6px rgba(15, 23, 42, 0.28);
}
.pv-bar-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Eight tabs and the demo pill, one of the tabs three words long: at 26px the row outgrew
     the bar by a few pixels, and because it is centred what got clipped was the first tab
     rather than the last. The row still scrolls on a narrow screen; this only keeps it from
     scrolling on a wide one. */
  gap: 22px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
  overflow-x: auto;
  scrollbar-width: none;
}
.pv-bar-inner::-webkit-scrollbar { display: none; }
.pv-tab {
  flex: 0 0 auto;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  padding: 14px 2px 12px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 650;
  color: var(--muted);
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.pv-tab:hover { color: #1f2a44; }
.pv-tab.is-active { color: var(--accent); border-bottom-color: var(--accent); }

/* The demo is the one item here that leaves the page, so it is a pill rather than a tab,
   in the same warm gradient the demo banner uses. */
.pv-demo {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 15px;
  border-radius: 999px;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24, #f7971e);
  color: #fff;
  font-size: 0.9rem;
  font-weight: 800;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 16px -7px rgba(238, 90, 36, 0.9);
  transition: transform .15s, box-shadow .15s, filter .15s;
}
.pv-demo:hover,
.pv-demo:focus {
  color: #fff;
  transform: translateY(-1px);
  filter: saturate(1.1);
  box-shadow: 0 9px 20px -8px rgba(238, 90, 36, 1);
}

.pv-view { display: none; }
.pv-view.is-active { display: block; }
/* The first section of a view sits under the sticky bar, so it needs less air. */
.pv-view > .section:first-child { padding-top: 2.2rem; }

@media (max-width: 768px) {
  .pv-bar-inner { justify-content: flex-start; gap: 18px; }
  .pv-tab { font-size: 0.9rem; }
  .pv-demo { font-size: 0.84rem; padding: 6px 12px; }
  .pv-slim b { font-size: 1.1rem; }
  .pv-slim span { font-size: 0.82rem; }
}

.hero.hero-gradient .title,
.hero.hero-gradient .publication-title {
  color: #fff !important;
}

/* ---------- Hero ---------- */
/* Bulma's hero padding is sized for a hero that carries a byline and a row of buttons.
   This one is a title, a question and three lines of prose, so it is set to the space
   those need and no more. */
.hero.hero-gradient {
  background: linear-gradient(130deg, var(--gradient-start), var(--gradient-end));
  color: #fff;
  padding: 0;
}
.hero.hero-gradient .hero-body { padding: 2rem 1.5rem; }
.hero.hero-gradient .publication-title {
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero.hero-gradient .subtitle {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 1.5rem;
}

.meta-badges span {
  display: inline-block;
  margin: 0.3rem;
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid var(--border-color);
  font-size: 0.9rem;
}

.demo-banner-wrap {
  padding: 1.35rem 1.5rem 0;
}
.demo-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  padding: 1.05rem 1.75rem;
  background: linear-gradient(135deg, #ff6b6b, #ee5a24, #f7971e);
  border-radius: 12px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: 0.01em;
  box-shadow: 0 6px 22px rgba(238, 90, 36, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
}
.demo-banner:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(238, 90, 36, 0.5);
}
.demo-banner-kicker {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.45);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.demo-banner-msg { text-align: center; line-height: 1.35; }
.demo-banner-go { font-size: 1.35rem; flex-shrink: 0; }
@media (max-width: 640px) {
  .demo-banner { flex-wrap: wrap; font-size: 1.02rem; padding: 0.95rem 1.1rem; }
}

/* =====================================================================
   The corpus, drifting. A benchmark whose subject is a harness that keeps
   moving can afford a band that moves, but only because every panel in it
   is a real figure from a real task: the artifact an ALE task hands over,
   or the sandbox an EOG task starts in.
   ===================================================================== */
.mq-sec { padding: 1.6rem 0 0; }
.mq {
  overflow: hidden;
  padding: 14px 0 18px;
  /* Panels arrive and leave rather than stopping at an edge. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.mq-track {
  display: flex;
  align-items: flex-start;
  width: max-content;
  animation: mqDrift 120s linear infinite;
}
/* Half the track is exactly one copy of the panels, which is only true while the
   spacing lives on the panels themselves: a flex `gap` would leave half a gap
   unaccounted for and the wrap would jump by that much once a cycle. */
@keyframes mqDrift {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.mq:hover .mq-track,
.mq:focus-within .mq-track { animation-play-state: paused; }

.mq-panel {
  --mq-tilt: -13deg;
  flex: none;
  margin-right: 20px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  transform: perspective(1100px) rotateY(var(--mq-tilt)) rotateX(3deg);
  transition: transform 0.35s ease, filter 0.35s ease;
}
/* Staggered, so the band reads as a scattered row of screens rather than a ruler. */
.mq-panel:nth-child(even) { margin-top: 26px; }
.mq-panel:nth-child(3n) { margin-top: 12px; }
.mq-panel:hover, .mq-panel:focus-visible {
  transform: perspective(1100px) rotateY(-4deg) translateY(-5px) scale(1.03);
  filter: none;
  outline: none;
}
.mq-shot {
  display: block;
  height: 152px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  overflow: hidden;
  box-shadow: 0 14px 30px -18px rgba(15, 23, 42, 0.55);
}
.mq-panel:hover .mq-shot { box-shadow: 0 20px 38px -16px rgba(15, 23, 42, 0.6); }
.mq-shot img {
  display: block;
  height: 100%;
  width: auto;
  min-width: 108px;
  max-width: 300px;
  object-fit: cover;
  /* Screenshots carry their subject at the top: crop from the bottom, not the middle. */
  object-position: top center;
}
.mq-meta {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
  max-width: 300px;
}
.mq-lab {
  font-size: 11px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1.3;
}
.mq-st {
  flex: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #f3d3ae;
  border-radius: 999px;
  padding: 1px 6px;
}
.mq-panel[data-env="ale"] .mq-st { color: #4338ca; background: #eef2ff; border-color: #c7d2fe; }

/* The second dimension: what the harness hands this task at this stage. Without it a panel
   says only what the task is, which is every task gallery; the point of this corpus is that
   the pool behind the task keeps growing, so the panel names some of what just arrived. */
.mq-harn {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
  max-width: 300px;
  /* One row's worth: a name that does not fit wraps out of sight rather than being
     sliced down the middle, which on a narrow panel is what clipping would do. */
  max-height: 18px;
  overflow: hidden;
}
.mq-gain {
  flex: none;
  white-space: nowrap;
  font-size: 10px;
  font-weight: 800;
  color: #047857;
  background: #ecfdf5;
  border: 1px solid #a7f3d0;
  border-radius: 999px;
  padding: 1px 6px;
}
/* Nothing new to report -- stage 1, or a roster that does not grow -- reads as a plain count. */
.mq-gain.is-flat {
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #dde3ea;
}
.mq-item {
  min-width: 0;
  /* A long name on a panel as narrow as its picture ends in an ellipsis rather than
     running out past the edge of the strip. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px;
  color: #64748b;
  background: #fff;
  border: 1px solid #e6e9f5;
  border-radius: 5px;
  padding: 1px 5px;
}
@media (max-width: 640px) {
  .mq-shot { height: 104px; }
  .mq-panel:nth-child(even) { margin-top: 16px; }
  /* One name, so the strip does not wrap the panel wider than its own picture. */
  .mq-item:nth-of-type(2) { display: none; }
}
/* Asked not to animate: one copy of the panels, browsable by hand. */
@media (prefers-reduced-motion: reduce) {
  .mq { overflow-x: auto; }
  .mq-track { animation: none; }
}

/* =====================================================================
   The floor under the band: four systems running inside a stage, and the
   moment the stage turns over. Everything here is driven off one attribute,
   [data-phase] on .sim -- run, drop, adapt, and swap when one axis hands over
   to the next -- so a phase is a state the page can be stopped in and read,
   not a sequence of one-off transitions.
   ===================================================================== */
.sim-sec { padding: 0.6rem 0 0.4rem; }
.sim {
  border: 1px solid #e7e9f4;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 34px -28px rgba(15, 23, 42, 0.55);
  padding: 0.7rem 0.85rem 0.8rem;
}
.sim-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid #f0f2f9;
  margin-bottom: 0.6rem;
}
/* Where the panel lands. It is the harness the whole floor is running against, so it holds
   the stage and the pool, and it takes the hit when the next release arrives. */
.sim-stage {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex: none;
  padding: 0.3rem 0.6rem;
  border-radius: 9px;
  background: #eef0fb;
  border: 1px solid #dfe3f7;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.sim-stage b { font-size: 0.9rem; font-weight: 800; color: #1f2a44; }
.sim-stage b sub { font-size: 0.62em; }
/* The three axes, and which one is being evaluated. They are three separate streams and a
   system is measured on one at a time, so only the live one carries a pool: the other two
   are named, greyed, and empty, because no run ever holds all three at once. Coloured as
   the task gallery colours its axes.

   They are also the way in. Waiting for an axis to come round is not a feature, so each
   chip is a button that switches the floor to that stream -- which is why the two idle
   ones are the ones that look pressable, and the live one does not. */
.sim-mets { display: flex; align-items: baseline; gap: 4px; }
.sim-met {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 750;
  line-height: 1.45;
  white-space: nowrap;
  cursor: pointer;
  border-radius: 999px;
  padding: 1px 7px;
  color: #98a2b3;
  background: #fff;
  border: 1px solid #dfe3f0;
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
}
.sim-met:hover { color: #475569; border-color: #c3cbdf; background: #f7f8fc; }
.sim-met:focus-visible { outline: 2px solid #4e54c8; outline-offset: 1px; }
.sim-met.is-live { cursor: default; }
.sim-met.is-live[data-ax="tools"] {
  color: var(--accent);
  background: rgba(78, 84, 200, 0.1);
  border-color: rgba(78, 84, 200, 0.22);
}
.sim-met.is-live[data-ax="skills"] {
  color: #0f766e;
  background: rgba(13, 148, 136, 0.1);
  border-color: rgba(13, 148, 136, 0.22);
}
.sim-met.is-live[data-ax="agents"] {
  color: #c2410c;
  background: rgba(194, 65, 12, 0.09);
  border-color: rgba(194, 65, 12, 0.2);
}
/* A count landing. Set on the node as it is written, so the two are one event. */
.sim-met.is-up { animation: simUp 0.9s ease-out; }
@keyframes simUp {
  0%  { transform: translateY(-4px) scale(1.12); }
  60% { transform: none; }
}
.sim[data-phase="adapt"] .sim-stage {
  background: #ecfdf5;
  border-color: #a7f3d0;
  transform: scale(1.04);
}
/* Handing over to another axis. A release makes the harness flare; this is the opposite --
   one evaluation ending and another starting, so the floor goes quiet and pale and the
   capabilities of the stream that just ran fade out before the new axis writes its own. */
.sim[data-phase="swap"] .sim-stage { background: #f6f7fb; border-color: #e9ecf5; }
.sim[data-phase="swap"] .sn-cap { opacity: 0.25; }
.sim[data-phase="swap"] .sn-cap rect,
.sim[data-phase="swap"] .sn-lead rect,
.sim[data-phase="swap"] .sn-work rect,
.sim[data-phase="swap"] .sn-mem rect,
.sim[data-phase="swap"] .sn-bar rect { animation: none; }
.sim[data-phase="swap"] .sf { animation: none; opacity: 0; }
.sim-say {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 0.82rem;
  line-height: 1.35;
  color: #475569;
}
.sim-say b { color: #1f2a44; }
.sim-say code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  color: #3730a3;
  background: #eef2ff;
  border-radius: 4px;
  padding: 1px 5px;
  margin-left: 3px;
}
.sim-btn {
  flex: none;
  font-family: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  background: #fff;
  border: 1px solid #e2e6f3;
  border-radius: 999px;
  padding: 0.24rem 0.7rem;
  cursor: pointer;
}
.sim-btn:hover { color: var(--accent); border-color: #c7d2fe; }
.sim-btn:focus-visible { outline: 2px solid #4e54c8; outline-offset: 1px; }

/* The four cards are examples, and a reader who takes them for the supported list has read
   the floor backwards: the benchmark grips a shape, and anyone can bring a system that has
   one. Said once, quietly, under the grid rather than in the moving status line. */
.sim-foot {
  margin: 0.45rem 0 0;
  font-size: 0.68rem;
  line-height: 1.35;
  color: #9aa3b4;
}
/* The one thing on this line a reader can act on, so it carries the accent while the
   sentence around it stays quiet. */
.sim-cta {
  color: var(--accent);
  font-weight: 650;
  text-decoration: none;
  border-bottom: 1px solid rgba(79, 70, 229, 0.3);
}
.sim-cta:hover,
.sim-cta:focus-visible { border-bottom-color: var(--accent); }

.sim-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}
.sim-card {
  border: 1px solid #eef0f8;
  border-radius: 12px;
  background: #fbfcff;
  padding: 0.45rem 0.6rem 0.5rem;
}
.sim-card-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.sim-card-h b {
  flex: 0 0 auto;
  white-space: nowrap;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.79rem;
  font-weight: 750;
  color: #1f2a44;
}
.sim-kind {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.68rem;
  color: #94a3b8;
}
/* The card is a family, and the family is the claim: anyone can bring a system and find it
   in one of the four. The paper's own runs are named here only as a way in, so they are the
   smallest and quietest thing in the header -- and on a narrow card they go first. */
.sim-eg {
  flex: 0 0 auto;
  font-size: 0.62rem;
  color: #b6bfd0;
  white-space: nowrap;
}
@media (max-width: 900px) {
  .sim-eg { display: none; }
}
.sim-mode {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #64748b;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 1px 7px;
}
/* One of the four keeps something. Saying so quietly is enough, because the tray below
   shows it happening. */
.sim-card[data-mode="self-evolving"] .sim-mode {
  color: #047857;
  background: #ecfdf5;
  border-color: #a7f3d0;
}

/* The figure carries its own margin inside the viewBox now, so it needs less around it. */
.sim-fig { display: block; width: 100%; height: auto; margin: 0.14rem 0 0.1rem; }
.sn rect {
  fill: #fff;
  stroke: #d9deef;
  stroke-width: 1;
}
.sn text {
  fill: #475569;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 8px;
  font-weight: 700;
  text-anchor: middle;
}
.sn-lead rect { fill: #eef0fb; stroke: #c7cdf0; }
.sn-lead text { fill: #3730a3; }
.sn-in rect { fill: #f8fafc; stroke-dasharray: 3 2; }
/* A capability carries the axis it came off, in the colours the task gallery uses for the
   three: a harness is tools and skills and specialist agents at once, and which kind just
   arrived is the first thing to know about a release. The pulse runs between the two, so
   the tint survives the animation instead of being painted over by it. */
.sn { --tint: var(--accent); --edge: #d9deef; }
.sn-cap rect { fill: #fff; stroke: var(--edge); }
.sn-cap text {
  fill: #475569;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 7.4px;
}
.sn-cap[data-ax="tools"] { --tint: #4e54c8; --edge: #ccd0ee; }
.sn-cap[data-ax="tools"] text { fill: #4348a6; }
.sn-cap[data-ax="skills"] { --tint: #0f766e; --edge: #bfdedb; }
.sn-cap[data-ax="skills"] text { fill: #0f766e; }
.sn-cap[data-ax="agents"] { --tint: #c2410c; --edge: #f0cdb7; }
.sn-cap[data-ax="agents"] text { fill: #b8400e; }
/* And drawn as what it is. A tool is an endpoint with an edge you call across. A skill is a
   procedure -- nothing to call, so its outline is broken. A specialist agent is a member of
   the system, so it is filled and rounded like the workers it arrives among. */
.sn-cap[data-ax="skills"] rect { stroke-dasharray: 3.5 2.5; }
.sn-cap[data-ax="agents"] rect { rx: 10px; fill: rgba(194, 65, 12, 0.05); }
.sn-mem rect, .sn-bar rect { fill: #f6f7fd; stroke: #dfe3f7; }
.sn-mem text, .sn-bar text { fill: #64748b; font-size: 7.6px; }
.sl { stroke: #e2e6f3; stroke-width: 1.1; }
/* A packet: a short dash running the length of its own line. */
/* A dash and a gap wider than any line here, so exactly one packet is ever on a wire. The
   offset carries a unit on both ends of the animation: a bare number and a calc() are
   different types to interpolate between, and the packet parks at the far end instead of
   travelling. */
.sf {
  stroke: var(--accent);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 9 999;
  stroke-dashoffset: 9px;
  opacity: 0;
}
@keyframes simFlow {
  0%        { stroke-dashoffset: 9px; opacity: 0; }
  2%        { opacity: 1; }
  26%       { stroke-dashoffset: calc(var(--len) * -1px); opacity: 1; }
  27%, 100% { stroke-dashoffset: calc(var(--len) * -1px); opacity: 0; }
}
@keyframes simHit {
  0%, 6%   { stroke: var(--edge); }
  10%      { stroke: var(--tint); }
  30%      { stroke: var(--edge); }
}
/* The hub is on the path of every exchange, so it lights three times to the others' once. */
@keyframes simHub {
  0%, 4%, 36%, 40%, 70%, 74% { fill: #eef0fb; }
  12%, 48%, 82%              { fill: #dfe3fb; }
}
.sim[data-phase] .sf {
  animation: simFlow var(--cyc) linear infinite;
  animation-delay: var(--d);
}
.sim[data-phase] .sn-cap rect,
.sim[data-phase] .sn-work rect,
.sim[data-phase] .sn-mem rect,
.sim[data-phase] .sn-bar rect {
  animation: simHit var(--cyc) linear infinite;
  animation-delay: var(--d);
}
.sim[data-phase] .sn-hub rect { animation: simHub var(--cyc) linear infinite; }
.sim { --cyc: 3.6s; }
/* What just arrived is marked green for the beat it arrives on, and by the time the systems
   are working the stage it is one more thing in the pool, in its axis's own colour. That is
   the whole life of a capability in this benchmark. */
.sim[data-phase="adapt"] .sn-cap.is-new { --tint: #059669; --edge: #6ee7b7; }
.sim[data-phase="adapt"] .sn-cap.is-new rect { fill: #ecfdf5; }
.sim[data-phase="adapt"] .sn-cap.is-new text { fill: #047857; }

/* The beat the release lands on. Whatever any of them was doing stops mid-stride -- the
   harness underneath them is not the one they were working -- and the only thing lit is
   what just arrived and the part of each system that has to account for it. */
/* Dropping the animation rather than pausing it: a paused one still holds the opacity it
   was animating, and the packet would sit frozen on the wire instead of coming off it. */
.sim[data-phase="adapt"] .sf { animation: none; }
.sim[data-phase="adapt"] .sn-lead rect,
.sim[data-phase="adapt"] .sn-work rect {
  animation: simThink 1.1s ease-in-out infinite;
}
/* Nothing else is arriving anywhere, so nothing else lights: a node still pulsing here is
   answering traffic that came off the wires a second ago. */
.sim[data-phase="adapt"] .sn-cap rect,
.sim[data-phase="adapt"] .sn-bar rect { animation: none; }
.sim[data-phase="adapt"] .sn-cap.is-new rect { animation: simRing 1.1s ease-in-out infinite; }
/* Except z_t, which is the one thing on the floor that a boundary does not cost anything. */
.sim[data-phase="adapt"] .sn-mem rect { animation: none; fill: #ecfdf5; stroke: #a7f3d0; }
.sim[data-phase="adapt"] .sn-mem text { fill: #047857; }
@keyframes simThink {
  0%, 100% { fill: #fff7ed; stroke: #f0c99a; }
  50%      { fill: #fff; stroke: #e2e6f3; }
}
@keyframes simRing {
  0%, 100% { stroke: #6ee7b7; stroke-width: 1; }
  50%      { stroke: #34d399; stroke-width: 2.4; }
}
/* Held: everything stops where it stands rather than jumping back to a beat boundary. Last
   in the block and specific enough to outrank every rule above, because each of those sets
   the `animation` shorthand, which resets the play state to running along with everything
   else it touches. */
.sim.is-held[data-phase] .sf,
.sim.is-held[data-phase] .sn rect,
.sim.is-held[data-phase] .sn-cap.is-new rect { animation-play-state: paused; }

/* Tasks finishing, and what is left of them once the stage turns over. */
.sim-tray {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding-top: 0.32rem;
  border-top: 1px dashed #eceff8;
}
.sim-tag {
  flex: none;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: #94a3b8;
}
.sim-tag sub { text-transform: none; }
.sim-marks { display: flex; gap: 3px; }
.sim-marks i {
  width: 12px;
  height: 8px;
  border-radius: 2px;
  background: #eef1f8;
  border: 1px solid #e2e6f3;
  transition: background 0.35s ease, border-color 0.35s ease, opacity 0.5s ease, transform 0.35s ease;
}
.sim-marks i.is-on { background: #c7cdf0; border-color: #a9b2ea; }
/* Carried, and no longer true of the harness it was written under. */
.sim-marks i.is-stale {
  background: repeating-linear-gradient(45deg, #fde8c8 0 3px, #fff7ed 3px 6px);
  border-color: #f3d3ae;
}
.sim[data-phase="adapt"] .sim-card[data-mode="deployment"] .sim-marks i {
  transform: scale(0.55);
  opacity: 0.45;
}
.sim-note {
  margin-left: auto;
  font-size: 10px;
  font-weight: 750;
  color: #94a3b8;
  white-space: nowrap;
}
.sim-card[data-mode="self-evolving"] .sim-note { color: #047857; }

/* The release, mid-air. A real panel out of the band when the task it belongs to is on
   screen; otherwise the release itself, which is the part the floor is about to answer for. */
.sim-fly {
  position: fixed;
  z-index: 60;
  pointer-events: none;
  transform-origin: top left;
  /* Solid for the fall, gone on arrival: fading it across the whole flight leaves nothing
     to watch by the time it reaches the floor. */
  transition: transform 1.15s cubic-bezier(0.45, 0.05, 0.55, 0.95),
              opacity 0.3s ease-in 0.85s;
}
.sim-fly.is-pkt {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid #c7d2fe;
  box-shadow: 0 16px 30px -18px rgba(15, 23, 42, 0.6);
}
.sim-pkt-st {
  font-size: 10px;
  font-weight: 800;
  color: #4338ca;
  background: #eef2ff;
  border-radius: 999px;
  padding: 1px 7px;
}
.sim-fly.is-pkt code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px;
  color: #64748b;
}

@media (max-width: 780px) {
  .sim-grid { grid-template-columns: 1fr; }
  .sim-head { flex-wrap: wrap; }
  .sim-say { order: 3; flex-basis: 100%; }
}
/* Asked not to animate: the floor still says who runs and what they hold, it just does not
   perform any of it. */
@media (prefers-reduced-motion: reduce) {
  .sim[data-phase] .sf,
  .sim[data-phase] .sn rect { animation: none; }
  .sf { opacity: 0.55; stroke-dasharray: 3 4; }
}

.author-grid {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}

.author-card {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  padding: 1rem;
  width: 118px;
  box-shadow: 0 10px 18px rgba(8, 8, 24, 0.12);
}
.author-card img {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.7);
  margin: 0 auto;
  display: block;
}
.author-card a,
.author-card .author-name {
  display: block;
  color: #fff;
  margin-top: 0.6rem;
  font-size: 0.9rem;
  line-height: 1.25;
  text-decoration: none;
}
.author-card a:hover { text-decoration: underline; }
.author-card sup { font-size: 0.7em; }

.hero-affil {
  margin-top: 1.5rem;
  opacity: 0.92;
  font-size: 0.95rem;
}

/* The byline, at the end of the page rather than in the hero: twelve portraits above the
   fold cost more room than they were worth. The cards were built for the hero's dark
   gradient, so on this background they have to carry their own contrast. */
.authors-sec {
  padding: 2.4rem 1.5rem 0.6rem;
  border-top: 1px solid var(--border);
}
/* Bulma's footer grey is a cool one, and against the paper tone it reads as a seam
   across the bottom of the page rather than as the end of it. */
footer.footer { background: none; }
.authors-h {
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.authors-heart {
  color: #e11d48;
  font-size: 14px;
  letter-spacing: 0;
  vertical-align: -1px;
}
.authors-sec .author-grid { margin-top: 1.3rem; }
.authors-sec .author-card {
  background: #fff;
  border-color: #e6e9f5;
  box-shadow: 0 10px 20px -14px rgba(15, 23, 42, 0.45);
}
.authors-sec .author-card img { border-color: #e6e9f5; }
.authors-sec .author-card a,
.authors-sec .author-card .author-name { color: #1f2a44; }
.authors-sec .hero-affil {
  color: var(--muted);
  opacity: 1;
  font-size: 0.88rem;
  line-height: 1.7;
}

/* =====================================================================
   What sets this corpus apart, before the abstract that argues it. Claims only,
   named and left at that: a paragraph under each one repeated the abstract two
   screens early, and the reader who wants the argument is on their way to it.
   ===================================================================== */
.diff-sec { padding-top: 1.5rem; padding-bottom: 1.5rem; }
/* The heading holds one side and the claims fill the other, so the block costs two
   lines of height instead of a screen. Below 900px there is no second side to fill. */
.diff-top {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}
.diff-h {
  flex: 0 0 17.2rem;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: #1f2a44;
  margin: 0;
}
.diff-h b { font-weight: 700; color: var(--accent); }
.diff-pills {
  flex: 1 1 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
}
.diff-pill {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.95rem 0.5rem 0.7rem;
  background: #fff;
  border: 1px solid #eceff8;
  border-radius: 999px;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.3;
  color: #1f2a44;
  box-shadow: 0 10px 22px -18px rgba(15, 23, 42, 0.55);
}
.diff-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  color: var(--accent);
  background: #eef0fb;
}
.diff-ico svg { width: 15px; height: 15px; }
@media (max-width: 900px) {
  .diff-top { flex-direction: column; align-items: stretch; gap: 1rem; }
  .diff-h { flex: none; text-align: center; }
  .diff-pills { justify-content: center; }
}
@media (max-width: 640px) {
  .diff-h { font-size: 1.25rem; }
  /* Narrow enough that the longer claims run to two lines: hold every pill to the full
     width so the wrapped ones and the short one keep the same edges. */
  .diff-pill { font-size: 0.8rem; width: 100%; }
}

/* ---------- Cards used by MAS-Zero / MAS-Orchestra ---------- */
.highlight-card {
  background: white;
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  box-shadow: var(--card-shadow);
  border: 1px solid #eef0fb;
}

.feature-card {
  background: #f9fafc;
  border-radius: 14px;
  padding: 1.6rem;
  border: 1px solid #e0e7ff;
  height: 100%;
}
.feature-card h4 {
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: #3a3f73;
}
.feature-card p {
  line-height: 1.75;
  font-size: 1rem;
}

.insight-card {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem;
  border: 1px solid #e0e7ff;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.06);
}
.insight-card h4 {
  font-weight: 650;
  margin-bottom: 0.8rem;
  color: #3a3f73;
}
.insight-card p {
  line-height: 1.75;
  font-size: 1rem;
  color: #1f2a44;
}
.insight-card.is-observation {
  background: #f0f4ff;
  border-left: 4px solid #4e54c8;
}
.insight-card.is-takeaway {
  background: #fff4e6;
  border-left: 4px solid #f7971e;
}

.takeaway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}
.takeaway-card {
  border-radius: 14px;
  padding: 1.5rem;
  color: #fff;
  min-height: 200px;
}
.takeaway-card h4 {
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #fff;
  line-height: 1.3;
}
.takeaway-card p {
  color: #fff;
  line-height: 1.6;
  opacity: 0.95;
}
.takeaway-card.is-danger { background: linear-gradient(135deg, #dc2626, #c2410c); }
.takeaway-card.is-success { background: linear-gradient(135deg, #0f766e, #047857); }
.takeaway-card.is-info { background: linear-gradient(135deg, #1d4ed8, #4338ca); }
.takeaway-card.is-primary { background: linear-gradient(135deg, #5b21b6, #1d4ed8); }
.takeaway-card.is-warning { background: linear-gradient(135deg, #d97706, #b45309); }
.takeaway-card.is-warning h4,
.takeaway-card.is-warning p { color: #fff; }

/* obs.css styles bare h4 as small uppercase muted text; card titles need to
   read as headings above their body copy. */
.takeaway-card h4,
.feature-card h4,
.insight-card h4,
.stream h4 {
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.22rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  text-transform: none;
}
.takeaway-card p,
.feature-card p,
.insight-card p {
  font-size: 0.98rem;
}
.takeaway-card h4 .tk-label {
  display: block;
  font-family: 'Noto Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 0.35rem;
}

.bibtex-card {
  background: #0f172a;
  color: #e2e8f0;
  border-radius: 16px;
  padding: 2rem;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(148, 163, 184, 0.3);
}
.bibtex-card pre {
  background: #0b1220;
  padding: 1.2rem;
  border-radius: 12px;
  border: 1px solid rgba(148, 163, 184, 0.4);
  overflow-x: auto;
  white-space: pre-wrap;
  color: #f8fafc;
  font-size: 0.92rem;
}
.bibtex-card .button { margin-top: 1rem; }

.masbench-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}
.masbench-stat {
  background: #ffffff;
  border-radius: 14px;
  padding: 1rem 1.1rem;
  border: 1px solid #e0e7ff;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.06);
  text-align: center;
}
.masbench-stat .stat-number {
  margin: 0.35rem 0 0.25rem;
  font-weight: 800;
  font-size: 2.1rem;
  line-height: 1.05;
  color: #1f2a44;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
}
.masbench-stat .stat-sub {
  font-size: 0.85rem;
  color: #475569;
}

.stream-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.2rem;
}
.stream {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem;
  border: 1px solid #e0e7ff;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.08);
}
.stream h4 {
  font-weight: 600;
  margin-bottom: 0.8rem;
  color: #3a3f73;
}
.stream dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
  font-size: 0.92rem;
}
.stream dt { color: #64748b; }
.stream dd { margin: 0; font-weight: 700; text-align: right; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 1rem; }
.pill {
  font-size: 0.8rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid #e0e7ff;
  background: #fff;
  color: #3a3f73;
}

/* ---------- How-it-works landing ---------- */
#how.section { padding-bottom: 0.5rem; }
#landing.view { display: block; padding-top: 0; }
#landing.landing-view {
  padding: 0 0 2.5rem;
  background: transparent;
}
.landing-shell {
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eef0fb;
  box-shadow: var(--card-shadow);
  overflow: visible;
  padding: 12px 8px 28px;
}

/* --- Outer / inner framework (P1), original visual ---------- */
.fw { display: grid; gap: 14px; position: relative; }
.fw-figure {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 20px 4px;
}
.fw-figcap { text-align: center; margin: 0 0 18px; }
.fw-figcap-title {
  display: block;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: #1f2a44;
}
.fw-figcap-title em { font-style: italic; color: #c2410c; }

figure.fw-figure,
figure.cd-figure {
  margin-left: auto;
  margin-right: auto;
}
.lp-steps { flex-wrap: nowrap; padding: 0; max-width: 1040px; }
.lp-step { padding: 14px 16px; min-width: 0; }
.lp-step-tx { min-width: 0; }
.lp-step-tx b { font-size: 15px !important; }
.lp-step-tx i { font-size: 13px !important; line-height: 1.35; }
.lp-step-sep { flex: 0 0 auto; width: 18px; margin: 0 5px; }

@media (max-width: 1023px) {
  .lp-step { padding: 12px 13px; gap: 9px; }
  .lp-step-sep { display: none; }
  .lp-steps { gap: 8px; }
}
@media (max-width: 639px) {
  .lp-steps { flex-wrap: wrap; }
  .lp-step { flex: 1 1 100%; }
}
.cd-figcap-title { font-size: 1.05rem; line-height: 1.55; }

.fw-band {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 18px;
}
.fw-band--outer { border-color: #f3d3ae; background: #fffdf9; }
/* Nested inside the outer band, so it needs to read as contained rather than as the
   next sibling down: white against the outer band's warm tint, with the outer band's
   own padding left visible on every side. */
.fw-band--inner {
  border-style: dashed;
  border-color: #c7d2fe;
  background: #fff;
  margin: 16px 0 2px;
}
.fw-band--across { border-color: #c7d2fe; background: #f8f8ff; }
.fw-kicker {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  line-height: 1.4;
}
.fw-band--outer .fw-kicker { color: #c2410c; }
.fw-band--inner .fw-kicker { color: #4f46e5; }
.fw-band--across .fw-kicker { color: #4f46e5; }

.fw-stages {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  gap: 10px;
  align-items: stretch;
}
.fw-stage {
  border: 1.6px solid #e8c39a;
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 96px;
  opacity: 0.38;
  transform: translateY(4px);
  transition: opacity .45s ease, transform .45s ease, border-color .45s ease, box-shadow .45s ease;
  cursor: pointer;
}
.fw-stage.is-on { opacity: 1; transform: none; }
.fw-stage.is-current { border-color: #e58c3f; box-shadow: 0 0 0 3px rgba(229,140,63,0.18); }
.fw-stage-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.fw-stage-h b { font-size: 1.05rem; color: #c2410c; }
.fw-stage-h span { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fw-chip {
  display: inline-block;
  width: 18px;
  height: 10px;
  border-radius: 3px;
  font-style: normal;
}
.fw-chip.t { background: #a78bfa; }
.fw-chip.s { background: #34d399; }
.fw-chip.a { background: #6366f1; }
.fw-chip.is-new { outline: 2px solid #e58c3f; outline-offset: 1px; animation: fwPop .5s cubic-bezier(.34,1.4,.5,1) both; }
.fw-sub { width: 22px; text-align: center; color: #c2410c; font-weight: 800; align-self: center; font-size: 1.1rem; }
.fw-outer-note,
.fw-across-note {
  margin: 12px 0 0;
  font-size: 0.95rem;
  line-height: 1.55;
  color: #475569;
}
.fw-leg {
  display: inline-flex;
  gap: 12px;
  margin-left: 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
  text-transform: none;
}
.fw-leg i {
  display: inline-block;
  width: 10px;
  height: 8px;
  border-radius: 2px;
  margin-right: 4px;
  vertical-align: middle;
  font-style: normal;
}
.fw-leg .t { background: #a78bfa; }
.fw-leg .s { background: #34d399; }
.fw-leg .a { background: #6366f1; }

.fw-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 0 6px;
}
.fw-node {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  min-width: 108px;
  text-align: center;
}
.fw-node b { display: block; font-size: 0.95rem; color: #1f2a44; }
.fw-node span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.fw-node--lead { border-color: #c7d2fe; }
.fw-node--env { border-color: #86efac; }
.fw-arr { color: #94a3b8; font-weight: 800; font-size: 1.1rem; }
.fw-fb {
  margin-top: 10px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  color: #4f46e5;
  line-height: 1.45;
}
.fw-fb em { font-style: italic; font-weight: 600; color: var(--muted); }
.fw.is-deploy .fw-band--inner { opacity: 0.55; }
.fw.is-deploy .fw-fb { color: var(--muted); }
.fw.is-adapt .fw-band--inner { box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }
.fw.is-adapt .fw-band--across { box-shadow: 0 0 0 3px rgba(99,102,241,0.12); }

/* The legs that close the loop, drawn over the bands so they can cross out of the stage box
   into z_t. Shown only once alignFwCycle() has measured endpoints it trusts, so a wrapped
   loop row leaves the .fw-fb line to say the same thing in words. */
.fw-cycle { position: absolute; inset: 0; pointer-events: none; display: none; }
.fw.is-looped .fw-cycle { display: block; }
.fw.is-looped .fw-fb { display: none; }
.fw.is-deploy .fw-cycle { opacity: 0.3; }
/* The line is the box rather than a border on it, so the arrowhead and the label can be
   centred on it without an off-by-one correction for border width. */
.fw-riser {
  position: absolute;
  width: 2px;
  background: repeating-linear-gradient(to bottom, #a5b4fc 0 4px, transparent 4px 8px);
}
.fw-riser::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
}
.fw-riser--w::after { bottom: -9px; border-top: 9px solid #6366f1; }
.fw-riser--r::after { top: -9px; border-bottom: 9px solid #6366f1; }
/* Only the return leg is labelled: an arrow from the environment into z_t says what it does.
   The label sits beside its leg and turns inward, toward the middle of the figure the legs
   enclose -- with ~50px of gap to cross, a chip on the line leaves too little dash either
   side of it to read as one. */
.fw-riser-lab {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #4f46e5;
  background: #fff;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  padding: 2px 9px;
}

.fw-z { display: flex; gap: 8px; flex-wrap: wrap; }
.fw-z span {
  font-size: 0.88rem;
  font-weight: 700;
  padding: 7px 12px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.fw.is-deploy .fw-z span { opacity: 0.35; filter: grayscale(0.4); }

.fw-modes { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.fw-mode {
  border: 1px solid var(--border);
  background: #fff;
  color: var(--muted);
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
  font-size: 0.92rem;
  cursor: pointer;
  font-family: inherit;
}
.fw-mode.is-active { color: #fff; }
.fw-mode[data-fw="deploy"].is-active { background: #64748b; border-color: #64748b; }
.fw-mode[data-fw="adapt"].is-active { background: #4f46e5; border-color: #4f46e5; }

@keyframes fwPop { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: none; } }

a.landing-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
a.landing-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 12px 30px -16px rgba(78, 84, 200, 0.45);
}
a.landing-card:hover .landing-card-cta { text-decoration: underline; }
.landing-card-status.status-axis {
  background: rgba(78, 84, 200, 0.10);
  color: var(--accent);
  border: 1px solid rgba(78, 84, 200, 0.22);
}
a.dbt-cta { text-decoration: none; color: inherit; }

.lp-step.is-active {
  box-shadow: 0 6px 18px -10px rgba(78, 84, 200, 0.55);
}

/* ---------- Results widgets ---------- */
.rs-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 18px;
}
.rs-tab {
  border: 1px solid #e0e7ff;
  background: #fff;
  color: #64748b;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
}
.rs-tab.is-active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.rs-panel { display: none; }
.rs-panel.is-active { display: block; animation: lpFade .3s ease both; }

.obs-list { display: grid; gap: 10px; margin: 0 0 20px; }
.obs {
  background: #f0f4ff;
  border: 1px solid #e0e7ff;
  border-left: 4px solid #4e54c8;
  border-radius: 12px;
  padding: 14px 16px;
}
.obs b { display: block; margin-bottom: 4px; font-size: 0.95rem; color: #3a3f73; }
.obs p { margin: 0; color: #1f2a44; font-size: 0.95rem; line-height: 1.65; }

.chart-card, .table-card {
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 14px;
  padding: 16px 18px 14px;
  margin-bottom: 14px;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.06);
}
.chart-card h3, .table-card h3 {
  margin: 0 0 12px;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  font-weight: 650;
  color: #3a3f73;
}
.chart-cap { color: #64748b; font-size: 0.82rem; margin: 8px 0 0; line-height: 1.5; }

.bar-row {
  display: grid;
  grid-template-columns: minmax(120px, 180px) 1fr 52px;
  gap: 8px;
  align-items: center;
  margin: 5px 0;
  font-size: 12.5px;
}
.bar-row .name { color: var(--text); font-weight: 600; line-height: 1.25; }
.bar-track {
  height: 10px;
  background: #eef0fb;
  border-radius: 999px;
  overflow: hidden;
}
.bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  min-width: 2px;
}
.bar-fill.is-ref { background: #94a3b8; }
.bar-fill.is-best { background: linear-gradient(90deg, #059669, #10b981); }
.bar-row .val { font-variant-numeric: tabular-nums; font-weight: 700; text-align: right; }

.xfer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.xfer-cell { min-width: 0; }
.xfer-bars { position: relative; display: flex; gap: 10px; padding: 8px 4px 0; }
/* One line across the whole chart, gaps included: per-column rules read as ticks rather
   than as the zero these bars are measured from. */
.xfer-axis { position: absolute; left: 4px; right: 4px; height: 1px; background: #94a3b8; }
.xfer-col { flex: 1; display: flex; flex-direction: column; align-items: center; }
.xfer-half { width: 100%; display: flex; gap: 3px; }
.xfer-half.is-up { align-items: flex-end; }
.xfer-half.is-dn { align-items: flex-start; }
.xfer-slot { flex: 1; }
.xfer-bar { flex: 1; min-height: 2px; }
/* Rounded on the end away from the axis, so a bar looks anchored to it either way up. */
.is-up .xfer-bar { border-radius: 4px 4px 0 0; }
.is-dn .xfer-bar { border-radius: 0 0 4px 4px; }
.xfer-bar.fwt { background: var(--accent); }
.xfer-bar.bwt { background: #36d1dc; }
/* Neither direction: no transfer measured, and not reported at all. */
.xfer-bar.is-zero { height: 3px; border-radius: 2px; }
.xfer-bar.is-na { height: 3px; border-radius: 2px; opacity: .22; }
.xfer-lab { margin-top: 6px; font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; line-height: 1.2; }
/* The paper's dagger: an average whose domains disagree. It qualifies the number it trails,
 * so it stays quiet enough not to read as part of it. */
.xfer-dag { color: #a5b4fc; font-weight: 700; }

.table-scroll { overflow-x: auto; }
table.res {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}
table.res th, table.res td {
  padding: 7px 8px;
  border-bottom: 1px solid #e0e7ff;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
table.res th:first-child, table.res td:first-child { text-align: left; }
table.res thead th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  font-weight: 700;
  background: #eef0fb;
}
table.res .sec td {
  text-align: left;
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  background: #f7f8fc;
  padding-top: 10px;
}
table.res .best { font-weight: 800; color: #047857; }
table.res .group-mas td:first-child::before { content: "▣ "; color: var(--accent-2); font-size: 10px; }

.cross th, .cross td { text-align: left; }
.cross td:not(:first-child) { text-align: left; }

.env-toggle {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid #e0e7ff;
  border-radius: 999px;
  background: #fff;
  margin-bottom: 10px;
}
.env-toggle button {
  border: 0;
  background: transparent;
  padding: 5px 12px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  font-family: inherit;
}
.env-toggle button.is-active { background: var(--accent); color: #fff; }

/* ---------- Hub nav (same pattern as MAS-Zero / MAS-Orchestra) ---------- */
.hub-nav { position: relative; }
.hub-nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1.05rem;
  color: #4e54c8;
  text-decoration: none;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
  user-select: none;
  border: none;
  background: none;
  font-family: inherit;
  line-height: 1.4;
}
.hub-nav-trigger:hover {
  background: rgba(78, 84, 200, 0.08);
  color: #3a3fc0;
}
.hub-nav-trigger .chevron-down { transition: transform 0.25s ease; }
.hub-nav.is-open .hub-nav-trigger .chevron-down { transform: rotate(180deg); }

.hub-nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.14), 0 2px 6px rgba(0,0,0,0.06);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 1000;
  padding: 6px 0;
}
.hub-nav.is-open .hub-nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hub-nav-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #1f2a44;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
  line-height: 1.35;
}
.hub-nav-dropdown a:hover { background: #f0f2ff; color: #4e54c8; }
.hub-nav-dropdown .dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}
.hub-nav-dropdown .dropdown-icon.hub   { background: linear-gradient(135deg, #4e54c8, #8f94fb); color: #fff; }
.hub-nav-dropdown .dropdown-icon.paper { background: linear-gradient(135deg, #36d1dc, #5b86e5); color: #fff; }
.hub-nav-dropdown .dropdown-icon.ext   { background: linear-gradient(135deg, #f7971e, #ffd200); color: #fff; }
.hub-nav-dropdown .dropdown-label { display: flex; flex-direction: column; }
.hub-nav-dropdown .dropdown-label small {
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 400;
}
.hub-nav-dropdown .dropdown-divider {
  height: 1px;
  background: #eef0fb;
  margin: 4px 12px;
}

.fab-hub-nav {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 999;
}
.fab-hub-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px 10px 16px;
  background: linear-gradient(135deg, #4e54c8 0%, #8f94fb 100%);
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.3px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(78, 84, 200, 0.45);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-family: inherit;
}
.fab-hub-trigger:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 6px 24px rgba(78, 84, 200, 0.55);
}
.fab-hub-trigger svg { flex-shrink: 0; }
.fab-hub-trigger .chevron-up { transition: transform 0.25s ease; }
.fab-hub-nav.is-open .fab-hub-trigger .chevron-up { transform: rotate(180deg); }

.fab-hub-dropdown {
  position: absolute;
  bottom: calc(100% + 10px);
  right: 0;
  min-width: 280px;
  background: #fff;
  border: 1px solid #e0e7ff;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(30, 64, 175, 0.16), 0 2px 6px rgba(0,0,0,0.08);
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  padding: 6px 0;
}
.fab-hub-nav.is-open .fab-hub-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.fab-hub-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  color: #1f2a44;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
  transition: background 0.15s;
  line-height: 1.35;
}
.fab-hub-dropdown a:hover { background: #f0f2ff; color: #4e54c8; }
.fab-hub-dropdown .dropdown-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  font-size: 1rem;
  flex-shrink: 0;
}
.fab-hub-dropdown .dropdown-icon.hub   { background: linear-gradient(135deg, #4e54c8, #8f94fb); color: #fff; }
.fab-hub-dropdown .dropdown-icon.paper { background: linear-gradient(135deg, #36d1dc, #5b86e5); color: #fff; }
.fab-hub-dropdown .dropdown-icon.ext   { background: linear-gradient(135deg, #f7971e, #ffd200); color: #fff; }
.fab-hub-dropdown .dropdown-label { display: flex; flex-direction: column; }
.fab-hub-dropdown .dropdown-label small {
  color: #94a3b8;
  font-size: 0.78rem;
  font-weight: 400;
}
.fab-hub-dropdown .dropdown-divider {
  height: 1px;
  background: #eef0fb;
  margin: 4px 12px;
}

/* ---------- Case-study browser ---------- */
#cases { background: linear-gradient(180deg, #fbfcff, #f4f7ff); }
.cs-lead {
  max-width: 820px;
  margin: 0 auto 1.5rem;
  text-align: center;
  color: #475569;
  font-size: 1.02rem;
  line-height: 1.72;
}
.cs-toolbar[hidden] { display: none; }
.cs-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  padding: 12px 14px;
  margin: 0 0 14px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 6px 14px rgba(30, 64, 175, 0.05);
}
.cs-fl[hidden] { display: none; }
.cs-fl { display: inline-flex; align-items: center; gap: 6px; }
.cs-toolbar label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.cs-toolbar select, .cs-q {
  font-family: inherit;
  font-size: 12px;
  color: var(--text);
  background: #f8faff;
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 5px 8px;
  max-width: 190px;
}
.cs-toolbar select:focus, .cs-q:focus { outline: none; border-color: #0e7490; background: #fff; }
.cs-q { flex: 1 1 160px; min-width: 140px; max-width: 300px; }
.cs-check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}
.cs-check input { accent-color: #0e7490; width: 14px; height: 14px; cursor: pointer; }

.cs-split { display: grid; grid-template-columns: 262px 1fr; gap: 14px; align-items: start; }
.cs-listwrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.06);
  position: sticky;
  top: 16px;
}
.cs-listhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  padding: 11px 13px;
  border-bottom: 1px solid var(--border);
  background: #f8faff;
}
.cs-listhead strong { font-size: 0.85rem; color: #3a3f73; }
.cs-listhead span { font-size: 0.72rem; color: var(--muted); }
.cs-list { list-style: none; margin: 0; padding: 0; max-height: 660px; overflow-y: auto; }
.cs-li-id { font-size: 10px; color: #94a3b8; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin-bottom: 3px; }
.cs-more { padding: 10px 13px; }
.cs-more button {
  width: 100%;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  background: #f4f6ff;
  border: 1px dashed #c7d2fe;
  border-radius: 8px;
  padding: 7px;
  cursor: pointer;
}
.cs-more button:hover { background: #eef2ff; }
.cs-empty { padding: 18px 13px; font-size: 12px; color: var(--muted); font-style: italic; }
.cs-list li { padding: 11px 13px; border-bottom: 1px solid #eef1fb; cursor: pointer; transition: background .15s ease; }
.cs-list li:hover { background: #f6f9ff; }
.cs-list li.is-active { background: #eefafd; box-shadow: inset 3px 0 0 #0e7490; }
.cs-li-top { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 5px; }
.cs-li-badge {
  background: #eef2ff;
  color: #3a3f73;
  border-radius: 5px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.cs-li-top strong { font-size: 11.5px; color: var(--text); text-transform: uppercase; letter-spacing: 0.04em; }
.cs-tag { font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: #c2410c; background: #fff1e7; border-radius: 5px; padding: 2px 6px; }
.cs-tag.is-same { color: #0e7490; background: #eefafd; }
.cs-tag.is-fwd { color: #6d28d9; background: #f3effe; }
.cs-tag.is-need { color: #3a3f73; background: #eef2ff; }
.cs-li-q { font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.cs-li-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.cs-strip { display: inline-flex; gap: 2px; }
.cs-strip i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; }
.cs-li-sp { font-size: 10px; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.cs-s-full { background: #16a34a; color: #15803d; }
.cs-s-part { background: #f59e0b; color: #b45309; }
.cs-s-zero { background: #dc2626; color: #b91c1c; }

.cs-detail {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px 20px;
  min-width: 0;
  box-shadow: 0 8px 18px rgba(30, 64, 175, 0.06);
  animation: lpFade .28s ease both;
}
.cs-dhead { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; margin-bottom: 4px; }
.cs-dtitle {
  margin: 0 0 4px;
  font-family: 'Google Sans', 'Noto Sans', sans-serif;
  font-size: 1.34rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #1f2a44;
}
.cs-dtitle .cs-mut { text-transform: none; font-weight: 500; }
.cs-dsub { margin: 0; font-size: 0.84rem; line-height: 1.6; color: #475569; max-width: 62ch; }
.cs-dsub code { font-size: 0.78rem; background: #f4f6ff; border-radius: 4px; padding: 1px 5px; color: #3a3f73; word-break: break-all; }
.cs-scoreboard { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; max-width: 300px; }
.cs-sb { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 700; color: var(--muted); white-space: nowrap; }
.cs-sb i { width: 8px; height: 8px; border-radius: 2px; }

.cs-h4 {
  margin: 20px 0 9px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: #0e7490;
}
.cs-prompt {
  background: #f8faff;
  border: 1px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: 10px;
  padding: 13px 15px;
  font-size: 0.87rem;
  line-height: 1.72;
  color: #334155;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
}
.cs-checks { margin: 0; padding-left: 20px; font-size: 0.83rem; line-height: 1.65; color: #475569; }
.cs-checks li { margin-bottom: 3px; }

.cs-kv { display: grid; grid-template-columns: minmax(130px, 190px) 1fr; gap: 8px 14px; align-items: baseline; }
.cs-k { font-size: 11.5px; font-weight: 700; color: var(--muted); line-height: 1.4; }
.cs-v { min-width: 0; }
.cs-gradenote { margin: 7px 0 0; font-size: 11.5px; line-height: 1.6; }

.cs-chip {
  display: inline-block;
  background: #eef1fb;
  color: #475569;
  border: 1px solid #dfe4f5;
  border-radius: 5px;
  padding: 1px 6px;
  margin: 0 3px 3px 0;
  font-size: 10.5px;
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  word-break: break-word;
}
.cs-chip.is-new { border-color: var(--accent); border-width: 1.5px; color: #363a9e; background: #e3e7ff; font-weight: 700; }
.cs-chip.is-hit { background: #f0fdf4; border-color: #a7e3c0; color: #15803d; }
.cs-chip.is-spare { background: #f8fafc; border-color: #e2e8f0; color: #64748b; }
.cs-chip.is-miss { background: #fef2f2; border-color: #f5a3a3; color: #b91c1c; }
.cs-chip.is-miss-soft { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
.cs-chip.is-graded { background: #fff7ed; border-color: #f4cdb4; color: #c2410c; }
.cs-chip.is-blind { background: #f8fafc; border-color: #e2e8f0; color: #94a3b8; }
.cs-none { font-size: 11px; color: #94a3b8; font-style: italic; }
.cs-zero { font-size: 11px; font-weight: 700; color: var(--bad); }
.cs-ok-txt { font-size: 11px; font-weight: 700; color: #15803d; }
.cs-mut { color: var(--muted); font-weight: 500; }

.cs-det { margin: 0; }
.cs-det > summary {
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--accent);
  list-style: none;
  display: inline-block;
  border: 1px dashed #c7d2fe;
  border-radius: 6px;
  padding: 2px 9px;
}
.cs-det > summary::-webkit-details-marker { display: none; }
.cs-det > summary::before { content: "▸ "; }
.cs-det[open] > summary::before { content: "▾ "; }
.cs-det[open] > summary { margin-bottom: 6px; }
.cs-fold { max-height: 190px; overflow-y: auto; }

.cs-syslead { font-size: 11.5px; line-height: 1.7; margin: 0 0 10px; }
.cs-tblwrap { overflow-x: auto; }
table.cs-tbl { width: 100%; border-collapse: collapse; font-size: 11.5px; }
table.cs-tbl th, table.cs-tbl td { padding: 8px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
table.cs-tbl th { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: #f8faff; white-space: nowrap; }
table.cs-tbl tbody tr:hover { background: #fbfcff; }
.cs-score { font-weight: 800; font-variant-numeric: tabular-nums; background: none !important; }
.cs-mono { font-variant-numeric: tabular-nums; white-space: nowrap; color: #475569; }
.cs-sel { min-width: 168px; }
/* Capability names run to 32 characters; a smaller chip keeps them on one line. */
.cs-sel .cs-chip { font-size: 9.5px; padding: 1px 5px; }
.cs-sel-sum, .cs-miss-sum { font-size: 10.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.cs-sel-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin: 5px 0 3px; }

.cs-prov { margin: 16px auto 0; max-width: 760px; text-align: center; font-size: 0.8rem; line-height: 1.65; color: var(--muted); }
.cs-prov code { font-size: 0.76rem; background: #eef1fb; border-radius: 4px; padding: 1px 5px; }

/* ---------- Task gallery ---------- */
.tg-lead {
  max-width: 800px;
  margin: 0 auto 1.4rem;
  text-align: center;
  line-height: 1.8;
  color: #1f2a44;
}

.tg-stats {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
  margin: 0 0 16px;
}
.tg-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 13px;
  text-align: center;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.tg-stat:hover { border-color: var(--border-strong); }
.tg-stat.is-active { border-color: var(--accent); box-shadow: 0 6px 18px -12px rgba(78, 84, 200, .8); }
.tg-stat b { display: block; font-size: 1.3rem; font-weight: 750; color: var(--accent); line-height: 1.2; }
.tg-stat i {
  font-style: normal;
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.tg-count { margin: 0 0 12px; font-size: 0.82rem; font-weight: 700; color: var(--muted); }

.tg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(292px, 1fr));
  gap: 12px;
  margin: 0;
}
.tg-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 13px 15px 14px;
  text-align: left;
  font-family: inherit;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.tg-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 12px 26px -18px rgba(15, 23, 42, .5);
  transform: translateY(-1px);
}
/* Card figure. Full-bleed banner cropped from the top-left, so an app view
   still reads as that app — header and first rows — at this height. */
.tg-card.has-shot { padding-top: 0; }
.tg-shot {
  position: relative;
  display: block;
  margin: 0 -15px;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
  background: #f1f5f9;
  border-bottom: 1px solid var(--border);
}
.tg-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top left;
}
.tg-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  height: 34px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgba(15, 23, 42, .6);
  box-shadow: 0 2px 10px rgba(15, 23, 42, .35);
}
.tg-play::after {
  content: "";
  position: absolute;
  left: 13px;
  top: 10px;
  border-left: 11px solid #fff;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
}

.tg-badges { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.tg-b {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.tg-b.is-tools { background: rgba(78, 84, 200, .10); color: var(--accent); border: 1px solid rgba(78, 84, 200, .22); }
.tg-b.is-skills { background: rgba(13, 148, 136, .10); color: #0f766e; border: 1px solid rgba(13, 148, 136, .22); }
.tg-b.is-agents { background: rgba(194, 65, 12, .09); color: #c2410c; border: 1px solid rgba(194, 65, 12, .2); }
.tg-b.is-env { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.tg-b.is-stage { background: #eef2ff; color: #4338ca; border: 1px solid #e0e7ff; }
.tg-ttl {
  margin: 0;
  font-size: 0.94rem;
  font-weight: 700;
  line-height: 1.4;
  color: #1f2a44;
}
.tg-ex {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.6;
  color: #475569;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.tg-meta span { white-space: nowrap; }

.tg-more { margin: 16px 0 0; text-align: center; }
.tg-morebtn {
  border: 1px solid var(--border);
  background: #fff;
  color: #3a3f73;
  border-radius: 999px;
  padding: 8px 22px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.tg-morebtn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- Task detail dialog ---------- */
.tg-modal {
  width: min(880px, calc(100vw - 32px));
  max-height: min(88vh, 900px);
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: #fff;
  color: #1f2a44;
  overflow: visible;
}
.tg-modal::backdrop { background: rgba(15, 23, 42, .5); backdrop-filter: blur(2px); }
.tg-close {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: #fff;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.tg-close:hover { color: #1f2a44; border-color: var(--border-strong); }
.tg-detail {
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: 20px 22px 24px;
  border-radius: 16px;
}
.tg-dhead { margin: 0 0 14px; padding-right: 34px; }
.tg-dtitle { margin: 7px 0 5px; font-size: 1.2rem; font-weight: 750; line-height: 1.35; }
.tg-did { font-size: 0.74rem; color: var(--muted); word-break: break-all; }
.tg-did code { background: #f4f6ff; border-radius: 4px; padding: 1px 5px; color: #3a3f73; }
.tg-h4 {
  margin: 20px 0 8px;
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #94a3b8;
}
.tg-pre {
  margin: 0;
  padding: 12px 14px;
  background: #f7f8fc;
  border: 1px solid var(--border);
  border-left: 3px solid #c7d2fe;
  border-radius: 10px;
  font-size: 0.83rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-height: 340px;
  overflow-y: auto;
}
/* Detail figures. Two per row so a screenshot of an app is still readable at
   a glance, in a fixed 16:10 box — the shape the environment captures already
   are, so they fill it, while a tall staged artifact letterboxes rather than
   being cropped into something unrecognisable. */
.tg-figs {
  display: grid;
  /* auto-fit, not auto-fill: a single-gym task has one figure, and an empty
     second track would strand it at half width. min() so a narrow phone gets
     one full-width column instead of a track wider than the dialog. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px;
  margin: 0 0 6px;
}
.tg-fig { margin: 0; }
.tg-figbtn {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: #f8fafc;
  cursor: zoom-in;
  transition: border-color .15s, box-shadow .15s;
}
.tg-figbtn:hover { border-color: var(--accent); box-shadow: 0 10px 22px -16px rgba(15, 23, 42, .55); }
.tg-figbtn img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: contain;
}
.tg-fig figcaption {
  margin: 5px 1px 0;
  font-size: 0.72rem;
  line-height: 1.5;
  color: var(--muted);
}
.tg-figtag {
  display: inline-block;
  padding: 1px 5px;
  border-radius: 999px;
  background: #eef2ff;
  border: 1px solid #e0e7ff;
  color: #4338ca;
  font-size: 8.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}

/* Lightbox, stacked over the detail dialog. Sized to the media so a tall
   slide and a wide screenshot both land centred without letterboxing. */
.tg-lbox {
  width: fit-content;
  max-width: min(96vw, 1240px);
  max-height: 94vh;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  overflow: visible;
}
.tg-lbox::backdrop { background: rgba(8, 11, 20, .82); backdrop-filter: blur(3px); }
.tg-lbody {
  position: relative;
  padding: 11px;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 30px 70px -30px rgba(2, 6, 23, .8);
}
/* The frame is already sized to the fitted box, so the media just fills it. */
.tg-lmedia {
  display: block;
  width: 100%;
  height: auto;
  max-height: 82vh;
  border-radius: 8px;
  background: #f1f5f9;
}
/* The caption must not widen the panel: a long provenance path would stretch
   a 640px clip's frame across the viewport. Zero intrinsic width leaves the
   media as the only thing the dialog sizes to, then it fills that width. */
.tg-lcap {
  width: 0;
  min-width: 100%;
  margin: 9px 3px 1px;
  padding-right: 30px;
  box-sizing: border-box;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--muted);
}
.tg-lsrc {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 0.68rem;
  color: #94a3b8;
  word-break: break-all;
}

.tg-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.tg-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 5px;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #e0e7ff;
}
.tg-chip.is-extra { background: #f8fafc; color: #64748b; border-color: #e2e8f0; }
.tg-sub { margin: 0 0 7px; font-size: 0.78rem; color: var(--muted); }

/* A chip that can be opened. Only the cursor and a hover lift say so: a pool runs to
   seventy-odd of these, and anything louder would turn the list into a wall of buttons. */
.tg-chip.is-doc { font-family: inherit; cursor: pointer; transition: background .12s, border-color .12s; }
.tg-chip.is-doc:hover { background: #e0e7ff; border-color: #a5b4fc; }
.tg-chip.is-extra.is-doc:hover { background: #eef2ff; border-color: #c7d2fe; color: #4338ca; }
.tg-chip.is-doc:focus-visible { outline: 2px solid #4e54c8; outline-offset: 1px; }
.tg-chip.is-doc.is-open { background: #4e54c8; border-color: #4e54c8; color: #fff; }

.tg-docgrp { margin: 0 0 7px; }
.tg-doc {
  margin: 7px 0 0;
  padding: 11px 13px;
  background: #f8faff;
  border: 1px solid #e0e7ff;
  border-radius: 10px;
}
.tg-doc-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.tg-doc-name { font-size: 0.8rem; font-weight: 750; color: #312e81; }
.tg-doc-title { font-size: 0.75rem; font-weight: 700; color: #4338ca; }
.tg-doc-gym { font-size: 0.7rem; font-weight: 650; color: var(--muted); }
.tg-doc-d { margin: 6px 0 0; font-size: 0.79rem; line-height: 1.6; color: #1f2a44; }
.tg-doc-none { margin: 0; font-size: 0.78rem; line-height: 1.6; color: var(--muted); }
.tg-doc-args { width: 100%; margin: 9px 0 0; border-collapse: collapse; font-size: 0.74rem; }
.tg-doc-args th {
  text-align: left;
  padding: 0 8px 4px 0;
  font-size: 0.66rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: 1px solid #e0e7ff;
}
.tg-doc-args td { padding: 5px 8px 5px 0; vertical-align: top; border-bottom: 1px solid #eef2ff; }
.tg-doc-args tr:last-child td { border-bottom: 0; }
.tg-doc-args code { font-size: 0.72rem; color: #3730a3; }
.tg-doc-req {
  margin-left: 5px;
  font-size: 0.6rem;
  font-weight: 750;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #b45309;
}
.tg-doc-ty { color: var(--muted); font-family: var(--mono, ui-monospace, monospace); }
.tg-doc-o { margin: 9px 0 0; font-size: 0.74rem; line-height: 1.9; color: var(--muted); }
.tg-doc-o code { font-size: 0.72rem; color: #475569; background: #eef2ff; padding: 1px 5px; border-radius: 4px; }

/* A skill's or specialist's own brief, rendered from the sections it was written in. The
   panel is nested two levels deep inside the modal already, so the type stays quiet and
   the section headings carry the structure. */
.tg-doc-sec {
  margin: 12px 0 0;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #6366f1;
}
.tg-doc-abr { font-weight: 600; letter-spacing: .02em; text-transform: none; color: var(--muted); }
.tg-doc-p { margin: 5px 0 0; font-size: 0.76rem; line-height: 1.65; color: #334155; }
.tg-doc-sub { margin: 8px 0 0; font-size: 0.72rem; font-weight: 700; color: #475569; }
/* Bulma clears list markers page-wide; a procedure without its steps numbered, or a set of
   caveats without bullets, reads as one run-on paragraph. */
ul.tg-doc-list { list-style: disc outside; }
ol.tg-doc-list { list-style: decimal outside; }
.tg-doc-list { margin: 5px 0 0; padding-left: 18px; font-size: 0.76rem; line-height: 1.6; color: #334155; }
.tg-doc-list::marker, .tg-doc-list li::marker { color: #a5b4fc; }
.tg-doc-list li { margin: 2px 0; }
.tg-doc-more { color: var(--muted); font-style: italic; }
p.tg-doc-more { margin: 4px 0 0; font-size: 0.72rem; }

/* What the environment knows about a chip beyond its prose: the records a skill writes,
   the tools a specialist owns, how a run reaches a piece of software. */
.tg-doc-facts { margin: 8px 0 0; font-size: 0.74rem; line-height: 1.6; }
.tg-doc-facts:empty { display: none; }
.tg-doc-facts dt {
  margin: 6px 0 0;
  font-size: 0.63rem;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
}
.tg-doc-facts dd { margin: 2px 0 0; color: #334155; }
.tg-doc-facts code, .tg-doc-p code, .tg-doc-list code, .tg-doc-d code {
  font-size: 0.71rem;
  color: #3730a3;
  background: #eef2ff;
  padding: 1px 5px;
  border-radius: 4px;
}

.tg-vf {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 0 0 8px;
  background: #fff;
}
.tg-vf-top { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.tg-vf-name { font-size: 0.85rem; font-weight: 700; }
.tg-vf-kind {
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #0f766e;
  background: rgba(13, 148, 136, .1);
  border: 1px solid rgba(13, 148, 136, .22);
  border-radius: 999px;
  padding: 2px 7px;
}
.tg-vf-exp { font-size: 0.76rem; color: var(--muted); }
.tg-sql {
  margin: 7px 0 0;
  padding: 9px 11px;
  background: #0b1220;
  border-radius: 8px;
  color: #e2e8f0;
  font-size: 0.74rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-x: auto;
}

table.tg-files { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
table.tg-files th {
  text-align: left;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  padding: 0 8px 5px 0;
}
table.tg-files td { padding: 5px 8px 5px 0; border-top: 1px solid var(--border); vertical-align: top; color: #475569; }
table.tg-files td:first-child { font-weight: 700; color: #1f2a44; white-space: nowrap; }
table.tg-files code { font-size: 0.72rem; background: #f4f6ff; border-radius: 4px; padding: 1px 4px; }

.tg-steps { margin: 0; padding-left: 20px; }
.tg-steps li { font-size: 0.83rem; line-height: 1.65; color: #475569; margin-bottom: 4px; }

.tg-none { padding: 26px 10px; text-align: center; color: var(--muted); font-size: 0.9rem; }

@media (max-width: 1023px) {
  .tg-stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .tg-stats { grid-template-columns: repeat(2, 1fr); }
  .tg-grid { grid-template-columns: 1fr; }
  .tg-detail { padding: 18px 15px 20px; }
}

/* ---------- Leaderboard ---------- */
.lb-lead {
  max-width: 780px;
  margin: 0 auto 1.3rem;
  text-align: center;
  line-height: 1.8;
  color: #1f2a44;
}

.lb-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 18px;
  margin: 0 0 12px;
}
.lb-seg {
  display: inline-flex;
  background: #eef1f8;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px;
}
.lb-seg.is-ghost { background: #fff; }
.lb-segb {
  border: 0;
  background: none;
  border-radius: 999px;
  padding: 6px 15px;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.lb-segb:hover { color: #1f2a44; }
.lb-segb.is-active {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 14px -8px rgba(78, 84, 200, .9);
}
.lb-seg.is-ghost .lb-segb.is-active { background: #1f2a44; }

.lb-note {
  margin: 0 auto 16px;
  max-width: 820px;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.65;
  color: var(--muted);
}

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

/* ---------- Ranked table ---------- */
.lb-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: 13px; background: #fff; }
table.lb {
  width: 100%;
  min-width: 960px;                    /* 820px, plus the model and harness columns */
  border-collapse: collapse;
  font-size: 0.84rem;
}
table.lb thead th {
  position: relative;
  padding: 9px 10px;
  text-align: right;
  font-size: 9.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  background: #f7f8fc;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
table.lb thead th:first-child, table.lb thead th:nth-child(2) { text-align: left; }
table.lb thead th.is-sorted { color: var(--accent); }
table.lb thead th.is-sorted::after { content: " \25be"; }
table.lb thead th.is-sorted.is-asc::after { content: " \25b4"; }
table.lb thead tr.lb-grp th {
  text-align: center;
  cursor: default;
  color: #94a3b8;
  background: #fff;
  border-bottom: 1px solid var(--border);
}
table.lb thead tr.lb-grp th.lb-eog { color: var(--accent); background: rgba(78, 84, 200, .05); }
table.lb thead tr.lb-grp th.lb-ale { color: #b45309; background: rgba(217, 119, 6, .06); }
table.lb tbody td {
  padding: 8px 10px;
  text-align: right;
  border-top: 1px solid var(--border);
  color: #334155;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.lb tbody td:first-child, table.lb tbody td:nth-child(2) { text-align: left; }
table.lb tbody tr:hover td { background: #fafbff; }
table.lb tbody tr.is-ref td { color: #64748b; background: #fcfcfd; }
table.lb tbody tr.is-top td { background: rgba(78, 84, 200, .045); }
.lb-rk {
  display: inline-block;
  min-width: 20px;
  font-size: 0.78rem;
  font-weight: 800;
  color: #94a3b8;
}
.lb-rk.is-1 { color: #b45309; }
.lb-rk.is-2 { color: #64748b; }
.lb-rk.is-3 { color: #92400e; }
.lb-nm { font-weight: 700; color: #1f2a44; }
.lb-tag {
  display: inline-block;
  margin-left: 6px;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 999px;
  vertical-align: 1px;
}
.lb-tag.is-ref { background: #f1f5f9; color: #64748b; border: 1px solid #e2e8f0; }
.lb-tag.is-mas { background: rgba(13, 148, 136, .1); color: #0f766e; border: 1px solid rgba(13, 148, 136, .2); }
.lb-cat {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
}
.lb-sd { font-size: 0.68rem; color: #94a3b8; margin-left: 1px; }
.lb-hi { font-weight: 800; color: var(--accent); }
table.lb tbody td.lb-ov { font-weight: 750; color: #1f2a44; background: rgba(78, 84, 200, .04); }
table.lb tbody td.lb-ov.lb-hi { color: var(--accent); }
.lb-dash { color: #cbd5e1; }

/* Model and harness columns. Text, not numbers, so they align left with the system name
   and stay quiet -- until a row swaps the backbone, which is the one thing in here that
   decides whether a comparison holds, so that value is the only one carrying colour. */
table.lb thead th:nth-child(3), table.lb thead th:nth-child(4),
table.lb tbody td.lb-meta {
  text-align: left;
  white-space: nowrap;
}
table.lb thead th:nth-child(3), table.lb thead th:nth-child(4) { cursor: default; }
table.lb tbody td.lb-meta { font-size: 11.5px; font-weight: 650; color: #64748b; }
.lb-llm.is-alt {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(190, 24, 93, .1);
  color: #9d174d;
  font-weight: 750;
}

/* Facet filters. Same control vocabulary as the task browser's toolbar, which this
   reuses wholesale; only the centring and the trailing count are leaderboard-specific. */
.lb-filters { justify-content: center; margin: 0 0 4px; }
.lb-count {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.lb-reset {
  font-family: inherit;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: none;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 4px 11px;
  cursor: pointer;
}
.lb-reset:hover { background: #f2f4ff; border-color: var(--accent); }

/* ---------- Charts ---------- */
.lb-fig { margin: 0 0 6px; background: #fff; border: 1px solid var(--border); border-radius: 13px; padding: 14px 8px 6px; }
.lb-none {
  margin: 0;
  padding: 58px 10px;
  font-size: 12px;
  font-weight: 650;
  color: var(--muted);
  text-align: center;
}
.lb-fig svg { display: block; width: 100%; height: auto; }
.lb-figh {
  margin: 0 0 2px;
  padding: 0 10px;
  font-size: 0.9rem;
  font-weight: 750;
  color: #1f2a44;
  text-align: center;
}
.lb-figs {
  margin: 0 0 8px;
  padding: 0 10px;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--muted);
  text-align: center;
}
.lb-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 16px;
  margin: 0 0 10px;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
}
.lb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.lb-legend i { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.lb-effgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* A field this full draws on a wider canvas, which needs the whole column to stay legible
   side by side: two of them would render the labels at half the size they were drawn. */
.lb-effgrid.is-roomy { grid-template-columns: 1fr; }
.lb-cap {
  margin: 8px 0 0;
  font-size: 0.78rem;
  line-height: 1.65;
  color: var(--muted);
  text-align: center;
}

/* SVG text scales with the viewBox, so sizes here are viewBox units. */
.lb-ax { font-size: 11px; fill: #64748b; font-weight: 600; }
.lb-axt { font-size: 11px; fill: #475569; font-weight: 700; }
.lb-vl { font-size: 11px; fill: #334155; font-weight: 700; }
.lb-gl { stroke: #eef1f8; stroke-width: 1; }
.lb-zl { stroke: #cbd5e1; stroke-width: 1; }
.lb-wh { stroke: #1f2a44; stroke-width: 1.4; opacity: .62; fill: none; }
.lb-pt-l { font-size: 10.5px; fill: #334155; font-weight: 700; }
.lb-hint { font-size: 10.5px; fill: #94a3b8; font-weight: 700; font-style: italic; }

@media (max-width: 900px) {
  .lb-effgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .lb-bar { gap: 8px; }
  .lb-segb { padding: 6px 11px; font-size: 11.5px; }
}

/* ---------- Evaluation service ---------- */
.sv-lead {
  max-width: 760px;
  margin: 0 auto 1.5rem;
  text-align: center;
  line-height: 1.8;
  color: #1f2a44;
}
.sv-lead em { font-style: italic; color: #c2410c; font-weight: 600; }
.sv-lead code,
.sv-knob code,
.sv-card code,
.sv-cap code,
.sv-tut code,
.sv-cta code {
  font-size: 0.84em;
  background: #eef1fb;
  border-radius: 4px;
  padding: 1px 5px;
  color: #3a3f73;
}

.sv-flow {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  margin: 0 0 1.9rem;
  padding: 0;
  counter-reset: sv;
}
.sv-flow li {
  position: relative;
  counter-increment: sv;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 12px 40px;
}
.sv-flow li::before {
  content: counter(sv);
  position: absolute;
  left: 12px;
  top: 12px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 800;
  background: rgba(78, 84, 200, 0.1);
  color: var(--accent);
  border: 1px solid rgba(78, 84, 200, 0.22);
}
.sv-flow li::after {
  content: "";
  position: absolute;
  right: -8px;
  top: 50%;
  width: 6px;
  height: 6px;
  border-top: 2px solid #cbd5e1;
  border-right: 2px solid #cbd5e1;
  transform: translateY(-50%) rotate(45deg);
}
.sv-flow li:last-child::after { display: none; }
.sv-flow b { display: block; font-size: 0.9rem; font-weight: 700; color: #1f2a44; }
.sv-flow i { font-style: normal; font-size: 0.78rem; line-height: 1.5; color: var(--muted); }

.sv-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin: 0 0 1.9rem;
}
.sv-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px 18px 18px;
}
.sv-card--eog { border-color: #c7d2fe; background: #fbfcff; }
.sv-card--ale { border-color: #f3d3ae; background: #fffdf9; }
.sv-card h3 { margin: 8px 0 6px; font-size: 1.02rem; font-weight: 700; color: #1f2a44; }
.sv-card p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: #334155; }
.sv-card b { font-weight: 700; color: #1f2a44; }
.sv-tag {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
}
.sv-card--eog .sv-tag { background: rgba(78, 84, 200, 0.1); color: var(--accent); border: 1px solid rgba(78, 84, 200, 0.22); }
.sv-card--ale .sv-tag { background: rgba(194, 65, 12, 0.09); color: #c2410c; border: 1px solid rgba(194, 65, 12, 0.2); }

.sv-h3 {
  margin: 0 0 12px;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
  text-align: center;
}
.sv-knobs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 2rem;
}
.sv-knob {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px 16px;
}
.sv-kn {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 750;
  color: var(--accent);
}
.sv-knob p { margin: 0; font-size: 0.86rem; line-height: 1.7; color: #334155; }

.sv-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0 0 16px;
}
.sv-tab {
  border: 1px solid #e0e7ff;
  background: #fff;
  color: #64748b;
  border-radius: 999px;
  padding: 7px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, color .15s, border-color .15s;
}
.sv-tab:hover { border-color: var(--border-strong); }
.sv-tab.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.sv-panel { display: none; }
.sv-panel.is-active { display: block; animation: lpFade .3s ease both; }

.sv-cap {
  max-width: 800px;
  margin: 0 0 12px;
  font-size: 0.88rem;
  line-height: 1.75;
  color: #475569;
}
.sv-cap + .sv-codewrap { margin-bottom: 14px; }
.sv-cap em { font-style: italic; color: #c2410c; }
/* A caption that leads a block rather than a snippet, so it centres under its heading. */
.sv-cap--mid { max-width: 700px; margin: 0 auto 16px; text-align: center; }

/* Three notebooks at increasing depth. The reader picks one, so they are cards to choose
   between rather than a list of links. */
.sv-tuts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 1.4rem;
}
.sv-tut {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 15px 16px 14px;
  transition: border-color .12s, transform .12s, box-shadow .12s;
}
.sv-tut:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 12px 26px -18px rgba(78, 84, 200, .9);
}
/* Where a first-time reader should land. */
.sv-tut.is-first { border-color: #c7d2fe; background: linear-gradient(180deg, #fbfcff, #fff 60%); }
.sv-tut-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 7px; }
.sv-tut-n {
  flex: 0 0 auto;
  width: 21px;
  height: 21px;
  border-radius: 999px;
  background: #eef1fb;
  color: var(--accent);
  font-size: 11.5px;
  font-weight: 800;
  line-height: 21px;
  text-align: center;
}
.sv-tut.is-first .sv-tut-n { background: var(--accent); color: #fff; }
.sv-tut-t { font-size: 0.99rem; font-weight: 750; color: #1f2a44; }
.sv-tut-b {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(78, 84, 200, .1);
  color: var(--accent);
  border: 1px solid rgba(78, 84, 200, .22);
}
.sv-tut-d { flex: 1 1 auto; font-size: 0.86rem; line-height: 1.7; color: #475569; }
/* Depth, in the one unit that is honest about it. */
.sv-tut-f { display: block; margin-top: 10px; font-size: 11.5px; font-weight: 600; color: #94a3b8; }
.sv-tut-f code { font-size: 0.94em; background: none; padding: 0; color: #94a3b8; }
.sv-tut-go {
  margin-top: 6px;
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--accent);
}

.sv-codewrap {
  position: relative;
  margin: 0 0 14px;
}
.sv-lang {
  position: absolute;
  top: 10px;
  left: 14px;
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
}
.sv-copy {
  position: absolute;
  top: 7px;
  right: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border-radius: 7px;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sv-copy:hover { background: rgba(148, 163, 184, 0.28); color: #f8fafc; }
.sv-copy.is-done { background: rgba(16, 185, 129, 0.2); border-color: rgba(16, 185, 129, 0.45); color: #6ee7b7; }
.sv-code {
  margin: 0;
  padding: 34px 16px 16px;
  background: #0b1220;
  border: 1px solid rgba(148, 163, 184, 0.28);
  border-radius: 12px;
  overflow-x: auto;
  color: #e2e8f0;
  font-size: 0.8rem;
  line-height: 1.75;
  tab-size: 4;
}
.sv-code code {
  font-family: "SFMono-Regular", Menlo, Consolas, monospace;
  background: none;
  color: inherit;
  padding: 0;
  white-space: pre;
}
.sv-code .t-c { color: #7f93b0; font-style: italic; }
.sv-code .t-s { color: #9ae6b4; }
.sv-code .t-k { color: #c4b5fd; font-weight: 600; }
.sv-code .t-b { color: #7dd3fc; }
.sv-code .t-n { color: #fbbf77; }

.sv-cta {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 1.6rem 0 0;
  padding: 18px 20px;
  background: linear-gradient(135deg, #f5f6ff, #eef1fb);
  border: 1px solid #d5dbf5;
  border-radius: 14px;
}
.sv-cta-tx { flex: 1 1 auto; min-width: 0; }
.sv-cta h3 { margin: 0 0 5px; font-size: 1.05rem; font-weight: 750; color: #1f2a44; }
.sv-cta p { margin: 0; font-size: 0.86rem; line-height: 1.7; color: #475569; }
.sv-cta a.sv-cta-btn {
  flex: 0 0 auto;
  white-space: nowrap;
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
  font-weight: 650;
  box-shadow: 0 10px 24px -14px rgba(78, 84, 200, 0.9);
}
.sv-cta a.sv-cta-btn:hover, .sv-cta a.sv-cta-btn:focus {
  background: #4348b0;
  border-color: #4348b0;
  color: #fff;
}
/* Step one of the quickstart, not the closing pitch, so it opens the panel rather than
   ending it. */
.sv-cta--key { margin: 0 0 1.1rem; }

/* ---------- Execution environment: hosted service or local ---------- */

/* A choice, so the two read as peers rather than as a strip of view tabs -- the quickstart
   tabs inside the hosted panel already own that shape, and nesting one inside the other
   would make the outer switch look like a third row of the inner one.
   The whole control sits on a dark panel: the section below it is a run of white cards,
   and on white the two options were reading as two more of them. */
.ev-choose {
  background: linear-gradient(135deg, #2c2f6e, #4e54c8);
  border-radius: 18px;
  padding: 15px 16px 20px;
  margin: 0 0 1.7rem;
  box-shadow: 0 14px 30px rgba(31, 42, 68, .16);
}
.ev-choose-lb {
  display: block;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .78);
  margin: 0 0 11px 4px;
}
.ev-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ev-tab {
  position: relative;
  display: block;
  text-align: left;
  font-family: inherit;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 14px;
  padding: 14px 16px 15px;
  cursor: pointer;
  transition: border-color .12s, background .12s, box-shadow .12s, transform .12s;
}
.ev-tab:hover { background: rgba(255, 255, 255, .19); border-color: rgba(255, 255, 255, .5); }
.ev-tab.is-active {
  background: #fff;
  border-color: #fff;
  box-shadow: 0 10px 22px rgba(20, 24, 60, .28);
}
/* Points at the panel it opens. */
.ev-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  background: #fff;
  border-radius: 3px;
  transform: rotate(45deg);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
}
.ev-th { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 5px; }
.ev-tt { font-size: 1.02rem; font-weight: 750; color: #fff; }
.ev-tab.is-active .ev-tt { color: var(--accent); }
.ev-ts {
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 3px 9px;
  border-radius: 999px;
}
/* Unselected sits on the dark panel, so the status pills need the brighter pair. */
.ev-ts.is-live { background: rgba(94, 234, 212, .18); color: #99f6e4; border: 1px solid rgba(94, 234, 212, .38); }
.ev-ts.is-soon { background: rgba(253, 186, 116, .18); color: #fed7aa; border: 1px solid rgba(253, 186, 116, .38); }
.ev-tab.is-active .ev-ts.is-live { background: rgba(13, 148, 136, .1); color: #0f766e; border-color: rgba(13, 148, 136, .22); }
.ev-tab.is-active .ev-ts.is-soon { background: rgba(194, 65, 12, .09); color: #c2410c; border-color: rgba(194, 65, 12, .2); }
.ev-td { display: block; font-size: 0.88rem; line-height: 1.65; color: rgba(255, 255, 255, .82); }
.ev-tab.is-active .ev-td { color: #475569; }

.ev-panel { display: none; }
.ev-panel.is-active { display: block; }

/* The three datasets. Row and config counts are read off the Hub, so they are the shape of
   the corpus on disk rather than the evaluation task counts quoted elsewhere. */
.ev-ds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 0 0 0.7rem;
}
.ev-dcard {
  display: block;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 14px 15px;
  text-decoration: none;
  transition: border-color .12s, transform .12s;
}
.ev-dcard:hover { border-color: var(--accent); transform: translateY(-1px); }
.ev-dax { display: block; font-size: 0.95rem; font-weight: 750; color: #1f2a44; margin: 0 0 6px; }
.ev-dcard code {
  display: block;
  font-size: 0.78rem;
  color: #3a3f73;
  background: #eef1fb;
  border-radius: 5px;
  padding: 3px 7px;
  margin: 0 0 7px;
  overflow-wrap: anywhere;
}
.ev-dn { display: block; font-size: 11.5px; font-weight: 700; color: #94a3b8; }
.ev-hub { text-align: center; }

.ev-soon {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  margin: 1.6rem 0 0;
  padding: 18px 20px;
  background: linear-gradient(135deg, #fffaf5, #fff4e9);
  border: 1px solid #f3d3ae;
  border-radius: 14px;
}
.ev-badge {
  flex: 0 0 auto;
  margin-top: 2px;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(194, 65, 12, .09);
  color: #c2410c;
  border: 1px solid rgba(194, 65, 12, .2);
}
.ev-soon-tx { flex: 1 1 auto; min-width: 0; }
.ev-soon h3 { margin: 0 0 5px; font-size: 1.05rem; font-weight: 750; color: #1f2a44; }
.ev-soon p { margin: 0; font-size: 0.88rem; line-height: 1.72; color: #475569; }
.ev-soon code {
  font-size: 0.84em;
  background: #fdeede;
  border-radius: 4px;
  padding: 1px 5px;
  color: #9a3412;
}
.ev-jump {
  margin: 11px 0 0;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  background: #fff;
  border: 1px solid #d5dbf5;
  border-radius: 999px;
  padding: 6px 13px;
  cursor: pointer;
}
.ev-jump:hover { background: #f2f4ff; border-color: var(--accent); }

@media (max-width: 920px) {
  .sv-flow { grid-template-columns: 1fr 1fr; }
  .sv-flow li:nth-child(2)::after { display: none; }
  .sv-cards, .sv-knobs, .sv-tuts { grid-template-columns: 1fr; }
  .sv-cta { flex-direction: column; align-items: stretch; text-align: center; }
  .ev-seg, .ev-ds { grid-template-columns: 1fr; }
  /* Stacked, the caret would point at the other option rather than at the panel. */
  .ev-tab.is-active::after { display: none; }
  .ev-soon { flex-direction: column; }
}

@media (max-width: 920px) {
  .xfer { grid-template-columns: 1fr; }
  .bar-row { grid-template-columns: 1fr 48px; }
  .bar-row .name { grid-column: 1 / -1; }
  .fw-stages { grid-template-columns: 1fr; }
  .fw-sub { transform: rotate(90deg); }
  .cs-split { grid-template-columns: 1fr; }
  .cs-listwrap { position: static; }
  .cs-list { max-height: 300px; }
}
@media (max-width: 768px) {
  .author-card { width: 46%; }
  .fab-hub-nav { bottom: 1.2rem; right: 1.2rem; }
  .fab-hub-trigger { padding: 8px 16px 8px 12px; font-size: 0.82rem; }
  .fab-hub-dropdown, .hub-nav-dropdown { min-width: 240px; }
  .cs-dtitle { font-size: 1.14rem; }
  .cs-kv { grid-template-columns: 1fr; gap: 3px; }
  .cs-k { margin-top: 8px; }
  .cs-scoreboard { flex-direction: row; flex-wrap: wrap; gap: 4px 10px; }
}

/* ---------- Construction: bring your own seed ---------- */

/* The two guarantees are properties of the arithmetic rather than one more pair of feature
   cards, so they take the palette's green -- the one the landing already uses for a thing
   that holds -- and not the indigo/amber of the service cards, which on this page have come
   to mean "one seed" and "the other seed". */
.bc-inv .sv-card { border-color: #a7f3d0; background: #f7fefb; }
.bc-inv .sv-card h3 { margin-top: 9px; }
.bc-inv .sv-tag {
  background: #ecfdf5;
  color: #047857;
  border: 1px solid rgba(4, 120, 87, 0.22);
}

/* The construction view is read while typing rather than while scrolling, so its file-labelled
   blocks get a little more air above them than the narrative ones on the other views. */
.pv-view[data-pv-view="construction"] .sv-codewrap { margin-top: 14px; }