Run Detail

completedgpt-5.6-sol-pro

Unscored

Every model's answer from this round

Recorded for these videos

17:31

Testing Gemini 3.8 Flash on Real Coding Challenges (vs. other models)

Sep 2, 2026 · YouTube

19:45

Fable 5.1 writes an animated novel using Ren'Py... did it do better than Sol Pro 5.6?

Sep 1, 2026 · YouTube

14:09

Testing IBM Granite-4.2-8B! Can it name 100 women?

Aug 31, 2026 · YouTube

17:37

Tencent Hy4 Preview Tested: Is It Really Better Than Kimi K3 and GLM 5.3?

Aug 28, 2026 · YouTube

23:58

Qwen 3.8 Flash Tested: UI, Coding, Physics & more - compared to Opus 5, Sol Pro, Grok

Aug 27, 2026 · YouTube

14:50

Stealth Ox Alpha: a new GLM model! Full test (coding & writing) against Grok, Gemini, GPT & others

Aug 21, 2026 · YouTube

21:23

Giving Qwen 3.8 27B another chance (+ GLM 5.2). Testing against GPT, Gemini, Grok etc.

Aug 18, 2026 · YouTube

51:00

AI Coding Showdown: Grok 4.6, Gemini 3.7, Terra-Pro, Qwen3.8 2.4TB, Muse Glimmer & more

Aug 15, 2026 · YouTube

27:51

Testing Gemini 3.7 Flash: Translation, Vision, and Coding Challenges

Aug 14, 2026 · YouTube

Provider

openrouter

Challenge Version

v2.0

Turns

Duration

Batched — not timed

Total Tokens

91,953

Input Tokens

47,955

Output Tokens

43,998

Reasoning Tokens

10,237

Reasoning Effort

default

Cached Input Tokens

2,488

Est. Cost

$0.3899

Started

8/21/2026, 6:53:01 AM

OR Provider

OpenAI

Finish Reason

stop

Generation ID

gen-batch-1787295181-abff3e192cca53f85c1c

Turns (1)

Turn #1

47,955 in43,998 out10,237 reasoning2,488 cached91,953 total

user

You illustrate for a museum of arms and armour. Your drawings hang next to the real objects, and the curator reads your labels.

Build me the armoury slider: one HTML page, one figure, three eras.

The exhibit

A single standing figure. Below it, a slider. Drag the slider and the same figure is re-equipped for the era it lands on.

That is the exhibit. It lives or dies on the drawing, so draw properly.

The three eras

You choose all three yourself, and the choosing is part of the work. Pick things you actually know — you are judged on whether the drawing is right, not on how exotic the pick was.

1. Anywhere in the last five hundred years. Any year from 1526 onwards, anywhere on earth. Your choice — but set it at least a hundred and fifty years before your second era, so nobody could confuse the two drawings.

2. About a hundred years ago. A specific year between 1910 and 1945, and a specific place. Yours to pick.

3. Sometime between 2040 and 2140. Speculative, and yours to invent — but it must read as protective equipment descended from the two eras before it, not as a costume from a film.

Name the year and the place for all three. "Seventeenth-century Europe" is not an era; 1631, Saxony is.

The hard requirements

1. One body. It is the same person all three times. Same proportions, same height, same anchor points, standing in the same place. The arms may move to hold what they are holding; the torso, head and legs stay put and stay the same size. Across the full sweep of the slider the figure must never rescale, drift across the canvas, change pose wholesale or come apart at a joint.

This is an architectural requirement, not a styling note. Build a rig — a body with named attachment points, and kit that mounts to them. Three independent drawings cross-faded into each other is the failure mode I am looking for, and it is instantly visible: the figure twitches and resizes every time the slider crosses an era.

2. Continuity and reversibility. Dragging must never make the figure jump. Between two eras there is a transition, not a cut. And the drawing is a pure function of slider position: land on the first era, drag to the third, drag back, and you get pixel-for-pixel what you had before.

Your three choices are made once, by you, while you write the file. Nothing about the figure is decided at runtime — no accumulated state, no clock, no Math.random anywhere.

3. The label. Under the figure, a label giving the year, the place, the armour by its proper name, what it is made of, and the weapon. Between eras, the label says what it is between.

The label must describe the figure actually drawn above it. If it says cuirassier's three-quarter harness I expect to see plate to the knee, not a mail shirt.

4. The weapon is dated as tightly as the armour. It is not a prop. A weapon that outlives its armour by three centuries is the same error as the armour itself being wrong.

5. No horned Viking helmets. They never existed — nineteenth-century opera costume, not archaeology. Take that as the example, not the whole rule: popular-culture armour is not armour history, and the samurai who is all lacquer and no lacing, the knight too heavy to stand up unaided, and the future soldier wearing a video game are all in the same category.

House rules

One file. Everything inline — no CDN, no external stylesheet, font, script or image. data: URIs are fine.
Inline SVG for the figure. Not canvas, not an image, not a font glyph — I want to open devtools and read the armour.
No libraries. No 3D engine.
No network at runtime.
No localStorage, sessionStorage, cookies or indexedDB. It runs in a sandboxed frame where touching them throws.
No build step, no server. Opened as a local file, it works.
Return the file as exactly one fenced html block.

Answer in exactly these sections

The timeline

Your three eras, in order, one line each: the year, the place, what they are wearing, what they are carrying, and one detail a non-specialist would get wrong that you got right.

The rig

One paragraph. Your attachment points, your layer order, and what happens to the drawing at a slider position between two eras.

The file

The single fenced html block.

The weakest era

Which of your three is the shakiest historically, and why. Name the anachronism you were most tempted by. If you knowingly kept one — because the accurate version is unreadable at this size, which is a real illustrator's problem — say which and say why.

What I check

