/* Porównywarka: pojedynek na slajdach 16:9 + macierz danych. */
:root {
  --vx-s0:#8a94a3; --vx-s1:#2a78d6; --vx-s2:#eb6834; --vx-s3:#1baf7a; --vx-s4:#eda100;
  --vx-s5:#e87ba4; --vx-s6:#008300; --vx-s7:#4a3aa7; --vx-s8:#e34948; --vx-alt:var(--vx-s8);
}
html.dark, .vx-slide {
  --vx-s0:#6b7686; --vx-s1:#3987e5; --vx-s2:#d95926; --vx-s3:#199e70; --vx-s4:#c98500;
  --vx-s5:#d55181; --vx-s6:#008300; --vx-s7:#9085e9; --vx-s8:#e66767;
}
#view-values { display:none; flex:1; min-width:0; height:100%; overflow:auto; background:var(--bg); }
.vx-shell { max-width:1800px; margin:auto; padding:26px 30px 18px; }
.vx-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:18px; }
.vx-eyebrow { font:500 10px var(--mono); letter-spacing:.15em; text-transform:uppercase; color:var(--dim); }
.vx-heading h1 { font:600 clamp(25px,3vw,40px)/1.05 var(--display); letter-spacing:-.03em; margin:8px 0; color:var(--ink); }
.vx-heading p { color:var(--dim); font-size:12px; margin:0; max-width:640px; }
.vx-count { font:500 11px/1.7 var(--mono); text-align:right; color:var(--dim); white-space:nowrap; }
.vx-count b { color:var(--ink); font-size:16px; }

/* Wybór pojedynku i zakresu */
.vx-controls { padding:16px 18px; }
.vx-duel-pick { display:grid; grid-template-columns:1fr auto 1fr; gap:14px; align-items:end; }
.vx-duel-side { display:grid; gap:6px; min-width:0; }
.vx-duel-side>span { font:500 10px var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--dim); }
.vx-duel-side select { width:100%; height:38px; font:600 13px var(--sans); }
.vx-swap { width:38px; height:38px; border-radius:50%; border:1px solid var(--line-strong); background:var(--panel-2); color:var(--ink); font:700 12px var(--display); cursor:pointer; transition:transform .25s; }
.vx-swap:hover { transform:rotate(180deg); border-color:var(--mint); }
.vx-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:16px 0 0; }
.vx-scope { display:flex; gap:8px; align-items:center; color:var(--dim); font:10px var(--mono); }
.vx-scope .model-select { min-width:210px; font-size:11px; }
.vx-tasknav { display:flex; gap:5px; align-items:center; overflow-x:auto; padding:12px 0 2px; }
.vx-tasknav button { border:1px solid var(--line-strong); background:var(--panel); color:var(--dim); font:500 11px var(--sans); padding:7px 11px; white-space:nowrap; cursor:pointer; border-radius:3px; }
.vx-tasknav button.on { color:var(--mint-ink); background:var(--mint); border-color:var(--mint); }
.vx-variants { margin-top:14px; border-top:1px solid var(--line); padding-top:10px; color:var(--dim); font-size:11px; }
.vx-variants>summary { cursor:pointer; padding:3px 0; font-weight:500; }
.vx-variants>summary span { font:10px var(--mono); color:var(--mint); margin-left:8px; }
.vx-control-head { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:12px 0 10px; }
.vx-control-head>div { display:flex; gap:6px; }
.vx-search { display:flex; gap:8px; align-items:center; width:280px; padding:7px 10px; background:var(--panel-2); border:1px solid var(--line); color:var(--dim); }
.vx-search input { border:0; outline:0; color:var(--ink); font:12px var(--sans); background:transparent; min-width:0; flex:1; }
.vx-models { display:flex; flex-wrap:wrap; gap:5px; max-height:130px; overflow:auto; }
.vx-model-button { display:inline-flex; align-items:center; gap:7px; border:1px solid var(--line-strong); border-radius:3px; background:var(--panel); color:var(--dim); padding:6px 10px; font:500 11px var(--sans); cursor:pointer; }
.vx-model-button small { font:10px var(--mono); opacity:.6; }
.vx-model-button .vx-swatch { width:8px; height:8px; border-radius:50%; border:1px solid var(--line-strong); }
.vx-model-button.on { color:var(--ink); border-color:var(--series); background:color-mix(in srgb,var(--series) 8%,var(--panel)); }
.vx-model-button.on .vx-swatch { background:var(--series); border-color:var(--series); }
.vx-model-button:hover { background:var(--panel-2); }
.vx-variants-label { margin:12px 0 0; font:500 10px var(--mono); letter-spacing:.08em; text-transform:uppercase; }
#vxVariants { display:flex; flex-wrap:wrap; gap:7px 10px; padding:8px 0 2px; }
.vx-variant { display:flex; gap:6px; align-items:center; padding:5px 8px; background:var(--panel-2); font-size:11px; }
.vx-variant input { accent-color:var(--mint); }
.vx-variant small { color:var(--dim); font:9px var(--mono); }
.vx-note { font-size:11px; color:var(--dim); line-height:1.6; margin:12px 0 14px; }
.vx-effort { display:inline-block; font:500 .78em/1.4 var(--mono); padding:0 .5em; margin-right:.6em; border:1px solid currentColor; border-radius:3px; opacity:.85; font-style:normal; }

