/* =========================================================
   CORAL — NeurIPS 2026 Project Page
========================================================= */

:root {
  --bg: #fbf8fb;
  --paper: #fffdfd;

  --ink: #273047;
  --text: #5f6679;
  --muted: #8f879a;

  --dusty-rose: #c9859f;
  --rose-deep: #ad6688;
  --mauve: #aa85ad;
  --lavender: #9b8abc;
  --plum: #65576f;

  --line: rgba(79, 69, 96, 0.12);

  --shadow-soft:
    0 12px 36px rgba(88, 63, 97, 0.07);

  --shadow:
    0 24px 70px rgba(88, 63, 97, 0.10);
}


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {
  margin: 0;
  min-height: 100vh;

  color: var(--ink);

  background:
    radial-gradient(
      circle at 14% 10%,
      rgba(221, 176, 195, 0.14),
      transparent 27rem
    ),
    radial-gradient(
      circle at 86% 12%,
      rgba(180, 168, 214, 0.17),
      transparent 31rem
    ),
    linear-gradient(
      180deg,
      #fffefe 0%,
      var(--bg) 54%,
      #faf7fb 100%
    );

  font-family:
    "DM Sans",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  line-height: 1.6;
  overflow-x: hidden;
}


img {
  display: block;
  max-width: 100%;
}


a {
  color: inherit;
}


.background-glow {
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  filter: blur(95px);
  pointer-events: none;
}


.glow-one {
  width: 300px;
  height: 300px;

  top: 150px;
  left: -100px;

  background:
    rgba(214, 150, 178, 0.14);
}


.glow-two {
  width: 360px;
  height: 360px;

  top: 300px;
  right: -140px;

  background:
    rgba(160, 145, 200, 0.13);
}


.page-width {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   Navigation
========================================================= */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;

  background:
    rgba(255, 253, 253, 0.78);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  border-bottom:
    1px solid rgba(80, 70, 96, 0.06);
}


.nav {
  width:
    min(
      1180px,
      calc(100% - 40px)
    );

  min-height: 74px;
  margin: auto;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}


.brand {
  width: fit-content;

  display: inline-flex;
  align-items: center;
  gap: 10px;

  color: #a16085;

  text-decoration: none;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.13em;
}


.brand-dot {
  width: 13px;
  height: 13px;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      var(--dusty-rose),
      var(--lavender)
    );

  box-shadow:
    0 0 0 7px
    rgba(201, 133, 159, 0.09);
}


.nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
}


.nav-links a {
  position: relative;

  padding: 10px 0;

  color: #4e5366;

  text-decoration: none;

  font-size: 13px;
  font-weight: 500;
}


.nav-links a::after {
  content: "";

  position: absolute;

  left: 50%;
  right: 50%;
  bottom: 2px;

  height: 1px;

  background: var(--dusty-rose);

  transition: 0.22s ease;
}


.nav-links a:hover::after {
  left: 0;
  right: 0;
}


.github-button {
  justify-self: end;

  padding: 9px 14px;

  border: 1px solid var(--line);
  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.72);

  color: #5f596d;

  text-decoration: none;

  font-size: 12px;
  font-weight: 700;

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.github-button:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-soft);
}


/* =========================================================
   Shared Section Styling
========================================================= */

.kicker {
  margin: 0 0 16px;

  color: #9b91a8;

  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.24em;
  line-height: 1.5;
}


.section {
  padding: 78px 0;
  scroll-margin-top: 70px;
}


.section-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 36px;

  margin-bottom: 30px;
  padding-bottom: 19px;

  border-bottom: 1px solid var(--line);
}


.section-header.compact {
  align-items: center;
}


.section-header h3 {
  max-width: 760px;

  margin: 0;

  color: var(--ink);

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(30px, 4vw, 45px);

  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.02em;
}


.section-header > p {
  max-width: 370px;

  margin: 0;

  color: #817b8c;

  text-align: right;
  font-size: 13px;
}


/* =========================================================
   Hero — Centered
========================================================= */

.hero {
  min-height:
    calc(100vh - 74px);

  padding:
    82px
    0
    105px;

  display: flex;
  align-items: center;
  justify-content: center;
}


