:root{
    --ink:#1a2230;
    --ink-soft:#4a5568;
    --paper:#ffffff;
    --wash:#f4f6f8;
    --wash-2:#eef1f4;
    --line:#dde3ea;
    --sensor:#e0701a;
    --weather:#3c6db0;
    --joint:#7a5aa8;
    --invariant:#3e8e5a;
    --accent:#1f2d3d;
    --maxw:1080px;
  }
  *{box-sizing:border-box;margin:0;padding:0;}
  html{scroll-behavior:smooth;}
  body{
    font-family:'Inter',system-ui,sans-serif;
    color:var(--ink);
    background:var(--paper);
    line-height:1.65;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3{font-family:'Spectral',Georgia,serif;font-weight:600;line-height:1.2;letter-spacing:-.01em;}
  a{color:var(--weather);text-decoration:none;}
  a:hover{text-decoration:underline;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}

  /* ---------- HERO ---------- */
  header.hero{
    background:
      radial-gradient(1200px 400px at 15% -10%, rgba(224,112,26,.10), transparent 60%),
      radial-gradient(1200px 500px at 100% 0%, rgba(60,109,176,.12), transparent 55%),
      linear-gradient(180deg,#fbfcfd 0%, #f4f6f8 100%);
    border-bottom:1px solid var(--line);
    padding:60px 0 46px;
    text-align:center;   /* centers the eyebrow badge (inline-block) too */
  }
  .eyebrow{
    display:inline-block;font-family:'JetBrains Mono',monospace;font-size:12px;
    letter-spacing:.16em;text-transform:uppercase;color:var(--sensor);
    border:1px solid rgba(224,112,26,.35);border-radius:999px;padding:5px 14px;margin-bottom:22px;
    background:rgba(224,112,26,.06);
  }
  h1.title{
    font-size:clamp(30px,5vw,50px);font-weight:700;letter-spacing:-.02em;color:var(--ink);
    max-width:34ch;margin-bottom:10px;margin-inline:auto;
    text-align:center;
  }
  h1.title .em{
    background:linear-gradient(120deg,var(--sensor),var(--weather));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  }
  .subtitle{font-size:19px;color:var(--ink-soft);max-width:60ch;margin-bottom:28px;margin-inline:auto;font-family:'Spectral',serif;font-style:italic;text-align:center;}

  .authors{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 26px;margin-bottom:6px;}
  .author{font-weight:600;font-size:15.5px;}
  .affils{color:var(--ink-soft);font-size:13.5px;margin-bottom:26px;text-align:center;}

  .pill-row{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;}
  .pill{
    display:inline-flex;align-items:center;gap:8px;
    font-size:14px;font-weight:600;padding:9px 16px;border-radius:8px;
    border:1px solid var(--line);background:#fff;color:var(--ink);
    transition:transform .12s ease, box-shadow .12s ease, border-color .12s;
  }
  .pill:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,30,45,.08);text-decoration:none;border-color:#c7d0da;}
  .pill.solid{background:var(--accent);color:#fff;border-color:var(--accent);}
  .pill.solid:hover{background:#2a3b4f;}
  .pill svg{width:15px;height:15px;}

  /* ---------- SHOUT STRIP ---------- */
  .strip{
    background:var(--accent);color:#eaf0f6;
  }
  .strip .wrap{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;padding:16px 24px;}
  .strip b{color:#fff;}
  .strip .tag{display:flex;align-items:center;gap:9px;font-size:14.5px;}
  .dot{width:8px;height:8px;border-radius:50%;display:inline-block;}

  /* ---------- SECTION ---------- */
  section{padding:56px 0;border-bottom:1px solid var(--line);}
  .kicker{
    font-family:'JetBrains Mono',monospace;font-size:12px;letter-spacing:.15em;text-transform:uppercase;
    color:var(--weather);margin-bottom:12px;
  }
  h2.sec{font-size:clamp(24px,3.4vw,33px);margin-bottom:18px;color:var(--ink);text-align:center;}
  .kicker{text-align:center;}
  .lead{font-size:17.5px;color:var(--ink-soft);max-width:70ch;margin-inline:auto;text-align:justify;text-align-last:left;}
  p+p{margin-top:14px;}
  .body p{color:var(--ink-soft);max-width:72ch;}
  /* Only the main narrative paragraphs get the justified, centered treatment —
     short paragraphs inside narrow cards/columns are excluded, since justify
     on a 2-line box creates ugly word-gaps rather than a clean edge. */
  .body > p, .theory-box > p, .theory-box > .eqwrap + p{
    margin-inline:auto;text-align:justify;text-align-last:left;
  }
  .body strong{color:var(--ink);}

  /* ---------- FIGURE ---------- */
  figure{margin:26px 0 6px;}
  figure img{width:100%;border:1px solid var(--line);border-radius:12px;background:#fff;display:block;}
  figcaption{font-size:13.5px;color:var(--ink-soft);margin-top:10px;text-align:center;max-width:76ch;margin-inline:auto;}
  figcaption b{color:var(--ink);}
  .fig-narrow{max-width:760px;margin-inline:auto;}

  /* ---------- CONTRIBUTION CARDS ---------- */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;margin-top:26px;}
  .card{border:1px solid var(--line);border-radius:12px;padding:22px;background:#fff;position:relative;overflow:hidden;}
  .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;}
  .card.s::before{background:var(--sensor);}
  .card.w::before{background:var(--weather);}
  .card.j::before{background:var(--joint);}
  .card.i::before{background:var(--invariant);}
  .card h3{font-size:17px;margin-bottom:8px;}
  .card p{font-size:14.5px;color:var(--ink-soft);}
  .card .num{font-family:'JetBrains Mono',monospace;font-size:12px;color:#9aa6b3;margin-bottom:10px;display:block;}

  /* ---------- THEORY ---------- */
  .theory-box{
    background:linear-gradient(180deg,#fafbfc,#f4f6f8);
    border:1px solid var(--line);border-radius:14px;padding:26px 28px;margin:24px 0;
  }
  .eqwrap{overflow-x:auto;padding:6px 0;}
  .triple{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;}
  .tcol{border-radius:10px;padding:16px;border:1px solid var(--line);background:#fff;}
  .tcol .h{font-weight:700;font-size:14.5px;margin-bottom:8px;display:flex;align-items:center;gap:8px;}
  .tcol.s .h{color:var(--sensor);} .tcol.w .h{color:var(--weather);} .tcol.j .h{color:var(--joint);}
  .tcol p{font-size:13px;color:var(--ink-soft);margin:0;}
  .tcol .op{font-family:'JetBrains Mono',monospace;font-size:12.5px;margin-top:10px;color:var(--ink);}

  /* ---------- PIPELINE / FRAMEWORK IMG ---------- */
  .imgcard{border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff;}
  .imgcard img{width:100%;border-radius:6px;display:block;}
  .imgcard .cap{font-size:13px;color:var(--ink-soft);text-align:center;margin-top:10px;}
  .two{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
  @media(max-width:760px){.two{grid-template-columns:1fr;}.triple{grid-template-columns:1fr;}}

  /* ---------- DATA GIF ---------- */
  .gifrow{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:24px;}
  .gifcard{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#0e141b;}
  .gifcard img{width:100%;display:block;}
  .gifcard .lab{padding:12px 16px;font-size:14px;font-weight:600;color:#eaf0f6;background:var(--accent);display:flex;align-items:center;gap:9px;}
  @media(max-width:760px){.gifrow{grid-template-columns:1fr;}}

  /* ---------- LISTS ---------- */
  ul.feat{list-style:none;margin-top:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 26px;}
  ul.feat li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-soft);}
  ul.feat li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:2px;background:var(--sensor);transform:rotate(45deg);}
  @media(max-width:640px){ul.feat{grid-template-columns:1fr;}}

  /* ---------- CODE / TREE ---------- */
  pre{
    background:#0f1620;color:#cdd6e2;border-radius:12px;padding:20px 22px;overflow-x:auto;
    font-family:'JetBrains Mono',monospace;font-size:12.5px;line-height:1.7;border:1px solid #1c2733;
  }
  pre .c{color:#7f8ea3;} pre .d{color:#e0a05e;} pre .f{color:#82b0d8;}

  /* ---------- DATASET LADS ---------- */
  .ladsgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;}
  .ladsgrid .box{border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff;}
  .ladsgrid .box h3{font-size:16px;margin-bottom:12px;display:flex;align-items:center;gap:9px;}
  .ladsgrid .box ul{list-style:none;}
  .ladsgrid .box li{font-size:14.5px;color:var(--ink-soft);padding:4px 0 4px 20px;position:relative;}
  .ladsgrid .box li::before{content:"\2192";position:absolute;left:0;color:var(--weather);font-weight:700;}
  @media(max-width:640px){.ladsgrid{grid-template-columns:1fr;}}

  /* ---------- BIBTEX ---------- */
  details.bib{border:1px solid var(--line);border-radius:12px;margin-top:16px;background:#fff;overflow:hidden;}
  details.bib summary{cursor:pointer;padding:14px 18px;font-weight:600;font-size:15px;list-style:none;display:flex;align-items:center;gap:10px;}
  details.bib summary::-webkit-details-marker{display:none;}
  details.bib summary::before{content:"+";font-family:'JetBrains Mono',monospace;color:var(--sensor);font-weight:700;}
  details.bib[open] summary::before{content:"\2212";}
  details.bib pre{border-radius:0;border:none;border-top:1px solid #1c2733;margin:0;font-size:11.5px;}

  /* ---------- FOOTER ---------- */
  footer{background:var(--accent);color:#c4cfdb;padding:40px 0;border:none;}
  footer a{color:#a9c4e6;}
  footer .wrap{font-size:14px;line-height:1.9;}
  footer .top{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-bottom:18px;}
  footer .brand{font-family:'Spectral',serif;font-size:22px;color:#fff;font-weight:600;}

  .btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px;}
  .btn{
    display:inline-flex;align-items:center;gap:9px;padding:12px 20px;border-radius:9px;font-weight:600;font-size:15px;
    background:var(--accent);color:#fff;border:1px solid var(--accent);transition:transform .12s, background .12s;
  }
  .btn:hover{transform:translateY(-2px);text-decoration:none;background:#2a3b4f;}
  .btn.ghost{background:#fff;color:var(--ink);border-color:var(--line);}
  .btn.ghost:hover{background:var(--wash);}

  /* ---------- HTML MATH ---------- */
  .math{font-family:'Spectral',Georgia,serif;font-style:italic;}
  .math .up{font-style:normal;}
  .frac{display:inline-flex;flex-direction:column;text-align:center;vertical-align:middle;margin:0 .18em;}
  .frac .n{border-bottom:1.4px solid currentColor;padding:0 .35em .05em;}
  .frac .d{padding:.05em .35em 0;}
  sub,sup{font-style:normal;}
  .eqbig{font-size:26px;text-align:center;color:var(--ink);padding:14px 0;}
  .eqbig .up{font-style:normal;}
  .eqmid{font-size:19px;text-align:center;color:var(--ink);padding:8px 0;}
  .brace-note{font-size:12px;color:var(--invariant);font-style:normal;}