/* Talia slajdów */
.vx-deck { margin-bottom:22px; }
.vx-decknav { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.vx-deck-tabs { display:flex; gap:4px; overflow-x:auto; }
.vx-deck-tabs button { display:flex; align-items:center; gap:7px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--dim); font:500 12px var(--sans); padding:7px 10px; cursor:pointer; white-space:nowrap; }
.vx-deck-tabs button span { font:500 10px var(--mono); color:var(--dim); }
.vx-deck-tabs button:hover { color:var(--ink); }
.vx-deck-tabs button.on { color:var(--ink); border-bottom-color:var(--mint); font-weight:600; }
.vx-deck-actions { display:flex; gap:6px; align-items:center; }
.vx-deck-count { font:500 11px var(--mono); color:var(--dim); min-width:42px; text-align:center; }
.vx-slides.is-deck .vx-slide { display:none; width:min(100%,calc((100vh - 130px)*16/9)); margin:0 auto; }
.vx-slides.is-deck .vx-slide.is-active { display:grid; }
.vx-slides.is-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,540px),1fr)); gap:16px; }
.vx-slides.is-grid .vx-slide { cursor:pointer; transition:outline-color .2s, transform .2s; outline:2px solid transparent; outline-offset:3px; }
.vx-slides.is-grid .vx-slide:hover, .vx-slides.is-grid .vx-slide:focus-visible { outline-color:var(--mint); }
.vx-slides.is-grid .vx-slide * { pointer-events:none; }
.vx-stage:fullscreen { background:#000; display:flex; align-items:center; justify-content:center; }
.vx-stage:fullscreen .vx-slides { width:100%; }
.vx-stage:fullscreen .vx-slide.is-active { width:min(100vw,calc(100vh*16/9)); border-radius:0; box-shadow:none; }
.vx-fs-hint { display:none; }
.vx-stage:fullscreen .vx-fs-hint { display:block; position:fixed; bottom:24px; left:50%; transform:translateX(-50%); padding:8px 14px; border-radius:4px; background:#000c; color:#cfd8e3; font:12px var(--mono); opacity:0; pointer-events:none; }
.vx-stage:fullscreen .vx-fs-hint.show { animation:vxHint 3.2s ease both; }

/* Slajd: zawsze ciemny ekran, cała typografia w cqi */
.vx-slide {
  --sl-bg:#0a0f16; --sl-panel:#121a25; --sl-ink:#eef3f8; --sl-soft:#c3ccd8; --sl-dim:#8693a6; --sl-line:rgba(160,185,215,.13);
  position:relative; aspect-ratio:16/9; container-type:inline-size; overflow:hidden;
  grid-template-rows:auto 1fr auto; padding:3cqi 4cqi 2cqi; border-radius:6px;
  background:radial-gradient(120% 90% at 50% 0%,#131c29 0%,var(--sl-bg) 62%); color:var(--sl-ink);
  box-shadow:0 1px 0 var(--line-strong),0 18px 40px -24px #0009; font-family:var(--sans);
}
.vx-slides.is-grid .vx-slide { display:grid; }
.vx-slide-head { display:flex; flex-direction:column; gap:.5cqi; margin-bottom:1.6cqi; }
.vx-slide-kicker { font:500 1.05cqi var(--mono); letter-spacing:.16em; text-transform:uppercase; color:var(--sl-dim); }
.vx-slide-head h2 { margin:0; font:600 2.8cqi/1.05 var(--display); letter-spacing:-.02em; }
.vx-slide-body { min-height:0; display:flex; flex-direction:column; }
.vx-slide-foot { display:flex; justify-content:space-between; gap:2cqi; padding-top:1.2cqi; margin-top:1.2cqi; border-top:1px solid var(--sl-line); font:.95cqi var(--mono); color:var(--sl-dim); }
.vx-slide .vx-empty { margin:auto; font:1.4cqi/1.6 var(--sans); color:var(--sl-dim); text-align:center; max-width:60%; }
.vx-slide svg text { fill:var(--sl-dim); font-family:var(--mono); font-size:13px; }
.vx-slide .vx-grid { stroke:var(--sl-line); stroke-width:1; }
.vx-slide .vx-axis, .vx-slide .vx-tick { stroke:rgba(160,185,215,.35); stroke-width:1; }
.vx-slide .vx-axis-label { fill:var(--sl-soft); font-size:13px; }

/* 1 · Tytuł */
.vx-slide-title { grid-template-rows:1fr; }
.vx-title-slide { display:flex; flex-direction:column; justify-content:center; align-items:center; gap:3.4cqi; text-align:center; }
.vx-title { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:3.5cqi; width:100%; }
.vx-title-side { display:flex; flex-direction:column; gap:1.4cqi; }
.vx-title-side.a { align-items:flex-end; text-align:right; }
.vx-title-side.b { align-items:flex-start; text-align:left; }
.vx-title-name { font:700 4.6cqi/1.02 var(--display); text-wrap:balance; letter-spacing:-.035em; padding-bottom:1.2cqi; border-bottom:.55cqi solid var(--series); }
.vx-title-meta { font:1.35cqi var(--mono); color:var(--sl-soft); }
.vx-title-vs { font:600 2.2cqi var(--display); color:var(--sl-dim); width:6cqi; height:6cqi; display:grid; place-items:center; border:1px solid var(--sl-line); border-radius:50%; }
.vx-title-sub { margin:0; font:1.3cqi/1.6 var(--sans); color:var(--sl-dim); max-width:70%; }

/* 2 · Karta pojedynku: słupki rosną od środka w obie strony */
.vx-tape { flex:1; display:grid; grid-template-rows:auto; grid-auto-rows:1fr; min-height:0; }
.vx-tape-head { display:grid; grid-template-columns:1fr 24% 1fr; align-items:end; padding-bottom:1.2cqi; margin-bottom:.6cqi; border-bottom:1px solid var(--sl-line); }
.vx-tape-name { font:600 1.9cqi/1.1 var(--display); display:flex; flex-direction:column; gap:.4cqi; }
.vx-tape-name small { font:.95cqi var(--mono); color:var(--sl-dim); }
.vx-tape-name.a { text-align:right; align-items:flex-end; }
.vx-tape-name.a::after, .vx-tape-name.b::after { content:''; width:5cqi; height:.4cqi; margin-top:.5cqi; }
.vx-tape-name.a::after { background:var(--ca); }
.vx-tape-name.b::after { background:var(--cb); }
.vx-tally { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 1cqi; font:700 3.4cqi/1 var(--display); }
.vx-tally b { padding-bottom:.3cqi; border-bottom:.35cqi solid; font-weight:700; }
.vx-tally b.a { border-color:var(--ca); }
.vx-tally b.b { border-color:var(--cb); }
.vx-tally i { color:var(--sl-dim); font-style:normal; }
.vx-tally small { flex-basis:100%; text-align:center; font:500 .9cqi var(--mono); color:var(--sl-dim); margin-top:.7cqi; letter-spacing:.06em; }
.vx-tape-row { display:grid; grid-template-columns:11% 1fr 24% 1fr 11%; align-items:center; gap:1.2cqi; border-bottom:1px solid var(--sl-line); min-height:0; }
.vx-tape-row:last-child { border-bottom:0; }
.vx-tape-val { font:600 1.75cqi var(--display); font-variant-numeric:tabular-nums; color:var(--sl-soft); white-space:nowrap; }
.vx-tape-val.a { text-align:right; }
.vx-tape-val.win { color:var(--sl-ink); }
.vx-tape-val.lose { color:var(--sl-dim); }
.vx-tape-bar { display:flex; height:.95cqi; background:rgba(160,185,215,.08); border-radius:2px; overflow:hidden; }
.vx-tape-bar.a { justify-content:flex-end; }
.vx-tape-bar i { display:block; height:100%; border-radius:2px; }
.vx-tape-bar.a i { background:var(--ca); transform-origin:right; }
.vx-tape-bar.b i { background:var(--cb); transform-origin:left; }
.vx-tape-bar.lose i { opacity:.32; }
.vx-tape-mid { display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25cqi; line-height:1.2; }
.vx-tape-mid b { font:600 1.2cqi var(--sans); }
.vx-tape-mid small { font:400 .8cqi var(--mono); color:var(--sl-dim); margin-left:.5cqi; white-space:nowrap; }
.vx-tape-mid em { font:500 .95cqi var(--mono); font-style:normal; color:var(--sl-soft); }
.vx-tape-row.hero .vx-tape-val { font-size:2.9cqi; }
.vx-tape-row.hero .vx-tape-bar { height:1.5cqi; }
.vx-tape-row.hero .vx-tape-mid b { font-size:1.5cqi; }

/* 3 · Zadanie po zadaniu */
.vx-db-head { display:flex; justify-content:center; gap:4cqi; margin-bottom:1cqi; font:500 1.35cqi var(--sans); color:var(--sl-soft); }
.vx-db-head span { display:flex; align-items:center; gap:.8cqi; }
.vx-db-head b { font:700 2.4cqi var(--display); color:var(--sl-ink); }
.vx-db-head i { width:1.2cqi; height:1.2cqi; border-radius:50%; }
.vx-db-head .a i { background:var(--ca); }
.vx-db-head .b i { background:var(--cb); }
.vx-db-head .tie { color:var(--sl-dim); }
.vx-db { flex:1; width:100%; min-height:0; }
.vx-slide .vx-db-label { fill:var(--sl-ink); font:500 18px var(--sans); }
.vx-db-link { stroke:rgba(160,185,215,.35); stroke-width:3; stroke-linecap:round; }
.vx-db-dot { stroke:var(--sl-bg); stroke-width:3; }
.vx-slide .vx-db-val { fill:var(--sl-dim); font:600 16px var(--display); }
.vx-slide .vx-db-val.win { fill:var(--sl-ink); }
.vx-slide .vx-db-miss { fill:var(--sl-dim); font-size:13px; }

/* 4 · Mapa opłacalności */
.vx-slide-map .vx-slide-body { gap:.8cqi; }
.vx-legend { display:flex; flex-wrap:wrap; gap:.6cqi 1.8cqi; font:1cqi var(--sans); color:var(--sl-dim); }
.vx-legend span { display:flex; align-items:center; gap:.6cqi; }
.vx-legend span.duel { color:var(--sl-ink); font-weight:600; }
.vx-legend i { width:1cqi; height:1cqi; border-radius:50%; }
.vx-legend-front i { width:2cqi !important; height:2px !important; border-radius:0 !important; background:var(--sl-ink); }
.vx-legend-zone i { width:1.6cqi !important; border-radius:2px !important; background:repeating-linear-gradient(45deg,rgba(160,185,215,.45) 0 1px,transparent 1px 4px); border:1px solid var(--sl-line); }
.vx-map-wrap { position:relative; flex:1; min-height:0; }
.vx-map { width:100%; height:100%; display:block; overflow:visible; }
.vx-zone { fill:url(#vxHatch); }
.vx-slide .vx-hatch { stroke:rgba(160,185,215,.16); stroke-width:1.5; }
.vx-stair { fill:none; stroke:var(--sl-ink); stroke-width:2; stroke-dasharray:1; stroke-linejoin:round; opacity:.85; }
.vx-ladder { fill:none; stroke-width:2.5; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:1; }
.vx-ladder.muted { opacity:.28; stroke-width:1.5; }
.vx-pt { stroke:var(--sl-bg); stroke-width:2.5; transform-box:fill-box; transform-origin:center; cursor:help; transition:opacity .2s; }
.vx-pt.muted { opacity:.45; }
.vx-pt.on-front { stroke:var(--sl-ink); stroke-width:2; }
.vx-pt:focus { outline:none; }
.vx-slide .vx-pt-label { fill:var(--sl-soft); font:500 15px var(--sans); paint-order:stroke; stroke:var(--sl-bg); stroke-width:4px; transition:opacity .2s; }
.vx-slide .vx-pt-label.duel { fill:var(--sl-ink); font-weight:600; }
.vx-hot .vx-pt:not(.is-hot), .vx-hot .vx-pt-label:not(.is-hot) { opacity:.18; }
.vx-hot .vx-pt.is-hot { stroke:var(--sl-ink); stroke-width:3; }
.vx-tip { position:absolute; z-index:5; transform:translate(-50%,calc(-100% - 14px)); padding:.8cqi 1cqi; border-radius:4px; background:#05080c; border:1px solid var(--sl-line); color:var(--sl-ink); font:1cqi/1.5 var(--mono); white-space:pre-line; pointer-events:none; box-shadow:0 8px 24px #0008; min-width:16cqi; }
.vx-verdict { margin:0; font:1.15cqi/1.5 var(--sans); color:var(--sl-soft); }

/* 5 · Ranking */
.vx-lb { list-style:none; margin:0; padding:0; display:grid; grid-template-rows:repeat(var(--rows),auto); grid-auto-flow:column; grid-auto-columns:1fr; gap:.2cqi 4cqi; flex:1; align-content:start; min-height:0; }
.vx-lb-row { display:grid; grid-template-columns:2.6cqi 1fr auto; grid-template-areas:"rank name score" ". bar meta"; gap:.25cqi 1.2cqi; align-items:center; padding:.75cqi 1cqi; border-left:.3cqi solid transparent; border-bottom:1px solid var(--sl-line); }
.vx-lb-row.duel { background:rgba(160,185,215,.06); border-left-color:var(--series); }
.vx-lb-row.is-hot { background:rgba(160,185,215,.1); }
.vx-lb-rank { grid-area:rank; font:600 1.15cqi var(--mono); color:var(--sl-dim); }
.vx-lb-name { grid-area:name; min-width:0; display:flex; align-items:baseline; gap:1cqi; white-space:nowrap; overflow:hidden; }
.vx-lb-name b { font:600 1.3cqi var(--sans); overflow:hidden; text-overflow:ellipsis; }
.vx-lb-name small { font:.85cqi var(--mono); color:var(--sl-dim); }
.vx-lb-score { grid-area:score; font:700 1.9cqi var(--display); font-variant-numeric:tabular-nums; text-align:right; }
.vx-lb-bar { grid-area:bar; height:.55cqi; background:rgba(160,185,215,.08); border-radius:2px; overflow:hidden; }
.vx-lb-bar i { display:block; height:100%; background:var(--series); transform-origin:left; border-radius:2px; }
.vx-lb-meta { grid-area:meta; font:.85cqi var(--mono); color:var(--sl-dim); white-space:nowrap; }
.vx-board-foot { margin:1cqi 0 0; font:.9cqi var(--mono); color:var(--sl-dim); }

/* Recenzje (tryb jednego zadania) */
.vx-reviews { flex:1; display:grid; grid-template-columns:1fr 1fr; gap:2.5cqi; min-height:0; }
.vx-review { display:flex; flex-direction:column; gap:.8cqi; padding:1.8cqi 2cqi; border-top:.4cqi solid var(--series); background:var(--sl-panel); border-radius:4px; overflow:hidden; font-size:1.1cqi; color:var(--sl-soft); }
.vx-review header { display:flex; justify-content:space-between; align-items:baseline; gap:1cqi; }
.vx-review header span { font:600 1.5cqi var(--display); color:var(--sl-ink); }
.vx-review header b { font:700 3cqi var(--display); color:var(--sl-ink); }
.vx-review p { margin:0; line-height:1.55; }
.vx-review b { color:var(--sl-ink); font-size:1cqi; }
.vx-review ul { margin:.2cqi 0 .4cqi; padding-left:1.6cqi; line-height:1.5; }
.vx-review .btn { align-self:flex-start; margin-top:auto; }

/* Animacje — odtwarzane przy każdym wejściu na slajd (klasa .play) */
.play .vx-title-side.a { animation:vxInL .9s cubic-bezier(.16,1,.3,1) backwards; }
.play .vx-title-side.b { animation:vxInR .9s cubic-bezier(.16,1,.3,1) backwards; }
.play .vx-title-vs { animation:vxPop .6s .45s cubic-bezier(.34,1.56,.64,1) backwards; }
.play .vx-title-sub, .play .vx-title-slide>.vx-slide-kicker { animation:vxFade .8s .7s backwards; }
.play .vx-slide-head { animation:vxFade .5s backwards; }
.play .vx-tape-head { animation:vxFade .6s .15s backwards; }
.play .vx-tape-row { animation:vxEnter .5s backwards; animation-delay:calc(var(--d)*120ms + 250ms); }
.play .vx-tape-bar i { animation:vxGrow .9s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--d)*120ms + 400ms); }
.play .vx-db-head { animation:vxFade .6s .2s backwards; }
.play .vx-db-row { animation:vxEnter .5s backwards; animation-delay:calc(var(--d)*130ms + 300ms); }
.play .vx-db-link { stroke-dasharray:1000; animation:vxDraw 1.2s ease-out backwards; animation-delay:calc(var(--d)*130ms + 450ms); }
.play .vx-legend { animation:vxFade .5s .1s backwards; }
.play .vx-zone { animation:vxFade .8s 1.3s backwards; }
.play .vx-stair { animation:vxDash 1.2s .9s ease-in-out backwards; }
.play .vx-ladder { animation:vxDash 1s .5s ease-out backwards; }
.play .vx-pt { animation:vxPop .55s cubic-bezier(.34,1.56,.64,1) backwards; animation-delay:calc(var(--d)*45ms + 150ms); }
.play .vx-pt-label, .play .vx-verdict { animation:vxFade .6s 1.7s backwards; }
.play .vx-lb-row { animation:vxEnter .45s backwards; animation-delay:calc(var(--d)*70ms + 200ms); }
.play .vx-lb-bar i { animation:vxGrow .8s cubic-bezier(.16,1,.3,1) backwards; animation-delay:calc(var(--d)*70ms + 350ms); }
.play .vx-review { animation:vxEnter .6s backwards; }
.play .vx-review+.vx-review { animation-delay:.15s; }
@keyframes vxGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes vxEnter { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@keyframes vxFade { from { opacity:0; } to { opacity:1; } }
@keyframes vxPop { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:scale(1); } }
@keyframes vxInL { from { opacity:0; transform:translateX(-8%); } to { opacity:1; transform:none; } }
@keyframes vxInR { from { opacity:0; transform:translateX(8%); } to { opacity:1; transform:none; } }
@keyframes vxDash { from { stroke-dashoffset:1; } to { stroke-dashoffset:0; } }
@keyframes vxDraw { from { stroke-dashoffset:1000; } to { stroke-dashoffset:0; } }
@keyframes vxHint { 0%,70% { opacity:1; } 100% { opacity:0; } }

/* Tabela szczegółowa */
.vx-matrix { overflow:hidden; }
.vx-matrix-cap { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 16px; font:600 13px var(--display); color:var(--ink); border-bottom:1px solid var(--line-strong); }
.vx-matrix-cap>span+span { color:var(--dim); font:9px var(--mono); }
.vx-table-scroll { overflow:auto; max-height:690px; }
#vxTable { border-collapse:separate; border-spacing:0; width:100%; font-size:12px; }
#vxTable th, #vxTable td { padding:11px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:160px; text-align:left; background:var(--panel); }
#vxTable thead th { position:sticky; top:0; z-index:3; background:var(--panel-2); color:var(--ink); vertical-align:top; border-top:3px solid var(--series,transparent); }
#vxTable thead th:first-child { z-index:5; }
#vxTable th:first-child { position:sticky; left:0; z-index:2; width:230px; min-width:230px; color:var(--dim); font:500 11px var(--sans); box-shadow:2px 0 var(--line-strong); }
#vxTable .vx-col-name { display:block; font:600 13px var(--sans); margin-bottom:5px; }
#vxTable thead .vx-effort { font-size:10px; color:var(--dim); }
#vxTable th small { display:block; font:9px/1.5 var(--mono); color:var(--dim); margin-top:5px; }
#vxTable th small a { color:var(--mint); }
#vxTable td { font:500 14px var(--mono); color:var(--ink); font-variant-numeric:tabular-nums; }
#vxTable td small { display:block; color:var(--dim); font:9px/1.5 var(--mono); margin-top:4px; }
#vxTable td.vx-heat { background:color-mix(in srgb,var(--mint) calc(var(--heat)*0.17%),var(--panel)); }
#vxTable td.vx-best { font-weight:700; box-shadow:inset 3px 0 var(--mint); }
#vxTable td.vx-best small { color:var(--mint); }
#vxTable td.vx-none { color:var(--dim); }
#vxTable tr:hover th { background:var(--panel-2); }
.vx-rowgroup th { position:static !important; background:var(--panel-3) !important; color:var(--ink) !important; font:500 10px var(--mono) !important; letter-spacing:.1em; text-transform:uppercase; padding:9px 16px !important; }
.vx-footer { display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px; padding:18px 0 5px; color:var(--dim); font:9px/1.6 var(--mono); }
.vx-footer a { color:var(--mint); }
@media(max-width:1000px) { .vx-shell { padding:20px 16px; } }
@media(max-width:680px) {
 .vx-heading { display:block; }.vx-count { text-align:left; margin-top:12px; }
 .vx-duel-pick { grid-template-columns:1fr; }.vx-swap { justify-self:center; }
 .vx-control-head { flex-wrap:wrap; }.vx-search { width:100%; }
 .vx-toolbar, .vx-scope { align-items:start; }.vx-scope { flex-wrap:wrap; }.vx-toolbar .st-toggle { max-width:100%; overflow:auto; }
 .vx-matrix-cap>span+span { display:none; }
 #vxTable th:first-child { min-width:150px; width:150px; }#vxTable th,#vxTable td { min-width:140px; padding:10px; }
}
@media(prefers-reduced-motion:reduce) { .vx-slide *, .vx-slide { animation:none !important; } .vx-stair,.vx-ladder { stroke-dasharray:none; } }

/* Scene comparison: controls above, large stages, details below. */
#splitSceneMode { min-height:0; }
.split-top-control { display:block; padding:9px 16px; }
.split-top-control .prompt-pills { flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; }
.split-top-control .prompt-pill { flex-shrink:0; height:27px; padding:0 9px; font-size:11px; }
.model-selector-bar { flex-wrap:nowrap; gap:8px; padding-top:3px; }
.model-selector-bar .model-select { min-width:140px; flex:1; max-width:450px; }
.split-layoutbar { display:flex; gap:5px; margin-left:auto; align-items:center; }
.split-layoutbar .btn { font-size:10px; white-space:nowrap; }
.split-layoutbar .btn.on { background:var(--mint-soft); border-color:var(--mint); color:var(--mint); }
.split-modebar { padding:7px 16px; }
.split-frame-header { min-height:44px; padding:6px 12px; gap:7px; }
.split-main-data { display:flex; flex-wrap:wrap; gap:4px 10px; align-items:center; min-width:0; }
.split-main-data .model-tag { font-size:11px; }
.split-main-data .split-score { font:600 12px var(--mono); color:var(--mint); }
.split-frame-header>div+div { flex-shrink:0; }
.split-frame-header .btn { font-size:10px; padding:0 7px; }
.split-viewport-container { gap:8px; padding:8px; background:var(--bg); min-height:0; }
.split-side { border:1px solid var(--line-strong); border-radius:4px; }
.split-side iframe { flex:1; min-height:0; }
.split-details { background:var(--panel); border-top:1px solid var(--line-strong); flex-shrink:0; max-height:38vh; overflow:auto; }
.split-details>summary { padding:10px 16px; cursor:pointer; font:500 11px var(--mono); color:var(--dim); }
.split-details>summary span { margin-left:14px; color:var(--mint); font-size:10px; }
.split-details .differential-bar { border-top:1px solid var(--line); }
.split-details .split-table-drawer { max-height:none; overflow:visible; }
#splitSceneMode[data-layout="stack"] .split-viewport-container { display:flex; flex-direction:column; overflow:auto; }
#splitSceneMode[data-layout="stack"] .split-side { min-height:70vh; flex:0 0 70vh; }
.scene-focus .topbar, .scene-focus .split-modebar, .scene-focus .split-top-control, .scene-focus .split-details { display:none; }
.scene-focus #app-container { height:100vh; }
.scene-focus .split-viewport-container { padding:4px; gap:4px; }
.split-focus-exit { display:none; position:fixed; top:7px; right:9px; z-index:100; background:var(--panel); box-shadow:0 2px 14px #0003; }
.scene-focus .split-focus-exit { display:flex; }
@media(max-width:1000px) {
 .vx-shell { padding:20px 16px; }.vx-charts { grid-template-columns:1fr; }
 .model-selector-bar { flex-wrap:wrap; }.model-selector-bar .model-select { max-width:none; }
 .split-modebar-hint { display:none; }.split-layoutbar { width:100%; justify-content:flex-end; }
 .brand .sub { font-size:8px; }.topbar { gap:8px; }.seg { min-width:0; }
}
@media(max-width:680px) {
 .vx-heading { display:block; }.vx-count { text-align:left; margin-top:12px; }
 .vx-control-head { align-items:start; }.vx-control-head>div { flex-wrap:wrap; justify-content:end; }
 .vx-toolbar, .vx-scope { align-items:start; }.vx-scope { flex-wrap:wrap; }.vx-toolbar .st-toggle { max-width:100%; overflow:auto; }
 .vx-search { width:100%; }.vx-matrix-cap>span+span { display:none; }
 #vxTable th:first-child { min-width:160px; width:160px; }#vxTable th,#vxTable td { min-width:145px; padding:10px; }
 .split-viewport-container { flex-direction:column; overflow:auto; }.split-side { min-height:65vh; flex:0 0 65vh; }
 .split-frame-header { flex-wrap:wrap; }.differential-bar { grid-template-columns:1fr 1fr; }
 .model-selector-bar>label { display:none; }.split-main-data { gap:4px 8px; }
}
@media(prefers-reduced-motion:reduce) { .vx-fill,.vx-bar-row,.vx-cellbar i,.vx-scatter circle,.vx-review { animation:none !important; } }

/* Two offset stages: scene A above its data, scene B below its data. */
.split-top-control { position:relative; z-index:10; overflow:visible; }
.split-model-picker { flex:1; min-width:170px; max-width:450px; }
.split-model-picker .filter-dropdown-btn { width:100%; }
.split-model-picker .filter-dropdown-panel { max-height:min(590px,72vh); min-width:330px; }
.split-model-picker .dropdown-panel-search { position:sticky; top:0; z-index:2; }
.split-picker-group { display:flex; align-items:center; gap:9px; padding:12px 8px 5px; font-size:12px; }
.split-picker-group>span:last-child { margin-left:auto; font:10px var(--mono); color:var(--dim); }
.split-picker-row { width:100%; border:0; background:transparent; font-family:var(--sans); text-align:left; }
.split-picker-row .dropdown-item-text { min-width:0; flex:1; }
.split-picker-row .dropdown-item-sub { white-space:normal; }
.split-picker-row.unavailable { color:var(--dim); opacity:.55; }
.split-choice-mark { font-size:14px; color:var(--mint); }
.split-run-select { display:flex; gap:7px; align-items:center; padding:7px 9px 9px 30px; font:10px var(--mono); color:var(--dim); }
.split-run-select select { min-width:0; flex:1; background:var(--panel-2); color:var(--ink); border:1px solid var(--line); padding:5px; font:10px var(--mono); }
.split-viewport-container { display:grid; grid-template-columns:1fr 1fr; align-items:start; gap:18px; padding:18px; overflow:auto; }
.split-column { min-width:0; display:flex; flex-direction:column; gap:14px; }
.split-column .split-side { height:auto; flex:none; min-height:0; }
.split-stage { position:relative; height:clamp(340px,52vh,650px); background:var(--stage); }
.split-stage iframe { display:block; width:100%; height:100%; border:0; }
.split-data-panel { height:clamp(420px,48vh,540px); overflow:auto; padding:20px 22px; border:1px solid var(--line); border-radius:4px; background:var(--panel); }
.split-data-heading { display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:18px; }
.split-data-heading>span { font:10px var(--mono); color:var(--dim); letter-spacing:.06em; text-transform:uppercase; }
.split-data-heading>b { font:600 16px var(--display); color:var(--ink); }
.split-data-heading>small { color:var(--dim); font:10px var(--mono); }
.split-data-content { display:grid; grid-template-columns:1fr 1.15fr; gap:22px; }
.split-grades { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-bottom:18px; }
.split-grades>div { padding:8px 10px; background:var(--panel-2); border-radius:4px; min-width:0; }
.split-grades span { display:block; font-size:10px; color:var(--dim); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.split-grades b { display:block; margin-top:3px; font:600 20px/1.1 var(--display); color:var(--ink); font-variant-numeric:tabular-nums; }
.split-grades .main { box-shadow:inset 3px 0 var(--mint); }
.split-grades .main b { font-size:24px; }
.split-compare { display:grid; gap:12px; align-content:start; border-left:1px solid var(--line); padding-left:20px; }
.split-compare-empty { border-left:1px solid var(--line); padding-left:20px; color:var(--dim); font-size:11px; line-height:1.6; }
.split-chead { display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:5px; font-size:11px; color:var(--ink); font-weight:500; }
.split-chead small { font:10px var(--mono); color:var(--dim); text-align:right; }
.split-cbar { display:grid; grid-template-columns:104px 1fr minmax(58px,auto); gap:8px; align-items:center; padding:2px 0; font:10px var(--mono); color:var(--dim); }
.split-cbar>span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.split-cbar.me>span { color:var(--ink); font-weight:600; }
.split-cbar i { height:9px; background:var(--line); border-radius:2px; overflow:hidden; }
.split-cbar em { display:block; height:100%; border-radius:2px; transform-origin:left; animation:vxGrow .6s both; }
.split-cbar.them em { opacity:.5; }
.split-cbar b { font:500 11px var(--mono); color:var(--ink); text-align:right; white-space:nowrap; }
.split-quality { display:grid; gap:9px; }
.split-quality>div { display:grid; grid-template-columns:1fr auto; gap:4px 10px; align-items:center; font-size:11px; color:var(--dim); }
.split-quality b { font:500 12px var(--mono); color:var(--ink); }
.split-quality b small { font-size:9px; color:var(--dim); }
.split-quality i { grid-column:1 / -1; height:3px; background:var(--line); }
.split-quality em { display:block; height:100%; transform-origin:left; animation:vxGrow .6s both; }
.split-generation { display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; align-content:start; }
.split-generation small { display:block; margin-top:3px; font:9px/1.4 var(--mono); color:var(--dim); }
.split-generation span { display:block; font-size:10px; color:var(--dim); margin-bottom:5px; }
.split-generation b { font:500 12px var(--mono); color:var(--ink); }
.split-data-panel p { color:var(--dim); font:11px/1.6 var(--sans); margin:16px 0 10px; }
.split-data-date { color:var(--dim); font:9px/1.5 var(--mono); }
.split-missing { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:14px; padding:30px; text-align:center; background:var(--panel-2); color:var(--dim); }
.split-missing[hidden] { display:none; }
.split-missing b { font:600 20px var(--display); }
.split-missing span { font:12px var(--mono); }
.split-missing small { max-width:330px; font-size:12px; line-height:1.7; }
.split-side.is-missing .split-frame-header, .split-data-panel.is-missing { filter:grayscale(1); opacity:.6; }
.split-side a[aria-disabled="true"] { opacity:.4; pointer-events:none; }
#splitSceneMode[data-layout="side"] .split-column-right .split-data-panel { order:1; }
#splitSceneMode[data-layout="stack"] .split-viewport-container { display:flex; flex-direction:column; }
#splitSceneMode[data-layout="stack"] .split-column { width:100%; }
#splitSceneMode[data-layout="stack"] .split-column .split-side { min-height:0; flex:none; }
#splitSceneMode[data-layout="stack"] .split-stage { height:70vh; }
#splitSceneMode[data-layout="stack"] .split-column-right .split-data-panel { order:1; }
.scene-focus .split-data-panel { display:none; }
.scene-focus .split-stage { height:calc(100vh - 58px); }
@media(max-width:1100px) {
 .split-data-panel { padding:16px; }
 .model-selector-bar { flex-wrap:wrap; }
 .split-model-picker { max-width:none; }
}
@media(max-width:760px) {
 .split-viewport-container { grid-template-columns:1fr; gap:22px; padding:10px; }
 .split-column-right .split-data-panel { order:1; }
 .split-data-panel { height:auto; min-height:240px; }
 .split-stage { height:60vh; }
 .split-model-picker { flex-basis:calc(50% - 40px); min-width:120px; }
 .split-model-picker .filter-dropdown-panel { min-width:280px; width:calc(100vw - 32px); }
 #splitPickerRight .filter-dropdown-panel { left:auto; }
 .split-data-content { gap:14px; }
 .split-compare, .split-compare-empty { padding-left:14px; }
}
@media(max-width:1300px) {
 .split-data-content { grid-template-columns:1fr; }
 .split-compare, .split-compare-empty { border-left:0; padding-left:0; border-top:1px solid var(--line); padding-top:14px; }
 .split-data-panel { height:auto; min-height:420px; }
}
@media(prefers-reduced-motion:reduce) { .split-quality em, .split-cbar em { animation:none; } }