skills/compare-model-tradeoffs/assets/delta-racetrack.fragment.html

<div id="delta-racetrack-v1">
  <style>
    #delta-racetrack-v1 {
      width: 100%;
      color: var(--foreground);
      font-variant-numeric: tabular-nums;
    }

    #delta-racetrack-v1 .dr-stack {
      display: grid;
      gap: 1rem;
    }

    #delta-racetrack-v1 .dr-config-line {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
    }

    #delta-racetrack-v1 .dr-identity {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0.5rem;
    }

    #delta-racetrack-v1 .dr-key {
      display: inline-flex;
      align-items: center;
      gap: 0.4rem;
      color: var(--foreground);
    }

    #delta-racetrack-v1 .dr-key-square {
      width: 0.62rem;
      height: 0.62rem;
      border: 2px solid var(--viz-series-3);
      background: var(--background);
      box-sizing: border-box;
    }

    #delta-racetrack-v1 .dr-key-diamond {
      width: 0.58rem;
      height: 0.58rem;
      background: var(--viz-series-1);
      transform: rotate(45deg);
      box-shadow: 0 0 0.65rem color-mix(in srgb, var(--viz-series-1) 72%, transparent);
    }

    #delta-racetrack-v1 .dr-status {
      min-width: 0;
      color: var(--foreground);
    }

    #delta-racetrack-v1 .dr-trackfield {
      position: relative;
      display: grid;
      gap: 0;
      isolation: isolate;
    }

    #delta-racetrack-v1 .dr-trackfield::before {
      position: absolute;
      inset: 0;
      z-index: -1;
      content: "";
      pointer-events: none;
      background:
        radial-gradient(
          circle at 14% 15%,
          color-mix(in srgb, var(--viz-series-1) 11%, transparent),
          transparent 38%
        ),
        radial-gradient(
          circle at 88% 80%,
          color-mix(in srgb, var(--viz-series-3) 10%, transparent),
          transparent 42%
        );
    }

    #delta-racetrack-v1 .dr-lane {
      display: grid;
      grid-template-columns: minmax(9.5rem, 1.05fr) minmax(13rem, 2.65fr) minmax(10.5rem, 1.15fr);
      gap: 0.75rem;
      align-items: center;
      padding-block: 0.78rem;
      border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }

    #delta-racetrack-v1 .dr-lane:first-child {
      border-top: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
    }

    #delta-racetrack-v1 .dr-metric {
      min-width: 0;
    }

    #delta-racetrack-v1 .dr-metric-name {
      font-weight: 500;
    }

    #delta-racetrack-v1 .dr-rail {
      position: relative;
      min-height: 4.1rem;
      overflow: hidden;
      background:
        repeating-linear-gradient(
          to bottom,
          transparent 0,
          transparent 0.72rem,
          color-mix(in srgb, var(--border) 24%, transparent) 0.72rem,
          color-mix(in srgb, var(--border) 24%, transparent) calc(0.72rem + 1px)
        ),
        repeating-linear-gradient(
          to right,
          color-mix(in srgb, var(--border) 40%, transparent) 0,
          color-mix(in srgb, var(--border) 40%, transparent) 1px,
          transparent 1px,
          transparent 25%
        ),
        linear-gradient(
          90deg,
          color-mix(in srgb, var(--viz-series-3) 6%, var(--background)),
          color-mix(in srgb, var(--viz-series-1) 8%, var(--background))
        );
      border-block: 1px solid color-mix(in srgb, var(--viz-series-1) 28%, var(--border));
    }

    #delta-racetrack-v1 .dr-rail::before {
      position: absolute;
      top: 50%;
      right: 0;
      left: 0;
      height: 1px;
      content: "";
      background: color-mix(in srgb, var(--muted-foreground) 52%, transparent);
    }

    #delta-racetrack-v1 .dr-connector {
      position: absolute;
      top: calc(50% - 1px);
      left: var(--connector-left);
      width: var(--connector-width);
      height: 2px;
      background: linear-gradient(90deg, var(--viz-series-3), var(--viz-series-1));
      box-shadow: 0 0 0.5rem color-mix(in srgb, var(--viz-series-1) 48%, transparent);
      transition:
        left 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
        width 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #delta-racetrack-v1 .dr-baseline-marker,
    #delta-racetrack-v1 .dr-selected-marker {
      position: absolute;
      left: var(--marker-left);
      box-sizing: border-box;
      transition: left 360ms cubic-bezier(0.2, 0.8, 0.2, 1);
    }

    #delta-racetrack-v1 .dr-baseline-marker {
      top: 68%;
      width: 0.72rem;
      height: 0.72rem;
      border: 2px solid var(--viz-series-3);
      background: var(--background);
      transform: translate(-50%, -50%);
      box-shadow: 0 0 0.45rem color-mix(in srgb, var(--viz-series-3) 48%, transparent);
    }

    #delta-racetrack-v1 .dr-selected-marker {
      top: 31%;
      width: 0.7rem;
      height: 0.7rem;
      background: var(--viz-series-1);
      transform: translate(-50%, -50%) rotate(45deg);
      box-shadow:
        0 0 0 2px color-mix(in srgb, var(--background) 82%, transparent),
        0 0 0.72rem color-mix(in srgb, var(--viz-series-1) 78%, transparent);
    }

    #delta-racetrack-v1 .dr-scale-min,
    #delta-racetrack-v1 .dr-scale-max {
      position: absolute;
      bottom: 0.1rem;
      color: var(--muted-foreground);
    }

    #delta-racetrack-v1 .dr-scale-min {
      left: 0.28rem;
    }

    #delta-racetrack-v1 .dr-scale-max {
      right: 0.28rem;
      text-align: right;
    }

    #delta-racetrack-v1 .dr-unknown {
      position: absolute;
      top: 20%;
      right: 8%;
      left: 8%;
      display: none;
      align-items: center;
      justify-content: center;
      min-height: 2rem;
      color: var(--muted-foreground);
      text-align: center;
      border-block: 1px dashed var(--muted-foreground);
      background: repeating-linear-gradient(
        135deg,
        color-mix(in srgb, var(--muted) 64%, transparent) 0,
        color-mix(in srgb, var(--muted) 64%, transparent) 0.45rem,
        transparent 0.45rem,
        transparent 0.9rem
      );
    }

    #delta-racetrack-v1 .dr-lane.is-unknown .dr-selected-marker,
    #delta-racetrack-v1 .dr-lane.is-unknown .dr-connector {
      display: none;
    }

    #delta-racetrack-v1 .dr-lane.is-unknown .dr-unknown {
      display: flex;
    }

    #delta-racetrack-v1 .dr-readout {
      display: grid;
      gap: 0.25rem;
      min-width: 0;
    }

    #delta-racetrack-v1 .dr-readout-row {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 0.5rem;
    }

    #delta-racetrack-v1 .dr-readout-label {
      white-space: nowrap;
    }

    #delta-racetrack-v1 .dr-baseline-text {
      color: var(--viz-series-3);
    }

    #delta-racetrack-v1 .dr-selected-text {
      color: var(--viz-series-1);
    }

    #delta-racetrack-v1 .dr-readout-value {
      color: var(--foreground);
      text-align: right;
    }

    #delta-racetrack-v1 .dr-delta {
      color: var(--muted-foreground);
      text-align: right;
    }

    #delta-racetrack-v1 .dr-sources {
      display: flex;
      flex-wrap: wrap;
      gap: 0.4rem 0.75rem;
      align-items: center;
    }

    @media (max-width: 610px) {
      #delta-racetrack-v1 .dr-lane {
        grid-template-columns: minmax(0, 1fr) minmax(8.5rem, auto);
        gap: 0.45rem 0.75rem;
      }

      #delta-racetrack-v1 .dr-rail {
        grid-column: 1 / -1;
        grid-row: 2;
      }

      #delta-racetrack-v1 .dr-readout {
        grid-column: 2;
        grid-row: 1;
      }
    }

    @media (max-width: 390px) {
      #delta-racetrack-v1 .dr-config-line {
        align-items: flex-start;
      }

      #delta-racetrack-v1 .dr-lane {
        grid-template-columns: 1fr;
      }

      #delta-racetrack-v1 .dr-metric,
      #delta-racetrack-v1 .dr-rail,
      #delta-racetrack-v1 .dr-readout {
        grid-column: 1;
      }

      #delta-racetrack-v1 .dr-metric {
        grid-row: 1;
      }

      #delta-racetrack-v1 .dr-readout {
        grid-row: 2;
      }

      #delta-racetrack-v1 .dr-rail {
        grid-row: 3;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      #delta-racetrack-v1 .dr-connector,
      #delta-racetrack-v1 .dr-baseline-marker,
      #delta-racetrack-v1 .dr-selected-marker {
        transition: none;
      }
    }
  </style>

  <div class="dr-stack">
    <div class="viz-controls" aria-label="Selected configuration">
      <label class="form-label" for="dr-model">
        Model
        <select class="form-select" id="dr-model">
          <option value="gpt-5.6-sol">GPT-5.6 Sol</option>
          <option value="gpt-5.6-terra" selected>GPT-5.6 Terra</option>
          <option value="gpt-5.6-luna">GPT-5.6 Luna</option>
          <option value="gpt-5.5">GPT-5.5</option>
          <option value="gpt-5.4">GPT-5.4</option>
          <option value="gpt-5.4-mini">GPT-5.4 Mini</option>
          <option value="gpt-5.3-codex-spark">GPT-5.3 Codex Spark</option>
        </select>
      </label>

      <label class="form-label" for="dr-effort">
        Reasoning effort
        <select class="form-select" id="dr-effort">
          <option value="low">Low</option>
          <option value="medium">Medium</option>
          <option value="high" selected>High</option>
          <option value="xhigh">Extra high</option>
          <option value="max">Max</option>
        </select>
      </label>

      <label class="form-label" for="dr-service">
        Service
        <select class="form-select" id="dr-service">
          <option value="standard">Standard</option>
          <option value="fast" selected>Fast</option>
        </select>
      </label>
    </div>

    <div class="dr-config-line">
      <div class="dr-identity" aria-label="Track marker legend">
        <span class="dr-key text-small">
          <span class="dr-key-square" aria-hidden="true"></span>
          Baseline · Sol / Medium / Standard
        </span>
        <span class="dr-key text-small" id="dr-selected-badge">
          <span class="dr-key-diamond" aria-hidden="true"></span>
          Selected · Terra / High / Fast
        </span>
      </div>
      <div class="text-small text-muted">Each lane keeps its native unit.</div>
    </div>

    <div class="dr-status text-small" id="dr-status" aria-live="polite">
      Terra / High / Fast: coding proxy −2.6 points; GeneBench −6.3 points at +7.8k average tokens; output rate +187.5 credits/M. No task-level winner inferred.
    </div>

    <div class="dr-trackfield" aria-label="Selected configuration versus fixed baseline">
      <div class="dr-lane" data-lane="aa">
        <div class="dr-metric">
          <div class="dr-metric-name">AA Coding Agent Index</div>
          <div class="text-small text-muted">Official model proxy · not effort-specific</div>
        </div>
        <div class="dr-rail" role="img" aria-label="AA Coding Agent Index. Baseline 80. Selected 77.4.">
          <span class="dr-connector" aria-hidden="true" style="--connector-left: 75.21%; --connector-width: 2.39%;"></span>
          <span class="dr-baseline-marker" aria-hidden="true" style="--marker-left: 77.60%;"></span>
          <span class="dr-selected-marker" aria-hidden="true" style="--marker-left: 75.21%;"></span>
          <span class="dr-unknown text-small">No comparable OpenAI-published value</span>
          <span class="dr-scale-min text-small">0</span>
          <span class="dr-scale-max text-small">100 index</span>
        </div>
        <div class="dr-readout">
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-baseline-text">■ Baseline</span>
            <span class="dr-readout-value" data-role="baseline-value">80</span>
          </div>
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-selected-text">◆ Selected</span>
            <span class="dr-readout-value" data-role="selected-value">77.4</span>
          </div>
          <div class="dr-delta text-small" data-role="delta">Δ −2.6 points</div>
        </div>
      </div>

      <div class="dr-lane" data-lane="gene-score">
        <div class="dr-metric">
          <div class="dr-metric-name">GeneBench-Pro score</div>
          <div class="text-small text-muted">129-problem biology eval · selected effort</div>
        </div>
        <div class="dr-rail" role="img" aria-label="GeneBench-Pro score. Baseline 22.5 percent. Selected 16.2 percent.">
          <span class="dr-connector" aria-hidden="true" style="--connector-left: 46.58%; --connector-width: 16.56%;"></span>
          <span class="dr-baseline-marker" aria-hidden="true" style="--marker-left: 63.14%;"></span>
          <span class="dr-selected-marker" aria-hidden="true" style="--marker-left: 46.58%;"></span>
          <span class="dr-unknown text-small">No comparable model-by-effort value in this view</span>
          <span class="dr-scale-min text-small">0%</span>
          <span class="dr-scale-max text-small">35%</span>
        </div>
        <div class="dr-readout">
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-baseline-text">■ Baseline</span>
            <span class="dr-readout-value" data-role="baseline-value">22.5%</span>
          </div>
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-selected-text">◆ Selected</span>
            <span class="dr-readout-value" data-role="selected-value">16.2%</span>
          </div>
          <div class="dr-delta text-small" data-role="delta">Δ −6.3 points</div>
        </div>
      </div>

      <div class="dr-lane" data-lane="gene-tokens">
        <div class="dr-metric">
          <div class="dr-metric-name">GeneBench average tokens</div>
          <div class="text-small text-muted">Trace + response tokens · same biology eval</div>
        </div>
        <div class="dr-rail" role="img" aria-label="GeneBench-Pro average tokens. Baseline 14.4 thousand. Selected 22.2 thousand.">
          <span class="dr-connector" aria-hidden="true" style="--connector-left: 15.04%; --connector-width: 5.98%;"></span>
          <span class="dr-baseline-marker" aria-hidden="true" style="--marker-left: 15.04%;"></span>
          <span class="dr-selected-marker" aria-hidden="true" style="--marker-left: 21.02%;"></span>
          <span class="dr-unknown text-small">No comparable model-by-effort token value in this view</span>
          <span class="dr-scale-min text-small">0k</span>
          <span class="dr-scale-max text-small">120k</span>
        </div>
        <div class="dr-readout">
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-baseline-text">■ Baseline</span>
            <span class="dr-readout-value" data-role="baseline-value">14.4k</span>
          </div>
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-selected-text">◆ Selected</span>
            <span class="dr-readout-value" data-role="selected-value">22.2k</span>
          </div>
          <div class="dr-delta text-small" data-role="delta">Δ +7.8k tokens</div>
        </div>
      </div>

      <div class="dr-lane" data-lane="credits">
        <div class="dr-metric">
          <div class="dr-metric-name">ChatGPT output credits / M</div>
          <div class="text-small text-muted">Published rate card · Fast multiplier applied</div>
        </div>
        <div class="dr-rail" role="img" aria-label="ChatGPT output credits per million tokens. Baseline 750. Selected 937.5.">
          <span class="dr-connector" aria-hidden="true" style="--connector-left: 38.50%; --connector-width: 8.63%;"></span>
          <span class="dr-baseline-marker" aria-hidden="true" style="--marker-left: 38.50%;"></span>
          <span class="dr-selected-marker" aria-hidden="true" style="--marker-left: 47.13%;"></span>
          <span class="dr-unknown text-small">Research preview · no token credit rate</span>
          <span class="dr-scale-min text-small">0</span>
          <span class="dr-scale-max text-small">2,000 credits</span>
        </div>
        <div class="dr-readout">
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-baseline-text">■ Baseline</span>
            <span class="dr-readout-value" data-role="baseline-value">750</span>
          </div>
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-selected-text">◆ Selected</span>
            <span class="dr-readout-value" data-role="selected-value">937.5</span>
          </div>
          <div class="dr-delta text-small" data-role="delta">Δ +187.5 credits</div>
        </div>
      </div>

      <div class="dr-lane" data-lane="model-speed">
        <div class="dr-metric">
          <div class="dr-metric-name">Model speed ordinal</div>
          <div class="text-small text-muted">OpenAI icon count · not a latency measure</div>
        </div>
        <div class="dr-rail" role="img" aria-label="Documented model speed ordinal. Baseline 2 out of 5. Selected 3 out of 5.">
          <span class="dr-connector" aria-hidden="true" style="--connector-left: 27.00%; --connector-width: 23.00%;"></span>
          <span class="dr-baseline-marker" aria-hidden="true" style="--marker-left: 27.00%;"></span>
          <span class="dr-selected-marker" aria-hidden="true" style="--marker-left: 50.00%;"></span>
          <span class="dr-unknown text-small">No documented ordinal</span>
          <span class="dr-scale-min text-small">1 / 5</span>
          <span class="dr-scale-max text-small">5 / 5</span>
        </div>
        <div class="dr-readout">
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-baseline-text">■ Baseline</span>
            <span class="dr-readout-value" data-role="baseline-value">2 / 5</span>
          </div>
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-selected-text">◆ Selected</span>
            <span class="dr-readout-value" data-role="selected-value">3 / 5</span>
          </div>
          <div class="dr-delta text-small" data-role="delta">Δ +1 ordinal step</div>
        </div>
      </div>

      <div class="dr-lane" data-lane="fast-effect">
        <div class="dr-metric">
          <div class="dr-metric-name">Fast service effect</div>
          <div class="text-small text-muted">Model speed only · not end-to-end time</div>
        </div>
        <div class="dr-rail" role="img" aria-label="Fast service effect. Baseline Standard at 1 times model speed and 1 times credit rate. Selected Fast at 1.5 times model speed and 2.5 times credit rate.">
          <span class="dr-connector" aria-hidden="true" style="--connector-left: 4.00%; --connector-width: 92.00%;"></span>
          <span class="dr-baseline-marker" aria-hidden="true" style="--marker-left: 4.00%;"></span>
          <span class="dr-selected-marker" aria-hidden="true" style="--marker-left: 96.00%;"></span>
          <span class="dr-unknown text-small">Fast is not available for this model</span>
          <span class="dr-scale-min text-small">1.0× Standard</span>
          <span class="dr-scale-max text-small">1.5× model speed</span>
        </div>
        <div class="dr-readout">
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-baseline-text">■ Baseline</span>
            <span class="dr-readout-value" data-role="baseline-value">1.0× · 1.0× credits</span>
          </div>
          <div class="dr-readout-row text-small">
            <span class="dr-readout-label dr-selected-text">◆ Selected</span>
            <span class="dr-readout-value" data-role="selected-value">1.5× · 2.5× credits</span>
          </div>
          <div class="dr-delta text-small" data-role="delta">+0.5× speed · +1.5× credit rate</div>
        </div>
      </div>
    </div>

    <div class="dr-sources text-small text-muted">
      <span>Official evidence</span>
      <a href="https://openai.com/index/gpt-5-6/" target="_blank" rel="noreferrer">coding proxy</a>
      <a href="https://cdn.openai.com/pdf/21938268-21af-442f-af93-3b2249afb241/genebench-pro.pdf" target="_blank" rel="noreferrer">GeneBench-Pro</a>
      <a href="https://learn.chatgpt.com/docs/pricing" target="_blank" rel="noreferrer">credit rates</a>
      <a href="https://learn.chatgpt.com/docs/models" target="_blank" rel="noreferrer">model ordinals</a>
      <a href="https://learn.chatgpt.com/docs/agent-configuration/speed" target="_blank" rel="noreferrer">Fast mode</a>
    </div>
  </div>

  <script>
    (() => {
      const root = document.getElementById("delta-racetrack-v1");
      if (!root) return;

      const models = {
        "gpt-5.6-sol": {
          short: "Sol",
          label: "GPT-5.6 Sol",
          efforts: ["low", "medium", "high", "xhigh", "max"],
          aa: 80,
          outputCredits: 750,
          speed: 2,
          fast: true,
          fastCreditMultiplier: 2.5,
          gene: {
            low: { score: 14.4, tokens: 5.6 },
            medium: { score: 22.5, tokens: 14.4 },
            high: { score: 24.4, tokens: 19.5 },
            xhigh: { score: 26.8, tokens: 25.7 },
            max: { score: 28.7, tokens: 33.2 }
          }
        },
        "gpt-5.6-terra": {
          short: "Terra",
          label: "GPT-5.6 Terra",
          efforts: ["low", "medium", "high", "xhigh", "max"],
          aa: 77.4,
          outputCredits: 375,
          speed: 3,
          fast: true,
          fastCreditMultiplier: 2.5,
          gene: {
            low: { score: 6.5, tokens: 5.5 },
            medium: { score: 13.6, tokens: 15.9 },
            high: { score: 16.2, tokens: 22.2 },
            xhigh: { score: 18.8, tokens: 31.1 },
            max: { score: 23.3, tokens: 54.3 }
          }
        },
        "gpt-5.6-luna": {
          short: "Luna",
          label: "GPT-5.6 Luna",
          efforts: ["low", "medium", "high", "xhigh", "max"],
          aa: 74.6,
          outputCredits: 150,
          speed: 4,
          fast: true,
          fastCreditMultiplier: 2.5,
          gene: {
            low: { score: 2.3, tokens: 3.6 },
            medium: { score: 4.7, tokens: 15.6 },
            high: { score: 8, tokens: 32.3 },
            xhigh: { score: 10.8, tokens: 53.1 },
            max: { score: 16.5, tokens: 118.2 }
          }
        },
        "gpt-5.5": {
          short: "GPT-5.5",
          label: "GPT-5.5",
          efforts: ["low", "medium", "high", "xhigh"],
          aa: 76.4,
          outputCredits: 750,
          speed: 3,
          fast: true,
          fastCreditMultiplier: 2.5,
          gene: null
        },
        "gpt-5.4": {
          short: "GPT-5.4",
          label: "GPT-5.4",
          efforts: ["low", "medium", "high", "xhigh"],
          aa: null,
          outputCredits: 375,
          speed: 3,
          fast: true,
          fastCreditMultiplier: 2,
          gene: null
        },
        "gpt-5.4-mini": {
          short: "5.4 Mini",
          label: "GPT-5.4 Mini",
          efforts: ["low", "medium", "high", "xhigh"],
          aa: null,
          outputCredits: 113,
          speed: 4,
          fast: false,
          fastCreditMultiplier: null,
          gene: null
        },
        "gpt-5.3-codex-spark": {
          short: "Codex Spark",
          label: "GPT-5.3 Codex Spark",
          efforts: ["low", "medium", "high", "xhigh"],
          aa: null,
          outputCredits: null,
          speed: 5,
          fast: false,
          fastCreditMultiplier: null,
          gene: null
        }
      };

      const baseline = {
        model: models["gpt-5.6-sol"],
        effort: "medium",
        service: "standard",
        aa: 80,
        geneScore: 22.5,
        geneTokens: 14.4,
        outputCredits: 750,
        speed: 2,
        serviceSpeed: 1,
        serviceCredits: 1
      };

      const effortLabels = {
        low: "Low",
        medium: "Medium",
        high: "High",
        xhigh: "Extra High",
        max: "Max"
      };

      const laneSpecs = {
        aa: { min: 0, max: 100 },
        "gene-score": { min: 0, max: 35 },
        "gene-tokens": { min: 0, max: 120 },
        credits: { min: 0, max: 2000 },
        "model-speed": { min: 1, max: 5 },
        "fast-effect": { min: 1, max: 1.5 }
      };

      const modelSelect = root.querySelector("#dr-model");
      const effortSelect = root.querySelector("#dr-effort");
      const serviceSelect = root.querySelector("#dr-service");
      const fastOption = serviceSelect.querySelector('option[value="fast"]');
      const selectedBadge = root.querySelector("#dr-selected-badge");
      const status = root.querySelector("#dr-status");

      const compact = value => Number.isInteger(value) ? String(value) : value.toFixed(1);
      const geneTokenNumber = value => value < 1
        ? value.toFixed(3).replace(/0+$/, "").replace(/\.$/, "")
        : compact(value);
      const signed = (value, digits = 1) => {
        if (Math.abs(value) < 0.0001) return "same";
        return `${value > 0 ? "+" : "−"}${Math.abs(value).toFixed(digits)}`;
      };
      const position = (value, spec) => {
        const normalized = (value - spec.min) / (spec.max - spec.min);
        return 4 + Math.max(0, Math.min(1, normalized)) * 92;
      };

      function setSupportedEfforts(model) {
        Array.from(effortSelect.options).forEach(option => {
          option.disabled = !model.efforts.includes(option.value);
        });
        if (!model.efforts.includes(effortSelect.value)) {
          effortSelect.value = "medium";
        }
      }

      function setLane(key, config) {
        const lane = root.querySelector(`[data-lane="${key}"]`);
        const rail = lane.querySelector(".dr-rail");
        const baselineMarker = lane.querySelector(".dr-baseline-marker");
        const selectedMarker = lane.querySelector(".dr-selected-marker");
        const connector = lane.querySelector(".dr-connector");
        const selectedValue = lane.querySelector('[data-role="selected-value"]');
        const delta = lane.querySelector('[data-role="delta"]');
        const unknown = config.selected === null || config.selected === undefined;

        lane.classList.toggle("is-unknown", unknown);
        baselineMarker.style.setProperty("--marker-left", `${position(config.baseline, laneSpecs[key]).toFixed(2)}%`);
        selectedValue.textContent = unknown ? "Unknown" : config.format(config.selected);
        delta.textContent = unknown ? config.unknownDelta : config.delta(config.selected, config.baseline);

        if (unknown) {
          rail.setAttribute(
            "aria-label",
            `${config.ariaName}. Baseline ${config.format(config.baseline)}. Selected value is unknown. ${config.unknownDelta}.`
          );
          return;
        }

        const baselinePosition = position(config.baseline, laneSpecs[key]);
        const selectedPosition = position(config.selected, laneSpecs[key]);
        selectedMarker.style.setProperty("--marker-left", `${selectedPosition.toFixed(2)}%`);
        connector.style.setProperty("--connector-left", `${Math.min(baselinePosition, selectedPosition).toFixed(2)}%`);
        connector.style.setProperty("--connector-width", `${Math.abs(baselinePosition - selectedPosition).toFixed(2)}%`);
        rail.setAttribute(
          "aria-label",
          `${config.ariaName}. Baseline ${config.format(config.baseline)}. Selected ${config.format(config.selected)}. ${config.delta(config.selected, config.baseline)}.`
        );
      }

      function update() {
        const model = models[modelSelect.value];
        setSupportedEfforts(model);

        fastOption.disabled = !model.fast;
        fastOption.textContent = model.fast ? "Fast" : "Fast (unavailable)";
        if (!model.fast && serviceSelect.value === "fast") {
          serviceSelect.value = "standard";
        }

        const effort = effortSelect.value;
        const fast = serviceSelect.value === "fast" && model.fast;
        const serviceLabel = fast ? "Fast" : "Standard";
        const genePoint = model.gene ? model.gene[effort] : null;
        const effectiveCredits = model.outputCredits === null
          ? null
          : model.outputCredits * (fast ? model.fastCreditMultiplier : 1);
        const serviceSpeed = fast ? 1.5 : 1;
        const serviceCredits = fast ? model.fastCreditMultiplier : 1;

        selectedBadge.lastChild.textContent = ` Selected · ${model.short} / ${effortLabels[effort]} / ${serviceLabel}`;

        setLane("aa", {
          baseline: baseline.aa,
          selected: model.aa,
          ariaName: "Artificial Analysis Coding Agent Index official model proxy",
          format: value => compact(value),
          delta: (selected, base) => `Δ ${signed(selected - base)} points`,
          unknownDelta: "No comparable OpenAI-published index value"
        });

        setLane("gene-score", {
          baseline: baseline.geneScore,
          selected: genePoint ? genePoint.score : null,
          ariaName: "GeneBench-Pro score at the selected reasoning effort",
          format: value => `${Number(value).toFixed(1)}%`,
          delta: (selected, base) => `Δ ${signed(selected - base)} points`,
          unknownDelta: "No comparable model-by-effort value in this view"
        });

        setLane("gene-tokens", {
          baseline: baseline.geneTokens,
          selected: genePoint ? genePoint.tokens : null,
          ariaName: "GeneBench-Pro average trace and response tokens",
          format: value => `${geneTokenNumber(value)}k`,
          delta: (selected, base) => `Δ ${signed(selected - base)}k tokens`,
          unknownDelta: "No comparable model-by-effort token value in this view"
        });

        setLane("credits", {
          baseline: baseline.outputCredits,
          selected: effectiveCredits,
          ariaName: "ChatGPT output credits per million tokens with the selected service multiplier",
          format: value => `${compact(value)} credits`,
          delta: (selected, base) => `Δ ${signed(selected - base)} credits`,
          unknownDelta: "Research preview with a separate usage limit"
        });

        setLane("model-speed", {
          baseline: baseline.speed,
          selected: model.speed,
          ariaName: "Documented model speed ordinal",
          format: value => `${value} out of 5`,
          delta: (selected, base) => {
            const difference = selected - base;
            return Math.abs(difference) < 0.0001
              ? "Δ same ordinal"
              : `Δ ${signed(difference, 0)} ordinal ${Math.abs(difference) === 1 ? "step" : "steps"}`;
          },
          unknownDelta: "No documented ordinal"
        });

        setLane("fast-effect", {
          baseline: baseline.serviceSpeed,
          selected: serviceSpeed,
          ariaName: "Fast service model-speed effect",
          format: value => value === 1
            ? "1.0 times model speed and 1.0 times credit rate"
            : `1.5 times model speed and ${compact(serviceCredits)} times credit rate`,
          delta: selected => selected === 1
            ? (model.fast ? "Standard service selected" : "Standard only; Fast unavailable")
            : `+0.5× speed · +${compact(serviceCredits - 1)}× credit rate`,
          unknownDelta: "Fast is not available for this model"
        });

        const aaPhrase = model.aa === null
          ? "coding proxy unknown"
          : `coding proxy ${signed(model.aa - baseline.aa)} points`;
        const genePhrase = genePoint
          ? `GeneBench ${signed(genePoint.score - baseline.geneScore)} points at ${signed(genePoint.tokens - baseline.geneTokens)}k average tokens`
          : "GeneBench model-by-effort values unknown";
        const creditsPhrase = effectiveCredits === null
          ? "token credit rate unavailable"
          : `output rate ${signed(effectiveCredits - baseline.outputCredits)} credits/M`;
        const fastPhrase = fast
          ? `Fast documents 1.5× model speed at ${compact(serviceCredits)}× credits`
          : (model.fast ? "Standard service selected" : "Fast unavailable");

        const sameAsBaseline =
          modelSelect.value === "gpt-5.6-sol" &&
          effort === "medium" &&
          !fast;

        status.textContent = sameAsBaseline
          ? "Selection matches the fixed baseline. Published proxies are reference points, not a task-level quality prediction."
          : `${model.short} / ${effortLabels[effort]} / ${serviceLabel}: ${aaPhrase}; ${genePhrase}; ${creditsPhrase}; ${fastPhrase}. No task-level winner inferred.`;
      }

      modelSelect.addEventListener("change", update);
      effortSelect.addEventListener("change", update);
      serviceSelect.addEventListener("change", update);
      update();
    })();
  </script>
</div>