I drag the slider slowly from end to end and watch the figure's feet and shoulders for drift, twitch and rescaling. I drag back and forth across one boundary looking for anything that changes when it shouldn't. I read every label against its drawing. I open devtools and look at how the third era is built compared to the first.

That last one matters. Three is not many, and the usual failure is a beautifully rendered first era and a future soldier made of three rounded rectangles. The last era gets the same care as the first. I will drag straight to the end before I do anything else.

If you ran out of room and know it, say so in "The weakest era". A stated weakness is a finding. Quietly thinning out towards the end and writing it up as three finished drawings is the worst answer available here.

assistant

The timeline

1631, Breitenfeld, Electorate of Saxony — a cuirassier in blackened-steel three-quarter harness carries a wheellock holster pistol; the easily missed detail is that the articulated tassets protect the thighs to the knees, while the lower legs remain in riding boots rather than plate greaves.

1916, Verdun, France — a French infantryman wears a horizon-blue greatcoat and Mle 1915 Adrian helmet and carries a Lebel Mle 1886 M93 rifle; the helmet’s crest covers a ventilation fitting rather than serving as decoration, and ordinary infantry did not wear a theatrical steel breastplate.

2086, Leipzig, Germany — a protective constable wears a speculative Muster 86 articulated composite field harness and carries a K-86 6.8 mm telescoped-cartridge carbine; its protection is overlapping load-bearing plate over fabric, not a seamless powered “space suit,” and there is no decorative glowing visor.

The rig

The fixed rig has named crown, neck, shoulder, elbow, hand, hip, knee, ankle and sole anchors; one shared head, torso, pelvis, pair of legs and pair of arms occupies those anchors throughout. Era-specific equipment is divided by depth into rear equipment, leg kit, torso kit, arm kit, weapons, hand coverings and headgear rather than three whole figures. At positions between dated stops, deterministic triangular weights cross-fade the adjacent sets of mounted equipment; the skeleton, floor, proportions and attachment coordinates never move or rescale, and every displayed state is calculated solely from the slider value.

The file

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>The Armoury Slider</title>
<style>
  :root{
    color-scheme:dark;
    --ink:#ece4d2;
    --muted:#aaa28f;
    --paper:#171914;
    --panel:#20231d;
    --line:#6f745f;
    --accent:#c7a967;
  }

  *{box-sizing:border-box}

  html,body{
    min-height:100%;
    margin:0;
    background:
      radial-gradient(circle at 50% 8%,#303429 0,#1c1f19 40rem,#11130f 100%);
    color:var(--ink);
    font-family:Georgia,"Times New Roman",serif;
  }

  body{
    display:grid;
    place-items:center;
    padding:20px;
  }

  main{
    width:min(760px,100%);
  }

  header{
    text-align:center;
    margin-bottom:10px;
  }

  h1{
    margin:0;
    font-size:clamp(1.35rem,4vw,2.1rem);
    font-weight:normal;
    letter-spacing:.12em;
    text-transform:uppercase;
  }

  .kicker{
    margin:.35rem 0 0;
    color:var(--muted);
    font-size:.82rem;
    letter-spacing:.18em;
    text-transform:uppercase;
  }

  figure{
    margin:0;
    border:1px solid #4c5042;
    background:
      linear-gradient(90deg,transparent 49.9%,rgba(255,255,255,.025) 50%,transparent 50.1%),
      linear-gradient(#242820,#171914);
    box-shadow:0 18px 55px #0009,inset 0 0 70px #0005;
  }

  svg{
    display:block;
    width:100%;
    height:min(70vh,720px);
    min-height:480px;
  }

  .controls{
    padding:16px 20px 13px;
    border-top:1px solid #464a3e;
    background:#1b1e18;
  }

  input[type=range]{
    width:100%;
    margin:0;
    accent-color:var(--accent);
    cursor:ew-resize;
  }

  .ticks{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    margin-top:7px;
    color:var(--muted);
    font:600 .72rem/1.2 system-ui,sans-serif;
    letter-spacing:.08em;
  }

  .ticks span:nth-child(2){text-align:center}
  .ticks span:last-child{text-align:right}

  figcaption{
    min-height:128px;
    padding:15px 20px 18px;
    border-top:1px solid #464a3e;
    background:#141611;
  }

  #labelTitle{
    margin:0 0 7px;
    color:#f3e3b8;
    font-size:1.12rem;
    font-weight:normal;
    letter-spacing:.07em;
    text-transform:uppercase;
  }

  #labelBody{
    margin:0;
    color:#d0cab9;
    font-size:.94rem;
    line-height:1.55;
  }

  #labelBody b{
    color:#f1eadc;
    font-weight:normal;
  }

  .era{
    transition:none;
    pointer-events:none;
  }

  .outline{
    stroke:#0b0c0a;
    stroke-width:4;
    stroke-linejoin:round;
    stroke-linecap:round;
  }

  .fine{
    fill:none;
    stroke:#171914;
    stroke-width:2.2;
    stroke-linejoin:round;
    stroke-linecap:round;
  }

  .engrave{
    fill:none;
    stroke:#b9b7a7;
    stroke-width:1.5;
    opacity:.6;
  }

  .seam{
    fill:none;
    stroke:#171914;
    stroke-width:2;
    stroke-dasharray:4 4;
    opacity:.75;
  }

  .cloth-line{
    fill:none;
    stroke:#aeb4ae;
    stroke-width:1.6;
    opacity:.45;
  }

  @media (max-width:520px){
    body{padding:8px}
    svg{min-height:420px;height:65vh}
    .controls,figcaption{padding-left:13px;padding-right:13px}
    figcaption{min-height:152px}
  }
