const { useState, useEffect } = React;

const NAV_DATASETS = [
  { label: "LMCA", href: "lmca.html",        name: "Reward Model",    desc: "Rating model critiques of conceptual arguments against expert judgment." },
  { label: "ACCoRD", href: "accord.html", name: "ACCoRD",     desc: "Whether a model's positions stay stable across reframings of a question." },
  { label: "DTBench", href: "dtbench.html", name: "Decision Theory", desc: "Original decision-theoretic scenarios scored on reasoning structure." }
];

const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{
  "bodyFont": "sourceSerif",
  "headerStyle": "minimal",
  "tealShade": "balanced",
  "bgShade": "warm",
  "heroSize": 48,
  "ledeSize": 20,
  "heroGap": 4,
  "barColor": "byOrg",
  "barHeight": 24,
  "paleSubBars": true,
  "thickSubBars": true,
  "ciStyle": "caps",
  "rowLines": true,
  "headerHeight": 60,
  "density": 90,
  "uiText": "large",
  "brandSide": "left",
  "brandOrder": "crcFirst",
  "brandText": "none",
  "dsNavStyle": "dropdown",
  "dsLabel": "above",
  "dsSubAlign": "center",
  "dsEyebrow": true,
  "arxivStyle": "underline",
  "pageRules": false,
  "symMargins": true,
  "snugMargins": false,
  "linkPos": "top",
  "lbFocus": false,
  "lbMargins": "wide",
  "lbWideTable": false,
  "lbDdShadow": true,
  "lbFilterLine": false,
  "navFit": "roomy",
  "dsNavBg": false,
  "dsMenu": "flat",
  "brandMatch": "logo",
  "hideLbEyebrow": true
}/*EDITMODE-END*/;

const ORG_COLORS = {
  "OpenAI":          "#23A27D",        // OpenAI brand green
  "Anthropic":       "#cc785c",        // muted Claude orange
  "Google DeepMind": "#F4B400",        // Google yellow
  "Mistral":         "#c8961c",        // warm deep gold: the lighter golds
  "SpaceXAI":        "#1a1a1a",        // black
  "Meta":            "#3b5bb5",        // brighter indigo blue
  "Alibaba":         "#8b5cb8",        // muted purple
  "DeepSeek":        "#899DFF",        // DeepSeek blue, lightened
  "Xiaomi":          "#f26419",        // bright orange (Xiaomi)
  "Moonshot AI":     "#5b6570",        // slate grey (Kimi brand is black, taken by SpaceXAI)
  "MiniMax":         "#f03b5d",        // pink/coral (MiniMax brand gradient)
  "Z.ai":           "#d16aa0",         // pink
  "Cohere":          "#bd6f92",        // mauve
  "Reka":            "#7fae5a",        // sage green
  "NVIDIA":          "#76b900",        // NVIDIA brand green
  "Thinking Machines": "#9aa4ad",      // light grey (lighter than Moonshot)
  "Nous Research":   "#9c7a54",        // taupe
  "01.AI":           "#2aa198",        // teal
  "HuggingFace":     "#eab308"         // yellow-gold
};

// Vivid org palette — same hues, a little more saturated than the muted set (toned down)
const ORG_COLORS_VIVID = {
  "OpenAI":          "#23A27D",        // OpenAI brand green
  "Anthropic":       "#d4734f",        // warm Claude orange
  "Google DeepMind": "#F4B400",        // Google yellow
  "Mistral":         "#c8961c",        // sat too near Google's yellow
  "SpaceXAI":        "#2c2c30",        // soft black
  "Meta":            "#4361bc",        // muted royal blue
  "Alibaba":         "#9162c4",        // soft purple
  "DeepSeek":        "#899DFF",        // DeepSeek blue, lightened
  "Xiaomi":          "#e87f3e",        // soft orange
  "Moonshot AI":     "#5b6570",        // slate grey (Kimi brand is black, taken by SpaceXAI)
  "MiniMax":         "#f03b5d",        // pink/coral (MiniMax brand gradient)
  "Z.ai":           "#d76aa6",
  "Cohere":          "#c47a9c",        // mauve
  "Reka":            "#88b863",        // sage green
  "NVIDIA":          "#83c500",        // NVIDIA brand green
  "Thinking Machines": "#9aa4ad",      // light grey (lighter than Moonshot)
  "Nous Research":   "#a6845c",        // taupe
  "01.AI":           "#2fb0a4",        // teal
  "HuggingFace":     "#f0bc1a"         // yellow-gold
};

