@import url("/khoa-hoc0/cursor.css?v=2");

:root {
  --science-ink: #10091f;
  --science-paper: #f5f9e9;
  --science-white: #fffef8;
  --science-blue: #2c98c5;
  --science-blue-dark: #176785;
  --science-lime: #d8ef74;
  --science-pink: #f39ab1;
  --science-violet: #695b8c;
  --science-muted: #696977;
  --science-line: rgba(16, 9, 31, .16);
  --science-radius: 18px;
  --science-sans: "Trebuchet MS", "Segoe UI", Arial, sans-serif;
  --science-serif: Georgia, "Times New Roman", serif;
}

html { scroll-behavior: smooth; scroll-padding-top: 92px; }
body.science-site {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh;
  overflow-x: hidden !important;
  color: var(--science-ink) !important;
  background: var(--science-paper) !important;
  font-family: var(--science-sans) !important;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.science-site *, body.science-site *::before, body.science-site *::after { box-sizing: border-box; }
body.science-site a { color: inherit; text-decoration: none !important; }
body.science-site img { max-width: 100%; }
body.science-site button, body.science-site input, body.science-site select { font: inherit; }
body.science-site ::selection { color: #fff; background: var(--science-blue); }

.science-skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 9999;
  padding: 9px 13px;
  color: #fff !important;
  background: var(--science-ink);
  transform: translateY(-150%);
}
.science-skip:focus { transform: translateY(0); }

.science-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  height: 70px;
  padding: 0 clamp(18px, 4.5vw, 72px);
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 34px;
  color: var(--science-ink);
  background: rgba(245, 249, 233, .92);
  border-bottom: 1px solid var(--science-line);
  backdrop-filter: blur(14px);
}
.science-brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: -.04em; }
.science-brand-mark {
  position: relative;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  background: var(--science-ink);
  border-radius: 50% 48% 54% 44%;
  transform: rotate(17deg);
}
.science-brand-mark::before, .science-brand-mark::after { position: absolute; content: ""; background: var(--science-paper); border-radius: 50%; }
.science-brand-mark::before { width: 8px; height: 8px; top: 8px; left: 7px; }
.science-brand-mark::after { width: 5px; height: 5px; top: 16px; right: 6px; }
.science-brand span:last-child { font-size: 17px; }
.science-brand em { color: var(--science-blue-dark); font-style: normal; }
.science-nav { display: flex; align-items: center; justify-content: center; gap: clamp(15px, 2.2vw, 34px); }
.science-nav a { position: relative; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.science-nav a::after { position: absolute; right: 0; bottom: -8px; left: 0; height: 3px; content: ""; background: var(--science-blue); transform: scaleX(0); transition: transform .2s ease; }
.science-nav a:hover::after, .science-nav a[aria-current="page"]::after { transform: scaleX(1); }
.science-home { padding: 7px 13px; border: 1px solid var(--science-ink); border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; transition: color .2s, background .2s; }
.science-home:hover { color: #fff; background: var(--science-ink); }
.science-menu { display: none; }
.science-progress { position: fixed; z-index: 1200; top: 69px; left: 0; width: 0; height: 3px; background: var(--science-blue); transition: width .08s linear; }

body.science-site > header:not(.science-bar),
body.science-site > .astro-header,
body.science-site > .drawer-backdrop,
body.science-site > .mobile-drawer,
body.science-site footer:not(.science-footer),
body.science-site .hero-science { display: none !important; }

.science-backdrop { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.science-backdrop span { position: absolute; display: block; background: var(--science-ink); border-radius: 999px; opacity: .035; }
.science-backdrop span:nth-child(1) { width: 170px; height: 46px; top: 18%; right: -35px; transform: rotate(22deg); }
.science-backdrop span:nth-child(2) { width: 95px; height: 34px; top: 48%; left: 4%; transform: rotate(-34deg); }
.science-backdrop span:nth-child(3) { width: 220px; height: 55px; bottom: 7%; right: 14%; transform: rotate(52deg); }

.science-hero {
  position: relative;
  min-height: 530px;
  padding: 74px clamp(20px, 7vw, 118px) 66px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .85fr);
  align-items: center;
  gap: 50px;
  overflow: hidden;
  background: var(--science-paper);
  border-bottom: 1px solid var(--science-ink);
}
.science-hero-copy { position: relative; z-index: 2; }
.science-kicker { margin: 0 0 18px !important; color: var(--science-blue-dark) !important; font-size: 10px !important; font-weight: 900 !important; letter-spacing: .16em !important; text-transform: uppercase; }
.science-kicker::before { content: "●"; margin-right: 8px; }
.science-hero h1 {
  max-width: 850px;
  margin: 0 !important;
  color: var(--science-ink) !important;
  font-size: clamp(68px, 9vw, 142px) !important;
  font-weight: 900 !important;
  line-height: .76 !important;
  letter-spacing: -.075em !important;
  text-align: left !important;
}
.science-hero h1 em { display: block; color: var(--science-blue); font-family: var(--science-serif); font-size: .48em; font-weight: 400; font-style: italic; letter-spacing: -.04em; }
.science-hero-description { max-width: 650px; margin: 34px 0 0 !important; color: #464555 !important; font-family: var(--science-serif) !important; font-size: 17px !important; line-height: 1.6 !important; text-align: left !important; }
.science-hero-meta { margin-top: 28px; display: flex; gap: 8px; flex-wrap: wrap; }
.science-hero-meta span { padding: 6px 11px; border: 1px solid var(--science-line); border-radius: 999px; font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.science-hero-visual { position: relative; min-height: 365px; }
.science-hero-visual::before {
  position: absolute;
  width: 300px;
  height: 300px;
  top: 30px;
  right: 10%;
  content: "";
  background: var(--science-lime);
  border: 2px solid var(--science-ink);
  border-radius: 46% 54% 38% 62% / 56% 38% 62% 44%;
  transform: rotate(-8deg);
}
.science-hero-visual img { position: absolute; z-index: 2; right: 17%; bottom: -60px; width: min(280px, 68%); max-height: 430px; object-fit: contain; filter: drop-shadow(13px 14px 0 rgba(16,9,31,.12)); }
.science-microbe { position: absolute; z-index: 1; display: block; background: var(--science-ink); border-radius: 999px; }
.science-microbe--one { width: 88px; height: 31px; top: 0; right: 0; transform: rotate(-18deg); }
.science-microbe--two { width: 65px; height: 24px; top: 100px; left: 0; transform: rotate(41deg); }
.science-microbe--three { width: 45px; height: 18px; right: 4%; bottom: 20px; transform: rotate(51deg); }
.science-note { position: absolute; z-index: 3; right: 0; bottom: 5px; width: 155px; padding: 12px 14px; background: var(--science-white); border: 1px solid var(--science-ink); box-shadow: 5px 5px 0 var(--science-blue); transform: rotate(4deg); }
.science-note strong { display: block; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.science-note span { display: block; margin-top: 4px; color: var(--science-muted); font-family: var(--science-serif); font-size: 11px; font-style: italic; line-height: 1.35; }

.science-collections { padding: 0 clamp(20px, 7vw, 118px); display: flex; align-items: stretch; overflow-x: auto; background: var(--science-white); border-bottom: 1px solid var(--science-line); scrollbar-width: thin; }
.science-collections a { min-width: max-content; padding: 18px clamp(14px, 2vw, 28px); display: flex; align-items: center; gap: 9px; color: var(--science-muted); border-right: 1px solid var(--science-line); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.science-collections a:first-child { border-left: 1px solid var(--science-line); }
.science-collections a span { color: var(--science-blue-dark); font-family: var(--science-serif); font-size: 10px; font-style: italic; }
.science-collections a.is-active { color: var(--science-ink); background: var(--science-lime); }

body.science-hub > .sub-section { margin: 0 !important; padding: 0 !important; border: 0 !important; }
body.science-hub .main {
  width: min(1180px, calc(100% - 40px)) !important;
  max-width: 1180px !important;
  margin: 0 auto !important;
  padding: 82px 0 110px !important;
  overflow: visible !important;
  color: var(--science-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.science-hub .main::before, body.science-hub .main::after { display: none !important; }
body.science-hub .main > .back-btn { display: none !important; }
body.science-hub .sub-section { margin: 70px 0 0 !important; padding: 64px 0 0 !important; border-top: 1px solid var(--science-line) !important; }
body.science-hub .main > .sub-section:first-of-type { margin-top: 76px !important; }
body.science-hub .sub-section h2 {
  max-width: 760px;
  margin: 0 0 32px !important;
  padding: 0 !important;
  color: var(--science-ink) !important;
  font-family: var(--science-serif) !important;
  font-size: clamp(30px, 4vw, 50px) !important;
  font-weight: 400 !important;
  font-style: italic;
  line-height: 1.08 !important;
  text-align: left !important;
  text-shadow: none !important;
}
body.science-hub .sub-section h2:empty { display: none; }
body.science-hub .sub-section h2::after { display: none !important; }
body.science-hub .card-grid { margin: 0 !important; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 22px !important; }
body.science-hub .card-link { min-width: 0; display: block !important; color: inherit !important; }
body.science-hub .card {
  position: relative !important;
  min-height: 385px;
  padding: 0 0 24px !important;
  overflow: hidden !important;
  color: var(--science-ink) !important;
  background: var(--science-white) !important;
  border: 1px solid var(--science-ink) !important;
  border-radius: var(--science-radius) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: transform .25s ease, box-shadow .25s ease !important;
}
body.science-hub .card::before {
  position: absolute !important;
  z-index: 3;
  top: 14px !important;
  right: 14px !important;
  bottom: auto !important;
  left: auto !important;
  width: 38px !important;
  height: 38px !important;
  display: grid !important;
  place-items: center;
  content: attr(data-index) !important;
  color: var(--science-white) !important;
  background: var(--science-ink) !important;
  border: 0 !important;
  border-radius: 50% !important;
  font-family: var(--science-serif);
  font-size: 11px;
}
body.science-hub .card::after { display: none !important; }
body.science-hub .card-link:nth-child(3n + 2) .card::before { color: var(--science-ink) !important; background: var(--science-lime) !important; }
body.science-hub .card-link:nth-child(3n + 3) .card::before { background: var(--science-blue-dark) !important; }
body.science-hub .card:hover { transform: translateY(-7px) !important; box-shadow: 7px 8px 0 var(--science-ink) !important; }
body.science-hub .card-img {
  width: 100% !important;
  height: 230px !important;
  margin: 0 0 22px !important;
  display: block !important;
  object-fit: cover !important;
  background: #e8efdd;
  border: 0 !important;
  border-bottom: 1px solid var(--science-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: saturate(.82) contrast(.94);
}
body.science-hub .card h3 { margin: 0 !important; padding: 0 22px !important; color: var(--science-ink) !important; font-size: 22px !important; font-weight: 900 !important; line-height: 1.12 !important; text-align: left !important; text-shadow: none !important; }
body.science-hub .card-meta { margin: 16px 22px 0 !important; color: var(--science-blue-dark) !important; font-size: 9px !important; font-weight: 800; font-style: normal !important; letter-spacing: .08em; text-transform: uppercase; }
body.science-hub .card-diagram { margin: 14px 22px !important; color: var(--science-muted) !important; background: #edf2e2 !important; border: 0 !important; border-left: 3px solid var(--science-blue) !important; }
body.science-hub .pagination-container, body.science-hub .pagination { display: none !important; }

.science-article-head {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 45px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  color: var(--science-muted);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.science-breadcrumb { display: flex; align-items: center; gap: 9px; }
.science-breadcrumb a:hover { color: var(--science-blue-dark); }
.science-breadcrumb i { font-family: var(--science-serif); font-weight: 400; }
.science-readtime { color: var(--science-blue-dark); }

body.science-article .science-article-hero {
  width: min(1120px, calc(100% - 40px)) !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 55px 0 48px !important;
  display: block !important;
  color: var(--science-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--science-ink) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  text-align: left !important;
}
body.science-article .science-article-hero::before, body.science-article .science-article-hero::after { display: none !important; }
body.science-article .science-article-hero .decor-image { display: none !important; }
body.science-article .science-article-hero h1,
body.science-article .science-article-hero .detail-title,
body.science-article .science-article-hero .hero__title {
  width: auto !important;
  max-width: 970px !important;
  margin: 0 !important;
  overflow: visible !important;
  color: var(--science-ink) !important;
  border: 0 !important;
  font-family: var(--science-sans) !important;
  font-size: clamp(45px, 6.8vw, 94px) !important;
  font-weight: 900 !important;
  line-height: .96 !important;
  letter-spacing: -.055em !important;
  text-align: left !important;
  text-shadow: none !important;
  white-space: normal !important;
  animation: none !important;
}
body.science-article .science-article-hero .detail-subtitle,
body.science-article .science-article-hero .hero__sub,
body.science-article .science-article-hero > p {
  max-width: 760px !important;
  margin: 25px 0 0 !important;
  padding: 0 !important;
  color: var(--science-muted) !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--science-serif) !important;
  font-size: 17px !important;
  font-style: italic !important;
  line-height: 1.6 !important;
  text-align: left !important;
  text-shadow: none !important;
  animation: none !important;
}
body.science-article .science-article-hero .detail-meta, body.science-article .science-article-hero .meta { margin: 24px 0 0 !important; color: var(--science-blue-dark) !important; font-size: 10px !important; font-weight: 800; letter-spacing: .09em; text-align: left !important; text-transform: uppercase; }
body.science-article .science-article-hero .hero__controls { margin-top: 22px; }
body.science-article .science-article-hero .hero__controls { flex-wrap: wrap !important; }
body.science-article .science-article-hero .hero__left, body.science-article .science-article-hero .featured-links, body.science-article .science-article-hero .featured-card { min-width: 0 !important; max-width: 100% !important; }
body.science-article .science-article-hero .featured-card span { overflow-wrap: anywhere; }
body.science-article .science-article-hero button, body.science-article .science-article-hero select { color: var(--science-ink) !important; background: var(--science-white) !important; border: 1px solid var(--science-line) !important; }

body.science-article .science-layout,
body.science-article .container-detail,
body.science-article .container,
body.science-article .wrap {
  width: min(1120px, calc(100% - 40px)) !important;
  max-width: 1120px !important;
  margin: 0 auto !important;
  padding: 55px 0 100px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 255px !important;
  align-items: start !important;
  gap: clamp(35px, 6vw, 78px) !important;
  color: var(--science-ink) !important;
  background: transparent !important;
}
body.science-article .container > aside:first-child { grid-column: 2; grid-row: 1; }
body.science-article .container > main { grid-column: 1; grid-row: 1; }
body.science-article .wrap > .science-article-hero { grid-column: 1 / -1; width: 100% !important; }
body.science-article .wrap > article { grid-column: 1; }
body.science-article .wrap > aside { grid-column: 2; }
body.science-article .wrap > footer { display: none !important; }

body.science-article .science-prose,
body.science-article .detail-content,
body.science-article article.card,
body.science-article main.main {
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  color: var(--science-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--science-serif) !important;
  font-size: 17px !important;
  line-height: 1.82 !important;
  animation: none !important;
}
body.science-article .science-prose::before, body.science-article .science-prose::after { display: none !important; }
body.science-article .science-prose p,
body.science-article .detail-content p,
body.science-article article.card p,
body.science-article main.main p {
  margin: 0 0 23px !important;
  padding: 0 !important;
  color: #2c2934 !important;
  background: transparent !important;
  border: 0 !important;
  font-family: var(--science-serif) !important;
  font-size: 17px !important;
  line-height: 1.82 !important;
  letter-spacing: 0 !important;
  text-align: left !important;
  text-shadow: none !important;
  animation: none !important;
}
body.science-article .science-prose p::before, body.science-article .science-prose p::after { display: none !important; }
body.science-article .science-prose h1, body.science-article .science-prose h2, body.science-article .science-prose h3,
body.science-article .detail-content h2, body.science-article .detail-content h3,
body.science-article article.card h2, body.science-article article.card h3,
body.science-article main.main h2, body.science-article main.main h3 {
  position: relative !important;
  margin: 58px 0 20px !important;
  padding: 0 0 13px !important;
  color: var(--science-ink) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--science-line) !important;
  font-family: var(--science-sans) !important;
  font-size: clamp(26px, 3.4vw, 39px) !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: -.035em !important;
  text-align: left !important;
  text-shadow: none !important;
  animation: none !important;
}
body.science-article .science-prose h2::after, body.science-article .detail-content h2::after, body.science-article main.main h2::after { position: absolute !important; right: auto !important; bottom: -2px !important; left: 0 !important; width: 64px !important; height: 3px !important; content: "" !important; background: var(--science-blue) !important; }
body.science-article .science-prose h2:first-child, body.science-article .detail-content h2:first-child, body.science-article main.main > h2:first-of-type { margin-top: 0 !important; }
body.science-article .science-prose ul, body.science-article .science-prose ol,
body.science-article .detail-content ul, body.science-article .detail-content ol,
body.science-article main.main ul, body.science-article main.main ol { margin: 22px 0 28px !important; padding-left: 25px !important; color: #2c2934 !important; }
body.science-article .science-prose li, body.science-article .detail-content li, body.science-article main.main li { margin: 8px 0 !important; padding-left: 4px !important; list-style: inherit !important; opacity: 1 !important; transform: none !important; animation: none !important; }
body.science-article .science-prose li::before, body.science-article .detail-content li::before, body.science-article main.main li::before { display: none !important; }
body.science-article .science-prose img,
body.science-article .detail-content img,
body.science-article article.card img,
body.science-article main.main img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  margin: 32px 0 !important;
  display: block !important;
  object-fit: cover;
  background: #e8ecdf;
  border: 1px solid var(--science-ink) !important;
  border-radius: 13px !important;
  box-shadow: 7px 8px 0 rgba(16, 9, 31, .12) !important;
  filter: none !important;
  transform: none !important;
  animation: none !important;
}
body.science-article figure { margin: 32px 0 !important; }
body.science-article figure img { margin-bottom: 10px !important; }
body.science-article figcaption { color: var(--science-muted) !important; font-family: var(--science-sans) !important; font-size: 11px !important; }
body.science-article blockquote { margin: 30px 0 !important; padding: 20px 24px !important; color: var(--science-ink) !important; background: var(--science-lime) !important; border: 0 !important; border-left: 5px solid var(--science-ink) !important; font-family: var(--science-serif); font-style: italic; }
body.science-article pre, body.science-article code { font-family: Consolas, "Courier New", monospace !important; }
body.science-article pre { padding: 18px !important; overflow-x: auto; color: #e9f5e2 !important; background: var(--science-ink) !important; border-radius: 10px !important; }
body.science-article iframe { max-width: 100%; border-radius: 10px; }
body.science-article .slideshow { margin: 30px 0 !important; background: #e8ecdf !important; border: 1px solid var(--science-ink); border-radius: 13px !important; box-shadow: 7px 8px 0 rgba(16,9,31,.12) !important; }
body.science-article .slide img { height: clamp(280px, 48vw, 500px) !important; margin: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
body.science-article .caption { color: #fff !important; background: rgba(16,9,31,.82) !important; }
body.science-article .back-btn, body.science-article .back-btn-detail { display: none !important; }

body.science-article .sidebar-detail, body.science-article aside.sidebar {
  position: sticky !important;
  top: 95px !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  padding: 22px !important;
  color: var(--science-ink) !important;
  background: var(--science-white) !important;
  border: 1px solid var(--science-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  animation: none !important;
}
body.science-article .sidebar-detail h3, body.science-article aside.sidebar h3 { margin: 0 0 12px !important; padding: 0 0 9px !important; color: var(--science-blue-dark) !important; border: 0 !important; border-bottom: 1px solid var(--science-line) !important; font-family: var(--science-sans) !important; font-size: 11px !important; font-weight: 900 !important; letter-spacing: .1em !important; text-shadow: none !important; text-transform: uppercase; animation: none !important; }
body.science-article .sidebar-detail ul, body.science-article aside.sidebar ul { margin: 0 0 24px !important; padding: 0 !important; list-style: none !important; }
body.science-article .sidebar-detail li, body.science-article aside.sidebar li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
body.science-article .sidebar-detail a, body.science-article aside.sidebar a { display: block !important; padding: 8px 0 !important; color: #474451 !important; background: transparent !important; border: 0 !important; border-bottom: 1px dashed var(--science-line) !important; border-radius: 0 !important; font-family: var(--science-sans) !important; font-size: 12px !important; line-height: 1.4; text-shadow: none !important; transform: none !important; animation: none !important; }
body.science-article .sidebar-detail a:hover, body.science-article aside.sidebar a:hover { color: var(--science-blue-dark) !important; padding-left: 5px !important; }
.science-toc { margin-bottom: 27px; }
.science-toc ol { margin: 0 !important; padding: 0 !important; list-style: none !important; counter-reset: science-toc; }
.science-toc li { counter-increment: science-toc; }
.science-toc a::before { content: "0" counter(science-toc); margin-right: 8px; color: var(--science-blue-dark); font-family: var(--science-serif); font-size: 10px; }

.science-footer { min-height: 145px; padding: 30px clamp(20px, 7vw, 118px); display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 30px; color: #c5c0d0; background: var(--science-ink); }
.science-footer-brand { display: flex; align-items: center; gap: 14px; }
.science-footer .science-brand-mark { background: var(--science-lime); }
.science-footer .science-brand-mark::before, .science-footer .science-brand-mark::after { background: var(--science-ink); }
.science-footer strong { display: block; color: #fff; font-size: 14px; letter-spacing: -.02em; }
.science-footer span { display: block; margin-top: 4px; font-family: var(--science-serif); font-size: 11px; font-style: italic; }
.science-footer-meta { font-size: 9px; font-weight: 800; letter-spacing: .14em; text-align: right; text-transform: uppercase; }
.science-footer-meta b { color: var(--science-lime); }
.science-top {
  position: fixed;
  z-index: 900;
  right: 20px;
  bottom: 20px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff !important;
  background: var(--science-ink);
  border: 0;
  border-radius: 50%;
  box-shadow: 3px 4px 0 var(--science-blue);
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.science-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); }

@media (max-width: 920px) {
  .science-bar { grid-template-columns: 1fr auto; }
  .science-home { display: none; }
  .science-menu { width: 40px; height: 40px; padding: 9px; display: flex; flex-direction: column; justify-content: center; gap: 5px; background: transparent; border: 1px solid var(--science-ink); border-radius: 50%; cursor: pointer; }
  .science-menu span { height: 2px; display: block; background: var(--science-ink); transition: transform .2s, opacity .2s; }
  .science-menu[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
  .science-menu[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
  .science-nav { position: absolute; top: 70px; right: 0; left: 0; padding: 17px 24px 24px; display: none; align-items: stretch; flex-direction: column; gap: 0; background: var(--science-paper); border-bottom: 1px solid var(--science-ink); }
  .science-nav.is-open { display: flex; }
  .science-nav a { padding: 12px 0; border-bottom: 1px solid var(--science-line); }
  .science-nav a::after { display: none; }
  .science-hero { grid-template-columns: 1fr .65fr; }
  .science-hero-visual::before { width: 230px; height: 230px; }
  .science-note { display: none; }
  body.science-hub .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body.science-article .science-layout, body.science-article .container-detail, body.science-article .container, body.science-article .wrap { grid-template-columns: minmax(0, 1fr) !important; }
  body.science-article .container > aside:first-child, body.science-article .container > main, body.science-article .wrap > article, body.science-article .wrap > aside { grid-column: 1 !important; grid-row: auto !important; }
  body.science-article .container > aside:first-child, body.science-article .wrap > aside { order: 2; }
  body.science-article .sidebar-detail, body.science-article aside.sidebar { position: static !important; }
}

@media (max-width: 620px) {
  .science-bar { height: 62px; padding-inline: 15px; }
  .science-brand span:last-child { font-size: 15px; }
  .science-progress { top: 61px; }
  .science-nav { top: 62px; }
  .science-hero { min-height: 0; padding: 55px 18px 40px; display: block; }
  .science-hero h1 { font-size: clamp(59px, 19vw, 92px) !important; }
  .science-hero-description { margin-top: 26px !important; font-size: 15px !important; }
  .science-hero-visual { min-height: 280px; margin-top: 30px; }
  .science-hero-visual::before { width: 220px; height: 220px; right: 12%; }
  .science-hero-visual img { right: 18%; bottom: -45px; width: 190px; }
  .science-microbe--one { right: 3%; }
  .science-collections { padding: 0; }
  .science-collections a { padding: 15px 16px; }
  body.science-hub .main { width: calc(100% - 30px) !important; padding: 60px 0 80px !important; }
  body.science-hub .card-grid { grid-template-columns: 1fr !important; }
  body.science-hub .card { min-height: 360px; }
  body.science-hub .card-img { height: 225px !important; }
  body.science-hub .sub-section { margin-top: 55px !important; padding-top: 48px !important; }
  .science-article-head { width: calc(100% - 30px); padding-top: 30px; }
  .science-readtime { display: none; }
  body.science-article .science-article-hero { width: calc(100% - 30px) !important; padding: 38px 0 35px !important; }
  body.science-article .science-article-hero h1, body.science-article .science-article-hero .detail-title, body.science-article .science-article-hero .hero__title { font-size: clamp(38px, 12vw, 58px) !important; }
  body.science-article .science-article-hero .detail-subtitle, body.science-article .science-article-hero .hero__sub, body.science-article .science-article-hero > p { font-size: 15px !important; }
  body.science-article .science-article-hero .hero__controls { display: none !important; }
  body.science-article .science-layout, body.science-article .container-detail, body.science-article .container, body.science-article .wrap { width: calc(100% - 30px) !important; padding: 38px 0 75px !important; gap: 45px !important; }
  body.science-article .science-prose, body.science-article .detail-content, body.science-article article.card, body.science-article main.main,
  body.science-article .science-prose p, body.science-article .detail-content p, body.science-article article.card p, body.science-article main.main p { font-size: 16px !important; line-height: 1.75 !important; }
  body.science-article .science-prose h1, body.science-article .science-prose h2, body.science-article .science-prose h3, body.science-article .detail-content h2, body.science-article .detail-content h3, body.science-article article.card h2, body.science-article article.card h3, body.science-article main.main h2, body.science-article main.main h3 { margin-top: 45px !important; font-size: 27px !important; }
  .science-footer { padding: 30px 18px; grid-template-columns: 1fr; }
  .science-footer-meta { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  body.science-site *, body.science-site *::before, body.science-site *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}