/* ── Reset & Base ─────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:'Noto Sans',system-ui,-apple-system,sans-serif;
  color:#1a1a2e;background:#fafbfd;line-height:1.7;
}
a{color:#4361ee;text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;height:auto}

/* ── Layout ──────────────────────────────────────── */
.container{max-width:980px;margin:0 auto;padding:0 24px}
section{padding:48px 0}
section+section{border-top:1px solid #e8ecf1}

/* ── Hero ────────────────────────────────────────── */
.hero{
  text-align:center;padding:72px 0 48px;
  background:linear-gradient(170deg,#f0f4ff 0%,#fafbfd 60%);
}
.hero .venue{
  display:inline-block;
  background:#4361ee;color:#fff;
  font-size:.82rem;font-weight:700;letter-spacing:.04em;
  padding:4px 14px;border-radius:20px;margin-bottom:18px;
}
.hero h1{
  font-size:2.1rem;font-weight:800;line-height:1.25;
  max-width:820px;margin:0 auto 20px;color:#0f0f23;
}
.hero .authors{font-size:1rem;color:#444;margin-bottom:6px}
.hero .authors .corresponding::after{content:'*';vertical-align:super;font-size:.7em;color:#4361ee}
.hero .affiliation{font-size:.92rem;color:#666;margin-bottom:24px}
.hero .links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero .links a{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 20px;border-radius:8px;font-size:.9rem;font-weight:600;
  transition:all .2s;
}
.hero .links a.primary{background:#4361ee;color:#fff}
.hero .links a.primary:hover{background:#3a56d4;text-decoration:none}
.hero .links a.secondary{background:#fff;color:#4361ee;border:1.5px solid #4361ee}
.hero .links a.secondary:hover{background:#f0f4ff;text-decoration:none}

/* ── Section headings ────────────────────────────── */
.section-title{
  font-size:1.6rem;font-weight:700;text-align:center;
  margin-bottom:28px;color:#0f0f23;
}

/* ── Abstract ────────────────────────────────────── */
.abstract-text{
  max-width:800px;margin:0 auto;
  font-size:.97rem;color:#333;text-align:justify;
}

/* ── Teaser image ────────────────────────────────── */
.teaser{text-align:center;padding-bottom:0}
.teaser img{
  max-width:90%;border-radius:8px;
  box-shadow:0 4px 20px rgba(0,0,0,.08);
}
.teaser .caption{
  font-size:.85rem;color:#666;margin-top:12px;
  max-width:800px;margin-left:auto;margin-right:auto;
}

/* ── Method ──────────────────────────────────────── */
.method-overview{text-align:center}
.method-overview img{
  max-width:95%;border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);
}
.method-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:20px;margin-top:32px;
}
.method-card{
  background:#fff;border-radius:12px;padding:24px;
  border:1px solid #e8ecf1;
  transition:box-shadow .2s;
}
.method-card:hover{box-shadow:0 4px 16px rgba(67,97,238,.12)}
.method-card h3{
  font-size:1.05rem;font-weight:700;color:#4361ee;margin-bottom:8px;
}
.method-card p{font-size:.88rem;color:#555;line-height:1.55}

/* ── Results table ───────────────────────────────── */
.results-table-wrap{overflow-x:auto;margin:0 auto;max-width:100%}
.results-table{
  width:100%;border-collapse:collapse;font-size:.88rem;
  background:#fff;border-radius:8px;overflow:hidden;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.results-table th,.results-table td{
  padding:10px 14px;text-align:center;
  border-bottom:1px solid #eef0f4;
}
.results-table thead th{
  background:#f4f6fb;font-weight:700;color:#0f0f23;
  position:sticky;top:0;vertical-align:middle;
  white-space:nowrap;
}
.results-table tbody tr:hover{background:#f8f9ff}
.results-table .ours{background:#eef2ff;font-weight:700}
.results-table .best{color:#4361ee;font-weight:800}
.results-table .method-name{text-align:left;font-weight:600}
.results-table .separator td{
  border-bottom:2px solid #d0d5e0;padding:0;height:2px;
}

/* ── Interactive Demo ────────────────────────────── */
.demo-section{background:#f4f6fb;border-radius:16px;padding:32px;margin-top:16px}
.demo-layout{
  display:grid;grid-template-columns:1fr 320px;
  gap:24px;align-items:start;
}
.demo-canvas-wrap{
  background:#0f0f23;border-radius:12px;overflow:hidden;
  position:relative;aspect-ratio:1/1;
}
.demo-canvas-wrap canvas{
  width:100%;height:100%;display:block;
}
.demo-controls{
  display:flex;flex-direction:column;gap:16px;
}
.demo-controls h3{font-size:1rem;font-weight:700;color:#0f0f23}
.control-group{
  background:#fff;border-radius:10px;padding:16px;
  border:1px solid #e0e4ea;
}
.control-group label{
  display:flex;justify-content:space-between;
  font-size:.82rem;font-weight:600;color:#444;margin-bottom:4px;
}
.control-group input[type=range]{
  width:100%;accent-color:#4361ee;margin-bottom:8px;
}
.demo-btn{
  padding:8px 16px;border-radius:8px;border:none;
  font-size:.85rem;font-weight:600;cursor:pointer;
  transition:all .2s;
}
.demo-btn.primary{background:#4361ee;color:#fff}
.demo-btn.primary:hover{background:#3a56d4}
.demo-btn.secondary{background:#e8ecf1;color:#333}
.demo-btn.secondary:hover{background:#d8dde6}
.demo-btn.danger{background:#ef476f;color:#fff}
.demo-btn.danger:hover{background:#d63b5e}
.demo-actions{display:flex;gap:8px;flex-wrap:wrap}
.demo-legend{
  font-size:.78rem;color:#666;line-height:1.5;
  background:#f8f9fb;padding:12px;border-radius:8px;
}
.demo-legend span{font-weight:600}
.demo-info{
  font-size:.82rem;color:#555;background:#fff;
  padding:12px;border-radius:8px;border:1px solid #e0e4ea;
  line-height:1.5;
}
.demo-tabs{display:flex;gap:6px;margin-bottom:12px}
.demo-tab{
  padding:6px 14px;border-radius:6px;border:none;
  font-size:.82rem;font-weight:600;cursor:pointer;
  background:#e8ecf1;color:#555;transition:all .2s;
}
.demo-tab.active{background:#4361ee;color:#fff}

/* Keypoint source toggles */
.kp-src-btn{
  display:flex;align-items:center;width:100%;gap:8px;
  padding:7px 10px;margin-bottom:6px;border-radius:8px;
  border:1px solid #e0e4ea;background:#f8f9fb;color:#333;
  font-size:.82rem;font-weight:600;cursor:pointer;transition:all .15s;
}
.kp-src-btn:hover{background:#eef2ff}
.kp-src-btn.off{opacity:.4;text-decoration:line-through;background:#f1f3f5}
.kp-dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 auto}

/* Method detail figures (OCSF / DPTF) */
.method-detail{margin-top:36px;text-align:center}
.method-detail img{
  max-width:100%;border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,.06);border:1px solid #eef0f4;
}
.method-detail .caption{
  font-size:.84rem;color:#666;margin-top:12px;
  max-width:840px;margin-left:auto;margin-right:auto;text-align:justify;
}

/* ── Video / Qualitative ─────────────────────────── */
.qual-grid{
  display:grid;grid-template-columns:1fr 1fr;
  gap:20px;margin-top:20px;
}
.qual-item{
  background:#fff;border-radius:12px;overflow:hidden;
  border:1px solid #e8ecf1;
}
.qual-item video,.qual-item img{width:100%;display:block}
.qual-item .caption{padding:12px;font-size:.82rem;color:#555}
.placeholder-box{
  background:#e8ecf1;display:flex;align-items:center;justify-content:center;
  min-height:200px;color:#888;font-size:.9rem;font-weight:600;
  border-radius:8px;
}

/* ── BibTeX ───────────────────────────────────────── */
.bibtex-block{
  background:#1a1a2e;color:#a8d8b9;
  padding:20px 24px;border-radius:10px;
  font-family:'Fira Code','Consolas',monospace;
  font-size:.82rem;line-height:1.6;
  overflow-x:auto;position:relative;
}
.bibtex-block .copy-btn{
  position:absolute;top:10px;right:10px;
  background:rgba(255,255,255,.12);color:#ccc;
  border:none;padding:4px 12px;border-radius:6px;
  font-size:.75rem;cursor:pointer;
}
.bibtex-block .copy-btn:hover{background:rgba(255,255,255,.2);color:#fff}

/* ── Footer ──────────────────────────────────────── */
footer{
  text-align:center;padding:32px 0;
  font-size:.82rem;color:#999;
  border-top:1px solid #e8ecf1;
}

/* ── Responsive ──────────────────────────────────── */
@media(max-width:768px){
  .hero h1{font-size:1.5rem}
  .method-cards{grid-template-columns:1fr}
  .demo-layout{grid-template-columns:1fr}
  .qual-grid{grid-template-columns:1fr}
  .demo-canvas-wrap{aspect-ratio:auto;height:400px}
}