// On pure white the palest fills (OpenAI's light teal, Mistral's amber) lose presence
// against the near-white bar track, so on the white background they get slightly deeper,
// crisper counterparts. Warm/light backgrounds keep the original muted palette.
const ORG_COLORS_WHITE       = { "OpenAI": "#23A27D", "Mistral": "#c8961c" };
const ORG_COLORS_VIVID_WHITE = { "OpenAI": "#23A27D", "Mistral": "#c8961c" };
function orgColorsForBg(barColor, bgShade) {
  const base = barColor === "byOrgVivid" ? ORG_COLORS_VIVID : ORG_COLORS;
  if (bgShade !== "white") return base;
  return { ...base, ...(barColor === "byOrgVivid" ? ORG_COLORS_VIVID_WHITE : ORG_COLORS_WHITE) };
}

const TEAL_SHADES = {
  medium:      "#4a6e6e",  // current — balanced, low saturation
  balancedLt:  "#5a8885",  // lighter & slightly more saturated
  balancedMid: "#498581",  // between balancedLt and balanced
  balanced:    "#367370"   // deeper balance
};
// Cooler, slightly cleaner teals for the white background — the warm/khaki teal
// looks dusty on pure white, so each shade gets a bluer counterpart.
const TEAL_SHADES_COOL = {
  medium:      "#356f76",
  balancedLt:  "#4a8b90",
  balancedMid: "#3a878d",
  balanced:    "#297479"
};
function tealForBg(shade, bgShade) {
  if (bgShade === "white") return TEAL_SHADES_COOL[shade] || TEAL_SHADES_COOL.medium;
  return TEAL_SHADES[shade] || TEAL_SHADES.medium;
}

// Each background shade carries a full ramp so the whole palette retunes together.
// Warm/Light keep the warm-biased inks; White switches to a cooler, neutral ramp so
// it reads crisp instead of dingy (warm grays look muddy on pure white).
const WARM_RAMP = {
  ink: "#1c1a17", ink2: "#3a3730", ink3: "#6b665c", inkDim: "#9a948a",
  rule: "#d9d2c4", ruleStrong: "#b8b0a0"
};
const COOL_RAMP = {
  ink: "#17191c", ink2: "#383c42", ink3: "#5e646c", inkDim: "#969ba2",
  rule: "#e4e5e7", ruleStrong: "#c5c8cd"
};
const BG_SHADES = {
  warm:    { bg: "#f5f1ea", bg2: "#efeadf", ...WARM_RAMP },  // original
  soft:    { bg: "#f7f4ee", bg2: "#f1ece1", ...WARM_RAMP },  // between warm and light (default)
  light:   { bg: "#f9f6f1", bg2: "#f2ede3", ...WARM_RAMP },  // lighter
  white:   { bg: "#ffffff", bg2: "#f4f5f6", ...COOL_RAMP }   // white + neutral ramp
};

// Body faces (paragraphs, lede, table text)
const BODY_FONTS = {
  sourceSerif: { label: "Source Serif", family: '"Source Serif 4", Georgia, serif' },
  plexSerif:   { label: "Plex Serif",   family: '"IBM Plex Serif", Georgia, serif' },
  inter:       { label: "Inter",        family: '"Inter", "Helvetica Neue", sans-serif' }
};

const DISPLAY_GARAMOND = {
  family: '"EB Garamond", Georgia, serif',
  weight: 500,
  tracking: "-0.01em"
};

