/* ============================================================
   Rethinking CFG in On-Policy Diffusion Distillation
   Project page styles
   ============================================================ */
:root {
  --bg: #ffffff;
  --bg-alt: #f6f7fb;
  --bg-card: #ffffff;
  --ink: #1a1d29;
  --ink-soft: #4a5064;
  --ink-faint: #868ea3;
  --line: #e6e8f0;
  --accent: #3f5efb;
  --accent-dark: #2f47c9;
  --accent-soft: #eef1ff;
  --ours: #14a06e;
  --ours-soft: #e7f7ef;
  --warn: #d1495b;
  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(20,25,45,.04), 0 8px 30px rgba(20,25,45,.06);
  --maxw: 1080px;
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--bg);
  line-height: 1.65;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
/* wider container for image/result grids so they use big screens */
.wrap-wide { max-width: 1360px; margin: 0 auto; padding: 0 24px; }
.wrap-wide > h2.sec, .wrap-wide > .sec-sub { } /* headings inherit centering */

/* ---------- Hero ---------- */
header.hero {
  background:
    radial-gradient(1200px 400px at 50% -120px, var(--accent-soft), transparent 70%),
    var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 56px 0 40px;
  text-align: center;
}
.venue {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-dark);
  background: var(--accent-soft);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 20px;
}
h1.title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.14;
  letter-spacing: -.01em;
  margin: 0 auto 22px;
  max-width: 20ch;
  text-wrap: balance;
  color: var(--ink);
}
@media (min-width: 900px) { h1.title { max-width: 900px; } }
h1.title .hl { color: var(--accent-dark); }
.authors {
  font-size: 18px;
  color: var(--ink);
  margin: 0 auto 6px;
  max-width: 800px;
}
.authors a { color: var(--ink); border-bottom: 1px solid transparent; }
.authors a:hover { color: var(--accent-dark); text-decoration: none; border-color: var(--accent); }
.authors sup { color: var(--accent-dark); font-weight: 600; }
.affil { color: var(--ink-soft); font-size: 16px; margin: 6px 0 4px; }
.contact { color: var(--ink-faint); font-size: 14.5px; margin-bottom: 26px; }

/* ---------- Buttons ---------- */
.links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-size: 15px; font-weight: 550;
  border: 1px solid var(--ink);
  transition: transform .12s ease, box-shadow .12s ease, background .12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: var(--shadow); }
.btn svg { width: 17px; height: 17px; fill: currentColor; }
.btn.ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-dark); }
.btn.disabled { opacity: .5; pointer-events: none; }

/* ---------- Sections ---------- */
section { padding: 52px 0; border-bottom: 1px solid var(--line); }
section:last-of-type { border-bottom: none; }
.section-alt { background: var(--bg-alt); }
h2.sec {
  font-family: var(--serif);
  font-weight: 600;
  font-size: clamp(23px, 3vw, 31px);
  text-align: center;
  margin: 0 0 8px;
  letter-spacing: -.01em;
}
.sec-sub { text-align: center; color: var(--ink-soft); max-width: 660px; margin: 0 auto 34px; font-size: 16px; }
h3.subsec {
  font-size: 20px; font-weight: 650; margin: 38px 0 6px;
  display: flex; align-items: center; gap: 10px;
}
h3.subsec .idx {
  font-size: 13px; font-weight: 700; color: var(--accent-dark);
  background: var(--accent-soft); border-radius: 7px; padding: 2px 8px;
}
.subsec-note { color: var(--ink-soft); font-size: 15.5px; margin: 0 0 18px; }

/* ---------- Abstract ---------- */
.abstract { max-width: 800px; margin: 0 auto; }
.abstract p { color: var(--ink-soft); font-size: 17.5px; }
.abstract .lead { color: var(--ink); }

/* ---------- Key idea cards ---------- */
.cards { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 10px; }
.card {
  background: var(--bg-card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow);
}
.card.bad { border-top: 3px solid var(--warn); }
.card.good { border-top: 3px solid var(--ours); }
.card h4 { margin: 0 0 8px; font-size: 17px; }
.card.bad h4 { color: var(--warn); }
.card.good h4 { color: var(--ours); }
.card p { margin: 0; color: var(--ink-soft); font-size: 15.5px; }
.card .tag { font-weight: 700; }

