:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #152239;
  /* background: #f5f8fc; */
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; }
a { color: inherit; }

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  padding: 0 max(24px, calc((100vw - 1180px) / 2));
  border-bottom: 1px solid rgba(201, 214, 230, .82);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(18px);
}

.brand { color: #0d7397; font-weight: 850; letter-spacing: -.025em; text-decoration: none; }
.nav nav { display: flex; align-items: center; gap: 22px; }
.nav nav a { color: #526176; font-size: .86rem; font-weight: 680; text-decoration: none; }
.nav nav a:hover, .nav nav .navExternal { color: #0d7397; }

main { overflow: hidden; }
.hero, .section { width: min(1080px, calc(100% - 40px)); margin: 0 auto; }

.hero { padding: 82px 0 78px; text-align: center; }
.venue, .sectionHeading > p { margin: 0 0 12px; color: #0d86ad; font-size: .76rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { margin: 0 auto; font-size: clamp(38px, 6vw, 66px); font-weight: 700; line-height: 1.03; letter-spacing: -.052em; }
.authors { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; margin-top: 28px; }
.authors a { color: #0d789e; font-weight: 700; text-decoration: underline; text-decoration-color: #aed0ff88; text-underline-offset: 4px; }
.authors a:hover { text-decoration: underline; text-underline-offset: 4px; }
.affiliation { margin: 12px 0 0; color: #748197; font-size: .91rem; }
.summary { max-width: 820px; margin: 30px auto 0; color: #4c5e75; font-size: 1.08rem; line-height: 1.75; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 32px; }
.actions a { padding: 11px 17px; border: 1px solid #cad6e3; border-radius: 7px; background: #fff; color: #26364d; font-size: .88rem; font-weight: 750; text-decoration: none; box-shadow: 0 5px 16px rgba(35, 58, 86, .06); }
.actions a:hover { border-color: #8fc9dc; background: #f0fafd; color: #26464d}
.actions .primary { border-color: #25364f; background: #25364f; color: #fff; }

.section { padding: 76px 0; border-top: 1px solid #dce5ef; }
.sectionHeading h2 { max-width: 820px; margin: 0; font-size: clamp(28px, 4vw, 40px); font-weight: bold; line-height: 1.12; letter-spacing: -.04em; }
.sectionText, .note, .conclusionText { max-width: 820px; color: #52647a; font-size: 1rem; line-height: 1.75; }
.sectionText { margin: 22px 0 0; }
.note { margin: 18px auto 0; text-align: center; }

.videoFrame { position: relative; width: min(980px, 100%); margin: 34px auto 0; aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #d7e1ec; border-radius: 22px; background: #081523; box-shadow: 0 24px 60px rgba(19, 45, 75, .16); }
.videoFrame iframe { width: 100%; height: 100%; border: 0; }

.figure { margin: 34px 0 0; padding: 22px; border: 1px solid #dbe4ee; border-radius: 18px; background: #fff; box-shadow: 0 15px 38px rgba(37, 59, 86, .07); }
.figure img { display: block; width: 100%; max-height: 520px; object-fit: contain; }
.wideFigure img { max-height: none; }
.figure figcaption { margin-top: 16px; color: #657489; font-size: .88rem; line-height: 1.65; }
.figure figcaption strong { color: #2c3b51; }

.featureGrid, .metricGrid, .datasetGrid { display: grid; gap: 16px; margin-top: 28px; }
.featureGrid, .datasetGrid { grid-template-columns: repeat(3, 1fr); }
.featureGrid article, .datasetGrid article { padding: 24px; border: 1px solid #dce5ee; border-radius: 16px; background: #fff; }
.featureGrid span { color: #0d86ad; font-size: .74rem; font-weight: 850; letter-spacing: .13em; }
.featureGrid h3, .datasetGrid h3 { margin: 12px 0 8px; font-size: 1.04rem; }
.featureGrid p, .datasetGrid p { margin: 0; color: #617086; font-size: .91rem; line-height: 1.65; }

.metricGrid { grid-template-columns: repeat(4, 1fr); }
.metricGrid article { display: flex; flex-direction: column; padding: 24px; border: 1px solid #cfe0ea; border-radius: 16px; background: linear-gradient(145deg, #fff, #eef8fb); }
.metricGrid strong { color: #0b7498; font-size: clamp(1.65rem, 3vw, 2.35rem); letter-spacing: -.04em; }
.metricGrid span { margin-top: 8px; font-weight: 750; }
.metricGrid small { margin-top: 7px; color: #758297; line-height: 1.45; }

.figureGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.figureGrid .figure { display: flex; flex-direction: column; }
.figureGrid .figure img { flex: 1; min-height: 290px; }

.qualitativeGrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 32px; }
.qualitativeGrid a { position: relative; overflow: hidden; border: 1px solid #d7e1ec; border-radius: 17px; background: #fff; box-shadow: 0 15px 35px rgba(28, 50, 77, .08); text-decoration: none; }
.qualitativeGrid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .25s ease; }
.qualitativeGrid a:hover img { transform: scale(1.018); }
.qualitativeGrid span { position: absolute; left: 14px; bottom: 14px; padding: 7px 11px; border-radius: 999px; background: rgba(8, 22, 38, .82); color: #fff; font-size: .78rem; font-weight: 800; backdrop-filter: blur(10px); }

.conclusionText { margin: 22px 0 0; font-size: 1.08rem; }
.citationSection pre { margin: 28px 0 0; padding: 22px 24px; overflow-x: auto; border: 1px solid #d9dee6; border-radius: 9px; background: #f6f7f9; color: #263347; font: 13px/1.7 SFMono-Regular,Consolas,Liberation Mono,monospace; }

body > footer { display: flex; justify-content: space-between; gap: 20px; padding: 28px max(24px, calc((100vw - 1120px) / 2)); border-top: 1px solid #d9e3ec; background: #fff; color: #6f7e92; font-size: .84rem; }
body > footer div { display: flex; gap: 18px; }
body > footer a { color: #0d789e; text-decoration: none; }

/* Table styles */
.caption {
  margin: 12px 2px 0;
  text-align: justify;
  font-size: 14px;
  color: #7b8594;
  line-height: 1.55;
}
.table-container {
  overflow-x: auto;
  width: 100%;
  border: 1px solid #dfe3e9;
  border-radius: 9px;
}
table {
  border-collapse: collapse;
  width: 100%;
  min-width: 800px;
  text-align: center;
  font-size: 13px;
  /* border-top: 1px solid #dfe3e9; */
  /* border-bottom: 1px solid #dfe3e9; */
}
.auc-row {
  background: #f6f7f9;
  color: #4a5668;
  font-size: 12px;
  font-weight: 700;
}
thead th {
  background: #f6f7f9;
  color: #4a5668;
  font-size: 12px;
  font-weight: 700;
}
th, td {
  padding: 10px 8px;
  border-bottom: 1px solid #ebebeb;
  /* border-left: 1px solid #ccc;
  border-right: 1px solid #ccc; */
}
th {
  border-bottom: 1px solid #dfe3e9;
  font-weight: normal;
}
tr:last-child td {
  border-bottom: none;
}
.border-bottom {
  border-bottom: 1px solid #b3b3b3;
}
/* Remove outer left/right borders for a cleaner academic look */
th:first-child, td:first-child { border-left: none; }
th:last-child, td:last-child { border-right: none; }

.vertical-text {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  vertical-align: middle;
  color: #4a5668;
  font-weight: bold;
  background-color: #f6f7f9;
  border-right: 1px solid #b3b3b3;
}
.method-col {
  text-align: left;
  white-space: nowrap;
}
.highlight-bg {
  background-color: #dcedf7a2;
}
.cam-icon {
  color: #b8860b;
  font-size: 12px;
  margin-right: 4px;
}
.bold { font-weight: bold; }
.underline { text-decoration: underline; }

@media (max-width: 850px) {
  .nav nav a:not(.navExternal) { display: none; }
  .featureGrid, .datasetGrid { grid-template-columns: 1fr; }
  .metricGrid { grid-template-columns: 1fr 1fr; }
  .figureGrid { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .hero, .section { width: min(100% - 24px, 1120px); }
  .hero { padding: 72px 0 64px; }
  .section { padding: 68px 0; }
  .summary { font-size: 1rem; }
  .actions { display: grid; grid-template-columns: 1fr 1fr; }
  .actions a { text-align: center; }
  .videoFrame { border-radius: 13px; }
  .figure { padding: 12px; border-radius: 13px; }
  .metricGrid, .qualitativeGrid { grid-template-columns: 1fr; }
  body > footer { flex-direction: column; }
}