/* === Reset & Base === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,sans-serif;
  background:#0a192f;
  color:#ccd6f6;
  line-height:1.7;
  overflow-x:hidden;
}
::selection{background:rgba(100,255,218,.2);color:#e6f1ff}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:#0a192f}
::-webkit-scrollbar-thumb{background:#233554;border-radius:3px}

/* === Typography === */
h1,h2,h3{color:#e6f1ff;font-weight:700}
h1{font-size:2rem;line-height:1.3;letter-spacing:-.02em}
h2{font-size:1.5rem;margin-bottom:1.25rem;position:relative;display:inline-block}
h2::after{content:'';display:block;width:3rem;height:3px;background:#64ffda;margin-top:.5rem;border-radius:2px}
a{color:#64ffda;text-decoration:none;transition:color .2s}
a:hover{color:#9bf0d7}
sup{color:#64ffda;font-size:.7em}

/* === Layout === */
.container{max-width:960px;margin:0 auto;padding:0 1.5rem}
.section{padding:5rem 0}
.section-alt{background:#112240}
footer{padding:2rem 0;text-align:center;color:#8892b0;font-size:.875rem;border-top:1px solid rgba(100,255,218,.08)}
footer a{color:#8892b0;vertical-align:middle}
footer a:hover{color:#64ffda}
footer svg{vertical-align:middle;margin-left:.25rem}

/* === Hero === */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:6rem 1.5rem 4rem;
  overflow:hidden;
}
.hero-bg{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  filter:brightness(.35) blur(1px);
  transform:scale(1.05);
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top,#0a192f 0%,rgba(10,25,47,.7) 40%,rgba(10,25,47,.3) 100%);
}
.hero-content{
  position:relative;z-index:1;
  max-width:900px;
  text-align:center;
}
.venue-badge{
  display:inline-block;
  font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  color:#64ffda;
  border:1px solid rgba(100,255,218,.4);
  padding:.35rem 1rem;
  border-radius:2rem;
  margin-bottom:1.5rem;
}
.hero h1{font-size:2.2rem;margin-bottom:1.25rem}
.authors{font-size:1rem;color:#a8b2d1;margin-bottom:.4rem;line-height:1.8}
.affiliations{font-size:.8rem;color:#8892b0;margin-bottom:.4rem}
.footnotes{font-size:.7rem;color:#556178;margin-bottom:2rem}

/* === Buttons === */
.buttons{display:flex;justify-content:center;gap:.75rem;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.65rem 1.25rem;
  border-radius:.4rem;
  font-size:.875rem;font-weight:600;
  transition:all .25s;
  cursor:pointer;
  border:2px solid transparent;
}
.btn svg{flex-shrink:0}
.btn-primary{background:transparent;color:#64ffda;border-color:#64ffda}
.btn-primary:hover{background:rgba(100,255,218,.08);color:#9bf0d7}
.btn-muted{
  background:transparent;color:#8892b0;border-color:#3a4a6a;
  position:relative;
}
.btn-muted:hover{color:#ccd6f6;border-color:#8892b0}
.btn-disabled{
  background:transparent;color:#556178;border-color:#2a3a5a;
  cursor:not-allowed;
}
.coming-soon{font-size:.6rem;font-weight:400;letter-spacing:.04em;opacity:.6}

/* === Abstract & BibTeX === */
.abstract-text{font-size:1.05rem;color:#a8b2d1;margin-bottom:2.5rem;max-width:860px}
.bibtex-box{
  background:#0a192f;
  border:1px solid #233554;
  border-radius:.5rem;
  overflow:hidden;
}
.bibtex-header{
  display:flex;justify-content:space-between;align-items:center;
  padding:.75rem 1rem;
  background:#112240;
  border-bottom:1px solid #233554;
}
.bibtex-label{font-size:.8rem;font-weight:600;color:#64ffda;text-transform:uppercase;letter-spacing:.06em}
.copy-btn{
  background:transparent;color:#8892b0;border:1px solid #3a4a6a;
  padding:.3rem .8rem;border-radius:.3rem;font-size:.75rem;cursor:pointer;
  transition:all .2s;
}
.copy-btn:hover{color:#64ffda;border-color:#64ffda}
.copy-btn.copied{color:#64ffda;border-color:#64ffda;background:rgba(100,255,218,.08)}
.bibtex-box pre{
  padding:1.25rem 1.5rem;
  font-family:"SF Mono","Fira Code","Consolas",monospace;
  font-size:.8rem;color:#8892b0;
  overflow-x:auto;
  line-height:1.6;
  white-space:pre-wrap;word-break:break-all;
}

/* === Method Overview === */
.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:start}
.method-text p{margin-bottom:1rem;color:#a8b2d1}
.method-text ul{list-style:none;padding:0}
.method-text li{padding:.35rem 0;padding-left:1.2rem;position:relative;color:#a8b2d1}
.method-text li::before{content:'▹';position:absolute;left:0;color:#64ffda}
.method-text strong{color:#e6f1ff}
.method-image img{width:100%;border-radius:.5rem;border:1px solid #233554}

/* === Carousel === */
.carousel-wrapper{position:relative}
.carousel{
  display:flex;gap:1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  padding:.5rem 0;
  scrollbar-width:none;
}
.carousel::-webkit-scrollbar{display:none}
.carousel-slide{
  scroll-snap-align:start;
  flex:0 0 calc(100% - .5rem);
  min-width:0;
  background:#112240;
  border-radius:.6rem;
  border:1px solid #233554;
  overflow:hidden;
}
.carousel-image{width:100%;overflow:hidden}
.carousel-image img{width:100%;display:block;border-bottom:1px solid #233554}
.carousel-caption{
  padding:1rem 1.25rem;
  font-size:.85rem;
  color:#8892b0;
  text-align:center;
}
.carousel-arrow{
  position:absolute;top:45%;transform:translateY(-50%);
  background:rgba(10,25,47,.85);border:1px solid #233554;
  color:#ccd6f6;border-radius:50%;
  width:44px;height:44px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2;transition:all .2s;
}
.carousel-arrow:hover{background:#112240;border-color:#64ffda;color:#64ffda}
.carousel-prev{left:-1.25rem}
.carousel-next{right:-1.25rem}
.carousel-dots{display:flex;justify-content:center;gap:.5rem;margin-top:1rem}
.dot{width:8px;height:8px;border-radius:50%;background:#3a4a6a;cursor:pointer;transition:background .2s}
.dot.active,.dot:hover{background:#64ffda}

/* === Responsive === */
@media (max-width:768px){
  .hero h1{font-size:1.4rem}
  .hero{min-height:70vh;padding:4rem 1rem 3rem}
  .method-grid{grid-template-columns:1fr}
  .section{padding:3rem 0}
  h2{font-size:1.25rem}
  .abstract-text{font-size:.95rem}
  .carousel-slide{flex:0 0 100%}
  .carousel-arrow{display:none}
  .authors{font-size:.85rem}
}
@media (max-width:480px){
  .hero h1{font-size:1.15rem}
  .hero{min-height:60vh}
  .buttons{gap:.4rem}
  .btn{padding:.5rem .85rem;font-size:.78rem}
}