function App() {
  const [tweaks] = React.useState(TWEAK_DEFAULTS);

  const teal = tealForBg(tweaks.tealShade, tweaks.bgShade);
  const body = BODY_FONTS[tweaks.bodyFont] || BODY_FONTS.sourceSerif;
  const bg = BG_SHADES[tweaks.bgShade] || BG_SHADES.warm;

  useEffect(() => {
    const root = document.documentElement;
    const REDWOOD_GREEN_BY_BG = { warm: "#2a6750", light: "#2a6750", white: "#206a55" };
    const REDWOOD_GREEN = REDWOOD_GREEN_BY_BG[tweaks.bgShade] || REDWOOD_GREEN_BY_BG.warm;
    // Logo green: original deep green on warm/light; on white, nudged toward the cooler
    // white highlight but kept darker and close to the original.
    const REDWOOD_LOGO_BY_BG = { warm: "#1d4b38", light: "#1d4b38", white: "#19513f" };
    const redwoodLogo = REDWOOD_LOGO_BY_BG[tweaks.bgShade] || REDWOOD_LOGO_BY_BG.warm;
    const isGreen = tweaks.brandMatch === "highlight";
    const highlight = isGreen ? REDWOOD_GREEN : teal;
    root.style.setProperty("--teal", highlight);
    root.style.setProperty("--redwood-ink", isGreen ? redwoodLogo : highlight);
    root.style.setProperty("--bg", bg.bg);
    root.style.setProperty("--bg-2", bg.bg2);
    root.style.setProperty("--ink", bg.ink);
    root.style.setProperty("--ink-2", bg.ink2);
    root.style.setProperty("--ink-3", bg.ink3);
    root.style.setProperty("--ink-dim", bg.inkDim);
    root.style.setProperty("--rule", bg.rule);
    root.style.setProperty("--rule-strong", bg.ruleStrong);
    root.style.setProperty("--font-display", DISPLAY_GARAMOND.family);
    root.style.setProperty("--font-body", body.family);
    root.style.setProperty("--display-weight", DISPLAY_GARAMOND.weight);
    root.style.setProperty("--display-tracking", DISPLAY_GARAMOND.tracking);
    root.style.setProperty("--hero-size", (tweaks.heroSize || 48) + "px");
    root.style.setProperty("--hero-lede-size", (tweaks.ledeSize || 20) + "px");
    root.style.setProperty("--hero-gap", (tweaks.heroGap ?? 4) + "px");
    root.style.setProperty("--bar-height", (tweaks.barHeight ?? 16) + "px");
    if (tweaks.rowLines === false) root.style.setProperty("--row-rule", "transparent");
    else root.style.removeProperty("--row-rule");
    root.style.setProperty("--header-h", (tweaks.headerHeight ?? 68) + "px");
    root.style.setProperty("--subbar-opacity", tweaks.paleSubBars === false ? "1" : "0.4");
    root.style.setProperty("--subbar-trim", tweaks.thickSubBars ? "0px" : "6px");
    root.style.setProperty("--subbar-num-size", tweaks.thickSubBars ? "18px" : "15px");
    root.style.zoom = String((tweaks.density ?? 92) / 100);
    // Mirror the zoom into a custom property so hairline rules (the CI caps)
    // can divide it out and land on whole device pixels — otherwise the two
    // caps pixel-snap independently and one renders a device pixel wider.
    root.style.setProperty("--zoom", String((tweaks.density ?? 92) / 100));
    try { localStorage.setItem("crc:density", String(tweaks.density ?? 90)); } catch (e) {}
    root.style.setProperty("--brand-flow", tweaks.brandSide === "right" ? "row-reverse" : "row");
    root.style.setProperty("--brand-order", tweaks.brandOrder === "redwoodFirst" ? "row-reverse" : "row");
    try { localStorage.setItem("crc:dsEyebrow", tweaks.dsEyebrow === false ? "off" : "on"); } catch (e) {}
    try { localStorage.setItem("crc:arxivStyle", tweaks.arxivStyle || "underline"); } catch (e) {}
    try { localStorage.setItem("crc:pageRules", tweaks.pageRules === true ? "on" : "off"); } catch (e) {}
    try { localStorage.setItem("crc:contentAlign", tweaks.symMargins === false ? "wide" : "center"); } catch (e) {}
    try { localStorage.setItem("crc:contentSnug", tweaks.snugMargins ? "on" : "off"); } catch (e) {}
    try { localStorage.setItem("crc:linkPos", tweaks.linkPos || "top"); } catch (e) {}
    try { localStorage.setItem("crc:bgShade", tweaks.bgShade || "warm"); } catch (e) {}
    try { localStorage.setItem("crc:teal", tweaks.tealShade || "medium"); } catch (e) {}
    try { localStorage.setItem("crc:brandText", tweaks.brandText || "none"); } catch (e) {}
    try { localStorage.setItem("crc:dsNavStyle", tweaks.dsNavStyle || "plain"); } catch (e) {}
    try { localStorage.setItem("crc:dsLabel", tweaks.dsLabel || "above"); } catch (e) {}
    try { localStorage.setItem("crc:dsSubAlign", tweaks.dsSubAlign || "center"); } catch (e) {}
    try { localStorage.setItem("crc:bodyFont", tweaks.bodyFont || "sourceSerif"); } catch (e) {}
    try { localStorage.setItem("crc:headerStyle", tweaks.headerStyle || "minimal"); } catch (e) {}
    try { localStorage.setItem("crc:brandSide", tweaks.brandSide || "left"); } catch (e) {}
    try { localStorage.setItem("crc:brandOrder", tweaks.brandOrder || "crcFirst"); } catch (e) {}
    root.dataset.uiText = tweaks.uiText === "regular" ? "regular" : "large";
    try { localStorage.setItem("crc:uiText", tweaks.uiText === "regular" ? "regular" : "large"); } catch (e) {}
    root.dataset.content = "wide";
    root.dataset.lbFocus = tweaks.lbFocus ? "on" : "off";
    root.dataset.lbMargins = tweaks.lbMargins || "tight";
    root.dataset.lbTable = tweaks.lbWideTable ? "wide" : "aligned";
    root.dataset.lbDdShadow = tweaks.lbDdShadow === false ? "off" : "on";
    root.dataset.lbFilterLine = tweaks.lbFilterLine === false ? "off" : "on";
    root.dataset.dsNav = tweaks.dsNavStyle || "plain";
    root.dataset.navFit = tweaks.navFit || "roomy";
    root.dataset.dsNavBg = tweaks.dsNavBg ? "on" : "off";
    root.dataset.dsMenu = tweaks.dsMenu || "flat";
    root.dataset.lbEyebrow = tweaks.hideLbEyebrow ? "off" : "on";
  }, [teal, body, bg, tweaks.heroSize, tweaks.ledeSize, tweaks.heroGap, tweaks.barHeight, tweaks.rowLines, tweaks.headerHeight, tweaks.density, tweaks.brandSide, tweaks.brandOrder, tweaks.paleSubBars, tweaks.thickSubBars, tweaks.dsEyebrow, tweaks.arxivStyle, tweaks.pageRules, tweaks.symMargins, tweaks.snugMargins, tweaks.linkPos, tweaks.uiText, tweaks.brandText, tweaks.dsNavStyle, tweaks.dsLabel, tweaks.dsSubAlign, tweaks.headerStyle, tweaks.lbFocus, tweaks.brandMatch, tweaks.hideLbEyebrow, tweaks.lbMargins, tweaks.lbWideTable, tweaks.lbDdShadow, tweaks.navFit, tweaks.dsNavBg, tweaks.dsMenu, tweaks.lbFilterLine]);

  // CI marker hairlines, sized to a whole number of DEVICE pixels.
  // The left cap is anchored left:0 and the right cap right:0, so when their
  // used width is fractional the two round independently and one paints a pixel
  // wider than the other. Any integer device-pixel width snaps identically at
  // both ends regardless of where the marker falls. CSS cannot read
  // devicePixelRatio, hence doing it here; resize is what fires on browser zoom
  // and on a move between monitors of different density.
  React.useEffect(() => {
    const root = document.documentElement;
    const apply = () => {
      const dpr = window.devicePixelRatio || 1;
      const z = (tweaks.density ?? 92) / 100;
      const devPx = (cssPx) => Math.max(1, Math.round(cssPx * dpr)) / dpr / z;
      root.style.setProperty("--cap-w", devPx(2) + "px");
      root.style.setProperty("--cap-w-thin", devPx(1.5) + "px");
    };
    apply();
    window.addEventListener("resize", apply);
    return () => window.removeEventListener("resize", apply);
  }, [tweaks.density]);

  return (
    <div className="site" data-header={tweaks.headerStyle} data-ds-label={tweaks.dsLabel || "above"}>
      <Header style={tweaks.headerStyle} brandText={tweaks.brandText} dsNavStyle={tweaks.dsNavStyle || "plain"} dsSubAlign={tweaks.dsSubAlign || "center"} dsLabel={tweaks.dsLabel || "above"} />
      <Hero />
      <window.Leaderboard
        layout="table"
        teal={teal}
        barColor={tweaks.barColor}
        orgColors={orgColorsForBg(tweaks.barColor, tweaks.bgShade)}
        ciStyle={tweaks.ciStyle || "caps"}
      />
      <Datasets />
      <Footer />
    </div>
  );
}