/* ---------- HTML teaser: uniform 2x2 grid ---------- */
.teaser { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
/* 1px gap over a line-colored bg draws the clean cross divider */
.teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.tcell { background: #fff; padding: 24px 28px; display: flex; flex-direction: column; }

/* shared pill tag — top-left in every cell */
.tpill {
  align-self: flex-start; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; padding: 3px 10px; border-radius: 999px; margin-bottom: 12px;
}
.tpill.warn    { color: var(--warn); background: #fbe1e6; }
.tpill.ok      { color: var(--ours); background: #d7f2e5; }
.tpill.neutral { color: var(--ink-soft); background: var(--bg-alt); }

.tp-title { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 4px; }
.tp-sub { color: var(--ink-soft); font-size: 13.5px; margin: 0 0 4px; line-height: 1.5; }
.tdiagram { display: flex; justify-content: center; margin: auto 0 6px; padding-top: 10px; }
.tdiagram svg { width: 100%; max-width: 320px; height: auto; }
.tsuper { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--ink-soft); margin: 6px 0 12px; }
.tsuper .halo { flex: 0 0 auto; width: 22px; height: 8px; border-radius: 5px; background: rgba(20,160,110,.24); display: inline-block; }
.teq {
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; font-size: 13px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px;
  padding: 9px 12px; text-align: center; color: var(--ink);
}
.tp-badge { margin-top: 12px; font-size: 13.5px; display: flex; gap: 8px; align-items: flex-start; line-height: 1.5; }
.tp-badge.warn { color: #8f2f3e; }
.tp-badge.ok   { color: #0f7a53; }
.tp-badge .ic { flex: 0 0 auto; font-size: 15px; line-height: 1.4; }

.ta-head { font-family: var(--serif); font-weight: 600; font-size: 20px; margin: 0 0 4px; }
.ta-sub { color: var(--ink-soft); font-size: 13px; margin: 0 0 14px; line-height: 1.5; }
.nba-flex { display: flex; gap: 14px; align-items: center; margin: 8px 0 auto; }
.nba-flex > svg { flex: 0 0 148px; width: 148px; height: auto; }
.nba-txt { font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.nba-def { display: block; font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 12px; color: var(--ink); margin-bottom: 8px; line-height: 1.7; }
.nba-def .dim { display: block; font-family: var(--font); color: var(--ink-faint); font-size: 11px; margin-top: 1px; }
.nba-eq { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 13px; color: var(--warn); font-weight: 600; display: block; margin-bottom: 6px; }
.plegend { display: flex; gap: 16px; justify-content: center; font-size: 12px; margin: 2px 0 8px; }
.plegend span { display: inline-flex; align-items: center; gap: 6px; color: var(--ink-soft); }
.plegend .psw { width: 15px; height: 3px; border-radius: 2px; display: inline-block; }
.plots { display: flex; gap: 16px; }
.plots figure { margin: 0; flex: 1; min-width: 0; }
.plots .pt { text-align: center; font-size: 12.5px; font-weight: 700; color: var(--ink); margin-bottom: 2px; }
.plots svg { width: 100%; height: auto; }
.ta-cap { font-size: 12.5px; color: var(--ink-soft); margin: 10px 0 0; line-height: 1.5; }

.m { font-style: italic; }
.m sub, .m sup { font-style: normal; }

@media (max-width: 760px) { .teaser-grid { grid-template-columns: 1fr; } }

/* ---------- Figure blocks ---------- */
figure.fig { margin: 0 0 8px; text-align: center; }
figure.fig img {
  max-width: 100%; height: auto; border-radius: var(--radius-sm);
  border: 1px solid var(--line); background: #fff; cursor: zoom-in;
}
figcaption { color: var(--ink-soft); font-size: 14.5px; margin-top: 12px; max-width: 900px; margin-left: auto; margin-right: auto; }
figcaption b { color: var(--ink); }

/* ---------- Dense-to-sparse result grid ---------- */
.result-block { margin-top: 26px; }
.grid-scroll { overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
table.dgrid { border-collapse: separate; border-spacing: 0; margin: 0 auto; width: 100%; }
table.dgrid th.colhead {
  font-size: 12.5px; font-weight: 600; color: var(--ink-soft);
  padding: 0 0 8px; text-align: center; white-space: nowrap;
}
table.dgrid th.colhead.kf { color: var(--accent-dark); }
table.dgrid th.rowhead {
  font-size: 13px; font-weight: 600; color: var(--ink);
  text-align: right; padding: 0 12px 0 0; white-space: nowrap; vertical-align: middle;
}
table.dgrid tr.ours th.rowhead { color: var(--ours); font-weight: 700; }
table.dgrid td { padding: 3px; }
table.dgrid td .cell {
  position: relative; width: 100%; min-width: 110px;
  border-radius: 6px; overflow: hidden; background: var(--bg-alt);
  border: 1px solid var(--line); line-height: 0;
}
table.dgrid tr.ours td .cell { border-color: var(--ours); box-shadow: 0 0 0 1px var(--ours); }
/* show the FULL frame — never crop (frames are 414x239) */
table.dgrid td .cell img { width: 100%; height: auto; display: block; cursor: zoom-in; }
.rowlabel-strong { display:inline-flex; align-items:center; gap:6px; }
.ours-pill { font-size: 10px; font-weight: 800; letter-spacing:.04em; color:#fff; background: var(--ours); border-radius: 5px; padding: 1px 5px; }

/* figure grids: sample groups + non-highlighted target */
table.figgrid td[rowspan] { vertical-align: middle; }
table.figgrid tr.ours td .cell.tgt { border-color: var(--line); box-shadow: none; }
table.figgrid tr.sample-sep > * { padding-top: 16px; }
table.figgrid td .cell { max-width: 300px; }

/* reference-style exemplar column (paper Fig. 3/5 "Ref Style").
   One exemplar per row; the td stretches to the row height (set by the
   square generated cells) and the image fills it, so every ref is the
   same height as the generated images and the same width as each other. */
table.figgrid-ref td.refcell { width: 12%; position: relative; padding: 3px; }
table.figgrid-ref td.refcell > .cell { position: absolute; inset: 3px; min-width: 0; }
table.figgrid-ref td.refcell > .cell img { width: 100%; height: 100%; object-fit: cover; }
/* center the row labels in their own column, clear of the ref exemplars */
table.figgrid-ref th.rowhead { text-align: center; padding: 0 12px; min-width: 92px; }
table.figgrid-ref tr.ours .rowlabel-strong { flex-direction: column; align-items: center; gap: 4px; }

/* legend */
.legend { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin: 14px 0 0; font-size:13.5px; color:var(--ink-soft); }
.legend span { display:inline-flex; align-items:center; gap:7px; }
.legend .sw { width: 13px; height:13px; border-radius:4px; display:inline-block; }
.legend .sw.kf { background: var(--accent); }
.legend .sw.ours { background: var(--ours); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.tab {
  padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft); font-size: 15px; font-weight: 550; cursor: pointer;
  transition: all .12s ease;
}
.tab:hover { border-color: var(--accent); color: var(--accent-dark); }
.tab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.tabpane { display: none; }
.tabpane.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* ---------- Carousel (one case at a time) ---------- */
.carousel-nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-bottom: 16px; }
.cbtn {
  width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .12s ease, color .12s ease, box-shadow .12s ease;
}
.cbtn:hover { border-color: var(--accent); color: var(--accent-dark); box-shadow: var(--shadow); }
.cbtn:active { transform: translateY(1px); }
.ccount { font-size: 14.5px; color: var(--ink-soft); font-variant-numeric: tabular-nums; min-width: 58px; text-align: center; }
.ccount b { color: var(--ink); font-weight: 700; }
.carousel-slides { position: relative; }
.cslide { display: none; }
.cslide.active { display: block; animation: fade .25s ease; }

/* ---------- Placeholder figure grid (Fig2 / Fig4 to be filled) ---------- */
.ph-note {
  display:flex; align-items:center; gap:10px; justify-content:center;
  font-size: 13.5px; color: var(--ink-faint); margin: 0 0 16px;
}
.ph-note .dot { width:8px; height:8px; border-radius:50%; background: var(--accent); }
table.phgrid { border-collapse: separate; border-spacing: 0; margin: 0 auto; width: 100%; }
table.phgrid th.colhead { font-size: 12.5px; font-weight:600; color: var(--ink-soft); padding: 0 0 8px; text-align:center; white-space:nowrap; }
table.phgrid th.rowhead { font-size: 13px; font-weight:600; color: var(--ink); text-align:right; padding: 0 12px 0 0; white-space:nowrap; }
table.phgrid tr.ours th.rowhead { color: var(--ours); font-weight:700; }
table.phgrid td { padding: 3px; }
table.phgrid .cell {
  aspect-ratio: 1/1; min-width: 92px; border-radius: 6px;
  border: 1.5px dashed var(--line); background: var(--bg-alt);
  display:flex; align-items:center; justify-content:center; color: var(--ink-faint); font-size: 18px;
}
table.phgrid tr.ours .cell { border-color: var(--ours); }
.grp-sep td { padding-top: 10px; }

/* ---------- Quant table ---------- */
.qtable-scroll { overflow-x: auto; }
table.qtable { border-collapse: collapse; margin: 0 auto; font-size: 14.5px; min-width: 640px; width: 100%; }
table.qtable th, table.qtable td { padding: 8px 12px; text-align: center; border-bottom: 1px solid var(--line); }
table.qtable thead th { color: var(--ink-soft); font-weight: 600; font-size: 13px; border-bottom: 2px solid var(--line); }
table.qtable td.method, table.qtable th.method { text-align: left; font-weight: 550; }
table.qtable tr.ours { background: var(--ours-soft); }
table.qtable tr.ours td { font-weight: 700; color: var(--ink); }
table.qtable tr.teacher td { color: var(--ink-faint); font-style: italic; }
table.qtable .best { color: var(--ours); font-weight: 800; }
.qcap { text-align:center; color: var(--ink-faint); font-size: 13px; margin-top: 12px; }
table.qtable tr.fail td { color: var(--warn); font-weight: 700; background: #fdf3f5; }
table.qtable tr.grp td, table.qtable tr.grp th { border-top: 2px solid var(--line); }
.abl-block { margin-top: 26px; }

/* ---------- BibTeX ---------- */
.bibtex { position: relative; }
.bibtex pre {
  background: #12151f; color: #dfe3ee; border-radius: var(--radius);
  padding: 22px 22px; overflow-x: auto; font-size: 13.5px; line-height: 1.6;
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace;
}
.bibtex .copy {
  position: absolute; top: 12px; right: 12px;
  background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px; padding: 5px 12px; font-size: 12.5px; cursor: pointer;
}
.bibtex .copy:hover { background: rgba(255,255,255,.2); }

/* ---------- Narrative content ---------- */
.eyebrow { text-align: center; font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-dark); margin: 0 0 8px; }
.prose { max-width: 780px; margin: 0 auto; }
.prose p { color: var(--ink-soft); font-size: 16.5px; }
.prose p.lead { color: var(--ink); font-size: 18px; }
.prose b { color: var(--ink); }
.prose .term { color: var(--accent-dark); font-weight: 650; }
.prose .term-bad { color: var(--warn); font-weight: 650; }
.prose .term-good { color: var(--ours); font-weight: 650; }

/* contribution cards */
.contribs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 8px; }
.contrib { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 24px; box-shadow: var(--shadow); }
.contrib .num { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--accent-soft); color: var(--accent-dark); font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.contrib h4 { margin: 0 0 6px; font-size: 16.5px; }
.contrib p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

/* equation display block */
.eq {
  max-width: 780px; margin: 20px auto; display: flex; align-items: center; gap: 14px;
  background: var(--bg-alt); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 16px 20px;
}
.eq .body { flex: 1; text-align: center; font-size: 17px; color: var(--ink);
  font-family: "SF Mono", ui-monospace, Menlo, Consolas, monospace; overflow-x: auto; }
.eq .tag { flex: 0 0 auto; color: var(--ink-faint); font-size: 13px; }
.eq.warn { background: #fdf3f5; border-color: #f6d7dd; }
.eq.good { background: var(--ours-soft); border-color: #cdeede; }
.eqnote { max-width: 780px; margin: -6px auto 0; text-align: center; color: var(--ink-faint); font-size: 13.5px; }

/* prominent paper boxes: Definition / Finding (mirrors the boxed callouts in the paper) */
.paperbox {
  max-width: 860px; margin: 32px auto 0; position: relative;
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 26px 26px 22px; background: var(--bg-card); box-shadow: var(--shadow);
  overflow: hidden;
}
.paperbox::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
}
.paperbox .pb-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px; margin-bottom: 12px;
}
.paperbox .pb-label svg { width: 14px; height: 14px; fill: currentColor; }
.paperbox .pb-title { font-family: var(--serif); font-weight: 600; font-size: 21px; margin: 0 0 8px; letter-spacing: -.01em; }
.paperbox p { margin: 0; color: var(--ink-soft); font-size: 16px; line-height: 1.62; }
.paperbox p + p { margin-top: 10px; }
.paperbox b { color: var(--ink); }
.paperbox .katex { color: var(--ink); }
/* Definition — the failure mode (warn accent) */
.paperbox.def { background: linear-gradient(180deg, #fdf5f6 0%, var(--bg-card) 70%); }
.paperbox.def::before { background: linear-gradient(var(--warn), #b23a4a); }
.paperbox.def .pb-label { color: var(--warn); background: #fbe1e6; }
.paperbox.def .pb-title { color: #9c2f3d; }
/* Finding — the takeaway (accent/violet) */
.paperbox.finding { background: linear-gradient(180deg, #f4f6ff 0%, var(--bg-card) 70%); }
.paperbox.finding::before { background: linear-gradient(var(--accent), #7048e8); }
.paperbox.finding .pb-label { color: var(--accent-dark); background: var(--accent-soft); }
.paperbox.finding .pb-title { color: var(--accent-dark); }
@media (max-width: 720px) { .paperbox { padding: 22px 18px 18px; } .paperbox .pb-title { font-size: 19px; } }

/* callout box */
.callout { max-width: 820px; margin: 22px auto 0; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 16px 20px; background: var(--bg-card); box-shadow: var(--shadow); }
.callout.bad { border-left-color: var(--warn); }
.callout.good { border-left-color: var(--ours); }
.callout h4 { margin: 0 0 5px; font-size: 15.5px; }
.callout.bad h4 { color: var(--warn); } .callout.good h4 { color: var(--ours); }
.callout p { margin: 0; color: var(--ink-soft); font-size: 14.5px; line-height: 1.55; }

/* two-setting comparison */
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 8px; }
.setting { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow); }
.setting h4 { margin: 0 0 4px; font-size: 16.5px; }
.setting .who { font-size: 13px; color: var(--ink-faint); margin: 0 0 12px; }
.setting p { color: var(--ink-soft); font-size: 14px; margin: 0 0 12px; }
.condeq { font-size: 13px; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; color: var(--ink); }
.condeq .katex-display { text-align: left; margin: 0; }
.condeq .hl { color: var(--warn); font-weight: 700; }
.condeq-center { max-width: 620px; margin: 0 auto; background: var(--bg-card); }
.condeq-center .katex-display { text-align: center; }

/* verdict chip inside setting-card titles */
.setting-verdict {
  display: inline-block; vertical-align: 2px; margin-left: 8px;
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 999px; white-space: nowrap;
}
.setting-verdict.good { color: var(--ours); background: var(--ours-soft); }
.setting-verdict.bad  { color: var(--warn); background: #fbe1e6; }
.clab-rms { font-weight: 500; color: var(--ink-faint); font-size: 12px; }

/* ---------- Interactive branch-error curves ---------- */
.curvelab {
  max-width: 1180px; margin: 0 auto;
  background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 22px 24px 16px;
}
.clab-bar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.clab-tabs { margin-bottom: 0; justify-content: flex-start; }
.clab-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.clab-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 13px; border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink-soft); font-size: 13.5px; font-weight: 550; cursor: pointer;
  font-family: var(--font); transition: all .12s ease;
}
.clab-chip .csw { width: 14px; height: 4px; border-radius: 2px; display: inline-block; }
.clab-chip:not(.on) { opacity: .45; }
.clab-chip:not(.on) .csw { background: var(--ink-faint) !important; }
.clab-chip:hover { border-color: var(--accent); }
.clab-panels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.clab-panel { margin: 0; min-width: 0; }
.clab-pt { text-align: center; font-size: 14.5px; font-weight: 650; color: var(--ink); margin: 0 0 4px; }
.clab-chart { position: relative; }
.clab-chart svg { width: 100%; height: auto; display: block; cursor: crosshair; }
.cl-grid { stroke: var(--line); stroke-width: 1; }
.cl-axis { stroke: #c9cede; stroke-width: 1; }
.cl-ylab { font-size: 10px; fill: var(--ink-faint); text-anchor: end; font-family: var(--font); font-variant-numeric: tabular-nums; }
.cl-xlab { font-size: 10px; fill: var(--ink-faint); text-anchor: middle; font-family: var(--font); font-variant-numeric: tabular-nums; }
.cl-serie {
  fill: none; stroke-width: 2;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: drawline 1.1s cubic-bezier(.3,.6,.3,1) forwards;
}
@keyframes drawline { to { stroke-dashoffset: 0; } }
.cl-hover[hidden] { display: none; } /* SVG <g> ignores the hidden attr in some engines */
.cl-cross { stroke: var(--ink-faint); stroke-width: 1; stroke-dasharray: 3 3; }
.cl-dot { stroke: #fff; stroke-width: 1.4; }
.clab-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(18, 21, 31, .94); color: #eef0f7; border-radius: 9px;
  padding: 8px 11px; font-size: 12px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 8px 24px rgba(10, 12, 20, .28);
}
.clab-tip .step { font-weight: 700; color: #fff; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.clab-tip .row { display: flex; align-items: center; gap: 7px; }
.clab-tip .row .csw { width: 12px; height: 4px; border-radius: 2px; display: inline-block; flex: 0 0 auto; }
.clab-tip .row .lab { color: #b9bfd1; }
.clab-tip .row b { margin-left: auto; padding-left: 12px; font-variant-numeric: tabular-nums; }
.clab-tools { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 10px; font-size: 13.5px; color: var(--ink-soft); }
.clab-toggle { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; user-select: none; }
.clab-toggle input { accent-color: var(--accent); width: 15px; height: 15px; }
.clab-x { margin-left: auto; color: var(--ink-faint); font-size: 12.5px; }
.clab-note { max-width: 980px; margin: 14px auto 4px; text-align: center; color: var(--ink-soft); font-size: 14px; line-height: 1.6; }
@media (max-width: 900px) { .clab-panels { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .cl-serie { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } }

/* results section intro note */
.res-intro { max-width: 820px; margin: 0 auto 26px; }
.res-intro p { color: var(--ink-soft); font-size: 15.5px; text-align: center; }

@media (max-width: 820px) {
  .contribs { grid-template-columns: 1fr; }
  .settings { grid-template-columns: 1fr; }
}

/* ---------- KaTeX integration ---------- */
.katex-display { margin: 0; }
.katex { font-size: 1.05em; }
.eq .body .katex { font-size: 1.18em; }
.eq .body { font-family: inherit; }
.teq .katex, .nba-eq .katex, .nba-def .katex, .condeq .katex, .pr-eq .katex { font-size: 1em; }
.nba-eq .katex { color: var(--warn); }
/* keep the tag label sans, not stretched by KaTeX */
.eq .tag { font-family: var(--font); }

/* ============================================================
   Fancy polish: motion, depth, gradients
   ============================================================ */

/* scroll progress bar */
.progress-bar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 200;
  background: linear-gradient(90deg, var(--accent), #7048e8 70%, #b06ab3);
  border-radius: 0 3px 3px 0; transition: width .08s linear;
  box-shadow: 0 0 10px rgba(63,94,251,.4);
}

/* animated hero aurora */
header.hero { position: relative; overflow: hidden; }
header.hero::before, header.hero::after {
  content: ""; position: absolute; z-index: 0; border-radius: 50%;
  filter: blur(72px); opacity: .55; pointer-events: none;
}
header.hero::before {
  width: 540px; height: 540px; top: -240px; left: -120px;
  background: radial-gradient(circle, #c6d2ff, transparent 70%);
  animation: drift1 17s ease-in-out infinite alternate;
}
header.hero::after {
  width: 480px; height: 480px; top: -200px; right: -110px;
  background: radial-gradient(circle, #e6d8ff, transparent 70%);
  animation: drift2 21s ease-in-out infinite alternate;
}
header.hero .wrap { position: relative; z-index: 1; }
@keyframes drift1 { from { transform: translate(0,0) scale(1); } to { transform: translate(70px,46px) scale(1.18); } }
@keyframes drift2 { from { transform: translate(0,0) scale(1); } to { transform: translate(-56px,54px) scale(1.12); } }

/* gradient title accent */
h1.title .hl {
  background: linear-gradient(115deg, var(--accent-dark) 10%, #7048e8 60%, #b06ab3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

/* staggered hero load-in */
header.hero .wrap > * { animation: heroIn .7s cubic-bezier(.2,.7,.2,1) both; }
header.hero .venue   { animation-delay: .02s; }
header.hero .title   { animation-delay: .09s; }
header.hero .authors { animation-delay: .17s; }
header.hero .affil   { animation-delay: .23s; }
header.hero .contact { animation-delay: .28s; }
header.hero .links   { animation-delay: .34s; }
@keyframes heroIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: none; } }

/* scroll-reveal sections (progressive enhancement: only hides once JS marks <html>) */
.has-reveal section {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1);
}
.has-reveal section.in { opacity: 1; transform: none; }

/* depth on hover for cards */
.contrib, .setting, .card, .callout { transition: transform .18s ease, box-shadow .18s ease; }
.contrib:hover, .setting:hover, .card:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(20,25,45,.11); }
.btn { transition: transform .14s ease, box-shadow .14s ease, background .14s ease, border-color .14s ease; }

/* perf: promote aurora to its own compositor layer (blur rendered once) */
header.hero::before, header.hero::after { will-change: transform; }

/* section-title accent underline (grows in on reveal) */
h2.sec { position: relative; }
h2.sec::after {
  content: ""; display: block; width: 52px; height: 3px; margin: 12px auto 0;
  border-radius: 2px; background: linear-gradient(90deg, var(--accent), #7048e8);
}
.has-reveal section h2.sec::after { width: 0; transition: width .6s ease .15s; }
.has-reveal section.in h2.sec::after { width: 52px; }

/* gentle hover zoom on grid images (cell clips the overflow) */
table.dgrid td .cell img { transition: transform .35s ease; }
table.dgrid td .cell:hover img { transform: scale(1.045); }

/* shimmer sweep on the OURS pill */
.ours-pill { position: relative; overflow: hidden; }
.ours-pill::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%);
  transform: translateX(-130%); animation: shine 3.4s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { transform: translateX(-130%); } 78%, 100% { transform: translateX(130%); } }

/* sheen sweep on buttons (on hover) */
.btn { position: relative; overflow: hidden; }
.btn::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.28) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .6s ease;
}
.btn:hover::after { transform: translateX(130%); }

/* floating dot navigation */
.dotnav { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); z-index: 150;
  display: flex; flex-direction: column; gap: 11px; }
.dotnav .dot { position: relative; width: 9px; height: 9px; border-radius: 50%;
  background: var(--line); cursor: pointer; transition: transform .2s ease, background .2s ease; }
.dotnav .dot:hover, .dotnav .dot.active { background: var(--accent); transform: scale(1.4); }
.dotnav .dot.active { box-shadow: 0 0 0 4px var(--accent-soft); }
.dotnav .dot-label { position: absolute; right: 20px; top: 50%;
  transform: translateY(-50%) translateX(6px); opacity: 0; pointer-events: none; white-space: nowrap;
  background: var(--ink); color: #fff; font-size: 12px; padding: 4px 9px; border-radius: 7px;
  box-shadow: var(--shadow); transition: opacity .18s ease, transform .18s ease; }
.dotnav .dot:hover .dot-label { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 1180px) { .dotnav { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .has-reveal section { opacity: 1 !important; transform: none !important; }
  header.hero::before, header.hero::after { animation: none; }
  header.hero .wrap > * { animation: none; }
  .ours-pill::after { display: none; }
  table.dgrid td .cell:hover img { transform: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Footer ---------- */
footer { padding: 40px 0 56px; text-align: center; color: var(--ink-faint); font-size: 14px; }
footer a { color: var(--ink-soft); }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed; inset: 0; background: rgba(10,12,20,.9); display: none;
  align-items: center; justify-content: center; z-index: 100; cursor: zoom-out; padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img { max-width: 96vw; max-height: 92vh; border-radius: 8px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }

/* ---------- Responsive ---------- */
@media (max-width: 720px) {
  body { font-size: 16px; }
  .cards { grid-template-columns: 1fr; }
  section { padding: 40px 0; }
  table.dgrid td .cell { min-width: 84px; }
}