/* Tofazzol v2.1 charts and table, 10 November 2026 (second version): the front page feature and the research note.
   One benchmark per chart, bars where higher is better, the score printed on every bar.
   Our models have one colour each (v2.1 amber, v2 blue, v1 green); every other model is grey.
   Colours checked for colour-blind separation and contrast on both page backgrounds. */
.v21{margin:34px 0 28px;color:var(--ink);--v21-m1:#c98500;--v21-m2:#3987e5;--v21-m3:#199e70;--v21-other:#77767e;--v21-rule:rgba(255,255,255,.13);--v21-axis:#8f8e96;--v21-surface:#0e0e11}
.research-page .v21{--v21-surface:#0b0c1a}
.v21 *{box-sizing:border-box}
.v21 .visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.v21+.v21{margin-top:48px;padding-top:38px;border-top:1px solid var(--v21-rule)}
.v21 figcaption{margin:20px auto 0;max-width:78ch;font-size:14px;line-height:1.6;color:var(--dim)}

/* chart heading: what was tested, then the benchmark and its size */
.v21-chart{min-width:0}
.v21-h{margin:0!important;max-width:none!important;text-align:center;font:700 clamp(21px,2.5vw,28px)/1.2 var(--body-font);letter-spacing:0;text-transform:none;color:var(--ink);text-shadow:none}
.v21-s{margin:6px auto 20px!important;max-width:60ch!important;text-align:center;font-size:15px!important;line-height:1.45;color:var(--dim)}

/* vertical bars, 0 to 100 percent */
.v21-vb{--H:300px;--lab:30px;--nm:50px;display:grid;grid-template-columns:20px 34px minmax(0,1fr);align-items:start}
.v21-yl{height:var(--H);padding-bottom:0;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:11.5px;line-height:20px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}
.v21-ax{position:relative;height:var(--H);font-size:12px;font-variant-numeric:tabular-nums;color:var(--dim)}
.v21-ax span{position:absolute;right:9px;bottom:calc(var(--t)*(var(--H) - var(--lab))/100);transform:translateY(50%);line-height:1}
.v21-cols{position:relative;display:flex;justify-content:space-around;margin:0!important;padding:0 2%!important;list-style:none;height:calc(var(--H) + var(--nm))}
.v21-cols::before{content:"";position:absolute;left:0;right:0;top:var(--lab);height:calc(var(--H) - var(--lab));border-bottom:2px solid var(--v21-axis);
  background:repeating-linear-gradient(to top,transparent 0,transparent calc(20% - 1px),var(--v21-rule) calc(20% - 1px),var(--v21-rule) 20%)}
.v21-cols li{position:relative;flex:1 1 0;min-width:0;max-width:150px;margin:0!important;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.v21-cols li::before{content:none!important}
.v21-cols b{margin-bottom:7px;font:700 17px/1 var(--body-font);font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.v21-cols i{display:block;flex:none;width:min(70%,92px);height:calc(var(--v)*(var(--H) - var(--lab))/100);border-radius:5px 5px 0 0;background:var(--v21-other)}
.v21-cols .nm{flex:none;height:var(--nm);padding:10px 3px 0;text-align:center;font-size:14px;line-height:1.25;color:var(--ink)}
.v21-cols .m1 i,.v21-key.m1,.v21-hb .m1 i{background:var(--v21-m1)}
.v21-cols .m2 i,.v21-key.m2,.v21-hb .m2 i{background:var(--v21-m2)}
.v21-cols .m3 i,.v21-key.m3{background:var(--v21-m3)}
.v21-cols .m1 .nm{font-weight:700}
.v21-chart.wide .v21-vb{--H:330px;max-width:560px;margin:0 auto}
.v21-chart.wide .v21-cols{justify-content:center;gap:clamp(26px,12%,84px)}
.v21-chart.wide .v21-cols li{flex:0 1 150px}
.v21-chart.wide .v21-cols b{font-size:22px}
.v21-chart.wide .v21-cols i{width:min(84%,124px)}
.v21-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 36px}
.v21-pair .v21-vb{--H:250px;--nm:58px}
.v21-pair .v21-cols b{font-size:14.5px}
.v21-pair .v21-cols .nm{font-size:12.5px}
.v21-stack{display:grid;gap:46px}

/* legend: a square beside each name */
.v21-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin:0 0 16px!important;padding:0!important;list-style:none;font-size:14px;line-height:1.5;color:var(--ink)}
.v21-legend li{display:flex;align-items:center;gap:8px;margin:0!important}
.v21-legend li::before{content:none!important}
.v21-key{flex:none;width:12px;height:12px;border-radius:3px;background:var(--v21-other)}

/* horizontal pairs of bars, out of ten */
.v21-hb{margin:0!important;padding:0!important;list-style:none}
.v21-hb li{display:grid;grid-template-columns:minmax(150px,36%) minmax(0,1fr);align-items:center;gap:4px 16px;margin:0!important;padding:9px 0;border-top:1px solid var(--v21-rule)}
.v21-hb li::before{content:none!important}
.v21-hb .nm{font-size:15.5px;line-height:1.3;color:var(--ink)}
.v21-hb .nm small{display:block;margin-top:2px;font-size:12.5px;color:var(--dim)}
.v21-hb .bars{display:grid;gap:4px;border-left:2px solid var(--v21-axis);padding:1px 0}
.v21-hb .bars>span{display:flex;align-items:center;gap:8px}
.v21-hb i{display:block;flex:none;height:13px;min-width:2px;width:calc(var(--v)*(100% - 2.2em)/10);border-radius:0 4px 4px 0}
.v21-hb b{font:700 14px/1 var(--body-font);font-variant-numeric:tabular-nums;color:var(--ink)}
.v21-hb .m2 b{font-weight:400}
.v21-hax{position:relative;height:22px;margin-left:calc(36% + 16px);margin-right:2.2em;font-size:12px;font-variant-numeric:tabular-nums;color:var(--dim)}
.v21-hax span{position:absolute;top:6px;left:calc(var(--t)*10%);transform:translateX(-50%)}

/* the comparison table: tests down the side, models across, the new model outlined */
.v21-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:24px 0 28px}
.v21 table.v21-cmp{border-collapse:separate!important;border-spacing:0!important}
.v21-cmp{width:100%;min-width:calc(170px + var(--mcols,5)*var(--mw,92px));border-collapse:separate;border-spacing:0;font-size:16px;line-height:1.3;font-variant-numeric:tabular-nums}
.v21-cmp th,.v21-cmp td{padding:13px 8px;border:0;border-top:1px solid var(--v21-rule);background:none;text-align:center;font-weight:400;color:var(--ink);vertical-align:middle}
.v21 .v21-cmp thead th{color:var(--ink)!important;background:none}
.v21 .v21-cmp thead th.new{background:rgba(201,133,0,.07)}
.v21-cmp thead th{border-top:0;padding:16px 8px 14px;font-size:15.5px;line-height:1.25;vertical-align:bottom}
.v21-cmp thead th small,.v21-cmp td small{display:block;margin-top:3px;font-size:11.5px;font-weight:400;line-height:1.3;color:var(--dim)}
.v21-cmp th[scope=row]{position:sticky;left:0;z-index:1;width:30%;min-width:170px;padding-left:0;padding-right:14px;text-align:left;background:var(--v21-surface)}
.v21-cmp th[scope=row] .task{display:block;font-size:15.5px;color:var(--ink)}
.v21-cmp th[scope=row] .task.again{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.v21-cmp th[scope=row] em{display:block;margin-top:2px;font-size:13px;font-style:italic;line-height:1.35;color:var(--dim)}
.v21-cmp tr.cont th,.v21-cmp tr.cont td{border-top-color:transparent;padding-top:6px}
.v21-cmp tr.sub th,.v21-cmp tr.sub td{border-top-color:transparent;padding-top:5px;padding-bottom:5px;font-size:14px}
.v21-cmp tr.sub th[scope=row]{padding-left:16px}
.v21-cmp tr.sub th[scope=row] .task{font-size:14px;color:var(--dim)}
.v21-cmp tr.sub th[scope=row] em{display:none}
.v21-cmp tr.sub td small{display:none}
.v21-cmp td.best{font-weight:700;color:#fff}
.v21-cmp td:not(.best){color:#a9a8ae}
.v21-cmp .dash{display:inline-block;width:14px;height:2px;border-radius:1px;background:#6d6c74;vertical-align:middle}
.v21-cmp .new{border-left:2px solid var(--v21-m1);border-right:2px solid var(--v21-m1);background:rgba(201,133,0,.07)}
.v21 .v21-cmp thead th.new{border-top:2px solid var(--v21-m1);border-radius:12px 12px 0 0!important;font-weight:700}
.v21 .v21-cmp tbody tr:last-child .new{border-bottom:2px solid var(--v21-m1);border-radius:0 0 12px 12px!important}
.v21+.research-status{margin-top:36px}

/* plain tables in the note */
.v21-table{width:100%;border-collapse:collapse;font-size:16px;line-height:1.4;font-variant-numeric:tabular-nums}
.v21-table caption{caption-side:top;text-align:left;padding:0 0 10px;font-size:13px;letter-spacing:.16em;text-transform:uppercase;color:#a8a59c}
.v21-table th,.v21-table td{padding:9px 12px 9px 0;border-top:1px solid var(--v21-rule);text-align:right;font-weight:400;background:none}
.v21-table thead th{border-top:0;font-size:13px;color:var(--dim);vertical-align:bottom}
.v21-table th:first-child,.v21-table td:first-child{text-align:left}

@media(max-width:900px){
  .v21-pair{grid-template-columns:1fr;gap:44px}
  .v21-pair .v21-vb{--H:270px;--nm:50px}
  .v21-pair .v21-cols b{font-size:16px}
  .v21-pair .v21-cols .nm{font-size:13.5px}
}
@media(max-width:560px){
  .v21-vb,.v21-pair .v21-vb,.v21-chart.wide .v21-vb{--H:240px;--nm:76px;grid-template-columns:28px minmax(0,1fr)}
  .v21-chart.wide .v21-vb{--nm:40px}
  .v21-yl{display:none}
  .v21-ax{font-size:11px}
  .v21-ax span{right:6px}
  .v21-cols{padding:0!important}
  .v21-cols b,.v21-pair .v21-cols b{font-size:12.5px;margin-bottom:5px}
  .v21-chart.wide .v21-cols b{font-size:19px}
  .v21-cols .nm,.v21-pair .v21-cols .nm{font-size:11.5px;padding-top:8px}
  .v21-chart.wide .v21-cols .nm{font-size:14px}
  .v21-cols i{width:74%}
  .v21-hb li{grid-template-columns:1fr}
  .v21-hax{margin-left:0}
  .v21-cmp{font-size:15px;min-width:calc(140px + var(--mcols,5)*82px)}
  .v21-cmp th[scope=row]{width:140px;min-width:140px;padding-right:10px}
  .v21-cmp th[scope=row] .task{font-size:14.5px}
  .v21-cmp th[scope=row] em{font-size:12px}
  .v21-cmp thead th{font-size:14px}
}

/* the payoff line under the wordmark: balanced lines on narrow screens, macOS never alone */
html.noir .hero-brand .gilt-sub{text-wrap:balance}