:root{
  /* Light theme with subtle color */
  --bg: #f6f8fc;
  --bg2: #ffffff;

  --panel: rgba(255,255,255,0.82);
  --panel2: rgba(255,255,255,0.94);

  --text: #0f172a;     /* slate-900 */
  --muted: #475569;    /* slate-600 */
  --muted2: #64748b;   /* slate-500 */

  --border: rgba(15, 23, 42, 0.10);
  --border2: rgba(15, 23, 42, 0.06);

  --shadow: 0 12px 34px rgba(15, 23, 42, 0.10);
  --shadow2: 0 8px 20px rgba(15, 23, 42, 0.08);

  --radius: 18px;
  --radius2: 14px;
  --maxw: 1040px;

  /* Accent (keep it subtle but present) */
  --accent: #3b82f6;         /* blue-500 */
  --accent2: #2563eb;        /* blue-600 */
  --accentSoft: rgba(59,130,246,0.14);

  /* Optional extra tint for the background glow */
  --tint: rgba(168, 85, 247, 0.10); /* purple glow */
}

*{ box-sizing: border-box; }
html,body{ height: 100%; }
body{
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Noto Sans", "PingFang SC", "Microsoft YaHei", sans-serif;
  color: var(--text);

  background:
    radial-gradient(1200px 820px at 22% 52%, rgba(59,130,246,0.072) 0%, transparent 62%),
    radial-gradient(1200px 820px at 82% 48%, rgba(168,85,247,0.056) 0%, transparent 64%),
    radial-gradient(900px 520px at 30% 6%, rgba(59,130,246,0.024) 0%, transparent 70%),
    radial-gradient(900px 520px at 80% 8%, rgba(168,85,247,0.020) 0%, transparent 72%),
    radial-gradient(1000px 600px at 35% 108%, rgba(59,130,246,0.020) 0%, transparent 70%),
    radial-gradient(1000px 600px at 70% 110%, rgba(168,85,247,0.016) 0%, transparent 72%),
    linear-gradient(to bottom, #f6f8fc 0%, #fbfcff 50%, #f6f8fc 100%);

  line-height: 1.7;
}




a{ color: var(--accent2); text-decoration: none; }
a:hover{ text-decoration: underline; text-underline-offset: 3px; }

.container{
  width: min(var(--maxw), calc(100% - 40px));
  margin: 0 auto;
}

/* Hero */
.hero{
  padding: 56px 0 28px;
  border-bottom: 1px solid var(--border2);
  background: linear-gradient(to bottom, rgba(255,255,255,0.85), transparent);
}

 /* bigger */
    h2 { font-size: 24px; }

    /* bigger（abstract / vitaset / method / results ） */
    .section p,
    .section li { font-size: 17px; line-height: 1.7; }

    /* Results */
    .results-stack { display: grid; gap: 22px; }
    .results-block { padding-top: 4px; }
    .results-grid-2 {
      display: grid;
      grid-template-columns: 1.1fr 0.9fr;
      gap: 18px;
      align-items: start;
    }
    .results-grid-2.equal { grid-template-columns: 1fr 1fr; }

    @media (max-width: 860px) {
      .results-grid-2, .results-grid-2.equal { grid-template-columns: 1fr; }
    }
    .results-stack .figure { margin: 0; }
    .results-stack .card { margin: 0; }

.badge{
  display: inline-block;
  padding: 6px 10px;
  border: 1px solid rgba(59,130,246,0.18);
  border-radius: 999px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.95), rgba(255,255,255,0.80));
  color: var(--muted);
  font-size: 13px;
}

.title{
  margin: 14px 0 10px;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--text);
}

.authors{
  margin: 0;
  color: var(--muted);
  font-size: 15px;
}
.authors a{ color: var(--text); }
.authors a:hover{ color: var(--accent2); text-decoration: none; }

.affiliations{
  margin: 8px 0 18px;
  color: var(--muted2);
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.dot{ opacity: 0.55; }

/* Buttons */
.buttons{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 22px;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.88);
  color: var(--text);
  font-weight: 600;
  font-size: 14px;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border 0.12s ease, background 0.12s ease;
  box-shadow: 0 1px 0 rgba(15,23,42,0.04);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(59,130,246,0.25);
  background: rgba(255,255,255,0.98);
  text-decoration: none;
}