.hero-copy {
  width: 100%;
  max-width: 1120px;

  margin: 0 auto;

  text-align: center;
}


.hero-kicker {
  margin-bottom: 20px;
  text-align: center;
}


.coral-title {
  margin: 0;

  text-align: center;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(78px, 9vw, 128px);

  font-weight: 700;
  line-height: 0.92;
  letter-spacing: -0.045em;

  background:
    linear-gradient(
      90deg,
      #d07e9d 0%,
      #bd7faa 50%,
      #9688bc 100%
    );

  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}


.hero h2 {
  max-width: 1060px;

  margin:
    30px
    auto
    22px;

  text-align: center;
  color: #263047;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size:
    clamp(34px, 4.4vw, 58px);

  font-weight: 600;
  line-height: 1.10;
  letter-spacing: -0.028em;
}


.hero-description {
  max-width: 860px;

  margin: 0 auto;

  text-align: center;
  color: #666d80;

  font-size:
    clamp(17px, 1.8vw, 20px);

  line-height: 1.7;
}


.acceptance {
  width: fit-content;

  margin:
    30px
    auto
    26px;

  padding:
    12px
    22px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border:
    1px solid rgba(193, 115, 150, 0.14);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      rgba(244, 218, 227, 0.91),
      rgba(235, 216, 236, 0.89)
    );

  color: #ad5479;

  box-shadow:
    0 10px 28px rgba(182, 107, 141, 0.09);

  font-size: 16px;
}


.authors {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

  gap: 9px 28px;

  text-align: center;
  font-size: 17px;
  font-weight: 700;
}


.authors span {
  position: relative;
}


.authors span:not(:last-child)::after {
  content: "·";

  position: absolute;
  right: -17px;

  color: #aaa3b4;
}


.affiliation {
  margin:
    7px
    auto
    0;

  text-align: center;
  color: #717789;
  font-size: 14px;
}


/* =========================================================
   Hero Buttons — large pill style
========================================================= */

.hero-actions {
  width: 100%;
  max-width: 930px;

  margin:
    34px
    auto
    0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}


.hero-button {
  min-height: 68px;

  display: flex;
  align-items: center;
  justify-content: center;

  gap: 13px;

  padding:
    14px
    24px;

  border-radius: 999px;

  color: white;
  text-decoration: none;

  font-size: 18px;
  font-weight: 700;

  box-shadow:
    0 12px 28px rgba(83, 61, 94, 0.10);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease,
    filter 0.2s ease;
}


.hero-button svg {
  width: 26px;
  height: 26px;

  flex-shrink: 0;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


.hero-button:hover:not(.disabled-button) {
  transform: translateY(-2px);

  box-shadow:
    0 17px 36px rgba(83, 61, 94, 0.16);

  filter: saturate(1.04);
}


/* Paper */
.paper-button {
  background:
    linear-gradient(
      135deg,
      #8d7fce,
      #b77fbd
    );
}


/* arXiv */
.arxiv-button {
  background:
    linear-gradient(
      135deg,
      #a27bc4,
      #c678a4
    );
}


/* Code */
.code-button {
  background:
    linear-gradient(
      135deg,
      #343a4a,
      #202636
    );
}


.code-button .github-mark {
  width: 29px;
  height: 29px;

  fill: currentColor;
  stroke: none;
}


/* Citation */
.citation-button {
  background:
    linear-gradient(
      135deg,
      #cf849d,
      #b57da5
    );
}


/* Paper/arXiv are placeholders until URLs are public */
.disabled-button {
  cursor: default;
}


.disabled-button:hover {
  transform: none;
}


/* =========================================================
   Figure Cards
========================================================= */

.figure-card {
  margin: 0;
  padding: 17px;

  border:
    1px solid rgba(100, 84, 117, 0.10);

  border-radius: 22px;

  background:
    rgba(255, 255, 255, 0.76);

  box-shadow: var(--shadow-soft);
}


.figure-card img {
  width: 100%;

  border-radius: 14px;

  background: white;
}


.figure-card figcaption {
  margin-top: 11px;

  color: #74798a;

  font-size: 12px;
}


.large-figure img {
  max-height: 660px;

  object-fit: contain;
}


/* =========================================================
   Method
========================================================= */

.method-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 17px;
}


