:root {
  --text: #2b2b2b;
  --muted: #555;
  --link: #4285f4;
  --soft: #f3f3f3;
  --tldr: #efedfb;
  --tldr-edge: #6c76ff;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #fff;
  color: var(--text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

a {
  color: var(--link);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

.authors a {
  font-weight: 400;
}

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

.hero {
  width: min(980px, calc(100% - 32px));
  margin: 0 auto;
  padding: 48px 0 36px;
  text-align: center;
}

h1 {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  max-width: 940px;
  margin: 0 auto 24px;
  font-family: "Avenir Next", "Nunito Sans", "Segoe UI", sans-serif;
  font-size: clamp(32px, 2.8vw, 44px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: 0;
}

.title-logo {
  flex: 0 0 auto;
  width: 118px;
  height: 118px;
  margin-top: -14px;
  border-radius: 50%;
  object-fit: contain;
}

.accent {
  display: inline-block;
  background: linear-gradient(
    to right,
    #ef5350,
    #f48fb1,
    #7e57c2,
    #2196f3,
    #26c6da,
    #43a047,
    #eeff41,
    #f9a825,
    #ff5722
  );
  background-size: 400% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  will-change: background-position;
  animation: rainbow 6s ease infinite;
}

@keyframes rainbow {
  0% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.authors {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 400;
  line-height: 1.45;
  text-align: center;
}

.affiliations {
  margin: 0;
  font-size: 17px;
  font-weight: 400;
  color: var(--text);
  text-align: center;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 26px;
}

.pill-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 18px;
  border-radius: 999px;
  background: #333;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.pill-button span {
  color: #fff;
}

.button-icon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  color: #fff;
}

.pill-button:hover {
  background: #111;
  color: #fff;
  text-decoration: none;
}

.teaser-section {
  width: min(820px, calc(100% - 32px));
  margin: 32px auto 34px;
}

.teaser,
.figure-slot {
  margin: 0 auto;
}

.teaser img {
  width: 100%;
  margin: 0 auto;
}

figcaption {
  margin-top: 14px;
  color: #2f2f2f;
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

.narrow {
  width: min(760px, calc(100% - 32px));
  margin: 0 auto;
}

.tldr {
  margin: 0 auto 34px;
  padding: 28px 34px;
  border-left: 4px solid var(--tldr-edge);
  border-radius: 12px;
  background: var(--tldr);
  text-align: left;
}

.tldr h2 {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.25;
  text-align: left;
}

.tldr p {
  margin: 0;
  font-size: 18px;
  line-height: 1.5;
}

.band {
  background: var(--soft);
  padding: 46px 0;
}

.content-section {
  padding: 46px 0;
}

h2 {
  margin: 0 0 20px;
  font-size: 28px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}

p {
  margin: 0 0 16px;
  font-size: 17px;
  text-align: justify;
  text-justify: inter-word;
}

.figure-slot {
  margin-top: 24px;
}

.figure-slot img {
  margin: 0 auto;
}


.content-section ul {
  margin: 0 0 16px 22px;
  padding: 0;
}

.content-section li {
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.55;
  text-align: justify;
  text-justify: inter-word;
}
pre {
  overflow-x: auto;
  margin: 0;
  padding: 20px 18px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #ddd;
  color: #222;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre;
}

@media (max-width: 700px) {
  .hero {
    padding-top: 34px;
  }

  h1 {
    align-items: flex-start;
    font-size: 28px;
    line-height: 1.12;
  }

  .title-logo {
    width: 70px;
    height: 70px;
    margin-top: -14px;
  }

  .authors {
    font-size: 16px;
  }

  .affiliations {
    font-size: 15px;
  }

  .tldr {
    padding: 22px 24px;
  }

  .tldr p,
  p {
    font-size: 16px;
  }

  h2 {
    font-size: 26px;
  }
}





@media (prefers-reduced-motion: reduce) {
  .accent {
    animation: none;
  }
}