/* StatExplorer: data canvas, measured columns, animated comparisons. */
#view-values { display:none; flex:1; min-width:0; height:100%; overflow:auto; background:var(--bg); }
.vx-shell { max-width:1800px; margin:auto; padding:28px 30px 18px; }
.vx-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:22px; }
.vx-eyebrow { font:500 10px var(--mono); letter-spacing:.15em; color:var(--mint); }
.vx-heading h1 { font:600 clamp(25px,3vw,42px)/1.05 var(--display); letter-spacing:-.035em; margin:9px 0; color:var(--ink); }
.vx-heading h1 span { color:var(--mint); }
.vx-heading p { color:var(--dim); font-size:12px; margin:0; }
.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:19px; }
.vx-controls { padding:16px 18px; }
.vx-control-head { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:12px; }
.vx-control-head>b { font:500 10px var(--mono); color:var(--dim); letter-spacing:.1em; text-transform:uppercase; }
.vx-control-head>div { display:flex; gap:6px; }
.vx-search { display:flex; gap:8px; align-items:center; width:280px; padding:7px 10px; margin-bottom:12px; 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:120px; overflow:auto; }
.vx-model-button { border:1px solid var(--line-strong); border-radius:3px; background:var(--panel); color:var(--dim); padding:7px 10px; font:500 11px var(--sans); cursor:pointer; transition:background .2s,border-color .2s; }
.vx-model-button small { font:10px var(--mono); margin-left:8px; opacity:.6; }
.vx-model-button.on { background:var(--mint-soft); color:var(--ink); border-color:var(--mint); }
.vx-model-button:hover { background:var(--panel-2); }
.vx-variants { margin-top:12px; border-top:1px solid var(--line); padding-top:10px; color:var(--dim); font-size:11px; }
.vx-variants summary { cursor:pointer; padding:3px 0; }
.vx-variants summary span { font:10px var(--mono); color:var(--mint); margin-left:8px; }
#vxVariants { display:flex; flex-wrap:wrap; gap:7px 12px; padding:12px 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-toolbar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:20px 0 8px; }
.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-note { font-size:11px; color:var(--dim); line-height:1.6; margin:8px 0 18px; }
.vx-tasknav { display:flex; gap:5px; align-items:center; overflow-x:auto; padding:10px 0 5px; }
.vx-tasknav button { border:1px solid var(--line-strong); background:var(--panel); color:var(--dim); font:500 11px var(--sans); padding:8px 12px; white-space:nowrap; cursor:pointer; border-radius:3px; }
.vx-tasknav button.on { color:var(--mint-ink); background:var(--mint); border-color:var(--mint); }
.vx-charts { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.vx-chart { padding:18px 20px; overflow:hidden; min-width:0; }
.vx-chart h2 { font:600 17px var(--display); margin:0; color:var(--ink); }
.vx-chart>p { font:10px var(--mono); margin:5px 0 18px; color:var(--dim); }
.vx-bars { max-height:340px; overflow:auto; padding-right:4px; }
.vx-bar-row { display:grid; grid-template-columns:minmax(130px,35%) 1fr 54px; gap:10px; align-items:center; padding:7px 0; animation:vxEnter .4s both; animation-delay:calc(var(--i,0)*20ms); }
.vx-bar-label { font:11px var(--sans); color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vx-bar-label small { color:var(--dim); font:9px var(--mono); display:block; margin-top:3px; }
.vx-track { height:9px; background:var(--line); border-radius:1px; overflow:hidden; }
.vx-fill { display:block; height:100%; background:var(--series); transform-origin:left; animation:vxGrow .75s cubic-bezier(.16,1,.3,1) both; animation-delay:calc(var(--i,0)*20ms); }
.vx-bar-value { font:500 12px var(--mono); color:var(--ink); text-align:right; }
.vx-scatter { width:100%; height:280px; overflow:visible; }
.vx-scatter .vx-grid { stroke:var(--line-strong); stroke-width:1; }
.vx-scatter text { fill:var(--dim); font:10px var(--mono); }
.vx-scatter circle { stroke:var(--panel); stroke-width:2; animation:vxPoint .65s both; transform-box:fill-box; transform-origin:center; }
.vx-scatter circle:hover { r:9; cursor:help; stroke:var(--ink); }
.vx-scatter .vx-axis-label { fill:var(--ink); font-size:10px; }
.vx-empty { padding:30px 15px; font:12px/1.7 var(--sans); color:var(--dim); }
.vx-matrix { overflow:hidden; }
.vx-matrix-cap { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:13px 16px; font:500 11px var(--mono); color:var(--ink); border-bottom:1px solid var(--line-strong); }
.vx-matrix-cap>span+span { color:var(--dim); font-size:9px; }
.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:12px 16px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); min-width:165px; text-align:left; background:var(--panel); }
#vxTable thead th { position:sticky; top:0; z-index:3; background:var(--panel-2); color:var(--ink); font:600 12px var(--sans); vertical-align:top; }
#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 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); }
#vxTable td small { display:block; color:var(--dim); font:9px/1.5 var(--mono); margin-top:4px; }
#vxTable tr:hover td, #vxTable tr:hover th { background:var(--panel-2); }
#vxTable td.vx-best { background:color-mix(in srgb,var(--series) 8%,var(--panel)); }
.vx-cellbar { height:3px; background:var(--line); margin-top:9px; }
.vx-cellbar i { display:block; background:var(--series); height:100%; transform-origin:left; animation:vxGrow .7s both; }
.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-col-dot { display:inline-block; width:7px; height:7px; background:var(--series); margin-right:7px; }
.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); }
.vx-reviews { display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:12px; margin-top:16px; }
.vx-review { padding:18px; min-width:0; animation:vxEnter .4s both; }
.vx-review h3 { color:var(--ink); font:600 14px var(--display); margin:0 0 5px; }
.vx-review p { font:11px/1.7 var(--sans); color:var(--dim); margin:10px 0; }
.vx-review small { color:var(--dim); font:9px var(--mono); }
.vx-review details { font-size:11px; color:var(--dim); margin:10px 0; }
.vx-review summary { cursor:pointer; }
.vx-review ul { padding-left:17px; margin:8px 0; line-height:1.6; }
.vx-review .btn { margin-top:8px; }
@keyframes vxGrow { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes vxEnter { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes vxPoint { from { opacity:0; transform:scale(.1); } to { opacity:1; transform:scale(1); } }

/* 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(240px,30vh,340px); 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:1.1fr 1fr; gap:22px; }
.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; border-left:1px solid var(--line); padding-left:20px; align-content:start; }
.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-generation { padding-left:14px; }
}
@media(prefers-reduced-motion:reduce) { .split-quality em { animation:none; } }