@import url("https://fonts.googleapis.com/css2?family=Exo:wght@600;700;800&display=swap");

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; padding:0;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color:#13243c;
  background:
    radial-gradient(920px 430px at 12% -12%,rgba(82,148,255,.20) 0%,rgba(82,148,255,0) 74%),
    radial-gradient(900px 370px at 86% -15%,rgba(44,222,255,.13) 0%,rgba(44,222,255,0) 72%),
    linear-gradient(180deg,#f2f7ff 0%,#f3f8ff 34%,#f1f7ff 72%,#eef5ff 100%);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ---------- layout ---------- */
.page-wrap{
  max-width:1160px;
  margin:1rem auto 0 auto;
  padding:2.2rem 1.6rem .35rem 1.6rem;
  background:linear-gradient(180deg,rgba(253,255,255,.92) 0%,rgba(246,251,255,.90) 100%);
  border:1px solid #dce8fb;
  border-radius:18px;
  box-shadow:0 16px 40px rgba(16,53,104,.11),inset 0 1px 0 rgba(255,255,255,.92);
}

/* ---------- floating nav ---------- */
.floating-toc{
  position:fixed;
  left:calc(50% + 596px);
  right:auto;
  top:5.9rem;
  z-index:40;
  width:170px;
  padding:.78rem .72rem;
  border:1px solid #c8d8ef;
  border-radius:12px;
  background:linear-gradient(165deg,rgba(249,252,255,.96) 0%,rgba(239,246,255,.95) 100%);
  backdrop-filter:blur(6px);
  box-shadow:0 12px 28px rgba(15,58,115,.14),inset 0 1px 0 rgba(255,255,255,.85);
}
.toc-title{
  font-family:"Exo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.86rem;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#335980;
  margin:0 0 .35rem 0;
}
.toc-link{
  display:block;
  color:#3e5c7e;
  font-size:.9rem;
  line-height:1.28;
  text-decoration:none;
  padding:.3rem .45rem;
  border-radius:8px;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}
.toc-link:hover{
  background:#eaf2ff;
  color:#1f4e84;
  transform:translateX(1px);
}
.toc-link.active{
  background:#dbe9fd;
  color:#164b82;
  font-weight:700;
}
.back-to-top{
  position:fixed;
  left:calc(50% + 610px);
  right:auto;
  bottom:1.35rem;
  z-index:42;
  border:1px solid #b5cdee;
  border-radius:999px;
  padding:.48rem 1rem;
  font-size:.85rem;
  font-weight:700;
  color:#164b82;
  background:linear-gradient(180deg,#f7fbff 0%,#e7f1ff 100%);
  box-shadow:0 10px 22px rgba(18,70,137,.17);
  cursor:pointer;
  opacity:0;
  transform:translateY(8px);
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease,background .2s ease;
}
.back-to-top:hover{background:linear-gradient(180deg,#f0f7ff 0%,#dcecff 100%)}
.back-to-top.show{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

/* ---------- header ---------- */
.paper-title{
  font-family:"Exo","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  font-size:2.35rem;
  font-weight:800;
  line-height:1.25;
  color:#153d74;
  letter-spacing:.01em;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
  margin:0 0 1.1rem 0;
}
.authors{
  text-align:center;
  font-size:1.22rem;
  color:#253751;
  margin-bottom:.55rem;
}
.authors a{color:#253751;text-decoration:none}
.author-sup{font-size:.62em;vertical-align:super;margin-left:1px}
.ieee-fellow{font-size:.92em;font-style:italic;font-weight:normal;margin-left:3px;color:#555}
.affiliations{text-align:center;font-size:1.05rem;color:#555;margin-bottom:.2rem}
.affiliations-note{text-align:center;font-size:1.02rem;color:#666;margin-bottom:.6rem}
.affiliations-note a{color:#2471a3;text-decoration:none}
.affiliations-note a:hover{text-decoration:underline}

/* relation note */
.relation{
  background:linear-gradient(135deg,#edf5ff 0%,#f7fbff 100%);
  border-left:4px solid #2e6fbd;
  border-radius:0 12px 12px 0;
  padding:.85em 1.15em;
  margin:1.2em 0 1.6em 0;
  font-size:1.05rem;
  color:#26374d;
  box-shadow:0 4px 14px rgba(35,94,170,.08);
  transition:transform .2s ease,box-shadow .2s ease;
}
.relation a{color:#c0392b;font-weight:700;text-decoration:underline}
.relation a:hover{color:#e74c3c}
.relation:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(35,94,170,.14);
}

/* reviewer-facing 4D evidence callout */
.evaluation-highlight{
  margin:1.2em 0 1.6em 0;
  padding:.85em 1.15em;
  border:none;
  border-left:4px solid #bca2d6;
  border-radius:0 12px 12px 0;
  background:linear-gradient(135deg,#fcf2ff 0%,#fff3f7 62%,#fffdfd 100%);
  color:#684656;
  box-shadow:0 4px 14px rgba(194,120,150,.12);
  transition:transform .2s ease,box-shadow .2s ease;
}
.evaluation-highlight:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 24px rgba(194,120,150,.2);
}
.evaluation-tag{
  display:inline-block;
  margin-bottom:.45rem;
  padding:.2rem .58rem;
  border-radius:999px;
  background:#b85a1a;
  color:#fff;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.evaluation-text{
  display:block;
  font-size:1.05rem;
  line-height:1.62;
  color:#684656;
}
.evaluation-text a{
  display:inline-block;
  margin-left:.45rem;
  margin-top:.32rem;
  padding:.2rem .45rem;
  border-radius:999px;
  border:1px solid #c8b3df;
  background:#f7f1ff;
  color:#825091;
  font-weight:700;
  text-decoration:none;
}
.evaluation-text a:hover{
  background:#efe5ff;
  color:#7d59b0;
}

/* abstract */
.abstract-title{
  font-family:"Exo","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  font-size:1.7rem;
  font-weight:800;
  color:#1d4170;
  margin:.1rem 0 .55rem 0;
  letter-spacing:.01em;
  text-transform:uppercase;
}
.abstract-text{
  color:#3f4f61;
  text-align:justify;
  font-size:.95rem;
  line-height:1.57;
  max-width:960px;
  margin:0 auto 1.2rem auto;
  padding:1rem 1.15rem;
  background:linear-gradient(180deg,#f8fbff 0%,#f2f8ff 100%);
  border:1px solid #d9e6f7;
  border-radius:12px;
  box-shadow:0 5px 16px rgba(21,76,143,.08),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.abstract-text:hover{
  transform:translateY(-2px);
  border-color:#c9ddf4;
  box-shadow:0 10px 24px rgba(21,76,143,.14),inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------- section headings ---------- */
.section-bar{
  font-family:"Exo","Helvetica Neue",Helvetica,Arial,sans-serif;
  text-align:center;
  font-size:1.9rem;
  font-weight:800;
  color:#1b3f70;
  margin:3rem -.9rem .8rem -.9rem;
  padding:.72em 1.25rem;
  letter-spacing:-.01em;
  background:
    linear-gradient(105deg,
      #edf4ff 0%,
      #eaf2ff 38%,
      #e7f0ff 66%,
      #ecf6ff 100%);
  border:1px solid #d3e1f5;
  border-radius:10px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 8px 20px rgba(22,78,150,.10);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.section-bar:hover{
  transform:translateY(-2px);
  border-color:#c4d7f0;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 12px 24px rgba(22,78,150,.15);
}
.section-note{
  text-align:center;
  color:#4f6278;
  font-size:.98rem;
  margin:.15rem auto 1.2rem auto;
  max-width:860px;
}

.method-label{
  text-align:center;
  font-size:1.14rem;
  font-weight:700;
  color:#1f4f89;
  margin:1.6rem 0 .6rem 0;
  letter-spacing:.03em;
  text-transform:uppercase;
}

/* ---------- gallery (top showcase) ---------- */
.gallery-row{
  display:flex;
  flex-wrap:wrap;
  gap:1.4rem;
  justify-content:center;
  margin-bottom:1.5rem;
}
.gallery-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  width:340px;
}
.gallery-card video{width:100%;border-radius:10px}
.gallery-card img{border-radius:10px}
.gallery-header{
  display:flex;
  justify-content:space-around;
  width:100%;
  font-size:.97rem;
  font-weight:700;
  color:#354056;
  margin-bottom:.25rem;
}
.gallery-caption{
  text-align:center;
  color:#555;
  font-size:.95rem;
  margin-top:.4em;
  line-height:1.4;
}

/* image-conditioned cards (ref + video) */
.img-card{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.img-card-row{
  display:flex;
  align-items:center;
  gap:1rem;
}
.img-card-row img{width:160px;border-radius:10px;border:1px solid #e8ecf2}
.img-card-row video{width:330px;border-radius:10px}
.img-card .gallery-header{width:calc(160px + 330px + 1rem)}

/* ---------- comparison grids ---------- */
.cmp-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,340px);
  gap:1.2rem;
  justify-content:center;
  margin-bottom:.6rem;
}
.cmp-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(165deg,#ffffff 0%,#f9fcff 75%,#f4f9ff 100%);
  border:1px solid #d8e5f8;
  border-radius:14px;
  padding:.75rem .75rem .65rem .75rem;
  box-shadow:0 4px 14px rgba(19,62,119,.09),inset 0 1px 0 rgba(255,255,255,.95);
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.cmp-card:hover{
  transform:translateY(-2px);
  border-color:#bcd4f2;
  box-shadow:0 10px 26px rgba(19,62,119,.16);
}
.cmp-card video{width:100%;border-radius:9px;border:1px solid #e4edf9}
.cmp-card img{border-radius:8px;border:1px solid #e8ecf2}
.cmp-header{
  display:flex;
  justify-content:space-around;
  width:100%;
  font-size:.92rem;
  font-weight:700;
  color:#354056;
  margin-bottom:.3rem;
}
.cmp-caption{
  text-align:center;
  color:#555;
  font-size:.9rem;
  margin-top:.35em;
  line-height:1.35;
}

/* image-conditioned comparison */
.cmp-img-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(490px,1fr));
  gap:1.2rem;
  justify-content:center;
  margin-bottom:.6rem;
}
.cmp-img-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  background:linear-gradient(165deg,#ffffff 0%,#f9fcff 75%,#f4f9ff 100%);
  border:1px solid #d8e5f8;
  border-radius:14px;
  padding:.75rem .85rem .65rem .85rem;
  box-shadow:0 4px 14px rgba(19,62,119,.09),inset 0 1px 0 rgba(255,255,255,.95);
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.cmp-img-card:hover{
  transform:translateY(-2px);
  border-color:#bcd4f2;
  box-shadow:0 10px 26px rgba(19,62,119,.16);
}
.cmp-img-header{
  display:grid;
  grid-template-columns:150px 1fr;
  width:100%;
  font-size:.92rem;
  font-weight:700;
  color:#354056;
  margin-bottom:.3rem;
}
.cmp-img-header .pair-labels{
  display:flex;
  justify-content:space-around;
}
.cmp-img-body{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:.75rem;
  width:100%;
  align-items:center;
}
.cmp-img-body img{width:150px;border-radius:8px;border:1px solid #e8ecf2}
.cmp-img-body video{width:100%;border-radius:9px;border:1px solid #e4edf9}
.cmp-img-body .prompt-box{
  width:150px;
  padding:.45rem .5rem;
  border:1px dashed #c8d6e5;
  border-radius:8px;
  background:#f8fbff;
  text-align:center;
  font-size:.9rem;
  color:#3f4c63;
  line-height:1.38;
}

/* ---------- sv4d grid (2-col, spacious) ---------- */
.sv4d-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.3rem;
  margin-bottom:.8rem;
}
.sv4d-card{
  background:linear-gradient(165deg,#ffffff 0%,#f9fcff 75%,#f4f9ff 100%);
  border:1px solid #d8e5f8;
  border-radius:14px;
  padding:.7rem .75rem .6rem .75rem;
  box-shadow:0 4px 14px rgba(19,62,119,.09),inset 0 1px 0 rgba(255,255,255,.95);
  transition:box-shadow .2s,transform .2s,border-color .2s;
}
.sv4d-card:hover{
  transform:translateY(-2px);
  border-color:#bcd4f2;
  box-shadow:0 10px 26px rgba(19,62,119,.16);
}
.sv4d-card video{width:100%;border-radius:9px;border:1px solid #e4edf9}
.sv4d-card .sv4d-header{
  display:flex;
  justify-content:space-around;
  font-size:.88rem;
  font-weight:700;
  color:#354056;
  margin-bottom:.25rem;
}
.sv4d-card .sv4d-prompt{
  text-align:center;
  font-size:.88rem;
  color:#4a5568;
  margin-top:.35rem;
  line-height:1.38;
  font-style:italic;
}
.sv4d-toggle{
  display:block;
  margin:1rem auto;
  padding:.55rem 2rem;
  font-size:1rem;
  font-weight:600;
  color:#0f3d74;
  background:linear-gradient(180deg,#f1f8ff 0%,#ddeeff 100%);
  border:1px solid #a9c8ee;
  border-radius:999px;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(26,86,165,.18),inset 0 1px 0 rgba(255,255,255,.95);
  transition:all .2s;
}
.sv4d-toggle:hover{
  transform:translateY(-1px);
  background:linear-gradient(180deg,#eaf5ff 0%,#cfe6ff 100%);
  border-color:#87b0e3;
}

/* ---------- footer ---------- */
footer{
  margin-top:3rem;
  padding:1.8rem 1rem 1rem 1rem;
  border-top:1px solid #d1def2;
  text-align:center;
  color:#5a6f87;
  font-size:1rem;
  background:linear-gradient(180deg,#f5faff 0%,#edf5ff 100%);
}
footer .copy{font-size:.9em;color:#aaa;margin-top:.5rem}

/* ---------- responsive ---------- */
@media(max-width:1532px){
  .floating-toc{display:none}
}
@media(max-width:1440px){
  .back-to-top{left:auto;right:.9rem}
}
@media(max-width:1080px){
  .cmp-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .cmp-img-grid{grid-template-columns:1fr}
  .img-card .gallery-header{width:100%}
}
@media(max-width:700px){
  .page-wrap{padding:1rem .8rem 0 .8rem}
  .section-bar{margin-left:-.25rem;margin-right:-.25rem;padding-left:.8rem;padding-right:.8rem}
  .abstract-text{padding:.82rem .85rem}
  .evaluation-highlight{padding:.86rem .9rem 1rem .9rem}
  .evaluation-text{font-size:.98rem}
  .back-to-top{right:.7rem;bottom:.8rem;padding:.38rem .78rem;font-size:.78rem}
  .paper-title{font-size:1.6rem}
  .gallery-card{width:100%}
  .img-card-row{flex-direction:column}
  .img-card-row img{width:140px}
  .img-card-row video{width:100%}
  .cmp-img-body{grid-template-columns:120px 1fr}
  .cmp-img-body img,.cmp-img-body .prompt-box{width:120px}
  .sv4d-grid{grid-template-columns:1fr}
}

/* ---------- publication link groups ---------- */
.pub-links{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem;
  margin:1.35rem 0 1.55rem 0;
}
.pub-group{
  display:inline-flex;
  align-items:stretch;
  border-radius:999px;
  background:linear-gradient(180deg,#ffffff 0%,#f7fbff 100%);
  overflow:hidden;
  transition:transform .18s ease,box-shadow .18s ease;
}
.pub-group:hover{transform:translateY(-3px)}

/* Hallo3D — 蓝色系 */
.pub-group.g3d{
  border:1.5px solid #b9d4f5;
  box-shadow:0 8px 22px rgba(46,111,189,.16);
}
.pub-group.g3d:hover{box-shadow:0 14px 30px rgba(46,111,189,.26)}
.pub-group.g3d .pub-tag{background:linear-gradient(135deg,#2e6fbd 0%,#54a0ef 100%)}
.pub-group.g3d .pub-item{color:#2e6fbd}
.pub-group.g3d .pub-item+.pub-item{border-left:1px solid #dcebfc}
.pub-group.g3d .pub-item:hover{background:linear-gradient(135deg,#2e6fbd 0%,#54a0ef 100%);color:#fff}

/* Hallo4D — 梅紫色系（与 4D 高亮区同源） */
.pub-group.g4d{
  border:1.5px solid #d9c4e8;
  background:linear-gradient(180deg,#ffffff 0%,#fdf3fd 100%);
  box-shadow:0 8px 22px rgba(150,100,170,.15);
}
.pub-group.g4d:hover{box-shadow:0 14px 30px rgba(150,100,170,.25)}
.pub-group.g4d .pub-tag{background:linear-gradient(135deg,#825091 0%,#b285cf 100%)}
.pub-group.g4d .pub-item{color:#825091}
.pub-group.g4d .pub-item+.pub-item{border-left:1px solid #eeddf6}
.pub-group.g4d .pub-item:hover{background:linear-gradient(135deg,#825091 0%,#b285cf 100%);color:#fff}

.pub-tag{
  display:inline-flex;
  align-items:center;
  font-family:"Exo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.9rem;
  font-weight:800;
  letter-spacing:.03em;
  color:#ffffff;
  padding:.62rem 1.05rem;
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.pub-item{
  display:inline-flex;
  align-items:center;
  gap:.42rem;
  font-family:"Exo","Helvetica Neue",Helvetica,Arial,sans-serif;
  font-size:.94rem;
  font-weight:700;
  text-decoration:none;
  padding:.62rem 1.05rem;
  transition:background .16s ease,color .16s ease;
}
.pub-ico{display:inline-flex;align-items:center;justify-content:center}
.pub-ico svg{width:15px;height:15px;fill:currentColor;display:block;transition:transform .16s ease}
.pub-item:hover .pub-ico svg{transform:scale(1.15)}
@media (max-width:640px){
  .pub-links{gap:.7rem}
  .pub-tag{padding:.55rem .85rem;font-size:.82rem}
  .pub-item{padding:.55rem .9rem;font-size:.86rem}
  .pub-ico svg{width:14px;height:14px}
}