function Header({ style, brandText, dsNavStyle = "plain", dsSubAlign = "center", dsLabel = "inline" }) {
  const [menuOpen, setMenuOpen] = React.useState(false);
  const [ddOpen, setDdOpen] = React.useState(false);
  const ddRef = React.useRef(null);
  React.useEffect(() => {
    document.documentElement.classList.toggle("nav-locked", menuOpen);
    const onResize = () => { if (window.innerWidth > 680) setMenuOpen(false); };
    window.addEventListener("resize", onResize);
    return () => window.removeEventListener("resize", onResize);
  }, [menuOpen]);
  React.useEffect(() => {
    if (!ddOpen) return;
    const onDown = (e) => { if (ddRef.current && !ddRef.current.contains(e.target)) setDdOpen(false); };
    const onKey = (e) => { if (e.key === "Escape") setDdOpen(false); };
    document.addEventListener("mousedown", onDown);
    document.addEventListener("keydown", onKey);
    return () => { document.removeEventListener("mousedown", onDown); document.removeEventListener("keydown", onKey); };
  }, [ddOpen]);
  const brandLabel = brandText === "full" ? "Conceptual reasoning capabilities team" : "CRC";
  const BrandLockup = ({ accent }) => (
    <span className={"brand-lockup" + (brandText === "none" ? " brand-lockup--logo-only" : "")}>
      {brandText !== "none" && (accent ? (
        <a href="index.html" className={"wordmark wordmark--accent" + (brandText === "full" ? " wordmark--full" : "")}>
          <span className="wm-dot" />
          <span>{brandLabel}</span>
        </a>
      ) : (
        <a href="index.html" className={"wordmark" + (brandText === "full" ? " wordmark--full" : "")}>{brandLabel}</a>
      ))}
      {brandText !== "none" && <span className="brand-divider" />}
      <a href="index.html" aria-label="Redwood Research"><span className="redwood-logo" role="img" aria-label="Redwood Research" /></a>
    </span>
  );

  const links = [
    { label: "Leaderboard", href: "#leaderboard" },
    { label: "Methodology", href: "methodology.html" },
    { label: "Argumentation", href: "lmca.html", text: "Reward Model" },
    { label: "ACCoRD", href: "accord.html", text: "ACCoRD" },
    { label: "Decision theory", href: "dtbench.html", text: "Decision Theory" },
    { label: "About",       href: "about.html" }
  ];

  const NavItems = ({ current = "Leaderboard" }) => {
    const stacked = dsNavStyle === "sublabel";
    const isDropdown = dsNavStyle === "dropdown";
    const DS_DROPDOWN = [
      { name: "Argument evaluation (LMCA)", href: "lmca.html", key: "Argumentation" },
      { name: "Consistency (ACCoRD)", href: "accord.html", key: "ACCoRD" },
      { name: "Decision theory (DTBench)", href: "dtbench.html", key: "Decision theory" }
    ];
    const dsActive = DS_DROPDOWN.some((d) => d.key === current);
    const dsLinks = NAV_DATASETS.map((d) => (
      <a
        key={d.label}
        href={d.href}
        className={
          "nav-link nav-ds-link" +
          (stacked ? " nav-link--stack" : "") +
          (d.label === current ? " is-active" : "")
        }>
        {dsNavStyle === "dot" && <span className="nav-ds-dot" aria-hidden="true"></span>}
        <span className="nav-ds-label">{d.label}</span>
        {stacked && <span className="nav-link-sub">dataset</span>}
      </a>
    ));
    return (
      <React.Fragment>
        <button
          className="nav-toggle"
          aria-label="Open menu"
          aria-expanded={menuOpen}
          onClick={() => setMenuOpen(true)}>
          <span></span><span></span><span></span>
        </button>
        <div
          className={"nav-backdrop" + (menuOpen ? " is-open" : "")}
          onClick={() => setMenuOpen(false)}
          aria-hidden="true"></div>
      <nav
        className={"nav" + (menuOpen ? " nav--open" : "") + (stacked && dsSubAlign === "top" ? " nav--ds-baseline" : "")}
        onClick={(e) => { if (e.target.closest("a")) setMenuOpen(false); }}>
        <button className="nav-drawer-close" aria-label="Close menu" onClick={() => setMenuOpen(false)}>×</button>
        <a href="#leaderboard" className={"nav-link" + (current === "Leaderboard" ? " is-active" : "")}>Leaderboard</a>
        <a href="methodology.html" className={"nav-link" + (current === "Methodology" ? " is-active" : "")}>Methodology</a>
        <a href="about.html" className={"nav-link" + (current === "About" ? " is-active" : "")}>About</a>
        {isDropdown ? (
          <div className={"nav-dd" + (ddOpen ? " is-open" : "") + (dsActive ? " is-active" : "")} ref={ddRef}>
            <button className="nav-dd-trigger" aria-expanded={ddOpen} aria-haspopup="true"
              onClick={(e) => { e.preventDefault(); setDdOpen((o) => !o); }}>
              Datasets <span className="nav-dd-caret" aria-hidden="true">▾</span>
            </button>
            <div className="nav-dd-menu nav-dd-menu--compact">
              {DS_DROPDOWN.map((d) => (
                <a key={d.href} href={d.href} className={"nav-dd-item" + (d.key === current ? " is-active" : "")}>
                  <span className="nav-dd-name">{d.name}</span>
                </a>
              ))}
            </div>
          </div>
        ) : (
          <React.Fragment>
            {dsLabel === "inline" && <span className="nav-ds-kicker nav-ds-kicker--inline" aria-hidden="true">Datasets</span>}
            {(dsLabel === "above" || dsLabel === "below") ? (
              <span className={"nav-ds-group nav-ds-group--" + dsNavStyle + " nav-ds-group--labelled nav-ds-group--label-" + dsLabel}>
                <span className="nav-ds-kicker nav-ds-kicker--stacked" aria-hidden="true">Datasets</span>
                {dsLinks}
              </span>
            ) : (
              <span className={"nav-ds-group nav-ds-group--" + dsNavStyle}>
                {dsLinks}
              </span>
            )}
          </React.Fragment>
        )}
      </nav>
      </React.Fragment>
    );
  };

  if (style === "tealbar") {
    return (
      <header className="site-header header--tealbar">
        <div className="tealbar">
          <div className="container tealbar-inner mono-small">
            <span>Conceptual Reasoning Index · A research project</span>
            <span className="tealbar-cta">Latest: DTBench v2 released →</span>
          </div>
        </div>
        <div className="container header-inner">
          <BrandLockup />
          <NavItems />
        </div>
      </header>
    );
  }

  if (style === "accent") {
    return (
      <header className="site-header header--accent">
        <div className="container header-inner">
          <BrandLockup accent />
          <NavItems />
        </div>
      </header>
    );
  }

  if (style === "inverted") {
    return (
      <header className="site-header header--inverted">
        <div className="container header-inner">
          <BrandLockup />
          <NavItems />
        </div>
      </header>
    );
  }

  // minimal (default)
  return (
    <header className="site-header">
      <div className="container header-inner">
        <BrandLockup />
        <NavItems />
      </div>
    </header>
  );
}

