:root{
  --ink:#171b1d;
  --muted:#68747a;
  --line:#d8dee1;
  --line-dark:#b8c2c7;
  --teal:#286576;
  --teal-soft:#e9f1f3;
  --success:#4d8b61;
  --success-soft:#e8f1eb;
  --failure:#b86754;
  --failure-soft:#f5e9e5;
  --pending:#c5a25b;
  --pending-soft:#f5f0e5;
  --paper:#fff;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.58;
  text-rendering:optimizeLegibility;
}
a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
main{width:min(880px,calc(100% - 44px));margin:0 auto;padding:46px 0 72px}

.toc{display:none}
.wordmark{display:flex;align-items:center;gap:9px;margin-bottom:42px;font-size:13px;font-weight:700;letter-spacing:.07em;color:#30383c}
.wordmark-mark{display:grid;place-items:center;width:25px;height:25px;background:var(--teal);color:#fff;font-family:Georgia,serif;font-size:17px;font-weight:700;line-height:1}
.wordmark small{margin-left:auto;color:#8a9499;font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase}
h1{max-width:790px;margin:0 0 13px;font-family:Georgia,"Times New Roman",serif;font-size:38px;font-weight:500;line-height:1.12;letter-spacing:-.025em}
.date,.byline{margin:0;color:var(--muted);font-size:13px}
.byline{margin-top:2px}
.lead{max-width:820px;margin:24px 0 28px;font-size:17px;line-height:1.62;color:#31383b}

h2{margin:0 0 13px;font-family:Georgia,"Times New Roman",serif;font-size:27px;font-weight:500;line-height:1.2;letter-spacing:-.015em}
h2.headline{font-size:29px}
.section-kicker{margin-top:34px}
h3{font-size:18px;line-height:1.35}
.section-marker{height:1px;margin-top:-1px}
.subhead{margin:31px 0 7px;font-family:Georgia,"Times New Roman",serif;font-size:21px;font-weight:500}
.protocol-heading{margin:24px 0 6px;font-size:15px;font-weight:700;letter-spacing:.01em;color:#303a3e}
.analysis-heading{margin:34px 0 9px;padding-top:2px;font-family:Georgia,"Times New Roman",serif;font-size:23px;font-weight:500;line-height:1.25}
.sub{margin:0 0 19px;color:#40494d}
hr{height:1px;border:0;background:var(--line);margin:44px 0 38px}

figure{margin:0}
.video-with-speed-badge{position:relative}
.video-speed-badge{position:absolute;z-index:4;top:8px;right:8px;padding:4px 8px;border:1px solid rgba(255,255,255,.42);border-radius:999px;background:rgba(20,27,31,.78);box-shadow:0 1px 4px rgba(0,0,0,.18);color:#fff;font-size:10px;font-weight:700;line-height:1;letter-spacing:.02em;pointer-events:none;backdrop-filter:blur(3px)}
figcaption,.figcap{margin:8px 0 0;color:var(--muted);font-size:12.5px;line-height:1.46}
video{display:block;width:100%;background:#111;border:1px solid var(--line-dark)}
.setups{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:28px 0 31px}
.setups figure{min-width:0}
.scene-frame{position:relative;aspect-ratio:1.05/1;overflow:hidden;background:#e9edef;border:1px solid var(--line-dark)}
.scene-frame video{position:absolute;top:0;left:0;width:200%;max-width:none;height:100%;border:0;object-fit:fill}
.setup-title{margin-top:8px;font-size:12.5px;font-weight:600;line-height:1.35}
.setup-id{margin-top:2px;color:var(--muted);font-size:11px}
.case-meta{display:flex;flex-wrap:wrap;gap:5px;margin:0 0 7px}
.case-tag{display:inline-flex;align-items:center;min-height:20px;padding:2px 7px;border-radius:2px;font-size:9.5px;font-weight:750;line-height:1;letter-spacing:.025em}
.case-tag.normal{background:#edf1f2;color:#4c585d}
.case-tag.success{background:var(--success-soft);color:#376c49}
.case-tag.failure{background:var(--failure-soft);color:#99503f}
.case-tag.model{background:#edf1f2;color:#465157}
.case-tag.model.astra{background:#eee9f8;color:#5e478b}
.case-tag.model.pi05{background:#e4f3f8;color:#277b9b}
.comparison-stack{display:grid;gap:24px;margin-top:12px}
.comparison-example{padding-top:1px}
.comparison-example h4{margin:0 0 9px;color:#455055;font-size:12px;font-weight:700;letter-spacing:.012em}
.comparison-pair{margin-top:0}
.comparison-pair figure{min-width:0}
.compare{margin:24px 0 6px}
.lead-video video{max-height:500px;object-fit:contain}
.evidence-video{width:min(650px,100%);margin:24px auto 0}
.task-video{margin:15px 0 34px}
.task-video video{max-height:480px;object-fit:contain}
.vidgrid{display:grid;gap:15px;margin:23px 0}
.vidgrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.vidgrid video{aspect-ratio:16/9;object-fit:contain}

/* Comparative result charts */
.chart-figure{margin:23px 0 31px}
.chart-panel{padding:15px 15px 14px;border:1px solid var(--line);background:#fbfcfc}
.chart-legend{display:flex;justify-content:center;flex-wrap:wrap;gap:8px 15px;margin:0 2px 14px;color:#5b666b;font-size:10px}
.chart-legend span{display:inline-flex;align-items:center;gap:5px}
.chart-legend i,.bar-model i,.heatmap-model i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--legend-color,var(--model-color))}
.bar-panels{display:grid;gap:13px}
.bar-panels.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.bar-panels.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.bar-panel{min-width:0;padding:12px 11px 11px;background:#fff;border:1px solid #e2e7e9}
.bar-panel h4{min-height:34px;margin:0 0 7px;font-size:12.5px;line-height:1.3;font-weight:700;color:#303a3e}
.bar-axis{display:flex;justify-content:space-between;margin:0 50px 5px 97px;color:#8a9498;font-size:8.5px;line-height:1}
.bar-row{display:grid;grid-template-columns:90px minmax(48px,1fr) 43px;gap:7px;align-items:center}
.bar-row{min-height:29px}
.bar-model{display:flex;align-items:center;gap:5px;min-width:0;white-space:nowrap;font-size:9.5px;font-weight:600;color:#475156}
.bar-model i{flex:0 0 auto;background:var(--model-color)}
.bar-track{position:relative;height:8px;overflow:hidden;background:#e8edef;border-radius:1px}
.bar-track::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:1px;background:#cfd7da}
.bar-fill{position:relative;z-index:1;display:block;height:100%;min-width:0;background:var(--bar-color);box-shadow:inset 0 0 0 .5px rgba(0,0,0,.16)}
.bar-stat{text-align:right;font-variant-numeric:tabular-nums;line-height:1.05}
.bar-stat strong{display:block;font-size:9px;color:#354045}

.heatmap-panel{padding:15px 14px 12px}
.heatmap-scroll{overflow-x:auto;padding-bottom:2px}
.heatmap-grid{display:grid;grid-template-columns:106px repeat(7,minmax(82px,1fr));gap:4px;min-width:790px}
.heatmap-corner,.heatmap-header{display:flex;min-height:48px;flex-direction:column;justify-content:flex-end;padding:5px 6px;color:#667176;font-size:9px;line-height:1.18}
.heatmap-corner{font-weight:700}
.heatmap-header{text-align:center}
.heatmap-header strong{font-size:10px;color:#3d484d}
.heatmap-header small{margin-top:3px;font-size:8px}
.heatmap-model{display:grid;grid-template-columns:9px 1fr;grid-template-rows:auto auto;column-gap:6px;align-content:center;min-height:48px;padding:5px 6px;background:#fff;border-bottom:1px solid #e6eaec}
.heatmap-model i{grid-row:1/3;align-self:center;background:var(--model-color)}
.heatmap-model strong{font-size:10px;line-height:1.12;color:#344045}
.heatmap-model small{margin-top:2px;color:#90999d;font-size:7.5px;letter-spacing:.04em}
.heatmap-cell{display:flex;min-height:48px;flex-direction:column;align-items:center;justify-content:center;background:var(--heat);color:#263235;font-variant-numeric:tabular-nums}
.heatmap-cell.dark{color:#fff}
.heatmap-cell strong{font-size:10px;line-height:1}
.heatmap-cell small{margin-top:4px;font-size:7.5px;opacity:.82}
.heatmap-scale{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:11px;color:#778287;font-size:8.5px}
.heatmap-scale i{display:block;width:100px;height:7px;background:linear-gradient(90deg,#f1f5f3,#286576)}

.conflict-table{min-width:800px;margin-top:1px;table-layout:fixed;background:#fff;border-top:1px solid var(--line-dark)}
.conflict-table th,.conflict-table td{text-align:center;vertical-align:middle;padding:8px 7px}
.conflict-table thead th{border-top:0;background:#f7f9f9;font-size:10px;letter-spacing:.012em}
.conflict-table thead tr:first-child th{border-bottom:1px solid #c6d0d4;color:#39454a;font-size:10.5px}
.conflict-table thead tr:nth-child(2) th{color:#68747a;font-weight:600}
.conflict-table th:first-child,.conflict-table td:first-child{width:126px;text-align:left}
.conflict-table tbody tr:first-child td{background:#f4f8f9}
.conflict-model{display:flex;align-items:center;gap:7px;white-space:nowrap}
.conflict-model>i{display:block;flex:0 0 auto;width:8px;height:8px;border-radius:50%;background:var(--model-color)}
.conflict-model span{display:flex;min-width:0;flex-direction:column}
.conflict-model strong{color:#344045;font-size:10px;line-height:1.1}
.conflict-model small{margin-top:2px;color:#8a9498;font-size:7.5px;line-height:1;letter-spacing:.05em}
.conflict-rate{font-size:10.5px;font-variant-numeric:tabular-nums;color:#3b464b}
.conflict-rate.best-result{color:var(--teal);font-weight:800}

/* Matrices */
.conflict-grid{margin:20px 0 12px;overflow-x:auto}
.matrix{width:100%;border-collapse:collapse;table-layout:fixed}
.matrix th,.matrix td{border-bottom:1px solid var(--line);padding:10px 9px;text-align:center;font-size:12px}
.matrix th:first-child,.matrix td:first-child{text-align:left;width:32%}
.matrix thead th{border-top:1px solid var(--line-dark);color:var(--muted);font-size:11px;font-weight:600}
.conflict-summary{display:flex;align-items:center;justify-content:center;gap:6px}
.conflict-summary strong{font-size:14px}
.conflict-summary small{color:var(--muted);font-size:10px}

/* Tables */
table{width:100%;border-collapse:collapse}
th,td{padding:9px 9px;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
thead th{border-top:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);color:#4f5a5f;font-size:11px;font-weight:700;letter-spacing:.025em}
tbody td{font-size:12px}
.right{text-align:right}
.techsheet .key{width:175px;font-weight:700;color:#384246}
.settings-table td:first-child{width:28%;font-weight:600}
.table-scroll{overflow-x:auto}
.comparison-table{min-width:860px;margin-top:15px;table-layout:fixed}
.comparison-table th,.comparison-table td{text-align:center;vertical-align:middle;padding:9px 7px}
.comparison-table th:first-child,.comparison-table td:first-child{width:25%;text-align:left}
.comparison-table th:nth-child(2),.comparison-table td:nth-child(2){background:#f3f8f9}
.comparison-table .baseline-row td{border-bottom:2px solid var(--line-dark);background:#f8f9f9}
.comparison-table .baseline-row td:nth-child(2){background:#edf4f5}
.comparison-label{display:block;font-weight:600;line-height:1.28;color:#30383c}
.comparison-model{display:block;line-height:1.15}
.comparison-family{display:block;margin-top:2px;color:#899398;font-size:8.5px;font-weight:600;letter-spacing:.06em}
.comparison-rate{display:block;font-size:12px;font-variant-numeric:tabular-nums}
.comparison-rate.best-result{color:var(--teal);font-weight:800}
.comparison-rate.not-comparable{color:#69757a}
.comparison-missing{color:#9ca5a9}
.compact-comparison th:first-child,.compact-comparison td:first-child{width:27%}
.condition-table th:first-child,.condition-table td:first-child{width:29%}
.limits{margin:7px 0 0;padding-left:20px;color:#3c4549}
.limits li{margin:7px 0}
footer{margin-top:50px;padding-top:16px;border-top:1px solid var(--line);color:#929a9e;font-size:10.5px}

@media(min-width:1360px){
  .toc{display:block;position:fixed;top:48px;left:max(28px,calc(50vw - 650px));width:176px;color:#7a858a;font-size:11px;line-height:1.25}
  .toc-title{margin-bottom:8px;color:#424b4f;font-weight:700}
  .toc ul{margin:0;padding:0;list-style:none;border-left:1px solid var(--line)}
  .toc li{margin:0}
  .toc a{display:block;padding:4px 0 4px 11px;color:inherit}
  .toc a:hover,.toc a.active{color:var(--teal);text-decoration:none}
  .toc a.active{border-left:2px solid var(--teal);margin-left:-1px;font-weight:700}
  .toc .subitem a{padding-left:22px;font-size:10px}
}

@media(max-width:720px){
  main{width:min(100% - 28px,880px);padding-top:25px}
  .wordmark{margin-bottom:29px}
  h1{font-size:31px}
  h2,h2.headline{font-size:25px}
  .lead{font-size:15.5px}
  .setups{grid-template-columns:1fr;gap:19px}
  .scene-frame{aspect-ratio:16/8.8}
  .vidgrid.two{grid-template-columns:1fr}
  .bar-panels.three,.bar-panels.two{grid-template-columns:1fr}
  .bar-panel h4{min-height:0}
  .techsheet .key{width:115px}
}