</style>
</head>
<body>
<main>
  <header>
    <h1>The Armoury Slider</h1>
    <p class="kicker">One body · three systems of protection</p>
  </header>

  <figure aria-labelledby="labelTitle" aria-describedby="labelBody">
    <svg id="armoury" viewBox="0 0 600 720" role="img"
         aria-label="A single standing figure whose protective equipment changes with the era slider">
      <defs>
        <linearGradient id="steel1631" x1="0" x2="1">
          <stop offset="0" stop-color="#292e2e"/>
          <stop offset=".33" stop-color="#77807a"/>
          <stop offset=".52" stop-color="#252a2a"/>
          <stop offset=".78" stop-color="#555d59"/>
          <stop offset="1" stop-color="#171a1a"/>
        </linearGradient>

        <linearGradient id="adrianSteel" x1="0" x2="1">
          <stop offset="0" stop-color="#536c75"/>
          <stop offset=".48" stop-color="#91a6aa"/>
          <stop offset="1" stop-color="#3b515b"/>
        </linearGradient>

        <linearGradient id="futurePlate" x1="0" x2="1">
          <stop offset="0" stop-color="#a9aaa1"/>
          <stop offset=".42" stop-color="#e0ded1"/>
          <stop offset=".55" stop-color="#777d76"/>
          <stop offset="1" stop-color="#444b47"/>
        </linearGradient>

        <linearGradient id="futureDark" x1="0" x2="1">
          <stop offset="0" stop-color="#202827"/>
          <stop offset=".5" stop-color="#46504b"/>
          <stop offset="1" stop-color="#151b1b"/>
        </linearGradient>

        <linearGradient id="wood" x1="0" x2="1">
          <stop offset="0" stop-color="#4a2515"/>
          <stop offset=".48" stop-color="#9a6030"/>
          <stop offset="1" stop-color="#32180e"/>
        </linearGradient>
      </defs>

      <!-- Fixed gallery floor -->
      <ellipse cx="300" cy="687" rx="151" ry="16" fill="#090a08" opacity=".68"/>
      <path d="M104 687H496" stroke="#747865" stroke-width="2" opacity=".45"/>

      <!-- Named fixed rig anchors: intentionally invisible, inspectable in devtools -->
      <g id="rig-anchors" fill="none" stroke="none">
        <circle id="anchor-crown" cx="300" cy="63" r="2"/>
        <circle id="anchor-neck" cx="300" cy="170" r="2"/>
        <circle id="anchor-shoulder-left" cx="230" cy="205" r="2"/>
        <circle id="anchor-shoulder-right" cx="370" cy="205" r="2"/>
        <circle id="anchor-elbow-left" cx="199" cy="305" r="2"/>
        <circle id="anchor-elbow-right" cx="402" cy="272" r="2"/>
        <circle id="anchor-hand-left" cx="205" cy="402" r="2"/>
        <circle id="anchor-hand-right" cx="423" cy="326" r="2"/>
        <circle id="anchor-hip-left" cx="270" cy="370" r="2"/>
        <circle id="anchor-hip-right" cx="330" cy="370" r="2"/>
        <circle id="anchor-knee-left" cx="267" cy="506" r="2"/>
        <circle id="anchor-knee-right" cx="337" cy="506" r="2"/>
        <circle id="anchor-ankle-left" cx="258" cy="657" r="2"/>
        <circle id="anchor-ankle-right" cx="346" cy="657" r="2"/>
        <circle id="anchor-sole-left" cx="246" cy="680" r="2"/>
        <circle id="anchor-sole-right" cx="360" cy="680" r="2"/>
      </g>

      <!-- REAR EQUIPMENT -->
      <g id="rear-equipment">
        <g class="era" data-era="0" data-mount="left-hip">
          <!-- Riding sword and scabbard, secondary equipment -->
          <path d="M245 352L170 594" stroke="#191b19" stroke-width="15" class="outline"/>
          <path d="M245 352L170 594" stroke="#303630" stroke-width="10"/>
          <path d="M164 594l15 5" stroke="#9a8351" stroke-width="7"/>
          <path d="M223 350l42 13" stroke="#a48a50" stroke-width="7" class="outline"/>
          <path d="M242 338l-8 28" stroke="#b99b58" stroke-width="7"/>
        </g>

        <g class="era" data-era="1" data-mount="back-and-waist">
          <!-- Leather rifle sling behind the arm -->
          <path d="M431 185C390 313 399 482 439 655"
                fill="none" stroke="#70513a" stroke-width="7" class="outline"/>
          <path d="M431 185C390 313 399 482 439 655"
                fill="none" stroke="#9a7855" stroke-width="3"/>
          <!-- Bread bag -->
          <path d="M347 348l62 20-13 87-65-18z" fill="#82775d" class="outline"/>
          <path d="M344 359l57 18" class="fine"/>
          <path d="M350 350C363 307 382 275 398 251"
                fill="none" stroke="#81745c" stroke-width="8"/>
        </g>

        <g class="era" data-era="2" data-mount="back-and-waist">
          <!-- Rear load carriage -->
          <path d="M260 187Q300 164 340 187L360 326Q300 352 240 326z"
                fill="#222a28" class="outline"/>
          <rect x="256" y="207" width="88" height="91" rx="14"
                fill="url(#futureDark)" class="outline"/>
          <path d="M270 220h60v23h-60zM268 251h64v34h-64z"
                fill="#59635d" stroke="#111614" stroke-width="3"/>
          <circle cx="279" cy="268" r="5" fill="#b5aa7b"/>
          <path d="M262 300l-32 94M338 300l31 94"
                stroke="#303a36" stroke-width="12" fill="none"/>
        </g>
      </g>

      <!-- ONE SHARED BODY: never transformed, rescaled or replaced -->
      <g id="shared-body">
        <!-- legs -->
        <path d="M258 358Q244 438 249 520L240 658Q247 675 271 662L290 508 300 381z"
              fill="#8b7969" class="outline"/>
        <path d="M342 358Q357 438 352 520L362 658Q354 675 331 662L311 508 300 381z"
              fill="#8b7969" class="outline"/>

        <!-- torso and pelvis -->
        <path d="M247 177Q300 158 353 177L378 257 349 367Q300 390 251 367L222 257z"
              fill="#8b7969" class="outline"/>
        <path d="M251 354Q300 372 349 354L343 397Q300 414 257 397z"
              fill="#776658" class="outline"/>

        <!-- fixed arms -->
        <path d="M230 205Q212 242 199 305L205 402"
              fill="none" stroke="#8b7969" stroke-width="31" class="outline"/>
        <path d="M370 205Q389 232 402 272L423 326"
              fill="none" stroke="#8b7969" stroke-width="31" class="outline"/>

        <!-- neck and head -->
        <path d="M276 144L276 183Q300 195 324 183L324 144z"
              fill="#a78974" class="outline"/>
        <path d="M259 83Q265 58 300 54Q336 58 342 86L336 137Q323 165 300 171Q277 165 264 137z"
              fill="#b2937c" class="outline"/>
        <path d="M268 105q9-6 19 0M313 105q9-6 19 0" class="fine"/>
        <path d="M299 108l-4 24 10 2M286 145q14 8 29 0" class="fine"/>
      </g>

      <!-- LEG KIT -->
      <g id="leg-kit">
        <g class="era" data-era="0" data-mount="hips-knees-ankles">
          <!-- Buff breeches glimpsed between armour and boots -->
          <path d="M254 357l42 12-13 145-42-2zM304 369l42-12 15 155-43 2z"
                fill="#8b6b45" class="outline"/>
          <!-- Articulated tassets: plate reaches the knees -->
          <path d="M247 344l50 12-8 119-55 1z" fill="url(#steel1631)" class="outline"/>
          <path d="M303 356l50-12 13 132-55-1z" fill="url(#steel1631)" class="outline"/>
          <path d="M242 381l51 9M239 417l52 8M236 451l54 6
                   M307 390l51-9M309 425l52-8M310 457l54-6"
                class="engrave"/>
          <circle cx="251" cy="398" r="4" fill="#b5b6aa"/>
          <circle cx="350" cy="398" r="4" fill="#b5b6aa"/>
          <!-- Riding boots, deliberately not plate greaves -->
          <path d="M240 474Q263 486 286 477L274 650 288 673Q259 690 224 676L240 646z"
                fill="#261c17" class="outline"/>
          <path d="M314 477Q338 486 361 474L362 646 379 675Q343 690 315 673L328 650z"
                fill="#261c17" class="outline"/>
          <path d="M237 516q24 12 47 0M318 516q22 12 44 0"
                stroke="#76513a" stroke-width="5" fill="none"/>
          <path d="M226 674l-13 5M378 674l14 4"
                stroke="#ad955b" stroke-width="4"/>
        </g>

        <g class="era" data-era="1" data-mount="hips-knees-ankles">
          <!-- Greatcoat skirts -->
          <path d="M250 340Q300 362 350 340L374 474Q337 488 302 465Q263 489 226 474z"
                fill="#768b91" class="outline"/>
          <path d="M300 362v103M252 367l-15 101M348 367l15 101"
                class="cloth-line"/>
          <path d="M247 451l42 12-10 64-43-7zM311 463l42-12 12 69-44 7z"
                fill="#657b82" class="outline"/>
          <!-- Horizon-blue puttees -->
          <path d="M242 507l39 3-8 142-39 2zM321 510l39-3 9 147-39-2z"
                fill="#71898d" class="outline"/>
          <path d="M239 526l40 11M237 549l40 11M236 573l39 10M235 597l39 10M234 621l39 9
                   M323 537l39-11M325 560l40-11M327 583l39-10M328 607l40-10M329 630l39-9"
                stroke="#43585d" stroke-width="4" fill="none"/>
          <!-- Ankle boots -->
          <path d="M233 641l41 1 13 31q-28 16-63 4zM329 642l40-1 10 36q-35 12-63-4z"
                fill="#2c2620" class="outline"/>
        </g>

        <g class="era" data-era="2" data-mount="hips-knees-ankles">
          <!-- Flexible load-bearing trousers -->
          <path d="M252 356l44 12-15 292-51 1zM304 368l44-12 23 305-51-1z"
                fill="#303a36" class="outline"/>
          <path d="M258 409l30 7M250 541l33 7M312 416l31-7M319 548l33-7"
                class="seam"/>
          <!-- Descendant of articulated tassets -->
          <path d="M246 354l49 10-9 111-51-3zM305 364l49-10 12 118-52 3z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M239 392l52 7M237 431l51 6M309 399l52-7M312 437l51-6"
                stroke="#434944" stroke-width="4" fill="none"/>
          <!-- Separate knees -->
          <path d="M236 470q27-17 54 2l-3 65q-29 17-55-4z"
                fill="#707771" class="outline"/>
          <path d="M310 472q27-19 54-2l4 63q-26 21-55 4z"
                fill="#707771" class="outline"/>
          <path d="M245 489l34 1M322 490l34-1" class="engrave"/>
          <!-- Shin shells and grounded boots -->
          <path d="M236 528l49 5-10 126-47 0zM315 533l49-5 10 131-48 0z"
                fill="url(#futureDark)" class="outline"/>
          <path d="M245 551h31M241 588h37M238 625h39
                   M325 551h31M323 588h38M323 625h42"
                stroke="#68716a" stroke-width="4"/>
          <path d="M227 646l50 1 12 27q-31 17-66 3zM325 647l49-1 7 31q-35 14-67-3z"
                fill="#202725" class="outline"/>
          <path d="M234 667h45M323 668h49" stroke="#9a9d8e" stroke-width="3"/>
        </g>
      </g>

      <!-- TORSO KIT -->
      <g id="torso-kit">
        <g class="era" data-era="0" data-mount="neck-shoulders-waist">
          <!-- Buff coat under the plate -->
          <path d="M245 183Q300 168 355 183L367 269 347 364Q300 379 253 364L233 269z"
                fill="#9a7449" class="outline"/>
          <!-- Gorget -->
          <path d="M265 170q35 18 70 0l9 31q-44 21-88 0z"
                fill="url(#steel1631)" class="outline"/>
          <!-- Ridged breastplate -->
          <path d="M250 194Q300 174 350 194L364 276Q342 340 300 355Q258 340 236 276z"
                fill="url(#steel1631)" class="outline"/>
          <path d="M300 191v157M261 207q-11 69 33 132M339 207q11 69-33 132"
                class="engrave"/>
          <path d="M244 285q56 22 112 0M249 311q51 20 102 0M257 334q43 17 86 0"
                fill="none" stroke="#121515" stroke-width="4"/>
          <!-- Pauldrons -->
          <path d="M229 187q-32 8-42 47l49 30 29-67z"
                fill="url(#steel1631)" class="outline"/>
          <path d="M371 187q32 8 42 47l-49 30-29-67z"
                fill="url(#steel1631)" class="outline"/>
          <path d="M198 217l47 16M402 217l-47 16" class="engrave"/>
          <!-- Waist belt -->
          <path d="M245 346q55 18 110 0" stroke="#32241b" stroke-width="13" fill="none"/>
          <rect x="291" y="344" width="19" height="17" fill="#b79a57" class="outline"/>
        </g>

        <g class="era" data-era="1" data-mount="neck-shoulders-waist">
          <!-- Double-breasted horizon-blue greatcoat -->
          <path d="M244 178Q300 161 356 178L375 286 350 374Q300 390 250 374L225 286z"
                fill="#71868c" class="outline"/>
          <path d="M281 178l19 193M319 178L300 371" class="cloth-line"/>
          <path d="M255 194l90 165M345 194L255 359"
                stroke="#53686e" stroke-width="3" fill="none"/>
          <g fill="#c8b687" stroke="#3c453f" stroke-width="2">
            <circle cx="278" cy="223" r="5"/><circle cx="322" cy="223" r="5"/>
            <circle cx="275" cy="258" r="5"/><circle cx="325" cy="258" r="5"/>
            <circle cx="271" cy="294" r="5"/><circle cx="329" cy="294" r="5"/>
            <circle cx="267" cy="330" r="5"/><circle cx="333" cy="330" r="5"/>
          </g>
          <path d="M252 177q48 22 96 0" stroke="#556b71" stroke-width="16" fill="none"/>
          <path d="M255 174q45 20 90 0" stroke="#8fa0a2" stroke-width="3" fill="none"/>
          <!-- Equipment belt and cartridge pouches -->
          <path d="M240 345q60 24 120 0" stroke="#6b5038" stroke-width="12" fill="none"/>
          <path d="M239 339l38 7-4 34-39-8zM323 346l38-7 5 33-39 8z"
                fill="#76563b" class="outline"/>
          <path d="M245 349l27 5M328 354l27-5" stroke="#b18b61" stroke-width="3"/>
        </g>

        <g class="era" data-era="2" data-mount="neck-shoulders-waist">
          <!-- Fibre under-harness -->
          <path d="M242 177Q300 159 358 177L376 288 348 371Q300 391 252 371L224 288z"
                fill="#27312e" class="outline"/>
          <path d="M252 198l-17 131M348 198l17 131" class="seam"/>
          <!-- High protective collar -->
          <path d="M265 162q35 20 70 0l14 45q-49 25-98 0z"
                fill="#5f6761" class="outline"/>
          <path d="M270 174q30 14 60 0" class="engrave"/>
          <!-- Composite cuirass in separately replaceable plates -->
          <path d="M252 190Q300 174 348 190L359 261 329 286h-58l-30-25z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M271 286h58l18 70q-47 24-94 0z"
                fill="#727974" class="outline"/>
          <path d="M300 186v96M267 205l-11 49 23 21M333 205l11 49-23 21"
                stroke="#3d4541" stroke-width="4" fill="none"/>
          <path d="M278 301h44l9 38q-31 12-62 0z"
                fill="#343d39" stroke="#151a18" stroke-width="3"/>
          <!-- Shoulder plates -->
          <path d="M229 181q-37 9-43 51l48 27 33-68z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M371 181q37 9 43 51l-48 27-33-68z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M194 214l49 17M406 214l-49 17"
                stroke="#535b56" stroke-width="5"/>
          <!-- Articulated lower fauld -->
          <path d="M250 347q50 20 100 0l10 28q-60 24-120 0z"
                fill="#8b8f87" class="outline"/>
          <path d="M244 367q56 24 112 0l8 25q-64 24-128 0z"
                fill="#626a65" class="outline"/>
          <!-- Plain identification panel, not a glowing screen -->
          <rect x="315" y="214" width="25" height="17" rx="3"
                fill="#b8b28c" stroke="#222824" stroke-width="3"/>
          <path d="M320 222h15" stroke="#454b45" stroke-width="2"/>
        </g>
      </g>

      <!-- ARM KIT -->
      <g id="arm-kit">
        <g class="era" data-era="0" data-mount="shoulders-elbows-hands">
          <!-- Full arm defence -->
          <path d="M220 221Q205 260 195 304" stroke="url(#steel1631)"
                stroke-width="30" fill="none" class="outline"/>
          <path d="M195 307L204 391" stroke="url(#steel1631)"
                stroke-width="27" fill="none" class="outline"/>
          <path d="M380 221Q394 245 402 272" stroke="url(#steel1631)"
                stroke-width="30" fill="none" class="outline"/>
          <path d="M402 272L420 317" stroke="url(#steel1631)"
                stroke-width="27" fill="none" class="outline"/>
          <path d="M182 298q17-15 34 1l-3 28q-18 12-34-3z
                   M388 263q15-16 31-1l8 25q-14 16-31 5z"
                fill="#4c5551" class="outline"/>
          <path d="M185 250l29 9M189 346l30-4M386 239l27-9M404 295l27-10"
                class="engrave"/>
        </g>

        <g class="era" data-era="1" data-mount="shoulders-elbows-hands">
          <path d="M228 207Q210 254 199 305L205 393"
                fill="none" stroke="#71868c" stroke-width="35" class="outline"/>
          <path d="M372 207Q390 236 402 273L421 318"
                fill="none" stroke="#71868c" stroke-width="35" class="outline"/>
          <path d="M192 299q15 8 30 0M390 267q14 8 29-2"
                stroke="#53686d" stroke-width="5" fill="none"/>
          <path d="M190 376q16 8 31 0M407 305q15 7 28-3"
                stroke="#8fa0a2" stroke-width="4" fill="none"/>
        </g>

        <g class="era" data-era="2" data-mount="shoulders-elbows-hands">
          <path d="M225 213Q210 258 199 304L205 391"
                fill="none" stroke="#303a36" stroke-width="34" class="outline"/>
          <path d="M375 213Q391 239 402 272L421 316"
                fill="none" stroke="#303a36" stroke-width="34" class="outline"/>
          <!-- Upper and lower shell segments -->
          <path d="M211 215q23 2 28 17l-22 67q-19 12-35-5l18-65z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M189 311q17-14 31 0l2 73q-17 16-35 1z"
                fill="#68706a" class="outline"/>
          <path d="M361 217q23-10 36 9l22 55q-9 20-29 14l-24-53z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M397 286q17-12 31 2l16 34q-9 19-29 12z"
                fill="#68706a" class="outline"/>
          <path d="M187 296q16-19 35-1l-2 28q-18 14-35-1z
                   M389 274q15-19 31-4l10 22q-10 18-28 10z"
                fill="#2b3431" class="outline"/>
          <path d="M199 239l25 6M194 345l28-2M376 236l25-10M406 302l26-10"
                class="engrave"/>
        </g>
      </g>

      <!-- WEAPONS: all attached to the same right-hand vicinity -->
      <g id="weapons">
        <g class="era" data-era="0" data-mount="right-hand">
          <!-- 17th-century wheellock holster pistol -->
          <path d="M423 327Q438 337 446 322L439 296 416 294z"
                fill="url(#wood)" class="outline"/>
          <path d="M422 300L431 211 445 210 443 302z"
                fill="#444b49" class="outline"/>
          <path d="M430 211l4-22h11l2 24" fill="#565e5b" class="outline"/>
          <path d="M421 288l38-2 4 20-45 5z"
                fill="#575f5b" class="outline"/>
          <!-- External wheel and dog -->
          <circle cx="443" cy="296" r="13" fill="#8a8c81" class="outline"/>
          <circle cx="443" cy="296" r="5" fill="#2b302e"/>
          <path d="M452 283q14-17 20-1l-10 15" fill="none"
                stroke="#777d76" stroke-width="6" class="outline"/>
          <path d="M426 226h18M426 242h18" class="engrave"/>
          <path d="M421 311q-11 17 4 24" fill="none" stroke="#262b29"
                stroke-width="5"/>
        </g>

        <g class="era" data-era="1" data-mount="right-hand-and-floor">
          <!-- Lebel Mle 1886 M93: long tubular-magazine rifle -->
          <path d="M432 654L431 247Q433 207 439 171"
                stroke="#242725" stroke-width="14" fill="none" class="outline"/>
          <path d="M430 649L429 317Q430 283 433 252"
                stroke="url(#wood)" stroke-width="11" fill="none"/>
          <path d="M434 314L438 169" stroke="#555d59" stroke-width="8"/>
          <path d="M437 170l3-23M431 205h14" stroke="#92978e" stroke-width="4"/>
          <!-- Tubular magazine under barrel -->
          <path d="M428 313L426 211" stroke="#3f4643" stroke-width="5"/>
          <path d="M421 316h27l3 31-31 1z"
                fill="#565d58" class="outline"/>
          <path d="M427 346q-17 29 4 45" fill="none"
                stroke="#3a2a20" stroke-width="8" class="outline"/>
          <path d="M430 526q-13 58 2 124" stroke="#6d492f"
                stroke-width="17" fill="none" class="outline"/>
          <path d="M432 648l-10 19 19 0z" fill="#413229" class="outline"/>
          <path d="M442 239l14 12-17 2" fill="#727970" class="outline"/>
        </g>

        <g class="era" data-era="2" data-mount="right-hand-and-sling">
          <!-- K-86 mechanically plausible carbine -->
          <path d="M430 559L429 284" stroke="#1a211f" stroke-width="18"
                fill="none" class="outline"/>
          <path d="M425 284h28l7 127-31 18z"
                fill="#3d4945" class="outline"/>
          <path d="M420 314h48v72h-48z"
                fill="url(#futureDark)" class="outline"/>
          <path d="M426 328h35M426 348h35M426 368h35"
                stroke="#758078" stroke-width="3"/>
          <!-- Barrel, suppressor-sized blast can and front sight -->
          <path d="M441 313V226" stroke="#5a625d" stroke-width="10" class="outline"/>
          <path d="M434 226h15v-54h-15z" fill="#303936" class="outline"/>
          <path d="M432 173h19v-18h-19z" fill="#505a55" class="outline"/>
          <path d="M441 173v-20" stroke="#b1b2a6" stroke-width="3"/>
          <!-- Low optical sight -->
          <path d="M420 303l5-26h36l8 26z"
                fill="#2d3633" class="outline"/>
          <rect x="429" y="267" width="27" height="16" rx="4"
                fill="#66716a" class="outline"/>
          <circle cx="451" cy="275" r="5" fill="#b8c0b1"/>
          <!-- Grip, trigger guard, compact stock -->
          <path d="M427 406l30 3-8 49-27-8z"
                fill="#252e2b" class="outline"/>
          <path d="M431 400q-19 28 4 47" fill="none"
                stroke="#5d6660" stroke-width="7" class="outline"/>
          <path d="M430 426l-24 58 12 12 30-58"
                fill="#3d4844" class="outline"/>
          <!-- Curved telescoped-ammunition magazine -->
          <path d="M448 415q22 55 7 90l-27-8q8-39-5-71z"
                fill="#4f5954" class="outline"/>
          <path d="M453 435l-24 6M459 458l-25 5M461 482l-27 3"
                stroke="#262e2b" stroke-width="3"/>
          <!-- Adjustable stock -->
          <path d="M425 385l-39 41 13 28 32-24"
                fill="#39433f" class="outline"/>
          <path d="M388 420l-12 8 15 33 13-8z"
                fill="#626b65" class="outline"/>
          <!-- Non-electronic status tag -->
          <rect x="432" y="363" width="25" height="12" rx="2"
                fill="#b7ad7b" stroke="#191e1c" stroke-width="2"/>
        </g>
      </g>

      <!-- SHARED BARE HANDS, then era-specific coverings -->
      <g id="shared-hands">
        <path d="M190 387q15-8 29 3l1 24q-18 17-32-1z"
              fill="#b2937c" class="outline"/>
        <path d="M409 314q17-10 29 3l-1 24q-18 12-31-3z"
              fill="#b2937c" class="outline"/>
      </g>

      <g id="hand-coverings">
        <g class="era" data-era="0" data-mount="hands">
          <path d="M187 380q18-11 35 4l3 34q-20 18-39-1z"
                fill="url(#steel1631)" class="outline"/>
          <path d="M405 307q19-12 36 4l1 32q-19 16-38-1z"
                fill="url(#steel1631)" class="outline"/>
          <path d="M190 393l31 1M408 321l31 0" class="engrave"/>
        </g>

        <g class="era" data-era="1" data-mount="hands">
          <path d="M188 386q17-8 32 4M408 316q16-9 29 2"
                fill="none" stroke="#8e725e" stroke-width="4"/>
        </g>

        <g class="era" data-era="2" data-mount="hands">
          <path d="M187 381q18-10 35 4l2 33q-20 17-38-1z"
                fill="#28312e" class="outline"/>
          <path d="M404 308q20-11 38 4v31q-20 15-39-1z"
                fill="#28312e" class="outline"/>
          <path d="M190 394l31 1M408 322h31"
                stroke="#68716a" stroke-width="4"/>
        </g>
      </g>

      <!-- HEADGEAR -->
      <g id="headgear">
        <g class="era" data-era="0" data-mount="crown-neck">
          <!-- Close helmet -->
          <path d="M255 97Q252 57 300 43Q348 57 345 97L337 157Q300 179 263 157z"
                fill="url(#steel1631)" class="outline"/>
          <path d="M252 97q48-24 96 0l-4 28q-44 22-88 0z"
                fill="#3b4240" class="outline"/>
          <!-- Vision slit, not an open fantasy face -->
          <path d="M263 103q37-12 74 0" stroke="#080a09" stroke-width="8"/>
          <path d="M269 103l13-2M318 101l13 2" stroke="#b1b2a9" stroke-width="2"/>
          <path d="M262 129q38 20 76 0M300 49v45" class="engrave"/>
          <g fill="#b9bbb0">
            <circle cx="270" cy="139" r="3"/><circle cx="280" cy="143" r="3"/>
            <circle cx="330" cy="139" r="3"/><circle cx="320" cy="143" r="3"/>
          </g>
          <path d="M255 152q45 24 90 0l8 25q-53 23-106 0z"
                fill="#2f3633" class="outline"/>
        </g>

        <g class="era" data-era="1" data-mount="crown">
          <!-- Mle 1915 Adrian: separate bowl, brim and ventilating crest -->
          <path d="M254 104Q255 60 300 52Q345 60 346 104z"
                fill="url(#adrianSteel)" class="outline"/>
          <path d="M236 103q64-23 128 0l-5 16q-59 11-118 0z"
                fill="#607b83" class="outline"/>
          <path d="M289 57q11-23 22 0l6 48h-34z"
                fill="#708991" class="outline"/>
          <path d="M294 49q6-16 12 0" fill="none"
                stroke="#aab9ba" stroke-width="4"/>
          <!-- Simplified French flaming-grenade infantry badge -->
          <circle cx="300" cy="91" r="9" fill="#b2a478" stroke="#485c61" stroke-width="2"/>
          <path d="M297 82q-5-9 3-15 1 7 7 10-1 5-7 7"
                fill="#b2a478" stroke="#485c61" stroke-width="2"/>
          <path d="M263 112q37 8 74 0" class="engrave"/>
          <path d="M262 117l4 30M338 117l-4 30"
                stroke="#604b38" stroke-width="4"/>
        </g>

        <g class="era" data-era="2" data-mount="crown-neck">
          <!-- Multi-part helmet, visibly manufactured rather than seamless -->
          <path d="M253 101Q251 58 300 43Q349 58 347 101L338 156Q300 175 262 156z"
                fill="url(#futurePlate)" class="outline"/>
          <path d="M300 47v47M259 81l41 13 41-13"
                stroke="#505853" stroke-width="4" fill="none"/>
          <path d="M256 99q44-22 88 0l-5 40q-39 21-78 0z"
                fill="#26302f" class="outline"/>
          <!-- Clear laminate visor with visible eyes, no glow -->
          <path d="M263 101q37-15 74 0l-4 25q-33 12-66 0z"
                fill="#8fa6a2" fill-opacity=".58" stroke="#151b1a" stroke-width="4"/>
          <path d="M271 108q29-9 58 0" stroke="#d3d8cf" stroke-width="2" opacity=".7"/>
          <!-- Replaceable jaw and ear modules -->
          <path d="M260 129l30 12-3 25-26-10zM340 129l-30 12 3 25 26-10z"
                fill="#59635e" class="outline"/>
          <path d="M246 101l17-8 3 52-18-8zM354 101l-17-8-3 52 18-8z"
                fill="#3b4642" class="outline"/>
          <circle cx="254" cy="118" r="5" fill="#9e9875"/>
          <path d="M261 151q39 20 78 0l11 26q-50 24-100 0z"
                fill="#444f4a" class="outline"/>
        </g>
      </g>
    </svg>

    <div class="controls">
      <input id="eraSlider" type="range" min="0" max="100" step="0.1" value="0"
             aria-label="Move through the armoury timeline"
             aria-valuetext="1631, Breitenfeld, Electorate of Saxony">
      <div class="ticks" aria-hidden="true">
        <span>1631 · BREITENFELD</span>
        <span>1916 · VERDUN</span>
        <span>2086 · LEIPZIG</span>
      </div>
    </div>

    <figcaption aria-live="polite">
      <h2 id="labelTitle">1631 · Breitenfeld, Electorate of Saxony</h2>
      <p id="labelBody"></p>
    </figcaption>
  </figure>