.method-card {
  padding: 27px;

  border:
    1px solid rgba(111, 95, 128, 0.10);

  border-radius: 20px;

  background:
    linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.83),
      rgba(248, 243, 249, 0.76)
    );

  box-shadow:
    0 10px 26px rgba(89, 65, 100, 0.05);
}


.method-number {
  width: 38px;
  height: 38px;

  margin-bottom: 13px;

  display: inline-grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      135deg,
      #f0dde6,
      #e5dbef
    );

  color: #9b6488;

  font-size: 10px;
  font-weight: 800;
}


.method-card h4,
.scope-grid h4 {
  margin:
    0
    0
    9px;

  color: #464a60;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 20px;
  line-height: 1.25;
}


.method-card p,
.scope-grid p {
  margin: 0;

  color: #697083;

  font-size: 13px;
}


.equation {
  margin-top: 17px;

  padding:
    12px
    14px;

  border-radius: 12px;

  background:
    rgba(230, 217, 236, 0.56);

  color: #6e567b;

  font-size: 13px;
  font-weight: 600;
}


.feature-row {
  margin-top: 18px;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}


.feature {
  padding: 18px;

  border: 1px solid var(--line);
  border-radius: 16px;

  background:
    rgba(255, 255, 255, 0.55);
}


.feature strong {
  display: block;

  margin-bottom: 5px;

  color: #574f69;

  font-size: 15px;
}


.feature span {
  color: #818696;

  font-size: 11px;
}


/* =========================================================
   Results
========================================================= */

.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;

  margin-bottom: 22px;
}


.metrics article {
  padding: 22px;

  border:
    1px solid rgba(102, 87, 121, 0.10);

  border-radius: 18px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.87),
      rgba(245, 239, 248, 0.74)
    );

  box-shadow:
    0 9px 24px rgba(90, 65, 100, 0.05);
}


.metrics span {
  color: #a17696;

  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}


.metrics strong {
  display: block;

  margin:
    7px
    0
    5px;

  color: #8d6096;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 34px;
  line-height: 1;
}


.metrics p {
  margin: 0;

  color: #74798b;

  font-size: 11px;
}


.two-column {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;

  margin-top: 18px;
}


.two-column .figure-card img {
  height: 360px;

  object-fit: contain;
}


.result-note {
  margin-top: 18px;

  padding:
    18px
    20px;

  border:
    1px solid rgba(133, 111, 149, 0.10);

  border-radius: 16px;

  background:
    rgba(229, 216, 236, 0.44);

  color: #62697b;

  font-size: 12px;
}


.result-note strong {
  color: #70587c;
}


/* =========================================================
   Scope
========================================================= */

.scope-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}


.scope-grid article {
  min-height: 170px;

  padding: 27px;

  border:
    1px solid rgba(111, 95, 128, 0.10);

  border-radius: 20px;

  background:
    rgba(255, 255, 255, 0.66);

  box-shadow:
    0 10px 26px rgba(89, 65, 100, 0.04);
}


/* =========================================================
   Citation
========================================================= */

.citation-section {
  padding-bottom: 95px;
}


.citation-box {
  position: relative;
  overflow: hidden;

  border-radius: 20px;

  background: #343044;
  color: #f5eff8;

  box-shadow: var(--shadow);
}


.citation-box pre {
  margin: 0;

  padding:
    28px
    160px
    28px
    28px;

  white-space: pre-wrap;
  word-break: break-word;

  font-family:
    "SFMono-Regular",
    Menlo,
    Consolas,
    monospace;

  font-size: 12px;
  line-height: 1.75;
}


.citation-box button {
  position: absolute;

  top: 17px;
  right: 17px;

  padding:
    9px
    13px;

  border:
    1px solid rgba(255, 255, 255, 0.16);

  border-radius: 999px;

  background:
    rgba(255, 255, 255, 0.09);

  color: white;

  cursor: pointer;

  font-size: 11px;
  font-weight: 700;
}


