/* ============================================================
   ChartAnno project page — minimal academic style
   Palette from the paper: chartblue #2466A0 (accents/links),
   annogreen #238C6E (secondary accent).
   ============================================================ */

:root {
  --ink: #1f2937;
  --ink-soft: #4b5563;
  --ink-mute: #6b7280;
  --line: #e5e7eb;
  --line-soft: #f0f2f5;
  --bg: #ffffff;
  --bg-soft: #f7f9fb;
  --blue: #2466a0;
  --blue-deep: #1b4c78;
  --green: #238c6e;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.page {
  width: min(1200px, calc(100% - 40px));
  margin: 0 auto;
  padding: 64px 0 48px;
}

img { max-width: 100%; display: block; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); text-decoration: underline; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------------- Title block ---------------- */
.title-block { text-align: center; }

.paper-title {
  margin: 0;
  font-size: clamp(32px, 5vw, 44px);
  font-weight: 750;
  letter-spacing: -0.02em;
  line-height: 1.22;
  color: #111827;
}

.authors {
  margin: 28px 0 0;
  font-size: 17px;
  line-height: 2.05;
  color: var(--ink-soft);
}
.authors .author-row {
  display: block;
  text-align: center;
}
.authors .author-row > span { display: inline-block; margin: 0 0.55em; white-space: nowrap; }
.authors a { color: var(--blue); text-decoration: none; }
.authors a:hover { text-decoration: underline; }
.authors sup { font-size: 11.5px; color: var(--ink-mute); }
.authors sup.eq { color: var(--green); font-weight: 700; }

.affiliations {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 30px;
  margin: 12px 0 0;
  font-size: 16.5px;
  color: var(--ink-mute);
}
.affiliations sup { font-size: 11.5px; }
.affiliations.note { margin-top: 5px; font-size: 15px; }
.affiliations .affiliation-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.affiliations .uni { display: inline-flex; align-items: center; color: var(--ink-mute); text-decoration: none; vertical-align: middle; }
.affiliations .uni img { height: 44px; width: auto; max-width: 180px; display: block; }
.affiliations .uni:hover img { opacity: 0.85; }
@media(max-width:640px){.affiliations{gap:10px 14px}.affiliations .affiliation-item{gap:6px}.affiliations .uni img{height:34px;max-width:150px}}

.link-row {
  margin-top: 26px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.pill {
  display: inline-block;
  padding: 8px 22px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  transition: none;
}
.pill:hover {
  color: var(--blue);
  border-color: var(--blue);
  text-decoration: none;
}
.pill.ghost {
  color: #b3bcc6;
  border-color: var(--line-soft);
  cursor: default;
}
.fig figcaption b { color: var(--ink-soft); }

/* ---------------- Figures ---------------- */
.fig {
  margin: 52px 0 0;
  text-align: center;
}
.fig img {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  margin: 0 auto;
}
.fig video {
  width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  margin: 0 auto;
  background: #000;
  display: block;
}
.fig-demo { margin-top: 34px; }
.fig-demo video { width: 70%; }
.fig figcaption {
  margin-top: 14px;
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--ink-mute);
  text-align: center;
}
.fig figcaption em { font-style: italic; }

/* ---------------- Sections ---------------- */
.sec { margin-top: 64px; }

.sec h2 {
  margin: 0 0 20px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--blue);
  text-align: center;
}
.sec-icon { display: inline-block; vertical-align: -6px; margin-right: 10px; }

.sec p { margin: 0 0 14px; font-size: 18px; color: var(--ink-soft); }
.sec p:last-child { margin-bottom: 0; }
.sec p b { color: var(--ink); }
.sec .sec-note { font-size: 16px; color: var(--ink-mute); }