function Hero() {
  return (
    <section className="hero">
      <div className="container">
        <h1 className="hero-title">
          Conceptual Reasoning Index
        </h1>
        <p className="hero-lede">
          Navigating the future requires hard-to-verify reasoning about important issues like AI alignment and collective action problems in the face of transformative AI. The Conceptual Reasoning Index (CRI) ranks models' abilities to reason about such topics.
        </p>
      </div>
    </section>
  );
}

function Datasets() {
  const items = [
    {
      code: "LMCA",
      title: "Judging argument quality",
      desc: "We ask models to rate the strength of conceptual arguments against stated positions and see how well their ratings correlate with human expert ratings. Determining how compelling different arguments are is a core conceptual reasoning skill and a prerequisite for making good arguments.",
      stat: `${(window.LMCA_STATS.ratedCritiques || 0).toLocaleString()} rated critiques`,
      href: "lmca.html"
    },
    {
      code: "ACCoRD",
      title: "Having coherent beliefs",
      desc: (
        <>
          We ask models for the probability of different statements being true. We then check
          whether these probabilistic beliefs are coherent. For instance, do models' beliefs in
          conceptual propositions A and B satisfy{" "}
          <span style={{ fontStyle: "italic", whiteSpace: "nowrap", letterSpacing: "0.01em" }}>
            P(A&#8201;|&#8201;B)&#8202;·&#8202;P(B)&#8198;≤&#8198;P(A)
          </span>
          ? This tells us about the quality of a model's conceptual reasoning. Models
          that reason only shallowly are likely to have beliefs that are vulnerable to framing
          effects or which swing wildly depending on which considerations are mentioned.
        </>
      ),
      stat: "567 constraints",
      href: "accord.html"
    },
    {
      code: "DTBench",
      title: "Reasoning about near copies",
      desc: "We measure how models reason about Newcomb-like decision-theoretic situations, such as when interacting with (near) copies of themselves. The vast majority of questions are original and are written and graded by Caspar Oesterheld, a published decision theory author. Answers are multiple-choice, and every answer was carefully double-checked by a second domain expert.",
      stat: "407 questions",
      href: "dtbench.html"
    }
  ];

  return (
    <section className="datasets" data-layout="columns">
      <div className="container">
        <div className="ds-head-row">
          <h2 className="ds-heading">Our datasets.</h2>
        </div>
        <div className="ds-cols">
          {items.map((it) => (
            <a key={it.code} href={it.href} className="ds-col">
              <div className="ds-code mono-small">{it.code}</div>
              <h3 className="ds-title">{it.title}</h3>
              <p className="ds-desc">{it.desc}</p>
              <div className="ds-col-foot">
                <span className="mono-small dim">{it.stat}</span>
              </div>
            </a>
          ))}
        </div>
      </div>
    </section>
  );
}

function Footer() {
  return (
    <footer className="site-footer">
      <div className="container footer-inner">
        <div className="footer-copy mono-small dim">© 2026</div>
      </div>
    </footer>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
// Gate the first render on the CSV data (window.MODELS etc.) being loaded.
window.whenDataReady().then(() => root.render(<App />));