/* Palette validated with the dataviz checker (light+dark, 6/6 pass).
   --s1/--s2 are the two categorical series used in every chart on the site;
   do not add a third without re-running the validator. */
:root{--bg:#fcfcfb;--fg:#0b0b0b;--fg2:#52514e;--fg3:#7a7973;--line:#e6e5e0;
      --s1:#2a78d6;--s2:#eb6834;--code:#f2f1ec}
:root:where(:not([data-theme="light"])){--bg:#1a1a19;--fg:#fff;--fg2:#c3c2b7;
      --fg3:#8c8b82;--line:#31312e;--s1:#3987e5;--s2:#d95926;--code:#252523}
@media (prefers-color-scheme: light){:root:where(:not([data-theme="dark"])){
      --bg:#fcfcfb;--fg:#0b0b0b;--fg2:#52514e;--fg3:#7a7973;--line:#e6e5e0;
      --s1:#2a78d6;--s2:#eb6834;--code:#f2f1ec}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);
     font:16px/1.65 -apple-system,BlinkMacSystemFont,"PingFang SC",system-ui,sans-serif;
     -webkit-font-smoothing:antialiased}
.wrap{max-width:780px;margin:0 auto;padding:0 22px}
nav{border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:9}
nav .wrap{display:flex;align-items:center;gap:22px;height:56px}
nav a{color:var(--fg2);text-decoration:none;font-size:14.5px;white-space:nowrap}
nav a:hover{color:var(--fg)}
nav .brand{font-weight:640;color:var(--fg);margin-right:auto;letter-spacing:-.01em}
nav .cta{background:var(--s1);color:#fff;padding:6px 14px;border-radius:7px;font-weight:560}
nav .cta:hover{color:#fff;opacity:.9}
h1{font-size:34px;line-height:1.2;letter-spacing:-.022em;margin:52px 0 14px;font-weight:660}
h2{font-size:21px;letter-spacing:-.015em;margin:52px 0 8px;font-weight:620}
h3{font-size:16.5px;margin:30px 0 6px;font-weight:600}
p{margin:0 0 16px;color:var(--fg2)}
.lede{font-size:18px;color:var(--fg2);margin-bottom:26px}
a{color:var(--s1)}
code{font:13.5px ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--code);
     padding:2px 5px;border-radius:4px}
pre{background:var(--code);padding:14px 16px;border-radius:9px;overflow-x:auto;
    font:13.5px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;margin:0 0 18px}
pre code{background:none;padding:0}
table{border-collapse:collapse;width:100%;font-size:14.5px;margin:0 0 18px;display:block;overflow-x:auto}
th,td{text-align:right;padding:7px 12px;border-bottom:1px solid var(--line);white-space:nowrap}
th:first-child,td:first-child{text-align:left}
th{color:var(--fg3);font-weight:520}
.src{color:var(--fg3);font-size:13px;margin:6px 0 0}
.pillar{border-top:1px solid var(--line);padding-top:34px;margin-top:46px}
.product-shot{margin:30px 0 42px}
.product-shot img{display:block;width:100%;height:auto;border:1px solid var(--line);
                  border-radius:8px;background:var(--code);box-shadow:0 12px 34px rgba(0,0,0,.08)}
.product-shot figcaption{margin-top:9px;color:var(--fg3);font-size:12.5px;line-height:1.5}
.product-shot-wide{width:min(1080px,calc(100vw - 32px));margin-left:50%;
                   transform:translateX(-50%)}
.product-shot-portrait{max-width:560px;margin-left:auto;margin-right:auto}
.game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;
           margin:18px 0 36px;border-top:1px solid var(--line)}
.game-grid section{padding:24px 0 20px;border-bottom:1px solid var(--line)}
.game-grid h2{margin:0 0 7px;font-size:18px}
.game-grid p{font-size:14px;line-height:1.58}
.game-grid .src{font-size:12.5px;margin-top:10px}
.section-kicker{margin:0 0 3px;color:var(--s2);font-size:12.5px;font-weight:650;
                text-transform:uppercase}
.section-kicker+h2{margin-top:0}
.btn{display:inline-block;background:var(--s1);color:#fff;text-decoration:none;
     padding:11px 22px;border-radius:9px;font-weight:580;font-size:15.5px}
.btn:hover{opacity:.9}
.btn.ghost{background:none;color:var(--s1);border:1px solid var(--line)}
.hero-sub{color:var(--fg3);font-size:14.5px;margin:18px 0 0}
footer{border-top:1px solid var(--line);margin-top:72px;padding:26px 0 46px;
       color:var(--fg3);font-size:13.5px}
footer a{color:var(--fg2)}
.postlist{list-style:none;padding:0}
.postlist li{padding:14px 0;border-bottom:1px solid var(--line)}
.postlist .d{color:var(--fg3);font-size:13px}
.lang-switch{font-size:14px;margin:-4px 0 28px;color:var(--fg3)}
.lang-switch b{color:var(--fg);font-weight:600}

/* Mobile navigation keeps all five destinations available down to 320px. */
@media (max-width: 560px){
  .wrap{padding:0 16px}
  nav .wrap{gap:8px;height:52px}
  nav a{font-size:12.5px}
  nav .t9{display:none}
  nav .cta{padding:5px 8px}
  h1{font-size:27px;margin:36px 0 12px}
  h2{font-size:19px;margin:38px 0 8px}
  .lede{font-size:16.5px}
  .btn{padding:10px 18px;font-size:15px}
  .pillar{padding-top:26px;margin-top:34px}
  .product-shot{margin:24px 0 32px}
  .product-shot-wide{width:100%;margin-left:0;transform:none}
  .product-shot figcaption{font-size:11.5px}
  .game-grid{grid-template-columns:1fr;gap:0}
  .game-grid section{padding:20px 0 16px}
  footer{margin-top:52px}
  main table{display:table;overflow:visible;font-size:13px}
  main th,main td{white-space:normal;padding:6px 7px;vertical-align:top}
  .src{overflow-wrap:anywhere}
}

/* Tempo9 mark: a metronome — the object the product is named after, and the
   thing it claims to do (hold a steady tempo while several agents lean on it).
   OUTLINED, not solid: filled versions collapse into a dark blob at 16-24px
   and the pendulum disappears into the mass, which is exactly the size the nav
   uses.  Sized in em so it tracks the text beside it; currentColor keeps it
   right in both themes with no second definition. */
.t9{width:1.2em;height:1.2em;vertical-align:-.22em;margin-right:.4em;color:currentColor;flex:none}
.wordmark{font-size:14.5px;font-weight:600;letter-spacing:.01em;color:var(--fg2);
          margin:44px 0 0;display:flex;align-items:center}
.wordmark .t9{color:var(--fg)}
nav .t9{margin-right:.32em}

/* The pendulum swings at 208 bpm -- PRESTISSIMO, the top marking on the
   physical metronome this mark is drawn from.  A metronome ticks at each END
   of the swing, so one tick = one half-swing = 60/208 = 288.5ms, and a full
   there-and-back is 577ms.
   The duration below is 288.5ms, NOT 577ms: with `alternate`, the declared
   duration is ONE direction, so .577s ran the whole thing at half speed.
   The pivot is the BOTTOM of the rod, not the centre of the glyph, so the
   origin is given in view-box units rather than a percentage.
   The ANIMATED rod is drawn VERTICAL.  The static mark's rod leans 9.1 deg
   right, and rotating that by +/-9 swung it from 0.1 to 18.2 deg -- entirely
   on one side, which reads as a flick rather than a pendulum.  Drawn upright,
   +/-9.1 makes the swing symmetric AND puts the static mark exactly at the
   right-hand extreme, so the logo is one frame of its own animation.
   Only the wordmark and the home card animate; the nav mark stays still,
   because it is on every page and motion in the page chrome is a distraction
   rather than a detail. */
.rod{transform-box:view-box;transform-origin:12px 19.8px;
     animation:t9swing .2885s ease-in-out infinite alternate}
@keyframes t9swing{from{transform:rotate(-9.1deg)}to{transform:rotate(9.1deg)}}
/* A fast-swinging element is the exact case this setting exists for. */
@media (prefers-reduced-motion: reduce){.rod{animation:none}}

/* Colophon. A flex row, NOT a float: the photo is a tall portrait next to three
   lines of text, and a float that much taller than its paragraph escapes the
   section and rides down through the footer. Flex gives the row a real height.
   width/height on the tag so the text does not reflow when the image loads. */
.colophon{display:flex;gap:24px;align-items:flex-start}
.colophon img{width:124px;height:auto;border-radius:8px;flex:none;order:2}
.colophon p{margin:0}
@media (max-width:560px){.colophon{gap:18px}.colophon img{width:96px}}

/* One headline result, supported by the two measurements that make it a
   runtime story rather than a single-stream benchmark. */
.hero-proof{display:grid;grid-template-columns:1.15fr .85fr;margin:26px 0 20px;
            border-top:3px solid var(--s1);border-bottom:1px solid var(--line)}
.hero-proof-primary{padding:17px 22px 17px 0}
.hero-proof-primary>span{display:block;color:var(--fg3);font-size:11.5px;
                         font-weight:620;text-transform:uppercase}
.hero-proof-primary>strong{display:block;color:var(--s1);font-size:43px;
                           line-height:1.05;font-variant-numeric:tabular-nums;
                           margin:6px 0 5px}
.hero-proof-primary small{font-size:.47em;color:var(--fg);font-weight:650}
.hero-proof-primary>b{display:block;color:var(--fg2);font-size:13px;font-weight:560}
.hero-proof>*{min-width:0}
.hero-proof-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-left:1px solid var(--line)}
.hero-proof-support>div{padding:22px 0 17px 18px}
.hero-proof-support>div+div{border-left:1px solid var(--line)}
.hero-proof-support strong{display:block;color:var(--fg);font-size:19px;line-height:1.25;
                           font-variant-numeric:tabular-nums}
.hero-proof-support span{display:block;color:var(--fg3);font-size:11.5px;
                         line-height:1.45;margin-top:4px;padding-right:8px}
@media (max-width:560px){
  .hero-proof{grid-template-columns:1fr;margin:22px 0 18px}
  .hero-proof-primary{padding:14px 0}
  .hero-proof-primary>strong{font-size:38px}
  .hero-proof-support{border-left:0;border-top:1px solid var(--line)}
  .hero-proof-support>div{padding:12px 8px 12px 0}
  .hero-proof-support>div+div{padding-left:12px}
  .hero-proof-support strong{font-size:17px}
  .hero-proof-support span{font-size:10.5px}
}

/* Figure container. NOT .wrap -- that is the page container (780px + padding)
   and nesting it re-applies both. */
.fig{overflow-x:auto;margin:20px 0 4px}
.fig svg[viewBox="0 0 780 350"] .vlm-prefill-ghost{opacity:.16}

/* The placement comparison explains the result before the scheduling timeline
   explains the mechanism. Both cases share a time grid so interruption and
   overlap can be read without relying on the throughput numbers. */
.placement-compare{margin:24px 0 38px;border-top:3px solid var(--s1);
                   border-bottom:1px solid var(--line)}
.placement-compare-head{display:flex;align-items:flex-end;justify-content:space-between;
                        gap:24px;padding:16px 0 18px}
.placement-compare-head span{display:block;color:var(--fg3);font-size:11.5px;
                             font-weight:620;text-transform:uppercase}
.placement-compare-head b{display:block;margin-top:4px;color:var(--fg);
                          font-size:17px;line-height:1.35}
.placement-compare-head>strong{color:var(--s1);font-size:34px;line-height:1;
                               font-variant-numeric:tabular-nums;text-align:right}
.placement-compare-head small{display:block;margin-top:4px;color:var(--fg3);
                              font-size:10.5px;font-weight:560;white-space:nowrap}
.placement-cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                 border-top:1px solid var(--line)}
.placement-case{min-width:0;padding:18px 22px 16px 0}
.placement-case+.placement-case{padding-left:22px;border-left:1px solid var(--line)}
.placement-case header{display:flex;align-items:baseline;justify-content:space-between;
                       gap:12px;margin-bottom:15px}
.placement-case header b{font-size:14px;font-weight:650}
.placement-case header strong{color:var(--s2);font-size:17px;white-space:nowrap;
                              font-variant-numeric:tabular-nums}
.placement-case.parallel header strong{color:var(--s1)}
.placement-lanes{display:grid;grid-template-columns:35px minmax(0,1fr);gap:7px 8px;
                 align-items:center}
.placement-lanes .hardware{color:var(--fg3);font-size:10.5px;font-weight:650}
.placement-track{display:grid;grid-template-columns:1fr .68fr 1fr;height:28px;
                 overflow:hidden;background:var(--code);border-radius:4px}
.placement-block,.placement-idle{display:flex;align-items:center;justify-content:center;
                                 min-width:0;font-size:9px;white-space:nowrap}
.placement-block.decode{background:var(--s1);color:#fff}
.placement-block.vision{background:var(--s2);color:#fff}
.placement-idle{color:var(--fg3)}
.placement-track .span-all{grid-column:1/-1}
.placement-case p{margin:13px 0 0;color:var(--fg3);font-size:11.5px;line-height:1.5}
.placement-foot{margin:0;padding:12px 0 14px;border-top:1px solid var(--line);
                color:var(--fg3);font-size:11.5px;line-height:1.5}
.diagram-title{margin:0 0 8px;font-size:15px;color:var(--fg);font-weight:650}

@media (max-width:560px){
  .placement-compare{margin:20px 0 30px}
  .placement-compare-head{align-items:center;gap:14px;padding:13px 0 15px}
  .placement-compare-head b{font-size:14px}
  .placement-compare-head>strong{font-size:27px}
  .placement-cases{grid-template-columns:1fr}
  .placement-case{padding:15px 0}
  .placement-case+.placement-case{padding:15px 0;border-left:0;border-top:1px solid var(--line)}
  .placement-case header{margin-bottom:11px}
  .placement-block,.placement-idle{font-size:8.5px}
}

/* VLM timeline: batch N is already decoding. N+1, N+2, and N+3 are prepared
   on the NPU and join one uninterrupted GPU decode loop. */
@media (prefers-reduced-motion: no-preference){
  .fig svg[viewBox="0 0 780 350"] rect[fill="var(--s2)"][opacity=".9"]{
    animation-duration:6.6s;animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;animation-fill-mode:both;
    will-change:opacity,filter}
  .fig svg[viewBox="0 0 780 350"] rect[fill="none"][stroke="var(--s2)"]{
    animation-duration:6.6s;animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;animation-fill-mode:both;
    will-change:opacity}
  .fig svg[viewBox="0 0 780 350"] .vlm-gpu-progress{
    animation-name:vlm-gpu-progress,vlm-gpu-flow;
    animation-duration:6.6s,.72s;
    animation-timing-function:linear,linear;
    animation-iteration-count:infinite;
    animation-fill-mode:both;
    will-change:opacity,filter,stroke-dashoffset}
  .fig svg[viewBox="0 0 780 350"] .vlm-handoff{
    stroke-dasharray:4 4;animation-duration:6.6s;
    animation-timing-function:ease-in-out;animation-iteration-count:infinite;
    animation-fill-mode:both;
    will-change:opacity,stroke-dashoffset}
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-progress{
    animation-duration:6.6s;animation-timing-function:linear;
    animation-iteration-count:infinite;animation-fill-mode:both}
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-label{
    animation-duration:6.6s;animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;animation-fill-mode:both}
  .fig svg[viewBox="0 0 780 350"] .vlm-decode-label:not(.step-0){
    animation-duration:6.6s;animation-timing-function:ease-in-out;
    animation-iteration-count:infinite;animation-fill-mode:both}
  .fig svg[viewBox="0 0 780 350"] .vlm-playhead{
    animation:vlm-playhead 6.6s linear infinite both;
    will-change:transform,opacity}
  .fig svg[viewBox="0 0 780 350"] text[y="205"],
  .fig svg[viewBox="0 0 780 350"] text[y="221"]{
    animation:vlm-overlap-note 6.6s ease-in-out infinite both}

  .fig svg[viewBox="0 0 780 350"] rect[x="118"][fill="none"],
  .fig svg[viewBox="0 0 780 350"] rect[x="177"][fill="var(--s2)"]{animation-name:vlm-stage-1}
  .fig svg[viewBox="0 0 780 350"] rect[x="288"][fill="none"],
  .fig svg[viewBox="0 0 780 350"] rect[x="341"][fill="var(--s2)"]{animation-name:vlm-stage-2}
  .fig svg[viewBox="0 0 780 350"] rect[x="440"][fill="none"],
  .fig svg[viewBox="0 0 780 350"] rect[x="501"][fill="var(--s2)"]{animation-name:vlm-stage-3}

  .fig svg[viewBox="0 0 780 350"] .vlm-handoff.step-1{animation-name:vlm-handoff-1}
  .fig svg[viewBox="0 0 780 350"] .vlm-handoff.step-2{animation-name:vlm-handoff-2}
  .fig svg[viewBox="0 0 780 350"] .vlm-handoff.step-3{animation-name:vlm-handoff-3}
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-progress.step-1,
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-label.step-1{animation-name:vlm-prefill-1}
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-progress.step-2,
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-label.step-2{animation-name:vlm-prefill-2}
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-progress.step-3,
  .fig svg[viewBox="0 0 780 350"] .vlm-prefill-label.step-3{animation-name:vlm-prefill-3}
  .fig svg[viewBox="0 0 780 350"] .vlm-decode-label.step-1{animation-name:vlm-decode-1}
  .fig svg[viewBox="0 0 780 350"] .vlm-decode-label.step-2{animation-name:vlm-decode-2}
  .fig svg[viewBox="0 0 780 350"] .vlm-decode-label.step-3{animation-name:vlm-decode-3}
}
@keyframes vlm-stage-1{
  0%{opacity:.25;filter:none}4%,18%{opacity:1;filter:drop-shadow(0 0 3px var(--s2))}23%,100%{opacity:.25;filter:none}}
@keyframes vlm-stage-2{
  0%,24%{opacity:.25;filter:none}29%,43%{opacity:1;filter:drop-shadow(0 0 3px var(--s2))}48%,100%{opacity:.25;filter:none}}
@keyframes vlm-stage-3{
  0%,49%{opacity:.25;filter:none}54%,68%{opacity:1;filter:drop-shadow(0 0 3px var(--s2))}73%,100%{opacity:.25;filter:none}}
@keyframes vlm-gpu-flow{
  from{stroke-dashoffset:0}
  to{stroke-dashoffset:-32}}
@keyframes vlm-gpu-progress{
  0%{width:45px;opacity:.82}
  90%{width:641px;opacity:.82}
  96%{width:641px;opacity:0}
  97%,100%{width:45px;opacity:0}}
@keyframes vlm-handoff-1{0%,9%{opacity:.16;stroke-dashoffset:12}14%,22%{opacity:1;stroke-dashoffset:0}27%,100%{opacity:.16;stroke-dashoffset:-12}}
@keyframes vlm-handoff-2{0%,34%{opacity:.16;stroke-dashoffset:12}39%,47%{opacity:1;stroke-dashoffset:0}52%,100%{opacity:.16;stroke-dashoffset:-12}}
@keyframes vlm-handoff-3{0%,59%{opacity:.16;stroke-dashoffset:12}64%,72%{opacity:1;stroke-dashoffset:0}77%,100%{opacity:.16;stroke-dashoffset:-12}}
@keyframes vlm-prefill-1{0%,18%{width:0;opacity:.18;filter:none}28.5%{width:70px;opacity:1;filter:drop-shadow(0 0 3px var(--s1))}34%,90%{width:70px;opacity:.62;filter:none}96%{width:70px;opacity:0}97%{width:0;opacity:0}100%{width:0;opacity:.18}}
@keyframes vlm-prefill-2{0%,41%{width:0;opacity:.18;filter:none}51.5%{width:70px;opacity:1;filter:drop-shadow(0 0 3px var(--s1))}57%,90%{width:70px;opacity:.62;filter:none}96%{width:70px;opacity:0}97%{width:0;opacity:0}100%{width:0;opacity:.18}}
@keyframes vlm-prefill-3{0%,68.5%{width:0;opacity:.18;filter:none}79%{width:70px;opacity:1;filter:drop-shadow(0 0 3px var(--s1))}84%,90%{width:70px;opacity:.62;filter:none}96%{width:70px;opacity:0}97%{width:0;opacity:0}100%{width:0;opacity:.18}}
@keyframes vlm-decode-1{0%,28.5%{opacity:0}34%,90%{opacity:.92}96%,100%{opacity:0}}
@keyframes vlm-decode-2{0%,51.5%{opacity:0}57%,90%{opacity:.92}96%,100%{opacity:0}}
@keyframes vlm-decode-3{0%,79%{opacity:0}84%,90%{opacity:.92}96%,100%{opacity:0}}
@keyframes vlm-overlap-note{
  0%,50%{opacity:0}
  54%,70%{opacity:1}
  76%,100%{opacity:0}}
@keyframes vlm-playhead{
  0%{opacity:.7;transform:translateX(0)}
  90%{opacity:.7;transform:translateX(596px)}
  96%{opacity:0;transform:translateX(596px)}
  97%,100%{opacity:0;transform:translateX(0)}}

/* Evidence figures keep the article's plain-paper rhythm while giving one
   measured result enough hierarchy to scan. Values stay in the DOM; the bars
   are explanatory, not the only way to read the data. */
.evidence{margin:24px 0 20px;padding:22px 0;border-top:1px solid var(--line);
          border-bottom:1px solid var(--line)}
.evidence-kicker{margin:0 0 4px;color:var(--fg3);font-size:12.5px;
                 font-weight:620;text-transform:uppercase}
.evidence-headline{margin:0 0 18px;color:var(--fg);font-size:28px;line-height:1.2;
                   font-weight:680}
.evidence-headline strong{color:var(--s1);font-size:1.22em}
.chart-note{margin:15px 0 0;color:var(--fg3);font-size:12.5px;line-height:1.55}
.bar-row{display:grid;grid-template-columns:118px minmax(80px,1fr) 104px;
         gap:12px;align-items:center;margin:10px 0}
.bar-label{color:var(--fg2);font-size:13.5px;font-weight:560}
.bar-track{height:14px;background:var(--code);border-radius:4px;overflow:hidden}
.bar-fill{display:block;width:var(--w);height:100%;background:var(--s1);
          border-radius:4px;min-width:3px}
.bar-fill.compare{background:var(--fg3);opacity:.58}
.bar-fill.warn{background:var(--s2)}
.bar-value{color:var(--fg);font-size:13.5px;font-variant-numeric:tabular-nums;
           white-space:nowrap;text-align:right}
.range-axis{display:grid;grid-template-columns:96px 1fr 104px;gap:12px;
            margin-bottom:5px;color:var(--fg3);font-size:11px}
.range-axis-scale{display:flex;justify-content:space-between}
.range-metric{margin:17px 0 7px;color:var(--fg);font-size:13.5px;font-weight:620}
.range-row{display:grid;grid-template-columns:96px minmax(100px,1fr) 104px;
           gap:12px;align-items:center;margin:8px 0}
.range-label{color:var(--fg2);font-size:12.5px}
.range-track{height:16px;position:relative;border-bottom:1px solid var(--line);
             background:linear-gradient(to right,transparent 24.8%,var(--line) 25%,transparent 25.2%,transparent 49.8%,var(--line) 50%,transparent 50.2%,transparent 74.8%,var(--line) 75%,transparent 75.2%)}
.range-segment{position:absolute;left:var(--from);width:max(var(--span),7px);height:8px;
               top:4px;background:var(--s1);border-radius:4px}
.range-segment.compare{background:var(--fg3);opacity:.68}
.range-value{font-size:12px;color:var(--fg2);white-space:nowrap;text-align:right;
             font-variant-numeric:tabular-nums}
.kv-panels{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.kv-panel+ .kv-panel{border-left:1px solid var(--line);padding-left:28px}
.kv-panel h3{margin:0 0 4px;font-size:15px}
.kv-panel .bar-row{grid-template-columns:60px minmax(60px,1fr) 88px;gap:8px;margin:7px 0}
.kv-panel .bar-label,.kv-panel .bar-value{font-size:11.5px}
.kv-group{margin:14px 0}
.kv-group-title{font-size:12px;color:var(--fg);font-weight:620;margin-bottom:3px}
.binary-result{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:18px 0}
.binary-result>div{border-top:2px solid var(--s1);padding-top:10px}
.binary-result>div:last-child{border-color:var(--s2)}
.binary-result b{display:block;color:var(--fg);font-size:18px}
.binary-result span{display:block;color:var(--fg3);font-size:12.5px;margin-top:2px}
.score-pair{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:20px 0}
.score-pair>div{border-top:1px solid var(--line);padding-top:12px}
.score-pair strong{display:block;color:var(--s1);font-size:30px;line-height:1.1}
.score-pair span{display:block;color:var(--fg2);font-size:13px;margin-top:4px}
.score-detail summary{cursor:pointer;color:var(--fg2);font-size:13.5px;font-weight:560}

/* The measurements page uses the product page's visual language, with dense
   provenance kept at the end instead of competing with each result. */
.benchmark-page .wordmark{margin-top:44px}
.benchmark-page>h1{margin-top:12px}
.benchmark-scope{display:flex;flex-wrap:wrap;gap:7px 22px;margin:28px 0 0;
                 padding:12px 0;border-top:1px solid var(--line);
                 border-bottom:1px solid var(--line);color:var(--fg3);font-size:12.5px}
.benchmark-scope b{color:var(--fg2);font-weight:620;margin-right:4px}
.benchmark-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
                   margin:32px 0 8px;border-top:3px solid var(--s1)}
.benchmark-summary>div{padding:17px 20px 18px 0;border-bottom:1px solid var(--line)}
.benchmark-summary>div:nth-child(even){padding-left:22px;border-left:1px solid var(--line)}
.benchmark-summary strong{display:block;color:var(--s1);font-size:27px;line-height:1.15;
                          font-variant-numeric:tabular-nums}
.benchmark-summary span{display:block;color:var(--fg3);font-size:12px;line-height:1.45;
                        margin-top:5px;max-width:245px}
.measurement-note{font-size:13.5px;color:var(--fg3);margin-top:18px}
.report-ref{font-size:12.5px;color:var(--fg3);margin-top:10px;overflow-wrap:anywhere}
.report-ref code{font-size:11.5px}
.compact-evidence .bar-row{grid-template-columns:130px minmax(90px,1fr) 104px}
.vlm-table{display:table;overflow:visible}
.method-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;
             margin:20px 0 12px;border-top:1px solid var(--line)}
.method-grid>div{padding:15px 0 2px;border-bottom:1px solid var(--line)}
.method-grid h3{margin:0 0 4px;font-size:14px}
.method-grid p{font-size:13px;color:var(--fg3);line-height:1.55}

/* Public architecture names are deliberately long. Keep the documentation-style
   table readable without abbreviating names back into private GGUF identifiers. */
.model-table{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-bottom:18px}
.model-table table{display:table;overflow:visible;table-layout:fixed;min-width:700px;
                   margin-bottom:0}
.model-table th:nth-child(1){width:45%}
.model-table th:nth-child(2){width:20%}
.model-table th:nth-child(3){width:35%}
.model-table th,.model-table td{text-align:left;vertical-align:top;white-space:normal;
                                line-height:1.45}
.model-table code{font-size:12px;white-space:nowrap}

.resource-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px;
               margin:10px 0 24px}
.resource-list a{display:block;border-top:1px solid var(--line);padding:12px 0 13px;
                 color:var(--fg);text-decoration:none}
.resource-list a:hover b{color:var(--s1)}
.resource-list b{display:block;font-size:14.5px;font-weight:610}
.resource-list span{display:block;color:var(--fg3);font-size:12.5px;line-height:1.45;
                    margin-top:2px}

@media (max-width:560px){
  .evidence{padding:18px 0}
  .evidence-headline{font-size:23px}
  .fig svg{min-width:680px}
  .bar-row{grid-template-columns:88px minmax(54px,1fr) 80px;gap:8px}
  .bar-label,.bar-value{font-size:12px}
  .range-axis,.range-row{grid-template-columns:74px minmax(70px,1fr) 82px;gap:7px}
  .range-label,.range-value{font-size:11px}
  .kv-panels{grid-template-columns:1fr;gap:24px}
  .kv-panel+ .kv-panel{border-left:0;border-top:1px solid var(--line);padding:22px 0 0}
  .binary-result,.score-pair{gap:16px}
  .model-table{overflow:visible}
  .model-table table,.model-table tbody,.model-table tr,.model-table td{
    display:block;width:100%}
  .model-table table{min-width:0}
  .model-table thead{display:none}
  .model-table tr{padding:10px 0;border-bottom:1px solid var(--line)}
  .model-table td{border:0;padding:3px 0;font-size:12.5px}
  .model-table td::before{display:block;color:var(--fg3);font-size:10.5px;
    font-weight:560;line-height:1.3;margin-bottom:1px}
  .model-table.zh td:nth-child(1)::before{content:"架构"}
  .model-table.zh td:nth-child(2)::before{content:"模型系列"}
  .model-table.zh td:nth-child(3)::before{content:"已验证示例"}
  .model-table.en td:nth-child(1)::before{content:"Architecture"}
  .model-table.en td:nth-child(2)::before{content:"Models"}
  .model-table.en td:nth-child(3)::before{content:"Tested examples"}
  .model-table code{font-size:11.5px;padding:1px 3px}
  .resource-list{grid-template-columns:1fr;gap:0}
  .benchmark-scope{display:grid;grid-template-columns:1fr;gap:3px;padding:10px 0}
  .benchmark-summary{margin-top:24px}
  .benchmark-summary>div{padding:13px 10px 14px 0}
  .benchmark-summary>div:nth-child(even){padding-left:12px}
  .benchmark-summary strong{font-size:21px}
  .benchmark-summary span{font-size:10.5px}
  .compact-evidence .bar-row{grid-template-columns:88px minmax(54px,1fr) 80px}
  .vlm-table{font-size:12px}
  .method-grid{grid-template-columns:1fr;gap:0}
}

/* Feature comparison: the default table is nowrap + scroll, which is right
   for columns of numbers and wrong for a grid of sentences. */
.cmp{overflow-x:auto;-webkit-overflow-scrolling:touch}
.cmp table{display:table;overflow:visible}
.cmp table td,.cmp table th{white-space:normal;text-align:left;vertical-align:top;line-height:1.45}
.cmp table td:not(:first-child){font-size:13.5px;color:var(--fg2)}
.cmp table td:first-child{max-width:230px}
.cmp table td strong{color:var(--fg)}
.audit{margin-top:16px}
.audit summary{cursor:pointer;color:var(--fg2);font-size:14px;font-weight:560}
.audit[open] summary{margin-bottom:12px}
@media (max-width:560px){
  .cmp{overflow:visible}
  .cmp table,.cmp tbody,.cmp tr,.cmp td{display:block;width:100%}
  .cmp table{min-width:0}
  .cmp thead{display:none}
  .cmp tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
          column-gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
  .cmp table td{border:0;padding:4px 0;max-width:none}
  .cmp table td:first-child{grid-column:1/-1;color:var(--fg);font-weight:600;
                            padding:0 0 7px}
  .cmp table td:not(:first-child)::before{display:block;color:var(--fg3);
      font-size:11px;font-weight:560;line-height:1.3;margin-bottom:2px}
  .cmp table td:nth-child(2)::before{content:"Tempo9"}
  .cmp table td:nth-child(3)::before{content:"llama.cpp b10566"}
  .cmp table td:nth-child(4)::before{content:"MLX 0.32.2"}
  .cmp table td:nth-child(5)::before{content:"oMLX 0.6.4"}
}