/* Decorative science artwork: shared colours, lightweight SVG, real pause controls. */
.science-art {
  --art-line: #319b8d;
  --art-strong: #067067;
  --art-soft: #a3dfd4;
  --art-point: #d1f9eb;
  --art-backdrop: #e8f8f6;
  --art-reagent: #c9943a;
  --art-product: #17a89a;
  position: relative;
  isolation: isolate;
  min-width: 0;
  color: var(--art-strong);
}
html[data-theme="dark"] .science-art {
  --art-line: #57b4a3;
  --art-strong: #78dfcd;
  --art-soft: #245d53;
  --art-point: #e0fff4;
  --art-backdrop: #082825;
  --art-reagent: #e9bf71;
  --art-product: #63d7c2;
}
.science-art > svg { display: block; width: 100%; height: 210px; overflow: hidden; }
.science-art--wide > svg { height: clamp(180px, 22vw, 270px); }
.science-art--wide { margin: -28px 0 24px; }
.science-art__motion {
  position: absolute;
  right: 0;
  top: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--grid);
  border-radius: 100px;
  background: var(--paper);
  color: var(--ink-soft);
  font: inherit;
  font-size: 12px;
  line-height: 1.2;
}
.science-art__motion:hover:enabled { background: var(--surface-hover); border-color: var(--border-hover); color: var(--ink); }
.science-art__motion:disabled { cursor: default; }
.science-art__motion svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; }
.science-art__motion .science-art__play { fill: currentColor; stroke: none; }
.science-art__play { display: none; }
[data-motion-paused="true"] .science-art__pause { display: none; }
[data-motion-paused="true"] .science-art__play { display: block; }
.science-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 34%); align-items: center; gap: 24px; margin-bottom: 16px; }
.science-intro .science-art { margin-top: -24px; }
.science-intro .hero__lead { max-width: 660px; }
.science-intro--home { grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); margin-bottom: 0; }
.science-intro--home .science-art { margin: 0; }
.science-intro--home .science-art > svg { height: 180px; }
@media (max-width: 704px) {
  .science-intro { grid-template-columns: 1fr; gap: 12px; }
  .science-intro .science-art { order: -1; width: min(100%, 430px); margin: -14px auto 0; }
  .science-art > svg { height: 150px; }
  .science-art--wide { margin: -20px 0 20px; }
  .science-art--wide > svg { height: 145px; }
  .science-intro--home .science-art > svg { height: 130px; }
  .science-art__motion { width: 40px; height: 40px; }
}
@media (forced-colors: active) {
  .science-art { --art-line: CanvasText; --art-strong: CanvasText; --art-soft: GrayText; --art-point: Canvas; --art-backdrop: Canvas; --art-reagent: Highlight; --art-product: CanvasText; }
}