[hidden]{display:none!important}
button,select{font:inherit}
button{cursor:pointer}
a:focus-visible,button:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* ---------------- Leaderboard controls ---------------- */
.tabs{display:flex;align-items:center;flex-wrap:wrap;gap:14px;margin:22px 0 18px}
#setting-tabs{display:inline-flex;flex-wrap:wrap;background:var(--bg-soft);border:1px solid var(--line);border-radius:10px;padding:3px;gap:2px}
.tab{border:0;background:none;color:var(--ink-mute);padding:7px 20px;font-size:14px;font-weight:600;border-radius:8px;letter-spacing:.01em}
.tab:hover{color:var(--ink)}
.tab.active{color:#fff;background:var(--blue)}
.filters{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.filter{font-size:12.5px;font-weight:600;padding:6px 15px;border:1px solid var(--line);border-radius:999px;background:var(--bg);color:var(--ink-mute)}
.filter:hover{border-color:var(--blue);color:var(--blue)}
.filter.active{background:#eef4fa;border-color:var(--blue);color:var(--blue)}

/* ---------------- Leaderboard table ---------------- */
.board-scroll{overflow:auto;border:1px solid var(--line);border-radius:8px;background:#fff}
.board{border-collapse:separate;border-spacing:0;width:100%;min-width:760px;table-layout:fixed;font-size:12.5px;text-align:center}
.board thead th{background:#fbfcfd;padding:6px 4px;border-bottom:1px solid var(--line);font-weight:600;overflow:hidden}
.head-t1 th{font-size:11.5px;letter-spacing:.03em;padding:9px 4px 4px}
.head-t2 th{font-size:10.5px;padding:4px 4px}
.head-metrics th{padding:3px 1px;border-bottom:2px solid var(--line)}
.board td{padding:7px 4px;border-bottom:1px solid rgba(229,231,235,.6);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden}
.board tr:last-child td{border-bottom:0}
.board .th-model,.board td:first-child{position:sticky;left:0;text-align:left;background:#fff;z-index:2;width:170px;max-width:170px;padding-left:10px;border-right:1px solid var(--line-soft)}
.board .open-model td:first-child{background:#f1f6f3}
.board .th-rank{border-right:2px solid var(--line);width:52px}
.board .rank-cell{font-weight:700;color:#1b4c78;border-right:2px solid var(--line)}
.board .gsep{border-left:1.5px solid #d7dce2}
.board td.heat span:first-child{font-weight:550;color:#26303c}
.board td.heat.best span:first-child{font-weight:800;color:#0f172a}
.board td.heat.second span:first-child{text-decoration:underline;text-underline-offset:2.5px;text-decoration-thickness:1.5px}
/* 17 fixed columns ≈57px each: 9px keeps the longest words ("Instruction",
   "Consumption") intact on one line — never break words inside a metric name */
.sort{border:0;background:none;font-size:9px;color:inherit;padding:2px 1px;border-radius:4px;font-weight:650;line-height:1.28;letter-spacing:-.01em;white-space:normal;display:inline-block;max-width:100%;vertical-align:middle}
/* headers containing an 11+ char word (Token Consumption, Instruction Following) shrink one more step */
.sort.compact{font-size:8.5px}
.sort:hover{background:#eef2f6;color:var(--blue)}
.sort.active{color:var(--blue-deep)}
/* resting arrow = metric direction (↑ higher / ↓ lower is better);
   while sorting, it yields to the blue sort arrow below */
.sort .dir{font-size:8.5px;margin-left:2px;color:#a6b0ba;font-weight:700}
.sort.active .dir{display:none}
.sort.desc::after{content:"↓";font-size:9px;margin-left:1px}
.sort.asc::after{content:"↑";font-size:9px;margin-left:1px}
.model-name{display:inline-flex;gap:7px;align-items:center;font-size:12.5px;font-weight:600;color:var(--ink)}
.model-name img{width:16px;height:16px;object-fit:contain}
.pending{color:#a4acb5}
.grp-row th{text-align:left;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;padding:9px 12px;font-weight:700;border-bottom:1px solid var(--line)}
.heat-legend{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin:12px 0 0;font-size:11.5px;color:var(--ink-mute)}
.heat-legend .leg{display:inline-flex;align-items:center;gap:2px}
.heat-legend i{width:22px;height:11px;display:inline-block;border:1px solid rgba(0,0,0,.07)}
.heat-legend em{font-style:normal;margin-left:7px}
.grp-row th i{display:inline-block;width:9px;height:9px;border-radius:2.5px;margin-right:9px}
.grp-row.grp-closed th{background:#f8f4ec;color:#7a6a4a;border-bottom-color:#e7dfc9}
.grp-row.grp-closed th i{background:#c9a96a}
.grp-row.grp-open th{background:#f1f6f3;color:#3f6b58;border-bottom-color:#dce9e2}
.grp-row.grp-open th i{background:#5f9c7f}
.sec .foot-note{font-size:13px;color:var(--ink-mute);margin-top:13px}
footer{margin-top:60px;padding-top:20px;border-top:1px solid var(--line);text-align:center;font-size:13px;color:var(--ink-mute)}
footer .credits{display:block;margin-top:6px;font-size:12px}
footer .credits a{color:var(--blue)}
.bibtex{position:relative;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--bg-soft)}
.bibtex pre{overflow:auto;margin:0;padding:20px 92px 20px 20px;background:transparent;font-size:13px;line-height:1.65}
.bibtex code{font-family:var(--font-mono);white-space:pre}
.copy-btn{position:absolute;z-index:1;top:12px;right:12px;padding:7px 12px;border:1px solid var(--line);border-radius:7px;background:#fff;color:var(--ink);font-size:13px}
.copy-btn:hover{background:var(--bg-soft)}
pre{overflow:auto;padding:20px;background:var(--bg-soft);font-size:13px}
@media(max-width:640px){.page{width:calc(100% - 32px);padding-top:32px}.paper-title{font-size:28px}.sec{margin-top:40px}.sec p{font-size:16px}.fig{margin-top:30px}.fig figcaption{font-size:13px}.pill{font-size:13px;padding:7px 13px}.filters{margin-left:0;width:100%;padding-bottom:8px}.board .th-model,.board td:first-child{min-width:205px}.tab{padding:9px 16px}.sec h2{font-size:24px}}

.compact-figure{max-width:740px;margin-left:auto;margin-right:auto}

@media(max-width:640px){.metric-key{grid-template-columns:1fr}}

/* ============================================================
   Case Studies — chips, input material, video grid, lightbox
   ============================================================ */
.cs-chips{display:flex;flex-direction:column;gap:7px;margin:18px 0 22px}
.cs-chip-row{display:flex;align-items:baseline;flex-wrap:wrap;gap:7px}
.cs-family-label{flex:0 0 auto;min-width:172px;font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-mute)}
.cs-tier{display:inline-block;font-style:normal;font-size:9.5px;font-weight:800;letter-spacing:.09em;line-height:1;padding:3px 6px;border-radius:4px;margin-right:8px;vertical-align:1.5px;border:1px solid}
.cs-tier.obj{color:#5b5470;background:rgba(91,84,112,.08);border-color:rgba(91,84,112,.32)}
.cs-tier.sub{color:#23806b;background:rgba(35,128,107,.08);border-color:rgba(35,128,107,.34)}
.cs-chip{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:5px 14px;font-size:13px;color:var(--ink-soft)}
.cs-chip:hover{border-color:var(--blue);color:var(--blue)}
.cs-chip.active{background:#eef4fa;border-color:var(--blue);color:var(--blue);font-weight:600}

.cs-panel{border:1px solid var(--line);border-radius:8px;padding:24px 26px;background:var(--bg);scroll-margin-top:70px}
.cs-head h3{margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.cs-meta{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.cs-tag{font-size:11.5px;padding:3px 9px;border:1px solid var(--line);border-radius:4px;background:var(--bg-soft);color:var(--ink-mute)}
.cs-desc{margin:12px 0 0;font-size:14.5px!important;color:var(--ink-soft)!important}

/* input material block */
.cs-input{display:flex;gap:22px;align-items:flex-start;margin-top:18px;padding:16px;border:1px solid var(--line-soft);border-radius:6px;background:var(--bg-soft)}
.cs-input-media{flex:0 1 400px;margin:0;text-align:center}
.cs-input-media img{width:100%;border:1px solid var(--line);border-radius:5px;background:#fff}
.cs-input-media video{width:100%;border:1px solid var(--line);border-radius:5px;background:#0d1117}
.cs-input-media figcaption{margin-top:7px;font-size:12px;color:var(--ink-mute)}
.cs-input .cs-prompt{flex:1 1 380px;min-width:0}
.cs-input-only .cs-prompt{flex:1 1 auto}
.cs-input-stack{flex-direction:column}
.cs-input-stack .cs-prompt{width:100%;flex:0 0 auto}
.cs-input.cs-media-only{justify-content:center}
.cs-prompt summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--ink-soft);list-style:revert}
.cs-prompt-body{margin:10px 0 0;font-size:13px;line-height:1.75;color:var(--ink-soft);white-space:pre-wrap;word-break:break-word;font-family:var(--font-mono)}
/* every marked segment carries BOTH a wash and a thick underline:
   red/red = missing (Low), yellow/yellow = partial (Mid), red wash + bright
   yellow underline = both at once */
mark.mk-missing{background:rgba(190,60,60,.13);color:#8f3030;border-bottom:3px solid #be3c3c;padding:0 1px;border-radius:2px}
mark.mk-partial{background:rgba(214,169,49,.18);color:#7d6117;border-bottom:3px solid #cfa030;padding:0 1px;border-radius:2px}
mark.mk-both{background:rgba(190,60,60,.15);color:#8f3030;border-bottom:3px solid #e8b83a;padding:0 1px;border-radius:2px}
.mk-note{font-family:var(--font-sans);font-size:11.5px;font-style:italic;font-weight:600;white-space:normal}
.mk-note.low{color:#a03c3c}
.mk-note.mid{color:#96741c}
/* coloured legend at the bottom of the expanded annotated-prompt block */
.cs-legend-block{display:flex;flex-wrap:wrap;gap:6px 26px;margin:13px 0 0;padding-top:11px;border-top:1px dashed var(--line)}
.cs-legend-block .leg{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:650}
.cs-legend-block .leg .sw{width:17px;height:12px;border-radius:3px;flex:0 0 auto}
.cs-legend-block .leg.low{color:#8f3030}
.cs-legend-block .leg.low .sw{background:rgba(190,60,60,.22);border-bottom:3px solid #be3c3c}
.cs-legend-block .leg.mid{color:#7d6117}
.cs-legend-block .leg.mid .sw{background:rgba(214,169,49,.30);border-bottom:3px solid #cfa030}

/* output grid: three per row */
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:20px}
.cs-cell{margin:0;display:flex;flex-direction:column}
.cs-video{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line);border-radius:6px;overflow:hidden;background:#0d1117}
.cs-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#0d1117}
.cs-video img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#fff}
.cs-video::after{content:"⤢";position:absolute;right:8px;bottom:6px;font-size:13px;color:#fff;opacity:0;transition:opacity .15s;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.cs-video:hover{border-color:var(--blue)}
.cs-video:hover::after{opacity:.95}
.cs-video-live::after{display:none}
.cs-video-live video{cursor:pointer}
.cs-zoom{position:absolute;top:8px;right:8px;border:1px solid rgba(255,255,255,.4);background:rgba(13,17,23,.55);color:#fff;border-radius:6px;font-size:13px;line-height:1;width:30px;height:30px;opacity:1;z-index:1;transition:opacity .15s}
.cs-video-live:hover .cs-zoom{opacity:1}
.cs-zoom:hover{background:rgba(13,17,23,.8)}

/* IF checklist table */
.cs-table-scroll{width:100%;max-width:100%;overflow-x:auto;margin-top:10px;-webkit-overflow-scrolling:touch}
.cs-checklist{width:100%;min-width:640px;border-collapse:collapse;font-size:13px}
.cs-checklist th,.cs-checklist td{border-bottom:1px solid var(--line-soft);padding:7px 10px;text-align:left;vertical-align:top}
.cs-checklist thead th{font-size:12px;font-weight:700;color:var(--ink-soft);border-bottom:1.5px solid var(--line);white-space:nowrap}
.cs-checklist .q-n{width:34px;color:var(--ink-mute);font-variant-numeric:tabular-nums;text-align:right}
.cs-checklist .q-t{line-height:1.55;color:var(--ink-soft)}
.cs-checklist td.if-yes{color:#2c6650;font-weight:700;text-align:center}
.cs-checklist td.if-no{color:#a04b40;font-weight:700;text-align:center}
.cs-cell figcaption{margin-top:9px;font-size:12.5px;line-height:1.55}
.cs-model{display:flex;align-items:center;gap:7px;font-size:13.5px}
.cs-model b{font-weight:650;color:var(--ink)}
.cs-rank{font-size:9.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:2px 7px;border-radius:3px}
.cs-rank.high{background:#e8f2ec;color:#3c735b}
.cs-rank.mid{background:#eff1f4;color:#59667a}
.cs-rank.low{background:#f7ebea;color:#a04b40}
.cs-scores{display:flex;flex-wrap:wrap;align-items:center;gap:5px;margin-top:6px}
.sc{font-size:11px;padding:2px 7px;border-radius:3px;background:var(--bg-soft);border:1px solid var(--line-soft);color:var(--ink-soft);font-variant-numeric:tabular-nums}
.sc b{font-weight:700;color:var(--ink)}
.sc-if{background:#e8f2ec;border-color:#cfe4da;color:#3c735b}
.sc-if b{color:#2c6650}
.sc-hi{font-size:10.5px;color:var(--ink-mute);font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.qdots{display:inline-flex;gap:2.5px;margin-left:4px;vertical-align:-1px}
.qdot{width:7px;height:7px;border-radius:50%;background:#d3d3d3}
.qdot.yes{background:var(--green)}
.qdot.no{background:#cf8383}
.sc-clip{font-family:var(--font-mono);font-size:10px;background:#eef4fa;border-color:#d5e3f0;color:#3d6a94}
.cs-tag-note{background:#eef4fa;border-color:#d5e3f0;color:#3d6a94}

/* lightbox */
.cs-lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;gap:14px;background:rgba(13,17,23,.93);padding:34px}
.cs-lb-figure{margin:0;max-width:min(92vw,1380px);text-align:center}
.cs-lb-figure video{width:100%;max-height:76vh;border-radius:6px;background:#000;outline:none}
.cs-lb-figure img{max-width:100%;max-height:76vh;border-radius:6px;background:#fff;box-shadow:0 8px 40px rgba(0,0,0,.5);margin:0 auto}
.cs-lb-figure figcaption{margin-top:12px;font-size:14px;color:#d6dde4}
.cs-lb-close{position:absolute;top:18px;right:22px;border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;border-radius:6px;font-size:16px;width:38px;height:38px;line-height:1}
.cs-lb-close:hover{background:rgba(255,255,255,.16)}
.cs-lb-nav{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.06);color:#fff;border-radius:6px;font-size:26px;width:44px;height:64px;flex:0 0 auto}
.cs-lb-nav:hover{background:rgba(255,255,255,.16)}

@media(max-width:960px){.cs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){
  .cs-grid{grid-template-columns:1fr}
  .cs-input{flex-direction:column}
  .cs-input-media{flex-basis:auto;width:100%}
  .cs-family-label{min-width:100%}
  .cs-panel{padding:16px}
  .cs-lb-nav{display:none}
  .cs-lightbox{padding:14px}
}

.updates-note{text-align:center;margin:24px 0 12px;font-size:14px;line-height:1.6;color:#6b7280;}