/* =========================================================
   Footer
========================================================= */

.footer {
  min-height: 175px;

  display: flex;
  align-items: center;

  background:
    radial-gradient(
      circle at 15% 30%,
      rgba(219, 171, 195, 0.36),
      transparent 28rem
    ),
    radial-gradient(
      circle at 82% 30%,
      rgba(177, 163, 215, 0.43),
      transparent 34rem
    ),
    linear-gradient(
      120deg,
      #f3e8ef,
      #eee9f7
    );
}


.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 30px;
}


.footer strong {
  color: #a3638c;

  font-family:
    "Playfair Display",
    Georgia,
    serif;

  font-size: 20px;
  letter-spacing: 0.12em;
}


.footer p {
  margin:
    5px
    0
    0;

  color: #8d8399;

  font-size: 11px;
}


.footer-links {
  display: flex;
  gap: 20px;

  color: #7b7289;

  font-size: 11px;
}


.footer-links a {
  text-decoration: none;
  font-weight: 700;
}


/* =========================================================
   Tablet
========================================================= */

@media (max-width: 980px) {

  .nav {
    grid-template-columns: 1fr 1fr;
  }


  .nav-links {
    display: none;
  }


  .hero {
    min-height: 0;
    padding-top: 68px;
  }


  .hero-actions {
    max-width: 620px;

    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .method-grid,
  .metrics {
    grid-template-columns:
      repeat(2, 1fr);
  }


  .feature-row {
    grid-template-columns:
      repeat(2, 1fr);
  }

}


/* =========================================================
   Mobile
========================================================= */

@media (max-width: 700px) {

  .page-width,
  .nav {
    width:
      calc(100% - 28px);
  }


  .nav {
    min-height: 64px;
  }


  .brand {
    font-size: 17px;
  }


  .github-button {
    padding: 8px 11px;
    font-size: 10px;
  }


  .hero {
    min-height: 0;

    padding:
      58px
      0
      72px;
  }


  .coral-title {
    font-size:
      clamp(68px, 23vw, 92px);
  }


  .hero h2 {
    max-width: 100%;

    margin-top: 24px;

    font-size:
      clamp(30px, 8.7vw, 41px);

    line-height: 1.12;
  }


  .hero-description {
    max-width: 95%;
    font-size: 16px;
  }


  .acceptance {
    margin-top: 26px;

    padding: 10px 15px;

    font-size: 14px;
  }


  .authors {
    gap: 7px 22px;
    font-size: 15px;
  }


  .authors span:not(:last-child)::after {
    right: -13px;
  }


  .affiliation {
    font-size: 12px;
  }


  .hero-actions {
    max-width: 440px;

    grid-template-columns:
      repeat(2, 1fr);

    gap: 12px;
  }


  .hero-button {
    min-height: 58px;

    padding: 12px 15px;

    gap: 9px;

    font-size: 15px;
  }


  .hero-button svg {
    width: 22px;
    height: 22px;
  }


  .code-button .github-mark {
    width: 24px;
    height: 24px;
  }


  .section {
    padding: 56px 0;
    scroll-margin-top: 60px;
  }


  .section-header {
    display: block;
  }


  .section-header > p {
    margin-top: 10px;
    text-align: left;
  }


  .section-header h3 {
    font-size: 31px;
  }


  .method-grid,
  .metrics,
  .feature-row,
  .two-column,
  .scope-grid {
    grid-template-columns: 1fr;
  }


  .two-column .figure-card img {
    height: auto;
    max-height: 430px;
  }


  .citation-box pre {
    padding:
      68px
      19px
      21px;

    font-size: 10px;
  }


  .citation-box button {
    top: 14px;
    left: 14px;
    right: auto;
  }


  .footer {
    min-height: 200px;
  }


  .footer-inner {
    flex-direction: column;
    align-items: flex-start;
  }

}


/* =========================================================
   Reduced Motion
========================================================= */

@media (prefers-reduced-motion: reduce) {

  html {
    scroll-behavior: auto;
  }


  * {
    transition: none !important;
  }

}