.btn.primary{
  background: linear-gradient(180deg, var(--accent), var(--accent2));
  border-color: rgba(37,99,235,0.30);
  color: #fff;
  box-shadow: 0 14px 28px rgba(37,99,235,0.20);
}
.btn.primary:hover{
  box-shadow: 0 18px 36px rgba(37,99,235,0.26);
}

/* Figures */
.figure{
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: linear-gradient(to bottom, var(--panel2), var(--panel));
  box-shadow: var(--shadow);
  backdrop-filter: blur(8px);
}

.figure.compact{ margin: 0; }

.figure img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius2);
  border: 1px solid var(--border2);
  background: #fff;
}

.figure figcaption{
  margin-top: 10px;
  color: var(--muted2);
  font-size: 14px;
}

/* Main */
.main{
  padding: 26px 0 56px;
}
.section{
  padding: 26px 0;
  border-bottom: 1px solid rgba(15, 23, 42, 0.05); /* 更淡 */
}
.section:last-of-type{ border-bottom: none; }

h2{
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}

p{
  margin: 0 0 12px;
  color: var(--muted);
}

/* Cards */
.callouts{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 860px){
  .callouts{ grid-template-columns: 1fr; }
}

.card{
  padding: 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));
  box-shadow: 0 1px 0 rgba(15,23,42,0.03);
}

.card h3{
  margin: 0 0 8px;
  font-size: 16px;
  color: var(--text);
}
.card p, .card li{ color: var(--muted); }

ul{
  margin: 8px 0 0;
  padding-left: 18px;
}

/* Layout helpers */
.grid-2{
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 14px;
  align-items: start;
}
@media (max-width: 860px){
  .grid-2{ grid-template-columns: 1fr; }
}

/* Resources */
.resources{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 720px){
  .resources{ grid-template-columns: 1fr; }
}

.resource{
  padding: 14px;
  border: 1px solid var(--border2);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));
  transition: transform 0.12s ease, box-shadow 0.12s ease, border 0.12s ease;
}

.resource:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(59,130,246,0.28);
  text-decoration: none;
}

.resource-title{
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--text);
}
.resource-desc{
  display: block;
  color: var(--muted2);
  font-size: 14px;
}

/* Code */
.codeblock{
  position: relative;
  padding: 14px;
  border: 1px solid rgba(59,130,246,0.16);
  border-radius: var(--radius);
  background:
    radial-gradient(700px 220px at 20% 0%, rgba(59,130,246,0.10), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.86));
  overflow: hidden;
}

pre{
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  color: #0b1220;
  font-size: 13px;
  line-height: 1.55;
}

.copy{
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(59,130,246,0.18);
  background: rgba(255,255,255,0.92);
  color: var(--text);
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border 0.12s ease;
}

.copy:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow2);
  border-color: rgba(59,130,246,0.30);
}

/* Footer */
.footer{
  padding-top: 18px;
  color: var(--muted2);
  font-size: 13px;
  text-align: center;
}

/* Nice focus + selection */
::selection{ background: rgba(59,130,246,0.18); }
.btn:focus-visible, .copy:focus-visible, a:focus-visible{
  outline: 3px solid rgba(59,130,246,0.22);
  outline-offset: 2px;
  border-radius: 10px;
}
.demo-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-top: 14px;
}
@media (max-width: 860px){
  .demo-grid{ grid-template-columns: 1fr; }
}
.demo-title{
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 700;
}
.video-card{
  margin: 0 0 12px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.60);
}
.demo-video{
  width: 100%;
  border-radius: var(--radius2);
  display: block;
  border: 1px solid rgba(0,0,0,0.06);
}
.video-card figcaption{
  margin-top: 8px;
  font-size: 14px;
  color: var(--muted);
}
.muted-note{
  margin-top: 8px;
  color: var(--muted2);
  font-size: 13px;
}