</main>

<script>
(() => {
  "use strict";

  const slider = document.getElementById("eraSlider");
  const title = document.getElementById("labelTitle");
  const body = document.getElementById("labelBody");
  const mountedParts = [...document.querySelectorAll("[data-era]")];

  const eras = [
    {
      year: "1631",
      place: "Breitenfeld, Electorate of Saxony",
      armour: "Cuirassier’s three-quarter field harness",
      materials: "Blackened and polished steel plate over a buff-leather coat, with leather riding boots",
      weapon: "Wheellock holster pistol, with an iron lock and barrel in a walnut stock",
      note: "The articulated tassets reach the knees; the lower legs are booted, not enclosed in plate."
    },
    {
      year: "1916",
      place: "Verdun, France",
      armour: "Mle 1915 Adrian helmet with horizon-blue greatcoat and infantry equipment",
      materials: "Mild sheet steel helmet; wool coat, leather belt, pouches and boots; woven puttees",
      weapon: "Lebel Mle 1886 M93 bolt-action rifle in 8×50 mm R Lebel",
      note: "The raised helmet crest covers its ventilation fitting; it is not a decorative comb."
    },
    {
      year: "2086",
      place: "Leipzig, Germany",
      armour: "Muster 86 articulated composite field harness",
      materials: "Replaceable ceramic strike tiles and fibre-composite shells on a cut-resistant textile carrier, with titanium joint fittings",
      weapon: "K-86 6.8 mm telescoped-cartridge defensive carbine",
      note: "Its cuirass, fauld, tassets and limb shells remain separate overlapping components rather than a powered one-piece suit."
    }
  ];

  function exactLabel(index) {
    const e = eras[index];
    title.textContent = `${e.year} · ${e.place}`;
    body.innerHTML =
      `<b>Armour:</b> ${e.armour}. ` +
      `<b>Materials:</b> ${e.materials}. ` +
      `<b>Weapon:</b> ${e.weapon}. ` +
      `<b>Observed detail:</b> ${e.note}`;
    slider.setAttribute("aria-valuetext", `${e.year}, ${e.place}`);
  }

  function betweenLabel(a, b, fraction) {
    const left = eras[a];
    const right = eras[b];
    const percent = Math.round(fraction * 100);

    title.textContent =
      `Between ${left.year} ${left.place} and ${right.year} ${right.place}`;

    body.innerHTML =
      `<b>Transition:</b> ${100 - percent}% ${left.armour}; ` +
      `${percent}% ${right.armour}. ` +
      `<b>Materials between:</b> ${left.materials}; and ${right.materials}. ` +
      `<b>Weapons between:</b> ${left.weapon}; and ${right.weapon}.`;

    slider.setAttribute(
      "aria-valuetext",
      `Between ${left.year} ${left.place} and ${right.year} ${right.place}, ${percent} percent toward ${right.year}`
    );
  }

  function render() {
    const p = Number(slider.value);
    let weights;

    if (p <= 50) {
      const t = p / 50;
      weights = [1 - t, t, 0];

      if (p === 0) exactLabel(0);
      else if (p === 50) exactLabel(1);
      else betweenLabel(0, 1, t);
    } else {
      const t = (p - 50) / 50;
      weights = [0, 1 - t, t];

      if (p === 100) exactLabel(2);
      else betweenLabel(1, 2, t);
    }

    for (const part of mountedParts) {
      part.style.opacity = String(weights[Number(part.dataset.era)]);
    }
  }

  slider.addEventListener("input", render);
  render();
})();
</script>
</body>
</html>

The weakest era

2086 is necessarily the shakiest because its model names, materials combination and institutional use are invented rather than documented. The anachronism I was most tempted by was a powered exoskeleton with a luminous full-face display; I omitted it because it would turn the equipment into speculative costume and obscure the visible descent from the cuirass, fauld, tassets, helmet and replaceable industrial components. No deliberate historical anachronism was retained, although the 1631 harness is a representative German cuirassier configuration rather than a reconstruction of one identified surviving Saxon suit.

Attachments

openai/gpt-5.6-sol-pro — page